设计每日一贴---北京兰亭妙微/UI设计公司

首页

192024-3

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

前端达人

下面开始：

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

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

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

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

评论(0) 浏览(825)

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) 浏览(2255)

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) 浏览(869)

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) 浏览(995)

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官方站点获取详细的组件文档和使用指南。

总的来说，Ding Design设计系统是一个功能强大、灵活易用的前端组件项目，它能够帮助开发者快速构建出高质量的企业级应用，提升产品的用户体验和竞争力。无论是对于钉钉的开发者，还是对于其他企业级应用的开发者来说，Ding Design都是一个值得尝试的优秀工具。

十、Ke.Design 语言系统

Ke.Design是贝壳品牌的设计语言系统。它遵循自然本能，并在一定规则下无限延伸，以营造贴近自然的产品体验。该系统致力于保证产品的足够灵活、可拓展，并充满活力。在Ke.Design语言系统下，可以通过变换样式和多维度定制组件交互形式，生长出符合各类业务场景的设计形态，覆盖更广泛的用户群体。

Ke.Design语言系统以其自然、灵活、可拓展的特性，以及注重用户体验的设计理念，为设计师和工程师提供了一个高效、协同的工作平台，有助于提升产品的整体质量和用户体验。

作者：墨一影
来源：站酷

评论(0) 浏览(756)

182024-3

B端产品的C化该怎么去做？

前端达人

B端C化由来已久，概念化的东西怎么变为现实？阿鱼带你一步一步来...(ps:纯干货，有图有真相)

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

评论(0) 浏览(711)

182024-3

今天来聊一聊视觉语言的体验升级

前端达人

视觉表现不关乎体验？拜托，信息的传达都是靠眼睛的好吧，哈哈

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

评论(0) 浏览(675)

142024-3

设计目标、策略、方法、指标的区别与关系

博博

设计是一种创造性的过程，它涉及到对问题的思考、分析和解决。一个优秀解决方案的产出离不开缜密、科学的策略制定和方法运用，这些概念在实际工作中往往存在模糊界限，本文将探讨这些概念定义、区别、关系以及实际作用。

一、概念区分

1、设计目标

设计目标是指设计团队对计划中将要完成的设计工作期望达成的结果的简化描述。它能够对整体设计工作起到指引作用，即以目标为导向，所有的工作都需朝着完成指定目标而执行。

设计目标的核心重点在于结果。在设计过程中，制定清晰、可量化的目标是至关重要的。首先，设计目标需要明确地表达出设计团队希望实现的结果。这有助于项目团队成员理解并共享共同的目标，从而确保整个团队朝着同一个方向努力。同时，设计目标也能够为项目提供明确的指导和方向，帮助团队在实施过程中做出正确的决策。

其次，设计目标需要与业务需求紧密对接。在接收到业务需求后，设计团队应该仔细分析需求，并将其转化为具体的设计目标。

设计目标需要承接需求目标，是需求目标的初步具象化呈现，这些目标应该是切实可行且可见的，能够将抽象的需求转化为实际的设计方案所达到的结果。通过这种方式，设计团队可以确保他们的工作目标与业务需求目标保持一致，并且能够满足用户的期望。

此外，设计目标还需要具备可执行性和可量化性。否则，所制定的设计目标将只是空泛的概念吹嘘，无法落地呈现的虚伪目标。没有目标的设计是难以带来实际价值的盲目执行，不仅耗费资源，还容易犯下难以预估的错误。即使是探索性方案也需要有明确的目标，将要达成什么结果或是验证什么结果，否则一切方案都会难以执行。这意味着设计团队需要确定如何衡量目标的达成程度，并且制定相应的行动计划来实现这些目标。例如，一个设计目标可以是提高产品的用户体验，那么团队可以制定一系列的改进措施，并通过用户调研和数据分析来评估改进的效果。这样，团队可以不断优化设计方案，以确保最终达到预期的目标。

最后，设计目标的清晰性和可量化性对于项目的评估和决策也非常重要。当设计方案完成后，团队需要对其进行评估和审查，以确保能够达到预期的目标。如果目标模糊或不可量化，那么评估过程将变得困难，并且难以做出准确的决策。因此，制定清晰、可量化的设计目标是确保项目成功的关键之一。

2、设计原则

原则一词在我们的生活和工作中扮演着重要的角色。我们经常听到人们说，做人要有原则，做事要有原则。然而，尽管原则的重要性不言而喻，但具体来说，原则指的是什么？这个概念似乎很难被清晰地描述，我们脑海中的理解也相当模糊。尽管如此，我们都知道原则是某种不能逾越的底线。

原则通常指的是我们在言行中所遵循的准则。

它的近义词包括准则、法则、规定和规则等。通过这些近义词的描述，我们可以更清晰地理解原则的定义。设计原则可以被理解为在实现设计目标的过程中需要遵循的行为准则和约束。这里的行为准则指的是设计行为，即所有的设计方案都需要遵循相应的准则并受到相应的约束。除了约束作用，原则还可以帮助我们在设计过程中做出决策，指导我们应该或不应该做什么。它的意义在于使我们能够在复杂的设计过程中保持清醒，确保思维和行动不会偏离目标方向或犯下明显错误。因此，原则的关键在于指导。

在设计工作中，设计原则可以是统筹全部设计工作而制定的原则，也可以是根据具体需求制定的原则。两者面向的场景不同，应用范围也不同，因此需要注意区分。通常，专业的设计组织会制定指导全部设计工作的设计原则，以使所有设计人员在意识层面上达成一致，从而更好地约束和指导设计工作的执行。这样可以避免因为个人原因而导致设计行为准则的差异，从而避免产生与预期目标相差较大的方案。然而，由于宏观统筹的设计原则并不能完全满足对所有设计需求的指导，因此可能需要根据实际场景进行针对性的原则制定，以更灵活地满足业务商业化设计需求。

当然也有基础通用性原则，如尼尔森十大可用性原则，其面对的场景和所要解决的问题不同。在工作中制定原则时可以借鉴吸纳基础、通用原则，然后根据差异化需求进行调整。

3、设计策略

策略一词在语义上相对直观更容易理解，例如在战争中常见的作战策略，如耳熟能详的诸葛亮，他能够审时度势，根据所处的环境和情况，灵活制定并执行各种策略，以达成最终的作战目标。

在更广泛的语境中，策略通常被定义为一套可以实现目标的方案集合，或者是根据当前形势制定的行动计划。这些方案和计划都是为了更好地实现既定的目标或应对未来的挑战。

当我们谈论设计策略时，我们是在讨论如何在不违反设计原则的前提下，找到一种有效的切入方式来实现设计目标。设计策略的核心在于如何开始设计过程，它可以帮助设计师在设计过程中进行多角度的思考、分析和问题解决，避免陷入细节或者迷失方向。

4、设计方法

方法较为浅显易懂，一般是指为获得某种东西或达到某种目的而采取的手段与行为方式。

设计方法则是为了实现设计目标，依托设计策略，遵循设计原则的具体的执行方法，它是设计过程中具体实践的重要环节，将抽象的指导策略具象化的行为方式。

设计方则侧重于行为和方式，能够被清晰准确的落地执行，得出关键结论并产出具象化方案。方法通常是通过实践形成的经验总结沉淀，具有较强的实践指导意义，可以帮助在设计过程中更科学的产出解决方案。

常见设计方法论均是通过不断的实践进行的经验总结沉淀，最终形成的可以复用的执行模式，如双钻模型、用户体验地图等。

5、设计指标

设计指标是为了验证设计方案的可行性或设计目标的完成度而制定的检验标准和衡量机制。设计指标的侧重点在于检测和验证，能够客观地反映出设计工作的产出质量和目标完成度，并可以辅助制定下一步的设计方向和目标，以实现持续化、可迭代的设计方案优化产出。

设计指标通常在过程中对具体产出方案的决策产生较大影响，即使在遵循同一原则和策略的情况下，为了实现同一个目标也会产生多个解决方案，每个方案都有不同的优劣势。因此，在做方案评测和决策时，设计指标也是一个辅助决策依据，使方案决策更贴合目标，更加理性化。

设计指标必须具有可量化性，这意味着我们可以通过客观的数据或评价反馈来检验和衡量设计目标的完成程度，以验证解决方案的合理性和设计质量。此外，针对体验相关指标，我们可以协助设计师、产品经理和其他利益相关者了解用户在使用产品或服务过程中的感受，从而优化设计以提高用户满意度和参与度。

以下是一些常见的体验设计指标：

1. 任务完成率：衡量用户在完成任务时的成功程度。例如，在一个电子商务网站上，任务完成率可能包括购买商品、添加到购物车、填写表单等。

2. 用户满意度：通过调查问卷、评分系统等方式收集用户对产品或服务的满意程度。较高的用户满意度意味着更好的用户体验。

3. 用户参与度：衡量用户在产品或服务中的活跃程度，如浏览页面、发表评论、分享内容等。较高的用户参与度意味着更好的用户体验。

4. 转化率：衡量用户从访问网站到采取特定行动（如购买、注册、下载等）的比例。较高的转化率意味着更好的用户体验。

5. 平均会话时长：衡量用户在产品或服务上花费的平均时间。较长的平均会话时长意味着更好的用户体验。

6. 重复使用率：衡量用户在一定时间内重复使用产品或服务的频率。较高的重复使用率意味着更好的用户体验。

7. 推荐指数：衡量用户向其他人推荐产品或服务的意愿。较高的推荐指数意味着更好的用户体验。

通过关注和优化这些体验设计指标，设计师和产品经理可以更好地了解用户需求，提高产品的吸引力和实用性，从而提高整体用户体验。

二、总结概述

结合日常设计工作流程可将其之间的关系总结为是层级递进和相互约束的指导关系。

设计目标：

是设计所要达到的核心目的；

设计原则：

是设计执行所要遵循的必要准则；

设计策略：

是设计目标和设计原则指导形成设计形行动方针；

设计方法：

是依托于设计策略的具象可执行的方式方法；

设计指标：

是用来检验设计方法的有效性和设计目标的完成情况的检验标准和衡量机制；

作者：预激综合症啊
来源：站酷

评论(0) 浏览(1302)

132024-3

如何利用动效打造B端的用户体验

博博

说到B端后台产品，我们会想到业务复杂、信息庞大、用户角色多、页面层级深、使用门槛高等特征。这些特征让后台产品在设计时更强调“简单直接”，无需多余的设计元素，相比之下，没有C端产品有趣。而作为B端后台设计师在工作中会面临很多复杂场景的设计需求，有时候需求方未必能理解设计理念，会让设计师陷入“头秃”的状态。针对B端后台产品某些体验问题，我们可以借助动效的力量去解决。

下面将结合工作经验，以及线上文章，分享如何利用动效来提升B端后台产品的体验。

主要分为两大块：

使用动效不是为了炫技，而是辅助解决设计中发现的问题。我们要思考的是，眼下的问题结合动效能否达到1+1>2的解决效果。设计方案除了要得到需求方的认可，还要有开发团队的支持。设计师做到从痛点中出发，于可行处落地，才是有效的设计。那什么场景下的问题可以考虑结合动效呢?

1、信息量折叠收纳

B端业务的复杂程度决定了产品的信息体量，这也考验着设计师设计页面时，能为用户在有限的空间里获取多少信息。举个例子，用户的办公设备是小型笔记本，它的屏幕小，用户一屏看到的内容有限。这时需求方建议减少留白，压缩空间，信息往上堆积，页面最后会拥挤不堪。庞大的信息体量力求对用户的吸收效率，也对设计造成困扰，针对这种情况我们可运用“折叠收纳”法

应用案例1: 按钮折叠

如果一个页面的按钮太多，可“折叠”按钮。以下面的科目树为例，每个科目有若干个功能按钮，如按钮全部展示，不利于用户聚焦重要信息。用户必定是先看科目标题，如有需要才对科目进行操作，基于这个思路可把按钮折叠起来，待用户鼠标悬浮至科目才出现按钮。在恰当的场景下将按钮折叠，有助于精简页面结构。一个页面按区域划分功能区和信息区，信息区被文案铺满了，可简化功能区的表现形式。比如按钮和解释文案，可对解释文案进行收纳，用户鼠标悬浮上去显示。对于用户来说，一个按钮的含义只要使用一次便清楚。

应用案例2: 内容折叠

B端后台因信息量大有很多长页面，这时可在用户进行页面滚动浏览时，根据用户滚动的内容进行折叠。如下的筛选项占据了页面头部一定的空间，用户滑到结果列表内容时，已选项固定在顶部精简展示。

小结:通过“折叠收纳法”优化页面布局，根据用户的操作行为给予内容变化，帮助用户降低信息量过大带来的阅读疲劳，也让设计师在有限的设计空间里“堆积”信息。

2、对路径进行引导，及时给与用户反馈，提高效率

B端产品会有极其复杂的功能，这些功能通常用步骤条来拆分，引导用户分步完成。面对复杂功能。需求方希望

在页面的各个位置添加用法提示文案。但用户并不想阅读一串串文字，这时可结合用户的操作行为，及时响应引导下一步操作。

应用案例1:

操作响应如下的这个页面需要用户把左边的字段拖拽到右边生成卡片。当用户拖拽时，给予动效反馈让用户感知字段拖拽方向。这种可视可感知的方式帮助用户快速掌握用法，提升效率。

应用案例2:引导响应

在工作中我们也许会接到类似的修改需求:“按钮不够突出，不够大，要又大又突出”。你看完后心里想:“还不够突出吗，要这么大干什么呢?”这时沉住气，分析修改的根本目的，它想要突出的目的是什么?

1、这个按钮在整个页面中承载极其重要的功能，视觉上用户需立刻注意到2、点击按钮后的内容十分重要，希望增强点击欲。

当用户鼠标悬浮至按钮时，及时响应引导，一个箭头既起到醒目作用，也引导着用户去往下一步。

小结: B端后台页面信息繁杂，功能多。通过动效帮助用户在使用过程中增强反馈和引导，正确的引导能缩短用户的操作路径，提升效率。

3、增加情感化体验

B端后台产品大部分是给专业人员使用的，信息表单居多，页面内容相似，比较单调。加入适当友好的情感化式效可以提升产品的趣味性，减少用户使用的倦怠感。

应用案例1: Loading动效

常规的Loading动效通常是一个圆在转圈，当用户面对长时间加载时，一直盯着一个圈会产生焦虑感。情感化Loading动效可总结为两类:

1、产品本身有一个IP形象，可围绕IP进行创作。例如“加薪猫”，加载的时候猫咪追着钱币奔跑，增加了跑步流汗的细节，提升它已经在努力加载的形象感;

2、根据Loading的文案进行拓展设计，提取文案元素，图形场景化，分散用户等待的焦虑。

应用案例2:化抽象为形象

有些B端产品的业务背景专业而又抽象，可借助动效的力量化繁为简，化抽象为形象。以下面数据字典为例。用通过该字典进行与业务相关的字段查询。该页结构较简单:搜索栏和热词入口。我结合模块名称，对特征进行具体物化，在页面加入字典和放大镜元素。通过物化让用户快速感知该模块的作用。类似的大入口页面也可以运用3D效果，它能让物化更加立体。

比较常用的动效设计工具有: Ae、Principle、ProtoPie。这里分享一下我在工作中常用的并能解决大部分问题的工具。

1、Principle:快速制成交互动效演示Demo

Principle是一款只能用于Mac OS系统的交互设计工具，它的操作界面跟Sketch类似，学习成本较低。它搭配Sketch使用，能对界面做转场过渡动效和一些细节的交与动效。当你想提出某个交互动效提案时，可用Princidle快速制成演示Demo，导出GIF或视频给到需求方，让他们快速明白你的想法及可行性后台界面演示demo可直接选择箭头光标，呈现效果更贴合真实场景。

2、After Effect: 适合各种场景下的动效制作

AE是绝大UI设计师必备的动效制作工具。它支持Mac OS和Windows系统，其自身有着强大而丰富的特效库。现在也能通过AEUX插件，把Sketch里的图层直接导入到AE使用。AE的功能大而全，日堂工作中多用干制作情感化需要的图形动效，比如Loading、lcon点击动效等等。

小结: 设计师需要学习和掌握的软件很多，软件更新迭代的速度也很快。可选择能解决工作中绝大设计需求的软件精学，其余可在空闲时作为知识技能储备来学习。

总结

做适合的动效为B端产品体验赋能

当你在设计一款从0-1或是重构的B端后台产品，你可重新定义设计风格、规范控件。当你是半途介入一款风格规范都已相当成熟的B端产品，通常遇到的问题较为繁琐，可能是对一个按钮、一个颜色、一句文案去精打细磨。这时设计师需提升产品全局观，在设计过程中对遇到的问题层层剖析，洞悉设计的发力点，并在恰当的场景下紧贴产品特性和业务需求，提出恰到好处的动效方案，以小点出发，真正为产品的体验赋能。

作者：CNLILY
来源：站酷

评论(0) 浏览(740)

132024-3

弹框关闭的七种交互方式

博博

前言：日常设计工作中，我们设计师可能会面临以下设计问题：

移动端弹框什么时候需要关闭按钮？什么时候不需要关闭按钮？
界面中间的确认取消警示弹框，是否需要在右上角添加“关闭”icon按钮？
手势关闭弹框需要注意什么？
iOS和安卓两端关闭弹框有什么区别？
点击弹框中的任务按钮，弹框是关闭还是不收起？

统一使用图标按钮，以icon“x”的形式，显示在底部弹框的右上角，用户通过点击“关闭icon”图标按钮来关闭弹框。

使用场景

当弹框中包含内容和功能操作时，应提供一个关闭icon“x”的图标按钮，以让用户能够主动关闭弹框并进行相应的操作。

何时不需要关闭按钮icon“x”？

1.操作型弹框，需要用户确认或选择操作项，不需要显示关闭按钮，需统一使用文字主按钮，以文本“取消”的按钮形式，显示在弹框面板底部，用户通过点击“取消”按钮来关闭弹框。例如当用户进行删除或提交操作时，弹出的确认框通常只需要“确定”和“取消”按钮，而不需要显示关闭按钮。

2.全局提示toast（自动关闭）。

3.功能入口类型弹框，为了保持界面简洁，不需要“关闭icon”，如智能文档编辑模式的底部悬浮工具栏。

4.警示或通知类型的弹框，不要关闭icon。

关闭按钮位置

关闭按钮需统一显示在弹框右上角。遵循iOS和Android系统规范、用户使用习惯、阅读习惯「Z字型」、避免误操作「关闭之前需要先确认信息和操作项」。

关闭按钮icon“x”何时需要展示在左上角？

页面级：当页面层级超过3级时，为了便于用户能快速回到一级页面，无需原路返回，可以将关闭按钮“x” 置于左上角，位于「返回」按钮右侧。

多语言和国际化用户习惯：特定语言和文化习惯，从右向左阅读顺序，遵循用户阅读习惯。例如台湾、日本等。

用户点击弹框外部区域，即遮罩层，可关闭弹框。

遮罩层不可点击场景

1、模态弹框，即“阻断式”，必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。

2、弹框的内容区域，包含表单输入框等需要用户提交数据，为了防止误操作导致用户输入的数据丢失，遮罩层不可点击。

3、有前置限制条件，需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景，必须要用户主动勾选同意协议选项。

遮罩层展示逻辑

1、非模态弹框，不加遮罩层；模态弹框，加遮罩层；

2、遮罩层统一使用半透明黑色蒙层，色值和不透明度的数值由UI定义；

3、遮罩层可视高度，遵循移动端最小点击区域48dp*48dp高度的交互热区，保证用户可点击

遮罩层的覆盖范围

遮罩层需覆盖标题栏，需遵循iOS、Android、微信小程序平台规范。其中微信小程序端，遮罩层覆盖标题栏，但不可覆盖标题栏右侧胶囊按钮。
若是内嵌H5页面，因客观条件限制，则弹框之下的遮罩层无需覆盖标题栏。
以上提到模态弹框和非模态弹框两种弹框模式，要想更清晰理解两种模式弹框的关闭交互方式，需要理解两者之间的交互区别。‍‍

模态弹框和非模态弹框的交互区别

模态弹框‍‍‍‍‍‍‍‍‍‍‍‍：

用户只能操作弹框内的交互元素，弹框外部区域不可操作，需要加半透明遮罩层。例如底部操作型弹框。

非模态弹框‍‍‍‍‍‍‍‍‍‍‍

用户可以并行操作弹框内和弹框外部区域的交互元素，不要加半透明遮罩层。例如苹果地图App。

用户在底部弹框区域向下滑动手指，弹框会随之向下移动，当到达当前弹框高度的1/2位置后，会触发关闭交互，用户继续向下滑动松手则关闭弹框。

交互逻辑

1、支持下拉关闭的弹框，头部区域需统一展示水平条icon，样式由UI定义

2、交互热区：底部弹框全部区域

3、手势方向：手指只能向下移动

4、下拉触发关闭弹框阈值：当前底部弹框高度的1/2位置

使用场景

长内容类型弹框，需使用下拉关闭交互手势，关闭弹框

不可用下拉手势关闭弹框的场景

1、模态弹框，即“阻断式”，必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框。

2、弹框的内容区域，包含表单输入框等需要用户提交数据，为了防止误操作导致用户输入的数据丢失，不可下拉关闭弹框。

3、有前置限制条件，需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景，必须要用户主动勾选同意协议选项。

用户在屏幕上向下滑动（包括左下或右下滑动方向）至任意位置后松手释放，可关闭弹框；当用户手指下滑未松手，继续向上滑动到任意位置后松手释放，则可取消关闭弹框。

使用场景

仅图片大图模式场景使用。用户向下滑动屏幕，图片随之向下移动，松手后触发关闭图片查看器，关闭图片弹框

例如：手机相册

用户从弹框区域左边缘向右轻扫，即快速向右滑动后松手，则触发关闭弹框操作，关闭弹框。

不可从界面左边缘向右轻扫场景

1、模态弹框，即“阻断式”，必须要用户确认弹框内操作。例如删除等需要用户确认的警示弹框

2、弹框的内容区域，包含表单输入框等需要用户提交数据，为了防止误操作导致用户输入的数据丢失，不支持向右轻扫关闭弹框。

3、有前置限制条件，需要用户完成特定操作或满足特定条件才可关闭弹框。例如用户隐私协议场景，必须要用户主动勾选同意协议选项。

除以上场景外，均需要支持弹框左边缘向右轻扫手势关闭弹框，包括Android、iOS、小程序。

特殊场景

1、当同时存在页面向右滑和弹框向右轻扫手势时，在弹框区域向右轻扫，先关闭弹框，再次沿着屏幕左边缘向右滑动，则返回上级页面。

2、键盘展开场景，iOS端不支持左边缘向右轻扫收起键盘，遵循iOS平台规范。

对于安卓设备，用户可以使用设备上的物理返回按钮来关闭弹框。当用户按下返回按钮时，可关闭弹框。

交互用法

1、点击物理按键，需原路逐级返回，不允许跳级返回

2、模态弹框，遮罩层覆盖物理返回按键，不支持左边缘向右轻扫关闭弹框

3、安卓手机将系统导航方式切换到全面屏手势，则不存在物理返回按键

点击弹框中的功能按钮，通常需要立即执行并关闭弹框。一定是先执行再关闭弹框，而不是先关闭弹框再执行。用户执行某功能按钮后，遵循即时响应原则，系统必须要反馈用户在执行用户操作。
为什么点击执行功能按钮需要关闭弹框？因为弹框是否关闭，和用户目标有关。用户主动触发某操作唤起弹框，首先是有用户目标的，其次，用户通过点击弹框内某功能按钮，执行任务来实现用户目标。
此外，也存在点击执行功能按钮立即执行不关闭弹框的场景，比如开关选择器，但本质还是围绕当前用户目标来进行决策是否关闭弹框。

作者：CNLILY
来源：站酷

评论(0) 浏览(789)

« 1 ... 126 127 128 129 130 131 132 ... 931 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

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

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

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

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

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

B端产品的C化该怎么去做？

今天来聊一聊视觉语言的体验升级

设计目标、策略、方法、指标的区别与关系

如何利用动效打造B端的用户体验

弹框关闭的七种交互方式

分类

日历

链接

个人资料

存档