首页

设计心理学-15种用户体验法则

纯纯

一、认知负荷


定义:

认知负荷是完成一项任务所需的精神努力总量。您可以将其视为用户与产品交互所需的处理能力。如果需要处理的信息超出了用户的处理能力,那么认知负荷就太高了。


案例:

造成用户认知负荷的的原因大多都是,产品在交互和视觉上过于复杂,设计的统一性不够,导致用户在使用时不断进行思考无法形成习惯


例如移动端中的空状态,目的是为了引导用户完成任务,在设计时无论是文案展示与视觉表现都应简单明了、层次分明、视觉统一




二、锚点效应


定义:

用户获得的初始信息会影响后续的判断,用户对某件事做出判断时,会不自觉的将开始看到的信息作为衡量标准。


案例:

在日常生活中锚点效应非常常见,例如平常不带帽子,偶尔带帽子出门的你,走在大街上会发现挺多人都有带帽子,因为心理活动是把带帽子这件事作为起始衡量,而你刻意的在寻找与帽子产生共鸣的事


在产品设计中最典型的就是会员体系,例如某视频平台的会员价格默认选中的那一栏会比其他的价格低,那么用户在使用时心理会默认这是会员的价格,相对应其他更高的价格只是作为衡量这个最低价格而存在



三、诱饵效应


定义:

又称对比效应,指人们对两个不相上下的选项进行选择时,因为第三个新选项(诱饵)的加入,会使某个旧选项显得更有吸引力,通过对比诱导人购买商家想让他购买的商品。


案例:

有一位著名的行为经济学家他叫丹·艾瑞里教授,他曾经做过一本《经济学人》杂志的定价策略,这里不细讲感兴趣的可以搜一下。诱饵效应运用最多的是在超市场景,我们经常看到超市的货架上会有看起来很实惠的物品在,如一袋泡面可能是5元,而旁边还有3包泡面一起出售可能也就12元,然后开心的拿走了,这就是诱饵效应,那一袋5元的就是诱饵,商家的目的就是为了让你买走12元的


而在线上产品策略中运用最多的则是电商场景,如下图中的图书商品,单价610元,定价980元,三件单价488元,这里的单价和定价都是诱饵,目的是为了让用户同时购买三件商品,而用户内心是欣然接受因为更划算




四、注意偏差


定义:

在检查所有可能的结果时,我们倾向于关注一些看起来合理且熟悉的事物,从而忽略了其他结果。


案例:

13年9月twitter公司宣布IPO,当时11月份才开始交易,但是在这两个月时间里有一家名为twweeter的公司三天内涨了13倍,只是在名字上与推特公司极为相似,但实际业务毫无关系,机构就是利用用户的注意偏差让不了解实际情况的投资者只看到相关性,而另一面的不相关的结果用户自然的忽视掉


在产品设计的客服助手中,就属于注意偏差,我们习惯的认为向客服回复人工等关键字时,会自动切换人工客服,而产品则会设置一些虚拟的智能客服来节省成本,而用户在这个过程中则忽略了细节,误以为智能客服是人工客服



五、菜斯托夫效应


定义:

前苏联前苏联心理学家菜斯托夫提出特殊事物才易被人牢记。也就是说,有个性的人、与众不同设计得商品、不寻常的事情,都会让人留下更深的印象。


案例:

生活中我们很难记住某个点或某件事,但是当这件事足够突出拥有独特的个性我们便会深深印在脑海里,比如一串字符ezol4tpmb,我们最容易记住的是4,因为他是唯一的数字,在比如说让你去记忆国内某些城市的特点,如西安、开封、浙江我们想到的就是秦皇陵、包青天、西湖等著名具有特征的地点,因为这些事物比较特殊更容易被记住


在品牌设计中菜斯托夫效应运用的比较广泛,如何通过视觉的表现让用户对产品更加的印象深刻,对此就衍生出产品IP、品牌符号这种具有特殊意义的标识便于加强产品印象



六、菲茨定律


定义:

任意一点移动到目标点的时间与该目标点的距离和大小有关,距离越远时间越长,目标越大时间越短,公式: 

T = a + b log2(D/W+1)


案例:

在交互设计中经常用到此定律,无论是正向还是逆向此定律都能够很好的运用到交互中,如mac系统上的关闭按钮,始终在左上角并且很小,我们的鼠标在右侧,移动到左侧上角时间会随之变长,因此这一交互结构就避免了用户误操作关闭软件


再例如移动端中会把重要的按钮操作放置在屏幕右下或者居下,因为大多数人是右手使用手机,因此在使用时右手拇指距离点击区域会更近



七、幸存者偏差


定义:

幸存者偏差是指把一些事的不同角度的人员筛选出来,筛选出一部分人进行采访从而制造舆论,观察者只能看到事物的一面,而另一面则被忽略,也被称为以偏概全


案例:

某次春节记者采访到一些在火车上的群众,聊一些购票的过程以及买到票的心理感受,最后向公众公布出今年回家的票大家都买到了,但这个过程中却忽略了那些不在车上或者没买到票的人们,因此就以偏概全的传输单方面信息,这些被采访到的人们就是幸存者


在做产品时经常会听到用户画像这个词,用户画像就是利用幸存者偏差而把广大的用户数据通过典例呈现,当然这个幸存者的样本必须是压倒性的庞大,否则就掉入幸存者偏差的陷阱



八、邻近法则


定义:

彼此靠近或接近的对象往往会组合在一起,相近的元素可以建立关系,人们会不自然的把相近的元素看作一个整体。


案例:

在UI设计中,经常会用到邻近法则进行设计,如一些组件、卡片的建立,由不同的元素组成变成一个整体,其次邻近法则能够有效的用户层级的划分,如下图中的一些卡片、icon进行规律的排布最后组成一个整体,与上下模块的层级有效的区分



九、特斯勒定律


定义:

特斯勒定律又称复杂性守恒定律,他指出对于任何系统都存在一定的复杂度并且是无法避免的,问题是谁来处理它。


案例:

在任何产品设计中无论是功能还是流程都存在一定的复杂度,依据特斯勒定律有些复杂度是无法避免的,那么需要我们在设计中去解决这些问题,保证在用户的角度来看它是合理的简单的


像我们常见的话题功能,输入#自动引导出关键词供用户填写省去用户输入时间,再例如b站的一键三连,长按点赞的同时会把收藏、打赏功能一并完成;结构层面也会用到此定律如产品中的设置页面,按照不同的维度进行区分如系统维度、反馈维度、功能维度帮助用户更快的完成操作



十、帕累托原则


定义:

它是由意大利经济学家帕累托提出,它指出对于许多事件,大约80%的影响来自20%的原因


案例:

在设计中我们会发现一个产品页面有几十上百个,对于用户而言能够提供价值的可能也就那么几个功能页面,这几个页面可能占总产品的20%左右,那么我们在做优化的时候则需要去考虑如果把20%做好把它的价值放大


再往细了说,例如打车软件在这个页面中能够为用户提供核心价值的区域则是地图区域和选择目的地区域,那么在做优化体验时应当着重关注此区域,而页面中剩下的区域则受上面20%的影响



十一、社会证明


定义:

社会证明是用户用来确定行为方式的便捷捷径,当他们不确定目标时,他们最有可能认为并接受他人的行为是正确的,人数越多,行动似乎越合理。


案例:

最近抖音在评论区新增了一个踩一下与点赞进行互补,但是奇怪的是我们进行踩一下时并不会展示具体数量,试想一下当点赞的数量大于踩一下的时候,我们有时就会被影响认为这条评论值得点赞


再例如购物中的评论排序,像京东把好评优先展示在前面,当好评的数量大于其他维度时就会影响用户判断,用户会把数量多的好评当作参考依据认定这个商品符合自己的需求



十二、好奇心差距


定义:

指用户知道的内容与他们想要或需要知道的内容之间的空间,这个空间叫做差距,差距会导致痛苦,要消除痛苦,用户需要填补知识差距。


案例:

例如在做产品设计中都会涉及到登录注册流程,那么对于有些产品则需要在登录注册阶段大量收集用户信息完成更好的推荐策略,但对于用户而言用户的认知是固有的流程,如填完手机号就收到验证码,最后完成注册进入首页,如果说中间的过程需要收集用户信息,则需要对应的解决方案来弥补用户的心理差距


即可App在收集用户信息的阶段使用了偏趣味性的一些设计表现,在用户的这个空间差里面来缓解用户的情绪,激起用户填写欲望



十三、心智模型


定义:

心智模型是对某人关于事物在现实世界中如何运作的思考过程的解释,它是对周围世界的表示,可能准确或不准确,用户认为他们对您的产品的了解会改变他们使用产品的方式。


案例:

心智模型其实就是我们对未来发展的预测,内心对要发生的事情进行预判,然后采取行动,例如我们要购物想到的就是淘宝、京东,想到吃饭可能就是美团、饿了么,这些产品就打入了用户的心智。往细了说心智模型是一个广泛的概念,它还包括行为模型、实现模型、表现模型


像我们常用的聊天软件,在聊天过程中撤回消息,就会有个重新编辑功能,这就是满足用户的心智模型,预判用户的操作例如微信、钉钉、飞书



十四、拟态认知


定义:

拟态是在页面中模仿现实世界物品,通过它的外观和交互模仿现实,拟物化适合用来让用户适应新的页面和技术形态。


案例:

我们在做页面时都会涉及到图标的绘制,那么那些具有业务属性的图标则需要通过拟物的方式进行呈现,对于用户能够降低理解成本,如经典的红包、自如的金刚区等



十五、奇点效应


定义:

与群体相比,用户对个人的关注不成比例,与大型抽象群体相比,人们更愿意同情一个单一的、可识别的人。


案例:

这个如果用逆向思维来想的话,类似于我们说的“对抗性人格”在大多数人都对一件事或事物看法一致时,出现一个不一样的声音,试想一下我们在刷短视频时评论区总有那么些人与大多数人的看法不太一致,这就是奇点效应


在设计中体现最多的是等级体系和勋章体系,一方面为用户的攀比心理,另一方面则是奇点效应,这类用户的想法就是为什么要一样,为什么不可以独树一帜。


       原文地址:站酷
作者:爱吃猫的鱼___

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


设计思维的方法与步骤

纯纯

谈到设计思维可能有很多小伙伴会问,“设计思维是设计师的事,和自己没有关系”。其实不然,我认为设计思维不仅仅是设计师才具有的能力,关乎到各行各业不同身份的人,特别是管理层和老板更应该有的一种思维方式。设计思维无处不在,有人可能会问:“到底什么是设计思维,设计思维能带给我们什么好处,希望通过一篇文章让你彻底搞懂设计思维的概念和方法。

设计思维的发展历史

美国经济学、认知心理学家,诺贝尔经济学奖获得者赫布·西蒙 (Herbert Simon),在他的著作《人工科学》提出了设计作为一种思维方式的概念。

1987年,哈佛大学设计学院教授罗伟(Peter Rowe)出版了《设计思维》一书,书中首次使用设计思维的概念。

1991年,戴维·凯利(DavidKelley)成立了设计和创新咨询公司IDEO,将设计思维推向商业化,成为设计思维的教育和推广先驱。全球最大的设计咨询机构之一。1992年,卡内基梅隆大学设计学院院长布坎南(Richard Buchanan)发表了一篇名为《设计思维中的难题》的文章,他指出:“设计思维可以扩展到社会生活的各个领域”。

2004年戴维·凯利(David Kelley)创办了斯坦福大学设计学院(D.School)致力于提供设计思维的教育和推广,以Design Thinking为核心教学思想,教授设计思维方法与实践。在美国,设计学院正取代商学院成为热门,该学院已成为斯坦福大学最受欢迎的学院。

设计思维的定义

“设计思维是以人为本的利用设计师的敏感性以及设计方法,在满足技术可实现性和商业可行性的前提下,来满足人的需求的设计方法。设计思维是一个可以被重复使用的解决问题的方法框架或一系列的步骤,提供解决问题的原型和一系列的工具。” ——蒂姆·布朗(Tim Brown)教授,设计思维的提出者和倡导者

首先设计思维是以用户为中心的,从用户的需求开始出发,针对产品看看用户有哪些需求,能不能通过科技手段去实现,有了科技的可行性,再看看能不能不断的实现商业变现,才能使我们的产品不断的给用户提供价值,所以设计思维指的是用户的需求,科技的可行性和商业的持续性,这三者之间的交界就是设计思维带来的创新。


设计思维的应用领域

设计思维其实也是一种思维方式,能帮助你打破当下的一些卡点,包括企业遇到的一些问题,设计思维能够帮助企业创新,从而在企业发展的不同阶段实现升级和转型,甚至有些企业用了设计思维的方法实现第二增长曲线。设计思维的应用领域也非常的广,比如:实物产品、服务设计、商业模式、软件应用、工作流程、企业文化等。有些儿童教育机构也用设计思维开设了创造课程引导和教育孩子,斯坦福大学还运用设计思维开设了人生设计课,就是一个人的人生也可以被设计的,我也曾读过这本人生设计课,有空给大家分享读书笔记。一些全球领导品牌公司早已意识到设计思维对于其产品开发及公司发展的重要性,采取一系列措施加大对员工在设计思维方面的培训,从苹果、美国银行、 宜家、可口可乐,星巴克、Airbnb、FOTILE方太、到GE通用电气、宝洁、IBM、三星、3M 等,都已经把设计思维纳入其经营策略,成立设计思想工作坊,并大量运用于为各种企业和社会难题提供实用和具有创造性的解决方案,下面就来谈谈设计思维具体步骤和方法。

一、共情 (Empathy)

设计思维的第一个方法是共情(Empathy)也叫同理心。大家可以想一下,我们在设计或者解决问题的时候,是不是站在需求人的角度去看待问题的,有的设计师可能只看到冰山模型最上面的一层,而冰山下用户真正需求却看不到,这就需要我们去了解用户,了解用户最好的方法就是共情。

1. 观察

观察是共情最基础的方法,其实就是深入洞察用户,如何从用户身上发现问题。你可以回想一下上大学时,是如何谈恋爱的,是不是一开始先默默的观察对方,看看有什么习惯和行为,喜欢什么东西,想办法去靠近和了解,找到一个突破点。比如你帮她修好了电脑,解决了她的问题,就这样自然而然交往,进入了恋爱状态。这就是观察,观察是人的本能,也是建立情感最基础的第一步。这里的观察是带有目标性的,并能解决实际问题的观察。

最近看了一个节目叫秘密大改造,就是帮助用户改造装修老旧房的节目。栏目组安排室内设计师装作成记者和用户一起住一起吃,设计师发现房子特别小,空间利用很低,观察房主人生活习惯、爱好等,通过交流了解房主的内心世界及对生活的向往等。完全和房主建立共情基础,等了解观察的差不多了,节目组就赞助房主和节目组一起去做公益的名义外出一个月。节目组故意不告诉房主在这一个月之内帮助房主改造房子,设计师就根据之前观察发现的居住问题,设计改造了房子的方案,并监督工人进行装修。等一个月房主人回来后,惊讶地发现自己的房子都认不出来了,完全超出了自己的想象,房主人太满意了,每一个细节都考虑到用户的需求,最终设计的方案用户当然比较满意了。这个栏目就是用了设计思维帮助用户解决实际问题的。我举这个例子希望帮助大家能更容易理解,大家有空可以看一下这个节目,看看设计思维是如何运用的,如果是自己该怎么用设计思维的方法去做。

2. 沉浸式体验

共情的第二个方法就是沉浸式体验,就是把自己当成用户去体验真实用户的感受才能更好的发现问题。比如IDEO公司被委托设计一款儿童车,就让工程师坐在现有的儿童车上去沉浸式体验,推着这些成年儿童去户外或去购物。体验结束后这些工程师就总结了:儿童车太矮了,前面看到的都是脚,还有灰尘,最重要的看不到妈妈没有安全感,小孩总爱哭,于是工程师就把儿童车做成可折叠并能升高,下面可以放东西,然后再转过来面向妈妈,儿童就喜欢了。这就是通过沉浸式体验来挖掘用户需求。

3.访谈

共情最后一个方法是用户访谈,可以通过定性或定量访谈目标用户,可以面对面的交互式访谈,焦点小组访谈、专家访谈、也可以是问卷形式的等,网上有很多访谈模版和发放问卷的网站。上文提到的例子秘密大改造的设计师和用户一起吃一起住,在不轻易的的交流中就知道了用户的真实需求,这种访谈方式用户是最不会感觉到有压力的,也最能发现用户真实需求的,所以最好的访谈是先和用户做朋友,就是完全把用户当成自己的好朋友,试问有几个公司能做到这一点呢?

二、需求定义(Define)

通过共情的方法我们充分理解需求,并挖掘了用户的诸多问题和需求,那么是不是所有的需求都要满足用户呢,怎么找到用户的真正痛点呢?这就需要重新定义需求,找到核心问题并进行设计。作为设计师你是否会遇到:接到需求就去设计,而反复设计的结果却不被用户满意,只是做到了被领导满意,而被陷入盲目的尝试误区中,这个时候应该回头想一想需求有没有被正确定义,有没有明确用户真正的问题。只有对设计需求进行有针对性的,有目标性的定义和理解,设计师才能找到最佳的落脚点,从而高效省时省力的完成任务。比如我们使用的Iphone,有没有发现不能自定义铃声,乔布斯肯定发现了这个问题,但为什么到现实还没有改进这个功能,但Iphone依然卖的很好。这就说明了自定义铃声不是用户的核心需求,没有谁会经常换铃声来炫耀自己的身份,这个功能有没有都不影响最终的销售成绩,原因可能是苹果希望用户不要被打扰,更尊重用户隐私。需求定义不是产品经理或老板拍脑袋定下来的,要把自己放到空杯状态,不要相当然的拍脑袋,也不要拍胸脯说自己的想法一定是正确的、要深挖用户需求,找到用户真正痛点,重新界定问题,从而确保解决产品核心问题的正确方向。


三、头脑风暴(Ideate)

设计思维的第三步生成想法,要生成想法可以利用头脑风暴来共创更多的好主意。提到头脑风暴可能大家都听说过,其实就是聚集各式各样的人一起思维发散,俗话说 “三个臭皮匠顶个诸葛亮,三人行必有我师焉” 就是这个道理。头脑风暴的前提是正确理解用户的真实需求和明确设计需要解决的核心问题,头脑风暴尽量不要找领导参与,因为领导一句权势的话会扼杀很多好意的产生。其次要注意自身思维的局限性,我们在思考问题时经常会带有自己的经验、习惯和思维方式,从而走进了盲区,如果有人提出一个好主意,有些人就不愿意思考了,这也说明了人的惰性。所以开展头脑风暴还可以帮助我们打破传统思维方式,打破盲区和惰性,从而打开多视角全方位的开放性思维,帮助产品找到创新的方法。还有要注意的是:面对别人提出的天马行空的主意,不要评判和否定,而是说Yes,and, 在别人想法上再去想,并且鼓励越多这样的想法越好,这样就会激发出更多人愿意出来分享自己的想法。最后,设计师从发散思维中收集灵感,再由灵感转变成可实现的想法,最后把最佳想法转变成全面、具体的实施方案。

四、原型设计(Phototype)

在找到最佳的解决方案之后,需要在原型上呈现出来,这就把抽象的概念与想法变成具象的模型来验证用户问题,这样能避免不合理不准确的假设。为了快速搭建原型可以采取精益创业的精神做出最小可行性产品MVP,花最少的时间和金钱来快速试错。最简单的原型可以利用随手可得的材料快速制作或现场绘制草图,达到易理解快速沟通的效果,从原型中看看有没有准确解决用户的问题,发现问题后,再去迭代和优化。

五、测试(Test)

原型设计好之后可以进行小范围测试,A/B测试,灰度测试等。我们要考虑在测试中要得到什么结果或验证什么问题,然后从观察真实用户的使用习惯和喜好出发。抓住用户的本能行为,重点看用户做出了哪些操作行为,用户真实的反应和你所预期的可能是不一样的。当用户提出不一样的反馈时,不要为自己的设计而辩护,用户说的不一定对,但用户说的一定是个事实,用户觉得不对,就说明哪里可能出了问题,要虚心接受批评。如果用户说的对,就去改,收集用户的反馈后,再进行快速迭代和优化,最后发布上线,产生商业价值可持续性。

总结

能读完这篇文章的你应该对设计思维有一定的概念了,你已经有了改变世界的能力,也许你在以后的面试中能更好的运用设计思维的方法来进行面试问答。最后简短总结一下设计思维的方法过程:“首先要学会与用户共情,帮助我们定义问题,再用头脑风暴的方式帮助我们解决问题并产生创新的方法,把创新可行的方法转变成原型,用原型进行测试和验证假设,再通过原型测试去了解用户,并重新定义问题,所以这五个步骤是不断反复和叠加的,最终打造出用户喜爱并能产生商业价值的产品”。

读了这篇文章你可能会发现,其实市面上所谓的产品思维,商业思维,突破性思维,服务设计,体验设计,其实都是来源于设计思维的核心理念和方法。设计思维帮助了很多企业,但也不要认为是万能的,它只是帮助我们解决问题的方法和工具框架,只有在项目实战中不断运用和实践,才能更好的理解和转化成自己的理论体系。

原文地址:站酷
作者:junken

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


让我们来聊聊Loading

纯纯

在人机互动过程中,用户与界面的每一次互动都是一次加载过程。加载设计对于使用者来说是非常影响体验的一个方面,后台复杂的数据计算时间、网络状况不好都有可能造成等待时间长而带来焦虑,今天就让我们好好来聊下加载,以及怎么让加载的体验变得更好。



加载的出现 


加载指的是用户在客户端发出一个指令后,直到出现反馈结果时,中间这段时间内计算机完成的一系列执行动作,所以只要你在App中操作请求更多数据那就不可避免有加载。 



加载的重要性


根据一份调查得出,用户能够忍受加载的最长时间在:3到8秒。8秒是一个临界值。但现在的高速互联网真是把我们宠坏了,如果一个页面的加载时间超过4秒,可能会被用户直接退出,除非Ta一定要打开那个页面。

这里有个很重要的数据叫跳出率,在谷歌的一项调查中就已经发现:

1-3 秒的加载时间跳出率提高了 32%。

1-5 秒的加载时间跳出率提高了 90%。

1-6 秒的加载时间跳出率提高了 106%。

 

为了降低用户等待的焦虑,获得更好的用户体验,我们必须让用户知道我们正在努力加载,同时要让加载更有趣来分散用户等待的注意力。



加载的场景


首先我们要先了解以下这些App中最常见的加载场景,也就是那些发出指令后应用需要长时间处理的加载过程。


1、当页刷新

下拉刷新(请求最新数据)+上滑加载(请求更多数据)

▲ins_下拉和上滑


2、从后台切回App

当你在多个App中切换使用时,超过一定时间间隔就需加载数据。

▲系统后台切回


3、启动App

当应用出现异常关闭、应用闪退等情况重新启动app,需要进行数据加载。

▲App启动加载


4、页面间的跳转

页面加载新的数据,涉及原生跳原生或者H5页面。

▲Moo音乐_页面跳转

 

5、定时数据刷新

在特定的时间内页面自动进行数据刷新,例如每天0点更新排行,大部分用在运营或跟时间相关的场景。

▲番茄小说_排行定时更新

 

6、即时消息

通讯类社交的App都采用实时推送机制,不需要用户手动操作也能接收到最新的数据。

▲Quack社交聊天






加载类型的进化 


1、加载器(Spinners)


加载器是最早被使用的方式,适用于快速加载,这也是使用率最高的一种。

▲旋转菊花记载


然而这种加载器有个缺点就是无法告知用户需要等多久,Nielsen Norman早在1993年就提到响应时间和loading动画,“如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。”【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】

 

所以加载器和进度条成了黄金组合,适用于长时间(10秒或更长)的加载过程,显示一个操作将花费多长时间以及目前所处的状态,通常有线性进度、百分比、直观数字等。

▲Cream M.


▲Gleb Kuznetsov✈ 


▲有道乐读、哔哩哔哩漫画


在此基础上加载器也开始往趣味/品牌化发展,使用情感化加载动画,可以让等待过程变得轻松、愉悦。Tips:搭建符合目标用户群体的生活场景,能拉近与用户之间的距离。

▲摩拜单车


▲ARCADE STUDIO


吸引用户的眼球,感觉时间会过得更快一点,短暂忘记等待的过程。

▲Markus Magnusson


▲DeeKay



▲RWDS


通过品牌logo或产品相关的图形呈现在界面上,将品牌基因融入整个Loading动画中。

▲ Google


▲Medium


▲有道乐读


▲ 开言 

 


加载器和进度条这一组合有很多变体,可以应用在不同的页面位置:


1.1、白屏加载

当前页面内容需一次性加载完成后才能显示内容,这是页面加载最原始的状态。当页面元素较多时,内容呈现的等待时间会变得很长,一旦时间太久要给予提示。


1.2、Toast加载 

当用户执行某个操作时,为了防止用户继续操作导致数据加载失败,则用Toast的样式来提示正在加载。在画面中间出现提示框,有时会加上黑色透明底盖在画面中间,这种情况一般除了返回上一级的操作可点,其他操作将受到限制。


1.3、进度条加载 

可以是在顶部或底部栏上,告知用户等待的时间长度,让用户有一定的心理预期。


1.4、手动刷新加载 

通过手势操作,快速加载和更新当前页面的内容。


1.5、局部模态加载

在特定位置进行加载,功能指示更明确,避免用户反复操作。


加载器这种方式相对比较简单,但也会阻断用户的其他操作,用户只能等待加载完成才能继续操作。会给人的感觉时间较长,且对于加载出来的页面没有任何预期。

 

那什么时候是需要中断用户操作呢?主要有以下两种情况可以作为判断:

1-当前的操作未成功,则接下来的操作或结果也无法显示,例如:启动App、手机支付、渲染滤镜等;

2-当前的操作本身不能与其他操作同步进行,需停留在当前界面保证操作完成,例如:扫描、迁移资料、实时翻译等。

如果中断时间较短可以使用toast加载提示,时间较长则建议用专门的单页且有可取消的按钮来提示加载过程,以引起用户的重视。


加载器的特点

· 适用性广

· 拓展性强(趣味性及品牌宣传)





2、分布加载(占位符Placeholder)


占位符分布加载就是当界面中图文同时存在时,如果获取完所有信息才显示所耗费的时间是很长的,因此为了缩短用户等待的时间,会选择优先加载快的元素(文字),慢的元素(图片视频等)则用其他的方式占位,最终等待加载全部完成。较为适合feed或瀑布流模式。

 

分步加载的好处是在等待加载的时间里用户可以看到相关的文字内容,不会像空白页加载或Toast加载,只能默默地等待加载的过程。

 

2.1、灰色占位符

将图片用灰色或灰色图(对开发更易用)来代替,中性灰在界面中不会抢风头,在暗黑模式中也适用。

▲灰色色值(例如#EFEFEF)或灰色图片


▲Youtube 


2.2、品牌相关图

在灰色图上加入品牌元素也是不错的方式,例如logo或吉祥物IP,将品牌人格化、情感化,辅助企业向用户传达产品的气质特征,在各类产品中广泛运用。

▲Moo音乐、有道乐读


2.3、彩色色块

通过程序提取面积较大的主色调,并设置几种符合产品调性的默认色,以防取色失败。需保证色彩库的颜色高级耐看,饱和度不要太高,不然很刺眼反倒引起到不好的体验。

▲Behance、Apple Music


undefined


▲Pinterest


▲Google Search


2.4、模糊加载

模糊图像也称为模糊技术,渲染图像的一个低质量版本,然后过渡到高质量版本,初始图像的像素和 kB 都很小。为了去除伪影,图像会被放大和模糊。

▲Behance、Unsplash


分布加载的特点

• 良好的阅读性;

• 准确区分已加载和尚未加载的内容





3、骨架加载(Skeleton Screens)



骨架加载就是先加载UI布局框架,再加载框架中的内容,细节通常按照骨架轮廓(也称为占位UI)、文本、图像的顺序出现。通过这种方式直观地提前让用户知道整个界面的架构,并营造出一种渐进的感觉,使用户感知加载稳定且速度快,提高了产品的体验感。

 

“Skeleton Screens”这个词最早出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕,通过将被动等待变为主动等待。

 

被动等待是指你只是坐在那里无所事事,看着加载器转了一圈又一圈。积极等待是当你在等待时做一些感觉像是进步的事情。骨架加载通过在每次屏幕更新时为用户提供新信息来鼓励主动等待。

 

通过这种方式,骨架屏幕将焦点从您等待的时间量上移开,并将其放在您面前发生的实际进度证明上,从而使加载过程感觉更快。当它显示已加载的内容和剩余的内容时,它允许用户构建准确的UI界面期望。

▲Medium手机版 


▲Medium网页版



实现骨架屏幕时,请确保占位符 UI 大部分准确表示最终 UI 的外观。否则,就会在期望与现实之间产生差距。

▲夸克 


LinkedIn 最近开始使用 Skeleton Screens 进行加载,骨架屏幕转移了用户的注意力。它使人们专注于进度,而不是等待时间。

▲Linkin 


骨架加载提升了加载界面的速度进度,这种速度反馈表现的更加友好并减少了不确定性,如果加载时间比预期的要长,也可以在骨架之前短暂地显示一个加载器,这应该会为你争取更多时间来完成加载。


通常骨架和分布加载配合进行,称为渐进式加载

• 显示UI骨架布局

• 优先加载文字;

• 加载图像(或主颜色)质量较低的版本;

• 再在后台加载高质量图像;

• 淡入高质量图像,取代之前的低质量图像。

 

 

骨架加载的特点

• 感知更快的加载速度

• 清晰的可视化进度指示





容易被忽略的加载


1、预加载

预加载就是用户浏览当前页面时就预加载下一级所有列表的文字内容,当用户点击进入已加载的页面就感受不到等待,在无网络情况下也能进行正常的阅读,在阅读文字的时候再进行图片或视频的加载(相反地则叫懒加载,进入页面时再加载数据)。但是这种方式会增加客户端和服务器的负载,也会占用一定的网络带宽。


2、智能加载

根据不同的网络状况选择不同的数据加载方案,最常见就是用在音乐/视频/下载更新等占用比较大流量的产品,当判断用户处于3G/4G或网络卡断的情况下,为了既让用户使用流畅也不浪费流量,会自动切换至低速低画质;而处于Wi-Fi条件下,会优先选择高清或高质量进行播放。

▲哔哩哔哩


3、缓存加载

也就是离线加载,通过现有Wifi资源将服务器内容缓存到本地,无网络或是弱网环境下读取缓存加载。可以解决无网或弱网情况下数据获取的问题,会占用本地的存储空间,以及后续的缓存处理需要考虑。





加载出错后的反馈


加载时间过长可能会损害你的网站的整体用户体验。如果加载的速度很慢会导致用户点击多次,这时我们需给用户一个明确的提示“网站正在发生的事情是什么,提供适当的视觉反馈”,加载失败后最重要的是给出解决方案,让用户可再尝试或寻求帮助。请记住,提供反馈是良好的交互设计和积极的用户体验。


undefined

▲哔哩哔哩漫画、闲鱼


▲Dribbble





在过去,设计良好有趣的加载器是我们所能做的最好的事情,而现在,渐进式加载成为值得考虑的替代方案,它加快了等待时间感知,还清晰地呈现了UI布局并建立用户预期。但这并不意味着不继续思考更好的加载方案,期待未来出现更好的交互体验。



总结

一个好的加载应当具备以下特征:

1 让用户知道应用程序正在运行,给出大致的等待时间,简单的进度条或更数字视觉化的方式;

2 告诉用户等待的原因,在处理什么动作表明软件并没有崩溃而是处理请求;

3 有趣的动画内容来吸引注意力,让等待变得可以忍受;

4 加入品牌,让用户在等待的过程中加深品牌印象,形成品牌感知;

5 尽量使用非中断式加载,降低等待的心理感知时长。

原文地址:站酷
作者:_阿丹a_

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



体验设计师的成本思维

分享达人

为什么设计师要有成本思维,以及成本思维在做我们做设计时对我们有什么帮助。



不仅仅在工作中我们需要思考成本,在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩,所以贝克尔在《人类行为的经济学分析》中提到:人的任何行为都是理性选择的结果,无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人,但是大多数人就是如此。



在夜深人静的夜晚你饥肠辘辘想吃夜宵,你可以选择下楼到周边小吃店就餐,也可以选择叫外卖,前者付出的成本是你需要通过身体行动来交换最后的结果,后者则是花费一定的金钱来代替前者的行动。


那么我们通常会如何选择呢?如果这两种成本有很大的差异,比如需要到很遥远的地方那么除了身体行动成本外,时间成本也会计算其中,所以相比后者成本陡然增大,于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵,外卖点餐会特别影响口感,那么你可能会选择前者,这里由于外卖口感和主观意愿影响到了我们理性的选择。‘



1.为什么要关注成本


成本决定了收益的效率、大小和方式,小到你伸手拿一支笔你会选择最近的,大到我们人生的投资。成本与收益之间并非是直接关系,收益的大小的不取决于成本的大小,还有风险因素。例如我们在对UI界面进行优化,可以选择的方式有很多:


1.只调整视觉,替换样式

2.对页面逻辑进行重构

3.整体功能进行重新分类组合

......


我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同,我们都希望付出最小的成本达到最好的效果,于是我们就会考虑到风险因素,假如新流程用户不会用怎么办,假如新版本导致的数据下滑怎么办,假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。



你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间,提供更好的环境与服务,让他们产出更多的价值。还有假如你的车坏了,你最直接的方法就是花钱找人帮你修而不是自学自修,因为你将花费太高的成本。


再举一个例子,我们想提升能力,有的人选择自学、白嫖,有的人选择报培训班,这也只是时间和金钱上的成本选择,如果你的自学(白嫖)在短时间收益很大那就毫无疑问帮你省了一大笔钱,但是如果自学很久都毫无效果,那么时间就是你花费的成本,时间和金钱不同的是,时间不可逆。看起来花钱比花时间更好?不是,花钱也有风险,比如课程质量和服务很差,钱没了还学不到,甚至赔上了时间。但如果你选对了,那么收益就远远会大于自学。




2.设计师可以关注哪些成本


1.实现成本


实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗,例如我们希望提升用户下单的转化率,我们可以选择:1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围,在这几个方案中最低成本是2,因为只需要调整样式和简单开发就可以实现,但收益并不是最高的,而其他的方案需要更多的角色花费更多的时间来参与,但是收益也不是显而易见的。所以如果你的产品比较成熟,那么我们一定选择成本更低的方案,反之我们会进行更高成本的尝试。



还有比如我们找工作,新公司福利待遇比现在公司好50%,平台也更大,是否不需要思考直接去呢?当然不是,你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时,不仅仅是时间精力,还有我们的身体健康的成本,我会觉得远远不值,成本太高。




2.机会成本


我们先来看一下定义:机会成本是指面临多方案抉择时,被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子,比如当前版本我们有1个开发一个设计一个产品,我们面临着两个需求,但是资源和时间只够我们做一个需求,这时候2选1,那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本,相当于我们放弃了那个需求所拥有的价值。


再通俗一点讲,我现在有100万,面临着两个选择:1.银行理财,年收益4%,4000. 2.做生意投资,年收益8%,8000,那么就相当于我花费了这4w的潜在成本获得了8万的收益。



3.边际成本


边际成本的理解很简单,我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲,比如你一共学习10天,第一天学完你考了30分,第二天学完你考了50分……第8天学完你考了94分,第9天学完你考了98分第10天学完你考了100分,花费的单位天数一样但是每次增加的分数却越来越少,收益也就越来越少。



在做产品设计的时候,我们往往会有一个板块叫为你推荐,比如微信阅读中的这个板块,它一次提供了用户6本书,虽然算法可以算出有许多书,但是这里每次只提供给用户6本,是因为涉及到了边际成本,少量多次提供能够让用户更聚焦,更快的选择好书本进行阅读,每多提供几本书,用户选择阅读的时间成本就会越大。有同学会问:那我只给1本不就好了,用户就能马上读了,何必要推荐6本?



我们如何保证那一本刚好是用户想读的,没有办法做到如此精准,如果每次只推荐一本书,而用户尝试了几次都不喜欢,他们就会放弃,所以这里就会选择一个临界值,比如我们可以选择每次放不同数量的书,根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。




4.体验成本

体验成本也是我们设计师需要时刻关注的,俞军老师在产品方法论中提到,用户价值=新体验-旧体验-替换成本,体验成本可以包含很多信息,最主要的就是认知与交互的成本。


4.1认知成本

如何降低认知成本可以从以下这些点进行优化


4.1.1.文案

文案的设计要求是简单易懂,避免产生歧义,之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析,大家可以再思考一下,是否会产生歧义。还有确定、确认大家是否知道怎么用呢?


文案也需要有情感化,避免生硬、带负面情绪的问题等等


4.1.2.样式

视觉最为直观,一个按钮一个控件的样式是否能满足用户的心智和预期,将会影响用户的认知,例如以下的几个按钮,出现在不同场景用户会出现一系列问题:为什么我点了没用?为什么还不能点?我到底该点哪里?



还有你的品牌是否识别度高,也决定了用户对你的认知,最近小米花了百万请大师做了新的logo,在视觉上更加圆润,在圆logo的基础上做了很多的微调,实际上也是避免了太大的logo变化导致品牌认知成本的提高,认知成本一旦太高,品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。



4.1.3.信息

比如我们希望新用户去关注一些大咖、kol获得更好的推荐,但是如果我们只是将推荐者的头像和昵称给新用户,那么这个策略就是失败的。因为我们没有考虑新用户的认知:1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。




4.2.行为成本

我们通过利用肢体来和媒介进行交互,目的是完成某项任务。其实只需要你抬手,那么就是产生了成本,只不过某些成本是固定的无法减少的,比如你要去骑车那就需要去解锁,如果没有锁车可能就会被偷走,这是出于安全考虑。


行为成本在具体数字产品中我们可以发现很多,例如你只需要将手机拿起,屏幕就会亮,相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私,所以还需要通过指纹或者人脸进行识别。


例如几种不同的验证方式,利用滑动拼图来解锁和输入相关验证码解锁,前者比后者的学习成本和操作成本都低。


在移动端我总结了几个减少交互成本的方法,不妨来看下:



1.利用滑动代替点击


soul音频处理

日期选择

iPhone底部横条切换窗口




2.利用点击代替输入

游戏昵称随机

股票买入数量



这里也有同学会问,既然都可以代替,那滑动能否代替输入?必须也是可以的,例如iOS自带的计时器中选择时间的控制器,还有闹钟设置,这里要注意的是,滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的,比如房价筛选,房价本身量级很大,用户筛选也不会精确到个位数,在这里用点击和输入会比滑动的成本更低。


反例就是音量、明暗控制,大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入,需要大致的范围选点击,非常模糊的感受选择滑动。



3.在必要时利用语音代替输入

例如我们在开车进行导航的时候,打字输入非常不便,于是加入了语音输入。还有在微信进行账号切换时,我们可以选择利用语音输入数字来验证身份。



4.给予详细的提示

对于新用户操作复杂功能和界面的时候,提供更多提示能够很大程度上减少用户的操作成本。



5.尽量不使用二级手势

在iOS或者安卓的手势控制中,我们会发现又一些常用的手势比如:点击、拖动、轻扫、双击、缩放,这里我们可以定义为一级手势。还有一些不常用的比如:重按、长按、三指滑动、三指缩放等,这些手势的认知成本和行为成本都很高,定义为二级手势,不建议频繁使用。




总结

设计师在日常工作中接到的需求繁多,无论是在做需求之前还是在思考设计方案的时候,成本思维可以帮助我们很好的规避一些问题和风险,我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。

文章来源:站酷      作者:应骏

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计师如何高效沟通需求

分享达人

前言

——————————

沟通是为了完成设定的目标,把信息、思想和感情,在个人和群体之间传递,并达成协议的过程。沟通目的一般分为:说明事物、表达感情、建立关系、达成目标。


需求沟通是设计师和团队围绕需求目标,信息传递的过程,是设计师展开设计工作的起点,贯穿整个设计过程,沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性,对很多新手设计师来说,在需求沟通过程中,可能会碰到一些共同的沟通问题,比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。


针对这些问题,本文尝试梳理需求沟通过程中几种典型场景和方法,以期帮助新手设计师快速识别需求沟通中的常见问题;提升沟通效率,快速达成共识;掌握沟通窍门,更精准高效的产出需求。


本文主要分成2个部分,第1部分主要聚焦在需求沟通过程中的不同阶段,面对的典型沟通问题和解决方案;第2部分主要介绍沟通中一些常见的技巧和方法。



Chapter 1

——————————

需求沟通的目标和方法


1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分:了解需求->分析需求->探索方案->实现方案。在不同的阶段,设计师要解决的核心问题不同:


了解需求阶段,设计师和产品针对需求目标进行讨论,并和团队就产品目标达成共识;


分析需求阶段,设计师和产品针对产品策略合理性进行讨论,并提出体验诉求;


探索方案阶段,设计师探索设计方案,并和产品就商业目标和体验目标达成平衡;


实现方案阶段,设计师和产品协调优先级,调整方案,确保方案最大程度实现还原;




1.2 如何更好的了解需求,明确目标,达成共识

在了解需求阶段,设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类:一类是需求目标较明确,产品有明确要解决的问题,如提升产品体验、满足某个用户明确需求、完成某个产品目标;一类是需求目标较模糊,比如挖掘用户潜在需求,探索新的业务方向。



对于目标较明确的需求,在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后,即可进入需求分析,策略讨论阶段。


但对于方向探索类需求,如何协助产品探索目标,和团队达成关于目标的共识,是这阶段的沟通重点。以一个创业的项目为例,产品想做一个图片社区,原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下:



在产品的催促和时间压力下,设计并没有围绕产品定位、用户群、产品目标进行充分讨论,也没有和团队成员达成共识。在这种情况下,选择跟随产品的节奏,陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论,方案的输出过程变成了试错的过程。产品方向修改频繁,这种被动的沟通方式,导致整个团队目标感不清晰、理解混乱。



经过反思和问题总结,设计师发起了主动沟通,运用设计方法协助产品明确需求,提升方向说服力,探索如何就目标和团队达成共识。首先,需要和产品明确用户群,并寻找用研协助,或发起快速访谈了解用户其次,组织团队相关成员发起关于产品目标的讨论,围绕产品决策人给出的产品初步方向,团队成员每人写下对产品的期待,提炼总结团队成员的想法,提炼总结产品目标再次,根据用户访谈材料,利用亲和图法,提取关键词,从用户诉求中洞察提炼用户目标。最终,产品目标得以明确,团队也取得了关于目标的共识,同时通过快速demo,来验证优化,项目得以顺利进行。




1.3 如何更好的分析需求,确保产品策略合理性

在了解需求背景、用户群体,明确了需求目标后,进入需求分析阶段,通常产品会给一个商业假设:假如做了xxxx,用户就会xxxxx,产品可以达成xxxx目标。以一个需求为例子:产品想做一个任务体系,通过福利吸引用户做任务,从而拉动产品活跃。


如果设计师完全按产品给的商业假设输出,方案产出过程貌似很顺利,但可能隐藏了很多问题。以本需求为例,产品的商业假设逻辑是:用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求;


但这个假设是正确的吗?设计师的价值就在于,这个时候要能找出产品假设中的问题。通过对用户的了解和洞察,还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题,才能顺利实现产品目标。


通过对用户实际参与过程的分析,用户在看到任务奖励后,实际需要权衡的内容很多,如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大?分析需求过程关键就是找到这些问题的对应策略,强化用户参与的动力,降低参与难度。




1.4方案探索阶段,如何平衡商业和体验诉求

在方案输出阶段,设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标,很多时候希望把达成商业目标的手段做的很强;



当发生围绕商业目标和体验问题,谁都无法说服对方的情境时,设计师该如何沟通呢?


首先,作为设计师要摆正沟通立场,理解商业化是任何产品的根本目标,体验也是实现商业化手段之一,我们反对的不是商业化,而是简单粗暴的商业化方式,商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。


其次,应能够识别对于曝光越多越好,越直接越有效的这种思维方式,通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时,最节省力气的做法就是提升曝光等方式达成目标。


当发生争执时,如果仅仅站在设计立场上,用设计理论说服对方,通常效果有限。尝试找到产品实现商业化目标背后的逻辑,不要用手段代替目的,探索更好的实现商业化方式的可能性,比如尝试在合适的路径上推荐,或探索用户更容易接受的内容形式。




1.5 方案实现阶段,如何协调优先级,推动方案最大程度还原

在方案实现阶段,很多时候由于时间紧张,产品仅完成最核心功能,部分体验相关功能一直无法得到优化。


通常如果方案产品认可,但推进意愿不高时,可能的原因是:1.当前方案不是核心KPI,产品要优先保证对kpi影响最大部分完成;2.投入产出比不划算,方案在产品看来投入的人力/时间/资源过大,并不值得;3.方案改动可能引发数据风险,产品并无法确保改动一定能带来数据的成长;4.资源紧张,产品也很想实现方案,但项目时间/人力/资源真的很紧张。



这种情况下,首先,要和产品够分沟通他们的疑虑和担心,到底是哪类问题;其次,从心态上也不用急于一时,做好长期推动的准备;还有,充分优化方案,消除产品疑虑,寻找合适时机进行推动。在项目逐渐迭代的过程中,对需要推动体验优化点持续关注,尽可能放大方案价值,结合新的需求点,思考能否从价值拓展角度,如提升品牌价值、扩展性等角度提升方案说服力;同时,从缩小成本和打消产品疑虑角度,做足准备,推动方案。



Chapter 2

——————————

沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程,表达者的信息传递到接收者时,因为背景、环境、理解能力、传递完整度等差异,接收者仅能接收部分信息,而接收者在理解消化后,再将自己的信息传递出去,这个过程循环往复,会导致两个最常见的沟通问题:目标偏离以及信息衰减。学习适当的沟通技巧,可以有效减缓目标偏离和信息衰减。


2.1 如何防止沟通目标偏离

要防止沟通目标偏离,首先要理解什么会导致目标偏离?1.目标不清晰,比如本来想找产品聊下某功能体验不合理,但因为产品一直说项目时间紧,被倾诉了一通苦水后,忘记了本来要沟通的问题,转移到了其他话题上,最后不了了之;2.缺乏同理心,比如当发生争执时双方不能互换角度,产品一直在说实现目标手段和现阶段问题难点,设计在说体验问题和设计规范,双方互不妥协,陷入争吵;3.陷入情绪,表达观点时陷入情绪化的争执。


针对这三个会导致沟通目标偏离的问题,可使用以下技巧:


① 设定沟通目标并保持关注:在每次沟通前想清楚自己的目标和底线,尝试用全局视角分析自己设定目标的合理性;在沟通过程中要经常反思当前沟通的问题是否已偏离了目标,对达成目标是否有帮助;发现目标偏离可尝试改变节奏,思考接下来说什么有助于达成目标;


② 换位思考:能够倾听对方的问题和困难,尝试寻找解决问题的办法,而不是一直表达诉求,无助于问题的解决和推进;


③ 控制/倾听情绪:美国心理学家埃利斯创建的ABC情绪理论,拆解了事件发生和情绪之间的关系,指出事件的发生并不是导致情绪的直接原因,我们持有的信念才是。因此在沟通中不要加入太多内心戏,过度解读事件。比如产品让设计反复改稿时,可能会解读为产品在故意刁难,尝试了解反复修改背后的原因,可能对解决问题更有帮助。



2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差,会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达:“设计稿尽快输出”、“页面太结构化了,想要更社交化一点”、“能不能做得更有创意一点,更有趣点”当出现这些类似的沟通语句时,可以尝试通过具体化方式,进行确认。



对于可能会出现理解偏差的问题,重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗?”;重要的沟通后,可梳理沟通记录,企业微信同步周知确认;方案的沟通过程可以快速画草稿确认;尽可能的减少因为理解不一致导致的沟通问题。



总结

在需求沟通过程中,我们要对不同阶段的沟通目标有清晰的认识,围绕目标进行充分准备,运用设计方法了解用户、了解产品核心诉求,做到知己知彼,才能进行有效的沟通。


在沟通过程中保持对目标的关注,始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。


沟通是解决问题,共同协作的重要方式。如果你觉得自己不善于沟通,可能要反思下沟通前是否想清楚自己的沟通目标,对于解决问题的过程、方法是否熟悉,准备是否充分?当我们能做到知己知彼、胸有丘壑时,沟通可能就变得简单起来。


文章来源:站酷 作者:腾讯ISUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


交互体验设计的核心概念之:示能与意符

分享达人

很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。


为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。

就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。




1.示能


当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。不知道大家有没有看上一篇原创文章结尾那个作业,如果做过的小伙伴可以发我交流一下。传送门--》


所以很多UI设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是UI的上游,那么UI设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。


OK,那么来我们先来讲:示能



1.1示能


心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。



用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。


假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。


那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。



在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。


开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等



大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到2处甚至3处开关的控制,而每处开关的数量会在3-5个,这个时候不用意符去标识,就很麻烦了。



回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。



开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。



1.2.反示能


和示能相反,指的是任何物体之间不能进行怎样的互动。


例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。


数字产品中也会遇到一些有很明显反示能的控件,例如segment Controls(分段控件/分段选择器/分段选择控件),它是iOS的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和tab不同。



并且在该控件的描述中,seg通常数量只能在5个以内,并且5个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。


那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样



在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用tab则会产生冲突,而使用seg则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。


所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。



1.3.不同场景中示能的变化


一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。


下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。



左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的3个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。



这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。



1.4.相同示能的不同表现方式与含义


这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的tab与其视图的呈现,tab的本质就是利用多个标签来切换标签下的视图,所以标签除了用tab的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。



再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在b端web设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。



再例如一个父子集共生的内容卡片



同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。


对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。


说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。



这里可以用一个比较形象的比喻,我有4张椅子,其中3张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过8张,如果没有人坐则只显示一张椅子。


但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。


所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。 


小结

示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。



2.意符


咱们上一篇讲到了第一个概念:示能,如果忘了或者没看的同学可以再去看一下。


我是传送门


今天我们要来讲意符,意符在外面日常与事物的交互过程中,非常重要。


以下文字比较干,部分需要大家仔细阅读动脑,觉得难懂的小伙伴可以联系我交流


2.1意符的类型与表现形式


示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。


设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。



所以意符告诉我们对事物正确操作方式以及任何可感知的标识说白了就是一个能够表达事物具体操作的符号。


大家还记得上一篇文章举的一个门的例子吗?在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。


如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。


OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。



意符的类型


1.文字


文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。


案例1:开关


开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。



这里的文字就是意符,用来解释开关的作用。


开关本身具备的含义中是有这样两条原则:

1.需要让用户感知操作后立即生效 

2.开关所属文本必须简单清晰无歧义


所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。



再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。



这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。


接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?


首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。


那么大家再来品一品这两句话:1.“不把我推荐给....” 2.“把我推荐给....”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。


不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。


那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。


开关文字意符的描述方式还有几种不同的方式:


1.内容标题+开关切换后状态与内容变化的描述

第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收xxx消息,而不要写成关闭后,不接受xxx消息。


2.功能直接描述

不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。


3.批量整体描述

对于同一种类型的功能设置,可以利用批量的形式做整体描述。



再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释



例如b站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。



文字意符很直观,但也要避免歧义。



2.图形/图标


图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。


既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。



例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化


我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。


这些其实是很简单和基础的概念,但是很多工作多年的UI设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问UI和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。


我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,


在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。



还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。


为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。

暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。


还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。



例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看iOS系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。


那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。


两个原因:


1.因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:




是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标


2.暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?


图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。



图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。



我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。




3.颜色


颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。


无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。


而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。


绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。


在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。





4.声音

声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。


你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。


声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。


还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟1秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。



5.动效

动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。



例如我们看到理发店门口正在旋转的彩色灯。


这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。


好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?这就好像一个出轨的女人告诉情夫如果家里有人则阳台上放一盆菊花,家里没人则放一盆绿萝是一个道理。


那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:


1.降低用户认知成本

我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的45路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。


所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。




2.引导/提示/强化

对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等


3.氛围、强化视觉

电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。



4.表示状态

当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。





5.更多意符

意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。


很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。



小结


意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。


设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。


文章来源:站酷      作者:应骏

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


浅谈设计中的温度——如何用互联网思维帮扶乡村孤寡老人和留守儿童

分享达人

前言

 _


提及“设计的温度”,不得不提我们老生常谈的“情感化设计”,提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次:本能层、行为层、反思层,层层递进。



1/ 本能层的设计,是视觉的直接反馈,是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣;

2/ 行为层的设计,注重的是效用,产品功能是否好用,易用,用户使用产品过程中能否高效解决问题;

3/ 反思层的设计,是情感化设计的最高层次,指用户使用产品后,是否建立情感连接和记忆反馈。

因而,它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。


如果一款产品在满足基本功能,对于用户有用,同时好看并且易用,使用完之后还能产生愉悦以及满足感的话,那么这将是一款好的情感化设计产品,那必然是一个有“温度”的设计。


如果一个项目本身充满社会使命和责任感,那么“有温度的设计”将可以助推项目的落地链条,让使用平台的用户有“温度”,更让项目背后的人员感受到“温度”。


因为,接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗,用互联网思维去帮扶社会的乡村孤寡老人和留守儿童,用有温度的设计去践行有温度的项目。




项目背景

 _


随着我国社会经济的快速发展,农村青壮年劳动力转入城市,人口老龄化趋势加剧和家庭结构的演变,“空心村”越来越多,因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计,在农村独居和空巢老人超过3000万人,留守儿童也达到了近2000万人



孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题;而留守儿童因为缺少父母监管和陪伴,极易产生很多身体及心理问题,这两大群体是我国人群结构的重大组成部分,一个是未来的花朵和希望,一个是曾经发过光热的迟暮老人,他们需要关爱和守护,需要有一座“有温度”的桥梁,为留守儿童撑起蓝天、健康成长;为孤寡老人送达温暖、安享晚年。



基于社会现状,践行社会责任,腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会,预想搭建一个线上与线下结合的平台,成立“为村暖心小站”,立足于脱贫地区的农村社区,主要服务农村的一老一小以及其他需要帮助的困难群体,解决日间照料、健康护理及心理关怀等诸多问题。




设计思路

 _


1,定义产品形态


“暖心小站”的整个帮扶路径是以线上+线下相结合的模式,依据产品需求,在线上可以招募志愿者、发布救助需求、触达爱心人群;在线下建设实体服务站,开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。



那在线上的呈现形态上,主要考虑APP和小程序两种方式,经过对比分析,APP稳定性高、体验好,但是在乡村的受众群体内,互联网基础还是很薄弱的,要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广,占有率很高,那么依托于微信的生态、建立小程序,在推广层面会更加便捷和高效。同时,暖心小站本身结构简单,是一个非常轻量化的应用,这种特性也更适合以小程序为载体。



2,确定产品结构


在线上的产品框架上,设立两大专区:关爱老人专区和呵护小孩专区,各自创建知识宣导、在线课堂、爱心募捐等版块内容,同时在线上召集志愿者,在线下成立社区服务站,开展帮扶活动,然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。


确定框架之后,梳理角色和场景。本项目主要包含线下服务站的站长,工作人员,志愿者以及社会的爱心人士。



站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采,社会的爱心人士通过线上平台查看对应信息并参与对应活动,最终帮助农村的一老一小解决各种帮扶问题。


经过梳理分析,平台使用人群的年龄跨度较大,30岁到60岁这个群体占到了80%左右,所以在产品的呈现形式上将兼顾青年到老年的年龄跨度,让设计更友好,让产品有温度。



3,制定设计策略


定目标


基于前面分析,在农村现实环境中的孤寡老人和留守儿童,他们生活是灰暗的,情感是封闭的,他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖,让孤寡老人可以健康生活,让留守儿童可以健康成长。 




所以在设计目标的确定上:让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。



定色


品牌色的推导,是站在线下的实际场景感受来提炼,乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的,他们需要金灿灿的阳光给生活带来希望,而我们日常所的见的公益组织通常都是以红色系为主,似乎已经形成了作为公益组织的标识色,因为这种大红色传递爱心、带来温暖。


这些颜色都很有代表性,黄色代表阳光,红色代表公益,而暖心小站,将这两种颜色进行叠加融合,形成阳光橙,再以阳光黄纳入辅助色,形成温暖、友爱、活力、阳光的色彩体系。





定原则


在设计原则上,考虑到我们的用户群体年龄跨度比较大,一些年长用户互联网基础薄弱,为了让产品更有亲和力,让年长用户都能轻松上手,所以在策略上制定简单、易用、温暖的设计原则,保持框架简单清晰、交互简单易用,让产品有温度,让用户觉得有用、好用、还想用。



在“简单”方面,保持产品的页面框架要简单,结构要清晰,让用户清楚知道自己在哪里,所以在产品形态上只做了内容页的垂直展示,没有过多琐碎的信息入口,让页面信息更集中,浏览体验更聚焦,让年长用户也可以简单使用。



在“易用”方面,简单的框架和结构是易用的基础,在视觉元素的排列上,通过加大的图片、加大的间距、加大的圆角,通透的页面布局可以让内容陈列更集中,获取信息更高效。页面的间距以4px为基数,分为5个跨度,在统一性的基础上让界面更有节奏感,层级更清晰,从而提高产品的易用性。



在“温暖”方面,主要体现在在调性、元素、和内容上:

调性:以“温暖橙”+“阳光黄”为品牌色系贯穿始终,形成温暖、阳光的整体基调;

元素:在常规尺度上进行适当加大,加大的字体,加大的卡片占符,加大的点击区域,让产品更照顾年长用户的操作习惯,让产品更有温度;

内容:在内容及主图的运营展示上,突出“温暖”的调性,增强用户的共鸣,拉近用户与产品之间的距离。





整体视觉呈现

 _


整体以大面积的“温暖橙”为基调进行铺设,营造温暖阳光的质感,顶部展示产品名称和合作logo,增加产品的权威性和信赖度。


自上而下,控制大的间距和留白,分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。



一老一小的入口及详情:通过大头图的形式加强专题感知,引导用户点击。详情内展示相关的关爱资讯和助力入口,让用户可以选择性的进行点对点帮扶。



小站详情:分为小站介绍、人员风采、小站活动、和运营概况四个部分,清晰展示线下暖心小站的各项事务,让线上用户对线下小站有更全面的了解。



个人中心:功能简单,布局简洁,根据不同身份类型展示不同入口。作为站长的话,拥有志愿者审核、活动管理的权限,整体表现形式以统一的卡片式陈列,让内容更聚焦。




秉持“简单、易用、温暖”的设计原则,尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖,让用户想用,让产品好用。


经过多次推导与线下团队配合,小站1.0在今年5月初上线,第一批试点小站正在使用中,得到了较多正向良好的反馈,为乡村的一老一小带去了许多暖心的帮扶行动。



上线反馈

 _



产品上线之后,通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动,比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动,在重庆周家寨服务站新建了日间照料室,提升老人的居住生活质量。


今年5月20号,在中国互联网公益峰会上,为村暖心小站进行线上交流展示,获得了很多与会代表的关注和认可。




截止2021年7月,平台上线了两个试点小站,共举办了数10次线上+线下结合的活动,活动参与了520人,受到36000人以上的关注。暖心小站的建立和运营,对乡村的“一老一小”提供了更加有针对性和个性化的服务,同时加强对当地社会组织的培育和孵化,提升了服务对象的生活质量,促进和谐社区建设,助力乡村振兴。


通过这些试点小站的成果和反馈,让设计目标也得到一定程度的印证,让产品体现了“有温度、有故事、可以连接情感”的桥梁。




设计反思

 -


随着互联网的发展,人们对于产品不再是简单的形式服从功能,而是逐步转向形式服从情感。让设计回归情感,让有温度的设计去创造有温度的产品,可以增进人与产品之间的情感连接,让产品更有生命力。再者,用有“温度”的设计思维,去捕捉和解决社会问题,通过具有社会责任感的设计,推动社会进步,形成坚实有用的“设计力”。


那么,如何提升自己的设计力呢?可以概述三个保持一个向善。



保持热忱心

设计需要坚持,而坚持源于热爱,保持热忱之心会发现许多美好的事物,同一个需求会自发性地探索很多不同的解决方案,因此会洞察需求背后最本质的东西,切入要点寻找最优解。


还有一句话:“设计路上,唯有热爱,方能抵御岁月漫长”。


保持敏感度

这里的“敏感”指的是设计师要有好奇心,善于发现新事物,善于追踪最新行业动态,是一种职业敏感,是一种自觉行为,表现为热情、兴奋、敏锐,对新事物充满热情,对于新发现充满兴奋,能够特别敏锐的捕捉社会痛点解决设计难题。


保持共情力

生活中常说,有共情的人往往都特别感性、多愁善感,泪点低笑点也低,因为特别有代入感,而且对事物特别专注。


设计上所说的共情力则需要保持感性,同时也需要理性加持,不偏不倚。让设计师自己能切换到项目内的各种角色,不把自己当成局外人,将自己融于产品本身,随时切换为不同用户的视角,更能深入地发现、分析和解决问题,让设计站得住脚、更接地气,让设计有依有据。


让设计向善

设计的最终目的是传递需求、解决问题,这就意味着设计的初衷不同,那么最终的导向也会截然不同。

设计向善,保持“善”的初心,主张设计回归社会、回归到人心最本质的出发点,做有温度的设计、有仁心的设计、可持续的设计。


关注社会问题,保持一颗敏感而善良的心,用“设计向善”解决社会痛点,坚实巩固自己的设计力。


文章来源:站酷   作者:峰HENG

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


「新手向!!」“8点”网格系统是什么?

分享达人

一、前言

1、代码>原型

无论是高保真还是低保真原型,设计人员在软件中的展现所有效果,最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时,设计就不可以再随意修改。

最重要的不是在设计软件中展现的效果,而是实际在用户设备上实现的效果,因此在设计时,要提前考虑代码实现的成本。

2、盒子模型

盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成:“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。

  • Border:围绕元素外围的边线。

  • Padding:元素及其子元素之间的间距。

  • Margin:元素和其相邻对象之间的间距。

3、什么是point(pt)

点(pt)取决于屏幕物理尺寸大小,是绝对尺寸单位。对应@1x图的1px。

像素(px)取决于实际屏幕显示分辨率,是相对尺寸单位。在@2x图情况下1pt=2px,在@3x图情况下1pt=3px.

4、@1x

建议使用“@ 1x”进行设计,其他尺寸图可以从@1x进行衍生。

如果是以@2x进行设计,那么若要得到@3x则要先缩小50%然后再扩大300%,增加了不必要的工作量,并且很容易出现奇数、小数等不便利数值。

5、使用像素网格

创建的每个UI元素都应该和像素网格对齐,防止出现半像素的“锯齿“效果。

文本由于其图形的特殊性,难免会出现无法对齐像素的情况,这里可以忽略。

6、文本元素

文本是页面中最重要的元素之一,但因为其本身的多样性,产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格,将基线网格采用4pt进行等距划分,来和其他元素进行和谐搭配。

二、8点网格

1、基本原理

使用8的倍数来定义区块和内部元素的尺寸,间距等。

当区块元素为文本(例如按钮)时,将文本设置成其余部分一致(或者平台预先定义好)的大小,然后使用padding来确定区块大小。如果是全宽的元素,使用padding来确定高度,并使用一致的水平边距来确定宽度。

2、两种方法

  • 硬网格:将元素放置在以8为增量定义的显示网格中,使用额外的透明背景元素,和前景元素组成一个整体。

  • 软网格:保证元素之间的的间距为8的倍数,以此获得更快的处理速度,从而得到更流畅的体验。

三、为什么重要

1、保持一致性

当所有尺寸都遵循相同的规则时,就有了一致的UI。

2、更少的决定=更少的时间

减少自定义的尺寸规则,得到更快的代码运行速度。

3、多平台设计

无论设备外形如何,主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。

有一些屏幕的尺寸无法被整除(iPhone 6的375*667pt),只需要保持padding和margin一致,适当调整区块的大小来进行适配。

四、实施技巧

1、对齐网格

确保开启了“对其像素网格”选项。

2、Rems和变量

如果根文根大小设置了16px,则可以使用0.5rem的增量在8点网格上构建布局。

如果不喜欢这样做,或者是不喜欢rems的使用方式,可以使用CSS或预处理器间距变量来处理布局,同时保留变量以供后期维护。

3、定义你的网格

大多数软件都可以设置快速“微调”,一般默认为10px,sketch中可将其调整为8px,便于快速的工作。

4、捷径

学习并善用快捷键,提高工作效率。

5、框架你的图标

图标设计通常需要进行视觉修正,因此,在其周边放置透明框架(例如Hard Grid的方式),来保证整体的一致性。

6、放大、缩小

设计时经常会放大预览界面来进行设计,这会导致会略整体;如果以缩小的尺寸会导致看不到细节,因此要经常变焦画面来确保能看到整个画面。

文章来源:站酷   作者:YMOOM

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

如何运用情绪板定义视觉风格?

分享达人

前言 

相信每个设计师,平日里都会去关注各种各样的视觉风格、设计趋势,如杂志风格/3D风格/简笔插画/晶白风格/赛博朋克/国潮/新拟态/孟菲斯等等各种各样的视觉风格。但是在了解这么多视觉风格的同时,又不知道什么样的风格适合是自己产品的,做设计时仅仅凭借着直觉跟过往的经验来进行设计,最终导致设计稿禁不起业务方的推敲,并且被贴上设计不专业的标签。 

其实,每一个产品设计都需要设计师花费大量的时间精力去推倒出属于自己产品的视觉风格。而不是仅仅参考当下流行什么设计趋势、设计风格,就开始进行设计。流行的视觉风格大多不会一直流行,只有符合平台调性的视觉风格,才能更好的为产品赋能。 

因此,学会如何定义视觉风格,是每个设计师都需要去学习并且加以运用的。 

什么是情绪板? 

情绪板(英文Mood Board),通常是指一系列图像、文字、样品的拼贴,是设计中最常用的定义设计和视觉方向的设计方法论。 

情绪板的本质在于: 将情绪可视化,将较为抽象的词语转化为可视化的图形等,比如:“安全”这个词可映射出盾牌/锁/警察等等给人们感觉到安全的人事物。 




情绪板的作用?


情绪板能够更加帮助设计师与业务方达成设计共识,并且能够帮助设计师定义视觉风格与找到设计方向,使设计更加合理,为产品赋能。


如何运用情绪板定义视觉风格


情绪板的制作流程


情绪板的制作流程大致分为5步:


1、明确原生关键词


了解项目背景或需求本身的方向,通过内部讨论,用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。


2、挖掘衍生关键词


在原生关键词的基础上让参与者发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。

可通过视觉映射、心境映射、物化映射,得到用户理解的“抽象关键词”所对应的“具象定义”。


3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。


4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。



举个案例说明:


明确原生关键词


讨论原生关键词


了解项目背景或需求本身的方向,通过内部讨论(可叫上产品、运营、老板等进行讨论),用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。



确定原生关键词


从讨论的关键词中提取3-5个最适合的关键词。



2、挖掘衍生关键词


在原生关键词的基础上让参与者通过视觉映射、心境映射、物化映射,发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。



3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。



4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。




总结


情绪板作为一种常用的设计方法论,能够帮助设计师更加合理的总结出合适的视觉风格。设计不仅仅是只是跟随着设计趋势,怎样找到适合产品的视觉风格,是每个设计师更需要去掌握的内容。


以上内容,是学习如何定义视觉风格的其中一种方法,希望对大家有所帮助,如有不同意见,欢迎指正!


图片版权归原作者所有

原文地址:站酷
作者:船长的成长日记

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


设计师,如何高效完成竞品分析!

周周

在工作中,我们经常会去做竞品分析,那么如何才能快速聚焦做好竞品分析?目前也发现有些同学不知道怎么做,有的甚至直接照着网上的框架机械地往里套,结果分析出来的结果不知所云,做了很多无用功。

做竞品分析最重要的一点,要清楚你的目标是什么?需要基于目标去切入分析。而且分析过程切忌大而全,越是细小聚焦的分析价值越大。


正好,最近有些设计师私下问我关于竞品分析的事情,因此写一篇文章,把我的想法与大家分享,下面开始。




1.什么时候开始竞品分析

竞品分析其实一般在任何时候都可以进行,做足市场竞品研究,可以有效帮助我们理解竞品,发现可以使我们产品脱颖而出的机会,同时也可以减少竞品对我们的直接影响。

那么启动竞品分析的几个关键时间节点,新项目启动、项目改版、竞品有重大更新时,这三个阶段去做竞品分析,是相对不错的时间点。



2.竞品分析方法

竞品分析方法有很多,在这里,我分享大家能快速掌握并上手使用的方法。通过以四个步骤,我们可以初步完成一份竞品分析文档。下面我们来看看每个维度如何进行?

(1)寻找合适竞品

挑选竞品是非常关键的第一步,一般需要根据自家产品定位,选择垂直TOP级别的产品几个不同用户群体产品就可以,不需要把所有的都拿来分析。但是除了这个方向,我们还需留意一些潜力较好的产品,比如产品口碑较好、用户下载量增长快,这也是值得我们研究的一个竞品。

挑选完竞品后,我们需要将竞争产品进行分级,比如一级竞争对手,二级竞争对手,细分市场竞争者。因为不同等级,意味着我们花时间会有所不同。最直接竞争产品,当然需要去深入研究。

如果不知道你这个领域那些产品做得好,这里推荐大家一个产品查询的工具Sensortower,可以去看看排名。

(2)定义分析维度


我一直秉承的一个观点,也是在之前一个大师哪里学到,竞争分析切忌大而全的分析,因为越是大范围分析,越是无法分析透彻,从而价值感就会越低。我们在分析时候,需要定义一组关键的维度。


比如,这次竞品分析,只看某个重点功能的内容布局设计趋势,那么我接下来的研究分析中,都只围绕这个主题进行。


(3)将竞品进行比较


针对这一步,需要深入挖掘产品核心亮点,要去思考为什么这款产品是这样的设计?同时将优缺点都说明清楚。这里比较推荐的一种方法就是截图进行对比,快速有效。
比如以音乐软件的搜索入口为例,站在用户视角看,这个产品核心功能是怎么布局的?体验亮点怎么设计吸引用户的?视觉质感呈现如何打造?主流表现技法?需要将每个竞品的做法优劣截图对比,并将优缺点写出来。

同时还可以进入到更深层级,比如,搜索不到情感化如何处理的?搜索过程中加载表现方式等?当然,这些差异化打造,还可以看看其他行业做得较好的产品。


(4)得出关键结论


关键结论,就是将前面分析的重要要点进行整合筛选,得出最终的产品参考策略,后续可根据这份分析策略可作为产品设计参考点。


这里需要注意的是,竞争分析得出结论,是给我们学习别人如何把用户体验做到极致的?关注竞品如何解决用户体验问题的?品牌穿透如何做?我们完全可以充分利用这些打造自己的产品优势。


文章来源:公众号   作者:功夫UX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档