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