首页

谷歌的 10 个“Material Design”设计要点(下)

周周

编辑导读:如今,谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”,用于衬托一些喜庆的、重要的高光时刻,它们常被用来激起用户的情感,或烘托一种喜悦的气氛,从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds:庆祝用户进行了某项操作;欢迎用户使用新的应用程序或体验;确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到,Hero sounds出现的次数不应该频繁,否则无法突出其重要性。通过在同样的环节提供同样的声音,久而久之用户会将这种提示音与成就感挂钩,从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音,或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点,我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音,还是MacBook的废纸篓在清空时发出的揉纸的声音,都在某种程度上影响着我们的情绪,也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用,也可以单独使用。举个例子,在手机黑屏的时候,触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时,触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外,触觉设计(如震动)也是一种刺激感觉的好方法,可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后,我们将会对产品的某些功能有更加深入的了解。

举个例子,如果某个用户通过APP进行付款,但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动,对用户进行错误反馈。当用户熟悉了这种震动模式之后,下一次再感受到这种震动,就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块,而过度专注于画面。但这两个板块却也扮演着非常重要的效果,可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感,在互动中为用户增加个性化体验,也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素,这是一款运动追踪APP,是为那些追踪自己生活习惯的用户设计的。在设计这款产品时,我希望可以为用户创造出一种满足感,鼓励他们培养好习惯。在这款APP中,我大量使用切换功能,通过不同的手势,界面或进程可以平滑过渡,使用起来非常便捷。当一个好习惯完成时,还会出现彩屑动画飞舞的,加强用户的满意度。

简言之,动图可以应用于不同的场景,通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系,实现快速切换,迅速解决特定的任务。动图可以让用户专注于眼下最重要的事,不被其他因素所干扰。——《谷歌手势设计指南》

在2020年,你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基(Taras Skytski)在《用户体验设计中动画使用的终极指南》中指出的那样:“众多研究发现,界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别,而超过1秒的动画则会造成一种延迟感,让用户感到不舒服。”

通过动图及产生的动画效果(如切换)可以改善用户体验,同时保证可以迅速找到需要的版面,而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间,又不能改善体验,那么这种环节就没有必要存在。

8. 通过图像进行交流,并区分和突出产品特性

图片来自Bribble|制图Elena Petkovska

我们或多或少都有这样的体验:打开一个界面,里面充斥着太多文字和太少的图像。在用户体验设计中,展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品,而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点,不管是用户自己上传的图片,专业摄影师的图片,还是插画风格的图片,它们都应该能直观展示产品外观,反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要,好的图片可以让用户界面更加生动,使用户体验更加完善。恰当的图片还能展示品牌风格,成为无声的“故事讲述者”。

我们应当有目的地使用图像,作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息,如产品外形、风格,APP的用途,状态等。媒体界有这么一句话:一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度,让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度(PPI)是用来衡量每物理英寸的像素数。另一个常用的单位是DP(Density-independent pixels,有时候简称为DIP)。像素密度=屏幕宽度或高度(以像素为单位)/屏幕宽度或高度(以英寸为单位)。

在设计界面时,我们不应该只关注像素,还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放,以适应不同屏幕的尺寸。

举个例子,我们现在有一个按钮素材资源,大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示;在一个320ppi的屏幕上它就会扩大成400 x 100 px,相当于原始素材的两倍大。

通过以上例子我们可以了解,在像素密度不同的屏幕上,素材呈现的状态是不一样的。在实际应用中,素材可以会被放大三倍甚至四倍,如果素材不够清晰,就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎,尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸?举个例子,iPhone XS Max的屏幕是414 x 896 pt,注意这里的尺寸是物理尺寸pt,而非像素。如果以像素为单位计算,那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时,我会首先考虑用414 x 896 pt的素材,然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用,你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用,但是在能联网的时候,最好还是主动提示用户,推荐他们连接网络。

如果有可能的话,要提前告知用户下载相关信息,以便脱机访问。最常见的例子就是Spotify等音乐应用程序,它允许用户下载歌曲,以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容,你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子(在谷歌浏览器连网的过程中,离线画面会出现一只霸王龙,按空格键或者向上的箭头就能控制霸王龙——译者注)。这个小游戏填补了用户等待连线的时间,将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外,我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导,在这一领域进行更深入地探索。


文章来源:人人都是产品经理           作者:Danny Sapio           译者:Michiko


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

用户行为分析和以用户为中心的设计

鹤鹤

用户行为分析,认识用户满足用户最直接要求为设计中心


用户行为分析

用户行为是指用户在使用产品时的行为,针对网站而言,就是用户在进入网站后所有的操作。网站用户行为分析,就是在获得网站王文量基本数据的情况下,对有关数据进行统计、分析,从中发现用户访问网站的规律,并将这些规律与产品目标及策略相结合,从中发现目前网站存在的问题,为进一步改善网站,满足用户需求,提升用户体验提供依据。


常见的用户分析内容包含以下几个方面内容:

(1)用户在网站的停留时间、跳出率、回访率、新用户、回访次数、回访相隔天数;

(2)注册用户和非注册用户,分析二者之间的浏览习惯;

(3)用户所使用的搜索引擎、关键词、关联关键词和站内关键词;

(4)用户选择什么样的入口形式(广告或者网站入口链接)更有效;

(5)用户访问网站流程,用来分析页面结构和网页覆盖数据;

(6)用户在页面上的网页热点图分部数据和网页覆盖图数据;

(7)用户在不同时间段的访问量情况等;

(8)用户对于网站的设计及字体配色的喜好程度等。


通过研究发现,80%的用户仅仅使用了软件20%的功能,而那些没用的功能不仅浪费开发时间,也使软件更加难以使用。一个成功的软件应该是简练精干的,可以单独职能化的化解决的单个问题,要以满足用户最直接要求为 i设计中心。


一、了解用户需要什么

很多网站往往为了满足不同用户的需求而增加功能,增加的功能必然需要再界面中用视觉呈现出来,这就会使网页内容越来越多,很多的功能掺杂在一起,如果不经过过滤,必然会违背原来阅读的初衷,所以每一个功能的增加都要慎重。


用户对于互联网功能需求也和对软件的功能要求一样。既喜欢简单的,也喜欢复杂的。而且用户的体验需求也会随时随地的发生变化。这里的复杂不是指很难用、流程超级复杂、容易出错的用户体验,而是指丰富的功能。


首先如何让用户体验更简单呢?当然将复杂的功能去除是最好的,如果实在无法去除某个复杂的功能,那就应该将其隐藏。因为大多数情况下,不常用的功能要比经常使用的功能占据更多的空间。


真正好的用户体验其实是给用户所需的任何功能,为用户设计一款“复杂”的产品,并将这款产品从表现上简化,让基础功能操作简化,给扩展功能保留使用入口即可。这个设计思路最具代表性的例子就是Microsoft Office和Adobe

系列产品。

              


用户的需求并不是一层不变的,短期内用户会因为某种强烈的需求要一个产品。随着市场和行业的不断发展,用户对于一个产品的评价也会随之发生变化。例如肯德基刚进入中国市场,被人们认为是一种的象征,小朋友以吃一次肯德基为荣。随着经济条件的发展,人们对于肯德基的体验就完全不一样了,热量过高,不利于健康。这是一个很典型的对一个产品评价的变迁的过程。


用户的期望值会因为因素而发生变化,有的来自外部的环境,有的来自产品自身,有的来自用户成长。这些影响期望值的因素都会相辅相成的影响。有的时候不是我们的体验或者产品变了,而是用户发生了变化,所以用户体验的设计,除了要考虑产品本身以外,还要考虑用户所需要的。


二、遵循用户的习惯

用户通常会根据个人喜好做事,这就是习惯。习惯没有好坏之分,关键要看根本的是什么。从用户体验的角度来说,任何产品都可以分两种:遵循现有用户习惯的产品和颠覆用户习惯的产品。


在设计网站时可以在技术上创新,在业务模式上改变,也要在以下几点上遵循用户的习惯。


1、用户的生活背景及文化背景

生活和文化背景是必须要遵循的习惯。想去颠覆或是磨灭一个群体甚至是民族的习惯,基本上会付出惨重的代价。例如使用红色表现喜庆,白色表现悲伤,是中华民族几千年的一种传统习惯。如果想去改变这个习惯,使用其他颜色肯定起不到好效果。比如:可口可乐官网就是用红色做的主色调,而红色也与“可口可乐”品牌主色调相统一,点缀少量黄色,非常符合中国的传统文化,也更容易使中国人接受。


2、用户的生理状况与需求状况

在设计网站页面时,还要考虑到网站用户群体的基础属性,例如年龄层、身体承受力等。可以将页面中的文字和图片做放大处理,使老年人可以清楚的看到内容。比如一些老年网站,会采用大号字体,强对比色便于阅读,而且在设计的时候也不会使用过多的色彩,虽然整体视觉可能显得简陋不够丰富,但是充分的考虑了老年人人群的特点。


2、以“自我为中心”的心理

人在评定事情好坏的时候,通常喜欢以自我为中心,所以用户体验设计时,必须满足用户这种需求。使每个用户可以体会到以“自我为中心”的优越感,这样用户就会成为最忠实的客户。例如很多人沉迷于网游就是因为在现实生活中会受到各种各样的限制,而无法实现真正的以自我为中心,而在网游的世界里却可以完全实现。


二、颠覆用户的习惯


在设计网站时,设计师通常会根据网站内容把网站划分为不同的区块,然后在分别进行美化。设计师在思维定势中 自我感觉良好,一旦突破了思维定势就会有新的收获。作为用户体验的设计师来说,有下面两个方面可以颠覆。


1、改变一些有独特性的页面设计

 在设计网站时,有很多页面都具有独特性,例如注册页、登录页和搜索页。这些页面用户只会访问一次或者几次,而且这些网页本身也是在网站发展的同时逐步完善的。所以,在用户体验的设计中,这些习惯就可以颠覆的。设计师可以根据个人的喜好对这些页面进行设计、优化和修改,而不会影响用户的习惯。


2、发展中的知识和技术

在网站设计中需要结合当前的潮流趋势和的技术来表现网站,这样才能给用户带来全新的体验。页面中流畅恶化便捷的交互应用,可以给用户带来良好的体验。

尊重用户秀感可以快速让用户接受网站,同时也会由于尊重了用户的习惯而减少产品对用户的刺激,会使得用户很难成为网站的忠实用户。另一方面,如果不尊重用户习惯,用户可能很难马上接受。所以在用户体验设计时,要根据网站具体情况自我权衡。

最好的办法就是在网站核心用户体验不变的基础上,增加新功能、设计风格逐步变化、进行网站整体融合。

转自:站酷-忻芸



花了很多时间做设计分析,但对画稿子没什么帮助?

鹤鹤

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。

用户体验升级指南—规避用户“无意识错误”的防错法则

鹤鹤

用户在使用软件时不可避免的会进行误操作;
应如何通过设计,使得犯错变得困难,从而提升产品易用性。


大纲要点:

1.行为预判     

2.多重保险 

3.限制行为      

4.唯一性原则

5.默认项复用      

6.特征明显

7.感官反馈



1.行为预判,走在用户前面

通过固定场景,判断用户接下来的操作,或对某些操作做是否执行的处理。

①.输入银行卡号,软件在你输入完成时自动识别发卡行,避免手动选择错银行导致转款失败。 


②支付宝转账,在聊天窗口输入纯数字,系统会自动弹出“给对方转账xx元”的悬浮条提示,点击悬浮条即可进行转账操作。对用户误把转账发送成信息的行为进行预判,提升产品易用性。 



2.多重保险 ,二次确认执行。

生活中很容易产生对文件进行误删或提交的误操作,多重保险是对不可逆的操作进行双重确认后再实施执行。

如ios信息删除页面,删除信息需进行以下三个操作:

①左滑调出删除按钮(把“隐性”特征转化为“显性”特征)

②点击删除,“确认删除”弹窗弹出

③确认删除,多重”确认“降低误操作 



3.限制行为,使错误无法发生。


在固定字符的表单中。对其输入的内容自动格式化,

如支付宝注册页面,只提供数字键盘且只能输入11位数,从而限制用户行为。

直接从源头杜绝误触其他字符或多输入的误操作。

当你开始输入时,系统会自动将手机号隔成XXX XXXX XXXX的格式,方便用户以最快的速度核对已输入的手机号,毕竟相对于一长串的数字,被分成小块的数字组合更容易被记住和看懂。



4.唯一性原则,一个页面干一件事

按照顺序分步进行,避免用户在一个页面完成多个任务。

如接收验证码时,保持页面的功能性是唯一的,手机号注册页只能填写手机号,验证码页面只能填写验证码。利用页面的唯一性减少误操作率。



5.默认项复用,优先预知用户所想

同一件事做两次出错的几率肯定比做一次要大得多,对用户已录入过的信息储存,以便如需再次录入时的直接填充。

如寄快递购物时的填写地址,定机酒时输入人物信息,直接复用历史信息,省时又不会出错。 



6.特征明显,对比突出可适当夸大

视觉效果上,夸大功能性特征,能够有效地使用户准确获知该区域可实现的功能,向用户呈现清晰的行为结果。


①如删除弹窗,按钮中文字的描述应决定用户接下来的行为。

“确认删除”是用户行为,”确定“则是对该弹窗内容的时间判断,用户是不会对弹窗内容进行细看的,所以在按钮文字上就应明确用户,准确地告知按按钮所对应的行为。

②如Iphone的关机界面,app 内各个入口删除等可操作按钮



7.感官反馈,视觉外的强化辅助

解锁界面不同状态下的震感反馈,提示警告类的声音反馈,警示错误的发生。







 转自:站酷-假装不是设计师




谷歌的 10 个“Material Design”设计要点(上)

周周

编辑导读:如今,谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

1. 通过图标和动画传达意思

图片来自Material

在没有其他方法的情况下,图标可以成为理想的指示工具。——《谷歌材料设计指南》

在《Design of Everyday Things》一书中,有“以人为本的设计之父”之称的唐·诺曼(Don Norman)阐述了他对图标的理解:图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中,我们很少会出现“左滑-删除”这样的文字指示,而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。

在用户和产品交互之前,插入动画效果。——《谷歌材料设计指南》

如果我们希望一款数字产品有着极简主义外观,那么我们可以借助动画来达到这一点。在上图的例子中,最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后,也就是人机交互的动作产生之后,才会出现这一垃圾桶,同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。

2. 有动画效果的图标

图片来自Medium|制图Eddy Gann

动画可以展示图标所代表的执行动作,从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标,可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》

在两个动作之间增加一个过渡的动画,这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后,该图标变成了暂停按钮;点下暂停按钮,该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。

这只是一个简单的案例。现在想象一段更加复杂的经验:比如将某个产品添加到购物车中,购物车图标会出现装进货物的动画效果;或者想象某一功能无法使用时图标的弹出效果。

带动画效果的图标本身并不复杂,我们可以在Adobe XD中完成:通过给图标添加预设效果,或者加入淡入、淡出的效果即可。

动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小,却是影响用户体验非常重要的一环,我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》

请记住,如果界面上所有的元素和图标都在动,那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。

3. 调色板的生成和使用

调色板生成工具|图片来自Medium

调色板生成工具(Material’s Palette Generator)可以调出任何你需要的颜色,色相,亮度,色度等都可以通过一系列算法调节出来,通过算法调出的色彩实用又美观。——《谷歌材料设计指南》

如果我们无法使用谷歌的调色板生成工具,手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态(如蓝色从暗到明、从深到浅的形态),你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具,你也应该仔细检查并矫正自己的调色工具。

4. 颜色

  • 在考虑如何使用颜色或颜色相关的问题时,指南中还提供了给界面选色相关的技巧和工具。——《谷歌材料设计指南》
  • 选择令人难以忘记的色彩,以增强产品的品牌风格。——《谷歌色彩设计指南》

颜色对于数字产品的重要性,就像是盐和胡椒粉对吐司的重要性一样——添加太多了,就盖过了吐司自身的风味;太少了,味道就会变得寡淡。在选择配色以求增加品牌视觉效果时,一定要仔细考虑清楚给哪里添加什么颜色。

通过有节制地在APP里添加颜色,你还可以突出相应的内容,如文本、图片、按钮等。你可能已经注意到了,Instagram和Twitter上面布满了色彩鲜艳的图片和图标,与之相对应,它的用户界面非常简洁,不会喧宾夺主。

色彩也可以是一种交互元素,要考虑它们在什么地方交互,希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》

当一个元素的色彩与周围环境形成对比时,用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”,这个概念是说增加色彩的饱和度,使用更加大胆、更吸引人的色彩,制造视觉冲击。

另外,我们可以将重要的信息加粗显示,让它在第一时间进入用户的眼睛。简单来说,如果一种信息比另一种信息更重要,那么前者就要在色彩和篇幅上胜过后者,好让用户直观地进行区分。

5. 文字类型生成工具

文字类型生成工具|图片来自Medium

Google Fonts是谷歌研发的一款文字类型生成工具,可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》

字体设计是一门艺术,它不仅关乎选择某一种具体的字体,更设计如何使用、粗细调节、比例调节等,目的是增加界面的可读性,从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具,可以节省时间,迅速生成段落、标题、正文、按钮等。


文章来源:人人都是产品经理           作者:Danny Sapio.    译者:Michiko


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

辞典精译 | 在UX中正确使用动画的终极指南

涛涛

如今,很难用界面动画给人留下深刻的印象甚至惊喜。它显示了屏幕之间的交互,解释了如何使用该应用程序,或者只是引起用户的注意力。在浏览有关动画的文章时,我发现几乎所有的文章都只是描述了关于动画的特定的用例或一般事实,并没有遇到任何关于界面动画通用规则的文章。在本文中我收集了界面动画的主要原则和规则,以便给想要设计动画界面的设计人员提供一些帮助。


01 动画的持续时间和速度

当元素改变它们的状态或位置时,动画的持续时间应足够慢,以使用户可以注意到变化,但同时也要足够快,以免引起等待。

在动画中使用适当的持续时间,不要太快,更不要让用户过长等待


大量研究发现,界面动画的最佳速度在200-500毫秒之间。这些数据是基于人类大脑的特殊性得出的。任何小于100毫秒的动画都是瞬时的,根本不会被识别。而超过1秒的动画时长会传达延迟感,因此对用户来说很无聊。

最好在界面中保留动画的持续时间


在移动设备上,《材料设计指南》还建议将动画的持续时间限制在200-300毫秒之间。至于Web端,持续时间应延长30%,大约为400-450毫秒。原因在于:屏幕尺寸越大,物体在改变位置时可以克服的路径更长。因此,在可穿戴设备上,持续时间应缩短30%,大约为150-200ms,因为在较小的屏幕上,移动距离更短。

移动设备的大小会影响动画的持续时间


Web动画的处理方式有所不同,由于我们已经习惯了在浏览器中即时打开网页,所以我们希望也能在不同状态之间快速转换。因此,Web转换的持续时间应比移动设备短约2倍,150-200毫秒之间。在其他情况下,用户将不可避免地认为计算机死机或网络连接出现问题。


但是,如果你要在网站上创建装饰性动画或试图吸引用户对某些元素的关注,则无需考虑这些规则。在这些情况下,动画可以更长一些。

大屏幕电脑=慢动画?决不是!


需要记住的是,无论平台如何,动画的持续时间不仅取决于移动距离,还取决于对象的大小。更小的元素或带有小变化的的动画应该移动得更快。因此,大而复杂元素的动画在持续时间稍长的时候看起来更好。


在相同大小的移动物体中,停下来的是经过最短距离的物体。与大物体相比,小物体移动得更慢,因为它们的偏移量更大。

动画的持续时间取决于对象的大小和移动距离


当物体碰撞时,根据物理定律,碰撞的能量必须均匀分布在物体之间。因此,最好排除反弹效应,只在特殊情况下使用它才有意义。

避免使用弹跳效果,因为它会分散注意力


物体的运动应该是清晰和锐利的,所以不要使用运动模糊。即使在现代移动设备上也很难再现这种效果,并且根本不用于界面动画中。

不要在动画中使用模糊效果


列表项(新闻卡片、电子邮件列表等)在其出现之间应该有一个很短的延迟时间,每次出现的新元素应该持续20-25毫秒。元素出现较慢的话可能会惹恼用户。

列表项的动画应持续在20–25毫秒


02 缓和

缓和有助于使物体的运动更加自然,这是动画的基本原则之一。这一点在《迪士尼动画原则》(The Illusion of Life: Disney Animation)一书中得到了充分的描述,这本书是由两位重要的迪士尼动画师——奥利·约翰斯顿和弗兰克·托马斯所写。


为了使动画看起来不显得机械和人造,物体应以一定的加速或减速的方式移动,就像物理世界中的所有活动对象一样。

与线性动画相比,具有缓动效果的动画看起来更自然(这里提示下:注意看每段竖格的间距)


2/1 直线运动

不受任何物理力影响的物体直线运动,换句话说就是匀速运动。正因为如此,它们看起来非常不自然,对人眼来说是人为的。


所有动画应用程序都使用动画曲线,我将尝试解释如何阅读它们以及它们的含义。曲线显示了物体的位置( y axis=position )在相同的时间间隔内物体的位置如何变化(x axis=time)。在当前情况下,运动是线性的,因此物体在同一时间行进相同的距离。 

直线运动曲线


例如,直线运动只能在物体改变颜色或透明度时使用。一般来说,我们可以用它来表示物体不改变其位置的状态。


2/2 缓入或加速曲线

我们可以在曲线上看到,在开始时物体的位置变化缓慢,而速度则逐渐增加,这意味着物体正在以一定的加速度移动。

加速度曲线


当物体以全速飞出屏幕消失时,应使用此曲线,比如说系统通知或者是界面卡片。但请记住,只有当对象永远离开屏幕且我们无法调用或返回它们时,才应使用这种类型的曲线。

将卡片滑出屏幕的加速曲线


动画曲线有助于表达正确的情绪。在下面的示例中,我们可以看到所有物体的移动持续时间和距离是相同的,但是即使曲线上的微小变化也可以影响动画的气氛。当然,通过改变曲线,你可以使物体尽可能地接近于真实世界。

持续时间和距离相同,但却是不同的氛围


2/3 缓动或减速曲线

它与缓入曲线相反,因此物体会快速覆盖很长一段距离,然后缓慢的降低速度,直到最终停止。

减速曲线


当元素出现在屏幕上时应使用这种类型的曲线——它以全速向上飞入屏幕中,然后逐渐减速直到完全停止,这也可以应用于从屏幕外部出现的其他卡片或对象。

减速曲线,使动画更好地呈现


2/4 缓入缓出或标准曲线

该曲线使物体在开始时获得速度,然后慢慢地将速度降回零。这种类型的移动是界面动画中最常用的。当你犹豫在动画中使用哪种类型的运动时,可以使用标准曲线。

标准曲线


根据《材料设计指南》,最好使用非对称曲线,使移动看起来更加自然和真实。曲线的末端必须比它的开始更加突出,以使加速的持续时间短于减速的持续时间。在这种情况下,用户将更加关注元素的最终移动,从而关注元素的新状态。

查看对称和非对称标准曲线之间的区别


当对象从屏幕的一部分移至另一部分时,使用缓入缓出功能。在这种情况下,动画避免了引人注目的戏剧效果。

卡片在屏幕上的移动以及相应的不对称曲线


当元素从屏幕上消失时,应该使用相同的移动类型,但用户可以在任何时候将其返回到先前的位置。它涉及抽屉式导航等。

抽屉式导航从屏幕上隐藏了标准曲线


从这些例子中可以看出,许多初学者忽略了一个基本的规律——开始动画并不等于结束动画。与抽屉式导航一样,它以减速度曲线出现,而以标准曲线消失。另外,根据谷歌的材料设计语言,物体出现的时间应该更长,以吸引更多的关注。

侧面菜单的出现和消失,分别通过减速度和标准曲线实现


使用函数cubic-bezier()来描述曲线。之所以称为立方,是因为它基于四个点。在图上已经定义了具有坐标的第一个点0;0(左下)和具有坐标的最后一个点1;1(右上)。 


基于此,我们仅需描述图形上的两个点,这些点由函数的四个参数给出cubic-bezier():前两个是坐标x和y第一个点,后两个是坐标x和y第二个点。 


为了简化曲线的工作,建议使用easings.net和cubic-bezier.com网站。第一个包含最常用曲线的列表,你可以将其参数复制到原型工具中。第二个来源使你可以使用曲线的不同参数,并立即查看到物体将是如何移动的。

函数三次贝塞尔曲线的不同类型的曲线及其参数


03 界面动画中的编排

就像在芭蕾舞蹈设计中一样,主要思想是在从一种状态转换为另一种状态的过程中,引导用户注意一个流动的方向上。舞蹈编排有两种类型——平等交互和从属交互。


3/1 平等交互

平等交互意味着所有对象的外观都遵循一个特定的规则。在这种情况下,所有卡片的外观都被视为一种流程,可以引导用户的注意力集中在一个方向上,即从上到下。如果我们不按照顺序,那么用户的注意力将会分散。所有元素同时出现看起来也会很糟糕。

用户的注意力应引导在一个流动的方向上


对于表格视图,它有点复杂。在这里,用户的焦点应指向对角线,所以逐个地显示元素是一个很糟糕的主意。单个展示元素会使动画过长,并且用户的注意力会呈锯齿状,这是错误的。

卡片形式的对角线外观


3/2 从属交互

从属交互意味着我们要有一个吸引用户注意力的中心对象,而所有其他元素都从属于它。这种类型的动画给人一种有序的感觉,从而引起用户对主要内容的更多关注。


在其他情况下,用户将很难知道该关注哪个对象,因此他的注意力将被分散。所以,如果有多个要设置动画的元素,则需要明确它们的运动顺序,并尽可能将动画设置为最小的对象。

只有一个中心对象的动画很有必要,其余元素应是被引导的。否则,用户将不知道关注什么对象


根据材料设计语言,当移动的物体尺寸发生不均衡变化时,它们应沿着弧线而不是直线移动。这有助于使动作更自然。“不成比例”是指物体的高度和宽度的增加/减少是不对称的,即以不同的速度进行(例如,一个正方形的卡片变成了一个长方形)。

当移动的物体不按原有比例变化时,应沿着弧线运动


当物体按比例改变其大小时,使用沿直线的移动。由于这种移动的实现比较容易,因此通常会忽略不成比例的圆弧移动的规则。看看实际应用的例子,你会看到线性运动的主导地位。

尺寸的比例变化是沿着直线上运动的


曲线上的运动可以通过两种方式实现:第一种称为垂直向外——物体开始水平移动并以垂直移动结束;第二种是水平向外——物体开始垂直移动并以水平运动结束。


物体沿曲线的移动路径必须与滚动界面的主轴线重合。例如,在下一张图片上,我们可以上下滚动界面,相应的卡片以“垂直输出”的方式展开-首先从右到下,然后向下。反向移动以相反的方式进行-即卡片首先垂直上升,最后水平移动。

卡片的展开/折叠方向应与界面的轴线一致


如果移动物体的路径彼此相交,则它们将无法彼此移动。这些物体应通过减慢或加快自身的速度,为另一个物体的移动留下足够的空间。另一种选择-他们只是推开其他物体。为什么?因为我们假设界面中的所有物体都位于一个平面中。

在移动过程中,物体之间不应相互穿过,而应为另一个物体的移动留下空间


另一种情况,移动物体可以高于其他物体。但也不能通过其他物体消失或移动。为什么?因为我们相信界面元素的行为符合物理定律,现实世界中没有任何固体物体能够做到这一点。

物体可以超越其他物体,然后移动


结论

从以上总结的规则和原则能明白,UX界面动画是反映物理世界中存在的运动,如摩擦、加速等,模仿现实世界存在的行为。我们可以创建一个序列,让用户能够理解期望从界面得到什么。如果动画是正确构建的,那么它不会太引人注目,并且不会分散用户的目标,动画不应该影响用户使用或完成任务。


但是不要忘记动画更多的是一种艺术而不是科学,所以最好的方法是在用户身上试验和测试你的决定。


文章来源:站酷    作者:UX辞典


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

工具型产品可用性测试怎么做?

涛涛

本文将针对酷家乐旗下云端建模工具——酷大师所做的可用性测试,说明工具型产品如何去做可用性测试。

打造一款产品的过程中,我们需要时刻保持警惕:功能是否满足用户核心需求?交互流程能否做到简单流畅?是否还有未知领域可以由用户带来启发?进行一次准备充分的可用性测试,无疑是解答上述问题快捷有效的方式。

下面我将结合本次针对酷家乐旗下云端建模工具——酷大师所做的可用性测试,说明工具型产品如何去做可用性测试。

准备阶段

第一步:明确测试目的

测试目的不同,安排的测试任务就不同,进而就会影响最终得到的结果。所以测试之初需要考虑清楚测试目的。国际标准化组织在人体工程学设计的人机交互部分( ISO9241) 把b2可用性c 规定为 3 个指标:

  • 有效性:用户使用该系统完成任务的精度和完整性;
  • 效率:用户使用该系统完成任务需要耗费的资源;
  • 用户满意度:用户对该系统的舒适度和认可接受程度。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

结合这3个指标,我将本次测试目的设定为:

  • 了解用户对酷大师现有主流程的使用现状;
  • 了解用户对酷大师的体验满意度及需求满足情况。

第二步:确定测试时间和环境

测试时间:

  • 测试准备时间:建议为期2天。准备相关文档、设备、场地、任务等。
  • 用户测试时间:建议为期3-5天。可短时间内容集中进行用户测试,或在工作日穿插进行测试。
  • 结果整理时间:建议为期5天。用于整理测试信息、落实产品迭代任务、撰写总结报告等。

测试环境:

  • 线下环境:邀约用户到公司办公室现场测试;
  • 线上环境:考虑到用户路程及时间等限制性因素,也可在线上进行测试。
第三步:安排测试设备
  • 操作设备:取决于目标用户群体主要使用的设备,假如用户都使用ipad,就要将ipad列为主要操作设备。
  • 录音设备:测试结束后需要进行详细的信息整理,录音资料可以帮助回忆沟通内容。可使用手机自带录音功能或专业录音笔。录音前必须告知用户,在征得许可后方能进行录音。
  • 录屏设备:工具型产品的操作过程中涉及很多细节,录屏资料可以帮助工作人员进行问题定位。可使用电脑自带录屏功能,或录屏工具。
  • 远程设备:由于部分用户需在线上测试,可使用在线工具进行远程协作,比如:zoom、腾讯会议等。
  • 记录本和笔:测试过程中进行表格填写时需要使用。
  • 文档资料:主要包括测试过程中需要填写的表格。建议打印n+2套,n是测试样本数量,另外2套备用。
  • 场地准备:提前预约会议室,给用户独立的操作环境。
  • 测试酬劳:具体可根据公司政策进行准备。
第四步.邀约测试样本

Nielsen在理论中认为5-8位用户可以测试出85%的可用性问题,实践下来确实如此,样本数量建议控制在这个范围。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在同一个产品的用户中,新手用户、永久的的中间用户、专家用户这三类角色通常是共存的。我们需要让新手用户快速和无痛苦地成为中间用户;避免为那些想成为专家的用户设置障碍;最为重要的是,让永久的中间用户感到愉快,因为他们的技能将稳定地处于中间层。

本次测试中,我尽量使样本中包含这3类用户,比例为2:3:3。测试之后,就可以大概知道对于不同类型用户来说,产品可用性和

易用性情况,也可以得到多维度差异化的反馈。

第五步:设计测试文档

测试中需要使用一些管理用户信息或记录用户反馈的表格,在准备阶段就要做好表格设计和打印工作。下面是具体的表格,可根据具体需求做相应调整。

《用户信息&排期表》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在这张表中管理测试用户信息b2姓名、职业c 、测试安排「时间、地点」、测试工作人员「主持人、观察员」。一场测试尽量安排一位主持人和一位观察员作为工作人员相互配合。

主持人负责与用户沟通互动,推进测试进程;观察员负责设备和资料保障,以及测试过程中的行为观察和记录。一个人独自承担主持人+观察员角色的话,在用户反馈密集而现场又出现临时状况时就会手忙脚乱,所以建议两个角色分工协作。

《用户基本信息问卷》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

在这张问卷中可以设计与产品相关的用户基本信息问题,问卷设计原则为:

  • 关联性:与需要测试的内容相关;
  • 层级性:问题层级依次递进,使用户回答问题时能够思维连贯,由浅入深;
  • 隐私性:尽量避免涉及用户敏感信息,必须涉及时需解释原因,尊重用户意愿。比如有些用户不愿透露年龄、收入等信息。

这张问卷使用在线工具呈现,比如腾讯问卷;也可现场打印纸质问卷进行询问填写。大多数用户比较喜欢现场填写。

《单任务满意度问卷》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

测试过程中,我们需要让用户完成一个完整任务,该任务需要拆解成若干单任务。在每个单任务结束后,立刻对用户进行该单任务的满意度询问。

《SUS系统可用性量表》

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

用户结束完整任务后,填写该量表。该量表由10个题目组成,包括奇数项的正面陈述和偶数项的反面陈述。在结果整理阶段,我们再对该量表进行分值计算。

第六步:规划测试脚本

从开始到结束,需要主持人将整场测试的各个环节串联起来,引导用户操作,推动测试进程向前发展。为防止意外状况出现,可以预设测试脚本,规划情境和话术,并在预测试环节验证及优化该话术。

比如可以这样开场:“首先非常感谢您今天能来参加我们的可用性测试,我是主持人XXX,这位是观察员XXX。我们这次是对酷大师建模工具进行可用性测试,想了解您使用时的体验和感受。

在这里需要强调的是:我们测试的对象是工具,而不是您,所以您不必感到紧张……当您使用工具时,我们会观察和记录。今天的测试大概需要一个小时,测试过程中会有休息时间。测试过程中,请您将手机保持静音状态……“

比如可以这样进行两个单任务环节串场:“好的,我们已经完成了第一个单任务。现在有一份简单的问卷,填完后可以稍微休息一下。

「出示问卷,并作简要填写说明」「问卷完成后进行简单访谈,用户也稍稍休息后继续」现在,我们开始进行第二个单任务「要清晰且大声地说出这句话,以“鼓励”测试参加者和提示记录人员」……”

具体话术依据需要测试的内容和情境展开,尽量做到专业、友好。

第七步:设计测试任务

可用性测试往往带有一定目的性,而这些目的能不能达成,取决于任务与目的的关联性以及用户是否能够给到对应反馈。通常,测试用户是愿意给予反馈的,那么测试任务的设计就成为整个准备阶段最重要的环节。

做好测试任务的设计和拆解:需要具备从全局高度理解产品的能力;需要知道产品全链路的过去起源、现状细节、未来走向;需要把控重点,拎出骨架;需要去繁就简,以较少的任务成本测出最有价值的信息。

本次测试中,我设计的主流程是:模型创建——材质铺贴——模型渲染——模型发布——模型分享,并且我还希望测到拉伸、阵列、组编辑、移动、旋转这样的主功能。所以我将这两块有机结合,给到用户创建一个「楼梯踏步模型」的任务。

我将任务按照主流程拆解为5个单任务,主功能分布到其中几个单任务中,且尽量做到两个单任务中不重复使用同一个主功能。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

预测试阶段

大多数产品都存在一些限制因素导致的尚未解决的已知问题。这些问题在测试中出现的话,会转移用户注意力,削弱本次测试的价值,偏移本次测试的目的。

另外,我们准备阶段进行的种种规划也需要得到验证。结合这两个原因,正式测试之前建议进行内部的用户预测试。找出并修复测试环节中的漏洞,准备好各类突发状况下的planB,以及修复影响正式测试的已知问题,提高正式测试的执行效率。

正式测试阶段

第一步.测试开场,填写《用户基本信息问卷》

本次测试是在工作日穿插进行8场一对一用户测试。这样可以放缓测试节奏,在两场测试间隙有充足时间简单整理上一场收集的信息,与下一场用户确认测试安排,以及对突发状况及时处理。

正式开始前半小时,观察员需确认设备都已调试妥当,资料都已打印完成。主持人可与用户进行联系,带领用户进入测试场所。主持人可以通过填写《用户基本信息问卷》了解用户基本信息,帮助用户消除在陌生环境下的沟通障碍。也可以使用户以放松状态完成测试任务,以开放心态为后续拓展性话题的展开做好准备。

无论是填写《用户基本信息问卷》还是后续的问卷,建议采用主持人提问、用户回答的方式收集信息。用户的注意力集中于思考和沟通,就能够提供更多有价值的信息,而不是忙于撰写问卷。

第二步.完成单任务,填写《单任务满意度问卷》

主持人按照顺序分步解说单任务。单任务测试过程中,工作人员不要去打扰用户,也不要给用户任何提示,所有的问题都等到测试结束再进行解答。

观察员需仔细观察用户操作,记录用户是否很容易判断出如何操作,完成某个重要功能点时是否顺畅;需随时关注用户表情,记录下明显表情相关联的流程或功能点等等细节。

一个单任务完成后,提示用户稍事休息,然后提问《单任务满意度问卷》中的问题。此时可以回答用户操作过程中的疑问,也可以藉由操作中的细节做延展发散,询问用户操作感受。通常可以获得很多针对该单任务的意见和建议。这些意见和建议后续就需要记录整理,作为优化任务帮助提升产品可用性和易用性。

第三步.填写《SUS系统可用性量表》,了解整体评估

整个任务完成后,可以藉由填写《SUS系统可用性量表》,了解用户对整体的评估。由于量表的10个题目中,包括奇数项的正面陈述和偶数项的反面陈述,所以在提问过程中一定要陈述清楚题目。如果用户认为有些问题无法回答,则视为其选择中间值。在后续的结果整理阶段,再对量表总分进行计算。

在问题询问过程中,可以有针对性地询问原因。比如针对第2个问题“我认为酷大师建模工具的操作较为复杂,其实没必要这么复杂”。

如果用户认为不复杂,则可以询问哪些点非常简单易用;如果用户觉得复杂,则可以询问哪些点觉得复杂。用户告知原因的同时,常常会说出他认为比较简单的解决方案。这些解决方案或者来自于竞品,或者来自于实践,或者来自于创新,常常可以帮助我们开拓思路,走出认知盲区。

第四步.拓展性访谈,测试收尾

在这个环节可以不必拘泥于原定的测试任务。建议预留一定时间,大到行业发展,小到产品细节,与用户进行一番深度探讨。这些来自于一线的用户常常会带来一些新鲜的灵感,为产品未来的拓展提供一些线索,解决产品当下的一些困惑。

由于我们一开始就对测试样本进行了分类,所以也可以结合前面几个环节的信息,对各分类下的用户诉求和行为习惯进一步验证、区分、归纳。

结果整理阶段

第一步.SUS量表分值计算

首先,我们需要计算SUS量表总分。奇数项计分采用“原始得分-1”,偶数项计分采用“5-原始得分”。由于是5点量表,每个题目的得分范围记为0~4(最大值为40),而SUS的范围在0~100,故需要把所有项的转换分相加,最终再乘以2.5,即可获得SUS分数。

其次,我们可以获得分量表得分。SUS量表中,第4和第10项构成的子量表为“易学性”(Learnability),其他8项构成的子量表为“可用性”(Usability)。

为了使易学性和可用性分数能够与整体SUS分数兼容,范围也是0~100,需要对原始分数进行转换:易学性量表转换分数的总和乘以12.5,可用性量表乘以3.125。

最后,我们可以将SUS量表分数换算成百分等级来解释,找到对应评级。百分等级的意思是指测量的产品或系统相对于总数据库里其他产品或系统的可用性程度。比如SUS得分是73分,其百分等级大约为67,意味着比大约66%的产品可用性更好。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

第二步.整理问题列表,推进迭代优化

做完所有用户的测试之后,我们一定会收集到很多涉及具体功能点的反馈。对于正向反馈,我们可以谦虚地接受,并且思考这些打动用户的点如何复用;对于非正向反馈,我们应该冷静地思考,它们将是本次可用性测试中最直接而有效的收获!

对这些反馈可以进行分类归纳,将其中能够立即应用于产品的内容整理出来,按照优先级,放入产品迭代优化任务中。这些任务将提高产品可用性,在数据层面能够帮助提升留存率。我们这次可用性测试中总共获取97个有效反馈,其中62个整理进产品迭代任务,并且取得了用户使用数据上的相应提升。

第三步.撰写测试报告

整个测试环节通常只有2-3位工作人员,如果希望能和团队一起分享测试的收获,建议整理一份总结报告。可以使用word或者ppt形式,说明测试背景、测试用户信息、主要结论、发现的问题、以及解决问题的行动项。

总结升级

经过几场颇具收获的工具型产品的可用性测试之后,我做了一些总结,希望能够形成适应于工具型产品的可用性测试体系:

1. 目的性

工具型产品的可用性测试目的比较统一:帮助团队优化体验路径;帮助团队明确用户使用产品时的体验感受;帮助设计师验证设计指标。

2. 专业性

完整的可用性测试全程都需要专业支撑,从筹备到进行,从任务到结果,每一个细节都需要考虑到位。在这过程中我们要尽量保证:流程规划清晰;文档整理完整;分工明确到位。

3. 参与性

大多数可用性测试是用户体验相关岗位人员发起,但是用户对于产品的反馈与团队每位成员息息相关,所以建议团队共同参与。比如在这次可用性测试中,就邀请了产品经理和研发人员担当观察员或主持人;邀请用研人员给予专业指导培训;在对测试反馈的问题进行优化过程中,也是团队通力合作,推进迭代快速进行。

4. 周期性

可用性测试不是进行一次就结束的一场表演。而是结合产品进展情况,可持续实施的一种有效的快速验证方式。

可以在新产品上线后进行,可以在重要功能上线前进行,也可以在迭代优化后进行。建议周期性进行可用性测试,取得一些结果后立即应用于产品,隔段时间再次验证,形成良性循环。亦趋近于精益用户体验中倡导的基本MVP理念。

当然,每次可用性测试都需要工作人员投入大量时间和精力,所以专业赋能可以成为很好的解决方案。即团队成员可以学习使用该方法,轮流进行周期性操作。

工具型产品可用性测试怎么做?来看酷家乐的实战经验!

写在最后

我们日常其实接触并积累了大量专业方法,可用性测试只是其中一种。在不断实践的过程中才能真正体会到这些方法的魅力之处,在不断落地的过程中才能打磨自身的方法论体系,形成属于自己的一套打法,给产品设计带来新颖的专业思路。

文章来源:优设    作者:酷家乐UED 


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

拼多多抢走了我妈,从淘宝手里

周周

编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。

上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。

我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。

弄完之后,我们又展开了这样的对话:

我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多啊!

我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!

我:但是拼多多很多假货啊!

我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!

我:……

我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。

我:我早就叫你开个支付宝账号,你自己又不开!

我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……

我:哪有黑客黑你,你又不是马云……

我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。

我:好吧。

我妈:以后我就用拼多多,我那些舞友都在用!

我:你开心就好。

我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像:

  • 年龄特征:60岁左右
  • 工作与生活特征:退休在家,时间较多
  • 消费能力:退休金4000元左右
  • 家庭情况:已有孙辈
  • 人际关系:以广场舞舞友、同学、工友、插友为主的人际关系圈,集聚在微信上
  • 消费态度:不追求牌子,追求低价
  • 网购习惯:淘宝的老用户,但没有支付宝账号;网购品类主要为衣物及家居用品
  • 触媒习惯:微信(微信群、朋友圈)、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?

首先,我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。

其次,来看看用户定位。

根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。

那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。

另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。

品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢?

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢?

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。

在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。

在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。

谈到这里,我还意识到一个重要的问题。

从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。

再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗?

一点个人小想法,想到哪写到哪。

如果你有不同的意见和想法,欢迎评论或留言。


文章来源:人人都是产品经理           作者:@源记物语


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

Apple 的设计哲学:网页篇

周周


Apple 致力于让每件产品都赏心悦目,与其说官网是产品展示平台,倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事,那它到底有何魅力?文章对Apple的网页设计展开了梳理分析,与大家分享。


一、沉浸与交互式体验

每当有新产品发布时,我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段时间发布的 iPad Pro 也一样。

这背后是 Apple 基于 webGL 技术,创造的一种沉浸与交互式产品体验。

1. 连续性

我们在产品介绍页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。

一方面,滚动作为大多数 Web 用户最自然的操作,学习成本极低。

另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。

iPad Pro 的连续性

2. 趣味性

另外,采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。

伴随着丰富的、若隐显现的章节文案,就像电影的旁白一样,娓娓道来。

通过滚动的方式增加交互性,这是明智之举。试想一下,如果只放置已渲染的演示视频,那么用户的操作会受到限制,只能在视频中前进或后退,毫无乐趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

说到言之有序,我们看 iPad 的页面介绍。四款产品,分别是:iPad Pro、iPad Air、iPad、iPad mini。

拍摄角度的秩序感,可谓妙不可言。

iPad的秩序感

  • iPad Pro 的拍摄角度接近于正侧面。
  • iPad Air 是四分之三侧面。
  • iPad 是正面。
  • iPad mini 是俯视。

如此一来,即显得有序,也不会导致视觉疲劳。

2. 设计语言

其次,官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。

从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。

HomePod

另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。

三、层次

1. 视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和极简的理念。当然,它不是那种附庸的美观及外表的光鲜,而是将复杂难懂的技术以简洁的形式传达给用户。

Mac Pro 视差滚动

在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好的利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。

2. 视觉张力

不仅如此,样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉,呈现刺激与震撼。举两个例子:

A13芯片的扩张力

扩张力:整个画面以 A13芯片 为视觉中心点,元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导,视觉张力就出现了,让人感觉巍峨壮观。

Pro级摄像头的排斥力

排斥力:通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写,传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的?

1. 视觉降噪

我们都知道,高饱和度的色彩,会影响人的情绪波动。相反,低饱和度的配色,对人眼的刺激较弱,会有一种冷静且克制的高级感。

iMac Pro 高级感

回过头来看苹果官网的大部分页面,除了产品界面色彩 和 按钮蓝 之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿,也是高级灰中加了一点点绿而已。

换言之,减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。

iPad 留白

除此之外,恰当的留白可以更加突出产品内容,让重要的信息更准确的传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。

所以我们做设计时应当多做减法,避免无意义的视觉元素堆砌,反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话:Less Is More

2. 配图

当然,只有留白是不够的。既然是做宣传,那么一份高分辨率、精致的配图就显得尤为重要。

苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的追求。

Designed by Apple in California

不仅如此,苹果产品圣经《Designed by Apple in California》,以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频,相当硬核。

3. 苹果式文案

做过英文 Web 的设计师都知道,英文往往比中文更好设计,相同的布局英文出来的效果也更好看。

这不是崇洋媚外,心理学有个词叫做「母语羞涩」。简单来说就是,中文对于我们来说,太常见了会让人产生一种廉价感(实际上是羞涩感)的心理感受。

老外也一样,你可以看到美国企业:苹果、麦当劳、星巴克都是使用图形 Logo,而日本企业不用母语,而是用英文,比如 SONY、TOYOTA、Canon。

你的下一台电脑,何必是电脑。

回到苹果官网,我们看到一部分文案是英文产品名称,这个不会感觉羞涩。

那中文部分怎么办呢?比较有意思的是,Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差,但基本上能明白字面意思。

其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:

  • 重复:比如说 iPad Pro「你的下一台电脑,何必是电脑。」
  • 双关:比如说 AppleWatch 的「它会时时关心你的心。」
  • 排比:比如说 iMac的「从极速,到神速,任你提速。」
  • 押韵:比如说 配件 的「可重复充电,又可圈可点。」
  • 对比:比如说 iPad mini 的「身量小,能量大。」

4. 仪式感

最后一点。生活要有仪式感,苹果官网也有仪式感。

国际妇女节专题

在一些特殊的日子里,例如三八节当天,友商选择打广告促销。而苹果推出了国际妇女节专题,致敬女性的伟大,这一做法颇具人文情怀。

不过话又说回来,感动归感动,还是参与友商的打折活动香。

#相关阅读#

Apple 的设计哲学:交互篇

Apple 的设计哲学:UI 篇

Apple 的设计哲学:声音篇


文章来源:人人都是产品经理           作者:阿洋


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

为什么用户注册这么简单,想注销却如此麻烦?

涛涛

最近国外的设计平台频繁出现一类内容,大概类似于「产品设计中的伦理道德与用户体验」,里面的内容有引起我的一些思考。

我先给大家举个例子,来解释一下上面这句话的意思。

以前,我们聊界面的设计,说界面当中如果有两个按钮,就要引导用户走向主要操作,弱化次要的。类似于下图:

为什么用户注册这么简单,想注销却如此麻烦?

这时候一定会有一些设计师告诉你说,这类界面,要以左边这种形式去设计,因为无论从视觉角度、优先级角度还是企业利益角度来说,左边这种都更符合用户操作的逻辑。

为什么用户注册这么简单,想注销却如此麻烦?

或者,如 PayPal 上底部的「移除卡」功能,故意在层级上做的很弱,颜色的处理让按钮看起来甚至是不可点击的。

虽然「移除」对于产品来说是一个危险操作,产品不希望用户进行这一操作。但是对于用户来说,当他们想要这个功能的时候,说明意愿强烈,这时候这种设计会让用户产生糟糕的体验。

于是就有人提出说:

  • 为什么呢?难道就不考虑想要跳过的那部分用户了么?
  • 产品设计就是只考虑对企业有利的用户,而忽视掉那些不想付费的用户?
  • 为什么我们的界面设计不能从更公平的角度去考虑呢?
  • 难道因为这些糟糕的设计频繁的出现,我们就要认为这是好的设计了么?

为什么,用户登录注册就这么简单,但是有些用户想要注销账号却如此麻烦?难道对于这些想要注销账号的用户来说,用户体验就不重要了么?

其实,我觉得这个问题,可以从两个角度来说明,分别是「目的」和「义务」。

作为产品团队的一员,我们的价值在于给公司创造利益,想方设法得到用户的支持与广告商的青睐。所以我们设计的产品都会有特定的目的。

比如,引导用户去购买产品或平台中的商品,以让企业能够存活,持续运营下去。

但这并不是说,企业把一些对用户无用的商品卖给了用户,用户买的这份商品,对他们来说一定是有价值的。产品并不是在欺骗用户购买无意义商品。

比如平台支付了音乐或视频的巨额版权费,方便用户在线上收听与观看,那么用户为这些内容付费是否应当?

企业做这些事,从用户与广告商身上获取利益,本质就是为了赚钱,这一点无可厚非。

所以在产品界面的设计中,如文章开头的示例,采用左图的形式,突出办理会员的按钮,引导用户付费成为会员,似乎也没什么问题。

它不过是利用了「信息优先级」的概念。我们需要帮助用户去理解界面上所呈现的信息,目的是为了让用户更好的操作。如果所有信息的权重是一样的,反而会影响用户的使用,甚至造成体验障碍。

而逆向的,比如不办理、跳过类似的出口也有给到用户,虽然从视觉上相对弱化了,但绝不应该阻碍用户去点击。

从这点来说,上图示例的问题不是在弱化了按钮的视觉效果上,而是按钮太小,可能会导致用户误触「去办理」,让不想办理的用户频繁点错;或者过分弱化界面上的重要元素,明明在眼皮底下,却给用户找不到的错觉,这才是根本性的问题。

比如一些引导页,在屏幕上设置了三个类似「跳过」的按钮,结果只有一个是有效的,产品为了让用户点击广告给企业创造收益,利用这样的方式达到目的,这才是所谓伦理道德的缺失。

为什么用户注册这么简单,想注销却如此麻烦?

我再举个例子。

为什么用户注册这么简单,想注销却如此麻烦?

连续包月,相比普通包月,策略大多都是第一个月有优惠价,以引导用户办理连续包月服务。好处是,大多数用户办理了连续包月,就会长期使用,它弱化了用户的决策意识。

除了部分办理完第一个月就取消服务的用户,只是为了这个月用,利用这样的漏洞省点钱,不过这也仅限于第一次办理了。

那么我们作为设计师,就应该从为公司盈利的角度去设计界面,引导用户办理连续包月服务,而不是普通包月,在界面上做出差别。

同样的,当每个月用户需要自动扣费时,就应该告诉用户,过两天又要一次扣费了,做一个提醒。而不单单是成功办理后,就再也不通知了,这是不对的,毕竟用户每个月都在为产品付费,这样的通知是产品的义务。

如果用户办理的是年会员,已经单次就付清年费,那就没必要反复提醒(也没什么可提醒的)。

在这个例子中,用户体验与伦理道德的界限很清晰,所以我并不觉得它们是相互矛盾的。

我们还可以举很多例子来说明这个问题。

比如 Windows 系统下卸载软件频繁的下一步,甚至还会有错误引导的设计。

为什么用户注册这么简单,想注销却如此麻烦?

再比如,在一些产品里关注了某个人,但是有一天想取关的时候,总是找不到取关按钮。或者,一些产品里并不重要的信息,总是闪着红点引导用户去点击等等。

我们常常会去分析按钮的各种样式,比如是否有圆角,是否有投影,是否要渐变等等;也会去梳理按钮与文案的关系,比如按钮中的文案与边框的间距,文案的大小要适配载体的比例等等;甚至,还会去分析按钮的位置,比如取消按钮应该在左边还是右边,取消按钮与关闭按钮的区别等等。

但似乎,我们很少会去探讨按钮背后的这些事件,我们都知道按钮是用户与某个事物间接的交互控件,但我们从来都只注意于按钮的外形与按钮位置所应有的逻辑,而没有真正去探讨按钮所承载的这些问题。

比如用户点击了「会员办理」的按钮,会发生什么事情?我们是否应该在下个月用户扣款之前提醒他们?或者,频繁的在产品里滥用并不重要红点提示,会不会影响用户对于该产品的使用频率?

这才是我们需要延伸出来思考的事情,而不单单是按钮或者某个控件本身。我们思考的远不止目的,还有义务。

所以。

我并不觉得在产品界面上引导用户执行操作有什么问题,相反,问题在于在引导的同时,不能阻碍用户进行其他的操作,给予用户合理的控制权,才是最重要的。

产品设计的目的在于正向逻辑的用户操作体验,而产品设计的义务在于给予用户拒绝的权利。


文章来源:优设    作者:和出此严


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



日历

链接

个人资料

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

存档