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

1. 門戶網(wǎng)站

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

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

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

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

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

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

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

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

4. 電商網(wǎng)站

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

△ 淘寶網(wǎng)首頁

5. 游戲網(wǎng)站

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

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

6. 專題頁面

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

△ 極有家淘寶專題頁面

7. 視頻網(wǎng)站

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

△ 騰訊視頻播放頁面

8. 移動端H5

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

△ 使用前端語言編譯的適合手機瀏覽的H5界面

移動端H5尺寸

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

△ H5項目的尺寸

9. 后臺網(wǎng)站

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

△ 微信公眾號后臺

10. CRM系統(tǒng)

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

△ Admin CRM dashboard by Divan Raj

11. SaaS

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

12. 企業(yè)OA

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

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

標(biāo)題名稱：網(wǎng)站設(shè)計解析網(wǎng)站種類
分享地址：http://www.rwnh.cn/news46/43896.html

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

廣告

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