首页

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

涛涛

在上篇我们对小鹅通后台设计的拆解结构和内容进行了简单的概述,并且把「初始设置」和「添加内容」两个部分已经拆解完,接下来我们将继续拆解「装修店铺」和「店铺推广」两个版块,这两个内容将会让我们了解到到小鹅通后台的强大和灵活性。




3. 装修店铺
店铺的装修至关重要,因为这决定了用户对我的知识店铺第一印象。所以在我把商品上架以后,我就开始来研究店铺的装修了。当我找到「店铺」,发现这个栏目包含了五个内容,分别是终端渠道、页面管理、专区管理、商品管理和基础工具。




3.1 终端渠道
小鹅通的终端支持移动端H5店铺、小程序店铺、电脑端店铺、APP和多终端。从适用设备场景来看,几乎覆盖了所有主流的学习场景。
3.1.1 移动端店铺
「移动端店铺」就是指H5网页店铺,这是最常见的终端形式,上线快、无需审核、灵活方便,成本最低。
3.1.1.1 店铺主页
「店铺主页」是指店铺的首页,这是整个店铺权重最高的页面,是用户看到店铺的第一印象。「店铺主页」的装修支持两种,第一种是按系统默认的框架进行搭建装修,第二种是自定义主页,跳转至「微页面」以后,可以建立空白页面和选择其他免费的模版(微页面接下来会详解)。




a. 店铺装修
小鹅通的「店铺装修」支持可视化的设计装修。左侧是工具区,包含基础组件(轮播图、搜索、公告等)、商品组件(知识商品、书架、直播等)、助学工具(圈子、问答、打卡等)、营销组件(优惠券、积分商城、拼团等)和在线客服等其他组件;中间是可视化的页面编辑区域,管理员可以在页面进行编辑、删除、拖动;右侧是功能属性设置区,可以对页面和组件进行细节设置,实现管理员想要的设计效果。当你编辑好以后,可以在右上角点击保存并预览,实时查看你的装修效果,非常方便。




细节侦查:
小鹅通的店铺装修功能非常强大,几乎所有常见的内容都设计成了组件,这样极大降低商家的装修成本,也提升了整个系统的设计维护效率。
3.1.1.2 个人中心
「个人中心」就是用户中心界面,运营者可以在这个栏目设置需要展示的内容,比如超级会员、我的订单、学习工具等。




3.1.1.3 店铺导航
「店铺导航」是指客户端的一级菜单,支持运营者修改菜单名称、更换图标和增加删除。




3.1.1.4 店铺风格
「营销配色」是指对商铺进行店铺主色和营销配色的设置,系统提供了多种配色方案,运营者可一键切换。美中不足的是,不支持自定义颜色色值。




3.1.2 小程序店铺
「小程序店铺」是移动端店铺的升级版,小程序相比H5,用户体验友好很多,相比APP,又不需要下载,这是一种非常受用户欢迎的客户端。但小程序需要由微信官方审核,对于很多知识付费的商家来说,往往缺少官方所要求的资质,所以很多商家是无法上架小程序的。
首次使用小程序店铺,需要对小程序进行授权或创建。小程序店铺的装修流程和移动端店铺相似。需要注意的是,小程序的发布不仅需要补充企业和法人信息,上传小程序所需要的资质,还需要微信官方审核通过后才能上线使用。




迭代建议:
从小鹅通的小程序体验来看,这是一个直接使用H5系统封装的小程序。这样的技术成本确实比较低,上线时间也比较快,但用户体验一般,没有发挥出小程序的优势。小鹅通可以参考一下有赞的小程序体验,从而真正帮助商家的用户获取开心、愉悦的用户体验。
3.1.3 电脑端店铺
电脑端店铺是指对PC端店铺的装修设计,对于有电脑端用户使用的商家来说,电脑端也非常重要。




3.1.3.1 电脑店铺
①「店铺导航」是指运营者可以对店铺的导航进行设置,包括店铺 Logo,导航栏背景以及导航栏的增删;
②「电脑端设置」包含电脑端域名设置、课程类TDK设置、微页面TDK设置等内容,小鹅通的电脑端支持绑定独立域名,这个对于商家的品牌运营非常有帮助;
③「页脚设置」是指运营者可以对底部的页脚进行内容设置,包括导航名称、版权信息等;
④「悬浮窗」就是网站的漂浮窗口,一般放在线客服、联系电话等图标,为用户提供及时的咨询服务;
⑤「个性化设置」是支持运营者设置店铺的默认语言,有中文和英文两种语言。




3.1.3.2 页面管理
「页面管理」是对店铺页面的装修管理。电脑端的店铺同样支持在线装修,左侧为常见的功能组件(包含轮播图、图文导航、知识商品、直播、富文本等),中间为可视化区域,右侧为属性设置(包含页面设置和组件设置),运营者可对组件进行细节设置,并随时可以浏览装修的效果。




迭代建议
在电脑端的装修页面,小鹅通的后台没有实现响应式设计,所以导致小屏电脑体验起来不太友好,比如需要横向拖动页面才能看清楚全部内容。我认为可以加一个操作提示,提醒用户需要使用1920*1080以上分辨率的电脑进行设计,这就遵循了尼尔森十大原则的防错原则,用户体验会更好。
3.1.3.3 店铺风格
店铺风格就是指对电脑端的店铺进行品牌色设置,一键换肤,还可以同步H5店铺的配色,保持统一性。




3.1.4 小鹅通APP
小鹅通支持APP客户端,不过从目前的页面内容来看,APP客户端仅支持对店铺、课程推送、课程缓存和课程投屏的设置,暂无像移动端店铺的个性化装修等功能。其次由于没有体验权限,我们就不过多讲解。




3.1.5 多终端引导
「多终端引导」是帮助商家引导学员去对应的学习终端,替代原来依赖人工引导的方式,这个功能可以有效提高引导的效率,解决学员总是找不到店铺入口的痛点,从而降低商家的运营成本。需要注意的是,这个功能只支持在「课程支付成功页面」和「课程详情页」开启。




3.2 页面管理
「微页面」可以理解为小鹅通店铺装修的最小单位,一个店铺可以看作是由无数个微页面构成,而一个微页面,又可以通过商家自主添加组件来设计装修。微页面的使用场景非常广泛,比如商家需要设计一个促销页、活动页,这个时候就可以使用到微页面,通过组件的搭配,就能完成自己想要的效果。




3.2.1页面管理
「页面管理」就是针对系统创建的微页面进行管理,包括新建、编辑、分享和删除等。




3.2.2 分组管理
「分组管理」就是指可以建立分组来管理微页面,比如新建一个医疗产品的分组,可以把和医疗相关的微页面都合并成组批量管理(此功能仅支持旗舰版才能体验,所以缺少配图)。
3.2.3 模板库
「模板库」是指官方为商家提供的免费设计模板,商家可以直接应用模版,在模版的基础上进行二次创作,提高工作效率(此功能仅支持旗舰版才能体验,所以缺少配图)。
3.3 专区管理
「专区」就是专题页,和微页面相比,它相对独立,比如商家可以建立某个主题的学习专区,方便用户针对性学习。小鹅通帮助文档对「专区」的使用场景官方设计了两个,一个是商家在和不同的品牌方合作时,以为品牌方设置专属的宣传专区。另一个是如果商家想为用户提供沉浸式的学习场景,那么建立一个专区就可以实现这个需求,可以有效减少其他内容对用户的干扰。从使用场景看出,专区是一个可以帮助商家加强品牌推广,提升运营效率的功能,比微页面更灵活。




3.3.1 专区详情页
①「内容设置」就是指专区的主页,这个页面可以通过建立微页面来进行设计装修;
②「品牌设置」是可以开启专区的顶部导航,还可以在页脚导航设置专区的名称、导航状态以及页脚Logo;
③「权限设置」是针对专区的访问权限做限制,比如可以指定用户、加密,以及公开访问。




3.3.2 数据统计
「数据统计」栏目,为商家提供了转化漏斗、转化趋势和转化明细三个内容,通过多维度的数据分析,为商家精细化运营提供决策依据。




迭代建议:
著名的格式塔原理里有一个接近性原则,就是指把相似的功能、产品合并分类,这样可以让界面功能清晰易懂。专区和微页面的功能其实就非常相近,完全可以和微页面合并,同时归类到页面管理分组,这样可以有效提高管理员的操作效率。毕竟面对一个功能如此繁杂的SAAS产品,用户的操作成本真的太高了。
3.4 商品管理
商品管理主要针对店铺的详情页装修和商品分组,属于比较基础的功能。
3.4.1 详情页装修
详情页是店铺权重非常高的页面,它对用户的付费转化起到了很大的作用。




3.4.1.1 新建模版
①点击新建模版,就进入了详情页装修的界面。左侧为可视化区域,右侧为功能设置。从左侧TAB可以看出,支持对图文、专栏、训练营Pro和实物商品四个详情页的设置;右侧为详情页的信息设置,包含基础信息、详情页装修和高级设置三个内容。
②在「详情页装修」,可以开启销售弹幕(制造促销氛围)、店铺信息,还可以设置付费商品按钮文案等;
③在「高级设置」,可以设置销量达到某个数量才进行展示,对于新店铺或新商家非常利好;
④「自定义菜单」则为运营者提供手动设置详情页TAB菜单的功能,比如目录、课堂互动、评论都可以选择开启或关闭。




设计思考:
从小鹅通的店铺详情页装修来看,这个系统的所有页面就像一个积木一样,全部由组件组装。比如详情页的销售弹幕,店铺信息、购买文案,再到详情页的TAB菜单,目录、课堂互动和评论等,这些内容都是一个独立的组件,支持商家随时开启和关闭,非常方便。
3.4.1.2 关联商品
「详情页模版」建立成功以后,返回到列表页,这个时候需要对详情页关联商品,详情页才能投入使用。
3.4.2 商品分组
「商品分组」就是可以建立不同的分组,对商品进行归类、实现高效地的管理,也方便用户在前端更便捷地找到所需商品。在商品分组的排序页面里,有一个非常友好小功能,那就是在对商品排序的时候,只需要输入数值,就能实现商品排序,非常不错的操作体验。




3.5 基础工具
3.5.1 素材中心
「素材中心」就是系统会把运营者在店铺日常运营上传的图片、音频、视频等资料都储存在云端,这样可以实现对文件资源统一、高效的管理。这个功能或许不起眼,但是在运营者运营的过程中非常方便,可以提高工作效率。




3.5.2 图片设计
小鹅通接入了「创可贴」图片在线设计工具,支持用户在小鹅通后台就能在线设计图片,非常方便。创可贴这个在线设计工具功能非常强大,不仅有大量优质的设计模版,还有各种素材、文字、背景和工具,这极大降低了运营者在店铺运营中的设计制作成本,帮助运营者可以更高效地降低运营成本。




3.5.3 版权保护
3.5.3.1 内容保护
①「防录屏跑马灯」就是为了防止用户悄悄录制课程,商家在开启跑马灯以后,屏幕就会以跑马灯的形式把用户的账户名和ID展示出来,这样可以有效降低课程偷录的损失。管理员可以对跑马灯的颜色、字体大小、透明度进行设置,还可以开启版权声明。
②除了防录屏跑马灯,小鹅通还支持开启水印保护、文字防复制、终端限制和域名限制,可以看出在内容保护这块,小鹅通几乎把商家需要的功能都设计了,极大降低了商家内容被侵权的风险。




3.5.3.2 投诉指引
「投诉指引」是小鹅通为做商家整理的各大平台投诉指南,包括小鹅通生态、微信公众号、B站、抖音、知乎等各大媒体平台,目的是打造一个良性、健康的平台秩序。




设计思考
从这三个基础工具的设计可以看出,一款Saas产品的成功,一定是把商家运营的所有环节和场景都考虑进去。比如小鹅通链接了创可贴在线图片设计工具以后,不仅可以极大降低商家的店铺运营的门槛,还能省去很多人力成本。其次在对商家版权的内容保护上,小鹅通可谓花尽了心思,防录屏、水印、防复制还有终端和域名限制,这些功能都能为商家的原创内容保驾护航,从而打造一个健康的知识生态环境。
3.6 体验小结
在体验完小鹅通的店铺装修版块以后,我对SaaS产品的设计肃然起敬。为了实现产品的标准化,几乎把整个产品的页面、功能都全部组件化了,最终设计开发了一个可视化、智能化、傻瓜式的在线装修功能。这样的设计不仅让整个产品极度标准化,维护成本低,更重要的是,节省了商家的装修成本和时间,让他们更快速地上手。
其次从其他功能的设计也可以看出,一款Saas产品的成功,一定是把商家运营的所有环节和场景都考虑进去。比如小鹅通链接了创可贴在线图片设计工具以后,不仅可以极大降低商家的店铺运营的门槛,还能省去很多人力成本。甚至在对商家版权的内容保护上,小鹅通可谓花尽了心思,防录屏、水印、防复制还有终端和域名限制,这些功能都能为商家的原创内容保驾护航,从而打造一个健康的知识生态环境。
4. 店铺推广
当我把店铺装修好以后,基础工作就准备就绪了,接下来,我需要的就是开始推广和运营我的知识店铺,让我的粉丝们开始来到店铺学习。
4.1 直播
直播是现在最流行、最重要的传播方式,对于一个运营者来说,直播运营太重要了,它是一个引流、激活、留存和变现的重要手段。




4.1.1 通用设置
在建立「直播」之前,我们来先看看「通用设置」,这样可利于快速上手「直播」功能。「通用设置」包含「全局设置」和「默认设置」两个部分。
①在「全局设置」,管理员可以开启超低延时设置(降低直播延迟时间)、消息气泡(用户进入后界面有提示)、全屏互动、隐私保护等功能,还可以设置严禁词(可设定直播评论区的严禁词)、水印、打赏金额等。
②在「默认设置」,管理员可以开启观看人次(直播观看人数)、在线人数、防录屏跑马灯(打开后可有效防止录屏)、评论审核、直播热度、点赞、打赏、回放设置(可设置直播是否开启回放和视频播放倍速等)等功能。




4.1.2 新建直播
小鹅通的「新建直播」包含基本信息、商品信息和上架设置三个部分。
①小鹅通的直播分为视频直播、录播直播和语音直播三种类型,其次还支持横屏直播(适用于企业/PPT宣讲等场景)和竖屏直播(适用于泛娱乐化教学、带货等场景),类型可谓非常丰富。接下来,运营者需要设置直播基础信息,比如直播标题、开始时间、封面图,还可以设置直播暖场图、宣传封面、详情页介绍等。
③「商品信息」和「上架信息」就像「内容」版块的视频、音频产品一样,可以对直播设置免费、付费、加密和指定学员专享,这个版块可以理解为小鹅通商品新建的一个通用模块,后面我们不再赘述。
④小鹅通的直播还支持批量创建,「批量直播」的流程相比单个直播流程操作路径更短,选择好设备类型以后,就可以进入批量直播的流程,系统支持批量命名、上传封面图以及功能设置,非常方便。




4.1.3 直播管理
当你建立一场直播以后,在「直播管理」就可以开始管理你的直播。「直播管理」的功能非常强大,为商家提供了直播详情、直播数据、讲师设置和APP推送等功能。




4.1.3.1 开播设置
「开播设置」包含了三种形式,邀请老师开播、自己开播和第三方推流到直播间。
①「邀请老师开播」就是指直播建立后,可以直接向老师发送开播邀请,「开播信息链接」也是从这里复制;
②「自己开播」这个功能,需要根据不同的场景来使用。比如老师是通过电脑直播,还需要下载小鹅通的PC端直播软件,才能进行直播。如果是移动端,则需要使用鹅直播小程序或APP使用;
③「第三方推流到直播间」是指商家在其他平台直播时,可以将直播画面推流到小鹅通直播间,小鹅通直播间将同步展示直播画面。第三方包含像OBS直播、快手直播和芯象直播助手等软件,小鹅通官方也给出了完整的下载和使用指导。这个功能对商家来说,可以将第三方直播推流到店铺,既能实现外部引流,也能为学员提供更丰富的内容。




4.1.3.2 直播间设置
「直播间设置」包含课程设置、互动设置、防盗设置、评论设置和直播间装修四块内容。
①「课程设置」主要指添加讲师和助教,可以通过手机和微信两种形式邀请;
②「互动设置」是指商家可以设置老师和学员在直播间的互动交流,比如直播带货配置(可添加指定商品实现用户在直播间购买)、优惠券配置(可赠送店铺优惠券)、打赏开关(用户可对直播打赏)、签到开关(老师可查看已签到学员)、抽奖开关(老师可进行设置抽奖,提升直播间氛围和用户活跃度)、邀请达人榜开关(直播间显示邀请达人榜,给与上榜的用户奖励,吸引用户分享)等功能。
③「防盗设置」打开后,可以开启防录屏跑马灯,降低直播被偷录风险;「评论设置」可以开启评论审核,对用户发表的评论也可以选择隐藏;「直播间装修」主要是指商家可以上传背景图填补讲师在使用连麦或课件时的画面留白。




4.1.3.3 运营设置
「运营设置」包含私域引流、下一场直播预告、圈子引流、招募推广员设置、信息刺激、CRM分配、通知设置和直播间信息设置8块内容。
①「圈子引流」是指在直播中展示圈子的入口,通过领资料、看回放等形式把用户引流到圈子,持续用内容活跃用户;
②「招募推广员设置」是可以运营者可以在直播间招募推广员,帮助商家进行分销推广,这个功能我们会在下面详细讲解;
③「通知设置」可以设置开课提醒,包括短信预约通知、服务号预约通知等,提升用户触达率;
④「直播间信息设置」可以设置直播间的公告、观看人次、在线人数和直播热度。




4.1.3.4 回放设置
「回放设置」是指运营者可以开启直播的回放权限,还可以设置回放的有效期,以及倍速播放。




4.1.3.5 转播设置
「转播设置」是指可同时转播到第三方平台,比如视频号、快手等,还可以转播给小鹅通其他店铺,比如你的直播内容质量非常优秀,可以转播至其他小鹅通商家,从而为你分享传播。




4.1.3.6 拉流设置
「拉流」就像采集,商家可以把其他第三方优秀的直播内容拉流到自己的店铺。「拉流直播」还支持批量创建、无需监管的特点,通过拉流,可以丰富店铺内容,快速扩大店铺影响力,提高用户活跃度。




4.1.3.7 直播间用户
「直播间用户」是指对当场观看直播的用户进行的数据统计,比如直播间停留时长、累计观看时长、直播观看时长等,还支持商家对用户贴标签和发送店铺私信,实现下一步的激活转化。




4.1.3.8 数据分析
「数据分析」是指对当场直播进行全面的数据分析,主要包含直播数据和交易数据两个部分。
①「直播数据」包含流量观看、直播互动和直播带货三个内容。在这个版块,可以看到直播全时段的数据,比如直播间访客数、回放观看人数、在线人数趋势图、打赏金额,以及带货商品点击次数、成交人数、总成交金额等数据。
②「交易数据」主要是指付费直播销售情况的数据分析,包含售前访客数、访问量以及最终支付人数、支付转化率,还有访问-成交数数据趋势图等。




4.1.4 体验小结
从「直播」这个版块可以看出,一个我们平常没有太过在意的直播界面,其实在系统的后台设计了如此多功能。从「开播形式」的三个场景选择到「直播回放」是否允许用户设置倍数,从「直播间设置」开启用户打赏到「圈子引流」设置资料包吸引用户加入圈子,最后再到一场直播结束后全面、专业、多维度的数据分析,小鹅通的直播功能真的做得太完善了。如果不亲自体验,我根本没法想到一个直播需要考虑设计这么多功能,拉流、转播、招募推广员,这简直把用户需要的功能需求都提前设计和规划好了,对一个运营者来说,对店铺和用户的运营效率提升太有帮助了。
4.2 营销
「直播」功能熟悉以后,接下来我要开始熟悉营销工具了,这些是店铺运营的必备武器。小鹅通的营销工具分为分销推广、拉新引流、付费转化和促进复购四大类,对一个新手商家来说,可以根据自己的需求去寻找对应的工具。
4.2.1 分销推广
「分销」是一个知识店铺推广的重要功能,商家不仅可以链接各种渠道和代理商,还可以让利给用户刺激传播拉新,实现裂变增长。小鹅通的「分销推广」不仅有面向代理机构的「订货商」,还有针对个人分销的「推广员」,满足了分销场景的各种需求。
4.2.1.1 推广员
「推广员」主要针对个体用户,比如店铺的学员、粉丝、店铺员工等,可以理解为C端用户分销。商家在开通「推广员」以后,可以实现人人分销的功能,推广员只要分享商品的链接、海报图等,只要有新用户下单购买,都可以获得收益。




4.2.1.1.1 推广员管理
「推广员管理」是为商家提供对店铺推广员的个人信息、审核申请管理,比如推广员的申请审核、资料编辑、推广员招募等。




a. 推广员详情页
从这个页面可以查询到一个推广员的详细信息,包括个人信息、客户列表、邀请推广员列表、推广员成交数量。




b. 招募规则
①「招募规则」是针对推广员招募的规则进行设置。推广员招募分为两种模式,分别是筛选优质推广员和人人推广模式,前者需要设置门槛,后者不需要任何门槛。
②当运营者选择「筛选优质推广员」模式以后,需要对推广员的加入条件进行设置,比如加入条件、申请信息、招募审核等。




c. 推广商品/工具
①「推广商品/工具」包含推广商品、推广优惠券、推广邀请码和推广微页面四个内容。
②「推广商品」是指运营者可以添加指定商品进行推广,并可以设置独立的商品佣金的分配比例,非常灵活。
③「推广优惠券」是指运营者可以为推广员建立独立的优惠券,帮助推广员更高效进行商品推广,提升业绩;「推广邀请码」和「推广优惠券」功能相似,我们不再赘述。
④「推广微页面」是指设置推广员招募的页面,通过建立一个专属的微页面,可以实现推广页的定制化设计。




d. 分佣结算设置
「分佣结算设置」是对推广员奖励发放方式的设置,系统支持交易完成后立即发放、交易完成后XX天再进行发放,还可以设置推广员自购分佣,刺激推广员消费。




e. 等级设置
「等级设置」是指运营者对推广员等级规则的设置,包括推广员的商品佣金比例、邀请人奖励比例等。




4.2.1.1.2 客户关系
①「客户关系」包含客户查询、客户绑定设置和客户跟进设置三个内容。
②「客户查询」为商家提供客户信息的统计查询,比如客户手机号、绑定推广员、消费记录等。
③「客户绑定设置」为商家提供客户绑定有效期和抢客设置,这个功能可以刺激推广员不断拓客,也可以有效保护初始推广员的权益,避免客户被其他推广员抢走;
④「客户跟进设置」是一个非常强大的功能,通过和企微CRM的链接,可以实现推广员绑定的客户自动分配给CRM销售跟进,从商机线索到激活付费,形成了销售闭环。




4.2.1.1.3 推广业绩
「推广业绩」提供查看所有分销推广员的推广记录和业绩统计,从而获取精准的数据分析,支撑运营决策。




4.2.1.1.4 推广员端
①「推广员端」是指推广员在前端使用的客户端,包含了推广中心、推广海报、推广通知和商品展示四个部分。
②「推广中心」为商家提供推广员名称设置、通知公告和引导加群功能。其中「引导加群」是为商家把推广员引流至自己的私域社群,方便统一管理。
③「推广海报」提供了推广店铺海报和邀请推广员海报两个功能,不仅支持客户设计海报自定义上传,系统也提供了精美的海报模版,赋能商家跟高效的推广拉新。
④「推广通知」是为推广员提供微信端的通知设置,推广员绑定后,可第一时间接收消息通知,比如审核结果、订单消费等。
⑤「商品展示」可以把推广佣金展示在详情页页面,通过高频曝光有效刺激用户传播分享,也可以根据推广员招募规则申请。




4.2.1.2 订货商
和「推广员」相比,「订货商」面向的人群是一些具有销售团队的企业机构、代理商等,可以称为B端渠道分销。代理商通过向商家批量进货,然后分配给自己的员工进行向终端客户销售,最后由商家进行商品交付,代理商自主管理员工、独立结算员工业绩。




a. 订货商管理
「订货商管理」包含「订货商列表」和「审核列表」,主要为商家提供对订货商用户的资料查询、管理和审核。




b. 商品管理
「商品管理」是为商家提供订货商在前端批发商品的管理,商家在后台添加店铺的商品后,订货商在前端就能进行推广。




c. 客户管理
「客户管理」是为商家提供对订货商销售成交客户的信息管理,通过这个功能可以查看客户的详细信息、所属的订货商、关系状态等。




d. 业绩管理
①「业绩管理」包含「业绩订单」和「提现记录」两个内容。
②「业绩订单」是为商家提供对订货商推广产生的订单管理,运营者可查看订单的详细信息,包括订单号、下单时间、实付金额等。
③「提现记录」是为商家提供对订货商提现申请的记录管理,当订货商在前端发起提现申请以后,运营者可以从这个栏目查看提现申请,确认提现申请后,需运营者对订货商手动打款,打款成功后可标记已打款。




e. 设置
①「设置」包含规则设置、招募页和海报定自定义三个内容。
②「规则设置」主要帮助商家对订货商的招募、绑定和等级规则进行设置。在「招募规则」,运营者可设置订货商加入的方式,支持自主加入(加入后无推荐人)和推荐加入(加入后有推荐人),还可以开启订货商资料申请,申请资料运营者可自由配置;在「绑定规则」,可设置订货商和商家绑定的有效期,超出有效期后,订货商绑定的客户下单,收益将自动划入店铺,不计入订货商收益;在「等级规则」,可以对订货商的等级名称、规则和权益进行设置,打造完善健全的分销体系。
③「招募页」主要提供订货商招募详情页的设计和编辑,「海报自定义」可以对招募海报进行自定义配置,提升招募效率。




4.2.1.3 裂变海报
「裂变海报」是一个为商家提供接力式裂变传播的营销功能,通过精美的海报设计和丰厚的佣金奖励,吸引用户为商家分享推广,促进销量提升同时可快速吸粉引流。
4.2.1.3.1 新建流程
①在「商品信息」,需要添加分享裂变的商品,参与裂变海报的课程将不产生推广员佣金。
②在「活动设置」,系统不仅支持自定义背景图,还为运营者提供了多张精美的海报宣传图;对用户奖励的设置,不仅可以自由设置奖励比例,还可以设置「交易完成后发放」和「交易完成XX天后发放」两种形式。




细节侦查
小鹅通的分销功能适用于所有行业和产品,在我过去的工作中就遇见了无数客户想通过分销进行裂变,而小鹅通的分销功能的设计,不管是前端还是后台的业务设计流程,都值得大家深度体验学习,以此作为一个标准的流程设计参考。
4.2.2 拉新引流
「拉新引流」可以帮助商家拓展新用户,小鹅通为商家设计了三个功能,分别是邀请码、涨粉神器和请好友看。
4.2.2.1 邀请码
「邀请码」是一款能够实现赠送给他人,邀请对方免费学习讲师的付费内容商品的功能。当商家推出一门新课程的时候,就可以设置邀请码邀请学员体验,「邀请码」既可以作为福利权益,也可以作为引流的手段。




①「邀请码」的创建非常简单,需要注意的是,邀请码需要设置数量、有效时间和指定使用商品,其次也可以开启「信息采集」功能,帮助运营者采集用户的信息,提升促进转化。
②「邀请码」成功建立以后,可进行群发,也可以复制链接分享给指定的学员,还可以对邀请码作废以及查看使用记录。
4.2.2.2 涨粉神器
「涨粉神器」是一款为商家公众号涨粉的营销工具,商家通过赠送课程的形式吸引用户为公众号传播拉新,当新关注用户达到商家指定要求以后,用户可以免费获得课程。「涨粉神器」仅支持专业版、旗舰版使用,免费试用版不支持,从官方帮助文档看,「涨粉神器」的操作流程主要是通过配置专属海报,吸引学员下载分享,最终完成公众号涨粉目标。




体验陷阱
为了体验这个功能,我尝试授权公众号进行绑定,但系统显示我的公众号已经授权绑定过,需要解绑后重新配置。但根据官网帮助文档解决方案始终找不到「重新授权」和「解除授权」的入口,让我白白花了很多时间。
4.2.2.3 请好友看
「请好友看」是一款支持学员购买专栏/会员课程后,分享课程内某一期的课程内容给好友体验的功能,主要帮助商家促进课程的传播和推广,让更多的学员了解和体验课程。比如当学员购买了商家的付费专栏,觉得内容不错,这个时候如果商家设置了「请好友看」,学员就可以一键分享给好友,邀请好友领取免费阅读名额,最终帮助商家拉新增购。




①「请好友看」支持设置课程分享数量、课程领取人数和单个用户领取上限,为运营者根据专栏课程内容提供更精细的运营方式。
②「邀请好友」只支持专栏或会员栏目,这个功能的本质其实是免费试看,所以不适用单个商品课程。
4.2.3 付费转化
「付费转化」主要帮助商家增加营销手段,激活用户消费,提升付费转化率。小鹅通设计了七个功能,其中优惠券和拼团的功能非常完善,可以满足商家各种不同场景的营销需求。
4.2.3.1 优惠券
「优惠券」是一款通过商家让利,从而让用户在购买课程时享受优惠的营销工具,有效帮助商家刺激用户购买,提升付费转化率。比如刺激新用户首次转化赠送新人优惠券,吸引用户购买店铺高价课程赠送优惠券等。
4.2.3.1.1 优惠券类型
小鹅通设计了「通用优惠券」、「专属优惠券」和「员工优惠券」三种类型。「通用优惠券」是面向所有用户,所有人都可以领取,无门槛限制;「专属优惠券」是为特定用户群体设置的优惠券,比如大学生、新注册用户等;「员工优惠券」是结合企微能力赋能员工一键发券,可防止社群发券转发泄漏,不过目前系统显示正在开发。




4.2.3.1.2 新建优惠券
以「通用优惠券」创建流程为例,优惠券的创建包含三个部分,分别是基本信息、领用规则和个性设置。
①在「基本信息」,可以选择优惠券的类型(支持满减优惠和折扣优惠两种类型,还可以设置领取门槛,比如消费满多少元才能使用),还可以设置叠加使用(和其他优惠券一起叠加使用)、发行量(优惠券数量)、适用商品(可以支持全部商品、指定某类商品和不可用商品)和使用时间(可以设置用户领取后失效时间,进一步提升转化率)。
②在「领用规则」,可以设置用户领取次数的限制(可限制每人限领多少张)、开启信息采集(自动读取领取优惠券用户信息)、分享设置和添加使用说明等。
③在「个性设置」,运营者甚至可以设置优惠券剩余的数量,刺激吸引学员领取消费。




4.2.3.1.3 优惠券管理
在「优惠券」创建以后,系统为商家提供了定向发放、查看数据统计、编辑、停止和推广等功能。
①「定向发放」提供多维度条件筛选特定用户,并在用户进入店铺时自动发放优惠券,有效提高店铺的付费转化与复购率,发放对象支持付费用户(可设置指定消费某个商品,精准到极致)、用户群体和指定用户。
②「数据统计」提供优惠券使用的精准数据统计,包括用券总成交额、优惠总金额、费效比(优惠总金额/用券总成交额)、客单价、领券总用户数等数据,帮助运营者可以及时调整运营方案,获取更好的运营效果。




细节侦查
优惠券是一个特别常见的功能,和「直播」一样,用户在前端领取流程非常简单,领取就能消费。但在拆解完「优惠券」的后台,你会发现一个小小的优惠券包含了非常多的功能点。小鹅通不仅设计了多种类型满足多种营销场景,还设计了定向发放、数据统计等功能,帮助商家提升运营效率。
4.2.3.2 优惠码
「优惠码」是一种是基于优惠券的玩法拓展,以二维码的形式作为展示形式,支持在支付结算环节场景进行兑换,它具有优惠券的属性,天然支持转赠,易于传播,具有拉新作用,是灵活性更强的付费转化工具。它主要用于跨界/跨平台引流,把线下或其他平台的客户引导到店铺内使用优惠码完成付费转化,比如商家在抖音可以设置抖音专属优惠码,用户领取消费后,商家可以在后台查询不同渠道的用户使用优惠码消费记录,从而获取更精细化的运营策略。




①「优惠码」的创建支持专属码和通用码两种类型,专属码就是一个码只用一次,通用码可以多次使用;其次还可以设置用户使用次数,分享权限等。
②「优惠码」生成后,通过「效果数据」可以查看优惠码的详细数据,包括总成交额、总优惠额、领取人数等,还可以增加库存、查看优惠码的使用记录和用码商品,为商家提供精准的运营分析。


4.2.3.3 有价优惠券
「有价优惠券」是把优惠券当作一个商品来进行销售,这样可以以预售的形式促进店铺转化。比如商家在双十一店铺大促之前就创建「有价优惠券」,用户可以提前购买,从而实现为活动宣传预热,提升付费转化率。




4.2.3.4 拼团
拼团分为三种,普通拼团,邀新拼团和阶梯拼团。「普通拼团」是指用户下单开团以后,可以邀请好友拼团购买;「邀新拼团」是指开团后,用户必须邀请新用户才能参团购买,这个主要用于新用户拓展的场景;「阶梯拼团」则是随着拼团人数越多,价格越低,用低价刺激用户高效裂变。




4.2.3.4.1 新建拼团
拼团的创建包含两个部分,分别是基础设置和更多设置。
①在「基础设置」,可以设置拼团的参团人数,成团的时限(比如设置1日,用户开团后,就需要在1日内成团,否则拼团失败)。
②在「更多设置」,可以开启购买弹幕(增加促销氛围)、在线凑团(优先显示未成团的团,提升成团率)、团长价(开团的团长有优惠)、活动预热等功能。其中「模拟成团」可满足商家某个拼团购买人数不够,系统可自动以“匿名”买家凑单的场景,「超员成团」可满足当拼团人数超过限定人数也同时可以购买的场景,功能非常灵活丰富。




4.2.3.4.2 拼团管理
拼团开启后,商家可以对拼团进行编辑、推广、复制和查看数据统计。在拼团详情页面,可查看拼团的访客数、付费用户数、支付订单数、成交金额和拼团明细,为商家提供更多数字化的管理,提升运营效率。




4.2.3.5 秒杀
「秒杀」是一个为商家提供对某款商品限时秒杀价出售的营销工具,作为一个常见的促销功能,小鹅通的「秒杀」支持开启活动预热功能,可以提前吸引用户关注活动。其次还支持秒杀预约,用户只要关注商家公众号,就能收到活动秒杀的提醒,非常方便。




4.2.3.6 限时折扣
「限时折扣」是一个为商家在某段时间内以指定折扣购买商品的营销工具,小鹅通的「限时折扣」支持添加多个商品,可进行批量设置折扣以及减价,非常方便。




4.2.3.7 满包邮
「满包邮」是一个针对实物商品购买赠送包邮服务的工具,操作流程比较简单,选定好指定实物商品以后就可以添加使用。




4.2.4 促进复购
为了提升用户的复购率,小鹅通为商家设计了四个小工具,分别是兑换码、商品推荐、弹窗广告和支付有礼。
4.2.4.1 兑换码
「兑换码」是一个常见的营销功能,是由一串数字或字母组合,在用户领取兑换码以后,可以在店铺兑换指定的商品和优惠券。和「优惠码」相似,商家可以在多个场景中以福利形式向用户赠送和售卖,最终为店铺引流。




①「兑换码」的创建流程很简单,在「基础信息」设定库存(兑换码数量),选择活动时间(可设置某个时间段或长期有效),设置每个用户领取的数量,接下来设置用户可兑换的商品和优惠券就完成,其次还支持开启用户信息采集功能(开启后可以搜集领取兑换码用户的数据信息),为商家提供更多销售线索。
②兑换码创建以后,通过「码库」可以查看每一个兑换码的使用情况,包括兑换时间、兑换人、作废和添加库存。




4.2.4.2 商品推荐
「商品推荐」是一个可以帮助商家提升指定商品曝光率的工具,当商家添加推荐商品以后,该商品将会出现在前端商品详情页的「相关推荐」分类,从而增加商品访问量和提升转化率。




4.2.4.3 弹窗广告
「弹窗广告」是一个可以帮助商家添加自定义弹窗广告的工具。它的操作流程很简单,但功能很丰富。在用户点击「新建弹窗广告」以后,可以上传弹窗图的广告样式,选择需要跳转的页面(可跳转指定商品、商品分组、微页面和助学工具),还可以选择投放的页面(包含首页以及其他栏目页和微页面),甚至可以选择需要投放的人群(比如新手用户组、VIP会员用户组等),还可以设置广告出现的频次(支持首次访问出现和每隔多少天出现1次)。当弹窗广告建立后,商家还可以查看弹窗广告的曝光次数、打开次数和打开率,获取非常精准的数据统计,优化广告运营方案。




4.2.4.4 支付有礼
「支付有礼」是一个商家在用户购买商品以后赠送优惠权益的营销工具,它可以有效提升用户的复购率,比如商家设定了购买商品后赠送兑换码或优惠券,用户在指定的时间内消费就能获取优惠。
「支付有礼」的创建流程和其他促销工具相似,商家可以选择适用人群(指定某个用户群体享有)、消费方式(指定消费某个商品或某一类商品),最后选择赠送的权益,包含优惠券、优惠码和兑换码,即可创建成功。




4.2.5 体验小结
如果用两个词描述小鹅通的营销工具的特点,我觉得这两个词分别是——极致和丝滑。
「极致」是指小鹅通对营销工具的不断创新,比如优惠券和拼团。首先把「优惠券」拆分为三种类型,满足不同用户的需求,其次还设计了「优惠码」和「有价优惠券」,为商家考虑了更丰富的跨平台和促销预售场景。「拼团」也是如此,不仅提供常见的拼团模式,还设计了「邀新拼团」和「阶梯拼团」,对于商家来说,营销手段越丰富,就越能提升用户的激活率和复购率。
「丝滑」是指这些营销工具的灵活性。比如像「弹窗广告」这样的功能,不仅可以上传你设计好的广告图片,跳转你指定的商品或页面,还可以选择可以投放的人群、弹窗广告出现的频次,这样傻瓜式的操作设置,对商家来说,实在太方便了。相比定制化的系统开发,极大节省了大量的人力成本,让商家享受一个优秀后台系统的便捷和愉悦体验。


感谢阅读,小鹅通的产品拆解第二部分就到这里,下一篇我们将会继续拆解小鹅通后台!



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

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


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


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

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

鹤鹤

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

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

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

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

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


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

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


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


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

阿里设计周-智能感知交互

鹤鹤

智能感知交互

注:阅读此文章大约需要30分钟



先给大家看两个案例:大家都很熟悉的,自动感应测温,不需要人为操控



第二个案例则是nest智能恒温器,比起传统的需要人为的去手动触发调节温度,他能够实时感知家里的温度,基于不同的场景与客户习惯去调节温度,比起传统模式便捷了不少



那么从这两个案例中,大家可以发现,传统人机交互与下一代人机交互是有着本质区别的,传统人机交互一直以来都是输入输出的被动交互逻辑,什么是被动交互呢,就是必须有用户向机器发送指令,机器接收指令,执行后将结果反馈给用户。而新的交互模式,则是用户不需要做任何指令输入,机器自动感知当前的场景,来理解你的意图是什么,来去主动帮你完成任务。那么这是如何实现的呢,主要是依靠传感器,算法等实现的。这也说明了我们的生活开始下一代人机交互的新时代。

这也就是今天的主题,那么今天,我会详细讲解,把这个课题讲透。包括什么是智能感知交互,他的底层框架模型是怎样的,以及结合案例是讲解他是如何落地使用的,

01 智能感知交互背景及定义



回顾整个人机交互的发展史,经过了不同的阶段,从命令行界面,也就是通过手柄,遥控等进行交互,再然后是图形用户界面,也就是触摸屏等交互,再到语音交互,图像识别等等



人们对于人机交互也从依赖于人去手动触发,再到趋于自然和本能,随着技术的发展,我们也迎来的技能感知交互的新时代



在这里也对智能感知交互做了初步定义:是以人为中心,基于传感器、大数据及AI技术,自动感知用户情景,理解用户意图,主动响应用户需求,真正提升人机交互效率



那么智能感知交互也有几个特征,更加的趋于自然,输入输出方式更加无感知,智能

02 智能感知交互模型

接下来是最核心的重点,智能感知交互的框架是怎么样的,他的底层逻辑是怎样运行的,这也是整套理论知识的基石和核心。



智能感知交互模型主要分为三层:

① 感知层,也就是对当前用户的情景,进行一个全方位的识别;

② 决策层,也就是我感知后,怎么去做决策,就像人的大脑一样;

③ 表达层,也就是具体的交互执行,例如界面,音效,光效等等。



那么以刚开头的无接触测温门为例,在感知层主要通过红外传感器去感知人的体温,在决策层则是当遇到发烧的顾客则需要进行干预,在表达层,则会通过音效、光效做出主动的预警的设计表达。



那么我们接下来详细的看下整个框架模型,那么,感知层又细分为三大模块:

第一块为【用户感知】,第二块为【场景感知】,第三块为【行为感知】。 那我这里给他串联起来,简单来说就是感知用户是谁,在什么杨的场景下,做了什么样的行为。那么决策层则细分为两大块,也就是无感知之后怎么做决策,理解用户的意图是什么,。那么第二则是做出决策后怎么去做设计表达和输出呢,受到那些变量因素的影响,这是由设计表达影响因子模型决定的。那么最后一层则是正式做出设计表达,目前表达的介质主要有界面、声音、光效、触觉、动作等。那么这张图是一个大框架,接下来我会详细的剖析每一层



先讲第一层,感知层,就是感知技术,这里在进一步细分为三个板块,用户感知,场景感知,行为感知,用户感知为,用户性别、地域、年龄等等特征,场景感知则是什么时间、什么地点,当前环境、温度等等,行为感知则是去感知,你用了什么工具,对什么对象,做了什么操作行为等等。针对不同的业务会有不同的针对感知,例如开头案例中的体温测量,他对温度这一属性重点感知。大家这里也能想到,世间万物都可感知,为了方便后续的统计和分析,需要进行加工处理,需要将当前的感知线上化和数据化,同时会将这些数据进行标签化的处理,那么如何去处理这些数据呢,这里主要分成三类:



1.1 统计类数据

简单来说就是从传感器或者线上平台等渠道直接获取的数据。举个例子,比如说登录网站,那么我们可以获取用户ID,从温度传感器,我们可以直接获得温度。这些都是统计类数据



1.2 规则类数据

简单来说就是基于一定的规则产生,举个例子,比如我们规定用户与设备之间的距离为0~40cm为近距离,,工人每小时生产产品80件定义为熟练工,这些都定义为规则类数据



1.3 机器学习类数据

他是通过机器学习挖掘产生,根据相关属性进行预测和判断。比如淘宝上对男女的划分,他通过你买的商品去判断你是男生还是女生,你的兴趣爱好是什么



那么接下来我们讲决策层,那么刚刚我也介绍了整个框架模型,决策层主要有两部分,现在讲述第一部分,也就是整体框架中红色圈住部分,针对【意图识别决策模型】进行剖析。简单来说就是我感知之后去理解用户的诉求是什么,这里也抽象为四大类决策方向:行为干预、推送建议、意图预判、自动决策



2.1 行为干预

简单来说就是我感知到当前的行为是异常、错误的,会做出主动预警进行干预。举个例子,比如图中的场景,通过摄像头的图像识别检测到工人的操作不规范,会通过光效和音效的预警来进行行为干预



2.2 推送建议

是基于你的爱好去推送不同的内容



2.3 意图预判

感知之后去预判,你接下来会做什么。比如上图,当系统之前感知到用户粘贴了地址和电话信息,那么系统就预判你是不是要寄快递



2.4 自动决策

比如陀螺仪识别用户将设备倾斜了多少度,将屏幕做自动关屏



那么前面讲述的是决策层的第一大板块,那么现在讲第二板块,也就是设计表达影响因子模型。简单来说,就是我已经决策完成,那么我怎么去做决策和输出,受那些变量因子影响呢



那么这里也抽象为三大类变量因子,用户感官因子,环境因子,设备因子。

比如在【用户感官因子】上,会去分析,用户当前的认知负荷是什么样的,如果当前是在黑暗的情况下,用户的视觉负荷比较大的话,那么设计表达是不是就应该以听觉和触觉为主。同时我们还会去分析用户是运动状态还是静止状态,如果是运动状态那么在设计的时候是不是需要考虑,字体是不是需要更大,方便用户获取信息等等案例。

【环境因子】就是环境光线的强弱,噪声的大小等等,比如设计的时候,是在室外,光线比较强的环境,那么设计的界面对比度是不是就得更强。

【设备因子】就是传统设计当中,他的输入通道是物理按键,还是触屏,还是语音,手势这些,以及输出通道,有没有喇叭,指示灯等等。这些都会影响我们采用怎样的方式去进行设计表达。



那么第三层就是我们最熟悉的表达层,也就是具体的交互执行。常用的表达方式主要有界面,音效,光效,触觉,动作这几类,这些大家都很熟悉,这里就不做详细的讲解。



那智能感知交互依赖的技术和条件也是比较多的,所以他是分企业分阶段发展的。那么这里主要分为5个等级。从无智能到完全智能,那么目前呢主要处在中间C2这个条件智能的阶段中。简单来说就是机器自动感知部分情景,再加上人的辅助输入,让系统完成任务。



03 智能感知设计应用

那么前面说这些都是偏理论偏框架类的,那么下面我会结合案例具体讲解智能感知交互是怎样去落地使用的



那么当有了模型框架后怎样应用呢,首先,离不开设计流程,和传统设计流程类似,智能感知交互的设计流程也为:【发现一个机会点,制定对应的设计策略,然后定义具体的设计表达,持续监测进行迭代和优化。】这样构成,那么大家就会想了,那我们的不同之处在哪呢?这其实离不开设计对于技术的洞察力,我们设计对于技术的了解和应用其实贯穿在全流程中。

比如说,在我们在做UED设计中,发现痛点时,我们可以通过问卷调研,访谈调研获得用户的主观数据,也可以通过埋点检测获得用户的行为数据,而我们在优化的时候,除了从设计侧出发的体验优化,那是不是可以不给自己设立边界,比如从技术出发,让算法自身不断学习,让准确率有所提升。带着这样的不同,我来举一个案例。



案例介绍:一块沙琪玛的一生



这块沙琪玛出生在一个非常传统的食品供应链公司,她从出生出来到被运送到客户手中,会经过4个空间,12个节点。而在这层层的校验中,当我们想知道沙琪玛的质量,生产日期,和他的位置,需要的是员工的手动介入和对于条形码的扫描,



但我想更精细化的知道沙琪玛具体的信息来进行更好的数字化管理,那就变得非常困难。所以我们在想,怎么可以让对沙琪玛的管理,变得更聪明一些呢,那改变这传统模式的机会,就来自于识别技术的发展。



那么现在已经运用起来这样的技术了,一些商场的衣服和商品上都会有RFID标签,比如优衣库,在进行结账时只要将多件商品投送到结账框中,就可以一次性识别多个商品完成结账,这就是RFID的优势,他可以完成一对多的批量识别,并且具有更大的识别范围,识别过程中不需要设备和条码直接对视。



那我们就要想了,如果每个沙琪玛都有一个RFID码,那我们是不是就可以批量无感知的识别他们了呢。带着这样的技术优势,我们来回顾整个操作流程,我们发现,在围绕沙琪玛的一层一层校验中,已我刚刚提到的【行为干预、意图预测、自动决策和推送建议】四个角度来找到更智能的优化点,比如说,当沙琪玛从车间生产出来,即将被打包的时候,我们如果发现了一个异常,可以怎么处理呢,大家觉得~~~~我们是不是可以进行一个行为干预,来将这个异常及时的告知给用户,又或者,我们可以进行一个自动决策 ,我们通过自动化设备,来吧出现异常的商品进行自动剔除。



那由于整个链路太长,所以我现在呢,以沙琪玛离开仓库的最后一个校验环节为例,来做展开



这个时候,用户拖着托盘,来到月台,准备将沙琪玛装上卡车,这个时候,如果沙琪玛上错了车,那我们就非常难以将他追溯回来了。所以这个时候,用户的意图是非常清晰的,那就是及时的阻止这个异常的商品流出仓库。但我们知道了,那下一步呢,就是让机器也知道这一个意图,其实在这个场景下非常简单,无非是,某人在某场景下做出了某个行为,而这个场景下我们可以通过员工的账号ID来获取的员工的身份,



我们也可以通过设备上在运行的秘钥来获得当前的实操场景是什么,

还能通过RFID的天线,他所识别到的信号逐渐增强,来发现,啊确实有一个用户,在拖着商品逐渐靠近,那以上这三个条件,就可以触发我们对于托盘上的货物的识别来判断,他上的车是不是对的呢,数量是不是准确呢,一旦发现异常,我们就需要将信号及时的传给用户



那下面问题就来了,我们该怎么表现这个异常,刚才也提到,我们设计的表达是多种多样的,有界面内的,界面外的,环境空间的。而用户接收的渠道却非常的单一,无非是,视觉、听觉、触觉、甚至以后可能会有嗅觉。



怎样选择合适的感官通道

所以我们在定义一个合适的表达方案的时候,就需要考虑到当下用户、环境、设备的影响因素,那在我们的场景中,我们应该怎样选择一个合适的感官通道来传递这个异常信号呢



这就需要我们清晰的了解,在这个场景下,每一个感官通道被占用的情况,这样我们才能选择其中占据优势的那些来做出我们的设计表达



为此,我们总结过往一些学术研究,来将用户、环境、设备他具体的影响程度进行数值化。比如对于用户的限制,我们采用VACP的工作负荷模型来量化用户的各个通道上认知资源被占用的程度。而对于用户自身的能力限制,我们通过剑桥大学提出的一个无障碍公式,来计算用户自身能力限制的程度,同样,我们综合国内一些常见的标准,来将环境因素,例如,亮度、噪声、和设备自身的表达能力进行等级的划分。那大家就要好奇了,那要数值化,那数值化靠谱吗,我们怎么做这个数值化呢?



那我以VACP工作负荷模型来做一个简单的展开,他起源与1984年,对于飞行员在驾驶飞机的一个观察和研究。研究者将他划分为视觉、听觉、认知、运动四个维度。同时呢,对于不同难度系数的任务,划分了不同对资源程度占用不同的等级,这样,我们就可以像查阅字典一样,来根据我们需要的任务表现,找到这个通道上对应具体的占用程度



回到我们刚才的场景,当用户拖着托盘靠近的时候,他需要时刻注意眼前的道路,避免和其他物品碰撞,这个时候,视觉上他对物体的追踪和跟随,这个时候呢,在视觉上通道上他会有77%的占用情况



而听觉上,虽然他不需要声音来辨别道路,但在这个过程中,有可能有小组长会叫他说,唉,你过来以下,那这样我们就需要做一个声音的辨认,那在听觉通道上,可能会有14%的占用程度



而在月台上,时刻会有运输与发动机的声音,这个大约在70分贝的噪声,会给用户在听觉上有个二级的干扰作用



综合来看,首先,我们对用户在触觉上的反馈通道就被阻断了,因为设备端离用户实在太远了,无法进行一个触觉上的反馈,



而剩下的视觉通道已经被高度占用了,他的有效性是较为有限的。而在听觉上,虽然他的占用程度没这么高,但他收到了环境噪声的二级干扰,所以我们单一的通过视觉或者听觉都不足以达到一个有效的反馈作用。



好在现在用户的认知还是比较充沛的,所以呢,我们可以通过视觉、听觉、认知三个通道上的整合,来做一个比较有效的反馈。



也就是,当用户靠近时,首先,她会在听觉上听到蜂鸣器的报警,



然后呢,他的注意力就被抓到了灯光的闪烁模式上。,他从他的记忆中记得的灯光的三种闪烁模式上,辨识到了这个闪烁意味着说:这个闪烁,标识着我现在拉得沙琪玛品类有问题,那我要好好的检查一下。那我们的反馈呢,就成功的达成了



清晰的视觉表达

那除了刚刚提到的,多感官的反馈,我们在对于界面的设计上,也考虑到了多因素的影响



那第一个就是大家相当熟悉的视觉距离,在我们的生活场景中,,有手持设备的近视距,也有推动设备的中视距,还有推动大型设备上走向通道门的,远达130厘米的远视距



那面对这样不同的视觉距离,和用户静态或者动态的移动状态,我们推导了计算文字高度和文字字号的公式,



然后计算这样的视觉距离和运动速度的不同,来对关键信息做突出化的展示,保证用户在看到关键信息时他的清晰度。那大家可以想想,除了视觉的距离以外,还有什么因素会影响到视觉的表达呢,



那就是环境的亮度。在我们的场景内,尽管有部分都是在室内发生,但也有部分是在室外发生,就比如我们举的沙琪玛的例子,他是在月台发生的场景,那这个时候,就需要我们在色彩的设计上,去考虑到环境亮度的影响,



我们基于 W3C,对于色彩对比度的分析,然后定义了我们的配色方案,在对于室外的环境,我们会采用色彩对比度较高的配色方案,而到了室内呢,我们会动态的将色彩对比度降低,避免用户长时间注视对比度高的界面,造成视觉疲劳



那既然有设计方案,那自然就有效果评估,



我们将智能感知设计的评估,分为主观和客观两个部分,主观就是大家比较熟悉的,比如我们感知的这个情景是否准确,能不能够帮助用户提高效率呢,整个感受是不是愉悦的,是不是有效的,那么这一块我们是通过李克特5点量表问卷,和SAM问卷来进行度量,另外一部分则是客观部分,这一部分我们通过对于算法模型的评估指标来进行度量,比如他的准确率,召回率,精准率来评估他的算法是否可以不断学习和进步。


思考:如何将智能感知更多的应用到产品设计中?

那智能感知交互的分享就到这里,这里我衍生一下,从刚才的案例中,主要都是实操类的,那么我们是不是可以做个衍生,将智能感知设计的思路方法也延用到产品设计中呢,比如现在的抖音,头条,他们去分析我们的喜好,主动的替我们进行筛选,于是在使用产品的时候,我们可以说是被动的看内容,被动的看到商品被吸引然后下单。那么B端产品也可以以此类推,传统模式下,是人登录后台,主动去找任务,那么在这里,我们是否可以换个思路,任务主动来找人,通过感知到用户的身份,我们来主动检测,他所关注的任务的进度,并且在这个任务落后的时候,主动发出预警和提示,真正的提升用户的管理效率。


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

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


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


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

信息层级,没你想象的那么难

鹤鹤

01.写在前面

大家有没有遇到这样的问题,当你面对非常复杂的信息时,在进行信息整理设计时,往往会陷入比较纠结的场面,不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问,这篇文章适合你继续阅读。



本篇文章会提供一种解决排列问题的简单底层逻辑,我们可以围绕这个逻辑去排布我们的页面,从而让整体排版变得更加清晰合理。

02.信息层级的作用

信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式,通过信息的放大缩小和对应的位置,能够将复杂的信息分为不同的模块呈现在我们的视野中。



大家先简单看一下图中两个画面,你就能够直观感受到信息层级对于用户认知的作用。



不好的信息层级就像左图一样会让画面比较杂乱,难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确的识别出画面想要传递的信息。

因此信息层级的排列不仅影响视觉上的美观度,更影响人们在检索信息时候的效率。尤其是对于B端复杂场景,我们不仅需要考虑清晰传递业务价值,合理的信息层级划分也是提高产品体验的重要部分,好的信息层级则意味着更好的使用体验。

03.如何做好信息层级

既然信息层级对于使用体验比较关键,那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐,我也曾为此类问题查阅了大量资料,想要找到一个简单高效的答案。



但目前查阅到的资料几乎都在讲排列的四个基本原则:对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛,让人很难在实际中更有效地利用。

即使我对排版四个原则非常熟悉,在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索:



经过线上页面与概念的整体研究发现,他们在遵循排版原则的基础上,本质上都存在一个简单的逻辑:那些优秀的页面设计都把主内容的层级控制在了三层左右,如下图所示。



因为三层左右的层级是最容易被用户感知,且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。

比如我们看下面这两个例子,左边层级因为特别复杂,造成用户获取信息效率变低,而通过层级的转换,我们可以将其变得更简单且易读。



再举一个例子,我们在大部分场景见到的纯文字排版基本都离不开以下几种形式:



因此,我们需要在排版时需要首先思考一个逻辑:那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。



有同学看到这肯定要问了,这个道理我也懂啊,可是在实际业务中大部分时间拿到的信息太多,根本做不到保持在三层以内。别急,这篇文章的重点当然不是告诉你这么简单的道理,而是在面对复杂层级的时候,我们应该怎样去控制它的层级表现,从而让它在最终呈现上保持在三层左右,让用户获取信息的效率更高。



其实我们在实际中的大部分优秀页面,在本身的信息层级上可能都非常复杂,但我们可以通过一系列的方法,去减轻这种多层级的影响,从而让我们的页面即使承载了很多复杂的信息,也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。

04.信息层级前置处理

这可能是被很多人忽略的一点,就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难,但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。



源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景,比如某些时候产品给到了我们很多信息,但我们并不一定会全盘接受,而是通过当前页面的业务场景去进行判断。确定每个信息的合理性,从而可以决定有些元素是否可以删减,提高整体信息设计的一致性。

1. 当前的所有信息真的需要存在于页面中吗,如果去掉某些信息有无影响。

比如当你在进行打车的时候,当你输入目的地之前,一切其他的信息都无需呈现。当你输入目的地后,车辆的相关信息和价格才会进行呈现,当你打车后,司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。



2.当前信息的重要程度是怎样的,对于某些不重要的信息是否可以通过隐藏的方式展现。

当你拿到一堆信息,信息的重要程度就决定了我们需要将哪些信息作为主体,哪些信息作为次要辅助信息,哪些信息甚至可以收起或者省略。比如当你浏览新闻的时候,标题永远是最关注的,而评论,作者,简介等都是可以忽略的信息。



上述两个问题的确认,会影响我们对后面的信息排布。因此我们需要在源头,比如去和产品或者业务沟通,弄清楚该信息呈现的缘由以及必要性,这样能够帮助我们最后理清楚信息层级。

05.信息层级排布处理

信息排布的本质是通过我们对信息进行排列上的调整,来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。



通过目前的实践总结,我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。



5.1 信息分组

信息分组是大家在设计时都能够想到的形式,分组能够将复杂的信息打散,从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式:间距、分割线、卡片。



那么这三种方式有没有区分呢,VIVO设计团队曾经就这个问题展开过用户调研,但结果表示,如果纯粹从用户的角度来讲,对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感,因此我们可以根据当前信息的复杂度作出以下规则:



通过这三种场景的区别,我们可以根据信息复杂度更好地选择分割方式,让界面的表达清晰明确。

5.2 利用组件拆分

组件其实是目前大部分设计师在进行信息排布时必备的部分,因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是,目前这几种组件对于我们信息层级的划分起到了比较重要的作用:树形结构、表格结构、步骤条、选项卡。

树形结构

对于有关联性的多层级非常适合,可以将复杂的层级结构进行收拢,从而能够显著降低信息的复杂度。

表格结构

对于信息多且关联性不大的复杂信息,可以聚合到表格来进行呈现,但表格的呈现方式不宜滥用,需要根据我们场景来进行选择。

步骤条
步骤条则对场景要求非常明确,我们可以将多个场景通过分布的形式进行呈现,从而减少当前页面的复杂度。

选项卡
选项卡更适合与同级的数据,对于同类型的结构可以更好地将页面进行拆分,从而让当前页面更简洁。



由于组件这一块大家的认知已经比较全了,在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。

5.3 更改布局

通过改变布局的方式,我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢,举个简单的例子:



从上图中你可以看出目前的层级较多,尤其是两层tab的叠加,视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局,从上下结构变为左右结构,达到从视觉上简化层级的作用:



当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时,我们可以考虑通过改变结构来减少其复杂度,比如上述的两栏结构,甚至三栏结构,从而让整体变得更加简洁。



5.4 信息融入

我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式,让其融入到同一个层级中。比如我们看下面这一个例子,Coding产品设计中将标题与tab利用分割排列在一起,从而变为同一层级,这个时候就不会出现四层的复杂结构,页面还是保持三层结构,通过这种方式有效降低了页面的复杂度。



信息融入这个方法,当我们在进行B端布局时,用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间,还能够降低信息层级的复杂度。

但在进行信息融入的过程中,我们需要注意的是:如果放在同一层级会造成理解上的误解时,这个时候不要采用该方案。比如搜索框的位置,放在哪个层级决定了对应的搜索范围。

5.5 信息弱化

信息弱化的原则是,将某些超出层级的部分进行弱化。比如有5个层级,但其巧妙地将功能筛选融入到了当前的结构中,使得即使超过3层我们也不会觉得其特别复杂,我们再看一个例子:



可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化,虽然还是有4种层级,但从视觉感知的层面上不会觉得视觉凌乱。

在很多时候,我们觉得信息混乱的原因,就是页面要素太多太花哨。比如工作中的一个小卡片,也就是利用信息弱化去减少画面的复杂度:



因此我们需要学会对信息分级,不重要的信息就进行弱化,这样整体的表述上会好很多。

通过上述5种方案:信息分组、利用组件拆分、更改布局、信息融入、信息弱化,我们可以将大部分层级过多的复杂信息简化在三层以内,从而让我们最终的页面呈现不会太过复杂,更容易被用户理解。但不可否认仍会有更复杂的页面,即使缩减也仍有过多层级,那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。

06.信息层级小细节

在研究的过程中,也总结了目前在进行信息层级排布过程中比较纠结的一些细节点,也分享给大家。希望对遇到相同问题的同学一些帮助。

6.1 被忽略的沿着字的轴线对齐

大家对「对齐」并不陌生,它存在于我们的每个页面。但在对齐的过程中,我们可能会忽视一个小细节点,那就是沿着字的轴线对齐。比如下图两个例子:



在看见左图时,总觉得哪里会有点奇怪,但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐,而这就是说的沿着字的轴线对齐。这主要是由于相似原则引起的:那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起,即相似的部分在感知中会形成若干组

而左侧因为标题字和底部字没有形成对齐,因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。

6.2 卡片是用线框还是背景

这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时,你有没有纠结过到底是用线框卡片还是背景色填充呢。



我就曾陷入这种纠结,但在去搜索查阅时,发现目前其实关于这块相关的资料,因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现,这块内容其实也包含着一定的规则:

1.取决于卡片的数量

对于卡片少的其实可以用色块来呈现,对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现,举个简单的例子:



通过coding和飞书的卡片对比,你会发现卡片过多时线性设计会让页面显得更整洁和清新,色块设计就会让页面显得更厚重。右侧整体的呈现行会显得更好一些。

2.取决于页面的视觉重心


这里页面视觉重心的含义是当你整个页面都全是线框时,你可以利用色块的卡片来达到突出页面重心的效果,让整体页面没有那么单调,可以看到下图的例子,右侧的页面会相对更稳重一点。



6.3 底色用灰色块还是彩色块

在进行色块时,时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢,我们应该何时使用这两种色彩呢。



我们先看一下案例:



可以看出目前这两种颜色的运用更多的是功能上的区分:


1.彩色背景更适用于「想要引起用户注意的界面」,比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。


2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。


所以我们可以根据当前的信息场景来选择合适的色彩,后面再面对时就可以不用那么纠结。

07.写在最后

本期的内容到这里就结束了。关于这期的信息层级内容,真正需要深入了解的是控制信息层级背后的方法。很多时候我们看见的优秀页面并不是因为它本身就简单,而是通过我们合理的信息层级控制,让最终呈现上显得不复杂,这其实也是我们在实际工作中需要注意的很重要的一个点。

本文重点内容再回顾,当我们遇见复杂的信息层级时,需要分三步:

1.明确当前所有信息的必要性和重要分级,需要从源头去深入了解;

2.运用五个方法可以有效减低信息层级:信息分组、组件拆分、更改布局、信息融入、信息弱化

3.同时在运用过程中需要注意影响层级的小细节

以上是本文关于信息层级的另一种角度的描绘,虽然没有提及四大基本原则,但在实际运用中也是很重要的。最后,虽然进行了很多资料查询,但在在阐述过程中不可避免会有阐述不到位的地方,欢迎进行反馈。

原文地址:站酷

作者:蒙东东

转载请注明:学UI网》科幻机甲风格海报怎么做?

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


用「用户体验五要素」整理「Live Activities设计规范」

鹤鹤

众所周知,「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书:战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为:为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。



「Live Activities设计规范」由苹果出品,原文为英文,上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」,使用比较熟悉的「用户体验五要素」对内容进行整理。

1. 战略层——为什么做

原文提供的Live Activity定义如下:
A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

从原文可以提炼出Live Activity显示特点:

1. 内容是频繁更新的、有进度/状态显示的、用户关心的。

2. 内容的信息量是一眼就能看完的程度。


但上述仍是表象,并非实质,接下来思考这几个问题:

1. 为什么显示的是进度/状态频繁更新的内容?

2. 为什么要强调用户关心的?

3. 为什么信息量是一眼就能看完的程度?

没有Live Activity频繁更新主要靠push推送。但push容易被其他APP的push覆盖,且随着各种APP的频繁使用,用户获取关键信息的效率和通过push打开APP的次数反而在下降。


进度/状态频繁更新的内容,说明每个状态存在的时间短,如果被覆盖/忽略,同一状态就不再复现,用户所关心的,或APP所希望用户关心的,就看不到了。比如:什么时候取外卖、待付款、上传成功等等。


当下我们所处的时代是信息泛滥的时代,需要对信息作精简,但用户的操作是可以多条线进行的,比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。


信息内容和量是官网一直在强调的,需要精简,只展示用户需要的,基本达到一眼看完的程度,目的就是知道变化的是什么,当前状态是什么。

分析了这么多,大胆推测一下Live Activity的设计初衷是:快&准确&轻。而终极目的是打动用户,形成好体验,进而推动口碑和销售;为各APP提供新的通知形式,互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。



2. 范围层——做到什么程度

关于这个层次相当于规定功能范围&信息边界限制,就是什么要,什么不能要。这部分的信息官网给出许多,在此将其分类梳理如下,为避免大家不好查找官网/译文对应出处,在句未已标注。

1)硬性限制

1. 仅iPhone支持,iPadOS、macOS、tvOS或watchOS不支持。(源自:平台注意事项)

2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。(源自:什么是Live Activity-锁屏)

3. 支持用户手动清除锁屏状态下的Live Activity(源自:实际操作)

4. 支持用户直接关闭对应APP的Live Activity(源自:最佳实践方式第3/c条)

5. 支持Live Activity自动开始&结束。(源自:最佳实践方式第6/f条)

6. 限制跟踪活动/状态时长不超过8小时。(源自:最佳实践方式第1/a条)

7. 限制活动/进程结束后展示时长不超过4小时。(源自:最佳实践方式第8/h条)

8. 支持更改背景颜色&不透明度。(源自:设计有用的Live Activity第5/e条)

9. 限制内容布局。(源自:设计有用的Live Activity第5/e条)

10. 限制不同设备的展示尺寸。(源自:规范)

2)非硬性限制

1. 避免在Live Activity中显示敏感信息。(源自:最佳实践方式第4/d条)

2. 避免在Live Activity中显示广告和促销活动。(源自:最佳实践方式第5/e条)

3. 只提供正在进行的任务/事件的关键摘要。(源自:最佳实践方式第2/b条)

4. 在任务/活动结束前,给用户提供关闭Live Activity按钮。(源自:最佳实践方式第6/f条)

5. 点击Live Activity直接定位到对应页面,无需用户二次导航。(源自:最佳实践方式第7/g条)

6. 考虑在活动结束后,锁屏上在合理时段后自动删除Live Activity(源自:最佳实践方式第8/g条)

3. 结构层——这些东西如何组成?

(个人猜测)由于是提供一个展示区域,且展示区域有限,所以对于层级架构,一级展示什么,二级展示什么,各阶段展示什么,这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。

4. 框架层——规划用户操作行为

通过Live Activity的展示形式,可以总结为2点:吸引、查看(摘要&详情)。

1)吸引

1. 一般是在原深感摄像头两侧展示(电话会直接展示扩展型),分为紧凑型和最小化。

2. 紧凑型在仅有一个活动/事件的时候展示,虽被原深感摄像头分割两端,但仅作为一条信息展示,为了视觉上的统一,这里的颜色不支持开发设置,使用的是系统默认色值。

3. 最小化在存在多个活动的时候展现,左侧和原深感摄像头粘连,右侧独立成岛。

4. 不管是紧凑型,还是最小化,都可以通过点击原深感摄像头区域,进入APP内页,或者长按唤出扩展型。



2)查看

1. 进入内页的查看基本就是各家显神通了,这里主要讲扩展型和锁屏。

2. 原则上是不支持在扩展型和锁屏做复杂操作的,基本点击是进入APP。

3. 扩展型是用户长按紧凑型/最小化唤起的展示区域,内容是可以自定义的,当然官方也给了相应的建议,具体如下。内容信息种类多的可以采用这种信息左中右排布,底部预留大按钮。内容信息少的可以采用左内容右操作的方式。



4. 根据一致性原则,锁屏展示的布局框架应该与扩展型差不多,同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行,是会全部展示的,所以要注意品牌的传递,避免用户混淆服务方。



5. 表现层——如何呈现这些东西

对于如何呈现这些东西,苹果还是写了很多建议,确保视觉上的一致性和美观。

1)颜色

1. 紧凑型状态下,为了保证两侧信息的连贯,除了语句阅读连贯,还需要在图形和颜色上具有一致性,视觉上连贯。

2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的,当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。

3. 设计师不仅要考虑最佳状态,还有深色&浅色模式下的,以及不同环境光、设备亮度下的显示。还有一点很容易忽视的,就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取,还需要考虑美感问题。

2)间距布局

1. 紧凑型和扩展型之间的布局要保持一致,两者间的变化过渡效果是可以预测的。

2. 一般来说,扩展型和锁屏状态下的信息间标准间距是20pt。

3. 在某些情况下,例如图形和按钮,您可能需要使用更紧凑的边距,以避免挤满边缘或形成混乱的外观。

3)圆角

1. 内容和Live Activity边缘之间的边距需要保持一致,请遵循SwiftUI规则。

1内容和Live Activity边缘之间的边距需要保持一致,,发现以圆角边界为测距点得到的间距关系较为舒适。即:圆形/大致为圆形的图形保持上下,3. 以及左侧或者右侧间距一致即可;方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一,才能确保间距的一致性。



4)尺寸

需要适应不同机型的尺寸。具体的尺寸规范如下。

a. 灵动岛

动态岛使用44个点的角半径,其圆角形状与原深感摄像头相匹配。



b. Live Activity大小

下表中列出的所有值均以pt为单位。
ps:左侧为宽度,右侧为高度。



以上就是整理分析的全部。

在整理分析过程中加强了对「用户体验5要素」各个层划分的理解,也对Live Activity在各个层次上的要求更加明确。


作者:Viola_1241
链接:https://www.zcool.com.cn/article/ZMTUxMTIzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:Viola_1241     来源:站酷

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

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

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

阅读可视化1:《交互设计沉思录》第一篇

鹤鹤

不太爱看书,看了老忘,就很容易失去信心,垂头丧气、一蹶不振。

比较喜欢做图,把信息间的逻辑以图示化的方式表现出来,能加强理解,后期回顾也会比较舒心。

所以就有了这个系列——阅读图示化。

可能会出得很慢,画图比较费时间,想着怎么展示信息间的逻辑也很费时间。

基本是按着小节一块内容对应单图/多图。

基本一张图是一个完整的知识点。





























作者:Viola_1241
链接:https://www.zcool.com.cn/article/ZMTUxNDE4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:Viola_1241     来源:站酷

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

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

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

垂类品牌年轻化重塑—有驾品牌升级

鹤鹤

什么是“有驾”

【有驾】是百度旗下的汽车信息与服务平台,累计用户超5.3亿,致力于为用户提供真实、可靠的看选买车服务,以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。 

现状分析

有驾品牌在孵化初期,重点是在用户词建立品牌感知。所以我们提取“有驾“的字形做为品牌符号,减少歧义,强化用户的感知。

但是随着品牌持续运营进入新的阶段,我们发现现有的设计无法满足后续的运营诉求了,主要体现在:

品牌logo:不能体现汽车的行业属性,缺乏成体系的品牌符号和VI体系,色彩上也不够符合时下潮流的年轻配色体系。

品牌活动:品牌关联度弱,活动维度单一。



项目概述

因此,我们重新梳理有驾的品牌定位与调性,借助本次品牌升级,打造有驾差异化风格,形成独有的视觉印记。

因为用户对于旧的logo已有一定的认知。所以此次改版的目标在保持固有用户认知,在原有基础上进行品牌标识的探索及应用,以强化品牌感知,提升品牌的竞争力,整合业务资源做心智触达。





前期分析

前期我们对汽车垂类的竞品进行了一轮调研,并且结合有驾的用户群里,寻找有驾品牌的差异点。

有驾用户群体年轻化为主,普遍具有高学历,集中在新一线二线城市。

通过以上在用户、行业及行业趋势等多唯独的信息搜集后,我们确定了有驾品牌设计的四个核心关键词:年轻、科技、未来、专业。



建立体系

在明确设计方向后,我们梳理了线上线下的所有品牌触点,结合前期的调研结论,汇总出了有驾设计系统的完整框架,以确保品牌设计的完整性和灵活适用性。




设计落地

基于前期分析洞察结论,我们在继承圆形和车形的基础上,对品牌符号与icon进行了大量的方案探索。从图形、质感等方面切入,简化图形形态,尝试不同的形态呈现的视觉感受和气质。最终确定了全新品牌logo方案。




相对于升级前,新版的logo加入汽车元素,解决升级前logo的行业属性不明确的问题,让产品app的行业属性更加直观。同时增加品牌符号做为底纹,辅以有驾的圆形符号成为品牌核心的一部分。强化有驾的品牌基因。





符号提炼

确定品牌logo后,为了确保品牌能够更好的拓展应用,进行了品牌符号的提炼。并为了延续之前的品牌调性。所以辅助图形延续了之前的圆环造型,造型偏向轮胎;在不破坏原有型的基础上,加入一些折角的质感的变化,使图形变化更加丰富,更有识别度。





设计语言

为了更好的触达到各业务场景,所以我们对视觉风格进行了探索和拓展。分别以浅色与深色作为主要探索方向,以适配不同的落地场景。结合有驾的年轻化,科技感的设计目标,探索出以下三种质感呈现:






符号拓展

在提取的形状基础上进行变形,增加折叠细节。在大事件活动,海报等场景使用,增加品牌关联度。




设计字体

结合全新的品牌定位,我们也优化了有驾的品牌字体,从细节出透出有驾的品牌感知。




品牌手册

新的品牌需要一套更全面的品牌系统来满足不同场景下的业务拓展需求。

目前我们也对现有的品牌手册进行拓展和完善,同步到业务方,以便更好的保证各业务场景触点下品牌的认知和统一,达到提质增效的目的。



品牌落地

除了对品牌对角度的塑造和升级,我们更积极的把品牌渗透到活动、栏目包装、大事件运营、品牌海报等各维度场景中,让有驾品牌形象更加立体多元。









结语

目前有驾品牌升级已经取得阶段性成果,沉淀出更加完善的品牌资产,不仅提升设计效率保证全链路的品牌曝光,也为业务规模化打下基础。之后我们也将不断完善和扩充品牌资产,将设计成果不断落地到业务中,细化业务目标并与设计目标紧密结合,多维度助力业务的高速发展。


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

作者:百度MEUX     来源:站酷

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

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

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

效率至上|带你认识提升用户效率的4种方法

鹤鹤

从事体验设计这么多年,经历过多款B端和C端产品的体验设计,有了一定的个人感悟。由于两者用户群体、使用场景、产品定位等方面的不同,让两者的体验设计策略也存在较大的差异。但是无论是B端还是C端产品,有一个共同的体验目标就是“提升用户的操作效率”。甚至在一定程度上,C端产品比B端产品要求更高。

为什么这么说呢?

因为C端产品面临激烈的市场竞争,如果效率方面存在明显的不足,用户很容易就转向其他平台了。而B端产品一旦部署上线,不菲的产品价格,平台切换的风险,数据迁移的成本等因素,很容易形成产品的护城河。虽然用户内心已是万马奔腾,但是依旧要自己摸索尝试、查看文档、或者请教别人来完成工作任务。

今天我们了解下C端产品用户行为路径中提升效率的4种方法。



一、用户行为探知

用户行为探知,就是根据用户的操作行为或特定的时间,系统给出相应的推荐操作。

1、用户操作感知

最常见的就是截屏操作产生的行为引导,目前主流的产品应用都会做出分享功能提示。在淘宝中,由于商品链接无法在微信中直接分享,所以淘宝对可能的用户分享行为都进行了设计优化。

例如用户在商品页面截屏时,系统会自动复制淘口令,既方便用户分享给好友,又方便了对方快速获取商品信息,避免了图片分享过程中的复杂操作。同样微信在用户发信息时,会自动提示是否要发送截图内容,减少了用户选择图片等操作流程,提升了用户效率。



(左图:淘宝截屏提示 右图:微信提示截屏信息)

2、用户行为分析

高德地图在特定时间段,开启导航时会默认给出“上班路线”的按钮,方便用户快速导航。此外还在地址中增加了“常搜”标签,根据当前地址优先显示常搜的地址,帮助用户快速完成导航设定。



二、用户行为引导

用户行为引导,就是通过用户行为流程分析,在用户路径中增加相关功能的曝光和引导,让流程更加流畅,从而提高用户的操作效率。

1、行为流程引导

淘宝购物商品详情页中,在最后几张商品图片中植入了评价信息和入口,更加符合用户的心智,引导性也更强。同时用户可以直接选择自己喜欢的款式查看商品评价,操作效率也更高。

而且增加评论引导后,实现了用户在首屏就可以了解商品、价格和用户评价,有利于用户对商品作出初步的购买决策,从而提高用户效率。



相比之下,专门的评价模块进入后默认显示全部商品的评价信息,用户需要手动选择才能查看自己喜欢的商品款式的评价信息,无形中拉长了用户的行为路径,增加了用户操作成本。

2、操作行为转化

在今日头条中,搜索行为与资讯内容绑定。用户在浏览的资讯后,资讯下方会自动显示搜索关键词,可以帮助用户更快捷的进行搜索操作。

同样在热榜资讯下方增加了详情提示,引导用户去查看事件详情。



(左图:搜索关键词推荐 右图:热榜引导)

三、用户行为聚合

手机产品屏幕的空间相对较小,展示内容有限。因此需要根据用户行为,将相关功能聚合,让用户在一屏中可以获取更多的信息,从而提高用户效率。

在天猫部分商品详情页中,将商品参数集合在了商品名称右侧,保证了用户在不滑动屏幕的情况下,就可以直接读取商品参数。方便了用户快速了解商品信息,提升了用户的购物效率。

考拉海购则在部分商品首屏中,直接分类展现出了商品的型号和款式分类,并且实现了商品价格联动,提升了用户获取信息的效率。



四、用户行为记忆

减少用户的记忆成本,最好的方法就是让系统产生记忆。因此大多数APP都会提供历史浏览记录等功能,方便用户查找相关信息。而内容型产品为了更好的提高用户操作效率,则是将用户行为记忆直接保留在内容层面上。

我们常见的音乐类产品会留存音乐的播放进度,用户点击后就可以直接再次播放。



(左图:喜马拉雅 右图:网易云音乐)

微信公众号文章阅读时,会对用户阅读位置增加锚点。用户再次阅读时,自动定位到上次退出时位置,从而提高用户的阅读效率。

微信“看一看”进入时,内容会自动刷新,提供更多新的内容给用户,为了帮助用户更好地区分新内容,微信增加了浏览位置提醒。

同样对于用户未完成的文章内容,用户再次进入时,今日头条会给出继续阅读的提示信息,方便用户快速操作。



总结

在提升用户效率时,我们需要关注用户场景和行为路径,从而寻找到更多的效率提升突破口,主要包含以下3个注意点:

1、明确用户的行为路径,寻找用户核心关切点,提升用户效率;

2、转移用户操作成本,让系统承担更多的行为判断和用户引导;

3、用户行为聚合时,应当集中关键的行为信息,避免对用户核心行为造成干扰;

以上就是我对提升用户效率方法的分析和总结,欢迎大家留言交流。

作者:子牧先生

转载请注明:站酷

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


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


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


设计师需要懂得用户体验

鹤鹤

设计师需要懂得用户体验知识











作者:董康
来源:站酷

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

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

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

万字拆解铁路12306APP丨一次次改版后变的越来越好了

博博

有人说它是全世界最牛逼的APP,因为它的算法难度和春运期间访问量几乎是全球之最;但有人说它是全世界最垃圾的APP,因为在使用这个产品的过程中,遇见很多奇葩、愤怒的体验。关于这两种说法,众说纷纭,本期设计大侦探,就来全面拆解铁路12306APP,一起来看看这个产品到底是如何设计的,用户体验如何。


一、导读


1. 内容结构
全文9700字,分为六个部分,分别是导读、产品画像、出行服务、内容服务、思考总结和后记,你可以通过下面的思维导图对本文内容快速的了解。


2. 适合人群
第一类,UI/交互设计师,可以跳出执行层,全方位体验12306的产品设计,多维度去思考和总结如何规避类似的陷阱;第二类,产品经理/运营,通过全面的产品设计拆解、体验反馈,获取产品设计参考;第三类,旅游及出行相关行业从业者,通过对12306的全面拆解,获取竞品设计参考。


3. 分析模型
第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的5个重要环节,主要用于拆分和分析产品的功能价值。
第二个,尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则,任何产品的设计,都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则,通过这十大原则,可以对12306的产品设计体验进行全面的校验和侦查。
第三个,设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2效应、席克定律等常见设计基础理论。


二、产品画像


1. 产品介绍
铁路12306是中国铁路客户服务中心推出的官方手机购票应用软件,主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务,首个版本发布于2012年10月16日,根据易观千帆数据,截止到2022年10月,12306月活跃用户人数6,923.78万。



2. 用户画像
铁路12306的用户群体主要以男性用户居多,占比65.04%,女性占比34.96%;从年龄分布看,以24-30岁的用户群体最多,占比36.52%,31到35岁的用户占比24.23%,36到40岁占比20.27%,41岁以及以上占比10.30%;从用户消费能力看,中高消费者占比33.48%,中等消费者占比30.43%,高消费者占比14.70%;从地域分布看,新一线城市用户最多,占比27.93%,一线城市占比19.93%,二线城市占比19.00%,其中广州用户最多,其次为深圳、杭州和北京。



3. 信息结构
铁路12306的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买,其次还提供各种快捷功能入口和酒店预订等服务;「出行服务」主要为用户提供约车、酒店、订单等服务;「订单」是可查询和管理在12306的各种订单;「铁路会员」是12306的会员版块,提供车票兑换、会员活动等内容;用户中心提供个人资料管理、出行向导和常用功能等内容。



4. 重要迭代记录
根据七麦数据统计,铁路12306的APP首个版本发布于2012年10月16日,截止到2023年1月12日,APP版本已经更新至V5.6.3版本,近一年版本更新次数为5次。
版本重要迭代记录
2021年9月,发布V5.4.0版本,新增无障碍功能、老人及障碍人士购票更便捷,即爱心版;



5. 产品生命周期
作为中国铁路客户服务中心的官方购票平台,铁路12306距离首个版本发布时间已经过去10年。从易观千帆数据观察,截止到2022年10月,12306月活跃用户人数6,923.78万,日均活跃人数811.65万。由于是国有企业运营,而且是垄断业务,12306没有任何商业变现的压力,从产品发布时间和活跃用户人数看,目前处于产品生命周期的成熟期。



6. 竞争图谱
截止到2022年10月,易观千帆数据显示,铁路12306APP在苹果的APP Store应用市场APP总排名71位,旅游类排名第一,汽车火车船票预定类第一,月活跃用户人数几乎是其他APP的总和。



三、出行服务
作为12306最核心、最重要以及实现商业变现的服务,出行服务主要为用户提供火车票、飞机票的销售,其次还链接了众多第三方合作伙伴,为用户在出行的各种场景提供了便捷的服务。



1. 票务
「票务」是12306最核心的服务,主要为用户提供火车票、飞机票和汽车票的查询以及销售,其次12306还对三种产品进行了组合,推出了空铁联运、铁水联运这样的服务。
1.1 火车票
「火车票」就是为用户提供火车和动车的票务销售,用户输入出发站、终点站和时间以后,就可以进行查询,其次还支持对已购买的车票进行变更到站、改签和退票。
1.1.1 售票
1.1.1.1 售票页
当用户输入目标站点以后,就进入了售票页。在这个页面,可以看到当天列车的所有车次,包括直达、中转、出发时间和剩余票数。在底部,有一个菜单栏,包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能,这主要是帮助用户快速寻找符合自己需求的车次,比如出发车站、出发时间等。



体验陷阱
这个页面的操作体验不太友好,底部的菜单栏不仅没有实现全屏手机设备的兼容,而且几乎和背景的元素贴合在一起,不够醒目,如果用户不注意,根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。
1.1.1.2 订单页
①在用户选择好车次以后,就进入订单页。用户需要选择座位的系别,包括硬座、软座、二等座、一等座、特等座等。


②用户需要选择乘车人。添加乘车人的步骤比较简单,在输入用户的真实姓名、身份证号码和手机号码以后,即可添加成功。首次使用12306的用户需要进行身份核验,用户需要通过验证系统发送的核验信息才能添加成功。
细节侦查
「姓名」这里有一个非常友好的设计体验,那就是针对无法输入的生僻字、名字超过30个字符,以及外籍用户的极端情况都给出了详细的指导,针对用户可能出现的极端的情况给与及时的提示,这就是尼尔森十大原则中的容错原则,帮助用户从错误中恢复,将损失降到最低。
③在「选择乘车人」的右边,还有一个「选择受让人」的功能。这个功能有很高的学习成本,会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能,它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户,积分又可以抵消火车票款,从而实现抵扣。


④选择好乘车人以后,用户可以进行选座,就进入了提交订单、支付费用的环节。
1.1.1.3 支付页
①订单生成后,用户需要在付款限定时间内支付火车票费用,否则订单将会取消。其次在支付页,也向用户推荐相关的保险服务,比如铁路乘意险,又分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险。



②「购买返程」其实一个非常便捷的功能,但12306设计的层级太深了,而且没有加上一键返回首页或订单页的按钮,用户如果想退回到订单页或首页,需要不断点击返回,操作路径实在太长。


体验陷阱
底部菜单设计了三个按钮,违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用,但是菜单栏的三个按钮权重设计得一样高,取消订单和购买返程这两个按钮,严重干扰了用户的选择,降低了操作效率。
1.1.1.4 支付成功页
当用户支付成功以后,「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务,非常便捷。不过内容的规划比较乱,体验稍差。



1.1.1.5 候补下单
「候补下单」是一个非常方便的功能,这个功能主要解决在当前车次没票的情况帮助乘客自动排队,如果有其他乘客退票,就自动抢票,非常贴心。这个功能也被誉为黄牛的终结者,帮助乘客自主排队。
1.1.2 变更到站
「变更到站」是指乘客可以更改目标站点,进入订单详情页后,点击「变更到站」按钮,点击底部的「立即变更到站」就可进入变更页面。在变更页面,乘客可以重新输入目标站点,然后再次进入车票售票页,选中需要变更的车次以后,进入订单页提交订单,变更成功。需要注意的是,变更到站只能办理一次。



体验陷阱
当用户点击「变更到站」的时候,如果不注意观察页面,根本感受不出原来需要在底部菜单栏进行操作,会让乘客陷入焦躁,不知道下一步从哪里进入。其次在变更到站页面,下半部分设计了很多快捷入口,比如车站大屏、约车、餐饮特产等,把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律,大大降低了用户的操作效率。
1.1.3 改签
「改签」是指用户可以更改出行的时间,改签的流程和「变更到站」相似,进入售票页后,选中需要变更的车次,进入订单页提交订单,改签成功。需要注意的是,车票改签只能办理一次,开车前48小时以上,退票费为票价5%,24小时至48小时之间为10%,不足24小时为20%。退票费最少2元起步。



1.1.4 退票
「退票」是指用户可以退掉已经购买的车票,退票流程比较简单,点击退票后,进入退票确认页,点击确认退票成功。需要注意是,距离开车前8天以上的不收退票费,其他的时段将会根据列车开车前的时间收取手续费,最高20%。



迭代建议
在用户点击退票的时候,应该出现弹窗,再次提醒用户是否确认退票,这样能避免用户误操作。这就是尼尔森十大原则的容错原则,帮助用户从错误中恢复,将损失降到最低。
1.1.5 购票后
当乘客购买车票后,12306的首页会加入一个行程的版块,向用户展示最近的行程详情,其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好,直观醒目地告诉乘客最近的行程信息,通过外部触发避免乘客忘记行程。
1.1.5.1 行程页
这个页面从上至下包含四个部分,头部是乘客详细的车次信息,比如出发时间、经停站、天气等;中间是车票信息,包含检票口、座位号、车次和乘车二维码等信息;接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务,比如餐饮预定、酒店预定等服务;底部是关于出发站、到达站的天气预报信息和优惠服务等信息。



细节侦查
行程页把乘客的出行拆分为3个场景,出行前服务(提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定)、车站/列车服务(提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航)和到达服务(遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航),这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。
1.2 飞机票
「飞机票」就是为用户提供飞机的票务销售,用户需要输入出发站、终点站和出发时间,如果携带孩子或者婴儿,还需要单独勾选。飞机票同样支持改签和退票。
1.2.1 售票页
售票页的内容非常简单,在头部,用户可以左右滑动选择时间,页面内容以Feed流向用户展示详细的航班信息,其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏,用户可以进行筛选设置,还可以根据价格高低和出发时间排序。



1.2.2 选择舱位
选中航班班次以后,进入到「选择舱位页」,在这个页面可以查看到航班的详细信息,比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级,比如经济舱、商务舱和头等舱,选中后,即可进入预订流程。



拓展阅读
为什么同一架飞机同一个经济舱飞机票价格不一样?这是因为一个飞机的不同舱位实际上是不同的产品,所以座位有不同的等级,故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。
1.2.3 订单页
在订单页,可以查看到订单的详细信息,包括收费说明、退改说明等,在用户添加乘客以后,就可以提交订单。这里需要注意一下,如果乘客携带孩子或婴儿,需要添加儿童出行人。



体验陷阱
当乘客勾选了「携带儿童或婴儿」的选项以后,在订单页准备支付的时候,系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加,或直接给出对应的功能跳转链接,这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则,不仅在用户犯错之前没有给出提示,犯错了还不给与指导,真的非常糟糕。
1.3 汽车票
「汽车票」为用户提供客车的票务销售,用户输入出发站、终点站和时间以后,就可进入售票页。汽车票的订单流程非常简单,在选中客车车次以后,添加乘客支付费用后,订单即可生成。



体验陷阱
用户在选择「达到地」搜索框输入地名时候,应该提供模糊搜索,比如输入湖南的地名,应该为用户提示相关联的车站。
1.4 空铁联运
空铁联运,顾名思义就是把飞机和高铁这两个产品组合在一起销售,支持用户一站式购买“飞机+高铁”的联运行程,只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下,为用户提供飞机+高铁的转运方案。这个功能对于乘客来说,支持一站式购买“飞机+高铁”车票,可以节省购票时间,非常友好。



1.5 铁水联运
和空铁联运一样,这也是一个组合产品的销售,支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样,我们就不必重复。



1.6 雪具快运
12306还推出了一个雪具快运的服务,为广大旅客提供多种个性化雪具寄送产品服务,还支持随车办理或上门办理寄送服务,目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单,采用预约制,选中服务后,填写用户详细信息,支付成功后,订单生成。



1.7 小结
作为12306最重要、最核心、最复杂的功能,从这个版块的内容拆解和实操体验来看,可以看出12306确实已经解决被誉为全世界最复杂的抢票算法逻辑(笔者通过实操测试,几乎都能买到票),特别是在春运这种会出现超过上亿用户抢票场景,真可谓非常不容易。不过从用户体验来看,非常一般,甚至有很多不合理的设计。
2. 出行
出行是12360结合了乘客在出行的场景中潜在产生的需求设计的服务,有结合车站商家的在线点餐,有结合当地地域特色的旅游服务,还有约车、保险、酒店等服务。这些服务,多数由第三方合作方提供。
2.1 餐厅特产
「餐厅特产」是一个为乘客提供在线点餐的服务,在乘客输入列车车次以后,就可以进行点餐,支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好,不仅解决乘客在乘车前的就餐问题,为车站的商家引流,还可以增加平台的变现方式。


2.2 铁路游
「铁路游」是12306结合旅游出行的场景,为乘客推出的一项旅游服务,包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好,但是版块目前设计得比较简单,内容也比较少。



2.3 约车
「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求,用户在出行的前后都有用车服务。为乘客提供约车服务,不仅能增加变现方式,还能方便乘客出行。通过实操体验,约车主要由第三方合作方提供服务,比如曹操出行、T3出行等公司,为乘客提供出租车、品质专车和商务车等车型。



2.4 保险
保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险,在乘客购买铁路的订单页就会向乘客推荐,乘意险价格低,保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供,主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。



2.5 酒店
酒店这个版块的内容相对夯实,不仅有新客大礼包这样的用户权益,还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员VIP,包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员,相对其他版块而言,这个版块花了比较多的心思。



2.6 铁路商城
铁路商城是12360以乡村振兴·帮扶推介为主题打造的一个商城,包含了帮扶专区、优选好物、兑换专区、今日特卖等内容,其次还支持企业集采,批量购买。



2.7 小结
从这个版块,可以看出12360其实结合了用户吃穿住行的刚需场景设计了对应的服务,有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差,事实上可以参考像顺丰速运、智联招聘这些APP,通过内置小程序的形式来设计,完全可以把这些版块让第三方单独设计和维护,同时还能为用户带来更好的体验。
3. 会员
铁路畅行会员是中国铁路统一对外会员服务品牌,开通畅行会员不需要花钱,畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等,主要包含积分权益,兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋,也没有太多价值的内容,可以看出12306在用户运营方面比较欠缺。



4. 订单
12306的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达12种订单,从这些订单类型可以看出12306的服务特别多。



体验陷阱
这个设计实在太糟糕,严重违反了7±2效应。琳琅满目,花枝招展,让用户在这个页面几乎迷失。更糟糕的是,当你有一个非常重要的待支付订单,这个页面竟然没有角标提醒,最终你会因为这个糟糕的设计打乱自己的行程计划。


四、内容服务


内容服务是帮助产品实现用户留存和运营的版块,不过从12306的内容设计来看,整个产品的运营手段比较少,所以我把12306现有设计的功能拆分为便捷功能和向导功能。



1. 便捷功能
以下这七个功能,对用户而言,是非常便捷、友好的功能,可以帮助用户在出行的旅途中获取很多帮助。
1.1 车站大屏
「车站大屏」是一个非常贴心的功能,通过这个功能,可以为用户提供车站的实时列车信息,非常方便。大屏详情页可以拆分为三块内容,左上角可以切换全国各地的火车站,头部还有搜索框,为用户提供车次的查询,主体内容是当前车站向西的车次信息,包含发车时间、候车室、检票口和候车状态等。



1.1.1 车次详情页
进入列车的「车次详情页」,可以查看当前车次的完整信息,比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面,还提供了「关注列车」的功能(关注后并无关注数据,显得很鸡肋),以及直接预订当前车次的入口。



1.1.2 车站详情页
「车站详情页」就像一个站点的主页,为用户提供完整的车站信息查询。这个页面可以拆分为四块,头部可以切换其他站点,并提供当前车站的天气情况以及车站基础信息。金刚区位8个功能入口,包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间,底部是车站附近周边的酒店精选。



迭代建议
这个页面把车站当做一个主体,聚合了一个车站完整的功能,其实挺有创意,但页面隐藏得很深,如果不去拆解,几乎很难发现,很是可惜。我认为完全可以提高权重,升级为一级栏目,代替会员,或者和出行栏目进行整合升级。
1.2 站内导航
「站内导航」提供目标车站的LBS导航,对于乘客来说,到达一个陌生的站点,需要清晰的指引,这是一个非常便捷、温馨的功能,能帮乘客解决很多问题。不过这里有一个莫名其妙的设计,那就是进入这个功能之前,系统提示请摇“8”字校准手机,事实上这里是一个加载动画,但是画面和内容却误导了用户,我甚至每次进入都傻乎乎的摇动手机。



1.3 临时身份证
临时身份证是一个非常重要的功能,12306现在支持APP在线申请,极大方便了乘客的出行。申请流程也比较简单,填写个人信息,验证审核通过后,就可以生成电子证照使用。每个人每个月有3次申请临时乘车身份证机会。



1.4 遗失物品
这是一个非常贴心的功能,如果你在乘车的过程中不小心丢失物品,可以通过这个功能登记,输入你的详细信息就能登记成功。



1.5 重点旅客
这也是一个非常贴心的功能,主要为老年人、残疾人服务,通过填入你的信息,列车会根据你的情况提供优先进站、协助乘降等服务。



1.6 爱心版
爱心版就是长辈版,专门为中老年用户设计的版本,在用户中心切换后就可进入爱心版。整个版本设计得非常简洁,操作步骤也比较简单,对中老年用户比较友好。



1.7 英文版
英文版在用户中心的设置点击语言即可切换,整体的版本设计得直接简洁,用户体验不错。



1.8 小结
从这个版块可以看出,一个产品如果以用户为中心去设计,是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能,过往我们只能提前出发去车站排队办理,但如今12306已经把这样的痛点解决,为用户节省了大量的时间。
2. 向导功能
以下8个功能,虽然属于出行向导,不过体验下来,感觉用户体验比较差,很多功能完全无法弄懂它的设计目的是什么,显得非常鸡肋。
2.1 快捷退票
「快捷退票」这个功能的设计,让人摸不着头脑。从操作流程看,首先需要输入用户的详细信息,包括姓名、身份证号码和手机,其次需要进行人脸核验,到了第三步还需要选择车票的日期车次,在最后的退票操作页面,用户点击退款后,没有和用户再次确认就直接退票。整个流程体验下来,非常糟糕。



体验陷阱
这个功能和订单页的退票感受不出来有何区别?如果用户要退款,不如直接去订单页进行退票,操作步骤简单,一目了然。其次不支持自动导入用户的购票信息实在太不方便,需要通过选择车票购买日期和车次,这个设计实在让人生气和愤怒(我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来,又再次重复前面两个步骤才到这个步骤)。
2.2 联系方式
这也是一个看不懂的功能,进入页面后,需要用户输入乘客的详细信息,但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同?更糟糕的是,当你把自己的电话号码、身份证信息填入后,系统会显示核验成功,然而当你再一次进入,页面内容还是和之前并无区别,你不知道自己是不是还要重新输一次?



2.3 时刻表
「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息,但这个功能「车站大屏」几乎已经包含了,这个功能显得意义不大。



2.4 查票价
这个功能非常鸡肋,因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息,相反在这个页面,根本无法看到价格,因为价格的字体大小只有20px,乘客几乎很难注意到。



2.5 查代售点
这个功能主要为用户提供全国各地火车票代售点的查询,不过在互联网技术发展到今天,火车票代售点越来越少了。从12306采集的信息来看,部分代售点缺少电话等关键信息,对用户来说,比较鸡肋。



2.6 起售时间
这个功能为用户提供各车站每日的起售时间,属于一个低频功能,可以解决乘客某些极端场景的需求。不过在我体验下来,比如通过此功能查询1月29日的车票,显示北京站起售时间为10:00,但是在火车售票版块,我也可以直接购买1月29日的车票,这让我比较疑惑这个功能的价值在哪里。



2.7 正晚点
「正晚点」同样是一个鸡肋功能,而且还需要输入准确的车次才能进行查询,车站大屏已经完美可以取代这个功能。



2.8 列车状态
「列车状态」比正晚点都还鸡肋,让人愤怒,因为你需要输入正确的出发地、到达地和出发时间,对了,还有正确的车次才能进行查询,这样的操作成本比下载12360APP都还麻烦。



2.9 小结
从这个部分的内容拆解和操作体验来看,12360的产品设计得不够细致和贴心,很多功能就像是硬生生塞进去一样,滥竽充数。其次从他们的产品迭代记录次数可以看出,近1年更新时间只有5次,也许每一次都是在做加法,没有想过做减法,所以导致这部分的功能显得鸡肋而且有很大缺陷。


五、思考总结


通过对铁路12306的全面拆解,接下来我将从内容层、功能层、体验层和视觉层进行总结。
1. 内容层
12306整个产品的内容设计,用一句话总结,可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务,比如酒店、约车、点餐、商城等,甚至还有空铁联运、铁水联运这种多场景的组合售票方式,不过在实际的版块内容打造中,则显得比较空洞,体验一般。这个产品,可以说几乎没有创新点,这主要也是由于它是由国有企业设计运营,背景极其复杂,设计目标也飘忽不定。
2. 功能层
在2015年之前,铁路12360承担了被誉为历史上人口迁移最大的春运的抢票工作,那时候一票难求,春运去12360就像是一场噩梦。不过在经过多年的升级和优化以后,目前12360的购票效率非常高,经过笔者多次的测试和调研,目前通过12360购票已经不再是难事。而且还设计了候补抢票这样的功能,帮助用户解决买票痛点,可谓非常贴心、友好。
3. 体验层
铁路12306的用户体验,非常一般,我在这次的产品拆解中至少侦查出了20条体验陷阱,这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页,这完全就是把用户当成傻子一样看待,其次还有一堆数不清的鸡肋功能,对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦,更能减少我的焦虑。
4. 视觉层
作为一个UI设计师,在拆解12306的产品过程中,我对整个产品的设计感到绝望。首先,没有做到统一性,整个产品毫无设计规范,比如卡片的圆角、品牌色、版块间距根本不统一,这样的视觉体验一眼望去就非常糟糕;其次,图标、活动图、橱窗图以及详情页的设计毫无美感,满满的山寨APP风格,特别是订单页的ICON,花花绿绿、琳琅满目,连最基础的统一都没有做到。


六、后记


作为一款国民级用户APP,铁路12306仿佛陪伴了80、90后的青春。还记得10年前老家是黑龙江和河北的大学室友,每年春运开启之前就为了回家的火车票犯愁,不仅要去遥远的火车站排队,很多时候还可能空手而回,那便是最初对12306的记忆。
如今十年过去了,12306解决了亿万人的出行抢票需求,让我们在春运的路上,可以轻松购买一张回家的票。但下一个十年,我更希望12360的产品团队,可以重视用户体验设计,让我们不再掉入那些体验陷阱。


作者:设计大侦探      来源:站酷



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

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



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



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

日历

链接

个人资料

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

存档