第1章 認(rèn)識(shí)UI圖標(biāo)與UI圖標(biāo)設(shè)計(jì)

1.1 UI圖標(biāo)簡(jiǎn)介

UI即用戶界面（User Interface）的英文縮寫。UI中的圖標(biāo)（Icon）是具有指代意義或標(biāo)識(shí)性質(zhì)的圖形。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面外觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅能讓軟件變得有個(gè)性、有品位，還能讓軟件的操作變得舒適、簡(jiǎn)單、自由，并充分體現(xiàn)軟件的定位和特色。

今天，用戶除了通過文本來獲取軟件的功能信息，更主要的是通過圖標(biāo)來識(shí)別和理解界面。UI圖標(biāo)設(shè)計(jì)就是將一定的含義轉(zhuǎn)化為圖形，或者說把文字語言“翻譯”成圖形語言，來達(dá)到標(biāo)識(shí)數(shù)據(jù)、引導(dǎo)選擇、切換開關(guān)、狀態(tài)指示等目的。UI圖標(biāo)具有高度濃縮并快捷傳達(dá)信息、便于記憶的特點(diǎn)。相比命令語言界面，圖形用戶界面的人機(jī)交互更多依賴于視覺元素，不需要用戶記住系統(tǒng)指令，就可理解界面中圖標(biāo)所代表的含義，大大降低了用戶的記憶負(fù)荷。功能性指令文字的描述通常冗長、長短不一，而圖標(biāo)有著統(tǒng)一的規(guī)格，更節(jié)省屏幕空間，更易于界面布局規(guī)劃。尤其是在掌上設(shè)備中，圖標(biāo)使得屏內(nèi)的人機(jī)信息交換量變大，形式也變得更加豐富，如圖1-1所示。

1.2 UI圖標(biāo)的分類

1.2.1 按功能屬性劃分

UI圖標(biāo)按照其功能屬性劃分，可以分為啟動(dòng)圖標(biāo)和工具欄圖標(biāo)。

1.啟動(dòng)圖標(biāo)

啟動(dòng)圖標(biāo)就是代表產(chǎn)品的象征符號(hào)，用戶單擊圖標(biāo)后可運(yùn)行及打開軟件，如圖1-2所示。啟動(dòng)圖標(biāo)和標(biāo)志設(shè)計(jì)有一定的相似之處，具有產(chǎn)品或者企業(yè)的象征意義。標(biāo)志設(shè)計(jì)則更注重抽象和象征寓意，并更多地從企業(yè)文化視角出發(fā)，強(qiáng)調(diào)寓意的深度。而啟動(dòng)圖標(biāo)的應(yīng)用環(huán)境以電子屏幕為主，講究圖標(biāo)的可用性。

2.工具欄圖標(biāo)

工具欄圖標(biāo)就是對(duì)軟件起到解說和裝飾功能的圖標(biāo)，是文字化解釋的圖標(biāo)化設(shè)計(jì)，用以增強(qiáng)界面設(shè)計(jì)感和用戶體驗(yàn)的趣味性。簡(jiǎn)約、概括、傳達(dá)性是工具欄圖標(biāo)的主要特點(diǎn)，系列化設(shè)計(jì)也是工具欄圖標(biāo)區(qū)別于啟動(dòng)圖標(biāo)的典型特征，如圖1-3所示。

1.2.2 按視覺風(fēng)格劃分

按照視覺風(fēng)格劃分，UI圖標(biāo)可以分為擬物化圖標(biāo)和扁平化圖標(biāo)。

1.擬物化圖標(biāo)

擬物化圖標(biāo)是指圖標(biāo)與實(shí)物在視覺上盡可能地相像，通過造型、質(zhì)感、文理、陰影等效果的運(yùn)用對(duì)實(shí)物進(jìn)行再現(xiàn)，讓人可以一眼就看出圖標(biāo)表現(xiàn)的是什么東西，如圖1-4所示。擬物化設(shè)計(jì)也有一些致命的缺點(diǎn)，例如過分注重外觀，缺乏對(duì)功能的展現(xiàn)。或是將時(shí)間大量花在各種效果的呈現(xiàn)上，忽略了形式美的表現(xiàn)。擬物化設(shè)計(jì)確實(shí)引領(lǐng)過UI設(shè)計(jì)，功不可沒，設(shè)計(jì)師也可以從中得到啟發(fā)，同時(shí)，繪制擬物化圖標(biāo)可以鍛煉設(shè)計(jì)技能，是設(shè)計(jì)師學(xué)習(xí)UI設(shè)計(jì)的必經(jīng)階段。

2.扁平化圖標(biāo)

扁平化圖標(biāo)是指摒棄高光、陰影和透視感的效果，通過抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素來表現(xiàn)功能的圖標(biāo)，如圖1-5所示。扁平化表現(xiàn)極簡(jiǎn)抽象，常見元素包括矩形色塊、大字體、光滑的邊緣，現(xiàn)代感強(qiáng)，讓用戶想去體會(huì)這是什么東西。扁平化圖標(biāo)的交互核心在于功能本身，所以去掉了冗余的界面裝飾。扁平化更加注重造型的形式而摒棄細(xì)枝末節(jié)的設(shè)計(jì)，多以簡(jiǎn)約的線條、形狀、高級(jí)的漸變配色和元素構(gòu)成關(guān)系奪人眼球，簡(jiǎn)約而不簡(jiǎn)單。

1.3 UI圖標(biāo)的釋義方式與感知設(shè)計(jì)

圖標(biāo)的準(zhǔn)確釋義是用戶體驗(yàn)最為重要的衡量標(biāo)準(zhǔn)之一。釋義精準(zhǔn)可以對(duì)軟件的推廣有著巨大的推動(dòng)作用。圖標(biāo)釋義手段可遵循明確釋義、間接釋義與語義疊加三個(gè)原則。通常利用象形圖形、語標(biāo)符號(hào)、表意圖形、抽象符號(hào)、語義疊加等方式來表現(xiàn)富含語義的圖標(biāo)，以及利用圖標(biāo)語義引導(dǎo)用戶行為是圖標(biāo)設(shè)計(jì)的關(guān)鍵點(diǎn)。

1.3.1 明確釋義

明確釋義是指圖形形象直接說明其指代對(duì)象、功能和狀態(tài)等。具體可用象形圖形、語標(biāo)符號(hào)表示。

1.象形圖形

象形圖形是最基本、最典型的處理方式。圖標(biāo)與其所傳達(dá)的含義有直接的、對(duì)應(yīng)的關(guān)系。在表現(xiàn)名詞性程序圖標(biāo)和功能語義時(shí)，采用象形圖形是最直接有效的手段。圖1-6所示為表示日歷、時(shí)間、天氣等名詞性程序的圖標(biāo)。

2.語標(biāo)符號(hào)

語標(biāo)符號(hào)是指蘊(yùn)含特指含義的一個(gè)詞（組）或產(chǎn)品標(biāo)識(shí)（logo）的圖形符號(hào)。程序名稱簡(jiǎn)稱、專業(yè)術(shù)語縮寫、產(chǎn)品logo圖像等均可歸納為語標(biāo)符號(hào)。IE瀏覽器的圖標(biāo)就是借用Explorer這個(gè)單詞的首字母“E”，如圖1-7所示。隨著網(wǎng)絡(luò)語言的普遍流行，用戶都認(rèn)可PS為軟件Photoshop，AI為軟件Illustrator的簡(jiǎn)稱。需要注意的是，這些語標(biāo)符號(hào)需要在用戶達(dá)成共識(shí)的基礎(chǔ)上加以利用，否則容易造成難以釋義的情況。例如，VB、VC可以作為編程語言的縮寫，可以在一些面向?qū)I(yè)人員的軟件界面設(shè)計(jì)中使用，但對(duì)于沒有相關(guān)認(rèn)知的人群，這些縮寫則很難將其釋義傳達(dá)給用戶。

1.3.2 間接釋義

間接釋義是指圖標(biāo)與其所表達(dá)的含義沒有直接的對(duì)應(yīng)關(guān)系，而是通過“意指”“隱喻”“寓意”等知覺類比方式將圖標(biāo)含義轉(zhuǎn)換為視覺圖形。根據(jù)現(xiàn)實(shí)世界已經(jīng)存在的事物為藍(lán)本，將人們對(duì)這些事物的認(rèn)知聯(lián)想運(yùn)用到圖標(biāo)設(shè)計(jì)中，從而減少用戶認(rèn)知的難度。

間接釋義是指導(dǎo)用戶界面設(shè)計(jì)和實(shí)現(xiàn)的通用手段。具體實(shí)施手段可表現(xiàn)為表意圖形和抽象符號(hào)。

1.表意圖形

表意圖形通過隱喻的方式來表述含義。隱喻是以“相似”和“聯(lián)想”為基礎(chǔ)的，即圖標(biāo)圖形與其語義存在的某一相似之處，在轉(zhuǎn)化抽象的動(dòng)詞性文本時(shí)較為有效。如保存文件、設(shè)置、搜索、錄音這些動(dòng)詞性文字，可以通過聯(lián)想、類比等思維方式，將語義關(guān)聯(lián)為動(dòng)作執(zhí)行的對(duì)象或參與物等具象事物的圖形。圖1-8所示為“放大鏡”意為搜索圖標(biāo)。

2.抽象符號(hào)

一些數(shù)學(xué)、邏輯、科學(xué)、音樂、語言中的標(biāo)點(diǎn)符號(hào)都可以作為抽象圖形表示一定的含義。例如，標(biāo)點(diǎn)符號(hào)中的問號(hào)“？”可與問題、答疑、幫助等語義關(guān)聯(lián)起來，如圖1-9所示。圖1-10給出了利用抽象符號(hào)來表示一定含義的圖標(biāo)設(shè)計(jì)案例。注意，有些抽象符號(hào)未必能使用戶快速理解其內(nèi)涵，如代表藍(lán)牙和無線網(wǎng)絡(luò)的圖標(biāo)。但是隨著反復(fù)接觸和視覺強(qiáng)化，用戶已普遍認(rèn)可這些符號(hào)。

圖標(biāo)圖形所表達(dá)出的釋義，必須結(jié)合用戶普遍認(rèn)知、認(rèn)可的心理基礎(chǔ)，其內(nèi)容才能真正被用戶所理解。

3.語義疊加

語義疊加指綜合、交叉運(yùn)用明釋義、暗釋義等釋義手段，傳達(dá)語義更復(fù)雜或語義相似的系列圖標(biāo)含義。在設(shè)計(jì)一系列含義接近的圖標(biāo)時(shí)，可以組合一些已有的基礎(chǔ)圖標(biāo)來得到含義更為豐富的圖標(biāo)。報(bào)紙可以作為與新聞?dòng)嘘P(guān)的圖標(biāo)來使用，但是，當(dāng)要設(shè)計(jì)更細(xì)分的國內(nèi)新聞與國際新聞的圖標(biāo)時(shí)，單一的具象圖形很難表示到位，如圖1-11所示。

1.3.3 UI圖標(biāo)的感知與情感化設(shè)計(jì)

UI圖標(biāo)包括系統(tǒng)圖標(biāo)和應(yīng)用圖標(biāo)，其表現(xiàn)形態(tài)有圖形表現(xiàn)、文字表述、圖形和文字相結(jié)合3種形式。從符號(hào)學(xué)的視角看，圖標(biāo)與界面的關(guān)系，即符號(hào)與符號(hào)、符號(hào)與背景之間的關(guān)系，不再是以往單純圖與底的關(guān)系，而是具有某種內(nèi)在聯(lián)系。界面中的圖標(biāo)不僅是單純的圖形化視覺符號(hào)，更是界面的情感傳達(dá)方式。這種具有情感化特征的符號(hào)學(xué)圖標(biāo)，代替了傳統(tǒng)紙質(zhì)圖文說明的形式，引導(dǎo)用戶在操作過程中正確應(yīng)用各種App軟件，具有較強(qiáng)的親和力。具有情感化的圖標(biāo)交互設(shè)計(jì)以人們的行為習(xí)慣作為人機(jī)交互設(shè)計(jì)的突破點(diǎn)，將圖標(biāo)設(shè)計(jì)為日常生活中常見、常用且直觀和表象化的圖形，讓用戶在體驗(yàn)、參與交互設(shè)計(jì)時(shí)身心愉悅，從而滿足使用者的情感需求。人類的感知系統(tǒng)主要分為聽覺、味覺、視覺、觸覺、味覺，而其中視覺系統(tǒng)最為重要。界面產(chǎn)品的設(shè)計(jì)主要依靠的是用戶利用“視覺刺激思維和人機(jī)交互處理模型”來達(dá)到人機(jī)互動(dòng)從而達(dá)到傳遞或獲取信息的結(jié)果，如圖1-12所示。

視覺設(shè)計(jì)是在UI設(shè)計(jì)中可用性和交互設(shè)計(jì)研究的綜合體現(xiàn)。視覺思維是感知與思維、藝術(shù)與科學(xué)的結(jié)合，能將人類本能的視覺感知、圖形設(shè)計(jì)以及視覺可視化聯(lián)系起來。在達(dá)到使用功能設(shè)計(jì)的基礎(chǔ)上，現(xiàn)代GUI設(shè)計(jì)已經(jīng)成為輔助交互，滿足用戶感知需求、審美需求的和自我實(shí)現(xiàn)需求的功能性的視覺設(shè)計(jì)。用戶交互體驗(yàn)設(shè)計(jì)與UI設(shè)計(jì)是以用戶為中心的設(shè)計(jì)，是認(rèn)知科學(xué)學(xué)會(huì)發(fā)起人之一唐納德·亞瑟·諾曼（Donald Arthur Norman）所創(chuàng)立的研究室首創(chuàng)的。設(shè)計(jì)來源于用戶的任務(wù)、目標(biāo)與環(huán)境，整個(gè)設(shè)計(jì)過程的重點(diǎn)是對(duì)目標(biāo)用戶的全面理解，并且使其參與從開始到結(jié)束的整個(gè)設(shè)計(jì)過程中去。用戶使用產(chǎn)品的感受反饋給設(shè)計(jì)開發(fā)商，設(shè)計(jì)開發(fā)商根據(jù)用戶的交互體驗(yàn)感受對(duì)設(shè)計(jì)進(jìn)行改良，如此的設(shè)計(jì)關(guān)系被業(yè)內(nèi)稱之為“螺旋式迭代設(shè)計(jì)關(guān)系”，如圖1-13所示。

這種關(guān)系讓需求與設(shè)計(jì)更加深入和細(xì)致，通過這樣的交互體驗(yàn)設(shè)計(jì)方式，我們很容易得到目標(biāo)用戶對(duì)產(chǎn)品的直接感受，也可以節(jié)約研究評(píng)估的成本，更具有較佳的客觀性。我們知道，最初的許多需求往往只是一紙說明，但是對(duì)于那些需要視覺任務(wù)分析的設(shè)計(jì)項(xiàng)目來說，“螺旋式迭代設(shè)計(jì)關(guān)系”能夠帶來需求與設(shè)計(jì)的良性循環(huán)，使設(shè)計(jì)更加符合用戶需求。

1.3.4 視覺思維在UI設(shè)計(jì)中的涉及范圍

視覺思維在UI設(shè)計(jì)中的涉及面較為廣泛，包括了UI設(shè)計(jì)的整體設(shè)計(jì)風(fēng)格及構(gòu)圖、圖形語言、色彩因素、視覺層級(jí)關(guān)系設(shè)計(jì)和交互動(dòng)畫設(shè)計(jì)5方面內(nèi)容，如圖1-14所示。

通過視覺思維在UI設(shè)計(jì)中所涉及的方方面面與交互設(shè)計(jì)互相配合、融合應(yīng)用，卓越的UI設(shè)計(jì)才能為用戶提供更完美的交互體驗(yàn)。采用視覺思維導(dǎo)向的UI設(shè)計(jì)，能夠幫助系統(tǒng)提高實(shí)用性與可用性，從而提高用戶的使用效率。

1.4 UI圖標(biāo)設(shè)計(jì)原則與制作流程

好的UI圖標(biāo)設(shè)計(jì)，可以提高軟件的普及程度與用戶的認(rèn)知速度。作為界面設(shè)計(jì)的關(guān)鍵部分，圖標(biāo)在人機(jī)交互設(shè)計(jì)中無所不在。隨著人們對(duì)審美、時(shí)尚、趣味的不斷追求，圖標(biāo)設(shè)計(jì)也不斷翻新花樣，越來越多精美、新穎、富有創(chuàng)造力和想象力的圖標(biāo)充斥著我們的視界。可是，從可用性的角度講，并不是越花哨的圖標(biāo)越被用戶所接受，圖標(biāo)的可用性要回歸它的基本功能。圖標(biāo)的功能在于建立起計(jì)算機(jī)世界對(duì)真實(shí)世界的隱喻或者映射關(guān)系。用戶通過這種隱喻，自然地理解圖標(biāo)背后的意義。但是，如果這種映射關(guān)系不能被用戶輕松并且準(zhǔn)確地理解，那么這種圖標(biāo)就不是好的圖標(biāo)。因此，圖標(biāo)的設(shè)計(jì)應(yīng)該遵守以下原則。

1.4.1 易用性原則

綜合當(dāng)前對(duì)現(xiàn)有主要UI設(shè)計(jì)的分析，“以用戶為中心”是整個(gè)設(shè)計(jì)的基本理念。UI產(chǎn)品首先要保證產(chǎn)品可用性，“以用戶為中心”的理念衍射出易用性原則。在易用性原則之下，通過對(duì)用戶視覺規(guī)律、交互習(xí)慣的規(guī)律應(yīng)用，來保證產(chǎn)品的可行性。以用戶為中心的開發(fā)設(shè)計(jì)理念如圖1-15所示。

1.4.2 邏輯性原則

邏輯性體現(xiàn)了產(chǎn)品的交互思維，交互思維繼而影響用戶的操作思維。新產(chǎn)品的革新不能與之前的同類產(chǎn)品出現(xiàn)斷層，邏輯性的轉(zhuǎn)變需要一個(gè)過渡，所以新產(chǎn)品依然要遵循前代產(chǎn)品的邏輯性。

1.4.3 情感性原則

“以用戶為中心”理念的最早期原則便是將冷漠的機(jī)器賦予情感，理念和擬物化設(shè)計(jì)就此誕生。情感化看似不重要，但是在產(chǎn)品品牌競(jìng)爭(zhēng)中確實(shí)是一把利劍，情感化設(shè)計(jì)可以連同設(shè)計(jì)質(zhì)量增強(qiáng)對(duì)用戶的吸引力。所以，在不影響易用性的基礎(chǔ)上增加趣味性可以讓用戶對(duì)產(chǎn)品產(chǎn)生依賴感。

1.4.4 直觀性原則

直觀性原則之前多應(yīng)用于類界面設(shè)計(jì)，如網(wǎng)頁信息的展示。直觀性原則解決的是如何讓用戶更加直接地理解，所以直觀性設(shè)計(jì)意在縮短用戶與信息之間的交互距離。直觀性產(chǎn)品UI設(shè)計(jì)中的模塊化設(shè)計(jì)便是最典型的直觀性產(chǎn)品設(shè)計(jì)。

1.4.5 美觀性原則

審美理想、審美欲望、審美追求是人與生俱來的，所以美觀性也是“以用戶為中心”的設(shè)計(jì)理念的衍生原則。美的外在與實(shí)用的功能同等重要。著名藝術(shù)評(píng)論家約翰·拉斯金曾說過“生命無視實(shí)業(yè)是罪孽，實(shí)業(yè)無美術(shù)是獸性”。美的設(shè)計(jì)不僅僅滿足了用戶的審美需求，還可以提升產(chǎn)品的品質(zhì)與情感。

1.5 UI圖標(biāo)的設(shè)計(jì)要素

1.5.1 形態(tài)設(shè)計(jì)

“形態(tài)設(shè)計(jì)”是塑造圖標(biāo)形象的一個(gè)重要方面。“形”是圖標(biāo)的物質(zhì)形體，是指圖標(biāo)的外形；“態(tài)”則指圖標(biāo)可感覺的外觀形狀和神態(tài)，也可理解為圖標(biāo)外觀的表情因素。形態(tài)是塑造UI可視形象，與用戶進(jìn)行視覺交流的最直接、最重要的信息載體。同時(shí)，形態(tài)是信息的載體，設(shè)計(jì)師通常利用特有的造型語言進(jìn)行圖標(biāo)的形態(tài)設(shè)計(jì)，如圖1-16所示。利用圖標(biāo)特有形態(tài)向外界傳達(dá)出設(shè)計(jì)師的思想和理念，用戶在選購產(chǎn)品時(shí)也是通過圖標(biāo)形態(tài)所表達(dá)出某種信息內(nèi)容來判斷和衡量與其內(nèi)心所希望的是否一致，并最終做出判斷。

形態(tài)承載著產(chǎn)品的諸多信息，在UI圖標(biāo)設(shè)計(jì)過程中，設(shè)計(jì)師借助特殊的造型展開形態(tài)設(shè)計(jì)，通過特殊的形態(tài)實(shí)現(xiàn)設(shè)計(jì)師理念與思想的傳遞。設(shè)計(jì)師通常利用特有的設(shè)計(jì)語言——例如點(diǎn)、線、形、尺度、形狀、比例及其相互之間的構(gòu)成關(guān)系操控、形體的分割與組合等—進(jìn)行產(chǎn)品的形態(tài)設(shè)計(jì)，傳遞設(shè)計(jì)師的創(chuàng)意理念與思想。

1.5.2 色彩設(shè)計(jì)

色彩是最抽象化的語言，作為首要的視覺審美要素，色彩深刻地影響著人們的視覺感受和心理情緒。色彩設(shè)計(jì)在UI圖標(biāo)設(shè)計(jì)中處于十分重要的位置，承擔(dān)著重要的信息傳達(dá)任務(wù)，是塑造形象的關(guān)鍵。人類對(duì)色彩的感覺最強(qiáng)烈、最直接，印象也最深刻。色彩屬于抽象化的語言，它是視覺審美要素中的一種，利用色彩能夠引導(dǎo)用戶的心理情緒與視覺感受，因此，對(duì)于用戶而言，色彩對(duì)其影響是直接的、強(qiáng)烈的，進(jìn)而將使用戶對(duì)產(chǎn)品的印象更加深刻。同時(shí)，色彩具有較強(qiáng)的敏感性，還擁有一定的象征意義，對(duì)于用戶的影響是深遠(yuǎn)的。色彩對(duì)產(chǎn)品意境的形成有很重要的作用，在設(shè)計(jì)中色彩與具體的形、質(zhì)結(jié)合，才能使產(chǎn)品更具生命力。

從色彩的視覺心理角度分析，色彩相對(duì)于形和質(zhì)來說更感性，它的象征作用和對(duì)用戶情感的影響力遠(yuǎn)大于形和質(zhì)。物體的形狀、空間的界限和區(qū)別等，都是通過色彩和明暗關(guān)系來反映的，人們必須借助于色彩才能認(rèn)識(shí)世界、改造世界。因此，色彩在人們的社會(huì)生產(chǎn)、生活中具有十分重要的識(shí)別功能。色彩鮮活的圖標(biāo)設(shè)計(jì)如圖1-17所示。

1.5.3 材質(zhì)設(shè)計(jì)

材質(zhì)是構(gòu)成產(chǎn)品的基本要素，如果沒有材質(zhì)，產(chǎn)品也就無從談起。一方面，材質(zhì)保證了產(chǎn)品的使用功能；另一方面，材質(zhì)成為直接被用戶視及和觸及的對(duì)象，其外部形態(tài)與表面紋理、質(zhì)感等視、觸覺要素都直觀地表達(dá)了產(chǎn)品形象。

材質(zhì)設(shè)計(jì)作為基本的要素構(gòu)成了產(chǎn)品。用戶接觸產(chǎn)品時(shí)，主要接觸的對(duì)象便是產(chǎn)品的材質(zhì)，如表面紋理與外部形態(tài)等，此時(shí)的質(zhì)感直接傳遞著產(chǎn)品的形象。通過產(chǎn)品材質(zhì)，用戶可以了解產(chǎn)品的屬性，如自然屬性、社會(huì)屬性與科技屬性等。UI圖標(biāo)的材質(zhì)效果如圖1-18所示。

1.6 UI圖標(biāo)設(shè)計(jì)流程

1.6.1 第一階段——圖標(biāo)創(chuàng)意

根據(jù)項(xiàng)目需求確定圖標(biāo)的風(fēng)格。在設(shè)計(jì)UI圖標(biāo)的初始階段，常用“風(fēng)格評(píng)測(cè)”的方法來確定圖標(biāo)設(shè)計(jì)項(xiàng)目的風(fēng)格路線，這也是項(xiàng)目前期用戶研究的結(jié)果。當(dāng)我們接到設(shè)計(jì)任務(wù)后，怎么開始設(shè)計(jì)圖標(biāo)呢？首先我們要看懂需求，對(duì)每個(gè)功能圖標(biāo)的定義要非常清楚，否則我們?cè)O(shè)計(jì)的結(jié)果將導(dǎo)致用戶難以理解，這也是圖標(biāo)設(shè)計(jì)所涉及的可用性問題。理解功能需求后，我們要收集很多關(guān)于“詞語→圖形”之間能轉(zhuǎn)化的元素，用生活中的事物或其他視覺產(chǎn)品來代替所要表達(dá)的功能信息或操作提示。

1.6.2 第二階段——繪制圖標(biāo)草圖

這個(gè)階段就是把創(chuàng)意繪制出來，檢驗(yàn)視覺關(guān)系，也就是在視覺方面多在草圖上推敲，這樣效率較高，避免在渲染之后后悔。首先要確定圖標(biāo)透視，這關(guān)系到一套方案中的每個(gè)圖標(biāo)的透視方向，是在圖標(biāo)設(shè)計(jì)一致性方面的基本要求，首先做到透視統(tǒng)一，然后一步步添加細(xì)節(jié)。圖標(biāo)設(shè)計(jì)草圖如圖1-19所示。

1.6.3 第三階段——草圖制作與渲染

為恰當(dāng)?shù)慕缑嬖O(shè)計(jì)任務(wù)制作恰當(dāng)?shù)膱D標(biāo)小部件，不但可以增強(qiáng)應(yīng)用軟件界面風(fēng)格的一致性，同時(shí)也可以使得應(yīng)用軟件很容易構(gòu)造。將草圖繪制成可以應(yīng)用的圖標(biāo)，需要相關(guān)制作軟件的幫助。圖標(biāo)之間的“視覺差異對(duì)比”要比文本更強(qiáng)，這樣有利于用戶更快地定位到所需要的內(nèi)容，提高視覺目標(biāo)搜索的效率。雖然不同文化對(duì)某一圖形含義的理解可能存有差異，但是圖形符號(hào)還是比文字更加通用。對(duì)于UI界面設(shè)計(jì)而言，利用圖標(biāo)更易于避免文字翻譯的缺陷。同時(shí)，圖標(biāo)也可有效降低因開發(fā)不同語言版本的成本。計(jì)算機(jī)制作及渲染效果如圖1-20所示。

1.6.4 UI設(shè)計(jì)流程及制作軟件

在現(xiàn)有的UI設(shè)計(jì)流程中，通常包含下面4個(gè)角色：產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師以及用戶研究分析師。在一個(gè)完整的UI設(shè)計(jì)流程中，他們各自承擔(dān)著不同的角色，相互協(xié)作，完成流程中的工作。現(xiàn)有UI設(shè)計(jì)流程的分工，其最終目的，就是通過不同專業(yè)、不同職責(zé)的設(shè)計(jì)角色使用其專業(yè)技能，合力打造一款優(yōu)秀的產(chǎn)品，創(chuàng)造最大的產(chǎn)品價(jià)值。UI設(shè)計(jì)流程如圖1-21所示。

1.產(chǎn)品概念設(shè)計(jì)階段

在這個(gè)階段，主要由產(chǎn)品經(jīng)理負(fù)責(zé)。產(chǎn)品經(jīng)理在這個(gè)階段需要根據(jù)市場(chǎng)情況、競(jìng)爭(zhēng)產(chǎn)品的狀態(tài)以及自身公司的戰(zhàn)略發(fā)展目標(biāo)，對(duì)產(chǎn)品進(jìn)行概念設(shè)計(jì)。通常情況下，在這個(gè)階段產(chǎn)品經(jīng)理需要輸出產(chǎn)品設(shè)計(jì)初稿。在產(chǎn)品設(shè)計(jì)初稿中，產(chǎn)品設(shè)計(jì)的理念被表達(dá)出來，它不需要像交互設(shè)計(jì)師那樣制作非常精確的UI布局，也不需要設(shè)定人機(jī)交互規(guī)范，只需要表達(dá)出產(chǎn)品經(jīng)理的產(chǎn)品意圖即可。UI設(shè)計(jì)初稿如圖1-22所示。

2.UI交互設(shè)計(jì)階段

在產(chǎn)品概念設(shè)計(jì)通過評(píng)審后，就會(huì)進(jìn)入產(chǎn)品的UI交互設(shè)計(jì)階段。UI交互設(shè)計(jì)階段需要融合兩方面的元素，一方面是產(chǎn)品的功能，另一方面是產(chǎn)品所屬平臺(tái)的可用性和人機(jī)交互的規(guī)范性。UI交互設(shè)計(jì)師需要將這兩方面元素融入產(chǎn)品的UI設(shè)計(jì)稿中，產(chǎn)品可用性的優(yōu)劣通常都在這個(gè)階段體現(xiàn)出來。UI交互設(shè)計(jì)層級(jí)如圖1-23所示。

3.UI視覺設(shè)計(jì)階段

在交互設(shè)計(jì)師完成UI交互設(shè)計(jì)后，輸出UI交互設(shè)計(jì)圖。視覺設(shè)計(jì)師開始工作，設(shè)定視覺風(fēng)格，輸出視覺定稿，交付給整個(gè)設(shè)計(jì)團(tuán)隊(duì)進(jìn)行評(píng)審。在評(píng)審確認(rèn)視覺定稿后，再輸出視覺切圖，給到開發(fā)人員進(jìn)行開發(fā)，來完成樣稿（Demo）或者正式的產(chǎn)品。視覺設(shè)計(jì)師在這個(gè)階段給予產(chǎn)品最為重要的特性——色彩。因此，對(duì)于在用戶可以看到的產(chǎn)品層面上，幾乎都是由視覺設(shè)計(jì)師完成的。視覺設(shè)計(jì)完成稿如圖1-24所示。

4.用戶研究分析階段

在這個(gè)階段中，用戶研究分析師們會(huì)利用上個(gè)階段輸出的Demo，約談?dòng)脩簦蛘呤褂脝柧淼男问剑瑏碛涗浻脩舻姆答亙?nèi)容。通過這個(gè)環(huán)節(jié)，用戶對(duì)產(chǎn)品的一些疑問將被收集起來，一并反饋給產(chǎn)品UI設(shè)計(jì)團(tuán)隊(duì)。

1.6.5 UI設(shè)計(jì)職位與分工

1.產(chǎn)品經(jīng)理

在整個(gè)UI設(shè)計(jì)的流程中，產(chǎn)品設(shè)計(jì)概念最初來源于產(chǎn)品經(jīng)理。在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，他們需要考慮目標(biāo)用戶特征、競(jìng)爭(zhēng)產(chǎn)品、產(chǎn)品是否符合公司的業(yè)務(wù)模式等諸多因素。產(chǎn)品經(jīng)理設(shè)計(jì)出來的產(chǎn)品理念，通常比較粗糙，只考慮到功能點(diǎn)，還未考慮到具體的人機(jī)交互。當(dāng)他們完成產(chǎn)品的初稿后，就會(huì)轉(zhuǎn)交給交互設(shè)計(jì)師進(jìn)行人機(jī)交互規(guī)范的設(shè)計(jì)。

好的產(chǎn)品設(shè)計(jì)理念既要滿足用戶的需求，也要為公司帶來較好的盈利，符合公司短期或者長期發(fā)展的戰(zhàn)略目標(biāo)。一般而言，產(chǎn)品經(jīng)理管理的是一個(gè)或者多個(gè)有形產(chǎn)品。但是，產(chǎn)品經(jīng)理也可以用于描述管理無形產(chǎn)品，如音樂、信息和服務(wù)的人。有形產(chǎn)品行業(yè)產(chǎn)品經(jīng)理的角色與服務(wù)業(yè)中的項(xiàng)目總監(jiān)類似。

2.交互設(shè)計(jì)師

交互設(shè)計(jì)師的主要工作就是將產(chǎn)品經(jīng)理的產(chǎn)品設(shè)計(jì)圖，通過專業(yè)的人機(jī)交互技術(shù)，重新設(shè)計(jì)布局，讓UI設(shè)計(jì)更加符合用戶習(xí)慣。同時(shí)，交互設(shè)計(jì)師也會(huì)對(duì)產(chǎn)品進(jìn)行行為設(shè)計(jì)。行為設(shè)計(jì)是指各種用戶操作后的效果設(shè)計(jì)，例如按鈕按下后的表現(xiàn)形式應(yīng)該是怎樣的，這些UI行為都需要設(shè)計(jì)行為。產(chǎn)品經(jīng)理和交互設(shè)計(jì)師負(fù)責(zé)產(chǎn)品初期的交互行為，因?yàn)樗麄兊墓ぷ鹘?jīng)過抽象后有相似的設(shè)計(jì)需求，因此歸類為一個(gè)角色，后續(xù)將統(tǒng)一為交互設(shè)計(jì)師角色。

3.視覺設(shè)計(jì)師

如果將交互設(shè)計(jì)師比喻為賦予UI骨骼和行動(dòng)的工程師的話，那么視覺設(shè)計(jì)師則是為UI設(shè)計(jì)生命色彩和個(gè)性的偉大創(chuàng)造者。視覺設(shè)計(jì)師通過UI交互稿進(jìn)行色彩、尺寸、間距等控件的設(shè)計(jì)，為產(chǎn)品帶來生命力，最終輸出視覺設(shè)計(jì)稿。視覺稿就是視覺設(shè)計(jì)師對(duì)UI交互稿進(jìn)行視覺美化的成果。UI交互稿在設(shè)計(jì)時(shí)，是完全不考慮色彩搭配的，只考慮人機(jī)交互的邏輯，而視覺稿，更多的是去定義UI的尺寸和色彩，給軟件產(chǎn)品注入生命色彩。

4.用戶研究分析師

用戶研究分析師負(fù)責(zé)驗(yàn)證產(chǎn)品設(shè)計(jì)是否符合用戶的使用需求。通過使用軟件原型，用戶研究分析師們可以找到軟件產(chǎn)品存在的設(shè)計(jì)缺陷。如UI按鈕位置不符合用戶預(yù)期，文字提醒沒有滿足用戶認(rèn)知，UI色彩過于鮮艷等問題，都需要用戶研究分析師通過研究的手段，反饋給設(shè)計(jì)團(tuán)隊(duì)進(jìn)行優(yōu)化。