移動(dòng)UI交互設(shè)計(jì)第三章

1、03 界面設(shè)計(jì)移動(dòng)UI交互設(shè)計(jì)微課版主編：夏琰副主編：余燕周曉紅十三五高等院校 藝術(shù)設(shè)計(jì)規(guī)劃教材3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.1界面設(shè)計(jì)概述界面是人與機(jī)器之間傳遞和交換信息的媒介，是人與機(jī)器互動(dòng)的接口。我們通過手機(jī)界面來(lái)瀏覽信息，通過在手機(jī)界面上點(diǎn)擊、拖曳等方式來(lái)實(shí)現(xiàn)各種操作，所以，手機(jī)界面是我們與手機(jī)發(fā)生互動(dòng)的中間介質(zhì)，如圖所示。3.1界面設(shè)計(jì)概述界面設(shè)計(jì)開始于軟件設(shè)計(jì)之后，UI界面設(shè)計(jì)的發(fā)展過程是與軟件設(shè)計(jì)慢慢分化的。隨著人們對(duì)界面易用性、簡(jiǎn)潔性的要求越來(lái)越高，界面設(shè)計(jì)的重要性才越來(lái)越被重視，如圖所示的是“搜狐

2、”網(wǎng)站界面十年前后的對(duì)比效果，可以看出，簡(jiǎn)潔、美觀、高效已經(jīng)成為界面設(shè)計(jì)的主流趨勢(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è)是指從用戶啟動(dòng)應(yīng)用之后到應(yīng)用程序主界面打開之前看到的過渡頁(yè)面或動(dòng)畫，如圖所示。啟動(dòng)圖標(biāo)是用戶認(rèn)識(shí)應(yīng)用程序的第一步，是應(yīng)用程序的標(biāo)志和門戶，其重要性不言而喻。其設(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í)的用戶體驗(yàn)。最常見的啟動(dòng)頁(yè)形式如圖所示，這些頁(yè)面主要用來(lái)體現(xiàn)應(yīng)用程序的名稱及價(jià)值，讓用戶

3、能迅速熟記該應(yīng)用。1. 啟動(dòng)圖標(biāo)和啟動(dòng)頁(yè)3.1.1 界面設(shè)計(jì)的內(nèi)容還有一些啟動(dòng)頁(yè)，并沒有文字內(nèi)容，如圖所示。曾經(jīng)有調(diào)查數(shù)據(jù)顯示，啟動(dòng)時(shí)間超過3秒用戶就會(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ì)也稱為結(jié)構(gòu)設(shè)計(jì)，框架是指界面的骨架，框架設(shè)計(jì)是在進(jìn)行用戶研究和任務(wù)分析后制訂出的界面整體架構(gòu)。對(duì)于手機(jī)界面來(lái)說，其基本的結(jié)構(gòu)可以分為4 個(gè)

4、部分，狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄和內(nèi)容區(qū)域，如圖所示。界面中的狀態(tài)欄主要用于顯示手機(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ū)域，所以我們這里說的框架設(shè)計(jì)，主要是指內(nèi)容區(qū)域的架構(gòu)設(shè)計(jì)。通俗而言，框架設(shè)計(jì)就是界面里的信息和元素位置如何擺放、大小如何設(shè)置、顏色如何搭配等?？蚣茉O(shè)計(jì)沒有定式，但會(huì)因界面類型、功能的不同而有一些常見的形式，在接下來(lái)的界面設(shè)計(jì)分類中會(huì)有所闡述。2. 框架設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容在進(jìn)行框架設(shè)計(jì)時(shí)，很多設(shè)計(jì)方面的原理、法則會(huì)對(duì)我

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

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

7、計(jì)的內(nèi)容控件是指在框架設(shè)計(jì)中出現(xiàn)的各種元素，如按鈕、菜單、對(duì)話框、列表、信號(hào)條、電池狀態(tài)、標(biāo)簽、面板、滑塊等都是控件，如圖所示。這些控件的功能相對(duì)獨(dú)立，并且可以重復(fù)使用。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容如果細(xì)化來(lái)說，在界面上出現(xiàn)的所有元素都可以稱為控件。在完成了框架設(shè)計(jì)，并對(duì)界面的結(jié)構(gòu)有所把握之后，就要通過控件的制作來(lái)填充框架，完成界面設(shè)計(jì)了?？丶男Ч饕蕾囉诮缑嬖O(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ì)等效果，需要通過Photoshop、Illus

8、trator 等制作軟件來(lái)完成。3.控件設(shè)計(jì)3.1.1 界面設(shè)計(jì)的內(nèi)容需要強(qiáng)調(diào)的是，控件的表現(xiàn)看似簡(jiǎn)單，實(shí)則不然。為了將控件效果做好，細(xì)節(jié)的表現(xiàn)尤為重要，右圖所示的兩個(gè)按鈕是使用Photoshop 軟件來(lái)制作的，左側(cè)的按鈕只添加了“斜面和浮雕”的圖層樣式，右側(cè)的按鈕在此效果上又增加了高光和陰影線，立刻增強(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)，也就是說，做界面設(shè)計(jì)要明確手機(jī)、Pad、電腦等設(shè)備的特性

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

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

11、區(qū)域提醒的位置。1. 唯一主色調(diào)3.1.3 界面設(shè)計(jì)的表現(xiàn)手法多彩色與唯一主色調(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)方式上，開始嘗試數(shù)據(jù)的可視化、信息的圖表化，讓枯燥的數(shù)據(jù)和文字變得直觀，增強(qiáng)了

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

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

14、，在QQ 軟件中，信息列表頁(yè)、個(gè)人設(shè)置頁(yè)就是典型界面，如左圖所示；啟動(dòng)頁(yè)、登錄頁(yè)就是特殊界面，如右圖所示。3.2.1 主界面主界面是指打開應(yīng)用程序后的第一個(gè)界面，在這個(gè)界面上一般會(huì)呈現(xiàn)該應(yīng)用程序的核心功能，如右圖所示。在主界面上，用戶應(yīng)該能夠輕易找到該款A(yù)pp 最主要的功能。在設(shè)計(jì)主界面時(shí)，最先做的應(yīng)該是了解App 的開發(fā)目的和用戶使用的心理，在挖掘核心功能后，再進(jìn)行布局設(shè)計(jì)。3.2.1 主界面這種布局方式泛指對(duì)界面進(jìn)行橫縱等分的布局類型，如圖所示。所有的核心功能井然有序、間隔合理、清晰呈現(xiàn)，用戶能夠快速查看和選擇，視覺效果穩(wěn)定。1. 九宮格式3.2.1 主界面最早的九宮格是指橫縱各3個(gè)格，但

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

16、操作效率。3.手風(fēng)琴式3.2.1 主界面手風(fēng)琴式和列表式在符號(hào)表示上是有所區(qū)別的。如果有二級(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í)再展開，如左所示。它的優(yōu)勢(shì)是不占用寶貴的屏幕空間，讓用戶聚焦于內(nèi)容，在交互體驗(yàn)上更加自然，和原界面融合得較好，如右圖所示。4.側(cè)滑式3.2.1 主界面這種布局方式是利用了格式塔原理中的相似法則，通過形狀進(jìn)行分組，如圖所示。它的優(yōu)勢(shì)在于形式活潑、不拘謹(jǐn)，常用

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

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

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

20、程中感受不到設(shè)計(jì)”。也就是說，只有從用戶的角度出發(fā)，充分考慮用戶的需求，最大限度地滿足用戶操作的方便，這種界面設(shè)計(jì)才是最好的設(shè)計(jì)。3.2.3 彈窗界面彈窗界面是指App中用于實(shí)現(xiàn)提示、輸入等功能的窗口，如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層，然后出現(xiàn)彈窗。常見功能如下。（1） 確認(rèn)信息，如圖所示。（2） 選擇和設(shè)置，如圖所示。3.2.3 彈窗界面彈窗界面的呈現(xiàn)方式是在界面上覆蓋一層黑色半透明層，然后出現(xiàn)彈窗。常見功能如下。（3） 提示和廣告，如圖所示。（4） 分享，如圖所示。3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENT

21、S3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.3.1 系統(tǒng)規(guī)范界面設(shè)計(jì)規(guī)范主要規(guī)定界面的狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字體、字號(hào)等視覺元素的信息。下表列出了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ì)，不僅可以輔助用戶進(jìn)

22、行選擇，而且可以增強(qiáng)界面的美觀性。下表列出了iOS手機(jī)界面圖標(biāo)設(shè)計(jì)規(guī)范。1.iOS界面設(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 系

23、統(tǒng)中主要使用的中文字體是蘋方（平時(shí)練習(xí)可以使用微軟雅黑），英文字體是San Francisco。出現(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)等視覺元素就會(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)

24、小圖標(biāo)36px64px74px32px32px48px48px16px16px3.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ī)范不同的顏色帶給用戶的視覺感受是不同的，如冷色調(diào)會(huì)讓人覺得平靜、理智，暖色調(diào)會(huì)讓人覺得熱情、有活力，圖所示即為這兩種色調(diào)的對(duì)比效果。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范輔助層顏色是對(duì)主題層顏色的補(bǔ)充，一般選

25、用不會(huì)與主題色發(fā)生沖突的顏色，如鄰近色、延伸色、協(xié)調(diào)的補(bǔ)色等，如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范閱讀層的配色主要考慮信息的視覺清晰、層次清楚，所以灰度是最適合體現(xiàn)該特性的顏色。灰度的對(duì)比要兼顧視覺的舒適感、層級(jí)的清晰度，不要過于強(qiáng)烈，也不要明度過于接近，如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范提醒層的目的是能快速引起用戶的注意，一般會(huì)使用純度較高的顏色，但也要根據(jù)界面的整體配色進(jìn)行分析，把握合適的對(duì)比，不要引起用戶的不舒適感，如圖所示。1. 顏色3.3.2 設(shè)計(jì)制作規(guī)范界面設(shè)計(jì)的布局主要是考慮元素之間的對(duì)齊、分布方式。我們?cè)谥谱鹘缑鏁r(shí)，往往需要借助參考線，以保證相同元素能夠?qū)R、

26、各元素間的距離能夠合理，如左圖所示。此外，每個(gè)控件都需要考慮空間布局。例如，右圖所示的界面，我們?cè)诜胖脴?biāo)題欄左側(cè)的小圖標(biāo)時(shí)，要保證其與標(biāo)題欄上、左、下邊緣的距離一致，這樣才會(huì)讓布局看起來(lái)規(guī)范。2. 布局3.3.2 設(shè)計(jì)制作規(guī)范如圖所示，標(biāo)簽欄處的幾個(gè)圖標(biāo)在分布上也需要注意間距的相等，這樣才會(huì)讓布局協(xié)調(diào)，達(dá)到良好的視覺效果。2. 布局3.3.2 設(shè)計(jì)制作規(guī)范界面設(shè)計(jì)涉及的圖形主要有圖標(biāo)、頭像等。這里的圖標(biāo)與前面章節(jié)講到的圖標(biāo)從設(shè)計(jì)上來(lái)說有所不同，在界面中出現(xiàn)的圖標(biāo)強(qiáng)調(diào)簡(jiǎn)潔、一致和易識(shí)別性，如圖所示。3.圖標(biāo)樣式3.3.2 設(shè)計(jì)制作規(guī)范在同一個(gè)App 中出現(xiàn)的小圖標(biāo)應(yīng)該是一套的，就是說它們的透視角

27、度、表達(dá)形式、附加元素等應(yīng)該一致，不需要刻畫太多的細(xì)節(jié)，要提煉出最易識(shí)別的部分構(gòu)成圖標(biāo)的形狀。這些圖標(biāo)除了能夠濃縮文字信息外，還起到了美化界面的作用，是界面設(shè)計(jì)中不可缺少的部分，如圖所示。3.圖標(biāo)樣式3.1 界面設(shè)計(jì)概述3.2 界面設(shè)計(jì)分類3.3 界面設(shè)計(jì)規(guī)范目錄 CONTENTS3.4 界面設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)3.4.1 設(shè)計(jì)思路界面設(shè)計(jì)，一般分為原創(chuàng)設(shè)計(jì)和優(yōu)化設(shè)計(jì)兩部分。原創(chuàng)設(shè)計(jì)是從零開始，對(duì)界面進(jìn)行設(shè)計(jì)制作；優(yōu)化設(shè)計(jì)是在已有界面設(shè)計(jì)的基礎(chǔ)上，提出修改或改進(jìn)意見，進(jìn)行二次設(shè)計(jì)。本項(xiàng)目是對(duì)“智力題大考問”這款A(yù)pp 進(jìn)行的基于iOS 系統(tǒng)（iPhone 6/7/8 屏幕尺寸）的原創(chuàng)設(shè)計(jì)。該款A(yù)pp

28、是休閑益智類的應(yīng)用程序，通過智力題問答、與朋友分享的形式增強(qiáng)娛樂性。3.4.1 設(shè)計(jì)思路主題層的顏色定義為UI 界面中最常用的藍(lán)色，這種顏色會(huì)增強(qiáng)用戶的信賴感，也會(huì)給人以冷靜、有智慧的感覺。輔助層、提醒層的顏色信息如圖所示。閱讀層使用灰度顏色，字體為微軟雅黑。3.4.2 主界面設(shè)計(jì)制作（1）打開Photoshop 軟件，新建文件，文件的寬為750px，高為1334px，分辨率為72ppi。（2）在制作之前，參照iOS 系統(tǒng)規(guī)范，用參考線將畫布進(jìn)行分割。狀態(tài)欄高為40px，標(biāo)題欄高為88px，標(biāo)簽欄高為98px。左右各留出18px邊距，如右圖所示。3.4.2 主界面設(shè)計(jì)制作（3）使用“矩形”工具

29、，繪制狀態(tài)欄、標(biāo)題欄區(qū)域，填充主題層顏色（R：23，G：167，B：254）。雖然兩處的顏色一致，但為了后期方便控件的對(duì)齊，建議分別繪制和填充，如右圖所示。3.4.2 主界面設(shè)計(jì)制作（4）參看iPhone 手機(jī)的狀態(tài)欄，繪制狀態(tài)欄處的控件，包括信號(hào)、時(shí)間、電池等，如右圖所示。在繪制過程中，要注意各控件的位置和分布，要水平居中對(duì)齊。3.4.2 主界面設(shè)計(jì)制作（5）在“編輯” “首選項(xiàng)”菜單中，將文字單位修改為“像素”，如下圖所示。3.4.2 主界面設(shè)計(jì)制作（6）制作標(biāo)題欄處的文字和控件。文字大小為34px，在標(biāo)題欄中水平、垂直居中顯示。右側(cè)的圖標(biāo)大小為44px44px，放置在標(biāo)題欄右側(cè)，注意其與

30、標(biāo)題欄上、右、下的距離要一致，如圖所示。（7）使用“矩形選框”工具繪制標(biāo)簽欄處的形狀，填充淺灰色（R：248，G：248，B：248），為其設(shè)置描邊的圖層樣式，描邊寬度為1px，顏色為深灰色（R：134，G：134，B：134）。3.4.2 主界面設(shè)計(jì)制作（8）設(shè)計(jì)3個(gè)標(biāo)簽，分別為“首頁(yè)” “發(fā)現(xiàn)”和“我”，并為每個(gè)標(biāo)簽設(shè)計(jì)一個(gè)小圖標(biāo)，如圖所示，圖標(biāo)的大小為50px50px，文字大小為20px。需要注意的是，3個(gè)標(biāo)簽要將標(biāo)簽欄處三等分，才會(huì)讓視覺效果達(dá)到最佳。同時(shí)，首頁(yè)標(biāo)簽的顏色與主題層顏色一致，表明了首頁(yè)為當(dāng)前界面。3.4.2 主界面設(shè)計(jì)制作（6）制作標(biāo)題欄處的文字和控件。文字大小為34px

31、，在標(biāo)題欄中水平、垂直居中顯示。右側(cè)的圖標(biāo)大小為44px44px，放置在標(biāo)題欄右側(cè)，注意其與標(biāo)題欄上、右、下的距離要一致，如圖所示。（7）使用“矩形選框”工具繪制標(biāo)簽欄處的形狀，填充淺灰色（R：248，G：248，B：248），為其設(shè)置描邊的圖層樣式，描邊寬度為1px，顏色為深灰色（R：134，G：134，B：134）。3.4.2 主界面設(shè)計(jì)制作（9）制作界面內(nèi)容區(qū)域部分，繼續(xù)使用參考線做分割。將界面分為“熱門推薦”和“全部分類”兩部分，如圖所示。文字大小為24px，顏色為深灰色（R：134，G：134，B：134）。3.4.2 主界面設(shè)計(jì)制作（10）使用“圓角矩形”工具，繪制144px144

32、px大小、圓角半徑為20px 的圓角矩形，制作右圖所示的“熱門推薦”部分的分類。為每個(gè)分類設(shè)計(jì)一個(gè)小圖標(biāo)，并添加文字內(nèi)容，文字大小為20px。（如果分類內(nèi)容多，我們會(huì)讓最后一個(gè)圖形顯示一半，表示該處內(nèi)容可以向左滑動(dòng)繼續(xù)查看。）3.4.2 主界面設(shè)計(jì)制作（11）“全部分類”部分的內(nèi)容使用列表式的界面布局方式制作。使用“圓角矩形”工具繪制列表的形狀，高為120px，圓角半徑為10px，填充顏色為淺灰色（R：248，G：248，B：248）。并為其設(shè)置描邊的圖層樣，描邊寬度為1px，顏色為深灰色（R：134，G：134，B：134），如右上圖所示。（12）將這個(gè)列表按照同樣的間距向下復(fù)制，直到標(biāo)簽欄

33、處。為了顯示還有更多的列表，會(huì)將最后一個(gè)列表做成只顯示一小部分的效果，如右下圖所示。3.4.2 主界面設(shè)計(jì)制作（13）根據(jù)分類信息，在列表上制作圖標(biāo)和文字信息，如圖所示，左側(cè)圖標(biāo)大小為50px50px，文字大小為32px，顏色為深灰色（R：134，G：134，B：134）。在列表右側(cè)，添加方向向右的三角符號(hào)，表示單擊該列表可以進(jìn)行界面的跳轉(zhuǎn)。3.4.2 主界面設(shè)計(jì)制作（14）以此方法，可以完成其他列表的制作，如右上圖所示。（15）在標(biāo)簽欄中添加兩個(gè)提醒標(biāo)記，顏色為提醒色。這樣，我們就完成了主界面的制作，最終效果如右下圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作（1）制作設(shè)置界面?？?/p>

34、以將前面完成的主界面另存為“設(shè)置界面”文件，保留界面中的狀態(tài)欄、標(biāo)簽欄，將標(biāo)題欄處的文字改為“設(shè)置”，右側(cè)的圖標(biāo)刪除，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作（2）該設(shè)置界面的啟動(dòng)按鈕位于主界面標(biāo)題欄的右側(cè)，單擊啟動(dòng)按鈕進(jìn)入該界面后，應(yīng)該有用于回到主界面的返回按鈕。所以，我們?cè)跇?biāo)題欄的左側(cè)添加用于返回的圖標(biāo)，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作（3）將背景層填充淺灰色（R：243，G：243，B：243）。使用參考線對(duì)界面進(jìn)行分割，制作列表式的界面，如圖所示。列表的高度為96px，根據(jù)功能對(duì)其進(jìn)行分組，每組間的距離為40px。3.4.3 詳情界面設(shè)計(jì)制作

35、1. 編輯界面的制作（4）按照參考線，使用“矩形選框”工具繪制列表形狀，將其填充為白色，描邊為1px，顏色為深灰色（R：134，G：134，B：134），如圖所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作（5）給每個(gè)列表添加文字信息，文字的大小為34px，顏色為黑色。在列表的右側(cè)添加用于界面跳轉(zhuǎn)的圖標(biāo)，用開關(guān)控制的功能在列表右側(cè)添加設(shè)置開關(guān)，如圖3-75所示。3.4.3 詳情界面設(shè)計(jì)制作1. 編輯界面的制作（6）在列表的右側(cè)添加相關(guān)的文字信息，文字的大小為30px，顏色為深灰色（R：134，G：134，B：134）。至此，完成了編輯界面最終效果的制作，如圖所示。3.4.3 詳情界面設(shè)計(jì)

36、制作2. 查看界面的制作（1）制作答題界面。將設(shè)置頁(yè)面另存為“答題”頁(yè)面，去掉下面標(biāo)簽欄部分，將標(biāo)題欄處的文字改為“偵探推理”，在標(biāo)題欄右側(cè)添加用于更多選項(xiàng)的圖標(biāo)，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作（2）使用參考線分割畫布。題目處高為100px，題干處高為340px，各答案處高為96px，每部分間距為40px，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作（3）在題目部分，繪制70px70px 的圓形，顏色填充為橙色（R：228，G：126，B：44），制作標(biāo)題數(shù)字。同時(shí)在右側(cè)繪制用于分享的圖標(biāo)，大小為44px44px，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作（4）制作題干部分，文字大小為30px，顏色為黑色。要注意文字的排版和對(duì)齊，在空間內(nèi)做好布局，如圖所示。3.4.3 詳情界面設(shè)計(jì)制作2. 查看界面的制作（5）制作答案部分，將答案部分做成帶有復(fù)選框的形式，如圖 所示。文字