如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在視覺界面設(shè)計(jì)中，不同于藝術(shù)作品傳達(dá)的是設(shè)計(jì)者自身的情感和寄托，這里關(guān)注的重點(diǎn)是傳達(dá)的行為和信息，也就是目標(biāo)。而在視覺設(shè)計(jì)元素中，重點(diǎn)關(guān)注的有：

• 顏色
• 文字
• 大小
• 形狀
• 紋理
• 情景
• 位置
• 動(dòng)效

可以通過以下關(guān)系來表達(dá)如何整合視覺設(shè)計(jì)：

整體+單體——目標(biāo)

整體代表的是層級(jí)，而單體表達(dá)的是單個(gè)個(gè)體所要傳達(dá)的信息，將單個(gè)個(gè)體所要傳達(dá)的信息和層級(jí)相整合，共同來達(dá)成最終的目標(biāo)。同時(shí)可以把上面提到的重點(diǎn)進(jìn)行分類，將顏色、文字、大小、形狀、紋理放入單元中來思考，而把情景、位置、動(dòng)效、信息層級(jí)列入整體。

先從單體的角度，來討論一下：

顏色

顏色的選擇是一件十分重要的事情，因?yàn)橛捎谒母叻直嫘裕鼘?duì)于界面的影響比形狀、大小等要高，處于人的視覺關(guān)注區(qū)的上層。就好比我們?cè)谝欢颜叫蔚陌追孔又姓乙蛔叫蔚募t房子，比在一堆正方形的白房子中找圓形的白房子要容易的多。

利用顏色，要把用戶的目標(biāo)、環(huán)境、內(nèi)容和品牌放在優(yōu)先的位置，其次才是去考慮這個(gè)顏色本身。

就比如為什么快餐店如此鐘愛紅色和黃色，并不是說紅色和黃色好看，而是因?yàn)樗砘鹧?，火焰?zhèn)鬟_(dá)的是一種熱烈而緊迫的感覺，使得消費(fèi)者沒辦法靜下心慢慢享受，而是更加快速的消費(fèi)然后走人。在很多商務(wù)類的應(yīng)用中，大多選擇藍(lán)色作為主色調(diào)，因?yàn)樗{(lán)色傳達(dá)的是一種可信賴與沉穩(wěn)的感覺。

在界面設(shè)計(jì)中，單個(gè)元素的顏色選擇不僅在于元素自身所要傳達(dá)的信息，更在于它在整個(gè)層級(jí)中所處的地位。像下圖是IOS中的日歷，除了日歷本身以外的部分，都是操作控件，這些單個(gè)控件，被賦予了紅色以后，在白底背景上顯得格外突出，傳達(dá)給用戶的是，這都是可以點(diǎn)擊的，另外一方面，紅色的利用使這些控件所代表的控制層的層級(jí)得到提高，可以和內(nèi)容層產(chǎn)生明顯的區(qū)分。

顏色的使用要避免多而雜，將顏色按主色調(diào)、輔助色等做好區(qū)分，這里不做進(jìn)一步擴(kuò)展，以后再深入探討。

文字

文字的屬性包括字體、字號(hào)、字的顏色。對(duì)于字體，主要考慮的是可讀性要強(qiáng)，所以對(duì)于大部分移動(dòng)端應(yīng)用而言，IOS常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好，Android常選擇Noto或則微軟雅黑做為中文字體。因?yàn)檫@幾種字體在移動(dòng)端的顯示效果較好，改變字體的大小不會(huì)對(duì)文字的識(shí)別造成太大的影響。當(dāng)然有一些風(fēng)格比較特別的應(yīng)用，比如澎湃新聞APP使用的就是宋體，傳達(dá)出一種嚴(yán)謹(jǐn)、莊嚴(yán)的感覺，因?yàn)檫@是一款專注政治新聞的APP。

字號(hào)的選擇也十分重要，它本身就帶有有序的特征，不同大小的字號(hào)體現(xiàn)了不同的層級(jí)。

大小

大小這個(gè)屬性是一個(gè)有序并且可以量化的參量，不同大小的元素排布在一起，大的顯然有更強(qiáng)的吸引力，比如ios的game center，最重要的”游戲”被中間那個(gè)最大的圓所表示，而與游戲相關(guān)的”挑戰(zhàn)”處于第二大的圓中，其他幾個(gè)則處于第三大的圓中。

而量化的例子，比如wifi信號(hào)、電池電量這種小icon，大小這一屬性被量化，并和所要代表的含義緊密相連。但大小的錯(cuò)誤運(yùn)用，會(huì)降低其他屬性的作用，比如元素太小的時(shí)候，該元素的形狀屬性在用戶眼里就發(fā)揮不了太大的作用。

形狀

形狀相比前面所提到的大小、顏色，需要用戶更高一級(jí)的分辨能力，簡(jiǎn)單的形狀多用于分割，將所要表達(dá)的部分和其他的部分相區(qū)隔，比如一個(gè)按鈕的邊框，它為了告訴用戶，這是一個(gè)可以進(jìn)行交互的控件，吸引用戶點(diǎn)擊；比如MD設(shè)計(jì)中常用的卡片式設(shè)計(jì)，用一個(gè)卡片的形狀來包裹特定的內(nèi)容，保證了卡片內(nèi)容的整體性，也保證了整體頁(yè)面的層級(jí)，讓用戶在操作時(shí)更容易理解內(nèi)在的邏輯關(guān)系。

而復(fù)雜的形狀本身就帶有傳達(dá)含義的作用，像一個(gè)人像形狀的ICON，為的是告知用戶，這個(gè)ICON可以跳轉(zhuǎn)到個(gè)人用戶頁(yè)面；而像很多應(yīng)用的專屬圖標(biāo)，都會(huì)有特定形狀的標(biāo)示物，比如twitter的鳥、github的貓、tumblr的字母t以及youtube的播放開關(guān)。

合理的運(yùn)用形狀可以傳達(dá)豐富的信息以及劃分層次。

紋理

紋理的運(yùn)用雖然在扁平化大行其道的今天顯得尤為低調(diào)，但它所能傳達(dá)的能供性還是非常強(qiáng)大的，能供性在《設(shè)計(jì)心理學(xué)》這本書中是這樣被定義的——事物所感知到的及其實(shí)際的屬性，主要是那些能決定事物可能如何使用的基本屬性。也就是說，我們認(rèn)為這個(gè)對(duì)象能做什么。比如一個(gè)表面帶有橡膠紋理，一般人都會(huì)覺得這是一個(gè)可以抓握的東西，比如一個(gè)按鈕帶有陰影而顯得凸出于本身的界面，似乎是在告訴用戶這是一個(gè)可以點(diǎn)擊的控件。

順便談?wù)剶M物化的設(shè)計(jì)，它顯然已經(jīng)不太流行了，因?yàn)榭萍籍a(chǎn)品不斷融入大家的生活，不需要再通過擬物的方式，用戶就可以很好的理解這個(gè)科技產(chǎn)品是如何操作的，這時(shí)推廣扁平化設(shè)計(jì)不僅提高了用戶的操作效率，而且讓信息和內(nèi)容可以更加的傳達(dá)。但隨著AR、VR逐漸登上舞臺(tái)，利用這更高維度的特性，擬物化設(shè)計(jì)也許可以通過一種新的方式重歸人們視野。

討論完了單體的部分，下面來討論一下整體層面上，如何整合視覺設(shè)計(jì)：

情景

情景是視覺界面設(shè)計(jì)元素的其中之一，考慮的是用戶正處于一個(gè)怎樣的環(huán)境來操作你的產(chǎn)品，只有把這個(gè)維度也納入思考，設(shè)計(jì)的產(chǎn)品才更加貼近用戶更加真實(shí)全面。舉一個(gè)可能和界面不太相關(guān)的例子，之前看過一篇關(guān)于uber設(shè)計(jì)的反思，提到了一個(gè)關(guān)于上海的問題，因?yàn)樯虾５母呒軜蛱貏e多，Uber匹配用戶和司機(jī)是通過距離來匹配的，這就產(chǎn)生了一個(gè)問題，車在高架上人在高架下，可能此時(shí)他們的距離很短，但實(shí)際司機(jī)要把車開到用戶身邊需要耗費(fèi)的時(shí)間可能遠(yuǎn)比這距離多的多。這就是沒有考慮好實(shí)際情景的例子。

再舉一個(gè)和界面設(shè)計(jì)相關(guān)的，比如ios下的撥號(hào)及通話界面，每一個(gè)按鈕的設(shè)計(jì)得都非常的大，占據(jù)了整個(gè)界面大部分的位置，這主要是考慮到在打電話或則接聽電話時(shí)，人們可能處于一個(gè)比較急切的情況，以及所處的環(huán)境也千差萬別，為了保證用戶可以快速的找到接聽的按鍵或快速的拔打號(hào)碼，按鈕設(shè)計(jì)的大尺寸就可以理解了。

位置

這里的位置指的是各個(gè)單體元素的相對(duì)位置，位置的思考往往和這幾個(gè)因素緊密相關(guān)：

• 操作習(xí)慣
• 視覺習(xí)慣
• 單體元素關(guān)系
• 產(chǎn)品邏輯

操作習(xí)慣指的是用戶手指操作的區(qū)域，單手或雙手以及左手和右手時(shí)的操作習(xí)慣都是不一樣的，但也有共通的特點(diǎn)，就是操作屏幕下部的元素要比操作屏幕上部的元素要容易的多。

視覺習(xí)慣指的是對(duì)于大部分人而言的閱讀瀏覽習(xí)慣，像下圖是瀏覽網(wǎng)頁(yè)時(shí)的瀏覽路徑，呈現(xiàn)的是F型的軌跡，而移動(dòng)端由于屏幕尺寸比較小，一般都是L型的瀏覽軌跡。

單體元素關(guān)系指的是各個(gè)元素內(nèi)在的聯(lián)系，比如常見的標(biāo)簽欄上的元素、內(nèi)容區(qū)的元素、導(dǎo)航欄的元素就很自然的分成了3個(gè)不同的部分，各個(gè)部分中的元素因?yàn)榇淼墓δ芑蛘咚鶄鬟_(dá)的含義而有了相通的點(diǎn)。而像其他的單體元素的組合和聯(lián)系也與之類似。

產(chǎn)品邏輯指的是因?yàn)楫a(chǎn)品需求的定義或產(chǎn)品邏輯的需要，將特定的元素安排在了特定的位置，比如為了達(dá)成商業(yè)目標(biāo)，將頂部區(qū)域設(shè)置為吸引人注意的banner區(qū)。

動(dòng)效

動(dòng)效的作用有很多，它比靜態(tài)的頁(yè)面擁有豐富的內(nèi)涵，可以傳達(dá)信息、表達(dá)不同部件之間的關(guān)系、吸引注意、緩和不同模式之間的過渡以及確認(rèn)命令效果等。比如動(dòng)態(tài)的Loading動(dòng)畫緩和了用戶等待的焦急心理，并告知用戶正在進(jìn)行加載。

而借用特定形象的設(shè)計(jì)，可以傳達(dá)品牌文化，像有些應(yīng)用就借著loading動(dòng)效的設(shè)計(jì)融合了自己的品牌logo，達(dá)到了品牌logo露出的效果。還有像不同界面切換時(shí)的滑進(jìn)滑出的動(dòng)效，不僅在視覺上讓用戶更好理解這些頁(yè)面是怎么來的，不會(huì)覺得突兀，而且在邏輯上解釋了這些頁(yè)面的層級(jí)關(guān)系。

文章來源：人人都是產(chǎn)品經(jīng)理
作者：@Thor

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)