大家好，今天给大家带来的是配色干货系列之第三期！！超级干货！！
前两期地址传送门：
前面两期，主要分享审美的培养与提升、配色的技巧与习惯。本篇更为实在，主要分析有哪些经典的万金油配色组合，满足日常工作使用。
看完这篇文章，相信你对色彩的掌握，能更深一步~~干货建议提前收藏！喜欢记得给咱们公众号添加星标喔~~
1）经典搭配-黄配黑
色板 颜色组合
Yellow & Black
黄配黑的色系非常经典耐看，普适度也很广。我在公众号里写的一些文章，也经常采用这套配色。
这套黄与黑的组合很适合一些生活、社区、人文、情感等场景进行使用，情绪温和。如果你的设计，会被频繁的在这些场景里进行使用，那么不妨使用一下这套黄黑配色试试看。
比如以下这些案例：
这里也给出我经常使用的两组黄黑色板，一组更为活泼鲜艳，更具娱乐化。一组更为内敛，充满文化气息。
推荐组合色板①：
推荐组合色板②：
2）科技搭配-蓝黑白
色板 颜色组合
Blue & Black
这套色彩就不多说了，蓝色可以说是我非常喜欢的颜色之一了。从咱们公众号的logo，还有日常发文的封面，相信大家就能感受到。
蓝黑白搭配，可以说颜色是百看不腻，并且蓝色色相偏冷，没那么多情绪倾向，所以更能够让人心平气和的阅读信息，提升效率。因此也经常被用到科技、数据、社交、工具等应用场景。
比如以下几组案例：
关于蓝黑白，我也给大家推荐两组我很喜欢的色号组合。一组更为明亮，显得年轻活泼些，而另外一组则更加深沉商务，更为内敛。
推荐组合色板③：
推荐组合色板④：
3）CP组合-红蓝配
色板 颜色组合
Red & Blue
这套颜色组合，在近几年可以说是非常流行了。颜色比较浅的，有经典的马卡龙色组合，被广泛运用到年轻社交等工具场景。而颜色重点的，直播娱乐等秀场平台，也都大量可见其身影。
红蓝搭配，颜色的相撞导致色彩充满了热情与朝气，社交娱乐化产品的场景，非常适合这套色彩组合。
比如下面这些案例：
这里也给大家分享两套红蓝搭配的色板，一套略显温柔，另外一套则热情如火。
推荐组合色板⑤：
推荐组合色板⑥：
4）经典国潮-赤金组合
色板 颜色组合
Yellow & Black
这几年国潮风格也越来越受到大众所喜爱，而在国潮色彩的搭配中，赤色与金色的搭配。一方面红色中国味特色浓厚，而搭配上高档的金色，瞬间浓厚的精致国民画风，就出来了。
比如每年的集五福，就是非常经典的赤金组合，精致的同时，还非常接地气儿。
关于赤金，我也从潘通色里挑选出了一组很经典高档的色彩组合，色板色号也分享给大家。
推荐组合色板⑦：
推荐组合色板⑧：
5）尊显高贵-黑金色
色板 颜色组合
Yellow & Black
黑金组合相比其它颜色更显高贵，在很多知名的APP里面，也都是能看得到，比如淘宝的88vip，京东金融的小金库。这套色彩组合往往代表着商务、尊贵，高级，既内敛又隐蔽，通常被用到各类会员、金融等尊贵体系中。
比如以下这些案例
关于黑金里面的金色，也分为两种，一种颜色更为纯金，还有种偏向于玫瑰金，玫瑰金的色彩相对要更温和一些，没那么冰冷。这两套色板，我都分享给大家啦~~
推荐组合色板⑨：
推荐组合色板⑩：
6）其它色彩组合
色板 颜色组合资源下载
Yellow & Black
除了我上面分享的这五套经典配色，还有很多其它的色彩组合，也都非常优秀好看，比如上次分享的这些：
这段时间的积累收集，又更新了下面这些新色板。
还有很多，就不一一展示了。方便大家收藏，我把这些色彩组合的图片+色板文件，都进行了打包，方便大家直接借鉴这些色彩。
文章来源：UI中国 作者：UX小学
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
疫情之下，很多零售商都开始经营私域流量，私域流量+传统零售的新模式似乎成为了保持市场增长的新药方，私域流量也对零售业进行了重新改造。本文将从三个方面对此展开分析，希望对你有帮助。
研究零售行业中的私域流量，有一个问题值得思考：是什么刺激了零售私域流量的发展？
今天，市场上移动互联网的流量红利消失，线下端人口红利的消失。包括零售业在内，大部分行业的市场性质，已经从增量市场过渡到了存量市场。
整个存量市场中，依赖过去传统的获客方式，获客成本在不断升级，导致商户之间的竞争激烈。即便各个平台之间没有形成自己的流量壁垒，各个商圈中的区位没有形成垄断。成本的不断升级，最终还是会刺激私域流量取代传统的获客，成为一种市场成交的新方式。
私域流量作为存量市场的产物，进一步得到发展的趋势非常明显。
一部分原因是受到了零售商品的属性影响，大部分的零售商品都是针对特定的用户人群需求设计，服务定向人群为主。所以大部分的产品有针对性，买一次A商品和买十次A商品的人，大概率是同一批人。
因为这种情况，让一个新客户买一次产品的成本，是要比让老客户再多买一次产品的成本，高得多。
增量时期，大部分商家都没注意老客户的运营，当产品慢慢触达到了市场边际，积累了一定的市场体量后，下个阶段更具有性价比的方向，就是前期一直被忽略了的定向人群的精细化运维，可提升复购性。
零售行业中，传统模式的消费者和商户的接触，往往是离不开：人、场、货的。同时一片区域内的线下超市和商店，只能服务这块区域的客流量，存在地域流量壁垒。
传统零售，消费者如果不去店铺、超市里面，看不到商品的陈列，就可能不会买牛奶、买饮料，就没办法形成交易发生。所以传统零售通过总代、分代、批发商，到零售商，开更多的线下店铺，打通更多的线下代理渠道，实现获客和成交。
但是私域流量+传统零售的新模式，会让市场重新审查传统零售人货场的模型。让重点经营的方向也会瞄准老客户线索的激活和运营，让老客户复购和带新。
购物场景从线下（低频率）转到线上的可重复性。
私域流量模式内，用户和商户之间的触点发生了改变，从线下迁移到线上。实体场景代入了内容场景，没有实体店，照样可以卖东西。
从一开始的人、场、货模式，变成了一种可重复性的“叫卖”模式：一个消费者在社群中、朋友圈、小程序看到了信息推送，正好刺激了购买欲望，就会产生交易。生意的本质是人与人之间的供需链接。传统零售和消费者的“触点”是线下店，私域流量+零售的模式的触点是线上的方式。
类似企业微信这种线上的方式，就帮助商户绑定了客户线索。不仅是缩短了商户和消费者之间的距离，这中间还带有社交属性，帮助客户更好地了解消费者需求，做好用户需求的细分。
这种逻辑我们叫做“触点营销”，和用户做朋友，让熟人关系变成卖货的渠道。
触点，是商户和消费者之间接触点，通过接触点传递信息和提供服务。（现在线上端习惯，用社群链接和服务消费者）
比如现在热门的社区团购，是私域+传统零售的典型模式。
原来小区小卖部的老板，观察到小区的住户每次都嫌弃买菜的时候，耗时长、不新鲜的问题，于是自己做团长经营私域流量，建立企业微信拉了一个买菜群，帮助小区住户们“便捷买菜”
因为更加近距离的服务住户，老板还可以记录自己老顾客的喜好，做好SCRM的标签处理：
一段时间之后，老板可以提前几天进行这些日用品货物的销售，给住户发一条信息：“你好邻居，今天的猪肉6折，刚从XX现宰的，你看要给你留一点吗？”这就是利用企业微信这线上端的触点联系，建立可重复性的模式。
这是传统零售很难做到的，因为传统零售没办法更近一步的接近消费者，所以自己手里是拿不到相关的数据，于是只能把钱都用在优质广告位、优质区域位上，抢占消费者的视野。
那些年为了公域流量疯狂烧钱的平台：
传统零售场景中，消费者买东西要么认功能，要么认牌子。但是私域模式的零售场景就不一样，今天的消费者情感消费颗粒度比以前更细，决策情况在发生变化。
情感和服务因素，会使决策发生的更加快。你身边的朋友和普通一个销售，向你推荐同样的一个物品，正常情况下，你选择相信你朋友的概率是要大过于选择销售的。
还是用小区小卖部老板的例子，当老板服务多几次住户的时候，老板和住户之间的信任程度会慢慢上升。（情感消费）
老板了解到消费者的采购米的喜好，可以尝试给他推荐同品类，但是高单价、味道好吃的大米。在有原来信任基础的前提下，肯定是有部分消费者愿意尝试下，因为消费者追求“美味”的需求比较大众化。
这种时候消费者的决策程度会由重度决策转向轻度决策，一句话概括就是：你办事我放心。
私域流量中，客户和商户的联系变得非常密切，人即流量，关系即渠道，熟人变熟客。虽然要成为好朋友这个门槛比较难，但是在消费者的决策中，中间的情感因素会影响到消费者的决策。让决策变的更加的轻度。
重要的是，信息触达的成本也降低了很多。据「加一私域」官方统计：以大众客户运营每年发12次短信类比，同样100万私域客户的群发触达每年至少节省20多万元营销成本。再加上朋友圈运营，每发送一条朋友圈价值3-5万元（按腾讯朋友圈广告1000人曝光 / 30 – 50元为例计算）
消费者在对商品进行购买决策的时候，有一个很大的通病：选择困难症。所以在传统的零售中，商品的陈列摆放也成了一门学问。贵的、销售额好的基本上都放在了展架的上面的位置。
同时很多的零售厂商为了博消费者的眼球，各种商品的包装也是非常讲究的。
这样做是为了让商品，第一时间出现在消费者的面前，提高成交转化的概率。大部分的消费因为有选择困难症，往往第一眼被看到的商品，这些商品的成交率比较高，这就是商品的“C位”效应。
在私域+零售的模式中，没有了线下店铺，内容是私域中商品的唯一的展柜。通过内容构建一个消费场景，实现“货找人”模式。
像很多的微商的朋友圈内容，就是构建这样的“货找人”场景。朋友圈和社群中的场景，营造的是一种“即时成交”，通过内容构建一种“冲动型的消费场景”，让交易的发生短、平、快（时间短、速度快、产品平民化）
私域模式中“货找人”，就要站在客户视角，与人近，就会离增长更加近。私域流量模式不是要一下干件大事，而是做对一系列小事；要做对一系列的小事，就要不停的细分，挖细节，挖每一个和消费者接触的点。
文章来源：人人都是产品经理 作者：阳俊Orlo
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
产品经理日常工作中最常听到的词就是需求，而产品经理的核心工作也就是把需求变成可使用的产品。那当我们接到需求时，我们是如何把它转化成产品呢？本文将从七个方面进行分析，希望对你有帮助。
首先我们先了解一下，在产品开发过程中所沟通的“需求”到底指的是什么。我们先举几个我们工作中常常听到的需求：
我们可以将平常听到的需求都归为这三类，产品经理需要做的就是将目标需求和业务需要转化为产品方案，然后交付给开发团队。
接下来我们将以羽毛球馆订场地这个业务需求，来拆解一下整个过程，看它是一步步变成产品方案的。
场馆运营部门提出一个需求，我们需要实现线上订场地。
业务需求的提出，肯定是为了解决某些业务问题。通过调研，现在纯线下订场的方式存在以下问题：
球友：
场馆：
业务问题定位了，后面的设计就要围绕这些问题展开，设计完后要回过来看有没有解决这些问题，否则一切都是徒劳的。
流程是产品设计的关键，梳理流程能让你对整个过程更清晰。梳理过程前，先要明确下订场有几个场景，因为每个场景的流程可能不太一样。通过调研和分析得知，订场主要有以下几种场景：
这里就要思考一下，我们这次设计是否要满足这5个场景呢？我们回到定位业务问题这一步，问题都是在想要运动的球友在订场时存在的，而方式e在线下的处理暂时并没有多大问题，再深入一步调研可了解到，包场都是直接线下谈好价格，这个价格也是可浮动的，然后将钱线下转给场馆，放到线上反而不灵活，所以我们就先不考虑线上实现这个场景。
Tips：产品经理需要学会做减法，并不是把线下所有业务搬到线上来，开发出来后发现并没有什么用，又浪费这么多资源。
将待实现场景确定下来后，我们需梳理每个场景的业务流程，这样才能对整个过程清晰。因为我们这次只是讲方法，所以就只拿场景a来举例，继续下面的分析过程。
我们梳理出线上订场流程图后，这时我们需要分析一下，这些环节哪些需要做到线上？
入场前：订场、付款、锁场肯定是需要做到线上的，产品的目标就是为了解决订场效率低的问题；
前台接待：出示订场凭证、校验订场凭证、开灯、放行这些环节并没有太大的影响效率。出示订场凭证、校验订场凭证可通过报手机号的形式解决。开灯和放行涉及到智能灯控和智能闸机的对接，没有这些东西业务也能跑的通，也能正常营业，这期也先不考虑在线上实现；
入场后：到点提示也涉及到智能设备的对接，先可人工提示。
Tips：产品经理需要定义需求的优先级，先把影响业务正常运行的问题解决掉，再来迭代优化。
业务规则是运营部门为使业务正常运行而定义的，就算没有系统也是存在的。产品经理需要做的是把这些业务规则梳理出来，然后用产品的语言把它描述出来。还是以线上订场举例，场地什么时候可以订?订的时候有没有时间限制？价格会由哪些因素影响？可不可以退场？会员有没有什么特殊权限？这些规则听着是不是很乱，这就需要产品经理一条一条梳理清楚，梳理规则的同时还需要多问为什么要这样做呢，一来以后方便和开发等同事说清楚为什么这样设计，二来也能加深自己对业务的了解。
通过调研我们梳理出以下预订规则，但我们需注意以下两点：
以上只列举了线上订场的预订规则，还有退订规则、价格方案规则、会员权限等规则都需要一条一条梳理出来，这里就不一一列举出来了。
业务流程和业务规则都梳理出来后，就可以画原型了。这一步对产品经理来说，即简单又困难。简单是因为去想象具象的软件操作比思考抽样的业务逻辑更容易，难是因为画的原型最终要符合业务流程和业务规则，并且还要符合常规交互原则。
从业务流程分析，整个订场环节涉及到球友和场馆，那肯定要有球友订场端和场馆管理端。球友订场端刚开始也没必要做APP，做个H5放在微信公众号就可以了，还能引流到公众号。确定好用什么来实现后，我们要梳理一下线上订场有哪些页面，不要想到一个画一个，这样很容易漏页面。
Tips：刚开始设计原型时，尽量不要添加一些和主流程无关的页面，比如你觉得别人做了个VR查看场馆，你也要做一个，但是前期最重要的是把业务跑通，再来添加一些附加功能。
工具类产品原型设计多参考一下美团、淘宝等移动端产品，因为移动端产品发展到现在，已经培养了用户的操作认知，我们不用去发明轮子，让用户再重新去学习。
产品的原型出来了，可以给客户演示，让客户跑一遍整个流程，看先前提的业务问题有没有得到解决。如果有问题，再进行调整。其实让客户跑一遍流程也不能发现所有问题，只有在真正使用的时候才会暴露出问题来，但这一步也是不可少了。
PRD全称为Product Requirement Document，中文名为“产品需求文档”。其核心目的是帮助开发、测试、运营、产品人员理解该需求的背景和具体要求，减少产品实现过程中诸多不必要的重复解答，从而提升整体项目推进效率。当业务规则、业务流程、原型图都出来后，我们需要把它交付给我们的开发团队去实现，交付的形式就是PRD。这里就不阐述PRD怎么写了。
当接到业务需求时，变成产品的过程是：
以上只是个理想化的流程，产品经理并不是写完PRD扔给开发就没事了。包括后面的需求评审、跟进开发进度和问题、测试上线、迭代优化等，都需要产品经理主导。
文章来源：人人都是产品经理 作者：康力文
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2021年产品体验日记，小目标365节，第016~030节。
前言
在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。
2021 | 第02篇分享目录（016~030）
016.「QQ」手势力度决定页面展示范围
017.「高德地图」地点打卡-未来回忆曾经的足迹
018.「优酷」会员转化-击溃用户最后一道心理防线
019.「网易云音乐」播放中的歌曲快速定位
020.「boss直聘」多个入口-简化二次操作流程
021.「菜鸟」备注-快速找到列表中的包裹
022.「虾米音乐」符合产品特性气质的标签栏
023.「QQ音乐」触手可及的选择性MV播放
024.「微信读书」提升操作效率的进度条控制
025.「哔哩哔哩」信条-承包笑点的逆向弹幕
026.「淘宝」应对意外退出的通道
027.「微信」行为预判-提升操作效率
028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂
029.「京东」送礼物-更是一种神秘和惊喜
030.「叮咚买菜」一顿吃光-减少食材的浪费问题
016.「QQ」手势力度决定页面展示范围
产品体验：
QQ聊天的表情列表版块，系统会根据用户上滑的力度来确定表情选择区域的大小，力度越大，列表区域占比就越大，同屏可供选择的表情就越多。
设计思考：
经常使用QQ表情包的用户都知道，其更新频率非常快。比如社会上的最近发生的大事件、互联网当前流行的热词，甚至在疫情期间，凡是跟疫情相关的表情包都在不断变化，从开始的安全防护到后面的线上办公等，以至于深受广大用户的喜爱。
QQ的表情功能其中还有一个细节，用户在选择表情时，系统根据向上滑动的力度来确定表情区域所展示的范围。滑动的力度较大时，考虑到用户可能需要在更多的表情包中选择的情况，固增大显示的区域，便于用户在同一屏界面中可浏览的范围更大，同屏展示更多的表情包让用户在更短的时间内找到自己所需，所见即所得，对用户进行的定性操作十分友好，从细节处理方面提升了用户体验。
017.「高德地图」地点打卡-未来回忆曾经的足迹
产品体验：
在高德地图的足迹功能里，可以对我们所在的地点进行打卡，系统就会以亮光形式显示我们去过的城市，并留下“✔️️”标记，点击可以查看自己的打卡时间和具体位置。
设计思考：
我们在高压的生活下及忙碌的工作中，曾经去过很多地方游玩或者路过，随着时间不断的流逝，这些都成了模糊的记忆。当有一天静下心来细想，好想去过的地方很少，甚至回忆不起来。
高德地图APP的足迹打卡功能可以帮助我们记录所去过的每一个地方，分为自动和手动打卡。在设置中开启自动打卡后，当用户使用导航的目的地属于名胜古迹、美食地标建筑等类型的地点，导航结束后，即可自动完成打卡，如有特别需要，还可以通过手动打卡记录每一个点。打卡功能虽然在表面上并非用户硬性需求，但在未来的某个时间看到自己曾经的足迹时也略表欣慰，还可以满足部分用户的虚荣心，也许在无意间就能抚慰认为自己去过的地方太少、较为伤感的幼小心灵，给与温暖的安抚与力量。
018.「优酷」会员转化-击溃用户最后一道心理防线
产品体验：
优酷普通用户在看影片前面的广告时，倒计时后面会提示xxx元可关闭广告，广告下方通过展示会员特权以鼓励普通用户升级会员，且定时滚动展示刚刚已加入会员的文字提醒。
设计思考：
不管哪个影视平台，无论何种设备，非付费会员用户在看影片前都需要先经过长达几十秒的广告，这是任何人都无法避免的一堵墙，广告除了可盈利之外，还能起到激励普通用户开通付费会员的用处。
优酷视频激励普通用户开通会员的的手段可谓是拍案叫绝。
①、利益引诱：在广告倒计时的后面直接展示开通会员的金额， 通过优惠等利益刺激手段，吸引用户继续完成对产品的消费。较小的金额可以降低用户的经济成本，同时增加用户对会员价格的心理接受程度，减少其防备心理，有很大的几率吸引用户产生开通会员的动机，促使用户行动增强转化（除了首次开通连续付费业务，所付出的金钱成本较低外，其他情况下价格并无优惠，不过一旦让用户产生了付费动机，这些都是后话）；
② 、增加说服力： 广告下方罗列了部分比较重要的会员功能，围绕开通会员后的特权并强调效果，以此证明会员内容的质量与真实性，吸引用户去了解，为用户增加开通会员驱动力；
③、羊群效应：提示****刚刚加入了会员，利用从众心理，因为用户的想法和行为容易受到周围人们的影响，往往会胜过自己的理性认知。通过前面的用户已做了前驱和后盾，不断的引导和刺激用户去开通会员（羊群效应在现实生活中遇到的很多。比如：大部分用户出去吃饭，对空无一人的饭店没有动力，往往会选择里面已经坐了一些人的店铺；走在外面，哪里围的人多，就想挤进去看个究竟）。
019.「网易云音乐」播放中的歌曲快速定位
产品体验：
在网易云音乐播放当前列表的歌曲后，当界面存在上下滑动的操作行为时，右下角会出现定位图标，点击可直接定位到正在播放的歌曲位置，如无任何操作，3秒后图标自动消失。
设计思考：
我们在听歌时，如果是无目标的行为，基本都会进入到某一个类型的列表或收藏歌单，进行顺序播放，比如飙升榜、新歌榜等。如果有兴趣，可能会在列表中上下滑动来看看是否有自己熟悉的歌曲，等最后要回到正在播放的歌曲位置时，就尴尬了，需要花费更多的时间来找到，在自己收藏的歌单中就更不用多说了。
网易云音乐在歌曲列表中增加了快速定位按钮，当系统检测到正在播放的歌曲列表中有滑动操作时，图标会自动出现，点击快速定位播放歌曲位置，方便快捷、省时省力。如果你的歌单中添加的歌曲太多，又无法找到播放的歌曲时，不妨试试右下角的定位按钮吧，此功能真的很人性化。
020.「boss直聘」多个入口-简化二次操作流程
产品体验：
在boss直聘求职关键词页面，单点复选框选中/取消，底部同时提供已选中关键词，可进行单个删除或通过左下方的清除按钮一键删除。
设计思考：
在用户的常规认知里，选项条件为数不多的复选框操作都是单点选中/取消，这种操作方式基本也成了用户的惯性思维，若站在用户体验角度深挖细节的话，即使是大众用户都认可，其实也没有最好，都还有上升的空间。
boss直聘的求职关键词选择，在这方面就做的更好，除了常规的单点选中/取消外，其底部还提供了已选中的关键词条，用户可在小范围内清楚的知道已选中的内容，让需求更加集中，便于进行统计、对比或删除等操作，避免在页面多个目标中寻找而增加时间成本。另外左下角还提供了清除按钮，需要重新选择目标的用户，可一键删除，节省了之前多次点击的重复步骤，简化二次操作流程。
021.「菜鸟」备注-快速找到列表中的包裹
产品体验：
菜鸟的包裹列表，左滑其中的一个，可通过包裹备注修改名称，方便用户在包裹较多时有目标的查看。
设计思考：
网购已成为用户的日常习惯，没事的时候淘宝逛一逛、京东走一走、不急用的就在拼多多砍一砍。但网购平台何其之多。我曾经碰到过这种情况，在不同的平台都买了商品，其中有急/不急用的。最为难熬的就是等待物流了，频繁的奔波于各大电商平台个人中心的订单页面查看最近物流状况，步骤繁琐不说，还浪费大量的时间，手机差的还会闪退卡顿，相信这也是很多网购用户的苦恼，直到菜鸟包裹的出现......
菜鸟定向的集合各大物流平台的包裹数据，通过手机号码，将单个用户的包裹归类到一个地方，非常方便。在使用过程中，还有一个很友好的设计细节，包裹名称备注。在包列表中，可选中其中的一个包裹左滑，对名称进行备注，便于用户包裹过多时需要对其中部分包较急的包裹进行频繁的查看，备注之后一目了然，能降低因误点造成重复操作的可能性，快速找到想要的包裹，方便用户有目标的查看。
022.「虾米音乐」符合产品特性气质的标签栏
产品体验：
虾米音乐顶部标签栏的选中状态，文字放大的同时配合一段起伏较大的音频波纹动效，彰显行业产品特性。
设计思考：
标签栏是APP界面中较为常见的控件之一，在视觉表现方面，只有选中、未选中两种状态，其设计也比较简单，通常会在文字颜色/字重大小上进行变化，标签下方加上小长条来区分两者的状态，用户对于这种表现方式也是高度认可的，如果不想被同质化，未在细节上下足功夫，就很难设计出彩。
虾米音乐的标签栏选中状态除了文字大小对比非常明显外，下方是一段音频波线动效，跳脱出较为常见的设计规范限制，从行业属性中获取灵感，把用户在现实世界中物理认知的“声波”形象来源作为产品特性，提取出具有独特气质的视觉音频波纹样式替代选中状态的小长条，这样能建立起视觉上的联系，让用户产生由内而外的一致感受，既有设计感又符合产品特征。
023.「QQ音乐」触手可及的选择性MV播放
产品体验：
在QQ音乐播放页封面图的右下角，会显示该歌曲相关的视频数量，点击则展开视频列表，通过左右滑动选择想看的视频，可直接进入视频播放。
设计思考：
有人说：听音乐是一种情绪，也是一种心情，能从不同类型的音乐中听出共鸣，去发现一些事物的美好。当我们发现自己喜欢上一首歌曲时，有没有想打开该歌曲MV一睹演唱者的风采，或者边听边看去感受歌曲意境和内容所带来的一些理解上的辅助。
QQ音乐将歌曲的MV展示在播放页封面图片的右下角并提示数量，近在咫尺，便于用户在听歌的过程中对视频选择性的播放。一般音乐类型的应用在都是一首歌对应一个MV入口，需要先通过页面的跳转才能对视频进行选择，QQ音乐的这种交互路径能避免用户在听歌过程中选择视频时造成中断，通过左右滑动选择想看的视频，选中即可直接进入视频播放页，优化了操作路径，减少操作步骤，触手可及且不打断沉浸式的音乐享受。
024.「微信读书」提升操作效率的进度条控制
产品体验：
打开微信读书的进度控制条，点击游标左右滑动，除了页面内容变化外，进度条上方会显示当前页码/总页码，并提示章节及标题；长按游标可单独对书本的页码进行精准化的切换。
设计思考：
读书就是和世界各个行业的人物进行一对一交流的过程，如果想通过读书收获成长，就要靠自己看书、学习、思考，并把知识用到自己的工作和生活中，不断让自己做出改变，因此也诞生了很多读书类型的应用，线上看书不仅能适合多样化的环境，还能节省经济成本。曾经有人感慨，电子书是线性的，而纸质书是立体的，想看前面有联系的内容就可以随时返回去再读，而电子书只能通过目录和书签来解决，要经过多次的操作和页面的跳转，且书本的内容都是通过数据传输、每次都要刷页面才能看到内容，有可能会打扰用户看书的思路，相对纸质书籍，看书效率和吸收程度就低了许多。
其实并非全是如此，微信读书考虑到体验方面，针对用户在读书过程中可能出现的前后频繁翻页的问题，在进度条控制细节上做了很多便捷化的设计。用户可通过点击或长按控制条上游标，根据自己的实际需求进行前后长/短距离的滑动，就能轻松满足自己所需要的页面转，并伴随明显的小窗文字提醒。此功能相对纸质书籍虽然不能堪称完美，但足以解决用户线上读书时最基本的需求，让操作流程变的更加简单，大幅度的提升了操作效率，节约时间成本并提成产品的易用性。
025.「哔哩哔哩」信条-承包笑点的逆向弹幕
产品体验：
在哔哩哔哩看《信条》电影，播放到时间发生逆向片段时，弹幕的文字及方向也发生逆转，即逆向弹幕，两者结合在一起非常应景，网友几乎被“惊掉下巴”。
设计思考：
有很多用户喜欢开着弹幕看视频，弹幕有可能是视频内容的良好补充，大部分视频是不能牢牢抓住观众，也不需要观众死死盯着看的。各种神弹幕、刷屏本身就是内容的重要组成部分，所以看着弹幕可以给我们在看视频的过程中带来更好的氛围及愉悦的体验（部分不爱开弹幕的用户除外）。
最近被一个脑洞的弹幕方式吸引到了-逆向弹幕。B站在《信条》电影里隐藏了一个很有趣的彩蛋，正负时间线穿插（片头也逆向了）的情节发展，设计了让人惊艳的逆向弹幕，跟电影的逆向片段组合在一起时非常应景，神奇且趣味化的弹幕方式让用户几乎“惊掉下巴”，看完电影后仍能记忆犹新。有人直言“当时在电影院看完信条后，是不是倒着走出来，影院就把买票的钱给退了”。
026.「淘宝」应对意外退出的通道
产品体验：
在淘宝的其他功能页面发生闪退或意外结束应该进程时，再次进入首页，会提供“打开上次访问的页面”的快捷入口，如无需要，几秒后入口自动消失。
设计思考：
智能时代，每个人的手机中应该都装有不下几十个APP软件。当我们正沉浸在某个APP当的内容时，因设备或其他原因意外的结束了应用进程，当再次打开时，需要凭借自己的记忆多番操作才能回到原来的内容处，甚至永远无法找到，为此真的是很苦恼。
淘宝针对软件意外退出的情况则留了一手，当用户在使用过程中，APP因意外情况退出时，下次进入，可通过首页提供的“打开上次访问的页面”入口，快速回到原先失踪的页面，再也不用担心内容丢失了，看似一个简单的入口，但通过细微的改进能给用户带来更好的操控感和易用性，便于用户通过短时间记忆还原。
027.「微信」行为预判-提升操作效率
产品体验：
我们在手机的其他界面发生截图行为时，打开微信对话框的工具栏，系统会把刚刚截取的图片以缩略图的方式展示在右侧，暗示询问用户是否有发送此图片的需求，几秒后会自动消失。
设计思考：
我们不管使用何种应用，在交流过程中有发送图片的需求时，除了应用本身提供的图片之外，其他都绕不开系统相册功能。如若深究用户体验，进入相册的操作路径是可以减少的。
从微信对话框页面打开工具栏，如在相近的时间内系统检测到有截屏行为时，会把刚刚截取的图片以缩略图的方式展示在屏幕右侧，点击即可发送，通过行为感知并帮助用户解决可能有发送此图片的需求，提前预判用户的操作，以提升选择效率。若无此需求，几秒后自动消失，丝毫不影响用户的其他操作。
028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂
产品体验：
在抖音搜索较为极端且消极的关键词时，比如：抑郁、服毒、不想活了等，系统会出现较为温馨的爱心画面，并通过情感化的文案鼓励以及提供心理援助渠道，以此来提高用户的积极情绪。
设计思考：
人们通常会借助于欢乐、开心来表达自己的愉悦，同时也会面临悲伤、忧虑的情况，需要表达心中的苦闷。如果没有得到有效的疏解、排遣，使得内心一直处于郁闷状态无疑是很糟糕的。尤其是目前处于高度压力下的年前人群，在环境因素、心理与生理创伤、家庭环境等情况的影响下，导致一些人因为心中的苦闷，得不到很好地宣泄、发泄，走上了极端的想法，其解决问题的方式不管是线下、线上都是从心理上入手。
抖音APP在面对极端且消极的关键词搜索时，并非跟其他应用的搜索结果雷同，而是以情绪激励的统一样式展示结果。首先通过温馨的爱心画面缓解较为消极的用户情绪，并通过积极正向的文案鼓励用户；其次，基于用户在心情低落时要得到安慰或鼓励的需求，平台提供了心理援助热线以及消极心理的疏导建议，帮助用户进行缓解或改善消极行为。作为一个短视频平台，虽然没有明确的义务去抚慰用户，但这种做法可以用温暖的方式传递爱与力量，也抚慰每一个被情绪困扰过的灵魂，让用户感受到亲切放松的氛围，是巩固用户粘性与忠诚度十分巧妙的方式。
029.「京东」送礼物-更是一种神秘和惊喜
产品体验：
在京东商城购物礼物时，可以通过商品详情页的“送礼物给TA”，节省很多中间步骤，直接在线上完成包装、贺卡、寄语和快递等“一条龙”服务，将礼物送到对方手中。
设计思考：
部分用户在特殊情况下，都有送礼物的小习惯，不管是礼尚往来、男女朋友还是送基友，有时甚至不需要理由，只想把最好的东西送给TA们。这时候可能去会店里（线上/线下）买一个对方喜欢的东西，然后经过包装+寄语，再快递给对方，因为整个流程的复杂，有时候不可避免会出现一些突发性的状况，难免造成尴尬。
在京东APP购买礼物则省去了一些列的麻烦，只需要选好礼物，即可完成从包装、贺卡、寄语和快递等“一条龙”服务，免去不必要的麻烦以降低出错的可能性，将操作流程和路径都进行了简化，让整个送礼的过程更。通过选择合适礼物的包装风格，制造出礼物的神秘感，送出的不仅仅是礼物，更是一种浪漫和惊喜。
030.「叮咚买菜」一顿吃光-减少食材的浪费问题
产品体验：
在叮咚买菜分类的“一顿吃光”列表中，菜品会根据专业厨师建议一顿的常规用量进行组合搭配包装，包括分量较小的调味品类也进行了小份装的贴心组合，避免食材偏多造成浪费或损耗。
设计思考：
“一粥一饭，当思来之不易”，勤俭节约，珍惜粮食是我国的传统美德。随着互联网带来的便利，很多人足不出户便可在线上平台完成食材的购买，但买菜也存在的很多困扰，比如买少了不够吃，买多了又浪费，没有一个确切的方案可以让买的一顿食材刚刚好，因此会造成食材的浪费和更多的金钱成本。
叮咚买菜推出的“一顿吃光”栏目，用倡导勤俭节约的用餐理念与生活方式，筛选出用户经常购买的食材搭配，再根据专业厨师对食材配比，进行分量、包装及动态调整，以最大化满足消费者需求，减少食材的损耗，在很大程度上解决了买菜很难确定食材分量的问题，不仅让用户每餐都吃得新鲜健康的同时，尽可能地减少食物浪费。
结语：
设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。
本期产品设计细节分享结束，我们下期再见。
转自：站酷
作者：大漠飞鹰CYSJ
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为产品设计者，经常遇到一个备受灵魂拷问的问题：怎么衡量我们设计的产品，用户体验是过关的？
今年，我们在内部中后台产品进行尝试，发现「易用度」可以作为合适的度量指标，并成功推广到 35 个产品，帮助PD、设计师、工程师等产品设计者去衡量产品体验现状，发现改进机会点。实践证明，易用度，相比满意度、尖叫度、NPS，更适合技术类产品的体验度量。结合用户行为数据，可以为用户画像、改进方向、运营策略提供更准确的决策依据。
在掌握了这些信息之后，我们在内部的技术类产品上，进行了一轮新的探索。经过半年时间的试点，结合业界的解决方案、内部产品的业务特性，我们最终选择主观衡量法，并使用「易用度」这个衡量指标。
为什么易用度相比其他指标更适合技术类产品呢？主要有 3 个原因：
结合行为数据，易用度可以进行描述、分类。使用现状描述找出低分人群的高频问题，使用对比差异找到多角色的不同诉求，分析影响关系找到影响易用度的主要因素，结合用户行为数据进行聚类找到典型人群。
文章来源：站酷 作者：Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
品牌体系的长期价值是什么？如何构建完整品牌体系？
本文将以网易智企品牌设计体系的建立过程为案例，与大家分享一下品牌体系化过程中的经验和总结。
△ 网易智企-品牌设计体系
目录
网易智企是一站式企业服务提供商，依托 23 年 AI、大数据、通讯音视频技术，以 PaaS、SaaS 为主，提供智能化、数据化、场景化的企业服务解决方案。
网易智企的前身，是网易云信和网易七鱼两个的产品。2019 年初，网易集团决定整合 B 端资源，成立一个新的事业部——网易智企，并在此之后陆续打造了网易定位、网易互客等多个优秀产品。
至此，网易智企的品牌架构由两个独立的产品品牌，逐渐变成了事业部品牌+多个子品牌的品牌架构。
但是，因为原有的两个品牌（即云信、七鱼）已经运营多年，在设计上并不统一。而事业部品牌为新设计的品牌，再加上其他的子品牌，最终造成了多个品牌在设计上“各自为政”的现状。
并且随着网易智企的快速发展，子品牌不断的变多，我们与市场部同学便逐渐发现了一些问题。下图是市场部同事在 2019 年发表在朋友圈的一张图，便是当时品牌的现状。
△ 网易智慧企业现状（2019 年初）
虽然产品线愈发丰富，整个事业部也在不断成长中。但是，若是品牌设计体系不够清晰，将会对未来的品牌传播造成非常多的问题，之后的修正成本也会越来越高。
如何改变现状？我们是否能够主动去推动事业部进行整体的品牌升级？能否通过设计去构建一个完整的体系，以满足网易智企未来的发展需要？
因此，在发现这个问题后，我们便马上开始了品牌设计体系的构建工作。结合之前的品牌经验，并在查阅大量资料进行研究后，逐步制定了完整的解决方案。之后与市场部同学一起合作，共同推进了品牌体系的构建与落地工作。
在企业的成长过程中，随着业务的不断拓展，自然而然地会产生越来越多的子品牌。在这个过程中，许多优秀的企业通过长期的实践，通过不同的方式，逐步构建了属于自己的品牌体系。比如联合利华、大众企业集团、苹果、雀巢、谷歌等等。
品牌体系一共有哪些构建方式？他们分别适用于哪种情况？而我们又应该用何种方式去构建品牌体系呢？
带着这些问题，我开始进行了品牌体系构建的研究。通过大量的案例分析与调研，我总结了以下几种最常用的品牌体系构建方式：
自由家庭式，顾名思义，一切皆为 Free Style。子品牌与母品牌几乎无关联系性，完全自由地进行各自发展，因此品牌在设计上和基本毫无关联性。
这种品牌模式，通常适用于强子品牌战略的集团公司。不同的子品牌之间并无依存关系，也不需依靠其他子品牌、母品牌进行背书。而是各自在领域中独立运营，甚至形成差异化竞争，以扩大在单领域的品牌丰富程度，占据更大的市场份额。
△ Free Standing 自由家庭式
比如联合利华集团，所有子品牌几乎均采用自由家庭式，在不同的细分领域拥有多个子品牌。比如个人护理用品领域，主要品牌有旁氏、多芬、Iluminage、卡玫尔、清扬、凌仕、中华、力士、夏士莲、舒耐、凡士林等。食品系列品牌有家乐、老蔡、立顿、四季宝、净水宝、可爱多、梦龙、和路雪等品牌。
很多品牌你甚至意想不到这是出自联合利华之手（或者被收购了），但仔细查看产品介绍，均会发现联合利华的身影。而在产品广告的最后 1 秒，也会快速出现联合利华这个“爸爸”的身影 。
△ 联合利华集团-品牌体系
再比如 VOLKSWAGEN（大众汽车集团），所有子品牌也均采用自由家庭式。旗下有奥迪、斯柯达、宾利、西雅特、布加迪、保时捷、兰博基尼、大众、斯堪尼亚、杜卡迪等众多子品牌。通过差异化竞争，在汽车行业的不同领域（家用车、豪华车、摩托车、重型卡车、巴士等）的不同级别中，均占据了不错的份额。
面对不同的消费群体和阶层，品牌需要承载不同的品牌概念，解决不同的问题。因此，只有采用自由式家庭式的品牌家庭，才能在不同的领域中有针对性地进行品牌的建设。
当然，这种方式也具有一定的负面作用。如果当两个子品牌在同一领域重叠性较大时，容易导致品牌在“内部竞争”中逐渐弱化，比如斯柯达汽车的定位与大众汽车重叠性过大，定位区分不明显，而与大众的三大件又是相同的，因此逐渐在市场中被边缘化。
△ 大众汽车集团-品牌体系
我们可以总结一下自由家庭式品牌体系的优劣势。
优势：
劣势：
基因家庭式，即母品牌与子品牌拥有部分相同的元素或风格特征，并通常具有延续性，而这种元素被称为品牌基因。
基因家庭式是品牌体系中最为常见的表现方式，它通常适用于强母品牌的集团企业。此类公司通常在母品牌发展成熟后，基于母品牌进行其他领域的拓展，逐渐形成不同的子品牌。因此，子品牌需要延续母品牌的基因作为背书，从而提升子品牌的知名度与信誉。
△ Gene Delivery 基因家庭式
而基因家庭式这个大的方向中，按照基因传递的方式进行细分，又可以归纳为以下 3 种最典型的形式：
基础版：将母品牌图形直接融入到子品牌中
比如雀巢公司的部分重要子品牌中，都将母品牌的品牌文字融入到品牌图形中，而这也是雀巢母品牌最容易识别的部分。
通过这种方式，子品牌既保持了相当程度的自由度，同时用户也能直观地通过品牌基因识别出子品牌与雀巢母品牌的关联性。
△ 雀巢公司-品牌体系
以及美国联邦快递 FedEx，则是以母品牌为基础，通过改变局部颜色、增加品牌文字等方式来构建其不同的子品牌。保证了一定的差异化的同时，与母品牌形成了强关联，达到了比较强品牌延续性。
△ 美国联邦快递-品牌体系
进阶版：提取母品牌关键特征，融入子品牌中
比如亚马逊公司，将其标志性的“箭头笑脸”提取出来，与各自不同的子品牌字体组成了新的品牌。这种方式相对于基础版又提高了更高的灵活性，但同时也保持了相当程度的品牌延续性。
△ 亚马逊-品牌体系
高阶版：提取母品牌基因，通过重构形成子品牌
比如 google 公司的新品牌与其各子产品的关系。通过提取统一的颜色以及扁平化的纸片效果，经过重组以后得到不同的图形，形成自由度极高，但又拥有高度统一性的品牌体系。
△ Google-品牌体系
但是，这种方式在设计上的要求较高。如何在差异化的同时，保持一定的品牌关联性，需要非常精准的把控。
我们可以总结一下基因家庭式品牌体系的优劣势。
优势：
劣势：
克隆家庭式，即子品牌直接使用母品牌的品牌图形与品牌字体。子品牌通常与母品牌在品牌上毫无差异，或者保持图形、颜色、字体等特征的高度统一性，只进行文字内容的更换。
△ Clone Family 克隆家庭式
比如苹果公司与其所有子产品的品牌，直接沿用苹果的主图形，并配合统一的色值、字体、间距等品牌规范，仅在文字进行相应的命名。通过几乎一致的品牌表现，当你识别任何一个子品牌时，便能感受几乎一致的品牌传递，甚至是各种细节，比如包装风格、说明书等等。
△ Apple-品牌体系
当然，严格意义上来说，你可以认为他们只是同一个品牌。但当一个单一属性的品牌需要扩张到更多品类时，就必须带上相应的属性。你可以认为“iPhone”、“MacBook”、“TV”只是品牌的附加说明，但当他们组合在一起并出现在新的品类中时，便是一个新品牌的概念了。
这种品牌体系通常适用于企业在同一个的领域中，开拓不同的细分领域。他们传递的品牌概念与价格定位是一致的，比如苹果的所有产品都代表科技感、细节完美、设计精良，在价格上也通常占据比较高的层级。
但是，这种方式也具有一定的局限性。因为你必须保证所有子品牌所传递的上述所有特性，都与母品牌是一致的。如果某一项有差异，则品牌母品牌所蕴含的一切将不能被子品牌的用户群体所接受，这也是当时 iPhone 4C、5C 失败的原因。当你的价格定位与母品牌存在差异时，你的用户便不再认同这个子品牌，以及背后传递的一切。
为什么小米要开拓红米系列、华为要开拓出荣耀系列，为了他们放弃克隆家庭式而转向自由家庭式？就是这个道理——你不可能靠一个品牌传递不同的声音。
我们可以总结一下克隆家庭式品牌体系的优劣势。
优势：
劣势：
1. 确定策略
通过网易智企品牌现状的分析，并结合智企未来的发展需要，我们最终确定——使用基因家庭式-进阶版（即提取母品牌的关键特征，融入到子品牌中）的品牌体系是最为合适的。因为这种方式既能保证品牌设计的整体统一性，又能保持足够的灵活性，以适应不同品牌的需要。
但是，提取什么样的品牌基因是最合适的？
网易七鱼、网易云信原本就拥有多年的产品历史，如果只提取一方的基因，显然不太合适。如果大改品牌图形，则会对原有用户的认知产生较大影响，并不是一个理想选择。
最终，我们决定了一个大胆品牌策略——以品牌字体作为品牌基因的承载物，并通过标准化的框架规范使品牌的整体一致性得到的统一。通过这种方式，也可以将品牌图形的自主设计权留给子品牌。
这种品牌策略的主要优势有：
整体品牌感强，品牌基因容易延续。
后续可将品牌设计流程标准化，提升设计与一致性。
原有品牌可只升级品牌字体和框架规范，保持原有品牌图形，从而不影响用户认知。
通过这种方式，我们可以对原有的网易七鱼、网易云信，以及网易智企的品牌做一个统一的升级，小幅优化品牌图形、统一品牌结构，并以全新的字体风格重构品牌字体。这样，我们既能够达到设定的目标，又能够最小程度的对品牌认知造成影响。
2. 可行性调研分析
这种构建策略是否可行？想要让相关人员理解这个策略，仅仅依靠设计方案是不够的。因为大家的视角不同，并不一定能够从设计的角度去理解。因此，我们必然要充分地进行论证，并拿出相关的案例去佐证，才能让设计体系的的推进更具实践性。
通过市场调研，我们分析了最近 10 年中优秀的品牌升级案例。在这其中，腾讯的品牌升级案例与我们的策略非常契合。
2017 年 11 月，为庆祝即将到来的 20 周年，腾讯发布了一款新字体——“腾讯字库”，并借此机会对部分品牌进行了升级，以此来加强整体品牌感。
通过发布全新的品牌字体，腾讯公司构建了以品牌字体为核心的品牌体系，并取得了良好的效果。而这种品牌体系的构建方式，与我们的设想不谋而合。
因此，我们认为以品牌字体为核心的品牌体系构建策略是完全可行的。但是，这种方式所需要投入的资源是巨大的，且周期通常比较漫长。
我们又如何克服这个问题？
虽然无法得到如此多的资源，但我们可以通过合理的计划与推进策略，逐步去构建整个体系。不断地进行策划、构建、落地、完善，形成一个完整的闭环，通过不断实践去提升、丰富这个体系，最终让这个体系变得越来越完整。
确定策略之后，我们开始着手进行品牌体系的构建工作。
1. 品牌字体设计
品牌设计体系的构想虽始于 2019 年初，但真正的准备工作则始于两年前。在我刚接触网易七鱼和网易云信时，便发现了品牌中存在的一些问题。虽然没有合适的时机进行品牌升级，但研究和尝试则不断地进行中。
在此期间，我开始着手设计一款全新的专属字体，也就是之后的网易 B 端产品的统一品牌字体。
通过对于网易智企品牌调性的分析，以及未来发展的需要，我确定了品牌字体的基本调性：现代、简约、刚正、大气、品牌基因的融入。
作为科技类企业品牌的字体，它应该是有现代感和设计感。其次，为了适应不同的产品调性，同时传递出信任感，我希望它是刚正、大气的。最后，作为品牌体系的载体，它必须具备专属的品牌特征，才能以此为基础形成统一的品牌体系。
因此，在字形的结构上采用了较为刚正的框架，干脆利落的同时，在转角带有一定的弧度。方中带圆，刚中带柔，形成美学上的互补。而在遵从中文字体结构的同时，也对笔画本身进行了适当的简化（比如勾，用切割式的笔画代替上勾，但感知上仍然是勾），让字体更具现代感与简洁感。
而整个字体的灵魂，则是将网易的特征以笔画特征的形势融入字体中。贯穿始终、恰到好处，使其作为统一的品牌基因延续在品牌家庭中。
网易的建筑风格在所有公司的大楼中，都是属于非常有识别性的。除了深邃而低调的色彩外，整个建筑从外形到地板、再到每个细节中，都将拥有独特切角的菱形融入其中。因此，我将这独有的菱形的四个边单独拆分，作为字体的基本笔画。通过简单的移动，四个边正好形成了网易的首字母“W”。继续移动，将其从两边的翅膀往中间压，则形成了一个网状的 XX 形状——这不正是网字中间的图形吗？
网易建筑风格——网易的“W”——网易的“网”，网易的基因就这样融入到字体中。而另一个更重要的特征，则是这四个笔画与水平线相交，所呈现的统一倾斜角度——80度切角。
2. 初步制定框架规范，预先进行品牌升级
完成字体风格的定义后，下一步就是以品牌字体为核心，进行原有 2 个品牌升级的方案设计。
首先进行的是网易云信的品牌预升级。将网易云信的品牌字体以全新的字体风格进行重新绘制，并结合品牌图形制定了全新的品牌框架。比如品牌图形与品牌字体的间距，确定为字体高度的 1/2，而安全距离则定义为与字体高度相等间距等一系列规范。
通过初步的框架制定，一套围绕着品牌字体的初步规范便制定完成了。
完成云信的品牌预升级后，又进行了网易七鱼的品牌预升级。因为原有的品牌图形存在一定的优化空间，除了品牌字体重新绘制与标准规范外，还对品牌图形和品牌色做了升级，让品牌图形保持原有识别性的基础上，更加圆润、灵动，颜色也更具科技感。
通过两个品牌的预升级，除了初步对整体框架规范进行了制定，也对品牌字体的品质和实用性也得到了良好的验证，为接下来品牌升级工作的推进奠定了一个比较好的基础。
1. VI 设计文档
品牌设计不仅仅是完成图形的设计，更重要的是使品牌在后续使用中更加规范，而品牌 VI 识别系统是其中最重要的工具。文档的初衷并非约束设计，而是使品牌设计的流程更加标准化，提升非关键环节的工作效率，让设计师将时间真正聚焦于的品牌创意阶段。
因此，我们制定了适用于不同场景的 VI 设计标准文档。整个文档的设计准则：一致性（整体框架、页面结构高度一致）、专业性（文字表述、规范演示高度专业）、灵活性（允许在框架中的寻求灵活创新）。
封面样式：推荐的默认为标准品牌色+Logo 图形样式，除此之外还提供了背景图，在保持框架一致的基础上，也具备了一定的灵活性。
△ 封面样式
目录样式：提供基础版的 2 个模块版式和 3 个模块的版式。
△ 目录样式
内容框架：文字说明的区域与版式，内容区域的不同分割模式，尽可能地适应不同的内容需求。
△ 内容框架
2. 品牌展示规范
在品牌的传播和使用中，VI 识别手册相对专业性会更强一些，而在平时的展示中，更多的会进行单独的品牌展示。因此，我们也为此制定了不同场景下品牌的单独展示规范，以及在标准尺寸（1920×1080）下的页面布局、图形显示比例等规范。
△ 品牌图形单独展示
△ 横式标准组合
△ 竖式标准组合
3. 为新品牌制定 VI 系统
完成标准化的 VI 设计文档后，下一步便开始着手进行新品牌的 VI 识别手册的设计工作。按照我们已经制定完成的设计文档，品牌 VI 识别规范的输出效率得到了较大的提升。
△ 网易云信-VI 视觉识别系统
△ 网易七鱼-VI 视觉识别系统
最终，我们完成了两个品牌的 VI 视觉识别系统，为后续的体系化推进做好充分的准备。
通过全新品牌字体与品牌规范的确立，并完成了 2 个品牌升级、1 个新品牌设计以后，我们将完整所有的准备工作整理成一个完整的提案。
下一步，就可以发起正式的品牌升级研讨会了。会议目的是通过整体的背景分析与方案呈现，让各相关方都能够达成一致意见，最终完成正式的品牌体系落地。
1. 提前与关键相关方沟通，对齐目标
在准备好充足的方案后，如何推进并最终落地？
这是非常关键的一步，也是许多设计师比较不擅长的领域。想要顺利的推进项目，光靠一个好的解决方案是不够的，还需要在正确的时间点，寻求各相关方的支持。
因此，首先就需要了解各相关方对于品牌现状的看法，并通过现状的分析，初步对齐我们的“项目目标”——即解决长期的品牌混乱问题，而这也是我解决问题的初衷。只有对齐了目标，我们才能站在共同的出发点，并在合适的事件抛出解决方案。
下图是当时与其中一个市场侧关键相关方沟通的过程。当我们分析完目前的现状后，相关方对目前的现状表示认可，并期待解决方案。这个时候，我们再将已经成熟的方案展示出来，才能让相关方站在同一角度去思考问题，并最终认可解决方案。
之后，我以相同的方式询问起产品侧和其他侧的相关方。大家在对齐目标以后，都有一个比较清晰的认知，也对我提出的解决方案非常认可。这时候，我们的项目便有了进一步推进的基础。
2. 发起会议，正式推出方案
通过提前的沟通，确定了各相关方的态度，同时了收集了一些小小的意见，并对方案进行了微调。之后便与各相关方正式地发起了品牌升级会议。下面是这次会议的简要过程：
会议开始后，我们首先进行背景分析。
为什么需要进行品牌升级？简要分析 2019 年初智慧企业的品牌现状，以及智慧企业未来的品牌发展方向：整体品牌感弱，品牌一致性过差，无法满足智慧企业长期的发展需要。
同时，我们也对目前现有的品牌设计进行分析，发现了较多的问题。比如品牌字体的风格不统一、比例不一致、色值不统一等问题。而这些问题可以也可以通过品牌升级进行解决。
最后，随着网易智企的快速发展，智慧企业的子品牌会越来越多，而品牌联合推广的频次将会越来越高。这意味着品牌 Logo 设计混乱的现状将会产生越来越大的影响力，而我们的修正成本将会越来越高。
为了解决这几个方面的问题，我们推出了最终解决方案——进行品牌升级，并建立网易智企品牌设计体系。
如何建立品牌体系？
通过策略分析与市场调研，以及未来网易智企发展的前瞻性思考，我们最终确定使用基因家庭式-进阶版的品牌体系是最为合适的，即提取母品牌的关键特征，融入到子品牌中。通过这种方式，我们对网易七鱼与网易云信进行了整体的品牌升级，并为所有新品牌制定了详细的 VI 识别系统。
△ 品牌升级会议 PPT
经过这套完整的方案阐述，大家在会议中一致通过了网易七鱼和网易云信品牌升级的方案，并对以品牌字体+品牌规范为核心的品牌设计体系表达了正式认可。
3. 以规范对事业部 Logo 进行升级
品牌设计体系经过各方认可以后，推进主品牌的升级就轻松多了。由于原有事业部的品牌字体和品牌色存在一定的设计问题，在确定了品牌体系的标准字体与规范后，我们便顺势对事业部的品牌进行升级。
当一个体系被认可后，遵循这个体系就变成了理所应当。因此，网易智企主品牌升级的工作也得到大家的认同，并顺利推进下去。
之后，我们同样为网易智慧企业主品牌制定了详细的 VI 识别系统。
△ 网易智慧企业-VI 视觉识别系统
至此，我们已经完成了现有的主品牌进行了整体的升级，网易智企的品牌矩阵已经初步形成。对比原有的品牌矩阵，整体品牌感得到了极大地提升。同时，也将会对之后的新品牌形成良好的规范，并促使这个体系不断地成长。
4. 发送邮件，全员通知并规范使用
通过会议并得到各相关方确认后，最后一步便是发送正式的品牌升级邮件了。
通过发送邮件，正式宣布品牌升级，并通知每一个关键相关方。这就相当于合同的最后一步，整体体系便正式地得到了确认、生效。同时也将 VI 手册和设计文档同步给大家，引导各方正确地进行品牌使用。
1. 不断丰富的品牌矩阵
随着网易智企的快速发展，我们的品牌也逐渐增多。从 2019 年初进行品牌预升级，到 2019 年底，我们一共推动了 4 个产品进行品牌升级，并以新的规范进行了 4 个新品牌的设计。
有了品牌设计体系后，大家对品牌设计的态度也发生了明显的改变。
每当有新的产品需要进行品牌设计时，大家便会自觉地去遵循这个体系——“按照品牌体系的标准设计即可”。“我们只需要按照体系来就行了，剩下的图形创意工作就交给你们了”。
在此之后的每个新品牌设计，我们都按照标准化的设计流程进行，将重点的工作投入在图形的创意上，而不是反复地去尝试各种风格。我们的品牌设计效率得到了极大的提升，而各方对于品牌方案的确定也变得顺利多了，因为大家只需要判断图形是否符合产品特点即可，无需反复对比各种品牌风格。
2. 英文品牌规范的加入
随着品牌设计体系的不断发展，我们的品牌将不仅仅局限于中文，也会涉及到单独的英文品牌。经过我们的长期实践，英文品牌规范应运而生。
MCtalk 是网易发起，由网易智慧企业部主导的科技活动品牌:通过汇聚深度思维(Mind) 和顶尖创意(Creativity)来打造价值集合与传递的平台。包含 MCtalk Forum 论坛、MCtalk Conference 峰会、MCtalk Live 分享、MCtalk Park 开放日和 MCtalk Academy 私享会等系列活动。
3. 周年数字品牌规范
随着不同产品线周年庆，许多品牌会设计专属的周年组合样式。为了因为不同周年 Logo 而影响产品统一性，同时减少了不必要的工作，我们设计了品牌+数字周年的品牌规范。
每个品牌都可以应用统一的周年组合形式。让不同品牌在周年组合中，也能拥有统一的品牌感。
但是，周年品牌规范的统一，并不意味着每个活动独特性的缺失。我们仍旧可以围绕数字+主题发挥出强有力的创意，为每次活动创造丰富的主视觉。
随着品牌设计体系的设计规范与标准化文档已经逐步成型，这份文档可能会发送给许多设计师进行使用。但是，具体设计时，许多设计师可能会产生一些疑问，导致字体设计、图形设计上面会出现问题。
那么，如何使用这份框架规范，正确地进行品牌设计呢？下面，我将以网易云商的品牌设计过程为例，大致演示一下这个流程。
1. 品牌字体设计
品牌字体的设计，我们在文档中给出了统一的字体风格，以及目前已经设计完成的品牌字体。如果字体已经存在，则可以直接获取，无需重复设计。
比如网易云商的品牌字体中，“网“”易”“云”三个字已经出现过，则直接取用，根据规范进行“商”字的设计即可。
字体的设计，大概有三个步骤：
确定字体的骨架：字体设计，首先要保证字形的结构准确，遵循汉字的书写规律。否则，将会影响字体的易读性，让字体看起来不够自然。这一步，推荐多去借鉴已有的一些优秀字体，网易正体的字形结构，参照了“方正正中黑简体”和“黑体”这两个字体，在设计时可以先研究相同字形的笔画结构。
融入品牌基因：品牌基因，包含了横线末端 80 度切角，折角处的圆角，勾、点的简化处理等统一风格。同时，笔画带有细微的圆角，使字体本身刚而不锐。
整体调整，细节优化：最后一步，则需要凭借字体设计经验，对笔画进行优化，使其遵循字形结构的前提下，更严谨、更具设计感。这一步，若没有相关经验，建议与我或者有字体经验的设计师进行探讨。每个字体力求严谨、优美、更有设计感，以便未来其他设计师使用。
2. 品牌图形设计
品牌图形的设计，是品牌设计中最为关键的一个部分。设计师需要在契合品牌理念的基础上，设计出最符合需求的品牌图形。也需要让品牌图形在风格上保持相对一致。
在网易智企品牌体系中，推荐以平面化的图形进行品牌设计。这样能够保证图形足够简洁，并适应不同的场景使用。同时，品牌图形应尽可能地与母品牌保证一定传承、关联性。
通常情况下，设计师需要在充分理解概念的基础上，进行多个方向的尝试。最终逐渐缩小范围，直至最终方案的确定。
网易云商的核心概念是，成为企业的商业增长服务平台。因此，“增长”这个概念应该贯穿于品牌图形中。而云商的产品皆为 SaaS 产品，而“商”的首字母是“S”，因此，S 也成为云商的一个标志之一。云商的目标，希望打通企业营销全链路，因此，全链路也成为附属的概念之一。
因此，整个品牌图形呈现的是一个向上增长的字母“S”，它像火箭一样向上发射。而整个图形，则由三段线条构成流畅的“S”线条，寓意三个品牌所形成“营销全链路”的概念。
为了让整个图形更严谨、细节更完善，在大致确定品牌图形后，设计师还需要巧妙地通过辅助线，去完善和优化整个品牌图形。为了避免切角过于尖锐，也同样在转角处加入了细微的圆角，使其优雅而柔和，并且更好地与品牌字体相契合。
3. 品牌基因的延续
网易云商是网易智企旗下的商业增长服务平台， 旗下包含网易七鱼、网易定位、网易互客三大产品。因此，品牌的传承性显得尤为重要，如何巧妙地表现出其中的关联性，是品牌图形能否承载更多含义的关键。
在品牌图形的风格中，网易云商的图形使用了与网易智企相同的线形风格。同时，线条的倾斜角度，也延续了网易智企品牌图形的 25 度倾斜。
在品牌图形本身，则巧妙地融入原有的 3 个子品牌特征。比如线条末端传承了七鱼的鱼形尾部，上下两个线条传承了互客的“互手相连”图形，而线条前部的尖角则传承了定位“精准尖头”的图形。
虽然这三个原有的品牌，之后将逐渐融合成新的品牌。但是，它们并没有消失，而是以另一种方式进行了延续。有延续、有情感、有温度，才能让用户更有记忆度，也更能让陪伴了这么多年的图形有一个精神的传承。
同时，整个图形又像一个 DNA 双螺旋基因，互相环绕增长。寓意网易云商，将成为企业的增长基因这一概念。
最后，通过统一的品牌框架规范，将品牌图形与品牌字体进行结合，形成了最终的完整方案。
4. 制作完整品牌 VI 识别系统
最后一步，便是按照 VI 标准文档，快速进行品牌 VI 识别手册的设计。标准文档中已经覆盖了基础的品牌使用规范，如果需要增加规范，可以按照相同的版式进行手册内容的新增。
随着更多品牌的加入，品牌设计体系的大家族也变得愈发丰富了。我们不仅获得了一个高度体系化的品牌矩阵，同时也形成了一套更、更规范的企业品牌设计流程。并且，随着我们的影响力不断扩大，逐渐也吸引了更多品牌加入到这个体系中…
1. 自我成长的字体库——网易正体
在每次新品牌设计的过程中，都会遵循统一的字体风格进行新字体的绘制，品牌字库也因此不断丰富。我们希望它最终将成长为一款完整的品牌字体，并对其进行了正式的命名——网易正体。
我们并不刻意去“生产”字体，而是让其自然地随着新品牌的加入不断的成长。
需要说明的是，虽然我们将字体的设计权交给设计师，但我们仍旧会对每个字体进行评审。除了字体风格的统一之外，我们对字体本身的基本要求也同样严格，比如字形结构的正确性、字体美感是否达到标准等。
随着品牌体系的影响力越来越广泛，我相信我们的品牌字库也会越来越丰富、完善。我们也欢迎更多的内部品牌遵守这套规范，一起加入网易 B 端品牌设计体系、网易正体的“共创计划”中。
2. 标准化的设计流程，更高的设计效率
通过对于整个设计流程的优化，我们将品牌的框架规范设计、品牌字体设计、品牌 VI 规范这几个流程进行了标准化，以此来提升整体的设计效率。
设计师可以将更多的精力专注于前期的品牌图形与概念的创意上，而之后的工作可以用这个标准化的流程来完成。更重要的是，这并不是单纯设计层面的流程，二是经过整个团队确认的流程。 因此，只要图形创意获得通过，那么后续的流程便可以快速完成可出产出，无需再次与各方确认。
通过实际的测算，对于传统的设计流程，我们可以将品牌字体的设计时间提升越 60%（如果字库足够丰富，那就是 100%了），整体规范输出效率提升 80%。
最终，我们通过这套标准化的规范节约了大量的时间，同时逐步构成了非常完整的品牌体系。我们也希望这套标准化流程能够帮助更多的品牌。
3. 围绕品牌体系的内部生态
我们通过不断的品牌设计与升级工作，通过不断成长的品牌、不断完善的标准化流程，最终完整了网易智企的品牌设计体系的建设工作。
基于所有的 VI 规范都是同一标准的，所有场景的规范可以任意组合、替换，这使得我们可以以统一标准输出给市场、产品人员，并逐步去建立后续的统一规范。
随着品牌体系的完善，我们的推设计广体系、产品设计体系才有了建设的基础。围绕市场侧，我们建立了统一的推广体系，用以规范线上线下的推广输出规范，产品官网的规范以及活动页等规范。而围绕产品侧，随着品牌体系的认同，FishDesign 的统一使用得以有了“群众基础”，并基于样式组件化+规范体系化建立了产品设计体系。
总而言之，品牌体系是所有体系化的基础，也是智慧企业设计体系的核心。只有顶层品牌的统一，才能在顶层认知上影响每个产品线，并逐步去引导中层、底层规范的统一。
2020 年下半年，网易智慧企业的中文名已经正式升级为网易智企，欢迎关注我们的产品～
4. 更大的影响力，“B 端品牌体系”共创计划
我们为什么要建立品牌体系？
回到最初的原点，除了帮助网易智企解决当前阶段的品牌问题外，还有另一个原因——在网易内部建立一套指导性品牌设计规范与流程。
设计不仅仅是纯粹的创意性，也不是片面的规范性。
体系的目的并非强制性的规范（我个人并不推崇毫无意义的统一）。体系的目的在于引导性、在于选择性。我们希望提供的是一个基础标准和流程。也许某个产品的设计师并不擅长品牌设计，也许大家有这套体系需求，那么大家可以有一套高品质、的品牌设计与落地流程。
也许某个产品线觉得这套体系不够满足目前的现状，但对于品牌的基本标准不清楚，对于品牌设计流程不够清晰。那也可以这套体系的基础上进行创新，借鉴这套设计流程。
基于这个目标，我们已经将品牌规范与标准文档进行了小范围的开放试验。截止到 2020 年的上半年，已经有多个品牌开始使用这套标准化流程进行品牌升级与规范输出，比如网易易盾、网易轻舟、网易疾风等。
品牌设计体系更大的价值在于——帮助品牌快速建立秩序，将时间留给创意。而体系本身，也会因为每次的创意，变得更丰富、更完善。通过不断地正向循环、自我迭代，最终成为一个更大生态。
在无序中寻找秩序，在秩序中寻找创意，让世界变得更有序、更有趣、更美好。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。
单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。
特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。
点击选择器
点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。
特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。
建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。
举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。
特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。（选且只能选择一个选项）
建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。
举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。
滑动选择器
特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。
建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。
举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。
多联动选择器
特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。
建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。
举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。
△ 选择城市时，我们必须要先选择省份，再选择城市，最后才能选择县；
多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。
上图则没有先后顺序，不过当你首先选择颜色时，如果没有相同尺码的衣服，缺货的尺码则不会被选中，先选择尺码也是相同道理。
切换开关选择器
特点：切换开关选择器有且只有两种选项，用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效，常见的使用就是授权。开关的默认状态并不都是关闭的，还要从产品本身的设定上来决策。
建议：如果某开关的功能是用户经常使用的状态，那么可以在默认状态下打开开关，不过需要注意的是在某些特殊的开关按钮需要打开时，必须要提前告知用户。
举例：当我打开UC浏览器的设置时，它的辅助功能就使用了切换开关选择器，切换的开关只需要点击即可。
可搜索选择器
特点：可搜索选择器一般用于选择项较多时，特别是对于电商购物类的APP搜索选择器是必不可少的，搜索选择器会根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
建议：在搜索区域输入文字时，可给予用户更多的文字提示以及以及引导类信息。
举例：小红书在搜索时就会出现数字化的信息提示，这样能够很好的引导用户进入到想要的搜索结果：笔记或者商品页面。
地图选择器
特点：作为最特别的选择器，它的功能是复杂的，它的操作方式也是多样化的，地图选择器的操作可点击、可拖拽、可放大缩小等等，它多用于生活类APP。
建议：可以在选择器中加入更多趣味、互动、可感知的设计，如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。
举例：打车类APP必用的地图选择器，滴滴出行的用户可以实时看到车辆信息，可以采用点击、拖拽、放大等操作来选取上车地点，选取后还有文字信息提示，让用户确认操作是否正确。
贝壳APP则用地图选择器来让用户选择二手房，同时也采用了联动式的效果，第一步是查看区域，可以明确看到区域的售房套数，点击选择区域后我们可以看到每个路段的房子套数，点击路段后就可以看到每个楼盘的套数以及均价，直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况，有更好的对比性与选择性。
当单选选择器不能满足用户需要时，这时我们就可以采用多选选择器，一般常用的多选选择器都是采用点击的方式，当然也有滑动类型的多选选择器。
点击多选选择器
特点：当用户想要选择多个类别的情况下，我们就可以用点击多选选择器来展示提供给用户选择，通过屏幕点击选中或取消选中该选项，它不会立即触发操作，需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量；多选项时触碰区域不能太小，以免造成误操作。
举例：小红书在选择感兴趣的内容时就采用了点击多选选择器，不过在选择兴趣时它就强制用户至少关注4个兴趣，而对于单兴趣或者少兴趣的用户来讲，这无疑会造成用户体验的不佳，被逼再次从中选择次要的兴趣。
滑动多选选择器
特别注明：从用户的角度来看，它可以选择多个区域段的内容，所以我把它分为多选选择器中。
特点：当系统给出的选项不在自己的选择区间时，可以很好的自定义选择区间，把定义权限交在用户手里。同样，它需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：在用户滑动操作期间要有明确的操作提示，让用户时刻感知目前处于的状态；滑动区域尽量不要超过100刻度，如果刻度距离太小，用户在滑动时也很难精准的选择范围。
举例：在汽车之家APP中，当我要选择汽车价格范围时就会出现此选择器，我们可以用手指滑动来选取它的价格区间，相对于上半部分的单选价格拓展性更强，用户可以自行选择上半部分的单选选择器，也可以选择滑动多选选择器，给予用户更多的选择。
标题易懂：
在选择器中标题一定要简单明了，很快的让用户知道他在为什么做选择（如：当你关注某烹饪的APP后，它会让你勾选喜欢的菜谱，你的标题就可以用“选择菜谱”四个字，简单明了）
文字标签易懂：
一般使用短语而不是句子，也并不需要用标点符号来结尾。（如：当选择想要的菜谱时，菜谱后的文字不需要加入标点符号）
选取状态易懂：
用户能够明确感知什么是选中状态，什么是未选中状态，什么是禁用状态。（如：选中状态为高亮显示，未选中为普通显示，禁用状态为灰度显示）
反馈提示易懂：
当你在选择中遇到选项限制或是否需要确认操作时，反馈提示一定要一目了然。（如：当你选择某衣服时，S码不能选择，则会用灰度显示的文字代替，甚至可以用中横线划过文字，明确告诉用户不能选择）
从逻辑顺序：
逻辑排序能让用户很快很准的找到自己需要的选项，特别是对于选择地址/时间/个数等常规的选项时，可以按照字母/远近/大小来进行排序。例如下面在选择地址时，就是按照A-Z字母排序，这样可以大大节省用户选择的时间。
从产品利益角度排列顺序：
当然为了产品自身的利益也可以自己优化排序方式，选项的顺序可以说服用户进行选择，用户可能因为第一个选项在列表中的位置而选择了第一个选项；可以辅助用户，也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时，产品为了让用户选择更加优质的菜谱，就会把用户评价高的菜谱放在前列；当然商家也会这么做，例如你要去买某款商品，商家会在选项中把热门、优质的产品放在最上方，让你优先选择。
从用户体验排列顺序：
从用户角度来说哪些对用户体验好，那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位，而把用户量最少的轻客放在了最后一位；同样它在汽车品牌选择中，单独列出了热门品牌把它放在前列，让用户进行快速选择。
视觉布局一致：
每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐，这样有利于快速读取选择内容，可以提高用户的浏览效率并减少错误。
图片/插画风格统一：
在图文结合的选择器中，我们一定要保证图片（插画）的优质以及风格的统一。
默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。
默认未选中：
这是最常见的一种状态，特别是对于选择年龄、生日这些个人隐私信息，系统也没有办法进行默认选择。
默认选中其中一个选项：
要想默认其中一项，必须考虑两点因素，因素一：你想要潜意识的像用户传达信息，在单选选择器中默认选择一项后，就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向，例如此产品的性别9成都是女性，那么建议默认选项为女性。
默认选中全部：
其实默认选中全部在用户体验上来讲真的不是那么的友好，例如微博这个选择器界面，刚进这个界面时已经全部勾选中，并且当你没注意习惯性的点击下面的按钮时会生立即生效，没有返回的余地。（吐槽：有些APP甚至没有一键取消功能，要一个个的点击取消…）这也是为了产品牺牲掉了部分用户体验吧！
单选选择器的更多选择：
如果用户不想做出选择，那么应该提供一个中立选项，为用户提供一个明确的方向，中立选项比勉强选择要好。例如在选择行业领域时，以上并没有你所处的领域或你不确定你的领域，你就可以选择“不限”或“其他”。
多选选择器的更多选择：
在多选选择器中，如果不能把控到用户的准确选项区间，那么可以考虑滑动多选选择器，让用户有更多的选择区间，不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。
选择控件在操作过程中必须更改其状态/外观，要明确让用户知道是否能选中，是否被选中。控件状态一般分为三种：未选中、选中、禁用。
未选中
选择器的开始状态，向用户表明，可对该选择控件进行操作。
选中
用户操作选取状态，选择控件处于被选中的状态。
禁用
一般情况会为灰色显示，用户将无法与选项进行交互。
指的是用户在操作中让用户得到相应的反馈，用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中，操作提示一般用辅助文案提示及非模态弹窗提示。
辅助文案提示（选择前与选择中）：
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明，例如下面是地区选择，我在选择不同层级的区域时，它的上方会出现辅助提示文案，让你明确的知道你上一层级选择的是什么。
同样，当我在选择价格区间时，滑动选择器的左上方一样有文字类的提示：
非模态弹窗提示（选择后）：
非模态弹窗一般出现在用户操作完的跳转页面中，为了让用户感知所选的选项在页面的状态，如下，非模态弹窗告知用户一共有7辆车符合标准。
当然除了非模态弹窗外，还有模态弹窗，但是用户体验极差，目前很少使用，所以就不列出来了。
扩大点击区域：
在选取按钮类的操作时，容易出现点击不到或误操作的现象，我们可以通过扩大点击区的交互区域来提高易用性，例如下图，虽然按钮在左边，但是可以把横向区域都列为可点击区域。
当然我们也可以从设计的角度来扩大视觉范围，从而也提高了点击范围，这样的处理不仅提升了视觉层面，还提升了交互体验。（图文结合方式）
注意交互间距：
在元素与元素之间一定要有合理的交互间距，不然很容易出现误选的情况。
合理利用有效区域：
在选项较多的选择器中，我们可以利用好选择主体控件之外的区域，例如在选择城市/品牌时，我们可以做A-Z index式字母交互区，帮助用户快速找到想要的选项。
让用户选择本来就是一件枯燥乏味的事情，如果让这件事变得有趣那么会极大的提升用户体验。
从文本层面：
例如当用户填写性别信息时，你给予用户的文字信息并不是“男”/“女”，而是“帅气的boy”与“酷酷的girl”，这样会让用户觉得这是一件比较有趣的事情，而不是被动选择。（注：这样的取名一定要符合产品的特性）
从视觉层面：
加入可玩儿性的选项，例如汽车之家的头像切换，可以选择自己喜欢的头像。（头像并不是强制选择的，如果不进行操作则是默认选项）
从交互层面：
让用户去享受选择。例如Soul的星球首页就做的非常棒，在未选择状态他的人物会360度围绕着转动，当然你也可以快速拖拽，或者放大缩小，可玩儿性十足，并且在内部设定了最匹配/新人的高亮显示，协助用户去选择。
不同的产品在使用选择器时都各有不同，因为每个选择器都有它的利弊，而真正要怎么去选择还要根据产品本身来定。
那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊：
多联动选择器（平铺式）
货车帮采用的是多联动平铺式选择器，它最大的特点就是能够一眼就看清楚所有地址，不过地址多时需要花时间去找，只是当你经常使用此功能时便会形成记忆，再此搜索的时候就能形成记忆点击，效率很高，并且在操作外还有路径提示，不仅可以帮助你记住层级选项，还可以实时返回路径进行重新选择。
手势操作：点－点－点
多联动选择器（列表跳转式）
闲鱼采用的是多联动列表跳转式选择器，这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容，那么就又要切换到上一级，闲鱼采用它的原因是因为它只有二级联动，不存在遗忘现象，不过这样列表式的选择效率并没有平铺的效率高，人眼习惯扫视横向内容，所以横向的内容获取往往要比纵向的多，在地址选择器上我个人是不太建议采用多联动列表跳转式，因为并不也不直观。
手势操作：滑－点－点
多联动选择器（列表式）
转转采用的是多联动列表式选择器，它的优点是可以根据右侧字母来找城市，数据偏大也能够很快的查找。不过如果在层级的选项中出现错误，同样就要切换到上一级，并且在操作中没有辅助信息提示。
手势操作：滑/点－滑/点
多联动选择器（下滑式）
安居客采用的是多联动下滑式选择器，这种形式的选择器不会遮挡后面的主要内容信息，在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址，并且层级分明，扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。
手势操作：点－滑/点－点
地图选择器
美团外卖采用的是地图选择器，这个选择器一般用在需要精准定位的生活类APP中，它的优点就是能够快速精准定位，并且自动录取定位信息，它的缺点也显而易见，不能含带层级并且对范围也有约束。
文章来源：优设 作者：黑狮力
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在BAT、TMDJ等一线互联网企业，决策平台又称决策支持平台、管理会计平台。但实质都是实现业财一体化后，提取业务、财务数据，自动生成各种管理报表、财务报表，智能预警风险、预报业务前景，通过Dashboard或驾驶舱的形式展现给管理层、决策层，本文作者暂以管理会计平台展开讨论。
管理会计，从定义来看有狭义与广义之分。狭义的“管理会计”通常是指财务会计概念，包含“成本管理”和“管理控制系统”两部分。
而广义的“管理会计”则是指运用一系列的分析手段，通过挖掘财务数据、业务报告等中潜在信息，对企业财务状况、经营成果、现金流量和产品竞争力进行分析，辅助经营者进行决策，指出业务、财务风险隐患，预测未来趋势，赋能业务，以数据驱动企业发展。本次讨论的后者，即广义的管理会计。
管理会计目标的实现，不是简单的某一个系统或产品能承载的，需要设计一系列的产品矩阵，包括基础的核算系统如ERP、成本结算系统、预算系统、报表系统，这个矩阵就是管理会计平台（以下简称管会平台）。
管会平台的主体或用户的不同使得所产出的管理报表（以下简称管报）指标也有所不同。用户一般分为外部和内部2个大维度。
1）外部用户
投资人偏向于分析企业的盈利能力和资本保值增值能力，如净利润率、资本保值增值率等指标；债权人则侧重分析资产负债水平和偿债能力，如资产负债率、利息保障倍数、权益乘数等指标。
2）内部用户
应收会计岗则侧重应收账款的质量、收入的趋势，如应收账款周转率、收入环比或同比、速动比率等指标；资产会计岗偏向于分析资产的利用率、所带来的价值，如资产周转率等指标；而企业管理层或决策层会关注企业经营活动和财务活动的一切方面。
管会平台在设计时应考虑满足这些不同用户的需求，并通过权限、角色实现千人千面的效果，不同用户展示不同指标集和报表。
管理会计不仅属财务一个分支，更是财务在企业管理中应用的升华，财务的4个功能层次形象筑起管理会计的坚实基础：
做好管理会计，核算是基础，分析是关键，管控是抓手，赋能是核心。
分析不仅仅是传统的报表分析，而是基于大数据、机器学习、AI等高科技手段，自动化、准确、智能的实现风险预警、趋势预测，引领、驱动企业发展。
举个栗子：每月关账后财务都要做财务分析，收集各种业务、财务数据，结合相关指标，以发现业务中的问题。如做杜邦分析法，分析净资产收益率。
继而计算总资产净利率，权益乘数，销售净利率、总资产周转率……通过实际与预测的横向对比、基期与历史的纵向对比，找出各种指标异动原因，实质是分析企业的赢利能力、营运能力、偿债能力。
但这些通用的指标需结合企业实际情况、历史数据，并体系化形成产品，才能分析出症结点所在，这也是管理会计平台建设的意义与努力的方向。
如何搭建管理会计平台（以下简称管会平台）呢？互联网管理会计平台，其实并不是一个单一的平台，而是由众多关联子系统构成，通过多个子系统间协同合作完成管理会计目标的系统集。
从前端用户的视角来看，获取管理报表是一个很简单的动作：查询相关主体公司管理报表或分析结果即可，但从系统角度来说，管理会计的建设过程实际涉及了众多财务子系统的协同、及复杂的系统逻辑。
一个典型的财务产品架构如下图，涉及多个子系统。典型管理会计产品分为生产端与消费端，架构图如下：
在简要介绍各子系统功能前，可以先看以下简化版的管会平台产品架构图，典型的管会平台产品架构可以划分为四层结构：支撑层、数据层、核心层、应用层：
用来支持管会平台的基础服务和基础设施，包括容器云、安全服务、存储服务、消息引擎、任务高度、短信服务、证书服务等。
汇集业务、财务数据，以大数据或数据湖的形式承载基础数据，包括ETL、BI、大数据等。
管会平台的核心模块，分为清结算、财务中台、ERP、预算、管报中心五大块；
1）清结算
主要由计价、清分、结算、对账组成，是业务活动在财务的2个反映之一，解决互联网业态中的成本费用结算，与传统企业的成本计量方法不同的是，一般是按个别计价法对不同时间段可以阶段性、阶梯性等复杂业态成本计量。
2）财务中台
主要针对业务中非审批类的收入、资产折旧、摊销，自动对账、生成分录，并传递至ERP，主要包括：入账规则、数据校验、分录生成、主数据等。
3）预算模块
预算功能，包含预算编制、执行等，结合BPM审批流，实现费用控制。
4）ERP
财务核心入账平台，包括总账、应收、应付、资产、财报等。
5）管报中心
管会平台核心输出层，包括生产端和消费端2部分，生产端分为指标集、规则引擎、模板、预处理、智能诊断等模块。消费端主要是管报产出结果的展示即驾驶舱、手工确认或修正。
管报中心是核心中的核心，后面第三章会详细展开。
通过支撑层、数据层、核心层提供的服务组合起来，对最终用户、运营管理人员提供的系统。在产品架构层面体现为前端展示层、业务域和过程域。前端展示层主要是结果展示的形式，如PC端的web页面、移动端的APP或H5、小程序等。
业务域是上游的各业务系统，而过程域是管会平台所依赖的流程工具、特征数据，如供应商、ORG、BPM等。
管报中心由生产端和消费端组成：
生产端流程图如下：
【指标集】：配置各种指标，如“速动比率”、“产品成本费用率”等。一旦配置不得删除，只可修改或禁用。上游是科目与计算规则，但校验关系不在此模块。
【模板】：指标、预警或诊断信息的集合，可导入或手工增加。在预处理和结果展示时，将会调用此模板。
【规则引擎】：由“科目规则”、“计算规则”、“指标规则”、“预警规则”四部分组成。
在每一层指标中，有实际值、预测值，二者之间的偏离度，就是预警条件；“好”、“差”就是简单的信息模板，可把具体原因也纳入进来。
主因判定实质是一个由上到下的递归过程，如此例中，A公司获利能力（即资本报酬率）相对较差(3.08%<7.41%)，这是第1层判断。
再往第2层，经过分析可知这不是因为总资产净利润差(2.55%>2.37%)，而是财务融资能力差(1.21<3.21)。如此类推，直至分析至底层科目级指标。
【预处理】分为“重分类”、“平衡试算”、“定时任务”、“结果存储”四部分，是报表产出的运算过程。其中“平衡试算”属前置数据校验，检查数据是否达到报表可用程度。“定时任务”与“结果存储”属技术性过程，“重分类”根据会计要求设置，具体由财务确定。
【智能诊断】是对具体的报表进行分析，由“诊断开始（数据准备）”、“规则判断”、“预警判断”、“结果确认”四部分。其中结果确认包含结果展示、消息分发、手工修正等。“规则判断”与“预警判断”是对【规则引擎】中的“指标规则”、“预警规则”的具象应用，实际应用中可引入AI、TensorFlow(机器学习)等技术手段提升诊断的准确度。
在生产端准确、及时生产出数据后，消费端就不愁无米下锅了。一般通过Dashboard或驾驶舱展示，这一块通常需要BI或数仓部门的协助，效果图如下：
综合以上，管会平台的每个子系统并非孤立的，通过产品架构相互关联。产品架构与技术架构相辅相成，产品架构决定需求和设计，技术架构决定技术框架和性能。包括AI在智能诊断上的应用、数据域的实现等。
好的产品架构将这些不同用途的功能进行聚类整合，因此，【才听途说】建议将管会平台拆分成多个子系统，明确业务边界，减少系统间的耦合，提供优质、的管理决策支持服务。
并根据前端业务场景的需求随时进行调整变化以适应业务的发展，如规则引擎部分基本可由前端配置即可，减少后端开发与产品上线时间。
不同互联网公司，业务体量甚至有成千上万倍的差距，如京东集团内不同BU的体量及发展速度造就其系统复杂度也差异巨大，高度复杂的管会平台甚至需要数百人的技术团队来设计、开发、维护。
不过，对于体量较小的互联网公司来说，几人的团队即可搭建一套系统并维护日常运营。
互联网企业作为金融科技业界引领者，建议在系统开发前期（从0到1），以MVP形式，小步快跑，快速迭代，尽快上线、降低开发成本，优先开发主要需求、及较重要的子系统，或并行实施几个子系统，如ERP的实施、清结算的开发、管报中心的开发可以并行。再做次优级子系统，逐步迭代。
随着订单量的提升及业务复杂度的增加，不同BU甚至不同BGBU的接入，管会平台复杂度将指数及上升，系统处理起来会越来越吃力，若无良好的规划，各子系统耦合度越来越高，杂糅在一起，系统灵活性越来越差，无法跟上业务的发展。
因此，管会平台的中长期发展（从1到100、到∞），极其考验我们的业务梳理能力，及对业务进行拆分、产品架构的能力。
特别是目前行业内还没有体系化的管会平台建设经验可参考时，更考验我们的综合能力，包括财务专业知识、业务理解力、产品规划能力。
但万事不要怕，只要抓住产品设计精髓，即设计的产品应满足逻辑完整、业务功能明确、可扩展（发展方向明确但业务边界清晰）、灵活（非耦合）等特点，一切将会迎刃而解。
蓝蓝设计的小编 http://www.lanlanwork.com
