如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
明修棧道C和暗渡陳倉B1. 初識B端產(chǎn)品和C端產(chǎn)品
C端 Consumer，表示為消費者、個人用戶或終端用戶設(shè)計，直接面向普通用戶提供服務(wù)來幫助他們實現(xiàn)個人需求。B端 Business，它面對商業(yè)和企業(yè)，是為幫助企業(yè)集團(tuán)等實現(xiàn)商業(yè)目的而設(shè)計的軟件、工具或者平臺。
在我們?nèi)粘Ｉ钪?，在手機上使用的大多是 C 端產(chǎn)品，單一的 C 端產(chǎn)品通常是為了實現(xiàn)單一的需求。比如看網(wǎng)紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產(chǎn)品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產(chǎn)品的核心功能。
而面向 B 端的產(chǎn)品，我個人稱之為「暗渡陳倉」，當(dāng)個人用戶為實現(xiàn)個人需求產(chǎn)生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產(chǎn)品的后臺產(chǎn)品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業(yè)、業(yè)務(wù)部門提供的企業(yè)級服務(wù)產(chǎn)品，以及面對企業(yè)或者個人提供的平臺級工具產(chǎn)品等。
雖說我們?nèi)粘Ｊ褂玫母嗍?C 端產(chǎn)品，但是 B 端產(chǎn)品對我們的影響也是時時刻刻存在著。C 端產(chǎn)品在明，逐漸改變著現(xiàn)代人的生活方式，B 端產(chǎn)品在暗，間接服務(wù)于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產(chǎn)品的區(qū)別
在我看來，C 端產(chǎn)品以消費互聯(lián)網(wǎng)為主，B 端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
從開發(fā)的角度來說：
3. 后臺產(chǎn)品常見分類
后臺產(chǎn)品按其作用可大致分為兩類，一是支撐前臺產(chǎn)品，二是管理各種資源。我認(rèn)為后臺產(chǎn)品應(yīng)當(dāng)是囊括在 B 端產(chǎn)品的范圍之內(nèi)的，常見的類型包括：
1. 初識后臺產(chǎn)品設(shè)計
說起后臺產(chǎn)品，很容易想到復(fù)雜、龐大、邏輯縝密，而作為設(shè)計師，則苦于競品短缺、架構(gòu)復(fù)雜，設(shè)計的前期工作比設(shè)計本身要復(fù)雜得多等問題。
后臺產(chǎn)品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產(chǎn)品則不然。
對于后臺產(chǎn)品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權(quán)限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久，所以要對后臺產(chǎn)品進(jìn)行設(shè)計就需要同樣了解該行業(yè)，甚至更能洞察該行業(yè)，業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺產(chǎn)品架構(gòu)也會比較龐大；然后，無論是工廠商家的進(jìn)銷存管理，還是政府醫(yī)院的工作流和業(yè)務(wù)流，乃至企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)都有門檻外，對信息和產(chǎn)品也有「保密協(xié)議」的使命感，所謂「隔行如隔山」，在后臺產(chǎn)品更是如此；最后，后臺產(chǎn)品設(shè)計往往沒有固定的功能架構(gòu)和商業(yè)模式，對于產(chǎn)品經(jīng)理的邏輯思維能力要求更高，設(shè)計師不僅僅是做界面、優(yōu)化流程，也要主動和產(chǎn)品經(jīng)理溝通交流，并對產(chǎn)品進(jìn)行思考和探索。
2. 后臺UI設(shè)計工作流程
后臺 UI 設(shè)計的工作，大體分為三個部分：需求分析、設(shè)計執(zhí)行、數(shù)據(jù)分析。
在需求分析階段，要對產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況，比如產(chǎn)品目標(biāo)、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競品和產(chǎn)品特色。做這個產(chǎn)品是為了解決什么問題？想實現(xiàn)什么目標(biāo)？使用這個系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對每一個用戶的行為都生成操作日志？產(chǎn)品有哪些主要的功能模塊？產(chǎn)品的業(yè)務(wù)流程是怎樣的？有哪些同類型的產(chǎn)品？和他們相比我們的產(chǎn)品有什么特色和特點？成功地做出大而全的后臺產(chǎn)品，是整個設(shè)計團(tuán)隊和開發(fā)團(tuán)隊能力的體現(xiàn)，而對很多小團(tuán)隊來說，只能做一些大團(tuán)隊不愿去做的產(chǎn)品，或另辟蹊徑在某些方面做專做精。
在設(shè)計執(zhí)行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級、完成時間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計完成，開始做 UI 視覺方面的設(shè)計，而這時后端同步構(gòu)思需求的實現(xiàn)方案。UI 設(shè)計師向前端了解實現(xiàn)框架，方便交接和溝通。當(dāng)界面實現(xiàn)，UI 設(shè)計師應(yīng)該是最早進(jìn)行測試的，力求視覺設(shè)計和代碼實現(xiàn)無誤差。在完成設(shè)計執(zhí)行后，從信息層級、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計走查，進(jìn)行多次設(shè)計驗證與測試。
數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進(jìn)行多番測試和評審后交付客戶（或內(nèi)部）使用，根據(jù)產(chǎn)生的具體問題進(jìn)行不斷迭代，且觀察產(chǎn)品能否通過準(zhǔn)確的數(shù)據(jù)反映問題、體現(xiàn)能力，應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達(dá)到了管理和運營的指標(biāo)，后臺產(chǎn)品才是真正產(chǎn)生了價值。
3. 制定設(shè)計規(guī)范的作用
為后臺產(chǎn)品制定設(shè)計規(guī)范有哪些作用和好處呢？簡單來說就是對產(chǎn)品好、對自己好、對團(tuán)隊好、對客戶好。
以下數(shù)值為參考，請結(jié)合特定產(chǎn)品靈活運用。
統(tǒng)一尺寸
據(jù)統(tǒng)計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設(shè)計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產(chǎn)品設(shè)計功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，同時設(shè)計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現(xiàn)前端實現(xiàn)效果和高保真設(shè)計圖誤差最小。面向公司內(nèi)部的后臺系統(tǒng)，由于各個職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計，這個尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動態(tài)縮放；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；左右欄布局時，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。
柵格布局
柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動態(tài)縮放。
需要柵格化處理的內(nèi)容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。
谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計，靈活運用，不要被它所局限。
尺寸設(shè)定
一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱，大部分系統(tǒng)頂部欄高度 48+8n，側(cè)邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側(cè)邊欄寬度 200px，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px。
相對間隔
定義主體內(nèi)容的上下左右邊距，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動或整屏滾動，視情況固定導(dǎo)航欄。
顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會將統(tǒng)計圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。
品牌色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級結(jié)構(gòu)。
其他色如統(tǒng)計圖、數(shù)據(jù)可視化、多個標(biāo)簽的不同配色方案根據(jù)項目情況單獨設(shè)定。
后臺系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設(shè)定，根據(jù)文字大小及使用場景設(shè)置行高，一般行高=文字大小+6px/8px。
圖標(biāo)是 UI 設(shè)計中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對功能的認(rèn)識。
除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計師進(jìn)行繪制，現(xiàn)在比較方便的方法是在 iconfont 提供的圖標(biāo)模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標(biāo)庫的項目組里，方便前端調(diào)用，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。
5. 按鈕
按鈕是后臺產(chǎn)品進(jìn)行交互設(shè)計是重要元素，提供給用戶進(jìn)行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態(tài)包括默認(rèn)、懸停、點擊和不可用。
按鈕根據(jù)需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。
規(guī)范整理時要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態(tài)展現(xiàn)出來。
填充按鈕之間間距最小為 10px。
導(dǎo)航的類型有很多種，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。
各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。
下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點擊兩種。
步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。
分頁的高度設(shè)定為 24px、30px、32px，根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容，比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。
面包屑用于說明層級結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且可以回到任一上級頁面。
徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標(biāo)題經(jīng)常應(yīng)用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定，比如 24px、32px，也可根據(jù)系統(tǒng)實際情況進(jìn)行設(shè)定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側(cè)（預(yù)留出位置）。
表單中標(biāo)題文字左對齊，輸入框左對齊，標(biāo)題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標(biāo)題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內(nèi)正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復(fù)選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設(shè)定，通常和輸入框保持一致。搜索框距離右側(cè)按鈕 4px，內(nèi)部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關(guān)按鈕外框 40*20px，內(nèi)部圓形 16*16px。
表格在后臺產(chǎn)品 UI 設(shè)計中占比非常大，用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口，是最清晰、的形式之一。在設(shè)計規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標(biāo)簽樣式。
表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動作；表頭展示列標(biāo)題，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內(nèi)操作；底欄顯示分頁、總數(shù)統(tǒng)計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數(shù)據(jù)在第一列增加多選框。
行高
表格行高可設(shè)置為表格內(nèi)字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。
行數(shù)
表格行數(shù)太多加載速度會降低，延長用戶等待時間；行數(shù)太少會導(dǎo)致用戶不斷翻頁，降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50，用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后，如果每頁行數(shù)多于每屏行數(shù)，可在表格內(nèi)引入滾動條，這時可以固定表頭滾動內(nèi)容。
列寬
列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時，列寬應(yīng)大于固定寬度（比如時間、MD5、SHA1）；列內(nèi)容不固定時，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以「…」展示，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。
列數(shù)
表格列不應(yīng)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據(jù)實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串?dāng)?shù)字但是其實那并不是數(shù)據(jù)而是一串編碼，所以可以像文本一樣左對齊。根據(jù)文本內(nèi)容不同，對齊方式也應(yīng)靈活調(diào)整，可采用文本左對齊、數(shù)據(jù)右對齊、金額小數(shù)點對齊的方式。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo)，方便用戶調(diào)用。
詳情入口
表格內(nèi)部數(shù)據(jù)的詳情入口，將能點擊下鉆查看詳情的內(nèi)容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應(yīng)用主窗口上的彈出式窗口，以對話的方式使用戶參與進(jìn)來。
彈框
彈框出現(xiàn)時，主題內(nèi)容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點擊彈框外區(qū)域關(guān)閉， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級確認(rèn)的彈框，或者再次進(jìn)行交互梳理。
側(cè)滑框
側(cè)滑框又稱抽屜，出現(xiàn)在右側(cè)，固定寬度 400px，高度覆蓋在主題內(nèi)容之上，點擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。
骨架屏
為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據(jù)文字字?jǐn)?shù)調(diào)整停留時間，文字內(nèi)容限制在 30 以內(nèi)。
警告提示
用不同顏色和樣式展示需要關(guān)注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側(cè)以抽屜的方式劃出，用戶可手動關(guān)閉，或停留 3s 后自動關(guān)閉。
繪制不同類型的情感化插畫表示缺省狀態(tài)，如404、500、暫時沒有數(shù)據(jù)、沒有新消息等。
頁面需要一個默認(rèn)的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
數(shù)據(jù)可視化部分可能是后臺產(chǎn)品中對視覺設(shè)計要求較高的部分，使用情境為各類統(tǒng)計圖、大屏展示頁面等。
功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計組件，Echarts、G2、d3等；展示型頁面的數(shù)據(jù)可視化則可以做得更有趣，比如立體的統(tǒng)計圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。
考慮到數(shù)據(jù)可視化可能會需要深色淺色不同的背景，在數(shù)據(jù)可視化統(tǒng)計圖的色彩搭配上要注意顏色的拓展性。
1. 設(shè)計前端一家親
2. 書籍推薦
3. 文章和作品推薦
不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品，都是為了實現(xiàn)用戶的需求、幫用戶解決問題。
剛接觸后臺產(chǎn)品的時候，最希望能把產(chǎn)品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項目的背后思考更為重要，產(chǎn)出的設(shè)計成果也應(yīng)該有理有據(jù)、支撐整個設(shè)計體系。網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多，對一些公司來說、專門去制定一套自己的后臺設(shè)計規(guī)范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設(shè)計組件，會使得設(shè)計師以及前端事半功倍，有助于設(shè)計師把更多的精力投入到沉淀行業(yè)知識、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。
在后臺產(chǎn)品的設(shè)計過程中，更應(yīng)該把寶貴的時間用在更值得關(guān)注的事物上，讓設(shè)計師能夠輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨有的閃光點，從而切實解決問題和實現(xiàn)價值。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
常見的網(wǎng)頁設(shè)計、文章設(shè)計錯誤
本文來自阮一峰分享
1.內(nèi)容未按邏輯分成塊
用戶可以根據(jù)邏輯塊輕易的獲取信息。
具體做法為：將padding設(shè)置為120px-180px，同時不同的邏輯塊使用不同的背景。
2.每個邏輯塊的空白大小不一致
對于每個邏輯塊，需要設(shè)置同等大小且適宜的空白。否則網(wǎng)頁看起來會很混亂，作者不會對每個邏輯塊同等對待。
3.Padding不能設(shè)置過小，否則用戶無法將內(nèi)容分為邏輯塊
為了這點，插入大的空白（至少120px），以使內(nèi)容按邏輯塊分開。
4.背景圖片和文字 應(yīng)該對比鮮明
5.在一頁中，樣式過多
太多不同 的排版和樣式將會使得頁面不太專業(yè)以及難以閱讀。
解決的方法是，以字體為例，設(shè)置一種字體，字體為正?；虼煮w（保證在兩種不同樣式之內(nèi)）
6.背景顏色塊過于狹窄
7. 在一個狹窄的列中，放入了過多的文字
這導(dǎo)致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數(shù)量，精煉文字。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
柵格系統(tǒng)在UI設(shè)計和前端開發(fā)中是被應(yīng)用的很廣泛一套體系，但真正能掌握并很好運用的人卻不多，一起來學(xué)習(xí)吧！
環(huán)顧身邊常見的優(yōu)秀設(shè)計很多都使用了柵格系統(tǒng)，你可能非常贊同在界面中使用柵格系統(tǒng)，但卻沒有人告訴你應(yīng)該如何使用它們。
印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設(shè)備上的柵格系統(tǒng)設(shè)計。
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。嚴(yán)格來說，你其實可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因為它是內(nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個常見的尺寸設(shè)置，當(dāng)設(shè)計塊狀或者卡片元素的網(wǎng)格時，這種間距非常重要，比如做照片類設(shè)計的時候。有些系統(tǒng)會隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計，外邊距會隨著設(shè)備寬度的增加而增加。移動設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個間距通常會差異很大。
下面會介紹一些基本的準(zhǔn)則，但要明白在實際設(shè)計中其實沒有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設(shè)計的信息卡片。
不同柵格設(shè)計展示
很棒，這看起來很簡單對吧。有的時候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會發(fā)現(xiàn)可能不夠美觀，比如下面的例子。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會顯得很長，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個元素實際上是一個不可見的，更大的容器就行。
這也是4x3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)把這樣的設(shè)計稿給到開發(fā)時，他們就能很直觀的知道這一點，所以這更利于去理解如何實際地分配好內(nèi)容。
2. 不要將內(nèi)容元素留在水槽中
內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣會違背柵格化的目的。
3. 只要父級元素對齊柵格，子級可以不完全對齊列
有些時候，你想要將設(shè)計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實不用擔(dān)心，只要“父”容器對齊柵格，這就沒有關(guān)系。
父子級內(nèi)容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開始會覺得奇怪，因為如果不習(xí)慣使用網(wǎng)格，可能會把網(wǎng)格寬度當(dāng)成全部內(nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對齊，利用網(wǎng)格外的間距來當(dāng)做留白區(qū)域。根據(jù)代碼實現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時縮放。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說“我需要一個1200px寬的設(shè)計”，這并不意味著你的設(shè)計就是1200px寬，這其實是說設(shè)計內(nèi)容寬度在1200px的畫布內(nèi)，實際內(nèi)容占位是960px，這樣就會有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計在畫板邊緣，并理解為出血的列網(wǎng)格
這個頁面布局的頂部圖片被設(shè)計成完全出血
這是一個例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會把它理解為一個全屏的內(nèi)容元素。
如果設(shè)計的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時也可以脫離柵格化的設(shè)計。
一些圖片和文字的出血設(shè)計
頁眉和頁腳有時也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁面時，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因為已經(jīng)知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機上顯示一張卡片，或者做一個水平滾動。這些列的自適應(yīng)對于代碼來說就是很簡單的參考。
實際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個大顯示器，它可以看到1600像素寬的東西，實際上pc端的網(wǎng)頁設(shè)計是1200px寬，平板電腦上是768px寬，手機是360px寬。所以你會看到一個小于1200px的設(shè)計，有大量的留白。但是當(dāng)你的瀏覽器再小一個像素，1199px，會發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開發(fā)那邊寫了一個固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時，你不會看到任何變化，設(shè)計就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點時，設(shè)計馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個值，同樣的事情也會發(fā)生，在到達(dá)另一個臨界值之前，設(shè)計看起來都是不變的。
流動網(wǎng)格
流動網(wǎng)格的示例
現(xiàn)在來看看流動網(wǎng)格的特點，當(dāng)窗口縮小時，內(nèi)容將動態(tài)的發(fā)生變化，文本會進(jìn)行換行，元素也會變窄。然而，這些元素在內(nèi)容寬度縮小到下一個臨界值之前，布局是不會變化的。
所以我想說的是，設(shè)計的臨界值只是一個更改布局的參考點。這就是為什么列寬和水槽在網(wǎng)格中不會改變的原因，因為我們想讓設(shè)計師在考慮布局時能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實際項目中，使用流動網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動網(wǎng)格，因為它要去適應(yīng)各種不同終端的大小。
一些做的很酷的柵格系統(tǒng)
不需要太死板地去堅持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計中使用柵格系統(tǒng)做的很棒的設(shè)計靈感。
Invision’s Genome Project
可以看到，他們的設(shè)計故意不去使用任何的水槽，所以看起來是無縫的。
這個網(wǎng)站不僅設(shè)計的很好，他們還利用了在設(shè)計中展示他們自己的柵格系統(tǒng)來讓整體的設(shè)計變得更加酷炫。
Dropbox Design
他們沒有設(shè)計水槽和外邊距，相反，整個頁面被分成兩半，然后將內(nèi)容填充到這兩部分。
Wordpress
Wordpress創(chuàng)建賬號頁面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設(shè)計，左側(cè)的側(cè)邊欄則沒有使用。
The Mockup Club
內(nèi)容和網(wǎng)格也并不總是從中間開始，對于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說，Instagram的PC端是用上了6列柵格布局。
要點總結(jié)
寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計中使用柵格系統(tǒng)。我知道對于我自己來說，我花了很多年的時間寫了大量的代碼來理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設(shè)計系統(tǒng)概述了它們的網(wǎng)格使用：
Google’s Material Design System
Intuit’s Design System
IBM’s Carbon Design System
…And here’s huge list of other systems you can look through
在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計師，因為我知道我的設(shè)計將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計，使它們能夠有一個完美的像素對齊。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計，當(dāng)用戶從一個界面到另一個界面流轉(zhuǎn)時，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會是一個非常不錯的進(jìn)步。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
目前從官方介紹來看，UI組件還相當(dāng)齊全，可用它來快速搭建漂亮、時尚的網(wǎng)頁和UI設(shè)計作品，下面一起來看看介紹。
關(guān)于 Shards 這個主題雖然免費，但并不代表它只有「表面」，制作者還為性能性能考慮，壓縮版僅12KB大小，實在太好了，以這樣的大小，制作出來的網(wǎng)頁直接能秒開。
它并不是直接使用 Bootstrap 的設(shè)計樣式，所有的組件都是重新設(shè)計，以便得到統(tǒng)一的風(fēng)格！
這是非常不錯的UI KIT素材 ，它還包含了10個額外的自定義組件，可以讓使用者快事制作著陸頁。
演示地址：https://designrevision.com/demo/shards/extra/app-promo.html
演示地址：https://designrevision.com/demo/shards/extra/agency-landing.html
Shards 含有豐富的 UI 組件，網(wǎng)頁端常用的元素幾乎包含了，大方便用戶自由定制。
顏色：
字體
圖標(biāo)支持900+ Material icons 和 Font awesome 兩大圖標(biāo)庫！
表單上的細(xì)節(jié)，也不容忽視：
還有日期組件的設(shè)計：
卡片
按鈕
導(dǎo)航菜單
我想這些漂亮的元素，已經(jīng)足夠你設(shè)計一般的網(wǎng)頁，即使不夠，也完全可以自己利用 Sketch 源文件或 HTML 模板再創(chuàng)作。
藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
簡單布局怎么做到不單調(diào)而有層次？看看設(shè)計師 Czékmány Zoltán 的9個技巧。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
設(shè)計趨勢總會在你迷茫的時候，給你一點靈光。在合適的時候，恰到好處地「跟風(fēng)」，借助流行的趨勢幫你作出更合時宜的好設(shè)計。炎熱的8月即將到來，我們觀察到三個設(shè)計的趨勢，當(dāng)下正在流行。雖然以白色和淺色為主的配色方案似乎哪里都有，但是在最近，這種趨勢體現(xiàn)的非常的明顯。
色彩的運用一直都是諸多設(shè)計趨勢當(dāng)中，最為醒目的組成部分。這種以白色和淺色為主的色彩美學(xué)，似乎在和之前所流行的高飽和度霓虹色的流行做對抗，柔和的灰色，相對清冷的色調(diào)，甚至是顯得沒有足夠溫度的粉色，這些色彩都在力圖淡化之前配色方案中濃稠的情感和激蕩的氛圍。
以白色和淺色為主的配色方案，相對而言是沒有那么醒目的，設(shè)計師在采用這種配色方案的時候，常常會結(jié)合其他的元素，來豐富整個設(shè)計的視覺感，這樣就避免了出現(xiàn)「過于普通」的視覺感受。這種配色設(shè)計還包括了使用片拍的圖片素材，就像 Verho 這個網(wǎng)站。
不過圖片和色塊并不是唯一的實現(xiàn)這種配色的方案，采用視頻或者插畫元素同樣可以做到，比如 Omega Yeast 和 Alexandra Elise 這兩個網(wǎng)站，它們同樣足夠吸引人。
這一設(shè)計趨勢可以搭配風(fēng)格相對清爽、情緒比較清淺的網(wǎng)站主題，在炎熱的夏季顯得尤為有感覺。頁面中的文本內(nèi)容只需要采用相對較深色彩的字體，即可確保良好的可讀性。
在按鈕和為數(shù)不多最為重要的元素上，可以采用明亮的色彩，以示強調(diào)，整體風(fēng)格則可以保持極簡。
如果你喜歡極簡主義的設(shè)計，并且打算運用這一趨勢，這篇文章別錯過了：
數(shù)據(jù)可視化將數(shù)據(jù)的直觀性提到了一個全新的層次，它使得跨行業(yè)的數(shù)據(jù)展示和信息呈現(xiàn)變得更加有價值，也更加可靠，而大規(guī)模的可視化的數(shù)據(jù)呈現(xiàn)并不是奇怪的事情。
不過也正是因為數(shù)據(jù)可視化讓數(shù)據(jù)變得更加親民，設(shè)計師開始更多地將圖表和數(shù)據(jù)加入到日常的設(shè)計當(dāng)中來，結(jié)合交互式動畫，讓數(shù)據(jù)在整個網(wǎng)頁設(shè)計當(dāng)中，開始發(fā)揮更多的作用。借助可視化的設(shè)計，數(shù)據(jù)信息更輕松地為用戶所理解，整體設(shè)計也開始顯得更加富有吸引力。
而這種設(shè)計趨勢需要設(shè)計師花費更多的精力來處理數(shù)據(jù)，盡量多借助現(xiàn)成的數(shù)據(jù)可視化的工具來進(jìn)行設(shè)計。
在網(wǎng)頁設(shè)計當(dāng)中，將數(shù)據(jù)以可視化的方式嵌入進(jìn)去有很多不同的方式，而這一趨勢最吸引人的地方也是交互式的動態(tài)信息展現(xiàn)。
Tree Tree Tree 這個網(wǎng)站就很好的利用了數(shù)據(jù)可視化來展示天氣，當(dāng)你輸入你感興趣的地方的時候，它會使用可視化的樹木來呈現(xiàn)當(dāng)?shù)仫L(fēng)力大小。此外，你還能和底部的交互式的地圖進(jìn)行互動。
Tomorrow’s World 這個網(wǎng)站則始于一項調(diào)研，而網(wǎng)站最終會將一系列的調(diào)查使用可視化的方式呈現(xiàn)出來，幫助用戶了解周圍的世界。
Qravity 在網(wǎng)站中加入了多個數(shù)據(jù)輸入點，用戶可以通過滾動交互來調(diào)整時間軸，信息的呈現(xiàn)也會隨之發(fā)生改變（比如日期和事件），這比起簡單的列表要好懂得多。
多邊形元素從2017年開始成為設(shè)計師們的心頭好，作為一種持續(xù)流行的、泛用型的設(shè)計趨勢，一直流行到現(xiàn)在。有意思的是，多邊形元素也不再維持以往常見的樣子，開始在外觀和視覺上發(fā)生改變。現(xiàn)如今的多邊形不再是以往小巧玲瓏、成群結(jié)隊的樣子，設(shè)計師開始有意識地挑選一些多邊形，賦予它們超大的外觀造型，而不再是簡單的點綴和堆砌。
這些超大的多邊形元素可以在不同的設(shè)計風(fēng)格之下良好地運作，結(jié)合不同的樣式和色彩，發(fā)揮作用。它們可以作為整個設(shè)計模式中的一員，作為裝飾元素也可以用來作為強調(diào)特定內(nèi)容的容器（比如圖片和文本）。
多邊形元素的有點在于，它們造型多變，可以區(qū)別于常見的原型和矩形，更容易吸引用戶的注意力。這種不同的使用方式，我們姑且稱之為 多邊形 2.0。
多邊形的特征、角度可以隨著你的設(shè)計需求來靈活選擇，比如 The Alan Turing Institute 這個網(wǎng)站會在右側(cè)露出三角形的一部分，Evoluted 這個網(wǎng)站則將簡單的線條和多邊形搭配在一起，互相疊加營造出聚合的感覺，而 Iqor 這個網(wǎng)站則更加傾向于使用多邊形來承載內(nèi)容。
多邊形和不同的色彩搭配，所帶來的視覺體驗和強調(diào)效果都是非常突出的。不過要將內(nèi)容和多邊形結(jié)合起來，設(shè)計師還是得花點心思。
更多多邊形元素的玩法看這里：
對于設(shè)計趨勢而言，它是存在時效性的，它之所以在特定的階段流行有諸多因素的影響。當(dāng)你在設(shè)計的時候沒有想法的時候，設(shè)計趨勢能夠給你的不僅僅是當(dāng)下設(shè)計方向上的選取，也為你提供了一個可供參考的選擇。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
網(wǎng)頁設(shè)計的核心難點是什么？
公眾號:西見 個人QQ:26474600
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
網(wǎng)頁設(shè)計也被稱為Web Design、網(wǎng)站設(shè)計、Website design、WUI等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計。雖然現(xiàn)在我們常使用移動端上的APP來獲取資訊，但是顯然基于個人電腦平臺的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧“上網(wǎng)沖浪”的，那時的電腦屏幕非常小，分辨率只有800x600像素（對比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線或者加載失敗。那時的網(wǎng)站性能和體驗都不好，而現(xiàn)在網(wǎng)站設(shè)計和過去已經(jīng)有了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設(shè)計讓如今的網(wǎng)站體驗并不比軟件和手機APP差。加上個人電腦的普及，網(wǎng)站仍然是人機交互中非常重要的平臺之一。那么作為UI設(shè)計師我們就必須掌握網(wǎng)站設(shè)計的規(guī)范和理解網(wǎng)站運行的原理，才能更好地駕馭這個平臺。今天就向您好好說道一下網(wǎng)站必須懂得的那些事兒。
工作流程
首先讓我們來看一下網(wǎng)站設(shè)計的工作流程吧：除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外，與設(shè)計師密切相關(guān)的網(wǎng)站項目流程可以分為原型圖階段、視覺稿階段、設(shè)計規(guī)范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設(shè)計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。
原型圖階段
原型圖階段中設(shè)計師需要和產(chǎn)品經(jīng)理溝通需求，這時要注意，并不是產(chǎn)品經(jīng)理向設(shè)計師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。視覺方面具體呈現(xiàn)也許設(shè)計師會有更好的方式，這時需要在設(shè)計之前與產(chǎn)品經(jīng)理達(dá)成一致。
構(gòu)建網(wǎng)站原型圖（工具：Axure RP ）
視覺稿階段
視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計了，在設(shè)計網(wǎng)站的時候，我們需要一些圖像和靈感的素材。比如做世界杯專題時，我們除了收集很多素材之外，也可以設(shè)計一個“情緒板”（Mood Board）。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設(shè)計主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強調(diào)合理性，這時也需要和產(chǎn)品經(jīng)理溝通從后臺調(diào)取的圖片尺寸、標(biāo)題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設(shè)計?？傊?，設(shè)計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。
視覺稿設(shè)計階段（工具：Photoshop）
設(shè)計規(guī)范
當(dāng)視覺稿通過后，很多設(shè)計師可能不會主動去做設(shè)計規(guī)范。其實每一個可迭代的產(chǎn)品都需要設(shè)計師來總結(jié)設(shè)計規(guī)范，設(shè)計規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設(shè)計規(guī)范主要也是在約束設(shè)計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設(shè)計規(guī)范也可以保證同一個項目的不同設(shè)計師都能輸出一樣風(fēng)格的設(shè)計來。最后，設(shè)計規(guī)范對于設(shè)計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。所以我認(rèn)為設(shè)計師應(yīng)該主動去做設(shè)計規(guī)范和項目總結(jié)。設(shè)計規(guī)范如何去做？其實設(shè)計規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個產(chǎn)品的設(shè)計規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。
視覺規(guī)范（工具：Photoshop）
切圖
網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項為前端切出網(wǎng)站所使用的圖片。
從PSD中提取出來的切圖（插件：cutterman）
前端代碼
前端工程師會用代碼重構(gòu)我們設(shè)計的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對接調(diào)取數(shù)據(jù)接口，一個網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會進(jìn)行埋點。埋點就是在頁面代碼里插入一些統(tǒng)計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達(dá)到預(yù)期。在此后其實還會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等，這里省略。
前端工程師代碼編譯（工具：Notepad +）
項目走查
網(wǎng)頁設(shè)計完成后還需要設(shè)計師進(jìn)行項目走查，來確定網(wǎng)頁還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個步驟非常重要，因為網(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計稿很漂亮而實現(xiàn)后的頁面就不需要我們負(fù)責(zé)了。
將實現(xiàn)后的截圖和設(shè)計稿進(jìn)行比對（工具：Photoshop）
網(wǎng)站種類
網(wǎng)站的分類按對象來劃分可以分為To C端和To B端兩種。To C端就是面向用戶和消費者，例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題頁面、視頻網(wǎng)站、移動端H5等，均是面向用戶和消費者的產(chǎn)品。由于是面向用戶和消費者，所以設(shè)計上一定要可以吸引人，并且以用戶為中心考慮體驗設(shè)計。而To B端作為一個需求量很大的類別，其實往往被設(shè)計師所忽視。什么是To B端項目呢？比如電商網(wǎng)站供貨商的后臺、Dashboard、企業(yè)級OA、網(wǎng)站統(tǒng)計后臺等這些面向商家和專業(yè)人士的網(wǎng)站就是To B類網(wǎng)站項目了。這些項目的要求和To C端網(wǎng)站的要求大相徑庭：To B類項目最重要的是效率而不是體驗，因為說白了我們在設(shè)計使用者工作的工具，我們在設(shè)計時必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。
門戶網(wǎng)站
門戶網(wǎng)站國內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐；國外比較知名的如Naver、Llinternaute等。我們可以看得出，門戶網(wǎng)站都是大而全包羅生活萬象的。比如騰訊網(wǎng)就有新聞、財經(jīng)、視頻、體育、娛樂、時尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高，必須要有雄厚的實力才可以建立起一個門戶網(wǎng)站，而門戶網(wǎng)站需要的設(shè)計師數(shù)量也驚人。首先門戶網(wǎng)站需要產(chǎn)品方向的界面設(shè)計師以迭代的方式維護(hù)迭代網(wǎng)站首頁、二級頁面、底層頁等網(wǎng)站基石。然后需要各個頻道的設(shè)計師來處理日常需求：比如巴黎時裝周需要負(fù)責(zé)時尚頻道的設(shè)計師來設(shè)計對應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計師來設(shè)計對應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計工作就不會少。另外，具體對接頻道的設(shè)計師也需要有一定擅長之處：比如對接體育頻道的設(shè)計師起碼應(yīng)該熟悉足球籃球等體育項目、時尚頻道的設(shè)計師要懂得各個大牌的設(shè)計風(fēng)格、佛學(xué)頻道的設(shè)計師需要懂得基本的佛學(xué)知識和忌諱、文化頻道的設(shè)計師需要對傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計師可以分為產(chǎn)品組和頻道組兩種。
韓國門戶網(wǎng)站Naver
企業(yè)網(wǎng)站
每個企業(yè)都需要有一個網(wǎng)站來對外展示自己的能力、介紹自己的產(chǎn)品等?，F(xiàn)在接觸一個陌生的企業(yè)時，很多老百姓都會上網(wǎng)搜索一下其官方網(wǎng)站驗證真?zhèn)?。網(wǎng)站已經(jīng)是中小企業(yè)的標(biāo)配了。企業(yè)網(wǎng)站設(shè)計時通常會有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團(tuán)隊、在線商城、聯(lián)系我們等這幾個模塊，企業(yè)網(wǎng)站會展示很多諸如公司環(huán)境、團(tuán)隊成員、企業(yè)文化等實際的照片，配合一些資料進(jìn)行設(shè)計。企業(yè)網(wǎng)站通常也追求所謂“高端”、“大氣”、“上檔次”的風(fēng)格，也就是為了達(dá)到讓消費者認(rèn)同品牌這個要求。所以如果我們接到了企業(yè)網(wǎng)站的設(shè)計需求，不妨多去瀏覽參考一些更加大牌的企業(yè)網(wǎng)站作為競品來參考。
美國通用公司官網(wǎng)
產(chǎn)品網(wǎng)站
從蘋果公司的iPhone介紹頁到小米手機8的介紹頁，我們會發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計、特點、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動等方式讓我們感覺到這個產(chǎn)品的精細(xì)。由于中國互聯(lián)網(wǎng)和產(chǎn)品設(shè)計發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計需求一定會越來越多。
蘋果公司產(chǎn)品介紹頁
電商網(wǎng)站
電商設(shè)計師也屬于網(wǎng)頁設(shè)計師嗎？是的。如果按照平臺細(xì)分，無疑電商設(shè)計師所在的平臺大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了，以至于從內(nèi)蒙的牧民到海南島的漁民，甚至臺灣、日本、東南亞的商人都開始在中國電商平臺上開店鋪了。店鋪其實本身屬于平臺本身的頁面。但是為了增強每個店的個性，平臺為商店開通了一些頁面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設(shè)計等。這樣商鋪有一定權(quán)限在平臺規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設(shè)計應(yīng)運而生。雖然帶著鐐銬跳舞，但是有很多店鋪因為設(shè)計精良而能帶動銷售。那么電商設(shè)計師當(dāng)然就變得非常重要了。
淘寶網(wǎng)首頁
游戲網(wǎng)站
游戲是一個巨大的產(chǎn)業(yè)，很多公司的收入大半壁江山都來自游戲產(chǎn)業(yè)。那么除了游戲需要制作精良之外，游戲的官網(wǎng)也必須設(shè)計精美。不要忘記，每一個玩家都需要訪問你的游戲官網(wǎng)才能完成下載、充值、社交等重要操作。國外游戲網(wǎng)站比如暴雪娛樂公司（https://www.blizzard.com）的官網(wǎng)設(shè)計得極其精美，每個游戲的官網(wǎng)都是一個精品。比如魔獸世界、星際爭霸2等游戲官網(wǎng)，頭部都是視覺沖擊非常強烈的動畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格，仿佛登錄這個網(wǎng)站你就在游戲之中了。
暴雪公司星際爭霸2游戲官網(wǎng)
專題頁面
當(dāng)然不管是電商還是門戶網(wǎng)站，在節(jié)日都會需要設(shè)計師來設(shè)計一些專題頁面增加曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日往往會有促銷、專題報道等各式活動。專題設(shè)計生命周期很短，上線后基本過了流量的那個點就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁面，因為過了特定的時期專題頁面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當(dāng)然不能使用現(xiàn)代主義設(shè)計那種性冷淡風(fēng)格，而應(yīng)該在頭部盡量刺激用戶，用刺激對比強的色彩、復(fù)雜立體的造型、沖擊感強的文字吸引用戶來看。畢竟每個人可能只會看一次，不能放過這個機會。所以專題設(shè)計和產(chǎn)品設(shè)計正相反，專題設(shè)計必須刺激。
極有家淘寶專題頁面
視頻網(wǎng)站
視頻網(wǎng)站的訪問量驚人，并且用戶的黏著度更高。很多視頻網(wǎng)站除了購買版權(quán)之外還有很多UGC內(nèi)容。多說幾句，UGC（User Generated Content）是指用戶產(chǎn)生的原創(chuàng)內(nèi)容，很早之前web1.0時代用戶主要是單向瀏覽網(wǎng)站，web2.0提出的UGC概念就是說用戶不僅在瀏覽也會上傳內(nèi)容。那么視頻網(wǎng)站為什么會火呢？首先要感謝帶寬的發(fā)展。在今年我們國內(nèi)點擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計主要是要考慮應(yīng)用場景：視頻是用戶主要觀看的區(qū)域，所以視頻區(qū)域首先要足夠大，另外顏色應(yīng)該以暗色為主，因為亮色會干擾到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸，方便后期編輯在后臺添加。視頻網(wǎng)站的設(shè)計師同樣也可以分為產(chǎn)品組和運營組兩個種類來處理產(chǎn)品方向和運營方向的不同需求。
騰訊視頻播放頁面
移動端H5
你一定在朋友圈被《穿越未來來看你》、《淘寶造物節(jié)》等H5刷過屏吧？平時我們經(jīng)常被這種好玩兒的H5刷屏。其實H5全稱是HTML5，并不是僅僅指移動端，而是網(wǎng)頁前端的開發(fā)語言，由于約定俗成的概念，我們現(xiàn)在常常把手機中的集合視頻、動效、互動的這種營銷形式成為H5。其實它的本質(zhì)是運用網(wǎng)頁技術(shù)運行在手機瀏覽器或內(nèi)置瀏覽器內(nèi)的網(wǎng)頁。隨著技術(shù)日新月異的發(fā)展，H5顯得越來越有傳播價值和份量。微信、瀏覽器等平臺級產(chǎn)品在手機端中火爆促進(jìn)了依靠入口而傳播的H5的發(fā)展。如果設(shè)計出色，你的項目可能會在朋友圈產(chǎn)生病毒傳播的效果。
使用前端語言編譯的適合手機瀏覽的H5界面
移動端H5尺寸
設(shè)計移動端H5項目的時候，我們一般以用戶量較高的iPhone6/7/8的尺寸：750x1334px 為準(zhǔn)，然后我們要在頂部預(yù)留出微信或者瀏覽器導(dǎo)航區(qū)域。主要內(nèi)容區(qū)域就可以自由設(shè)計了。一般H5的操作是上下滑動。字體方面使用蘋方字體，并且字號設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。當(dāng)然H5可以調(diào)用背景音樂、視頻、鏈接等多媒體，讓體驗更佳。除了讓前端小哥哥們開發(fā)之外，其實還有一種方式可以無需代碼生成簡易版的H5，就是通過H5工具生成。目前比較火的H5生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發(fā)，那么我們設(shè)計稿的尺寸需要設(shè)置為640x1008PX。這些工具較為簡單，注冊后將PSD上傳即可對每個原件進(jìn)行動效的設(shè)置了。但是如果需要復(fù)雜的動效和交互，還是需要前端工程師的配合。
H5項目的尺寸
后臺網(wǎng)站
后臺網(wǎng)站又叫Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計信息。后臺網(wǎng)站是To B類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)。可是數(shù)據(jù)非?？菰?，我們可以使用諸如“折線圖”、“餅狀圖”、“曲線圖”、“表格”等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。后臺網(wǎng)站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經(jīng)常處理To C類的需求，接到了To B類的產(chǎn)品需求時一定要注意這一點。后臺網(wǎng)站因為需要更大的畫面，通常會使用全屏式排版，也就是撐滿整個畫布。那如果小屏怎么辦呢？前端會使用相對布局縮小各個元素，排版的位置也會用百分比來確定。
微信公眾號后臺
CRM系統(tǒng)
CRM即Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM是企業(yè)對客戶進(jìn)行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實現(xiàn)對客戶信息進(jìn)行收集、管理、分析，對企業(yè)的銷售、服務(wù)、售后進(jìn)行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。我們在設(shè)計這種項目時一定要將信息按所屬的邏輯關(guān)系分類，加強對比、對齊、重復(fù)、親密性的原則，使操作者在使用的時候感覺到便利。
Admin CRM dashboard by Divan Raj
SaaS
如果我們服務(wù)于為企業(yè)搭建CRM、ERP或者OA等系統(tǒng)的第三方公司，那么我們可能會老聽到SaaS這個詞。SaaS是(Software-as-a-Service)，即軟件就是服務(wù)。其他公司會來提供SaaS服務(wù)的公司定制系統(tǒng)，然后服務(wù)公司會為客戶提供從服務(wù)器到設(shè)計一體化的服務(wù)。這里提到這個詞是防止設(shè)計師誤解它的定義。
企業(yè)OA
企業(yè)OA，即(Office Automation)，也就是辦公自動化系統(tǒng)。在六七十年代就興起了一場使用電腦來改變傳統(tǒng)辦公方式的革命。在大型企業(yè)時常會面臨人員眾多、地域廣袤、辦理公司事宜手續(xù)冗長等問題，那么企業(yè)OA可以很好地解決這方面的問題。通過企業(yè)OA可以完成請假、調(diào)休、離職、查詢公司規(guī)章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。互聯(lián)網(wǎng)公司更是提供給員工除了企業(yè)OA之外的交流功能，比如建立員工BBS和留言板等，在上面大家可以對公司提出建議和意見。企業(yè)OA一般出于安全和保密性的原因，很多公司都更加愿意自己開發(fā)。設(shè)計師在設(shè)計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當(dāng)前頁面中最重要的功能。
Robo Advisor - Projection, List and Questionnaire by Michal Parulski
網(wǎng)站組成部分
了解了網(wǎng)站的不同類別后，讓我們來看看組成一個網(wǎng)站需要哪些部分吧。網(wǎng)站是由不同網(wǎng)頁通過超鏈接連接而成的，而不同網(wǎng)頁也是由不同模塊組成的。我們設(shè)計的是一個像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò)，而不是一張海報。所以我們在設(shè)計網(wǎng)站時要格外考慮從用戶角度出發(fā)看到的網(wǎng)站，而不能孤立地把它想象成一個平面作品。
首頁
訪問一個網(wǎng)站時第一個我們觸及的就是網(wǎng)站首頁。首頁別名叫作Index或者Default，是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段，網(wǎng)站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個子網(wǎng)頁就點擊鏈接即可進(jìn)入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導(dǎo)用戶進(jìn)入不同區(qū)域的一個“目錄”，這個目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來吸引點擊，露出的部分一定要有一個“更多”按鈕來指引用戶找到二級頁面。
首頁原型圖
二級頁面
在邏輯上，首頁是一級頁面，從首頁點擊進(jìn)入的頁面均為二級頁面。二級頁面之后還有三級頁面等級別。從點擊的概率上來說，自然是越靠前訪問量越高，頁面層級越深越不容易被用戶找到。一般網(wǎng)站有三級頁面，就是為了避免用戶迷失。為此還會在頁面中加入面包屑導(dǎo)航。面包屑導(dǎo)航就是在頁面第一屏出現(xiàn)的諸如 首頁 > 體育 > NBA頻道 這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在那里，并且點擊可以回到其他頁面。
二級頁面原型圖
底層頁
在網(wǎng)站結(jié)構(gòu)中最后提供用戶實質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級頁面中我們點擊感興趣的標(biāo)題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評論；底側(cè)也會有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能?？傊?，在用戶閱讀完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢閱讀其他的資訊或者回到頻道。
底層頁原型圖
廣告
門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一般由負(fù)責(zé)運營需求的設(shè)計師負(fù)責(zé)，但是也可能由頻道設(shè)計師、產(chǎn)品側(cè)設(shè)計師來完成。在網(wǎng)站中常見到的廣告圖形式就是banner。banner一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動、推薦資訊等。那么banner圖的尺寸有固定嗎？答案是沒有。Banner的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準(zhǔn)的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以banner不可以做得很高，否則第一屏信息會顯示得不夠。你可能會說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏?xí)俸芏?。也就是很多用戶可能點擊網(wǎng)站后就會跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的banner不應(yīng)該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的Banner區(qū)域為1380x350px。那么除了首頁巨大的banner廣告位，網(wǎng)站還有哪些廣告形式呢？
對聯(lián)廣告。在門戶網(wǎng)站中我們經(jīng)常會看到網(wǎng)站左右安全區(qū)域之外會有連個隨屏幕滾動的像“對聯(lián)”一樣的廣告，通常banner也會是一個廣告內(nèi)容，并且居中會彈出由HTML5技術(shù)或Flash技術(shù)制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進(jìn)網(wǎng)站你就會被全面轟炸，無法不注意到這個廣告的存在。這種廣告點擊進(jìn)入還有配合的專題頁等，可見需要設(shè)計師配合的地方非常多。
對聯(lián)廣告形式
信息流廣告。信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內(nèi)容，原因是因為它的形式和其他信息一樣。比如朋友圈、知乎、Facebook都采用了信息流廣告，信息流廣告的效果非常強，但是會犧牲一定的用戶體驗。信息流廣告的尺寸與信息流相同。
知乎APP中信息流中的廣告
以上從廣告的形式上簡單介紹了三種常見的網(wǎng)站廣告形式，如果我們在閱讀需求時看到了cpm、pv等單詞是什么意思呢？他們是廣告的收費模式。cpm是指按照廣告pv來收費，cps是指按照用戶消費收費，cpa是指按照用戶注冊數(shù)收費，cpc是指按照用戶點擊付費。針對不同的收費模式，在設(shè)計時也會采取不同策略來增強廣告需要達(dá)到的目的。
Footer
在網(wǎng)站具體的頁面設(shè)計中，底部會有一個區(qū)域我們稱之為footer。一般footer的顏色都會比上邊內(nèi)容區(qū)域要暗，因為footer的信息在邏輯的級別上是次要的。footer區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號等信息。在設(shè)計時一定要降級處理，不要讓footer變得特別明顯。
技術(shù)原理
網(wǎng)頁設(shè)計師在做項目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計和交互是可以實現(xiàn)的、哪些是不可以的。同時技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復(fù)雜的交互。其實在過去網(wǎng)頁前端工程師和設(shè)計師是一個崗位，就叫做網(wǎng)頁美工，這個職位需要在完成視覺設(shè)計后把頁面做成靜態(tài)網(wǎng)頁交給下面的環(huán)節(jié)。隨著分工越來越細(xì)致，產(chǎn)生了網(wǎng)頁設(shè)計師和前端工程師兩個工種。但是網(wǎng)頁設(shè)計師不可以脫離技術(shù)局限天花亂墜地去設(shè)計。下面讓我們來了解網(wǎng)站的基本存儲原理：在您的電腦C盤保存一個叫l(wèi)ogo.jpg的圖片，然后在瀏覽器打開這個網(wǎng)址：C:\logo.jpg你看到了什么？對，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲在一個類似我們電腦的東西里，那就是服務(wù)器。我們通過域名來調(diào)取網(wǎng)中不同的頁面和文件，如果服務(wù)器關(guān)機了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過瀏覽器訪問網(wǎng)站時，敲擊一個網(wǎng)址，這時這個域名會轉(zhuǎn)向一個IP地址，這個IP地址就是服務(wù)器所在的門牌號碼。找到了以后，我們的瀏覽器會從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實際上都是代碼的形式。瀏覽器還會把網(wǎng)站中所需要的圖片、視頻等單獨下載到緩存里。當(dāng)我們通過表單輸入用戶名和密碼時，我們的信息就會上傳到服務(wù)器中，服務(wù)器處理完（比如登陸成功這個信息）然后再下發(fā)給我們的瀏覽器。所以平時我們訪問網(wǎng)站時，我們的電腦和瀏覽器要通過互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次“握手”。當(dāng)然老“握手”會造成加載速度變慢，于是我們聰明的瀏覽器會把已經(jīng)下載過的資源緩存下來，避免浪費。這個機制就是“cookies”：瀏覽器會自動存儲你訪問過的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。
基于鼠標(biāo)的手勢操作
基于鼠標(biāo)的交互
在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計最主流的交互方式還是鼠標(biāo)和鍵盤。來讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對鼠標(biāo)的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標(biāo)左鍵點擊完成的，所以網(wǎng)頁也是點擊的藝術(shù)。右鍵一般會喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會將右鍵自定義設(shè)計一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態(tài)吧（前端術(shù)語是：超鏈接標(biāo)簽的CSS四個偽類）。
按鈕與文字的不同狀態(tài)
Link是指超鏈接正常的時候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開來，比如換一種顏色或者加下劃線。當(dāng)然下劃線還有一個作用就是方便弱視群體區(qū)分超鏈接與普通文字。Link默認(rèn)都是藍(lán)色的（色值：#72ACE3），但是為了增強網(wǎng)站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產(chǎn)生差別才可以。
Visited是超鏈接被點擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了Visited屬性，點擊后的新聞顏色就不一樣了，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。
Hover：是超鏈接鼠標(biāo)經(jīng)過狀態(tài)。這個狀態(tài)是連接中最為重要的狀態(tài)。其實不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應(yīng)該設(shè)置Hover屬性，也就是鼠標(biāo)懸停時的狀態(tài)。一般來說變換顏色和放大是Hover狀態(tài)的基本方式。
Active：是指超鏈接的激活狀態(tài)。點擊后超鏈接可以通過CSS加載一個狀態(tài)。
同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計成不同的樣式，方便用戶通過鼠標(biāo)感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做“點擊感”。當(dāng)然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標(biāo)懸停等狀態(tài)，還有一種狀態(tài)叫不可點擊。這種狀態(tài)將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感Web設(shè)計的例子嗎？
靜態(tài)網(wǎng)頁
了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來聊點真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由HTML編譯的，我們在服務(wù)器上存儲的網(wǎng)頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標(biāo)記語言?！俺谋尽笔钦f這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用HTML語言寫一段文字會是什么樣呢？
模擬代碼編譯過程
沒錯，代碼就是這么一點一點編起來的。在任何網(wǎng)站空白處右鍵點擊查看網(wǎng)頁源代碼你就可以看到網(wǎng)頁的HTML代碼啦。HTML這種代碼是由一個國際組織 - W3C發(fā)布和維護(hù)的。W3C創(chuàng)建于1994年，是網(wǎng)站國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)。W3C已經(jīng)發(fā)布了HTML的諸多版本，其中影響最深遠(yuǎn)的是HTML4版本。而HTML5簡稱H5則可以說是劃時代的版本了。H5的標(biāo)簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉Flash插件了。（Flash插件帶來了比如系統(tǒng)漏洞、加載速度過慢等問題）同時H5對多平臺支持很好，所以適應(yīng)移動端為王的當(dāng)今時代。H5甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍(lán)湖等）、多媒體等多種形式?？墒怯捎贗E瀏覽器這類不支持HTML5效果的瀏覽器在用戶中占比還很高，所以造成了HTML5發(fā)展的制約。瀏覽器可以理解為一個代碼閱讀器，由于它對HTML5代碼的翻譯工作不好就會造成所謂“兼容性”的問題。比如HTML5中可以通過代碼給一個DIV添加投影，那么在某些瀏覽器中就顯示不了這個效果。不難理解為什么有程序員會穿著 i hate IE字樣的T恤了吧。在每次做完一個網(wǎng)站項目時，測試工程師都會用Chrome、Safari、Firefox、Opera、IE、Edge等多個瀏覽器測試網(wǎng)站的兼容性，這時通常讓前端工程師非常頭疼。因為代碼動一發(fā)牽全身，經(jīng)常這個好了那個又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨加載特定的適配代碼等。道高一尺魔高一丈呀。
其他前端語言
有了HTML這個骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來服務(wù)器下載代碼和圖片等資源進(jìn)行“握手”，而且很多HTML代碼都是重復(fù)的，造成了資源的浪費。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的，那么每個頁面都會啰嗦這幾句代碼。這個問題沒多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是CSS和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是HTML完全分開，并且一個網(wǎng)站可以下載一份CSS然后不同頁面都調(diào)取這份CSS的緩存，那么就節(jié)省了服務(wù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點擊和菜單等，那么需要前端工程師使用Javas cript代碼來配合。Javas cript是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的非常順手。所以目前主流的網(wǎng)站配置是HTML5+CSS3+JS代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用HTML4+CSS+JS的套餐。這取決于我們的主要目標(biāo)用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí)HTML、CSS、JS代碼然后進(jìn)行前端開發(fā)，因為在現(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。
主流形式：HTML + CSS + JS
動態(tài)網(wǎng)頁
了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談?wù)劸W(wǎng)站如何動起來。動態(tài)網(wǎng)頁不是說它有狂拽酷炫的動畫，而是動態(tài)網(wǎng)頁會隨著時間、內(nèi)容和數(shù)據(jù)庫的調(diào)用而產(chǎn)生動態(tài)的網(wǎng)頁。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁的HTML代碼并不需要人去手工修改，而是讓小編通過后臺錄入新聞、上傳圖片就好了。小編上傳后臺的過程就會輸入數(shù)據(jù)庫，而動態(tài)網(wǎng)頁又是調(diào)取數(shù)據(jù)庫內(nèi)容顯示給用戶的一種形式。動態(tài)網(wǎng)頁會隨時調(diào)取數(shù)據(jù)庫中的信息給用戶，而對用戶來說似乎靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁長得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁結(jié)尾是html或htm，而動態(tài)網(wǎng)頁由于使用了高級網(wǎng)頁編程技術(shù)，結(jié)尾則是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是動態(tài)網(wǎng)頁的語言，當(dāng)然有的時候為了讓網(wǎng)站效率提升也會使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁就一致了，但是實際上是會在用戶訪問前調(diào)取一遍數(shù)據(jù)庫的。同時動態(tài)網(wǎng)頁的網(wǎng)址會有一個特點，含有？符號。動態(tài)語言目前最火的是Php，較早而現(xiàn)在比較少見的是Asp、Cgi，最安全的是Jsp，所以很多銀行采用JSP編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運行原理了。
主流后臺編譯語言：PHP ASP JSP CGI
雪碧圖
我們經(jīng)常看到網(wǎng)站中會有動畫，那么動畫實現(xiàn)的原理一般有如下這么幾個：第一，HTML5視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，F(xiàn)lash Player播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用Gif格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像Google首頁Doodle的動畫是怎么實現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS雪碧 即CSS Sprite，也有人叫CSS精靈，它是一種CSS圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級透明的PNG格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的PNG圖片里。然后代碼在一個100px的寬度框子內(nèi)背景圖調(diào)用這張png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續(xù)動畫。雪碧圖也有自身的缺點：如果幀數(shù)太多，會消耗很大的內(nèi)存。所以幀數(shù)一定要控制少。如果你的動作設(shè)計了12幀，那么我建議你可以試試將2,4,6,8,10刪除，保留一半的動作。
雪碧圖
視差滾動
視差滾動是一種運動速率不一樣的設(shè)計效果，用以實現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運用了視差滾動效果。其實現(xiàn)原理是，代碼判定網(wǎng)頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現(xiàn)實中看到的空間感一樣。視差滾動已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動，請大膽設(shè)計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準(zhǔn)備的就是運動速率不同的分層靜態(tài)PSD文件。
運用了視差滾動效果的密爾沃基警察局官網(wǎng)（milwaukeepolicenews.com）
網(wǎng)頁設(shè)計規(guī)范
終于，經(jīng)歷過長篇大論網(wǎng)站的原理與組成部分后，我們要談?wù)劸W(wǎng)站設(shè)計的規(guī)范了。網(wǎng)站設(shè)計并無具體平臺限定的風(fēng)格，也沒有必須要設(shè)計的系統(tǒng)級導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計更加靈活，然而因為太靈活也會讓我們的設(shè)計師無從下手。那么接下來我將介紹網(wǎng)站設(shè)計的規(guī)范，在您工作的時候可以參考。注意，在設(shè)計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。
畫板尺寸
因為網(wǎng)頁尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計。所以我們的設(shè)計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版Photoshop網(wǎng)站W(wǎng)eb預(yù)設(shè)尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網(wǎng)頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們?nèi)绻鼍W(wǎng)站時建議按主流的分辨率1920x1080px來設(shè)計。所以我們通常設(shè)計網(wǎng)站時的網(wǎng)站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域為1200px （或1000px / 1400px）。以這個尺寸來設(shè)計相對標(biāo)準(zhǔn)。當(dāng)然在設(shè)計網(wǎng)頁前需要知會前端設(shè)計尺寸，因為對于適配的方式和后續(xù)配合他們更有發(fā)言權(quán)。
網(wǎng)站的尺寸規(guī)范
文字規(guī)范
我們現(xiàn)在都知道了網(wǎng)站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋果電腦上看到的文字效果和Windows系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會對文字進(jìn)行渲染，而windows的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑Windows的用戶是主流，所以盡管我們可能使用蘋果電腦設(shè)計網(wǎng)頁，但是設(shè)計出來的網(wǎng)頁效果也應(yīng)該和Windows顯示一致。否則我們設(shè)計完漂亮的設(shè)計稿，程序員無法還原成我們設(shè)計的樣子。另外，字號的大小也非常重要。網(wǎng)頁的顯示區(qū)域決定了文字不可以過大，在網(wǎng)站設(shè)計中我們的文字大小一般來說是12-20像素。為什么不能比12px更??？因為如果比12像素更小的中文無法放得下復(fù)雜的筆畫了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數(shù)的字號來設(shè)計。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇Windows Lcd或銳利。另外，英文和數(shù)字需使用Arial字體，渲染方式選擇無。
網(wǎng)站字體規(guī)范
圖片規(guī)范
網(wǎng)站設(shè)計中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級透明的png格式、圖片文件很小的jpg格式、支持透明/不透明并且支持動畫的gif格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網(wǎng)頁使用的圖片更小呢？
第一種方法，給程序員切圖的時候我們可以適當(dāng)縮小圖片文件的大小。比如Photoshop中存儲為web所用格式就會比快速存儲文件更小。
第二種方法，可以嘗試使用例如Tinypng、智圖等工具再次壓縮圖片。這些工具會把圖片中的多余信息刪除并且壓縮，而圖像質(zhì)量不受損失。
第三種方法，Google研發(fā)了一種Webp格式，它的圖片壓縮體積大約只有JPEG的2/3，能節(jié)省大量的服務(wù)器寬帶資源。比如Facebook、Ebay還有我們設(shè)計師常用的站酷圖片存儲都是使用了Webp圖片格式。
第四種方法，瀏覽器和服務(wù)器握手時需要下載網(wǎng)頁所調(diào)用的圖片資源，那么如果一個網(wǎng)站有一百張圖片的話，瀏覽器和服務(wù)器就得握一百次。第一會耗費服務(wù)器資源，第二訪問速度就會慢一些。所以前端工程師們有一種做法，就是把網(wǎng)頁中所使用的圖片拼成一大張png。然后每個調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點兒，顯示的那塊區(qū)域移動到一大張圖片中所需要的那個圖像。
在線壓縮工具Tinypng網(wǎng)站
按鈕
按鈕的風(fēng)格在過去的十幾年發(fā)生了很大的變化，由一開始的“斜面與浮雕”風(fēng)格過渡到后面的“擬物風(fēng)格”，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會去掉填充只保留邊框，這種設(shè)計方式叫做幽靈按鈕。注意在設(shè)計按鈕時記得同時設(shè)計好按鈕的鼠標(biāo)懸停、按下狀態(tài)。
不同時代下不同的按鈕風(fēng)格
表單
在網(wǎng)站設(shè)計中我們經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級的控件，一般是直接調(diào)用系統(tǒng)設(shè)計的。但是系統(tǒng)設(shè)計有時不能滿足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點擊起來不舒服；不符合網(wǎng)站整體設(shè)計的品牌感等。那么我們可以通過CSS給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以我們遇到涉及到表單的需求時也可以進(jìn)行自定義設(shè)計。
表單不同風(fēng)格的設(shè)計 UIDE Kit by Mateusz Dembek
柵格
我們把整體寬度定義為W。然后整個寬度分成多個等分單元A。每個單元A中有元素a和間距i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過多內(nèi)容的柵格和另一個柵格相加得到更大的排版空間；其他元素都須老老實實呆在自己的柵格內(nèi)，這樣就完成了一個布局非?？茖W(xué)的設(shè)計了。 比如
如果網(wǎng)頁寬度是1000px，我們可以使用：
20列每列40px和10像素間隔
20列每列30px和20像素間隔
25列每列30px和10像素間隔
25列每列20px和20像素間隔
如果網(wǎng)頁寬度是990px，我們可以使用：
11列每列80px和10像素間隔
18列每列35px和20像素間隔
25列每列45px和10像素間隔
33列每列20px和10像素間隔
如果網(wǎng)頁寬度是980px，我們可以使用：
14列每列60px和10像素間隔
14列每列50px和20像素間隔
28列每列25px和10像素間隔
柵格系統(tǒng)具體有以下優(yōu)勢：能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。另外，基于柵格進(jìn)行設(shè)計，可以讓整個網(wǎng)站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
網(wǎng)站的柵格化會使網(wǎng)站看起來更有秩序感
適配Retina屏幕
2012年蘋果發(fā)布了Retina Macbook Pro，Retina屏幕的電腦占有量越來越高了。Retina屏幕簡單地說就是屏幕密度是傳統(tǒng)屏幕的兩倍，擁有更大地清晰度。甚至可以滿足我們視網(wǎng)膜最高的識別度，所以也叫視網(wǎng)膜屏幕。這種屏幕下我們設(shè)計的安全距離大約為1000像素的網(wǎng)站就顯得非常粗糙了。所以如果我們現(xiàn)在Retina屏幕下顯示一個400X300PX的區(qū)域，實際上我們需要提供給前端一張800X600PX的切圖才行，因為Retina屏幕一個點頂過去兩個像素。那么我們的用戶是視網(wǎng)膜屏占比更多的用戶，比如設(shè)計師群體，那怎么兼顧高清屏幕和普通屏幕呢？
首先我們需要以視網(wǎng)膜屏幕大小完成設(shè)計稿，建議是傳統(tǒng)設(shè)計稿的兩倍。之后切出兩套切圖（非Retina屏幕用戶如果也加載雙倍大小的資源會很慢），普通的切圖命名為如logo.jpg，Retina切圖命名為logo@2x.jpg。前端用代碼來識別，如果屏幕是Retina就加載雙倍尺寸，不是則加載普通尺寸。前端可以使用Retina.js（https://retinajs.com/）提供的技術(shù)進(jìn)行識別。
自適應(yīng)與響應(yīng)式網(wǎng)站
我們看到有些網(wǎng)站使用電腦端或者手機端甚至iPad去瀏覽時體驗都非常好。這就需要我們?yōu)榱擞脩趔w驗而進(jìn)行網(wǎng)站的自適應(yīng)或響應(yīng)式布局了。響應(yīng)式與自適應(yīng)的原理是相似的，都是通過代碼檢測設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的css。
自適應(yīng)網(wǎng)站
自適應(yīng)網(wǎng)站的設(shè)計稿是一致的，但是設(shè)計稿需要考慮屏幕變小時的變化方式。比如一個網(wǎng)站的內(nèi)容有5個區(qū)塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應(yīng)布局。比如站酷網(wǎng)、Dribbble等網(wǎng)站都采用了自適應(yīng)布局。
響應(yīng)式網(wǎng)站
響應(yīng)式網(wǎng)站則需要設(shè)計不同版本的設(shè)計稿，然后根據(jù)不同的設(shè)備提供不同的CSS樣式。比如判定你設(shè)備的寬度是750px，那么網(wǎng)站就知道你使用了手機來訪問，就會給你導(dǎo)入一份手機才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的CSS樣式。對于設(shè)計師來說，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版；響應(yīng)式則需要設(shè)計電腦、平板、手機等至少三套設(shè)計稿（但這三套設(shè)計稿的內(nèi)容是一致的）。總之，自適應(yīng)和響應(yīng)式都是網(wǎng)站為了用戶體驗所適應(yīng)瀏覽設(shè)備而做出的努力。
適配的規(guī)范
手機方面：適配手機頁面時，我們一般以iPhone為畫布標(biāo)準(zhǔn)。原因是iPhone相對顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾CAPP常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時網(wǎng)站里的按鈕也需要變?yōu)槭謾CAPP中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個按鈕要大于88PX，方便手指的點擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋方字體，并且字號設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。也就是將網(wǎng)站改變成一個類APP的手機網(wǎng)頁，這樣才可以保證手機用戶體驗良好。如果用戶使用安卓手機，那么前端代碼則會基于設(shè)計稿的設(shè)計適度加大圖片與間距來適應(yīng)安卓屏幕。
iPad：iPad的尺寸為1024x768、2048x1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在iPad上瀏覽網(wǎng)頁是基本舒適的。因此，很多網(wǎng)站并沒有專門為iPad做適配，如果我們希望iPad用戶用的更爽，可以從文字大?。?4PX以上）、按鈕大?。?8PX左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動）等方式入手。
不同設(shè)備的注意事項
總結(jié)
無論您面對的項目是To C的還是To B的網(wǎng)站產(chǎn)品，我們都應(yīng)該首先確立設(shè)計風(fēng)格 > 尋找設(shè)計素材 > 建立情緒板 > 完成視覺稿 > 切圖標(biāo)注 > 建立視覺規(guī)范 > 進(jìn)行項目走查。
如果設(shè)計一般網(wǎng)站的頁面，可以按照1920 X 1080px尺寸設(shè)計。每屏高度900px，字體使用宋體 12px 無 和微軟雅黑 14-20 Windows LCD。Banner盡量滿屏，但是圖片需要按照4:3或16:9等比例來設(shè)計。做網(wǎng)站時可以建立柵格以更好地進(jìn)行自適應(yīng)和響應(yīng)式布局，我們也要為超鏈接和按鈕設(shè)計不同的相應(yīng)鼠標(biāo)的狀態(tài)；另外我們也可以多多嘗試在網(wǎng)站設(shè)計中加入視差滾動、雪碧圖動畫等好玩的交互。
如果設(shè)計手機端的頁面，可以按照750X1334PX尺寸設(shè)計。字體使用蘋方 24PX以上 銳利。英文字體使用SF UI。按鈕和點擊區(qū)域需要大于88PX方便手指點擊。并且頭部需要預(yù)留出微信或瀏覽器的導(dǎo)航區(qū)域。
怎么樣？閱讀完本文您是否有所收獲呢？歡迎在評論區(qū)討論哦。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn