272023-2

6000字拆解丨花费10个亿，抖音如何设计世界杯专题？

作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。根据国际足联主席因凡蒂诺预测，2022年的卡塔尔世界杯赛事将会吸引到全球超过五十亿人观看，这一人数占全球总人数的比重超过60%。
以往球迷们观看世界杯，更多是通过电视或者央视频、优酷这种传统的互联网视频平台，而在2022年这个冬天，抖音花费10亿巨资，成为了国内首个获得世界杯直播版权的短视频平台。作为拥有6亿日活的抖音，将会如何跨界设计世界杯专题，让亿万球迷能在抖音享受四年一次的足球盛宴，本期设计大侦探，就来全面拆解抖音世界杯专题。

一、栏目入口
抖音世界杯的入口在抖音头部一级导航栏最左边，和周边、关注、商城以及推荐并列。世界杯的栏目首页从上至下主要分为5个部分，分别是轮播（当日热门赛事以及活动）、金刚区（包含赛程、积分榜、有奖预测和我的主队入口）、比赛直播（当日赛事）、名嘴聊球（签约足球大咖）、赛事热点（热点头条资讯）、热门球星（入驻足球巨星）、世界杯好物（周边商城和抖音生活服务）、重磅热播（抖音自制节目）、大家都在拍（平台用户自创视频）和视频信息流（世界杯专题相关视频）。

二、内容策划
抖音在内容策划方面，几乎把前央视解说团队都邀请过来了，比如黄健翔、段暄、刘建宏这些家喻户晓的的足球主持人，都在抖音单独负责至少一款足球综艺栏目。除了解说团队，抖音还邀请了众多跨界娱乐综艺大咖，为球迷一口气送上8个原创足球综艺节目。从这个版块可以看出，抖音对此次世界杯的重视度之高，就像卡塔尔为了举办世界杯投资2200亿美元一样，劣势可以用金钱弥补。
1. 内容专题
1.1 观赛指南
「观赛指南」是指在一场比赛开打之前，各方媒体对这场比赛进行的赛事分析和预测。足球这项运动，由于充满了竞技性，一场焦点比赛，从赛前到比赛，再到比赛后，都充满了无数话题。而观赛指南，可以为球迷提供完整的比赛情报和指南，为比赛做预热。
1.1.1 分组解析
「分组解析」是针对世界杯的8个小组（世界杯有32支参赛球队，分为8个小组，每个小组4支球队，前两名可以晋级到淘汰赛）进行出线形势分析。作为四年举办一次的比赛，对于每支球队来说，都是非常宝贵的机会，所以关于小组的出线分析也往往是世界杯的热门话题之一。从内容设计看，抖音的分组解析包含了专家预测（名嘴大咖）、小组赛程、历史数据（历史对战记录）、热门球员（小组热门球星）和热门动态（相关的足球资讯）五个内容。

1.1.2 赛程解读
「赛程解读」就是针对单场比赛进行解读，包含比赛前瞻（专业的足球分析）、专家点评（世界杯专家团，含金量高）、网友热议（精选网友的高质量分析）、近5场战绩、球队名单、球员PK（核心球员）、积分榜以及相关的最新足球资讯。从这个栏目的内容策划看，由于缺少足彩竞彩和有深度的内容，显得中规中矩，稍显严谨，欠缺互动。

1.2 比赛日报
「比赛日报」就是根据每天结束的比赛生成当天所有比赛的战报，这个页面包含了直播回放、图文战报、视频集锦、赛况详情、技术统计和积分榜等内容，球迷也可以切换不同的比赛查看当场比赛详细的战报。

1.2.1 直播回放
「直播回放」对于体育赛事来说非常重要，比如像深夜场的比赛，大部分球迷都很难熬夜观看，这个时候只能通过直播回放来观看比赛。抖音的「直播回放」提供了全场录播回放、全场集锦（分长集锦和短集锦）、球星集锦和精彩时刻集锦，可以满足不同用户的观看需求。

1.3 热议话题
当一场比赛结束以后，话题讨论的热度将会达到最高值，比如阿根廷输给沙特的比赛，全网球迷都在心疼梅西。抖音在「热议话题」的内容设计上，不仅有独立的图文专题页还有白岩松的「白说世界杯」短视频栏目，给球迷带来全方位的内容解读。

2. 视频节目
2.1 DOU来世界杯
「DOU来世界杯」是抖音官方自制的视频节目，这个节目合计29期，每天更新1期，内容非常丰富，包含比赛复盘、每日看点、球星球队故事和赛事预测等。从栏目定位看，这个栏目直接对标曾经央视体育最知名的《天下足球》栏目，更是邀请了主持多年《天下足球》的主持人段暄亲自负责，这不仅可以确保内容质量，还可以帮助抖音赢取众多80、90后球迷的好感（国内80%的80、90后球迷都是看着《天下足球》长大的），既卖专业，也卖情怀，一举两得。

2.2 宏哥侃球
「宏哥侃球」是资深体育解说员刘建宏独家打造的足球直播综艺，合计12期。刘建宏和段暄一样，是央视体育另一个王牌节目《足球之夜》的制片人和主持人，甚至是第一位获得“金话筒奖”的体育节目主持人。从内容定位看，这个栏目主要以刘建宏通过邀约足球名宿和名人明星聊天的形式，为球迷带来不同角度的比赛解读和话题讨论。从嘉宾阵容看，不仅邀请了李明、徐亮、徐云龙这些足球大咖，还邀请了苏醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可谓群星熠熠。

2.3 黄健翔谈
「黄健翔谈」是前央视主持人黄健翔的个人脱口秀节目，合计24期。从内容定位看，这个栏目主要是黄健翔针对每日比赛进行看点分析，讲述队伍、球员之间的渊源与故事，专业性较强，差异化低。

2.4 依然范志毅
「依然范志毅」是前国足名宿范志毅打造的直播节目。从内容定位看，这个栏目集合了脱口秀、电竞PK、国际球星挑战等娱乐内容，其次还会邀请02年世界杯国足的众多足球大咖一起聊球。范志毅作为前国足名宿，不仅知名度高，近年来在社交媒体平台也以独特的“范式辣评”成为了众多网友崇拜的偶像，话题热度非常高。

2.5 懂球大会
「懂球大会」是以段暄、黄健翔和刘建宏为常驻嘉宾，搭配各路懂球大咖赛前或赛后连线的足球直播节目。从内容定位看，这个节目主打前央视解说铁三角的卖点，再邀请其他足球嘉宾围绕每期的热门话题以直播火热开“吵”的形式为球迷们打造一款直播时代的另类足球节目。

2.6 黄家足球班
「黄家足球班」是黄健翔联手德云社打造的直播节目，合计12期。从内容定位看，这个节目把足球的专业性稀释，加入了相声的元素，从而拓宽用户人群，让大众都能看得懂，看得进去，感受到足球的乐趣。

2.7 大咖侃球
「大咖侃球」由抖音官方出品。从内容定位看，这个节目主要以邀请体育、文化、财经、商业等领域的名人大咖，围绕世界杯开展泛人文社会热点话题讨的论，旨在打造一个专业又具有趣味性、互动性的世界杯抖音脱口秀。不过这个节目话题宽度太广，目标用户不精准。

2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方赞助商海信独家打造的一款足球少年选秀节目，通过节目选拔足球热忱最突出的4名少年奔赴卡塔尔。这个节目邀请了李明、米卢等国足退役名将，还有柳岩、梁汉文这些娱乐明星，从嘉宾阵容看，这个节目以娱乐选秀为主，目前8期节目已全部更新结束。

三、比赛数据
历时29天的世界杯，将会进行64场比赛，最终决出冠军、MVP和金靴奖等。随着互联网泛娱乐的发展，相比过往大家主要通过电视观看比赛这样静态的形式，现在的足球比赛不仅拥有丰富的直播形式，而且每个平台都有自己独特的看球文化。
1. 直播间
抖音的比赛直播间，功能非常丰富，主要包含六个内容，分别是直播、聊天、阵容、赛况、看点和预测。
①「直播」就像视频弹幕一样，大家可以畅所欲言的一边看球一边聊天。在底部的聊天窗口，点击「分享」后，不仅可以保存本场比赛即时生成的精彩瞬间，还能邀请好友一起观看比赛直播，互动非常强。

②「聊天」这个功能，充分利用了抖音的社交属性，通过邀请好有，可以像建立群组一样快速创建一个直播聊天群，非常便捷。这个功能就像一个VIP包厢，为用户提供了一个相对私密的空间，满足不同用户的需求。

③「阵容」是指当场比赛的出场人员统计，包含首发阵容、球员统计和替补球员等信息，点击球员头像以后，可查看球员当场比赛的数据，包含进球、射门、传球成功率等，非常全面。

④「赛况」是指当场比赛的详细战况，包含各种技术统计，比如控球率、射门数、传球成功率等。

⑤「看点」就是把一场比赛的精彩时刻快速生成GIF，不仅可以作为当场比赛的赛况回放，也降低了用户传播的行动成本，吸引用户分享传播。

⑥「预测」就是竞彩，球迷可以通过金币预测当场比赛的胜平负、两队总进球数以及其他话题。

1.1 播放器
「播放器」的功能非常丰富，除了弹幕、倍速、视频画质和电视投屏这样的常见功能，抖音还支持多种类型的解说和视角方式。比如同一场比赛可以切换不同的主持人（央视主持人、退役运动员还有粤语主持），还支持球星、无障碍字幕、现场原声、战术机位、场馆全景等四种视角方式，观看体验非常丰富。

2. 数据
作为一项体育运动，比赛数据的统计分析至关重要。球迷需要查询世界杯的详细赛程、积分榜、射手榜、球队和球员的详细数据。
2.1 赛程
「赛程」主要为球迷提供世界杯的详细比赛赛程，用户可以直接预约比赛直播。当球迷预约后，抖音会一键生成比赛海报吸引用户传播，设计得非常巧妙。其次抖音的设计团队非常用心，相比其他产品的「赛程」栏目，他们会用一句简短的话来描述每场比赛的结果或前瞻，让「赛程」这个冰冷的栏目加入了温度。

2.2 积分榜
「积分榜」主要为球迷们提供8个小组的积分排行详细，包含胜平负场次、进失球数和小组积分。

2.3 晋级图
「晋级图」主要为淘汰赛服务，当小组赛结束以后，每个小组的前两名会进入淘汰赛，球迷可以通过这个图俯瞰世界杯的晋级明细路径。

2.4 射手榜
「射手榜」主要针对球员个人，统计的数据非常全面，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。

2.4.1 球员主页
「球员主页」就是足球运动员的详情落地页，主要包含六个部分，分别是基础资料（姓名、年龄、身高、体重、位置、身价、效力俱乐部等）、精彩集锦、球员单场表现、球员累计数据、球员赛程和球员百科。

2.5 球队榜
「球队榜」和「射手榜」一样，包含进球、助攻、射正、关键传球、红牌、黄牌等数据。

2.5.1 球队主页
「球队主页」就是参赛球队的详情落地页，主要包含六个部分，分别是基础资料（世界排名、总身价、平均年龄、历届最佳成绩等）、精彩集锦、球队单场表现、球队累计数据、球队赛程、热门球星、球队阵容、历史数据和球队百科。

3、互动
从2014年开始，世界杯就成了一个全民狂欢的盛宴，可谓全民参与，全民娱乐。由于受政策限制，抖音没有足彩版块，而是通过虚拟金币的形式设计了有奖预测和世界杯乐园、足球答人等游戏。其次为了鼓励用户参与到世界杯的盛宴中，抖音还设计了一套世界杯特效，提升用户的参与度。
3.1 有奖预测
「有奖预测」其实就是足球竞彩。足球竞彩作为支撑足球运动发展的重要支柱，也是全民世界杯的主要动力之一。由于国家政策等原因，抖音使用了虚拟的金球币用来作为竞彩的筹码，增加娱乐性。
①「有奖预测」的页面设计比较简单，头部为用户的钱包（金币和红包数量），主视觉为当前比赛的对阵双方，右上角是活动规则和预测记录，右下角是赚金钱币和预测榜。预测的内容主要是比赛的胜平负、总进球数以及其他根据当前比赛设计的竞彩内容，比如梅西会不会进球，比赛会不会出现头球等。

②整个预测页面的内容，相对而言比较简单，主要以提升用户参与度和用户拉新为目的。当用户确认预测后，抖音设计了一个用户拉新的功能，只要邀请好友助力就可以获得10万金币，如果是一个新用户，则可以获得3倍奖励。

3.1.1 钱包
「钱包」的内容主要分为三块，头部是数据板，包含金球币数量、现金金额（金球币可以兑换成现金，提现到自己的银行卡）、奖品数量、优惠券数量和抖音成就（类似勋章）；中间是「金球币抽奖」，用户可以使用金球币进行抽奖，奖品包含足球、优惠券等周边商品；底部是「公益版块」，用户可以使用金球币购买足球等方式助力贫困地区的乡村学校捐建足球场。

3.1.2 预测榜
抖音统计了全站预测榜的球迷，分为全国榜、本地榜和朋友榜。榜单的设计，能增加球迷的攀比心理，提升用户活跃度。

3.1.3 金币游戏
3.1.3.1 世界杯乐园
「世界杯乐园」是一款足球游戏，玩法比较简单，用户通过体力可以让角色不断前进获取福利。而用户获取体力的方式需要做任务、看比赛以及邀请好友。

3.1.3.2 足球答人
「足球答人」是一款问答竞技类型足球游戏。这款游戏设计得非常有创意，三人随机组队，通过答题的形式模拟足球比赛在线PK。第一个回答正确的用户会有模拟进球的画面，吸引球迷抢答，其次模拟世界杯的赛制，胜利后可以晋级下一轮，最终决出冠军，非常有趣。

3.2 我的主队
每个球迷都有自己喜欢的球队，这支球队就称为「主队」，比如一个喜欢阿根廷的球迷就会把阿根廷看作自己的主队。这种带有鲜明爱恨的元素，也是足球这项运动的魅力之一。用户进入「我的主队」以后，需要设置自己的主队，选定后，将会展示主队的赛况、比赛数据和视频集锦。用户如果更换主队，还需要消耗金币，可见抖音产品团队对球迷的研究足够透彻。通过建立「主队」，不仅可以增加用户的黏度，还能建立关系链接，提升用户的留存率。

3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷销售世界杯相关的周边商品，比如世界杯吉祥物、钥匙扣、手办、纪念品等物品。

3.3.2 吃喝玩乐
世界杯独有的文化就是喝着啤酒看比赛，所以「吃喝玩乐」这个版块接入了抖音的「生活服务」，球迷可以在抖音购买夜宵、小吃、奶茶等，非常方便。

3.4 大家都在拍
为了鼓励用户参与到世界杯的狂欢中，抖音为世界杯专门设计了一套视频特效，用户可以选择喜欢的特效录制，提升用户参与度。

四、总结思考
1.商业层
作为一个短视频平台，抖音为什么舍得花费巨资打造世界杯栏目，通过此次对抖音世界杯专题的拆解，我认为这是一次对针对80、90后群体的二次拉新和激活。从抖音重金邀请前央视主持人阵容看，抖音正在尝试通过世界杯这样能激发球迷情怀的载体把那些边缘用户重新拉回来。「DOU来世界杯」不仅直接对标央视体育曾经最知名的《天下足球》栏目，甚至连主持人都不变，既卖内容，更卖情怀。像笔者这样以前每周只会打开几次抖音的用户，通过此次世界杯的直播，变成了日均使用超过6个小时的重度用户，这在以前简直不敢想象。
当然，和四年前的优酷等互联网视频平台面临的情况一样，当世界杯硝烟散完以后，抖音又如何通过高质量的内容留住这部分用户群体，是一个问题。
2. 内容层
在过去，多数用户对抖音的印象是一个内容质量低劣、靠娱乐搞笑博眼球的短视频平台，但从此次世界杯的内容策划看，抖音不仅诚意十足，一口气推出8档原创足球直播节目，更是邀请了众多体育名嘴、知名运动员和跨界嘉宾输出高质量的内容。这对广大球迷来说，实在太过瘾了，已经很久没有这样的足球盛宴。而且相比过去传统的图文时代，加入了短视频传播媒介的世界杯，给了亿万球迷全新的看球体验，切换不同的解说风格、直播视角，在抖音直播间邀上几个好友，就可以一边聊天，一边看球，这样的看球体验，太爽了。
3. 体验层
抖音产品设计团队对世界杯专题的设计，无论是视觉、交互还是产品体验，都非常用心。比如在「赛程」页面，通过一句简短的赛况描述，不仅丰富了设计形式，还传递了设计的温度（其他的体育产品相比，「赛程」页面更像一个冰冷的机器，除了播报数据，没有任何情感）。还有像「足球答人」这样的游戏，完全以模拟世界杯晋级赛制的形式设计，在我首次试玩的时候，就开始为了“进球”进行“抢答”，最终拿下比赛冠军。这样让用户尖叫的设计，真的让人爱不释手。
参考文献：
当抖音进军世界杯，TikTok挖了NBA墙角
终于，我们都能在抖音看世界杯直播了
“抖”来世界杯：流量盛筵，意义几何？

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

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

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

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

评论(0) 浏览(1654)

272023-2

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

资深UI设计者

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

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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1985)

272023-2

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

资深UI设计者

一个SaaS产品的后台是如何设计的？作为知识付费行业的头部SaaS服务商，从2016年诞生不到7年时间，小鹅通注册客户数已经超过160万，终端访问用户人数超过7.8亿，毫无疑问成为了国内知识付费规模最大的SaaS产品。
为什么拆解小鹅通的后台？这是因为后台设计往往被多数产品、开发甚至老板忽略，他们甚至认为后台不需要设计，更不需要考虑用户体验，能把功能实现就可以交付。但我的观点恰巧相反，我认为一个SaaS产品设计最大的挑战和关键正是后台。它决定了运营者的工作效率和操作体验，即便你的功能再强大，如果用户不会用、不愿意使用，那么用户也不会续费，而续费，正如《SaaS创业路线图》作者吴昊在他书中的观点——SaaS的本质，就是续费。设计大侦探的第一个B端产品拆解，选择了工作量最大、最繁杂的后台，阅读时间长，非常乏味，但如果你认真啃完，你对SaaS产品、后台设计、B端设计不会再陌生。都说良药苦口，这碗药，廖尔摩斯先干为敬。
一、导读
1. 内容结构
小鹅通的后台拆解包含四个部分，分别为导读、产品画像、设计拆解和总结，内容篇幅超过4万字，阅读时间较长，所以拆分为4篇文章发布，建议收藏阅读。

2. 适读人群
第一类，产品经理/UI/交互设计师，通过对小鹅通后台产品的深度拆解，跳出执行层，培养后台设计的全局观，从功能价值、应用场景、业务流程和用户体验多维度去学习和思考一个头部SaaS产品的后台如何设计。
第二类，SaaS产品及知识付费从业者，获取一份专业、完整、有深度价值的SaaS竞品设计参考。

3. 分析模型
第一，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于分析产品的功能价值。
第二，尼尔森十大原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计，这个原则主要用于诊断后台设计的用户体验。
第三，其他设计基础理论，包括费茨定律、格式塔原则、席克定律等，主要用于判断后台设计的易用性。

4. 拆解步骤
SaaS产品的后台的设计不仅复杂，而且很多功能如果不亲自体验根本没法理解，所以针对小鹅通后台的拆解，我分为以下三个步骤进行
第一，亲自上手实操体验操作。对每一个功能版块进行了全面的实操体验，弄清楚了才开始拆解，绝非走马观花。
第二，结合官方帮助文档创作。在体验小鹅通产品的时候，有很多功能必须结合帮助文档才能理解，甚至由于权限和内容问题，部分功能没法体验，只能靠官网介绍来理解。针对每一个功能，严格按照「功能介绍-功能价值-使用场景-页面内容-核心功能-操作流程」的结构去描述，旨在让产品设计师看懂这个功能设计的价值和细节。
第三，深入思考产品设计细节。在拆解完每一个功能，我都会加入自己的思考，主要分为细节侦查（值得我们学习的细节）、迭代建议（个人认为可以优化的地方）、设计思考（某个功能带给我的启发）、体验陷阱（用户体验糟糕地方）和体验小结（针对某个功能版块进行全面总结），如果你浏览的是腾讯文档，非常欢迎你可以以添加批注的形式和我一起讨论。

5. 阅读建议
由于内容篇幅太长，强烈建议你可以申请小鹅通免费试用账号一边阅读一边体验，这样对整个后台的设计才更深有体会。
二、产品画像
1. 产品简介
小鹅通是知识产品与用户服务的数字化工具，包含知识店铺、企业直播、企业培训、企微助手等多款产品，可以为有线上经营、商业变现、私域运营、用户服务等需求的企业，提供一站式技术服务，助力企业完成数字化升级。根据官方数据显示，截止到2023年2月，小鹅通注册客户数已经超过160万，终端访问用户人数超过7.8亿，是目前国内知识付费客户数量最多、规模最大的SaaS产品。

2. 用户角色
用户角色是指使用操作小鹅通后台的用户，主要分为运营者和店铺销售。
2.1 运营者
店铺的运营者主要负责店铺装修、商品管理、用户运营、数据分析、活动策划、拉新引流等工作内容，是小鹅通后台主要使用的用户群体。
2.2 店铺销售
店铺销售会通过企业微信和CRM工具使用小鹅通，不过他们主要通过企业微信的小鹅通应用进行工作，很少涉及后台操作。

3. 信息结构
从信息结构看，小鹅通后台主要包括店铺、圈子、直播、内容、商品、营销、交易、用户、CRM、企微、数据、应用、设置和服务14大版块（感谢探友@miki对小鹅通后台信息结构的梳理）。

三、设计拆解
小鹅通的后台非常庞大，包括了店铺、圈子、直播、内容、商品、营销、交易、用户等14大版块，其中每一个版块又包含若干功能，体验起来非常繁杂，很容易陷入焦虑感。所以我按照一个知识店铺从0到1装修、添加内容、店铺推广和运营的步骤把小鹅通的后台拆分为8个服务，然后再对每个版块的内容进行详细拆解。

1. 初始设置
当我从官网开通小鹅通的知识店铺以后，进入到管理后台，面对如此繁杂的功能，我想做的第一件事，就是对我的店铺进行基础设置，我得让用户知道这个店铺叫什么名字。
1.1. 店铺设置
「店铺设置」为商家提供了店铺的基本信息设置，比如店铺信息、品牌形象、用户账号设置等。
①「店铺信息」提供店铺名称、店铺管理员和主营类目的设置，非常基础。
②「用户账号设置」提供在使用系统过程中的各种登录偏好设置，比如登录设备限制，可自定义学员使用同一账号在同一时间不同浏览器上同时登陆的情况
③「引导设置」提供了引导用户关注公众号、加入社群、收藏店铺、添加客服和添加手机号等功能，对新用户的首次访问至关重要。
④「功能配置」支持用户对商品销量、播放量/浏览量、评论审核、严禁词、视频播放器、商品评价、买家申请售后等功能进行设置，可以看出系统非常完整和灵活。

迭代建议
用户的短期记忆一般不会超过5秒，所以在体验「设置」这个栏目的时候，我就发现小鹅通的功能太过繁杂，这对新手商家的入门有很高的学习成本。这个栏目的内容其实可以拆分为基础设置、高级设置这样的阶梯式内容，有助于缓解新手用户的焦虑。
1.2. 员工管理
「员工管理」是为商家提供新建员工、运营角色管理、员工权限设置的功能，这个栏目主要帮助商家管理自己的运营团队。

1.3. 角色管理
「角色管理」包含了系统默认的多个角色，比如高级管理员、普通管理员、财务、老师、课程顾问、教务专员、销售员等，并且可以对每个角色进行权限设置，另外系统也支持商家新增自定义角色，满足商家各种运营需求。

1.4. 操作日志
「操作日志」记录了整个系统管理员的登录和操作内容记录，日志系统作为一个后台系统必不可少的模块，它可以记录下系统所产生的所有行为，这有助于商家对系统运行监管，并且可实时监控员工在系统中的敏感操作，加强员工培训和管理。

1.5. 消息推送
「消息推送」是商家建立外部触发最好的方式，这个版块主要为商家提供各种场景的消息推送设置，小鹅通支持服务号代发、短信通知和APP推送通知三种类型。

1.6. 体验小结
在对「设置」模块的实操体验中，感受到小鹅通的功能非常强大，甚至功能多得有点让人透不过气，这对新手商家来说，会产生很多的焦虑和压力，我迫切需要一份最基础、最简洁的新手引导指南。这也突然让我想起了当我申请小鹅通体验账号时，客服专员向我多次提及给我做新手操作培训，但我都婉拒了，也许对于一个头部SaaS产品来说，客服专员的培训是客户体验过程中必不可少的一个环节，但是我认为好的设计，其实不需要太多的学习成本。

2. 添加内容
当我把店铺的基础信息设置好以后，接下来，就需要为我的知识店铺准备上架的内容了。我找到了「内容」这个模块，发现小鹅通支持的内容形式非常多，从视频、音频到图文专栏，把常见的内容形式都涵盖了。
2.1. 内容
「内容」版块包含内容类型和互动工具两个部分，商家可以在「内容类型」选择自己要发布的形式发布内容，而「互动工具」则是帮助商家课程运营和学生管理的工具。
2.1.1. 内容类型
小鹅通支持视频、音频、图文、电子书、AI互动课、专栏、训练营和会员7种类型，几乎覆盖了常见的内容形式。
2.1.1.1. 视频
「视频」是最常见的内容形式之一，商家可以把录制好的课程视频上传到这个栏目，就可以开始向学员销售。

2.1.1.1.1. 新建视频
「视频」包含基本信息、课程内容、所属组合课、商品信息和状态设置五个部分。
①在「基本信息」，商家需要填入商品名称等基本信息；
②在「课程内容」，管理员可对视频的播放进行设置（比如课程未学完禁止拖动进度条和倍速播放等），还可以对内容设置保护（禁止文字防复制和开启防录屏跑马灯）。
③「所属组合课」是提供商品和其他内容（专栏、会员和训练营）关联，比如新添加的商品属于某个付费专栏，那么就可以关联，提升效率。
④在「商品信息」，可以设置商品的售卖方式，支持免费、付费、加密和指定学员。针对付费视频，还可以支持片段试看，提升付费转化。
⑤「状态设置」是指在添加完商品后，商家可选择立即上架、定时上架或暂不上架，比如商家在准备某个促销活动的时候，可以提前编辑商品，设置定时发布即可。

2.1.1.1.2. 视频管理
①「视频」添加成功后，在「视频」栏目页，可以查看商品的详情，对商品进行编辑，分享、下架、复制和删除等。
②「分享」是指商家可以把商品的链接、二维码等信息直接复制分享给好友，同时也起到了预览的作用，这是一个公用的组件，在其他商品和版块同样适用。

2.1.1.1.3. 视频详情页
「视频详情页」主要分为课程设置、运营设置、学员列表和数据分析四块内容。
①「课程设置」就是对课程的相关信息进行设置，相当于对内容进行二次编辑。
②「运营设置」从四个解为一个通用的表单；「CRM分配」是指可以把浏览课程的学员自动分配给企业的CRM销售人员；「私域引流」是指可以引导用户扫码加群，提高课程服务质量和商家对学员的运营能力。

③在「学员列表」，可以查看当前购买商品的所有学员信息，包括购买时间、学习进度等信息，系统也支持商家手动添加可学习课程的学员。

④在「数据分析」栏目，可以查看商品的「学习效果」和「交易数据」，比如商品的订阅人数、学习人数、完课率、学习趋势图等，通过这个栏目，可以帮助商家对用户的学习进行深入的分析，提升运营效率。

设计思考
在初次添加店铺内容的时候，对很多功能板块都不熟悉，比如CRM分配、超级会员等，虽然能感受到小鹅通系统的强大，但对于刚入手的商家，则会产生很深的焦虑，不知道这些功能如何设置和使用，也无法感受到这些功能对店铺运营的帮助。
2.1.1.2. 音频
「音频」也是一种常见的内容形式，可以设计讲书、广播等产品，用户可以在地铁、公交等场景收听。「音频」的新建流程、商品管理功能和「视频」相似，我们不再赘述。

2.1.1.3. 图文
「图文」也是一种常见的内容形式，可以为学员提供付费阅读等类型产品，「图文」的新建流程、商品管理功能和「视频」相似，我们不再赘述。

迭代建议
付费阅读其实是知识创作者非常喜欢的方式，小鹅通虽然设计了这个功能，但前端的界面设计并没有根据图文内容传播的特点设计，所以用户体验并不理想，显得非常鸡肋。
2.1.1.4. 电子书
「电子书」对于出版社等用户群体，是一个刚需功能。在上传电子书文件以后，系统可以自动解析书籍章节，轻松完成电子书在线管理和售卖。其次在店铺前端，用户可在手机端阅读，支持区域触摸翻页、章节试读、划线、书签、更换背景等功能，阅读体验非常友好。「电子书」的新建流程、商品管理功能和「视频」相似，我们不再赘述。

2.1.1.5. AI互动课
随着近两年AI技术的发展，小鹅通也加入了AI互动课的内容形式。商家可以利用AI互动形式的课程内容，搭建具有沉浸式场景的课程学习形式，实现个性化、趣味性、强互动的授课形式，不过搭建成本相对较高，更适合于有特定需求的客户。

2.1.1.5.1. 新建流程
①「AI互动课」的新建流程分为三个步骤，分别是填写基本信息、制作课程内容和填写售卖信息。
②在「基本信息」，商家需要输入课程名称和详情页等信息。
③进入「课程内容」以后，左侧提供了内容组件（文字、图片、音频和视频）、题目组件（单选题、多选题、不定项、判断题和填空题）和其他组件（章节标题和附件），商家可以根据自己的需求加入组件进行设计。
④商家在填写售卖信息以后，就可以进行上架销售。

2.1.1.6. 专栏
2.1.1.6.1. 专栏
「专栏」可以将多个单品课程打包成系列课销售，比如常见的付费专栏、连载小说、有声读物等。「专栏」建立后，进入详情页，可以在「目录管理」添加专栏商品，还可以对专栏的商品设置排序和设置试看。其他功能和「视频」相似，我们不再赘述。

2.1.1.6.2. 大专栏
「大专栏」就是「专栏」的父级，可以将多个专栏进行打包，组合成专项学习专题，打造学员深度系统学习方案。

2.1.1.7. 训练营
「训练营」相比「课程」，是一个动态的服务。商家根据某个学习主题，集中式、计划式、督学式地学习。「训练营」也是一种常见的引流手段，通过打卡、签到、学习，可以快速帮助商家进行传播拉新。

2.1.1.7.1. 新建训练营
①商家建立训练营以后，需要建立营期才能开始招生。
②营期的建立分为营期基础信息、营期课程和售卖信息三个步骤。在「营期基础信息」，需要设置开课信息，包括招生时间和开课时间；其次支持设置三种目录解锁模式，自由模式（无门槛自由学习）、闯关模式（完成任务才能继续学习）和日期解锁（每天只能学习一定数量的课程）。

③在「营期课程」，商家需要添加训练营的学习任务，可以加入店铺的课程内容，还可添加打卡、考试等助学工具，增强督学效果，提升用户活跃度。

2.1.1.8. 会员
「会员」是商家可以打包特定商品内容（包括专栏和商品）进行销售，它的功能流程和「专栏」功能相似，在建立「会员」后，进入详情页的目录管理才能添加课程商品。这个功能可以帮助商家聚集一定量级的忠实粉丝，实现店铺的稳定收入。

设计讨论
不知道是不是语义的问题，我对「会员」这个功能有很多不理解，首先感觉和「专栏」很相似，其次和「超级会员」也有点傻傻分不清楚，所以在体验的过程中，花了很多时间去学习研究。
2.1.1.9. 体验小结
从小鹅通支持的7种内容形式来看，它几乎覆盖了所有的知识付费内容，视频、音频、电子书、专栏，甚至还有AI互动课。这足以满足各种知识用户人群的内容要求，不管你是销售录播课、音频课还是文字专栏，小鹅通真正的实现了——一分钟拥有自己的知识店铺。
2.1.2. 互动工具
「互动工具」包含了打卡、考试、练习、作业本、题库、证书、表单、活动管理、随堂检测、测试活动和付费问答11种工具。
2.1.2.1. 打卡
「打卡」是一个提升用户活跃度的运营工具，通过持续的打卡输出，不仅可以帮助学员养成一些比较好的行为习惯，还可以帮助商家提升用户付费转化。「打卡」分为日历打卡、作业打卡和闯关打卡三种形式。

2.1.2.1.1. 日历打卡
「日历打卡」是以“天”为单位的打卡模式，学员需要每天在有效时段内提交打卡内容，比如每日英语学习打卡、早睡打卡等。
a. 新建流程
①「日历打卡」的建立有两个步骤，分别是设置打卡信息和打卡介绍设置。在「设置打卡信息」，分为基本信息、打卡规则和其他设置三个内容。「基本信息」可以设置打卡的起止日期、打卡时段、提醒方式、每日打卡次数、可补打卡次数、参与条件和打卡规则等；「打卡规则」主要是设置用户打卡的内容类型和范本；「其他设置」可以帮助商家关联超级会员和指定商品文件。
②在「打卡介绍设置」步骤，需要添加打卡的封面图和详情页介绍，完成后打卡建立添加成功。

细节侦查
如果不是亲自新建一次「打卡」，你根本无法理解一个小小的「打卡」功能竟然会如此复杂，包含的场景和功能竟然会有这么多。
b. 打卡详情页
「打卡」建立以后，可以进入打卡的详情页，主要分为日记管理、任务管理、学员管理、分组管理、助教管理、激励设置、运营设置和数据分析8块内容。
①「日记管理」主要指用户在前端的日记打卡，老师可以根据学员的日记进行评论、置顶、加精和删除，还支持批量导出日记。

②「任务管理」是指给学员布置学习任务，帮助学员更好地学习。

③「学员管理」主要提供对打卡用户的管理，比如查看学生打卡详细资料和暂停打卡等。
④「分组管理」支持老师对打卡的学员进行分组，提高管理效率。
⑤「助教管理」支持老师添加助教，助教可以对学生打卡进行点评、删除和精选等操作。

⑥「激励设置」是指为了鼓励学生坚持打卡，老师可以设置证书、返学费和积分这样的形式来吸引学生参与（证书和积分我们在下面会单独讲解）。「返学费」是一个打卡活动中常见的营销方式，学员完成指定的任务就可以拿到打卡费用的返现，这样不仅可以筛选精准用户，也可以提高用户的打卡积极性。

⑦「运营配置」主要包含配置日签和邀请卡两个部分。「日签」是一种吸引用户传播的手段，通过个性化和精美的日签设计，不仅可以体现活动特色，还能激发学员的收藏欲望，最终吸引用户主动传播，拉新引流。「邀请卡」也主要是为了激发学生传播引流，不仅设计了精美的邀请卡片，还支持老师自定义设计，以及直接引流自私域社群。

⑧「数据分析」是对整个打卡的数据进行全面的分析统计，包括当天打卡人数、打卡次数、新增学员、点赞数、评论数、加精数等等，通过精准的数据分析，可以为商家运营方案提供支撑。

2.1.2.1.2. 作业打卡
「作业打卡」是以布置“作业”的形式打卡，这种打卡方式可以加强教学质量的检验，让学生产生完成作业的紧迫感，督促学生进行学习。
2.1.2.1.3. 闯关打卡
「闯关打卡」是以“关卡”作为单位的打卡模式，这种打卡形式由于自身具备游戏的挑战性，所以能够有效刺激学生为了拿到更好的成绩而努力打卡，从而提升用户参与度和积极性。
2.1.2.2. 考试
「考试」是用来检测用户学习效果的学习工具，商家可以通过考试情况得到学习效果反馈，可根据考试反馈进行后续课程优化。

2.1.2.2.1. 新建考试
「考试」的建立分为三个步骤，分别是设置考试信息、选择试卷和发布。
①「设置考试信息」又分为基本信息、信息采集、考试设置、题目分值和结果设置五个内容。「基本信息」需要填入考试的基本信息，选择需要关联的课程；在「考试设置」，老师可设置参考考试的时间、考试时长、考试次数等；在「结果设置」，可以选择考试完就展示成绩、题目和答案。
②在「选择试卷」步骤，可以创建新试卷，也可以从试卷库中选择已设置好的试卷，其次还可以设置考试通过分数的成绩。
③添加试卷以后，管理员可选择立即发布、定时发布以及开启微信服务号通知，帮助学生可及时获取考试的消息通知。

2.1.2.2.2. 考试管理
在学生开始考试以后，后台会生成考试数据，商家可查看考试的详细情况，包括批阅、统计分析、老师管理、设置证书等。

2.1.2.3. 练习
「练习」满足了商家售卖已有题库题目，为学员提供自主刷题练习工具的需求，而通过反复练习，可以提高学员学习效果，有助于提升用户的活跃度和留存率。

2.1.2.3.1. 新建练习
「练习」的建立包含基本信息、练习设置、商品信息、私域引流和信息采集五个步骤。
①在「练习设置」，管理员需要关联题库，设置答题的出题顺序（包含随机和按顺序），题目数量和考试难度；
②「商品信息」可以设置「练习」是否付费，或需要参与关联课程才能学习；「私域引流」和「信息采集」是公共组件，我们在上文已经解读过，不再重复。

2.1.2.3.2. 练习管理
学生开始练习以后，后台可查看学员的练习数据，包括练习参与人数、每道题目的正确率等，这些数据可以帮助商家及时调整运营方案，或针对性对学生进行讲解授课。

2.1.2.4. 作业本
「作业本」主要帮助老师和学员在课程后续实现互动和答疑，不仅可以加强学生对知识的学习，帮助老师了解学员学习的状态，更能提升用户活跃度。

2.1.2.4.1. 新建流程
①管理员需要先建立一个「作业本」，这个流程比较简单，输入名称以后，选择关联课程，还支持关联「圈子」（一个用户运营的重要功能），老师布置的作业会在课堂互动和作业动态显示。

②「作业本」建立以后，管理员可以布置「作业」。「作业」分为手动布置（新建）和题库布置（从现有的题库中直接选择）。「手动布置」需要输入作业名称和作业内容，支持上传图片和音频，填写完成后，作业创建成功。

2.1.2.5. 题库
「题库」需要配合作业、考试和练习场景使用，为这些工具提供数据支撑。

2.1.2.5.1. 题库
①「题库」支持添加单选题、多选题、不定项选择题、判断题、填空题、问答题和材料题等多种类型。添加也非常简单，管理员选择好题目类型以后，填入内容就能新建成功。
②「批量导入」是为管理员提供批量输入题目的工具，按照系统提供的输入范例格式，系统可以一键识别出题目，轻松录入。
③「Excel导入」也是一种常见的导入形式，不过需要按照系统标准的批量导入模版，才能实现批量导入。

2.1.2.5.2. 试卷库
①「试卷库」是题库中题目的组合，可以看作是「题库」的父级。管理员可按照自己的需要把题目手动或自动组合成试卷，在考试、作业等场景中就能及时调用，提升工作效率。
②「试卷库」的新建流程包括设置试卷信息和组卷两个步骤。在填写完试卷基础信息以后，在「组卷」步骤，可以选择「手动选题」和「系统抽题」。「手动选题」就是管理员从题库中逐一手动选择，准确率较高，而「系统抽题」则是系统根据管理员的题型设置随机抽题，具有随机性。

2.1.2.6. 证书
「证书」可以为学生带来成就感，激励学生坚持完成任务，当学员通过考试、完成作业以后，管理员可以向学员颁发证书，最终提升用户活跃度。

①「证书」的建立包含基本信息、发放规则、证书样式、证书信息、发证信息和证书分享六个内容。
②在「基本信息」，管理员可选择证书类型，包括考试证书、打卡证书、圈子证书等，另外，证书需要关联对应的考试。
③在「证书样式」，系统提供了数十种系统样式，管理员可根据自己的偏好和品牌VI选择，其次也支持自定义样式，上传设计好的背景图片即可生成。
④在「证书信息」，管理员可以编辑证书标题、获奖文案等，还可以加入鼓励文案，吸引用户传播分享。
⑤在「发证信息」，可加入发证日期、证书编号和发证印章等，突出真实性。
⑥在「证书分享」，可以添加分享语和二维码，通过学生的分享，为商家拉新引流。

2.1.2.7. 表单
「表单」是运营者用于发起问卷调研，自定义收集用户信息的社群功能。它可以帮助商家收集用户需求和反馈信息，通过对用户的调研分析，进一步设计和优化运营策略，从而为用户提供更精准的服务

2.1.2.7.1. 新建流程
「表单」的建立分为三个步骤，分别是编辑表单、表单设置和表单发布。
①「编辑表单」分为三块内容，左边是组件和外观，管理员需要从这里选择内容，比如单选、文本框等。「组件」包含基础组件（单选、多选、下拉菜单、文本框等）、描述分割（文本描述、图片、分隔栏）和个人信息（姓名、性别、年龄等），「外观」可以设置表单底色、标题、选项内容字体大小和颜色。选中内容以后，中间为表单编辑区域，可以实现可视化编辑，包括调整顺序、删除等。右侧可以设置表单的字段和逻辑，包含基础设置、选项设置、逻辑显示规则等。
②在「表单设置」，可以设置用户提交的次数、回收方式（支持定量、定时回收）、微信分享信息和私域引流。
③在最后一步「表单发布」，需要关联对应的内容，比如相关视频、课程、专栏、圈子、训练营等内容，关联成功后，表单就可以发布。

2.1.2.8. 活动管理
在店铺的运营中，举办线下活动必不可少，「活动管理」就是为了解决这个场景而设计。管理员可以使用「活动管理」功能组织线下活动，一站式完成线上发布活动信息、用户报名、收集报名用户信息、管理报名情况、现场签到等流程。

2.1.2.8.1. 发布活动
「活动」的发布包含基本信息、票务设置、座位设置、报名信息设置和私域引流六个部分。
①在「基本信息」，管理员需要填入活动的名称、地点、时间、关联的课程等信息；②在「票务设置」，可以添加免费票和收费票，设置票种的展示规则等；③「座位设置」部分，还可以开启自动排座，活动座位由系统自行分配；④在「报名信息设置」，管理员可以根据自己的需求灵活配置用户报名的信息，非常方便；⑤「私域引流」可以帮助管理员在活动报名前后将潜在用户引流至商家的私域流量池。

2.1.2.8.2. 名单管理
活动建立成功后，商家就可以发布活动，「名单管理」就是活动报名的详细数据，包含报名管理和签到管理。

a. 报名管理
「报名管理」主要包含了所有活动报名的数据管理，比如待审核、报名成功等，管理员可以在这个栏目查看报名用户的详细信息。
b. 签到管理
「签到管理」有两种形式，一种是用户自行扫码签到，系统会生成活动的二维码，管理员向用户展示扫码即可；另一种是商家主动扫码核销，工作人员进入票券核销页面以后，就可以对报名的用户进行扫码核销。
2.1.2.9. 随堂检测
「随堂检测」是一个协助老师校验学生学习质量的辅助工具，它不仅可以提升学生对课堂知识的学习和巩固，还能有效防止学员挂机学习，提升学习效率。

2.1.2.10. 测试互动
「测试互动」是一个通过设置轻量级的在线趣味测试，刺激用户活跃的社群玩法。运营者可根据用户特性设计测试题目，激发用户好奇心，活跃已沉淀的粉丝，增强学习过程的互动乐趣，同时可以设置根据测试结果给用户推荐课程。

2.1.2.10.1. 新建流程
「测试互动」的新建包含了设置测试信息、添加题目和结果页设置三个步骤。
①在「设置测试信息」，运营者输入测试名称、简介和设置有效时间；
②在「添加题目」步骤，需要加入测试活动的题目，支持单选和多选；
③在「结果页」设置，需要设置测评结果，并可以向用户推荐指定的课程，进行付费转化。

2.1.2.11. 付费问答
「付费问答」是一个为商家增加变现的工具，学生付费向老师提问，获取一对一答疑。「付费问答」需要先创建一个问答专区才能开启，有点像建立一个问答专栏。当用户在前端购买问答服务以后，运营者可以在手动邀请答主进行答疑。其次这个功能也设计得很完善，还支持设置用户围观价格和围观分成。

2.1.2.12. 体验小结
在体验完这11个互动工具以后，我开始感受到小鹅通这个工具的魅力。从引流到激活、从留存到传播，这11个工具几乎能满足一个知识店铺运营多维度的需求。而让我最惊叹的是小鹅通产品的设计细节，比如一个普通的打卡功能，如果只是从前端体验看，你根本无法想象这些小功能的后台设置其实有这么复杂。而小鹅通为了降低商家的运营成本，几乎支持每一个功能版块自定义，给我最大震撼的就是「证书」这个功能，不仅提供多种证书设计样式，连证书内容的每一个字段，都可以在后台自行输入，无需任何加工，实在是太方便了。
2.2. 商品
「商品」主要指实物商品和服务类商品的发布和管理，如果商家有周边商品，可以通过实物商品来上架，服务类商品则是指虚拟服务，比如1V1咨询、设计指导这样的虚拟服务。「商品」栏目的功能比较简单，我们就不过多赘述，大家可以亲自体验。

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

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

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

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

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

评论(0) 浏览(1794)

212023-2

vuex存储与本地储存（localstorage、sessionstorage）的区别

前端达人

1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景：vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。

3.永久性：当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。

注：大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。

vuex是存储在页面上的变量，说到底还是个Object，刷新页面就清空了。而storage是存储在浏览器的，和页面就无关了，刷新页面也不会清空

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

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

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

评论(0) 浏览(1285)

212023-2

如何在线Word转成PDF格式

前端达人

我们经常会将Word转换成PDF，下面给大家介绍一种很不错的Word转PDF格式的方式。

打开浏览器搜索speedpdf找到并打开在线转换工具首页，选择主页上的Word转PDF进入转换（也可以点击上方所有工具字样，选择Word转PDF进入）。

将需要转换的Word文档添加上传后，点击进度条后面的转换按钮，就可以开始转换了，等待转换完成后点击下载箭头即可。

如果转换前有登录账户，还可以通过点击登录头像处，选择账户，在转换记录中查看转换状态和下载转换后的文档。

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

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

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

评论(0) 浏览(1482)

202023-2

【vue2】对路由的理解

一、vue路由概念

1.概念：

确保我们在vue中实现页面跳转到我们所想的页面

2.初体验：

可以看到当我们点击不同的组件的时候我们实现了路由的功能：在vue中实现页面的跳转

注意看，当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法

二、路由基础

1.路由模式

路由两种模式

路由书写写法：

在index.js中的router对象中书写




    

        

            

            

        

        

            
                const router = new VueRouter({
            

        

    

    

        

            

            

        

        

            
                mode: 'history',//默认是hash模式
            

        

    

    

        

            

            

        

        

            
                })

hash模式：

路由例如: http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

两种模式的区别：

外观：hash的url有个#符号，history没有，history外观更好看。
刷新：hash刷新会加载到地址栏对应的页面，history刷新浏览器会重新发起请求，如果服务端没有匹配当前的url，就会出现404页面。
history模式以后上线需要服务器端支持, 否则找的是文件夹

2.路由写法

起步 | Vue RouterVue Router3官网介绍：起步 | Vue Router

①手动配置（较少使用）

下载与导入vue-router

导入组件

创建routes路由规则（路径和页面一一对应）

创建路由对象

把路由对象挂载到App.vue

在页面写路由导航router-link （生成a标签）

在页面写路由出口router-view (生成占位盒子，用于显示页面内容)

下面开始我们相关文件的创建

1.创建我们的脚手架(此时没有选择Router)：

2.准备我们的App.vue文件：




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <!-- 顶部导航栏 -->
            

        

    

    

        

            

            

        

        

            
                <div class="footer_wrap">
            

        

    

    

        

            

            

        

        

            
                <a href="#/find">发现音乐</a>
            

        

    

    

        

            

            

        

        

            
                <a href="#/my">我的音乐</a>
            

        

    

    

        

            

            

        

        

            
                <a href="#/friend">朋友</a>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                <!-- 下面内容 -->
            

        

    

    

        

            

            

        

        

            
                <div class="top"></div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                methods: {}
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                body,
            

        

    

    

        

            

            

        

        

            
                html {
            

        

    

    

        

            

            

        

        

            
                margin: 0;
            

        

    

    

        

            

            

        

        

            
                padding: 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap {
            

        

    

    

        

            

            

        

        

            
                position: fixed;
            

        

    

    

        

            

            

        

        

            
                left: 0;
            

        

    

    

        

            

            

        

        

            
                top: 0;
            

        

    

    

        

            

            

        

        

            
                display: flex;
            

        

    

    

        

            

            

        

        

            
                width: 100%;
            

        

    

    

        

            

            

        

        

            
                text-align: center;
            

        

    

    

        

            

            

        

        

            
                background-color: #333;
            

        

    

    

        

            

            

        

        

            
                color: #ccc;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap a,
            

        

    

    

        

            

            

        

        

            
                span {
            

        

    

    

        

            

            

        

        

            
                cursor: pointer;
            

        

    

    

        

            

            

        

        

            
                flex: 1;
            

        

    

    

        

            

            

        

        

            
                text-decoration: none;
            

        

    

    

        

            

            

        

        

            
                padding: 20px 0;
            

        

    

    

        

            

            

        

        

            
                line-height: 20px;
            

        

    

    

        

            

            

        

        

            
                background-color: #333;
            

        

    

    

        

            

            

        

        

            
                color: #ccc;
            

        

    

    

        

            

            

        

        

            
                border: 1px solid black;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .footer_wrap a:hover,
            

        

    

    

        

            

            

        

        

            
                span:hover {
            

        

    

    

        

            

            

        

        

            
                background-color: #555;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .top {
            

        

    

    

        

            

            

        

        

            
                padding-top: 62px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                .footer_wrap .router-link-active {
            

        

    

    

        

            

            

        

        

            
                background-color: #000;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

3.在src下面新建views文件夹并创建我们需要的.vue文件

3.1 find.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <div class="nav_main">
            

        

    

    

        

            

            

        

        

            
                <router-link to="/Ranking">排行</router-link>
            

        

    

    

        

            

            

        

        

            
                <router-link to="/Recommend">推荐</router-link>
            

        

    

    

        

            

            

        

        

            
                <router-link to="/SongList">歌单</router-link>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <div style="1px solid red;">
            

        

    

    

        

            

            

        

        

            
                <router-view></router-view>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'find',
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                .nav_main {
            

        

    

    

        

            

            

        

        

            
                background-color: red;
            

        

    

    

        

            

            

        

        

            
                color: white;
            

        

    

    

        

            

            

        

        

            
                padding: 10px 0;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main a {
            

        

    

    

        

            

            

        

        

            
                text-align: center;
            

        

    

    

        

            

            

        

        

            
                text-decoration: none;
            

        

    

    

        

            

            

        

        

            
                color: white;
            

        

    

    

        

            

            

        

        

            
                font-size: 12px;
            

        

    

    

        

            

            

        

        

            
                margin: 7px 17px 0;
            

        

    

    

        

            

            

        

        

            
                padding: 0px 15px 2px 15px;
            

        

    

    

        

            

            

        

        

            
                height: 20px;
            

        

    

    

        

            

            

        

        

            
                display: inline-block;
            

        

    

    

        

            

            

        

        

            
                line-height: 20px;
            

        

    

    

        

            

            

        

        

            
                border-radius: 20px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main a:hover {
            

        

    

    

        

            

            

        

        

            
                background-color: brown;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                .nav_main .router-link-active{
            

        

    

    

        

            

            

        

        

            
                background-color: brown;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

3.2 my.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <img src="../assets/my.png" alt="" width="100%">
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'my',
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style>

3.3 friend.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div>
            

        

    

    

        

            

            

        

        

            
                <ul>
            

        

    

    

        

            

            

        

        

            
                <li>这是当前页面 query 接收到的参数:
            

        

    

    

        

            

            

        

        

            
                <span>姓名：{{ $route.query.name }}</span> --
            

        

    

    

        

            

            

        

        

            
                <span>年龄：{{$route.query.age}}</span> 
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                <li>这是当前页面 params 接收到的参数:
            

        

    

    

        

            

            

        

        

            
                <!-- <span>姓名：{{ $route.params.name }}</span> -- 
            

        

    

    

        

            

            

        

        

            
                 <span>年龄：{{ $route.params.age }}</span>   -->
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'friend',
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </style>

3.4 notfound.vue




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <div class="box">
            

        

    

    

        

            

            

        

        

            
                <h1>这是一个 404 页面</h1>
            

        

    

    

        

            

            

        

        

            
                <img src="../assets/404.png" alt="">
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: 'notfound',
            

        

    

    

        

            

            

        

        

            
                data() {
            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style scoped>
            

        

    

    

        

            

            

        

        

            
                .box {
            

        

    

    

        

            

            

        

        

            
                display: flex;
            

        

    

    

        

            

            

        

        

            
                flex-direction: column;
            

        

    

    

        

            

            

        

        

            
                justify-content: center;
            

        

    

    

        

            

            

        

        

            
                align-items: center;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

4.准备图片素材（所有素材可私信博主获取）

5.所有准备工作做完现在开始我们的文件配置

1.下载与导入vue-router

npm i vue-router@3.6.5
导入vue-router (在main.js中)




    

        

            

            

        

        

            
                //main.js中导入
            

        

    

    

        

            

            

        

        

            
                // 0.导入路由
            

        

    

    

        

            

            

        

        

            
                import VueRouter from 'vue-router'
            

        

    

    

        

            

            

        

        

            
                // 使用vue的插件，都需要调用Vue.use()
            

        

    

    

        

            

            

        

        

            
                Vue.use(VueRouter)

2.导入组件

@符号代表 /src 文件夹的绝对路径，在脚手架中文件比较多的时候，使用这个@符号会更加的方便

在main.js中导入




    

        

            

            

        

        

            
                // 导入组件
            

        

    

    

        

            

            

        

        

            
                import find from '@/views/find.vue'
            

        

    

    

        

            

            

        

        

            
                import friend from '@/views/friend.vue'
            

        

    

    

        

            

            

        

        

            
                import my from '@/views/my.vue'
            

        

    

    

        

            

            

        

        

            
                import notfound from '@/views/notfound.vue'

3.创建路由规则

路由规则作用：设置 url 和组件对应的规则

在main.js中写入




    

        

            

            

        

        

            
                // 路由规则
            

        

    

    

        

            

            

        

        

            
                const routes = [
            

        

    

    

        

            

            

        

        

            
                { path: '/find', component: find },
            

        

    

    

        

            

            

        

        

            
                { path: '/friend', name: 'friend', component: friend },
            

        

    

    

        

            

            

        

        

            
                { path: '/my', component: my },
            

        

    

    

        

            

            

        

        

            
                { path: '/notfound', component: notfound },
            

        

    

    

        

            

            

        

        

            
                ]

4.创建路由对象

路由对象：帮你管理这些路由规则

在main.js中写入




    

        

            

            

        

        

            
                // 创建路由对象
            

        

    

    

        

            

            

        

        

            
                const router = new VueRouter({
            

        

    

    

        

            

            

        

        

            
                routes// (缩写) 相当于 routes: routes
            

        

    

    

        

            

            

        

        

            
                })

5.挂载路由到根组件

挂载到根组件作用：让你的整个应用都有路由功能

在main.js中写入




    

        

            

            

        

        

            
                // 挂载路由到根组件
            

        

    

    

        

            

            

        

        

            
                new Vue({
            

        

    

    

        

            

            

        

        

            
                router,
            

        

    

    

        

            

            

        

        

            
                render: h => h(App)
            

        

    

    

        

            

            

        

        

            
                }).$mount('#app')

6.在页面写路由导航router-link

作用与a标签一样实现跳转，好处：当点击链接的时候自带一个专属类名

在App.vue中我们将传统的a标签进行替换：

替换a标签原因：便于我们做专属效果

我们选中点击的超链接做触发效果：

7在页面写路由出口router-view

占位盒子，用于渲染路由匹配到的组件

（<router-view> : 是vue内置的一个组件,会自动替换成路由匹配的组件）

好了一个最最最基本的路由就被我们制作完成啦！下面我们来看看效果：

上述的操作有些许麻烦，下面我们来使用我们开发中常用的自动配置方法

②自动配置（推荐使用）

创建脚手架方式与手动配置类似，唯一不同是此处必须选择Router

对比手动模式：

此刻：脚手架已经帮我们创建好了Router路由不需要我们下载与导入vue-router了

只需要写：

导入组件

配置路由规则

路由导航

路由出口

并且为了进一步的封装我们的配置信息，我们的配置代码将写在router/index.js下，不再是全部写在main.js下。

1.导入组件（index.js中）




    

        

            

            

        

        

            
                import find from '@/views/find.vue'
            

        

    

    

        

            

            

        

        

            
                import friend from '@/views/friend.vue'
            

        

    

    

        

            

            

        

        

            
                import my from '@/views/my.vue'
            

        

    

    

        

            

            

        

        

            
                import notfound from '@/views/notfound.vue'

2.配置路由规则（index.js中）




    

        

            

            

        

        

            
                { path: '/find', component: find },
            

        

    

    

        

            

            

        

        

            
                { path: '/friend', name: 'friend', component: friend },
            

        

    

    

        

            

            

        

        

            
                { path: '/my', component: my },
            

        

    

    

        

            

            

        

        

            
                { path: '/notfound', component: notfound }

3.路由导航（直接cv我们之前的App.vue文件）




    

        

            

            

        

        

            
                      <router-link to="/find">发现音乐</router-link>
            

        

    

    

        

            

            

        

        

            
                      <router-link to="/my">我的音乐</router-link>
            

        

    

    

        

            

            

        

        

            
                      <router-link to="/friend">朋友</router-link>

4.路由出口（App.vue中）




    

        

            

            

        

        

            
                <div class="top">
            

        

    

    

        

            

            

        

        

            
                <router-view></router-view>
            

        

    

    

        

            

            

        

        

            
                </div>

效果查看：

总结手动自动配置区别：

自动配置省去了一些固定不变的操作，我们不需要写繁琐且固定的代码，只需要写不同的代码。且代码书写的位置都给我们设置好了，我们直接遵守该规范书写代码即可

三、路由重定向与二级路由

1.路由重定向

路由重定向官方文档：重定向和别名 | Vue Router

重定向应用场景：页面输入根路径/ , 自动跳转到首页

注意点 : 重定向只是修改路径，还需要单独去设置路由匹配规则

重定向命令：




    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '/',
            

        

    

    

        

            

            

        

        

            
                /* 
            

        

    

    

        

            

            

        

        

            
                 (1)重定向只是修改页面路径。  输入 / 会重定向到 /路径
            

        

    

    

        

            

            

        

        

            
                 (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
            

        

    

    

        

            

            

        

        

            
                 */
            

        

    

    

        

            

            

        

        

            
                redirect: "路径"
            

        

    

    

        

            

            

        

        

            
                },

1. 就拿我们刚才创建的举例：

实现效果：当我在浏览器中打开的时候我没有输入任何路径，vue自动帮我们跳转到了 my.vue这个页面组件

2.也可以利用重定向来设置当我们路径错误提示404页面：

实现效果：当我任意输入没有匹配的路径，自动帮我们跳转到了notfound.vue这个组件

2.二级路由

实现页面中存在第二级的跳转

写法(拿我们上述的案例实操，需要素材可私信博主喔)：

①在index.js中引入




    

        

            

            

        

        

            
                // 导入二级路由
            

        

    

    

        

            

            

        

        

            
                import Ranking from '@/views/second/Ranking.vue'
            

        

    

    

        

            

            

        

        

            
                import Recommend from '@/views/second/Recommend.vue'
            

        

    

    

        

            

            

        

        

            
                import SongList from '@/views/second/SongList.vue'

②在需要引用的组件中使用：




    

        

            

            

        

        

            
                //格式：
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '路径', component: 组件名, children: [
            

        

    

    

        

            

            

        

        

            
                //此处填写二级路由的路径信息
            

        

    

    

        

            

            

        

        

            
                ]
            

        

    

    

        

            

            

        

        

            
                }




    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                path: '/find', component: find, children: [
            

        

    

    

        

            

            

        

        

            
                {path:'/',redirect:'/SongList'},
            

        

    

    

        

            

            

        

        

            
                { path: '/Ranking', component: Ranking },
            

        

    

    

        

            

            

        

        

            
                { path: '/Recommend', component: Recommend },
            

        

    

    

        

            

            

        

        

            
                { path: '/SongList', component: SongList }
            

        

    

    

        

            

            

        

        

            
                ]
            

        

    

    

        

            

            

        

        

            
                }

③写路由导航与出口

查看效果：

可以看到：当我们点击一级路由之后，我们还可以点击二级路由到我们的专属页面中

四、路由跳转传参

有两种跳转传参方式：

声明式导航

编程式导航

1.声明式导航：

①query写法：

在路径中加参数信息即可

<router-link to="/路径?参数名=参数值&参数名=参数值</router-link>

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子：

②params写法：

在index.jsx文件中写：参数名。在需要传递的路由路径中写参数值

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

实现效果：

2.编程式导航

①query写法:

结构：




    

        

            

            

        

        

            
                this.$router.push({
            

        

    

    

        

            

            

        

        

            
                path: '/路径',
            

        

    

    

        

            

            

        

        

            
                query: { 属性名: '属性值'}
            

        

    

    

        

            

            

        

        

            
                })

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子：

②params写法

结构:




    

        

            

            

        

        

            
                this.$router.push({
            

        

    

    

        

            

            

        

        

            
                name: '我们注册路径的组件名',//写path获取不到值！！！
            

        

    

    

        

            

            

        

        

            
                query: { 属性名: '属性值'}
            

        

    

    

        

            

            

        

        

            
                })

注意点:写path获取不到值，需要用name

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

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

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

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

评论(0) 浏览(1409)

172023-2

分析五种消息通知

资深UI设计者

通知是许多产品中不可或缺的一部分，它用于传递产品的一些新的信息状态，帮助用户能够及时收到信息。
本文将讨论五种类型的 UI 通知，以及何时以及如何使用它们的基本规则。

一、什么是通知？

通知是产品能够与用户及时同步信息变化，及时发送重要通知，例如产品更新、信息提醒、互动提醒、新消息通知等。
消息通知是为产品赋能，为用户提供帮助，便于快速获取对应的通知信息，例如产品更新、信息提醒、互动提醒、新消息通知等，在 App 和网页应用中最常见的信息交换方式则是消息通知。
消息作为一种信息交换方式，抽象其过程，即为“在达到某一触发条件下，由发送方发送消息给到接收方，接收方可针对此条消息提供反馈”。

二、通知的组成

基础的通知模块通常有标题、内容、入口、徽标、识别图标五个元素构成

标题区域：用户传递消息的核心区域，整个通知的信息都是围绕标题进行，一般标题以简短精炼为主，让用户在最短时间了解到关键信息。
内容区域：主要描述更加详细的通知内容，当然这里的内容也不建议超过2行，并且不要重复标题中内容
操作区域：通知分为可点击类和不可点击类，当通知模块需要用户点击时，视觉上应该更加具象，如按钮、箭头，不要让用户产生思考。
图标图片：有意义的图像可以强化通知的内容，例如，如果你将收到的消息通知用户，你可以包含发件人的头像。

三、通知的类型

通知的模式根据不同的场景也会有不同类型，接下来将一一讲解这5种通知类型，以及使用场景。

1. 徽标通知

徽标是一个小的填充椭圆形，可以出现在应用程序图标上并指示未看到的更新。徽标可以有一个数字，用于通知用户未读通知的数量。用户检查更新后，徽章会从应用程序图标中消失，并在新通知到达时再次出现。

优点

感知：它可以对用户产生积极的影响，在某些情况下，用户可以将徽章视为有价值的奖励，例如，徽章会通知用户他们在社交网络上收到新的点赞、评论，Nir Eyal曾在他的书“Hooked”中描述了这种心理效应。

视觉：红色作为警惕色，用户看到后会更具有点击欲望，相对产品的一些数据指标会有对应的提升

缺点

需要用户采取额外的行动，徽章本身不是通知，这是通知的警报，它只是说明了用户有新更新的事实，用户必须单击或点击带有徽章的图标才能看到实际消息，红色为强干扰元素，对一些具有强迫症的用户很不友好，在体验上会有一定的影响

何时使用

一般用户消息的通知，例如系统通知、社交中的点赞、评论、回复等内容

2.推送通知

推送通知是出现在移动设备的锁屏上并引起很多关注的通知。

优点

很难让用户忽略该推送通知，如果用户不进行处理，会长时间浮动在手机上

缺点

由于系统上app很多，会导致用户对该类的通知处于麻木状态，推送通知的效果不是很强
如果过度使用，频繁的推送通知，即使它们很有价值，也可能会惹恼用户

何时使用

推送通知适用于重要且时间敏感的更新（即用户设置的日历提醒或警报、航班延误或已交付订单的更新），在您发送推送通知之前，您需要确保您将与用户共享的信息是有价值的和时效性的，否则，最好使用其他类型的通知。

建议

a、不要使用推送通知来提示用户对应用进行评分
b、不建议将推送通知用于促销或广告
c、不要使用推送通知来鼓励用户返回应用，例如“好久没见到你了，是否想念了呢”通知不会为用户提供太多价值，需要向用户明确说明他们应该返回应用程序的目的
d、允许用户更改通知行为

3. 电子邮件通知

用户会收到一封电子邮件，其中包含有关更新的详细信息，不过这类通知目前在国外的一些网站使用频率比较高，根据习惯来讲，国外更多的还是习惯用邮件的方式作为重要信息的交流方式，相比之下国内使用邮件来传递信息的频率略低

优点

给用户更多的控制权，由用户决定是否要订阅电子邮件，如果电子邮件标题足够好，用户可能无需阅读电子邮件就可以理解上下文。

缺点

周期长，国内用户可能几个月甚至1年都看不了一次邮件，此外，电子邮件可能会在用户收件箱中丢失（即转到垃圾邮件文件夹）
它需要切换上下文，当应用程序发送需要用户操作的电子邮件通知时，用户必须切换到电子邮件应用程序才能完成操作，这可能不是很方便，尤其是当您与移动设备上的应用程序交互时。

何时使用

需要安全性时，想要使用电子邮件通知有两个原因，首先，出于安全目的，你可能希望将电子邮件用作单独的通道（即，当用户尝试登录服务时，应用程序会发送一封电子邮件，其中包含有关新登录尝试的通知）。4.Toast通知

4.Toast通知

Toast 属于一种及时性通知，当用户进行操作时，及时给出反馈，通常在移动端显示在界面的上、中、下三个位置，而web端通常显示在顶部区域，toast持续一定时间后会自动消失，对用户的打扰较小

优点

Toast 是与当前页面的内容强关联，用户无需离开当前页面就能看到反馈消息
不会中断用户操作，出现时间短，对操作上无影响

缺点

丢失信息的风险，用户注意力不集中时，会出现漏掉关键性信息的情况

何时使用

Toast 是一种操作状态，例如，消息发送时可以在消息发送成功时显示toast“发送成功”

建议

不要使用 toast 来提示与当前用户操作无关的信息
不要将 toast 用于错误消息，由于 toast 会在短时间内消失，因此某些用户可能无法阅读错误消息

5.全屏覆盖/模态窗口

全屏覆盖/模态窗口是出现在应用内容顶部并要求用户做出决定的对话框窗口，这种类型的通知会在所有应用功能出现时禁用它们并保留在屏幕上，直到用户完成所需的操作。

优点

用户在访问应用程序时将 100% 看到通知，无法避免此通知。

缺点

它会阻碍用户当前的操作，迫使用户操作通知相关的内容

何时使用

全屏覆盖/模式窗口应仅用于需要用户操作的最关键的系统更新，例如，它可能是阻止应用程序正常运行的错误或需要特定用户决策的关键信息。

四、总结

1.给用户选择

询问用户是否想接收特定类型的信息，当用户明确选择接收某些类型的通知时，说明他们的意愿更强，比产品强制传输消息效果较好

2.减少重复通知

一些流氓软件会发送一些系统通知，用户无反馈后，还是会重复发送，特别是一些短信push，建议用户没有回复时，也不要发送后续通知，大部分人的本性是不愿意被胁迫做一些事。

3. 避免敏感信息

不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出现触及别人痛处的一些文字语言

作者：爱吃猫的鱼___
链接：https://www.zcool.com.cn/article/ZMTQ3MDE0NA==.html
来源：站酷

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

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

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

评论(0) 浏览(2093)

172023-2

一篇文章学会两个体验模型

资深UI设计者

一、双钻模型

它的作用是什么

双钻模型是设计师在创作过程中可以循环复用的系统，他不仅可以在我们设计界面时运用到，在一些数据提升优化等方面同样适用，双钻模型可以使设计更加理性，它能够在我们做项目时思维更加具有逻辑性，我们设计过程中更多的方法还是遇到问题，直接输出解决方案，而该模型可以让我们的思考过程更加具象化、合理化，他与常规的思考方式不同，该模型更加注重问题的本质，全流程围绕问题去解决问题，并且在大的项目上能够提升团队效率，与其他模型不同，该模型的适用场景更加广泛。

什么是双钻模型

双钻模型是由2005年英国设计委员会正式公布并进行验证，但是在之前BDC就提到过双钻模型，而我们现在看到的模型是通过改良后进行使用的，不过这不重要，我们只需要了解它的用处价值以及如何使用就行了。
我们看下图中，双钻模型主要为4个大阶段，发现期、定义期、发展期、交付期。左边的钻石我们可以理解为发散思维阶段，我们为一个没有目标的项目去脑爆出想法或者问题，其次选择出正确的方向，右边的钻石我们可以理解为从正确的方向中抽取正确的事情，最后把正确的事情完成。

a、发现期

发现期我们理解为是探索期，该阶段主要是发散思维和收集资料，研究问题的本质，把我们能想到与该问题具有关联性的信息全部列出来。

质疑：对一切信息的质疑，简单理解就是我们需要多问自己为什么，需求的合理性、用户流程是否合理、为谁而做、会在什么场景使用、会遇到什么问题等等，把所有能想到的不合理事情列举出来，这个小阶段我们可以理解为是探索和发掘问题。
研究：针对问题去做对应的调研，如不知道用户使用场景，我们通过用户调研可以得到结果，需要做什么研究调研可以根据需求遇到的具体问题去使用不同的研究方法，例如一些访谈、竞品分析、数据分析等等。

b、定义期

该阶段主要是把发现期的问题收拢聚焦，即基于发现期的调研分析、问题洞察形成结论，寻找可以突破的机会点，例如我们在发现期发现的问题是用户的目标是什么，影响用户目标的点可能有哪些，那么在定义阶段就需要针对我们提出的这些假想进行聚焦，用户是怎么完成目标，通过什么场景完成目标等等，筛选问题时一定要综合评估，寻找可行性。

c、发展期

该阶段是已经开始要开始进行落地了，第一第二阶段是找到正确方向，而现在则是用正确的方法去做正确的事情，我们要把聚焦的问题具象化，构思我们能够想到的方案，比如设计前期探索定义的是年轻、轻盈，在该阶段我们就需要根据关键词去考虑如何进行设计，这个阶段是一个不断生产和推翻的流程，一直重复，直到找到能够落地的方案。

d、交付期

这个阶段就顾名思义比较简单了，根据发展期确定的方案，最后进行实际的落地，并且是可实施、可执行的，通过团队项目流程推动上线，最终展现给用户。

以上便是双钻模型的定义，先举个通俗的例子大家理解下模型，例如节假日我们想去旅游，a）我们去什么地方？参观古都？自驾游？游乐园？这个就是发现期，我们把想去的想玩的全部列出来，b）经过筛选我们绝定去游乐园，这个就是大的方向，c）我们要去哪个游乐园？欢乐谷？方特大世界？这个阶段就是发展期，我们要找到能去的地方，d）最后，怎么去？开车？跟团？玩多久？等等，这个就是交付期，可落地的。
当然这个案例是结合生活方便大家理解，在实际项目中它的用处不止如此。

该如何使用它

网上也有很多双钻模型的案例，但大多都是偏向理论，并且案例也跟设计无关联，我从设计角度单刀直入的引入双钻模型，很简单，很粗暴～～

例如我们要做一个唱歌产品的改版，站在设计师的角度我们需要去定义他的基本风格和基本色彩规范等等，但是总不能上来就去做设计吧，我们要知道我们产品的群体是谁？具体的用户属性是什么样的？有什么样特征呢？等等。这个阶段就是“双钻模型”的第一个阶段，发现期。

发现期怎么做

发现期就是要发散思维，比如我们”唱歌“产品的用户群体是年轻群体，用户特征是18-25岁的在校大学生，用户使用场景大多是宿舍、教室等校园环境，我们就需要去根据这些信息去进行设计思维发散，例如什么的风格符合这类群体，先把关键词举例出来，如年轻、活力、青春、潮流、二次元...，依据这些关键词做一些飞机稿，不断进行探索。

当然不止这一个思路，我们也可以通过竞品分析的方法去扩展思路，如比较潮流的RAPAPP、二次元较重的B站，在比如现在的剧本杀相关的app等等，分析他们的设计风格和表现方式，尝试融合出飞机稿。

小结：第一步的核心就是发散思维，把要做的产品背景信息全部罗列出来，通过横向纵向的方式去散发关键词，最后做出对不同风格的设计，进行探索。

定义期怎么做

像前面说的，该阶段就是把发现期散发的想法往回收一收，毕竟那么多想法哪一个才是我们需要的，我们需要在这个阶段去筛选出来。

我们按照年轻、二次元、潮流、国潮这些关键词出了一些飞机稿，我们需要去收拢起来看看那些可以与产品特性和用户属性真正具有关联性，假设用户群体虽然是18-25岁的学生，但是我们通过访谈和其他调研方式发现这类群体中喜欢二次元歌曲的群体偏少，而潮流、国潮等关键词更符合这类群体定位，并且也能够跟产品的主打方向匹配上，那么就可以剔除二次元相关的飞机稿了。

该阶段最好能收缩到同一个维度2-3个方案便于我们去进行验证，假设我们通过后续调研发现，国潮与潮酷用户群体喜好占比差不多，但是潮酷是产品未来的方向，我们就可以尝试剔除国潮，但在潮酷这个范围内可能还会存在多种飞机稿，这是我们就需要进一步筛选，比如通过延展性，宣传性，用户认知度以及用户的审美特性等等多维度去筛选，最终保持少量的方案。

发展期怎么做

到了这个阶段我们应该比较熟悉了，尝试把上述的方案继续收拢聚焦，提取出一个可行性方案展开后续的设计，具体怎么筛选，同样可以继续使用横向和纵向维度进行对比，如潮酷风格方案还剩下2个，我们就可以通过用户调研、竞品分析去尝试衡量优劣势。

交付期怎么做

交付期其实就是我们设计侧工作全部完成了，流程已经进入到了开发，我们把完整的设计稿、切图等素材交付开发，同时还需要横向输出设计规范供团队后续使用。

总结

双钻模型用途非常广泛，如数据方面、产品方面、设计方面甚至管理方面都可以使用到，在不同的领域使用的方法都类似，区别就是使用的深入如何，像本篇以纯设计维度出发去使用双钻模型，使用的方式偏向单维度。
若以提升数据或优化用户体验为目标使用双钻模型，那么每一个阶段的思维散发会变得更加广泛，每条结果交叉的情况也非常多。
再次提醒，本篇只以设计维度出发教大家使用双钻模型

二、5E体验设计模型

什么是5E体验设计模型

该模型是讲述用户使用产品的感受，它包含五个维度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容错（Error tolerant）、易学（Easy to learn），我们看每个维度的英文解释，会发现首字母都是E开头，所以被称为5E体验设计模型。

5E 模型在整个体验设计流程中可用性非常强，它可以帮助我们的团队更具有创造力和理性的分布式领导模型，它可以让复杂的设计简单化，可以帮助产品构建一个具有标准性的体验框架，我们无论做简单还是复杂的设计时都可以依据这5个维度进行体验评估。

不知道大家有没有发现，我们经常讲的产品可用性或者易用性，其实跟5E模型很像，5E模型的五个维度其实就是产品可用性的基础，当一个产品不满足其中一条的时候，那这个产品就不存在所谓的可用性，接下来我们对这五个维度进行解析。

有效（Effective）

顾名思义，有效指的就是产品功能的有效性，产品是否能够为用户带来价值，是否能够帮助用户完成目标，如果不能帮助用户完成目标，那么就不存在产品有效性，就像我们买筷子是为了吃饭、买开瓶器是为开盖、买车是为了代步.....如果筷子只给我们一只，开瓶器无法开启瓶盖，车子没有轮子跑不起来，那这个产品就是残缺的最基础的可用性都未达到。

效率（Efficient）

字面意思指我们在保证精准度的前提下保证完成事项的效率，准确度越高速度越慢，这个的衡量通常指产品与竞品相比同一个任务流程效率的高低，以及出错的频率，假如我们刷抖音刷10个视频需要1分钟，而影响时间的因素是单个视频的内容是否足够吸引，亦或者网速是否够快。

吸引（Engaging）

这个就比较好理解，就是界面是否能够吸引用户，能够让用户愉快的使用我们的页面，当然不止视觉上的，人的感知包括视觉、嗅觉、触觉、味觉，一个优秀的界面是不仅仅只有视觉，它还可以通过视觉的感知引起用户的遐想，例如一个美食的产品，我们把首页做的更加红火、火爆可能就会引起用户遐想起辣、热等感知。

容错（Error tolerant）

容错我们可以理解为是一个防错机制，或者说是容错率，当用户在操作某一个功能时，容易发生错误，我们就需要让产品帮助用户及时更正错误，例如自动修复，在比如打王者荣耀时我们选择阵容都会经常说容错率，这里就是指5个英雄，2个打团时可能优势不是那么大，但是另外3个的容错率非常高能把劣势补救回来，而产品的容错就相当于这3个英雄，负责把用户可能出现的错误操作给补救回来。

易学（Easy to learn）

易学和产品如何支持初次使用和更深度的学习相关。一个产品可以使用一次，或一会儿，或一天。它可以完成一个容易的或复杂的任务，用户可能是一个专家或新手。但每一次使用，界面必须能够记忆或重新学习，而且使用一段时间后能够发掘更多的功能，通常产品的易学性体现在用户的操作效率。

在产品设计中的应用

有效（Effective）

有效性就像他定义的那样，存在即合理，存在差异的是准确性，基本每个产品都必须具备有效性，例如地图软件，我要做公交车，能够通过该功能查看离我最近的一辆公交还有多久到，这个功能的存在就是为了便于我们乘坐公交，防止无效等待，而差异上就是公交到站的时间可能因为某种原因不够准确，这个就是有效上的差异因素。

效率（Efficient）

如何让用户体验更好，效率是其中任何重要的一个点，部分的产品的存在就是为了“让人变懒”，例如外卖、打车、购物等等，以聊天为例1v1聊天时消息能否及时的传输，群聊时同时加载n条消息，而我们能够第一时间看到信息，在新闻资讯的软件中，怎么保证用户阅读的效率，同样的产品怎么排版才能够符合用户阅读习惯，提高效率，大多行业的产品想要做到好的体验，效率是不可缺失的。

吸引（Engaging）

一个产品通过不同的视觉表现或者音乐效果能够加强用户在感知层的认知，不同的群体，不同的阶段，所展示的风格不同，像下图中的金融产品，使用红色为主色传递的感觉是积极向上的感知，因为在国内股票和基金里红色代表涨，在看阅读产品和教育产品，都根据产品特性和用户群体来设定风格，试想一下，一个阅读的软件做成卡通风格，那会不会严重影响阅读呢。

容错（Error tolerant）

上面所说，容错更像自动修复或者帮助用户解决错误操作问题，在系统上我们可能会经常看到，例如电脑崩溃时像MAC系统会询问是否重启，而Windows崩溃时会直接蓝屏帮用户自动重启。

在产品中也会有相关的功能，例如聊天页面中，我们因为网络因素发送失败会进行红点提示，包括一些内容加载失败会提示重新加载等等。

易学（Easy to learn）

易学应用场景非常之多，我们在做产品时大多都是优先考虑用户使用是否有阻碍，这个概念还是比较成熟的，当然产品功能有些时候也避免不了复杂化，这时我们可以用新手引导进行解决，但是还是需要提醒大家，在设计页面的时候一定一定要优先遵循识别性和认知性，其次再去考虑创意，例如一个分享图标，把它设计的不像一个分享，设计感是有了，但是可用性无了。

总结

为什么分享这两个模型呢，这两个我理解是体验设计的基础，双钻模型让我们从0-1一步一步解决问题，而5E模型是在我们解决问题的过程中时刻提醒我们不要偏移基础的体验，就像开车一样，双钻模型就像是一个地图的起点与终点，5E模型就像在行驶这段过程中的超速提醒、危险驾驶提醒等。

作者：爱吃猫的鱼___
链接：https://www.zcool.com.cn/article/ZMTQ0OTAzMg==.html
来源：站酷

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

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

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

评论(0) 浏览(2216)

172023-2

这些UI大技巧你会了吗？

资深UI设计者

对于很多设计师来讲在设计界面过程中往往会忽略掉很多的细节，比如卡片的排版、文字的排版、各种状态的反馈等等，特别是刚入行的设计师在做页面时往往是直接拿到竞品的页面搬运到自己产品上，这种做法理论上不会让自己的页面出错，但是很多人往往忽略了一点，就是别人这么设计的目标是什么，是否会匹配自己的设计目标，如果不了解这些贸然的去搬运设计，那么时间久了会养成一个不好的习惯，需要设计师去进行设计时可能就会遇到很多难点，作为初级设计师或者刚入行的设计师，前期可以去进行搬运设计，但是一定要了解别人为什么这么做。
接下来将分享12个设计上的小技巧，大部分在日常设计中都会遇到，了解到这些设计细节，可以让我们的界面更加高效、易用、美观提升用户体验。

一、快捷交互

我在做界面时可以时常利用交互手势去帮助用户提升操作效率，避免繁杂小操作步骤

左侧为什么错？？
左图中针对单条消息的操作汇聚到了icon内，对于用户理解成本比较高，当用户想要去删除或者屏蔽消息时需要通过聚合入口才能完成操作，大大的提升了用户操作成本。

建议正确做法～～
我们可以在类似的消息场景或者其他列表形式的场景中，添加一些交互手势，随着手机系统的更新，用户的操作习惯已经被各大产品培养的非常成熟，并不用担心用户无法操作的情况，增加手势有弊端也有优势，右图中手势增加了用户首次使用的学习成本，但是降低了高频功能的操作成本，这个理论上是可以接
受的。

实际产品中的运用

二、提升交互路径

利用拇指定律把关键的操作入口元素等，放置右侧提升用户操作效率。

左侧为什么错？？
左图中把按钮放置了模块左下侧，这样是不利于用户进行操作，当然如果整个模块的热区都是同一个，这样并没有什么问题，用户点击卡片区域任何位置都能够完成下一步操作，如果出现一个模块内存在多个热区入口，而用户想要到达目标必须通过按钮点击才能进入，那么左图中的排版位置就会提升用户的操作时间。

建议正确做法～～
当一个页面内出现多个相同模块或者一个模块出现多个热区入口时，按钮点击区域有限，我们设计时就可以利用拇指定律进行排版，如右图中布局，将按钮放置右侧可以便于用户在右手操作时快速到达目标，因为国内使用右手的人数远远大于左手用户，所以我们需要满足大部分的体验，合理利用拇指定律。
相关定律：费兹定律、拇指定律

实际产品中的运用

三、问题前置

对于我们来讲很多东西是简单的，但是不乏会有一些用户是陌生的，对于他们来讲可能会有填写成本。

左侧为什么错？？
左图中理论上并不是错，我们经常设计表单时都会用的提示话术，但是我们需要考虑更多维度的东西，对于我们来讲填写这种表单非常简单，例如个别用户，可能会临时忘了邮箱格式，又或者输入手机号时多填了一位数等等情况，用户错误一次操作步骤就会多一步，反之就是降低使用产品时的体验。

建议正确做法～～
如右图中，我们设计时可以更改提示的话术，帮助用户把问题前置，当用户看到提示邮箱时就会按照格式去填写，通过把手机号的位数拆分，让用户更好的记忆数字，这样无论对产品还是用户都没有任何损失，反而能降低错误频率。

实际产品中的运用

四、提升可读性

无论是页面还是模块，用户在阅读时是已扫读的方式进行浏览，我们需要保证页面的文字元素具备一定的规律，以此来提升阅读效率。

左侧为什么错？？
左图中可以看到，文字与输入框放在同一列进行展示，这样一方面不利于后续的文字扩展，通常这种表单填写的页面，在页面中都是具有很大的空间位置，这样排布会造成视觉上的不规律和拥挤，降低了筛选效率，当然如果是模块区域很小的情况下，可以适当的进行使用。

建议正确做法～～
右图中我们把文字与输入区域上下排布，虽然文字长短不一，但依据对齐原则在竖列情况看是具备对齐规律的，有效的提升信息筛选效率。

实际产品中的运用

五、点击引导

我们在做系统功能模块时需要注意添加功能点击引导，用户对此类消息模块认知上会默认不可点击，因此需要我们加以引导。

左侧为什么错？？
我们常见的消息模块内容为两种，一种是互动类消息即用户与用户，另一种时是系统消息即产品推送的内容，前者基于用户习惯而言用户已经没有使用成本默认是可以进行点击交互，后者因为部分产品会把系统消息作为展示的形式给用户，但是有些产品的系统消息却是可以点击交互，这就导致了用户认知上出现了混乱，左图中像系统通知功能通知其实从视觉上看，并不具备点击欲望，因此可能会对用户造成错误的理解。

建议正确做法～～
当我们在设计时需要注意，若消息列表中存在系统类消息并且可以进行交互，在设计时可以添加向箭头、红点提示等方式告知用户可以点击，如果该功能有数据指标，这种方式也同样能赋能产品指标。

实际产品中的案例

六、注意饱和度

目前市场上产品几乎都有深色版本，我们在设计时深色版本的颜色时需要注意饱和度的高低，同样的饱和度在黑色背景上会比白色背景上更加亮，这跟人的视觉感官有很大的关系，因此我们在做黑色版本时需要注意是否调整饱和度。

左侧为什么错？？
在黑色背景中使用过高的饱和度会刺激眼睛，很多深色版本都是从白色模式通过反向颜色直接调整，而彩色元素会直接运用到深色中，那么就会造成一个问题，因为我们习惯在白色模式下看颜色，忽然切换到黑色中看彩色刺激程度非常高“就像黑夜中忽然打开手电筒”，对眼睛的伤害很高。

建议正确做法～～
我们在设计深色版本时可以根据产品主色降低饱和度，包括图标等元素，以此来缓冲对用户视觉感官的刺激，目前很多大厂的处理方式是直接在彩色元素上添加一层黑色透明遮罩进行处理，这样无需在添加更多的颜色规范。

实际产品中的案例

七、禁止特殊字体

在设计模块或者页面时不建议使用特殊字体来突出文字层级，这样会导致视觉不统一，以及开发成本增加。

左侧为什么错？？
左图中灰色字使用了特殊字体，看起来虽然好看，但在实际开发中会导致开发成本增加，我们产品一般使用的是系统字体，若使用特殊字体需要让开发同学添加对应字体包，这样会导致我们的产品包的内存过大，除非产品中默认一直使用该特殊字体，这样才有使用的价值。

建议正确做法～～
一般系统字体就能够满足我们的设计需求，在UI设计中我们可以通过不同的字体粗细来调整文字层级，这样能够保证视觉更加统一，减少产品包大小。

实际产品中的案例

八、按钮也要有层级

在设计时需要注意多个入口在同一位置时，需要把它们进行层级划分，避免影响用户决策

左侧为什么错？？
图中可以看到，两个面性按钮非常明显的在模块中，当用户在浏览页面中很容易出现困惑，到底需要点击哪个才能购买预定，因为两个都是面性无法快速进行定位入口，这样不仅影响用户决策效率，还会影响产品点击率。

建议正确做法～～
建议设计类似模块中时，无论是pc还是移动端都需要对入口进行结构划分，这样能够使用户在浏览页面时快速定位到入口，提升决策效率，做体验是解决用户的思考时间。

实际产品中的案例

九、图标保持一致

在UI设计中使用图标时，要保持一致性，确保他们共有相同的视觉风格，相同的重量，填充和描边。不要混搭。

左侧为什么错？？
可以看到左图中的图标并不统一，线性里面掺杂着面性点缀，这在UI设计中严重违背了一致性的原则，会导致我们的页面不够严谨专业。

建议正确做法～～
在设计图标时，首先要保证图标风格一致，其次在这个基础上保证图标的描边粗细、视觉占比重量、颜色等，不要出现混搭风格。

实际产品中的案例

十、利用对比

在设计页面模块时，可以多利对比度的方式来体现设计的表现力，鲜明直接的色值能够直接表达事物的性质以及特点，通过对比，也能够更加清晰的强调设计中的重点，这样给用户的印象会更深刻，同样会给产品带来一定的趣味性。

左侧为什么错？？
左图中单看视觉也没问题，只是在表现上图标与背景融入到一块了，导致视觉表现力较差，在设计中如果符合产品风格的前提下，我们可以避免这种方式，这种方式虽然具有视觉效果但不够强，对用户的记忆点不够深刻。

建议正确做法～～
设计到类似的模块时我们可以利用对比的关系，以此突出视觉元素，通过颜色焦点引导用户关注，强化用户印象同时还能增加页面的视觉表现力和氛围感。

实际产品中的案例

十一、图文叠加

在设计图文叠加的卡片或者页面时，我们需要注意不同明度的图片上，文字识别是否有阻碍，一般情况会通过遮罩方式避免这个情况。

左侧为什么错？？
左图中在深色图片下字体的可读性是没有问题的，但当出现文字底部区域的图片相对复杂时便会影响识别，第二种情况当图片明度过高时文字同样无法识别，试想一下，一张白色调性的图片上放文字，那基本无法看清，严重影响阅读体验。

建议正确做法～～
在界面设计时如果遇到类似的卡片，建议在文字区域添加渐变遮罩的方式，以此保证文字的识别度，或者添加纯黑色透明遮罩进行处理，这样可以兼容不同环境的图片与文字的重叠，保证基本的阅读体验。

实际产品中的案例

十二、注意遮罩透明

UI设计中经常会遇到弹窗，弹窗是需要配合页面遮罩来让用户进行专注操作，不同的遮罩透明度所带来的专注度也不同。

左侧为什么错？？
左图中我们看到，遮罩的透明度过低，我案例设置的是17%，此时弹窗内容与页面内容结构上区分并不是很明显，一般弹窗是用来让用户跳脱页面内容，从而浏览弹窗内容，转变用户目标，当弹窗无法聚焦时便很难达到目标，并且视觉上层级更加混乱。

建议正确做法～～
右图中案例我把透明度调整到了37%，我们此时再看弹窗很容易就忽略页面内容，因为灰色越高，遮挡度越高，用户跳脱感就越强，这样我们可以让用户专注弹窗内容，同时视觉结构上也区分很明显。

实际产品中的案例

作者：爱吃猫的鱼___
链接：https://www.zcool.com.cn/article/ZMTQzNTQ3Mg==.html
来源：站酷

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

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

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

评论(0) 浏览(1281)

172023-2

UI新手设计学习100问丨认识UI

资深UI设计者

一、这是一个什么栏目？

UI新手设计学习100问，顾名思义，主要是通过100个常见问题解决初学者在学习UI设计初期的困惑，比如什么是UI设计？设计的目的是什么？UI设计需要学会什么必备技能？UI设计又有什么常见的学习方法等等。
为什么用问答的形式？这是受一个朋友的创作启发，让我确定了以这种形式来创作，这样更易于大家理解和学习。另外这个栏目的内容，我也将会尽自己最大的精力，从百度百科、维基百科以及国内外的设计书籍中一边查一边写，努力制作成一本UI设计新手学习的知识手册，解决新手初学者的种种困惑，给他们提供一个学习的知识树和进度条。
这个栏目会有多少字，多长更新完？我已经完成了第一章大部分内容，目前已经撰写了约5000字，平均每个问题800字，以我目前创作内容的篇幅看，这份专栏应该在10万字左右，相当于一本300页左右的实体书籍。至于完结时间，除了需要参考百度百科和维基百科，还要翻阅各种设计书籍和查找资料，我个人预计时间3个月，不过如果大家喜欢，我就会加快脚步！

二、为什么会写这个专题？

我在2022年转型到知识付费以后，认识了太多的设计师朋友，也建立了自己的社群。其中让我印象最深的有这么一类用户群体，他们很早就在大学期间为了学习UI设计，花了很多钱报了各种培训班，但最后的结果却不如人意。很多培训班太注重于软件技能的操作，而忽略UI设计其实是一门学科，如果学生知其然不知其所以然，那么即便学会了Sketch、Figma这些工具，他们也不知道学了UI设计到底能有什么用，未来又该如何去规划自己的职业生涯。
这些朋友里面，留给我印象最深的，是一个刚毕业的女孩。她给我说，贷了两次款，毕业后还是不知道UI设计到底能干啥，现在勉强找到一份设计的工作，每个月还要还着贷款走。我当时把这个朋友免费邀请到我的私董会星球了，让她去看我讲的书、录的课程，期望能给她带来一丝温暖和希望。
其次在我最早开始建立社群的时候，有一个探友在站酷看到我的产品拆解以后，跑来加我，然后给我说：“我一直质疑培训班老师的讲课内容，因为我觉得设计这门职业，如果只学会软件，那是不够的，肯定需要学习一些设计原则和理论。所以当我看了你的产品拆解以后，我很受启发，我觉得学会这些设计理论特别重要。”
这些真实的故事，让我印象深刻，也让我开始反思，造成这种现象的原因是什么。所以这个专题的内容，在很久之前就藏在我的心里了。我想去做一个UI设计的知识树，给那些准备学习UI设计以及正在从业的设计师们提供一个清晰、可视化的学习体系，从而帮助他们从一个宏观、系统的角度去勘察这个行业，发展趋势是什么、是否值得入行，从0到1又需要哪些步骤。
这个专题，主要为这几类朋友而创作。第一，正在上学，准备想学习UI设计的大学生；第二，刚毕业准备报班学习UI设计，或已经从培训班刚毕业出来的应届生。第三，虽然已经从事UI设计三五年，但对UI设计还是一知半解，混混霍霍做设计的职场设计师。
最后，这个专题是我的第一个付费内容，我将会免费分享30个内容，如果你觉得有价值，可关注我们获取全部内容。

三、内容结构

目前我把这个专栏拆分为四块内容，分别是认识UI、就业前景、学习方法和如何求职四个章节。
第一章是认识UI，我会从设计的目的、UI设计的定义和分类开始让初学者对UI设计有一个初步的了解。（这个部分的内容也许适用于80%的UI设计师，虽然很多设计师已经从业了多年，但对UI设计还是一知半解。）
第二章是就业前景，通过UI设计当前的工作内容、薪资收入和职业发展等维度告诉初学者UI设计的就业趋势，降低就业选择风险。
第三章是学习方法，我想给初学者提供一个学习知识树和能力晋升模型，只有知道最终要去哪里，自己当前又在哪里，应该如何努力，他们才能像玩游戏一样，每天对知识的汲取都充满动力。
第四章是如何求职，通过拆解企业对UI设计师的招聘需求，抽丝剥茧地让初学者理解求职的本质和方法。

四、初拟目录

这是初步拟定的目录，非最终交付目录。其次这份专栏我将会筛选30个左右的问答免费给大家分享试看。
1. 认识UI
什么是设计？（已完结）
设计的目的是什么？（已完结）
设计和艺术的区别？（已完结）
UI设计是什么？（已完结）
UI设计有什么分类？（已完结）
UI和UE、UX的区别？（已完结）
UI设计和平面设计的区别（已完结）
UI设计和电商设计有什么区别？（已完结）
UI设计有什么价值？
国内UI设计的发展历程
2. 就业前景
UI设计师现在的就业前景怎么样？
哪些公司和行业需要招聘UI设计师？
UI设计师饱和了吗，还值得选择吗？
失业的UI设计师越来越多，还能选择UI设计吗？
UI设计师的工作流程是怎样的？
UI设计师主要负责什么工作内容?
新手UI设计师的薪资收入一般在哪个水平？
UI设计师的薪资收入晋升模型
UI设计师会经常加班吗？
UI设计师的工作压力大吗？
UI设计师职业发展路线图是怎样的？
UI设计师是不是过了30岁就会过气？
技术岗位未来是否一定要朝着管理岗发展吗？
一二三线城市的环境对UI设计师就业和成长有影响吗
谈不上对UI设计特别热爱，但觉得UI设计工资高，可以选择这个行业吗？
学会UI设计可以创业或做自由设计师吗？
3. 如何学习
UI设计师需要学习什么内容？
UI设计师需要掌握哪些必备技能？
UI设计学习的步骤是什么？
需要多久才能成为一个优秀的设计师?
除了设计，UI设计师还需要培养什么职业技能？
学习UI设计的常见方法
UI设计可以自学吗？
自学UI设计有什么难点和挑战？
审美能力不好，可以学好UI设计吗？
UI设计需要学习什么软件?
学会软件一般需要多长时间？
UI设计需要买苹果电脑吗？
用Photoshop可以设计UI吗？
UI设计需要看什么设计书籍？
有哪些免费学习的教程网站？
录播课程和设计培训班有什么区别？
有那些物美价廉的付费课程推荐？
选择设计培训班需要注意什么？
培训班学完以后就能成为UI设计师了吗？
培训班对找工作有帮助吗？
UI设计师需要美术相关专业吗
什么样的专业更适合UI设计？
学历对UI设计师的学习有影响吗？
设计临摹对新手UI设计师有什么帮助？
设计临摹有什么技巧和方法？
设计临摹的作品可以加入个人作品集吗？
一名好的UI设计师应该具备什么素质？
优秀的设计师都有什么好的设计习惯？
4. 如何求职
企业招聘UI设计师的流程是什么？
企业招聘UI设计师主要考核标准是什么？
企业愿意招聘新手UI设计师吗？
新手UI设计师应该选择什么样的企业？
去不了大厂，新手设计师是不是就没前途？
创业团队、小公司值得新手UI设计师去吗?
UI设计师的求职流程是什么？
UI设计师求职需要准备什么资料？
简历设计对UI设计师重要吗？
如何设计一份优秀的作品集？
新手UI设计师有什么求职技巧？
学历低对UI设计师的求职有没有影响，如何规避？
没有工作经验怎么办，能找到工作吗？
一直找不到工作怎么办，是不是应该放弃UI设计？

五、第一篇认识UI（Q1-Q5）

设计是什么？为什么需要设计？UI设计这个行业又是怎么诞生的？UI设计师的工作内容具体是什么？非科班毕业的大学生适合从事设计行业吗？这个行业需要学习多久才能成为一名优秀设计师？作为此次专题的开篇内容，我们在这个章节将会抽丝剥茧向大家介绍UI设计的由来、定义、分类和价值，帮助大家快速对UI设计这门学科有一个宏观的了解。

Q1. 什么是设计？

我们先看百度百科对设计的定义。设计，是指设计师有目标、有计划地进行技术性的创作与创意活动。维基百科认为，所谓设计，即“设想和计划，设想是目的，计划是过程安排”，通常是指有目标和计划的创作行为及活动。
著名的美国设计理论学家维克多·帕帕奈克认为，设计是为构建有意义的秩序而付出的有意识的、直觉上的努力。他认为设计有两个步骤。第一步：理解用户的期望、需要、动机，并理解业务、技术和行业上的需求与限制。第二步：将这些知道的东西转化为对产品的规划（或者产品本身），使产品的形式、内容和行为变得有用、能用、令人向往，并且在经济和技术上可行。
简单总结一下，设计是有目的的，有计划的、满足用户的期望的行为。比如企业需要设计一个官网进行对外宣传，网站的设计就属于有目的、有计划的工作，而宣传则是企业的核心需求。
为什么我们需要先了解“设计”的概念？这是因为UI设计只是设计的一个细分领域，设计的种类非常多，设计在许多领域都有应用，涉及的方面也比较广泛。只有初步了解这个宏观的大概念，我们才能更清晰地看清楚UI设计的本质，从而为我们的学习进行指导。
参考文献：
百度百科-设计
维基百科-设计
《步步为赢：交互设计全流程解析》- 董尚昊

Q2. 设计的目的是什么？

我们先看世界上第一所完全为发展设计教育而建立的学院包豪斯对于设计的三个基本观点。
①设计是艺术与技术的新统一；②设计的目的是人而不是产品；③设计必须遵循自然与客观的法则来进行。
包豪斯提出“以解决问题为中心”的设计理念。他们认为设计是为了解决问题，不论是设计一个水壶，还是一款手机应用软件，设计师都是在为他人服务，在帮使用者解决问题。这个设计理念深深地影响了设计界。设计是理性和感性的结合，并以解决问题、满足人们的需要为目的。
中国现代设计和现代设计教育的重要奠基人之一、美国设计教育最高学府——美国艺术中心设计学院教授王受之在他的著作《世界现代设计史》中写过这样一句话：“设计是为他人服务的活动。”
日本当代国际级平面设计大师艺术总监原研哉在《设计中的设计》一书中也有类似的表达：“设计的实质在于发现很多人都遇到的问题然后试着去解决的过程。”
综上所述，设计的目的是用设计方案来满足用户的需要，而不是单纯产出设计师认为美观的方案。这是设计过程中最重要的指导原则之一。如果不理解设计的本质，我们在以后的商业设计中就很容易陷入一个怪圈，我觉得这个界面这样设计得非常好看，但客户却让我去临摹另外一个我认为很普通的产品界面，客户觉得那个才是他想要的。
参考文献：
《步步为赢：交互设计全流程解析》- 董尚昊

Q3. 设计和艺术的区别？

我们看看维基百科对艺术的介绍。艺术是指凭借想象力、经验等综合人为因素的融合与平衡，以创作隐含美学的器物、环境、影像、动作或声音的表达模式。而百度百科则对艺术没有明确的定义。艺术是一种社会现象、社会事物，属上层建筑中的社会意识形态，其次也指向各种技术活动，比如画、雕刻、建筑等活动。
艺术的目的可以分为无动机的及有动机的两类。无动机的艺术是指那些本来就是人类不可或缺一部分的艺术，这类的艺术超越个人，或是不是为某一特定目的所创作。有动机的艺术是指那些因为特定目的产生的艺术。可能是为了政治的变革、表达特定的感情、陈述个人心理，或是作为一个交流的工具。
原研哉在《设计中的设计》对设计和艺术也发表了自己的看法。
艺术说到底是个人意愿对社会的一种表达，其起源带有非常个人化的性质，所以只有艺术家自己才知道其作品的来源。而设计，则基本上不是一种自我表达，它源于社会。设计的实质在于发现一个很多人都遇到的问题，然后试着去解决的过程。
简单总结，设计和艺术有很多重叠的部分，两者最本质的区别是设计的本质是满足需要，包含更多的商业述求，而艺术的目的是表达艺术家对世界的看法，不受外界的约束。为什么要弄懂这两者的区别，这是因为在商业设计中或许不会给你有太多充足的时间去完成完美的稿子，而是要以甲方或企业的设计目标为主、商业设计，不是艺术，而是要通过设计满足甲方的需求。
参考文献：
维基百科-艺术
《设计中的设计》- 原研哉

Q4. UI设计是什么？

由前UI设计属于近代兴起的设计分类，这是随着科技的快速发展才催生出来的新兴行业。目前对于UI设计的定义，目前国内有两种流派。
第一种，UI设计包含界面设计（Graphical User Interface，简称GUI）、交互设计（Interaction Design，简称IxD）和用户体验设计（User Experience Design，简称UX）。
我们先看百度百科对UI设计的定义描述。UI是User Interface(用户界面)的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI是一个广义的概念，可以通过以下三个层面来理解UI的概念。
首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。比如以视觉为主体的界面，强调的是视觉元素的组织和呈现，包含图形、图标、色彩、字体等，这就是我们常说的视觉表现层，用户从视觉就可以直接感知的部分。在这一层面，UI就是用户界面，也是国内普遍对UI设计的认知。
其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。在这一层面，Ul可以理解为User Interaction，即用户交互，需要通过界面对功能的隐喻和引导用户来完成对应的操作。因此，UI不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。
最后，UI的高级形态可以理解为User Invisible（中文：看不见的）。对用户而言，在这一层面UI是“不可见的”，这并非是指视觉上的不可见，而是让用户在界面之下与系统自然地交互，沉浸在他们喜欢的内容和操作中，忘记了界面的存在。其实这就是用户体验，不仅仅是界面，而是以用户为中心进行界面结构、行为、视觉层面的设计。
从百科的对UI设计的定义可以看出，UI设计包含了界面设计、交互设计和用户体验设计，这也是国内众多UI设计书籍中的对UI设计的定义。比如在《术与道：移动应用UI设计必修课》、《视界·无界：写给UI设计师的设计书》、《UI设计精品必修课》等国内设计书籍都有类似的观点。甚至有这么一个很流行的比喻：如果把一款软件产品比作一个美女的话，视觉就是一个美女的化妆和打扮，交互就是一个美女的五官位置及骨骼体态，用户体验就是美女是否善解人意、功能贴心、易用好用等。
第二种，UI设计、交互设计和用户体验设计是独立的学科，他们虽然有很多重叠部分，但交互设计和用户体验设计不属于UI设计，甚至UI设计等同于界面设计。
在Joel Marsh的《用户体验设计：100堂入门课》这本书中，作者举了个例子：“UI和UX（用户体验设计）是两种不同的工作。如果有的公司有‘UI/UX’这一职称，那说明这家公司根本不了解什么是UX，或者他们想花一份钱就让人做两份工作。要当心。”
在《这才是用户体验设计：人人都看得懂的产品设计书》里，作者认为界面设计包括信息层和呈现层。UI设计的范围比界面设计要小得多，通常仅关注虚拟产品的信息呈现，而且较少涉及艺术向的视觉设计。信息层则由交互设计师负责，待界面上要呈现的信息架构和具体信息明确后，UI设计师才开始设计工作。其次UX设计师主要关注上层设计，而UI的工作非常细，比如如按钮、字体的设计。
这种观点也是目前国内多数企业和设计师对UI设计的定义，UI设计就主要是负责界面设计的工作，尤其指移动端产品界面，比如APP、智能设备等。
结合以上两种流派对UI设计的定义，我认为，从视觉层面，UI设计可以定义为用户界面设计，不管是web端、移动端还是其他智能设备，凡是涉及到用户界面的设计，都可以归纳为UI设计；从交互层面，UI设计还需要思考界面对功能的隐喻和引导，从而帮助用户完成对应的操作；从体验层面，UI设计需要从视觉、色彩、行为和交互等方面为用户提供优秀的体验，让用户可以和系统自然地交互，沉浸在他们系统操作中。
总之，一名优秀的UI设计师，绝非只是画好图标、完成界面设计这样的基础工作，而是从整个产品的用户体验出发，从视觉到实际操作，为用户提供最友好的使用体验。理解这个概念，我们才能确立真正的学习目标和职业定位，朝着一名优秀的UI设计师而努力。

参考文献：
百度百科-UI设计
《术与道：移动应用UI设计必修课》- 余振华
《视界·无界：写给UI设计师的设计书》- 王涵
《UI设计精品必修课》- 常丽李才应
《用户体验设计：100堂入门课》- Joel Marsh
《这才是用户体验设计：人人都看得懂的产品设计书》- 李磊

Q5. UI设计有什么分类？

从用户人群划分，像淘宝、美团这样以个人消费者（Customer）使用为主的产品，称为C端产品，属于最常见的UI设计，称为C端UI设计；而像有赞、微盟这样的以服务企业（Bussiness）的产品，称为B端产品，这就是B端设计师的由来，目前市场对B端UI设计师的需求比较大。
从使用设备划分，从事电脑端设计的称为WUI（Web User Interface），也就是网页设计师，从事移动端设计的称为GUI（Web User Interface，图形处理设计师），是我们普遍理解的UI设计师。
从设计对象划分，UI设计可以分为电脑界面、APP界面、平板、智能手表、车载导航设备、智能电视界面、可穿戴设备界面、医疗及各种数码机床等自动化控制界面和微型嵌入式设备界面等类型。
从交互方式划分，UI设计可以分为GUI和VUI，GUI就是我们上文提到的图形处理设计师，而VUI（Voice User Interface）则是通过语音交互的界面设计，比如小度、天猫精灵。
从行业划分，UI设计师可以分为不同行业的设计师，比如从事医疗产品的UI设计师，从事人工智能的UI设计师。
简单总结，未来随着各种智能设备、人工智能、AR的发展，将会诞生出更多细分行业的UI设计师，不管是现在最火爆的B端设计师，还是车载设计师，未来面对日新月异的科技发展，只有理解UI设计的本质和方法，才能应付越来越多的不确定性。

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

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

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

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

评论(0) 浏览(1917)