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