首页

如何制作数据可视化地图

雪涛


第三方地图的获取和对接

普通地图一般都是去对接三方平台,如百度地图、高德地图、腾讯地图、谷歌地图等。他们都会提供对应的地图开放服务。以高德地图为例,实操一下地图的获取和调色方法以及最后跟开发交付的流程。

首先登录高德开放平台,点击右上角控制台


进入控制台会进入下图页面(大家可以多点点查看下平台的相关功能内容,比如点击数据可视化里面会有集成的地图可视化效果)


数据可视化里面后有一些集成的模板化的效果,大家可以点点看看



回到主题点击自定义地图就可以对地图进行自定义配置了,如下图: 



页面上会有好多配置好的模板供你选择,也可以选择自己自定义配置,根据需要选择一个点击进去,就进入地图配置页面。


上图中左侧为地图的可配置项目,点击选择可根据自己的需求对地图进行配置,包括颜色字体界线等等都可以配置。每个配置项下面都会有很多配置子项,非常详细,当然里面会有些收费的配置项需要付费后使用,这块大家可以多点点,根据自己需求来做调整。


如果想要获取3d建筑的样式把右下角层级超过17后,会显示建筑,可根据需求调整角度和位置。


最后将调整好的样式,直接放大全屏后截屏后就可以在设计稿里使用了。


关于开发样式的对接

将配置好的文件点击右上角的发布,直接继续点击发布


发布成功后会出现如下的弹框,里面会有一些调用和使用地图的方法。


根据使用需求可选择不同平台的使用方式,直接复制链接丢给开发就好了。

3D地图建模及贴图的制作获取方法

首先看下网上找的两张参考图的效果

(图片源自网络,如侵权删)

(图片源自光启元,如侵权删)


3D地图的获取和建模的流程

首先大家可以在网上下载地图的边界轮廓文件,这里推荐网站-阿里云Data V 的一款地图选择器(http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5)

这里可以下载对应的各个省份 城市的边界地图轮廓模型的svg文件,点击左下角进行下载


以山东省为例将下载好的svg文件导入ai里转换成ai格式,这里要注意的是另存的时候一定要选择比较早的版本,建议存为Illustrator 8图中箭头所指的那个版本,要不然c4d会是识别不出来。


将转换好的ai文件导入c4d,执行挤压。山东省的3d模型就建好了。


模型建好之后需要将模型进行展UV处理(展uv:将一个3D立体的模型拆开,展开成一个平面2D图片。作用:使模型的贴图效果更真实。)这里用到展uv的插件(FDUVToolkit 1.0)后台回复 uv插件可获取插件。下图是在c4d中展完uv的样图,截图保存下做备用(为后面的贴图位置做参考,后面的贴图需要和展uv的这个图一一对应上)。


将处理好的模型导出obj备用(后面给开发和在ae中处理效果都会用到这个格式)



漫射贴图制作的思路

首先在Google Eaeth Pro 上面找个省份对应的位置然后执行文件-保存就能保存当前展示得地图纹理了(建议保存两张贴图,一张带边界和地名的方面后面制作贴图的时候方便对上位置,第二张就是无边界地名的作为最终的漫射贴图)。


将c4d展完uv的截图、还有制作模型下载的地图边界路径、和刚才的截图一一拖入ai里面 ,新建一个4k(这里根据需求建就行)的画布,将展uv的截图缩放到画布大小,如下图,然后根据边界轮廓都对应好 执行剪切蒙版,最终会得到下面的图的效果。(切记贴图的位置一定要和上面uv截图的位置一致,要不然贴上会是乱的)

高度贴图的思路(用到软件QGIS)

首先去地理空间数据云上下载素材:选择对应的行政区位置。


将下载好的数据解压后倒入QGIS软件;倒入的图片稍微有些明显的拼接的缝隙 将图片位移处理后导出备用。



最后处理完的贴图如下:(切记贴图的位置一定要和上面uv截图的位置一致)

法线贴图的获取和处理思路

将处理好的高度贴图导入到ps中 执行-滤镜-3D-生成法线图


直接点击确定,法线图就做好了,直接导出就可以了,最终效果如下:


这样整个3d地图所需要的贴图就都做好了 。

最后贴图制作好了之后就是贴到模型上处理效果,因篇幅原因本期暂时不分享了。


城市模型的获取方法

推荐一个网站用于下载地图数据叫-OpenStreetMap (OpenStreetMap 是一个由地图制作爱好者组成的社区。这些爱好者提供并维护世界各地关于道路、小道、咖啡馆、铁路车站等各种各样的数据。)    


地址:https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。


首次打开是这样的


点击导出会进入下面界面,(ps:当前屏幕看到的区域就是要导出下载的位置)点击下方的蓝色导出按钮就会提示下载,最终得到一个map.osm的文件。    


下面需要将下载好的地图数据转换成模型,这里用到的软件是Blender及他的GIS插件公众号回复“Blender” 或“GIS插件”领取安装包(包里有详细安装说明)


先打开Blender:选择 GIS - 导入 - Open Steeet Map xml(.osm)    

 
根据界面内容 选择刚下载的文件进行导入    


导入后就会得到下面的城市模型了,如下图:    


执行:文件 - 导出 - 选择后缀是.obj的这个如下图 就可以将模型导出obj了。    
 

做到这一步本次的分享也要接近尾声了,后续的操作可继续在Blender里做效果,或者通过Blender导出城市的obj格式的模型文件,用C4D打开做效果。


以上方法只是获取一些建模的方法,后面一些定制化需求需要针对某一个建筑单独建模,一般都是基于实测数据画出建筑的整体外轮廓,然后把实际拍摄的大楼四个面的照片进行处理制作为贴图贴上,篇幅原因大概讲一个思路。


最终的效果-深色


浅色效果


关于开发对接

一般这种效果都会有好多种实现方法,threeJS,webgl,U3D,Ue4,Ventuz等等,如何对接开发给开发提供那些东西,这都取决于开发使用的工具和实现的方式,这里建议做之前充分跟开发沟通想要的效果,可以让他们做个调研方案,这样会事半功倍,免得做一些无用功,出现设计和开发相互甩锅来回扯皮的情况。

    

不管是基于什么实现大致的实现思路都是差不多的,基本都是会需要设计师提供地图模型、UV贴图、烘焙贴图、材质参数等等。   

 

这些东西对接其实跟咱们自己建模贴图然后在处理材质灯光(有些不支持灯光渲染,就需要把灯光的效果烘焙到贴图上直接给贴图)这些参数是一个原理,把基础模型和对应的参数和贴图,给到开发就可以了。  

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

文章来源:站酷   作者:MR小六

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

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

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




企业产品如何做好用户教育系统设计?

雪涛

toB 产品具有逻辑复杂、使用门槛高、试错成本高、用户角色多样化的特点,通过用户教育设计向用户传递产品价值,提升产品易用性与可学性。本文从用户生命周期出发,明确用户教育在企业产品各个使用阶段的目标,制定对应设计策略,同时结合过去一年「企点客服」产品的用户教育设计实践,沉淀了一些系统化设计经验和思考与大家分享。

不同规模企业对用户教育的需求分层

1. 中大企业为服务付费,那中长尾企业的用户教育如何满足?

SaaS 企业产品的业务体系分为“产品+服务”,不同类型的企业购买产品的诉求是不同的,对用户教育的需求也有所差异:

中大企业往往已经拥有成熟的业务管理方案,需求明确,愿意为服务付费,遇到使用问题倾向于寻求服务支持。对于 SaaS 厂商来说,中大企业客单价高,售后会提供专业的服务跟进(包括定制需求、上门实施服务等),这些增值服务也是 SaaS 厂商常见的一种商业模式。

中长尾企业希望获得一个好用的产品,甚至获得免费的服务。对于 SaaS 厂商来说,这类企业客单价低,售后会尽可能节省客服人力成本,主要在售后培训期及为 VIP 客户提供服务。所以需要更多地在产品内提供用户教育来引导自助解决问题,传递行业运营经验来帮助企业提升业务。

本文将重点围绕中长尾企业的产品内自助式用户教育来展开。

2. 针对企业主要角色,用户教育需要关注的点?

中长尾企业往往缺乏成熟的数字化管理及运营经验,用户教育可以引导企业尽快从传统业务思路过渡到数字化业务思路。

管理者、一线员工是企业最常见的两类角色,用户教育需考虑两者在业务流程、绩效目标、操作习惯上的差异,并且在产品使用中更好地透传“后台配置”和“前台使用”之间的关系。另外对于企业经营者来说,员工频繁流动导致新员工培训成本高,用户教育可以帮助新员工上手,降低培训成本。

企业产品用户教育设计策略

1. 背景

「企点客服」是「腾讯企点」旗下的一款产品,致力于为企业的客服/运营团队提供一站式“服务营销一体化”解决方案。产品从界面上分为面向企业管理员的账户中心后台网站,用于接待配置/员工监控/数据分析;以及主要面向一线客服的客户端(工作台),主要用于客户接待。

腾讯实战案例!企业产品如何做好用户教育系统设计?

2. 产品内各阶段用户教育解决方案

产品内自助式用户教育包括用户使用产品过程中,在产品界面内能接触到的提示帮助。根据用户使用周期,各阶段的教育设计目标如下:

腾讯实战案例!企业产品如何做好用户教育系统设计?

  • 新手期:让新用户尽快体验到产品价值,对产品产生第一步信任
  • 使用期:随任务场景适时提供帮助,帮助中心提供自助查询
  • 迭代期:新功能有效触达,老用户体验平滑过渡

除此之外的服务阶段(培训期)则包含了产品界面外的教育帮助,如售后培训、客服咨询等。

新手期:让新用户尽快体验到产品价值,对产品产生第一步信任

腾讯实战案例!企业产品如何做好用户教育系统设计?

用户在注册/付费后的第一个阶段是新手期(一般为 90 天),这个阶段是用户对产品产生第一步信任的关键时期,直接影响到新客活跃度。新手 Onboarding 引导可以帮助用户以较低的学习成本快速上手,尽早体验到产品价值。

对于首次进入产品界面的用户来说,最有效的上手引导方式有新手任务、全局导览、全局弹窗。进入具体功能页后用空白页及内容示例来进一步引导使用。

1. 新手任务:最小闭环跑通业务,发现产品核心价值

新手任务是一种高效直接的 Onboarding 方式,帮助获得可测试的最小闭环体验,适用于功能层级复杂的界面(如产品后台)、核心价值明确的产品。

用户初次进入页面时,新手任务通常以独立页面或弹窗形式主动出现,用明确的任务步骤来推动达成关键行为。

在企点账户中心后台,我们把企业管理员的最小任务目标定义为:搭建最基础的客服接待系统,对应关键操作步骤为:创建客服小组→配置接待组件→接待客户。界面呈现上,把账户中心涉及多个页面的配置操作提炼到三个单页里,简单三步让管理员马上测试到真实的客户接待效果。

腾讯实战案例!企业产品如何做好用户教育系统设计?

完成最小任务后,可以继续进入到任务清单进行更完整的功能探索,用户可以根据自己的节奏进行学习。任务清单依据用户使用场景分类,把复杂的大任务拆分为多个小的子任务,减轻用户心理压力。进度条给予用户对学习进度的掌控感,同时激励他们继续探索。从最小任务到完整任务清单,实现从新手到中级的过渡。

腾讯实战案例!企业产品如何做好用户教育系统设计?

2. 全局导览:手把手全面介绍重点功能

与新手任务“直接给答案”的方式不同,全局导览像导游一样向用户介绍核心界面及功能,适用于层级较浅的界面、功能较为简单的产品。

全局导览通常由一系列有顺序、有指向性的轻浮层组成,对于新手来说的确是一种全面的、保姆级的引导方式,但风险是一通引导过后用户可能什么都没记住。所以设计时必须聚焦用户最关注的功能点,步骤不宜过多,且必须允许用户在任意步骤跳出流程。

3. 全局弹窗:核心特性重点聚焦

首次进入产品界面时自动弹出一个或一组模态窗口。这种形式的侵犯性较强,也就意味着用户可能会马上跳过或关闭,所以要尽量让用户 3 秒内 get 到重点(如需传达更多信息可在最后一屏附上跳转入口)。企点客户端新手引导通过三个滑屏重点呈现核心特性:

腾讯实战案例!企业产品如何做好用户教育系统设计?

用户经历了新手 Onboarding 引导后,在开始使用前对产品有了初步了解,是时候放手让他们进入页面探索一番了:

4. 空白页

空白页是一种特殊的页面状态,常用于刚进入页面时无内容或功能未开启时的状态。空白页为新手用户介绍当前功能价值,引导使用,同时透传品牌形象,与用户建立情感连接,留下良好的第一印象。

腾讯实战案例!企业产品如何做好用户教育系统设计?

空白页文案千万不能用简单的一句“暂无数据”就完事儿,而是必须明确告知用户:功能是什么?功能的价值是什么?接下去要怎么做?作为企业产品,文案风格力求清晰、理性、积极。

腾讯实战案例!企业产品如何做好用户教育系统设计?

空白页插图用于辅助信息可视化表达,视觉风格上需符合企业产品品牌调性。例如企点品牌关键词是“智能、轻快、高效”,那么插图风格就不能太严肃厚重。

图标型:简洁抽象,偏情感化与氛围表达,适用于较易理解、逻辑较为简单的功能。例如智能客服的知识库相关页面都采用了情感化的图标型插画,并用统一的机器人形象打造系列感:

腾讯实战案例!企业产品如何做好用户教育系统设计?

概念图形型:通过抽象界面和图形把复杂逻辑可视化,适用于逻辑比较复杂难懂的功能。例如机器人任务型相关功能:

腾讯实战案例!企业产品如何做好用户教育系统设计?

5. 内容示例/模板

面对复杂功能时,空白页引导可能无法为用户提供最直接的使用建议,此时可以采取内容示例或模板引导。

团队协作工具 Slack 为新用户提供了三个常见的 channel 示例(左图);项目管理应用 Trello 预置了看板示例,同时把引导文案巧妙地融入了看板(右图):

腾讯实战案例!企业产品如何做好用户教育系统设计?

除了内容示例,对于复杂功能可以提供配置模板。模板可以通过成熟竞品分析、行业桌面研究或用户访谈推导得出。后续根据用户反馈逐渐完善调优。

企点账户中心的“高级分配规则”根据不同客户类型提供了典型规则模板,为运营经验不足的企业提供了有价值的参考:

腾讯实战案例!企业产品如何做好用户教育系统设计?

使用期:随任务场景适时提供帮助,帮助中心提供自助查询

腾讯实战案例!企业产品如何做好用户教育系统设计?

这个阶段的用户诉求是使用顺畅,遇到问题能及时得到帮助。合理、有效、适时出现的用户教育能降低用户的受挫感,提升产品易用性。

1. 随任务场景适时提供触手可达的帮助

当管理员在产品后台进行功能配置时,用户教育的基本目标是帮他高效顺利完成任务,更高阶的则是要传达功能配置逻辑与功能间的联动关系。从“知道怎么配置”到“理解为什么这样配置”,结合业务理解把功能用深、用好。

在企点账户中心,我们把提示信息按出现时机、提示强度、信息颗粒度划分为三种类型:小灯泡、小灰块、小问号。这三种类型后续将沉淀为通用型组件且推广应用于其他业务线,降低沟通成本及每次重复开发的工作量。

腾讯实战案例!企业产品如何做好用户教育系统设计?

① 第一时间透传重要信息「小灯泡」

“小灯泡”作为页面全局引导,负责在用户进入页面时第一时间透传关键信息。小灯泡常驻页面右上角,进入页面时默认展开吸引注意,收起后不再自动展开避免干扰。

小灯泡内容结构分为基础部分与拓展部分。基础部分主要是功能介绍或操作引导,拓展部分包括企点有料、关联模块、相关问题。内容中可点击“了解更多”到帮助中心,加强与帮助中心的串联。

腾讯实战案例!企业产品如何做好用户教育系统设计?

除了正在进行的小灯泡组件化建设,后续我们考虑搭建小灯泡运营后台,运营/设计可以配置需要使用小灯泡的页面,随时调整文案及帮助中心链接等,无需开发介入,提升各方效率。

回顾小灯泡教育组件的发展进程:从应用于个别核心功能页→建立标准化组件并推广到各业务线→搭建运营后台,逐步提升教育组件的标准化和使用效率。

② 就近外露轻量提示「小灰块」

“小灰块”与页面内容紧密结合,当用户在操作过程中遇到问题,不用花费过多搜索成本就能就近获得帮助。小灰块可提供设置建议或数据解读,使用通栏形式,可承载多行文本:

腾讯实战案例!企业产品如何做好用户教育系统设计?

③ 原地收纳次要信息「小问号」

“小问号”用于收纳名词解释和非必需外露的提示信息,减轻对操作流程的干扰。小问号主要用于两个场景:页面全局说明、重点字段说明。注意同一页面中不要出现过多小问号,只保证在最需要解释的地方使用。

腾讯实战案例!企业产品如何做好用户教育系统设计?

2. 承接界面内提示,帮助用户自助学习并解决问题

产品界面内的帮助信息毕竟是有限的,最终所有的帮助信息都会汇聚到帮助中心,完善的帮助文档是所有帮助信息的基石。

帮助中心的价值在于:对外不仅能帮助已有客户自助解决问题,还为潜在客户提供了解产品的机会;对内也为产品侧售后客服/经销商提供了学习机会,面对用户咨询时也可快速查询应对。

腾讯实战案例!企业产品如何做好用户教育系统设计?

在设计企点帮助中心首页的信息架构时,我们为新用户/老用户、有明确问题/不明确问题的用户都提供了针对性的帮助模块。

腾讯实战案例!企业产品如何做好用户教育系统设计?

① 问题按任务场景分类,便于理解和查找

按用户任务场景把问题分类打包,站在用户使用角度而不是产品功能角度措辞,符合用户心智更易理解。点击某个主题模块进入该模块的完整问题列表,再细化分类查找。

腾讯实战案例!企业产品如何做好用户教育系统设计?

② 收集用户满意度反馈,衡量帮助效果,为内容优化提供方向

为了解文章内容是否真正对用户起到了帮助作用,我们在每篇文章末尾附上满意度统计,为内容的迭代优化提供依据和方向:

腾讯实战案例!企业产品如何做好用户教育系统设计?

③ 随产品迭代保持内容更新

帮助中心内容并不是一蹴而就的,而是需要长期悉心的运营维护。文章内容要随着每个产品迭代来更新,保证用户看到的始终是最新最准确的信息。

3. 提供客服咨询入口,常规问题交给智能客服

当用户无法自助解决问题,或本身学习意愿就弱的那些用户会选择直接咨询客服。企点在产品界面、官网、帮助中心、公众号都提供了客服咨询入口,接入机器人客服来解决低价值、程序化的问题,复杂、操作性强的问题则转人工跟进。机器人接待的关键是产品知识库的搭建,可以基于帮助文档框架进行梳理设置。

腾讯实战案例!企业产品如何做好用户教育系统设计?

迭代期:新功能有效触达,老用户体验平滑过渡

腾讯实战案例!企业产品如何做好用户教育系统设计?

精心打磨上线了一个新版本,用户却不知道、不会用,岂不可惜?迭代期的用户诉求是新功能上线后能及时被告知,得到使用引导,老用户习惯平滑迁移,体验不发生断层。定期的新版本触达也会让用户产生“这款产品一直在更新迭代,有发展潜力”的印象,帮助提升用户粘性。要做好迭代期用户教育,需要界面内教育引导和运营推广共同发力。

不是所有新功能都需要教育引导,只有在用户高频、核心使用路径上新增或升级的功能、或界面布局发生重大变动时才需要教育,而技术上的性能优化则不需要教育。

1. 更新前有效触达,更新后引导上手

新功能的教育路径分为:更新前的通知触达、价值传达和更新后的使用引导。对于客服和管理者,教育目标也有一定的侧重,比如对于一线客服要重点传达新功能可提升接待效率,对于管理者则需要更多透传管理配置上的价值。

腾讯实战案例!企业产品如何做好用户教育系统设计?

2. 沉淀迭代期教育规范,搭建 CMS 运营工具,推动迭代期教育引导标准化

① 新功能引导规范沉淀

更新后首次打开页面,首先用全局弹窗进行新功能触达引导:

腾讯实战案例!企业产品如何做好用户教育系统设计?

从全局引导进入到页面内引导,整体路径以企点账户中心为例:更新后用户首次登录,先通过全局“版本更新弹窗”或“菜单绿点提示”触达用户,点击进入具体页面后再根据新功能类型采取不同的引导形式:

腾讯实战案例!企业产品如何做好用户教育系统设计?

② CMS运营工具搭建

为进一步提升全局引导的标准化,便于内容灵活调整、降低开发反复修改成本,我们设计并推动了 CMS 运营工具建设。通过运营工具可配置三端的全局引导(更新弹窗),而页面内引导(绿气泡等)则沉淀为组件由各业务方自行调用。

腾讯实战案例!企业产品如何做好用户教育系统设计?

3. 保证老数据迁移,使用体验平滑过渡

迭代期除了功能更新后的引导,更重要的是要保证存量用户体验的平滑过渡,包括老数据迁移和使用习惯的延续。

对于核心路径上的重要功能,或更新后界面与使用体验变化较大的功能,需采用谨慎的升级策略:在不改变老使用体验的基础上提供自主升级入口,给用户缓冲的时间,在一段时间后再执行自动升级。

例如企点的「客户库」新版引导:升级前在老界面上弹出更新提示,结合运营策略设置自动弹出提示的时间点(自动升级前 15、7、3、2、1 天)。升级完成后的新功能引导弹窗中还加入了“退回老版客户库”按钮,点击后要求用户填写退回老版的原因以迭代优化功能。

腾讯实战案例!企业产品如何做好用户教育系统设计?

除了上述这种重大功能升级,大部分老功能都是直接原地完成升级的,只需在对应位置旁提供轻量化的提示引导(如气泡、文字 tips 形式):

腾讯实战案例!企业产品如何做好用户教育系统设计?

培训期:用户培训分层传达,教育内容多渠道应用

腾讯实战案例!企业产品如何做好用户教育系统设计?

企业客户购买产品后,产品通常会在 30 天内安排售后培训组负责新用户培训,结合教育材料用面对面、电话或电脑远程等方式开展培训。教育材料除了用于对外培训,也可用于对内培训,帮助产品服务侧人员先了解产品统一认知,从而更好地培训客户。

在教育材料编撰过程中,设计师应充分利用信息可视化手段,把复杂内容转化为清晰易懂的教育内容,帮助用户理解。

腾讯实战案例!企业产品如何做好用户教育系统设计?

1. 用户分层:基于教育对象、内容深度分层传达

基于教育对象、内容深度分层培训,使教育内容更有效地传达。对应的教育材料也需根据用户分层来进行差异化制作。

我们把企业产品的教育对象分为管理员和一线客服:针对管理员提供账户中心功能使用介绍,如客户管理/数据分析/接待配置等功能,帮助其更高效管理员工和提升业务;针对一线客服提供客户端(工作台)使用指导,帮助提升客户接待效率。

从内容深度上分为新手版和完整版:新手版中只介绍新手必须要了解的核心功能,更多详情会提供链接到完整版中深入了解;完整版则是详细的字典式指南。

腾讯实战案例!企业产品如何做好用户教育系统设计?

2. 内容组织:把复杂信息转化为易于理解的信息

提到教育材料,大家的普遍感知是复杂冗长难消化。比起简化内容缩小篇幅,更重要的是要想办法讲清楚让内容便于理解。通过模块化、可视化、场景化的手段,把复杂信息转化为易于理解的信息。

腾讯实战案例!企业产品如何做好用户教育系统设计?

① 可视化:抽象概念可视化,更直观易懂

一图胜千言,通过概念图、流程图、表格形式,把抽象难理解的逻辑/概念可视化呈现。

腾讯实战案例!企业产品如何做好用户教育系统设计?

② 场景化:结合业务场景,让配置逻辑更易理解

避免生硬地讲解功能,而是结合业务场景给出配置推荐,让背后逻辑更易理解。

腾讯实战案例!企业产品如何做好用户教育系统设计?

③ 价值导向化:从功能价值和用户利益出发,优于直白的功能描述

腾讯实战案例!企业产品如何做好用户教育系统设计?

教育材料完成后,除了作为客户培训资料,还可应用于多种渠道,例如:界面内提示信息、帮助中心文档、机器人客服知识库、企点课堂直播课件、公众号推文等。

企业产品用户教育设计要点

1. 结合项目发展阶段选择教育重点切入口

如果你所在的产品处于初期阶段,主要以新用户为主,那要重点考虑“新手期”与“培训期”的教育引导,帮助新用户上手并产生产品易用的良好体验,提升活跃度;如果你的产品已经发展到了成熟期,那要更侧重“使用期”及“迭代期”的教育引导,保证存量用户的使用体验。

2. 到用户身边去,深入一线使用场景

参与用户访谈、坐到售后培训组边上旁听用户电话咨询、作为直播课讲师培训用户…深入一线用户场景,真实的声音能帮助你更走心地引导用户。

3. 寻求高效合作路径,提升多方沟通效率

以迭代期为例,由于从设计、开发到产品宣讲到运营制作内容的流程很长,最后撰写新功能推广内容的运营同事对需求背景及设计思路缺乏深入理解,导致花费大量时间在追溯沟通上。为寻求更高效的合作路径,建议需求冻结后让运营同事尽早介入,及时同步需求背景和设计思路。设计师需要在设计稿中交待清楚需求背景及思考点、遗留点,通过新功能 checklist 共同维护。

4. 思考用户反馈渠道,为内容优化提供方向

通过可以实现的一切手段收集用户反馈。比如《营销 QQ 升级》相关教育材料,我们从运营侧了解到教育材料上线前后数据对比(使用指导类的咨询问题占比下降了 6%);在条件有限的情况下利用平台自身也可以进行定量(阅读数通过腾讯文档收集)和定性(腾讯问卷收集)的数据收集,对反馈为不满意的用户进行进一步询问,从中得出教育材料的优化方向;公众号运营推文则可以通过公众号平台自带的阅读数转发数等进行统计。

5. 不要在最后才考虑用户教育

在紧凑的产品迭代中,用户教育总是最后才被提起,甚至被忽略。经常会发生在临近上线时突然想起“这里要不要加一个用户引导”,然后匆匆设计开发上线。在需求初期就应开始整体思考,不要在最后才想到用户教育。

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

文章来源:优设   作者:腾讯设计 

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

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

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




信息流产品个人资料卡如何设计?这些思路供你参考!

雪涛


在信息流产品中,个人资料卡是一个很重要的页面。一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导用户关注;另一方面,消费型用户通过这个页面了解创作者,查看创作者更多内容,是众多消费型用户消费内容中重要的一环。只有把这个循环做好才能长期促进平台生态发展。

这个页面承载着这么多的价值,该如何设计?本篇将以 QB 看点号资料卡升级的设计思路为例,进行分析解答。

前言

在前期分析过程中,我们发现当前版本存在诸多问题。

从数据上看,对比公司内同类产品,关注按钮转化率较低(出于数据保护,数据隐藏)。

信息流产品个人资料卡如何设计?这些思路供你参考!

从样式上看,信息布局较乱,重点不突出。

信息流产品个人资料卡如何设计?这些思路供你参考!

基于以上背景,我们开始对资料卡进行改版升级。

设计前应该思考什么

做任何一个设计前,都应该思考设计目标,否则设计出来的结果没有意义,也缺乏过程依据和支撑。那么资料卡的设计目标是什么呢?这要从资料卡在信息流产品中的使命和价值说起。

一方面,消费型用户通过这个页面了解创作者,查看更多内容;另一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导浏览者关注。

如果创作者能够在资料卡充分展现自己的才华和魅力,带来了更多浏览者的“关注”,那他们就更有动力分享或生产优质内容,进而使产品内容更加丰富;从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存,让内容生产者有更多的涨粉空间,粉丝规模做起来之后再进行商业化。这样对消费型用户、内容生产者、平台方都有利,进而处于良性循环。

信息流产品个人资料卡如何设计?这些思路供你参考!

信息流产品个人资料卡如何设计?这些思路供你参考!

如何进行资料卡设计

了解了资料卡的使命和价值,设计目标也呼之欲出,作为平台方,我们需要帮创作者解决两个问题:辅助创作者吸粉 & 助力商业化变现

当然,创作者产出优质的内容才是吸粉的关键,平台方只能助攻。但不同的信息流产品有着不同的定位和侧重点,吸引着不同的用户,所以资料卡设计的样式也不尽相同。

信息流产品个人资料卡如何设计?这些思路供你参考!

1. 辅助创作者吸粉

在辅助创作者吸粉这里,有两个维度可以思考:

  • 内容展示维度
  • 用户关注维度

内容展示分析

在资料卡中,有三个大区域:头图区、信息区和作品区。

  • 头图区:指的是顶部的头图区域,这里可以让创作者设置个性化头图,展示个性。
  • 个人信息区:主要是作者的基本信息,包括昵称、账号名、简介、粉丝数、认证信息等…这里通常还承载着一些等级、榜单,属于信息展示和官方背书区。
  • 作品区:主要展示账号发布的内容,这部分通常是浏览者最关注、浏览时间最长的部分。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过对比市面 20+信息流产品,我们发现了一些有趣的规律:

信息流产品个人资料卡如何设计?这些思路供你参考!

① 头图区:越是社区类产品,对头图个性化重视程度越高,而资讯类的产品则不太重视。

从产品功能上来看,越是偏向于社区类属性产品,头图区域越大,可自定义替换的范围也越广。从用户使用角度来看,社区类产品的用户也更爱展示自我,头图替换的比例也更大,风格更多样化。而资讯类产品的创作者大多使用默认头图,并不进行个性化设置,自定义头图的比例很小。

所以我们在设计页面布局时,需要思考自身产品定位以及创作者需求,把有限的空间利用在刀刃上。

信息流产品个人资料卡如何设计?这些思路供你参考!

② 信息区:越是追求多元化收益商业化的产品,信息区承载量越大。

创作者不是活雷锋,想让他长久的留在平台必然需要给到创作者更多收益(收益除了显性也有隐形的,比如 B 站,很多创作者在 B 站发文平台收益相比其他平台少,但因为品牌声量大、氛围好,获得了巨大的关注和曝光,所以即使收益低,创作者也会持续在平台投稿)。

除了流量分成外,平台们也在帮助创作者实现多元化的收益,比如商铺、直播、付费课程粉丝圈等。甚至抖音很多创作者直接把商务合作写在了个人简介中招商引资。所以这个区域,随着多元化商业收入的更多尝试,信息承载量也越来越大。

信息流产品个人资料卡如何设计?这些思路供你参考!

③ 内容区:越是长内容,越倾向于展示更多作品和更多信息;越是短内容,越是“看就完了”。

对比多款产品我们发现,越是长内容的产品,在内容区越是注重效率选择。通常会显示更多内容,且单条内容会显示更多维度帮助浏览者决策是否点击查看。猜测可能是因为内容较长,浏览者通常会花费更多精力在选择上。而越是短内容,把单条内容放大,促进浏览者点击,直接“看就完了”,反正一条也没太长时间。

所以设计资料卡时,需要设计者清晰了解自己平台内容特征以及用户行为偏好,做出更合适自己平台风格的设计。

信息流产品个人资料卡如何设计?这些思路供你参考!

综上,在做内容布局展示时,需要综合考虑产品定位,思考这些区域对于产品和创作者浏览者意味着什么。

比如头图区域,资讯类产品并不重视,毕竟账号还是靠内容说话,即便是放张个性化头图,浏览者也不会因此而关注。而且大家都使用默认头图,个性化无从说起,就更没有什么意义了。

那么如何让头图有价值?创作者愿意为此更换,而浏览者看到能够感受到帐号的特殊性?

笔者提供一个思路抛砖引玉,参考 App Store 的编辑精选:只有精选的 APP 才可以有头图权利,其他 APP 都是默认样式。而稀缺性和被认可,正是人类所追逐和渴望的。如果平台选出一些精选帐号,赋予其设置头图资格。作为创作者,非常有意愿去更换,因为可以体现出和其他账号的不同。浏览者也可以通过头图感受到当前账号的优质属性。

信息流产品个人资料卡如何设计?这些思路供你参考!

用户行为关注调研

既然要帮账号吸粉,那么我需要了解浏览者的行为偏好,知晓浏览者根据哪些内容判断是否关注该账号。这里我们线下调研了 12 名用户,了解他们在信息流产品中(产品不限于 B 站、抖音、小红书、知乎、快手等)进入资料卡后,通过哪些信息和元素来决策是否关注账号。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过访谈,我们得到了 12 名用户的原始表述。

信息流产品个人资料卡如何设计?这些思路供你参考!

我们发现,浏览者在关注账号的时候,主要在意“内容是不是感兴趣” 、“粉丝量多少” 和 “内容领域”。少量同学提到了会关注下作品数,其他信息基本不看。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 主要看作者发的内容,把高播放量的看一下,如果都比较感兴趣就会关注。会看一下粉丝量,粉丝量多代表质量比较好,关注不会踩坑。作品数会看一眼,如果作品太少,比如5个以下就不关注了直接看。
  • 只看内容,其他作者资料基本都不看,偶尔看一下粉丝数。教程不看粉丝数,教程如果是我需要的内容,就算粉丝少我也会关注。
  • 主要看作者别的视频,关注主要是为收藏,不看别的只看所有视频。会关注最近内容的播放量怎么样,其他基本不看。
  • 那肯定是看内容是不是感兴趣啊,关键还是看内容,粉丝量和点赞作品数会看一下,但不会作为关注的主要原因。如果粉丝量作品数多的话,关注动力会大一些。其他的都不看。
  • 还是看内容是不是感兴趣。粉丝量分情况,特别需要的内容不关注粉丝量,搞笑类生活类的会看下粉丝量再考虑是不是关注。有一些作者如果只看个别内容感兴趣但整个领域不感兴趣的话不会关注。通过标题大概判断是不是自己喜欢的类型,最主要的还是内容,其他的不看,粉丝量会看一下别太差就行。

而在操作路径上,进入资料卡后:先到作品区查看内容列表 → 拖动页面向上查看更多内容 → 返回信息区查看粉丝量 → 关注账号。呈现先下后上的操作路径。

信息流产品个人资料卡如何设计?这些思路供你参考!

行为路径结合关注决策,有三个关键元素是形成操作链条并绑定在一起:内容、 粉丝数 、关注按钮,且内容为高播放量内容。所以高播放量内容,粉丝数是决策关键,激发下一步关注行为。

信息流产品个人资料卡如何设计?这些思路供你参考!

而且我们在访谈中发现,关注行为也是一个偏冲动行为,用户通常在进入资料卡的几分钟内做出决定,在页面停留时间越长,越不容易发生关注行为。所以在设计中,尽量缩短决策路径,减少决策时间。

基于以上结论我们做了两个方案再次进行测试:

  • 方案1:传统样式
  • 方案2:高播放量内容,粉丝量,关注按钮放置在同一区域,缩短决策路径

信息流产品个人资料卡如何设计?这些思路供你参考!

为什么做一个传统方案进行对比测试也是因为现在很多产品资料卡页面趋同,大家已经形成了认知惯性,而尊重用户习惯也是产品设计中需要考量的因素。接下来,我们又找了 12 名同学进行访谈和测试。

出乎意料的是,大家对于新事物的接受程度很高,有八名同学选择方案 2。虽然只是理论上的选择,并没有延伸到实际行为,但也佐证了大家对于高播放量内容确实存在很高的需求。对于选择方案 1(传统样式)的同学来说,主要是不喜欢横滑操作和不想改变既有习惯。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 喜欢方案1,不喜欢横滑,习惯竖着操作,标题清晰
  • 喜欢方案1,横着这样展示好像没有竖着这样展示清晰,喜欢这种长条的样式
  • 喜欢方案2,喜欢这个,重点突出,符合我的习惯,如果高播放量内容都不错我就会关注,省得找来找去了
  • 喜欢方案2,上面这个类似youtube的popular uploads的东西能让你第一眼看出这个UP主牛在哪

不管哪种样式,内容都是重中之重。既然是重中之重,大家也会注意到,有些内容区视频是双列形式,有些视频是单列形式。那么浏览者如何看待这种区别呢?会对关注产生影响吗?

基于两种样式进行访谈,比分最后打成平手。虽然在 2 选 1 的要求下大家各有各的选择,但最后也都表示差不太多,都能接受。从信息利用率上来讲,双列的形态展示的内容更多,而且对视频更加友好,预览图比较大。所以如果是视频内容,可以使用双列大预览图样式。

信息流产品个人资料卡如何设计?这些思路供你参考!

以上是关注吸粉的部分,设计时需要综合考虑产品定位和用户行为特征进行页面布局。

2. 助力商业化变现

商业化能力是创作者与平台形成强关系的纽带。平台为帮助创作者变现,不仅通过各类扶持政策给予补贴, 更是通过整合各类商业资源,不断拓展商业化渠道,打通全流程商业链条,帮助创作者实现内容价值最大化。

一般平台提供商业化有三种类型:

基础工具

  • 商业基础:平台提供流量分成、现金奖励等
  • 商业化功能:打赏、电商功能、内容付费功能、直播功能等
  • 精准推送功能:粉丝分组推送、粉丝必达等

平台政策

  • 扶持计划:出台各类流量扶持政策,赋能变现
  • 奖励政策:MCN 签约、创作活动

资源整合

商业资源整合:整合平台内外部的广告主资源、商业活动资源、投融资服务、新媒体账号孵化等各类资源

资料卡涉及到的商业化展示主要为:电商能力,内容付费,粉丝圈/粉丝付费。当有这些商业化内容的时候,通常占用信息区一行区域,大多数信息流产品多如此。

信息流产品个人资料卡如何设计?这些思路供你参考!

但当多种商业化能力同时提供时,不同的产品给出了不同的解决方案。比如大多数产品合并在信息区的一行,通过横划展示更多,以保证其他内容的露出。毕竟对于浏览者来讲,内容才是最重要的。

信息流产品个人资料卡如何设计?这些思路供你参考!

有一些产品则没有选择合并的方式而每个占用一行空间,与此同时,把创作者的信息展示的也更为详细,可能和本身社区类产品的定位有关,希望更能关注除了内容以外,创作者自身的独特价值。

信息流产品个人资料卡如何设计?这些思路供你参考!

还有一些产品则利用了内容 tab 区域承载橱窗和付费服务,减少信息区的占用,还可以通过逻辑把不同渠道或不同场景的用户引导不同 tab,让浏览者看到更适合自己的内容。

信息流产品个人资料卡如何设计?这些思路供你参考!

总结

资料卡里承载了很多的信息,从创作者的个性展示到内容到商业化变现,需要我们不断平衡每个区域的关系。

别的产品这么做,并不一定适合自己的业务,需要我们找准自己产品的定位,结合当下业务重点去综合考虑。

业务是偏资讯的还是偏社区的?是偏短内容平台还是长内容?有没有提供足够多的商业变现能力给到创作者?商业化能力做的如何?不同模块的用户数据怎么样?只有对现有业务充分了解,才知道哪些是现阶段的重点,才能对一个页面做出更有依据的设计。

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

文章来源:优设   作者:腾讯设计 

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

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

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




消息通知系统设计指南

雪涛

消息通知可以及时地将状态、内容的更新触达到用户,用户则可以根据收到的消息做后续判断。但是如果没有及时将重要消息触达到用户或者滥用消息,则失去了消息通知的初衷。特别是针对涉及复杂任务流程的产品,消息类型繁杂,难以全面盘点消息类型,消息系统的设计就显得尤为重要。

希望通过这篇文章让各位在设计消息通知系统的时候能够更加全面高效。

如何「理解」消息通知

消息通知需要为产品服务,帮助用户快速获取对应的通知信息。收到一条新回复的提示、工作台展示工作进度、朋友的来电,生活中处处是信息的交换。在 App 和网页应用中最常见的信息交换方式则是消息通知。

消息作为一种信息交换方式,抽象其过程,即为“在达到某一触发条件下,由发送方发送消息给到接收方,接收方可针对此条消息提供反馈”。需要包含以下关键因素:

腾讯出品!消息通知系统设计指南

消息触发时间与条件(何时什么事):如按周期重复的时间点,或系统状态变更、用户操作结果等;

消息发送方(谁发现的事):可能是系统、第三方服务商,或者某个用户;

消息接收方(谁需要知道):即接收方,可能是系统中的全部用户,也可能会根据权限划分推送到某个用户群组,或者是某个特定用户;

消息触达渠道(怎么找到他):短信、电话、App 内通知等;

消息通知内容(告诉他什么):短信的文本、电话对话内容、通知消息的文案等消息通知;

消息操作反馈(他可以干嘛):主要分为只读与操作反馈。只读,即当前消息用户在浏览后不需要做更多的操作,主要以了解为主;操作反馈,即当前消息需要用户浏览,且在浏览后做相应的后续操作。

好的消息系统要满足什么条件:

腾讯出品!消息通知系统设计指南

全面:通知的消息项要完整全面,用户才能放心地通过消息通知系统了解消息更新内容;

及时:消息的触达方式要及时有效,在消息相关事件发生后,用户能在第一时间获取到信息并提供操作反馈给到消息发送方;

高效:能通过合理的消息发送途径,允许用户设置及合并相似信息等方式避免过多消息侵扰用户,让用户能够高效处理消息通知。

如何「盘点」消息通知

设计全面、及时、有效的消息通知系统需要对消息的六个关键因素进行全面盘点,通过分步的方式逐步完成消息通知系统的设计。主要分为以下三步:

腾讯出品!消息通知系统设计指南

① 盘点系统中包含的消息项:包含其触发条件、通知来源及通知对象。需要盘点完整消息项从而保证消息系统的完整性;

② 确定消息触达渠道:包含各消息项的触达渠道。让所有消息都能触达到用户的同时,能够让重要信息更易触达,保证消息通知的及时性;

③ 撰写通知内容与操作反馈:包含各消息项的通知内容与操作反馈。让消息内容能够有效地传达给用户,让用户能快速反馈、操作。

盘点的过程,即对消息通知清单的梳理。与产品、研发等团队成员的沟通也将使用该清单。最终目标即完成下方表格的填写:

腾讯出品!消息通知系统设计指南

1. 盘点系统中包含的消息项

当前步骤需要对系统中可能会有的消息项进行完整的盘点。盘点消息项可以通过按消息类型走查方式完成。市场上比较有共识的消息的分类方式主要分为禁止、警告、成功三类。但是在实际设计工作中还需要配合以下的消息分类方式去更完整地盘点消息项:

腾讯出品!消息通知系统设计指南

盘点出的每个消息项

都需要补充以下四个关键因素:

触发条件:结合产品核心场景梳理完整。可通过状态图或泳道图查缺补漏(详见下段内容);

通知来源:可能是某个内部系统,可能是某个用户组,也可能是某个具体用户。用户组的划分需要提前与产品、研发同事沟通完成;

通知对象:可能是全部用户,也可能是某个用户组或具体用户。由触发条件中的场景决定;

重要性:需要与团队沟通得出,可使用“高”、“中”、“低”的分类方式。

盘点完成的消息项使用下表进行整理,方便产品、设计、研发之间的沟通。

腾讯出品!消息通知系统设计指南

用流程图或泳道图查缺补漏:

对于 ToB 或 ToG 类含有复杂状态转换以及任务流的产品,除了使用分类的方式盘点消息项,还需要对照流程图或泳道图查缺补漏,避免消息类型的遗漏。

如,顾客线上购买商品并收取商品的商品相关状态变化如下图所示,每个状态都可对应着一条消息项:

腾讯出品!消息通知系统设计指南

线上购物过程中的消息流程图示意

当系统内包含多角色,且角色间流程有交互时,则可以使用泳道图的方式进行梳理。在泳道图中的每一条状态变更线,都对应着一个状态变更提醒。其中角色间交互的线,由于需要角色主动处理方可进入下一流程状态,这条消息一般会成为一条待办消息。

什么类型的消息不要纳入消息通知系统:

需要注意的是,虽然通知的完备性很重要,但某些消息在前期梳理时就需要从清单中剔除,包括:

  • 单纯问候类消息,如“好久不见”等
  • 不需要用户知道的消息,如系统后台数据更新等
2. 确定消息触达渠道

确定要推送给用户的消息类型后,需要给各消息匹配适合的通知方式。不同的通知方式会有不同的适用场景,可对照下表结合第一步整理的重要性配置消息的触达渠道:

腾讯出品!消息通知系统设计指南

消息触达渠道的配置结果到第一步的表格中:

腾讯出品!消息通知系统设计指南

平衡通知量:

一个好的消息系统需要能有效触达的同时不过分侵扰用户。这就要求我们对系统实际运行中可能会出现的通知量进行预估,并适量调整通知方式,让重要的消息能够更有效及时地触达到用户。最终调整后的消息数量与提醒强度的关系最好能形成如下图所示金字塔的模式。

腾讯出品!消息通知系统设计指南

提醒强度与消息数量的金字塔关系

合并重复消息:

对于出现频率较高,且用户不需及时了解每条消息的消息项,可以通过合并消息的方式减少通知的数量。合并主要有两种方式:合并流程过往节点信息和合并同类消息。

  • 合并流程过往节点消息:对于一些流程类通知,若用户在响应或查看前,流程已经进入到下一阶段,历史节点的信息已经无需了解时,可合并过往流程节点的消息。如淘宝在展示物流时,针对同一订单的物流,仅保留最新的一条。
  • 合并同类信息:对于同类型消息过多,且用户不需要一一查看,只需在用户有需要的时候提供入口查看完整内容时,自动合并同类型的消息,减少对用户的打扰。如 Instagram 在展示用户动态信息时,会合并同一天同一类型的消息。

腾讯出品!消息通知系统设计指南

两种合并消息方式

智能推送:有条件的系统可根据用户行为分析及用户画像,进行智能推送。如基于用户画像按类型推送运营类消息,基于用户接受消息数量,判断是否合并消息推送等。

渠道间消息项的延续与统一:

出于信息持续性的考虑,触达渠道之间有部分关联关系在制定消息触达渠道时需要注意,如:

  • 若系统包含 App、web 等不同端,相同通知类型的消息要保持统一
  • badge 提示需要在应用内消息通知模块有对应消息提示
  • push 消息的文案需要与应用内消息中心保持一致
3. 撰写通知内容与操作反馈

通知的内容需要满足简明易懂的同时,还要让用户能够快速处理。根据大量经验总结,通知内容的撰写可使用一个通用撰写公式:

腾讯出品!消息通知系统设计指南

在应用撰写公式写内容时,需注意以下要点:

  • 重点前置:用户触达的第一场景,可能是手机的 push 消息,可能是多个消息的列表。这就要求在撰写文案时要将重要信息前置,如验证码、还款金额、事件提醒名称等。
  • 敏感信息保护:由于无法确认用户获取信息的场景是否私密。对于金额、个人信息等隐私数据,建议在应用内或其他渠道提供设置项,提供用户自主选择是否在消息通知中包含具体数值。如果要默认显示,需要提前告知用户。
  • 来源信息露出:在邮件、短信等非产品自有渠道推送消息时,用户可能会不确定消息的来源是否官方,需要包含消息来源信息。
  • 提供触发时间:当消息的发生时间对用户后续判断、操作有影响时,需要在通知内容中包含消息发生的时间。

除了以上通用注意事项,由于渠道本身的特征差异,还需注意以下渠道相关的要点:

电话:需要设定客服话术标准,一般需要在会话开始前先告知用户来电是谁、有什么目的。在讲述完通知内容后,还应告知用户如何处理当前信息,如果想了解详细内容该前往哪个渠道了解。

短信-来源平台:由于通知类短信的发送号码可能会由于服务商设置的问题导致有多个发送号码发送给用户,用户无法根据号码判断发件人身份。故需要在短信最开始说明平台来源,建立品牌认知,避免用户错认为是垃圾短信。如:「腾讯科技」***

短信-操作反馈:由于大部分短信为纯文本短信,相关操作反馈需要通过链接或者路径指引的方式提供。若短信包含详情链接,链接最好能设置为保留根域名的短链,如:点击了解详情:cdc.qq.com/d8djei

邮件:与短信相似会有来源可信度问题,邮件内容需包含品牌元素,同时发件的邮箱地址后缀使用产品官方网站。另外需要注意,某些邮件软件会设置不自动下载图片,邮件重要内容不要使用图片。

push 推送(移动端):是消息在移动端的特有触达渠道,由手机系统发送。发送的信息格式会受系统要求有所限制。最新的推送要求可参考相关设计规范文档或接口规范。应用的 icon 与名称系统会自动补充,撰写文案时不用包含。

微信公众号(订阅号/服务号):由于微信对订阅号与服务号的消息推送方式会经常变化,需要确认最新的要求并撰写文案。

在完成通知内容以及操作反馈的梳理后,对消息梳理表格进行更新,补充相关信息:

腾讯出品!消息通知系统设计指南

自此,消息项的盘点已经完成,后续可基于该表格与产品、研发沟通。当业务出现变更时,也需要对表格内容进行同步更新。

如何「设计」消息中心

消息通知的触达渠道中,电话、短信、push 推送的呈现由系统决定。但是若产品有独立 App,往往需要消息中心去承载全量的消息列表。本章会介绍如何设计消息中心。

不同应用的消息中心处理方式受产品定位、应用框架等因素影响,设计差异化较大。但是可以通过按路径分割去简化设计:消息中心的入口、消息列表的组织方式、消息卡片的样式、消息的设置等几个部分。

腾讯出品!消息通知系统设计指南

1. 消息中心入口

主要有底部 tab、个人中心附近的图标入口、个人中心的菜单项等三种入口形式:

腾讯出品!消息通知系统设计指南

消息中心的三种入口

  • 底部 tab:一般适用于产品核心功能中包含大量用户间通讯,或者希望通过强化消息露出来促进用户上传更多内容。对于重要的消息类型可提供数字 badge 作为未读消息数量的提示;
  • 顶部图标入口:一般适用于产品消息数量较少,或消息对产品核心场景的影响较少的情况。一般会在首页的顶部,或个人中心页的顶部有一图标作为入口。图标会包含数字 badge 作为未读消息数量的提示;
  • 个人中心菜单项:一般适用于当产品顶部空间作他用,没有图标入口的位置时使用。

2. 消息列表

从消息中心入口点击后跳转到消息列表。由于消息的即时性,需要按时间维度排列。但是如果产品的消息类型较多,可通过分组合并或者分 tab 的方式提升用户触达消息的效率。

腾讯出品!消息通知系统设计指南

分组合并消息列表

腾讯出品!消息通知系统设计指南

分 Tab 合并消息列表

对于通知类型复杂的系统,还可使用二级列表的形式对消息进一步分类展示,如微信及支付宝,由于其包含大量第三方服务,消息复杂,均设置了二级消息列表帮助用户分类查找消息。

腾讯出品!消息通知系统设计指南

二级消息列表

3. 消息卡片

消息列表中的卡片有两种样式可选,一般在一级消息列表使用小卡片样式,让用户有更高的浏览效率。大卡片样式则用于二级消息列表,或当前应用的消息数量较少时。

腾讯出品!消息通知系统设计指南

消息卡片应用示意

4. 消息中心设置

一般位于消息中心列表页右上角,若可设置项较多,则提供设置入口在二级页设置。一些常用的消息设置项如下:

全部已读:对于消息数量较多,且未读态会影响 badge 的展示时需要提供该设置项。点击后设置列表消息项全部已读。

发起对话:若系统包含通讯功能,一般会在消息类表页提供发起对话的快捷入口。点击后跳转到通讯录或好友列表。

设置通知提示方式:提供按消息类型设置某些通知项的接受渠道、接收时间段、各渠道之间的已读联动等,如微博;或者让用户选择消息通知的精确度,是否包含具体信息,如微信可接收“您收到了一条信息”的模糊消息。

打开消息推送权限:一些应用有一些状态更新或重要的提醒需要用户在系统设置中打开当前应用的通知权限,会包含提示用户打开通知的功能。这些提示需要在用户进行了如“办理事项”、“上传状态”等发起流程的操作后提示。不建议在用户启动 App 时就弹窗提示打开通知。

总结

本文是对消息通知系统设计的初步介绍,希望能帮助到新手产品、交互、产品体验设计师快速了解消息通知系统的内容盘点与消息中心的设计方法,制定及时、高效、完整的消息通知系统。

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

文章来源:优设   作者:腾讯设计 

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

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

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



如何从零开始创建新的设计原则?

雪涛

本期提纲:

  • 为什么我们需要新的设计原则
  • 制定新的设计原则
  • 推行新的设计原则
  • 新设计原则的影响

在本文中,我们将分享如何提炼出设计原则,并在团队中引推广实施的。

去年,我们一群人聚在一起探讨了一个棘手的问题:随着 Spotify 的不断发展,我们如何在产品迭代中保持高水平的设计质量?

经过研究和讨论,我们确定了一个方向:为了提高质量,我们需要清晰、有用的设计原则。一方面,我们认为只有定义了 Spotify 的设计原则是什么,才能够帮助团队评估他们是否以 “Spotify 方式” 进行设计。另一方面,我们还希望帮助设计师在讨论设计目标和设计评审时使用相同的评价标准。通过不断更新的设计原则可以实现保持高水平设计质量的目标。

为什么我们需要新的设计原则

为了解决设计无法标准化的问题,2013 年,Spotify 制定了最初的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分,这些原则让设计师们在输出和讨论方案的时候有方向可循。有了设计原则之后,我们的设计方案在字体、色彩、图片、板式、信息架构和交互方式等方面都具备了一致性,即使不是设计师也能够对我们的设计产生共鸣。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 在 2013 年制定的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分。

但设计原则是需要与我们的业务目标一起向前的,到了 2020 年,Spotify 已经发生了很大变化,我们在播客上加倍发力,我们为消费者提供的不仅仅是音乐,而是包含广播、故事等更多元的音频形式;我们服务的对象,不仅仅是听众,还有艺术家和广告商;我们的设计师团队也不断的壮大,发展到现在已经有近 200 人。

看着 2013 年制定的设计原则,我们问自己:这些设计原则对于我们现在的设计是否还是正确的?Spotify 的设计师们是否真的意识到这些设计原则的存在?答案是否定的。

我们经过对现有设计原则的讨论,发现了以下三个方面的问题:

1. 无法满足不同内容的需求:原本的设计原则,更专注于消费者的音乐体验,然而随着 Spotify 的发展壮大,我们的产品不仅仅是音乐,而是包含更多内容的音频,但这些原则似乎并不适用于我们设计的所有内容。

2. 概念容易混淆:比如 “lagom” 和 “do less”,都有简约的、恰到好处的意思,在表意上存在重叠使得它们很难分辨,在评估设计方案时,我们很难确定从哪一方面评估我们的工作。

3. 数量过多的原则很难记住:根据我们的调研和设计师的反馈,设计师们往往记不住这些设计原则的内容,这也就导致了他们无法很好的在设计实践中应用。

简而言之,旧的设计原则需要更新。

制定新的设计原则

去年,我们工作组的十几名产品设计师和用户体验设计师,在一个协作研讨会上聚在一起讨论如何制定新的设计原则,我们希望团队中的每个人都参与进来,而不是让一个人来决定 Spotify 的设计原则应该是什么。

我们通过以下三个问题,指导我们制定新的设计原则:

  • 我们为什么要制定这些设计原则?
  • 它们是给谁用的?
  • 它们将如何使用?

经过一番激烈的辩论,我们得到了答案:

  • 设计原则是为了帮助设计创造,并为评估设计成果提供衡量标准。
  • 设计原则的核心对象是我们的设计师。
  • 在设计创作过程中设计可以帮助产品设计师做出设计决策;在评估设计时,提供统一的衡量标准,避免以短暂流行风格进行判断。

然而真正的挑战是应该怎样定义新的设计原则。我们在设计时应该追求什么样的价值观和设计属性?产品应该传递给用户什么感受?

对于这些问题,每一位设计师都有自己的观点。我们让所有人将自己对 spotify 的设计原则进行定义,并将这些想法写在便利贴上。我们将这些想法进行总结分类,为了避免重复性的概念,我们把相似的概念归为同一类别,并且让大家对这些观点进行具体的描述,来帮助大家理解他们想要的设计原则。最后,我们将所有的想法都汇集在一个巨大的矩阵图中,通过设计师们的投票来帮助我们缩小范围,确定大家认为合理的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有便利贴的矩阵图

通过上面的方式,我们提出了新原则的草案。同时我们也通过与用户沟通,进一步了解用户对于 spotify 设计的理解,根据这些反馈,我们进一步在设计原则的概念细节上进行调整后,确定了新的 Spotify 设计原则:相关性、人性化、统一性。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 新设计原则:相关性、人性化、统一性

1. 相关性

把每个用户作为一个独立的个体来看待。

Spotify 是为每一位用户量身定做的,我们希望 Spotify 具有个性化的感觉。为了给用户提供专享的感受,在设计过程中,我们认真思考我们所展示的内容是什么、展示给谁以及在什么背景下呈现。简单来说,我们会在正确的时间提供正确的信息给特定的人,我们不想要 “一刀切” 的体验。

那么我们在具体的实践中,是怎样体现 “相关性” 的设计原则呢?

举个例子,同样是歌曲 “pure seduction” 的封面,欧美国家的用户看到的画面可能是激情热吻,但对于相对内敛的东南亚国家用户,封面的内容就会以更加含蓄柔和的方式呈现。同样的,印度用户大多数更喜欢听印度语的歌曲,我们在一开始就让他们选择自己喜欢的音乐语言,使用户得到与自己具有 “相关性” 的音乐内容。

我们尊重不同的文化和社会环境,我们希望每一个视觉呈现都能够适合当地用户,能够被当地用户所理解。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 播放列表封面和注册页面的示例

2. 人性化

人性化的设计是可以与用户交流的。

Spotify 是依赖于推荐算法的产品,但这种技术也是基于人的喜好的。Spotify 像人类一样,也会有情感,有自己的思考方式。我们希望用户在使用 Spotify 时,可以有一种 “和人交流的感觉”,如果我们把 Spotify 设计得太工具化,就会失去这种感觉了。我们的每周推荐歌单封面,没有选用精致的照片,而是直接使用用户的个人头像,通过这种方式我们告诉用户 “这是只为你一个人准备的歌单”,还有什么比自己的个人形象更加 “人性化” 呢?再举个例子,在 Spotify 的儿童版本中,我们将创建个人资料的行为变成了创建有趣的卡通角色的过程,“人性化” 的虚拟形象使 Spotify 与儿童用户更流畅的交流。

官方译文!Spotify 如何从零开始创建新的设计原则?

Discover Weekly 封面和 Spotify Kids 应用程序的示例

3. 统一性

统一性可以使线下产品和线上产品实现品牌感。

我们的线上和线下产品的设计风格都应该具有统一性,即使没有过多的说明,人们看到一眼也可以知道这是 Spotify 的设计。统一的设计风格,可以让用户对于我们的产品有一定的熟悉感和信任感。正因如此,我们没有完全抛弃 2013 年制定的的设计原则,去创造新的方向,而是根据之前的设计原则进行修改和优化。为了实现品牌的一致性,我们希望我们所制定的原则是可以在不同设计对象和设计场景中复用的。

下图中是一个营销活动的案例,无论是线下的广告牌、宣传海报,还是线上的活动页面,我们的设计风格都保持了统一性,无论你在线下还是线上看到,你都会知道这是 Spotify 的产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 营销活动的示例

推行新的设计原则

提出设计原则是一回事,让每个人都参与进来完全是另一回事。如果我们想让新设计原则持续运行下去,就需要一个执行计划。

在推行设计原则的初期,我们在一个设计团队的工作坊中试运行了新的设计原则。通过观察设计师在实际工作过程中,是否由于运用了新的设计原则更好的完成了设计实践,帮助我们判断这些原则是否是真的发挥作用。之后,我们将这些原则纳入现有的设计活动中 —— 例如,在全员设计会议中,介绍这些原则,并将它们添加到我们的设计手册和新员工的入职流程中。几个月后,我们与 Spotify 的所有设计团队都开展了一系列工作坊。这样,每个设计师都可以学习如何将设计原则应用在工作实践当中。

在工作坊中,我们将设计项目中应用设计原则的案例记录下来,比如,以用户的名字来命名歌单,建立与用户的 “相关性”。我们将这些设计师们在真实的项目中遇到的案例整理到一起,以便其他设计师看到具体案例时,更好的理解新的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

展示如何使用设计原则的卡片

在推行新的设计原则的过程中,我们发现有两点值得注意:

1. 恰当的案例,有助于我们对新设计原则的理解

口头上表达 Spotify 的设计原则是 “人性化” 或是 “相关性” 是很容易的,但是什么样子的设计才是 “人性化” 和 “相关性” 的呢?在推行设计原则时,用例子来说明这些原则的含义非常有用,案例越多越有利于我们对这些抽象设计原则的理解。

2. 周边产品可有助于设计师理解和记忆新的原则

设计原则也可以通过更多的周边产品,如海报、贴纸或其他产品去推广。理解新的设计原则和理念需要很多时间,周边产品可以帮助团队理解和记忆这些原则。为了推行新的设计原则,我们已经开始设计相关的海报、文具等周边产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

设计原则的在线下产品应用的示例(由 deepyellow 和 dribbble 图形组成的样机模板)

在没有 “官方” 的周边产品时,一位设计师把设计原则作为自己的笔记本电脑桌面背景,这也是一个很好的理解设计原则的方法。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有壁纸的笔记本电脑,壁纸上写着设计原则:相关的、人性化的、统一的。

新设计原则的影响

我们推出了这些设计原则后,有什么变化呢?

1. 新的设计原则更容易被大家记住和应用

现在,大多数设计师都意识到了 Spotify 有设计原则。根据我们的设计行动小组最近的一项调查表明,设计师们已经了解了 “相关性、人性化和统一性” 的设计原则,并且在设计过程中,设计师们也会考虑这些原则。这表明新的设计原则与我们之前的六项原则(内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分)相比,更适用且更容易被记住,也更容易在实践中应用。

2. 为设计评审建立了统一的标准

设计师有时在设计评审时会参考这些原则,但在这方面还有有待改进。在评审期间,设计师仍然需要有意识的参考设计原则。随着时间的推移,我们希望这成为设计师的本能反应。

我们开始制定新的设计原则时,目的是帮助设计师提升设计质量。那么我们的新设计原则是否使设计质量有所提升呢?现在说还为时过早。但我们希望 “相关性、人性化和统一性” 可以传达出 Spotify 的产品目标,这些原则能够不断提醒我们做得更好。

总结

设计原则不应该是一成不变的,设计原则需要根据我们的产品目标的不断发展进行优化更新,不断适应新的设计环境和设计对象,以持续保持高质量的设计输出。

好的设计原则应该是更容易被大家记住,并在工作实践中应用的。好的设计原则可以帮助我们在工作中做出正确的设计决策,在设计评审中建立统一的标准。相比设计原则的制定,设计原则的推行也同样重要,合理的推行方式可以使设计师真正的理解设计原则,并能够像本能反应一样在设计实践中应用。

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

文章来源:优设    作者:腾讯设计

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

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

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



防呆设计——10个防错的通用设计原则

雪涛

防呆(日语:ポカヨケ poka yoke),是一种预防矫正的行为约束手段,运用防止错误发生的限制方法,让操作者不需要花费注意力、也不需要经验与专业知识,凭借直觉即可准确无误地完成的操作。

而说到防呆设计,在各行各业都应用得非常广泛。为了避免用户在使用产品时不小心犯错,产品在设计时都会加入“防呆设计”。防呆设计,就是通过设计的方法来实现防呆,来帮助尽可能多的人进行“无脑操作”的方法。当然,防呆设计如果做得不好,就变成了招呆设计。

今天老王就跟大家来分享一下,在UI界面的设计中10种防呆设计原则。


1.阻断性原则




2.保险性原则



3.自动原则



4.相符原则


5.顺序原则



6.隐私原 



7.重复原则



8.提示原则



9.错误提示



10. 缓和原则


如果你细心观察你的四周,就会发现生活中很多细节都运用到了防呆设计。今天跟大家分享的这10种防呆设计的原则其实更是一种方法总结,具体如何运用还需要大家带入到实战中多多练习,在产品遇到错误时,想想该用哪种方式解决。


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

文章来源:站酷    作者:micu设计

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

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

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


兴趣电商,是新机遇还是伪概念?

雪涛

编辑导语:如今,电商的发展如火如荼,我们的生活已经离不开电商平台。随之带来的是丰富多样的选择,消费者可选择的种类更多了。但消费者的需求也在发生着变化,兴趣电商的机会也来了。如何在兴趣电商中拔得头筹,脱颖而出?我们一起来看看吧。

作者 | 周晓奇

编辑 | 子夜

来源 | 连线Insight(ID:lxinsight)

“过度丰富的商品对于消费者来说,或许是一种恩赐,或许是一种诅咒。”在《品类杀手》一书中,美国著名零售业研究专家罗伯特·斯佩克特提到。

经过十几年的蓬勃发展,电商生态已经足够丰富,如今人们足不出户就可以购买到市面上绝大部分商品。

但电商在丰富消费者物质生活的同时,也出现了商品过度丰富、信息过剩,用户反而会因此感到疲倦,货比三家也颇费精力。

这也让“推荐商品”成了新的商机。从社交电商,到目前依靠内容吸引用户购买行为的电商生态,都是“货找人”的场景。

据招商证券发布的《直播电商三国杀》报告显示,从2015年开始,以短视频、直播为主要载体,依托优质内容激发消费者兴趣的电商生态,在国内突然兴起,并呈现爆发式发展。

图源招商证券报告

今年2月,中国互联网络信息中心发布的第47次《中国互联网络发展状况统计报告》,其中数据显示,在电商直播中购买过商品的用户已经占到整体电商直播用户的66.2%,其中17.8%用户的电商直播消费金额占其所有网上购物消费额的三成以上。

通过短视频、直播,用户发现并了解了商品,而优质的内容则激发了用户潜在的消费需求。

这种电商生态,用兴趣电商表述更为准确。

不过,颇受争议的是,在国内电商生态如此繁荣的环境下,兴趣电商是涌现的新机遇,还是伪概念?

商家、品牌商们已经在用脚投票,越来越多的品牌正在组建独立的兴趣电商团队。

据连线Insight不完全统计,美的、珀莱雅等品牌都在内部搭建了专门的直播团队,三只松鼠有十余人的直播运营团队,良品铺子甚至还专门为抖音电商渠道单独注册了一家公司。

在技术的不断突破下,电商生态也随之风云变幻,而兴趣电商的出现,或将成为当前短视频平台在电商领域突围的关键。

一、用户消费习惯变了,电商的新机会是什么?

时代浪潮滚滚向前,电商世界也随着用户习惯的变化而风云变幻。

在最早期,人们希望买到自己需要的东西,搜索式电商满足了这一阶段的用户需求,解决了购物渠道和价格信息不对称的问题。

搜索电商时代解决了“人找货”的问题,而社交电商时代很快进入了“货找人”的阶段。

在新的阶段,出现了借助社交流量激活的电商生态。在社交电商中,人的价值开始发挥重要作用,通过用户与用户建立联系,进而推荐商品,极大地提升了用户对不熟悉商品的信任感。

更关键的是,在社交电商生态中,产生第一次交易后,真正的裂变才刚刚开始。通过社群或个体联系,社交电商可以覆盖单个用户所有生活必需品。

由此,专业的社交电商玩家陆续诞生,开始有了与传统电商分庭抗礼的实力。

可见,跟随用户消费习惯的变迁,在不同阶段都会诞生不同的电商模式。

那么目前,用户出现了什么新的消费习惯?电商领域还有什么新趋势?

通过观察用户可支配收入、规模,以及日常高频使用的软件,或许能够看到正在诞生的新机会。

如今,随着全国居民人均可支配收入的连年增长,人们的消费习惯在不断发生改变。

据国家统计局数据显示,2020年,全国居民人均可支配收入为32189元,比上年名义增长4.7%,扣除价格因素,实际增长2.1%。其中,城镇居民人均可支配收入43834元,增长3.5%,扣除价格因素,实际增长1.2%;农村居民人均可支配收入17131元,增长6.9%,扣除价格因素,实际增长3.8%。

与电商刚崛起的时代不同,如今网购已演变为一种基础消费形式,成为大多数用户日常生活的基础组成部分,而此时大部分用户已经跨越了生存需求阶段,越来越愿意为自己的兴趣付费。

抖音电商总裁康泽宇提到,当前用户的消费结构发生了升级,早期大众消费时代,消费者需要什么买什么,现在消费者生活富裕了,出现了很多精品店、Shopping Mall,消费者逛街过程中,没有什么特别明确的需求,只是看到什么喜欢买什么。

据中国网络视听节目服务协会发布的《2020年中国网络视听发展研究报告》(以下简称网络视听报告)显示,我国短视频用户规模已经达8.18亿,占网民整体的87.0%,其中,抖音稳居行业第一梯队。

在报告进行的专项调查结果中,其中46.9%的用户每天看综合视频的时间在1-2小时,对于短视频而言,这一数字为34.8%;此外,有16.1%的用户每天收看综合视频的时长在2小时以上,对于短视频而言,这一数字为18.2%。

从各项维度来看,短视频已经成长为互联网行业第一大用户时长、流量和内容的聚集地。

这意味着,很多用户的喜好在短视频这个巨大的内容平台上展示,他们对感兴趣的内容点赞和评论。

根据用户喜爱的内容,发现用户的潜在需求,给他们推荐他们感兴趣的商品,这是兴趣电商最大的特点。

但要做好这件事并不容易,当消费者的需求不明确的时候,商家要怎么帮助用户发现潜在需求?平台又怎么帮助商家将商品推荐给感兴趣的人?

二、兴趣电商,重在兴趣

兴趣电商,真的能带来成交吗?

兴趣电商对应的消费特征是,用户存在潜在的消费需求,但并不知道真正契合自己需求的是什么商品,或者说,在海量的商品信息、层出不穷的新科技新产品面前,消费者不知道自己的兴趣和需求究竟应该以怎样的产品形态出现。

而在用户观看短视频或直播的过程中,丰富而生动的内容会激发出用户潜在的消费需求,从而转化为商品订单。

在招商证券的《直播电商三国杀》报告中提到,直播带货能够带动观看用户的消费欲望:超过60%的用户表示直播带货能够非常大或者比较大地引起消费欲望。

抖音创作者马玲敏最先感觉到了这一趋势。三年前,马玲敏只是在朋友中最先玩抖音,平常拍摄的也都是自己上下班的日常,而在一次无意中,她拍摄了一条云南特色美食”油炸玫瑰花”的视频,这让其一夜涨粉五万。

当地习以为常的食物与乡货,在外界看来却是新鲜事、新鲜好物。马玲敏捕捉到这种变化后,开始通过短视频和直播,将更多云南的特色乡货传播给更多地方。

2020年,马玲敏与团队小伙伴,走了上万公里路,探访了30多个云南村庄,在传播云南特色乡货的同时,也卖出了2.5万件当地特色美食,年销售额达到123万元。

马玲敏的案例,正展现出兴趣电商的独特性与商业价值。如果没有抖音短视频和直播,马玲敏或许还是一个幼儿园老师,而没有她的传播,全国各地的用户也不会知道众多云南特色乡货。

通过短视频和直播,货找人的路径得以实现,而依托优质的内容,才是真正推进兴趣电商诞生并发展壮大的重要因素。

更多的创作者,正在短视频平台上输出着优质的内容,而这些内容,都蕴藏着商机。

只要在工作室内,陈凯拿起一把锤子,就能敲敲打打一整天,但他不是修理工,而是一位中国传统甲胄爱好者。

传统甲胄,图源抖音账号殿前司-胖虎

作为中国铠甲爱好者社团“殿前司”的发起人之一,2018年,陈凯注册了抖音账号,开始通过短视频的形式,让那些曾经只存在于壁画上、书籍里的传统铠甲“活了起来”。

在他的短视频中,包含了从传统甲胄的整体展示,到制作过程、盔甲相关的历史文化知识。

在现代追求高科技、新技术的潮流下,陈凯为喜爱甲胄的玩家,开辟了一个小小的天地,而网友在陈凯的短视频和直播当中,也找到了自己对传统甲胄的热情,成为了资深爱好者,积极地消费、传播着相关工艺作品和文化。

据连线Insight了解,如今在抖音上,手艺人的比例越来越多。原本,这些手艺人制作的工艺品无人问津,而通过抖音等短视频平台,这些手艺人甚至实现了年入百万。

追根溯源,这些手艺人能够崛起的关键原因之一是,他们越来越习惯并擅长使用短视频渠道。

相比图文内容,丰富的视频内容更为通俗易懂,理解短视频内容的门槛也就更低,由此吸引并带来了更多元化的用户群体。

据网络视听报告显示,截至2020年6月,我国网民较2020年3月新增3625万。新增网民中,15.2%的人第一次上网时使用的是短视频应用,此外,新网民对短视频使用率为77.2%,较2018年底增长10个百分点以上。

对手艺人而言,他们创作的内容天然具有稀缺的趣味性,而这种趣味性内容一旦匹配到相关爱好者,就有了商业变现的可能。

可以说,短视频和直播带货,将商品展示变得更加生动、直观,而这也是推动兴趣电商兴起的时代背景。

根据第三方测算,兴趣电商的GMV到2023年大概会超过9.5万亿,整个电商行业会有越来越多的参与者转向兴趣电商。

三、风口渐起,谁能突围成功?

兴趣电商的想象空间很大,但想吃到这块蛋糕得有真实力。

需要比拼的要点,包括了平台创作者的数量、用户数量、内容的丰富和优质程度、推荐分发技术。

只有这些都具备了,才能同时服务好用户和商家,在激烈的电商竞争中实现突围。

对于商家而言,兴趣电商的崛起,意味着更严峻的考验,其不仅需要挑选出符合用户兴趣的商品,还要通过丰富的内容来展现该商品的趣味性,但这也意味着有更多发展与崛起的机会。

首先最直观的,就是获得新客。

在流量普遍高昂的情况下,商家获客的成本居高不下,兴趣电商显然是一个值得尝试的渠道。

据康泽宇透露,抖音平台的商家反馈,抖音电商85%的消费者都是新客,这意味着越来越多的消费者,开始涌入兴趣电商生态。

当前,据抖音官方数据显示,截至2020年8月,包含抖音火山版在内,抖音的日活跃用户数已经超过6亿。

在这个用户数量的基础上,只要结构合理、运行得当,其未来发展空间足够广阔。

加华资本创始合伙人宋向前曾提到,现在年轻人受到非常好的教育,他们的视野更广阔,而且作为数字经济原住民,这一代年轻人掌握了很多信息,填补了信息差距。

庞大的年轻群体,也有更高的消费力。

据第一财经商业数据中心发布的《2020Z世代消费态度洞察报告》显示,在中国,Z时代的开支达4万亿人民币,占全国家庭总开支的13%,同时Z时代人群更愿意为自己的多元兴趣而买单。

Z时代消费规模,图源2020Z世代消费态度洞察报告

可见,在不久的将来,随着Z时代逐渐成为社会重要支柱,更有趣、精准,内容质量更好的兴趣电商,可能将改变整个电商产业以及重塑其中各个环节。

但如今,国内兴趣电商市场还在发展初期,与传统电商生态依旧有很大差距,同时兴趣电商要想避免仅停留在概念层面,平台应该有耐心、有远见,重视治理、重视质量,重视单纯的GMV数字之外更切实的用户体验,如此才能让兴趣电商真正成为增长引擎。

更为重要的是,作为电商生态中的新势力,兴趣电商不仅需要保证商品的内容有趣,更需要确保商品质量,保障每个消费者的购物体验。

看起来质量好,拿到手的产品不低于预期,这才能真正让感兴趣的用户,沉淀为忠诚粉丝。

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

文章来源:人人都是产品经理   作者:米可

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

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

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



页面加载方式介绍

雪涛

网易新闻




Pinterest

Artand



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

文章来源:站酷    作者:WseSteven 

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

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

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




数据可视化--如何应用这12种图表

雪涛

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?下面介绍这12种图表是如何应用的以及它们的优缺点

图表设计原则

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?总结了几个设计图表的基本原则

1.确保准确性

数据可视化的设计首先需要始终保持数据的准确性和完整性。通过使用清晰的标签、准确的轴线等精准的的展示数据,使数据时刻都是真实可信未修饰过的,不能为了修饰美化数据而歪曲混淆信息。

2.提升用户体验

为用户浏览数据提供上下文标识有助于用户快速感知数据,设计时要考虑到用户现有的心智模型——这些心智模型可能由广泛使用的工具塑造而成,创建出色的可视化体验可使用标志性的功能引导用户找到他们需要的东西。以帮助感知快速响应的系统。

3.突出重点

减少认知负担使用户专注于主要的信息上,需要对整体视觉进行降噪处理。最大化数据信息的呈现比率并避免设计过多无关的图形元素。应用颜色促进图形的理解:标签、分类、突出显示或度量;帮助用户理解层次结构、数据方向和关系。


12种图表应用方式

下面介绍12种图表,应该根据什么样的场景结合哪种数据结构使用,以及是否存在可替代的方案等。其中有几种是在实际使用中并不常用的类型,大众对这类图表的理解并不多,我们只有在理解图表的含义及功能才可快速应用在设计中。

1.气泡图

气泡图也是散点图的一种,其拥有多元变量,除 X 轴和 Y 轴所代表的变量值外,每个气泡的面积代表第三个值。

缺点:气泡的大小是有限的,太多的气泡会使图表难以阅读。

设计时需注意:

a. 选择合适的气泡大小,不可过大或者过小,太的气泡容易遮挡到其他气泡不便于选择查看被遮挡的详细数据;太小的气泡难以选择

b. 不要使用奇怪的形状,均采用同一种气泡类型仅通过颜色做区分即可;无需做太多造型,多种造型结合不够直观难以区分种类


2.热力图

热力图用于指示区域内每个点的权重。除了将地图作为背景层外,还可以使用其他图像。热力图中的颜色通常与密度挂钩,每个颜色代表一个数据区间,通过使用颜色的对比来表示地理区域或数据列表的密度分布信息。

如何设计?

a. 使用简单的地图轮廓: 少量的留白轮廓可适当区分个区域边界,大量留白轮廓使边界过于清晰使各区域有割裂感的会分散注意力。

b. 使用简单的图案:图案过多容易干扰阅读,尽量不使用图案,如果必须要用使用1-2种即可,过多则难以驾驭;

c. 使用合适的颜色: 强烈的颜色会导致视觉负担,难以区分轻重缓急。使用单色或相近色,并调整阴影以区分区域更好。

d. 选择合适的数据范围:数据范围区间应该是均等的,而超出范围的数据可用 +/- 表示。

这些是设计热力图时需要注意的地方,适用于大多数情况,当然这也不能作为绝对的标准,需要具体情况具体分析。


3.桑基图

桑基图显示了从一个指标到其子级指标的流量及比例。在流程的每个阶段,节点可以组合或分割路径。两端的节点宽度显示其数值大小,因此节点越宽,占比越大。可用于财务、管理和能源分析或代表产品的生命周期。这种类型的可视化可用于描述实体从源头到终点的流程

优点:对于文字流尤其有用:金钱、货物、时间、选票等,但也可用于许多其他目的。通过连接流线可以直观的区分变量的聚散关系。

缺点:桑基图只能通过节点、连接和数值展示简单的数据故事。不能从中推导出更复杂的关系。


4.华夫饼图

华夫饼图是一个非常有趣的图表,通常由100 个方块组成一个整体,因此它可以根据指标与整体的关系进行着色或填充显示指标的占比情况,就像饼图一样,同时它也适合显示单个百分比。

优点:它能够显示整体的各个部分并比较单个百分比的多样性,指标比例能够更清楚地通过色块面积表示。

缺点:涉及太多指标时颜色区分变多使展示变得过于复杂,无法直观看出单个指标的面积结构,因此适合用在只有少数指标的展示


5.矩形树图

当画面中需要多次出现饼图或环形图展示指标间占比情况时,重复元素过多用户阅读时更加如意感觉到乏味,此时可以采用矩形树图展示占比,通过使用色块面积比例来区分指标间占比大小情况。

优点:使用区域空间而不是角度显示数据,当类别超过五个时(避免有时难以标记的饼图)以及可视化类别内的子类别,树形图比饼图更有用。

缺点:此类图表应用不够普遍,可能有大量用户对这种图表形式不太了解。


6.旭日图

旭日图是树图的一种替代方案,采用圆环形式表示分层数据信息。层次结构从内圈到外圈扩散,其展示形式像太阳一样由中心向四周发散。圆环的每个指标被切片对应一个节点,圆心是根节点,在出现多个层级换结构时通过圆心切换回上一层级。旭日图在用色上最好采用不同深浅的颜色来表示父子级结构在色调上保持一致性,使用户能够直观的看出层级间的关联关系。

优点:可以显示层次流以及整个关系的一部分

缺点:如果配色方案不正确,那么理解图表就会变得困难。此外,过多的切片会使图表拥挤且难以阅读。


7.靶心图

同样是占比图的一种,与常见饼图不同之处在于,该图的指标间没有关联即占比百分数相加不等于100,但又需要同时查看指标的占比情况,因此需要采用这种形式进行对比分析

优点:适用于指标间比较分析,视觉上较为直观;

缺点:因层叠环形过多无法在图表上加大量文字辅助展示


8.热词云

热词云是展示文本数据的可视化形式,由大量关键词组成的云状彩色图形。通过关键词的大小颜色等区分词语的使用频率以及重要性,可以快速帮助用户感知最突出的关键词。

优点:能够快速获取关键词信息,可通过热词快速检索所需信息

缺点:因热词云需要大量的数据支撑,对数据依赖度高,如果数据过少效果则不明显,不适合精确分析。


9.河流图

河流图是显示指标的大小或比例如何随时间变化,“流线”的垂直宽度表示该实体的大小。可以通过使用固定比例查看所有指标的整体大小的变化;也可以使用相对比例以某一项指标为参照目标,其他指标的值与此做对比;若所有指标始终达到 100%呈现的效果类似于面积图。

优点:可查看新指标的出现而其他指标消退的速度,整体的趋势发展状态比较直观。

缺点:虽然看趋势发展方向比较直观,但是详细的信息阅读起来较为困难。


10. 瀑布图

瀑布图通过对初始值进行多次加减运算来呈现达成某个值的运算过程。在瀑布图中,需定义好颜色的含义,不同的颜色用于显示不同的操作过程,例如绿色表示加法,红色表示减法,蓝色表示所有操作后收到的总值。这里起始值和最终值之间的所有值都是浮动的。

优点:快速查看在上一数据的基础上当前数据的变化情况

缺点:使用此图表是只能表示过程的流程


11.仪表盘

仪表盘是一种物化图表常用在时钟、汽车仪表等,通过指针角度代表当前数值进度。它可以直观地表示一个指标的进度或实际情况。一个仪表板仅能表示一种含义,若出现两种含义的仪表尽量分开展示,

优点:仪表适用于间隔之间的比较。

缺点:不适合用在具有多个分量的数据结构


12.甘特图

甘特图直观地显示了任务的时间区间、实际进度以及与需求的比较。因此管理人员可以轻松了解项目的进度情况。

优点:适合快读查看项目进度、状态随时间变化、项目流程等时间管理类信息

缺点:可查看整体情况,详细细节还需进行具体标注


总结

图表的类型多种多样,实际项目中使用何种图表需要根据数据间的关系来决定,如果画面出现同类型结构关系的频率过高想要增加画面的趣味性减少阅读的疲惫感可以通过改变图表的颜色进行区分,或者变换图表类型,有部分图表是可以替换使用的,例如:饼图表示占比关系,可以换成南丁格尔玫瑰图或环形图,也可换成上文所提到过的华夫饼图、矩形树图。因此在设计时可以不用太过于局限在图表的结构上,可以在其他方向进行优化。



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

文章来源:站酷    作者:胖kuan 

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

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

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






用研成熟度的5个灵魂拷问

雪涛

最近一系列的对话让我意识到,类似于用户体验成熟度模型(UX Maturity Model),我们同样需要一套设计研究的成熟度模型(Design Research Maturity Model)。

在我看来,将某一领域的成熟框架死搬硬套地应用于所有企业,而忽略企业自身的使命或业务结构,是毫无帮助的。这种过度简化,甚至会导致企业自嗨式地以为自己每一步都做到了。

总体的能力成熟度模型(overarching Capability Maturity Model),沿用自美国国防部(Department of Defense),不过目前为止依旧是一个尚未被验证的框架。可能不像通常意义上讲的“硬技能(hard skills)和软技能(soft skills)”那样广为人知也弊端明显,但确实值得商榷。

因为任何值得做的事,都值得去质疑是否真值得去做。

因此,对于组织中真正想要通过评估产品和系统设计而持续探究领域潜能的个人,我提出这5个探索性问题。(最终,我会探索出一些类似节日五角星那样比较直观的视觉符号来展示每一个维度的进阶梯度和它们所代表的含义。)

 

5个灵魂拷问

这5个问题能帮你衡量所在组织做出更好设计研究的潜力,并让你在精准表达和实现组织目标上做得更好。

1. 你所在的组织中,让每个人敢于承认TA对于某件事的无知,在多大程度上是安全的?

To what extent is it safe for anyone in your organization to admit they don’t know something?

我之前有提到过这一点,如果一个人不承认自己知识欠缺时,是不可能虚心学习的。当组织内越多的人感觉到承认无知是安全的时,就越容易让你的组织处于持续学习并能毫无障碍地分享洞察的状态。

 

2. 在选择解决方案之前,探究多大程度上是从明确问题开始的?

To what extent does inquiry start with identifying the question before picking a method?

很多组织偏执地认为定量数据本质上就比定性数据更有价值,或是条件反射式地运用用户访谈和问卷调研去回答任何类型的问题。你要解决的问题会告诉你什么是最好的解决方案:是去阅读文献报告,或是做个问卷调研,或者做一轮访谈。你需要在调研前,先描述清楚问题。举个例子,如果你已经接受的实践方案是在烤箱内放入一把尺子看它是否温度足够,那么,你放多少把尺子都无济于事。

 

3. 跨职能和部门识别和共享问题,在多大程度上是组织的优先事项?

To what extent is identifying and sharing questions across disciplines and departments an organizational priority?

我们花了很多精力去建立知识库(research repositories)和知识分享,却没有花足够的精力让每个员工去理解一个组织需要知道的知识以及为什么需要知道。部门墙和职能墙持续存在。(比如为什么要将市场研究和产品研究区分开来?)跨职能和部门的协作探索(Coordinated inquiry)是效率和创新思维的源泉。围绕某个问题讨论并达成一致也能增进合作,因为个体和团队都不会再为了争夺一个神话般的胜利而争论不休。

 

4. 组织内各个层级的决策逻辑在多大程度上是清晰的?

To what extent is the basis of decision-making clear at every level?

我们擅长对外提问,却很容易忽视企业内部的现实。组织本身就是组织制定决策的社会背景,而这些决策工作也应该能被组织内想弄明白和受影响的人明确理解。

 

5. 通过系统研究产生的洞察结果,在多大程度上为决策提供了依据?

To what extent do the insights that emerge from systematic inquiry inform decision-making?

这是最终测试。如果设计研究产生的洞察容易被管理者忽视,那不论研究本身有多么稳健强大,都会毫无意义。

一种从目标(goals),到问题(questions),再到在明确的证据标准内运行的洞察力(insights operating within clear standards of evidence),所形成的功能反馈闭环,应该是每个组织的愿望。


翻译:贾婷   审校:LilyZhou
原作者:Erika Hall

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


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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档