網(wǎng)站設(shè)計(jì)簡(jiǎn)單又困難，一個(gè)成功的網(wǎng)站不僅僅需要引人注目的設(shè)計(jì)，還需要優(yōu)秀的內(nèi)容。它能成為一種獨(dú)有的風(fēng)格，可以讓用戶享受良好的用戶體驗(yàn)設(shè)計(jì)，并且一眼就能了解網(wǎng)站的主要信息內(nèi)容。本文整理了2018最佳的網(wǎng)站設(shè)計(jì)技巧，這些技巧能夠幫助新手設(shè)計(jì)師“少走彎路”，設(shè)計(jì)出一個(gè)屬于自己的優(yōu)質(zhì)網(wǎng)站。

一，網(wǎng)站設(shè)計(jì)的6大技巧

1. 視覺放首位

相比復(fù)雜的文字內(nèi)容，一張簡(jiǎn)單的圖片可以向用戶傳遞更多有價(jià)值的信息。我們往往能夠敏銳感知視覺傳達(dá)的信息，其中大腦所接收的信息中90%都是可視的。圖片擁有跨越語言障礙的魅力，用戶對(duì)視覺圖片的感知往往比文字深。

技巧：

圖片與產(chǎn)品目標(biāo)一致在首頁(yè)顯示主圖片使用沒有失真的高質(zhì)量圖片使產(chǎn)品圖片足夠突出改善產(chǎn)品的視覺界面設(shè)計(jì)將圖片融入到設(shè)計(jì)中

不要單純?yōu)榫W(wǎng)頁(yè)設(shè)計(jì)找一些好看卻無用的圖片，用戶往往會(huì)忽略。相反，選擇那些能表明產(chǎn)品用途的圖片。用亮眼的視覺設(shè)計(jì)來抓住用戶的心。

2. 手機(jī)端友好—自適應(yīng)設(shè)計(jì)

2018年3月26號(hào)Google正式宣布，經(jīng)過大量測(cè)試后，符合mobile-first index最佳實(shí)踐（best practice）的網(wǎng)站開始向mobile-first index轉(zhuǎn)移。未來PC端和移動(dòng)端搜索都將以移動(dòng)頁(yè)面為基礎(chǔ)了。

我們現(xiàn)在的生活完全離不開手機(jī)，當(dāng)用戶在手機(jī)上瀏覽你的網(wǎng)站時(shí)，希望看到的是和網(wǎng)頁(yè)端是一致的，并且需要用戶體驗(yàn)更好的設(shè)計(jì)。對(duì)于每一個(gè)網(wǎng)站來說，自適應(yīng)設(shè)計(jì)是必須且必要的。

3. 豐富的交互功能

優(yōu)秀的交互設(shè)計(jì)網(wǎng)站能給用戶帶來愉悅感，提高用戶體驗(yàn)。Mockplus能夠幫助你快速創(chuàng)建交互原型頁(yè)面，讓你的網(wǎng)站設(shè)計(jì)更加吸引用戶。

技巧：

要有對(duì)比度。

保持一致性動(dòng)效使用適當(dāng)

避免彈窗設(shè)計(jì)優(yōu)秀的表單設(shè)計(jì)

4. 導(dǎo)航欄清晰

最前沿的中國(guó)產(chǎn)品人和設(shè)計(jì)師

摹客專訪

每個(gè)網(wǎng)站最重要的部分是其導(dǎo)航菜單。這是的訪問者瀏覽你的網(wǎng)站的主要方式，因此確保它的易用性至關(guān)重要，它必須是簡(jiǎn)單并且直觀的。

技巧：

使用友好的文案

我們既希望文案簡(jiǎn)單易懂，也希望它富有個(gè)性。但重要的是不要忘記向用戶解釋你的網(wǎng)站的用途和工作是什么。

不超過7個(gè)菜單項(xiàng)

擁有大量菜單項(xiàng)只會(huì)給訪問者造成混淆，他們需要花費(fèi)更多時(shí)間閱讀所有可供他們點(diǎn)擊的選項(xiàng)。

永遠(yuǎn)不要超過三層

可用性設(shè)計(jì)的最基本規(guī)則之一是在距離主頁(yè)三次點(diǎn)擊之后獲得所有信息。

你的品牌標(biāo)志應(yīng)始終導(dǎo)航至主頁(yè)

你的品牌標(biāo)志不僅僅是為了美觀擺放的，用戶更希望能通過點(diǎn)擊你的品牌回到首頁(yè)。

避免下拉菜單

為什么要避免下拉菜單：

搜索引擎在抓取下拉菜單可能有困難。用戶移動(dòng)眼睛的速度比移動(dòng)鼠標(biāo)的速度快很多，當(dāng)用戶將鼠標(biāo)移動(dòng)到菜單欄決定點(diǎn)擊時(shí)。你們給的選項(xiàng)太多，會(huì)造成用戶反感和困惑。用戶可能因此錯(cuò)過重要頁(yè)面。

5. 突出主要網(wǎng)站信息內(nèi)容

用戶達(dá)到你的網(wǎng)站可能是通過某個(gè)和你產(chǎn)品相關(guān)的關(guān)鍵詞，所以在用戶瀏覽你網(wǎng)站時(shí)要給到用戶你網(wǎng)站的主要信息內(nèi)容，突出展示你網(wǎng)站的產(chǎn)品。確保用戶一眼就能了解你網(wǎng)站賣點(diǎn)。

技巧：

產(chǎn)品信息文字加粗顯示以圖片信息的形式能夠更好的吸引用戶

6. 一定要“留白”

“留白”能夠更平衡的布局，更清晰的呈現(xiàn)元素效果，更能吸引用戶注意。

如果你在瀏覽網(wǎng)站，當(dāng)布局太糟糕時(shí)，你會(huì)很費(fèi)力的才能確定信息內(nèi)容；太緊密的字間距、段間距；沒有足夠的留白空間，那么這個(gè)網(wǎng)站的用戶體驗(yàn)肯定是很差的。

留白區(qū)域能夠很好的指引用戶，如果元素過多，那么用戶的注意力會(huì)分散。留白能夠讓用戶盡快的尋找到所需要的信息，提高用戶體驗(yàn)。

二、2018年優(yōu)秀網(wǎng)站設(shè)計(jì)案列

Minimalissimo 2

2. E-commerce theme

3.Personal Portfolio Site

4.Ben Hardman

5.ThoughtSpot

6.Wingnut & Co.

素材網(wǎng)站

http://51yuansu/

90sheji/sucai/12838740.html

16sucai

17sucai

97ui

500px/popular

flickr/explore

picjumbo

pexels

designerspics

socwall

unsplash

gratisography

pixabay

jaymantri

foodiesfeed

getrefe.tumblr

zoomwalls

wallpaperswide

travelcoffeebook

iconfont

字體網(wǎng)站

qiuziti

http://font.chinaz/

gogoup/course/30/

51poca

epinv/online

akuziti/mb

ziticq/shufa

2ilt

ui/detail/40260.html

fontke

http://51yuansu/?z=jcecxafgi

代碼網(wǎng)站

helloweb.wang

hack 查詢： browserhacks

模板下載： http://cssmoban

jquery 網(wǎng)站： htmleaf

靈感網(wǎng)站

http://zcool/

http://ui/

http://huaban/

http://thedieline/

https://behance/

http://stefanglerum/Obey-Artist-Series

http://pokedstudio/illustration.html

http://cargocollective/favorites

https://dribbble/

圖庫(kù)網(wǎng)站

復(fù)古圖庫(kù)： http://raumrot

風(fēng)景圖庫(kù)： http://unsplash

黑白圖庫(kù)： http://magdeleine.co

美食圖庫(kù)： http://foodiesfeed

人物圖庫(kù)： http://picography.co

歐洲景觀： http://lifeofpix

綜合圖庫(kù)： http://gratisography

日系圖庫(kù)： https://pakutaso

京東圖庫(kù)： http://tokyo-date

攝影圖庫(kù)： http://nos.twnsnd.co

http://superfamous

http://publicdomainarchive

http://gratisography

http://picjumbo/page/5

http://jaymantri

http://picjumbo

http://imcreator/free

http://deathtothestockphoto

http://pixabay

http://publicdomainarchive

http://snapographic

http://photock.jp/category

http://tokyo-date

http://sozaing

http://pexels

博客色彩

阿里 UED ： http://aliued

網(wǎng)秦 UEC ： http://uec.nq

百度 MUX ： http://mux.baidu

暢游 CDC ： http://vc.changyou

騰訊 MXD ： http://mxd.tencent

騰訊 CDC ： http://cdc.tencent

騰訊 ISUX ： http://isux.tencent

應(yīng)酷設(shè)計(jì)： http://blog.enqoo

騰訊游戲： http://tgideas.qq

騰訊 UED ： http://ued.qq

圖月志： http://iconmoon/blog2

可樂橙： http://colachan

有一點(diǎn)： http://aliued

攜程 UED ： http://ued.ctrip

百度 UED ： http://ued.baidu

劉津 blog ： http://blog.sina/u/1161626144

網(wǎng)易 UEDC ： http://uedc.163

阿里媽媽 MUX ： http://mux.alimama

疊柔配色法： http://t/RPerWhy

色彩之冷色： http://t/R7ldI6Y

色彩冷科學(xué)： http://t/R73WefN

圖片取色配色： http://t/R7QMSKi

色彩設(shè)計(jì)方法： http://t/Rzag6lZ

色彩搭配思維： http://t/RzDdHde

安全配色指南： http://t/RAnjhDc

選色配色規(guī)律： http://t/RUEOYWn

扁平插畫配色： http://t/RcWSMjQ

中國(guó)傳統(tǒng)色譜： http://t/RcWSVnh

云配色： http://card.qdsay

好色度： http://haosedu

扁平化配色： http://color.koya.io/

在線漸變色： http://uigradients

日本傳統(tǒng)色： http://nipponcolors

中國(guó)色彩寶典： http://t/RPDSJeq

日本色彩寶典： http://nicopon

抓取圖片顏色： http://colorfavs

MaterialDesign 配色方案： http://t/RcWStK9

疊柔配色法： http://t/RPerWhy

色彩之冷色： http://t/R7ldI6Y

色彩冷科學(xué)： http://t/R73WefN

圖片取色配色： http://t/R7QMSKi

色彩設(shè)計(jì)方法： http://t/Rzag6lZ

色彩搭配思維： http://t/RzDdHde

安全配色指南： http://t/RAnjhDc

選色配色規(guī)律： http://t/RUEOYWn

扁平插畫配色： http://t/RcWSMjQ

中國(guó)傳統(tǒng)色譜： http://t/RcWSVnh

云配色： http://card.qdsay

好色度： http://haosedu

扁平化配色： http://color.koya.io/

在線漸變色： http://uigradients

日本傳統(tǒng)色： http://nipponcolors

中國(guó)色彩寶典： http://t/RPDSJeq

日本色彩寶典： http://nicopon

抓取圖片顏色： http://colorfavs

MaterialDesign 配色方案： http://t/RcWStK9

簡(jiǎn)書： http://jianshu

知乎： https://zhihu

虎嗅： http://huxiu

36 氪： http://36kr

愛范兒： http://ifanr

威鋒網(wǎng)： http://feng

設(shè)計(jì)趨勢(shì)： http://tuyiyi/show-70

邏輯思維： http://i.youku/u/UNTEzNTY1OTgw

極客公園： http://geekpark

好奇心日?qǐng)?bào)： http://qdaily

tuyiyi/hao

本文有6個(gè)章節(jié)，從工作流程、網(wǎng)站種類、網(wǎng)站組成部分、技術(shù)原理、設(shè)計(jì)規(guī)范等全面總結(jié)了網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，接近兩萬字的干貨，新手看完就可以入門了。

一、網(wǎng)頁(yè)設(shè)計(jì)是什么？

網(wǎng)頁(yè)設(shè)計(jì)也被稱為 Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動(dòng)端上的 APP 來獲取資訊，但是顯然基于個(gè)人電腦平臺(tái)的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機(jī)久很多：從1987年錢天白教授向德國(guó)發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國(guó)納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國(guó)的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧「上網(wǎng)沖浪」的，那時(shí)的電腦屏幕非常小，分辨率只有800×600像素（對(duì)比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過去已經(jīng)有了巨大的變化：注重用戶體驗(yàn)、注重頁(yè)面動(dòng)效、富媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī) APP 差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺(tái)之一。那么作為 UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺(tái)。今天就向您好好說道一下網(wǎng)站必須懂得的那些事兒。

二、工作流程

首先讓我們來看一下網(wǎng)站設(shè)計(jì)的工作流程吧，除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場(chǎng)文檔、做競(jìng)品調(diào)研等工作之外，與設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要設(shè)計(jì)師參與和了解，千萬不要只在意視覺稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來了解它們吧。

1. 原型圖階段

原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，這時(shí)要注意，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長(zhǎng)的方面進(jìn)行溝通。視覺方面具體呈現(xiàn)也許設(shè)計(jì)師會(huì)有更好的方式，這時(shí)需要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成一致。

△ 構(gòu)建網(wǎng)站原型圖（工具：Axure RP）

2. 視覺稿階段

視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要一些圖像和靈感的素材。比如做世界杯專題時(shí)，我們除了收集很多素材之外，也可以設(shè)計(jì)一個(gè)「情緒板」（Mood Board）。簡(jiǎn)單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時(shí)可能會(huì)使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強(qiáng)調(diào)合理性，這時(shí)也需要和產(chǎn)品經(jīng)理溝通從后臺(tái)調(diào)取的圖片尺寸、標(biāo)題字段長(zhǎng)度等，然后根據(jù)這些要求完成頁(yè)面信息部分的設(shè)計(jì)?？傊O(shè)計(jì)過程中需要我們不斷思考和溝通才可以完成一個(gè)比較棒的視覺稿。

△ 視覺稿設(shè)計(jì)階段（工具：Photoshop）

3. 設(shè)計(jì)規(guī)范

當(dāng)視覺稿通過后，很多設(shè)計(jì)師可能不會(huì)主動(dòng)去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都需要設(shè)計(jì)師來總結(jié)設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是所有頁(yè)面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時(shí)會(huì)理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會(huì)讓用戶困惑。那么設(shè)計(jì)規(guī)范主要也是在約束設(shè)計(jì)師我們自己，在用戶有限的記憶力中減少思考的成本。同時(shí)，設(shè)計(jì)規(guī)范也可以保證同一個(gè)項(xiàng)目的不同設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來。最后，設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師個(gè)人來說也是對(duì)項(xiàng)目影響的一個(gè)佐證，可以證明你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為設(shè)計(jì)師應(yīng)該主動(dòng)去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做？其實(shí)設(shè)計(jì)規(guī)范就是把主要頁(yè)面的元素固定成統(tǒng)一元素即可。具體來說一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

△ 視覺規(guī)范（工具：Photoshop）

4. 切圖

網(wǎng)頁(yè)設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆?PS 軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項(xiàng)為前端切出網(wǎng)站所使用的圖片。

△ 從PSD中提取出來的切圖（插件：cutterman）

5. 前端代碼

前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁(yè)面，把圖紙變?yōu)殪o態(tài)頁(yè)面。然后和后端工程師對(duì)接調(diào)取數(shù)據(jù)接口，一個(gè)網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會(huì)進(jìn)行埋點(diǎn)。埋點(diǎn)就是在頁(yè)面代碼里插入一些統(tǒng)計(jì)代碼，方便我們之后確定哪些頁(yè)面訪問量高，哪些沒有達(dá)到預(yù)期。在此后其實(shí)還會(huì)有測(cè)試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

△ 前端工程師代碼編譯（工具：Notepad +）

6. 項(xiàng)目走查

網(wǎng)頁(yè)設(shè)計(jì)完成后還需要設(shè)計(jì)師進(jìn)行項(xiàng)目走查，來確定網(wǎng)頁(yè)還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟非常重要，因?yàn)榫W(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的頁(yè)面就不需要我們負(fù)責(zé)了。

△ 將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對(duì)（工具：Photoshop）

三、網(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)品等?，F(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://blizzard）的官網(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ā)語言，由于約定俗成的概念，我們現(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)生病毒傳播的效果。

△ 使用前端語言編譯的適合手機(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è)置成銳利。?...