202403 - 设计每日一贴-专注优秀UI设计与软件开发-北京兰亭妙微

首页

212024-3

暗色模式的优势

博博

一、用户体验层面

1.提高阅读舒适度

(1).对比度和可读性

在相同的对比度条件下，浅背景上的黑字比深背景上的浅色字阅读效果更好。这表明，优化对比度是提高阅读舒适度的关键因素之一。

浅背景上深字与深背景上浅字的视觉对比

(2).用户偏好和满意度

一项针对用户对暗色模式的使用体验的调查显示，与默认的白底模式相比，用户在使用暗色模式时报告了更低的视觉疲劳和更高的满意度。斯隆（Sloan）的一项研究在1977年就报告说，如果更多的光线通过混浊的透镜到达眼睛，则出现畸变的可能性更大，即暗模式对视力障碍者更好。

对于长时间从事屏幕工作的人来说，暗色模式对眼睛更加友好

2.减少视觉疲劳

(1).人眼生理特性

暗色模式能减少屏幕发出的光线，这有利于减少眼睛疲劳和不适，特别是在低光环境下，人眼的虹膜会打开以接受更多光线，而暗色模式提高了减少的光源，减少了对眼睛的刺激。

亮/暗环境下瞳孔大小的变化

(2).蓝光辐射减少

人们通过长期研究发现短波可见光，即紫光和蓝光对眼底视网膜有相当程度的破坏作用，而人们通常把这种可见光波长中高能量波段(400- 470nm)对视网膜的损坏现象称为“蓝光伤害现象”。还有研究关注了暗色模式对蓝光辐射的影响。由于暗色模式降低了屏幕的整体亮度，因此也减少了蓝光的辐射。

可见光波段分布

二、设备电池寿命

1.降低屏幕功耗

在OLED屏幕上，每个像素都是独立发光的，当显示黑色时，相关的像素点会关闭，从而不消耗能量。这意味着，显示大面积黑色内容的暗色模式能够显著减少屏幕的能量消耗。

OLED屏幕发光原理

2.实际省电效果

以 Google 测试数据为例，OLED 屏幕的 Pixel 手机在时间段内启用深色模式并在使用地图导航时保持屏幕最大亮度，手机的电量消耗下降了 63%。

Google的测试数据

三、降低屏幕功耗

1.促进睡眠对于晚上喜欢在床上阅读或工作的用户来说，暗色背景有助于降低屏幕亮度，减少对褪黑素分泌的干扰，也有助于减少蓝光对睡眠周期的影响，从而帮助用户更快入睡并提高睡眠质量。

OPPO手机暗色模式广告

2.减少眩光

眩光是明亮的屏幕和低光环境之间恼人的对比现象，对眼睛具有一定的影响并造成眼部不适。暗色模式通过使用深色背景和亮色文字，整体降低了屏幕的亮度，这样在光线较亮的环境中，屏幕的亮光与周围暗环境的对比度降低，从而减少了屏幕反射光线对眼睛的刺激，降低不适。

有眩光与无眩光的显示器对比

四、打造沉浸式体验

1.减少视觉干扰

暗色模式提高了一种无干扰的工作环境，有助于他们专注于手头的任务，特别是在进行写作、编码或其他需要集中注意力的活动时，暗色模式能够减少视觉干扰。暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

编码软件一般默认暗色界面，有利于专注工作

2.增强视觉聚焦

暗色模式为视觉设计提供了更大的对比度，使得界面元素更为突出。这种高对比度不仅有利于内容的战士，也增强了用户的视觉聚焦，让用户更容易沉浸于应用或游戏的环境中。特别是在观看视频或进行游戏时，暗色背景能够使色彩更为鲜明，提升用户的视觉体验。

手游王者荣耀UI界面

作者：阿琳01
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(619)

212024-3

暗色模式的基本概念和发展历程

博博

一、定义及其在UI设计中的表现形式

1.暗色模式的定义

暗色模式是一种低光用户界面（UI）设计，也称为深色模式，是一种用户界面设计选项，它使用较深的颜色方案和背景，通常为黑色或深灰色，以减少屏幕亮度并提供更舒适的视觉体验。

iOS 13 亮色模式（左）与暗色模式（右）的对比

2.暗色模式的定义

(1).暗色模式在UI设计中的表现形式

设计师需要为暗色模式创建一个新的调色板，这通常意味着降低颜色的饱和度，以适应深色背景。同时，避免使用纯黑作为主色调背景，而是选择接近纯黑的深灰色，以确保阅读体验的舒适性和可读性。

亮色/暗色模式下主色需要进行调整

(2).对比度控制

暗色背景与文本颜色之间的对比度应该控制在WCAG2.0AA级标准以上，以保证内容的清晰度和易读性。对于彩色元素，也需要适当调整饱和度，确保整体色彩之间的对比度符合无障碍标准。

达到/未达到WCAG2.0AA标准的视觉效果对比

(3).视觉元素区分

在暗色模式下，设计师需要特别注意视觉元素的区分，通过足够的对比度来保证文字和图形的清晰可见。这不仅仅是简单的颜色反转，而是一种“弱光”主题的设计思考，旨在优化用户在低光环境下的视觉体验。

亮色模式中的按钮在暗色模式中显得太跳跃

二、历史回顾及发展脉络

1.命令行界面时代

在早期的计算机系统中，如DOS和Linux，终端通常使用暗色模式，这是因为早期的CRT显示器存在闪烁问题，暗色背景能够减少视觉疲劳，并提供较高的对比度。

Linux的终端界面

2.个人电脑时代

随着个人电脑的普及，图形用户界面（GUI）逐渐成为标准，此时大多数操作系统和应用程序采用了亮色模式，以模仿纸张的颜色并减少CRT显示器的眩光。

Windows2000的GUI

3.移动设备时代

智能手机和平板电脑的兴起带来了OLED等先进显示技术，这些设备的小屏幕和高分辨率使得暗色模式再次变得实用和流行，特别是在节省电量和减少眼睛疲劳方面。

iOS13的暗色模式

4.操作系统时代

近年来，各大操作系统开始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色应用模式，macOS和iOS随后也推出了可以根据时间或环境自动切换的暗色模式。

Windows10的暗色模式

三、设计趋势中暗色模式的地位

暗色模式在当前设计趋势中占据重要地位，以其减轻眼睛疲劳、节省电量和聚焦内容的优势受到青睐。它不仅适应低光环境，还提供美学上的新探索，响应了用户对舒适性和个性化选择的需求。随着技术发展和设计创新，暗色模式已成为现代界面设计不可或缺的一部分。许多顶级品牌和应用程序，如WhatsApp、Instagram、Google、Facebook等，都已经引入暗色模式设计，这表明暗色模式已经成为了一种广泛接受的设计趋势。

从左往右依次为：WhatsApp、Instagram、Google、Facebook

作者：阿琳01
来源：站酷

评论(0) 浏览(598)

192024-3

智慧电力可视化大屏管理系统

前端达人

Current Time0:00

Duration Time0:05

Loaded: 0%

Progress: 0.00%

作者：121Jay

链接：https://www.zcool.com.cn/work/ZNjc0NzczODg=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(485)

192024-3

《UnitLife》APP界面/交互设计案例

前端达人

下面开始：

作者：dodoheyiqian
链接：https://www.zcool.com.cn/work/ZNjgwNjI4OTI=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(467)

192024-3

深度剖析｜瓷片区设计指南

博博

瓷片区是我们设计师在平时的APP设计中经常遇到的设计需求，虽然只是界面中一块较小的区域，设计看似简单，但它涵盖了用户研究、设计心理、UI设计等多个设计知识点。瓷片区对于产品的推广、品牌的传播等也具有着重要的作用。我通过工作中的一些设计心得进行总结沉淀形成此篇设计指南，从多个维度探讨剖析瓷片区的设计方法，希望能够协助设计师更好的规划设计产品，增强用户的满意度和粘性，为用户带来更为舒适流畅的实用体验。文章若有不妥之处，还望共同交流指正。

前言

此篇文章通过讲解关于瓷片区的一些认知以及设计手法的设计指南，来帮助大家更好的理解瓷片区设计的重要性和应用方法。作为产品设计过程中的考虑因素和规则不是一成不变的，希望在未来的设计中能够有更多的方法和技巧指引设计师们完成更好更优秀的设计作品。

瓷片区是APP应用设计中经常出现的一款引导型组件模块，主要在首页主推内容区进行展示，和Banner区、金刚区并行三大运营板块，其权重较Banner区和金刚区略低，一般放在两者之下。瓷片区从外观上看就像是一块块瓷片一样组合“贴”在页面中，构成一组排列在一起的运营广告位，故统称为“瓷片区”。例如京东商城、美团、携程服务、个人中心等产品都含有瓷片区。

瓷片区可以在一个页面区域内划分出不同的组合，且每个区域内会包含产品主体视觉元素（图片）、标题、介绍文案、标签和背景等信息。瓷片区和banner作用较相似，但相较Banner区和金刚区使用更加灵活，应用场景较多。

瓷片区本质上就是运营内容区，它更接近于一个功能模块的外部固定广告位。它的展示内容虽然会随着时间场景变化，但是代表的功能模块是保持不变的，每个瓷片就是这个功能模块的窗口，引导用户进入对应功能模块中。瓷片区不仅较多在电商场景应用中，还可能出现在其他所有应用类型中。例如旅游、金融、娱乐生活等多类产品，但在工具类产品中却不太适用。

1.金融类

金融产品如银行应用、投资平台等，往往包含复杂的服务和功能。此类APP中的瓷片区可用于展示金融产品、投资理财建议等。通过专业的图表、数据和解析，运用图形化的方式简洁明了地传达信息，帮助用户帮助用户快速理解产品特点，更好地了解市场动态，从而做出更明智的投资决策。

2.生活服务类

在生活服务类APP中，瓷片区可以展示各类服务入口，如美食、旅游、休闲娱乐等。通过直观的布局、明确的分类以及醒目的图片，吸引用户进行探索和预订，帮助用户快速找到所需服务，提升用户体验。同时根据用户的浏览记录和购买历史，推荐相关的商品或服务。或者根据用户的地理位置和时间信息，推荐附近的餐厅、景点等，通过个性化的推荐方式能够提升用户的满意度和粘性。

3.新闻资讯类

新闻资讯类APP中的瓷片区可用于展示热门新闻、重要事件或专题报道。通过及时更新内容，瓷片区可以帮助用户快速获取最新信息，同时提高用户对APP的依赖度和使用频率。

4.虚拟类

对于软件、游戏或数字内容等虚拟产品，瓷片区能够通过创意插画或图形，增加产品的调性和趣味性，提升用户体验。

5.设计类

设计相关的应用或平台使用瓷片区也可以展示设计作品、设计理念或者设计工具等，通过视觉艺术吸引目标用户群体。

6.电商或商城类

在电商类APP中，瓷片区常被用于展示热门商品、促销活动等，通过精美的高质量产品图片展示和吸引人的文案，直接影响用户的点击率和购买意愿，从而促成交易。

瓷片区类似于一种产品服务展示，是主要负责流量导流功能，吸引用户注意力，帮助业务推广产品。瓷片区一般都位于用户最容易点击的区域，方便引导用户点击进入，使用户更容易寻找自己所需产品。在现如今的产品设计中，瓷片区具有着十分重要的作用和意义。

1.流量引导与转化

瓷片区是APP设计中不可或缺的组件，它是流量的入口和转化点。通过精心设计的瓷片区，可以有效地吸引用户的注意力，引导他们点击并深入了解相关的内容或功能。这有助于提升用户的参与度，同时增加APP内特定内容或服务的曝光率，从而促进流量的转化。

2.引导用户注意力

瓷片区通过展示商品图、代言人等视觉元素，有效吸引用户的注意力，起到引导用户点击和进一步探索的作用。

3.个性化推荐与用户体验

瓷片区通常也具备个性化推荐的功能，可以根据用户的兴趣和行为习惯，展示符合他们需求的内容。这种个性化的推荐方式不仅可以提高用户的满意度，还能增强用户对APP应用的黏性。同时，通过优化瓷片区的交互设计和视觉呈现，可以提升用户的使用体验，使其更加便捷、舒适地浏览和选择内容。

4.提升转化率

由于瓷片区能够集中展示多个促销信息或功能模块，它通常具有较高的转化率，这对于提升用户的购买行为或参与度是非常有利的。

5.增加产品留存率

良好的瓷片区设计能够提升用户的使用体验，从而提高整个产品的留存率。

6.业务推广与品牌展示

瓷片区是进行业务推广和品牌展示的重要场所。设计瓷片区往往会考虑到美观性和艺术性，这有助于提升产品的整体视觉效果，增强用户对品牌的良好印象。通过出色的视觉展示核心产品或服务，帮助企业有效地传达品牌形象和价值，吸引潜在用户的关注。同时，结合特定的营销活动或促销策略，瓷片区还可以提升用户的购买意愿，促进业务的发展。

7.数据收集与优化

瓷片区的设计和实施还涉及到大量的数据收集和分析工作。通过对用户点击、浏览等行为的追踪和分析，可以了解用户的偏好和需求，为后续的优化工作提供数据支持。这有助于APP不断改进和完善瓷片区的功能和表现，提升整体的用户体验和效果。

在众多产品中，通过瓷片区的设计能增加对商品、功能的曝光，使用户群更愿意去购买或了解感兴趣的商品、功能。设计师根据瓷片区导流入口-落地页-转化率设计，通过整个流程中收集数据，提升优化设计体验，实现设计价值。

瓷片区是在一个APP中将一块矩形区域内划分出不同的矩形组合，每个二级矩形内一般会包含标题、介绍文字、主体视觉元素、标签等信息，通过摆放推广相关的内容吸引用户点击进入。

1.瓷片区是具有营销性的功能区域

瓷片区在设计层面上是具体的运营模块，而不是一种单纯的设计形式。瓷片区是对于存在的产品进行流量扩充，是提高产品点击率，是产品存在后方便调整流量使用。下图中遮照区域是产品的核心功能区，不是简单的营销入口，不能被删除，否则会影响用户使用。

2.瓷片区是静态固定的区域模块

APP软件中常出现功能列表页，它是后台获取数据的入口，是一种整齐排列，一层层叠加的片区，可以以一个单独模块的形式出现，不是像瓷片区类似贴瓷砖组合呈现。在没有产品展示的情况下瓷片区可以显示空状态，区域整体拼接结构不变，以静态固定状态显示。下图中页面本身为功能列表，模块性质本身不属于营销性质。

3.瓷片区不是金刚区

瓷片区不是设计形式，它的拼接表现形式不是只限定于瓷片区可以用，在任何其他位置和模块都可以采用这种样式进行设计。瓷片区的功能权重较金刚区略低，金刚区较多的为产品核心功能入口，而瓷片区多为运营活动的营销导流入口。

4.瓷片区不是快速入口

我们经常会看到一些快速入口会像瓷片区一样做成卡片拼贴的样式，但不管样式如何改变，瓷片区和快速入口在内容承载上有着本质的区别。

瓷片区有较强的诱导性，通过展示的信息元素、图片，如商品图片、产品代言人，来诱发用户关注并点击，在删除后不会影响产品的正常使用。快速入口它主要应对的是用户的主动行为，通过把功能入口密集的罗列出来方便用户进行查找和点击。它主要以展示主题入口相关图形为主，可以是图标也可以是图片、图形，如果删除会影响产品使用。

在瓷片区设计中，一般常见的类型分为3种：实物照片类、插画类、淘宝电商类

1.实物照片类

优点：识别度高，不需要明确的文案标注，图片代入感强，带有图片本身属性的名称和样貌、可复用性强，设计效率较高。

缺点：对图片素材要求高，图片显示有细节。

场景：对实物图需求较大的应用产品类型，如外卖、家居、服装、旅游等产品使用较多。

2.插画类

优点：可高度描述瓷片区的运营意义，精美的插画有助于提升细腻性，产品的细节品质和趣味，插画本身色彩明度低饱和度高，图形表现活跃，风格可控。

缺点：偏抽象的产品，没有合适的实图可替代，此类产品多以插画的形式去表现。矢量插画类页面对周围环境，所表现的内容需要进行一对一绘制，需要高度的概括主题的图形。由于针对属性比较强，所以难以复用。同时图形构图绘制时间较长，时间成本较高，绘制时需要特别注意对关键信息的提炼以及识别度。

场景：对设计风格有明显要求，如金融、理财、教育、生活等产品。

3.淘宝电商类

优点：根据用户反馈数据提供高频输送内容，与浏览数据时时对应，符合用户心智，转化率更高。

缺点：通过大数据真实反馈内容推动产品营销，每个产品单独以个性化形式展示，其他商家产品难以复制，具有技术实现难度。

场景：对设计千变万化，定制多样，常用产品为电商类等。

在进行瓷片区设计时，我们往往需要投入更多的精力进行细致化设计。而瓷片区究竟是由哪些元素组成呢？

背景、图片、文字是瓷片区主要构成元素，其中也可以运用插画、图标、标签、装饰等进行搭配使用，作为设计延展元素。背景、图片、文字在瓷片区一般必须出现，他们是对产品展现、描述或对营销目标表达的关键因素，插画、图标、标签、装饰等可根据设计风格、饱满度、产品需求上加以使用，丰富视觉，突出特殊标识。

瓷片区是一个需要视觉比较突出的组件，拥有较强的视觉感才能起到引导用户点击的效果。如何设计好瓷片区，从了解瓷片区各个元素设计开始。

1.框架布局

要了解瓷片区的设计方法，要先了解瓷片区的布局。在整个产品组件区域内，需要有效分配空间给不同的瓷片。首先在前期设计中，要优先确定瓷片区框架的四周内边距，然后再根据要放置的瓷片数量和重要性进行合理分配，一般可将模块拆分出 2*2、3*2、4*2、4*1的基本网格系统。

如果各个模块的重要性不同，可以将多个小瓷片按照纵向或横向排列合并为一个大瓷片，或将大瓷片拆分成多个小瓷片，以瓷片区域的大小来形成视觉权重的区分。

布局的结构的划分是整个瓷片区设计的主体，除了以上常用的最基本构图方法外，还有很多不同的瓷片分布方式，要通过不断的积累实验发挥自身创新能力，设计出更丰富的瓷片区展示形式。

2.元素排版

单个瓷片区内的元素一般由背景、文字、图片/图标/标签/装饰构成。常见的排版方式一般有左右排版、上下排版、对角线排版、Z字型排版这四种通用的排版形式。

（1）左右排版

一般在配图为图片、图标时适用，一般一行显示一块或两块瓷片。

（2）上下排版

采用上文下图的形式，一般在界面的功能入口较多时适用，一般一行显示不少于3块瓷片。这种元素排版，在营销型展示上一般为上图下文，偏功能型的展示则为上文下图。

作者：七色荧火
来源：站酷

评论(0) 浏览(1353)

192024-3

详解国内外十大设计系统（上）

博博

一、腾讯 — TDesign企业级设计体系

TDesign设计系统是由腾讯内部近300名设计师与开发者共同打造的一套完整的企业级设计体系。该系统旨在为企业级应用提供全面、高效的设计解决方案，助力产品经理、设计师和开发者实现产品设计和开发的一致性。

TDesign设计系统拥有一致的设计语言和视觉风格，确保了不同界面元素之间的和谐统一。同时，它提供了基于Vue、React、小程序等业界主流技术栈的组件库解决方案，可以构建设计统一、多端覆盖、跨技术栈的企业级前端应用。这些组件库包括桌面端和移动端两套风格统一的组件资源，能够满足不同平台和应用场景的需求。

除了组件库，TDesign设计系统还提供了丰富的行业组件。这些组件是基于统一的设计体系，由腾讯多个业务团队共同开发，并提供了多个垂直领域的行业组件库产品。这些组件经过精心设计和测试，能够满足不同业务场景的需求，并提升产品的用户体验。

二、King Design 设计系统

King Design设计系统是由金山云推出的一套企业级设计解决方案。它致力于为企业级产品提供高效、统一和灵活的设计体验。该系统具有一系列显著的特征，使得它能够满足跨平台、多设备操作系统的统一用户体验需求。

三、Ant Design 设计系统

Ant Design，出自阿里巴巴集团旗下蚂蚁金服之手，是一款全面而通用的设计系统。它旨在为设计师和开发人员提供广泛的用户界面组件、设计指南和工具，以助力团队迅速、轻松地创造出高品质的设计。

总的来说，Ant Design设计系统以其简洁美观的设计风格、丰富的组件库、基于React的开发优势、规则化的视觉样式配置以及TypeScript支持等特征，为前端开发者提供了强大且灵活的设计解决方案。这些特征共同使得Ant Design在前端开发领域具有广泛的应用和认可。

四、Atlassian设计系统

Atlassian设计系统具有几个显著的特征，这些特征使得它能够在全球范围内为数百万客户提供出色的设计解决方案。以下是Atlassian设计系统的主要特征：

Atlassian设计系统以其革命性的颜色方案、丰富的设计资源、可重用组件、直观的界面以及强调交互和用户体验等特征，为设计师和开发者提供了一个强大的工具平台，帮助他们创造出卓越的产品和体验。

五、IBM-碳设计系统

IBM碳设计系统是一个综合性的设计平台，旨在为IBM的产品和服务提供一致且高效的设计解决方案。该系统强调以用户为中心的设计理念，注重用户体验和界面美观性的平衡。

在IBM碳设计系统中，设计元素和组件都经过精心设计和优化，以确保它们在不同场景和平台下都能提供出色的用户体验。这些组件包括按钮、表单、导航栏、图标等，它们都具有高度的可定制性和可扩展性，以满足不同项目的需求。

作者：墨一影
来源：站酷

评论(0) 浏览(589)

192024-3

B端干货｜消息中心如何设计？

博博

一、如何理解消息通知

消息作为一种信息交换方式，抽象其过程，即为“在达到某一触发条件下，由发送方发送消息给到接收方，接收方可针对此条消息提供反馈”。需要包含以下关键因素：

消息触发时间与条件（何时什么事）：如按周期重复的时间点，或系统状态变更、用户操作结果等；
消息发送方（谁发现的事）：可能是系统、第三方服务商，或者某个用户；
消息接收方（谁需要知道）：即接收方，可能是系统中的全部用户，也可能会根据权限划分推送到某个用户群组，或者是某个特定用户；
消息触达渠道（怎么找到他）：短信、电话、App 内通知等；
消息通知内容（告诉他什么）：短信的文本、电话对话内容、通知消息的文案等消息通知；
消息操作反馈（他可以干嘛）：主要分为只读与操作反馈。只读，即当前消息用户在浏览后不需要做更多的操作，主要以了解为主；操作反馈，即当前消息需要用户浏览，且在浏览后做相应的后续操作。

好的消息系统要满足什么条件：

全面：通知的消息项要完整全面，用户才能放心地通过消息通知系统了解消息更新内容；
及时：消息的触达方式要及时有效，在消息相关事件发生后，用户能在第一时间获取到信息并提供操作反馈给到消息发送方；
高效：能通过合理的消息发送途径、允许用户设置及合并相似信息等方式避免过多消息侵扰用户，让用户能够高效处理消息通知。

二、如何盘点消息通知

设计全面、及时、有效的消息通知系统需要对消息的六个关键因素进行全面盘点，通过分步的方式逐步完成消息通知系统的设计。主要分为以下三步：

盘点系统中包含的消息项：包含其触发条件、通知来源及通知对象。需要盘点完整消息项从而保证消息系统的完整性；
确定消息触达渠道：包含各消息项的触达渠道。让所有消息都能触达到用户的同时，能够让重要信息更易触达，保证消息通知的及时性；
撰写通知内容与操作反馈：包含各消息项的通知内容与操作反馈。让消息内容能够有效地传达给用户，让用户能快速反馈、操作。

盘点的过程，即对消息通知清单的梳理。与产品、研发等团队成员的沟通也将使用该清单。最终目标即完成下方表格的填写：

1. 盘点系统中包含的消息项

当前步骤需要对系统中可能会有的消息项进行完整的盘点。盘点消息项可以通过按消息类型走查方式完成。市场上比较有共识的消息的分类方式主要分为禁止、警告、成功三类。但是在实际设计工作中还需要配合以下的消息分类方式去更完整地盘点消息项：

（1）盘点出的每个消息项都需要补充以下四个关键因素

触发条件：结合产品核心场景梳理完整。可通过状态图或泳道图查缺补漏（详见下段内容）;
通知来源：可能是某个内部系统，可能是某个用户组，也可能是某个具体用户。用户组的划分需要提前与产品、研发同事沟通完成；
通知对象：可能是全部用户，也可能是某个用户组或具体用户。由触发条件中的场景决定；
重要性：需要与团队沟通得出，可使用“高”、“中”、“低”的分类方式。

盘点完成的消息项使用下表进行整理，方便产品、设计、研发之间的沟通。

（2）用流程图或泳道图查缺补漏

对于 ToB 或 ToG 类含有复杂状态转换以及任务流的产品，除了使用分类的方式盘点消息项，还需要对照流程图或泳道图查缺补漏，避免消息类型的遗漏。

如，顾客线上购买商品并收取商品的商品相关状态变化如下图所示，每个状态都可对应着一条消息项：

当系统内包含多角色，且角色间流程有交互时，则可以使用泳道图的方式进行梳理。在泳道图中的每一条状态变更线，都对应着一个状态变更提醒。其中角色间交互的线，由于需要角色主动处理方可进入下一流程状态，这条消息一般会成为一条待办消息。

（3）什么类型的消息不要纳入消息通知系统

需要注意的是，虽然通知的完备性很重要，但某些消息在前期梳理时就需要从清单中剔除，包括：

单纯问候类消息，如“好久不见”等
不需要用户知道的消息，如系统后台数据更新等

2. 确定消息触达渠道

确定要推送给用户的消息类型后，需要给各消息匹配适合的通知方式。不同的通知方式会有不同的适用场景，可对照下表结合第一步整理的重要性配置消息的触达渠道：

消息触达渠道的配置结果到第一步的表格中：

平衡通知量：

一个好的消息系统需要能有效触达的同时不过分侵扰用户。这就要求我们对系统实际运行中可能会出现的通知量进行预估，并适量调整通知方式，让重要的消息能够更有效及时地触达到用户。

最终调整后的消息数量与提醒强度的关系最好能形成如下图所示金字塔的模式。

（1）合并重复消息

对于出现频率较高，且用户不需及时了解每条消息的消息项，可以通过合并消息的方式减少通知的数量。合并主要有两种方式：合并流程过往节点信息和合并同类消息。

合并流程过往节点消息：

对于一些流程类通知，若用户在响应或查看前，流程已经进入到下一阶段，历史节点的信息已经无需了解时，可合并过往流程节点的消息。如淘宝在展示物流时，针对同一订单的物流，仅保留最新的一条。

合并同类信息：

对于同类型消息过多，且用户不需要一一查看，只需在用户有需要的时候提供入查看完整内容时，自动合并同类型的消息，减少对用户的打扰。如 Instagram 在展示用户动态信息时，会合并同一天同一类型的消息。

智能推送：有条件的系统可根据用户行为分析及用户画像，进行智能推送。如基于用户画像按类型推送运营类消息，基于用户接受消息数量，判断是否合并消息推送等。

（4）渠道间消息项的延续与统一

出于信息持续性的考虑，触达渠道之间有部分关联关系在制定消息触达渠道时需要注意，如：

若系统包含App、web等不同端，相同通知类型的消息要保持统一
badge提示需要在应用内消息通知模块有对应消息提示
push消息的文案需要与应用内消息中心保持一致

3. 撰写通知内容与操作反馈

通知的内容需要满足简明易懂的同时，还要让用户能够快速处理。根据大量经验总结，通知内容的撰写可使用一个通用撰写公式：

在应用撰写公式写内容时，需注意以下要点：

重点前置：用户触达的第一场景，可能是手机的 push 消息，可能是多个消息的列表。这就要求在撰写文案时要将重要信息前置，如验证码、还款金额、事件提醒名称等。
敏感信息保护：由于无法确认用户获取信息的场景是否私密。对于金额、个人信息等隐私数据，建议在应用内或其他渠道提供设置项，提供用户自主选择是否在消息通知中包含具体数值。如果要默认显示，需要提前告知用户。
来源信息露出：在邮件、短信等非产品自有渠道推送消息时，用户可能会不确定消息的来源是否官方，需要包含消息来源信息。
提供触发时间：当消息的发生时间对用户后续判断、操作有影响时，需要在通知内容中包含消息发生的时间。

除了以上通用注意事项，由于渠道本身的特征差异，还需注意以下渠道相关的要点：

电话：需要设定客服话术标准，一般需要在会话开始前先告知用户来电是谁、有什么目的。在讲述完通知内容后，还应告知用户如何处理当前信息，如果想了解详细内容该前往哪个渠道了解。
短信-来源平台：由于通知类短信的发送号码可能会由于服务商设置的问题导致有多个发送号码发送给用户，用户无法根据号码判断发件人身份。故需要在短信最开始说明平台来源，建立品牌认知，避免用户错认为是垃圾短信。
短信-操作反馈：由于大部分短信为纯文本短信，相关操作反馈需要通过链接或者路径指引的方式提供。若短信包含详情链接，链接最好能设置为保留根域名的短链，如：点击了解详情：cdc.qq.com/d8djei
邮件：与短信相似会有来源可信度问题，邮件内容需包含品牌元素，同时发件的邮箱地址后缀使用产品官方网站。另外需要注意，某些邮件软件会设置不自动下载图片，邮件重要内容不要使用图片。
push推送（移动端）：是消息在移动端的特有触达渠道，由手机系统发送。发送的信息格式会受系统要求有所限制。最新的推送要求可参考相关设计规范文档或接口规范。应用的icon与名称系统会自动补充，撰写文案时不用包含。
微信公众号（订阅号/服务号）：由于微信对订阅号与服务号的消息推送方式会经常变化，需要确认最新的要求并撰写文案，相关链接见链接。

在完成通知内容以及操作反馈的梳理后，对消息梳理表格进行更新，补充相关信息：

自此，消息项的盘点已经完成，后续可基于该表格与产品、研发沟通。当业务出现变更时，也需要对表格内容进行同步更新。

三、如何设计消息中心

消息通知的触达渠道中，电话、短信、push 推送的呈现由系统决定。但是若产品有独立 App，往往需要消息中心去承载全量的消息列表。本章会介绍如何设计消息中心。

不同应用的消息中心处理方式受产品定位、应用框架等因素影响，设计差异化较大。但是可以通过按路径分割去简化设计：消息中心的入口、消息列表的组织方式、消息卡片的样式、消息的设置等几个部分。

1. 消息中心入口

主要有底部 tab、个人中心附近的图标入口、个人中心的菜单项等三种入口形式。

2. 消息列表

从消息中心入口点击后跳转到消息列表。由于消息的即时性，需要按时间维度排列。但是如果产品的消息类型较多，可通过分组合并或者分 tab 的方式提升用户触达消息的效率。

3. 消息卡片

消息列表中的卡片有两种样式可选，一般在一级消息列表使用小卡片样式，让用户有更高的浏览效率。大卡片样式则用于二级消息列表，或当前应用的消息数量较少时。

4. 消息中心设置

一般位于消息中心列表页右上角，若可设置项较多，则提供设置入口在二级页设置。一些常用的消息设置项如下：

全部已读：对于消息数量较多，且未读态会影响 badge 的展示时需要提供该设置项。点击后设置列表消息项全部已读。
发起对话：若系统包含通讯功能，一般会在消息类表页提供发起对话的快捷入口。点击后跳转到通讯录或好友列表。
设置通知提示方式：提供按消息类型设置某些通知项的接受渠道、接收时间段、各渠道之间的已读联动等，如微博；或者让用户选择消息通知的精确度，是否包含具体信息，如微信可接收“您收到了一条信息”的模糊消息。
打开消息推送权限：一些应用有一些状态更新或重要的提醒需要用户在系统设置中打开当前应用的通知权限，会包含提示用户打开通知的功能。这些提示需要在用户进行了如“办理事项”、“上传状态”等发起流程的操作后提示。不建议在用户启动 App 时就弹窗提示打开通知。

四、总结

设计时，首先要确定我们面对的是怎样的业务场景，根据业务诉求确定设计目标，从而选择合适的消息通知方式，不要过度使用通知给用户造成困扰。其次，在目标基础之上选择推送对象，以及具体的推送规则，分流处理信息，充分考虑消息通知的必要性和重要性，再做决定。最后，设计细节决定体验质量。

作者：嘻嘻念吖念吖
来源：站酷

评论(0) 浏览(611)

192024-3

详解国内外十大设计系统（下）

博博

六、HiUI -小米企业级设计系统

HiUI 是小米集团信息技术部推出的企业级设计系统。HiUI 目前聚焦在企业级中后台研发场景，以「高效、友好、开放」为设计价值观，致力于打造轻松愉悦的办公体验。HiUI 提供了开箱即用的UI组件库、设计指南、设计模板等资产，将产品、设计和研发从重复劳动中解放出来，专注于更有价值的业务需求设计。

七、Shopify——北极星设计系统

Shopify Polaris 是由一家为在线商店提供工具的电子商务公司 Shopify 开发的设计系统。Polaris 旨在为 Shopify 的所有产品和服务提供一致且有凝聚力的体验，同时还允许定制和灵活性。

Polaris 为设计人员和开发人员提供一系列资源，包括 UI 组件、设计指南和可访问性标准。它还包括强调简单、清晰和可用性的设计语言。

八、NutUI -京东风格的轻量级移动端组件库

NutUI设计系统是由京东设计中心前端开发部开源维护的一套移动端轻量级组件库，设计理念为简单、优雅、易用。该系统为开发者提供了大量功能强大的组件和工具，旨在帮助他们快速构建出高质量的Web应用程序。

综上所述，NutUI设计系统以其易用性、灵活性、高质量和统一的设计风格等特征，为前端开发者提供了强大且灵活的设计支持，有助于他们快速构建出高质量的Web应用程序。

九、Ding Design 钉钉设计系统

Ding Design是由钉钉设计团队、产品团队和终端技术团队共同打造的一套前端组件项目。其主要目标是帮助开发者提高开发效率，同时提升产品的用户体验。该系统提炼自钉钉企业级终端产品的交互语言和视觉风格，完美支持钉钉主题，包括浅色主题和暗色主题。它使用TypeScript进行开发，提供了完整的类型定义文件，并且支持小程序、React Mobile以及React PC的组件。开发者可以在Ding Design官方站点获取详细的组件文档和使用指南。