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.1、明确的视觉纵线用户在浏览信息的时候，假如没足够多的强调元素，会从上至下，从左至右的浏览，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 , 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.2、信息的分组表单项并非从上边罗列到下边就能了，而是要经过信息组织的，同一类的表单可以放在一块，当表单太长的时候，可以拆分成不一样的组，如此用户在填写的时候，像一种任务拆解，可以一组一组的完成填写。
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.3、极致的减法那些无需的信息，干脆就砍掉。那些实在需要，但频次不高的信息，则可以隐藏掉，通过某个入口可以添加。假如你仅需用户填写基本信息，那样所有其他信息都可以隐藏在一个添加入口里，当用户需要的时候，可以找到。
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.4、借助选择代替输入移动应用的输入本钱特别高，特别是触屏，输入效率和输入准确率都有非常大的提高空间，在这样的情况下，要尽可能降低需要输入的内容，借助选择代替输入，简单来讲，譬如性别、譬如出过生日期、譬如城市，都是可以通过选择的形式来提交内容的。
Mobile application of input cosplayt 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.5、标签及提示文字的排布方法移动应用界面空间有限寸土寸金，但表单项总是需要通过标签告知表单种类，通过提示文字告知表单格式，那样标签及提示文字如何排布才能使信息呈现最友好呢?
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.6、依赖明文确认密码注册的时候，不少应用还需要两次输入密码，以预防误操作，预防输入错误的密码之后没办法登录。但真的需要输入两次密码来预防这个问题吗?有没什么别的办法来避免这个问题呢?
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.7、适当的键盘借助1. 键盘的种类与调用
不一样的文本框种类，可以调用不一样的键盘。譬如网址输入框，调用网址输入键盘，可以便捷快捷的输入.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. 键盘上的功能键键盘上右下角的功能键是可以被概念的，这个功能键在填写表单的时候，跟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. 键盘上的操作栏当表单项多于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.8、校验的小秘密1. 纵向的校验顺序当校验表单内容是不是符合格式需要的时候，要根据表单项从上到下的顺序校验
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. 即时的校验反馈一种理想化的状况，就是当我输入完一个表单项的时候，系统可以立刻告诉我，这一项填写是不是正确，而不是填完所有表单，提交之后，才告我我哪儿需要修正。在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/