UI界面設計與制作電子教案

教案編號:3課題:第3章UI中的控件設計課時:16課時授課類型:講授+實訓項目目標:●了解控件的基礎(chǔ)知識●掌握按鈕控件的制作●掌握選擇控件的制作●掌握加減控件的制作●掌握分段控件的制作●掌握頁面控件的制作●掌握反饋控件的制作●掌握文本框控件的制作項目重點:●按鈕控件的制作●選擇控件的制作●加減控件的制作●分段控件的制作●頁面控件的制作●反饋控件的制作●文本框控件的制作項目難點:各類控件的規(guī)則項目技能點：按鈕控件的制作、選擇控件的制作、加減控件的制作、分段控件的制作、頁面控件的制作、反饋控件的制作、文本框控件的制作項目教學技巧：1.知識講解2.案例實訓項目過程：（一）課前準備1.授課前準備準備好教學用具和教學設備2.板書課題：第3章UI中的控件設計項目目標:●了解控件的基礎(chǔ)知識●掌握按鈕控件的制作●掌握選擇控件的制作●掌握加減控件的制作●掌握分段控件的制作●掌握頁面控件的制作●掌握反饋控件的制作●掌握文本框控件的制作3.課程引入通過課堂案例效果展示引入UI控件設計的概念按鈕控件選擇控件加減控件分段控件頁面控件反饋控件（二）課程內(nèi)容控件作為UI設計中最基本的交互單位，具有便于操作、便于控制的特點。下面分別從控件的概念及控件的獲取這兩個方面進行控件的基礎(chǔ)講解。3.1.1控件的概念控件是App界面中最基本的交互單位，具有可操作、可控制的特性，如圖所示?？丶?.1.2控件的獲取控件可以從iOS以及MaterialDesign官方網(wǎng)站進行獲取。UI設計師通常會在官方控件的基礎(chǔ)之上再進行設計。按鈕控件作為UI設計中的常用控件之一，具有易于發(fā)現(xiàn)、狀態(tài)明確的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.2.1按鈕控件的概念按鈕控件（ButtonControls）即適用于App的特定操作，由文字或圖標組成，如圖所示。按鈕控件3.2.1按鈕控件的類型1.文字按鈕文字按鈕通常用于不太重要的操作，常被放置于對話框中或卡片中，如圖所示。天天基金App在文字按鈕的文本旁邊放圖標，既能明確操作又能吸引用戶，如圖所示。紅板報App2.線性按鈕線性按鈕包含重要的操作，但不經(jīng)常出現(xiàn)，如圖所示。紅板報App在線性按鈕文本旁邊放圖標，既能明確操作又能吸引用戶，如圖所示。騰訊課堂App3.面性按鈕面性按鈕用于重要的操作，并自身的視覺設計更加突出，如圖所示。網(wǎng)易嚴選App在面性按鈕文本旁邊放圖標，既能明確操作又能吸引用戶，如圖所示。得到App4.切換按鈕切換按鈕可對相關(guān)選項進行分組，如圖所示。備忘錄App3.2.3按鈕控件的規(guī)則1.按鈕的尺寸（1）按鈕高度根據(jù)按鈕的重要程度可以將高度分為高中低三個級別，同時要注意不同尺寸按鈕高度的層級差大于4pt。高：高度在40～56pt，適用于登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步等按鈕，如圖所示。貝殼App途牛App眾安保險App中：高度在24～40pt，適用于個人主頁的關(guān)注、點贊、評論按鈕等，如圖所示。一點資訊App廣發(fā)基金App天弘基金App低：高都在12～24pt，適用于查看更多、標簽、詳情等類型按鈕，如圖所示。小米有品App饅頭商學院App微醫(yī)App（2）按鈕寬度按鈕寬度通常會根據(jù)內(nèi)容來設置，最大寬度應該小于內(nèi)容距離上下的2倍，如圖所示。按鈕寬度的設置當按鈕的重要程度足夠強，則需要加大寬度用于加強視覺，如圖所示。貝殼App途牛App眾安保險App（3）按鈕圓角根據(jù)圓角半徑有三種類型，即直角矩形、圓角矩形、半圓矩形，如圖所示。圓角半徑不同類型的按鈕圓角的設置范圍，通常不大于高度的1/4。如一個高度為24pt的圓角矩形，圓角的尺寸應該不大于6pt，如圖所示。2.按鈕的狀態(tài)按鈕的狀態(tài)包括默認狀態(tài)、點擊狀態(tài)、禁用狀態(tài)、忙碌狀態(tài)，如圖所示。按鈕的不同狀態(tài)3.2.4課堂案例——制作旅游類App按鈕控件【案例設計要求】1.運用軟件Photoshop制作工具欄中的“立即預定”按鈕控件，設計效果、環(huán)境效果如圖所示。2.工具欄尺寸：750px(寬)×98px（高），控件尺寸：80px（高）。3.符合控件的設計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作“立即預定”按鈕控件。設計效果圖環(huán)境效果圖【案例知識要點】使用圓角矩形工具繪制按鈕，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為750像素，高度設為98像素，分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為橘黃色（255、151、1），“描邊”顏色設為無，“半徑”選項設置為16像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，設置如圖所示，按Enter鍵確定操作，效果如圖所示。（3）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設為白色，其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（4）在“圖層”控制面板中，按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“預定按鈕”。單擊“背景”圖層左側(cè)的眼睛圖標，隱藏該圖層，如圖所示，效果如圖所示。旅游類App按鈕控件制作完成。選擇控件作為UI設計中的常用控件之一，具有符合預期、一目了然的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.3.1選擇控件的概念選擇控件（SelectionControls）允許用戶選擇選項，如圖所示。選擇控件3.3.1選擇控件的類型1.單選按鈕單選按鈕指列表中僅可以選一個，如圖所示。網(wǎng)易嚴選App2.復選框復選框指從列表中選擇一個或多個選項，如圖所示。網(wǎng)易嚴選復選框3.開關(guān)開關(guān)指立即激活或停用某項，如圖所示。百度網(wǎng)盤App3.3.3選擇控件的規(guī)則1.選擇控件的尺寸選擇控件的尺寸參考如圖所示。2.選擇控件的狀態(tài)選擇控件的狀態(tài)包括選擇及未選擇狀態(tài)，如圖所示。選擇控件的尺寸參考3.3.4課堂案例——制作旅游類App選擇控件【案例設計要求】1.運用軟件Photoshop制作App選擇控件，設計效果、環(huán)境效果如圖所示。2.控件尺寸：32px。3.符合控件的設計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作選擇控件。設計效果圖環(huán)境效果圖【案例知識要點】使用橢圓工具和圓角矩形工具繪制形狀，使用相應快捷鍵合并形狀并將形狀旋轉(zhuǎn)到適當?shù)慕嵌取＃?）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為32像素，高度設為32像素，分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）單擊“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕，新建圖層。將前景色設為橘黃色（255、151、1），按Alt+Delete組合鍵，用前景色填充圖層，效果如圖所示。（3）選擇“橢圓”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為無，“描邊”顏色設為白色，“設置形狀描邊寬度”選項設為2像素。按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設置，如圖所示，效果如圖所示。（4）將“橢圓1”圖層拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進行復制，生成新的形狀圖層“橢圓1拷貝”。在屬性欄中將“填充”顏色設為無，“描邊”顏色設為橘黃色（255、151、1）。（5）在“圖層”控制面板中，選中“橢圓1”圖層，按住Shift鍵的同時，單擊“圖層1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“未填充”。單擊圖層組左側(cè)的眼睛圖標，隱藏該圖層組，并選中“橢圓1拷貝”圖層，如圖所示，效果如圖所示。（6）將“橢圓1拷貝”圖層拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進行復制，生成新的形狀圖層“橢圓1拷貝2”。按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，按住Alt+Shift組合鍵的同時，拖曳右上角的控制手柄等比例縮小圖形，按Enter鍵確定操作，如圖所示。（7）選擇“橢圓”工具，在屬性欄中將“填充”顏色設為橘黃色（255、151、1），“描邊”顏色設為無，在“屬性”面板中進行其他設置，如圖所示，效果如圖所示。（8）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設置為1像素，在圖像窗口中適當?shù)奈恢美L制圓角矩形，在屬性欄中將“填充”顏色設為白色，“描邊”顏色設為無，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。在“屬性”面板中進行其他設置，如圖所示，效果如圖所示。（9）使用相同的方法再次繪制一個圓角矩形，在“屬性”面板中進行其他設置，如圖所示，效果如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。（10）在“圖層”控制面板中，按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層同時選取，按Ctrl+E組合鍵，合并形狀，如圖所示。（11）按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，如圖所示。按住Alt鍵的同時，將變換參考點拖曳到適當?shù)奈恢?，如圖所示。將指針放在變換框的控制手柄右下角，指針變?yōu)樾D(zhuǎn)圖標，按住Shift鍵的同時，拖曳鼠標將圖形旋轉(zhuǎn)到-45°，如圖所示。按Enter鍵確定操作，效果如圖所示。旅游類App選擇控件制作完成。（12）在“圖層”控制面板中，按住Shift鍵的同時，單擊“橢圓1拷貝”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“已填充”，如圖所示。按住Shift鍵的同時，單擊“未填充”圖層組，將需要的圖層組同時選取。按Ctrl+G組合鍵，群組圖層組并將其命名為“選擇控件”，如圖所示。加減控件作為UI設計中的常用控件之一，具有簡潔高效、操作方便的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.4.1加減控件的概念加減控件又稱為步進器（Steppers），是用于增加或減少增量值的兩段控制，如圖所示。加減控件3.4.2加減控件的類型1.常規(guī)常規(guī)的加減控件通常一段顯示加號，另一段顯示減號，如圖所示。淘寶App2.自定義自定義的加減控件可以運用圖像替換加號和減號，如圖所示。知乎App3.4.3加減控件的規(guī)則尺寸上，高度建議在20～40pt之間，如圖所示。餓了么App步進器中的左右兩個按鈕，需要合理的減去內(nèi)側(cè)的圓角，如圖所示。步進器中左右按鈕的設計3.4.4課堂案例——制作旅游類App加減控件【案例設計要求】1.運用軟件Photoshop制作App選擇控件，設計效果、環(huán)境效果如圖所示。2.加減控件尺寸：48px（寬）×48px（高）。3.符合控件的設計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作加減控件。設計效果圖環(huán)境效果圖【案例知識要點】使用橢圓工具和圓角矩形工具繪制形狀，使用減去頂層形狀命令修飾形狀，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為168像素，高度設為48像素，分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“橢圓”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為無，“描邊”顏色設為深黃色（255、121、0），“設置形狀描邊寬度”選項設為2像素。按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設置，如圖所示，效果如圖所示。（3）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設置為2像素。在圖像窗口中適當?shù)奈恢美L制圓角矩形，在屬性欄中將“填充”顏色設為深黃色（255、121、0），“描邊”顏色設為無，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。在“屬性”面板中進行其他設置，如圖所示，效果如圖所示。（4）在“圖層”控制面板中選中“橢圓1”圖層，將其拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進行復制，生成新的形狀圖層“橢圓1拷貝”，將其拖曳到“圓角矩形1”圖層的上方，如圖所示。（5）選擇“移動”工具，按住Shift鍵的同時，將復制的圓形水平向右拖曳到適當?shù)奈恢?，如圖所示。選擇“橢圓”工具，在屬性欄中將“填充”顏色設為深黃色（255、121、0），“描邊”顏色設為無，效果如圖所示。（6）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設置為2像素。按住Alt鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“屬性”面板中進行設置，如圖所示，效果如圖所示。（7）使用相同的方法，在圖像窗口中適當?shù)奈恢迷俅卫L制一個圓角矩形，在“屬性”面板中進行設置，如圖所示，效果如圖所示。（8）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設為深黃色（255、121、0），其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（9）在“圖層”控制面板中，按住Shift鍵的同時，單擊“橢圓1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“加減控件”，如圖所示。旅游類App加減控件制作完成。分段控件作為UI設計中的常用控件之一，具有內(nèi)容豐富、選項同行的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.5.1分段控件的概念分段控件（SegmentedControls）在相關(guān)且處于相同層次結(jié)構(gòu)的內(nèi)容組之間進行導航。Android中，MaterialDesign稱其為選項卡（Tabs），如圖所示。分段控件3.5.2分段控件的類型1.固定固定選項卡會在一個屏幕上顯示所有選項，它們不會滾動以顯示更多選項，如圖所示。眾安保險App微博App2.滾動滾動標簽沒有固定的寬度，它們是可滾動的，因此某些選項卡將保持在屏幕外，直到滾動為止，如圖所示。網(wǎng)易云音樂App騰訊課堂App3.5.3分段控件的規(guī)則1.分段控件的尺寸（1）分段控件的高度高：高度在40~48pt，適用于App導航欄中。低：高度在28~36pt，適用于App頁面中部。如圖所示。分段控件的高度示意圖（2）分段控件的寬度選項少時，直接進行均分顯示。選項較多，采取定寬模式，寬度最小建議在64pt以上，如圖所示。分段控件寬度示意圖2.分段控件的文字通常分頁器是沒有背景色的，但背景需通過隱藏填充和描邊的方式畫出，這樣才可以通過垂直居中的方式，來確定中間文字的位置，如圖所示。分段控件的文字位置示意圖3.分段控件的下畫線下畫線的位置：可以放置在控件底部或直接在文字下方懸浮。下畫線的高度：不大于2pt。下畫線的寬度：位于控件底部寬度和每個選項的背景區(qū)域等長，在文字下方懸浮則建議在8～6pt（小于文字總寬）。如圖所示。下畫線示意圖3.5.4課堂案例——制作旅游類App分段控件【案例設計要求】1.運用軟件Photoshop制作分段控件，效果如圖所示。2.控件尺寸：750px（寬）×88px（高）。3.符合控件的設計規(guī)則。【案例學習目標】學習使用軟件Photoshop制作分段控件。效果圖【案例知識要點】使用矩形工具、橢圓工具和圓角矩形工具繪制形狀，使用橫排文字工具輸入文字，使用添加圖層蒙版命令和畫筆工具修飾文字，使用減去頂層形狀命令修飾形狀。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為750像素，高度設為88像素，分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（3）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設為深灰色（52、52、52），其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（4）選擇“矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為黃色（241、168、72），“描邊”顏色設為無。在圖像窗口中適當?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設置，如圖所示。（5）在“圖層”控制面板中選中“推薦”文字圖層，將其拖曳到“矩形1”圖層的上方，如圖所示，效果如圖所示。（6）選擇“橫排文字”工具，在適當?shù)奈恢梅謩e輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為淺灰色（80、80、80），其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。（7）分別單擊“哈爾濱”、“云南”和“三亞”文字圖層左側(cè)的眼睛圖標，隱藏圖層。選中“天津”文字圖層，單擊“圖層”控制面板下方的“添加圖層蒙版”按鈕，為圖層添加圖層蒙版，如圖所示。將前景色設為黑色。選擇“畫筆”工具，在屬性欄中單擊“畫筆預設”選項右側(cè)的按鈕，在彈出的面板中選擇需要的畫筆形狀和大小，如圖所示，在圖像窗口中進行涂抹，擦除不需要的部分，效果如圖所示。（8）選擇“橢圓”工具，在屬性欄中將“填充”顏色設為深灰色（52、52、52），“描邊”顏色設為無。按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。在“屬性”面板中進行設置，如圖所示，效果如圖所示。（9）選擇“圓角矩形”工具，在屬性欄中將“半徑”選項設置為2像素。按住Alt鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓角矩形，在“屬性”面板中進行設置，如圖所示，效果如圖所示。（10）使用相同的方法，在圖像窗口中適當?shù)奈恢迷俅卫L制一個圓角矩形，在“屬性”面板中進行設置，如圖所示，效果如圖所示。在“圖層”控制面板中，按住Shift鍵的同時，單擊“矩形1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“分段控件”，如圖所示。旅游類App分段控件制作完成。頁面控件作為UI設計中的常用控件之一，具有小巧便利、狀態(tài)明確的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.6.1頁面控件的概念頁面控件（PageControls）顯示當前頁面在平面頁面列表中的位置。它以一系列小指示點的形式出現(xiàn)，表示可用頁面的打開順序，其中實心點表示當前頁面，如圖所示。頁面控件3.6.2頁面控件的類型1.圓形QQ音樂App輪播圖2.矩形網(wǎng)易云課堂App輪播圖3.6.3頁面控件的規(guī)則1.頁面控件的尺寸圓形：8pt、10pt、12pt矩形：14pt×2pt、16pt×2pt、20pt×3pt如圖所示。頁面控件尺寸示意圖2.頁面控件的狀態(tài)選中時：透明度為100%未選中時：透明度為40%～60如圖所示。頁面控件狀態(tài)示意圖3.6.4課堂案例——制作旅游類App頁面控件【案例設計要求】1.運用軟件Photoshop制作頁面控件，設計效果、環(huán)境效果如圖所示。2.控件尺寸：32px（寬）×2px（高）。3.符合控件的設計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作頁面控件。設計效果圖環(huán)境效果圖【案例知識要點】使用直線工具繪制形狀。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為240像素，高度設為72像素，分辨率設為72像素/英寸，背景內(nèi)容設為橘黃色（255、151、1），如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建，如圖所示。（2）選擇“直線”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為無，“描邊”顏色設為白色，“粗細”選項設為2像素，按住Shift鍵的同時，在適當?shù)奈恢美L制一條直線，在“圖層”控制面板中生成新的形狀圖層“形狀1”，如圖所示。（3）在屬性欄中將“粗細”選項設為1像素，按住Shift鍵的同時，在適當?shù)奈恢迷俅卫L制一條直線，在“圖層”控制面板中生成新的形狀圖層“形狀2”，如圖所示。（4）在“圖層”控制面板中將其“不透明度”選項設為50%，如圖所示，效果如圖所示。（5）將“形狀2”圖層拖曳到“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕上進行復制，生成新的形狀圖層“形狀2拷貝”。選擇“移動”工具，按住Shift鍵的同時，將復制的形狀水平向右拖曳到適當?shù)奈恢?，如圖所示。旅游類App頁面控件制作完成。（6）在“圖層”控制面板中，按住Shift鍵的同時，單擊“形狀1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“頁面控件”，如圖所示。旅游類App頁面控件制作完成。反饋控件作為UI設計中的常用控件之一，具有傳達信息、吸引用戶的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.7.1反饋控件的概念反饋控件即產(chǎn)品與用戶交互的視覺和行為接觸點，如圖所示。反饋控件3.7.2反饋控件的類型1.角標角標（badge），又稱徽標，通常指出現(xiàn)在圖標或文字右上角的紅色圖形，表示有新內(nèi)容或者待處理信息，有帶文字數(shù)字和不帶文字數(shù)字之分，如圖所示。網(wǎng)易嚴選App標簽欄2.吐司提示吐司提示（Toast）通常出現(xiàn)在頂部和中部，浮于頁面上方，無法對其操作，出現(xiàn)一段時間后便會消失，并且在此期間不影響其他正常操作，如圖所示。豆瓣App虎嗅App3.通知條通知條（NoticeBar）通常位于導航欄下方，一般用作系統(tǒng)提醒、活動提醒等通知。重要級別低于Modal高于Toast，如圖所示。QQApp飛豬App百度網(wǎng)盤App4.底部提示欄底部提示欄（Snackbars）是在屏幕底部提供有關(guān)應用程序進程的簡短消息，如圖所示。途牛旅游App3.7.3反饋控件的規(guī)則1.角標（1）角標的尺寸小紅點6～8pt紅色圓形12～16pt（圓角矩形、類圓角矩形的高度）。小紅點與紅色圓形大小關(guān)系1:2如圖所示。角標尺寸示意圖（2）角標的文字字體為非襯線，匹配系統(tǒng)字體。底層為圓形：字體與底層的比例關(guān)系接近1：2底層為圓角矩形：字體與圓角矩形的高度比例同樣接近1:2；字體距上下側(cè)距離：字體距左右側(cè)距離=1:1.2。如圖所示。角標字體設計的示意圖（3）角標的色彩絕大多數(shù)的角標用色都是紅色，部分品牌色為暖色系色彩的App會使用其品牌色作為角標色彩，如圖所示。騰訊視頻App標簽欄角標出現(xiàn)在面性圖標，通常加入白色描邊，如圖所示。今日頭條App標簽欄角標出現(xiàn)在線性圖標，可以考慮不加白色描邊，如圖所示。網(wǎng)易嚴選App標簽欄小紅點通?？梢晕挥趫D標之外，如圖所示。騰訊視頻App標簽欄2.吐司提示（1）吐司提示的尺寸寬度和高度根據(jù)文字來，通常一行不超過12個字，如圖所示。圓角半徑建議為10pt，如圖所示。（2）吐司提示的文字文字尺寸建議為14pt，如圖所示。（3）吐司提示的透明度透明度建議為70%，如圖所示。吐司提示的設計示意圖3.通知條（1）通知條的尺寸高度通常在32pt～44pt，如圖所示。（2）通知條的文字文字尺寸12pt～14pt，如圖所示。通知條的尺寸及文字示意圖（3）通知條的色彩情緒黃色：提醒，如圖所示。飛豬App綠色：通過，如圖所示。百度網(wǎng)盤App紅色：警告，如圖所示。QQApp4.底部提示欄（1）底部提示欄的尺寸寬度：建議在344pt。高度：單行建議在48pt,雙行建議在68pt。（2）底部提示欄的間距針對按鈕建議8pt，針對文字16pt。如圖所示。底部提示欄尺寸示意圖3.7.4課堂案例——制作旅游類App反饋控件【案例設計要求】1.運用軟件Photoshop制作反饋控件，設計效果、環(huán)境效果如圖所示。2.控件尺寸：32px（寬）×2px（高）。3.符合控件的設計規(guī)則。【案例學習目標】學習使用軟件Photoshop制作反饋控件。設計效果圖環(huán)境效果圖【案例知識要點】使用橢圓工具繪制形狀，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設為32像素，高度設為32像素，分辨率設為72像素/英寸，背景內(nèi)容設為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“橢圓”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為紅色（240、60、27），“描邊”顏色設為無。按住Shift鍵的同時，在圖像窗口中適當?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設置，如圖所示，效果如圖所示。（3）選擇“橫排文字”工具，在適當?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設為白色，其他選項的設置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（4）在“圖層”控制面板中，按住Shift鍵的同時，單擊“橢圓1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“反饋控件”，如圖所示。旅游類App反饋控件制作完成。文本框控件作為UI設計中的常用控件之一，具有易于發(fā)現(xiàn)、操作高效的特點。下面分別從概念、類型以及規(guī)則這三個方面進行按鈕控件的講解。3.8.1文本框控件的概念文本框（TextFields）允許用戶輸入和編輯文本，當用戶點擊它時會自動調(diào)出鍵盤。使用文本框來可獲得少量信息，例如電子郵件地址，如圖所示。文本框控件3.8.2文本框控件的類型1.填充文本框填充文本框在視覺上有更強的沖擊力，可以在被其他內(nèi)容和組件包圍時突出強調(diào)，如圖所示。天天基金App2.線性文本框線性文本框在視覺上的沖擊力不是很強，當它們出現(xiàn)在表單之類的地方時，許多文本字段放在一起，它們的弱化有助于簡化布局，如圖所示。智聯(lián)招聘App3.8.3文本框控件的規(guī)則（1）文本框的尺寸寬度根據(jù)文字，高度通常在56pt。（2）文本框的間距文字和圖標距離文本框建議為12pt。（3）文本框的圖標操作圖標建議在24pt。（4）文本框的狀態(tài)文本框的狀態(tài)包括默認狀態(tài)、輸入狀態(tài)、禁用狀態(tài)、錯誤狀態(tài)。默認狀態(tài)時線寬1pt，輸入狀態(tài)時線寬2pt。如圖所示。文本框尺寸示意圖3.8.4課堂案例——制作旅游類App文本框控件【案例設計要求】1.運用軟件Photoshop制作文本框控件，效果如圖所示。2.控件尺寸：750px（寬）×112px（高）。3.符合控件的設計規(guī)則?！景咐龑W習目標】學習使用軟件Photoshop制作文本框控件。效果圖【案例知識要點】使用橫排文字工具輸入文字，使用字符面板調(diào)整文字間距及位置，使用直線