好车友俱乐部官方号
新浪微博
微信

10个UI设计小技巧,让页面更加合理!


一个网站不仅仅是一组链接过的页面,而是一种体现,一个空间。在这个空间里,不同的人、组织会遇见、沟通、交互。这些互动能为访问者提供体验。作为一名网页设计师,我们的工作就是尽可能地使体验感受更好。


其中的关键就在于优先并且始终考虑你的客户。


幸运的是,虽然网页设计还是一门较新的学科,但它对人机交互(HCI)的科学研究的帮助很大,而我们这篇文章就将会由9个来自HCI研究的准则,他们都能帮助你在设计网站和程序时,更好地专注于用户。


界面设计侧重于界面功能的布局,用户体验设计则侧重于更大的局面,也就是整个体验,界面设计只是其中的一个子集。


1.了解客户的需求 


最重要的是,我们需要定位用户——内外都需要。这就意味着我们的应用能吸引多少流量,更重要的是,了解其中客户的需求,以及他们在满足需求的道路上所遇到的障碍。


而要做到这种程度的分析,我们需要更细致的统计数据,这就需要深入了解网站的用户了。与用户面对面交谈,观看他们的使用流程,询问相关的问题,比如“你对这种设计有什么看法?”,或是其他更深的问题。


用户的需求是什么?是什么在阻碍他们满足自己的需求?而我们的网站将会如何帮助他们解决或是克服这些阻碍?


千万别空想你的用户想要什么,你需要实地深入挖掘。毕竟,欲望只是需求的产物,如果我们能够满足用户深层次的需求。就能满足他们的一些愿望,以及更多的基本要求。


通过数据分析以及与用户的沟通,我们能够得到许多问题的答案,这些问题可能是从如何使用界面,或是界面的重点应该放在哪里。


2.定义界面的使用方法


在设计界面之前,我们需要想清楚它的使用方法。随着触屏的普及,观察比想象更能发挥作用。


亮点:应用程序的用户体验大多来自轻松和流畅的横向触摸。


人们有这么两种方法来使用网站和应用程序:通过与产品进行交互的直接方法,与通过与产品外围进行交互的间接方法。


直接交互的例子:

  • 点击按钮

  • 刷卡

  • 使用指尖进行拖拽


简介交互的例子:

  • 使用鼠标点击

  • 使用键盘命令/快捷键

  • 键入表单输入域

  • 在Wacom上绘图



有时交互很简单。


用户定位以及用户所使用的设备会在很大程度上影响我们的决定。如果是为老年人或是手部受限的人群进行设计,我们就不需要太多的横向滑动。如果是在为通过键盘来与应用程序进行沟通的编程人员或是作家进行设计,那么我们需要支持所有常见的快捷键方式,以最大限度地减少鼠标使用时间。


3.设定预期


许多网站或是应用都会出现这样的情况:单击按钮就进入付款界面、删除网站或是一些不是很好的界面。每一次点击都有结果,有时还会带来焦虑。


因此,一定要让用户知道如果点击了这个按钮会发生什么。我们可以通过设计或是复制来做到这一点。


通过设计设定预期:

  • 突出显示所需的按钮

  • 使用约定俗成的符号,如用垃圾桶代表删除、加号代表添加内容,放大镜用来表示搜索

  • 选择具有相关含义的颜色,如绿色代表“前进”,红色代表“停止”


通过复制设定预期:

  • 解释清楚按钮的作用

  • 在空白处提供具有导向性和鼓励性质的文字说明

  • 适时发出警告并要求确认


对于不可逆的行为,如永久删除某些内容,则需要询问用户是否确定。


在InVision中,单击垃圾桶图标并不会立即删除,网站会询问你是否确定,并告知操作不能撤销。


4.预测可能出现的错误


人都会犯错,而神明会原谅犯错。——Alexander Pope《论批评》


人总是会犯错,也总是不得不承担后果。这里有两种方法可以减少错误的影响:

1.防止错误发生

2.亡羊补牢,为时不晚


我们能在很多电子商务网站以及表单设计中看到很多规避错误的方法:在填写完所有空格钱,按钮并不被激活;表单常常会检测到电子邮件地址错误;以及弹出询问窗口询问你是否真的想清空购物车。


与亡羊补牢相比,预测错误从而规避往往没那么沮丧,毕竟点击“下一页”或是“提交”时再发现错误简直太难过了。


在写防错说明时,我们需要确定说明说清楚了两件事:

1.把问题解释清楚了,例如,“你说你出生在火星,但人类并没有在火星上殖民,所以出错了”。

2.将问题的解决方法解释清楚。例如,“请选择地球上的一个出生地”。


另外,请注意我们还需要一个保留之前的某些状态,好查看之前并没有出现错误的情况。例如,如果我不小心删除了某些重要文件,但实际上可以回复文件,请使用一行文字让我知道有这个功能,就像“您可以转到垃圾桶还原已删除的项目”一样。


预测用户错误的原理称为poka-yoke原理,这是一个日本术语,意为“防错”。


5.反馈迅速


在现实世界中,环境总是给予我们反馈,我们说话,别人回应;我们撸猫,猫则会发出咕噜声或是嘶嘶声,当然这取决于它的心情。


数字界面往往不会给予我们反馈,我们总是不知道是否该重新加载页面、重新启动笔记本电脑,还是将它关闭,从最近可用窗口中删除。


所以我们可以设计一个加载动画。当我们点击它时,让那个按钮弹出并反弹,当然幅度不要太大。如果我完成了一些事的时候,也可以设计一个虚拟的“击掌”,让我知道我的完成情况。



MailChimp在用户安排或者发送电子邮件是提供反馈和建议


但要确保反馈最够迅速。Usability.gov将任何冲过1秒钟的延迟定义为中断,超过10秒基本可以说是受损了。但实际上,只需要三秒钟,就能让美国一般的人口受到影响。


如果页面只能在5秒左右加载好,就不需要显示进度条了,因为这会使得加载时间看起来更长了。单可以使用并不明示前进的可视化,例如Mac的“死亡风车”。如果我们需要在网站上使用进度条,请考虑尝试使用一些视觉技巧,这样能让加载看起来更快一些。


6.仔细考虑元素的位置和大小


Fitt定律是人机交互(HCI)的基本原理,它是指:获取目标的时间是目标距离和大小的函数。


换一句话说,如果元素越大或是越近,我们就能更快地把光标放在上面。这句话对人机交互和UI设计来说意义深厚,但其中最重要的有三个:


我们需要使得按钮和其他需要点击地元素大到能够轻松地被点击和查看。这对于菜单一类地连接列表来说十分重要,如果空间不足,我总会点进错误的链接。


为更常用的操作制造更大更突出的按钮。


在屏幕的边缘或是角落防止导航,或者是其他常见的交互元素,例如搜索栏。可能你会觉得这有违常识,但在边缘就减少了对准确性的要求,用户就不用担心点到范围外去了。


在考虑元素的放置位置和大小时,请始终记得考虑交互方式。如果你的网站是水平滚动而不是垂直滚动的,就需要考虑在何处、如何给用户提示这一特殊的滚动方式。


7.不要忽视标准


作为创意性职业,设计师总是倾向于重塑食物,但这并不总是最好的主意。


为什么?因为熟悉界面的改进会增加我们的“认知负荷”,这使得用户要再次思考自己的学习过程。我们的确可以随心所欲地重新设计车轮的形状,但这一切都要建立在实用的基础上。


这一法则正好解释了为什么Google文档的菜单栏几乎与Vista系统之前的Microsoft Word的菜单栏相同:


Vista系统之前的Microsoft Word


Google 文档菜单栏,2015

‍ ‍

这也解释了为什么Pocket为什么要在其Android应用程序中更改归档按钮的位置。


更改按钮位置后的界面更符合Android的设计风格,也使得新用户继续使用Poket的可能性增加了23%。


在2013年的秋天,归档按钮被放置在了屏幕的左上角,右侧是Android设计规范所说的“向上”按钮。Pocket想让人们更关注阅读体验,而不是简单地重复一些简单的操作,但更改过后的位置会使得新用户以外关闭并归档他们正在阅读的文章,而不是像预期那样顺利地返回到他们地阅读列表中。


这一微小地变化,增加了新用户继续使用Pocket23%的可能。