神刀安全网

网页配置端表单设计要点

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

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

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

转载需联系

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 网页配置端表单设计要点

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮