純干貨：優(yōu)秀UE網(wǎng)頁(yè)設(shè)計(jì)師養(yǎng)成記（含電商、游戲、移動(dòng)端、H5）

UE的意思是用戶體驗(yàn)，英文叫User Experience，縮寫為UE,或者UX。而網(wǎng)頁(yè)設(shè)計(jì)是UED（用戶體驗(yàn)設(shè)計(jì)）里面的一個(gè)類別，但是要說(shuō)明一下的是，不同公司對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師的定位與職能略有不同，有些大公司會(huì)在UED部門設(shè)有網(wǎng)頁(yè)設(shè)計(jì)師，但是有些網(wǎng)頁(yè)設(shè)計(jì)師會(huì)安排在游戲開(kāi)發(fā)部，而一些中小型的電商公司，網(wǎng)頁(yè)設(shè)計(jì)師一般是指設(shè)計(jì)電商頁(yè)面（PC端、手機(jī)端、平板端都要做）的設(shè)計(jì)師，他們一般還需要兼顧一些移動(dòng)端的設(shè)計(jì)，例如微信公眾號(hào)更新、企業(yè)H5宣傳設(shè)計(jì)等，甚至一些平面的宣傳物料有時(shí)候也可能需要處理一下。

這是國(guó)內(nèi)市場(chǎng)發(fā)展決定的，所以我建議大家在看這篇文章時(shí)，同時(shí)查看我寫的其他方向的設(shè)計(jì)師養(yǎng)成記，這樣你所獲得的知識(shí)體系將會(huì)更加的完善。另外，文章中有部分資料是我從網(wǎng)上收集后加以編輯的，有部分則是個(gè)人經(jīng)驗(yàn)和個(gè)人理解，不喜勿噴，謝謝支持??！

在我看來(lái)，網(wǎng)頁(yè)設(shè)計(jì)是平面設(shè)計(jì)的衍生（我曾經(jīng)說(shuō)過(guò)平面設(shè)計(jì)是一切設(shè)計(jì)的基礎(chǔ)），是將平面設(shè)計(jì)的基礎(chǔ)技能用于網(wǎng)絡(luò)上，是即時(shí)的、是有交互性的、是會(huì)產(chǎn)生聯(lián)系的。打個(gè)比方，如果平面設(shè)計(jì)是“葉問(wèn)”，那么網(wǎng)頁(yè)設(shè)計(jì)、UI設(shè)計(jì)就是“李小龍”。葉問(wèn)是武術(shù)宗師，是開(kāi)宗立派的人，而李小龍是武術(shù)的變革者，他將武術(shù)廣泛應(yīng)用在影視娛樂(lè)行業(yè)中。平面設(shè)計(jì)講求是平面構(gòu)成平面原理，而網(wǎng)頁(yè)設(shè)計(jì)、特別是UI更多的是講求數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)，兩者有明顯的分別。（注：UI，用戶界面，User Interface的簡(jiǎn)稱。泛指用戶軟件的操作界面，UI設(shè)計(jì)主要指界面的樣式，美觀程度。關(guān)于“優(yōu)秀UI設(shè)計(jì)師養(yǎng)成記”將在后續(xù)發(fā)布，敬請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。）

在我們熟悉的站酷中，網(wǎng)頁(yè)設(shè)計(jì)被分類為：企業(yè)官網(wǎng)、門戶/社交、電商、專題/活動(dòng)、游戲/娛樂(lè)、個(gè)人網(wǎng)站/博客、移動(dòng)端網(wǎng)頁(yè)、Banner/廣告圖、其他網(wǎng)頁(yè)等設(shè)計(jì)類別。

我主要把網(wǎng)頁(yè)設(shè)計(jì)分成以下五大類別：

1、品牌網(wǎng)站、企業(yè)官網(wǎng)、游戲/娛樂(lè)、個(gè)人網(wǎng)站/博客：這是以“展示”作為主要功能的

2、電商網(wǎng)站：包括日常的銷售以及活動(dòng)促銷，是品牌與賣貨的結(jié)合，以實(shí)現(xiàn)轉(zhuǎn)化率流量變現(xiàn)為目的

3、移動(dòng)端、H5：這是基于手機(jī)平臺(tái)進(jìn)行的設(shè)計(jì)，特別注重交互性與娛樂(lè)性

4、企業(yè)系統(tǒng)后臺(tái)：這是功能性為主的一類

5、社區(qū)和其他：這種是早期的網(wǎng)頁(yè)設(shè)計(jì)形態(tài)，特別注重PC端的交互性

在正式開(kāi)始學(xué)習(xí)之前，我就目前網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展情況，簡(jiǎn)單的分析一下。品牌網(wǎng)站、企業(yè)官網(wǎng)（純展示、宣傳用途）已經(jīng)由熱變冷，這種純展示類的門面工程，逐步被微信公眾平臺(tái)所取代（也有部分有一定流量的品牌會(huì)選擇做自己的品牌商城，而放棄純宣傳展示的官網(wǎng)）。而在網(wǎng)頁(yè)設(shè)計(jì)的細(xì)分類別中，電商、游戲、H5類目還有不錯(cuò)的表現(xiàn)。特別是電商與游戲，電商設(shè)計(jì)隨著越來(lái)越多的商家對(duì)于品牌的重視，還有游戲業(yè)的持續(xù)發(fā)達(dá)，電商與游戲類別的設(shè)計(jì)師待遇也是水漲船高。

一、 一切從基礎(chǔ)開(kāi)始

1、 流程

首先，你需要了解網(wǎng)頁(yè)設(shè)計(jì)在項(xiàng)目中所處的位置、以及項(xiàng)目的流程。嚴(yán)格來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)沒(méi)有統(tǒng)一的流程標(biāo)準(zhǔn)，因?yàn)楣倬W(wǎng)設(shè)計(jì)、電商設(shè)計(jì)、游戲?qū)ｎ}設(shè)計(jì)、移動(dòng)端設(shè)計(jì)等各種設(shè)計(jì)項(xiàng)目都存在一定的差異。因此，我現(xiàn)在要說(shuō)的是一般通用的流程，大家可以先了解一下，再根據(jù)各自負(fù)責(zé)的項(xiàng)目特點(diǎn)，將這個(gè)流程細(xì)化。

需求方提出項(xiàng)目/設(shè)計(jì)需求——策劃人員根據(jù)需求做出方案——做出原型圖——設(shè)計(jì)師、前端開(kāi)發(fā)等人對(duì)該原型圖進(jìn)行技術(shù)評(píng)估——網(wǎng)頁(yè)設(shè)計(jì)師設(shè)計(jì)平面效果圖——編輯代碼制作網(wǎng)頁(yè)——交付給前端實(shí)現(xiàn)——完成。

2、規(guī)范

【 網(wǎng)頁(yè)尺寸 】

在國(guó)內(nèi)一般情況下，網(wǎng)頁(yè)寬度為1920像素，高度根據(jù)實(shí)際需求而定，當(dāng)然如果為了適應(yīng)更多的4K、8K顯示器用戶可以把寬度設(shè)置得更加寬，要注意一點(diǎn)的是，無(wú)論頁(yè)面寬度有多寬，網(wǎng)頁(yè)主視覺(jué)的最佳可視范圍寬度一般設(shè)置為1000-1200像素，雖然設(shè)置較為保守，但是這樣可以保證大部分用戶在較為舒適的情況下瀏覽網(wǎng)頁(yè)。

【 柵格系統(tǒng) 】

簡(jiǎn)單來(lái)說(shuō)，網(wǎng)頁(yè)的柵格系統(tǒng)是以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。它是從平面柵格系統(tǒng)中發(fā)展而來(lái)。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)（PC端）來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范。另外補(bǔ)充一點(diǎn)，在移動(dòng)端的布局中，柵格系統(tǒng)同樣適用，只不過(guò)移動(dòng)端需要按不同的系統(tǒng)區(qū)分，市場(chǎng)上主要以iOS與安卓系統(tǒng)為主。（關(guān)于“優(yōu)秀UI設(shè)計(jì)師養(yǎng)成記”，請(qǐng)查看我后續(xù)發(fā)布的原創(chuàng)文章，更多精彩內(nèi)容請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。）

關(guān)于柵格系統(tǒng)的補(bǔ)充資料請(qǐng)點(diǎn)擊這里：http://www.baike.com/wiki/網(wǎng)頁(yè)柵格系統(tǒng)

【 主流瀏覽器 】

為了使用戶有更佳的交互體驗(yàn)，網(wǎng)頁(yè)設(shè)計(jì)師需要與前端工程師在多個(gè)主流瀏覽器中測(cè)試最終的頁(yè)面效果。目前國(guó)內(nèi)最常用的瀏覽器有以下幾個(gè)：

Google Chrome：由Google公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器。

IE：英文全稱Internet Explorer，是微軟公司推出的一款網(wǎng)頁(yè)瀏覽器。

Mozilla Firefox：中文俗稱“火狐”（正式縮寫為Fx或fx，非正式縮寫為FF），是一個(gè)自由及開(kāi)放源代碼網(wǎng)頁(yè)瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。

Safari：蘋果計(jì)算機(jī)的操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。

Opera：挪威Opera Software ASA公司制作的支持多頁(yè)面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。

【 字體 】

作為設(shè)計(jì)師，其實(shí)我們并不需要使用太多的字體，更不要使用太過(guò)于標(biāo)新立異的字體。在使用字體時(shí)，設(shè)計(jì)師需要有自己的一套系統(tǒng)規(guī)范，另外在網(wǎng)頁(yè)上使用的字體，我建議使用偶數(shù)值例如10、12、14、18等，因?yàn)榕紨?shù)值比奇數(shù)值字體，在網(wǎng)頁(yè)上顯示得更加清晰，而且奇數(shù)值字體的文本段落無(wú)法對(duì)齊。（更多關(guān)于字體的使用技巧，請(qǐng)查看我的原創(chuàng)文章《優(yōu)秀平面設(shè)計(jì)師養(yǎng)成記》。）

【 版式 】

版式是所有設(shè)計(jì)中最基礎(chǔ)的部分之一，關(guān)于排版，我有一個(gè)“方塊理論”想跟大家分享的。大家想象一下，試著把作品最外面的平面想象成為一個(gè)最大的方塊，然后主視覺(jué)和輔助圖形分別由多個(gè)大大小小的方塊組成，最后組合成為一幅作品。我把這個(gè)方法論稱為“方塊理論”?！胺綁K理論”是我當(dāng)時(shí)作為公司合伙人創(chuàng)造并應(yīng)用到實(shí)戰(zhàn)中的一個(gè)方法論， 關(guān)于“方塊理論”的起源與具體的用法，我會(huì)在之后另外一篇原創(chuàng)文章中單獨(dú)進(jìn)行講述。更多精彩內(nèi)容請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。

【 色彩 】

以品牌為導(dǎo)向，數(shù)據(jù)為驅(qū)動(dòng)。關(guān)于“色彩”的詳細(xì)描述，我之前寫過(guò)一篇相關(guān)的文章《純干貨：色彩入門寶典》，大家如果有興趣可以去看看哦。

【 標(biāo)注與切圖 】

標(biāo)注，更多情況下會(huì)使用在UI設(shè)計(jì)中，后續(xù)的相關(guān)文章會(huì)談及。

切圖，是指將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片，并完成HTML+CSS布局的靜態(tài)頁(yè)面，有利于交互，形成良好的視覺(jué)感。通俗來(lái)講，把一張?jiān)O(shè)計(jì)圖利用到切片工具，把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁(yè)面書寫，完成CSS布局。（來(lái)源：百度百科）

3、細(xì)節(jié)

【 交互常識(shí) 】

我們經(jīng)常說(shuō)細(xì)節(jié)決定成敗，在講求交互的網(wǎng)頁(yè)設(shè)計(jì)中，我們作為設(shè)計(jì)師應(yīng)該注意以下幾點(diǎn)交互常識(shí)。

簡(jiǎn)化操作：能一步完成的交互就不要分兩步。

用戶習(xí)慣：大部分用戶都有固化思維，我們作為設(shè)計(jì)師應(yīng)該尊重?cái)?shù)據(jù)，尊重用戶選擇。

減少干擾：減少界面元素的不確定因素，方便用戶快速找到自己想要的。

快速響應(yīng)：加快用戶讀取的響應(yīng)速度，能夠避免從遠(yuǎn)程取數(shù)據(jù)的，就盡量避免。

界面友好：除了根據(jù)需求提供視覺(jué)解決方案以外，在設(shè)計(jì)的過(guò)程中適當(dāng)?shù)丶尤胍恍┬〖?xì)節(jié)使交互界面更加友好是設(shè)計(jì)師的職責(zé)所在。

【 圖標(biāo) 】

圖標(biāo)與品牌標(biāo)志一樣，在設(shè)計(jì)時(shí)都需要做適當(dāng)?shù)臏p法，應(yīng)該盡量用簡(jiǎn)約的線條去表達(dá)其含義，應(yīng)該盡量避免出現(xiàn)線條結(jié)構(gòu)過(guò)于復(fù)雜的設(shè)計(jì)，而且整體的圖標(biāo)都需要保持風(fēng)格一致，例如圖標(biāo)的線條粗細(xì)、邊角弧度、圖標(biāo)高度寬度比例、風(fēng)格等等。

【 圖片 】

1）圖片統(tǒng)一性：

· 圖片色調(diào)色溫需統(tǒng)一，例如一個(gè)嬰兒產(chǎn)品的首頁(yè)，整體需要搭配暖色調(diào)的圖片，這樣看上去整體才比較統(tǒng)一舒服。

· 圖片比例需統(tǒng)一，例如一個(gè)賣貨的產(chǎn)品詳情頁(yè)，在同一屏的欄目中（頁(yè)面）所出現(xiàn)的產(chǎn)品或者人物，比例就需要有一個(gè)統(tǒng)一的大小比例，這樣看上去才比較統(tǒng)一舒服。

2）圖片細(xì)節(jié)處理：

· 圖片精度不夠（這里所說(shuō)的精度不是說(shuō)DPI分辨率需要300哦，那是做高精度印刷輸出時(shí)才需要的，而在電腦及手機(jī)上的圖片DPI分辨率為72即可，另外輸出圖片時(shí)需適當(dāng)壓縮一下圖片的大?。s色太多可以使用PS內(nèi)置的CR濾鏡處理。

· 圖片尺寸建議統(tǒng)一為偶數(shù)值，方便前端技術(shù)人員開(kāi)發(fā)。

· 圖片邊緣避免與白色背景融合，可以在邊緣位置加色。

· 為了配合標(biāo)題字體，圖片可以局部調(diào)亮或調(diào)暗。

【 動(dòng)效 】

無(wú)論是現(xiàn)在經(jīng)常看到的企業(yè)/品牌H5宣傳頁(yè)面、移動(dòng)端啟動(dòng)頁(yè)，還是曾經(jīng)紅極一時(shí)的首頁(yè)動(dòng)畫，都需要用到動(dòng)效效果。會(huì)做點(diǎn)動(dòng)效會(huì)給我們加分不少，尤其是做一些加載動(dòng)畫，這是我們經(jīng)常會(huì)遇到的需求。

做動(dòng)效時(shí)，我們需要注意以下幾點(diǎn)：

1）不論你的動(dòng)畫有多好看、多吸引眼球，如果成本太高或者過(guò)于復(fù)雜都是無(wú)法落地的，所以我們要遵循簡(jiǎn)單實(shí)用的原則來(lái)進(jìn)行設(shè)計(jì)，千萬(wàn)不要過(guò)度設(shè)計(jì)。

2）任何交互動(dòng)作所導(dǎo)致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動(dòng)畫來(lái)說(shuō)，我們需要考慮加載成功的反饋與加載失敗的反饋，并將之注明在輸出規(guī)范中。

3）動(dòng)效使用的工具：可以PS做一些動(dòng)態(tài)表情，用AE做一些加載動(dòng)畫，頁(yè)面之間的交互動(dòng)效可以使用Flinto、Principle等。

【 個(gè)性 】

有看過(guò)我其他原創(chuàng)文章的朋友都應(yīng)該發(fā)現(xiàn)，我在文章中不斷強(qiáng)調(diào)，每一個(gè)設(shè)計(jì)師都需要在作品中加入個(gè)人原創(chuàng)的東西，形成自己的一套設(shè)計(jì)系統(tǒng)和獨(dú)特風(fēng)格，才能使自己在競(jìng)爭(zhēng)中立于不敗之地（在這里我就不再展開(kāi)講述了，具體的歡迎大家查看我其他相關(guān)的原創(chuàng)文章，更多精彩內(nèi)容請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。）

二、網(wǎng)頁(yè)設(shè)計(jì)師的“高手之路”

對(duì)網(wǎng)頁(yè)設(shè)計(jì)的工作有了具體的了解，并且實(shí)戰(zhàn)過(guò)一段時(shí)間之后，我們就應(yīng)該朝著“高手之路”進(jìn)軍了。你會(huì)發(fā)現(xiàn)“高手之路”更多的是溝通與思考。

1、 培養(yǎng)整體大局觀

1）提升高效溝通的能力

高手級(jí)別的網(wǎng)頁(yè)設(shè)計(jì)師，需要花相當(dāng)一部分時(shí)間用于與項(xiàng)目負(fù)責(zé)人、策劃人員、前端開(kāi)發(fā)人員進(jìn)行溝通，甚至有可能直接跟客戶溝通。這時(shí)候，你需要加強(qiáng)溝通的技巧，以實(shí)現(xiàn)高效的溝通。關(guān)于溝通的心得，我在原創(chuàng)文章《純干貨：設(shè)計(jì)師如何與“甲方”有效溝通》中有詳細(xì)講述，有興趣的朋友不妨點(diǎn)擊閱讀。

2）加強(qiáng)時(shí)間管理的能力

除了溝通技巧之外，高效地管理時(shí)間也是網(wǎng)頁(yè)設(shè)計(jì)師需要提升的能力。你需要把網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中的時(shí)間安排提前規(guī)劃好，并嚴(yán)格按照進(jìn)度來(lái)執(zhí)行，以免延誤Deadline。關(guān)于時(shí)間管理的心得，我在原創(chuàng)文章《純干貨：設(shè)計(jì)師如何高效管理時(shí)間》中有詳細(xì)講述，有興趣的朋友不妨點(diǎn)擊閱讀。

3）加強(qiáng)項(xiàng)目管理的能力

要知道，網(wǎng)頁(yè)設(shè)計(jì)師不僅僅是埋頭畫圖PS，你也需要了解整個(gè)項(xiàng)目從啟動(dòng)到規(guī)劃、到執(zhí)行、到結(jié)束的全過(guò)程，而且還需要在項(xiàng)目過(guò)程中管理好你的團(tuán)隊(duì)，把控好設(shè)計(jì)質(zhì)量，這樣才更有利于網(wǎng)頁(yè)設(shè)計(jì)工作的開(kāi)展，因此你需要加強(qiáng)自己的項(xiàng)目管理能力。更多精彩內(nèi)容請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。

2、 視覺(jué)、技術(shù)、執(zhí)行

1）視覺(jué)——數(shù)據(jù)驅(qū)動(dòng)下的設(shè)計(jì)——F布局

特別是電商設(shè)計(jì)，由于電商網(wǎng)頁(yè)的設(shè)計(jì)是以“轉(zhuǎn)化率”為目的的，因此在設(shè)計(jì)的時(shí)候需要根據(jù)數(shù)據(jù)分析的結(jié)果進(jìn)行設(shè)計(jì)，而不單純是為了視覺(jué)上的“好看”。電商設(shè)計(jì)是傳統(tǒng)平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)的結(jié)合體，就好比以前我們看到的超市海報(bào)，你可以看到這些折扣促銷信息，但是你要買東西還是需要去店鋪里。而電商設(shè)計(jì)的任務(wù)就是，直接在網(wǎng)上把這些商品展示在網(wǎng)頁(yè)上、手機(jī)上，你直接點(diǎn)擊可以購(gòu)買了，這個(gè)購(gòu)買的過(guò)程就涉及到了人和設(shè)備之間的互動(dòng)交流。

2）技術(shù)——設(shè)計(jì)之外的世界也要多了解

作為設(shè)計(jì)師，我們不能只關(guān)心純視覺(jué)的知識(shí)，在國(guó)外特別是在美國(guó)的大公司，純視覺(jué)設(shè)計(jì)師已經(jīng)很少很少了，他們大多數(shù)都是身兼數(shù)職的，包括交互、數(shù)據(jù)分析整理、開(kāi)發(fā)等。所以我們不應(yīng)該只作為某一行業(yè)的專家，而應(yīng)該以互聯(lián)網(wǎng)專家為目標(biāo)去不斷學(xué)習(xí)，這樣才能不斷成長(zhǎng)適應(yīng)這個(gè)快速增長(zhǎng)的社會(huì)。

3）執(zhí)行——網(wǎng)頁(yè)設(shè)計(jì)師的“執(zhí)行”主要體現(xiàn)在功能實(shí)現(xiàn)上

必須說(shuō)明的是，網(wǎng)頁(yè)上的功能能否實(shí)現(xiàn)，不是需求方或者項(xiàng)目負(fù)責(zé)人說(shuō)了算，也不是你一個(gè)人能定奪，而是需要跟前端開(kāi)發(fā)人員進(jìn)行溝通，了解能否實(shí)現(xiàn)，更需要了解實(shí)現(xiàn)該功能的成本和時(shí)間。工作過(guò)程中經(jīng)常會(huì)存在這種情況：某一技術(shù)功能是可以實(shí)現(xiàn)的，但是需要的時(shí)間或成本很有可能超出預(yù)算，這時(shí)候就需要多方人員協(xié)調(diào)溝通，到底是為這個(gè)功能增加成本、拖延工期，還是放棄這個(gè)功能？有效溝通是執(zhí)行的基礎(chǔ)，關(guān)于溝通的心得，我在原創(chuàng)文章《純干貨：設(shè)計(jì)師如何與“甲方”有效溝通》中有詳細(xì)講述，有興趣的朋友不妨點(diǎn)擊閱讀。

3、 提升你的軟件技能

PS——圖片處理

Photoshop在平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)中的強(qiáng)大功能不需我多費(fèi)唇舌了，關(guān)于如何自學(xué)提升PS技術(shù)，請(qǐng)看我的原創(chuàng)文章《純干貨：PS高手完全自學(xué)寶典》。

AI——圖形處理

Adobe Illustrator，簡(jiǎn)稱“AI”，是一款非常好的矢量圖形處理工具，主要用于字體設(shè)計(jì)、圖形設(shè)計(jì)，產(chǎn)品包裝的設(shè)計(jì)、畫冊(cè)/書籍/雜志的排版、插畫設(shè)計(jì)等。關(guān)于如何自學(xué)提升AI技術(shù)，請(qǐng)后續(xù)繼續(xù)關(guān)注我的原創(chuàng)文章《純干貨：AI高手完全自學(xué)寶典》，更多精彩內(nèi)容請(qǐng)關(guān)注我的訂閱號(hào)：種夢(mèng)。

C4D——三維特效、動(dòng)畫

C4D的特效、動(dòng)畫實(shí)現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中越來(lái)來(lái)重要，關(guān)于如何自學(xué)提升C4D技術(shù)，請(qǐng)看我的原創(chuàng)文章《純干貨：C4D完全自學(xué)寶典》。

AE、Principle——?jiǎng)有?/strong>

Adobe After Effects簡(jiǎn)稱“AE”，是Adobe公司推出的一款圖形視頻處理軟件，簡(jiǎn)單來(lái)說(shuō)就是一個(gè)動(dòng)態(tài)版的PS，功能十分強(qiáng)大，但是操作比較復(fù)雜。

Principle 是一款比較容易上手的交互設(shè)計(jì)軟件。界面類似 Sketch，思路有點(diǎn)像用 Keynote 做動(dòng)畫，但它更加可視化一點(diǎn)，可惜的是目前它只支持Mac系統(tǒng)。

Origami、Axure——原型交互

雖然現(xiàn)在不少公司的項(xiàng)目團(tuán)隊(duì)會(huì)將交互原型的繪制交由項(xiàng)目策劃人員來(lái)負(fù)責(zé)，但是網(wǎng)頁(yè)設(shè)計(jì)師也需要了解常用的原型設(shè)計(jì)軟件Origami、Axure等的使用方法。

三、其他補(bǔ)充

1、 方向選擇，就業(yè)情況

據(jù)調(diào)查顯示，目前設(shè)計(jì)行業(yè)中，以移動(dòng)UI設(shè)計(jì)師薪酬最高，網(wǎng)頁(yè)設(shè)計(jì)師跟隨其后。不容忽視的是由于電商行業(yè)的發(fā)展勢(shì)頭迅猛，電商設(shè)計(jì)師的就業(yè)形態(tài)也是很樂(lè)觀。而且加上一直發(fā)展迅速的游戲行業(yè)，網(wǎng)頁(yè)設(shè)計(jì)師前景還是比較樂(lè)觀的。

2、 推薦網(wǎng)站

作為設(shè)計(jì)師我們首先要了解設(shè)計(jì)的最新趨勢(shì)，然后就是日新月異的技術(shù)發(fā)展，以下我所推薦的網(wǎng)站一定能幫助大家。建議設(shè)計(jì)師每天都要逛一逛哦。

FWA

https://thefwa.com

一個(gè)世界著名的互動(dòng)多媒體網(wǎng)站收錄平臺(tái)，于2000年5月建立，目的是展示世界上最優(yōu)秀、最前沿的網(wǎng)絡(luò)媒體藝術(shù)設(shè)計(jì)作品。

Behance

https://www.behance.net

2006 年創(chuàng)立的著名設(shè)計(jì)社區(qū)，是展示和發(fā)現(xiàn)創(chuàng)意作品的領(lǐng)先在線平臺(tái)，同時(shí)也是 Adobe 系列的一部分。Behance 的管理團(tuán)隊(duì)每天都會(huì)從各種領(lǐng)域中的頂級(jí)組合探索出新作品。這些領(lǐng)域包括設(shè)計(jì)、時(shí)尚、插圖、工業(yè)設(shè)計(jì)、建筑、攝影、美術(shù)、廣告、排版、動(dòng)畫、聲效等。

Dribbble

https://dribbble.com

一個(gè)面向創(chuàng)作家、藝術(shù)工作者、設(shè)計(jì)師等創(chuàng)意類作品的人群，提供作品在線服務(wù)，供網(wǎng)友在線查看已經(jīng)完成的作品或者正在創(chuàng)作的作品的交流網(wǎng)站。

Pinterest

https://www.pinterest.com

采用的是瀑布流的形式展現(xiàn)圖片內(nèi)容，無(wú)需用戶翻頁(yè)，新的圖片不斷自動(dòng)加載在頁(yè)面底端，讓用戶不斷的發(fā)現(xiàn)新的圖片。

Medium

https://medium.com

一個(gè)輕量級(jí)內(nèi)容發(fā)行平臺(tái)，允許單一用戶或多人協(xié)作，將自己創(chuàng)作的內(nèi)容以主題的形式結(jié)集為專輯（Collection），分享給用戶進(jìn)行消費(fèi)和閱讀。該網(wǎng)站好文不斷，匯聚各行各業(yè)的設(shè)計(jì)大拿，如果關(guān)注了對(duì)了自己感興趣的話題，以及優(yōu)秀的設(shè)計(jì)師，自己的打怪升級(jí)進(jìn)化之路會(huì)變得更加平穩(wěn)。

3、推薦書籍

《About Face 4 交互設(shè)計(jì)精髓》是一本數(shù)字產(chǎn)品和系統(tǒng)的交互設(shè)計(jì)指南，全面系統(tǒng)地講述了交互設(shè)計(jì)的過(guò)程、原理和方法，涉及的產(chǎn)品和系統(tǒng)有個(gè)人計(jì)算機(jī)上的個(gè)人和商務(wù)軟件、Web 應(yīng)用、手持設(shè)備、信息亭、數(shù)字醫(yī)療系統(tǒng)、數(shù)字工業(yè)系統(tǒng)等。運(yùn)用此書的交互設(shè)計(jì)過(guò)程和方法，有助于了解使用者和產(chǎn)品之間的交互行為，進(jìn)而更好地設(shè)計(jì)出更具吸引力和更具市場(chǎng)競(jìng)爭(zhēng)力的產(chǎn)品。

后記

網(wǎng)頁(yè)設(shè)計(jì)師的發(fā)展前景我還是很看好的，就像我上文所述，電商與游戲行業(yè)還是大熱，所以設(shè)計(jì)師待遇這塊還是不錯(cuò)的，較為優(yōu)秀的設(shè)計(jì)師月薪過(guò)萬(wàn)也比較普遍。值得一提的是網(wǎng)頁(yè)設(shè)計(jì)師屬于復(fù)合型人才，一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師需要了解的認(rèn)識(shí)面比較廣，首先是平面基礎(chǔ)、交互常識(shí)、PC端與移動(dòng)端的設(shè)計(jì)規(guī)范、數(shù)據(jù)的分析與整理、前端以及相關(guān)的互聯(lián)網(wǎng)技術(shù)知識(shí)等等。就像我們上文的比喻，平面是“葉問(wèn)”，而網(wǎng)頁(yè)設(shè)計(jì)、UI設(shè)計(jì)就像“李小龍”，是一個(gè)“變革者”。

所以我從文章開(kāi)始就跟大家說(shuō)了，建議大家把我所有不同方向的設(shè)計(jì)師養(yǎng)成記都看一遍，增強(qiáng)自己的知識(shí)體系。同時(shí)歡迎大家積極參加《種夢(mèng)人參加每周一練》，在每一次練習(xí)中逐漸提升自己的設(shè)計(jì)水平。我們都是種夢(mèng)人，我們都是設(shè)計(jì)師，共勉之！