// 写在前面
端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品,带来使用量的提升,从而实现用户规模提升的一种增长手段。随业务快速增长,有驾从百度汽车频道衍伸出了有驾小程序、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的体验呢?
还原链路畅通:提升场景还原成功率,减少频繁提示信息干扰;
建立用户心智:引导新用户探索功能,根据用户兴趣推荐适合的内容。
以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考,为大家提供可以继续探索的方向。
// 写在最后
总结一下本篇文章关于导流的体验设计要点:
全链路洞察,对导流链路进行拆解,通过盘点导流链路的用户行为,明确每个节点的设计方向;
降低广告干扰性,减少用户浏览过程中的阻断感,适度弱化广告氛围;
用户的视角引导,让用户专注于产品本身传递的价值,引领用户完成对产品的探索从而完成下载激活。
希望以上的设计思考,可以带给大家一些启发。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
以下是碳水Sir在App Store发现的几款“宝贝”,之所以称为“宝贝”是因为产品中可学到的东西太多了,每个产品视觉UI以及动效都有其独特风格(当然网上也有别人总结过的产品,我这里就不拿出来重复说了)我仅针对未总结的大厂产品,进行设计细节拆解,看看优秀的产品设计到底好在哪里,请君细细品味。
(淘宝 - 屋颜 - 一站式潮流家居平台)
(字节 - 抖音盒子 - 潮流时尚电商平台)
(腾讯 - doX多克斯 - 生活碎片视频社交)
(淘宝 - 吃货笔记 - 记录美食好生活)
(得物旗下 - 95分 - 奢潮二手平台)
(腾讯 - PODO漫画 - 独特交互体验漫画阅读平台)
(荔枝 - 皮玩 - 语音社交平台)
(陌陌 - 咔咔 - 实拍互动交友平台)
排名不分先后,从以上几款产品logo中不难看出,图形设计都偏向于具像化,传递出正向的情绪,颜色方面使用荧光黄、青绿、渐变粉等凸显年轻、大胆,富有朝气。
第一眼看到这个名就有被惊艳。首先屋颜是屋檐的斜译,檐变成颜,中华文字博大精深,读起来也不违和,同时也直观呈现出产品定位属性。logo采用字体设计手法,“屋”字经过设计手法使线条呈现出立体空间感,也间接体现出产品是和房屋软装相关,同时为屋内添置“颜色”(软装)相关的产品。一个logo两层含义,通过字体设计以及谐音表现,巧妙的融入其中。
直观来看,页面大量留白,图片质量高级且风格统一,均采用素底作为产品首图,很好的提升产品整体调性。
图形方面均采用直角元素,配图、banner、按钮、icon无一例外;细线风格设计使产品极具品质感,有种无印良品的现代极简主义风潮。也叫MUJI风。
瓷片区的配图采用线性+2.5D风格,使画面富有空间层次,能撑住页面头部重要位置,且再次突出产品极简主义风格。当然还有空状态、无网络环境下的配图等等都很统一。
动效方面最值得关注的是下拉刷新,使用吊灯作为下拉效果,当向下滑动时电线被拉扯长,但断不了,给人以安全可靠的产品透传,也算是通过创意设计助力产品体验的手段之一。释放刷新时,轮播不同的家居icon图标,再次强化定位产品属性,且刷新时不至于乏味。
加载状态采用+号线条旋转表现,同时在结尾变成一个方形,这么极简的设计之前其他产品从未出现过,同时它也符合屋颜的产品调性(新家软装要做加法,仅个人理解)也算是一个设计亮点。
最新颖的是产品特有的【3D实景逛店】功能,进一步强化家具与室内的强相关性,为什么这么说,单从买家具上,线上买前只能靠照片来间接联想买后填入家中的情况,并不能按照自己习惯多角度查看家具。又或者因为忙,没时间去线下家具馆,或者怕白去一趟,通过【3D实景逛店】快速解决这部分用户需求。同时,也给线下家具馆增加了更多曝光度的可能性。
至此,屋颜的设计细节讲解就结束了,希望产品体验越做越好。
抖音旗下的电商平台,整体风格清爽直观,绿色与紫色搭配也是一种时尚风。相比其他电商产品,抖音盒子没有金刚区图标设计以及营销类的占位图,相反金刚区仅展示奢侈品实物图,产品图大小做了统一,视觉呈现很高级,同时下列瀑布流商品中首图没有活动促销等信息干扰,只展示商品图,突出其时尚潮牌好物的特性,同时也与当前清爽、高级的设计风格相一致。
几处设计细节值得参考,首先是底部Tab栏点击动效,承载抖音logo的故障风效果,黑色+紫色故障效果一来告知与抖音具有相关联性,是旗下电商产品;二来黑色Tab图标能很好的压住“紫绿主色调”的跳跃感,不至于太过俏皮脱离电商属性。
并且图标的整体性与统一性都做得很好,“小红点”的设计采用品牌色“小紫点”呈现(小小的颜色改变),更加强化了产品风格与调性的统一,(小红点并不是只能用红色)这点值得学习。
最后想告诉大家,产品在每个阶段设计形式都会发生改变,比如1.0.1-1.0.2可能是轻微调整,1.0.0-2.0.0就是大的视觉升级。可能因为产品发展或用户变化,使得产品设计风格发生改变, 但要知道每个上线版本一定是当前方案的最优解。就如你看到的“抖音盒子”现在是1.9.0版本号,或许在不久的将来就会全新升级。这就不得而知了。
是一款短视频社交平台,与其他社交产品不同,doX主打短视频内容社交,用户通过拍摄上传有趣的短视频内容,来认识志同道合的朋友。虽然与抖音同为短视频平台,但抖音更侧重视频分发,而doX侧重于通过视频与用户建立联系,一个视频下可以跟拍多条,有点像qq以前的漂流瓶,只是换种呈现方式。这种陌生人视频交友有一丝“探探”的味道。
设计上面单看logo以为会沿用手绘线稿类似的风格。整体使用下来,仅在我的页面顶部背景中用到,其余均采用断线像素风icon设计,绿+白的设计风格,可能也是为了营造出一种陌生人交友的科幻感觉吧。
发起拍摄页,背景会有噪点动效,也是营造一种拍摄前无镜头的感觉,引导用户随手记录。
最后产品的切入方向很新颖,但是否能在短视频风口分出一杯羹就不知道了,但目前来说整体设计风格框架已搭建起来,剩下的就是不断填补及完善设计,使其更加统一,希望doX越来越好。
第一次接触“吃货笔记”就被页面整体设计风格吸引。粗线图标+拟物图标形式空前新潮,给人眼前一亮的感觉。它类似于“大众点评”,是个宝藏探店美食分享的平台。通过线上探店选择报名-自行到店-发表动态-上传票据-提取饭票,来获得优惠消费的同时提高平台UGC内容的产出。可惜的是目前仅支持【广州】店铺(可能是先做小范围本土化尝试然后再逐渐扩大地域),外地用户只能看看界面并不能真实使用,这点很遗憾。
动态布局也很有创意,第一张大图,其他小图呈现,五宫格的样式使布局统一,且更好突出第一张图的主视觉层级。
如今本地餐饮服务平台已经做得很好了,“吃货笔记”在尝试从优化福利流程、视觉表现、设计手法等多维度探索新的操作形式,这种身先士卒的精神值得尊敬,单说设计表现的细致,就以超过了大部分产品。当然,每一款好的产品离不开设计,更离不开产品功能是否真实满足用户需求,让用户使用轻松、解决需求后是否带来爽点。
图标用色很鲜明,均采用3D质感表现形式,能看出设计上面下了很多功夫。底部Tab栏选中图标也采用3D质感表现,与金刚区和空状态图标形成呼应,增强产品风格记忆点。产品目前的评论和下载量都不像没推过一样,可能产品分享度不高导致很多一部分人不知道,所以增加徽章模块评价打卡获得奖励,并以此成就来满足用户心里预期,从而增加使用黏性和传播分享。
最后这款产品设计表现都特别出众,通过空状态文案等内容也能看出产品的个性特征。例如:“虾米都没有,快看看其他的”,还有很多小的设计细节,这里就不一一说了,大伙儿自行下载体验一下吧。
95分是得物旗下的分离出来的全新App,主打潮流闲置交易平台,而得物定位是新一代潮流网购电商,两者还是有所区别。但从UI设计角度,还是能看到得物的影子,潮流前线,并且整体风格时尚统一,很多细节值得在这里展开说说。
整个设计清爽直观、没有多余装饰元素,这就要求图标必须做到极致,才能撑住整个页面。我罗列了一下可能出现的图标,轻质感毛玻璃效果,结合统一的渐变元素使得每个图标都精致耐看,值得研究。线性图标也是一样,整体配套,这套图标应该下了不少功夫。
在二手平台存量竞争的时代,能有一款产品尝试新的设计风格,并且把近几年火起来的毛玻璃风格相融合,这种走在设计前线的作风与95分产品潮流前线的调性一致,单说设计尝试这种做法就已经超越了大多数产品了。
毫不夸张,这款产品打开了我对交互表现与实现的新认知。我看了一下最早发布是去年9月27日,到目前为止短短8个月时间,就能让PODO这款产品的交互设计做到如此优秀,背后依靠腾讯,也有游戏元素的影子,这就不足为奇了。
使用下来基本没有太多图标元素,更多是把屏幕空间分给了动漫封面,一行三个动漫排列,背景与主体人物分开,滑动时二者在空间层进行错位,营造一种错层的空间感,使原本扁平的图像瞬间立体了许多很是新奇。
点开动漫详情,图文信息依次从上到下展开,引导用户视觉享受,并且头图中的动漫人物也做了动效设计,全览下来很是细致。除此之外,还有三个明显的交互细节,分别是:设置页展开交互、阅读页底部导航交互以及目录页的交互样式,都以新的表现形式呈现出来,作为设计师的我们现在不能再说:“设计已经玩不出新的花样”这样的说法了。
太多的交互动效就不一一列举了,赶紧收入囊中吧!
通过了解得知“皮玩”是荔枝App旗下控股产品,同样也在入局陌生人社交领域。但值得注意的是该产品上线1个月,内部框架及UI界面已相对完整,卡片、插图、动效、图标、以及一些趣味设计都已上线,应该是一个成熟团队孵化的项目,上线前的测试应该没少下功夫,才能在产品初期做的如此完善。logo采用渐变黄底+吐舌头表情相结合,搞怪趣味要用嘴说话这样的印象。定位:更好玩的语音社交算说得过去 。
初次体验,第一感受就是采用贴纸风的设计元素,icon与元素都具有较强的设计感,饱和度较低的配色加上白色描边,就如产品说的“玩一下、皮一下”相呼应,产品的整体颜色采用渐变黄和渐变绿,配色很大胆,同时体现出该产品用户所代表的具有兴趣多元化、喜欢尝鲜这样一个群体。同时产品也是想通过这种设计吸引用户使用。
产品中处处都能看到微动效,使静态的画面变得活泼许多,这种做法也是为了给用户营造一种活跃的氛围,增加平台活跃度。
咔咔是陌陌孵化的一款社交产品,最近发现一些大厂旗下产品都在独立运营,目的也是为了和主产品脱离关系,防止激烈竞争导致产品停止运营。年前很火的“啫喱”想必就是吃亏在这方面。回归正题,首页是以视频为主图片为辅的瀑布流形式呈现,停到某一位置则直接循环播放该视频,排版方式极具新颖,当体验下来眼球左右移动总是会打断我信息的获取,有点强制引导用户看大图视频内容的感受。点开则可以与对方进行互动点赞评论。
看看模块,采用类似“探探”卡片交互左滑不喜欢右滑喜欢来让用户进行操作,但与“探探”不同的是此互动是开放的,用户选择满意的动态内容添加到卡片后,陌生人可看到展示内容,并且她被多少人喜欢都会展示出来,相当于是个人名片,有种抖音+探探的味道。并不具有一对一的个人隐私性,这是与探探最直接的区别。
看看模块中,“打招呼”是与对方建立私聊的唯一方式,如果该用户已关注但未打招呼,把卡片划走,那再也不能与对方建立私聊,除非对方通过“看看”模块与你打招呼。这个产品细节很容易因为用户不理解或者手滑就无法与上个用户进行“打招呼”私信,且私信功能仅在触发“打招呼”后才能交流,入口少、且不易理解,不知道是产品经理的有意为之还是被遗漏掉的地方。
消息页的添加入口,用折叠手法展示,降低频繁跳页的割裂感,同时缩起时也不会占用消息列表。
消息列表是通过“打招呼”保存下的私密消息,聊天形式极具特色,黑色背景加上红紫渐变列表有种夜店嗨皮的即视感观,这里就不过多评价,大家领悟吧。
设计中还值得关注一点,就是个人主页中的个性标签,我罗列出22个,当用户发表三个同类动态即可点亮一个标签,此标签也会代替文字描述承载动态内容的作用,用户选择已点亮 的icon即展示对应标签内容了,相当于动态中的标签分类,但前提发表动态时选择对应你标签,不然发表后的动态不能二次修改。这种通过标签点亮的功能也是为了让用户UGC内容更加多元化,同时也想通过标签来吸引用户多多发动态的。创意点是好的,但是否能达到好的效果,还是要拭目以待。
相比其他产品,咔咔是我一直关注的产品,同时也是特别喜欢的产品之一,所以我分享给你们。
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,我们下期再见!
作者:碳水Sir;公众号:草蓉三石
作者:碳水sir
链接:https://www.zcool.com.cn/article/ZMTQwMzM4OA==.html
来源:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
WWDC22 全球开发者大会结束,有太多小众产品脱颖而出。无形中有一股巨大的力量,在慢慢崛起,那便是来自世界各地的小型开发团队和独立开发者。他们的产品小而美,小到仅靠一个功能撑起产品,美到完全忘记这是工具产品。那么具体都有哪些产品细节,不妨听我细细道来~
其中,我精挑细选出一个海外和三个国区优秀产品进行产品设计细节分析,一探小众产品究竟好在哪里!
(专注面条 - 轻松重获专注力)2022年Apple设计大奖入围名单之一
(谜底时钟 - 让时间看得见)2022年Apple设计大奖入围名单之一
(Waterllama - 开启喝水时间)2022年Apple设计大奖入围名单之一
(OffScreen - 自律番茄钟,不做手机控)Apple Store精品推荐64次
排名不分先后,从以上几款产品logo中可以看出产品之间设计风格基本不一样,不存在借鉴抄袭,各自都在细分领域深耕播种。
也正是因为开发者的敬业、精益、专注、创新的“工匠精神”,才能让产品突出重围,优秀的呈现在用户面前使用。
Slogan:专注,可以做出一碗好面条。
你以为这只是让人做泡面的App!那就错了。这是用“煮一碗好面条是需要时间的”为理念,让用户专注工作,类似番茄工作法。
有趣的是,这款效率工具被插画元素完美包裹起来,一点感受不到工具给人带来的疏远感。相反,极具趣味性的画面让工具使用起来也充满乐趣充满爱。
正因这上乘的设计质感,《专注面条》曾数次登上 App Store 推荐页,至今收获 7000+ 个评价、4.9 的评分。
想象一下你正在烹饪一碗面条。
在烹饪时间结束前.不要试图拿起你的手机,这样会让水蒸汽流失,面条就不好吃了。日后,你可以使用专注面条完成你希望专注的任何事情。
它把工作比喻成煮面,煮面要专心,把控火候,合适时间放入主料和调料;工作同样要专心,遵循自己的方法论,把每个步骤和流程都执行到位。工作完成了,一碗面也就煮好了。
专注力在哪里,效率就在哪里。
「专注面条」希望辅助你以一种诙谐有趣的方式,重获这个时代最稀缺的专注力。放下你的手机,煮一碗面,我们一起对抗手机成瘾!
时间一到,你的面条就做好了,你也完成了一次有意义的专注。
打破常规,不用系统默认苹方字体,而是选择手写体风格的「素材集市康康体」字体(文末领取可商用字体包)作为通篇文字载体。
这也是为统一界面风格做的一个优化尝试。
不得不说,这个选择是非常适合的。(体量较小的产品可以适当选用设计字体,一旦产品功能做多做大还是乖乖用默认字体规范靠谱些)。
打开App,你能明显看到简洁的手绘风格元素,使整个产品透传出清新可爱的一面。这也是Alex作者受到女儿启发,毕竟小孩子总有天马行空的想象,但大人们却很难跳脱现实产生有趣想法。
App界面极其简洁,只有黑白灰三种颜色,搭配手绘风格的设计元素,使产品整体清新脱俗,与众不同。
图标设计脱离设计规范,采用更加符合产品气质的手绘风格,这样使得界面统一性极高,氛围感十足。
这也间接告诉设计师们图标设计上一定要跟着产品形态去做设计,而不要一味以第三方规范为唯一衡量标准来设计,结果就是同质化泛滥。
计时是产品核心功能,点击首页左上角专注时长,会出现不同的煮面方案。
可设置5分钟-180分钟之内任意时长的专注时间,同时为5、10、15、20、25、30、35、40、45、50、55、60、180分钟,这13个时间段绘制了专属面条配方。你不用手机的时间越长,你煮的泡面配料就越豪华越高级。设计元素也越丰富。当你碰到手机,就会震动十闪光。
面条设计方案与功能的完美呈现是产品最吸引人的地方。
根据累积的专注时长还可以获得相应的称号,配合幸苦工作后汗水落下动画,很是生动有趣。
不仅如此,专注面条还特意为女性男性做了两套插图设计方案,充分考虑不同群体的使用体验,仅仅是效率型产品就做到如此细节,不好才怪。
这也是除了故事卡片第二种用总时长配图来增加产品使用黏性产生记忆点的设计之处。
1.永久买断制
【专注面条】一次买断制,面条价格¥18。购买后产品内的功能都可使用。但“故事卡片”需要钥匙来解锁,¥6.00=钥匙*6,不想付费那就乖乖完成计时任务来随机获得故事卡片。
作为一个功能单一的产品,卖点在哪里?核心竞争力在哪里?依碳水Sir来看付费用户大多在为品牌理念买单。
就是产品自身的品牌调性,区别于市面上任何一款产品,不随波逐流,用全新的面条理念代替时间,并且有其鲜明的手绘风格和插图元素,即使被抄袭也只能抄到“外壳”,内在的东西是偷不走的。
2.购买钥匙
专注完成后,靠概率获得钥匙,用来解锁故事卡片以及 “脑洞大开” 的结局作为奖励。缓解你专注后的紧张感,增加趣味互动性,同时为下一次专注做好准备。
故事中皮诺曹、乌鸦喝水、长发公主等虽然都是我们耳熟能详的童话,但作者( Alex )给他们加上了一些彩蛋。譬如在《猴子捞月》的卡片里,解谜前三个猴子看到河流中有一个圆圈,当我们找到面条的位置时,会发现猴子们看到的不过是一个香菇都大为震惊,画面里充满奇妙的想象力。
当用户看到未解锁的故事会出于好奇点进去,这时就需要钥匙来解锁,毕竟不是靠专注获得的卡片就要用别的办法(购买钥匙)打开,这就是第二个商业转化点。
目前已有的27张故事卡片,每一个都与面条结合进行故事绑定,让用户在效率软件中也能感受到游戏的乐趣,把故事卡片当成解锁过关元素,引发用户对故事卡片更多的渴望。这也是通过奖励机制提高用户参与感进而提高使用黏性以及提升付费转化的一种方式。
一个动作,一堆脑洞,组成了一个能量满满的 app。
6 月 1 日,苹果发布了 2022 年度设计大奖入围名单,在「创新思维」类别中出现了中国区《专注面条》的身影,虽然止步于决赛圈,但我觉得这并不是结束,而是全新的开始。
优秀的产品总有其相似之处,也有其不同。要想做一款好的小众产品,除了把产品本身所解决的用户痛点做好做精外,植入产品理念,与用户产品某种关联。
就如它把专注计时比作烹饪时间,当完成专注,你将获得一碗香喷喷的泡面一样,给用户感受并不是冷冰冰的机器“叮”的告诉用户专注结束,而是通过巧妙的设计与用户之间产生真实联系,这或许就是成功的秘密。
借用「专注面条」Slogan说的:专注,可以做出一碗好面条。
各位设计师们不妨学习一下背后的思考。
谜底时钟是一款设计精美的时钟应用。
Slogan:陪伴你学习、工作与生活。
你没看错!它仅有时间和计时功能。
作为一款时钟App,UI设计有什么不同,才被入选2022 苹果设计大奖!成为中国开发者之光!我们一起来看看。
第一次下载,就会启动引导流程,切换页面时配合错帧动画,使设计细节更加突出明显,强化品牌调性。产品中的引导页都可以尝试这种表现形式。
进入首页,展示文字+动效的引导流程,统一的表现形式,让使用者更容易理解。首页交互引导,让用户对产品隐藏的交互功能得到二次记忆,具有增强产品记忆的作用。
2-1.设计元素
品牌风格设计很前沿,采用2020年大火的新拟态设计风格,也能看出设计表现紧跟市场潮流走,是一款个性且年轻的App。
整体使用下来,印象最深的就是模块列表、图标的微质感设计,以及弹窗布局的规范化设计,还有部分组件采用毛玻璃设计手法等。
值得注意的是,产品对iOS原生组件进行大量重新设计,结合新拟态风格绘制了一套更符合产品调性的组件出来。让人使用一次就记忆犹新。
2-2.核心力-交互感知
我分别罗列出计时切换器、计时完成动效、时间选择器、闹钟动效、删除交互、浮窗切换交互这六个来简单谈谈看法。以下几个动效交互基本涵盖市面上的多半产品的基础功能,之所以展示出来,是因为「谜底时钟」在原有的基础组件上大胆创新,摒弃原生组件。
这样做对于功能简单的产品来说绝对是锦上添花有助于产品形成记忆点的设计细节。这也从侧面反映出市面上的部分产品,只注重功能堆叠而完全忽视原生组件还可以二次设计的方向。
什么是好的交互,操作时无感知是一种,操作时有记忆点也是一种。显然「谜底时钟」是后者。要知道优秀的交互自成一派,把单一的功能做到极致,你的产品就不会差到哪里。
时钟就是要长时间静默展示,除了极简、拟物、科技、马赛克、霓光、积木、微质感、电子屏、睡眠屏、卡通风、各类钟表材质等等19种风格高颜值时钟外,霓光时钟具有不一样的功能。
当你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”,除了文案变化,图标也跟随名称而变,又一个用美食来拉近与用户距离的设计细节。
不仅如此,在低电量情况下,霓光效果不显示,底部会持续闪烁电量不足的指示灯,告诉用户手机没电信号,请及时充电。当用户插上电源,霓光时钟会重新启动亮光模式,给予用户通电感知。
虽然很小的设计点,但谁又能想到时钟与电量不足产生联系。看来开发者对时钟的创意联想是丰富多彩的。
无意间触碰手机时发现积木零星掉落下几个,在好奇的驱使下又晃动了一下手机,所有积木都掉落下来了。
具有数字属性的积木依然不断变换数字,并且配合手机陀螺仪可以模拟现实空间进行移动,交互玩法趣味十足,让我忍不住多玩了几次。
这种用到iOS系统功能做的大胆尝试,有时会给产品带来意想不到的好处,各位总监们不妨试试。
采用终身会员与月会员模式,月会员很好理解,为了产品能持续做下去,而推出的付费模式,目的是能持续有营收。终身会员是一个很有意思的模式。
据了解,产品前期功能相对单一时,推出的一种买断制,但随着新功能不断增加,原有¥25定价相比较低,早期买断的用户获利更大,为了商业与产品平衡,使其具备良性发展空间,于是又推出月会员模式。
这也牵扯到另一点,凡是未上线新功能都可以轻松决定是否开发上线,一但功能上线,想要取消或抹掉功能,就没那么轻松简单了。这也是早期App都一次买断,后期改为订阅模式也必须有终身买断的内购入口。
如果我们是“匠人”就会把 App 当艺术品,虽然只有也仅有一种功能,但只要花费了大量的时间去想创意,去做到设计、交互的完美融合,甚至一遍一遍地优化各种细节部分,埋设彩蛋,最后的最后呈现出来让自己满意。那么它就很可能成为一款小而美的产品。
乌克兰开发团队出品。让喝水变成一件快乐轻松的活动。仅有的喝水记录功能,却用大量动物角色来奖励喝水后的你,让你欲罢不能。保持水分保持快乐!从截图中不难看出,该App内置大量动物插图,通过喝水来解锁小动物,解锁前仅展示动物轮廓,让用户产生好奇从而保持喝水好习惯,这个概念很好,产品很棒,那我们一起来看看吧。
产品中icon展示较少,更多是用小插画来代替,页面中大量的banner以及动物卡片,丰富产品的同时营造一种轻松的感觉。并没有很多图标干扰用户操作。与水相关的插图用动效来承载,让简单的元素变得趣味横生,很是新颖。除了普通的水以为,Waterllama还为各种饮料酒水做了全套icon,共计48+之多,可见产品对于水的核心功能做足了努力,才有如此多的类型与选择供用户记录。
无论您是想休息一下咖啡因,还是想通过果汁和冰沙来增强免疫系统 - 选择任何挑战,尽情享受吧!
远离含糖饮料和酒精,或者在 10 天内只喝水补充水分。看看你的进展如何,别忘了与朋友分享你的结果。
Waterllama 应用程序中已有超过 45 个可爱的动物角色,我把解锁与隐藏的都罗列到上放品牌元素中,可以看下总有一款是你的菜。你也可以使用随机模式,让每一天都变得不同。当天喝水目标达成就会解锁一个动物,精美的插图让人赏心悦目,期待第二天继续喝水打卡挑战。
首页下方的动物挑战卡片,交互形式采用App Store卡片点击交互,无论是转场过度,还是下拉放大主体都给画面赋予趣味性操作体验。一边体验交互细节,一边了解喝水的各种好处,娱乐加学习两不误,很是轻松。
内购页面采用icon轮播的动效展示,优点是在一小块区域通过消失渐现可以展示所有内容,使内购页面干净清爽能更好的阅读页面信息。按钮通过循环放大,引导用户进行付费操作,虽然很刻意,但丝毫没有感受到强制性选择。
当产品想要在内购页强化品牌背书,给到用户可靠稳定感,可以选出具有代表性的优质评价,展示在内购页下方,通过左右切换查看更多评价。
每年¥28,终身买断制¥48.00。两个价格是利用价格差来制造价格锚点,引导用户购买终身会员,这对用户来说最实惠划算的方案,同时也是产品所希望的。大量的终身用户长时间使用产品,成为核心用户群体,助力产品越做越好。
现在不难看出,优秀的产品往往更关注细节表现,用动态展示内容,让玩法更具趣味性,页面简约而不简单。并不是页面元素越多越好,相反把简单的功能做到极致就会带来正向有价值的反馈。
这款产品虽然没出现在WWDC22上,但与「谜底时钟」是同一家公司。无论设计或功能使用都相媲美。
手机已成为人人必备的物品,内置的各种App占有着人们的生活,手机依赖已成为这个时代普遍的一种现象。虽然人们都知道长时间看手机不好,下意识的克制看手机行为,以为这样脱离手机依赖患者这个称号。往往碎片化看手机,一天下来使用手机的时长不降反增。「OffScreen」通过细分时间属性为用户直观呈现各种场景下使用手机的详细数据,通过数据展示以及专注时间,防止用户沉迷手机无法自拔。
「OffScreen」背景色使用极其大胆。
浅色模式下采用暖橘色作为品牌主色调,暗色模式下采用海蓝色作为主色调,相比Apple设计规范中的颜色,这种带有倾向性的色彩更容易营造一种产品氛围,强化产品感知度。
图标方面,具有操作属性的图标采用线性(相对好理解),具有展示属性的图标采用面性风格(设计表现更强且有文字描述相对好理解)。
引导流程专场用了大量位移、渐变效果,使原本单调的静态页赋予生动表现力。吸引用户眼球,达到品牌传播效果。
动效贴合操作效果,用户还没使用就能一眼明白产品如何使用,这就是引导动效的好处。
当你专注番茄钟时,只需在番茄上滑动标尺选择准确时间,就能开始专注。
当完成专注会提供统计数据,并且有彩带飘落效果,营造打卡胜利的仪式感,强化产品感知,为用户下一次专注做准备。
内购页采用依次呈现的交互方式,头图是一个人在看手机,采用线性风格手法,这种形式区别于其他产品,会给人以眼前一亮的感觉,加深用户对产品的记忆。
付费按钮吸附与页面底部,根据菲茨定律,起始于目标位置越近,到达目位置的时间就会越短,从而用户更容易点击。
一次买断制,¥30.00解锁终身会员。
作为一款时间统计、番茄钟、专注时间与一身的产品,对于时间管理有强需求的用户来说价格还算不错。流畅的交互呈现以及有趣的配图描述,间接感受到Off Screen产品的细腻之处,用户为此买单也不是说。
OffScreen的成功在于能把单一的屏幕使用时间进行多维度分析呈现,就说“呆呆的看”与“边走边看”这两项数据,就是调用系统运动数据来判断使用屏幕的场景。
况且每项数据都支持时间轴可视化图表的方式呈现,细节之处方见专业,这也是好产品所要具有的垂直领域专业度。
想要产品脱颖而出,一定要尝试将软件与硬件结合,可以是陀螺仪、眼动追踪、闪光灯等等,总之系统推出新的功能,就尽量把它用到产品里去。
不仅如此,看以上几个产品,截图模块内容都顶满了,说明App想要展示的细节还有很多,从侧面也能看到开发者们不留一块“空白”的用心。
大厂产品固然很好,做法更符合大众市场符合消费者需求,随着不断新增功能,产品变得越来越普适大众,无产品独特风格可言。因为背后有庞大的员工要养活。
相反小团队独立开发者们没有太多顾虑,一心想把一个点做好做紧致,哪怕只是计时,也要做的自己满意为止,才会交卷,时代在变,匠人之心从未改变。值得致敬这些开发者们。
跳脱大厂的产品,来看看独立开发者和小型开发团队,一人即团队,遇到各类问题都要独自进行解决,可想而知工作量会有多大。
他们的产品或许没有庞大的生态体系来满足大众用户使用需求,但App Store十余年的发展,建立起细颗粒的开发环境,正是这种良性生态,让那些有光的开发者,随心所欲让心中的想法变成现实,让夜里的小路灯照亮了整片街道。
就连开发者们都这么拼搏,作为设计师的我们哪还有抱怨之说,这么多好的产品摆在眼前,真是难得的学习机会,习他人之处,补自我之短。一起加油一起进步。
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。 认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,我们下期再见!
作者:碳水Sir;公众号:草蓉三石
本文由 @碳水Sir 原创发布。未经许可,禁止转载。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
众所周知,B站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近82%的用户是Z世代用户(90-09年出生的人群),他们也是生长在互联网下的一代人。用户规模与活跃度都持续高位,除了其产品侧的发力,设计中的体验感知也功不可没,本次分享bilibili中用户最常能感知到的产品设计细节,帮助你丰富B站玩法的同时,学习产品中的过人之处,以便了解设计发力点。
越往下看你越惊叹,总有一个你不知道的彩蛋设计细节。
1.【防偷窥】登录页 - 2233娘遮眼
1.使用场景
再熟悉不过的页面了吧。登录页面是除首页外,每个用户大概率要进入的页面。如何给予用户安全感知,同时增强产品记忆点。
2.设计思考
设计目标:提升用户登录B站时的安全感知。
设计方案:当用户在输入验证码或者密码等较为敏感的信息时,2233娘会遮住眼睛,暗示隐私信息我们是不会偷看的。强化B站对安全隐私的重视度。增强用户信任感。同时B站的品牌IP2233娘从儿时到成年产品中都有体现。用户登录注册账号时,儿时Q版的2233娘呈现在眼前,暗示着2233娘未来的一路陪伴,共同成长的愿景。这是第二层含义。
1.使用场景
作为一个二次元发展起来的视频社区,用户对于产品品牌具有亲切感。但B站发展至今二次元内容逐渐被多元生态所代替,类目占比逐渐变小,老用户的情感记忆那里体现。
2.设计思考
设计目标:提升品牌IP传播,让用户享受更加丰富的开屏页,从而满足用户情绪。
设计方案:在「设置」-「开屏画面设置」中,你可以随机展示或者自定义选择画面,总共为用户提供20张图片,每一个都是2233娘和B站重要日子的组合插画,其中不乏几张经典页面。当用户选择特定画面时,不仅能强化IP记忆点,同时也体现出产品对用户的重视程度。
1.使用场景
B站弹幕是出了名的有趣,当弹幕狂热者看一个热门爆款视频,很可能弹幕全程霸屏,气虽然氛感十足,但也会存在遮挡用户查看所关注的内容,从而错过精彩瞬间。如何解决?
2.设计思考
设计目标:优化弹幕开关的便捷操作,给予用户优质的交互体验。
设计方案:在视频播放页面,常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些,你可以双指点击屏幕,触发开关弹幕功能,相比常规「先点击屏幕」「再关闭弹幕」两步操作,双指点击屏幕更加高效,虽然多指操作学习成本高,但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠,有时候常用的功能要进入3个层级才能使用,何不换种思路,运用多指交互来提升用户操作体验,未尝不是一种好的体验升级。
1.使用场景
一个产品除了空状态、界面元素外,如何在视频页中给予用户品牌感知,增加趣味体验。
2.设计思考
设计目标:提升视频页进度条的趣味性,从而强化B站品牌透传。
设计方案:在视频页中,当你对视频进度进行左右拖拽时,进度条的指示图标「小电视」的眼睛会左右移动,当你向左滑动眼睛跟随左边,向右滑动小眼睛跟随右边,很是有趣,通过IP结合进度条的交互设计让原本单一的形态变得趣味横生。当然,进度条的样式不止一种,还有很多彩蛋视频也有不同的样式,快去找一找吧。(对了,最近在使用【优酷】时也发现进度条的微设计,感兴趣的朋友不妨看看。)
1.使用场景
一键三连最早的发源地,或许你此时才知道这个功能吧。
2.设计思考
设计目标:提升在同质化产品中的特殊功能点设计,强化产品一键三连功能。
设计方案:在视频页浏览时,看到超级喜欢的UP主视频,激动到想要一键三连,可以长按点赞按钮,你会看到右边投币和收藏显示进度条占比,当一圈走完,点赞、投币、收藏同时完成,这就是一键三连的激活功能。不仅如此,移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能,产品特有的功能感知满满。
1.使用场景
想听周董的歌,网易云音乐没有,QQ音乐又要付费听,好难受啊~
2.设计思考
设计目标:解决用户听歌时视频弹幕干预,将视频切换音乐模式,专注听歌。
设计方案:在视频页,点击「更多」选择「听视频模式」,当前视频会切换成音乐页面,这难道不就是音乐软件嘛。常用的循环、上一首、下一首功能都有、收藏、评论、转发也有,简直不要太棒。因为B站是UGC(用户生产内容)、PGC(专业生产内容)视频平台的独特性,自身就不会太担心侵权问题。难怪B站中Z世代的用户更多,一款产品,满足多场景多人群使用,怪不得能俘获民心,有它的道理。
7.【视频放大】双指移动 - 放大缩小画面
1.使用场景
当你用B站学习时,小小的手机屏幕很难看到细节,该怎么解决?
2.设计思考
设计目标:提升细节放大展效果,让用户看清具体信息,提高学习效率
设计方案:在视频页,除了上面说的双指点击触发弹幕开关,你可以通过双指拉伸把视频任意放大,当然你也可以捏和把视频缩小。当改变了原始视频尺寸,底部会有一个「还原屏幕」的按钮,点击即可快速矫正视频。还不快快用起来~
1.使用场景
是不是还在边看英文电影边学英语,这样虽然是个办法,但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译,效率性大打折扣。
2.设计思考
设计目标:提高音乐学习效率,在视频中增加实时英文解析,帮助快速学英语。
设计方案:目前已知在「老友记」中,用户可以通过点击左侧「学音乐」进入到英文学习分栏中,演员的每段对话,以及出现时间,都清晰罗列出来,你可以重复收听某段对话,也可以针对当前对话中不理解的单词或语法进行学习,简直就是学习英语者的福音。
1.使用场景
一起刷B站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗?
2.设计思考
设计目标:解决异地分开刷B站的阻隔感,提升随时随地一起刷剧学习的幸福感。
设计方案:在视频页,点击「一起看」进入放映厅,你可以自己新建放映厅,也可以进入别人的放映厅,总之可以多些朋友一起看视频,一起交流,完美解决异地或者独处的孤独感~
1.使用场景
同样是看视频学习,当你身边只有手机时,需要做笔记,还在通过备忘录等形式在App之间来回切换记录吗?
2.设计思考
设计目标:解决看视频时难以记录重点知识的情况,提升记录笔记效率,从而高效学习。
设计方案:在公开课等教学类视频中,通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此,还能查看其他用户的笔记内容并且可以一键三连进行互动,具有双向学习性,简直不要太棒。笔记做完还可以一键复制,粘贴到你的知识库中,解决内容迁移问题。在B站学习的用户不妨快来试试~
1.使用场景
B站是个弹幕网,很多时候观看者头脑一热随意发表的弹幕言论,会给其他用户带来观影不适以及平台污染,如何解决。
2.设计思考
设计目标:为用户增加弹幕删除功能,从而提升弹幕评论的绿色言论,净化弹幕内容。
设计方案:在视频页发送了一个弹幕,用户可在视频中看到自己的弹幕,鼠标进入,选择撤回,要注意只能在2分钟内进行撤回,并且一天之内只能撤回5次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表,找到自己的弹幕,长按会出现撤回选项,点击撤回即可。
1.使用场景
人们总对好奇的事物产生兴趣,尤其是在自己不知道的前提下。
2.设计思考
设计目标:增加鬼畜区弹幕彩蛋功能,提升此类目视频曝光。
设计方案:在鬼畜区频道,长按10s右下角的返回顶部按钮,会激活底部黑色输入列表,文案写着:“尝试输入字母,发现鬼畜秘密...”带你进入另一个神秘空间。
1.使用场景
文案的引导会激发用户好奇产生尝试。
2.设计思考
设计目标:引导用户进行随机字母输入,提升彩蛋互动玩法。
设计方案:在搜索框随机输入英文字母,会出现提示输入的字母,当你输入完点回车,网页会出现经典的一句话弹幕。如果你长按AAAAAAAA...,网页弹幕伴随音效不断出现,很是鬼畜。当你对某个弹幕头像产生好奇,可点击进入视频页,进行视频浏览,同时可以后评论区同样是彩蛋进来的伙伴一起交流,很是热闹。
1.使用场景
当B站上传视频以及评论不加以管制和制度教育,会带来流失用户的风险。
2.设计思考
设计目标:为了建立良好的视听环境和用户体验,规范产品的内容形式。
设计方案:在社区中心,小黑屋中,可以查看已经被关小黑屋用户的案情,针对案情的严重程度,进行封禁时间限制,相比长篇文章的制度规范,这种实际案例,更能让用户了解平台规则,防止关进小黑屋出不来。
15.【代码良言】小黑屋 右箭源代码 - 金石良言
1.使用场景
程序员在小黑屋页面,想要越狱查看代码等行为。
2.设计思考
设计目标:告知程序员,开发者们小黑屋不仅是用来规范视频用户做出的行为,同样也是针对开发者以及程序员的。
设计方案:在「小黑屋」页面,右键「显示 网页源代码」,在一行代码中间,你会看到一句话:“一朝耍流氓,十年挂南墙;不乖的孩子统统都要打屁股;越狱是不可能越狱的,这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多,同时增强小黑屋的准则态度,让B站用户做一个遵守准则的好用户。
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,那我们下期再见!
作者:碳水Sir;公众号:草蓉三石
本文由 @碳水Sir 原创发布。未经许可,禁止转载。
参考文献:
B站2022第一季度财报:https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans弹幕视频网 :https://www.bilibili.com/read/cv14244675/
Advertising:https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
时趣研究院:https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag
众所周知,B站是一个二次元、鬼畜、学习、娱乐等等于一身的综合视频社区。近82%的用户是Z世代用户(90-09年出生的人群),他们也是生长在互联网下的一代人。用户规模与活跃度都持续高位,除了其产品侧的发力,设计中的体验感知也功不可没,本次分享bilibili中用户最常能感知到的产品设计细节,帮助你丰富B站玩法的同时,学习产品中的过人之处,以便了解设计发力点。
越往下看你越惊叹,总有一个你不知道的彩蛋设计细节。
1.【防偷窥】登录页 - 2233娘遮眼
1.使用场景
再熟悉不过的页面了吧。登录页面是除首页外,每个用户大概率要进入的页面。如何给予用户安全感知,同时增强产品记忆点。
2.设计思考
设计目标:提升用户登录B站时的安全感知。
设计方案:当用户在输入验证码或者密码等较为敏感的信息时,2233娘会遮住眼睛,暗示隐私信息我们是不会偷看的。强化B站对安全隐私的重视度。增强用户信任感。同时B站的品牌IP2233娘从儿时到成年产品中都有体现。用户登录注册账号时,儿时Q版的2233娘呈现在眼前,暗示着2233娘未来的一路陪伴,共同成长的愿景。这是第二层含义。
1.使用场景
作为一个二次元发展起来的视频社区,用户对于产品品牌具有亲切感。但B站发展至今二次元内容逐渐被多元生态所代替,类目占比逐渐变小,老用户的情感记忆那里体现。
2.设计思考
设计目标:提升品牌IP传播,让用户享受更加丰富的开屏页,从而满足用户情绪。
设计方案:在「设置」-「开屏画面设置」中,你可以随机展示或者自定义选择画面,总共为用户提供20张图片,每一个都是2233娘和B站重要日子的组合插画,其中不乏几张经典页面。当用户选择特定画面时,不仅能强化IP记忆点,同时也体现出产品对用户的重视程度。
1.使用场景
B站弹幕是出了名的有趣,当弹幕狂热者看一个热门爆款视频,很可能弹幕全程霸屏,气虽然氛感十足,但也会存在遮挡用户查看所关注的内容,从而错过精彩瞬间。如何解决?
2.设计思考
设计目标:优化弹幕开关的便捷操作,给予用户优质的交互体验。
设计方案:在视频播放页面,常规开关弹幕的方式是点击左下角弹幕按钮。想要在便捷一些,你可以双指点击屏幕,触发开关弹幕功能,相比常规「先点击屏幕」「再关闭弹幕」两步操作,双指点击屏幕更加高效,虽然多指操作学习成本高,但这种隐藏交互会大大提升观感体验。如今的产品功能不断堆叠,有时候常用的功能要进入3个层级才能使用,何不换种思路,运用多指交互来提升用户操作体验,未尝不是一种好的体验升级。
1.使用场景
一个产品除了空状态、界面元素外,如何在视频页中给予用户品牌感知,增加趣味体验。
2.设计思考
设计目标:提升视频页进度条的趣味性,从而强化B站品牌透传。
设计方案:在视频页中,当你对视频进度进行左右拖拽时,进度条的指示图标「小电视」的眼睛会左右移动,当你向左滑动眼睛跟随左边,向右滑动小眼睛跟随右边,很是有趣,通过IP结合进度条的交互设计让原本单一的形态变得趣味横生。当然,进度条的样式不止一种,还有很多彩蛋视频也有不同的样式,快去找一找吧。(对了,最近在使用【优酷】时也发现进度条的微设计,感兴趣的朋友不妨看看。)
1.使用场景
一键三连最早的发源地,或许你此时才知道这个功能吧。
2.设计思考
设计目标:提升在同质化产品中的特殊功能点设计,强化产品一键三连功能。
设计方案:在视频页浏览时,看到超级喜欢的UP主视频,激动到想要一键三连,可以长按点赞按钮,你会看到右边投币和收藏显示进度条占比,当一圈走完,点赞、投币、收藏同时完成,这就是一键三连的激活功能。不仅如此,移动端、网页端、以及接下来的「写笔记」中都可触发一键三连功能,产品特有的功能感知满满。
1.使用场景
想听周董的歌,网易云音乐没有,QQ音乐又要付费听,好难受啊~
2.设计思考
设计目标:解决用户听歌时视频弹幕干预,将视频切换音乐模式,专注听歌。
设计方案:在视频页,点击「更多」选择「听视频模式」,当前视频会切换成音乐页面,这难道不就是音乐软件嘛。常用的循环、上一首、下一首功能都有、收藏、评论、转发也有,简直不要太棒。因为B站是UGC(用户生产内容)、PGC(专业生产内容)视频平台的独特性,自身就不会太担心侵权问题。难怪B站中Z世代的用户更多,一款产品,满足多场景多人群使用,怪不得能俘获民心,有它的道理。
7.【视频放大】双指移动 - 放大缩小画面
1.使用场景
当你用B站学习时,小小的手机屏幕很难看到细节,该怎么解决?
2.设计思考
设计目标:提升细节放大展效果,让用户看清具体信息,提高学习效率
设计方案:在视频页,除了上面说的双指点击触发弹幕开关,你可以通过双指拉伸把视频任意放大,当然你也可以捏和把视频缩小。当改变了原始视频尺寸,底部会有一个「还原屏幕」的按钮,点击即可快速矫正视频。还不快快用起来~
1.使用场景
是不是还在边看英文电影边学英语,这样虽然是个办法,但遇到不懂得单词或是语法你还要在第三方翻译软件中翻译,效率性大打折扣。
2.设计思考
设计目标:提高音乐学习效率,在视频中增加实时英文解析,帮助快速学英语。
设计方案:目前已知在「老友记」中,用户可以通过点击左侧「学音乐」进入到英文学习分栏中,演员的每段对话,以及出现时间,都清晰罗列出来,你可以重复收听某段对话,也可以针对当前对话中不理解的单词或语法进行学习,简直就是学习英语者的福音。
1.使用场景
一起刷B站、一起看视频、一起聊天等等这样的场景可能只在现实中存在。真的是这样吗?
2.设计思考
设计目标:解决异地分开刷B站的阻隔感,提升随时随地一起刷剧学习的幸福感。
设计方案:在视频页,点击「一起看」进入放映厅,你可以自己新建放映厅,也可以进入别人的放映厅,总之可以多些朋友一起看视频,一起交流,完美解决异地或者独处的孤独感~
1.使用场景
同样是看视频学习,当你身边只有手机时,需要做笔记,还在通过备忘录等形式在App之间来回切换记录吗?
2.设计思考
设计目标:解决看视频时难以记录重点知识的情况,提升记录笔记效率,从而高效学习。
设计方案:在公开课等教学类视频中,通过点击「更多」找到「笔记功能」就能解决一边看视频一边记录的痛点了。不仅如此,还能查看其他用户的笔记内容并且可以一键三连进行互动,具有双向学习性,简直不要太棒。笔记做完还可以一键复制,粘贴到你的知识库中,解决内容迁移问题。在B站学习的用户不妨快来试试~
1.使用场景
B站是个弹幕网,很多时候观看者头脑一热随意发表的弹幕言论,会给其他用户带来观影不适以及平台污染,如何解决。
2.设计思考
设计目标:为用户增加弹幕删除功能,从而提升弹幕评论的绿色言论,净化弹幕内容。
设计方案:在视频页发送了一个弹幕,用户可在视频中看到自己的弹幕,鼠标进入,选择撤回,要注意只能在2分钟内进行撤回,并且一天之内只能撤回5次弹幕。目的也是为防止用户频繁撤回的操作。手机端可点击弹幕列表,找到自己的弹幕,长按会出现撤回选项,点击撤回即可。
1.使用场景
人们总对好奇的事物产生兴趣,尤其是在自己不知道的前提下。
2.设计思考
设计目标:增加鬼畜区弹幕彩蛋功能,提升此类目视频曝光。
设计方案:在鬼畜区频道,长按10s右下角的返回顶部按钮,会激活底部黑色输入列表,文案写着:“尝试输入字母,发现鬼畜秘密...”带你进入另一个神秘空间。
1.使用场景
文案的引导会激发用户好奇产生尝试。
2.设计思考
设计目标:引导用户进行随机字母输入,提升彩蛋互动玩法。
设计方案:在搜索框随机输入英文字母,会出现提示输入的字母,当你输入完点回车,网页会出现经典的一句话弹幕。如果你长按AAAAAAAA...,网页弹幕伴随音效不断出现,很是鬼畜。当你对某个弹幕头像产生好奇,可点击进入视频页,进行视频浏览,同时可以后评论区同样是彩蛋进来的伙伴一起交流,很是热闹。
1.使用场景
当B站上传视频以及评论不加以管制和制度教育,会带来流失用户的风险。
2.设计思考
设计目标:为了建立良好的视听环境和用户体验,规范产品的内容形式。
设计方案:在社区中心,小黑屋中,可以查看已经被关小黑屋用户的案情,针对案情的严重程度,进行封禁时间限制,相比长篇文章的制度规范,这种实际案例,更能让用户了解平台规则,防止关进小黑屋出不来。
15.【代码良言】小黑屋 右箭源代码 - 金石良言
1.使用场景
程序员在小黑屋页面,想要越狱查看代码等行为。
2.设计思考
设计目标:告知程序员,开发者们小黑屋不仅是用来规范视频用户做出的行为,同样也是针对开发者以及程序员的。
设计方案:在「小黑屋」页面,右键「显示 网页源代码」,在一行代码中间,你会看到一句话:“一朝耍流氓,十年挂南墙;不乖的孩子统统都要打屁股;越狱是不可能越狱的,这辈子是不可能越狱的”极具搞笑的语言让本就是严肃的事情变得轻松许多,同时增强小黑屋的准则态度,让B站用户做一个遵守准则的好用户。
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,那我们下期再见!
作者:碳水Sir;公众号:草蓉三石
本文由 @碳水Sir 原创发布。未经许可,禁止转载。
参考文献:
B站2022第一季度财报:https://mp.weixin.qq.com/s/ctzbvBqPxtbQxCV2_XAGDQ
MikuFans弹幕视频网 :https://www.bilibili.com/read/cv14244675/
Advertising:https://mp.weixin.qq.com/s/831jX19aq8cfI_WU7RQubw
时趣研究院:https://mp.weixin.qq.com/s/BUZoVle8ByLQjAFrCMm4ag
事先声明 /attention 。
1. 强烈建议使用电脑查看,用户体验更佳。
2. Gif 体积较大,请耐心查看。
3.为了让设计细节更容易被看到,用GIf来呈现展示。
碳水Sir|5年村龄|听过上万首歌|发布过几首翻唱歌曲|黑胶·伍级|LV.9,众多身份都不能表达我对网易云的喜欢程度。因为它不仅是一款音乐播放器,更像是一个有血有肉、有情感的虚拟人一直陪伴在我身边,治愈着我~ 你很好奇它具有什么力量,能使用户粘性如此持久,那么我不妨带大家看看网易云音乐中情感化驱动的魅力所在。
一首【成都翻唱】送给在座的看官,请不要嫌弃~
在听歌页面,呈现猫头鹰送信环节,带领粉丝回忆那个魔法学院,重温经典音乐。
设计目标:通过增加彩蛋,纪念《哈利波特40周岁暨电影重映》,提升歌曲二次曝光度。
设计方案:首页搜索哈利波特 第二首 【海德薇变奏曲】,当音乐播放到 第43s时,黑胶唱片中会突然飞出一只叼着通知书的猫头鹰,重现海德薇送入学通知书的经典桥段。猫头鹰飞过,你会看到评论区图标变成了一封信。用极具创意的动画手法,引导用户进入评论区进行后续操作。
这也给做产品设计同学一些灵感,当有合作方时,尝试着换种设计思路(例如:当前影视与音乐结合的彩蛋),来绑定产品与合作方之间的联系。形成高级记忆点,从而达到用户主动传播的裂变效应。
在上一个场景中,点击信件进入评论区,通过评论区用户引导继续彩蛋探险之旅。
设计目标:为了使上个彩蛋具有连续性,提升彩蛋引入玩法达到评论话题热度。
设计方案:点击通知书- 在评论区找到第9-10评论,在中间空隙位置双击两下,出现一个缝隙随后逐渐放大,映入眼帘的是魔法站台,随后飞速而来一辆通往霍格沃茨的列车,当门打开时,又一个强光出现,随后穿梭回评论区。整体动画一气呵成,仿佛真的穿梭了一回。
当用户不知情下进入评论区,会看到其他用户都在以“彩蛋”为话题,展开激烈讨论,这时就激发出你的评论欲望,以及彩蛋入口探索,为彩蛋话题持续供热发光。
该手法也是利用“圈内梗”标志事物,再结合穿梭般的动画体验,给【哈迷圈】用户体验了一波惊喜感,同时为后续【哈利波特魔法觉醒】游戏做好引流铺垫。
正式入学前,怎么能少了入学典礼这么重要的仪式。
设计目标:提升歌曲传播性以及记忆度,通过彩蛋强化音乐仪式感。
设计方案:点击【分院帽之歌】评论区 输入学院名称如格兰芬多,,院旗降落,迎风飘扬,出现代表学院的旗帜,分院仪式就完成啦!仪式感是不是瞬间拉满。
没看过哈利波特的用户,我这里为大家收集好了四个学院名称,分别是赫奇帕奇,格兰芬多,斯莱特林,拉文克劳,想体验的用户快去试试吧~
用户进入CEO丁磊的主页可以看到99999粉丝,在强迫症驱使下为丁磊增加粉丝。
设计目标:通过99999粉丝,来“骗取”新粉丝关注,提升粉丝量。
设计方案:可能是程序员们被产品或CEO的各种需求堆压的透不过气,想着拿CEO来整活一下,这就有了上面的神奇一幕。进入首页,搜索【网易CEO丁磊】进入主页,第一次和CEO这么近距离接触,当你看到99999粉丝时,心想我原来就是那幸运的第10万粉丝,心中很是激动,当你点击关注后,返回首页再一次进去时,你会发现,粉丝数从新回到了99999粉丝,你以为是有人取消关注!其实这是程序员写的一个欺骗代码。利用这种仿制数字,来为CEO骗粉。这是程序员想到的点还是CEO丁磊的阴谋。就不得而知了~
这么细小的改动,确实让用户对网易云音乐产生神秘感,或许还有很多彩蛋没有发现,从而激发用户探索欲望~
感兴趣的同学快去试试吧~
网易云音乐与雪碧达成的深度合作,要通过(音乐+设计)手段探索跨界营销方式。
设计目标:传播品牌主张, 通过彩蛋提升品牌新主张“透心凉、渴释放”。
设计方案:在播放【无渴不爽】时,在特定位置会激活雪碧动效,你能看到右上方一个雪碧瓶开启,并倾倒而出,上深到一半高度清爽柠檬炸开效果,不仔细看还以为换手机进水了。
通过对设计的高度还原,模拟真实世界汽水反馈,例如二氧化碳气体等极具细节的动画效果,以及开瓶时“呲”的音效声让用户更好投身于音乐背后的情境中,以及紧扣歌名【无渴不爽】的“透心凉、渴释放”理念。用“音乐彩蛋”来赋予用户“视觉+听觉+味觉”三觉的沉浸式体验,让品牌主张成为用户切身感受。
这种营销方式,作为用户的我都很难拒绝,心里暗暗道:“这样的营销手段,多给我来一些,真的不错,喜欢~”。换做是你,也同样喜欢,对嘛~
17年的一个遥远的往事,网易云团队为了纪念【音乐人-三亩地】给【城南花已开】ID用户专门写的音乐。
设计目标:缅怀用音乐纪念的骨癌【南城花开时】用户,放大产品人情世故的高度,从而提升品牌对于用户的重视程度。
设计方案:在每年3-4月时,收听【南城花开时】这首歌,在播放页就能看到满屏花瓣飘落,点击最亮的一瓣,会看到花海中有一个少年。对于老用户来说无疑勾起了往日回忆,通过彩蛋动画来强化音乐缅怀的力量。同时吸引围观用户的好奇,引导查看评论区,翻找彩蛋根源,进而提升评论区活跃度以及产品情感关联。
毕竟产品本身是冰冷的,用产品本身的功能来安抚用户以达到共鸣效果那就太棒了。这也正是网易云音乐依靠评论区获得业界影响力的重要体现。即使版权少的可怜但依然稳居前3宝座的原因之一。
面对疫情,网易推出【光援行动】通过【Light The Light】歌曲【LTL】功能,给用户传递音乐的治愈力量。
设计目标:结合硬件生态,提高闪光灯与音乐的多重组合玩法,用音乐与光传递希望给到用户。
设计方案:网易团队通过歌曲《Light The Light》歌词”每个人都是一处微光,每当我们闪烁一次灯光,也许某处黑暗就会被我们照亮”中获得灵感,配合歌曲中的鼓点来不断闪烁节奏光,营造氛围感的同时,传递出即使是一颗小小的微光,凝聚起来依然可以照亮一片天地。
同时表示面对防疫,人民团结一致,互相帮助的社会凝聚力。宣扬音乐的力量以及对未来美好生活的祝福。
为响应 “云村评论治愈计划”,设计“抱抱彩蛋”,传递温暖的社区氛围。
设计目标:通过彩蛋玩法,提升社区情感鼓励,净化社区良好氛围。
设计方案:再任意歌曲评论区,对着评论双指向中间捏和的方式,去“抱”一个用户的评论给予情感抚慰。视觉方面呈现两个可爱的白、红小人相互拥抱安抚的画面,评论者的头像也会出现“收到抱抱”的提示,以达到与陌生人之间互相鼓励温暖的目的。
这种方式挺暖的,通过音乐平台送出抱抱以及接受抱抱的形式,更加体现出音乐无边界的魅力所在。
以上是我第二次使用的感受分享。这个抱抱彩蛋设计,早在第四篇【产品细节洞察分析】中有写道,但观点已经完全不同,感兴趣的朋友可以回溯一下~
每年高考时,【银河赴约】都会收到来自音乐人以及网易的各种祝福,祝旗开得胜。
设计目标:在高考前夕,通过孔明灯来收集用户的祝福语录提高评论话题统一性。,为用户提供高考话题入口。
设计方案:在2020年疫情期间的高考阶段,网易云音乐制作了助力高考自制【银河赴约】曲目,用户在听歌时,能看到评论区占位符变成了孔明灯。要知道,孔明灯是中国特有的手工艺术,又叫天灯,俗称许愿灯、祈天灯。它的作用是祈福,许愿,保佑。用这种视觉效果,引导暗示用户评论区特殊的意义,真诚的祝福,高考加油!带话题输入祝福,还能获得“网易云音乐高考助力buff”。形式拉满,意义非凡有没有~
音乐是人心灵深处的对白,很多抑郁的用户都有沟通障碍不想与人交流,唯有音乐可以独自倾听。
设计目标:解决抑郁用户危险的心理活动,通过治愈所提高用户对生活的美好追求。
设计方案:在首页搜索“自杀”等敏感词汇,会立即跳出云村治愈所页面,标题写着“生活没有那么奇妙,但有你才会变得更好”。让抑郁用户感受到自我的重要性。
(2.1)开头用生活中的美好事物来告诉用户真实世界值得回味。
(2.2)精选了四类治愈歌单来温暖用户的心情。
(2.3)罗列了一线城市心理咨询热线,间接体现出在一线城市生活压力指数。
(2.4)精彩评论,云村村民的八方支援,感受到网络中温暖纯良一面。
以治愈的文字、音乐推荐、心理咨询热线、热心评论来唤醒抑郁用户,既有文字的力量也有音乐的力量,多维度努力,一起帮助云村用户积极生活,健康快乐。
最后,当我看到阅读总人数863.7万时,心情还是无比复杂,虽然很多都是闻声前来,但大部分还是真实抑郁用户搜索而来,衷心希望音乐的力量可以帮助他们战胜困难,也感谢网易云音乐平台用特殊的方式来治愈用户。这真是很珍贵的用户洞察点。
在听歌时,播放页用视频展示歌曲背后的故事,听觉视觉双重享受。
设计目标:满足用户“边听边看”需求,通过视频拉近用户与音乐人的距离。
设计方案:在特定曲目中,对黑胶播放界面双指下滑,激活“黑胶故事”,黑胶内将自动播放30s的无声视频,再次点击即可跳转至完整的音乐视频播放页面。形成快速切换的视音交互链路。
这种尝试,也是进一步把音乐延伸,每首音乐都有属于自己的故事,很多都是在听音乐时才会引发共鸣,再去搜索音乐背后的故事,链路长、操作不便捷,网易推出的黑胶唱片,音乐人只需自主上传,审核通过后,便可以最低成本,进行歌曲宣传,同时用户能极大的节约时间,从而更加沉浸在音乐世界中。
想要体验,直接搜索【黑胶故事】找到歌单就可以啦~
计算上班摸鱼听歌的时间,看看朋友群里谁是摸鱼之王。
设计目标:通过热点话题并结合数据分析,来提高H5活动玩法,达到裂变传播。
设计方案:只需要在活动页中输入自己的名称,就能分析出,摸鱼总时长和具体流量。这个功能的开发,起因网络热点话题吐槽包含网易云音乐等产品消耗10GB以上流量为基础,发掘出可结合产品自身做的测试尝试,【摸鱼计算器】依靠平台数据流量分析,根据【上班听歌时间在工作时间的占比】估算出全年的【摸鱼流量】。来满足用户猎奇心。
虽然此活动只是休闲放松的形式,并非真的宣传摸鱼有多好。但为了说明一下,还是文字提醒:“摸鱼”虽好,可不要贪摸哦,正确听歌有助于提升工作效率!告诉用户,正确的价值观。
在网易云大约需要听上千首新歌,看很多故事,明白许多道理才是个好男孩。可以对外分享。
设计目标:创造【网易云八级】梗,通过活动提升产品热度。
设计方案:只需要在活动中,选择性别,依靠听歌数据分析,总结网易云等级段位。当时也有女孩说,找男朋友就找网易云八级,因为懂得很多很沉稳。当然女孩子也是同理。
据了解,这个活动也是因为有网友晒出等级截图,并且上了热搜,而这一事件瞬间被网易云团队看到,迅速整活。同时间上线【8级证明书】,8级以上的用户可获爱好听歌的“好男孩”“好女孩”认证。
没错,看到配图的朋友都知道了吧,我是8级哦~
七夕节,表白日,语言组织不行,说不了浪漫的情话。
设计目标:结合音乐,提升表白语言的趣味呈现,为用户提供浪漫语言帮助。
设计方案:在搜索框输入名字,就会随机推荐表白歌词,都是心动的感觉,帮助不会说情话的你。当然我也可以输入你的的名字,因为你的名字本身,也足以吸引我。有没有被甜到~
除此之外,搜索特定名称,会出来特殊的表白,一语中的。例如搜索苏炳添,出来的是“我会用9秒83的速度出现在你面前”完全整活了,有木有~
不仅如此,页面配图,绘制了大量精美小线稿,在我尝试了很多名称后都没遇到重复的图形,可见这个小细节做了N个图形出来,很是用心。是一个很棒的设计细节。
早期受到“网抑云”的负面冲击,评论区中存在太多抑郁情绪发言,导致很多用户看到后都同情怜悯随后一起陷入抑郁。
后来网易云音乐推出各种【治愈计划】包括【云村治愈所】【抱抱功能】【治愈专辑】等等设计手段。
最终,越来越多的用户用正能量回怼丧文化【网抑云】变成了【网愈云】,把人间美好给到大家。
这也是产品从用户情感诉求出发,反向驱动设计。或许这才是网易云音乐取胜的重要法宝。
设计师要有发现美的眼睛。美不仅是视觉,还有好的体验流程。不要让用户思考,这是每个设计师所追求的。
认真记录产品细节,了解背后的思考,也是不断提升自己逻辑思维和表达能力的一种方式。
本期产品细节分析结束,点击原文链接查看更多,我们下期再见!
作者:碳水Sir;公众号:草蓉三石
本文由 @碳水Sir 原创发布。未经许可,禁止转载。
参考文献及链接:
1.https://www.sohu.com/a/506317507_120099902
2.https://baijiahao.baidu.com/s?id=1667366524064453555&wfr=spider&for=pc
3.https://www.zhihu.com/question/404810159/answer/1326228938
4.https://xw.qq.com/cmsid/20210328A0A1JB00
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当你使用形形色色的APP时,是不是时常不由自主地感慨“这个APP的界面太丑了”、“这个APP太难用了,连入口都找不到”,是什么原因造成这种感受呢?
认知心理学中有个概念叫做认知负荷「cognitive load」,它表示大脑在工作中记忆资源的使用量,会影响用户的信息阅读和产品使用体验。本文将从信息层级、信息结构、阅读顺序、信息密度、文案表述五个层面来探讨如何降低用户认知负荷。
格式塔心理学的封闭性原理告诉我们,人们在认知某个东西的时候首先看到的会是整体、而不是单独的部分。如图所示,你首先看到的是一个蓝色的字母U和深褐色的人头侧脸,其次才是构成这个形状的各种细节。
从人类视觉系统成像原理来说,人类天生对于颜色对比非常敏感(彩色视觉是因为视网膜中3种视锥细胞分别感知特定颜色所致,当用户同时看到多种不同的颜色时,不同视锥细胞就会被激活眼睛感受到强烈的对比)。
因此,在设计界面时通常会通过大面积的色块对比来凸出层级更高的信息。
总结来说,我们在平时的设计中常用形状大小差异和颜色对比差异来拉开信息层级。
此外,由于人眼视度(舒适的垂直视场角度为-30°~25°)和用户使用不同设备时的阅读角度问题,人眼对于屏幕上不同区域的关注度有着天然的差异。
因此,我们在设计时若想拉开信息层级,除了使用面积和颜色对比外,也可以通过位置对比来实现,即将层级较高的信息置于舒适阅读区内。如图所示,移动端设备位于屏幕中央偏上的信息在阅读舒适度上会优于屏幕下方的信息。
我们知道了如何通过设计手段来区分信息层级,那在信息层级区分上是不是越多越好呢?
显然不是,信息层级过多也会增加人脑的认知负荷(整个页面显得很花哨);而信息层级过少,则页面的内容展示会比较平均、不一定能突出所有重点信息。一般来说,我们可以将信息划分为重要信息、次重要信息、一般信息和和辅助信息,也就是信息层级控制在4个以内比较合适。
如图所示,我们把聚划算的页面做高斯模糊后,里面的信息层级就一目了然了。
在讨论信息结构之前,我们首先对基本的信息单元做拆解:信息单元 = 信息本体 + 信息容器,这里我们把信息本体定义为我们主动让用户感知并能辅助其进行下一步动作的信息元素,而容器定义为具有明显视觉区隔的信息承载物。信息本体一般包括图片、文案、icon、行动按钮等,而信息容器可以大到页面小到一般的模态、非模态控件。
如图所示,在典型的电商场景中商品卡片可拆分为信息本体(商品图、商品名、商品价格、利益点)+ 信息容器(卡片):
熟悉格式塔原理的朋友都知道相近原则——即彼此位置相近的物体会被人们看成是一类东西。同时,保持相同的信息结构意味着视觉焦点内不同层级信息的相对位置是固定的,这样用户在快速扫视某个产品时会降低记忆负担——即无需寻找同属性的信息。反之有一定的记忆负担,不利于用户快速扫视重要信息。
如图所示,滴滴我的钱包页面5张轮播图的信息结构相同,遵循左文右图和主文案在上、辅助文案在下的信息结构。
而支付宝理财页面的轮播图则有着不同的信息结构,如辅助文案和按钮在不同轮播图中的位置和大小、样式均不一样,轮播时同类属性的信息会以不同样式在不同位置切换,增加用户的眼动成本和认知负担。
从页面整体动线看,同类或关联信息会有明显的区块分隔。如下图所示,滴滴「我的」tab在页面整体动线布局上有着非常明显的区块划分来承载关联信息:
用户信息(个人信息+会员信息)→常用工具→促活福利(卡券 + 福利)→平台服务(金融服务 + 企业服务)→低频工具。
从信息单元内部来看,同样会对关联信息做位置上的划分。例如一般的社区信息流卡片结构基本都是生产者信息→内容信息→互动入口。
我们前面提到过信息单元=信息本体+信息容器(容器为具有明显视觉区隔的信息承载物),而信息容器的排布也有其内在的规律。
笔者体验过大量产品后,大致总结了3种较为常见的容器排布结构,即三角结构、宫格结构和列表结构,每种结构容器的排列规则会遵循一定的主次关系并根据其特点有不同的适用场景。
(1)三角结构
我们都知道三角形是多边形里最稳定的结构,其容器排布主次突出(根据主要容器与次要容器的位置关系可分为上下结构和左右结构),用户纵向的视觉迁移路径较短,一般比较适用于数量较少、且有明显优先级的场景。
(2)宫格结构
宫格结构适用于优先级相同或相似的功能入口,一般以四宫格和六宫格为主,数量过多时容易造成视觉疲劳和信息密度过高。四宫格信息容器和六宫格信息容器如图:
值得注意的是容器内也可以是宫格结构,但这种宫格结构的信息主体数量会比信息容器更多:
(3)列表结构
列表结构同样适用于优先级相同或相似的功能入口,但与宫格结构不同的是列表结构的一般具有排布逻辑或规则,如按照时间线排布。
列表结构包含横向列表和纵向列表,横向列表适用于短文案卡片(比如活动或功能入口),方便用户扫视更多图片;纵向列表适用于长文案卡片,用户可以快速扫视较多文字。
在B端设计需求中,我们经常会遇到让用户输入一堆信息的场景,这时候如果我们把所有信息都罗列在1个页面中,可能会造成高跳出率和低完成率。
表单设计领域的专家Adam Silver通过实际项目发现:将较长表单按照关联性拆解为若干部分,能有效提升用户满意度以及完成率。除此之外,Adam还总结了这种设计理念的16个优点,我们认为其中比较有价值的是这3个点:
市面上将长表单拆分成几个步骤做分页处理的产品比较多,如下图小红书就将店铺申请流程拆分为了填写店铺类型、经营类目、个人信息3个部分。
我们都知道用户的阅读习惯一般是近似于从左往右、从上至下的Z字形结构,且基于人眼视度和不同设备屏幕角度的差异,人们扫视屏幕时一般会先注意到屏幕中央偏上一点的位置,因此我们在设计信息结构时也要考虑用户的阅读路径和习惯,将对用户高价值或者高优先级的信息置于视觉焦点容易触及的地方。
那什么是对用户高价值或者高优先级的信息呢?我们判断的标准是哪种信息形式(图片or文字)更能高效地传递有效信息以辅助用户决策,比如在电商产品或外卖产品中一般采用上图下文或者左图右文的信息结构,且会将图片的信息层级拉到最高,这是因为用户在快速扫视过程中仅通过看图即可看到这件商品,初步了解外卖商家卖的是什么。
但如果我们换一个场景,这种形式就不那么适用了,用户仅通过看图并不了解这条资讯的大致含义,因此,此时文案的优先级更高,常常采用上文下图或者左文右图的形式。
国外的用研团队曾通过眼动热力图的AB实验发现通过在图片中加入人类面部表情的视觉引导对于信息的阅读率有明显提升作用。如图所示在第一张广告图中,用户的视觉焦点大部分集中在了婴儿的脸部,而右侧的文案则很少有用户关注,第二张图中婴儿由正脸转化成了侧脸同时眼睛看向右侧的文字,此时右侧文字的眼动热力成像明显提升。
这里的信息密度指的是在单位容器内(卡片、页面)所呈现的信息量,比如在1个页面中如果信息密度大,则相对屏效较高,但却容易增加用户的认知负荷;反之,1个页面中信息密度低则相对屏效较低,用户的认知负荷也相对较低。
我们来看1个关于信息密度对于阅读体验影响的案例:在美国开车,人们常常因为看不懂街边的停车牌而违停被罚款,我们可以看到左图中的停车牌上密密麻麻全是字,想要阅读根本无从下手。
Nikki Sylianteng是一个华裔的设计师,当她初来乍到美国时也因此遇到了很多不便,针对这个问题她简化用户的需求,即:
于是她将文字信息做了可视化处理,通过较少的文字+色块极大地降低了停车牌的信息密度,让司机看到后一目了然。Nikki Sylianteng的这种设计被美国各地的市政部门广泛采用。
在传统媒介中,一张充满文字和图片的报纸与一个时尚杂志封面的信息密度对比更加明显,给读者带来的阅读体验和认知负荷也完全不同,这也是为什么很少有人会耐心读完报纸上的文字。
关于海报与杂志设计还牵涉到图版率这一个概念,简单讲就是图片面积所占整体版面的比率,通常来说图版率越高则表现力和亲和力就越强,有兴趣的读者可以自行上网了解图版率的相关知识,在这里就不做详细阐述了。
在广告场景下,当用户被图片吸引视觉焦点后,文案表述就显得尤其重要了。这时候我们要搞清楚3个问题:
首先,我们得搞清楚核心目标受众是谁,同一款产品来自一线城市的年轻白领和三四线城市的中年人关注点和付费动机可能完全不一样(比如同样都是手机,一线城市的年轻白领更关注颜值和性能,而三四线城市中年人更关注价格和质量)。
这时候产品的广告文案也必须依据核心目标受众的需求点来设计才能命中用户,小米手机的线下广告语在一线城市的地铁站(左图)和农村的大字报广告(右图)就采取了完全不同的描述策略。
在回答完以上3个问题后还需要注意,我们的文案描述目标受众是否能够理解,因为人群不一样,其受教育程度和理解能力也会不一样。
在设计动作文案时,我们时常会受到惯性思维(常态场景下的通用做法)的影响而忽略了动作本身的意涵。
比如下图的二次确认弹窗用户取消上传和取消订单是一个对当前行为的否定,但我们习惯于用“确定”和“取消”来让用户回应是否进行某个行为(我们也可以从另一个角度理解,否定的否定就是肯定,点击「取消」按钮即继续用户当前行为,但这种理解很绕),这个时候就会带来理解上的歧义,当出现这种情况时,最好的做法就是将动作本身简单明了地描述出来避免产生歧义。
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
最近看到了一个很有用的知识,它是项目管理中的一个概念,叫做Stacey矩阵模型。
这个模型我看完之后,对应到设计行业上,
发现它对于“设计师面对不同类型项目,应该如何做决策”,很有启发和帮助。
而我自己最近也刚好离开了熟悉的环境,要面对一些新的挑战,
这个模型也给我提供了一些可借鉴的思路。
所以决定整理下自己的心得,给大家分享一下。
这个模型将项目分为“技术”和“需求”两个维度,建立了一个坐标系:
横轴是“技术”层面,判断技术的确定性和不确定性,可以理解为技术是否成熟。
纵轴是“需求”层面,判断需求是明确的还是不明确的。
根据这两个维度,可以将项目划分为五种类型:
1. 简单型(Simple):技术确定,需求也明确
2. 烧脑型(Complex):技术确定,但需求不明确
3. 棘手型(Complicated):需求明确,但技术不确定
4. 混乱型(Chaotic):技术不确定,需求也不明确
5. 模糊型(Hazy):并非完全不确定,介于混乱型与其它类型之间
而针对不同区域的项目,这个模型给出了相对应更适合的开发方式、解决方案。
“技术”的确定与否,与“需求”的确定与否,基本上就涵盖了所有的项目情况。
我们可以将目前的项目情况对应到这个模型里,判断它是处于哪个区域的,
再根据它所在区域,选择性使用这个区域所对应的解决方案。
相比没有任何方法原则,仅凭经验做事,
借助一个成熟的方法论模型框架,来辅助自己做决策,
条理会更清晰,做决策的效率也更高,
这就是建立思维模型的好处。
思考一下,你目前的项目是处于什么样的区域呢?
一、不同项目类型的应对思路
在具体介绍不同项目类型对应的解决方案之前,
我们要先从大方向上来看一下这个模型。
从模型整体来看,最理想的项目类型,必然是处于区域1的简单型项目:
技术确定,需求也确定。
所以在大方向上,
我们应先采取一种向下的“简化思路”:
也就是尽可能将项目引导向最简单、最可控、最稳定的“简单型”区域,
需求维度上,引导客户明确需求,达成共识。
技术维度上,尽可能选择更可控、更成熟的技术。
所以项目的前期阶段很重要,这个阶段决定了项目最后的导向。
前期多花点时间沟通讨论,可以为后续执行减轻很多负担,
目的是为了在这个过程中尽量减少不确定性,
让项目类型流向更简单的区域。
接下来介绍下不同项目类型对应的应对方案:
1. 简单型(Simple):预测型,做好计划,按计划执行。
2. 烧脑型(Complex):增量型:逐步构建,每次增量一部分。
3. 棘手型(Complicated):迭代型:先搭建基础框架,再逐渐迭代改进细化。
4. 混乱型(Chaotic):避免掉,很难成功
5. 模糊型(Hazy):敏捷开发(更多是对于产品层面了,对设计领域的借鉴意义可能不大,所以这里不做引申。)
01 预测型:
适合需求明确,技术也成熟的项目。
这种通常是比较简单的项目,或者是已经做过多次的很成熟的项目。
对于这种可控性高的项目,可以提前制定好完善的计划,
之后执行就按之前的计划,按部就班完成即可。
02 迭代型:
适合需求明确,但技术不成熟的项目。
对于处于初期阶段的设计师,通常面对的都是这样的项目,缺少经验,技术还未成熟。
这时候应该先去做一个比较简略的粗稿,明确大方向,再去逐渐细化完善。
而错误的做法是:先去抠细节,在一个局部的小细节上磨半天。
结果就是,细节也不对,大方向更不对,
不仅效率低,做的还全是错的。
我自己以前就犯过这样的错误,非要把东西做的差不多了,调了很多细节,再拿给主管看。
结果整个方向都是错的,而且因为已经做了很多细节,改起来还很麻烦。
实际上我应该在做好大方向的粗稿后,就拿去给主管看,
确定了大方向,再去打磨细节。
因为当你经验成熟后就会发现,只要大方向出来了,之后能细化成什么样,基本可以预见了,剩下的只是时间问题而已。
03增量型:
较适合技术成熟,但需求不明确的项目。
这种类型的项目很普遍,比如客户需求不明确,不知道自己具体想要什么。
还有可能是项目体量比较大,要考虑好所有细节,需要很长的时间。
这时候就可以尝试用“增量开发”的模式,
也就是先做好确定的那部分,然后交付给客户,
客户提出了新的需求,再增量进去。
像堆积木一样,想到一点做一点,每次完成一部分,
而不是等全部想好再动手。
这样做的好处是:
1. 可以在执行上先做起来,避免因为需求还未确定,导致执行无法推进。
比如在项目前期,虽然脚本还有很多东西没有完善,但一些已经确定要做的东西,就可以先进执行,或者做技术上的测试等等。
2.交付客户的部分模块,通常是已经比较完善的,客户能尽早看到一个直观的结果,减少理解偏差。
比如有时候明明草图阶段已经确定了,
结果等成品出来,客户又不满意了。
因为每个人想象出来的东西是不一样的。
很多设计师还会遇到这样的问题:难以理解领导者的想法。
无论是自身经验的原因,还是沟通上的问题,
总之,对于需求的理解是模糊的,
不清楚领导想要的到底是什么样的。
这时候其实就可以采用“增量”的设计思路:
先完成自己能理解,能确定的部分,然后拿给领导看,
这时候他可能会提出一些新的反馈,告诉你接下来应该做些什么。
再根据反馈,继续往下做。
这样可以快速产出一个可见的结果,加快沟通频率。
而不太好的做法是:
自己在那死磕,自己在那猜,非要做完再交。
最后,这个过程消耗了很多时间,得到的结果却根本不是对方想要的。
小步快跑,多次更新,这种“增量”的设计思路,
对于需求不清晰的情况,执行效率很高。
二 如何运用到其它方面?
除了项目上,Stacey模型对于设计师遇到的一些其它问题,同样有借鉴价值。
接下来我们看看在职业成长和技能学习上,可以如何借鉴:
职业成长上如何借鉴:
根据Stacey矩阵模型图,我们不难推演:
对于处于初期阶段的设计师,由于能力不成熟,技术上是不确定的。
如果再加上客户需求也不确定,
项目类型就会变为“技术不确定,需求也不确定”的混乱和模糊类型,难度很高。
这就像是,刚出新手村,就要去打BOSS一样。
所以在职业生涯的初期,应尽量去一些大公司,或比较成熟的公司。
因为这样的公司,往往需求到你手里时,基本已经是确定的了,
只要专心去打磨你的技术就好。
如果去一些本身不够成熟的公司,需求也不确定,自身的技术也不确定,
无疑进入了困难模式,导致很难提升,一团乱麻,还会打击自己的信心。
技能学习上如何借鉴:
如果我们想要掌握一个新的技能,它是处于什么样的区域呢?
需求是确定的,而技术不成熟,
所以属于“棘手型”项目。
那就可以用“迭代”的方法。
比如你要学动效,那就可以先去找一个简单但完整的动画小案例,
先去把整个流程、一些最基础的知识点弄明白。
学完之后,就已经可以做一点简单的小动画了。
然后再逐渐加大难度,不断完善和迭代你的技能。
这种方法的好处显而易见,在很短的时间,就能把技能运用起来,
而不必等到学的差不多了,才能开始运用。
我最早学软件时,用的就是一种很低效的方法:对着一本工具书,一点一点学软件的每个功能。
结果整本书看完了,都还不知道要怎么用。
这也跟当时的教学资源环境不成熟有关。现在很多教程都是基于具体、完整的案例教学了,学习起来效率很高。
所以在选择教程时,应优先选择案例型的教学,而避免单纯功能模块的讲解。
小结一下:
面对需求的不确定,或技术的不确定性,无论是迭代开发的思路,还是增量开发的思路,方向上其实都是在逐渐减小不确定性。
面对技术的不确定、不成熟,那就先大致完成一个粗略的版本,再去逐渐细化、优化、迭代。
面对需求的不确定,那就先完成确定的部分,做一步看一步,随着想法、需求的逐渐完整,不断填充完善设计。
而对于技术也不确定,需求也不确定的混乱和模糊项目,但又无法避免的,可以尝试多种方法混合使用。
整体来说,这是一种向下简化,减小不确定性的思路。
拓展:逆向应用的“挑战模式”
而根据这个模型推演,逆向思考,
会发现其实还有一种向上复杂化的思路。
我把它称为“挑战模式”。
顾名思义,就是将处于区域1的简单项目,向复杂的方向演变。
一般是在技术的轴向上,将确定性变为不确定。
为什么要把它变复杂?找虐吗?
当然不是。
处于区域1的简单项目,因为它简单可控,容错率高,
所以恰好是用来尝试新技术的最佳实验对象。
在这样一个非常稳妥的环境里,你可以放手大胆去尝试新的技术,新的想法。
失败了也问题不大,大不了还是换回老方法呗。
比如我们有一些日常的EP项目,每个月都有一两条的产出,技术上和需求上都已经很成熟。
这类项目就是我们的快乐实验场,可以大胆尝试一些新的技术,新的想法。
而且,适当给自己加点挑战,也可以消除重复性工作带来的无聊感。
尝试下这种“挑战模式”,非常有利于设计师能力的成长。
在简单的项目里,将新的技术打磨成熟,
之后就可以在复杂的项目中去应用了。
可以不断拓宽自己在技术轴上的确定性范围。
避免陷入技术和需求双双不确定的混乱情况。
结语
最后,出于严谨考虑,要说一下,
我对这个模型的一些理解,不一定绝对准确。
毕竟它是另一个领域的知识。
但我们学习借鉴其它领域的知识,
本来就不是为了照搬过来。
而是为了从中吸取能够借鉴的部分,
最终目的,是要为自己所用。
最后留给大家一个思考题,可以按照步骤依次进行,
1. 你目前的项目是处于什么样的区域?
2. 如果处于较复杂的区域,能否引导向更简单的区域?
3. 根据Stacey模型,使用什么样的方式更合适?预测型、迭代开发、增量开发还是混合使用?
4. 具体可以如何做?
作者:崔小俊
转载请注明:站酷
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在产品定义阶段我们经常会提到两种图:用户体验地图和用户旅程图,很多人会将二者混为一谈,甚至许多专业老鸟也分不清楚二者的区别,接下来我们通过对比来分析一下二者的区别。
概念(是什么):
用户体验地图是:以大众视角的方式,将一般用户在完成一个目标过程中,体验路径可视化的工具。这种体验不拘泥于某种特定的产品或服务,而是从更广泛的角度理解用户的行为(不同于用户旅程图,用户旅程图是针对特定的产品或服务而展开描述的)。
作用(为什么):
用户体验地图是用户旅程图的前提。用户体验地图是在用户画像和需求分析这个阶段做的事情,在信息架构之前要做好的,它能帮我们发现大的机会点,适合从无到有的产品过程:产品从0到1、全新改版、或者新项目开展。
1、不限定产品或服务,描绘用户体验路径
2、理解一般用户的行为,做初步研究
3、建立体验基准理解,达成团队共识
使用方法(怎么做):
在确定本次研究的目的和原则的前提下,按事情发展顺序,分别从阶段,行动/行为,想法,心态/情绪,痛点,机会几个方面组织和描述事件
这里仅是简单示例,大致理解就好
概念(是什么):
用户旅程图是:将用户通过某一特定的产品或服务,完成某一具体任务或目标的过程可视化的工具,描述的是某一角色在特定场景下经历的故事,包括用户从第一次接触产品、触达产品的各个点。
作用(为什么):
用户旅程图能让设计师和其他相关人员理解产品更细节的部分,深入的了解产品的某个模块,并根据对用户情绪、想法帮助产品的设计和优化。它通常作为业务逻辑梳理流程的工具来用,和它配和的工具是业务流程图。
1、准确定位用户旅程图中激发用户快乐或导致痛苦的触点
2、打破壁垒,在团队内部建立一个具有广泛共识的用户旅程
3、基于共识,将旅程中关键触点分配给团队内部成员
使用方法(怎么做)
用户旅程图可以用在设计过程中的任何时候,作为整个产品设计周期中团队的参考点。每一个用户角色或者用户类型都有自己独立的用户旅程图。我们需要通过以下几个维度去描绘用户旅程。
A角色: 这个角色比体验地图更具体,更细分,你可能要讲当前任务的相关角色都列举出来,讲代表性的用户都跑一遍流程。
B情景: 特定用户的特定场景,这里要具体到某一项任务流程
C期望:要解决什么问题
D其他:可以延续使用体验地图的行为、想法、情绪线、痛点、机会
使用淘票票app购买电影票的用户体验地图(图片来源:《步步为赢:交互设计全流程解析》)
通过以上分析我们了解了两种工具的区别,虽然两种工具在颗粒度上有所不同,但是不管哪一种工具都是为了帮助我们了解用户行为洞察用户痛点寻求机会点,我们需要在合适的时机选用合适的工具。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com