网页端表单设计要点

原创文章 分类: 经验/观点 版权:
7572 57 44 7
更新于:2016-11-29
0.0
编辑推荐

写了人生的第一篇原创设计经验,感觉还有点小激动呢:-D。(因为版权,图做了适当的模糊,不过应该不影响阅读效果)


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


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


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

Image title


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


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


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


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


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


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

Image title


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


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


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

Image title


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


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


3.让用户拥有控制感

Image title

页面全览


Image title

进度条1


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


Image title进度条2


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


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

Image title


5. 给用户输入提示Image title


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


6.错误提示Image title

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


7.门到最后再打开Image title


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


8.一级动作要明显Image title

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


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

鼠标悬停在第20行


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


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


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


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


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


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

简略版Image title

完整版


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


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


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

行内编辑


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


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

弹出页面编辑


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


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


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


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


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


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


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


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


14.可进行的操作要明显Image title


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


所以我重新换了一种表达方式:Image title

他们都说这样清晰多了。


15.按照亲密性组织元素


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


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


16.清晰的视觉流程Image title


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


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


生命不息设计不止,我会继续努力!


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

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,这里不仅有译文哦:

Image title


Cyy_Emma

406粉丝/21关注

助人为乐
设计师,给我来个五彩斑斓的黑色优雅Dashboard,附送Sketch源文件~

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN