首页

快速提升B端图表用户体验的15小细节

资深UI设计者

图表作为一个使用频率不高却很重要的组件,让设计者们操碎了心。看着自己设计的图表,总觉得有哪里不好,但又说不上来。本文作者总结了快速提升B端图表用户体验的15小细节,一起来看一下吧。

B端界面中使用频率不高,但却无比重要的组件——图表,可谓是让设计者们烦透了心。图表设计起来不难,但想要设计好,也是需要下一番功夫的。

很多小伙伴问我,说:每次在设计图表的时候,总是找不出自己哪里设计的不好,但看着自己设计的图表,又没有那么满意,该如何办呢?今天,我们就来一起了解下B端的图表,挖掘一些设计者们平时未曾捕捉到的细节,获得这些细节,将从细微之处提升产品的用户体验。

本文将从以下五个部分来展开:

  1. 什么是图表
  2. 图表的优势
  3. 开源图表库有哪些
  4. 15个图表小细节
  5. 总结

一、什么是图表

百度百科解释:“图表,Microsoft Office用语,泛指在屏幕中显示的,可直观展示统计信息属性(时间性,数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观,形象的‘可视化’的手段。”

根据百度百科的解释,我们来做一个”数据图表化“的小推导。我从网站找了一段描述低码的数据(数据来源艾瑞咨询,并做了一些小修改),如下:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起,至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。2017年融资事件11起,亿元以上融资3起;2018年融资事件12起,亿元以上融资2起;2019年融资事件12起,亿元以上融资3起;2020年融资事件14起,亿元以上融资3起。随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

虽然以上的文字已经做了一些简练,但阅读时候不免觉得有些绕,不能很直观的理解数据,且要记住关键数据还是较为困难的。

下面,我们对以上文字进行再次梳理,适当分段,进行结构化排版:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起。

至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。

2017年融资事件11起,亿元以上融资3起;

2018年融资事件12起,亿元以上融资2起;

2019年融资事件12起,亿元以上融资3起;

2020年融资事件14起,亿元以上融资3起。

随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

通过分段描述,以上段落显得清楚了很多,但是例如”融资事件、亿元以上融资“等词语还是反复出现,整体来说不够简练。

那么,我们再将以上数据进行表格化展示来看看,如下:

我们可以发现,表格的展现形式比分段的结构化文本又清晰了太多,使得数据展示非常直观。不仅用户可以看清楚数据本身,还可以对比数据,假如表格再设计的人性化一些,可以将最大值进行重点标注(根据业务需要对数据进行差异化标注)。

不过表格也有劣势,无法展现数据随时间变化的趋势等问题。我们再次仔细阅读上述数据,可以梳理出如下图表。

上图将2016年到2020年的融资事件总数进行了重点处理,亿元以上融资事件数量进行了次要处理。并且用柱状图叠加折线图的图表表达了2016年到2020年低码融资事件数量的趋势情况。

二、图表的优势

综上所述我们可以发现,从通常意义上来说,图表优于表格,表格优于结构化文本,结构化文本优于普通段落。那我们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点,例如柱状图是用来比较同一指标下不同对象情况的图表;饼图是展现部分与部分之间,及部分与整体之间占比的情况。我们在使用图表时,需要先对数据进行判断,再选择合适的图表进行展现。

2. 直观性

图表与文字相比,在数据的表现上非常直观。不仅可以让用户一目了然地看到数据,还能让用户将数据进行对比,从而发现问题,定位原因,解决问题。

3. 混合与拓展性

根据数据的属性,图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用,例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种:

1. AntV G2

在AntV的官网上,是这么描述G2的:“一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

百度百科:“ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。”

3. High Charts

百度百科:“Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

Chart.js是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。以下是Chart.js的文档链接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表,是前端图表生成器。

目前来说B端产品使用最广泛的图标库是AntV G2和ECharts。

四、15个图表小细节

在大致了解了图表以后,笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者,从而为B端提升一点小体验。

1. 折线图2px

通常在B端中,我们用到线,以1px居多。但在折线图中,我们经过反复推敲,发现2px线优于1px线。首先,2px线条显得有力而清晰;其次,在线条多的时候,便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好,且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示,若柱子的宽度为X,则柱子与柱子间的间距为X,两边柱子距离各自向外间距为X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束,如最大数值为150,就不适合刻度值上线标记为1000。其次,若业务数据一直处于动态变化中,则图表Y轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候,可以将文字写在饼图上,但当分类较多时候,文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情,通常来说,饼图块呈顺时针方向旋转,且以12点钟方向为起点,块面从大到小布局,若有“其他”模块,则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域,但这并不是一成不变的规则,例如当折线图线较多的时候,可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果,鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色,不要为了好看而使用相邻的色彩,这会导致图表的可读性大大降低。如有条件,建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相,不同明度和饱和度的颜色,也是有使用空间的,通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多,且产品团队压根没打算将数据量减少时,我们可以考虑展示重点数据(系统默认展示推荐重点,用户可以自己选择他所需的重点),弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的,在特殊场景下,标题描述可以稍微进行变化,从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期,这时,图表无法满足如此长周期的时间展示需求,我们不要慌,可以通过以下几种方式去解决。

11.1 添加缩略滑块

给图表添加缩略滑块,可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大,可以看到的时间范围越大,但注意,会有极限值。

11.2 添加滑动滑块

给图表添加滑动滑块,可以通过滑动一个固定大小的滑块,查看某短时间范围的数据。它与缩略滑块的区别在于,滑动滑块每次看到的时间段是一致的。

11.3 区块放大镜

如果图表的呈现就是希望时间周期显示完整,那么当时间周期较长的时候,颗粒度可以展示的稍微粗一些,不用太细,例如无需2月1日、2月2日、2月3日、2月4日、…连续展示,只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上,鼠标移入图表区不断进行某时间周期数据框选(即放大),就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时,无需每个时间点都带上年份;而当跨年时,可以带上年份,这样可以保证时间轴显示更简单,不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细,联动展示,那么表格中的字体建议使用等宽字体,等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据,建议设计者们对数据的进行归类整理,属于一类的数据临近展示,方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表,当业务呈现较为简单时,使用静态图表就好。而当业务复杂,一张图表难以表达细节时,就要考虑动态图表去呈现了,“鼠标交互,数据扩展和下钻”是动态图表的特征。

五 、总结

图表的小细节远远不止文中提到的这15种,还有好多好多。由于每时每刻都有设计者因为产品需求创造出新的好用的图表类型,图表成为了B端可持续探索的一片海洋。


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

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


文章来源:人人都是产品经理  作者:知果

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

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




设计方法 | 行为设计学如何落地到项目?

seo达人



在我们的日常工作中,对如何吸引用户、引导用户、留住用户这些问题,经常会使用一些心理学的方法。本次介绍的 “行为设计” 便是从心理学衍生出来的一种商业上解决引导、转化、留存等问题的方法和策略。

 

01.什么是行为设计学?

动机-用户有动机或意愿想要去达成一件事;

能力-用户要能做的到这件事;

触发-适当的提醒他要做这件事;

简单来说就是人的行为是由动机、能力和触发条件这三要素组成,只有当三个要素同时都满足了,行为才会发生。

图片

 

02.结合业务

结合上述行为设计学,分析如何与业务的结合!本次项目是58本地服务的业务升级,从提供服务信息拓展到为用户提供交易全流程的多元化服务平台,是58本地服务从工具型到服务型的一个转变。当然,进入到58本地服务的用户其实都是带有明显动机或者意愿来寻找服务的,那么第一先驱条件有了,接下来就是我们如何去用户进行能力的提升从而制造有效触发事件。

图片

 

03.分析调研

图片

在项目开始之初,针对本地服务在线化整体进行了体验地图完善,进行了用户调研、问题及数据分析。

图片

针对问题及流程进行了拆解,根据上图所述四个环节,我们将在每个环节当中也进行了问题的整理,寻找设计机会点:
 

· 挑选商家

信息堆积混乱、品牌辨识度弱、缺失参考信息、挑选流程繁琐;

· 下单预约

修改成本太高、服务范围模糊、担心临时加价,商家沟通标准;

· 订单追踪

话多推销产品、人员上门迟到、故意拖延加价、维权申诉困难;

· 服务完成

缺失检验标准、导致家具损伤、平台监管薄弱、缺失客服回访;

 

04.设计策略

综上所述,我们给出一些结论,需要从四环节入手,结合行为设计学能力模型来进行每个环节的策略制定。

图片

· 增强动机

专业感-平台专业性

辅助决策-商家优势;权益刺激

 

· 降低门槛

友好度-认知门槛;操作成本

引导性-用户教育

 

· 减少顾虑

信任感-品牌背书;安全透传

掌控感-策略可控;主动权

 
遵循这个设计策略!我们产出了设计方案

 

05.设计推导

· 挑选商家-清洗聚焦;辅助决策

信息层级梳理,针对整体节奏进行优化使得页面更清晰聚焦以及内容的丰富

价格结合销量及优惠信息外露,提炼商家服务亮点并为优质商家打标,辅助用户决策

图片

 

改版完成后,发现数据效果并不是很理想。在经过分析后得知是屏效问题,在保留数据向上的类目后,又继而针对数据不太理想的服务类目屏效问题进行了方案的产出。在解决了屏效问题后,数据有了明显的好转。

图片

 

· 下单预约-提升认知;降低成本

在下单预约环节提升用户认知,进行品牌背书的透传,提升用户安全感;选择服务及价格等信息前置,降低在订单预约页的用户跳失率。对用户进行适当的教育引导来达到提升用户的能力目的。

图片

 

· 订单追踪-实时掌握;提高完单

在订单追踪环节加强维权申诉入口,给予用户主动权及掌控感!并在此环节进行权益刺激,来达到提升用户完单率的目的。并针对订单取消率偏高的问题进行了策略性的挽留,透传平台专业性及保障。

图片

 

· 服务完成-平台保障;流畅闭环

在服务完成环节建立闭环反馈机制。在全链路下单流程形成流程闭环,进行数据分析并建立用户画像,为后续的定向推荐及商家服务库存能力打好基础。

图片

 

· 赋能商家-动机;能力;触发器

整个流程中的供给关系还有很重要的一个环节就是商家,在引导扩充商家入驻的同时,商家的体验及功能搭建对于整个流程当中的重要性也是不言而喻的,因此我们使用行为能力模型的设计方法对商家做了大量的功能搭建及体验优化。

图片

 

· 设计打磨

在整个流程当中,我们共计进行了各种版本的测试37个版本,通过设计手法例如字重、颜色、图片比例、根据业务特性区别设计等设计方法来进行不同业务转化效果验证。

图片

 

06.数据表现

最终我们在数据方面也有了相对喜人的收获,单量提升了3倍以上,用户的下单支付率、商家接单率、用户的完单率等也有了很大的提升!

 

07.迭代机制

我们在设计初期,就有一套完善的设计流程和在迭代机制,我们第一版是一次完整的流程,但在迭代后期,我们可以根据发现的问题建立体验问题池,根据问题大小决定我们从哪一步开始改善体验问题。

图片

 

08.项目收获

图片

经过此次项目,通过全局视野摆脱设计本身去看业务, 拓宽思维的广度。从之前单一的设计思维-产品思维-用户思维-商户思维-盈利模式-平台关联的转变。使现有本地服务平台从工具型转变为服务型,从一次使用到多次使用,增强用户粘性,紧跟集团产业化步伐。


原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计方法 | 行为设计学如何落地到项目?

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


颜色的性格

资深UI设计者

颜色的探索及应用场景


今天呢想和大家分享我积累的一些关于色彩这一方面的知识。

提高自身和大伙对色彩层次上的认识,更好的融入到自身的产品当中去和实际生活中去。


1.白色

1.白色象征着纯洁、纯净、善良、朴素、正直、信任的颜色。
2.在西方特别是欧美,白色是结婚礼服的主要色彩,表示爱情的纯洁与坚贞(也有说是上帝最喜欢的颜色)
3.白色显得非常的自然和谐,不会显得突兀,所以白色一般在app中用的非常的广泛。



“ONE一个”一款文艺生活类App,主色调为白色,整个产品的气质很纯净、朴素,整个产品诠释出一种文艺的气息。


2.红色

1.红色表示喜庆、爱、勇气、热情、热血、危险、男子气概的颜色。
2.红色在可见光谱中光波频率最低,波长最长,衍射能力最强,所以也最为醒目,给人视觉上一种迫近感和扩张感。红色也同时代表着危险与警示。

3.在中国红色传统上表示喜庆,比如在婚礼上和春节都喜欢用红色来装饰。

1.红板报的主色调为红色,硬朗的设计风格配上黑色,整体给人传达科技、严肃、引人注目的感觉。
2.值得一提的是红板报的交互体验是类似于纸质书翻页效果,结合了红板报本身的产品特性。


3.黄色

1.黄色是个暖色调,充满希望、信心、温暖的颜色。黄色的明度极高,非常的引人注目。同时黄色有大自然、阳光、秋天的涵义。
2.黄色代表着性格上的欢快,愉悦,也是富有正能量的颜色。
3.中国封建朝代从宋朝以后,明黄是皇帝专用颜色,如“以黄为贵”。代表着尊贵,例如很多产品的VIP都以黄色为主,象征尊贵。


Nike Run Club主色调以黄色为主,选用了明度和纯度很高的黄色,页面充满活力的颜色,结合粗壮、倾斜的数字字体,很适合该产品运动的调性。


4.橙色

1.橙色是欢快、活泼、热情、阳光、健康的色彩。同时橙色是红色与黄色的混合颜色,也象征着温暖与活力。
2.在电商领域有很多地方用到橙色,为了激发用户的购物欲望。例如我们常见的淘宝就是用的橙色。
3.橙色在西方传统中,万圣节的颜色,南瓜灯就是利用橙色来制作的。


小米商城主色为橙色,也是小米的品牌色,给人感觉到温暖、活泼的颜色,同时橙色也可以激发用户的购物欲望。


5.绿色

1.绿色代表意义为清新、希望、安全、平静、舒适、生命、和平、宁静、自然。在绿色环境中锻炼能提高情绪、活力和愉悦感。
2.同时红绿灯,绿色代表着通过,所以应用在APP中,绿色也代表着成功通过。
3.在西方国家绿色代表着股价上升和经济增长的意思,在东亚部分国家股票市场则相反。


京东到家的主色以绿色为主,向用户传递新鲜、健康、绿色的生活理念,同时绿色给人舒适安全的感受,非常符合京东到家的产品气质。

6.

1.
蓝色通常让人联想到海洋、天空、湖水、宇宙,所以蓝色一般代表着冷静、科技、未来、纯净。

2.蓝色非常的通用,兼容性很强,像许多科技公司都运用了蓝色,例如腾讯、Facebook、Twitter等。

1.36氪是提供科技、创业、投资头条新闻类的app,在它的app当中会发现蓝色作为主色,非常适合他们的产品调性。

2.选择的蓝色整体显得年轻、鲜明、具有科技感,同时每一个图标、背景都具有蓝色的色相在里面,非常的精致与独特。

7.

1.
紫色代表着富贵、华贵、优雅、柔美、浪漫、梦幻、魔法。

2.紫色是由温暖的红色和冷静的蓝色化合而成,是极佳的刺激色。在一些游戏中紫色也会利用在魔法中,代表魔力值和魔攻等属性。

紫色的梦充满了浪漫和梦幻也是符合豆蔻年华的少女的颜色,代表着魅力。例如一些相机软件也运用了紫色在里面。

3.例如今年出了iPhone12「香芋紫」成功吸引不少女孩子的目光。



劲舞团整体的风格以紫色、酷炫、光效的形式展示,展示出劲舞团的梦幻、魔法、少女般的气质在里面。


8.粉色

1.粉色代表着可爱甜美、温柔、纯真、娇嫩、青春、明快、恋爱。在性别角色里粉红色通常与女性气质相联系,正如蓝色通常与男性气质相联系一样。

2.例如美柚app,是关于记录女性相关的App,里面就用了大量的粉红色,给人一种温暖、舒适、关心的感觉,衬托出了粉红色在里面的魅力。

美颜相机的主色以粉色为主,同时有些地方加入了一点紫,显得页面更加通透整体给人一种女生、甜美、粉嫩的感觉。


9.黑色

1.黑色具有高贵、稳重、科技、神秘、酷炫、稳定、庄重的意象。

2.许多科技产品的用色,如电视,跑车,摄影机,音响,仪器的色彩,大多采用黑色,生活中,我们有时形容很神奇的科技产品为"黑科技"。

3.生活用品和服饰设计大多利用黑色来塑造高贵的形象,也是一种永远流行的主要颜色。

4.京剧脸谱中,黑色一般代表正直、无私、刚直不阿的人物形象,如包拯。


1.TED是一款教育类的app,分享他们关于技术、社会、人的思考和探索。品牌色为红色,不过整个app以黑色为主,整体给人很强的沉浸式体验。
2.整个app没有任何的广告,整体体现出TED产品的权威、严谨的气质。


10.灰色

1.灰色具有简朴、朴素、柔和、高雅、平凡、温和、谦让、中立等意象中性色的灰色在店面的设计中给人的感觉是沉稳。

2.它好像可以和任何色彩搭配。由于它的中立性,它常常被用作背景颜色。它可以让其它色彩突出。

"一言"整个App以灰色调为主,内嵌了一款宋体。
整体的排版非常的独特、细腻、极简,结合灰色的调性展现了一言app的简朴、高雅、东方美学的气质。


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

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


文章来源:站酷  作者:黄小伟

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

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



如何做好用户体验度量?

资深UI设计者

体验度量是什么?

简单来说,用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析,但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话:If you can’t measure it, you can’t improve it(如果你无法度量它,你就无法改进它)。我们相信更好地衡量体验设计的价值,可以帮助我们更好地实现产品价值、用户价值、商业价值,甚至是社会价值。

为什么要做体验度量?

下面我们再来分析一下做好体验度量能帮我们解决哪些难题,首先从我们遇到的几个问题出发。

概念过于抽象主观:设计师们提出的体验优化方案被认为过于主观,难以得到直接证据支持,各部门很难达成共识,方案难以推进落地。怎么办?

影响因素复杂多元:现有的 NPS 满意度调研反映了每个季度的商家整体满意度,但是团队面对 NPS 结果无法直接定位问题,难以进行有效的诊断和提升。怎么办?

问题难以闭环管理:现有的 VoB 系统能够收集到一定数量的商家反馈问题,但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办?

如何做好用户体验度量?京东设计师总结了五个步骤!

相信大家或多或少遇到过类似的问题,虽然大家有着“以用户为中心”提升“用户满意度”的共同目标,但在过程中具体该怎么做,仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略,我们希望通过体验度量帮助京麦达成以下目标做出更好的设计,创造更大的价值。

目标一:让商家体验从“抽象”到“具象”,从“玄学”到“科学”,定义一套被各部门认可的衡量标准;

目标二:与商家建立更加直接的联系,从商家角度直接洞察需求,更有针对性地定位优化问题;

目标三:更好地实现体验设计价值及体验设计体系化,与各部门建立合作关系,长期监测跟进优化。

怎么做体验度量?

体验度量一般可以分为五个步骤:拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中,我们主要完成了前三个步骤,后期我们会尝试推进后两个步骤,同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成,就比如评价一个人的英语水平如何,我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型,我们发现各个模型有不同的切入点,比如 PULSE 模型以网页产品商业化为导向,HEART 模型以用户为核心,PTECH 模型更适合企业级产品,UES 模型更适合技术产品等。涵盖的维度多种多样,有的维度是产品相关指标,比如留存率、日活用户数、转化率,有的维度是用户侧反馈,如 NPS 净推荐值、满意度。

如何做好用户体验度量?京东设计师总结了五个步骤!

深入分析这些维度,我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

如何做好用户体验度量?京东设计师总结了五个步骤!

有了前面提到的三大目标和参考指标,我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态,市场上也有了同类型的产品。因此,我们首先把完整性作为反映产品系统表现的重要维度,也就是商家需要的、别人家都有的,京麦“有没有”?

第二项维度是参与度,店长是否会通过移动端来经营管理店铺呢?客服是否会通过移动端来答复客户呢?也就是各类角色“用不用”。

而作为一款 B 端产品,它的使用效率和易用性是至关重要的,我们要关注用户的行为,也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度,它代表了用户的主观整体感受,这也是所有指标中涵盖面最广的一项。总的来说,商家们是否认为这个产品“令人满意”?

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:体验度量具有非常强的业务属性,不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式,适合自己的指标才是好指标。

2. 采数据

有了度量指标之后,我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例,我们该如何去给听、说、读、写这四部分打分呢?可以通过听力、口语、阅读、写作的统一考试打分,可以让老师根据平时上课的表现打分,也可以让同学互相评价打分。

那么度量的数据也可以有多种来源,比如通过用户访谈得到用户主观使用感受(定性数据),通过问卷调研得到满意度或是易用性评分(定量数据),通过后台数据得到用户的行为数据(定量数据)。

如何做好用户体验度量?京东设计师总结了五个步骤!

基于移动端京麦现在所处的发展阶段阶段,我们重新明确了我们的调研目标:

  • 清晰与竞品差距与机会点;
  • 关注核心模块的使用体验;
  • 了解用户的主观感受。

因此,我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动,收集了大量的定性数据及定量数据。

如何做好用户体验度量?京东设计师总结了五个步骤!

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能,计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象,测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后,通过使用各家产品的具体功能,拆分一级、二级、三级或更细节的功能,填写完整性分析表;

计算完整性得分(京麦具体计算以二级功能为标准,分为六个不同等级,分别对应六个分数)。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:可以通过与产品同学的沟通,共同完成各级功能模块及相应支持程度的定义;后期可以纳入客观数据指标,结合用户的参与情况、平台满意度计算权重,重新定义重要程度、支持程度;以一个季度为统计周期,及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话,较为直接、细致地了解不同角色用户如何使用各功能,以及在使用过程中经常遇到的问题,了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募:提前 1 周设计招募问卷,并在 QQ 商家群投放、回收,筛选目标用户,提前打电话确认访谈意向;

前期沟通:添加商家的微信,了解商家的基本信息,预约商家参与时间,并要求商家提前在手机/电脑上安装腾讯会议;

访谈大纲:根据具体想要了解的功能模块、用户群体等,撰写访谈大纲,包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等;

实施访谈:提前预约会议室,打印访谈记录表。需要至少一位主持人、一位观察记录员,访谈时长控制在 30-45 分钟左右;

访谈结果梳理:每场访谈结束,参与者进行快速回顾总结,截取录屏中关键段落,提炼对应的用户行为、态度、问题、需求等信息,逐步建立猜想,并在后续的访谈中进行验证、修改;每轮访谈结束,对共性问题进行分类归纳,梳理电子化在线表格;撰写访谈报告(可能包括用户体验地图、用户画像等);

后续跟进:邮寄周边礼物,并建立商家体验群,维护长期合作关系。

如何做好用户体验度量?京东设计师总结了五个步骤!

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:提前争取更多利益点吸引商家参与;提前明确目标用户类型,与产品侧配合利用线上使用数据定位筛选访谈用户(如使用经验、使用频率、经营类目等);提前与受访者沟通,可以让商家准备反馈问题列表,与商家反复确认时间;确认用户接受上访谈使用的设备及场景,对可能出现的意外情况做预案;访谈后,在企业版微信建立相对稳定的商家关系,以便回访;访谈信息整理需要更多人同时参与,尽量在访谈当天或次日完成转录、问题分类,及时补充假设,在后续访谈中验证/推翻;及时从录屏中截取关键段落、截图,便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论,同时通过对大量用户的主观打分、行为习惯的分析,得到对产品整体的使用评价,直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计:提前 1 周开始设计问卷,根据前期访谈结果,有针对性地设计各模块、各角色对应问题;

问卷投放:针对不同端的问题,分为 2 个问卷,分别投放;(如果需要长期追踪,建议以季度为单位,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放);提前与产品、运营侧进行沟通,确认上线、下线时间,以及所需物料,如文案iconbanner 等;

问卷结果梳理:数据清洗、分析;梳理关键信息,制作图表;输出报告结论。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:1. 尽量咨询用户研究团队专业人员,听取他们对问卷题目设置的建议,留出组内讨论、线上测试时间,进行 1-2 轮调整;

2. 如果需要长期追踪,建议以季度为单位投放问卷,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放;

3. 提前与产品、运营同学进行沟通,确认上线、下线时间,以及所需物料,如文案、icon、banner 图等。


3. 做诊断

收集了大量数据信息之后,我们需要设定不同维度的权重,并通过一定的规则计算出各指标的最终得分。比如工具类产品,可能更强调用户达成任务的效率,因此易用性和任务效率权重较高,而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式,每项指标的数据颗粒度也不同,有的可能只针对一个模块,有的可能涵盖整个使用过程。因此,我们在设定计算规则的时候,要尽可能的全面客观。

最后,将度量体系的各个维度进行加权计算,基于数据表现,可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析(客观)

目前,京麦在整个商家后台行业中已经处在功能相对较为完善的阶段,因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比,可以看出各端功能的覆盖完整度,这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度(主观)

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准,是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后,我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式,以李科特五度度量(强烈反对=20 分,反对=40 分,中立=60 分,赞同=80 分,强烈赞同=100 分)换算获得了易用性的分数。

如何做好用户体验度量?京东设计师总结了五个步骤!

参与度 | 各角色用户常用功能模块的使用率(主观)

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型,通过对各类人群常用功能模块的使用率的加权平均值,计算整体的参与度。

如何做好用户体验度量?京东设计师总结了五个步骤!

任务效率 | 各角色用户完成特定任务的投入产出比(主观&客观)

任务效率是用户通过使用京麦完成某一特定工作任务(发布新商品、填报活动等)的投入产出比,通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划:与各条业务线沟通,以他们的业务指标来定义更具体的任务效率指标,通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受(主观)

使用季度性《平台商家满意度调研报告》统计得分,也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分,产品已经有了较为宏观的改造方向,我们可以再结合前期调研收集的用户反馈问题,重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法,对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程,首先提升完整性,然后分批次地针对核心模块优化易用性、任务效率,并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续,我们也希望引入更多用户的行为数据指标,如用户活跃度、用户增长率、功能插件使用率、页面点击率等,从业务指标中获得更全面的数据信息。

同时引入监测工具,对产品重塑后的关键指标进行持续追踪,周期性监测指标的改善情况,让各部门同时参与体验度量的工作,提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化,再到最后的优化落地,让体验度量的闭环全程可管理。

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

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


文章来源:优设  作者:京东设计中心JDC

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

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



S02E05: 创意打破边界,什么打破「创意的边界」—— 阿里云设计中心年鉴

seo达人


图片

图片

图片

创意技术突破「图形的边界」

图片

图片

 

如何创作不知道结果的图像?

通过我们研发的智能生成设计工具,可以快速批量化生产高质量静态/动态图形素材,并利用智能工具合成用于各种日常基础设计场景中的物料,例如海报图形、PPT 动态 Icon、Logo、千人千面的 Banner 等等。

图片

 

神经符号 AI 很神吗?

神经符号 AI (Neuro-Symbolic AI) 是一种将深度学习和符号智能的结合的人工智能新范式,是人类向「通用人工智能」前进的又一尝试。

图片

 

这是谁的大脑?

光子大脑,阿里云神经符号实验室打造的 AI 系统。通过创意编程技术,设计师对神经符号系统的思维过程进行了实时可视化呈现,打造了一个具象化的光子大脑。

图片

 

GDS, Shader, GLSL %^#@&! ??

GDS 是阿里云设计中心,由创意技术设计师自研的 WebGL 图形技术代码库,其包含高复用性的模块化代码与一系列自研的 Shader (GLSL) 组件,用于实时 3D 特效与图形渲染。实时渲染的价值不仅仅是图形能力的体现,而是每一帧的视角,都与用户的交互行为有关。我们把 GDS 作为图形技术底座,用以孵化全真三维设计平台 – REAL 3D.

GDS _

 

REAL 3D_ 升维是目的么?

REAL 3D_ 只是实现目的的一种方式。传统的二维界面上,我们获取的只是文字、色彩等信息。而在三维空间,深度、高度、角度等信息通道都可以承载产品信息。所以,这是理解的更多,而不是看到的更多;是原本是三维,而不是升级到三维。

REAL 3D _

 

如何提高设计协作效率?

为了在 3D 搭建前能够快速的梳理交互逻辑与完成预览沟通,我们设计与开发了全真3D专属设计组件 —— 全真3D Sketch UI Kit。支持在设计稿中快速置入预设好的阿里云云产品形象、分区、飞线等元素与「一键换肤」。

REAL 3D UI KIT _

 

如何生产中高性能的实时渲染?

在图形计算与渲染里,实例 (Entity) 与 DrawCalls 越少,意味着性能越高。在REAL 3D的设计实践中,我们使用 Instancing 技术在 GPU 里合并渲染模型,大面积减少 DrawCalls 开销,以及使用背面剔除 (Backface Culling) 等渲染技术提升 3D 渲染性能。

图片
云网络体验馆 _

 

图片

图片

图片

创意技术突破「设计的边界」

图片

图片

 

什么是 BIV?

BIV 的全称是 Building Information Visualization,建筑信息可视化;「BIV Builder」是阿里云设计中心联合阿里云 A 组打造的在线三维建筑搭建工具,让用户能简单快速地搭建三维校园、全息园区等场景。

图片

BIV BUILDER _

 

谁在使用 BIV Builder?

目前主要应用在教育安防领域,让中小学校快速搭建自己的校园立体风险防控平台,获得可交互三维校园、自动安全巡逻、疏散路径规划等能力。利用 BIV Builder,非专业人员几天即可完成过去专业人员需要几周的工作,让立体校园风险防控平台的规模化成为可能。

 

究竟突破了哪些边界?

BIV Builder 利用人工智能技术,自动将 CAD 图纸转化为 BIM 模型,降低建筑模型生成成本,创意工程师自研图形引擎,不依赖 GIS 数据自动生成周边城市场景数据,参数化视效秒级切换,内置四色图、建筑爆炸图、第一人称视角漫游等实用功能。

 

2020 年的云栖大会,和之前的 11 年有什么不同?

http://mpvideo.qpic.cn/0bf2guab6aaafyag7zmgbbqfanodd42qahya.f10002.mp4?dis_k=fcc72fad9bd27f45404fc128af519db9&dis_t=1624518601&spec_id=MzUxODg1NDI1NA%3D%3D1624518606&vid=wxv_1842658210613100550&format_id=10002&support_redirect=1&mmversion=false

2020 年是云栖大会首次在线举办,首次通过三维重构的信息转译方式,打破设计和技术的边界,核心应用绿幕直播技术、数字巡展创新体验,创造性地打造了一个集互动和游览于一体的线上沉浸式体验。

图片
2020 APSARA _

 

什么是数字巡展?

数字巡展是我们自主研发的设计服务产品,立足于设计创新,融合定制化虚拟空间、智能化工具平台、数字化企业营销三大核心能力,通过创意和数字化优势,推动数字体验创新,打造全球领先的云上会展数字化智能平台。

图片
数字巡展 _

 

数字巡展解决了什么问题?

通过 3D 互动优势设计能力,为企业提供低成本的独家品牌定制能力。突破以往场地、经费、运营等限制因素,为企业提供数字化名片,提升展陈效率与科技感。

图片

 

数字巡展的愿景与实践?

我们探索数字巡展,坚信的是线上和线下的完美结合。希望创造一个无边界的全息世界。

图片
全息展厅 _

 

图片

图片

图片

图片

图片

 

原文地址:阿里设计中心(公众号)
作者:阿里设计中心
图片

转载请注明:学UI网》S02E05: 创意打破边界,什么打破「创意的边界」—— 阿里云设计中心年鉴

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

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


文章来源:站酷   作者:陈皮Celia 

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

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



详解|图标设计,精致的体力活儿!

seo达人



对于一套图标来说,能让用户记得住,源于图标的与众不同;而能让用户觉得有专业感,其实是源于图标的整齐划一。图标设计本身也有自己一套规范,在设计图标的过程中遵循一定规范去工作,不仅可以使图标看起来更美观,而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释,欢迎大家讨论。

 

很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件,且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定:

图片

关于图标设计,你大概也有思考过这样的问题:

  • 为什么图标要使用 1024 X 1024px 的网格进行绘制?
  • 设计页面的时候,如果需要的图标大小是 16 X 16px,为什么不推荐直接使用 16 X 16px 的网格绘制图标呢?

对于这类问题,本文解答如下 ——

 

1 . 可以「精确」绘制细节

下面这张图你可以很清楚的看到网格的用法:图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px,也就是说,这个蓝色小方格里面还是一个 32 X 32 的格子盘:

图片

你可以想象,当你在绘制一个图标时,其实是在一个布满了小格子的纸上进行绘制,这样做我们在绘制图标的时候可以很精确,每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等,都有严格的数量规范,以确保图标造型的统一和精确

关于图标的精确规范,我们以 Ant Design 的图标系统中的部分细节规范为例:

 

(1)圆角:

圆角的规格采取 8 的倍数原则,最常用的尺寸是 3 种,分别是 8px、16px、32px,它们之间是两倍数的关系。而图标内部空间的圆角则保持直角(0px)的处理方式。

图片

 

(2)点的直径:

点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸,分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时,会按照 16 的倍数进行延展。

图片

 

(3)线宽:

Ant Design 的线条宽度之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56px、64px、72px、80px。

图片

你会发现,在 16 X 16px 的画板中肯定是可以画出来图标的,只是图标的形状并不是单一的圆形或是方形,一旦出现多种样式的线和点,你是无法精确控制绘制的规律的。

当然,1024px 也并不是绝对的数值,你也可以在 800 X 800px 或是 960 X 960px 的网格中进行绘制,网格数量越多,你的绘制就会越精确。

 

2 . 图标造型「灵活性」更高

使用 1024 X 1024px 的网格时,可以预留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的画板边缘预留了 64px 的出血位,也就是说,真正用来画图标的常用画板尺寸是:1024-64-64 = 896,即:896 x 896px。

图片

在图标的设计过程中预留出血位,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地,为图标赋予更多灵活性

图片

 

而如果你使用的是 16 X 16px 大小的网格绘制图标,则很难设置出有效的出血位。

 

3 . 「缩放」游刃有余

按照上文所述,当你在 1024 X 1024px 的网格中画好图标后,再将图标等比例缩小,就变成了我们通常看到的界面上的图标。通常情况下,界面上使用的图标的大小不会超过 1024 X 1024px,因此基本上都是对图标进行缩小变换,在缩小图像时可以保持锐利的边缘和正确的对齐方式。

图片

而如果你使用的是 16 X 16px 大小的网格画出来的图标,如果需要放大的场景,在图标放大之后会有很多细节无法处理和补充。

 

4 . iOS 平台标准

以苹果公司为例, iOS 7 及之后版本 iOS 的图标网格均采用 1024 X 1024px 的网格作为基准。向 App Store 应用商店提交的 iOS 应用图标必须使用 1024 X 1024 分辨率的高清图标。Retina 视网膜屏幕也为高清图标带来极佳的显示效果,更好的考虑到用户的体验感受。

图片

本文讲解的问题看上去很基础,但很多同学其实都是“揣着糊涂装明白”。绘制图标其实是一个“精致的体力活”,一套真正优秀的图标,在细节上是值得放大 10 倍来进行推敲的。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|图标设计,精致的体力活儿!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


做好设计,什么能力最重要?

ui设计分享达人

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。 


什么是视觉层次


视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。



视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。



当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。 



如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次


颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。



Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab.


Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。 



Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。



运用文字大小字重建立层次


丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。 



无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。 



除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。 



很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。 


运用视觉重量建立层次


比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。



如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。



headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。



在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。



设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。



同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。

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

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



文章来源:站酷  作者:我们的设计日记

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

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



什么是设计师的用户思维?

ui设计分享达人

undefined


如果说设计思维是设计师做设计的基础,那么用户思维就是你发现和解决问题的能力,到底什么是用户思维?有没有一些具体详细的解释让我们了解它呢?请看分享。


用户思维-环境


undefined


说到用户思维第一个必须是用户环境,环境分为设计师的设计环境,以及用户使用你的产品环境,以及物理环境,是不是有刮风、下雨的恶劣天气。


1.你的设计环境


undefined


上图是大多数设计师平时工作环境,每天早上我们带着一杯星巴克,用着苹果电脑,打开iMAC做着设计,效果图每张图片都精挑细选,我们也理所当然的以为我们的用户也和我们一样,大家都是用的苹果电脑,用的苹果手机?


2.你心中用户的环境


undefined


很多设计师作品集里面喜欢放用户画像,我们理想的用户画像都像上图一样,用户都是白领,聪明学历高,能很好的看明白你的设计,也会使用。就像我之前做支付宝,也曾以为用户都是如上图所示,其实不是。很多时候用户的场景和我们想象中相差甚远。


3.用户实际的环境


undefined


大家都是每天地铁里面,在没有wifi和4G的公交,地铁里。也都是用的大屏设计,各种安卓手机。


undefined


举个例子,这个「放大镜」,做设计是人都知道是代表「搜索」但是在我们走访线下实际场景时候,下沉到三四线城市的时候,很多时候人们并不认识。


undefined


三四线城市用户就觉得这个像「平底锅」,不知道是什么意思,这种情况不在少数。


undefined


家里有一台台式电脑给父母用,有一次打电话给我说,有个流氓软件经常弹窗,我教他们去我的电脑,找到「设备管理器」卸载掉即可,结果,父母问什么是「设备管理器」?

所以,你会发现,用户其实和我们心目中想象的相差甚远。我们觉得很基础的互联网知识,在他们那里可能会很复杂。


4.用户设备环境


undefined


机型尺寸:安卓机的机型远远比我们想象的要多,各种超大屏,国内厂商各种千奇百怪的屏幕,这些做设计都需要考虑。


undefined


操作系统:不同的操作系统,有华为系统,小米系统,魅族以及各种第三方定制的系统,这些系统上呈现效果,都是需要在设计时候需要去考虑的。


undefined


手机分辨率:安卓和苹果屏幕各种大小,和主流的分辨率,设计时候如何适配,才能很好满足主流用户的体验,也都需要设计师提前去规划。


5.用户物理环境


undefined


室内环境:用户在室内使用我们产品时候,是不是应该考虑如果是室内,光线可以自动的调节。比如苹果的系统,会根据用户室内室外的光线,调整亮度。


undefined


室外环境:用户在阳光下使用,那么亮度变化,阳光下字体识别度等等,都应该考虑进去。比如白天和晚上使用苹果电脑时候的场景,是否有不同,比如iOS系统的设计,也是重复考虑用户实际用户场景。


undefined


网络环境:用户在有无限和5G情况下的体验,是不是视频直接播放,减少等待,当用户在地铁手机网络不好时候,视频是不是支持缓存或者提醒用户在使用流量。所以在产品设计时候,重复需要考虑用户这种场景。


undefined


抖音和腾讯视频,在用户非wifi情况下,会提醒用户当前网络环境,提示用户注意流量使用,除了流量提醒,其实包括网络加载不出来时候,如何设计产品策略都是需要设计时候考虑的。


undefined


噪音和隐私:比如在公共场合噪音大的时候,产品体验该怎么优化,有木有可能声音自动调整大,比如微信当你外面很吵时候,直接把语音放耳边,就从外放变成内放了。


undefined


比如支付宝理财页面,资产和收益显示可以隐藏金额,保护用户隐私情况。以及支付宝在系统后台时候,可以隐藏页面。


undefined


总结下,我们平时设计中提到的用户思维,其中关于环境的考虑就包括这些:


用户实际环境


机型尺寸/2.操作系统/3.屏幕分辨率


用户物理环境


1.室内环境/2.室外环境/3/网络环境/4.噪音和隐私




该怎么去做?


undefined


1.一部苹果一部安卓机


之前在淘宝天猫时候,有些领导层会要求,必须使用安卓机作为主机,因为只有你去体验安卓机,你才能发现页面和产品有多少问题,苹果本身的系统设计比较好,问题会比较少,但安卓系统没有那么稳定,容易出BUG;所以用安卓机能发现产品更多问题,同时也能让我们更关注到真实用户的感受。


undefined


2.换位思考将心比心


简单来说就是做设计要有同理心,懂得如何去“换位思考,将心比心”。要学会用普通用户视角去审视我们的产品问题,用理解的心态去理解用户情绪;从用户的角度看待问题,进而增加更多看待问题的角度,找到更多设计的空间,最后达到解决问题的目的。


之前支付宝时候,提倡管理层要每年去倾听用户声音100小时,老板们需要每月抽时间去当「客服」,看看用户实际用我们的产品,有哪些难用的地方,从而做到真正从产品上解决用户问题。



用户思维-场景


undefined


1.理解用户从哪里来要到哪里去


去过迪士尼的朋友都知道,人很多,那么如何让这么多人,有效的去体验更多的项目?就必须根据场景来设计,用户从门口进来,去往哪里,每个项目的设计环节都需要思考清楚。


undefined


场景是从哪里来到哪里去:从一个场景到另外一个场景。我记得之前玩过一个迪士尼项目加勒比海盗,里面就把每个环节设计的很符合整体场景。


undefined


从入口,到航行过程中,到大海里大战,以及故事的高潮,到最后的收尾,都是从一个时间到另外一个时间,就像在电影中亲身经历。其实我们做设计又何尝不是。用户从一个入口,到最终成交转化整个链路。


undefined

undefined


所以场景思维很重要就是关注用户,每个链路的体验环节,如何去发现其中问题,找到设计撬动点。


2.场景是带时间维度的


undefined

时间维度很好理解,是用户在完成任务整个过程中的行为,常见的有前,中,后。我们还是以案例来分析:


买之前:


undefined


认知:用户打开支付宝想买理财,但他很可能从来没有买过理财产品,那么第一步他可能会去了解产品,了解里面的金融术语,比如七日年化,收益率等等。那么我们在设计时候,就要去思考,如何降低用户的认知,如何用一些浅显易懂的文案让用户理解理财。


undefined


搜索:用户通过第一步了解了各个理财特点,锁定要买基金产品,然后这个过程中,他会去对比每只基金的收益情况,去寻找适合他的产品。


买之中:


undefined


判断:用户终于发现了一个比较符合他心中预期的产品,然后会去比较这产品的优缺点,比如它最后想选择,收益在6-8%的一只产品,然后会去思考到底买那一只合适。


undefined


下单:最后用户选择了这款收益为6%的产品,然后进行交易。


买之后:


undefined


查看:最后用户购买成功了,购买后,他就会每天来看他这只产品的收益情况,每天的收益,每周收益,以及什么时候卖出去。


undefined


了解了用户的购买状态,以及场景的时间维度,我们就可以去观察这些链路,去寻找一些设计线索,去发现问题解决问题,场景思维也能帮我们设计更好的决策。其实这个思维在电商中也同样适用。


买之前:


undefined


认知:双11快到了,你在家门口地铁,公交或者微博广告里面,看见了双11的一个产品广告。其中一个商品吸引了你。


undefined


搜索:然后你打开淘宝APP,搜索这款产品,通过搜索的入口,进入到了店铺页面。或者你通过外面的广告页面点击到了商品店铺页面。


买之中:


undefined


判断:你通过店铺页面,看见这个商品正在直播讲解,你希望查看真实的商品情况,于是点进去,发现讲解的内容能让你更好的了解了此商品,你决定去商品详情页准备购买。


undefined


下单:后面你决定购买,直接淘宝下单付款。


买之后:


undefined


查看:买完后,你很想用上它,于是你开始查看物流,同时也在担心如果质量不好,你要如何发起七天无理由退款。


以上就是我们说的用户思维里面的场景思维,我们需要了解用户从哪里来到哪里去,同时还需要了解用户购买前,购买中,购买后的心理变化,了解这个过程中的链路问题进行设计优化。


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

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


文章来源:站酷  作者:我们的设计日记

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

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



做设计尽量避免掉的8个错误

ui设计分享达人

设计师有三大烦恼,时间不够用,设计方案过稿不容易,开发还原烂,如果你也在这些事情中浪费太多精力,那么证明在工作过程中被你忽略掉了很多细节,有些你不在意的细节,或许就是一个坑,今天和大家分享下设计师最容易忽略的8个细节,如有改之,无则加勉。


1.图层混乱

undefined


不知道大家有没有这种情况,你和一个设计师合作,他源文件给到你的时候,你很崩溃,想找到其中一个元素图层根本不知道在哪里,这个时候你再专业,技术再牛, 这个小细节都会让你口碑下滑。确实是这样,在职场中,你的每个交付物,都是代表你的专业水平。我见过一些优秀的设计师,文件给过来的时候,图层名称,切图,以及设计标注都非常清晰,适配规则都写的很清楚,专业度显而易见。


我之前问过和我合作的开发,最喜欢和什么样设计师合作,其实很多人都说过一个,就是图层干净,标注清晰的设计师。很多设计师抱怨开发还原不给力,但是试问下你自己,今天你交付给开发的每一个样式,对方是否能很清晰的找到。所以,在职场上,一定要注意这个细节,不要被贴上一个专业比较马虎的标签。


2.对上线效果忽略

undefined


很多设计师做设计以为设计源文件交付开发,这个项目就完事了,我之前也这么理解,但是在阿里后我转变了这个观点。要开始对落地页面负责,意味着你做的图,不止是效果图好看,还要上线内容也好看。

以电商设计来说,效果图时候大家都选的很干净的效果,很清爽的背景,但是上线后换上商家的图简直就没法去看。


undefined


你心中的页面效果图上线后,和上图一样很干净,清爽,让人赏心悦目。


undefined


但其实最后上线环境是这样的,页面拥挤不堪,有很多广告和牛皮癣,内容繁杂。所以今天的设计师除了我们要把页面做好看,同时还需要思考,这个效果呈现给用户会是什么样的效果,对内容负责是我们每个人都需要去控制的。


3.喜欢用漂亮照片

undefined


很多设计师作品集和项目喜欢用很漂亮的美女帅哥图片,确实大家都喜欢漂亮的东西,但是有时候太过了,看着就特别的假,很容易看成飞机稿。其实用照片也是有技巧的,这个简单和大家分享几个小技巧:

该放头像时候就不要放风景

undefined


在头像时候该放头像就放头像,不要放照片和插画。另外图片选择时候,也可以选择一些真实点图片,比如可以用朋友微博上照片,或者微信头像,可以挑一些好看的,那样看着会更加自然。


undefined


网站里面照片都可以使用,而且都是比较真实的,你可以选择皮肤颜色,性别等等,发设计稿中,会比我们找的明星帅哥美女要真实。

如果这个产品是中国人别放外国人

undefined


如果你今天做的产品是一个面向国内的产品,那么照片就应该是中国人,就不要出现国外照片。真实很重要,当然这里有一些细节,就是照片不要太完美了这样会产生虚假感,照片的清晰度最好足够,别出现马赛克。


4.不考虑文字极端情况

 

undefined


一般在设计时候,特别是文字我们需要考虑两种极端情况,文字最长的时候,文字最短的时候,如果忽略掉,你只按最佳效果设计,上线后就会出现问题,所以如果你设计文字最长,和文字最短时候,你都兼容到就不会出现太大问题。


undefined


在做金融产品适合,数字最大值和最小值也是容易被设计师忽略的地方,所以同样的需要考虑最长的数字和最短的数字场景。


如想看到更多干货内容分享,可以添加wx:ddm7851,欢迎围观我票友圈~


5.英文大小写不分

 

undefined


可能很多人说,英文大小写这个不是什么大事吧,但是还真是大事,我之前一个同事在内部讲方案述职时候,就因为一个英文单词大小写弄错了,就被领导说粗心,后来领导还经常拿这个事情来说,做设计粗糙,就这么一个下插曲,被贴了一个小标签。但是职场就是这样,你任何一个细微的瑕疵都容易被放大。



6.颜色乱用

 

undefined


做平面设计时候,或者做印刷时候我们都知道要去遵循一定色彩原理,比如潘通印刷色等等,但是在做产品设计时候,很多时候会出现设计师色彩乱用的情况,这个地方红色浅一点,那个按钮深一点,虽然你满足了你当前页面的诉求,但是放到整个APP上来说,就是很乱。


所以,这也是为什么很多团队都会去每年花很大精力做规范,规范的目的其实就是建立一把尺子,这把尺子让今天这个产品设计有一套规则遵守,否则就会出现百花齐放。


undefined


在谷歌材料设计规范中,很清晰的描述了每个颜色的运用场景和使用方式,目的就是保证所有设计的一致性和统一性。


undefined


谷歌材料设计,对于不同产品会给出不同的配色建议,这样的规范会让整体的设计更加合理。所以设计师在做方案时候,一定要去遵循团队设计及规则。


7.行高和尺寸比例随意

 

undefined


文字行高也是被很多设计师忽略的,不知道一堆文字怎么定义行高,一般的做法是行高=文字大小*1.5倍,这是比较通用的一些做法,当然也有很多的阅读软件,行高可能设置更大一些。他们会用到黄金比例来设置行高。


undefined


很多人以为黄金比例就是1.618其实不是,除了黄金比外,其实还有白银比例、铂金比例、青铜比例这些都具有严格的比例性、艺术性、和谐性,并蕴藏着丰富的美学价值,好好利用,将会使你的作品变得更多高大上。


拿行高来说,除了常用的1.5倍,还可以是1.618倍还有1.732倍,这些数值在很多阅读产品中都会大量运用到这种比例。


其实黄金比例除了可以定义这些字体行高以外,在尺寸上也可以去定义。


undefined


如果你设计中比例拿不准的话,也可以通过这样的黄金比例来控制你整个设计的比例尺寸,这样会更加科学。


8.盲目使用设计趋势

 

undefined


关注设计趋势是好事,但是如果盲目的使用趋势,就会让页面特别的乱。很多设计师页面明明是扁平化的,上面都是用插画营造着一个氛围,但是看见最近C4D很火,然后就放了几个C4D元素进去,这样就会让这个设计很混乱。


undefined


我之前天猫的导师,豆爸说过:做设计的时候可以先构思一个世界,世界要和谐就需要有它运转的的规则..


这个世界里面的规则会是什么呢?世界里面可能会有很多规则,字体,透视,光线,颜色,形状 .... 可以拆解成每一个细节对应到设计中就是它整体看起来会是怎样的光线,元素,空间感 ……是立体的,扁平的,魔幻的,安静的……


就像有不同风格的电影 动画一样,扁平的动画,木偶动画、黏土动画.... 为了让这个世界和谐,就会要减少一些冲突。如果立体的变形金刚世界里面出现了一个二维的米老鼠 肯定不和谐,如果小清新的色彩世界里面出现了大红大绿东北大棉袄配色,也会不和谐。

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

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


文章来源:站酷  作者:我们的设计日记

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

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



设计师如何在设计中讲好故事?

资深UI设计者

讲故事也是一种设计能力。

更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。

讲故事也是一种设计能力

undefined


作为设计师,经常需要和产品,技术,老板去沟通设计方案,每次都是向外发出声音表现你的的机会,很可惜,大多数设计师在表达时,对方还无法理解你的意思,更难理解你的设计概念和设计思路,很多设计师也因此害怕去说,其实设计师学会讲故事非常重要,也是专业能力的一种。今天这篇文章,希望可以帮助到你。


undefined


能把设计说成故事是一门艺术,作为设计师,我们必须借助讲故事的方式,将产品功能推导到用户价值层面,在大公司里面,设计师讲故事是一个越来越重要的技能,一个好的故事能够统一大家的建议,获得领导的认可,是将产品价值和功能流程和用户的情感联系在一起的关键!


看看别人怎么讲故事


韩国的设计,韩国很多潮流的娱乐视频都是围绕一个故事开始的,故事灵感也来源于大多数人生活,容易让观众引起共鸣。


undefined

 


这个MV是来自Zion.T的Eat,讲述了一个人在失落沮丧的时候,要照顾好自己,整个故事围绕着我们生活中各种失落,孤单的情节,再配合美妙的旋律,让观众感同深受。
undefined
K.will的Day也是运用电影短片讲述一个故事,讲述了一个单相思男生的故事,虽然故事很浅,但是每个故事的每一步都是来源于我们每个人生活当中的。


undefined


在Airbnb宣传页面,运用故事讲述了一家3口,为了女儿的生日,一同飞往洛杉矶,他们去了迪士尼乐园,在洛杉矶预订了房源,受到了房东的欢迎!这样宣传比广告更加真实打动人。
故事驱动的设计很容易入手,从情节提要开始,回归用户视角给出用户想要的体验。


undefined


allthatisshe一个英文网站,这个网站最初是在博主休产假期间创办的,它原本是一个很简单的时尚博客,但是博主异想天开的自我表达方案,以家庭小孩为主题的家庭故事,吸引了全世界的关注,在ins上关注度极高。


undefined

 


整个网站每篇文章都在描述博主和小朋友的生活故事,他们一家人相处的很多细节,这中间再推荐一些好用的商品,去旅行带着观众一起看风景等!整个网站的故事一般都是从生活细节出发,比如上班的路上,在品尝美食,听着喜欢的音乐时候,然后结合巧妙的内容,吸引用户。


讲好故事的5个步骤

 


那么,作为设计师,平时在述职,总结时候如何去讲故事呢?怎么去把一个合理的项目,通过叙事的方式,让它能和听众引起共鸣呢?


undefined



今天分享给你,一个讲故事的框架,一共有5步:

1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)

我们来拆解下这个思路。


更多设计文章,设计交流,欢迎加入粉丝群 | 微信ddm7851

关注#公众号:SKY盖哥 ,第一时间获得设计干货和分享内容。


1.开始(背景)


这个项目是如何开始的,它的整个商业背景是什么,要解决用户的什么问题!在我们演讲或分享时候,尽量在140字以内描述清楚,整个项目的背景和简介,让听众记住你。


undefined


乔布斯著名的演讲家,他分享有个小技巧,就是可以先抛出问题和困惑!一次iPad2发布会时候,乔布斯一上台就抛出几个问题,大家对于iPad销量很担心,iPad被各种抄袭,苹果怎么办?在一开始就通过问题,吸引听众,然后引人入胜!


undefined



来看一个实际案例,来自Facebook相册一个设计改版,在项目开始,设计师就介绍了整个项目背景,Facebook Photos是让用户更方便的分享他们的故事,分享他们的图片,让用户生活丰富多彩!那么如何帮助用户更加便捷,更快的分享照片,是这个项目的设计重点。


2.冲突(问题)


讲一个好的故事很难,一定要有冲突和问题,就像看一部电影,一定要有反派存在,只有冲突明显,观众才会觉得更有趣。那这个环节就需要我们把这次产品改版,最重要几个问题给提炼出来。


undefined


以Facebook为例,Facebook相册遇见的问题是,通过数据研究发现,人们不愿意在Facebook中分享照片有以下几个原因:


1.大家手机中的照片很多,不是为了分享而拍摄的!


2.选择照片很难,比如自拍,一次拍了十几张,选出一个最好的很费时间


3.大家经常忘记了分享

所以,在这个环节,我们需要从生活场景去思考,用浅显易懂的语言去讲述当前产品遇见的问题!


3.情节(解决问题的过程)


针对这些问题,设计师怎么去解决呢,在这个环节,一定要充分把你整个设计过程的思考,详细描述,比如设计师常用的情绪版,竞品分析,设计的形色字构质的思考都可以在这个环节表达清楚。


undefined


Facebook团队,基于用户研究数据,和数据结果,决定先定出一些设计原则,通过设计原则和主张来解决之前发现的问题和冲突!于是这个过程和产品开发一起讨论出来,设计的原则和目标:


1.帮助人们记住他们可以分享的故事


2.轻松快速的分享


3.设计一种新的布局方式,让大家分享时候自豪,能够吸引人!


undefined


然后展示了他们做的竞品分析,情绪板,以及一些设计探索的方向!比如做了十几个原型图,对于相册的展示设计了很多概念方案,包括各个文件类型的展示方案(照片,文字,视频,地图)等等!


4.高潮(设计决策)


基于以上设计过程,就可以得出对应的设计决策,再进行详细的方案设计展示。


undefined


重新设计了页面框架,用户的相册框架图来帮用户更好的分类相册,同时在布局上对各种文件类型进行分类,优化相册的浏览效率。


undefined


视觉设计时候,去掉不需要的设计元素,突出内容,确保每一步都能是一个最佳的解决方案!


undefined


同时在视觉设计上进行了很多创新探索,将相册故事以胶片的形式呈现在顶部,让用户更愿意去分享。


undefined


在设计时,考虑多端的统一性,针对不同端的展示效果,真正的保证设计的落地性!


Facebook这个设计环节就像我们电影的中间高潮部分,怎么去解决冲突的,如何定决策,并逐步去落地整个设计方案的!我们在工作中也需要在这个环节很好阐述你根据设计策略,在设计上怎么去落地的,设计方案是什么样的,最后上线是如何的。


5.行动和结果


undefined


这个环节需要把你故事中遇见的问题抛出来,以及这些问题你是怎么去沟通解决的。

比如Facebook相册问题,就遇见了新版本排期问题,无法一下子改完,那么设计师针对这个问题,设计了中间迭代的方案,一步一步迭代到最终,以及开发测试问题,担心用户情绪反弹比较大,分批次上线等等。


同时,做这个项目你得到了哪些启发和教训,后续如何去避免等,最后的结果和上线后数据可以帮助我们验证设计的正确与否。这些设计过程中的细节问题和决策,是帮助我们丰富故事很重要的因素。


undefined


掌握好了这个框架,生活中很多事情都可以运用这个框架去讲,比如你要去和别人分享【设计师如何做简历】就可以按照这个框架去讲:


1.开始(故事背景和简介)


很多设计师找工作比较难,作品集发出去无人问津,原因是什么?是找工作人太多,还是大环境不好,那么如何提升作品集呢,怎么才能更快的让你作品集脱颖而出。


2.冲突(问题)


通过查阅了几百份设计作品集,发现一些问题,比如:版式同质化,设计风格单一,文字太多,飞机稿太多,这些是影响作品集质量很大的问题,由于这些问题导致很多面试官看作品集时候看见类似基本都跳过了,所以才导致大家找工作难。


3.情节(解决问题的过程)


通过查看大公司的招聘信息,提取重要关键信息,比如设计趋势,数据研究,系统思考这些关键词出现的比较多,同时查看了全球顶级设计师和韩国设计师作品集,发现好的作品集都是简约的,排版舒服的,那针对这些,你决定从这几个问题去优化作品集:


版式上往苹果简约风格去靠。设计风格上贴近主流,优化作品使得作品手法丰富,同时针对飞机稿太多,优化线上案例,重新按照最新手法来做等。


4.高潮(设计策略)


花了一个月时间,去详细设计你的作品集,同时设计完成后对比之前作品发现明显的提升,同时设计的过程也掌握了一些设计趋势,再投递的时候发现获得面试的机会大于之前。


5.行动和结果


最后获得了一个大厂的offer,但是整个过程中是艰苦的,做作品集中间也遇见很多问题,比如没有人指导,不知道最新的趋势是什么,比较焦虑,针对这些现状当时自己是如何调整的。


运用这个框架简单的一个叙事,你会发现这样的体系化思考能让我们表达时候更上一层楼。


运用XYZ公式讲故事

 

undefined


当我们向别人介绍一个新产品时,无法切中要点,明确表达产品用户和概念,很多人会觉得「他们怎么听不懂,一定是他们理解有问题,不是我的问题」很不幸的是,问题就是在于我们的表达上,分享一个XYZ公式给大家。


undefined


分享给大家一个公式,掌握后,你就能轻松的给别人讲清楚:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受


这三个问题,与产品,开发的人都有关系,无论任何项目进展,团队都能想起这个产品愿景,从而让我们对产品轮廓更加清晰,同时这个公式的表达能让团队外的人听的懂。


举个例子


undefined


X:微信一款通讯工具,支持单人、多人参与,通过手机网络发送语音、图片、视频和文字;


Y:它的目标用户是使用手机的用户;


Z:这个产品希望链接用户生活方方面面,是一种新的生活方式。


undefined


X:支付宝一款支付工具,它融合了支付,生活服务,保险,理财公益的生活服务平台 ;


Y:它的目标用户是互联网用户;


Z:这个产品希望给人亲近、安全、可靠的感觉。


上述这个XYZ框架,能够很好帮助你表达一个产品功能和定位,希望在你下次晋升或者述职向别人介绍时,能够用上。


最后

 

undefined


回顾下今天所分享的知识点,如何很好的将你项目讲成故事的5个步骤:


1.开始(背景)


2.冲突(问题)


3.情节(解决问题的过程)


4.高潮(设计策略)


5.行动和结果(问题如何解决的,解决过程中发生了什么)


如何向别人准确表达产品功能和愿景,XYZ公式:


X:产品功能


Y:使用产品的目标用户


Z:这个产品赋予用户的感受。




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

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


文章来源:站酷  作者:我们的设计日记

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

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


日历

链接

个人资料

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

存档