Dashboard在B端设计的工作中是一个绕不开的话题,在此我根据自己工作中实际的一些经验总结给大家归纳出一篇更符合工作场景中Web端的Dashboard设计内容。
Dashboard的中文直译是仪表盘,最初与dashboard相关在界面出现的是苹果电脑系统Mac OS X v10.4 Tiger操作系统中的应用程序,用作称为“widget”的小型应用程序之运行基础。
2013年Stephen Few写的《Information Dashboard Design》中指出“仪表盘是为了实现某些特定目标而对重要信息进行的视觉传达,对一屏上的内容进行组织呈现使人一瞥便能掌握其所传达的信息。简单点来说就是:为用户提供全局概览,让用户快速掌握工作进展及进入工作状态并可以访问最重要的数据,功能和控件。
Dashboard设计案例
以下是Dashboard常见4点设计不是很好的案例,现在带大家一个个看下怎么才是更为合理。
案例一:右边Dashboard上的信息做了层级的区分,相对左边更加直观。
案例二:左边Dashboard颜色偏荧光色,色彩语言相对右边不适合长期工作使用。
案例三:设计方案时没有采用格栅格化解决适配对不齐等等问题
案例四:dashboard模块之间间距没有呼吸感。
B端设计中,设计师要实时了解哪些是重要内容以及核心数据。Dashboard可以直接传递出:“业务整体状况如何?有哪些关键指标?各指标的运行情况分别如何?哪些指标出现异常?需要用户做些什么?”。由此可知,B端Dashboard产品中大多数都以看为主,辅以功能控制。主要分为监控操作、分析处理两大场景。当业务较为复杂时,可以用战略概览场景提供快速入口。
1.监控操作:
使用户可以一目了然地检查其状态,提供关键指标实时监测并且告知异常状态。更重视实时观看状态。
2.分析处理:
通过数据图表,配合控件进行不同维度的数据分析。以数据为中心,并显示尽可能多的相关数据视图。
数据性Dashboard。数据概览可视化展示为主。帮助用户提供较为直观数据维度,更好分析决策。
综合性Dashboard,既有提供数据全局概览可视化,同时也能快速在页面进行操作完成工作。国内B端产品最常出现的Dashboard功能模式。本篇文章也是着重介绍如何完成这个类型需求
3.战略概览:
在复杂的业务中,可以呈现业务分散的重点信息,用户可以通过提供入口快速跳转至相关模块。
B端设计过程中每多了解一个维度分析就更有利于下一步Dashboard框架搭建。因此在对Dashboard有了一些简单了解之后,我们再来了解下用户场景。例如:用户是财务人员审批商户充值申请。工作人员进入dashboard之后先是进行充值打款申请。那么设计时可以考虑在Dashboard中加入常用功能:充值。并且需要给到相应充值数据概览:账户余额。每个B端产品都有自己特定工作场景。因此从用户、场景和任务这三方面考虑,可以做到帮助设计师更清晰设计dashboard布局以及设计自查。
因此以上这些信息都是需要在设计Dashboard时弄清楚的内容。
信息处理
当弄清楚需要呈现信息内容后,需要进一步对信息做处理。从用户的角度,举个例子在FMS财务系统记账中,财务需要查看季度报表。那么数据的单位以默认季度呈现会更为符合使用用户需求,准确且高效。具体可以从以下四个维度来做进一步处理:覆盖范围、时间跨度、粒度、个性定制。一般核心指标不超过7个,确定核心指标的联系及优先级。
合理的信息结构能够帮助用户高效阅读,理解内容。如何将信息碎片有逻辑地组合在一起,合理呈现和布局,选择使用什么结构视内容而定。
举个例子:
对于管理者的角色来说使用Dashboard的诉求是:及时把控业务情况
信息处理内容:
1.掌握重要业务数据:经营数据,订单数据,客户数据;
2.了解员工工作进度;
3.处理急需解决的工作任务。
对于执行者的角色来说使用Dashboard的诉求是:高效完成工作任务
信息处理内容:
1.急需解决的工作任务:待发货订单,待退款,待跟进客户
2.了解自己的工作进度
3.经常使用的功能:发布商品,添加客户,开单
4.查看重要通知公告:公司发布的公告
Dashboard表现结构常见两种类型:卡片型、流程型。
卡片型
最常见就是卡片型。即将有相关联的内容进行分组呈现,让Dashboard内容归类而不杂乱无章。
流程型
内容相互之间具有一定的逻辑关系,如地理位置关系、数字包含关系、对象父子关系等,这种结构可以让对象之间的逻辑关系十分直观。很直观的呈现了资源对象之间的相互关系。
国内B端产品一般是由以下这几个部分组成的。全局导航、数据概览、待办事项、常用功能、任务进展、平台推送、数据图表。下面带大家仔细看下具体每个部分具体如何设计。
1.全局导航
在B端Dashboard中,全局导航一般由三个部分组成。平台LOGO、功能入口导航、快捷功能导航。
1.1平台LOGO
一般这里都会放LOGO,对于一些壁垒标准化B端服务,这里通常是给好标准规则,后台自动配不同客户的LOGO。因此要考虑到区域的色彩是否适用各种不同LOGO。如果是OA或是定制化B端服务,那么就可以直接定制设计。
1.2功能入口导航
就是菜单导航,在B端Dashboard一般都是在侧边。建议最多不要超过9个,遵循7±2原则。尽量将同类型归类,好好利用下二级分类。另外入口不要太深,用户容易找不到入口。尽量设计优化合并来减少用户使用负担。
在国内B端产品中,最常就是将功能入口导航放在侧边。适用于更专注功能和快速操作的系统
优点:
拓展性,一级导航的数目可以展示更多;
层级清晰,一二三级导航都可以流畅展示;
操作效率高,用户在操作和浏览中可以快速定位和切换当前位置。
缺点:
视觉动线左右折回,比顶部导航更易疲劳,
内容区的排版空间更小,需要考虑适配问题。
在国内B端结构比较庞大的后台中,通常会将功能入口导航设计为混合模式。混合模式就是将功能入口分为顶部与侧边两边都有。这是因为侧边模式已经无法层级扩展性已经无法很好的满足产品架构了。
优点:
层级拓展性强,可达四、五级导航。
缺点:
操作难度上升、视觉动线更复杂。
还有一种模式:顶部模式,这种模式在国外产品中较多,在国内的B端产品中较为少应用。原因之一是起初最早的国内B端产品就采用这种排版模式,在国内形成了一种用户操作习惯。国外最常见的B端顶部导航:saleforces、hubspot、zoho。
优点:
沉浸感比侧边以及混合都要强,几乎不会对于用户的阅读行为有干扰,因为Web也有顶部浏览器菜单。
缺点:
一级导航栏的栏数及字段内容受限严重。国内B端产品会有很多快捷功能就更不利用采用这种模式
1.3快捷功能导航
一般包含:消息通知、账号信息、帮助中心、设置。在国内B端产品中基本上都是在右上角
在B端Dashboard中,数据概览通常都是选取最关注的数据指标来展示,而不是全部数据;选取最关注的时间段,而非全部时间段。
构成:数据名称+数字
这个模块在设计表现上最重要就是信息层级的设计处理。如何能够让用户一眼就看到最关注的数据内容指标。设计时注意突出数据才是关键。设计时关键数字上就要字号大一点,甚至可以采用特殊的数字字体,例如DIN系列,来加强对比。
待办事项模块通常是应用在执行角色的Dashboard中。节省工作人员寻找任务的时间,避免遗漏任务。
构成:待办事项名称+数字+可点击跳转的链接
待办事项的展示方式可以是数据可视化也可以是数据概览。但是有一点,数据必须是要能够点击的,因为待办事项就是要有入口去操作。同时也可以把待办事项平铺出来,平铺几个可以根据具体情况定。如果待办样式本身很多的情况下,可以采用tap切换的样式全部展示出来。
用户高频操作快捷入口,点击跳转相应操作页面。这个模块每个b端产品都不一样,需要仔细反复斟酌是否是用户需要的高频功能。
用户当前最关心的任务,常用进度条或者时间轴的形式表示。
平台用来触达企业的信息,一般有产品更新动态,学习培训,客服,广告推送,活动消息(这个一般比较常出现在平台类的b端产品中)
卡片式数据图表可以拆分成图表+辅助两种组成部分
7.1图表
B端设计师需要准确通过图表来表达出用户需要的维度信息。
7.1.1折线图
随时间(连续内容)而变化的连续数据,适合表现趋势。Y 轴刻度值选择要合理,以数据波动要最大化的显示
7.1.2面积图
面积图和折线图比较类似,针对只有单个数据类型有面积区域的表达效果比折线图好。数据类型尽量不要超过2个,有2个数据类型时,注意调整面积区域的透明度以及色系保持统一
7.1.3柱状图
通常用来统计累积叠加数据,数据之间能够非常清晰直观对比。柱状图的单位宽度不要是固定值,单位宽度之间间距在不同分辨率屏幕下的对比要合理。不用大圆角元素,不够严谨,太活泼。最多使用两种颜色,一种默认,一种hover或tap,保持界面统一性
7.1.4扇形图
有共同的上一级层级作为统计总合,数据之间平级且有占比。数据必须是正整数,至少两个以上数据,且用不同颜色表示
7.1.5环形图
与扇形图很相似,但是比扇形图更加直观浏览且不被抢视觉。避免过于太细太粗,控制好留白呼吸感
以上是常用的图形图表,绝不是全部。有兴趣的同学可以到以下两个网站可以利用碎片化时间扩展学习
EChart:
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2辅助元素
卡片型图表的第二部分也就是辅助元素。辅助元素里面还有很多细节元素组成:标题、轴、提示信息、标签、气泡信息、功能(筛选、导出、保存)。当然在实际设计中,会根据场景去修饰删减一些元素,以此来减少冗余信息,帮助用户快速达成目标,在最少的时间内获取更多的信息。
7.2.1标题
标题是区分卡片信息,迅速让用户了解卡片图表的重要元素。通常需要斟酌严谨不重复,简洁概括。
7.2.2轴
轴上最重要的内容就是单位,将每个数据在同一轴上都是维持同种基准。便于进行数据测量。
7.2.2.1轴的细节
现在知道了轴由哪几部分构成,那么接着了解细节
轴线
轴线细节一般只考虑是否显示,在有网格线的情况下,可以考虑隐藏x/y轴线。通常显示数据的轴作为隐藏,突出视觉重点,减少不必要的线条。
轴刻度
轴刻度是轴线上的间距不宜过密,确保信息可读性以及呼吸感,根据 7±2 法则,在可见的卡片内尽量保持这个规则,可以利用抽样显示的手段来优化轴标签重叠的问题,这种一般是在连续性内容上可以使用。若轴上单位信息确实过多,虽然是连续性内容例如展示30天单位,由于本身卡片信息不是过于最重要层级,设计在相对狭小空间尺寸中,那么建议考虑在轴线上安排滚动条,并将重看单位放置前位。设计特别注意点,将滚动条设计作为辅助元素不宜抢视觉。
网格线
网格线是用来辅助图表数据直观对比的,增加数据更快速的阅读性。举个例子:数据展示轴线在左边。那么离左边最近的数据图形可能不需要网格线就能立即对应到相应数字。但是越靠近右边的数据图形就相对比左边的数据图形就比较难一眼识别。因此网格线也担任了刻度尺的功能。在设计网格线时要注意网格线更多是辅助的角色。表现类型可以选择虚线或是实线。但是要把握好颜色选用不抢视觉重点又能看到。
7.2.3提示信息
以对照的方式来理解可视化对象的项目归类信息,总结图形形状和文本组成内容。
7.2.4标签
在图表中,标签是对当前的一组数据进行的内容标注。根据不同的图表类型选择使用。
7.2.5气泡信息
当标签默认不显示,气泡信息一般是鼠标tap或者hover时,显示该位置的数据。在简洁的页面中,也能让用户直观看到信息对应数据结果
7.2.6功能
这个模块涉及的内容偏多,在表单页面更常出现,以后有机会可以单独说。一般常用功能如筛选、导出、保存。可以让用户控制和友好的体验
确定B端产品的设计风格
首先tob的产品dashboard说到底还是给使用用户所使用,也就是“人”。所以通常情况下dashboard除了传递出用户想要的数据信息,还要传递服务于人。此外最重要的是B端设计师需要理解项目背景。例如某个财务应用平台不属于科技未来感,而是突出一种安全,高效,具有客户亲和力的商业产品特性。那么关键词:服务、轻松、高效、亲和、精致。那么一个干净、相对轻量、统一的Dashboard UI界面就提炼出来。
色彩
常说色彩是一种情绪版,在Dashboard设计中,色彩也是映射关键词的非常重要一个环节
字体
B端产品一般都是以数据为主要信息源,针对一些关键信息指标时,可以采用特殊的数字字体。由于本身数字字体包内存不大,所以也方便调用。例如DIN系列等等
设计稿尺寸
本篇内容都是针对pc端内容,具体移动端以后有机会会分享。大多数B端设计师都知道以1440x900设计,但是在工作中会以埋点数据了解到事实上真实场景还是以1920x1080的尺寸为多数。毕竟时代不一样了。以1440做设计主要还是考虑从上下兼容的角度的。B端与C端不同,C端往往照顾大多数的用户群体或是主要消费力群体。但是B端一般不会放弃任何一个用户,哪怕定制化。这个在C端是不太现实的。因此适配对于B端产品来说也是尤为重要。
设计原则
上面的内容更多是阐述每个部分的内容,实际工作中设计Dashboard时不一定按照那个顺序进行,因此在此再强调下设计Dashboard的设计顺序以及原则。要先弄清楚目标用户以及使用场景,确定好关键的大约7个核心指标。将用户整个流程梳理流畅之后,再开始考虑Dashboard设计执行。
同时在设计执行上也要特别注意几个点:
1.突出核心指标(7个左右)
2.信息层级区分
3.减少用户选择,尽可能默认给到用户需要的数据维度
4.界面简洁严谨
5.避免过多颜色与不统一
6.数据维度正确图表选择
设计的注意事项以及建议
1.tob的设计师要了解业务所处的周期在什么样的阶段。在探索期建议dashboard的设计应用于市面上现成的组件进行搭建,以便与研发团队一起为业务助力。更好更快的发展。
2.在tob的dashboard设计中,设计师要特别注意数据表现的落地效果
3.当dashboard只在设计层面改版,并且改版内容过大时,推荐保留旧版入口,提前进行埋点用户以便应对用户对于大版本适应缓解焦虑。如果有新功能或功能调整要及时加入一些引导设计,以便减少用户的学习成本。关于引导设计的内容欢迎参考我的上一篇文章:《B端必看的引导设计(一)》
4.允许用户定制和共享dashboard,虽然不适用于所有的B端产品,如果类似于团队协作中多种角色共用一套的dashboard平台,可以考虑引入这个功能。几组定制模块可以满足于不同角色的用户需求,并且能够增加dashboard的使用率
5.dashboard关键信息数据尽量设计在一屏以内,作为数据可视化,内容快速浏览获知全局,并且完成任务是比较重要的。
6. 突出统计数据的变化并对异常情况作出反应
7.数字设置不一定要设置为右对齐,但是单位是金额,那么要将金额设置为右对齐,为了使用用户识别方便,快速比较。
8.设计完Dashboard一定要自查一遍,是否真的符合工作人员的使用场景。有没有理解不准确的地方。
为什么b端设计师要懂得Dashboard,在很多b端业务场景中,有个特点,设计师常常会接到大量数据展示要求。如果设计师对dashboard缺乏认知,就有很大的可能性会造成信息杂乱,并且在Dashboard的界面中充斥着一些无关紧要的指标,这就是失去了Dashboard存在的意义。另一方面在b端产品中,Dashboard往往是以首页的形式出现的,是非常重要的。
文章来源:站酷 作者:一九互七
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前言
相信每个用户体验设计师都非常期望自己全程参与从0-1的产品设计,这样可以更有参与感,掌握业务的整个上下文,非常锻炼个人的设计能力,还可以提升对产品的sence。
当然实际工作中不是每个人都有这样的机会,也可能是某个已经非常成熟的产品做一些持续优化迭代的新需求。在不了解业务全貌的情况下就直接开始设计,其实非常被动。这个时候就需要花更多的efforts去熟悉业务背景、使用场景、操作流程、常用术语和设计规范等等。 一般面试中专业面试官都会让你描述一下你之前的项目案例,如果一直做的都是一些非常零碎没有体系的优化迭代需求,被cue到这个问题的时候就会一脸蒙蔽不知怎么回答。如果你正在迷茫或者希望寻求答案,希望我可以帮到你~
今天主要分享下——用户体验设计师面对下面不同阶段的设计思路:
1 . 立项前探索期的发散收敛(由于篇幅有限,本文重点介绍这部分)
2. 交付阶段的水深火热(下期见~)
3. 上线后的迭代优化(下期见~)
一、立项前的探索期
如果你现在处于产品意识形态还不清晰,立项前的摸索阶段,就需要重点关注下Inception这个阶段作为用户体验设计师所需要做那些事情,简单来说就是5W(why?who?when?where?what?)+2H(how?how much?)。在项目启动前期,通常需要制定一个简单有效的行管计划。不管你的角色是PM、BA还是UX,都需要迅速、主动的去推动整个项目的进展。在竞争激烈千变万化的时代,行动和计划都必须快速而敏捷,否则就会被人抢先一步措失良机。
有人就会问,你只是一个设计师,干嘛要做产品/BA的事情?有他们在你干嘛要抢他们饭碗啊?我觉得,如果你的能力允许的话,和产品/BA一起合作会达到1+1>2的结果。不要过分强调角色和分工,最主要的结果。最理想的工作模式其实就是这个项目中的每个角色都可以讲清楚正在做的事情,更可能多的理解业务和上下文。
言归正传,在项目初期,没有任何输入的情况下,只有模糊且抽象的idea,应该怎么推动?
1.1 市场分析
首先要了解行业背景,站在宏观角度上来思考,对整个行业有一个大致的、粗颗粒度的判断。其次分析产品所在行业的市场现状,判断目前所在的阶段和规模。最后分析产品可能的商业模式以及竞争对手对商业模式。在了解产品所在的市场业现状、行业趋势这个大背景后,可以通过整个大环境判断评估未来发展规律和洞察机会点。
在讨论策略走向时,最重要的无非就是找出我们自己产品的竞争优势。这里的优势是指别的产品无法代替或模仿并可以灵活运用的资源。为了创造竞争优势,我们必须思考要提供什么样的服务,用什么方法提供策略方向。
市场分析是对行业供需变化对各种因素及其动态和趋势对分析,主要用途有3点:
· 在纷杂的行业中找到和合适的发力点;
· 在众多竞争对手中找到普遍发展规律和优劣势;
· 建立商业模型,形成可持续的产业。
市场分析常用的方法:
· PEST(宏观经济法:基于公司战略的眼光来分析企业外部宏观环境)
· 波特五力模型(竞争态势分析:于竞争战略的分析,可以有效的分析客户的竞争环境)
· SWOT分析(优劣势分析:帮助企业找出自身优势,整合资源,从而形成企业的战略规划)
1.2 竞品分析
了解了行业的大背景后,就要开始有针对性的挑选几个在市场上非常成功有竞争力的产品去研究分析,学习他们的优点以及思考背后的原因,最后可以作为非常有说服力的设计依据或者启发灵感。
竞品分析的主要目的是通过研究竞品,找到适合自己产品可执行的方向。
一般都分析竞品的哪些地方呢?通常分析下面几点:
· 产品主要目的是什么?(一般讲项目背景、大环境)
· 产品定位是什么?(产品属性)
· 特色是什么?(优势、值得借鉴或深受启发的地方)
· 主要用途有哪些?(核心功能都及应用场景)
· 产品设计风格是什么?
竞品分析最常用的方法是用户体验五要素,将产品设计的过程抽象分为5个层次,将复杂的事物抽象成分层的模型,可以更直观、清晰的获取其内在逻辑。
具体的竞品分析案例可以去我之前做的项目里面去看,采用用户体验五要素的方法来分析的。
1.3 用户调研
用户调研目的是用于决策参考和创意启发,是周期性的一个活动,应该贯穿于整个设计过程,根据用户调研结果提出假设并上线验证。进行任何的产品设计,都应该是有数据支持、有理论依据、有正确的逻辑推导的,绝不该是凭空瞎想,或者拍大腿武断的做决定。带着问题去思考,通过调研验证产品的合理并给出最优方案这也是用户体验设计师存在的价值和意义所在。
· 定性研究
定性研究是探索性的研究,致力于定性地确定用户需求,它有助于设计师在设计初期构建想法,然后再用定量方法完善和测试。主要方法有:用户访谈(最常用)、情境访谈和卡片分类法(最简单)。
在产品探索阶段,还没有用户找谁调研呢?有个好办法就是分析完竞品后,我们可以筛选使用这些竞品的重度使用者或者发烧友去进行访谈,这样能得到最精准最有价值的用户信息。用户访谈是真正了解用户核心需求的一种方法,通过引导用户聊天去收取用户的反馈和挖掘用户的核心需求以及潜在诉求。
当然这是针对市面上已有且业界有很成功的案例而言,对于没有直接竞品的产品,访谈的用户可以为这个项目的发起人或者直接干系人、利益相关者。用户访谈之前,需要有一个明确的计划和大纲,把需要访谈的关键问题都罗列出来,可以细化到:访谈时间、地点和参与访谈人员分工背景介绍、受访者的基本信息、使用场景、操作习惯、偏好、痛点和建议。通常访谈3-5位典型用户,每位可以代表一类。 用户访谈的之前一定要想清楚几个问题:
· 用户想做什么?(使用目标)
· 用户的目标是什么?(拆分具体的ac)
· 用户想达到什么目的?(渴望的诉求)
文章来源:站酷 作者:BridgeQ
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导语:社区团购作为2020年的一大风口,虽然伴随其火热程度,社区团购基本上是人尽皆知,但是真正深入了解这个行业的人还是占少数的。本文作者从团长、产业模式和业务竞争关系三个方面出发,对社区团购的优缺点展开了分析讨论,与大家分享。
整个大零售产业至今没有谁站出来,对于社区团购市场的影响力和跨界冲击力做过很系统的阐述。少数几个产业知名人物给出过零散的意见,步步高超市的王填在两会提案中直接表态,有关部门必须严格监管社区团购的扩张,严格落实市场总局“九不得”规定,禁止社区团购互联网大公司通过价格手段倾销。
当然,步步高自己一年前就在长沙做着社区团购。名创优品的叶国富说社区团购再干一两年的话,500平方以上的超市基本没戏了。盒马的侯毅说社区团购是电商真正意义上,可以让全品类进入了中国所有地方,尤其是下沉市场。但是目前社区团购的交易形态和业务模式还很早期,整个赛道的模式还有很长的演变可能性。
整个赛道少数几个站出来发言的玩家,基本上都对社区团购的存在,以及三大互联网公司过去半年高举高打的重视,来自传统零售的防御心尤其重。
不过,按照此前相关部门监管互联网新业务的惯例来看,只要一个创新消费互联网业务的最终价值倒向于消费者,而且能够优化原来赛道的产业效率,监管在逐步观测和意见调整的总体态势,一向都是开放和支持的。
基于实体店业务的传统零售行业,对于社区团购的防御心应该是远超过此前传统电商和数字化零售跨界物种。社区团购提供批发式零售的家庭购买的成本和效率优化,显而易见的具备模式优势,代表着家庭场景购买的更先进生产力。
家庭购买一直是此前电商并未完全占领,或是仅有部分占领的一块最大零售阵地。就像以3C&家电起家的京东,会在财报分析师会议上,明确喊出京东未来第一品类是快消品——通过电商解决方案满足家庭购买一站式需求。
家庭购买的场景优质性和解决难点在于,它是需求和供给在履约层面最具确定性的零售流通方案。简单的说,它只是库存和房屋之间的确定性流通关系。
我们通常以为,一个人去沃尔玛为家里采买日常即时用品,是他自己和沃尔玛的买卖关系。其实对于沃尔玛来说,它的门店周边三公里内所有房屋里住着哪个人,其实没有差别意义。张三搬出去李四住进来,沃尔玛的来客逻辑都是一样的,这也是传统零售极度讲究门店选址的原因(除了美国Costco)。如果新搬来的李四不去沃尔玛,不是门店和李四房子的流通关系有变,而是李四认为沃尔玛在三公里覆盖圈的有效条件下,都不能替代沃尔玛逐步丧失家庭购买的一站式价值(假如沃尔玛确实不能满足的话)。
社区团购的出现,带来门店和房屋之间的确定流通关系,升级为门店和社区(多个房屋)的确定关系。购买场景的量变扩充,带来这种确定关系的规模化,很好的优化了单一订单(无论是到店、到家、电商)的成本与效率。自此,多个有利条件开始汇集到社区团购业务场景:家庭购买的商品普遍类同确保单品量相对集中、家庭品类价格空间微薄下还能创造价格优势、社区级集约化履约的成本优势、预售制集单的备货确定性(完全平台化作业的话,甚至可以做到零库存)等。
社区团购属于真正意义上第一次,实现了业务模式的先进性、平台组织机制先进性、前端体验价格的先进性,三位一体的同步进行。美团优选这种完全平台化组织业务链路的社区团购,甚至能在零库存的条件下,短时间内快速提高订单量规模。这让美团优选的主要平台任务,就是扩展入驻城市。而据我们36氪-未来消费 通过各种信息来源了解到的是,美团优选目前确实是订单量整体相对最高的社区团购平台。
与之相比,社区团购带来直接竞争关系的业务,应该主要发生在跨界但有交叉的其他提供购买的零售流通渠道。这种跨界又交叉的跨界关系,类似便利店的主要竞争者,其实发生在门店周边跨界的餐饮、烘培、茶饮等业态。彼此业态模式很不相同,但都是提供社区级的家庭日常购买。
社区团购的模式创新很大一部分确实在团长,脱离了团长的社区团购,很容易和社区门店自提业务混淆,即很类似此前破产的合肥呆萝卜做的社区店隔日自提业务。有了团长,平台才彻底放开手脚,专注做好平台特有且主导整条链路议价权的几个事情。
第一,不用直面终端用户的营销拉新和履约服务,全部交给团长。但是,2020年美团,滴滴,拼多多三大互联网巨头大规模砸钱投入,打破了此前由兴盛优选这种小公司创新才有的行业默契,直接把补贴给到终端用户。目的是短期内快速结束这个赛道的竞争和地盘划分。总的来说,社区团购抢不了小菜贩的卖菜生意,但是确实很伤兴盛优选的心,也很影响社区超市、百果园、钱大妈这些渠道商的业务。
第二,平台可以专注打造一套以团长为交互节点,以平台-团长-终端为交互关系(类似传统零售的经销商-小店-终端消费者),以社区级为履约交付单位,形成一套基于社区级场景的家庭日常购买生意。这样,平台就可以像一个传统零售的批发经销商,专注做好三个事情:小店拓展、品牌货源、供应链物流。
第三,简单地说,就是平台和团长,分工程度变深,彼此有限的资源和精力,更好的专注一个业务节点,做出更深度的能力。有了深度能力,效率自然就会变得更高。有了这些综合特性的驱动,分工优化彼此的效率,这个生意的魅力就形成:有了互联网的信息流效率及规模化,但是走的又是传统批发生意的成熟商流模式。
第四,社区团购主打的是家庭日常稳固购买,因为家庭购买与个人购买的最大区别,就是家庭购买是根据物流地址决定供给流通。简单地说,个人购买:服饰,手机,美妆,餐饮,一个人去全国任何地方的体验,其实都是一样。但是家庭购买:快销、食品、粮油、生鲜、清洁洗护,那就必须是在家里用。家庭购买的需求起点,也是围绕着家庭和住址发起。
平台的供给,自然围绕着家庭设计整个供给路线和效率公式。这也是为什么,传统零售辣么讲究开店选址的重要性。
社区团购更升级三步:
第五,这种生意集中下来,就成为零售业很理想的一种生意:批发式零售,美国Costco就是批发零售的集大成者。这种生意还有一个优势,就是所有的竞争力全在商品和价格。因为批发式零售,价格即使没有补贴,也比一般零售渠道便宜。
只要再做到东西品质很好,那简直就是零售最硬朗的实力:好货低价。做到这种程度的零售业,竞争力是空前的,互联网都打不赢的优质商业模式。美国Costco在全球第一消费互联网大国的中国开店,生意比所有线下店和电商都好,人家就没有互联网。
社区团购的问题也有,而且目前暂时还不好轻易解决,导致这个生意的现状和服务力,并没有发展的太成熟,业务链路上还有很多服务细节、品控和效率优化存在问题。
第一,暂时无法解决出货规模和品类丰富的函数关系。即规模是社区团购这种批发式零售的独特特性,但是一旦单品和品类走了丰富路线,铁定会稀释单一商品的规模。没有规模,就没有价格优势,就会反过来反噬社区团购这个商业模式的很有优势。
第二,暂时无法提供完整的一整套解决方案,这点生鲜最为典型。因为一盘菜的烹饪,中餐需要至少5-15种主料、辅料、配料、佐料。导致一盘菜的烹制,传统生鲜提供的购买体验,都是少量而多种的购买。这种购买是菜市场这种低门槛做生意,分散化的摊位设置又丰富配置菜品的线下场景强项,超市和电商直到今天都搞不赢菜市场。社区团购没那么大本事,抢不了小菜饭的生意。担心会抢小菜饭生意的人,骨子里还是看不起农民工。生鲜电商和社区团购,目前的产业能力还要大大的进化。
第三,对于三巨头、京东、阿里来说,各家企业也很清楚,生鲜只是当前快速积聚订单的起步手段。社区团购不能等于生鲜零售,这是大家心里揣着明白嘴里不说的共识。但是社区团购如果专注卖家庭高易耗的品牌快消品,它的价值也不高,利润率也很低。这里面的未来方向之一,还是要加强自建供应链,坚持走自有商品,或是品牌专供的路子。
第四,社区团购目前还有一个具备但没有很强发挥的模式能力,就是深入到村镇一级做下沉最彻底的团购。城市小区是社区,村镇也是社区。目前中国电商最下沉的地方,还只是到乡镇,还不能到乡镇下面的村子。因为电商一个订单一个物流包裹的履约模式,绝对玩不起深入到广袤分散,订单又不是很集中的村子。可是农村家庭除了极端贫困户,哪家不是完整意义上的家庭购买需求?社区团购的价值,在于它首次用最效率和经济的方案,让人看到了信心,可以做农村家庭一站式购买的渠道商,而且还可以深入到村落这个最下沉最末端单位。
生鲜前置仓、到家即时零售、到店购物、社区自提……这些围绕着社区场景做的家庭购买,社区团购与他们在模式也不具有可比性,但是业务方面未来的竞争关系会越来越强。
第一,前置仓和社区团购,模式很不一样,但是在生鲜品类、家庭客群单位、社区场景的履约线路设计三个方面,高度重合,导致双方在城市社区家庭的生鲜购买,确实存在直接的竞争关系。
2020年社区团购主要在二、三线城市作战,现在开始往北上广深一线城市拓展(上海还是最少)。这些一线城市都是前置仓重点布局的城市,两者的订单竞争短期内会有一定的直接关系。美团同时押宝了前置仓的美团买菜,社区团购的美团优选。而且美团的社区团购走的是更彻底的平台化模式,整个库存管理和拓城速度都做的很不错,外界确实对美团未来发展很看好。
反过来说,今天阿里社区团购,即盒马集市整合了零售通小店资源,反而坚持在供应链和物流方面走类自营的强控模式。加上盒马本身也在自营模式下做了社区到店和即时到家零售,以及还有手机淘宝流量扶持,阿里生态的潜在可用资源。预计美团和阿里,加上京东(如果京喜也有一个亮点模式),三家在社区级零售的竞争,在社区团购赛道的竞争,未来会非常好看。
第二,前置仓和社区团购的竞争力对比,两者现在有差异,但是对比的不公平。
因为前置仓所有能力都是围绕着品类——生鲜展开的。社区团购的所有能力是围绕着链路——团长展开的。当前阶段社区团购有了大投入而很火爆,才显得盘子很大。就好比自己家里今天结婚办喜事吃得好,就说自己可以过上一贯大鱼大肉的好生活。
因此,两者不在一个投入高潮期,不能代表社区团购可以替代前置仓,或是优越于前置仓的生鲜流通的模式,或是综合能力两者孰强孰弱(效率方面,目前来看前置仓的成本履约偏贵,但是综合体验更好)。
第三,即时到家零售背后,还有一个类似的平台化模式——同城零售。
他们这个玩家是用电商平台的规模效应,也在做着前置仓的生鲜生意,而且旱涝保收的只赚佣金。相比自营类且专注生鲜的前置仓,对于商品的操盘风险承担的更少一些。当然,这种平台天然要庞大,目前市面上也只有京东到家、美团(又有美团)、饿了么、天猫超市淘鲜达、淘宝买菜。
第四,即时零售天然是个大生意,也就是说,谁做前置仓,哪怕是创业公司,一开始就是正规大公司的规模来建构生意。
同城零售的规模更大,刚才提到,市面上就几家在玩。但是社区团购可以很小,只要团长搞定一个社区,再搞定货源,就能玩起社区团购生意。还是那句话,团长是社区团购生意的关键,而团长又是一个门槛极低且个体化的角色。
这也是为什么,武汉疫情封城期间,大量有货源的小菜贩,搞定一两个社区的物业公司或居委会,就能在各个小区玩起社区团购。毕竟,要说社区团购还需要什么互联网工具,微信群聊+微信支付,老人小孩都会用。
但是,团长既不属于平台的员工,也与平台没有强绑定的合作关系,导致团长的能力建设与长期成长都很有风险,团长的流动性(流失率)也非常频繁。团长角色的价值定义,兴盛优选此前并没有为行业提供一个成熟版本,这是摆在所有社区团购玩家面前的一个很复杂的问题。
文章来源:人人都是产品经理 作者:aria在这里
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。
2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。
在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。
苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。
而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。
这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:
剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。
还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:
实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:
1. 启动图标(前景,不带背景的)-108dp(324px)
当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:
这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。
个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。
但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。
所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。
不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:
最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。
目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。
Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:
目前我觉得性价比最高的就是 webp,它的优势主要在于:
唯一的 2 个问题在于:
我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:
1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)
不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可
2.下载 isparta
3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)
设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。
看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。
如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。
然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?
文章来源:优设 作者:Nana的设计锦囊
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
要让创意产生粘性,有效而又持久,你必须有目的性提升对用户的吸引力。如何提升?
「让创意产生粘性」
这篇文章将梳理《行为设计学中的让创意更有粘性》中的经验,思考设计背后的六大原则,目的是要帮你把创意变得更有“粘性”。
这里黏性是针对创意而言的,黏性是指你的创意与观点能让人听懂,能被人记住,并形成持久的影响,关注点在听懂—记住—影响。而我们平常谈到创意,想到的是创意的巧精妙。
那么我将用一句话,开启我的分享“万物皆可设计,创意设计也不例外。”
所谓“黏性”,是指你的创意或观点能够让人听懂,能被人记住,并形成持久的影响(换言之,他们能够改变受众的思想或行为)。
简单(simplicity):如何才能找到观念的根本核心?表达必须简短且深刻。简单=核心+精炼,找到创意的核心,并用精炼的话语将它表达出来,那么你的创意将拥有强大的影响力,举例:王老吉凉茶广告:怕上火,喝王老吉。
意外(Unexpectedness):如何才能吸引听众注意我们的想法?必须打破人们的期待,违反直觉,利用对方的惊讶来提升警觉度和关注度,激发他人的兴趣和好奇。粘性创意最忌讳的是平淡无奇,最基本的吸引力是引起别人的注意力,打破固有思维,最能抓住大家的吸引力,如海底捞各种出乎意料的个性化服务。
具体(Concreteness):如何才能把自己的观点表达清楚?必须借用身体行为和感官信息来加以阐释,因为我们的大脑总是乐于记住具体的事物。实验得出,人们更擅长于记忆具体化的词,而不是抽象的,形成一个长期的记忆力,如:香飘飘一年卖出七亿杯奶茶,连起来可绕地球两圈。
可信(Credibility):如何才能让别人相信我们的创意?必须具备相应的信用背景。我们必须设法帮助他人亲自证实这些构想,也就是观念世界中的“先试再买”的行事哲学。如现在的老爸测评,先进行专业权威的测评报告,得到消费者的信任,最后进行流量转化最后形成卖货的电商渠道。
情感(Emotions):如何才能让别人关注我们的创意?必须得让他人有所感觉。人们更有感觉的往往是人,而不是抽象的事物。很多创意都采用创意本身与情感的联系,如互联网大厂都在进行动物的 IP 设定,其实也是通过故事性的包装增加与消费者情感联系纽带。
故事(Stories):如何才能让别人依照我们的创意行动?我们可以讲故事。故事往往有鼓舞人的力量,我们并不需要创意来激发这些力量。我们只需要准备好生活中每天产生的好东西,通过故事的情节进行吸引粉丝,如快手、抖音很商家都会通过自己的故事情节进行吸引,树立自己的人设形象。
打造成功观点的六项检查表:简、奇、具、信、情、事。合起来的英文首字母为(SUCCES)。
以上是体验设计学的一些理论,我们经常会在实际商业项目中思考,如何把商业目标与设计做结合?
我们进行设计时候首先应该关注三点:
设计师针对这三点我们应该怎么提升思考?
1. 了解商业目标
询问你的产品经理或者运营,从他们那边了解产品想要达成的商业目的是什么?
2. 设计上的支持
从中思考设计该如何支持商业目的,产生商业价值。
3. 监视市场反馈
关注目标完成后的商业价值指标,理解当初的设计思考是否吻合市场的思路。
市场中有很多好的商业案例都在,如增加用户(拼多多砍一刀“简单”)、提高转化率(网易考拉会员卡片“具体”)
提高客户贡献度(iCloud 升级储存空间,多种选择“具体”)、留住用户(删除软件后哭泣的形象“情感”)
在这些营销设计中,他们是如何使用打造成功观点并且运用体验设计法则,使用原则后,我们可以通过数据化的监视市场反馈上,如转化率、点击率、UV/PV 增长,如果你所在的公司没有数据怎么办,其实我们可以做问卷、电话回复、App 评价,微博/公众号评价获得反馈。
文章来源:优设 作者:土拨鼠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前阵子回老家的时候,在老人家里看到这样一个机器,这个机器的功能主要为家庭教育、视频通话与监控等等。
如果这几个主要功能入口屏幕占比能更大些、界面中的菜单导航层级能再简化些...也不至于连我自己想找到一个能跟亲人通话的入口都比较困难,更别说老人了。
当然了,这个机器最后只被家里的老人当成,一个只会定点报时的“摆设”。
除了把字号放大,适老化设计还需要做什么?以下分享京东直播在适老化设计上的几点探索。
强化对比——看清信息
直到近几年才知道,家里的长辈喜欢发微信语音,其实是因为老花眼打字不方便。
在适老化设计中,需要注意界面中的信息与背景的对比度,是否足以让老年人清楚识别,这涉及到对色域跨度的调整。
我们通过 H(色相)S(饱和度)B(明度)的数值来划分色域。如下图,在统一H值的情况下,规定了10个标准的S、B值,从而形成一个色带。所以我们在前后景的颜色选择上,需要满足跨度至少为5 ,才能让老龄用户清晰地识别到前景信息。
比如在京东直播的老年版界面中,不仅加深了原标准版中的浅灰色文字信息,同时对一些暗文设计也进行了调整,如搜索框暗文“点击搜索主播名/商品”等内容,提升暗文明度以确保与其背景间的色域跨度大于5。
所以在适老化设计中,需要让界面中的信息与其背景间的色域跨度至少为5,才能足以让老年人看清信息。
传达共识——看懂内容
90前的人想要表示“打电话”,会用手比出6的姿势贴在耳边;而现在的00后,会用手掌当作手机的样子贴在耳边来表示…
在让老年人能够看清界面中的信息之后,我们的设计还需要有更清晰的表意信息,让他们能够看懂。其中的关键在于,这些信息是否能够“传达共识”。
无法传达共识的设计,就像00后的小孩突然摆出用手掌贴在耳边的姿势,家里的老人看了可能也无法领会到,这表示的是“打电话”的意思。
在设计中想要”传达共识”,需要尽量避免图形icon的单独出现,用纯文字或图+文的形式表达。不过除了给图标加上文字,其实我们在图标本身的设计上也可以进行适当调整。
比如同样表达“话费充值”,是用手机还是座机,哪个更能让那个年代的长辈理解?哪些事物是那个年代惯用的,哪些事物是在那之后才诞生的?哪些是我们日常生活中就存在的东西,哪些又是专属于互联网世界的产物呢?
所以在适老化设计中,除了帮界面里的所有图标加上文字以外,在图标的设计上也可以结合年代、群体环境的因素,让图形表现的是老龄年代惯用的、日常生活中固有的内容,让老年人也能轻松领会到,这表示的是什么。
联系认知——找到点击区
就算没使用过手机的人,在生活中看到凸起的事物也会忍不住按一按;但如果他们看到的是一个圆圈,就不太可能有这种反应了。
在适老化界面中,需要代入更多能够联系生活经验的认知锚点,帮助老年人顺利在界面中找到点击区域。其实不妨回想一下,即使是现在熟练使用手机的我们,也是从当时iOS4的拟物化界面,开始慢慢地培养心智,才能到如今就算看到一个线框、甚至只有纯文字,也能轻松分辨出哪里是可点击的按钮。
而当下的老人,也正像当时一开始接触智能手机的我们,需要在界面中找到与自己生活经验的对照,才能利用熟悉的事物作为认知锚点,帮助自己理解联系上一些陌生的概念。
比如将界面中可点击的区域强化投影或高光,帮助老人们联系起生活中对凹凸的认知试着去点一点。除此之外,我们还需要把一些会对点击认知产生干扰的内容进行弱化。
比如在标准版的京东直播中,存在像红包雨、奖券这种运营标签,其样式看起来与按钮很像,但实际为不可点区域,所以在老年版界面中弱化了这些标签,将他们与所在的列表内容作为一个整体背景,让视觉重心聚焦在可点击的按钮上。
所以在适老化设计中,除了需要对可点击区域强化投影以联系认知,也需要将一些不可点击的干扰项进行弱化,保证视觉重心最终落在可点击区域上。
行为指引——完成点击
美国新泽西北部一家电影院做了一个潜意识实验:在电影中每隔5秒就插入0.03秒的字幕,写着“吃爆米花”和“喝可乐”,虽然人的肉眼无法捕捉到0.03秒出现的事物但它们可以堆积成潜意识,随后当天影院的可乐销量增加15%,而爆米花则增加了58%。
在适老化设计中,我们还可以运用潜意识作为界面中的隐形向导,帮助老年人顺利完成目标行为。
比如在按钮的文案中包含行为动作、结果去向的内容,像“点击领券”中的“点击”——对当下需要完成的动作描述,“领券”——动作完成后的结果去向,让每个一眼晃过的引导效果堆积,成为界面中的隐形向导,帮助老年人了解如何完成操作。
像在京东直播的老年版界面中,也同样设计了这些隐形向导。比如在列表上加入“点击进入直播间”的按钮,引导老年人顺利了解到“我当下可以进行点击”以及“我点击后可以进入直播间”的信息。
除了对按钮文案的调整,我们还可以为一些非明确的可点击区域加上行为指引。比如在主播力荐中,每个商品图片都可点击看对应的主播讲解,因此为每个商品加上带明确行为意图的点击按钮,避免让人以为这只是一些展示图而并不知道这其实都是可以点击的。
所以在适老化设计中,可以在按钮文案中加入行为动作、结果去向的内容,同时对一些非明确的可点击区域加上行为按钮,发挥潜意识的隐形引导作用,帮助老年人顺利地完成目标行为。
以上仅展示阶段性成果,设计方式、设计理念等,我们的探索远没有结束,期待下一次分享中与你们的交流。
文章来源:站酷 作者:SDL艺术实验室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验设计就像是一场直面自我的修行,无论是从认知提升、工作能力等维度,都在时间和实践中不断去促进自我对事物的探索,在过程中不断获取对世界的感知和成就感。在学校里所接触的关于交互设计的认知,大部分局限于产品领域与基础交互,而后逐渐过渡到交互体验与设计的结合并且作用于商业,成长过程中也会不断思考,这次想聊聊设计价值,大概分为三点:价值思维、价值判断、价值体现。
我的设计能够给用户/产品产生什么价值?如何体现设计的价值?可能很多朋友也会和我一样有这样的疑惑,假如能够在接触需求后便思考该需求背后的价值,那对应的行动也会有很大差异性。
可能对于大部分的设计师而言,作为主要的执行力,需要肩负起项目的责任,所以会把大部分时间都投身在项目需求和日常沟通来提升自身能力,很少有剩余时间去沉淀已做完的设计,只有在产品体验会或者其他渠道的反馈中获取最后的问题,久而久之就像是打补丁,既无法体现设计价值,自身能力也无法得到完整的提高。然而促使设计师进步的往往不是技能的熟练,而是对业务需求思考的广度和深度。因此需要树立起价值的概念,价值可以驱使行动产生改变。
价值观因人而异,而价值观会影响一个人的行为引导其做出选择,对价值的思考取决于思维上升空间有多大。因此需要有一个思维模型能够帮助我们更好的建立起价值思维,可以帮到我们更加有逻辑的思考。相信许多朋友都听过「Why-How-What」即黄金圈法则,个人认为可以从日常需求中帮助设计师建立起一套价值思维。黄金圈解析:
△ 图片来自网上
了解黄金法则后,我们看看如何把黄金圈的思维模型运用到工作中。
假设我们接到一个「商城系统」的设计需求,可以尝试这样拆分:
WHY:我为什么做
关注点:站在产品角度,对产品真正的帮助和提升
HOW:我要怎么做:
关注点:需求做的更好,超出玩家预期
WHAT:需要做什么
关注点:让玩家使用更加高效,满足多种场景
综上所述,设计师处于不同的阶段,所关注的价值层面对应的行动也会不同,不仅要求设计师在需求之外还需要全局思维的思考延伸,了解当前产品阶段最需要的是什么,更多需要设计师自我审视,建立价值思维的思考模型,不仅仅停留在行动层的思考。
(我为什么要做)价值观——(我要怎么做)能力——(我要做什么)行动
「黄金圈」法则可以帮助我们建立起价值思维,然而每个设计师有各自的价值衡量,以下是我认为的一些价值维度:
1. 层次与目标
日常我们总会接受到大大小小的需求,简单和复杂会掺杂混合,从工作角度而言需求是都要做的,但是从设计价值的角度而言,需求是有轻重缓急之分。那如何进行价值判断呢,一般的设计需求从目标上可分为三个层次:
2. 二八法则分配
当有了一个基础划分后,就可以对需求进行合理评估,考虑到现实情况下通常会面临这些情况:
时间紧迫:日常需要大量的时间进行协作沟通和跟进
精力有限:任务重加班多,无法长时间保持高效的工作状态
所以可尝试根据二八法则对时间精力进行分配,对于一些价值较低的需求,可以和需求方充分沟通,过滤无效信息后快速处理;对于价值较高的需求,投入大量时间与精力设计与打磨。对于初中级的设计师来说,满足「可用性」和「易用性」是仍需要多加锤炼的基础能力,对于高级以上的设计师来说,有了一定的经验下达成前两者较为容易,可以把更多的时间精力投入在「愉悦感」的设计上。
前面讲了价值与判断,但设计无论是赋能或者是驱动,还是需要明确最终目标是什么,我的理解是最终服务于产品解决问题。那如何体现设计价值就显得尤为重要,以下简单抛出两点:
1. 提升体验和口碑
虽然不能直接为产品带来实际收益,但是带来体验提升,而口碑的增长相当于为长线运营打下基础,也为后续进入的产品矩阵留下增长空间,例如最近大火的《天地劫》,相信后续的出品也会让玩家更加期待。
像这类的例子有许多,例如《王者荣耀》的公众号还有专门的 UI 迭代日记,即便是运营多年的产品仍然在不断的打磨和提升体验,为产品带来正面影响。
△ 图片来自王者荣耀公众号
2. 带来商业利润,促进社交、消费增长
这类体现通常是商业化/社交相关,《阴阳师》众所周知的抽卡系统和「画符咒」的交互方式也带来了大量的社交互动和用户增长,还有《Pokémon GO》捕捉宝可梦和「投掷精灵球」,促进了玩家大量的线下的互动场景,我认为这些都是设计价值的体现。
这些设计相对于大部分玩家是一种「隐形」的存在,不像角色、场景设计等容易被感知,对于设计的价值体现一定不只是给产品锦上添花,是能够通过对用户/玩家群体的理解去塑造和满足需求。
文章来源:优设 作者:阿泽与设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
先看目录!
1.什么是流量分发
2.为什么要做流量分发
3.首页中流量分发的类型
4.流量转化模型
5.流量如何分配的
6.设计案例与流量分发
7.如何衡量流量的效果
相信大家对流量并不陌生,我们在运营的口中经常会听到这个词:流量。运营通过各种手段和策略吸引用户来接触、使用我们的产品,从而吸引到了许多的流量,流量越多机会也就越多,比如一家奶茶店门店选址要考虑的最关键因素就是人流量。
流量分发的本质其实就是用户需求分发,我们设计师的价值就在于如何让这些流量发挥出更大的价值,让流量价值和用户价值相匹配。流量就像是一片海,海水通过不同的分支流入大陆形成了江、河,如果没有这些分支,那么这些水永远无法被利用,发挥出它们的价值。流量分发我们最常见的方式有:搜索分发、算法分发、社交分发、人工分发、付费分发
举一个比较典型的例子:海底捞在进行流量转化之前,并不是单纯的在店门口给用户一排座位让用户去等待,因为这部分用户就像没有被分流的海水是死的,这时候的用户其实也有自己的目标,就是消磨时间,那么海底捞就提供了一系列服务让这部分用户活动起来,比如给零食、玩具、做指甲等等,于是这部分用户其实就相当于进入了就餐流程的分支,提前享受服务和餐厅提供的福利,除了提升用户体验以外,也消化了大部分的流量。试想一下如果一下来了许多客户,但你只有十几张椅子让用户等待,势必造成更多的损失。
流量是无序混乱的,只有到它应该去的地方,它才会有价值。产品与用户双方都需要有清晰的目标,产品提供解决方案和导流不同的场景,用户负责完成目标给业务带来价值。
流量分发最典型的就是电商产品,因为业务目标非常明确,就是实现gmv的提升,但同时其用户的需求场景也是相对来说很复杂的。那么一个好的流量分发策略,可以大大的减少用户完成目标的时间和精力,也让产品可以准确的掌握用户的需求流向。
流量不分发或者错误分发就会造成更多的消耗,什么意思呢?我们举个例子,譬如下方的模坑app首页,首页中虽然提供了搜索、分类和标签栏不同模块,但是核心的内容显示区域则只有一张预售产品的大图。我们知道用户类型非常多,这样的布局对于小白和第一次用此款产品的小白来说会十分迷茫,因为最显眼的内容中并没有他们想要获取的信息。我们不求满足所有用户,但至少需要覆盖大部分用户和核心用户,此外,这样的形式就像一个漏斗,只靠一个出口漏水,效率自然不高。
同时为了达到最大化,流量的分发并不是单向的,而是并行、串联的。比如你可以在通过搜索找到某件商品,参与活动、运营板块、商品分类、网红直播等等区域都可以发现这个商品,同理,你想要购买视频app的会员,不仅仅可以去个人中心,你还可以去详情。所以流量就像一个大网格,单纯的给漏斗戳几个洞还不够,甚至要把这些洞用很多根管子串起来。
流量分发可以帮助盘活新业务以及寻找新的价值,例如我们之前的电商产品在前期是以时间轴为核心的消化方式,商品以单品列表平铺的形式展示,在产品发展过程中形态会发生变化,单纯以这样的形态承载用户需求肯定是不够的,所以更多运营板块和推荐可以分担这部分“旧”流量。
我们在移动端的首页可以常看见的类型有:搜索、宫格型板块、信息流、banner、fab等。
搜索给有明确需求的用户提供了入口,同时在搜索这个显性场景中我们也可以细化出更多的场景给流量提供更有效的支持
例如搜索场景下除了热门搜索、搜素历史以外还可以提供不同的分类内容推荐。
逐渐走下神坛的banner,曾经可是在UI界叱咤风云,在当时由于他是首页占比一哥,很多产品在首页规划中都认为banner会承载大部分的流量,尤其是像淘宝等电商产品,banner不仅仅可以靠图片吸引用户,在做一些大促活动时候还可以变成氛围担当,和导航栏上下呼应。我们说首页是寸土寸金的,但是大家发现没有,banner的流量和他本身的价值可能不相匹配。也就是说虽然他面积很大,但是用户点击率相比于其他板块并没有什么优势,甚至还低。所以淘宝目前的首页已经看不到banner了,这个区域可以放下更多的运营区块和流量入口,当需要它的时候再配置起来就可以了。
这个板块除了业务分类的“金刚区”以外还有运营活动的配置区域,我们先来说以业务划来划分的流量入口,以这样的形式来分配流量是常规的手段,当然他也是有利弊的,有利的地方在于几乎每个业务板块雨露均沾,至少是在同一屏幕中呈现,还可以左右滑动切换更多。弊端的话就是层级深,并且用户浏览效率低不聚焦,对于那些泛浏览型的用户并不友好,因为你进入一个业务板块后发现内容自己 不感兴趣需要就需要再返回。所以这样的分流更适合深度使用产品的用户
那有没有另外一种形式可以分配流量给不同业务板块呢?当然是有的,比如tab标签,有了tab标签,泛浏览的型的用户会更喜欢,他们能更快的找到自己喜欢的内容,比如bilibili、腾讯视频的首页,这个当然也和产品目标有关,他们希望让用户看到更多的内容,让产品更扁平化。
那么你即想扁平又想让用户直观的看到业务板块分类怎么办呢,你可以这么做,就像大众点评一样上边是宫格,下面是tab标签
Fab和cta可以说是比较另类的存在了,几乎就是你想让用户去点,那你就放,所以这样的入口流量路径就比较单一,无法沉淀和升级流量,是短期目标的形态。fab的这样的悬浮入口会一直在首页显示,通常产品为了吸引用户会将其设计的比较吸引人,比如添加动效等,但是fab也会干扰用户正常浏览界面,所以一般可以用透明、伸缩的方式解决,不过伸缩要考虑用户实际操作,避免频繁的伸缩造成的更多干扰。
大部分产品对于泛浏览用户的匹配场景都是提供信息流,但是单纯的给信息流依然无法让用户深入沉淀,所以需要在信息流中穿插一些分流入口,譬如品牌、话题、活动、排行等,让用户有更深入的浏览,这样才能促成转化。
流量获取很容易,但是我们的目标并不是让用户进来逛一圈就走,所以流量的转化我把他以这样的模型展示,也就是说流量从获取到沉淀再到最后的进化过程。
获取新流量的方式很多,例如社交分发、线下活动引流等等,内部流量也可以通过打通多个板块进行流量互换。但是这些流量是表面的,不做进一步整合也就没有实际价值,所以我们需要将其沉淀下来。
流量就像过江之鲫,如果你想让这条江里有更多鱼,你首先需要有个兜来留住这些用户,为了不让这些鱼继续游走,你可以给更多丰富的食物、创造更好的环境。如何让鱼更好的在这里生存呢,要让他们熟悉你的一切,要让这些鱼在其中发展、繁衍,所以当我们用内容吸引住用户后,要让用户留下来成为深度用户,这个前提就是让用户更长时间的使用产品,如何提升产品使用时长呢?譬如通过智能算法在很多断流的板块提供偏好推荐、帮助用户预判场景、社交互动、让用户有成就感、积分体系、个人成长系统、个人品牌塑造等。
之前两步依然是在存量市场里盘流量,这是对的,从十四五国家发展规划来看,我们能看到一个关键的变化,就是从“速度”到“质量”的变化,如果你的流量已经完成沉淀,那么可以不着急找增量,而是找进化的方法。当然以下是我个人的一些思考,仅供参考。从浅层到深入,从深入到高效,从高效到创造,所以当你的流量已经比较成熟的时候,可能更多需要让这些用户再创造新的内容,他们可以利用你提供的产品创造自己的玩法,即便你不提供任何的帮助也可以形成生态,甚至还可以帮你引入增量市场。
譬如玩社群的都知道,引流简单,但是要维持社群的热度和培养超级粉丝是很难的,但是一旦你做到了,那么这些人就是帮你创造更多的价值,所以你需要一个庞大且智能的基建,还有更好的服务。
判断流量分配是否合理的标准不在于多和广,而在于核心价值与目标是否达成。譬如内容型电商(抖音、快手)和传统型电商(淘宝、京东),内容型电商的流量是依靠内容带动电商去转化,更多的是依靠内容的质量,而传统型电商依靠的是商品,那么在这两个产品中,前者的流量更多还是要流向内容而非商品。
再举个例子,在首页的板块中,我们默认流量从大到小是板块越靠上的越多,越靠下的越少是吗?也不是,板块的分配是需要结合用户需求的,比如你规划的板块视觉上很明显但是从数据上看流量很低,那么这个板块就是有问题的,或者板块不明显但流量很高,这些都不是正常表现。
所以流量分发之前就要确定好,分发的目的和希望达成的目标。是能够让新用户更快了解产品,还是让成熟用户在使用时更高效,或者大力宣传新业务等等,不是一股脑儿随大流的把蛋糕切成几块。
不知道有没有在做抖音的小伙伴,抖音的流量分发让很多人搞不明白,其实抖音属于一个强运营平台,当用户制作一个视频发布后,他的流量并不是全部来自于已经关注你的粉丝,一部分是通过判断你的视频内容和质量分发给相应标签、可能会喜欢的用户。但是快手和抖音不同,快手的社交分发策略更重,用户发布的视频,已经关注的粉丝分发到的比例会更高,这样用户的互动也会更强。
通过一些设计案例我们来看看设计在流量分发中起到的作用。
流量与曝光是有关系的,为了争取更多的曝光我们可以采用这样的方式进行设计,通常我们可以看到横向滚动结束后进入下一级界面需要点击更多,但点击的成本就高于滑动,所以在这里可以让用户直接通过滑动进入下一级界面,增加曝光。同时滑动是承接上一步手势操作,很连贯,相比点击的效率也会越高。
我们经常在用产品的时候能看到同一个界面可以从多个不同的入口进来,比如像小鹿茶app点击下单跳转到商品列表,也可以直接点击底部第二个tab切换过来。比如你可以在夜宵板块和品牌板块都能找到kfc,让一个区域的流量不仅仅从单独的方向流入,这样可以满足更多用户的场景需求。像淘宝的商品流量来自多个不同的层级
还有我们可以将更深层级的业务板块提到上一层级,提高子业务板块的点击率和曝光,譬如贝壳在下方的tab板块中除了信息流内容外还嵌入了精选、人气、热门三个分类。还有类似像德邦app这样的工具型首页其实版面利用率太低,本身产品功能不多其实不需要划分出这么多板块,让每个板块流量这么分散,可以直接在首页中加入查单号的功能,并且将寄件收件历史平铺在首页。
淘宝商品详情中会有店铺和店铺推荐内容,方便用户查看更多偏好商品,提高客单价。具有电商属性的社交产品在用户图文中可以添加商品链接、标签、话题等等。还有淘宝在首页的feed流中点击商品会进入另一个feed流,这里的商品又进行了算法权重的加持,会更加准确与多样,由于本身处于逛场景的用户,在这一步再次帮助用户进行准确选择,可以提高转化,当然了,这样中心化的分流方式对于商家而言不太友好。
衡量流量分发的效果,我们可以查看板块的点击率(UV/PV)和预期。比如在某个周期中,有100个人进入这个界面,而这个界面中的banner最终点击量为1000次,那么这个banner的点击率为1000/100=10,平均每人点击了10次。点击率越高,该入口的流量自然更大。
每个产品对于活跃的标准不同,比如一个商场衡量活跃用户数会算那些进来蹭空调的大伯大妈吗?还是衡量那些有消费行为的顾客,同理一个产品计算活跃不是单纯看每天有多少人登录浏览就算活跃的。
那么观察活跃度有什么用呢?比如我们之前做一个大促活动,每个板块都有活动,但是大促结束后,只有童装类板块的日活流量在持续下降,于是我们通过相关调研,发现是因为童装类的品类太少,用户没有逛和再次购买的兴趣。
一波流量进入后,我们不仅要看他们去了哪里,还要查看这波流量在这里做了什么,于是我们通过查看页面停留时长可以判断一些问题,比如
1. 如果用户在本该停留时长长的页面反而停留时间短可能是当前内容不感兴趣、看不懂、闪退、临时有事等等
2.反之,在本该停留时间短但是用户停留时间长,说明可能文案排版或者解释的不清楚、用户可能在思考、临时有事等等
一波流量进入后,可能进入更深级界面也可能停留原地,那么还有一部分可能就直接离开了,查看流量的流失可以帮助我们判断以下问题
1.如果用户在进行某个多步骤任务,当我们发现其在即将完成时退出了,或者在中间步骤退出了,那说明可能出现了某些问题让用户进行不下去
2.用户可能对当前流程没有预期,也可能觉得有风险也可能是对某个地方产生不满
流量就像是一群被标记过的小白鼠,从哪里来到哪里去,中间做了什么,都被我们记录了下来,那么页面访问路径也是我们查看这些流量去向的关键指标,例如cctalk在冷启动后默认打开发现页面,我们进行了一些用户的调研,发现90%以上的同学在进入后都会切换到上课这个界面,这里可以思考的是作为产品我们发现用户有这样的行为,需不需要对产品进行优化,产品这样的设计是否考虑到的是新用户和培养用户习惯让更多课程有曝光。其实这里可以做一些判断,如果用户近期有购课、上课的记录和行为,默认打开上课板块。若新用户或者长期没有上课行为的用户则默认打开发现界面。这样就可以起到更精准的分流。
8.总结
流量诚可贵,流失就白费。
今天分享就到这里,你学废了吗?
文章来源:站酷 作者:应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
越来越多的产品引入会员系统,如何做好一个会员系统,是当下设计师需要解答的一个命题。
会员的本质是建立用户分层,便于形成用户的差异化营销,通过这种差异化的营销达到以下四种目的:
提高用户留存率(增加用户粘性);
提升用户价值;
得到会费收益;
建立流量桥梁;
目的:筛选出高价值用户(高留存+消费力强),精细化运营
手段:收会员费,建立用户层之间的壁垒
结果:用户自发分层,愿意掏钱的那批人成为会员用户
原则:给会员用户提供卓越的服务,给普通用户提供好用的服务(反例:某网盘限速机制,约等于强卖会员,严重伤害普通用户的使用体验)
价格优势:会员专享低价(电商产品有会员专享价、外卖产品有会员红包)
资源优势:增值内容(影视、音乐版权)
体验优势:更好的服务(更快响应、专属客服、无广告等)
心理优势:身份认同(尊贵感标识,与普通用户形成差异。对社交、游戏尤其关键)
短期价值:通过收取会员费,提高营收
长期价值:增加用户粘性、巩固并提升市场占比
体验角度:更好的服务、专属福利
心理层面:身份认同、沉没成本(已经花了会员费,越多使用越合算,不然就亏了)
UI界面设计环节,一般的会员体系会涉及到的界面、视觉元素有:
会员触点/前置曝光
会员中心
会员身份等级
所有将用户引导至会员中心页面的入口都可以算作会员触点,触点越多,用户被引入会员中心的可能性越大。但触点也不是越多越好,过多触点会引起用户反感,将触点置于合适位置,能更自然高效地提高转化率。
2.1.1 个人中心:露出会员板块,通常是视觉强调中心。
个人中心是曝光率较高的页面,其中整合了许多重要和必要功能入口。利用个人中心页面,可以很好增加会员信息的曝光。该方式也是最常见且最通用的触点形式,不局限于产品类型。
2.1.2 内容卡点:体验完免费部分之后,会员内容收费,触点卡于两者之间。
增加用户沉没成本:用户已经在早期投入大量时间和精力阅读免费内容;
利用用户好奇心:有前文做铺垫,用户行至卡点处,对剩余内容的好奇远超过一般内容;
需求明确(制造问题):用户开会员就是为了解决剩余内容无法观看这一具体问题,用户总是倾向于解决问题而不是在原有基础上提高要求。
2.1.3 会员专区:建立专享感,将会员内容与普通内容进行区隔。
将付费内容集中在一个区块内,制造差异化,不论是内容质量或者商品价位,本质都是让用户形成会员价值很高的感觉。
2.1.4 会员频道
常见于电商产品,同样是起到区分内容,建立壁垒的作用。
2.1.5 底部提示
使用较为轻量的底部提示,引导用户关注会员信息。该视觉样式还常被用作登录提醒。
2.1.6 小banner
见缝插针式的视觉提示,占用流量最大的首页空间,此时文案的利益刺激尤其重要。
2.1.7 会员专页
使用一个底部tab的权重来承载会员相关信息,可见会员体系的重要性。
会员中心是展示会员权益,以吸引用户开通会员的页面。是用户全面了解会员相关信息的窗口,氛围营造、权益展示、行动点突出,是设计会员中心需要考虑的要点。
2.2.1 会员中心的常见页面结构
不同产品有不同的会员中心布局,有差异性也有共性。
氛围感、套餐选择(多套餐情况)、行动点、会员权益,是多数会员中心页面共有的模块,模块之间位置并不固定。
本质上越重要的模块,应该被分配越醒目的视觉表达方式。通过调整位置、面积、视觉对比度等,都可以调整不同模块之间的权重,达到产品想要呈现的优先级效果。
2.2.2 会员中心_氛围感
打造氛围感的方式多样,常见的有以下几种方式:
2.2.3 会员中心_套餐选择
部分产品不存在套餐选择,只有一种套餐,如盒马。在用户体系中,将用户分为两层,用户会员与非用户会员。部分产品在会员中又进一步分类,推出了多种会员套餐。
常见套餐以时间区分,如包月会员、季度会员、包年会员、连续包年会员等。除此之外,也有以权限范围为区分,如百度网盘的会员VIP和超级会员SVIP,超级会员享受更多特权。还有垂类会员,如视频产品中单独开辟出体育分类,对应设立专门的体育VIP卡。
上方案例中的套餐选择均以卡片的样式展示,除了该种方式,还有可以以列表形式展示。
列表形式的好处在于,套餐在垂直方向铺开,延展性强,当套餐数量改变时,不会影响展示效率,而卡片式的展示形式会造成部分套餐被挤出屏幕,用户需要左右滑动才能浏览全部,交互成本略高。同时,卡片式套餐需要点击选中套餐,再点击行动点,才能触发支付,而列表式模型,直接点击对应套餐项上的按钮即可呼出支付,交互更加简洁。
多套餐模型下,产品往往会重点突出一到两项套餐,从商业层面讲,通常希望用户选择价格更高的套餐,从体验层面讲,将附加值最高的套餐用角标突出,辅助用户决策。
2.2.4 会员中心_行动点
行动点是一个页面中最醒目的元素,往往是由按钮充当。按钮的点击数据也可以直接反映页面的设计是否合理。对于会员中心页面来说,提升关键性按钮点击,往往是改版的目标和方向。
最常见的行动点布局方式有4种:
购买按钮常驻于底部工具栏
购买按钮紧邻套餐选择模块,位于页面中部
页面同时有多个购买按钮
界面始终存在一个购买按钮
符合一般操作习惯,关键行动点常驻于页面底部,已经被普遍接受。
购买按钮紧邻套餐选择模块,从操作的角度上来说,更加合理,套餐选择完毕之后,购买按钮含义类似“确定”,两个步骤紧密相关,符合格式塔的远近亲疏原则。同时,页面中心相比于页面底部更加容易视觉聚焦,用户能更加容易注意到。这也解释了,为什么居中的对话框常用于警示,需要引起用户高度关注,而底部半弹窗往往承载不那么关键的内容,一般承载无破坏性的操作。
购买按钮意味着支付入口,头部卡片上增加支付入口,不妨通过数据观察,测试不同位置的点击效果如何。
随着页面上划,界面中第一个行动点(页面中部)被推出视图,此时底部工具栏浮出,保证页面不管在何位置,始终可见至少一个行动点,让用户随时可以进行支付。
2.2.5 会员中心_权益
会员权益是决定用户是否购买会员的重要因素。有些权益相当实在,如会员折扣、专属红包等,而有些权益的诱惑力相对较弱,不同的权益强度决定了不同的视觉呈现方式。
会员权益细节介绍
会员权益从交互上,可分为两类,可点击和不可点击。不可点击的权益往往在会员中心页面是以宫格图标的形式呈现。而可点击的权益,往往内容详实,需要更多的空间来解释和说明权益的具体内容。
从视觉形式上,也可以分为两类:
弹窗呈现
子页面呈现
除了购买会员之外,部分产品引入了“身份等级”的概念来将用户进行分层。划分的维度可以是用户的活跃度、裂变能力等,可以依此,设计一系列的会员任务。会员身份等级机制利用了用户的攀比、自我实现等心理,进一步增加用户与产品之间的粘性。
会员身份等级一般集中在4-7个之间,其中梯度理论上呈递增趋势。作为设计师,需要将低等级到高等级这种“越来越高端”的氛围烘托出来。不同类型的产品有自己的特色和局限,金融类产品在整体视觉属性上趋于稳定内敛,而娱乐性强的产品则在视觉上限制较少。
随着梯度的增加,设计难度也在增加,如何在不同等级之间拉开合适的视觉感知差距,是一个难点。如上图中的“黑金会员”和“黑金PLUS会员”在视觉上比较雷同,差异较小。当静态视觉发挥空间有限时,可以考虑加入动态元素,增加区分。
徽章系统
与会员等级的本质一样,徽章系统将用户分层,制造不同的用户群,拥有更多、更高级徽章的用户对于产品来说,自然是价值更高的用户,这类用户是产品需要重点关注的对象。他们是产品的深度体验者,他们的意见反馈相比于普通用户更加准确和反映问题。
随着产品本身的日渐成熟,越来越多的产品选择加入会员体系。会员体系无论对产品的短期或者长期利益都至关重要,从短期来讲,直接增加营收,从长期规划来讲,对于增加用户粘性、提高市场份额也有着重要意义。作为设计师,如何把用户对于会员期待的“价值感”、“尊享感”用体验的形式呈现出来,至关重要。
会员体系涉及到的相关设计细节很多,小到一个会员标签,大到一级页面,其中的设计细节更是不胜枚举。将庞大的概念不断拆解为一个个细小的可控的模块,加以分析和总结,始终是沉淀设计经验的方法之一。高大上的观念理论,需要一个个见微知著的细节支撑。
文章来源:站酷 作者:doo_W
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计尺寸一直都是设计师最热衷讨论的问题,讨论到最后结论总是一个死板的尺寸,很少有人去讲也真正明白背后的逻辑。今天的设计杂谈就带大家来了解一下,设计尺寸背后的逻辑以及设计尺寸如何去定义。希望之后在大家的交流中不要再去纠结我的设计尺寸究竟应该是多少?还是那句老话,耐心看完,你一定有所收获~
我先说结论,常见 B 端设计稿尺寸建议采用 1440×820,因为去除浏览器顶部页签以及地址栏高度 80px,因此高度上为 820px 而不是大家常见的 900px
相信很多 B 端产品设计师都是从 C 端产品中转型而来。想要搞懂设计尺寸的基本逻辑,我们先搞清楚大家熟悉 C 端产品的情况。在移动端设计尺寸上的定义,我们只需要考虑 iOS 设备与安卓设备之间分辨率的区别。而在目前,大多数移动端设计稿都是采取 iPhone 12 尺寸即:375 x 812 的分辨率
(这里就不讨论什么物理分辨率以及设计分辨率等内容)
因为移动端也会存在多个分辨率的情况,我们针对其他不同的尺寸,通常采取简单页面一稿适配多端,只针对核心页面进行多分辨率的适配。上面我们算是理解了作为移动端的分辨率的基本情况。而设计稿的尺寸是从何而来?大家想想,为什么我们在移动端设计稿的尺寸会从以前的 iPhone 8(375×667)转移到 iPhone 12(375×812)呢?
我个人认为会有以下几点:
1. 主流性
由于 iPhone 12 类的手机尺寸占比逐年增高,早期的 iPhone 8 的分辨率已经不再合适现如今手机的屏幕尺寸。因此决定分辨率尺寸的第一个因素便是这个分辨率的市场占有率。由于手机全面屏时代的到来大多数手机的屏幕比例都演化成类 16:9 的尺寸,因此参照 iOS 的生态下,我们的设计稿就会有如此的转变
2. 兼容性
作为移动端最为基准的设计尺寸,它一定要具备兼容性才能成为基准的尺寸。兼容性即能够通过该尺寸进行向上、向下的拓展,方便在一些主要页面中多尺寸的设计,比如:iPhone X 的尺寸,可以进行拓展成为 iPhone 8、iPhone 12 Pro Max 以及各类安卓端产品。减少设计稿因分辨率所带来的差异性
搞清楚了移动端的逻辑,我们再去思考一下桌面 WEB 端的情况呢?
因为 B 端产品的特殊性,在互联网中的分辨率数据只能作为一个辅助的参考(比如百度浏览研究院的数据),更多对于尺寸的定义还是来自你用户使用的设备。比如我们在一个针对销售的 CRM 系统中,销售使用的场景有两种:
首先通过用户访谈了解到大多数销售都是采取移动办公的形式,因为销售需要对不同的企业进行登门拜访,拜访完成会跟进一些销售记录。因此对于电脑分辨率会相对较小。对其分辨率的数据埋点得知,分辨率以:1440×900、1366×768 两种为主。第二种场景下,用户以 1920×1080 分辨率为主,主要是市面上的办公显示器多为 24 寸即 1920×1080然后想要去寻找作为设计稿的尺寸也与移动端一样,需要满足:主流性、兼容性两种不同特性的需求。因此在我的设计稿中,会采用 1440×900 的尺寸,因为它更容易兼容且更为主流
OK,我再举一个反例,在我之前做过的一个线下诊所系统中,通过走访我们了解到,几乎所有的医生都是配备的 24 寸显示器,分辨率也都为 1920×1080。
因此在尺寸的选择上就没有必要去一味的选择 1440 这一尺寸。
首先显示器的分辨率并不能代表我们的实际设计尺寸,就像在 iPhone 的设计稿中,会有 StatusBar 的存在,会预留上半部分空间
因为目前,大多数 B 端产品都是通过浏览器的方式进行呈现,大家也都知道电脑的浏览器中(Chrome 浏览器为主),还会存在页签高度以及当前网址、书签栏(书签栏大多数是隐藏的,因此不算进内),而想要真实了解设备中一屏的高度,就还需要对上面的分辨率尺寸进行处理:
电脑分辨率 – 页签高度 – 网址栏 – 书签栏 = 设计稿真实高度,即:1440×820 尺寸进行设计
因此想要让自己的设计稿被前端进行完整还原,就必须将浏览器页面当中的很多因素考虑进去。类似于我们去设计移动端的小程序,他也会有顶部固定的区域进行展示。
文章来源:优设 作者:CE青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com