01 互补色的定义

互补色分为“光学互补色”和“印刷（色料）互补色”两种。

光学互补色：两种色光以适当的比例混合，能产生白光时，则这两种颜色就称为“互为补色”。

本文主要探讨的是印刷（色料）方面的互补色：在色相环上相对180°角的两种颜色，这两个颜色混合会得到灰色。

互补色由于在色环上相距最远，色彩差异最大，色彩对比很强烈，合理的搭配往往会产生强烈的视觉冲击力。

虽然从色环上来看，互补色可以有很多组，但最常用的互补色有3组，分别是红和绿、蓝和橙、紫和黄。

由于红色和绿色在色相上缺乏共性，放在一起会造成极强的视觉反差，搭在一起容易有格格不入、扎眼的感觉，容易出现散乱、土气的感觉。

要取得好的视觉效果，则需要使用一些调和手段，可以在明度、饱和度上中和两种色彩的突兀，使其形成和谐统一的对比。

蓝橙是一组经典的冷暖互补色，温暖的橙色在与偏冷的蓝色搭配时，更加醒目，活泼的橙色可以很好的缓解深蓝色的沉闷，增加画面的愉悦气氛，可以很好的营造出画面的层次感。

紫色和黄色不论是色相还是明度差异都非常大，因此黄色与紫色的搭配容易产生相当高的视觉强度。

02 互补色配色的方法

互补色对比性强烈，因此在视觉上会产生极大的隔离作用。由于色相对比过大，配色难度也最大，如何化解互补色之间的冲突感，是用好互补色的关键。

1.通过面积比来达到平衡

如果使用面积相近的互补色的搭配，具有强烈的冲突感，产生的视觉效果强烈而鲜明，情感浓烈，令人记忆深刻。非常适合夸张的、张扬的情感表达。

大多数情况下，我们会选择一种颜色作为主色调，大面积的色相占据主导位置，再用小面积的互补色去点缀画面。这样才能表现出主次关系和丰富的色调效果，色彩对比强烈却又不违和。

2、调整明度与饱和度来减弱色彩冲突

高明度与高饱和的互补色搭配，对比强烈，在视觉上会产生极大的隔离作用，它们组合在起，会产生相互衬托、相互抗衡、相互排斥的感觉，并使各自的色相更显突出，更为艳丽，具有强烈的视觉冲击力。

可以考虑降低互补色的明度与饱和度，来减弱冲突，既保留了对比色搭配的特点，同时降低了过强的视觉刺激。

3、加入中性色缓冲其强烈的对抗性

互补色鲜艳热烈，而中性色（黑白灰）则刚好相反，它们毫无情绪感，中庸冷静。在对比色中加入中性色可以很好的调和画面的平衡感。通过中性色的调和，既保持了互补色所带来的丰富的层次感，也避免了互补色之间强烈的冲突。

原文地址：艺海拾贝Design（公众号）

作者：邓海贝

转载请注明：学UI网》听说这是最难的配色方法——互补色篇

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

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

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

1. 一定要注意识别度

其实我一直不敢使用毛玻璃效果的原因，就是害怕有识别度问题，其实网上现在有很多毛玻璃图标：

做概念稿练习练习还好，如果真的落地肯定不行，太影响识别了。

为了不影响识别，我们可以有两个做法。

其一：就是毛玻璃的透明度别太低，像腾讯视频这种：

这样不影响我们识别图形的轮廓。

其二，我们可以把图标主图形用颜色填充，毛玻璃的面积只是很小一部分，起到辅助作用即可，比如像喜马拉雅这种：

这样整体的识别度也不会太受影响。

以上就是关于不影响识别的小方法。

2. 技法

毛玻璃图标大部分一共分三层，填充层、玻璃层，模糊层（模糊层是嵌入到玻璃层的）。

其中最重要的一个关键点就是，玻璃层其实是假的，并不是透明的，而是100%的填充色。

举个最简单的例子，我们先画一个深蓝色的填充层：

然后加一个玻璃层，这个玻璃层不是透明的，而是100%填充色：

那有同学就会问了，毛玻璃效果怎么产生呢？其实就是把下面的深蓝色圆复制一个进入到前面的玻璃层：

有人又会问，这也没效果啊，对，因为复制进入玻璃层的圆形和后面的原型位置一摸一样，如果不做改变，就看不出变化，所以我们先来模糊下：

区分的还是不够开，我们再降低透明度：

这效果就立马出来了。

所以从技法层面来说，并不是很难，主要是要注意识别度和整体的设计感。（当然，这只是我个人制作的方法，可能别人也有其他的方式）。

3. 底色

前几天在群里看到一位星友问，说为什么他做的效果是第二个，而不是第一个那种透透的毛玻璃感觉：

其实我在最开始做毛玻璃效果的时候和她遇到了一样的问题，这个问题产生的原因就是因为底色，现在的底色是黑色，一个玻璃放在黑色上面，透出来的颜色肯定是深灰色，而不是浅白色（除非你这块毛玻璃本来就是白色的）。

我在之前的一次练习时，做一个黑金配的的毛玻璃效果，最开始就做成了这个样子：

总感觉有点奇怪，其实就是因为在黑色背景上，玻璃层的颜色用了白色，感觉没透过去，就感觉怪怪的，后来我把玻璃层的颜色变成深灰色：

这样看起来就好多了。

制作的原理和刚才说的是一样的，先把大形画完：

然后前面整一个玻璃层，选一个深灰色：

然后把下面的形状复制一个剪切到玻璃层中：

现在看不出效果是因为玻璃层里面的图形和后面的图形位置是一摸一样的，这时候我们把玻璃层的图形模糊：

现在已经差不多区分出来了，如果想要更明显的区分，可以把透明度再降低一点：

也还ok，当然，我觉得加不加透明度，还是看具体效果调整就可以了！

再强调下，大家在做毛玻璃的时候一定要注意背景色哦，不然可能就会看起来很奇怪。

总结

好了，以上就是我个人对于毛玻璃效果的一点总结，我个人还是比较喜欢一组毛玻璃图标是多色的，如果是一个颜色，比如这种：

相对来说没那么耐看，如果是多色的：

就会耐看很多，希望给大家一点启发，下期见，默默扔！

01. 评论区双指上滑送出“抱抱”

在听一首喜欢的音乐时，参与评论可以表达自己对音乐带来的共鸣感，也可以看其它听友的评论寻找知音。在网易云音乐的评论区隐藏着一个手势交互，对某一条评论双指上滑就会针对其给出拥抱，两个小人微笑拥抱的动画显示在该条评论右下角，进而用户头像下方会显示“收到了抱抱”的标签提示。

在不新增功能入口的同时，借助双指手势交互来满足需求，既能不破坏原生的结构，又能带给用户不一样的操作体验。这个隐藏的彩蛋你是否注意到？以后在体验产品的时候除了发现视觉表层的可见内容以外，也要加强手势交互的操作来发现更多隐藏的功能。

02. 长按激活单击退出

iOS 的设计在手势交互的探索上比较多，全屏的模式将手势发挥到了极致，也带给我们对于手势交互的更多理解。在苹果手机桌面，我们可以通过长按激活应用管理，单击则会退出管理模式，操作非常便利。

无需在当前的设计上面新增更多繁琐的控件，手势的借助可以使得我们的设计更加极简，减少过多的内容对用户的干扰。

03. 长按与时间跨度的结合

长按激活功能比较常见，但是结合时间长短的变化相对较少。苹果手机桌面的应用管理，在长按应用图标时会弹窗展示功能列表，继续维持长按则会进入应用管理，随着长按的时间跨度不一样激活不同功能需求。

在手势交互设计过程中，除了通过动作的不同激活功能操作之外，也可以结合时间跨度、力度、位置等进行组合交互，来满足多重功能操作的需求。

04. 可以移动的红包

通过红包吸引用户进而转化是很多电商产品的玩法，在必要 APP 中红包通过倒计时的形式营造出紧迫感，促使用户立即使用，进而提高红包的使用率。红包悬浮在左侧会挡住分类的展示，为了解决这个问题红包借助滑动手势可以移动，用户可以在左侧导航栏到底部标签栏之间任意滑动，方便预览分类。

单指滑动是常用的手势交互，精准定位元素之后可以拖动使其改变位置，不仅方便内容的展示也不会造成底层内容的阅读干扰。

05. 同一个功能不同的手势交互

我们在观看视频的时候，短视频是单击控制播放/暂停，而视频播放软件则是通过双击控制。由于长视频用户需要观看很久，容易触屏造成误操作，双击是为了形成二次确认，降低误操作的概率。

短视频播放由于内容比较简短，可以通过单击控制播放/暂停，双击则是更多功能的辅助，同一个功能在不同的场景需要配合不同的手势。我们在进行产品设计的时候，可以根据业务类型和用户场景的差异借助手势来满足更多功能的操作，用户习惯培养之后将会提高其操作体验度。

06. 通过左滑程度控制删除

左滑动是产品设计中非常普遍的手势交互，通过左滑展开列表隐藏功能，比如编辑、置顶、删除等。

在脉脉 APP 的消息模块，消息列表左滑可以进行置顶和删除，如果继续往左侧滑动则会实现自动删除，以此来替代点击删除图标完成删除操作的步骤。通过左滑配合点击删除操作路径多一步，而左滑程度控制删除效率更高，针对一些消息较多的产品，可以方便用户快速清理未读消息。

07. 双击头像“拍一拍”

在微信群聊或者与好友聊天的时候，为了重点提示好友，可以通过双击好友头像进行“拍一拍”，晃动的头像和震动的提示加强好友对信息的关注度。

结合双击的手势交互，在不改变当前布局的情况下加强社交属性，增强好友间的互动提示，通过手势丰富了社交体验。

08. 单击进入全屏模式

虽然手机逐步进入大屏时代，但是用户还是希望获得更少的干扰，全屏模式的操作可以让干扰降到最低。

百度地图在操作后会有弹窗式的内容呈现，用户可以通过单击屏幕退出弹窗，再次单击则会进一步隐藏基础控件，进入全屏模式。通过单击的手势交互来简化内容结构，降低干扰带给用户更集中的操作体验。

09. 长按快速预览精彩片段

通过爱奇艺 APP 刷剧的时候，在搜寻影视作品的过程中，可以通过长按作品封面进行快速预览，播放精彩片段来判断是否值得追剧。

通过长按激活弹窗，可以在不改变当前布局结构的前提下，进行更多功能操作。适合针对隐藏式功能，也能避免误操作。

10. 长按结合位置区域变化

很多影视类产品在全屏播放视频时，除了通过拖动进度条进行快进/倒退之外，也能通过长按屏幕进行快进。

而腾讯视频与之不同的是结合了屏幕区域，在全屏状态下，左侧区域长按快退，右侧区域长按快进。长按结合位置区域变化功能状态，深入了手势交互的操作，也能带来不一样的操作体验。

11. 三击激活“辅助触控”

单击和双击的手势交互较为常见，而三击手势应用较少，有待深入探索。目前来说，带有 Home 键的苹果系列手机，可以通过三击 Home 键激活“辅助触控”快捷键，再次三击隐藏快捷键。

通过三击可以快速激活功能快捷键，减少了多个步骤路径，也不会导致用户误操作。

12. 下拉程度影响功能变化

手势下滑形成下拉刷新已经成为产品设计中的基础操作，为了进一步延展功能，很多产品在下拉过程中根据下拉的程度判断是刷新还是进入二层楼（活动或者功能模块）。

通常是通过控制下拉的距离来做判断，会提示“松开刷新”的字样，如果继续下拉则会激活功能变化。进入二级功能界面或者二层楼活动界面，深度的功能开发带给用户更多的选择性。

13. 缩放预览相册大小

苹果手机自带的相册（照片）APP，可以通过双指缩放来改变照片预览的大小，方便用户在众多照片中通过缩小快速查看，再通过放大做进一步的选择。借助缩放的手势交互，方便用户自由缩放预览并作出快捷的操作，提高了用户的操作体验感。

双指缩放对于屏幕的缩放预览十分便利，在很多应用场景都有涉足，比如相册、地图、绘图工具等。

14. 双击最大化图片预览

在图片预览的时候，可以通过双击最大化图片，方便对细节的观察。通过双击的手势交互来快速放大图片，在很多相册应用、电商产品、微信等社交产品中都有涉足，只要是全屏模式下预览图片，都可以通过该手势交互完成缩放。

双指缩放属于慢动作，而双击最大化属于快速一步到位，适合查看图片细节等操作。通常是双击最大化，再次双击恢复正常。

15. 手势交互控制地图预览

手势交互在地图软件中的运用表现得淋漓尽致，对于用户来说操作变得更加便利和快捷。

以高德地图举例：单击手势可以隐藏操作栏进入全屏模式；长按固定区域会激活当前位置定位，方便随时查看和开始导航；双击手势可以对地图进行固定倍数放大；双指缩放可以对地图进行任意缩放，便于精准查看位置区域等。手势交互控制地图预览提升了操作便捷度，借助手势提升了地图类产品的体验感。

16. 拖动完成自定义设置

随着用户对个性化的需求升级，很多产品都开放了部分常用功能模块的自定义设置。比如网易云音乐的底部导航栏在设置环节中，便可通过拖动完成自定义设置。

利用压力结合滑动可以实现拖动手势交互，对于一些需要用户谨慎操作的功能比较适合，也能有效防止误操作。

17. 拖动叠加实现应用建组

当用户下载的应用很多的时候，通常都会通过建组管理手机桌面上的各类应用软件。可以通过拖动应用叠加到其他应用软件上实现自动建组，建组、进组、移出等操作均可通过拖动手势完成，操作非常便利。

拖动手势交互针对一些防止误操作的功能比较适合，相当于二次确认的过程。

18. 长按滑动实现多选

在百度网盘中可以通过单击选择控件对文件进行选择操作，也可以通过长按整个区域实现选中，长按过程中可以结合滑动实现多选。

长按滑动进行多选针对文件较多的场景非常便利，也不用担心误操作。在一些相册应用中点击选择按钮之后也可以通过滑动实现多选，操作路径多一步。无论是通过激活选择按钮，还是长按都是起到二次确认的作用，长按滑动操作相对更简单。

小结

如果想做HMI体验设计了解开发流程后，首先开始设计前最需要知道的是以什么为基准去设计，以及设计的限制，也就是设计原则。尤其HMI体验设计是整车体验的一部分，也变得越来越重要。

刚开始进入车载行业的同学都会存在一个误区，会拿互联网那一套设计规范套路汽车HMI设计，但其实汽车HMI有自己的设计原则和设计规范以及美学理念。

汽车行业本身是一个有着强烈美学理念和设计规范的行业，其实准确的说应该是汽车HMI中控设计是基于自身传统规范，结合互联网移动端和Web端的基础上，慢慢形成了一种新的设计规范。加上庞大的行业从业者的外溢，互联网的美学理念和设计规范，已经在入侵进来形成HMI设计新兴的细分领域。

那很多同学问了我们想去做HMI设计应该从哪里下手啊，在这里我建议大家无论做任何的设计都应该从用户场景、用户痛点下手。

一、了解与用户沟通的设计语言

在设计HMI的过程当中，都是基于用户在智能车的场景里。就像设计APP会基于用户痛点和用户场景来的一样。在智能车的体验里，首先是驾驶员、其次是车、以及系统三个要元素组成了车内场景。

在结合了现有的互联网车机设计原则，主要考虑的还是简单易用和高效专注。

简单易用

在设计上应该为驾驶员提供更完善的包容机制，操作和信息的统一性和延续性，帮助用户降低操作成本，提升用户体验。

高效专注

考虑驾驶员的实际场景的多样性，注意力容易分散或暂时中断。所以在设计的时候 要考虑除非重要的警报，尽量用听觉给到用户的提示。操作上可以满足单手操作，并为用户的每一步操作提供及时的反馈。

二、三秒原则

之前看过一个“三秒原则”的理论，开车时在高速上要保持和前面通过一个参照物三秒的距离，才是安全的，说明人在高速行驶的反应时间是三秒。

用户的注意力管理对减少由注意力分散导致的交通事故十分必要，开车过程中，必要操作需要遵循3秒原则，用户必须在第1秒内找到应用场景的重点信息与功能入口，然后第2秒进行交互动作，最后第3秒得到想要的信息结果。准确把握每个过程中的时间，排除多余元素干扰，避免分散注意力。

相关链接：车载系统中，交互设计的「三秒原则」

在三秒原则里，一秒视觉、两秒交互。排除车的硬件体验，那HMI设计师在系统里要给到用户一个什么样的视觉原则和交互原则是我们今天要研究的问题。

三、HMI视觉设计原则

1.颜色

车载的美学他们大多是深色的，金属质感，边框和阴影。早期的车载用户界面都是硬性的感觉。但是现在行业已经成熟到一个包罗万象的男女皆宜的当代审美。所以现在的视觉可以在以往的传统上，是汽车界面更新潮更科技。

1.1 关于色彩

主流的背景以深色为主，那是因为深色的背景更不容易分散司机注意力，减少了眩光的问题。现在一些新能源车可以切换白天黑夜模式，也会出现浅色的背景，浅色模式的整体色调不好把控，处理不好会使屏幕一直处于高亮状态，会让驾驶员产生一定视觉疲劳。

色彩规则以 中华人民共和国国家标准 关于驾驶安全的基础标准为大前提，设定符合车载场景的取色类型。

色彩对比度

由于驾驶环境的复杂光线条件，需要满足在不同照明条件（日间/夜间/暗光/眩光）下的可读性，对比度需满足以下条件：

• 文本与底图对比度建议大于7：1（至少4.5：1）。背景推荐使用深色，避免大面积使用纯白色，过度吸引用户注意。

• 过高的对比度导致视觉疲劳和阅读效率的降低。深色模式下背景与文本或图形的对比度建议不大于18：1。

* 注：下图来自 https://color.review/可在此链接查阅色彩对比度关系。

饱和度与明度的合理搭配

长时间驾驶本身精神与视觉会更加需要集中注意力在前方，此时车内环境中，不宜有过于强烈明显的色彩干扰视线，可试想你在电影院中看电影时，身边的人的手机亮度最高，此时会严重影响视觉的余光，难以聚焦在前方画面上。

因此视觉设计的整体色彩体系应当适当的降低饱和度，同样的，车载系统视觉的设计也应避免使用同一色系的方案，这样无法在1秒的安全时间以内让用户有效果的判断识别信息

根据 Munsell Color 原理得出，饱和度和明度的两个数值越大，颜色越鲜艳。在车机配色选择上请遵循以下规则：

• 越靠右上角的色值越鲜艳，所以不建议选取。

• 取色时，同时考虑饱和度和明度，这两个因素的值之和尽量小于180（即：S + B ≤ 180）。

不建议选择单色，建议增加辅助色

更好的可以帮助我们分组，提高信息的获取能力。

结合 ISO 15008 （道路车辆.运输信息和控制系统的人类工效学方面.车辆目视显示用规范和试验程序）

车载界面色彩倾向度定义了适合作为品牌主要控件的色调的功能色，强调品牌视觉形象。并结合 GB 4094 相关信号颜色规定同样定义不适合的色彩阙值。

按照功能色分类可以根据常规场景将功能定位一级色、二级色、三级色。

状态颜色

反馈成功及警戒提醒在驾驶场景中至关重要，结合 GB4094相关信号颜色规定，状态定义需要与相关法规及驾驶者习惯思维的明确色相相结合。

状态用色分类：此处颜色以 HSV 颜色模型参数为标准。

百度主题案例：

阿里颜色规范：

华为颜色设计规范：

设计走查自测表：阿里车载-设计走查自测表

为方便车载小程序设计，提供轻量化的小程序设计走查表以供参考； 可用于项目前期设计自测、项目中研发自测检查、项目上线后设计/产品协同开发同学完成自测问题，查缺补漏规避风险点；

2. 字体

中控与驾驶员的距离处在70cm-85cm之间，设计稿一定要在实车上感受，是否足够清晰，是否能快速识别，中控屏搭载的更多是各种应用，显示的文字相对会多一点，除了文字需要保证在可视区间里，文字内容应当通过字号字重来区分主次关系，用户在扫一眼的过程中即可准确的看到重点信息。保证易读性。

字体的颜色尽量选择对比度高的，参考WCAG标准。方便用户能快速扫视。

字体的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素，为保障文本的易读性，界面文字需满足以下要求：

• 最小可识别文字尺寸：5.4mm。
• 字体层级：区分文本主副层级，字号差距需保持4-6sp。
• 需要用户阅读和处理的重要段落文字不超过20个字（700字/分钟，2秒内读完）。
• 对于需要用户关注的文本信息可通过增加字重的方式突出内容。

推荐阅读：适合车载显示的10款字体

百度字体设计规范：

阿里字体设计规范：

3. ICON

ICON的设计形式，可更多结合应用的内容，应注意在内容与形式结合时，视线上要保持一致性，可有助于在一秒的安全时间内让用户快速浏览并判断信息

点击是交互行为中最为常用的动作，为确保用户点击操作的易用性和成功率，操作按钮及热区需满足以下规则：

• 图标：最小的图标尺寸为6.9mm，推荐图标大小为9.2mm。
• 热区：最小10.7mm，推荐热区15.3mm以上，热区间隔3mm以上。

4. 内容排版

车载以驾驶员的操作为主，功能布局尽量设计在离手最近的位置，缩短操作距离，尽可能将热区放大，展示信息放在右侧。

4.1 层次和数量

所有的信息按照使用场景、功能。分组展示，确保信息按照的优先级进行交付。在任何场景下展示尽可能少的信息。避免过多信息的干扰，必须做到界面显示轻量化。数量尽量不超过3-4个。

4.2 阅读排版

可以根据阅读浏览模型Z字型和F字型。混排的时候建议使用一种字体。

4.3 预留安全热区

避免元素热区过近或重叠，需要使可触摸目标之间预留足够的安全距离，至少保持 3.5mm 的热区间隔。

5、品牌IP

用户对传统汽车的品牌感认知，还是停留在车标、车造型等硬件外观，而智能汽车，搭载了一个智能系统，除了驾驶需求，人和车的交互更多的会停留在HMI，所以，对于HMI融入品牌元素也相当重要，品牌化是智能座舱视觉设计重要的发展趋势之一。

现在主要品牌的体现形式是车载的IP管家，他有具体的名字，可以用语音唤醒。

四、HMI的设计六大交互原则

说到HMI设计，虽然所有人都很容易理解，HMI设计要考虑注重安全，需要在设计上适应车载的使用场景。但是UI设计原则和UX设计原则很少有人系统性的回答过。对比原有的交互六大原则，适配到车载的场景下，提炼出六大交互设计原则。

1、基本原则

1.1、安全性原则  ⭐️ ⭐️ ⭐️ ⭐️ ⭐️

HMI涉及到的载体都是汽车零部件中的安全件，HMI设计首先考虑的必须是以安全为第一导向， 所有显示信息都应该按照人机工程学进行合理排布，按照驾驶者的行为习惯进行设计。

与移动端的视觉显示不同，HMI设计师需要注意除了基础的视觉显示规范外，还需格外注意与安全相关信息的展示、视觉警告、文字易读性和显示眩光等显示问题。

1.2、及时反馈原则

人的大脑每天通过五种感官接受外部信息的比例分别为：味觉1%；触觉1.5%；嗅觉3.5%；听觉11%；视觉83%。

时刻保障关键信息是最高优先级的，保证在各种环境场景下具有良好的可见性和易读性，无需驾驶员费力寻找和识别。

随着大屏、多屏化的发展趋势，除了依赖视觉反馈，以及减少或避免触摸屏的误触功能，听觉和触觉也可以辅助视觉反馈。

1.2.1 不同场景下的提示

除以上正常驾驶场景外，还有部分对特殊场景的提示，如油耗、故障、雨雪天、超速、疲劳等

车载系统需要有能力面对复杂的应用场景，处理需要更加智能，（比如复杂路况+不良天气的提示），以及车内的环境控制（如声音、气温）需要更加敏感。

车载系统的设计相比于移动端有着更明显的约束，不论是从空间（使用环境）、时间（三秒原则）、行为（交互方式）、心智（心理诉求），都有着明显独特的场景和特点，要做好车载系统设计，我们需要有丰富的同理心以及亲身体验并反复验证设计。

图片来源：https://dribbble.com/czx

1.2.2 信息获取效率

同样，现在的智能汽车，信息呈现的方式，主要也还是视觉为主，听觉为辅。在还没有完全实现自动驾驶前，信息呈现层级保持不变。

在汽车行驶的过程中当中最高优先级是视觉，时刻要观察道路，查看导航。听觉辅助也是很有必要考虑的场景，通过语音反馈司机需要获取的信息，能让司机尽量保持视觉焦点在路况上。多场景的融合考虑信息获取的效率，能减少在开车过程中的安全隐患。

1.3、完整性原则

将页面信息根据某些关联性，分区块进行显示，这将有助于用户更容易的建立信息位置记忆，用极少量的时间查看车辆状态，减少搜索信息带来的注意力分散，保障驾驶安全。

1.4、简单学习原则

面对C端用户，设计师要考虑尽最大可能使用符合用户习惯交互方式，减少学习和适应。让驾驶员更有安全感和便捷的操作。如果交互界面改变了，用户极有可能必须从头开始学习一些基本操做。在市场竞争压力这么大的情况下，用户很容易就转向自己接受程度高的产品。随着屏幕越做越大，需要驾驶员操做的功能也越来越多，所以驾驶员会因为复杂操做，面临交通路况拥挤的情况下的额外压力。

1.5、信息可视化原则

尽可能的采用图像化/拟物化风格，避免或减少使用复杂的、过于专业的、技术性的图标和术语。

1.6、情感化原则

马斯洛需求指出，人们需要动力实现某些需求，有些需求优先于其他需求。我们当下在满足基础需求后需要的更高阶的需求。情感化设计是用户体验和需求金字塔的最高层级，情感化需求也是必然的需求。在移动端，情感化的体现主要还是视觉层面，比如加载过程中的动效、缺省页的插画、异常状态的提示等，还有就是和品牌的结合，增加用户对品牌的认知。

而对于汽车而言，它是一个空间，就靠屏幕里的视觉元素是远远不够的，应该从整车的角度去分析，通过五感（视、听、触、嗅、知）创造更丰富的全局体验，比如可以根据自己的驾驶需求和个人行为习惯，自定义氛围灯，香氛、语音等。

汽车IP

汽车IP用虚拟的人物语音来扮演管家的角色，功能包括了记录车主的驾驶习惯，不断优化程序来契合车主习惯，让车主有更好的驾驶体验。

比如蔚来的nomi，既可以陪玩陪聊，还有表情互动，若是加上管家功能，汽车岂不立马变身驾驶员最好的伙伴？看这小表情，是不是还挺可爱、暖心的哇？

2、分场景

在讨论如何对超宽一体屏进行体验设计前，我们需要对人在不同场景下的多样化需求有大致的了解。为此，我们将人与车空间关系的场景划分为四大方向依次是：生活、娱乐、办公和共享。

如生活场景下，全家出游，疲惫的人可以直接在车上睡觉休息，无聊的人可以玩游戏，车内空间采用多音道技术，不同的音道技术可以避免彼此干扰。除此之外，还可以起到保护隐私的作用，满足每个人对个人空间的需求。

在娱乐场景下，人可以进行多项休闲娱乐，比如：看电影或者读书看报，其中使用超宽一体屏观看电影时，大屏会给人以良好的观感体验。

在办公场景下，人可以在驾舱内进行各项办公活动，诸如：视频会议、电脑办公、商务信息处理等。

在共享场景下，车不仅可以是运输人的移动工具，还能成为运输货物的移动工具、移动商城、移动酒店等等。

3、交互方式

3.1触控：

这里分两种，一种是通过按键控制；一种是通过触屏控制。都是通过不断的触控功能按钮行程锻炼肌肉记忆，现在的趋势越来越趋向重触屏，轻按钮，这样不仅系统迭代成本小，功能可以动态分布。但是对于一些精准调节的功能还是按键控制好一些。

微软 的Surface Dial可以给我们很好的启发，智能旋钮可以解决大部分屏幕调节的不精准的痛点，而效率又高。

3.2语音：

在汽车人机交互中，语音交互被认为是车内场景下最自然的交互方式，而语音交互需要一个载体来传达多样化的情感。

语音控制的前景主要在于两个因素，一个是可以把除了界面以外的利用起来，一个可以与HMI自由交谈，二是最小化HMI手动操作产生的干扰，增加安全性。

3.3手势：

手势交互是对语音交互、触控交互的很好补充，能够让车主通过简单的手势和语音就能完成车内的交互任务，也是能够增加交互趣味性、表达情感、传达情绪的另一个自然交互方式。

常用的手势：单指滑动（上下左右）、双指滑动（左右）、五指抓取等。

HMI的交互手势不同于手机和IPAD，手机和IPAD握在手里，左右手都可以操作，多指组合的可能性也多，而HMI的手势定义，更多的是需要满足驾驶员的使用场景，屏幕是固定在车上的，要规避掉一些不方便的手势。比如双指往上滑动就很不方便，向上推不灵活，也有阻力。

五、六大车载系统开源网站

大家要是想了解的更深入，或者想针对于某个平台去做设计可以参考一下开源网站。

1. 阿里 Alios 开放平台

https://miniapp.alios.cn/index#/document

2. 百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 腾讯-车载小场景 (私我领取PDF)

4. 谷歌驾驶

https://developers.google.com/cars/design/design-foundations

5. 苹果 Apple Car Play

iOS – CarPlay 车载

6. 华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902

六、设计开眼

如果同学们还是对中控设计的设计标准没有一个概念的话，建议多去看些现有设计，去展厅试驾试乘实车，感受下交互，或者在网站上看看视觉不错的界面设计都是可以的。

部分图片来源于https://dribbble.com/czx

图片来源于网络，侵删

今天的分享就到这里！接下来我会分模块去跟大家讲解欢迎持续关注

欢迎大家补充交流！

原文地址：站酷

作者：郝小七

 转载请注明：学UI网》HMI设计需要遵循什么设计原则？

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

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

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

▽

这是今天一个学员发来要修改的海报，不管是重新还是修改设计，最重要的是能从图中分析问题并进行改正。

1、主体不够明显

文字在整个版面中的占比过大后，挤压了主体视觉的产品展现，弱化了视觉信息。

2、信息缺少层次

当文字越多时，就越要将内容的主次进行有效的区分，让用户在阅读画面时，清晰直观的体现出文字信息，而如果所有的文字都一样的大小并且每段文字之间都没有很好的间隔和空间的留出，这就容易造成阅读的障碍。

3、背景不匹配

高饱和度的色彩虽然看起来鲜艳，但不代表就一定适用于所有的物体和设计中，比如画面中的质感和主体的关联，就很难体现出来。

4、字体不统一

字体是要与主题、风格的调性形成一致性，当一个画面中使用了非常多的字体在进行展现时，不仅无法展示出设计的美观，也降低了整体的和谐感。

当分析完这张图后，我们用两种构图技巧可以在最短的时间内快速改正以上的问题，这里我做了2个修改示例供大家参考。

示例一

1、首先我们运用三等分的构图方法，也就是将画布分成三个同样等分大小的区域。

2、将重要的文字、图形或者物体分别置入进这三个区域中。

3、这时会触发新的问题，左右以及部分过多的留白应该怎么处理，可以将一些次要的文字或点缀装饰性的图形搭配在上面，以补足留白过多的问题。

4、之前我们分析修改前的海报中提到，主体被压缩后不够明显，在这里面我们需要一个能明显被注视的主体。

一个牛丸很孤独，很孤独。

它需要人陪。

于是，用手给它搓一下。

一只手，肯定不行，得两只手，但干搓也太难受了。

还得加点水，让画面多点有趣的联系。

就这样，海报原本的问题就这么以合理的排版方式解决了。

示例二

利用的是对焦线构图的方式，这次我们以主体放置为先，看看后面不同的版式变化。

还是一个牛丸，很孤独，很孤独。

它需要人陪。

于是，我找到了它的同伴陪它一起。

同伴说咱俩有点无趣，要不再叫点人一起玩。

于是大伙纷纷跟上，并给它们加了点动力。

对角线的引导会帮助我们加深被引导的内容记忆，所以我们放置了LOGO，并且四周分布了信息内容。

随之而来的就是新的问题出现了，

下面很空，看起来它也很孤独。

于是我携带着它们，穿越季节，掠过高架，铺在留白的框架之间。

而信息主次的变化就在文字的大小、粗细、比例布局之间形成。

我们最后再看下两个示例中，不同的构图带来的变化。

这就是今天带来排版那点事！

原文地址：修先森撩设计（公众号）

作者：修先森

转载请注明：学UI网》版式教程 | 海报修改，构图版式的变化

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

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

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

1. 怎么算好用

用户觉得软件不好用通常是由于操作界面不符合常识，交互逻辑出人意料导致的。这里我们要引入三个模型的概念：实现模型，心理模型和呈现模型。实现模型是软件的内部运行原理，用户无需关心。心理模型是用户期望中完成任务的方式，呈现模型则是软件被设计来完成任务的方式。呈现模型越是接近用户的心理预期，用户的学习成本越低，也就会觉得这款软件很好用。

2. 理解业务诉求

有个很恰当的比喻：用户不是需要一把电钻，而是墙上要有个洞。后来的研究理论更进一步：还得搞明白为什么用户需要在墙上打洞，他要连接什么东西？能不能做成无线的？等等。

接到需求后产品经理一般会在 PRD 评审时向设计侧讲解需求背景和功能逻辑，在这个阶段我们可以了解到产品经理规划中的用户流程和使用方式。产品原型呈现的只是无数解决方案中的一种，了解了业务诉求再回顾原型方案，经常可以带来全新的视野，并由此推导设计方案。下面我们就看下如何从组件，结构，功能，状态几个层面解决设计问题。

一. 明确功能用途

1.1 信达雅的文案

文案是界面的重要构成，却是界面设计中最不被重视的一部分。很多软件之所以用起来有一层朦胧的隔阂感，罪魁祸首就是晦涩的文案。简单的纠正文案可能会带来焕然一新的使用感受。

• 信：语义准确，明确事件的主体客体。
• 达：避免无效或重复文案，减少被动语态，简洁通顺地进行描述。
• 雅：优雅且有涵养地与用户沟通。
• 配图：有些流程或者用词比较特殊，单用语言难以描述，配上图一目了然。

1.2 视觉线索（功能可见性）

图形用户界面诞生之初，界面元素对物理世界的模拟是为了便于用户将现实中的常识套用到虚拟界面上；拟物化通过质感暗示用户界面的交互方式；在扁平化时代，提供视觉线索仍然是必要的原则。拿拖拽操作来说，首先可以拖动的组件上要有把手，暗示可以被捡起。组件被拿起来时要明显扩大的投影样式描绘高度，并在列表中显示一条瞄准线便于用户精确定位。

再比如卡片式设计，和现实中的卡片相同，它可以明确地划分出功能和信息的关系。要注意的是，视觉分区越多，页面复杂度越高，设计时需要控制平衡。

1.3 熟悉的组件

用户点击下拉选择器的时候，自然会期望在周围弹开一个选项浮层，因为他们用过的所有软件交互都是这样。这个就是习惯用法范式的应用[注]，尽可能套用常规的交互方式让软件的操作容易预测，用户理解成本低。

然而在常规组件无法承载实际需求时，有必要跳出惯用范式，通过差异的视觉样式给用户思想准备。例如一些原型图中的选择器使用了下拉的样式，触发的却是选择抽屉或者弹窗。这种意外的发生或多或少会降低用户使用时的信心，因为他们再也不确定点击下拉后会发生什么。通过特殊与常规的区分，其实也维护了惯用范式的一致性。

二. 导航结构分配

你一定遇到过这种棘手的原型：页面导航又多又深，林林总总地铺洒在导航区和功能区，信息密度堪比柯林斯英汉辞典。页面导航是界面的基本框架，处理系统的导航方式是页面设计早期就需要完成的工作。

2.1 几种反例

• 主导航级数过多：视觉样式复杂，操作时需要频繁卷展。
• 内容区头部导航堆积：用户先看到的不是内容而是导航，浏览效率较低。
• 横纵导航分配不合理：不合理的结构会影响视线扫描和点选，且空间利用率低。以图中的结构为例，一级导航下不一定都会有二级或三级导航，就会导致页面版式差异过大。

2.2 控制一级导航深度

一级导航过深时，有必要进行降级。顶栏导航可以向边栏导航卸载。边栏导航是一级时，可将最低级的导航放到内容区吸顶；若层级仍然不够用或导航条目较多，可以再增加一个纵向导航。

2.3 平衡内容区导航

吸顶导航会占用内容区的纵向空间，但可以随时跳转。内容区内的导航性质更类似于筛选，能够随内容滚动，不便于随时切换。页签类型区别大或是需要切换对比时，可以将导航吸顶；页签下内容形式近似或需要更多浏览空间时，可以将导航放在内容区。

2.4 减少空间浪费

很多原型会习惯性地在页面顶部配置一个顶栏。实际上里面的商标，账户信息，设置等功能可以整合到边栏中，这样内容区上方会多一些纵向空间。

三. 合理布置功能

3.1 分级展示功能

比如一些的图表类页面主要用于浏览而不是编辑，这种情况下将操作隐藏到省略号或者汉堡菜单中，不仅可以减少信息干扰，还能避免误操作。

高级功能的隐藏很好理解，比如 macOS 的网络配置只显示基础的连接功能，DNS 配置等高级操作被整理到了一个按钮中。你可以想象如果所有的配置项都展示一个页面，对于用户日常联网操作会有多么不友好。

3.2 拆分功能

除了分级，当页面或区域内的功能过于集中时，可以进行拆分以降低信息压力。

分离检索与查看：列表同时兼具浏览与管理的功能，但在字段众多，空间有限的情况下，可以选择其中有代表性的字段在单元行中显示，便于快速扫描和管理，完整的单元行信息放到下一个层级显示。

分离表单区块：当表单存在区块表单时，可以只在表单中显示区块的预览，将区块的新增和配置放到抽屉中进行，由此减少功能堆积。

3.3 数据的编辑

涉及数据编辑的页面存在四种设计方式，需要综合考虑表单的数量，用户的操作频次和使用方式来判断采用哪种。对于此类问题的推敲，也可以在 StackExchange 的用户体验社区参考更多案例：

例1：https://ux.stackexchange.com/questions/28210/inline-editing-vs-edit-view?rq=1

例2：https://ux.stackexchange.com/questions/93159/view-mode-or-always-in-edit-mode

查看模式：带查看模式的页面视觉效果整齐，信息干扰最小，且不会误操作。但需要进入编辑模式修改页面内容。

直接编辑模式：用户到达页面时，数据就可以被修改生效。常见于设置类页面。该模式使用效率最高。但由于容易误操作且视觉信息冗杂，不太适合大型表单。

行内编辑模式：页面样式类似查看模式，当鼠标悬停在数据上，界面会提示用户此处可以编辑，用户点击后可以快速针对局部数据做修改。该模式只适用表单项少的情况。

实时保存：页面长期处于编辑模式，系统会自动保存用户的操作。常见于线上文档工具。该模式误操作风险最高，需要提供版本控制和操作撤回功能。

3.4 减轻视觉压力

业务层面上无法避免单页出现大量表单时，可以在视觉上分节。注意！和真正的分步不同，这里的只是从视觉层面对页面信息进行处理，没有流程先后的概念，所以尽可能不要拆分页面。以下图为例，通过视觉上的划分，即使在同一个页面显示同样数量的表单，版面空间的呼吸给予了用户喘歇的余地。锚点导航是个锦上添花的控件，空间允许时可以加上。

3.5 定制化交互

3DS Max 的四元菜单是一个很有代表性的设计，在视口右键时会围绕光标弹出4个内容敏感菜单而不是一个，这四个菜单显示的工具甚至可以自定义。普通系统在处理此类问题时，要么采用需要滚动的长菜单，要么用联级选择器分类。而这个设计的优越性在于，通过分类并同时显示四个面板，用户点击次数少，光标的移动距离短，大大提高了工作效率。

再比如 Spotify 底栏的探索页签，点击会进入音乐探索页面（顶部有搜索框），双击会直接进入搜索框，长按则会激活语音助手。这些定制化交互的特点在于，它们巧妙地简化了操作流程，但是用户不知道也丝毫不影响使用。

四. 补救意外情况

4.1 空状态引导

一个列表出现空状态的可能性有：

• 确实没有条目：如果能添加的话，可以提示用户如何添加。
• 应用了过多筛选器：提示用户尝试其他筛选方式或重置筛选器。
• 加载异常：提示用户刷新页面。

虽然后果一样，但问题本质不同，解决方式自然也不同，此时需要分别给出对应的引导。

4.2 异常引导

再没有什么比一行“操作失败”的提示更让人绝望，用户不知道哪出了问题，也不清楚如何解决。异常流程时有发生，此时系统的引导会起到至关重要的作用，它能够带用户走回正轨，减少无助感。

4.3 标明功能不可用的原因

该问题的重灾区是工具类软件，用着用着一些功能突然就灰掉了，只能慢慢摸索是哪里的问题。功能之所以不可用肯定有个原因，不论是直接显示还是鼠标悬停时显示，有必要要让用户明白原由或者如何解决，避免把用户困在死胡同。

4.4 提供帮助

新手教程特别考验用户的记忆力，尤其是在新接触软件的学习爬坡阶段，而且很难保证在一段时间不用后，用户还能记得如何操作。当系统引入了晦涩概念或复杂交互时，最好在该功能周围提供说明，或悬停时展示 tooltip. 使用户无需长期记忆，在用到该功能时又可以快速上手。

我曾经写过一篇介绍 Protopie 的文章，惭愧的说，由于日常项目中的交互大多比较基础，其实用到 Protopie 的并不是很多，重新打开难免手生。但这款软件界面上可以见到很多问号图标，点击即可跳转到详细的功能讲解文档，不论是对于新人上手还是发掘软件功能都很有帮助。

结语

图形界面的本质是人与机器交流的语言。与现实生活一样，我们倾向与礼貌体贴的对象沟通。所以下手设计时要尽最大可能从人类的本性出发，才能在业务和产品逻辑的限制下，为用户塑造更具亲和力的界面模型。

注：文章中均为设计时遇到的真实案例，为脱敏隐去了细节。三种模型和界面范式的内容整理自 About Face，分别在14页和240页, 有兴趣可以详细阅读了解。

原文地址：京东设计中心JDC（公众号）

作者：邢禹

转载请注明：学UI网》引起舒适！什么是好用的界面

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

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

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