web網站應該如何設計才能更符合用戶體驗

網站制作公司尚品中國：為了更多設計師能認真思考移動應用表單的特殊性，最大限度的提升表單設計的體驗，提升效率，提高滿意度。本文將從清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小秘密這八個維度來分享我的移動應用表單設計秘籍。
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)

用戶在瀏覽信息的時候，如果沒有足夠多的強調元素，會從上至下，從左至右的瀏覽，Web端是一個“F”型視線，移動端更經常是“L”型視線(導航和重要操作往往在下邊)，那么如果你的表單的視覺瀏覽順序，符合這個“L”型規(guī)律，基本上就符合用戶的心理預期，不需要任何的尋找，任何的思考，就可以簡單高效的執(zhí)行完表單項的填寫和提交。
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.

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

第一個反例比較常見，用戶輸入完用戶名和密碼之后，直接看到的操作按鈕是注冊，而不是登錄，這種左右的布局方式，即便你用顏色區(qū)隔，也阻擋不了用戶的視線落到注冊上，于是簡單的眼動測試就可以發(fā)現，這時用戶盯著注冊停頓思考一下是在所難免的。
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.

第二個反例則會更加突出一些，因為表單標簽與表單的相關性不是很好，用戶需要先閱讀表單標簽的內容，再閱讀輸入框引導文字的內容，視線一直都是左——>右——>左——>右，這樣已經不夠友好了，最后提交的時候，又需要整個視線平移到右上角去尋找登錄按鈕，當然，我并不是在challenge iPhone的設計，如果全局都擁有這樣的操作欄，右上角提交表單項還好，但這也僅適用于鍵盤會遮擋提交按鈕的情況。
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)

表單項并不是從上邊羅列到下邊就可以了，而是要經過信息組織的，同一類的表單可以放在一起，當表單太長的時候，可以拆分成不同的組，這樣用戶在填寫的時候，類似于一種任務拆解，可以一組一組的完成填寫。
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.

登錄和注冊是兩個完全不同的去向，所以在布局上做一個顯著的分組，如果用戶想要登錄的話，專心填寫就可以了，如果用戶想要注冊的話，需要點擊注冊按鈕，去到一個新界面去完成操作。
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.

填寫信息的時候，如果所有想都列出來自然會有較大信息負擔，但是如果按組別來填，每個組別只有2~3項，就會覺得沒有那么大的壓力了。
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)

那些不需要的信息，干脆就砍掉。那些實在需要，但是頻次不高的信息，則可以隱藏掉，通過某個入口可以添加。如果你只需要用戶填寫基本信息，那么所有其他信息都可以隱藏在一個添加入口里，當用戶需要的時候，可以找到。
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)

移動應用的輸入成本非常高，尤其是觸屏，輸入效率和輸入準確率都有很大的提升空間，在這種情況下，要盡量減少需要輸入的內容，利用選擇代替輸入，簡單來說，比如性別、比如出生日期、比如城市，都是可以通過選擇的形式來提交內容的。
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.

當然還有一些輸入建議相關的場景，也是可以利用選擇來代替輸入的。比如當用戶名已被注冊的時候，系統(tǒng)提供幾個用戶名建議以供選擇;比如給自己打標簽的時候，系統(tǒng)提供常用標簽以供選擇，等等輸入郵箱的時候，可以給出常用郵箱的建議，但是因為常用郵箱比較多，如果給的建議太多，需要滾動的話，干擾性大，還不如不給。所以可以合理定義觸發(fā)建議的時機，比如輸入@后邊的第一個字符后，基本上能鎖定更少量的郵箱了，如“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.

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

移動應用界面空間有限寸土寸金，但是表單項往往需要通過標簽告知表單類型，通過提示文字告知表單格式，那么標簽及提示文字怎樣排布才可以使信息呈現最友好呢?
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)點：視線一直是縱向向下的，當輸入的時候，不遮擋說明文字。
        Advantage: the view has been the vertically down, when the input of time, don't keep out instructions.

　　缺點：在寸土寸金的手機屏幕上，這種排布方式過于占用寶貴的垂直空間，鍵盤升起一遮擋，基本上什么都卡不見了。
        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)點：可以快速處理每一個表單項的輸入，符合視覺縱線。
        Advantages: rapid processing every form of input, accord with visual ZongXian.
　　
        缺點：占用寶貴的垂直空間。
        Faults: take up precious vertical space. 　　
　　優(yōu)點：基本上解決了前面說的占用縱線空間的問題
        Advantages: basically solved said before the problem of space take up ZongXian

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

　　優(yōu)點：即解決了視覺縱線的問題，又解決了節(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.

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

注冊的時候，很多應用還需要兩次輸入密碼，以預防誤操作，防止輸入錯誤的密碼之后無法登錄。但是真的需要輸入兩次密碼來防止這個問題嗎?有沒有什么別的方法來規(guī)避這個問題呢?
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?

其實除了輸入兩次密碼之外，還有這樣幾種辦法：1.最后一位明文顯示 2.全部明文顯示 4.默認暗文，可選明文 5.默認明文，可選暗文 6.對話框確認密碼輸入正確。 通過小范圍的用戶調研發(fā)現，默認明文可選暗文的形式接受度最高
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

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

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

1. 鍵盤的類型與調用(The type of keyboard with calls)
不同的文本框類型，可以調用不同的鍵盤。比如網址輸入框，調用網址輸入鍵盤，可以方便快捷的輸入.com;純數字的輸入框，可以調用數字鍵盤;電話號碼輸入框，可以調用電話號碼鍵盤，除了數字之外，還有*#+;姓名等中文輸入框，可以調用中文鍵盤;郵箱輸入框可以調用郵箱鍵盤，方便輸入@。
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 @.

但是這里有一個要注意的地方，如果把文本框定義成數字輸入框，雖然是可以調用數字鍵盤，但是該輸入框只認浮點雙精度數字，就是說你輸入了“0123”，會被算作是“123”這樣一個自然數，如果是作為驗證碼輸入框的，你還需要做一些前端或后端的處理，來補全這個0。所以這里不得不提一下，iPhone手機，如果你設置了密碼保護，在輸入4位數字密碼的時候，是4個框而不是1個框，調用的是純數字鍵盤，這下你知道為什么了吧?
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?

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

這里僅是粗略的調研，實際的文本框類型非常多，鍵盤類型也會比較多，需要具體情況具體分析。比如你的驗證碼如果不是純數字的，就不能調用數字鍵盤了。
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)

鍵盤上右下角的功能鍵是可以被定義的，這個功能鍵在填寫表單的時候，跟PC上的tab鍵有點像，應該起著向下切換表單項的作用，當處于最后一個表單項的時候，這個功能鍵就要變成對應的操作。
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.

比如在登錄表單中，光標處于用戶名框，右下角是下一項;焦點處于表單最后一項，但是有必填項未填寫時，該按鈕是置灰不可點的;當所有必填項填寫完整，且焦點處于表單的最后一項，操作按鈕可點擊，注意此時操作按鈕一定是藍色的。
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)

當表單項多于3項的時候，基本上就可以考慮增加鍵盤上的操作欄了，這個操作欄可以幫助用戶切換上一項、下一項和收起鍵盤。當焦點處于第一個表單項的時候，上一項置灰不可點。
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.

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

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

當校驗表單內容是否符合格式要求的時候，要按照表單項從上到下的順序校驗
When calibration form content conform to the requirements of the format, according to a form from top to bottom order of calibration

比如這個表單，就該按照1用戶名——>2密碼——>3手機號——>4郵箱——>5性別的順序依次校驗，用戶名格式不對、用戶名重名、用戶名在黑名單里之類的問題，都會優(yōu)先提醒，如果用戶名沒有問題，才會去校驗密碼，密碼沒有問題再去校驗手機號……這樣能保證錯誤提醒是可找到的，有規(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. 即時的校驗反饋(Instant check of feedback)

一種理想化的情況，就是當我輸入完一個表單項的時候，系統(tǒng)可以立刻告訴我，這一項填寫是否正確，而不是填完所有表單，提交之后，才告我我哪里需要修正。在Web端，即時校驗反饋已經非常常見，但是在移動端，即時檢驗尚需時日。主要原因是即時校驗受限于網速，當網絡環(huán)境不好的時候，校驗也許需要很久，會影響正在進行的下一項表單的填寫。
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.

美國日本的移動網速優(yōu)于中國，Twitter和Evernote的手機客戶端已經采用了即時校驗的方式來反饋問題，在中國使用，體驗還沒有特別流暢，也許國內的移動表單即時校驗還需要等些時候。
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.

其實除了清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小秘密之外，還有很多很多秘籍沒有寫，比如清晰的步驟、用戶的語音、移動端特殊的情景、合理的說明、及時的反饋、錨點置頂、主動做與次動作的位置、給與建議、給予限制、適當的幫助、標簽頁設計、顏色的信息傳達、循序漸進的表單。
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ā)布于北京網站建設公司尚品中國http://xjjufeng.cn/