激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢(xún)電話(huà)：400-810-1418 服務(wù)與監(jiān)督電話(huà)：400-810-1418轉(zhuǎn)接2

設(shè)計(jì)師必備:提高視覺(jué)層級(jí)的9個(gè)技巧

發(fā)布時(shí)間：2024-03-14 09:16:21 瀏覽量：183次

有效的視覺(jué)層級(jí)是產(chǎn)品成功的基礎(chǔ)，能以有效的方式組織UI元素，使內(nèi)容容易理解，看起來(lái)舒適整潔。視覺(jué)元素的呈現(xiàn)對(duì)用戶(hù)體驗(yàn)有很重要的影響，如果組成元素能被巧妙地運(yùn)用，用戶(hù)就能輕松地瀏覽產(chǎn)品，和產(chǎn)品互動(dòng)，并且享受這個(gè)互動(dòng)過(guò)程。

聲明：原創(chuàng)翻譯，如需轉(zhuǎn)載，請(qǐng)申請(qǐng)本人授權(quán)并保留文章全部信息，嚴(yán)禁私自用于任何商業(yè)用途，請(qǐng)尊重作者權(quán)益。

那么，怎么做出有效的視覺(jué)層級(jí)？當(dāng)然，不同的產(chǎn)品要求不同的方法，但仍有一些相同的方法幫助組織UI元素。接下來(lái)我會(huì)提供一些有用的技巧，關(guān)于如何為移動(dòng)和web產(chǎn)品創(chuàng)建具有說(shuō)服力的視覺(jué)層級(jí)。

1、始終記住商業(yè)目標(biāo)

產(chǎn)品背后總有商業(yè)目標(biāo)的支撐。為了達(dá)到這個(gè)目標(biāo)，設(shè)計(jì)團(tuán)隊(duì)需要梳理出哪些UI元素更為重要，根據(jù)他們的角色排優(yōu)先級(jí)，比如在電子商務(wù)網(wǎng)站上的所有元素各自都有他們的任務(wù)。產(chǎn)品圖片通常是主要的視覺(jué)焦點(diǎn)，因?yàn)樾枰膭?lì)用戶(hù)考慮購(gòu)買(mǎi)。接下來(lái)是圖片的標(biāo)題，標(biāo)題要解釋產(chǎn)品是什么。然后是CTA按鈕，促使用戶(hù)購(gòu)買(mǎi)產(chǎn)品。通過(guò)思考網(wǎng)站或app的商業(yè)和市場(chǎng)目標(biāo)，設(shè)計(jì)團(tuán)隊(duì)能有效地優(yōu)化視覺(jué)層級(jí)，讓產(chǎn)品在一堆信息中脫穎而出。

2、考慮瀏覽軌跡

在我們之前的文章中提過(guò)，在仔細(xì)閱讀網(wǎng)頁(yè)前，人們會(huì)大致瀏覽下什么是他們真正感興趣的。不同的研究，包括尼爾森-諾爾曼團(tuán)隊(duì)做的研究，都已表明被廣泛采用的瀏覽模式是F型或Z型。

F型主要是出現(xiàn)在有大量?jī)?nèi)容的頁(yè)面或屏幕上，比如博客、新聞平臺(tái)等，用戶(hù)的視線(xiàn)是以F型瀏覽：首先，用戶(hù)在水平方向?yàn)g覽頁(yè)面頂部的信息，然后往下瀏覽頁(yè)面，再在比較窄一些的水平方向?yàn)g覽頁(yè)面，最后在垂直方向，閱讀頁(yè)面左邊的信息，尋找頁(yè)面段落句子的關(guān)鍵詞。

Z型出現(xiàn)在沒(méi)有大量?jī)?nèi)容的文本上，或者不需要往下滑動(dòng)頁(yè)面。這個(gè)軌跡是像這樣的：用戶(hù)首先會(huì)在左上角瀏覽頁(yè)面的標(biāo)題，尋找關(guān)鍵信息，然后瀏覽到右上角，最后從左到右沿著水平方向?yàn)g覽頁(yè)面底部。

了解了這兩個(gè)模式后，設(shè)計(jì)師組織內(nèi)容時(shí)會(huì)把核心UI元素放在最容易被看到的地方來(lái)吸引用戶(hù)。

3、易用性?xún)?yōu)先

我們常常認(rèn)為視覺(jué)層級(jí)好像只是針對(duì)審美層面，但其實(shí)不是這樣的。首先，通過(guò)構(gòu)建和組織視覺(jué)元素，設(shè)計(jì)師需要確保產(chǎn)品清晰可用，導(dǎo)航能起到作用。光建立在審美層面的視覺(jué)層級(jí)是不能起到有效作用的，組織結(jié)構(gòu)差的用戶(hù)界面會(huì)帶來(lái)不好的用戶(hù)體驗(yàn)。所以，構(gòu)建視覺(jué)層級(jí)時(shí)，設(shè)計(jì)師需要考慮UI元素的功能是什么，以及它們?cè)谝龑?dǎo)用戶(hù)的過(guò)程中所扮演的角色。

4、留白

留白或者說(shuō)負(fù)形，不僅僅是指界面元素之間的區(qū)域，它也是視覺(jué)構(gòu)成的一個(gè)關(guān)鍵部分。留白是一種能讓所有界面元素被用戶(hù)注意到的工具，設(shè)計(jì)師們能用它組合或分離UI組件，以創(chuàng)建有效布局。而且留白有利于強(qiáng)調(diào)需要用戶(hù)特別注意的元素，也是創(chuàng)建視覺(jué)層級(jí)的有效工具，需要設(shè)計(jì)師平衡使用。

5、使用黃金比例

我們最新的文章中專(zhuān)門(mén)有一篇是介紹黃金比例在設(shè)計(jì)中的運(yùn)用。不同尺寸的元素有一個(gè)精確的比例在審美上被認(rèn)為是看起來(lái)最舒服的，這個(gè)比例是1:1.618，經(jīng)常被繪制成一個(gè)貝殼形的螺旋，你可能看到過(guò)。

設(shè)計(jì)師在繪制草稿階段就經(jīng)常使用黃金比例，這有助于規(guī)劃排版架構(gòu)，以適合的比例縮放用戶(hù)界面元素，使用戶(hù)看起來(lái)舒適。

6、使用網(wǎng)格

網(wǎng)格是個(gè)用于設(shè)計(jì)不同階段的關(guān)鍵工具，也包括建立視覺(jué)層級(jí)的階段。網(wǎng)格有助于組織組件，使它們以合適的尺寸和比例呈現(xiàn)，而且能幫助設(shè)計(jì)師有效處理負(fù)形，因?yàn)榫W(wǎng)格展示了元素是否按比例放置。

7、添加一些顏色

顏色的選擇和組合對(duì)視覺(jué)層級(jí)來(lái)說(shuō)很有必要，因?yàn)樗鼈兡軒椭脩?hù)識(shí)別核心元素。顏色有它們自己的層級(jí)，在用戶(hù)心里具有影響力。有像紅色、橙色這樣很強(qiáng)的顏色，也有像白色、米色這樣很弱的顏色。強(qiáng)烈的顏色很容易被注意到，所以設(shè)計(jì)師經(jīng)常用來(lái)突出元素，增強(qiáng)對(duì)比。

把一種顏色運(yùn)用到幾個(gè)元素上，你會(huì)發(fā)現(xiàn)它們?cè)谀撤N程度上是有聯(lián)系的。比如，如果你選擇了一個(gè)紅色購(gòu)買(mǎi)按鈕，當(dāng)用戶(hù)需要的時(shí)候，能憑直覺(jué)找到。

8、注意字體

視覺(jué)層級(jí)包括一個(gè)核心分支叫做排版層級(jí)。通過(guò)修改和組合文字，排版層級(jí)旨在形成起最有意義、最突出文字信息和普通文字信息之間對(duì)比。通過(guò)調(diào)節(jié)字體大小、顏色、字重和對(duì)齊關(guān)系來(lái)實(shí)現(xiàn)字體的轉(zhuǎn)換。不同的字體能將文字信息分割成不同的層級(jí)，以便用戶(hù)可以逐漸感知信息。不過(guò)，字體盡量控制在3種以?xún)?nèi)，因?yàn)槭褂锰嘧煮w會(huì)顯得頁(yè)面很雜亂，設(shè)計(jì)不協(xié)調(diào)。

9、Web三層級(jí)和移動(dòng)兩層級(jí)

如上所說(shuō)，不同的字體形成了排版的優(yōu)先級(jí)，排版層級(jí)由標(biāo)題、次標(biāo)題、文本、按鈕和說(shuō)明文字等構(gòu)成。有3個(gè)排版優(yōu)先級(jí)：第一、第二和第三層級(jí)。第一級(jí)包含最大的類(lèi)型，旨在把用戶(hù)注意力吸引到屏幕的核心信息。第二級(jí)提供容易瀏覽的文本元素，幫助用戶(hù)引導(dǎo)到內(nèi)容上。第三級(jí)適用于正文文本，通過(guò)相對(duì)小的類(lèi)型展示一些額外的數(shù)據(jù)。

很多情況下，web產(chǎn)品包括3個(gè)層級(jí)，因?yàn)槟苷故靖嗟男畔?。另一方面，在移?dòng)端設(shè)計(jì)上建議設(shè)計(jì)師保留2個(gè)層級(jí)。小屏不能為3個(gè)層級(jí)提供足夠空間，所以像次標(biāo)題這種第2層級(jí)的元素要放在一邊，讓頁(yè)面設(shè)計(jì)更加簡(jiǎn)潔。

有效的視覺(jué)層級(jí)不單是指美感，旨在提供問(wèn)題解決交互系統(tǒng)和友好的用戶(hù)體驗(yàn)。為了創(chuàng)造有效的視覺(jué)層級(jí)，設(shè)計(jì)師需要考慮功能性和商業(yè)目標(biāo)來(lái)組織所有UI元素。

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話(huà)暢通！
確定