如何設(shè)計(jì)表單頁(yè)

時(shí)間：2023-09-14 15:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-14 15:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何設(shè)計(jì)表單頁(yè)：前言

相信很多設(shè)計(jì)師很少留意表單的設(shè)計(jì)，例如每個(gè) APP 中默默無(wú)聞的設(shè)置頁(yè)、功能列表頁(yè)；表單頁(yè)也稱作 Cell 和 list，在視覺(jué)層面很難設(shè)計(jì)得出彩，以至于很多人都忽視這一塊；我看過(guò)有設(shè)計(jì)師把待輸入、選擇類型做成一樣的文本顏色，又或者可編輯與置灰狀態(tài)一樣…… 這些在視覺(jué)層面看起來(lái)好像沒(méi)什么問(wèn)題，但在使用過(guò)程中是否可點(diǎn)擊、可輸入不明確的話，用戶就會(huì)困惑、覺(jué)得體驗(yàn)爛；

但是作為UI設(shè)計(jì)師，不應(yīng)該僅僅為了做出好看的頁(yè)面、畫(huà)個(gè)皮而已，用戶體驗(yàn)也至關(guān)重要；其實(shí)表單頁(yè)有不同的類型，視覺(jué)如何表達(dá)可點(diǎn)擊、可輸入、不可編輯等等狀態(tài)，同樣也需要UI去思考，不能忽視。

表單的類型與設(shè)計(jì)

表單的類型有很多，但視覺(jué)層面來(lái)講常規(guī)的大概只有這幾種：輸入類型、跳轉(zhuǎn)/選擇類型、顯示類型、按鈕；

輸入類型：分為短文本、長(zhǎng)文本輸入、以及左對(duì)齊、右對(duì)齊輸入；輸入文本長(zhǎng)短是產(chǎn)品功能決定的，但輸入的對(duì)齊方式一般是取決于排版；

一般而言左對(duì)齊比較合適，因?yàn)檩斎胛谋镜臅r(shí)候文本從左往右出現(xiàn)是比較自然的，與書(shū)寫(xiě)的方向保持一致；但有一種情況則采用右對(duì)齊，就是多種類型表單放在一個(gè)頁(yè)面的時(shí)候（如上圖），操作區(qū)都是右對(duì)齊的，那么輸入也保持右對(duì)齊會(huì)令頁(yè)面排版整齊些；另外在采用右對(duì)齊方式的時(shí)候需要注意：設(shè)計(jì)輸入的最大范圍（如下圖）；這樣避免輸入的文本與標(biāo)題重疊。




iOS 原生的列表設(shè)計(jì)有一點(diǎn)非常有意思，當(dāng)頁(yè)面大多數(shù)列表都是輸入類型的話，選擇類型的表單會(huì)遷就輸入類型，文本采用左對(duì)齊的方式；估計(jì)他的設(shè)計(jì)原則是少數(shù)服從多數(shù)..







跳轉(zhuǎn)/選擇類型：雖然都是文本+箭頭，但其實(shí)兩者還是有些區(qū)別；跳轉(zhuǎn)類型不一定帶文本，而且置灰狀態(tài)一般在于有無(wú)箭頭；但選擇類型則必定帶有文本與箭頭，而置灰狀態(tài)在于文本；

在 Apple Music 的跳轉(zhuǎn)列類型，直接用帶顏色的純文本代表可點(diǎn)擊跳轉(zhuǎn)，去掉了箭頭，這一點(diǎn)在選擇類型的列表則無(wú)法做到；

在選擇類型中，一般還有兩種設(shè)計(jì)，用明亮的主色強(qiáng)調(diào)當(dāng)前的選擇內(nèi)容，或者用灰色文本提示當(dāng)前選擇；兩種做法都是都是對(duì)的，如果你留意過(guò)iOS系統(tǒng)的設(shè)置頁(yè)就會(huì)發(fā)現(xiàn)，也會(huì)存在這兩種樣式；

至于用法，我個(gè)人覺(jué)得是以重要程度或者需要區(qū)分可否點(diǎn)擊，如上圖的“送貨地址”頁(yè)面，“國(guó)家/地區(qū)”是不可點(diǎn)擊的，而“省/市”則可以點(diǎn)擊，如果同樣用灰色就很難表達(dá)是否可點(diǎn)擊了；所以有時(shí)候設(shè)計(jì)需要具體問(wèn)題具體分析，不能為了規(guī)范而規(guī)范；







顯示類型：看起來(lái)很簡(jiǎn)單，就是單純的顯示信息；但有一個(gè)問(wèn)題相信大家都想過(guò)，那就是該突出標(biāo)題還是內(nèi)容呢？該內(nèi)容左對(duì)齊還是右對(duì)齊？

一般政治正確的都說(shuō)要突出內(nèi)容，其實(shí)也是要視情況而定，不能盲目突出內(nèi)容；我個(gè)人總結(jié)一個(gè)評(píng)判標(biāo)準(zhǔn)就是：內(nèi)容能否表達(dá)自我；意思是一個(gè)內(nèi)容在沒(méi)有標(biāo)題的情況下，可否說(shuō)明本身的含義；如果可以內(nèi)容本身能表達(dá)自我的含義，那么標(biāo)題弱化（甚至不需要標(biāo)題），如地址、電話號(hào)碼；反之內(nèi)容不能表達(dá)自我，那么標(biāo)題強(qiáng)化；

左、右對(duì)齊的問(wèn)題，一般是基于信息分組、排版的考慮；例如京東的訂單詳情頁(yè)分了兩種對(duì)齊方式，價(jià)格的部分是以右對(duì)齊的方式顯示；一方面可以排版平衡些，不至于右邊全空，同時(shí)與訂單信息區(qū)別開(kāi)來(lái)以突出價(jià)格；




按鈕類型：只需要考慮表層的視覺(jué)細(xì)節(jié)以及不同的狀態(tài)；

One More Thing-針對(duì)人群而設(shè)計(jì)

在很多產(chǎn)品中我們逐漸看到很多的表單設(shè)計(jì)把分割線去掉，也有甚至把箭頭去掉；這一切都是為了排版更加簡(jiǎn)潔，但這是否是一個(gè)好的設(shè)計(jì)？

我個(gè)人的觀點(diǎn)是視用戶群體而定，倘若你的用戶是年輕的、潮流的，盡管用新的視覺(jué)語(yǔ)言、交互形式，只要你的設(shè)計(jì)是整體的、一致性的；類似 Snapchat 新的視覺(jué)語(yǔ)言，新的交互形式，反而更加吸引年輕的用戶嘗試，他們會(huì)覺(jué)得 Cool、好玩；but, Btw Snapchat 的列表頁(yè)同樣會(huì)保留分割線與箭頭。

但相反如果你的用戶年齡層比較大的話，去掉分割線和箭頭并不適合；分割線起到視覺(jué)分區(qū)的作用，明確地告知用戶點(diǎn)擊區(qū)域，箭頭自然就是一個(gè)視覺(jué)的指引，告訴用戶可點(diǎn)擊可跳轉(zhuǎn)；就像 Facebook、微信這種幾乎包含全年齡層的產(chǎn)品，你會(huì)發(fā)現(xiàn)頁(yè)面的設(shè)計(jì)都相對(duì)保守；

曾經(jīng)有個(gè)產(chǎn)品經(jīng)理就要求我把表單的箭頭去掉，理由是頁(yè)面好看些…… 然而我拒絕了，因?yàn)樗O(shè)計(jì)產(chǎn)品的面向人群是裝修工人，去掉箭頭無(wú)疑會(huì)增加學(xué)習(xí)成本，降低使用效率；所以我們做設(shè)計(jì)不能單純追逐潮流、為了好看，要針對(duì)不同的用戶群體而設(shè)計(jì)；

總結(jié)

作為UI設(shè)計(jì)師，設(shè)計(jì)好看的頁(yè)面固然重要，但在考慮怎么好看的前提需要把確保功能體驗(yàn)良好；在設(shè)計(jì)表單之前搞清楚不同的類型，再針對(duì)性地進(jìn)行設(shè)計(jì)，最后才到字號(hào)大小、顏色、間距這些表層的設(shè)計(jì)；這樣下來(lái)設(shè)計(jì)是內(nèi)外兼修，體驗(yàn)與視覺(jué)都良好。同時(shí)也要考慮面向人群，針對(duì)性地設(shè)計(jì)；




End

JP 寫(xiě)于 2018-09-16 臺(tái)風(fēng)天