APP界面設(shè)計(jì)視覺(jué)思維研究

【摘要】APP界面設(shè)計(jì)師基于用戶交互體驗(yàn)基礎(chǔ)上創(chuàng)設(shè)的界面設(shè)計(jì)，通過(guò)對(duì)用戶體驗(yàn)的視覺(jué)思維研究，使得APP界面設(shè)計(jì)不僅擁有獨(dú)特的個(gè)性與品位，還能夠?yàn)橛脩魩?lái)舒適、自由、良好的視覺(jué)感受，在實(shí)際的操作中更加符合用戶的認(rèn)知習(xí)慣，在設(shè)計(jì)上為用戶帶來(lái)合理性和便利性的兩重體驗(yàn)。

【關(guān)鍵詞】界面設(shè)計(jì);交互設(shè)計(jì);用戶體驗(yàn)

一、基礎(chǔ)布局與界面色調(diào)

（一）界面布局的調(diào)整

設(shè)備屏幕的布局需要滿足用戶的操作習(xí)慣以及視覺(jué)習(xí)慣。用戶在屏幕中的閱讀順序通常是從上到下，從左到右，因此，為了節(jié)約用戶的時(shí)間成本，重要的信息應(yīng)該放在屏幕的最上方;用戶在屏幕上的操作通常通過(guò)大拇指來(lái)完成，這就要求設(shè)計(jì)師將用戶最常用的操作置于屏幕最下方，但要盡量避免將按鈕置于手指的觸碰死角。通常我們可以通過(guò)設(shè)置長(zhǎng)按出現(xiàn)操作按鈕的方式來(lái)使界面更加簡(jiǎn)潔，環(huán)狀排列的按鈕也更加符合人體的手指滑動(dòng)軌跡。例如IPHONE輔助功能中的輔助觸控，在觸控按鈕中可調(diào)用出自定功能以及通知。

（二）界面色調(diào)的選擇

界面色調(diào)的選擇是十分重要的過(guò)程，色調(diào)首先需要根據(jù)客戶和用戶的定位以及訴求來(lái)選擇。冷色調(diào)給人的感覺(jué)偏理性，暖色調(diào)給人的感覺(jué)偏感性，適宜的顏色能夠在本身特性的基礎(chǔ)上賦予APP更多的主觀感受，而APP反過(guò)來(lái)也能夠促進(jìn)不同顏色帶給人們的更多心理感知。在進(jìn)行界面色調(diào)的選擇時(shí)，首先可以參考競(jìng)品顏色，選擇與競(jìng)品相近的顏色。例如，淘寶、小紅書、網(wǎng)易考拉等購(gòu)物類APP，普遍選擇了橙色、紅色;而金融類APP，如支付寶、手機(jī)銀行普遍選擇了藍(lán)色和白色作為界面主色調(diào)。其次也可以采用與競(jìng)品完全不同的顏色來(lái)進(jìn)行區(qū)別定位，例如微信采用的是綠色和黑色，QQ則采用較明亮的白色底，這種顏色區(qū)別，使QQ更符合面向青少年的定位，凸顯微信的受眾群體定位更加大眾化，顏色的不同也促進(jìn)了兩者視覺(jué)風(fēng)格上的差異化發(fā)展。

二、圖標(biāo)繪制與交互動(dòng)畫設(shè)計(jì)

（一）圖標(biāo)繪制

圖標(biāo)對(duì)于界面設(shè)計(jì)師來(lái)說(shuō)是花費(fèi)時(shí)間最多的一項(xiàng)工作內(nèi)容，圖標(biāo)能夠加快用戶獲取信息的速度。畫好一個(gè)圖標(biāo)需要關(guān)注圖標(biāo)的大小、造型以及氛圍。圖標(biāo)的大小事實(shí)上影響到了每個(gè)功能的優(yōu)先級(jí)，但對(duì)于不確定用戶需求優(yōu)先級(jí)的功能按鈕，就需要設(shè)計(jì)一整套平級(jí)的圖標(biāo)，避免因圖標(biāo)大小帶來(lái)對(duì)界面元素優(yōu)先級(jí)的影響。在設(shè)計(jì)時(shí)，除了判斷優(yōu)先級(jí)大小以外，還必須要考慮到人的視覺(jué)影響因素。例如，正方形邊長(zhǎng)和圓形直徑相等，但是在視覺(jué)上，正方形比圓形更大，因此在設(shè)計(jì)時(shí)，我們就要通過(guò)限定框，在畫圖前先規(guī)定好不同圖形的視覺(jué)等大框，限定框可以參考Iconfont（阿里巴巴矢量圖標(biāo)庫(kù)）中的矢量圖形設(shè)計(jì)模版。

設(shè)計(jì)師在進(jìn)行界面風(fēng)格設(shè)計(jì)時(shí)，常常想突破原有的設(shè)計(jì)進(jìn)行風(fēng)格的創(chuàng)新，但這樣的創(chuàng)新是具有一定風(fēng)險(xiǎn)的，如果能從趨勢(shì)中發(fā)現(xiàn)潛在的先進(jìn)點(diǎn)，的確能夠使你的設(shè)計(jì)脫穎而出，但前提是它必須經(jīng)得起使用者的驗(yàn)證，任何設(shè)計(jì)師都不能為了標(biāo)新立異而鋌而走險(xiǎn)。

（二）交互動(dòng)畫設(shè)計(jì)

對(duì)于任何用戶界面來(lái)說(shuō)，視覺(jué)反饋都舉足輕重，一方面視覺(jué)反饋可以明確用戶對(duì)APP的有效操控，另一方面視覺(jué)反饋可以提示用戶APP的正常運(yùn)轉(zhuǎn)。動(dòng)效還可以反饋按鈕功能的改變、屏幕空間的擴(kuò)展、操作結(jié)果的提示等，動(dòng)效還能夠表現(xiàn)按鈕與功能之間的層級(jí)關(guān)系，例如長(zhǎng)按出現(xiàn)復(fù)制選項(xiàng)，則該選項(xiàng)應(yīng)從按鈕處從下往上彈出，而不是從屏幕側(cè)面劃出。

需要注意的是，UI設(shè)計(jì)中的動(dòng)效并沒(méi)有大量應(yīng)用，但正是這些簡(jiǎn)單的動(dòng)效解決了轉(zhuǎn)換生硬的銜接，起到了潤(rùn)滑的效果，幫助設(shè)計(jì)師進(jìn)行概念的快速展示。精美的視覺(jué)設(shè)計(jì)加上簡(jiǎn)單的動(dòng)效輔助，同樣能夠得到與復(fù)雜動(dòng)效相同的視覺(jué)效果。

早期的APP動(dòng)畫較少，大部分動(dòng)效是為了解決某個(gè)具體的交互問(wèn)題而誕生的，具有較強(qiáng)的目的性。例如讀書類APP上的翻頁(yè)效果，就是針對(duì)用戶對(duì)翻頁(yè)手勢(shì)缺乏認(rèn)知而設(shè)計(jì)出來(lái)的。模擬真實(shí)的翻頁(yè)效果能夠讓用戶更快地適應(yīng)操作手勢(shì)，也讓用戶有一種回歸現(xiàn)實(shí)情境的使用體驗(yàn)。

（三）表現(xiàn)跳轉(zhuǎn)和頁(yè)面之間的層級(jí)關(guān)系

視覺(jué)感應(yīng)上的連貫性，是最常用到的一個(gè)場(chǎng)景，也是擬物化狀態(tài)的呈現(xiàn)。首先用直白的方式理解跳轉(zhuǎn)關(guān)系，我們用喝水的過(guò)程來(lái)舉例，桌上放著一杯水，那么需要先把手伸過(guò)去，然后端起水杯，再把水杯湊近嘴邊，喝水，這是一系列非常連貫的動(dòng)作。而不會(huì)像不符合邏輯的那樣，桌上有杯水，下一秒水直接在嘴里。這樣的呈現(xiàn)方式不符合正常的視覺(jué)邏輯，理解起來(lái)的難度也將相應(yīng)增加。

在UI發(fā)展的歷程中，經(jīng)歷過(guò)從粗糙到細(xì)膩的過(guò)程。例如早期windows版本，單擊桌面上的“我的電腦”圖標(biāo)，將直接打開(kāi)一個(gè)窗口。而現(xiàn)在的ios 12版本，單擊桌面上的圖標(biāo)，會(huì)有一個(gè)逐步放大的過(guò)程，從這個(gè)圖標(biāo)開(kāi)始放大，然后展示出一個(gè)具體的窗口。而關(guān)閉窗口也同樣是，從展示窗口縮小到日歷圖標(biāo)的位置。

（三）色彩感知

用戶的視覺(jué)思維對(duì)色彩的感知最為敏感，不同的色彩更是為人們傳遞著不同的信息，APP設(shè)計(jì)中常應(yīng)用藍(lán)色、紫色等顏色來(lái)表示科技感，紅色表示積極、向上，能夠?yàn)橛脩魩?lái)較為明顯的視覺(jué)刺激，提升視覺(jué)關(guān)注度。因此，在用戶交互體驗(yàn)的設(shè)計(jì)上，需要有效地把控用戶色彩感知這一視覺(jué)思維特性，合理調(diào)節(jié)設(shè)計(jì)中的色彩占比，通過(guò)色彩的對(duì)立通道設(shè)計(jì)流暢、自然的色彩過(guò)度。

三、圖標(biāo)的可用性分析

圖標(biāo)種類有很多，在一款A(yù)PP里面，圖標(biāo)幾乎會(huì)出現(xiàn)在每一個(gè)界面中。從應(yīng)用場(chǎng)景來(lái)區(qū)分，我們可以把圖標(biāo)大致分為3類，即桌面圖標(biāo)、應(yīng)用內(nèi)圖標(biāo)和插圖類的圖標(biāo)。這3類圖標(biāo)的側(cè)重點(diǎn)是有所不同的。桌面圖標(biāo)一般使用產(chǎn)品的LOGO來(lái)做，不同的系統(tǒng)對(duì)桌面圖標(biāo)的要求和尺寸也是不同的，具體需要查找該平臺(tái)的《用戶界面設(shè)計(jì)指南》，找到具體的尺寸再去進(jìn)行設(shè)計(jì)。桌面圖標(biāo)盡量簡(jiǎn)潔，不要太復(fù)雜，具有辨識(shí)度，圖標(biāo)內(nèi)元素不能過(guò)多。桌面圖標(biāo)的設(shè)計(jì)原則是，盡量讓用戶在需要使用這個(gè)APP時(shí)，能一眼從眾多App圖標(biāo)中找到這個(gè)圖標(biāo)。

應(yīng)用內(nèi)圖標(biāo)，使用場(chǎng)景就更多了，包括底部菜單欄的導(dǎo)航、頁(yè)面內(nèi)的導(dǎo)航、分類列表等。對(duì)于應(yīng)用內(nèi)圖標(biāo)，規(guī)范不是太多，設(shè)計(jì)原則是盡量讓整個(gè)產(chǎn)品內(nèi)的圖標(biāo)有統(tǒng)一的設(shè)計(jì)語(yǔ)言。設(shè)計(jì)的要點(diǎn)在于，能用最簡(jiǎn)潔易懂的圖形來(lái)傳達(dá)給用戶該按鈕的核心功能，切忌只顧著圖標(biāo)好看而忽略了實(shí)用性。界面設(shè)計(jì)是為了內(nèi)容服務(wù)的，界面設(shè)計(jì)師的職責(zé)之一就是讓產(chǎn)品既好用又好看，實(shí)在不能兼顧的情況下，也要優(yōu)先保證信息傳達(dá)的準(zhǔn)確。

插圖類圖標(biāo)常用于一些空白頁(yè)面，例如提示沒(méi)有新消息、提示網(wǎng)絡(luò)連接失敗等，或者一些新手引導(dǎo)頁(yè)面，這里的圖標(biāo)會(huì)比較大，也可以理解為插圖。

四、字體的樣式

從大的分類上講，字體可以分為兩大類，一類是襯線字，另一類是無(wú)襯線字。字體學(xué)里，襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性筆畫。有襯線的字體稱為襯線字體;沒(méi)有襯線的字體則稱為無(wú)襯線體。

這兩種類型的字體出現(xiàn)的原因主要有兩個(gè)方面：其一是這兩種字體能夠傳達(dá)出不一樣的設(shè)計(jì)風(fēng)格，其二就是它們都是在歷史進(jìn)程中自然形成的。古代沒(méi)有現(xiàn)代的精雕技術(shù)，人民在刻碑文或是手寫書法時(shí)，在開(kāi)頭結(jié)尾處不易修飾平整，而使用襯線，則能夠起到一定的修飾作用，令字體的開(kāi)頭結(jié)尾更加平整，且修飾后的字體顯得更加美觀。

在現(xiàn)代社會(huì)中，襯線宇和非襯線字都有各自的適用場(chǎng)合，襯線字更多地用于印刷，由于襯線字字體筆畫粗細(xì)不同，筆畫末端特別的修飾，會(huì)讓文字在字號(hào)很小的時(shí)候也有不錯(cuò)的顯示效果。而在屏幕端顯示的時(shí)候，受到屏幕分辨率的影響，襯線字在不同的屏幕渲染下，會(huì)讓筆畫的末端變得模糊，不如無(wú)襯線字來(lái)得干凈和犀利。由上比對(duì)可知，在進(jìn)行UI設(shè)計(jì)時(shí)，應(yīng)用無(wú)襯線字的場(chǎng)景會(huì)遠(yuǎn)遠(yuǎn)多于應(yīng)用襯線字的場(chǎng)景。

襯線字中的宋體是比較特殊的。宋體本身是一種襯線字，并不適合在屏幕上展示，但在過(guò)去12點(diǎn)無(wú)樣式宋體是最常用的字體。這是因?yàn)樗误w12點(diǎn)是最適合在低像素屏幕下展示的點(diǎn)陣字，可以較為清晰地展示中文字體。

如今隨著高清化屏幕的普及，移動(dòng)設(shè)備顯示屏的分辨率越來(lái)越高，字體方面的限制逐漸變小，因此現(xiàn)在可以更多地應(yīng)用普通平滑效果的無(wú)襯線字。

結(jié)語(yǔ)

APP界面設(shè)計(jì)中用戶交互體驗(yàn)與視覺(jué)思維有著很強(qiáng)的視覺(jué)需求、加強(qiáng)對(duì)界面設(shè)計(jì)的基礎(chǔ)布局、界面色調(diào)、圖標(biāo)設(shè)計(jì)、交互動(dòng)畫和字體的應(yīng)用等視覺(jué)思維的實(shí)際應(yīng)用，將使得APP界面設(shè)計(jì)中用戶交互體驗(yàn)的整體視覺(jué)效果更加顯著，進(jìn)而促進(jìn)UI設(shè)計(jì)的整體質(zhì)量與水平不斷提升。 -

參考文獻(xiàn)：

[1]晏艷.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺(jué)表現(xiàn)[J].西部文革，2019，41（01）：108-109.

[2]楊媛.UI設(shè)計(jì)中用戶交互體驗(yàn)的視覺(jué)思維[J].山東工業(yè)技術(shù)，2019（05）：245.

[3]馮敏，界面設(shè)計(jì)的擬物化和扁平化的風(fēng)格探討[J].設(shè)計(jì)，2019，32（05）：69-71.

[4]任葆軒，試論擬物化與扁平化在UI設(shè)計(jì)中的比較[J].藝術(shù)科技，2017，30（11）：123.

【作者簡(jiǎn)介】李智，碩士，上海理工大學(xué)公共實(shí)驗(yàn)中心，助理實(shí)驗(yàn)師;主要從事計(jì)算機(jī)前端設(shè)計(jì)研究。