聊一(yī)聊在APP開(kāi)發時(shí)表單的(de)設計(jδ♠ì)

今天我們聊一(yī)聊在APP開(kāi)發時(shí)表單的(de)設計(jì)。

可(kě)選項可(kě)以用(yòng)勾選框、開(kāi)關、★₽♦←單選框和(hé)下(xià)拉菜單表示。選擇得(de)當的(de)話(∑$≤×huà)，任何一(yī)種都(dōu)非常出色。本文(wé≠¶•n)中，我們重點關注勾選框和(hé)開(kāi)關。

 

勾選框用(yòng)在一(yī)系列選項中，用(yòng)✘₹ γ戶可(kě)以選擇任意數(shù)量，包括★"0個(gè)、1個(gè)，或者許多(duō)個(gπ₩è)。換言之，每個(gè)勾選框在列表中都(dōu)>↑↕是(shì)相(xiàng)互獨立的(de)，勾上(shà←§♦ng)一(yī)個(gè)框并不(bù)會§₩→(huì)取消其他(tā)選項。

 

 

縱向展示列表，每行(xíng)一(yī)π¥個(gè)選項。這(zhè)對(duì)于開(kāi)關₹↕©和(hé)勾選框都(dōu)有(yǒu)效。如(♥∞rú)果一(yī)定要(yào)橫向排列，一(yī)行(xí✘ ÷¶ng)有(yǒu)多(duō)個(gè)選項，就(≤×&∞jiù)要(yào)調整好(hǎo)按鈕和(hé)标↑ ≠€簽的(de)距離(lí)，哪個(gè)選項對(duì)應哪個(gè)标簽清晰明"★(míng)了(le)。下(xià)面的(de)例子₹Ω(zǐ)中，元素之間(jiān)的(de)距離(lí)©♦&都(dōu)太近(jìn)了(le)。

勾選框要(yào)使用(yòng)肯定的(de)文(wén)§♠$案。使用(yòng)肯定、有(yǒu)效的(d>♠∏εe)文(wén)案作(zuò)為(wèi)勾選框的(de)标簽，用(yò™≈δ≠ng)戶就(jiù)很(hěn)清楚如(rú)果勾上(shàng•φ≈∏)選框會(huì)發生(shēng)什(shén)麽。避免&lσ→πdquo;不(bù)要(yào)給我發郵件(jiàn)&rdqu≤×←∑o;這(zhè)樣的(de)否定文(wén)案，這(zhè)就(jiù≠‍•)意味著(zhe)用(yòng)戶要(yào)©™勾上(shàng)選框來(lái)阻止某些(xiē)₽∑β事(shì)發生(shēng)。

勾選框永遠(yuǎn)都(dōu)應該使用(yòng)肯定的(de)指令₹® ，不(bù)能(néng)用(yòng)否定文✔∞(wén)案，例如(rú)“請(qǐn≥✘₽g)勿……&r$ dquo;勾選框使用(yòng)Label标簽，'​ 增大(dà)操作(zuò)區(qū)域。所有(yǒu)的✔γ£ (de)勾選框都(dōu)有(yǒu)标 ✘簽，但(dàn)并非都(dōu)使用(yòng)label标簽。勾選框本質上( ™¥₹shàng)很(hěn)小(xiǎo)，但(dàn)是(≥☆&↕shì)根據費(fèi)茨定律，它們就(jiù)很(hěn)難點↔"​擊或者點按。要(yào)增大(dà)操作(zuò)€¥區(qū)域，讓用(yòng)戶在點擊或點按标簽與相(xiàng)關文₽♣₩(wén)字時(shí)就(jiù)能(néng)選↕→≥中選項，而不(bù)僅僅是(shì)那(↓♠nà)個(gè)小(xiǎo)方框。

設計(jì)界面時(shí)，交互元素的(de)選擇要(yào)保持一(yφφ↔≥ī)緻、可(kě)預期。遵循設計(jì)标準，能(nδ'éng)讓用(yòng)戶更好(hǎo)預測控件(jiàn$♦)的(de)功能(néng)、如(rú)何操作(zuò)。相(xiàn☆≥g)反，違背标準會(huì)讓界面感覺很(hěσ•n)脆弱——好(hǎo)像會(huì)毫無預兆發生(♦&shēng)任何事(shì)情。