ui设计分享达人 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

232025-1

ui设计公司分享：让画面出彩的技巧

ui设计分享达人

自学必学-让画面出彩的秘技

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

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan

评论(0) 浏览(156)

212025-1

2025 年 B 端界面设计的最新趋势与展望

ui设计分享达人

个性化设计

打造个体专属形象1：随着 “超级个体” 时代的来临，B 端设计不再只关注企业整体，更注重为个体赋能。如钉钉等平台开始为用户提供动态头像等个性化功能，让员工能在工作场景中展现独特个性。
满足个体情绪需求：通过色彩、插画等元素营造更具情感氛围的界面，比如 Teams 和 ONES 等产品利用色彩和插画设计，提升用户对品牌的情感认同，使工作不再枯燥。

视觉设计创新

渐变色的广泛应用2：渐变色重新定义了 B 端视觉美学，许多 B 端产品将背景和元素转变为渐变色，如 Baklib 官网的淡色背景渐变，既传达现代感与科技感，又实现了不同内容间的自然过渡。
网格化布局流行2：网格化布局以其结构性受到青睐，像 Magnolia 与 Intercom 等企业的官网采用此布局，使内容分区明确，优化了页面可读性与逻辑性。

智能化融入

突出 AI 元素2：AI 已成为 B 端设计的核心元素，众多 SaaS 平台在官网上直接强调与 AI 相关的功能，甚至在 Slogan 中加入关键词，展示企业的科技实力，让用户感受到前沿的科技形象。
智能交互体验：借助 AI 实现智能提醒、自动推荐等功能，例如一些 B 端办公软件可以根据用户的使用习惯和工作流程，自动推送相关的任务和文件，提高工作效率。

交互设计升级

微动效与微交互2：适度的动画和交互效果能够吸引用户注意，增强网站互动性，如在时间轴上滑动的效果、功能版块的滚动折叠等，让界面更加生动有趣，提升用户粘性。
便捷的菜单导航2：折叠加展开的平铺菜单导航成为主流，清晰直观，方便用户快速找到所需信息，提高了信息获取的速度和便利性。

展望未来，B 端界面设计还可能有以下发展方向：

沉浸式体验增强

随着技术的发展，B 端界面可能会更多地融入虚拟现实（VR）和增强现实（AR）技术，为用户带来沉浸式的操作体验。比如在设计建筑规划、机械维修等 B 端应用时，用户可以通过 VR 或 AR 技术更直观地进行操作和协作。

数据可视化深化

面对日益增长的数据量，数据可视化将更加复杂和精细。除了常见的图表和图形，可能会出现更具创意和互动性的数据展示方式，帮助用户更深入地理解数据背后的信息，为决策提供更有力的支持。

跨平台融合优化

企业使用的设备和平台越来越多样化，未来 B 端界面设计需要更好地实现跨平台融合，确保在不同的设备和操作系统上都能提供一致、流畅的用户体验。

总之，2025 年的 B 端界面设计正朝着个性化、智能化、创新化的方向发展，未来也将持续以满足用户需求、提升用户体验为目标，不断探索和创新。B 端设计师需要紧跟这些趋势，才能为企业创造出更具价值的产品和服务。

评论(0) 浏览(425)

212025-1

解锁B端按钮设计10大密码

ui设计分享达人

无法想象没有按钮的页面是什么滋味，那定会像没有方向盘的汽车，让人不知所措吧？也无法想象按钮设计不恰当，会给用户带来怎样的困扰？

面对十万火急的任务需求，

如果需要调动全部理性脑，深呼吸三秒，

才能找到想要执行操作的按钮入口，我想这样的产品设计是失败的，是会被用户所唾弃的。

本文将详细剖析按钮的神秘面纱，了解它、研究它，让按钮设计成为产品的得力助手，为我们的产品赋能，为我们的工作提效，下面就让我们开启这场神秘之旅吧!

一、按钮的定义

二、按钮设计的种类

三、按钮设计的尺寸

四、按钮的构成

五、按钮设计的作用

六、按钮的位置

七、按钮的颜色

八、按钮在UI界面的设计原则

九、按钮设计的注意事项

十、按钮弱化设计的六种方式

按钮在我们生活中起着很大的作用，它就像我们的小助手一样，帮我们一键开启想要的任务，凡事都能一键触达。

按钮在UI界面中，是一种界面交互控件，通常以矩形、圆形或其他几何形状呈现，具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作，如提交表单、执行命令、导航页面、切换状态等。

按钮一般包含文字标签、图标或两者的组合，以清晰传达其功能。

同时，按钮在不同状态下会呈现出不同的视觉效果，如默认状态、按下状态、悬浮状态、禁用状态等，为用户提供操作反馈和引导。

1、Antdesign对按钮的种类划分：

❶

次按钮

常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。

❷

主按钮

突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。

❸

文字按钮

弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如下面的站酷活动页就用了很多的文字按钮，只有当按钮被选中时，按钮才会高亮选中。

❹

图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面，让页面看起来更加的简洁。

❺

在按钮中添加图标

用于对按钮含义补充解释，提高按钮识别效率。

2、按钮的样式种类

按钮的样式可以从多个方面进行分类和设计，以下是一些常见的样式分类：

❶

按颜色划分:

单色按钮

：

按钮背景为单一颜色，如蓝色、绿色、红色等，常用于强调按钮的主要功能或操作。

渐变色按钮

：

按钮背景为渐变色，可以是线性渐变或径向渐变，通常用于增加视觉吸引力和现代感。

透明按钮

：

按钮背景透明或半透明，通常用于与背景融合或突出按钮上的文本和图标。

彩色边框按钮

：

按钮背景透明或浅色，但有彩色边框，常用于需要突出按钮边界的场景。

❷

按形状分

矩形按钮

：

这种是最常见的按钮形状，适用于大多数界面设计。

圆形按钮

：

按钮形状为圆形，通常用于表示播放、暂停等操作，或用于具有特定功能的图标按钮。

圆角按钮

：

按钮形状通常为圆角矩形，常用于需要柔和视觉效果的场景。

自定义形状按钮

：

根据设计需求，按钮可以是任意自定义形状，如星形、心形等，常用于创意设计或特定主题的界面。

❸

按边框分

无边框按钮

：

按钮没有边框，背景和文本直接显示，常用于简洁的界面设计。

细边框按钮

：

按钮有细边框，常用于区分按钮与周围元素，同时保持界面的简洁性。

粗边框按钮

：

按钮有粗边框，常用于强调按钮或与背景形成强烈对比。

虚线边框按钮

：

按钮边框为虚线，常用于表示辅助操作或非主要功能。

❹

按图标分

图标按钮

：

按钮上只有图标，没有文本，常用于表示通用操作或节省空间的场景。

图标+文本按钮

：

按钮上既有图标又有文本，图标通常位于文本左侧或上方，常用于清晰表达按钮功能的场景。

❺

按阴影样式分

无阴影按钮

：

按钮没有阴影，常用于简洁或平面风格的界面设计。

轻微阴影按钮

：

按钮有轻微的阴影效果，常用于增加按钮的立体感和层次感。

明显阴影按钮

：

按钮有明显的阴影效果，常用于突出按钮或与背景形成强烈对比。

动态阴影按钮

：

按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化，常用于增加交互体验的趣味性。

❻

按动画种类分

无动画按钮

：

按钮没有动画效果，常用于简洁或传统的界面设计。

悬停动画按钮

：

当鼠标悬停在按钮上时，按钮会有动画效果，如颜色渐变、边框变化、图标旋转等，常用于增加交互体验的趣味性和吸引力。

点击动画按钮

：

当点击按钮时，按钮会有动画效果，如缩放、震动、波纹等，常用于增加交互体验的反馈感。

马蜂窝的功能主按钮，在点击的时候都会产生动画，交互感十足。

加载动画按钮

：

当按钮处于加载状态时，按钮会有加载动画效果，如旋转图标、进度条等，常用于告知用户操作正在进行中。

3、按钮的几种状态

3.1 默认按钮

：

按钮的初始状态，通常具有正常的颜色、形状和文字显示，等待用户操作。

3.2 待激活状态按钮：

待激活状态按钮通常用于指示某个功能或服务尚未激活或启用，用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态，并引导用户进行下一步操作。

3.3 点击状态按钮：

当用户点击按钮时，按钮会呈现按下的状态，通常通过改变颜色、形状或添加阴影等方式来表示。

3.4 禁用按钮：

在某些情况下，按钮会处于禁用状态，无法进行操作，通常会以灰色或半透明的方式显示，提示用户当前操作不可用。

3.5加载状态按钮：

加载状态按钮通常用于指示某个过程正在进行中，例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理，而不是卡住或出现错误。

3.6危险提示状态按钮：

危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果，例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性，以避免误操作。

下边这两组弹框就是运用了危险按钮，来提示客户未来即将面临的风险，警示作用非常的明显。

1、 Web端的按钮尺寸建议

在Web端，按钮尺寸没有固定标准。不过，一般来讲，按钮的高度常在32px-48px之间，宽度可根据内容灵活设置，但最好不要小于48px，这样方便用户用手指（触屏设备）或鼠标点击。像一个简单的“提交”按钮，宽度可能是80px左右，高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适，易于交互。

2、麻省理工触摸实验对按钮尺寸的指导

麻省理工触摸实验室通过对人类指尖的研究，得出了关于界面按钮大小设计的一些重要参考数据。

对于食指，平均宽度在16至20毫米，指腹触摸区域尺寸为10至14毫米，指尖触摸区域尺寸为8至10毫米；对于拇指，平均宽度为25毫米，指腹触摸区域尺寸为12至16毫米，指尖触摸区域尺寸为10至12毫米。由此建议，食指触摸的按钮应保证在8毫米×8毫米以上，且控件间距应保证至少在1毫米以上；拇指触摸的按钮应保证在10毫米×10毫米以上，且控件间距应保证至少在2毫米以上。

该研究还指出，大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标。

3、 iOS对按钮尺寸大小的规范

从按钮图标尺寸来看，根据苹果官方设计指南，iOS中按钮图标有不同标准。小图标尺寸为24×24pt，用于小型按钮，如导航；标准图标为32×32pt，用于普通按钮，适合次要操作按钮；大图标是 40×40pt，用于宽大按钮；特大图标则为48×48pt，用于特大按钮。不同设备屏幕尺寸也有对应的建议图标尺寸，如iPhoneSE建议24pt，iPhone14及iPhone14Pro建议32pt，iPad 建议40pt 。

在最小触摸区域方面，iOS规定最小触碰区域为44×44pt，这种尺寸一般适合主要操作按钮。

UI按钮的组成主要包括以下几个关键元素：

1、圆角

圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮，如4px圆角；圆角越大，越有亲和力，人眼往往不喜欢非常锋利的物体，所以通常不建议使用0圆角的按钮样式，根据我大量的体验，我发现市面上确实也是带圆角的按钮居多些。

2、图标

图标用于直观表达按钮的功能或状态，如加载中、编辑等。图标的设计应与整体页面风格一致，并确保其含义明确易懂。

3、内间距

内边距能够扩大按钮的可点击范围，帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然，你也可以根据你设计的实际情况做适当调整，规矩不是死的。

4、容器

容器是包含所有视觉和交互元素的框架，包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。

5、边框

边框定义了按钮的边界，常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。

6、文案

文案是按钮上的文字描述，用于表达按钮的含义和功能。文案应简洁明了，易于理解，同时具有一定的吸引力。

7、背景

背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。

8、投影

投影用于凸显层级关系，帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用，以打造更好的视觉体验。

佐糖首页为了促进转化，特意将“开通会员”的按钮用投影凸显处理，带投影的按钮明显有向前走的感觉，比没有投影的按钮看起来更加显眼，小小投影在页面中不仅起到增加空间感的作用，还起到了业务强调的作用，已经不仅仅是样式的一个承载了。

这些元素共同作用，不仅提升了按钮的功能性，还增强了其美观性和用户体验。在设计UI按钮时，应综合考虑这些因素，以确保按钮既美观又实用。

Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动，并帮助用户防错。

1、触发操作

1.1提交与确认：

在表单填写场景中，如用户注册、登录、信息提交等，按钮用于触发提交或确认操作，将用户输入的信息发送给系统进行处理。

1.2执行功能：

在各类软件中，按钮是执行具体功能的主要方式，如在图像编辑软件中，“裁剪”“旋转”“调整颜色”等按钮，可让用户快速实现相应功能。

2、导航跳转

2.1页面切换：

在多页面的应用或网站中，按钮可实现页面之间的切换，如网站的首页、产品页、关于我们页等，通过点击按钮，用户能方便地浏览不同页面内容。

2.2菜单展开与收起：

用于控制导航菜单的展开与收起，节省页面空间，提高界面的整洁度和易用性。

3、状态控制

3.1显示与隐藏：

可用于控制某些元素的显示与隐藏，如在电商网站中，点击“查看更多商品详情”按钮，可展开隐藏的详细商品信息。

飞书中的这个小小按钮，它承载着隐藏折叠的功能，让页面看起来更加的简洁有序。

3.2启用与禁用：

在某些功能需要满足一定条件才能使用时，按钮可用于表示该功能的启用或禁用状态，如在未填写完必填项时，“提交”按钮处于禁用状态，无法点击。

中国移动云盘的登录页就是这么设计的，当前面信息没有填完，后面的登录按钮始终是禁用的状态，只有当信息填完，且填写正确，按钮才会亮起。

4、提供反馈

4.1 操作反馈：

当用户点击按钮后，按钮会通过颜色、形状、动画等方式的改变，向用户提供操作反馈，告知用户系统已接收到操作指令。

4.2 引导提示：

在一些复杂操作或新功能引导时，按钮可作为引导提示的一部分，告知用户下一步操作，如在新手引导流程中，突出显示“下一步”按钮。

心岛日志的新手指引中就是这样设计的，按钮在其中起了很重要的指引作用。

5、数据交互

5.1 数据筛选：

在数据展示界面，如表格、列表等，按钮可用于对数据进行筛选，方便用户快速找到所需信息。

钉钉打卡这个界面中，多亏有了日、周、月的筛选按钮，才让数据筛选变得如此便捷。

5.2 数据排序：

通过点击“按时间排序”“按销量排序”等按钮，用户可对数据进行重新排序，以满足不同的查看需求。

6、品牌传达

很多产品的按钮颜色都是与它的品牌色高度一致的，它既是按钮，又是品牌色的传递大使。

网易云音乐的按钮色用的网易红，钉钉打卡的按钮用的腾讯蓝，都是在传递自己的品牌色，同时也是在进行指令的传达。

在日常设计中，页面无疑少不了按钮位置的摆放，那么按钮放置在什么样的位置合适，这也是一个值得深思的问题，也许我们已经司空见惯了按钮的位置摆放，但是我们知道它为什么要放这里或者那里吗？下面我们来看下这几种设计模型，让它告诉我们，为什么，在特定场景下，按钮位置要这么放？

1、设计依据 – Z型视觉模型

1.1 原理含义

Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。

它的布局遵循字母Z的形状，指用户的浏览路线——从左到右，从上到下的的视觉运动轨迹。

首先，人们从左上角到右上角进行扫描，形成一条水平线；第二步，向页面的左下侧，创建一条对角线；最后，再次向右转，形成第二条水平线，当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形。

1.2 视觉区域

区域1：位于页面左上角，是用户视线最先关注的区域，通常放置最重要的信息，如网站标志、导航栏等，能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。

区域2：在区域1的右侧，用户的视线在水平移动时会经过该区域，可放置一些与区域1相关的辅助信息或次要的导航元素等。

区域3：位于页面中部偏左，当用户视线继续向下移动时会关注到该区域，通常用来展示页面的核心内容，如产品介绍、文章主体等。

区域4：在页面的右下角，是用户视线的终点区域之一，可放置一些重要的操作按钮或补充信息等，以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。

1.3 应用案例

在电商网站中，商家会把热门推荐或主打产品放在区域1和区域3，以吸引用户的注意力。在产品详情页面，将“加入购物车”“立即购买”等按钮放在区域4，方便用户在浏览完产品信息后进行购买操作。

天猫商城就是这样做的，把网站的LOGO图放置在左上角（区域1），把产品图放置在左下角（区域3），最后在用户浏览了全部页面之后，在右下角（区域4）放置购买按钮，引导用户下单。

在这个带有销售场景的页面设计中，

购买按钮放置在右下角符合用户浏览习惯，也符合Z型视觉模型。

在B端应用软件中，可能运用的功能比较多，按钮也比较多，通过大量分析和观察发现，它们

大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。

腾讯云是这样处理的，中国移动网盘是这么处理的，看似巧合，其实也有它合情合理的一面，因为每一个动作的开始和结束都会更加的引人注意。

这就跟人们每次入职一个新公司一样，刚进去时会特别卖力、小心，后面时间长了，也就形成免疫，习惯了，但是当最后要离开这家公司的时候，最后心情又会特别复杂，回想起自己在这里成长的岁月，就会心生很多的感慨，也会特别的记忆深刻。

也许这也是为啥很多页面设计，喜欢

把重要的按钮放置在每次视觉运动线的起点或者终点吧！

按钮的颜色在界面中不仅起到视觉点缀的作用，同时也是按钮状态的一种呈现和反馈。

按钮颜色不是千篇一律的品牌色，它也经常需要根据业务场景的不同，更换颜色，比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮，不同的按钮在颜色设计上都会有所区别。

此外，在设计按钮颜色时，有一些基本规范。

首先，从功能角度看，

主要按钮通常会使用比较突出的颜色，

像鲜艳的蓝色（如#007BFF），这是因为蓝色醒目又不会过于刺眼，能引导用户去点击。次要按钮（如取消、返回）的颜色会稍淡一些，比如浅灰色（#ccc），让用户知道这是相对次要的操作。

从颜色搭配来说，按钮颜色要和背景色有足够的对比度，方便用户识别。比如背景是白色，深色按钮就会很清晰；如果背景颜色较深，那按钮可以用浅色或者高亮度颜色。

另外，颜色的选择也要考虑产品的风格和使用场景。例如，在一个游戏软件里可能会使用更活泼的色彩，像红色、橙色；而在办公软件里，通常会采用比较沉稳的色调，如蓝色、黑色。

1、可识别性

1.1 视觉清晰：

按钮应采用用户熟悉的设计样式，如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。

1.2 文字明确：

按钮上的标签应准确、简明直接地介绍其功能，避免使用过于通用或模糊的表述，让用户清楚点击后会发生什么。

2、易操作性

2.1位置合理：

将按钮放在用户期望看到的地方，如遵循F型或古腾堡原则，在页面的视觉焦点区域放置重要按钮。

2.2尺寸适宜：

按钮大小应反映其在屏幕上的优先级，更大的按钮用于更重要的操作，同时要适配用户的手指，避免误触。

3、一致性

3.1 顺序得当、逻辑一致：

按钮的顺序应反映用户与界面之间交互的逻辑，如“上一步”按钮通常在左边，“下一步”按钮在右边。

3.2 状态样式一致：

按钮应具有一致的状态样式，如默认、按下、聚焦、禁用等，一个产品中，这些状态样式要高度的一致，不能在这个页面按钮样式是这样的，跑到另一个页面，样式又发生了改变。

著名的格式塔心理学也是这么认为的，它强调人对事物的理解是基于整体的、有组织结构的，如果按钮设计做到一致性，对提高产品的整体性是有非常大的改进的。

4、简洁性

4.1 避免过多

避免在一个界面中使用过多的按钮，以免让用户感到无所适从，应优先考虑最重要的操作。

4.2 功能单一

每个按钮应尽量只执行一个主要功能，避免一个按钮承载过多复杂的操作，降低用户的认知成本。

希克定律指出，人的决策时间会随着选择的增加而增加。在按钮设计中，

简洁的设计能减少用户的选择和认知负担

，使用户能更快地做出决策并执行操作。

5、美观性

5.1 风格统一

按钮的设计风格应与整个UI界面的风格保持一致，包括颜色、形状、字体等方面，形成统一的视觉体系。

5.2 对比协调

在保持整体协调的基础上，通过对比突出重要按钮，如使用高对比度的颜色、较大的尺寸等，吸引用户的注意力。

情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息，增强用户和产品的情感连接。

6、要符合习惯

奥斯卡·王尔德说过：“习惯一旦养成，便很难改变。”

所以我们在设计按钮的时候，一定要符合人性的习惯，而不是试图改变人们的习惯。

1、按钮设计要有分组意识

带有分组的按钮摆放，让人看起来总是更加的有序，也更利于用户进行操作，面对同类型的功能操作点无需跳跃着去寻找，能很快在相似功能操作区域找到。

360的分组意识很强烈，三个不同区域的图标按钮样式都做了明显的区分，让界面看起来更加有序，操作起来也更加的便捷。

2、按钮排列视觉上要有主次

切不可一行按钮中出现多个高强调的按钮，Antdesign对这个也做了诠释，会对用户的行为进行错误的引导，也不利于聚焦。

通义这个页面虽然有多个选中的按钮，但是没有全部用高强调的按钮，只有强推荐的操作“开始录音”才用了强按钮，其它通过相对浅的颜色做了弱按钮选中处理，视觉上主次分明，信息主次表达上也清晰可见。

3、不要在按钮中放置两个图标

当一个按钮同时兼顾两个交互动作的时候，一定要区分设计，不能赤裸裸的展示在一个按钮中，而不做任何区分。

4、返回按钮宜放置在左边

具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前，例如上一步。

5、按钮文字不宜太长

简短的文字更易被用户阅读和记住，在一个按钮上最多不超过5个文字，重要的按钮一般

使用2~4个字。

❶ 用纯灰色文字的弱化按钮

❷ 用灰色边框＋灰色文字的弱化按钮

❸ 用颜色边框+颜色文字的弱化按钮

❹ 用灰底+灰色文字的弱化按钮

❺ 用浅色底+颜色文字的弱化按钮

❻ 用纯颜色的弱化按钮

通过本篇文章的探讨，我们深入了解了B端按钮设计的九大核心要素。从按钮的基本定义到Antdesign的分类，再到尺寸、构成、作用、位置和颜色等细节，每一部分都是提升用户体验的关键。

按钮设计不仅关乎美观，更影响着用户的操作效率和满意度。

在UI界面中，遵循设计原则和注意事项，确保按钮既实用又具有吸引力，是每位设计师的职责。

希望本文能为设计师们提供有价值的参考，激发更多创新灵感，共同推动B端产品的交互设计向更高水平发展。

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

评论(0) 浏览(202)

212025-1

B 端界面设计中色彩搭配的实用技巧

ui设计分享达人

在 B 端界面设计领域，色彩搭配是影响用户体验和产品形象的关键因素。合理的色彩运用能提升界面的可读性、易用性，强化品牌认知。下面分享一些 B 端界面设计中色彩搭配的实用技巧。

一、运用色彩心理学

不同色彩会引发用户不同的情感反应。蓝色常被视为专业、可靠，如众多云计算平台的管理界面多采用蓝色调，让用户感受到服务的专业与安全，从而增强信任。绿色代表生机、健康，在医疗保健类 B 端应用中，用绿色显示正常数据，可营造安心的氛围。而红色具有强烈视觉冲击力，适合用于警示信息或关键操作提示，像删除确认按钮常用红色，以引起用户注意，避免误操作。

二、搭建色彩体系

构建一套完善的色彩体系是基础。主色调要与企业品牌紧密相连，像 Salesforce 就以经典蓝色贯穿界面，强化品牌印象。辅助色一般选 2 - 3 种，用于次要元素，如在蓝色为主的项目管理系统中，浅灰色展示次要信息，橙色突出任务进度，让界面层次分明。强调色则用高饱和度、对比强的颜色，在数据报表中用红色标注异常数据，助力用户快速抓取关键信息。

三、确保色彩对比度

足够的色彩对比度是保障界面可读性和可操作性的关键。依据 WCAG 标准，正常文本与背景对比度至少 4.5:1，大文本 3:1。像黑字白底就是高对比度的经典搭配，易读性强；而深灰字配浅灰背景则可能导致阅读困难。此外，不同界面元素间的对比度也很重要，按钮与周围区域要区分明显，不同状态的按钮也要通过色彩变化区分，方便用户操作。

四、保障可读性与识别性

B 端界面信息量大，应避免花哨的色彩组合，防止分散用户注意力和造成视觉疲劳。像数据分析类产品，多采用淡蓝、淡绿等柔和色调搭配简洁图表和文字，让用户轻松理解数据。同时，要考虑色彩在不同环境和设备下的显示效果，确保清晰可辨，避免出现色彩偏差。

五、遵循品牌色彩规范

若企业有明确的品牌色彩规范，B 端界面应严格遵循。可直接使用品牌主色调，如腾讯云大量运用腾讯蓝，加深用户对品牌的关联认知。也可基于品牌色拓展衍生，提取不同明度和饱和度的颜色用于辅助或强调，既保持品牌一致性，又让界面更丰富生动。

六、重视用户测试

完成色彩方案后，用户测试必不可少。通过收集用户对界面色彩的直观感受、意见反馈，了解其舒适度、易读性等情况，针对性优化。同时观察用户行为，如寻找信息的速度、操作失误等，深入了解用户对色彩的实际需求，进一步完善设计。

总之，B 端界面设计的色彩搭配需综合考量多方面因素。掌握这些实用技巧，有助于打造出既美观又实用的 B 端界面，提升用户体验，塑造企业专业形象。

评论(0) 浏览(129)

212024-10

讲讲AI在B端设计上的应用方法

ui设计分享达人

B 端设计领域的 AI 应用

大多数同学目前对 AI 应用的认识只有文生图、对话、驾驶等领域，但 AI 应用的场景远远不止它们。

和头部的明星 AI 产品、模型相比，细分市场的 AI 应用就非常没有存在感了。比如使用 AI 进行财务的审核、饮料配方的调节、工程安全的模拟等等，它可以帮助企业节约大量的人力完成工作。

概括起来，就是一些可以通过计算机完成的（也不止）重复性劳动或标准化流程，都可以引入 AI 的技术进行降本增效。

那在 UI 设计领域中，这些重复性和标准化的工作内容有嘛？

有，但是并不会像外行或者新手想象的那么多。AI 难以覆盖的场景我们过去的分享探讨过，等等也会做进一步的说明，而这里我们先要探讨的，就是能用 AI 实现的 B 端设计场景，具体有哪些。

我们都知道市面上现在有很多开源的 B 端前端框架，各个大厂前赴后继地对它们进行更新和完善，里面包含了非常丰富的组件库。

这些组件库不不止是 UI 的组件，也包含了前端的对应代码，前端工程师可以快速调用这些代码组件而不用自己去重新写一遍样式和交互。

原则上，使用现成的组件开发就可以快速完成整套项目的前端内容，这可以给前端工程师节省大量时间。所以即使项目中有完整的设计稿，前端在开发过程中也会偷懒直接略过，直接套用框架内的组件实现。

这和设计师直接套用素材完成运营图设计一样，明明有现成的素材在那里，为什么要浪费一大堆时间自己重新画一遍还是用 3D 建模渲染？同理，要是组件足够丰富，满足项目的需要，设计师也可以直接复用官方的组件素材，不用自己设计。

组件化思维的运用，就是项目工作标准化和重复性的根源，不仅应用在设计领域，对于前、后端开发来说同理。

基于这种思路，催生出了一种新的 SaaS 模式 —— 低代码 Low-Code 服务。

即通过少量的代码，或者干脆不用代码，仅通过可视的工具和组件实现软件的开发，并完成相应的配置和部署的工具。

这概念咋一看不就是建站工具？比如有赞、微店之类的，用户可以在里面直接创建并配置店铺，然后以网页、H5 或小程序的形式发布。

但这只是最初级的应用，传统的建站工具属于帮你预制好了主要的参数和功能，用户只能在这个范围内做少量的自定义编辑和设置。但进阶的 Low-Code，会赋予用户更大的编辑范围和自由度，让用户通过可视化的界面创建自己想要的产品和功能。

这类产品已经衍生出一个规模不小的市场，因为有大量的中小企业不想投入太多的精力和成本进数字化平台的搭建上，

并希望能快速创建不同的管理工具来匹配企业日新月异的发展需要

。

这里要划重点，对于一部分企业来说，经营模式和业务流程是持续迭代的，如果使用传统的开发模式那么很难跟上这种迭代。

以连锁餐饮品牌举例，前期只在一个城市经营，和后期扩张到全省或全国，采购流程和供应链管理必然会持续进行调整，提交一个采购工单所需填写的字段就会发生变化，同理展示的表格、详情页也要跟着调整。

这类变化往往并没有修改界面的视觉、交互、组件，仅仅是增加和减少字段数据，而用传统的收集需求再输出进行开发的模式效率非常低，所以它们就成为 Low-Code 的最佳应用场景。业务方自己配置、修改直接上线，省掉产品经理、设计师、程序员中间耗差时……

并且对于很多企业来说，只需要应用一些非常基础的功能服务和页面类型。比如我经常提到的 B 端管理系统的四个核心页面类型：

Low-Code 就是把常规需求标准化，并运用组件化的框架，让用户通过简单的填写和编辑就能生成出想要的页面和功能。

既然需求不复杂，功能、组件、页面、代码都可以标准化，那不用 AI 降本增效还有王法嘛？

所以，使用 AI 生成 B 端页面（不是设计稿）的工具已经在大厂内部开始应用了，开发专属大模型，再把做好的组件喂给模型，用户只要在相应的表单内填入需求，就可以快速生成出落地的页面。

并且各家大厂内部的 B 端组件库，可远远不止对外分享的这些开源框架里包含的数量，还有很多特殊的业务组件，可以让模型得到更好的训练和产出，比普通 Low-Code 模式更简单高效，大幅度提升企业内部B端产品的落地和运用效率。

从已经了解到的信息中，有一部分业务部门已经开始进入实践环节了。且随着技术的迭代，这种工具必然会越来越强大，功能越来越丰富。

所以，了解完这个趋势，设计师和前端工程师迎来大结局了？要被AI技术清洗了？现在该捧起《从0到1学习炒粉》学习了嘛？

这就是下面要讨论的内容。

B 端 AI 和设计的关联

前面做了不少铺垫，就是为了强调，适用于 Low-Code 和 AI 生成的 B 端产品，是有前提条件的，包含下面这些要素：

完整成熟的前后端组件库
需求使用基础做法就能实现
需要经常变动调整的业务需求
对设计和交互本身要求不高

而这里面最关键的东西，就是标准化。必须要知道在今天的 AI 的应用发展中，要生成出符合实际工作需要的结果，绝对不是靠输入信息以后它自己 “蒙” 出来的。为了让结果尽可能准确，那么喂给模型的数据也就要越多且越有针对性。

理论上面向 B 端的 AI 工具，只要不断提供给他新的组件、页面，就能拓展它可以实现的范围。但不管你怎么训练它，都要满足标准化的前提。

而标准化，恰恰就是国内 B 端业务的命门……

我们都知道国内 SaaS 行业现在发展非常的混乱，虽然在不同的细分领域有自己的独角兽，比如财务领域的金蝶，OA 领域的钉钉，ERP 领域的用友等等。

但是这些公司就发展状况良好利润丰厚了？24年一季度的 SaaS 头部公司业绩非常萧条，比如网上找到的统计，和国外 SaaS 头部公司的估值和利润形成鲜明的对比：

为什么国内 SaaS 市场那么惨淡？说到底就是在国内 B 端领域很难实现真正的标准化，而不是国内 B 端市场规模太小。

比如钉钉、飞书这样的 OA 软件已经很成熟了，但它们的实际普及程度一点都不高，而中大型企业又有各种考量，现成的不用就热衷于开发一套自己的系统，简称定制化。这就倒逼 SaaS 工具为了满足更多的企业需求，拼命叠加功能，使得这些 SaaS 工具一个比一个臃肿。

而我们前面提到的 AI 生成，想要普及同样需要面对这种困境，因为模型不管怎么做，它都是基于特定标准化下的产物，它可以满足其中一部分需求，但难以满足其它需求。尤其是国内 B 端定制化需求中，混乱、抽象、联系复杂的问题非常突出。

换句话说，国内 B 端市场的大多数系统，是非标准化的，需要产品团队在面对这些非标准的需求下做出创新和适配，就必须要考虑很多抽象的因素，领导、背景、体验、交互、周期、难度等等。这个过程不可能由业务方自己完成，且最终导出的设计结果，往往会和常规方案有很大的差异。

按常规逻辑考虑的话，那有多少组件我们整理多少组件，早晚有一天不得穷尽设计师思考范围的边界？

且不说获得不同商业项目的业务组件有多困难，如果组件之间没有更底层的思路去规范它们的设计和交互，那么硬凑到一起的项目是非常割裂的，而 AI 在短时间内没办法做到真正理解交互的逻辑并根据使用场景做理性的推理。

所以基于一套团队产出的组件必然是有限的，它们或许可以满足自己项目，但不可能满足市面上所有项目的使用需求。

还有一个很关键的疑问，就是很多人会想，一个项目中的特殊组件往往只是少数，我们用 AI 工具生成多数页面，少数进行定制和独立开发不就行了？

这思路在逻辑上很合理，但实践起来的问题非常多。举个例子比如设计稿直接生成网页这种技术，从20年前我刚了解到网页设计那天说到现在了，这个实现逻辑理应不需要 AI 的参与都能做到，中间也问世了不少产品和工具，但没有一个做成了，反而网页前端工程师都成为一个独立热门职业了（以前是 UI 写）。

原因就是作为商业项目来说，团队需要 “可控性”，机器生成代码虽然容易，但是如果要修改里面的东西怎么办？实际情况就是前端对这些外部代码深恶痛绝，因为改起来太麻烦，而越大的项目改起来难度也越高。而且这个版本的一部分你改了，下个版本工具再生成的代码要不要兼容你前面写的东西？

所以现在即使有设计稿直接生成代码的工具前端也宁愿自己写，但当他们用到第三方框架的时候，能不动框架里面的东西就不动。想要理解这个感受，只要拿这些框架的组件素材用它们的组件、自动布局形式做完一个项目，你们就会产生 —— 还不如自己重做一遍的想法。

所以生成工具，要不然能一次性完整满足所有需求，要不然就会因为两三成的缺口形成致命的瓶颈。当然，还有远比这些复杂的进一步因素，我就不在这里展开。

标准化无法在定制化的面前获得优势，这是国内 B 端行业面临的直接困局，当然这里有坏的影响也有好的影响。

坏的影响，就是头部 SaaS 企业没办法得到快速的发展，推高整个 B 端软件业的收入水平和吸引力，AI 生成页面这些技术适用范围小，没办法真惠及全体，行业处于反复造轮子但根本没办法停下来。

好的影响，则是头部的 SaaS 企业发展不起来，市占率就低，它们就没办像 C 端市场一样形成非常显著的马太效应，形成事实的垄断。大家重复造轮子，那么提供的就业岗位才多，才能让我国的炒粉行业没有那么卷，竞争没有那么激烈（？？？）……

如果你关注过 B 端市场足够多年，你就会明白任何企图用一种标准、方法论直接平铺整个行业的做法，注定是徒劳的，而无序、野蛮、熵增才是不变的主旋律。

但 AI 的作用短时间内完全发挥不了吗？也不是。除了前面提到的一些简单的项目之外，还有一个非常大的可能，就是中小模型的开发会变得越来越容易，而基于项目自研的界面 AI 生成工具很有可能会普及起来。虽然它们不能随心所欲生成任何需求的样式，但可以完全根据业务方的实际需要进行定制，去服务小范围的群体。

这不代表项目里面就不需要设计师，符合这套项目的标准依旧需要设计师去制定，也需要设计师持续输出特殊的页面和组件。

所以，未来很长一段时间内 AI 和 B 端 UI 设计师之间会是互补的关系，而不是替代关系。这也会对岗位要求形成进一步的影响，所以下面是我对 B 端 UI 设计师所需技能的建议：

进一步提升交互能力，尤其是基于业务认知输出交互方案的抽象思维能力
进一步巩固项目设计规范的创建能力，深入了解规范的应用和落地流程
进一步提升全局性设计思维，能提炼核心价值观并在项目中进行应用
进一步了解编程开发逻辑，能更好的配合前后端完成项目的输出提高效率

这些能力的掌握是 B 端 UI 设计师应对未来市场变化的核心竞争力，也是 AI 在短时间内绝对无法替代的东西。

不管是作为已经入行的，还是准备入行的 B 端设计新人，都不用对 AI 技术在 B 端的影响太过担心，自怨自艾，因为

如果 B 端项目的设计都那么简单的话，那么从前端框架普及的那一天起，B 端 UI 设计师就可以集体下岗，而不用等到 AI 应用的那天

。

换个表述方式，祝大家不会菜到那么轻易就被 AI 给取代了……

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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(325)

172024-10

打动用户的关键：用户体验地图实战攻略

ui设计分享达人

一、什么是用户体验地图？

二、为什么使用用户体验地图？

三、什么情况使用用户体验地图？

四、用户体验地图的组成？

五、用户体验地图的制作流程

六、用户体验地图案例展示

七、用户体验地图总结

一、什么是用户体验地图？

用户体验地图（User Experience Map）是一种用于可视化展示用户在与产品或服务互动过程中所经历的各个接触点和体验的工具。它帮助团队深入了解用户的行为、情感和痛点，从而优化用户体验。

用户体验地图（User Experience Map）是产品设计前期——用户研究中很重要的一部分，视角化和图表的方式，从用户的角度来表现其和产品/组织/服务交互的过程，是连续的视觉时间和完整故事的多个互动点。

简单来说，在用户定义角色，搭配行为研究、表格调查和竞品分析等数据下，构思出这个角色在某个角色故事下要完成特定目标，以反应用户使用某个特定产品的真实特性，有助于我们评估现状、找出用户真正的痛点，与优化整体的体验流程（创造和谐的互动）。

二、为什么使用用户体验地图？

使用用户体验地图（User Experience Map）在项目中有很多重要的原因，能够给团队带来显著的价值，例如：

1、全面理解用户旅程

可视化用户体验：用户体验地图通过图形化的方式展示用户在使用产品或服务过程中的所有步骤和接触点，使团队能够直观地看到用户的整个旅程。

识别关键时刻：帮助团队识别用户旅程中的关键触点和情感波动，理解用户在不同阶段的需求和行为。

2、发现用户痛点和改进机会

识别痛点：用户体验地图能够揭示用户在使用过程中的痛点和挑战，使团队可以针对这些问题制定解决方案。

挖掘改进机会：通过分析用户行为和情感波动，团队可以找到提升用户体验的机会，从而优化产品或服务。

3. 增强团队协作和沟通

统一理解：用户体验地图作为一种直观的沟通工具，使跨职能团队（如产品经理、设计师、开发人员和市场团队）能够共享对用户体验的统一理解。

促进协作：通过共同创建和讨论用户体验地图，团队成员可以更好地协作，提出建设性的意见和建议。

4. 驱动以用户为中心的设计

以用户为中心：用户体验地图强调从用户的角度出发，关注用户的需求、情感和行为，推动以用户为中心的设计和开发。

提升用户满意度：通过优化用户旅程中的各个触点和体验，团队可以提升用户满意度和忠诚度。

5. 支持决策制定

数据驱动决策：用户体验地图基于用户研究和数据分析，为决策提供可靠的依据，减少主观判断和猜测。

优先级管理：通过识别用户体验中的关键问题和机会，团队可以更好地确定优先级，集中资源解决最重要的问题。

6. 提高用户体验设计的效率和效果

明确目标和方向：用户体验地图帮助团队明确设计目标和方向，减少反复修改和沟通成本，提高设计效率。

验证设计假设：通过用户体验地图，团队可以验证设计假设和概念，确保设计方案符合用户需求和期望。

三、什么情况使用用户体验地图？

用户体验地图（User Experience Map）在多种情况下都可以使用，能够帮助团队更好地理解和优化用户体验。例如：

1.产品或服务的初期开发阶段

定义产品概念：在开发新产品或服务时，用户体验地图帮助团队理解用户需求和期望，确保产品设计符合用户需求。

设计用户旅程：通过用户体验地图，团队可以详细规划用户与产品互动的每个步骤和触点，确保用户旅程流畅且无障碍。

示例：

一家创业公司在开发一款新的移动应用时，通过用户体验地图了解目标用户的需求和使用习惯，从而设计出更符合用户期望的产品。

2.现有产品或服务的优化

识别和解决问题：当现有产品或服务存在用户体验问题时，用户体验地图帮助团队识别痛点并制定改进措施。

提升用户满意度：通过分析用户在不同接触点的情感和行为，团队可以找到提升用户满意度和忠诚度的机会。

示例：

一家电商平台通过用户体验地图发现用户在结账环节遇到的困难，优化了结账流程，显著提高了用户满意度和转化率。

3.跨职能团队的协作和沟通

建立共同理解：在涉及多个部门的项目中，用户体验地图帮助不同团队（如产品、设计、开发、市场）建立对用户体验的共同理解。

促进协作：通过可视化的用户旅程，团队成员可以更有效地讨论和协作，提出有建设性的改进建议。

示例：

一家大型企业在推出一项新服务时，通过用户体验地图让产品经理、设计师和市场团队共同参与，确保各团队对用户体验的理解一致，从而提高协作效率。

4.用户研究和测试阶段

记录用户反馈：在用户研究和测试阶段，用户体验地图帮助记录和分析用户反馈，发现用户在使用产品过程中的实际体验。

验证设计假设：通过用户体验地图，团队可以验证设计假设，确保设计方案符合用户需求和期望。

示例：

一家金融科技公司在测试新功能时，通过用户体验地图记录用户的使用体验和反馈，优化了功能设计。

5.制定产品战略和路线图

战略规划：用户体验地图帮助团队从用户角度出发，制定产品战略和发展路线图，确保产品的发展方向符合用户需求。

优先级管理：通过识别用户体验中的关键问题和机会，团队可以更好地确定改进措施的优先级。

示例：

一家健康科技公司在制定未来两年的产品发展计划时，通过用户体验地图分析用户需求和市场趋势，确定了重点开发的功能和服务。

6.营销和客户支持

提升客户支持效率：用户体验地图帮助识别用户在寻求支持时的痛点，优化客户支持流程，提高用户满意度。

优化营销策略：通过了解用户在不同阶段的情感和行为，团队可以制定更有针对性的营销策略，提升用户转化率。

示例：

一家SaaS公司通过用户体验地图发现用户在使用过程中遇到的常见问题，优化了客户支持流程，并根据用户行为调整了营销策略，提高了客户留存率。

四、用户体验地图的组成？

组成用户体验地图（User Experience Map）可以分为八个部分，分别是：用户角色（Persona）、场景（Scenario）、阶段（Stages）、触点（Touchpoints）、用户行为（Actions）、用户情感（Emotions）、痛点（Pain Points）、机会（Opportunities）；组成部分整合到一张用户体验地图上，团队可以直观地看到用户旅程中的所有关键要素。帮助团队全面理解用户在整个体验过程中的行为、情感和痛点，从而制定更有效的优化策略，提升用户满意度。下面我们详细说明这八个部分：

1. 用户角色（Persona）

定义：用户角色是目标用户的详细描述，包括人口统计信息、行为模式、需求和痛点。

目的：帮助团队聚焦特定用户群体的需求和体验，使设计和决策更有针对性。

示例：

年龄：25-35岁

职业：城市白领

兴趣爱好：网上购物

需求和痛点：需要便捷快速的购物体验，不喜欢复杂的结账流程

2. 场景（Scenario）

定义：场景是用户在某一特定情境下与产品或服务互动的全过程描述。

目的：帮助团队了解用户的具体使用情境和目标，确保设计满足实际使用需求。

示例：用户在下班回家的路上，通过移动应用购买晚餐所需的食材。

3. 阶段（Stages）

定义：用户旅程的不同阶段，从开始到结束，包括用户在每个阶段的主要活动和目标。

目的：展示用户旅程的整体结构，帮助团队识别每个阶段的关键活动和目标。

示例：

发现（Discovery）、考虑（Consideration）、决策（Decision）、使用（Usage）、回访（Return）

4. 触点（Touchpoints）

定义：用户在每个阶段与产品或服务的具体接触点，如网站、客服、实体店等。

目的：识别用户与品牌互动的关键时刻，确保每个接触点的体验都得到优化。

示例：网站首页、产品页面、购物车、结账页面、客服

5. 用户行为（Actions）

定义：用户在每个触点上的具体行为，如浏览网页、咨询客服、购买产品等。

目的：展示用户的具体操作过程，帮助团队理解用户的实际使用方式。

示例：浏览产品、加入购物车、填写订单信息、支付、联系客服

6. 用户情感（Emotions）

定义：用户在每个触点上的情感体验，包括积极和消极的情感波动。

目的：帮助团队理解用户的满意度和痛点，确保在关键时刻提供积极的体验。

示例：

兴奋（浏览产品时）、犹豫（选择支付方式时）、沮丧（遇到支付问题时）、满意（收到产品时）

7. 痛点（Pain Points）

定义：用户在整个体验过程中遇到的困难和挑战。

目的：识别和解决用户体验中的问题，提升用户满意度。

示例：

结账页面加载慢、支付方式选择不便、客服响应慢

8. 机会（Opportunities）

定义：基于用户行为、情感和痛点，识别出改善用户体验的潜在机会。

目的：为团队提供改进用户体验的方向和具体措施，推动持续优化。

示例：

优化结账页面性能、增加支付方式、提升客服响应速度

五、用户体验地图的制作流程

制作一份完整的用户体验地图（User Experience Map）需要多个步骤，使用的方法也有很多，不用担心，下面我们进行详细步骤拆解：

1.定义目标

目的：明确制作用户体验地图的目标和用途，比如改善特定功能的用户体验、优化整体用户旅程等。

示例：

一家电商平台希望通过用户体验地图识别用户在结账过程中的痛点，并制定改进措施。

2.收集用户数据

方法：

用户访谈：直接与用户对话，了解他们的需求、行为和情感。

问卷调查：通过问卷收集大规模用户数据。

用户观察：观察用户在实际使用产品或服务时的行为和反应。

可用性测试：测试用户在特定任务中的表现，发现使用障碍和痛点。

数据分析：分析网站或应用的使用数据，了解用户行为模式。

示例：

电商平台通过用户访谈和问卷调查收集用户在结账过程中的体验和反馈。

3.定义用户角色（Persona）

步骤：

基于收集的数据，定义主要的用户角色，描述其特征、需求和痛点。

示例：

用户角色A：25-35岁，城市白领，喜欢网上购物，重视便捷和快速的购物体验。

4.描绘用户旅程

步骤：

划分用户旅程的不同阶段，从开始到结束，包括用户在每个阶段的主要活动和目标。

示例：

发现阶段：用户在网上搜索和浏览商品。

考虑阶段：用户比较不同商品的特点和价格。

决策阶段：用户决定购买某件商品。

使用阶段：用户完成购买并等待商品送达。

回访阶段：用户收到商品后可能会再次访问网站。

5.识别触点和用户行为

步骤：列出用户在每个阶段的具体触点和行为，展示用户的操作过程。

示例：

触点：网站首页、产品页面、购物车、结账页面、客服。

用户行为：浏览产品、加入购物车、填写订单信息、支付、联系客服。

6.记录用户情感

步骤：描述用户在每个触点上的情感体验，包括积极和消极的情感波动。

示例：

用户在浏览产品时感到兴奋，但在结账时因页面加载慢而感到沮丧。

7.识别痛点和机会

步骤：基于用户行为和情感，识别用户在每个阶段的痛点，并找出改善用户体验的机会。

示例：

痛点：结账页面加载慢、支付方式选择不便、客服响应慢。

机会：优化结账页面性能、增加支付方式、提升客服响应速度。

8.创建可视化地图

步骤：将所有信息整合到一张可视化的用户体验地图上，使团队能够直观地了解用户的完整体验过程。

工具：

手绘草图：用纸和笔绘制用户体验地图。

数字工具：使用工具如Miro、Lucidchart、UXPressia等创建数字用户体验地图。

9.讨论和验证

步骤：

与团队成员共同讨论用户体验地图，验证其准确性和全面性。

基于讨论结果进行必要的修改和调整。

示例：

团队成员共同审查用户体验地图，确认所有触点和用户行为是否准确，讨论发现的痛点和改进机会。

10.制定改进措施

步骤：根据用户体验地图识别的痛点和机会，制定具体的改进措施和实施计划。

示例：

优化结账页面加载速度，增加多种支付方式，提升客服响应效率。

11.实施和跟踪改进

步骤：实施制定的改进措施，并持续跟踪用户反馈和数据，评估改进效果。

示例：

电商平台实施优化结账页面的改进措施，并通过用户反馈和数据分析评估效果，确保用户体验得到提升。

六、用户体验地图案例展示

通过上面的介绍，相信你已经对用户体验地图（User Experience Map）有了一定了解，是不是已经想自己动手开始制作了，下面我们看几个案例：

案例 1：电商平台优化

背景：一家电商平台希望通过用户体验地图识别用户在结账过程中的痛点，并制定改进措施，以提升用户满意度和转化率。

用户角色（Persona）

姓名：张女士

年龄：30岁

职业：城市白领

兴趣：喜欢网上购物

需求：需要便捷快速的购物体验

痛点：不喜欢复杂的结账流程

触点和用户行为

1. 发现（Discovery）：通过搜索引擎和社交媒体广告发现平台

2. 考虑（Consideration）：浏览产品详情，查看用户评论

3. 决策（Decision）：将商品加入购物车

4. 购买（Purchase）：填写订单信息并支付

5. 回访（Return）：查看订单状态，联系客户服务

用户情感

发现：兴奋和好奇

考虑：谨慎和比较

决策：确定和期待

购买：焦虑和满足

回访：满意和信任

痛点和机会

痛点：结账页面加载慢，支付方式选择不便，客服响应慢

机会：优化结账页面性能，增加支付方式，提升客服响应速度

案例 2：健身App优化

背景：一家健身App希望提高用户的使用频率和忠诚度。

用户角色（Persona）

姓名：李先生

年龄：25岁

职业：程序员

兴趣：健身

需求：需要个性化的健身计划

痛点：课程选择不够个性化，计划制定过程复杂

触点和用户行为

1. 发现（Discovery）：通过朋友推荐和广告发现App下载并安装App

2. 考虑（Consideration）：浏览课程详情，查看评价

3. 决策（Decision）：选择并购买课程

4. 使用（Usage）：开始使用课程进行锻炼

5. 回访（Return）：查看锻炼记录，调整计划

用户情感

发现：好奇和期待

考虑：审慎和比较

决策：确定和信心

使用：满足和成就

回访：满意和忠诚

痛点和机会

痛点：课程选择不够个性化，计划制定复杂

机会：增加个性化推荐功能，简化计划制定过程

案例 3：银行在线服务优化

背景：一家银行希望优化其在线服务平台，以提高用户的操作体验和满意度。

用户角色（Persona）

姓名：王女士

年龄：45岁

职业：教师

兴趣：理财

需求：需要简单易用的在线银行服务

痛点：在线服务平台操作复杂，转账流程繁琐

触点和用户行为

1. 发现（Discovery）：访问银行官网，注册账户

2. 考虑（Consideration）：浏览平台功能和用户评价

3. 决策（Decision）：决定使用在线服务

4. 使用（Usage）：进行账户管理和转账操作

5. 回访（Return）：查看交易记录，继续使用服务

用户情感

发现：好奇和怀疑

考虑：审慎和信任

决策：确定和信心

使用：满足和便捷

回访：满意和忠诚

痛点和机会

痛点：操作复杂，转账流程繁琐

机会：简化操作流程，优化用户界面设计

七、用户体验地图的总结

用户体验地图（User Experience Map）作为一种强大的工具，在理解和优化用户体验方面具有显著优势。然而，制作和维护用户体验地图也存在资源密集、复杂性和动态变化等挑战。团队在使用用户体验地图时，需要平衡其优劣势，合理分配资源，确保地图的准确性和实用性，从而真正提升用户体验和产品成功率。

优势

1. 全景视角

优点：用户体验地图提供了用户体验的全景视角，涵盖了用户与产品或服务互动的各个阶段。这种全景视角有助于团队全面了解用户旅程中的各个触点和行为。

案例：电商平台可以通过用户体验地图了解用户从浏览商品到完成购买的全过程，识别出所有关键的用户触点。

2. 用户共情

优点：通过记录用户在每个阶段的情感体验，团队可以更好地理解用户的需求和痛点，增强用户共情。

案例：健身App可以通过用户体验地图了解用户在制定和执行健身计划时的情感变化，从而设计出更具吸引力的个性化健身计划。

3. 识别痛点

优点：用户体验地图有助于识别用户在使用产品或服务过程中的痛点和障碍，帮助团队找到改进的机会。

案例：银行在线服务平台可以通过用户体验地图识别出用户在进行转账操作时遇到的困难，进而优化转账流程。

4. 跨团队协作

优点：用户体验地图作为一个可视化工具，可以促进跨团队协作，使不同部门（如产品、设计、开发和市场）能够共同参与讨论和改进用户体验。

案例：电商平台可以通过用户体验地图汇集市场、设计和技术团队的意见，共同制定优化措施。

5. 数据驱动决策

优点：用户体验地图基于用户研究和数据分析，使决策更加数据驱动，有助于制定科学合理的改进策略。

案例：健身App可以通过用户体验地图中的用户数据分析，调整课程推荐策略，提高用户满意度和使用频率。

劣势

1. 资源密集

缺点：制作用户体验地图需要大量的时间和资源，包括用户研究、数据分析和团队协作。

案例：中小型企业可能难以投入足够的资源来全面制作和维护用户体验地图。

2. 复杂性

缺点：用户体验地图可能变得非常复杂，特别是当用户旅程涉及多个触点和渠道时，可能难以全面和准确地记录所有细节。

案例：大型电商平台的用户旅程可能涉及网站、移动应用、社交媒体等多个渠道，制作一个全面的用户体验地图可能需要大量的精力。

3. 动态变化

缺点：用户行为和市场环境是动态变化的，用户体验地图需要不断更新和维护，以保持其有效性和准确性。

案例：健身App的用户需求和市场趋势可能随时变化，需要定期更新用户体验地图以保持相关性。

4. 主观偏差

缺点：尽管用户体验地图基于用户数据和研究，但在数据解读和情感记录上可能存在主观偏差，影响决策的准确性。

案例：银行在线服务平台在记录用户情感时，可能会受到研究者的主观影响，从而无法完全准确地反映用户真实感受。

5. 过于理想化

缺点：用户体验地图有时可能过于理想化，忽略了现实中存在的限制和障碍，导致制定的改进措施难以实施。

案例：电商平台在识别改进机会时，可能忽略了技术实现上的困难，导致优化方案无法落地。

参考文献：

https://medium.com/@michaeljiager/user-experience-maps-6184f4044e48

https://liviayang-ms.medium.com/%E4%B8%80%E5%88%86%E9%90%98%E8%AE%93%E4%BD%A0%E4%BA%86%E8%A7%A3%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97%E6%AD%B7%E7%A8%8B%E5%9C%96-user-experience-map-e28a1b8817c0https://uxmastery.com/how-to-create-a-customer-journey-map/https://medium.com/art-marketing/incorporating-customer-and-user-experience-data-into-holistic-journey-maps-502ae12072ac

https://uxplanet.org/empathy-map-user-persona-and-user-flow-5299ada245c8https://medium.com/@myskill.id/persona-user-journey-map-ebd84c15ae2f

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

评论(0) 浏览(545)

172024-10

清晰展现关键信息，助力高效决策——数据图表

ui设计分享达人

合理使用数据图表可以帮助用户更好地理解复杂的数据，提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。

数据图表是一种非常重要的可视化工具，它能够

帮助用户更直观地理解和分析数据。

借助于图形化的手段，清晰、快捷有效的传达与沟通信息。从用户的角度，数据可视化可以让用户快速抓住要点信息，让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点：准确性、创新性、简洁性。

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

评论(0) 浏览(328)

172024-10

Web端设计语言库——数据可视化

ui设计分享达人

一、可视化原则

数据可视化是把相对复杂、抽象的数据通过可视化手段，表达数据内在的信息和规律，促进数据信息的传播和应用。

Dreawer Design 团队总结了以下四个可视化原则，供设计者参考及使用：

1. 准确

数据图表需精准、如实地反应数据信息的变化特征。

2. 清晰

让设计服务于数据内容，给用户以最为清晰、明确、迅捷的数据展示。用户看到可视化图表时，应能在 5 秒内了解到它的用途，而不是花几分钟都不能理解各个数据的含义。

3. 简单

可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。

下面为图标类型与认知成本对比：

4. 美观

优秀的数据可视化界面，会有一套非常严谨一致的版面。这里的一致性需要考虑到布局、结构和内容。

二、图表解构

1. 构成元素

我们从标题、坐标轴、图例、标签、提示信息、数据图形这 6 个大类，对数据图表进行进一步元素拆解及阐述。设计过程中，需遵循可视化原则来精简数据图表，让用户快速获取图表中的关键信息，完成任务。

图表构成 6 大类，元素细分：

1. 标题：图表标题；

2. 坐标轴：X/Y轴线、刻度线、网格线、X/Y轴标题、X/Y轴标签；

3. 标签：数据点、引导线、（文本）数据值；

4. 提示信息；

5. 图例；

6. 数据图形：线、矩形、扇形、环形等。

下面为数据图表的基本构成元素示例（为了便于观察，某些字母做了大写处理）：

除了以上的常规元素，还有常用于饼图、环形图中的“引导线”：

2. 标题

标题是概括图表主题的说明文字，一个明确、精简的标题可以迅速让读者理解图表要表达的内容。

2.1 位置

一般位于数据图表卡片的左上方。

2.2 使用建议

标题需言简意赅、符合图表主题；尽量控制在 20 个字以内，标题宽度尽量不要超过卡片宽度。

2.3超长处理

当标题超过长出卡片宽度时，省略标题中间的文字，保住首尾，如“我是...标题”。

3. 坐标轴

3.1 坐标系

坐标轴包含在坐标系的概念里，因此，我们需要先了解坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。

数据可视化中，最常用的二维坐标系有两种：

笛卡尔坐标系：即直角坐标系，是由相互垂直的两条轴线构成。常用于柱状图、条形图、折线图、面积图等。

极坐标系：由极点、极轴组成，坐标系内任何一个点都可以用极径 r 和夹角 θ（逆时针为正）表示。常用于饼图、圆环图、雷达图等。

补充说明：

1. 坐标轴由定义域轴（X 轴）和值域轴（Y 轴）组成。条形图中，定义域轴为 Y 轴，值域轴为 X 轴。

2. X轴为水平方向的横轴，Y 轴为垂直方向的竖轴。以下主要针对笛卡尔坐标系的坐标轴构成进行分析：

3.2 坐标轴

定义：坐标轴指二维空间中统计图表中的轴，是坐标系的构成部分，它用来定义坐标系中数据在方向和值之间的映射关系。

构成元素细分：X/Y 轴线、刻度线、网格线、X/Y 轴标题、X/Y 轴标签。

3.3 轴类型

根据对应变量是连续数据还是离散数据，可以把坐标轴分为：分类轴、时间轴、连续轴三大类。

3.4 X/Y 轴线

颜色层级：X/Y轴线要比网格线层级高、颜色深，这样能让图表有主次区分。

使用建议：有网格线时，柱状图/折线图会隐藏 Y 轴线，条形图则是隐藏 X 轴线，以达到信息降噪、突出重点的目的。

3.5 刻度线

轴刻度线是轴线上的小线段，用于指示数值标签在坐标轴上的具体位置。轴刻度线有 3 种放置方式：置内、置中（即交叉方式）、置外。

位置建议：刻度线置中/置内时，可能会和网格线、数据图形重叠，所以建议将刻度线置于数值坐标轴外侧，以呈现最佳显示效果。

显示建议：

折线图：刻度线、X/Y 轴标签、数据点需要保持在同一垂直线上；

柱状图/条形图：由于单个柱子有很强的对应关系，此时可以隐藏刻度线；

3.6 网格线

定义：网格线是用来辅助图表优化映射关系的，我们需要弱化网格线的视觉效果，来增加数据的可阅读性。

作用：1. 延伸数值刻度至可视化对象中，以便观察数据值的大小；2. 增加可视化对象之间的对比观察度。

使用建议 1 ：使用网格线时，需遵从主次原则，以轴线为主、网格线为辅；样式上可采用实线或虚线；避免颜色过重、使用纯黑/纯白色。

使用建议 2 ：网格线一般跟随值域轴的位置单向显示，柱状图、折线图等采用水平网格，条形图采用垂直网格。

3.7 X/Y 轴标题

轴标题主要用于说明坐标轴数据组的含义，也可理解为“轴单位”。当可视化图表标题、图例、轴标签等已能充分表达数据含义时，可隐藏轴标题。

这样处理体现了奥卡姆剃刀定律：如无必要，勿增实体。

3.8 X/Y 轴标签

轴标签是对当前某一组数据的内容标注，用于提高数据的可读性。

以下从 X 轴标签、Y轴标签两方面进行分析：

a. X 轴标签

X 轴标签的设计重点在显示规则上。卡片宽度过窄、标签过多、名称过长时，X 轴标签便会出现显示问题（如标签重叠等）。

为了解决显示问题，我们从连续/时间轴标签（数值类）、分类轴标签（文本类）两方面进行分析：

连续/时间轴标签

显示规则：建议等分抽样显示、旋转；不尾部省略。

建议等分抽样：连续/时间轴，通常由一组等差数列组成，具有规律性，缺失的数据用户会在脑海中自动补全。所以建议用等分抽样来避免标签的重叠问题。

注意：等分抽样尽量保留首尾数据标签；随机抽样没有规律，会影响用户的判断及辨认，不建议采取随机抽样显示。

连续/时间轴标签是由“关键数值”组成的标注点，一般都明确精简，尾部省略会影响用户对关键数值的辨认。

为了保证标签的辨识度，我们可以将标签旋转 45°、 90° 。极端情况下（图表宽度极窄），可以同时进行旋转+抽样。

分类轴标签

显示规则：建议旋转显示；不建议抽样显示。

分类轴由几个离散数据标签组成，标签之间独立存在，无紧密逻辑关系，用户无法自动补全缺失信息。因此，不能采取抽样显示，应尽量展示全部标签的全部文本。

若标签横向展示空间不够（文字重叠），我们可以将标签旋转 45°、 90° 来达到预期显示效果。若通过旋转无法满足需求，可使用条形图，将分类轴放在Y轴。

旋转方向说明：通常情况下，用户的阅读视线为从左至右、从上到下。因此，标签顺时针旋转 45° 更符合用户的浏览习惯。

b. Y 轴标签

Y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度进行自适应缩放。

轴标签的数量

使用建议：根据米勒定律（7±2 法则），Y 轴标签数量应控制在 5-9 个的范围内；Web页面中，Y 轴常用标签数为：6 或 7（含标签0）。

轴标签的数量越多，横向网格线就会越多。过多的轴标签及网格线会造成元素冗余，违背了清晰、准确的可视化原则，也不利于图表信息的表达及阅读。

对齐方式：右对齐

轴标签的取值范围

基准线： Y 轴标签取值应从 0 基线开始，以反映数据的真实性。如果展示被截断的 Y 轴数据，会导致用户做出错误的判断。

轴标签的数据格式

使用建议 1：标签保留的小数位数保持统一。

4. 数据标签

数据标签是对数据点对应数值的标注，用于直接观察每个数据点的具体数值。

若图表主要是用来看趋势变化、占比大小等，则不需要显示数据标签。若想精确了解每组数据的具体数值，则可以显示数据标签。

4.1 位置

数据标签位于数据点的上方。

4.2 显示规则

在不同类型的图表中，数据标签的显示规则不同。我们可以根据数据图形、数据值的特性，选择合适的显示方式，提高图表的准确性。

a. 柱状图

基础柱状图

：数据标签可显示在数据图形内部、外部。

数据标签在图形内部的显示规则：正常情况下，横向显示；数据标签超长时，旋转 90°；图形高度 < 数据标签高度时，不显示数据标签。

分组柱状图

：数据标签可显示在数据图形内部、外部。显示在内部的数据标签显示宽度不够时，解决方案同上。

堆叠柱状图

：数据标签显示在数据图形内部。

数据标签在图形内部的显示规则：正常情况下，横向显示；数据标签超长时，旋转 90°；图形高度 < 数据标签高度时，不显示数据标签。

b. 条形图

数据标签在图形内部的显示规则：正常情况下，横向显示；图形宽度 < 数据标签高度时，不显示数据标签；条形图高度需 >= 数据标签高度。

基础、分组条形图的数据标签也可以显示在图形外部：

c. 折线图

数据标签显示在数据点的上方。

图表宽度过窄，数据点多且密时，相邻的数据标签会出现重叠的问题。此时，我们会采用抽样的方式显示数据标签。鼠标悬停数据点，显示隐藏的数据标签。

d. 饼图、环形图

数据标签显示在图形内部、外部均可。

由于扇形有角度，且形状相对不规则，对数据标签的文本长度包容度较低，环形更是如此。所以，当扇/环形分割过多、面积较小时，建议将数据标签显示在图形外部。

当然，我们也可以内外部结合使用：

e. 数据标签颜色

数据标签显示在图形内部时，图形为背景，数据标签为前景。此时，数据图形作为背景色，会影响到数据标签的显色度及易读性。

为了确保良好的可读性，我们通过对图形颜色 HS 值的判断，来决定文字的颜色。这样对比度就在可控范围内，不会出现可读性低的问题。

由于篇幅问题，剩余内容接下一篇文章展示

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

评论(0) 浏览(296)

172024-10

从对话到嵌入：多元场景AI形态浅析

ui设计分享达人

前言

当我们一次次被AI技术带来的变革所惊艳，当ChatGPT一次次宣布其能力已经突破了人类的想象，你是否注意到现有产品与AI融合的新趋势？值得注意的是，新技术的出现也一定带来了新的交互体验。本文将以多种产品场景为例，梳理PC端多种主流的AI融合形态，希望能给大家带来启发。

多元场景下的主流AI形态

目前主流AI产品有如下3种主要形态，分别为沉浸式的AI智能体(Agent)、伴随式的AI副驾驶(Co-pilot)、嵌入式的AI场景化嵌入(Embedding)。这3种形态在能力、界面、操作体验和适用场景都上存在显著差异。

一、沉浸式形态

AI智能体(Agent)—功能强大的AI伙伴

一个富有主动性的独立伙伴，输出的结果不完全依赖用户的输入，启动AI问询后有2种主流的形态：

①「对话智能体」以对话流的形式展示信息，用户通过在当前语境下进行追问获取最终结果；

②「目标智能体」用户输入指令后，一次性给予用户“靠谱”的结果，配有侧边栏可进行多种辅助操作。

1.对话智能体示例—Gemini

以谷歌Gemini产品为例，其作为对话流的智能体，为满足搜索场景，具有以下特征：

1）冷启页Prompt形象化

相较于2023年初Gemini冷启时的样式，最近改版中冷启的Prompt卡片变得形象化，当然我们也在其他Agent产品中观察到了这一变化。

2）多模态内容

理解用户的文字意图，依据要求自主生成多模态卡片是对话智能体的主要特征之一，该功能可以极大地丰富AI反馈的多样性，并能提高信息传达的效率。

3）信息索引的显示

信息索引的展示是提升AI回答权威性和透明度的关键因素。然而，直接在阅读内容中嵌入索引标签，可能在某些情况下影响用户的阅读连贯性。以Gemini为例，当前的设计允许用户在卡片下方手动启用索引信息，这种灵活性平衡了信息的可信度和阅读体验，适合多数日常场景。

当然，从设计角度考虑，某些情况下默认收起索引并非最佳选择。在用户高度依赖信息准确性的场景中，如金融或医学领域，索引的可见性将会直接影响信任感。对于深入研究或延展阅读需求较高的用户，即时查看索引能更高效地获取信息来源。

与之类似，在涉及多方信息传播的业务分发场景，清晰可见的索引有助于减少误解，提高效率。在这些情况下，索引的默认展开不仅强化了内容的可靠性，也更好地支持了用户的深入需求。

2.目标智能体示例—Perplexity

Perplexity作为最近广受好评的AI搜索工具，相较于Gemini，它更注重给予用户最精准的答案。基于RAG技术的Perplexity为用户提供了一种新的“确定性”，而鉴于这种特征，Perplexity拥有双面板的形态，可以对当前确定性的信息进行深化处理。

1 ）输入即结果

相较于Gemini等对话智能体产品，AI Agent用户需要反复追问结果，而在体验Perplexity时的无对话场景感，更倾向于一次性给予用户“靠谱”的答案。

2）侧分栏—信息补充

因为Perplexity一次就可以给予用户最“准确”的信息，用户可能没有追问的必要，但可能会有对于当前问答进行深度搜索的需求，这时会有右侧GUI分栏的出现，以便用户进行辅助搜索。

3.思考：给予用户最佳答案的AI形态

在使用体验上，Gemini与Perplexity虽然走向两个不同的流派，但目的都是为了给用户呈现最佳的搜索结果。Gemini就像一位富有想象力的对话者，用户在对话中通过不断地追问来获得最佳的结果，而Perplexity更像一个AI版的知乎，它坚持“用户不会犯错”原则，冷静客观地为用户提供最精准的答案。

二、伴随式形态

AI副驾驶(Copilot)—被动性的AI助手

这种形态下的AI更多扮演“副驾驶”的角色，为用户提供建议和帮助，依赖用户精准的指令对当前内容窗口进行操作，一般以侧边栏形式展示，目前的Office文档类产品多采用此类形态。

1.AI副驾驶产品示例-Office

在近年的开发者大会中，微软提到最多的词就是“Copilot”，力推将AI技术快速融入到旗下应用中。其中，Office软件就融入了AI副驾驶的理念，该形态下的AI主要为用户提供产品的创作辅助、信息的查询总结等功能。

1）当前场景下的AI助手

AI的能力默认被限定在当前场景下，满足用户问询、信息检索、创作辅助等操作。

2）被动性AI助手

Copilot无法自动执行操作去修改当前页面内容，需要用户确认后才可执行，用户执行操作后会在侧边栏内显示操作记录与撤销操作的入口。

3）辅助Prompt

由于AI副驾驶的特性，常常需要准确的Prompt才能执行符合预期的操作，这对大部分用户来说门槛较高，因此在使用时需要及时给予用户合理的联想Prompt，辅助用户决策。

2.思考：提高用户工作效率的AI助手

作为被动性AI助手，用户即使不使用也不会影响其在整体页面中的操作，AI更多承担的是提升用户工作效率过程中的辅助角色。

三、嵌入式形态

AI场景化嵌入(Embedding)

嵌入式AI主要聚焦特定场景的AI辅助，如AI即时性地生成对当前评论的回复，此类交互无固定形态，AI会在用户进行高频重要操作时即时触发。

在多元化场景中，嵌入式AI的设计相较于前两类更加灵活和轻量，通常以LGUI(轻量化用户界面)为核心，强调用户与AI之间的无缝衔接与高效互动。

与对话式或结构化阿拉丁模式相比，嵌入式AI的设计思路更加通畅，摒弃了复杂的交互流程，更注重场景中的引导性和即时反馈，帮助用户在合适的时机获取所需信息。

1.嵌入式AI示例—One Drive

以微软One Drive为例，嵌入式AI不仅会在用户整理文件时提供智能建议，还能在用户分享文件时根据历史记录和内容精准推荐分享对象。这种场景化的嵌入，展现了如何通过LGUI设计最大化提高效率，而非依赖传统对话或复杂交互。

场景一: 文件整理AI建议

在AI为相关文件创建新文件夹的情境中，执行完成后，它会主动询问用户是否需要将其他可能相关的文件一并移入到新建的文件夹中，以帮助用户进一步整理文件。AI能够基于文件内容的上下文，敏锐地判断出哪些文件可能属于同一类别，进而为用户提供便捷的一键整理服务。

场景二: 智能分享建议

当用户准备在One Drive中分享文件时，AI助手会根据文件内容和用户的历史分享记录，预测出最可能需要分享的对象名单，为用户精准推荐受众人员。智能分享建议可以极大地节省用户挑选分享对象的时间。

基于上述2个例子，我们可以对嵌入式AI有进一步的思考：

合理的嵌入式AI操作只在用户进行重要操作时被“激活”，能够在当前场景下即时给予用户建议；

嵌入式AI一般情况下点击大于录入，方便用户快速做出决定；

设计此类交互时，需要深度理解用户使用场景，AI的唤起不应干扰用户对于主流程的操作体验。

2.思考：效率导向的AI嵌入设计

对于普通设计师来说，容易在纯对话交互和结构化设计两端摇摆，可能忽视了效率也是设计的重要原则。嵌入式AI的设计启示在于“什么合适用什么”，既不过度依赖复杂的对话式设计，也不拘泥于结构化方案。关键在于聚焦场景需求，以最简便和有效的方式帮助用户完成任务。因此，在嵌入式AI的设计中，保持界面的简洁与流畅，同时结合轻量化的LGUI原则，才是提升用户体验的关键。最终目标始终是“效率”，无论采用何种形式，选择最适合当前场景的交互模式才是设计的核心。

未来的AI设计

多样化形态下的平衡与共生

随着AI技术的迅速发展，各种AI形态在不同场景中不断涌现，如上述讨论的沉浸式、伴随式、嵌入式等设计形态。无论是主动性强的智能体、辅助型的副驾驶，还是轻量化的嵌入式方案，每一种设计都展现出其独特的价值。

然而，在这些多样化的形态背后，我们仍需回归一个核心问题：什么样的AI设计才是理想的？

首先，没有一种AI形态能够完美适用所有场景，真正成功的AI设计应始终围绕需求展开。在效率为先的原则下，设计师需要深刻理解用户在不同情境下的核心需求，并选择最适合的交互形态。复杂的对话式和高度结构化的设计并非万能，嵌入式AI的灵活性和轻量化设计则为平衡提供了启发—服务于效率与体验，简化不必要的交互，专注于解决用户的实际问题。

其次，AI设计的多样性并不意味着割裂，而是指向共生与融合。未来，AI技术将进一步打破不同形态之间的界限，形成更加灵活、动态的交互模式。这种融合不仅依赖更智能的技术，还要求设计师在实际应用中敏锐捕捉用户需求，提供真正有价值的解决方案。

最后，设计的核心原则是以用户为中心，强调合适性，而非追求炫技。无论是大型智能体的复杂场景处理，还是嵌入式AI的场景化介入，优秀的设计应始终聚焦用户需求，在不同场景中找到最优平衡点。随着技术的进化，设计师需要更加专注于如何将AI技术自然、无缝地融入用户的工作与生活，使每一次交互都变得更加高效和愉快。

在未来，AI的形态将会更加多元，但不变的仍是设计师对效率、用户价值和场景适配的持续探索。希望设计师在面对AI设计时，始终寻求既符合用户需求又能提升效率的最佳方案。

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

评论(0) 浏览(457)

172024-10

用户体验一致性思考

ui设计分享达人

前言

在团队内部，我们已确立了一套设计规范，在日常项目中使用设计规范输出变的高效、统一。然而，在实际操作中，不可避免地会遇到一些特殊情况：某些客户提出的个性化需求并不完全契合既定的设计规范,这些促使我们不得不在保持设计一致性的基础上进行灵活调整。因此，深入反思并优化一致性原则的应用策略显得尤为重要。我们需要探索如何在坚守设计规范核心精神的同时，灵活应对多变的需求，确保设计既保持统一和谐，又能满足特定场景下的独特需求，从而实现用户体验与品牌价值的双重提升。

在UI/UX设计中，雅各布·尼尔森的十条可用性原则中，一致性（Consistency and standards）位列第四。这一原则强调在界面和交互设计上需要遵循既定的规则，无论是在应用内部还是跨平台之间。

背后的心理学原理——重复定律，强调了信息重复对于巩固记忆的重要性。正如赫尔曼·艾宾浩斯通过“遗忘曲线”所揭示的，信息的有效保留离不开重复接触。一致性的应用正是这一原理的生动实践，通过不断重复统一的设计元素与模式，强化用户对产品的认知与记忆，从而提升整体的用户满意度与忠诚度。

艾宾浩斯遗忘曲线

用户侧

1、用户学习曲线：

一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时，他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑，提高了他们的效率和满意度。

2、提升可用性：

一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时，他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务，减少错误和迷失，提供更好的导航和流畅的体验。

3、品牌认可度：

一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格，品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信任和忠诚度。

4、用户满意度：

一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时，他们会感到更加舒适和自信。一致性传递了专业和质量的信号，让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度，并促使他们持续使用和推荐你的产品或服务。

产研侧

1. 降低设计成本，提高开发效率

无论是设计还是开发，复用已有的组件资源，保持界面的一致性可以有效地减少设计的投入，避免不必要的设计分歧点。

而在开发阶段，可以避免重复造轮子，提高开发的效率，保证落地效果，也可以减少上线前设计走查、测试的工作量。

2. 形成一致的设计风格

根据原子设计理论，通过原子组件的一致性，可以构建出统一的界面框架、布局，形成统一风格和用户交互认知，从而更好地保证用户体验质量。

色彩

色彩作为一种兼具物理属性与感官享受的复杂现象，其本质在于光波在人体视网膜上的特定波长被反射或吸收后，所引发的视觉感知结果。在设计领域，色彩的选择与运用不仅是视觉艺术的展现，更是品牌身份与个性的直接体现。诸如饿了么标志性的蓝色、美团鲜明的黄色、以及京东热情的红色等，这些品牌专属色彩不仅构成了品牌识别系统的重要组成部分，还通过其高度的一致性，在视觉层面上构建起强烈的品牌认知，营造出统一和谐的视觉体验。

色彩的一致性策略在品牌塑造中发挥着不可估量的作用，它能够有效增强品牌的记忆度与辨识度，深化品牌形象在消费者心中的烙印，进而提升产品的市场吸引力和用户忠诚度。同时，这种策略还促进了设计元素间的和谐共存，包括按钮、图标、字体、标签、背景、以及关键视觉元素如Banner等，均能在统一的色彩体系下实现视觉上的连贯与流畅，极大地提升了产品的可用性、无障碍性，以及用户在使用过程中的整体满意度与交互体验。

字体

字体作为设计中不可或缺的核心要素，其独特性在于能够精准地塑造文字的视觉形象，涵盖形状、尺寸、粗细、字间距等多维度特征。这些特征共同构建了一种独特的文字风格，不仅承载着信息的传递功能，更在无形中引导着用户的视觉流程，影响着信息的接收与理解深度。因此，在设计过程中，合理选择与应用字体显得尤为关键。

字体类型的多样性，如有衬线字体与无衬线字体的对比，不仅体现了风格上的差异，还隐含了不同的阅读体验与情感表达。字体的粗细变化（如细体、常规、粗体等）更是能够强调文本的重要性层级，增强信息的层次感与可读性。此外，字重的调整也是塑造视觉焦点、引导视线流动的有效手段，对于提升设计的整体美观度和信息传达效率具有不可小觑的作用。

然而，在实际的开发与实现过程中，若不加节制地使用多种字体，不仅会显著增加页面的加载时间，影响用户体验的流畅性，还可能因风格不统一而导致页面显得杂乱无章，破坏整体设计的和谐感。因此，制定一套统一、规范的字体使用策略显得尤为重要。这不仅有助于提升开发效率，减少后期更新迭代的复杂度，还能有效避免资源浪费，确保设计作品在视觉上的一致性与专业性。

图标

图标作为用户界面设计中至关重要的元素，风格直接影响到用户的使用体验与对产品的整体印象。图标以其简洁、直观且富有表现力的特点，在快速传达信息、引导用户操作方面发挥着不可替代的作用。在设计中，图标的设计与应用更是需要精心考量，以确保其既能够准确传达信息，又能够与整体设计风格保持一致，从而营造出专业、和谐且易于使用的界面环境。

设计中视觉上保持统一包括图标的大小、形状、色彩以及设计风格等多个方面，能够增强用户的认知连贯性，降低学习成本，提升使用效率。相反，如果图标风格混杂，不仅会让界面显得杂乱无章，还会给用户带来困惑和不安，进而影响其对产品专业性和安全性的信任。

按钮

按钮设计应统一于项目风格，无论是圆形、矩形、圆角矩形还是特定形状，保持一致性是关键。统一的按钮样式不仅彰显专业性，还能增强用户信任，确保体验连贯。过多变化的按钮样式会扰乱用户界面，降低操作直观性，甚至让用户误以为自己已离开应用环境。因此，精心设计的统一按钮样式对提升用户体验至关重要。

排版

设计中的排版一致性对于构建高效、用户友好的界面至关重要。一致的排版不仅能够让用户快速适应和理解界面的整体结构，大幅降低学习成本，还能在用户心中激发强烈的归属感和安全感。这种熟悉感使得内容更加易读，用户能够自然地依照既定的视觉动线流畅地浏览页面，迅速定位并获取所需信息，从而显著提升信息获取的效率。因此，在设计过程中，注重并维护排版的一致性，是提升用户体验和界面有效性的重要策略之一。

操作流程的一致性

标准化流程

：确保用户在执行相似任务时，如购买商品、搜索信息或提交表单等，能够遵循相同的操作流程。这有助于用户快速适应并高效完成任务。

逻辑清晰

：操作流程的每一步都应符合用户的认知习惯和行为逻辑，避免让用户感到困惑或不知所措。

交互元素的一致性

按钮和控件

：确保按钮、输入框、下拉菜单等交互元素的样式、位置和操作方式在整个应用或网站中保持一致。例如，所有按钮都应具有相同的视觉风格和触发机制。

导航和菜单

：导航栏和菜单的设计也应保持一致，使用户能够轻松地在不同页面或功能之间切换。

反馈机制的一致性

操作反馈

：当用户执行某个操作时，应用或网站应提供一致且及时的反馈，如加载动画、成功提示或错误消息等。这有助于用户了解操作结果并采取相应的行动。

状态提示

：对于长时间运行的操作或需要用户等待的场景，应提供明确的状态提示（如进度条），以减轻用户的不确定感和焦虑感。

在任何维度上，一致性不应成为设计的唯一导向。设计，这一融合了艺术与科学的复杂领域，要求我们在用户体验的细腻雕琢、功能需求的精准满足、美学价值的深刻体现及技术可行性的严格考量间游走。

“一致性”作为设计策略，其核心使命在于优化用户路径，降低认知门槛，确保用户在多元界面中穿梭时仍能感受到连贯与和谐。当我们在与设计团队（包括工程师、产品经理等）沟通时，仅仅提及“一致性”可能并不足以说明其必要性和价值。我们需要更深入地阐述为什么需要保持一致性，以及它如何具体帮助减少用户困惑、提高用户满意度和忠诚度。

同时，我们应清醒认识到，“一致性”并不是万能的。在某些情况下，为了追求极致的用户体验或解决特定的设计问题，可能需要打破传统的一致性规则。因此，设计师需要在保持一致性和创新之间找到平衡点，根据具体情况灵活调整设计方案。

实际落地执行时，要根据产品定位、用户场景，结合业务功能来确定设计方案，不能为了一致而一致。

当我们遇到一致性问题时，还是需要从以下3个方面深入思考，做出准确合理的设计决策。

真实项目

在SaaS产品设计中，特别是面向B/G端（企业用户）时，满足不同用户角色（如普通用户与高权限领导）的需求是至关重要的。

管理端布局设计

普通简洁明了

：为普通用户设计的管理界面应简洁直观，聚焦于日常操作，如数据查看、统计和下载。

功能分区

：通过清晰的导航栏或侧边栏将功能区域划分开，如“数据概览”、“报表下载”、“任务管理”等，便于用户快速定位所需功能。

操作便捷

：确保常用操作（如搜索、筛选、排序）易于触达，减少用户点击次数和页面跳转。

首页版心定宽设计

固定宽度

：为首页设定一个合适的固定宽度（如1200px、1440px等），以保证内容在大多数屏幕上都能保持一致的阅读体验。

信息模块化

：将首页内容划分为多个卡片，每个卡片承载一个独立的信息单元（如数据报表、通知公告、项目进展等）。

视觉层次

：通过颜色、大小、阴影等设计元素区分卡片的重要性，引导用户视线，提高信息获取效率。

交互性

：为卡片添加交互元素，如点击展开、滑动查看更多等，增加用户参与度和页面活跃度。

位置差异性分析

根据「认知负荷>视觉负荷>动作负荷」理论，在页面中我们首先要让用户能够找到按钮，然后完成操作。

相对于弹窗，页面的空间更大，边界感偏弱，用户的视觉重心更容易停留在左侧表单内容区域。所以按钮应该紧随搜索条件，便于用户快速发现按钮。

区域用户已经形成下意识操作习惯,虽然区别于规范,只能打破,遵循客户需求

一致性是规则

“一致性”作为规则或手段，服务于提升用户体验的原则。规则与原则一致时，促进业务共识与用户价值；冲突时，原则优先。用户体验原则指导下的一致性，要超越表面控件统一，更在于产品决策与价值取向的一致。必要时，为更好的用户体验，可在规则上让步以实现原则统一。打破规则需慎重权衡，确保用户便利足以弥补理解成本，需长期全局考量。规则非僵化教条，而是引导我们谨慎创新的框架。

一致性的底线

无论从哪个角度，一致性存在的必要性都是毋庸置疑的。

对于关键的设计元素，如专有名词和颜色体系，保持一致性至关重要。这不仅有助于维护品牌形象，还能减少用户的困惑。

特定设计语言在特定场景下的变体应用，虽然可能带来一定的视觉新鲜感或针对性优化，但往往需要谨慎评估其潜在风险。一旦变体打破了整体设计的一致性，可能会破坏用户对品牌的熟悉感和信任感，甚至引发误解。因此，在追求设计创新的同时，必须确保这种创新是基于一致性的原则之上，以维持品牌的整体性和用户的良好体验。

拥抱复杂性

一致性确实不应成为设计师的避风港或限制创新的枷锁，而应是基于对业务深刻理解和多样化设计能力之上的价值选择。设计师的核心任务始终是满足用户的多样化需求和偏好，这需要他们细致入微地观察、理解并解决每个用户的独特问题。

在追求一致性的同时，设计师应保持“第一性思考”的能力，即回归问题的本质，从用户需求出发进行创新设计。多样性页面的产出，不仅体现了设计师的创造力和灵活性，也是提升用户体验、增强产品吸引力的关键。

一致性与创新设计并非相互排斥，而是相辅相成的关系。真正的一致性不应导致单调或拒绝创新，而应是在遵循品牌或产品核心价值的前提下，鼓励设计师在细节和体验上不断探索和突破。当设计师感到被既定规则束缚时，应勇于质疑并重新评估当前的规范，确保所谓的“一致性”不是刻板的伪命题，而是真正符合用户需求和品牌发展的价值导向。

因此，设计师应时刻保持开放的心态和敏锐的洞察力，不断探索和尝试新的设计方法和理念，以更加灵活和创新的方式实现一致性与用户需求的完美融合。

重要的设计原则

「一致性」作为设计领域中的一项基础性原则，其重要性不言而喻。它不仅为设计过程提供了稳固的基石，还显著促进了开发效率与产品体验的全面升级。在设计实践中，一致性确保了界面元素的统一性和连贯性，使得用户能够迅速熟悉并掌握产品的使用方式，降低了学习成本，增强了操作的直观性和便捷性。

灵活变通使用

一致性原则并非一成不变的强制规定，而是需要根据产品的具体定位和市场环境进行灵活变通的应用。不同的产品可能面向不同的用户群体，拥有独特的品牌调性和功能需求，因此在追求一致性的同时，也需充分考虑这些因素，确保设计既符合品牌特色，又能满足用户的实际需求。

提升用户体验是价值所在

一致性的真正价值在于其能够显著提升用户体验。通过遵循用户的认知和习惯，设计师能够创造出更加自然、流畅的操作流程，使用户在享受产品功能的同时，也能感受到品牌所传递的舒适与和谐。因此，在追求设计一致性的过程中，我们始终应以人为本，将用户的体验和感受放在首位。建设有兼容性和长期价值的的一致性框架，在一致性中做到有用户价值的设计，是设计师应该不断探索的命题。

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

评论(0) 浏览(320)

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

日历

链接

个人资料

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

首页

个性化设计

视觉设计创新

智能化融入

交互设计升级

沉浸式体验增强

数据可视化深化

跨平台融合优化

分类

日历

链接

个人资料

存档