授課教師：XXX項(xiàng)目四UI組件設(shè)計(jì)授課班級：XXXUtwisienimadminimveniam,quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat.Loremipsumdolorsitamet,consectetueradipiscingCONTENTSOrderNow01課程目標(biāo)及計(jì)劃Utwisienimadminimveniam,quisnostrud02組件分類及練習(xí)Utwisienimadminimveniam,quisnostrudPARTTHREE組件學(xué)習(xí)及隨堂練習(xí)組件介紹組件設(shè)計(jì)是UI組件設(shè)計(jì)的基礎(chǔ)，通過組件不僅能夠?qū)崿F(xiàn)模塊化設(shè)計(jì)，更可以幫助設(shè)計(jì)及開發(fā)高效工作。本章對按鈕組件、選擇組件、加減組件、分段組件、頁面組件、反饋組件以及文本框組件等常用組件的基礎(chǔ)知識及設(shè)計(jì)規(guī)則進(jìn)行系統(tǒng)講解與實(shí)操。通過本章的學(xué)習(xí)，同學(xué)們可以對組件設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識，并快速掌握繪制組件的規(guī)范和方法，為接下來的組件設(shè)計(jì)打下基礎(chǔ)。1.概念：組件是界面中最基本的交互單位，具有可操作、可控制的特性。一、認(rèn)識組件iOS官方組件獲取2.組件的獲?。孩俳M件可以從iOS以及MaterialDesign官方網(wǎng)站進(jìn)行獲取與下載。②在UI工具資源模塊調(diào)用或社區(qū)中下載。按鈕組件選擇組件加減組件分段組件二、組件的分類頁面組件反饋組件文本框組件按鈕組件的概念按鈕組件的類型按鈕組件的規(guī)則課堂案例-制作旅游類App按鈕組件1.按鈕組件的設(shè)計(jì)按鈕組件（ButtonControls）是用于App特定操作的組件，由文字或圖標(biāo)組成，具有易于發(fā)現(xiàn)、狀態(tài)明確的特點(diǎn)。1.1按鈕組件的概念按鈕組件1.文字按鈕文字按鈕即由純文字組成的按鈕組件，這類按鈕通常用于不太重要的操作，并被放置于對話框中或卡片中。1.2按鈕組件的類型天天基金App2.線性按鈕線性按鈕即由線性框和文字共同組合而成的按鈕組件。這類按鈕通常代表比較重要的操作，但不經(jīng)常出現(xiàn)。紅板報(bào)App1.2按鈕組件的類型3.面性按鈕面性按鈕即由面性框和文字共同組合而成的按鈕組件。這類按鈕常用于重要的操作，并由于自身的設(shè)計(jì)，令整體視覺更加突出。網(wǎng)易嚴(yán)選App1.2按鈕組件的類型4.切換按鈕切換按鈕是對相關(guān)選項(xiàng)進(jìn)行分組的按鈕。備忘錄App1.2按鈕組件的類型1.按鈕的尺寸（1）按鈕高度：根據(jù)按鈕的重要程度可以將高度分為高中低三個(gè)級別，同時(shí)要注意不同尺寸按鈕高度的層級差大于4pt。貝殼App天弘基金App小米有品App1.3按鈕組件的規(guī)則（2）按鈕寬度

按鈕寬度通常會根據(jù)內(nèi)容來設(shè)置，最大寬度在內(nèi)容距離上下的2倍。1.3按鈕組件的規(guī)則一般在設(shè)計(jì)的時(shí)候根據(jù)產(chǎn)品實(shí)際情況而定。（3）按鈕圓角根據(jù)圓角半徑有三種類型，即直角矩形、圓角矩形、半圓矩形。1.3按鈕組件的規(guī)則2.按鈕的狀態(tài)按鈕的狀態(tài)包括默認(rèn)狀態(tài)、點(diǎn)擊狀態(tài)、禁用狀態(tài)、忙碌狀態(tài)。設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，應(yīng)該根據(jù)按鈕不同的狀態(tài)做出設(shè)計(jì)上的變化，以便用戶明確如何進(jìn)行產(chǎn)品交互。1.3按鈕組件的規(guī)則使用圓角矩形工具繪制按鈕，使用橫排文字工具輸入文字。設(shè)計(jì)效果圖環(huán)境效果圖1.4課堂案例-制作旅游類App按鈕組件效果圖1.4課堂案例-制作旅游類App按鈕組件使用圓角矩形工具繪制按鈕，使用橫排文字工具輸入文字。選擇組件的概念選擇組件的類型選擇組件的規(guī)則課堂案例-制作旅游類App選擇組件2.選擇組件的設(shè)計(jì)選擇組件（SelectionControls）是允許用戶選擇選項(xiàng)的組件，具有符合預(yù)期、一目了然的特點(diǎn)。2.1選擇組件的概念1.單選按鈕單選按鈕指列表中僅可以選一個(gè)選項(xiàng)。網(wǎng)易嚴(yán)選App2.1選擇組件的類型2.復(fù)選框復(fù)選框指從列表中選擇一個(gè)或多個(gè)選項(xiàng)。網(wǎng)易嚴(yán)選復(fù)選框2.1選擇組件的類型3.開關(guān)開關(guān)指立即激活或停用某項(xiàng)。2.1選擇組件的類型1.選擇組件的尺寸選擇組件中，單選按鈕直徑尺寸建議為20pt，復(fù)選框長度尺寸建議為24pt，開關(guān)的長度尺寸建議為36pt，寬度尺寸建議為20pt

。2.選擇組件的狀態(tài)選擇組件的狀態(tài)包括選擇及未選擇狀態(tài)。選擇組件的尺寸參考2.2選擇組件的規(guī)則使用橢圓工具和圓角矩形工具繪制形狀，使用相應(yīng)快捷鍵合并形狀并將形狀旋轉(zhuǎn)到適當(dāng)?shù)慕嵌?。設(shè)計(jì)效果圖環(huán)境效果圖2.3課堂案例-制作旅游類App選擇組件加減組件的概念加減組件的類型加減組件的規(guī)則課堂案例-制作旅游類App加減組件3.加減組件的設(shè)計(jì)加減組件又稱為步進(jìn)器（Steppers），是用于增加或減少增量值的兩段控制，具有簡潔高效、操作方便的特點(diǎn)。3.1加減組件的概念1.常規(guī)常規(guī)的加減組件通常在中間顯示數(shù)字，在數(shù)字左側(cè)一段顯示減號，在數(shù)字右側(cè)一段顯示加號。3.2加減組件的類型2.自定義自定義的加減組件可以運(yùn)用圖像替換加號和減號。3.2加減組件的類型加減組件的高度尺寸建議在20～40pt之間。3.3加減組件的規(guī)則使用橢圓工具和圓角矩形工具繪制形狀，使用減去頂層形狀命令修飾形狀，使用橫排文字工具輸入文字。設(shè)計(jì)效果圖環(huán)境效果圖3.4課堂案例-制作旅游類App加減組件推薦：unsplash插件分段組件的概念分段組件的類型分段組件的規(guī)則課堂案例-制作旅游類App分段組件4.分段組件的設(shè)計(jì)分段組件（SegmentedControls）在相關(guān)且處于相同層次結(jié)構(gòu)的內(nèi)容組之間進(jìn)行導(dǎo)航，具有內(nèi)容豐富、選項(xiàng)同行的特點(diǎn)。4.1分段組件的概念固定滾動(dòng)1.固定固定類型的分段組件，選項(xiàng)卡會在一個(gè)屏幕上顯示所有選項(xiàng)，它們不會滾動(dòng)以顯示更多選項(xiàng)。眾安保險(xiǎn)App4.2分段組件的類型馬蜂窩旅游App2.滾動(dòng)滾動(dòng)類型的分段組件，標(biāo)簽沒有固定的寬度，它們是可滾動(dòng)的，因此某些選項(xiàng)卡將保持在屏幕外，直到滾動(dòng)為止。4.2分段組件的類型1.分段組件的尺寸（1）分段組件的高度分段組件用于App頂部導(dǎo)航欄中時(shí)，高度需要設(shè)計(jì)的較高，高度在尺寸上建議為40-48pt。分段組件用于App頁面中部時(shí)，高度需要設(shè)計(jì)的較低，高度在尺寸上建議為28-36pt。4.3分段組件的規(guī)則（2）分段組件的寬度選項(xiàng)少時(shí)，直接進(jìn)行均分顯示。選項(xiàng)較多，采取定寬模式，寬度最小建議在64pt以上。4.3分段組件的規(guī)則2.分段組件的文字通常分頁器是沒有背景色的，但背景需通過隱藏填充和描邊的方式畫出，這樣才可以通過垂直居中的方式，來確定中間文字的位置。4.3分段組件的規(guī)則3.分段組件的下劃線分段組件下劃線的位置可以放置在組件底部或直接在文字下方懸浮，其高度應(yīng)不大于

2pt，其寬度應(yīng)該和每個(gè)選項(xiàng)的背景區(qū)域等長，如果在文字下方懸浮則建議在8～6pt（小于文字總寬）。4.3分段組件的規(guī)則使用矩形工具、橢圓工具和圓角矩形工具繪制形狀，使用橫排文字工具輸入文字，使用添加圖層蒙版命令和畫筆工具修飾文字，使用減去頂層形狀命令修飾形狀。效果圖4.4課堂案例-制作旅游類App分段組件5.頁面組件的設(shè)計(jì)頁面組件的概念頁面組件的類型頁面組件的規(guī)則課堂案例-制作旅游類App頁面組件頁面組件（PageControls）顯示當(dāng)前頁面在平面頁面列表中的位置，具有小巧便利、狀態(tài)明確的特點(diǎn)。它以一系列小指示點(diǎn)的形式出現(xiàn)，表示可用頁面的打開順序，其中實(shí)心點(diǎn)表示當(dāng)前頁面。頁面組件5.1頁面組件的概念頁面組件的類型可以根據(jù)形狀分為圓形和矩形。QQ音樂App輪播圖5.2頁面組件的類型1.頁面組件的尺寸圓形尺寸建議為8pt、10pt、12pt。矩形尺寸建議為14pt×2pt、16pt×2pt、20pt×3pt。5.4頁面組件的規(guī)則2.頁面組件的狀態(tài)頁面組件選中時(shí)，透明度為100%，未選中時(shí)，透明度為40%～60%。頁面組件狀態(tài)示意圖5.3頁面組件的規(guī)則設(shè)計(jì)效果圖環(huán)境效果圖5.4課堂案例-制作旅游類App頁面組件6.反饋組件的設(shè)計(jì)反饋組件的概念反饋組件的類型反饋組件的規(guī)則課堂案例-制作旅游類App反饋組件反饋組件即產(chǎn)品與用戶交互的視覺和行為接觸點(diǎn)，具有傳達(dá)信息、吸引用戶的特點(diǎn)。6.1反饋組件的概念1.角標(biāo)角標(biāo)（badge），又稱徽標(biāo)，通常指出現(xiàn)在圖標(biāo)或文字右上角的紅色圖形，表示有新內(nèi)容或者待處理信息，有帶文字?jǐn)?shù)字和不帶文字?jǐn)?shù)字之分。網(wǎng)易嚴(yán)選App標(biāo)簽欄6.2反饋組件的類型2.吐司提示吐司提示（Toast）通常出現(xiàn)在頂部和中部，浮于頁面上方，無法對其操作，出現(xiàn)一段時(shí)間后便會消失，并且在此期間不影響其他正常操作。豆瓣App虎嗅App6.2反饋組件的類型3.通知條通知條（NoticeBar）通常位于導(dǎo)航欄下方，一般用作系統(tǒng)提醒、活動(dòng)提醒等通知。QQApp飛豬App6.2反饋組件的類型4.底部提示欄底部提示欄（Snackbars）是在屏幕底部提供有關(guān)應(yīng)用程序進(jìn)程的簡短消息。途牛旅游App6.2反饋組件的類型1.角標(biāo)（1）角標(biāo)的尺寸在角標(biāo)的尺寸中，小紅點(diǎn)的尺寸建議為6～8pt，紅色圓形的尺寸建議為12～16pt（圓角矩形、類圓角矩形的高度），小紅點(diǎn)與紅色圓形大小關(guān)系通常為1:2。角標(biāo)尺寸示意圖6.3反饋組件的規(guī)則（2）角標(biāo)的文字角標(biāo)的字體應(yīng)該為非襯線，可以和系統(tǒng)字體進(jìn)行匹配。當(dāng)?shù)讓拥膱D形為圓形時(shí)，字體與底層的比例關(guān)系接近1：2。當(dāng)?shù)讓拥膱D形為圓角矩形時(shí)，字體與圓角矩形的高度比例同樣接近1:2；字體距上下側(cè)距離：字體距左右側(cè)距離=1:1.2。角標(biāo)字體設(shè)計(jì)的示意圖6.3反饋組件的規(guī)則（3）角標(biāo)的色彩絕大多數(shù)的角標(biāo)用色都是紅色，部分品牌色為暖色系色彩的App會使用其品牌色作為角標(biāo)色彩。騰訊視頻App標(biāo)簽欄6.3反饋組件的規(guī)則（4）角標(biāo)的層級角標(biāo)出現(xiàn)在面性圖標(biāo)，通常加入白色描邊。京東App標(biāo)簽欄6.3反饋組件的規(guī)則2.吐司提示（1）吐司提示的尺寸（2）吐司提示的文字（3）吐司提示的透明度吐司提示的設(shè)計(jì)示意圖6.3反饋組件的規(guī)則3.通知條（1）通知條的尺寸：通知條的高度尺寸通常在32pt～44pt。（2）通知條的文字：通知條的文字尺寸通常在12pt～14pt。6.3反饋組件的規(guī)則（3）通知條的色彩情緒·黃色：通知條的顏色設(shè)置為黃色，表示提醒。·綠色：通知條的顏色設(shè)置為綠色，表示通過?！ぜt色：通知條的顏色設(shè)置為紅色，表示警告。飛豬App百度網(wǎng)盤AppQQApp6.3反饋組件的規(guī)則4.底部提示欄（1）底部提示欄的尺寸·寬度：底部提示欄的寬度尺寸建議為344pt。·高度：底部提示欄的高度單行尺寸建議為48pt,雙行尺寸建議為68pt。（2）底部提示欄的間距針對按鈕尺寸建議為8pt，針對文字尺寸建議16pt。6.3反饋組件的規(guī)則使用橢圓工具繪制形狀，使用橫排文字工具輸入文字。設(shè)計(jì)效果圖環(huán)境效果圖6.4課堂案例-制作旅游類App反饋組件文本框組件的概念文本框組件的類型文本框組件的規(guī)則課堂案例-制作旅游類App文本框組件7.文本框組件的設(shè)計(jì)文本框（TextFields）允許用戶輸入和編輯文本，具有易于發(fā)現(xiàn)、操作高效的特點(diǎn)，當(dāng)用戶點(diǎn)擊它時(shí)會自動(dòng)調(diào)出鍵盤。使用文本框來可獲得少量信息，例如電子郵件地址。文本框組件7.1文本框組件的概念1.填充文本框：填充文本框在視覺上有更強(qiáng)的沖擊力，可以在被其他內(nèi)容和組件包圍時(shí)突出強(qiáng)調(diào)。天天基金App7.2文本框組件的類型2.線性文本框：線性文本框在視覺上的沖擊力不是很強(qiáng)，當(dāng)它們出現(xiàn)在表單之類的地方時(shí)，許多文本字段放在一起，它們的弱化有助于簡化布局。智聯(lián)招聘App7.2文本框組件的類型（1）文本框的尺寸文本