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

首页

142024-3

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

博博

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

一、概念区分

1、设计目标

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

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

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

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

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

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

2、设计原则

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

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

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

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

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

3、设计策略

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

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

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

4、设计方法

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

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

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

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

5、设计指标

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

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

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

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

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

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

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

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

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

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

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

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

二、总结概述

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

设计目标：

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

设计原则：

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

设计策略：

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

设计方法：

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

设计指标：

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

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

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

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

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

评论(0) 浏览(753)

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

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

122024-3

提高产品的易用性、可用性与无障碍设计概念分享

博博

一、概念解析与设计思维

本次分享首先对比解析一下两个概念：易用性和可用性

易用性：易用性是指系统或服务的上手难度和便捷程度。优秀的易用性设计方案可以减少学习成本和操作难度，让用户更容易地理解产品功能进而便捷的体验产品服务。

可用性：可用性是指系统或服务的可访问性和可理解性。好的可用性设计可以让用户更容易地使用产品或服务，更好的满足用户需求，提高用户满意度和忠诚度。

二者的区别：个人理解易用性侧重于产品的使用是否便捷，学习成本是否足够小。而可用性侧重于产品或服务是否能够很好的满足用户需求。

当一款产品满足了基本的可用性和易用性之后，该从哪些方面优化设计方案呢？答案是：包容性设计与无障碍设计原则。

二、如何提高产品的易用性和可用性

第一部分首先分享一下提升产品易用性的思路和案例解析

表达层

1、视觉上看起来是可用的。

我们平时使用app时看到的按钮或图标是什么样的呢？如果在页面中我们看到一个按钮是灰色的，对于用户来说该功能是不可访问的，灰色传达给用户的心理暗示是不可点击。只有当某些条件不满足导致该功能不可用时，才会将其功能入口设计为灰色状态。

2、减少负荷

负荷指的是用户完成某一个任务或执行某一交互行为时，大脑需要处理的信息总量。理论上来说，面临的选择越多，做出决定所花费的时间就越长，所带来的认知负荷就越大。根据《简约至上》一书，可以通过以下4种策略减少认知负荷：删除、分层、隐藏、转移。

删除：是指根据交互流程的各个节点，合理删除不必要的内容，降低用户的阅读负荷。

分层：将页面内容按照一定的规律组织分类，把信息分成模块和有机单元来处理复杂问题，提高用户认知效率。

隐藏：从使用频率来讲对内容进行高频和低频的拆分，强化高频内容，对低频内容进行合适的隐藏。

转移：对复杂任务进行巧妙转移，拆成多个步骤来完成，让每一步都容易理解。

3、区分占比权重

当用户不得不面对较多选项和页面内容时，对主要和次要的页面元素通过视觉权重进行区分，做好设计上的归类，能够提升用户做决定的效率。

4、贴合用户使用场景

不同的用户和使用场景会影响信息表达的准确性。如果你的目标用户包含上了年纪或者有视觉障碍的人，可以考虑采用大号字体来提升可读性。

行为层

1、选择代替输入

交互行为中输入操作的成本很高，选择代替输入可以降低用户的交互成本，提高录入效率。所以在表单的设计中，对于可以选择的输入项，优先使用选择进行操作而不是手动输入。

2、降低沉默成本

人们在进行某些行为决策时，不仅看这件事对自己有没有好处，也看过去是不是已经在这件事情上有过投入。在用户进行编辑操作时，允许用户退出并保存已编辑的内容可以有效降低用户的沉默成本。

3、减少重复过程

重复的行为是无效的，用户是懒惰的，都不喜欢进行重复操作。一般来讲，用户初次使用某一功能时，所需要填写的信息是最多的，当用户已经有了一定的行为时，设计者可以根据用户已有的行为数据，通过减少重复过程来提高产品的易用性。

4、行为一致性

在我们使用的产品中有很多交互操作的逻辑本质是相同的，不需要为这些相同的交互操作设计多种逻辑或方案。当用户对某种行为有了一定预期后，就会期望产品按照预期的行为方式执行，因此一致的交互行为可以提高用户的易用感受。

5、基于行为的智能化引导（千人千面）

这是一种基于算法的易用性提升，在大数据、人工智能等技术支持下，产品具备的主动满足用户各种需求的属性。系统会根据用户的行为做出一些个性化引导，合适的引导不仅仅能够提高产品的易用性，还能够帮助产品取得更多转化。

第二部分接下来分享一下怎么提升产品可用性

1、符合用户需求

这里需要设计师深入进行用户研究，挖掘用户真实需求并结合市场趋势针对性地设计产品或服务，从而确保可用性符合用户期望。

2、明确的导航和布局

良好的导航和对信息的布局设计可以提高用户的使用效率和满意度。

3、响应式设计

当用户在不同设备和屏幕尺寸下使用产品或服务时，确保在不同的使用场景上都能获得良好的用户体验。包含响应式布局、自适应界面等方面的内容，让用户在不同设备上都能够顺畅地使用产品或服务。

三、包容性设计与无障碍设计

1、包容性设计（inclusive design）是最广义的设计概念，希望让产品可以被不同用户（包括不同身体能力、语言、文化、性别、年龄、性取向等）使用。例如抖音和TikTok。

2、无障碍设计（accessible design）针对身体能力差异，特针对残障使用场景（包括健全人会遇到的临时性与情境性残障）做出友善的设计。在国内，「无障碍设计」很好地对应技术界的「信息无障碍」概念。

那么什么是无障碍设计呢？无障碍设计是包容性设计中的一个属性，它可以被定义为一组要实现的标准。它主要考虑为残疾人在物理或数字空间中提供同等的体验，比如通过键盘导航、字幕等方法。

3、场景性残疾。残疾是相对的，它不仅仅只是一个健康问题。残疾反映了一个人的身体特征和他/她所生活的社会特征之间的相互作用。如果残疾与环境有关，那么在某种程度上我们都是残疾的。因为环境总是影响我们的日常生活。例如，怀孕的母亲有行动障碍；手部受伤的人在痊愈前只能单手提物；在嘈杂地铁中的乘客有听力障碍等等。针对以上场景我们可以称之为场景性残疾。此时“残疾”可以被更广泛性地理解为人与人、环境和科技产品交互过程中，可能出现的不同程度不同种类的能力缺失。

以下是用户使用产品过程中可能遇到的场景性残疾：

1、当自己手指蜕皮或手指受伤贴上创口贴时无法通过指纹解锁手机。

2、戴口罩或化妆程度较高时无法通过面容ID解锁屏幕。

3、晴天室外因手机亮度不足导致无法看清屏幕。

4、夜间拿出手机扫码骑单车时成功率下降

5、驾驶新能源汽车出隧道时不易看清车载屏幕

6、女生刚做完美甲时打字不方便

针对以上场景性残疾该怎么输出设计方案呢？

一般思路是对同一功能设置多种行为路径来完成。例如针对解锁手机场景，搭配密码解锁可供用户打开手机。当共享单车无法扫码解锁时，支持手动输入开锁。

用户群体包含色盲色弱人群时，对产品界面做针对性调整。

用户需要降低画面蓝光时，使用护眼模式可以满足个性化需求。

用户处于无网络或弱网环境时，产品提供相应功能满足用户需求。

新浪微博会在无网络环境自动保存内容至草稿箱。

微信的处理方案基本对用户无打扰，个人认为更胜一筹。

用户在只能用耳朵听内容，无法观看画面时，将视频服务转化为音频服务。

四、总结

在实际工作中当我们输出体验设计方案时，易用性和可用性是需要时刻关注的设计原则。通过提高产品的易用性和可用性，可以创造出令人愉悦的用户体验，让用户真切地感受到产品的细腻和温度。遵循包容性设计和无障碍设计原则给用户提供更多样的交互方式，以便最好地满足不同情景下的需求。

作者：寂静之间
来源：站酷

评论(0) 浏览(566)

122024-3

10分钟带你快速了解Bento设计风格

博博

Part.1 起源与流行

Bento风格设计是一种独特且富有创意的设计方式，其灵感主要来源于日式便当盒的布局形式。这种设计方式强调将内容划分为不同的小块，并以网格的形式进行排列组合，以此达到视觉上的和谐与统一。

近几年，Apple引领了设计大趋势，而 Bento 正是其中之一。他们在很多场景开始使用这种设计风格，包括网页设计、APP设计、产品介绍等，随处可见。

Bento设计风格的简约、清新和富有变化的特点也符合了现代审美趋势，特别是在数字产品和互联网应用方面。随着人们对于界面美观性和易用性的要求不断提高，Bento设计风格也逐渐受到了更多设计师和用户的青睐。

与许多其他 UI 设计趋势不同，Bento 实际上不仅仅是一种漂亮的布局风格。它现在已经发展到包括产品演示，与其他一些独特的布局混合，甚至采用新的视觉设计概念进行风格化。

Part.2 风格解析

内容分块与结构化布局

Bento风格设计注重将整体内容分割成一个个小的区块，并通过网格系统来布局这些区块。这种分块化的设计使得内容更加结构化，易于用户理解和浏览。同时，网格系统也确保了设计的整齐和一致性，提升了视觉美感。

视觉层次与优先级

擅长利用不同区块的大小、颜色和位置来创建视觉层次，从而突出内容的优先级。重要的内容通常会被放置在更显眼的位置，或者通过更鲜明的颜色或更大的字体来吸引用户的注意力。

简洁性与清晰度

Bento风格设计追求简洁明了，避免过多的装饰和复杂的元素。这种设计方式不仅使得界面更加清爽，也提高了信息的可读性。同时，清晰的布局和明确的导航也能帮助用户快速找到所需内容。

灵活性与适应性

Bento风格设计具有很高的灵活性和适应性，可以适应不同尺寸和分辨率的屏幕。这使得设计能够在多种设备上保持一致的用户体验，无论是手机、平板还是桌面电脑。

Part.3 布局原理

「形式服从功能」是建筑大师路易斯·沙利文提出的著名设计原则，这一原则强调设计的首要任务是满足功能需求，而形式则应该服务于这一功能目标。

形式要体现功能，更要服务好功能。它也是UI设计进入扁平化时代后，界面设计所一贯遵循的基本原则之一。但时下随着各种3D、拟物风格的再次流行，以及大量的动画、插图等运用，这一原则更难让设计师们把握。

而现在Bento设计风格又恰恰形式感极强，我们该如何把握呢？首先我们可以先了解Bento布局原理逻辑再说，相信能找到答案。

原理分析

假如我们在一个 1440X900 像素的框架内添加 bento 式布局，那首先要有一个下图这样的基础网格：

适合Bento的网格如何得出呢？我们可以基于 4 点网格，把列数和行数皆设为 8（也可以不一致），间隔均设置为 20 像素，列宽和行宽不必设定，在框架内弹性自适应就可以了。

那我们可以分别得出纵向网格及横向网格：

再把横、纵向两套网格交叠就可以得到一开始的基础网格，接下来，你就可以根据需求随意设定 bento 式布局了。

到这里是不是感觉很容易了？是的，原始网格的参数可以根据你的设计需求来定，布局的自由度也很大，可以设计出各种不同组合的Bento。

Bento布局与网格逻辑紧密相连，形成了一种独特且高效的视觉呈现方式。网格在这里不仅是布局的基础，更是实现内容有序排列和组织的关键工具，网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构，将整体内容划分为一个个独立的区块。这些区块在网格的指导下，按照既定的规则进行排列，确保了布局的整齐划一和视觉上的和谐统一。

网格逻辑还使得Bento布局具有高度的可扩展性和适应性。设计师可以根据实际需要调整网格的尺寸、间距和排列方式，以适应不同屏幕尺寸和设备类型。这种灵活性使得Bento布局能够在各种场景下都呈现出良好的视觉效果和用户体验。

Part.4 案例运用

Bento在banner中的运用

Bento布局帮助设计师在banner中合理安排各个元素的位置和大小，确保整体布局的和谐与统一。通过精心设置网格，设计师可以将文字、图片、按钮等元素放置在恰当的位置，使banner看起来整洁有序，易于吸引用户的注意力。

巧妙的把不同的素材的以Bento形式组合在一起

Bento在产品介绍中的运用

Bento强调形式服从功能的设计原则，这在产品介绍中尤为重要。设计师会深入挖掘产品的功能和特点，通过合理的布局和视觉元素，将产品的实用性、易用性和创新性等方面凸显出来。这样的设计不仅能让消费者更好地了解产品，还能增强他们对产品的信任感和购买欲望。

Bento在个人博客中的运用

Bento设计注重色彩搭配和视觉元素的运用。在个人博客中，设计师可以根据个人喜好和博客主题，选择适合的色彩和字体，以及添加适当的图片和图标，从而打造出独特且吸引人的视觉效果。这样的设计不仅能够吸引读者的眼球，还能增强博客的品牌形象和个人特色。

Bento在复杂数据中的运用

Bento设计强调信息的结构化。对于复杂信息，如大量的数据、文本或多种类型的媒体内容，Bento通过网格化的布局和模块化的设计，将信息划分为不同的区块，并依据逻辑关系和重要性进行排列。这种结构化的设计方式使得复杂信息更加有序，用户能够轻松地找到所需的信息，提高了信息获取的效率。

Bento在品牌设计中的运用

Bento在平面设计中的运用主要体现在其独特的布局理念、视觉层次感和设计细节上。这些元素共同为平面设计作品赋予了清晰、专业且富有吸引力的外观。

Bento在移动端设计中的运用

Bento在移动端设计中的运用非常广泛，并且取得了显著的效果。其基于严格网格的布局方式特别适合在移动设备（如手机或平板电脑）的小屏幕上展示内容，这种设计不仅易于浏览，而且使得内容在有限的空间内得以高效展示。

Bento在电商设计中的运用

Bento强调信息的清晰呈现。在电商设计中，这意味着商品信息、价格、促销活动等关键内容需要被突出展示，以便用户快速了解和比较。Bento通过网格化的布局和简洁的视觉效果，将复杂的信息进行有序的组织和分类，使用户能够轻松找到所需信息，提高了浏览和购物的效率。

Part.4 优势总结

ok,我们前面详细分析了Bento设计的原理以及在各个场景中应用，那我们应该如何运用到我们日常工作中去呢？Bento设计切记生搬硬套，一定要根据需求而来，下面就讲讲Bento的优劣势，希望能够帮助到我们更好的理解Bento设计风格。

优势

清晰高效，有效传达信息

基于严格网格的布局使得内容呈现有序且易于理解，Bento设计通过明确的分隔，为界面提供了清晰的结构，使用户可以快速理解和导航。不同的功能和内容被组织在不同的隔层中，有助于提高信息的可读性和可理解性。

形式感强，视觉冲击力足

通过调整内容块的大小、样式和颜色，可以轻松创建出视觉层次感，突出重要信息，提升页面的可读性和吸引力。

设计规范，逻辑有规律可循

网格为Bento布局提供了一个清晰、规范的框架。设计师基于网格的行列结构，将整体内容划分为一个个独立的区块。这些区块在网格的指导下，按照既定的规则进行排列，确保了布局的整齐划一和视觉上的和谐统一。

包容万象，随意拓展、适配

Bento几乎支持所有主流的媒介，如链接、图片、视频、文字等，甚至还包括地图，这使得用户能够轻松地在平台上展示和分享各种类型的内容。

劣势

一定程度上限制了灵活性和创意性

由于Bento设计强调基于网格的布局，这在一定程度上限制了设计的灵活性和创意性。设计师可能需要在遵循网格规则的同时，努力寻找创新和突破。

图片展示比例限制

由于展示的尺寸样式有限，有时可能无法很好地展示原图的比例和效果，这可能会影响用户对内容的理解和接受度。

作者：墨一影
来源：站酷

评论(0) 浏览(603)

072024-3

C端产品体验设计走查模型

博博

设计输出质量对于设计团队来说是极为重要的事情，在设计过程中，存在着许多潜在的风险，这些风险可能会导致用户直接流失，甚至是品牌形象受损，且对于C端产品来说更是如此。因此，作为一名用户体验设计师，降低体验设计风险是我们工作中不可或缺的一部分。

当然体验问题可能来自技术、设计、运营等多个环节，本文主要从体验设计师的视角去思考如何降低体验风险。

一、设计团队如何降低体验风险

1、可以建立一套体验设计走查模型，通过建立走查模型，我们可以对设计过程进行全面检查，及时发现并解决设计中的问题。

2、建立设计内审机制，通过多名设计师和关键项目组角色共同内审，减少出错风险。

3、需要将体验问题的发现和解决纳入设计师工作当中，并且有明确的责任划分，确保产品遗留问题得到有效解决。

二、建立适合自己的体验走查模型

走查模型的作用是帮助设计师产出全面的设计方案，尽可能避免有遗漏场景，造成体验事故和不必要的返工。市面上有很多不同的体验走查模型，具体需要根据自身产品情况确定。

所以好的体验走查模型需要符合3个要求。

1、实用性：需要通过模型将主观感受描述成客观的场景、标准，确保大家理解一致，不要造成使用偏差。

2、符合平台自身属性：结合自身产品类型和过往最常见的问题类型，有选择性的制定，不用追求大而全。

3、能够真正纳入工作当中：走查模型建立后，一定要在真实的项目中发挥作用，比如作为设计内审的具体通过标准之一。

那么如何制定出符合平台要求的走查模型？其中比较有效的方法是梳理过往遇到的体验问题，并按照场景归类，梳理出典型的问题，并纳入到走查模型中。

比如在一些偏活动属性的产品设计中，我们发现设计师经常遗漏平台品牌性的信息，于是我们把品牌识别性也纳入到了走查模型当中。

三、沉淀体验走查模型

体验走查表确定后，可以打印出来并且以表格的形式进行共享。

四、如何避免流于形式，让走查模型真正发挥作用

一、以走查模型为交付标准。

产品从需求到落地，中间会经历多个环节和角色，体验走查模型一般在2个环节着重使用。

1、需求梳理阶段：帮助设计师围绕具体需求明确设计范围。

2、设计交付前：对照自查表，查漏补缺。

二、作为设计内审通过标准之一

在设计内审阶段，可以将体验走查模型当作通过的标准之一，走查模型可以和设计规范配合使用，确保在设计输出的时候是尽可能完整的。

作者：微店UED
来源：站酷

评论(0) 浏览(558)

072024-3

设计规范全方位指南

博博

一、设计规范的目标？

首先需要明确设计规范的目标，也就是为什么建立设计规范，这里包括提高用户体验、降低开发成本、提高团队协作斜率等。这些目标将为后续的规范制定提供方向。

还有就是大家都知道，在做项目时如果没有明确的目标和价值，是很难推动的。

二、什么时候建立设计规范？

在项目全面进入ui设计之前，先设计几个核心页面的demo，确立整体的基础规范和设计风格，把一些基础的设计规范定义出来，例如命名、尺寸、间距、颜色、字体、核心控件等、这样在开展设计的过程中保持一致性和统一性，当然，在项目设计过程中，UI设计规范也需要根据实际情况去调整补充。

三、设计规范具体要怎么做？

这里先讲一些基础通用的规范

3.1、间距

在间距部分我们需要把一些页面间距、模块间距、元素间距，这些要定义出来像我平时在工作中通常以8px作为基数，以此衍生出8、16、24、32、48、64

，这6个间距数值，完全能够满足绝大多数的使用场景。当然，针对信息较少的页面也会使用到120、160、200...其他间距数值，例如缺省页、登录页面等。出去这些特殊页面，基本上通用的就上面那6个就足够了

3.2、颜色规范

我们要先把主色调和辅助色，通常主色都是根据品牌形象和目标用户的需求选择。

拿在颜色的定义中需要注意以下几点

1、使用色彩心理学：

根据不同的颜色和情感联想，选择适合的颜色来传达品牌形象和用户体验。例如，蓝色通常被认为具有专业、信任和稳定的感觉，而红色则具有激情、活力和创新的联想。

2、建立层次结构：

使用颜色的饱和度和明度来建立层次结构。将重要的设计元素设置为高饱和度和明亮的颜色，使其在页面上突出显示，而将次要的设计元素设置为低饱和度和较暗的颜色。

3、避免使用过多的颜色：

过多的颜色可能会使页面显得混乱和难以聚焦。在设计过程中，尽量使用有限的颜色组合，并且要避免使用过多的对比色或互补色。

3.3、文字规范

我们需要把字体、字号、颜色、行距、这些给定义清楚，有规律的大小字号更有利于阅读，（另外要注意一些特殊字体的版权问题）常用的字体大小20px、24px、28px、32px、36px,44px,48px,且都是间隔4px，设计师需要根据具体场景去决定字体大小，以确保用户能够轻松阅读和理解界面信息层级比重。

3.4、UI图标规范

图标是UI设计的重要组成部分，它可以使图标看起来更加美观、易用、统一和有吸引力。也传达着整个UI视觉风格调性，和系统功能的作用。在图标设计上一定要简单清晰，定义规范时要对图标的大小、圆角、线条粗细、等有明确的指示，在绘制的时候我们可以制定自己的

网格规范，以便参考。

3.5、按钮

按钮尺寸：

一般来说，按钮的尺寸应该能够适应不同的屏幕尺寸和分辨率，并且应该能够突出显示。

按钮形状：

应该具有清晰的轮廓和圆润的边角，圆角大小是多少

按钮颜色：

按钮的颜色应该与整体UI设计风格相协调，并且应该能够突出主题和重点信息。一般主按钮大多使用主题色。

按钮文本：

按钮的文本应该简短明了，并且应该能够清晰地表达按钮的功能。还需要定义清楚按钮中限制的字数。

按钮内边距：

按钮的内边距应该能够扩大按钮的可点击范围，并且应该能够提高用户点击按钮的准确性。需要考虑极限情况下，最小应该保持多少内边距。

按钮状态：

按钮的状态应该能够表达按钮的状态和功能。一般来说，按钮的状态包括正常状态、点击状态等。

作者：考思考
来源：站酷

评论(0) 浏览(559)

042024-3

页面分割设计指南

博博

当你打开一个页面，首先映入眼帘的是丰富多样的内容和信息。如何在有限的空间内，既保证内容的完整性，又让用户能够轻松理解和浏览，这背后的奥秘就在于页面分割。今天，我们就来一起探讨页面分割的艺术与技巧，看看它是如何为你的设计增添魅力，提升用户体验的。

在设计中，页面分割不仅仅是一种技术手段，更是一种艺术表现。它如同一位细心的画师，巧妙地运用线条、色彩、空白等元素，

将页面内容划分为一个个清晰、有序的区域。

通过这些分割，用户能够更快速地找到所需信息，更轻松地理解页面内容，从而享受到更加愉悦的阅读体验。

页面分割的魅力在于其多样性和灵活性。不同的页面可以采用不同的分割方式，如线条分割、卡片分割、留白分割等，以满足不同的设计需求和用户习惯。同时，页面分割也需要根据内容的实际情况进行合理调整，既要保证信息的完整性，又要避免过度分割带来的混乱感。

在本文中，我们将一起探讨页面分割的原则、技巧和应用实例。我们将学习如何运用不同的分割方式来优化页面布局，提升用户体验。同时，我们还将分享一些成功的页面分割案例，以激发你的设计灵感，为你的界面设计注入新的活力。

分享目录：

一、分割的常见样式

二、线性分割

三、卡片分割

四、留白分割

五、总结

线性分割：

通过使用线条来划分页面的不同区域，以达到组织内容、引导用户视线和提升整体美观度的目的。这种分割方式简单明了，能够清晰地展现出页面内容的层次和结构。

卡片分割：

卡片式设计是一种流行的界面分割方法，通过将内容划分为独立的卡片或区块，使用户能够更清晰地理解信息。每个卡片通常包含相关的内容，如文本、图片或按钮，以便用户快速浏览和交互。

留白分割：

主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），自然地将信息进行分组。这种留白的方式能够为页面增加呼吸感，降低视觉噪音，使设计看起来更简洁。

近年来，设计趋势从“卡片式设计”转向了“去线化设计”，

即倾向于使用留白分割而非过多的线条分割，以实现更为简洁清晰的界面效果。设计师在选择分割方式时，应优先考虑留白分割，其次是线性分割，最后是卡片分割。这个选择顺序反映了设计界的一般原则，即在不影响信息传达的前提下，尽可能保持设计的简洁性。

线性分割的定义：

线性分割设计是一种在视觉设计中使用的技巧，它使用线条、边框或细线等元素来划分、区分或连接页面上的不同内容区域。这种设计手法主要用于

提高页面内容的可读性和组织性，帮助用户更好地理解和浏览页面信息。

线性分割设计具有以下优势：

1.划分区域：

线性分割可以将页面划分为不同的区域或模块，使得每个区域的内容更加清晰、有序。这有助于用户快速定位和浏览所需的信息，提高阅读效率。

2.区分内容：

线性分割可以用来区分不同类型的内容，如文本、图片、图表等。通过线性分割，可以将这些内容进行分组或归类，使得页面更加整洁、有序。

3.引导视线：

线性分割可以引导用户的视线，帮助他们更好地理解页面内容。通过合理的线性分割设计，可以突出显示重要的信息或元素，引导用户关注到关键内容。

4.增强层次感：

线性分割可以增强页面的层次感，使得页面内容更加丰富、有深度。通过不同样式的线性分割，可以区分不同的信息层级，帮助用户更好地理解页面结构和内容关系。

使用原则：

在使用分割线时，我们应遵循一些原则，以确保其有效地帮助用户理解页面的组成，同时避免过度使用带来的视觉干扰。

1.分割线应当微妙而不过于显眼。

它们在布局中应该容易被用户注意到，但又不应成为焦点，以免分散用户的注意力。

2.分割线应被视为次要的元素。

只有在留白等其他设计手法无法有效起到分割作用时，才考虑使用分割线。它们应当是布局中的辅助工具，而不是主导元素。

3.谨慎使用分割线。

过度使用分割线可能会导致页面显得混乱和复杂。相反，我们应该用分割线来创建信息分组，而不是简单地分割每一个条目。通过审慎而恰当地使用分割线，我们可以有效地提升页面的可读性和用户体验。

图片来源于参考文章

线性分割三种类型：

通栏分割线、内嵌分割线和中间分割线。

1.通栏分割线（Full-bleed Dividers）：

通栏分割线通常横跨整个页面宽度，用于分隔彼此完全独立的内容区域。这种分割线在视觉上非常显著，能够清晰地划分出不同的内容区块，使用户能够迅速区分不同部分的信息。通栏分割线通常用于区分文章、产品列表、服务介绍等独立的内容区域。

2.内嵌分割线（Inset Dividers）：

内嵌分割线通常位于内容区域内部，用于分隔有锚点（如头像、图标等）的相关内容。这些锚点可以是图片、符号或小的图形元素，它们与分割线一起，帮助用户更好地理解和区分内容。内嵌分割线常用于列表、卡片式布局、时间线等场景中，用于展示有关联但不同类别的信息。

3.中间分割线（Middle Dividers）：

中间分割线位于两个内容区域之间，用于分隔无锚点的相关内容。这种分割线通常比通栏分割线更细，更注重于在视觉上划分空间，而不是强调内容的独立性。中间分割线常用于文本段落之间、列表项之间或不同功能区域之间，以提供清晰的结构和层次。

在大多数情况下，当信息层级较为简单（即信息层级≤2）时，使用分割线进行信息分割是一种有效的方法。然而，实际上，如果留白间距足够大，我们也可以使用留白来达到类似的效果。通过增大留白间距，我们可以创造出清晰的视觉区域划分，使得信息之间的界限更加明确。

与分割线相比，足够大的留白间距可以避免多余的线性元素干扰，让整体视觉效果更加清爽。这样的设计选择有助于提升用户的阅读体验，使用户更加轻松地理解和消化信息。

因此，在信息层级较简单的情况下，我们可以灵活地选择使用分割线或留白来进行信息分割。通过调整留白间距，我们可以达到与分割线相似的效果，同时保持整体设计的简洁和清晰。

为了提升屏效，我们希望在一屏内展示尽可能多的信息。在这种情况下，分割线的设计显得尤为重要，因为它们能够有效地划分信息区域，使内容更加清晰、易于理解。

通过使用分割线，我们可以将较多的信息条理化，使得用户能够更快速地找到所需的内容。与没有分割线的布局相比，使用分割线能够显著提高信息的可读性和可理解性。

在相同的信息布局下，分割线能够将信息区域明确地划分开来，防止信息之间产生混淆或交叉。这种划分不仅使得每个信息块更加独立，而且提高了信息之间的对比度，使用户能够更轻松地识别和区分不同的信息。

因此，当我们的目标是提高屏效并展示大量信息时，分割线的设计是一个关键要素。通过合理地使用分割线，我们可以确保信息布局更加清晰、有序，从而提高用户的阅读效率和满意度。（如下图）

线性分割在移动端页面设计中的应用场景广泛，尤其是在需要清晰划分信息模块时。如微信的聊天列表中，线性分割被用来区分不同的消息条目。每条消息之间通过一条细线进行分隔，使得每条消息清晰可辨，方便用户快速浏览和定位到特定的消息。

线性分割还常用在各类App的信息提示中，如果有多条消息需要展示，线性分割可以用来区分不同的消息组。例如招商银行APP中，当用户收到多条未读消息时，每条消息之间可以通过线性分割进行区分，使得每条消息清晰可辨，方便用户逐一查看和处理。

在APP需要用户填写信息和设置的表单页面中，线性分割可以用来区分不同的输入字段或信息区域。这有助于用户更清晰地了解需要填写的信息，提高表单的填写效率和准确性，比如站酷的设置页面（如下图）

卡片分割的定义：

卡片分割设计主要通过将内容或功能区域划分成独立的“卡片”来进行信息展示和组织。每个卡片通常包含相关的内容或功能，并且与其他卡片通过一定的间距或线性分隔进行区分。

卡片分割设计具有以下优势：

1.内容封装：卡片分割设计将相关内容或功能封装在一个独立的卡片内，使得每个卡片成为一个独立的信息单元。这有助于保持页面内容的清晰和整洁，方便用户浏览和理解。

2.明确边界：每个卡片通常具有明确的边界，通过边框、阴影或间距等元素来区分不同的卡片。这种边界的存在使得每个卡片在视觉上相对独立，方便用户进行区分和识别。

3.灵活布局：卡片分割设计具有很高的灵活性，可以根据需要自由调整卡片的大小、位置和排列方式。这使得设计师可以根据不同的设计需求和用户习惯来灵活调整卡片的布局，以达到最佳的视觉效果。

4.强调重点：通过不同的视觉处理手法，如改变卡片的颜色、大小或样式等，可以突出显示重要的卡片或内容。这有助于吸引用户的注意力，引导他们关注到关键信息。

卡片的基本构成：

卡片是一个独立的主题性容器，旨在将内容和操作组合在一起。它可以包含多种元素，如容器、缩略图、标题、副标题、富媒体、辅助文字、按钮和图标按钮等。这些元素并非必须全部存在，而是根据具体需求进行选择和配置。无论选择哪些元素，它们都会以易于扫描和操作的形式整齐地放置在卡片上。这种设计使得卡片成为一个灵活且高效的信息展示工具，适用于各种场景和应用。

卡片分割常见的类型：

卡片分割可分为通栏卡片和非通栏卡片

1、通栏卡片：

其特点是卡片占据整个页面宽度，没有左右边距。通栏卡片的设计可以提高布局的灵活性，使得页面内容更加宽敞和大气。同时，通栏卡片也可以更好地突出展示单条内容，引导用户的视线，提高阅读效率。

2.非通栏卡片：

与通栏卡片相比，它会在卡片的左右两侧留有边距，不完全占据整个页面宽度。这种设计方式可以使得页面内容更加有层次感和组织性，同时也有利于突出显示某些关键信息。

通栏卡片

通栏卡片相较于非通栏卡片，其设计特点在于去除了左右两端的留白，仅保留上下边距，从而提供了更大的展示空间。这种设计使得卡片内的内容能够占据整个页面宽度，进一步增强了内容的视觉冲击力。在通栏卡片中，卡片与背景的关系通常通过一条背景色块来抽象表现，这种简洁的处理方式避免了过多的视觉元素干扰，使得页面整体看起来更加整洁和统一。

通栏卡片可以被视为在极简列表式和传统卡片式设计之间的一种折中选择。它继承了卡片式的分层方式和强交互性，使得用户能够轻松地浏览和交互页面内容。如下图微博“关注”、微信“发现”页面。

非通栏卡片

通常采用带圆角的设计形式，这种设计不仅赋予卡片一种柔和、圆润的视觉效果，还增强了用户的视觉舒适度。结合阴影效果以及四周的边距，非通栏卡片巧妙地形成页面留白，使得整体设计层次感更加丰富。

通过巧妙的投影设计以及前后颜色的精准设定，非通栏卡片成功地让内容与背景之间产生视觉空间感，进一步强化了内容的立体感和层次感。这种设计技巧不仅提升了卡片的视觉吸引力，还使得用户在浏览页面时能够更加轻松地区分和聚焦关键信息。

在页面设计中，非通栏卡片的应用范围十分广泛。无论是用于展示文章、产品、图片还是其他类型的内容，非通栏卡片都能够通过其独特的视觉效果和设计元素，为用户带来更加舒适、美观的视觉体验。同时，非通栏卡片还具有良好的适应性和灵活性，可以根据不同的设计需求和用户习惯进行定制和调整，满足不同场景下的应用需求。如下图夸克“夸克日报”、APP Store“首页”

选择使用通栏分割线还是卡片分割，主要取决于你的设计目标和内容需求。以下是三个参考建议，帮助你做出更好的选择：

1.当内容已有自然分割线时：

如果你的主题内容本身就已经有明确的分割线，比如列表项、段落分隔等，那么采用非通栏分割会是一个好选择。卡片可以清晰地界定每个内容块，使主题信息层次更加分明，提高用户的阅读效率。

2.当内容类型多样且占据较大空间时：

如果单个主题内部包含了多种类型的内容，如文字、图片、视频等，且这些内容在垂直方向上占据了较大的空间（例如，内容长度超过屏幕高度的一半），使用非通栏分割会更加合适。卡片能够有效地圈定内容范围，为用户提供一个明确的视觉边界，帮助他们更好地理解和消化信息。

3.当需要增强横向空间感时：

如果你希望扩展页面的横向空间，或者暗示用户可以横向滑动页面查看更多内容，那么非通栏卡片会是更好的选择。非通栏卡片的设计能够利用横向内容连续性原则，帮助用户建立页面可以横向滑动的意识，从而提升页面的互动性和用户体验。如下图知乎“发现”、站酷“推荐”。

卡片分割更适合图文混排

卡片分割设计以其独特的布局方式，成为图文混排中的理想选择。它能够巧妙地将不同大小、媒介的内容统一呈现在一个界面中，实现了内容的多样性与统一性的结合。这种设计不仅让单屏区域能够显示更多内容，还通过合理的空间划分，确保了文字和图片之间的和谐共存，既维持了视觉的一致性，又巧妙地平衡了文字和图片的视觉强度。因此，在需要同时呈现多种内容和媒介的场景中，卡片分割无疑是一种高效且美观的解决方案。如下图知乎“想法”、站酷“首页”

留白分割的定义：

留白分割是目前设计的主流趋势，越来越多的产品在使用留白分割设计。留白分割主要通过增加间距的方式，利用人的视知觉原理（接近法则：人的大脑会倾向于把彼此靠近的元素视为一组），将信息进行自然的视觉分组。

留白分割具有以下优势：

1.突出重点信息：

通过增加间距，可以将关键信息与其他内容区分开来，使用户更容易注意到。

2.提高可读性：

适当的留白可以使文字或图形元素之间的界限更清晰，减少视觉干扰，从而提高用户的阅读效率。

3.增强设计感：

留白可以为设计增加呼吸感，避免元素过于拥挤，使整体布局更加和谐、美观。

当元素之间的间距保持均匀时，整个视觉呈现会显得平衡且协调，大脑默认为一个整体。然而，一旦元素的横向和纵向间距发生变化，我们的大脑会

基于接近性法则，本能地将距离较近的元素视为一个整体或群组，这就是留白分割。（如下图）

留白分割在有规律且卡片样式较多

的页面中表现尤为突出，在有大量卡片样式的页面中，每个卡片通常都包含一定的信息。通过留白分割，可以清晰地划分每个卡片的信息区域，使用户更容易区分和阅读每个卡片的内容，增加呼吸感，避免元素过于拥挤，从而提高整体的可读性。例如下图中主流的音乐类App

相反，如果在没有规律且页面内容较多的情况使用留白分割，则会使页面杂乱无章。比如下图咸鱼的“广场”界面feed流中，图片从1～9张都有的情况下，使用留白分割，页面就会变得杂乱，影响视觉效果。而脉脉则采用了卡片式分割样式，页面模块则相对清晰很多。

写在最后：

在我们界面设计中，我们应充分考虑信息条目的复杂度。当信息较为简单时，利用留白分割，能够创造出清爽且不受干扰的视觉体验。但随着信息复杂度的增加，留白分割可能不足以清晰地展现信息层次，此时，引入线性分割是一个有效策略，它能提升屏幕的利用效率，使信息条理更加清晰。

当信息复杂度进一步升级，例如已经运用了线性分割或涉及更多操作时，我们需要进一步强化信息条目之间的边界感。这时，卡片分割是一个理想的选择，它不仅能增强信息的视觉层次，还能提升条目的可操作性。

重要的是，选择信息分割方式时，我们要明确：分割本身不是目的，而是为了构建清晰的版面逻辑

，通过悦目的信息秩序来更好地突出内容，实现最佳的信息传达效果。因此，在决策时，除了考虑上述细节因素，还需全面评估整体版面效果和信息传达效率。感谢阅读，希望对您有用。

作者：King_LBJ
来源：站酷

评论(0) 浏览(647)

042024-3

B端设计语言-形色字构质动

博博

作者：啾啾复啾啾zz
来源：站酷

评论(0) 浏览(497)

042024-3

作为设计师，你了解交互设计文档吗？

博博

许多设计师可能未曾接触过所谓的“交互设计文档”。在实际工作中，这份文档是由交互设计师负责输出的，但令人惊讶的是，大多数互联网公司并未设立专门的交互设计师岗位。相反，交互设计师的职责通常由UI设计师与产品经理共同分担。为什么这些公司不选择招聘专门的交互设计师呢？

本篇文章旨在帮助设计师们全面理解交互设计文档。我们将

深入探讨其定义、作用、价值、制作方法以及核心内容

等。当然，如果文中存在任何不准确或遗漏之处，我也非常期待各位专家的指正和建议，让我们共同进步。

一、基本概念解析

交互设计文档是交互设计师的核心工作成果。

交互文档，即交互设计说明文档（英文名“Design Requirement Document”）。又称“DRD文档”。用来承载交互说明、交互原型、项目背景等内容，存档并交互项目相关伙伴的团队协作文档。

它在将用户需求转化为高可用性产品的过程中起着至关重要的作用。这不仅仅局限于绘制线框图，而是要求设计师具备明确的产品化思维，精通需求分析，构建信息架构，掌握业务流程与任务流程，同时还要有严谨规范、结构清晰的设计说明。

一份出色的交互设计文档不仅能够展现设计师的专业素养，赢得同事的认可与尊重，更可以显著减少产品设计过程中的沟通成本，提高工作效率，从而确保产品研发的顺利进行。

二、为什么需要交互设计文档

交互设计文档在产品设计过程中的重要性不容忽视。

交互设计文档是设计师与团队成员之间沟通的桥梁。

在项目中，设计师通常需要与产品经理、开发人员、测试人员等不同角色的成员紧密合作。而交互设计文档则能够确保所有相关方对产品的设计目标、功能逻辑、用户体验等方面有统一的认识和理解。这有助于减少沟通成本，避免因为理解偏差而导致的项目延期或功能失误。
交互设计文档有助于提升产品研发的效率。

通过文档，设计师可以将复杂的设计思路转化为清晰、具体的可执行方案。这不仅有助于开发人员准确理解并实现设计师的意图，还能够减少因为需求不明确或设计改动而导致的返工和延误。同时，文档中的信息架构、导航设计、任务流程等内容也能够帮助团队成员更好地规划和分工，确保项目的顺利进行。
交互设计文档还是设计师个人专业素养的体现。

一份详尽、规范的文档不仅能够展示设计师对产品的深入思考和分析，还能够体现其严谨的工作态度和对细节的关注。这有助于赢得上下游同事的尊重和认可，提升设计师在团队中的影响力和话语权。
通过不断地积累和完善交互设计文档，设计师可以逐渐构建起一套规范化的设计体系

。这不仅有助于提升个人和团队的专业素养和知识水平，还能够为公司的产品设计提供有力的支持和保障。在未来的项目中，这些历史文档还可以作为参考和借鉴的依据，帮助团队更快、更好地完成设计任务。

三、交互设计文档给谁看？

交互设计文档需要确保文档的有效性和实用性，它必须具备良好的可读性、唯一性和时效性。

产品经理

——不同公司和团队中，产品经理与UI/UX设计师之间的合作方式和输出物各不相同。有些公司中，产品经理会负责撰写包括交互说明和原型在内的PRD文档，但这种情况下往往容易出现体验层面的疏漏。当公司有交互设计师时，交互设计师需要从功能规划、信息架构到原型说明等方面全面介入，确保产品的完整性和用户体验的流畅性。此外，在某些流程中，产品经理和交互设计师可能会分别负责PRD文档和交互文档的编写，两者之间的逻辑需要相互印证，以确保产品的逻辑和体验都达到最佳状态。
UI设计师

——作为交互设计师的下游，UI设计师在项目中也扮演着至关重要的角色。为了确保项目的顺利进行和避免后期可能出现的问题，交互设计师需要尽早介入需求沟通，与UI设计师紧密合作。通过交互设计文档，UI设计师可以更加清晰地了解产品的设计思路、信息架构和交互方式，从而设计出更符合用户期望和体验的界面。
开发（前端）

——开发团队是交互设计文档的重要受众之一。他们需要根据文档中的信息来实现产品的逻辑、页面跳转流程、交互方式和动效等。一份详细、准确的交互设计文档可以帮助开发团队更好地理解设计师的意图，减少开发过程中的误解和返工。然而，在实际操作中，很多公司可能只有简单的PRD文档，开发团队可能只是简单地浏览一下，这可能会导致开发结果与设计师的初衷产生偏差。因此，交互设计师需要与开发团队保持密切沟通，确保他们充分理解和遵循交互设计文档中的要求。

交互设计文档在产品开发过程中不仅能够帮助团队成员更好地理解和实现设计师的意图，还能够促进团队成员之间的沟通和协作，确保项目的顺利进行。因此，我们应该高度重视交互设计文档的编写和管理工作，确保其在项目中的有效应用。

四、交互设计文档应包含哪些内容？

一份最基本的交互设计文档需要包含：

封面、更新日志、需求分析、产品架构、任务流程图、页面流程图、交互规范说明、交互原型、废纸篓

等模块。

封面

——包括产品/项目名称、版本编号、撰写时间、撰写人、参与该项目的各方负责人，便于后续查阅及版本管理。

更新日志——包含具体新增或修改的内容，修改人，修改日期等信息。

在实际工作中，方案的修改和优化是不可避免的。更新日志方便项目成员一目了然关注到重点更新的内容，也方便开发找到对应的负责人进行沟通，提升工作效率。

需求分析——包括产品名称、项目背景、目标用户、用户目标、产品目标、产品目标、使用场景、设计目标与设计思路，方便项目相关人员快速理解项目背景，总结回溯项目设计。

需求分析是产品设计过程中至关重要的一步。它涉及到深入理解用户需求、业务目标和产品目标，以及将这些需求转化为具体、可执行的设计方案。在进行需求分析时，设计师需要与用户、产品经理和其他利益相关者进行深入的沟通与合作，确保对需求的全面把握。通过收集和分析用户反馈、市场数据、业务策略等信息，设计师能够挖掘出用户最真实、最根本的需求，为产品设计提供有力的指导。

产品信息架构——包括复杂内容的信息组成，展示完整的项目内容整体信息架构图。

产品信息架构是设计过程中的关键环节，它负责将产品的功能、内容和用户体验进行有序、清晰的组织与呈现。一个好的信息架构不仅能帮助用户快速找到所需信息，还能提升产品的整体可用性和用户体验。在构建信息架构时，设计师需深入考虑用户的信息查找习惯、浏览路径以及产品的核心功能。通过合理的信息分类、层次划分和导航设计，信息架构能够将复杂的产品内容变得易于理解和操作。

图源：龙爪槐守望者

业务流程图——产品主要业务流程图概述，用于描述主要功能业务流程（泳道图/单向流程图）。

业务流程图是一种视觉工具，用于清晰展现业务运作的逻辑和步骤。通过业务流程图，团队成员可以直观地了解业务的全过程，从而更好地协作和执行。绘制业务流程图时，设计师需要深入了解业务需求和流程细节，将每个步骤、环节和决策点都清晰呈现。这样的图表不仅有助于设计师梳理和优化业务流程，还能帮助开发团队准确实现业务逻辑。

图源：滴滴出行业务

任务流程图——产品任务的流程化表现，一个主流程，多个次要流程。每个任务用一组流程图表示。

设计师在绘制任务流程图时，需要细致分析每个任务步骤，确保流程图的准确性和完整性。流程图中的箭头、符号和文字说明等元素，能够清晰呈现任务执行的顺序、条件分支和循环等逻辑关系。通过任务流程图，用户可以更加清晰地了解任务的执行过程，减少操作失误和不必要的困扰。

页面流程图——带有页面形态的任务流程图。

页面流程图是设计过程中不可或缺的一环，它细致描绘了用户在产品使用过程中，不同页面之间的跳转、交互和逻辑关系。在绘制页面流程图时，设计师需要关注用户的行为路径、页面间的转换条件和可能的交互动作。通过流程图，设计师可以清晰地展现出用户从进入产品到完成目标的整个过程，以及期间可能遇到的分支和循环。

交互规范说明——原型设计中出现的公用组件，通用样式集合。

交互规范能保障产品内不同模块的设计一致性，同时提高不同设计师间的设计、协作效率；通过定义标准规范，提高流程、组件复用率，提高整体开发效率；让用户能够在产品全局感受到统一且完整的体验，降低使用成本和学习难度。

交互原型

——带有交互效果的页面结构设计，包括原型界面、设计说明等。

废纸篓

——放置多版本稿件。

五、总结

深入探索交互设计文档与用户体验的核心关系

。在产品设计的过程中，交互设计文档不仅是形式上的必要文件，更是设计师与用户、业务团队之间沟通的桥梁。它的核心目的在于确保设计的方向符合产品的整体战略和用户的真实需求。

用户体验是产品设计的灵魂。

设计师需要深入了解用户，挖掘他们最根本、最真实的需求。这不仅仅是通过问卷调查或用户访谈，更是要站在用户的角度，思考他们在使用产品时的每一个动作、每一个决策背后的原因。只有这样，设计师才能为用户带来真正有价值的产品体验。只有这样，才能确保设计出的产品既符合业务目标，又能为用户带来卓越的体验。希望每一位设计师都能在职业生涯中不断进步，为用户和业务创造更多的价值。

作者：Oceans1de
来源：站酷

评论(0) 浏览(487)

« 1 2 3 4 5 6 7 ... 85 »

日历

链接

个人资料

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