Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位，对 Dribbble 设计的研究会让我们看清设计的方向。
为了保证这篇文章的质量，Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品，作品总的大小为 2.2G。
从挑选出的 828 件作品中，排名前十的作品中 9 件为 B 端设计，另一件作品也是 B 端产品 C 端化的产物。其中：
明眼人都能看出其中的比重关系，B 端设计再次大火，为什么是再次？因为 B 端设计之前火过，只不过没有赶上一个好的时代，在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下，实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计，相信今年视频动效作品占比还会再次提升。
Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢？既不是 C 端也不是纯 B 端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。
MetroUI 是 Windows8 的界面设计语言，在 2010 年至 2013 年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动 To B、To G 的发展元年，通过几何色块（MetroUI）实现 B 端产品与 C 端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现 B 端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
1. 易读性（停顿感）
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
2. 曲线
在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
3. 多彩高斯渐变风
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
1. 侧边栏 Sidebar
B 端设计的火爆带动了 B 端相关模块设计，更多的人也愿意尝试 B 端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
2. 仪表盘设计
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
3. 流程设计
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是 B 端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
4. B 端 C 化
B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐，国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B 端产品也开始移动化、智能化，国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。
5. 轻代码化
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
1. 人文气息
为什么人加色块的组合方式能流行起来？还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”，完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权，具体安装购买方法上某宝就可以轻松搞定，真香。
3. 轻拟物
轻拟物这几年一直流行，在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
4. 简洁设计
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在 B 端产品界面中更加需要简洁设计，我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
5. 几何图形
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
6. 暗黑设计
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome 插件）用来测试界面的对比度。
7. 模块化（组件化）
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
8. 插画
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
9. 几何插画
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
10. 线面插画
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
1. 微交互
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI 界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C 端产品微交互和动效已经很成熟了，一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
2. Mg 动画
Mg 动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG 人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
1. 三维图标
MacOS Big Sur 系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
2. 轻三维
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更加出彩。
3. P4D（PS+C4D）
P4D 是 PS 加 C4D 的设计表现技法，也是视觉设计的最后一个环节，通过 PS 对 C4D 的渲染图片进行调色，利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵，还可以利用 PS 强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过 PS 的后期合成来实现，这也是 P4D 的强大之处。
4. 卡通 IP
卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟，卡通 IP 也从传统的纯 PS 手绘技法，转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通 IP 火的本质更适合做营销，相比于品牌或 Slogan，卡通 IP 具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于 UI 设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
5. 三维动画
C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。
上一次写 Dribbble 流行趋势还是两年前了，通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火，随着最近的互联网裁员潮大家也慢慢的进入到反思层，客观的看待和理解这个真实的世界，曾经的流行趋势也需要慢慢的沉淀下来。
存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
数字营销是指借助于互联网营销方式，帮助业务方和消费者建立触达渠道，实现业务的商业目标达成。按业务类型分为线下产品的数字广告和数字内容（APP、影音、动漫、游戏等）线上推广分发。本文主要聚焦在数字内容线上推广分发上，尝试从用户获取渠道、体验方式、内容感知、新技术带来的变化等几个方面，为相关从业者梳理数字内容流行的营销方式，以期提供一些启发和借鉴。
近年来用户内容消费呈碎片化、视频化，多元化趋势。短视频内容强势崛起，这种方式可以让用户更轻松、更深度消费内容。在各类营销类型中，短视频逐渐成为推广的重要方式，不仅在实体产品电商领域，日益成为重要的销售方式，在数字产品的推广上，也发挥越来越重要的作用。漫威在短视频平台注册虚构报社账号宣传《蜘蛛侠：英雄无归》电影，获得海量关注和点赞。
说唱歌手Lil Nas X用《Old Town Road》做BGM在短视频平台发起的牛仔挑战（#Yeehaw challenge），使这首歌曲通过短视频成为了全球爆款。这首歌在美国地区的流媒体播放量超过了25亿次，在Billboard排行榜保持了19周的冠军。
美国创作型歌手兼唱片制作人 Charlie Puth 尝试在短视频平台上发布一些旋律，发起了标签挑战 #writethelyrics，邀请粉丝们为旋律填词，这个标签累计视频观看量达到38亿次。
在游戏领域，短视频/直播内容也正成为分发重要形式。短视频巨头已深入游戏腹地，2020年移动游戏用户与短视频用户重合率达82.5%，近六成移动游戏用户会用短视频主动搜索游戏内容。短视频在和游戏内容结合上有先天优势，消费门槛低，体验更沉浸，同时也可以快速获取其他玩家的感受。除此外，对于游戏制作和发行方来说，这里也是通过内容创作获取用户的良好渠道。
游戏依托赛事直播、KOL直播，聚集了大量高质玩家，相较于传统分发方式，直播具备互动性、真实性、及时性等三大特点。KOL主播可以将游戏最直观的展现在玩家面前，更可以利用高人气迅速提升游戏热度。Facebook gaming现在采用直播feeds的方式进行游戏的推广，使玩家对游戏体验感受更直观。
黑客帝国4在官网为用户提供了一段可交互的宣传视频，根据用户的选择不同，触发不同类型结局。让用户更有代入感和掌控感。有种“我”开启了一段故事，也更容易带来体验上的惊喜感。
洛杉矶流行艺术家 BIIANCO 为其单曲That’s what friends are for制作了互动音乐视频，以互动游戏的方式让观众进行多次选择，探索属于自己的故事。
在游戏类内容宣传上，为让玩家更直接、更低成本的体验到游戏的玩法和特点。借助2D、3D以及交互视频素材高度还原游戏的真实场景，音效、视觉、玩法互动与游戏本身无异，将原有的游戏体验前置，让用户在短暂的广告展示时间中快速明白游戏的核心机制。
2021年音频内容呈爆炸式增长，播客这种很早就有的形式，在今年焕发了蓬勃生机。因为疫情原因，音频内容呈爆发式增长，相较于其他数字内容表达方式，音频覆盖了更多互动场景，用户可以在通勤、运动和打扫房子的时候在车里播放。
21年初热播的《流金岁月》不仅霸屏热播热榜，更首次将营销可能性转化到“看不见的”声音领域，最终联手十多家播客参与多方面讨论了女性、友谊、成长等话题，精细化传播，也让更多电台参与创作讨论，最终“我的「流金岁月」”主题内容实现了全平台百万级的总播放量。
Beats 就联合播客《大内密谈》推出了一档名为「一首歌的诞生」的系列节目，主播相征会在节目中和各位音乐聊一聊他们的某一首歌从谱曲、写词到录制的全过程。2021年，《大内密谈》连续7年获得Apple Podcasts年度精选播，拥有400多万忠实听众，单期节目收听量超过400万次。
影音、游戏联动明星、品牌、知名IP、传统文化产业、线下活动等等具有影响力的合作方进行战略合作，扩大双方影响力。如英雄联盟和LV的跨界联动，这款由LV设计的史上最昂贵、最奢侈的游戏皮肤，还未推出就捕获了无数LOL玩家的心，在让玩家兴奋不已之余，还引发了“这款皮肤究竟有多贵”的讨论。
自2017年腾讯和敦煌研究院达成战略合作以来，王者荣耀飞天及九色鹿主题皮肤、QQ音乐“古乐重声”音乐会、敦煌诗巾、“云游敦煌”小程序和敦煌动画剧陆续推出。三年间，累计超过2.5亿人次参与了“数字供养人”，超过4000万年轻人在王者荣耀中遇见了敦煌飞天，“云游敦煌”小程序目前已接待超过3700万人次线上游客，40多万用户设计了自己专属的敦煌丝巾，24万用户在腾讯公益平台为敦煌石窟保护项目捐款，15万用户在线用声音演绎敦煌动画剧。
2021年底热剧《风起洛阳》联动洛阳市文化单位正式发布“华夏古城宇宙”的全新概念，并宣布“华夏古城宇宙” 首发洛阳IP中的剧集《风起洛阳》、纪录片《神都洛阳》、动画片《风起洛阳之神机少年》，带领观众开启探索华夏文明的旅程。
影视剧宣发期，通过话题互动或设置传播内容，让用户创作内容进行传播，如《鱿鱼游戏》引发自发传播的抠糖挑战也引起更多受众注意激发用户观看。
游戏也会在上线后逐步积攒口碑和玩家数量，官方在制作游戏时和后期推广上会提供一些方便传播的核心素材，由游戏粉丝玩家群体自发进行二次创作产生的UGC内容，也会引发大众关注。很多玩家会围绕游戏内容创作出新奇舞蹈、仿妆、COS、攻略、同人剪辑、漫画等，提供广泛的话题和讨论度。例如《CS：GO》，它通过一条开箱视频引爆短视频平台，打破了消费用户的圈层，从游戏用户到泛娱乐用户，最终令游戏内箱子的价格从0.8元涨至2元，极大地促进了消费。
通过大型庆典活动，让用户共情，形成记忆共享，将志同道合的人聚在一起，形成文化传播。如英雄联盟每年都会举办盛大的全球总决赛开幕庆典，并加入一些让人印象深刻的游戏元素。
相较于通过中心化推荐方式向用户展示广告内容，新的趋势是广告主利用用户社交关系链，在facebook、微信、QQ等社交平台进行分享传播。通过社交流量的传播内容，让受众觉得更贴近自己，也更可信。相较于其他数字内容，在游戏分发上私域流量日益重要，很多头部社交渠道在尝试如何更好的通过私域流量带动游戏分发。
Facebook游戏智能助手会在玩家的对手参与游戏后，通过Facebook与Messenger提示对方继续玩游戏，这种方式可以吸引玩家快速回归玩过的游戏；同时在首页好友动态中可以看到好友的游戏邀请动态和相关战绩，对游戏有较高的流量传播；游戏的高活玩家也可以通过邀请好友对战或分享游戏活动等方式进行裂变传播；
Discord建立起玩家之间互推、互鉴，玩家与开发者间直接互动的社区平台；社区内的种子玩家可以更直接地与开发者接触，让自己的声音被听到；同时他们也是优质的渠道传播者，将优质的讨论内容、游戏动态进行分享，让渠道转化效率更高；
同时Discord可以创建「临时」游戏语音频道，可以让其他成员看到频道内成员正在玩的游戏；玩家也可以将游戏实况传输到服务器，在语音频道邀请朋友共同观看自己的游戏“现场直播”，让玩家的朋友在沙发上重现游戏的感觉；
游戏开发者利用多圈层KOL的优势，引导他们产出与游戏相关的UGC，OGC内容，形成话题热议，从而触达到目标用户，这种方式可以增强游戏影响力，甚至产生出圈的效果；比如Youtube通过扶持优秀的内容创作者，通过他们的粉丝圈或者社交关系进行游戏推广。
2021年初爆火出圈的社交产品clubhouse，也是在早起利用名人明星和圈子的力量，通过采用邀请制的方式吸引了高质量的种子用户，带动app的影响力，提升其在世界产品和科技圈的热度。
相较于传统的机器人客服，机器人进化出了新能力,在数字内容推广上展现新前景。在Discord中，由第三方机构提供各种数字内容服务能力的机器人，如将Patchbot机器人添加到频道后，可以将用户喜欢的游戏资讯/功能更新及时推送到频道中，让玩家获取信息更及时；
在Discord和Telegram聊天群组中，有很多提供数字产品服务能力的机器人，为群中小伙伴定期推送和主动获取影音资源。
随着元宇宙、区块链技术的火爆，数字内容也展现了不同以往的展示和推广方式。2021作为元宇宙爆发年，向我们展示了未来的一角。通过虚实结合的互动体验，数字营销不再局限于单一的文字/画面，而是通过多体感的交互，让用户全方位的体验数字内容，为猎奇的互联网用户打开了数字营销新篇章。
2021年，随着元宇宙基建的推进和爆款案例的频出，虚拟偶像也迎来了新一波发展高潮，引得不少音乐公司纷纷入局。19岁的加州虚拟网红Lil Miquela代表了Z时代的社群偶像，她在instagram，youtube，discord等平台分享自己的时尚穿搭，与名人或朋友的合影及生活想法，甚至她还在Spotify发布了自己的15首单曲。打造了跨平台的Vmodel身份。
韩国虚拟模特Rozy，不仅在社交网络分享自己的穿搭生活，还如同常人一样，营造看电影的真实体验，她的代言产品不仅涉及线下美妆，还为线上购物网站，电影等数字产品内容做宣传推广；
贾斯汀 比伯举行了一场由真实动作捕捉的线上虚拟演唱会，比伯在演唱《Peaches》、《Hold On》等人气单曲的同时，观看直播的观众可以根据场景与比伯进行线上互动：场景切换到田野时，观众可以点击不同颜色的花朵，让田野生出花朵形状的流光；
切换到街头场景时，观众可以把聊天内容或爱心发送到比伯周围；
这种虚拟演唱会的形式将全球的粉丝连接在一起，在虚拟场地形成万人互动的沉浸式音乐体验。宝可梦25周年，联合说唱歌手Post Malone推出了自己的虚拟音乐会，马龙在这次虚拟演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首单曲，在虚拟世界中与知名宝可梦一起完成表演；也为新发售的《宝可梦：晶灿钻石/明亮珍珠》起到宣传作用；
Decentraland提供了去中心化的社交世界，用户可以创建自己的虚拟形象，在不同的游戏场馆进行切换，为游戏品牌起到了更好的宣传作用；同时Dcentraland提供了虚拟土地售卖，用户或开发者购买土地后，通过制作3D场景，发布自己设计的各种产品或服务，这些场景也可以使用VR终端来体验，用户或开发者可以发挥无限的想象力进行宣传创作。
韩国剧集《鱿鱼游戏》热播后，剧集中的游戏关卡在罗布乐思公司的游戏社区被“1:1”还原，其中的游戏“1、2、3”木头人进入推荐排行榜，吸引了众多观众成为玩家，也让很多玩家去奈飞追剧，扩大了该影视资源的影响力。
伴随着区块链技术的发发展，有的游戏分发公司也在尝试通过区块链技术进行游戏发行。如Ultra试图打造一个基于区块链的游戏发行平台，通过通证经济实现更加合理的利益分配。对游戏玩家来说，可以在下载完成前就尽情享受新买的游戏，并在玩游戏时继续下载缺失的数据。玩家可以自主选择是否允许游戏内弹出广告，观看广告可获得通证奖励，邀请朋友、参与测试和策划游戏也可获得相应通证奖励。因此，游戏玩家既可以即时玩独家游戏，又可以通过多种方式赚取通证奖励。
NFT实现了虚拟物品的资产化与流通化，赋予了数字藏品/游戏/影音等内容的虚拟价值；艺术品数字资产化将拓展影视相关内容的产品链，因被赋予独特的价值，使得其可以通过交易完成变现。2021年10月11日，王家卫首个NFT作品《花样年华——一刹那》以428.4万港元价格成交，同时创下王家卫个人作品与亚洲电影NFT作品拍卖价格新高。
伴随着用户数字内容消费习惯的变化，数字内容呈现方式、渠道和分发方式都在发生变化。可以看到在未来，数字内容制作方和发行方，需要为用户提供更多元的方式深度进行体验，同时承载数字内容的平台也逐步由传统的中心化渠道向私域流量转移。作为数字内容发行方，如何有效且长线输出高品质内容，构建内容壁垒，探索更有吸引力的表现形式、缩短和用户的沟通渠道，是未来需要深入思考的。
文章来源：站酷 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以一个小小的齿轮（或者扳手）形象登场，“设置”在几乎所有产品中都是不可回避的模块，他允许用户在弹性范围内自定义产品，来更好地适应实际需求。
在一些产品团队的眼里，“设置”或许是一件非常简单的事情，因为大多设置模块的使用频次低，无关核心业务。所以当内容看似非常简单明确时，“设置”甚至会不经设计，由开发直接上手就干。但这样简单处理的结果被摆到用户面前时，各种糟糕的体验就纷至沓来了。找不到设置入口、不知道该如何设置的用户吐槽屡见不鲜。所以说，“设置”，说简单也不简单。
下面我们就从用户场景出发，深入挖掘设计逻辑，重新认识这个随处可见的小齿轮。
调研发现，不同性质、体量的产品，“设置”模块的功能设计存在着不小的差异。
ToC产品一般会提供关于用户自身使用习惯的设置，如界面语言、皮肤主题等。而对于ToB产品来说，除了部分与ToC产品重叠的用户个性化设置内容外，往往还有作用于整个平台、全体用户的系统设置权限，当然他们的可见用户并不是全体成员。
从上述对功能的简单描述可以初见，“设置”模块的目标用户也不会是一成不变的。
拿我们日常高频使用的浏览器产品来说，设置是开放给全体用户的功能模块，但它的使用频次很低，如一些关于性能、证书的配置，即使是浏览器的熟练使用者也可能对它很陌生。也就是说，哪怕是产品的高级用户，也可能是“设置”模块的新手用户。
而以技术导向的工具型产品为典例，繁杂的系统设置是产品为了满足不同客户间、复杂多变的业务规格，在系统中留出的弹性空间。在这个需求场景中，与产品对话的用户一般是系统管理员或技术支持人员等，他们对系统方方面面的经验认知都很充足，甚至系统设置就是其主要工作模块。所以，对于这类用户场景下的“设置”模块，“高效操作、成功结果”是至关重要的设计目标。因为高级用户往往不追求很强的互动性，更希望跳过流程和步骤，直接切入功能得到理想结果。
面向不同的目标用户，自然有不同的设计逻辑，本文接下来的内容，或有共同之处，但更侧重于面向第二种情况的思考。
思考“设置”的用户场景，使得设计逻辑的探讨更加有据可依。简单来看，“设置”的设计可以从三个环节切入：
设置前：如何向用户展示设置内容
设置中：如何设计用户的输入交互
设置后：如何保存生效或发生错误的处理
接下来我也将从这三个环节发散思考，从信息架构、展示编辑、默认值、帮助说明以及保存等多个方面来谈谈我对“设置”的一些看法。
成熟的“设置”模块，必然拥有良好的信息架构。这不仅是指“设置”内部的导航设计，同时也包括“设置”在整个产品的层级安排。这些导航、层级的确定，则会受内容信息体量、功能重要程度等影响。
首先，在“设置”内部规划一个合理且清晰的导航，需要在信息的深度和广度之间做好平衡。平衡架构的天然敌人少不了信息量冗杂这个令人头疼的问题。无论是在单个层级中内容过多，还是层级本身过多，都会给用户的快速定位带来考验。而通过调研发现，如Google、Salesforce等产品都选择在复杂的“设置”模块引入了全局搜索来帮助用户缓解查找某一功能的压力。
信息量冗杂带来的考验还有那些零散的、彼此关联不强的设置项。对他们的架构安排，很容易因为不知道怎么组织，便一股脑地塞进诸如“通用”、“高级”等的模糊分类中，不过这可谓是十足的懒人设计。想要搞定这些难搞的信息，设计者需要对设置内容有更深入的研究和理解，搞清楚它改变了什么、会影响什么以及后续是否会拓展更多关联设置，等等。
还有一个值得思考的细节：对于丰富多样的设置项来说，是将他们散落到直接影响的功能模块中合适，还是汇总于一个设置模块中更合适呢？或许在不同的场景里答案并不一致，我觉得这需要综合考虑该设置项的放权角色、配置频率、配置影响等因素。
完成“设置”模块的基本架构后，就该将目光投向那些具体的设置项了。就常见的设置内容而言，根据其适合的展示形式进行简单的抽象，主要分为以下两种：
1、适合以表单形式组织的内容：一般是具有独立影响又拥有相同特征标签的单条数据被整合到一个分组下进行展示与配置
2、适合以表格形式组织的内容：一般是具有相同固定结构的数据集需要进行统一管理，包括组层面的增删等
为每一个内容选择最合适的展示形式（当然也并不仅是上述两种），这个选择大多时候并不困难，因为“设置”场景的目标导向往往比较明确、直接。当然也不排除部分复杂场景的存在，这就需要我们多花些心思，以用户更易理解的展示形式完成功能性的表达。
在“设置”模块，展示与编辑的联系非常紧密。直接编辑和解锁后编辑的选择，主要取决于用户进入页面的常规诉求是查看确认还是编辑修改，以及这些设置内容的改动容错性是否良好，等等。
在本文讨论的“设置”场景中，每一个更改都可能对整个平台乃至全体用户产生影响。通过调研，我们发现多数用户对于默认值的沿用性不低。故，对于那些需要默认值的设置项，选择一个合适的默认值是值得审慎对待的问题。
了解用户习惯和业务需求是解题的关键。什么样的默认值最贴合用户的使用习惯，什么样的默认值能以最佳状态满足业务需求。例如，我们的堡垒机产品一般将日志保留时间的默认值设为365天，便是考虑到了用户习惯与产品性能的微妙平衡。
除了默认值的设计，恰到好处的帮助说明也可以让设置的用户体验变得更好。
我时常看到“设计的目标应该是完全删除说明文字”之类的论述，这好像正契合了简约至上、不要让用户思考等当下流行的宗旨。但，正如尼尔森十大原则的最后一条“人性化帮助原则”也指出，帮助和使用文档是有必要的。
结合“设置”的自身的特点：这是一个对产品进行底层配置（相对其他模块而言）的控制模块，对用户的认知与学习能力有着不低的门槛要求。也就是说，设置的内容对于用户是有一定难度的。我们需要更多考虑内容的帮助说明是否充足，不要想当然觉得用户能够理解。
所以，不难想象，设置模块的说明概率会远高于产品的主体功能模块。进一步探究帮助说明的设计：从形式来说，它可以是文案、配图甚至是一个视频讲解；从强度来说，它可以一次性出现、常驻于页面或是直接跳转帮助文档等。大多数用户并不希望在设置模块获得探索的乐趣，所以无论如何设计，帮助其快速完成任务是我们在设计“设置”时非常重要的一个追求。
“保存了吗”这不仅是每个设计师在电脑卡机时候会问自己的问题，也是用户在完成一系列配置操作后的疑惑。这就牵扯到了设置何时生效的问题。最常见的交互方案有两种：
1、每一项配置都即时生效
2、整个表单统一提交后生效
那么，哪一种方式更好？我继续尝试从业务需求和用户习惯两个方面入手：
“设置”模块的操作往往牵一发而动全身，试错成本其实是非常大的。之前听产品经理说过一个银行客户因为修改了某个小小配置项，而造成了巨大实际损失的例子。所以，在这样一个控制中枢般地位的模块中，即时生效的选用必须谨慎评估操作风险，减少用户轻易出错的机会。
同时，由于即时生效和表单提交这两种交互方式都非常常见，用户天然存在一种认知压力，也就是上面提到的“保存了吗”的不确定。所以，我们需要通过设计，让用户快速且准确地知道当前页面采用的是何种保存交互。
从调研和自身经验得出，以下几点都是比较好的思路：
1、实时的操作反馈可以帮助用户判断是否生效
2、尽量控制设置内容在一屏以内，这样无论是否设计统一提交的按钮（或者更改后出现），用户都可以轻易感知
3、将统一提交的按钮以悬浮方式明显地驻于页面底部，减轻内容超出一屏时的认知压力
4、慎重处理如开关、按钮、滑块等带有很强“即时生效”隐喻的控件
对于很多产品产品而言，“设置”是点击率不高的辅助模块。由开发人员直接上手，设置项很容易就变成机器语言的直译、迭代顺序下的铺陈，而用户是否可以接受这种简单粗暴的处理，就成了阿甘手中的那盒巧克力。
从关于“设置”的论述以小见大，哪怕是看似简单的角落，也存在着不简单的设计逻辑。我一直觉得，设计对于商业的价值在于推动沟通，即保证产品与用户的对话“时刻”流畅。所以，不要草率处置那些不起眼的边缘模块或简单功能的设计。
文章来源：站酷 作者：齐治设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计本身是建立在对用户、场景、问题的深刻洞察之上，而竞品分析是设计师耳熟能详的设计思维及方法。在自身的阶段性成长中，竞品分析也为久乔及工作带来了显著的增益。
关于竞品分析，大家聊了太多的“如何做”，而我想和大家聊聊“为什么做”。深究竞品分析存在的意义，在实践中设计思路及侧重点将更清晰明确，游刃有鱼。
竞品分析能够帮助产品设计，遵循存在已久的用户心智模型和产品实现模型——启发于 《雅各布定律》。
《雅各布定律》由尼尔森十大原则的创立者、尼尔森诺曼集团的创始人之一，雅各布·尼尔森（Jakob Nielsen）提出。
他认为雅各布定律更像是一种自然规律，只是在描述一个事实，而这个事实就是用户在其他千千万万个网站（产品）上积累经验，学会如何使用网站，当一个网站跟其他网站一致的时候用户会立刻知道该如何操作，但如果违反了雅各布定律，那么用户会毫不犹豫地离开。
简而言之，产品设计需要尽可能降低用户的学习成本，依据用户存在已久的用户心里模型及产品实现模型，进行任务和流程设计。
因为用户已经将大部分时间花在行业头部的产品，这意味如果你希望他们能够愉悦并持续的使用你的产品，那么你的产品需要跟别人的有相同的操作方法和使用模式。
「 YouTube2017年改版前后的对比，在新版中，网站框架和功能上几乎没动，只是在UI上做了顺应新的设计准则，比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别，而且还给用户提供了旧版的选择。」
遵循用户认知，对互联网产品有着潜移默化的影响，也印证了尼尔森的《雅各布定律》。这些“影响”在竞品中随处可见，并且符合设计原则及心理学。
同类型产品给用户的心理暗示趋于一致，相近的产品实现模型，让用户快速理解产品是如何工作的。
「 社交App合理的概念模型，将会暗示用户如何发展好友关系：精准搜索 → 发送好友申请→ 建立好友关系 → 即时聊天 → 关注动态... 」
用户深受行业头部产品，实现模型的教育，建立了认知及行为习惯。所以我们会发现，行业诞生的新产品及迭代的头部产品遵循着一致的概念模型，规避重新教育用户的成本。
我们在不同类型的产品上都进行顺畅的操作，是因为产品向我们示意了一致的可交互能力，简称“示能”。
「 文字末位带有箭头，表示可点击查看更多信息；图片带有数字角标，暗示我们可以左右滑动切换... 」
保证产品示能与行业竞品一致，为用户沉浸式体验建立基础，避免用户使用时产生疑惑二次思考。
当页面映射关系是用户所熟悉的，已存在的认知便可让用户触达目标，免去学习成本。
「 协同软件的消息页面，页面结构及功能分布大同小异，明确地传递各元素之间的映射关系：选中聊天列表的对象，右侧会出现对应的聊天窗口，窗口下方的输入框可以发送新的消息。」
主要体现在产品表现层的视觉符号，传达给用户的意义一致。
「 小红点表示有未处理的信息；“笔”代表可填写或修改。」
为自身产品寻求体验及商业的更多可能，打破既定的思维，是竞品分析的关键。围绕不同类型的竞品，直接竞品及间接竞品，设计师的分析侧重点及借鉴取舍也有所不同。
对于产品目标、核心功能、用户群体高度一致的直接竞品，设计师在明确目标后，梳理核心功能设计与竞品之间存在的差异，取长补短。
剖析竞品体验层比自身产品出色的原因是什么，如何更好地解决用户的痛点；当然也需要反观自身产品存在优势的关键，能否通过数据、反馈再进一步拉开差距。以及如何规避短处...
「 2月登顶免费社交榜的“啫喱”App，通过创造的潮玩虚拟形象的新型社交产品，可进行各类有趣的虚拟形象互动。同样布局虚拟社交的大厂，字节跳动也推出了“派对岛”App，潮玩形象可结合实景化的实时线上活动社区，可以说是各有千秋。
二者便是典型的直接竞品，将会不断的迭代，共同期待他们相互的“取长补短”吧！」
由于互联网的信息透明，直接竞品趋于同质化，给与设计师的启发也有限。因此，将目光转向间接竞品是非常有必要的。
寻找产品目标、用户群体相近但存在差异，但业务场景及功能也有一定相似性的竞品，作为思维的跳板，或许能为止步不前的现状注入灵感。
「 Chrome 最近上新的插件 Jam，这款插件可以在直接网页上打标记、录制gif、评论，并且和项目管理工具 Linaer 打通，可及时将信息同步给项目人员，提高项目协作效率。
在企业协作平台中，视频会议、线上协作等协同产品的在线标记功能，完全可以对“Jam”这款插件进行分析，来实现对于关键内容的信息传递流程和用户体验的提升！」
尽管有些产品在业务及用户上与自身产品没有重合，但是在行业理念、实现技术、交互行为层面，极具前瞻性。在合适的时机，尝试将前沿的“变化”，融入自身产品，转化为产品设计的亮点。当然这取决于设计师平时对科技、行业的关注及积累。
「 21年飞书妙计上线，令人眼前一亮：飞书可将会议中的音视频内容，实时生成文本形式的会议纪要！
ToB业务中，多人交流协作的场景，比如客户接洽、人选面试，如果相关业务功能加持音视频自动转文字的能力，用户记录内容的体验及效率想必也会有所提升。」
借助竞品分析，能够帮助设计师发散思维、寻找设计突破点。在设计思路聚焦的环节，我们也能通过竞品分析进行验证。
资源允许的情况下，设计师可以基于《用户体验要素》中的五要素：战略层、范围层、结构层、框架层、表现层，对竞品进行全方面的竞品分析。
战略层分析主要围绕“为什么开发产品”，我们可以了解竞品的产品目标、用户需求，以及二者结合的商业目标。为了达成最大化商业效益，竞品进行了哪些成功的业务、商业化设计。
自家产品的战略层目标，与竞品的是否有共同点或者相似性。如果有，已制定的设计策略与竞品成功的解决方案是否存在差异，能否解决产品目标及用户需求，在竞品分析中能得到初步验证。
「 鼓励“先进团队，先用飞书”的企业协作平台，飞书桌面端在团队切换后数据隔离展示。也正因如此，左侧导航在常用功能区下方，预留特定区域便于用户快捷切换团队，提高效率；
然而钉钉桌面端在同一个信息容器，展示多团队的协作信息(如即时通讯)，将团队切换的功能入口隐藏至二级菜单，尽管有“串场”风险，还是将更多的空间留给常用功能，“让工作学习更简单”。
显然二者的差异化设计，归根于各自的战略层考虑，用于达成特定的产品目标和用户需求。」
范围层等其他几个要素，都能够验证相应的设计思路。
为了提高团队产研效率及商业效率，设计创新或借鉴都会相对谨慎，避免沉没成本。
所以在一些资源相对紧张的项目中，为了及时验证多个设计方案的可行性，可对竞品类似的功能设计进行分析，再结合现有的资源（排期、开发投入），从多个设计方案中确定解决方案。
「 在系统表单设计中，提交前用户存在多次编辑的诉求。为了给用户提供更灵活高效的体验，关于表单的保存，我们团队预想了3个，在用户体验、技术实现上有较大的差异的设计方向：
1）用户主动触发保存
2）用户离开询问保存
3）系统自动实时保存
显然自动实时保存的体验最佳，也是团队倾向推动的方向。但B端系统中的使用相对少见，考虑用户的学习成本及技术实现，落地及项目收益存疑。
但发现间接竞品，云文档（语雀、飞书文档、印象笔记）的内容实时保存功能，非常贴近我们的体验预设。
最终敲定方向 1，围绕用户构建自动保存的体验认知。间接云文档的实现方式做降级处理，数据仅仅保存在前端浏览器缓存，而不是像云文档一样直接存储至云端服务器。项目落地设计目标，并没有暂用过多的开发资源，项目也如期推进。」
文章来源：站酷 作者：久乔_9Joe
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
绝对时间包含：年月日、时刻
绝对时间适用于对时间精确度要求较高的时候，比如说订单创建时间、某项活动开始/结束时间、特定节假日简称等。绝对时间在信息表达上更加精准、正式，给人确定感和安全感；但是内容显示过长，占用的空间较大。
相对时间的展示形式：刚刚、XX分钟前/后、XX小时前/后、X天前、昨天、明天、今天等
相对时间适用于对时间精确度要求不高的时候，比如说消息、通知类功能、Feed流。采用相对时间对用户来说理解成本低，不用去往前推算出发布的具体时间点；但是不够精确、并很难衡量两个时间点的临近性。
目前主流App上，年月日的常见的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ～ 2022-12-30”，那这些日期格式是否都正确呢，日期的连接应该使用什么标点符号？
《中华人民共和国国家标准GB/T15834-2011标点符号用法》中对于连接号、点号、分隔号的使用场景有明确规定。
连接号（短横线“-”、一字线“—”、波浪号“～”）：标示某些相关联成分之间的连接；
点号（.）：作用是点断，主要表示停顿和语气；
分隔号（/）：标号的一种，标示诗行、节拍及某些相关文字的分隔。
基于国标对于连接号、点号、分割号的使用场景说明，用阿拉伯数字表示年月日时应采用短横线“-”。在比较正式的文件、公告中，日期一般不用分隔符连接，而是直接采用中文的年月日连接。
Antdesign规定日期范围需要在日期或时间范围之间显示波浪号 （前后需要空格），这种方式是不符合标点符号的使用规范的。
在标示时间的起止时，应该使用一字线“—”，而非波浪号“～”，波浪号主要用于标示数值范围而非日期的起止。日期带有分隔号横短线“-”时，可以采用“至”作为连接符；日期不带有分隔号横短线“-”时，可以采用一字线“—”作为连接符。注意日期与连接符之间用「空格」隔开。
时间计时方法包含十二小时制、二十四小时制。在设计过程中注意区分十二小时制，上/下午和A/PM的位置区别。
当日期和时间连在一起时，两者之间用「空格」隔开，如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。
涉及到周的时，可以将周放在日期与时刻之间，用「空格」隔开，如：“2022-01-01 周三 16:00:00”、“2022年01月01日 周三 16:00:00”。
涉及到日期和时间范围时，可在表示日期范围的基础上添加时间，如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至 2022-12-30 16:00:00”。
以月、日为标志的事件或节日，用汉字数字表示时，只在一、十一和十二月后用间隔号；当直接用阿拉伯数字表示时，月、日之间均用间隔号。
文章来源：站酷 作者：吴大只
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？
好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。
本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。
一、弹窗的基本介绍
二、弹窗体系分类
三、弹窗的使用场景
四、如何设计有效的弹窗
五、需关注的问题点
六、总结
当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。
弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。
弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：
◇ 容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；
◇ 蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%
的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；
◇ 文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；
◇ 图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；
◇ 表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；
◇ 选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；
◇ 图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；
◇ 按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。
用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。
模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层...等。
1.1 对话框Dialog/Alert
对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备1~3个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。
1.2 动作栏Actionbar
动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。
动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。
1.3 浮层Popover/Popup
浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。
例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。
相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：
2.1 提示框Toast/Hud
用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现2s左右自动消失。
Toast只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud会使用文字+图标样式，例如添加到购物车、关注成功等。
2.2 提示对话框Snackbar
Snackbar早期只是Android系统的一种弹窗控件，后在iOS、Web前端都会使用到，可以看作是toast的加强版。一般只出现在屏幕底部，存在的时间比toast长，提供0~1个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。
Snackbar反馈的重要程度强于toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。
2.3 通知Notice
最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。
2.4 透明指示层HUD
HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。
当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。
风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。
前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。
任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。
这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。
例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。
二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。
二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。
当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。
常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。
非模态弹窗toas样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。
优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。
视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？
交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。
首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?...）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？...）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。
其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。
在UI设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：
◇ 基础定义：利用清晰易懂且简短的文案描述弹窗组件的内容及目的。
◇ 类型及构成：明确弹窗的类型，如模态/非模态，将其拆分并注明每个小元素的具体信息。
◇ 规则用法：弹窗出现的位置、包含的具体内容及信息的展示规则，比如哪些场景可复用。
◇ 交互状态：交互流程逻辑清晰，拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。
设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。
弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。
△ 例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。
因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐性也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。
针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。
例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。
本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。
能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。
文章来源：站酷 作者：大漠飞鹰JYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
提及“设计的温度”，不得不提我们老生常谈的“情感化设计”，提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次：本能层、行为层、反思层，层层递进。
1/ 本能层的设计，是视觉的直接反馈，是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣；
2/ 行为层的设计，注重的是效用，产品功能是否好用，易用，用户使用产品过程中能否高效解决问题；
3/ 反思层的设计，是情感化设计的最高层次，指用户使用产品后，是否建立情感连接和记忆反馈。
因而，它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。
如果一款产品在满足基本功能，对于用户有用，同时好看并且易用，使用完之后还能产生愉悦以及满足感的话，那么这将是一款好的情感化设计产品，那必然是一个有“温度”的设计。
如果一个项目本身充满社会使命和责任感，那么“有温度的设计”将可以助推项目的落地链条，让使用平台的用户有“温度”，更让项目背后的人员感受到“温度”。
因为，接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗，用互联网思维去帮扶社会的乡村孤寡老人和留守儿童，用有温度的设计去践行有温度的项目。
随着我国社会经济的快速发展，农村青壮年劳动力转入城市，人口老龄化趋势加剧和家庭结构的演变，“空心村”越来越多，因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计，在农村独居和空巢老人超过3000万人，留守儿童也达到了近2000万人
孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题；而留守儿童因为缺少父母监管和陪伴，极易产生很多身体及心理问题，这两大群体是我国人群结构的重大组成部分，一个是未来的花朵和希望，一个是曾经发过光热的迟暮老人，他们需要关爱和守护，需要有一座“有温度”的桥梁，为留守儿童撑起蓝天、健康成长；为孤寡老人送达温暖、安享晚年。
基于社会现状，践行社会责任，腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会，预想搭建一个线上与线下结合的平台，成立“为村暖心小站”，立足于脱贫地区的农村社区，主要服务农村的一老一小以及其他需要帮助的困难群体，解决日间照料、健康护理及心理关怀等诸多问题。
“暖心小站”的整个帮扶路径是以线上+线下相结合的模式，依据产品需求，在线上可以招募志愿者、发布救助需求、触达爱心人群；在线下建设实体服务站，开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。
那在线上的呈现形态上，主要考虑APP和小程序两种方式，经过对比分析，APP稳定性高、体验好，但是在乡村的受众群体内，互联网基础还是很薄弱的，要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广，占有率很高，那么依托于微信的生态、建立小程序，在推广层面会更加便捷和高效。同时，暖心小站本身结构简单，是一个非常轻量化的应用，这种特性也更适合以小程序为载体。
在线上的产品框架上，设立两大专区：关爱老人专区和呵护小孩专区，各自创建知识宣导、在线课堂、爱心募捐等版块内容，同时在线上召集志愿者，在线下成立社区服务站，开展帮扶活动，然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。
确定框架之后，梳理角色和场景。本项目主要包含线下服务站的站长，工作人员，志愿者以及社会的爱心人士。
站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采，社会的爱心人士通过线上平台查看对应信息并参与对应活动，最终帮助农村的一老一小解决各种帮扶问题。
经过梳理分析，平台使用人群的年龄跨度较大，30岁到60岁这个群体占到了80%左右，所以在产品的呈现形式上将兼顾青年到老年的年龄跨度，让设计更友好，让产品有温度。
基于前面分析，在农村现实环境中的孤寡老人和留守儿童，他们生活是灰暗的，情感是封闭的，他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖，让孤寡老人可以健康生活，让留守儿童可以健康成长。
所以在设计目标的确定上：让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。
品牌色的推导，是站在线下的实际场景感受来提炼，乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的，他们需要金灿灿的阳光给生活带来希望，而我们日常所的见的公益组织通常都是以红色系为主，似乎已经形成了作为公益组织的标识色，因为这种大红色传递爱心、带来温暖。
这些颜色都很有代表性，黄色代表阳光，红色代表公益，而暖心小站，将这两种颜色进行叠加融合，形成阳光橙，再以阳光黄纳入辅助色，形成温暖、友爱、活力、阳光的色彩体系。
在设计原则上，考虑到我们的用户群体年龄跨度比较大，一些年长用户互联网基础薄弱，为了让产品更有亲和力，让年长用户都能轻松上手，所以在策略上制定简单、易用、温暖的设计原则，保持框架简单清晰、交互简单易用，让产品有温度，让用户觉得有用、好用、还想用。
在“简单”方面，保持产品的页面框架要简单，结构要清晰，让用户清楚知道自己在哪里，所以在产品形态上只做了内容页的垂直展示，没有过多琐碎的信息入口，让页面信息更集中，浏览体验更聚焦，让年长用户也可以简单使用。
在“易用”方面，简单的框架和结构是易用的基础，在视觉元素的排列上，通过加大的图片、加大的间距、加大的圆角，通透的页面布局可以让内容陈列更集中，获取信息更高效。页面的间距以4px为基数，分为5个跨度，在统一性的基础上让界面更有节奏感，层级更清晰，从而提高产品的易用性。
在“温暖”方面，主要体现在在调性、元素、和内容上：
调性：以“温暖橙”+“阳光黄”为品牌色系贯穿始终，形成温暖、阳光的整体基调；
元素：在常规尺度上进行适当加大，加大的字体，加大的卡片占符，加大的点击区域，让产品更照顾年长用户的操作习惯，让产品更有温度；
内容：在内容及主图的运营展示上，突出“温暖”的调性，增强用户的共鸣，拉近用户与产品之间的距离。
整体以大面积的“温暖橙”为基调进行铺设，营造温暖阳光的质感，顶部展示产品名称和合作logo，增加产品的权威性和信赖度。
自上而下，控制大的间距和留白，分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。
一老一小的入口及详情：通过大头图的形式加强专题感知，引导用户点击。详情内展示相关的关爱资讯和助力入口，让用户可以选择性的进行点对点帮扶。
小站详情：分为小站介绍、人员风采、小站活动、和运营概况四个部分，清晰展示线下暖心小站的各项事务，让线上用户对线下小站有更全面的了解。
个人中心：功能简单，布局简洁，根据不同身份类型展示不同入口。作为站长的话，拥有志愿者审核、活动管理的权限，整体表现形式以统一的卡片式陈列，让内容更聚焦。
秉持“简单、易用、温暖”的设计原则，尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖，让用户想用，让产品好用。
经过多次推导与线下团队配合，小站1.0在今年5月初上线，第一批试点小站正在使用中，得到了较多正向良好的反馈，为乡村的一老一小带去了许多暖心的帮扶行动。
产品上线之后，通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动，比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动，在重庆周家寨服务站新建了日间照料室，提升老人的居住生活质量。
今年5月20号，在中国互联网公益峰会上，为村暖心小站进行线上交流展示，获得了很多与会代表的关注和认可。
截止2021年7月，平台上线了两个试点小站，共举办了数10次线上+线下结合的活动，活动参与了520人，受到36000人以上的关注。暖心小站的建立和运营，对乡村的“一老一小”提供了更加有针对性和个性化的服务，同时加强对当地社会组织的培育和孵化，提升了服务对象的生活质量，促进和谐社区建设，助力乡村振兴。
通过这些试点小站的成果和反馈，让设计目标也得到一定程度的印证，让产品体现了“有温度、有故事、可以连接情感”的桥梁。
随着互联网的发展，人们对于产品不再是简单的形式服从功能，而是逐步转向形式服从情感。让设计回归情感，让有温度的设计去创造有温度的产品，可以增进人与产品之间的情感连接，让产品更有生命力。再者，用有“温度”的设计思维，去捕捉和解决社会问题，通过具有社会责任感的设计，推动社会进步，形成坚实有用的“设计力”。
那么，如何提升自己的设计力呢？可以概述三个保持一个向善。
设计需要坚持，而坚持源于热爱，保持热忱之心会发现许多美好的事物，同一个需求会自发性地探索很多不同的解决方案，因此会洞察需求背后最本质的东西，切入要点寻找最优解。
还有一句话：“设计路上，唯有热爱，方能抵御岁月漫长”。
这里的“敏感”指的是设计师要有好奇心，善于发现新事物，善于追踪最新行业动态，是一种职业敏感，是一种自觉行为，表现为热情、兴奋、敏锐，对新事物充满热情，对于新发现充满兴奋，能够特别敏锐的捕捉社会痛点解决设计难题。
生活中常说，有共情的人往往都特别感性、多愁善感，泪点低笑点也低，因为特别有代入感，而且对事物特别专注。
设计上所说的共情力则需要保持感性，同时也需要理性加持，不偏不倚。让设计师自己能切换到项目内的各种角色，不把自己当成局外人，将自己融于产品本身，随时切换为不同用户的视角，更能深入地发现、分析和解决问题，让设计站得住脚、更接地气，让设计有依有据。
设计的最终目的是传递需求、解决问题，这就意味着设计的初衷不同，那么最终的导向也会截然不同。
设计向善，保持“善”的初心，主张设计回归社会、回归到人心最本质的出发点，做有温度的设计、有仁心的设计、可持续的设计。
关注社会问题，保持一颗敏感而善良的心，用“设计向善”解决社会痛点，坚实巩固自己的设计力。
文章来源：站酷 作者：峰HENG
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
无论是高保真还是低保真原型，设计人员在软件中的展现所有效果，最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时，设计就不可以再随意修改。
最重要的不是在设计软件中展现的效果，而是实际在用户设备上实现的效果，因此在设计时，要提前考虑代码实现的成本。
盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成：“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。
Border：围绕元素外围的边线。
Padding：元素及其子元素之间的间距。
Margin：元素和其相邻对象之间的间距。
点（pt）取决于屏幕物理尺寸大小，是绝对尺寸单位。对应@1x图的1px。
像素（px）取决于实际屏幕显示分辨率，是相对尺寸单位。在@2x图情况下1pt=2px，在@3x图情况下1pt=3px.
建议使用“@ 1x”进行设计，其他尺寸图可以从@1x进行衍生。
如果是以@2x进行设计，那么若要得到@3x则要先缩小50%然后再扩大300%，增加了不必要的工作量，并且很容易出现奇数、小数等不便利数值。
创建的每个UI元素都应该和像素网格对齐，防止出现半像素的“锯齿“效果。
文本由于其图形的特殊性，难免会出现无法对齐像素的情况，这里可以忽略。
文本是页面中最重要的元素之一，但因为其本身的多样性，产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格，将基线网格采用4pt进行等距划分，来和其他元素进行和谐搭配。
使用8的倍数来定义区块和内部元素的尺寸，间距等。
当区块元素为文本（例如按钮）时，将文本设置成其余部分一致（或者平台预先定义好）的大小，然后使用padding来确定区块大小。如果是全宽的元素，使用padding来确定高度，并使用一致的水平边距来确定宽度。
硬网格：将元素放置在以8为增量定义的显示网格中，使用额外的透明背景元素，和前景元素组成一个整体。
软网格：保证元素之间的的间距为8的倍数，以此获得更快的处理速度，从而得到更流畅的体验。
当所有尺寸都遵循相同的规则时，就有了一致的UI。
减少自定义的尺寸规则，得到更快的代码运行速度。
无论设备外形如何，主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。
有一些屏幕的尺寸无法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，适当调整区块的大小来进行适配。
确保开启了“对其像素网格”选项。
如果根文根大小设置了16px，则可以使用0.5rem的增量在8点网格上构建布局。
如果不喜欢这样做，或者是不喜欢rems的使用方式，可以使用CSS或预处理器间距变量来处理布局，同时保留变量以供后期维护。
大多数软件都可以设置快速“微调”，一般默认为10px，sketch中可将其调整为8px，便于快速的工作。
学习并善用快捷键，提高工作效率。
图标设计通常需要进行视觉修正，因此，在其周边放置透明框架（例如Hard Grid的方式），来保证整体的一致性。
设计时经常会放大预览界面来进行设计，这会导致会略整体；如果以缩小的尺寸会导致看不到细节，因此要经常变焦画面来确保能看到整个画面。
文章来源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
什么是设计系统？
设计系统 = 设计价值观和原则+设计规范+场景定义+工具包
为什么要构建设计系统？
问题1:
随着业务的拓展，产品和项目数量不断增加，发展中期设计和交互上不一致性的问题浮出水面，需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验，以满足用户预期并向其传达统一的品牌认知。
问题2:
无统一的设计规范和交互原则，没有统一的UI组件库和代码库，各团队设计和前端需花费大量资源陷于低质量沟通协作和重复造轮子，拖慢产品和项目设计和开发节奏。
问题3：
产品项目数量 vs 产品设计师，人员配比严重不足的情况下，团队的设计师们无法从杂/乱/急的日常需求中剥离出来，影响构建产品壁垒的质量和速度。
设计系统的价值
产品侧：
设计侧：
开发侧：
测试侧：
主流设计系统-他山之石可以攻玉！
无需犹豫，直接基于现有的优秀的开源设计系统，
设计系统的打造不必从0-1构建， 例如：Ant Design业界优秀的开源设计系统，我们完全可以站在前人的肩膀，最终生产出符合达观品牌、业务特性的设计系统。
字节跳动 Semi Design：https://semi.design/zh-CN/
字节跳动 Arco Design ：https://arco.design/
以原子理论构建设计系统
原子理论设计介绍
首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost提出的，他从化学元素周期表中得到启发，发现在化学世界中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。根据他的理论，设计体系主要包含 5 个层面：原子、分子、组织、模板、页面。
原子理论设计不是一个线性的过程， 它更像是一个心理模型，来帮助我们把用户界面看作是一个连贯的整体，同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面，让我们更深入的了解每一个概念哦～
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、间距、阴影等。
简单概述下来就五个字：色、形、质、构、质；
在界面中，分子就像是一个由UI元素组成的相对简单的组织。如：按钮、弹窗、搜索框等。
以按钮为例，它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联原则组合成一个分子，图标和文字互相配合传达意义，颜色定义了按钮的特性，间距为按钮定义了一个尺寸和规范。
组织(Organisms)层
分子+原子组合成更复杂和可扩展性的模块，这个称之为组织（区块组件），如：列表操作区块、列表展示区块、表单区块、数据统计卡片区块。
以表单为例，一个表单我们可以通过数量的组合，以及间距的调整，元素的增减，在界面中表达不同的场景和含义。
模板(Templates)层
由原子+分子+组织构成的更复杂更具拓展性的模块，如：分组表单页、页面级表单、详情页、列表页、异常页、dashborad。本质就是线框图，模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构，页面中的信息是占位作用，而不是页面的最终内容。
页面(Pages)层
带业务逻辑的场景案例如：标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板；
页面是模板的具体实例，填充了真实的内容（图片、文字等）后形成页面，也就是常说的带交互逻辑的「视觉稿」即为高保真原型图，将占位符替换为有代表性的真实内容，使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。
关于设计系统的常见认知误区
误区1：设计体系就是设计规范或者组件库吗？
许多人认为设计系统就是单个代码库、组件库、设计规范，但实际上他们不是一个层次的东西，准确度的来说设计体系包含设计规范，组件库也是建立在设计体系内的，组件库是记录和共享设计模式的工具，就是设计体系工具化和表现层的部分；
误区2：设计体系的存在扼制了组织内创造力，会替代掉设计师？
抛出这个问题，是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点，我个人是很难以认同这个的，对design system的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合，需要调动整个团队的想象力和创造力，最终达到一个统一共识才有可能被实施和执行；
好的设计系统可以通过流程和机制促进创造力的，而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来，当然也不能过度依赖过往的沉淀资产，把自己定位为设计系统的创造者，而不是使用的工具人，不断的创造和贡献好的解决方案被整个组织采用，就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师，反而是一个企业内部尊重设计师价值的开始！是企业对设计文化的认可！
设计体系是动态的，永远是随着组织需求和用户需求而变化的，一切说自己已经完成了设计体系的建设的人都是错误的，都是将将静态的设计规范曲解成了设计体系。
正确管理机制：少数人负责管理，多数人参与贡献；避免你做、我用模式，这种生产消费模式非常内卷；避免如：我一个设计师为啥要用你的规范；这规范做的太垃圾用处不大，我才不用，用你做的规范；我苦逼做业务，你晋升拿结果的负面心态；
然设计系统也不是简单的靠少数的人1-2个月用爱发电就能完成的，设计系统是一群人，对一种做设计文化的认可，每个与之相关的人都应该是设计体系的贡献者与布道者！
需要克服的潜在难题
产品业务复杂性提升，提升建设难度
难以控制创造与控制间的平衡；
复用与定制间的平衡，刻意追求复用率而容易丢失整体观，为特定业务目标服务时不如灵活集中化式方法等
资源问题，容易被当成是辅助项目而缺乏预算等资源….
缺乏良性有效的组件库更新迭代机制，虎头蛇尾….
收益短期不明显，搭建体系的长期收益难以被组织短期内察觉；
尽管有一系列潜在的问题，但总的来说设计体系的带来的收益是大于这些投入的，总的来说方向是没错的，下一个关键问题是：我们如何去建立一个更优秀的设计体系。
文章来源：站酷 作者：从你的世界经过
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com