網(wǎng)站制作公司尚品中國：為了更多設(shè)計(jì)師能認(rèn)真思考移動(dòng)應(yīng)用表單的特殊性，最大限度的提升表單設(shè)計(jì)的體驗(yàn)，提升效率，提高滿意度。本文將從清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標(biāo)簽及文字的排布方式、依靠明文確認(rèn)密碼、合理的鍵盤利用、校驗(yàn)的小秘密這八個(gè)維度來分享我的移動(dòng)應(yīng)用表單設(shè)計(jì)秘籍。
In order to more stylist can seriously thinking of the particularity of the mobile applications form, the maximum design experience ascension form, promote efficiency, improve the satisfaction. This paper from the clear visual ZongXian, information of the group, the subtraction, using the selected acme instead of input, labels and text arrangements way, rely on expressly passwords, reasonable use of the keyboard, calibration little secret of this eight dimensions to share my mobile application form design kept secret.

一、清晰的視覺縱線(Clear visual ZongXian)

用戶在瀏覽信息的時(shí)候，如果沒有足夠多的強(qiáng)調(diào)元素，會(huì)從上至下，從左至右的瀏覽，Web端是一個(gè)“F”型視線，移動(dòng)端更經(jīng)常是“L”型視線(導(dǎo)航和重要操作往往在下邊)，那么如果你的表單的視覺瀏覽順序，符合這個(gè)“L”型規(guī)律，基本上就符合用戶的心理預(yù)期，不需要任何的尋找，任何的思考，就可以簡單高效的執(zhí)行完表單項(xiàng)的填寫和提交。
Users browse through the information, if there are not enough emphasis on elements, will from go up to below, from left to right to browse the Web side is an "F" type line of sight, the move more often is "L" type view (navigation and important operation often below), so if your form of visual browsing order, in line with the "L" model of the law, basically accord with the user expected, do not need any search, any thinking, is a simple and efficient execution of the form of the fill in and submit.

　　這是一個(gè)登錄表單視覺縱線的例子，用戶先關(guān)注到用戶名輸入框，再關(guān)注到密碼輸入框，然后就自然而然的發(fā)現(xiàn)了登錄按鈕。

第一個(gè)反例比較常見，用戶輸入完用戶名和密碼之后，直接看到的操作按鈕是注冊，而不是登錄，這種左右的布局方式，即便你用顏色區(qū)隔，也阻擋不了用戶的視線落到注冊上，于是簡單的眼動(dòng)測試就可以發(fā)現(xiàn)，這時(shí)用戶盯著注冊停頓思考一下是在所難免的。
The first example is more familiar, the user input the user name and password after, see the operation directly button is registered, not logged in, about the layout of the way, even if you with color segregation, can stand in the line of sight of users to register, so simple eye movement tests can be found, then the user staring at registered pause to think about is inevitable.

第二個(gè)反例則會(huì)更加突出一些，因?yàn)楸韱螛?biāo)簽與表單的相關(guān)性不是很好，用戶需要先閱讀表單標(biāo)簽的內(nèi)容，再閱讀輸入框引導(dǎo)文字的內(nèi)容，視線一直都是左——>右——>左——>右，這樣已經(jīng)不夠友好了，最后提交的時(shí)候，又需要整個(gè)視線平移到右上角去尋找登錄按鈕，當(dāng)然，我并不是在challenge iPhone的設(shè)計(jì)，如果全局都擁有這樣的操作欄，右上角提交表單項(xiàng)還好，但這也僅適用于鍵盤會(huì)遮擋提交按鈕的情況。
The second example, will become more prominent some, because the form with the correlation of label form is not very good, the user needs to read the content of the form labels, to read the content of the text input box guide, the sight has been left-> > >---right left right, this is not enough friendly, finally submitted, also needs the whole line of sight translated to top right to find login button, of course, I'm not challenge the iPhone design, if global have such operation bar, a top right corner form submission is good, but it also applies only to the keyboard will keep out the submit button.

二、信息的分組(Information the grouping of)

表單項(xiàng)并不是從上邊羅列到下邊就可以了，而是要經(jīng)過信息組織的，同一類的表單可以放在一起，當(dāng)表單太長的時(shí)候，可以拆分成不同的組，這樣用戶在填寫的時(shí)候，類似于一種任務(wù)拆解，可以一組一組的完成填寫。
The form is not listed above a from below to, but to pass information organization, the same kind of form can put together, when a form is too long, can tear open into different groups, so that users should fill in, similar to a task, taken apart can a group of groups of complete.

登錄和注冊是兩個(gè)完全不同的去向，所以在布局上做一個(gè)顯著的分組，如果用戶想要登錄的話，專心填寫就可以了，如果用戶想要注冊的話，需要點(diǎn)擊注冊按鈕，去到一個(gè)新界面去完成操作。
Login and registered are two completely different to, so in the layout in a significant group do, if you want to log in to it, to fill in, if the user wants to register it, need to click the register button, when you go to a new interface to complete the operation.

填寫信息的時(shí)候，如果所有想都列出來自然會(huì)有較大信息負(fù)擔(dān)，但是如果按組別來填，每個(gè)組別只有2~3項(xiàng)，就會(huì)覺得沒有那么大的壓力了。
Fill in information, if all want to list all natural to have larger information burden, but if, by category to fill in, each group only 2 ~ 3 items, will feel to do not have so much pressure.

三、極致的減法(Acme of subtraction)

那些不需要的信息，干脆就砍掉。那些實(shí)在需要，但是頻次不高的信息，則可以隱藏掉，通過某個(gè)入口可以添加。如果你只需要用戶填寫基本信息，那么所有其他信息都可以隱藏在一個(gè)添加入口里，當(dāng)用戶需要的時(shí)候，可以找到。
Those who don't need information, simply cut off. Those who really need, but not high frequency of information, can hide out, through an entry can add. If you only need to fill out the basic user information, all other information can be hidden in a add entrance, when the user needs can be found.

四、利用選擇代替輸入(Instead of using the selected input)

移動(dòng)應(yīng)用的輸入成本非常高，尤其是觸屏，輸入效率和輸入準(zhǔn)確率都有很大的提升空間，在這種情況下，要盡量減少需要輸入的內(nèi)容，利用選擇代替輸入，簡單來說，比如性別、比如出生日期、比如城市，都是可以通過選擇的形式來提交內(nèi)容的。
Mobile application of input cost is very high, especially the touch screen, the input efficiency and input accuracy has the very big rise, in this case, to try to reduce the content of the need to input, instead of using the selected input, simple for, such as sex, such as the date of birth, such as city, is can select the form to submit the content.

當(dāng)然還有一些輸入建議相關(guān)的場景，也是可以利用選擇來代替輸入的。比如當(dāng)用戶名已被注冊的時(shí)候，系統(tǒng)提供幾個(gè)用戶名建議以供選擇;比如給自己打標(biāo)簽的時(shí)候，系統(tǒng)提供常用標(biāo)簽以供選擇，等等輸入郵箱的時(shí)候，可以給出常用郵箱的建議，但是因?yàn)槌Ｓ绵]箱比較多，如果給的建議太多，需要滾動(dòng)的話，干擾性大，還不如不給。所以可以合理定義觸發(fā)建議的時(shí)機(jī)，比如輸入@后邊的第一個(gè)字符后，基本上能鎖定更少量的郵箱了，如“h”基本上就是hotmail了，“g”基本上就是gmail了。
And of course some Suggestions related input scene, also can use choice to replace of the input. Such as when the user name has been registered, the system provides several user name Suggestions to choose from; For example give myself label, the system to provide the commonly used tags to choose from, and so on input mailbox, can give commonly used E-mail advice, but because the commonly used E-mail more, if give advice too much, need to scroll of words, interference of big, also do not give. So can reasonable definition trigger the timing of the Suggestions, such as input @ first character of back, basically can lock more a small amount of E-mail, such as "h" is basically hotmail, "g" is basically gmail.

五、標(biāo)簽及提示文字的排布方式(Labels and suggests the way words arrangement)

移動(dòng)應(yīng)用界面空間有限寸土寸金，但是表單項(xiàng)往往需要通過標(biāo)簽告知表單類型，通過提示文字告知表單格式，那么標(biāo)簽及提示文字怎樣排布才可以使信息呈現(xiàn)最友好呢?
Mobile application interface by the space is limited, but the form of often needs to pass tag told form type, through the tip text told form format, so labels and suggests how words can be arranged information present the most friendly?
　　
　　優(yōu)點(diǎn)：視線一直是縱向向下的，當(dāng)輸入的時(shí)候，不遮擋說明文字。
        Advantage: the view has been the vertically down, when the input of time, don't keep out instructions.

　　缺點(diǎn)：在寸土寸金的手機(jī)屏幕上，這種排布方式過于占用寶貴的垂直空間，鍵盤升起一遮擋，基本上什么都卡不見了。
        Faults: in by mobile phone screen, the arrangement of the vertical way too takes up precious space, the keyboard made a keep out, basically what all card is missing. 　　
　　優(yōu)點(diǎn)：可以快速處理每一個(gè)表單項(xiàng)的輸入，符合視覺縱線。
        Advantages: rapid processing every form of input, accord with visual ZongXian.
　　
        缺點(diǎn)：占用寶貴的垂直空間。
        Faults: take up precious vertical space. 　　
　　優(yōu)點(diǎn)：基本上解決了前面說的占用縱線空間的問題
        Advantages: basically solved said before the problem of space take up ZongXian

　　缺點(diǎn)：缺點(diǎn)仍然是橫向視覺不穩(wěn)。
        Faults: weakness is still horizontal visual instability. 　　

　　優(yōu)點(diǎn)：即解決了視覺縱線的問題，又解決了節(jié)約屏幕縱向空間的問題，且元素較為穩(wěn)定。這是一種最佳的排布方式。
        Advantages: that is solved the problem of visual ZongXian and solves the problem of the vertical space saving screen, and relatively stable elements. This is a best way arrangements.

六、依靠明文確認(rèn)密碼(Rely on expressly passwords)

注冊的時(shí)候，很多應(yīng)用還需要兩次輸入密碼，以預(yù)防誤操作，防止輸入錯(cuò)誤的密碼之后無法登錄。但是真的需要輸入兩次密碼來防止這個(gè)問題嗎?有沒有什么別的方法來規(guī)避這個(gè)問題呢?
Registration, many application still need two input a password to prevent incorrect operation, prevent input the wrong password after can't log on. But really need to enter two password to prevent this problem? What other ways to circumvent this problem?

其實(shí)除了輸入兩次密碼之外，還有這樣幾種辦法：1.最后一位明文顯示 2.全部明文顯示 4.默認(rèn)暗文，可選明文 5.默認(rèn)明文，可選暗文 6.對話框確認(rèn)密碼輸入正確。 通過小范圍的用戶調(diào)研發(fā)現(xiàn)，默認(rèn)明文可選暗文的形式接受度最高
In fact in addition to two password input, but also so several ways: 1. The last expressly show 2. Expressly show all 4. The default dark wen, optional expressly 5. The default expressly, can choose dark article 6. Dialog box confirm password input the correct. Through the small range of user survey found that the default expressly optional dark in the form of the highest acceptance

　　輸入框中有個(gè)隱藏按鈕，點(diǎn)擊一下，切換暗文顯示。
        Input box has a hidden button and click, switch dark text display.

七、合理的鍵盤利用(Reasonable use of the keyboard)

1. 鍵盤的類型與調(diào)用(The type of keyboard with calls)
不同的文本框類型，可以調(diào)用不同的鍵盤。比如網(wǎng)址輸入框，調(diào)用網(wǎng)址輸入鍵盤，可以方便快捷的輸入.com;純數(shù)字的輸入框，可以調(diào)用數(shù)字鍵盤;電話號(hào)碼輸入框，可以調(diào)用電話號(hào)碼鍵盤，除了數(shù)字之外，還有*#+;姓名等中文輸入框，可以調(diào)用中文鍵盤;郵箱輸入框可以調(diào)用郵箱鍵盤，方便輸入@。
Different text box type, can call different keyboard. For example website input box, call website input keyboard, and easy to input. Com; Pure digital input box, can call digital keyboard; Phone number input box, can call phone number keyboard, except figures, but also * # +; Chinese name, box, can call Chinese keyboard; E-mail input box can call mailbox keyboard, convenient input @.

但是這里有一個(gè)要注意的地方，如果把文本框定義成數(shù)字輸入框，雖然是可以調(diào)用數(shù)字鍵盤，但是該輸入框只認(rèn)浮點(diǎn)雙精度數(shù)字，就是說你輸入了“0123”，會(huì)被算作是“123”這樣一個(gè)自然數(shù)，如果是作為驗(yàn)證碼輸入框的，你還需要做一些前端或后端的處理，來補(bǔ)全這個(gè)0。所以這里不得不提一下，iPhone手機(jī)，如果你設(shè)置了密碼保護(hù)，在輸入4位數(shù)字密碼的時(shí)候，是4個(gè)框而不是1個(gè)框，調(diào)用的是純數(shù)字鍵盤，這下你知道為什么了吧?
But here is a should pay attention to of place, if the text box define into digital input box, although can be called digital keyboard, but the input box only know floating-point double figures, that is to say you enter the "0123", can be classified as "123" such a natural number, if is as verification code input box, you need to do some front or back end on the processing, to complement the 0. So here have to mention, mobile phone iPhone, if you set password protection, in input four digital password, is four box and is not a box, the call is pure digital keyboard, and do you know why?

當(dāng)然，不止是iPhone，Android也是可以定義鍵盤類型的。
And, of course, is more than iPhone, Android is also can define the keyboard type.

這里僅是粗略的調(diào)研，實(shí)際的文本框類型非常多，鍵盤類型也會(huì)比較多，需要具體情況具體分析。比如你的驗(yàn)證碼如果不是純數(shù)字的，就不能調(diào)用數(shù)字鍵盤了。
Here is only a rough investigation and research, the actual text box type is very much, the keyboard type also will more, need to particular case is particular analysis. For instance, your verification code if not pure digital, can't call digital keyboard.

2. 鍵盤上的功能鍵(On the keyboard function keys)

鍵盤上右下角的功能鍵是可以被定義的，這個(gè)功能鍵在填寫表單的時(shí)候，跟PC上的tab鍵有點(diǎn)像，應(yīng)該起著向下切換表單項(xiàng)的作用，當(dāng)處于最后一個(gè)表單項(xiàng)的時(shí)候，這個(gè)功能鍵就要變成對應(yīng)的操作。
The keyboard on the lower right corner of the function keys can be defined, the function key fill in the form in, with the PC is a little bit like the TAB keys, should play the role of a switch down form, when in the last form item, the function keys will become the corresponding operation.

比如在登錄表單中，光標(biāo)處于用戶名框，右下角是下一項(xiàng);焦點(diǎn)處于表單最后一項(xiàng)，但是有必填項(xiàng)未填寫時(shí)，該按鈕是置灰不可點(diǎn)的;當(dāng)所有必填項(xiàng)填寫完整，且焦點(diǎn)處于表單的最后一項(xiàng)，操作按鈕可點(diǎn)擊，注意此時(shí)操作按鈕一定是藍(lán)色的。
For example in the login form, the cursor in the user name box, under the bottom right hand corner is a; Focus in a final form, but there are required not fill in, this button is not the point for ash; When all required fields complete, and the focus of the last item in the form, the operation can click on the button, pay attention to operate at this time must be the blue button.

3. 鍵盤上的操作欄(The keyboard of operation column)

當(dāng)表單項(xiàng)多于3項(xiàng)的時(shí)候，基本上就可以考慮增加鍵盤上的操作欄了，這個(gè)操作欄可以幫助用戶切換上一項(xiàng)、下一項(xiàng)和收起鍵盤。當(dāng)焦點(diǎn)處于第一個(gè)表單項(xiàng)的時(shí)候，上一項(xiàng)置灰不可點(diǎn)。
When a form of more than 3 item, basically can consider to increase the operation of the keyboard column, this operation column can help user switching on a, a pack up and down the keyboard. When the focus in the first form item, a grey not buy point.

八、校驗(yàn)的小秘密(Calibration of little secret)

1. 縱向的校驗(yàn)順序(Longitudinal calibration order)

當(dāng)校驗(yàn)表單內(nèi)容是否符合格式要求的時(shí)候，要按照表單項(xiàng)從上到下的順序校驗(yàn)
When calibration form content conform to the requirements of the format, according to a form from top to bottom order of calibration

比如這個(gè)表單，就該按照1用戶名——>2密碼——>3手機(jī)號(hào)——>4郵箱——>5性別的順序依次校驗(yàn)，用戶名格式不對、用戶名重名、用戶名在黑名單里之類的問題，都會(huì)優(yōu)先提醒，如果用戶名沒有問題，才會(huì)去校驗(yàn)密碼，密碼沒有問題再去校驗(yàn)手機(jī)號(hào)……這樣能保證錯(cuò)誤提醒是可找到的，有規(guī)律可循的。
Such as the form, this according to user name-> 1 password-> 3 2 phone number-> 4-> 5 gender mail order, check, user name format wrong, user name heavy, user name in blacklist such questions will be preferred reminder, if the user name no problem, to check the password, password no problem to check a phone number... This will ensure that mistakes can find remind is, to follow certain rules.

2. 即時(shí)的校驗(yàn)反饋(Instant check of feedback)

一種理想化的情況，就是當(dāng)我輸入完一個(gè)表單項(xiàng)的時(shí)候，系統(tǒng)可以立刻告訴我，這一項(xiàng)填寫是否正確，而不是填完所有表單，提交之后，才告我我哪里需要修正。在Web端，即時(shí)校驗(yàn)反饋已經(jīng)非常常見，但是在移動(dòng)端，即時(shí)檢驗(yàn)尚需時(shí)日。主要原因是即時(shí)校驗(yàn)受限于網(wǎng)速，當(dāng)網(wǎng)絡(luò)環(huán)境不好的時(shí)候，校驗(yàn)也許需要很久，會(huì)影響正在進(jìn)行的下一項(xiàng)表單的填寫。
An idealized situation, is when I input the a form item, the system can immediately tell me, is this a fill out is correct, not fill out all the form and submit the later, just tell me where I need to modify. On the Web, instant check feedback has is very common, but in the mobile side, the instant the investigation was still need more time. The main reason is the instant calibration is limited by the guardian and when network environment is bad, calibration may need to for a long time, can affect the ongoing under a form to fill out.

美國日本的移動(dòng)網(wǎng)速優(yōu)于中國，Twitter和Evernote的手機(jī)客戶端已經(jīng)采用了即時(shí)校驗(yàn)的方式來反饋問題，在中國使用，體驗(yàn)還沒有特別流暢，也許國內(nèi)的移動(dòng)表單即時(shí)校驗(yàn)還需要等些時(shí)候。
The United States and Japan's mobile Internet speeds than China, Twitter and Evernote mobile client has already adopted instant check way to feedback problems, for use in China, no special experience is fluent, maybe the domestic mobile form instant check still take some time.

其實(shí)除了清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標(biāo)簽及文字的排布方式、依靠明文確認(rèn)密碼、合理的鍵盤利用、校驗(yàn)的小秘密之外，還有很多很多秘籍沒有寫，比如清晰的步驟、用戶的語音、移動(dòng)端特殊的情景、合理的說明、及時(shí)的反饋、錨點(diǎn)置頂、主動(dòng)做與次動(dòng)作的位置、給與建議、給予限制、適當(dāng)?shù)膸椭?biāo)簽頁設(shè)計(jì)、顏色的信息傳達(dá)、循序漸進(jìn)的表單。
In fact the visual ZongXian, in addition to clear the grouping of information, the subtraction, using the selected acme instead of input, labels and text arrangements way, rely on expressly passwords, reasonable use of the keyboard, calibration of little secret besides, still have many, many didn't write the book, such as clear steps, the user's voice, mobile end special situation, the reasonable explanation, timely feedback, anchor point, active and time do set-top action position, giving advice, give restrictions, the appropriate help, tag page design, color of the message, progressive form.
本文發(fā)布于北京網(wǎng)站建設(shè)公司尚品中國http://www.ytvahg.cn/