前言

影响APP转化率的因素有很多，设计也是其中重要组成部分，那设计师需要如何应对，才能助力用户转化呢？从用户角度来看，助力转化就是扫清理解障碍，提升浏览意愿与顺畅度。

想要以设计语言达成以上目的，快速传达有效信息是十分重要的一环，接下来，我们结合案例，聊聊快速传达重要信息是如何通过节省用户时间来助力转化的。

01.为什么要快速传达

研究表明，人类在面对非自身兴趣的事物时，注意力只能高度集中 10 分钟左右，短暂休息后再次集中注意力的时间则为7-10 分钟[1]。

当用户使用服务类APP的时间超过这个阈值后，就会因为迟迟没有达到目的而产生焦躁情绪，随之而来的负面影响要么是跳出到其他APP，亦或者对软件产生厌烦感，而无论哪一种都不是我们想要看到的结果。这也就意味着，我们每次只有20分钟的时间让用户完成从筛选到下单的时间。

因此，在用户有限的时间与精力中，迅速的传达有效信息，不仅可以缩短用户从挑选到下单的流程，站在用户角度来说，因为可以快速的找到自己想要的信息，也可以让用户切实的感觉到这是“好用”的软件。

因此我们需要快速传达的理论依据就此成立：

02.如何快速传达

那么如何快速传达有效信息呢？方法有很多，今天我们重点阐述以下三个技巧：

接下来我们结合实际案例看看如何运用以上手段以达到快速传达的目的。

 · 塑造视觉焦点

什么是视觉焦点呢？就是画面中让我们能多停留几秒的视觉元素，可以是一个点，一条线，一个面，通俗来讲，就是页面中最引人注意的地方，视线上交汇集中的地方，这个位置就叫做视觉焦点，而焦点可以通过构图，色彩运用，比例等手段进行塑造。

接下来我们结合十一活动的实际案例说说如何进行焦点塑造，我们需要先构建合理的视觉层次结构，好的层级能使观者快速浏览信息，位于层级顶层的信息也可以在最短的时间内让人注意到。

根据人眼对画面的阅读习惯，位于顶部和正中这两个位置的信息会最先被注意到，我们应优先将重要信息放在此处，符合了阅读习惯之后，通过运用色彩对比，字号大小等差异化手段，可以将信息的层级提高。

大字号更容易让人一眼看到信息，因此就算是同处高层级的信息，通过内部字号大小的对比，可以进一步细分层级，让视觉焦点更加具体

饱和度与对比色的运用同样重要，我们将彩色的图片去掉颜色之后可以发现，色彩关系对画面层次的影响，通过对灰度，明暗和色相的使用，可以使焦点位信息产生视觉前推感。

视觉焦点在具体案例中的应用展示：

58到家活动

小结：通过构建画面层级之后，运用字号大小和颜色对比等手段做出差异化设计，可以快速将用户注意力吸引至焦点区域，并被引导着跳过次要区域，视线按从上到下，从左到右的顺序，在各个焦点位中跳跃，从而达成我们优先传递重要信息的目的。

· 前置思考过程

我们平时在想要达成某种目的时，需要先获取大量信息，在脑内罗列整理，然后归纳出有用信息后，再进行处理。

用户在使用APP时也是这样，比如想点餐时，要挑餐厅，挑口味，挑菜品，而这一系列的信息整理过程是十分繁琐又消耗耐性的，正因此，我们才经常面临：不知道吃啥啊 这样的难题。

而这个思考过程是可以通过设计语言来简化，甚至提前完成的。通过将页面中的信息分类后，将同类信息放置在不同组块中的相同位置，使用相同的颜色和格式，会帮助用户形成阅读惯性。

 结合十一活动案例来看，每个组件中都会包含有几类基本信息：产品名，利益点，和下单跳转按钮，每个组件中的信息都在固定的区域展示.

同时用高饱和度的红色来强调，在这样的固定排列中，用户想要取得什么样的信息时，可以第一时间去固定的位置寻找，大大提高了信息获取的效率。

前置思考在具体案例中的应用展示：

小结：通过将画面中的信息整理并归类，我们可以缩短用户的信息获取与脑内整理归纳的时间，让用户将有限的时间更多的放在优惠对比与决策中去，这不但有助于提高下单率，易读的版式也更容易让用户产生“好用”的感觉。

· 米勒定律[2]

我们先来看以下两段数字

是不是后一段更容易记忆，这涉及到一个叫“组块”的概念，人脑记忆一组信息的时候，这组信息内的元素数量小于7±2时最容易记忆，具体数量因人而异，老年人的记忆数量会显著降低。

因此一长串数字看起来毫无规律难以记忆，而3个数字一组分成多个组块后，则容易记忆很多，同一组块内的信息越少，越容易让用户记忆深刻。

这个定律对设计画面同样有着重要的影响，一个板块中如果包含了过多的组块，不仅会让用户对这个板块的内容难以记忆，也会因为信息过多且没有主次而大大增加筛选成本，用户将时间过多的花费在筛选上会延长下单之前的流程，也会提高下单之前的跳出率。

结合我们的页面设计来看，每一区域内的组块分布都不超过5个，同时组块内的信息类别也只有图片、产品名、简要介绍与下游链接4部分组成，通过做减法，让重要信息可以迅速被提取，更容易被记忆。无论对于新老用户来说，都可以有效的降低筛选成本，新用户能更容易理解板块功能，老用户则更容易记住自己想找的功能在什么区域。

米勒定律在具体案例中的应用展示：

58到家电商首页展示

 小结：通过简化板块中的信息类别，能有效缩短新老用户寻找服务的时间，同时老用户也更容易记住想要的板块在什么位置，下次再使用的时候，迅速触达。

03.写在最后

作为设计师，兼顾商业化与用户体验是我们的必修课，好的设计不仅仅是要“好看”，更需要兼备用户与产品两方面的功能性，将视觉语言与心理学、行为学的结合运用，既可以有效的提升用户体验，提高粘性，又能缩短下单前的必要流程，提高转化率。

注释：

[1]出自《教书育人》2016年1期38页，【运用心理学规律提高课堂学习效率】章节 

[2]米勒(Miller，1956)的分析，人脑处理信息有一个魔法数字7(正负2)的限制，也就是说，人的大脑最多同时处理5到9个信息(chunks)。原因是短期记忆储存空间的限制，超过9个信息团，将会使得大脑出现错误的概率大大提高。

原文地址：58UXD （公众号）

作者：环铁艺术家

转载请注明：学UI网》三个小技巧，轻松提高设计转化率

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

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

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

特别有仙气的名称和颜色，长春花蓝是一个全新创作的颜色，代表着一种自在的信心和大胆的好奇心，期望激发个人的创意与创作力，拥抱充满可能性的未来。

当很多网友在讨论这到底是蓝色还是紫色时，潘通表示它是蓝色和紫红色的混合，将前者的「恒久」与后者的「活力和兴奋」结合在一起，并展示了多种配色组合方式。

其实这种分不清具体色系的颜色也出现在2001年潘通为Tiffany打造的独有品牌色Tiffany蓝，同时也成就了这个品牌。

很多女生买Tiffany大多为了这个颜色的包装。这个品牌色在潘通色库中是找不到的，除非是Tiffany授权，否则任何印刷厂都无法印制。

潘通就像统治了色彩世界一样，只要跟潘通合作过的品牌色都会火，比如星巴克、可口可乐、腾讯企业官方色、华为P10的手机、欧拉汽车的粉色、五菱mini的马卡龙色等等。

到底潘通为什么会这么火，而潘通到底是家什么公司，我们今天就来科普下。

潘通介绍

Pantone的前身是一家印刷品公司，创始人劳伦斯·赫伯特（Lawrence Herbert）原本是在一个小的广告印刷公司做兼职。

同时拥有生物、化学双学位的他利用自己的专业知识简化了油墨生产流程，并且帮助公司的印刷部门实现盈利。

后来一想，印刷部门盈利都是靠我，不如就自己单干，于是花费9W美元把这个印刷部门也买了下来，并命名为潘通（Pantone）。

但在销售自己生产的颜色时，他经常发现会与客户需求颜色信息不对称的问题，比如客户需要一个湛蓝色，而油墨厂可能无法调制出与客户需求一样的颜色，就会导致在很多色彩上认定的误差。

他意识到解决办法就是建立统一的色彩系统，每一种颜色都用数字代号来表示，比如设计师与印刷厂说，我要印制一个例如007颜色，而印刷厂只要拿着色卡找到与型号相符的油墨进行配置，就可以得到目的颜色，这样会极大的降低颜色的试错率，对印刷厂也可以减少库存，缩减成本。

在1963年，第一代潘通（Pantone）配色系统

（简称PMS）上市

接下来的20年，潘通逐步建立起了一整套色彩标准体系，使原本模糊不清的颜色概念发展成一门精准的科学，减少了设计师、制造方、零售商和终端客户间的沟通成本。

因为便捷的色彩系统使用，应用人群也越来越广，这一套配色系统为潘通赚的盆满钵满，潘通也逐渐被市场认定为色彩标准的代表，就像国际通用货币一样的主导地位。

可赫伯特的野心不仅仅是这样，潘通建议所有的色卡用户每年都购买最新版本，理由是印刷的油墨会随着时间的推移而变黄，从而失去精准度。

呃，虽然有点道理，但一看这色卡的价钱（割韭菜还是你狠），于是“卖色卡”成了一个持续带来现金的业务。

但是大众也不傻，心想只要买一本色卡回去就能用好多年，于是潘通利用色卡所能涉及到的平面设计、家居装潢、服装纺织、工业产品的庞大人群便渗透到大众。

在千禧年开始发布了第一个年度代表色，将天蓝色命名为千禧蓝（Pantone 15-4020）。

并且植入到了《穿普拉达的女王》电影中，成为了潘通里程碑的时刻，这一招是真绝，因为电影与时尚行业是最能传播到大众市场的，加上各大品牌与潘通合作的专属色大火。

从这一刻开始，潘通成为了全球色彩趋势的老大，之后的潘通每年都会推出一个新的年度代表色，每个代表色都有单独的色卡。

利用每年的色彩流行趋势影响着众多产业的产品开发与采购决定，包括服装、家饰纺织品和工业设计，以及产品、包装和平面设计。

而作为商家想跟时尚潮流就必须使用每一年的色卡，比如今年的长春花蓝，潘通的色彩帝国已经在影响着全球的消费心理和时尚变革。

最后来看看长春花篮的色彩

不得不说这颜色确实挺好看的

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

作者：修先森

转载请注明：学UI网》潘通（Pantone）是如何靠“色”赚钱的

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

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

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

 01.  

动效，让点赞与众不同 

动态表情为社交场景带来更活跃的体验，使得交流过程变得更加趣味性。一个动态的表情不仅活跃了氛围，也使得通过简单的一个符号代表了千言万语。

最近在使用钉钉 APP 进行聊天的过程中，发现输入框的大拇指图标在长按的时候结合了动效的变化，对话场景中出现的大拇指表情会随着长按而增大。结合动效和长按手势，为点赞的图标增加了不一样的趣味性，带给用户不一样的社交体验。

02.  

动态提醒，增强消息的关注度 

各类通知/消息在产品中随处可见，红点提示刚出现的时候还引起了用户强迫症，短时间内也增强了消息的阅读率。随着红点效应逐渐淡化，未读消息的点击率逐渐降低，大家都在尝试更多提高关注度的形式。

支付宝在消息模块的服务提醒中，采用了动态形式提高关注度。当用户点击消息进入界面时，小铃铛图标会左右晃动，以此来吸引用户的目光，达到增加关注度的目的。

 03.  

图标动效，让你脱颖而出 

在金刚区众多的业务模块中，想要突出重点模块的关注度，采用动态图标是比较常用的方式。采用动静结合的形式，会让动态表达得到突出。

比如 Keep App 将活动挑战图标动效化，在不改变配色规则和图标设计规范前提下，依然可以达到突出主题的作用。

 04.  

博人眼球的动态悬浮广告 

在不破坏产品结构的前提下，融入广告的做法中，悬浮层广告是较为明显的形式。通常是静态异形和动态异形较多，而动态的关注度相对更强一些。

比如 Keep App 将活动的折扣信息以悬浮层的形式表达，既不会占用太多空间（随着滑动会隐藏显示），又能吸引用户的关注度。如果用户觉得影响操作，也可以直接关闭，就不会反复提醒而形成干扰。

 05.  

内容模块结合动效替换突出存在感 

在一些内容量比较多的产品中，比如电商产品，很多内容模块都是百花齐放。都想要突出自己模块的存在感，带来更好的流量引入。而动效的结合也是不错的选择，但是需要考虑动效的干扰度。

当当 App 在突出今日抢购栏目时，为了不影响临近板块的干扰度，利用动效转场来替换展示的商品信息。缩放替换商品时的动效既能达到差异化，也不会破坏整体的结构，算是一举两得的设计解决方案。

 06.  

微弱的动效也能呈现有温度的设计 

有时候在进行产品设计的时候，动效带来的关注度并不是需要很强的表现力，一些微弱的动效依然可以提升产品体验，带给用户更有温度的设计。

自如 App 整体的设计都是做得非常不错的，在“我的”板块头部区域，结合背景插画视觉感也是非常不错。插画中部分元素的微动效增强了生活气息和真实感，让用户感受到这是一款有温度的产品，提升用户的好感度。

 07.  

动态感十足的底部标签栏 

图标动效运用到底部标签栏十分普遍，在这个频繁切换的操作中，动态的形式可以带来更强的趣味性和关注度。

优酷 App 底部标签栏采用多种颜色变化转场，结合路径动效带来动感十足的体验。首页图标还结合了刷新的功能，方便用户进行内容的刷新，增强用户体验感。

 08. 

 拓展功能的动态指引设计 

针对一些功能体量较大的产品，会经常结合一些隐藏式设计，拓展出更多功能操作。通常默认为展开状态，在滑动浏览内容时隐藏，通过动效吸引点击展开，不会造成主内容的干扰。

比如平安口袋银行底部标签栏上方的拓展功能区，动态形式的展开与隐藏方便用户浏览主页内容。个别内容采用动态设计（点我抽奖），突出其点击欲望。动态设计不仅提高了功能的曝光度，也能引导用户操作，将繁琐的操作变得更便利。

 09. 

 结合动态 IP 的下拉刷新 

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

 10. 

 图标动效带动局部功能的关注度 

对于一些局部功能或者模块占比较小的栏目，为了提高曝光度，获得用户的关注度，动态的形式是比较常用的方法。通常会在图标部分、文字部分、装饰元素部分等进行动效设计，带来的效果也是显而易见。

比如 QQ 音乐在“我的”模块中，将活动中心、会员中心、每日签到的图标采用动态设计形式，虽然几个模块占比较小，但是依然能够获得用户的关注度。

 小结 

动效表达在产品设计中的应用越发普及，不仅可以强化功能的关注度，也能带给用户感官体验上的升级。优秀案例的积累和分析，有助于我们掌握更多的表现形式，灵活的运用到项目设计中。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》发现了10个非常棒的UI动效案例

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

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

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

01. Behance

https://www.behance.net/

Behance 对于设计师来说并不陌生，作为国外的一大设计平台汇聚了众多的设计大佬，分享了很多高质量的设计作品。

对于 UI 设计师来说，这是我们需要定期访问的网站，里面很多 UI/UX 设计相关的作品都偏向于成套的作品输出。不仅可以让我们学习全案设计的思路，作品包装设计的思路和处理技巧也是非常值得学习的。除了 UI/UX 作品以外，还包括平面、图形、品牌、插画、摄影、动画等等作品，并且质量都非常高。

成为优秀的设计师离不开灵感的积累，这个网站绝对是高质量灵感来源之一。

02. Dribbble

https://dribbble.com/

Dribbble 相信很多喜欢 UI 设计打卡的同学比较熟悉，汇集了大量设计师的一些日常创意作品。该网站不同之处是发布作品需要邀请码，就是需要有邀请码的设计师邀请加入才能发布作品，获得邀请码也相当于设计能力获得认可。

整体作品的质量还是不错的，如果当你设计时没有想法，这是一个不错的灵感采集地。

03. Pinterest

https://www.pinterest.com/

这绝对是一个灵感采集的绝佳网站，经过众多用户的长期积累，已经汇集了全球大量的优质图片资源，其中设计作品也是非常丰富，且质量都普遍偏高。

你可以通过关键词搜索、画板关注、以图搜图等操作获得灵感，而且相似推荐还能延伸出更多类似构图、配色、主题等图片资源。点击作品还能跳转到原始出处，顺藤摸瓜找到更多优质资源，真的是非常便利。

04. Mobbin

https://mobbin.design/

这是一个汇集全球优秀 APP 截图的网站，有超过 50000 个优秀 APP，节省了下载应用的时间，对于 UI 设计师来说非常实用。

同样的应用还提供了 iOS 和 Android 两个不同版本的截图，简直非常的人性化。这是一个使用起来非常简单的网站，海量的设计必将开启你的灵感脑洞。

05. Medium

https://medium.com/

这是国外的一个分享专业文章的网站，各行业的大佬们会在这里分享自己的经验和心得，带给新人很大的帮助。作为设计师来说，一些设计技巧和经验的学习也是至关重要的，这里也汇集了很多优质的设计类文章，相信可以带给你更多帮助。

学习吸收国外设计师的想法也是一种扩充视野的方式，这个网站是一个知识吸收层面来说不错的选择之一。

06. Unsplash

https://unsplash.com/

这是个人非常喜欢的一个图库网站，在做一些设计作品的时候，我经常去里面搜索符合的图片填充我的设计。这个图库网站的图片都是可以免费商用的，而且你无需注册也可以下载使用里面的图片，是不是非常的人性化。

网站提供了很多的图库资源，在搜索的时候采用英文搜索资源会更丰富一些。

07. Zhongguose 中国色

http://zhongguose.com/

你知道茶花红是什么颜色吗?苋菜红你可能名字都不一定听过，中国有很多传统复古的颜⾊，这个⽹站相信会给你想要的答案。

当我们在做一些传统文化项目或者需要用到国风味道的配色时， Zhongguose 这个网站列举了很多中国色，提供给设计师进行配色参考。

08. Designspiration

https://www.designspiration.com/

该网站除了通过关键词搜索图片内容以外，在搜索栏有⼀个调色板的图标，点击可以通过指定的颜色进行搜索相关配色的图片或者设计。在选择颜色的时候不是单一的色彩选择，可以选择几个配⾊组合进行搜索，对于设计师来说⾮常实用。

09. Adobe Color

https://color.adobe.com/zh/create

该网站是 Adobe 公司开发的，主要功能就在于超级方便的色彩选取。它提供免费的⾊彩主题，我们可以在任何作品上使用它们。我们也可以选择不同的调色规则，然后使用交互式色盘、亮度以及不同颜⾊模式的滑块来建立颜⾊。

10. 51学设计-设计规范

http://51xsj.cn/index.php?s=/index/design/categorylist.html

最后给大家推荐一个黑马哥自己的网站 – 51学设计网，本次主要推荐的是里面的设计规范栏目。为了方便各位 UI 设计师熟悉各大平台的设计规范，专门为大家整理了常用的设计规范合集，让大家更方便获取相关的资源。

当然，还有黑马家族平时推送的一些文章合集也收录在里面了，还有设计书籍栏目也是不错的选择。

小结

灵感的积累来源于日常的不断吸收和总结，今天分享的这些网站如果大家可以经常去逛一下，相信可以带给你很多收获。本期先给大家分享这 10 个网站作为抛砖引玉，希望可以带给大家更多帮助。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》UI设计新人必须要善用这10个网站

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

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

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

Fiori

在SAP的 Fiori 设计系统当中，同样它也进行过多次的改版：

从最初的 Fiori 1.0版本的Blue Crystal

再到 Fiori 2.0版本的 Concept Design

而Fiori 1.4 版本的 Belize

而除了视觉风格的改变，更多是交互形式的一点点优化，而优化并不等于颠覆，更多是想在原本的设计框架下去调整错误的交互形式，在一些细节点上去做创新。

感兴趣的读者可以复制下方链接去看看 Fiori 的一点点改变：

https://zhuanlan.zhihu.com/p/54476972

Lightning

在 SalesForce设计团队的 一次 YouTube 直播分享过，讲到一个问题：如果想要对当前的系统进行一次小范围的迭代，所耗费的资金可能会达到数百万美金。

因为当你进行了改版过后，企业需要通知用户有哪些改版内容；而销售则需要对大型企业进行培训；作为产品设计者你需要引导用户，提示他修改的点；

你上面所做的一切并不能覆盖所有的用户，就像我这篇文章虽然大家都会转发，但是也不是所有的B端设计师都能看到（不过大家也一定要多多转发）。

而很多用户不知道，也就意味着他可能需要去翻阅帮助文档、咨询客服。

这一系列的付出都是需要成本，因为不能简单站在一个设计师的角度去分析改版，更多需要你多去理解改版究竟会带来什么，特别是产品成熟阶段。

而SalesForce 的案例并不是劝退设计师改版，而是在改版之前需想清楚自己的真实需求，哪怕是视觉上的好看，也要确定你的设计与其他版本之间的差距究竟有多少，来验证自己的设计。B端设计目前难点不在设计“好看”的页面，而是如何讲清楚你设计的页面是合理的。

Element Plus

这里也和大家聊聊 Element，不知道有没有细心的读者发现Element最近正在更新 Element Plus。

而关于Element的版本迭代，则是因为技术的原因。

如果你对基本的技术框架有那么一点点的了解，你就会知道 Element 是基于 vue 进行搭建的，而最近的Vue 3.0 的出现，也就意味着 Element 需要进行一次全新的迭代。

这是 Element 的技术迭代大背景下，而他的迭代过程，就需要将之前element系统当中一些基础内容给优化，调整来满足现如今B端市场的设计需求。

最近也在与 忠忠 一起负责 Element 的设计系统优化改版，如果你有设计系统相关经验，有充足的时间，可以微信咨询我。

总结

其实B端设计，更多的是优化、迭代，想要颠覆，会付出很多代价，正因如此它和C端不同，也正因如此才叫做B端。

原文链接：CE青年（公众号）

作者：CE青年

转载请注明：学UI网》组件固化、布局确定，如何对B端页面进行大的改版？- B端问答

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

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

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

B端用户有哪些

不同于C端消费产品的用户比较唯一，B端产品系统更为复杂所以用户角色也更多。本篇将从商业销售的角度来研究B端用户。

用户构成

B端产品的售卖大多针对一个组织/一家企业，往往存在着产品价格高、产品体量大、适用范围广的情况，所以商家决定购买的决策成本更高，按照组织层级从上向下、可以归纳出「决策者」、「运维者」、「使用者」 三个层级的角色。

• 使用者 —— 一般是企业内的内部员工，在日常工作时需要一些支持性软件来更好地办公。比如公司内的员工进行上下班打卡，这时他们对于考勤系统就是使用者。

• 运维者 —— 一般是企业管理内部的部门负责人或管理员，他们为企业提供支持性的服务，也是产品工具辅助完成工作的管理者。

• 决策者 —— 一般是一个企业的CEO/负责人，他们来决定是否需要支付一笔不小的费用购入一款软件，来更好地管理企业。比如某公司的CEO最终决定买企业微信还是钉钉，让员工进行内部沟通。

关于决策链

B端用户的三个角色，通过相互影响形成了产品购买的「决策链」。

这个“决策链”的作用产生在「是否购买」、以及「是否续费」两个核心问题上，通常我们简称为「新购」与「续购」。

在这里我还是重审下背景：出现的新购与续购概念，好像看起来已经脱离了本篇文章的主题，但这确实非常重要。对于B端产品，产研开发的核心目的还是将产品卖出，设计师作为产研的一员也需要背负这样的任务。所以我们需要研究用户，并且从商业的角度出发给出建议。基于此，新购与续购的商业概念可以帮助大家更好的聚焦用户场景与设计策略。

关于新购:

新购即指从未买过产品的商家、初次购买的过程。

对于新购，有的商家是自上而下决策：决策者主动有意愿有想法，从而购买产品。

这样的方式在购买后对产品的推广和使用更为容易，下面人员的配合度更高，产品取得的效果也就更好，更容易成为优秀的标杆案例。

有的商家是自下而上决策：从运维者主动有意愿有想法，并通过游说决策者、让其理解当前企业存在的问题、通过什么样的产品去解决，从而购买产品。

这样的方式取决于决策者获取到产品价值从而支持购入，如果没获取或不认同，则导致产品售卖失败；但没获取，却因为其它因素（比如竞品企业都在用了），可能会进行购买。但这样的方式因为不能获得决策者最大限度的支持，在推行起来会存在一些障碍和困难，因为B端产品往往牵扯组织内多个部门或人员，所以往往启动较慢，产品效果也不能保证。

所以在这个阶段决策者的态度与意见是非常重要的，运维者提供一定的建议，使用者通常没有话语权。

关于续购:

续购即指已经购买过的商家，续约产品的过程。

决定续购的核心标准：产品是否有效果，翻译到产研侧就是产品是否被用起来了。

在这个问题上，因为决策者几乎不会参与过程，所以更考验运维者本身的使用策略，同时也非常看重使用者的实际使用体验。

在决策链上，核心角色的建议权，往往比决策权还重，是否被用起来以及用起来的效果是一个从下向上检验的结果。所以在这个阶段，运维者和使用者的体验非常重要。

对症下药:

在了解基础的概念后，还要知道他们关心什么才能将设计对症下药。

对于决策者来说，拥有最终购买决定权，但因其并不是实际业务执行人，所以会考虑其他角色的建议与意见。他们关注营收增长、效率提高、减少成本等方面的问题。一般都是阶段性的查看成果，权衡产品价值。

对于运维者来说，是提供重要意见的核心建议者，也是实际业务的执行人会对产品有更多的要求和考虑。他们同样关注营收增长、效率提高、减少成本等方面的问题。但更多的是实际执行时的种种细节问题，具体些：管理方面的功能完不完备（比如社区中是否能精选评论、是否能自定给精选评论发奖励）、数据能力完不完善等等。

对于使用者来说，前期几乎只能被动接受，但承载着后期衡量产品实际使用效果的作用。他们关注产品便捷性、是否为自己解决问题。帮他们解决问题，他们才愿意用，产品才能用的起来、用的好。

如何寻找用户

对B端用户有一个大概了解后，我们再来了解下设计师如何介入用户、了解用户与用户相处，让我们的设计更打动人心。

不同于C端可以较为自由的选取用户，B端产品对于用户的选取与接触较为受限。

产品供应企业针对所服务的商家会提供一套售前+售后的服务体系，并配备了不同的人员分管各个阶段，例如有客户销售、客户成功、专属运营等。设立的目的是针对性的个性化服务，面对不同商家情况不同，所转述的产品价值甚至价格都会有所区别，当然这些信息也都非常敏感和隐私。

所以当你想寻找用户做调研时，一般要找到对应的商家运营，告知目的后帮你推荐合适的用户与联系方式，除此之外，在话术方面例如什么可以沟通、什么不可以沟通，如何回答敏感问题等更为严格（这个我们后文会再详细描述）。

如何接触用户

在认知用户基础信息所处身份后，还需了解如何与用户接触，本文将从接触时机与接触渠道两个方面阐述，内容来自实际经验总结以供参考。

接触时机:

功能类变动

• 在涉及操作的流程设计前后，需要跟进商家意见，看是否真正解决商家问题、减少成本或符合习惯。
• 在大模块页面优化前后，需要调研是否符合使用习惯或预期。

视觉类变动

• 在重要的视觉表现设计上（比如证书样式、皮肤设置等），需要调研是否符合其审美。

接触渠道:

除了寻求运营帮助推荐单个用户，还有一些渠道方式可以帮助你接触用户。

• 日常沟通商家群

一般一个商家会建立一个包含该商家的运维者、B端的产品经理以及运营的群，用来解决对接问题以及日常咨询，所以设计师可以通过加入这个群，就能了解商家如何使用、都在反馈些什么问题。一般商家反馈的最多的是某某功能如何使用和bug类。

• 产研反馈优化群

不同于商家群的人少而精的特点，问题反馈群更多汇集了各类技术与全部运营销售人员，用以处理运营在平时遇到的商家的各种问题、还有商家从故障平台等多个方面回收的使用反馈。这个群不仅可以帮你了解商家更关注哪些功能、还能通过技术对于问题的解答更加了解产品逻辑。

如何跟进用户

一般B端产品的用户数量有限，使用深度也更高，除了非常少频的调研问卷，更多采用访谈的形式来进行问题的挖掘与调研。这些跟进方式其实在各个领域已经非常成熟，作者通过自己的实际经验罗列一些方法和区别以供参考。

实地拜访:

通过实地走访，真实的走入用户的实际使用场地，近距离、近环境的接触用户。

操作指南

• 一般运营联系商家用户确定上门的时间以及目的来发起一次拜访。
• 拜访时在设计师提前准备好问题的情况下，过程中因为B端商家的使用场景往往不能预想，且面对面聊天会更加激发用户的表达欲，所以在深度追问的过程中，用户的回答可能不会按照预想的方向进行，会经常跑偏，此时需要根据你的目的视情况引导谈话方向。
• 沟通时，用户除了回答产研预设的问题、还会提一堆优化需求或是功能需求，此时要注意避坑，除了自己能力范围外的，不能擅自答应，但同时也需要给出比较委婉的解决方案安抚用户。
• 用户所有提出的问题、给出明确的后续反馈时间、并同步组内其它产研同学、及时跟进和反馈结果，不然商家会觉得一直在提重复的问题给不同的人，但没什么反馈，造成不良印象。

实地拜访好处是面对面增强真实感、更准确的解读用户需求，也能一次性了解商家几乎全部的用户类型，有更为全面的用户源可了解，同时更容易跟用户熟悉起来，建立长期的关系。坏处是，成本高、费时间。

线上访谈:

一般遇到没办法花时间实地拜访的情况，线上联系也是一种好方法。此时需要联系好运营确认好沟通诉求后，自行线上联系用户进行调研。

操作指南

• 联系前要说明来意、并预约时间（区别于C端直接打电话开始访问），一般商家都会很高兴（可能因为毕竟花了钱）。
• 需要提前准备好问题，一般会按照问题逐个回答，很少跑偏。

线上调研的好处是便捷快速的聚焦问题，坏处是对问题的理解还有回答的准确度判断可能没那么高。

调研问卷:

不同于C端场景，B端产品因为用户体量上的原因，较少用到问卷。但依然有一些必要场景会用到，比如针对某一功能的认知、产品的满意度等。

操作指南

• B端问卷的一个难点在于“如何发放”。C端一般在产品内留有问卷入口，因为用户量大、总会收集部分反馈，但B端用户较少，若要确保收集到一定量的问卷就得主动出击提高触达率。目前作者所在团队每周会针对运维者进行答疑直播活动，相当于每次直播都自动汇集一群目标用户，在直播过程中可以穿插问卷及入口，能够极大概率的收到反馈（当然填写奖励必不可少，可以准备一些公司周边小礼品抽奖）。
• 问卷如何设计按照普遍方式进行即可在此不详述。

如何维护用户

建立个人用户库:

通过以上方法我们已经开始并可以与各类用户认识、并进行调研了。做完调研后，我建议可以针对一些愿意发声的用户建立更深一层的关系，比如直接帮助他们解决设计问题、解答功能疑惑等，用户其实是乐于接受更多交流的。这样可以构建个人用户库，它可以帮助你避免重复的走预约流程，更加便捷的获取用户信息，让你对用户也能够更加了解。

关于B端的标杆客户

在B端产品迭代中，我们经常听到这样的话“我们要打造一个标杆”“目前这个功能还没形成标杆”等，这里涉及到一个词“标杆客户”。其实除了企业内部角色的划分，针对企业本身，也是有不同维度的划分，「标杆」相当于企业的一种分层维度。

什么是标杆:

标杆客户指该B端产品在商家内部推行后、使用的效果超过预期，对商家某问题起到了极大的正面作用。

标杆的作用:

• 验证产品可行性

只用通过标杆的建立，才可以一定程度证明产品能力是符合市场需求的。如果迟迟没有标杆产生、可能产品本身就得重新考虑定位与方向了。

• 为产品站台增强说服力

在很多销售售卖产品时，如果只是单薄的产品逻辑讲解，往往商家没那么容易理解获取产品价值，但如果有标杆案例，销售将标杆商家是如何运营、如何取得成果的流程阐述出来，基本上同行商家能够立马理解产品价值。

所以商家对标杆是很看重的，且要求会越来越高，不仅是同行标杆、有的还会要求有细分行业的案例给到（比如除了同样是家居行业、更希望有硬装行业、甚至家居-硬装-瓷砖行业的案例）

为B端用户做设计的避坑指南

关于「如何为B端用户做设计」又是一个宏大的主题，在此先不做系统性的分析和展开，仅提供一些经历实战后的小技巧以供读者参考。

• 产品模块对B端商家的作用不同、需求不同、要保证适配各类商家的灵活性
• B端产品往往复杂，更注重页面引导、新功能的解释，所以每做一个新功能对于“能不能理解”的新人引导设计非常必要（且是人性化的）

• 避免个人经验主义，B端场景往往不能共情，不能依靠个人生活经验去做设计判断
• 决策者和使用者有时会在功能模块上有利益冲突，需要根据该功能对产品购买的影响程度，来权衡利弊（参考决策链）

• B端产品是用户花钱买的，与C端的免费使用是一个本质区别，“买的东西去享受”和“免费的东西去享受”，感受与包容度是完全不一样。买，代表有所需，使用时，会有准确的预期，在产品设计时需要考虑该功能商家是否买单，是不是当初买这份产品所预期的，如果不是，谨慎添加，且要保证不增加任何认知/操作成本
• 商家更注重仪式感，对于某些一次性场景不可因频率不高而忽视视觉表现，比如产品初始化设置。

最后

B端用户既是普通消费者也是企业打工人，在使用B端产品时天然拥有两重身份、会有职业属性的因素存在，所以拆解好这两种角色并对症下药，就可以了解他们深入他们设计出极致的产品。

以上内容来自作者在实际业务中的探索、学习与实践经验总结，未必足够系统与细致，欢迎留言讨论其中内容~

声明: 本文插图icon部分取自酷家乐内部图标系统；部分C4D插图取自UI中国-闷闷小闷闷的图标分享。

原文链接：酷家乐用户体验设计（公众号）

作者：十禾

转载请注明：学UI网》设计师搞定B端用户初级指南

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

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

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

余秋雨曾说：这是一个浮躁的时代 ；我说：这是一个需要独立思考的时代。

我们每天忙碌的过着互联网民工起早贪黑的生活，每天接受着外界各种嘈杂的声音，都没完整的独立思考空间。为了缓解焦虑，有些设计师，每天拼命的学习，像海绵一样不断吸收知识，看似乎很努力，但是实际上是没有方向的努力，是平庸的努力。

回过头来想想，确实如此。无意义的学习浪费了时间还没有成效，这是最笨的一种方式。

在这个时代，我们需要保持独立思考，每个人都需要重新认识自己。比如我们想成为一个什么样的人？然后成为这样的人，需要具备的能力，最后付出行动，做就完了。

比如，你绘画比较好，那么就工作之余多去画画；如果你喜欢演讲，那就多参加一些演讲活动；又或者你只会画界面，那就大量做出更多精品作品。如果实在没有任何优势，那就去挖掘，先动起来，只有动起来才有变化的机会。

这种有目标的行动，用一分力，就能获得十分的效果，这才是聪明的做法。在努力过程中，不断收获正向反馈，激励你有更大动力前行。

2.建立壁垒，创造不可替代性

企业都在建立自己的护城河，建立竞争壁垒，那么我们设计师同样的需要这样做，创造不可替代性。如何构建自己的竞争壁垒，其实很简单，就是这个领域的知识体系。

知识体系的重要性，设计师在面对任何难题，任何场合，都能随机应变，并应用结构化思维去解决难题。

上图是大厂设计师第一层级的能力模型图，也是设计师的知识体系建构的底层模型，因此可以从这几个维度构建自己专业竞争壁垒，打造属于自己的知识体系框架。

这里，我们拿专业知识来举例，首先你对本职工作的专业知识了解多少？能做到什么程度？如果不足有没有思考过怎么去提升？任何一个小的点，做好了都能给我们产生很大正面影响。

我们在构建自己的专业知识模型时，勿要贪多，觉得自己啥都会，全能型，最可怕的就是不知道还说自己知道。

我们成长过程都是一步步往前走的，所以不急不躁，踏实稳步前行，方能走得更稳更远。

3.破圈，走出去

之前听到一句话，很受震撼，分享给大家，“你之所以焦虑，就是因为你的认知不足导致的”确实，我们所有的焦虑就是因为知道的太少了，对周遭事务理解有限。对于设计师来说，这个圈子本身很小，我们更要踏出去。

如果我们想要和同龄人拉开差距，那么破圈就是其中一个不错的方法。大家都挤在同一个地方，当你还没有竞争力时候，你的机会自然更少，所以努力走出第一步。

破圈思维的好处：“圈子铸就动能，圈子铸就眼界”，眼界开阔，思维开窍，自然对自己人生有了更多的想法和思路。

那么如何破圈呢？其实就是去认识更多的牛人，看看他们平时在做什么？怎么思考的？如何学习的？时间怎么分配的？可以从中找到一些适合的方法，然后加以优化用在自己的身上。

很多人说，如何认识一些牛人，以及该认识哪些牛人？我觉得不一定是设计师的圈子，其他行业圈子都是可以的。只要能帮助到自己，对自己有价值的都可以的。成事在人，我相信没有什么做不成的。

4.时间分配，保持初心，全速前进

What 是什么

简介：「加载提示」是用户在提交操作之后，程序响应结果前显示的动画和指示。

加载提示通常是仪表或温度计式的动画，用于显示某项耗时较长的任务的关键数据。例如，上传大型文件或图像，或者在移动设备上加载移动应用程序时的动画，表示当前的状态以及完成任务剩余的时间。

例子： 使用 Ant Design 组件-加载中 搭建的kitchen页面加载时的效果

Why 为什么

「加载提示」可以让用户通过一个指示器看到系统正在积极进行响应，让用户感受到当下的交互反馈是实时的，使用户有耐心保持在等待的状态，不离开当前页面。特别是当一个页面其他部分都不能操作的时候，更应该加上加载提示，这样用户在等待的时候会更有耐心。

When 什么时候使用

当一个耗时的操作会打断用户继续操作，或需要在背后运行，耗时超过一秒时就可以应用此模式。

原因为：

• 不到十分之一秒时，用户会感觉他们在与界面进行“实时”交互，软件的响应让用户感觉是即时的，没有感觉到延迟。
• 在十分之一秒到一秒之间，用户会感受到略有延迟，但他们会等待并立即继续。

• 超过一秒时，用户可能会认为他的操作对任务推进不起作用，导致其可能放弃当前任务。此时若使用使用加载指示，用户就能明确知道系统正在工作，他可以选择继续等待或者在此期间进行其他活动。

使用条件

• 当前的操作系统需要一秒以上时间处理
• 为了让用户明确知道当前系统正在运行

• 想让用户留在当前页面等待

How 如何使用

在页面中放置一个文字或者图形的指示器，指示当前已经完成的进度。告诉用户：

• 当前正在做什么；
• 已经完成了多少比例；
• 还需要多少时间才能完成；
• 如何停止这项任务。

有时加载提示的时间不一定十分精准，但是只需要保证出错时能很快回到准确的时间就可以了。当一个用户界面无法推断耗费时长时，可以使用加载提示告诉用户当前系统的处理状态。

Example 案例

案例一：Apple 音乐 APP启动页面

用户需求：选择在线音乐听歌

在用户进入APP时使用了加载提示动画，通常应用于轻微等待的场景下。目的是让用户知道“系统正在工作，请稍等”。

案例二：语雀和钉钉邮箱上传附件

用户需求：上传文件

在上传大文件时，等待的时间可能比较久，此时的进度条可以让用户知道当前的上传进度，用户能够预估大概还需要多久才能传完。

案例三：安卓端Google Play 商店

用户需求：下载软件

Google Play商店中将软件下载到用户的安卓设备上时会显示加载指示条，将文件大小，进度提示等信息都显示在上面，可以让用户知道需要多长时间，并可以等待、取消或做其他事情，稍后再回来。

案例四：Adobe Creative Cloud desktop manager

用户需求：下载软件

Adobe 在其macOS桌面的 Creative Cloud 应用程序中使用了加载指示。 在页面中放入了进度条，让用户知道安装进度。

原文地址：Ant_Design（站酷）

作者： 六六

转载请注明：学UI网》设计模式丨加载提示：如何让用户看到任务执行进度？

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

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

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

原文地址：百度MEUX（公众号）

作者：运营设计中心

转载请注明：学UI网》盲盒热潮-设计师必备工艺揭秘

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

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

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

什么是汽车HMI？

什么是汽车HMI呢？咱们先把这个概念拆分成两个关键词：汽车+HMI。

先来说一下HMI，HMI是Human Machine Interface的缩写，“人机接口”，也叫人机界面。

HMI(人机界面)是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

知道了HMI的定义后，我们把“汽车”这个前缀加上，汽车HMI是指用户与汽车系统之间进行人机交互的媒介。

当然汽车HMI并不局限于界面中，而是作为功能的集合，例如汽车仪表盘、HUD抬头显示器、交互媒介(语音、触觉)等，都是汽车HMI设计包含的内容。

聊聊汽车HMI的发展

目前我们说到的汽车HMI最早是在80年代初推出的。

在当时，普通汽车需要实现的功能在迅速增加，设计师的任务之一就是为驾驶员提供控制，保证驾驶员能够使用和管理这些新功能。

对于新功能的增加，主要遵循两种方法：

• 一是添加模拟控件，为新功能添加物理按钮。例如想在车内开空调，需要空调开关控制按钮；想在车里听音乐，需要添加换歌/调节音量按钮。
• 二是添加具有动态内容的汽车屏幕系统。例如展示车速的动态仪表、可以导航的动态地图。

第一种方法在德系车中比较流行，而第二种方法在美系和日系车中比较流行。

现在看来也是这样，虽然现在汽车都在用车载大屏来代替物理按键，但德系车的物理按键仍然要比日系车多。

别克汽车在1986年最早推出了车载屏幕系统，用户可以在单色触摸显示屏中控制电台和天气。

另一个典型的案例是日产推出的CUE-X概念车，具备可触摸和彩色图形的车载系统。能够看出来，当时车内功能控件的位置和设计跟现在的车内饰已经很像了。

现在的汽车HMI更像是汽车控制中心与娱乐系统混合的数字座舱，提供的功能更多更强大，同时兼备娱乐属性。

汽车HMI设计重点关注这些原则

设计美观有效的HMI，需要将艺术性与功能性合为一体。艺术性和功能性应该是平等和谐地协同工作，让用户沉浸在体验中。以下是一些基本的设计原则：

给用户控制感

汽车HMI应该始终在合理的时间内，通过适当的反馈，告知用户当前的状态。

这一点在用户开车时尤为重要。如果系统在没有通知驾驶员的情况下就采取某个行为，很可能会对驾驶员造成干扰，产生不好的后果。

驾驶员驾驶汽车，实际上就是在控制汽车做出各种行为。这既是一种控制，也是一种反馈，控制的是汽车的功能，反馈的功能带来的结果。例如利用指示灯、速度仪表等各种动态化信息，随时告知驾驶员当前的状态。

遵循“安全第一”法则

HMI系统主要的好处是可以帮助我们避免事故。现代汽车配备了许多传感器，传感器可以收集信息，再利用这些信息跟踪驾驶状况。

HMI系统可以实时监控情况，防止交通碰撞和事故的发生。系统对条件的响应包括：

反应型：系统会通知驾驶员刚刚发生的事，例如胎压过低或疲劳驾驶，并向驾驶员发出警告。

主动型：系统分析状况，预测可能发生的情况，并基于潜在的不良情况向驾驶员发出警告。例如系统分析天气状况，并建议用户避免在道路结冰的日子开车。

在设计系统响应时，重要的不是用大量信息淹没用户，而是要制定可靠的通知策略。发送给用户的反馈应该是：

• 有价值的：用户只看到他们关心的反馈。
• 及时的：反馈应该在需要时准确发送给用户。
• 清楚的：在设计信息反馈时，依据模块化和格式塔原则很重要，确保用户能够快速理解反馈表达的含义。这些信息越容易理解，安全性就会越好。

认知负荷最小化

认知负荷是使用系统需要付出的脑力成本、思考成本。用户在使用产品时付出的成本越小，说明这个产品至少是简单易用的。

话说回来，如果一个车载系统要求用户承担大量认知负荷时，说明这个系统存在很大的改进空间。

首先，不要去强迫用户记住汽车驾驶相关的信息。大家都知道，用户在短期记忆中不能记住太多信息，特别是多个容易混淆的功能或抽象的概念。

预先考虑用户在驾驶过程中可能遇到的问题，例如机舱温度是多少？现在在听什么音乐？怎么导航去商场？基于这些场景和问题进行系统的设计，以此来解答用户的问题。

其次，基于现有的心智模型构建HMI至关重要。为什么大多数汽车的仪表、中控的分布位置都很相似呢？

实际上这些都是在用户与汽车的交互行为中建立起来的使用习惯，遵循熟悉的设计方式，能最大限度减少学习使用系统所需的工作量。

减少不必要的分心

驾驶过程中，驾驶员没有什么理由去看手机，因为HMI能够做任何在手机上能够做的事情。可能会有人说，现在车载大屏尺寸那么大，会吸引用户的注意力，对驾驶造成一定影响。

所以现在越来越多的智能汽车推出各种车载语音助手，将声音——而不是触摸，作为用户与系统交互的主要媒介，通过语音来控制场景，例如切歌、拨打电话、调节温度等。

不言自明的导航体验

可发现性(在系统中找到特定功能)和导航体验应该在设计中处于最高级别。

现在很多车载系统面临着操作层级过多/过深的情况：用户需要点击很多次才能找到他们想要做的功能。

通过仔细规划系统的信息架构，将常用的功能放置在第一层级，可以避免这种情况。

改进视觉效果

在美即适用效应的影响下，用户更倾向于认为好看的、有吸引力的产品更实用。

设计师可以通过改进系统的视觉效果，改善用户对系统的感知态度。例如为导航渲染逼真的3D模型，能帮助用户更快地理解他们现在所在的位置和要去的地方，并获得很好的体验。

验证HMI是否合理，不仅要衡量操作完成的时间和发生错误的数量，还要注重用户满意度。

最后

用户对汽车HMI的期望很高，有时候甚至会依据汽车HMI体验的好坏来决定是否购买汽车。

如果你下次设计HMI系统，可以将这些要求作为基准：

• 给用户一种控制感；
• 提供良好的学习能力；
• 避免分散注意力；
• 不断了解用户偏好并提出更改建议；
• 激发用户积极的情绪反应。 

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》还不知道什么是汽车HMI设计？进来带你快速了解

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

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

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