1.2 UI設(shè)計(jì)的種類

UI設(shè)計(jì)即界面設(shè)計(jì)，界面設(shè)計(jì)師需要從產(chǎn)品初期就參與評(píng)審，掌握好用戶需求、產(chǎn)品功能點(diǎn)、產(chǎn)品邏輯結(jié)構(gòu)及層級(jí)信息，并在設(shè)計(jì)過程中時(shí)常考慮界面是否有更好的形式來突出產(chǎn)品功能和提升用戶體驗(yàn)。界面廣泛應(yīng)用于系統(tǒng)、軟件、網(wǎng)頁(yè)等各種應(yīng)用場(chǎng)景，按照應(yīng)用場(chǎng)景對(duì)界面設(shè)計(jì)進(jìn)行簡(jiǎn)單的分類，有網(wǎng)頁(yè)設(shè)計(jì)、軟件操作界面設(shè)計(jì)、移動(dòng)端軟件界面設(shè)計(jì)和游戲界面設(shè)計(jì)，本書主要側(cè)重于移動(dòng)端軟件界面設(shè)計(jì)的入門知識(shí)講解。

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

網(wǎng)頁(yè)界面設(shè)計(jì)要求設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)，時(shí)刻以“信息傳達(dá)”為基礎(chǔ)進(jìn)行。而信息傳達(dá)的媒介是通過視覺元素來呈現(xiàn)的，因此網(wǎng)頁(yè)設(shè)計(jì)仍屬于視覺傳達(dá)的范疇，在進(jìn)行界面設(shè)計(jì)時(shí)，應(yīng)當(dāng)遵守視覺傳達(dá)的一般規(guī)律。網(wǎng)頁(yè)設(shè)計(jì)師的主要工作，簡(jiǎn)而言之，就是創(chuàng)造出有吸引力的視覺藝術(shù)形式，來有效傳達(dá)信息，并使信息的呈現(xiàn)變得更加清晰、準(zhǔn)確。優(yōu)秀的網(wǎng)頁(yè)視覺設(shè)計(jì)，既能夠明確網(wǎng)站定位、提升網(wǎng)站的格調(diào)，又能夠簡(jiǎn)化網(wǎng)頁(yè)操作引導(dǎo)，如圖1-10所示。

? 傳達(dá)清晰的信息

信息清晰不僅僅是網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)原則，也是所有用戶界面設(shè)計(jì)都必須遵從的基礎(chǔ)原則。只有讓用戶有效理解界面?zhèn)鬟_(dá)的信息，才能進(jìn)一步討論更好的交互方式。“清晰”意味著用戶能夠準(zhǔn)確接收到要表達(dá)的信息內(nèi)容，并避免出錯(cuò)。

? 以用戶為中心

用戶不會(huì)花太多時(shí)間在同一個(gè)網(wǎng)頁(yè)頁(yè)面內(nèi)。在獲得用戶所需信息后，用戶會(huì)跳轉(zhuǎn)頁(yè)面進(jìn)入新的網(wǎng)頁(yè)尋找信息。網(wǎng)頁(yè)設(shè)計(jì)師需要站在用戶角度進(jìn)行設(shè)計(jì)，替用戶節(jié)省時(shí)間，并充分考慮不同用戶的操作習(xí)慣和對(duì)網(wǎng)絡(luò)的了解程度，在大部分用戶的立場(chǎng)上，將網(wǎng)頁(yè)視覺設(shè)計(jì)得簡(jiǎn)潔明了、便于操作。“以用戶為中心”意味著在進(jìn)行設(shè)計(jì)之前，要對(duì)目標(biāo)用戶的需求、偏好以及操作習(xí)慣建立起充分認(rèn)知。

? 化繁為簡(jiǎn)

網(wǎng)頁(yè)視覺設(shè)計(jì)的最終目標(biāo)是為用戶提供舒適的心理以及視覺體驗(yàn)，因此，在進(jìn)行設(shè)計(jì)時(shí)，要提高用戶對(duì)于網(wǎng)頁(yè)的有效可控程度，不能布置繁雜的選項(xiàng)造成用戶的操作困擾。用戶不是網(wǎng)頁(yè)設(shè)計(jì)師，對(duì)計(jì)算機(jī)使用經(jīng)驗(yàn)停留在很初級(jí)的階段，再加上不同用戶使用習(xí)慣的不同，稍微復(fù)雜的操作就會(huì)導(dǎo)致用戶的流失。“化繁為簡(jiǎn)”意味著設(shè)計(jì)師應(yīng)該站在對(duì)網(wǎng)頁(yè)原理和操作方式所知甚少的角度進(jìn)行設(shè)計(jì)，減輕用戶操作負(fù)擔(dān)，創(chuàng)造“聰明”的網(wǎng)頁(yè)。

? 統(tǒng)一整體

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，創(chuàng)造統(tǒng)一的風(fēng)格，能夠加深用戶對(duì)網(wǎng)頁(yè)的印象，形成網(wǎng)頁(yè)獨(dú)特的形象。風(fēng)格統(tǒng)一的導(dǎo)航欄，可以更好地引導(dǎo)用戶操作，花最短的時(shí)間找到所需信息。統(tǒng)一的頁(yè)面操作選項(xiàng)，能夠讓用戶在最短的時(shí)間內(nèi)掌握整個(gè)網(wǎng)站的各種功能。如果網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格不統(tǒng)一，會(huì)導(dǎo)致頁(yè)面信息雜亂無章，用戶需要用更多的時(shí)間成本換取信息，甚至可能會(huì)誤導(dǎo)用戶，使用戶進(jìn)行錯(cuò)誤操作。“統(tǒng)一整體”不代表一成不變，在不同的網(wǎng)頁(yè)選項(xiàng)中，可以通過不同的設(shè)計(jì)風(fēng)格來對(duì)它們進(jìn)行區(qū)分，也可以在網(wǎng)頁(yè)改版時(shí)進(jìn)行風(fēng)格的更換，給用戶帶來耳目一新的感覺。

? 合理布局

網(wǎng)頁(yè)設(shè)計(jì)中的布局主要是指欄目、色塊、圖片、文字之間的搭配與協(xié)調(diào)。

合理布局要優(yōu)先保證重要信息的突出、醒目。如圖1-11中，網(wǎng)頁(yè)名稱利用大面積的藍(lán)色進(jìn)行襯托，而文章標(biāo)題加粗加黑，文字部分則采用灰色的字體，能夠給用戶提供一種視覺引導(dǎo)。

合理布局要考慮的除了信息的突出與弱化以外，還有頁(yè)面的配色。色彩在歷史文化中形成了一定的表達(dá)語(yǔ)言。例如，紅色令人感到溫暖，藍(lán)色令人感到平靜，因此，網(wǎng)頁(yè)的配色能夠給用戶帶來最優(yōu)先的視覺沖擊。配色會(huì)令用戶形成先入為主的印象，合理利用顏色，實(shí)現(xiàn)內(nèi)容與形式的協(xié)調(diào)，是合理布局的必要基礎(chǔ)。

合理布局還要求網(wǎng)頁(yè)中圖片與文字的搭配合理，圖像過多意味著文字信息的減少，而文字過多則容易導(dǎo)致閱讀時(shí)的枯燥乏味，合理的圖文配比能夠給頁(yè)面帶來生動(dòng)感以及豐富感。

網(wǎng)頁(yè)視覺設(shè)計(jì)師應(yīng)當(dāng)適應(yīng)當(dāng)下的硬件需求，了解響應(yīng)式設(shè)計(jì)。兼容性高的網(wǎng)站，將擁有更大的用戶群，這是因?yàn)轫憫?yīng)式設(shè)計(jì)能夠節(jié)約打開網(wǎng)頁(yè)的時(shí)間，提升頁(yè)面美觀度，改善用戶體驗(yàn)，最終吸引用戶。

1.2.2 軟件界面設(shè)計(jì)

軟件界面設(shè)計(jì)需要設(shè)計(jì)師掌握一定的手繪能力，同時(shí)擁有較高的審美水平，這里的軟件主要是指桌面級(jí)系統(tǒng)（Mac OS X或者Windows等）的應(yīng)用程序。軟件設(shè)計(jì)的主要流程有5步：需求分析→設(shè)計(jì)分析→調(diào)研驗(yàn)證→方案改進(jìn)→用戶驗(yàn)證反饋。

? 啟動(dòng)頁(yè)設(shè)計(jì)

軟件啟動(dòng)頁(yè)的界面要適應(yīng)各種操作系統(tǒng)，因此在選擇圖片時(shí)，要考慮到圖片在不同屏幕上的顯示效果，并在不同的平臺(tái)上轉(zhuǎn)換不同的格式。

? 框架設(shè)計(jì)

框架設(shè)計(jì)要充分考慮用戶使用習(xí)慣，確定好菜單欄、標(biāo)簽欄、滾動(dòng)條、按鈕的尺寸和位置。作為工具性的軟件界面，要求界面設(shè)計(jì)簡(jiǎn)潔明了，易于操作，這就要求設(shè)計(jì)師必須對(duì)該工具軟件的專業(yè)知識(shí)有所了解。例如車載系統(tǒng)的界面設(shè)計(jì)，要求界面設(shè)計(jì)師對(duì)胎壓、時(shí)速、GPS、交通電臺(tái)等選項(xiàng)和參數(shù)都有所了解，從而在設(shè)計(jì)時(shí)才能更好地迎合用戶的操作習(xí)慣。

? 按鈕設(shè)計(jì)

軟件中的按鈕設(shè)計(jì)應(yīng)該是具有交互性的，能夠及時(shí)表明操作狀態(tài)，例如懸停狀態(tài)、選中狀態(tài)、未選中狀態(tài)等。軟件中的按鈕還應(yīng)該簡(jiǎn)潔且具有指示效果，提示用戶產(chǎn)生功能關(guān)聯(lián)。要采用統(tǒng)一的風(fēng)格進(jìn)行按鈕設(shè)計(jì)，突出提示功能差異較大的按鈕。

? 面板設(shè)計(jì)

操作面板可以采用選項(xiàng)卡的形式設(shè)置各個(gè)功能區(qū)間，并為信息設(shè)置下一級(jí)頁(yè)面，供用戶查看詳情。設(shè)計(jì)“一鍵返回”的按鈕，使用戶能夠直接返回主界面進(jìn)行其他的操作。設(shè)計(jì)時(shí)應(yīng)注意界面操作的流暢性，通過預(yù)判用戶行為，采用信息緩存的形式，減少選項(xiàng)卡切換時(shí)用戶的等待時(shí)間。

? 菜單設(shè)計(jì)

菜單欄的按鈕需要表明用戶所處頁(yè)面，可以設(shè)計(jì)兩種主要狀態(tài)，選中狀態(tài)與未選中狀態(tài)。存在下一級(jí)頁(yè)面時(shí)，要設(shè)置有提示意味的箭頭進(jìn)行用戶操作引導(dǎo)，不同功能區(qū)間則應(yīng)該用線條分割或用大面積色塊區(qū)分。

1.2.3 App界面設(shè)計(jì)

App界面設(shè)計(jì)指的是手機(jī)上的軟件界面設(shè)計(jì)，就是目前大家通常意義上理解的UI設(shè)計(jì)，也是本書重點(diǎn)講解的內(nèi)容。一個(gè)好的App界面設(shè)計(jì)需要在保證用戶體驗(yàn)優(yōu)秀的同時(shí)，視覺上也要美觀，這里的判斷依據(jù)包括交互簡(jiǎn)潔、風(fēng)格新穎、創(chuàng)新、有吸引力、可實(shí)現(xiàn)等。

? 交互簡(jiǎn)潔

交互簡(jiǎn)潔要求設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)，應(yīng)該從典型用戶的角度出發(fā)。在保證設(shè)計(jì)美觀以及傳達(dá)內(nèi)容清晰的前提下，研究用戶操作習(xí)慣，引導(dǎo)用戶情緒，通過視覺設(shè)計(jì)來引導(dǎo)用戶一步步地熟悉產(chǎn)品，讓用戶在使用產(chǎn)品的過程中能輕松找到自己需要的功能點(diǎn)而不至于迷失。同時(shí)要減少用戶學(xué)習(xí)成本，一個(gè)有過多文字說明的App會(huì)減少用戶的耐心。

? 風(fēng)格新穎

在進(jìn)行App界面設(shè)計(jì)時(shí)，很多設(shè)計(jì)師通常會(huì)參考競(jìng)品的設(shè)計(jì)，結(jié)果最終設(shè)計(jì)出的界面與參考對(duì)象非常類似。優(yōu)秀的UI設(shè)計(jì)師需要跳出慣性思維，在滿足功能性的基礎(chǔ)前提下，進(jìn)行視覺上的創(chuàng)新。例如從擬物風(fēng)格到扁平風(fēng)格的創(chuàng)新，去除復(fù)雜的裝飾元素，將功能性、交互提升到比視覺更重要的位置上，就是一次設(shè)計(jì)風(fēng)格和設(shè)計(jì)思維的創(chuàng)新。

如果競(jìng)品采用了純色的界面背景，設(shè)計(jì)師可以考慮如果使用照片或者炫彩的背景是否可以更好地貼合自己的產(chǎn)品等。當(dāng)然，創(chuàng)新需要從產(chǎn)品本身出發(fā)，需要符合產(chǎn)品本身的調(diào)性。另外，視覺風(fēng)格的創(chuàng)新可以幫助產(chǎn)品從大批競(jìng)品中脫穎而出，避免視覺風(fēng)格上的同質(zhì)化。

? 創(chuàng)新

創(chuàng)新不僅僅是指視覺風(fēng)格上的新穎，而是通過一些新的交互手段或者表達(dá)方式，解決用戶在產(chǎn)品使用過程中的實(shí)際問題。界面設(shè)計(jì)的創(chuàng)新可以從易用性、趣味性、效率提升等幾個(gè)方面著手，并且要考慮手機(jī)App的特性來進(jìn)行。

比如說傳統(tǒng)的書籍或者雜志，如果遇到一些需要注釋的段落，需要翻到書或雜志的最后幾頁(yè)，才能看到。而如果做電子書App，我們不需要完全沿用傳統(tǒng)紙質(zhì)書的習(xí)慣，可以在需要注釋的文字或者段落上加下劃線，用戶單擊有下劃線的文字或段落，就可以看到相應(yīng)的注釋，這樣就可以提升閱讀的效率，閱讀體驗(yàn)也會(huì)更佳。

? 有吸引力

有吸引力的第一步就是要在視覺上吸引用戶，可以通過“差異化設(shè)計(jì)”等方式進(jìn)行界面設(shè)計(jì)，巧妙地吸引用戶眼球。但是，視覺上的美觀并不能夠長(zhǎng)久地吸引用戶，在諾曼的《情感化設(shè)計(jì)》一書中提出，只有使用戶與產(chǎn)品產(chǎn)生共鳴才能長(zhǎng)久地維系產(chǎn)品的吸引力，而視覺上的吸引最終會(huì)產(chǎn)生審美疲勞。使用具有情感共鳴的提示語(yǔ)或形象能夠引導(dǎo)用戶產(chǎn)生積極的心理效應(yīng)和情感體驗(yàn)。

? 可實(shí)現(xiàn)性

界面設(shè)計(jì)屬于“設(shè)計(jì)”而非“藝術(shù)”，這意味著我們的設(shè)計(jì)目標(biāo)是商業(yè)性質(zhì)的，設(shè)計(jì)方案是需要落地的。做出來的界面如果技術(shù)上根本不能實(shí)現(xiàn)，或者實(shí)現(xiàn)成本太高，就是不合格的界面。UI設(shè)計(jì)師不僅僅要保證設(shè)計(jì)的視覺質(zhì)量，同時(shí)也需要考慮到開發(fā)人員的實(shí)現(xiàn)能力，因此在進(jìn)行界面設(shè)計(jì)之前，首先需要了解一些前端界面實(shí)現(xiàn)的相關(guān)知識(shí)，例如響應(yīng)式設(shè)計(jì)、移動(dòng)端的單位轉(zhuǎn)換、動(dòng)畫效果的程序解決以及邏輯性等。

1.2.4 游戲界面設(shè)計(jì)

游戲UI與其他幾種UI不同的地方在于，游戲UI更加重視設(shè)計(jì)師的美術(shù)基礎(chǔ)。游戲UI的主要目的是給玩家?guī)沓两降挠螒蝮w驗(yàn)。視覺作為連接虛擬世界和現(xiàn)實(shí)世界的窗口，在其中占有十分重要的戰(zhàn)略地位。游戲UI的設(shè)計(jì)方式主要有兩種，將UI融入游戲和弱化UI，前者對(duì)于設(shè)計(jì)師的手繪功底要求較高，后者對(duì)于交互設(shè)計(jì)的要求較高，要根據(jù)游戲類型判斷選擇何種方式實(shí)現(xiàn)沉浸式體驗(yàn)。

? 將UI融入游戲

對(duì)于游戲界面設(shè)計(jì)來說，最好的UI是讓玩家感覺不到它的存在。通常情況下，游戲玩家不希望通過窗口或是界面來看游戲中的虛擬世界，他們需要的是沉浸式的體驗(yàn)。這意味著我們?cè)谠O(shè)計(jì)時(shí)，要盡可能地將UI與游戲中的虛擬環(huán)境相統(tǒng)一，使UI融入到游戲中去。如果做機(jī)甲戰(zhàn)斗風(fēng)格的游戲，就可以考慮UI采用藍(lán)色半透明的科幻風(fēng)格，出現(xiàn)方式甚至可以搭配電流音效，讓界面與游戲本身更一致；而如果做中世紀(jì)戰(zhàn)棋類游戲，就需要加入金屬、黃金、寶石、錦旗等與時(shí)代更搭配的視覺元素來完成UI設(shè)計(jì)。

? 弱化UI

弱化UI是把UI在界面中的占比減小，可以使用半透明對(duì)話框、細(xì)框界面窗口等，盡可能展示更多的游戲畫面，讓UI對(duì)游戲體驗(yàn)的打擾降低到最小，在一些VR（虛擬現(xiàn)實(shí)）類的游戲中，使用這種UI類型的游戲比較多。