網(wǎng)頁設(shè)計軟件很多很多，設(shè)計的領(lǐng)域也非常廣泛，但是哪
些內(nèi)容要讓瀏覽者第一視覺看的到，哪些板塊信息是整個頁面的中心，哪些交互是要去引導(dǎo)客戶進行操
作，這些都是要通過視覺去表現(xiàn)出來，從而讓信息層次分明，視覺循序漸進，所以內(nèi)容層級的視覺呈現(xiàn)
比作設(shè)計的“硬件”也就合情合理了。

接下來，就從一些不同的應(yīng)用領(lǐng)域里去和大家總結(jié)重慶網(wǎng)頁設(shè)計內(nèi)容層級和層次的表現(xiàn)手法6措辭以及分析均
為個人觀點，如果有不合理的地方，請見諒。

交互類設(shè)計

A、利用色塊區(qū)分內(nèi)容層級

01. 藍色的按紐在整個紅色畫面，格外的顯眼。引導(dǎo)客戶進shop操作

02. 藍色大背雖，把支付寶的首頁內(nèi)容，分割成了2塊，藍色底的交互視覺更抓瀏覽者視野，也是基于
該處的交互頻繁被瀏覽者使用的原因。

03. 發(fā)表動態(tài)交互按紐，橙色塊設(shè)計。在導(dǎo)航欄里，對比其他操作，瀏覽者第一視覺就能看得到。

補充a.同為按鈕，cart則是線框按紐，在整個畫面中層級就沒那么重（寫這一點是想告訴大家，當(dāng)你不
想交互按鈕顯得太重的一種處理方法）。


B、懸浮固定引導(dǎo)性交互

01. 頁面整體調(diào)調(diào)為黑白色，把“在線咨詢”操作，懸浮固定在左下角。不隨頁面滾動而變化，引導(dǎo)瀏覽
者時時看得到，從而提高業(yè)務(wù)合作的意向率。案例里也存在利用色塊的方式，不過這里以動靜相對為
主。

02. 導(dǎo)航懸浮固定在頭部，一些聯(lián)系方式等操作懸浮固定在右邊。瀏覽者在瀏覽頁面的時候，時刻能找
到這些重要的入口。節(jié)省用戶尋找這些信息時間和精力。

03. 瀏覽商品詳情頁時，把“購買”，“加入購物車”等引導(dǎo)性操作內(nèi)容，懸浮固定在頁尾。方便瀏覽者在
查看商品的訊息時，輕松進行交互。從左到右，底色顏色加深，也意味著，“立刻購買”在畫面里的最

高層級。

04. 把“攝像直播”“拍個直播”等和直播產(chǎn)品吻合的引導(dǎo)性操作，獨立出來。并懸浮在畫面右下角，配以
圓形色塊背景，在畫面中非常醒目，從而引導(dǎo)客戶逬行點擊操作。


標(biāo)題和從屬內(nèi)容

A、關(guān)鍵字抽出做獨特效果

01. “傾我一世予你風(fēng)華”，作者把“傾我一世”單獨抽出來，改變字體類型，并做了漸變的質(zhì)地效果，拉
開與其他文案的層次，畫面飽滿0瀏覽者往往會被這樣帶有沖擊力的層級內(nèi)容，聚焦視野。

02. “戰(zhàn)斗還受空間的束縛”，作者把“戰(zhàn)斗”單獨抽出來。不僅呼應(yīng)了畫面的戰(zhàn)斗感，而且讓文案內(nèi)容層
級更加多樣、重點分明，中國風(fēng)筆觸沖擊力十足，是一個非常優(yōu)秀的作品

B、改變字體的大小、顏色、類型（把這三個歸納為一點，是因為往往并存使用)

01. 大的方向去看，“古攝影美人國畫寫真館”、“全球大牌美妝私人專屬妝容”、英文。通過字體大小以
及字體類型營造了三個從上到下的視覺層級。而“古攝影美人” “國畫寫真館”又通過不同顏色設(shè)計內(nèi)容
層次。在這里，不知道有多少剛?cè)胄械脑O(shè)計師們，知道為什么很多設(shè)計配了小字英文。說實話，其實看
饉的人很少，大部分設(shè)計師也都是翻譯工具翻譯來的。但是有了英文行，可以讓內(nèi)容更加豐滿，提高中
文內(nèi)容的視覺層級。當(dāng)你不用英文時，你可以用線條等輔助性元素去代替，也是可以做出層次效果的。

02. 同類型字體，不同大小、粗細，設(shè)計內(nèi)容層級。

03. 通過差異較大的不同的字體類型、大小設(shè)計內(nèi)容層級。

C:利用色塊區(qū)分內(nèi)容層級

01. 標(biāo)題”100% FRESCO”藍色字，白色底。正文“Os iogurtes...”白色字，藍色底。不同的色塊，讓
文案內(nèi)容更加清晰分明。和顏色較復(fù)雜的底部圖片，拉開層次。

02. “全球精選好物”、“新人專享福利，低至9.9元包郵”。利用色塊，使內(nèi)容區(qū)分開。瀏覽者讀取信息
更加分明，節(jié)奏感好。

03. “買遍全球”、“潮流酷玩”作為類別的索引。以不同色塊填充，和其對應(yīng)產(chǎn)品內(nèi)容拉幵層級，具有總

同一模塊里的內(nèi)容層級

A、用板塊大小占比來區(qū)分內(nèi)容層級

01. “U3 ￥1899”，在圖中占了二個單元格，其他產(chǎn)品則為一格。讓“U3 ￥1899”這個主打產(chǎn)品在板塊里
形成第一視覺。

02. “推薦”“每周新品”占第一視覺，“品類”占第二視覺，其他則占第三視覺。這個是不同的空間占比，
以及內(nèi)容里的圖片元素帶來的直觀視覺體驗。

B:提示性信息標(biāo)志改變列表內(nèi)容視覺優(yōu)先級

01. 官方的推薦以及角標(biāo)，在認知的基礎(chǔ)上，會讓該條信息，在列表內(nèi)容里層次更重。

02. 促銷性質(zhì)的角標(biāo)，會讓商品在列表里，更容易辨識、推薦。從而增大瀏覽者選擇的可能。

03. 同為熱門工具里面的圖標(biāo)選項，附帶標(biāo)簽提示的，會比沒有的，在視覺上很吸引眼球。

04. 有內(nèi)容更新提示標(biāo)志出現(xiàn)，會讓同模塊里的內(nèi)容分成二個層級。有提示標(biāo)志的會比沒有的視覺層次
更高。從而引導(dǎo)瀏覽者逬行對應(yīng)的操作。

C:內(nèi)容本身具備排序性質(zhì)的內(nèi)容層級

01. 將排行前三單獨抽取出來置于列表頭部的板塊里，并用金鋃銅的icon來做內(nèi)容的區(qū)分。4-6則從上
到下依次排列。從而凸出前三的互動大神的排序優(yōu)先。

02. 微信運動排序。將第一名的圖片設(shè)置為排行榜背景。屬最重層次。把當(dāng)前微信號主人信息，單獨置
頂，其他則從上到下依次排列，從而使瀏覽者關(guān)注的自身信息，非常的清晰，對比明顯。

D:單條列表中文本和圖片排版比重不同，視覺層次也不同

01. 單條列表里，圖片幾乎占了整個寬度，幾乎就是以圖片信息作為內(nèi)容信息的排版比重。在三圖中是
最重的方式。這種排版如果圖片質(zhì)雖不高，整體頁面質(zhì)雖影響非常大0

02. 平臺類的APP,以作品來做信息的承重。雖然還是圖片為主，文案為輔，但是相對圖1來說，圖2左
右的排版結(jié)構(gòu)，圖片所占比會少很多。

03. 以文案內(nèi)容為主導(dǎo)的排版，標(biāo)題和正文比重會比圖片高很多，圖片更多是一個列表間做為區(qū)分的元
素。這也符合APP本身的產(chǎn)品特性，

網(wǎng)頁設(shè)計各個模塊內(nèi)容間的層級

網(wǎng)頁類的各個模塊，呈現(xiàn)的方式有很多，但是總的一條準(zhǔn)則是不變的，即瀏覽者常規(guī)視覺焦點是從左到
右，從上到下的過度0第一屏的內(nèi)容，往往是整個頁面的核心0

上圖結(jié)構(gòu)，是網(wǎng)頁模塊布局最常見，也是目前最容易被人接受的一種方式0圍繞這樣的大布局