浅谈 UX 设计

浅谈 UX 设计

首先,我是前端工程师,但这并不妨碍我去了解和扩展视觉/交互领域的知识。在我近几年的工作中,参与过针对消费者的产品 (2C),也参与过针对管理员的配置平台产品 (2B),两者在团队组成方面有很大的区别。

  • 2C 的产品会有相当完整的资源配置,前端工程师对接视觉和交互设计师,在与专业设计师合作的过程中,了解更多的设计常识可以让双方的沟通效率提高,甚至可以提出专业的建议,优化设计;
  • 2B 的产品往往由只有需求来源,缺失专业产品设计和视觉/交互设计,作为前端需要独自支撑整个设计开发过程,那么具备设计交互知识更有必要,这不仅能帮助你把你的产品提升一个层次,还可以帮助你在拒绝非专业的修改意见时更有力;

所以当我打破了这层边界也让我在自己的领域得到了很多益处。

设计基础

在介绍设计基础之前,我想先说一个故事,前几年的一次我带着儿子去海洋馆,当时的南京海底世界有一间很暗的展厅,墙壁的四周都是整面墙大小的水族箱,里面漂浮着许多许多叫赤月水母的动物,配合着变幻的灯光让人印象深刻,儿子很开心,问我爸爸你有没有吃过这种动物,我当时心想我一定没有吃过这种奇怪的东西,因为这样的生物实在太好辨认了,但为了给孩子一个科学的答复我还是用手机搜索了一下赤月水母的百科,结果另我惊讶,这竟然就是饭桌上常常见到的一道凉菜,只我们习惯叫它海蜇而已,之后的每次家庭聚会儿子都会在桌上发现并指给我看这道菜。这正是我想说的,当你完全了解到一件事物的定义之后,你就很容易会注意到它,掌握它。

下面就来让我们了解一下设计的 4 大基础原则,让它们帮助你更好的掌控你的产品。

亲密性

亲密性原则用于组织信息,将同类别视觉元素进行分组,减少混乱让页面变得有序。按亲密性原则设计的作品能够明确的聚焦用户视线,让用户感知到阅读任务从哪开始在哪结束。



菲兹定律 目标距离越远,尺寸越小,用户耗费的时间成本越高,反之越低。



将相关的操作按钮放置在紧邻的位置,就是亲密性的常见用法。

对齐

人的眼睛喜欢看见有序的事物,这样可以感到平静、安全。



任何元素在页面上都不能够随意摆放,页面上一个元素应当至少和另一个元素之间存在某种视觉联系

下图左侧是我们常常见到布局方式,标题居中,内容左对齐;和右侧的对比一下哪一个给你留下更清晰的印象?



往往在布局中使用不同的对齐方式(居中/居左)会让空白部分变得不可控,由于内容长度不同,使得居中对齐的标题部分和正文部分参差不齐;对于设计新手来说默认情况下不要使用居中对齐,除非你需要特别体现内容的庄重和正式。 另外缩进的含义是为了区分段落,那标题下方的第一段正文就可以省略缩进,因为没人会弄错这一点。

对齐的目的是让页面统一且有条理,你的老板也许说不出调整之后和之前有什么区别,但这确实能让用户在使用中感到舒适;



对比

对比可以增强页面的效果,吸引用户的注意,一个有意思的页面往往更有可读性。增加对比的方式很多,字体、尺寸、颜色、空间都能够轻易的完成对比。



需要注意的是 - 避免相似的对比,比如 12 号字和 14 号字,色轮上相邻的颜色,这些都无法起到预期的效果。不妨大胆一些,让对比元素之间截然不同。 - 避免将不重要的元素加以强调,这样才不会让你的用户漏掉重点。

重复

重复原则经常被用到,比如内容标题都是用相同的字号,UL 标记中的元素都使用了统一的项目符号,书本中的页头和页脚在整本书中贯穿始终。


重复是一致性的体现,他让设计看起来是一个整体。基础的字体,字号,颜色都可以用作重复元素。 甚至不完全相同的元素也可以作为重复元素,就像下图中楼层标题颜色就不尽相同,这也是一种多样性的统一,但必须存在足够多的元素,这样才能让人感知出来,而不是两个不相关的个体。



在 WEB 中,重复还有着更重要的用途,由于 WEB 应用的特殊性,如何让用户感知到他是停留在同一个应用中,还是已经通过链接离开了,重复原则起到非常大的作用。

交互体验

我一直都很向往交互设计师这个职业,因为好的交互可以让受众感到一种被悉心照顾的感觉,那是一种温暖的正向的情感,如果我设计的产品让用户有了这样的感受,那会让我自己也很幸福。

一个同理心强的人,能够在交互设计上做的更好。同理心是一个心理学概念,它简单说就是一句话,即设身处地的了解他人的情绪和情感。这个很容易理解,如果你都不知道用户在恼火什么,那还怎么优化你的产品呢?

下面来介绍一些交互设计原则,这些规则都是经过了验证而得出的经验谈,遵循它们对大部分用户都适用。

菲兹定律

获取目标的时间是目标距离和大小的函数。



说人话就是,完成某件个任务的时间会被距离远近和目标大小所影响。

这点在交互设计中的应用的非常广泛,比如: - 按钮需要放置在更加靠近主体区域的地方(可以参考亲密性原则) - 触发区域要足够大,例如一个 16 * 16 大小的图标如果需要可以点击,那点击区域应当适度的放大

希克海曼定律

刺激来源的数量变化对用户选择的影响

说人话就是,可选项目越多用户在做决定上花费的时间越长。

这点常常体现在菜单设计上,如果菜单数量很多不如先进行分组,然后把同组的选项下沉到子菜单中,这样变相的减少了同一时间内用户需要面对的可选项目,往往可以更快的让用户找到目标。



淘宝工具组



米勒定律

普通人只能在工作记忆中保留 7±2 个项目



这个很神奇,而且说的就是人话,很好理解。所以我们在 tab 的设计上就应该遵循这个定律,不要超过5个。



简单原则

1910年,心理学家马克斯·韦特海默(Max Wertheimer)观察到一系列在铁路道口上闪烁的灯光,看起来好像单个灯光在周围移动。而实际上从灯泡到灯泡,是一系列开关而并不是灯光在移动。这种观察得出了一套关于我们如何在视觉上感知物体的描述性原则,也就是设计中常常用到的格式塔原则。

格式塔是著名的心里学派,说到人的大脑会将初次见到事物理解成容易记忆的对象,或在记忆中搜索类似的知识去解释它们。



易于掌握的事物会让用户潜意识中感到安全,这是人避免危险的本能。所以设计交互时要尽量避免那些复杂的操作,尽量的降低用户的理解成本。

帕金森定律

任何任务的膨胀,都将最终导致效率低下

帕金森定律是常常用在管理学中,使用在交互体验中可以这样理解,功能的冗余反而会降低用户的使用效率,这和著名的 Office 工具存在的问题一样,完成同一个目的的方法太多,反而导致用户使用和记忆的混淆。

系列位置效应

系列中第一个和最后一个项目更容易被人记住。



这点非常常见,高频操作放在这两个位置更不容易出错。



淘宝底部的首页和我的就是系列位置效应的典型应用场景。

最后

理论学习离不开在工作中验证,祝大家能从上文中了有所收获,Thx~

发布于 2018-11-20

文章被以下专栏收录

    阿里巴巴南京研发中心隶属于阿里巴巴集团客户体验事业群,成立一年以来,团队规模迅速扩张,业务涵盖淘宝天猫业务维权咨询、帮助中心、阿里小蜜、人力云众包、大众评审等,岗位已包含后端技术、前端开发、产品经理和 UX 设计师等,想在南京工作或者想回江苏离爸妈近的同学们,还等什么呢,快点递交你们的简历吧!