新接手一个项目，是为公司的通用可视化地图平台的配置端做设计。这次的设计过程中学到了很多关于网页表单设计的知识，现在分享给大家。

1.总览全局，大家来找茬。

这次的项目需求很清楚，公司没有专门负责这个项目交互设计师，主管自己画了原型给我，某种程度上可以当作交互稿来用。

在拿到原型稿之后先不要着急画UI，尝试着从用户出发去体验一下流程。体验的过程中，把你认为有问题，不合逻辑的地方标注出来，并提出解决方案，然后回头和主管／交互设计师沟通，并达成一致。

不要因为你是UI设计师，就只负责UI，适当考虑交互不仅可以让你对后续工作了然于胸，也可以避免到开发或者用户可用性测试阶段发现有问题，交互设计师拖着你反复改稿。

注意：在把自己当作用户的时候不要忘记考虑用户的技术背景，我这次的项目最终用户是程序工程师，所以有很多比较生僻的词汇虽然我不理解，但是都保留了下来。

2.设计适合产品的页面风格

一般来说，只要画好登录页，整体的风格也就确定了。

因为我还是实习生，以前做的项目大多数都是在虚拟项目，从产品到设计都是我自己想怎么做就怎么做，所以很多方面都有些欠考虑。举例来说，个人比较喜欢欧美的简洁风，所以这次在做配置端的登录页时，几乎是毫不犹豫地就做成了这样：

结果被我的设计前辈一下子点出：你的页面风格要和你的产品主题搭配，不要把偏技术的产品做成了社交产品。

我仔细想了下也对：当用户最先看了登录页之后，就会对里面的内容有所期待，一旦你让他失望，就会让产品的友好性打折扣。

所以我在结合了公司的VI风格之后，重新做了登录页：

虽然没有之前的酷炫，但是很符合现在产品的精神和灵魂。而且在美观度上也是不错的。右边的背景是纯色的，所以加了图案让它变得丰富；而左边的图因为背景是渐变的，所以没有加图案，让它自身的特点突出。

不知道你们有没有发现，上一版和这一版有一个变化：用户头像没有了。去掉头像的原因是：配置端的用户最主要的目的是配置信息，个性化的设置头像对他们来说没什么实际意义，只会给他们增加负担。

3.让用户拥有控制感

页面全览

进度条1

不要让用户迷失在配置过程中，让他们知道自己在哪里，从哪来，将要到哪去。

进度条2

因为是有流程的配置表单页面，所以要让用户对配置过程做到心里有数。用户都喜欢控制感而不是被控制感，进度条可以降低用户的离开率。如果你的产品对进度的要求不是很严格，也可以在进度条上做可以跳转页面的链接，这样会更直观。

4.必须要输入的信息要标注出来。

5. 给用户输入提示

输入要求要提前告知用户，不要信奉亡羊补牢。

6.错误提示

如果用户做错了，马上给他们清晰的提示。

7.门到最后再打开

在用户还没有完成所有的录入，以及录入有错误的情况下不要给他们通往下一步的可能。不给用户可能，用户就不会有期待，也不会因为达不到期待而懊恼。同时，这也是对他们任务还未完成的一种暗示。

8.一级动作要明显

根据页面的目的，页面上的动作分成各种不同的层级。在这张页面中，新增项目、删除、下一步都是一级动作，所以将它们设计成按钮。毕竟我们希望用户能够顺利地完成工作流，所以上一步和取消相对来说就是二级动作了，二级动作做成带下划线的蓝色链接就足够了。

9.矩形列表的项目要清晰

鼠标悬停在第20行

让矩形列表清晰的第一步：间距要大。这里所说的间距包括：列表的行高和内部文字的间距，一组栏目和一组栏目之间的间距，栏目内部元素的间距。当间距大了之后，就不会让人感觉很拥挤，可以给人放松的感觉。

让矩形列表清晰的第二步：斑马线。人眼在横向浏览时很容易跑偏，斑马线可以很明确的区分行与行，方便我们阅读数据。

让矩形列表清晰的第三步：对齐。一般来说，为了符合人的阅读习惯，文字左对齐，数字右对齐，带小数点的数字以小数点对齐。

让矩形列表清晰的第四步：可视化图标。设计一些带动作的矩形列表时，不妨把动作可视化。据统计，人眼辨识图形的速度是文字的数倍。

让矩形列表清晰的第五步：激活状态要明显。无论是鼠标悬浮还是正在操作，当前选中的行都要明显。

10.换页符要视情况完整或简略

简略版

完整版

换页符最简可以只有上一页和下一页，最复杂则可以无限扩展。我设计的是配置端，页面会增加很多信息，所以总数的显示就很重要了。

把用户需要的放上去，同时尽量简洁。

11.行内编辑和弹出页面编辑的选择

行内编辑

最开始做的时候，直接让用户在行内更改信息了，但是后来和工程师在讨论的时候，被他们科普了一个知识：行内编辑的元素一般情况下是不联动的。

除此之外，如果编辑的行为很复杂，行内编辑无法承载其重。 

弹出页面编辑

关于弹出页面的设计，比较常见的两种方式：在弹出框下加遮罩层，或者给弹出框加投影。

如果下方页面元素丰富，且和弹出框色差不大，加遮罩层的效果会更好。反之给弹出框加投影的效果会更好。

12.尽量让用户做选择而不是问答

问答题会比选择题花费更多的时间，而且更容易出错。但是相对的是：问答题会让用户更自由。在这个项目背景下，因为元素很多，而且需要和后台数据库进行连接，所以要求输入准确，故而大部分应用了下拉选择框。

13.表单标签和表单域的对齐方式选择

表单标签和表单域的对齐方式一共分为四种：左对齐、右对齐、顶对齐和内联对齐。这次的设计中我一共使用了两种对齐方式：右对齐和顶对齐。

眼睛在浏览顶对齐（左图）表单时，眼动路径是垂直向下，视觉的扫描速度比较快，但是顶对齐会拉大表单的垂直距离，所以不适合信息多以及小屏幕的展示。

右对齐的优点是虽然表单标签的浏览模式是Z字型，但是表单域——我们主要要操作的部分是符合视觉规范的左对齐。右对齐在提高浏览速度的同时兼顾了操作的便利。

14.可进行的操作要明显

最开始在做预览页面的时候，设想的是用户在浏览每一步的配置信息时，如果有需要更改的，直接点击标题旁的编辑按钮即可。但是后来在和项目组的伙伴们讨论的时候发现：除了设计师以外的人群，对只有一个图标的表达如坠梦中。

所以我重新换了一种表达方式：

他们都说这样清晰多了。

15.按照亲密性组织元素

配置端在完成的前一步会有一个预览页面，这个页面承载了用户之前所有的配置信息，所以势必信息量会很大。为了方便用户浏览，我们要对信息进行组织规划。用框把同一亲密度的元素包裹起来，并给它们一定的间距，是最有效的方式。

就算你看不清页面的字，但是你一定能看出其中的组织关系。

16.清晰的视觉流程

清晰的视觉浏览流程能让页面清爽，让用户头脑清晰，增加产品友好度。 

以上就是我这次独立完成项目的设计总结。这次的设计阅读了很多有关的设计规范和经验，感谢那些无私分享经验的设计前辈们，也感谢公司里给我指导的设计前辈，还要感谢所有为我的设计提供建议的项目组小伙伴！

生命不息设计不止，我会继续努力！

最后附上我阅读过的设计经验网站：

http://www.chinaz.com/manage/2012/0906/273158.shtml

http://article.yeeyan.org/view/155461/108136/

http://isux.tencent.com/web-form-design.html

欢迎关注我的微信公众号1660，这里不仅有译文哦：