首页

大屏数据可视化设计指南

ui设计分享达人

可能是目前大屏数据可视化设计介绍最详尽的一篇文章了,可以当做设计手册使用的一篇经验分享

Image title


一、基础概念


1、什么是数据可视化


把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。


在当前新技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

Image title


数据可视化作品《launchit》

作者:Shane Mielke 

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数

Image title


数据可视化作品《world-drawn-by-travelers》

作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两国家的人们互动越频繁

Image title


2、什么是大屏数据可视化


大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

Image title

Image title


利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论、决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。


数据分析类

图片来源:必应;图片作者:帆软软件有限公司

Image title


二、大屏数据可视化设计原则:设计服务需求、先总览后细节


设计服务需求


大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。


先总览后细节


大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。



三、大屏可视化设计流程


规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

Image title


1、根据业务场景抽取关键指标


关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。


确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

Image title



2、确立指标分析维度


“横看成岭侧成峰”。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

Image title

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。


联系:数据之间的相关性

分布:指标里的数据主要集中在什么范围、表现出怎样的规律

比较:数据之间存在何种差异、差异主要体现在哪些方面

构成:指标里的数据都由哪几部分组成、每部分占比如何


当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。


3、选定可视化图表类型


当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。


选定图表注意事项:易理解、可实现;


易理解就是可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

Image title


可实现


1、我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现

2、我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计!一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放

Image title


4、了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率

Image title

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率;此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。



5、页面布局、划分


尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

Image title


6、定义设计风格


很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有APP或者Web风格定义的经验。我们在定义一款APP或者Web页面设计风格时常用的方法是什么呢?情绪版!

大屏虽酷炫,但实际上也是运行在浏览器里的Web页面,所以大屏设计风格定义方法也同样可以是用情绪版来做,这种方法也是目前比较科学的风格定义手段

Image title

上图提供了情绪版应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料哈。

情绪版的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方爸爸做大屏,这个流程也可以让我们提出的方案更有说服力



7、可视化设计


根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通的。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

Image title


8、样图沟通确认


这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。

Image title

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个“低保真”原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。


因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

1、之前确立的布局在放入设计内容后是否依然合适

2、确立的图表类型带入数据后是否仍然客观准确

3、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受

4、已有的样式、数据内容、动效等在开发实现方面是否存在问题

5、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象


跟大屏“沟通”是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次。



9、页面定稿、开发


事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

Image title

切图与标注

由于大屏实际就是一个web页面,所以开发阶段的切图与标注是少不了的。


切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。


标注

Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用rem作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。



10、整体细节调优与测试


这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。


视觉方面的测试(有点像APP的UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。


性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在奔溃、卡死等情况;后台控制系统能否正常切换前端页面显示。



四、大屏设计的注意事项


1、字体使用


字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

Image title

如果页面是云端部署,需要嵌入字体包时,我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

Image title

关于字体版权获取相关问题,公众号回复“可视化”获取



2、颜色搭配


 1、色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色

Image title

2、使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容、做出一些流光、粒子等酷炫的效果,


3、渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。



3、页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各小的显示单元,并尽量避免关键数据被拼缝分割

Image title



五、Q&A


1、设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。



2、大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以



3、1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会发虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下。

大屏逻辑分辨率(设计稿尺寸)——显卡输出分辨率——视频矩阵切换器(DVI)支持分辨率——大屏实际物理分辨率。


一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率,传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于DVI支持分辨率时显示效果最佳。输出分辨率低于DVI支持分辨率,DVI会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。


离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰



4、设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。



5、除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云DataV、腾讯云图、百度Sugar等



6、数据可视化的图表样式可以在那些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览产看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础修改

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的,所以彼此多沟通交流是在太重要了

Image title


总结:数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流

转自UI中国-BYMD


交互设计师常用的设计理论与心理学

ui设计分享达人

掌握好常用的设计理论与心理学知识,能帮助我们对用户的人性特征的拿捏,帮助我们较大的影响用户底层决策,以产品实现业务目标。

一、尼尔森10大可用性原则


1、状态可见原则

不局限于:用户的当前状态、知道当前任务要做什么、任务进度等。

2、环境贴切原则

设计要复合目标用户的认知,符合用户的心智模型,于是熟悉的事物越容易被用户所接受。

3、撤销重做原则

操作前可预知,操作中有反馈、操作后可撤销。

4、一致性原则

不局限于:业内产品的一致性、产品内的一致性、版本迭代间的一致性

5、防错原则

错误行动发生前,引导用户向正确的方向前进;用户触碰到危险操作时给予提示;危险操作发生之后,提供撤回的入口。

6、易取原则

通过使用对象、动作和选项的可视化表达,最大限度地减轻用户的记忆负担。

记住用户的操作记录、一个流程对应一个操作目标、提供适量的信息、选择而不是输入。

7、灵活原则

好的产品需要同时兼顾新用户和资深用户的需求。对新用户来说,需要功能明确、清晰,对于老用户需要快捷使用高频功能。不可迎合某一种用户,把不必要的信息占据重要部分。

8、易扫(读)原则

不要包含不相关或低频次的信息/操作。页面中的每个额外信息都会降低主要内容的相对可见性。

产品设计的四大基本原则:亲密性、对齐、重复、对比。

9、容错原则

错误信息应该用通俗易懂的语言表达,较准确地指出问题,并且提出解决方案。避免通过代码等用户难以理解的形式

即:提供解决方案、帮助用户从错误中恢复

10、人性化帮助

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


二、费茨定律

翻译成人话就是:

1. 按钮做大点(W大点)更易于点击

2. 将按钮放置在离开始点较近的地方

3. 相关按钮之间距离近点(D小点)更易于点击

4. 屏幕的四角与四边是「无限可选中」位置(非移动端)

5. 通过费茨定律的反向使用,可以降低按钮被点击的可能


三、米勒定律


米勒定律预测人的工作记忆能够记住的项为7(±2)个。1956年认知心理学家乔治·米勒发表了一篇论文,他讨论了短期记忆和记忆跨度的极限。

不要乱用 “神奇的7” 为设计进行不必要的限制;

将内容整理为较小的单元,以便用户轻松地处理、理解和记忆。


比如电话号码的显示方式、银行卡的显示方式等


四、接近法则


观察者看到彼此邻近(空间或时间)的物体时,会将它们视为一个整体。

在界面设计中,对信息的组织已经离不开这个法则了,他在界面中所体现的就是把相关的信息块组合在一起,不太相关的分离开,增强与区分元素之间的关联性,所强调的是空间和位置。

接近法则产生于群组,它可以减少信息设计的复杂性,对引导用户的视觉流、便于用户对界面的解读起到至关重要的作用。


五、席克定律


希克定律是一种心理物理学定律。用户所面临的选择数量越多,做出选择所花费的时间就越长,在人机交互的界面中选项越多,意味着用户做出决策的时间越长。


六、泰斯勒定律(复杂性守恒定律)


泰斯勒定律又称复杂性守恒定律,该定律认为每一个过程都有其固有的复杂性,这个复杂性存在一个临界点,超过了这个点就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。


七、奥卡姆剃刀原理


奥卡姆剃刀原理的核心思想为:“切勿浪费较多东西去做用较少东西同样可以做好的事——如无必要,勿增实体,即简单有效原理”。


八、防错原则


操作前有提示,操作中有反馈、操作后可撤销。


九、损失厌恶


损失厌恶是指人们面对同样数量的收益和损失时,认为损失更加令他们难以忍受。同量的损失带来的负效用为同量收益的正效用的2.5倍。损失厌恶反映了人们的风险偏好并不是一致的,当涉及的是收益时,人们表现为风险厌恶;当涉及的是损失时,人们则表现为风险寻求。


十、安慰剂效应


“安慰剂效应”指的是,对于某种无效的疗法或干预手段,仅仅是“相信它有效”,就能改善健康,并能改变认知


十一、多尔蒂门槛


研究结果表明,计算机的响应速度直接影响了使用者做出下一个决定所要花费的时间(这个时间被称为用户响应时间),换句话说,计算机相应的时间越长,用户就要花费越多的时间来思考和决定下一步的操作。


合理的操作响应时长、方式有助于用户保持专注和提率。

软件操作的过度动画时间不宜太短或太长,最常见于 400ms 左右。

如果无法避免操作中较长读取、等待时间,那么就用其他更有趣的动画、页面来减少用户的焦虑感。


十二、马斯洛需求层次理论


马斯洛需求层次理论是人本主义科学的理论之一,由美国心理学家亚伯拉罕•马斯洛在1943年在《人类动机理论》论文中所提出。书中将人类需求像阶梯一样从低到高按层次分为五种,从低到高依次是:生理需求、安全需求、社交需求、尊重需求和自我实现需求。

但最终马斯洛添加求知需求和审美需求,自此马斯洛需求层次理论最终定型为8层。

十三、格式塔心理学


格式塔原则描述了当某些条款和条件被应用时,人类大脑如何感知视觉成分。它帮助大脑创造视觉的意象。因此,格式塔原则基于六个主要类别:

位置和位置;

接近;

对称与秩序;

类似;

关闭;

连续性。


十四、自我参照效应


第一种是精细加工说:在记忆过程中,这些事物在头脑中被进行了精细加工,与头脑中的已有知识之间建立了更多的联系,因此回忆时的提示线索更多,回忆效果更好。

第二种是组织加工说:于自我的知识是头脑中存在的一种结构良好的组织体系,它对与自己相关的事物有更好的固着作用;同时,由于自我知识常常被激活,因此与之相关的信息也更容易被相应地激活起来,这样回忆起来也就更容易。

第三种是双过程说:即自我参照任务能提高记忆的机制既包括精细加工因素,也有组织作用的参与

广告商会挖空心思的建立商品和你的关联,告知我们如果你购买了我的商品,你就会获得怎样的好处。而自媒体人则在标题上尽量简明扼要的说明,我要说的事情和你密切相关,不看就亏了。所以,稍微有深度的文章在快餐式的自媒体平台中反而阅读量不高,这是因为文章标题所涵盖的内容可能只和少部分人有关。


十五、上瘾模型


1、触发:提醒人们采取下一步行动


触发分为外部触发与内部触发

外部触发又分为:

付费型触发、回馈型触发、人际型触发、自主型触发。

内部触发

内部触发通过用户记忆存储中的各种关联来提醒他们采取下一步行动。

比如饿了的时候想起饿了么,想健身的时候想起keep


2、行动:人们在期待酬赏时的直接反应


福格行为模型可以用公式来呈现,即B=MAT。B代表行为,M代表动机,A代表能力,T代表触发。要想使人们完成特定的行为,动机、能力、触发这三样缺一不可。 否则,人们将无法跨过“行动线”,也就是说,不会实施某种行为。

比如说中午十一点你饿了想到饿了么订餐但是由于你的手机没电了定不了餐,中午要吃饭是动机,订餐想到叫饿了么外卖是触发,能够用手机订餐是能力,但是因为手机没有电 你就缺乏了相应的能力所以这个行为就没法完成。(当然你也能用朋友的手机订餐,这里只是举个例子)


福格总结了简洁性所包含的6个元素 ,即影响任务难易程度的6个要素,它们是:


  • 时间——完成这项活动所需的时间。

  • 金钱——从事这项活动所需的经济投入。

  • 体力——完成这项活动所需消耗的体力。

  • 脑力——从事这项活动所需消耗的脑力。

  • 社会偏差——他人对该项活动的接受度。

  • 非常规性——按照福格的定义,“该项活动与常规活动之间的匹配程度或矛盾程度”。


四种非常规的效应刺激动机:


  • 稀缺效应:(限量1000件)

  • 环境效应:(同一款啤酒在便利店和高档就把价格不一,但人们愿意为价格买单)

  • 锚定效应:(瑞幸咖啡定价24元的拿铁对标星巴克的32元拿铁)

  • 赠券效应:(利益进度吸引用户动机)


3多变的酬赏:满足用户的需求,激发使用欲


多变性会使大脑中的伏隔核更加活跃,并且会提升神经传递素多巴胺的含量,促使我们对酬赏产生迫切的渴望。 研究测试表明,当赌博者赢了钱,或是异性恋男性看到美女的图片时,大脑伏隔核中的多巴胺含量会上升。

多变的酬赏主要表现为三种形式:社交酬赏、猎物酬赏、自我酬赏。那些让我们欲罢不能的习惯养成类产品或多或少都利用了这几类酬赏。


社交酬赏

所谓社交酬赏,是指人们从产品中通过与他人的互动而获取的人际奖励。比如微信的点赞评论、站酷的推荐,用户能够获得社交的认同。


猎物酬赏

猎物酬赏,是指人们从产品中获得的具体资源或信息。


自我酬赏

所谓自我酬赏,是指人们从产品中体验到的操控感、成就感和终结感。


4、投入:通过用户对产品的投入,培养忠实用户


要想让用户产生心理联想并自动采取行动,首先必须让他们对产品有所投入。


用户对某件产品或某项服务投入的时间和精力越多,对该产品或服务就越重视。事实上,有充分证据表明,用户投入的多寡与其热爱某项事物的程度成正比。


1、文饰效应心理


(1)我们总是高估自己的劳动成果。

(2)我们总是尽力和过去保持行为一致。

(3)我们总是避免认知失调。


2、点滴投入


(1)储存价值

(2)内容

(3)数据资料

(4)关注者

(5)信誉

(6)技能


3、加载下一个触发


用户投入的同时也可以通过加载下一个触发的令自己重新开始上瘾循环,从而增加了进入上瘾循环的可能性。


十六、雅各布定律


雅各布定律(简称雅各布互联网用户体验法则),它指出如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。


我们在与新事物互动的过程中,用户使用的是以往的经验


对设计师来说,我们可以匹配用户的心智模型来改善体验。因此,用户可以轻松地将已有经验从一种产品或体验转移到另一种上,无需额外了解新系统的工作原理。

当设计师与用户的心智模型一致时,良好的用户体验就得以实现。


十七、KANO模型


KANO模型大家可以看看这个童鞋的总结很详细

https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html


十八、古藤堡表图表法


人们在浏览页面或布局时视线趋于从左上角移动到右下角

古腾堡图表法说明我们观看页面的视线并不是镜面对称的,我们需要在设计中避免出现此类错误但绝不是墨守成规,将页面的 Logo放置在左上角而主体向右下角延伸,左下和右上作为视觉的盲点可以添加辅助元素


十九、尼尔森F型视觉模型


尼尔森F型视觉模型由 Jakob Nielsen于2006年提出

他指出,我们在第一次观看页面时,视线会呈 F的形状关注页面。
1.先从顶部开始从左到右水平移动。
2.目光再下移开始从左到右观察但是长度会相对短些。
3.以较短的长度向下扫视,形成一个 F形状,此时我们的阅读速度较慢,更为系统和条理性。


二十、序列效应


1.在列举信息时,排在最前和最后的元素,比排在中间的更容易让人记住。

2.对排在开头的信息产生加强的回想效果,称为:初始效应,人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果,称为:时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。

3.在列举信息元素时,如果列举信息属于视觉性,那么把重要的信息放在最前面;如果是听觉性,就放在最后面。如果是用户必须做决定,并且是最后一项出现后马上做决定,那么就将想要用户做决定的信息放置最后,以便增加获选概率,否则放在最前面。

4. 应用例子:比如在很多app产品设计时,个人账户与设置基本放在页面的最前面和最后面,这体现着产品信息的序列关系,重要次序,所以在进行设计时,可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作,也可以利用这个法则,将信息放置最前或最后。

转自:站酷-YELLOW_J 

啥?你说我不懂如何设计消息中心?

ui设计分享达人

消息中心设计样式的简单汇总

作为APP标配的消息中心,我们无时无刻不在与其打交道,看似千篇一律的设计实际上其中也有许多值得我们深入探讨的内容,今天我们一起从消息中心页入口出发,一层一层剥开它的秘密。


全文分为五个部分:

一、消息中心页入口位置

二、消息中心页常见的组成模块

三、消息中心页分类导航方式的选择

四、消息列表的呈现形式

五、划重点


一、消息中心页入口位置


消息中心页是应用内系统发送给用户的各种信息的一个集合页面,它的本质是与用户互动沟通。也就是说,产品越是需要与用户进行沟通,消息中心的重要程度也就越高。


一般情况下,不同类型的APP消息中心的重要程度为:社交通讯类>电商类>资讯类>工具类


而消息中心页的入口位置正好侧面反映了其在产品中的重要程度。


1.底部导航栏

消息中心页入口位置放在底部导航栏,属于一级导航,重要程度很高,常见于即时通讯、社交社群类产品,如下图:

即时通讯类的QQ,核心业务就是通讯交流,消息页入口不仅放在底部导航栏,且做为APP的首页。而微博作为最早的社群内容类产品,社交沟通需求也很高,固将消息中心入口放置在底部导航栏。


当然也不是只有社交通讯类产品会选择该位置作为消息中心的入口,如下图淘宝和小红书也将消息中心入口放置在底部导航栏。

淘宝本是电商类产品,消息入口放置在底部导航栏,结合官方号、内容号、小黑群等功能,我的理解是淘宝是想通过社交沟通促使用户更多的购物。


小红书主打生活内容分享,辅助电商购物,是现在比较常见的某个核心业务+社交的产品,这类产品可根据自身一级导航类别的多少决定是否将消息中心入口放置在底部导航栏。


2.顶部导航栏

消息中心页入口放置在顶部导航栏,重要程度根据入口跟随页面的多少分成两种情况:


1)几乎每页跟随,重要程度较高

京东和豆瓣几乎是每个一级页面的顶部都有消息页入口图标,京东甚至在一些二级页面也还保留了顶部消息入口,方便用户随时查看。


2)仅在动态页、首页或个人中心顶部有入口,重要程度较低

如上图所示,爱奇艺的消息入口仅出现在泡泡页面的顶部,KEEP的消息入口在个人中心页的顶部,二者都只有一个入口。


3.个人中心页

消息中心页入口放置在个人中心页除顶部外的区域,重要程度一般,某些APP会在个人中心消息入口直接对其分类展示,用户能快速地到达想去的消息分类。

波洞的消息中心入口在个人中心页就分好了类别,用户点击进入对应的类别,消息页内部没有做类别的划分,相比放一个消息图标入口在个人中心顶部,更加直观。


入口不一定只有一个,三种情况混合使用也是可以的,重点是方便用户,引导用户。即便入口位置本身不显眼,加上红点数字后一样会被用户看到的。



二、消息中心页常见的组成模块


消息中心页的主要组成模块有:分类消息导航、消息列表;辅助组成模块有:搜索区、全部已读、消息设置、通讯录等。


1.主要的组成模块

消息中心的主要组成模块中消息列表是必不可少的(有些在下一级界面中),分类消息导航根据消息类别的多少不一定都有。


前文对消息中心的定义说过:消息中心页是应用内系统发送给用户的各种信息的一个集合页面。集合页面意味着消息本身被划分成了各种类型,这时候适合的分类消息导航能帮助用户快速找到需要的信息。


消息列表引导用户进入消息详情页,做为整个消息中心的核心,需要设计师根据产品需求尽可能多的考虑到囊括的信息类型,从而选择合适的消息列表呈现形式。


在第三部分中会着重介绍4种不同的分类消息导航,第四部分介绍3种不同的消息内容呈现形式。


2.辅助组成模块

所谓辅助的组成模块,就是不一定所有消息中心都有的,要结合产品实际情况增减。主要包括搜索区、全部已读、消息设置、通讯录等。

上图中微博的消息中心基本包括了所有的辅助组成模块,用户可以收发消息,设置消息,搜索消息,形成了针对消息功能的一个闭环。像微博这种消息功能重要,类别多,有社交属性的产品加入这些辅助功能是合适的,但不适合所有产品。


1)搜索区

用来在消息中心页搜索消息、联系人、群聊等的,仅适合消息中心页用户之间互动频繁的产品,如即时通讯类、聊天频繁的社群类产品。搜索区是全局搜索的根据产品自身性能选择加入。


2)全部已读/一键清除

对于用户体量不算大,消息沟通还不太频繁的产品可以不加。但对于消息沟通频繁的产品,不加的话,可能会逼死强迫症......


3)消息设置

用来设置消息提醒方式或屏蔽消息推送,大部分产品会将此功能放入设置中避免用户关闭消息推送,放在消息中心虽可增加用户体验,但也方便了用户直接屏蔽消息。


4)通讯录/发起聊天

常见在有好友通讯录体系或关注粉丝体系的产品中。



三、消息中心页分类导航方式的选择


消息中心分类导航方式主要有四种:顶部固定图标导航、顶部Tab导航、列表导航、顶部Tab混合导航,接下来通过分析它们各自的优缺点帮助你选择合适的消息中心分类导航方式。


1.顶部固定图标导航

顶部固定展示重要的3~5个消息类别,消息列表按照发送的时间顺序依次展示。

优点:可以突出重点消息类别。


缺点:类别切换不方便,需要返回上一级重新进入;超过5个类别后,其他类别只能归入消息列表中。


2.顶部Tab导航

顶部纯文字标签Tab导航,消息类别以标签的形式出现,可左右切换。

优点:切换方便,类别可拓展性强,占据空间小,为消息列表留出更多的空间,纯文字标签设计所需时间成本小。


缺点:分类标签不要超过9个,过多的标签用户切换到后面的成本较高,容易被忽略。


3.列表导航

消息中心列表导航有分类列表导航和混合列表导航两种形式。


1)分类列表导航

分类列表导航将不同的消息类别按照icon+文字的形式从上至下展示,左侧是消息类别,右侧是消息未读红点提醒,每一个列表对应进入一种消息类别。

优点:类别可拓展性强,分类清晰,设计简洁明了,适合轻量、极简风的消息中心页。


缺点:到达具体消息内容的路径较长,不适合复杂的消息中心页。


2)混合列表导航

消息列表与消息类别混合,按照消息发布时间顺序以列表形式展示,常见于重社交、即时通讯类产品。

优点:可拓展性极强,能容纳各种类别的消息。


缺点:消息内容太多后查找麻烦,需要配合搜索区使用,易产生阅读疲劳。


4.顶部Tab混合导航

顶部Tab混合导航,进一步对消息类别细致划分,一级Tab标签一般会划分为两部分:通知及消息/私信,通知一般是产品发送的一些系统消息或推送,消息一般是用户与用户之间的互动消息(包括官方号的信息),私信主要是有关注粉丝体系的产品的分类。二级内容根据需要选择进一步分类导航,如下图:

优点:将消息做了更细致的划分


缺点:有二级分类的页面占的空间大,消息列表展示空间少。



四、消息列表的呈现形式


消息列表是消息中心的核心,我们需要根据内容类型的不同选择合适的呈现形式,便于用户理解。主要的呈现形式有3种,分别是:icon/头像+缩略内容列表、图文列表、纯文字列表。


1.icon/头像+缩略内容列表

最常见的一种消息列表,以icon或头像+缩略内容的形式展示,符合从左到右的浏览习惯,能承载多种类型的消息,包括对话聊天类、订阅号、官方活动、系统通知等等,需要引入下一级页面展示消息详情。适合大部分的产品。


2.图文列表

消息列表采用图文形式,对用户更具吸引力,一般用在消息类别比较单一的消息中心。常见的有上图下文卡片(大图)和左图右文的展现形式。需要注意的是上图下文(大图)的展现形式对图片质量要求较高。常用在活动消息、资讯消息。


3.纯文字列表

消息列表以纯文字形式展示,形式较单一,能展示较多的文字信息,常见于通知消息。



五、划重点


本文主要通过消息入口位置、消息中心页组成、消息中心页分类导航选择、消息列表呈现形式介绍了消息中心页的设计。


消息中心页入口:底部导航栏、顶部导航栏、个人中心页


消息中心页组成模块:分类消息导航、消息列表;、搜索区、全部已读、消息设置、通讯录。


消息中心页分类导航:顶部固定图标导航、顶部Tab导航、列表导航、顶部Tab混合导航。


消息列表的呈现形成:icon/头像+缩略内容列表、图文列表、纯文字列表。

转自:站酷-人類君 

循环设计,用户体验如何呼唤时代变革

ui设计分享达人

关于循环设计,可持续发展是商业领域非常关注的话题,作为UX需提前转变思维,给企业带来更多价值,一线大厂已在运用这种思维



本文共 3589 字,预计阅读 10 分钟

译者推荐|本文从“可持续”和“设计”的两点谈起,来论述从线性经济向可持续经济的转变,以及“可持续设计”的四个主要阶段:理解、定义、制造、发布。

“循环设计”不是为了追求时髦或者抬升设计地位,而是将这个已经日益庸俗化的“设计”冠为自己的定语,是设计本身发展所趋,以及可持续发展所需,设计界需要对自己的责任有所承担,形成一个全局观、系统性看待设计问题的方式。让回收利用和可持续发展成为一种规范,从而做到一劳永逸。

我们生活在一个呼唤变革的世界。在过去的50年中,现代社会所依赖的漫不经心和无休止的消费是不可持续的。我们从小就不关心自己的事情。如果有什么东西坏了,我们也就不修了。产品被设计成用完直接丢弃,而不是去修复。数字产品也不例外。然而,为了解决这些问题,出现了一种新的思维方式:循环设计(可持续设计)①。(益达说:其实这个理念和风格已经存在了很长的时间,大多应用在不为大众所知的能源、材料再生流程之中,然而随着时代的发展,循环设计可以变得更加普世。)

①注:循环设计是20世纪80-90年代产生的一种设计风格,他又称回收设计,是指实现广义收回和利用的方法,即在进行产品设计时,充分考虑产品零部件及材料回收的可能性,回收价值的大致方法,回收处理结构工艺性等于与回收有关的一系列问题,以达到零部件及材料资源和能源的再利用。它旨在通过设计来节约能源和材料,减少对环境的污染,使人类的设计物能多次反复利用,形成产品设计和使用的良性循环。

那么,循环设计方法意味着什么?在数字产品上要如何使用?在回答这些问题之前,首先,我们需要仔细观察我们是如何构建我们的世界,为什么这个世界已经不可持续了,并且要理解环保世界的需求是如何改变我们的思维方式,促使我们渴望从线性设计模型转变为循环设计模型。


向循环转变


我们的经济主要基于“按需配置”流程之上。在此线性系统中,我们构建了会在一段时间后淘汰的产品,并且将其组件视为垃圾。与此相反,循环设计方法将产品的生命周期视为一个闭环,其中资源不断地被重新利用。


在“经典”线性模型中,产品经历了生产、消费和破坏的各个阶段,最终以浪费告终。在设计一款循环产品过程中,我们使用的方法包含四大阶段,这四个阶段形成了一个闭环,并形成了一个恒定的循环,在这个循环中,不仅仅只有闪闪发亮的、新的,未使用过的材料才被受欢迎。

 

循环设计方法的四个阶段是:

理解 / 定义 / 制造 / 发布



当我们同时看线性设计和循环设计模型方法时,有一点吸引人的是,开始设计东西的时候,方法的差异。从只是生产某种东西,到对我们将要生产的产品做出深思熟虑的决定,以及在实施过程中付出的努力和关心,这是一个大转变。


看看我们现在的立场


为什么做出这种转变如此的重要?我确信每个看新闻的人都听说过气候变化。NASA 致力于解决环境问题,因此我们都可以非常详细地了解人类行为和无限增长对我们生态系统的影响。


但好消息是我们不必继续这样做,因为我们可以很容易从数字世界中“产生”方式中学习事物的产生。电力废弃物已成为现代世界的主要废弃物来源之一。大量的手机和电脑被扔掉,随之经济是建立在每年都有新东西的基础上的。


当您的手机屏幕意外碎裂时,我们该怎么办?我们知道如何处理它吗?我们知道如何修理吗?我们并不知道……但是幸运的是,有些设计师对此问题提出了解决方案。Fairphone② 是一种合乎情理,模块化的智能手机,其组件数量很少,可以轻松更换和回收。大公司也应朝这个方向迈出一步,让回收利用和可持续发展成为一种时尚和规范,一劳永逸。

② Fairphone:这家公司生产的手机希望实现全球手机供应链的公平贸易,具体而言就是不使用“冲突矿物”并且确保生产手机的工人没有被奴役和压榨,目前仍然坚持在非洲贫困和战乱的国家进口材料,已经在刚果和卢旺达境内找到了一些矿山,用更好的商业实践推动当地经济更健康地发展。


设计和设计师的重要性


设计师,比任何其他专业人士,都更有可能在一转变中产生巨大的影响的人。我还敢说,我们有责任采用可持续设计的方式行动和思考。因为是我们创造了那些最终出现在传送带上的东西。我们也有责任教育我们的用户。幸运的是,越来越多的人重视具有可持续发展目标的产品或品牌,或者重视起在产品背后有意义的故事。同样,可持续发展不仅成为流行语,而且成为一种价值观,被越来越多的人意识到基于有限资源的无限增长是无法实现的目标。但是,要从线性经济向可持续经济转变,我们需要学习不同的思维方式。幸运的是,智能设备和数字产品的时代带来了一种复杂的设计思维方法,可以作为物理世界中生产链的范例。


用户体验必须提供什么


地球上有一个地方,您不能随便丢东西:互联网。这是一个对已有产品进行再构思的地方,您只能去完善它,不能丢弃它,因为如果您一夜之间说:“我不喜欢我的网站,明天我将推出一个全新的网站”,那您便会失去用户。

如果我们看一下可持续发展设计方法的四个主要阶段,就会发现我们在用户体验设计中使用的方法与此很相似。

让我们再次看一下四个阶段,然后将其更详细地分解:

理解

当我们谈论与循环设计相关的理解时,我们谈论的是在开始设计一个未来的产品之前就了解它的用户和环境。研究一直是数字产品设计的基础。与数字产品的连接比与实体产品的连接要更多的涉及到人类的心理。因此不可避免地要开发出新的研究方法,以帮助我们洞察用户在使用某种产品时的想法、感受和行为。但这不仅与用户有关, 研究还必须深入到经济领域,并研究未来产品的组成部分,同时牢记它们必须可被再次利用。


定义

在此阶段,将定义(商业)目标,并构建一个商业模型画布作为生产过程的计划。用户体验使用这种方法已有一段时间了,让涉众参与其中,并在设计过程中更多地激活它们。为我们设计的产品设定一个目标是至关重要的,因为有了它,我们可以为用户创造额外的价值。因此,无论是制作商业模型画布还是举办精彩的价值主张研讨会,在生产方式中实施这些方法都会对当前的生产流程产生巨大的影响。


制造

这是关键部分。现在我们正在做的事情就好像没有明天一样。随着每种无法回收的产品的出现,我们产生的废料越来越多。但是循环方法是为产品创建一个原型,并定义将需要使用那些材料反映在产品原型上,并在定义阶段概述的商业模型上定义材料。原型设计和构思是用户体验设计过程中的关键要素,这也是为什么需要制作原型。


发布 

根据循环设计模型,随着产品的发布,生产周期进入了第四阶段,然同时理解阶段又重新开始了。对于数字产品来说,这是自然发生的事前:你发布一个产品,基于该版本收集反馈,然后构思它,周而复始,这个循环再次产生。


但是,观察这个循环并建立这些连接仅仅是冰山一角。在数字时代发展起来的设计思维给世界带来了许多反思。


变革中的大佬


幸运的是,已经有许多大品牌意识到转变的必要性,并采取和提出了数字设计思维方法来支持转变,并建立循环设计的时代。根据《循环设计指南》,“我们应该把我们设计的所有东西都看作软件产品和服务——这些产品和服务可以基于我们通过反馈得到的数据而不断的发。”


用户体验研究和用户体验设计一直是在做的一件事是:基于全面的研究和真实的用户需求来构建产品。上面的设计指南是非常复杂的工具,具有许多可能的方法。它强调了从产品到服务流程转变的重要性,并展示如何使用敏捷流程并将其实施到构建产品的方法之中。


IDEO(全球顶尖的设计咨询公司)与 Ellen Macarthur Foundation(艾伦·麦克阿瑟基金会)合作,试图“试图通过设计构建一个具有恢复性和再生性的经济框架”。在这里,您可以找到几乎每个生产方面和领域——例如食品、时装、经济和设计——并在每个领域中提出解决方案,以打破线性生产系统。


耐克还宣布了其基于循环设计模型生产高品质运动鞋的新方法原则。正如您已经看到的那样,无论您身处哪个经济领域,都可以为循环生产过程的蓬勃发展做贡献,并成为一支主导力量。


重要的结论


我认为,作为设计师,我们始终要为变革而努力,并始终努力与客户、产品或服务保持紧密的关系,并通过构思使其不断完善,以实现这一目标。这是因为伟大的事情只有通过时间和不断的反思才能实现。在离线世界中,数字设计过程也有很多东西可以贡献。希望通过教育,能有更多的大公司意识到用户真正想要的产品是具有更多功能并可持续使用的,而不仅仅是将它们当作一次性产品,一旦它们不像最初那样光鲜就把她扔掉。

转自:站酷-大猴儿er



2020的UI设计趋势,我先收藏了(上)

ui设计分享达人




设计总是在变化。在过去一年里,我们不仅看见了五福的C4D运用,双11的动效插画运用,以及大量AR/VR智能的设计,还有苹果黑暗模式的普及,新技术带来新的体验和解决方案。2020年,关注研究新兴的用户体验趋势,前段时间,在我星球里,我带着设计师一起来研究关于2020界面设计趋势,希望能帮助大家是设计中有所启发。



 研究背景 



 随着UI/UX领域人工智能的发展,和虚拟现实等新技术的变革,从前单一的内容很难满足用户的诉求,用户的诉求也变得千人前面,所以在研究趋势之前,我基于这些关键词,来分析2020的设计趋势。




 色彩趋势 



1.彩虹渐变


这两年来,彩色渐变一直是设计趋势,设计师将大胆的渐变,饱和度更高的渐变运用在设计中去,让整体的色彩感觉,更加年轻化与活跃。



 Apple一直是这个领域的引领者,随着当年iPhoneX的发布,彩虹的渐变色,大胆的渐变风格瞬间成为设计师笔下的弄潮儿。



 这组插画中,作者就运用了大面积的渐变,两种颜色的运用,通过重叠,明度变化,丰富了整个设计层次。



 不仅在平面设计中,在网页设计中,也是被大量运用,SWATCH的官网,清新的渐变配合动感的模特照片,以及和产品的完全结合,让页面充满着活力。



 在移动端也是如此,金融产品的背景设计,银行卡面的设计,可视化图表的运用,都能看出大胆渐变还是很受欢迎。


2.黑暗模式


随着google和facebook以及instagram这些知名应用都开始提供黑暗模式,国内微信也开始黑暗模式,2020黑暗模式设计,一定是需要设计师去关注的。


黑暗模式,除了在黑暗中提高内容可读性以外,还能减少用户疲劳,还可以节约电池,所以黑暗模式在今年将是所有应用程序必不可少的一个功能。



 Google的黑暗模式运用,通过一个简单的按钮开关就可以切换,也可以根据系统定义切换。



 黑暗模式未来会成为一种标配,一个软件设计在刚开始的时候就必须考虑进来。



 关于黑暗模式,正向当年iOS扁平化刚出来的时候,国内的很多产品都还没有准备好,但是相信过不了多久,黑暗模式一定会普及开来,所以2020大家都应该提前去了解黑暗模式的,设计规范和细节。


3.更大胆的一种颜色



 除了渐变色,那么大胆的单色在设计中运用也会越来越多,整个设计就一套色彩体系贯穿,大多时候以品牌色的形式去运用,配合留白,对比明显的字体,整体给人印象深刻。



 在韩国的应用中用的比较多,它的优势是色彩干净,品牌整体感强,但是对设计师驾驭页面能力也要求很高,因为大面积的单色,如果用不好就会很刺眼。


 Naverpay的设计,整个界面就是用的绿色渐变,清新同时也能很好和Naver品牌色进行结合。



 在它的很多页面中,很多控件这个绿色运用的很巧妙,不会给人很刺眼的感觉,所以大胆的一种颜色运用在2020页将是设计师值得去关注的一个方向。



▲ 扫码加入知识星球,了解更多




 插画趋势  



在过去几年里,插画是一种新的表达方式,越来越多的设计师,插画师通过插画表达产品的情绪,个人的情绪主张,那么在2020插画的运用就得和品牌很好的融合起来,如果你的插画是和品牌割裂的,需要注意。


1.和品牌结合



 wibbite的插画,标志性欧美的风格,除了插画本身手法比较简约模块,插画中运用的色彩和内容本身也很产品定位匹配。



 插画对于品牌来说也是非常重要的一个因素,无论在界面设计,还是在品牌营销很多场景都需要插画去营造产品氛围和气质,插画有助于将我们的品牌故事讲述给听众听,所以在构建一个品牌时候,插画是非常重要的点之一,但是做之前一定要尽量多去了解我们为客户提供的设计价值,只有了解了用户价值,才能去定义去特色的故事,帮助产品。



 Uber系列插画提供暖色,以及安全蓝的运用,突出打车服务中安全的关键要素。




 Google的插画系统也是如此,没有很华丽的炫技,有的是对于多元文化的思考,设计场景的融合贯通。


所以不难看出,插画的方向一定是和品牌结合的,不会为了趋势而趋势,一定是围绕内容去设计。



2.3D插画



▲ 如果说这2年,各种各样的插画手法百花齐放,那么随着人们的审美变化,趋势也从静态变成动态,从平面变成3D,从今年的支付宝五福设计中大家应该能感觉到2020的插画设计一定是往着3D方向,而且是动态3D方向演进的。



 谷歌一组插画,结合与大脑、团队合作、想法、密码箱为图形进行创意设计,人物造型可爱好玩,凸显年轻化潮流。



 Apple在中国区App Store 的一组设计,整体设计以红色为主,运用了象征中国元素的龙、红包、灯笼、福字、纸牌作为设计元素,整体运用3D表达,凸显年轻和趣味性。


3.等距插画



等距插画这两年已经是一个主流风格之一,在未来还会接着流行,但是等距插画未来或许和场景联系在更紧密,在每年天猫双11设计中,互动城的设计每年基本都是等距插画风格,它的故事感和画面感,都能让人眼前一亮,所以电商的设计,在短时间内,大型活动场景基本都离不开这个风格。



 这组等距插画场景故事感很强,建立了一个空间世界,作为网站主风格非常的吸引人。



 除了这种大的场景,等距插画,在小的场景中,作为插画规范也是运用比较多,它风格可轻可重,随着5G时代到来,静态可能会逐步演进成动态插画。


4.根据内容定制的插画



随着内容的升级,对内容的表达也会被越来越重视,那么如何更好的把内容更生动表达出来,插画就是很好的一个形式,根据内容定制的插画,在很多产品中被运用到,互联网教育,IT等领域。所以专门针对内容去设计插画,在今年或许是一个趋势,插画不再是孤零零只是为了情感化而存在。



 Crowdrise的产品设计,整体就是运用作为整体设计语言,风格统一,内容突出,画面效果好。



 插画的形态终于不再是孤零零的只是用户情感的表达,而是随着内容的升级变化,在产品中发挥的重要性也越来越大。


3.3D黏土插画的运用


3D设计因为今年设计师很喜欢用的样式之一,我们将尽管3D已经存在了一段时间,但最近我们看到了很多模仿粘土样式效果的3D插图的兴起。这将成为今年流行的设计趋势,我们甚至还会看到很多艺术家在电影,插画和广告中结合了2D和3D风格。



 在instagran的一组设计中,设计师运用这种黏土和3D的方式设计,画面充满了生活感和温暖。



 谷歌也在它们的项目中大量运用这种黏土风格设计,会显得更加的现代和活泼,黏土的设计相对3D插画区别在于更加细腻,线条上更加柔和。


 字体趋势 



这几年越来越多的公司,开始定制字体,根据自己的品牌特质去做一些独特的字体,从国外到国内,品牌定制字体未来或许还会越来越多,对于设计师好处来说,这些品牌字体很多都是免费开放给设计师用,会形成一个很高的商业环境。


1.定制字体



 锤子发布了他们的Smartisan T黑字体。



 腾讯发布了定制的“腾讯字体”,相比原来倾斜的黑体字,腾讯的新字体更现代、更协调、更动感。运用起来也非常有力量感。


 阿里普惠体,随着集团业务庞大,字体使用场景多且复杂,包括各产品客户端、营销设计、操作系统、硬件设备、建筑空间及公关传播等等。决定以现代为核心设计理念,以可靠、明快为设计切入点,将阿里精神融入到字体当中。最终一款拥有现代感满足全场景黑体诞生了,而且商用免费。




 除了前面的阿里,腾讯,锤子,小米OPPO,京东也都发布了自己的专属品牌字体,所以在2020年,品牌字体或许是每个公司的一个标配了,我们拭目以待。




 国外其实是最早开始为品牌定制字体的,三星手机虽然销量消化,但是他们品牌字体:SamsungOne,设计风格,很强的现代感,而且,这个字体有不同粗细的笔画字重,适用面很广。






 IBM的字体名称:IBM Plex Sans Text,这款字体设计比较简洁,干净,没有多余的笔画,这个字体很良心免费商用的。


2.粗体的运用



纵观2020的一些设计,留白越来越大,边距越留越多,字体也变的很粗,粗的字体和正文普通字体形成了明显的对比,再加上网格的布局,让页面内容更加凸显。



 大字体的运用,字体就是内容,重复运用内容元素作为排版手段,对于内容组织和平面要求较高。




 在UI设计中,大字体的设计也很常见,苹果商店,苹果官方应用都是大字体的推崇者,随便5G的来临,对于内容的追求也会越来越高,那么除了大字体,视觉元素减少,内容本身质量要求也越来越高。


 粗的字体常用语大标题,或者页面导航性指引作业,帮助用户更好去理解功能本身,上面这个页面粗的字体就是导航,告诉用户这一页,你需要去完成什么动作指引。



▲ 扫码加入知识星球,了解更多




 最后 

 

设计趋势必然与技术发展紧密结合,作为设计师我们需要了解,以及平时和我们设计进行结合,下期将带来,2020的UI设计趋势下部分,看看还有哪些需要我们去关注的。

转自:ui中国-skys 

APP数据可视化设计实战分享

ui设计分享达人

我最近一直在想自己要写什么,不如这次就来说说我最近在项目中遇到的问题吧~


再给大家看看我的解决方案,如果大家有更好的方案欢迎留言,我们一起探讨啊~


最近一两年我所涉及的项目都是有关于将网页的功能系统改成APP,而针对的用户就是公司的业务经理,是金融公司的业务经理们,我们的甲方爸爸!

当然这就意味着网页的产品,会有大量的数据,而且由于网页产品的信息处理还没有太与时俱进,所以大量的数据都是文字和数字的组合,因此要将这些数据改成APP时,就觉得好难啊。

其实表单在APP上并不好放,最好的解决方法就是设计成图表,而现在市面上图标样式不管是网页的还是APP一搜一大把,Ant Design有专门的数据网站,如下图所示:




什么样的都能找到,那么我为什么会觉得好难呢?因为数据超多der~考虑的内容又有很多,难免忧愁。



一、为什么要设计图表?


因为数据表单在手机上并不好展示,同时从用户体验的角度上来考虑,数据本身都是数据组成,可读性就不太好,因此如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义(价值),图表只是最终的表现形式。



二、图表由哪些元素构成?


一张标准样式的图表基本上是如下图所标示的几种元素组成,如下图所示:



当然这只是最基础的一种图标形式,对于别的形式就不多介绍了,大家都有基础知识,本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计。



三、图表设计?


1、明确数据指标


首先,我们得先搞明白这些数据是怎么来的、干嘛的,尽可能要求他们给到你的是尽可能精准的数据,否则会导致接下来的工作前功尽弃。就举我前几天的例子来说吧,产品给了我这样一张图,如下图所示:


我没有仔细的去问一些具体的信息,比如数据最多的时候会是什么样、业务想在这个表里看到什么信息、想要解决的问题什么?这些我都没有问!


上来就是一顿设计操作,把表单设计成了这样,如下图所示:



结果在走查的时候,业务很明确的指出数据信息不够多,他们想要在页面上将所有的数据信息都能看到,而数据最多的情况,数据表单是长这样的,如下图所示:



就是因为一开始在拿到表单的时候没有仔细去分析,才会导致这种情况的发生,因此要如何改进呢?




2、明确设计目的


其实图表设计跟产品设计的思路有点类似,一开始要先明确的就是设计目标,但这个很容易被设计师所忽略,因此前期在缺少设计目标支撑的情况下,设计师就会像一个没有指挥的小乐手,闭着眼睛乱弹,没有方向感。 


就像我之前设计方案被推翻,就是因为思考不明确导致的,定义设计目标的过程需要站在业务的角度和数据的角度进行综合分析从而进行构建,一方面需要考虑业务如何更简单的分析、理解数据从而提高决策效率;一方面又需要考虑数据本身如何更加精准、一目了然的传达给用户。




3、规划设计方案


我在写这篇文章的时候,看了很多相关的图表文章,很多都是分析哪些不同类型的图表,配色上要怎么处理,或者哪些图标是用在什么地方的,对我都没有太大帮助,因为图表设计并不是普通的只是要好看的图表而已。



4、解决问题


重新设计之前,我去找业务很详细的了解了他们对于数据的需求,想要一目了然的看到所有的数据对比信息,数据在表单中要全部展示出来,数据后台每天都会刷新,针对的场景是来自在去拜访客户路途中查看客户目前的信息,我就将图表改成了下图所示:



由于面对的数据信息比较多,条纹图比较符合多数据的信息,当然这是数据最多的时候出现的情况,每家公司出现的数据是根据业务所提交的信息展现的。


在功能确定了之后,就是我们的细节问题,不是说我们在750*1624的画布上设计好了图表就行了,我们还要考虑到适配的问题,如下图所示:



屏幕较窄的时候,将X轴的标签文字打斜,保证数据正常阅读的同时也不影响美观度。还有一种解决方案就是有连续的数字时,可以有简写。



四、如何选深色底和浅色底


我们可以先来一个对比图,同样的数据在深色背景和浅色背景下的图表可读性做对比,如下图所示:



很显然浅色背景下的图表阅读效率更高,那么面对复杂数据的时候,情况是否一致呢?如下图所示:



很显然,深色更适合展示信息比较多的,突出重点信息的页面,因此我们在找数据页面参考,在选择深色和浅色背景里犹豫的,可以参考一下。




五、划重点


这里讨论的只是我在公司项目中的其中一个图表设计,不能说做的很多,只是分享一下自己在试错的过程中的成长,从web端改到APP,都会说减少一些功能,让产品更好用,但是总有不想砍功能的需求方,如何满足这些需求,是需要我们一直都在思考的事情。


转自:ui中国-潘团子


国外设计师分析的全新UI趋势,原来是它~

ui设计分享达人

分享火爆Dribbble和Ins的设计趋势




相信最近很多小伙伴在逛Dribbble时候,发现最近流行一波新的设计风格,和以往不同的是,这次趋势又回到之前拟物化了,但它与纯拟物化还是有区别的,现在它有一个流行词语叫“新拟态”,今天就和大家分享下国外一位设计师对这个趋势的看法!





拟态化是什么?

-

虽然UI以各种拟态化的形式存在(例如,您的桌面OS垃圾桶),现在这种风格的趋势更加明显。正如卡米尔·法拉纳(Kamil Falana)指出的那样,从无生命的“表达”到现实主义的过渡开始出现。



不久前,我们还观察到,这种变化开始在我们身边发生,苹果(IOS13系统)就是一个很好的例子。向最小化设计和轻拟物化发展,最终带来了无纹理3d视觉感官。受到了大家的喜欢,来看一张高清图。






拟物化风格的回归,会更好吗?
-

如下图设计风格,在dribbble上获得认可度比较高!


Dribbble用户alexplyuto的作品获得了四千多次赞,并带动了这一趋势。


这种设计引发了一波设计潮流趋势,尽管其中的有部分并没有实际意义(可滑动的后退箭头?),但这使我们对UI 再次产生浓厚的兴趣! 

备注:可看出目前扁平化设计过于雷同,用户审美疲劳。偶尔出现新设计趋势风格,反而更个给各位设计师们带来新鲜感!





新风格的特征点

-

由于按钮的视觉表现看着变化不大(因为小了一些,不直观),因此我们将重点放在实际的卡片概念上,以使这种视觉表现更能直观感受出来



- 现代材料卡片(右图)
如现代材料(升级版)卡片,通常是在画布中以浮层的形式出现,厚度更加明显。阴影既可以增加深度,也可以在很多情况下定义形状本身,因为阴影通常是无边界的。 

- 拟态化卡片(左图)
拟态化卡片从背景中突出。它是由与背景颜色完全相同的卡片制成的凸起形状。当我们从侧面看时,它不会浮起来。 
通过调节两个阴影, 一个阴影为负值,另一个阴影为正值,很容易实现此效果。 但是要使其正常显示,我们的背景不能是全黑或全白。它至少需要一点色调,以便可见“深色”和“浅色”阴影。您可以使用任何色调作为背景,以便根据您的选择将其变暖或变冷。但是必须能看到深色或者浅色投影。 


这是例子,根据您的喜好进行调整:






优缺点

-

这种风格的主要好处是“新鲜”(至少持续很长时间)。它为界面带来了“新感觉”,并使其脱颖而出。它也可以与其他样式混合使用,这样就避免很呆板整个画面变成这种柔软凸起的效果。

到目前为止,有一些问题需要解决。我们发现了两个主要问题:

1. 可见性

2. 易用性


- 可见性

图形与背景对比度的主要问题是,当它们都是相同的颜色时,就没有可测量的对比度;客观上存在阴影,因此我们可以近似并尝试测量其外部的第一个像素。在上面的示例中,我们得出了这些对比度值。


如您所见,现代材料卡片和新拟态化卡片的对比度都非常低。并且卡片本身并不用于主要的操作控件上(只是一个背景),只要我们保持按钮突出并具有足够高的对比度,就可以了。 
两者之间的差异很小,如果我们想为卡片使用更好的对比度,我们就必须这样做: 


而且由于几乎没有人会尝试使用如此强烈的阴影,这意味着其余UI元素必须可访问。这种假设得出的结论是,如果我们通过版式,相近度和与重要元素的对比来进行正确的层次划分,那么这些卡片/凸起的塑料卡片并不那么重要。

尚未对此进行测试(我将尝试找到时间做这件事),但现在我们假设下面元素的两个“版本”均为“确定”。即使有些人看不到阴影,也有足够的对比度让他们看到图标并“使用它”。



- 易用性

尽管“按钮”看起来像按钮,但是如果图标本身与背景形成鲜明对比,它将仍然有效。 因此,这里要记住的主要事情是,如果要使用这种样式,请以足够高的对比度保留所有重要元素。

毕竟,大多数“现代材料”卡片视图也不会通过阴影来做对比。 





仅仅是卡片吗?

-

但是,如果我们决定将组件用作按钮而不是卡片,则会出现可访问性的主要问题。

我们可以像下面的示例一样轻松创建带有内部阴影的按下状态。


对比度测试


这里的问题实际上很大。 

此按下状态的对比度太小,不足以表示差异。是否可以通过改变的其余部分来表达按钮的状态,这里有一些想法,例如使用轮廓和填充图标,下划线或甚至用颜色填充按下状态。


尝试各种想法,但状态必须立即被识别。 




开发

-

开发实现其实它比我们认为的在CSS中实现“软阴影”外观要容易。我们尚未研究Swift和Kotlin,但我认为这不应该成为问题。

https://neumorphism.io/#55b9f3(实现新拟态效果CSS代码)






其他影响

-
刚才说的形状只是一方面。这种设计新样式还带有更多的按钮和图标。通常情况下,我们只需要回到“过去的美好时光”并使用位图。这似乎是一种回归,不必担心-这是没有必要的。 

您可以轻松地将可开发的设计与这些卡片形状组合在一起(新拟态卡片),从而获得很好的效果。







我们真的需要这些吗?

-

尽管这一新趋势影响了许多设计师,但对比以前使用的卡片组件可访问性问题相比,它的问题并不那么严重。

所以去疯狂的顺应这一趋势,并对其进行调整以使其成为您的趋势。UI设计师的工作就是需要不断来回挑战自我,探索潮流,以符合产品审美。如果没有这种不断的探索的精神,所有产品将再次看起来相同,同质化严重。



但也要记住,每个新趋势都带有不可抗拒性因素,如果要使用,必须精心的设计探索, 验证后才拿去面对用户。 



个人感悟

-

本篇文章,作者通过对新拟态设计趋势分析,在文中提及“新拟态”和以前材料卡片的区别,同时证实了新拟态风格优势!但也存在一定的弊端!如何去权衡与设计的把控,需要设计师们多去研究探索!



就我个人而言,我认为目前新拟态设计风格, 其实更适合像车机那种偏实体硬件的HMI设计又或者智能硬件平台,智能橱窗,智能镜等,但是如果在移动端去使用,那么需要去适当做简化。如何去简化以适应新趋势,这需要不断去尝试。 



这一趋势如果要盛行起来,需要大厂来引领, 比如今年苹果会出现的IOS14或者Google材料3.0到来。 扁平化是苹果带来的,材料设计师google带来的。 

如今新拟态才初出茅庐,还未被广泛使用,需要有先驱者引领。毕竟国内的环境大家都不敢冒险去尝试运用到线上! 



转自:站酷-功夫UX 

医疗院感可视化

ui设计分享达人


可视化是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论、方法和技术。面对医疗行业,如何将行业数据,转化为视觉可视化中的点线面,是在这个项目中需要思考的问题。


本文将带来设计师在医疗院感可视化项目中的设计过程及思考,讲述如何在业务场景下对数据进行抽取表达。通过可视化打破传统院感系统的表单呈现,使院感场景具备互动性、观赏性,满足不同角色的使用需求。同时院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析,从而控制院感发生和预防。

本项目以浙江省建德市第一人民医院为案例,地理数据以建德医院坐标为准。



项目背景
院感是什么?院感为医院感染,入院48小时内都有可能感染到院感细菌。在医院里有专门的院感医生职位,对医院感染进行有效的预防与控制。而传统院感管理的工作流:医护人员及院感医生 > 院感系统分析疑似病例 > 得出结论预防或治疗。这种偏人工的方式数据获取方式,无法更的获取院感发生的原因、定位、以及未来的院感预测。


P1 因此我们通过对医院数据的整理,抽离出影响院感的数据,将院感发生、发展、管控、治疗、预测全流程进行整合。


P2 通过医院>楼层>人员三个层面,空间和时间两个维度对院感展示。打破传统院感系统的表单呈现,使院感场景具备互动性、观赏性,满足不同角色的使用需求:如院长的展示性需求。院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析,从而控制院感发生和预防。


P3 同时在这样的设计场景下,可以覆盖的医疗业务场景和数据单位也会更多元,具有一定的商业化价值。


P4 设计流程
整个项目的设计流程可以分为4个阶段:信息收集、可视化、线上搭建、效果调试。在此项目实践中,重点投入在前三大部分。


P5 Part1信息收集
我们基于项目背景,梳理要展现的数据指标,对整体业务场景进行故事脚本的规划(即如何展现前期的数据收集,并把其串联在整体业务场景中),设定动作摄像机语言,同时也需要了解最终呈现的硬件设备与使用环境。


P6 Part2可视化

1.交互信息框架
首先梳理院感的信息框架和交互方式。


整个大屏分为院楼层,呈现整体院感数据的统计;楼层屏,作为重点病区的监测预测;个人屏,分析病例回溯病程,从而预测院感。三屏之间相互跳转, 交互演示方式从医院的外部跳转内部结构、再到患者的个人维度,三屏都分别展示相关的数据指标。


P7 2.视觉风格
在大屏视效风格探索上,期初的目标是希望可以打造不一样行业视觉语言,所以选择不同于以往的设计大屏风格,选择白色的风格,符合大家对医护行业的认知。但到中期发现,在硬件设备上展示发是过曝的。因此对设计风格进行调整改为X光片的风格,色系上偏冷绿的感觉。这是在这个项目中的试错经验之一。


P8 3.建模设计
在可视化部分中遇到的难点:建筑模型的高还原。下图为建德第一人民医院实拍图。在大屏项目中,必须真实还原地理位置。而在此医院没有清晰的CAD图纸提供的;在Google的卫星地图下也没有的建筑结构的,所以我在建模的过程中,是踩了坑的,先盲画了一版,但是精细度不够,过于粗糙。


P9 因此我反复看得到的资料,通过在确定地理氛围内,去丰富场景。这样的好处是使业务场景更加丰富,包括扩展到院外的车流数据,为业务场景提供更多可能性 当然后期也摇到了建筑内部的消防图,根据消防图绘制内部结构。


P10 4.数据面板
对可视化组件的组件进行设计:时间筛选、数据统计、占比关系、趋势分析。设计之前也参考了很多概念版的可视化设计,希望在院感屏上可以呈现一种科技概念的感觉。



P11 Part3线上搭建
1.获取地理数据
这部分是非常耗时的,datav是数据驱动的可视化产品,在搭建部分,是全程依靠datav平台的。
首先需要明确地理数据,通过高德数据通过点线成面,可以作为场景定位,也就是物理模型的经纬度数据 后面还原数据效果,造虚拟数据,是非常依赖于这个坐标数据的。
119.291724 , 29.472365
这是建德医院的坐标,医院在地图上的数据是很简化的,颗粒度很大,具体位置无法显示。

P12 因此我们需要建立与地理数据绑定的建模,先对位置。

P13 在这个过程中我发现,如果最开始没有对准位置,也不用紧张,可以在DATAV平台增加hook数据过滤器,解决地理数据与世界坐标无法对齐的问题。

2.线上场景还原
根据对确定过位置模型进行烘焙还原。这个过程中遇到了一些不知名的原因烘焙失败,原因可能是命名有中文/位置数据错误/模型块面复杂等,遇到这样的问题就需要重新从头检查烘焙流程每一步。

P14  3.数据维度展示还原
这一步我们需要把前期做好的数据可视化效果,还原到线上模型中。在这一步我遇到的问题是因建德医院内部具体结构的缺失,使一些可视化效果无法精准匹配到模型上。所以设计过程中只能依赖于在对的地理位置上丰富的场景内造数据,这个过程是比较吃力的。


P15 这个问题的解决办法是通过开发工具和导出的结构俯视图,对位置,然后转化出LEGO的数据



P16 在数据效果还原的过程中,也发现我在前期设计的数据效果,不能全部实现,有些是依赖于开发的 。这时可以通过其他组件效果代替尝试,比如热力的效果用粒子放大,通过参数调节得到热力 再比如局部房间的扫管,通过设计部分多次烘焙模型,不断叠加扫光层,得到房间监测的效果
P17 设计小结
综合以上的经验,院感可视化从设计到落地,整体结构应该是这样从物理基础坐标的获取、到场景搭建、再到数据展示的过程。在这个过程中会用到DATAV、C4D、数据库、简单的代码等技术来实现。

P18 这个项目虽然这只是医疗行业中一个小的业务场景,但我们的业务数据提取及可视化设计思路,他不仅限于医疗行业,同时也可以成为场馆类大屏解决方案的一部分,是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型,和一些设计经验,是可以复用到对应行业解决方案中,达到提效。

转自:

用户不信任你做的产品/界面?不如试试这5招

ui设计分享达人




前言:


什么是产品的信任感??


指:基于产品为用户提供‘可靠服务、价值依赖’的一种情感体验。


这种体验不仅影响着用户黏性的强弱、业务目标的实现,也影响着不同生命周期下给产品给来的价值。如图:



而在产品与用户间建立信任感的过程中,我惊奇地发现有3个因素贯穿始终:理念 > 内容 > 表现。


‘基于什么样的理念,向用户传递什么内容,并且怎么表现。’



所以,未来3篇文章主要围绕‘信任感的打造’,希望能系统性地认识它,挖掘更多工作上可实用的小技巧。


今天先分享第一篇:信任感的理念层



信任的本质:是让人觉得真诚、可靠、放心等。换句话说,它就是一种‘为用户着想,建立产品温度’的理念/方向,从而引导后续的内容都围绕该理念而进行。


那么,如何才能为用户着想,慢慢建立起对产品的信任感呢??


既然为用户着想,那么可以试着从‘减少用户的投入成本’切入。



Part1:减少健康投入


健康投入,指用户使用我们的产品,可能会对身体上带来直接或潜在的负担/影响。比如视频看久了,眼睛就会感到酸痛。


针对这些负担与影响进行的一些关怀提示,可以用户提前消除、减轻这些痛苦,拉进与用户间的距离。


不同产品类型拥有专有的关怀点,所以比较通用的主要有5个:使用时长、使用姿势、夜间休息、夜间护眼、音量大小。



a.使用时长提示:


除纯工具类产品之外,大部分用户在产品上都有一定的使用时长(尤其是内容消费类产品),对于‘连续使用N分钟、或者满足特定时长’的用户,可针对该时长进行休息提示。


如有道精品课,在用户观看课程满40分钟 时有个时长提醒:




b.夜深关怀提示:


深夜本身是一个休息的时间,但还是有大量的‘夜猫子’根本停不下来。不管是主动性的娱乐消费,还是被动性的信息/工作处理,都将手机‘进行到底’。


此时对于‘深夜忙碌’中的用户,夜间的关怀就是一个切入点:比如企业微信,会在深夜启动页上展示 ‘夜深了,xxx’的文案提示。



虽然只是简单的一句话,但还是能感受到鹅厂对员工的关怀。


而且不管是C端还是B端,只要有用户在深夜使用产品的可能,都可针对性地给予关怀设计,体现产品的‘人性’。




c.夜间护眼提示:


夜晚周围的光线会变得幽暗,部分手机屏幕会自动变亮。时间一长会严重刺激用户双眼,并造成视觉疲劳(尤其是小学生群体)。


此时对用户进行护眼提示,不失为一个用户关怀点。


再如有道精品课:




d.使用姿势提示:


我们日常都会将手机横过来看视频、看八卦。而且相信各位都有过这样的经历:



当手机长期处于某个屏幕状态+重力倾向时,用户难免会出现手酸脖痛的情况。


此时进行使用姿势的纠正提醒,亦能起到关心用户的效果,从而建立良好的产品印象。


还是以有道精品课为例:



e.音量提示:


这个大伙都知道,过大的音量会影响耳朵听力。一般出现在各种音频、视频的产品与功能中。





Part2:减少金钱投入


没有人不会在意自己的钱包(除非你是对钱不感兴趣...),金钱上的收入与支出很大程度上会影响 人们对某事物的看法。


产品也是如此,若能帮用户减少金钱上的支出,或者带来真实收入。不仅能极大提升用户对你的信任度与黏性,还能增加产品的竞争力。


比如高德地图的打车功能,能显示所有车型的价格预览,帮助用户选择所需价格的车型。



无论是商品优惠券,还是返利。



只要能帮助用户钱包上的‘节源’或‘开流’,都能引发用户的信任感,从而信赖产品。




Part3:减少情感投入


情感投入,是指用户基于内心活动和情绪感受,对某事物所表现出来的一种想法。


这种想法制约着 用户是否接受我们的产品服务。一般体现在:安全性、性价比、真实性 3个方面。


a.安全性 - 放不放心:


人们面对某事物 可能会带来的伤害/损失时,都会有一种本能的“警惕感”


就拿此次疫情来说,对于有‘出差住房’诉求的用户来说,‘住的安全’是重中之重。因此寻找一家‘无感染、每日消毒、卫生干净’的安全酒店,可以减低用户选择我们的警惕感。



而在酒店列表中,带有‘严格消毒’、‘健康守护’等安全标签的酒店,会给人带来一种安全、放心、信赖的心理效应,从而提升该酒店的转化率。




b.性价比 - 值不值得


性价比是人们衡量‘付出成本与回报价值’间的一种决策依据,没有谁会喜欢付出小于回报的事物。


而为了让用户降低这种决策依据,除了自我服务/实力的展示外,往往需要一种“参照物”来凸显性价比。


如美团上的‘满减神器’,通过不同的食物/价钱间的对比,让用户买到最具性价比的食物。



而“参照物” 的形式多种多样,不管是竞品数据。



老版本也属于一种竞品


还是是各种优惠信息、额外礼物/礼包、售后服务等等。



目的都是通过该参照物,向用户传递一种‘划算’、‘值得’的心理效应。



c.真实性 - 真不真实:


光是性价比高还只是片面依据,至于内容是否属实,成为了我们与用户建立信任感 中最重要的影响因素。因为没有人喜欢被骗、喜欢虚假事物。


而真实性的建立,在‘电商领域’应该被运用得最多。如大牌背书、证书授权、专家介绍、明星代言、官方保证、销量成绩、用户反馈...等等。




展示自己的真实、最具实力的一面即可,别过度吹嘘与包装,用户又不傻。




Part4:减少脑力投入


人们一向不喜欢复杂的东西,除了不易理解外,更担心因为自己的理解错误,会给带来意外的损失。


帮助用户减少记忆负荷、顺畅完成操作目标,是每个产品必不可少的设计点。


如微信转账,输入数字时会检测对应的数额,减去用户边输入 边计算“这是多少钱”的脑力投入。



而且对比支付宝的转账,微信这点确实做到了‘洞察用户需求’。



再如账号注册,提供‘剩余步骤’能让用户了解 当前处于哪一步、预测完成整个操作还需多久。





Part5:减少体力投入


除了记忆负荷,‘操作负荷’的减少也是一种‘为用户着想‘的方式。我们身边也存在太多这方面的例子:


如手机上,如淘宝的快链弹窗、支付宝的转账提示,都是前置用户的目标,缩短操作流程



如电脑上,如Mac会保存耳机音量。


下次插入耳机时,会将扬声时的音量,自动调整至上次耳机插入时 所记录的音量。这样就免去了重新调整音量的操作。


以网易云音乐为例:注意 扬声时和耳机插入后 的音量变化.



这些都是帮助用户快速使用,从而减少体力操作的方式。除了前置用户目标、保存记录 外,常见的还有:给予默认值、自动选择/处理、多选与批量等等。



总结:


以上就是关于理念篇的内容,让今后的内容设计有了明确的方向。下面是走查表,平时设计功能、制作界面的时候可以看看,增加产品的温度。领取方式:公众号回复【信任1】


转自:ui中国-

日历

链接

个人资料

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

存档