純干貨：優(yōu)秀UE網(wǎng)頁設(shè)計師養(yǎng)成記（含電商、游戲、移動端、H5）
UE的意思是用戶體驗，英文叫User Experience，縮寫為UE,或者UX。而網(wǎng)頁設(shè)計是UED（用戶體驗設(shè)計）里面的一個類別，但是要說明一下的是，不同公司對于網(wǎng)頁設(shè)計師的定位與職能略有不同，有些大公司會在UED部門設(shè)有網(wǎng)頁設(shè)計師，但是有些網(wǎng)頁設(shè)計師會安排在游戲開發(fā)部，而一些中小型的電商公司，網(wǎng)頁設(shè)計師一般是指設(shè)計電商頁面（PC端、手機端、平板端都要做）的設(shè)計師，他們一般還需要兼顧一些移動端的設(shè)計，例如微信公眾號更新、企業(yè)H5宣傳設(shè)計等，甚至一些平面的宣傳物料有時候也可能需要處理一下。
這是國內(nèi)市場發(fā)展決定的，所以我建議大家在看這篇文章時，同時查看我寫的其他方向的設(shè)計師養(yǎng)成記，這樣你所獲得的知識體系將會更加的完善。另外，文章中有部分資料是我從網(wǎng)上收集后加以編輯的，有部分則是個人經(jīng)驗和個人理解，不喜勿噴，謝謝支持?。?/p>
在我看來，網(wǎng)頁設(shè)計是平面設(shè)計的衍生（我曾經(jīng)說過平面設(shè)計是一切設(shè)計的基礎(chǔ)），是將平面設(shè)計的基礎(chǔ)技能用于網(wǎng)絡(luò)上，是即時的、是有交互性的、是會產(chǎn)生聯(lián)系的。打個比方，如果平面設(shè)計是“葉問”，那么網(wǎng)頁設(shè)計、UI設(shè)計就是“李小龍”。葉問是武術(shù)宗師，是開宗立派的人，而李小龍是武術(shù)的變革者，他將武術(shù)廣泛應用在影視娛樂行業(yè)中。平面設(shè)計講求是平面構(gòu)成平面原理，而網(wǎng)頁設(shè)計、特別是UI更多的是講求數(shù)據(jù)驅(qū)動設(shè)計，兩者有明顯的分別。（注：UI，用戶界面，User Interface的簡稱。泛指用戶軟件的操作界面，UI設(shè)計主要指界面的樣式，美觀程度。關(guān)于“優(yōu)秀UI設(shè)計師養(yǎng)成記”將在后續(xù)發(fā)布，敬請關(guān)注我的訂閱號：種夢。）
在我們熟悉的站酷中，網(wǎng)頁設(shè)計被分類為：企業(yè)官網(wǎng)、門戶/社交、電商、專題/活動、游戲/娛樂、個人網(wǎng)站/博客、移動端網(wǎng)頁、Banner/廣告圖、其他網(wǎng)頁等設(shè)計類別。
我主要把網(wǎng)頁設(shè)計分成以下五大類別：
1、品牌網(wǎng)站、企業(yè)官網(wǎng)、游戲/娛樂、個人網(wǎng)站/博客：這是以“展示”作為主要功能的
2、電商網(wǎng)站：包括日常的銷售以及活動促銷，是品牌與賣貨的結(jié)合，以實現(xiàn)轉(zhuǎn)化率流量變現(xiàn)為目的
3、移動端、H5：這是基于手機平臺進行的設(shè)計，特別注重交互性與娛樂性
4、企業(yè)系統(tǒng)后臺：這是功能性為主的一類
5、社區(qū)和其他：這種是早期的網(wǎng)頁設(shè)計形態(tài)，特別注重PC端的交互性
在正式開始學習之前，我就目前網(wǎng)頁設(shè)計的發(fā)展情況，簡單的分析一下。品牌網(wǎng)站、企業(yè)官網(wǎng)（純展示、宣傳用途）已經(jīng)由熱變冷，這種純展示類的門面工程，逐步被微信公眾平臺所取代（也有部分有一定流量的品牌會選擇做自己的品牌商城，而放棄純宣傳展示的官網(wǎng)）。而在網(wǎng)頁設(shè)計的細分類別中，電商、游戲、H5類目還有不錯的表現(xiàn)。特別是電商與游戲，電商設(shè)計隨著越來越多的商家對于品牌的重視，還有游戲業(yè)的持續(xù)發(fā)達，電商與游戲類別的設(shè)計師待遇也是水漲船高。
一、 一切從基礎(chǔ)開始
1、 流程
首先，你需要了解網(wǎng)頁設(shè)計在項目中所處的位置、以及項目的流程。嚴格來說，網(wǎng)頁設(shè)計沒有統(tǒng)一的流程標準，因為官網(wǎng)設(shè)計、電商設(shè)計、游戲?qū)ｎ}設(shè)計、移動端設(shè)計等各種設(shè)計項目都存在一定的差異。因此，我現(xiàn)在要說的是一般通用的流程，大家可以先了解一下，再根據(jù)各自負責的項目特點，將這個流程細化。
需求方提出項目/設(shè)計需求——策劃人員根據(jù)需求做出方案——做出原型圖——設(shè)計師、前端開發(fā)等人對該原型圖進行技術(shù)評估——網(wǎng)頁設(shè)計師設(shè)計平面效果圖——編輯代碼制作網(wǎng)頁——交付給前端實現(xiàn)——完成。
2、規(guī)范
【 網(wǎng)頁尺寸 】
在國內(nèi)一般情況下，網(wǎng)頁寬度為1920像素，高度根據(jù)實際需求而定，當然如果為了適應更多的4K、8K顯示器用戶可以把寬度設(shè)置得更加寬，要注意一點的是，無論頁面寬度有多寬，網(wǎng)頁主視覺的最佳可視范圍寬度一般設(shè)置為1000-1200像素，雖然設(shè)置較為保守，但是這樣可以保證大部分用戶在較為舒適的情況下瀏覽網(wǎng)頁。
【 柵格系統(tǒng) 】
簡單來說，網(wǎng)頁的柵格系統(tǒng)是以規(guī)則的網(wǎng)格陣列來指導和規(guī)范網(wǎng)頁中的版面布局以及信息分布。它是從平面柵格系統(tǒng)中發(fā)展而來。對于網(wǎng)頁設(shè)計（PC端）來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。另外補充一點，在移動端的布局中，柵格系統(tǒng)同樣適用，只不過移動端需要按不同的系統(tǒng)區(qū)分，市場上主要以iOS與安卓系統(tǒng)為主。（關(guān)于“優(yōu)秀UI設(shè)計師養(yǎng)成記”，請查看我后續(xù)發(fā)布的原創(chuàng)文章，更多精彩內(nèi)容請關(guān)注我的訂閱號：種夢。）
關(guān)于柵格系統(tǒng)的補充資料請點擊這里：http://www.baike.com/wiki/網(wǎng)頁柵格系統(tǒng)
【 主流瀏覽器 】
為了使用戶有更佳的交互體驗，網(wǎng)頁設(shè)計師需要與前端工程師在多個主流瀏覽器中測試最終的頁面效果。目前國內(nèi)最常用的瀏覽器有以下幾個：
Google Chrome：由Google公司開發(fā)的網(wǎng)頁瀏覽器。
IE：英文全稱Internet Explorer，是微軟公司推出的一款網(wǎng)頁瀏覽器。
Mozilla Firefox：中文俗稱“火狐”（正式縮寫為Fx或fx，非正式縮寫為FF），是一個自由及開放源代碼網(wǎng)頁瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。
Safari：蘋果計算機的操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。
Opera：挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網(wǎng)絡(luò)瀏覽器。
【 字體 】
作為設(shè)計師，其實我們并不需要使用太多的字體，更不要使用太過于標新立異的字體。在使用字體時，設(shè)計師需要有自己的一套系統(tǒng)規(guī)范，另外在網(wǎng)頁上使用的字體，我建議使用偶數(shù)值例如10、12、14、18等，因為偶數(shù)值比奇數(shù)值字體，在網(wǎng)頁上顯示得更加清晰，而且奇數(shù)值字體的文本段落無法對齊。（更多關(guān)于字體的使用技巧，請查看我的原創(chuàng)文章《優(yōu)秀平面設(shè)計師養(yǎng)成記》。）
【 版式 】
版式是所有設(shè)計中最基礎(chǔ)的部分之一，關(guān)于排版，我有一個“方塊理論”想跟大家分享的。大家想象一下，試著把作品最外面的平面想象成為一個最大的方塊，然后主視覺和輔助圖形分別由多個大大小小的方塊組成，最后組合成為一幅作品。我把這個方法論稱為“方塊理論”?！胺綁K理論”是我當時作為公司合伙人創(chuàng)造并應用到實戰(zhàn)中的一個方法論， 關(guān)于“方塊理論”的起源與具體的用法，我會在之后另外一篇原創(chuàng)文章中單獨進行講述。更多精彩內(nèi)容請關(guān)注我的訂閱號：種夢。
【 色彩 】
以品牌為導向，數(shù)據(jù)為驅(qū)動。關(guān)于“色彩”的詳細描述，我之前寫過一篇相關(guān)的文章《純干貨：色彩入門寶典》，大家如果有興趣可以去看看哦。
【 標注與切圖 】
標注，更多情況下會使用在UI設(shè)計中，后續(xù)的相關(guān)文章會談及。
切圖，是指將設(shè)計稿切成便于制作成頁面的圖片，并完成HTML+CSS布局的靜態(tài)頁面，有利于交互，形成良好的視覺感。通俗來講，把一張設(shè)計圖利用到切片工具，把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局。（來源：百度百科）
3、細節(jié)
【 交互常識 】
我們經(jīng)常說細節(jié)決定成敗，在講求交互的網(wǎng)頁設(shè)計中，我們作為設(shè)計師應該注意以下幾點交互常識。
簡化操作：能一步完成的交互就不要分兩步。
用戶習慣：大部分用戶都有固化思維，我們作為設(shè)計師應該尊重數(shù)據(jù)，尊重用戶選擇。
減少干擾：減少界面元素的不確定因素，方便用戶快速找到自己想要的。
快速響應：加快用戶讀取的響應速度，能夠避免從遠程取數(shù)據(jù)的，就盡量避免。
界面友好：除了根據(jù)需求提供視覺解決方案以外，在設(shè)計的過程中適當?shù)丶尤胍恍┬〖毠?jié)使交互界面更加友好是設(shè)計師的職責所在。
【 圖標 】
圖標與品牌標志一樣，在設(shè)計時都需要做適當?shù)臏p法，應該盡量用簡約的線條去表達其含義，應該盡量避免出現(xiàn)線條結(jié)構(gòu)過于復雜的設(shè)計，而且整體的圖標都需要保持風格一致，例如圖標的線條粗細、邊角弧度、圖標高度寬度比例、風格等等。
【 圖片 】
1）圖片統(tǒng)一性：
· 圖片色調(diào)色溫需統(tǒng)一，例如一個嬰兒產(chǎn)品的首頁，整體需要搭配暖色調(diào)的圖片，這樣看上去整體才比較統(tǒng)一舒服。
· 圖片比例需統(tǒng)一，例如一個賣貨的產(chǎn)品詳情頁，在同一屏的欄目中（頁面）所出現(xiàn)的產(chǎn)品或者人物，比例就需要有一個統(tǒng)一的大小比例，這樣看上去才比較統(tǒng)一舒服。
2）圖片細節(jié)處理：
· 圖片精度不夠（這里所說的精度不是說DPI分辨率需要300哦，那是做高精度印刷輸出時才需要的，而在電腦及手機上的圖片DPI分辨率為72即可，另外輸出圖片時需適當壓縮一下圖片的大?。s色太多可以使用PS內(nèi)置的CR濾鏡處理。
· 圖片尺寸建議統(tǒng)一為偶數(shù)值，方便前端技術(shù)人員開發(fā)。
· 圖片邊緣避免與白色背景融合，可以在邊緣位置加色。
· 為了配合標題字體，圖片可以局部調(diào)亮或調(diào)暗。
【 動效 】
無論是現(xiàn)在經(jīng)?？吹降钠髽I(yè)/品牌H5宣傳頁面、移動端啟動頁，還是曾經(jīng)紅極一時的首頁動畫，都需要用到動效效果。會做點動效會給我們加分不少，尤其是做一些加載動畫，這是我們經(jīng)常會遇到的需求。
做動效時，我們需要注意以下幾點：
1）不論你的動畫有多好看、多吸引眼球，如果成本太高或者過于復雜都是無法落地的，所以我們要遵循簡單實用的原則來進行設(shè)計，千萬不要過度設(shè)計。
2）任何交互動作所導致的狀態(tài)都需要考慮正常狀態(tài)與異常狀態(tài)。拿加載動畫來說，我們需要考慮加載成功的反饋與加載失敗的反饋，并將之注明在輸出規(guī)范中。
3）動效使用的工具：可以PS做一些動態(tài)表情，用AE做一些加載動畫，頁面之間的交互動效可以使用Flinto、Principle等。
【 個性 】
有看過我其他原創(chuàng)文章的朋友都應該發(fā)現(xiàn)，我在文章中不斷強調(diào)，每一個設(shè)計師都需要在作品中加入個人原創(chuàng)的東西，形成自己的一套設(shè)計系統(tǒng)和獨特風格，才能使自己在競爭中立于不敗之地（在這里我就不再展開講述了，具體的歡迎大家查看我其他相關(guān)的原創(chuàng)文章，更多精彩內(nèi)容請關(guān)注我的訂閱號：種夢。）
二、網(wǎng)頁設(shè)計師的“高手之路”
對網(wǎng)頁設(shè)計的工作有了具體的了解，并且實戰(zhàn)過一段時間之后，我們就應該朝著“高手之路”進軍了。你會發(fā)現(xiàn)“高手之路”更多的是溝通與思考。
1、 培養(yǎng)整體大局觀
1）提升高效溝通的能力
高手級別的網(wǎng)頁設(shè)計師，需要花相當一部分時間用于與項目負責人、策劃人員、前端開發(fā)人員進行溝通，甚至有可能直接跟客戶溝通。這時候，你需要加強溝通的技巧，以實現(xiàn)高效的溝通。關(guān)于溝通的心得，我在原創(chuàng)文章《純干貨：設(shè)計師如何與“甲方”有效溝通》中有詳細講述，有興趣的朋友不妨點擊閱讀。
2）加強時間管理的能力
除了溝通技巧之外，高效地管理時間也是網(wǎng)頁設(shè)計師需要提升的能力。你需要把網(wǎng)頁設(shè)計過程中的時間安排提前規(guī)劃好，并嚴格按照進度來執(zhí)行，以免延誤Deadline。關(guān)于時間管理的心得，我在原創(chuàng)文章《純干貨：設(shè)計師如何高效管理時間》中有詳細講述，有興趣的朋友不妨點擊閱讀。
3）加強項目管理的能力
要知道，網(wǎng)頁設(shè)計師不僅僅是埋頭畫圖PS，你也需要了解整個項目從啟動到規(guī)劃、到執(zhí)行、到結(jié)束的全過程，而且還需要在項目過程中管理好你的團隊，把控好設(shè)計質(zhì)量，這樣才更有利于網(wǎng)頁設(shè)計工作的開展，因此你需要加強自己的項目管理能力。更多精彩內(nèi)容請關(guān)注我的訂閱號：種夢。
2、 視覺、技術(shù)、執(zhí)行
1）視覺——數(shù)據(jù)驅(qū)動下的設(shè)計——F布局
特別是電商設(shè)計，由于電商網(wǎng)頁的設(shè)計是以“轉(zhuǎn)化率”為目的的，因此在設(shè)計的時候需要根據(jù)數(shù)據(jù)分析的結(jié)果進行設(shè)計，而不單純是為了視覺上的“好看”。電商設(shè)計是傳統(tǒng)平面設(shè)計和網(wǎng)頁設(shè)計的結(jié)合體，就好比以前我們看到的超市海報，你可以看到這些折扣促銷信息，但是你要買東西還是需要去店鋪里。而電商設(shè)計的任務就是，直接在網(wǎng)上把這些商品展示在網(wǎng)頁上、手機上，你直接點擊可以購買了，這個購買的過程就涉及到了人和設(shè)備之間的互動交流。
2）技術(shù)——設(shè)計之外的世界也要多了解
作為設(shè)計師，我們不能只關(guān)心純視覺的知識，在國外特別是在美國的大公司，純視覺設(shè)計師已經(jīng)很少很少了，他們大多數(shù)都是身兼數(shù)職的，包括交互、數(shù)據(jù)分析整理、開發(fā)等。所以我們不應該只作為某一行業(yè)的專家，而應該以互聯(lián)網(wǎng)專家為目標去不斷學習，這樣才能不斷成長適應這個快速增長的社會。
3）執(zhí)行——網(wǎng)頁設(shè)計師的“執(zhí)行”主要體現(xiàn)在功能實現(xiàn)上
必須說明的是，網(wǎng)頁上的功能能否實現(xiàn)，不是需求方或者項目負責人說了算，也不是你一個人能定奪，而是需要跟前端開發(fā)人員進行溝通，了解能否實現(xiàn)，更需要了解實現(xiàn)該功能的成本和時間。工作過程中經(jīng)常會存在這種情況：某一技術(shù)功能是可以實現(xiàn)的，但是需要的時間或成本很有可能超出預算，這時候就需要多方人員協(xié)調(diào)溝通，到底是為這個功能增加成本、拖延工期，還是放棄這個功能？有效溝通是執(zhí)行的基礎(chǔ)，關(guān)于溝通的心得，我在原創(chuàng)文章《純干貨：設(shè)計師如何與“甲方”有效溝通》中有詳細講述，有興趣的朋友不妨點擊閱讀。
3、 提升你的軟件技能
PS——圖片處理
Photoshop在平面設(shè)計和網(wǎng)頁設(shè)計中的強大功能不需我多費唇舌了，關(guān)于如何自學提升PS技術(shù)，請看我的原創(chuàng)文章《純干貨：PS高手完全自學寶典》。
AI——圖形處理
Adobe Illustrator，簡稱“AI”，是一款非常好的矢量圖形處理工具，主要用于字體設(shè)計、圖形設(shè)計，產(chǎn)品包裝的設(shè)計、畫冊/書籍/雜志的排版、插畫設(shè)計等。關(guān)于如何自學提升AI技術(shù)，請后續(xù)繼續(xù)關(guān)注我的原創(chuàng)文章《純干貨：AI高手完全自學寶典》，更多精彩內(nèi)容請關(guān)注我的訂閱號：種夢。
C4D——三維特效、動畫
C4D的特效、動畫實現(xiàn)在網(wǎng)頁設(shè)計中越來來重要，關(guān)于如何自學提升C4D技術(shù)，請看我的原創(chuàng)文章《純干貨：C4D完全自學寶典》。
AE、Principle——動效
Adobe After Effects簡稱“AE”，是Adobe公司推出的一款圖形視頻處理軟件，簡單來說就是一個動態(tài)版的PS，功能十分強大，但是操作比較復雜。
Principle 是一款比較容易上手的交互設(shè)計軟件。界面類似 Sketch，思路有點像用 Keynote 做動畫，但它更加可視化一點，可惜的是目前它只支持Mac系統(tǒng)。
Origami、Axure——原型交互
雖然現(xiàn)在不少公司的項目團隊會將交互原型的繪制交由項目策劃人員來負責，但是網(wǎng)頁設(shè)計師也需要了解常用的原型設(shè)計軟件Origami、Axure等的使用方法。
三、其他補充
1、 方向選擇，就業(yè)情況
據(jù)調(diào)查顯示，目前設(shè)計行業(yè)中，以移動UI設(shè)計師薪酬最高，網(wǎng)頁設(shè)計師跟隨其后。不容忽視的是由于電商行業(yè)的發(fā)展勢頭迅猛，電商設(shè)計師的就業(yè)形態(tài)也是很樂觀。而且加上一直發(fā)展迅速的游戲行業(yè)，網(wǎng)頁設(shè)計師前景還是比較樂觀的。
2、 推薦網(wǎng)站
作為設(shè)計師我們首先要了解設(shè)計的最新趨勢，然后就是日新月異的技術(shù)發(fā)展，以下我所推薦的網(wǎng)站一定能幫助大家。建議設(shè)計師每天都要逛一逛哦。
FWA
一個世界著名的互動多媒體網(wǎng)站收錄平臺，于2000年5月建立，目的是展示世界上最優(yōu)秀、最前沿的網(wǎng)絡(luò)媒體藝術(shù)設(shè)計作品。
Behance
2006 年創(chuàng)立的著名設(shè)計社區(qū)，是展示和發(fā)現(xiàn)創(chuàng)意作品的領(lǐng)先在線平臺，同時也是 Adobe 系列的一部分。Behance 的管理團隊每天都會從各種領(lǐng)域中的頂級組合探索出新作品。這些領(lǐng)域包括設(shè)計、時尚、插圖、工業(yè)設(shè)計、建筑、攝影、美術(shù)、廣告、排版、動畫、聲效等。
Dribbble
一個面向創(chuàng)作家、藝術(shù)工作者、設(shè)計師等創(chuàng)意類作品的人群，提供作品在線服務，供網(wǎng)友在線查看已經(jīng)完成的作品或者正在創(chuàng)作的作品的交流網(wǎng)站。
采用的是瀑布流的形式展現(xiàn)圖片內(nèi)容，無需用戶翻頁，新的圖片不斷自動加載在頁面底端，讓用戶不斷的發(fā)現(xiàn)新的圖片。
Medium
一個輕量級內(nèi)容發(fā)行平臺，允許單一用戶或多人協(xié)作，將自己創(chuàng)作的內(nèi)容以主題的形式結(jié)集為專輯（Collection），分享給用戶進行消費和閱讀。該網(wǎng)站好文不斷，匯聚各行各業(yè)的設(shè)計大拿，如果關(guān)注了對了自己感興趣的話題，以及優(yōu)秀的設(shè)計師，自己的打怪升級進化之路會變得更加平穩(wěn)。
3、推薦書籍
《About Face 4 交互設(shè)計精髓》是一本數(shù)字產(chǎn)品和系統(tǒng)的交互設(shè)計指南，全面系統(tǒng)地講述了交互設(shè)計的過程、原理和方法，涉及的產(chǎn)品和系統(tǒng)有個人計算機上的個人和商務軟件、Web 應用、手持設(shè)備、信息亭、數(shù)字醫(yī)療系統(tǒng)、數(shù)字工業(yè)系統(tǒng)等。運用此書的交互設(shè)計過程和方法，有助于了解使用者和產(chǎn)品之間的交互行為，進而更好地設(shè)計出更具吸引力和更具市場競爭力的產(chǎn)品。
后記
網(wǎng)頁設(shè)計師的發(fā)展前景我還是很看好的，就像我上文所述，電商與游戲行業(yè)還是大熱，所以設(shè)計師待遇這塊還是不錯的，較為優(yōu)秀的設(shè)計師月薪過萬也比較普遍。值得一提的是網(wǎng)頁設(shè)計師屬于復合型人才，一個優(yōu)秀的網(wǎng)頁設(shè)計師需要了解的認識面比較廣，首先是平面基礎(chǔ)、交互常識、PC端與移動端的設(shè)計規(guī)范、數(shù)據(jù)的分析與整理、前端以及相關(guān)的互聯(lián)網(wǎng)技術(shù)知識等等。就像我們上文的比喻，平面是“葉問”，而網(wǎng)頁設(shè)計、UI設(shè)計就像“李小龍”，是一個“變革者”。
所以我從文章開始就跟大家說了，建議大家把我所有不同方向的設(shè)計師養(yǎng)成記都看一遍，增強自己的知識體系。同時歡迎大家積極參加《種夢人參加每周一練》，在每一次練習中逐漸提升自己的設(shè)計水平。我們都是種夢人，我們都是設(shè)計師，共勉之！
本文地址：http://irelandcustomcontracting.com/tutorial/yj3527.html
