智能汽车已经成为汽车行业的主流趋势。智能汽车不仅仅是一辆简单的交通工具，更是一个充满科技感和人性化功能的移动平台

当今时代，智能汽车已经成为汽车行业的主流趋势。智能汽车不仅仅是一辆简单的交通工具，更是一个充满科技感和人性化功能的移动平台。为了更好地满足用户的需求，智能汽车需要塑造情感化的体验，从而增强用户的情感认同和忠诚度。本文将从以下 6 个方面探讨如何通过情感化的体验来提升智能汽车的价值和质量。

建立人与车的情感交流
未未来的汽车不是冷冰冰的工具，而是能够和人建立情感交流的。例如：智能汽车可以设置虚拟的IP形象来让车和人的交流更加的具有人物的情感，这是外在的表现，关键的点事汽车应该能够读懂驾驶者，比如汽车通过面部的识别就能够识别你的情绪，给你更多情感化的关怀

https://img.zcool.cn/community/02dp8xf91zvw44ufdxiuuw3937.gif

设计人性化的界面和交互方式
人性化的界面和交互方式是智能汽车情感化体验的第一步。用户界面应该是直观、易用和舒适的。智能汽车应该尽可能地利用图形、颜色和音乐等元素来增强用户的情感体验。例如，智能汽车的导航系统可以通过动态的地图信息和实时路况信息来提供更加直观的导航体验。此外，智能汽车还可以利用语音控制、手势控制等交互方式来降低用户的学习成本，提高用户的使用体验。

创造舒适和放松的氛围
舒适的座椅、高质量的音响系统和座椅按摩等功能是智能汽车创造舒适和放松氛围的重要手段。这些功能可以帮助用户放松身心，从而增强情感体验。例如，智能汽车可以提供多种音乐选择，利用音响系统释放出舒缓的音乐，让用户在行驶过程中享受放松的体验。此外，智能汽车还可以利用氛围灯和车内装饰等元素来提高车内的装饰感，从而增强用户的情感体验。

提供个性化的体验
个性化的体验是智能汽车情感化体验的重要组成部分。智能汽车可以通过识别用户的 ID 和车辆设置来自动调整车辆设置，为用户提供更加个性化的体验。例如，智能汽车可以根据用户的喜好和习惯来自动调整车内音响、座椅设置和导航系统等。此外，智能汽车还可以根据用户的驾驶历史和驾驶风格来自动调整车辆设置，从而为用户提供更加个性化的驾驶体验。个性化体验不仅可以提高用户的满意度，还可以增强用户的情感认同和忠诚度。

利用娱乐和信息娱乐系统
智能汽车利用娱乐和信息娱乐系统与用户进行互动，是提高情感体验的重要手段之一。例如，智能汽车可以提供音乐、电影、游戏等娱乐内容，让用户在行驶过程中享受愉悦的体验。此外，智能汽车还可以提供实时交通信息和天气预报等实用信息，从而为用户提供更好的享受驾驶过程。

情感化的装饰
情感化的装饰是智能汽车情感化体验的重要组成部分。智能汽车可以通过使用情感化的装饰元素来增强用户的情感体验。这些装饰元素包括鲜艳的颜色、柔软的材料、精致的细节和独特的设计风格等。通过使用这些元素，智能汽车可以提高用户的满意度和归属感，从而增强用户的情感认同和忠诚度。例如，智能汽车的车内装饰可以采用鲜艳的颜色和柔软的材料，营造出舒适和放松的氛围。此外，智能汽车还可以采用独特的设计风格，让用户感受到车辆的美感和品质感。这些情感化的装饰元素不仅可以提高用户的情感体验，还可以增强智能汽车的价值和质量。

总之，智能汽车的情感化体验对于用户的满意度和忠诚度至关重要。通过以上提到的五个方面，智能汽车可以增强用户的情感认同和忠诚度，从而提高车辆的价值和质量。未来，随着技术的发展和用户的需求不断变化，智能汽车的情感化体验也将继续得到的关注和加强。

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

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在开始分享之前，我想先与大家探讨几个问题。

第一个问题，有两个组件，左边用来控制页面间切换，右边用来定位页面内内容，它们在样式上一模一样，请问，在设计系统里应将它们归为一类组件吗？

第二个问题，同样都是日期选择器组件，理论上它可以承载很多功能，那么，我们在设计系统里应该做到何种程度才算合适呢？

第三个问题，BackTop 组件在 Ant Design 4.0 之前作为一个独立组件而存在，请问，它真的算是一个组件类型吗？如果算，那右边这种情况是否应该归为新的一类组件？

最后一个问题，某设计系统需要建设平铺式多选器这样一类组件，我们有两位设计师出了两套方案，请问哪个方案更适合作为规范纳入到设计系统当中呢？

上述问题其实也是我们过去在建设各类设计系统时经常遇到的问题，由于各种原因最终导致所谓的设计系统越来越不规范，那么长期而言，对业务来说其应用价值将会递减、运维成本递增。

如何解决上述问题？经过两年的思索、实践，我们内部沉淀出一套相对确定的、易用的理论方法，能帮助我们更快、更好的建设设计系统，目前它已被应用于指导 Ant Design 5.0、 Ant Design Mobile 5.0 以及蚂蚁内部诸如企业智能场景子系统等各种设计系统的建设当中。

我们给它起了一个好记的名字：Ant Design MetaGuide 设计系统元规范（下文简称 ADM）。

什么是 ADM 元规范？
ADM 就是设计系统自身的建设规范，它的目标用户是设计系统的建设者们，希望授人以渔，帮助系统建设者更好的建设和发展自己企业的设计系统。

更具体来说，ADM 能帮助系统建设者达到两个目的：1、确定要做什么组件；2、评估组件的质量。

这里插播一下，5.0 在 ADM 的指引下，本次新增了一些新组件和变体组件，这些内容欢迎大家阅读文章《Ant Design 5.0，更美、更灵活》。

Part 1：如何确定做什么组件？
回到今天主题的第一部分，如何通过 ADM 元规范来确定设计系统应该要做什么组件呢？

在讲解之前，我想先和大家分享一则小故事。

在我上大学的时候，有一门设计课程，导师要求我们用废弃的瓦楞纸设计一把让人叫好的椅子。起初我心里犯嘀咕，常见的椅子不都是木质、塑料或钢铁材料设计而成的吗，瓦楞纸怎么可能设计出一把好椅子？

老师接着说，所谓椅子的设计，不是要我们去思考要设计“什么颜色的椅子”、“什么材质的椅子” 抑或 “什么形状的椅子”。他希望我们回归用户去思考，设计椅子的初衷究竟是为了什么？是为了满足用户“坐”这个行为目的。

因此，所以“设计一把椅子”，其本质不是设计一把怎样的椅子，而是设计“坐”。真正的设计者，即使面对瓦楞纸这样一个简单的材料，一样能设计出一把用户心满意足的椅子。

初入设计学的我，醍醐灌顶。

其实，为设计系统设计一个组件，一样如此。用户通过界面使用我们的组件，并非为了用而用，而是为了达到他的某种行为目的。如果我们回归到这样一个简单的本质，那么对于组件的定义可能就十分清晰了。

回顾一下过去我们都是如何建设一个设计系统的。

我们可能会去看看竞品做没做这类组件、我们可能会听从老板的建议增删某类组件、我们也可能掉入满足所有业务诉求的陷阱当中，让用户之声成为系统建设的依据。诸如此类的判断标准，正是一种从现状和多决策因素出发形成的归纳性思维，在设计系统构建过程当中，它容易让我们优先思考组件的表层属性即其作为物品时的属性，从而作出建设的判断。正因如此，我们才经常会看到类似组件越做越多、越做越不成规范的设计系统。

归纳性建设思维，在建设 0-1 设计系统时很快。但当设计系统伴随企业发展变得越来越成熟，这样的建设思维就会出发很多“规范不规范”的难题。

这时，我们要回归本质，去源头寻找组件建设的决策依据，一个确定的能让团队共识的决策依据。这个依据正是 ADM 所倡导的，将建设视角从归纳视角切换成演绎视角，认识到真正的设计规范不是「物的规范」而是「行为的规范」。演绎视角是一种探究本质的思维，这与“第一性原理”一样，我们需要去寻根究底何为组件的本质。

想想椅子的故事，组件的本质正是为了满足用户某种行为目的。因此，组件做到和中程度取决于你要多大程度的满足用户的某个行为目的。根据组件满足的行为目的不同，我们就会产生组件的分类，更进一步，根据衍生出来的行为目的，系统会建设对应组件变体。

将设计系统理解为「行为的规范」，我们便能对系统的边界有清晰的认知，当下应该建设到何种程度，未来又该往何处发展。

理论比较抽象，接下来我将带着一个小工具帮助大家消化这个理论，并真正理解它是怎样在建设过程当中其作用的。这个小工具我称之为「组件行为模式地图」。
以开篇提到的 DatePicker 日期选择器为例，我们使用行为模式地图来对其进行定义。

首先我们知道，使用日期选择器不是用户的行为目的，用户是想通过它来达到「输入时间型数据」这样一个行为目的，根据时间型数据的不同，行为目的可细分为「输入时间点」和「输入时间段」，因此无论如何我们的设计系统，必须提供对应的必备组件，供用户使用（下图蓝色部分是 3.0 之前建设完成的组件）。

伴随企业数字化的发展，用户希望能够更快的达成他的行为目的，因此在原来的行为目的之上产生了衍生的行为目的，如「更快捷的选择某个特定日期的数据」等，因此我们在设计系统里，提供了对应的组件交互变体（下图中绿色部分是 5.0 本次新增的变体组件）。请注意，因为组件交互变体满足的是衍生行为目的，所以理论上我们的设计系统不提供对应的交互变体，用户一样能够完成他的行为目的。

在考虑完组件的定义之后，我们根据对应服务的企业和业务的差异，为组件穿上全局一致的“衣服”，便完成组件的建设。当然如果企业对于本组件有特殊的样式要求，通过判断这种样式具备一定的通用性，那么我们也可以新增一个组件的样式，以便进一步提效，这样我们便有组件的样式变体。

当然，我们希望样式尽量通过底层 token 灵活性提供给业务自行改造，尽可能克制的在系统中增加样式变体。

通过这样一个行为模式地图的拆解和定义，一个完整的「DataPicker 日期选择器」便定义和建设完成了，而它未来的生长方向也有了清晰的预判。

再来看一个设计系统里比较复杂的案例，重型表格组件。

在 Ant Design 5.0 当中，我们也将内部使用多年的 6+ 重型组件开放出来给大家使用，这部分的介绍大家可阅读文章《Ant Design 5.0：ProConponents》。

我们都知道，任何一个设计系统都有关于表格组件的定义，但各有差异。这种差异的根源也正是从物的规范去理解表格这个资产带来的。过去我们内部也是从物的角度去抽象结构表格的建设范围，会发现越抽象越多，最终只能交给专家感性判断做什么与不做什么。

如果我们转变成 ADM 元规范的视角来指导表格的建设， 我们能得到什么？我们能得到：

一个有内在统一逻辑，可维护，可拓展的表格组件架构图
组件不容易重复建设，不会使表格演变的越来越冗余
有清晰的表格组件演进路径，容易判断当下应该先做什么
建设者认知统一，从生产到消费的产物都能达到内在的统一
由于时间原因，大家可自行对比查阅下列两张资产架构图的差异点。

我们将视野从组件拔到整个设计系统层面，理论上，如果能对每类组件逐一定义其「行为模式地图」，我们可以便能等到一张完整的设计系统的行为模式大图。这张大图告诉了我们，设计系统的边界在哪里，现状是怎样的，未来可以往哪里发展。

从而，让设计系统更「确定」，让基于其发展的领域设计子系统具备「生长性」。

这里也跟大家分享我们的一些判断，如果你所服务的企业还处于中小型初创阶段，那么你可以建设一个满足必要行为目的的「0-1 通用设计系统」，用 ADM 确保组件交互是收敛确定的，用底层 token 的灵活度机制让样式足够的开放，可被灵活定制。如果伴随的企业业务壮大，你可能需要更成熟和大型的设计系统，此时你可以通过满足更多的行为目的和衍生行为目的来构建一个「1-N 通用设计系统」。

更进一步，如果你所服务的企业是像蚂蚁一样具有海量业务场景的平台型企业，那你可能需要依赖通用系统去生长出适用于不同业务场景的领域设计子系统，去进一步深入到不同领域里提供更高效、垂域的设计解决方案。

以上就是关于 ADM 元规范第一部分的介绍，分别从意识层和方法层介绍了如何定义组件。

是不是挺简单的 ？只要意识转变一下，再借助一些小工具，很多疑问就会迎刃而解～

Part 2：如何评估组件质量？
通过 Part 1 的分享，我们知道，设计系统规范的本质不是定义「物的规范」，而是定义用户的「行为规范」。
满足一个「行为目的」可以有千万种组件解决方案，那么哪种方案是最适合成为规范的呢？接下来第二部分就会跟大家分享如何评估组件方案的好坏。

我们知道，设计系统不单纯是个规范，其本质是一个设计工程化的「产品」，它的用户是千千万万的业务。因此对于系统质量的评估必然分为两个层次，第一，系统本身组件的质量；第二，系统被应用到业务后的表现情况。今天今天这里仅与大家交流如何评估组件质量。

在设计研究领域，调研思路可抽象为以下几类。第一 part 提到组件的本质是「行为的规范」，因此对组件的评估，我们同样聚焦到如何评估「组件行为」这个本质事情上。因此我们选择更客观、独立于业务的底层的人机交互模型，通过它评估而来的结果能 100% 客观反馈交互行为的质量。

在人机交互领域、在学术界，这类涉及人机交互底层的评估模型其实有很多，大家所熟知的 Fitts 菲兹定理就是典型代表之一，另外还有非常具备影响力的 GOMS 行为交互模型。

ADM 元规范的组件评估模式正式基于 GOMS 人机交互模型演变而来。GOMS 是 1983 年 Card 等人在《The Psychology of Huamn Computer Interaction》首次提出的一种交互建模方法，它的核心理念是将用户与界面交互行为拆解为行为元动作，无需真实用户介入就能预测交互行为的序列，评估交互的质量。

后来的学者基于此理念不断构建了适用于不同人机交互界面的行为评估模式，包括 GOMS-KLM（用于 PC端，由外国学者创建），GOMS-HLM（用于移动端，由中国北邮人机交互实验室创建）等。

关于 GOMS 的更多介绍就不在这次演讲里展开，接下来我们通过一个实际的案例来跟大家介绍我们是如何评估组件质量。

我们来看一下设计系统里最简单不过的一个组件——Button。如何评估 Button 的行为质量呢？我们来看下，用户完成一次按钮点击行为，它的具体流程和构成是怎样的：

step 1：用户需要意识并辨别按钮在哪里——记为一次心理单元（即认知） M
step 2：用户需要将鼠标指针移动到按钮上面——记为一次指向单元 P
step 3：用户点击鼠标，完成一次按钮点击行为——记为一次按键单元 K
如此，我们定义了按钮的交互行为序列为 MPK。更进一步，如果我们能测得这些元动作的交互效率，我们就能得到按钮这个组件的交互质量了。

实际上，确实可以。在每一个基于 GOMS 演变而来的模型，人机交互学者都通过海量的样本测的每一个交互行为元动作的平均耗时，我们称之为典型值。如果我们直接用典型值预测界面的交互效率，其结果与真实用户监测测得的耗时极其接近，几乎所有预测值都在测量值 1 个标准差之内。

这里以 GOMS-KLM 模型为例，展示了对应的元动作，包含物理操作单元、心理反应单元和系统反应单元三大部分，其对应的典型值附在拉单元下方。

理论讲的有点多，我们直接来看一些案例就知道怎么应用了。

以我们开篇第四个问题提到的组件「平铺式多选器」为例，我们到底该选哪个方案作为规范纳入设计系统当中呢？
首先，该组件的本质是满足用户「选择并输入 x 个数据对象」的行为目的，那么我们对输入 1 个（即单选）和输入多个（即多选，以多选三个标签为例）的两个具体行为过程进行评估。

单选场景：二者虽然样式有所差异，但交互行为序列均为 MPK，交互效率均为 2.65 s
多选场景：前者为 MPKMPKMPK，交互效率为 7.95s，后者为 MPKPKPK 交互效率为 5.25s
从结果来看，方案二更好，进一步根据序列分析，方案一由于选中前后的 UI 结构不稳定，导致用户在每个重复的选择行为前面都增加了一个心理反应时，因此综合表现不佳。

时间原因，就不再讲解更多案例。这边给大家预留一个小作业，我们在 4.0 的时候升级了 3.0 日期选择器的交互，请大家用元规范评估模型评估一下哪个方案更好？

这边先告诉大家答案，实际上是 3.0 的表现更佳～ 说明我们走了些弯路 。

在评估的过程中，我们也发现了一些小规律，这些小规律其实验证了对我们在日常设计中一些感性判断。比如，
让人们选择多次好过让人们在多个选项中选择之类的；比如，尽量不要键鼠切换等等。

在蚂蚁内部，我们还将原规范应用到其它设计系统的建设当中。比如，Ant Design Mobile 5.0 今年引来大版本的更新，从 200+ 的冗余组件收敛成了 68 个通用组件，同时通过评估发现其组件质量也提升了不少，系统中单组件平均交互行为耗时从 3.42 降到了 3.17，高于业界平均。

大家可以设想一下，一个组件虽然只提升了零点几，但当乘以所有组件数量、组件使用频率和用户数，每年能为用户省下的工作时间也相当可观。

最后，总结一下第二 part 的内容，我们分享了如何去评估系统组件的行为交互质量。在 ADM 的评估框架里还包含了系统级层面的评价，包括：
系统是否帮助业务提效
当业务不能直接应用系统，能否灵活改动
系统是否帮助业务变得更有竞争力、更创新了
这部分内容时间原因不展开细讲了，欢迎大家私下找我交流。

尾声
好的，关于 ADM 元规范的两部分内容，我们就介绍到这里了。如它山开场分享所言，ADM 元规范的诞生有其大的历史背景，也有蚂蚁大规模业务场景的孕育。随着企业业务场景的增长，对 Ant Design 有更高的要求，同时内部又不断基于 Ant Design 孕育出各式各样的场景设计子系统。

这些都倒逼我们去创建更确定的设计系统、去定义解决设计系统本源的问题，授人以渔，帮助各位系统的建设者更好的去构建和发展自己的设计系统。

不足之处，还请谅解，如果有任何建议和意见，欢迎随时找我交流～

作者：梓义
来源：知乎

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

当然产品本身也是随着实际业务场景的变化，从而考虑设计不同的形式来达到该功能的使用。产品需要优化，交互和布局同样需要优化，所以在B端产品中并不是一个同样的功能就仅限于只有一种解决方案。

对于产品而言，只有参与的项目越多，设计和思考的场景越全面，了解的产品越多，才能更好的掌握一个功能的多种类型和使用场景，这一次能够在原来的基础上更加全面的总结同一个功能的类型和场景，主要是在工作中也有遇到类似的业务场景，加上对其他产品的体验，从而让我更加全面的了解到该功能的多样性。

前一段时间，有一个客户（甲方主管研发工作的副总）向我提出了这个问题：如何提高公司程序员工程师的UI审美？
他们公司UI设计师只设计其中很小的一部分页面，大部分页面要让程序员自己来做的，程序员开发出的页面看起来总是很丑，这是他觉得苦恼的地方。
在听到这个问题的时候，我很惊讶，觉得这个问题真的是个好问题。我以前关注的都是设计师如何提高自己的审美？没有想过让程序员提高自己的审美。
据我了解，他们公司的程序员非常忙，比我们UI设计公司的加班程度要多很多。我首先想到的是工作都这么辛苦了，能把功能任务完成就很不错了，也许能顾上提升UI设计审美的时间精力有限。
提高审美，不是短期内能够达到的事情，何况术业有专攻，工程师们有没有兴趣和精力做这件事情，也是另外的一个问题。
但是，这是一个很好的问题，在一个软件公司里工程师程序员是占大多数的，UI设计师相对人数比较少的。如果大量的工程师能够把审美提高易用性提高。确实，这个软件的整个UI水准就会提高。
如何提升整体软件的UI设计美的水准，让软件好用又统一？
我首先想到的是制定好的UI规范，做好全流程的交互设计原型。通过核心关键场景，关键页面的梳理，整理出一套设计语言，规定好UI规范。这份工作可以由设计师来做，把所有的字号颜色使用的元素组件都确定好，关键的场景和页面做一些模板，制定一份完善的UI规范，方便工程师按照这些去复用调用，降低难度。

出现原因（Reason）：

电脑，平板，智能手机的屏幕尺寸逐渐多样化，设备类型的增长增强了网页的适配需求。
注：屏幕尺寸为浏览器尺寸的上限

自适应（Responsive）：

自适应是根据设备分辨率的不同，分别为不同的屏幕进行布局定义，创建多个固定布局，即“多套设计，多套开发”。适用于阅读类交互多的网站，如知乎官网。

响应式（Self-adaptive）：

响应式是基于同一套代码、同一套设计语言，能够兼容多尺寸、多终端设备的展示，即“一套设计，一套开发”。 网页根据显示宽度（浏览器宽度）自动调整内容，适用于企业、产品等视觉展示型网站中，信息少图片多，如华为官网。

响应式好处（Advantage）：

开发成本更低，一套代码。
设计成本更低，一套设计。
业务迭代更快，一次运营。

响应式适配原则（Principle）：

拉伸布局：内容在屏幕显示区域进行相对拉伸，已达到完整布局。
等比缩放：内容在屏幕的相对位置上进行等比例缩放，一般用于图片。
扩展布局：内容可灵活按照屏幕尺寸进行增减，扩展为多行多列等。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效表格被公认是展现结构化数据最为清晰、高效的形式。常和按钮、搜索、筛选、分页等其他元素一起协同，构成表格页。表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加高效。

开发做的界面和设计稿差异巨大，或者完全不是一回事，是非常普遍的现象，也是最困扰UI设计师的问题之一。很多时候设计师辛辛苦苦设计了半天，最后落地的成品货不对板，这就等于对之前设计的全盘否定，让我们产生工作的内容毫无意义的想法。

蓝蓝写
画出用户旅程图是我特别喜欢的一个工作方法，可以与产品、研发、市场团队一起共创，优化产品。
用户旅程图是一种图形化工具，用于详细描述用户在使用产品或服务时所经历的各个阶段和步骤。它能够展示用户的整个使用过程，包括用户的需求、痛点、态度和行为，以及产品或服务如何与用户进行互动。作为产品设计者，我们可以通过用户旅程图更好地理解用户需求，提前发现后续的用户体验问题，并思考如何提升产品或服务的用户体验。
用户旅程图的应用广泛，不仅可以帮助我们进行流程分析，还可以识别痛点，定义问题域。同时，它也可以帮助我们进行用户反馈的收集和整理，为产品或服务的优化提供依据。然而，用户旅程图并不是一种一次性的工具。它需要我们不断地更新和完善，以适应不断变化的市场和用户需求。因此，即使我们所属的团队没有特别完善，也许我们在很长时间内都没有运用的环境，但是不要忘记，它依然是一个威力无比的工具。
现在我们就来重温一下，这是蓝蓝设计的用户旅程图~~~

UI设计公司的用户旅程图

这是乘坐飞机过程的用户旅程图~~~

使用用户旅程图的方法如下：
Step 1：明确用户和划定用户群
首先，我们需要明确研究的目标用户和所属的团队资源情况。在此基础上，我们可以确定需要映射的用户群体，并针对该群体的特定目标和场景进行旅程图的构建。
Step 2：梳理业务场景下用户行为流程
根据目标用户的任务和行为，我们可以梳理出该场景下用户的行为流程。这个流程包括用户需要经历的阶段、环节以及交互方式等。如果涉及主次任务流程，都需要一一梳理出来，并加以归类。这个过程需要深入的剖析，尽可能找出所有用户与软件产品产生交互的接触点，以便进一步拆分出每个阶段的用户目标、操作、接触点位置、用户想法以及用户感受。
Step 3：绘制用户想法和感受曲线
在梳理完用户行为流程之后，我们需要根据调研时记录的用户反馈和情感变化，绘制出用户的想法和感受曲线。这个曲线通常采用情绪曲线的形式来展示用户的情感变化，并标注出用户的痛点和爽点。
为了获取用户数据，我们采用了多元化的数据收集方法，例如：
用户行为观察：直接观察并记录用户在各个阶段中的实际操作行为。
用户测试：通过测试用例执行，评估用户在特定任务中的操作效率、反复性以及清晰度。
用户调查：以问卷或在线访谈的形式，收集用户对于任务完成情况的反馈以及他们的疑问和不满。
热图分析：通过热图工具分析用户在界面上的鼠标移动和点击行为，以评估操作的顺畅程度。
工单与客服反馈：收集并分析用户通过工单或客服途径反馈的问题和意见。
这些数据均应直接来源于真实的用户行为和反馈，而不是团队内部的推测或分析。在整理数据时，我们需要避免主观评价和情绪化的表达，坚持以客观事实为基础，并关注以下几类关键数据：
用户实际操作过程：观察并记录用户在各个阶段的具体操作步骤。
操作效率：通过测试数据评估用户完成特定任务的效率。
操作的反复性：记录用户在操作过程中重复操作的次数和频率。
操作过程的清晰度：通过用户调查或热图分析，了解用户对于当前操作流程的清晰程度和满意度。
任务完成情况：根据用户调查和工单反馈，统计任务完成率以及未完成的原因。
用户疑问：整理并分析用户在各个阶段中遇到的疑问和困惑。
用户不满：收集并分析用户对产品或服务的不满和抱怨。
用户情绪：通过工单、在线访谈或社交媒体分析，了解用户对产品或服务的情绪反应。
Step 4：总结解决方案和新的灵感切入点
在对这些数据进行痛点分析时，我们需要对这些痛点进行系统的梳理、分级以及深度挖掘，以洞察痛点背后用户的真实需求和期望。然后，基于这些痛点和需求，识别出产品或服务优化和改进的关键机会点。

通过回答这些问题，我们可以总结出相应的解决方案和新的灵感切入点，为产品或服务的优化提供参考。
在分析过程中，我们可以采用多种方法来拓宽思路和寻找可能的改进点，例如：
行业内成功做法借鉴：研究同行业其他成功案例，了解他们在解决类似问题时的策略和方法。
项目经验总结：回顾团队历史项目中的类似问题，提炼成功和失败的经验，以便应用于当前问题的解决。
专业判断与经验联想：依靠专业知识和行业经验，提出可能的问题解决方案，并联想类似场景中可能的优化策略。
用户视角思考：换位思考，从用户角度出发，尝试理解他们可能的痛点和需求，以及可能的解决方案。
头脑风暴：组织团队成员进行头脑风暴，鼓励发散性思维，尽可能多地提出可能的解决方案。

我们的目标并非仅仅是为了制作一张漂亮的图形或者报告，而是通过这种结构化的分析方法，尽可能客观地找出产品或服务中用户体验优化的关键机会点，以便为进一步的决策和实施提供明确的方向和依据。通过绘制图表，我们可以清晰地展示整个分析过程以及结果，提供一种可视化的视角以便团队成员更好地理解和评估产品的优势与不足。
多练习~~这是一个很有效的积思广议、从多角度解决问题的一个好方法。
祝大家使用顺利~~

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

改版前

改版后

页面框架

1.导航菜单

用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。

1.1.颜色

导航层和内容层划分明确，从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。左侧导航为深色，能够让用户更沉浸的体验，右侧内容区都为浅色，用户在使用时能够真正做到有区分。

1.2.侧边导航

将菜单栏放置在左侧，页面布局上为左右结构，将导航菜单放置左侧固定
优点：
扩展性较强（多级导航可以流畅展示，可以涵盖很多大而全的产品）
展示灵活（侧边导 航可收折，收折过后用户的横向核心空间将会增大大，页面展示效率也会大大提高）
快速定位（视觉启始线统一，用户可以根据首字进行查找，方便查找）

1.3.图标

线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，不会对页面造成太多的视觉干扰。

2.树结构

用于承载有父子关系的结构化内容，提供内容层级的展示。

2.1.组织信息

树形结构可以帮助将信息进行层级分类，清晰地展现出信息之间的从属关系。这样，用户可以快速找到所需内容，降低了在应用中迷失的可能性。

2.2.帮助用户导航

在一个页面上展示多个层级的内容，用户通过点击展开或折叠相关节点，无需频繁地跳转页面。这种设计简化了导航过程，提高了用户满意度和黏性。

2.3.左树右表

根据人的视线流和操作顺序，将树结构放置在表格左侧，先帮助用户定义表格的具体内容，后引导用户进行表格内的操作

3.表格

表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分

3.1.斑马纹表格

斑马纹表格通过交替的数据行背景，可以引导用户的视线，使得大量数据看起来更加和谐和有条理。这使得用户能够更快地找到他们需要的信息，提高了数据的可读性和扫描性。同时可以减少视觉噪音和协助对比，从而帮助用户更加轻松地浏览表格数据，降低视觉疲劳。

3.2.居中对齐

居中对齐的文字和数据在视觉上更加均匀分布，可以让用户更加轻松地浏览和读取数据。特别是在处理包含大量数据的表格时，居中对齐能够减少视觉上的拥堵感，提高数据可读性。可以使整个表格的行高参差不齐的现象得到缓解，给用户一种视觉上的统一感。

3.3.颜色

品牌色用于选中和编辑，红色用于警示和禁止操作，绿色用于积极意义的信息或者操作。控制颜色数量，且不同颜色表达不同的含义，符合用户思维惯性，具有良好的反馈作用。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢～希望得到建议咨询、商务合作，也请与我们联系01063334945

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司