差不多主义：凡事都觉得差不多就行了，不是特别注重设计细节。

如果每个部门都是“差不多主义”，我来给你算一下最终实现的产品会变成什么样（我们就按还原度80%来算）。产品 → 交互 80%，交互 → UI 80%，UI → 研发 80%，最后则：80% x 80% x 80%=51.2%，最后实现的只有预期的 50% 左右，这个产品还怎么用？

每个设计师都要成为“处女座”和像素眼，如果你只是为了想快速完成工作而搞出粗制滥造的设计，你的价值也很难体现出来。而且现在互联网已经发展的比较成熟，很多产品差异化并没有很大，如果你连细节都处理不好，要你何用？要在有限的时间内做出更精细的产品，打造完美产品，拒绝粗制滥造。

而且近几年很多公司对【产品体验】越来越重视，比如我司就把前端部门改名为体验技术部，旨在全员打造高质量、优体验、重设计的产品。研发都注重体验了，你再“差不多”就真的差多了~

同时，有的设计师不善言辞，在对接需求或设计澄清的时候不会坚持自己的想法，有时候就算自己是对的，也会在其他人强势的情况下败下阵来。所以作为设计师一定要敢于力争，强大的沟通能力也是职场晋升的一个重要表现。

二、拿来主义

抄袭：你直接叫我名得了。

开始之前我们要区分一下抄袭和借鉴的含义。我专门查了下词典，根据《现代汉语词典》的解释：抄袭是把别人的文章、作品私自照抄作为自己的去发表，并且实质性相似；借鉴是与别的人或事相对照，以便取长补短或吸取教训。区别在于前者是“照样抄录”，后者是“参考仿照”。

把借鉴当做寻找灵感对任何设计师来说都是一个自然的过程。

学过美术的都知道，画画前期都是需要临摹的，这个就是借鉴、学习的过程，如果你拿临摹的画去商用，那肯定会被打~

我们经常做的竞品调研就是借鉴的过程，去了解竞对都有哪些值得学习的地方，哪些地方做的不好不适合我们，我们可以创新的。

不要直接把竞对的产品拿过来抄，一些初级产品经理就会经常这么干，看竞对有什么，他们就抄；竞对是怎么处理了，他们就怎么处理。永远跟不上市场的脚步，别人都产品化了你才开始搞，吃屎都赶不上热的~

设计真的很辛苦，我们可以把别人的作品作为“日常练习”，去从中学习原作者是如何思考、设计的。如果你拿他做除学习外的任何其他用途，都是不允许的。

其实设计已经发展到了几乎不可能 100% 原创的时代，我们就是要把所学所见混在一起，创造出一些新的设计。解决方案永远不止一个，思维够活跃，就有千万种可能。

在数字时代，你拿别人的设计搞事情，是藏不住的，我平时发一些“曝光抄袭类”文章的时候，浏览量比平时都要高很多，大家对抄袭还是很关注的。

平时我在面试的时候，如果你是“拿来主义”，一眼就会被看穿的，不要问我怎么看出来的，看多了你也就能一眼望穿了。

借鉴总是好的！但不要复制TA的风格或元素，试着创造你自己的风格和想法，这样才是好的借鉴形式。

三、不拒先生：从来不拒绝需求

这种“职场好人”性格其实是非常可怕的。不是所有的需求都是合理的，也不是所有的需求你都能做。但只要你接下了，你就要负责到底。

新手容易犯的一个错误就是：不会评估工作量，leader 给你工作的时候他会有个时间预期，但有时候也不是完全准确的，你要自己评估在这个时间内是否可以完成，完不成的话就要 say no，重新规划时间。

还有一个比较容易犯的错是：leader 给你任务，你为了凸显自己工作效率高，来几个需求接几个需求，完不成的话就自己硬扛着熬夜加班加点，虽然说这样可以多接触需求快速成长，但长此以往，如果有个需求加班加点都搞不出来，你又承诺了没问题，最后没完成导致研发延期了，只能你背锅。

要适当的合理安排需求，不要工作一年，加出来三年工作经验，你这是卷谁呢？

在设计澄清的时候，别人反馈的问题做记录，然后思考合不合理，不要一有质疑声你就觉得自己的方案不行，就改改改，有的质疑是合理的，有的不合理，你要有判断，设计决策你来把控。

平时自己做好需求的时间规划，细化到小时维度，这样别人再问你有没有时间接需求的时候，你就可以理直气壮的告诉他有 or 没有。

还有一个需要注意的就是，跨部门的上级找你做东西的时候，一定要让他找你的直属 leader，保证需求的统一入口，这样对大家都好。之前我部门就有个设计师，别的部门领导就老直接找他做东西，然后回头我们老大找他要之前任务结果的时候，他才说没完成~

摸鱼法则第一招：我很忙，需求往后排~

四、多情：今天喜欢他，明天喜欢她

产品化的界面可不是你喜欢什么就设计什么的，要考虑整体风格。尤其是 B 端产品，风格统一和样式延展性是必要考虑的因素之一，你可以有个性化，但不要跟现有风格违和，适合的才是最好的。

当然了，这么说不是让你不要创新，是在原有地基之上创新产品。你设计的再好看，红杏出墙了有何用？新手和老手的区别，在于一个只关注当下，一个考虑全局。初级只会把当下做的尽善尽美，活灵活现；老手会在保证全局完整性的前提下最大化的产品创新和易用。

每年流行的设计风格是不一样的，专注视觉展现的产品来说，可以追随设计潮流，展现最新的设计风格是没问题的。但是像 B 端产品，风格迭代是要有时间周期的，而且大部分比视觉风格的周期要长，所以每次大改版的时候，要考虑未来的设计趋势。

刚才我也提到了，最佳方案永远不止有一个，找到适合自己产品的就可以，如果有一些方案都觉得不错，可以做 AB 测试，选出最好的方案做产品化。

鼓励多看、多学，自己思想加工好了融合到产品中，而不是一味地直呼：这个设计真 NB！我也要用！

五、感性大于理性

字面意思很好理解，之前我们都说设计师是感性的，但是当设计与商业结合，就不能是纯感性的了。任何的产品设计都是基于数据、基于市场需求。我们大部分设计师都不是艺术家，都在为连接商业而努力。

而且设计师也在向理性化慢慢发展，拿设计师的价值来说，之前是很难被体现出来的，现在因为和商业结合，价值慢慢的被体现出来、慢慢可量化了。

我们在做产品设计的时候也是这样，基于调研和分析来做产品，而不是天马行空，想到什么做什么。设计从感性逐步走向理性，也是一个成长的过程，一切以结果为导向，善用理性思维思考问题，会更让其他人信服。一切设计都有理有据，和别人 battle 的时候也不怂~

ps：在和女朋友交往中恰恰相反，切记~切记~~

六、妄想：可以创新，不要妄想

一切设计都是以结果为导向，YY 出来的飞机稿只能送到村东头的厕所里。我们在脑暴设计方案的时候，一开始都是天马行空，想到什么就写什么，但是最终都会聚焦到产品上，缩小聚焦点，最后产出可落地的方案。

设计师的创新能力是很重要的，为什么企业在招人的时候，会更看重年轻一些的呢？因为他的脑洞是打开的，有更多的 idea 迸发出来。如果你只是循规蹈矩的维护产品迭代，迟早会被淘汰。

设计本身就是一个开阔脑洞的一群人做事情，所以早些年设计师的价值是无法被量化的，近几年都在讲量化指标、结果导向，设计师的价值也慢慢的被量化出来。

一个好的产品设计师输出的方案不一定是最完美的，但是绝对是在能落地的基础上接近完美的。不够完美我们可以再优化，如果一直停留在 YY 层，永远不能落地实现，那你的价值何在？

我相信大家在面试的时候也都感受到过，线上作品远比飞机稿要重要得多，因为他可以验证你的方案是可行而不是你自己 YY 的，公司招你来是让你有具体产出的，不是来让你当艺术家烘托气氛。

我们经常会在大胆创新和为了功能上线的边缘试探，哪怕是多一点点的设计元素加进去，也是我们努力的结果。

要记住，我们是设计师，在飞翔的时候看清边界在哪，我们是带领世界品味走向的一群人，可以创新不要妄想。

七、炫技：装饰性大于内容本身

最好的设计就是不用设计，最好的设计是简单的。

部分设计师在出方案的时候，为了凸显自己的设计能力，会有意无意的增加一些装饰元素设计，然而页面的承载量是一定的，装饰性的设计过多会直接影响用户找到页面中的重要信息。好的设计不需要过多的装饰，苹果的极简风就很棒，一直沿用至今。

其实现在产品上并不是装饰的重灾区，作品集才是！我们团队在招人，每天能看到大量的简历，确实有很大一部分人为了凸显设计能力，把作品集做的五彩缤纷，整成了大杂烩，而且装饰性的元素、样机比以往工作项目的占比还要多，这不就喧宾夺主了吗？这样的作品集基本就无缘了~

在设计之前，一定要了解最终目标是什么，然后基于目标再拆分行动项，把不必要的内容直接砍掉，用户在浏览页面的时候，有效时间就 3 秒钟，3 秒钟没有找到自己想要的内容，就会流失。

我们只会吐槽老板的那句：“放大放大再放大”。其实深入想一下，他只是想要突出一个点而已~

不要捡了芝麻丢西瓜。

写在最后

设计中有很多很多的问题，我们也都是在不断的摸索中成长，今天给大家分享了几个典型的“罪”，希望引以为戒，哪怕其中一点对你有帮助，也不枉码这么多字~

今日金句：

在非洲大草原上，无论你是狮子还是羚羊，每当太阳升起，你唯一要做的就是奔跑。

叮铃铃~~下课！

原文地址：友设青年（公众号）

作者：Luckgg

转载请注明：学UI网》设计的「七宗罪」

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

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

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

“不行，这个必须在首页！另外我还有俩新业务入口，你想想办法”，业务方出于对流量的考虑，总是希望做加法。

“别整那么多没用的，我就想找个xx，剩下从来不看的”，用户出于效率体验，总期望做减法。

加减之间，是业务与用户对立而尖锐的需求，同时也是多类型服务产品首页设计的重难点。今天，就以“58首页设计”为例，与大家谈谈解题思路。

01.什么是多类型服务产品？

02.设计挑战是什么？

以58为例，一方面，业务工具属性强，且用户耦合性低。说人话就是，用户都是来找工具的，但由于AB业务关联度太低，用A业务的用户几乎不会用到B业务，AB业务分别拥有独自用户群。这也就造成用户期望更高的推荐精准度，页面上任何一个无关信息都是干扰，都是对连接效率的打折。

但另一方面，平台上的业务很多，还都想在首页曝光。而且随着各业务设计师的不断努力，连接的形式也在不断丰富，视频、直播、VR，从业务贴到聚合推荐，层出不穷。首页面临更大的信息承载压力。

所以，这类型产品首页最大的挑战，就是“多业务的曝光需求和用户的精准连接之间的矛盾”，如何才能在推荐技术不变的情况下，通过设计来应对挑战呢？

03.如何破解？

既然是信息传递和收取之间的矛盾，那我们就从“人-场景-信息”的对应关系入手，分析信息在不同场景的优先级和适合的颗粒度。

人-场景-信息优先级和颗粒度

1、用户分类

根据用户需求分为三类。

1）预装用户：非自主下载，不了解产品功能

2）服务需求用户：使用相对固定的服务

3）内容需求用户：获取本地或相关服务信息

2、按照用户区分场景需求

1）预装用户：建立产品认知、保留用户不卸载

2）服务需求用户：更有针对性的服务展示，尽可能少的干扰信息

3）内容需求用户：更多类型的内容展示

3、按照场景定位信息的优先级和颗粒度

1）预装用户：

采用运营曝光策略。保留一级主服务入口，帮助建立产品认知。同时曝光更多内容信息和留存向的运营功能，以提升留存率。

预装型用户信息

2）服务需求用户：

采用目标服务曝光策略。保留一级业务主服务入口，方便业务切换。但扩展目标服务的二级信息曝光度，用以缩短路径。同时增加动态服务模块，来跟进用户动作，服务于用户。

服务型用户信息

3）内容需求用户：

采用平衡曝光策略。保留一级主服务入口，方便业务切换。同时扩展内容曝光度。

04.设计思路

1、搭建扩展性框架：调整为顶部tab结构，释放更多定位信号，增加曝光渠道。

原腰部tab是对“原首页”内容的划分，现将整个“首页”置于第一个tab下，后续tab内容将与“首页”并列，从而释放更多独立的曝光渠道。

2、使用更灵活的组件：变形金刚与瀑布流。

首先，金刚位是一级服务入口的集合，且处于首屏上部，是非常好的建立产品认知的模块。将其原有打散在15个位置上的服务，按照大类聚合安置，更容易传达产品的主服务是什么。

金刚位结构对比

其次，为了应对用户精准简的需求，金刚也可以做灵活变形，曝光更多目标服务的二级选项。

变形金刚位

而瀑布流方式也为更多样的服务连接形式提供了承载能力。

列表与瀑布流

3、丰富的信息容器：

设计包含图、文、图文、VR、视频、聚合类目、动态服务模块等信息聚合方式的瀑布流卡片，同时加入即时推荐功能，让瀑布流具备包容和灵活的特性。

4、整合平台的运营能力：设计平台级留存向运营中心。

以往，各业务线运营功能深藏在业务页面中，用户往往需要通过较长的路径才能接触到运营功能，且用户也并不能发现平台上所有运营功能。这种分散式分布的方式，使得运营吸引力和留存能力上都打了折扣。现将所有业务的运营功能聚合，打造平台的运营中心，使发现路径更短，聚合吸引力更强。

原路径&现路径

05.设计展示

从依靠推荐技术让内容适应用户需求，到设计灵活可变动的组件来适应chang场景的信息承载，我们希望可以在产品和用户需求的矛盾中寻求更优的平衡点。

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

作者：环铁艺术家

开始学习啦！

教程步骤

1.打开ai

输入文字。鼠标右键单击，选择变换——对称，之后选择水平，并点击复制。

把文字镜像复制一个。

2.符号面板

整体旋转90°，并调出符号面板。选中文字，鼠标拖入符号面板备用。

3.画圆

用椭圆工具制作一个正圆

之后选择效果——3D——凸出和斜角。勾选预览，调整角度和凸出厚度。

之后点击贴图，勾选三维模型不可见，选择第3个面，符号选择我们刚刚拖进去的文字，也就是新建符号，点击缩放以适合，让文字贴合画面，点击确定。

再稍微调整角度，调到合适的位置，就可以了。

4.扩展外观

之后对象——扩展外观。

右键取消编组，再右键释放剪切蒙版。

这样就可以随意更改文字颜色啦。

看起来步骤很多，其实操作起来还是很简单的。everybody，学起来啊！

那小分享就到这里吧，下期再见哦~

原文地址：诗人星火宇宙（公众号）

作者： 星火君

转载请注明：学UI网》超喜欢，这个AI小技巧！

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

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

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

01 互补色的定义

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

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

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

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

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

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

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

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

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

02 互补色配色的方法

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

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

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

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

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

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

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

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

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

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

作者：邓海贝

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

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

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

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务