移動UI交互設(shè)計第三章

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

2、”網(wǎng)站界面十年前后的對比效果，可以看出，簡潔、美觀、高效已經(jīng)成為界面設(shè)計的主流趨勢。3.1.1 界面設(shè)計的內(nèi)容啟動圖標(biāo)是手機應(yīng)用程序的入口，它會出現(xiàn)在手機解鎖后的主界面上。如果需要啟動應(yīng)用程序，只需點擊該圖標(biāo)即可。啟動頁是指從用戶啟動應(yīng)用之后到應(yīng)用程序主界面打開之前看到的過渡頁面或動畫，如圖所示。啟動圖標(biāo)是用戶認(rèn)識應(yīng)用程序的第一步，是應(yīng)用程序的標(biāo)志和門戶，其重要性不言而喻。其設(shè)計的原則和方法與我們前面講到的圖標(biāo)設(shè)計是一致的。1. 啟動圖標(biāo)和啟動頁3.1.1 界面設(shè)計的內(nèi)容啟動頁的作用是為了增強應(yīng)用程序啟動時的用戶體驗。最常見的啟動頁形式如圖所示，這些頁面主要用來體現(xiàn)應(yīng)用程序的名稱及價值，讓用戶

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

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

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

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

7、計的內(nèi)容控件是指在框架設(shè)計中出現(xiàn)的各種元素，如按鈕、菜單、對話框、列表、信號條、電池狀態(tài)、標(biāo)簽、面板、滑塊等都是控件，如圖所示。這些控件的功能相對獨立，并且可以重復(fù)使用。3.控件設(shè)計3.1.1 界面設(shè)計的內(nèi)容如果細(xì)化來說，在界面上出現(xiàn)的所有元素都可以稱為控件。在完成了框架設(shè)計，并對界面的結(jié)構(gòu)有所把握之后，就要通過控件的制作來填充框架，完成界面設(shè)計了?？丶男Ч饕蕾囉诮缑嬖O(shè)計的規(guī)范和控件細(xì)節(jié)的表現(xiàn)。界面設(shè)計的規(guī)范主要是指適合于手機設(shè)備和系統(tǒng)特性的、合理的設(shè)計標(biāo)準(zhǔn)，包括控件的大小和間距、界面的布局等內(nèi)容?？丶?xì)節(jié)的表現(xiàn)主要是指控件的顏色、特效、材質(zhì)等效果，需要通過Photoshop、Illus

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

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

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

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

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

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

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

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

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

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

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

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

20、程中感受不到設(shè)計”。也就是說，只有從用戶的角度出發(fā)，充分考慮用戶的需求，最大限度地滿足用戶操作的方便，這種界面設(shè)計才是最好的設(shè)計。3.2.3 彈窗界面彈窗界面是指App中用于實現(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è)計概述3.2 界面設(shè)計分類3.3 界面設(shè)計規(guī)范目錄 CONTENT

21、S3.4 界面設(shè)計項目實戰(zhàn)3.3.1 系統(tǒng)規(guī)范界面設(shè)計規(guī)范主要規(guī)定界面的狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字體、字號等視覺元素的信息。下表列出了iOS手機界面設(shè)計的參數(shù)規(guī)范。1.iOS界面設(shè)計規(guī)范適用機型分辨率狀態(tài)欄高度標(biāo)題欄高度標(biāo)簽欄高度iPhone 6/7/8 plus1080px1920px54px132px132pxiPhone 6/7/8750px1334px40px88px98pxiPhone 5/5C/5S640px1136px40px88px98pxiPhone 4/4S640px960px40px88px98px3.3.1 系統(tǒng)規(guī)范在界面中還會出現(xiàn)一些圖標(biāo)設(shè)計，不僅可以輔助用戶進

22、行選擇，而且可以增強界面的美觀性。下表列出了iOS手機界面圖標(biāo)設(shè)計規(guī)范。1.iOS界面設(shè)計規(guī)范適用機型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)中主要使用的中文字體是蘋方（平時練習(xí)可以使用微軟雅黑），英文字體是San Francisco。出現(xiàn)在不同位置的文字，在字號上有所區(qū)別，下表是以iPhone 6/7/8 為例的文字設(shè)計規(guī)范。1.iOS界面設(shè)計規(guī)范標(biāo)題欄標(biāo)簽欄正文列表、表單等3442px2024px2836px3234px3.3.1 系統(tǒng)規(guī)范手機的屏幕密度有所不同，狀態(tài)欄、標(biāo)題欄、標(biāo)簽欄、圖標(biāo)、字號等視覺元素就會有所區(qū)別。下面介紹一種通用的布局格式作為參考，如表3-4 所示。在實際應(yīng)用中，最好根據(jù)不同的屏幕尺寸提供34個布局方案，根據(jù)密度提供不同分辨率的圖片。2.Android界面設(shè)計規(guī)范高度圖標(biāo)狀態(tài)欄標(biāo)題欄標(biāo)簽欄標(biāo)簽欄工具圖標(biāo)

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

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

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

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

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

29、，繪制狀態(tài)欄、標(biāo)題欄區(qū)域，填充主題層顏色（R：23，G：167，B：254）。雖然兩處的顏色一致，但為了后期方便控件的對齊，建議分別繪制和填充，如右圖所示。3.4.2 主界面設(shè)計制作（4）參看iPhone 手機的狀態(tài)欄，繪制狀態(tài)欄處的控件，包括信號、時間、電池等，如右圖所示。在繪制過程中，要注意各控件的位置和分布，要水平居中對齊。3.4.2 主界面設(shè)計制作（5）在“編輯” “首選項”菜單中，將文字單位修改為“像素”，如下圖所示。3.4.2 主界面設(shè)計制作（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è)計制作（8）設(shè)計3個標(biāo)簽，分別為“首頁” “發(fā)現(xiàn)”和“我”，并為每個標(biāo)簽設(shè)計一個小圖標(biāo)，如圖所示，圖標(biāo)的大小為50px50px，文字大小為20px。需要注意的是，3個標(biāo)簽要將標(biāo)簽欄處三等分，才會讓視覺效果達到最佳。同時，首頁標(biāo)簽的顏色與主題層顏色一致，表明了首頁為當(dāng)前界面。3.4.2 主界面設(shè)計制作（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è)計制作（9）制作界面內(nèi)容區(qū)域部分，繼續(xù)使用參考線做分割。將界面分為“熱門推薦”和“全部分類”兩部分，如圖所示。文字大小為24px，顏色為深灰色（R：134，G：134，B：134）。3.4.2 主界面設(shè)計制作（10）使用“圓角矩形”工具，繪制144px144

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

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

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

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

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