打开

界面应该是这样设计的吧(一)

悦椟 95205阅读 2016-09-21

原来做原型的时候,特别容易被那些很酷炫吊炸天的想法折服,觉得好牛掰哦。比如“当鼠标放在这个地方的时候,给我一个小指纹的样子”类似这种,有的没的要求,我就觉得“哇塞,好有才哦,好有想法哦。”等到这个行业中这个领域的规则逐渐趋于稳定,有迹可循之后,回头看那些纯粹个人喜好的设计,半点没有佩服之感,只是当成是带有个人审美印迹的想法。

无论是系统还是网络产品,至少表单、标签、链接、翻页、按钮和操作反馈是不可少的。本次先说:表单,标签和操作反馈。

表单

无论是电商网站还是信息系统,表单都是出镜率极高的一种界面形式。比如初次完成下单,选择商品后,填收货人信息,绑定支付方式的填写表单、比如报名考试,报名信息需要按照表单信息进行填写。那么表单在做需求设计的时候,考虑哪些呢?

简化

  • 简化一:一些不必要的信息就不要出现,浪费用户的时间去阅读和填写。在设计表单之前,需要明确,这个表单的目的是什么,需要收集哪些信息达到这个目的。
  • 简化二:默认信息填写。有些表单设计在填写地址的时候,会通过IP地址,自动带出省份和城市。或者填写证件编号的时候,默认为身份证信息,如果需要调整的情况,用户再去选择。将大部分会出现的选择或者系统可以识别的选择,作为默认信息选项,节约了大部分用户的时间。
  • 简化三:必填和非必填用颜色表示。部分网站必填用红色或其他醒目颜色表色,或是在字段前面加星号,用户通过这些信息,自动会将必填信息做填写。避免提交的时候,出现一系列报错,让人脑壳很痛的事情发生。
  • 简化四:分段进行。网上填报考试报名信息的时候,通常是先填写个人信息,然后是选额报考的考试类型信息,之后是个人介绍等等。倘若设计为一个表格,鼠标上下拖动一气呵成填写完,首先,从开始填写到能够提交的工作量较大,用户体验不佳。其次,在填写过程中,出现停电或者断网的情况,资料得不到保存,此刻心情应该的崩溃的。不利于用户对产品友好的认识。
  • 简化五:合适形式的输入框。更具表单录入信息,录入文本信息,则使用文本框。如果是录入性别,则可以用radio,单选。选择计划时间信息,则可以弹出日历控件。合适形式是输入,不仅是方便用户录入,也是对输入信息合法性的控制。
  • 所以分段进行即利于产品界面的排版,又能让用户明白还有多少部分的信息需要填写,还可以方便信息的保存,便于用户安排多个时间段进行填写。

如图表单,先填写个信息、第二步是证件信息,第三步是签注信息最后选择取证方式,分段进行,小目标总是比一下子来个长远目标好达到。

文字和文本框位置满足两个方面:1 减少视觉移动距离

                         2. 减少多屏空间的可能性。

 

  • 左对齐:
  • 优点:视觉移动距离较小。
  • 缺点:左边界面有不整齐的感觉。

  • 右对齐:
  • 优点:视觉水平移动,不涉及垂直方向
  • 缺点:视觉移动距离较大,用户眼神不平滑,容易停留在间隔点

  • 垂直对齐:
  • 优点:视觉垂直移动,不涉及横向方向
  • 缺点:占用较多界面空间。

 

各有各的优势和劣势,各位看官,根据各自产品特别进行取舍。

 

文字引导

  • 提示和帮助类文字:
  • 语气亲近,不要一上来就一副“老娘”的语气,不是自己人应该接受不了。“亲,这里要必填哦”
  • 符合产品气质。产品本身是政府的系统的,当信息填写错了,就不要提示“讨厌讨厌,你弄错了啦”。但是如果产品是少女系电商频道,就可以这么说。
  • 填写信息描述
  • 符合当下表格的专业性,简明扼要的说明要填写的内容及要求。

 

标签通常分为导航标签(Navigation Tab)和模块标签(Module Tab)。

  • 导航标签是整个网站或者系统功能性质的标签,主要是便于用户快速切换功能点,了解整个产品的构建,用户的思维里面清晰的出现产品所能涉及的功能范围。
  • 模块便签指每个功能里面有2-10个同层分类的入口,每个入口界面彼此独立,为了不让用户有和母功能脱离的感觉,采用标签形式。

被选中的标签大多用和界面相一致的浅色调表示,一致的作用是提醒用户当前所在的用户,浅色,其他标签用深色是为了提醒用户其他标签页的存在,做视觉上的强调。

人脑壳的反应时间在0.1S左右,界面鼠标移动处在存在悬浮和点击两种交互,如果是做点击标签,进行功能切换,就不存在误操作反应。如果是悬浮情况下,就切换至鼠标悬浮对应的功能点,容易误操作导致界面切换,所以一遍悬停时间超过0.1s以后,才进行切换,给用户一个大脑反应和确定的时间。

用户反馈

用户反馈主要分为:系统提示、操作引导、信息反馈和广告弹窗。

  • 系统提示就不说了,就是“本网站20:00到8:00要进行维护,给您带来的不便,尽情谅解。”这类似的就是系统提示。
  • 说下操作引导,具体步骤中的引导就不说了。因为各种各样,可以加粗啊,可以声音提示啊,可以弄个手在按钮那儿指啊指的。通常界面一屏中,会分成1/2展示或者1/3展示。1/2界面中,根据人的阅读习惯,如果导航(网站的整体构架)很重要,比如京东,通常是一进页面就开始搜索或则通过导航查询分类,就放在左边。如果是内容重要,比如新闻网站和社交网站,那么内容占大版面,放左边。
  • 1/3界面同理,导航,内容和广告,哪部分对产品来说重要,就哪部分靠左边。哪一部分的界面比例大。

 

写下你的评论

发布评论 取消
500

写下你的评论

发布
500

评论

查看更多评论

删除评论

删除的评论将永久消失,确定要删除吗?

删除 取消
内容不合法,请修改后提交

只需 50 元,让专业人才为你工作

我也要赚钱,上架我的技能

绑定手机

参与互动需要先绑定手机号哦~

完善信息

参与互动需要完善个人信息哦~

参与互动需要进行审核

为了保证社区的内容质量,需要提一个问题,来证明你是可以的!

在问题审核通过后,即可开启PMCAFF所有功能~

  • 微信好友

  • 朋友圈

取消

打开 APP 阅读

推荐使用 PMCAFF APP,阅读体验更佳。

删除

删除后将永久消失,确定要删除吗?

删除 取消