網頁設計是什麼？
網頁設計也被稱為Web Design、網站設計、Website design、WUI等。
它的本質就是網站的圖形界面設計。
以前的網站，網速很慢，經常掉線或者加載失敗。
那時的網站性能和體驗都不好，而現在網站設計已經有了巨大的變化：
注重用戶體驗、注重頁面動效、富媒體等設計
讓如今的網站體驗並不比軟件和手機APP差。
加上個人電腦的普及，網站仍然是人機交互中非常重要的平台之一。
那麼作為UI設計師我們就必須掌握網站設計的規範和理解網站運行的原理，
才能更好地駕馭這個平台。
♦ 工作流程 ♦
參考網路圖片，另行翻譯做圖
首先是網站設計的工作流程：
除了用戶研究、撰寫產品需求文檔、市場文檔、做競品分析等工作之外，
與設計師密切相關的網站項目流程可以分為六個階段：
原型圖階段、視覺稿階段、設計規範階段、切圖階段、前端代碼階段、項目審查階段。
每個階段都需要設計師參與和了解，以下就來對個階段進行分析：
1 原型圖階段
原型圖階段中設計師需要和產品經理溝通需求，
這時要注意，並不是產品經理向設計師下發需求，
而是需要相互就自己擅長的方面進行溝通。
視覺方面具體呈現也許設計師會有更好的方式，
這時需要在設計之前與產品經理達成一致。
構建網站原型圖（工具：Axure RP ）截圖自網路
2 視覺稿階段
視覺稿階段就是我們要根據原型圖確定的內容和整體排版完成網站的界面設計了，
在設計網站的時候，需要一些圖像和靈感的素材。
比如做世界盃專題時，
我們除了收集很多素材之外，也可以設計一個「情緒板」（Mood Board）。
簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，
這樣可以更好地指引我們整個需求的設計主題和大體感覺。
另外，
很多網站的需求通常要靠主視覺來抓人眼球，
這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，
那麼用素材和這些需求方提供的資料進行混合併，
拼出讓人覺得震撼的主視覺就是網頁設計師的目標了。
主視覺下面的資訊編排更強調合理性，
這時也需要和產品經理溝通從後台調取的圖片尺寸、標題欄位長度等，
然後根據這些要求完成頁面資訊部分的設計。
總之，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。
視覺稿設計階段（工具：Photoshop）截圖自網路
3 設計規範
當視覺稿通過後，很多設計師可能不會主動去做設計規範。
其實每一個可疊代的產品都需要設計師來總結設計規範，
設計規範就是所有頁面中共性的東西，
比如說字體大小、圖片尺寸、按鈕的樣式等，
這些共同性也是用戶訪問網站時會理解成固定概念的憑證。
比如同樣的分享功能如果採用兩種截然不同的樣式就會讓用戶困惑。
那麼設計規範主要也是在約束設計師本身，在用戶有限的記憶力中減少思考的成本。
同時，設計規範也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。
最後，設計規範對於設計師個人來說也是對項目影響的一個佐證，
可以證明你的思考和你在項目中的地位。
所以設計師應該主動去做設計規範和項目總結。
設計規範如何去做？其實設計規範就是把主要頁面的元素固定成統一元素即可。
具體來說一個產品的設計規範應該有：
字體規範、主體色規範、圖表規範、圖片規範等不同分類。
視覺規範（工具：Photoshop）截圖自網路
4 切圖
網頁設計師通常不需要為前端工程師切圖。
因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，
我們可以使用諸如Cutterman、Zeplin等
切圖插件中的Web選項為前端切出網站所使用的圖片。
從PSD中提取出來的切圖（插件：cutterman）截圖自官網
5 前端代碼
前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。
然後和後端工程師對接調取數據接口，一個網站就活了起來。
工程師們為了方便瞭解網站是不是達到了我們要求的數據，也會進行埋點。
埋點就是在頁面代碼裡插入一些統計代碼，
方便我們之後確定哪些頁面訪問量高、哪些沒有達到預期。
ps. 之後其實還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等，這裡省略。
前端工程師代碼編譯（工具：Notepad +）截圖自網路
6 項目審查
網頁設計完成後還需要設計師進行項目審查，來確定網頁還原度是否有問題。
如果發現有和設計稿出入很大的，就需要要求前端工程師進行調整。
這個步驟非常重要，因為網站的成品才是我們最終的輸出，
不要認為設計稿很漂亮而實現後的頁面就不需要設計師負責了。
將實現後的截圖和設計稿進行比對（工具：Photoshop）截圖自網路
♦ 網站種類 ♦
參考網路圖片，另行翻譯做圖
網站的分類按對象來劃分可以分為To C端和To B端兩種。
To C端就是面向用戶和消費者，
例如門戶網站、企業網站、產品網站、電商網站、遊戲網站、
專題頁面、視頻網站、移動端H5等，均是面向用戶和消費者的產品。
由於是面向用戶和消費者，
所以設計上一定要可以吸引人，並且以用戶為中心考慮體驗設計。
而To B端作為一個需求量很大的類別，其實往往被設計師所忽視。
什麼是To B端項目呢？
比如電商網站供貨商的後台、Dashboard、企業級OA、網站統計後台等
這些面向商家和專業人士的網站就是To B類網站項目了。
這些項目的要求和To C端網站的要求完全不一樣：
To B類項目最重要的是效率而不是體驗，因為說穿了我們在設計使用者工作的工具時
必須要先保證操作者可以高效地完成他們所需要完成的工作。
那麼讓我們來了解一下網站的不同種類吧。
• 門戶網站
門戶網站比較知名的有新浪、騰訊、Naver、Llinternaute等。
我們可以看得出，門戶網站都是大而全包羅生活萬象的。
比如騰訊網就有
新聞、財經、視頻、體育、娛樂、時尚、汽車、房產、科技、遊戲等不同頻道。
門戶網站的門檻很高，必須要有雄厚的實力才可以建立起一個門戶網站，
而門戶網站需要的設計師數量也驚人。
首先門戶網站需要產品方向的界面設計師
以疊代的方式維護疊代網站首頁、二級頁面、底層頁等網站基底。
然後需要各個頻道的設計師來處理日常需求：
比如巴黎時裝周需要負責時尚頻道的設計師來設計對應的專題、
世界盃小組出線需要負責體育頻道的設計師來設計對應的專題等。
地球上的每一天都有大事發生，那麼門戶網站中的設計工作就不會少。
另外，具體對接頻道的設計師也需要有一定擅長之處：
比如對接體育頻道的設計師起碼應該熟悉足球籃球等體育項目、
時尚頻道的設計師要懂得各個大牌的設計風格、
佛學頻道的設計師需要懂得基本的佛學知識和忌諱、
文化頻道的設計師需要對傳統文化有所涉獵。
所以基本上門戶網站的設計師可以分為產品組和頻道組兩種。
韓國門戶網站Naver
• 企業網站
每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等。
現在接觸一個陌生的企業時，很多老百姓都會上網搜索一下其官方網站驗證真偽。
網站已經是中小企業的標配了。
企業網站設計時通常會有
網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯繫我們等這幾個模組，
企業網站會展示很多例如公司環境、團隊成員、企業文化等實際的照片，
配合一些資料進行設計。
企業網站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，
也就是為了達到讓消費者認同品牌這個要求。
所以如果我們接到了企業網站的設計需求，
不妨多去瀏覽參考一些更加大牌的企業網站作為竟品來參考。
美國通用公司官網
• 產品網站
我們會發現一種新鮮的產品營銷模式，就是產品網站。
設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。
這樣的產品頁希望可以讓用戶有沉浸感，
所以一般來說都是使用全屏佈局，
然後配合一些如視差滾動等方式讓我們感覺到這個產品的極致精細。
蘋果公司產品介紹頁
• 電商網站
電商設計師也屬於網頁設計師嗎？ 是的。
如果按照平台細分，無疑電商設計師所在的平台大部分屬於網站。
以淘寶、天貓為代表的電子商務
因為發展得太快了，以至於從內蒙的牧民到海南島的漁民，
甚至台灣、日本、東南亞的商人都開始在中國電商平台上開店舖了。
店舖其實本身屬於平台本身的頁面。
但是為了增強每個店的個性，平台為商店開通了一些頁面自定義的裝飾功能。
比如寶貝詳情、店舖排版、banner頭圖設計等。
這樣商舖有一定權限在平台規定的範圍內使用圖片
和一部分css樣式代碼來裝飾自己的店舖，電商設計應運而生。
雖然是在電商平台經營，非個人網站，但是有很多店舖因為設計精良而能帶動銷售。
那麼電商設計師當然就變得非常重要了。
淘寶網站首頁
• 遊戲網站
遊戲是一個巨大的產業，很多公司的收入大半壁江山都來自遊戲產業。
那麼除了遊戲需要製作精良之外，遊戲的官網也必須設計精美。
不要忘記，
每一個玩家都需要訪問你的遊戲官網才能完成下載、加值、社交等重要操作。
遊戲網站比如暴雪娛樂公司的官網設計得極其精美，
每個遊戲的官網都是一個精品。
比如魔獸世界、星際爭霸2等遊戲官網，頭部都是視覺衝擊非常強烈的動畫。
然後網站界面的元素都帶有遊戲的風格，彷彿登錄這個網站你就在遊戲之中了。
• 專題頁面
當然不管是電商還是門戶網站，在節日都會需要設計師來設計一些專題頁面增加曝光。
比如兒童節、情人節、母親節、聖誕節等節日往往會有促銷、專題報導等各式活動。
專題設計生命週期很短，上線後基本過了流量的那個點就基本沒用了。
時效過了，專題頁面就無人問津了。
所以在那麼短的生命週期怎麼抓住人的眼球？
當然不能使用現代主義設計那種性冷淡風格，而應該在一開始曝光就儘量刺激用戶，
用刺激對比強的色彩、複雜立體的造型、衝擊感強的文字吸引用戶來看。
畢竟每個人可能只會看一次，因此不能放過這個機會。
所以專題設計和產品設計正相反，專題設計必須刺激。
截圖自2018樂天父親節專題頁面
• 影視網站
影視網站的訪問量驚人，並且用戶的黏著度更高。
很多影視網站除了購買版權之外還有很多UGC內容。
UGC（User Generated Content）是指用戶產生的原創內容，
很早之前web1.0時代用戶主要是單向瀏覽網站，
web2.0提出的UGC概念就是說用戶不僅在瀏覽也會上傳內容。
那麼影視網站之所以會活絡起來，主要也要感謝寬頻的發展。
現在，我們點擊影片播放鍵就能立馬觀看影片；
而在早期觀看影片都需要緩衝時間才可以順順的觀看影片。
影視網站的設計主要是要考慮應用場景：
影片是用戶主要觀看的區域，所以影片區域首先要夠大，另外顏色應該以暗色為主，
因為亮色會干擾到用戶觀看影片的品質。
然後其圖片比例應都為16:9的影片尺寸，方便後期編輯在後台添加。
影視網站的設計師同樣也可以分為產品組和運營組
兩個種類來處理產品方向和運營方向的不同需求。
Netflix官網頁面
• 移動端H5
其實H5就是HTML5，並不是僅僅指移動端，而是網頁前端的開發語言，
由於約定俗成的概念，
我們現在常常把手機中的集合影片、動畫、互動的這種營銷形式成為H5。
其實它的本質是運用網頁技術運行在手機瀏覽器或內置瀏覽器內的網頁。
隨著技術日新月異的發展，H5顯得越來越有傳播價值和份量。
如果設計出色，你的項目可能會在朋友圈產生病毒傳播的效果。
使用前端語言編譯的適合手機瀏覽的H5界面
• 後台網站
後台網站又叫Dashborad，中文翻譯為儀表盤。
其含義就是有一大堆數據與統計資訊。
後台網站是To B類型，那麼首先的需求就是能快速地顯示給操作者他需要掌握的數據。
我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」
等不同方式來展現這些繁瑣的數據，這種圖形表達數據的方式也叫做數據可視化。
後台網站不需要特別可愛的插圖以及卡通形象，最重要的是效率。
所以如果您經常處理To C類的需求，接到了To B類的產品需求時一定要注意這一點。
後台網站因為需要更大的畫面，通常會使用全屏式排版，也就是撐滿整個畫面。
那如果是小螢幕該怎麼辦呢？
這時候前端就會使用相對佈局縮小各個元素，排版的位置也會用百分比來確定。
微信公眾號後台
• CRM系統
CRM即Customer relationship management，客戶管理管理系統。
CRM是企業對客戶進行資訊化管理的一種形式，
用互聯網技術實現對客戶資訊進行收集、管理、分析，
對企業的銷售、服務、售後進行監控。
常見的功能有員工日程管理、訂單管理、發票管理等。
因此在設計這種項目時一定要將資訊按所屬的邏輯關係分類，
加強對比、對齊、重複、親密性的原則，使操作者在使用的時候感覺到便利。
Admin CRM dashboard by Divan Raj
• SaaS
如果我們服務於為企業搭建CRM、ERP或者OA等系統的第三方公司，
那麼網頁設計師可能會常聽到SaaS這個詞。
SaaS是(Software-as-a-Service)，即軟體就是服務。
其他公司會來提供SaaS服務的公司定製系統，
然後服務公司會為客戶提供從服務器到設計一體化的服務。
• 企業OA
企業OA，即(Office Automation)，也就是辦公自動化系統。
通過企業OA可以完成請假、調休、離職、查詢公司規章制度、請示、彙報等工作。
這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。
互聯網公司更是提供給員工除了企業OA之外的交流功能，
比如建立員工BBS和留言板等，在上面大家可以對公司提出建議和意見。
企業OA一般出於安全和保密性的原因，很多公司都更加願意自己開發。
設計師在設計此類項目時同樣要以操作者的體驗和效率為重，
讓操作者輕易可以找到在當前頁面中最重要的功能。
Robo Advisor - Projection, List and Questionnaire by Michal Parulski
《延伸閱讀》
主圖 攝影：Lee Campbell，關於Unsplash/ 資料來源 西见，
其餘內容為TC彙集整理，若有侵權請來信告知，我們將立即處理。
留言列表
