APP設(shè)計必修課:如何設(shè)計出規(guī)范的移動表單組件

今天25學(xué)堂小編跟大家開門見山,直奔主題。眾所周知在很多電商類APP應(yīng)用中,內(nèi)嵌了大量的H5頁面,這樣的頁面不調(diào)用手機系統(tǒng)本身的控件,控件的交互方式以及設(shè)計樣式不受手機系統(tǒng)的限制。

因為H5是HTML生成的,頁面可以同時被瀏覽器和應(yīng)用讀取,所以很多控件的設(shè)計形式與傳統(tǒng)Web界面上的控件非常相似。

下面25學(xué)堂的小編就來跟大家好好的聊一下如何規(guī)范的去設(shè)計出移動端的表單組件。

同時大家可以欣賞:

1、APP表單設(shè)計技巧分享以及移動表單設(shè)計界面賞析

2、一種新穎的APP表單交互設(shè)計模式優(yōu)缺點分析

3、好看的iOS7 APP登錄表單界面設(shè)計欣賞

 

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

 

app表單設(shè)計規(guī)范-單選框

 

2、復(fù)選框

復(fù)選框(CheckBox)控件的作用是為用戶提供一組相互關(guān)聯(lián)但內(nèi)容不兼容的選項,如圖所示。用戶可以選擇一個或者同時選擇多個選項,也可不選擇任何選項。復(fù)選框的標(biāo)簽是對選中狀態(tài)的描述,而清除狀態(tài)的含義必須與選中狀態(tài)明確相反。

因此,復(fù)選框應(yīng)當(dāng)僅用于切換選項的開關(guān)狀態(tài),或者是選擇/取消選擇一個項目。

作為基礎(chǔ)控件之一,復(fù)選框廣泛應(yīng)用于不同平臺的所有產(chǎn)品中。

 

app表單設(shè)計規(guī)范-復(fù)選框

 

3、文本框

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

 

文本框設(shè)計

 

4、下拉框

下拉框(Drop list)又叫下拉菜單,用于從一組互斥值列表中進(jìn)行選擇,如圖所示。用戶能且僅能選擇一個選項。在下拉列表中,用戶只能選擇列表中列出的選項,最終只顯示選擇的一項內(nèi)容。下拉框較為緊湊,對于那些不希望強調(diào)的選項來說非常合適。

其對屏幕空間的占用是固定的,節(jié)省空間,而且與其包含的選項數(shù)量無關(guān)。在某些情況下,和選擇器(Picker)功能是通用的。

當(dāng)選項不多的時候,可以考慮使用原生選擇器。當(dāng)表單中含多個下拉選項時,建議使用下拉框。

下拉框

 

5、表格布局設(shè)計

在很多APP應(yīng)用中,如果有很多信息需要歸類,且這些信息歸類的維度很多,這時就需要使用表格的形式把這些信息歸類,便于用戶篩選出想要的信息。但是移動端盡量少用表格。

如圖所示。歸類的信息偏于展現(xiàn)而非操作類型。

訂單配送的表格設(shè)計

 

以上就是25學(xué)堂根據(jù)淘寶、美團(tuán)APP上的一些表單組件進(jìn)行的 歸類和整理。同時這些內(nèi)容結(jié)合了網(wǎng)上大牛的觀點。

希望這5種表單設(shè)計組件規(guī)范可以幫助你更深的了解,讓你在移動APP設(shè)計當(dāng)中更加規(guī)范、合理。

每天更新,
全站高品質(zhì)素材免費下載!