界面知識(shí)，如何表現(xiàn)界面中的優(yōu)先級(jí)(4)

一.利用所占空間大小 突出想要被看到的信息

1.利用所占空間大小 突出想要被看到的信息

大量的信息被分類后，產(chǎn)生代表性的圖片和關(guān)鍵詞。圖片與關(guān)鍵詞在設(shè)計(jì)至界面時(shí)，也會(huì)挑選相對(duì)重要的放大。這樣做不是簡(jiǎn)單的擴(kuò)大瀏覽面積，它能夠吸引用戶視線，無形中增加瀏覽時(shí)間。

在不打擾用戶瀏覽的情況下吸引用戶，安靜的引導(dǎo)用戶。至少在我看來，這是溫柔的推銷，能夠得到良好的用戶體驗(yàn)。

2.使用特殊效果

視覺上的特殊化會(huì)把想要表達(dá)的重點(diǎn)與背景拉開，如圖。PS有很多特殊效果，常用在按鍵上，如：陰影、內(nèi)發(fā)光、浮雕 等。

當(dāng)然PS并不能代表所有的特效，有的時(shí)候插入GIF或小視屏也是不錯(cuò)的想法和選擇。

顏色無論作為背景也好作為主體也罷，都是表現(xiàn)優(yōu)先級(jí)的利器。強(qiáng)烈的色彩對(duì)比和透明度的適當(dāng)運(yùn)用都能讓重要的信息輕而易舉的跳出背景。

但千萬別用強(qiáng)烈的互補(bǔ)色，比如：紅色和綠色、紫色和黃色，這些顏色對(duì)比太過強(qiáng)烈放在一起會(huì)令人視覺上有難受的閃爍效果，所以一定要避免。

除了凸顯重要信息之外，色彩甚至可以幫助我們快速瀏覽信息。不用想太多就可以明白對(duì)應(yīng)的關(guān)系。這有效的提升了閱讀效率，并且減輕了視覺上的壓力。

圖片也是非常重要的元素之一。色彩固然強(qiáng)大，但圖片也有它不可替代的優(yōu)勢(shì)。比如：圖片可以傳達(dá)更多的信息。當(dāng)圖片作為背景時(shí)，會(huì)讓整個(gè)界面更顯層次感，能夠起到烘托氣氛的作用。

3.特殊符號(hào)和閃爍 起到提醒作用

特殊符號(hào)還有一些閃爍或晃動(dòng)在UI設(shè)計(jì)中算得上是重磅炸彈，只在需要提醒時(shí)使用。所謂重磅炸彈，用的多了絕對(duì)是有害無益，會(huì)讓你的用戶依賴它，再也無法凸顯它作為提醒時(shí)獨(dú)一無二的作用 。

4.方向性引導(dǎo)

使用有明顯方向性的圖片，這些特征會(huì)引導(dǎo)人眼視線朝著設(shè)定的方向運(yùn)動(dòng)。

比如：眼神注視的方向、手所指的方向、物體運(yùn)動(dòng)的方向、有光線照射的地方等，用這些特征引導(dǎo)用戶，從而突出重要信息的優(yōu)先級(jí)。

5.位置

位置是在設(shè)計(jì)開始就會(huì)考慮的問題 ，人眼觀看事物時(shí)，總會(huì)遵循一些特定的規(guī)律，在設(shè)計(jì)界面時(shí)遵循這些規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規(guī)律和位置設(shè)計(jì)元素有關(guān)。

1) 當(dāng)眼睛偏離視中心時(shí)，在偏離距離相等的情況下，人眼對(duì)左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在最佳視域內(nèi)。當(dāng)然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時(shí)最佳視域就是右上部。

下圖是摘自張帆 羅琦 宮曉東的《網(wǎng)頁界面設(shè)計(jì)藝術(shù)教程》對(duì)一個(gè)屏幕劃分后，用戶對(duì)不同位置不同的關(guān)注度差別：

2) 第二條規(guī)律是眼睛沿水平方向運(yùn)動(dòng)比沿垂直方向運(yùn)動(dòng)快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關(guān)注度差別要小于上下關(guān)注度差別，如想要體現(xiàn)并列的關(guān)系，左右排列會(huì)更合適;而如果要拉開差距，僅通過位置來實(shí)現(xiàn)，上下排列更容易達(dá)到目標(biāo)。

充分利用我們的視覺習(xí)慣，將信息結(jié)構(gòu)化讓閱讀起來更容易理解和瀏覽；重要的信息更突出；氛圍更符合界面。注意做好這些有助于提高用戶良好體驗(yàn)感的東西，就能做出 好的UI設(shè)計(jì)。

————————————————

如果小伙伴們覺得還不錯(cuò)，請(qǐng)點(diǎn)擊收藏噢，愛收藏的人兒，運(yùn)氣都不會(huì)太差，還有一定要粉哦～