文案 用户 广告 文案与文学不同，文学是文化的表达，文案是商业的产物，但都离不开文字。文案在广告、品牌营销中有着非常重要的作用，本文就来聊一聊文案究竟是什么？更多文案干货：腾讯出品！5000字干货帮你重新认识UX文案（附实用技巧）讲到 UX 文案，大家可能并不陌生：一个按钮、一个弹窗的文案填充，我们几乎每天都要与他接触。阅读文章 > 一、什么是文案文案来源于广告行业，是广告文案的简称，由 copy writer 翻译而来。现指代文字工作者，工作内容包含标题、正文、口号的撰写。或者可以理解为文学的商业表达方式。广告是所有文案和营销的“鼻祖”，比如品牌宣传、电商平台大促活动、抖音短视频等，最终的目标无外乎就是卖产品、卖人设、卖概念、卖公司，他们所表达出来的状态，都是广告学的一些相关内容，所以像金枪大叔这样的老营销做抖音就特别的容易。如果你掌握了广告营销的思路，会对产品有更深入的了解。在广告公司里面文案为王，好的文字比图片视频更容易传播。因为描述一件事情很难，比如一个好的视频，最少也需要 1 分钟左右，才能让你感受到这个东西很棒。但文字不同，它可以借助人们的共识，以小搏大。比如钻石恒久远，一颗永流传、Just do it 简短几句话就能获得文字背后的力量。二、文案是一种有目的的表达文字在传播的过程中需要带有某种目的，大致分为四种：销售、转化、激活、传播。如果一句文案没有这四种表达意愿，这条文案就是不及格的。比如“今天天气很晴朗”，“我想吃一顿饭”这些是都不具备文案本身属性的。它并没有很清晰的目的。用户在看完目标性文案最好的三个反应惊讶：啊？你怎么会知道（我怀疑他在我身边放了监视器）共鸣：我也有这种感受（给你点个赞）刮目相看：只有你懂我（默默收藏）在书写文案时融合以上三个点，往往能够激发消费者的“情感共鸣。”不要让文案把用户带入理性的思维模式，而是要让文案触发人们的情感。这些都建立在对用户的洞察上，洞察不代表陪伴。你了解，但是不一定能打动用户。比如你喜欢一个姑娘，你知道她喜欢什么，但是你却不知道如何让她喜欢上你。洞察的前提是了解明确用户画像，深入了解产品的真实用户。比如脑白金，它的用户群体并不是老年人，卖的也不是“营养品”，而是年轻人想“尽孝”的解决方案。央视的加持，让大部分人形成了脑白金是一种名牌高级的商品。加上那句洗脑的文案”送礼就送脑白金“成功抓住了年轻人过年不知道如何选择礼品的痛点。广告圈还有一个非常有名的案例，需求是推荐钢琴班。如果让你推销这个课程，你会怎么做？比如下一个朗朗就是你的孩子，这是利用父母望子成龙的心理。但这里面有个问题，大家都知道想成为朗朗是非常非常难的，难免就会怀疑你广告的真实性。有家琴行呢，就想出了特别有名的一句广告词，“学钢琴的没有坏孩子”，这句话是直抵人心的，至于未来能否成为钢琴家，和孩子没有学坏相比，后者显然更符合大多数父母的期望。三、文案的三个核心点文案不是抖机灵，真正的文案需要实现商业目标，达成用户行动上的某种改变，可以是下载、参与、购买、推荐等。在营销上有一个非常经典的 AB 点理论。A 点是用户看到你文案之前的状态，B 点是希望用户到达的一个状态。让用户对品牌的认知不要产生偏离，在对品牌没有认知和概念时，让新用户或者老用户对品牌的喜爱和忠诚度更高，且符合品牌自身的调性，这就是文案需要达到的效果。下面举几个例子来看一下。1. 达成目标“抖音，记录美好生活！”2018 年三月份产品定位转型的新 slogan，在此之前抖音一直主打我很潮、很酷与众不同的调性，这个版本抖音开始把自己定位成一个记录生活的工具，这句文案很好的承载了它改版的初衷，完成了转型的目的。你们还记得抖音早期的广告文案吗，让崇拜从这里开始。“百度一下，你就知道”百度是市场占有率第一的搜索引擎。它成功的把百度和搜索两个词进行了混淆。生活中遇到不懂的问题，脱口而出的是不是百度一下，而不是搜索一下。这句话至今为止算是互联网最好、最成功的广告文案之一了。“充电 5 分钟，通话 2 小时”oppo 凭借这句经典广告词，让它火遍了大街小巷。它是一个非常好的产品卖点文案。虽然没有承载产品本身的调性，但也是比较朗朗上口。2. 用户有感“汇仁肾宝，他好我也好”肾在大多数人的想法中是与男人行不行强关联的，但是广告中又不能明说，用这种隐晦的方式表达，大家反而会会心一笑，利于传播。“今天踩在我头上，明天长到你坟上”这是保护花草的广告语，短短一句话充满了故事性，而且伤害性不大污辱性极强。长到你坟头，你又对我无可奈何！这种比较玩味的话术，在年轻人中非常利于传播。杜蕾斯的广告在大部分人眼中，会感觉它总能蹭到热点上，并且海报做的非常有意思，宣传效果也不错。但它其实并不是在给自己的品牌打广告，而是在给避孕套做广告。看完杜蕾斯的广告后，你内心的写照：不错，杜蕾斯这个广告做的真有意思。然后你转身就去买了冈本 001！因为杜蕾斯它的产品卖点并不突出，但提到冈本 001 你就立马会想到“真的超薄”….3. 符合调性“Just Do It”一个关于耐克经典标语背后令人唏嘘的故事。1976 年 Gary Gilmore 前后犯了两起命案，被法院判处死刑。这也是美国 1967 年废除死刑至 1976 年恢复死刑后，判处的第一例死刑。Gary Gilmore 临死前的遗言：Let’s do it，大概意思是即使你要夺走我的生命，我也要用头颅对抗你的子弹。这句话深深的印在了耐克广告主管 David Kennedy 的脑中，于是这句经典的 Just Do It 就此诞生。2015 年，David Kennedy 在自己的专栏中写道，虽然我不认同 Gary Gilmore 的抢劫和枪杀行为，但“do it”却真的相当潇洒，非常符合体育精神，也因此它才能风靡全球，且永不过时。“将所有的一言难尽，一饮而尽”这是 2013 年红星二锅头焕新计划中的一句广告词。相信很多人都有加班到半夜，坐最后一班地铁回家的时候。当你在空荡的地铁站看到这幅广告时，会不会一下子被击中情感的软肋。配上小刚壶这种比较硬朗的酒瓶，那种专属男人才有的流血流汗不流泪的感受，扑面而来！这是一个非常棒的产品广告，让人很清楚的知道产品定位的人群。他的洞察准确到直接击中我，就算我不爱喝酒，但是我觉得这就是男人该有的状态。这就是文案的力量，在看到这样文案的时候，可能什么都说不出来，但是你知道他懂你！农夫山泉最有名的一句广告，不是“大自然的搬运工”，而是“农夫山泉有点甜”！这是广告行业里非常有名的案例，如果给广告文案排个名，它绝对能进前十。因为有点甜会触发别人去尝试，喝完了后你又不能说不甜，你会觉的好像是有点甜，会心一笑中就会引发更多人的试用。它会有一个非常明确的销售意愿带给消费者，你为什么要喝这个水。因为你想试试这个水到底甜不甜，而且你又不能说不甜，不甜吗？它只是有点甜哦，真是有文化，妙啊！！！至于它是不是大自然的搬运工，人们并不是特别在意。因为很多人对大自然的搬运工没有那么大的想象力。四、如何提高文案能力1. 核心方法-多读多写文案是灵感的表达式，写好它的方法一定是多读多写，没有什么捷径。但它是持续增长的陡坡，读的越多，增量、增速越快。它并不是匀速往前走的，这里推荐几本经典的书给大家。听音乐的同时，记录打动你的的歌词。很多非常厉害的歌词里面，承载着诗词一样的美感。古代的唐诗宋词最早也都是有韵律的。包括像国外的音乐歌词也非常棒，乔布斯很多广告创意就深受鲍勃迪伦的影响，鲍勃迪伦也是第一个拿到诺贝尔文学奖的作曲家。除了听和看，也要多尝试发表留言，来锻炼自己的文案能力。日常也可以收集一些神评论，可以到知乎、网易云音乐或者抖音的评论区多看看。2. 跟客户聊一聊靠近客户或者典型用户，做访谈调研。因为你不可能像客户一样了解他们的消费者，或者用户在使用产品时的真实需求。举个例子：小马宋是行业里的文案大师。下面这个案例是他和安踏的一个合作，我们接下来模拟一下。为什么不试试呢，骚年？这个文案很厉害，和客户深入的沟通，会有一个非常好的洞察，因为你很难像客户一样了解他们的消费者。并且他把使用场景描绘了出来，上场穿耐克，日常穿安踏。但上场时间很短，磨损几乎很小，但日常穿磨损很快，这种情况你就需要很多的安踏。3. 去现场找灵感如果不去现场你会怎么形容劳斯莱斯？其实是很难想象的，可能会根据它的外观、内饰和一堆用料上入手，来形容它的奢华和品质。大卫·奥格威被称为“广告教父”的男人，也是奥美的创始人（提到广告创意或者品牌营销，奥美都是绕不过去的大山）他当时开着新款劳斯莱斯，以速度 60 英里行驶在高速公路上，洞察到整个车的静音效果非常好，于是有了这句广告界的经典文案：这辆新型劳斯莱斯在时速六十英里时，最大噪声来自它的电子钟。画面感一下就来了，因为它提供了足够多的细节，速度，地点，声源等，让人们有了参照物发挥想象。写在最后最后再重申一下，文案是一种有目的的表达。我们所输出的商业内容，一定是包含某种目的的。这种目的建立的对用户和产品的洞察之上，把握用户的需求是一件专业的事，但洞察用户的真实需求非常难。从社会心理学观点看，虚假普遍性心理普遍存在，我们总以为我们想象的就是用户需要的，并且一些隐形动机用户也不会说出来，比如你女朋友要买奢侈品包说因为设计时尚，质量好，她不会说是为了虚荣心炫耀。形成洞察客户需求的能力，需要进行一些刻意的练习，和系统性的思考，保证我们的思考路径不会发生偏差，形成思维直觉反应。可以根据马斯洛需求层次理论、麦古尼的心理学动机等理论模型，培养自己的思考习惯。除了洞察用户需求外，对产品的足够了解也不可或缺。它们是文案内容表达的基石，所有的创意必须围绕这两者展开。并且创意需要有具体描述，提炼精华，简短表达，既在情理之中，又在意料之外，能够迅速抓住用户的注意力，让其形成深刻印象。本篇来源：优设网原文地址：https://www.uisdc.com/basic-copywriting-knowledge
图像 神器 环境 大家好，这里是和你们聊设计的花生~之前向大家介绍过不少 AI 绘画工具，比如 Dall·E 2、Midjourney、Stable diffusion 等，它们都是大型的 Text-Image 模型。随着 AI 技术发展逐渐成熟，文本生成图像技术也开始深入到实际的应用层面。像之前为大家介绍过的在线视频制作工具 Runway，就是借助 AI 生成技术在视频制作中实现一键修图和替换内容的效果，有效提升了视频剪辑效率。Runway 详细介绍：Runway！AI技术+视频制作的新一代视频内容生成工具大家好，这里是和你们聊设计的花生~之前和大家聊过不少 AI 图像生成工具，有的可以根据文本生成图像，有的则是将 AI 技术运用到图像处理中，让扣除背景、消除画面元素成为非常轻松快速的事情，大大提升了设计师的工作效率。阅读文章 > 还有 AI 纹理生成工具 Ponzu，它可以根据文本生成无缝拼接的纹理贴图，并提供纹理（Texture）、法线 （Normal）、环境光遮蔽（Ambient Occlusion）、高光（Specular）和置换（Displacement）的 5 种格式的贴图文件的免费下载，可以让游戏设计师快速改变游戏的整体风格。Ponzu 详细介绍：又一个AI黑科技！无缝连续纹理贴图生成神器Ponzu大家好 ，这里是 设计神器 挖掘前线记者花生为您发回的实时报道 ~现如今人工智能发展迅速，各种 AI 工具层出不穷。阅读文章 > 最近又有一个借助 AI 生成性技术的在线工具 Skybox Lab，它可以根据文本生成 360环境贴图，发布后受到很多艺术家和游戏艺术家的称赞，一起来看看这款工具有哪些神器之处吧~Text to Skybox官网直达：Skybox Lab (blockadelabs.com)（使用魔法速度更快）官方推特：Blockade Labs (@BlockadeLabs) / Twitter （需要魔法）Skybox Lab 首页Skybox Lab 使用界面非常简洁，进入主页后在下方的文本框内输入你的文本描述词，然后选择对应的风格，点击“generate”，等待 20 秒左右，就能生成一张可以 360旋转、并且是无缝衔接的环境图片。按住鼠标左键拖动图片可以查看图像的全景效果，点击下方的“下载”按钮可以将图片下载到本地。Skybox Lab 提供奇幻景观、动漫艺术风格、超现实风格、数字绘画、景色、星云、显示、科幻、梦幻等 10 种图片生成风格，推特上很多网友都分享了自己生成的图像，可以看出无论是写实、梦幻还是超现实风格，图像质量都相当不错。Twitter 网友@WKellingray 在 Skybox Lab 中生成的图像，图片内容来源： https://twitter.com/WKellingrayTwitter 网友@PhotoGarrido 在 Skybox Lab 中生成的图像，图片来源： https://twitter.com/PhotoGarridoTwitter 网友@Pointshark1 在 Skybox Lab 中生成的图像，图片来源： https://twitter.com/Pointshark1Twitter 网友@Paperwrks3d 在 Skybox Lab 中生成的图像，图片来源： https://twitter.com/Paperwrks3dTwitter 网友@@drWhiet 在 Skybox Lab 中生成的图像，图片来源： https://twitter.com/drWhiet静态图片的效果看起来已经非常不错了，如果把图片上传到 Skybox Lab 官网上或者 3D 软件中，就会有更加震撼的视觉感受，仿佛在环视一个奇幻的虚拟世界。而且也确实已经有网友将在 Skybox Lab 上生成的图像应用到 Unity 中制作游戏场景。推特用户 @coin_artist 用 Skybox Lab 生成的 360科幻风宇宙飞船内景推特用户 @untitledxyz_ 用 Skybox Lab 生成的"天空之湖"环境图，场景很梦幻。推特用户 @@ScottieFoxTTV 用 Skybox Lab 结合 Stable Diffusion 生成的 VR 场景，给人的沉浸感很强。网友@drwhiet 将 Skybox Lab 生成的环境图运用到 Unity 中的效果，原视频链接： https://www.youtube.com我也尝试用 Skybox Lab 生成了一个宫崎骏动画电影风格的草原场景和一个宇宙星云的场景，都很好看。如果将环境图片导入到 Blender 中作为世界环境的贴图，就可制作出一个类似于魔法水晶球的效果，很有意思（制作思路和前段时间分享过的在 Blender 中制作染色玻璃的思路是一样的，感兴趣的小伙伴可以试一试）。我用 Skybox Lab 生成的 2 种风格的 360环境贴图Skybox Lab 中的展示效果环境贴图在 blender 中的应用效果Blender新手必学！简单又好看的染色玻璃效果教程（附超多免费纹理）大家好，这里是和你们聊设计的花生~今天为大家推荐知名艺术博主 @Simon_阿文 分享的一个 Blender 设计小技巧，可以帮助我们快速做出绚烂多彩的染色玻璃效果。阅读文章 > 以上就是今天为大家介绍的 AI 神器 Text to Skybox，可以根据文本生成 360无缝环境贴图的，适用于 VR、3D 设计、游戏制作等多个场景，感兴趣的小伙伴可以试一试。了解更多 AI 神器欢迎关注 优设的 #AI 神器# 频道。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会为大家推荐更多设计干货知识 ~Skybox Lab 官网： https://skybox.blockadelabs.com/Ponzu 官网： https://www.ponzu.gg/推荐阅读：用嘴上色！一键让黑白图像转彩色的AI神器「Palette.fm」大家好，这里是和你们聊设计的花生~之前为大家介绍了很多 AI 图像生成工具，如 Midjourney 和 Dream studio，它们可以通过文本描述生成对应的图像内容，且生成的图像质量很高。阅读文章 > 照片没有氛围感？快来试试这款打光修图的神器「Relight」大家好这里是和你们聊设计的花生~在人像摄影中，灯光设置是非常重要重要的一环，好的打光能丰富画面层次，提升整体情绪氛围。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/text-to-skybox
素材 插画 干货 大家好，这是 2023 年 2 月的第 3 波干货！终于，这个月有了好几个颇为不错的图标和图库，除了 2 款热门的人工智能设计工具之外，还有新颖的团队协作线框图工具和多图库搜索引擎，品类和功能比起之前几期会显得更加多样！当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第二波！2023年2月精选实用设计干货合集大家好，这是 2023 年 2 月的第 2 波干货！阅读文章 > 下面我们具体看看这一期的干货：1、超可爱的 Notion 风格免费图标素材https://www.overflow.design/ni.html免费高素质图标素材终于又来了。Notion 的单色手绘风格如今已然是独树一帜的存在，围绕着 Notion 所构建的生态也日益完善，如今有了很多针对 Notion 制作的素材，而这个名为 Notion Icons 的素材包是基于 Figma 的，这也意味着你可以在 Notion 之外使用。这些手绘感十足的插画图标素质相当不错，有需求的同学赶紧收藏吧。2、像乐高一样构建 APP 的团队协作设计工具https://aaply.app/当设计师在度假的时候，整个产品团队都会因此停摆么？对于很多团队而言，是存在这个风险的。而这个名为 aaply 的免费工具就是在这样的情况下诞生的。在设计师打开 Figma 进行设计之前，整个团队的所有人可以在无限画布上讨论着着把整个产品的流程、功能都给梳理出来，其中大量的模块就像乐高一样可爱而易用，大家可以一起拖拽模块编辑产品的线框图，当然你也可以使用内置的模板快速搭建，确定无误之后，再导入 Figma 进行下一步的设计，省去大量的时间精力。3、14万可定制化处理的 3D 插画素材https://iconscout.com/3dsIconScout 如今在各种素材积累上也相当不得了，不声不响地攒下十几万 3D 插画素材，这些素材都是源文件可编辑的，相当一部分是完全免费的，基数这么大你很大概率能够淘换到你想要的免费 3D 素材！4、超5万份免费插画素材下载！https://www.freeillustrations.design/看这个网站的域名，Free 开头，就透着一股浓郁的福利味。对！这个网站上全部都是免费的插画素材，有的是插画元素，有的是完整的插画源文件， 超过5万份素材全部都是免费的。不过值得注意的是，根据开源免费的协议不同，有的插画当你商用的时候是需要标注出处的，不过别担心，注意侧边栏，你可以将无需标注的插画素材直接筛选出来，非常方便！5、基于人工智能的用户画像生成服务https://personagen.app/每次创建用户画像和角色的时候，都会花费大量的时间精力，逐个条目属性来进行刻画。不过有了人工智能之后，这种耗时耗力的体力活儿终于可以交给它们了，这个名为 Personagen 的服务可以根据你的产品规划，提供一整套方法来帮你来生成对应的用户画像，帮你了解你的目标受众，并且帮你的数字产品做出更加合理的功能规划。6、多功能人工智能图片素材设计服务https://www.prompthunt.com/如果你关注过近期 AI生成类的服务，会发现它们越来越细分，这是一件好事，但是另一方面，它也会让我们不得不去找到一些别的工具来做衔接。而这个名为 Prompt Hunt 平台就采用了一种截然相反的思路，它可以生成各种各样不同的素材，尽量将细分的、多变的功能整合到当前平台来生成，免得大家到处跑了。7、多图库同时获取图片素材的搜索引擎https://popsync.io/这同样是一个帮你节省获取图片素材的好工具，它可以同时从多个不同的素材库获取图片素材的服务，它可以同时搜索 Getty Images、Google Images、Unspalsh 等主流图库，它会尽量将关键词中近似的图片整合到一起，帮你更快创建情绪板、和同事进行实时协作。提高3倍效率！能落地的AI绘画&设计系统课来了！如何快速入门AI绘画和AI设计？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/2023-2-design-resources-vol3
健康 产品 品牌 2022 年年初，Designest 凭借独有的「生活方式全场景」研究，并联合阿里巴巴 ADIC 平台的大数据洞察，成功预测了 2022 六大新消费趋势场景，分别有「微度假，深露营」「沉浸观影」「泛冬运主题季」「沉浸式，个性内容消费」「家居冰洗分化」与「书客模糊空间」。在过去的一年中，不少猜想陆续变为了现实。哪些领域私单多？2022六大新消费趋势场景发布“消费者数据将成为企业未来两到三年内最大的差异化资源。阅读文章 > 一、回顾与见证「微度假，深露营」根据《2023 小红书年度生活趋势》，2022 年“野到家门口”相关笔记数量同比上涨 287%，露营风室内软装走红同时，城市绿地车尾露营成为都市的一道新奇景。「沉浸观影」根据奥维云网，2022 年激光投影仪销售额高达 6.7 亿元，同比增长 239%，同时家具市场出现新物种- “家用移动电视支架” ，高质量观影正在以其他全新的方式回归国内家庭。「泛冬运主题季」冬奥会对全民冰雪运动的影响长远。在刚结束的 2023 年春节假期中，滑雪圣地吉林省接待国内游客 1154.67 万人次，同比增长 23.61%，增幅高于全国 0.51 个百分点，雪场周边民宿预订量同比 2019 年增幅高达 16 倍。原本相对小众垂直的雪具装备品牌与专卖店也被带火，线下门店数量显著增加。各品牌与设计师品牌合作，推出联名单品。「沉浸式，个性内容消费」《流浪地球 2》在今年的春节档掀起了一波狂欢，电影中非常亮眼的机械狗笨笨、MOSS 以及数字生命卡，已被官方授权制作模型，众筹金已超 1.2 亿元，已远超《流浪地球 1》周边产品 770 万的收官成绩。让今年本就一度火热的科幻题材相关产品与周边，在年底达到顶峰。这个冬天，“围炉煮茶”的生活方式火了——用小火炉煮一壶茶，其间烘烤着干果零食，谈笑间饮下一杯杯热茶。「家居冰洗分化」根据 36 氪《2022 年轻人冰箱报告》统计，对于现在的年轻人而言，有高达 25%的家庭同时拥有超过一台冰箱。云米、优诺等新兴品牌在 2022 下半年纷纷推出“第二台冰箱”引爆各大购物节。而“只有一台洗衣机”的生活也已无法满足他们，Daily nealy 革新内衣物洗烘机器人随即走红小红书及抖音等社交内容平台。「书客模糊空间」去客厅化的家装趋势在 2023 年更加显著，并逐渐形成了私人健身房、亲子游乐园、书吧办公区与集成化收纳中心等新型客厅形式，催生低矮沙发、升降办公桌、一站式健身设备等新物种亮相。二、2023 新趋势场景发布2023 年悄然拉开了序幕，在全民经历健康威胁、经济下滑的冲击后，消费者心理发生了重定向，生活态度与消费观念改变催生创新机会，消费市场正期待着在新的一年迎来回暖。Designest 联合阿里巴巴商品孵化中心（ADIC）继续为大家预测 2023 年的六大新消费趋势场景，洞察“阳过”后的新商机，帮助企业找到迎难而上的逆生长力。1. 家庭自救站随着我国人口老龄化趋势进一步的加剧，未富先老、未备先老的局面亟待全方位的解决方案。去年年底直至今年年初， “全羊”风暴中暴露出的医疗系统应急能力不足，周期性出现“优先救治”、“一药难求”等问题，促使“朝阳、夕阳都是太阳”的呼声日益增高。现代青壮年人群健康的脆弱性问题也得到充分暴露，透过流量平台不断发酵，群众健康教育得以迅速普及。如何让生命安全与生活品质在“阳后时代”得到保障，成为社会新人至临老一族所热烈探讨的话题。从数据上看，适老消费品供给存在较大的需求缺口，据统计，目前全球老年用品有 6 万多种，日本有 4 万多种，而我国仅有 2000 多种，产品也较为单一。目前，50 后、60 后群体正步入老年，他们的教育程度与物质生活水平较高，对于未来老年生活品质的期许和现在老年人有显著差异。身体的安康是舒适生活的基石，适老化健康产业将迎来显著的增长。用户画像不同家庭所面对的健康问题存在一定的共性，但差异性也同样显著。家庭健康电子品牌的打造，需要依据不同的消费者健康诉求与消费主张，匹配相应的产品解决方案。韧性抗争族他们通常是疾病易发人群（在疾病年轻化趋势下，部分青壮年也囊括其中），常年与药物作伴，日常需要花费大量时间、精力与金钱让健康状况维持在可控的状态。虽然少了“肆意任性”的快乐，但至少透过科学预防和治疗，仍可以“活在当下”，逐渐有了做好长期斗争的 “思想觉悟”。#诊疗无时刻#希望通过日复一日的积极坚持，让健康状况得到改善，生活质量得到提升，恢复年轻时的活力。“一直都在反思生活习惯，做了很多研究，看到这个文章之前已经想到多年来一直很少吃主食，为了吃饱肯定会多摄入油盐和果糖，而这个从另一方面证明了低碳水的危害”—— Little欧妮乐态养生派表面上，他们是退休老人中最“潇洒”的，而事实上他们才是最“自律”的一派。在对健康生活方式的坚持下，他们身体状态尚佳，追求独立于子女且不受约束的晚年生活。他们或游历祖国山川湖海，或追寻着事业的“第二曲线”。#心态养生第一线#自力更生，坚韧生活。首当其冲的是要延缓身体的衰老，希望以科学的方法“保住青春”，降低健康意外发生的概率。“无论什么年纪，都要寻找心中的桃花岛。”—— 桃花岛小草家庭健康总督他们上有老下有小，身上挑着上下兼顾的重担，为父母亲、小孩等弱势群体的健康状况而忧心忡忡之余，作为家庭的“顶梁柱”更深知自己坚挺的重要性，时刻关注并确保自己各项身体指标良好。#科学监控，防范未然#但愿父母能重视自己的健康问题，配合定时体检，听教听劝，严格遵从医嘱。而自己则能保持良好的健康状态，继续当好家族里的“顶梁柱”。“医院承载着我太多的悲伤，看到那套熟悉又陌生的监护仪，眼里当时就撺掇着泪花。以后可得再盯着奶奶一些了” —— Dec创新机会消费级健康监测仪的智能化发展可考虑接入智能家居生态链，为用户提供除数据显示外，语音提示、数据追踪记录、结果上传、线上问诊与紧急情况联系家人等服务。智能可穿戴类配件（如智能手环、智能指环、智能手表等）也是实现日常健康检测的有效手段，透过完善适小适老的特殊佩戴及交互体验，方便对家庭中低龄婴童、老年人等无法有效表达身体不适的人群，利用心率监测与血氧测量等关键功能进行健康预警。另外，针对退休人群的外出需求，有必要提供具备便携化、功能集成与免充电等属性的应急救助解决方案。2. 枕边疗愈所2023 年始，不少 “阳康” 打工人们拖着虚弱的身体，带着重振旗鼓的决心重新投入到工作当中，可却不料有些力不从心。只有健康、强壮的体魄才有 “卷” 的资本。然而，996 族又有多少时间用于经营健康呢？或许也只有与床相伴的一早一晚了。在疫情和职场的反复折磨下，人们逐渐形成依赖 “外物”保持身心愉悦的生活习惯，即便现在 “阳康” 了，也依旧积极寻求对抗亚健康问题 “黑科技” 方案。早些年，“床头经济”还限于化妆品与护肤品品类。可近年来，随着“解压经济”、“颜值经济”与“保健经济”的兴起，熟悉的床头场景变得拥挤，增添了按摩仪、褪黑素、睡眠耳机与美容仪等“黑科技”新成员。与此同时，抖音、小红书等内容平台相关营销内容的推送也正值高峰。云巢预测，在“应阳尽阳”的余波下，2023 将会更多纷繁多样的产品逐渐崭露头角，成为更多普通家庭的生活必备品。用户画像目前，从内容平台上来看，失眠、痛症与肌肤状态变差是打工人们关注最多的睡前问题。面对工作重压，“拒绝躺平”的他们贪心地希望健康、事业与及时行乐能一把抓，于是有了一个形象的统称 - “朋克养生族” 。但俗话说，存在即合理，与其吐槽他们看似不合理的追求，不如花更多心思关注他们的生活方式，充分细分消费人群和健康需求，孵化一揽子细分解决方案。嗜睡困难户常常因为超负荷的工作而压缩睡眠时间，积劳成疾后成了入睡困难户，整觉对于他们成为一种可遇不可求的“奢侈品”。#渴望好好睡上一觉#愿有朝一日能重新拥有高质量的睡眠，能以更饱满的精神状态应对白天的工作。“大家都是愁觉不够睡，我却是越夜越清醒，越夜越恐惧，此刻真想穿越回上学时期的课间十分钟” —— 全智贤分闲筋骨疼痛党他们是办公室久坐打工人，长时间高强度的坐卧伏案为肩颈、腰椎、下肢积累了过多的压力。经常去理疗中心进行专业的按摩、艾灸、拔罐虽然短期有效，但显然不切实际。自己的家始终是最好、最可持续的恢复中心。#进床修复#睡觉之前，简单便捷、一技见效的疼痛缓解解决方案。“如果你脖子的肌肉总是硬硬的那就打开它，能促进血液循环，僵硬感会减弱很多。” —— 伊森妈妈很开森睡美人都说睡眠是最好的美容剂，但生存于颜值裹挟的时代，又迫于生存的压力，混乱的作息令他们对自己的容颜越发焦虑，常常幻想如何才能实现“睡美人”的最终理想。#睡回 10 年前#和过敏、痘痘、暗黄色斑和皮肤皱纹说再见，每天都以最光彩的形象出现在众人面前。“我是干敏皮，以往每到换季皮肤就会格外敏感，尤其加上外务作息不规律，皮肤状态更是不稳定，隔日老 10 岁不是开玩笑” —— 肥恩创新机会针对当今打工一族最为头疼的失眠问题，手机、耳机以及手环手表等随身智能配件考虑增加睡眠陪伴功能或产品属性。为应对伏案作业久坐族的痛症困扰，适配床头场景的按摩、理疗类产品，适宜具备轻量化、易收纳形态特征，与多用途、跨场景产品功能属性，以契合用户不同的居室环境、生活习惯、疼痛部位与治疗需求。日前，玲琅满目的美容仪多数同质化严重，针对一众如床头美容、睡前美容、办公室美容等新兴场景的反应较慢。云巢认为，2023 年的美容产品创新设计可更多考虑以专注床头场景作为突破口，整合助眠与美容两大焦点诉求，满足用户在就寝前使用过程中酝酿睡意的需求，以及减少耗材的使用，避免与用户多元化的固有护肤习惯起冲突同时，释放收纳空间。3. 长途智驾游自 2019 年，我们便一直在讨论“内卷”、“精神内耗”、“躺平”……热烈的讨论声从未减弱。2022年一部网络短片-《二舅治好了我的精神内耗》把声量提至高峰。年轻人悟出了，“顺风浪、逆风躺”的生存态度并不能消除内耗，而时刻紧握向上的韧性才可以。2023 年有许多的不确定性，但可以确定的是，放开之后我们又可以畅快旅游了！不少年轻人果敢转向，重启搁置的旅行计划，立 flag 要填补缺席的路上时光，祭出时间与金钱，在祖国的大好河山中，体验在路上的甜酸苦辣，捕获流失的灵感。智能车科技将在 2023 迎来多维的升级，其中包括 3C 和 4C 高倍率电池的亮相，其将大大缩短充电所需的时间。2023 年将会有更多人选择驾驶智能车上路，有了这座移动智能堡垒的助力，游侠们能够开展更深入、更有趣且更绿色的冒险，智驾周边产品生态的发展空间广阔。用户画像根据同程旅行发布《2022 年自驾旅行报告》，在固有的自驾游群体中，20 岁至 40 岁人群是自驾游的主力。其中，20 至 30 岁的用户占全年龄段自驾游客的 31%，30 岁至 40 岁之间的用户占全年龄段自驾游客的 42%。而 40 岁以上及 20 岁以下总和仅为 27%。30 岁以上用户自驾游多以家庭为单位，一家老小出行的占比达 57%，21%为夫妻或情侣出行。而在 2023 年，有这样一群自驾游新生用户绝对不容忽视 - 他们是 90 后甚至是 00 后社会新人，他们大多是摄影师、插画师与健身教练这一类“灵活就业”、“来钱快”的群体。由于没有在传统职场中“打怪升级”的压力，他们的自驾游行程比传统型自驾行程更深度。出走阖欢家自驾游主力军团，以 80、90 后中青年为核心的家庭单位。有了老人与小孩的参与，旅途中少了随遇而安的松弛感，多了一份照顾家庭成员的责任感，更多关注如何减少旅途给家人带来的不便、危险和压力，让每一个人都能够尽兴地享受旅途的乐趣。#关注跨代众乐#一家人都能有难忘且舒适的旅行体验，在旅程中学会适应不断变化的环境，发现不同的美，拥有更从容与阔达的人生态度。“在我看来人生是一场长跑，孩子的成败不能全靠考试成绩来决定，缺席一学期的幼儿园在我看来并不可怕” —— 黄太joan猎趣山人95 后新新人类，之前便是露营生活方式的狂热一族，路亚、桨板与飞盘都是他们熟悉的户外放风项目。随着疫情风控的松绑，他们已蓄势待发。#寻觅深处乐趣#找寻更远距离的探险目的地、更深度的亲近自然方式与更原始野趣的户外生存体验。“户外玩了十几年，年纪小的时候喜欢去冒险、自虐，走的线越多，经验越丰富，反而不再去和自己较真了。”—— Nina是小阿姨游牧居车党他们中有孤身出行人士，也有年轻的夫妻或情侣。受到游牧生活方式的启发，他们带着随遇而安的流浪心态出行。自己动手将爱车的内部改装成“温馨小家”，享受着无拘无束的安逸。#移动第二家#说走就走，无需周密安排的启程；路途上随时随地的安逸小憩；隔绝喧嚣的与自己或爱人共处的惬意空间。“露营的尽头是床车。玩累了，床车加个车边天幕收搭方便还快。” —— 小红书鱼大玥创新机会基于电动化架构的新能源车，在空间利用上有更多的可能性，为喜欢自行布置车厢内环境的出行者提供了良好的创作平台。不同品牌车型的内部空间存在显著差异，跨品牌通用的标准配件设计起来有一定难度。为满足自驾游人群日益多元化的车生活需求，针对市场高热度、高话题性、拥有独特圈层文化的品牌和车型，推出专车专款的定制化车载生活电器、娱乐设备与舒适生活用品，并为用户提供方便快捷的无损安装解决方案是一种更理想的思路。去年，我们提到的「微度假，深露营」趋势场景中，所主绘的是一种精致化，强调仪式感的露营方式。而在今年的长途智驾游场景中，针对户外度假的产品需求有了进一步升级，除了追求个人审美彰显，更多了一份对抗路途辛劳与环境不确定性的专业属性。在市场教育逐渐趋于完成时，消费者也基本完成从尝试到入局的洗牌。露营户外用品品牌，更适合将产品布局侧重，从提供高性价比尝鲜体验的引流产品，慢慢转向拥有更高利润空间、更有增量趋势，能带动品牌拉升的高端专业产品，为长途游客提供高防多防、细分场景、专业机能的露营生活周边用品。4. 融合式国风沉浸馆在过去的寒冬中，您的朋友圈里是否出现过这样的画面？在和煦暖阳的怀抱下，一张原木色露营桌，一方陶土炭炉，一壶芬芳浓茶，三五好友围炉煮茶，烤橘子、板栗、红薯……在过去的几年里，“新式茶饮”实现了茶饮文化的年轻化。而 “围炉煮茶”带动了茶文化年轻化进一步的跃升。“新茶饮”是茶文化与快餐咖啡文化的拼接结果，而“围炉煮茶”则是将传统文化融入到了年轻人中流行的露营社交生活方式当中。2022年另外一个国风经济的例子是舞蹈剧《唐宫夜宴》，其融入了美轮美奂的声光电技术与AR科技，将盛唐时期的衣香鬓影呈现在观众面前。不难发现，2022 年的各种国潮复兴动作与尝试，向我们进一步诠释了传统文化与现代生活、经济特色深度交融的正确方式。来到 2023 年，得益于商业与艺术先驱们多年来的探索与试错，国风经济将迈入更高质量的黄金时期，形成多元且市场接纳度较高的创作思路，让体验者们对国风题材有着更高的期待。而如何进一步扩大受众面积，如何出圈并实现可持续，将会是接下来国潮国货品牌需要重点打磨的事情。用户画像正如上文所述，国风经济正由小众自娱走向大众舞台，辐射下沉市场，也意味着多样化人群和需求将无法再透过单一产品满足。因此，充分细分受众群体，并构建多样化、体系化的产品矩阵，为不同圈层文化深度的消费者提供差异化产品，是这类品牌出圈的关键。国韵穿行者想要识别这群人非常简单，只要看他们的朋友圈便可。他们时常会穿着汉服拍照，会偶尔转载古风小说，若来了灵感也会将所见所感编写成文言文小秀一把。#古代人的现代活法#陶醉于或飘逸或华丽的古风美学，以及古代文学在朝代背景与人事物滤镜下的朦胧氛围感。“偶尔出去逛逛博物馆，就能看到玻璃内外有什么一样的牵连，这也是历史美学传承的一种魅力吧” —— 小红书涵淡文史探秘党他们对中国传统文化、历史事件与历史人物感兴趣，外出旅游时，不会轻易错过当地的博物馆，追求深度的文化旅游体验。#深爱文化考古#博古通今，通过沉浸式的体验扩充知识储备，并期待文创品品牌、创意文旅品牌能更产出更有“信息量”的学问传播载体。“不推荐只是打卡，而是沉浸式学习” —— 大众点评得闲饮茶华流新生代他们活跃在挖掘新奇趣怪消费体验的前线，传统国艺不是他们热爱的唯一，新生代新华文化也是他们绝不会错过的流行元素。#文化就在当下，新生代也有华文化#期待华文化与华艺术，以更有活力、更有趣的方式呈现。“国风盲盒天花板 Nanci 囡兮颜值太高了，带去故宫拍摄，也正好迎来北京第一个零下 10 度” —— 一只瑶瑶兔创新机会在过去，品牌更多单纯利用国风美学造势，通过显著的风格化视觉设计元素先声夺人。但今天，融合式国风观感的惊喜点在于，它与现代生活方式、经济消费特征的接入是那么的无缝。在各式潮玩百花齐放的今日，盲盒、模型与个性化配饰等新消费品的故事内涵有同质化趋势，IP 日趋缺乏特色，潮玩品牌可以考虑和历史文旅品牌联名，推出以历史事件、历史人物、传统地域文化为故事架构的系列产品，以新产品+经典 IP 的方式打造反差感。国风化穿搭近两年也已从小众出圈，从国货潮牌到海外大牌，都在迎合中国市场拥抱国风潮流，将更多中国元素应用在现代服饰上。穿行于大街小巷都能隐约发现国风化设计的服饰配饰已经悄然地融入老百姓的穿搭。而作为日常穿搭必不可少的一部分，智能穿戴类产品，也可考虑以中国文化+现代设计的组合方式，令产品契合更具普遍性的使用场景。随着家居软硬装行业的发展，消费者在家装风格的选择日渐多样，家装趋势变化之快是家居品牌所难以捕捉的，法式、意式、新中式、美式、新北欧，谁也不敢断定哪个“式”才是主流，谁才是下一个季度趋势。“新中式”家居可尝试降低搭配门槛，推出受众更广、更年轻、圈层接受度更高、文化壁垒更低的弱文化中式产品，令其适配更多元化的家装风格。5. 轻烹饪雅致厨房两年多的疫情中，足不出户的生活方式催生了不少烹饪界新秀，他们中有烘焙能手、有刀工大师、甚至还有面食大神，空气炸锅、破壁机、养生壶等厨电新物种曾有广阔的舞台，年轻一族的厨房里也一度充满了烟火气息 。然而，随着 2023 年疫情风控的松解，年轻人对生活有了新的期待，恢复了疫情前多元的线下活动，呆在厨房里的时间自然会变少。门外的世界恢复热闹了，门内的世界自然变得精简。疫情中猛增的“生活仪式感消费”慢慢趋于缓和，现在人们更流行说“减法生活”。一方面要维护家中的生活气息，另一方面要确保生活物品在精不在多。在这种消费观念的驱使下，厨房用品品牌需要重新调整产品开发思路，随着体验经济的降温，过往备受青睐的细分功能产品需要被逐步淘汰整合，回归实用耐用的高端化、集成化、健康化小家电才是未来精益小厨房的新欢。用户画像近年来，随着国家鼓励推动形成“一县一业”的发展格局。经济发展和城镇化进程不断推进，下沉城市的基础设施、商业配套日益完善，下沉城市的年轻人群的规模不断增长，小镇白领逐渐成为消费升级新势力。除此之外，在疫情的多维影响下，越来越多年轻人选择在县城发展。与一线城市的打工人相比，他们的生活更有秩序，也更追求生活的烟火气息。可支配收入充沛的他们，享受着小城的惬意生活。因此，他们是大小厨电行业需要着重关注的消费者群体。精干大当家已婚已育，生活的重心在于照料家人，在消费时会考虑所有家庭成员的需求。#一切交给智能助手#追求智能家电能尽可能地解放双手，满足多元化的烹饪需求，为生活带来便捷，省时省心。“这个直接把食材放进去就行了，它会自己蒸煮，煮好又自己搅拌，真的太省事了吧。” —— 小红书timi妹妹懒系养生族他们是年轻的上班族，日常工作强度较高，明明知道无时无刻都可以养生，但总碍于动动小手。#能帮我养生吗#懒系养生，强调从繁杂的烹饪过程中解脱，同时满足精致生活的需求，保证生活品质。“不知道大家有没有结束 WFH，回到公司，想念每天家人煮好的各种水” —— 小红书猪头猩猩效率掌勺人更倾向购买与效率相关的产品，追求生活的效率性，不希望被繁杂的使用流程所烦扰。#怎么快怎么来#简单快捷方便的烹饪流程方式。“其实就是很简单的酱油拌饭，高中的时候去姑姑家玩大半夜肚子饿了我姑就是这样做的，姑姑说这个好吃但容易胖，很多时候不想做法就这么应付一顿，好吃又方便。” —— 小红书咕噜噜创新机会2020 年家电线上价格战到达白热化程度，低价虽赢来了销量，却牺牲了产品质量。2022 年行业均价提升，高端价位的品质产品受到消费者的好评。2023 年，消费者选购家电产品时，将更关注产品材质、质量、安全性等，数字化与智能化或成为差异竞争的突破口。多功能集成化家电的普及逐步升高，消费者对于集成化大小厨电的了解度进一步促进了接受度。降低空间占用率、提升产品使用率的集成化产品成消费必然趋势。疫情期间宅经济和健康理念的普及为主打健康小家电带来了爆发增长的契机。“健康”迎合了后疫情时代消费者对于生活方式的需求。健康饮食厨电（包括养生壶、破壁机、空气炸锅、电蒸锅等）市场规模大并保持持续增长。6. 有氧绿色 CBD自全民健身上升至国家战略，每年都可见政府为此做的新举措，而在 2022 年，生活在一线城市的我们最有切身体会的便是绿色有氧 CBD 的建设 - 绿植、城市画廊和运动康体设施是其关键组件。若您漫游于与北上广的心脏区域，并稍加留心，便会发现，在公园、河堤、商业街甚至是地铁站，都遍布着为运动者而设的运动场地与设施。并且，这些基建们并不老套甚至可以说“很潮”，例如在广州琶洲的河滨走廊上，沿途可见为滑板爱好者们加建的波浪赛道。得益于这些崭新的设施，活在快节奏里的都市精英们有了更方便的运动场地。火遍朋友圈的飞盘、腰旗橄榄球等，集合社交与潮流 IP 属性的运动俱乐部应运而生。在运动氛围拉满的今日，运动方式俨然成为个性名片的必填栏目。为生活而奔波的都市青年们大多会选择一项能耗低、负荷小且容易入门的“轻运动”参与其中。慢跑、瑜伽、普拉提、跳舞、骑行、滑板、飞盘等运动形式，都是他们的可选项。用户画像轻运动受众广、增量人群以女性为主，活动场景多元化。相比传统健身项目，轻运动更适合女性，消费主力包括都市白领、年轻妈妈、Z 世代青年等。躁动社牛他们生性好动，热爱交友，虽是飞盘俱乐部、摇旗橄榄球、路冲的爱好者，但运动中与各路伙伴结下的友谊，或许才是支撑他们参与运动的最大动力。#从衣着到设备，都能成为我交友的装备#在运动中社交，与一群志同道合的人相聚于运动场，从工作到理想，从运动到生活，从衣着到装备，谈天说地、共赴热爱。“游戏规则简单，开心就好了，超适合压力大无处发泄的都市打工人” —— 小红书蜜桃小姐姐智联打卡人他们是精致的自律星人，经常通过线上或线下渠道了解正确的运动知识，关注身体健康状况，对运动康体知识充满渴望，喜欢记录与分享。以已婚人群为主，出于保持良好的身体素质、恢复健康体态为主。倾向选择慢跑、骑行、游泳、瑜伽、普拉提等有氧轻运动。#科技陪伴，辅助监管#受过一定专业指导，可自行配合智能设备仪器，自我追踪和判别身体健康状况，有效地避免运动损伤。“生活方式对生命能量层以及生命能量有着深刻的影响。身体的活动，如体育锻炼、工作、睡眠、摄入食物等行为，都会影响生命能量在体内的分布和流动。”—— 小红曾zeng的瑜伽生活轮上夜游族他们是 CBD 夜景中的一道景致。在都市晨光中，自行车与滑板是他们的通勤交通工具。而当晚霞拉开时，他们的交通工具转为他们锻炼与娱乐的器材。休憩之时，他们会铺开小板凳，吹着徐徐微风，泡上一杯好茶，静静享受夜晚都市难得的宁静。#享受城市间穿行的自由#在城市的夜景中，沿着河堤走廊畅快滑行，一边观赏都市光影，一边感受微风拂面。“最喜欢这个季节了，轮滑、陆冲、微风徐徐……感觉棒棒哒” —— 小红书Dorris芳芳+U_U创新机会在健身器材走向智能化的大趋势下，为满足消费者对专业化、个性化、定制化运动建议指导的诉求，智联类运动产品需要深耕、丰富其软硬结合服务生态，结合消费者的运动数据，为消费者提供个性化的系列运动健康系列课程定制服务。以飞盘为代表的各类社交型俱乐部品牌百花齐放，品牌为打响差异化，需要在主运动器材的外观设计上实现升级，以视觉冲击力唤起消费者的新鲜感，并考虑通过与知名品牌联名跨界合作的形式增加话题性，丰富主题形式。对于推崇绿色通勤的都市白领而言，轮滑、滑板与自行车等轮上运动器材都是日常交通工具的可选项。而目前针对城市道路通勤场景的对应产品并不常见。考虑都市出行的接驳公共交通、防盗安保与常见障碍物通过等诉求，轮上运动器材的功能设计可做相应升级。而外观设计上，也可尝试抛开重运动属性的气息，适当迎合都市时尚上班族的穿衣风格，让日常也能更通用。以“数据+场景”洞察推动产品创新如何在快速变化的趋势洪流中把握创新方向；如何从庞大且零碎的数据中梳理核心关键的突围机会、定义问题；如何在短时间内联合、推动多团队协作共创，确保项目目标达成，都是 Designest 时刻需要面临的挑战。2023 年，Designest 团队将携手 ADIC 阿里巴巴商品设计孵化中心，进一步强化“数据洞察+场景研究”双驱动的创新能力，帮助客户精准把握市场机会，满足用户需求。Designest 将持续推动产品创新，在 3C 家电、个护健康、时尚快消等领域寻求合作机遇，与不同领域的合作伙伴携手共进、实现共赢，为创造更多元化的生活方式而努力。欢迎关注作者微信公众号：「云巢创新咨询」本篇来源：优设网原文地址：https://www.uisdc.com/2023-6-consumer-trends
用户 游戏 社交 一、流量见顶，互联网寒冬到来2021 年至今阿里、京东、腾讯等互联网大厂裁员消息层出不穷，原本形容招聘旺季的“金三银四”也被调侃为“铜三铁四”。随着教培行业全军覆没和中概股的集体腰斩，互联网的增长已经见顶，人口红利已被各大巨头瓜分。互联网寒冬到来，并且将持续很长一段时间。在存量市场下如何维护产品活力成为各平台的首要目标。更多运营增长干货：用百度果园的实战案例，帮你掌握运营活动的增长设计方法本文以百度果园为例，从长线运营活动的增长设计视角，分 3 个方面分享运营活动的玩法如何设计，如何帮助百度 APP 持续提升用户活跃和用户留存。阅读文章 > 当下高活跃度的产品是如何占据用户使用时长的？本文会从社交、泛娱乐、游戏化三个维度来聊一聊，它们是如何让人们悄无声息“上瘾”，从而来提升产品的新增长和高活跃。二、社交是产品的必经之路社交本身是去中心化的，具有两个显著特征-裂变和私域流量。裂变来源与社交背后的人脉关系，基于好友之间的信任能够达到快速传播实现获客。私域流量对于产品来说，意味着跳出平台限制，用户具有非常高的粘性和忠诚度，可以达到重复转化。社交裂变的原理是通过用户邀请机制来实现 1+1>2 的效果，心理学上的六度分隔理论“你和任何一个陌生人间隔不会超六个，最多通过六个人就能够认识任何一个陌生人”通过互联网作为载体更加扩大了裂变圈层，所以社交裂变的总量非常大，但信息的价值才是影响用户是否决定继续传递它的重要因素。传统的营销传递方式大部分都非常的直接粗暴，比如邮件、短信、电话等强推给用户，这是非常伤害用户的一种方法，并且用户的转化和自主转播意愿都非常的低。1. 如何形成用户的自传播① 用户分享的动机② 外在利益驱动“不劳而获”是人们的本能反应。具体奖励可以需要根据自身产品定位来设置，比如电商类产品送满减红包、优惠券，游戏类产品可以通过成功邀请好友获取相应的游戏道具。但利益诱导产生的增量用户忠诚度相对较低，比如拼多多的砍一刀，拿到奖励后可能就再也不会使用了，所以需要产品有后续用户留存的配套内容。③ 内在驱动引起用户的共鸣代替用户表达：比如 2020 年 B 站发布的全网爆红的短视频「后浪」，一夜之间让 B 站市值暴涨 34 亿。前一年同样爆款的「啥是佩奇」，是出自同一家广告公司，鼓掌真的厉害。引导用户讨论提供谈资，创造“槽”点：这是相当考验策划功底的营销方案，需要找到引起用户吐槽，但又不至于引发用户厌恶的平衡点。产品也可以主动迎合槽点讨好用户，比如钉钉的 IP 雨燕钉三多，被小学生疯狂打一星后发布在线求饶的自黑视频，疯狂圈粉一百多万。能够帮助用户和塑造自身形象：能够切身帮助到用户的内容，比如小红书的各种种草和旅游攻略、抖音的刘畊宏健身操等。社交攀比：利用人们的攀比心理，比如王者荣耀的段位排行榜，会刺激用户不断进行游戏提升自己。微信小游戏跳一跳等。用户在具有充分的分享动机下，只要不影响用户的自身形象，分享的阻力和成本可以忽略不计。2. 社交载体的选择社交载体的选择决定了用户增量的上限。随着移动互联网的普及，流量入口变得随处可见。社交工具作为人们生活必不可少的一环，具有非常强的普适性。微信作为即时通讯社交领域的巨头，日活达到了 9 亿。抖音作为短视频社交领域的巨头日活也超过了 7 亿。拼多多的崛起，验证了社交电商（社交媒体和电商融合衍生的一种电商模式，基于人与人之间的信任关系链产生的新型交易方式）的可行性。拼多多巧妙借助微信的巨大流量和社交红利，突破传统电商的流量池，通过社交裂变实现整体性的扩散获取新的流量，发展到市值 500 亿的规模，成功占据了三四线城市的消费者。抖音依靠短视频裂变在社交电商和本地生活成功占据了一席之地。相比拼多多，抖音拥有庞大且优质的用户群，以 20 岁左右的年轻人为主，多分布与一二线城市，具有非常强的购买力。配合短视频和抖音的算法能够高效的传达产品内容。各大电商品牌也纷纷入住开启了直播带货，罗永浩在短短两年时间就还清了 6 亿的欠款，就目前的发展趋势抖音电商超过淘宝只是时间问题。抖音算法的特点是去中心化，它让每一个创作者或者商家都有全网爆红的机会。全网持续传播的重要因素在于内容的价值！抖音本地生活业务依靠抖音算法精准定位的广告投放和短视频的裂变传播，撼动了美团在本地生活业务的霸主地位（阿里折腾了好几年都没溅起多大的水花），迫使美团和快手合作，联手阻击抖音。在互联网中社交不仅作为通信工具，也是庞大的流量入口。阿里之所以对社交不死心，也是因为惧怕微信强大的流量入口。但用户在微信中的人际关系、支付习惯，即使有同样的软件呈现，庞大的迁移成本会让用户难以抽身。三、泛娱乐泛娱乐是以 IP 为核心打造明星 IP，讲好故事或者任何用户喜爱的事物。通过内容创作者和粉丝之间的互动，不断提高粉丝粘性和信任感，成为意见领袖，逐渐让粉丝对创作者产生权威效应。1. 游戏IP打造依靠游戏 IP 打造的游戏赛事、动漫、文创周边、院线电影等，在丰富 IP 内核的同时，也为产品的长线运营和变现方式的多元化创造条件。LOL 作为经典的 MOBA 游戏，为什么玩家会感觉到英雄是活的，而不只是一个名字一个游戏人物。因为每个英雄在设计时，伴随它的有一整套的故事设定，正是因为背后的故事让每个英雄在游戏中的技能和台词都变得有意义。2021 年依托《英雄联盟》IP 打造的动画《双城之战》在全球范围内收获好评成功破圈，中文主题曲《孤勇者》路边四五岁的小姑娘都会唱。2. 品牌IP打造从最早的品牌设计发展到如今的品牌 IP 化，品牌逐渐变得有灵魂、有温度更容易互动，也让用户从单纯的购买行为转变为对品牌的热爱。品牌 IP 在人格化的同时，需要有自己的人设、性格、情感和价值观，独特的符号和视觉识别系统。IP 定位要结合品牌特点，使其能够承载企业自身文化和传递的企业的价值观。比如看《海尔兄弟》长大的孩子，在成长过程中培养起来对海尔品牌的认知，认为它就是一家科技公司。独特的视觉符号：阿里巴巴根据产品线设定了 20 多个不同的专属 IP 形象，腾讯的 QQfamily 企鹅家族，line friends 靠表情包曾年入 18 亿...IP 形象为品牌注入了新的血液，极大限度凸显品牌的差异化，给受众留下深刻的印象。品牌 IP 不单单是画一个可爱的小动物，需要讲好品牌故事与用户互动产生共鸣。颜值和内涵双双在线才能使品牌走的更远，营销的价值也逐渐从功能的差异化升级为情感与价值观的呼应。3. 个人IP打造个人 IP 的价值就不多做陈述了，李佳琦 2021 年预售当日成交额就达到了 180 亿元...除了商业上，在政治领域超级网红特朗普通过自媒体在 2016 年赢得了总统大选。做好个人 IP 的几点建议：内容是基础，坚持是必要元素，聚焦细分领域。四、产品游戏化游戏化是将游戏元素及游戏设计技术用于非游戏领域。当下能够让用户忘乎所以、无视时间流逝的可能只有游戏了。游戏化的概念在互联网产品中也被应用的越来越多。产品在设计上如何与游戏相结合，让用户“上瘾”形成自发习惯的高频使用产品，成为维持产品生命力的关键。在产品设计中大多以抽奖和经典 flash 游戏为参照，与自身业务相结合进行再创新。游戏成瘾机制的核心因素是"多变的奖励"。如果将微信理解为一款游戏，用户每一次打开手机看到朋友发来的信息、朋友圈永远不会重复的动态、公众号推送的各种新闻，这些都是用户触发手机之后收到的"变动奖励"，这种变动奖励既让用户感到焦虑，又让用户期待。1. “上瘾”背后的逻辑上瘾是指对某些事物呈现病态的依赖，针对产品的“上瘾”更应该理解为一种使用习惯。在产品增长的路径中，用户增长的过程分为三个纬度：拉新-留存-分享裂变。用户使用习惯的产生主要在留存这一环节生成。让用户养成使用习惯的四个要素为：触发行动多变的酬赏投入，也就是HOOK模型（“上瘾”模型）。HOOK 模型大家都很熟悉了，下面再简单介绍 一下：触发：促使你做出某种举动的诱因，分为外部触发和内部触发。行动：满足用户的心理预期来驱动用户的行为。（福格行为模型：行为发生需要满足的三要素 B=MAT。B 代表行为，M 代表动机，A 代表能力，T 代表触发。）多变的酬赏以多变的奖励来持续刺激用户对产品保持兴趣，酬赏分为三种：社交酬赏：用户在使用产品过程中通过与他人互动产生的人际奖励；猎物酬赏：用户从产品中获得的具体资源或信息；自我酬赏：用户从产品中体验到的成就感，终结感和操控感等自我情绪奖励。投入：用户的点滴投入都能增加用户对产品的好感，提升用户忠诚度，在投入阶段设置适当的触发能够诱使用户重新进入上瘾模型。2. 互动游戏与产品如何结合？互动游戏是无需下载软件即可体验的一种游戏方式，在网页或者小程序点开即玩且不占用内存。它的发展时间并不长，早期的互动游戏绝大部分是依托于 flash 的富媒体技术。在 2008 年初，网页游戏市场开始日趋火爆，像 Facebook、MySpace 国内的校内网、QQ 空间等一大批 sns 社交网站的崛起，互动小游戏几乎成了这些网站留住用户的不二法则。抢车位、开心农场、QQ 餐厅等也是一大批 80、90 后的青春记忆。随着技术的发展 flash 的弊端也渐渐显露出来，浏览器的运行效率不高、访问电脑资源不方便、个人信息泄露等，加上 flash 技术由 Adobe 公司一家独大，导致各大公司都相继不再支持 flash 应用，而转投到了 H5。最终 Adobe 公司决定在 2020 年终止 flash 技术的提供，这项划时代的技术落下帷幕。互动游戏的应用种类按照活动周期大致可以分为两类：营销互动游戏（常规互动抽奖游戏和 S 级大促互动游戏）、产品互动游戏营销互动游戏-常规抽奖游戏：玩法简单、耗时短。相比直接领取优惠券，加入互动游戏后以奖励形式发放，券的使用率更高（这是利用了迷恋小概率事件效应。在概率论中，经济学家把在大量重复试验中出现的频率非常低，甚至接近于 0 的事件，称之为小概率事件。对于小概率事件，用户往往都抱着侥幸心理，而且会放大这份心理。“万一中奖了呢”所以用户对得来的奖品格外的珍惜）营销互动游戏- S 级大促互动游戏：2009 年双十一后，节日大促层出不穷。各大平台在促销期间通过推出各种主题玩法的小游戏来为活动造势，以此链接平台与用户。植入游戏玩法对于像双 11 这类的 s 级大促，已经成为标注化配置。通过游戏弱化掉价格歧视，同时用户参与游戏付出的沉没成本，也能够促使他们在大促当天使用来之不易的红包优惠券，实现收益最大化。游戏主题通常与平台理念/IP 形象/大促主题紧密相关，巨额红包池多品牌联动，玩法简单但规则复杂，注重 aarrr 全方位的设计。以阿里双 11 的活动为例：产品类型互动游戏场景常见有：果园养成和宠物养成以 HOOK 模型来拆解一下多多果园：① 触发条件：内部因素：“水果免费拿，包邮送到家”很好的利用了人们本性中的“贪婪”心理。外部因素：除了在首页设置用户入口外，微信消息分享也是流量引入比较大的入口，分享卡片的设计突出免费拿水果的 button，加上分享邀请好友浇水的机制，极大的刺激了用户参与活动和病毒式传播。② 行动：M 动机：用户通过培养果树到成熟后兑换水果，让用户产生“种瓜得瓜”的心理，满足用户的成就感和既得利益。好友之间水滴偷取、好友分享等满足了用户的社交需要。游戏自身的娱乐属性，满足了用户的休闲娱乐需求。A 能力：傻瓜式操作和保姆型引导弹窗指引，无需动脑即可完成。③ 多变的酬赏：自我奖赏：游戏开始给用户自主选择种子的权利。浇水和施肥后，果树设置有进度条，给予用户及时反馈，让用户感受到果树逐渐的成长，使其收获奖励和产生成就感。社交奖赏：好友之间可以偷取水滴建立和维系了社交属性获得情感收获，充分利用用户避免亏损的心理，能够不断召回用户提高用户的粘性，增加用户的使用时长。榜单上的排名给予用户自我认同感和极大的满足感。猎物奖励：养成果树可以获得实物奖励，果树成长过程中，会出现阶段性的红包、优惠券等奖励。将电商优惠券包装为任务奖励，并且与游戏道具保持紧密连接。在满足用户需求的同时提高下单量。主页加入其他奖励游戏 icon，设置明显的奖励文案，提高用户的日活度。⑥ 投入：时间投入：果树成熟需要浇水 300 次以上，期间获取水滴和化肥完成相应的任务。用户不断投入时间和精力都会转化为“沉没成本”，刺激用户每日持续参与活动中，提高用户粘性。情感投入：从选种到果树成熟，每一成长阶段都会随着用户的不断投入呈现出来，这种循序渐进式的过程，会使用户产生自己真实种树的成就感和操控感。各类水果勋章解锁，也会让用户产生成就感。在用户每天重复浇水，与好友互动偷水滴的过程中，会不自觉的形成一种习惯，逐步“上瘾”提升产品的活跃度。3. 互动游戏具有更好的营销效果① 娱乐体验佳相比单薄的营销页面，游戏化的互动形式更容易让用户接受，提升用户的参与度，让内容营销变得更加生动有效。和直接派送优惠券给用户相比，让用户参与到游戏中，付出时间成本再获取相应优惠券时，用户的使用度更高。② 传播效果好无缝连接各种终端，在任何一款浏览器或者手机、平板电脑中都能够访问游戏。开发成本低周期短，便于分享传播。这种广泛性是之前的游戏难以媲美的。游戏自带的竞争性，也能够让用户自发地进行传播，传播成本低效果好。③ 需求植入易互动游戏的趣味性、竞争性以及灵活性，能够让平台更容易将业务诉求融入其中。让用户在游戏过程中潜移默化地接受产品内容。例如：拼多多的多多斗地主将游戏道具与购物券、拼单做结合，游戏道具可以兑换现金和实物奖品在娱乐的同时又能获取奖励。互动游戏的趣味性、强互动能够很好的和各平台业务相结合。通过游戏化的方式，使用户参与到平台的营销活动中，能够产生真实的裂变效果，实现业务增长。在制作互动类游戏时，可以借鉴比较经典的 flash 小游戏（4399 沉淀了大量的经典小游戏）通过对经典小游戏的拆解，沉淀游戏范式，再将不同游戏的亮点剥离出来进行优化创新融合。但创新并不是单纯的模式复用，融合也不是机械地拼装。要结合实际业务，将游戏和商业诉求保持一个平衡点。写在最后在新的营销环境下，用户行为发生变化，趣味性、强互动的内容形式受到喜爱。品牌通过 IP 讲好故事，互动游戏增强产品趣味性，使用户自发性的参与到品牌的传播活动中，产生真实的裂变效果，形成良性循环。帮助产品在巩固“护城河”的同时，实现新的增长。End、d、d、ddddd.....!文献参考：张晓岚-《全民营销》李光斗-《互联网下半场》https://zhuanlan.zhihu.com/p/359532070https://zhuanlan.zhihu.com/p/66921748本篇来源：优设网原文地址：https://www.uisdc.com/product-growth
徽标 用户 消息 前言徽标数在系统可见方面扮演着重要角色。通过徽标数的提示让用户直观的感受到系统的可见性，其目的是告知用户有未读的消息或有未处理的任务，当用户完成后徽标数消失。徽标数本是提升点击率和曝光率的利器，然而有些产品却将徽标数当作信息触达的利器，随意使用这件杀伤力武器，使得徽标数被滥用，造成用户免疫，徽标数反而失去了本身的作用。本文通过简析徽标数设计，探讨如何通过徽标数（红点）提升通知易用性。更多小红点设计干货：用6大章节，帮你完整掌握界面中的小红点设计UI设计中最常见的小红点该如何设计？阅读文章 > 一、徽标数构成容器：承载内容的容器，一般由圆或圆角矩形等构成。内容：字符/图标，通常表示未读信息的数量或状态。如下图所示，是几种常见的徽标数类型。二、徽标数类型红点徽标（Dot）：单纯红点，视觉强度较弱。多用于低重要度的提醒内容、功能、状态或动态更新。数字徽标（Digital）：有具体的数量，多用于 IM 消息对话通知。最大值根据不同场景显示如 99+或 999+。文字徽标（Text）：有具体的引导文字，多用于吸引或引导用户注意，文案简单易懂。文字尽量少于 4 个字。自定义徽标（Custom）：有自定义图标或图案，多用于较强的提醒内容、功能、状态或动态更新。由于不同机型的适配不同，需要注意最大字符，避免超出所在的范围。如下图所示：四、使用场景目前市面上的使用场景大致有以下 3 个方向：1. 消息通知消息本身具备数量，那么可以通过徽标数告知给用户。在微信 tab 1 通过徽标数告知用户未读消息条数，当用户完成阅读后，则徽标数量减少或消失，如下图所示：淘宝-我的淘宝-个人订单中，通过徽标数告知用户不同状态的订单数量。微博粉丝群，当设置消息免打扰后，徽标数从数字变为红点提示。告知用户粉丝群有新消息。2. 营销通知通过徽标数，传达某种利益点，提升用户有效曝光率和点击率。例如支付宝的基金，通过徽标数传递基金正确投资方式，立足长期，才能获得更多收益。滴滴通过徽标数告知用户有超值券超值活动，提升用户点击率和成交转化率。3. 系统通知系统消息以徽标数的形式，传达给用户。如 QQ 的动漫列表，通过红点提示用户今日有奖励可以领取。四、设计要点徽标数的设计要点有以下 5 点：1. 一致性当使用数字徽标时，徽标计数具有一致性，数字的计数仅统计数字的计数，不包含红点数量。如下图抖音的消息徽标数统计。各个二级列表的徽标数量之和等于上一级徽标数量。2. 连贯性对于多层级徽标数，需要各个层级页面具备一定的连贯性。如支付宝红点层级具备一定的连贯性，这样可以很好的指导用户到达指定的页面。3. 合理使用合理的使用可以避免用户对徽标数产生免疫。苹果的 Human Interface Guidelines 提到：最好的体验是提供简洁、信息丰富的通知。用户打开通知以获得快速更新，因此专注于简洁地提供有价值的信息。对于非 IM 场景，满屏的徽标会给人带来压力且没有重点。下图 1 中，美团首页金刚区，没有业务模块通过徽标数去提升业务的点击率，做的相当克制。而图 2 则满屏的徽标数。每个业务模块都想去强化提示，从而提升有效曝光率和点击率，结果造成整个页面没有重点，甚至导致整体数据变差。从通知的重要程度来考虑，可根据不同情况大致分为以下三个层次：高关注度：强提醒或需要及时回应，这种情况常使用数字徽标。中关注度：无需立即回复，较为重要的活动消息或营销通知，这种情况常使用文字徽标或自定义徽标。低关注度：不关注但需要偶尔查看，免打扰的消息通知或不太重要的营销通知，这种情况下使用红点。4. 给用户选择的权利针对于徽标数产生机制，有时候会产生过量的徽标计数，如何通过设计去平衡数量，这时候可以将选择权交给用户。如下图所示：随着加的微信群越来越多，微信群消息也开始泛滥，对于有些群不重要的信息，用户可以根据自身情况去设置消息免打扰，降低微信群消息轰炸。如下图所示：为了解决淘宝卖家对于用户过度营销，造成骚扰，淘宝设计了拒收功能。用户点击后即可屏蔽商家发送的消息，只有下次用户主动和商家交流时，商家才能继续发消息。5. 创新形式使用微动效的徽标可以增强用户操作趣味性，提高关注度。对于信息的触达有明显的提升。当然也要适度避免滥用。如下图所示：京东和拼多多的徽标数动效既增强了趣味性又提升了关注度。如下图 Dribbble 上@Oleg Frolov 的动效作品，下图 1 通过徽标数的发散增强了趣味性和关注度。图 2，文字在徽标数的容器轮播，使得更多信息的传递。五、后记有些 APP 做了一键清除未读消息的功能，其目的是为了快捷解决用户消除徽标数的使用场景，方便用户。然而站在产品侧来看：对消息的触达不利，甚至会让整个消息系统丧失作用。如下图：淘宝消息顶部做了一键清除未读消息功能，而拼多多没有做。本篇来源：优设网原文地址：https://www.uisdc.com/red-dot-design
给大家 都是 流程 可能每个设计师都会有这个阶段，先是从面对空白画布的无从下手，然后变成在素材网或者灵感网站漫无目的的翻图机器。再或者画面做到一定程度不知道如何深化，但是自己看得出来画面没有收尾。这其实都是设计流程出了问题或者流程不完善，今天给大家带来的就是一套我个人的设计流程详解，我会尽量挑大块的部分进行说明，小块的知识点后续还会给大家重新汇总。更多视觉设计干货：用好这5个简单实用的海报技巧，特别容易出效果！今天给大家分享五种针对海报的小技巧，都是不需要有什么技法基础就可以做到且效果还不错的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/poster-design-process
按钮 操作 用户 一、前言众所周知，PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展，两者已经产生了成熟的交互范式，前者主要基于键鼠交互，后者以触屏交互为主。而为了适应不同设备的交互方式差异，提供更完善的用户体验，即便是相同的功能/组件也会衍生出细节上的差异。本期将探讨这些隐藏在细微处的交互差异，从而更深入了解用户体验中设备/行为/界面的关系。更多差异分析：中西方电商网站设计有哪些差异？我总结了这3个！作为一名交互设计师，我经历过国内零售电商产品，后又从进口转战出口。阅读文章 > 二、五个小案例1. 输入框的清除按钮清除按钮（clear button）是用来清除输入框内容的按钮。当输入框中存在内容时，出现在输入框的末端，点击后可清空已输入内容。pc 通过键鼠操作可以快速删除，但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见，特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容，提高操作效率，降低输入错误时的负面影响。虽然在 web 界面中很少使用上述的清除按钮，但“快速清除内容”的需求依然存在。主要出现在多项内容同时清空的场景，例如 b 端筛选中常用的“重置/清除”功能，以及多选框中快速清空选项。2. Hover 态光标 hover（悬停）是 PC 端的常用的轻量交互操作，当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息（展示 tooltips/二级菜单）；或指示按钮状态，提示用户此处可点击触发事件。但是移动端的光标（手指）不会长期悬停在屏幕上，所以不会有 hover 态。而且指尖轻触即表示“点击”，因此按钮将直接从“normal”变为“pressed”状态。相比于 pc 少了“hover”作为中间状态，因此在界面设计上移动端按钮需要明确的引导性，以传递“此处可点击”的信息。对于 hover 的二级菜单，移动端需要多点击一步展开，或者 tab 切换进行快速跳转。3. 按钮 VS 手势复杂的手势输入是移动端的优势，但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed 流常用的操作，将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新，则需要添加一个[刷新]按钮。在 banner 轮播中，pc 通常会提供准确的“上/下一页”按钮，而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。究其原因，鼠标操作一般都有精确的操作/点击对象，因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽，这是符合用户手势操作心智的交互方式。同时手势操作的准确度低，屏幕空间有限，用手势代替按钮的性价比很高。4. 长按与右键右键呼出更多菜单是 PC 端的常用操作，移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单，在 pc 端需要选中文本对象后需要点击右键，而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作，快速弹出菜单减少用户操作步骤；而且选中后若再次叠加一个长按行为，很容易误判成单击从而取消选中。5. 弹窗PC 端信息反馈的样式更加多样，包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗，应用方式更灵活，用户使用过程流畅。由于屏幕面积小，移动端弹窗面积占比更大，对用户而言打断感受更强，在设计过程中需要谨慎。同时，移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧，而 win 系统中强引导按钮在左侧（MacOS 则在右侧）。三、小结交互方式差异深刻影响了 PC 和移动端界面形态，这些设计细节隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略，在多端系统设计过程中依然需要注意这些差异性细节。移动端缺少 hover输入相对不便点击准确性低手势操作便捷长摁呼出菜单PC 端hover 能实现轻量级的交互输入方式高效快捷光标点击准确右键呼出菜单即使是相同的产品功能也会产生差异化的交互变体，这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时，如果忽略了这些交互细节，除了影响产品可用性，还可能违背用户的使用习惯，导致产品体验细节的缺位。整体来看，交互界面不仅是功能的可视化载体，他还缝合了设备应用和用户行为，是产品使用流程的中枢。往前，界面/交互设计中应该兼容硬件能力，并传递准确的用户输入数据；往后，设计应该向用户传递设备的能供性，将设备能力转换成可感知的界面上的能供性，从而为用户提供完整且细致的产品体验流程。欢迎关注作者微信公众号：「ASAK设计」本篇来源：优设网原文地址：https://www.uisdc.com/pc-mobile-interaction-difference
目标 业务 产品 很多同学问过我关于业务目标、 产品目标和设计目标相关的问题，比如：业务目标和产品目标有什么区别？产品目标与设计目标的关系是什么？设计目标时根据什么制定出来的？今天我们就来聊聊这三个目标之间的区别和联系。更多作者干货：设计师与 ChatGPT 如何共处？我总结了3个角度！最近挺多同学问过我关于 AI 的看法：ChatGPT 以及很多 AI 生成插画和图片的工具和软件，不仅为我们带来了惊喜，也让我们感受到了不少担忧。阅读文章 > 通常情况下，业务方、产品方和设计方是分开的三组人。一些追求敏捷发展的中、小公司可能不会区分得太清楚。不过这并不影响我们在工作时将业务目标和产品目标进行拆分管理，以保证目标更加清晰、更易落实。一、业务目标业务目标是业务人员针对业务领域或产品方向提出来的。业务方的立场是：卖出产品为公司赚钱，因而会兼顾售前、售后获得的用户反馈、公司的发展战略等方面来制定规划和目标。业务目标通常是公开透明的，它是整个业务产研大团队的共同目标，也是产品目标和设计目标的来源依据。业务目标的写法通常是：“XX 业务 / 产品今年将以 XX 为重点方向，预计将用户活跃度从去年的 20% 提升至 50%。”二、产品目标产品目标是由产品方根据业务目标、产品功能和用户需求制定出来的，产品方的立场是：将产品做得更好从而实现业务目标。产品会根据业务目标来为产品功能做规划，也即将业务目标转换成具体的功能模块建设需求。因此产品目标也会显得更加接地气和务实一些，它的写法可以是：“重点建设全新的 A 功能，做到人无我有；优化 B 功能的 XX 环节，增加 XX 服务，做到人有我优，将用户对 B 功能的好评率提升 20%。”三、设计目标设计目标是设计师结合业务、产品、用户等多方需求制定的设计工作方向。设计师的立场是：在保证用户体验的基础上完成产品功能设计，实现产品目标和业务目标。设计目标的制定来自于对业务目标和产品目标的拆解和落实，同时也要兼顾用户体验，平衡多方需要后找到最优解。 设计目标会指引你完成设计实操工作。它的写法通常是：“优化 B 功能的 XX 体验，在保证产品可用性的同时，提升用户在使用产品时的安全感，增强产品与用户的共情心智，提升 20% 好评率。”四、三者之间的关系业务目标是产品目标的依据，会被产品方转换成具体的功能建设规划。产品方会在建设产品功能的过程中实现业务目标。业务目标和产品目标都是设计目标的依据，业务目标会被设计师转换成整体的设计优化规划；产品目标会被设计师拆解成具体的设计执行方向。设计师会在保证用户体验的基础上，实现产品目标和业务目标。可以看到，越是处于合作的下游，需要考虑的范畴和责任就多。业务目标是相对纯粹的，它来源于公司战略和用户关系；产品目标是相对务实的，它来源于业务需要和用户需求；而设计目标则是相对复杂的，需要设计师站在业务视角、产品视角和用户视角来做全局看待，时刻思考如何取舍和融合，找到平衡点。在实际的工作过程中，业务目标、产品目标和设计目标三者互相成就，紧密咬合，不可分割。这也要求我们作为设计师在做设计目标和整体工作规划的过程中，应该从业务和产品的本质需求入手；在从视觉表现、交互体验、操作流程等方面来做设计执行时，不应是以“突出设计工作和设计方法”为出发点，也不应是以“为了增加某个好看的效果”为最终目的，而是“为了赋能产品/业务”，实现产品和业务的目标。在商业设计中，设计之所以有“价值”，也正是因为它能为业务创造价值。欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/business-product-design-2
色彩 颜色 模型 色彩作为设计师的基本功，如何平衡产品的色彩搭配是每位设计师的必修课。如今市面上有种类繁多的配色工具可以一键生成配色方案，也有成套色卡作为色板参考，但是当面对高度自由且需求多变的设计状况时，如果缺少对色彩规范的系统理解，仅跟随设计师自身喜好进行配色，往往会导致产品杂乱不堪，没有章法。本文结合我自身的工作和学习经验，从理论基础到色彩系统搭建带大家由浅入深学习下 B 端产品中的色彩体系。更多色彩建立干货：如何4步建立系统级色彩体系？来看京东高手的方法！色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。阅读文章 > 一、色彩理论基础色彩理论基础是搭建色彩系统的基石，接下来我将从色彩本质开始，为大家介绍设计师需要掌握的几种常见色彩模型。1. 色彩的本质在小学物理课上我们都学过，色彩是由物体自身发光或反射出的光映射在人眼后所感知的，而光的本质是一种电磁波。自然界中存在不同频率的电磁波，短频的如 AM 收音机、电视信号，长频的如 X 光、伽马射线，我们所熟知的可见光则是电磁波中人眼所能接受波长约为 380~780nm，也就是从紫色到红色范围的这段色彩。资料来源：网络反射到人眼中的光，除了光本身的颜色，还会收到物质特性的影响。白色物体在被黄光照射时，反射到人眼中看起来就是黄色的，但蓝色物体在被黄光照射时会呈现黑色，原理是黄色作为蓝色的反色调，黄光本身不包含任何蓝光，因而被蓝色物体完全吸收时并无法反射出其他颜色，导致人眼看起来就是黑色。资料来源：巫师后期-什么是颜色此外，我们最终感受到的颜色除了光和物质特性外，还会收到周围环境、时间和历史经验的影响。下面这张网络图很多人都见过，同一张图片在不同人眼中会识别为不同的颜色。图片来源：巫师后期-什么是颜色综上所述，色彩的本质是一种复合的物理现象，是人眼感知物体表面反射光的结果。2. 色温：描述发光体的冷暖关系通过理解色彩本质可以发现，单纯凭借人的色彩感知来描述颜色具有很强的主观性，要如何保证在实际生产中每个人表述的是同一种颜色呢？这就需要找到可以科学且规范描述颜色的方法，在日常生活中我们接触比较多的是色温法。色温法的原理是：物体把热量以光的方式辐射出去，当物体处于不同温度时会发出不同颜色的光：温度比较低时呈现黄色，温度高时呈现蓝色或白色。这里标定的色温和大众认知中的冷暖感受正好相反，通常我们会认为红黄色调偏暖，蓝白色调偏冷，但实际上红色的色温最低，然后逐步增加的是橙色、黄色、白色和蓝色，蓝色是最高的色温。因此色温的高低和给人的色调感受是正好相反的。资料来源：网络熟悉摄影的同学都知道，当我们在清晨或黄昏的户外拍摄时照片时常会发黄，这是因为该时间段色温较低，光线呈现为橙黄色。而相机的白平衡模式可以缓解环境光的影响。其原理就是通过切换预设场景的色温值抵消当前实景的色温影响，使拍摄出的照片呈现出白色基准更真实。资料来源：网络色温法是建立在物体可以自身发光的基础上，而在自然界的发光体中，红、黄、蓝色会更为常见，但是绿色和洋红色很少。所以单靠色温法描述颜色不够准确，它更适合用来反映环境冷暖和色彩的倾向关系。资料来源：网络3. 常见的色彩模型为了更准确的描述颜色，工程师们引入了色彩模型的概念：将色彩拆分成不同属性并进行量化，通过计算机语言更科学准确的表述颜色，而不同维度的拆分方法便是色彩模型。随着科技发展和生产制造的需要，色彩模型迭代出了多个版本类型，接下来我将挨个介绍常见模型的差异和功能特点：① HSB 和 HSL 模型HSB 模型也称 HSV 模型，该模型是建立在人眼识别色彩的基础上，符合人类日常的生活经验，相较其他模型最为直观易理解。该模型主要使应用在图像处理、计算机图形学、色彩管理等领域，用于描述和操作颜色。其属性包括：H 色相：Hue，以角度（0-360）表示S 饱和度：Saturation，以百分比值（0%-100%）表示B/V 亮度：Brightness 或 Value，以百分比值（0%-100%）表示HSL 是和 HSB 原理相同的模型，在工作中很容易会被混淆使用，其区别在于：HSB 中 B 指的是「亮度 Brightness」，而 HSL 中 L 指的是「明度 Lightness」。为方便大家理解，对于这两种模型的详细区别，我整理了出了以下表格：资料来源：网络HSB 和 HSL 模型在使用场景上都是用于软件开发应用，在实际工作中我们接触 HSB 模式的场景会更多，但到底哪种模型更适合人类用户使用的界面设计尚未有定论。对于设计师自身而言需要注意的是，在和开发同步设计资料时确保使用的是同一种模型，避免产生颜色误差。虽然 HSL 模型有诸多好处（HSB、HSL 属于同类模型，后文统一用 HSL 概括），但其缺陷也很明显：HSL 模型无法用于工业制造，因为在自然界中基本很难找到某一属性纯度可以达到标准的物体，也难以控制单一属性变量来改变物体颜色。为了解决以上限制，用于屏幕显示的 RGB 模型和彩色印刷的 CMYK 模型应运而生。② RGB 模型RGB 模型是依据颜色发光的原理所搭建的，也被称为光的三原色，工业上用于通过红、绿、蓝三色发光单元产生颜色的电子屏幕。R 红：Red，以数值（0-255）表示G 绿：Green，以数值（0-255）表示B 蓝：Blue，以数值（0-255）表示通常情况下，RGB 各有 256 级亮度，用数字表示为从 0、1、2...直到 255，虽然数值最高是 255，但 0 也是数值之一，因此共 256 级。将三种颜色叠加并控制其颜色强度，256 级的 RGB 色彩总共能组合出上千万种色彩，而这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。资料来源：网络RGB 模型是我们日常工作接触最频繁的模型，但是不知道你是否产生过疑惑：为什么偏偏选择「RGB 红绿蓝」作为光的三原色，而不用其他色彩呢？首先我们要明确，能作为三原色的基础是必须保证其中任意一色不能通过其他两种颜色混合而成，且这三种颜色混合后能形成足够多的颜色种类。而 RGB 能作为三原色的色彩主要和人眼的生理结构有关：资料来源：网络前面我们提到，光的本质是一种电磁波。而视锥细胞共分为三种，分别对长、中、短三种电磁波长最为敏感，而这三种波长的光对应的正是红、绿、蓝三种颜色。当这三种感光细胞收到刺激后，会自动对将感受到的光色进行组合从而形成多种多样的色彩。这也是为什么「RGB 红绿蓝」被作为三原色的客观原因。资料来源：网络关于 HEX 色值这里还有个知识点就是 HEX 色值，听到它大家都不会陌生，在很多拾色器中我们都见到过，工作中也经常将其提供给开发同学作为颜色标识。虽然看起来结构不同，但 HEX 也是采用 RGB 模型的原理来定义颜色，只是语言上用的是十六进制代码：字节值范围从 0 到 FF，颜色的最低强度为 00，而最高强度为 FF。实际转换时，每位数字范围是 0～15（分为 0～9 和 A～F，其中 A～F 表示 10～15），这样每位数字都能代表 16 个数，而每 2 位数字相乘即可代表 256 级，正好对应一个颜色通道。相较于长段的 RGB 表示法，HEX 色值表示法只需六位字符，更加紧凑轻量，所以更适合开发人员使用。十六进制到 RGB 转换器工具： https://purecalculators.com/zh-CN/hex-to-rgb-converter③ CMYK 模型以上 RGB 模型是针对可自身发光的物体，CMYK 模型则是针对依靠反光的物体。CMYK 是色料的三原色，也叫印刷的三原色，使用最多的场景是媒介印刷，其原理是基于油墨的光吸收/反射特性，眼睛看到颜色实际上是物体吸收白光中特定频率的光而反射其余光得来。R 青：Cyan，以百分比值（0%-100%）表示M 品红：Magenta，以百分比值（0%-100%）表示Y 黄：Yellow，以百分比值（0%-100%）表示B 黑：Black，以百分比值（0%-100%）表示资料来源：网络通过以上现象我们会发现，将不同颜色的物质不断揉合最终会得到黑色物质，而这正好满足了我们工业印刷品上白纸黑字的需求：选择「红、绿、蓝」的补色「青、品红、黄」，通过调整这三种颜色油墨的比例，就能得到反射不同颜色的油墨。理论来说同比例的这三色油墨可以直接混合出「黑色」，但是现实中由于生产技术的限制，油墨纯度往往不尽人意，混合得到的黑色不够浓郁，只能依靠提纯的黑色加以混合，这种做法同时也可以节省油墨消耗。资料来源：网络在显示器等发光体下，RGB 模式的数值越大则光线越强，最终呈现的亮度也会最大。但是在印刷品等反光体下，其纸张本身的白色即是可以呈现的最高亮度， 所以 CMYK 模式的数值越大则油墨越多，最终呈现的亮度会越低。也因此：RGB 被称作加色模型，即多色叠加最终将得到白色CMYK 被称作减色模型，即多色叠加最终将得到黑色。④ Lab 模型以上三种是最常见的通用模型，还有些色彩模型用于更特定的场景，Lab 模型便是基于生理特征的一种模型。RGB 和 CMYK 受限于载体，同样的颜色可能会因为材质差异影响呈现不同的颜色，Lab 模型则是弥补其不足，摆脱原材料载体对模型的影响。1）L 明度：Lightness，以数值（0-100）表示2）a b 是两个颜色通道：a 通道：从绿色到红色，以数值（-128 至 127）表示b 通道：从黄色到蓝色，以数值（-128 至 127）表示资料来源：网络Lab 模型无法用于实际生产制造，但是其色彩空间比计算机显示器甚至比人类视觉的色域都要大，在转换成其他模型时色彩不会丢失或被替换，所以通常用于图像色彩空间转换、色彩校正、色彩相似度比较等场景。在进行具体的颜色转换时需要复杂的计算公式，作为设计师只需了解其模型用途即可。关于色彩空间上面我们提到一个词叫色彩空间，它是图像处理和计算机图形学领域中非常重要的概念，在图像处理、图形学、图像质量评价和广告设计等众多领域都有涉及。很多人会将它与色彩模型弄混，实际上两者是不同的概念：色彩模型：一种数学模型，用于表示色彩的三维数学空间，通常会用 3 个或者 4 个数值来表示。色彩空间：一种色彩表示方法，它将色彩模型中的颜色映射到二维或三维空间，以便于显示和比较。总而言之，色彩模型是用于表示色彩的三维数学模型，色彩空间是对色彩模型的二维或三维映射，方便于显示和比较色彩。色彩空间通常与色彩模型一起使用，并使用特定的数学表示法来定义色彩空间中的颜色。资料来源：维基百科⑤ HCL 模型HCL 模型最早由国际照明协会 CIE 提出，又被称作 CIELch(uv)。该模型是为了解决色彩对比度问题而诞生的模型，对颜色识别有障碍的视障人士更友好。H 色相：Hue，以角度（0-360）表示C 色度：Chroma，可以理解为颜色的浓度，浓度值越大，颜色就越鲜明。以数值（0-150）表示L 照度：Luminance，用于量化人眼对光的亮度的感知。以数值（0-100）表示。注意这里 HCL 模型的「Luminance」与前文 HSL 模型中的「Lightness」是不同的，我们先来看一个例子，分别通过 HSL 和 HCL 推导的色卡在对比度上有何差异？很明显，虽然都是控制变量但左图在颜色对比度层次不齐。这是因为 HSL 模型是基于电子元件的显示亮度进行计算的，但并非人眼感知光的实际感受。所以在配色时如果采用 HSL 模型，即使「Lightness 明度」值相同，色彩亮度在人眼看来依旧不匹配，需要设计师基于主观意愿进行调整，不仅耗费时间和精力，配色流程不够科学标准化。HCL 模型则很好的解决了以上问题，其初衷就是基于人眼对亮度对感知而创造的：只要「Luminance 照度」保持一致，不同色相的颜色亮度感受始终会保持均匀，这种情景下取色流程会更加简单高效，应用到产品上对视障人士也更加友好。资料来源：TDesign需要注意的是，HCL 模型的色彩空间和其他模型不一定能完全匹配，所以直接转换可能存在颜色丢失或被替换的情况，这里为大家提供了几款以 HCL 色彩模型为基础的色彩转换工具：HCL 转 RGB HEX： http://hclwizard.org:3000/hclcolorpicker/MD 主题搭建工具 HCT Color Picker： https://m3.material.io/theme-builder#/customColorpicker for data： http://tristen.ca/hcl-picker/#/hlc/12/1.03/182009/A9FC8EFigma 插件： https://www.figma.com/community/plugin亮度、明度和照度的区别介于中英文语义的差异，Brightness、Lightness、Luminance 都可以翻译为“亮度”，然而在色彩模型中每个词却有更深层次的解释，为方便大家区分理解区分，将三者整理在一起进行对比：Brightness 亮度：用于 HSB 模型，客观测量颜色的显示亮度。颜色变化从黑到标准色相，满值为颜色标准色相。Lightness 明度：用于 HSL 模型，和 HSB 一样客观测量颜色的显示亮度，与人亮度感知没有直接关系。颜色变化从黑到标准色相再到白，半值为颜色标准色相，满值为白色。Luminance 照度：用于 HCL 模型，主观上衡量发光的强弱和颜色对比度。可以发现前 2 个都是客观上对颜色亮度的衡量，而「Luminance 照度」才是真正意义上主观感受颜色的标准。二、B 端产品的色彩系统近年来，随着企业级产品功能体量不断丰富，产品设计体系逐渐趋向于规范化，如何搭建一套标准易用的色彩系统对于提升团队工作效率和产品体验一致性至关重要。通过系统化的颜色管理方法，可以帮助企业统一品牌颜色，提高品牌识别度和统一性。接下来，我将为大家详细讲解 B 端产品中色彩系统的构成和搭建方法：1. 色彩系统的概念简单来说，色彩系统是指从整个设计系统里抽离出的分支，为方便管理而针对色彩语言搭建的管理体系。完整的设计系统由设计语言和模式库构成，在设计原则的指引下，通过统一的协作语言和科学的管理方法组织起来，创建体验一致的用户界面。完整的设计系统可以拆解成三部分：设计原则：设计要遵循的中心思想，所有的问题和形式都向原则靠拢，减少不确定性设计语言：包括价值观、品牌、符号、色彩、文字等品自主表达的媒介模式库：即组件库，通过对控件进行归纳整理形成的可快速复用工具库色彩系统也是如此，并不仅仅是简单的色彩组件库，结合设计系统的内容，我们可以将设计原则和设计语言归入色彩规范中，而模式组件库即产品色板（调色板）。这里可以将色彩系统定义为：由色彩规范和产品色板组成，可以科学有效管理色彩的应用程序。2. 什么是好的色彩系统理解了色彩系统的定义，如何保证搭建的色彩系统科学有效？好的色彩系统应遵循以下三个原则：有意义：能够体现产品个性，凸显品牌基因，满足用户对产品的认知感受，不同色彩的搭配使用能满足用户的心理预期，提升使用体验。易上手：色彩系统不仅仅是给设计师自身使用的，在整个产品周期中，从上游的品牌战略到下游的视觉运营，都要使用到产品配色，优秀的色彩系统应方便团队成员上手，即使没有专业背景也可以很快的理解和使用。无障碍：不同颜色间对比度要匹配 WCAG 的对比度标准，保证内容元素的可识别度。3. 色彩识别无障碍资料来源：网络在色彩系统搭建之初就考虑色彩无障碍识别问题，可以普适更多场景，有效提升产品信息识别度和易用性。WCAG（Web Content Accessibility Guidelines ）内容无障碍指南作为行业广泛使用的无障碍设计标准，是检验文字颜色可读性的有效依据，只要文本颜色与背景色之间的对比度满足以上标准，就能确保被清晰识别。WCAG 2.0 中将颜色对比等级分为 3 种，等级越高意味着颜色的对比度越高，呈现出来的信息可读性越好：A 级：对比度 3 : 1，是普通观察者可接受的最低对比；AA 级：对比度 4.5 : 1，是普通视力损失的人可接受的最低对比度；AAA 级：对比度 7 : 1，是严重视力损失的人可接受的最低对比度。这里为大家推荐一款可视化对比度检测工具 Color Review：通过将 3、4.5、7 对比度临界点的颜色通过曲线标识，可清晰直观的看到当前色值的对比度在拾色器中的位置，方便进行调整。Color Review 对比度可视化检测工具： https://color.review/资料来源：Color Review4. 产品色板的组成依据色彩的类型和功能不同，产品级色板的内容可分为主色、中性色、辅助色和功能色，其中每种颜色都应有相应的色阶拓展供配色使用。① 主色产品主色一般是页面中使用最多的颜色，通常被使用在关键行动点、操作状态、重要信息提示、图形化等场合。很多设计师会直接将主色和品牌色划等号，即直接将品牌色作为产品主色使用，我们日常接触的 C 端产品大多也是直接使用品牌色作为主色使用，但是 B 端产品主色也可以直接使用品牌色吗？这里需要先理解 B 端和 C 端产品的设计差异。C 端产品设计侧重流量思维，追求尽可能渗透用户的碎片化生活来吸引用户。通过将品牌色作为主色使用可以凸显品牌特征，强化用户心理认知，以此来提高用户粘性和活跃度。而 B 端设计侧重的是效率思维，强调提升用户的操作效率帮助其达到使用目标。所以 B 端产品主色优先考虑色彩的识别度和视觉感受，尽可能保持用户在使用产品时沉浸感，即使在长时间浏览时也不会感到不适。因此究其根本，B 端产品主色不能对用户的使用操作造成干扰，必要时需要在原有品牌视觉的基础上提取品牌色进行修正，使其更符合用户的使用场景。当然能兼具品牌价值传递和操作体验是产品的最优方案。② 中性色中性色又称无彩色，包括黑色、白色及调和后不同深浅的灰色，常被使用在文字、图标、背景、线框等场景。中性色本身不具备颜色属性，没有色相冷暖的区分，因此可以更好的衬托其他有彩色，也能拉开信息的层次差距，对于创造结构、表达边界和建立信息层次十分重要。一般浅灰色应用在分割线、表单描边、背景色等场景，划分页面布局且避免对主要内容造成干扰。深灰色主要应用在正文、标题、图标等元素上，通过明度变化突出内容，方便用户浏览。有些产品会在中性色中加入适度色彩倾向，在保持中性色本身信息区分度的前提下，增加品牌色基因来强化品牌氛围。资料来源：TDesign在搭建中性色色板时，对于配置文字颜色市面上有 2 种解决方案：一种是直接控制灰度拓展色阶，另一种是用透明度变化建立色阶，如使用#000 并降低其透明度。市面上采用透明度方案的并不多，考虑到其根本目的是为了保证文字信息内容可以被正确展示，在此针对两种方案的使用场景提供更清晰的使用建议：色值变化：内容可以完整的保留色彩信息，不会造成色彩丢失，在组件搭建上维护成本更低。适合大多数场景下使用。透明度变化：在复杂图片或纹理的背景上依旧可以很好的展示内容信息，且可以更好的适配亮暗模式，更具包容性，但在一定程度上会增加浏览器的渲染负担。适合使用在暗亮模式需求或有复杂背景纹理的页面中。③ 辅助色辅助色是在主色基础上衍生出的其他颜色，主要有 2 个作用：一方面可以平衡色彩系统，缓解用户在使用产品过程中频繁使用单色造成的视觉疲劳，另一方面可以丰富色彩系统的可用性，通过和主色对比增加内容区分度。资料来源：网络根据研究来看，人类可命名的有彩色数量仅为 8～9 种，更多的颜色分类会增加使用时的筛选负担，同时色彩区分度也会降低。故通常建议在人类可命名的 8 种颜色中选择 6～8 种作为辅助色即可，如果有更多用色场景需求可以考虑加入拓展的颜色色阶进行交替使用。④ 功能色B 端产品中会利用色彩的心理暗示来对用户进行状态反馈，以降低用户认知成本，这部分辅助色通常被独立出来称为功能色：遵循用户心智和行业内默认的色彩语义，选择特定颜色向用户传达成功、失败、告警、链接等状态信息。如用红色传达通知、提醒、错误等，绿色传达确认、成功、正确等，橙色传达警告等。5. 色彩系统搭建以上便是色彩系统的主要内容，接下来将详细介绍如何搭建适合自身业务的色彩系统，主要分为以下五步：第一步：色相环取色。由主色推导出既符合品牌调性又具备区别度的辅助色。第二步：颜色校正。对选择的颜色进行色彩校正，使其保持感官同频。第三步：色阶延展。针对选择的颜色搭建层级均匀、层级清晰的色阶梯度。第四步：色彩语义化。对搭建好的色板进行语义命名，方便团队调用。第五步：团队推进。将资源同步至团队中使用，并优化迭代。① 第一步：色相环取色色相环取色是在主色基础上通过使用色相环来提取辅助色，具体的操作方法为：以主色的「色相 Hue」为起始点，在色相环上以 15为梯度进行加减，得到 24 色的色板。再根据自身产品场景，选择其中 6～8 种的颜色作为辅助色。② 第二步：颜色校正在色相环取色过程中，虽然保持其他变量，只对色相进行了变换，但由于颜色本身在视觉感受上存在亮度差异，故需要进行颜色校正，一方面保证整个色板保持视觉上的感官同频，另一方面保证视障群体的识别度。③ 第三步：色阶延展选择合适数量的辅助色后，需要对单个颜色进行色阶拓展以提供更多的色彩搭配空间，色阶拓展是指将同色相下的颜色由浅到深划分为多个色阶梯度。通常色阶拓展采用 8～12 级进行划分，如果层级过少可能会无法满足日常的取色需求，而层级过多又会导致色彩区分度下降，在取色时也会增加选色成本。市面上有很多种色阶延展的方法，这里为大家整理了几种常见的方法：透明叠色、直线等分、工具生成，各位同学可以基于团队情况自行选用：透明叠色法顾名思义，透明叠色法是在原来颜色的基础上叠加不同透明梯度的白色/黑色遮罩，由此得到不同色阶梯度的衍生色，再通过取色器吸取叠加后的色值。该方法实现成本低，无需其他工具配合即可实现，但是操作相对繁琐，当叠加层级较多时可能会导致颜色偏差，有时需要基于实际情况再做微调。直线等分法直线等分法是通过在拾色器中建立坐标系，之后采用直线等分打点的方法取色。其中拾色器的坐标系是基于当前选择的色彩模型而定，如 HSB 模型横/纵坐标为饱和度/亮度，HSL 模型则是饱和度/明度。直线等分法的操作较为简单，可以通过公式算法自动取色，但设计师独立推导的计算成本较高，通常需配合公式计算。具体的操作步骤如下：1）在拾色器上标明要延展的颜色，将色值点与左上方纯白和右下方纯黑点连接，得到 2 条线段2）将 2 条线段均匀分为 5 段，所有线段段点合集共 11 个点，计算每个点的色值数，即可得到这 11 个点组成的色板。3）以现有颜色坐标（X，Y）为基准，采用以下的计算公式即可得到延展色的色值：左上方点：横坐标(X/5)递减，纵坐标以[(100-Y)/5]递增右下方点：横坐标以[(100-X)/5]递增，纵坐标以(Y/5) 递减工具生成经过多年发展，国内外多家设计系统都开发了直接生成完整色板的开源工具，且经过不断迭代如今算法基本能满足大部分场景下的色板需求，是中小团队的首选方法。但是工具生成也存在一些弊端，其色值生成始终是建立在公式计算的基础上，故在部分极端场景下依旧需要设计师介入调整。资料来源：Ant Design 色板生成算法演进之路以下给大家整理了常见的色板生成工具：在线工具 Chroma.js： https://www.vis4.net/palettesArcoDesign Palette 色彩工具： https://arco.design/palette/listAnt Design 色板生成工具： https://ant.design/docs/spec/colors-cn#色板生成工具Material Palettes 色板生成工具： https://www.material.io/design/colorHTML Color Codes 颜色选择器： https://htmlcolorcodes.com/Eva Design System 色彩系统： https://colors.eva.design/Atmos 色板生成工具： https://atmos.style/④ 第四步：色彩语义化色彩语义化是指依据颜色在界面中的作用和使用场景进行重新命名，方便团队后期的维护和使用。这一步看似简单，但是实际操作起来需要设计师对色彩的使用场景和团队取用有深入的理解，很多细节需要推敲和考量。这里推荐参考 Nathan Curtis 的语义模版，作者将设计系统下的命名模版分为了四个部分：命名空间-元素对象-基础样式-修饰备注。资料来源：Naming Tokens in Design Systems原文关于设计系统下的语义命名进行了详细介绍，有兴趣的可以直接阅读原文： https://medium.comNathan 关于设计系统的命名涵盖了包括色彩、控件、文字等一系列元素命名方式，而色彩系统只需要截取其中部分拼装成符合自身场景的语义模版即可。各位可以基于产品规模和团队情况选择合适的内容进行命名封装，需要注意的是，语义模版的命名需要合理的把控精度：一方面过细颗粒度的命名会导致过于臃肿，维护成本过高，另一方面粒度过粗的命名会导致元素区分度不够，在团队推进使用时容易造成混乱。关于如何验证色彩语义是否清晰有个很简单的方法，即直接将设计的配色方案提供给开发同学，看能否在不借助颜色进行备注和说明的情况下只通过命名即可理解色彩的语义场景，通过不同角色视角更容易发现色彩命名的问题。⑤ 第五步：团队推进到这里色彩系统的基础色板和配色方案基本都搭建完成了，后续就是将其整理到组件库，并输出设计文档同步给团队其他成员使用。这里推荐使用 Figma Tokens 插件来进行管理和维护。此外，在同步前端同学建立开发组件库时，尽量采用语义命名对颜色进行封装，而非直接写死固定色值，以便日后在迭代调整时更加灵活。设计内协同：在 Figma 中生成颜色变量与开发代码联动：利用颜色变量表进行信息同步参考资料https://www.yuque.com/xiami0101/bq79sy/vtnqb262ag42tt66https://www.yuque.com/xiami0101/bq79sy/hy3vvihttps://www.youtube.com/watch?v=k1rB1Y4isHs&list=PLhnwj_CftHvhwO8P0mytRNZzlgbtOvgf4https://www.jianshu.com/p/f0e6382dd825https://zhuanlan.zhihu.com/p/165548359https://jessieji.com/2020/hcl-instead-of-hslhttps://medium.com/@pk.kiselev/designing-colour-system-d9d39f245e01https://www.jianshu.com/p/facdbab5ac20https://zhuanlan.zhihu.com/p/32422584https://www.yuque.com/xiami0101/bq79sy/ntkf60rgs9g3m2h2?singleDoc#https://zhuanlan.zhihu.com/p/102743681?utm_id=0欢迎关注作者微信公众号：「虾米的体验笔记」本篇来源：优设网原文地址：https://www.uisdc.com/color-system-2
样机 作品集 再来 金三银四，很多同学已经提前开始准备作品集，摩拳擦掌打算换个更好的工作！但是一翻以前的作品，感觉能拿得出手的寥寥无几，开始纠结要不要放弃，或者抓紧时间再做一个虚拟项目丰富一下？确实，好的作品只能靠平时多积累，但是好的包装却是可以“临时抱一抱佛脚”的！样机用得好，作品集也能快速提升一个段位！今天就来给大家更新一波儿高质量样机！看中了单个样机的，可以直接复制对应链接去浏览器打开获取。话不多说，我们一起看看样机效果！一、iPhone 14 Pro 必须先来一波儿满打满算，iPhone 14 上市都已经半年了，新的样机模板得安排上。尤其是很久没更新作品集的同学，仔细看看之前用的样机，能当传家宝的 iPhone 4 千万要换掉。3 个角度、4 种颜色免费获取 https://js.design/community6 种颜色、可编辑、组件状态免费获取 https://js.design/community二、十三香也得来点儿样机不是越新越好，适配你的作品、并且更能展现亮点和优势才是最好的。如果没针对灵动岛做特殊设计，那么 13 仍然是你目前的最佳选择之一。免费获取 https://js.design/community三、再来个安卓的免费获取 https://js.design/community四、Apple Watch 也要安排上智能可穿戴设备是近些年的流行趋势，虽然 Apple Watch 样机的使用场景没有 iPhone 那么丰富，但还是要存一下以备不时之需，免得以后要用的时候慌慌张张到处找。免费获取 https://js.design/community五、再来几个电脑的这也是必不可少的iMac 24 寸样机，七种颜色都有，可以一键换图，查看具体再哪一个样机上展示的效果最好。免费获取 https://js.design/communityMacBook 样机模型自然也不能少，包含了新款 pro 16 英寸、14 英寸，以及 MacBook Air，存这一套就够用了。免费获取 https://js.design/community六、平面的整完了，最后再来点 3d 的3D 不同机型样机合集，涵盖手机、电脑、iPad、Apple Watch、绘画板等多种设备，一共 15 个样式，妥妥够用了。免费获取 https://js.design/community用够了单手握持点击？看看这套 3D 样机素材，一共十多种姿势可以选。免费获取 https://js.design/community当然，真人手握样机模板也不能少， 有 13 和 13Pro 两种机型，握持的手也有明暗两种模式，可以更好地融入你的作品集当中。免费获取 https://js.design/community实在是太全了！最后以上就是今天要和大家分享的全部样机模板，都是非常实用的，用好了可以让你的作品包装效果更上一层楼。这些样机模板都来自于「即时设计-资源广场」，除了选出来推荐给大家的这些，还有 100+ 样机素材，想要的同学可以直接去查找使用。资源获取地址： https://js.design/community本篇来源：优设网原文地址：https://www.uisdc.com/10-prototype
字体 网站 英文 大家好，这里是和你们聊设计的花生 ~之前为大家推荐了很多期的免费可商用英文字体，它们风格各异，适合不同的设计场景，但也只是众多免费英文字体中的极小一部分。所以今天为大家推荐 9 个我常用的外国英文字体下载网站，它们收录的字体数量庞大，风格类型全面，下载便捷，并根据字体风格、特征、使用场景进行详细了分类。有了这些网站，以后就不愁找不到免费又好看的英文字体啦 ~往期回顾：打包下载！5款高质量的免费可商用英文字体推荐大家好，这里是和你们聊设计的花生~今天为大家推荐 5 款我最新收集的高质量英文字体，包含赛博朋克、优雅、圆润可爱、纤巧灵动等多个风格，而且都是免费可商用的哦~往期回顾:一、Achron字体设计师 Instagram 主页： https://www.instagram.co阅读文章 > 一、Google Fonts网址直达： https://fonts.google.com/ （需要魔法）Google Fonts 是一个完全免费开源的字体网站，目前收录了 1488 套字体，无论是英文、中文还其他国家的字体都有，并提供字体代码，让用户可以方便的将字体嵌入到网页中。字体整体质量非常高，以衬线、非衬线、显示以及手写 4 类型为主，下载非常方便。使用技巧：网站有筛选器，可以通过字体类型、国家和字体特征（粗细、倾斜、宽度等）来查找字体。对每个字体都有非常全面的展示，进入字体详情页可以看到不同字号下的长文本排版效果，视觉感受直观。二、Font Squirrel网站直达： https://www.fontsquirrel.com/Font Squirrel 自称“免费字体乌托邦”，也的确担得起这个名号。网站收录的都是免费可商用的字体，类型全面且质量也非常不错。进入详情页后可以看到字体的详细信息、风格介绍和设计应用展示，字体下载速度很快。使用技巧：网站有非常细致的字体分类，可以通过风格、特征、时代以及应用场景快速查找。还有一个字体识别工具，如果你有想找的英文字体但不知道名字，可以上传图片进行识别，网站会给出字体名称并推荐类似的字体。三、DaFont网址直达： https://www.dafont.com/DaFont 是一个非常老牌且强大的英文字体网站，经典的红白界面想必做设计的小伙伴都非常熟悉了。目前已经收录了 75000 多套字体，分类也做得很细致。网站收录的字体并非都是免费的，具体授权情况要看网站标签，100%免费及 OFL/GPL/公共领域的字体可以商用。使用技巧：在网页顶部点击“更多选项”进行筛选设置，可以只看可免费商用的字体。由于网站字体非常多样，因此也适合用来寻找字体设计的灵感参考。四、FontSpace网站直达： https://www.fontspace.com/commercial-fontsFontSpace 是一个专门收录免费英文字体的网站，分个人和商用两种，“免费商用”有一个独立版块。目前收录了 10 万多款字体，进入字体详情页后下拉可看到下载按钮。网站有一个专门的“风格”版块，里面按时代、风格、用途、假日等对字体进行非常详细的分类，可以帮助我们快速熟悉不同英文字体的特征及叫法。使用技巧：网站的“Collections(收集)”版块里面有不同的设计师做的字体收藏夹，比如手写字体、适合做 T 恤的字体、带爱心的字体、适合做 LOGO 的字体得等，可以帮我们快速查找同类字体。五、1001 Fonts网站直达： https://www.1001fonts.com/free-for-commercial-use-fonts.html1001 Fonts 也是一个分享免费字体的网站，目前收录了 5000+字体。字体列表右侧有版权标签，绿色的就是可以免费商用的字体。点击网站顶部的“字体类别”标签，可以调出字体风格分类标签，下载按钮在列表右侧及详情页内都有。Creative Fabrica！下载10w+高质量字体与矢量装饰素材的宝藏网站大家好，这里是你们聊设计的花生。阅读文章 > 六、Creative Fabrica网站直达： https://www.creativefabrica.com/freebies/free-fonts/ （用魔法速度更快）Creative Fabrica 之前为大家专门推荐过，它有一个专门的免费素材版块供用户下载使用，其中就有不少好看的字体。目前字体有 3000 多种，以手写书法类型为主，下载前要先注册登录。字体会不定时更换，看到喜欢的字体记得即时保存。官方为免费下载的字体提供 Basic POD 授权，即字体是可以商用的，但要遵守下面几点：免费下载的字体必须用作其他设计中的一部分，不能直接将字体本身出售获利；每次下载的商用许可证只适用于下载者本人，不能将下载的免费素材直接分享到其他类似的设计平台上，也不能直接分享给其他任何人。所以这个网站上的免费素材大家自己下载自己随便用，不能帮别人下载，也不要让别人帮忙下载。七、Abstract Fonts网站直达： https://www.abstractfonts.com/popularAbstract Fonts 是一个和 Fontspace 类似的网站，专门收录高质量的免费字体。免费分为个人和 100% 免费两种，在列表上方的标签标注。但没有专门的“免费商用” 筛选器或板块，所以下载前最好点击进入详情页确认是不是 100% 免费。网站有一个非常可爱的分类页面，为每个风格都设计了一个独特的图标，多看可以了解很多不同的字体风格。八、The Velvetyne Type Foundry (VTF)网站直达： https://velvetyne.fr/Velvetyne 是一家成立于 2010 年的法国的字体铸造厂，专注开源字体的开发，所以托管在上面的字体都是免费可商用的。目前网站已经有 60 多款免费字体，字体风格俏皮怪异，有较强的实验性。网站有一个“IN USE”版块，里面都是站内字体在实际设计场景中应用案例，可以作为设计灵感参考。九、Open Foundry网址直达： https://open-foundry.com/fontsOpen Foundry 是一个小众的开源字体的网站，站内字体都是免费可商用的。网站设计非常有个性，以全屏卡片的方式展示字体，可以直接在卡片上调节字号和间距、反色和更改大小写。点击字体名称进入详情页，可以浏览字体的应用展示和所有字符，下拉到最后文字介绍和下载链接，点击后直接下载。以上就是今天为大家推荐的 9 个下载免费可商用英文字体的宝藏网站，需要的小伙伴记得收藏起来 ~ 喜欢本期推荐的话请大家多多点赞支持，我会更有动力为大家推荐干货知识。有关于本文或者设计的问题可以在评论区提出 ，我会第一时间回复~推荐阅读：超实用！设计师必看的5个可变字体资源网站大家好~ 这里是被大暴雨吵得没睡好的花生，当然这并不耽误我和大家继续聊设计。阅读文章 > 告别商用焦虑！9 类设计师必备的高质量英文字体大家好，这里是和你们聊设计的花生~不知不觉已经是 2022 年底了，最近为大家整理了一篇字体合集，包含了我从今年 3 月份开始收集的 9 类高质量的英文字体，涵盖经典、优雅衬线、纤细手写、粗犷笔刷、力量感等不同风格。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/9-free-english-fonts-websites
代码 程序员 项目 很多年前，当我还是一名计算机专业的大四学生时，整天上网浏览各类招聘信息，想找到一个合适的程序员实习岗位。除了实习岗位外，我偶尔也会点进一些“高级工程师”的招聘帖里。现在回想起那些帖子，抛开让人眼花缭乱的技术名词，我印象最深的就是常出现在第一行的岗位年限要求：“本职位要求 工作经验 5 年以上”。作为一只一天班都没上过的小菜鸟，这些年限要求在我眼里简直长到夸张。不过，望洋兴叹之余，我有时也会在心中暗暗憧憬一下：“五年工作经验的程序员，那该多厉害啊？写代码对于他们来说，是不是像吃饭一样简单？”时光荏苒，一晃十几年过去了。如今回头一望，自己也成了一名有着 14 年工作经验的光荣打工人。在软件开发行业摸爬滚打这些年后，我发现很多事情，与我在大四时所想象的大不相同，比方说：随着经验增长，编程并不会变简单太多，“像吃饭一样简单”只出现在梦里给许多“大项目”写代码不光没意思，还很危险，远不如在 LeetCode 上做一道算法题有趣只从技术角度思考问题，成不了好程序员，有些东西远比技术更重要细想起来，这类关于编程的感触还有许多。我整理了其中 8 条，写成了这篇文章。如果其中某些观点引起了你的共鸣，我会非常高兴。更多编程干货：学编程后，我做了这10个有毒的在线免费设计神器！（下）上篇的5个神器大受欢迎，人气极高。阅读文章 > 一、写代码很简单，但写好代码很难编程曾经是一项门槛很高的专业技能。从前，一个普通人想学编程，最常见的做法就是通过教材和书本学习。不过大部分编程专业书，十分艰深晦涩，对于初学者来说很不友好。因此不少人在尝到编程的乐趣前，就早早地半途而废。但如今，学编程正在变得越来越容易。学习不再像以前那样，只能硬啃书本，而是多了许多新途径。观看教学视频、参加 Codecademy[1] 的交互式课程，甚至直接在 CodeCombat[2] 通过玩游戏来学编程，每个人都能找到适合自己的学习方式。“妈，我真没在玩游戏，我在学编程呢！你看屏幕右边！”此外，编程语言也在变得越来越易用。经典的 C 和 Java 不再是大多数初学者的首选，许多更简单、更易上手的动态类型语言如今大受欢迎，与之相关的 IDE 等工具也变得越来越完善。这些因素进一步降低了编程的学习门槛。总而言之，编程早已褪去了它的神秘面纱，从只有少数人才能掌握的神秘技能，变成了一门人人皆可学习的普通手艺。但更低的学习门槛，更友好的编程语言，并不意味着人人都能写出一手好代码。如果你已经工作，参与过一些项目，那我很想问你一个问题：”你日常接触的这些项目的代码质量如何？是好代码多，还是烂代码多？”不知你会怎么回答，我先来说说我的答案。1. 好代码还是很少2010 年，我跳槽到了一家总部位于北京五道口的大型互联网公司。加入这家公司前，我只在十人规模的小公司待过，因此，我对新公司在各方面都有着很高的期待，尤其是软件质量方面。当时，我心里想的大概是这样：“这可是支撑了有着千万用户量的产品的大项目，代码质量跟之前那些比，肯定有质的飞跃吧！”等到在新公司工作了一周后，我才发现自己实在是错得离谱。所谓“大”项目的代码质量同我的预期相去甚远。打开 IDE，数百行的函数和神秘的数字字面量比比皆是，开发任何一个小需求都难如登天。后来，在待过更多公司，接触了更多软件项目后，我总结出一个道理：不论公司多大、项目多牛，在实际工作中遇见好代码，仍然是小概率事件。2. 好代码有哪些要素？话说回来，到底怎样的代码才算是好代码？在这方面，Martin Fowler 有一句话常被大家引用：“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.”“任何傻瓜都能写出计算机能理解的代码。优秀程序员写人类能理解的代码。”我认为它可以作为评价好代码的原点：好代码一定是可读、易读，且容易理解的。写出好代码的第一原则，就是把人类读者放在第一位。除了可读性以外，评价代码好坏还有许多其他维度：贴合编程语言：是否使用了当前编程语言的推荐写法？语言特性和语法糖，使用程度是否恰到好处？易于修改：代码设计是否考虑了未来的需求变更，当变化发生时，代码是否容易随之修改？API 设计合理：API 设计是否合理，易于使用？好的 API 在简单场景下使用方便，在高级场景下又可以随需求扩展。性能够用：代码性能是否满足当前业务需求，同时为未来保留了一定提升空间？避免过度设计：代码是否存在过度设计、过早优化的毛病？…总而言之，对于任何层级的程序员来说，好代码都不是什么唾手可得的东西。要写出好代码，需要在许多维度上反复权衡、精心设计，最后再加以持续打磨。既然如此，假如想尽快掌握写代码这门手艺，有捷径吗？3. 写好代码的捷径在许多层面上，我认为编程和写作非常相似[3]。二者都是使用文本和符号来表达思想，只是方式略有不同。谈到写作，我想问一个关于作家的问题：“你听说过不读书的作家吗？你有没有听到过某位作家说，他从来不读其他人的作品，只读自己的东西？”。我猜答案应该是否定的吧。如果你去查阅相关资料，你会发现许多职业作家的日常生活，就是阅读和写作两件事在不断循环。他们每天会花大量时间阅读各类文字，然后再写作。同样是“文字工作者”，程序员们就很少重视阅读。但要想快速提升编程能力，阅读正是不可或缺的重要一环。除了日常工作接触到的项目以外，我们应该更多地阅读那些经典软件项目，从中学习 API 设计、模块架构和代码编写的技巧。不光代码和技术文档，最好再定期读一些计算机方面的专业书，保持阅读书籍的习惯。在这方面，我认为 Jeff Atwood 在 15 年前写的文章 "Programmers Don‘t Read Books -- But You Should（都说程序员不读书——但你应该读）"[4]，如今读来仍不过时。提升编程能力的捷径，就藏在“阅读 编程”这个无尽循环里。“一个好的程序员应该做什么？”二、编程的精髓是“创造”在程序员的日常工作中，有很多事情会让人充满成就感，甚至情不自禁地感叹“编程真美好”。比方说，修复了一个极难定位的 Bug，用新算法将代码性能提升了一倍，等等。但在所有的这类事情当中，没有任何一件，能和“亲手创造出一件东西”相比。当你在编程时，创造新事物的机会实际上随处可见。因为并非只有发布一个新软件，才称得上是“创造”。写一个可复用的工具函数、设计一套清晰的数据模型，全都可以归入“创造”的范畴。身为程序员，保持对“创造”的热情至关重要。因为它可以帮我们：更高效地学习：学习一门新技术，最高效的方式就是用它开发一个真实项目，在创造的过程中学习，效果最好。有机会邂逅了不起的东西： 许多改变世界的开源软件，最初都是作者纯粹出于兴趣所创造，比如 Linus Torvalds 和 Linux，Guido van Rossum 和 Python。1989 年的圣诞假期，荷兰人 Guido van Rossum 敲下了 Python 语言的最初几行代码，Python 最初仅被期望作为 ABC 语言的继承者，但后来“吞噬”了全世界虽然“创造”好处多多，程序员们也有大把机会去做，但许多人常常缺少一种身为“创造者”的觉悟。就像那个广为流传的小故事所说：一位哲学家询问正在砌砖的工人，有人清楚地知道自己是在建造一座大教堂，有人却认为自己只是在砌砖。很多程序员正是“只见砖块，不见教堂”。将自己定位成创造者后，看待事物的方式就会发生天翻地覆的变化。举个例子，同样是给 API 增加报错提示文字，创造者们就能跳出“快速完成需求就好”的思维陷阱，向前一步，追问自己一些更重要的问题：“我想为用户创造什么样的产品体验？怎样的报错文字，更能帮助我达成该目标？”就像任何一个有用的编程模式一样，“创造者思维”也能成为你的职业生涯的一道巨大推进力。因此，现在就试着问自己一个问题吧——“我的下一份创造会是什么？”三、打造高效试错的环境至关重要我曾参与开发过一个互联网产品，它设计精美，功能丰富，每天都有大量用户使用。但就是这么一个从市场角度看颇为成功的产品，工程质量却非常糟糕。如果你打开它的后端项目，把所有目录翻个底朝天，都找不到任何一行单元测试代码，其他自动化测试流程也是无从谈起。而业务逻辑偏偏又十分复杂，最后，项目代码间的意料耦合多如牛毛，开发一个新特性，很容易把旧功能给搞挂。“在忙啥呢？” “试着修复我之前修一个问题时搞出来的问题，那问题是我之前解决另一个问题搞出来的，而那个问题又是我……”因此，项目每次发布时，开发和产品同学全都得严阵以待，氛围十分紧张。整个发布过程也很刺激，紧急回滚时有发生。一个人在这样的环境中工作，技术成长抛开不谈，心理素质肯定能得到极大锻炼。编程原本是一件充满乐趣的工作，但为这样的项目编程，乐趣根本无从谈起。究竟是什么夺走了编程的乐趣？1. 理想的编程体验“刷题”LeetCode[5] 是一个著名的编程学习网站，上面提供了许多覆盖各个难度的编程题，大部分与算法相关。用户可以选择自己感兴趣的题目，直接在浏览器上编写代码（支持十几种编程语言）并执行。如果通过了全部的测试用例，则算作解答成功。在 LeetCode 上做题在 LeetCode 刷题很像在玩游戏，富有挑战性，同时也很有趣。整个做题过程，实际完美展现了一种理想化的编程体验：关注点分离：每道题目都是一个独立个体，同一时间内，开发者可以完全沉浸在一道题目中；快速获得精准反馈：开发者每次调整代码后，能通过自动化测试快速获得结果反馈；零成本试错：写出的代码语法有错误、逻辑有问题，没有任何不良后果，心理负担小。不过，屏幕前的你很可能觉得我在说些废话。“不然呢？解算法题、写小脚本，不就是这样的体验吗？有啥特别值得说的？”你很可能会继续补充道，“你知道我们公司的项目有多复杂吗？规模超大，模块巨多，你懂我意思吗？每天服务 万人，光数据库就好几套，消息队列都有三种，开发起来当然要麻烦一点咯！”确实，全世界的软件千差万别，开发起来不可能都像在 LeetCode 上刷题一样轻松愉快。但这并不意味着，我们不应该努力改善自己身处的编程环境，哪怕只有一点点。要通过改善环境来提升编程体验，可用的理念和工具包括：模块化思想：妥善设计项目中的每一个模块，降低耦合，提升正交性设计原则：微观层面上，应用那些经典的设计原则和模式，比如“SOLID”原则自动化测试：编写规范的单元测试，必要时使用 Mock 技术，用自动化测试覆盖业务关键路径缩短反馈回路：切换编译速度更快的工具，优化单测性能，竭尽全力缩短从“改完代码”到“获得反馈”的等待时间微服务架构：必要时，将大单体拆分为多个职责各异的微服务，分散复杂度……关注编程环境，刻意创造出允许高效试错的“代码乐园”，让工作像刷题一样轻松愉快。是经验丰富的程序员能为自身团队做出的最好贡献之一。四、避开代码完美主义陷阱在代码质量上精益求精是好事，但也要注意别掉进完美主义的陷阱。因为编程不是艺术创作，不鼓励人们无限度地追求极致。作家大可花上数年打磨一本传世之作，但程序员在代码上钻牛角尖就很有问题。世间没有完美的代码。大多数时候，你的代码只要能满足当前需求，又为未来扩展留了一些空间就够了。有那么几次，我在简历上看到候选人给自己打着“代码强迫症”标签。隔着屏幕，我虽能感受到 TA 对代码质量的那份重视，但在我心底，其实更期望 TA 早已将完美主义陷阱远远甩在了后头。五、技术很重要，但“人”也许更重要在软件开发领域，“单一职责原则”（全称为 Single responsibility principle，后简称为 SRP）是一条非常著名的设计原则。它的定义很简单，一句话就可以概括：“每个软件模块应该只有一个被修改的理由”。单一职责原则：能做到，并不意味着你就该这么做要掌握 SRP 原则，关键在于搞清楚“被修改的理由”为何物。很显然，程序是没有生命的，它自身不能也不需要主动去改变。任何修改程序的理由，都来自与之相关的人，人是导致修改的“罪魁祸首”。举个简单的例子。看看下面这两个类，其中哪一个违反了 SRP 原则？一个字典数据类，支持两类操作：存数据、取数据；一个员工资料类，支持两类操作：更新个人信息、渲染一张用户资料卡片图。在大多数人眼里，第一个例子没问题，但第二个例子却明显违反了 SRP 原则。要得出该结论，好像无需任何严格的分析和证明，运用一丁点直觉即可。但假如做一些正经分析，第二个例子的可疑之处，在于能为其轻松找出两个不同的修改理由：管理员认为资料中的“个人电话”字段不能有非法号码，需增加简单的校验逻辑某员工认为资料卡片图上的“名字”部分太小，希望加大字体”It is people who request changes. And you don’t want to confuse those people, or yourself, by mixing together the code that many different people care about for different reasons.” ——“The Single Responsibility Principle”“是人在要求软件变更。你绝不想把那些不同人出于不同原因所关心的代码混在一起，这样只会把他们和你自己搞糊涂。”——“单一职责原则”理解 SRP 原则的关键，在于先理解人以及人在软件开发中所扮演的角色。再举一个例子。微服务架构是近些年很火的一个技术话题。但许多人在讨论它时，往往只关注技术本身，却忽视了微服务架构与人之间的关系。将微服务架构风格与其他东西区分开的关键，在于将大单体拆分为独立的微服务后，不同模块间的边界可以变得更清晰。跟数百人的团队一同维护着一个大单体比起来，许多小组织各自维护着独立的微服务，明显拥有更高的运作效率。如果缺少了特定的组织规模（也就是“人”）作为前提，空谈微服务的各种技术优势和那些花活，纯属本末倒置。技术当然很重要。身为技术人员，那一张张瑰丽的架构图和独具匠心的代码细节，天然吸引着我们的注意力。但是，也请千万不要对软件开发里的另一个重要因素“人”视而不见。必要时，转换一下看事情的角度（从“技术”转向“人”），那样对你大有裨益。六、求知若渴是好事，但也要注意方法如今人人都在说“终身学习”，而程序员是一个尤其需要终身学习的职业。因为计算机技术的迭代更新非常快，某个三年前流行的框架或编程语言，很可能一个月前已经过时。一分钟之内会发生什么事情？Netflix 观看时间增长 70,000 小时；Snapchat 上有三百万视频被观看；Google 新增两百四十万次搜索；一个 JS 新框架被发明（这条不是真的 ）要在工作中表现得游刃有余，程序员们需要学习的东西非常多，涵盖各个层面。拿我比较熟悉的后端领域举例，一位合格的后端工程师至少需要掌握以下这些：一种或多种后端编程语言 / MySQL 等关系数据库 / Redis 等常见存储组件 / 设计模式 / 用户体验 / 软件工程 / 编译原理 / 操作系统 / 网络基础 / 分布式系统 / …虽然要学很多，但据我观察，大部分程序员其实都挺爱学习（至少不排斥），因此心态不是问题。不过有的时候，光有“求知若渴”的心态并不够，学习时，我们尤其需要关注“性价比”。1. 关注学习性价比下面这张图，展示了学习成效和投入之间的关系。学习成效与投入关系图，横轴为学习投入，纵轴为学习成效从图中可以看到，在学习的初级阶段，投入较少时，所获得成效增长飞快。但当成效超过某个阈值后，之后再想继续提升，所需要的学习投入就会呈指数级增长。正因如此，我建议你在学习任何一项新事物时，先在脑海中想清楚一个问题：“我应该在上图中的哪个位置停下来？”，而不是闷头猛学。知识的海洋浩瀚无边，有些东西需要我们成年累月的持续学习，不断精进。也有些东西，蜻蜓点水般学到一些皮毛已绰绰有余。准确判断并分配自己有限的学习精力，甚至比努力学习本身更重要。2. 挑选合适的学习资料有了学习目标后，下一步就是寻找合适的学习资料。在这方面，我想分享一次自己的失败经历。有段时间，我突然对产品交互设计产生了浓厚的兴趣，认为自己应该在这方面有所精进。于是，我精心挑选了一本领域内非常经典的专业书：《About Face 4: 交互设计精髓》[6]，将其买回家中，满怀信心地认为自己的交互设计能力可以迅速获得提升。但事与愿违，当我捧着那本经典著作时，发现自己连第一章都无法顺利读完——那句老话说的没错：“隔行如隔山”。从这次失败中，我总结出了一点经验。那就是学习某项新东西时，我们最好挑选那些更易读，更适合“门外汉”的学习资料，不要“眼睛大，嘴巴小”，只知道奔着最经典、最权威的资料而去。回顾之前的经历，我觉得以下几本书非常适合门外汉学习使用，性价比极高：《写给大家看的设计书》[7]：设计相关《点石成金》[8]：Web 用户体验相关《鸟哥的 Linux 私房菜》[9]：Linux 系统相关也许每个人的内心，都想成为一个博学的人，无所不知，无所不晓。但可供分配的时间的精力总是有限，我们不能，也不需要在所有领域都成为专家。七、越早开始写单元测试越好我非常非常喜欢单元测试，我认为写单测这件事，对我的编程生涯影响极大。夸张点说，如果以“开始写单元测试”作为分界线，把我的职业生涯分割成两段，后面那段远比前面那段精彩得多。写单测的好处很多，比如单测可以驱动你改善代码的设计、可以作为代码的一种文档，等等。此外，完善的单元测试还是构建前面提到的“高效犯错的环境”的关键。我已经写过几篇关于单测的文章，比如《有关单元测试的 5 个建议》[10]、《游戏“蔚蓝山”教我的编程道理》[11]。所以在这儿，我不打算再重复一遍。只说一句：如果到目前为止，你从未试过写单元测试，或从没重视过测试，我建议你从明天就开始写起来。一般情况下我不测试我的代码，但假如测的话，我在生产环境测八、程序员最大的敌人是什么？在大多数程序员段子里，产品经理经常作为反派角色出现。他们口中的项目需求总是变个不停，一天冒出一个新想法，搞得程序员苦不堪言。客户每天都在不停修改需求，所以，我们决定在下次发布前，把这些需求“冻结”起来在这些段子的烘托下，不断修改需求的产品经理，仿佛真成了程序员们最大的仇敌。似乎只要产品不乱改需求，大家的工作环境马上就会成为乌托邦。虽然偶尔吐槽一两句产品经理很有意思，但我还是想一本正经的说一句：产品经理不是敌人。因为从某种角度来说，软件生来就是准备被修改的（不然你猜，软件为什么叫“软”件？）。这样看来，开发软件和修建房子完全不同。因为没人会在建好一栋大楼后说：“让我们把它推倒重建一遍吧！一样的楼，但是用的钢筋和水泥比之前少 30%！”所以，产品经理以及不稳定的需求不是程序员的敌人。并且，能否写出易于修改、适配变化的代码，是区分普通程序员和优秀程序员的重要标准之一。那么，程序员们最大的敌人又是什么呢？1. 复杂度是最大的敌人就像《代码大全 2》中所说：软件开发的核心问题是管理复杂度。失控的复杂度就是程序员最大的敌人。来看看那些导致项目复杂度不断增长的要素：不断增加的新功能： 更多的功能等于更多的代码，更多的代码通常意味着更高的复杂度对高可用的需求： 为了实现高可用，消息队列等额外的技术组件和代码被引入对高性能的需求： 为了提升性能，缓存和相关模块代码被引入，部分模块被拆分后，换成高性能语言重写一再被推迟的重构：因项目排期过于紧张，迫在眉睫的重构被一再推迟，技术债越积越多忽视自动化测试： 没人写单元测试，也没人关心测试…终有一天，当项目的复杂度增长到一定程度后，空中会传来一声巨响。“咚！”，一个大家不愿改、不敢改的“大坑”凭空出现在了所有人的 IDE 中。猜猜看，究竟是谁挖下了这个坑？那些在降低复杂度上投入时间的团队，所负责的软件项目更容易成功2. 减缓复杂度增长的过程虽然复杂度总是会不可避免地持续增长，但有许多实践可以减缓该过程。如果每个人都能做到以下这些事，复杂度就有可能被长期控制在合理范围内：精通当前编程语言与工具，写整洁的代码使用合适的设计模式和编程模式对重复代码零容忍，抽象库和框架适当运用整洁架构、领域驱动设计思想编写详尽的文档和注释编写规范有效的单元测试分离那些变动的与不变的…要求看上去很多，但总结起来，核心其实就是一句话：写更好的代码。写在最后2020 年，我在小组内做了一个分享，当时的 PPT 标题是《编程十年后的十个感触》。将资料分享在公司内网后，有位同事看到，评论说光看 PPT 不过瘾，希望我能将其扩展成一篇文章，我回复说没问题。如今 3 年过去了，我总算是兑现了自己的承诺。当年准备分享材料时，我做完整个 PPT，最后一页实在不知道该放些啥。于是灵机一动，搞了个纯白色的背景，中间打了一行黑体大字：“十年很短，编程很难”。如今，第二个十年也已快行至中途，而这句话的后半部分好像对我仍然适用——长进不大，继续加油 。原文链接：https://www.piglei.com/articles/programming-is-still-hard-after-14-years/欢迎关注作者微信公众号：「piglei」本篇来源：优设网原文地址：https://www.uisdc.com/8-programming-experience
用户 新用户 产品 编者按：这篇文章出自资深 B 端 UI/UX 设计师 Taras Bakusevych ，他对于产品、视觉、体验设计上，都有深入的钻研，而这些钻研是实实在在的项目喂出来的实战经验。他之前的每篇文章都值得一读这10个设计原则，是确保金融类产品体验优秀的核心要义财务和金融相关的应用是一个相对专业的分支，在这个领域当中创造体验优异的设计并不是一件简单的事情。阅读文章 > 在资深设计师眼中，这 10 个设计原则更值得学习和了解编者按：在做设计的时候，设计师到底要遵循哪些设计原则？阅读文章 > 以下是今天的正文：出色的新用户引导，能够缩短用户了解产品价值的路径，能够帮助用户迅速抵达令人惊艳的细节，获得成就感，完成任务，和产品产生情感连接。1、第一印象至关重要新用户引导通常是产品当中用户历程的起点，用户和产品的初次交互将会塑造产品对于用户的第一印象，如果做的足够好，则能够带来较强的用户忠诚度，将用户变成长期客户和产品拥护者。在整个用户产品周期当中，新用户引导是起点，然后是用户使用和用户留存的阶段。新用户引导阶段：初次使用产品，成为产品的用户。产品使用阶段：用户能够熟练使用产品和功能，能够实现预期目标，获得预期收益。用户留存阶段：用户不断提升参与度，开始使用产品所提供的更多功能，成为专家级用户和产品的拥簇。2、新用户引导并不是简单的产品介绍新用户引导时常和产品介绍界面混淆，很多产品在新用户引导界面介绍产品的功能和优势。那么，在你设计新用户引导界面的时候，需要问问自己这几个问题：这些界面是帮助用户获得他们想要的东西，还是在他们前进道路上带来不便的？我们的界面是在介绍显而易见的事情吗？这些信息在此时此刻是否可操作？是否有用？要让用户在打开界面第一屏的时候就可以交互和使用。产品优势介绍应该是在 App Store 或者 Google Play 的 APP 预览页上展示的，那是用户试图了解产品的地方，也是更加合理的地方。3、最好的新用户引导是沉浸式的很多产品功能其实很简单，并不一定真的需要开头单独设置引导页。新用户引导是否需要，取决于多个因素：用户的目标和需求业务需求、行业标准、法规要求产品所需要的经验和熟练程度产品的熟悉度和开创性程度有很多产品是简单到开箱即用的，而还有一些产品则需要经过漫长的引导培训，用户才能正常使用、达成目标，以避免出现错误付出高昂的代价。4、新用户引导流程可以由多个元素组成像注册、订阅服务、功能推荐、定制服务等，都可以应用到新用户引导当中。新用户引导的重要性，和你产品的收入模式有很大的关联。比如付费订阅类的产品，新用户初次上手的体验之后产生的评估，将会极大地影响后续的订阅付费意愿。关于这一点，NNGroup 有过非常专业的分析：https://www.nngroup.com/articles/mobile-app-onboarding/5、介绍、小贴士和操作提示APP 内的教程和介绍，主要是教育用户使用某些功能，并且引导用户在 APP 内抵达特定的页面和功能。而这种引导的呈现形式也不尽相同，比如卡片式说明、全自动产品导览、视频教程以及工具提示。好的产品设计应该是不言自明的，所以设计的核心目标是设计清晰、独立不言自明的界面，而不是指令式的引导。避免设计冗长的指令引导和教程提供简短清晰的、和上下文环境高度相关、可操作的引导指令，并且用户可以禁用这些引导指令。操作提示——关于特定操作、交互的请求或者建议，比如引导用户给 APP 评分，与朋友分享，或者启用消息推送。这些操作提示如果放置在新用户引导阶段，实在是太早了，很容易让用户感到抵触，导致转化率降低。避免过早提出不当请求为用户提供小贴士引导的时候，尽量给出符合上下文提示且有明显好处的，或者告知用户当前操作不当可能会导致哪些不好的后果6、新用户引导时间越短越好绝大多数的设计师可能都都没意识到这个问题。其实这个设计背后的逻辑很简单，就是「成本收益」原则 —— 只有当收益等于或者大于成本的时候，用户才会跟进或者进行活动。流媒体音乐 APP 的新用户引导流程通常是 5-10 步，银行金融相关的则 20到25步不等（因为许多金融服务平台有严格的监管和合规的要求）。所以，在设计的时候建议：在允许的范畴内，尽量让你的新用户引导流程比竞品更短，让用户尽可能少点几次进入正式界面而具有独特优势和功能的产品，可能会因为缺少竞品或者后续大量奖励，需要更苛刻的注册和引导流程每个问题和引导功能需要有充分的理由7、增量引导流程新用户引导可以被切分为若干个不同阶段，这样用户可以先访问产品特定功能的引导，而其他的引导流程，则在用户触发的时候再进行，这种设计是提升用户引导流程有效度的好办法。这种增量引导方式有很多好处：减少用户的认知负荷，让用户分阶段地完成任务并获得奖励回馈确保用户可以分阶段完成任务，并且每次都能获得和当前状况相匹配的引导信息比如 Wise 的客户端就使用增量引导流程，仅在用户需要的时候提供引导，快速注册之后，用户就能进入程序，访问页面，仅在用户需要开通帐号和服务的时候，再次提供针对性的引导。8、保持透明，呈现进度好的设计理应在对的时机给予对应的反馈，始终让用户了解正在发生的事情——可用性启发式：系统状态可见性对于新用户引导流程，如果缺乏明确的目标，用户不知道什么时候会结束，则可能会产生强烈的焦虑感和失控感。在下面的案例当中，我们可以看到没有进度条指示和有明显进度条指示的差异，有着更清晰进度指示的 Moka 比 Revolut 更加透明和友好。对于较长引导流程，可视化的进度条和进度指示器能够更好帮助用户了解当前状态。努力设计好文案贴合用户期望，并且鼓励用户9、了解阻碍用户的关键点在 APP 中很多任务可能会让用户感到压力，如果这些任务是必须执行的，那么需要通过特殊的设计来缓解压力和阻碍。以下是阻碍用户抵触引导的主要原因：潜在的安全和隐私的问题超长的表单和漫长的流程过于激进的广告和付费要求在用户从应用中获得正反馈之前就敦促用户付费缺乏逻辑和意料之外的问题强制要求创建帐号强制用户做出决定缺乏本土化的设计10、了解用户并优化用户体验用户初次使用产品的用户体验，是一个很好的契机，可以更加深入的了解的用户的偏好和目标，并且借此调整产品的体验。通过询问用户喜欢哪些艺术家，YouTube Music 可以为新用户创建一个独特的、负荷偏好的独特播放列表。尽快了解用户的偏好，对于提升内容服务和用户粘度至关重要。Duolingo 在新用户引导阶段，会先了解用户的学习目标，以及当前对于语言的掌握程度，在此基础上创建独特的学习路径。而 Duolingo 也证明了一件事情，就是用户自己设置的目标比系统设定的目标，有更高的达成率。11、全力强化品牌气质第一次和用户相遇，是展现独特品牌气质的好时机，你可以借助更好的品牌设计，让用户感知到品牌的独特之处。良好的品牌设计，结合游戏化设计和友好的吉祥物，能够帮助用户和产品产生情感连接。HeadSpace 就是一个典型的案例，和很多其他的 APP 不同，HeadSpace 并没有急于让用户注册，而是以一组可爱的动画开始，引导用户「吸气」和「呼气」，简单而可爱的互动引导着用户，给用户留下独特的第一印象。12、完善空状态在引导用户进入应用之后，有的应用可以直接使用，而有的应用则可能因为缺少内容而显得无趣。所以，针对空状态的设计是非常有必要的，借助设计让空状态勾勒出用户路径，结合新用户引导，让用户快速适应产品的功能。Mailchimp 就是这么做的，它借助一个简单的新用户任务清单，引导用户完成一个又一个任务。本篇来源：优设网原文地址：https://www.uisdc.com/user-onboarding-practices
用户 内容 商家 一个 SaaS 产品的后台是如何设计的？作为知识付费行业的头部 SaaS 服务商，从 2016 年诞生不到 7 年时间，小鹅通注册客户数已经超过 160 万，终端访问用户人数超过 7.8 亿，毫无疑问成为了国内知识付费规模最大的 SaaS 产品。为什么拆解小鹅通的后台？这是因为后台设计往往被多数产品、开发甚至老板忽略，他们甚至认为后台不需要设计，更不需要考虑用户体验，能把功能实现就可以交付。但我的观点恰巧相反，我认为一个 SaaS 产品设计最大的挑战和关键正是后台。它决定了运营者的工作效率和操作体验，即便你的功能再强大，如果用户不会用、不愿意使用，那么用户也不会续费，而续费，正如《SaaS 创业路线图》作者吴昊在他书中的观点——SaaS的本质，就是续费。设计大侦探的第一个B端产品拆解，选择了工作量最大、最繁杂的后台，阅读时间长，非常乏味，但如果你认真啃完，你对SaaS产品、后台设计、B端设计不会再陌生。都说良药苦口，这碗药，廖尔摩斯先干为敬。往期拆解：万字拆解！12306产品设计全方位深度解析有人说它是全世界最牛逼的 APP，因为它的算法难度和春运期间访问量几乎是全球之最；但有人说它是全世界最垃圾的 APP，因为在使用这个产品的过程中，遇见很多奇葩、愤怒的体验。阅读文章 > 一、导读1. 内容结构小鹅通的后台拆解包含四个部分，分别为导读、产品画像、设计拆解和总结，内容篇幅超过 4 万字，阅读时间较长，所以拆分为 4 篇文章发布，建议收藏阅读。2. 适读人群第一类，产品经理/UI/交互设计师，通过对小鹅通后台产品的深度拆解，跳出执行层，培养后台设计的全局观，从功能价值、应用场景、业务流程和用户体验多维度去学习和思考一个头部 SaaS 产品的后台如何设计。第二类，SaaS 产品及知识付费从业者，获取一份专业、完整、有深度价值的 SaaS 竞品设计参考。3. 分析模型第一，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > 第二，尼尔森十大原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则，任何产品的设计，都可以通过这十个原则进行指导设计，这个原则主要用于诊断后台设计的用户体验。用超多案例，帮你掌握尼尔森十大可用性原则尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。阅读文章 > 第三，其他设计基础理论，包括费茨定律、格式塔原则、席克定律等，主要用于判断后台设计的易用性。4. 拆解步骤SaaS 产品的后台的设计不仅复杂，而且很多功能如果不亲自体验根本没法理解，所以针对小鹅通后台的拆解，我分为以下三个步骤进行第一，亲自上手实操体验操作。对每一个功能版块进行了全面的实操体验，弄清楚了才开始拆解，绝非走马观花。第二，结合官方帮助文档创作。在体验小鹅通产品的时候，有很多功能必须结合帮助文档才能理解，甚至由于权限和内容问题，部分功能没法体验，只能靠官网介绍来理解。针对每一个功能，严格按照「功能介绍-功能价值-使用场景-页面内容-核心功能-操作流程」的结构去描述，旨在让产品设计师看懂这个功能设计的价值和细节。第三，深入思考产品设计细节。在拆解完每一个功能，我都会加入自己的思考，主要分为细节侦查（值得我们学习的细节）、迭代建议（个人认为可以优化的地方）、设计思考（某个功能带给我的启发）、体验陷阱（用户体验糟糕地方）和体验小结（针对某个功能版块进行全面总结）。5. 阅读建议由于内容篇幅太长，强烈建议你可以申请小鹅通免费试用账号一边阅读一边体验，这样对整个后台的设计才更深有体会。二、产品画像1. 产品简介小鹅通是知识产品与用户服务的数字化工具，包含知识店铺、企业直播、企业培训、企微助手等多款产品，可以为有线上经营、商业变现、私域运营、用户服务等需求的企业，提供一站式技术服务，助力企业完成数字化升级。根据官方数据显示，截止到 2023 年 2 月，小鹅通注册客户数已经超过 160 万，终端访问用户人数超过 7.8 亿，是目前国内知识付费客户数量最多、规模最大的 SaaS 产品。2. 用户角色用户角色是指使用操作小鹅通后台的用户，主要分为运营者和店铺销售。① 运营者店铺的运营者主要负责店铺装修、商品管理、用户运营、数据分析、活动策划、拉新引流等工作内容，是小鹅通后台主要使用的用户群体。② 店铺销售店铺销售会通过企业微信和 CRM 工具使用小鹅通，不过他们主要通过企业微信的小鹅通应用进行工作，很少涉及后台操作。3. 信息结构从信息结构看，小鹅通后台主要包括店铺、圈子、直播、内容、商品、营销、交易、用户、CRM、企微、数据、应用、设置和服务 14 大版块（感谢探友@miki 对小鹅通后台信息结构的梳理）。三、设计拆解小鹅通的后台非常庞大，包括了店铺、圈子、直播、内容、商品、营销、交易、用户等 14 大版块，其中每一个版块又包含若干功能，体验起来非常繁杂，很容易陷入焦虑感。所以我按照一个知识店铺从 0 到 1 装修、添加内容、店铺推广和运营的步骤把小鹅通的后台拆分为 8 个服务，然后再对每个版块的内容进行详细拆解。1. 初始设置当我从官网开通小鹅通的知识店铺以后，进入到管理后台，面对如此繁杂的功能，我想做的第一件事，就是对我的店铺进行基础设置，我得让用户知道这个店铺叫什么名字。① 店铺设置「店铺设置」为商家提供了店铺的基本信息设置，比如店铺信息、品牌形象、用户账号设置等。「店铺信息」提供店铺名称、店铺管理员和主营类目的设置，非常基础。「用户账号设置」 提供在使用系统过程中的各种登录偏好设置，比如登录设备限制，可自定义学员使用同一账号在同一时间不同浏览器上同时登陆的情况「引导设置」提供了引导用户关注公众号、加入社群、收藏店铺、添加客服和添加手机号等功能，对新用户的首次访问至关重要。「功能配置」支持用户对商品销量、播放量/浏览量、评论审核、严禁词、视频播放器、商品评价、买家申请售后等功能进行设置，可以看出系统非常完整和灵活。迭代建议用户的短期记忆一般不会超过 5 秒，所以在体验「设置」这个栏目的时候，我就发现小鹅通的功能太过繁杂，这对新手商家的入门有很高的学习成本。这个栏目的内容其实可以拆分为基础设置、高级设置这样的阶梯式内容，有助于缓解新手用户的焦虑。② 员工管理「员工管理」是为商家提供新建员工、运营角色管理、员工权限设置的功能，这个栏目主要帮助商家管理自己的运营团队。③ 角色管理「角色管理」包含了系统默认的多个角色，比如高级管理员、普通管理员、财务、老师、课程顾问、教务专员、销售员等，并且可以对每个角色进行权限设置，另外系统也支持商家新增自定义角色，满足商家各种运营需求。④ 操作日志「操作日志」记录了整个系统管理员的登录和操作内容记录，日志系统作为一个后台系统必不可少的模块，它可以记录下系统所产生的所有行为，这有助于商家对系统运行监管，并且可实时监控员工在系统中的敏感操作，加强员工培训和管理。⑤ 消息推送「消息推送」是商家建立外部触发最好的方式，这个版块主要为商家提供各种场景的消息推送设置，小鹅通支持服务号代发、短信通知和 APP 推送通知三种类型。⑥ 体验小结在对「设置」模块的实操体验中，感受到小鹅通的功能非常强大，甚至功能多得有点让人透不过气，这对新手商家来说，会产生很多的焦虑和压力，我迫切需要一份最基础、最简洁的新手引导指南。这也突然让我想起了当我申请小鹅通体验账号时，客服专员向我多次提及给我做新手操作培训，但我都婉拒了，也许对于一个头部 SaaS 产品来说，客服专员的培训是客户体验过程中必不可少的一个环节，但是我认为好的设计，其实不需要太多的学习成本。2. 添加内容当我把店铺的基础信息设置好以后，接下来，就需要为我的知识店铺准备上架的内容了。我找到了「内容」这个模块，发现小鹅通支持的内容形式非常多，从视频、音频到图文专栏，把常见的内容形式都涵盖了。① 内容「内容」版块包含内容类型和互动工具两个部分，商家可以在「内容类型」选择自己要发布的形式发布内容，而「互动工具」则是帮助商家课程运营和学生管理的工具。内容类型小鹅通支持视频、音频、图文、电子书、AI 互动课、专栏、训练营和会员 7 种类型，几乎覆盖了常见的内容形式。1）视频「视频」是最常见的内容形式之一，商家可以把录制好的课程视频上传到这个栏目，就可以开始向学员销售。新建视频「视频」包含基本信息、课程内容、所属组合课、商品信息和状态设置五个部分。在「基本信息」，商家需要填入商品名称等基本信息；在「课程内容」，管理员可对视频的播放进行设置（比如课程未学完禁止拖动进度条和倍速播放等），还可以对内容设置保护（禁止文字防复制和开启防录屏跑马灯）。「所属组合课」是提供商品和其他内容（专栏、会员和训练营）关联，比如新添加的商品属于某个付费专栏，那么就可以关联，提升效率。在「商品信息」，可以设置商品的售卖方式，支持免费、付费、加密和指定学员。针对付费视频，还可以支持片段试看，提升付费转化。「状态设置」是指在添加完商品后，商家可选择立即上架、定时上架或暂不上架，比如商家在准备某个促销活动的时候，可以提前编辑商品，设置定时发布即可。视频管理「视频」添加成功后，在「视频」栏目页，可以查看商品的详情，对商品进行编辑，分享、下架、复制和删除等。「分享」是指商家可以把商品的链接、二维码等信息直接复制分享给好友，同时也起到了预览的作用，这是一个公用的组件，在其他商品和版块同样适用。视频详情页「视频详情页」主要分为课程设置、运营设置、学员列表和数据分析四块内容。「课程设置」就是对课程的相关信息进行设置，相当于对内容进行二次编辑。「运营设置」从四个解为一个通用的表单；「CRM分配」是指可以把浏览课程的学员自动分配给企业的CRM销售人员；「私域引流」是指可以引导用户扫码加群，提高课程服务质量和商家对学员的运营能力。在「学员列表」，可以查看当前购买商品的所有学员信息，包括购买时间、学习进度等信息，系统也支持商家手动添加可学习课程的学员。在「数据分析」栏目，可以查看商品的「学习效果」和「交易数据」，比如商品的订阅人数、学习人数、完课率、学习趋势图等，通过这个栏目，可以帮助商家对用户的学习进行深入的分析，提升运营效率。设计思考在初次添加店铺内容的时候，对很多功能板块都不熟悉，比如 CRM 分配、超级会员等，虽然能感受到小鹅通系统的强大，但对于刚入手的商家，则会产生很深的焦虑，不知道这些功能如何设置和使用，也无法感受到这些功能对店铺运营的帮助。音频「音频」也是一种常见的内容形式，可以设计讲书、广播等产品，用户可以在地铁、公交等场景收听。「音频」的新建流程、商品管理功能和「视频」相似，我们不再赘述。图文「图文」也是一种常见的内容形式，可以为学员提供付费阅读等类型产品，「图文」的新建流程、商品管理功能和「视频」相似，我们不再赘述。迭代建议付费阅读其实是知识创作者非常喜欢的方式，小鹅通虽然设计了这个功能，但前端的界面设计并没有根据图文内容传播的特点设计，所以用户体验并不理想，显得非常鸡肋。电子书「电子书」对于出版社等用户群体，是一个刚需功能。在上传电子书文件以后，系统可以自动解析书籍章节，轻松完成电子书在线管理和售卖。其次在店铺前端，用户可在手机端阅读，支持区域触摸翻页、章节试读、划线、书签、更换背景等功能，阅读体验非常友好。「电子书」的新建流程、商品管理功能和「视频」相似，我们不再赘述。AI 互动课随着近两年 AI 技术的发展，小鹅通也加入了 AI 互动课的内容形式。商家可以利用 AI 互动形式的课程内容，搭建具有沉浸式场景的课程学习形式，实现个性化、趣味性、强互动的授课形式，不过搭建成本相对较高，更适合于有特定需求的客户。新建流程「AI互动课」的新建流程分为三个步骤，分别是填写基本信息、制作课程内容和填写售卖信息。在「基本信息」，商家需要输入课程名称和详情页等信息。进入「课程内容」以后，左侧提供了内容组件（文字、图片、音频和视频）、题目组件（单选题、多选题、不定项、判断题和填空题）和其他组件（章节标题和附件），商家可以根据自己的需求加入组件进行设计。商家在填写售卖信息以后，就可以进行上架销售。专栏专栏「专栏」可以将多个单品课程打包成系列课销售，比如常见的付费专栏、连载小说、有声读物等。「专栏」建立后，进入详情页，可以在「目录管理」添加专栏商品，还可以对专栏的商品设置排序和设置试看。其他功能和「视频」相似，我们不再赘述。大专栏「大专栏」就是「专栏」的父级，可以将多个专栏进行打包，组合成专项学习专题，打造学员深度系统学习方案。训练营「训练营」相比「课程」，是一个动态的服务。商家根据某个学习主题，集中式、计划式、督学式地学习。「训练营」也是一种常见的引流手段，通过打卡、签到、学习，可以快速帮助商家进行传播拉新。新建训练营商家建立训练营以后，需要建立营期才能开始招生。营期的建立分为营期基础信息、营期课程和售卖信息三个步骤。在「营期基础信息」，需要设置开课信息，包括招生时间和开课时间；其次支持设置三种目录解锁模式，自由模式（无门槛自由学习）、闯关模式（完成任务才能继续学习）和日期解锁（每天只能学习一定数量的课程）。在「营期课程」，商家需要添加训练营的学习任务，可以加入店铺的课程内容，还可添加打卡、考试等助学工具，增强督学效果，提升用户活跃度。会员「会员」是商家可以打包特定商品内容（包括专栏和商品）进行销售，它的功能流程和「专栏」功能相似，在建立「会员」后，进入详情页的目录管理才能添加课程商品。这个功能可以帮助商家聚集一定量级的忠实粉丝，实现店铺的稳定收入。设计讨论不知道是不是语义的问题，我对「会员」这个功能有很多不理解，首先感觉和「专栏」很相似，其次和「超级会员」也有点傻傻分不清楚，所以在体验的过程中，花了很多时间去学习研究。体验小结从小鹅通支持的 7 种内容形式来看，它几乎覆盖了所有的知识付费内容，视频、音频、电子书、专栏，甚至还有 AI 互动课。这足以满足各种知识用户人群的内容要求，不管你是销售录播课、音频课还是文字专栏，小鹅通真正的实现了一分钟拥有自己的知识店铺。② 互动工具「互动工具」包含了打卡、考试、练习、作业本、题库、证书、表单、活动管理、随堂检测、测试活动和付费问答 11 种工具。打卡「打卡」是一个提升用户活跃度的运营工具，通过持续的打卡输出，不仅可以帮助学员养成一些比较好的行为习惯，还可以帮助商家提升用户付费转化。「打卡」分为日历打卡、作业打卡和闯关打卡三种形式。日历打卡「日历打卡」是以“天”为单位的打卡模式，学员需要每天在有效时段内提交打卡内容，比如每日英语学习打卡、早睡打卡等。a. 新建流程「日历打卡」的建立有两个步骤，分别是设置打卡信息和打卡介绍设置。在「设置打卡信息」，分为基本信息、打卡规则和其他设置三个内容。「基本信息」可以设置打卡的起止日期、打卡时段、提醒方式、每日打卡次数、可补打卡次数、参与条件和打卡规则等；「打卡规则」主要是设置用户打卡的内容类型和范本；「其他设置」可以帮助商家关联超级会员和指定商品文件。在「打卡介绍设置」步骤，需要添加打卡的封面图和详情页介绍，完成后打卡建立添加成功。细节侦查如果不是亲自新建一次「打卡」，你根本无法理解一个小小的「打卡」功能竟然会如此复杂，包含的场景和功能竟然会有这么多。b. 打卡详情页「打卡」建立以后，可以进入打卡的详情页，主要分为日记管理、任务管理、学员管理、分组管理、助教管理、激励设置、运营设置和数据分析 8 块内容。「日记管理」主要指用户在前端的日记打卡，老师可以根据学员的日记进行评论、置顶、加精和删除，还支持批量导出日记。「任务管理」是指给学员布置学习任务，帮助学员更好地学习。「学员管理」主要提供对打卡用户的管理，比如查看学生打卡详细资料和暂停打卡等。「分组管理」支持老师对打卡的学员进行分组，提高管理效率。「助教管理」支持老师添加助教，助教可以对学生打卡进行点评、删除和精选等操作。「激励设置」是指为了鼓励学生坚持打卡，老师可以设置证书、返学费和积分这样的形式来吸引学生参与（证书和积分我们在下面会单独讲解）。「返学费」是一个打卡活动中常见的营销方式，学员完成指定的任务就可以拿到打卡费用的返现，这样不仅可以筛选精准用户，也可以提高用户的打卡积极性。「运营配置」主要包含配置日签和邀请卡两个部分。「日签」是一种吸引用户传播的手段，通过个性化和精美的日签设计，不仅可以体现活动特色，还能激发学员的收藏欲望，最终吸引用户主动传播，拉新引流。「邀请卡」也主要是为了激发学生传播引流，不仅设计了精美的邀请卡片，还支持老师自定义设计，以及直接引流自私域社群。「数据分析」是对整个打卡的数据进行全面的分析统计，包括当天打卡人数、打卡次数、新增学员、点赞数、评论数、加精数等等，通过精准的数据分析，可以为商家运营方案提供支撑。作业打卡「作业打卡」是以布置“作业”的形式打卡，这种打卡方式可以加强教学质量的检验，让学生产生完成作业的紧迫感，督促学生进行学习。闯关打卡「闯关打卡」是以“关卡”作为单位的打卡模式，这种打卡形式由于自身具备游戏的挑战性，所以能够有效刺激学生为了拿到更好的成绩而努力打卡，从而提升用户参与度和积极性。考试「考试」是用来检测用户学习效果的学习工具，商家可以通过考试情况得到学习效果反馈，可根据考试反馈进行后续课程优化。新建考试「考试」的建立分为三个步骤，分别是设置考试信息、选择试卷和发布。「设置考试信息」又分为基本信息、信息采集、考试设置、题目分值和结果设置五个内容。「基本信息」需要填入考试的基本信息，选择需要关联的课程；在「考试设置」，老师可设置参考考试的时间、考试时长、考试次数等；在「结果设置」，可以选择考试完就展示成绩、题目和答案。在「选择试卷」步骤，可以创建新试卷，也可以从试卷库中选择已设置好的试卷，其次还可以设置考试通过分数的成绩。添加试卷以后，管理员可选择立即发布、定时发布以及开启微信服务号通知，帮助学生可及时获取考试的消息通知。考试管理在学生开始考试以后，后台会生成考试数据，商家可查看考试的详细情况，包括批阅、统计分析、老师管理、设置证书等。练习「练习」满足了商家售卖已有题库题目，为学员提供自主刷题练习工具的需求，而通过反复练习，可以提高学员学习效果，有助于提升用户的活跃度和留存率。新建练习「练习」的建立包含基本信息、练习设置、商品信息、私域引流和信息采集五个步骤。在「练习设置」，管理员需要关联题库，设置答题的出题顺序（包含随机和按顺序），题目数量和考试难度；「商品信息」可以设置「练习」是否付费，或需要参与关联课程才能学习；「私域引流」和「信息采集」是公共组件，我们在上文已经解读过，不再重复。练习管理学生开始练习以后，后台可查看学员的练习数据，包括练习参与人数、每道题目的正确率等，这些数据可以帮助商家及时调整运营方案，或针对性对学生进行讲解授课。作业本「作业本」主要帮助老师和学员在课程后续实现互动和答疑，不仅可以加强学生对知识的学习，帮助老师了解学员学习的状态，更能提升用户活跃度。新建流程管理员需要先建立一个「作业本」，这个流程比较简单，输入名称以后，选择关联课程，还支持关联「圈子」（一个用户运营的重要功能），老师布置的作业会在课堂互动和作业动态显示。「作业本」建立以后，管理员可以布置「作业」。「作业」分为手动布置（新建）和题库布置（从现有的题库中直接选择）。「手动布置」需要输入作业名称和作业内容，支持上传图片和音频，填写完成后，作业创建成功。题库「题库」需要配合作业、考试和练习场景使用，为这些工具提供数据支撑。题库「题库」支持添加单选题、多选题、不定项选择题、判断题、填空题、问答题和材料题等多种类型。添加也非常简单，管理员选择好题目类型以后，填入内容就能新建成功。「批量导入」是为管理员提供批量输入题目的工具，按照系统提供的输入范例格式，系统可以一键识别出题目，轻松录入。「Excel导入」也是一种常见的导入形式，不过需要按照系统标准的批量导入模版，才能实现批量导入。试卷库「试卷库」是题库中题目的组合，可以看作是「题库」的父级。管理员可按照自己的需要把题目手动或自动组合成试卷，在考试、作业等场景中就能及时调用，提升工作效率。「试卷库」的新建流程包括设置试卷信息和组卷两个步骤。在填写完试卷基础信息以后，在「组卷」步骤，可以选择「手动选题」和「系统抽题」。「手动选题」就是管理员从题库中逐一手动选择，准确率较高，而「系统抽题」则是系统根据管理员的题型设置随机抽题，具有随机性。证书「证书」可以为学生带来成就感，激励学生坚持完成任务，当学员通过考试、完成作业以后，管理员可以向学员颁发证书，最终提升用户活跃度。「证书」的建立包含基本信息、发放规则、证书样式、证书信息、发证信息和证书分享六个内容。在「基本信息」，管理员可选择证书类型，包括考试证书、打卡证书、圈子证书等，另外，证书需要关联对应的考试。在「证书样式」，系统提供了数十种系统样式，管理员可根据自己的偏好和品牌VI选择，其次也支持自定义样式，上传设计好的背景图片即可生成。在「证书信息」，管理员可以编辑证书标题、获奖文案等，还可以加入鼓励文案，吸引用户传播分享。在「发证信息」，可加入发证日期、证书编号和发证印章等，突出真实性。在「证书分享」，可以添加分享语和二维码，通过学生的分享，为商家拉新引流。表单「表单」是运营者用于发起问卷调研，自定义收集用户信息的社群功能。它可以帮助商家收集用户需求和反馈信息，通过对用户的调研分析，进一步设计和优化运营策略，从而为用户提供更精准的服务新建流程「表单」的建立分为三个步骤，分别是编辑表单、表单设置和表单发布。「编辑表单」分为三块内容，左边是组件和外观，管理员需要从这里选择内容，比如单选、文本框等。「组件」包含基础组件（单选、多选、下拉菜单、文本框等）、描述分割（文本描述、图片、分隔栏）和个人信息（姓名、性别、年龄等），「外观」可以设置表单底色、标题、选项内容字体大小和颜色。选中内容以后，中间为表单编辑区域，可以实现可视化编辑，包括调整顺序、删除等。右侧可以设置表单的字段和逻辑，包含基础设置、选项设置、逻辑显示规则等。在「表单设置」，可以设置用户提交的次数、回收方式（支持定量、定时回收）、微信分享信息和私域引流。在最后一步「表单发布」，需要关联对应的内容，比如相关视频、课程、专栏、圈子、训练营等内容，关联成功后，表单就可以发布。活动管理在店铺的运营中，举办线下活动必不可少，「活动管理」就是为了解决这个场景而设计。管理员可以使用「活动管理」功能组织线下活动，一站式完成线上发布活动信息、用户报名、收集报名用户信息、管理报名情况、现场签到等流程。发布活动「活动」的发布包含基本信息、票务设置、座位设置、报名信息设置和私域引流六个部分。在「基本信息」，管理员需要填入活动的名称、地点、时间、关联的课程等信息；在「票务设置」，可以添加免费票和收费票，设置票种的展示规则等；「座位设置」部分，还可以开启自动排座，活动座位由系统自行分配；在「报名信息设置」，管理员可以根据自己的需求灵活配置用户报名的信息，非常方便；「私域引流」可以帮助管理员在活动报名前后将潜在用户引流至商家的私域流量池。名单管理活动建立成功后，商家就可以发布活动，「名单管理」就是活动报名的详细数据，包含报名管理和签到管理。a. 报名管理「报名管理」主要包含了所有活动报名的数据管理，比如待审核、报名成功等，管理员可以在这个栏目查看报名用户的详细信息。b. 签到管理「签到管理」有两种形式，一种是用户自行扫码签到，系统会生成活动的二维码，管理员向用户展示扫码即可；另一种是商家主动扫码核销，工作人员进入票券核销页面以后，就可以对报名的用户进行扫码核销。随堂检测「随堂检测」是一个协助老师校验学生学习质量的辅助工具，它不仅可以提升学生对课堂知识的学习和巩固，还能有效防止学员挂机学习，提升学习效率。测试互动「测试互动」是一个通过设置轻量级的在线趣味测试，刺激用户活跃的社群玩法。运营者可根据用户特性设计测试题目，激发用户好奇心，活跃已沉淀的粉丝，增强学习过程的互动乐趣，同时可以设置根据测试结果给用户推荐课程。新建流程「测试互动」的新建包含了设置测试信息、添加题目和结果页设置三个步骤。在「设置测试信息」，运营者输入测试名称、简介和设置有效时间；在「添加题目」步骤，需要加入测试活动的题目，支持单选和多选；在「结果页」设置，需要设置测评结果，并可以向用户推荐指定的课程，进行付费转化。付费问答「付费问答」是一个为商家增加变现的工具，学生付费向老师提问，获取一对一答疑。「付费问答」需要先创建一个问答专区才能开启，有点像建立一个问答专栏。当用户在前端购买问答服务以后，运营者可以在手动邀请答主进行答疑。其次这个功能也设计得很完善，还支持设置用户围观价格和围观分成。体验小结在体验完这 11 个互动工具以后，我开始感受到小鹅通这个工具的魅力。从引流到激活、从留存到传播，这 11 个工具几乎能满足一个知识店铺运营多维度的需求。而让我最惊叹的是小鹅通产品的设计细节，比如一个普通的打卡功能，如果只是从前端体验看，你根本无法想象这些小功能的后台设置其实有这么复杂。而小鹅通为了降低商家的运营成本，几乎支持每一个功能版块自定义，给我最大震撼的就是「证书」这个功能，不仅提供多种证书设计样式，连证书内容的每一个字段，都可以在后台自行输入，无需任何加工，实在是太方便了。② 商品「商品」主要指实物商品和服务类商品的发布和管理，如果商家有周边商品，可以通过实物商品来上架，服务类商品则是指虚拟服务，比如 1V1 咨询、设计指导这样的虚拟服务。「商品」栏目的功能比较简单，我们就不过多赘述，大家可以亲自体验。欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/xiaoe-teach
工具 干货 人工智能 大家好，这是 2023 年 2 月的第 1 波干货！现在越来越多的设计工具开始加入人工智能算法，让设计更加轻松，而这一期的设计干货合集当中，就有很多加入了这样的功能，从抠图到图片质量提升，从配色方案到室内设计，都越来越好用。另外，还有平面设计式的网站搭建工具、游戏引擎级的动效设计工具，都相当有趣。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第四波！2023年1月精选实用设计干货合集大家好，这是 2023 年 1 月的第 4 波干货！阅读文章 > 下面我们具体看看这一期的干货：1、平面设计式网站搭建工具https://webwave.me/WebWave 也算是一个思路清奇的网站搭建工具，他遵循当下的设计趋势，让网站设计不再拘泥于网格系统和网站搭建约定俗成的设计方式，让设计师可以更加充分的发挥创造力， UI 元素可以被放置于任何位置，完成更加自由轻松的设计。在功能上，WebWave 也确保了诸如商店、电子邮件、SEO、域、托管等常见的网站功能，相当完善。2、网站所用字体分析工具https://fonty.io/这是一个对于网页设计师和开发者非常有用的工具，你只需要输入网址，它会将这个网站所用的全部字体都列举出来，并且会在页面右侧展示字体的显示效果。对于不太习惯检查源代码查看网页字体的同学而言，这种工具可以省去大量的麻烦。3、人工智能配色方案生成工具https://colormagic.app/ColorMagic 是一个使用 GPT-3 来生成配色方案的工具，这个工具也是经过大量的数据训练出来的，你依然可以使用传统的上传图片的方式来生成配色方案，当然，人工智能的加持下，更方便的方式是直接输入关键词，描述你配色方案的情绪、感觉或者是行业等其他的关键词，ColorMagic 可以借此直接生成高素质的配色方案。4、图片素质提升+去除背景 Mac 应用https://icons8.com/goprodGoProd 是知名设计素材供应商 Icons8 出品的一个高质量设计辅助工具，专门针对 macOS 平台，提供去除背景和图片素质提升两个功能，对于设计师而言，这两个功能绝对是刚需。GoProd 的这两个功能也同样加入了最新的机器学习技术，来确保它的图片放大和抠背景的效果足够好。5、将 Figma 设计导入 Webflow 的插件https://www.figma.com/community/plugin/1164923964214525039)这个 Figma 插件其实是 Webflow 官方出品的工具，它可以将 Figma 所设计的静态页面，直接转化为 Webflow 可用的 HTML 和 CSS 代码，然后你就可以在 Webflow 中添加交互，和更加强大的 CMS 内容管理系统连接到一起，甚至实现一键发布。在使用过程中，你需要授权给给插件，让 Figma 连接你的 Webflow 帐号或者 Webflow 网站。6、游戏引擎级动画设计工具https://rive.app/editorRive 是一个高性能的动画设计工具，但是和传统的动画工具有很大的差别，它甚至可以说是一个游戏引擎，它的交互性和可视化成都比起以往的同类工具更高，很多以往需要复杂交互才能实现的效果可以轻松实现，而且如果购买他们的团队服务，还支持高性能的实时动画设计协作。Rive 有 Mac 和 Windows 平台的客户端，不存在平台限制。7、人工智能室内设计改造工具https://mobel.app/这个名为 Mobel 的人工智能室内设计平台，它最初是作为一个室内设计灵感素材平台而存在的，不过 AI 生成技术出现之后，它们开始利用这一技术来进行室内设计，你可以上传室内的照片，然后人工智能算法会自动生成各种不同的配色、家居装饰搭配的方案。对这方面有需求的同学可以先体验一下。提高3倍效率！能落地的AI绘画&设计系统课来了！如何快速入门AI绘画和AI设计？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/2023-2-design-resources-vol1
用户 系统 软件 今天和大家聊聊我对「SaaS」和「SaaS 用户体验」价值思考及设计实践总结分享，本文从如下三个方面展开：如何理解 SaaS 和传统软件的差别重新认识 B 端用户体验的价值SaaS 用户体验设计体系实践思考。更多SaaS产品设计干货：想找B端产品分析？盘点30家免费可试用的SaaS产品前几天写过一篇国外可免费试用的 B 端后台，感觉数量不够多。阅读文章 > 一、SaaS 的本质是什么SaaS，英文全称 Software as a Service，意思为软件即服务。是通过网络提供软件服务，可以理解为一种软件交付模式，因为交付模式的不同也决定了和传统软件的差别。在 Saas 之前传统软件需要购买后本地化部署，两者最大的区别在于，卖软件是将软件作为一个软件实体卖给客户了；而卖 SaaS 软件的所有权还在厂商所有，提供的是“软件服务”。Saas 模式的提出者是 Salesforce 创始人——马克·贝尼奥夫(Marc Benioff) 在98年的时候提出。有两个原因促使马克·贝尼奥夫思考并提出Saas：传统软件部署实施交付的失败率非常高；软件的售卖价格非常高，很多中型、中小企业有需求但无法承担高昂的费用。基于以上两个痛点及当时的现状卖软件给企业造成的影响，已经形成了恶性循环，市场受到严重的阻碍（据 Gartner 高德纳公司（美国咨询公司）的调查研究曾表明：在所有 CRM 项目中大约 55%没有达到软件用户的完整交付和预期目的，通俗的说是实施失败。）从卖软件变成卖服务，其中的技术方式的改变、交易模式的改变，促成了软件时代的变革，对于传统软件公司来说，是一次大革命。原来卖软件给客户，一次性（或者分几次）收到钱了；改为卖服务后，这笔钱就不能在短周期内一次性收了，现行的 SaaS 模式通常是按照用户的使用年费来收取。两者差别在于，软件商需要先主动改变可以短期的一次性高收入，从短期收入向长期收入的转变；所以 SaaS 是长期主义的事情。失败的 Saas 生意会出现一个问题：把长期生意做成了短期不可持续的生意；而短期生意带来的就是经营成本的剧增，导致生意不可持续。所以，Saas 模式决定了需要客户长期使用你的产品，才可以长期可持续赚钱，也就是通常意义上的客户终身价值（LTV）。那如何做到客户长期使用，其实只有一种方式：长期为客户创造价值，做到帮客户成功（帮助客户的业务成功），从而持续续约。吴昊老师，在《SaaS 创业路线图》中的讲到：SaaS 的本质是续费。这个观点我比较赞同，SaaS 的经营本质在于可持续。二、从新认识 B 端用户体验那么，决定 SaaS 的成功因素是什么呢？我认为决定性因素有三个方面：产品强大且灵活、用户体验优质、服务的有效支持。产品强大和服务的有效支持不言而喻，具体我们来聊聊用户体验的价值。传统软件在一次交付实施后，客户付 80%的钱，剩下的 20%能不能收回来就不那么重要。但 SaaS 模式，客户每年进行续费，若产品使用及用户体验满意度低，带来的影响和后果可能是客户终止续费。因此，和传统软件相比 SaaS 的用户体验的价值就更为重要，它直接影响 SaaS 的续费和流失。相信“用户体验”这个词大家应该非常熟悉，接下来我们重新认识什么是用户体验。官方的定义是：用户在使用产品过程中建立起来的一种主观感受。“用户体验”这一概念是唐纳德·诺曼（Donald Norman）在 20 世纪 90 年代中期提出的。产品大神俞军老师说过用户体验的本质是“用户最小成本满足需求”。基于俞军老师的定义、我的理解和思考，我认为是帮助产品和用户：最小成本满足需求，同时创造「美·好」体验。怎么理解，因为用户体验是满足商业目标的一种行为手段，我们来看下用户体验的需要考虑的双边关系，就比较好理解了。如下图：左边是用户最小成本满足需求，右边是我们企业最高效的服务用户。企业的本质就是创造商业价值，商业价值来源于用户价值，同时考虑实现商业价值的效果和效率。我们常常会听到“投入产出比”或者叫“投资回报率”；对于商业行为中的一环用户体验也如此。所以，用户体验的核心的就是：平衡用户最小成本满足需求，及企业最小成本服务用户。完成价值交换同时，满足持续性。由此，可以看出在 SaaS 的产品设计中，用户体验其实承担着一个比较重要的责任，因为它关系到成本的边际和规模化的影响，一头是产品一头是用户。那么作为产品体验设计师，我们需要具备一定成本意识，做好“成本管控的设计”，更本质来说设计过程中我们应该：把复杂留给自己，把简单留给用户。因为我们在设计的过程中把握产品的交互方式、使用流程，在用户认知和效率层面有较强的把控空间，充分做到的以“用户体验”出发；那后续销售、交付、客户成功的全链路服务过程的学习效率和服务效率会呈指数级上升。产品设计，应该把复杂留给自己、把简单留给用户。关于用户体验，就不得不介绍一下“ 用户体验要素”模型，个人认为这是所有产品经理和设计师可以贯穿整个职业生涯中都需要经常性、反复对照思考的设计模型。用户体验设计的价值远不止于让产品的视觉、颜值提升，设计更大的价值在于深入业务、洞察用户，帮助业务梳理产品信息架构、任务流程、交互体验。构建系统的用户使用方式和工作模式，从而达成用户目标；通过达成用户目标完成价值交换、以此完成商业交易达成商业目标。三、 SaaS 如何进行用户体验设计回顾 Saas 的商业模式，Saas 的商业模式决定我们提供的这个服务不是靠人海战术，因为 Saas 软件即服务的含义是所提供的软件就等于提供自助化的服务，应该提供的是自助服务、开箱即用、开箱易用的服务。那么 Saas 服务设计策略上，应该从降低系统使用门槛和提升用户的自主化服务两维度出发，根据这两个核心维度，我们构建了每刻 SaaS 产品体验的设计策略模型。第一，设计“系统服务自动化”，这里的服务是功能使用的操作，符合“低认知、易上手”，那么从设计整个体系 需要遵守“易发现、低认知、高效率、有温度”的设计原则展开，以用户使用行为出发设计符合用户心智认知的功能形态和交互流程。第二，设计“系统帮助自助化”，什么意思在全系统中构建帮助引导的自助化体系，用户需要帮助的时候提供人性化的引导帮助，我们从发现的维度、认知的维度，系统认知的维度，综合考虑用户系统的帮助引导。设计原则，是指导我们做正确设计的方针。设计原则的建立基于对用户使用体验全流程的基础上，以每刻报销的设计原则，围绕用户旅程、认知及行为出发构建。当用户接触系统从看出发，看见系统界面、发现操作入口；（发现）带着操作任务用户进入系统、看见导航、看见文字、看见按钮，都需要理解认知；（认知）用户从何开始、如何操作，在完成整个业务事项的过程需要进行填写、选择、交互过程就产生了生产效率问题；（操作）当出现误操作或系统出错时，需要系统纠错提醒、容错的设计、帮助及引导，当完成整个业务事项后，用户产生一种的情绪感受，这个感受即是印象、评价、口碑。（感受）紧紧围绕产品业务、用户处理特性业务的基础上，以终为始，回归到用户、业务、系统进行思考归纳的产物。设计策略，是指导我们如何进行做正确的设计。在 SaaS 产品分类上，常见的 SaaS 产品主要分为 3 类，行业 SaaS、职能 SaaS 和通用 SaaS。每刻报销产品从核心业务来说是职能类 Saas，从提升财务人员报销的发票审批、费用审核等效率展开，但报销的来源又源于普通员工的业务报销，业务报销发生又和所在行业的费用发生行为特征有一定相关性，所以是结合职能和行业 Saas 的属性，从用户体验的设计上需要考虑不同角色用户对于系统的业务理解、功能交织使用的不同诉求，这个设计过程探索研究是相对比较有难度的，以后有机会可以展开聊。下图是每刻系统经过 6 年过程中统计的问题分布，分布比率呈现：认知问题 60%，效率问题 30%、情感问题 10%。关于帮助引导我们在访谈客户调研发现，企业服务虽然客户已经用了好几年我们的系统，但财务部门还是经常性会碰到新入职员工的系统使用问题，甚至财务部门来新人时 以前系统发生的使用问题会从新出现一遍，所以企业服务有一个现象，客户是老客户，但新用户不断增加，新人一旦增加第一个遇到的问题就是认知问题，也辅证了我们对于 Saas 系统认知问题是用户体验的第一大问题。帮助体系建立可以从系统层面体系化有效降低用户使用的认知成本，围绕用户角色的核心业务操作使用流程、洞察用户旅程上的疑惑和障碍点。用户首次进入系统要建立介绍和引导，足够简单、降低陌生感，来减少人力咨询回复的投入。相比人，系统的自助化和自动化的服务，更具有复用性和规模效应。本文小结SaaS 的商业模式，按年使用账号来收费和传统软件的付费模式区别非常大，因为需要先主动放弃自己本来可以唾手可得的收入，从短期收入向长期收入的转变。在 SaaS 模式的时代，商业模式决定其必须关注客户成功、客户持续续费、LTV 客户长期价值。SaaS 的产品更需要重视用户体验，用户体验的优劣决定其产品的长期发展，SaaS 的用户体验设计则关注用户使用认知和行为效率，以及系统服务自主化设计和系统帮助自动化设计，用户体验将在产品成长期后半程，逐渐成为 SaaS 商业模式不可或缺的产品竞争力。以上，对 SaaS 及 SaaS 用户体验设计实践和价值思考，希望这篇文章对同行的你有所帮助和启发。本篇来源：优设网原文地址：https://www.uisdc.com/saas-ux-design
币种 货币 用户 导读随着全球化贸易的进一步加深，不少互联网产品为了引入更大体量的用户体验并使用产品而开启了“出海之旅”。直接降低用户购买门槛的多币种支付，变成了产品必需品。如果说语言翻译是产品国际化的第一步，那么多币种支付能力的搭建就是紧随其后的第二步。更多出海产品设计方法：产品出海如何做好本土化设计？来看京东高手的实战总结！互联网企业“出海”浪潮背景下，作为设计师，面对新鲜未知的市场，如何找到适合海外产品的设计方向？阅读文章 > 为什么要“多币种支付”？由于用户对非自己国家/地区货币价值概念欠缺，在支付场景需要自行汇率计算、衡量价值等一系列时间/学习成本，支付转化率较低。为了提升用户的支付体验，提高支付人数和支付转化率，产品需要将价格做的更加显性——所见即所付。以 Amazon、AliExpress 为例，都为用户提供了多币种支付方案，支持用户使用本币付款。本文将重点对多币种支付方案设计及注意点进行说明。Amazon 中多币种方案AliExpress 中多币种方案一、币种展示1. ISO 代码 + 货币名称每一种货币都统一由三位英文字母代表，而这一套三位英文字母，就是国际标准 ISO 4217。但是进行币种切换选择时，只看到 ISO 代码，部分用户也会定位难度。这种情况下，货币的名称就成为了辅助信息，帮助用户定位货币种类；用美元作为例子，如下图：2. 货币符号+ISO 代码+货币名称在币种展示中增加货币符号，可以提高用户币种寻找效率。不仅因为日常生活中用户接触更多的是货币符号，而且符号类视觉元素相比文案或者 ISO 代码更易用户阅读与聚焦。需要注意的是，货币符号是存在多国/多地区通用的情况。单独的一个货币符号，并不能直观的表达一种货币。例如美元符号"$"，加拿大元、新加坡元、澳元符号相同，使用时可用 ISO 代码在货币符号前做以区分；如下图：注意：通常在网站中，为了视觉效果等原因设计师会考虑国旗与币种共同使用。这个设计决策是非常危险的，首先同一国家不同地区也会存在使用不同货币的可能，另外国旗会有触碰敏感话题的风险。二、币种界面和功能1. 价格展示较长当价格展示空间有限，可以考虑缩小货币符号和小数点后金额缩小的方式为整数金额争取更多位置。如图：同时，金额较大时，别忘记为千位分隔符留下足够字符空间；2. 考虑货币符号如上文币种展示中提到的，币种符号存在多币种同用情况，例如符号“¥”，人民币和日元都在使用；符号“$”美元、加拿大元、澳元等共同使用；创建币种符号对照表可解决这一问题，同时方便设计师或研发定期更新维护；币种符号$对照表3. 千位分隔符因为英文中没有“万”、“亿”，与之替代的只有“千（Thousand）”、“百万（Million）”和“十亿（Billion）”的概念，所以西方习惯在较长数字中每隔三位增加一个逗号，以方便在数字位数较多的情况下也能快速看出它的值。这种情况多使用在日元、韩元等货币位数较多的价格展示中，为用户简化金额阅读。如下图：三、币种本地化1. ISO 代码定期更新ISO 4217 货币代码亦可改动，例如当一个国家发行新货币，进行货币改革，更换货币单位之时。俄罗斯的卢布就曾由代码 RUR，改成 RUB。所以不要忘记定期关注 ISO 代码相关消息，发现调整，实时更新；2. 币种默认初始逻辑默认记住上一次用户的币种选择可以让用户免去重复的币种切换工作，直接享受畅通购买的体验。使用 IP 定位确定新用户所在地区，并为用户切换至对应地区使用币种也是个不错的选择，但是对于正在出差的用户来说有些多此一举；使用浏览器默认语言并为用户定位对应币种容错率相对更高些。另外，用户登录与未登录两种场景也可以结合考虑添加默认币种逻辑；3. 考虑提供参考价格世界上大约有 170 种货币，产品不可能为每一种货币提供支付渠道。那部分不可支付币种，我们可以通过当天汇率，在前端页面展示参考价格，方便用户衡量价值。例如，Amazon 中切换肯尼亚先令等，可以看到如下备注信息，提示用户页面价格只作为参考，用肯尼亚先令支付可能不成功。四、切换币种功能用户的购买支付流程根据不同用户习惯会有所区别，主要可分为两类：① 先看价格范围再看商品详情② 先看商品详情再查看价格第一类用户在平台上首先会将币种进行本地切换。那么全局币种切换器成为这类用户的必需品。而第二类用户在意商品细节多过于价格或是默认币种与本地货币换算较为常见，所以通常到了最后一步支付时，用户切换到本地货币进行最终的价格确认。这种情况，支付时的币种切换器更有意义。1. 全局的货币选择器很多大型电商平台中，默认用户地区会使用网页 IP 定位，而地区确定后又可以推测用户使用货币，所以设计师会将币种设置与导航栏的语言/地区/国家设置进行入口合并。这样做可以让用户在有相关设置需求时，较快的定位入口，同时也考虑设置内容的联动性，辅助用户批量设置。当你的网站导航栏不固定时，在方案对比页面增加货币选择器是个不错的选择。用户查看方案详情或对比方案信息时，产生货币切换需求概率较高。在方案页面的币种选择器可以更快的满足用户需求，从而促进用户支付。2. 支付链路中的货币选择器在一些复杂的支付链路中，我们会使用弹窗让用户完成购买信息的细节选择。例如选择套餐的付款方式（优惠券/活动码）、套餐的付款周期（月/季度/年）等情况，而这也是用户最后切换支付币种的机会。不要忘记贴心的为用户保留币种切换功能，帮助用户顺滑的完成支付链路。结语在“多币种”支付设计过程中，设计师需要选择合适的币种展示方式和币种时机（币种选择器位置），并结合支付场景、支付链路、开放币种范围等因素综合思考，才能保证国际化用户良好的支付体验和感知。“多币种”支付不仅可以传递产品国际化信息，也可以给业务带来营收价值。国际化支付场景虽然常见，但是设计细节关注度较低，很多设计师无论是否拥有国际化设计经验都习惯凭主观直觉设计。因此，我们对国际化“多币种”支付设计抽丝剥茧，总结出比较系统化的设计方法。希望这篇文章可以帮助到更多刚接触国际化业务的设计师。本篇来源：优设网原文地址：https://www.uisdc.com/multi-currency-payment-design
元素 互动 用户 前言当我们提及“动效设计”这一词，第一印象往往是那一类炫酷的极具视觉表现力的动效，而有一类动效，它们如春风细雨般融入了用户交互过程的点滴之中，为打造符合用户心智的流畅体验默默做着贡献，它们就是「交互动效」。本文将从以下三个方面展开介绍——「什么是交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」，带领大家了解交互动效的基础概念，以及具体的设计流程方法，希望大家看完后能够对交互动效有更加清晰的认知。更多动效设计干货：新手科普！交互动效基础知识入门什么是交互动效界面交互动效：用户与界面进行交流互动时以动效的形式进行信息传达。阅读文章 > 一、什么是交互动效？交互动效指的是那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。与视觉动效不同的地方在于，交互动效主要作用于产品的基础体验和功能体验层面，为用户营造更加自然流畅的体验。而视觉动效除了在功能体验层面能帮助用户降低理解成本之外，更多作用于情感体验，增加产品趣味性、传递产品调性，目的是引起用户的情感共鸣，调动用户的正面情绪。交互动效&视觉动效示例交互动效与视觉动效的影响范围差异二、为什么要重视交互动效？在实际的项目中，交互设计师往往会先处理任务流程和页面信息设计。在设计工作量大、时间紧张的时候，很可能遗漏掉需要增加交互动效的细节，到点检验收的时候才发现这些问题，这种情况在新人设计师中较为常见。在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。验收阶段才发现动效问题的尴尬必要的场景缺失动效直接上线，可能会产生以下的体验问题：不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。动效缺失产生体验问题例子总的来说，不注重交互动效将会给产品体验埋下各种体验问题隐患，加上进入互联网下半场后，互联网产品将会更加注重设计上的精致精细度。由此来看，掌握系统化的动效设计方法，已然成为设计师们的必修课。三、交互动效的设计流程和方法1. 动效评估在设计之前，我们需要先判断是否真的需要做动效？不能为了做动效而去做动效。① 场景聚焦首先，我们需要知道，什么样的场景适合做交互动效？可以总结为以下三类场景：三种适合做交互动效的场景「场的变化」指的是用户需要从产品中的一个「场」到另一个「场」，发生在页面间的转场、或页面内的转场。「场的变化」相关例子「内容的新增或减少」指的是由于用户的交互行为，导致页面中的内容（模块、组件、元素等）产生新增或减少。「内容新增/减少」相关例子「元素的属性变化」指的是由于用户的交互行为，导致页面中的元素属性产生变化，例如位置改变、状态变化、值变化等。「元素属性变化」相关例子② 优先级评估筛选出适合添加交互动效的场景后，我们需要评估在这个场景中做动效的优先级。判断做动效的必要性，可以从以下四个维度从高到低的维度去进行优先级评估：「一致性」——如果某个场景已经有定义好的动效规范，原则上需要遵循规范进行适配，以确保全局动效体验的一致性。这一个维度对于那些存在动效语言的产品是非常重要的，一致性是为整体产品调性和品牌所服务。例如iOS在全局都保持了高度统一的动效体验，如果某一个组件缺失了用户习以为常的动效，很容易被用户感知到且产生对品牌的负面评价。「帮助用户理解」——不加动效是否会影响用户对当前页面变化的理解？如果因为缺失动效，在元素关系、页面层级、状态变化上造成用户较大的困惑，影响了用户体验，那么在该场景下添加动效的必要性是较大的。「提升流畅度」——不加动效是否会影响视觉层面和操作层面的流畅度？即视觉上是否会产生闪跳、突变等卡顿感，操作上是否实时反馈、符合用户预期。「引导注意力」——页面中的元素是否需要通过动效来引导用户的注意力？会不会对用户造成不必要的打扰？有时候产品会出于业务诉求希望通过动效的手段来引导用户注意力，达到业务的目标，但是我们需要站在用户的角度去思考用户的注意力是否应该被引导，不让动效成为对用户的干扰。动效优先级评估2. 动效设计① 动效原则设计原则用于指导我们设计动效的方向，确保不偏离正确的方向。结合行业内的各类动效规范的设计原则，我们总结出以下六个通用性较高的设计原则： 舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。交互动效设计原则② 动效属性变化一个完整的动效是由不同元素的不同变化组成的，常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...动效常用变化类型时长小于 200ms 的动效不易被感知，多于 1000ms（1s）则让用户感到缓慢，交互动效时长一般在 200ms-500ms 之间，我们在设计时长时，可以从以下几个因素进行考虑：i）复杂程度：复杂的动画比简单的动画需要更多的时间来表达动效复杂程度对时长的影响ii）区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短动效区域范围对时长的影响iii）入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中动效入场/退场对时长的影响曲线曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。以下是三种常用的曲线类型：i） 加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。加速曲线示意ii） 减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。减速曲线示意iii） 缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。缓入缓出曲线示意③ 动效编排动效属性是针对单个元素进行设置的，那么如何对多个元素进行动效组合和编排？下面提供一些动效编排的技巧： 淡入淡出淡入淡出是通过透明度变化来实现过渡转场，也是最简洁实用、最常见的一种类型。其分为「单向淡入淡出」、「交叉淡入淡出」和「错开淡入淡出」i） 单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。单向淡入淡出示意ii） 交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。交叉淡入淡出示意如果退场元素和入场元素在视觉样式或者布局结构上差异较大，交叉淡入淡出可能会带来视觉上的混乱，这时候可适当错开出场元素淡出和进场元素淡入的时机。可通过错开元素进出场时机避免带来视觉混乱iii） 错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。错开淡入淡出示意 一镜到底一镜到底是通过共享元素、容器和动势来进行转场过渡的一种编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的编排方法。i） 共享元素共享元素是转场前后持续存在的界面元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感。共享元素转场示意ii） 共享容器当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。共享容器转场示意在使用共享容器转场时，有以下原则需要注意：原则 1——尽量减少独立移动的元素数量。多个元素运动会争夺并分散注意力，我们可以通过淡入淡出减少元素移动，让注意力更聚焦。原则 1：避免过多独立移动的元素原则 2—— 避免焦点元素在运动过程中和其他元素重叠。焦点元素和其他元素运动轨迹重叠会产生杂乱无章的过渡，同样地，可以用淡入淡出来简化运动。原则 2：避免焦点元素运动轨迹和其它元素重叠iii） 共享动势无法通过补间变化来实现柔和过渡，可以提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。共享动势效果示意其它编排技巧i） 运动路径如果转场中的元素沿对角线移动，线形运动路径具有简单而实用的风格，而弧形运动路径则创造了更加强调和戏剧性的风格。线形和弧形运动路径差异对比ii） 振荡一般情况下，转场动效在到达终点时会结束。当添加振荡时，过渡路径至少超过其端点一次，然后反向返回端点。振荡可以用来表达一种更加俏皮和充满活力的过渡风格。有无振荡差异对比iii） 纵深变化一般情况下，背景内容在容器变换过渡期间保持静态。可以通过动画背景内容的比例来强调纵深变化。这种通过强调前景和背景内容之间的距离，使过渡看起来更加生动。有无纵深变化差异对比iv ）交错一般情况下，入场元素会打包为一个组进行处理。「交错」是指通过对组中的元素应用短延迟，创建一种级联效果，将注意力非常短暂地集中在组中的每个元素或个别元素上。通过交错将注意力短暂地集中在每一项上交错还有可以用于强调页面元素，将需要强调的页面核心操作或元素在其他元素入场完毕后完成入场，能够吸引用户注意力，完成视觉引导。通过交错突出核心元素③ 动效落地尽管我们把动效设计得再精美，最终还是要靠开发大哥们把它还原出来。交互动效需要开发通过代码来实现，因此动效标注如何让开发看得懂且能理解，就尤为重要。这里推荐大家使用参数化的表格来进行标注，转场动效的标注文档中需要包括以下要素：动效 demo 附件：方便开发直接查看整体的动效效果触发条件：说明动效发生的条件，即用户通过什么行为触发该动效元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意变化属性：元素的什么属性发生，例如透明度、位置、大小等等动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参数转场动效标注文档示意手势动效的标注和转场动效略有不同，因为手势动效是跟手的效果，不像转场动效是在固定的时长内完成，因此不需要描述时长相关的参数和动效曲线，取而代之的是需要描述清楚页面元素跟手的联动关系。手势动效标注文档示意在动效验收的时候，如果发现有还原问题，那么可以将没有按照设计标注来做的地方在表格中圈出来，帮助开发快速定位问题，提高沟通效率。在验收环节运用标注文档定位问题结语交互动效作为提升产品精致精细度的必不可少的要素之一，也是作为设计师不可或缺的技能，本文给大家讲解了从动效评估-动效设计-动效落地的全流程方法，希望能对大家了解交互动效、上手交互动效设计有一定的帮助。当我们希望给用户带来不一样的惊喜和极致体验时，不妨试一试从交互动效入手。参考资料及部分示例图来源：material.io/design/motiondeveloper.harmonyos.com欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/interactive-effect-design-guide
表哥
在路上
飞翔的企鹅
张大湿
落霞与孤鹜
