首页

用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文聚焦 Airbnb 产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。

一、系统状态的可见性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系统应该在合理的时间内通过适当的反馈,始终让用户了解正在发生的事情。

这项原则通常被遵循并使用在如下几个场景:

  • 系统导航、Toast。让用户明确知道「我在哪」;
  • 按钮、图片等元素可被交互的表达与反馈。通过视觉、与空间上的反馈,向用户传达页面元素是可以被交互的,引导用户前往下一站;
  • 用户完成交互动作和系统操作后,系统需要给予用户对应的反馈。比如操作成功、完成注册等;

Airbnb 的房源详情页顶部导航,可以通过点击快速定位到房源的某类信息,让用户清晰地知道「我在哪?我还能去哪?」

在发布房源时,系统顶部模拟了进度条,显示出了当前步骤,以及当前的发布进度。

二、贴近用户的真实环境

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson

系统应该说用户的语言,用户熟悉的单词,短语和概念,而不是系统导向的术语。遵循现实世界的约定,使信息以自然和合乎逻辑的顺序出现。

这项原则说的直白一些,就是:「说人话」。

产品简单到傻瓜也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,做产品要有傻瓜心态。不要炫耀自己的智商,不要让用户觉得自己是白痴,请用最简单直白的语言描述状况;就好比自然世界里,你和他人说话的时候必然使用简单的白话文进行直白的沟通以保证交流顺畅。

在房源的详情页、Airbnb PLUS 介绍页,系统用了大量高质量的摄影图片传达一种空间氛围感。同时,在介绍文案的措辞方面,简洁易懂,语言逻辑清晰。

三、用户有控制和来去自由的权利

User control and freedom

Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson

用户通常会错误地选择了系统的某个功能,并且需要一个明确标记的」紧急出口「来离开不想要的状态,而不必进行扩展对话。支持撤消和重做。

用户拥有自由使用和控制系统的权利,最为常见的就是系统会为用户提供「撤销、重做、返回」的入口。

在故事专栏,当用户在浏览器当前标签页进入下一级页面时,系统都为用户提供了返回按钮,一方面方便用户来去自由,另一方营造出了一定的沉浸式浏览体验。

四、系统的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用户不应该怀疑不同的话语、情况或行为是否在表达同样的一件事情。系统设计需遵循平台惯例。

  • 移动端 APP 内的返回按钮位置通常会被放在左上角,当然有些 APP 会将返回按钮统一放在左下角,虽然返回按钮的位置不同于大多数 APP,但对于此 APP 的返回交互来说,其实还是一致的;
  • 除常用按钮位置需要符合一致性原则外,icon 的视觉设计也要遵循一致性原则,一个对象对应一个 icon.

在房源、故事集列表页,系统统一用了卡片式的视觉风格,并且每个卡片里的文字与背景图片的层次也都保持一致。

在房源详情页,系统使用了统一的 iocn 风格和文字风格,传达房源的设施属性。

五、防止错误

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson

比良好的错误提示信息更好的方法是:一个走心的设计可以提前防止错误的发生。系统要么消除容易出错的情况,要么检查它们,并在用户采取行动之前向用户提供确认选项。

  • 比如某些操作不能进行,那就置灰或隐藏,不要在用户点击后才提醒不能操作。如果有某些内容不能选择,就置灰或者隐藏,不要等用户点击完成时才告知不能使用;
  • 同样,在用户容易出现错误操作的场景下,需要给出二次确认,如:删除和取消重要信息的操作。

如果房源在某天或多天已被预定或暂时不开放,则日历里将这些不可预定的日期置灰。

用户在修改个人重要信息后,系统会让用户输入密码二次确认。

六、系统识别胜过用户记忆

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson

通过使用对象,动作和选项的可视化表达,最大限度地减轻用户的记忆负担。用户不应该记住从对话的一部分到另一部分的信息。

  • 为用户保留查看和搜索历史是一个很常见的系统识别的例子;
  • 用户在填写一个长页面表单时,系统可以根据实际情况提供一个实时预览的功能,避免出现用户填了下面忘了上面的情况;
  • 用户在填写完表单(比如订单页面)后,系统可以再次向用户展示所填信息,以最终确认;
  • 用户为了完成一项目标任务,从一个页面跳转到另一个页面后,系统可以再次展示上一个页面内与目标任务相关的核心信息,以减轻用户的记忆负担。

系统会在首页第一屏为用户展示浏览历史(登录后)。

搜索框也会保留最近5次的搜索历史。

七、灵活易用的使用体验

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson

一些被精心设计的体验也许会被专家用户察觉到,使系统需要能够满足无经验和有经验的用户。允许用户进行频繁的操作。

当用户在滚动屏幕浏览房源详细信息时,系统将预定的基本信息(如:价格、日期、人数等)固定在浏览器的右侧,方便用户在浏览过程中随时开始预定步骤。

八、美观和简约的设计

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson

对话中不应该包含无关紧要或很少需要的信息。在对话中每增加一个相对重要的信息,就意味着需要弱化其他信息。

高颜值不需要理由。

九、帮助用户识别,诊断,并从错误中恢复

Help users recognize, diagnose,and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson

错误信息应该用通俗易懂的语言表达(不要用代码),较准确的反应问题,并且提出解决方案。

实在无法避免的报错时,不要单纯只是报错,要提供解决方案。就好比小时候犯错,你绝不能光说:「啊,我错了。」老师或家长必然会追问:「错哪儿啦?」你要是说不出缘由,则必定被认为认错不诚恳不真心。

当用户填写错误时,系统会及时给出提示以及解决方法。

十、帮助文档

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson

如果系统能让用户不需要阅读文档就会使用那是最好的,但通常情况下还是需要帮助文档的。任何信息应该容易被搜索,且专注于用户的目标任务,并列出具体的步骤来告知用户。

  • 对于一些可以用一句话说清楚的帮助,可以直接在对象旁边提供鼠标悬停出发的 tips,或者简明的辅助说明;
  • 对于较复杂的,一两句话说不清楚的帮助,则需要跳转至对应的帮助页面;
  • 系统需要有一个帮助中心,为用户提供模糊搜索、分类搜索,来为用户提供更全面的帮助。

在个人资料页面,对于用户关心的隐私信息,系统会给出非常有亲和力的解释文案。此外,在系统很多页面都有对应功能的帮助链接以跳转至帮助中心。

系统的帮助中心,提供了搜索和问题分类引导,方便用户快速定位问题。

△ 本文图片版权归 Airbnb 所有

总结

号称以设计驱动的 Airbnb 公司,的确在产品设计、用户研究、UX设计方面展现出了较高的功力。网站甚至移动端APP 的框架层、范围层、视觉层的设计都体现出了高度的用户体验一致性和品牌感。可以看出,Airbnb 对 design system 的重视一级高度的执行力。什么是好的产品品牌认知和识别,我可以简单的理解为:「脱掉」Logo,用户照样认识你。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

掉进这6个陷阱,可能会毁了你的原型设计!

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


很难想象,如果没有原型设计,如今的数字产品设计流程会变成什么样。原型的存在,让产品团队在制作和开发过程中更加直观,就像那句话说的:展示,而非表述。

现如今,许多产品团队借助原型来测试想法,甚至销售产品。不过,原型设计本身并非是万无一失的,设计师依然会面临许多陷阱,并且拖累整个产品的进程。

今天的文章,总结了6个常见的原型设计的陷阱。

1. 目标不明确的原型设计

我们先设计出来,然后弄明白如何使用它。

在这种说法的指引下,设计和开发团队需要花费大量的时间来处理那些没有任何价值的事务,在没有特定目标的情况下制作原型,会浪费大量的时间。

每个原型的设计目标应该是非常明确的,原因应该是清晰的。这个目标可以是源自于一个特定的想法,或者某种假设,产品团队在这个方向的指引之下,利用系统化的知识来构建符合目标的原型。

在创建原型之前,设计师应该问自己一个问题,「通过创建这个原型我们要试图解决什么问题?」如果能够找到一个明确的答案,那么这个原型是清晰且具有凝聚力的,有助于减少潜在的开销。

2. 制作原型过程受阻

产品团队通常会力图制作出有效有用的原型。当制作出来的原型不可用甚至根本无法完成的时候,整个团队会为之气馁,而这种消极的心态可能会拖垮整个项目。

为了提率,设计人员应当将失败的情况视作为整个原型制作过程中自然的组成部分。原型在很多时候是用来测试假设和想法的,并非每个假设都是有效的。这就是为什么创建工作原型不应该是原型制作工作最重要的结果。原型制作工作最重要的成果应该是获取有用的信息和新的知识。因此,将焦点从失败的情绪上,转移到学习新的知识上来,成功和失败的原型,都能够让你的产品进步。就像大家常说的,失败是成功之母。

3. 对第一个想法精雕细琢

产品团队常常在拥有第一个想法的时候,就想坚持住,将它打磨成为最终的解决方案。随后,团队花费大量的时间来出揣摩尝试,调整细节,制作原型,甚至直接开始设计视觉稿。

结果,花费无数小时创建和打磨的原型,在可用性测试早期,就呈现出不理想的状况,接下来,设计师和团队会意识到最初的想法其实不够好。

经验丰富的团队知道,想要探索和测试一系列的想法是必不可少的,并且只有通过测试之后,效果最好的方案,才是值得坚持做下去的。花费更多的时间来思考,团队才能针对问题空间继续挖掘下去,并且找到潜在的解决方案。

4. 爱上你的原型

原型的设计者常常会对于自己的设计有大量的投入。这种投入是会造成一种「投资偏见」——你在某个事情上花费的时间越多,它对你来说就越有价值。值得注意的是,它对于你的价值会越来越高,但是对于别人而言并非如此。而原型设计同样如此,当设计师对于自己的原型过度沉迷的时候,产品可能就会暴露在危险之下了:你会很容易忽略它们存在的缺点,即使这些缺陷很明显,设计师也会忽略团队成员和其他人的反馈。

不要拿原型当传家宝。

在打磨原型上花费太多宝贵的时间和精力,会剥夺设计师对于反馈应有的注意力和敏锐度。让你的原型在细节和复杂度上保持在一个合理的度上。

原型并不是艺术品,它应该是帮你找到答案的工具。

如果你倾向于采用尽可能完善的设计,那么请采用最小可行原型——添加足够的细节,但是尽可能确保可行。将原型视作为一次性的工具。每个原型都有特定的用途,一旦达到目标,就尽可能用更好的东西替换它。

5. 忽略草图的重要性

「当我们拥有强大的原型工具的时候,为什么还要使用纸和笔呢?」设计师跳过手绘阶段,并且直接使用计算机来绘制数字原型的时候,他们相信数字化的设计是可以节省时间的。但是实际上,手绘的草图能够帮助设计更快地起步。

当你下次不知道如何解决问题的时候,可以试着从笔和纸开始绘制草图。只需要开始绘制草图,勾勒出所能想到的变化,然后把它们贴在墙上,并且和你的团队一起从技术和业务的角度上讨论可行性。

6. 为原型选择错误的保真度

保真度是描述细节程度的一种度量,我们常说的线框图细节简略,是低保真的,而视觉稿则常常会用到丰富的细节刻画,它是高保真的。原型的呈现形态是非常多样的,可以是低保真的也可以是高保真的。制作一个高保真的原型是非常诱人的,但是一定要抵制住这样的诱惑。值得注意的是,原型的保真度应该和你想法的保真度相匹配。

这意味着,设计师应该根据他们的设计过程所处的阶段来选择保真度。当设计师违反这一规则的时候,往往会带来糟糕的结果。比如过高的保真度会让处于早期阶段的设计师陷入「投资偏见」。

当团队设计产品尚且处于初期的时候,尽量采用低保真的策略来进行绘制,比如使用草图。

△ 低保真的草图原型

当你想要与真实的用户一起测试你的想法的时候,尽量使用保真度更高的设计,比如数字化的可交互的原型。使用高保真的原型来进行可用性测试,能够产生更真实、具体的反馈。高保真的原型展示给利益相关者来看也非常有用,他们会更好地判断产品的功能和内容。

△ 在 Adobe XD 中创建高保真的原型

因此,考虑最终的目标和你所拥有的时间,来确保原型的最佳保真度,尽早与期望达成一致。

结语

原型设计在每个产品设计项目当中都是至关重要的,正确地设计原型,才能尽早地构建真实的产品。

One more thing

关于原型设计,乔布斯在1992年 MIT 的演讲上说到的一个事情非常有意思。彼时,他还未回归苹果,而是在制造名为 NeXT 的高端电脑,并且对于面向对象编程有着极高的热忱。

我们已经有2年时间没有构建任何工程上的原型了。这意味着,从产品开始设计的第一天,工程师和整个制造业就已经参与进来了。很多时候,在构造原型的时候,生产工具和技术根本是无法与之匹配的,而当你在原型设计的时候所积累的东西,在投产的时候就得完全抛弃,然后重新开始。因为我们始终紧密地和技术结合起来做,因此我们不会抛弃任何东西,并且不浪费时间,这也是我所见过的设计、工程和制造团队之间,最健康的关系之一。

现如今,身为设计师的我们在使用 Photoshop、InVision 等工具制造原型的时候,实际上开发可能是与之脱节的。产品团队中,设计和开发之间的矛盾,从来没有仅此减少过。而「全栈设计师」这一概念的提出,又何尝没有来自这种矛盾的压力呢?

诸如 Sketch 和 Figma 这样的新工具在做原型设计的时候,已经或多或少地开始在设计和开发之间找到协同的点,试图在设计验证和技术验证之间,找到结合的办法。

更好的原型设计,更合理的技术和设计的结合点,这也许是我们未来的探索方向吧。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


想用设计化腐朽为神奇,你得先想明白这10个问题

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


今天的译文同样来自设计师 Eugen Eşanu,他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问题依然能够给我们今天的新局面以启发。

「好设计应该是显而易见的」,这句老话在过去的几个世纪当中影响到了各个不同的领域,从美食到音乐,从建筑到哲学,我们如今的生活几乎是在这句话的影响下被逐渐被塑造出来的。

但是同样的,人类的进化并没有我们想象中那么快速,我们的思维和本能仍然被深刻地影响着我们的决策。换句话来说,人类的行为模式有着很长的保质期,在许多事情上,20年前很难做,在今天依然不那么容易去执行。

重温《Don’t Make Me Think》

Steve Krug 的这本《Don’t Make Me Think》中文译本名字是《点石成金:访客至上的网页设计秘籍》,译名可能没有它的原名那么直接,但是也传递出这本书所要表达的核心概念。

这本书成于2000年第一次互联网泡沫时代之后,Krug 在这次浪潮之后提出了不少实用的设计原则,直到今天仍然有着极高的价值。这本书随后多次再版和修订,其中的设计案例几经迭代升级,我们可以看到现代网页设计的提升和进步,同时也能从中感受到,用户——人类行为本身的模式化。「访客至上」的表述太过客气,「不要让我思考」这一表述更能表现用户行为的特征,而今天我们所面对的绝大多数的优秀产品,无论是手机电脑还是汽车,同样遵循着这一原则。

这本书的成功是建立在无数痛彻心扉的教训之上,这也使得它本身的价值无与伦比。今天的文章本质上也是一篇读书笔记,设计师应该对于用户、人性有足够的认知,方可作出足够优秀的设计。下面的10个总结,既是常见的认知错误,也是成就好设计的契机,就看你怎么把握了。

1. 对于内容,用户从来都是扫视,而非用心阅读

当我们在查看内容和信息的时候,绝大多数情况下我们都会下意识寻找让自己感兴趣的东西。比如,我们很少会完整地浏览网站上所有的文本和内容,为什么?绝大多数的用户打开网站都是在试图完成某项任务,达成某个目标,而网页中的不同部分的内容往往是服务于不同的功能和目标的,我们努力达成目标即可,并没有阅读全部的必要。不过,作为网站的设计者,我们往往还是提供了足够丰富的内容和完善的功能,一方面是因为我们觉得人们需要知道,另一方面也是应对不同用户的需求。正如有的设计师所说的,它们「增加了体验」。

所以,通常而言,我们可以作出下列优化:

  • 大量使用标题:通过标题告诉用户这些内容都是和什么相关的,确保用户能够在扫视的时候快速明白并做选取。
  • 保持段落精简:在长段落中,用户可能稍分神就迷失了,而短段落更容易阅读,也更容易汲取其中的信息。
  • 使用列表展示:几乎所有的信息都可以分割为列表来展示,甚至一个使用多个逗号分割的句子,都可以制作成为列表。当然,值得注意的是,注意列表之间的行间距,确保可读性。
  • 突出关键信息:用户在扫视的时候,主要是在定位关键词。将关键词使用粗体等方式标注出来,便于用户扫视和定位。不要强调太多的内容,这样会失去强调的作用。

2. 创建卓有成效的视觉层次

视觉层次是确保用户快速扫视能够获取到信息的重要助力。视觉层次能够呈现出页面中不同元素之间的优先级和关系,在设计的时候,同样需要遵循下面的几个原则:

  • 重要性越高,越突出。最重要的元素,要么越大,要么越醒目,使用特定的色彩标注出来。
  • 在逻辑上有关联的元素,在视觉上应该相关的,例如使用相同的色彩或者相同的视觉样式。

3. 不要重新发明轮子

我们明白,用户总会期望看到新东西,但是,市面上有太多的工具和应用,如果各行其是,忽略约定俗成的规则,特立独行地采用自己的规则,会让每个应用的学习成本都提高,这对于用户几乎是毫无益处的。

当设计师被要求设计某个东西的时候,内心是充满重新发明的冲动的,这个我们都明白。而设计出和别人相似的东西看起来又有点「政治不正确」,甲方总会希望设计作出点不一样的东西。更何况,这还是一个少有鼓励和赞扬的行业,也很少为「最贴合用户需求」的产品颁设计奖。

但是设计仍然需要在各方之间作出最佳的平衡。

在重新发明轮子之前,你必须了解破坏和创新所意味着的真实的价值(时间,体验,耗费的精力和所需的知识)。

4. 产品说明没必要存在了

我们的工作是要让产品清晰明了,让事情便捷易行。即使做不到明显,也应该尽力向着不言自明的设计靠拢。说明书这种东西是没有人会主动去看的,它们的存在意义本身就不大,你需要通过合理的设计,让产品本身发挥指引性的效果。即使说明书必须存在,也尽量让它简短明了。

如果功能并不明显,我们应该尽量让它明显一点,让目标更明显。

以宜家为例,一个需要买回家组装的柜子,绝大多数的用户可以在简短的指引之下就可以轻松正确地组装,为什么?因为绝大多数情况下,一个柜子长什么样,用户眼前有清晰的画面,哪怕说明只有几张简单的图片,用户也不会犯错。

5. 用户并不在意产品是怎么运作的

绝大多数的用户并没有兴趣了解你的产品的工作方式,并不是因为他们不够聪明,仅仅是因为他们不在乎。所以,一旦他们确定你的产品是能用的,就很少会去注意其他的部分。

以苹果的无线耳机 AirPods 为例,从价格上来说,它并不亲民,但是它的交互方式和使用体验确实非常的独特和优秀,这也不难理解许多用户会选择它。用户在购买它之后,并不会去思考它是如何运作的,其中所包含的诸多新技术,对于用户而言,只是润物细无声地发挥着作用而已。

我的母亲就使用的 AirPods ,她从来不会问我它的原理,但是她很清楚,耳机需要放在充电盒中充电,和手机配对之后就能用了,并不复杂。

6. 来去匆忙的人们,从不主动寻找「微妙的线索」

这一条可能是我最喜欢的。我们设计师总喜欢为用户带来微妙的视觉效果,来给用户带来乐趣。对吧?可是如果我告诉你,用户并不关心它们,你会怎么想呢?他们也根本不会告诉你他们有多在意或者多不在意,也不会在一次又一次看到的时候对于这些设计有多少感觉。

为什么会这样?生活环境赋予每个用户以复杂多变的情境,他们很少有机会去感受微妙的设计所带来的奇妙情绪。风在吼,狗在叫,小孩还在满屋跑,水壶里面水开了,老婆在耳边抱怨着工作中的细微末节,而你正在填写着表单准备预订明天的高铁票,在那个时刻,APP 当中微妙的动效和视觉线索,手一抖,你可能还会多买一个没有必要的捆绑销售的酒店折扣券。

但是另外一方面,对于优秀体验的追求不应该因此而放弃,还有很多用户会从中受益,这也是促成优秀产品的必须因素。只不过确实有很多用户没法去在意它们罢了。

7. 焦点小组的任务不是做可用性测试

焦点小组是做什么的?一小群人围坐在桌子旁边,讨论他们对于产品的看法,他们过去的经历,它们的感受和对于新概念的理解。焦点小组的作用是帮你更好地界定目标用户,目标用户的感受等等。

可用性测试则是另外一回事。做可用性测试的时候,通常是为了测试产品而观察一个特定的用户使用产品的过程。在测试中,你需要测试人员执行特定的操作,以此来查看整个设计中的概念是否直观,功能是否需要完善。面对焦点小组的时候,你需要倾听观点,梳理思路,在进行可用性测试的时候,更多需要的是观察,并且解决具体的问题。

8. 不要让个人情感替代整个用户历程

我们在设计产品的时候,常常会从自己的需求出发:「我也是一个用户,所以我知道什么好什么不好。」我们对于自己的喜好有着强烈的感受。

我们会说,当我们的产品具备_____的时候,我们会很喜欢,又或者,我们认为_____是一个巨大的痛点。当我们真正和团队成员坐在一起讨论产品的时候,大家都有各自的看法和各自的情绪,所有人的都有着极强的个性和独特的看法,这个情况就很尴尬了。因为我们常常会倾向于认为绝大多数的用户和我们自己一样。事实上并不一定如此。

9. 问对问题,才能让产品走向对的方向

无论是设计产品功能还是测试产品的时候,问对问题都很重要。测试的时候,问用户「你们喜欢下拉菜单吗」这样的问题,不仅销量不高,而且不会带来价值。这个问题,应该这么问:「在这个情况下,在这个页面上,下拉菜单这种设计是否能够给你带来良好的用户体验?哪里让人觉得不舒服?」

诸如「用户喜欢这个产品吗」这样宽泛的问题意义不大,用户也很难提供针对性的、具体的回复。

而且,作为设计师我们不应当专注于用户是否喜欢这样的问题,这样会失去动力和专注力。可用性测试可以帮你消除各种「喜欢」相关的问题,并且帮你找到真正要做的事情。这才是重点。

10. 不要让用户思考问题

我在哪?我要干嘛?

我应该点哪里开始?

他们在这放的这个控件是干啥的?

这个页面是用来做什么的?

他们为什么这么称呼这个功能?

这个是广告还是内置的功能?

在使用产品的时候,如果触发用户大脑中的各种问题,只会增加用户的心理负荷和工作量,分散用户注意力并不是好事,而且用户本身并不喜欢解决各种难题。

每当用户点击某个控件而不起作用,或者它看起来是个链接实际上并不是,会消耗用户对你的信任感,降低产品的可靠度。

One more thing

炫酷的概念和新颖的趋势不仅吸引用户,同样是设计师的心头好。但是我们在新的时代,新的局面之下,始终面对的是以往的用户,看似千变万化的需求背后是不变的人性。

至少《Don’t Make Me Think》这本书一直在探讨的问题,经过20年的世事变迁,几次互联网浪潮,在这个号称互联网4.0时代,仍然发挥着作用,依然是那么具有启发性。

新状况之下潜藏着老问题,想要洞悉本质,设计师要懂心理学和行为学。在之前的几篇文章当中,我一直在试图梳理出不会随着时间改变,而一直存在的、亟待解决的问题以及可供使用的原理。

《为何如今的产品总给人千人一面的感觉?》揭示的是「特征蔓延」和「竞争驱动式设计」是如何让产品走向平庸和毁灭,解决方案藏在结尾。

《熟知用户行为的这7个层面,你的设计才会走进人心》则介绍了唐纳德诺曼的用户行为的7个层面,这是一套分析用户行为,设计产品流程的有效方法,拥有持久生命力的产品的设计策略,和这套方法不谋而合。

《这7种广泛存在的认知偏差,影响了我们太多的决策》 则帮你梳理了7种常见的认知偏差,认识自己了解用户,这些知识能消除误解,同样能够帮你洞悉真相,是不可多得的利器。

设计的方法和工具成千上万,想明白道理,问对问题,接下来的路更容易走通。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务



ofo《我们看过的世界杯》H5

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

项目背景:为了配合世界杯做的H5活动,主题是DIY你的世界杯时刻                                      

玩法:选择自己看世界杯的场景,可以在画面当中添加食物和自定义的小元素,另外根据场景的变换人物的腿也可以选择哦                                                 

项目周期大概半个月,和团队的小伙伴一起完成的,感谢@珊,@暖暖,@明明   

使用工具包括sketch、ps、手绘板                                                                    

 

ps:做H5真的是很累,工作量大,画的手疼,不过也积累了很多的经验,上线了好开心!

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务



经验总结!Material Design和iOS 产品设计的差异化思考

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Material Design(以下简称MD)是谷歌设计的一套视觉语言设计规范,主要应用于安卓类应用。


iOS Human Interface Guidelines(以下简称iOS)是苹果公司针对 iOS设计的一套人机交互指南,目的是为了使运行在 iOS 上的应用都能遵从一套特定的视觉以及交互特性,从而能够在风格上进行统一。

相对来说,我们对于 iOS 的设计规范更加熟悉——因为考虑到成本,设计师进行产品设计的时候只会出一套 iOS 的设计稿,然后去适配安卓机型。

很少会针对安卓机型再出一套 MD风格的方案,这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言,不同的设计语言会培养出不同的操作习惯。

例如使用安卓手机的用户平时见到的都是 MD风格的界面,突然下了一个 iOS风格的应用,那么操作起来就会很不习惯,增加了学习成本。

为了让产品可以适用不同平台用户的操作习惯,提供 MD 和 iOS 两套设计稿是非常有必要的。当然 MD 和 iOS 的差异不是一篇文章就能说清楚的,这里我就从阴影、导航和配色这三个方面来简单分析一下 MD 和 iOS 的差异。

一、阴影

对于不太熟悉 MD 的设计师来说,MD 意味着大色块+阴影。

为什么 MD 如此痴迷于阴影?

从它的名字就可以看出来——Material Design,这里的 material 指的是纸张;因为来源于现实生活,所以 MD 非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系,而阴影就是最常见的表现形式:

同样的账户注册,安卓界面中按钮带有阴影而 iOS 界面中按钮没有阴影。

FAB(Floating Action Button),带有阴影的浮动操作按钮甚至成为了 MD 的一大招牌。相比较而言iOS更加扁平化。

二、导航体系

产品导航体系主要由菜单栏构成,而根据位置以及交互方式可以分为顶部栏菜单、底部栏菜单和侧边栏菜单。iOS 的导航体系主要由底部栏菜单构成,而 MD 大量使用了顶部栏菜单和侧边栏菜单。

下面我们来看几个例子:

网易云音乐在 iOS 中采用的是底部栏菜单导航,而在安卓机型上导航栏被移到界面顶部,「账号」被收到侧边栏中。

b站在 iOS 中有底部栏菜单有5个标签,而在安卓机型中只有4个标签,「我的」同样被侧边栏收起来。

推特在 iOS 中使用的底部栏菜单导航,在安卓机型中导航栏被移到了顶部。

而 Apple Music 做的更彻底,在安卓机型上直接舍弃了底部菜单栏,采用了侧边栏作为主导航模式。

我们发现前两款国产应用在安卓机型上都保留了底部栏菜单,而后两款国外应用直接砍掉底部栏菜单。不只是 Apple music 和推特,很多国外的安卓类应用都没有使用底部栏菜单。而国内的应用因为考虑到 iOS,即使 MD 化也是阉割版的,属于 iOS 和 MD 的混血儿。甚至很多安卓应用在设计风格上往 iOS 靠拢,以b站为例,其5.11之前的安卓版本中都是没有底部栏菜单的。

当然这里并不是去评价 MD 和 iOS 哪个导航体系更好用,我说下自己的观点:

底部栏菜单的使用非常方便用户在单手握持情况下的操作,但是对于大屏手机来说,单手操作会显得很吃力。如果用户改由双手握持手机,那么从易用性上来说底部栏菜单没有任何优势。

MD 的方案更加注重对界面空间的利用,侧边栏菜单就不说了。以底部栏菜单为例,在安卓机型中用户滑动的时候底部栏菜单会隐藏,方便的用户可以看下知乎,安卓版的底部栏用户滑动的时候会隐藏,而 iOS 则是固定不动的。

侧边栏的优势还体现在可以提供更多的标签,底部栏菜单最多可以放5个。但是侧边栏菜单需要用户点击才能调出来,比较隐蔽,而底部栏和顶部栏相对来说就会显得一目了然,总之各有千秋。

至于为什么 MD 会抛弃底部栏菜单,我个人的理解是设备原因。因为安卓机型底部有三个物理按键,如果采用底部栏菜单作为主导航模式,容易造成用户误点击。

类似的还有 web 类应用,因为浏览器的控件栏也在底部,所以如果采用了底部栏菜单同样会造成用户的误操作。

三、配色

MD 提倡使用高饱和度的对比色来提升产品的视觉表现力,也就是我在上面提到的大色块。同样的一个功能,从底部栏背景色、插画到按钮,我们可以发现 iOS 在色彩的使用上比较克制。

知乎之前的安卓版本使用了大面积的蓝色,后来改成跟 iOS 一样的白色。这样的调整褒贬不一,有的用户反馈这完全照搬了 iOS,要改回 MD。

产品界面设计中对比效果主要由配色、尺寸、间距和阴影来完成。MD 在配色和阴影上做的比较出彩,所以 MD风格的产品在视觉表现上更有冲击力。而 iOS 则显得比较小清新,追求扁平和简洁。所以我们无法去评判这两款设计规范的孰好孰坏,因为其各自的出发点就是不一样的。

当然前面也提到了 MD 和 iOS 的差异不仅仅体现在以上说的这三点,还有一些小细节也非常值得我们思考。我们都知道在 iOS系统中,用户向右滑动的时候会返回上一级页面。因为苹果手机没有物理返回按键,所以这种机制非常受欢迎,但是在一些特定场景的时候就会有问题。例如如果我想复制微博里的「一曲肝肠断,天涯何处觅知音」,选中光标从左向右滑动,这时就会返回上一级页面,特别不方便。所以我只能从右向左进行复制,我后来试了一下微信和 QQ,发现默认复制的是整条动态,这也算是一个折衷的方案。

总结

这篇文章并不是去评判 iOS 和 MD 两种设计风格孰好孰坏,也不是让我们现在就去为自己的产品做出两套设计稿,这个目前来说也不太现实。很多国民类应用都只采用了一套设计稿,大家都这么做,整个大环境就是这样。

但是还是那句话:存在不一定合理。出两套设计稿虽然现在看起来不现实,但是我们也要做好准备,要有危机感。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

我用这个极限推敲法,有效推进视觉设计

资深UI设计者

每当提到设计方法论时,总难免会给人一种比较虚空偏理论,或者说比较难应用到设计实战中的感觉;但是这一次,经过了自己的实践之后,我觉得确实有一个比较靠谱的视觉推进方法可以分享给大家,所以才有了这篇总结。

先直接概括一下这个方法,极限推敲法:遇到难题时,先把问题拆解成一个或者几个维度,选取某个维度,往两个极端进行尝试,随后逐渐中和极端方案,逐步找到自己想要的预期点,明确该维度的方向。

一、使用方法

  • 第一步,提炼一个或者几个关键维度,作为尝试的方向;
  • 第二步,优先尝试两端极限的方案;
  • 第三步,进一步在其间琢磨并尝试方案,直到找到符合预期的方案;
  • 第四步,若一直没有满意的方案,则可以继续以某个方案为基准,精细微调方案进行探索;
  • 第五步,得出最终方向,并最终调整形成终稿。

二、案例

例一:雄狮的logo设计

期望比较简洁的同时,又不能丢了狮子的辨识度,比较纠结的是,这个度该如何把握?

按照极限推敲法来,我们先确立「极简」和「写实」作为关键维度,然后优先尝试两端比较极限的方案;了解清楚两种极限的可能性之后,继续尝试,加减细节,寻找一个符合预期的图形状态;最后的定稿,既保持了鲜明的特征和辨识度,同时也不失简洁。

(推进过程中出方案的顺序在图中用数字标出,「1」即为第一次尝试,以此类推;具体推敲过程不在此赘述。)

例二:网易邮箱大师Tab icon改版设计

在网易邮箱大师5.0改版中,常驻底部的 Tab icon 是单独进行推敲优化的。在之前的版本中,图标的样式相对比较的刻板,偏向纯表意,表现力不强;在5.0视觉改版的策略中,我们是以「优雅」作为一个关键方向进行优化的,所以轴的两端就定为「刻板」和「优雅」,虽然并不是完全对立的两个方向,同时也包含了一些「表意」等其他层面的因素,但是其中有部分感受是存在对立面的,我们就以此作为关键点进行推敲。

可以从图中看出,在不影响表意的前提下,各方案间的图标改动非常微小,在有限的空间内去做一些变化;几经尝试之后,还是选择了更常规更偏表意优先,但是也适当加入曲线因素体现「优雅」的方案作为最终方向。

例三:内容信息流列表设计

期望内容列表的展示能给人以精品的感觉,但又不失去过多的阅读效率。

首先确立以信息量的多少作为关键维度,在形成了初步的样式之后,继续调整在一屏内条目的疏密以及排版来感知信息量的多少;在尝试之后,最终讨论决定,在初期内容源还不够「精」的情况下,还是最右侧方案的信息呈现更为合适,并以此做了最终调整。

三、方法原理

很多时候,极端情况是很难想象或者预判出来的,只有尝试之后,才能更清楚的了解到实际会出来什么效果,达到怎样的预期;在多次推敲之后,就能更好的了解期望的状态到底应该在哪个「位置」,让模糊的概念逐渐变得清晰;该方法最大的好处在于,让尝试变的更有目标,而不是胡乱尝试,让每一次尝试都更有意义。

这个方法也算是视觉标准可量化的一次探索,我称之为「伪量化」,因为最后的决策仍然是依靠感官去衡量判断的;把错综复杂的感官拆解成一些更具体单一的关键维度也是非常关键的一个步骤,是开始「伪量化」的前提。

四、适用场景

在以上所举的例子中,有 logo设计,icon设计和界面设计(所用到的例子都是实战,均为过往项目);其实对象可以是各种各样的设计,只要存在某种程度把握上的纠结,无法预判或者不明确方向的情况,都可以通过这个方法有效的推进并找到当下的最优解。在实战中,假如没有那么多的时间和精力去细化,可以仅选取关键维度,然后在关键维度内尝试方向探索性的方案(粗略的尝试),只要能感受到差异,即是有效的方案;当然如果有充足的时间,那完全可以精细化出方案,这样方案所传达的感受也会更加精准细致。

五、误区

要注意的是,这个方法并不是一种妥协的方式,也不是一种择中方案;我们所要寻找的是在一个维度中感受符合预期的位置,如果适合,也可以是非常激进的方案。

六、注意事项

这个方法只是提供了一种思路,如何更有效的尝试方案来推进视觉产出的思路;其中最主要的环节还是靠自己去摸索出方案的实践部分,去实打实的尝试;在这其中投入精力的多少,也受其他客观因素的影响,例如项目截止时间等等;不过我认为个人的主观能动性才是主导,一定不能懒,要作图,要动起来,仅靠凭空想象方案在脑中「出图」,一来说服不了别人,二来自己也底气不足。只要图形图像语言一直存在,那么我觉得对视觉设计师来说有一句话就是永远的真理:没图说个XX。

设计师如何洞察需求本质,做出一稿过的设计?

资深UI设计者

本文主要从需求类型、表现形式、如何做正确设计来分析,设计师应如何洞察需求本质?如何做正确的设计?

前言:设计师的痛

有这样两种情况在设计师工作中经常会遇到:业务方改来改去,经过几十遍的修改最终选了第一稿;一群非专业的人或领导在设计师身边指来指去,出发点都是「我觉得」主观感受,没一个能提出有点含金量的意见。

  • 客户或业务反复改
  • 众人指点江山

实际工作里我们经常遇到业务方一直在针对几个问题要求设计师在不停修改 :颜色、大小、氛围等。但是却很少看到设计师跟业务方沟通设计结果出现的场景?是为了达到什么目标?导致设计师一直处于不停「改改改」的苦逼状态。

本篇文章内容为:设计师如何洞察需求本质?如何做正确的设计?

一、设计对接的需求来源类型

设计师在工作中接触到的需求一般分为三类:业务需求、用户需求、产品功能需求。

1. 业务需求

业务需求是指产品和公司为了实现商业目标产生的需求。不以结婚为目的的谈恋爱就是耍流氓,不以赚钱为目的的产品也是耍流氓,说来说去最终目的都是为了实现商业价值。

业务需求多数来源老板、公司战略、运营策略等,一般围绕如何提升公司销售额度、如何提升用户量、如何提升利润、如何提升用户转化、如何推广运营等等。

2. 用户需求

用户需求是指通过调研或客服投诉搜集到的用户反馈,一般来源于用户在使用产品过程中的需求。在 kano模型中对用户需求一般分为:基本需求、期望需求、魅力需求、无差异需求、逆向需求。针对这些需求公司都会结合发展战略与优先级去分析,可分为必做、应做、可做、不做。

3. 产品功能需求

基于业务和用户价值进行需求分析的结果,为满足业务和用户提出的一组产品功能列表,功能需求构成了一个完整的产品抽象模型,是团队之间进行产品设计研发的基础。

二、三类需求常见的表现形式

1. 业务需求常见形式

这有个万能的公式:销售额=流量x客单价x转化率

拿某某购物中心举个例子:销售额就是我们听到的某某购物中心在五一期间卖了xxx亿的额度,流量就是五一期间有多少顾客进来了这个购物中心,客单价就是额度除以购买人数,转化率是订单除以访客。在同等访客量的情况下订单越低,转化率越低。

这个公式换到互联网产品中也一样,多少用户进入 app,有多少人产生购买行为,以及每个人购买的单价,这些因素都是决定这个产品最终的销售额。

业务需求是流量增长

在产品发展初期,面临的第一个问题就是访问量,也就是产品的曝光率,用户到达率。我们在生活中会经常看到一些公司请一些自带流量的网红、明星来做宣传为公司带来一些流量。在互联网产品中常见的一些流量增长的策划为拉新奖励、高流量为低流量导流、免费效应等。

拉新奖励:推荐有奖、注册有奖。

导流:高流量为低流量导流。

免费:0元购、秒杀等。

业务需求是活跃度

产品活跃度是指用户每天开启 app 的频次,每天停留的时间。不同属性的产品活跃度的规律也不一定,比如:新闻类、理财类、工具类的产品,针对不同用户、不同属性的产品提升活跃度的方式不一样。

比较常见的提升活跃度的策略是:奖励刺激、有价值的内容吸引、通过成长等级来引起用户参与。

奖励:补贴、答题奖励、分享得积分、返现金、签到、打卡奖励。

内容:推送激活、话题讨论、焦点&热点内容。

荣誉感:排行榜、等级。

业务需求是用户留存

经过运营渠道推广流量提升后,倒入一些新用户,用户经过一段时间体验后是否留存关键在于:用户需求被满足、以及体验流程流畅决定的。当用户发现产品对自己没有价值、体验没有好感就会选择离开。

比较常见的留存策略是:翻倍奖励、产品体验迭代优化、评分、用户成长体系等。

业务需求是品牌感知

用户对同类产品的选择很大程度取决于产品品牌的影响力,业务方在推广中也会有针对品牌提升感知力。

比较常见的有:h5的情感推广、公益活动等。

网易的h5活动在2017年经常刷爆全屏,他们主打的是情感系列,深入人心,不仅提升主品牌影响,也提升了用户对网易哒哒的产品感知。

小结:业务需求设计要点

  • 用户感知:在设计中对设计表现要处理好文案层级关系/视觉氛围吸引度/提升用户注意力。
  • 效果目标:要考虑业务需求的目标是什么,通过什么形式(创意/用户记忆/内容价值)达到拉新、留存、流量的目的。
  • 数据推导:通过数据可以让我们理性分析出用户关注点是什么?
2. 用户需求常见形式

对于用户提出的一些功能的需求,设计师不能盲目听从,需要真正去识别有用的用户、有价值的需求。我们可以通过一些调研、观察,分析用户的特征、习惯、场景和行为,以及期望得到什么效果,挖掘用户的内在动机和原因,只有搞明白了用户需求的本质,才有可能做出用户满意的产品。

KANO模型定义了五类需求,我主要针对下面3类经常遇见的说下,也可以分为3个步骤去做:基本需求 — 期望需求 — 魅力需求。

用户基本需求

指用户认为产品必须要有的属性或者功能,比如:购买流程的完整体验、完整注册流程,这些基本需求一般来源产品初期迭代中的优化完善。

用户期望需求

用户在主流程体验过程中增加一些利于自己快捷、便利的需求,这些功能并不影响主流程体验,比如:购买过程中对收藏、历史价格对比、搜索等,这些期望需求可以转化成一些潜在的竞争优势。

例如:下图用户需求搜集中用户集中在对历史价位走势、提醒等功能的一些期望需求上。

△ 根据用户期望需求调整的设计构思

用户兴奋魅力需求

魅力需求是每一个产品追寻的方向,给用户带来一些超越他们预期的体验。可以理解为在满足用户的基本需求、期望需求的基础上给用户创造附加价值体验,属于创新设计思维范围,可以提升好感及忠诚度。比如:京东推出vr口红试妆体验,天猫推出试装直播等。

小结:对用户需求设计要点

  • 用户集体共性体验:在主流程上识别有价值用户群体,角色化的用户的共同特征,符合用户基本功能流畅、无障碍体验。
  • 体验体验场景维度设计:对用户使用的场景考虑,设计符合用户的习惯的操作。比如:课堂播放,用户使用场景是碎片时间:通勤、吃饭、健身等场景下,用户对产品期望是储存、收听便捷的期望体验。
  • 用户情感维度设计:超越用户预期,带来惊喜、共情。
3. 产品功能需求

注册流程简化

大量注册资料让用户失去耐心,流程简化提升新用户流量。

漏斗数据下的流程转化

在公司xx流程里,我们看到每个页面的流失漏斗,发现用户在购买决策「结果分析」那一步流失特别多,决定砍掉了介绍步骤,把之前5步改成三步决策。

这是一个非常妙的设计:对用户来说,直接触达决策前的结果分析,用户对结果的强感知转化下一步操作,从数据来看这一步转化率提高不少。

△ 公司实际创新项目不做露出具体页面

留存

新用户进入 app 后,一般分为3个时期:振荡期间、选择期、稳定期。震荡期用户流失较多,经过一些市场对比后选择留下的用户会进入一个稳定期。一个用户在产品内留存越久,带来的商业价值越高。

在产品体验流程中根据不同需求,策略也有不同。举一个 ofo 退押金例子:ofo 在不久前遭遇了资金问题,我在退押金这一流程体验中误操作了多次,最主要问题就是信息引导。

△ 主流程中对用户再三挽留

△ 主流程操作中弱化强需求信息

小结:对功能需求设计要点

  • 统一、体验:减少用户页面跳转,能1步完成不要放到3、4步完成。
  • 信息明确:在主流程中给用户传达正确信息关系,减少误操作。
  • 数据验证可用性价值:通过数据观察用户行为,验证需求产生的价值。

四、如何从需求达到设计目标

1. 需求到设计目标的过程

在需求发起到设计目标会经过这样几个过程:罗列与信息搜集➝深入挖掘➝聚焦核心➝创新发散➝实现与落地。

这五步的节奏是:先发散 – 聚拢 – 再发散 – 聚拢。

罗列与信息搜集

  • 需求罗列:根据佐藤可士和整理术,把需求按照类别、优先级进行。
  • 用户调研:定性于定量调研结果得到用户真正的诉求点。
  • 数据结果:通过数据结果能观察用户的行为特征。

深入挖掘

5w:what、when、wher、who、why这五步定位法,是让设计师清楚需求的本质与动机。

聚焦核心:滤 — 炼 — 导

结合用研结果、数据结果、定位结果去除不重要、不必要的信息、提炼有价值的信息、导出核心关键。

创新发散

我们发现前三步是基于一些基础方法论,让设计师具备一些观察用户、分析用户行为、洞悉本质、同理心的训练,目的是让我们把思维聚焦在核心的关键点上,而真正超越预期体验的来源于第4步创新设计思维。

  • 创新设计思维:通过发散寻找针对聚焦点不一样的方案的突破口,很多创新思维来源于多人思维火花的碰撞。
  • 移情设计:在发散后结合用户情感的体验,打造深入人心、愉悦的体验感受。
  • 技术可行性。

实现与落地

  • 草图沟通;
  • 开发—测试;
  • 上线—迭代—优化。

总结:设计的道与术

  • 道:设计创新、价值观、愿景。
  • 术:思维方式、工作流程、洞察力、观察、分析。

对于设计师,解决问题能力远高于单纯作图能力,而了解需求本质是解决问题的前提条件,在没有明确需求的动机和目的,设计方向是迷茫的。洞察、分析是设计师的基本能力,勤于思考分析,做正确有价值的设计。

这7种广泛存在的认知偏差,影响了我们太多的决策

资深UI设计者

如今心理学和行为学已经是UX和产品设计领域当中诸多理论的来源和实践的依据,它们是UI/UX设计师和产品设计师的必修课。

系统的心理学和行为学的知识,对于设计工作其实有着极为深刻的影响。用户体验设计很大程度上是在心理学和行为学的研究基础上逐渐进化和发展起来的,对于想要深耕这一领域的设计而言,心理学和行为学是绕不开的必修课。

心理学和行为学早已并非是单独存在的学科,它们和许多不同领域的知识交汇融合,围绕着人性进行多维度全方位的探讨。如今我们所熟知的许多优秀的产品,也大多从这些领域技汲取营养,不少四两拨千斤借力逆袭的成功案例,也往往借助的是这些深深植根于人性的杠杆。

这两个宏大的命题并非简单几段话说得清楚,但是这当中有许多有意思的现象,非常具有启发性。许多植根于人性本能中的非理性心理和行为,在日常生活中主导着我们作出决策,有的是一些不易觉察的心理效应,有的仅仅是不算太显著的认知偏差,但是在设计和实际产品当中运用,则常常呈现出极为惊艳的效果。

对于这些心理学效应和认知偏差,设计人员需要在自身进行决策时候尽量回避,避之不及确实会面临车毁人亡的局面;在设计过程中,可以巧妙地将这些因素纳入到考虑当中来,因为它们同样可以影响用户,成为撬动产品打开局面的重要的契机。

幸存者偏差

幸存者偏差(Survivorship bias)虽然被称为认知偏差,但是实际上,它更接近于是一种逻辑谬误下产生的一种错误认知。幸存者偏差指的是人往往会注意到某种经过筛选之后所产生的结果,同时忽略了这个筛选的过程,而被忽略的过程往往包含着关键性的信息。

读书无用论是一种最常见的幸存者偏差。读书无用论中最多的说法是XX并没有好好上学但是照样挣大钱了,而XX努力读书反而混得并不好。

这些个案并不涉及到具体数据,从数据角度上来说,也不难解释这种“主观感受”的成因。根据第六次全国人口普查,大专及以上学历的人口仅占总人口的8.7%,高学历者落魄更容易受到媒体的关注,而低学历中的成功者也常常能够吸引普通人的目光,即使低学历人口中涌现的成功者的比例远低于高学历者,由于基数差异,这个数值对比也是相当可观的。正是因为忽略了数据中沉默的大多数,读书无用论这种错误的观点才“得以成立”。

枪击案中的幸存者大多伤的是手和脚,那么是否要加强手脚的保护呢?实际的情况上,在躯干和头部中枪的人,大都没有挺过来,相反更加需要保护是躯干和头部。就像能活着回来的战斗机中弹的通常都是翅膀和机身,因为引擎中弹的大都已经牺牲了。这个案例也许能够帮你更好地理解幸存者偏差。

对于事件发展过程中筛选机制的忽视,容易让人产生错误的结论,从而导向错误的方向,在设计决策过程中,出现这样的过程中,极有可能是致命的。

在需求分析和调研过程中,如果忽视了幸存者偏差,很有可能搜集到的数据,体现的仅仅知识少部分用户的需求和想法,最终将伪需求和小众需求当作主要需求来作为设计易于,则可能让产品从一开始就走向万劫不复。

在搜集产品的用户反馈信息的时候,也很容易遭遇幸存者偏差。绝大多数的用户在正常使用产品的时候,如果没有合理的触发机制,或者产品没有特别突出的特点的情况下,很少会主动“好评”,相反,遭遇问题的用户则更倾向于主动吐槽并分享糟糕的体验和问题,这也很容易造成“这个产品哪哪儿都是问题”的错觉。

基本归因偏差

基本归因偏差这个名词同样源自于心理学,比较学术表述是“对他人行为进行归因的时候,往往会倾向于把别人的行为归因为其内在因素,而低估了情境因素的影响,而对于自身的行为归因的时候,则倾向于把自己的行为归因为外在因素,而忽略自身因素的影响”,基本归因偏差的含义表述可能有点拗口,但是并不难理解。

基本归因偏差是一种重要的人类心理防御机制,是人类进化过程中所产生的一种局限性的思维定势。和复杂多样的环境因素相比,行为者本身的问题是更容易被发现的,所以观察者在观察行为者的时候,诸如社会环境、社会角色、情景压力等外部因素更难以引起注意,将问题更多归因于行为者本身的行为举动和个人内因。比如,当看到某个人生活拮据的时候,会简单归因于他不够勤奋等等。类似的,在面对生活中的诸多不顺的时候,直接归因于“水逆”而很少会仔细思考是否有自身的原因。当事人和观察者对于事件的归因不同,争议和问题往往因此而起。

对于UX设计师而言,基本归因偏差是矛盾和问题的常见的来源,而且这种认知偏差存在于用户也同样存在于设计师本身。无论是面对设计问题,还是做调研,进行测试,涉及到多方面影响因素的时候,基本归因偏差都会对设计方案、设计决策产生影响。

这需要设计师能够清楚地分辨“我的观点”和“我的行为”,能够真正将自己从自己所处的立场、角色、职能上抽离出来,复盘整个局面,首先接纳全部的状况和现实,包括他人的想法、观点,先不去判断对错,而是先接纳所有的状况和全部的元素,明白事物的动态变化过程,不再单一地去判断,任何一个视角必然会存在一个立场,它们是当前事物诸多层面中的一方面而已。

面对复杂多变,但是因果清晰、逐步成长变化的事物,用动态而全面的思维方式来看待,才能真正看清楚事物变化的轨迹,更有针对性地设计,作出合理的决策。

后视偏见

后视偏见(Hindsight Bias)则是另外一种常见的认知偏差,它指的是人在事情发生以后觉得自己在事情发生之前就已经预测到结果了,实际上,他们并不如自己想象的那样能够准确的进行预测。这种行为在观察者眼中常常会被称为“马后炮”。

后视偏见在很多人身上都存在,人的主观性和记忆本身会造成这种偏差。对于设计工作者而言,厚实偏差的存在无疑是会带来负面影响的。后视偏见会让人沉迷于“我早就预料到了”这种感受当中,相应的无法真正从事件中真正汲取到有用的经验,也难于使用公平的眼光来评判客观事物和他人,主观上也很容易选择性忽略许多客观条件和事实。

后视偏见确实会给人带来快感,相应的,会在工作中影响决策的正确性和公平性,从而带来潜在风险。纠正后视偏见的方法并不复杂,在确知事情结果之前,记录下自己的想法,事后做验证,并统计成功与失败的数据。

事件的结果并非是最好的判断因素。在调整好认知之后,对于事件和情况的过程和相关因素进行相对全面的衡量,尽可能少的掺杂主观情绪来进行分析,这样的决策的有效性会更强。

曝光效应

曝光效应(the exposure effect)也被称为多看效应(和多看这款应用并没有关系),接触效应。曝光效应本身的描述也不复杂:人会更加偏好自己熟悉的事物。在社会心理学领域,曝光效应的另外一个称谓是“熟悉定律”,这可能更好理解。

自己总倾向于购买自己熟悉的品牌的产品,谈恋爱的时候总会有绕不开的老同学和老朋友,这些都是曝光效应之下的人类认知偏差。我们常常说的“一旦接受了这个设定还挺带感的”就是对于这一效应的真实侧写。

曝光效应在广告行业、产品营销和社交媒体有着天然的亲和力,对于营销人员、运营人员、品牌设计师和UX设计师而言,这一效应的活学活用是非常有必要的。

不过曝光效应本身并非是无条件的,相反它和产品属性、品牌设计、企业形象以及运营策略有着极为紧密的关联。

曝光效应在许多不同的社会实验当中呈现出一种不稳定性,可能是因为相关的影响因素多而复杂。有的研究表明,即使产品和服务曝光过程中绝大多数的内容是正面的,公司和企业本身的名气高低和品牌形象,同样会影响曝光效应的高低。

曝光效应在发挥的过程中,即使曝光的内容全部是正面的,对于用户的影响也会逐步呈现出一种矛盾性,也就是用户会对产品或者服务产生正面联想的同时,还会产生不利的、负面的感受。

曝光效应发挥效果最好的时段,始终是绝大多数用户对于产品认知不足的阶段,这个时候曝光效应会最大化的对用户产生影响。

值得特别注意的是,一开始就让人觉得厌恶和不适的产品是无法产生正面的曝光效应的,如果一开始存在冲突,曝光效应只会加深误会和冲突。过量的曝光一定会带来厌恶,由于复杂而大量不可控的影响因素,甚至会导致失控式的崩盘。

对于UX设计师和产品的策划和运营者而言,在合适时机加大产品的正面曝光是有效度最高的策略。深入了解曝光效应,才会明白何时放,而何时收。

可得性偏差

可得性偏差(Availability Heuristic)也是一种常见的认知偏差,它是启发式偏差的一种,人们往往会根据自己认知上的易得性来判断事情的可能性,甚至于会根据自己看到和听到的只言片语来做决策,而不是根据统计学数据和系统化的知识来做判断。

可得性偏差同样是一种广泛存在的认知偏差,用户认为自己熟悉的、更容易获得的信息在复杂的系统中发挥着更大的作用,主观上忽略其他的部分。可得性偏差和熟悉定律(也就是曝光效应)有些许共通的地方。

可得性偏差在金融领域有着巨大的影响,许多准备上市的企业会在上市前夕吸引大量的新闻报道,让投资者在信息的狂轰滥炸之下不知不觉地去关心,无意识地去了解,并最终购买这支股票拉高股价。这种策略就是借助投资者的可得性偏差来实现的。下面是谷歌搜索关键词阿里巴巴的频率和阿里巴巴的股价变化情况,两者呈现出一种明显的关联性。

可得性偏差的广泛存在,使得设计师甚至可以在自己的产品中借助有有意识的设计,来引导用户的行为。作为设计师本身而言,可得性偏差同样是会影响到设计决策,因为可得性偏差同样会影响产品设计中的设计决策的走向。消除可得性偏差的方法也不难,需要设计者不要被已知的信息和容易想起来的信息所左右,而是尽量深入地从多个角度来考虑问题,跳出固有的思维定势,多角度看待问题,作出合理的决策。

锚定效应

锚定效应也被称为沉锚效应,它一样是一个听起来高大上但是含义并不复杂的概念,它指的是人们对某人某事作出判断的时候,容易受到第一印象或者第一信息的影响和支配。这种现象就像船只被锚固定在特定位置而无法移动,因此而得名。

人们在做判断的时候,往往会受到第一印象和首个接收到的信息的影响。就像鸟类会将第一个看到的生物视之为自己的母亲一样,人们往往会借助第一印象来作为后续判断一个事物的参考标准,甚至在人际交往中都是金科玉律。即使是没有刻意地去参考第一信息,人们也会在潜意识当中,重视第一次获得的数据。

锚定效应的另外一个层面是对比,当拥有了锚定的参考之后,用户在后续会以此为基准进行对比。对比并不存在绝对意义上的好坏,但是在不同的基准之下,或者说参考的基点不同的情况下,发挥的作用其实是截然不同的。

举个简单的例子,粥铺的服务员问客人“加一个鸡蛋还是加两个鸡蛋”比“要不要加鸡蛋”所产生的销售额高出不少,因为前者会人的心理基点是“要加蛋”,而后一种问法,则让客人先思考“要不加蛋”,前者的转化率自然更高。

正是因为先入为主这种心理现象大量影响着用户的决策,使得市场竞争中,许多企业和产品都不得不去力图争个第一,赢得主导权。

iPhone X的刘海屏对于手机市场有多大影响想必大家有目共睹。而后续的蓝绿两厂的升降式摄像头设计和“真·全面屏”也因为其突出性和强大的“第一印象”的构建,而赢得了无数赞誉。

但是静下心来想想,开机解锁还要等待摄像头升起,好像还是一个蛮奇怪的事情。可是最早的“真·全面屏”确实够惊艳。

免费认知偏差

优惠促销是各种产品销售中最常用到的一种策略,而在花样迭出的促销手段当中,有为数不多的集中手段,呈现出令人惊艳的效果。

免费的赠品和满额减免就是这其中的典型。购买产品A,赠送一款B,这种赠品策略的玩法可以说是效果极佳,早年间阿芙精油声名鹊起的阶段,其中最令用户欲罢不能的,就是他们的“赠品”。用户每一次购买精油产品的时候,阿芙的团队会随之一起发出精油的入门口袋书以及多达五六种精心挑选的精油试用装,这种体贴且让人觉得“狠赚一笔”的心理感受,使得许多新用户迅速转为稳定客户。

置于满多少减多少,则同样是一种成功的促销策略。各种电商平台和购物节都会采用花样繁多的满减服务,相应的,用户在这种服务之下,总忍不住“凑单”。平心而论,真实的情况是,用户购买了自己真正需要的商品,以及一系列为了凑单而同时购买的非必须商品,对于商家和平台而言,这种策略很好的拉高了销量,也减少了许多商品的库存,而用户也感觉自己赚到了,皆大欢喜。

至于“包邮”,我就不赘述了。这个效果同样非常突出。

相比之下,打折促销所产生的效果,好像就没有那么显著和“暴力”了。归根结底,问题是出在“免费”的认知偏差之上。对于用户而言,无论是赠品、满减还是包邮,本质上都会让用户迅速地在大脑中形成一种“免费获得某种东西”的感觉,赠品对应的是免费的物品,满减对应的是免费的现金回馈,包邮则是免费的邮寄服务。

心理学家和行为学家通过大量的实验验证了免费确实和折扣等其他的促销策略有着本质的差别,它所带来的非理性行为要明显太多,免费的吸引力无与伦比,说是认知偏差毫不为过。

你一定特别想点击上面的图片免费下载素材。不好意思它只是个图片。

人类本能地惧怕损失,选择免费的赠品不会有损失,而相比之下选额其他则会让人在潜意识中产生风险感,可能会蒙受损失。这样一来,免费的赠品在人心中的价值就开始高于实际价值,随之而来的就是非理性消费。

在设计的过程中,想要让免费的认知偏差发挥效果,让人快速地感知到这种“免费获得”的感受,应当是明显的,否则很难快速地触发非理性的反馈。

结语

人类先天的生物性无处不在,我们自诩的理智在现实生活中发挥的作用并没有我们想象中那么多,无处不在的各种认知偏差主导了太多的

2018端午节,就是想送你份口味“粽”——H5分享

资深UI设计者

端午节到了,阿里巴巴TXD的小伙伴们准备送你只'口味粽',祝大家假期玩的开开心心,点击图片识别二维码便可生成你专属的‘口味粽’。


01

项目背景


Image title

阿里对待中秋节会更加的浓重,每年中秋节所有的员工都会收到精美的月饼和祝福。相比之下我们的端午节就过得比较平淡了,于是咱们团队的小伙伴们准备做一个H5,用我们的自己的方式送大家以及自己一枚口味粽。


整个项目的初衷有两个,一个是代表TXD送给大家端午节的祝福,另一个就是用团队协作的方式在极短的时间里面设计一款H5。


02

项目思路


对于我们来说最大的挑战是时间。距离端午假期仅剩一周不到的时间,而大家都有自己的业务工作,难道放弃?既然已经立下了flag,怎么也得完成。我们制定了项目的节点,并且通过多枚成员分工协作去完成它。


Image title

Image title

大部分项目是需要协作完成的,一旦协作不好,项目进度则事倍功半。所以最考验大家的是怎么进行更的协作。通过有效的决策,我们让协作变得顺利。


Image title





Image title


我们通过小组会议确定玩法后,分配人员进行文案和交互设计。由主设计师定下设计风格,其他设计根据风格绘制UI以及其他场景素材。所有素材实时同步在项目群里,确保保持统一的风格。


03

项目介绍


首先我们的粽子不是一般的粽子≧ω≦,我们粽子的馅儿都采用各种珍稀的食材。

Image title


这些“珍稀”食材通过我们神秘的构造机做成不同的神奇粽子!

Image title

Image title

Image title

Image title



更多不一样的粽子,通过我们的机器定制属于自己的神奇粽子。


本次的项目属于我们的团队成员通过空闲时间在短时间里面完成的。只是想送给端午节的童鞋们一个小小的祝福。

如何提升界面品质感?

资深UI设计者

一、当前背景

今天聊些设计基础部分。

设计工作中,我们总会接到不同场景、不同目标用户的业务需求,需要不同风格的设计方案支持,但无论是什么风格的设计,用户都会有一个共同诉求——「品质感」。

二、什么是品质感?

所谓品质感其实就是产品给人的一种严谨、专心对待的态度。同样一本书的封面,粗糙纸的封面和细心打磨的小羊皮封面就是不同的概念。

例如无印良品和爱马仕,两者都会传达给用户一种「品质感」,虽设计方向不同,但他们有一个共同的特性——对细节的深度打磨。其实品质感就是来源于产品对细节的深度考究与打磨。

一款有品质感的设计,随之带来的是用户使用中的舒适度、好感度、信赖感。

三、界面中的品质感

界面设计也是一样,也会带给用户一种品质感,其同样是源于设计师对界面的每处细节的深度考究。

界面的品质感主要来源于界面四个维度、界面中的结构、界面中的图形、界面中的颜色和界面中的动态,今天说如何通过结构提升界面品质感。

四、界面中的结构

界面的结构在用户体验中起着重要作用,其相当于界面设计中的「骨」,界面结构中的细节更是会直接影响到整体设计的品质感。那么具体结构中的细节体现在哪里?

1. 关系

信息关系包含界面中的组合、层级、分割等。

组合

「物以类聚」,界面内需明确传达各元素间的关系。

辅助信息服务于主体信息:辅助信息为主体内容的延续说明或补充操作,作用为服务于主体内容。同一组合内,信息间需有明确的关系与合理的顺序,且辅助信息不能抢镜。例如朋友圈,清晰传达关系的同时,以内容为主的阅读方式不会被头像内容干扰。

关系越紧密的内容距离应越近:形式不变的基础上,元素之间的距离越近,越易被视为同一组合。距离相同时,横向排列的内容接近度相对更高。

层级

界面的层级关系主要体现在主次、优先级、层数。

主次分明、避免层级混乱:清晰的层级结构,能让用户更快的获取重要内容,同一组合下其信息一定有主要展示和次要展示。可以通过位置、面积、颜色三个维度建立主次层级的对比度。

  • 位置。在中国,用户的阅读习惯为从左上至右下,所以用户对左上区域的观察最优,依次为右上,左下,而右下最差。因此,左上部和上中部被称为「最佳视域」。
  • 面积。信息内容在界面内的占比面积越大,信息越是突出。
  • 颜色。白色背景下,明度越低/饱和度越高,信息越是突出。

同一组合下,有且仅能有一个最重要的内容:当所有的内容都重要,也就等于所有内容都不重要,信息的优先级不取决于主要信息是否够大,而是主要信息和次要信息的对比度。

同一页面,信息层级不宜过多:过多的信息层级会让页面变得复杂,增加用户的理解成本。冗余的信息展示会让界面变的凌乱琐碎,一定程度上干扰用户使用体验。一般情况下界面应控制在3层信息以内。

主次分明、优先级明确、层级适当会让界面的信息传达更清晰明确,进而增加用户的使用中的舒适度。

分割

分割是用于区分不同信息的方法,大概可以分为距离分割、线性分割、面性分割(背景色分割)、颜色分割。

距离分割:增大两模块的距离达到内容分割内容作用,元素间的距离越远,越不易被视为同一组合。其好处是可以省去分割元素,减少视觉层级,让界面更干净、明快。

线性分割:线性分割是目前界面中最常用的分割方式,其优势是线自身「较轻」,不易干扰用户。值得注意的是线本身不重要,不宜过度强调,应点到为止,所以线的颜色不宜过重。

面性分割/背景色分割:当处理多层级、信息复杂的场景,在单个模块里已经用了线性分割的情况下。可能需要更强一点的分割方式来表明模块与模块间的关系,这时我们可能需要面性分割方式。这种方式像是灰色的背景上,罗列着多张卡片,能更明确的表达两组内容的分割感,但其缺点是会较明显的增多界面层级。

颜色分割:当信息的表现形式重复性较高,容易被看混的情况下,颜色分割是更为合适的选择。

能起到分割作用的前提下,分割方式越轻,越不会干扰阅读、界面越干净。

以上可以总结为

  • 界面中的组合能让信息关系更缜密。
  • 层级能让用户更快的获取重要内容。
  • 分割能让用户更清晰的区分不同模块间关系。
2. 字体

文字字体是界面结构中重要组成部分,文字也是多数场景下信息传达最为准确的方法。合理的字体能够增加用户的阅读体验,提升用户在产品使用中的舒适度。合理的字体包含字体的可读性、对比度、间距。

可读性:可读性是字体在界面中需考虑的基础因素,也是首要因素。字体的信息传达需精准、明确。字形选择包括其场景适应和字形的适度性。

字形的场景适应:由于不同的字形会带给用户不同的感觉。由于场景需要,我们一定情况下会选择自定义字体。当我们选择不同的字体时,需要考虑字体在产品内不同模块下是否易于阅读。

字形的适度性:字体本身不宜抢镜。随意的、抢眼的字体一定场景下上能够带来足够的氛围感,但是长期使用会出现「视觉疲劳」,其原因是字体本身的设计抢走了用户正常在该场景下阅读或使用的内容和信息。

对比度

字号:用于区分不同层级的信息内容,为保证信息的快速传达,不同层级的字体需有一定的优先级顺序。

界面内的主文案/一级文案应精简明确。假设用户只会在这个界面停留3、4秒,能够吸引用户继续浏览界面的就是一级信息。当一级信息文案字数过多,会增加用户刚进入页面时的阅读成本,进而降低阅读体验。

另外,移动端小于24px的字号应慎重使用,虽然小的字号会让版式更加的精致,但当同一场景下,小于24px的文案字数偏多时,会影响用户的正常阅读。但可用于弱化的文字链、标签等字数少的场景。

加粗:字号相同,字体加粗也是区分不同层级信息的一种方法,当两信息区分度不大、界面层级过多需要减少层级的场景下,可以选择加粗部分内容建立轻度对比。

字色:我们画画的时候,时常会听到老师说「要注意画面的黑白灰」。在界面设计中,也是一样,我们需注意各层级字体间的黑白灰关系。明确的画面黑白灰关系会让界面变得更干净清晰。另外,当不同明度切换时应保持色相/饱和度不变。

间距:在界面设计中,字间距和行间距会直接影响用户阅读效率。过于紧密的间距会让字体间失去「透气性」,根据我们正常的阅读顺序来讲,字间距要小于行间距以便于每一行更易被视为一组,进而给用户带来更好的阅读体验。我们可根据文案长短,字号大小制定更适合阅读的间距。

字体的可读性是字体的基础,明确的字体对比度能够让信息层级更加清晰干净,而合理的字间距能够无形的提升用户的阅读体验。

3. 信息对齐

对齐是界面结构中的一部分,合理的对齐方式能够使界面内的信息变得更规整,内容传达更明确。让元素间的关系更具节奏感。

联系性

同一组合内的不同元素间需有明确的对齐关系,其关系能够清晰表达不同元素间的亲密性。

元素间的居左对齐:当文案的字数偏多一些的场景下,居左对齐更符合用户的阅读习惯。

元素间的居中对齐:当内容信息较少、或由于对齐元素形状等因素,居中对齐可能会带来意外的收获与效果。

元素间的居右对齐:界面内一般不会用居右对齐的方式来建立两元素间的关系,但是界面内会存在和屏幕建立右对齐关系的元素,与屏幕右对齐的元素一般为主体的解释说明以及辅助操作等。一般情境下,当用户阅读完主要内容信息后才会对操作类的功能有需求,如查看购买、关注、查看更多、进入下一页面等。

统一性

另外,不同组件间也需要合理的建立对齐关系,同时为保持界面的简洁性,同一界面内建立的对齐模式不要过多。

总结

界面的结构是提升界面品质感的关键,而合理的信息关系、字体、对齐方式能够让界面的结构更加完整,精致。也希望每个设计师的作品都更加的美而精致。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档