看完本篇文章，你会学到以下内容：
1、什么是详情页
2、详情页设计原则
3、详情页的构成
4、详情页设计要点拆解
一、什么是详情页？
详情页向用户展示一个对象的完整信息，主要用于信息浏览，允许对该对象发起编辑等操作。如电商的订单详情，OA的审批详情等等。
二、详情页设计原则？
1、直接了当
信息尽量平铺展示，如没有必要不要做隐藏折叠。
2、层次分明
按照接近原则，对信息分层分组展示，降低单个页面内信息复杂度。
3、化繁为简
减少复杂结构的使用，尽量使用相似的结构和模块，降低结构差异对用户进行干扰，让用户聚焦信息本身。
三、详情页构成
详情页由标题、标签页、图片、文字详情、按钮、可视化、列表、表格、筛选、数据统计、进度轴、标签构成
详情页的特点：1、内容杂，什么元素/模块都可能出现。2、布局多，布局没有套路，核心是做好内容分块和视觉引导。3、差异大，页面与页面巨大差异
四、详情页设计要点拆解
1.容器
由内容由少到多划分为原位展开、气泡卡片、弹窗、抽屉、页面。能优先满足内容收纳的同时，容易尽可能轻量。
2.布局
根据内容从简单到复杂可分为基础样式、标题分组、色块/分割线/卡片分组、锚点定位/标签页、自由布局。核心是做好内容分区、视觉引导符合用户操作习惯。
布局注意事项：把用户最关心的内容放在最显眼的地方
3.交互操作
交互操作可分为编辑（原位/气泡/弹窗/页面），查看详情（内容不多的话可以少用页面容器，减少套娃），业务操作（层级清晰，符合用户操作习惯）。
一、导读
1. 内容结构
小红书的产品拆解包含七个部分，分别是导读、产品画像、内容服务、社区服务、企业服务和、思考总结和写在后面的话，内容篇幅13582字，阅读时间最少30分钟。
2. 适读人群
产品拆解是一种专业、深度的创作形式，所以比较适合于以下几类用户阅读学习：
● C端社交平台产品设计师：通过对小红书完整的产品拆解，了解小红书的产品设计体系和细节，有助于更好理解自己所在公司的产品设计，其次可以全方位提升产品分析、竞品分析能力。
● 希望提升产品思维的UI/UX设计师：通过从产品层到体验层的拆解，帮助你跳出设计执行层理解一个功能设计背后的价值和意义，提升产品设计思维。
● 准备跳槽到小红书的互联网从业者：如果你有准备去小红书求职，这份产品拆解报告可以帮助你提前了解小红书的产品细节和体系。
● 内容社区平台从业者及创业者：收获一份专业、完整、有价值的竞品分析参考。
3. 分析模型
产品拆解是以反向推导的形式去拆解一个产品的设计策略和思路，所以我们采用了以下分析模型和设计理论做支撑：
● AARRR模型（又称为海盗模型）：由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于拆分和分析产品的功能价值。
● 尼尔森十大可用性原则：尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计。
● 设计基础理论：包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2效应、席克定律等常见理论，用于诊断小红书的交互及界面设计。
4. 阅读建议
在阅读本篇拆解的时候，建议一边体验小红书APP，一边阅读产品拆解报告，其次可预约我们的产品拆解解读直播，收获会更大。
二、产品画像
在拆解小红书APP之前，我们需要从以下8个维度去提炼小红书的产品画像，这样才能理解小红书的产品设计逻辑。
1. 行业发展
小红书所在的行业属于互联网媒体内容社区，是一个生活方式类内容社区，同时小红书结合了电商和社交媒体打造了新型的商业模式，是社交电商的开拓者和领先者。我们从艾瑞咨询的《中国互联网媒体内容社区模式发展研究报告》和《2019中国社交电商行业研究》两份报告中获取到以下数据：
● 随着内容社区的变现模式多元化发展，互联网媒体的商业变现空间越来越大。艾瑞咨询预计在2022年，中国网络广告市场规模将突破1.2万亿元，网络购物市场交易规模在2022年将会达到13.9万亿元。
● 传统电商的红利已尽，已经进入行业衰退期，用户增速已持续放缓至20%甚至更低水平。而社交电商正在蓬勃发展，成为移动端最主要的流量入口，使用频次高、粘性强，流量价值极其丰富，行业交易规模在2021年就达到28646.3亿元。
综上所述，小红书所在的行业具有广阔的发展前景和潜力，而小红书作为国内最大的生活方式平台和社交电商领先者，还有极大的空间去挖掘。其次随着AIGC（AI Generated Content，是指利用人工智能技术来生成内容）时代来临，对过去以UGC为主的小红书内容创作平台来说，是新的机遇也是挑战。
2. 竞争形势
在《中国互联网媒体内容社区模式发展研究报告》一文中，艾瑞咨询梳理了互联网媒体内容社区生态图谱。从图谱看出，小红书作为生活方式类内容社区，并无直接竞争对手，但存在诸多潜在竞争对手，包括文娱类的微博、豆瓣、抖音、B站，还有消费类「什么值得买」，知识类内容社区知乎，旅行类内容社区马蜂窝、飞猪等。
从易观千帆数据观察，小红书相比其他间接竞争对手，除了抖音以月活跃用户人数7.4亿超出小红书3倍以外，小红书月活人数超2亿排名第二，领先排名第三1.7亿的哔哩哔哩，其他社区月活人数距离小红书有一定差距。
不过就在年初，社交巨无霸微信的微信公众号已经推出小红书式的笔记传播形式，降低创作门槛，吸引大众用户UGC，这对于小红书来说，将会是一个潜在的挑战。
3. 产品介绍
小红书是一款集购物、分享、社交于一体的手机APP。它的主要功能是帮助用户分享生活中的美好瞬间和购物心得，同时也为用户提供了一种社交平台。作为一个年轻人的生活方式平台，小红书以“Inspire Lives 分享和发现世界的精彩”为使命，用户可以通过短视频、图文等形式记录生活点滴，分享生活方式，并基于兴趣形成互动。
4. 商业模式
基于对小红书的深入调研，再结合艾瑞咨询《中国互联网媒体内容社区模式发展研究报告》，我们对小红书的商业模式进行了推导。
4.1 客户细分
● C端：年轻用户群体，以女性居多，生活在一二线城市，希望发现和购买优质商品，喜欢分享自己的购物心得和生活经验，有较高的月支配消费能力。
● B端：中高端品牌，品质高、信誉好，期望通过小红书获取种子用户、快速打造爆款以及和年轻用户建立沟通的企业。
拓展阅读
根据艾瑞咨询的《中国互联网媒体内容社区模式发展研究报告》，挖掘到内容社区已经步入成熟阶段，由B、C两端朝着营销线、商品线、平台线和内容线衍生出多元商业模式。这个信息有助于接下来理解小红书的产品体系。
4.2 价值主张
标记我的生活
4.3 渠道通路
作为中国最大的生活方式分享社区，小红书用户基数大，用户忠诚度高，主要依靠用户口碑分享，以及常规的广告、搜索引擎等渠道进行推广和维护品牌形象。
4.4 客户关系
面对社区博主和行业KOL，通过创作中心、蒲公英等平台为博主链接优质广告资源；面对企业客户，通过商家课堂等方式指导开店培育。
4.5 收入来源
根据《2021年小红书内容营销数据洞察白皮书》报告显示，2021年小红书的收入主要由广告和电商两部分组成，二者的份额占比分别为80%和20%。
4.6 核心资源
小红书是中国最大的生活方式分享社区，用户基数大，忠诚度高，2021年已经成功登陆港股市场，有充足的资金优势。
4.7 关键业务
面向C端，小红书主要提供笔记发布、购物、直播等核心功能；面向B端，提供蒲公英、薯条、聚光平台等业务。
4.8 重要合作伙伴
● 各行业头部KOL及MCN机构，为平台提供高质内容，官方同时提供流量倾斜和扶持；
● 企业客户，负责小红书电商自营平台的生产链供给以及其他内容合作。
4.9 成本结构
作为一个互联网科技公司，小红书的成本结构主要来自产品的研发投入和人力成本。
5. 用户画像
结合易观千帆小红书APP数据，我们对小红书终端使用用户人群提炼了以下用户特征：
● 从用户性别看，以女性居多，占比72.25%，男性占比27.75%；
● 从年龄分布看，24岁以下用户人群最多，占比42.48%，其次为31-35岁，占比29.53%，24-30岁用户人群占比15.83%；
● 从用户消费能力看，中等消费者占比36.75%，中高消费者占比36.21%，合计超过70%，购买能力很强（官方数据为月支配可消费费用超过4000元）；
● 从地域分布看，新一线城市用户最多，占比22.17%，其次为三线城市，占比20.93%，二线城市占比19.28%，其中广州市最多，其次为北京和上海。
6. 信息结构
通过对小红书APP的信息结构梳理，可以看出小红书的功能结构比较简单，菜单栏包含了首页、视频、发布、消息和用户中心五个栏目。
● 首页：以千人千面的信息流推荐为主，其中推荐、购物和直播权重最高，也是小红书的核心功能。
● 视频：提供沉浸式的短视频笔记体验，用户可以不断上拉下滑观看视频笔记；
● 发布：提供拍照、相册、模版和直播发布功能，是用户发布笔记的入口；
● 消息：提供系统公告以及消息通知，用户聊天的窗口；
● 用户中心：用户的个人主页，包含笔记、收藏和个人资料等功能。
7. 产品迭代记录
根据七麦数据资料，小红书的APP首个版本发布于2013年12月05日，截止到2023年4月3日，APP版本已经更新至V7.82版本，近一年版本更新次数为98次，迭代频率非常高。从十年前的「全世界的好东西」到今天的「标记我的生活」，小红书迎来自己的十周岁生日。
以下为小红书版本重要迭代记录：
● 2014年8月，发布V2.0版本，上线「商城」功能，支持用户在小红书下单购买；
● 2015年11月，发布V4.0版本，产品全新升级，首页根据用户兴趣智能化推荐；
● 2017年9月，发布V5.1版本，产品全新升级，加入闪拍、小视频等功能；
● 2018年5月，发布V5.16.1版本，加入「附近」功能，可发现身边有意思的笔记和用户；
● 2019年5月，发布V6.0版本，产品全新升级；
● 2021年7月，发布V7.0版本，产品全新升级。
8. 产品生命周期
根据易观千帆数据显示，截止到2023年1月，小红书APP月活跃用户人数超过2.1亿，注册用户在2019年就超过3亿（来自官网），公司在2021年成功登陆港股市场。从以上资料数据看出，我们可以推导出小红书APP已经进入产品生命周期的成熟期，当下以及未来将会聚焦于商业变现和用户留存。
9. 小结
通过以上数据信息，我们可以看出，作为一个诞生于2013年的移动互联网元老，小红书从最初旨在打造一个海外购物社交平台到如今成为亿万年轻人的生活方式社交平台，他们的用户非常年轻，以90后居多，月活跃用户超过2亿，它已经成为国内最大的生活方式分享平台和社交电商平台。
三、内容服务
「内容服务」是根据AARRR模型拆分，这个版块的功能主要是实现用户留存，包含首页、视频、笔记发布、消息、创作中心和专业号等功能。
1. 首页
作为中国最大的生活方式分享社区，小红书以UGC用户生产内容模式为主，内容包含图文、短视频、语音等多种传播形式，覆盖了美妆、潮流、美食、科技、旅行、汽车、职场等众多行业。
1.1 发现
「发现」作为小红书的默认首页，平台根据用户的兴趣、标签、浏览偏好内容进行个性化推荐（从产品迭代记录查询到小红书早在2015年就开启了千人千面的个性化推荐）。从TAB栏可以看出小红书的内容覆盖了美食、科技、旅行、汽车、职场等众多行业，同时支持用户根据自己兴趣偏好自定义编辑。
1.1.1 内容推荐逻辑
在研究小红书「发现-推荐」推荐逻辑时候，笔者有点捉摸不透。因为每一次刷新推荐的内容排序其实并不是单纯的以点赞、发布时间、收藏数为准，更像是随机展示，所以特意查询了关于小红书内容推荐逻辑的文章。
笔者找到了人人都是产品经理专栏作家江流的《小红书的内容营销逻辑》这篇文章，作者经过大量的测试，推导了小红书的内容推荐营销逻辑：
● 「发现-推荐」页占据了小红书80%的流量；
● 小红书内容推荐的逻辑主要是三个：高打开率，高互动率，高搜索打开率。
体验陷阱
当我发现平台给我推荐我讨厌的内容时候，我没找到屏蔽按钮，最后尝试长按图片才弹出屏蔽弹窗。这个设计对新手不友好，违反尼尔森十大原则的人性化帮助原则，没有提供清晰的提示，增加了学习成本。
1.2 关注
「关注」是为用户提供自己关注好友的动态展示，内容设计比较简单。不过我对这个栏目的推荐机制感到不解，当我刷新页面的时候，内容并不是根据时间先后顺序展示，而是没有规律的随机展示。
1.3 本地
「本地」是根据用户所在位置读取附近用户的笔记，这个功能上线于2018年V5.16.1版本，它的价值是帮助用户发现身边有意思的笔记和用户，从而建立关系链接，提升用户留存率。
设计思考
作为一个生活方式平台，「本地」的内容太单薄，如果能把内容分类，比如按景区、美食、出行等来设计，可以极大提升小红书在本地生活场景中的打开频次。来小红书，不仅可以标记你的生活方式，还可以发现身边更多有趣的生活方式。
1.4 搜索
「搜索」是小红书流量分发的重要入口（占20%），不仅为用户提供实时的社区热门话题，更是小红书的商业服务中的重要场景（提供搜索信息流、专区、火焰话题和搜索菜单等推广方式）。
1.4.1 引导页
「引导页」由历史记录、猜你想搜和搜索发现组成，这个页面主要承担流量分发以及展示社区热门话题，设计得比较简单。
迭代建议
可参考QQ音乐的搜索引导页，根据话题内容设计排行榜，把引导页做得更丰富，提升用户使用时长。
1.4.2 结果页
「结果页」提供四个维度的内容展示，分别是全部（包含最新、最热）、用户、商品和筛选（笔记类型，视频和图文）。其次根据搜索关键词加入二级分类，比如搜索UI设计，二级分类有APP界面、高级感、作品集和素材相关联标签。
设计思考
在深入体验搜索功能以后，我对平台对搜索关键词的算法机制不太理解。比如排名第一的并不是点赞最高的，也不是发布时间最早的，甚至会出现低点赞、发布时间很早的笔记。对此，深表疑惑。
2. 视频
「视频」是一级栏目，位于菜单栏第二个位置，进入后向用户提供沉浸式的阅读体验，可以不断上滑刷新视频。短视频是当下最流行的传播方式，对提升用户使用产品时长有非常大的帮助。
2.1 详情页
底部展示作者信息，可一键关注，提供喜欢、收藏、分享和评论功能。其次当博主关联粉丝群，还支持用户快速入群，帮助博主引流。
3. 笔记发布
「笔记发布」作为小红书社区最重要、最高频的功能，向用户提供了图文和视频两种发布类型。为了降低用户学习成本，提升产品的核心增长指标，小红书提供了非常丰富、精美的设计模版，用户一键使用，更换素材即可发布漂亮、精致、酷炫的笔记。
3.1 拍照
「拍照」是小红书最基础的笔记形式，主要通过拍照搭配音乐、文字的形式传播，门槛低、操作简单，是社区的主要内容。
3.1.1 发布流程
3.1.1.1 拍照
● 需要用户拍照，不支持读取手机相片（如果想要加入本地图片，需切换到「相册」）。
● 头部提供比例切换（3:4和1:1）、闪光灯、翻转、滤镜（提供日常、春夏、秋日等类型）、美颜（支持磨皮、脸型、眼睛、鼻子等）。
● 底部提供默认、黑白相机、摩登、小宇宙和灰色拍立得五种模式，满足各种特效拍照需求。
3.1.1.2 装饰
● 头部提供加入音乐功能，音乐库包含欧美、运动、日韩等各种主流音乐类型。
● 底部提供图文模版、视频模版、商品（加入种草场景）、文字、帖子、滤镜和调节功能，用户可根据自己偏好加入装饰元素。
3.1.1.3 发布
● 图片加工装饰好以后，用户需要输入笔记的标题、介绍。
● 用户可以加入标签（这是小红书平台内容检索的重要元素，一般用户会加入多个标签）、商品和互动组件（包含PK组件和投票组件两种类型，主要用于提升用户活跃度）。
● 用户可加入发布地点，在高级选项可选择关联直播预告和群聊。
● 一切准备就绪后，用户可选择保存草稿和立即发布。
3.1.2 笔记详情页
● 笔记详情页的权重非常高，不过页面内容也比较简单。头部展示用户信息，可一键关注，右上角可点击分享笔记。
● 笔记内容由图片（视频）+标题+文字内容+标签构成，其他用户可对笔记进行评论、点赞和收藏。
迭代建议
小红书的笔记分享形式太过简单，可参考QQ音乐的分享功能，设计丰富、精致的个性化模版，比如音乐卡片、视频卡片等，刺激用户进行分享，帮助平台拉新引流。
3.2 拍视频
「视频」的发布流程和「拍照」相似，其次小红书也提供了基础的视频剪辑功能，帮助用户制作更优质的视频，以及避免用户流失到其他视频剪辑软件（微信视频号就不支持视频剪辑，这导致用户会使用剪映这些第三方软件）。
3.3 相册
「相册」和「拍照」的区别就是为用户提供从本地上传图片，两者的功能和流程一样。
迭代建议
建议把「相册」和「拍照」两个功能合并，减少操作路劲，降低用户操作成本。
3.4 模版
「模版」分为视频和图文，用户可选择好自己喜欢的模版进行直接编辑发布。
4. 记录日常
「记录日常」的入口在首页左上角，主要为用户提供语音、打卡、日签等形式的动态发布。这个版块的功能价值在拆解完以后，笔者认为更多是满足Z时代年轻用户群体的兴趣偏好，比如为情侣量身定制的咻咻，还有语音笔记等。其次这个版块的笔记发布形式行动成本比较低，更能吸引用户参与发帖，是激活新用户以及长尾用户的绝佳方式。
4.1 咻咻
「咻咻」是一个专门为年轻情侣用户量身定制的功能，通过绑定TA的小红书号，情侣之间就能及时分享有趣的笔记霸屏对方的屏幕。这个功能看上去设计得很有趣，和QQ音乐类产品的「一起听」相似，增强了即时的社交聊天元素，增加用户时间和频次。
体验陷阱
这个功能看上去很时髦，但是在体验下来以后发现很鸡肋。当我给另一个小红书账号发送咻咻的时候，系统没有任何提示，消息中心也没有。最后只能前往「咻咻」找到右上角的那个TA，我才发现原来消息推送到这里了。这样的提醒设计，太失败了。
4.2 语音
「语音」是向用户提供语音笔记的功能，用户可以录制一段自己的想说的话，选择封面以后，输入心情记录，就可以发布。这个功能对于Z时代的用户群体来说非常受欢迎，极大提升用户使用时间，笔者体验了上百条语音笔记，发现用户主要通过语音笔记哼唱歌曲，是一种全新的听觉体验。
迭代建议
在「语音」详情页，我尝试上滑浏览下一条，但最后发现需要左右滑动才能切换，这个设计和用户习惯不一致，建议改进。其次在查看用户「表态」内容时，语音就暂停了，影响听觉体验。
4.3 日签
「日签」就是以发布笔记的形式进行签到，用户可以选择心情，上传背景图片（系统会自动生成精美的图片），然后输入心情就可以发布。小红书还为用户提供「漂流瓶」功能，用户可以选择笔记塞入漂流瓶后，接收到漂流瓶的用户可以给与回应。
4.4 打卡
「打卡」和「日签」相似，主要提升用户使用产品的频次和时间，小红书为用户提供各种主题的打卡，比如护肤打卡、练字打卡、考研打卡等，用户选择对应的主题，上传图片以后，就可以发布。
4.5 文字
「文字」的功能非常简单，用户只需输入文字，然后选择背景风格，就可以生成文字笔记。
4.6 拍摄
「拍摄」的功能也非常简单，用户拍摄一段视频，就可以生成笔记，和一级菜单的「视频笔记」不同，在这个栏目支持上传本地图片，体验更佳。
5. 消息
「消息」主要向用户提供私信、群聊功能，其次可实时查询笔记的点赞、收藏、关注动态以及官方通知公告。
5.1 群聊
小红书支持博主建立自己的粉丝群，功能比较基础，主要帮助用户沉淀自己的粉丝，提升用户留存率。
6. 创作中心
作为一个以UGC用户生产内容的平台，创作中心主要为创作者提供创作指导，这个版块包含数据中心、创作服务、创作学院和笔记灵感四个部分。
6.1 数据中心
「数据中心」为创作者提供账号概览、笔记分析和粉丝数据三个维度的数据统计分析。创作者可以查看近30日的详细数据分析，比如观看人数、观看总时长、观众来源、单篇笔记详细数据以及粉丝画像等内容。这些数据可以帮助创作者及时调整运营策略，创作更受用户喜欢和关注的内容。
6.2 创作服务
「创作服务」是为创作者提供更丰富的平台服务和推广，包含创作权益、作者能力和内容变现三块内容。平台提供笔记周报、笔记置顶、创建合辑、薯条推广、内容合作等功能，为创作者提供创作工具以及内容变现等服务。
6.3 创作学院
「创作学院」为创作者提供了小红书内容创作和内容运营的各种主题课程，比如选题取材、粉丝运营等内容，这些课程都是免费的，创作者只要投入时间精力，都能有所回报。
6.4 笔记灵感
「笔记灵感」为创作者提供了小红书热门笔记的选题参考，比如时尚、户外、春日等主题，通过这些爆款笔记，能给创作者提供更清晰、精准的创作灵感，从而为社区输出高质量内容笔记。
7. 专业号
小红书的专业号是面向更专业的知识创作者，为他们提供更专业的内容、服务和功能，帮助他们获得更多的曝光度、关注度，以及通过丰富的数据分析提供运营支持。
7.1 数据中心
相比「创作中心」，专业号的「数据中心」提供了更专业完善的数据分析，比如数据维度，可按根据交易、引导和互动去查看，还有笔记观众分析，提供了更详细的用户特征，包含年龄分布、城市、用户兴趣等，以及个人主页和店铺的数据统计分析。
7.2 互动工具
「互动工具」包含店铺管理（小红书支持用户开通店铺销售商品，可以理解为淘宝用户的淘宝店）、直播互动、抽奖工具和主页装修等功能，主要为创作者提供个人店铺装修和直播两个场景的互动营销。从功能体验看，这些工具设计得还比较单薄，还有很大优化空间。
7.3 笔记工具
「笔记工具」包含发布商品笔记、商品笔记创作、商品笔记灵感和商品笔记热榜四个功能。所谓商品笔记就是已经开通店铺的用户可以直接在笔记加入自己的商品，从而实现引流转化。这个版块主要为用户提供商品笔记的创作数据分析和社区热门话题参考，帮助用户创作出优秀的种草笔记。
7.4 推广工具
「推广工具」包含薯条推广、内容合作和直播选品。
● 薯条广告主要为用户提供商品笔记的付费推广（花钱购买笔记流量券，让更多用户阅读）；
● 内容合作是小红书面向专业用户打造的蒲公英平台，通过招募优质博主，给与内容变现指导和助推，帮助用户在小红书实现可观的收益；
● 直播选品是为用户提供直播带货功能，用户可以加入适合的商品在直播间进行销售，最后获取返佣。
7.5 热门课程
「热门课程」提供了小红书账号定位、笔记创作、商铺运营等内容的教程，帮助用户快速熟悉小红书的平台内容推荐极致以及用户习惯偏好等。
8. 小结
从内容服务版块的设计拆解，我们可以看出：
● 小红书作为一个生活方式分享社区平台，所覆盖的内容已经包含了汽车、职场、影视、文化、科技、体育、母婴等行业。这说明小红书的用户群体逐渐多元化发展，这点从用户画像的数据也可以看出，小红书的男性用户已经快逼近30%，未来小红书的用户规模还有很大空间。
● 小红书的笔记形式已经越来越丰富，除了最传统的图文，未来短视频或许是社区更流行的内容形式（目前「视频」栏目已经调整为菜单栏第二位，权重非常高）。其次也为年轻用户提供了时髦、流行、制作成本更低的咻咻、语音笔记发布功能，极大提升了用户参与度。
● 在产品设计方面，个人认为小红书还有很多优化的空间，目前整个APP的产品内容不够丰富，几乎没有创新点。
四、社区服务
「社区服务」是根据AARRR模型拆分，这个版块的功能主要是实现商业变现，包含首购物、直播和小红卡会员。
1. 购物
作为社交电商的先驱和领军者之一，「购物」是小红书在C端变现的最重要方式。虽然被「视频」顶替了菜单栏的位置，但在「购物」频道，可以看到小红书的电商玩法，真是独特又有趣。
1.1 潮流买手店
「潮流买手店」是为用户提供当下最流行的潮流服饰销售，在这个频道可以看到众多的国内外知名潮牌最新的产品。页面内容设计得比较简单，为用户提供了潮流趋势、新品发售和品牌专区的内容，用户可直接下单。
1.2 新趋势
「新趋势」是向用户种草「正在流行的东西」，它的内容结构是平台根据不同的主题结合社区笔记和商品来生成，比如海边度假穿搭，平台会把社区优质的笔记收录，然后再关联相关的商品，通过特定的场景和主题向用户种草。相比传统电商，这正是社交电商的魅力。
1.3 福利社
「福利社」小红书官方直营的高端电商品牌，上线于2014年12月，旨在为用户提供全世界的好东西，目前已经有超过20000+美妆商品。这个频道主要包含新品日历、先锋品牌、热门品牌和热门分类四块内容，其次它的视觉风格设计得非常精致，让人有强烈的购买欲望。
1.4 小绿洲
「小绿洲」的定位是一站式购买户外好物，旨在打造一个汇聚泛户外生活方式穿搭、装备用品的买手平台。从频道内容看，包含露营、都市运动、滑板和滑雪四个大类，在每个类目可查看相应类目的商品分类、促销商品、品牌精选等内容。
1.5 宝藏好店
「宝藏好店」是向用户推荐小红书平台的宝藏店铺，内容包含每日精选、生活玩家、美护大赏等栏目。
1.6 独特设计
「独特设计」这个频道，是由小红书官方以及业内优秀设计师、社区优质作者和时尚行业专家共同评审出来的独特设计商品。用户人群定位高端，满足那些想要高品质、高审美的用户群体的需求——在小红书，找到全世界的好东西。
2. 直播
直播是当下最流行、最重要的运营手段。小红书的直播版块，设计了众多丰富的互动、营销工具，极大提升播主的运营效率。
2.1 发布直播
播主在点击「发布」后，在底部切换到「直播」即可开启。
● 在头部，用户需要选择直播方式，目前小红书提供视频、语音、手游和电脑（通过电脑直播）四种直播方式，然后填入基础的直播信息比如直播主题、介绍，和上传封面等。
● 在底部，用户可以选择美化、翻转等效果，还可以添加带货商品、设置礼物打赏等功能。
2.2 直播间
2.2.1 互动支持
小红书为播主提供了PK、投票、直播预告、连麦、小纸条等多种互动工具：
● PK：支持礼物PK和人气PK两种模式，播主可选择随机匹配和邀请指定主播，这个功能有助于提升直播的趣味性，播主连麦PK可相互提升用户的活跃度。
● 投票：播主可实时发起投票，增强和粉丝之间的互动，提升用户活跃度。
● 群推送：当播主发起直播后，可以一键把直播推送到小红书的粉丝群，直接触达用户。
● 发红包：播主购买红包后，可设置关注播主才能领取来快速涨粉。
● 抽奖：播主可设置比如关注主播、分享直播、加入粉丝团等参与条件，通过抽奖的形式提升直播间的用户活跃度。
2.2.2 直播工具
直播工具包含了数据看板、直播送礼、抽奖等重要功能：
● 信息卡：播主可创建直播公告、推荐商品和模特信息三个卡片，帮助进入直播间的用户快速了解播主，提升用户观看时长。
● 数据看板：通过这个频道，可以查看当前直播间的详细数据，包括观看人数、新增粉丝数、流量来源、送礼排行等，有效帮助播主提升运营效率。
2.2.3 商品管理
商品管理包含了直播闪拍，限时秒杀，直播优惠券等功能，赋能播主直播带货。
● 直播闪拍：这个功能非常方便，播主可以拍照就能上传商品，操作简单，行动成本低可以快速帮助播主提升销售转化率。
● 限时秒杀：用户可创建限时秒杀商品，通过直播讲解吸引用户购买。
● 直播优惠券：播主可在直播期间快速创建优惠券，提升销售转化率。
● 预告推送：播主可插入下一场直播预告，让用户提前预约。
细节侦查：
直播闪拍这个功能很亮眼，只需随便拍照一张，就能快速上架商品，这对直播间的销售转化有非常大的帮助。正如福格模型的行动公式，主要行动成本足够低，行动频次就能增加。
2.3 直播中心
「直播中心」类似于创作中心，包含数据分析、开播奖励和主播课程等内容，主要帮助播主提升直播频次和运营效率。其次对于粉丝基础比较少的博主，还可以完成每日开播任务领取平台奖励，提升直播曝光。
3. 小红卡会员
「小红卡会员」是小红书为用户设计的会员专属权益服务，定价199元每年，主要享受会员专享价、无门槛包邮、限时购提前抢、专属客服等权益。从这个版块的内容看，小红卡会员设计得比较简单，权益不够丰富，吸引力较低。
4. 小结
从社区服务版块的设计拆解，我们可以看出：
● 小红书在C端的变现方式比较单一。我觉得可以再丰富一点，除了传统的社交电商，是否可以再可以参考腾讯系的产品设计一些个性化功能，增强产品的变现方式。
● 直播功能设计得非常用心。笔者过去主要通过微信的视频号直播，在拆解完小红书以后，我只能感慨小红书直播的功能非常完善和人性化，特别在提升直播博主销售转化率的功能设计上，体验非常友好。
● 小红卡会员可以重新设计。从目前的会员权益来看，这个功能设计得毫无亮点，不过由于没有真实数据参考，仅代表我的一家之言。
五、企业服务
「企业服务」是根据格式塔原则拆分，这个版块的功能主要是小红书面向企业B端的商业服务，包含商家店铺和品牌营销两块内容。作为国内最大的生活方式平台，根据《小红书商业化营销通案》报告，小红书不仅月活超2亿，而且用户群体月均可支配消费支出4.1K，超过81%的用户在小红书浏览完内容以后产生了购买欲望。所以小红书是好产品长出来的绝佳土壤，也成了商家品牌营销的必争之地。
1. 商家店铺
小红书的店铺面向个人和企业招募，用户只需要按照条件申请都能通过。这就像十年前人人都可以拥有一个淘宝店一样，通过输出有趣的笔记就可以进行种草转化。
1.1 店铺管理
1.1.1 PC管理后台
小红书的商铺管理平台主要帮助商家实现对店铺的管理和通过数据分析提供运营支撑，主要包含以下重要功能：
● 商品：主要为商家提供商品的上下架功能，其次还提供商品一键搬家、组合商品销售等功能。
● 数据：这个频道内容设计得很丰富，提供店铺流量、商品、笔记、直播和店铺等内容的数据分析，通过多维度的数据，帮助商家提升店铺运营效率。
● 笔记：提供商业笔记的管理、创作和创作灵感，帮助商家创作更好的种草笔记。
● 营销：提供小红书官方运营活动的报名以及多种店铺营销工具；
● 用户：这个频道为商家提供更精准的用户运营计划，通过专业完善的数据洞察店铺的用户行为，提升销售转化率。
1.1.2 APP客户端
为了给商家提供更友好运营管理体验，小红书也为商家单独开发了小红书商家版。通过APP就可以实现对店铺的数据化管理，非常友好。
1.2 商家课堂
「商家课堂」是为小红书商家提供的一站式学习平台，目的是帮助商家快速、系统学习小红书店铺运营，提升店铺运营效率。
1.2.1 成长地图
小红书商家成长地图提供了一站式课程体系，包括新手必学、成长进阶和瓶颈突破三块内容。其次这个栏目有一个非常亮眼的功能，那就是支持商家设计系统学习计划，可设置系统提醒时间和学习频次，非常友好。
1.2.2 课程中心
「课程中心」相比成长地图，提供了更详细、完整的直播以及录播课程内容学习，比如开店入驻、店铺基础、财务结算这些偏店铺管理操作的技能学习。从这个频道可以看出，小红书商家店铺运营方面，投入了很大的精力，打造了非常专业、完善的学习系统。
迭代建议
小红书在商家运营指导投入的精力超出我的想象，个人觉得小红书可以参考像知识付费SaaS服务商小鹅通的训练营模式，把店铺运营学习打造成一个动态的学习课程，这样不仅可以加深和用户的链接，为商家提供专业、有价值的课程，还能拓展商业变现的方式。
1.2.3 服务市场
「服务市场」是小红书为商家遴选的第三方优秀合作伙伴，包含商品管理、订单管理、企业管理、直播管理和内容管理五大类，帮助商家更智能化运营店铺，提升效率，比如有提供商品批量搬家上架的服务智淘分销应用，可以一键将1688商品上货到小红书店铺等。
2. 品牌营销
小红书商业产品体系非常丰富，有负责内容生产的蒲公英平台，有负责流量+转化的聚光平台、薯条和品牌广告。本文不过多分析，如有兴趣可阅读《小红书商业化营销通案》报告。
2.1 蒲公英
「蒲公英」是小红书官方优质创作者商业服务平台，它覆盖海量博主和多种匹配能力，提供定制、招募、共创多种内容合作模式，全方位满足品牌的内容营销诉求。根据官网最新数据，目前已有累计10w+创作者、65000+海外企业商户入驻。我们可以简单理解为蒲公英是小红书初级的品牌营销平台，只要你的的粉丝好过1000，你都能申请入驻，通过发布优秀笔记种草赚钱。
2.2 薯条推广
「薯条」是小红书为内容创作者和企业商家打造的自助式投放产品，可以有效地帮助内容创作者扩大内容影响力，也能帮助企业商家通过更灵活高效的推广方式提升营销效率。也就是当博主或商家发布笔记以后，可以选择薯条推广进行笔记推广，它主要包含内容加热和营销推广两种形式。
2.3 聚光平台
「聚光平台」是小红书营销全新上线的一站式广告投放平台，能够满足广告主以“产品种草、商品销量、客资收集、直播推广、抢占赛道”为目标的多样化营销诉求。聚光平台主要为企业客户使用，通过小红书全站营销的多种组合场景，帮助企业提升广告投放回报率，高效触达用户。从官方文档介绍，聚光平台支持信息流、CPC点击等多种形式，灵活高效。
3. 小结
从企业服务版块的设计拆解，我们可以看出：
● 小红书未来在B端的业务线会越来越深，也许很快人人都会拥有一个小红书店铺，一边标记生活方式，一边向客户种草。
● 小红书为企业客户提供的品牌营销体系非常完善，不仅有蒲公英、薯条、聚光等平台，还独创IDEA方法论，从洞察机会、定义策略、击穿品类赛道再到沉淀品牌资产，都利用平台自身强大的用户资源满足客户的需求。
● 如果只是体验APP，我们无法获知小红书真正核心的产品体系，所以当我们升维去拆解一个产品的时候，我们的收获就会更大。
六、思考总结
通过以上部分对小红书的全面体验和拆解，我们可以看出，小红书作为国内最大的生活方式平台和社交电商开拓者，产品设计其实也有诸多问题，以下为我梳理的产品设计总结和建议：
1. 商业层
小红书在C端的变现业务太单薄，仅有购物、直播打赏和小红卡会员，可以尝试增加合理的变现手段，不仅能为平台增加收入，也能为用户提供个性化的服务。当然从企业服务的拆解看，他们为企业客户提供覆盖内容生产、流量+转化的商业产品体系已经足够丰富，他们不缺盈利手段。其次我更喜欢小红书过去的产品Slogan——发现全世界的好东西，这个口号简单、直接、朗朗上口，听一次就记得住。
2. 产品层
虽然已经发展十年，近一年产品迭代版本次数高达98次（在我拆解过的产品中最高，12306平均年迭代次数为3次），但我认为小红书APP的内容设计不够创新，也不够丰富。我在「内容服务」版块提了很多迭代建议，比如首页的「本地」频道可以把内容再拆分得细致一些，让用户能找到更精准的内容。还有笔记的分享功能，只提供一张朋友圈长图海报生成方式，太浅陋了，不够细致。
3. 体验层
如果从一个普通用户去体验，小红书APP产品体验非常流畅，操作简单、学习成本低，这和社区内产品交互流程本身比较简单有关，几乎没有涉及复杂的业务流程。但从一个小红书博主的角度去体验，我发现小红书的创作平台规划非常乱。比如创作者中心、专业号中心、商家入驻中心、商家店铺管理以及直播中心这些产品，边界不清晰，入口也不明显，需要反复来回查找才能找到入口（我甚至每个平台的网址都单独收藏，才能快速访问，否则我会在官网迷失很久）。
作者：设计大侦探 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
作者：SFUP_DESIGN 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
为回馈新老用户、持续提升业务增长、打造品牌影响力，开展年终回馈活动；本次活动通过拉新、促活、转化等方式实现用户和业务的增长。
基于兔年和送福的节日习俗，采用了“福兔迎新”主题，并结合业务目标，构建活动玩法。
在页面交互上，需建立统一框架承载丰富的玩法，也要保证易用性和扩展性。
为保证主页进出游戏的体验流畅，采用了统一的结构框架。顶部标题固定，中间模块下移，露出游戏区域，再利用过渡动效，保证无缝转场的自然流畅。
3.1 标题 &图形设计
在标题设计中，将“兔”耳造型融入字体设计中，与主视觉相呼应，营造浓郁的兔年氛围。倾斜8度的字体，展现出我们对新年蓬勃向上的精神追求和快速高效的业务增长速度。统一圆角处理和圆点元素延续了顺丰logo的设计，更好地提升了亲和力。
简洁的符号往往可以传达强有力的情感，所以选取了兔年元素和中国传统纹饰融入到此次活动的代币设计中。这些符号也延续使用在活动页的其他设计和页面装饰上。
3.2 IP形象设计
“福兔”作为本次活动的IP卡通形象，将贯穿于活动各场景。小游戏中福兔作为重要角色，亲切可爱的造型配上鲜活丰富的表情不仅能引起用户共鸣，流畅轻松的动作还能极大提升用户的操作体验，增强活动趣味性和互动性。
福兔的造型设计从以下几方面去结合顺丰品牌元素：
· 强调品牌标志：带有顺丰logo的杜邦纸袋延展设计为福兔的斜挎包
· 从细节入手：福兔的圆形腮红与顺丰快递员IP形象的腮红设计呼应，同时也与顺丰logo红色圆点一脉相承。
我们为福兔设计了小游戏中的多种状态动画，用丰富多变的表情，可爱的肢体语言，融入到小游戏中，增强游戏过程趣味性和可玩性，提升沉浸感。
与开发协作在动效上使用了spine骨骼动画，通过控制骨骼，可以快速输出各种动作，减少了动画体积，提升页面加载速度。
“福兔跳跳”小游戏，通过躲避“鞭炮”障碍物，跳跃收集“福气值”、“奖励金”。同时设置难度不同的关卡，以提高游戏的挑战性和可玩性。
3.3 场景设计
主页场景跟随节日以提升感知，通过换肤减少视觉疲劳。随着节日变化，色彩和营销氛围感也随之增强。
为了增强游戏氛围、新鲜感，提高游戏体验。小游戏与主页同步进行换肤，前进时街景也会呈现节日特色建筑、装饰。
为了突出用户的品牌感知，在背景街道设计中，尽可能融入了较多顺丰元素，快递箱、货车、LOGO等等。
3.4 其他
多玩法设计
小游戏玩法，符合大众群体的偏好；奖励金、配对抢免单有效提升用户留存，激励用户持续参与活动；兑奖、冲榜玩法回馈高价值用户，丰厚奖品打造活动口碑。
引导设计
在活动的不同触点对用户进行引导与转化。
年终活动是一年中业务抢收的重要节点。活动上线后，整体上活动的访问量、参与率及留存率，均表现不俗，达到预期目标。未来我们会继续在运营活动的创新上探索更多有趣好玩的方向，丰富用户体验，挖掘创新玩法。
我们下个活动再见～
作者：SFUP_DESIGN 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
前言
作为设计师的你，是否也遇到过这样的问题：
1.负责的业务线产品逻辑复杂难懂，产品自己想不清楚需求，导致项目难以有效推进；
2.设计方案拍板的人太多，一人一个想法，沟通成本高，还总是返工；
3.设计优化找不到头绪，不知道是否匹配产品目标等等…
本文将从what、why、how三方面带你一起解读设计共创的方法论模型，并以实际案例为指导，分享设计共创五步法；感受在设计过程中，通过与其他核心角色一起共创，从明确共同目标、共同决策、共创设计、共同评价，到最终共享设计成果过程。
一起来赴一场创新共赢的设计盛宴吧！
What-什么是设计共创
共创行为由来已久
共创模式并非现代社会的新生事物，其萌芽可追溯至人类文明早期，比如中国最早的诗歌总集《诗经》、古希腊的《荷马史诗·伊利亚特》等耳熟能详的文学作品，都是在民间大众共创基础上再由作者整理完成的；还有《永乐大典》、《四库全书》等大型文化工程著作，都是集体协作的结晶。共创行为在人类文化发展史的各个阶段，我们都可见其踪影。
设计共创的定义
1.名词定义
网上较少关于设计共创方法的完整介绍和明确定义，只有一些相关资料是对于该方法的理解。
如：“Co-designis a design-led process that uses creative participatory methods. There is noone-size-fits-all approach nor a set of check- lists to follow. Instead, thereare a series of patterns and principles that can be applied in different wayswith different people. Co- designers make decisions, not just suggestions”(Burkett, 2012).
“协同设计是一个通过使用创造性和参与性的方法进行设计的过程。在这个过程中，没有一种放之四海而皆准的方法。但是，有一系列的模式和原则可以与不同的人以不同的方式进行应用。协同设计是为了做出决策，而不仅仅是建议”
2.笔者对设计共创的理解
经过在实际工作中的不断实践和应用，用一句话来总结我对设计共创的理解：“邀请核心角色参与设计关键过程，共识问题和目标、了解设计思考过程并共同决策、共识评价标准并共享设计成果”
Why-为什么要使用设计共创
设计共创的价值
设计共创有以下三个重要价值
1.打破能力边界：个人能力是有限的，通过卷入其他核心角色的参与，发挥各个角色优势，实现资源的优势整合，有效打破个人能力的边界。
2.丰富视角维度：设计是一个不断平衡的过程，了解并兼容更多信息才能使方案更加完备，然而设计的单一视角往往是具有局限性，设计共创可以帮我我们从多视角思考问题，有效规避风险。
3.拓展价值广度：项目的价值如果仅仅从设计角度进行评估会显得单薄，难以获得其他角色的认可。通过多角色共建评估标准拓展价值广度，最终实现价值共享。
什么类型的项目适合进行设计共创
实际工作中我们通常会从项目的相对设计成本和相对设计价值两个维度来评估项目类型。设计价值相对较高，又具有一定设计成本的项目，比较适合进行设计共创。例如一些业务逻辑复杂的改版项目、从0-1的前瞻探索项目、设计多方决策的横向项目等。
对设计成本、设计价值的理解
相对设计成本通常由业务复杂度、需求是否明确、沟通成本量决定；而对相对设计价值的评估则需要从用户、业务、设计三个视角进行评估。
设计共创流程 VS 常规设计流程
对比我们常规的设计流程，设计角色通常作为一个需求的把关者出现，重点参与需求确认后的设计相关环节，最终从设计单一视角进行项目复盘。在项目从需求到上线的整个过程中作为被动者的角色，断点式的参与，缺少控制权。
而设计共创流程要求我们在项目的各个环节深度参与共同决策，变被动为主动，从共创视角全流程掌握项目细节，提高对业务的理解和判断。
How-如何开展设计共创
以《百度保障体验优化项目》为例
注：百度保障项目主要服务于百度网民权益保障计划，这是百度联合国家司法部、消协推出的首个搜索引擎网民权益保障体系，其目的是为了更好的保障网民的合法权益，当用户在百度进行搜索、购物等行为时，遭到钓鱼、欺诈、假冒官网并造成经济损失时，可以享有一定额度的保障金，属于百度APP的特色功能。
从项目的相对设计成本、相对设计价值来看，百度保障体验优化是一个设计成本&价值相对较高的项目，比较适合进行设计共创：
1.相对设计成本高
①业务复杂：百度保障是一个涉及BC双端用户的产品，流程复杂，设计侧处于刚接手的阶段，对业务逻辑不熟悉。
②需求不明确：百度保障业务属于百度特色功能，起步晚且少有可参考的行业竞品，常常是一句话的改版需求。
③沟通成本高：产品团队新调整，一线产品同学经验不足，缺少成熟的合作流程，总是频繁改需求。
2.相对设计价值高
①用户体验差：保障业务体量虽小，面对的用户却都属于高危用户，然而之前的功能没有经过设计介入，用户体验极差。
②业务重点：影响百度口碑，是产品侧的重点优化对象。③设计视角：改版需求设计发挥空间大，产品给予高度配合。
《设计共创五步法》
接下来将结合《百度保障体验优化项目》说明设计共创的实践路径。
第一步：业务理解
1.项目背景摸底
产品最初的需求只有一句话“保障官网目前体验很差，很久没有优化过了，需要设计团队帮忙整体改版”，并在此基础上提出一些非常稀碎的优化点，缺乏关联性和整体性。
设计侧开始通过定性、定量多种形式对业务进行摸底，明确整体的业务逻辑以及保障官网所处的位置，并通过用户反馈和用户数据分析问题，明确用户的真实诉求。
2.理解业务价值
通过业务摸底，设计侧将对业务价值、业务逻辑的整体理解梳理出来，并与产品确认达成共识。
百度保障业务有三个重要的环节：保障官网、申请保障、保单管理。通过这三个环节建立起用户端和商家端之间的联系。其中，百度保障官网起着非常重要的信息传达、用户保障认知建立的作用。
3.现状问题分析
百度保障官网作为重要的保障认知传达阵地，存在框架层级混乱、信息简陋缺乏针对性、传达效率低等问题。
第二步：共识目标
通过多角色沟通，我们将官网改版的核心目标确认为“如何从BC双视角重塑官网信息强化保障认知，让官网内容更易理解”。
在共识目标的过程中，设计侧可以先基于共识的业务价值和问题定一个初版目标，然后拉其他核心角色一起讨论，避免无目的低效率沟通，在基本共识点的基础上更容易达成一致。
第三步：设计共创
基于共识目标，设计侧组织开展多角色脑暴进行设计方向共创和方案细节共创。
1.设计方向脑暴共创
①共创前-充分准备有效的脑暴和共创过程需要组织者具备清晰的思路和明确的引导。在脑暴前我进行了详细的脑暴议程安排，并通过邮件和工作群的方式同步给参会同学，要求所有参会同学会议前完成阅读，保证信息同步。
②共创中-把控节奏
共创过程中为了保障脑暴的质量，我会要求全部参会同学关闭电脑聚焦在讨论的目标上，明确问题和目标→各自思考并用标签记录想法→共同讨论并在大白板上进行整理分析→得出共识结论。
以C用户官网优化视角来举例
我们在共识官网想要为C用户营造的感知是让他们能【了解保障作用，建立信任感，知道如何申保】之后。从使用场景、用户诉求、诉求满足依次进行脑暴共创：
1.核心场景：通过对业务的理解发散讨论用户什么场景下会来到保障官网，大家一起共识了两个核心场景。
2.用户诉求：基于核心场景，将自己带入用户，想象进入保障官网的自己核心诉求是什么？每个人写下自己的想法，然后贴标签找共性，共识核心诉求。
3.诉求满足：共识诉求后，我们转变视角，思考作为产品设计师我们可以通过提供哪些内容来满足用户的诉求。同样的，每个人写下自己的想法后贴标签找共性，此次的内容对于官网信息的呈现已经起到很大的决定性作用，再此基础上，我们一起投票决定信息的优先级完成页面内容的基本布局并形成共识结论。
③共创后-记录共识共创后，最重要就是及时记录共识结论并同步到所有相关成员进行确认，这样不仅可以帮助我们理清思路，更能够很好的减少后续结论变动的风险，降低沟通成本。
2.方案细节共创
①决策框架层方案以官网中BC用户信息的强弱关系为依据，进行框架结构的多方案发散，并通过制作demo的方式完成不同方案的原型效果。
拉关键角色进行体验并投票。大家一致认为【方案3：强化C弱化B】的效果更符合我们的优化目标。
在框架方案3的基础上，进行方案细化。对比线上原方案，框架层有两个核心优化点：
1.层级优化：由原层级关系不清晰的5个页面，减少后一个C用户首页+B商家二级页，重点突出层级简单。
2.提高屏效：将原来的双底bar合并，提高页面展示屏效。
②共识信息表现层方案
在信息层基于脑暴共创结论对内容信息进行了重构，完成官网认知的搭建，主要有以下3个优化点：
1.内容更丰满：根据脑暴结论C用户首页增加9个内容模块，B商家页增加4个内容模块，建立保障立体认知。
2.内容更聚焦：将C用户页作为首页，去掉原首页，B商家页作为二级页面，强化C视角更好的满足核心用户诉求。
3.信息更真实：C首屏信息通过展示申保&认保的规模数据突出保障的安全感，B商家页通过轮播申保动态&增加真实案例方式营造真实感。
完成方案后拉关键角色对齐共识，调整优化细节，明确最终效果。
第四步：指标拆解
在指标拆解方面，根据HEART+GSM体验度量模型，完成定性+定量验证指标的分析。
简单来说，就是将HEART模型中的体验标准依次纵向排列，将GSM体验度量模型作为分析工具，依次对HEART模型中各个维度从目标（goal）、信号（signal）、度量指标（metric）进行分析。
以留存率（retention）为例，我们的目标是希望用户愿意多来官网了解信息，不断强化保障认知，那么用户所表现出来的行为信号是多次访问保障官网，对应的度量指标可以拆解为活跃用户量、次日/三日/七日留存等等。
完成设计侧指标拆解后，与产品进行讨论，从产品视角给予补充完善，双方达成共识后，一起完成定性评估问卷和打点规则细化。
第五步：落地验证
上线后持续观察用户数据，对比上线前后的定性+定量指标，定性评估及定量数据指标均得到明显提升。
其他思考
设计共创循环流程
官网优化只是保障体验的一个环节，我们以点入局，拉开了保障体验全流程整优化的帷幕。
在完成申保前-保障官网的整体优化改版后并获得极大成功后，我们趁热打铁，通过用户体验地图的方式完成保障中、后全流程的设计机会点分析，明确申保中、后设计目标并完成具体设计提案，与产品共识后分期推动落地，与官网优化一样，通过设计共创和严谨论证最终上线后的数据效果均表现正向，符合预期。
从保障全流程优化的案例我们不难发现，设计共创是一个循环过程，它始于我们对业务的初步理解，终于一个循环后对业务的理解加深而进行进一步的循环，从而形成一个良性循环，帮助我们不断深入业务，助力业务体验不断优化提升。
及时进行项目复盘总结
在项目关键节点及时进行项目复盘，不仅可以让所有参与项目的同学有获得感和价值感，更加认可设计共创的成果，形成正向循环。同时也能扩大设计的影响力，获得合作团队老板的高度认可和赞许，达成双赢目标。
作者：百度MEUX 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
作者：蓝蓝设计 图片来源：花瓣网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
作者：蓝蓝设计 图片来源：花瓣网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Hi，我是彩云。用户头像是我们在做UI时经常会用到的设计元素，但想要设计好它也是有很多需要注意的细节知识的，今天这篇文章将深入到头像设计的方方面面，不同的事件、状态、操作、配色等等一系列UI设计的最佳实践。这篇文章准备了很多实例，或许可以给你一些启发。
近年来，我几乎每天都在浏览数以万计的UI组件、界面、不同的网站和app，研究它们的结构、布局和配色方式。我的目标是创建一个全面的UI指南，设计应用及其组件、模板等。
今天这部分讲的就是关于用户头像的UI组件探索。用户头像是一个组件元素，用户通过它来标识自己。
基本上有以下三种类型可以用来代表用户头像
空状态
名字的首字母
用户照片或者图片
根据具体使用场景的不同，你可以使用多样化的颜色和尺寸:
1）为了更好的识别，不同用户配色可以多样化一些
2）页眉、导航栏中一般用24-40dp宽度为主
3）40-48dp的头像大小通常用在内容块或列表中
4）如果你想在更大的页面中使用头像，比如个人中心、设置中心等时，推荐使用56+dp
当我们想通过用户头像通知某事或演示某种操作时，可以使用额外的UI元素；
1）指示灯标识用户是在线还是不在线
2）通过带有编号的标签通知提供信息
3）可以在用户头像上增加额外的图标提供用户行为操作
显示用户状态的最常见做法是在头像的右下角放置一个多色控件
1）绿色的代表在线，灰色代表不在线
2）填充图形代表用户在线状态，而空心形态用户不在线的状态（并且是可以操作的）
根据不同优先级以及为了吸引用户的注意力，可以修改头像的标签样式
1）对于高优先级的提示，可以使用高亮的底色+反白的文字
2）对于其他情况，使用浅色背景，形式上做一些弱化
当头像带有操作功能时，通常使用圆形按钮或嵌套图标等组件来显示即将进行的操作。
1）将图标更改为符合用户期望的结果
2）颜色的使用要合理，需要强调事件或动作的含义
单边文本
当需要添加额外信息时，次要标题可以和头像一起使用。此功能在应用栏、列表、表格中非常常用。
1）较大的标题用于表示用户的名称
2）额外信息的文字是可选的（例如：状态、职业、上次访问、关注者数量等）
底部文本
对于整页，可以使用更大的头像，并将文本放在底部。这是应用内的常见模式，例如社交、个人资料、设置等。
事件
为了进一步表明新用户的事件，可以在头像周围添加一个描边。还可以添加一个带有标记的计数器，这也将具有更强的设计提醒作用。
进度
使用一个描边线作为用户成就的进度，仍然非常流行和方便。
选择
对于所选状态，用户最可靠的确认方法之一是确认图标和描边的组合。
以下是所选状态的典型变体的外观：
带一个按钮
当头像被分组时，额外的行动按钮可以是一个可靠的选择，让用户从那里知道某个操作。例如，“加号”按钮将我们带到一系列交互相关的选项（添加、编辑、排序等），这些选项可以对分组的头像执行。
标记
数字标记是展示队列中剩余用户数量的一个很好的解决方案。
带有悬浮状态的标记
一个标记最常见的模式之一，当它被悬停时可以显示用户的附加信息，作为信息交互的扩展。
具有悬停状态的头像
当堆叠组中的头像悬停时，显示用户全名的最佳方式是使用悬停组件。
页面模板
在应用或网站中使用头像的最流行的方式是在头部嵌入一个小的用户图片，或者在配置文件/设置部分嵌入较大的头像。此时，用户可以对图片进行编辑操作。
以上就是我所整理的关于头像知识的所有内容，希望看完这篇文章你可以更加全面的设计更好的头像。
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Hi，我是彩云。画面平衡是一个很基本的设计理念，但很多朋友在平时的作品中容易忽视这个点。彩云在星球中帮不少朋友看过作品集，发现最多的问题之一就是画面平衡没做好，我觉得只要把这个基本问题解决了，作品就能提升一个档次。
用户本能地会对不平衡的设计感到厌烦，如何在画面中创造一个有吸引力的平衡？是本篇文章要分享的内容。
Illustration: Outcrowd
平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐，这种平衡状态直观上能够让用户感到舒适。
人体是垂直对称的，我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡，直觉上总是倾向于平衡一种力量与另一种力量。
Illustration: Outcrowd
在设计环境中，平衡是基于元素的视觉重量，而视觉重量是用户对图像的注意力范围。如果画面是平衡的，用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。
如何让一个页面看起来平衡？
最常见的平衡例子就是使用对称。
在潜意识层面上，对称的视觉能让人愉悦，能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说，画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的，但它经受住了时间的考验，到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。
Illustration: Outcrowd
两侧重量不相同的元素构成具有不对称平衡。
动态平衡通常会比静态平衡更有设计感，让画面不至于呆板。在缺乏平衡的情况下，我们的目光会条件反射性地开始寻找平衡点，这是一个很好的机会，可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力，就像产品的生命线一样。
Landing page — Asian Cuisine
比如一般这样去“配重”的元素会是一个按钮或者标题。
重要信息（或者是行动按钮）就是我们需要去配重的价值元素。
不对称的现象越严重，用户就越想找出其中的原因（检查配重）。人们本能地比平时更仔细地研究这样的画面。然而，这里需要注意分寸，过于古怪的构图并不总是能被很好的感知。
Illustration: Outcrowd
平衡中的另一种类型，特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是，注意力很容易找到并保持一个焦点——恰好就在它的中心，这通常是构图中最引人注目的部分。
这是一种平衡中的混乱，就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点，所有的元素都有同样的视觉重量。没有层次，乍一看，画面就像视觉噪音，但所有元素又相互匹配，形成一个连贯的整体。
（彩云注：这是一种比较高阶的设计平衡处理手法，用的好可以让画面非常具有设计感，但把握不好的话，就会非常凌乱。所以，我们平时能看到很多大师的作品看似一些简单图形的使用，但就是好看，轮到自己设计的时候就会发现，越简单的设计似乎越难设计好。）
Illustration: Outcrowd
当谈到构图中的重量平衡时，他们经常将其与物理世界中的重量进行比较：重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面，就像一个天平。如果我们在图像的边缘添加一个元素，它就会失去平衡，有必要修复它。元素是否是一组色调、颜色还是点并不重要，目标是找到图像的视觉“重心”，即图像的重心。
不幸的是，没有精确的方法来确定一个物体的视觉质量。一般来说，设计师依赖于他们的直觉。不过，下面这些有用的观察可能会有所帮助:
大小
大的物体总是更重
形状
不规则形状比规则形状的元素轻
颜色
暖色比冷色重
色调
深色物体比浅色物体重
图案
带有图案的元素显得更重
3D
带有纹理贴图的元素显得更重
内部复杂性
物体内部越复杂，视觉重量更大
填充空间关系
正形空间比负形空间更重
对重量的感知
照片中的哑铃看起来会比一只钢笔更重
当使用对称时，作品看起来可以更加的专业和有科学性。其中，静态对称的作品显得更加有专业精神和严肃的；而动态对称的设计方法则能吸引用户的兴趣，表达出个性和创造力，能让用户集中注意力。
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法，实现快速导航，解决语言障碍，最终提升用户体验。
图标作为一种设计工具，在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的，这些特征赋予了它们通用数字语言的地位。
在这篇文章中，我整理了10个简单又重要的技巧帮你设计出更专业的图标。
最小的图标大小通常是12 x 12px。以这个尺寸为基础，行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。
重要提示：当你设计图标时，重要的是要按100%显示的比例去设计，使图标完美像素并放大像素块查看准确性。
完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今，高分辨率显示器和视网膜显示器正变得越来越好，所以在不久的将来，对像素完美图标的需求可能会减少。但就目前而言，让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。
1) 像素网格对齐.
使直线部分完全清晰，并增加曲线和边角的清晰度。（彩云注：尽可能的使线条实心）
2)完美角度
有角度的线更模糊。创建图标的最佳角度是45°，因为形成一个角的像素彼此对称。
3)边缘清晰
直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。
为了让图标看起来整洁一致，重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。
理想情况下，线宽和间隙大小也应该相等。
然而，有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时，它就会发生。比如条形码这个例子来说，我故意使图标内的线宽和间隙大小不均匀，以表示条码的特征。
在UI设计中，对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时，规则很简单：在正方形和圆角之间进行选择，并对所有的图标应用相同的属性。
为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中，你可以看到打破这个原则是如何影响视觉感知的。
在电脑上看起来完美对齐和平衡的东西，在你的眼睛看来可能并不一样。
当我们把大小相等的正方形和圆放在一起时，我们会有一种不对劲的感觉，圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同，我们应该使圆更大(或减少正方形的尺寸)。
这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点，直到整体对齐看起来正确。在下面的例子中，你可以看到突出显示的图标看起来很大，尽管它与其他部分的大小相同。为了平衡这个集合，我们需要通过缩小图标的大小来调整突出显示的图标。
（彩云注：这个原则很多人应该都知道，但我发现也是在整套图标的设计中最容易出现的问题，当把图标汇总在一起的时候，这个问题尤其需要重视。）
我们经常在设计软件中使用中心对齐，这种方法没有错。但当涉及到细节时，比如图标设计，我们需要相信自己的眼睛，打破数学法则，以增强元素的平衡。
让我们以播放按钮作为展示。这个例子很简单，但非常能说明问题，因为形状越不对称，需要改进的缺陷就越明显。
我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是，大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动，它就越具有通用性。
（彩云注：KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限，彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ，感兴趣的可以去学习下。）
它如何适用于图标设计?
1）别使用文字
文本和图标的绑定减少了图标的通用性。此外，小尺寸的文本是可读性很差。如果一定要文本作为支持元素，使用工具提示和图标旁边的标签。
2）不要过度设计
不必要的复杂性阻碍了合理的表达，应该避免。过载的设计会将用户体验变成一场噩梦。
3）避免不必要的元素
只要确保每个图标在整体环境中是可理解和清晰的就行。（彩云注：比如已经是在邮件客户端中，就不需要再额外增加表示邮件的图标部分）
重要提示：在图标设计中合理地使用KISS原则，也不要把事情做得太简单，否则会影响功能。一个优秀的图标应清晰易懂。
图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是，这个规则非常灵活，只是作为参考，方便图标的设计在视觉上平衡。所以，如果你觉得你的图标不完全匹配这个框框，但看起来完全正确——相信你的眼睛！
框架是设计的“容器”。框架规范了一个统一的范围来设计图标，这背后有一些原因：
1) 大小
由于其几何形状，所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸，我们应该将它们放置在大小始终相同的框架中。
2)输出
框架内的图标与视觉中心对齐，这经常被开发人员忽略，因为他们经常根据实际的中心来调整图标，而没有注意到差异。这就是为什么用框架输出图标是至关重要的，当你按这个框架输出图标时，能保证视觉设计时想要的视觉中心。
3)效率
如果使用Figma，可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。
如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时，会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题，请设身处地为用户着想。
1）不要让用户思考
例如，如果他们不知道自己想要找到哪种花卉图标，那么就让他们看到一系列选择:鲜花项链，室内花卉，植物商店等。
2）展示关联图标
例如，如果用户想在相同的主题或类别中找到图标，他们可以快速地检查包含这个特定图标的完整集合。
3）使用标签
用户可能很难找到合适的词进行搜索，或者可能希望看到所有类似的补充选项，从中选择最合适的。例如，当一个图标的实际名称是“兰花花瓣”，你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫
最终应该导出SVG或PNG格式？这是一个关键问题。让我们来比较一下格式:
我个人的选择是使用SVG图标，因为它可以节省很多时间。但是，一定要小心缩小复杂的形状，并记住旧的浏览器可能不支持SVG格式。
到这里你应该已经学会了这10个图标设计要点，在你的图标设计中使用这些规则，相信会让你的图标变得更加专业！
彩云注：图标设计是一个设计师的基础能力，在彩云看过的无数份作品集中最普遍的问题也就是图标设计。今天这篇文章虽然非常基础，但千万别小看它，用这10条技巧重新审视自己的图标作品，相信会有新的收获！
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Hi，我是彩云。界面是用户在与任何产品、APP或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在UI设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面2个案例中，左侧的“购物车”和“库存2”太过于术语化，右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。
为了获得好的体验和UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在UI设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt's Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是UI中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使UI看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有2种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让UI看起来更加干净和优雅。用线分组的情况适用于类似Twitter、Medium之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。
（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
14. 搜索中的占位符要用好
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
高饱和度的颜色能形成强烈的对比。在暗黑模式下使用高饱和度会很刺眼，给用户很不好的体验。暗黑模式一般在晚上使用，因此对设计师来说，需要做的是让整个配色相对柔和，让用户感到放松。基于此，在设计的时候应该将饱和度限制在200-500之间。
(彩云注：这里的200-500彩云去查了不少资料，但没有找到最好的答案，这里引用的是Material Design中的颜色规范，感兴趣的同学可以自行查找)
在同一个界面，最理想的状态是只有一个最主要的关键按钮和紧跟着的次要按钮。这是因为如果一个界面上有太多这种行动按钮（CTA）按钮，会让关键操作淹没在这些按钮中，让用户不知所措。
17. 简化不必要的动词
没必要在菜单上增加动词和短语，用最少的信息写清楚功能就足够让用户理解了。所以，在菜单设计上要尽量避免增加无关紧要的词，这样才不会影响用户体验。
你可能注意到，很少有表单的字体大小不平衡，字体之间的类别尽量少一些看起来会更加平衡。在决定字体大小时，尽量规范字号的标准。比如标题（16px），副标题（12px），正文（10px），说明文字（8px），这些尺寸都是以2为倍数的。
尽管我知道要做好图标一致性，但在实际工作中依然经常犯错。很多设计师经常用不同风格的图标混在一起，这样会让整个UI界面的设计显得很不成熟。图标是为了让用户更有效率地理解事物。在使用图标的时候一定要注意图标的一致性，尤其是一些是一些风格细节。
这里也跟大家分享2个我自己常用的figma图标库：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
通常情况下，我们会认为一个颜色在深色模式和亮色模式下是用的同一个颜色值，但这其实是错误的。一个颜色在亮色模式下看起来非常漂亮，但在深色模式看可能就太暗了，反之亦然。解决这个问题最好办法是使用2套不同饱和度的颜色。
App的新手引导决定了用户第一次体验产品时的感受。在设计的时候，试着公开需要哪些具体步骤，增加”跳过“和前后移动查看的能力对新用户来说非常重要。
许多网站和App都是用图片驱动的，但在图片上直接增加文字内容有时候会被淹没掉。在图片上增加一个叠加层可以提升内容的可读性。
23. 信息部分露出
对于一些大屏设备来说，像笔记本电脑，平板电脑和智能电视，它们都有非常多闲置的空间。对于这些闲置的空间来说，尽量通过设计告诉它底部还有更多内容。这对UI和UX方面都有好处，因为空间的使用方式能够让用户清晰的知道所有内容。
为了让用户聚焦阅读，应尽量避免使用大段的长/宽行。保持短句和简洁能够增加内容的可读性。
（彩云注：这点用在你的作品集里也是很合适的，有些人经常使用大段的文字内容来描述，很可能直接劝退面试官）
Z字形原理，也就是大众所熟知的”古腾堡原理“，它描述了当人们看到一个均匀分布元素的设计时，眼睛的总体运动情况。通过这个原理我们知道，用户在内容上的视线是沿着Z字形来阅读的，所以遵循这一原理设计你想要核心表达的内容。
扩大点击区域，维护像按钮、单选、多选等控件的响应尺寸，如果你设计的点击区域太小会让用户点击困难，造成流失。
避免使用花俏和俗气的图标，它们会让整个设计显得非常不成熟，同时也是很难理解的。用上更简单的图标形式，会让界面更高级。
（彩云注：当然越简单的图标其实想画出彩会更难，另外也需要区分不同的场景，像一些运营类的图标可能会为了活动氛围做的相对风格化一些。）
选错文案，会让人们对于任务缺乏兴趣，根据上下文使用更合适的词组。
轻敲和点击有时候很累人，可能不如使用滑动、拖拽等手势操作，这些操作会让界面更简洁并且也能顺利地完成既定任务。
在探索酒店、目的地甚至是阅读任何文章时，用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆，避免使用长文本导致的滚动。相反，可以加一个阅读更多的按钮方便想看全所有内容的用户。
”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰，尝试用线对相关内容进行分组。
（彩云注：其实有留白和不同颜色做区分也是可以的，建议根据自己的设计风格和具体内容来定）
在设计控件时，如果可以用图形可视化的地方就优先尝试把控件图形化，除了非常需要很精确的设置参数。对于价格范围这种，很容易将它可视化为滑块控件。
对一些人来说容易理解的东西，对某些人来说可能不是。因此，最好使用示例占位符来解释输入字段，这可以防止用户在填写内容时出错。
根据”系列位置效应“，心理倾向于记住列表的第一项和最后一项，而不是中间项。因此，在任何App中设计导航时，根据应用的上下文保持最左和最右的选项。例如instagram，最左边是”首页“，而最右边是”用户“。
（彩云注：这是一个心理学上的理论，人们对于一系列的材料更容易记住开头的内容，也叫做首因效应或者首位效应；更容易记住末尾的内容，就叫近因效应。）
在设计任何体验时，点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标，额外的点击会减慢整个操作过程。简化过程，自然体验就会更好，所以尽可能的减少点击次数。
（彩云注：下面的案例，增加可点击符号也可以减少用户思考的时间。）
为了使内容突出，没有必要使用多种字体类型，包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量，同时只使用一种字体足以吸引用户对内容的注意力。
留白在设计中非常重要，太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。
根据多尔蒂阈值(Doherty Threshold)这个理论：”系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。“。因此，我们可以使用动画、图像甚至文本来保持用户的注意力。（彩云注：给用户的提示可以先快速加载信息框架，让用户有事可做，而不是什么都看不到）
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
蓝蓝设计的小编 http://www.lanlanwork.com