一：卡片
卡片式布局能夠讓網(wǎng)站以摘要形勢(shì)呈現(xiàn)大量內(nèi)容篓像，卡片式風(fēng)格在現(xiàn)在也是大行其道。
作為可點(diǎn)擊的信息容器：小尺寸的預(yù)覽足夠讓用戶找到需要的信息猖吴。每個(gè)網(wǎng)站的卡片風(fēng)格其實(shí)是不一樣的，大多數(shù)包含圖片和描述。
卡片式風(fēng)格和響應(yīng)式網(wǎng)站是絕配愚隧，由于每個(gè)卡片都是獨(dú)立的，他們無論放在哪個(gè)位置都能適應(yīng)屏幕锻全。對(duì)于內(nèi)容較多的網(wǎng)站狂塘，卡片有很多好處：
· 直觀 — 不需要說明信息；
· 響應(yīng)式設(shè)計(jì)便利性 — 每個(gè)獨(dú)立的卡片能夠很好適應(yīng)屏幕鳄厌；
· 易分享 — 便于分享特定內(nèi)容到社交媒體網(wǎng)站荞胡；
· 通用 — 適用于各種風(fēng)格的網(wǎng)站。
要點(diǎn)：
1. 整個(gè)卡片可點(diǎn)擊而不只是部分了嚎；
2. 每個(gè)卡片聚焦一個(gè)中心概念泪漂；
3. 選擇圖片時(shí)考慮小屏用戶的體驗(yàn)，需要為不同的設(shè)備剪裁歪泳；
4. 不需要太復(fù)雜萝勤，簡潔是卡片的靈魂，基礎(chǔ)的圖片加精簡描述即可呐伞。
二：網(wǎng)格
網(wǎng)格結(jié)構(gòu)能夠使瀏覽更加容易敌卓，卡片通常是放在網(wǎng)格中。網(wǎng)格在尺寸伶氢、空間和欄目數(shù)量都有可能變化趟径，YouTube 遵循了嚴(yán)格的網(wǎng)格系統(tǒng)，有些網(wǎng)站則故意避開這種直來直去的風(fēng)樣式鞍历，如 Huffington post：
要點(diǎn)：
1. 格外留意白色的間隙舵抹，空隙越大每個(gè)卡片內(nèi)容得到的關(guān)注就越多，但速度可能會(huì)越慢劣砍。
2. 一致性非常重要惧蛹，尤其是考慮到多屏適配問題。確保布局在每個(gè)響應(yīng)節(jié)點(diǎn)都能夠被識(shí)別。
3. 新手可以從基礎(chǔ)的 12 欄布局開始香嗓，推薦一個(gè)工具：960js迅腔。
三：雜志樣式
此類網(wǎng)站經(jīng)常需要更新大量內(nèi)容，雜志風(fēng)格有多變的欄目靠娱、卡片沧烈、和頭條打破單一的網(wǎng)格布局。屏幕的左側(cè)通常會(huì)排列一些卡片像云，而右側(cè)會(huì)有一些文本鏈接锌雀。
以 Buzzfeed 為例：第一欄是特定的內(nèi)容，圖片旁邊有詳細(xì)的描述迅诬；中間是即時(shí)的新聞腋逆，圖片下方帶有簡單描述；最后一欄是排行侈贷，排列的圖片并沒有描述惩歉。請(qǐng)注意他們的字體：通過文字的顏色和尺寸變化來創(chuàng)造視覺層級(jí)。
要點(diǎn)：
1. 和印刷雜志一樣俏蛮，這類風(fēng)格著重于圖片撑蚌。屏幕的中間通常會(huì)有一個(gè)主要的圖片來吸引用戶注意力，之后才會(huì)瀏覽更小的次級(jí)圖片搏屑；
2. 這種樣式通常會(huì)在一側(cè)放置水平/垂直菜單争涌。
四：無邊框樣式
這種樣式將極簡主義帶入另一個(gè)層級(jí)，去除了所以不必要的視覺元素睬棚。相較于傳統(tǒng)的區(qū)塊分割第煮，這種樣式依賴于視覺解幼、組合和常識(shí)來維系結(jié)構(gòu)抑党。
傳統(tǒng)上來說，網(wǎng)頁設(shè)計(jì)用線條和高度結(jié)構(gòu)化的布局來呈現(xiàn)信息撵摆。無邊框樣式讓內(nèi)容更加突出底靠，但是需要注意保持視覺層次感。Apple 網(wǎng)站拋去了所有邊框特铝，鏈接全部以文字形式代替暑中，用很清楚的視覺設(shè)計(jì)來表達(dá)內(nèi)容關(guān)系。
要點(diǎn)：
1. 排版對(duì)無邊框設(shè)計(jì)相當(dāng)重要鲫剿，尺寸鳄逾、字號(hào)、顏色都能傳遞信息灵莲。Apple 在標(biāo)題使用大文字雕凹，對(duì)二級(jí)描述用相對(duì)較小的文字，給鏈接的文字加上藍(lán)色；
2. 為防止用戶困惑枚抵，讓大部分元素可點(diǎn)擊线欲。如果用戶對(duì)某個(gè)元素感到困惑，他們大多數(shù)會(huì)去點(diǎn)擊測試是否可交互汽摹；
3. 內(nèi)容量很大的網(wǎng)站很難采取這種樣式李丰。
5. 分屏
分屏適用于給兩個(gè)同等重要的元素進(jìn)行排版，同時(shí)這兩個(gè)元素類型對(duì)立逼泣，用戶在開始的時(shí)候就要進(jìn)行選擇趴泌。
要點(diǎn)：
1. 分屏適用于強(qiáng)烈對(duì)比。用對(duì)立的特征將兩邊區(qū)分開來拉庶，如不同顏色踱讨、不同的文字尺寸、不同的圖片砍的；
2. 保留一個(gè)獨(dú)立的統(tǒng)一的導(dǎo)航菜單痹筛，最理想的是在最上方，適用于兩邊屏幕廓鞠；
3. 分屏樣式對(duì)內(nèi)容的擴(kuò)展不太友好帚稠，所以內(nèi)容較多的網(wǎng)站不建議使用。
6. F 模式
如果網(wǎng)站有很多內(nèi)容床佳，尤其是文字的話滋早，F(xiàn) 模式非常合適。
Nielsen Norman 小組的視覺追蹤研究揭露了用戶的內(nèi)容瀏覽模式非常像 F 或 E砌们。用戶會(huì)從右上角開始瀏覽杆麸，然后水平的瀏覽，之后轉(zhuǎn)向下一行浪感，直到找到感興趣的內(nèi)容昔头。
當(dāng)網(wǎng)站有很多內(nèi)容的時(shí)候，F(xiàn) 模型將其組織成水平的行影兽，上下并列揭斧。這位用戶的視覺移動(dòng)鋪好了道路，并且給力設(shè)計(jì)師更多的控制力峻堰。
要點(diǎn)：
1. 將重要的內(nèi)容放在左右兩邊讹开，這兩邊的終端是用戶開始和結(jié)束他們視覺搜索的地方。而短暫的停留也可了用戶思考的空隙捐名；
2. 在新段落的開始處放上引誘性的關(guān)鍵字旦万，此外在段落中高亮關(guān)鍵字；
3. 開始的兩行是最重要的镶蹋，如果用戶剛開始沒有找到想要的信息成艘，他們就會(huì)離開拇砰；
4. 在右邊欄展示相關(guān)的但沒有聯(lián)系的內(nèi)容，這塊區(qū)域可以被看到狰腌，但是存在于視覺瀏覽進(jìn)程之外除破；
七：Z 模式
和 F 模式一樣，Z 模式布局模仿用戶自然瀏覽方法琼腔。然而瑰枫，Z 模式更適用于內(nèi)容較少的網(wǎng)站。通過合理的放置視覺信息丹莲，Z 模式可以很好捕捉和引導(dǎo)用戶視覺重點(diǎn)光坝。
用戶從左上角開始，隨后視覺向中間移動(dòng)甥材，然后從底部左邊開始盯另。可以在中間放置一個(gè)圖片洲赵。
要點(diǎn)：
1. 強(qiáng)召喚行為放置在右邊：用戶在此處會(huì)暫停一下鸳惯，然后接著移動(dòng)；
2. 將最重要的召喚行為放置在右上角叠萍；
3. Z 模型在同一個(gè)頁面能夠不斷的重復(fù)芝发，以便于用戶尋找到瀏覽節(jié)奏；
八：對(duì)稱放射
雖然這種樣式很難使用苛谷，但是處理好了之后確是非常美觀的辅鲸。通常是中心點(diǎn)放很多鏈接，而中心點(diǎn)可以放公司 Logo 或公司名稱腹殿。
要點(diǎn)：
1. 這種樣式很少見独悴，所以處理得當(dāng)?shù)脑挄?huì)非常吸引用戶；
2. 將最重要的元素放置在中間锣尉；
3. 在中間點(diǎn)周圍放置鏈接的時(shí)候刻炒，不要將整個(gè)圓封閉起來。例如 Wikipedia 上下方都會(huì)留出空白悟耘，這樣會(huì)給與用戶創(chuàng)造視覺停留空間落蝙，減少要壓迫感织狐。
九：不對(duì)稱
不對(duì)稱能夠創(chuàng)造張力和活力 — 雖然并不適用于每個(gè)網(wǎng)站暂幼，但是如果你想要網(wǎng)站更加有活力可以考慮，并且能夠清晰展示重點(diǎn)移迫。
不對(duì)稱元素會(huì)讓眼球運(yùn)轉(zhuǎn)更加快速旺嬉，合理使用的話可以創(chuàng)造動(dòng)態(tài)空間。然而厨埋，這樣樣式很難用在實(shí)際中邪媳，它容易導(dǎo)致視覺層次錯(cuò)亂，扁平化處理又會(huì)比較難看。
要點(diǎn)：
1. 使用顏色來高亮視覺不對(duì)稱的效果雨效；
2. 為了創(chuàng)造不對(duì)稱但是組織有序的效果迅涮，在圖片的另一半放置一些文字；
3. 但有鋒利邊緣的物體能夠增加視覺重量徽龟，但是必須小心使用叮姑，因?yàn)闀?huì)立馬創(chuàng)造視覺不平衡。
