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

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

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

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

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

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

7、計的內容控件是指在框架設計中出現的各種元素，如按鈕、菜單、對話框、列表、信號條、電池狀態、標簽、面板、滑塊等都是控件，如圖所示。這些控件的功能相對獨立，并且可以重復使用。3.控件設計3.1.1 界面設計的內容如果細化來說，在界面上出現的所有元素都可以稱為控件。在完成了框架設計，并對界面的結構有所把握之后，就要通過控件的制作來填充框架，完成界面設計了。控件的效果主要依賴于界面設計的規范和控件細節的表現。界面設計的規范主要是指適合于手機設備和系統特性的、合理的設計標準，包括控件的大小和間距、界面的布局等內容。控件細節的表現主要是指控件的顏色、特效、材質等效果，需要通過Photoshop、Illus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22、行選擇，而且可以增強界面的美觀性。下表列出了iOS手機界面圖標設計規范。1.iOS界面設計規范適用機型APP Store主屏幕標簽欄導航欄和工具欄iPhone 6/7/8 plus1024px1024px114px114px75px75px66px66pxiPhone 6/7/81024px1024px114px114px50px50px44px44pxiPhone 5/5C/5S1024px1024px114px114px50px50px44px44pxiPhone 4/4S1024px1024px114px114px50px50px44px44px3.3.1 系統規范在字體方面，iOS 系

23、統中主要使用的中文字體是蘋方（平時練習可以使用微軟雅黑），英文字體是San Francisco。出現在不同位置的文字，在字號上有所區別，下表是以iPhone 6/7/8 為例的文字設計規范。1.iOS界面設計規范標題欄標簽欄正文列表、表單等3442px2024px2836px3234px3.3.1 系統規范手機的屏幕密度有所不同，狀態欄、標題欄、標簽欄、圖標、字號等視覺元素就會有所區別。下面介紹一種通用的布局格式作為參考，如表3-4 所示。在實際應用中，最好根據不同的屏幕尺寸提供34個布局方案，根據密度提供不同分辨率的圖片。2.Android界面設計規范高度圖標狀態欄標題欄標簽欄標簽欄工具圖標

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

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

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

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

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

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

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

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

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

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

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

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

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