網(wǎng)頁(yè)美工設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)師必須要學(xué)習(xí)的視覺(jué)層級(jí)技巧

編輯：時(shí)間：2018-03-09 08:42:09

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

　　那么，怎么做出有效的視覺(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ì)用戶考慮購(gòu)買。接下來(lái)是圖片的標(biāo)題，標(biāo)題要解釋產(chǎn)品是什么。然后是CTA按鈕，促使用戶購(gòu)買產(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)等，用戶的視線是以F型瀏覽：首先，用戶在水平方向?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è)軌跡是像這樣的：用戶首先會(huì)在左上角瀏覽頁(yè)面的標(biāo)題，尋找關(guān)鍵信息，然后瀏覽到右上角，最后從左到右沿著水平方向?yàn)g覽頁(yè)面底部。

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

　　3、易用性優(yōu)先

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

　　4、留白

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

1/3 1 2 3 下一頁(yè) 尾頁(yè)

<< 上一篇：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的9項(xiàng)基本原則

>> 下一篇：網(wǎng)頁(yè)設(shè)計(jì)中的css用法特點(diǎn)注意事項(xiàng)

推薦資訊