移動(dòng)UI交互設(shè)計(jì)課件

1、01 UI 設(shè)計(jì)概述 移動(dòng)UI交互設(shè)計(jì)1.1 UI 設(shè)計(jì)的概念1.2 UI 設(shè)計(jì)的流程1.3 UI 設(shè)計(jì)的規(guī)范目錄 CONTENTS1.1UI 設(shè)計(jì)的概念UI 是“User Interface”的縮寫(xiě)，譯為用戶(hù)界面。UI 設(shè)計(jì)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI 設(shè)計(jì)現(xiàn)已成為屏幕產(chǎn)品（包括能在計(jì)算機(jī)、手機(jī)、Pad 等設(shè)備上運(yùn)行的各種產(chǎn)品）的重要組成部分。1.1UI 設(shè)計(jì)的概念從事UI設(shè)計(jì)工作的人稱(chēng)為UI設(shè)計(jì)師，主要負(fù)責(zé)以下工作。軟件界面的美術(shù)設(shè)計(jì)、創(chuàng)意和制作工作。根據(jù)各種相關(guān)軟件的用戶(hù)群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計(jì)。對(duì)頁(yè)面進(jìn)行優(yōu)化，使用戶(hù)操作更趨于人性化。維護(hù)現(xiàn)有

2、的應(yīng)用產(chǎn)品。收集和分析用戶(hù)對(duì)于GUI的需求。1.1 UI 設(shè)計(jì)的概念1.2 UI 設(shè)計(jì)的流程1.3 UI 設(shè)計(jì)的規(guī)范目錄 CONTENTS1.2UI 設(shè)計(jì)的流程UI 設(shè)計(jì)不光要研究產(chǎn)品的外形、圖形界面，還要研究產(chǎn)品的交互設(shè)計(jì)，并且確立交互模型、交互規(guī)范，同時(shí)要測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性等。也就是說(shuō)，UI設(shè)計(jì)包括了界面設(shè)計(jì)、交互設(shè)計(jì)與用戶(hù)研究3個(gè)部分。因此，UI設(shè)計(jì)師的基本工作流程可以分為以下幾個(gè)階段。1.2.1 需求分析階段需求分析階段主要是分析產(chǎn)品用戶(hù)的需求及同類(lèi)產(chǎn)品的優(yōu)、缺點(diǎn)。產(chǎn)品用戶(hù)的需求包括產(chǎn)品的使用者、使用環(huán)境及使用方式的需求，如面對(duì)兒童開(kāi)發(fā)的產(chǎn)品和面對(duì)家長(zhǎng)開(kāi)發(fā)的產(chǎn)品就是

3、完全不同的兩個(gè)概念，電腦上使用的軟件和手機(jī)上使用的軟件就不能使用同一款設(shè)計(jì)等。也有人將需求分析總結(jié)為3W，即Who、Where、Why，也就是什么人用、在什么地方用、為什么用，其中任何一個(gè)元素發(fā)生改變，結(jié)果都會(huì)有相應(yīng)的改變。所謂“知己知彼、百戰(zhàn)百勝”，要設(shè)計(jì)一個(gè)產(chǎn)品的UI，了解同類(lèi)產(chǎn)品的優(yōu)勢(shì)和不足是非常重要的。例如，我們要設(shè)計(jì)一款用于網(wǎng)上聊天的軟件，就可以將QQ、微信、易信等同類(lèi)產(chǎn)品進(jìn)行調(diào)研，總結(jié)出各款產(chǎn)品的特點(diǎn)，找到自己設(shè)計(jì)的切入點(diǎn)。當(dāng)然，適合于最終用戶(hù)的設(shè)計(jì)才是最好的設(shè)計(jì)。1.2.2 設(shè)計(jì)制作階段在需求分析的基礎(chǔ)上，我們進(jìn)入設(shè)計(jì)制作階段。設(shè)計(jì)包括界面設(shè)計(jì)和交互設(shè)計(jì)，且要形成設(shè)計(jì)方案。界面設(shè)

4、計(jì)當(dāng)然以美觀為主，要有創(chuàng)新，在同類(lèi)產(chǎn)品中能夠脫穎而出。界面設(shè)計(jì)包括啟動(dòng)界面、主界面、詳情界面等代表性界面的設(shè)計(jì)。交互設(shè)計(jì)要分析產(chǎn)品必需的功能、內(nèi)容，根據(jù)需要制作低保真模型或高保真模型，也可通過(guò)原型工具來(lái)規(guī)劃流程。如果有條件的話(huà)，可以在設(shè)計(jì)時(shí)，多設(shè)計(jì)出幾套不同風(fēng)格的方案用于備選。如右圖所示。1.2.3 方案修改階段設(shè)計(jì)方案提交給客戶(hù)后，需要與客戶(hù)進(jìn)行溝通，根據(jù)客戶(hù)的需求來(lái)修改設(shè)計(jì)。我們?cè)诒M量滿(mǎn)足客戶(hù)要求的基礎(chǔ)上，也要考慮其要求的功能或技術(shù)是否可行。例如，有些客戶(hù)的修改意見(jiàn)，在方案規(guī)定時(shí)間內(nèi)是難以完成的。可能完成時(shí)間需要3 個(gè)月，但是最后客戶(hù)卻要求在2 個(gè)月內(nèi)交稿，這時(shí)這些功能就可以待產(chǎn)品下次改版

5、或升級(jí)時(shí)再實(shí)現(xiàn)。1.2.4 測(cè)試改進(jìn)階段在設(shè)計(jì)方案通過(guò)并交付以后，就可以將產(chǎn)品推向市場(chǎng)了。但是設(shè)計(jì)并沒(méi)有結(jié)束，我們還需要跟蹤了解用戶(hù)的測(cè)試與反饋。好的設(shè)計(jì)師應(yīng)該在產(chǎn)品上市以后主動(dòng)接近市場(chǎng)，在第一線(xiàn)零距離接觸最終用戶(hù)，了解用戶(hù)實(shí)際使用時(shí)的感想，為以后升級(jí)版本積累經(jīng)驗(yàn)。1.1 UI 設(shè)計(jì)的概念1.2 UI 設(shè)計(jì)的流程1.3 UI 設(shè)計(jì)的規(guī)范目錄 CONTENTS1.3UI 設(shè)計(jì)的規(guī)范在進(jìn)行產(chǎn)品的UI設(shè)計(jì)時(shí)，要遵循統(tǒng)一的規(guī)范，讓用戶(hù)使用起來(lái)有統(tǒng)一感，不覺(jué)得混亂；同時(shí)，還要建立起精確的心理模型，使用戶(hù)對(duì)一個(gè)界面使用熟練后，切換到另外一個(gè)界面也能輕松地推測(cè)出各種功能。一般在進(jìn)行UI 設(shè)計(jì)時(shí)，會(huì)由項(xiàng)目組有

6、經(jīng)驗(yàn)的人士或是項(xiàng)目經(jīng)理確立UI 規(guī)范，從而使所有參與人員了解規(guī)范，降低時(shí)間成本和培訓(xùn)成本。1.3.1 用戶(hù)控制原則UI 設(shè)計(jì)的一個(gè)重要原則是永遠(yuǎn)以用戶(hù)體驗(yàn)為中心。（1）操作上要讓用戶(hù)扮演主動(dòng)角色，在需要自動(dòng)執(zhí)行任務(wù)時(shí)，要以允許用戶(hù)進(jìn)行選擇或控制它的方式來(lái)實(shí)現(xiàn)該自動(dòng)任務(wù)。（2）要提供用戶(hù)自定義設(shè)置。每個(gè)用戶(hù)的需求和喜好不一樣，要使產(chǎn)品滿(mǎn)足不同用戶(hù)的個(gè)性需求，就要為用戶(hù)提供類(lèi)似于顏色、字體或其他選項(xiàng)的設(shè)置。（3）要讓用戶(hù)感覺(jué)自己是聰明的，對(duì)于軟件的操作是順利的、易于理解的。同時(shí)，出錯(cuò)界面要友好，讓用戶(hù)對(duì)產(chǎn)品有好感。1.3.2 一致性原則在同一款產(chǎn)品中，要使用一致的外觀、字體、手勢(shì)、命令等來(lái)展示同樣

7、的功能或信息。外觀：一致的外觀使用戶(hù)界面更易于理解和使用，界面上的控件看起來(lái)應(yīng)該是一致的。手勢(shì)：在手機(jī)或Pad 程序中，通常會(huì)用手勢(shì)進(jìn)行操作，如放大/ 縮小、快進(jìn)/ 快退、音量等手勢(shì)控制應(yīng)保持一致，從而帶給用戶(hù)好的使用體驗(yàn)。字體：保持字體及顏色一致，避免一套主題出現(xiàn)多個(gè)字體，我們可以用不同的字號(hào)來(lái)顯示內(nèi)容的層級(jí)關(guān)系。對(duì)于不可修改的字段，最好統(tǒng)一用灰色文字顯示。命令：要使用同樣的命令來(lái)執(zhí)行對(duì)于用戶(hù)來(lái)說(shuō)相似的功能。1.3.2 一致性原則如右圖所示的3個(gè)界面就很好地體現(xiàn)了一致性原則，其主要的顏色、分割的線(xiàn)條、使用的字體等視覺(jué)元素都是一致的。1.3.3 簡(jiǎn)單美觀原則任何產(chǎn)品或程序的UI 設(shè)計(jì)都應(yīng)該是簡(jiǎn)

8、單、易于掌握和使用的。支持簡(jiǎn)單性的一種方法就是將信息減到最少，只要能夠進(jìn)行正確交互即可。例如，在開(kāi)發(fā)一個(gè)運(yùn)行在手機(jī)上的播放器程序時(shí)，可以將提示信息簡(jiǎn)化，借助手勢(shì)圖和方向箭頭來(lái)表示，加以簡(jiǎn)單的文字說(shuō)明，就可很好地展示出使用信息，也可使用戶(hù)在最短的時(shí)間內(nèi)掌握使用該程序的方法。1.3.3 簡(jiǎn)單美觀原則美觀是UI 設(shè)計(jì)的重要因素，不論是在何種設(shè)備上運(yùn)行的程序，美觀與否是用戶(hù)對(duì)程序的第一印象。出現(xiàn)在界面上的每一個(gè)視覺(jué)元素都很重要，圖形的創(chuàng)意、顏色的運(yùn)用、可視化設(shè)計(jì)的技巧都是構(gòu)成美觀的界面必不可少的要素，它們互相搭配，共同提升用戶(hù)的視覺(jué)體驗(yàn)，提高用戶(hù)的使用滿(mǎn)意度。1.3.4 布局合理原則布局的合理化包括很

9、多方面，具體如下。（1）要遵循用戶(hù)從上而下、自左向右的瀏覽、操作習(xí)慣。（2）要注意將用戶(hù)常用的功能按鈕排列緊密，不要過(guò)于分散，以避免造成用戶(hù)手指移動(dòng)距離過(guò)長(zhǎng)的弊端。（3）確認(rèn)按鈕一般會(huì)放置在頁(yè)面左邊，取消或關(guān)閉按鈕一般放置于頁(yè)面右邊。（4）所有文字內(nèi)容和控件元素避免貼近頁(yè)面邊緣。（5）頁(yè)面布局設(shè)計(jì)時(shí)應(yīng)避免出現(xiàn)橫向滾動(dòng)條。1.3.5 響應(yīng)時(shí)間合理原則系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶(hù)就會(huì)感到不安和沮喪；而響應(yīng)時(shí)間過(guò)短也會(huì)影響到用戶(hù)的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此，在系統(tǒng)響應(yīng)時(shí)間上應(yīng)該堅(jiān)持以下原則。（1）用戶(hù)操作后，要在25秒內(nèi)顯示處理信息提示，避免用戶(hù)誤認(rèn)為沒(méi)響應(yīng)而重復(fù)操作。（2） 如果在

10、加載信息或啟動(dòng)程序時(shí)超過(guò)5秒，應(yīng)該添加進(jìn)度條或進(jìn)度提示，避免用戶(hù)產(chǎn)生焦躁心理。 學(xué) 習(xí) 進(jìn) 步 ！移動(dòng)UI交互設(shè)計(jì)02 主題圖標(biāo)設(shè)計(jì)移動(dòng)UI交互設(shè)計(jì)2.1 圖標(biāo)設(shè)計(jì)概述2.2 圖標(biāo)設(shè)計(jì)流程2.3 圖標(biāo)設(shè)計(jì)規(guī)范目錄 CONTENTS2.4 圖標(biāo)設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)2.1圖標(biāo)設(shè)計(jì)概述我們?cè)谑褂檬謾C(jī)、Pad、智能手表等液晶顯示設(shè)備的時(shí)候，會(huì)發(fā)現(xiàn)其上有大量的圖標(biāo)，如右圖所示。這些圖標(biāo)比文字描述更直觀、美觀，并能提升軟件、功能的可用性，極大地提升了視覺(jué)效果。蘋(píng)果用戶(hù)體驗(yàn)設(shè)計(jì)師Mike Stern對(duì)于UI和應(yīng)用圖標(biāo)的重要性這樣解釋?zhuān)骸坝脩?hù)并不會(huì)根據(jù)你使用了多少技術(shù)，或是整合了多少API（Application P

11、rogram Interface，應(yīng)用程序接口），或是你使用的代碼有多厲害而去對(duì)應(yīng)用做出評(píng)價(jià)。他們?cè)谝獾氖悄愕膽?yīng)用能用來(lái)做什么，會(huì)給他們帶來(lái)什么感受。用戶(hù)期待你的應(yīng)用能為他們帶來(lái)直觀、美妙甚至不可思議的體驗(yàn)。“2.1圖標(biāo)設(shè)計(jì)概述圖標(biāo)既可以包含圖像，也可以是一個(gè)文本、一個(gè)LOGO，又或是這些元素的組合。所以，準(zhǔn)確地描述圖標(biāo)，它應(yīng)該是一組具有高度濃縮性、能快捷傳達(dá)信息、便于記憶的圖形。在設(shè)計(jì)圖標(biāo)的時(shí)候，要注意它的美觀性和實(shí)用性，二者互相兼顧，才能得到最好的設(shè)計(jì)效果。例如，我們要設(shè)計(jì)一款關(guān)于技能明星的圖標(biāo)，右圖所示的兩個(gè)圖標(biāo)都是設(shè)計(jì)方案，就辨識(shí)度來(lái)說(shuō)，第一個(gè)圖顯然比第二個(gè)圖表示的含義更正確。2.1.

12、1 圖標(biāo)設(shè)計(jì)分類(lèi)按照功能分類(lèi)，圖標(biāo)可以分為啟動(dòng)圖標(biāo)、應(yīng)用圖標(biāo)和功能圖標(biāo)，如圖所示。2.1.1 圖標(biāo)設(shè)計(jì)分類(lèi)按照設(shè)計(jì)風(fēng)格分類(lèi)，圖標(biāo)可以分為剪影圖標(biāo)、扁平圖標(biāo)和擬物圖標(biāo)，如圖所示。2.1.2 圖標(biāo)設(shè)計(jì)原則可識(shí)別性原則應(yīng)該是圖標(biāo)設(shè)計(jì)中首先應(yīng)該遵循的原則。就是說(shuō)，設(shè)計(jì)的圖標(biāo)要能準(zhǔn)確地表達(dá)相應(yīng)的操作，讓初次使用該產(chǎn)品的用戶(hù)能夠一看就懂，盡量避免誤導(dǎo)性、歧義性。圖所示的一組圖標(biāo)，其可識(shí)別性原則就體現(xiàn)得特別好，形狀簡(jiǎn)單、效果簡(jiǎn)潔，甚至不需要漢字釋義，就能夠清楚地知道該圖標(biāo)所代表的操作。1. 可識(shí)別性原則2.1.2 圖標(biāo)設(shè)計(jì)原則由Adobe 公司開(kāi)發(fā)的Photoshop 軟件，是業(yè)界公認(rèn)最好的圖形圖像處理軟件

13、之一。如果從圖標(biāo)設(shè)計(jì)的角度來(lái)看這款軟件，其圖標(biāo)簡(jiǎn)潔實(shí)用、可識(shí)別性高的優(yōu)點(diǎn)也極為突出，每個(gè)工具、命令的圖標(biāo)都清晰地表達(dá)了其所代表的操作，值得初學(xué)者研究、借鑒，如圖所示。1. 可識(shí)別性原則2.1.2 圖標(biāo)設(shè)計(jì)原則一組圖標(biāo)會(huì)出現(xiàn)在同一個(gè)手機(jī)的主題中、同一個(gè)應(yīng)用程序中，這種同一性要求這組圖標(biāo)有共性。例如，右圖所示的圖標(biāo)，它們的外形一致，顏色的亮度、飽和度一致，所以它們被認(rèn)為具有共性。2. 差異性原則2.1.2 圖標(biāo)設(shè)計(jì)原則但是，強(qiáng)調(diào)共性的同時(shí)，不能忽略圖標(biāo)之間的差異性。因?yàn)槊總€(gè)圖標(biāo)代表的含義和操作是不相同的，如果過(guò)于強(qiáng)調(diào)共性，就會(huì)讓差異性弱化，從而分不清每個(gè)圖標(biāo)的區(qū)別。如圖所示，前面兩個(gè)圖標(biāo)的相似度過(guò)

14、高，差別的區(qū)域過(guò)小，一旦圖標(biāo)縮小，就會(huì)很難辨認(rèn)，后面兩個(gè)圖標(biāo)也存在同樣的問(wèn)題。因此，在設(shè)計(jì)圖標(biāo)時(shí)，要有合理的規(guī)劃，既強(qiáng)調(diào)共性，又突出個(gè)性，這樣才能使其成為一套優(yōu)秀的設(shè)計(jì)作品。2. 差異性原則2.1.2 圖標(biāo)設(shè)計(jì)原則設(shè)計(jì)圖標(biāo)時(shí)，過(guò)于簡(jiǎn)單或過(guò)于復(fù)雜，都不是很合適。如圖所示的一組關(guān)于“設(shè)置”的圖標(biāo)中：A圖標(biāo)過(guò)于簡(jiǎn)單，幾乎看不到圖形的變化；B、C、D 圖標(biāo)雖然有顏色、細(xì)節(jié)表現(xiàn)等方面的區(qū)別，但是都屬于能夠接受的精細(xì)程度，可以表示該圖標(biāo)所代表的操作；E 圖標(biāo)在細(xì)節(jié)表現(xiàn)上非常細(xì)致、逼真，但是應(yīng)用到圖標(biāo)設(shè)計(jì)當(dāng)中，卻顯得過(guò)于累贅，尤其是當(dāng)圖標(biāo)尺寸變小的時(shí)候，更容易看不清其細(xì)節(jié)。所以，5 個(gè)方案中，B、C、D方案

15、是可取的。3.合適的精細(xì)度2.1.2 圖標(biāo)設(shè)計(jì)原則從上面的分析可以看出，圖標(biāo)的可用性隨著精細(xì)度的變化過(guò)程，是一個(gè)類(lèi)似于波峰的曲線(xiàn)，如圖所示，該坐標(biāo)的橫軸表示圖標(biāo)的精細(xì)度，縱軸表示圖標(biāo)的可用性。從圖中可以看出，當(dāng)圖標(biāo)的精細(xì)度為零時(shí)，圖標(biāo)幾乎沒(méi)有可用性，隨著精細(xì)度的逐漸增大，圖標(biāo)的可用性也會(huì)逐漸增強(qiáng)；而精細(xì)度過(guò)大時(shí)，反倒會(huì)影響圖標(biāo)的可用性。3.合適的精細(xì)度2.1.2 圖標(biāo)設(shè)計(jì)原則所謂圖標(biāo)的風(fēng)格，表現(xiàn)為對(duì)圖標(biāo)題材選擇的一貫性和獨(dú)特性、對(duì)圖標(biāo)主題思想的挖掘，也表現(xiàn)為對(duì)創(chuàng)作手法的運(yùn)用、塑造形象的方式、對(duì)藝術(shù)語(yǔ)言的駕馭等方面的獨(dú)創(chuàng)性。對(duì)于一套圖標(biāo)來(lái)說(shuō)，如果圖標(biāo)的視覺(jué)設(shè)計(jì)協(xié)調(diào)統(tǒng)一、選用元素的出處統(tǒng)一，我們就

16、說(shuō)這套圖標(biāo)具有自己的風(fēng)格。圖標(biāo)的風(fēng)格有很多種，在設(shè)計(jì)圖標(biāo)之前，首先要考慮風(fēng)格的定位，只有先將風(fēng)格定位做好，才能著手進(jìn)行圖標(biāo)的設(shè)計(jì)與制作。4.風(fēng)格統(tǒng)一2.1.2 圖標(biāo)設(shè)計(jì)原則如圖所示的兩套圖標(biāo)，上面的圖標(biāo)取材于糕點(diǎn)，下面的圖標(biāo)取材于中國(guó)古典元素，我們就說(shuō)它們都有自己統(tǒng)一的風(fēng)格。4.風(fēng)格統(tǒng)一2.1 圖標(biāo)設(shè)計(jì)概述2.2 圖標(biāo)設(shè)計(jì)流程2.3 圖標(biāo)設(shè)計(jì)規(guī)范目錄 CONTENTS2.4 圖標(biāo)設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)2.2圖標(biāo)設(shè)計(jì)流程步驟一確定圖標(biāo)風(fēng)格步驟二圖標(biāo)草圖繪制步驟三圖標(biāo)電腦制作步驟四主題界面制作圖標(biāo)設(shè)計(jì)流程2.2.1 確定圖標(biāo)風(fēng)格圖標(biāo)設(shè)計(jì)的風(fēng)格沒(méi)有固定的形式，也沒(méi)有所謂的對(duì)錯(cuò)，甚至流行的設(shè)計(jì)趨勢(shì)會(huì)反復(fù)，有時(shí)流

17、行復(fù)古風(fēng)格，過(guò)一段時(shí)間又流行現(xiàn)代風(fēng)格?，F(xiàn)在我們使用的手機(jī)、Pad 中，圖標(biāo)的扁平化設(shè)計(jì)成為流行趨勢(shì)，強(qiáng)調(diào)圖標(biāo)的簡(jiǎn)潔性、寓意性，去除冗余、厚重和繁雜的裝飾效果，讓圖標(biāo)所表述的功能本身作為核心被凸顯出來(lái)，如圖所示的一套小米手機(jī)圖標(biāo)就是典型的扁平化設(shè)計(jì)風(fēng)格。2.2.1 確定圖標(biāo)風(fēng)格在開(kāi)始設(shè)計(jì)圖標(biāo)之前，考慮好圖標(biāo)的風(fēng)格非常重要，這樣能夠保證在設(shè)計(jì)每個(gè)圖標(biāo)時(shí)都能遵循這個(gè)風(fēng)格。2016 年，MBE 風(fēng)格圖標(biāo)風(fēng)靡一時(shí)，紅遍追波、站酷等設(shè)計(jì)平臺(tái)，如圖所示。MBE 風(fēng)格是從線(xiàn)框型Q 版卡通畫(huà)演變而來(lái)的，相比沒(méi)有描邊效果的扁平化風(fēng)格插畫(huà)而言，去除了里面不必要的色塊區(qū)分，更簡(jiǎn)潔、通用、易識(shí)別。粗線(xiàn)條的描邊起到了對(duì)界

18、面的絕對(duì)隔絕作用，突顯內(nèi)容、表現(xiàn)清晰、化繁為簡(jiǎn)。2.2.1 確定圖標(biāo)風(fēng)格MBE 風(fēng)格圖標(biāo)的統(tǒng)一性表現(xiàn)在設(shè)計(jì)手法上，可以嘗試在圖標(biāo)的外形上尋求統(tǒng)一。如圖所示的兩套圖標(biāo)，每套圖標(biāo)的外形都是一致的，在統(tǒng)一的外形中再添加元素對(duì)圖標(biāo)進(jìn)行區(qū)分。在設(shè)計(jì)這種類(lèi)型的圖標(biāo)時(shí)，要注意圖標(biāo)的差異性原則，要能夠很容易地辨識(shí)出每個(gè)圖標(biāo)所代表的含義。2.2.1 確定圖標(biāo)風(fēng)格圖標(biāo)設(shè)計(jì)風(fēng)格統(tǒng)一的另一種常用表現(xiàn)手法就是統(tǒng)一圖標(biāo)設(shè)計(jì)元素的出處，它們可以選自于同一個(gè)時(shí)代、同一部電影、同一個(gè)環(huán)境將這些圖標(biāo)設(shè)計(jì)成擬物化的圖形，也能夠帶來(lái)很好的設(shè)計(jì)效果。如左圖所示的一套圖標(biāo)，靈感來(lái)源于西方中古時(shí)代，是以當(dāng)時(shí)的物品為原型提取其特征并適當(dāng)加入

19、新的設(shè)計(jì)元素設(shè)計(jì)出來(lái)的，其設(shè)計(jì)過(guò)程如右圖所示。2.2.2 圖標(biāo)草圖繪制在確定了圖標(biāo)風(fēng)格之后，就可以進(jìn)行草圖繪制了。所謂草圖繪制，就是指手繪圖標(biāo)的設(shè)計(jì)草稿。手繪是一切造型藝術(shù)的基礎(chǔ)，有利于把握好形體、空間、明暗關(guān)系，是圖標(biāo)設(shè)計(jì)不可缺少的部分。如右圖所示即上圖的手繪圖稿，它是后期電腦制圖的基礎(chǔ)。2.2.2 圖標(biāo)草圖繪制對(duì)于設(shè)計(jì)師來(lái)說(shuō)，手繪的重要性是不可替代的，因?yàn)槭掷L是設(shè)計(jì)師表達(dá)情感、表達(dá)設(shè)計(jì)理念、表述方案結(jié)果的最直接的“視覺(jué)語(yǔ)言”。不論設(shè)計(jì)什么項(xiàng)目，初期尋找靈感來(lái)源、形成具體設(shè)計(jì)思路之前，都可借助手繪稿來(lái)整理思路、進(jìn)行創(chuàng)意實(shí)現(xiàn)，這種方法速度快、效率高、容易修改。如圖所示就是一些草圖的繪制效果。2

20、.2.2 圖標(biāo)草圖繪制相對(duì)于游戲原畫(huà)設(shè)計(jì)、建筑設(shè)計(jì)、工業(yè)設(shè)計(jì)等設(shè)計(jì)行業(yè)來(lái)說(shuō)， 圖標(biāo)設(shè)計(jì)對(duì)手繪的要求并不高， 更多的是對(duì)一些構(gòu)成原理的運(yùn)用。在進(jìn)行圖標(biāo)手繪的過(guò)程中，素描的表現(xiàn)手法是基礎(chǔ)。用素描的方法表現(xiàn)出圖標(biāo)的造型、結(jié)構(gòu)、透視和明暗關(guān)系，就基本可以滿(mǎn)足圖標(biāo)的手繪要求了，如圖所示。因?yàn)槠邢?，素描的相關(guān)知識(shí)在這里就不介紹了，有興趣的讀者可以參考相關(guān)的書(shū)籍進(jìn)行了解。2.2.3 圖標(biāo)電腦制作常用的制作圖標(biāo)的軟件是Adobe 公司開(kāi)發(fā)的Photoshop 和Illustrator，如圖1所示。Photoshop 軟件主要用于處理位圖，用它制作的圖像色彩豐富細(xì)膩、光影變化流暢、羽化過(guò)渡自然，其擁有的功能

21、強(qiáng)大的濾鏡和圖層樣式為圖像增添了無(wú)窮的變化效果。Illustrator 軟件主要用于處理矢量圖像，在文字排版、路徑造型、路徑修改等方面優(yōu)勢(shì)突出。如圖2所示的兩個(gè)圖標(biāo)，左側(cè)圖標(biāo)的紋理效果逼真，光影效果變化比較多，用Photoshop 軟件來(lái)完成就比較合適；右側(cè)圖標(biāo)的效果簡(jiǎn)單，有一些路徑形狀的變化，所以可以使用Illustrator 軟件來(lái)制作。122.2.3 圖標(biāo)電腦制作我們?cè)谧鲌D時(shí)，經(jīng)常會(huì)將兩個(gè)軟件結(jié)合使用。如圖2-22 所示的圖標(biāo)效果，在制作的過(guò)程中，整體的形狀、大小的變化可以使用Illustrator 軟件來(lái)實(shí)現(xiàn)，漸變、明暗變換則可以使用Photoshop 軟件來(lái)修飾，兩個(gè)軟件相結(jié)合，就可

22、以完成對(duì)該圖標(biāo)的制作了。圖標(biāo)的電腦制作部分可以依據(jù)前期的手繪草圖進(jìn)行繪制，如果草圖繪制得非常精細(xì)，可以將手繪圖紙掃描或拍照，將照片放到Photoshop 軟件中處理后，利用“鋼筆”工具勾邊、上色、處理效果，則會(huì)省去很多時(shí)間。2.2.4 主題界面制作手機(jī)主題包括整個(gè)手機(jī)系統(tǒng)的整體風(fēng)格，它相當(dāng)于一個(gè)程序包，如果更換主題，可能會(huì)同時(shí)更換個(gè)性主題的圖標(biāo)、壁紙、屏保、開(kāi)關(guān)機(jī)動(dòng)畫(huà)等。在完成圖標(biāo)的設(shè)計(jì)制作之后，依據(jù)不同手機(jī)系統(tǒng)的尺寸要求，我們可以進(jìn)行與圖標(biāo)相配套的主界面、解鎖界面、鎖屏界面、短信界面、撥號(hào)界面等效果圖的制作。如圖所示就是一套古風(fēng)主題界面，其整體風(fēng)格、設(shè)計(jì)元素、選用的素材都是與圖標(biāo)設(shè)計(jì)的風(fēng)格相

23、一致的。2.1 圖標(biāo)設(shè)計(jì)概述2.2 圖標(biāo)設(shè)計(jì)流程2.3 圖標(biāo)設(shè)計(jì)規(guī)范目錄 CONTENTS2.4 圖標(biāo)設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)2.3.1 系統(tǒng)規(guī)范這里所說(shuō)的圖標(biāo)設(shè)計(jì)，其實(shí)是用于手機(jī)和Pad 系統(tǒng)的圖標(biāo)及主題設(shè)計(jì)。手機(jī)系統(tǒng)是指運(yùn)行在手機(jī)上的操作系統(tǒng)。常見(jiàn)的手機(jī)系統(tǒng)有iOS、Android、Windows Phone、BlackBerry、Firefox OS 等，對(duì)于國(guó)內(nèi)手機(jī)用戶(hù)來(lái)說(shuō)，主要使用iOS 和Android 兩種系統(tǒng)，如圖所示。蘋(píng)果公司的手機(jī)和數(shù)碼產(chǎn)品使用的都是iOS 的手機(jī)系統(tǒng)，使用Android 手機(jī)系統(tǒng)的手機(jī)有很多。兩個(gè)系統(tǒng)的軟件開(kāi)發(fā)工具不同、平臺(tái)不同，其UI 設(shè)計(jì)的規(guī)范也有所區(qū)別。就圖標(biāo)而

24、言，iOS 系統(tǒng)和Android 系統(tǒng)的圖標(biāo)大小、命名規(guī)范都不相同。2.3.1 系統(tǒng)規(guī)范以蘋(píng)果公司的iPhone 和iPad 為例進(jìn)行說(shuō)明，如右圖所示。在iOS 系統(tǒng)歷來(lái)的圖標(biāo)演變過(guò)程中，許多看似不明顯的變化實(shí)際上都在潛移默化中引導(dǎo)著圖標(biāo)設(shè)計(jì)風(fēng)格和設(shè)計(jì)方法的演變。自iOS7開(kāi)始，蘋(píng)果圖標(biāo)設(shè)計(jì)采用扁平化風(fēng)格并延續(xù)至今。1.iOS系統(tǒng)圖標(biāo)制作規(guī)范2.3.1 系統(tǒng)規(guī)范iOS系統(tǒng)圖標(biāo)的命名與尺寸如下表所示。1.iOS系統(tǒng)圖標(biāo)制作規(guī)范后綴適用機(jī)型屏幕密度圖標(biāo)尺寸1xiPhone1-3G320px480px2xiPhone4-8640px960px(iPhone4)640px1136px(iPhone5)

25、750px1334px(iPhone6/7/8)120px120px（APP）1024px1024px（APP Store）3xiPhone Plus/iPad1242px2208px180px180px（APP）10241024px（APP Store）2.3.1 系統(tǒng)規(guī)范一般iOS 系統(tǒng)的圖標(biāo)以“Icon1x.png”“Icon2x.png”“Icon3x.png”這樣的形式命名，其中1x、2x、3x 可以簡(jiǎn)單地理解為倍數(shù)關(guān)系，3x 是1x 的3 倍。例如，我們使用750px1334px（iPhone6/7/8）尺寸做設(shè)計(jì)稿，那么切圖輸出就是2x，縮小2倍就是1x，擴(kuò)大1.5 倍就是3x。

26、最標(biāo)準(zhǔn)的適配方式就是在圖標(biāo)完成后保存3 套圖，程序運(yùn)行會(huì)自動(dòng)選取對(duì)應(yīng)的圖片。在設(shè)計(jì)iOS 系統(tǒng)的圖標(biāo)時(shí)，要按照系統(tǒng)對(duì)于圖標(biāo)的標(biāo)準(zhǔn)尺寸進(jìn)行相應(yīng)的設(shè)置和操作。例如iOS 系統(tǒng)中所有圖標(biāo)的圓角效果不是準(zhǔn)確的半徑值，提交圖標(biāo)時(shí)不需要圓角裁剪，而是由系統(tǒng)處理生成的。1.iOS系統(tǒng)圖標(biāo)制作規(guī)范2.3.1 系統(tǒng)規(guī)范使用Android 系統(tǒng)的設(shè)備眾多，屏幕的參數(shù)多樣化，所以進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)需要考慮屏幕密度和圖標(biāo)大小的問(wèn)題。同一個(gè)圖標(biāo)在高密度的屏幕上要比在低密度的屏幕上看起來(lái)小，為了讓這兩個(gè)屏幕上的圖片看起來(lái)效果差不多，可以采用以下兩種方法：一是程序?qū)D片進(jìn)行縮放；二是為這兩個(gè)屏幕的手機(jī)各提供適應(yīng)屏幕密度的圖片。

27、從效果上比較，前者勢(shì)必會(huì)出現(xiàn)失真、細(xì)節(jié)缺失等問(wèn)題，而后者應(yīng)該是可行的。2.Android系統(tǒng)圖標(biāo)制作規(guī)范2.3.1 系統(tǒng)規(guī)范為了簡(jiǎn)化設(shè)計(jì)且兼容更多的手機(jī)屏幕，平臺(tái)依照屏幕尺寸和屏幕密度進(jìn)行了區(qū)分，如下表所示。2.Android系統(tǒng)圖標(biāo)制作規(guī)范屏幕尺寸屏幕密度（分辨率）圖標(biāo)尺寸（例）小低（120dpi）36px36px正常中（160dpi）48px48px大高（240dpi）72px72px特大超高（320dpi）96px96px2.3.1 系統(tǒng)規(guī)范從表中可以看出，針對(duì)不同的屏幕密度需要設(shè)計(jì)出尺寸有所區(qū)別的圖標(biāo)。例如，在1 6 0 d p i 屏幕上的4 8 p x 4 8 p x 的圖標(biāo)，在2

28、 4 0 d p i 屏幕上的大小應(yīng)調(diào)整為4 8 p x（240/160）=72px。也就是說(shuō)，在設(shè)計(jì)Android 系統(tǒng)的圖標(biāo)時(shí)，可以為表2-2 中的4 種普遍使用的屏幕密度都創(chuàng)造一套獨(dú)立的圖標(biāo)。然后，把它們儲(chǔ)存在特定的資源目錄下。當(dāng)應(yīng)用程序運(yùn)行時(shí)，Android 平臺(tái)將會(huì)檢查設(shè)備屏幕的特性，從而加載特定密度資源目錄下相應(yīng)的圖標(biāo)。2.Android系統(tǒng)圖標(biāo)制作規(guī)范2.3.2 設(shè)計(jì)制作規(guī)范圖標(biāo)的常用光源有頂光源、面光源和45度角光源3種，如圖所示。1. 光源方向統(tǒng)一2.3.2 設(shè)計(jì)制作規(guī)范在設(shè)計(jì)一組圖標(biāo)時(shí)，必須保證光源方向是一致的，如圖所示。1. 光源方向統(tǒng)一2.3.2 設(shè)計(jì)制作規(guī)范將制作的圖

29、標(biāo)上傳到系統(tǒng)平臺(tái)時(shí)，會(huì)依據(jù)平臺(tái)要求進(jìn)行裁切。保證圖標(biāo)的主體部分控制在不被裁切的區(qū)域，就是所謂的安全區(qū)域。例如，小米V5系統(tǒng)主題圖標(biāo)的尺寸要求是136px136px，左圖所示的外邊深色區(qū)域就是圖標(biāo)的裁切區(qū)域，而中間淺色的安全區(qū)域應(yīng)該是120px120px。以左圖中裁切區(qū)域和安全區(qū)域的表現(xiàn)方式來(lái)觀察右圖兩款圖標(biāo)效果?？梢钥闯?，A 圖標(biāo)大小合適，圖標(biāo)的主體都在安全區(qū)域內(nèi)，裁切后不會(huì)影響圖標(biāo)的效果；而B(niǎo) 圖標(biāo)顯然超出了安全區(qū)域的范圍，在裁切后就會(huì)缺失圖標(biāo)的部分內(nèi)容，造成圖標(biāo)的不完整，影響整體效果。2. 裁切區(qū)域和安全區(qū)域2.3.2 設(shè)計(jì)制作規(guī)范為了讓圖標(biāo)呈現(xiàn)出最優(yōu)的顯示效果，還要避免左圖中出現(xiàn)的幾種問(wèn)

30、題，主體過(guò)小或過(guò)大、主體部分模糊、主體重心偏移等都是不合適的，要根據(jù)安全區(qū)域調(diào)整圖標(biāo)主體所占的比例，效果如右圖所示。在圖標(biāo)的設(shè)計(jì)制作中，還有許多需要注意的細(xì)節(jié)及表現(xiàn)手法，獲得這些實(shí)踐經(jīng)驗(yàn)最直接的途徑就是大量地臨摹與實(shí)踐。2. 裁切區(qū)域和安全區(qū)域2.1 圖標(biāo)設(shè)計(jì)概述2.2 圖標(biāo)設(shè)計(jì)流程2.3 圖標(biāo)設(shè)計(jì)規(guī)范目錄 CONTENTS2.4 圖標(biāo)設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)2.4.1 設(shè)計(jì)風(fēng)格下面要設(shè)計(jì)制作一套具有卡通風(fēng)格的主題圖標(biāo)。設(shè)計(jì)的元素均來(lái)源于右圖所示的“小黃人”這一卡通形象，要將這些元素與圖標(biāo)的含義（如電話(huà)、相機(jī)、短信等）相結(jié)合，設(shè)計(jì)出一款可愛(ài)、親切的手機(jī)主題圖標(biāo)。2.4.2 手繪圖標(biāo)在確定了主題風(fēng)格后，進(jìn)入

31、手繪設(shè)計(jì)圖標(biāo)階段，在這個(gè)過(guò)程中，要發(fā)揮想象，挖掘與“小黃人”相關(guān)的元素特點(diǎn)，將其與主題圖標(biāo)中各圖標(biāo)的含義聯(lián)系到一起。例如，“小黃人”最?lèi)?ài)吃的香蕉的形狀與話(huà)筒的外形極為相似，如左圖所示，于是我們可以將電話(huà)圖標(biāo)設(shè)計(jì)成香蕉形狀，再添加一些元素讓其更加形象、生動(dòng)，如右圖所示。2.4.2 手繪圖標(biāo)又如，“小黃人”的眼睛是圓形的，帶有金屬外框，其形狀、特點(diǎn)與收音機(jī)的揚(yáng)聲器非常相似，如左圖所示，于是我們可以將收音機(jī)的揚(yáng)聲器部分用“小黃人”的眼睛來(lái)替換，設(shè)計(jì)出收音機(jī)的圖標(biāo)，如右圖所示。2.4.3 電腦制作圖標(biāo)的電腦制作是在Photoshop軟件中完成的，方法是將手繪的草圖拍成照片，再利用Photoshop軟件

32、進(jìn)行描邊、上色等操作。2.4.3 電腦制作合理原則（1）打開(kāi)Photoshop 軟件，新建文件，文件的大小為400 px400 px，分辨率為72ppi。（2）打開(kāi)拍攝的電話(huà)圖標(biāo)手繪草圖照片，將其拖曳到新建的文件中，電腦制作在此基礎(chǔ)上完成，如右圖所示。2.4.3 電腦制作合理原則（3）使用“鋼筆”工具對(duì)草圖進(jìn)行描邊，并填充顏色（R：255，G：244，B：92），如圖2-40 所示。2.4.3 電腦制作合理原則（4）為增強(qiáng)立體效果，添加“斜面和浮雕”“內(nèi)陰影”圖層樣式?！靶泵婧透〉瘛钡母吖?、陰影顏色都選用與香蕉顏色接近的淺黃色和深黃色，目的是不讓效果太突兀，具體參數(shù)如中圖所示，效果如右圖所示。

33、2.4.3 電腦制作合理原則（5）依照此方法，制作另一半的香蕉效果，因?yàn)榉较蚝徒嵌炔煌?，“斜面和浮雕”“?nèi)陰影”的參數(shù)可以適當(dāng)調(diào)整，同時(shí)添加了“投影”圖層樣式，投影的顏色也設(shè)置為深黃色，具體參數(shù)如左圖所示，效果如右圖所示。2.4.3 電腦制作合理原則（6）再使用“鋼筆”工具將香蕉的果柄處填充“黑色黃色”的線(xiàn)性漸變，如左圖所示。同時(shí)為了增加立體效果，也為其添加了“斜面和浮雕”圖層樣式，具體參數(shù)如中圖所示，效果如右圖所示。2.4.3 電腦制作合理原則（7）再處理一下左圖所示的剩余部分，就可以完成該圖標(biāo)的繪制了。我們將手繪的草圖圖層隱藏，將圖標(biāo)存儲(chǔ)為“png”格式，如右圖所示。為了便于以后的修改，建

34、議再存儲(chǔ)一個(gè)“psd”格式的文件備用。2.4.3 電腦制作合理原則上述即電腦制作圖標(biāo)的方法，在制作的過(guò)程中，每個(gè)圖標(biāo)因其形狀的不同，在處理手法上會(huì)稍有不同，但是基本方法是一致的。我們制作了手繪稿中所有的圖標(biāo)效果，并分別進(jìn)行保存，右圖所示為其中一部分圖標(biāo)。2.4.4 主題界面制作（1）桌面壁紙尺寸為1440px1280px，分辨率為72ppi。為了與圖標(biāo)風(fēng)格一致，在制作壁紙時(shí)，選用的設(shè)計(jì)元素也是與“小黃人”相關(guān)的，如左圖所示。（2）狀態(tài)欄的高度為30px，我們?cè)谄渲刑钌蠣顟B(tài)欄中的各個(gè)控件，包括時(shí)間、信號(hào)、電池等信息，如右圖所示。1. 主題界面制作2.4.4 主題界面制作（3）主界面上的圖標(biāo)大小為

35、136px136px，每個(gè)圖標(biāo)下方都會(huì)有文字說(shuō)明，文字的字體可以設(shè)置為方正蘭亭黑體，文字的大小可以設(shè)置為21px 或27px。為了使主界面的搭建標(biāo)準(zhǔn)、規(guī)范，建議使用參考線(xiàn)來(lái)進(jìn)行對(duì)齊，如圖所示。1. 主題界面制作2.4.4 主題界面制作下面，我們就結(jié)合整體的設(shè)計(jì)風(fēng)格，設(shè)計(jì)一個(gè)合理、有趣的解鎖方式。將鎖屏的大小設(shè)定為720px1280px，解鎖前的效果如圖左圖所示。解鎖方式是幫助“小黃人”把香蕉拿下來(lái)就可以順利解鎖，如右圖所示。2. 鎖屏、解鎖界面制作2.4.5 其他界面制作在前面設(shè)計(jì)制作的基礎(chǔ)上，我們還制作了音樂(lè)鎖屏、短信界面、聯(lián)系人界面等，如圖所示。課后習(xí)題請(qǐng)運(yùn)用本章所學(xué)的知識(shí)點(diǎn)，設(shè)計(jì)一套主題

36、圖標(biāo)，要求如下。（1）至少設(shè)計(jì)24 個(gè)主題圖標(biāo)。（2）圖標(biāo)的設(shè)計(jì)風(fēng)格一致，符合圖標(biāo)設(shè)計(jì)的原則。（3）完成圖標(biāo)手繪稿、電腦制作稿及主題界面的設(shè)計(jì)制作。課后習(xí)題樣例：本樣例是寫(xiě)實(shí)風(fēng)格的主題圖標(biāo)設(shè)計(jì)，靈感來(lái)源于汽車(chē)相關(guān)元素，如圖所示。課后習(xí)題圖標(biāo)設(shè)計(jì)案例欣賞案例1：“民族風(fēng)情”圖標(biāo)設(shè)計(jì)欣賞圖標(biāo)設(shè)計(jì)案例欣賞圖標(biāo)設(shè)計(jì)案例欣賞案例2：“中古印象”圖標(biāo)設(shè)計(jì)欣賞圖標(biāo)設(shè)計(jì)案例欣賞圖標(biāo)設(shè)計(jì)案例欣賞案例3：“古韻”圖標(biāo)設(shè)計(jì)欣賞圖標(biāo)設(shè)計(jì)案例欣賞圖標(biāo)設(shè)計(jì)案例欣賞案例4：“城市星空”圖標(biāo)設(shè)計(jì)欣賞圖標(biāo)設(shè)計(jì)案例欣賞圖標(biāo)設(shè)計(jì)案例欣賞案例5：“小白系列”圖標(biāo)設(shè)計(jì)欣賞圖標(biāo)設(shè)計(jì)案例欣賞 學(xué) 習(xí) 進(jìn) 步 ！移動(dòng)UI交互設(shè)計(jì)03 界面設(shè)

37、計(jì)移動(dòng)UI交互設(shè)計(jì)3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類(lèi)3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.1界面設(shè)計(jì)概述界面是人與機(jī)器之間傳遞和交換信息的媒介，是人與機(jī)器互動(dòng)的接口。我們通過(guò)手機(jī)界面來(lái)瀏覽信息，通過(guò)在手機(jī)界面上點(diǎn)擊、拖曳等方式來(lái)實(shí)現(xiàn)各種操作，所以，手機(jī)界面是我們與手機(jī)發(fā)生互動(dòng)的中間介質(zhì)，如圖所示。3.1界面設(shè)計(jì)概述界面設(shè)計(jì)開(kāi)始于軟件設(shè)計(jì)之后，UI界面設(shè)計(jì)的發(fā)展過(guò)程是與軟件設(shè)計(jì)慢慢分化的。隨著人們對(duì)界面易用性、簡(jiǎn)潔性的要求越來(lái)越高，界面設(shè)計(jì)的重要性才越來(lái)越被重視，如圖所示的是“搜狐”網(wǎng)站界面十年前后的對(duì)比效果，可以看出，簡(jiǎn)潔、美觀、高效已經(jīng)成為界面設(shè)計(jì)的主流

38、趨勢(shì)。3.1.1 界面設(shè)計(jì)的內(nèi)容啟動(dòng)圖標(biāo)是手機(jī)應(yīng)用程序的入口，它會(huì)出現(xiàn)在手機(jī)解鎖后的主界面上。如果需要啟動(dòng)應(yīng)用程序，只需點(diǎn)擊該圖標(biāo)即可。啟動(dòng)頁(yè)是指從用戶(hù)啟動(dòng)應(yīng)用之后到應(yīng)用程序主界面打開(kāi)之前看到的過(guò)渡頁(yè)面或動(dòng)畫(huà)，如圖所示。啟動(dòng)圖標(biāo)是用戶(hù)認(rèn)識(shí)應(yīng)用程序的第一步，是應(yīng)用程序的標(biāo)志和門(mén)戶(hù)，其重要性不言而喻。其設(shè)計(jì)的原則和方法與我們前面講到的圖標(biāo)設(shè)計(jì)是一致的。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容啟動(dòng)頁(yè)的作用是為了增強(qiáng)應(yīng)用程序啟動(dòng)時(shí)的用戶(hù)體驗(yàn)。最常見(jiàn)的啟動(dòng)頁(yè)形式如圖所示，這些頁(yè)面主要用來(lái)體現(xiàn)應(yīng)用程序的名稱(chēng)及價(jià)值，讓用戶(hù)能迅速熟記該應(yīng)用。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容還有一些啟動(dòng)

39、頁(yè)，并沒(méi)有文字內(nèi)容，如圖所示。曾經(jīng)有調(diào)查數(shù)據(jù)顯示，啟動(dòng)時(shí)間超過(guò)3秒用戶(hù)就會(huì)有焦急感。所以，啟動(dòng)頁(yè)停留的時(shí)間最好控制在3秒以下。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容并不是所有應(yīng)用程序的啟動(dòng)時(shí)間都能控制在3秒以下，所以我們要使用其他方法來(lái)進(jìn)行處理，如可以添加狀態(tài)提醒，如左圖所示，或者利用漸隱效果拖延時(shí)間等，如右圖所示。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容框架設(shè)計(jì)也稱(chēng)為結(jié)構(gòu)設(shè)計(jì)，框架是指界面的骨架，框架設(shè)計(jì)是在進(jìn)行用戶(hù)研究和任務(wù)分析后制訂出的界面整體架構(gòu)。對(duì)于手機(jī)界面來(lái)說(shuō)，其基本的結(jié)構(gòu)可以分為4 個(gè)部分，狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄和內(nèi)容區(qū)域，如圖所示。界面中的狀態(tài)欄主要用于顯示手

40、機(jī)信號(hào)、電池容量、時(shí)間等信息，標(biāo)題欄用于顯示標(biāo)題信息和放置返回、設(shè)置等按鈕，標(biāo)簽欄用于顯示選項(xiàng)信息。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容界面中除了狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄之外的區(qū)域就是內(nèi)容區(qū)域，所以我們這里說(shuō)的框架設(shè)計(jì)，主要是指內(nèi)容區(qū)域的架構(gòu)設(shè)計(jì)。通俗而言，框架設(shè)計(jì)就是界面里的信息和元素位置如何擺放、大小如何設(shè)置、顏色如何搭配等?？蚣茉O(shè)計(jì)沒(méi)有定式，但會(huì)因界面類(lèi)型、功能的不同而有一些常見(jiàn)的形式，在接下來(lái)的界面設(shè)計(jì)分類(lèi)中會(huì)有所闡述。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容在進(jìn)行框架設(shè)計(jì)時(shí)，很多設(shè)計(jì)方面的原理、法則會(huì)對(duì)我們有所幫助，如在設(shè)計(jì)中應(yīng)用比較廣泛的格式塔原理，就非常適合應(yīng)用于框架設(shè)計(jì)。下面

41、，先介紹兩種在界面設(shè)計(jì)常用的法則。2. 框架設(shè)計(jì)（2）相似法則（1）接近法則3.1.1 界面設(shè)計(jì)的內(nèi)容（1）接近法則。接近法則是指人的潛意識(shí)里常常傾向于將空間上或時(shí)間上接近的元素整合成集合或整體。例如，右圖所示的圖形中，雖然所有的圓形大小都一樣，但是能夠清晰地看出將其分成了3 組，這是由于它們之間不同的距離為我們的視覺(jué)創(chuàng)造了分組效果。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容（2）相似法則。相似法則是指人的潛意識(shí)里會(huì)將視線(xiàn)內(nèi)一些相似的元素（如相似的形狀、顏色、大小、亮度等）自動(dòng)整合成集合或整體。如圖所示，圖中各行圖形雖然間距相等，但是每行圖形的形狀有所不同，在視覺(jué)上就形成了分組效果。2. 框架設(shè)

42、計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容利用相似法則，即使界面中各元素?cái)[放得雜亂無(wú)序，也可以很容易地進(jìn)行區(qū)分并分組，如圖所示，雖然文件類(lèi)型多樣，但是通過(guò)圖標(biāo)的形狀和顏色就能非常容易地將其分成若干組合，一目了然。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容相似法則是基于共同的視覺(jué)特征出發(fā)的，在界面設(shè)計(jì)中，可以利用相似法則給予不同的布局元素相同或相似的視覺(jué)特征，激發(fā)用戶(hù)對(duì)界面進(jìn)行適當(dāng)?shù)姆纸M和聯(lián)結(jié)的本能。右圖所示的兩個(gè)界面就很好地運(yùn)用了相似法則，通過(guò)形狀、顏色等區(qū)別對(duì)界面元素進(jìn)行分組，使界面的結(jié)構(gòu)變得靈活。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容控件是指在框架設(shè)計(jì)中出現(xiàn)的各種元素，如按鈕、菜單、對(duì)話(huà)框、列表、信號(hào)條

43、、電池狀態(tài)、標(biāo)簽、面板、滑塊等都是控件，如圖所示。這些控件的功能相對(duì)獨(dú)立，并且可以重復(fù)使用。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容如果細(xì)化來(lái)說(shuō)，在界面上出現(xiàn)的所有元素都可以稱(chēng)為控件。在完成了框架設(shè)計(jì)，并對(duì)界面的結(jié)構(gòu)有所把握之后，就要通過(guò)控件的制作來(lái)填充框架，完成界面設(shè)計(jì)了。控件的效果主要依賴(lài)于界面設(shè)計(jì)的規(guī)范和控件細(xì)節(jié)的表現(xiàn)。界面設(shè)計(jì)的規(guī)范主要是指適合于手機(jī)設(shè)備和系統(tǒng)特性的、合理的設(shè)計(jì)標(biāo)準(zhǔn)，包括控件的大小和間距、界面的布局等內(nèi)容?？丶?xì)節(jié)的表現(xiàn)主要是指控件的顏色、特效、材質(zhì)等效果，需要通過(guò)Photoshop、Illustrator 等制作軟件來(lái)完成。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容需要強(qiáng)調(diào)

44、的是，控件的表現(xiàn)看似簡(jiǎn)單，實(shí)則不然。為了將控件效果做好，細(xì)節(jié)的表現(xiàn)尤為重要，右圖所示的兩個(gè)按鈕是使用Photoshop 軟件來(lái)制作的，左側(cè)的按鈕只添加了“斜面和浮雕”的圖層樣式，右側(cè)的按鈕在此效果上又增加了高光和陰影線(xiàn)，立刻增強(qiáng)了按鈕的質(zhì)感，在細(xì)節(jié)表現(xiàn)上要優(yōu)于左側(cè)的按鈕效果。手機(jī)的界面空間有限，在有限的界面中要想將所有控件表現(xiàn)出最佳效果，每一個(gè)像素都是關(guān)鍵，所以需要細(xì)致、耐心、考慮周到。3.控件設(shè)計(jì)3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面設(shè)計(jì)首先要關(guān)注的就是目標(biāo)平臺(tái)，也就是說(shuō)，做界面設(shè)計(jì)要明確手機(jī)、Pad、電腦等設(shè)備的特性，要明確iOS、Android、Windows 等不同系統(tǒng)的設(shè)計(jì)規(guī)范。如圖所示

45、，左側(cè)為該應(yīng)用程序在Pad上的界面，右側(cè)為其在手機(jī)上的界面。同一款應(yīng)用程序在不同設(shè)備上布局一樣并不合適，而是要因設(shè)備的不同，適當(dāng)修改布局方式。1. 適用性3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面是人與機(jī)器交互的接口，為用戶(hù)提供簡(jiǎn)便、易懂的操作才是最終目的。界面的易用性表現(xiàn)在界面的功能、信息、層級(jí)等方面。在進(jìn)行界面設(shè)計(jì)時(shí)，要以滿(mǎn)足用戶(hù)的目標(biāo)需要為準(zhǔn)，避免嵌套過(guò)深的多級(jí)菜單，縮減不必要的功能，同時(shí)盡可能創(chuàng)建多種信息訪(fǎng)問(wèn)途徑。理想的情況是用戶(hù)不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。如圖所示的Windows8系統(tǒng)界面，就很好地體現(xiàn)了界面信息層級(jí)扁平化的原則，用戶(hù)關(guān)注的信息一目了然，易用性強(qiáng)。2

46、. 易用性3.1.2 界面設(shè)計(jì)的注意要點(diǎn)界面設(shè)計(jì)要能夠預(yù)測(cè)用戶(hù)可能出現(xiàn)的錯(cuò)誤，提供相應(yīng)的機(jī)制盡可能避免用戶(hù)出錯(cuò)，在用戶(hù)操作錯(cuò)誤或產(chǎn)生迷惑時(shí)可以自己尋求解決方法。右圖所示的某程序注冊(cè)界面提供了友好的信息提示，使注冊(cè)過(guò)程變得簡(jiǎn)單、出錯(cuò)率小，提高了用戶(hù)對(duì)該應(yīng)用程序的信任度和好感。3.友好性3.1.3 界面設(shè)計(jì)的表現(xiàn)手法唯一主色調(diào)是指在一個(gè)界面中，只采用一種色相，通過(guò)不同的亮度、飽和度的調(diào)整，配以黑色、白色和灰色來(lái)展現(xiàn)信息層次，絕不使用更多的顏色，如右圖所示。唯一主色調(diào)的顏色一般會(huì)出現(xiàn)在界面的狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄或其他重要區(qū)域提醒的位置。1. 唯一主色調(diào)3.1.3 界面設(shè)計(jì)的表現(xiàn)手法多彩色與唯一主色

47、調(diào)的區(qū)別在于，不同頁(yè)面、不同信息組塊采用多彩色撞色，或同一個(gè)界面的局部采用多彩色，如右圖所示。多彩色的設(shè)計(jì)方法比唯一主色調(diào)的設(shè)計(jì)方法要難很多，顏色的使用主要取決于想表現(xiàn)的風(fēng)格和意境。顏色的搭配有很多可參考的理論知識(shí)，如鄰近色、對(duì)比色、暖色調(diào)、冷色調(diào)等。但這些理論也不是絕對(duì)的。歸根結(jié)底，顏色的運(yùn)用需要依靠長(zhǎng)時(shí)間的積累與實(shí)踐，如果運(yùn)用得當(dāng)，多彩色的界面還是非常美觀的。2. 多彩色3.1.3 界面設(shè)計(jì)的表現(xiàn)手法現(xiàn)在，越來(lái)越多的App 在數(shù)據(jù)的呈現(xiàn)方式上，開(kāi)始嘗試數(shù)據(jù)的可視化、信息的圖表化，讓枯燥的數(shù)據(jù)和文字變得直觀，增強(qiáng)了用戶(hù)體驗(yàn)，如圖所示。數(shù)據(jù)的可視化只是用來(lái)輔助進(jìn)行界面設(shè)計(jì)的，不能單純地為了數(shù)據(jù)

48、能可視化，而大量地使用圖表，卻忽視了這些圖表是否有存在價(jià)值，或者說(shuō)是否能夠準(zhǔn)確表達(dá)你所要呈現(xiàn)給用戶(hù)的信息。3.數(shù)據(jù)的可視化3.1.3 界面設(shè)計(jì)的表現(xiàn)手法（1）在界面設(shè)計(jì)時(shí)，可以將不同的內(nèi)容信息放置于不同的卡片上，使用空白間隔將不同的內(nèi)容塊劃分開(kāi)，如圖所示，這樣的設(shè)計(jì)使得各部分內(nèi)容清晰，沒(méi)有多余的元素影響視覺(jué)，界面簡(jiǎn)潔。4.內(nèi)容至上3.1.3 界面設(shè)計(jì)的表現(xiàn)手法（2）還有一種表現(xiàn)形式是干脆將卡片也去掉，只保留圖片和文字，如圖所示。這樣的設(shè)計(jì)可突出內(nèi)容，放大圖片和字號(hào)，視覺(jué)體驗(yàn)更加清晰，提高了界面的易用性。4.內(nèi)容至上3.1.3 界面設(shè)計(jì)的表現(xiàn)手法5. 大視野背景圖這種表現(xiàn)手法是用圖片作為界面的背

49、景，以渲染氛圍，豐富情感化元素，如圖所示。大視野背景圖對(duì)字體和排版設(shè)計(jì)的要求比較高，難度也比較大，使用的背景效果不能喧賓奪主，影響界面內(nèi)容的清晰度。使用大視野背景圖最簡(jiǎn)單的方法是可以將背景圖做模糊處理，這樣可以起到很好的襯托作用。3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類(lèi)3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.2界面設(shè)計(jì)分類(lèi)在一個(gè)App中，界面可以分為兩類(lèi)：一類(lèi)是典型界面，是指在 App（應(yīng)用程序）中經(jīng)常出現(xiàn)的、有代表性的界面；另一類(lèi)是特殊界面，是指App 中的啟動(dòng)、登錄、注冊(cè)界面等。例如，在QQ 軟件中，信息列表頁(yè)、個(gè)人設(shè)置頁(yè)就是典型界面，如左圖所示；啟動(dòng)頁(yè)、登錄

50、頁(yè)就是特殊界面，如右圖所示。3.2.1 主界面主界面是指打開(kāi)應(yīng)用程序后的第一個(gè)界面，在這個(gè)界面上一般會(huì)呈現(xiàn)該應(yīng)用程序的核心功能，如右圖所示。在主界面上，用戶(hù)應(yīng)該能夠輕易找到該款A(yù)pp 最主要的功能。在設(shè)計(jì)主界面時(shí)，最先做的應(yīng)該是了解App 的開(kāi)發(fā)目的和用戶(hù)使用的心理，在挖掘核心功能后，再進(jìn)行布局設(shè)計(jì)。3.2.1 主界面這種布局方式泛指對(duì)界面進(jìn)行橫縱等分的布局類(lèi)型，如圖所示。所有的核心功能井然有序、間隔合理、清晰呈現(xiàn)，用戶(hù)能夠快速查看和選擇，視覺(jué)效果穩(wěn)定。1. 九宮格式3.2.1 主界面最早的九宮格是指橫縱各3個(gè)格，但是慢慢地這種布局方式也發(fā)生了改變，不再絕對(duì)地控制格子的數(shù)量。如果App的功能個(gè)

51、數(shù)少于或多于9個(gè)，也可以改變橫縱的格子數(shù)量，讓布局更加合理，如圖所示。1. 九宮格式3.2.1 主界面這種布局方式是將信息以豎排列表的方式進(jìn)行呈現(xiàn)，如圖所示。列表可以包含比較多的信息，在視覺(jué)上整齊美觀，視覺(jué)流線(xiàn)從上向下，瀏覽體驗(yàn)快捷，用戶(hù)接受度很高。列表式的界面常用于并列元素的展示，包括目錄、分類(lèi)、內(nèi)容等。2. 列表式3.2.1 主界面這種布局方式表面上和列表式很相似，但是它可展開(kāi)顯示二級(jí)內(nèi)容，在不用的時(shí)候，這些內(nèi)容可以隱藏，如圖所示。它的優(yōu)勢(shì)在于能夠在一屏內(nèi)顯示更多細(xì)節(jié)，無(wú)需進(jìn)行頁(yè)面的跳轉(zhuǎn)，既能保持界面簡(jiǎn)潔又能提高操作效率。3.手風(fēng)琴式3.2.1 主界面手風(fēng)琴式和列表式在符號(hào)表示上是有所區(qū)別

52、的。如果有二級(jí)內(nèi)容，則右側(cè)的符號(hào)通常會(huì)用向下的箭頭來(lái)表示，如果是界面要發(fā)生跳轉(zhuǎn)，則右側(cè)的符號(hào)會(huì)用向右的箭頭來(lái)表示。當(dāng)然，這只是常用的表現(xiàn)形式，在一些頁(yè)面中，也會(huì)看到右圖所示的手風(fēng)琴式界面。3.手風(fēng)琴式3.2.1 主界面這種布局方式是將部分內(nèi)容先藏在界面邊緣，在需要時(shí)再展開(kāi)，如左所示。它的優(yōu)勢(shì)是不占用寶貴的屏幕空間，讓用戶(hù)聚焦于內(nèi)容，在交互體驗(yàn)上更加自然，和原界面融合得較好，如右圖所示。4.側(cè)滑式3.2.1 主界面這種布局方式是利用了格式塔原理中的相似法則，通過(guò)形狀進(jìn)行分組，如圖所示。它的優(yōu)勢(shì)在于形式活潑、不拘謹(jǐn)，常用于分類(lèi)較多、不好管理的界面布局。5. 混合式3.2.2 詳情界面詳情界面是指除

53、了主界面以外的承載信息的界面，根據(jù)其實(shí)現(xiàn)的功能，主要分為查看界面和編輯界面。其中，查看界面是指用來(lái)瀏覽、查看信息的界面；編輯界面是指用來(lái)編輯、修改信息的界面。觀察我們使用的App，其實(shí)除了主界面、特殊的登錄與注冊(cè)界面、彈窗界面以外，應(yīng)該都屬于詳情界面。詳情界面的布局方式可以參考主界面，也就是說(shuō)，前面介紹的幾種布局方式并不是主界面所特有的，它也適用于功能相似的詳情界面。此外，還可根據(jù)界面功能的需求，在框架符合界面設(shè)計(jì)規(guī)范的情況下，設(shè)計(jì)形式各異、風(fēng)格獨(dú)特的詳情界面。3.2.2 詳情界面這類(lèi)App 的查看界面以瀏覽查看物品為主，有的是圖片列表，有的是內(nèi)容至上的大圖展示，目的就是讓消費(fèi)者的目光聚焦于物

54、品，激發(fā)購(gòu)買(mǎi)欲望。所以它的界面往往如圖所示。1. 購(gòu)物類(lèi)App3.2.2 詳情界面它的編輯界面一般包括編輯個(gè)人信息、購(gòu)買(mǎi)參數(shù)設(shè)置、購(gòu)物評(píng)價(jià)等，注意要界面簡(jiǎn)潔、操作簡(jiǎn)單，讓用戶(hù)感到方便、快捷，如圖所示。1. 購(gòu)物類(lèi)App3.2.2 詳情界面這類(lèi)App 的查看界面主要是以瀏覽信息、查看分類(lèi)、閱讀詳情為主，所以在設(shè)計(jì)時(shí)，要便于瀏覽和閱讀，列表式、圖文混排的形式應(yīng)該比較適合，如圖所示。2. 新聞?lì)怉pp3.2.2 詳情界面這類(lèi)App 的編輯界面主要包括個(gè)人設(shè)置、評(píng)論、反饋、搜索等，應(yīng)該便于操作、提供記憶幫助、界面友好，如圖所示。2. 新聞?lì)怉pp3.2.2 詳情界面這類(lèi)App 的查看界面主要是以查看、

55、分類(lèi)、播放為主，界面多采用列表式、手風(fēng)琴式等便于瀏覽、節(jié)省界面空間的類(lèi)型。因其分類(lèi)較多，也會(huì)有類(lèi)似于Pad 端界面的菜單形式，如圖所示。3.音樂(lè)類(lèi)App3.2.2 詳情界面音樂(lè)類(lèi)App 的編輯界面與新聞?lì)惖南嗨疲饕脕?lái)搜索、編輯、設(shè)置等，操作簡(jiǎn)單、界面友好應(yīng)該是設(shè)計(jì)中需要關(guān)注的問(wèn)題，如圖所示。3.音樂(lè)類(lèi)App3.2.2 詳情界面從上面分析的3 種類(lèi)型App 的詳情界面可以看出，詳情界面的設(shè)計(jì)會(huì)根據(jù)App 的不同需求，在界面布局、功能上有所區(qū)別。界面設(shè)計(jì)不能脫離用戶(hù)的需求和體驗(yàn)，有人說(shuō)，“最好的設(shè)計(jì)應(yīng)該是用戶(hù)在使用過(guò)程中感受不到設(shè)計(jì)”。也就是說(shuō)，只有從用戶(hù)的角度出發(fā)，充分考慮用戶(hù)的需求，最大限

56、度地滿(mǎn)足用戶(hù)操作的方便，這種界面設(shè)計(jì)才是最好的設(shè)計(jì)。3.2.3 彈窗界面彈窗界面是指App中用于實(shí)現(xiàn)提示、輸入等功能的窗口，如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層，然后出現(xiàn)彈窗。常見(jiàn)功能如下。（1） 確認(rèn)信息，如圖所示。（2） 選擇和設(shè)置，如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層，然后出現(xiàn)彈窗。常見(jiàn)功能如下。（3） 提示和廣告，如圖所示。（4） 分享，如圖所示。3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類(lèi)3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.3.1 系統(tǒng)規(guī)范界面設(shè)計(jì)規(guī)范主要規(guī)定界面的狀態(tài)欄

57、、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字體、字號(hào)等視覺(jué)元素的信息。下表列出了iOS手機(jī)界面設(shè)計(jì)的參數(shù)規(guī)范。1.iOS界面設(shè)計(jì)規(guī)范適用機(jī)型分辨率狀態(tài)欄高度標(biāo)題欄高度標(biāo)簽欄高度iPhone 6/7/8 plus1080px1920px54px132px132pxiPhone 6/7/8750px1334px40px88px98pxiPhone 5/5C/5S640px1136px40px88px98pxiPhone 4/4S640px960px40px88px98px3.3.1 系統(tǒng)規(guī)范在界面中還會(huì)出現(xiàn)一些圖標(biāo)設(shè)計(jì)，不僅可以輔助用戶(hù)進(jìn)行選擇，而且可以增強(qiáng)界面的美觀性。下表列出了iOS手機(jī)界面圖標(biāo)設(shè)計(jì)規(guī)范。1.i

58、OS界面設(shè)計(jì)規(guī)范適用機(jī)型APP Store主屏幕標(biāo)簽欄導(dǎo)航欄和工具欄iPhone 6/7/8 plus1024px1024px114px114px75px75px66px66pxiPhone 6/7/81024px1024px114px114px50px50px44px44pxiPhone 5/5C/5S1024px1024px114px114px50px50px44px44pxiPhone 4/4S1024px1024px114px114px50px50px44px44px3.3.1 系統(tǒng)規(guī)范在字體方面，iOS 系統(tǒng)中主要使用的中文字體是蘋(píng)方（平時(shí)練習(xí)可以使用微軟雅黑），英文字體是San F

59、rancisco。出現(xiàn)在不同位置的文字，在字號(hào)上有所區(qū)別，下表是以iPhone 6/7/8 為例的文字設(shè)計(jì)規(guī)范。1.iOS界面設(shè)計(jì)規(guī)范標(biāo)題欄標(biāo)簽欄正文列表、表單等3442px2024px2836px3234px3.3.1 系統(tǒng)規(guī)范手機(jī)的屏幕密度有所不同，狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字號(hào)等視覺(jué)元素就會(huì)有所區(qū)別。下面介紹一種通用的布局格式作為參考，如表3-4 所示。在實(shí)際應(yīng)用中，最好根據(jù)不同的屏幕尺寸提供34個(gè)布局方案，根據(jù)密度提供不同分辨率的圖片。2.Android界面設(shè)計(jì)規(guī)范高度圖標(biāo)狀態(tài)欄標(biāo)題欄標(biāo)簽欄標(biāo)簽欄工具圖標(biāo)小圖標(biāo)36px64px74px32px32px48px48px16px16px

60、3.3.2 設(shè)計(jì)制作規(guī)范顏色搭配在界面設(shè)計(jì)中非常重要，對(duì)它的熟練運(yùn)用，會(huì)讓設(shè)計(jì)事半功倍。在移動(dòng)端界面設(shè)計(jì)中的顏色選取主要分為主題層、輔助層、閱讀層和提醒層的顏色。主題層顏色是決定界面風(fēng)格的顏色，這種顏色一般不會(huì)大面積使用，主要出現(xiàn)在狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、主要區(qū)域提醒等地方，如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范不同的顏色帶給用戶(hù)的視覺(jué)感受是不同的，如冷色調(diào)會(huì)讓人覺(jué)得平靜、理智，暖色調(diào)會(huì)讓人覺(jué)得熱情、有活力，圖所示即為這兩種色調(diào)的對(duì)比效果。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范輔助層顏色是對(duì)主題層顏色的補(bǔ)充，一般選用不會(huì)與主題色發(fā)生沖突的顏色，如鄰近色、延伸色、協(xié)調(diào)的補(bǔ)色等，如圖所示。1.