藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
新聞?lì)惖木W(wǎng)站就是以內(nèi)容為主的，因此我們要把重點(diǎn)放在文章的內(nèi)容上。醒目的標(biāo)題最能引起用戶的注意，因此要把新聞標(biāo)題設(shè)置的醒目而且放在最顯眼的位置。文章的內(nèi)容要求精、簡(jiǎn)，提取新聞的精華簡(jiǎn)單的提供主要的信息。精簡(jiǎn)用戶閱讀的內(nèi)容的時(shí)間，讓用戶關(guān)注網(wǎng)站上更多的其他內(nèi)容，延長(zhǎng)用戶停留在網(wǎng)站上的時(shí)間。最后我們來看內(nèi)容的時(shí)效性。新聞的時(shí)效性尤其重要，大家都喜歡了解最新的新聞動(dòng)態(tài)，因此及時(shí)的更新網(wǎng)站，及時(shí)的提供最新的新聞，讓更多的用戶看過來！
同時(shí)，文章中恰到好處的添加圖文，一方面能夠增加文章的趣味性，另一方面能夠緩解用戶讀長(zhǎng)篇文字的視覺疲勞。
做好新聞?lì)惖木W(wǎng)站，體現(xiàn)您獨(dú)特的魅力
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
政府網(wǎng)站設(shè)計(jì)不等同于普通的企業(yè)網(wǎng)站設(shè)計(jì)，政府網(wǎng)站是向群眾發(fā)布政務(wù)信息，提供為人民網(wǎng)上辦事的窗口，所以政府網(wǎng)站最主要的目的也就是為人民服務(wù)，那所有網(wǎng)站在進(jìn)入之后，首先最吸引我們的也就是網(wǎng)頁的界面，網(wǎng)頁的界面設(shè)計(jì)是從側(cè)面反映政府的形象，所以政府網(wǎng)站也不能像普通的網(wǎng)站那樣做的絢麗多彩，那一切設(shè)計(jì)都是有思路的，政府網(wǎng)站也要從網(wǎng)站的風(fēng)格，色彩等方面著重策劃，以人為本，帶給用戶良好的體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
現(xiàn)如今隨著設(shè)備尺寸的多種多樣，產(chǎn)品在設(shè)計(jì)過程中需要適配到更多尺寸，布局方案與柵格系統(tǒng)的搭配使用，可以很好的做到跨平臺(tái)跨尺寸適配，極大的提升設(shè)計(jì)效率。之前有小伙伴分享過適配選型的文章中也提到過柵格，大家可以回顧一下【W(wǎng)eb產(chǎn)品的適配設(shè)計(jì)選型】。
其實(shí)，絕大多數(shù)的設(shè)計(jì)師都知道柵格很重要，市面上很多企業(yè)級(jí)系統(tǒng)也都在用柵格系統(tǒng)去規(guī)范化信息內(nèi)容的排版布局，但很多設(shè)計(jì)師直接面對(duì)結(jié)論大多是一知半解，自己做設(shè)計(jì)時(shí)有些無從下手。
作者瀏覽了大量文章結(jié)合工作中的經(jīng)驗(yàn)總結(jié)分享給大家，希望能幫助理解柵格系統(tǒng)的本質(zhì)，并能舉一反三應(yīng)用在產(chǎn)品設(shè)計(jì)中，首先從基礎(chǔ)的柵格系統(tǒng)解析開始吧。
最早的柵格概念，來源于平面設(shè)計(jì)中的“網(wǎng)格”，早在1692年，新登基的法國國王路易十四不滿于法國當(dāng)時(shí)印刷水平，命人成立了管理印刷的皇家特別委員會(huì)。旨在設(shè)計(jì)出科學(xué)的，合理的，重視功能性的新字體。委員會(huì)由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，以羅馬體為基礎(chǔ)，采用方格為設(shè)計(jì)依據(jù)，每個(gè)字體方格分為64個(gè)基本方格單位，每個(gè)方格單位再分成36個(gè)小格，這樣，一個(gè)印刷版面就有2304個(gè)小格組成，在這個(gè)嚴(yán)謹(jǐn)?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計(jì)字體的形狀，版面的排版，試驗(yàn)傳達(dá)功能的效能，這是世界上最早對(duì)字體和版面進(jìn)行科學(xué)實(shí)驗(yàn)的活動(dòng)，也是柵格系統(tǒng)最早的雛形。再后來，20世紀(jì)初，平面設(shè)計(jì)師們發(fā)現(xiàn)通過維持視覺秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設(shè)計(jì)的方法，直到20世紀(jì)40年代后期，第一次出現(xiàn)了使用網(wǎng)格進(jìn)行輔助設(shè)計(jì)的印刷作品。由瑞士設(shè)計(jì)師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書，自1961年出版以來暢銷至今，對(duì)設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng))，后來成為全球風(fēng)靡的International Typographic Style (國際主義設(shè)計(jì)風(fēng)格) 。
簡(jiǎn)單來說：柵格是通過規(guī)則的網(wǎng)格陣列，形成穩(wěn)定的基礎(chǔ)框架，來規(guī)范界面中模塊的布局與信息元素的分布，輔助設(shè)計(jì)師組織信息的工具。前面講到UI設(shè)計(jì)中常用的柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來，柵格與網(wǎng)格的本質(zhì)其實(shí)是相通的。那么有同學(xué)會(huì)問，兩者區(qū)別在哪呢？平面設(shè)計(jì)中【網(wǎng)格】應(yīng)用的媒介一般為固定的紙張規(guī)格，寬度和高度都是固定的，網(wǎng)格的劃分方式是一個(gè)個(gè)等分的方格。UI設(shè)計(jì)中【柵格】寬度受設(shè)備寬度變化而變化，高度由內(nèi)容多少來決定。因此設(shè)計(jì)時(shí)只需制定縱向的分割規(guī)則，以規(guī)范縱軸方向內(nèi)容的對(duì)齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現(xiàn)的原因。
市面上各系統(tǒng)對(duì)于柵格的名詞描述各有不同，新手往往會(huì)看的越多，越迷惑，其實(shí)大可不必糾結(jié)具體叫法上的細(xì)微差異，萬變不離其宗，理解其本質(zhì)表達(dá)的意思和柵格的結(jié)構(gòu)原則即可，下面會(huì)對(duì)這些基礎(chǔ)名詞進(jìn)行一些解釋。
網(wǎng)格（Gird）的基本構(gòu)成就是單元格，由格子組成網(wǎng)，形成網(wǎng)格。最小單元格是界面的單位基礎(chǔ)，所有界面元素都按照這個(gè)基礎(chǔ)單位布局分布，它對(duì)于創(chuàng)造性的決策具有重要的指導(dǎo)意義。
通常，我們利用 8 作為最小單元格建立網(wǎng)格。
使用 8 的倍數(shù)來定義模塊的間距與元素的尺寸。
那么為什么是8，而不是別的數(shù)字？原因如下：
a.偶數(shù)思維：8作為偶數(shù)，能適應(yīng)市面上絕大多數(shù)設(shè)備屏幕，更為普適。在輸出各種倍圖時(shí)也能保證尺寸不出現(xiàn)奇數(shù)以及0.5、0.75等次像素的出現(xiàn)（iOS導(dǎo)出1、2、3倍圖，Android導(dǎo)出1、1.5、2、3、4倍圖均為偶數(shù)）。
b.規(guī)律性：所有元素以8像素為步進(jìn)單位，利用8或8的倍數(shù)規(guī)范元素和間距大小，（例如使用4、8、16、24、32等和8具有規(guī)律關(guān)系的數(shù)字）有規(guī)可循。
c.節(jié)奏感：相比于6、10 等數(shù)字，以8為單位，在視覺感受上既不顯得過于瑣碎，也不會(huì)因?yàn)殚g隔太大而顯得內(nèi)容分散，更容易保證頁面效果的協(xié)調(diào)性。
d.目前市面上眾多開源代碼也都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大小，可行性已經(jīng)得到多輪過驗(yàn)證，設(shè)計(jì)師在與開發(fā)對(duì)接過程中對(duì)頁面有較為統(tǒng)一的理解，有效降低合作成本，在設(shè)計(jì)還原度上也更有保障。
劃重點(diǎn)：注意這里給的是建議尺寸，最小單位的制定還需要結(jié)合具體的使用場(chǎng)景來決定，我們以解決問題為最終目的。
列（Column）的作用通常是用來對(duì)齊內(nèi)容，列也是柵格的數(shù)量單位，大家可以理解設(shè)置柵格數(shù)量就是設(shè)置列的數(shù)量，如 12 柵格就有 12 列、24 柵格就有 24 個(gè)列，通過控制列數(shù)，可控制界面排版的呼吸節(jié)奏，列數(shù)越多，內(nèi)容排布可以越精細(xì)，也容易分割的太細(xì)碎，反之列數(shù)越少，內(nèi)容排布也越容易稀疏松散。
理解了列，再來說水槽（Gutter），水槽就是列于列之間的分隔間距，這里水槽的作用是幫助區(qū)塊內(nèi)容做分隔，需要注意，水槽內(nèi)不可放置任何板塊內(nèi)容。
水槽寬度在一定程度也會(huì)對(duì)界面的風(fēng)格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內(nèi)容瀏覽類頁面展示，相反水槽越小，留白小內(nèi)容緊湊，適合一些嚴(yán)謹(jǐn)?shù)墓ぞ咝兔姘孱悆?nèi)容展示，各有利弊，大家可根據(jù)設(shè)計(jì)目標(biāo)權(quán)衡設(shè)計(jì)策略。
邊距（Margin）有時(shí)候也會(huì)被叫安全邊距，是指設(shè)計(jì)內(nèi)容距離屏幕邊緣的距離，顧名思義，安全邊距內(nèi)是禁止放內(nèi)容的，可以類比為平面設(shè)計(jì)里的出血概念，主要用來控制屏幕核心內(nèi)容的展示邊界。
邊距值越小，界面核心內(nèi)容的有效利用空間越大，布局相對(duì)來說會(huì)比較寬松，相反，邊距值越大，兩邊留白大呼吸感強(qiáng)，但有效利用區(qū)域相對(duì)小，內(nèi)容排布相對(duì)更緊湊，也可能會(huì)容易擁擠。這里建議界面的邊距可以根據(jù)屏幕尺寸做適配，通過斷點(diǎn)響應(yīng)變化，這樣可以更好的保證在不同屏幕上界面呼吸節(jié)奏都相對(duì)舒適。
柵格總寬（Container）就是指頁面柵格系統(tǒng)的總寬度，即所有列寬加水槽寬度加安全邊距的總和。
建立好基礎(chǔ)柵格之后，我們可以根據(jù)內(nèi)容去定義一塊內(nèi)容占用幾個(gè)列的寬度，我們把這個(gè)區(qū)域理解為容器盒子，容器用來集合下級(jí)組件，也可以是對(duì)文字、圖片、按鈕等多個(gè)復(fù)雜元素的集合，按照頁面結(jié)構(gòu)可以由小到大依次從組件 – 容器 – 模塊 – 頁面 – 場(chǎng)景進(jìn)行組合拼裝最終形成設(shè)計(jì)方案。
定義柵格系統(tǒng)之前，我們先了解熟悉下計(jì)算公式
如果你已經(jīng)理解了前面的柵格要素的作用和用法，那么接下來就可以按照以下步驟在自己的畫板上創(chuàng)建柵格系統(tǒng)。
注意柵格區(qū)域不一定是畫布的全部區(qū)域，我們可以先將頁面按照功能模塊劃分為全局控制層、內(nèi)容層、背景層、臨時(shí)層。通常我們大多是對(duì)內(nèi)容層進(jìn)行柵格化。
通常web端常用的三種布局如下圖所示，建議按照實(shí)際使用場(chǎng)景靈活的選擇布局形式后，再確定需要柵格化的區(qū)域。
當(dāng)我們遇到一個(gè)wed端的內(nèi)容瀏覽類網(wǎng)站，一般會(huì)采用上下布局，通常會(huì)基于 1920 或 1440 尺寸作為設(shè)計(jì)稿寬度，但由于需要適配主流尺寸中的最小尺寸，核心內(nèi)容展示會(huì)控制在 1024（這里不是絕對(duì)值，不同產(chǎn)品根據(jù)實(shí)際情況數(shù)字會(huì)有上下浮動(dòng)），其他空白區(qū)域即為安全邊距，這是web網(wǎng)頁中常見的一種適配方案。
12柵格和24柵格是目前比較常見的列數(shù)結(jié)構(gòu)。選擇使用哪種柵格結(jié)構(gòu)，取決于產(chǎn)品對(duì)設(shè)計(jì)的要求。
12柵格：當(dāng)產(chǎn)品涉及到多平臺(tái)發(fā)布，內(nèi)容較為簡(jiǎn)單，單個(gè)容器盒子內(nèi)信息面積較大時(shí)，可以考慮采用12柵格來兼容。
24柵格：如果當(dāng)前產(chǎn)品發(fā)布于pc，內(nèi)容較多，且功能繁雜時(shí)，則需要更靈活的柵格系統(tǒng)去規(guī)范信息內(nèi)容的布局，這時(shí)我們可以考慮采用24柵格，國內(nèi)較為主流的企業(yè)級(jí)設(shè)計(jì)系統(tǒng) Ant Design采用的就是24 柵格。
前面講到過在產(chǎn)品 UI 中邊距（Margin）的值對(duì)視覺的呈現(xiàn)的影響，這里就不做過多贅述。這里科普一個(gè)叫做“Rem”的計(jì)算單位，(Rem 是開發(fā)常用的計(jì)算方式，設(shè)計(jì)和開發(fā)基于同一套原理進(jìn)行設(shè)計(jì)，在協(xié)作過程中能夠極大提高協(xié)作效率，并且減少維護(hù)成本），通常制定柵格系統(tǒng)時(shí)，我們可以用1Rem的值來定義水槽（Gutter），它的靈活最強(qiáng)，可作為柵格系統(tǒng)的基準(zhǔn)值。而邊距（Margin）的值通常就是1.5Rem 或者 2Rem。基于常用的4倍或者8倍間距系統(tǒng)規(guī)范，一般最為常用的基礎(chǔ)間距為 4，8，16，24，32，48，我們可以在這些基礎(chǔ)值里去選擇匹配產(chǎn)品的柵格系統(tǒng)基準(zhǔn)值。
通過Rem基準(zhǔn)值，我們還可以輕松得到一套匹配的間距系統(tǒng)，以1Rem=16為例，可以得到以下間距系統(tǒng)：
掌握以上要點(diǎn)，即可get一套匹配產(chǎn)品設(shè)計(jì)要求的柵格系統(tǒng)。
簡(jiǎn)單來講，在固定柵格中，頁面拉伸時(shí)，元素的尺寸和間距都是固定的，頁面每到一個(gè)斷點(diǎn)尺寸，就會(huì)減少或增加最邊緣的內(nèi)容元素。體現(xiàn)到柵格上，頁面寬度變化過程中未達(dá)到預(yù)設(shè)臨界值時(shí)，柵格系統(tǒng)本身的列與水槽寬度不變，頁面所有元素布局也不會(huì)有變化，直到到達(dá)臨界值，柵格列數(shù)會(huì)隨著瀏覽器寬度，增加或減少，邊緣內(nèi)容進(jìn)行換行顯示
典型案例：Dibbble、Behance
優(yōu)點(diǎn)：
適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本低
缺點(diǎn)：
適用范圍小，拉伸過程邊距不是固定的，大多只適用于內(nèi)容居中的上下布局類型產(chǎn)品
一個(gè)頁面盡量只有一種卡片尺寸，否則邊距不統(tǒng)一
卡片尺寸固定，在過大或者過小的屏幕尺寸上，比列容易顯得不協(xié)調(diào)
流動(dòng)?xùn)鸥裰许撁孢吘嗪蛢?nèi)容間距固定不變的，頁面內(nèi)容隨著頁面尺寸變化而變化，可以是增刪邊緣元素展示個(gè)數(shù)，可以是調(diào)整元素展示比例，最終效果是始終保持內(nèi)容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應(yīng)不同分辨率體現(xiàn)到柵格上，頁面邊距和水槽寬度是固定不變的，列數(shù)在適配過程中也是固定不變的，拉伸過程中的實(shí)際列寬是通過柵格區(qū)域的百分比縮放而來，這時(shí)列的寬度就不一定最小單位的倍數(shù)了。
典型案例：百度圖片、花瓣
優(yōu)點(diǎn)：
可以兼容不同尺寸的卡片混排
頁面邊距也能保持一致，拉伸過程中拉伸過程中過渡平滑，不顯得突兀
缺點(diǎn)：
頁面伸縮時(shí)，不可避免的會(huì)出現(xiàn)卡片尺寸忽大忽小
在實(shí)際項(xiàng)目中，流動(dòng)?xùn)鸥窈凸潭鸥竦慕M合使用也是比較常見的做法，一些后臺(tái)系統(tǒng)設(shè)計(jì)、工具型的界面設(shè)計(jì)會(huì)較經(jīng)常使混合柵格的形式, 混合布局既有固定的內(nèi)容寬度，也有流動(dòng)的寬度，靈活性更高，對(duì)與內(nèi)容復(fù)雜的產(chǎn)品十分友好
典型案例：Ant Design Pro
優(yōu)點(diǎn)：
容器承載內(nèi)容靈活性高，不同分辨率下都能達(dá)到較為理想的視覺效果
缺點(diǎn)：
規(guī)則復(fù)雜，實(shí)現(xiàn)成本高
最后再來總結(jié)下柵格系統(tǒng)在使用過程中一些使用要點(diǎn)：
1.內(nèi)容區(qū)塊的定義要從列開始到列結(jié)束，可以任意分割，比如 6×2、3×4、4×3。
2.水槽內(nèi)禁止放置任何內(nèi)容元素
3.安全邊距內(nèi)禁止放置任何內(nèi)容元素
4.除非特意設(shè)計(jì)，否則不要在列之外區(qū)域放置元素
5.只要框架（父級(jí)）元素對(duì)齊柵格，原子組件（子級(jí)）可以不完全對(duì)齊列
6.對(duì)于柵格的區(qū)域選擇，可以根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景靈活應(yīng)用，不一定非要整個(gè)畫布區(qū)域
7.可以使用嵌套柵格，我們通常會(huì)用一套柵格標(biāo)準(zhǔn)來全局控制整個(gè)界面，但不乏有些產(chǎn)品中會(huì)出現(xiàn)一些典型模塊的內(nèi)容密度和全局柵格的匹配度不高，這種情況我們可將特定區(qū)域單獨(dú)定義柵格值，嵌入到總的柵格系統(tǒng)中結(jié)合使用。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
作者：沙拉 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
無論作為設(shè)計(jì)師還是普通瀏覽者，大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)，在網(wǎng)頁設(shè)計(jì)中起著非常關(guān)鍵的作用。
尤其是如今簡(jiǎn)潔設(shè)計(jì)比較盛行，多數(shù)時(shí)候把頭部?jī)?nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站頭部時(shí)投入了大量精力，同時(shí)要兼顧創(chuàng)造力和實(shí)用性。根據(jù)一項(xiàng)Google的研究，用戶只需要短短數(shù)秒就可以形成對(duì)一個(gè)網(wǎng)站的看法，甚至有些觀點(diǎn)是在令人難以置信的1秒內(nèi)形成的。用戶對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開始的。
在通常網(wǎng)頁設(shè)計(jì)中，首頁上方的整個(gè)空間都被視為頭部區(qū)域。作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請(qǐng)作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。
如果以招聘活動(dòng)站點(diǎn)為例，整個(gè)頭部區(qū)域設(shè)計(jì)要明確傳達(dá)企業(yè)形象，及本次招聘活動(dòng)的特點(diǎn)。給瀏覽者一個(gè)強(qiáng)烈的視覺印象，企業(yè)已向你發(fā)出邀請(qǐng)，我們對(duì)人才十分渴求，等等信息… 如果有線上線下活動(dòng)同時(shí)參與，那么在整體風(fēng)格上盡量保持一致。
網(wǎng)頁頭部的任務(wù)是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計(jì)。
那么主要元素通常包括：
在設(shè)計(jì)網(wǎng)站頭部?jī)?nèi)容時(shí)，從思維層面來講沒有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡(jiǎn)潔和兼具實(shí)用性的，是一個(gè)可以展示創(chuàng)造性的開放領(lǐng)域。
下面讓我們一起來看看頭部?jī)?nèi)容設(shè)計(jì)的一些技巧。
1. 關(guān)于尺寸
對(duì)于網(wǎng)頁頭部圖片的大小是沒有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁或者企業(yè)客戶首頁，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺單屏展示頁。
如果某些網(wǎng)頁，例如落地頁頭部?jī)?nèi)容較長(zhǎng)的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。
2. Logo展現(xiàn)
當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導(dǎo)航欄
吸頂導(dǎo)航，換句話說就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁面時(shí)，導(dǎo)航區(qū)在頁面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：
可根據(jù)頁面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁面看起來更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡(jiǎn)化導(dǎo)航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導(dǎo)航欄有助于提升用戶體驗(yàn)，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。
3. 關(guān)于圖片的應(yīng)用
頭部?jī)?nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的，例如招聘類網(wǎng)站使用招聘場(chǎng)景圖片；也可以選擇中性感覺的例如辦公場(chǎng)景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來突出前景內(nèi)容；
高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁設(shè)計(jì)師來說是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來實(shí)現(xiàn)這一點(diǎn)。
4. 視頻或動(dòng)畫
當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部?jī)?nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁動(dòng)畫，撥云見日的效果加上中式剪紙風(fēng)格的運(yùn)用，將公司各業(yè)務(wù)線融合到幾個(gè)轉(zhuǎn)輪中，產(chǎn)生了故事性的動(dòng)畫場(chǎng)景。
如果想要使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫。它可以使網(wǎng)站頭部?jī)?nèi)容變得非常酷。以每季校園招聘企業(yè)站點(diǎn)為例，各大公司對(duì)應(yīng)屆生群體的追逐，很大程度上體現(xiàn)在對(duì)該群體審美和喜好的迎合上，年輕有活力的動(dòng)畫或視頻元素絕對(duì)是吸引眼球的不二之選。
當(dāng)然不一定只有滿屏大型動(dòng)畫，一般動(dòng)畫越復(fù)雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同，設(shè)計(jì)一些交互性的動(dòng)畫，去提升客戶使用感受，盡量不影響網(wǎng)頁打開速度。
5. 移動(dòng)端頭部設(shè)計(jì)
網(wǎng)頁頭部不可能只顯示PC端的網(wǎng)頁上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁上。因此，在近年的設(shè)計(jì)中，網(wǎng)頁必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備，這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。
移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì)，即使在PC中，也有一些細(xì)節(jié)看起來像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。
移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式，很多時(shí)候需要設(shè)計(jì)師在一開始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁面中展開顯示的內(nèi)容，在移動(dòng)端會(huì)向下層延伸，首層界面成為一個(gè)內(nèi)容聚合頁。
網(wǎng)站是以頭部?jī)?nèi)容為先導(dǎo)的，它就像是一張獨(dú)特的名片。因此，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，盡可能最大限度地關(guān)注該區(qū)域。
最后還要提醒大家，一定記得定期更新網(wǎng)站頭部?jī)?nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會(huì)在每年春秋兩季的招聘旺季更新其招聘主題風(fēng)格，以保持網(wǎng)站的新鮮感和時(shí)效性。
以上只是在工作中的一些點(diǎn)滴體會(huì)，微不足道。感恩能在UXD集體中不斷成長(zhǎng)。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）
網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？
網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！
很多人很喜歡國外的極簡(jiǎn)設(shè)計(jì)，先不看 Dribbble 上五花繚亂飛機(jī)稿，哪怕是博客編輯器 Wix.com 上的模板看著都很令人羨慕。為啥國外的網(wǎng)站都那么極簡(jiǎn)，國內(nèi)就學(xué)不來呢？
十年前，我以為這是因?yàn)閲駥徝篮驮O(shè)計(jì)師水平?jīng)]上來?，F(xiàn)在，我發(fā)現(xiàn)這件事情沒那么簡(jiǎn)單??！假想一下，你去下一個(gè)國外的極簡(jiǎn) UI 模板來，把文字改成中文，評(píng)審時(shí)能過稿嗎？
我估計(jì)十有八九過不了，產(chǎn)品經(jīng)理肯定有一大堆信息、功能和運(yùn)營入口要塞進(jìn)去?？蛇@應(yīng)該怪萬惡的資本主義，為了賺錢而不把審美自由當(dāng)回事嗎？
尼爾森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做過一次研究試驗(yàn)，發(fā)現(xiàn)不光是中國的公司決策層，就連中國的用戶也未必就喜歡非常極簡(jiǎn)界面。
這次研究中，12 個(gè)中國人和在中國生活的外國人（應(yīng)該是歐美為主）被邀請(qǐng)來，在 8 個(gè)網(wǎng)站上完成簡(jiǎn)單的任務(wù)，并且一邊使用一邊說出他們的想法和意圖（Think Aloud）。
P.S. 這 8 個(gè)網(wǎng)站中有簡(jiǎn)潔的也有復(fù)雜的，對(duì)中國人展示中文，對(duì)外國人展示英文，以此形成對(duì)比。
很多外國人在使用較為復(fù)雜的網(wǎng)站時(shí)（被翻譯成英文的中文網(wǎng)站），抱怨比較多。他們?cè)谥袊?，?duì)這種網(wǎng)站設(shè)計(jì)已經(jīng)見怪不怪了。
雖然也有人說好話，稱贊信息展示明確直白，但也有人抱怨很難用的。至少大部分外國人對(duì)于復(fù)雜頁面的問題比簡(jiǎn)潔頁面的問題要多得多。
而相比他們，中國人普遍不覺得那些復(fù)雜頁面有什么特別的，因?yàn)槟切┖堋捌胀ā?、“正?！保踔痢皞鹘y(tǒng)”。
相反，抱怨簡(jiǎn)潔頁面難用的反倒更多，例如：
“單從設(shè)計(jì)角度來看，圖標(biāo)、圖片、布局都很好，符合很多人，至少年輕人都喜好。簡(jiǎn)單、干凈，既沒廣告，又沒有無用信息。但問題是，它也沒什么有用信息——我在這些網(wǎng)站里看不到什么有用的東西。所有的功能介紹都只是在玩文字游戲，沒有實(shí)際含義，沒點(diǎn)真實(shí)內(nèi)容?！?
P.S. 以上是從英文資料的翻譯。
中文的信息傳遞效率就是比英文高，我們也早就習(xí)慣了這一點(diǎn)?！堵?lián)合國憲章》被翻譯成六種語言，其中就數(shù)中文最薄。
2017 年，Twitter 把原有 140 個(gè)單詞的限制放寬到了 280，卻唯獨(dú)沒有把這改版提供給中文、日文和韓文，理由就是語言密度足夠大了。
所以說，中文用戶對(duì)單頁信息量要求更高，這就是很正常的事了。
同樣的一句話，雖然中文更簡(jiǎn)短，但是視覺密度更高啊。
會(huì)點(diǎn)排版的人都知道，視覺密度的節(jié)奏很重要，要全局考慮的。如果有一個(gè)地方的視覺密度比較高，那么整個(gè)頁面的視覺密度都要匹配上才能和諧。否則一下子太疏一下子太密，就會(huì)喪失統(tǒng)一感。中文的間隙和比劃之間的間隔都比較小，也注定了頁面的其它部分為了匹配上這個(gè)節(jié)奏，不能太疏。
這就是為什么，把一些英文板式直接拿來填充中文會(huì)很奇怪。難怪我去一些繁體中文網(wǎng)站時(shí)，會(huì)感覺比簡(jiǎn)體中文網(wǎng)站更復(fù)雜擁擠。其實(shí)咱們大陸地區(qū)由于使用簡(jiǎn)體字，視覺密度已經(jīng)比繁體字要松很多了。
說到這里，不是要為一些又復(fù)雜又不好用的設(shè)計(jì)進(jìn)行辯解。只是說，簡(jiǎn)潔并不代表好用。當(dāng)我們隨口說出“少即是多”這種設(shè)計(jì)概念時(shí)，也不可忽視，凡事都有個(gè)度。看到國外那種極簡(jiǎn)設(shè)計(jì)時(shí)，也稍微自信點(diǎn)，簡(jiǎn)潔并不是我們唯一追求的方向。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）
網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？
網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！
20 世紀(jì)末到 21 世紀(jì)開始，宣傳品牌與產(chǎn)品的陣地不再局限于印刷品，電視、電臺(tái)及現(xiàn)場(chǎng)活動(dòng)，而是出現(xiàn)了網(wǎng)站，網(wǎng)站可以鏈接更多陌生人，而且沒有時(shí)空限制。
1997 年的谷歌網(wǎng)站
美國最火的設(shè)計(jì)風(fēng)格只要有人將資料放到網(wǎng)上，遠(yuǎn)在日本的一名中學(xué)生都可以去學(xué)習(xí)了解，所以也打破了過去信息差的優(yōu)勢(shì)。本回我們要跟大家聊聊網(wǎng)頁設(shè)計(jì)的發(fā)展，但在展開內(nèi)容前，要搞清楚一個(gè)問題，就是網(wǎng)頁設(shè)計(jì)屬于平面設(shè)計(jì)嗎？
國內(nèi)早在差不多 20 年前，建站公司就開始獨(dú)立存在，所以這個(gè)問題蠻有爭(zhēng)議，尤其是 UI 設(shè)計(jì)也很成熟之后，大家更愿意認(rèn)為此學(xué)科是獨(dú)立的。
中國建于 1994 年的第一個(gè)網(wǎng)頁，主要對(duì)外溝通
平面設(shè)計(jì)的定義不管怎么粉飾，簡(jiǎn)單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網(wǎng)頁設(shè)計(jì)也是如此，唯一區(qū)別是網(wǎng)頁具有動(dòng)態(tài)，但這種動(dòng)態(tài)屬于若干個(gè)靜態(tài)設(shè)定的切換關(guān)系，其關(guān)鍵幀也是平面設(shè)計(jì)。
2003 年時(shí)候的淘寶網(wǎng)
我在國內(nèi)蠻早就從事網(wǎng)頁設(shè)計(jì)工作，早年甚至可以自己獨(dú)立完成網(wǎng)站，除了頁面設(shè)計(jì)，還包括套 ASP 程序（Active Server Pages 動(dòng)態(tài)服務(wù)器頁面），用 table 布局前端等，當(dāng)然這些技術(shù)如今早已過時(shí)。
12 年前史太濃獨(dú)立完成的網(wǎng)站
因此這段歷史我就是參與者之一，所以本回不僅是對(duì)搜集資料的剪裁分析，還會(huì)結(jié)合不少自身經(jīng)歷體驗(yàn)跟大家分享。
首先我們來簡(jiǎn)單回顧下互聯(lián)網(wǎng)的發(fā)展與網(wǎng)頁設(shè)計(jì)的演變。
互聯(lián)網(wǎng)發(fā)展到如今已經(jīng)像空氣一樣存在，斷網(wǎng)已經(jīng)如同缺氧那么嚴(yán)重，而互聯(lián)網(wǎng)的誕生最初跟兩件事情相關(guān)。
第一件大家也許比較熟悉，就是在 20 世紀(jì) 50 年代末美國國防部高級(jí)研究項(xiàng)目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡(jiǎn)稱 ARPA）成立了。
美國國防部高級(jí)研究項(xiàng)目總署 logo
其成立的根本原因是冷戰(zhàn)背景下，蘇聯(lián)不但先于美國在 1957 年將衛(wèi)星送上太空，而且世界第一枚多級(jí)遠(yuǎn)程彈道火箭發(fā)射也試驗(yàn)成功，因此蘇聯(lián)宣稱可以將核彈送往地球任何地區(qū)。這對(duì)美國而言實(shí)在太嚇人，所以 ARPA 是一個(gè)專門研究國防技術(shù)的“事業(yè)部”，聚合美國當(dāng)時(shí)最牛的幾百位科學(xué)家，研究如何將最先進(jìn)技術(shù)應(yīng)用到美國國防。
人類第一個(gè)衛(wèi)星由蘇聯(lián)在 1957 年發(fā)射
由于這些科學(xué)家當(dāng)時(shí)分散于全國各地，因?yàn)槿绱藚柡Φ目茖W(xué)家肯定本身有重要事務(wù)，而不是放著隨傳隨到，因此大伙無法專門聚在一起專門干這事，而是遠(yuǎn)程協(xié)作，所以就需要一個(gè)有效的遠(yuǎn)程溝通工具。
這個(gè)工具不能只局限于語言聲音，還要做到資源共享，更關(guān)鍵的是要高效安全，信息不可被盜取，當(dāng)時(shí)負(fù)責(zé)研究此事的人是麻省理工科學(xué)家約翰·利克利德(John Licklider)。
麻省理工科學(xué)家約翰·利克利德
此處省略一堆過程與專業(yè)技術(shù)術(shù)語，反正如此這般，利克利德因?yàn)?ARPA 組織這個(gè)溝通交接需求無意中發(fā)明出“國際互聯(lián)網(wǎng)網(wǎng)絡(luò)”（the World Wide Web）。
互聯(lián)網(wǎng)時(shí)代開啟
事后證明，國不國防是一回事，這才是他們最偉大的發(fā)明。這種技術(shù)能做到資源共享與防止盜取的一個(gè)重要原因是可以將信息分解成“數(shù)據(jù)包”，將他們發(fā)送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個(gè)程度就可以了，再往深里說意義不大，況且我也說不清楚，
而時(shí)間很快去到 1987 年，這是第二件事情，這一年蘋果電腦公司向外界報(bào)道了一款可在網(wǎng)絡(luò)上尋找資料的軟件，名為“超級(jí)文件”（Hypertext）。
蘋果 1987 年的“超級(jí)文件”軟件
比如在電腦上打“設(shè)計(jì)史太濃”就可以將當(dāng)時(shí)整個(gè)網(wǎng)絡(luò)與此相關(guān)的文字內(nèi)容集中起來（當(dāng)時(shí)網(wǎng)絡(luò)上的內(nèi)容其實(shí)非常有限），等于是谷歌百度的前身了。
后來這個(gè)軟件進(jìn)化為“超級(jí)媒體”（Hypermedia），除了可以檢索文字，還可以找到圖形、聲音、電影及電視圖像。
蘋果軟件“超級(jí)媒體”軟件
再然后，蘋果公司將這種技術(shù)跟日本索尼公司發(fā)明的 CD-ROM（compact disc read only memory，于 1982 年發(fā)明）進(jìn)行結(jié)合，變成“互動(dòng)光盤”，這種光盤就等于是如今網(wǎng)站的鼻祖版本了。在大致容量 600MGB 的 CD 中，蘋果公司的工作人員往里面塞進(jìn)了文字、圖形、動(dòng)畫，而且形成一個(gè)復(fù)雜的索引架構(gòu)。
CD-ROM 中的互動(dòng)界面
這樣一來就形成一個(gè)靈活且可互動(dòng)的內(nèi)容庫，大家可以根據(jù)需要選取想看的部分，有首頁、二級(jí)欄目、三級(jí)欄目、內(nèi)容詳情頁等。在此過程中還發(fā)明設(shè)計(jì)出一些后來常見的網(wǎng)站架構(gòu)邏輯，比如“平行文本”、“多層”“矩陣”“網(wǎng)絡(luò)系統(tǒng)”等，這里作很簡(jiǎn)單的介紹：
平行文本就是可以在看一篇文字時(shí)候可一邊看到它相關(guān)的摘要跟縮寫，這等于如今的鼠標(biāo)經(jīng)過效果。
網(wǎng)頁中的“鼠標(biāo)經(jīng)過”效果
多層就是看一個(gè)內(nèi)容的時(shí)候可以看到其它相關(guān)部分，等于如今網(wǎng)站中的“相關(guān)推薦”。
網(wǎng)頁中的“相關(guān)推薦”效果
矩陣就是將資料布局到一個(gè)網(wǎng)格中方便大家查詢，等于現(xiàn)在的產(chǎn)品系統(tǒng)，新聞系統(tǒng)一類。
網(wǎng)頁中的“產(chǎn)品系統(tǒng)”效果
網(wǎng)絡(luò)系統(tǒng)就是可以聯(lián)系外部信息，其實(shí)就等于友情鏈接一類了。
當(dāng)時(shí)間去到 1991 年，美國政府開始投入資金將“互聯(lián)網(wǎng)”引入公共學(xué)校，而經(jīng)過 6 年，世界上就有 3000 萬個(gè)網(wǎng)絡(luò)用戶，2000 年左右，美國就有三分之一的家庭實(shí)現(xiàn)了聯(lián)網(wǎng)。有流量就有商機(jī)，于是就有人將“互動(dòng)光盤”這樣的呈現(xiàn)方式搬到互聯(lián)網(wǎng)上變成網(wǎng)站，變成一種宣傳展示的渠道，不亦樂乎。
90 年代可口可樂的官網(wǎng)
所以最初的“互動(dòng)光盤”設(shè)計(jì)其實(shí)就等于第一代網(wǎng)頁設(shè)計(jì)。
1994 年時(shí)候，中國有個(gè)人因?yàn)楣珓?wù)出差去美國見證過互聯(lián)網(wǎng)的神奇，回國之后辭職，在 1998 年創(chuàng)立了一個(gè)如今市值 1.8 萬億的公司—阿里巴巴，這人就是馬云。
阿里巴巴早期的網(wǎng)頁設(shè)計(jì)樣式
20 世紀(jì) 90 年代恰好是網(wǎng)站建設(shè)數(shù)量急劇暴增的時(shí)候，充滿了商機(jī)，大家可以理解為近幾年短視頻暴增一樣，根據(jù)回顧統(tǒng)計(jì)，在 1997 年時(shí)候僅僅一年美國本土就新增了 80 萬個(gè)新網(wǎng)頁。
所以用“網(wǎng)頁”一詞是因?yàn)樽畛跣U多網(wǎng)站都是靜態(tài)，網(wǎng)站后臺(tái)是后來慢慢才發(fā)展形成。
1997 年時(shí)候的麥當(dāng)勞網(wǎng)站設(shè)計(jì)
但網(wǎng)頁設(shè)計(jì)最初的暴增還沒有直接為平面設(shè)計(jì)師創(chuàng)造崗位，因?yàn)榈谝淮W(wǎng)頁設(shè)計(jì)師其實(shí)大部分由程序員轉(zhuǎn)型而來。后來不斷發(fā)展競(jìng)爭(zhēng)升級(jí)才將程序、前端、網(wǎng)頁設(shè)計(jì)及推廣優(yōu)化這樣的崗位分來，以便有更專業(yè)的表現(xiàn)。
我在 2010 年時(shí)候開始從事網(wǎng)頁設(shè)計(jì)，恰好是一個(gè)將網(wǎng)站建設(shè)不同崗位獨(dú)立出來的時(shí)代。當(dāng)時(shí)我所在公司中企動(dòng)力屬于國內(nèi)最大型建站公司，大部分老同事都曾經(jīng)是程序前端設(shè)計(jì)甚至推廣這樣一條龍為客戶提供服務(wù)。
史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)
他們本質(zhì)上就是從一名開發(fā)人員入行，所以他們會(huì)從實(shí)現(xiàn)效果端來規(guī)劃設(shè)計(jì)，跟后來網(wǎng)頁設(shè)計(jì)崗獨(dú)立后完全不同。蠻多網(wǎng)頁設(shè)計(jì)師其實(shí)根本不管程序?qū)崿F(xiàn)問題，也因此產(chǎn)生出更多更好的視覺效果，反推程序開發(fā)與前端制作的進(jìn)步。當(dāng)時(shí)在公司經(jīng)常見到的就是網(wǎng)頁設(shè)計(jì)跟前端或者開發(fā)同事“干架”，爭(zhēng)論要點(diǎn)就是很多效果程序根本做不出來。
史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)
這樣的事情其實(shí)一直在全世界發(fā)生，所以網(wǎng)站制作技術(shù)也是以飛一般的速度在發(fā)展。比如我剛剛學(xué)會(huì) Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來，而程序開發(fā)端則是 asp 到 asp·net 到 php 到 java 等不同開發(fā)語言在不斷進(jìn)化。
史太濃在 2010 年前后的網(wǎng)頁設(shè)計(jì)
這樣的變化結(jié)果就是不斷優(yōu)化網(wǎng)頁設(shè)計(jì)的表現(xiàn)效果。
那時(shí)候我們往往在掌握一門自認(rèn)為很牛的必殺技后不到兩年就也許會(huì)過時(shí)，最典型例子莫過于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因?yàn)槿瞬畔∪?，收入可以是我們?2-3 倍，那時(shí)候最流行就是用 flash 做所謂的“體驗(yàn)館”。
全 Flash 網(wǎng)站
“體驗(yàn)館”的大致效果就是能在網(wǎng)站場(chǎng)景中做一些換部件，換顏色，或者點(diǎn)擊指引箭頭切換畫面等操作。印象中當(dāng)時(shí)有一個(gè)奢侈品平臺(tái)站就是純 flash 網(wǎng)站，開發(fā)制作費(fèi)用高達(dá) 300 多萬。
但好景不長(zhǎng)，因?yàn)橹悄苁謾C(jī)的崛起與 4G 通信技術(shù)的發(fā)展，互聯(lián)網(wǎng)的主陣地慢慢往移動(dòng)端遷移，而智能手機(jī)中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網(wǎng)頁設(shè)計(jì)從業(yè)者可以說見證了全過程。
全 Flash 網(wǎng)站
當(dāng)時(shí)身邊就有同事因?yàn)榫?flash 被挖去甲方企業(yè)開發(fā)純 flash 的眼鏡商城，據(jù)說后來項(xiàng)目就沒發(fā)展起來。
說到商城，網(wǎng)頁設(shè)計(jì)還有一個(gè)重要的主題變化，就是從企業(yè)網(wǎng)站到平臺(tái)網(wǎng)站到電子商城再到手機(jī)網(wǎng)站，App 應(yīng)用，公眾號(hào)，小程序這樣的不斷切換。到了移動(dòng)端其實(shí)網(wǎng)頁設(shè)計(jì)就被“UI 設(shè)計(jì)”（User Interface 用戶界面）這樣更專業(yè)化的稱謂取代。
史太濃 2013 年前后的 UI 設(shè)計(jì)
因?yàn)楦锩缘钠聊挥|摸技術(shù)的誕生，很多網(wǎng)站本身就可以通過觸屏控制，所以從定義上來說，UI 設(shè)計(jì)可以說包含了網(wǎng)頁設(shè)計(jì)。
史太濃 2013 年前后的網(wǎng)頁設(shè)計(jì)
隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展其實(shí)也拔高了 UI 設(shè)計(jì)門檻，因?yàn)橐紤]很多交互體驗(yàn)問題與技術(shù)規(guī)格標(biāo)準(zhǔn)，有點(diǎn)像當(dāng)時(shí)烏爾姆學(xué)院做產(chǎn)品設(shè)計(jì)那一套，有很多理科屬性的知識(shí)融入進(jìn)來。
所以網(wǎng)頁設(shè)計(jì)經(jīng)過僅僅 30 年的發(fā)展，就走向細(xì)分領(lǐng)域的拆解，分裂出企業(yè)網(wǎng)站設(shè)計(jì)（偏向品牌與廣告）、電商設(shè)計(jì)（偏向營銷）跟移動(dòng)端設(shè)計(jì)（偏向交互體驗(yàn)）。
史太濃 2018 年前后的電商網(wǎng)站設(shè)計(jì)
但不管如何，這個(gè)過程中平面設(shè)計(jì)的本質(zhì)屬性仍然沒變，只是要解決的問題更多元化，更具體了。
根據(jù)歷史紀(jì)錄，美國的設(shè)計(jì)師杰西卡·哈芳德（JessicaHelfand）是較早以平面設(shè)計(jì)師身份參與到網(wǎng)頁設(shè)計(jì)中的，比如 90 年代她為美國“發(fā)現(xiàn)頻道”設(shè)計(jì)了網(wǎng)站。
美國“發(fā)現(xiàn)頻道”90 年代的網(wǎng)站
哈芳德生于 1960 年，目前還活躍于設(shè)計(jì)圈，她也許是最有資格感嘆互聯(lián)網(wǎng)設(shè)計(jì)形式劇烈變化的人之一。
杰西卡·哈芳德
本期內(nèi)容沒有談及太多具體人物及作品，因?yàn)樵谟邢奁锉酒趦?nèi)容已經(jīng)高度濃縮，更多是在給大家整理一個(gè)框架。
關(guān)于網(wǎng)頁設(shè)計(jì)發(fā)展的經(jīng)歷，也歡迎大家根據(jù)自己的體會(huì)參與到討論中，說出你們的故事。
本期故事講到這里，感謝各位，下期再會(huì)！
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
網(wǎng)站設(shè)計(jì)之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南（附大量資源）
網(wǎng)站設(shè)計(jì)之二：旅游網(wǎng)站設(shè)計(jì)分析！教你10個(gè)小技巧
網(wǎng)站設(shè)計(jì)之三：實(shí)例教學(xué)！如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中？
網(wǎng)站設(shè)計(jì)之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計(jì)形式的幾種方法
網(wǎng)站設(shè)計(jì)之五：經(jīng)驗(yàn)分享：移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”
網(wǎng)站設(shè)計(jì)之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬別隨便學(xué)國外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁頭部?jī)?nèi)容設(shè)計(jì)？來看 58 設(shè)計(jì)師的總結(jié)！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn
