web界面设计的建议

web界面设计的建议

一、糟糕的用户界面表现

1、过分使用各种奇形怪状、五颜六色的控件。

2、界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

3、界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。

4、违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。 

5、消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。

6、还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。

二、web界面设计的几个建议

1、合并重复的功能而使界面简洁

在整个产品开发期间我们会有意无意地创建很多模块，版面或者元素，而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块，它无用且降低了电脑性能。此外，界面上模块越多，用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

2、客户的评价好过自吹自擂

在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时，项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。

3、将选项与按钮区分开来

诸如颜色，层次及模块间的对比这些视觉上的设计可以很好地帮助用户使用产品：他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面，你就需要将可点击的元素（比如连接，按钮），可选择的元素（比如单选多选框）以及普通的文字明显区分开来。在下图的例子中，我将点击操作的元素设置为蓝色，选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

4、给出推荐而不是让用户来选择

当展示许多项服务时，给出一个重磅的推荐项是个不错的做法，尽管推荐的设置无法满足所有用户。当面临的选择越多时，用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

5、给出撤销操作来代替确定操作

假设你刚点击了一个连接或者按钮，撤销操作可以让操作流畅自然，这也符合人类的本能。而每次操作都弹一个确定框则好像是在质问用户你明白不明白这个操作会产生什么后果。我还是更习惯假设用户每次操作都是正确的，其实只有极少数情况下才会发生误操作。所以，为了防止误操作而设计的确认窗口其实是不人性化的，用户每次操作都需要进行毫无意义的确定。所以请考虑在你的产品里实现撤销操作来增加用户的操作友好度吧。

6、界面要有鲜明对比让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后，你甚至可以在色相环上专门选择互补色（比如黄色与紫色）来设计你的界面，以达到突出重心的目的。综合所有这些，最后得到的界面会使你的主要意图与界面其他元素有明显的区分，得到完美的呈现。

7、精简表单内容

在填写表单时也是同样的道理，没人愿意填写一大堆表单字段。表单中每个字段都会有失去用户的风险。不是每个人打字都很快速的，并且在移动设备上进行输入更是相当麻烦的事情。问下自己表单中是不是每个字段都必需，然后尽量减少表单中的字段。如果你确实需要一大堆信息让用户填写，试着将它们分散在不同页面，在表单提交后还可以继续补充。过多字段很容易让整个表单显示臃肿，当然想简洁也很容易，只放少数字段。

8、不要放太多链接分散用户注意力

为了满足各式用户的需求，在页面上放些链接链到这里链到那里是常见的做法。如果你的主要目的是想让用户点击页面最后那个下载按扭什么的话，就需要三思了。因为用户可能点击了其他链接离开页面了。所以你需要注意页面的链接数量，最好将用于导航与用于操作的链接用样式区分开。尽量移除页面不需要的链接会让用户点击到你的功能按钮。

9、不要让用户觉得是在完成任务

试想界面上有这样两个按钮：一个是"获取折扣"，另一个是"立即注册"。我敢打赌大多数人会点击第一个，因为第二个按扭让人感觉不到有利可图，并且"注册"让人联想到填不完的表单。也就是说让用户感受到获利的按钮更有可能被点击。这种让用户感到好处的文字信息也可放在按钮旁边，不一定要做为按钮的标题。当然，正常的按钮还是有用处的，一般用于重复性操作频繁的地方。

10、让操作直观而不是让人觉得找不到上下文

不用说直接在元素身上进行操作是更直观明了的方式。比如在一个列表中，我们想让用户对每个条目进行操作那么就把按钮放到当前条目上，而不要把放到列表之外。再比如就是直接点击元素就进入编辑状态（比如页面上的地址信息点击后可以进行编辑）。这种方式比传统的选中再点击相应的按钮进行操作要简洁省事得多。当然，对于一般性的操作本身就不需要有什么上下文的，就没必要这么做了，比如页面上的前进，后退按扭。

11、过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的作用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时，我们经常在界面上方便地拖出很多区块来，这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐，这样做不会让那些多余的线条来扰乱视觉。

12、考虑零数据的情况

界面上经常需要呈现不同数量的数据，从0，1，10，100到10000+等。这里存在个普遍的问题就是：在程序最开始使用的0条数据到过度到有数据之前，该如何进行显示界面。这也是我们经常忽视了的地方。当程序初始没有数据时，用户看到的就是一片空白，此时用户可能不知道该进行哪些操作。利用好没有数据的初始界面可以让用户学习和熟悉如何使用程序，在程序中创建数据。力臻完美永远是我们追求的目标，界面设计也不例外。

13、界面设计得一致

在设计中保持一致性可以减少用户的学习成本，用户不需要学习新的操作。当我们点击按钮，或者进行拖拽操作，我们期望这样的操作在整个程序的各个界面都是一致的，会得到相似的结果出来。可以在很多方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。不过在让界面变得一致之前，记住一点，适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对，我们应遵从一致的设计准则，但适当地打破这种常规。

14、使用较贴切的默认值会减少操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面，这是种非常常见的做法，可以帮助用户快速填完表单或者注册信息。

15、将有关联的功能分组而不是杂乱无章

将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子，或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑，符合我们平时的认知。

16、使用内联的验证消息而不是提交后再验证

在处理表单时，最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反，提交后再检查表单会给出错误消息，会让用户感到乏力又要重复之前的工作。

17、放宽对用户输入的要求

对用户输入的数据，尽量放宽限制，包括格式，大小写什么的。这样做可以更人性化一点，也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候，用户有很多种输入方式，带括号的，带破折号的，带空格的，带区号和不带区号的等等。如果你在代码中来处理这些格式的问题，代价也只是你一个人多写几行代码而以，却可以减少无数用户的工作量。

18、让用户选择而不是重新填写

这一界面设计中的经典准则是有心理学依据的，相比要让某人回想想某样东西，从一堆东西中认出某样东西会更容易些。辨识出一样东西只需要我们稍微回忆一下，通过一些线索就可以完成。而回想则需要我们全面搜索自己的大脑。也许这也是为什么试卷上选择题会比简答题做得快的原因。所以试着在界面上展示一些用户之前涉及到的信息让他们进行选择，而不是让他们想半天然后自己填写。

19、优化页面加载速度，不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条，二是展示其他相关或有趣的东西来吸引用户的注意力