首页

用研方法论:眼动与脑电研究

ui设计分享达人

眼动研究


眼动原理:

眼动追踪

是指通过测量眼睛的注视点的位置或者眼球相对头部的运动而实现对眼球运动的追踪。

眼动仪

是一种能够跟踪测量眼球位置及眼球运动信息的一种设备,在视觉系统、心理学、认知语言学的研究中有广泛的应用。PC/IPHONE/CAR都可使用。


常用指标:

注视

在获取信息时,眼睛停留在所加工的物体上,称之为“注视”,超过100毫秒,认知加工。

眼跳

在转移加工对象时,人眼在两个注视点之间的快速动,称之为“眼跳”,注视点或注视方向发生改变,获取时空信息,无认知加工。

跟随运动

当测试者与眼睛存在相对运动时,为了保证眼睛总注视这个物体,眼球会追随物体移动。眼球追随物体移动,有认知加工。

眼动的本质 = 人注意力资源的主动或被动分配,选择更有用或更有吸引力的信息。


常用分析:

注视轨迹

记录测试者在整个体验过程中的注视轨迹,从而可知测试者首先注视的区域、注视的先后顺序、注视停留时间的长短以及视觉是否流畅等。  

注视热点图

用不同颜色来表示测试者对界面各处的不同关注度,从而可以直观的看到测试者最关注的区域和忽略的区域等。

兴趣区分析

考察测试者在每个兴趣区里的平均注视时间和注视点的个数,以及在各兴趣区之间的注视顺序。

例如:用户视觉顺序


问题:确认按钮位置不符合玩家浏览路径。

分析:图中是玩家的视觉动线,玩家先看见确认按钮再看见选择角色区域,这不符合操作顺序,很可能导致有些玩家忽略了选择角色。

建议:调整一下角色选择的版面布局,可以考虑将确定按钮放在选择角色之下。


例如:眼动注视时间及频率分析(客户管理软件的导航可用性评估)

测试用户的注视时间统计见表1,可以明显发现两个版本在眼动注视时间区别:用户在使用旧版的系统时,注视的时间比较长;

测试用户的注视频率统计见表2,两个版本在眼动注视频率有明显区别:用户在使用旧版系统时,注视次数频率比较高,无规律性;

通过注视时间、注视频率和方案评价等级的对比分析,可以得出评估等级越低(数值越低表示满意度越高),用户眼动注视时间越短,用户在页面搜寻的频率相对越少,用户在较短的时间内能找到想要的功能,页面影响用户的干扰越小。


例如:网站的可用性对比测试

对某网站改版前(图7)和改版后的主页(图8)进行可用性对比测试,通过让用户浏览首页(不做任何点击)判定网站的主旨和类型,来捕捉用户注视点的轨迹图和记录用户在不同位置注视时间,对比网站主页改版前和改版后信息传达的有效性。

经过对采集到的数据进行分析,可发现用户在浏览改版前的页面时,眼动轨迹混乱,扫描路径长且很多相互交叉,注视点序列分散排布,用户注视点变换快,无明显的兴趣点,如图这些数据表明改版前的网站首页布局不够合理,没有重点。

 

眼动研究的局限性:

1、可以让用研工作变得越来越有技术含量,将会在用研工作中扮演越来越重要的角色。

2、但是需要加以辅助测试(如定性访谈)来收集更多的实验数据,并通过结合分析来得出更多、更有效的结论。


眼动研究的价值:

1、眼动研究是可用性测试、问卷调查、后台数据挖掘等研究手段难以企及的,因为是最直接的反馈用户使用情况的手段。

2、通过眼动研究,不但可以完整地还原测试者在各个页面的注视轨迹,还可以通过划分兴趣分析测试者在各区域内容的关注度。

3、眼动研究提供的信息不只是人们是怎样“看”东西这么简单,眼动反映了人脑的信息处理过程,眼动模式的特点与脑部的信息处理都有密切的关系。


 眼动研究的具体价值的体现:

获取用户浏览的行为和习惯

当用户打开一个页面,用户看了些什么,没有看什么。什么东西最先获得用户的关注?这些信息是很重要的,因为很多时候用户关注的东西与设计希望用户看到的是不一样的,这种差别会通过眼动数据直接显示出来。


帮助研究人员分析和澄清问题

在可用性测试中,遇到用户既无动作也不说话时,研究人员是最为迷惑的。此时用户很可能执行任务受阻,而通过实时的眼动记录观测,研究人员可以间接地了解用户的处境 - 用户是在寻找什么东西,还是有什么东西令用户困惑(来回注视),还是用户忽视了相关的重要元素?研究人员可以带着观点假设,开展眼动研究来验证或否决,发现导致问题的真正原因。


 实现研究结果的可视化

呈现眼动研究结果最常用到的是热点图,顾名思义,热点图呈现的是人们视线的热点,颜色越红代表被聚集的越多。作为可视化手段起到了良好的信息传达的作用。



脑电研究


脑电研究基于脑电波,脑电波是大脑在活动时,大量神经元同步发生的突触后电位经总和后形成的,即由脑内亿万神经元引起的头皮表面的电位变化。含有大量的心理信息,测量脑电信号可绘制成脑电图,以不同的波形反映出来。


不同的波形代表着不同的心理信息,比如:

α波

频率为8~13Hz(平均数为10Hz),幅度为20~100μV。它是正常人脑电波的基本节律,如果没有外加的刺激,其频率是相当恒定的。是大脑皮质处于清醒、安静、闭目状态时脑电活动的主要表现,睁开眼睛(受到光刺激)或接受其它刺激时,α波即刻消失。

β波

频率为14~30Hz,幅度为100~150μV。是大脑皮质兴奋的表现,当精神紧张和情绪激动或亢奋时在额叶出现此波,当人从噩梦中惊醒时,原来的慢波节律可立即被该节律所替代。

θ波

频率为4~7Hz,幅度为5~20μV。在成年人意愿受挫、困倦、失望、抑郁等情绪刺激时以及精神病患者中这种波极为显著。但此波为少年(10-17岁)的脑电图中的主要成分。

这些不同的波形反映了测试者所处的心理状态。


脑电研究是什么?

一般来说,原始的脑电波需要一些技术处理才能读懂,借助脑电数据分析工具,我们可以把复杂的大脑波形整理成有一个起点,然后是不同波形分布的杂合:


经过更复杂的技术处理,我们甚至可以得到一条总体的波形图:


脑电波(EEG)在医学领域已经应用了几十年,通过对脑电信号的处理与分析,我们能了解对象的认知过程和情绪反应,目前已经逐步商用化。

近些年,神经营销学、神经电影学楷书走进人们的视野。前者通过脑电波等手段测量消费者观看广告、描述产品时的脑电情况,以此来解释、预测他们的消费行为。后者采用脑成像技术等手段量化恐怖电影的效果,甚至考察观众们神经活动的同步性(群体卷入性)来检查电影控制人们思维和情绪变化的能力。


脑电研究的应用:

360度游戏研究


基于认知神经科学,无需语言,获知他们对产品的情绪、喜好、关注点、兴奋度...因为它研究的是大脑的源头。

除了学术界,全球众多顶尖的游戏公司公认情绪在游戏中的重要性,并致力于打造更加Emotional(情绪化的)游戏。

  • 并不是越积极越好

  • 必须能够唤起强烈的情绪反应

  • 让玩家情绪不断波动,正负情绪互相转化


 一款成功的游戏:必须要让玩家达到沉浸和心流情绪状态。有三种衡量指标:


沉浸感(IMMERSION)

定义:参与、融入、代入感的程度

游戏体现:故事性、技巧性、策略性、画面效果、音效、风格

心理体验:强参与感、脱离现实、忘记时间、很上瘾

情绪体现:强烈的正负情绪的交替


情绪指数EMO.I

游戏引起玩家的情绪反应。积极的情绪反应体现玩家玩的非常开心,而消极情绪反应可能提示游戏让玩家产生了受挫感。

 

心流体验(FLOW)

定义:非常专注,非常有动力的全身投入,并非常享受的精神状态。

游戏体现:游戏机制、难易度平衡、目标性、反馈。

心理体验:持续专注、忘我投入、成就感。

情绪体现:正向情绪为主,正负形拨动;紧张感积累,完成挑战的成就感。


生理指标

游戏带给玩家生理上的紧张程度,SCL值越大,表示游戏越刺激,玩家玩的越紧张,而SCL越低,表示游戏可能给玩家带来了相对无聊的体验。


脑电波和生理指标告诉你玩家的情绪状态




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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




B端体验设计-与复杂共处

ui设计分享达人

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。

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

文章来源:站酷 作者:Yone杨
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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





详解|用户体验地图,到底该如何使用?

ui设计分享达人

用户体验地图是什么 | WHAT

用户体验地图(Experience Maps)旨在通过描述用户历程和故事,使设计师、产品经理等项目成员更好地了解用户和洞察诉求。所以对于用户体验地图,我们可以将其定义为以下内容:

- 是一种描述用户故事的可视化工具;

- 是一种帮助设计师、产品经理等更好地了解用户的共创工具;

- 从用户视角出发,直观展现产品流程各个触点上用户的痛点、需求和情绪;

- 用户体验地图绘制的形式并不唯一,可以根据项目需求,增减内容。


undefined  

△ 途家 App 用户租房 · 用户体验地图案例



通常在接触到需求之后,设计师就可以开始梳理现有流程、使用用户体验地图了。要注意的是:

- 需要梳理的功能不分大小,都可以使用;

- 做之前,务必要先调研和访谈用户使用产品的情况。

建议时长:

- 重要项目:120~180 分钟- 日常项目:60~120分钟

参与者:

- 必选:设计师、产品- 可选:研发、市场、其他

工具:

- 电脑或白板+便利贴

 

为什么需要用户体验地图 | WHY

需要发现和拆解产品现有问题,梳理用户流程时使用用户体验地图,可以在聚焦阶段,整合用户诉求和业务诉求,共创机会点,找出解决方案,通常在以下场景中使用:

- 新产品设计:需要对需求进行拆解和优先级排序;

- 产品优化:发现产品现有问题,洞察设计发力点。

 

由此可见,在设计过程中使用用户体验地图作为设计工具,有以下益处:

- 更好的以用户视角来看产品的体验;

- 通过共创,项目成员达成共识;

- 确认触点,作为我们的设计方向;

- 通过用户痛点找到机会点;

- 帮助梳理产品流程。


undefined


△ 用户体验地图共创现场

 

用户体验地图操作流程 | HOW

我们通常会将流程分成4 个阶段:定义原则和目的 —— 梳理阶段流程 —— 洞察痛点 —— 寻找机会点。


1. 定义原则和目的

首先要了解我们做用户体验地图的原因和目的,包括用户是谁、解决什么问题、用户的目标、产品的整体目标、限定条件等等,对用户群体、整个项目背景和共创任务目标有清晰、全面的认知。


undefined


2. 梳理阶段流程 

首先是划分阶段,将用户的行为拆分成几个大的阶段,在整理时要注意:

- 在整个产品的范围之内尽量把故事、流程讲完整;- 以广度优先,而非深度,不要过早的沉浸到细节中。

接下来我们要将主要阶段拆分成单个任务,并梳理具体的任务和触点,罗列出过程中的任务和各个触点,要做到事无巨细。


undefined


然后根据任务和触点,整理对应的用户疑问、用户感受/情绪。通过对用户的观察和访谈进行梳理,客观的描述事实,切勿自说自话或是将自己的情绪代入其中,也不要急于猜想与分析。


undefined


3. 洞察痛点

这一步需要我们汇总用户的痛点,并将痛点分级,洞察用户痛点背后的真实诉求。这个过程中可以先让大家在一定时间内写出自己的想法,每一条写在一张卡片上,做到先相互不干扰,之后再统一整理和总结。


undefined


4. 寻找机会点

通过上述总结,思考新的机会点、解决方案、优化整体流程,并对新流程下的功能做优先级排序。可以通过准备一些问题来刺激大家脑爆出更多的内容,比如:用户还有其他选择么?怎么做用户才能更爽?其他用户来到这里该怎么处理?等等。在这个阶段需要:

- 对内容进行对标、讨论,把公认的点保留下来,无用的点剔除出局;- 根据实际情况和项目成本、进度等条件,对新流程下的功能做优先级排序。


undefined


 

如何为过程提效 |TIPS

在实际的工作过程中,因为项目时间都非常紧张,绘制这样一个完整的用户体验地图比较耗费时间,所以推荐大家几个提效的技巧,既可以减少时间浪费,也可以提高共创质量:

1. 事前

充分做好用户调研,提前准备好用户地图模板,可以在开始之前的一到两天发给参会人员,让所有人对产品有一个整体梳理和思考,有助于提高大家的产出质量。

2. 事中

如果是优化的产品,可以将设计稿 demo 或者线上产品截图打印出来,这样可以增强大家的代入感,有利于想法的输出。

3. 事后

整理电子版体验地图,需要跟随产品的演进进行更新,上传到项目共享空间随时查看。


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

文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


B端产品界面高屏效初探

ui设计分享达人

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

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

文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

设计模式 | 多级撤销 Multilevel Undo:让用户更有安全感

ui设计分享达人

What 是什么

简介:「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录,根据原始执行顺序,一步步返回历史操作。


例子:用 Sketch 画设计稿时,可以多级撤销,允许用户返回上一步或更早的历史操作


undefined


Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索,不必担心造成某些不可取消的修改。例如,如果单击了错误的菜单项,不需要进行复杂的恢复,不需要退回到此前保存的文件版本,或者寻求系统管理员的帮助。


多级撤销也让专家用户更快更容易地探索工作路径。举例而言,一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作,研究那些结果看是不是他喜欢的,然后再逐一撤销,回到起点。


When 什么时候使用

需要用户频繁在单一页面上交互的用户界面,相比普通的网站或者移动端 APP,交互操作要复杂得多。例如:文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。


使用条件:该软件的单一界面交互比较复杂和频繁


How 如何使用

软件首先需要一个强大的模型,这个模型是关于动作是什么样的——动作的名称、动作所关联的对象,以及如何返回历史动作。


决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言,在大部分应用里,人们期望能撤销下面这些改变:

  • 文档或表单的文字输入

  • 数据库

  • 图片或画布的修改

  • 布局上的变化位置、大小、顺序或分组在图像应用程序中

  • 文件操作,例如删除或修改

  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列

  • 任何剪切、复制、粘贴操作


下面这些修改基本上是不可撤销的:

  • 文本或对象选择

  • 窗口或页面之间的导航

  • 鼠标光标和文本光标的定位

  • 滚动条的位置

  • 窗口或面板的位置和尺寸

  • 在一个未提交的对话框或模态对话框上的改动


展现方式

然后,决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。


Example 案例

案例一:Microsoft OneNote 笔记编辑器

用户需求:撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销,或者使用编辑菜单下的按钮帮助用户返回上一步。

undefined


案例二:Photoshop 多级撤销

用户需求:回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作,由于 PS 的操作修改繁琐且复杂,所以为用户提供了历史记录面板,用户也可以点击历史操作步骤回到想要的历史操作记录。

undefined


案例三:美图秀秀图像处理 App

用户需求: 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时,常常会返回查看对比不同的效果,或者操作错误时返回到前几步,顶部的撤销按钮可以让用户回到任何历史操作步骤。

undefined

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

文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



为何深色模式看起来不自然?

ui设计分享达人

在过去的几年中,深色模式一直是用户最期待的一个功能。你可以自由切换你喜欢的模式来适应当前的场景,iOS和Android也都在2019年布局了系统级的深色模式,深色模式可获得出色的视觉体验,尤其是在弱光环境中……有助于你专注地开展工作,因为内容会较为显眼,而颜色加深的控制项和窗口则会隐入背景之中。但真是这样吗,或者只是一种实际上弊大于利的操作? 


文章内容:


1、什么是深色模式

2、从可用性角度看深色模式

3、为什么深色模式看起来不自然

4、从设计角度看深色模式

5、结论


什么是深色模式?


虽然各种软件界面的色调和颜色会有所不同,但是对深色模式的处理方式都是在深色背景上显示明亮文本和界面元素的配色方案。相比之下,在浅色背景上显示深色文本和界面元素的配色方案,在这里我们称之为浅色模式。


而事实上,深色模式比浅色模式早了几十年。在其最初的阶段,深色模式并不是一种有意的解决方案,而仅仅是当时计算显示设备是阴极射线管(CRT),且只能显示单色的显示,屏幕看上去就是黑的,黑底白字或者黑底绿字就是计算机行业的早期状态。直到1980年代彩色显示器发明后,微软视窗系统上线之后,黑底显示才退出主流。苹果在1984年推出“麦金塔”个人电脑,第一次发布采用图形用户界面,由此开启了计算机屏幕白底显示的主流之路。


           

          

 ibm 5151单色监视器


浅色模式出现的确切时间很难确定,但可以追溯到施乐Parc图形用户界面,它也极大地影响了早期苹果的“麦金塔”和其他操作系统,该界面使用了以白色背景为主的深色文本和界面元素。它与显示技术的进步和现代图形用户界面的出现密切相关。这种能够显示色彩的且更先进的RGB CRT显示器拉开了浅色模式的序幕。


                      

1973年的施乐Alto是最早使用轻型接口模式的计算机之一


从可用性角度看深色模式


深色模式的实用性有多少,每个人看法也不一样。尽管深色模式的界面可能不像浅色模式那样观感清晰,但深色模式的界面却具有一定的魅力,可以让你联想到新颖,高端,精致,神秘,力量,奢华这些词。但是,黑色也是一种会引起人们强烈的情感一个颜色,并且在过度使用时很容易使人无法承受。


2019年9月,苹果公司上线深色模式(Dark Model)时,在官网上如是宣传道。从iPhone到Mac,当库克决定在苹果公司几乎所有产品上线深色模式、甚至要求所有在AppStore上架的应用都必须兼容深色模式时,安卓阵营的谷歌、华为、三星等头部公司也纷纷在其最新手机中推出了深色模式,相应地从WhatsApp到微信等全球主流的应用也都推出了深色模式。



            


但是,想要获得良好的深色模式是相对比较难的。一方面,深色模式迫使放大瞳孔来捕获必要的视觉信息,从而导致整体清晰度的降低。而同时界面中高亮的部分又迫使我们的瞳孔缩小去适应亮度,以便提高清晰度。这也就能理解为什么白色背景上的黑色文本在你的眼睛中通常会显得更清晰的原因。


             

扩大的瞳孔让光线更多,但感觉到的锐度受到损害



行业对深色模式追逐的群羊效应,也进一步加剧、放大了一个见解:深色模式对眼睛更友好更健康!


但是,事实并非如此。对于一些有散光的人来说,在某种程度上深色模式对他们的眼睛来说更糟糕,深色模式比浅色模式更友好更健康的科学仍有待讨论。斯坦福·拜尔斯眼科研究所的眼科专家对此表示:“鉴于文献中的数据,我认为深色模式对眼睛没有任何的友好和健康。” 这种深色模式对眼睛疲劳和潜在的眼睛健康的影响时,使用时间可能比设备的亮度或亮度更重要。


根据美国验光协会的说法称,大多数人的眼睛在某种程度上都患有散光,但通常不会引起注意。据美国眼科学院统计,每三个美国人中就一个存在散光的情况,1.5亿美国人需要佩戴眼镜来矫正视力;香港理工大学针对2700多人的临床检测发现,在21岁的30岁的香港人中,近40%以上患有100度以上散光。


一起看下面的说明性图像。即使你有完美的视觉,你也很可能在黑色背景上看到白色文字周围的光晕。



            

浅色模式与深色模式


如果增加文字并降低文字的大小,这种效果可能会更强:


             


右边的图像你应该会看到更多的光晕,如果你有散光症状,深色模式可能会让你看屏幕更费劲。在深色模式下,虹膜打开以接收更多的光,并且瞳孔的变形在眼睛上产生了更加模糊的焦点,因此,当你在深色屏幕上看到浅色文本时,其边缘似乎渗入黑色背景,也就是所谓的“光晕效果”。虽然深色模式可能更适合夜晚等弱光环境下使用,但不一定能帮助更好地阅读,对于散光患者来说,可能还会加剧视疲劳。


当然,从实用性上讲,深色模式也有它的好处,深色模式利用OLED屏幕在纯黑的背景下不发光的特性,确实能有效的省电,让你的电子设备续航上提升很大,这也是很多人一直在追求深色模式的一个重要原因,只要手机续航强比啥都重要!这也可能是苹果公司决定在几乎所有产品上线深色模式的一个原因。


另外深色模式更有利于给用户营造一种沉浸体验,对于视觉娱乐应用尤为如此。当你想突出显示特定类型的内容时,深色模式会特别有用。豆瓣、数字尾巴、网易云音乐是我常用的几个软件,它们都已经适配了深色模式。在这种模式下你的目光会更加注意到电影的海报、数码产品和充满活力的音乐专辑上。



             

豆瓣、数字尾巴、网易云音乐的深色模式


为什么深色模式看起来不自然


一是由于我们人脑的组织结构造成的,从多年来的多项科学研究和调查得出的结论是,从物种进化来看,人类99%的时间都是在白天中活动,人脑更倾向于在浅的背景上显示深色的图像。所以无论白天还是黑夜,浅色的背景都可以让你更快地专注于显示的元素,而深色的背景则使其难以辨别文字和视觉界面元素,从而影响你的阅读效果并最终使你的眼睛疲劳。 其实从世界各地多个洞穴中发现的史前壁画也能说明为什么我们倾向于喜欢浅色模式。



            

追逐猎物的狮子,法国Chauvet Cave,约公元前30,000-28,000


德国帕绍大学曾经做过一次测试。在该研究要求参与者阅读屏幕上的正极性(白色背景上的黑色文本)或负极性(黑色背景上的白色文本)的文本。随后,参与测试的人员会执行基本的校对任务,例如查找拼写或语法错误。研究人员还测量了每种模式下参与者的阅读速度。结果是所有参与者在正极性条件下的表现都会更好,他们检查出更多的错误以及阅读的速度更快。


                       

可读性差异


另一个学习发现正极性对于在显示器上读取小文本特别有利。人脑具有更快的可读性,更喜欢在光线背景下显示的深色文本和物体。


二是由于含有大量蓝光的光源会使我们眼睛不舒服,当我们谈论屏幕对眼睛的潜在破坏性影响时,我们通常是在谈论“蓝光”,这是由短、高能量波长构成的光谱的一部分。研究发现蓝光可能是导致眼睛疲劳的一个因素,但指出长时间不眨眼的干眼也是导致眼睛疲劳的一个更严重的原因,当然也有是因为字体太小,以及散光这样的原因。


当我们身处暗室或是在黄昏或夜晚时,眼睛会切换成不同的视觉模式;在弱光环境下,人眼会从对绿色敏感变成对高能量蓝光敏感,这代表我们在大量的接收蓝光,因此对刺眼强光的敏感度会增强。这类情形对驾驶人而言并不陌生,当他们被来车车头灯的强光照射时,特别是使用现代化氙气灯或LED头灯的车辆,可能会暂时丧失视力。


           

平板电脑、智能手机和其他电子显示屏,不仅改变了我们所接触的光谱,也使我们的视觉行为发生转变。我们必须意识到,我们现在用于“近距离”视物的时间比以往多得多,这通常是因为背景亮度太暗所致。


在德国光学公司蔡司官方网站上,对于蓝光也作一分为二的评价:“好处是当外界环境变亮也就是蓝光较多时,身体便释放出血清素—它是其中一种快乐荷尔蒙以及皮质醇—这是一种压力荷尔蒙。这两种荷尔蒙能让我们保持清醒,富有活力,同时也应用于冬季抑郁和失眠的治疗中。但过多的紫外光和蓝紫光可能会对肉眼造成损伤,除了可能导致令人难受的结膜和角膜发炎,也可能会破坏眼睛的晶状体(例如白内障),尤其是伤害我们的视网膜(黄斑病变)。”


从设计角度看深色模式


在WWDC 2019大会上,苹果宣布了iOS13的深色模式功能,在令人兴奋之余,作为设计师和开发人员,我们应该考虑的该如何去实现它。苹果和安卓已经发布了为应用程序设计深色模式的设计指南。当然,没有硬性规定要求遵循他们提供的设计指南,这些只是指导原则。


             

由于Material Design设计语言的原因,投影的占比是非常大的。在浅色模式下还好,但这不太适用于深色模式,因为深色背景上的黑色阴影在视觉上不容易察觉,为此安卓还提供了在深色模式下不同层级的卡片与投影上的参考。


            

根据设计文档来看,iOS背景为纯黑色,色值为#000000,Google 则更喜欢深灰色,色值为#121212。


            

通过提供的设计指南,我们可以轻易上手来设计和开发我们的软件,但要注意的是深色模式并不是简单的与浅色模式颜色对调,必须为所有的元素进行单独配色。


            

浅色模式下的白色不会在深色模式下转换成纯黑色


这样也就能理解为什么很多软件并没有全部去适配新的深色模式,一方面使用场景决定的,另一方面就是深色模式并不是简单地换个换个颜色就行,很多元素需要重新设计和开发。


结论:该选择哪种模式


在去年的 WWDC 大会上,苹果人机交互团队的设计师曾对 macOS 的深色模式使用场景做了进一步的解释。

他指出,只有阅读浏览或是内容创作型 App 才需要长期启用深色模式,比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中,其它大部分软件对于深色模式的需求反而并不强烈。


或则你可以通过使用场景去选择,在明亮的环境中使用浅色模式,在昏暗的环境中使用深色模式。



            

但是在大多数情况下,真正帮助你避免眼睛疲劳的是不要整天盯着屏幕,而不是纠结到底用深色还是浅色模式。

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

文章来源:站酷 作者:罗小盒
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


延迟增强——视频信息流广告的提转秘诀

ui设计分享达人

伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。


为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。


///

延迟增强是什么?


视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。 


“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。


“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。


它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果



///

时机-延迟增强如何呈现?


转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。


01/ 出现时机:

延迟展现广告意图,可以提升广告卖点的展现机率


互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。

 

所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率



02/ 增强时机:

通过用户行为和视频特征动态决定增强时机,可以有效提升转化


对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。


我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强


但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升


undefined


///

引导-延迟增强如何引导转化行为?


转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。

 

01/ 视觉引导:

适当增加视觉吸引点,可以有效引导点击

 

延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果



02/ 互动引导:

让用户主动选择,可以增加广告曝光,辅助转化决策

 

互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权

 

以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力

 

若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。


undefined


///

前置-延迟增强如何帮助转化达成?

 

转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。


01/ 信息前置:

增加增益信息或前置落地页信息,可以辅助转化决策


购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升


undefined


02/ 转化前置:

缩短转化路径,可以帮助转化行为更便捷的达成


在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。


首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈



除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径

 

这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。



///
结语


在视频信息流领域中,延迟增强仍然可以继续深挖,作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。

 

同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中,去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。


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

文章来源:站酷 作者:百度MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


市场与用户研究基础

ui设计分享达人

前言:互联网产品都是以用户为中心,为用户服务,那么市场与用户研究对工作的重要性自然不言而喻。这是一项市场与用户研究的栏目,总计大概十个篇幅。本栏目将会对工作中市场与用户研究做一系列的整理与复盘,希望可以抛砖引玉,带给大家在市场分析与用户研究中一些经验。



一、WHAT/什么是用研?


更准确的定义是:市场与用户研究。


市场研究:是指为实现市场信息目的而进行研究的过程,包括将相应问题所需的信息具体化、设计信息收集的方法、管理并实施数据收集过程、分析研究结果、得出结论并确定其含义等。


—— 着重于产品的市场营销


用户研究:是用户中心的设计流程中的第一步。它是一种理解用户,将它们的目标、需求与企业的商业宗旨相匹配的理想方法。用户研究的首要目的是帮助企业定义产品的目标用户群、明确、细化产品概念,并通过对用户的任务操作特性、知觉特性、认知心理特性的研究,使用户的实际需求成为产品设计的导向,使产品更符合用户的习惯、经验和期待。


—— 着重于产品设计体验优化


二、WHY/为什么要做用户研究?


理解用户行为数据产生的原因


用户为什么来?为什么不来?

用户为什么留存?为什么流失?

用户为什么付费?为什么不花钱?

用户为什么喜欢A活动不喜欢B活动?



新的开发功能、新的界面风格、新的运营活动、新的品牌卖点更加贴合用户


这个真的是用户想要的吗?

这个风格是我们的目标用户喜欢的吗?

目标用户愿意参与我们的运营活动吗?

我们与竞品的差异化是什么?



产品的想法与用户的行为习惯与心理诉求


这个功能真的是用户需要的吗?

这个功能真的符合用户的行为路径吗?

......



三、WHEN/什么时候做用户研究?

我们可以听到:


“用户流失,我要做个用户研究,看看到底是为什么?”

“用户不付费,我要做个用户研究,我要找到原因。”

“用户一直活跃度不高,我要做个用户研究,找找改版的方向。”


但是事实上,我们应该

以科学的方法贯穿整个产品生命周期做用户研究。

    

1、在产品概念期,我们需要把握市场机会的判断、挖掘用户需求、做好产品概念的设计,那么在这个阶段,我们通过用户研究做好市场细分研究,估算市场价值。并且预测市场的规模,估算产品的竞争潜力。同时做好竞品的分析与研究,决定自己产品的定位与卖点。挖掘用户需求,找到用户痛点、爽点、痒点。做好产品概念测试,分析是否满足用户的需求,解决用户的痛点,找到用户的爽点,把握用户的痒点。


2、在产品设计开发期,在这个产品时期,我们需要进一步的把握目标用户的定位,设计产品的核心功能,做好用户付费策略的设计。那么在这个阶段,我们通过用户研究做美术风格的测试、核心功能的测试甚至产品名称测试,看产品在该市场的定位研究、以及进行商业化研究,帮助产品研究用户付费策略。


3、在产品的宣传推广期,在这个时期,为了更好的实现产品商业化,我们需要制定产品竞争的策略,帮助产品在市场中获得更好的变现。同时帮助市场营销部门制定传播策略,提炼产品的核心卖点。在这个阶段,我们通过用户研究帮助市场部门以及运营部门测试宣传素材、评估宣传效果、研究用户的触媒习惯以及测试用户U&A研究(使用与态度研究),提升市场营销品质。


4、在产品进入平稳发展期,在这个时期,我们需要进行持续竞争的策略制定,需要做好产品生命周期的管理,同时也要隔一段时间做品牌营销刷新。以便于更快,更好,更贴合市场。在这个阶段,用户研究需要做市场推广效果评估、版本迭代的监测研究、用户满意度的调查研究,并且需要做好流失用户研究,找到用户流失的点,做好改进。同时也要做好竞品研究,监测市场的变化。也需要做好品牌定位研究研究、用户诉求的研究以及用户情感研究,帮助产品做好迭代与更新。


5、 最后在产品衰退期,用户研究需要做再定位策略或者做好退出的计划。那么我们需要通过用户研究做好整体市场趋势研究、竞品研究、新机会的探测性调查,提供数据,帮助公司决策接下来的发展,是引流导入到二代产品?亦或是做好迎接新产品的准备?


四、WHERE/到哪里去做用研


我们可以采取线下以及线上两种方式相结合:

  • 线下

在街头进行街头访谈、或者去用户家里进行面谈或者调查纸质调查问卷的形式、到公司里进行入户访问以及在专门的访谈室进行座谈会等等。

  • 线上

可选方式更多,可以在qq群、论坛以及贴吧等平台发送调查问卷,或者在微信中直接进行语音或者视频等方式。也可以在产品内发放调查表,或者发放调查表到用户的电子邮箱等等。


五、WHO/谁来做用户研究? 对谁做用户研究?


谁来做用户研究呢?

一般来说,大企业有自己的用户研究团队,中小型企业可以外包给专业的用户研究公司,也可以进行内部设岗。

      

用户研究的对象是哪些人?

在不同的产品阶段、面对不同的问题、对应不同的目的,找到不同的人群。


1、在产品概念期,用户研究对象是通过各种维度定义出来的目标用户以及竞品用户。


2、在设计开发期,用户研究对象是围绕产品或者研究目的找到核心用户、次核心用户以及外围用户。


3、在宣传推广期,用户研究对象是把握住新进用户。


4、在平稳发展期,用户研究对象是产品的留存用户、活跃用户以及流失用户和回流用户。


5、在产品衰退期,根据策略决定需要调研的用户群体。



六、怎样做用研(How)


用户研究是为目的服务。


把握住问题六要素,是用户研究的核心。

(1)问题症状?

   • 在决策问题时遇到什么困惑,有哪些症状?

(2)用研目的?

   • 希望用研达成什么目的?

(3)决策处境?

   • 现阶段能支配怎样的资源?何时采取措施?

(4)问题假设?

   • 预计会是什么原因引起问题?结果可能会有哪些?

(5)行动方案?

   • 可能采取的行动方案有哪些?

(6)效果预期?

   • 行动方案下希望产生或者可能达到怎样的效果?


常用的市场与用户研究方法:




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

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


深度解析|流量时代私域H5营销设计的流量密码

ui设计分享达人









一、由销售演变成运营


在我看来,当今互联网行业的经营实际上与传统行业的销售并无区别,我们可以从以下两个行业的业务结构图看出,互联网行业的经营实际上是从传统行业的销售模式转变而来。



1.1 传统行业的销售

按照传统行业的业务结构可分为“采购、生产、加工、销售、财务”四个环节。一提起销售大家肯定都不陌生,指的是企业生产的产品通过销售人员的销售手段,将企业的产品卖出来兑换成货币,流入企业的财务。



1.2 互联网行业的运营

在互联网行业中业务结构还可分为“采购、PM/开发、运营、财务”。就流程而言,互联网行业的经营实际上存在着传统销售的影子,在将企业的产品(成品)转化为财务的这一环节之前,需要经历销售或运营这两个环节。


不像传统企业销售,运营不直接负责卖,更多地是负责推广。不直接负责销售,更多的是负责推广。换言之,互联网企业的产品并不直接兑换成货币,而是通过“引流、活动、转化、流失”等一系列运营操作,提升用户体验,将产品好服务卖给用户。


·引导用户使用产品:我们可以将传统销售中的初次拜访客户当作运营中的引流;

·保持用户黏性:把传统销售中的维护客户关系当作运营中做的活动和转化;

·用户流失管理:将传统销售中挽回客户这个动作当作运营中用户流失这个动作。

因此,互联网行业更加重视运营而不是销售。






二、运营设计的核心目标


在简单了解了互联网的运营之后,我们再谈一谈最新出现的一个新词“运营设计”。



2.1 运营设计并不是运营

运营设计在我看来是一个相对模糊的词汇,我能清楚地讲明白什么是品牌设计、界面设计、工业设计、平面设计、产品设计,但总觉得说不明白什么是运营设计。


比如说品牌设计是品牌,界面设计设计的是界面,而运营设计不是运营设计,好像运营设计无法用一个专业的方向来描述。


但在国内的互联网市场中,产品的运营又是一件必不可少的事情,从企业盈利的角度来看运营设计的地位不亚于UI设计和产品设计。在我看来运营设计是介于“运营”与“设计”之间的一个岗位。


·菜鸟运营设计师:多是帮助运营经理完成运营活动的投放物料,按时上线。

·老鸟运营设计师:通过较为多样的手段(合理的规划)和技能(设计感觉形式)更好地实现“用户获取&用户付费”等目的,并且在这个过程中可以“更好实现已有用户的维系”。



2.2 增长设计(海盗模型)

实际上,运营设计也被称为增长设计,一提到增长,我的第一反应就是《增长黑客》中的海盗模型,也就是AAARR模型。


AARRR(海盗模型)是《增长黑客》中最为重要的理论——用户生命周期的模型,因为这个模型和运营设计有许多相似之处,也有人将其作为业务流程的模型。运营的流程需要经历:先拉新,再促活,接着提高留存,然后获取收入,最后实现自我传播这5个环节,可以和模型中的概念一一对应上。


*对于海盗模型的知识点,我在这篇文章《一文读懂|数据好体验就好吗?—数据认知篇》里面讲过,这里我就不做过多地赘述了。


对用户生命周期AAARR模型的理解是一方面,最重要是要学会用模型中的关键数据指标去衡量活动,毕竟我们做运营设计的最重要的是以最低的设计成本来获得最大的运营收益。模型只是一种工具,对于不清楚怎么使用模型的同学,我建议看看我写的《史上最全|数据体验好就好吗?—体验度量篇》



2.3 以运营目标推导运营形式

运营经理的运营手段可谓是百花齐放,变化莫测,这里我们不展开讨论。一般运营活动属于推广这个动作,在推广的这个环节里面不会特指某一个目标,而是包含多个目标,所以对于运营设计师而言目标不能是一个,而应该多个。常规的以产品运营为核心提出来运营目标大致是“拉新、促活、回流、营收”等这四种。


如果把运营的目标需求转换成我们设计师的目标需求的话,逃不出我们常见的“用户增长、品牌传达、营销策略、商品成交量”这四个范畴。


把运营侧的目标转换为产品是为了帮设计更准确理解运营经理的需求,以目标确定活动类型、以类型快速定位适合的风格,提高运营活动质量,促进用户转化,如图


·基于用户的活动运营:如果是以用户为目标的活动,设计应该偏向于符合用户属性的风格,比如我们的用户都是年轻的用户,那在页面的设计上就应该多有“年轻化、博人眼球的、好玩有趣”等元素的呈现。


·基于营收的活动运营:如果是以营收为目标的活动,设计应该偏向活动场景对于入口的设计优化,比如Banner、落地页等物料设计。通过优化入口,提高转化率,完成产品体验的优化的目标。


·基于品牌的活动运营:如果是以品牌宣传为目标的活动,设计应该偏向企业品牌形象的树立以及传播,把产品的特色传递给用户,与其他竞品拉开差距,提升自己产品的核心竞争力。





三、私域的精细化运营

与运营有关的“私域”这俩词,最近火得不行,哪里都可以见到。为什么互联网企业这么重视私域的运营呢?主要是因为在互联网时代,大家都认同有了私域流量就相当于有了盈利这个观点。


3.1 什么是公域运营

首先我要简单地描述一下什么叫流量,流量的本质就是指用户,但是“用户”这个词过于抽象了,常常都用阅读量,粉丝量,点赞量,播放量等这些数据维度去衡量流量的体积。


打个不恰当的比喻,流量就像是一条河,如果无人管理的话,那就叫公域交通。您在河边挖一条水沟,将河水引到自己事先制作好的蓄水池里面,这个蓄水池里面的河水就叫做私域流量。


3.2 什么是私域流量

如上例所说,我们将能够自主运营的流量或用户(蓄水池),可以反复触达、“骚扰”、交流,获取反馈的流量统称为私域流量。典型的产品形态有微商、拼团群、朋友圈、微信公众号。私域流量相对于公域流量来说,是一种更精准,更容易被转化的流量。


简单的理解就是可以为所欲为的流量,比如我在我自己的微信公众号里面可以随意地删减用户的评论,典型产品形态有微信公众号、微商、拼团群、朋友圈等。


如今许多互联网产品都是私域流量与公域相结合的产品,比如说大家经常使用的站酷这个平台,如果我发布的作品没有上首页的推荐,只会在我的个人主页展示,获得的粉丝就属于私域流量;反之我的作品获得了首页推荐,在站酷首页展示,获得粉丝增长量就属于公域流量。


许多企业老板都明白这样一个道理“用户在哪里,私域流量就在哪里,生意就在哪里,企业的盈利就在哪里。”因此,企业老板们都希望把公域流量吸引到自己产品的中,成为私域流量,这样企业的流量即相对公域流量而言更加可控、高效、精准,后期盈利也有保障。



3.3 精细化的运营模式

正是因为许多企业开始注意到私域流量的重要性,互联网从之前的流量粗放运营模式,逐渐变成用户精细化运营模式,这是流量思维到用户思维的转变。精细化运营简单理解就是基于庞大的数据分析,让企业的产品为不同的用户推送不同的运营内容(或者是用户感兴趣的内容)。


提出“精细化运营”这一个概念行业里面最早最有名气的应当是号称一分钟出8000张Banner的鹿班平台,鹿班平台最大的意义不在于取代设计师这一个岗位,而是阿里巴巴在精细化运营的第一次尝试,为不同的用户推送自己所需要的商品内容。当然了,除了鹿班平台京东集团也有羚珑营销内容创意平台,有兴趣的同学可以查看一下。


在精细化运营中还有一个很专业的名词叫“千人千面营销策略”,这个营销策略的概念是指每一个用户看到的每一个内容都是不一样的,仔细想想这是人力所不能及,只有AI的大数据才能做到的,例如用户A的收藏夹是衬衫品类比较多,那淘宝Feed流推送的商品衬衫比重会多一些,用户B的购物车首饰品类比较多,那产品中推送的内容珠宝首饰占多数;用户C喜欢电子产品,那么产品推送的将会是电子类产品比较多。





四、了解运营设计师的工作内容

在公司里,产品体验设计师(又被称为界面设计师、UI设计师)在公司中扮演着美化产品的角色,随着互联网行业的业务扩张、人才涌入后会把UI设计师这一角色进行更加精细化的分类,在互联网企业中会把设计师按照工作内容进行两种类型的分类,分别是产品体验设计师和运营视觉设计师。



4.1 产品体验设计师

工作职责:产品体验设计师的工作职责,主要以提升产品功能体验为主。在分析产品逻辑和交互逻辑后,从视觉层面把控产品界面设计,并通过视觉设计高效传达有效的信息,并制造出愉悦的用户体验。

设计工具:Figma、Sketch、Axure、问卷工具等。



4.2 运营视觉设计师

工作职责:运营设计工作职责是在短期内达成提升相关运营活动的指标。他们以运营活动设计为主,运用视觉语言吸引用户参加对应的活动,加深用户对产品的印象,从而促使用户参与活动,完成活动中完成引流、成交、复购、传播等行为。

设计工具:PS、AI、AE、C4D等。



4.3 运营设计师需要具备的能力

运营设计师的主要工作内容就是协助企业中的运营经理做好产品的用户运营、内容运营、产品运营和活动运营。运营设计师应该参与到运营活动的策划中去,帮助运营经理想一些更有趣更好的设计策略,并且在这个过程中更好地提高自己的运营策略、数据分析、文案能力和视觉表现能力。


4.4 运营设计的工作范畴

运营设计师这个一个岗位更多的是内容驱动型(音乐、视频、教育应用等)、交易驱动型(电商、o2O服务等)产品中。它的工作范畴是一个很繁杂的事情,不仅需求数量大而且频率高,最繁杂的一点是需求种类比较多,比如有广告位Banner、专题页面设计 、活动专题、Icno图标等内容,并且需要批量处理的各种资源入口图,线下活动的海报、印刷物料等等。










如今运营活动可谓铺天盖地,手机端也能经常见到各大企业产品的优惠活动设计,比如活动图,落地页,优惠券,战略楼层等设计。国内的运营设计推广形式多以落地页(H5)的形式帮助企业做推广企业产品或者树立企业形象的活动。


由于,这类狂轰滥炸式的运营活动,让用户倍感无味,致使运营活动流量不高,设计师在实际的工作中往往会遇到以下三类问题,导致我们的运营活动流量不高,达不到预期的运营目的,如图





一、用形式解决内容过长问题

近些年在市面上落地页的推广形式多以长页面为主,比如电商的推荐页、商品的宣传页。由于企业想要表达的内容过多,使落地页的长度越来越长,这种形式虽然可以更全面地介绍商品优势,但是在快节奏的互联网市场,用户自然会觉得很臃肿。


针对落地页内容过长,视觉呈现不佳的问题,我们最快能想到的办法就是删减字段,但是如果运营经理不同意删减字段那怎么办?因此,删减这是一个办法,但不是最好的办法。


既然不能删减,我们不妨换个思路来解决这个问题。刚刚谈到内容过长导致用户感觉臃肿,感觉臃肿的核心所在是“内容”对用户没意义,按着这思路延展下去解决问题的关键在于“突出重点”,这里我提供四个方法帮助大家解决困扰。



1.1 优化头图的尺寸

许多设计设计师由于没有考虑清楚手机到最终的预览效果,导致很多重要的元素出现在低活跃的区域 ,用户第一眼看不到能吸引自己的内容,从而失去往下滑动了解更多内容的动作,造成运营推广的效果大打折扣。


因此在设计这种长图时要事先考虑好首屏要呈现什么内容,一般的运营头部高度一般定在600px-750px左右,如果是内容较多的话,我建议把头图的高度控制在460左右,这样可以促使用户在首屏看到更多的信息,引导用户有兴趣向下滑动,用户的点击率也随之上升。


1.2 手机海报的表现形式

除了缩减头图的高度之外,实际上利用海报宣传的方式进行设计也是可以的。在朋友圈或其他社交平台上经常看到这种带有二维码的宣传海报,用户通过扫码直接进入运营活动中心。


这类海报形式有着短小精悍,言简意赅、便于传播的优点,是一种提高运营活动流量很好的表现形式。



1.3 九宫格拼图的表现形式

虽然现在是抖音的天下,但是这类九宫格拼图的表现形式,在微博(微信、微淘)如日中天的时代也是风靡一时的,这里提出九宫格拼图的形式也是给大家提供一个思路,是否采用还需要考虑企业主要运营的平台。



1.4 闪屏的表现形式

闪屏这种表现形式虽然点击率并不高,但是一种很好蹭热度的方法。对闪屏的设计,设计师只需要思考好用什么呈现表现形式为闪屏物料注入新的活力,例如用下面这种只突出主体物和标题的表现形式,把内容更加精简、准确地传递给用户,这种表现形式就很好。





二、了解兴趣低的原因

在第二部分里,我想分为4个模块——了解兴趣低的原因、用形式提高用户兴趣、让标题文案更加突出、用猎奇心理引起用户兴趣,来谈一谈我对“用户兴趣”的理解。


2.1 解决用户兴趣的方法

早期的互联网产品以工具为主,例如百度就是用来搜索的、QQ就是用来聊天的、淘宝就是用来买东西的,这些产品呈现的感觉都以简洁清晰为主,但随之互联网越来越普及,娱乐产品出现与工具类产品越来越多的差异性趋势发展,尤其对于运营设计,简洁清晰变得没那么重要,个性、趣味才是占据主导。想要运营设计做得让用户有兴趣,不妨试一试我下面所说的四个技巧。



2.2 为什么要“动”会引起用户兴趣

以图片+内容的这种展现形式在市场出现很久了,对用户的吸引度不免有减弱的趋势,在这一阶段我们需要寻找一种更加有趣的形式来吸引用户。


兴趣可以用更为科学的方法“注目度”来解释,当我们眼睛在看到某一个事物的时候,大脑会根据事物的形态给一个由“强”到“弱”的排序,去支配眼睛去观察事物,如下图所示,我们可以直观地看到“动画”这个类目是排在前面的。大部分用户在看到运营活动内容的精神状态(注目度)是分散的,所以要抢占用户的时间,设计用户第一眼的吸引力。




三、用形式提高用户兴趣


3.1 加入更多的动效

根据上面的结论,在提高用户兴趣这个问题上,我们完全可以增加展示效果的动效来做到,很多产品也是这样做的。


比如今年拼多多的Banner上,做了一些标题旋转、优惠券飞出的动画效果:

  


像京东购物节中做一些开场的动画效果:

  



在活动流程上面的动效,比如在一些抽奖环节模拟真实物体的运动轨迹:

  




在图标或者标签上面加一些位移、渐隐渐显的动画效果:

  


在一些弹窗上面加上一圈光效,也是一个不错的选择:

  


如今在运营活动上加入更多的动效是设计师必备技能之一,最常规的就是把画面中的某一个元素变大,像是下面的按钮,采用放大缩小的动效。

  


或者是按钮旁边加上一个手指的元素,也可以起到吸引用户的目的。

  


元素围绕主题物周边沿着运动轨迹活动。

  


关于动效的案例,这里我就不一一举例说明了,大家可以登录蚂蚁设计服务平台 - 犸良这个平台获取灵感。



2.2 以静制动

对于不会动效软件的同学也没有关系,也可以着重对画面的张力进行设计,以静至动,以下我就分享几个以静至动的方法。


·元素之间的动势:合理的运营元素之间的组合关系可以营造出有动的感觉,如果单单放一个开飞机的场景可能并没有感觉在飞,但如果加上飞翔的红包、模糊的背景,那就感觉真的在开飞机。


·有力的指引力:如果单单地放一张优惠券,不会产生吸引人的观感,但设计四只手从四个方向争抢的画面,就会感觉画面有力量有争抢的感觉。


·以破形产生动感:画面中从左侧设计一张卡片,远处门的入口塑造的,大胆地破形处理,很容易营造出一种动态感觉。


·夸张的构图设计:当然了不同的视角和构图也可以让画面感觉生动,如下面这样的构图就会给用户营造出一种画面外还有画面的感觉。


·营造运动画面感:下面这套海报采用硬朗的直线和运营动作的完美结合,通过营造强烈的运动感给用户传达动的感觉。



2.3 视频推广的形式

由于短视频领域的兴起,朋友圈中转发视频的用户也日益增加,如果设计师可以给运营经理在以视频形式进行运营活动的推广的需求上出谋划策的话,也是一个很专业的设计师了。





四、让标题文案更加突出


造成用户不感兴趣的原因还有可能是信息传递效率不高,用户无法通过标题知道这是什么活动,怎么可能引起用户的兴趣而点击?

标题的文案可谓是用户判断信息的首要思想要素,他能迅速让用户了解活动主题,传达活动兴趣点,激发用户参与。


4.1 选择识别度高的字体

设计师是一个创造美的职业,但是也要有取舍,在我看来漂亮固然重要但高效的信息传递更为重要,尤其是在运营活动的标题设计上应该尽量选择一些识别度高的字体,先让用户清楚地知道该活动是干什么的,再用特殊的技法去吸引用户点击。


在标题字体上我比较推荐使用无衬线字体,因为黑体去掉过多的衬线装饰,是横平竖直,笔画粗细均衡,使字更为精练并且醒目。例如下面这张效果图,都是在黑体的字体基础上做的设计,光看标题就可以清楚活动大致是个什么类型的了。



4.2 给字体加点效果

如果觉得以上的方法并不能给用户起到视觉冲击力的效果,不妨给标题的字体加一点效果图,比如立体效果、加装饰物、更改字体结构等等,如图

我推荐一个我自己作图的习惯,就是先做标题文案的样式设计,再做配图元素的设计,我觉得这个方法既可以突出标题文案字体设计又很高效。博大精深,有机会后期会写一篇字体设计的文章,敬请期待吧。





五、用猎奇心理引起用户兴趣


以下内容不算是设计技法的内容了,算是运营思维方面的小窍门,我认为身为运营设计师,还是有必要知道的。



5.1 倒计时营造紧张感

如果在手机海报的表现形式上,加入以下这种“倒计时”主题,有助于激发起用户期待感和代入感,起到事半功倍的效果。


5.2 明星的效应

如果活动中有明星素材可以使用,千万不要放过这个机会,因为明星自带流量和话题,也是吸引用户兴趣,提高流量的好办法。


5.3 节日的热点

一年中有很多节日或者节气的时间节点,这些时间节点自带吸睛功能,可以把他们当成借势营销的主题,有的放矢地制作活动宣传图,增加曝光度,保证营销的新鲜度。


接下来,让我们谈一谈第三个问题——用户审美疲劳。









随着市场上充斥大量运营活动,对用户来说不免会造成审美疲劳,而用户出现审美疲劳的情况也是造成运营数据下降一个重要的因素。



一、了解什么叫审美疲劳


1.1 审美疲劳的概念

所谓审美疲劳,源于一个经典的心理学概念——刺激适应(Sensory Adaptation),就是用户长时间接触一种类型或者表现形式的事物而产生的厌倦、麻木的心理,最终都会被“适应”(即令人无感觉)。


这里我列一个例子,比如每天打你一棍子,你当然很不爽。但是连续打你一年后,你并不会感觉到不爽了,因为它变成了你生活的一部分,你已经没有感觉了——这就是刺激适应。


1.2 为什么会出现审美疲劳

审美疲劳的出现,有其客观必然性,多数情况造成用户审美疲劳的原因可以分为两种:


内容上眼花缭乱:是指一方面市场的运营活动太多,另一方面是活动内容让用户提不起兴趣,久而久之自然就会产生审美疲劳的心理。


时间上的心生厌倦:这是人正常的心理状态,当人从外部获得了幸福感(升值、金钱、美食)多会随着时间的推移最终回到基础水平。

这里我列一个例子,比如刚收到名校录取通知书的大学生,感觉到幸福感爆棚,但也最多持续几个月——等他入学后,日复一日地上课下课和高中生活一样,慢慢地觉得索然无味。



二、审美疲劳的解决方法

对于内容让用户提不起兴趣这一点,我在前一章我已经阐述了自己的观点,这里不做过多赘述了。但是我们可以就“时间上的心生厌倦”这一问题出发,来讨论设计方面的解决方法。


在我看来设计侧的解决方法其实就一个词——新颖,我总结设计师可以从以下5个方面着手进行设计方案的确立——夸张视角、细致刻画、多种风格、故事性、游戏化。



2.1 设计一些新奇的视角

这种方法属于吸引眼球而追求的形式上的“奇特”,比如我们看看第一幅设计稿(植美村的页面),夸张的鱼眼大透视配合风格感十足的原画级页面,至少第一眼就把我震撼了。


或者以微观视角看世界的视角去做设计稿,比如说OPPO的运营图设计,正常视角中人永远都是比手表大的,但如果反过来去观察,就好比自己像是一个小微生物去观察这个视觉,会给用户一种很新奇的感觉。



2.2 把刻画发挥到极致

形、色、质、构是搭建一个画面的基础,其中质感是拉开差距的关键,它是细微的,往往有质感的视觉感受会给用户一种高级的感觉,吸引用户点击或者是向下滑动浏览更多的内容。身为设计应该更专注于自己观察方法和技法的提升,一个图层达不到想要的效果,那两个图层呢?那把其中一个图层的图层样式调整成“正片叠底”呢?


质感虽然是一个相对抽象的词,但是做出质感并没有想象中的那么难,最重要的就是有耐心多做一些层次,如下图,不管是以文字或者图像为主形象的效果,都是因为考虑了字体变形、字体结构、投影、高光、色块对比等细节,才会让整体的效果给人一种很有质感的感觉。


*设计技法的提升是一个很漫长的过程,比较注重于直觉和感性的认知能力的培养,要多观察、多尝试,要相信自己总会有成功的那一天的。



如果你会3D类型的软件那就太好了,因为3D类型的工具最终呈现的画面本身就带有空间关系并且由于可以渲染不同种类质感的材质,画面天生带有一种质感,比如下面这两张图如果单单地铺上一个大色块点缀一些图形元素和3D类型的作品对比来看,质感还是差一截子。左侧是质感相对较弱的落地页,右侧是质感较好的落地页,如果你是用户的话,你会点击哪个?又会向下划动查看哪个呢?


并且现在的移动端设备的性能都有提升,并且5g的技术也在市场中出现,以前的3D场景加载卡顿的问题也逐渐在消失,我们不妨事先在运营活动中多加入一些3D的效果,来博取用户眼球。


就目前来看视觉观感偏向越来越立体化,而不是简单的平视扁平效果,以下这种成系列的设计稿,是深受用户所喜欢的,并且成系列的设计稿,也很容易让用户产生记忆点,是一个我非常推荐的做法。



2.3 多种风格的探索

为什么要做多种风格的运营设计呢?从设计美学的角度上来讲,用户的审美性质在发生变化,由过去“专注式”的审美在强大的信息流影响下变成娱乐式的“快餐式”审美,所以做多种风格这是适应市场趋势的必然结果。


每个企业的目标并不是为了用户设计出更好的视觉作品,企业的目的是在于用“创意”快速吸引用户眼球。有点儿像是铅笔和钢笔的关系,不是为了最好的铅笔而是钢笔,而是为了设计出可以代替铅笔的钢笔。


例如下图中的描边MBE风格、孟菲斯、噪点插画、复古等风格都可以运营到设计中。


今年大火的酸性设计(最早出现在西方60年代迷幻摇滚(Aicd Rock)文化中)是一种打破传统美感的设计,暗调的背景和镭射材质的素材搭配镂空的字体设计,在视觉感受上制造出一种迷幻绚烂的氛围,特别适合用在一些需要体现“潮流、新锐、个性”的视觉设计中。文章结尾我也给大家准备了素材,需要的去获取吧。



2.4 有故事性活动延展

大多数用户都喜欢听故事,在故事中包装自己的产品,告诉用户可获得什么好处的这种方法也是提高运营活动的数据的一种好办法。


这种形式早在2017年的offo就有用过,当时ofof的产品有借助于《神偷奶爸3》中小黄人的形象,设计了一系列新的自行车造型,以一系列报纸的形式设计,以小黄人车潜入车间为主要故事,了解 OFO小黄人版是如何造出来的,某种程度上说很好地宣传了 OFO。


例如《德芙Dove x故宫》的H5项目中,用长卷的表现形式绘制了从清朝至现代的过年场景,意指“以前宫里人也吃德芙,现在将德芙的福气传到千家万户”,让用户眼前一亮的同时,也宣传了企业产品。


《当代清明上河图》,快手品牌宣传H5项目中,设计师将现代与古代结合,通过长图绘制生活百态,用不同的故事来讲述励志故事和暖心故事,是故事性宣传企业品牌的经典案例。



2.5 活动ip的游戏化

用户对简单的商品宣传(运营活动)是没有什么兴趣的,但是如果把运营活动包装成一个游戏,却能俘获用户的芳心。很多企业正是抓出用户的这个心理,在自己企业的ip形象上做足了功夫,阿里巴巴集团就是这样一个典型的企业,只要是过节,ip形象总能参与其中发挥其最大的商业价值,是典型把ip形象加入运营活动游戏化的企业。


每年支付宝都会有积攒5福的游戏,在2021年他们还升级了自己的ip形象,让用户体验更加升级。ip形象的游戏化,未来也会成为一个趋势,每年应该都会有吉祥物来送钱。




三、构图好就成功了一半

画面清晰、构图合理应该是做运营设计的第一准则,尤其是大家都审美疲劳的今天,有一个好的构图,可以起到事半功倍的效果。


接下来我就介绍运营活动中常用的四种构图方法,便于大家在工作中有规律有节奏地排版画面上的图形、文字、元素之间的关系。



3.1 上下构图法

“上下的构图法”是将布局分成上、下两个部分,或使整个画面元素呈上下分布的趋势,主要信息(标题)常常融入图片中,放在主空间成为主体,阅读性文字放在次空间,这种构图的特点是内容的冲击力比较强。



3.2 左右构图法

“左右构图法”是占据图片和文字的一部分,形成左右两个独立的空间,产生良好的阅读体验。很实用的一种构图方式。这种构图的特点所占图幅较小,但要求文案的数量需要精简,尽量不超过6个字。



3.3 三分构图法

“三分构图法”是将画面中的内容三等分,并突出c位的信息,旁边有装饰元素围绕增添画面的气氛,具有稳定性又可以避免使用中心构图形成的呆板感。



3.4 中心构图法

“中心构图法”是把主体放置于画面视觉中心,形成视觉焦点,再利用其他信息烘托与呼应主体。其特点是能够突出重点信息,让用户一目了然。



3.5 对角构图法

“中心构图法”是指对画面进行等值分割,并将所要表达的信息对角排列。这种构图方式,会让页面显得更灵活,有动势,让画面有更多可能性。



3.6 倾斜构图法

“倾斜构图法”是版面整体或部分元素以倾斜的角度呈现在画面上,能很好地营造出轻松、动感、刺激等气氛感,一般游戏类活动也会比较常用。









好的运营活动会为企业带来可观的短期收益这是众多互联网企业所认同的,也是每一个企业所需要的,以下是我对运营设计的一些经验心法,希望对你有所帮助




一、如何最大限度地规避返工风险

对于设计者来说,最苦恼的是改稿,特别是那种做许多叠加质感光效的效果图,改起来成本很高,改稿这件事对运营设计师来说可以说是最头疼的事。


针对这种返工改稿的情况,我个人认为问题多数出在“沟通”这个环节。在沟通环节中最要解决的核心问题就是要进行有效的沟通,如果需求方(运营经理)和设计师之间的沟通是无效的,改稿那是必然结果,下面是我对于“高效沟通”上的3点经验。



1.1 明确项目的目标

身为设计师的你遇到一次两次交付后要改稿的情况倒是没有关系,有些协同的同事是初次合作,难免有些观点不对齐的情况,这属于正常的,但是经常遇到这种情况就要引起重视了。


需要反思一下是不是自己对项目的目标没有搞清楚,在做项目之前我建议直接让需求方说出痛点,多问问目标用户群体是谁?投放平台和渠道是哪些?上线时间和排期?尺寸大小等问题,把目标明确下来。


1.2 从抽象化到具象化

人和人受到教育不同,理解能力是不同的,有的需求方上来就说了很多概念词汇,比如我希望这次运营活动是高端、大气、上档次的,这很难让设计师正确地理解。


对于这种情况,我建议找一些可用的真实案例给到需求方,将抽象的概念具象化,事先搞清楚需求方心中的画面是什么样子的,特别是要明确设计风格、配色方案、背景元素、图文板式结构等信息。



1.3 提前弄清楚运营活动的要求

关于版权的问题是有可能导致项目无法上线的,我之前的一个项目就因为C4D这款软件侵权收到了一份律师函,需要将带有3D效果的在线元素全部替换。


因此在项目启动前可与需求方确认有关字体版权、图片版权、软件使用权等问题,避免在效果图出来后再去调整,耗费公司人力成本。



1.4 除了沟通还应该设立审核环节

这个并不属于交流的范畴,但是我觉得他也是影响设计师反复改图的重要原因之一,还是有必要说一下的。


运营活动上线都是有明确时间节点的排期安排的,所以设计稿审核的环节要特别重视,尤其是大型的运营活动不要等到最后的环节再去审核,因为如果审核不通过有可能会重新做,所以在设计过程之中应多设立几个审核环节,保持和需求方的想法是时时同步的,千万不要等交付时间快到了再进行审核,到时候谁加班谁痛苦。详细审核环节设置,大家可以参照下面的图片:






二、运营设计其实也可以增效

“增效”这个词近几年火得不行,尤其是和老板说增效的事情,他会非常感兴趣的。以下是我亲身经历的一个项目,也正是从这个时候开始,我开始思考团队增效的事情。



2.1 明白运营经理想要什么

以前遇到一个运营活动落地页的项目,需求方说;“我们不需要绘制复杂的插画放在Banner里,简单画点喜庆的元素,把活动标题展现清楚就好了,设计同学也不需要花那么多时间来设计,你们能多久给到我呢?。”


我相信有不少小伙伴曾经遇到过这个情况,通过以上案例,不难看出设计师想要的跟运营经理想要的并不一样。大部分运营经理更在意的是文案的露出、能多快地交付;而大部分运营设计师更在意的是图片美不美、炫不炫,整体的图形表达最终给用户的感觉是否和设计师所想的一致。



2.2 增效的两种方式

在理解了运营经理他们所在意的事情之后,我发现针对有严格交付时间的运营项目而言,运营设计的增效是很有必要的。一般来说“增效”有两种方式,一种是提高输出效率,另外一种是降低人工成本。


提高输出效率:我知道在行业内,58集团自主研发的运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器算是两款增效的工具,这两款工具为运营工作提供高效且高质量的输出环境。


降低人工成本:我相信大多数同学的公司是没有这类平台资源,不用担心,没有我们可以自己搭建简略版的组件代替,比如公司里有些运营活动要跟上新闻热点,如果我们事先做好3-5个尺寸一致的模版套件,当新闻热点来的时候只需要插入图片更新标题就可以先推送出去,这种做法会极大地降低设计师的制作成本。


再比如组内成员可以利用平时的工作时间做一些通用的组件如红包、优惠券等,在要求快速完成运营活动的时候,可以挑选风格合适的样式替换。





三、做好运营需要了解用户心理

纵观市场,会发现大部分设计师都是作图高手,那些能够在前期参与策划运营活动,帮助运营经理想一些更有趣好玩儿的idea的人才是凤毛麟角的。



3.1 需要有正向、反向思考角度

记得看过一次求职类节目,一位求职者推销颈椎治疗仪的案例让我印象深刻。因为他的推销过程很精彩,他用了两种方法去推销产品。


第一种思路:介绍产品的优点,表示你买了我们的颈椎仪脖子的酸痛问题会得到缓解。

第二种思路:如果你不买我们的颈椎仪,你很有可能因为颈椎不舒服而失去良好的睡眠质量。


当然那个应聘者也得到了心仪的企业offer,那时候我就觉得这位应聘者很聪明,聪明的点在于对犹豫不决、不想买的用户都设计了自己的对策。


对犹豫不决的用户来说,通过正向介绍产品优势,从而获取用户青睐;对于不想买的用户则利用反向思维讲述这个产品会和你睡眠质量有关系。


设计师是一个很重视用户同理心的一个职业,当我们越是了解用户的想法,就会知道用户最需要什么,做的设计也就能更好地贴合用户需求,最终完成提高运营活动的数据的运营目标。



3.2 触发点击行为和用户心理有关系

2009年,斯坦福大学行为科学教授福格(Fogg)提出了一种人体行为模型,简称为 FBM。根据这一模型,他提出促使一个人的行为的发生离不开三个因素:行为动机(Motivation),行为能力(Ability)和触发条件(Triggers),用公式表达就是B=MAT。用户行为的产生需要动机、能力、触发等有机结合,通过对动机、能力、触发等干预可以影响使用者的行为。


引发用户点击行为,本就是运营设计师必须要做的事情,但是触发用户点击这个行为就要洞察到用户心理所想。这里我推荐《飞书官方-认知偏差知识手册》,大家可以从这本书里面了解一些用户基础的心理学知识。


这里我还想补充一点,设计师为什么要学习心理学。如果有人问你设计是什么,很多人都会回答设计就是解决问题,这是一个很标准的答案。在我看来,设计解决两个问题,第一个就是实现,把以前没有的东西做出来,第二个就是推广,把已有的东西卖出去让更多人知道。很明显运营属于第二种。


但是需要大家注意的是主语,上一句话的主语是“设计”而不是“设计师”。设计师更像是一个翻译官的角色,其本质在于精准地表达,设计师利用擅长的图形、色块等元素给用户传递信息,比如说格式塔原理就在于能帮助设计师,清晰地规划出用户先看到什么,提早预测出用户看到这张图会产生什么感受,做到可以通过设计技巧,让用户感受到设计师想传递的信息和感受,这就是我们要学习心理学的原因——为了更科学地了解用户使用习惯(如格式塔原则可以科学地构建效果图的阅读顺序),做贴合用户需要的设计,让用户满意,从而完成盈收的运营目标。总结一句话,运营设计师不仅要询问用户想要什么,更要询问运营经理想表达什么。



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

文章来源:站酷 作者:斜杠7湿兄
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




腾讯文档-色彩系统应用篇

ui设计分享达人

《腾讯文档-构建科学有效的色彩系统》这篇文章中,我们阐述了腾讯文档如何升级了新的品牌色,为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知,以及如何构建一个科学有效的调色板。


在设计系统的实际运行中,我们也需要着眼于如何应用调色板,建设协同工作流,并给各个角色提供有关色彩的扩展指导,以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。

在建设腾讯文档色彩系统的工作中,我们首先构建了一个包含品牌色、灰色、辅助色的调色板,但仅有这个调色板不足以支撑我们流畅、无障碍的协同工作。日常工作中,“这里我用哪个蓝色?”“这里我用哪个灰色?”“开发同学能否快速的变更某些元素的颜色?”等等问题层出不穷,建设系统的协同工作流迫在眉睫。



Chapter 1

——————————

如何建设?

HIG强调不要在APP中使用“硬代码”,即十六进制色值进行编码,但前期我们构建的调色板仅有色值,这种硬代码应用到app中导致项目效率低下,维护也会成本激增。


于是在腾讯文档中,我们开始采用颜色变量(color token)和主题(theme)来管理颜色,颜色变量(color token)基于任务(role)、主题(theme),为UI中的任务指定十六进制代码的色值(hex value),以弭平设计师之间、开发与设计师之间的沟壑,将颜色变量(color token)嵌入设计组件中与开发代码形成联动,便于开发利用程序中的变量来做全局修改,横向提升团队的协作效率。


所谓颜色变量,通俗的意思就是可以将一个颜色按任务用途去抽象,抽象成一个有命名的颜色样式,这个颜色样式就是颜色变量。


在设计或者代码中,可以通过修改这个颜色变量的值来进行全局颜色的更新。例如,我们现在需要给button一个颜色,不要将其写为 #1E6FFF这样的色值,而是将button的颜色指定为命名是Fill-01的颜色变量, 如果有重大版本更新,仅需将颜色变量Fill-01的色值更新,即可实现全局颜色的高效更新。如果在不同的主题下(例如浅色/深色模式)button有不同的颜色表现,颜色变量Fill-01可以在不同主题下,映射不同的十六进制色值。这就是我们建设协同工作流的的基础逻辑。



Chapter 2

——————————

为调色板的基础色值命名


调色板的各个色值(hex value)是最底层的基础样式,我们将色板上的颜色进行规则化命名,以方便后期将其引用到颜色变量中。


腾讯文档包含核心蓝色、蓝灰色、中性灰色及其他辅助色,按照颜色属性,将其命名为:Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red,并在命名中加入色阶后缀。

*腾讯文档调色板命名图表



Chapter 3

——————————

定义颜色使用规则


1、 从调色板中选择合适的颜色并测试

从调色板中根据UI中的任务挑选合适的颜色并进行可用性测试,做具体任务中颜色选择的最优解。


例如,我们需要选择一个蓝色作为链接色,作为文本,对比度必须达到4.5:1以上才符合WCAG2.0的可用性标准。经过测试我们选择了primayblue-02作为链接色。


腾讯文档的界面中,灰色系列占主导地位,起着至关重要的作用,为产品界面创造结构、表达边界、建立信息层次。在调色板中,我们选择了两种灰色:中性灰色和蓝灰色,来支撑系统的设计。蓝色系列是腾讯文档产品和体验的主要动作颜色。



同时我们也使用了其他颜色以满足一些冲突性任务(警示等)的颜色使用,这些颜色需要谨慎、有目的地使用。



2 、根据任务定义颜色的使用规则

经常会有设计师问,“这里我能用这个灰色吗?”出现这种问题,根本上还是颜色使用规则定义的不够清晰,含混的口口相传的规则会导致更多的混乱。于是,需要我们根据任务和使用场景把颜色的使用规则清晰的定义。


首先定义在界面中占主导地位的灰色、蓝色的使用规则。


蓝灰色_Grayblue:

在腾讯文档中,蓝灰色与品牌蓝共同建立品牌印象,由此,蓝灰色主要应用于与风格相关的场景。包括:图标色、填充底色及大面积的背景色等。



中性灰色_Gray:

中性灰色主要应用于一些全局系统行为。如:文本、分割线及交互反馈hover、press等场景。



品牌蓝色_Primayblue:

品牌蓝色主要应用于系统中的各种行为,如蓝色图标、button、文本链接等。



其次定义在界面中用于警示、状态提醒的其他颜色的使用规则。


红色_Red:

红色主要应用于系统中需要警示的场景,如红色警示图形、错误文本、红色tag等。



其他颜色:

在腾讯文档中,会针对不同的任务应用不同的颜色,如左滑操作、成功提示、高亮显示等。



品类图标基准色:

在腾讯文档中,不同的品类有不同的基准色。



Chapter 4

——————————

颜色变量的语义化命名

定义了颜色在系统设计中的使用规则后,我们需要根据颜色变量的使用用途对其进行语义化命名。一套好的语义化命名规则需要易于维护且具备可拓展性,如果只是将调色板的色值命名为 blue-01、blue-02... ,语义化的收益并不明显。哪天设计团队需要调整品牌风格,或是苹果又掀起什么新潮流,把所有命名为 blue_x 的变量改为 gradient_serenity, 对于开发来说也是巨大的灾难。


根据 HIG 的建议,语义化命名不应该描述外观或者色值,而是指明这个颜色的任务用途——标签 Labels,分割线 Sepatators 或者填充 Fill。


在思考如何赋予颜色语义化的命名时,设计师也需要用更概括和结构化的视角来看待界面设计,同时也需与开发同学达成一致,使用同样的命名,满足以更好地维护一套收敛和统一的设计语言。


在腾讯文档中,颜色的任务用途定义为为以下几种:背景色 Background、文本色Text、图标色Icon、分割线 Border、透明填充 Transparent fill 、实色填充 Opaque fill 、默认交互反馈 Feedback、语义 Intent。统一使用ultrastrong、strong、medium、weak、ultraweak作为后缀来表达颜色强度。在需要更明确的用途说明的任务中,直接描述其用途,例如:hover,pressed、disabled等。





Chapter 5

——————————

建设团队协同工作流


以上种种,最终目的在于建设团队的协同工作流,将颜色变量(color token)嵌入设计组件中与开发代码形成联动,便于设计利用变量及组件、开发利用程序中的变量来做全局修改,横向提升团队的协作效率。


1、 设计内协同:在Figma中生成颜色变量

在设计系统中,颜色变量属于底层的设计原子,需要将其生成为颜色变量并嵌入到设计组件中,便于设计内部使用。我们将已根据任务用途命名的色值,生成figma中的颜色样式(color style),后续无论是进行组件的设计,还是项目的设计,都可以直接赋予设计元素明确的颜色样式。


2、 设计组件与开发代码联动:利用颜色变量表进行信息同步

我们生成了一个面向内部、外部的颜色变量表,进行颜色变量的说明和信息的同步,沉淀落到实处的资料文档。(此处推荐使用腾讯文档,多人协作实时沟通~)



最终形成了设计组件库与开发组件库的联动,构建了一个协同工作流,横向提升工作效率。



结束语

上篇的调色板设计后,一直在酝酿这篇调色板的实际应用。在设计一个较为复杂、庞大的产品时,提效是永恒的课题。痛过、踩过坑的设计师应该深有感触,沟通的无力、推动的困难都推动着我们发动自己的能量去想办法提效。




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

文章来源:站酷 作者:腾讯ISUX
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

个人资料

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

存档