今天為大家深入分析UX中視覺層級的關(guān)鍵原則，探討如何使用視覺層級來改進產(chǎn)品并優(yōu)化用戶體驗。
自設(shè)計之初，我們已經(jīng)使用它來傳達重要的信息。設(shè)計中的每個元素都應(yīng)有助于改善用戶體驗，并清楚傳達該信息。視覺層級也是傳達信息。如何組織、排序內(nèi)容，讓接受者能夠盡可能輕易地理解信息。設(shè)計師可以利用視覺元素去區(qū)別信息的重要性，引導(dǎo)觀看者閱讀的順序或焦點。視覺層級結(jié)構(gòu)用于按設(shè)計者希望用戶查看它們的順序?qū)υO(shè)計元素進行排序。通過使用對比，比例，平衡等原則，幫助在正確的位置排布每個設(shè)計元素，并讓最重要的元素脫穎而出。
視覺層級結(jié)構(gòu)可以在信息架構(gòu)中發(fā)揮關(guān)鍵作用，可以幫助用戶更輕松地瀏覽產(chǎn)品，大大減少與產(chǎn)品互動所需的時間和精力。UX設(shè)計的目的是消除使用時的摩擦并提高產(chǎn)品的易用性，而關(guān)注視覺層級結(jié)構(gòu)是實現(xiàn)這一目標的關(guān)鍵方法。讓我們來分析其中的一些原則，看看它們?nèi)绾斡绊憙?nèi)容的排布。
大多數(shù)界面（例如網(wǎng)站和應(yīng)用程序）的設(shè)計都是二維平面的。通過運用透視，我們可以在元素中產(chǎn)生距離和分隔的錯覺，以幫助將焦點集中到設(shè)計中重要的區(qū)域。要讓用戶產(chǎn)生透視的錯覺，首先可以增加元素相對于周圍元素的大??；這將使這些元素看起來更接近用戶。將視差運動效果添加到元素中使它比周圍元素移動得快或慢，或在背景或前景上添加模糊也可以產(chǎn)生顯著效果。
從上面左側(cè)的圖中，能看出來所有元素看起來都是平坦的，沒有深度。由于文字和背景粘連在一起，造成文字的可讀性變差。而在右面的圖中，將模糊添加到背景圖像中，并為文字添加適當?shù)年幱?。這有助于為設(shè)計元素間增加一些距離，使信息更容易可視可讀。在看火人的游戲首頁中，多個圖像層被設(shè)置成以不同的速度滾動，來提供視差效果，從而使觀看者更好地理解游戲的深度內(nèi)容。
其實每個人在觀看內(nèi)容的時候，都會有一個潛意識的觀看模式。這種模式可能會因為用戶正在查看的內(nèi)容類型的不同而有所差異，但是可以說最受用戶歡迎的兩種瀏覽模式是Z型模式和F型模式。兩種瀏覽模式都可以根據(jù)要設(shè)計的內(nèi)容類型來達到獨特的目的。這些瀏覽模式將頁面的信息流動起來，幫助觀者獲得更好的體驗。Z型視覺動線的設(shè)計最適合于文字信息不繁重的頁面中。將內(nèi)容設(shè)計成以這種模式的排布將幫助讀者快速瀏覽每個元素，并清晰地知道每個元素的重要性。
在Apple的網(wǎng)站中，頁面頂部有多個Mac的選項，所以我們首先會進行水平瀏覽，然后沿對角線方向看到標語，最后以目標產(chǎn)品的詳細介紹作為結(jié)束。所有信息的布局都非常清晰明了，同時大多數(shù)人已經(jīng)下意識地被這種瀏覽模式吸引。
F型視覺動線更多地使用在諸如文章和博客之類的文字比較密集的頁面上。對于文章和資訊內(nèi)容繁雜的網(wǎng)站，簡單的F型布局可以有效地幫助讀者掃描圖像和標題。
以這種瀏覽模式進行設(shè)計布局時，盡管讀者可能會掃描前幾行的信息，但隨著他們快速向下移動視線時，他們通常只會瀏覽最吸引其注意力的地方。
通過使用參考線和網(wǎng)格來布局設(shè)計，可以使所有元素保持整潔和對齊，從而不會破壞觀者的瀏覽體驗。他們的注意力知道要跟蹤的位置，并且這些信息都是整齊的對齊和分組，所以每組元素都可以緊密關(guān)聯(lián)。諸如黃金分割率之類的公式試圖做到這一點；但是可以將重要元素從這些既定規(guī)則中分離出來，以增加其視覺層次。
在這個的示例中，網(wǎng)站為了保持整體界面的工整，使用網(wǎng)格的方式來排布信息，但是為了更加關(guān)注Mercedez的形象，圖片忽略了網(wǎng)格布局，從而創(chuàng)建了一種彈出效果。
正確的字體可以讓網(wǎng)站擁有自己的個性，并引起用戶對某些領(lǐng)域的關(guān)注。具有不同大小和粗細的字體也可以用于增加層級結(jié)構(gòu)，并使更重要的文本信息脫穎而出。大多數(shù)網(wǎng)站旨在利用不同大小的標題來強調(diào)與它們相關(guān)的內(nèi)容。優(yōu)良做法是將主標題用作頁面的最大和最重要的標題，并使用副標題、小標題等來標注不太重要的內(nèi)容。這也有助于讀者瀏覽文本頁面，以準確定位在他們感興趣的區(qū)域。
Slack的網(wǎng)站就是一個很好的例子，該網(wǎng)站使用恰當?shù)臉祟}為內(nèi)容賦予重要性。在標題部分，它們具有最大的主標題，其中包含介紹信息和號召性用語。橫幅下方有許多帶有較小標題的版塊，以介紹更多功能。
在頁面上對稱出現(xiàn)的元素可以幫助平衡設(shè)計，使信息保持簡單，有條理并易于遵循。Avioc利用其主頁上的對稱性將重點放在其主要優(yōu)勢上，同時在圖像的兩邊提供更豐富的文字摘要。焦點直接位于中心，可以輕松瀏覽頁面以查找信息，不會感到迷茫。
有時候除了標準的平衡，我們還可以在設(shè)計中打破平衡和對稱性來傳達某些信息的重要性，讓我們的設(shè)計布局顯得更加流暢和活潑。
調(diào)整大小是一項非?；镜陵P(guān)重要的原則，這樣可以使重點元素比其他元素更突出，有助于將觀眾的視線吸引到特定區(qū)域。通過增加重點元素的比例，可以吸引觀看者的注意力。但是在設(shè)計過程中，需要注意的是不要放大太多元素，以免降低屏幕上其他元素的重要性。
Simply Chocolate就是一個很好的示例，用來說明如何使用比例的變化來強調(diào)視覺層級。在這個頁面中，最先吸引我們視線的是放大的標題文字而不是底部的圖片，這些文字解釋了產(chǎn)品的全部含義。同時這樣的方式不會影響屏幕上其他的元素。
顏色可以與元素大小的調(diào)整一起使用，提高設(shè)計中關(guān)鍵信息的重要性。通常，明亮的顏色比無色或不飽和的顏色更能吸引觀眾的注意力。
同樣，具有較高對比度的顏色將顯得更重，更接近觀看者，從而賦予它們更多的重要性。在上面的示例中可以看到，較亮的顏色在較暗的背景下看起來更近，而在較亮的背景上則較遠。
無論信息在界面中怎樣排布，使用一種明亮的顏色作為焦點都可以幫助吸引注意力。在上面的網(wǎng)頁以及大多數(shù)網(wǎng)站的導(dǎo)航中，我們都會注意到按鈕上高對比度的顏色，這是最關(guān)鍵的操作暗示。通過為用戶帶來良好的操作導(dǎo)航提示，為他們提供更愉快的體驗并增加所需流量的轉(zhuǎn)化。記得互聯(lián)網(wǎng)還很新的時代，每個彈出窗口或標注都必須眨眨眼才能引起用戶的注意？這種做法確實引起了我們的注意，但是在此過程中，它犧牲了令人愉悅的體驗，并給觀者帶來煩躁的感覺，這對參與度沒有幫助。如今，我們可以更細微的方式使用這些相同的動效原理來引起注意或重視某些領(lǐng)域。以巧克力頁面為例，說明它們?nèi)绾谓Y(jié)合微妙的動作來吸引注意力并提供提示，促使用戶參與設(shè)計。
在滾動口味選擇中時，顏色會更改以匹配產(chǎn)品。當把鼠標懸停在包裝紙上時，它會打開一條縫隙，露出內(nèi)部的巧克力，給用戶的印象是可以將其打開以了解更多信息。
這里我們討論了許多不同的UX設(shè)計原則和視覺層級結(jié)構(gòu)的示例。它們現(xiàn)在可能都有意義，但是當需要將它們付諸實踐并找出一種在所有設(shè)計中平衡所有這些原理的方法時，有時候頁會更加令人困惑。視覺層級結(jié)構(gòu)用于幫助將重點放在設(shè)計的某些元素上，但是認為“最重要”的元素越多，完善設(shè)計的難度就越大。從簡單開始，專注于最重要的一件事，它可以幫助設(shè)計走向成功。原文:https://xd.adobe.com/ideas/process/information-architecture/visual-hierarchy-principles-examples/
作者：Caleb Kingston
我們致力于提供一個高質(zhì)量內(nèi)容的交流平臺。為落實國家互聯(lián)網(wǎng)信息辦公室“依法管網(wǎng)、依法辦網(wǎng)、依法上網(wǎng)”的要求，為完善跟帖評論自律管理，為了保護用戶創(chuàng)造的內(nèi)容、維護開放、真實、專業(yè)的平臺氛圍，我們團隊將依據(jù)本公約中的條款對注冊用戶和發(fā)布在本平臺的內(nèi)容進行管理。平臺鼓勵用戶創(chuàng)作、發(fā)布優(yōu)質(zhì)內(nèi)容，同時也將采取必要措施管理違法、侵權(quán)或有其他不良影響的網(wǎng)絡(luò)信息。
一、根據(jù)《網(wǎng)絡(luò)信息內(nèi)容生態(tài)治理規(guī)定》《中華人民共和國未成年人保護法》等法律法規(guī)，對以下違法、不良信息或存在危害的行為進行處理。
1. 違反法律法規(guī)的信息，主要表現(xiàn)為：
1)反對憲法所確定的基本原則；
2)危害國家安全，泄露國家秘密，顛覆國家政權(quán)，破壞國家統(tǒng)一，損害國家榮譽和利益；
3)侮辱、濫用英烈形象，歪曲、丑化、褻瀆、否定英雄烈士事跡和精神，以侮辱、誹謗或者其他方式侵害英雄烈士的姓名、肖像、名譽、榮譽；
4)宣揚恐怖主義、極端主義或者煽動實施恐怖活動、極端主義活動；
5)煽動民族仇恨、民族歧視，破壞民族團結(jié)；
6)破壞國家宗教政策，宣揚邪教和封建迷信；
7)散布謠言，擾亂社會秩序，破壞社會穩(wěn)定；
8)宣揚淫穢、色情、賭博、暴力、兇殺、恐怖或者教唆犯罪；
9)煽動非法集會、結(jié)社、游行、示威、聚眾擾亂社會秩序；
10)侮辱或者誹謗他人，侵害他人名譽、隱私和其他合法權(quán)益；
11)通過網(wǎng)絡(luò)以文字、圖片、音視頻等形式，對未成年人實施侮辱、誹謗、威脅或者惡意損害未成年人形象進行網(wǎng)絡(luò)欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法規(guī)禁止的其他內(nèi)容；
2. 不友善：不尊重用戶及其所貢獻內(nèi)容的信息或行為。主要表現(xiàn)為：
1)輕蔑：貶低、輕視他人及其勞動成果；
2)誹謗：捏造、散布虛假事實，損害他人名譽；
3)嘲諷：以比喻、夸張、侮辱性的手法對他人或其行為進行揭露或描述，以此來激怒他人；
4)挑釁：以不友好的方式激怒他人，意圖使對方對自己的言論作出回應(yīng)，蓄意制造事端；
5)羞辱：貶低他人的能力、行為、生理或身份特征，讓對方難堪；
6)謾罵：以不文明的語言對他人進行負面評價；
7)歧視：煽動人群歧視、地域歧視等，針對他人的民族、種族、宗教、性取向、性別、年齡、地域、生理特征等身份或者歸類的攻擊；
8)威脅：許諾以不良的后果來迫使他人服從自己的意志；
3. 發(fā)布垃圾廣告信息：以推廣曝光為目的，發(fā)布影響用戶體驗、擾亂本網(wǎng)站秩序的內(nèi)容，或進行相關(guān)行為。主要表現(xiàn)為：
1)多次發(fā)布包含售賣產(chǎn)品、提供服務(wù)、宣傳推廣內(nèi)容的垃圾廣告。包括但不限于以下幾種形式：
2)單個帳號多次發(fā)布包含垃圾廣告的內(nèi)容；
3)多個廣告帳號互相配合發(fā)布、傳播包含垃圾廣告的內(nèi)容；
4)多次發(fā)布包含欺騙性外鏈的內(nèi)容，如未注明的淘寶客鏈接、跳轉(zhuǎn)網(wǎng)站等，誘騙用戶點擊鏈接
5)發(fā)布大量包含推廣鏈接、產(chǎn)品、品牌等內(nèi)容獲取搜索引擎中的不正當曝光；
6)購買或出售帳號之間虛假地互動，發(fā)布干擾網(wǎng)站秩序的推廣內(nèi)容及相關(guān)交易。
7)發(fā)布包含欺騙性的惡意營銷內(nèi)容，如通過偽造經(jīng)歷、冒充他人等方式進行惡意營銷；
8)使用特殊符號、圖片等方式規(guī)避垃圾廣告內(nèi)容審核的廣告內(nèi)容。
4. 色情低俗信息，主要表現(xiàn)為：
1)包含自己或他人性經(jīng)驗的細節(jié)描述或露骨的感受描述；
2)涉及色情段子、兩性笑話的低俗內(nèi)容；
3)配圖、頭圖中包含庸俗或挑逗性圖片的內(nèi)容；
4)帶有性暗示、性挑逗等易使人產(chǎn)生性聯(lián)想；
5)展現(xiàn)血腥、驚悚、殘忍等致人身心不適；
6)炒作緋聞、丑聞、劣跡等；
7)宣揚低俗、庸俗、媚俗內(nèi)容。
5. 不實信息，主要表現(xiàn)為：
1)可能存在事實性錯誤或者造謠等內(nèi)容；
2)存在事實夸大、偽造虛假經(jīng)歷等誤導(dǎo)他人的內(nèi)容；
3)偽造身份、冒充他人，通過頭像、用戶名等個人信息暗示自己具有特定身份，或與特定機構(gòu)或個人存在關(guān)聯(lián)。
6. 傳播封建迷信，主要表現(xiàn)為：
1)找人算命、測字、占卜、解夢、化解厄運、使用迷信方式治??；
2)求推薦算命看相大師；
3)針對具體風(fēng)水等問題進行求助或咨詢；
4)問自己或他人的八字、六爻、星盤、手相、面相、五行缺失，包括通過占卜方法問婚姻、前程、運勢，東西寵物丟了能不能找回、取名改名等；
7. 文章標題黨，主要表現(xiàn)為：
1)以各種夸張、獵奇、不合常理的表現(xiàn)手法等行為來誘導(dǎo)用戶；
2)內(nèi)容與標題之間存在嚴重不實或者原意扭曲；
3)使用夸張標題，內(nèi)容與標題嚴重不符的。
8.「飯圈」亂象行為，主要表現(xiàn)為：
1)誘導(dǎo)未成年人應(yīng)援集資、高額消費、投票打榜
2)粉絲互撕謾罵、拉踩引戰(zhàn)、造謠攻擊、人肉搜索、侵犯隱私
3)鼓動「飯圈」粉絲攀比炫富、奢靡享樂等行為
4)以號召粉絲、雇用網(wǎng)絡(luò)水軍、「養(yǎng)號」形式刷量控評等行為
5)通過「蹭熱點」、制造話題等形式干擾輿論，影響傳播秩序
9. 其他危害行為或內(nèi)容，主要表現(xiàn)為：
1)可能引發(fā)未成年人模仿不安全行為和違反社會公德行為、誘導(dǎo)未成年人不良嗜好影響未成年人身心健康的；
2)不當評述自然災(zāi)害、重大事故等災(zāi)難的；
3)美化、粉飾侵略戰(zhàn)爭行為的；
4)法律、行政法規(guī)禁止，或可能對網(wǎng)絡(luò)生態(tài)造成不良影響的其他內(nèi)容。
二、違規(guī)處罰
本網(wǎng)站通過主動發(fā)現(xiàn)和接受用戶舉報兩種方式收集違規(guī)行為信息。所有有意的降低內(nèi)容質(zhì)量、傷害平臺氛圍及欺凌未成年人或危害未成年人身心健康的行為都是不能容忍的。
當一個用戶發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將依據(jù)相關(guān)用戶違規(guī)情節(jié)嚴重程度，對帳號進行禁言 1 天、7 天、15 天直至永久禁言或封停賬號的處罰。當涉及欺凌未成年人、危害未成年人身心健康、通過作弊手段注冊、使用帳號，或者濫用多個帳號發(fā)布違規(guī)內(nèi)容時，本網(wǎng)站將加重處罰。
三、申訴
隨著平臺管理經(jīng)驗的不斷豐富，本網(wǎng)站出于維護本網(wǎng)站氛圍和秩序的目的，將不斷完善本公約。
如果本網(wǎng)站用戶對本網(wǎng)站基于本公約規(guī)定做出的處理有異議，可以通過「建議反饋」功能向本網(wǎng)站進行反饋。
(規(guī)則的最終解釋權(quán)歸屬本網(wǎng)站所有)