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”型规律，基本上就符合用户的心理预期，不需要任何的寻找，任何的思考，就可以简单高效的执行完表单项的填写和提交。
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.

　　这是一个登录表单视觉纵线的例子，用户先关注到用户名输入框，再关注到密码输入框，然后就自然而然的发现了登录按钮。

第一个反例比较常见，用户输入完用户名和密码之后，直接看到的操作按钮是注册，而不是登录，这种左右的布局方式，即便你用颜色区隔，也阻挡不了用户的视线落到注册上，于是简单的眼动测试就可以发现，这时用户盯着注册停顿思考一下是在所难免的。
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.

当然还有一些输入建议相关的场景，也是可以利用选择来代替输入的。比如当用户名已被注册的时候，系统提供几个用户名建议以供选择;比如给自己打标签的时候，系统提供常用标签以供选择，等等输入邮箱的时候，可以给出常用邮箱的建议，但是因为常用邮箱比较多，如果给的建议太多，需要滚动的话，干扰性大，还不如不给。所以可以合理定义触发建议的时机，比如输入@后边的第一个字符后，基本上能锁定更少量的邮箱了，如“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?
　　
　　优点：视线一直是纵向向下的，当输入的时候，不遮挡说明文字。
        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. 　　
　　优点：可以快速处理每一个表单项的输入，符合视觉纵线。
        Advantages: rapid processing every form of input, accord with visual ZongXian.
　　
        缺点：占用宝贵的垂直空间。
        Faults: take up precious vertical space. 　　
　　优点：基本上解决了前面说的占用纵线空间的问题
        Advantages: basically solved said before the problem of space take up ZongXian

　　缺点：缺点仍然是横向视觉不稳。
        Faults: weakness is still horizontal visual instability. 　　

　　优点：即解决了视觉纵线的问题，又解决了节约屏幕纵向空间的问题，且元素较为稳定。这是一种最佳的排布方式。
        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)

注册的时候，很多应用还需要两次输入密码，以预防误操作，防止输入错误的密码之后无法登录。但是真的需要输入两次密码来防止这个问题吗?有没有什么别的方法来规避这个问题呢?
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.对话框确认密码输入正确。 通过小范围的用户调研发现，默认明文可选暗文的形式接受度最高
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性别的顺序依次校验，用户名格式不对、用户名重名、用户名在黑名单里之类的问题，都会优先提醒，如果用户名没有问题，才会去校验密码，密码没有问题再去校验手机号……这样能保证错误提醒是可找到的，有规律可循的。
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)

一种理想化的情况，就是当我输入完一个表单项的时候，系统可以立刻告诉我，这一项填写是否正确，而不是填完所有表单，提交之后，才告我我哪里需要修正。在Web端，即时校验反馈已经非常常见，但是在移动端，即时检验尚需时日。主要原因是即时校验受限于网速，当网络环境不好的时候，校验也许需要很久，会影响正在进行的下一项表单的填写。
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.

美国日本的移动网速优于中国，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.
本文发布于北京网站建设公司尚品中国http://www.sino-web.net/