可视化图表是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设计过程有所帮助。
// 为什么要数据可视化
数据可视化就是用图表来表示数据信息,它所传达的信息包括你所拿到的数据源和你分析后的结果,再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息,是我们可视化的最终目的。
举个例子,同样一组数据,用表格的形式呈现是很难有所洞察的;如果将各个地区维度的数据聚合以柱图形式呈现,很容易就能看出各个地区间数据的差异,并从中洞察规律
关于如何设计好数据可视化图表,这边总结了三个步骤:选择适合的图表,强化视觉层次,图表响应式适配。
一、选择适合的图表
数据可视化的图表种类繁多,当我们真的开始作图,往往会遇到一个困境:有这么多类型,要如何选择正确的图表呢?首要依据是考虑所要传达的信息意图,即所要制作的图表它的任务是什么,再通过分析数据关系来选择表达方式;第二层意图是图表传达内容,这时候我们就需要根据数据的特征去突出和强化。
1. 分析数据关系
根据数据分析的方式来看,每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构,再结合数据关系作出选择。了解图表的可能知道,一般图表的数据关系有构成、比较、分布,以商业数据为例,常见的还有流转关系。
构成关系
构成关系的图表表达的是部分和整体的关系,用于分析总体和各部分的占比比例,构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小,也可以使用比较关系的图表。
常用图表:饼/环图、堆叠图、面积图等,如涉及到层级结构,还会用矩形树图或旭日图等特殊结构图表。
关键词:“占比、比例、百分比”
比较关系
比较关系是基础分析中常用的一种图表类型。在一定的取值范围内,通过对两个或两个以上的指标分析,可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式,趋势对比用于表示一段时间内数据的变化,分类对比用于比较数据规模。
常用图表:趋势对比常用图表有折线图、散点图等;分类对比常用条形图、柱状图、气泡图等。
关键词:“增减、升降、涨跌、波动”
分布关系
利用空间分区来展示数据之间的分布关系,常用于体现两个或以上数据的相关性。
常用图表:散点图、热力图、雷达图等
关键词:“随着……而变化、A/B之间的相关性、交/并集”等
关联与流转
流转关系是B端数据常用的一种关系,它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等,以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。
常用图表:关系图、桑基图、漏斗图、进度图等
关键词:“流程步骤、留存、转化、关系”
2. 分析数据特征
按数据关系和分析目的选择好图表类型后,第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有:变量特征、维度特征、层级特征、流程特征。
变量特征
分辨一个指标通常有两类特征,按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势,离散数据通常统计各分类下数量的变化。
维度特征
多维度分析需要将多个变量在同一平面上直观的表示,可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据,可使用不同颜色进行分类
层级特征
多层级数据由多个部分构成一个整体,又称树形结构数据。除了用结构树图表表现以外,还可以考虑以下两种图表类型:
例如:上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额,通过色调来区分不同类型,颜色的深浅代表分类下的子集,面积体现销售占比。对比一般结构树图表,它的优势在于可以有效利用空间。
流程特征
流转关系是表达数据转化流程的重要类型,不仅包含统计意义上的数据总和,同时还表达了信息流转的路径;其中桑基图和漏斗图都可以表达路径中流量的变化,不同的是桑基图重点强调流量的强度和走向,漏斗图更加注重突出转化率和效果,根据不同的表达目的选用。
二、强化视觉层次
选择合适的图表后,在信息传达上也需要正确的表达,展示形式美观的同时能够清晰的体现数据特点。
1. 强化数据特性
使用图表正确的表达信息,需要设计师在强化数据特性的同时避免偏差
2. 色彩视觉传达
除了在设计构图上优化以外,颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知,错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板,精确传达信息同时后续的项目在选用时也可以达到用色的统一。
我们在之前的文章里有介绍过图表的取色模型,通过调整颜色HSL值的区间,可以得到以下三种意图色板:
那么我们要怎么样去使用这些色板呢?下面几个案例将带你了解其中的差异。
定性型:使用色调来进行分类
数据内在没有顺序差别时,建议使用色调值(H)进行区分;如定义国家、行业等类型。如果希望图表看起来更加专业,以下有几项分类色板的小建议:
定量型:使用深浅色板强调内在顺序
如果在同一个分类下包含子类别,或者数据本身具有排名属性,那么建议使用连续色板来突出他们内在的顺序,使图表更加易读。
三、图表中的响应式设计
B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报,在基础设计完成后还需要考虑到图表展示的环境,根据不同端去适配显示效果,以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。
1. 布局框架适配
在网页端显示时,有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态,将非必要的的元素转化或隐藏,保留重要的图形元素去适应当前空间;元素隐藏后使用悬浮交互来保证信息的展示,保持图表的可读性同时也避免产生元素的重叠。
如案例中的图表,在不同尺寸下通过改变和隐藏图表元素,以达到适配当前空间的效果。
2. 图表元素适配
要适配移动端,网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外,还需要考虑手机屏幕的尺寸和图表元素的适配性,去兼容相关的交互操作。
3. 极值适配
因B端平台的特性,我们无法预知客户传入的数据量,可能会遇到因数据量过多,造成图表显示不佳,数据读取困难等问题。这种情况下,提前考虑数据极限场景,通过交互的形式变化的方式让用户获取完整信息,提升理解同时信息展示更灵活。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因,在这篇文章就不做深入讲解了,以后可独立介绍。
// 结语
数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确,才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据,确保用户能够更好的接收信息,才是可视化的关键。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着B端体验设计的发展,表单类页面已经形成了一定的设计模式,例如登录页面,场景比较明确、业务流程和设计模式都比较成熟了。
业务型表单设计与业务强相关。既需要考虑交互带来的用户体验,又要从业务角度出发满足用户的行为需求,相对比较复杂。不过也形成了一些固定的设计方法。今天我们先来看看「精简」策略。
本文主要内容:
✦ 删除,实现表单轻量化
✦ 组织,让表单更加有层次
✦ 隐藏,让表单更加灵活
✦ 转移,扩展表单的异步空间
表单是系统与用户进行沟通的语言,它应当符合双方的认知逻辑。因此表单设计时,需要解决「产品」和「用户」2个方面的问题:
✦ 表单需要用户提供哪些信息,保证信息的正常流转和业务的完整
✦ 用户如何理解这些信息,如何更好地帮助用户完成表单填写
尤其是面对复杂表单,需要从这两方面寻找到突破口。
✦ 在业务层面,设计师需要探究用户的实际需求,反思表单项是否必要,从而减少不必要的选项,提高用户效率。
✦ 同时在设计层面,还需要基于用户认知习惯,通过合理的信息组织、交互形式帮助用户完成表单任务。
复杂表单通常包含多种业务场景,并且与其他业务存在关联和嵌套,导致表单内容信息量较大。我们需要通过「删除」、「组织」、「隐藏」、「转移」4个交互设计原则,让表单页面更加简单、有效。
前几年,我们在银行或者移动营业厅开通一些新业务时,都会填写表单,通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2~3项,业务人员会特意勾选出来给客户,其余的都是非必填项,或者是业务人员填写的。
线上表单设计时,没有专门的业务人员指导,用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量,降低用户的认知负荷。
最近在做一个表单的优化,业务方要求增加“入参”、“出参”两个表格项,说是用户会看。与用户沟通后,反馈也说“会看一下”。但是在深度挖掘用户场景后,发现用户确实会查看这个信息,只不过不是在当前环节查看,而是在结果项中查看。
所以我们最终去掉了这两个信息量较大的表格内容,从而让整个表单的信息量得到了明显的下降。因此面对复杂长表单,我们需要从需求入手,判断是否有必要让用户提供如此多的复杂信息。
当我们不得不面对复杂表单时,如果采用简单内容平铺,用户看到的是满屏的散点信息,造成信息识别困难,用户一时间难以找到填写思路,反而增加用户的心理负担。因此信息的层次性,对于复杂表单至关重要。
首先要从内容和视觉层面让复杂信息变得清晰、规整,更加符合用户的认知习惯。例如,可以利用分组标题、分割线、卡片,按照不同信息的类别、属性和相关性进行区块划分。
根据不同的布局和交互,主要有以下4种表单设计模式。
表单分组后,可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单,这种布局方式下,用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。
1)平铺表单
2)卡片表单
因此顺序表单更多地用在业务信息比较简单的场景中。
为了解决长表单的定位效率问题,可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。
根据锚点的布局,可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说,锚点表单是顺序表单的优化版本。
如果长表单内容没有依赖关系,还可以将表单拆分为几个相互独立的标签内容,这就是标签表单。
不过标签表单更强调内容的并列关系,常用于配置表单中,例如 MAC 或者 Windows 系统的配置弹窗。标签表单在全新表单中应用较少。
因为标签表单容易造成内容遗漏,并且无法告知用户哪些标签已经填写,哪些标签未填写,或者无法清晰地展示校验信息。来回切换标签查看信息,也会影响效率,因此主要用于用户有目的的配置行为中。
步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来,形成一个完整的业务闭环。例如阿里云的云服务器订单流程,或者一些开户流程等。
步骤表单有几个特点:
理论上来说,步骤表单有明显的操作顺序,用户需要按照节点完成内容填写,因此不会产生信息遗漏。当然也可以根据实际的业务场景,设置选填节点。但是总得来说,步骤表单更强调的是顺序操作。
对于复杂业务,步骤表单可以将分散在不同页面中的独立业务串联起来,在一定程度上具备新人教学功能,帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转,从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。
由于步骤表单存在正向和逆向操作,因此设计时还需要考虑清楚逆向操作的设计逻辑。例如:
✦ 当用户想要修改前面步骤信息时,除了逐步返回,是否可以步骤条直接跨节点修改?
✦ 用户中途退出表单后,重启时是从第一步开始,还是直接从未填写的步骤开始呢?
✦ 用户如果完成了步骤条表单填写,想要二次修改时,是用普通表单,还是仍然使用步骤表单形式呢?
步骤表单可以分拆信息,化整为零。但是信息节点也不能过多,否则同样会影响用户的操作效率。所以要减少不必要的流程节点。
最近在做设计时,发现步骤表单最后一步是内容预览。通过用户调研发现,部分用户会谨慎地预览前面4步填写的内容。而另一部分用户则认为,刚填写了内容不需要预览,强制预览的设计并不友好。该如何平衡设计呢?
最终我们选择了将预览节点取消,将预览功能调整到第4步,采用「预览」按钮的形式。既满足了部分用户预览的需要,另一部分用户也可以不做预览,直接提交申请。
所以步骤表单过程中的节点具有一定的强制性,需要谨慎对待,保证节点的合理有效。
表单实际上是任务信息的集合,为了具有更高的适配性,内容通常是多种场景的集合。而场景有高频、低频区分,对于高频信息需要优先展示,便于提高用户的填写效率;对于低频场景,可以隐藏弱化展示,从而降低整个表单的复杂度。
例如我们常见的「高级配置」,通常在表单的底部默认收起展示。
复杂表单中信息会出现多级信息共存的场景。这种场景下,复杂表单默认展示当前选项对应的子内容,隐藏其他选项的内容,从而提高信息的指向性。
3、合理的组件形式
比较典型的就是单选和下拉选择器如何选择。有人为了强调效率,一味地追求单选按钮平铺展示,认为单选更加直观,用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择,反而增加了整个页面的信息量。
所以单选框更多用在备选项较少的场景,如果备选项较多,建议优先采用下拉选择器,隐藏备选项。
在表单设计时,可以将部分二级信息转移到弹窗、抽屉中,利用浮层空间拓展业务内容,根据用户操作逐级加载出来。从而减少表单的信息量。
例如下图中,没有将「所有配送区域及运费」直接展示出来供用户选择,而是放在了弹窗中,表单中只呈现最后的选择结果。既简化了表单的内容,又让选择结果更加突出,方便用户的查看和校验。
现在很多浏览器都增加了密码存储功能,减少用户记忆成本。而在电商购物网站可以设定默认的收货地址。系统自动读取调用,从而减少用户的输入操作。
现在越来越多的网站支持「手机短信验证码」免密注册登录方式,或者第三方登录方式,或者手机端扫码登录。将原有的表单填写转变为系统行为,从而降低用户的行为成本。
好了,以上就是我总结的表单设计的内容~
重复一遍:
✦ 删除,实现表单轻量化
✦ 组织,让表单更加有层次
✦ 隐藏,让表单更加灵活
✦ 转移,扩展表单的异步空间
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。
作者:腾讯ISUX团队 来源:子牧先生
分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
你一定也发现了,在这个时代下只要处在同一赛道的产品,大多数免不了日趋同质化,不论是功能还是形式、内容还是算法。就拿内容型产品来举例:去掉颜色,以下四个产品的首页,你能分得清谁是谁吗?
虽然可以做品牌差异化,但很多产品在招牌打响前,也会经历相当漫长的一段成长期。而在大家都卷的分不清谁是谁的时候,通过趣味性来建立情感链接倒是一个独辟蹊径的狠招。
之前在团队有幸负责过一次产品趣味性的探索,虽未全部落地,但沉淀了不少经验。今天,我将这些经验以文章的方式分享给你,希望对你有所启发。
为什么产品需要趣味性
1.符合本能需求
马斯洛的“需求层次理论”(Hierarchy of Needs)你一定听过。这个理论提出人类的需求状态是持续不断的,一段时间内,个人的动机或许可以获得暂时性的满足。但从人的成长角度来看,人类的需求永远不会止步于一个阶段。类似的还有亚伦·瓦尔特基于此提出的需求层次理论——有用的、可靠的、可用的、愉悦的。在满足了温饱阶段后,自然会需要情感的满足。
尤其现在这个相对严峻、内卷成风的时代下,大家都渴望在上了一天班之后,自己用的产品可以给自己解压,而不只是个单纯的冷血工具。
2.影响用户行为
产品传达趣味性的信息,那么这些信息便更容易被用户接受、甚至激发兴趣。正如用户关系和精准化运营的先驱——史蒂文·贝莱格姆的那句话:“趣味是设计产品中最人类化,最直接,最能引起人们兴趣的因素。”
根据艾达模型这个经典理论,一旦用户对某件事产生兴趣后,则更容易促成他的决策、乃至最后行为的发生。毕竟我们绝大多数的决策并非源自理性。
另外,《疯传》这本书提及过一个重要的概念:情绪唤醒。当情绪唤醒度较高时,往往会更容易激发用户的分享行为(比如愉悦、惊喜这样的正面情绪,当然也会包括愤怒、恐惧这样的负面情绪)。而产品所呈现的趣味性,很大程度上更容易引发用户的高唤醒情绪,从而主动采取一些产品希望他实施的行为。
3.缓解负面情绪
使用一款产品的过程中,必然会出现不够正向的反馈,比如404、断网、填写格式错误、输入隐私信息等等。一旦超出了用户的容忍能力,很容易造成行为中断甚至流失。
但此时如果通过一种趣味性的方式呈现,很大程度上可以缓解用户的负面情绪。
比如readme的登录页面,当你输入密码时,猫头鹰捂住双眼,很好得缓解了用户的不安全感。再比如饿了么,恶劣天气下会实时记录当前的天气状态,通过同理心的触发也可以缓解用户等待时产生的焦虑。
4.实现情感链接
对应诺曼在《情感化设计》中的「反思层」,通过品牌差异、独有内涵等方式来唤起用户深层的记忆和情感,产生情感共鸣,从而形成认知,建立起深厚的情感链接,以让用户越来越忠实于产品。此时产品作用更多的是作为一个承担情感的载体。
我们旅游时经常会购买一些貌似没什么实用性的纪念品,明信片、木雕、徽章等等,可能最多只能放在房间当装饰。但是纪念品的关键意义,在于承载着旅游时的记忆。类似的还有单机游戏发售时,除了标准版外,往往会同步发售包含手办、美术设定集等物品的豪华版,同样用来承载玩家的情怀。
最典型的例子,就是Google的Doodle设计,在不同的节日、纪念日、或者缅怀一些先驱、艺术家时,会投入很高的成本起设计各种趣味性的插画logo,丰富有趣,而且很多时候可以支持互动游戏。比如18年的万圣节,就做了一个有趣的多人对战的小游戏。
Doodle不仅是Google文化、价值观的象征,也通过这种趣味性的创意让用户实现更深层次的情感交流,建立情感纽带并增加粘性,不会轻易得流失到其他替代品中。
趣味性是什么
关于这个概念,有三条相对客观专业的说法。
德国古典哲学创始人康德《实用人类学》中,指出趣味性是人类由于受到外部环境的影响而对客观事物产生的直接的感性反应,不具有普遍性和必然性。通俗来讲是人们对身边的事物感到新奇、有趣、有意思,从而心理产生愉悦的变化。
另外,康德在《判断力批判》也指出,趣味是指主体以积极主动的姿态,在超功利的层次上对某一对象表现出喜爱和愉悦的情绪状态。
《汉语词典》将趣味释义为:使人感到愉快,能引起兴趣的特性。
看似各不相同,但根据这三个概念提炼下,可以发现他们都是在融入一种正向的情绪加以解释。
那么,趣味性背后的情绪到底是什么?
趣味性背后的情绪
情绪这东西千变万化,为了避免主观臆断的不准确,我搜罗了关于情绪的研究资料,目前相对权威的有三个:plutchik情绪轮、日本感性工学、诺曼的三层理论。
后两者未对情绪进行指标的定义,所以这里只聚焦在情绪轮上。
情绪轮由罗伯特·普洛特契克开创,这个理论指出人类的基本情绪一共由8种,生气、厌恶、恐惧、悲伤、期待、愉悦、意外和信任。撇去那些负面情绪,能够符合趣味性带来的情绪基本就三种:愉悦、期待和意外。
为了为产品所用,就需要提炼出更具象的特征。下面,我通过脑暴的方式对每类情绪进行发散联想。
联想了大量可以引发愉悦情绪的事物,比如可爱的猫猫、各类好玩的表情包、毛绒玩具、影视作品里那些会突然说话的动物、解压神器等等。
我发现这些事物,一般具备了以下特征:
1.会给予我们即时反馈;
2.拟人化,比如带有人类才有的表情,或者是人类的动作语言;
3.柔软的、毛茸茸的、圆润的、有温度的;
4.会动的、解压的
联想了大量可以引发期待情绪的事物,比如被买爆的泡泡玛特盲盒,商家售卖的福袋,各种诸如掷骰子、老虎机的随机性游戏,各类抽奖活动,一些游戏开局roll属性点的环节(比如金2、河洛等游戏,当年玩的时候我惊讶得发现我居然能roll上一整天)
这些事物大致会带有这些特征:
1.未知的、神秘的;
2.满足人类的好奇心的;
3.对结果能满怀希望的;
4.随机的正向奖赏;
5.只需要一步简单到发指的操作(打开容器、拉动拉杆、点击按钮等等),不需要任何的行动门槛,也没有等待时间
比如《设计中的设计》这本书中提到的出入境的印章案例、一兰拉面碗底的细节、电影或者游戏中突然出现的彩蛋、iPhone第一代的发布现场、突然发现的世外桃源、突袭的生日惊喜等等。
这些事物大致会带有这些特征:
1.超出原有预期的;
2.未提前告知的;
3.正向结果的;
4.产生共鸣的
那么,这些特征又该如何更具象得落地成策略,产品中又是如何利用这些策略,引导用户产生这些情绪的呢?
下面,我将基于这三类维度,并结合大量的大厂案例来为一步步你抽丝剥茧。
如何制造愉悦感
基于上面的挖掘,我发现能引发愉悦感的一个明显特征,就是拟人化,这个非常有意思。
克利福德·纳斯在《the man who lied to his laptop》这本书中提出过一个观点:人们对待电脑的方式,与我们在与他人交流时使用的社会规范是一致的。我们对电脑的反应,就好像它们是人类一样。
也正因此,很多原本没有生命体征的物体,一旦被赋予了拟人形象,就容易被大家所接纳、引发愉悦。
做一下细分的话,拟人化基本涵盖了三个方面:语言、形象和表情。
1.1拟人化的语言
人对于具体的拟人形象更容易产生情感,其中便包含拟人化的口吻。使用这种口吻与用户交流,而非冷冰冰的设备语言,就可以提升产品温度,引导用户对产品产生正向情感,关于这块我总结了两方面。
一方面,文案尽量得接地气、轻松。
拿京东这款产品举例,文案从口吻上都会采用一种很轻松、接地气的拟人语气,来拉近和用户间的距离。比如在引导词后加入“哦~”“~”这种轻松的语气词。
另外,「京东问答」版块的引导词:传统产品是“添加问答”,是不是平平无奇。但京东使用了“我来助你一臂之力~”
QQ浏览器的评论暗提示,也不是传统的“写评论”“输入评论”,而是像日常聊天那样“我来说两句”,非常接地气、生活化。知乎直接套用了流行语,诙谐的同时引导用户注意言论。
另一方面,人类富有情绪变化,所以一旦用户触发了某个正面/负面行为,就可以给与情绪反馈。
在用户完成商品评价后,京东不仅仅是很传统得反馈“评价成功”,而是又加入了“感谢您!”的感谢词。看似加了三个字,但行动过后的正向感激反馈,和我们日常生活中受到正向反馈一样,被唤起正向的愉悦情绪。并愿意继续这个行为。
知乎的圈子业务,在用户完成签到后,反馈完成的基础上,使用了正向的情感反馈“ 我就知道你会再来看我”,仿佛是一位关系不错的老朋友,来唤起用户正向情绪。
另外,知乎在改版后,回答收到赞也不仅仅是“点赞成功”这类冷冰冰的机器语言,而是“已收到你的喜欢,谢谢!”并且配以作者头像,非常形象得传出对对方对我们的感谢反馈。这种正向反馈,相比”点赞成功“更有效得唤起正向情绪,形成正向激励。
当然,用户的消极行为也可以产生情绪反馈。
比如现在很多产品的取关反馈,不是传统的“确认”“取消”,而是用“残忍取关”和“给个机会”这种融入情感的文案来做挽留,就好像真的有个活生生的人,在被你否定后反馈给你的情绪,请求你再给个机会。有趣的同时一定程度上也可以唤醒用户的同情。(虽然这种做法过于业务导向,且有绑架用户的嫌疑)
人对于具体的拟人形象更容易产生情感。因此,树立一个拟人化的品牌形象(也就是我们常说的IP),可以使用户对产品快速建立情感联系,也可以强化品牌感知。比如优酷的猴子、高德地图的老鹰、钉钉的燕子、linefriends等等。
世界杯的吉祥物也是同理,每一届的吉祥物必定会融入拟人化的特征,凭着亲切、可爱的形象和全世界的观众一起热情互动。
说到产品,以京东的这只狗子为例,兜底页、缺省页、启动页,都做了狗这个拟人形象的贯穿。
如果你记得没错的话,形象改版之前这只狗还是四脚坐地上的,但改版后就两脚着地了。这同样是通过更拟人的形象来赋予「人格」,以此提升愉悦感,拉近距离。
再比如夸克,它甚至单独新增了底tab入口,通过3d品牌形象,实现与用户的智能交流。另外,卡片和语音搜索都做了形象贯穿,后者还使用了形象的眼睛,来通过眼睛的变化进行情感交流。
一段文字在加入了表情后,我们就能迅速了解到对方的情绪(比如我们日常的聊天)。因此表情这一招,也可以用以加深用户与产品的情感交流。
它可以和语音、形象灵活结合使用。通过全面的拟人化,来大幅提升用户对产品的形象感知,促进用户情感的产生、加深用户和产品的情感链接。
比如用语言输入,当系统未识别清楚时,传统的方案可能是一个错误图标加上「未识别声音,请再试一遍」的文案,但夸克中则使用了品牌形象的双眼来传达失落的表情,并结合了拟人化的语言。
同样做法的还有百度的未开麦提示、段子头图,快速传达产品的情绪,和用户情感交流。
另外,闲鱼设置昵称时,正在输入时、以及超出了限定字数,右侧的形象表情也会发生变化。
除了拟人化能引发愉悦外,还有一个很容易被忽略的要素同样能起到作用——动画反馈。
提起动画的作用,我们更多人首先想到的可能是强引导、注意力吸引,但动画同样能触发用户愉悦。比如当动画更加贴近现实,或者结合拟人化的特征时。
最典型的例子,就是苹果appstore从卡片到详情页的转场过渡,点按的预备动作、卡片的放大展开、缓出的曲线、转场完成的惯性等等,都很贴近现实物理世界的运动规律。而这种自然的丝滑也更能引发用户的愉悦。
比如知乎的加载动画,结合了拟人化的特征,让这个过程变得格外有趣。刘看山奋笔疾书的动作也很符合知乎这款产品的定位。
如何制造期待感
根据我们对期待感的脑暴,发现能触发这种情绪最典型的特征,就是随机性。
在产品中,则可以通过随机给予用户有价值的内容来引发用户的关注。结果的不确定使过程充满神秘,这种状态让用户兴奋和满怀期待,不会轻易离开。
比如网易新闻在进行新闻加载的操作时,会在加载动画上加入一个随机的小贴士。内容大致有三类:黄历、名言和一句话新闻。而且这些内容完全是随机出现,这种刷新过程好像在开盲盒,你无法预知会给你什么内容,非常有趣。而且它们入口深,不干扰;内容对用户也具有价值。
同样的还有丁香医生。在首页每次下来刷新后,都会出现不一样的健康类的小贴士。随机性很强,富有趣味。而且可以很好得满足求知欲。
雪球的个人页上,上划时也会随机给一条关于投资、市场的名言和网友的热门观点。
把现实生活中的游戏搬到了手机,同样能激发用户的好奇和期待。比如微信读书的翻牌子、摇一摇、老虎机。还有天猫的翻牌子。
如何制造惊喜感
格雷戈里·伯恩斯曾做个关于脑部区域的研究,发现大脑不仅探寻未知,而且实际上还渴望未知。相比那些已知的日常惯例,新鲜新颖的事物更容易引人注意。所以提供一些以往没有过的、出乎意料的事物或互动,不但能引起注意力,而且也会带来惊喜感。
产品中的惊喜感设计,可以说是使用瞬间能够触达我们内心的一种短暂性愉悦,一个体验的峰值。
根据对惊喜感的挖掘,一个典型的特征就是超出预期,并且未提前预料。
比如Figma使用过程中,团队成员和你同时长按鼠标,并且靠在一起后,就可与触发击掌的动画彩蛋,非常有意思。
比如京东在五星好评后,会放烟花庆祝。
比如很多内容型产品,在详情页长按点赞按钮后,会触发全屏的「爆赞」动画。
再比如用户生日当天,通过启动页、弹窗等场景送上生日祝福等等。
这些能够超出用户预期的细节,即便多么细枝末节、出现频率多低,但只要能够被触发,都可能因为惊喜感而生成情绪峰值,加深用户和产品的情感链接。
最后
以上,便是趣味性背后的情绪挖掘和案例讲解。
作为设计师,我们在工作中总是强调以用户为中心,通过不断的调研、跟访、可用性测试来了解、分类用户,但更多的结果可能只是让产品不断得贴合用户的心智、符合预期。但如何增加粘度、建立深层链接,就需要通过趣味性这种情感化表达方式,来为用户制造愉悦、期待甚至惊喜。
正像诺曼在「情感与设计」中说的那样,每个产品都需要令人更放松、更愉悦的设计,以此来增强产品的适用性。
希望这篇文章能对你有所启发。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UX/UI设计师在日常工作中是否遇到以下疑问:
- 方案由业务、产品主导,设计师没有发挥空间怎么办?
- 如何从设计视角出发梳理体验优化建议?
- 如何向各方证明你的优化建议是有价值的?
要回答以上问题,首先得理解设计价值究竟为何。
设计≠艺术,设计从诞生之初就是为“解决问题”而存在。
在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。
下面详细解读【设计价值】与【业务/用户/产品】三方的关系:
商业设计本质上服务于业务,因此判断设计价值几何的关键是:是否真正地帮助业务解决问题,助力业务目标达成。换而言之,设计价值就是设计师通过设计思维/策略/方法,直接或间接帮助业务创造的那部分价值。
设计不能脱离业务自嗨,不能“为了强调存在而存在”。 有效设计在于对业务诉求的精准满足。我们构思设计方案时,脑海中始终要回答:
- 实现了哪些业务目标
- 解决了哪些业务问题
- 创造了哪些业务价值
业务价值最直接的来源是用户价值的变现,因此,想要实现业务价值≈要服务好用户,这为设计价值的实现提供了有效抓手:设计师可以通过洞察用户需求,完善产品功能、优化操作体验的方式助力业务目标达成。
P.S.用户价值=产品给目标用户带来的核心价值,即:帮助用户解决了什么问题,满足了什么需求,提供了什么服务。
对于资深设计师来说,产品PRD不一定是最优解,它更像是提供了解决问题的第二参考视角,产品侧在理解业务目标的基础之上,从实现角度产出了初步解决方案,为设计师打开思路。
不同阶段设计师在面对同一份PRD时,有如下处理方式:
- 初级:不知其然,表象复刻——直接按照PRD方案输出相应设计;
- 中级:知其然,表象完善——对PRD方案进行查漏补缺,提出体验层优化建议;
- 高级:知其所以然,透过表象看本质——综合业务/产品目标,挖掘用户原始需求,提出当下最优解。
当设计师拿到 BRD & PRD 后,如何综合多维视角制定设计目标和策略?下面列举了笔者在日常工作中重点关注的维度。
业务会从商业角度提供清晰定义产品边界和价值变现模型,从BRD中可以提取以下重点信息:
- 产品/需求的目标用户类型和特定场景范围;
- 给用户带来的核心价值(帮助用户解决了什么问题/满足了什么诉求);
- 用户价值变现模型和策略(如何通过满足诉求进而实现用户价值变现);
- 业务价值可量化指标
我们需要注意一下两点:
- 关注北极星指标,比如某些场景侧重“留存”,有些侧重“转化”,这会影响设计侧重;
- 在产品发展初期,了解业务线未来的布局和规划,可以帮助我们把握设阶段性计节奏。
用户是一切需求的源头,仅从业务视角出发定义需求是无本之木。因此当设计师碰到业务需求不明确,或者对产品方案存疑时,最好的办法就是回归用户视角。用户需求挖掘一方面可以丰富和完善业务目标,另一方面也帮助我们审视当前业务需求是否与用户诉求吻合。通过用户分析我们可以得到:
- 目标用户特征;
- 典型场景下核心诉求、任务和关键行为;
- 关键行为可量化指标
P.S.为了挖掘多维度用户诉求,我们可以根据具体场景将用户细分,如:
- 角色:如B端/C端;
- 熟悉程度:小白/普通/专家;
- 客户价值:高价值/一般价值;
- 兴趣/偏好:价格敏感/XX控;
- 目标强弱:强目标/半目标/无目标;
- 阶段:获取-激活-留存-收益-推荐;
- 流程:开始前/进行中/结束后...
在业务主导的场景下,产品经理往往是需求的“第一经手人”,我们需要在PRD中捕捉到产品对业务需求的理解和转化策略。另外,产品视角也阐释了在落地实现层面的约束限制,特别是前台与中/后台的依赖关系。从 PRD 中可以获取以下重点信息:
- 产品目标和策略;
- 功能范围和核心流程;
- 中后台能力支持;
- 实现成本和风险点;
我们需要注意一下两点:
多数情况下,我们接到的需求是点状的,可能是某个子模块的子流程/功能,此时我们可以用更系统的视角向上追溯,定位模块所属能力矩阵,找到模块与模块之间的联系,这有利于精准把握需求,保证链路场景闭环,为后续由点到面驱动更大层面体验优化作准备;
很多功能不是“不该做”,而是当下“做不了”或“性价比低”,一些优化方案提出前,我们需要从产品角度考虑现有中后台能力支持、研发可行性、运营人力成本等,避免设计“空中楼阁”。
综合以上业务、用户和产品三个维度,我们更加精准推导设计目标。需要注意的是,设计不是万能的,大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现,我们只需关注可以通过设计手段参与、干预和落实的部分即可。一个设计目标的完整表述 = 通过【XX设计策略】帮助目标用户【实现XX价值/满足XX需求/解决XX问题】,以助力【XX业务目标/变现方式】达成。(在实际表达中可以适当精简)
确立明确的设计目标和策略后,下面进入设计实施和验证阶段,这里推荐两个基础的推导模型。
SKS模型,即策略(Strategy) → 影响因子(Key factor) → 解决方案(Solution)。设计目标中的策略是一切方案推导的源头,我们需要找到影响策略实现程度和效果的关键因素,将其视为可控变量,并以这些变量为切入点进行方案尝试,最终衍生多种解法。
比如:我们把提升Banner的点击率作为策略,那影响banner点击的影响因素可能是:形式是否新颖、配色是否亮眼、是否有动效引导、利益点是否突出、行动按钮是否吸引人点击等等,每一个影响因子都可以衍生出多种设计方案。
上文提到,设计手段通常是以间接方式助力用户价值实现,进而赋能业务目标达成。那如何量化设计价值呢?我们可以使用“GAM模型”,即设计目标(Goal) → 高价值行为(Action) → 衡量指标(Metric)。具体方法如下:
一个设计目标实现,一定是由链路中一个/多个高价值行为促成。比如用户在真正“下单”前,会访问商品详情页,浏览商品详情页信息,加购物车等。
用数据刻画和度量高价值行为的指标变化,进而度量设计方案的价值用数据刻画和度量高价值行为的指标变化,进而度量设计方案的价值。 我们可以尽量多维度拆解高价值行为和相应度量指标,维度越多,关联性越高,判断误差越小。
事有轻重缓急,不是所有的需求都需要走上述方法进行设计分析,要学会辨别重点的、有发展潜力的需求投入更多设计精力深入研究。后续笔者将通过具体的设计项目,详细阐述如何运用业务×产品×用户三重视角,推导改版目标和设计策略,敬请期待《「②实战篇」如何提升设计价值——2022京东APP频道广场V2.0改版探索》。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
讲到UX文案,大家可能并不陌生:一个按钮、一个弹窗的文案填充,我们几乎每天都要与他接触。但即便如此,大家对他的态度通常是得过且过的:“文案嘛,有了就行,看得懂不出错就好,没什么值得注意的”。
确实,作为设计师,我们关注交互流程、视觉呈现,但UX文案似乎从来不是我们的首要考虑;在很多时候,文案与我们的设计流程是分裂的:要不就是设计完成后再填入,要不甚至直接让产品经理来提供文案素材;文案撰写,好像从来没有被我们真正重视过。
但UX文案真的只是一个无足轻重的辅助位吗?
首先,先抛结论,UX文案并不是无足轻重,相反的,它是好的产品体验中不可或缺的一部分。并且随着时代的发展和新兴应用场景的涌现,它对于产品体验的重要性正直线拉升。
在我们还将UX文案看作一个可有可无的流程时,一些先进的企业就有远见的意识到了它的重要性:早在2017年的I/O谷歌年度开发者大会上,三位职业UX文案作家就向我们展示了UX文案如何切实地为谷歌带来了产品数据的提升:
在用户在搜索”酒店“相关内容时,谷歌将直白的文案 “预定房间” 改为了更贴合用户心智的 “查看房源情况”;这一小小的改动,带来了17%点击量提升。
随着UX文案的价值不断的被发掘,在海外,已经有越来越多的团队将UX文案写作作为一个细分的的独立专业来看待。例如,在国际最大的旅游电子商务公司之一Booking.com,曾在不到一年的时间里增加了40名UX文案岗位,达到了每5或6个设计师中就有一个UX文案设计师的夸张比例。
面对海外对于UX文案的重视度激增场面,我们心中可能不免疑惑:“不还是为页面配文而已吗?平常不起眼的工作,怎么现在就好像突然变特殊了呢?”。
存在这样的误解,是因为我们对UX文案的认知还停留在过去,始终认为它仅仅是一个辅助位,最多起到“锦上添花”的作用,并不能真正影响核心用户体验的好坏。
而实际上,与我们印象中的边缘形象不同,UX文案(UX Writing),也叫内容设计(Content Design),所涉及的知识横跨体验设计、内容策略、用户调研,是一个多元的、完整的设计学科;旨在基于同理心与专业沟通技巧,通过合适的文字信息,在产品使用过程中为用户提供愉悦的体验,远不只是“为按钮填词”这么简单。
而随着时代的发展,UX文案的覆盖范围、呈现方式以及工作流程等都已经发生了巨大的变化;站在设计师的角度,我们希望通过以下几个方面介绍UX文案与过去相比发生了哪些变化,来帮助大家消除对UX文案的刻板印象,重新认识它在我们设计中扮演的角色,并学会运用它为用户呈现出更加优秀的产品体验。
首先,如今的UX文案有着比之前更广阔的范畴:过去关于文字,如今关于语言。
以前,我们讲到UX文案,指代的可能只包含APP里的标题、按钮等静态文字;但如今,随着智能家居、智能车机等新兴领域对于语音交互能力展现出的强需求,以及类似喜马拉雅等播客产品的持续火热,UX文案已经慢慢跳出了文字的范围,有了更广阔的发挥空间。
想象一下,当你结束疲惫的一天回到家时,你的智能家居助手应该以怎样的语气向你问好?应该使用什么措辞能最精准地得知你的意图?这些动态的、无实体的语音内容,也逐渐成为UX写作要关注的重点内容。
简单说,如今所有用户和产品产生交流的场景,都可以划分于UX写作的范畴。得益于科技的发展,UX写作逐渐地更接近了自己最终的目标,慢慢跳出了静态页面的框架,得以真正的与用户产生有意义的、愉悦的语言的交流。
其次,UX文案与过去最显著的不同之一是:不再仅是为页面填充文本,更多的是根据信息主导页面。
以下面一个常见的对话框为例,仅有一个小小的对话框来承载超额的信息;如果根据之前的“填充页面”的观念,我们要做的其实很简单,就是根据行文规范删减、重新排列文字,试图把过量的内容塞进小小的容器。
这样得到的结果在视觉上看起来可读了一些,但似乎也不尽人意。
这就是典型的机械性的填充页面,信息的展现完全受制于已给页面的结构,实际上已经脱离了更好传递信息的初衷。
如果我们调转思路,试着真正从传递信息本身出发,就能很明显的发现,原来的对话框最大的问题不是文字长短,而是信息过载—强迫用户在有限的空间里一次性确认两类信息:更改时间和通知参会人。而在我们上面的方案里,这个问题并没有被解决。
当我们真正开始用信息主导页面,应该做的是将一页多个问题拆分为每页一个问题,分步响应用户,对冗杂的信息进行分解,以真正创造清晰有效的对话。
如果体验没有达到理想的效果,通常需要改进的是整个设计,而不单单是文字。我们需要逐渐去理解的是,页面在根本上是信息传达的媒介,一昧的修改文本来适应页面,反而是本末倒置的做法。
目前,UX文案通常仅需要保证基本的功能可用性;即使是已经有文案规范的团队,更多的也是将其作为辅助位,保证文案“有一致性,不出错”即可;对于品牌形象、差异化的诉求则基本一笔带过。
相较于UX文案,大家习惯用Icon的质感、品牌色的搭配等视觉的呈现去传递品牌声音,因为这样的效果简单直观,是可以直接被“看得见”的,这点无可厚非。
但随着语音交互的兴起,以及近年来轰轰烈烈的品牌去色化趋势,单纯的利用纯视觉的呈现来塑造品牌形象变得没那么万能了,与此同时,UX文案对于品牌形象的重要性也逐渐被发掘;我们发现,在很多时候,一句措辞得体的语音信息,或者是一句抓人眼球的标语(Slogan),就足以弥补视觉上品牌呈现的缺憾,甚至更能与用户产生共鸣。
这就需要UX文案在保证基本的可用性的基础上,更要考虑什么才是真正适合自己品牌的声音。
例如Google Earth 过去的一句经典的标语:“Hello, Earth”,这句标语完美的契合了Google Earth的品牌形象,它简洁正向,并且和产品名称之间有巧妙的双关,即代表了产品本身,也暗示了Google Earth带领用户去探索世界的功能定位。
仔细观察苹果、谷歌的产品,你就会发现从他们的UX文案除了保证了基本的一致性和可用性外,偶尔会隐藏一些小巧思,这些小巧思与他们的品牌形象相互呼应,能让用户在产品使用中潜移默化地对其品牌形象、产品价值观形成认知,而这样与产品体验本身结合的认知构成往往更加坚固,比传统的广告宣传更容易让人信服与认可。
随着UX文案越来越广阔的范畴,我们过去熟悉的工作方法已经并不完全匹配如今UX文案的目标了;因为它包括的已经不仅是单纯的文字内容,更多的还有文案之间的层级结构、什么时候出现这段文字,以及这段文案向用户传递了什么情感等等,这已经超出简单的行文规则所涵盖的了。
那么,我们怎么才能真的做好UX文案呢?
我们根据以往的项目经验,总结出了除了通用行文规则之外,三个在关键节点上可以做到的几件小事,希望帮助大家能找到真正适合、高效的设计方法,并打造出优秀的UX文案。
首先,最基本也是最重要的:在流程上,永远要尽早的考虑文案问题。
我们过去熟悉的设计步骤是:“先把产品设计好,将有文字的地方空出,最后再填充。”
这样带来的问题是:关键的体验问题直到最后期才会被注意到,留给UX文案的发挥空间十分有限,能做的只是为糟糕的体验贴上掩饰的创可贴,并不能真正避免糟糕体验为用户带来的伤害。
正如我们上面所说,UX文案不仅仅是填充文字,它的核心是在产品与用户之间创造合适、愉悦的对话,所涵盖的内容几乎横跨产品体验的每个流程。
因此,要想真正缔造好的UX文案,永远要尽早地参与到设计流程中,这样才能真正的找出体验的问题,并最大限度的发掘UX文案究竟可以为此做些什么,创造与用户真正有效的交流。
其次,在我们着手输出UX文案时,请尽量在脑海中模拟真实的对话场景。
这个方法来自于最近的全球开发者大会(WWDC22)上,苹果设计团队向大家分享的UX写作方法框架:“PACE”:Purpose(目的)、Anticipation(预判)、Context(环境)、Empathy(共情)。
其中,在Anticipation(预判)里提到了 “将UX文案想象成一种对话” 的概念,意思是在设计产品的过程中,应该把页面上的文字看作一个与用户的对话,而不只是一个静态的短语;这样能更好的帮助我们预判用户的诉求。
想象在这样的场景:当你的用户在周末的晚上打开手机,开始调节明早起床的闹钟时间;你会怎么设计这里的UX文案呢?
使用流程似乎很简单:打开闹钟app,调节明早闹钟时间,确认设置完成。
上述的交互没有问题,用户可以清晰的完成设置。但如果考虑到上面提到的 “想象成一种对话”,那这个流程就还有可改进的地方。
因为在一段有效的对话中,交流应该是有来有往的:其中的角色应该有时在聆听,有时在发言;而不应该仅仅一方是单方面的输出(在上述的场景里,仅仅是用户一股脑的对闹钟app进行信息输出,闹钟app只是单纯的服从命令,这不是一个正常对话的模式)。
让我们想象是自己在跟用户在交流,就能很容易地发现用户想传递的底层信息并不是 “我要调闹钟了 ”,而是 “好不容易到周末了,我明天要多睡一会”,能解读到这一层话外音,我们就成功利用“对话”预判了用户的目的。
打开ios的起床闹钟试一下,你会发现它比我们的基础流程多了一个贴心的询问 :“你要将此更改应用到这个定时中的所有周末吗?”;在这里,苹果实际上做了两层预判,第一层是预判绝大多数人的周末和工作日起床时间是不一样的,所以将复用的范围限定在了周末;第二层预判是在大多数情况下人们只能确认明天的起床时间,所以主选项是“仅更改下个闹钟”。
简单的一个改动,就把机械性服从命令的程序,变为一个有智慧、思想的助手。如果我们在每次输出文案时,都能试着想象真实的对话并剖析,可能就能逐渐把一个“可用的产品“变成“贴心的朋友”,真正地走进用户的内心。
最后,如果你还是觉得心里没谱,不确定是否输出了合适的文案,有一条被苹果和谷歌共同推荐的验证方法,简单粗暴但有效,那就是 “大声将你的文案念出来”。
就像我们刚刚反复强调的,UX写作其实就是与用户创造有效的交谈,那么最简单的验证方法就是真正说出来,将它真正变成一段对话,然后再去聆听,最直观的感受到你的语言听起来是否自然不生硬?是否有一些不易察觉的重复或语法错误等等?
大声地将你的文案念出来,如果能使你自己信服,相信也能使你的用户信服。
最后,读到这里,相信你已经对于UX文案有了一个全新的认识,并对如何做好它有了基本的概念。其实在日常工作中,每个产品对于UX文案的要求可能不尽相同,但重要的是作为设计师,我们能意识到他逐渐攀升的重要性并真正对他加以关注。引用苹果开发者大会上的一句话:UX写作其实就是始于对屏幕另一侧用户的好奇心,并真正怀着尊重和理解与其交流。只要能意识到这一点,相信大家都能呈现出真正有效的、令人愉悦的UX文案。
作者:腾讯ISUX
来源:人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前言
互联网瞬息万变,在产品不断更迭的过程中,我们经常说要保证产品设计的一致性和质量,提升产研链路的效率。但现实情况是:产研团队长期面对的是产品越来越复杂,体量越来越大,一个个复杂的产品下包含N个业务线,N个业务团队,甚至还有外部合作的业务,每个迭代都要面对数以百计的功能上线,经常容易出现各种相同但不一致的功能,上线质量参差不齐,执行者也容易陷入日复一日的需求海洋而没有更多精力去挖掘更有价值的事情。
所以如何解决团队效率和产品质量问题?我们的解法是抽象体系化的解决方案:设计模式化和代码化,设计从原子到全局进行统一和优化,并形成系统化的设计指导,由开发进行模式代码化,提供灵活可配置的规则。以此,设计有更系统化的设计原则,整体的统一性和体验有保障,设计和开发周期也可以缩减,甚至大部分日常需求可直接由产品对接开发直接上线。
1.1 什么是系统化解决方案?
大多数日常需求大多是从单点出发,当点变多变复杂了,就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象:从元素——组件——区块——页面——功能流程沉淀设计规则并代码化,来灵活提供拼装N个不同页面的机制,帮助团队更系统化的进行产品设计。从组成内容不难看出,解决方案是需要建立在基础组件基础上,与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。
解决方案是一套相对稳定的设计机制,所以在产品初期或团队建立初期,产品可能经常会调整的情况下,并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件,选择性的建立部分稳定且利用率高的解决方案,并持续发展,保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟,解决方案也应该随着一起成长,相互影响相互作用。
1)对产品页面(尤其是重点功能)进行盘点,划分页面类型:比如列表、表单、详情、dashboard;
2)对页面中的内容进行区块归类
3)对区块中的信息进行拆解
这三个过程下来,对于问题、规则、规律都会有一定的概念。以一个后台系统为例
1、页面大类主要是:列表、表单、详情。
2、其中列表的内容大致区块分为:页面标题区、列表操作、列表筛选、列表内容,到这个阶段已经可以发现,相同区块位置就存在不稳定,在后台系统中可能影响面不会非常大,但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。
3、不同区块的内容拆解,同样也会发现一些细节问题,比如筛选的样式、规则不一致,列表操作的方式、位置、样式、交互不一致等等
2.2、抽象、重组:从布局——区块——组件——设计规则
从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点:第一是如何通过设计规则来避免同样的问题产生,第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面,首先得有一个布局划分,不同的区块要放哪些内容,再到区块里的细节内容规则,从而抽象出由布局到区块的设计规则和可复用的组件。
以前面说的列表为例
1) 区块主要是4类,明显的问题是区块位置不稳定,所以在布局结构上,需要定义1-2个稳定的可配置的布局框架来适应不同的内容
2)不同区块梳理组成内容,内容细则
3)标记出可组件化的内容及规则
4)提炼整个过程中通用的设计规则,作为全局的指导。如:国际化、排版规则、超限规则、适配规则、文案规则等等。
通过布局——区块——组件——设计规则,可以灵活的进行页面拼搭
区分通用层和业务层,通用层落地到通用模板市场,利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性(如:业务主题、业务数据、业务拓展方案)的业务库来生产新页面。
目前群核设计团队建立了一套平台通用的解决方案,适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案,同样的思路也应用在不同体系的工具场景中。整体实践下来,产研效率提升近50%,甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升
三、解决方案的管理和发展
解决方案作为设计系统的一部分,与设计系统一同管理,业务设计师使用系统来输出,反馈问题或需求给系统,有系统设计师判断可行性,周期性的管理,及时更新并在内部互通,促进互相成长和发展。
解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容,业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别,则列入到通用库。
这些方法和思路也并不限制行业或产品类型,仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题,只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率,让产研团队有更多的精力和时间投入更有价值的事情。
作者:酷家乐UED
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作为设计师,设计是我们的专业,也是我们用来解决商业问题的工具。
我们过去也许都曾思考过类似设计的价值、意义或是本质之类的问题。思考这类问题在某种意义上或许都是为了当我们遇到困难、冲突、低谷或是不确定性的时候给自己找一些能够坚持下去的理由。
设计师在从业的不同阶段,对设计的理解不同。从追求工具技能到表现力、方法论、风格到影响行业甚至社会审美意识等等。不断的锤炼之后,对设计意义也会有不同理解。
我们奉为的大师,都擅长用自己的知识架构定义对设计的理解。
保罗·兰德就是一位我们公认的设计大师、艺术家。他是当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一。他最出名的企业标志设计,包括IBM,UPS,ABC标志以及为史蒂夫·乔布斯设计NeXT.那段经典桥段。
去研究这些前辈们如何看待设计、理解设计以及如何与设计相处一生,是另一种设计哲学的思辨。
保罗·兰德说:
“设计是一种行为,是想象力驰骋的过程和产物。”
设计表现可能看似是简单的组装、排序或是美化的过程,但设计的过程也是赋予信息意义的过程。不断的简化、厘清、修饰甚至可能去说服、去取悦过后,设计就是把散文变成诗歌的过程。
设计师是孤独的,大部分时候他们是一个人在战斗。
设计是个人行为,即便在设计成熟度较高的国家、企业或是大型团队,设计师仍需在一线才能真正掌控在这场战斗中可能遇到的极其细节的变化和给人传达的感受。
设计需要冲突来加深传达的“戏剧性”。但设计过程也面临种种冲突。这是设计的商业价值与艺术价值平衡的过程。正是因为这种关心很难平衡,才会出现雇主与设计师之间的冲突。
企业的目标是达到商业、经济、政治甚至社会性目的。对设计师而言,设计是一种创造和实验行为。通过这种行为来平衡之前的目标。
设计品质最终决定设计师与核心决策者之间的关系。关心越是紧密,设计的产出就越有可能出彩。这其实并不难理解,对设计完成度有高追求的企业,CEO也大多都跟设计团队或是设计咨询公司有较为紧密的往来。就比如苹果的乔布斯与乔纳森是我们都公认的CEO与设计师高紧密度关系的典范。
当今社会,市面上依然存在太多糟糕的设计。
一来,核心的决策者对设计专业的理解度不够。
二来,很多决策依赖于市场调研,既得利益的权重大于长远利益。
再就是我们回避不开的话题,设计师在某种意义上话语权不够。
抉择者很多时候不了解或是存在对某类元素特定的喜好偏见,他们有评价权,但却缺乏对设计专业知识的储备。所以就会普遍出现外行指导内行的情况。过往(现在好一些),他们将设计师看做一套绘图工具,一个合作供应商而不是一个业务团队里重要的组成部门。
体系完整的企业可能会引入市场调研团队,调研团队为营销提供定位信息,设计师来解读和演绎那些信息。如果调研团队能理解设计师的工作过程与其产生共鸣,就有可能促成正确决策甚至产生惊喜的创意作品。
但很多时候,我们听到了太多这样的回复:
我喜欢它;
我不喜欢它;
它太简单了;
它太复杂了;
它让我想起某某...
常常一句“我不喜欢”就可以终结任何设计作品。
就像当初一位IBM的主管第一次看到这个条纹logo时嘲弄到说“这东西让我想起格鲁吉亚的锁链囚犯”。
每个人所能感知的信息都不尽相同。
有人既看不到logo的意义,也看不到它的功能。也正因为过于用喜好而不是专业去评判,才让糟糕的设计一直留存于我们的世界。而大众对糟糕的设计要比对好设计更加熟悉,于是大家习惯于选择不好的设计,因为和他们朝夕相处。
新事物让人感受到威胁,而旧事物让人安心。
要判断一个设计的内在价值,决定性因素不是使用期,而是它所设定的“品质预期”。这是设计师的价值,也是设计师该练就的“知觉”。
何为知觉?
我们可以把知觉暂定为“瞬间的洞悉”。设计师在做设计决策的时候大部分都是依赖过往的知识储备以及惯性技能。不断的尝试,都是通过瞬间对各方向的可能性判断。
本能、预感、冲动、洞悉之后的综合“洞悉”,这就是知觉。
说到logo,我们常把logo当成品牌价值传递的重要符号。
它是一面旗帜、一个签名、一个路标。大部分时候,雇主期待logo能描述一个行业,但历史上最成功的logo都没能做到。苹果、劳斯莱斯、可口可乐、或是IBM等等...不可否认的是它们都是历史上最成功的logo,但它们却无法做到能传递它们的行业属性。因为logo远不如它所代表的产品重要,它所代表的比它看起来的样子更重要。
因为只有logo与它所属的公司、产品、服务联系起来时,它才具备真正的意义。一流的产品和公司的logo传递出一流的形象。反之一个公司如果是二流的,那么它的logo最终也会被归为二流。
logo首先要告诉人们“是谁”,而不是“是什么”。这才是它最基础且最重要的功能。它所扮演的角色就是“指示”。“简洁”是达成指示的手段。所以设计过程中的特点、好记以及清楚都是需要设计师在打磨细节前首先要做好的决策。一个复杂、挑剔、模糊的设计潜藏着自我毁灭性的风险。
“好的设计带来好的生意”。但不可否认,即使不好的设计,也可能带来好的生意(比如下图)。如果这样,还需要好的设计么?
好的设计可以增添额外的附加价值,很多时候,也许光看着它就能给人们带来快乐。它们更尊重感官,并通过这种友好的感官体验,给企业带来回报。人们更容易记得精美而不是一团糟的形象。它折射出一个考虑周全,目标明确的企业,反映了它的产品或者服务的品质。
所以,这个世界需要好的设计,设计师要做的就是用设计向世界传递一些更有价值的观点。这是设计师的工作,也是设计该有的意义。
来源:站酷 作者:大宝频道
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。
分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在百度百科的定义中,阻力是物体在流体中相对运动所产生与运动方向相反的力。自然界中存在许多类型的阻力,比如空气阻力、水流阻力,各种各样的生物因此进化出相应的身体特征去减少阻力。如下图所示,拥有流线型外形的海豚掌握独特的减少湍流摩擦阻力的游泳方法,这使其游速在某些条件下可以达到每小时 70-100km,远超现代潜艇的航速。
人类为了摆脱自然界设计的阻力,做了许许多多的努力。采用纤维模仿鲨鱼皮肤结构的鲨鱼皮泳衣能够降低 30% 的水阻,提高人类游泳速度。汽车的流线型设计减小涡旋作用或避免涡旋的形成大大地减低了空气对其的阻力。
在人类社会,人为设计的阻力也无时无刻不在。为了公共安全设立的安检、为了交通安全而严格控制不同区域的最高车速、为了社会安定而设立的法律,诸如此类的阻力都无时无刻规范着人类的行为。
类似地,对于互联网产品,用户在使用时也会被刻意地或非刻意地设计出的阻力所影响,这些阻力会阻碍用户完成目标。
在认知心理学中,我们接受外部世界的刺激之后做出反应的过程中,涉及到我们如何感知、学习、推理、记忆,以及如何把意图转化为行为。人类数十万年的进化过程中,对于感知、学习、推理、记忆的神经结构已经初步进化形成,大多数的人保持着相似的认知能力和认知缺陷。用户在使用产品时感受到的阻力往往来自于设计师未能充分了解用户的认知能力,从而设计出容易导致用户犯下认知性错误的产品。以下常见的人类的认知特点影响了我们感知和获取信息的过程。
对于一件新事物,我们感知它的方式通常受到三个因素影响:过往的经验、周围的环境、当下的目标。我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦产品界面中与用户的经验预期相悖,就会产生阻力。
面对一个我们从未使用过的机器设备时,我们很少愿意耐心阅读完它的说明书再去使用它,而是自信满满的希望通过简单的摆弄和熟悉就能够了解它的使用方法。《点石成金:访客至上的Web和移动可用性设计秘笈》一书中的第一条可用性原则就是“Don't let me think(不要让我思考)”,作者认为设计者在设计一个界面时,最好能够做到让界面清晰易懂、一目了然,让用户能够不必过多的思考就能够使用它,帮助用户跨越思考过程,让用户能够轻松做出复杂的决策,减少认知压力。
我们可能都经历过心流状态,当我们在极度专注地做某件事时完全沉浸其中并且非常高效,但如果意外地被打扰,会让我们很烦躁。
有关任务执行的研究文献中就曾经提到过:中断会导致错误,而且人们容易遗忘之前的位置或状态。当一个任务打断了另外一个,重新启动需要的时间会让每个任务都变慢。
打扰我们的事情可能是工作时突然的一声噪声,也可能是在使用软件时冗余的弹窗、过多的页面跳转、无意的误操作等等。界面中过多的干扰会打断用户的心流,造成用户的使用阻力。
认知负荷理论(Cognitive Load Theory)是在 20 世纪 80 年代由澳大利亚教育学家 J.Sweller 提出,由于对人类学习认知和教学指导提供了新的理论框架,该理论在教育领域成为重要的心理学指导理论,在交互设计领域也存在着借鉴意义,理论的主要内容如下:
认知负荷是指外部信息进入个体短期记忆后中后所需要的注意力资源和记忆容量,被分类为内在认知负荷、外部认知负荷以及相关认知负荷(如下图)。当任务需要消耗的注意力和记忆容量超出学习者的极限时,就会导致认知超负荷,超出的部分将不会被学习者有效获取。
不同的呈现形式形成的外部认知负荷是不同的,一般来说,文字>图式>视听。因此,为了避免认知超负荷给用户带来的使用阻力,我们应该设法简化信息来降低内在认知负荷,通过更合理的信息可视化形式和信息架构构建降低外部认知负荷。
如下图,基于上述的用户的认知能力分析,合理的降低阻力,能够让用户在使用产品时效率更高,成本更低。在提高交互效率方面我们可以通过减少操作步骤、提高传达效率、减少页面跳转来达到目的。在降低交互成本方面,我们可以通过降低操作难度、减少用户思考来实现,同时通过降低认知负荷减少用户的认知负担。阻力并不是越小越好,在某些场景下,我们需要增加阻力和提高用户的使用成本,进而提升用户体验或达成产品目标。通过提高防错能力、提供安全感和营造仪式感来优化体验。通过筛选用户和内容把控社区生态。通过功能引导和歧视性策略来迎合商业目的。
类似于一个倒金字塔结构,交互流程中的每一个步骤都伴随着流失。通过以下减少操作步骤的方法,可以降低用户行为路径中的阻力。
不同的控件有着不同的应用场景,控件的选用不当会形成多余的操作步骤。我们需要深入了解每个控件的属性和应用场景才能够做到灵活运用。
举一个例子,在微信的朋友圈发布页中编辑内容后点击取消后,弹出警告框显示“不保留”和“保留”按钮,但是考虑到用户可能会误操作点击取消按钮的场景,此处应增加一个按钮让用户回到编辑状态,否则不管用户选择哪个选项都会退出发布页重新进入,从而使用户多了一步操作。下厨房的发布页就考虑到了这个问题,使用了默认有返回操作的上拉菜单控件作为提示方式,即使在误操作场景下也不会增加操作步骤。
控件方面这里就不展开讲了,大家可以通过阅读 iOS 人机交互指南和安卓 Material Design 规范来深入学习。
任务都存在其复杂性,当我们无法简化它时,可以考虑将复杂性移交给系统,使其代替用户操作。
比如我们可以利用用户已经在产品中填写过的信息来帮助用户填写相关信息。例如通过身份证号码自动识别出用户的生日和性别,自动为用户填充。
预判用户行为分为两种方式,第一种是在用户操作前,预判可能发生的用户行为,以建议的形式为用户提供选择,缩短用户行为路径。
比如拍摄照片后,打开微信聊天页面,微信会以气泡的形式询问用户是否要发送图片,如下图。
第二种是由于用户的认知错误进行了非目标操作时,系统提前识别引导用户进入正确的流程并完成任务。
比如支付宝聊天界面中,很多用户误以为可以直接通过输入框输入金额数后点击发送就可以转账,但实际上只会发出一条消息。支付宝贴心地在用户输入数字后外显转账功能,从而避免了用户的错误操作,如下图。
不合理的信息架构和流程设计会增加用户的操作步骤。比如最新 iOS13 的信息应用,将 iOS12 原有的使用分段控件整合信息的方式改为了 iOS13 的列表形式,导致从一级页面(A)进入到二级页面(B或C)后,如果想切换信息列表还需要返回到一级页面再次选择,增加了一步操作。iOS13 的这种改动可能考虑到用户切换信息列表的频率没有那么高,希望用户专注于当前的信息列表,但是我这样的用户经常查看过滤信息列表,担心是否有重要信息被屏蔽,多出的一步操作还是给我带来不小的使用阻力。
淘宝订单模块的做法就比较合理,从一级页面(A)进入二级的任何页面(B 或 C)后,二级页面可以在标签栏互相切换,而不需要退回一级页面再次选择二级页面,从而节省了一步操作。
快捷方式有跳转类和功能类两种,跳转类的快捷方式可以帮助用户快速触达或回退到某个页面。
比如我们可以通过长按 iOS 应用图标调出功能的快捷方式使用,减少中间的操作步骤。淘宝可以在大多数页面通过快捷方式快速回退到首页。
功能类的快捷方式提供给用户更快捷的方式完成复杂或较多的任务,比如哔哩哔哩的一键三连。被苹果收购的应用快捷指令可以自定义系统以及第三方应用的复杂任务,并且在下次一键即可完成。
米哈里·契克森米哈赖在《心流:最佳体验心理学》中将“最佳体验”定义为:当我们在做某些事情时,那种全神贯注、投入忘我的状态。这种状态下,我们身心合一,甚至感觉不到时间的存在,技术水平也会达到顶峰,在这件事情完成之后我们会有一种充满能量和非常满足的感受。然而,周围突然的干扰或环境刺激都有可能打破心流体验。
用户在使用软件产品时很少有心流体验,因为过多的页面的跳转和刷新会中断用户心流,冗余的页面层级会增加用户的理解成本和操作成本。针对这个问题,我们可以提高单个页面的动态容量,在不跳转页面的前提下使用户完成任务,为用户创造在视觉感受层面上的心流体验,下面是一些方法举例。
覆盖层是出现并覆盖在原页面上层的一个弹出窗口,可以由用户触发或系统自动触发,在网页端和移动端都有着广泛应用。我们通常可以将其用于输入内容、附加信息、子页面信息外显、显示操作指令等。
模态覆盖层一般由点击触发,通常出现后会伴随亮盒效果,使用户聚焦于覆盖层上的任务,用户操作完毕后才可以进行覆盖层外的其他操作。模态覆盖层的大小不固定,它可以是一个小型的显示警示信息的弹窗,也可能是一个篇幅很大的信息介绍,在保持上下文的情况下展示更多信息,避免了用户迷失在各种页面跳转中。
如下图,behance的首页点击一个作品后,会在当前页面上生成一个模态覆盖层供用户浏览详细的作品内容,而不是跳转到新的页面。在设计师浏览单个作品的场景中,一般只需要 1-3 分钟的浏览后就会关闭页面,模态覆盖层的方式使得打开和关闭的操作更加流畅,提高了设计师的浏览效率。
模态覆盖层在移动端同样也有着应用。如果前后两个页面存在较强的关联性,为了避免用户产生明显的割裂感,一般适合采用模态覆盖层的方式展示新页面。如下图,知乎使用模态覆盖层展示评论。
详情覆盖层在网页端通过光标移入触发,触发后不需要刷新页面既可显示附加信息。如下图Boss直聘中光标移入某条招聘介绍时,会触发详情覆盖层展示出次级页面的详细岗位信息,避免了跳转新页面。
嵌入层类似于抽屉,需要的时候将其展开,不需要的时候将其收起。与模态层不同之处在于,展开后也不会遮盖页面的其他信息和影响其他操作。嵌入层的主要的应用场景有:拓展内容、展示下级内容。
如下图,微博的发现页面的功能图标可以通过嵌入层进行拓展从而展示更多功能。
Xmind的嵌入层展示了格式的下级内容,可以在保持能够继续编辑脑图的前提下进行格式设置。
对于内容丰富的页面,希望用户能够通过尽可能少的跳转就能够触达。我们可以将列表导航、宫格导航修改为标签导航或分页的形式。
把某些操作难度大耗费成本高的操作使用新技术解决,比如人脸识别和 OCR 技术可以降低信息输入成本,不但帮助用户使用较少的时间完成任务,也降低了用户的犯错几率和使用阻力。
手势的优化也是降低操作难度的可行方法,优化的方式有增加多手势操作和加大热区。比如在 App Store 首页进入应用推荐页后,针对不同使用场景的用户提供了三种退出的方式,大大降低了操作难度。
举一个反例,得到的书籍详情页中,查看详情的按钮热区只存在于文字上,但是用户的使用习惯会误认为整块区域都可以点击,因此每次点击多次失败后才理解热区的正确位置,如果将热区扩大到整个区域就可以降低操作的难度。
想要了解更多交互手势知识可以拓展阅读: 交互手势的容错性和逻辑性
用户的每一次思考都伴随着流失的风险。有时用户对于我们提供的选择不是很了解,会纠结和疑惑不同选择之间的区别,最终可能导致放弃选择进而流失。我们需要做的是为用户提供默认选择,同时允许用户切换到其他选择,以此来减少思考,降低使用阻力。
以手机淘宝查看相似宝贝功能改版为例,在旧版中,长按淘宝某个商品会出现「找相似」和「找同款」的按钮选项,点击后会跳转到对应页面。在新版中,长按淘宝某个商品会直接跳转到「相似宝贝」页面展示商品,同时可以通过分段控件切换为「同款宝贝」。我猜测的改版原因是,由于旧版的第二步给用户的两个选项让用户过多思考,导致第二步的流失率过高,很多用户没能体验到「相似宝贝」和「同款宝贝」功能的的特色。改版后直接将更高频的「相似宝贝」的商品页展示给用户,同时也很方便地去切换到「同款宝贝」,这种交互形式的变化让用户无需思考就可以迅速体验到功能的特色、并在熟悉后下次会继续使用。
我们通过过往的经验将已知概念套用在新事物上,帮助我们理解。一旦交互界面中与用户的经验预期相悖,就会产生阻力。
上文提到过,我们习惯于从过去获得的经验中获得对于当下问题的解决方案。甚至对于重复出现的问题,我们已经形成了条件反射和肌肉记忆去解决它们而不是再次思考。因此,当设计缺乏一致性时,不但会导致我们已经形成的条件反射和肌肉记忆失效,还会更容易导致错误的发生。此时我们不得不从条件反射的无意识操作转换为消耗注意力的缓慢操作,从而形成阻力。为了避免这些阻力,我们需要确保按键的一致性、交互文案的一致性、交互手势的一致性。
如下图,警告框的按钮位置一旦第一次用户经过使用熟悉后,之后用户会进行无意识地快速操作,此时如果某个警告框缺乏一致性就会导致错误的发生。
内在负荷是任务中包含的信息和用户固有的认知结构产生交互作品而形成的负荷。体现在界面中的信息就是文案的设计了,它也是产品设计中重要的一环。悖于用户认知结构的文案设计会带给用户理解上的阻力。一份合格的文案设计需要做到简洁易懂、重点突出、无歧义性和保持一致。
如果能够做到简洁,就不要冗余。确保每一个字都有其存在的意义。大部分用户会对冗余的大段文字产生畏难情绪,从而放弃阅读。词汇的选择要符合用户人群的认知范围,不应该使用用户难以理解的各种黑话和行话。在此基础上,如果能够通过形象生动的修辞手法帮助用户快速理解,就更胜一筹了,比如针对垃圾分类,一些网友发明的快速记忆方法就是一个很不错的例子,如下图。
一段文案中可能有些是重点内容,有些是解释内容,并不是所有内容都需要让用户阅读并理解。大部分情况下只需要突出重点内容告知用户,能够引导用户下一步行动就足够了,至于其他解释性或者不重要的内容弱化即可。
针对前两条规则,我们以 12306 以及飞猪的学生票和成人票的选择弹窗作为案例进行对比。如下图所示,每一次购买火车票的过程中,当我遇到 12306 的这个弹窗,都会让我用不少时间去进行理解和思考。首先在个人看来,“温馨提示”在任何弹窗上都是占用空间没有实际意义的存在,如果没有标题,直接展示正文即可;其次,正文的内容重点信息不突出,其中有一个句子“请凭购票时所使用的有效身份证件原件和附有学生火车票优惠卡的有效学生证原件换票乘车。”过于长和复杂,很考验用户的短期记忆和耐心;最后,按钮文字没有提供操作路径,用户想知道如何操作需要先阅读完上面的文案。
飞猪的案例就避免了 12306 所存在的问题,做到了简洁易懂和重点突出,如下图。
表意清晰指的是文案传达的含义明确、不含糊、不存在歧义。下图是一款社交软件的警告框文案,文案的歧义让用户疑惑“取消”按钮是取消约会还是取消本次操作。经过修改后歧义性就消失了。
同一个软件系统中,表达相同概念的用词一致。模块中的相似文案,语法表达方式一致。上文提到我们人类很少愿意思考的特点,一旦一个软件系统出现表示同一个概念,但是名称不一样的词语,我们大脑就不得不开始被迫思考:“这个词语和之前那个很接近但是有些不一样,它们是同一个东西吗?”这个思考过程从而形成了不小的阻力。《认知与设计》一书中提到一条规则:“同一个名称,就是同一个东西;不同的名称,就是不同的东西。”因此,一致性是撰写交互文案的一条重要原则。
当信息的内在负荷不能再进行降低时,通过改变信息的呈现方式、结构设计和逻辑安排来将复杂信息可视化,降低外在负荷,使信息更容易被用户接受和理解。这里涉及到信息可视化这个课题,这里就不做展开了。
阻力并不是越小越好,在某些场景下,我们需要提高阻力提高用户的使用成本达成某些目的。
类似于马路上的减速带,在车辆进入需要低速行驶区域时进行阻碍。我们通常在用户容易犯错的操作前设定一定的阻力,减缓用户的操作的节奏,达到防错的目的。如下图,在蓝湖中如果要删除一个项目,就需要先输入项目的名称后才能成功删除,通过增加阻力提高了防错能力。
针对涉及到用户隐私的敏感操作,通过设计特定的交互流程让用户体验到安全感,比如通过增加指纹、面部识别等操作降低用户对于危险和风险的担忧,增加用户的确定感和可控感。
生活中大部分的时刻都是单调乏味的,我们需要使用各种仪式点缀它。与此类似,在用户的操作行为路径里增加一些不必要的过程,也能成为用户体验旅程中的点睛之笔。
就像多年前坚果手机一代的包装,设计师别具匠心的将包装设计为一次充满着童趣的体验,虽然拆包装的过程时间增加,但是给予用户似曾相识的场景是不可替代的。
看似使用起来费力的微信摇一摇,可以加强用户的参与感和仪式感,就仿佛融合着一种占卜未知世界的神秘体验,这种感觉是点击无法给予的。当初支付宝基于 LBS 和 AR 技术推出了 AR 实景红包,众多用户不惜跨越“千山万水”收集线索图去寻找红包,并乐此不疲。尽管增加了操作成本和使用阻力,但是这些富于互动性和趣味性的体验带给用户的仪式感也是不可多得的。
用户的属性和其产生的内容质量对于产品的社区生态建设有很大的影响。对于社区的认同感越高的核心用户越多,内容质量就越高,进而社区对潜在用户的吸引力就越大。一旦一些修养低或居心不良的用户大量涌入社区,就会同时带来大量的负面内容,造成对其他用户的干扰,甚至导致他们大量流失。因此,为了让一个产品的社区生态能够健康发展,我们需要采取一些筛选方法来设置阻力,以此来筛选出对平台有益的用户和内容。
很多产品在冷启动阶段,为了避免垃圾用户和提高社区质量,会设立邀请制来控制用户来源,然后根据现有用户的使用反馈进行可控的优化迭代。这种方式可以有效地降低初期的运营成本,保持服务器稳定,甚至可以制造一种供不应求的感觉,获得更多的讨论度。
网络骗局在社交类产品屡见不鲜,婚恋类产品更是重灾区。很多推行高端婚恋或高端社交的产品为了保证用户质量,不仅严防死守,还会设立价格门槛,不付费直接无法使用,这在现今已经广泛推行的基础服务免费、增值服务收费的收费模式中很少见,但是确实有效地进行了用户筛选。
通过设置测试题将用户分成不同的群体,进行具有针对性的权限设置。比如 B 站转正时需要完成具有社区特色的晋级考试,需要花费的时间成本比较高,通过这种方式筛选出真正认同 B 站社区文化的优质用户,给予这些用户更多在社区中互动的权限,从而也大量减少了低质量用户的负面行为。
上述的三种用户筛选方法是否适用,需要考虑的产品属性。不同维度的筛选用户的方法还有很多,这里只是简单举例。
不同的内容形式对于社区的价值是不一样,我们可以通过一定的方式引导用户生产对于社区建设更有利的内容。比如微信发布朋友圈时并没有直接给用户提供纯文字信息的输入方式,如果用户想要发布纯文字内容,需要长按发布按钮才能进入相应界面。原因是微信官方认为相对于纯文字内容,附有图片的内容对于其他用户更具有吸引力,通过阻碍用户使用纯文字发布、鼓励用户使用配图发布使得整体的朋友圈社区的内容能够吸引用户浏览更长的时间,从而也可以使朋友圈广告得到更多的曝光。
有时产品的商业目标和用户目标存在一定冲突时,损失一定的用户体验满足商业目标是不得不进行的选择,这需要我们进行合理的平衡。
为了迎合商业目标,我们有时需要针对一些功能设置一定操作阻力将其进行弱化,然后引导用户去使用我们希望其使用的一些特定功能。这类阻力设计最为常见,比如通过强化按钮对比进行功能的引导,如下图。
歧视性策略常见的的应用方式就是通过 VIP 制度或等级制度将用户进行身份区分,针对身份等级低的用户设置使用阻力,以便于引导其投入更多精力和资源,或者通过此方式给予高等级用户优越感,刺激其进行分享炫耀。
16 年发布的支付宝生活圈就是一个很好的案例,芝麻信用 750 分以上才可以使用的歧视性策略非常简单粗暴。很多达标的土豪用户在朋友圈炫耀生活圈的截图,等待朋友们的膜拜点赞。互联网产品中,每增加一个动作,用户都会呈几何级流失,但是支付宝的歧视性策略给了用户巨大的动力完成了截图、保存、打开微信、分享照片等一系列动作,帮助支付宝生活圈实现了刷屏传播的效果。
虽然让用户畅通无阻地使用产品是我们的目标,但是有时还需要我们合理地限制。不同的使用场景和商业目的共同影响着设计策略。在如今互联网产品越来越趋于存量竞争的态势下,我们更多的工作开始专注于产品的优化。希望本文能够提供相应的思路,助力你在产品优化探索中找到可行的切入点。
参考资料:
《微交互:细节设计成就卓越产品》作者:Dan Saffer
《心流》作者:米哈里·契克森米哈赖
《web界面设计》作者:Bill Scott / Theresa Neil
《认知与设计》作者:Jeff Johnson
《阻力设计:探索质量和数据间的平衡点》IXDC 演讲,作者:王毓莹
《点石成金》作者: 史蒂夫·克鲁克
《设计心理学2:管理复杂》作者:唐纳德·A·诺曼
作者:Ballen成明
转载请注明:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近新的一批应届生开始步入职场,让我想到自己刚入设计这一行时,遇到的大大小小问题感到很是无助。今天这篇是结合自身经验写给入行不久的设计,希望你们眼中有光心中有梦对设计仍不忘初心。
相信你在设计工作中一定遇到过这样的场景,当好不容易拿着设计稿推进时,被各种角色提出意见:
“我觉得这个设计不高级”,“我觉得这里可以再大一点,颜色更亮一点”,“我觉得可以试试竞品那样”,“算了,还是用第一稿吧”等等,然后陷入无限改改改的循环中,往往做着做着就开始怀疑自己是不是不适合设计
我认为有3个方面的问题
每个人的审美不一样,天然会掺杂着主观因素,导致每个人都能很容易的提出自己的意见。而我们对设计的关注往往是各种好看概念稿、当前流行趋势等等,导致我们过于追求视觉表现,而忘记从需求层面出发
每个需求都是有具体的目标用户,用户身份不同,同一个问题背后的需求也是不一样的,当与真实用户脱节,业务理解不到位,很可能就把整个需求理解错误,这样修改的几率就很大
没有理解每个功能是什么,背后要解决的问题是什么,满足了什么需求,能够得到的价值是什么
产品或运营提出一个需求的背后,往往都有一个非常明确的结果预期,他们也需要层层审核。我们不应该想“他是不是对我有意见”“他不懂设计的吧,就喜欢瞎BB”“每次都这样针对我,设计做的真没意思”等等,而是需要主动沟通,了解为什么?只有充分的理解需求,才能寻找更正确更好的解决方案。
我们做稿子时常存在问题是我们仅仅关注了设计视觉表达环节,整个项目流程我们理解的过于狭隘,腾讯百度这些大厂设计流程往往从项目立项设计已经开始介入了
想要提升设计方案的说服力,首先要从思想上改变对设计认知,然后再从执行层上落实每个小点
这里需要设计师站在更高的视角,把设计从表现和执行抽离往前后延展,在整个过程中往前去挖掘需求和规划产品结构,往后做到把控和沉淀,跳出视觉认知层,才能宏观看待整个业务改版
从不同的视角看待问题,学会拆解问题和解决问题,从产品、设计、开发不同的角度来全盘看整个产品,分析这个需求的投入产出比是否足够,是否能达到目标(包括设计目标和产品目标)。设计、产品、开发从来都不是对立的,都是不同角色为了整个产品发力。
我们在开始着手项目的时候,不要单点去看要在某个页面要做什么改动,而是从问题入手,和产品同学对齐好目标,结合设计理念。
最后找到发力点在哪里,循序渐进,这样很大程度上能避免项目的反复,对设计流程的准确把控也是输出优秀设计方案的基础。
有些新设计师认为创新就是把原项目进行翻天覆地的改变,初入职场会觉得负责的业务和项目都很小,没有什么意思,其实创新的维度有很多,包括设计工作流程的优化,还有从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜。
陌陌情感化设计和贝壳旗下被窝家装产品图标设计异曲同工之处,大方向上都是利用大色块、细节处用线条勾勒,整体设计轻量化符合年轻人喜欢,但两者又有不同之处。陌陌对表情和动作的处理线条更简洁更抽象,而被窝家装图标融入品牌IP趣味化表达,传达出诙谐、幽默的正面情感
设计师往往对信息的获取比较片面,很多往往坐等原型,然后刷网站找图接着打开软件撸图,这种不充分理解需求就开始做设计的行为,属于思维懒惰,就被称为常说的美工
我们在需求阶段设计师应该主动跟需求方深入沟通,搞清楚以下方向的问题:
明确目标是为了最终设计方案可衡量,设计师工作不是提供一个天花乱坠的方案,而是尽可能走在一个正确道路上提供给需求最合适的方案,只有大方向不错的情况下才有好坏之分
在业务探索初期,旧版满足了业务方和用户的基本诉求。但是随着业务扩张与更新迭代,我们逐渐发现现有的租售模块实价登录信息不能提供用户有效的参考价值,该页面点击到实价登录页面的用户量极少
这个改版的背景是在租售业务上优化实价登录社区的需求,租售详情页的上内容的呈现还是旧版,现有框架和内容对社区价值点展示不足。
解决办法:优化信息框架,丰富该房屋社区信息,满足用户找房时了解社区资讯需求
比如整个社区在该市的排名、整个社区的配置图、口碑评分等以及在实际找房场景过程中,用户会找这个社区内同格局同户型的房屋等等
整个591APP是台湾地区关注度最高房屋的产品,但是从二手房引流过来的用户很少,埋点数据不理想
解决办法:除了在视觉上也要与本身租售的业务分开,让用户理解注意到该模块的价值外,另外在体验层也需要优化
为了更好的明确实价登录的价值定位,以及确认用户期望什么的信息呈现,我们在实际改版时对用户做了多轮的摸底调研,挖掘用户在使用关注功能时的真实场景诉求。
在调研过程中,我们发现使用实价登录的用户分两类,分别是观望期的用户和决策期的用户,这两类用户虽然都使用,但是对实价登录功能的场景诉求是不一样的。
观望期用户一般是有买房计划,但是对于自己要买什么样房或能卖什么样的房子需求没有那么明确。这类用户大多数是了解为主,从慢慢对比中做到心中有数
决策期的用户大多已经线下看过房,有些甚至已经到了和议价阶段,他们对于自己的购房诉求已经十分清晰。在这个阶段的用户,期望提供更多有关体现房源价值的信息,比如挂盘时间、成交表、周边完善程度等等,这些信息一方面可以展示出目前房源再市场内的定位,重新调整价格预期;另一方面也能了解到业主心里预期,提升线下斡旋的成功率
我们可以从这两类用户的使用诉求看到,大家都期待能提供更丰富有效的信息,帮助自己明确需求和辅助决策。
由上述信息得出我们的设计目标,提高租售模块的实价登录的点阅、降低跳出率,当我们的设计方案每个细节,都是以目标为导向时,你输出的方案将更有说服力
结合实价登录历史现状和不同阶段用户场景使用预期。我们在本次关注改版上制定了对应的设计策略。
旧版分析:仅满足用户基本使用,其中承诺的误差率未达标,与内政部信息同步也存在问题;同时,视觉上更像是内容说明展示,点击感不明显
优化策略:围绕用户买房租房场景,为用户提供最新的实价登录信息,同时添加点击指向性箭头,告知用户可点
通过对首屏不断的优化和迭代,打磨体验细节和设计细节,首页的点阅提升了43%
从框架层对功能和层级进行梳理,原层级主要功能不突出,根据功能的重要层级以及用户使用频次进行梳理,将入口进行提炼,同时针对多样化需要增加新的入口
旧版分析:用户在不了解社区情况下缺少关注动机;折线图不明所意;同社区是否有成交与当前用户缺乏联系;查看更多实价登录却到社区详情页与预期不符
优化策略:围绕用户买房租房场景,展示与用户切身利益相关信息
关于颜色
整个产品主色是橙色,但是目前租售详情页上蓝色橙色混用,当然设计的改版也需要锲机,所以我们这次改版沿用橙色,当好区别之前的蓝色,达到凸显实价登录模块的目的
配色从朴素到亮眼跟从LOGO配色,“暗蓝色”到“亮橙色”增强年轻感,加强了颜色的对比度,让品牌感知更加直接,增加品牌视觉分量
关于圆角
圆角,代表友好、亲和,具有更强的内指向性。我们对于圆角的取值上也做了足够的思考:结合房屋特性,卡片内需承载的内容信息众多,圆角太大会影响边角信息的呈现,所以我们在圆角选取上将圆角数值整体缩小,采用了可根据场景精细程度选择合适数值的圆角(4-6-8px),使卡片容器信息展示更聚焦。
设计师不仅要会设计,还要能够有理有据的,跟需求方陈述自己的设计方案。尤其是在项目合作和设计推进时,非常重要。方法可以分为以下几点:a.有逻辑;b.能坚持;c.会妥协。
向别人推进自己方案之前,先把自己要表达的内容梳理清晰,进行调整和简化。试想你小时候全校上台发表考试获奖感言,是不是有个长长的稿子
多问自己一些为什么,比如下面稿子类似于广告位的地方,当前目标是提高点击率。但是整个模块展示是在另外的业务上,也是存在突出的同时不能太突出的问题
初稿给出的时候也是出于2个方向考虑,方案一是出于页面整体风格一致性同时优化视觉,稍作强调;方案二考虑到方案一视觉引导弱了,用重色强引导达到产品目标。2个设计方案都可达到产品目标,剩下的就是调优了
在符合最终产品目标的设计方案,必须坚持。但是,你要有证据证明为什么它值得或者能够坚持。
这里再分享一个案例来,台湾用户往往特别注重个人隐私,基本不开通系统定位,但是买房租房位置选择及交通地域选择是第一步,否则后续搜索无法定位到用户预期。所以此次产品目标是加强导航的视觉层级,当然这只是优化需求里面一个小需求
经过竞品分析、加强品牌感知和用户使用习惯等方面确定使用品牌橙。但是这个橙饱和度比较高,在测试阶段非专业人士提出疑问导航这个太刺眼,让整个页面感觉不高级,让产品和交互再次怀疑这个橙色是否需要调整
这个时候设计坚持是非常有必要的,因为大量结果验证是可达到产品预期也符合用户使用习惯,仅因为大陆同事质疑就在测试环节随意修改,这个是非常没必要的。测试环节离上线时间是非常紧迫的,这个急促的时间推翻重来结果也可想而知
体验设计会有很多不可控的因素,是在各种局限下做出最合适的选择。要处理好问题的优先级,分清楚哪些是核心目标,哪些是兼顾目标,这样才能更有效的管理自己的时间以及项目的进度。
清晰设计层面来说就是方案能做到方向明确,方案明了;有效字从设计层面来说就是输出的方案可以解决存在的问题,能达到设定的目标以及可以切实落地。
清晰和有效的维度是不一样的:清晰更多是针对设计,在于不同方向/方案的差异度和侧重点;
有效更多需要联合设计上下游(用户/产品/开发),对于优秀的设计方案来说两者相辅相成,缺一不可
数量并不代表一个设计师的专业,最多只能说明设计师技法娴熟。在评审的过程中,不建议将所有的设计方案直接平铺。而是你要先经过自己思考、衡量与推敲,挑选出最优的 1~2 个方案进行方案评审,并给出设计说明,陈述方案的思考逻辑。
在设计最初期先思考有哪些途径达到目标,确保所有实现手段的方式都有考虑到,整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归,才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。
之前的例子比如目标答案是提高点击率和阅读量,我从3个方面阐述方案的可行性
方案一:沿用当前页面的比较扁平设计样式,选用大间隔大标题区分模块,在页面里加入品牌色装饰强调我们的模块,吸引用户点击;
方案二:可以采用卡片式设计突出点击感,吸引用户点击;
方案三:因为头部有用橙色装饰强调,所以整个头部模块不用卡片式呈现,突出后面2个模块
这样3个方案给需求方,即满足对方产品需求,又满足设计需求,对方就不会全盘否认设计方案,走入改改改模式了,就算对方有修改意见也能说出具体点去修改,而不是说我觉得不好,不够突出这样非常主观的想法
强调一点:我们在方案都没说服自己的情况下不要推出去,专业度是每次和对方碰撞中中慢慢建立起来的,如果说服不了自己的情况下,推出去对方很大可能性要你试无数稿对比;另外在阐述发需求方时候,也要注意语言的引导,慢慢理解对方的意图
初入行时认为满足了需求方便是好的设计,当其他角色提出不同意见就会觉得他们不懂的设计。这些现象是因为设计师在项目前期没有正确思考需求本身需要解决什么问题、方案能否达到团队共同设定的目标,以及方案是否能平稳落地这三个维度
我们在实际输出方案的时候,不能从产品经理的需求文档开始,而是要把考量维度更前置,从项目现有的问题出发。这个问题的搜集包括外部用户的反馈,内部团队的声音,同时对问题进行筛选和甄别。
比如下面同一个产品按钮2种悬浮状态,左侧案例按钮hover状态是由正常状态面型变成线型;右侧案例按钮hover状态是正常状态下加投影。
如果我们仅从产品需求文档开始,不去深究其背后的原因,很可能把右侧hover状态直接变色处理,没有去思考hover的几种样式哪种是更适合当前场景的的,这样简单粗暴的处理方式多了之后使得产品体验大大折扣
问题还需要结合目标一起考虑,解决问题的思路并不完全等同于目标,目标是大家一起制定的未来产品的发展方向。比如之前导航的案例,未发版前部分工作人员认为颜色偏重,但是从产品目标和品牌调性及目标用户审美上是没有问题的
在输出设计方案的时候,需要考虑到开发实现的可行性,需要消耗多少资源去实现这个需求,最低成本达到目标的路径是什么。最常见的就是情感化设计,下图案例2个空状态下的场景,原本考虑到趣味性及品牌属性加入动效,但是开发的业务需求已经排到下月,最后只能以静态图展示,先满足基本需求后续有时间再进行优化
再例如下面三组数据的排版方案一:文字最左边间距30px,文字最右边间距30px,中间一组数据中间对齐;
方案二:三组数据分别在360px宽的格子里距离左边30px。方案一在视觉上可能更加合理,当宽度是1200时右侧不会空太多,但是按方案二的逻辑写更加便捷,一组数据样式可以解决3组数据的排版,大大提高开发效率,如果用方案二评审加入开发实现方式的思考,那么按过稿率大大提升了
以上是跟进项目一整个具体过程,了解背景、分析问题、设定目标、到方案推导及执行输出、再到方案的落地,整个过程与产品研发沟通非常顺利,最后也获得良好的用户反馈,整个团队满满的成就感是非常开心的
进入互联网公司工作初期,大多数人对设计的理解更多停留在表现层,对设计的判断标准更多是好不好看、喜不喜欢。但作为设计师我们不要盲目的去画设计图,只有在设计方案前,更好的理解和分析了需求,才能很好地服务用户帮助用户使用产品;同时,只有站在用户的角度去分析理解产品,才可以帮助产品站在全局的视角提升用户体验和设计需求,从而打造优秀的用户体验。这2点综合起来才是设计师价值的体现。
原文地址:站酷
作者:贝贤设计笔记
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
“仰望星空,脚踏实地” ,做设计需要想象空间,也要有反思和总结的能力。
让我们来看两个毫无关联的产品的界面。
BI产品
团队协作产品
这两个案例展现了如何选用不同的模式以实现不同的目的。
对于BI产品来说,目的是让数据分析更彻底,提高数据分析效率;更好的整合数据,为企业提供报表,做为企业决策的依据;更好的帮助企业管理者管理企业,提高企业实力。
对于teambition来说,目的是轻松记录要做的事,并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级,从而完成目标。
基于产品目的我们可以看出BI产品重效率;teambition 更看重清晰以及使用是否轻松愉悦。
而产品的目的决定了它所采用的设计模式也会不同,下面我们再对照界面看下基于目的在界面设计上有什么不同。
BI产品
团队协作产品
BI数据分析类产品的布局多是小部件组成,这样做会方便用户进行多任务处理。界面设计也会相对比较密集,整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。
设计模式的概念最早是建筑师克里斯托弗 • 亚历山大(Christopher Alexander)在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。
《建筑模式语言》里面包含了253个建筑设计模式,大的如城市和道路系统的布局,小的如家庭住宅中的照明和家具。
类似地,我们在创建界面时,也在使用设计模式(组件)来解决常见的问题:使用标签页将内容分成几个部分,并表明哪一个选项对应于当前的页面;使用下拉菜单展示可供用户选择相关选项。
标签页
下拉组件
设计模式分为2类:
第一类:功能性模式(组件库)表现为界面上的具体模块,如按钮、标题、表单元素、菜单等。
第二类:感知性模式(视觉规范)则是描述性的样式,以可视化方式表达和呈现产品的个性,如配色、排版、图标、形状、动画等。
功能性模式有点像名词和动词,它们是界面中那些具体的、可操作的部分;而感知性模式则类似于形容词,它们是描述性的。
例如,按钮是具有明确功能的模块,它让用户能够提交某项操作。但按钮上的文字的样式,以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块,而是样式,这些样式描述了按钮是什么样的。
唐·诺曼在《设计心理学》一书中说过:系统映像(界面)和用户模型(用户通过与界面交互而形成的感知)之间存在着一道鸿沟。
在设计团队内部也是如此,比如“范围输入框”组件,你能想象它是一个什么样的组件吗?相信不同的人肯定有不同的心智模型,因为这个组件不是常用组件,在ant design、arco.design组件库中也找不到这个名称组件,因为它是TDesign的产物。
而每个公司都会根据自己的产品特性创造一些非常规类组件名称,这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致,才能去培养用户的心智模型,这样才能去除系统映像与用户模型之间的这道鸿沟。
例如上面这个组件,每个人都需要知道这个组件叫“范围输入框”,而不是“输入框”或者“数字输入框”。
例如,teambition的目的是“轻松记录要做的事,并与伙伴实时同步进展”。
于是,我们可以去看产品,设计体系在实现这一目标的过程中发挥了多大作用,以及这些设计实践的效果如何。如果视觉、交互混乱,导致无法实现上述目标,那么可以认为这套设计体系是无效的。
上面介绍了设计体系包含的内容,下面我们针对这些内容进行具体的介绍:
做B端的小伙伴应该都知道ant design,但不知道有多少小伙伴有认真的看过ant design的设计原则。 可能有小伙伴会问这个设计原则有什么用,我最开始也觉得没什么用,后来在参与设计体系优化过程中发现这个原则就是金字塔尖。
例如:用户没有填写完表单,那么表单的提交按钮能不能点?是置灰好,还是按了以后再给弹窗提示。
例如:可编辑表格,是放一个笔状icon来提示可编辑,还是采用鼠标触发时出现输入框以及指针变为文本状态。
日常工作中总会在这些细节问题上争论很久,美其名曰“打磨设计”,其实很多时候就是设计原则在团队内部没有达成共识。
为了避免出现上述问题,我们要建立一套基本的价值观和原则。在一些公司里,尤其是在处于初创期的公司里,尝试建立一套共同的准则是很难的。设计原则是无法量化的,因此定义这些原则可能需要多次迭代。
对于原则到底是什么,可能存在一些争议。有些公司的设计原则偏重于品牌,有的偏重于团队文化,有的则偏重于设计流程。
例如,Pinterest的设计原则便偏重于品牌。
Atlassian公司没有分团队或者产品单独制定原则。
他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。
不过,尽管各处的价值观是相同的,但体现程度并不一样。
例如,官网就会较多的提现“”大胆”,但产品里面就不会,正如Atlassian公司的设计经理Kevin Coffey所说的,“没有人想要一个‘大胆的’服务支持页面”。
Atlassian 官网截图 https://www.atlassian.com/zh
Atlassian 设计体系 https://atlassian.design/
我们以TED为例。TED的一条设计原则是“追求永恒,而不是追求潮流”。永恒这个词不光体现在TED的界面上,还体现在TED的整个品牌和设计方法上。
这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。
例如:定义了原则为“简化”(让产品尽可能简单,简单到几乎感觉不到它的存在)。这种原则就是不实用也不可操作的。
怎么能让团队所有人都能理解?
消除无用的部分。每一个设计元素,无论大小,都必须有一个目的,并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里,那么它便很可能不应该在那里。这样的定义就清晰很多。
再例如:定义了设计原则为“有用”,什么是“有用”?
从需求开始。如果你不知道用户需要什么, 就无法做出正确的事情。去做调研,去分析数据,去与用户交流,而不是做假设。
好的设计原则也能帮我们确定优先级和平衡点。
Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”。
这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”,而“清晰”应该始终放在第一位。按照这种方式对原则进行排序,可以让团队在做设计决策时明确哪些东西应该优先考虑。
Atlassian和Airbnb的团队成员被问及他们的设计原则时,他们都能脱口而出,没有片刻犹豫,没有人表现出迟疑,没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢?因为他们的原则足够简单、实用、易于让人产生共鸣。
Airbnb公司的四条设计原则(“统一”“通用”“风格化的”“对话式的”)便深深地扎根于其设计过程之中。
每当设计一个新的组件时,我们都会确保它完全满足四条原则。如果我们没有这一套原则,便很难就各种问题达成一致意见。----Airbnb 首席交互设计师
每个团队建立其设计原则的方法都不尽相同:有的会召开几轮研讨会,有的可能会征求CEO或创意总监的意见。不过,无论采取哪种方式,都离不开下面几点:
从目的开始
TED网站的主要目的可以用一句话来表述:“尽可能广泛地传播演讲。”因此,TED网站的精神和价值观便是触及尽可能多的人群,降低使用门槛,让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要,清晰的文案比大胆的设计更重要。
寻找共识
如果你仍处在定义设计原则的阶段,那么一个有效的方法便是让团队的一些人或所有人(取决于团队规模)各自回答关于设计原则的问题。例如,在他们眼里,什么样的设计对你们产品来说是好的设计?他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则?
面向正确的受众
如果搞不清楚设计原则是为谁写的,就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”,那我们是不是把“美观”放在第一位?一定要搞清楚为谁而写。原则到模式
作为一个设计师,定义设计原则可能对你来说也许并不难, 但怎么把原则、品牌价值、组件相结合,怎么体现在设计模型中,这个我觉得是个挑战。
对于 TED 来说,信息的清晰比美观更重要。试图将每个演讲都 提炼成一个短句可能很难,所以有时候标题可能很长。对标题 进行截断是很容易的,但对他们来说,演讲信息的优先级是最 高的。
因此,他们没有选择相对容易的标题截断方案,而是确保他们的设计模式可以容纳长的标题。
功能性模式是界面中有形的构件(表单)。它们的目的是让用户能够完成某种行为(填写表单),或者激励用户完成某种行为。
功能性模式可以很简单(标签⽂字、输⼊框、按钮 ),也可以组合成更复杂的模式(搜索组件)。
标签⽂字、输⼊框、和按钮
搜索组件由标签⽂字、输⼊框和按钮组成
随着产品的发展,模式也在不断发展。包括风格,甚至功能和交互方式,都有变化。然而,它们的目的基本保持不变。
我们用顶部导航举例:
顶部导航是由logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的:搜索定位框告诉我们怎么快速找到想要的东西,导航带领我们浏览全局,指引我们到想去的地方,而后面的的图标按钮让我快速触达。
总的来看,这些模块都有一个共同的目的:引导用户快速浏览使用。随着产品的发展,模式也在不断发展。
例如,随着产品功能越来越多,可能会在导航上面新增设置功能,让用户自己去排布常用功能。又如,我们可能会对导航进行重新布局,把导航按模块分类,采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代,希望它更好的实现各自的目的或者说更有效地激励用户使用。
在设计开始阶段就阐明模式的目的,能避免在产品发展过程中做重复性的工作。
目的决定了其他的一切:模式的结构、内容及呈现。了解模式的目的,可以帮助我们设计和构建更加稳健的模块。
如果说功能性模式是界面中的组件,那么感知性模式则更像是样式——描述组件是什么类型的,给人的感受是什么样的。下面,我们将探讨感知性模式。
设想我们每个人各有一套房子,且每套房子都有以下这些家具:一张桌子、几把椅子、一张床和一个衣柜。
不过,虽然都有这些家具,但每套房子给人的感觉截然不同:可能是因为家具的样式、材料、颜色、纹理不同,或者是床罩的布料、装饰品的样式、房间的布局和灯光,甚至是房间里播放的音乐不 同。
上述这些属性便称作感知性模式。正是因为它们,可能你的房子就像是一个地中海风格的小窝,而我的房子就像是一个仓库。
而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画,以及这些要素在界面中的组合和使用的具体方式。
有时,人们将这样的特性视为产品的样式,或称作皮肤,也就是最外面的一层。但要想取得成效,它们必须不仅存在于表面,还必须存在于品牌的核心,并随着产品的发展而发展。
只有这样,感知性模式才会成为让产品脱颖而出的强大力量。
同一领域的产品,哪怕具有相似的模块,它们给人的感觉也是不一样的。感知性模式通过界面传递品牌,并让品牌被人记住。
看下面的图片,你能认出它们是什么产品吗?
这两张图里面并没有太多的信息,你只能看到排版的样式、一些图形和颜色,以及一些图标。然而那些视觉上的线索极具辨识度,所以你仍然很有可能看出它们分别属于什么产品(即钉钉和飞书)。
这些视觉元素通过有意识地反复使用,便形成了模式,这就是为什么我们可以在没有上下文的情况下认出它们。
在模块化的系统中,想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的,因此它们可以将系统的不同部分连接起来。如果这种连接是有效的,那么用户就会感受到模块之间的统一性。
例如:飞书和腾讯的相同功能的组件感知模式是不一样的,所以两个公司设计体系不能混用。
如果说功能性模块反映的是用户需要且想要的内容,那么感知性模式关注的则是他们直观的感受或行为。
在《网站情感化设计》一书中,作者提出了一 个简单的方法,通过创建“设计角色”捕捉产品关键的个性 品质。以下是一些有助于探索感知性模式的一些技巧。
情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版(Pinterest或花瓣都是一种用于创建数字化情绪板的常用工具)。
如果你目前做的产品是需要体现:科技、质感、智能,那上图应该可以满足这些条件,你可以通过这张图与领导进行沟通达成一致,然后从中提炼出一些颜色、元素、材质,这样大方向就不会有太大问题,只需在细节上进行打磨。
定义好了大致的方向之后,便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由Samantha Warren提出,他将其定义为“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”
和情绪板一样,样式叠片可以为用户和产品团队提供有价值的讨论点,并呈现他们对特定设计方向的初始反应。
arco.design 首页这张图可以理解为就是样式叠片,把不同的组件样式叠片放在一起比较,有助于准确地找到设计方向。
当功能模式和感知模式建立完成后,我们将它们集成到产品的过程,它们还将进行演变。
因为在真实的界面中,模块、交互、样式之间相互影响下会产生新的问题,这都是很正常的,是典型的迭代过程,这个过程会一直持续,直到设计语言最终形成。
像ant design、arco.design应该都经历过这个过程,只是我们不知道而已,要不然也不需要花费几年的时间打磨后才发布出来。
平衡品牌性与一致性:
过分关注一致性也会扼杀品牌性。矛盾在于,让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时,这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。
《英国公开大学》的创意总监曾说过:“当你专注于产品一致性的时候,打造产品质感的一些重要的细微之处就有可能会丢失。
发展感知性模式需要为设计师赋予打破常规的权力,鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。
小规模试验:
后期如果发现样式无法满足,我们如何将新的样式引入设计体系呢?
可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好,我们就逐渐将它们集成到其他界面中去。
例如,在学习者完成一个步骤时,纯功能性的切换按钮缺乏庆祝和成就的感觉。于是,我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。
虽然新的按钮样式受到了学习者们的好评,但它与设计体系的其他元素格格不入。后来,我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做,那么整个设计 体系给人的感觉就是割裂的。
数字产品都是由团队打造的。团队里的每个人都有各自的具体目标,都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。
我们能确保一个产品即便有多人协作,却仍能连贯、统一吗? 只要我们团队对自己的设计体系及其运转方式有共同的理解,我们就能做到这一点。
这意味着我们遵循相同的指导原则,我们对品牌愿景的理解是一致的,我们在设计和前端架构方面有共享的方法,我们知道什么样的模式是最有效的,也知道它们的工作原理。换句话说,创建统一的设计体系需要共享设计语言。
许多伟大的建筑物(如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫)并不是由一位主建筑师在绘图板上费力地创造出来的,而是由一群人构建出来的,这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。
“几组人可以通过遵循一个共同的模式语言,当场构思出他 们的大型公共建筑,就好像他们共有一个心灵。”
——克里斯托弗 • 亚历山大,《建筑的永恒之道》
我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品,哪怕不同的人负责不同的部分也是如此。
如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名,你就塑造了它的未来。
例如,如果你给的是一个表现型的名称,那么它将来就会受到样式的限制:“蓝色按钮”只能是蓝色。
例如,如果你给的是一个状态属性的名称:“幽灵按钮”,它的特点是:按钮形状的透明按钮,但有细实线的边框,常用在有色背景上。
仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去,让它无所不在。
让设计模式变得可见:
如果有条件,可以在墙上开辟一块专门展示设计体系的空间,将它称作“模 式墙”
让你的设计体系更加开放,人们会感觉你欢迎他们的加入,欢迎他们提出问题甚至做出贡献。
引用事物的名称:
所有语言的共同特点是,只有不停地使用才能让它保持活力。
它需要成为日常对话的一部分:
这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分,新员工了解设计体系就会更加容易。当新员工入职时,他们将了解到设计指南是如何创建出来的,这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部,他们创建了一个入门性质的线上课程,其中有一章专门对模式库进行了介绍,并包含了 一些小测验和小课程,这样可以帮助新员工更好的理解设计体系。
定期组织设计体系会议:
每个人都讨厌开会。但是,如果你希望每个人都跟得上设计体系的发展,那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始,可 以每周举行一次,当团队找到节奏之后,可以每两周举行一 次。团队可以利用例会时间就产品的总体模式(如图标、排版)得出一致意见。同时,这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。
设计体系不是一夜之间构建出来的,而是通过日常的实践逐渐形成的。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系
分享此文一切功德,皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者:夜鹰YEAH 来源:站酷
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计的小编 http://www.lanlanwork.com