移動(dòng)端UI設(shè)計(jì)項(xiàng)目實(shí)戰(zhàn)教程 項(xiàng)目四-任務(wù)二-表單控件設(shè)計(jì)-任務(wù)實(shí)現(xiàn)

表單控件設(shè)計(jì)目錄1、表單的概念及常見類型2、任務(wù)實(shí)現(xiàn)表單的概念及常見類型01一、表單的概念及常見類型

在PC端后臺(tái)設(shè)計(jì)中，我們會(huì)經(jīng)常見到各種表單設(shè)計(jì)，包括輸入框、單選、多選等各種不同類別的表單。而對(duì)于App而言，除特定的App外，注冊(cè)會(huì)員、身份認(rèn)證的功能是比較常見的表單設(shè)計(jì)。什么是表單？什么是表單？

表單可以收集用戶的信息和反饋意見，是用戶和產(chǎn)品管理者之間溝通的橋梁。表單從結(jié)構(gòu)上可以分為：表現(xiàn)層、交互層、反饋層。

其中表現(xiàn)層主要由文本域、選擇框、標(biāo)簽、地址、按鈕等表單對(duì)象組成；交互層主要由鍵盤、日期控件、選擇控件、調(diào)節(jié)滑塊等對(duì)象組成；反饋層主要由實(shí)時(shí)反饋、結(jié)果反饋等對(duì)象組成。1、單選框

單選框（Radio）用于一組相關(guān)但互斥的選項(xiàng)中，用戶能且僅能選擇一個(gè)選項(xiàng)，如圖所示。單選框選項(xiàng)的數(shù)量不宜過多，選項(xiàng)展示的是程序選項(xiàng)，而非數(shù)據(jù)。如果屏幕空間足夠，且選項(xiàng)內(nèi)容重要需要羅列展示出來，可以使用選項(xiàng)按鈕。否則，應(yīng)使用下拉列表控件。當(dāng)只有兩個(gè)選項(xiàng)的時(shí)候，且兩個(gè)選項(xiàng)的含義相反，可使用開關(guān)控件。

2、復(fù)選框

復(fù)選框（CheckBox）控件的作用是為用戶提供一組相互關(guān)聯(lián)但內(nèi)容不兼容的選項(xiàng)，如圖所示。用戶可以選擇一個(gè)或者同時(shí)選擇多個(gè)選項(xiàng)，也可不選擇任何選項(xiàng)。復(fù)選框的標(biāo)簽是對(duì)選中狀態(tài)的描述，而清除狀態(tài)的含義必須與選中狀態(tài)明確相反。因此，復(fù)選框應(yīng)當(dāng)僅用于切換選項(xiàng)的開關(guān)狀態(tài)，或者是選擇／取消選擇一個(gè)項(xiàng)目。作為基礎(chǔ)控件之一，復(fù)選框廣泛應(yīng)用于不同平臺(tái)的所有產(chǎn)品中。3、文本框

文本框（TextField）是可以接受用戶輸入文本的圓角區(qū)域，如圖所示。當(dāng)用戶單擊文本輸入框時(shí)顯示鍵盤。當(dāng)用戶單擊鍵盤上的回車鍵時(shí)，應(yīng)用程序根據(jù)文本框輸入的內(nèi)容進(jìn)行相應(yīng)處理。在你決定使用文本框前，先考慮是否有其他控件能讓用戶的輸入變得更簡(jiǎn)單，如選擇器或者列表。能讓用戶選擇的，就不要讓用戶輸入。4、下拉框

下拉框（Droplist）又叫下拉菜單，用于從一組互斥值列表中進(jìn)行選擇，如日期選項(xiàng)。用戶能且僅能選擇一個(gè)選項(xiàng)。在下拉列表中，用戶只能選擇列表中列出的選項(xiàng)，最終只顯示選擇的一項(xiàng)內(nèi)容。下拉框較為緊湊，對(duì)于那些不希望強(qiáng)調(diào)的選項(xiàng)來說非常合適。其對(duì)屏幕空間的占用是固定的，節(jié)省空間，而且與其包含的選項(xiàng)數(shù)量無關(guān)。在某些情況下，和選擇器（Picker）功能是通用的。當(dāng)選項(xiàng)不多的時(shí)候，可以考慮使用原生選擇器。當(dāng)表單中含多個(gè)下拉選項(xiàng)時(shí)，建議使用下拉框。5、表格布局設(shè)計(jì)

在很多APP應(yīng)用中，如果有很多信息需要?dú)w類，且這些信息歸類的維度很多，這時(shí)就需要使用表格的形式把這些信息歸類，便于用戶篩選出想要的信息。但是移動(dòng)端盡量少用表格。歸類的信息偏于展現(xiàn)而非操作類型。任務(wù)實(shí)現(xiàn)022、任務(wù)實(shí)現(xiàn)：

在登錄前該APP有一個(gè)了解用戶目前婚育狀態(tài)的信息選擇頁(yè)面，如圖中所示，【備孕】及【懷孕】狀態(tài)選項(xiàng)組件大致相同，在下面的過程實(shí)現(xiàn)統(tǒng)一說明；【寶寶已出生】狀態(tài)涉及單選框組件，在過程實(shí)現(xiàn)中將詳細(xì)說明。

1、新建一個(gè)以iPhone62倍圖為設(shè)計(jì)基準(zhǔn)，尺寸750×1334px的畫布，設(shè)置顏色模式為RGB，分辨率為72。

2、建好后按快捷鍵【ctrl+R】調(diào)出參考線，設(shè)置頂部電量欄高度40px，標(biāo)題欄高度88px，畫布左右安全距離各為40px。拉好參考線，置入iOS組件里的電量欄，并在標(biāo)題欄輸入標(biāo)題文字【當(dāng)前狀態(tài)】，文字參數(shù)：蘋方，粗體，42pt，#333333，對(duì)齊如圖。3、繪制一個(gè)寬750px，高530px的矩形，并添加玫紅色#ff66cc的外投影效果，投影效果參數(shù)如圖。4、在矩形上添加事先繪制好的狀態(tài)圖標(biāo)，灰色為選中前狀態(tài)，單個(gè)圖標(biāo)180x180px尺寸，有顏色為選中后狀態(tài)，單個(gè)圖標(biāo)220x220px尺寸。5、目前默認(rèn)選中【備孕狀態(tài)】，輸入相關(guān)狀態(tài)文字，文字參數(shù)：蘋方，中等，36pt，#666666。效果如圖。5、目前默認(rèn)選中【備孕狀態(tài)】，輸入相關(guān)狀態(tài)文字，文字參數(shù)：蘋方，中等，36pt，#666666。效果如圖。6、設(shè)置下拉選項(xiàng)高度為160px，輸入項(xiàng)目項(xiàng)目文字，文字1參數(shù)：蘋方，中等，22px，#666666，文字2參數(shù)：蘋方，中等，30px，#333333。并用橫線進(jìn)行分割，橫線參數(shù)：1px，寬670px，#eaeaea。完成選項(xiàng)內(nèi)容，整體以無邊框表格的形式呈現(xiàn)。7、繪制一個(gè)寬360px，高78px，四邊圓角為20像素的圓角矩形作為登錄按鈕，并在上方輸入文字【確認(rèn)】，文字參數(shù)：蘋方，中等，36px，#ffffff。按鈕顏色為#ff70e4到fe7883的-90°線性漸變色。按鈕居中并調(diào)整至畫面中合適位置。添加輔助圓圈，效果圖如下：。8、點(diǎn)擊【請(qǐng)選擇天數(shù)】，可進(jìn)入選項(xiàng)樣式界面（其他選項(xiàng)選擇形式同此），效果如圖：9、在當(dāng)前界面基礎(chǔ)上繪制一個(gè)750x1334px大小的矩形遮罩，并填充#000000純黑色，設(shè)置不透明度65%。10、緊接著在黑色不透明度遮罩上繼續(xù)繪制一個(gè)750x690px的矩形，并填充#ffffff純白色，在上方輸入選項(xiàng)相關(guān)數(shù)字及文字，并調(diào)整至合適位置，最終效果如圖：11、按照【備孕】頁(yè)面設(shè)計(jì)形式，依次完成【懷孕】狀態(tài)及【寶寶已出生】狀態(tài)。其中【寶寶已出生】中的【填寫寶寶姓名】及【輸入寶寶生日】為文本框，用戶單擊后可直接輸入文本。12、【寶寶性別