首页

百度APP年轻化-个性装扮之路

资深UI设计者

2022年新建装扮中心整合各类装扮的分发入口。搭建皮肤商城、主页背景商城、头像商城、挂件商城4大装扮基建;高效扩充皮肤、挂件、个人主页封面和头像等个性化装扮资产,受到年轻用户的喜爱,佩戴装扮用户迅速增长数以百万计。

0-1搭建拓装扮资产规模的经验,今日与大家分享。

一 整合升级四大装扮基建,搭建系统装扮能力

拓新装扮场景,提升装扮曝光:百度APP个性化装扮场景已覆盖首页皮肤、个人中心皮肤、个人主页封面、个性化挂件和头像。

我们将百度APP原有的装扮能力整合升级,新建“装扮中心”统一分发,并在个人中心增加了一级入口,为更多的装扮形式与玩法创造更多可能。通过装扮中心、皮肤商城、个人主页背景商城、挂件商城、头像商城“四大装扮基建”支撑百度APP个性化装扮的分发和佩戴操作。

提供易用的装扮佩戴体验,增强装扮展现的吸引力,是装扮基建方向的设计目标。

1. 易用性

我们在全场景提供实时预览能力,装扮预览所见即所得;按装扮类型统一界面布局,降低理解成本。

2. 增强装扮吸引力

2-1 提升装扮展现丰富度:

装扮中心作为装扮聚合展现核心场景,提供套装装扮,界面内融入丰富动效、定义刷新策略持续推荐新内容,增加对装扮运营展现能力。

2-2 串联互通增强可逛性:

各装扮能力之间串联互通,通过分发场景间跳转进行交叉推荐增强装扮吸引力。我们从三条路径上为装扮拓展了分发入口。第一条:装扮功能内的场景,在装扮商城之间增加相关功能跳转、在皮肤和套装的预览页底部拓展更多推荐入口。第二条:在用户的非装扮使用路径上拓展入口,如在头像预览页、个人主页背景预览页引导用户设置头像和个人主页背景。第三条:以非常驻的弹窗形式,推荐装扮活动,吸引用户体验装扮功能。

2-3 丰富装扮玩法:

a. 限时免费装扮:精品套装装扮包括动态皮肤、动态头像、挂件、个人主页封面,支持一键佩戴四项个性化装扮,是百度APP的付费装扮功能。我们探索限时开放给用户免费使用玩法,效果超预期,收获了一大波装扮新用户。

b. 结合任务活动:将“佩戴装扮”作为运营任务,帮助用户获取任务金币,也把热门装扮作为任务奖励。

c. 与大型运营活动结合:与世界杯大型运营活动结合,设计度晓晓世界杯16强球队套装皮肤,通过限免使用,提升装扮渗透。

二 持续扩充皮肤/挂件/个人主页封面/头像等个性化装扮资产

装扮资产扩规模,重点考量通过提升设计质量增加装扮吸引力和快速扩规模的效能如何提升。

1. 精细化打磨,打造百度APP装扮套装

1-1 表现手法-本能层:

深入研究画面风格,在年轻化现代审美指导下,选择偏东方的设计风格,如国风、二次元风格等,因为这类风格多用图形、线条、颜色来处理空间关系,画面不会过于厚重,既迎合年轻用户喜好,又不过多打扰APP内容区域阅读消费。

举例:七月中元节的装扮设计中,整体配色偏暗、低饱和度的深紫色、偏灰的蓝色,可以传达出静谧、神秘的氛围。在色彩构图中没有用过多的色彩搭配,使用高明度差来刻画画面结构,因为明度反差处于人视觉的最底层。如果能用黑白反差区分层次,会首选黑白。在周围环境色中使用偏灰的蓝、紫色,并且与人身上的暖色对比,让人物更加突出。而在画面元素的刻画上增加飘带、鱼尾的流动感,这种带有东方感的元素,这种留白、平衡构图和侠气感,也有很强的东方特征,同时通过厚涂风格中常用的使用饱和度差异、大透视效果营造场景的空间感,增加画面的细腻程度。

1-2 内容-行为层:

在装扮具体的内容绘制中融入共情元素,吸引用户注意。比如结合节日、大事件推送套装,并在绘制中增加洛丽塔、国风、JK等年轻用户感兴趣的元素。

1-3 内涵-反思层:

通过积极情绪引导、激发思考,让用户感到心之向往或心生愉悦,可使用神情、动作、装饰花的花语等多种手段进行情绪暗示。

2 单品扩量,保证各类装扮的更新频率

与套装制作不同,单品的更新需要更加短、频、快,需要更加直接解决Z世代用户痛点。

2-1 协助用户搭建社交符号:

头像,作为用户在网络世界身份的象征,我们从横向团队项目中大量引入能代表身份状态、游戏爱好等方面的资源,快速补充头像单品资源库,我们也根据用户调研了解到有76%用户愿意和朋友使用“闺蜜/情侣头像”,我们在头像库中上线情侣头像,并将完善“头像分享卡”等功能形成体验闭环。

2-2 帮助用户表达自我:

百度APP头像挂件和游戏、社交、直播场景中的头像框不同,并不为了彰显关系、体现出社交关系中的尊贵感,百度APP用户更希望借助头像挂件来表达观点,为自己的主张、个性贴标签。

2-3 结合用户兴趣引起关注和共鸣:

在罗盘大数据中,我们发现,王者荣耀、和平精英、元神等游戏中,25岁以下年轻用户的占比都非常大,并且都愿意花钱购买皮肤装扮。二次元的游戏、动漫内容不仅仅受Z世代喜爱,且Z世代的渗透率最为突出。各大手游设计中也在不断的融入二次元元素,我们借力百度AI画图技术-文心大模型快速补充了二次元、游戏等风格方向的装扮。

三 建立规范平台,提物料输出效率

为了展现更好的效果、适配更多的装扮场景,且兼顾历史与开发成本等原因,装扮物料规则复杂,且种类繁多。《百度APP装扮体系设计规范平台》应运而生,它涵盖 5 项装扮能力、2项运营能力;每项能力均配有一键预览及导出物料模板。随功能迭代及时更新,保障了装扮物料的高效输出。

结语

目前百度APP装扮已经完成了第一阶段的建设,沉淀出一批受用户喜欢的装扮资产,未来我们也将不断探索、创新更多装扮玩法,未来也将探索出共创平台,成为一个装扮生态。


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTUyMTA3Ng==.html
来源:站酷

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


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


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

。                           

4万字B端产品拆解丨从0到1拆解小鹅通后台设计(三)

资深UI设计者

通过前面两篇的拆解,小鹅通的后台功能内容已经拆解过半,接下来我们来看看「数据统计」和「用户运营」这两个部分的内容,它对商家的运营来说,真是如虎添翼,让我真正感受到一款SaaS产品对商家的运营价值。





5. 数据统计


当我的店铺开始运营起来以后,我最关心的就是店铺的数据统计分析了,因为我需要了解每天有多少新用户来访问,又成交了多少个订单,其次我还需要精准的数据分析来为我的运营提供支持。
5.1 概况
「概况」其实是小鹅通的后台默认首页,通过这个页面,商家可以第一时间查看整个店铺经营的状况。




5.1.1 实时概况
「实时概况」提供店铺的每日最新的实时数据,在这个栏目可以看到今日店铺访客数、今日新增用户数、今日支付金额、今日订单数、待付款订单、待发货订单等数据。这对运营者来说,打开后台就能第一时间查收到店铺当日的实时数据。




5.1.2 最近内容
「最近内容」展示店铺最近更新内容的数据,比如浏览量、订阅量和学习人数。不过这个栏目的设计让我陷入焦虑,我不太明白这个栏目内容排序是按照商家最近更新的商品排列,还是按最新有订阅和学习人数的商品排列,官方也没有给出详细的说明。




5.1.3 平台动态
在这个版块,商家可以获取小鹅通最新的平台动态、资讯、新功能预告和热门话题。在小鹅通的知识生态池里,店铺不是一座座孤岛,而是可以通过小鹅通的链接,可以一起学习交流知识付费的获客、激活、变现、推广的方法。这也是一个SaaS软件最大的魅力,用科技设计工具,用工具帮助企业成功。




5.2 交易
「交易」汇总了商家知识店铺的所有订单交易,在这个版块,商家可以查询整个店铺的交易数据,其次还提供了订单工具、售后管理和资产管理的功能。
5.2.1 订单管理
5.2.1.1 全部订单
①「全部订单」主要为商家提供店铺产生的订单的查询统计,这个栏目主要包含两个内容,头部是检索(包含了交易单号、订单时间、商品类型、核销状态、支付方式等多种检索条件),底部是订单列表(包含待付款、待成交、待发货、已发货、已完成、已关闭、售后中和待核销8个状态)。




②「订单详情」包含订单信息、支付信息、买家信息、发票信息和商品信息,可以查询订单号、订单类型、下单时间、支付时间、支付方式、渠道来源、买家信息等数据。可以看出,功能越多,订单详情的字段就越复杂。




迭代建议
订单的检索框占据了屏幕的一大半,虽然设计了「收起」功能,但却不是默认,这影响了商家的操作体验。其次订单列表的设计排版略显混乱,字段太多,订单与订单之间的层级没拉开,有视觉干扰。
5.2.1.2 评价管理
「评价管理」主要为商家提供用户评价的查询和管理,当用户购买商品发表评论以后,商家可以在这个栏目进行审核、回复、删除以及设为精选。




5.2.2 物流管理
「物流管理」主要针对实物商品,包含「批量发货」和「配送管理」两个栏目。在配送管理,可以设置商家的运费模版、到店自提信息和发货地址等信息,商家可结合自己的实际情况进行操作。




5.2.3 订单工具
5.2.3.1 核销工具
「核销工具」可以查询到店自提、服务类商品的核销码,还可以查询店铺的核销记录。




5.2.3.2 电子合同
「电子合同」是一个第三方工具,由「法大大」提供。它可以帮助商家解决高价知识商品学员不敢下单,纸质合同效率低、成本高等痛点,通过在线合同签约,快速完成签约,降低客户流失率。(这个功能需要开通旗舰版,并进行企业认证才能试用)
5.2.4 售后管理
「售后管理」包含「售后维权」和「批量退款」,主要为商家提供用户退款申请的查询和管理。




5.2.5 资产管理
5.2.5.1 支付设置
「支付设置」包含收款设置和付款设置,商家可以选择绑定自己的微信支付、支付宝和抖音小程序的支付账户,绑定后,店铺才能正常收款。




5.2.5.2 账户管理
「账户管理」为商家提供对收款账户管理、更改和查询的功能,如果商家需要更改收款账户,从这个栏目就能进行操作。




5.2.5.3 交易管理
「交易管理」可查看商家店铺的所有订单交易明细,包括待结算、交易成功、交易关闭和退款的交易记录,在「交易账单」,还可以按月、按季度查看汇总。




5.2.5.4 分账管理
「分账管理」包含「线上分账」和「线下付款」两个栏目。在「线上分账」可以查询到店铺商品通过推广分销的分账记录;「线下付款」包含应付账单、提现申请和付款记录三个内容,这个栏目主要处理分销商的提现申请。




5.2.5.5 提现管理
商家开通知识店铺以后,用户支付的费用是支付到小鹅通官方,商家需要在这个版块发起提现申请才能到账。小鹅通也支持用户自动提现到账功能,商家开通后,账户余额自动打款到商家账户。




5.2.5.6 体验小结
「资产管理」这个版块,对于新手商家来说,学习成本太高了,特别是分账管理和提现管理这两个功能,就像是一场体验灾难。我找了系统客服才弄清楚「分账管理」的「提现申请」是针对C端的佣金提现申请(在订货商-业绩管理栏目,并没有提现申请审核功能,所以我一度认为这是订货商的提现申请管理),这花费了我的很多时间。其次我也没弄懂「提现管理」这个功能,我一直以为店铺交易的金额都是自动进入我的账户,后面才发现需要在这个栏目像平台发起申请才能收到费用,这个版块的功能语义给新手商家造成了太高的学习成本。
5.3 数据
数据是支撑商家运营最重要的指标,通过对店铺及用户的数据分析,可以为商家提供准确的运营策略参考。
5.3.1 数据概况
「数据概况」包含实时概况、核心指标、流量看板、转化看板、商品看板和用户看板7个内容,是对整个店铺数据的实时监控和概览,包括监控访问和订单等核心指标的当天实时情况和近期趋势,并通过流量、转化、商品、用户,四个看板的核心指标反映店铺昨日运营状况。




5.3.2 流量分析
「流量分析」包含了「流量趋势」和「流量分布」,提供了每日访客数、访问量等流量指标及其趋势,并支持查看流量的终端系统、渠道和地域分布情况。这个功能可以帮助商家监控店铺每天的访问规模及变化情况,通过流量的终端系统、渠道、地域分布了解流量的主要来源。




5.3.3 交易分析
「交易分析」包含「交易概况」和「交易构成」,提供了与店铺交易相关的访问、下单、支付转化及各个环节的转化率,并支持查看新老付费用户的占比构成、订单金额的分布情况等。这个功能可以帮助商家分析访客从进入店铺到最终成交各步骤的转化率,定位用户转化路径中的主要流失环节,并对比交易核心指标的趋势,评估运营措施是否有效。




5.3.4 商品分析
「商品分析」包含了「商品概况」和「商品效果」,这个栏目统计了店铺的所有商品销售数据,根据商品的访客和支付进行排行,为商家提供一个全面的商品数据概览。其次还支持对商品进行「单品分析」,从销售、流量和客群三个角度全面统计,为商家精细化运营提供策略建议、数据依据。




5.3.5 直播分析
5.3.5.1 全店概况
「全店概况」可以查看商家所有的直播数据,包括近期直播、直播趋势,系统还根据流量、观看人数和市场为商家生成红榜(人数多、人气火爆)和黑榜(流量和关注人数低),帮助商家找到直播效果优秀与表现欠佳的直播。




5.3.5.2 直播效果
「直播效果」是针对每一场直播的详细的数据统计,比如直播间浏览量、访客数、最高在线人数等,其次还有两个非常强大的功能——实时大屏和单场分析。




5.3.5.3 实时大屏
「实时大屏」就是系统可以根据直播间的数据实时生成数据可视化大屏,实时展示直播人气、观众、带货等数据,满足多场景数据展示需求,提升直播效率,这个功能可以应用到大促活动、品牌宣传等场景(此功能仅支持旗舰版使用)。
5.3.5.4 单场分析
「单场分析」包含数据概览、实时趋势、观众画像、评论分析和带货分析,通过实时数据、用户画像、评论词云分析、带货分析等分析能力,对单场直播进行深度诊断,帮助提升直播效率。这个功能对于商家对单场直播的复盘总结有非常大的帮助(此功能仅支持旗舰版使用)。
5.3.6 用户分析
「用户分析」包含用户概况及趋势和付费用户,帮助商家了解店铺用户的增长、活跃及转化情况,及时调整用户运营策略。




5.3.7 学习分析
「学习分析」包含学习概况及趋势、学习详情和学员排行三个内容,帮助商家了解学员学习的真实数据,比如学习人数、课程完课率、学习时段分布,从而为课程内容的优化提供数据参考。




5.3.8 下载中心
「下载中心」主要是帮助商家管理台文件导出的统一管理和成功率监控,实现下载的文件可追溯、下载记录可查询,同时优化查询和搜索体验,实现下载管理的权限控制,避免重要数据外泄。




设计思考
最初我对这个功能不理解,感觉很鸡肋。不过查看了官方的「帮助文档」以后,我才发现这个功能为商家的运营安全性考虑得很周到。这让我联想到银行的企业对公系统也有类似的「下载中心」,当用户申请电子回单后,用户需要跳转到下载中心才能下载。这样的路径跳转看上去繁琐,但事实上是为了实现下载的文件可追溯和下载记录可查询,避免重要数据泄露。
5.3.9 体验小结
小鹅通的「数据分析」几乎覆盖了商家从引流、激活、变现到留存的所有阶段,不仅有对店铺流量、交易这样宏观的数据分析,还有对商品、直播这样的单品和单场微观分析,这些精准、全面、真实的店铺数据,帮助商家可以不断优化调整运营方案,获取成功。


6. 用户运营


对用户的研究和运营是一个知识店铺的重中之重,只有对用户有了充足的了解才能知道用户到底需要什么,从而不断调整优化运营方案。
6.1 用户
「用户」这个版块,主要为商家提供一个清晰直的运营助手,通过这个版块,可以为我的用户打标签、制定运营计划等,让我对他们的学习行为数据全面了解。
6.1.1 用户概况
「用户概况」是对店铺用户的统计概览,可以查看店铺实时用户数据(包含累计用户、今日新增用户等),其次还有店铺重点运营人群的数据统计,比如企微用户、超级会员等。




6.1.2 用户管理
6.1.2.1 用户列表
「用户列表」包含「全部用户」和「用户学习统计」两个内容。在用户列表,商家可以查看店铺用户的详细数据,比如用户来源渠道、账户绑定手机号(还有一个最近采集手机号,以防用户更换手机号码)、消费次数、消费总额等,其次还可以直接联系用户(支持店铺消息和发短信)、给用户贴标签、增减积分和设置黑名单(禁止评论、购买和访问)。




6.1.2.1.1 用户详情页
每一个用户都有详情页,「用户详情页」包含了用户资料、用户标签、超级会员权益、用户资产(包含积分、优惠券数量、兑换码数量等)和行为统计(包含学习数据、课程进度、用户评论和订单记录等)。通过对用户多维度的数据统计,可以帮助商家对用户有更全面的了解,从而可以对用户进行分类,推出更精准的商品服务。




6.1.2.1.2 用户学习统计
「用户学习统计」包含汇总数据、课程数据和考试数据。「汇总数据」是「课程数据」和「考试数据」的数据汇总,可以查看用户的累计学习时长、累计学习天数、提交考试、提交作业的信息,这个功能可以帮助商家了解用户真实的学习情况,从而进行课程优化调整。




6.1.2.2 标签管理
「标签」可以帮助商家快速定位目标用户,并依据标签进行定向运营,从而提高运营效率。小鹅通的标签分为两种形式,一种是「手动标签」,输入关键词就可以自动生成;另一种是「自动标签」,可以通过设置用户行为和学习行为的条件,当符合条件的用户出现时自动生成。
①「用户行为」是根据用户在店铺的消费行为来设置,包含注册时长、最近访问商品(可选择用户访问的指定商品)、收藏商品、下单商品、购买商品、消费总额和消费次数7种类型;




②「学习行为」是根据用户的课程学习行为来设置,包含累计学习时长、打卡次数、完成的课程、加入的打卡、提交的考试、提交的作业和加入的社群7种类型;




③自动标签的生效规则支持满足任一条件生效和满足全部条件同时生效,非常灵活。
设计思考
「自动标签」这个功能的设计实在是太赞了,不仅可以根据「用户行为」和「学习行为」的14种类型进行设置,还可以根据这些用户行为进行组合生成不同的标签。比如你想快速判断哪些用户是你的忠诚用户,你可以建立一个「忠实用户」的标签,然后设置「消费总额」超过1000元和「累计学习时长」超过10小时这两个行为,当用户满足这两个条件以后,系统就会为他自动生成「忠实用户」的标签。
6.1.3 用户运营
6.1.3.1 用户分群
「用户分群」和「自动标签」有点相似,通过设置用户行为和学习行为,把用户进行快速分组。这样的好处是方便商家对不同的用户人群进行定向运营。
①「新建人群」和「自动标签」一样,需要设置用户行为和学习行为,相比「自动标签」,「新建人群」的用户行为更多,包含了15种类型,内容更丰富。
②当「用户人群」建立以后,商家可以查看人群分析、导出数据以及定向开展运营活动。




6.1.3.2 运营计划
「运营计划」是一个以提高商家运营效率和效果为目标的工具,商家可以针对指定的人群发放权益和活动通知,用高频的外部触发来实现活动目的。官方设计了五种智能运营,对应了五种不同的场景,比如流失客户召回,主要针对那些在店铺有过消费但30天未回放过店铺的用户。
6.1.3.2.1 新建计划
①「新建计划」包含三个内容,在基本信息,商家可以选择目标人群,然后选择计划方式,包含长期计划(商家可选择起始时间,系统会在这个时间段内向用户发送营销通知)和定时计划(在商家设定的时间内进行营销通知)。
②在「权益礼包」,商家可以选择运营计划赠送给用户的权益,可选择优惠券、超级会员和积分。
③在「通知设置」,商家可选择向用户发送营销通知的形式,比如发短信、发送店铺信息、企业微信发送等。




6.1.3.2.2 智能运营
「智能运营」是小鹅通官方给商家设计的五个场景,分别是兴趣转换(激活7天内未付款订单)、新客复购(促进成交过1次的客户在30天内复购)、维系高活跃用户(对近7天访问商铺的用户进行维护)、流失客户召回(召回在店铺有过消费记录但已经30天未访问店铺的用户)和激励喜好用户(对收藏过店铺商品的用户进行激励)。这五个场景,可以极大降低商家的学习成本,一键开启运营计划。




6.1.3.2.3 数据分析
在运营计划开启后,商家可以通过「数据」查看计划的详细数据。从覆盖人到付款人数,通过转化漏斗,多维度向商家统计出各步骤的转化率,帮助商家可以灵活调整计划,实现运营目标。




6.1.3.3 超级会员
「超级会员」可以简单理解为店铺的VIP会员,商家可以建立不同的会员规格,以商品的形式进行售卖,比如季度会员、半年会员和年费会员等。这个功能不仅是商家的用户运营利器,还可以提高忠实用户客户量、留存率和活跃度。
6.1.3.3.1 添加会员卡
会员卡的添加包含基本信息、会员权益、展示设置和会员说明四个部分。通过可视化的设计,用户可以实时预览「超级会员」的页面效果,体验非常好。
①在「基本信息」,可以设置会员卡的规格,比如1个月、3个月、6个月的有效期,还可以限定用户购买的次数;
②在「会员权益」,可以设置会员卡的折扣权益(支持指定特定商品)、免费权益(支持对图文、音频等栏目统一设置)以及和优惠券、优惠码进行权益叠加;
③在「展示设置」,可设置会员卡的界面风格,支持自定义上传,还可以加入权益商品的展示。




细节侦查
小鹅通这个产品,几乎所有核心页面都支持商家自定义配置,几乎是傻瓜式的操作,虽然牺牲了一些个性化的设计,但极大降低商家的运营成本。
6.1.3.3.2 会员卡详情页
会员卡建立以后,可以从会员卡列表进入会员卡详情页。「会员卡详情页」包含了会员列表、数据分析和运营设置三个内容。
①在「会员列表」,可以查看购买超级会员的用户详细信息,可以给用户贴标签、延长有效期等;
②在「数据分析」,可查看超级会员详细的用户数据,比如累计会员数、新增会员数、用户转化漏斗、会员地域分布等数据,通过多维度的数据分析帮助商家提升运营效率;
③在「运营设置」,可以对用户的信息进行采集(调用店铺的信息采集微页面)、CRM分配和私域引流的设置,帮助商家获取新用户的信息,拉新转化。




6.1.3.3.3 全局设置
「全局设置」是为商家提供对「超级会员」统一设置的功能,,比如是否支持换购其他会员卡、是否支持用户分享获益等。




设计思考
「超级会员」是一个非常好的营销工具,它可以满足商家按月、按年的收费场景,相较于单个课程一次性的买卖,「超级会员」更适合打造高质量内容知识店铺,也能帮助商家拓展一批忠实付费会员。
6.1.3.4 积分商城
「积分商城」是一个非常基础的营销功能,作为用户留存的重要手段,小鹅通的「积分商城」以消费、任务两种积分发放方式,抵现、兑换两种消耗方式,构建起了基础的积分体系,帮助商家维系存量用户,提高店铺的用户留存率。




6.1.3.4.1 积分发放
①「积分发放」包含「消费发放积分」和「任务发放积分」两种类型。「消费发放积分」是指商家可以设置用户在店铺的消费任务奖励积分,有效刺激用户消费,这个功能支持商家自定义配置,非常灵活。




②「任务发放积分」包含基础任务(绑定手机号、完善个人信息)、学习任务(可设置学习时长等)和助学任务(连续打卡奖励等),用户完成对应任务后可获取积分,有效提高用户留存率和活跃度。美中不足的是,这个功能不支持自定义配置,灵活性较低。




6.1.3.4.2 积分消耗
①「积分消耗」包含「积分抵现」和「积分兑换」两个功能。「积分抵现」是指用户在购买指定商品时候,商家可以自行设定积分抵扣的比例,从而刺激用户消费。
②「积分兑换」是指用户可以通过积分兑换指定的商品,这是一种常见的会员权益。




6.1.3.4.3 用户列表
「用户列表」主要提供查询店铺用户使用积分的情况,比如给用户增减积分、查询积分明细等等。




6.1.3.4.4 通用规则
「通用规则」为运营者提供积分规则的设置,比如积分有效期、积分冻结期,其次还支持手动设置积分规则的页面内容。




6.1.3.4 信息采集
「信息采集」是一个非常灵活的用户信息采集工具,通过自定义配置(包括手机号、微信号、姓名、联系方式等字段),可以帮助商家在店铺的运营中有效搜集用户的资料,清晰刻画用户画像,搭建思域流量池。其次「信息采集」作为一个公共组件,关联了很多使用场景,比如超级会员、拼团等,它就像一个微页面一样,商家可在指定功能版块进行灵活配置。
6.1.3.4.1 新建流程
①「信息采集」包含三个步骤,第一步是「编辑表单」。商家可根据自己的需要拖曳左侧的组件库(包含联系人组件和基础组件两个分类,比如姓名、年龄、公司、证件号、电话号码、生日、行业等)。
②第二步是「采集设置」,可以填写采集表的引导信息(包含标题和提示文字),可以开启重复采集(若信息关联多个场景,支持用户单独填写,商家无需重复建立)和独立采集。
③第三步是「选择采集场景」,包含指定商品购买、优惠券领取、活动打卡等,这一步非必选项,商家可结合店铺运营实际操作。




迭代建议
「信息采集」这个采集工具真的非常方便,可以帮助商家高效地搜集精准用户信息,从而提升运营效率。不过「信息采集」的用户数据只支持导出到本地,而不像其他栏目有详情页和数据分析,这降低了信息采集的效率,效果大打折扣。
6.1.4 消息互动
「消息互动」是指商家可以为用户发送消息通知,用户也可以通过这个功能向商家提供反馈。「消息互动」包括「消息列表」、「用户反馈」以及「评论管理」三个模块,通过这个功能,可以让商家统一管理与操作店铺消息,及时掌握学员的最新情况,通过反馈及时调整产品策略。




迭代建议
在新建「消息推送」的模块,“发送人”的语义不够准确,这会让商家对这个字段搞混淆,不知道这个表格填入什么信息。其次也缺少了推送给指定用户组,不够完善。
6.1.5 体验小结
作为一个知识付费的从业者,在体验完「用户」这个版块以后,几乎放弃了传统模式定制开发的念头。「自动标签」的设计,让我大开眼见,原来小鹅通的系统可以根据用户的行为来生成标签,这可以让你快速知道哪些用户才是愿意为你的知识付费的重视人群。「运营计划」这个功能设计得太好了,官方不仅提供了五个常见的运营场景帮助商家提升运营效率,而且傻瓜式的权益配置极大降低了商家的学习成本。「超级会员」更是完善了知识付费的其他场景,比如按月收费、年费会员等。
6.2 圈子
「圈子」就像一个知识星球(一款社群工具),主要为商家提供一个老师和学员进行日常活动交流和高质量内容沉淀的社区工具。「圈子」的功能非常丰富,支持设置群主、成员管理、发布及精选图文动态、置顶群公告等功能,其次还支持在圈子内添加学习任务,满足训练营场景,学员可直接在圈子内学习课程、交流与互动,最终帮助商家打造一个高品质的学习型社群,提高学员的忠诚度和留存率。




6.2.1 创建圈子
「圈子」的创建比较简单,填入基本信息以后,需要在「售卖设置」选择入圈方式,支持免费、付费模型,还可以关联专栏、超级会员和设置入圈截止时间,「圈子」就创建成功。




6.2.2 圈子详情页
「圈子」创建成功以后,在列表页可以对「圈子」进行管理操作,包括管理、编辑、分享、删除和转让圈主等功能。


6.2.2.1 内容管理
「内容管理」是针对圈子发布内容的管理,包含动态列表、待回答和圈子标签三个栏目。管理员在这个页面发布圈子动态,对圈子发布的动态进行审核、编辑、删除和加精。




6.2.2.2 售卖设置
「售卖设置」是指对圈子的加入方式进行编辑,支持付费和免费两种模式,但付费方式仅支持从“免费”改成“付费”,其他功能和「圈子」新建无区别。




6.2.2.3 应用管理
「应用管理」包含三种应用类型,课程、日历打卡和商品橱窗。这三个应用其实对应「圈子」前端的一级栏目,添加以后学员在圈子首页就能访问,帮助商家提升付费转化和用户活跃度。




6.2.2.4 运营设置
「运营设置」包含信息采集、CRM分配、续费通知、私域引流和圈子展示五个栏目,主要帮助商家结合其他营销工具提升用户的运营效率,比如可以开通「信息采集」工具,高效精准搜集用户的信息,还有CRM线索分配,可以把潜在用户分配给其他员工。




6.2.2.5 激励设置
「激励设置」为商家提供了「成长任务」和「勋章」两个营销工具。在「成长任务」,商家可以针对用户的互动、课程学习以及打卡设计排行榜,比如发帖数、评论数、分享等;商家开启「勋章」以后,可以建立「圈子」的勋章体系,不仅可以对活跃用户进行奖励,还能有效刺激用户参与度,最终提升用户的活跃度。




6.2.2.6 成员管理
「成员管理」是对加入圈子用户的统一管理,可以查看用户的详情页,了解用户的详细信息和活跃度;可以给用户贴标签,锁定精准用户;还可以给用户延长有效期、加入黑名单和移除圈子。




6.2.2.7 数据分析
「数据分析」包括交易数据、活跃数据、学习数据和打卡数据这四个维度,在这个栏目可以查看到圈子所有的数据信息,比如累计支付金额、今日加入成员、课程学习完成率、任务完成率等,有效帮助商家提升圈子的运营效率,及时调整运营方案。




6.2.3 体验小结
如同前面的比喻,「圈子」就像一个知识星球,为商家提供了一个功能强大的社群工具,帮助商家打造一个高品质的学习型社群。和「知识星球」相比,「圈子」更能帮助商家提升付费转化率,比如商家可以通过「应用管理」就可以添加商品和课程,从而提升付费商品的曝光度。再加上CRM分配、私域引流等工具,「圈子」可以通过用户的日常行为数据帮助商家获取用户的付费意愿、偏好和消费能力,提升店铺的业绩。



感谢阅读,小鹅通产品拆解的第三部分就到这里,下一篇是小鹅通后台拆解的最后一篇,我们将会拆解企微CRM这个核心功能以及对小鹅通的后台设计进行总结。



作者:设计大侦探
链接:https://www.zcool.com.cn/article/ZMTUyMzU0MA==.html
来源:站酷

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


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


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

工作总结- B端项目的色彩系统制定

博博

B端项目一般用到的颜色会很丰富,再带上数据可视化场景,那需要的颜色需求就会更多。像Ant design色彩体系包含12个主色以及衍生色:



Material design色彩体系包含16个主色以及衍生色:



那这种即能满足多种不同场景的同时色彩搭配在一起又很协调的色彩体系,是如何科学搭建的呢?

(一) 颜色分类和数量

1.1 颜色分类

从各大厂的色彩规范中,可以总结将色彩划分为4种类型:



主色(品牌色)

常用于主按钮、文字高亮、重要信息高亮等场景~

中性色

常用于文字、图标、卡片背景色、分割线、边框之类的~用于处理页面信息主次关系,助力阅读体验~

功能色(语义色)

功能色代表了明确的信息以及状态(比如成功一般用绿色,出错失败一般用红色,提醒一般用橙色/黄色,链接一般用蓝色~)

扩展色

常用于更多颜色需求场景,比如Dashboard页面的图表(数据可视化)、插画配图等

1.2 颜色数量

通常会制定8色板、12色板、16色板。比如Ant design的色彩系统是制定了12个色板,Atlassian design是制定了8个基础色板(可以衍生16或者24色板),Material design色彩体系是制定了16个色板~



(二) 色彩空间

在创建之前,我们先了解一下HCT / HSL / HSB 色彩空间

这些色彩空间的区别,想要了解的可以到网上查找一些专业知识~我们这里只针对项目中使用哪一种色彩空间能够为设计师调色带来便捷性出发。



2.1 HSL/HSB



H-色相/色调

是色彩的基本属性,就是平常所说的颜色名称(如红色、黄色)等,取值在0—360度之间(黑色与白色无色相);


S-表示饱和度/纯度

颜色的纯度,取值在0—100之间,饱和度高色彩较艳丽。饱和度低色彩就接近灰色;

B/L-表示明度

颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到纯白,最低得到纯黑。

Ant design设计团队使用的是HSB颜色模型进行设计,认为设计师在调整颜色时更容易对颜色有明确的心里期望,并促进团队沟通。

2.2 感官亮度统一的HCT

HCT是Google研制的色彩空间~



H-Hue色相

取值在0-360之间;

C-Chroma色度

可以理解为色彩浓度,取值在0-100之间,数值越大,颜色浓度越浓;

T-Tone光度

也就是亮度,取值在0-100之间,数值越大,颜色越亮。

*个人认为无论采用哪一种色彩空间,只要真正能够帮助到我们运用在项目中,都是可以滴

(三) 开始创建

3.1 品牌色/主色

品牌色是体现产品特性和传播理念最直观的视觉元素之一,常用于主按钮、文字高亮、重要信息高亮等场景~

确定产品主色的思路有以下几种:



了解业务属性

属于哪一个行业、产品的定位是什么、目标受众群体,想给用户传达怎样的视觉感觉;

竞品分析

了解同业务属性的产品一般用的哪些颜色,从而获得灵感;

满足WCAG2.0标准

文本的视觉呈现以及文本图像至少要有1:4.5的对比度,以确保所有的文字内容清晰易读,对比度足够。工具网址:Color review https://color.review

从B端领域里面一些国内国外大厂的设计规范中,我分别将主色在亮暗模式背景下进行可读性测试,学习到以下内容:



1. 亮暗模式下可以选取不同颜色做为主色,但亮暗模式的两个主色是在同一个色板的衍生色上;比如国内的TDesign,国外的Shopify\Atlassian\Salesforce色值不同;一般情况下会选用一样的主色在亮暗模式下;

2. Shopify\Atlassian\Microsoft无论在白色背景还是黑色背景上,都满足WCAG2.0的标准。剩下的要么在白色背景上不满足,要么在黑色背景上不满足。(当然这些都只是作为难捏不准主色时的一个参考,并不是规则~)

我负责的一款海外产品,主要是对服务器、数据库监控分析的工具,客户选定的主色是蓝色系,他们很喜欢datadog这个产品,我发现该产品的主色在HSB模式下,S色彩浓度高 B明度值76视觉上偏灰,加上客户产品的logo主色H值是偏紫色调,所以最终确定在亮模式下用#0756D5为主色(亮暗模式的选择,我打算采用Shopify\Atlassian\Salesforce的方法,暗模式下用主色的衍生色~)



3.2 功能色(辅助色)

功能色可以用于特定功能、状态反馈、应用图标、dashboard数据表盘等场景,最常用到的反馈的成功、失败、警告状态~

结合参看其他优秀的文章,加上我自己的一些实践思考,方法汇总如下:

1.以主色色相为基础,差值15°,围绕360°色环取24色~另外大家都知道相差15°的颜色为邻近色,那我们提取出来的任何两个相邻的颜色都是邻近色,我们拆分出来的色彩是比较和谐的~



以我负责的海外项目为例~



2.根据自身产品系统的复杂度,在24色板上去掉接近的颜色,筛选出一定说的颜色。前面也有提到一般是8、12、16色板。我负责的项目选择是10个色板~



3. 色彩校正

HSB色彩空间最大的弊端就在于相同 Saturation(饱和度) 和 Value(亮度)的色彩,在不同的 Hue (色相)上的亮度感知是完全不一样的,其原因是 HSV/HSL 色彩空间是应用于数字化图像处理领域,为了方便机器理解、计算、呈现而设计,是人类视觉的线性模型,但人类的感知却是非线性的,所以造成数值与感知不匹配的问题

市面上的校准方式一般是在颜色上面叠加纯黑色图层,图层模式选择色相,就可以直观地看到无彩色视觉感官明度~具体怎么调,是不是就按照这个方式全部都要调成统一的感官明度?我去研究了Apple/Material design/Ant design的色板,从里面选取统一编号的颜色,发现如下:



他们的色彩明度并不是完全一致的,一般是橙色、黄色这些带有语义的颜色明度会亮一些~所以色彩校正不能完全调成一样的感官明度,只能作为一个辅助。



3.3衍生色

为了满足界面对色彩的需求,需要对主色和辅助色进行色板延伸,建立不同梯度的调色板。常用的有2种方法:

第一类:手动调整

1.浅色调色板,在颜色上有序叠加( 比如20%、40%、60%、80%、90%)不透明度的白色#ffffff;深色调色板,在颜色上有序叠加 (比如20%、40%、60%、80%)不透明度的黑色#000000。(数值并不是固定的,设计师可按需自行调整~)

2.浅色调色板,色相(H)往感光明度高的色相依次差值 2,饱和度(S)依次减少 15,明度(B)依次增加 5;深色调色板,色相(H)往感光明度低的色相依次差值 2,明度(B)依次减少 15,饱和度(S)依次增加 5。(Ant Design 和 Material Design 调色板也都加了色相旋转)



第二类:使用色板生成工具(走捷径)

1.Material Design

https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors



2. Ant Design

https://ant.design/docs/spec/colors



3. ColorBoX

https://colorbox.io



4.figma插件Supa Palette(收费)



3.4中性色

中性色包含了黑、白、灰,是页面中文字、背景常用的颜色,为产品界面创造结构、表达边界、建立信息层次,保持舒适的对比度是提高可读性和吸引用户注意力的关键。

最熟悉的常见文字颜色就是#333,#666,#999,我喜欢直接拿Material design的灰色色板来用,同时还会拓展蓝灰色板(在确定好灰色色板后,在上面叠加主色的不透明度即可生成蓝灰色色板~)应用于图标、背景、描边。



最后,得出所有颜色的同色系色阶:



(四)应用

从色板里面挑选亮模式下主色为Primary600,暗模式下主色为Primary400,实际效果图如下:



dashboard数据可视化页面的配色方案我是如何实践的呢?

结合AntV数据可视化色彩体系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/

汇总如下:

根据不同数据类型、使用场景扩展出 6 种可视化色板类型

1. 分类色板

适用于描述不同类别的数据,比如饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等

  • 采用不同色相来作区分,同时要求色相之间具有高辨识度、高区分度
  • 在选择色相时,建议跨越全色环均匀选取,并对不同的色相赋予明暗差异化,能获得更好的提高色彩辨识度,以及确保色盲读者能有良好的观感体验
  • 色相太少区分度不够,选取太多色相又容易使得图表眼花缭乱。根据调查研究,制定8~9种不同颜色进行可视化配色,能较大限度地提高色彩的区分度
  • 当出现极限值情景,即当数据类别数量超出可选配色范围时,可通过基础色相拓展色阶及增加明暗差异的方式来循环使用配色;或者可考虑将较少数值的类别统归为“其他”一类

2. 顺序色板

适用于表示数据样本中数值或梯度的变化,如排行榜等级变化、风险等级变化等

  • 通常使用同色相不同明度、饱和度来建立调色板,要求颜色在色环上分布均匀且跨度大
  • 同一类别应使用同一色相
  • 为了使用户理解不同类别间的差异,连续色板的不同色相必须相邻衔接,而非分散展示
  • 可通过颜色的深浅来表示数据大小,如浅色表示数值小的数据,深色表示数值大的数据

3.发散色板

适用于描述数据正负值的变化,中间一般会有一个中间值(通常为0),比如气温的冷热、海拔高低、股票涨跌等

  • 常采用两个连续的色板,由一种颜色变浅再过渡到另外一种对立色的组合,同样要求色相均匀、跨度大
  • 注意发散色板数据可视化配色方案的取色应是两种对立颜色,可以是互补色或对比色。常见组合色板有:红-蓝(可用于展示温度的冷暖关系)、橙-蓝(常用于表示销售增减等)、紫-绿(中性色,常用于表现性能等)
  • 当可视化具有两个不同方向变化的数据时,还能标注极端值起强调作用
  • 当你的图标仅需强调一个最大值或最小值时,就选择连续色板;但如果你的图表需要用户同时关注最低和最高值时,就应该使用发散色板

4.叠加色板

将两组顺序色板通过图层叠加模式产生一组新的色板,一个颜色代表两种变量数据,常用于观察一个事物两个维度变化的相关性

5.强调色板

对比突出重点或特殊数据,将重点关注的数据标以高饱和度的强色调,其他普通数据标以低饱和、低明度的基本色。常用于对比重点关注事物与其他分类事物的差别

6.语义色板

适用于气象预警配色、红绿灯配色、股市的红涨绿跌等

我负责的项目数据类型采用的是两种配色方案

1.不同类别的数据,图表类型有饼图、折线图、柱状图采用分类色板;

2.明确表明状态的用语义色板

如何从色彩系统中调分类色板呢,我常用的方法如下:

1. 参照Echart的配色规律(保守不会出错的方法)



2. 研究市面上做的好的表盘产品(比如Mixpanel)或者竞品Datadog的配色规律



3.无障碍测试校验-色盲群体的适用性

大约10%的世界人口是色盲,可以借助工具来校验:Adobe color 网页版 https://color.adobe.com/zh/create/color-accessibility



写在后面

实践才是检验真理的唯一标准色彩规范只是为了让设计更有章法、更有说服力,在运用色彩时还是需要谨慎克制,可以研究各大厂的设计规范,然后把学到的东西运用在项目实践中。




作者:志龙有妖气_zlyyq      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

阅读可视化——交互设计沉思录-1.2管理复杂性

博博

本次图示化的信息来源是:
交互设计沉思录-顶尖设计专家Jon Kolko的经验与心得(第2版)_[美]Jon Kolko著,方舟译

今天带来的是《交互设计沉思录》第一部分的第二章「管理复杂性」。

主要讲述的是交互设计师是如何理解&组织所获取到的数字、文字数据。

通过这些步骤&方法能够帮助交互设计师更加清楚信息间的关系,建立很强的心智图景。

其间也穿插了很多职能相关部分的对比,如「交互设计师与信息架构师」「交互设计师与界面设计师」「交互设计师与电子工程师」。



作者:Viola_1241      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

京东莫奈可视化平台体验升级复盘

博博

01、前言



莫奈是一款主要服务京东内部用户的数据可视化平台,它以容器的形式将京东城市各种与智慧城市建设及运营相关的能力聚合,并以可视化的形式面向客户呈现。


作为京东莫奈的设计负责人,过去三年一直负责莫奈可视化平台的用户体验设计工作,由于本人日常设计主要以智慧城市、数据可视化大屏为主,所以我即是莫奈的设计负责人也是莫奈的深度使用者或者说专家用户。在长期使用莫奈的过程中,本人梳理了大量与视觉、体验相关的问题,这些问题,部分在产品日常迭代中得到了优化,但是也有相当一部分解决起来具有一定的难度和成本;与此同时,作为用户体验设计师,我日常与业务方、客户方以及用户接触紧密,所以在与大量用户沟通后,也从用户侧收集了不少使用体验相关的问题。我对以上两个渠道的问题整体梳理汇总,并与产品侧讨论沟通后,大家认为这些问题比较严重的影响了用户使用莫奈的效率,降低了莫奈对业务侧赋能的质量,提高了客户使用莫奈的成本。所以我们必须规划出一个产品迭代的周期,针对莫奈体验问题,进行一次密集的优化和革新,这便是本次莫奈体验升级改版的基础背景和原因。


本篇文章写作的主要目的,是想将本人在这次改版设计中用到的一些方法、流程和经验与大家做次交流和分享,希望能为同行在类似的改版设计中提供一定的借鉴和参考。




02、体验升级流程



实际上,在梳理出整个体验升级流程之前,通过与产品负责人的多次沟通,我们事实上已经对体验升级这个需求达成了共识,而流程图解决的是做什么、怎么做的问题。


下图展示的这套体验升级流程较为通用,大多数产品的体验升级都可参考下面的流程执行。





这套流程的主要作用有两个,一是通过它可以更直观的跟产品负责人、开发负责人等关键角色沟通,让大家对体验升级这件事儿有整体且全面的了解,方便大家评估工时、预估成本和安排排期;另一方面也能够使我自己的工作推进的更加有节奏有条理,避免工作内容长时间停滞在某一个环节而影响整体进度。





03、改版背景及产品简介





基于STAR法则,背景概况部分向大家介绍莫奈体验升级的必要性。在企业中,想要推动一个需求顺利执行,那一定是需求上下游以及相关方的利益都得到了体现和满足。莫奈此次升级,从体验设计师角度来讲,我们作为用户的代言人,在了解到用户大量反馈和建议后,有责任将用户的声音转化为需求,并推进落地为产品的一部分;从产品团队来讲,莫奈想要不断发展,持续为客户和业务方带来显著的效率提升、明显的成本下降,也必须对过去老旧的产品架构做一次深度的革新和优化;从前端工程师、研发同学的角度看,以往不合理的底层代码设计,使产品在性能、稳定性等方面留有大量隐患,因此在日常迭代工作之外,研发同学总要消耗部分精力去维护那部分不稳定的存在,从而导致研发同学人效比低、开发体验差;从上级Leader来看,公司的核心经营理念是“成本、效率、体验”,但成本的降低、效率的提升、体验的优化都依赖于强悍的技术和优秀的产品,而莫奈此次体验升级正是践行公司核心理念的有效尝试,综上,此次体验升级于多方有益,符合部门整体利益,所以大家很快达成共识。





04、莫奈典型用户场景梳理



通常我们说用户体验时,用户是一个群体的概念,而这个群体如上图所示,可以被进一步细分为多种角色,理想情况是每一类角色的体验都被满足,但现实执行中我们必须要有策略和取舍。所以要想产品有好的体验,首先我们要知道用户群体中不同角色对产品的使用情况如何,并找到对产品依赖度强使用频次高的那部分用户和场景,然后针对他们以及他们使用的场景做高优先级的优化。





从莫奈典型用户使用场景可以归纳出:


首先,莫奈的主要使用者为各个项目的产品经理及开发工程师,其中设计师也有相当大的使用强度,这三类用户他们直接使用莫奈,并把莫奈作为解决数据可视化场景构建相关需求的主要工具和方案,所以,以上三类用户,我们将其称之为莫奈的核心用户。核心用户使用莫奈产出的作品,经由上下游同事传达和部署给业务方及客户后,莫奈的商业价值便得以体现。


其次,每类用户使用莫奈不同功能模块的频次不同。从使用场景中我们也发现,莫奈的使用具有上下游的关联性,核心用户处于流程的下游,中上游的用户虽不是核心用户,但他们因为更接近客户和业务,往往具有比核心用户更高的决策权。因此我们优先让核心用户体验提升并不意味着放弃上游的体验,而是资源有限的情况下我们的工作必须有取舍有重点。实际上我们是通过建立核心用户的声量和口碑来向上游用户传达莫奈的价值和特色,通过核心用户使用莫奈交付的结果来证明莫奈的可靠。与此同时,我们也通过对内外的宣讲和培训,持续接收上游用户的反馈,并在迭代中持续优化。





05、体验痛点分析-用户调研



知道了核心用户是谁,那么核心用户的体验痛点是什么呢?


虽然在日常的交流沟通中我们已经获取了不少用户反馈、收集了相当的问题建议,但作为体验升级的系统性工作,为了更全面的了解用户体验痛点,我们还是设计了一次完整的用户调研活动。本次调研主要采用线上问卷调研、线下访谈+用户行为观察的方式进行。线上问卷采用京东良研问卷系统,除了面向核心用户推送,我们还面向莫奈主流用户及边缘用户推送了问卷内容,因此,问卷调研整体覆盖较为全面。线下访谈除了邀请部分核心用户,我们也从问卷系统中筛选了部分反馈问题多且愿意参加线下访谈的用户参与。线上线下均包含内外部用户,以期获得更加客观真实的反馈。





用户调研的核心目标是充分收集用户反馈,并将反馈结果量化及系统化,量化后的结果可做为设计侧推动产品执行体验优化的关键依据,也可以作为后续验证优化结果的对照项。





06、体验痛点分析-问卷设计



本次问卷设计我们参考了PSSUQ整体可用性量表,并结合本次调研目标做了部分调整。





PSSUQ整体可用性量表可以从系统易用性、信息质量、界面质量三个方面将体验结果量化,然后通过与行业基本经验值比较,既可以知道用户对莫奈在以上三项的满意度,也可对莫奈当前整体体验结果有一个全局的概况性评价。同时根据三个方向的评分也可以更细致的指导后续的设计优化方向,为设计决策提供更多科学可信的依据。


PSSUQ整体可用性量表作为一个通用模版,其内容比较固定,为避免多次打扰用户,提升问卷调研效率,我在PSSUQ的基础上添加了少量关键信息甄别、用户反馈积极性识别类问题,从而使问卷内容更加符合本次调研目标。





07、体验痛点分析-问卷调研



问卷设计好之后,接下来就是问卷发放以及结果分析了。


PSSUQ量表内每个问题均有8个选项,【1-7】是对该项描述的认可程度,得分越低代表用户对该项描述越认可;【NA】代表用户对该项描述无法评价。本次调研通过京东良研发放线上问卷100份,共收到有效问卷反馈87份(大于PSSUQ所需的最少样本数量:20),说明问卷结果具有较好的可信度,其结果值得进一步研究。





通过整理和统计问卷数据,可以得出以下结论:

1、内外部用户在系统易用性、信息质量、界面质量三个维度对莫奈均不满意

2、对比行业经验值(均值),莫奈系统总体体验质量与行业同类产品存在明显差距

3、莫奈用户群体整体积极性较高,具有较强的沟通及反馈意愿


整体评分结果与日常同相关同学的沟通结果一致,以上评分结果也反映出此次体验升级的紧迫性,作为由设计驱动的改版设计,设计侧面临较大压力。





08、体验痛点分析-亲和图



在设计问卷的环节我也提到过我们的问卷在PSSUQ量表的基础上针对本次调研目标做了部分调整和优化,而线上问卷最后两个选项以问答题的形式向被调研用户提供了对莫奈各方面建议的反馈渠道,通过问答项我们收集到用户反馈的各类问题80多条,我们采用亲和图对这些反馈做整理,亲和图顾名思义,它可以使具有类似特征和关联属性的问题更加临近,从而将零散的问题被归类,方便从杂乱的问题中找到规律,并通过比较不同类型问题的占比,更直观的了解用户反馈的问题主要集中在那些方向。


如下图所示,产品的反应速度及稳定性、模板和组件丰富度是用户反馈问题最集中的两项,前者影响用户最基础的使用体验,后者决定产品能多大程度上便捷的服务用户。良好的稳定性和反应速度可以让用户专注于任务本身,而使用模板能最快速的产出作品,降低新手的使用门槛,丰富的组件能够满足用户在各类复杂场景下的业务需求,减少组件二开成本,提高交付效率。针对这两个大的问题点,首先,对于那些能够在当前产品日常迭代中优化的点,我整理后会以需求的方式向产品团队提出,并在日常迭代中逐步优化;然后,对于那些需要“伤筋动骨”做底层优化以及长期运营沉淀才能有效改善的问题,我们会进一步向用户收集和完善相关信息,并将相关问题梳理到本次改版任务中,做系统的解决和处理。








09、体验痛点分析-线下用户访谈



在【05、体验痛点分析-用户调研部分】已经介绍了本次参与访谈的用户来源,但在实际执行时,我们也邀请了部分在线上问卷反馈中描述模糊不清、难以理解,需要面对面交流或者演示才能理解的问题的用户。





访谈先通过与用户简短的沟通了解用户的岗位/职业以及使用莫奈的主要场景、频次、设备等,然后通过给用户设置一到两个简单的任务,观察用户在完成任务过程中的行为、表情、语气等,以了解莫奈在一些典型使用场景下的易用性及可用性。比如,对于视觉设计师:请在画布中添加一个条形图,并将条形图的颜色修改为绿色、激活纵轴辅助线、修改辅助线为虚线样式....; 对于开发工程师:请在画布中添加一个环形图,并使用json为环形图添加一组动态数据....。之后,在用户完成基础任务后,我们还会针对用户关心的问题进行更细致的沟通,了解用户更细致的反馈。对于用户反馈的问题,我们整理后会在公司内部的需求及研发管理系统“行云”中以需求的方式提交给产品团队并同步添加反馈问题的用户为该需求的关注者,后续,当该需求的状态有任何更新时,问题反馈者都能及时收到更新。如此,受访者反馈的问题从需求提交到需求最终提测验收,都能在线跟踪并闭环。这样做既是我们团队的责任,也可以增进用户对莫奈的信任,并期望活跃用户后续能继续为莫奈提供建议和反馈。





10、体验问题汇总-用户体验金子塔



通过线上问卷调研及线下访谈,我们已充分了解了用户心声,接下来我们通过用户体验5要素模型,将各类问题进一步归纳并按照产品建设的上下游协作关系,把每一个具体的问题汇总给对应的角色,并由对应的角色产出具体的解决方案,然后通过线下会议同步各自方案并对方案进行评审和沟通,由此,关于体验升级的所有事项及具体任务便可周密安排,之后便是资源投入、推进升级工作具体执行。





用户体验5要素模型,从产品的战略层出发,层层递进直到表现层,把影响用户体验最根本的因素分层并可视化,借助这一模型可以让大家对“用户体验”这个概念有更好的理解,并能促成大家在更大的层面上达成共识。以往谈到用户体验,大家首先想到的是界面是否好看、交互是否流畅,然而一些对用户体验也有着重要影响但“不可见、不直观”的因素却往往被忽视,尤其对开发侧同学更是如此,他们鲜有意识到产品的目标、内容以及性能等这类的因素,也是构成用户体验的重要部分。对于莫奈这样一款长期维护持续迭代的产品来说,好的用户体验并不能以“毕其功于一役”的方式来实现,而是要通过持续不断的改进和优化才能持续满足并提升用户体验,所以借助用户体验5要素等模型,我们引导产品及研发团队更好的理解用户体验,这样不仅能帮助设计师在本次体验升级改版工作中与大家高效协作,也非常益于之后日常产品迭代的沟通与协作。





11、体验问题汇总-体验升级方向






上一步,我们通过用户体验金字塔将体验问题汇总并划分给了不同的角色,之后各个负责人产出解决方案并与大家评审和沟通,而体验升级方向正是基于大家对各类方案一致沟通后达成的共识和结果,体验升级方向以设计为主导,同时兼顾产品和研发的部分目标,我们用5个短句将五个升级方向概括,每个方向尽量解决一个维度的问题,比如“界面视觉质量提升”解决表现层的问题、“信息层级优化”解决框架层的问题。体验升级方向作为对体验升级结果的导向,将指导后续设计动作的展开。





12、策略制定-设计目标确定






基于体验升级方向,接下来就要制定具体的设计策略,来实现体验升级方向中要达成的结果。设计策略制定第一步先确定设计目标,我们将设计目标拆解为三个方向,每个方向通过两个关键词定义。设计目标主要分为视角与交互两个方向,同时兼顾产品侧“易拓展、易维护”的需求。实际设计中,视觉与交互并非独自分开进行,在设计开始的阶段,需要先定义设计风格等基础设计要素,之后视觉便可在此基础之上全面展开,此时视觉设计要考虑交互的效果,交互设计也需要斟酌设计的展现。





13、设计执行-视觉风格定义



对于设计目标中关键词所代表的那些抽象概念,每个人的认知可能都不一样,但是搜索引擎和大数据推荐的算法,可以告诉我们普通大众对那些关键词所表现出来的意象是如何认知的,之后我们便可从符合大家普遍认知的视觉素材中,提取出符合关键词所表达出的意象的设计要素,之后通过在设计中应用这些设计要素,就能把关键词定义的抽象的设计概念转化为具象的认知,我把这个过程称之为“抽象概念的可视化”。而“情绪版”是我完成上述工作的主要工具。





我们使用搜索引擎以及AI推荐的关联算法,针对“科技和高效”这两个视觉目标的关键词收集了海量的音视频设计素材,把这些素材集合在一个画布上形成“情绪版”,然后通过归纳这些素材共有的特点/要素,就能将体现“科技、高效”这两个概念的所有设计要素剥离出来,并通过简洁的文字加以描述和归纳。此后,我们通过在视觉设计执行的过程中应用这些设计要素,通过合理的搭配和组织,将这些设计要素融入到莫奈新的设计语言,如此,产品最终便可在视觉上呈现出与视觉目标关键词定义的一致的视觉和心理感受。





14、视觉风格定义中的7要素



基于情绪版提炼出的设计要素其实已经足够具体,但是如何将这些要素应用在设计中,我们还需要进一步归纳。我个人一直以来习惯从形、色、字、质、构、动、音7个维度分析一个设计作品的设计风格,就如同人体是由肌肉、骨骼构成的一样,以上7个维度也是构成一个设计作品的“经、骨、肉”。所以,我认为对于一个设计作品,尤其是UI设计作品,以上7个维度基本能够完全概况它的风格,所以当我要为自己的产品做风格设定时,我也是从这7个维度出发来为每个维度定义具体的风格和策略。





这种细分维度然后定义风格的方式有多种优势,其中最明显的是它能够将我们风格定义的设计工作条理化,避免反复尝试和摸索造成的大量返工和思绪混乱,比如,如果我对质感的定义有偏差,不符合情绪版中提取出来的设计要素的特点,这时候我只需要对“质感”这个维度的风格进行优化和调整,而不需要推翻整个7要素重新再来。这种设计方式让我的设计更加理性,也让后续设计执行的工作更加的有条理和舒适,从设计风格落地的角度来讲,这种方式我个人认为是最能够忠于情绪版所归纳出的设计感受的方法。





15、视觉改版:造形演绎



对于产品界面的造形设计,一方面依照情绪版中提取的设计要素“透视、空间感、异构造形”来考虑,另一方面我也结合莫奈的产品Logo做了适当的抽象和演绎;两者结合最终确定了当前莫奈的造形设计。





首先,产品左侧主导航采用了具有一定透视角度的异形设计;产品顶部标题区域也采用了相同的设计思路:左侧为品牌Logo设计了一个容器,Logo在其中容纳放置;Logo右侧收起的区域预留了常用公告、跑马灯的设计,方便产品把日常重要信息同步给用户;最右侧呈现用户个人中心、空间管理、使用帮助等菜单项。


对于这种异形的设计,用户是否能够接受,在设计开始时我存在一定的疑虑,因此在设计初稿定稿后我们邀请了部分用户做了测试,大部分用户认为新的设计有创意具有鲜明的特点,也有部分用户认为透视的设计看着较为怪异,尤其是左侧主导航的文字在添加透视效果后识别性存在一定的问题。因此针对用户反馈我优化了透视的角度,从多个透视数值中选择了一个即能展示透视的设计效果、又不至于透视过大导致文本图标等变形严重而不易识别的角度,其次,我还配合开发同学对导航透视文本和图标的渲染做了一些优化,从而使其具有更好的识别性和清晰度。在以上两项优化完成后,新的用户测试表明大家对该设计的满意度有很好的提升。





16、视觉改版:色彩搭配






莫奈在改版之前就已经有自己的品牌色,新的色彩升级围绕“科技与高效”两个关键词,结合情绪版提取的设计要素,将原有品牌色做了细微的调整。首先蓝色饱和度增加,绿色调整色相使其偏向蓝色的一端并增加亮度。如此,当两个颜色搭配使用时,蓝色作为主色调体现科技、可靠的视觉和心理感受;绿色作为点缀色和强调色,体现活力、高效与创新。蓝绿对比强烈,具有很好的场景适应性和品牌特色。





17、视觉改版:字体选取



字体作为UI界面中最常见的元素以及作为信息呈现的主要载体,字体的使用对产品的易用性和视觉表现有着非常重要的影响。结合体验升级方向中定义的“增强品牌特色”的目标以及情绪版中提取的非衬线的设计要素,对于字体的设计风格,我将其归纳为"定制化、品牌性和非衬线"。





为了实现字体风格的设计目标,我选取了两款京东品牌的定制字体“京东朗正体”及“京东正黑体”。京东朗正体经过多次迭代,目前具有丰富的字重和独特的品牌特色,将该字体用于莫奈的品牌Logo,可以很好的体现京东的品牌特色并体现出与其它产品差异化的字体设计。京东正黑体主要用于莫奈产品中的数字、拼音、英语、数值符号四个场景,该字体也是京东金融APP的系统数字字体,其最大的特点是等宽、简洁、紧凑具有很好的识别性与易读性,并且该字体有较小的字符宽度,所以当其用于大屏编辑器时,能够在相同的空间下容纳比其它字体更多的字符,而这个特点对于“寸土寸金”的属性面板尤为重要。此外,该字体在作为数字字体使用时,其小数点、千分符等也具有很强的特色,具有不错的辨识度与个性。


而产品中的中文字体Mac与Windows系统有不同的方案。在Windows下,由于系统自带的微软雅黑当字号小于14pt时,字符在水平方向上存在明显“参差不齐”的现象,加之该字体很少更新,没有针对当前高像素密度、高分辨率的屏幕特点做相关的适配优化,所以在高分屏下,其字体边缘会有明显的锯齿。之前在用户调研中,有用户反馈字体模糊不清、识别困难也是上述原因造成,所以Windows系统下莫奈界面字体选取了思源黑体,思源黑体是Adobe与Google联合开发的开源字体,其字重丰富、字形简洁、现代,能够很好的适应PC与移动端的显示,也能适应当前已渐趋主流的高分屏,所以使用该字体能够给用户带来不错的信息呈现。除此之外,思源黑体的字形特点与MacOS系统下的苹方字体相似,因而使用思源黑体在一定程度上也能够保证用户在不同平台使用莫奈时体验的一致性。





18、视觉改版:质感表现



质感的呈现主要通过色彩、透明度的变化、毛玻璃效果的模拟来实现,色彩与透明度的变化搭配毛玻璃效果使用,可以呈现科技、轻盈的质感。








19、视觉改版:结构设计



结构设计主要目标是组件化及原子化,莫奈最核心页面是大屏场景编辑器,该页面承载着可视化大屏由0到1构建所需的大多数功能,也是莫奈产品日常迭代维护投入资源和成本最集中的模块。以往编辑器的界面设计虽然也有不错的设计规范,但是并没有按照原子化、组件化的思路来考虑各类组件组合使用时的搭配问题,因此基于以往的设计规范,大屏编辑器页面的产品需求总是需要UI产出设计稿研发才能开发,且由于没有系统的梳理过编辑器页面各种组件的类型,所以部分组件在同一页面的不同位置存在不同的形态;还有一些组件,在具体页面中的使用并不符合该组件的功能和用途,存在错用乱用的情形,由此造成编辑器的界面设计、开发和维护都具有较高的成本。


新的改版设计,在设计之初就联合产品对编辑器内的各个模块所包含的各类组件进行了梳理,通过将各个模块的组件罗列出来,然后重新梳理组合、去重、合并之后,我们就可以知道当前编辑器界面总共有哪些类型的组件,以及每类组件用在何处,而组件原子化后也通过间距规范、使用场景示例等方式解决了如何用的问题。





原子化的组件,精简了组件的数量,同时每个组件也针对自身功能和用途的特点进行了优化,在此过程中也考虑了组件搭配、组合使用的适配和呈现问题。比如,针对颜色选择组件,我们默认以十六进制展示颜色色值,并在色值后以百分比显示该颜色的透明度,我们还在色值后面增加了色值预览的小色块,这样的设计兼顾了开发与设计同学使用莫奈的场景。对于开发同学,他们在代码中习惯使用十六进制色值,而设计师更习惯于RGBA或HSLA的调色模式,因此,虽然十六进制的色值也能包含透明度信息,但我们依然在颜色后面增加了百分比及小色块,已帮助设计同学确认颜色的正确性,此外我们还通过色彩显示模式切换、自动输入校正等手段,确保不管用户输入的颜色采用何种方式,最终属性栏都是按照用户设置的模式以统一的格式呈现。而诸如此类优化,在本次体验升级中不胜枚举。





20、视觉改版:动效设计



莫奈的动效设计主要有两类,一类是用于页面视觉效果营造的氛围类点缀动效,另一类是用于功能及信息传递的交互类动效。两类动效都通过“节奏感、轻盈”的设计风格,传递科技、高效的视觉感受。





在本次动效交付中,为了保证动效的清晰度与流畅感、并减少动效的体积和提升动效加载速度,动效文件均采用Json代码的形式交付前端,该类动效由浏览器在网页端实时渲染,具有矢量动画的特点,能适应多种设备及屏幕分辨率,具有优秀的前端呈现效果。


首页科技感流光氛围动效






页面及大屏加载Loading动画







21、设计执行-典型页面效果





产品登录页







产品首页-我的可视化页面







我的可视化页面改版前后对比







大屏模板页面







可视化场景编辑器页面







可视化场景编辑器页面改版前后对比







产品主要ICON设计








22、交互优化:图表属性配置优化



针对视觉层面设计优化后,接下来针对莫奈典型的用户使用场景以及之前线上问卷、线下访谈中用户反馈问题比较集中的一些场景进行交互层面的优化,我们交互优化的目标是“简单、流畅”。


首先进行交互优化的是各类图表的属性及配置项设置相关的交互优化。莫奈作为一款可视化场景搭建平台,为用户提供了各类型的图表,每个图表均具有“样式、数据、交互”三大类配置属性,这三大属性,从图表看起来是什么样、图表展现了什么数据、图表可以与用户进行那些互动三个维度解决了图表在数据可视化呈现中最基础的需求。由于图表在数据可视化呈现中频繁使用,所以与图表配置相关的操作自然也是相当高频和常用。当前版本下,图表配置项主要问题有两个:一个是图表配置项层级过深,用户需多次点击才能对某一内容进行修改;第二是批量对多个图表的相同属性进行修改在当前版本不可用,导致用户图表配置成本高。针对用户最关心最影响体验的两个交互问题,我的优化方案如下。


优化图表配置项层级过深,用户需要多次点击才能对某一个内容进行修改的问题

要解决问题,首先要知道问题从何而来。经过深入与产品、研发同学及部分用户访谈沟通后,我发现当前导致图表配置项层级过深主要有两个原因,分别是产品规划与设计展现。


具体来讲,产品层面有三个问题:


01、产品对于当前图表配置项的结构梳理是以程序的逻辑来呈现,而非以用户的视角来归纳。举个栗子,在当前版本如果用户要修改柱状图某个柱子的颜色,操作路劲如下:样式>数据系列>系列名称>形状设置>颜色设置。而这一路径为何如此设计?因为颜色这个属性的后端代码就是这样的结构。这一路劲把用户最易理解、最直观的属性名放到了路劲的末位,而在它之前呈现的内容、名词其实都有一定的理解难度,尤其对于新手更是如此!用户想要更改颜色,Ta首先需要知道什么是数据系列、其次还要了解形状设置可能包含哪些属性等,正因具有一定的门槛且不直观,所以用户初次进行上述设置时往往需要在样式一级菜单下点击多个属性、反复尝试确认,才能最终完成颜色修改的设置,这样一个使用的流程自然会给用户“层级过深”的感受

02、图表配置结构存在冗余、不够精简。还是上面那个栗子,用户修改颜色需要触达第5级。但是这种细致的分层分级的结构设计是必要的么?答案是并不是!因为只有用户关注的才是有用的,产品应该提供用户想要的内容而不是强塞给用户产品具有的所有的功能,所以我们没有必要把图表在后端具有的所有属性都罗列出来,适当的对配置项做些精简,合并一些同类的属性、然后通过“更多”按钮隐藏一些对图表呈现无关紧要的内容,如此,图表配置项便能瘦身,用户使用起来也更轻松。


03、图表配置项的各个属性,在属性列表的排序没有遵循用户使用的频次和习惯。排列在前面的属性并非用户最常用的那些,因此用户要在列表中从上而下的“翻找”,这种使用过程中的顿挫感,一方面影响了用户使用产品的效率,另一方面也加深了用户“层级过深”的感受。


知道了问题从何而来,那么解决问题便也变的简单。首先,我们联合产品经理,对莫奈已有的60多个各类图表组件,逐个进行了配置项的梳理,当所有图表的配置项都以思维导图的形式呈现时,他们的共同点、同类项便一目了然。此时,之前存在的“图表配置结构存在冗余、不够精简”的问题便可解决。而对于先前存在的01与03问题点,在上述梳理工作完成后有了一定的优化和改善空间,但仍然存在一些不确定的因素影响设计和产品的决策。比如、“属性列表中,哪些属性是用户最常用的”,类似这样的问题我们通过访谈几个用户并不能得到可靠的结论,对此,一方面我们通过为配置项区域增加数据埋点,分析用户对各个配置项使用的频次来为后续的持续优化提供决策支持,另一方面我们也参考、调研了同类产品中一些用户量较大、设计质量较高的产品来进行当前有限的优化。





配置项层级过深的另一个原因,是属性配置列表的结构及布局设计存在“深层级、空间利用率底”的特点。


如下图,左侧图片示意了旧版莫奈的配置列表设计结构。可以看到旧版设计完全采用树结构的形式将各项自上而下排列,并且采用每级向右缩进一个字符的形式来做层级的区分,旧版的设计基准尺寸为1440PX,属性配置栏本身较窄,而逐级缩进的策略更是导致信息展示困难;其次,树状的结构在展开层级较多时,部分一级属性会被挤到一屏之外,用户需要频繁滚动鼠标滚轮才能看全信息,综上,旧的设计策略也给了用户“层级深”的直观感受和交互体验。





新版设计首先增加了配置属性栏的宽度,让其能够在横向上展示更多信息;其次,新版设计,将提炼后的一级属性标签固定在属性配置列表左侧。相较于之前,这样的设计始终能够让用户清晰的看到所有一级属性,用户可以随时在各类属性中切换,并且右侧属性内容的滚动也不会影响一级属性的位置,如此就给了用户很好的全局观和使用的便利性与确定性。最后,新版设计采用分隔线与色块结合的方式来表达属性列表内的层级关系,去掉逐级缩进后,配置列表在视觉上更加整齐一致、且空间利用率也有了进一步的提升。


优化“批量对多个图表的相同属性进行修改在当前版本不可用,导致用户图表配置成本高”的交互问题


在数据可视化场景搭建过程中,用户对多个图表的相同属性进行统一修改、一次性调整的需求非常迫切和刚需。比如当前可视化大屏中有N个图表,此时,用户想要将其中6个图表的横轴颜色调整为相同的绿色,在用户的视角下,此时的操作应该是先选中6个想要调整的图表,然后找到横轴颜色设置项,之后统一调整色彩。但莫奈当前的版本,如果用户按照上述流程操作,看到的将是下图左侧的示例:图表多选之后,对齐、坐标等基础项仍然可用,而与属性相关的其它设置并没有被聚合并呈现,在此情况下,用户想要完成最初的目标就只能6个图表逐个依次调整!显然,这样的操作并不符合用户预期,它使用户的操作效率大大降低。



上述问题是一个体验相关的问题,同时也是一个强技术相关的问题,我们想要让多个图表的同类项聚合显示,首先要能在底层对各个图表的配置项有十分清晰的梳理,好在我们解决第一个问题:“配置项层级过深”时,已经完成了对60多个图表的细致分析,有了这项工作的基础,当前面临的问题便不那么棘手。如右侧示例:当用户多选图表时,图表的同类项会被聚合,并以用户视角的理解,将属性类别进行分类,这样的分类打破了传统的按照图表固有属性排列的惯例,而是把图表固有属性整合归纳到用户易于理解的类目下,如此,用户多选图表之后便能够便捷的对图表的各类属性进行统一的调整和修改,而这样的操作是符合用户习惯和预期的。





22、新建大屏交互流程优化



新建大屏作为创建数据可视化场景的第一步,它的易用与否直接给了用户最直观的对莫奈的第一感受。对于新建大屏的交互优化主要有三个方面:创建流程、模板预览与模板展示。


创建流程优化:首先,旧版的创建流程:新建可视化>选择模板>大屏命名>创建成功。 这一流程中“大屏命名”是没有必要的,因为用户在新建可视化大屏时可能存在多种需求的可能性,也许用户只是想看看创建完成后内部编辑器是什么样,或许用户有实际项目,但当前项目名称也并未确认,所以在此时添加一个不可跳过的步骤着实让人不爽,况且大屏创建成功之后在多个位置有多种方式都能便捷的修改大屏名称,因此,更快速的进入编辑器开始设计创作才是用户创建可视化最根本的目标,所以,拿掉“命名流程”,显然可以让整个交互的过程更加流畅。


模板预览与模板展示优化:原有的设计,当用户点击创建大屏按钮后,会在页面底部拉起一个小的抽屉,抽屉内包含一个空白模板以及有限多个其它内容模板,而在如此狭小的区域展示这么多内容,不管是从交互效率还是视觉效果上看,都显得格外的拘谨和难受。新的设计首先是全屏铺开,尽可能充分的利用页面空间。



在模板展示及预览方面,我设计了列表展示与缩略图分布展示两种方式,并添加了分类标签和搜索按钮,此外还联合产品增加了模板收藏功能,这样用户可以把自己喜欢的、常用的模板收藏,方便之后更快速的使用

模板预览方面,在两种布局模式下,用户鼠标滑过模板缩略图时,模板均会以较大的视图动态呈现模板内容。在列表模式下,模板预览窗口固定在页面右侧区域;缩略图分布的模式下,预览窗口根据鼠标指针的位置激活。当用户选中某个模板时,点击底部创建按钮即刻进入大屏编辑器界面,此时用户便可基于模板内容进一步完成自己的定制化设计。





23、全局搜索交互优化



如今移动端各类产品已经给用户养成了算法推荐+自主搜索的产品使用习惯,这种习惯当前也逐步从移动端往PC端转化。搜索能从海量信息中最快速的找到用户关心的内容,因而提高搜索功能的易用性,能明显提高用户使用莫奈的效率。



以往的搜索功能按照不同模块和场景分布在不同位置,用户需要先找到对应模块才能进行搜索,降低了搜索的便捷性和易用性。新的设计在保留之前搜索能力的基础上,新增全局搜索,用户在一个位置即可完成对组件(优先展示当前画板内组件)、属性、帮助等内容的搜索和查找,进一步提升搜索的效率。





24、图层管理交互优化



一个数据可视化场景,通常是由N个数据图表与其它数据要素一起构成的多个页面来呈现和展示的。这些页面内包含大量的元素,而对这些元素的管理主要通过大屏编辑器页面左侧的图层管理面板来实现。一般我们对图层管理的手段主要有三种:命名、分组和查找。


给组件命名是一个耗时且麻烦的行为,我们在做用户调研时发现,大部分用户都没有给组件规范命名的习惯,大多数情况下,组件在图层面板列表内都是以默认名称或者默认名称+1、2、3的形式存在。这导致了当页面组件较多时,通过组件命名来查找组件其实相当困难,所以自动生成缩略图的形式相比让用户耗费大量时间为图层命名更能改善用户体验。缩略图以快照方式保存当前组件最新状态截图,从而帮助用户更快速的将图层组件与页面上的内容对应起来。



新的设计,图层成组后也取消了缩进字符的效果,我采用给成组对象设计更明显的分组示意图标以及为组内列表添加深色色块的方式,完成了成组对象与列表内其他要素区分的需求,新的设计使成组对象更易查找和识别。


此外,我们还增加了对图层列表的搜索功能,帮助用户快速定位名称已知的设计元素。





25、经验总结



此次体验升级是设计主导推动,产品与研发紧密配合的结果。体验设计师作为最接近用户的群体,是产品与用户沟通的桥梁。时刻关注用户心声,并能将用户细碎的吐槽和各类反馈转化为体验痛点、制定对应的优化策略是体验设计师的基本功。而对于设计和产品本身是否热爱,也是设计能否不断精进、体验是否能够不断提升的关键。好的设计不仅服务了产品、帮助了用户、同时也成就了设计师本身。


本人为莫奈提供设计支持的三年多时间,在没有KPI要求和外部压力的情况下,通过公司内部需求管理系统“行云”,为莫奈提交231个体验优化建议;以线下线上的形式面向莫奈产品及研发团队进行了20多次专业分享。正是日常这些积极主动且持续的努力,使我本人与莫奈产品团队建立了非常友好紧密的联系,这也为推动本次体验升级改版提供了巨大的助力。我认为作为体验设计师,我们不仅要对用户有同理心,为用户创造愉悦舒适的感受,同时也要对身边的同事、职场中的合作伙伴有相似的同理心和换位思考的意识,体验关乎人、环境与生活,尝试在生活中磨炼自己创造好的体验的能力,并将其应用到体验设计师的职业工作中,我相信,倘若如此实践,必能在职业和生活中都获得有不错的成就。



好的产品,必然是持续关注用户诉求,不断迭代发展的产品,好的体验设计也必然是陪伴产品不断优化、持续精进的设计,复盘的意义不仅是沉淀过去的经验,更是为未来更好的体验蓄能。


此次分享如能为大家带来那怕一点点的启发,本人便倍感荣幸、开心至极! 期望大家能够与我有更多交流,么么哒~~


作者:BYMD      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

产品优化-怎么做竞品分析更有价值

ui设计分享达人

一.竞品分析目的

相信每一个设计师,在工作中或多或少都做过一些竞品分析的工作,正所谓知彼知己百战不殆,做竞品分析可以帮助我们快速了解竞对产品的优劣和核心竞争力。目前网上的很多竞品分析主要都做的大而空,好多都是偏行业分析,对于设计师而言,看完之后无法得到有用的信息,对于产品本身的设计体验而言,帮助意义不大。
在开展竞品分析之前应该想清楚两件事,弄清楚自家产品的基本情况,如产品定位,基本功能,目标用户等,另外要确定分析的目的是什么,最终要拿到什么成果赋能产品。如果想要提高用户活跃度,那就围绕竞争对手拉新促活方案进行研究;如果是要优化产品的用户体验,那就围绕影响用户体验的交互流程及功能操作去研究。



产品发展的阶段不一样竞品分析的目的也会不一样,可结合互联网产品发展周期辅助确定分析目标。一般产品引入阶段,功能架构还没有完全确定,需要了解市场行业现状、目标客户特点、商业模式、盈利模式等,从而更好为为后期发展指明方向;而产品成长阶段,需要占领用户心智及市场份额,所以要分析了解竞争对手的产品功能、推广路径、营销策略、体验设计等,优化核心功能及经营策略,实现用户增长及促活。 产品成熟期要考虑怎样维护市场份额,怎样跟竞品拉开距离,怎样创收增效,需要及时了解竞对产品的动向及用户经营数据。结合产品发展的阶段性目标及业务产品部门的相关规划才能更好地确定出比较有价值的分析目标。 



二.竞品的选择

选择竞品先要明确产品所在行业和细分领域、产品属性、用户群体,找竞品时需要找这些元素相同或者相似的产品。基本原则是选择行业第一梯队中,1.产品的定位及目标人群比较明确且有重合性,2.是否稳定且迭代成熟,3.是否具有独特亮点有参考价值。

直接竞品:功能和用户群体基本一致,有直接的竞争关系,可以考虑借鉴相似的功能设计。
间接竞品:产品用户相同属性相似,但是功能需求匹配度不是特别高,在细分的领域中做的比较优秀,在运营策略、操作流程、视觉设计等方面有借鉴参考的价值。
标杆竞品:目前互联网同类的产品同质化情况相对比较严重,如果只对直接竞品、间接竞品进行分析,忽略当下比较热门、比较具有先进性的产品,有可能会缺乏创新性,所以需要在用户重合度或者产品属性、营销策略等方面做得优秀的产品中选择1-2个作为标杆产品进行分析。将其优秀的部分深入转化应用到自家的产品中。
通过七麦数据、IT桔子、易观分析、比达网等第三方平台,找到类别排行榜,艾瑞网等可以查询相应的行业报告,有利于分析产品目标及功能范围。另外,如果是移动端APP,可以通过应用商店进行搜索。
七麦数据:https://www.qimai.cn/
IT桔子:https://www.itjuzi.com/
易观分析:https://www.analysys.cn/
比达网:http://www.bigdata-research.cn/
艾瑞网:https://report.iresearch.cn/

三.竞品分析方法

竞品分析的目的不一样侧重点不一样,但用户体验五要素给我们提供了一种通用的分析思路,从五个层次去逐步分析。但实际分析过程中还是会根据分析者的身份,产出不同,侧重点不一样。



战略层

了解竞品的产品定位,产品目标,目标,多平台等方面。做这些分析的主要目的是确定自家产品定位,产产品定位包括产品定义及用户需求:产品定义包括使用群体/主要功能和产品特色,使用群体帮你明确产品的主要为谁服务,所有的功能/内容/设计风格的设定都是围绕这类群体来进行的,主要功能划定了功能的范围和限制,产品特色使产品有别于同类的竞争对手。用户需求包括目标用户/使用场景和用户目标,一个用户需求可以看作是“目标用户”在“使用场景”下的“用户目标”,在做某一个功能的竞品分析时,需要对比分析真实场景下产品怎么解决用户的问题。相对而言产品经理会作战略层的深度分析,作为设计师需要明确这方面的内容,但在竞品分析阶段不用深究,需要重点分析的还是结构层,框架层和表现层。



范围层

我们需要思考的是产品需要什么功能实现产品需求,需要分析相同业务和场景下竞品的功能,例如同为电商产品,竞品在购物场景下的基础功能及衍生功能,相同的功能竞品的特点及优势。在竞品功能进行梳理时,可以通过表格对比功能有无,这样可以清晰地看到不同竞品之间的差异。功能对比并不是简单的功能罗列,要进一步思考功能设定背后的原因,可以从用户对功能的依赖程度/使用频率以及公司为实现这一功能要付出的成本,结合自身产品定位老考量自己的产品是否也需要这个功能,从而明确分析主要功能及次要功能进行分析

结构层

产品的整体架构包括功能结构/信息架构分析,首先需要理解什么是信息架构,很多人将思维导图理解为信息架构,其实思维导图只是信息架构的一种表现形式 。而功能结构是指功能的阐述,一般是动词+名词。功能结构则更侧重整体逻辑,各个功能之间独立或者关联关系,明确主要功能次要功能。功能结构就是按照功能的逻辑性及用户的操作习惯组织起来,更适合用流程图来梳理,通过优化功能与用户的每个触点优化体验。信息架构中信息指的是内容的载体,常见的文字、图像等都是信息;架构的含义则形容对应的组织和结构。信息架构就是将信息通过一定的形式组织起来,然后呈现出来。从本质上讲是信息的表达和传递,从而降低认知成本,提升使用效率。良好的信息架构是高效用户体验的基础,分析竞品的信息架构是分析竞品分类组织逻辑。随着互联网产品的同质化,其实竞品的很多功能都相似,但信息的组织往往会有所不同。相对而言资讯类,信息类产品需要着重对比信息架构。



框架层

任务流程分析,界面设计、导航设计、信息设计,页面的布局内容信息,页面之间的跳转方式,页面内部的交互逻辑等方面,工具类的产品如出行/外卖/购物等用户有明确目的的,这类产品需要着重对比竞品间任务流程的差异,从而寻找哪些步骤可以优化,哪些步骤可以借鉴

在这个过程中输出使用体验即用户在使用过程中的整体感受,包含用户操作过程中的效率,对信息的呈现和布局的理解。是否存在干扰信息导致用户认知和操作出错,使用起来是否存在压力的情况,简单来说包括:操作效率/信息布局/使用成本/信息干扰/等

而交互体验更加具象,需要在使用反馈/防错/可见性/一致性/流畅度等细节方面需找设计的差异点和亮点。

表现层

最容易被用户直观感受的层面,可以从视觉风格,配色,图形,排版布局,情感化设计,动效等方面和竞品进行详细的分析对比,竞品分析并不是罗列细节,而是需要分析出操作体验的优劣,以及这样设计的原因。 


四.分析报告

产品概况、功能、流程和交互等方面进行全方位的分析后,还有非常重要的一步,即给出结论,且这才是最重要的,结论将其复用到我们产品中,这也是竞品分析的意义所在。在做最终的分析报告时不要只做分析没有结论。任何一个功能点都可以思考出一个结论,竞品为什么这么做,那我可以模仿或超越吗?或是我觉得不好,那么我改怎么避免;不要只有结论没有权威的分析过程。在任何分析中带着主观性的结论是最不好的,有时候会误导大家,所以得出的结论的因果条件要是合理的,分清楚充分条件和必要条件,写明这个结论的必然原因以及分析过程和可能的原因等;要带着目的性的去做分析,避免作数据及内容的拼凑。



作者:沐鱼Muyu
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


用户体验基础篇·人体结构特性

ui设计分享达人

关于用户体验

随着技术及经济的发展,人们对计算机系统、机器等的要求,从单纯的「 可以用 」逐渐变为想要「 更好用、容易用、用得舒服 」等更加丰富的使用体验,也就是常听到的好的「 用户体验 」。
「 用户体验(User Experience )」这个概念,最早由唐纳德·诺曼(Donald Arthur Norman)提出,他希望用这个词,来涵盖个人使用系统时的体验、各个方面的体验 ,包括工业设计图形、交互界面、物理交互,以及与人的交互。

而「 用户体验 」产生的基础,是「 用户使用了机器 」,即人跟机器有发生接触、交流、互动等,然后用户会形成主观上的体会、感受。这里的「 机器 」泛指各种「 产品 」,类比诺曼所说的,即物理界面、虚拟界面、系统、硬件等。
因此,好的「 用户体验 」是基于好的交互设计。而对交互设计「 好/坏 」的影响因素,涉及到人、产品、使用环境这三者,也就是人机工程的内容。
概括一下百科对「 人机工程学 」的解释:

将 「 使用物的人 」和 「 设计的物 」以及 「 人与物共处的环境 」作为一个系统来研究(人-机-环境系统)。在人、机、环境这三个要素 本身特性 的基础上,科学地利用三个要素间的 有机联系,来寻求系统的 最佳参数。 


其中关于人的「 本身特性 」包括人体结构和机能特性。主要有人体各部位的尺寸、重量、面积、活动、相互关系等,眼耳鼻舌身对应的视、听、嗅、味、触觉,以及动作习惯和认知。这部分大愚认为可以把「 结构特性 」当作人的硬件,具有一定的普遍/通用性;而「 认知 」则是人的软件,个体间存在一定差异。



然后,就到了这篇文章的主要内容,人的「 结构特性 」部分。


注:下文中提及的人体结构特征是基于大部分人的情况描述,内容也是围绕人机交互有关的方面,不是人体结构特征的全面介绍。

人体结构特性

人体结构中对人机交互产生影响的主要有眼、耳、身(皮肤)对应的:视觉、听觉、触觉,以及四肢、颈椎的尺寸、受力情况和活动幅度等。下文将对这四部分的基础内容进行整理,还有聊聊一些交互、体验设计上的应用。



人与周围环境发生联系的感觉通道,最重要的就是「 视觉 」,约占80%的信息是通过视觉来获得。因此「 视觉显示 」是人机交互系统中用的最广泛的一种形式。

视觉的形成



感受光(电磁波)

人眼正常感受光谱的波长约在400nm-780nm之间(大概这个范围,网上相关资料关于这个数值存在微小差异),对应的色相是紫色-深红色,也就是常说的彩虹色。


而负责感受光的细胞是视锥细胞和视杆细胞。


视锥细胞,约占95%,复杂感受强光及有颜色(彩色)的视觉,环境光线亮时起作用,用来区分色彩。研究数据表明视锥细胞对光谱中波长为555nm的「 黄绿色 」部分最敏感


视杆细胞 ,约占5%,复杂感受弱光及没有颜色(黑白)的视觉,环境光线暗时起作用,用来区分黑白。研究数据表明视杆细胞对光谱中波长为507nm的「 青绿色 」部分最敏感,对极弱的光刺激敏感。


如果涉及一些特定的工作环境(昏暗)的应用设计时,就可以考虑下此时作用细胞的特性,进行合理的设计设置。

识别物体

正常情况下,瞳孔会根据环境中的光量来调整大小。当有光线较强时,瞳孔会收缩变窄;当光线很暗时,瞳孔会膨胀来让更多的光进入眼球。
可以把这个理解为一个保护机制,在强光下,通过收缩来减少光对眼睛的高强度刺激;而弱光下,对感光细胞刺激不足,为了不让眼睛过分费力地去寻找目标和识别目标而引起视觉疲劳,所以瞳孔会放大,让更多的光进入。
而接收光的刺激,看到物体后,是否可以准确获取信息(看清物体、识别文本、图像等)则跟视敏度相关。


视敏度 ,就是眼睛能分辨物体细微结构的能力,也就是看清物体的能力。相关实验数据表明,增强亮度可以提高视敏度。也就是说,亮度越强,人眼对物体的识别能力就越强




下面提到两个实验,其中「 正对比极性 」,指在浅色背景上显示深色字体文本,就是对应我们界面设计中的「 浅色模式 」;而「 负对比极性 」,指在深色背景上显示浅色字体文本,即「 深色/暗黑模式 」。

实验1. 德国杜塞尔多夫精神病研究所的Cosima Piepenbrock等相关人员,对「对比极性对视敏度和校对的影响」的研究结果表明:人眼在「浅色模式」下的视敏度要优于「暗黑模式」下,字体越小,浅色模式的优势就更明显。 
实验2. Agelab实验室的乔纳森·多布雷斯(Jonathan Dobres)等相关人员,对「 环境光照条件(模拟白天/夜间)是否影响正对比度极性的优势」的研究表明:夜间,深色模式下阅读小字体文本比浅色模式下阅读要困难得多。 而人们对文本的识别,「浅色模式」下比在「深色模式「要快,白天比晚上更快

对上面两个实验可以用环境光的强弱对视敏度的影响来理解:为方便理解,可以假设我们的界面尺寸足够大,大到覆盖我们视野范围,那就可以将浅色模式中的浅色背景类比为白天(环境光度亮),深色模式中的深色类比为夜间(环境光度弱),而屏幕内的文本、信息,就是我们要识别的物体。亮度越强,人眼对物体的识别能力(视敏度)就越强


从上面的实验来看,无论在白天或夜间环境下,「 浅色模式 」都要比「 深色模式 」更好用


但根据德国蒂宾根大学的Andrea Aleman等相关人员的一项研究表明,长时间处于「浅色模式」下可能会导致近视。其表现为,阅读「浅色模式」下的文本时,脉络膜(跟近视有关的一层膜)会明显变薄;而阅读「深色模式」下的文本时,这层膜明显变厚。

可以理解为长时间处于「浅色模式」下,意味着视敏度的持续维持在较高状态,就像人在长时间高强度工作下可能会导致健康受损一样,眼睛同样也可能会受到损伤。因此相对长期来说,「深色模式」则是更友好的一种形式


那通过适当的设计,是否有可能找到这两者之间的最优解呢?



视觉疲劳/伤害

注视区域光照不足、光线过强、光线分布不均匀、光源闪烁、眩光、反光、目标过小、目标不稳定等,都会造成眼睛超负荷工作,导致视觉疲劳。

光照不足,对应界面交互,可以指屏幕亮度过低,也可以理解为内容和深色背景间的对比度不足。


光线过强,则是屏幕亮度过高,也可以理解为内容和浅色背景间的对比度不足。还有大面积高明度色彩的使用。而像汽车远光灯,也是常见的一种光线过强的产品,并且常常被错误使用。


闪烁会对眼睛造成很大的负荷。在高亮度下,眼睛除了视敏度会增强外,对闪烁的感知也会增强。这方面涉及的产品设计,如显示器的刷新频率,要到达某一程度,人眼才感觉不到屏幕的闪烁。


目标过小,在可识别及相同环境下,目标过小,识别所需的时间越长,也就是更费眼。像界面中的元素,文本字号、图标等,都需要有舒服的可读性。


反光,跟工业产品设计的关系比较密,反光是很容易引起视觉疲劳的和视力伤害。但生活中好像处处有反光,高楼大厦连片的镜面窗户/墙、我们正在看的电脑屏幕、手机屏幕、公交车广告牌的保护罩、汽车的后视镜等等,都会在某些瞬间让你觉得眼睛受到了亿点伤害,这也是很常见的一种光污染。

视角范围

1. 水平方向

水平方向上,双眼视野角度通常可达到120°视角。其中「 有效视域 」为30°,即人眼能立刻看清物体的存在和动作轨迹的范围。其余部分称为诱导视野,也就常说的「 余光 」。


而眼动(头部不动)「 舒适转动区 」通常为60°

如果以眼睛距离屏幕40cm为例,水平最佳视野宽度大概就是21.6cm,在72dpi下,约为600px。在进行文本宽度设定时,可以以此作为依据,来设计内容的显示宽度。



2. 垂直方向

垂直方向上,视野角度通常可达到135°视角,「 有效视域 」为30°「 舒适转动区 」为55°



关于「 最佳视角范围 」及「 眼动舒适区 」的应用,在汽车领域的HMI设计和一些较为复杂的交互活动中有比较多的体现。



听觉对信息传递的感知仅次于视觉,同视觉一样,利用以前的经验来解释输入

相比视觉,听觉更容易引起注意,且反应速度快,可以捕捉各个方向的信息,不受照明条件限制




人类听觉系统对声音的解释可帮助设计人机交互界面中的语音界面,而对有能力缺陷的人,如视障人士来说,「 听觉(语音交互) 」更是一种替代视觉显示的重要形式。

听觉的形成



感知范围

声音有三个要素:音调(频率)、响度(振幅)、音色(材质)。


人类可以听到的声音频率范围为20Hz-20kHz,正常情况下人耳可分辨出约 40多万种 不同的声音。


对语音的辨认频率范围为260Hz-5600Hz。正常情况下,人类语言的频率在:500Hz-3000Hz之间。


感受性、识别性最高的频率范围在1000Hz-4000Hz,低于500Hz,或高于5000Hz时,要达到一定响度才能被听到。

响度

0-20dB,几乎感觉不到
20-40dB,相当于低声说话,轻柔的响声
40-60dB,正常谈话的声音
60-70dB,会感到吵闹、长时间会损害神经细胞
超过70dB,让人感觉烦躁,无法集中注意力
85-90dB,短时间内影响人的听力,破坏神经细胞
超过90dB,听力受损


超过140dB时,引起的是痛觉,而不是听觉,会完全损害听力(欧盟界定的导致听力完全损害的最高临界点)

对音色的辨识和记忆

人耳对各种音色的分辨能力非常强,对经常听到的音色也具有很强的记忆力



比如在同一频段同时演奏不同的乐器,人耳依然可以分辨出有哪些乐器在进行演奏,也能识别出不同动物的叫声。


而对于熟悉的人,比如对父母兄弟姐妹等,经常只通过说话的声音,就能知道是谁;通过脚步声,也可以辨认出来是谁来了等等。

辨别方向

除了对声音的「 音调、响度、音色 」这三个要素的感知之外,人耳还能辨别出听到的声音是「 从哪里/哪个方向传来的 」,也就是声源方位感。

粗糙的声音

瑞士的神经科学家通过研究发现:粗糙的声音(上限约为130 Hz)激活了大脑某些特别的区域。

当重复的声音被认为是刺耳的、无法忍受的时候(特别是在40-80Hz之间),会引起持续的反应,刺激杏仁核、海马体和脑岛,特别是跟突出、厌恶和疼痛相关的区域,而正因为有这些区域参与声音的处理,才会使这类声音会让人感觉到难以忍受。


这也是警报声的应用原理,通过快速重复的频率来引起人们的注意。再结合声音传播不受光照、方向、角度等影响的特性,来提高警报声被人耳检测到的概率。

其他让人感到烦躁、难受的声音,如汽车喇叭声、尖叫声、婴儿哭声等等通常也是在这一频段。

聚焦效应

视觉上的三维图效果,是眼睛先呈「 散焦状态 」,视焦点前后位移产生层次感,从而看到三维平面图画的立体效果。

而人耳的听觉跟视觉相反,可以从众多的声音中「 聚焦到某一点 」上,也就是听觉的「 聚焦效应 」。
比如我们听交响乐时,大脑皮层可以抑制其它乐器的演奏声,把精力和听力集中到其中的一种乐器声音上。还有在公交地铁上,我们同样可以集中精力听广播报站的声音,而忽略车上的其他喧闹声。

这个特性也让语音交互的场景拥有更多的可能性。



触觉属于动觉交流领域,即通过身体的运动/动作来交流。


跟视觉、听觉的感知相比,「 触觉 」最大不同是它的非局部性(全身皮肤),以人体为介质,对皮肤、肌肉的感受器进行刺激,能够 敏感强烈更迅速 的被用户感知,及时传递信息。也 不易受环境影响,无论环境吵杂,或是光线不佳,对其体验效果的影响都不大。



但「 触觉 」传递的信息远少于视觉和听觉,通常作为视觉和听觉反馈的补充。对有能力缺陷的人,如听障、视障人士来说,「 触觉交互 」的应用则是一种很重要的形式。


同时也是用户体验过程中重要因素之一,会直接影响用户对产品的情感体验与交流。在工业产品设计中感受较多,如日常工作生活中常见的家居用品、鼠标、键盘、手机等的外形设计、材质触感等。

触觉的形成

人类的皮肤表面散布着触点,一般指腹最多(人类手指的触觉敏感度是前臂的10倍),其次是头部,最少的是背部和小腿。触点的大小不尽相同,分布不规则。



作用

通过对冷、热、尖锐物体的判断,让身体及时远离危险和伤害,可以对人体起到保护作用。


同时也具有表达情感,辨别情绪的功能。有说法认为「触觉」可能是用来传达人的情感的最佳途径,就像「 拥抱 」和「 安慰的文字/语言 」,体现的情感强度就很不一样。

触觉反馈-触觉学Haptics

借助Haptics技术,通过作用力、振动等「 触觉反馈 」,可以起到传递信息的作用。但想通过「 触觉体验 」来传达恰当的、有用的信息,需要先理解人类是如何诠释不同的「触觉体验」的。


比如想要通过「 振动感知 」来传递有用的信息,需要先了解怎样的振动频率、强度、节奏可以让使用者意识到其代表的是什么意思:成功、失败还是其他呢?这涉及到「 认知 」方面的内容。
通常情况下,「 触觉反馈 」是作为视觉、听觉反馈的一种补充。
如在触控屏上用虚拟键盘输入文字时,通过按键的「 振动反馈 」,让用户清晰及时地了解到自己已经成功按下了某一个按键。相关研究的结果也表明:虚拟键盘加入振动反馈后,是可以提升用户输入时的准确度。


而一些特定场景下,「 触觉反馈 」可以很好的替代视觉和听觉反馈。
比如驾驶汽车时,驾驶员需要将大部分的注意力放在道路环境上,那么通过「 触觉反馈 」,将部分操作结果传递给驾驶员,这一可以在一定程度上减轻驾驶员在视觉和听觉上的负担。



人类的动作通常分为三类:先天、模仿、训练得来的。



由于肢体的结构特点,「 先天 」和「 模仿 」的动作,通常存在一定的局限性。

头部/颈椎

颈椎前屈幅度35-45°,后伸35-45°,左右侧屈各45°,左右旋转各60-80°。

当颈部前倾时,颈椎承受的压力逐渐增大:
前倾0°时,为头部重量,约为4.5-5kg;
前倾15°时,承受压力约为12kg;
前倾30°时,承受压力约为18kg;
前倾45°时,承受压力约为22kg;
前倾60°时,承受压力约为27kg。



结合前面我们讲过的人眼转动的舒适角度和视野范围,可以为一些物品的设计提供参考。

腰部/腰椎

直立,腰伸直自然体位时,腰部可前屈90°、后伸30°、左右侧屈各20-30°、左右旋转各30°。


人体平(仰)卧位时,腰椎承受的压力最小。

腿部/膝关节

膝关节屈膝角度可达120-150°(小腿后部和股后部相贴)。人坐立时,膝关节弯曲90°,小腿和地面垂直放置对腿部最好的,屈膝小于90°时,长时间保持会影响下肢的血液循环。


伸直时一般为0°,有过伸状态5-10°。膝关节屈曲时,有轻微的内旋和外旋运动,约为10°。

手臂/肘关节


肘关节弯曲角度可达140°、过伸角度为0-10°、旋前80-90°、旋后80°-90°。

打字时,手肘弯曲接近90°(水平放置)是最放松的。


手指/手掌

1. 拇指动作幅度

掌侧可以外展约70°,指间关节屈曲约90°,掌拇关节屈曲约20-50°。
和手腕连接处的腕掌关节,能够进行较大程度的屈伸,收展,完成对掌运动。这是拇指特有的,是拇指骨外展,屈和旋内运动的总和,使拇指尖能跟其他的手指和掌面接触。

2. 其他手指动作幅度

掌指关节屈曲约60-90°,近节指间关节屈曲时约为90°,远节指间关节屈曲时约为60-90°。 

3. 手指触控

在使用手机等数字界面时,用「 食指 」和「 拇指 」进行触控是比较自然和常见的行为。


根据麻省理工对人类触觉的实验,食指、拇指的宽度和触控区域有以下数据:


食指平均宽度约16~20mm、指腹触摸区域尺寸约10~14mm、指尖触摸区域尺寸约8~10mm。
拇指平均宽度约25mm、指腹触摸区域尺寸约12~16mm、指尖触摸区域尺寸约10~12mm。

触控控件的最小尺寸要大于触摸的最小尺寸。控件过小,一方面会增大准确触控的难度,另一方面手指会造成遮挡,导致用户无法明确是否已经正确触摸了相应的控件。


(手指触控这部分本来放在上面关于触觉的内容里,后面想了下,「触觉」更多的是指「反馈信息」层面的作用,所以还会归在肢体动作、范围里比较合适。)

4. 手指击键

用键盘打字时,在某些瞬间,多数手指只是放在键位上,没有击键行为,因此键盘按键的驱动力需要大于手指重量产生的力,才足以支撑手指。


ANSI 1988 年建议键盘击键的理想压力应该在0.5N-0.6N之间,一般0.25N-1.5N的压力都是可以接受的。


而对于一些特殊的设备按键,比如工业键盘类的,则需要更大的按键驱动力,因为这类产品的工作环境和活动相对复杂,需要更谨慎的操作。

5. 单手操作

单手对手机等触屏设备进行操作时,一般以四个手指和手掌为依托,用大拇指操作为主,而成年人拇指长度约为6-10cm。


数据表明,一般成年男性,单手全屏操控的屏幕尺寸最大约为4.5英寸,而成年女性,单手操控的极限约为4.0英寸。超过这个尺寸,单手进行全屏操控会有一定困难。


而目前主流的智能手机基本在5英寸以上,根据拇指关节的活动幅度,单手操作时在手掌位置不动的情况下,拇指触及的区域只是很局限的一部分:



以上就是体验设计中涉及人体结构特性的内容部分。
感谢阅读,期待交流。


作者:大鱼小鱼虾米
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

如何进行高质量B端用户访谈?用户研究方法

ui设计分享达人

前言

在上一篇《如何设计高质量B端调研问卷?用户研究方法(一)》一文中,详细介绍了如何通过调研问卷的方式,整理发现用户的浅层需求。

本文将分享另一个更为深层全面的B端用户研究方法——用户访谈。通过面对面地沟通,以及观察用户的表情、行为去挖掘更深层的需求。(文末附模板下载链接)


下面是本次分享的文章结构,标⭐️的为重点部分。

01

用户访谈的两种路径

用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。


线上会议和电话访谈的优势显而易见,可以不受地域限制展开调研访谈,整体的成本也比较低,设计师可以自己找领导或者协调资源去推动。

缺点也是比较明显,沟通起来效率低下,比如我们一定有过“电话里说不清,我们见面详谈”的经历。

所以,相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效,其次对于搭载硬件设备的产品来说,让受访者在真实场景里操作演示,可以发现更多隐性问题。


02

常见的3种受访者类型

在访谈过程中通常会接触到以下3种类型的受访用户,不同类型的用户我们应该怎么接触交流呢?

1.话痨型

话痨型的受访者占大多数,通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说,甚至连对应的解决方案都想好了。

整体接触下来,我觉得该类型的受访者,可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多,例如:“太难用”、“超级麻烦”、“哎  我真的是受不了啊”...

访谈话痨型的受访者,我们需要注意无论怎么聊都要紧扣主题,防止变成了吐槽专场。

其次也要表达肯定,安抚情绪,并对问题进行进一步提问:“您的这些建议真的很棒,也给我们提供新的思路,我都记下来了,我还想确认下,刚才您说的3个关于结算环节的问题,哪一个给您造成的困扰最大?”

2.牙膏型

顾名思义,受访者可能是因为性格内向或害怕说错了不好意思等缘故,在受访过程中问一句答一句,比较容易冷场答案的价值也比较低,例如:“对,是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。

这种情况下要尝试缓解下氛围压力换个形式沟通:“就是随便聊聊,公司派我们来呢,就是因为非常关注用户的使用感受,想收集一波用户反馈与建议,您有啥不满意的地方都可以跟我讲讲,越多越好。”

其次我们在提问的时候也要带有引导性,例如:“还有呢、然后呢、具体说说呢”,如果对方实在说不出所以然,最有效的办法就是进入上机操作环节,通常操作过程中那些问题也会随之暴露出来。


3.专业型

专业型的受访者一般是老板或者店长、经理岗位的员工,他们对于产品或整个门店乃至行业都了解的比较透彻

和这样的受访者沟通,不仅是局限于产品的一些问题挖掘,他们会从这个行业的角度阐述一些个人的见解观点,给我们提供一些有价值的优化方案或者改进方向。

例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效,毕竟他们不需要亲自去做这些执行,而且坦率的说,对于绝大部分产品而言,好用并不能成为其核心竞争力。

他们关心的是如何带来更大的商业价值,类似于如何提升坪效,如何提升门店会员的储值能力等等。而这些老板的关注点,也会给我们未来的产品优化方向打开新的思路,去思考如何给我们的用户创造更高的商业价值。


03

采访者需注意的5个要点

1.多了解行业&业务背景

我们在做访谈之前,首先一定要熟悉产品业务的相关背景、受访商户的基本情况

访谈过程中可能会提及一些专业名词,例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后,省去了不必要的解释环节,可以使访谈推进地更顺利。

其次建议要了解下行业相关的基础知识。尤其是餐饮业态,华南、北方、四川等地都因为饮食习惯的不同,在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后,在提问过程中,也更利于提出一些深刻的问题,而不是浮于表面的提问。

行业相关的分析报告,可以去艾瑞、36氪、发现报告等网站进行查询收集,在此不做赘述。

2.访谈框架不设限

在访谈初期,需要准备一份访谈框架,但并不意味着我们整个过程只能按提纲来提问。尤其是B端这种千载难逢的访谈机会,只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下,除了框架以内的问题,尽可能多发散的去提问

例如餐饮业态,会有各种不同载体的终端设备联动使用,一体机POS、手持的POS、厨房KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下,让我们对于全链路的协作流程也会有更深刻的认知。

再例如后厨会涉及到KDS大屏显示,可以问问目前的大屏显示是否够清晰(字够大),也可以和负责海鲜称重的工作人员聊聊,海鲜的售卖、计价流程,以及菜品双单位(例如:1【条】鱼,重量1【公斤】)的使用等等。

在沟通过程中,一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色,又或者是主产品关联的其他后台产品。


3.讲大白话

在提问的时候要考虑到受访者的年纪和理解能力,如果措辞过于专业,可能会导致受访者理解不到位,因此沟通的过程中要尽可能的说大白话。


4.多看多问多感受

我们都知道没有经历过的事,很难感同身受。有时候看到客户群里,因为产品的各种原因导致商户情绪激动,我们理智上非常理解,但是情感上很难共鸣

因此每次的门店调研,我都会抓住机会观察整个门店的运营情况,去感受那种忙碌的氛围。有时候开始进入营业高峰期,机器出现卡顿或者外卖不接单等情况时,自己的情绪都会一下子紧张起来,也能够深刻感受到产品给客户带来的困扰

当再次有产品迭代优化时,这些体验总能让自己能更容易代入用户的角度思考问题

除了去体会产品对情绪的直接影响,还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。

这些都会帮助我们发现,到底什么是门店运营环节里最重要的模块。

5.做事有始有终

在访谈过程中,不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户:“您的问题我已经记录下来,回去会针对这个问题反馈上报,最迟X天我会让顾问给您回复的”。

这么做一方面也是细节处维护公司品牌的整体售后体验,其次也有助于我们再次回访时,受访商户乐意花时间跟我们聊。


04

用户访谈的3个阶段

了解了用户访谈的一些基本信息和注意点以后,到了本文核心部分,关于整个访谈的推进过程,一共分为3个阶段。

1.准备阶段

① 访谈的3种类型

首先明确访谈的类型,用户访谈的类型主要分为以下三种,最常见的就是第三种类产品使用回访。

新品场景调研

新品调研的访谈,一般是由于业务的发展,可能需要升级或者打磨一款新产品来满足市场的需求。

在访谈的过程中,我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。


潜在商户拜访

当去往一个城市进行批量客户调研的时候,偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。

由于是潜在客户,我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势,他们放弃竞对的原因,以及我们当前产品的功能是否满足客户的需求,还有哪些点不满足,客户重点关注的是什么


产品使用回访

使用回访是最常见的访问类型,主要目的是对商户进行售后维护、提升使用体验

且由于B端产品的复杂性和远距离特点,以及新功能同步给商户存在的滞后性,公司会安排定期的上门回访。如果有这样的机会,UED一定要尽量申请跟着去门店调研。


 问题设计3步走

到了最关键的一步,就是关于访谈的问题设计。

总结一下,问题的设计渠道来源主要有3种。主要还是根据调研目标进行问题设计,另外两种方式,作为辅助。

那具体问题应该怎么设计,这边我们分为3个步骤,从面到点依次拆解进行问题设计。

第一步:了解产品全场景能力

B端产品的特点可以借用《U一点料》的9个字概括,“多场景、全链路、多角色”,所以设计问题前,我们可以从场景+链路+角色/节点功能的维度来设计问题。

以餐饮行业的产品举例,首先建议了解自家产品的全场景业务能力。即从商家端到消费端会经历的产品模块和具备的现有功能,做到心中有数即可,毕竟不会一下子调研这么多模块和功能。

第二步:确定要调研的流程主线

其他ToB产品同理,可根据某个操作链路为主线,确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程,就是提取点餐>下单>结算为主线。

第三步:关键节点问题展开设计

根据刚才确定的主流程  我们找到所有关键节点进行问题框架设计。

以上3个步骤可以理解为,如何在功能极其复杂的B类产品当中,筛选出与访谈目标紧密相连的功能链路避免我们的访谈提纲做的过于冗余没有核心


③ 2种提前准备工作

提前告知

这点也非常重要,每一次去门店调研之前,先由当地负责的顾问与受访商户提前沟通。


一方面是需要与对方预约时间,另外一方面这种访谈对商户而言就相当于优质的售后服务,会有受访商户提前列框架,准备问题。


那么这种情况更有利于调研,因为受访者明确自己的问题点在哪里,就等着调研团队(售后团队)来门店后,好好拉扯一番。

准备材料与设备

万事具备,只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐,准备进入访谈阶段,大致需要准备的东西是以下4种材料工具。

2.访谈阶段

在了解了受访者类型、采访者需要注意的点,以及带着我们设计好的问题,下面正式进入访谈阶段。

① 开场白

到达门店后,我们的顾问会给受访客户做一下来访成员介绍,并讲明此次到店的目的。一般都是产品使用回访,或者新功能推荐培训。


通常来说,受访商户对来访团队总是有很多”心里话“想唠一唠,因此暖场氛围比较容易起来,也有助于我们接下来的沟通


② 访谈中

进入正题以后,我们会先大致了解下受访者最近使用的体验以及遇到的问题,而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言,搜集用户对于产品的真实态度。

其实整个访谈流程我们归纳一下,需要关注的就是四个关键点,手+口+心+颜。

手-实操演示

关于实操演示放在第一个讲,是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”,这种形式对受访者而言需要花更多的时间去思考问题的答案


会遗忘甚至想不起来当时的具体情况,随便的敷衍回答“嗯,还行”、“挺好的”,或者干脆彼此都不在一个频道上。


其次,在操作过程中,建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同,在用户操作的过程中,会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。


回去通过视频仔细分析受访者的操作路径,以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。


口-问具体操作

这个就是根据问题框架进行提问。在这个过程中,通常会穿插着上机操作演示,在现场记录的时候可以先记录个大概,等结束后再仔细整理。

心-问心里感受

问受访者的心理感受,其实就比较偏主观了,我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是,即使是这样开放式的提问,也有提问技巧。


比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。

因为产品一定是有可有优化的空间,“有什么不好用的地方”这样提问的方式就是具体到了某个点上面,具体什么点不好用


而后者的提问方式是基于整个产品,受访者可能会出于不好意思等原因直接说“你们的东西还行吧,还可以”。


颜-关注动作表情

当我们提问产品优缺点的时候,受访者大部分都会带上表情和肢体语言,并且情绪表现和性格有比较大的关系。

性格比较雷厉风行、急躁一点的,通常会像连珠炮一样疯狂输出,并且措辞会比较极端。例如:“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。

接受到这种信息我们首先要做的就是安抚对方的情绪,其次对于这些信息要学会剔除一些夸张描述。

性格温和一点的受访者,在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”,如果某个高频操作真的很影响日常工作效率,往往会表现得很无奈,甚至还有点委屈。

那么无论是哪种表现,其实都要考验采访者的经验,结合产品的功能去考虑,找到反馈中真实有效的部分。

通过以上4个环节,其实就可以收集到很多有用的信息,语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。

③ 结束语

访谈结束后,我们需要做个简单的总结回顾。将关键问题再次复述确认,进行查漏补缺并且再次感谢受访者,表达他们今天提的建议价值很大,后续会梳理出可落地的点优化到产品当中。


如果说聊得比较开心,大多数的受访商户都会邀请来访团队吃个饭再走,也算是额外的福利。在就餐过程中的非正式场合交流,也可以聊聊门店的一些运营情况等等,帮助我们更深入的了解这个行业。


3.收尾阶段

① 资料梳理

我们在访谈过程中会有大量未整理的一手记录,结束后需尽快的梳理,尽可能详细的记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具,方便分享修改。(本文提供模板可下载)如果是连续访谈几位商户,我会在访谈结束以后,迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题,去下一家受访商户的时候可以验证下该问题的普遍性。

② 整理落地

输出后我们需要再次进行提炼,将有价值可落地的问题点提取出来,进行汇报分享,并找到相对应的产品研发进行探讨排期,这样就形成了一个完整的闭环,真正做到了发现问题、解决问题.

③ 流程概括

前文絮絮叨叨说了很多,其实关于用户访谈这事用6个字就可以概括,简单理解:


问谁?问啥?答啥?改啥?

能够回答清楚这4个问题,那么这就是一次有价值的访谈经历。

最后

ToB业务的特点就是会有一定的行业壁垒,设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵,对于行业的不了解。


或者很多人对于B端的认知还停留在,B端好像没啥好设计的,都是现成的组件库拖一拖,成就感比C端差远了。


那么做访谈、体验优化的意义是什么呢?


在《U一点料》一书中提到,B端产品做体验设计创新时,有2个要诀

要诀1:更好地帮助用户降低经营成本,增加企业收入 
要诀2:更好地在业务链路上促进用户协同,提升工作效率 
《U一点料》 

所以,无论我们采取何种方式去研究用户,去挖掘需求,最终的目标与意义都是为了使整个系统,更贴合用户的真实使用场景,让系统可以成为用户在工作过程中一件“称手的工具”


如何真正理解用户需求,给他们最想要的东西,比如高效协同、效率提升,或者创造更多的商业价值。这不仅仅是业务方的事,也值得每一位设计师参与深思。

模板下载链接: https://pan.baidu.com/s/15EaUUlqZUvq77wN197hUIw 密码: mn2g 


作者:B端设计情报局
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


这篇导流条设计方法,让我打开了新思路

ui设计分享达人

// 写在前面


端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品,带来使用量的提升,从而实现用户规模提升的一种增长手段。随业务快速增长,有驾从百度汽车频道衍伸出了有驾小程序、M站、PC站以及APP等多纬度的产品矩阵,依托各端流量实现矩阵产品间的导流,逐步积累用户规模,是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例,分享导流增长探索的设计思路与实践经验。



// 为什么要做导流


导流的目的

对于业务本身而言,随着移动互联网流量红利期的结束,获取新用户的成本越来越高,不管是新产品还是成熟型产品,都需要通过导流的手段来持续扩充新用户。其次,对于有驾产品生态而言,需要各端产品间的相互联动,协同发挥优势,实现流量价值最大化。


导流的优势

  • 成本低,相较于投放、活动等渠道流量获取方式,矩阵导流成本低;

  • 高意向,用户购车意向明确更容易实现商业转化;

  • 可共享,用户数据及行为关联互通。


// 如何做好导流设计


1.问题分析

通过梳理核心场景的4种导流条,发现各个场景导流形式各异,用户缺乏统一认知,导流引导语单一内容吸引力弱。在用户在浏览页面时,点击功能入口或想要继续查看更多内容,需要下载APP才能继续阻碍用户浏览

  • 缺乏统一认知:视觉表达形式不成体系,用户感知不够;

  • 内容吸引力弱:内容单一缺乏吸引力,用户没有点击欲望;

  • 阻碍用户浏览:打断用户正常使用功能,影响用户体验。



从导流链路的用户行为来看,整个流程下载路径过长,发现用户流失较大的转化点:

  • 从小程序落地页到下载页:在进入小程序浏览页面时,用户没有注意到导流条就滑走了;

  • 点击导流条进入下载页:点击导流条会先调起导流弹窗,点击确认后再进入到下载页,用户未选择下载就退出了。



2.明确设计方向

针对导流现状缺乏统一认知,内容吸引力弱、阻碍用户浏览、下载路径过长的问题,我们搭建了一个完整的导流链路图,根据用户增长模型,把用户生命周期各节点的用户行为与产品触点一一罗列出来,找到增长路径的设计机会点。



通过以上的问题分析,如何建立用户和产品的链接,保障友好的体验,是本次导流升级要解决的问题。根据用户关键行为,我们可以将整个导流链路拆分为3个阶段来挖掘主要机会点:

  • 下载前:兴趣激发导流吸引,建立用户稳定认知;

  • 下载中:强化用户转化动机,刺激用户完成下载;

  • 下载后:保障还原体验畅通,提升首次使用体验。



下面将分别介绍导流下载前阶段的设计落地实践,以及下载中、下载后阶段的延伸设计思考。


// 下载前


1.强化触点吸引

是否能成功引起用户注意,是转化开始的第一步,统一的视觉风格和满足用户诉求的内容,有利于增强导流条的吸引力。


1)收敛导流条类型

针对【阻碍用户浏览】打断用户正常使用功能、用户没有跳转预期的体验问题,下线了阻断式和截断式两种体验不友好的导流类型,将原来4种导流类型收敛为2种,仅保留通用导流条和功能延展导流条,基于这2种导流形态进行深入的设计探索。



2)建立通用视觉标准

针对【缺乏统一认知】视觉表达形式不成体系、用户感知不够的视觉问题,建立了通用导流条标准化规范。统一视觉形态,优化为页面内通栏嵌入式,同时融入品牌色强化用户感知,根据页面布局制定了不同的展示规则。



上线后,内嵌导流条在展现受限的情况下,导流转化数据与改版前基本持平,为了进一步提升导流的点击效果,开始探索场景化定制提转的设计方向。


3)定制场景化内容

针对【内容吸引力弱】内容单一缺乏吸引力、用户没有点击欲望的内容问题,在通用标准化形态的基础上,根据不同场景用户诉求点,丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化3个方向验证对转化的影响。

  • 内容定制:丰富导流利益点、场景化内容更能激发用户兴趣,促进转化达成;

  • 按钮文案:转化按钮文案导向性明确、内容与导流利益点匹配,可以助力按钮转化提升;

  • 氛围强化:导流样式上适度弱化氛围、样式更倾向于原生功能,有助于提升导流条点击。



2.拓展场景扩量

复利通用标准导流条的成功经验,应用到功能延展类导流条中继续验证有效性,从产品价值点出发,挖掘高流量场景的机会点从而带来转化增量。


1)价值传递

根据小程序和APP两端各自的不同点,分别从功能差异及体验差异两个方向进行优化。

  • APP特有功能:APP完善的功能体验可以更好满足用户诉求,例如参配浏览场景下,引导用户体验搜索及横屏查看的高频功能,对于导流转化有正向帮助;

  • 各端体验差异:小程序和APP两端体验存在差异,例如图片浏览场景下,APP清晰流畅的浏览体验及放大全屏查看图片的交互体验,能够刺激用户转化。



2)价值延续

当用户完成核心内容消费后,是否可以引导用户去APP继续浏览更多相关内容,进而引导用户下载呢?

  • 服务透传:平台服务内容传递,例如在内容落地页文末增加品牌广告导流条,帮助用户建立品牌认知;

  • 相关推荐:引导相关内容消费,例如在文章或视频页增加相关推荐导流条,引导用户浏览更多相似内容。




// 下载中


当用户通过导流条进入到下载流程时,还有哪些手段可以刺激用户激活减少流失呢?

  • 强化下载动机:下载页前置APP落地页内容,例如将通用下载页优化为场景化下载页,给用户超前产品体验吸引转化;

  • 减少用户流失:缩短链路简化流程,例如可在下载中间页完成应用下载,同时退出下载页时增加挽留。




// 下载后


当用户在应用商店下载完成后,我们还能做哪些提升首次启动APP的体验呢?

  • 还原链路畅通:提升场景还原成功率,减少频繁提示信息干扰;

  • 建立用户心智:引导新用户探索功能,根据用户兴趣推荐适合的内容。


以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考,为大家提供可以继续探索的方向。



// 写在最后


总结一下本篇文章关于导流的体验设计要点:

  • 全链路洞察,对导流链路进行拆解,通过盘点导流链路的用户行为,明确每个节点的设计方向;

  • 降低广告干扰性,减少用户浏览过程中的阻断感,适度弱化广告氛围;

  • 用户的视角引导,让用户专注于产品本身传递的价值,引领用户完成对产品的探索从而完成下载激活。


希望以上的设计思考,可以带给大家一些启发。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


分析2022年大厂新孵化的App,一起发现它们设计的独特之处

资深UI设计者

以下是碳水Sir在App Store发现的几款“宝贝”,之所以称为“宝贝”是因为产品中可学到的东西太多了,每个产品视觉UI以及动效都有其独特风格(当然网上也有别人总结过的产品,我这里就不拿出来重复说了)我仅针对未总结的大厂产品,进行设计细节拆解,看看优秀的产品设计到底好在哪里,请君细细品味。





(淘宝 - 屋颜 - 一站式潮流家居平台)
(字节 - 抖音盒子 - 潮流时尚电商平台)
(腾讯 - doX多克斯 - 生活碎片视频社交)
(淘宝 - 吃货笔记 - 记录美食好生活)
(得物旗下 - 95分 - 奢潮二手平台)
(腾讯 - PODO漫画 - 独特交互体验漫画阅读平台)
(荔枝 - 皮玩 - 语音社交平台)
(陌陌 - 咔咔 - 实拍互动交友平台)

排名不分先后,从以上几款产品logo中不难看出,图形设计都偏向于具像化,传递出正向的情绪,颜色方面使用荧光黄、青绿、渐变粉等凸显年轻、大胆,富有朝气。


1.屋颜


第一眼看到这个名就有被惊艳。首先屋颜是屋檐的斜译,檐变成颜,中华文字博大精深,读起来也不违和,同时也直观呈现出产品定位属性。logo采用字体设计手法,“屋”字经过设计手法使线条呈现出立体空间感,也间接体现出产品是和房屋软装相关,同时为屋内添置“颜色”(软装)相关的产品。一个logo两层含义,通过字体设计以及谐音表现,巧妙的融入其中。

·




直观来看,页面大量留白,图片质量高级且风格统一,均采用素底作为产品首图,很好的提升产品整体调性。
图形方面均采用直角元素,配图、banner、按钮、icon无一例外;细线风格设计使产品极具品质感,有种无印良品的现代极简主义风潮。也叫MUJI风。
瓷片区的配图采用线性+2.5D风格,使画面富有空间层次,能撑住页面头部重要位置,且再次突出产品极简主义风格。当然还有空状态、无网络环境下的配图等等都很统一。




动效方面最值得关注的是下拉刷新,使用吊灯作为下拉效果,当向下滑动时电线被拉扯长,但断不了,给人以安全可靠的产品透传,也算是通过创意设计助力产品体验的手段之一。释放刷新时,轮播不同的家居icon图标,再次强化定位产品属性,且刷新时不至于乏味。
加载状态采用+号线条旋转表现,同时在结尾变成一个方形,这么极简的设计之前其他产品从未出现过,同时它也符合屋颜的产品调性(新家软装要做加法,仅个人理解)也算是一个设计亮点。




最新颖的是产品特有的【3D实景逛店】功能,进一步强化家具与室内的强相关性,为什么这么说,单从买家具上,线上买前只能靠照片来间接联想买后填入家中的情况,并不能按照自己习惯多角度查看家具。又或者因为忙,没时间去线下家具馆,或者怕白去一趟,通过【3D实景逛店】快速解决这部分用户需求。同时,也给线下家具馆增加了更多曝光度的可能性。




至此,屋颜的设计细节讲解就结束了,希望产品体验越做越好。


2.抖音盒子


抖音旗下的电商平台,整体风格清爽直观,绿色与紫色搭配也是一种时尚风。相比其他电商产品,抖音盒子没有金刚区图标设计以及营销类的占位图,相反金刚区仅展示奢侈品实物图,产品图大小做了统一,视觉呈现很高级,同时下列瀑布流商品中首图没有活动促销等信息干扰,只展示商品图,突出其时尚潮牌好物的特性,同时也与当前清爽、高级的设计风格相一致。




几处设计细节值得参考,首先是底部Tab栏点击动效,承载抖音logo的故障风效果,黑色+紫色故障效果一来告知与抖音具有相关联性,是旗下电商产品;二来黑色Tab图标能很好的压住“紫绿主色调”的跳跃感,不至于太过俏皮脱离电商属性。
并且图标的整体性与统一性都做得很好,“小红点”的设计采用品牌色“小紫点”呈现(小小的颜色改变),更加强化了产品风格与调性的统一,(小红点并不是只能用红色)这点值得学习。




最后想告诉大家,产品在每个阶段设计形式都会发生改变,比如1.0.1-1.0.2可能是轻微调整,1.0.0-2.0.0就是大的视觉升级。可能因为产品发展或用户变化,使得产品设计风格发生改变, 但要知道每个上线版本一定是当前方案的最优解。就如你看到的“抖音盒子”现在是1.9.0版本号,或许在不久的将来就会全新升级。这就不得而知了。


3.doX多克斯


是一款短视频社交平台,与其他社交产品不同,doX主打短视频内容社交,用户通过拍摄上传有趣的短视频内容,来认识志同道合的朋友。虽然与抖音同为短视频平台,但抖音更侧重视频分发,而doX侧重于通过视频与用户建立联系,一个视频下可以跟拍多条,有点像qq以前的漂流瓶,只是换种呈现方式。这种陌生人视频交友有一丝“探探”的味道。




设计上面单看logo以为会沿用手绘线稿类似的风格。整体使用下来,仅在我的页面顶部背景中用到,其余均采用断线像素风icon设计,绿+白的设计风格,可能也是为了营造出一种陌生人交友的科幻感觉吧。
发起拍摄页,背景会有噪点动效,也是营造一种拍摄前无镜头的感觉,引导用户随手记录。




最后产品的切入方向很新颖,但是否能在短视频风口分出一杯羹就不知道了,但目前来说整体设计风格框架已搭建起来,剩下的就是不断填补及完善设计,使其更加统一,希望doX越来越好。


4.吃货笔记


第一次接触“吃货笔记”就被页面整体设计风格吸引。粗线图标+拟物图标形式空前新潮,给人眼前一亮的感觉。它类似于“大众点评”,是个宝藏探店美食分享的平台。通过线上探店选择报名-自行到店-发表动态-上传票据-提取饭票,来获得优惠消费的同时提高平台UGC内容的产出。可惜的是目前仅支持【广州】店铺(可能是先做小范围本土化尝试然后再逐渐扩大地域),外地用户只能看看界面并不能真实使用,这点很遗憾。
动态布局也很有创意,第一张大图,其他小图呈现,五宫格的样式使布局统一,且更好突出第一张图的主视觉层级。




如今本地餐饮服务平台已经做得很好了,“吃货笔记”在尝试从优化福利流程、视觉表现、设计手法等多维度探索新的操作形式,这种身先士卒的精神值得尊敬,单说设计表现的细致,就以超过了大部分产品。当然,每一款好的产品离不开设计,更离不开产品功能是否真实满足用户需求,让用户使用轻松、解决需求后是否带来爽点。




图标用色很鲜明,均采用3D质感表现形式,能看出设计上面下了很多功夫。底部Tab栏选中图标也采用3D质感表现,与金刚区和空状态图标形成呼应,增强产品风格记忆点。产品目前的评论和下载量都不像没推过一样,可能产品分享度不高导致很多一部分人不知道,所以增加徽章模块评价打卡获得奖励,并以此成就来满足用户心里预期,从而增加使用黏性和传播分享。




最后这款产品设计表现都特别出众,通过空状态文案等内容也能看出产品的个性特征。例如:“虾米都没有,快看看其他的”,还有很多小的设计细节,这里就不一一说了,大伙儿自行下载体验一下吧。


5.95分


95分是得物旗下的分离出来的全新App,主打潮流闲置交易平台,而得物定位是新一代潮流网购电商,两者还是有所区别。但从UI设计角度,还是能看到得物的影子,潮流前线,并且整体风格时尚统一,很多细节值得在这里展开说说。




整个设计清爽直观、没有多余装饰元素,这就要求图标必须做到极致,才能撑住整个页面。我罗列了一下可能出现的图标,轻质感毛玻璃效果,结合统一的渐变元素使得每个图标都精致耐看,值得研究。线性图标也是一样,整体配套,这套图标应该下了不少功夫。




在二手平台存量竞争的时代,能有一款产品尝试新的设计风格,并且把近几年火起来的毛玻璃风格相融合,这种走在设计前线的作风与95分产品潮流前线的调性一致,单说设计尝试这种做法就已经超越了大多数产品了。


6.PODO漫画


毫不夸张,这款产品打开了我对交互表现与实现的新认知。我看了一下最早发布是去年9月27日,到目前为止短短8个月时间,就能让PODO这款产品的交互设计做到如此优秀,背后依靠腾讯,也有游戏元素的影子,这就不足为奇了。




使用下来基本没有太多图标元素,更多是把屏幕空间分给了动漫封面,一行三个动漫排列,背景与主体人物分开,滑动时二者在空间层进行错位,营造一种错层的空间感,使原本扁平的图像瞬间立体了许多很是新奇。




点开动漫详情,图文信息依次从上到下展开,引导用户视觉享受,并且头图中的动漫人物也做了动效设计,全览下来很是细致。除此之外,还有三个明显的交互细节,分别是:设置页展开交互、阅读页底部导航交互以及目录页的交互样式,都以新的表现形式呈现出来,作为设计师的我们现在不能再说:“设计已经玩不出新的花样”这样的说法了。




太多的交互动效就不一一列举了,赶紧收入囊中吧!


7.皮玩


通过了解得知“皮玩”是荔枝App旗下控股产品,同样也在入局陌生人社交领域。但值得注意的是该产品上线1个月,内部框架及UI界面已相对完整,卡片、插图、动效、图标、以及一些趣味设计都已上线,应该是一个成熟团队孵化的项目,上线前的测试应该没少下功夫,才能在产品初期做的如此完善。logo采用渐变黄底+吐舌头表情相结合,搞怪趣味要用嘴说话这样的印象。定位:更好玩的语音社交算说得过去 。




初次体验,第一感受就是采用贴纸风的设计元素,icon与元素都具有较强的设计感,饱和度较低的配色加上白色描边,就如产品说的“玩一下、皮一下”相呼应,产品的整体颜色采用渐变黄和渐变绿,配色很大胆,同时体现出该产品用户所代表的具有兴趣多元化、喜欢尝鲜这样一个群体。同时产品也是想通过这种设计吸引用户使用。




产品中处处都能看到微动效,使静态的画面变得活泼许多,这种做法也是为了给用户营造一种活跃的氛围,增加平台活跃度。


8.咔咔


咔咔是陌陌孵化的一款社交产品,最近发现一些大厂旗下产品都在独立运营,目的也是为了和主产品脱离关系,防止激烈竞争导致产品停止运营。年前很火的“啫喱”想必就是吃亏在这方面。回归正题,首页是以视频为主图片为辅的瀑布流形式呈现,停到某一位置则直接循环播放该视频,排版方式极具新颖,当体验下来眼球左右移动总是会打断我信息的获取,有点强制引导用户看大图视频内容的感受。点开则可以与对方进行互动点赞评论。




看看模块,采用类似“探探”卡片交互左滑不喜欢右滑喜欢来让用户进行操作,但与“探探”不同的是此互动是开放的,用户选择满意的动态内容添加到卡片后,陌生人可看到展示内容,并且她被多少人喜欢都会展示出来,相当于是个人名片,有种抖音+探探的味道。并不具有一对一的个人隐私性,这是与探探最直接的区别。




看看模块中,“打招呼”是与对方建立私聊的唯一方式,如果该用户已关注但未打招呼,把卡片划走,那再也不能与对方建立私聊,除非对方通过“看看”模块与你打招呼。这个产品细节很容易因为用户不理解或者手滑就无法与上个用户进行“打招呼”私信,且私信功能仅在触发“打招呼”后才能交流,入口少、且不易理解,不知道是产品经理的有意为之还是被遗漏掉的地方。




消息页的添加入口,用折叠手法展示,降低频繁跳页的割裂感,同时缩起时也不会占用消息列表。
消息列表是通过“打招呼”保存下的私密消息,聊天形式极具特色,黑色背景加上红紫渐变列表有种夜店嗨皮的即视感观,这里就不过多评价,大家领悟吧。




设计中还值得关注一点,就是个人主页中的个性标签,我罗列出22个,当用户发表三个同类动态即可点亮一个标签,此标签也会代替文字描述承载动态内容的作用,用户选择已点亮 的icon即展示对应标签内容了,相当于动态中的标签分类,但前提发表动态时选择对应你标签,不然发表后的动态不能二次修改。这种通过标签点亮的功能也是为了让用户UGC内容更加多元化,同时也想通过标签来吸引用户多多发动态的。创意点是好的,但是否能达到好的效果,还是要拭目以待。




相比其他产品,咔咔是我一直关注的产品,同时也是特别喜欢的产品之一,所以我分享给你们。


9.结语


设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。

本期产品细节分析结束,点击原文链接查看更多,我们下期再见!

作者:碳水Sir;公众号:草蓉三石



作者:碳水sir

链接:https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html

来源:站酷

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


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


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


                         

日历

链接

个人资料

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

存档