首页

如何制作数据可视化地图

资深UI设计者


第三方地图的获取和对接

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

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


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


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



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



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


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


如果想要获取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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




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

资深UI设计者

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




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

资深UI设计者

本期提纲:

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

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

去年,我们一群人聚在一起探讨了一个棘手的问题:随着 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何让你的设计更具有说服力?

ui设计分享达人

对于一家做项目型的公司而言(今天主要讲的是项目性质的设计工作,产品可以绕道哦),时间就是成本这句话体现的淋漓尽致。基本上给到UI设计的时间,是少之又少,那么如何在一个有限的时间里,设计出优秀的作品呢?这是接下来我想跟大家一起讨论的~


我们都知道用户体验五要素(战略层、范围层、结构层、框架层、表现层),这五大点是一个个递进的过程,是一个从初步的想法到最后落地的过程。也就是说我们最后看到的表现层(UI界面)是如何做出来的,都需要靠前面一点点的去研究、细化、分析。所以这么一个强大而繁琐的过程,我们如何要在一个有限的时间内去完成,下面跟大家聊一聊我在实际工作中的例子。


一、沟通


沟通是一切事物的前提和基础,这个沟通一定是要跟客户的直接沟通,不管是远程还是面对面也好。中间人的传达会加上个人思想理解的转化,到你这里就不再是一手消息,也许就不会那么准确。拿到一个项目之后,我们要了解项目,所以需要对项目的背景、目标用户、产品目标、核心竞争力进行分别分析。


项目背景

为什么设计师的背后总是有一群指点江山的人,因为我们的设计没有被体现在产品上,只是表层,每次给别人解释设计理念的时候总是说“我觉得这样好看”、“我认为这块应该用这个颜色”,却没有说出这个项目本身想要表达的是一个什么理念。

本次项目是需要把手机版的内容改版成PC端,原有需求逻辑不变。那么问题来了,现在是一个移动互联网的天下,为什么客户却需要将手机端的内容移到PC上呢?因为这个产品的使用环境之一就是在工作中,试想一下,工作中一直拿着手机刷来刷去,不知道的人还以为你在划水。考虑到用户使用环境的因素,就需要有PC端的设计。


目标用户

产品的核心是用户。所以一切要从用户的角度出发,做用户满意的产品。在用户调研这块,常见的用户分析有:用户画像、一对一访谈、问卷调查、焦点小组、眼动测试、测评以及埋点数据分析,但是项目型工作周期短,时间紧,没有那么多的成本去做大量的分析,所以我们基本上采用三种方式去解决这个问题。1、与我们的客户(甲方)去沟通,他们肯定更了解自己的用户群体;2、通过现在市场上比较知名的网站(艾瑞网)中提供的大数据分析出的结果;3、如果身边有这种用户群体可以对他们进行简单访谈。通过以上三种办法也是可以得到一个较为准确的调研数据的。

在跟客户的沟通中了解到,我们的主要用户是基中层领导,目的为提升领导力。下面会有我对这部分人群的用户画像分析。


项目目标

知己知彼,要了解我们此次设计的主要目的是什么?需要解决什么问题?

因为这已经是一个已经上线一年的产品,我在跟客户的沟通中很明确了目前有两大问题:第一是:如何提高完成率;第二是:国外市场用户使用不习惯。

这两个信息很重要,为后面的设计提供了一个明确的方向。



核心竞争力

这是体现我们产品优势的地方,我们需要尽量的把产品强有力的能力展现出来,从而获得目标用户的信赖。把产品的能力、优势,可以给用户带来的价值,要体现在比价明显一些的地方。

此次是一个本身有强大的体系支撑,有一个成熟的结构,在此基础上开发研制的一套产品,所以产品的目标用户量,获得的成就就可以直接展示在首页上,并且把正在学习人数或者为多少人带来成就都体现出来。让用户感受到有这么多人都在努力,有这么多努力的人已经完成了自己的目标。


二、分析


我首先把手机版的功能都体验了一遍,随时记录了在使用过程中不喜欢的地方并且可以优化的点,这都是点点滴滴的随记,可以为后面设计中提供一些方向或灵感。根据上面了解到的信息。

可以得到此次设计的主要方向,第一:针对目标用户进行用户画像分析,以此来确定如何才能更好的提升完成率;第二:针对国外同类产品分析,对国外市场用户使用不习惯的了解,并且还要结合国内市场优化交互体验。


用户画像分析

在上面一个阶段了解到我们的用户群体是基中层领导者。根据市场数据分析,一般基中层领导者主要以男性居多,年龄大概在28-35岁之间,以需要提升领导力为目的,那么从这几个特征中我们看出,这些人都有哪些特点呢?首先28-35岁的年龄段,基本上是已经结婚的比较多,并且有很大一部分人群也有了孩子,这个年龄段的孩子还比较小,基本也是在2-6岁之间较多。对于这种类型家庭而言,无论是在工作上还是生活上都较为忙碌。并且因为是领导者的原因,时间上也较为分散,一天下来没有办法集中去做一件事情,开会、汇报、沟通需求、分布任务等。由于不像在学校,事情太多也太杂,很多时候没有办法安心去做一件事情,导致规划能力不强,需要借助平台可以有个推力。



国外同类产品分析

其次是针对国外市场用户使用不习惯这个问题,我对国外几个大型的相关网站做了了解。edX、Coursera、Udacity这三个网站是国外市场使用较多,知名度较大的几个网站。分别从内容上和视觉上进行分析,去了解国外市场的设计方式,用户使用习惯等。



从以上的分析中最终得出了以下三个结论:

1、操作习惯:这个与国内的差不多,都是从上到下,从左到右呈Z字形排列布局的方式,视觉的落脚点都会在画面的左上方,所以我们在设计的时候,要把重要或者想要表达的内容放在这个位置,使用户进入页面后就可以很快看到它。

2、采用Complexion Reduction设计语言:将标题放大,制造视觉上的冲击力,拉开页面的层级关系,这种设计方式也是国外较喜欢、较常用的一种设计方式。

3、视觉风格:国外网站的设计整体留白较多,让页面更有呼吸感,页面上几乎没有无用的装饰性元素,非常简洁,颜色使用也比较简单,不会用过多的颜色去扰乱用户,简单的设计对于教育类的行业来说,可以减少视觉疲劳,让眼睛放在有用的事物上去。



通过以上对用户画像和国外同类产品分析,总结出:我们要从多维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。是这次设计的核心思想。

1、从用户的时间分散且忙碌的特点,得到我们需要尽量优化交互逻辑,减少用户学习成本,让用户可以快速找到自己想要的东西;并且要让用户在本身就较为忙碌的情况下尽量轻松的学习,不要再给用户增加压力。

2、通过用户规划能力不够强的特点,得到我们可以给用户定制一个“学习计划”,帮助用户规划自己的学习能力,并且在学习中增加互动性,比如随堂笔记、收藏、标记这种小功能,随时给用户带来互动,让用户更有参与感。

3、从国外同类产品分析中总结出,整体国外市场的喜好是简洁、少装饰、以大面积留白来增加页面的呼吸感,采用尽量简单的卡片式的设计方式来拉开页面的层级关系。




三、设计


现在就到了设计阶段了,上面了解分析了那么多,给我们设计提供了那么多基础材料,这个时候就派上了用场。上面的最后提到说:我们要从维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。接下来我就要讲述,如何在设计去运用了。


轻松-这个很重要。

如何让用户在生活和工作那么繁忙的情况下,还要努力的去学习,努力的提升自己呢?所以我们这里就采用插画的形式,插画像是动画片,让我们回到了小时候,并且融入了AI人机对话,沉浸式的体验更是可以让用户在一个轻松的氛围内完成自己的学习。


增加互动性

原有手机端的功能缺少与用户之间的互动,看视频就是看视频,做题就是做题。让用户在使用的时候不能按照自己的意愿去支配,这种感觉不好,一定要让用户有参与感,让用户占到主导性,而不是那么强硬的让用户跟着你走。所以在课程这块的设计上第一采用了全屏的方式,让用户不用返回,在当前就完成本阶段的所有的课程,增加效率。第二在原有的功能上增加“课堂笔记”、“收藏”和“学习计划”等一些小功能,让用户随时按照自己的意愿去学习,实时跟产品进行互动。



层次感的表达

教育类型的网站,页面相对来说比较干净、整洁一些,可以有效减少用户视觉疲劳,避免不必要的干扰元素出现影响用户的体验。

在本次的设计中,学习了国外同类网站的设计风格,采用卡片式的方式,将元素与标题包裹在一起,有效与其他元素进行区分,增加投影设计,让页面更加有层次感和空间感。标题上面采用了Complexion Reduction的设计语言,将标题放大,制造视觉上的冲击力,拉开元素之间的层级关系,丰富页面的设计。这也是国外网站较喜欢的一种设计方式。





四、走查


设计完成之后,切图交到开发手里之后,不能算就完成了,最后走查这一步很重要,要保证实现出来的效果跟设计稿保持一致。不然前面说的再多,设计的再炫都是白搭,实际使用的用户可不知道你前面都做了什么,他只感受他现在感受到的。

我一般的方法是用Word的方式,将有问题的页面截图并标记出来问题点,并且按照菜单进行分类。这样开发对照看起来就特别明确,只用文字不配图的表达都是耍流氓,谁知道你说的是哪个页面的哪个点。用Word进行归类最重要后面追踪也特别容易,可以很明确看到你哪块问题还没有修改,不用再反复提交。



总结一下:

一般我的设计流程就是:了解-分析-设计-走查,因为不是产品性质的,所以最后的迭代或者验证这一步骤就会不那么重要,如果是做产品型的后面的验证也会是非常重要,因为是项目型的所以这里就不多做说明。以上就是我个人在设计中的案例分析,大家有想法的可以多沟通,多交流。

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



文章来源:站酷   作者:酱油不咸

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

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

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



详解|针对某个功能,如何做竞品分析和设计优化?

seo达人


  • 案例    设计需求是:优化一款 B 端产品的「套餐售卖卡片」的原有设计:

图片

△ 某 B 端产品服务购买卡片设计(优化前)

 

你会觉得这个设计无伤大雅,但也说不上专业。于是设计师参考阿里云和华为云的服务购买卡片:

图片

△ 阿里云服务购买卡片设计

 

图片

△ 华为云服务购买卡片设计

 

经过了对信息层级视觉效果的比较与思考,设计师最终将设计稿优化为下图效果:

图片

△ 某 B 端产品服务购买卡片设计(优化后)

 

这里的 “参考” 并不是简单的照猫画虎,而是站在巨人的肩膀上,学习和精进自己的能力与认知。
今天给大家详细的介绍下,针对某个功能或元素,如何借鉴和分析竞品。有以下几个方法:
  1. 分析几乎完全相同的产品
  2. 分析不完全相同的产品
  3. 分析完全不相同的产品

 

1. 分析几乎完全相同的产品

这个方法很好理解,这类产品与你正在设计的产品在功能需求、产品形态、用户类型等方面都很较大的相似性,也是最容易直接提供解决方案的,比如上文提到的服务卡片设计优化案例。再比如,你在做一款「云盘的登录注册页面」,你可以参考「腾讯云盘」和「华为云盘」等大厂产品的登录注册页面,看看他们的页面是怎么布局的,提供了哪几种方式,增加了哪些入口和元素,如何使用颜色和字号等等。图片

△ 华为云盘登录页面

 

图片

△ 腾讯云盘登录页面

 

2. 分析不完全相同的产品

如果找不到完全相同的竞品,对于不完全相同的产品,也可以分析和借鉴,这就要分几种情况,需要你对手中的设计任务进行拆解:

(1)需求相同,但产品类型不同:比如同样是「云盘的登录注册页面」,如果找不到完全类似的竞品,你可以查找包含 B、C 端用户的其他产品的登录注册页面,取长补短。

图片

△ 雨雀文档登录页面  

 

(2)结构相同,但应用场景不同:接上面的例子,登录和注册页面本质上用户填写表单,产品收集用户信息。因此你也可以找填写手机号、用户名、密码相关的表单的设计,并不一定是登录注册页面的表单,比如你在寄送快递时填写手机号的表单也可以用作参考,也许会提供不一样的设计思路。

图片

△ 淘宝 App 可以调动系统定位,并提供几个最有可能的选项,用选择代替用户输入

 

3. 分析完全不相同的产品

如果是完全不相同的产品,那学习和分析的是这类产品的设计原则和手法。接上面的例子,这次你可能借鉴的设计就是下图中「微信通过好友申请」的页面。

你会发现在这个页面中微信将能设置的好友信息都呈现了出来,让用户先设置之后,再通过申请,这样就避免了很多用户顺手添加了好友而忘记设置信息。相比之下在设计登录注册页面,可能也可以根据产品功能和用户需求,适当将设置项前置图片好的设计,在设计思路和原则上,通常也会具备通用性。对于大多数人来说,在很多工作上都要经历这个过程:抄(指学习) -> 操(指操练) -> 超(指超越) 掌握这几个过程中的精髓,很重要。

 

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

作者:元尧

转载请注明:学UI网》详解|针对某个功能,如何做竞品分析和设计优化?

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

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

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

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



这6种高级黑配色套路,太绝了!

seo达人



图片

黑色+白色

图片黑色是一个很强大的中性色彩,它有一种极其特殊的色彩语言,它很容易让人着迷,而且受到各领域众多设计师的关注。黑色给人传递的是一种庄重、神秘、稳重、高端、大气等等的一系列视觉感受。因此我们在用黑色作为主色调的时候,需要注意产品性格特征,想传递什么样的感受给用户。图片
图片
在杂志化版式设计中,黑色和白色搭配出现频率也是较高,毕竟黑色本身就有一种高级神秘感。当它与白色搭配,更体现极致简约性格。
图片
图片
图片
图片

图片

黑色+蓝色

图片

蓝黑搭配也是最好看和运用较多的颜色,它们之间组合彰显沉稳大气。黑色本身更沉稳,配上蓝色整体画面感彰显高级时尚。

图片

图片

蓝黑搭配一般在科技类产品较多出现,因为蓝色本身略带一些科技属性,黑色本身会有一些沉闷,且蓝色也不像黄色那样高亮耀眼,因此在选择蓝色上适当提升一些明度。

图片

图片

图片

图片

图片

图片

黑色+橙色

图片

橙色是一种有性格的颜色,当它遇上黑色,在画面彰显活力与生机,与蓝色不同的是,橙色更醒目与热情,更有一丝腔调,内敛和张扬得到有效平衡。

图片

图片

活力橙色作为暖色调,它不像红色那样更霸气刺激,更纯粹的多了些许阳光的温暖,在不同层次明暗橙的对比演绎出柔和的色彩变幻以及熠熠闪光的细微差别。

图片

图片

图片

黑色+绿色

图片

绿色在设计圈可谓说是一直都挺火,绿色与黑色搭配可以中和黑色的沉闷,还有一种清新透亮的感觉,如果是和亮绿搭配,更有一种酷酷的潮流感。

图片

图片

图片

图片

图片

图片

图片

黑色+黄色

图片

黑黄搭配,极视觉冲击力,既能给人活泼奔放的味道,同时又有着一丝内敛与沉稳。很多设计中经常看到黄黑组合,黄色在黑色的存托下,显得格外时尚。

图片

图片

图片

图片

图片

黑色+红色

图片

红色与黑色的配搭,在设计界也是运用较多的经典颜色组合。黑色的神秘而高级,略带一丝沉重,配上热情奔放的红色,缔造了一种无与伦比的时尚,成就了一种永恒的经典。

图片

图片

图片

在使用红黑搭配时,注意红色使用占比,以及饱和度,避免过于高亮的红色。一般在黑红搭配过程中,其实都少不了白色在其中。

图片

图片

原文地址:功夫UX(公众号)
作者:功夫UX
转载请注明:学UI网》这6种高级黑配色套路,太绝了

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

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

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

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


UI&UE实用方法论 | 做交互体验,你必须得知道的「多尔蒂阈值」

seo达人



美剧《奔腾年代》(Halt and Catch Fire)里有一段台词:

“当你使用计算机执行一系列操作,每当你按下回车键,它都能在400毫秒内给予你反馈,反馈时间还不到半秒,那么就可以让你一直保持专注,效率也会飙升,你会完全沉迷进去。但反馈时间哪怕只是偏差到半秒钟,你的注意力都容易被分散,你甚至会想起身洗个碗、拿个遥控板、看场比赛…所以说400毫秒以下的反馈速度,是最佳节点。”

当然翻译中带了点我个人的语言色彩,但意思还是这么个意思,也就是说当交互反馈时间小于400毫秒,那么将大大提升用户的专注程度与效率,用户也不易急躁。而大于400毫秒,即使仅仅是偏差到半秒钟(500毫秒),也容易被用户感知到,从而影响用户心流。

而剧中引用到的这个临界值“400毫秒”,就是我们今天要聊到的——多尔蒂阈值(Doherty Threshold)。

 

一、为什么是400毫秒

1982年,IBM公司的WJ·多尔蒂(WJ·Doherty)及其团队就“系统响应时间对经济价值影响”的课题展开了研究。研究过程主要以用户操作系统后,系统的响应时间作为变量,观察其对多个维度的结果产生的影响。

最终从其中的一组研究实验结果中观测到了一个现象:一旦当系统响应时间超过400毫秒左右时,各项指标数据就会开始产生较大数值的波动。

于是IBM公司就此提出了研究结果:系统响应时间应该低于400毫秒,这将显著提升用户的关注度,从而影响到用户的操作、工作效率。并将“400毫秒响应时间”这个节点值以WJ·多尔蒂的名字命名为「多尔蒂阈值」。

虽然如今我们早已认为系统拥有快速响应时间是一件理所应当的事情,但「多尔蒂阈值」的提出,在当时那个年代却是开辟先河性的。因为70年代左右,计算机研究界还普遍以“系统的响应时间可以为2000毫秒(2秒)”作为业界标准。

虽然我现在已经查询不到这个“2秒”旧知识的科研文献了,但是在 IBM 2018年的一场欧洲线上演讲会的PPT中我们还可以看到:

所以「多尔蒂阈值」可以说是重新定义了现代人机交互领域响应体验的指标,影响着一个标准规范产品的视觉侧、交互侧、体验侧、开发侧等多个方面。

 

二、多尔蒂阈值的运用

我们要清楚的是,「多尔蒂阈值」是IBM公司给到的一个系统响应时间的最大参考值,并不是说所有的机器响应时间都必须卡在400毫秒这个节点上,而是说响应时间应保持在400毫秒以内,尽量不要大于400毫秒。

那么知道了“400毫秒以内”这个范围值,我们作为设计师,要怎么将其运用到设计工作中,或者说「多尔蒂阈值」会影响到我们哪些设计标准呢?——来看看 Google 旗下 Material Design 的系统动作规范,应该能让你找到一些方向。

 

要点一:并不是越快越好  

作为设计者、开发者,我们都希望系统能够尽量快地响应用户的操作。但也并不是一味地追求极速就一定是好的。

Material Design 在系统响应动作规范中强调了“过渡时间”的概念,虽然大家都希望系统的响应速度越快越好,但同时用户也需要一些时间去理解系统响应的结果。

如果响应即结果,而不给用户一个视觉过渡的反应时间,则会让用户无法跟随UI变化,同样也是会给用户造成困扰的。

Material Design 规范建议到:不要给用户过慢的响应速度,干扰用户操作进程,让用户急躁;但也不要给用户过快的响应速度,用户无法跟随UI变化,对用户理解会造成困扰。

我们将响应速度结合「多尔蒂阈值」范围内的视觉过渡效果,可以帮助用户理解操作反馈的结果,有时间思考类似于“我刚才点击了什么”、“结果和我的操作之间是什么关系”、“结果是否满足我的预期”等问题,并做出下一步的反应。

 

要点二:响应时间不是一成不变  

为了让响应视觉过渡更加符合现实规律,Material Design 根据响应结果区域的大小设置了3种响应过渡时间规范,其中又以用户的操作场景进行了更进一步的规范细分。

先来说说根据响应结果区域的大小设置的响应过渡规范:Material Design 将操作响应结果区域分为小、中、大3种场景,当操作影响的结果区域越小,那么响应过渡时间就应该越短。反之,操作影响的结果区域越大,响应过渡时间就会越长。这一点是符合人类意识对运动的理解的。

其次 Material Design 还认为,用户做“关闭”、“退出”类操作时,预示着他们那要进入下一个任务流,而此时上一个任务流的内容,用户就不再关注了。操作与结果的关系、层级的关系、内容的位置关系,在“打开”、“进入”类的过渡中就已经阐明给用户了,所以他们离开的时候,可以更快。这就是在响应结果区域大小的基础上,又以户的操作场景进行的更进一步的规范。

 

  • 小型区域:响应过渡统一为100毫秒;

 

  • 中型区域:打开的响应过渡为250毫秒,关闭的响应过渡为200毫秒;

 

  • 大型区域:打开响应过渡为300毫秒;关闭响应过渡为250毫秒。

结合两个要点总结一下:系统响应应该结合视觉过渡给用户操作与结果的关系进行指引,所以也并不是越极速越好。响应过渡应该在「多尔蒂阈值」以内,并且可以结合响应区域大小、用户操作场景,使响应更符合现实规律,更加人性化。

 

三、面对不可避免的延时响应

虽然把系统响应控制在「多尔蒂阈值」内是我们追求的目标,但是响应速度往往和请求的数据量、网络环境等诸多因素有关。对于结果返回数据量小的场景,我们利用视觉或代码层面的解决方案,可以让响应时间是可控的。

但当用户遇到结果请求数据量大、网络环境较差等场景,响应时间以“秒”起步那也是司空见惯的事情。此时面对无法保证响应时间在“400毫秒”以内的情况,我们应该怎么办呢?

其实这已经超过「多尔蒂阈值」的讨论范围,对于不可避免的延时响应场景,已经是属于“如何解决用户等待焦虑”的话题了。

但恰好我之前在《聊聊加载等待的那些事 之 进度指示器》中聊到过这个话题。想系统了解的朋友,可以移步查看。(知识就这么串联起来了!神不神奇~)

对于想走捷径的同学,我在这里把当时的调研结果贴出来,希望能够帮助到你们。

我结合了 “用户等待4秒原则”和UX研究咨询公司 Nielsen Norman Group(NN/g 尼尔森诺曼集团)的一篇文献中提出的 用户等待心理模型,得出了以下参考结论:

用户是一个复杂的群体,他们其实并不关心所谓的量化时间,他们只希望:加载尽量快,快到不要中断我的操作流,如果实在快不起来,那就告诉我还要等多久。所以由上表得出的结论是:

  • 加载时长在0到1秒之间时用户不易感知,不需要给予用户 loading 提示,在任何加载情境下频繁给出 loading 提示其实反而会干扰用户心流;
  • 加载时长在1秒到4秒之间时:此时不需要明确给予用户量化时间提示,用户也不易产生焦虑情绪;
  • 加载时长大于4秒时:超过这个时间你就需要明确地告诉用户当前的进度状况了,加载百分比或剩余时间都可以让用户心里有个底;
  • 加载时长大于x秒时:设计者应该根据具体加载场景设置加载时间临界点机制,在加载超过这个时间之后默认为加载失败,让用户进行再次操作,而不是无意义地苦苦等待。

 

四、总结

「多尔蒂阈值」不仅仅是设计师完成交互动效、反馈体验时的一个知识点,它是IBM对整个计算机反馈机制进行研究之后得到的结论,影响体验、效率、经济等多个方面。所以我认为这是互联网人都应该熟知的一条交互理论。

只是我在这里仅结合了 Material Design 的系统动作规范,分析了设计层面对「多尔蒂阈值」的应用,还是稍显片面。但感兴趣的朋友,还可以去搜索了解更多关于「多尔蒂阈值」的实验、故事与实践方案。

 

原文地址:UCD耍家(公众号)

作者:Howiet


转载请注明:学UI网》UI&UE实用方法论 | 做交互体验,你必须得知道的「多尔蒂阈值」

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

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

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

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


案例锦囊|设计如何为用户「节省时间」?

seo达人



1. 有效的信息抓取 

案例 1  :钉钉的“代办事项”设置功能,可以自动抓取到语句中的时间信息,自动帮助用户设置好时间,减少用户的操作时长:

图片

案例 2  :在微信中可以对图片中的文字进行识别提取,手指在识别出来的文字上滑动就能够选中,可以直接全选、复制和转发:

图片

案例 3  :不同产品之间也可以共享数据。咸鱼和淘宝订单数据打通,在闲鱼平台上发布产品时,会看到系统给出的用户曾在淘宝买过的商品,以及卖出这些商品的预估价格,便于用户直接拍卖:

图片

  案例 4  :支付宝拍照添加银行卡可以使用拍照功能,由系统识别银行卡号和开户行,减少用户的操作时长:

图片

 

2. 避免重复阅读和操作 

案例 1  :爱奇艺在剧集片头处,都会弹出提示,选择“跳过片头”,即可设置该剧跳过片头:

图片

案例 2  :微信的朋友圈在退出后再次进入时,会在内容流中间出现一个“跳到还没看的位置”,帮助用户快速定位之前离开的位置,不必阅读重复内容:

图片

案例 3  :在微信群聊天记录中,如果有太多条内容未读,会在右上角标注出未读数据,点击之后即可从未读的地方开始浏览:

图片

 

3. 减少错误的可能性

案例 1  :在恶劣天气,美团先让骑手接单,再让商家接单,可以避免无人配送的情况:

图片

案例 2  :高德地图 App 会预估并提示行驶路程何时会拥堵,让用户提前有心理准备和预知:

图片

案例 3  :微信在你没有领取对方红包时,会给出红包即将超时的提醒。点击“转账”链接,会直接定位到转账对话的位置,防止用户再次花时间处理:

图片

案例 4  :美团的新单车是在 App 上关锁,不再需要在单车上手动关锁,解决了用户骑行完成,忘记锁车还要跑回去的问题:

图片

 

4. 用选择代替输入

案例 1  :饿了么可以记录你每次写的备注,在下次填写备注时可以快速选择输入,不需要用户做多余的输入:

图片

案例 2  :在携程 App 中填写姓名拼音信息时,系统提供了一键转拼音的功能,同时对于多音字还能够自动为用户提供选项判断,提高用户录入的效率和准确率:

图片

案例 3  :京东 App 对商品进行评价时,底部会提供一些评价标签,既能引导用户进行规范评价,又能提高用户的填写效率:

图片

案例 4  :微信钱包的钱转账到零钱通里,有一个“全部转入”的快捷选项,减少了用户输入时长:

图片

 

5. 提供下一步路径入口

案例 1  :高德地图搜索路线,会自动提供哈罗单车和地铁的扫码快捷路口;支付宝出行支付地铁票成功后会看到附近的网约车信息提醒,可以立即使用高德地图进行打车:

图片

案例 2  :蚂蚁森林新增了 “找能量“ 的功能,点击会自动跳转至有能量可偷的好友的森林界面,多次点击随机跳转,直至所有好友的蚂蚁森林可偷能量被偷完,偷能量也可以省时高效:

图片

案例 3  :得到 App、大众点评等产品,会在截屏时直接提供分享入口,帮助用户做下一步分享:

图片

 

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

作者:元尧

转载请注明:学UI网》案例锦囊|设计如何为用户「节省时间」?

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

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

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

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

最近超火的“彩虹光感”,别告诉我你是最后一个知道的

seo达人


什么是彩虹光感?

图片
彩虹光感也是最近这一年左右在设计圈蔓延,然后至今发现越来越多的设计师喜欢上这样的风格,也许是因为单色渐变或者黑白灰看腻了,从而去选择一些更能在平凡中凸显竞争性彩虹色彩。
图片
彩虹光感的形成,一般由多种色彩叠加混合而出来,通过色彩柔和过度或者扩散开的方式处理形成。这种色彩出来的效果十分惊艳,艺术感十足。
图片
Microsoft Office 365
譬如之前微软一只影片里面,应用到了彩虹色彩搭配思路。在玻璃拟态轻质感的加持下,视觉效果让人眼前一亮。
或许有些设计师觉得彩虹光感,会有些花哨且也不高级。其实在在同质化严重的今天,尝试下新的视觉表现形式,未必是坏事,也许它可以让你的设计脱颖而出。
图片
英国约克郡雕塑公园的旧教堂
艺术家kimsooja 用彩虹色灯光,为教堂带来新的生命力。在这种环境中,似乎让我们感受到了色彩呼吸的声音,放下生活中的杂事,聆听色彩在歌唱,开始静谧冥想。
图片
apple watch
就连苹果的硬件产品设计,也采用了彩虹色彩搭配,这种与众不同的新鲜感,有网友直呼太美了吧。也正是因为彩虹色的活力与年轻化潮流,受到越来越多人的关注。

 

彩虹光感的特点

彩虹光感由自然界中真实存在彩虹演变而来,如今在数字设计中越发广泛的使用。因其特殊的效果,以及迷人般的色彩弥散处理,使得这种色彩虽然混合多种,也不会让人产生厌倦感。
图片
untitled macao
基于目前彩虹色彩应用案例,我们可以分析出这种风格最大特征点有:丰富、多彩、年轻、活力、细腻的质感、充满想象空间以及有一些疯狂特征,似乎有着为年轻一代而出的风格。
图片
图片
其实在早期从20世纪70年代开始,彩虹色彩就受到摇滚乐队的喜爱,以及一些电影霓虹灯效果演变,也有些彩虹色彩踪迹。
图片
摇滚音乐CD封面
直到今天,彩虹色的再次复兴,已经延续到众多领域中,例如装置艺术,艺术展览以及产品包装、音乐节海报等各种领域的渗透,我想我们是时候思考它的价值以及接下来潜力。
图片

图片

untitled macao
图片

 

彩虹光感的应用

如今不论装置艺术,还是数字设计,彩虹色彩搭配都能有眼前一亮感受,这种效果不仅 能打破 枯燥配色,还可以活跃氛围感,特别是一些涂鸦类型艺术装置等、音乐海报、酸性风格和平面设计等大量出现,下面挑选一些优秀领域应用案例和大家分享下。
#1. 平面中的应用
图片
图片
图片

图片

图片

Behance/Canwei Lai 赖灿伟

 

#2. 包装中的应用

图片

图片

图片

 

写在最后

彩虹光感慢慢开始成为流行文化中的一部分,特别是演艺海报与展览装置艺术等都在大量出现。这种色彩搭配的出现,更是一种前所未有的改变与突破,大胆而张扬的精神,极具吸引力。

个人觉得彩虹光感的配色,可以让产品在竞争中脱颖而出,彩虹色更有着年轻活泼的寓意。如今看到一些营销,也在为Z世代年轻人打造产品,将彩虹色应用在产品中也是一种突破窘境的手段。

 

原文地址:功夫UX(公众号)
作者:功夫UX

转载请注明:学UI网》最近超火的“彩虹光感”,别告诉我你是最后一个知道的

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

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


文章来源:csdn

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

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



系统化思维如何辅助设计实现

seo达人



“文中示例相关数据都为模拟数据,而非真正的商业数据,以此声明”

 

先给大家介绍一下酷大师的背景:

1. 酷大师产品定位:面向设计领域的在线建模工具和内容平台。

2. 酷大师当前阶段:0-1搭建并完善用户体验闭环。

3. 酷大师阶段目标:服务用户增长的同时,提高用户留存。(站点留存→引流→工具留存)

在一周一迭代,交付任务紧的敏捷流程中。以下是我们在其中的一些实践:

 

1、以系统化的视角来分析业务

酷大师项目启动至今,已经大致完成了站点从0-1的内容搭建。站点的主要模块包含:首页、模型广场、工作台、帮助中心、活动中心、课程中心。他们相互独立,又相互影响。独立好懂,聪明的亲们通过名字就能猜出各个模块的功能,并且这些功能彼此都不可替代。那么他们是怎么相互影响的呢?这里引出一个词:系统化

请看下图:

图片

同样一个事物,独立的看,和把它放到一个系统中看,我们可能会有不同的理解。同理,当我们把酷大师站点当作一个系统来看时,再结合我们的业务指标,我们可以把这个系统转译成如下模型:

图片

从抽象到具象,我们把整个模型分为三个指标类型:

  • 1、核心指标:整个项目为之负责的目标,是评判所有项目行为的基本准则。
  • 2、策略指标:影响核心指标的所有变量集合,是基于产品策略拆解出来的二级支撑性指标。
  • 3、行为指标:随着策略指标的精细化,产品的策略指标最后都会对应到一个或者多个具体的用户行为指标。

我们可以通过模型找到影响业务核心指标的重点发力板块,也可以通过最底层的行为指标去反推上层的策略指标,进而量化设计价值。到这里,我们也就可以在这个系统中,找到对核心指标影响较大的策略指标,他们分别是:注册UV数、站点引流UV数和客户端引流UV数。这三个策略指标对应的产品板块分别是:游客页、详情页和工作台。他们就是设计接下来需要在酷大师众多产品模块中着重发力的项目。

 

2、以系统化的方式来分析用户

说完了产品目标和拆解,我们来看看用户。市场和用研同学往往可以在项目前期给我们输入很多关于用户的数据,在项目初期,我们可以把这些信息抽象成几个有代表性的关键词。下图是酷大师用户关键词,可以帮助我们定制大的设计思路,不过在一些更细的业务场景中,这些信息并不给到更清晰的设计指导。

图片

所以在此基础上,我们可以把这些信息作为一个一个的内容切片,通过不同的标准来重新组织这些切片,进而得到一个相对系统化的用户信息。

我们换一个维度,再做一次梳理分析:

图片

可以看到,当我们把酷大师用户以不同阶段做划分,从新游客到资深用户,不同阶段的用户对于产品的诉求有着明显差异性。游客和新用户更注重价值和需求的匹配;资深用户更注重实际产品价值的最大化。并且我们对于不同的用户群体,需要对应不同的产品策略,甚至不同的“端”来承接用户需求。到这里,我们已经可以通过以上信息,在产品的不同链路里规划不同的设计策略了。

不过有时候需求对标的用户群体比较聚焦,以上信息还是不够说服我们自己的话,还有最后一个技能,就是找到和需求高度对标的用户(注意,是高度对标),和他们深度交流,为他们做用户画像:

图片

(图中为虚拟数据,仅供参考)

 

PS:这里的用户画像需要根据实际的业务需求来针对性的采集信息,这是一个比较灵活的过程,需要设计师拿捏其中的尺寸。

通过以上三个维度的用户数据,我们就可以根据产品的不同模块,找到对标的用户群体,然后为其做对应的设计策略。

接下来就是第三步:

 

3、以系统化的思维规划设计策略

面向资深用户的设计策略(以客户端改造为例):

通过用户访谈和调研结果看,如果用一句话来描述酷大师客户端的用户特点的话,应该是这样的:

图片

基于用户特点和业务诉求,我们再结合服务模型,我们可以一步步推导出我们的设计策略。

图片

(图中为虚拟数据,仅供参考)

 

当设计策略明确后,结合实际的业务需求,接下来就是有的放矢的设计实施过程。

面向新用户的设计策略(以游客页改版为例):

回想我们的生活,最吸引用户眼球的传播方式是什么?思前想后,我觉得是电视直播,因为通过它,自诩谨慎机智的我买了人生第一箱「生发水」…

  • 1、你是否有脱发的烦恼? → 诉求
  • 2、用了一堆产品,却迟迟没有效果? → 顾虑
  • 3、我们有北美硅谷防脱技术+南亚失传生发秘方! → 优势
  • 4、主持人和甲方撕破脸,工厂紧急调货、买一送五!!! → 驱动

事实证明,「生发水」没有白买,因为后来我发现这和酷大师游客页的业务目标几乎一致:“在没有互动的情况下以很短的时间把用户从游客转变为消费者。”

通过前面的用户分析我们可以知道:对于酷大师的游客用户&新用户而言,他们更多关注于产品价值和自己需求的匹配程度。

那么如何在短时间里向用户传达信息,并促成注册转化呢?

我们从诉求->顾虑->驱动三个维度来去组织我们的优势信息。

因此在面向此类用户时,除了对他们介绍酷大师的共性价值外,需要重点介绍酷大师的差异性价值,以及足够有吸引力的驱动利益点。

如下图:

图片

基于上文分析,我们再基于目前产品可提供的能力范围,结合用户反馈,把信息和用户需求做一一对应,然后再给出设计解法。

设计实现:

正所谓:条条大路通罗马,各个小道奔安康。只要设计策略是正确的,那么具体的设计方案就是合理的,篇幅有限,这里就不做展开。

图片

 

4、以系统化的模型验证设计成果

万物皆可度量,设计并不例外。系统是度量设计成果的最好“尺寸”。

怎么度量?还记得最初的指标模型么?

  • 1、通过技术手段监控用户的行为指标:“按钮点击、停留时长、滑动屏数、返回&跳出率…”
  • 2、通过行为指标反推对策略指标的影响。“按钮点击提高 → 页面引流效果提高。”
  • 3、通过AB测试、上线前后变量监测等其他手段,对比出设计在数据上带来的变化。

通过以上方法,我们可以直观的看到设计在整个项目中的贡献。

那么在酷大师项目中,这个成果是多少呢?请看下图:

图片

ps:图中注册转化和老用户登录转化是以设计为唯一变量带来的数据提高

 

以上就是酷大师从0-1过程中的主要思考点,从前期业务拆解分析、用户调研,到制定设计策略,再到设计实施,最后到成果验证。

图片

到这里,我们也基本回答了最开始的问题:我们如何在业务迭代中抓重点,并有的放矢的“集中精力做大事”。

以这样的思路,我们就能以有限的精力,最大程度保证业务的目标的实现,也能对用户的关键路径做有效的体验提升。

 

写在最后

1):设计师不能盲目跟随需求,更不能对需求一视同仁,什么都想做好的结果就是什么都做不好。我们需要有一个自己判断标准。

2):“系统”是一个标准,也是一个视角。他影响着我们对业务、对需求、对用户以及设计的理解。

3):“系统”本身不重要,用“系统”的思维来看待事物很重要。

4):多个视角看到的东西,一定比单视角看到的更全面。

以上内容,和诸位共勉。

 

原文链接:酷家乐用户体验设计(公众号)

作者:沧耳

转载请注明:学UI网》系统化思维如何辅助设计实现

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

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


文章来源:csdn

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

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



日历

链接

个人资料

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

存档