藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)頁(yè)的界面，網(wǎng)頁(yè)的界面設(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ì)分享國(guó)內(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)分享國(guó)內(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)過(guò)程中需要適配到更多尺寸，布局方案與柵格系統(tǒng)的搭配使用，可以很好的做到跨平臺(tái)跨尺寸適配，極大的提升設(shè)計(jì)效率。之前有小伙伴分享過(guò)適配選型的文章中也提到過(guò)柵格，大家可以回顧一下【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í)有些無(wú)從下手。
作者瀏覽了大量文章結(jié)合工作中的經(jīng)驗(yàn)總結(jié)分享給大家，希望能幫助理解柵格系統(tǒng)的本質(zhì)，并能舉一反三應(yīng)用在產(chǎn)品設(shè)計(jì)中，首先從基礎(chǔ)的柵格系統(tǒng)解析開(kāi)始吧。
最早的柵格概念，來(lái)源于平面設(shè)計(jì)中的“網(wǎng)格”，早在1692年，新登基的法國(guó)國(guó)王路易十四不滿于法國(guó)當(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)最早的雛形。再后來(lái)，20世紀(jì)初，平面設(shè)計(jì)師們發(fā)現(xiàn)通過(guò)維持視覺(jué)秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設(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)》一書(shū)，自1961年出版以來(lái)暢銷至今，對(duì)設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng))，后來(lái)成為全球風(fēng)靡的International Typographic Style (國(guó)際主義設(shè)計(jì)風(fēng)格) 。
簡(jiǎn)單來(lái)說(shuō)：柵格是通過(guò)規(guī)則的網(wǎng)格陣列，形成穩(wěn)定的基礎(chǔ)框架，來(lái)規(guī)范界面中模塊的布局與信息元素的分布，輔助設(shè)計(jì)師組織信息的工具。前面講到UI設(shè)計(jì)中常用的柵格系統(tǒng)是從平面網(wǎng)格系統(tǒng)中發(fā)展而來(lái)，柵格與網(wǎng)格的本質(zhì)其實(shí)是相通的。那么有同學(xué)會(huì)問(wèn)，兩者區(qū)別在哪呢？平面設(shè)計(jì)中【網(wǎng)格】應(yīng)用的媒介一般為固定的紙張規(guī)格，寬度和高度都是固定的，網(wǎng)格的劃分方式是一個(gè)個(gè)等分的方格。UI設(shè)計(jì)中【柵格】寬度受設(shè)備寬度變化而變化，高度由內(nèi)容多少來(lái)決定。因此設(shè)計(jì)時(shí)只需制定縱向的分割規(guī)則，以規(guī)范縱軸方向內(nèi)容的對(duì)齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現(xiàn)的原因。
市面上各系統(tǒng)對(duì)于柵格的名詞描述各有不同，新手往往會(huì)看的越多，越迷惑，其實(shí)大可不必糾結(jié)具體叫法上的細(xì)微差異，萬(wàn)變不離其宗，理解其本質(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ù)來(lái)定義模塊的間距與元素的尺寸。
那么為什么是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為單位，在視覺(jué)感受上既不顯得過(guò)于瑣碎，也不會(huì)因?yàn)殚g隔太大而顯得內(nèi)容分散，更容易保證頁(yè)面效果的協(xié)調(diào)性。
d.目前市面上眾多開(kāi)源代碼也都以8的倍數(shù)作為默認(rèn)設(shè)計(jì)大小，可行性已經(jīng)得到多輪過(guò)驗(yàn)證，設(shè)計(jì)師在與開(kāi)發(fā)對(duì)接過(guò)程中對(duì)頁(yè)面有較為統(tǒng)一的理解，有效降低合作成本，在設(shè)計(jì)還原度上也更有保障。
劃重點(diǎn)：注意這里給的是建議尺寸，最小單位的制定還需要結(jié)合具體的使用場(chǎng)景來(lái)決定，我們以解決問(wèn)題為最終目的。
列（Column）的作用通常是用來(lái)對(duì)齊內(nèi)容，列也是柵格的數(shù)量單位，大家可以理解設(shè)置柵格數(shù)量就是設(shè)置列的數(shù)量，如 12 柵格就有 12 列、24 柵格就有 24 個(gè)列，通過(guò)控制列數(shù)，可控制界面排版的呼吸節(jié)奏，列數(shù)越多，內(nèi)容排布可以越精細(xì)，也容易分割的太細(xì)碎，反之列數(shù)越少，內(nèi)容排布也越容易稀疏松散。
理解了列，再來(lái)說(shuō)水槽（Gutter），水槽就是列于列之間的分隔間距，這里水槽的作用是幫助區(qū)塊內(nèi)容做分隔，需要注意，水槽內(nèi)不可放置任何板塊內(nèi)容。
水槽寬度在一定程度也會(huì)對(duì)界面的風(fēng)格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內(nèi)容瀏覽類頁(yè)面展示，相反水槽越小，留白小內(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ì)里的出血概念，主要用來(lái)控制屏幕核心內(nèi)容的展示邊界。
邊距值越小，界面核心內(nèi)容的有效利用空間越大，布局相對(duì)來(lái)說(shuō)會(huì)比較寬松，相反，邊距值越大，兩邊留白大呼吸感強(qiáng)，但有效利用區(qū)域相對(duì)小，內(nèi)容排布相對(duì)更緊湊，也可能會(huì)容易擁擠。這里建議界面的邊距可以根據(jù)屏幕尺寸做適配，通過(guò)斷點(diǎn)響應(yīng)變化，這樣可以更好的保證在不同屏幕上界面呼吸節(jié)奏都相對(duì)舒適。
柵格總寬（Container）就是指頁(yè)面柵格系統(tǒng)的總寬度，即所有列寬加水槽寬度加安全邊距的總和。
建立好基礎(chǔ)柵格之后，我們可以根據(jù)內(nèi)容去定義一塊內(nèi)容占用幾個(gè)列的寬度，我們把這個(gè)區(qū)域理解為容器盒子，容器用來(lái)集合下級(jí)組件，也可以是對(duì)文字、圖片、按鈕等多個(gè)復(fù)雜元素的集合，按照頁(yè)面結(jié)構(gòu)可以由小到大依次從組件 – 容器 – 模塊 – 頁(yè)面 – 場(chǎng)景進(jìn)行組合拼裝最終形成設(shè)計(jì)方案。
定義柵格系統(tǒng)之前，我們先了解熟悉下計(jì)算公式
如果你已經(jīng)理解了前面的柵格要素的作用和用法，那么接下來(lái)就可以按照以下步驟在自己的畫板上創(chuàng)建柵格系統(tǒng)。
注意柵格區(qū)域不一定是畫布的全部區(qū)域，我們可以先將頁(yè)面按照功能模塊劃分為全局控制層、內(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)頁(yè)中常見(jiàn)的一種適配方案。
12柵格和24柵格是目前比較常見(jiàn)的列數(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柵格來(lái)兼容。
24柵格：如果當(dāng)前產(chǎn)品發(fā)布于pc，內(nèi)容較多，且功能繁雜時(shí)，則需要更靈活的柵格系統(tǒng)去規(guī)范信息內(nèi)容的布局，這時(shí)我們可以考慮采用24柵格，國(guó)內(nèi)較為主流的企業(yè)級(jí)設(shè)計(jì)系統(tǒng) Ant Design采用的就是24 柵格。
前面講到過(guò)在產(chǎn)品 UI 中邊距（Margin）的值對(duì)視覺(jué)的呈現(xiàn)的影響，這里就不做過(guò)多贅述。這里科普一個(gè)叫做“Rem”的計(jì)算單位，(Rem 是開(kāi)發(fā)常用的計(jì)算方式，設(shè)計(jì)和開(kāi)發(fā)基于同一套原理進(jìn)行設(shè)計(jì)，在協(xié)作過(guò)程中能夠極大提高協(xié)作效率，并且減少維護(hù)成本），通常制定柵格系統(tǒng)時(shí)，我們可以用1Rem的值來(lái)定義水槽（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)值。
通過(guò)Rem基準(zhǔn)值，我們還可以輕松得到一套匹配的間距系統(tǒng)，以1Rem=16為例，可以得到以下間距系統(tǒng)：
掌握以上要點(diǎn)，即可get一套匹配產(chǎn)品設(shè)計(jì)要求的柵格系統(tǒng)。
簡(jiǎn)單來(lái)講，在固定柵格中，頁(yè)面拉伸時(shí)，元素的尺寸和間距都是固定的，頁(yè)面每到一個(gè)斷點(diǎn)尺寸，就會(huì)減少或增加最邊緣的內(nèi)容元素。體現(xiàn)到柵格上，頁(yè)面寬度變化過(guò)程中未達(dá)到預(yù)設(shè)臨界值時(shí)，柵格系統(tǒng)本身的列與水槽寬度不變，頁(yè)面所有元素布局也不會(huì)有變化，直到到達(dá)臨界值，柵格列數(shù)會(huì)隨著瀏覽器寬度，增加或減少，邊緣內(nèi)容進(jìn)行換行顯示
典型案例：Dibbble、Behance
優(yōu)點(diǎn)：
適配規(guī)則簡(jiǎn)單，實(shí)現(xiàn)成本低
缺點(diǎn)：
適用范圍小，拉伸過(guò)程邊距不是固定的，大多只適用于內(nèi)容居中的上下布局類型產(chǎn)品
一個(gè)頁(yè)面盡量只有一種卡片尺寸，否則邊距不統(tǒng)一
卡片尺寸固定，在過(guò)大或者過(guò)小的屏幕尺寸上，比列容易顯得不協(xié)調(diào)
流動(dòng)?xùn)鸥裰许?yè)面邊距和內(nèi)容間距固定不變的，頁(yè)面內(nèi)容隨著頁(yè)面尺寸變化而變化，可以是增刪邊緣元素展示個(gè)數(shù)，可以是調(diào)整元素展示比例，最終效果是始終保持內(nèi)容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應(yīng)不同分辨率體現(xiàn)到柵格上，頁(yè)面邊距和水槽寬度是固定不變的，列數(shù)在適配過(guò)程中也是固定不變的，拉伸過(guò)程中的實(shí)際列寬是通過(guò)柵格區(qū)域的百分比縮放而來(lái)，這時(shí)列的寬度就不一定最小單位的倍數(shù)了。
典型案例：百度圖片、花瓣
優(yōu)點(diǎn)：
可以兼容不同尺寸的卡片混排
頁(yè)面邊距也能保持一致，拉伸過(guò)程中拉伸過(guò)程中過(guò)渡平滑，不顯得突兀
缺點(diǎn)：
頁(yè)面伸縮時(shí)，不可避免的會(huì)出現(xiàn)卡片尺寸忽大忽小
在實(shí)際項(xiàng)目中，流動(dòng)?xùn)鸥窈凸潭鸥竦慕M合使用也是比較常見(jiàn)的做法，一些后臺(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á)到較為理想的視覺(jué)效果
缺點(diǎn)：
規(guī)則復(fù)雜，實(shí)現(xiàn)成本高
最后再來(lái)總結(jié)下柵格系統(tǒng)在使用過(guò)程中一些使用要點(diǎn)：
1.內(nèi)容區(qū)塊的定義要從列開(kāi)始到列結(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)來(lái)全局控制整個(gè)界面，但不乏有些產(chǎn)品中會(huì)出現(xiàn)一些典型模塊的內(nèi)容密度和全局柵格的匹配度不高，這種情況我們可將特定區(qū)域單獨(dú)定義柵格值，嵌入到總的柵格系統(tǒng)中結(jié)合使用。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(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)系
作者：沙拉 來(lái)源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ú)論作為設(shè)計(jì)師還是普通瀏覽者，大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁(yè)的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)，在網(wǎng)頁(yè)設(shè)計(jì)中起著非常關(guān)鍵的作用。
尤其是如今簡(jiǎn)潔設(shè)計(jì)比較盛行，多數(shù)時(shí)候把頭部?jī)?nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁(yè)設(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)開(kāi)始的。
在通常網(wǎng)頁(yè)設(shè)計(jì)中，首頁(yè)上方的整個(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)烈的視覺(jué)印象，企業(yè)已向你發(fā)出邀請(qǐng)，我們對(duì)人才十分渴求，等等信息… 如果有線上線下活動(dòng)同時(shí)參與，那么在整體風(fēng)格上盡量保持一致。
網(wǎng)頁(yè)頭部的任務(wù)是給用戶提供一些基本問(wèn)題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計(jì)。
那么主要元素通常包括：
在設(shè)計(jì)網(wǎng)站頭部?jī)?nèi)容時(shí)，從思維層面來(lái)講沒(méi)有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡(jiǎn)潔和兼具實(shí)用性的，是一個(gè)可以展示創(chuàng)造性的開(kāi)放領(lǐng)域。
下面讓我們一起來(lái)看看頭部?jī)?nèi)容設(shè)計(jì)的一些技巧。
1. 關(guān)于尺寸
對(duì)于網(wǎng)頁(yè)頭部圖片的大小是沒(méi)有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁(yè)設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁(yè)面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁(yè)或者企業(yè)客戶首頁(yè)，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺(jué)單屏展示頁(yè)。
如果某些網(wǎng)頁(yè)，例如落地頁(yè)頭部?jī)?nèi)容較長(zhǎng)的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁(yè)還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。
2. Logo展現(xiàn)
當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開(kāi)始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來(lái)不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁(yè)面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說(shuō)大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導(dǎo)航欄
吸頂導(dǎo)航，換句話說(shuō)就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁(yè)面時(shí)，導(dǎo)航區(qū)在頁(yè)面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無(wú)論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：
可根據(jù)頁(yè)面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁(yè)面看起來(lái)更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡(jiǎn)化導(dǎo)航欄樣式或高度，使用戶能找到但又不過(guò)于搶眼。
總之，固定導(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)景圖片；也可以選擇中性感覺(jué)的例如辦公場(chǎng)景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來(lái)突出前景內(nèi)容；
高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問(wèn)者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒(méi)錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來(lái)，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來(lái)實(shí)現(xiàn)這一點(diǎn)。
4. 視頻或動(dòng)畫
當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部?jī)?nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來(lái)吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁(yè)動(dòng)畫，撥云見(jiàn)日的效果加上中式剪紙風(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ù)雜面積越大占用流量越多，客戶打開(kāi)延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同，設(shè)計(jì)一些交互性的動(dòng)畫，去提升客戶使用感受，盡量不影響網(wǎng)頁(yè)打開(kāi)速度。
5. 移動(dòng)端頭部設(shè)計(jì)
網(wǎng)頁(yè)頭部不可能只顯示PC端的網(wǎng)頁(yè)上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁(yè)上。因此，在近年的設(shè)計(jì)中，網(wǎng)頁(yè)必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備，這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。
移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì)，即使在PC中，也有一些細(xì)節(jié)看起來(lái)像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。
移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式，很多時(shí)候需要設(shè)計(jì)師在一開(kāi)始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁(yè)面中展開(kāi)顯示的內(nèi)容，在移動(dòng)端會(huì)向下層延伸，首層界面成為一個(gè)內(nèi)容聚合頁(yè)。
網(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
很多人很喜歡國(guó)外的極簡(jiǎn)設(shè)計(jì)，先不看 Dribbble 上五花繚亂飛機(jī)稿，哪怕是博客編輯器 Wix.com 上的模板看著都很令人羨慕。為啥國(guó)外的網(wǎng)站都那么極簡(jiǎn)，國(guó)內(nèi)就學(xué)不來(lái)呢？
十年前，我以為這是因?yàn)閲?guó)民審美和設(shè)計(jì)師水平?jīng)]上來(lái)。現(xiàn)在，我發(fā)現(xiàn)這件事情沒(méi)那么簡(jiǎn)單?。〖傧胍幌?，你去下一個(gè)國(guó)外的極簡(jiǎn) UI 模板來(lái)，把文字改成中文，評(píng)審時(shí)能過(guò)稿嗎？
我估計(jì)十有八九過(guò)不了，產(chǎn)品經(jīng)理肯定有一大堆信息、功能和運(yùn)營(yíng)入口要塞進(jìn)去?？蛇@應(yīng)該怪萬(wàn)惡的資本主義，為了賺錢而不把審美自由當(dāng)回事嗎？
尼爾森（Jakob Nielsen）和 Yunnuo Cheng 在 2016 年做過(guò)一次研究試驗(yàn)，發(fā)現(xiàn)不光是中國(guó)的公司決策層，就連中國(guó)的用戶也未必就喜歡非常極簡(jiǎn)界面。
這次研究中，12 個(gè)中國(guó)人和在中國(guó)生活的外國(guó)人（應(yīng)該是歐美為主）被邀請(qǐng)來(lái)，在 8 個(gè)網(wǎng)站上完成簡(jiǎn)單的任務(wù)，并且一邊使用一邊說(shuō)出他們的想法和意圖（Think Aloud）。
P.S. 這 8 個(gè)網(wǎng)站中有簡(jiǎn)潔的也有復(fù)雜的，對(duì)中國(guó)人展示中文，對(duì)外國(guó)人展示英文，以此形成對(duì)比。
很多外國(guó)人在使用較為復(fù)雜的網(wǎng)站時(shí)（被翻譯成英文的中文網(wǎng)站），抱怨比較多。他們?cè)谥袊?guó)生活，對(duì)這種網(wǎng)站設(shè)計(jì)已經(jīng)見(jiàn)怪不怪了。
雖然也有人說(shuō)好話，稱贊信息展示明確直白，但也有人抱怨很難用的。至少大部分外國(guó)人對(duì)于復(fù)雜頁(yè)面的問(wèn)題比簡(jiǎn)潔頁(yè)面的問(wèn)題要多得多。
而相比他們，中國(guó)人普遍不覺(jué)得那些復(fù)雜頁(yè)面有什么特別的，因?yàn)槟切┖堋捌胀ā薄ⅰ罢！?，甚至“傳統(tǒng)”。
相反，抱怨簡(jiǎn)潔頁(yè)面難用的反倒更多，例如：
“單從設(shè)計(jì)角度來(lái)看，圖標(biāo)、圖片、布局都很好，符合很多人，至少年輕人都喜好。簡(jiǎn)單、干凈，既沒(méi)廣告，又沒(méi)有無(wú)用信息。但問(wèn)題是，它也沒(méi)什么有用信息——我在這些網(wǎng)站里看不到什么有用的東西。所有的功能介紹都只是在玩文字游戲，沒(méi)有實(shí)際含義，沒(méi)點(diǎn)真實(shí)內(nèi)容?！?
P.S. 以上是從英文資料的翻譯。
中文的信息傳遞效率就是比英文高，我們也早就習(xí)慣了這一點(diǎn)?！堵?lián)合國(guó)憲章》被翻譯成六種語(yǔ)言，其中就數(shù)中文最薄。
2017 年，Twitter 把原有 140 個(gè)單詞的限制放寬到了 280，卻唯獨(dú)沒(méi)有把這改版提供給中文、日文和韓文，理由就是語(yǔ)言密度足夠大了。
所以說(shuō)，中文用戶對(duì)單頁(yè)信息量要求更高，這就是很正常的事了。
同樣的一句話，雖然中文更簡(jiǎn)短，但是視覺(jué)密度更高啊。
會(huì)點(diǎn)排版的人都知道，視覺(jué)密度的節(jié)奏很重要，要全局考慮的。如果有一個(gè)地方的視覺(jué)密度比較高，那么整個(gè)頁(yè)面的視覺(jué)密度都要匹配上才能和諧。否則一下子太疏一下子太密，就會(huì)喪失統(tǒng)一感。中文的間隙和比劃之間的間隔都比較小，也注定了頁(yè)面的其它部分為了匹配上這個(gè)節(jié)奏，不能太疏。
這就是為什么，把一些英文板式直接拿來(lái)填充中文會(huì)很奇怪。難怪我去一些繁體中文網(wǎng)站時(shí)，會(huì)感覺(jué)比簡(jiǎn)體中文網(wǎng)站更復(fù)雜擁擠。其實(shí)咱們大陸地區(qū)由于使用簡(jiǎn)體字，視覺(jué)密度已經(jīng)比繁體字要松很多了。
說(shuō)到這里，不是要為一些又復(fù)雜又不好用的設(shè)計(jì)進(jìn)行辯解。只是說(shuō)，簡(jiǎn)潔并不代表好用。當(dāng)我們隨口說(shuō)出“少即是多”這種設(shè)計(jì)概念時(shí)，也不可忽視，凡事都有個(gè)度?？吹絿?guó)外那種極簡(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)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
20 世紀(jì)末到 21 世紀(jì)開(kāi)始，宣傳品牌與產(chǎn)品的陣地不再局限于印刷品，電視、電臺(tái)及現(xiàn)場(chǎng)活動(dòng)，而是出現(xiàn)了網(wǎng)站，網(wǎng)站可以鏈接更多陌生人，而且沒(méi)有時(shí)空限制。
1997 年的谷歌網(wǎng)站
美國(guó)最火的設(shè)計(jì)風(fēng)格只要有人將資料放到網(wǎng)上，遠(yuǎn)在日本的一名中學(xué)生都可以去學(xué)習(xí)了解，所以也打破了過(guò)去信息差的優(yōu)勢(shì)。本回我們要跟大家聊聊網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展，但在展開(kāi)內(nèi)容前，要搞清楚一個(gè)問(wèn)題，就是網(wǎng)頁(yè)設(shè)計(jì)屬于平面設(shè)計(jì)嗎？
國(guó)內(nèi)早在差不多 20 年前，建站公司就開(kāi)始獨(dú)立存在，所以這個(gè)問(wèn)題蠻有爭(zhēng)議，尤其是 UI 設(shè)計(jì)也很成熟之后，大家更愿意認(rèn)為此學(xué)科是獨(dú)立的。
中國(guó)建于 1994 年的第一個(gè)網(wǎng)頁(yè)，主要對(duì)外溝通
平面設(shè)計(jì)的定義不管怎么粉飾，簡(jiǎn)單而言就是：以某種目的，將文字、圖像、圖形安排在一起。網(wǎng)頁(yè)設(shè)計(jì)也是如此，唯一區(qū)別是網(wǎng)頁(yè)具有動(dòng)態(tài)，但這種動(dòng)態(tài)屬于若干個(gè)靜態(tài)設(shè)定的切換關(guān)系，其關(guān)鍵幀也是平面設(shè)計(jì)。
2003 年時(shí)候的淘寶網(wǎng)
我在國(guó)內(nèi)蠻早就從事網(wǎng)頁(yè)設(shè)計(jì)工作，早年甚至可以自己獨(dú)立完成網(wǎng)站，除了頁(yè)面設(shè)計(jì)，還包括套 ASP 程序（Active Server Pages 動(dòng)態(tài)服務(wù)器頁(yè)面），用 table 布局前端等，當(dāng)然這些技術(shù)如今早已過(guò)時(shí)。
12 年前史太濃獨(dú)立完成的網(wǎng)站
因此這段歷史我就是參與者之一，所以本回不僅是對(duì)搜集資料的剪裁分析，還會(huì)結(jié)合不少自身經(jīng)歷體驗(yàn)跟大家分享。
首先我們來(lái)簡(jiǎn)單回顧下互聯(lián)網(wǎng)的發(fā)展與網(wǎng)頁(yè)設(shè)計(jì)的演變。
互聯(lián)網(wǎng)發(fā)展到如今已經(jīng)像空氣一樣存在，斷網(wǎng)已經(jīng)如同缺氧那么嚴(yán)重，而互聯(lián)網(wǎng)的誕生最初跟兩件事情相關(guān)。
第一件大家也許比較熟悉，就是在 20 世紀(jì) 50 年代末美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署（the United States Department of Defense，Advanced ResearchProjects Agency，簡(jiǎn)稱 ARPA）成立了。
美國(guó)國(guó)防部高級(jí)研究項(xiàng)目總署 logo
其成立的根本原因是冷戰(zhàn)背景下，蘇聯(lián)不但先于美國(guó)在 1957 年將衛(wèi)星送上太空，而且世界第一枚多級(jí)遠(yuǎn)程彈道火箭發(fā)射也試驗(yàn)成功，因此蘇聯(lián)宣稱可以將核彈送往地球任何地區(qū)。這對(duì)美國(guó)而言實(shí)在太嚇人，所以 ARPA 是一個(gè)專門研究國(guó)防技術(shù)的“事業(yè)部”，聚合美國(guó)當(dāng)時(shí)最牛的幾百位科學(xué)家，研究如何將最先進(jìn)技術(shù)應(yīng)用到美國(guó)國(guó)防。
人類第一個(gè)衛(wèi)星由蘇聯(lián)在 1957 年發(fā)射
由于這些科學(xué)家當(dāng)時(shí)分散于全國(guó)各地，因?yàn)槿绱藚柡Φ目茖W(xué)家肯定本身有重要事務(wù)，而不是放著隨傳隨到，因此大伙無(wú)法專門聚在一起專門干這事，而是遠(yuǎn)程協(xié)作，所以就需要一個(gè)有效的遠(yuǎn)程溝通工具。
這個(gè)工具不能只局限于語(yǔ)言聲音，還要做到資源共享，更關(guān)鍵的是要高效安全，信息不可被盜取，當(dāng)時(shí)負(fù)責(zé)研究此事的人是麻省理工科學(xué)家約翰·利克利德(John Licklider)。
麻省理工科學(xué)家約翰·利克利德
此處省略一堆過(guò)程與專業(yè)技術(shù)術(shù)語(yǔ)，反正如此這般，利克利德因?yàn)?ARPA 組織這個(gè)溝通交接需求無(wú)意中發(fā)明出“國(guó)際互聯(lián)網(wǎng)網(wǎng)絡(luò)”（the World Wide Web）。
互聯(lián)網(wǎng)時(shí)代開(kāi)啟
事后證明，國(guó)不國(guó)防是一回事，這才是他們最偉大的發(fā)明。這種技術(shù)能做到資源共享與防止盜取的一個(gè)重要原因是可以將信息分解成“數(shù)據(jù)包”，將他們發(fā)送到目的地后可以重新組裝，也就是“分組路由”的雛形。大家了解到這個(gè)程度就可以了，再往深里說(shuō)意義不大，況且我也說(shuō)不清楚，
而時(shí)間很快去到 1987 年，這是第二件事情，這一年蘋果電腦公司向外界報(bào)道了一款可在網(wǎng)絡(luò)上尋找資料的軟件，名為“超級(jí)文件”（Hypertext）。
蘋果 1987 年的“超級(jí)文件”軟件
比如在電腦上打“設(shè)計(jì)史太濃”就可以將當(dāng)時(shí)整個(gè)網(wǎng)絡(luò)與此相關(guān)的文字內(nèi)容集中起來(lái)（當(dāng)時(shí)網(wǎng)絡(luò)上的內(nèi)容其實(shí)非常有限），等于是谷歌百度的前身了。
后來(lái)這個(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)界面
這樣一來(lái)就形成一個(gè)靈活且可互動(dòng)的內(nèi)容庫(kù)，大家可以根據(jù)需要選取想看的部分，有首頁(yè)、二級(jí)欄目、三級(jí)欄目、內(nèi)容詳情頁(yè)等。在此過(guò)程中還發(fā)明設(shè)計(jì)出一些后來(lái)常見(jiàn)的網(wǎng)站架構(gòu)邏輯，比如“平行文本”、“多層”“矩陣”“網(wǎng)絡(luò)系統(tǒng)”等，這里作很簡(jiǎn)單的介紹：
平行文本就是可以在看一篇文字時(shí)候可一邊看到它相關(guān)的摘要跟縮寫，這等于如今的鼠標(biāo)經(jīng)過(guò)效果。
網(wǎng)頁(yè)中的“鼠標(biāo)經(jīng)過(guò)”效果
多層就是看一個(gè)內(nèi)容的時(shí)候可以看到其它相關(guān)部分，等于如今網(wǎng)站中的“相關(guān)推薦”。
網(wǎng)頁(yè)中的“相關(guān)推薦”效果
矩陣就是將資料布局到一個(gè)網(wǎng)格中方便大家查詢，等于現(xiàn)在的產(chǎn)品系統(tǒng)，新聞系統(tǒng)一類。
網(wǎng)頁(yè)中的“產(chǎn)品系統(tǒng)”效果
網(wǎng)絡(luò)系統(tǒng)就是可以聯(lián)系外部信息，其實(shí)就等于友情鏈接一類了。
當(dāng)時(shí)間去到 1991 年，美國(guó)政府開(kāi)始投入資金將“互聯(lián)網(wǎng)”引入公共學(xué)校，而經(jīng)過(guò) 6 年，世界上就有 3000 萬(wàn)個(gè)網(wǎng)絡(luò)用戶，2000 年左右，美國(guó)就有三分之一的家庭實(shí)現(xiàn)了聯(lián)網(wǎng)。有流量就有商機(jī)，于是就有人將“互動(dòng)光盤”這樣的呈現(xiàn)方式搬到互聯(lián)網(wǎng)上變成網(wǎng)站，變成一種宣傳展示的渠道，不亦樂(lè)乎。
90 年代可口可樂(lè)的官網(wǎng)
所以最初的“互動(dòng)光盤”設(shè)計(jì)其實(shí)就等于第一代網(wǎng)頁(yè)設(shè)計(jì)。
1994 年時(shí)候，中國(guó)有個(gè)人因?yàn)楣珓?wù)出差去美國(guó)見(jiàn)證過(guò)互聯(lián)網(wǎng)的神奇，回國(guó)之后辭職，在 1998 年創(chuàng)立了一個(gè)如今市值 1.8 萬(wàn)億的公司—阿里巴巴，這人就是馬云。
阿里巴巴早期的網(wǎng)頁(yè)設(shè)計(jì)樣式
20 世紀(jì) 90 年代恰好是網(wǎng)站建設(shè)數(shù)量急劇暴增的時(shí)候，充滿了商機(jī)，大家可以理解為近幾年短視頻暴增一樣，根據(jù)回顧統(tǒng)計(jì)，在 1997 年時(shí)候僅僅一年美國(guó)本土就新增了 80 萬(wàn)個(gè)新網(wǎng)頁(yè)。
所以用“網(wǎng)頁(yè)”一詞是因?yàn)樽畛跣U多網(wǎng)站都是靜態(tài)，網(wǎng)站后臺(tái)是后來(lái)慢慢才發(fā)展形成。
1997 年時(shí)候的麥當(dāng)勞網(wǎng)站設(shè)計(jì)
但網(wǎng)頁(yè)設(shè)計(jì)最初的暴增還沒(méi)有直接為平面設(shè)計(jì)師創(chuàng)造崗位，因?yàn)榈谝淮W(wǎng)頁(yè)設(shè)計(jì)師其實(shí)大部分由程序員轉(zhuǎn)型而來(lái)。后來(lái)不斷發(fā)展競(jìng)爭(zhēng)升級(jí)才將程序、前端、網(wǎng)頁(yè)設(shè)計(jì)及推廣優(yōu)化這樣的崗位分來(lái)，以便有更專業(yè)的表現(xiàn)。
我在 2010 年時(shí)候開(kāi)始從事網(wǎng)頁(yè)設(shè)計(jì)，恰好是一個(gè)將網(wǎng)站建設(shè)不同崗位獨(dú)立出來(lái)的時(shí)代。當(dāng)時(shí)我所在公司中企動(dòng)力屬于國(guó)內(nèi)最大型建站公司，大部分老同事都曾經(jīng)是程序前端設(shè)計(jì)甚至推廣這樣一條龍為客戶提供服務(wù)。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
他們本質(zhì)上就是從一名開(kāi)發(fā)人員入行，所以他們會(huì)從實(shí)現(xiàn)效果端來(lái)規(guī)劃設(shè)計(jì)，跟后來(lái)網(wǎng)頁(yè)設(shè)計(jì)崗獨(dú)立后完全不同。蠻多網(wǎng)頁(yè)設(shè)計(jì)師其實(shí)根本不管程序?qū)崿F(xiàn)問(wèn)題，也因此產(chǎn)生出更多更好的視覺(jué)效果，反推程序開(kāi)發(fā)與前端制作的進(jìn)步。當(dāng)時(shí)在公司經(jīng)常見(jiàn)到的就是網(wǎng)頁(yè)設(shè)計(jì)跟前端或者開(kāi)發(fā)同事“干架”，爭(zhēng)論要點(diǎn)就是很多效果程序根本做不出來(lái)。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
這樣的事情其實(shí)一直在全世界發(fā)生，所以網(wǎng)站制作技術(shù)也是以飛一般的速度在發(fā)展。比如我剛剛學(xué)會(huì) Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起來(lái)，而程序開(kāi)發(fā)端則是 asp 到 asp·net 到 php 到 java 等不同開(kāi)發(fā)語(yǔ)言在不斷進(jìn)化。
史太濃在 2010 年前后的網(wǎng)頁(yè)設(shè)計(jì)
這樣的變化結(jié)果就是不斷優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)效果。
那時(shí)候我們往往在掌握一門自認(rèn)為很牛的必殺技后不到兩年就也許會(huì)過(guò)時(shí)，最典型例子莫過(guò)于 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)站，開(kāi)發(fā)制作費(fèi)用高達(dá) 300 多萬(wàn)。
但好景不長(zhǎng)，因?yàn)橹悄苁謾C(jī)的崛起與 4G 通信技術(shù)的發(fā)展，互聯(lián)網(wǎng)的主陣地慢慢往移動(dòng)端遷移，而智能手機(jī)中的瀏覽器是明確不支持 flash 組件的。所以很快 flash 就跌落神壇，而我們這一代網(wǎng)頁(yè)設(shè)計(jì)從業(yè)者可以說(shuō)見(jiàn)證了全過(guò)程。
全 Flash 網(wǎng)站
當(dāng)時(shí)身邊就有同事因?yàn)榫?flash 被挖去甲方企業(yè)開(kāi)發(fā)純 flash 的眼鏡商城，據(jù)說(shuō)后來(lái)項(xiàng)目就沒(méi)發(fā)展起來(lái)。
說(shuō)到商城，網(wǎng)頁(yè)設(shè)計(jì)還有一個(gè)重要的主題變化，就是從企業(yè)網(wǎng)站到平臺(tái)網(wǎng)站到電子商城再到手機(jī)網(wǎng)站，App 應(yīng)用，公眾號(hào)，小程序這樣的不斷切換。到了移動(dòng)端其實(shí)網(wǎng)頁(yè)設(shè)計(jì)就被“UI 設(shè)計(jì)”（User Interface 用戶界面）這樣更專業(yè)化的稱謂取代。
史太濃 2013 年前后的 UI 設(shè)計(jì)
因?yàn)楦锩缘钠聊挥|摸技術(shù)的誕生，很多網(wǎng)站本身就可以通過(guò)觸屏控制，所以從定義上來(lái)說(shuō)，UI 設(shè)計(jì)可以說(shuō)包含了網(wǎng)頁(yè)設(shè)計(jì)。
史太濃 2013 年前后的網(wǎng)頁(yè)設(shè)計(jì)
隨著移動(dòng)互聯(lián)網(wǎng)的不斷發(fā)展其實(shí)也拔高了 UI 設(shè)計(jì)門檻，因?yàn)橐紤]很多交互體驗(yàn)問(wèn)題與技術(shù)規(guī)格標(biāo)準(zhǔn)，有點(diǎn)像當(dāng)時(shí)烏爾姆學(xué)院做產(chǎn)品設(shè)計(jì)那一套，有很多理科屬性的知識(shí)融入進(jìn)來(lái)。
所以網(wǎng)頁(yè)設(shè)計(jì)經(jīng)過(guò)僅僅 30 年的發(fā)展，就走向細(xì)分領(lǐng)域的拆解，分裂出企業(yè)網(wǎng)站設(shè)計(jì)（偏向品牌與廣告）、電商設(shè)計(jì)（偏向營(yíng)銷）跟移動(dòng)端設(shè)計(jì)（偏向交互體驗(yàn)）。
史太濃 2018 年前后的電商網(wǎng)站設(shè)計(jì)
但不管如何，這個(gè)過(guò)程中平面設(shè)計(jì)的本質(zhì)屬性仍然沒(méi)變，只是要解決的問(wèn)題更多元化，更具體了。
根據(jù)歷史紀(jì)錄，美國(guó)的設(shè)計(jì)師杰西卡·哈芳德（JessicaHelfand）是較早以平面設(shè)計(jì)師身份參與到網(wǎng)頁(yè)設(shè)計(jì)中的，比如 90 年代她為美國(guó)“發(fā)現(xiàn)頻道”設(shè)計(jì)了網(wǎng)站。
美國(guó)“發(fā)現(xiàn)頻道”90 年代的網(wǎng)站
哈芳德生于 1960 年，目前還活躍于設(shè)計(jì)圈，她也許是最有資格感嘆互聯(lián)網(wǎng)設(shè)計(jì)形式劇烈變化的人之一。
杰西卡·哈芳德
本期內(nèi)容沒(méi)有談及太多具體人物及作品，因?yàn)樵谟邢奁锉酒趦?nèi)容已經(jīng)高度濃縮，更多是在給大家整理一個(gè)框架。
關(guān)于網(wǎng)頁(yè)設(shè)計(jì)發(fā)展的經(jīng)歷，也歡迎大家根據(jù)自己的體會(huì)參與到討論中，說(shuō)出你們的故事。
本期故事講到這里，感謝各位，下期再會(huì)！
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
移動(dòng)端網(wǎng)頁(yè)在今天雖然已經(jīng)變得越來(lái)越重要，但我們?cè)谌粘Ｊ褂弥幸廊粫?huì)遇到一些糟糕的頁(yè)面。近日，開(kāi)發(fā)者Umer Mansoor就總結(jié)了開(kāi)發(fā)移動(dòng)網(wǎng)頁(yè)時(shí)應(yīng)該避免的“七宗罪”。
在移動(dòng)端方寸地，有細(xì)節(jié)才能抓住用戶，可以參閱這《60個(gè)以小見(jiàn)大的設(shè)計(jì)細(xì)節(jié)！》，保證會(huì)學(xué)到很多。還有，記得不要犯《ANDROID應(yīng)用中十大常見(jiàn)UX錯(cuò)誤》
眾所周知網(wǎng)頁(yè)加載速度是網(wǎng)站性能的一項(xiàng)重要衡量指標(biāo)，畢竟很多時(shí)候用戶并不總是在WiFi狀態(tài)下瀏覽網(wǎng)頁(yè)，所以加載緩慢無(wú)疑是移動(dòng)頁(yè)面七宗罪之首。移動(dòng)網(wǎng)頁(yè)在設(shè)計(jì)時(shí)應(yīng)該避免集成過(guò)多高分辨率的圖片以及累贅的腳本文件。
當(dāng)網(wǎng)頁(yè)映入眼前，凌亂的文字排版當(dāng)然也是訪客難以忍受的。就像人們?cè)诂F(xiàn)實(shí)生活中傾向于和思路清晰的人交流一樣，當(dāng)用戶和網(wǎng)頁(yè)“交流”時(shí)也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動(dòng)網(wǎng)頁(yè)應(yīng)該避免的設(shè)計(jì)誤區(qū)之一。比如Eurosmartz的移動(dòng)版完全不像是為移動(dòng)設(shè)備設(shè)計(jì)的網(wǎng)頁(yè)。
隨著移動(dòng)設(shè)備性能的提升，很多移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)者傾向于在移動(dòng)端堆疊更多的內(nèi)容，這時(shí)導(dǎo)航功能就變得必不可少了。可諸多移動(dòng)頁(yè)面在設(shè)計(jì)導(dǎo)航功能時(shí)又沒(méi)有足夠重視其可操控性，比如按鈕太過(guò)緊密、鏈接間距過(guò)小、菜單過(guò)于隱蔽等等。各種社交網(wǎng)站的點(diǎn)贊功能尤其容易在滑動(dòng)網(wǎng)頁(yè)時(shí)誤點(diǎn)擊。蹩腳的導(dǎo)航無(wú)疑嚴(yán)重影響了用戶和網(wǎng)頁(yè)“互動(dòng)”的過(guò)程，以至于有些用戶要“抱怨”自己手指太肥。
某些時(shí)候我們可能會(huì)遇到一些桌面端和移動(dòng)端頁(yè)面風(fēng)格差異巨大的站點(diǎn)，比如Toybox。一些對(duì)此站點(diǎn)不熟悉的用戶在從Toybox的桌面端跳轉(zhuǎn)到移動(dòng)端時(shí)，也許很難意識(shí)到這是同一個(gè)網(wǎng)站的兩個(gè)不同版本。雖然Toybox桌面端的動(dòng)態(tài)效果挺好，但這種會(huì)給用戶造成極大困惑的設(shè)計(jì)明顯難以得到用戶的喜愛(ài)。
網(wǎng)頁(yè)彈窗在桌面端已經(jīng)令用戶厭煩不已，可不幸的是一些移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)者還是把其帶到了移動(dòng)頁(yè)面上。毫無(wú)疑問(wèn)由于移動(dòng)設(shè)備屏幕尺寸的限制在移動(dòng)端彈窗明顯會(huì)有更好的傳播效果，但無(wú)疑也會(huì)遭受到用戶更多的厭惡。
當(dāng)用戶使用iPad訪問(wèn)某一個(gè)網(wǎng)站時(shí)將其自動(dòng)重定向到適配iPad的版本，這聽(tīng)上去的確是一個(gè)好想法，可在實(shí)際操作中一樣會(huì)遇到問(wèn)題。比如當(dāng)一個(gè)網(wǎng)站的移動(dòng)版由于以上的種種問(wèn)題讓用戶感到難以接受而想切換回桌面版時(shí)，自動(dòng)重定向基本上讓用戶陷入了死循環(huán)。此外由于重定向而導(dǎo)致瀏覽器無(wú)法打開(kāi)網(wǎng)頁(yè)的現(xiàn)象也時(shí)常出現(xiàn)。所以在使用自動(dòng)重定向功能時(shí)應(yīng)該三思而行。
作為用戶當(dāng)然可以理解網(wǎng)頁(yè)開(kāi)發(fā)者在頁(yè)面上設(shè)置一些廣告，可橫幅形式的廣告無(wú)疑應(yīng)該被歸為“七宗罪”之一。從互聯(lián)網(wǎng)的發(fā)展歷程來(lái)看，橫幅廣告的思維好像還停留在1999年，可現(xiàn)在已經(jīng)是2013年末尾了。
總結(jié)看來(lái)，Umer Mansoor列舉了頁(yè)面加載緩慢、排版凌亂、導(dǎo)航功能不易使用、桌面端和移動(dòng)端頁(yè)面風(fēng)格差異巨大、彈窗、自動(dòng)重定向、橫幅廣告共七種讓移動(dòng)頁(yè)面體驗(yàn)糟糕的“罪惡”。如果自己設(shè)計(jì)的頁(yè)面中包含這其中的某些項(xiàng)，也許是時(shí)候考慮做一些改進(jìn)了。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
提到網(wǎng)頁(yè)設(shè)計(jì)，最先想到的是當(dāng)今主流的韓國(guó)設(shè)計(jì)和扁平化設(shè)計(jì)，當(dāng)然個(gè)性化排版、視頻代替文本、全屏大視野、滾動(dòng)視差、多平臺(tái)全適應(yīng)等設(shè)計(jì)形式已經(jīng)進(jìn)入了我們的視野。西方簡(jiǎn)單、功能性的美學(xué)精神”少即是多”這一設(shè)計(jì)理念攻占了我們的大腦，很多時(shí)候，在開(kāi)始做設(shè)計(jì)之前腦子里會(huì)來(lái)回浮現(xiàn)這些風(fēng)格的設(shè)計(jì)。那么，怎樣在主流設(shè)計(jì)方式中做出有自己特色的網(wǎng)站呢？我們從以下幾點(diǎn)介紹在大環(huán)境下提升網(wǎng)站設(shè)計(jì)形式的方法。
那么，怎樣在主流設(shè)計(jì)方式中作出自己的特色呢？我們從以下幾點(diǎn)介紹些提升網(wǎng)站設(shè)計(jì)形式的方法：
在眾多的設(shè)計(jì)師追逐主流風(fēng)格的同時(shí)，民族文化感覺(jué)的設(shè)計(jì)越來(lái)越少，不光在國(guó)內(nèi)，在世界各地都出現(xiàn)了這樣的情況。當(dāng)然不可否認(rèn)還有很多設(shè)計(jì)師在為民族設(shè)計(jì)而努力。下面這幾個(gè)站點(diǎn)雖然只有簡(jiǎn)單的設(shè)計(jì)和動(dòng)態(tài)效果，但是卻有一種非常淳樸的民族風(fēng)格，這也是最吸引人的地方，每個(gè)細(xì)節(jié)都流露出民族的特點(diǎn)和氣氛。不是只有文化性質(zhì)的網(wǎng)站才能賦予文化設(shè)計(jì)風(fēng)格，在商業(yè)產(chǎn)品類型的設(shè)計(jì)推廣中同樣適用。
日本眼藥水網(wǎng)站，將現(xiàn)代工業(yè)社會(huì)的產(chǎn)物與傳統(tǒng)鬼神文化中的五種妖怪以卷軸、插畫傳統(tǒng)形式展示，與漫天遍地的明星代言廣告形成對(duì)比，同樣是眼干、眼澀、眼疲勞，同樣是以辦公室、上班族為消費(fèi)群，文化創(chuàng)意上的突破使人眼前一亮。
(小編按：那個(gè)妹子是我的女神橫山美雪，嗎？)和風(fēng)服裝店，日本特色的風(fēng)鈴、簡(jiǎn)約的插畫，”和風(fēng)”，大和民族追求與自然的和諧之美，從這個(gè)服裝網(wǎng)站上我們可以看到日本設(shè)計(jì)文化體現(xiàn)了對(duì)自然的尊重，反映了樸素美學(xué)的內(nèi)斂性格。
緬甸傳統(tǒng)舞蹈音樂(lè)合奏網(wǎng)站，緬甸古代戲劇舞蹈，是從緬甸傀儡戲、古典戲劇及阿迎舞等古典藝術(shù)中產(chǎn)生的?？軕蛑械囊恍┕?jié)目和各種傀儡角色的不同的舞蹈動(dòng)作被大量移植到現(xiàn)代緬甸舞中?？芪柚小笨懿健薄ⅰ笨芘捞钡瘸蔀楝F(xiàn)代緬甸舞的基本動(dòng)作，是文化多樣性的輝煌繼承。黑白圖片和大面積留白的海報(bào)設(shè)計(jì)形式，突出舞蹈者主體，用在網(wǎng)站上更顯神秘。
http://www.itwillbeastounding.com/
俄羅斯莫斯科大劇院是莫斯科的地標(biāo)性建筑之一，是莫斯科有名的芭蕾舞與歌劇劇院；是俄羅斯歷史最悠久的劇院，享譽(yù)天下，是世界上最著名的劇院之一。它不僅繼承了歐洲芭蕾的歷史傳統(tǒng)，更重要的是，在俄羅斯豐富的民族音樂(lè)與舞蹈的沃土上，建立和發(fā)展了自己的芭蕾體系。將沙俄古典風(fēng)格融匯于設(shè)計(jì)版塊中，同樣大量留白處理給了圖片展示更多的空間。
大面積整站或局部性使用高清圖片，在之前設(shè)計(jì)分享中我們見(jiàn)到了很多案例，這里介紹幾個(gè)日本以圖片展示為主的網(wǎng)站，精致的圖片不需要過(guò)多的裝飾。
坂本龍一是日本當(dāng)代最讓人尊崇的音樂(lè)家之一，音樂(lè)領(lǐng)域涉獵甚廣，在先鋒電子樂(lè)領(lǐng)域擁有特殊地位。代表作有《Merry Christmas Mr. Lawrence》《末代皇帝》《遮蔽的天空》《桃太郎》《高跟鞋》等，為1992年巴塞羅那奧運(yùn)會(huì)開(kāi)幕式譜曲并擔(dān)任指揮……坂本龍一成為”大眾明星”的原因，一方面在于他個(gè)人對(duì)于電子、搖滾、爵士等多重音樂(lè)風(fēng)格極具靈感的把握；另一方面則在于他能在商業(yè)、藝術(shù)和實(shí)驗(yàn)之間找到平衡點(diǎn)，作出既有實(shí)驗(yàn)意義又有動(dòng)聽(tīng)旋律的作品。
http://moonlinx.jp/special_issue/003/
日本設(shè)計(jì)強(qiáng)調(diào)材料的內(nèi)在之美，注重與大自然的和諧，珍惜自然材質(zhì)，這與日本自然資源相對(duì)稀缺有很大的關(guān)系。日式風(fēng)格中，回歸自然是最大的特色，推崇貼近自然、強(qiáng)調(diào)自然主義，讓使用者有置身自然的感覺(jué)。用產(chǎn)品的工藝制作圖片作為網(wǎng)站的主體和背景，拉近了觀者與產(chǎn)品的距離。
http://www.ishiyamasenko.co.jp/
傳統(tǒng)工藝美妝店鋪，單從cover引導(dǎo)頁(yè)的圖片就能看出該店鋪的賣點(diǎn)。特色產(chǎn)品圖加上柔美的動(dòng)態(tài)散花效果，為網(wǎng)站加分，導(dǎo)航中加入商城外鏈可直接在線購(gòu)物，利于用戶體驗(yàn)。
日本聯(lián)合新聞社，社內(nèi)的場(chǎng)景圖片很好的展示要表達(dá)的主旨。
街區(qū)是一個(gè)城市的重要標(biāo)志性特色，將這樣雜亂無(wú)章的舊街道作為網(wǎng)站通欄頭圖，配合簡(jiǎn)介的形式設(shè)計(jì)，也能很出彩。
美寶蓮日本網(wǎng)站，將實(shí)體店作為網(wǎng)站背景，搭建成實(shí)景的巨幅海報(bào)展板，這種形式是否比存粹的明星代言更接地氣些？！
對(duì)比下面兩個(gè)日韓服飾類網(wǎng)站，可以看出日本網(wǎng)站在圖片選擇上更注重產(chǎn)品本身，極具質(zhì)感和張力的圖片真實(shí)樸素，力求展示產(chǎn)品與人的關(guān)系。而韓國(guó)則更注重整體的氛圍的搭配，通過(guò)環(huán)境的營(yíng)造來(lái)提升產(chǎn)品的品味和檔次，產(chǎn)品只是搭建系統(tǒng)中的一部分。
圖素質(zhì)量低是我們?cè)谠O(shè)計(jì)過(guò)程中經(jīng)常遇到的情況，我們通常用到最多的方法莫過(guò)于高斯模糊、柔光、濾色、添加紋理質(zhì)感，將圖片處理成做舊、仿古、年代感、單色……又會(huì)是什么效果呢？！
箔工藝，金銀箔具有很好的延展性，將金銀打展成薄膜狀，與絹結(jié)合，應(yīng)用于古代服飾中。此文化再京都有四百余年的歷史，現(xiàn)在主要用于文物修復(fù)。取箔工藝品的一個(gè)局部，重新組合作為整張背景，貼片處理的文字與背景的融合更顯古代文化的精妙。
http://www.hiroto-rakusho.com/
人物素材粗糙的情況下，采用水彩的濾鏡效果，背景加入點(diǎn)狀網(wǎng)格，極具形勢(shì)感的箭頭做引導(dǎo)，個(gè)性十足。
全日本劍道聯(lián)合會(huì)，網(wǎng)站采用時(shí)間軸展示的形式，從1950－2000年每一期獲勝者的照片和信息，可以看出由于70年代以前都是黑白照片且像素低，和近期的彩色照片反差較大，所以網(wǎng)站設(shè)計(jì)成了古樸做舊的年代感風(fēng)格，加入很多早期照片中的截圖作為插畫元素，確保了風(fēng)格統(tǒng)一。
http://www.kendo.or.jp/champ/#/about
Daum是韓國(guó)最大的門戶網(wǎng)站之一，以郵件和社區(qū)產(chǎn)品為核心，是韓國(guó)第一個(gè)電子郵件服務(wù)網(wǎng)站Hanmail的前身。牛仔藍(lán)單色照片處理更像電影和動(dòng)漫場(chǎng)景。
也有整體黑白加入局部彩色色的案例，將復(fù)雜圖片簡(jiǎn)化處理，對(duì)于簡(jiǎn)潔的頁(yè)面設(shè)計(jì)來(lái)說(shuō)，這是個(gè)不錯(cuò)的方法。每個(gè)版塊都是黑白照片做背景，文字做JS動(dòng)態(tài)移入效果，在圖片的某個(gè)元素上加入VI主體顏色，故事感很強(qiáng)。
手繪、矢量圖形設(shè)計(jì)的圖形場(chǎng)景環(huán)境，用在食品、旅游、地圖、嬰幼兒等方向的設(shè)計(jì)上更容易拉近消費(fèi)者，給人放松愉悅的心情。相比圖文混排更貼近生活。
狗糧推廣網(wǎng)站，將網(wǎng)站設(shè)計(jì)成寵物樂(lè)園，各個(gè)品種的狗狗們都有自己的一段視頻，內(nèi)容是狗狗們對(duì)幾種產(chǎn)品的喜好對(duì)比。
http://www.solvida.jp/solpa/#/MainPage/001
企劃創(chuàng)意公司，技術(shù)上只是一個(gè)簡(jiǎn)單的FLASH站，但空間跨越性思維設(shè)計(jì)卻給這個(gè)網(wǎng)站帶來(lái)了不凡的效果。由局部的空間延伸出各種異空間的交匯，加入互動(dòng)效果而引發(fā)的更多驚喜也進(jìn)一步提升了用戶參與度。
用3D拼圖建造起一個(gè)小型城市，4個(gè)建筑代表網(wǎng)站要展示的4個(gè)心理學(xué)的具體分類，建筑物夸張的擬人化動(dòng)作實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。
http://www.soc.nara-u.ac.jp/kokoro/
日本兒童專用雞蛋，此網(wǎng)站將所有產(chǎn)品相關(guān)內(nèi)容裝進(jìn)雞蛋中，食用后產(chǎn)生的剩余物可大變身繼續(xù)用于其它物品的生產(chǎn)，循環(huán)利用避免環(huán)境污染，所以在首頁(yè)展示上才會(huì)有類似瀑布流的大量周邊產(chǎn)品展示。網(wǎng)站首頁(yè)是自動(dòng)向下播放展示的瀑布流效果，hover及跳轉(zhuǎn)都伴隨非?？蓯?ài)的音樂(lè)和動(dòng)態(tài)，恰當(dāng)音樂(lè)的播放和觸碰hover的小驚喜也會(huì)給網(wǎng)站增添色彩。
日本山形放送局的地區(qū)地形圖，大家都看過(guò)現(xiàn)實(shí)版的景點(diǎn)手繪地圖，該網(wǎng)站也用了這種形式。比較有意思的是他的功能非常強(qiáng)大，是一個(gè)可放大縮小的真實(shí)版地圖，沒(méi)有跳轉(zhuǎn)，完整的手繪google地形圖。以小青蛙作為代言人對(duì)每個(gè)景區(qū)的優(yōu)勢(shì)作手繪圖形注解，以當(dāng)前彈出的形式展示該地的歷史、自然、觀光、社會(huì)、祭祀、美食、傳統(tǒng)等信息的詳細(xì)圖文、視頻解析。
http://www.nhk.or.jp/yamagata/mitekero/
九州熊本天草村,用動(dòng)態(tài)圖形化完整的對(duì)天草村進(jìn)行了設(shè)計(jì)演繹，重要景點(diǎn)默認(rèn)做了動(dòng)態(tài)處理，跳轉(zhuǎn)后都是另一個(gè)完整的實(shí)景矢量圖。對(duì)景點(diǎn)中的標(biāo)志性小建筑做了頁(yè)面彈出實(shí)景詳細(xì)講解。
這種形式在新加坡兒童樂(lè)園的設(shè)計(jì)中也同樣得到了使用。
設(shè)計(jì)風(fēng)格也是體現(xiàn)一個(gè)國(guó)家文化的重要方式，嚴(yán)寒漫長(zhǎng)的冬季成為俄羅斯的標(biāo)志，在頁(yè)面上打造一個(gè)同色系的冰雪世界，反而使彩色的主體信息更加突出。
一個(gè)優(yōu)秀的網(wǎng)站它的交互性也非常重要，擁有好的交互性可以讓瀏覽者有著更高的參與感，并且也能增大網(wǎng)站自身傳播效果，還可以提高用戶對(duì)自己的網(wǎng)站的依賴性和忠誠(chéng)度。
Panasonic剃須刀產(chǎn)品JS展示站，設(shè)計(jì)形式與松下電子實(shí)現(xiàn)”星羅棋布的網(wǎng)絡(luò)社會(huì)”和”與地球環(huán)境共存”的理想呼應(yīng)，整站的背景都是由動(dòng)線點(diǎn)組成的動(dòng)態(tài)圖形面拼合而成，圖片和文字的展示停留在這星羅棋布的空間組合中。此時(shí)網(wǎng)站要表達(dá)的不僅是展示產(chǎn)品，還有松下文化。
http://panasonic.jp/shaver/lamdash/dna/index.html
東京交響樂(lè)團(tuán)，該網(wǎng)站對(duì)用戶的參與性做到了極致，從網(wǎng)站主內(nèi)容上沒(méi)有關(guān)于東京交響樂(lè)團(tuán)的圖片文字信息，用戶可以在頁(yè)面專屬音樂(lè)鍵盤提示的情況下，用獨(dú)創(chuàng)音樂(lè)的新穎形式創(chuàng)作屬于自己的個(gè)性音樂(lè)，并對(duì)音樂(lè)逐幀做了記錄，可以返回欣賞創(chuàng)作成果，并分享到各網(wǎng)站。
SPECIAL-T 綠茶網(wǎng)站，玩過(guò)網(wǎng)游的同學(xué)們都知道游戲中做任務(wù)有地圖尋路功能，該網(wǎng)站采用了這個(gè)原理，在大海中建立類似于西游記的龍宮，用戶在沒(méi)有任何導(dǎo)視的情況下，360度無(wú)死角在海洋里自由探尋，最終的成果便是在一段時(shí)間的遨游后到達(dá)網(wǎng)站的終點(diǎn)產(chǎn)品引導(dǎo)頁(yè)，闡釋special的感受。
http://ogreen.special-t.com/en/
如果你想要一種優(yōu)雅而直觀的產(chǎn)品展示方式，全屏視頻網(wǎng)站是一個(gè)不錯(cuò)的選擇。全屏視頻網(wǎng)站能一瞬間點(diǎn)燃人們的好奇心，當(dāng)然也可能馬上讓訪客失去興趣，這都取決于你是否能夠駕馭這類高大上的設(shè)計(jì)風(fēng)格。
日本福祉大學(xué)，校園內(nèi)外學(xué)生學(xué)習(xí)、活動(dòng)氛圍的場(chǎng)景視頻作為背景播放展示，視頻上一層則是手動(dòng)切換的內(nèi)容介紹字幕，一個(gè)大學(xué)的網(wǎng)站更像是一個(gè)微電影展示。
http://www.n-fukushi.ac.jp/lifestyle/
Mikihiko Kyobashi 海底攝影記錄展示站，整站視頻展示配上海洋真實(shí)的聲音。透過(guò)視頻看到的海洋不是一汪死水，陽(yáng)光穿透海面，碧海藍(lán)天，比靜態(tài)的照片更能展示生命的氣息。
bc服裝網(wǎng)站，暗色的動(dòng)態(tài)視頻做背景，與前層簡(jiǎn)單的圖文排版形成反差，圖片hover的3D立體效果令人耳目一新。
圖片與視頻的混排切換展示，拉伸后展開(kāi)整站播放效果。
http://getgoingtoday.org/beyond
日清食品，微距拍攝的視頻，用時(shí)間倒數(shù)計(jì)時(shí)的方式，記錄在這一碗日清方便面泡好的3分鐘內(nèi)，世界各國(guó)家不同膚色年齡的人群品嘗日清食品的狀態(tài)緩慢特寫，加入了用各國(guó)語(yǔ)言描述倒數(shù)計(jì)時(shí)的聲音，視頻中間穿插有和日清logo呼應(yīng)的裝飾語(yǔ)言，隱藏在頁(yè)面下方的時(shí)間軸可以找到每一分每一秒的畫面禎，時(shí)間可自行選擇切換到想要的那一幀。
以上五點(diǎn)都是當(dāng)下主流設(shè)計(jì)中另辟蹊徑找創(chuàng)意，簡(jiǎn)單五點(diǎn)很難將所有好的創(chuàng)意都涵蓋在內(nèi)，除此之外大家肯定也有更好更多的想法。網(wǎng)頁(yè)設(shè)計(jì)總是立足于瀏覽者的審美、文化，以及信息傳播的習(xí)慣、方式，還有網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)的進(jìn)步。對(duì)于絕大部份網(wǎng)站來(lái)說(shuō)，沒(méi)有強(qiáng)大的專業(yè)力量去研究用戶新的習(xí)慣和需求，也不可能開(kāi)發(fā)出新的技術(shù)功能，只能在一些大型的網(wǎng)站中窺見(jiàn)一些發(fā)展的趨勢(shì)，再?gòu)闹姓业阶陨砜山梃b的地方。這種借鑒如果成為普遍性，那我們也很難在互聯(lián)網(wǎng)的大潮中有自己的一席之地。網(wǎng)頁(yè)設(shè)計(jì)已逐漸往多元化方向發(fā)展，更好的創(chuàng)意、更新的想法都來(lái)源于我們真實(shí)的生活感受，想要我們的網(wǎng)站變得更強(qiáng)大、擁有更好的用戶體驗(yàn)，無(wú)可厚非，我們應(yīng)該做的是大膽、大步地去嘗試。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
編者按：周一無(wú)水文！這篇好文將給同學(xué)們科普何時(shí)能用單頁(yè)網(wǎng)站，設(shè)計(jì)時(shí)有哪些技巧，有哪些優(yōu)秀范例可以借鑒，以及文末推薦一大波專業(yè)的單頁(yè)網(wǎng)站資源，干貨份量絕對(duì)足，充電時(shí)間到 >>>
@十萬(wàn)個(gè)為什麼 ：?jiǎn)雾?yè)設(shè)計(jì)，是一項(xiàng)處理小型網(wǎng)站的絕佳技巧，甚至有些網(wǎng)站你可能認(rèn)為一張頁(yè)面搞不定，也同樣適用。從易于維護(hù)，到減少帶寬占用，使用單頁(yè)網(wǎng)站的好處不勝枚舉。
假如你應(yīng)對(duì)的是個(gè)小型網(wǎng)站，通常只有幾個(gè)頁(yè)面的那種，可以考慮使用單頁(yè)設(shè)計(jì)，看看它是否能簡(jiǎn)化項(xiàng)目，對(duì)用戶更加友好。繼續(xù)閱讀，你將了解它的益處，何時(shí)使用（或不該使用），還有一些你該遵循的絕佳慣例。
很顯然，單頁(yè)設(shè)計(jì)并非所有項(xiàng)目的理想選擇。但假如可能的話，有一大堆理由使用它。
直觀易用
默認(rèn)情況下，用戶要瀏覽單頁(yè)網(wǎng)站，只要知道如何滾動(dòng)就行。你也可以加入箭頭或其他瀏覽暗示，但除了少數(shù)例外，其實(shí)滾動(dòng)就足以讓用戶在各部分間穿行。
完全不用擔(dān)心用戶身陷多層導(dǎo)航中，無(wú)休止地尋找他們所要的東西。如果頁(yè)面上有多個(gè)部分，頁(yè)頭或其他導(dǎo)航鏈接通常很有幫助，不過(guò)即使沒(méi)有它們，網(wǎng)站仍然是可用的。
維護(hù)起來(lái)更快速、更簡(jiǎn)單
這點(diǎn)并非既成事實(shí)，編碼良好的單頁(yè)網(wǎng)站，或許編寫起來(lái)比多頁(yè)網(wǎng)站更快。設(shè)計(jì)過(guò)程有時(shí)可以花更少的時(shí)間，盡管這取決于單頁(yè)網(wǎng)站的復(fù)雜程度。
一旦你腦海中有基本的布局，單頁(yè)網(wǎng)站還能利用某些特定的設(shè)計(jì)約束來(lái)加快進(jìn)程。尤其較之于多頁(yè)網(wǎng)站而言，單頁(yè)網(wǎng)站各個(gè)部分要保持無(wú)縫銜接。如果你已經(jīng)明確哪些能做哪些不能，這類約束的確能加速頁(yè)面開(kāi)發(fā)。
維護(hù)也更簡(jiǎn)單。當(dāng)你只需要處理一個(gè)頁(yè)面，維護(hù)工作就大大簡(jiǎn)化了，只要網(wǎng)站本身編碼良好。
它迫使你進(jìn)行簡(jiǎn)化
這條構(gòu)筑了上面一點(diǎn)。當(dāng)你只有一個(gè)頁(yè)面要處理，你不得不把一切簡(jiǎn)化為它們最基本的形態(tài)。不再需要一頁(yè)頁(yè)毫無(wú)用處的市場(chǎng)宣傳。你必須直截了當(dāng)、開(kāi)門見(jiàn)山。
更具SEO潛力
高質(zhì)量的站內(nèi)鏈接，是網(wǎng)站在搜索引擎中的表現(xiàn)的重要組成部分。盡管搜索引擎并不是很多網(wǎng)站必須的最大流量源，它們?nèi)匀恢匾?
單頁(yè)網(wǎng)站的鏈接總是指向自己。搜索引擎抓取時(shí)，這可以增加網(wǎng)站的權(quán)重。
敘事的手法促使用戶有所行動(dòng)
單頁(yè)網(wǎng)站往往從敘事角度出發(fā)，這點(diǎn)多頁(yè)網(wǎng)站可不擅長(zhǎng)。這可以促進(jìn)轉(zhuǎn)換，激發(fā)用戶采取行動(dòng)。
人們習(xí)慣于聆聽(tīng)故事，不論在線上還是線下，所以這點(diǎn)有著顯而易見(jiàn)的用戶體驗(yàn)優(yōu)勢(shì)。我們兒時(shí)就開(kāi)始閱讀和聽(tīng)故事，于我們而言，這是自然而然的事情。
易于組織
再也不需要組織一列列數(shù)不清的頁(yè)面和子頁(yè)面了。無(wú)需多慮每個(gè)頁(yè)面是父級(jí)還是子級(jí)。也沒(méi)有龐雜的導(dǎo)航菜單和子菜單。所有都在一頁(yè)上。是要包含導(dǎo)航鏈接，還是讓用戶滾動(dòng)，這取決于你，就看是否有助于提升用戶體驗(yàn)。網(wǎng)站如果有多個(gè)頁(yè)面，是絕對(duì)不會(huì)這么考慮的。
減少帶寬占用
盡管不像從前，對(duì)服務(wù)器而言已經(jīng)不成問(wèn)題，不過(guò)想想近年來(lái)有多少用戶通過(guò)移動(dòng)設(shè)備訪問(wèn)你的網(wǎng)站。減少網(wǎng)站的帶寬占用，會(huì)贏得流量有限的用戶的感激。
消滅了移動(dòng)版網(wǎng)站
當(dāng)然，響應(yīng)式設(shè)計(jì)不只限于單頁(yè)網(wǎng)站。但即使采用了響應(yīng)式設(shè)計(jì)，網(wǎng)站越復(fù)雜，讓它適應(yīng)小屏幕還是愈發(fā)困難。單頁(yè)網(wǎng)站并不復(fù)雜，這是必然的。運(yùn)用響應(yīng)式設(shè)計(jì)總體來(lái)說(shuō)更容易。簡(jiǎn)化導(dǎo)航和類似改變，也更容易成就適用于小屏幕的設(shè)計(jì)。
視覺(jué)差滾動(dòng)可能是互聯(lián)網(wǎng)中發(fā)生過(guò)的最美妙的事情，也可能是個(gè)被濫用的噱頭，來(lái)蹂躪我們?yōu)g覽器，這取決于你怎么看。無(wú)論你站在哪一方，它似乎近期并不會(huì)消失。
就我而言，我希望有時(shí)間和地方來(lái)實(shí)現(xiàn)視覺(jué)差滾動(dòng)。這個(gè)效果對(duì)于某些單頁(yè)網(wǎng)站大有裨益，而對(duì)于另一些則是噱頭，甚至更糟：難以使用。關(guān)鍵是要明確一點(diǎn)，你使用視覺(jué)差滾動(dòng)真的能提升網(wǎng)站的易用性嗎，還是因?yàn)槟阌X(jué)得它看起來(lái)很酷？
如果要使用視覺(jué)差滾動(dòng)，還要考慮一件事，使用Javascript還是純CSS技術(shù)來(lái)實(shí)現(xiàn)。關(guān)于這兩個(gè)選擇，請(qǐng)參見(jiàn)資源部分了解更多信息。
雖然有單頁(yè)網(wǎng)站大有益處，但它們也不是完美的全尺寸適配方案。雖然很多時(shí)候單頁(yè)網(wǎng)站比多頁(yè)網(wǎng)站更合理，但也有很多時(shí)候不應(yīng)該使用單頁(yè)設(shè)計(jì)。
總之，假如你的網(wǎng)站只有少數(shù)頁(yè)面，單頁(yè)網(wǎng)站或許是最佳選擇。將一切濃縮在一個(gè)頁(yè)面上，能讓網(wǎng)站整體具有更現(xiàn)代的外觀，如果內(nèi)容精簡(jiǎn)，那么單頁(yè)網(wǎng)站可以讓它看起來(lái)更豐富。
單頁(yè)網(wǎng)站的另一個(gè)普遍案例，就是發(fā)布預(yù)告頁(yè)面。它們通常是單頁(yè)網(wǎng)站，帶有新聞郵件的注冊(cè)表單。多數(shù)情況下，發(fā)布預(yù)告期間面向大眾的信息很容易組織在一個(gè)頁(yè)面上，所以，設(shè)計(jì)這些頁(yè)面時(shí)優(yōu)先考慮這種風(fēng)格是很合理的。
產(chǎn)品單一的電商網(wǎng)站，也是單頁(yè)網(wǎng)站表現(xiàn)優(yōu)秀的領(lǐng)域。如果你只賣一種產(chǎn)品，無(wú)論它是實(shí)體或是虛擬的，何必勞煩使用多個(gè)頁(yè)面呢？一個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站才是更好的銷售工具。
可能你覺(jué)得更復(fù)雜的電商網(wǎng)站不適合用單頁(yè)網(wǎng)站，但它仍然可行。當(dāng)然，有十多種產(chǎn)品的網(wǎng)站中我會(huì)避免使用，不過(guò)單張頁(yè)面也足以輕易支撐一個(gè)簡(jiǎn)單的在線商店，通過(guò)彈出窗口來(lái)承載產(chǎn)品詳情和支付流程。
不該使用單頁(yè)網(wǎng)站的情況十分明確：龐大、復(fù)雜，或必須保有海量信息的網(wǎng)站不適合做成單頁(yè)網(wǎng)站。在這些情況下，使用相對(duì)傳統(tǒng)的網(wǎng)站結(jié)構(gòu)更加明智。
雖然有大量的單頁(yè)網(wǎng)站存在，但也有很多混合型網(wǎng)站。它們給人印象是個(gè)單頁(yè)網(wǎng)站，但通過(guò)ajax、彈出窗和類似技術(shù)，它們事實(shí)上包含了多頁(yè)內(nèi)容。
網(wǎng)站Dang & Blast就是這方面的絕佳案例。
如果無(wú)法讓所有東西徹底融入單個(gè)頁(yè)面，這會(huì)是和很好的解決方案。
說(shuō)到單頁(yè)網(wǎng)站，某些站點(diǎn)用了某種“取巧”的辦法。它們的主站是個(gè)單頁(yè)網(wǎng)站，但在其他域名下也有個(gè)博客（有時(shí)是Tumblr或托管在WordPress.com的網(wǎng)站）。這么做沒(méi)有問(wèn)題，它能突出主站的信息，也不用舍棄博客帶來(lái)的好處。
優(yōu)秀設(shè)計(jì)的多數(shù)準(zhǔn)則，在單頁(yè)網(wǎng)站中仍然適用，其實(shí)也適用于任何網(wǎng)站設(shè)計(jì)。還有一些額外的東西需要牢記，其中有些之前已經(jīng)提到了。
保持簡(jiǎn)單
設(shè)計(jì)如果對(duì)于你試圖表現(xiàn)的內(nèi)容而言過(guò)于復(fù)雜，對(duì)你和你的用戶都沒(méi)有任何好處。相反，要盡可能簡(jiǎn)化設(shè)計(jì)和內(nèi)容，還能表達(dá)出你要的信息。
導(dǎo)航鏈接還是有幫助的
正因?yàn)橛脩艨梢酝ㄟ^(guò)滾動(dòng)來(lái)瀏覽你的網(wǎng)站，但并不意味著這是最友好的方式。如果你的網(wǎng)站很長(zhǎng)，有很多部分，這點(diǎn)尤其正確。除非有特別好的理由，還是應(yīng)該加入直達(dá)特定部分的鏈接，來(lái)使你的網(wǎng)站更加友好。
分割內(nèi)容
分割內(nèi)容
單個(gè)頁(yè)面不代表一整個(gè)冗長(zhǎng)部分。實(shí)際上也不該如此。將內(nèi)容根據(jù)邏輯劃分為幾大塊，用戶才能更容易找到他們所需。
讓所有的背景都有所作為
單頁(yè)網(wǎng)站常常有大幅背景。當(dāng)然，有時(shí)候這些背景很樸素，或帶有平鋪紋理；不過(guò)也有單頁(yè)網(wǎng)站利用所有的空間來(lái)?yè)]灑創(chuàng)意。前面提到了，這也有助于劃分內(nèi)容。背景未必要是單一的圖片?？梢允且幌盗袌D片，如果這樣做與內(nèi)容更相符的話。
相關(guān)資源：
單頁(yè)網(wǎng)站的資源成百上千，還包括模版；我們這里重點(diǎn)關(guān)注表現(xiàn)突出的幾個(gè)。
PureCSSParallax Scrolling：Keith Clark的這篇文章闡釋了如何通過(guò)純CSS打造視覺(jué)差滾動(dòng)效果。如果你不想用JavaScript（或者不懂）的話，這是個(gè)很好的選擇。
Skrollr：“為剩下的人準(zhǔn)備的視覺(jué)差滾動(dòng)”。這是個(gè)獨(dú)一無(wú)二的庫(kù)，適用于移動(dòng)端和桌面。不需要jQuery，只有原生JavaScript。
Stellar.js：Stellar.js是另一個(gè)簡(jiǎn)單易用的視覺(jué)差滾動(dòng)庫(kù)。它提供了很多設(shè)置選項(xiàng)和iOS支持。
One Page Website Wireframes：如果你不確定如何構(gòu)建你的網(wǎng)站，這個(gè)單頁(yè)網(wǎng)站線框圖集是很好的出發(fā)點(diǎn)。免費(fèi)下載。這里（Graphicburger）還有第二集可供下載。
One Page Love：One Page Love是首屈一指的單頁(yè)網(wǎng)站集合，里面有超過(guò)5000個(gè)網(wǎng)站案例，并且一直在更新。他們還主打大量模版和其他資源。
Start Bootstrap：Start Bootstrap集成了海量的免費(fèi)單頁(yè)網(wǎng)站Bootstrap主題。主題適合機(jī)構(gòu)、自由職業(yè)者、作品集、著陸頁(yè)等等。
One Page Love Templates：除了豐富的網(wǎng)站集合，One Page Love也提供免費(fèi)和收費(fèi)的模版。
One Page Mania：One Page Mania提供獨(dú)特的網(wǎng)站和模版集合，供你下載或購(gòu)買。
對(duì)各種網(wǎng)站來(lái)說(shuō)，單頁(yè)設(shè)計(jì)都是非常棒的選擇。盡管它們不是小型網(wǎng)站的唯一設(shè)計(jì)方案，對(duì)很多項(xiàng)目而言它都是值得考慮的。思考使用單頁(yè)設(shè)計(jì)的理由，然后也思考不用的理由，再做決定。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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í)用的單頁(yè)網(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)頁(yè)設(shè)計(jì)發(fā)展史！
網(wǎng)站設(shè)計(jì)之七：騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：動(dòng)態(tài)篇
網(wǎng)站設(shè)計(jì)之八：為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)？
網(wǎng)站設(shè)計(jì)之九：高手出品！2020~2021年UI界面設(shè)計(jì)趨勢(shì)
網(wǎng)站設(shè)計(jì)之十：如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)？來(lái)看 58 設(shè)計(jì)師的總結(jié)！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com
