網(wǎng)站設(shè)計(jì)解析網(wǎng)站種類

網(wǎng)站的分類按對(duì)象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費(fèi)者，例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題頁(yè)面、視頻網(wǎng)站、移動(dòng)端H5 等，均是面向用戶和消費(fèi)者的產(chǎn)品。由于是面向用戶和消費(fèi)者，所以設(shè)計(jì)上一定要可以吸引人，并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。而 To B端作為一個(gè)需求量很大的類別，其實(shí)往往被設(shè)計(jì)師所忽視。什么是 To B端項(xiàng)目呢？比如電商網(wǎng)站供貨商的后臺(tái)、Dashboard、企業(yè)級(jí)OA、網(wǎng)站統(tǒng)計(jì)后臺(tái)等這些面向商家和專業(yè)人士的網(wǎng)站就是 To B 類網(wǎng)站項(xiàng)目了。這些項(xiàng)目的要求和 To C端網(wǎng)站的要求大相徑庭：To B 類項(xiàng)目最重要的是效率而不是體驗(yàn)，因?yàn)檎f白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(shè)計(jì)時(shí)必須首先要保證操作者可以高效地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。

1. 門戶網(wǎng)站

門戶網(wǎng)站國(guó)內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐；國(guó)外比較知名的如 Naver、Llinternaute 等。我們可以看得出，門戶網(wǎng)站都是大而全包羅生活萬象的。比如騰訊網(wǎng)就有新聞、財(cái)經(jīng)、視頻、體育、娛樂、時(shí)尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高，必須要有雄厚的實(shí)力才可以建立起一個(gè)門戶網(wǎng)站，而門戶網(wǎng)站需要的設(shè)計(jì)師數(shù)量也驚人。首先門戶網(wǎng)站需要產(chǎn)品方向的界面設(shè)計(jì)師以迭代的方式維護(hù)迭代網(wǎng)站首頁(yè)、二級(jí)頁(yè)面、底層頁(yè)等網(wǎng)站基石。然后需要各個(gè)頻道的設(shè)計(jì)師來處理日常需求：比如巴黎時(shí)裝周需要負(fù)責(zé)時(shí)尚頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外，具體對(duì)接頻道的設(shè)計(jì)師也需要有一定擅長(zhǎng)之處：比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(xiàng)目、時(shí)尚頻道的設(shè)計(jì)師要懂得各個(gè)大牌的設(shè)計(jì)風(fēng)格、佛學(xué)頻道的設(shè)計(jì)師需要懂得基本的佛學(xué)知識(shí)和忌諱、文化頻道的設(shè)計(jì)師需要對(duì)傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計(jì)師可以分為產(chǎn)品組和頻道組兩種。

△ 韓國(guó)門戶網(wǎng)站Naver

2. 企業(yè)網(wǎng)站

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對(duì)外展示自己的能力、介紹自己的產(chǎn)品等。現(xiàn)在接觸一個(gè)陌生的企業(yè)時(shí)，很多老百姓都會(huì)上網(wǎng)搜索一下其官方網(wǎng)站驗(yàn)證真?zhèn)?。網(wǎng)站已經(jīng)是中小企業(yè)的標(biāo)配了。企業(yè)網(wǎng)站設(shè)計(jì)時(shí)通常會(huì)有網(wǎng)站首頁(yè)、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊，企業(yè)網(wǎng)站會(huì)展示很多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等實(shí)際的照片，配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也追求所謂「高端」、「大氣」、「上檔次」的風(fēng)格，也就是為了達(dá)到讓消費(fèi)者認(rèn)同品牌這個(gè)要求。所以如果我們接到了企業(yè)網(wǎng)站的設(shè)計(jì)需求，不妨多去瀏覽參考一些更加大牌的企業(yè)網(wǎng)站作為競(jìng)品來參考。

△ 美國(guó)通用公司官網(wǎng)

3. 產(chǎn)品網(wǎng)站

從蘋果公司的 iPhone 介紹頁(yè)到小米手機(jī)8的介紹頁(yè)，我們會(huì)發(fā)現(xiàn)一種新鮮的產(chǎn)品營(yíng)銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場(chǎng)景等。這樣的產(chǎn)品頁(yè)希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動(dòng)等方式讓我們感覺到這個(gè)產(chǎn)品的極致精細(xì)。由于中國(guó)互聯(lián)網(wǎng)和產(chǎn)品設(shè)計(jì)發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計(jì)需求一定會(huì)越來越多。

△ 蘋果公司產(chǎn)品介紹頁(yè)

4. 電商網(wǎng)站

電商設(shè)計(jì)師也屬于網(wǎng)頁(yè)設(shè)計(jì)師嗎？是的。如果按照平臺(tái)細(xì)分，無疑電商設(shè)計(jì)師所在的平臺(tái)大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了，以至于從內(nèi)蒙的牧民到海南島的漁民，甚至臺(tái)灣、日本、東南亞的商人都開始在中國(guó)電商平臺(tái)上開店鋪了。店鋪其實(shí)本身屬于平臺(tái)本身的頁(yè)面。但是為了增強(qiáng)每個(gè)店的個(gè)性，平臺(tái)為商店開通了一些頁(yè)面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設(shè)計(jì)等。這樣商鋪有一定權(quán)限在平臺(tái)規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設(shè)計(jì)應(yīng)運(yùn)而生。雖然帶著鐐銬跳舞，但是有很多店鋪因?yàn)樵O(shè)計(jì)精良而能帶動(dòng)銷售。那么電商設(shè)計(jì)師當(dāng)然就變得非常重要了。

△ 淘寶網(wǎng)首頁(yè)

5. 游戲網(wǎng)站

游戲是一個(gè)巨大的產(chǎn)業(yè)，很多公司的收入大半壁江山都來自游戲產(chǎn)業(yè)。那么除了游戲需要制作精良之外，游戲的官網(wǎng)也必須設(shè)計(jì)精美。不要忘記，每一個(gè)玩家都需要訪問你的游戲官網(wǎng)才能完成下載、充值、社交等重要操作。國(guó)外游戲網(wǎng)站比如暴雪娛樂公司（https://www.blizzard.com）的官網(wǎng)設(shè)計(jì)得極其精美，每個(gè)游戲的官網(wǎng)都是一個(gè)精品。比如魔獸世界、星際爭(zhēng)霸2等游戲官網(wǎng)，頭部都是視覺沖擊非常強(qiáng)烈的動(dòng)畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格，仿佛登錄這個(gè)網(wǎng)站你就在游戲之中了。

△ 暴雪公司星際爭(zhēng)霸2游戲官網(wǎng)

6. 專題頁(yè)面

當(dāng)然不管是電商還是門戶網(wǎng)站，在節(jié)日都會(huì)需要設(shè)計(jì)師來設(shè)計(jì)一些專題頁(yè)面增加曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日往往會(huì)有促銷、專題報(bào)道等各式活動(dòng)。專題設(shè)計(jì)生命周期很短，上線后基本過了流量的那個(gè)點(diǎn)就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁(yè)面，因?yàn)檫^了特定的時(shí)期專題頁(yè)面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當(dāng)然不能使用現(xiàn)代主義設(shè)計(jì)那種性冷淡風(fēng)格，而應(yīng)該在頭部盡量刺激用戶，用刺激對(duì)比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的文字吸引用戶來看。畢竟每個(gè)人可能只會(huì)看一次，不能放過這個(gè)機(jī)會(huì)。所以專題設(shè)計(jì)和產(chǎn)品設(shè)計(jì)正相反，專題設(shè)計(jì)必須刺激。

△ 極有家淘寶專題頁(yè)面

7. 視頻網(wǎng)站

視頻網(wǎng)站的訪問量驚人，并且用戶的黏著度更高。很多視頻網(wǎng)站除了購(gòu)買版權(quán)之外還有很多 UGC 內(nèi)容。多說幾句，UGC（User Generated Content）是指用戶產(chǎn)生的原創(chuàng)內(nèi)容，很早之前 web1.0時(shí)代用戶主要是單向?yàn)g覽網(wǎng)站，web2.0提出的 UGC 概念就是說用戶不僅在瀏覽也會(huì)上傳內(nèi)容。那么視頻網(wǎng)站為什么會(huì)火呢？首先要感謝寬帶的發(fā)展。在今年我們國(guó)內(nèi)點(diǎn)擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計(jì)主要是要考慮應(yīng)用場(chǎng)景：視頻是用戶主要觀看的區(qū)域，所以視頻區(qū)域首先要足夠大，另外顏色應(yīng)該以暗色為主，因?yàn)榱辽珪?huì)干擾到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸，方便后期編輯在后臺(tái)添加。視頻網(wǎng)站的設(shè)計(jì)師同樣也可以分為產(chǎn)品組和運(yùn)營(yíng)組兩個(gè)種類來處理產(chǎn)品方向和運(yùn)營(yíng)方向的不同需求。

△ 騰訊視頻播放頁(yè)面

8. 移動(dòng)端H5

你一定在朋友圈被《穿越未來來看你》、《淘寶造物節(jié)》等 H5 刷過屏吧？平時(shí)我們經(jīng)常被這種好玩兒的 H5 刷屏。其實(shí) H5 全稱是 HTML5，并不是僅僅指移動(dòng)端，而是網(wǎng)頁(yè)前端的開發(fā)語(yǔ)言，由于約定俗成的概念，我們現(xiàn)在常常把手機(jī)中的集合視頻、動(dòng)效、互動(dòng)的這種營(yíng)銷形式稱為 H5。其實(shí)它的本質(zhì)是運(yùn)用網(wǎng)頁(yè)技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的網(wǎng)頁(yè)。隨著技術(shù)日新月異的發(fā)展，H5 顯得越來越有傳播價(jià)值和份量。微信、瀏覽器等平臺(tái)級(jí)產(chǎn)品在手機(jī)端中火爆促進(jìn)了依靠入口而傳播的 H5 的發(fā)展。如果設(shè)計(jì)出色，你的項(xiàng)目可能會(huì)在朋友圈產(chǎn)生病毒傳播的效果。

△ 使用前端語(yǔ)言編譯的適合手機(jī)瀏覽的H5界面

移動(dòng)端H5尺寸

設(shè)計(jì)移動(dòng)端 H5 項(xiàng)目的時(shí)候，我們一般以用戶量較高的 iPhone6/7/8的尺寸：750x1334px為準(zhǔn)，然后我們要在頂部預(yù)留出微信或者瀏覽器導(dǎo)航區(qū)域。主要內(nèi)容區(qū)域就可以自由設(shè)計(jì)了。一般H5的操作是上下滑動(dòng)。字體方面使用蘋方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用 SF-UI 代替。當(dāng)然 H5可以調(diào)用背景音樂、視頻、鏈接等多媒體，讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外，其實(shí)還有一種方式可以無需代碼生成簡(jiǎn)易版的 H5，就是通過 H5 工具生成。目前比較火的 H5 生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發(fā)，那么我們?cè)O(shè)計(jì)稿的尺寸需要設(shè)置為640x1008PX。這些工具較為簡(jiǎn)單，注冊(cè)后將 PSD 上傳即可對(duì)每個(gè)原件進(jìn)行動(dòng)效的設(shè)置了。但是如果需要復(fù)雜的動(dòng)效和交互，還是需要前端工程師的配合。

△ H5項(xiàng)目的尺寸

9. 后臺(tái)網(wǎng)站

后臺(tái)網(wǎng)站又叫 Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計(jì)信息。后臺(tái)網(wǎng)站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)?？墒菙?shù)據(jù)非常枯燥，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。后臺(tái)網(wǎng)站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經(jīng)常處理 To C 類的需求，接到了 To B 類的產(chǎn)品需求時(shí)一定要注意這一點(diǎn)。后臺(tái)網(wǎng)站因?yàn)樾枰蟮漠嬅妫ǔ?huì)使用全屏式排版，也就是撐滿整個(gè)畫布。那如果小屏怎么辦呢？前端會(huì)使用相對(duì)布局縮小各個(gè)元素，排版的位置也會(huì)用百分比來確定。

△ 微信公眾號(hào)后臺(tái)

10. CRM系統(tǒng)

CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM 是企業(yè)對(duì)客戶進(jìn)行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)對(duì)客戶信息進(jìn)行收集、管理、分析，對(duì)企業(yè)的銷售、服務(wù)、售后進(jìn)行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。我們?cè)谠O(shè)計(jì)這種項(xiàng)目時(shí)一定要將信息按所屬的邏輯關(guān)系分類，加強(qiáng)對(duì)比、對(duì)齊、重復(fù)、親密性的原則，使操作者在使用的時(shí)候感覺到便利。

△ Admin CRM dashboard by Divan Raj

11. SaaS

如果我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等系統(tǒng)的第三方公司，那么我們可能會(huì)老聽到 SaaS 這個(gè)詞。SaaS 是(Software-as-a-Service)，即軟件就是服務(wù)。其他公司會(huì)來提供 SaaS 服務(wù)的公司定制系統(tǒng)，然后服務(wù)公司會(huì)為客戶提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。這里提到這個(gè)詞是防止設(shè)計(jì)師誤解它的定義。

12. 企業(yè)OA

企業(yè)OA，即(Office Automation)，也就是辦公自動(dòng)化系統(tǒng)。在六七十年代就興起了一場(chǎng)使用電腦來改變傳統(tǒng)辦公方式的革命。在大型企業(yè)時(shí)常會(huì)面臨人員眾多、地域廣袤、辦理公司事宜手續(xù)冗長(zhǎng)等問題，那么企業(yè)OA 可以很好地解決這方面的問題。通過企業(yè)OA 可以完成請(qǐng)假、調(diào)休、離職、查詢公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作。這樣減少了很多窗口成本和員工的時(shí)間成本，增強(qiáng)了公司辦事效率?；ヂ?lián)網(wǎng)公司更是提供給員工除了企業(yè)OA 之外的交流功能，比如建立員工 BBS 和留言板等，在上面大家可以對(duì)公司提出建議和意見。企業(yè)OA 一般出于安全和保密性的原因，很多公司都更加愿意自己開發(fā)。設(shè)計(jì)師在設(shè)計(jì)此類項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和效率為重，讓操作者輕易可以找到在當(dāng)前頁(yè)面中最重要的功能。

△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski

當(dāng)前名稱：網(wǎng)站設(shè)計(jì)解析網(wǎng)站種類
本文網(wǎng)址：http://muchs.cn/news/43896.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)