图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法，实现快速导航，解决语言障碍，最终提升用户体验。
图标作为一种设计工具，在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的，这些特征赋予了它们通用数字语言的地位。
在这篇文章中，我整理了10个简单又重要的技巧帮你设计出更专业的图标。
最小的图标大小通常是12 x 12px。以这个尺寸为基础，行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。
重要提示：当你设计图标时，重要的是要按100%显示的比例去设计，使图标完美像素并放大像素块查看准确性。
完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今，高分辨率显示器和视网膜显示器正变得越来越好，所以在不久的将来，对像素完美图标的需求可能会减少。但就目前而言，让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。
1) 像素网格对齐.
使直线部分完全清晰，并增加曲线和边角的清晰度。（彩云注：尽可能的使线条实心）
2)完美角度
有角度的线更模糊。创建图标的最佳角度是45°，因为形成一个角的像素彼此对称。
3)边缘清晰
直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。
为了让图标看起来整洁一致，重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。
理想情况下，线宽和间隙大小也应该相等。
然而，有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时，它就会发生。比如条形码这个例子来说，我故意使图标内的线宽和间隙大小不均匀，以表示条码的特征。
在UI设计中，对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时，规则很简单：在正方形和圆角之间进行选择，并对所有的图标应用相同的属性。
为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中，你可以看到打破这个原则是如何影响视觉感知的。
在电脑上看起来完美对齐和平衡的东西，在你的眼睛看来可能并不一样。
当我们把大小相等的正方形和圆放在一起时，我们会有一种不对劲的感觉，圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同，我们应该使圆更大(或减少正方形的尺寸)。
这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点，直到整体对齐看起来正确。在下面的例子中，你可以看到突出显示的图标看起来很大，尽管它与其他部分的大小相同。为了平衡这个集合，我们需要通过缩小图标的大小来调整突出显示的图标。
（彩云注：这个原则很多人应该都知道，但我发现也是在整套图标的设计中最容易出现的问题，当把图标汇总在一起的时候，这个问题尤其需要重视。）
我们经常在设计软件中使用中心对齐，这种方法没有错。但当涉及到细节时，比如图标设计，我们需要相信自己的眼睛，打破数学法则，以增强元素的平衡。
让我们以播放按钮作为展示。这个例子很简单，但非常能说明问题，因为形状越不对称，需要改进的缺陷就越明显。
我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是，大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动，它就越具有通用性。
（彩云注：KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限，彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ，感兴趣的可以去学习下。）
它如何适用于图标设计?
1）别使用文字
文本和图标的绑定减少了图标的通用性。此外，小尺寸的文本是可读性很差。如果一定要文本作为支持元素，使用工具提示和图标旁边的标签。
2）不要过度设计
不必要的复杂性阻碍了合理的表达，应该避免。过载的设计会将用户体验变成一场噩梦。
3）避免不必要的元素
只要确保每个图标在整体环境中是可理解和清晰的就行。（彩云注：比如已经是在邮件客户端中，就不需要再额外增加表示邮件的图标部分）
重要提示：在图标设计中合理地使用KISS原则，也不要把事情做得太简单，否则会影响功能。一个优秀的图标应清晰易懂。
图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是，这个规则非常灵活，只是作为参考，方便图标的设计在视觉上平衡。所以，如果你觉得你的图标不完全匹配这个框框，但看起来完全正确——相信你的眼睛！
框架是设计的“容器”。框架规范了一个统一的范围来设计图标，这背后有一些原因：
1) 大小
由于其几何形状，所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸，我们应该将它们放置在大小始终相同的框架中。
2)输出
框架内的图标与视觉中心对齐，这经常被开发人员忽略，因为他们经常根据实际的中心来调整图标，而没有注意到差异。这就是为什么用框架输出图标是至关重要的，当你按这个框架输出图标时，能保证视觉设计时想要的视觉中心。
3)效率
如果使用Figma，可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。
如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时，会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题，请设身处地为用户着想。
1）不要让用户思考
例如，如果他们不知道自己想要找到哪种花卉图标，那么就让他们看到一系列选择:鲜花项链，室内花卉，植物商店等。
2）展示关联图标
例如，如果用户想在相同的主题或类别中找到图标，他们可以快速地检查包含这个特定图标的完整集合。
3）使用标签
用户可能很难找到合适的词进行搜索，或者可能希望看到所有类似的补充选项，从中选择最合适的。例如，当一个图标的实际名称是“兰花花瓣”，你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫
最终应该导出SVG或PNG格式？这是一个关键问题。让我们来比较一下格式:
我个人的选择是使用SVG图标，因为它可以节省很多时间。但是，一定要小心缩小复杂的形状，并记住旧的浏览器可能不支持SVG格式。
到这里你应该已经学会了这10个图标设计要点，在你的图标设计中使用这些规则，相信会让你的图标变得更加专业！
彩云注：图标设计是一个设计师的基础能力，在彩云看过的无数份作品集中最普遍的问题也就是图标设计。今天这篇文章虽然非常基础，但千万别小看它，用这10条技巧重新审视自己的图标作品，相信会有新的收获！
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Hi，我是彩云。界面是用户在与任何产品、APP或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在UI设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面2个案例中，左侧的“购物车”和“库存2”太过于术语化，右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。
为了获得好的体验和UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在UI设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt's Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是UI中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使UI看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有2种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让UI看起来更加干净和优雅。用线分组的情况适用于类似Twitter、Medium之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。
（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
14. 搜索中的占位符要用好
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
高饱和度的颜色能形成强烈的对比。在暗黑模式下使用高饱和度会很刺眼，给用户很不好的体验。暗黑模式一般在晚上使用，因此对设计师来说，需要做的是让整个配色相对柔和，让用户感到放松。基于此，在设计的时候应该将饱和度限制在200-500之间。
(彩云注：这里的200-500彩云去查了不少资料，但没有找到最好的答案，这里引用的是Material Design中的颜色规范，感兴趣的同学可以自行查找)
在同一个界面，最理想的状态是只有一个最主要的关键按钮和紧跟着的次要按钮。这是因为如果一个界面上有太多这种行动按钮（CTA）按钮，会让关键操作淹没在这些按钮中，让用户不知所措。
17. 简化不必要的动词
没必要在菜单上增加动词和短语，用最少的信息写清楚功能就足够让用户理解了。所以，在菜单设计上要尽量避免增加无关紧要的词，这样才不会影响用户体验。
你可能注意到，很少有表单的字体大小不平衡，字体之间的类别尽量少一些看起来会更加平衡。在决定字体大小时，尽量规范字号的标准。比如标题（16px），副标题（12px），正文（10px），说明文字（8px），这些尺寸都是以2为倍数的。
尽管我知道要做好图标一致性，但在实际工作中依然经常犯错。很多设计师经常用不同风格的图标混在一起，这样会让整个UI界面的设计显得很不成熟。图标是为了让用户更有效率地理解事物。在使用图标的时候一定要注意图标的一致性，尤其是一些是一些风格细节。
这里也跟大家分享2个我自己常用的figma图标库：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
通常情况下，我们会认为一个颜色在深色模式和亮色模式下是用的同一个颜色值，但这其实是错误的。一个颜色在亮色模式下看起来非常漂亮，但在深色模式看可能就太暗了，反之亦然。解决这个问题最好办法是使用2套不同饱和度的颜色。
App的新手引导决定了用户第一次体验产品时的感受。在设计的时候，试着公开需要哪些具体步骤，增加”跳过“和前后移动查看的能力对新用户来说非常重要。
许多网站和App都是用图片驱动的，但在图片上直接增加文字内容有时候会被淹没掉。在图片上增加一个叠加层可以提升内容的可读性。
23. 信息部分露出
对于一些大屏设备来说，像笔记本电脑，平板电脑和智能电视，它们都有非常多闲置的空间。对于这些闲置的空间来说，尽量通过设计告诉它底部还有更多内容。这对UI和UX方面都有好处，因为空间的使用方式能够让用户清晰的知道所有内容。
为了让用户聚焦阅读，应尽量避免使用大段的长/宽行。保持短句和简洁能够增加内容的可读性。
（彩云注：这点用在你的作品集里也是很合适的，有些人经常使用大段的文字内容来描述，很可能直接劝退面试官）
Z字形原理，也就是大众所熟知的”古腾堡原理“，它描述了当人们看到一个均匀分布元素的设计时，眼睛的总体运动情况。通过这个原理我们知道，用户在内容上的视线是沿着Z字形来阅读的，所以遵循这一原理设计你想要核心表达的内容。
扩大点击区域，维护像按钮、单选、多选等控件的响应尺寸，如果你设计的点击区域太小会让用户点击困难，造成流失。
避免使用花俏和俗气的图标，它们会让整个设计显得非常不成熟，同时也是很难理解的。用上更简单的图标形式，会让界面更高级。
（彩云注：当然越简单的图标其实想画出彩会更难，另外也需要区分不同的场景，像一些运营类的图标可能会为了活动氛围做的相对风格化一些。）
选错文案，会让人们对于任务缺乏兴趣，根据上下文使用更合适的词组。
轻敲和点击有时候很累人，可能不如使用滑动、拖拽等手势操作，这些操作会让界面更简洁并且也能顺利地完成既定任务。
在探索酒店、目的地甚至是阅读任何文章时，用户经常都需要点击卡片。为了使得探索更加吸引人注目和干脆，避免使用长文本导致的滚动。相反，可以加一个阅读更多的按钮方便想看全所有内容的用户。
”邻近的物体往往被视为是同一组内容“。有时候为了把内容区分开的更清晰，尝试用线对相关内容进行分组。
（彩云注：其实有留白和不同颜色做区分也是可以的，建议根据自己的设计风格和具体内容来定）
在设计控件时，如果可以用图形可视化的地方就优先尝试把控件图形化，除了非常需要很精确的设置参数。对于价格范围这种，很容易将它可视化为滑块控件。
对一些人来说容易理解的东西，对某些人来说可能不是。因此，最好使用示例占位符来解释输入字段，这可以防止用户在填写内容时出错。
根据”系列位置效应“，心理倾向于记住列表的第一项和最后一项，而不是中间项。因此，在任何App中设计导航时，根据应用的上下文保持最左和最右的选项。例如instagram，最左边是”首页“，而最右边是”用户“。
（彩云注：这是一个心理学上的理论，人们对于一系列的材料更容易记住开头的内容，也叫做首因效应或者首位效应；更容易记住末尾的内容，就叫近因效应。）
在设计任何体验时，点击次数都是非常重要的指标。统计用户需要点击多少次才能完成他的目标，额外的点击会减慢整个操作过程。简化过程，自然体验就会更好，所以尽可能的减少点击次数。
（彩云注：下面的案例，增加可点击符号也可以减少用户思考的时间。）
为了使内容突出，没有必要使用多种字体类型，包括加粗、改色等等。只在最需要的位置使用增强的的文字层次结构、字体重量，同时只使用一种字体足以吸引用户对内容的注意力。
留白在设计中非常重要，太少或者没有留白会使得设计非常混乱。明智地使用留白可以明确地强调内容。
根据多尔蒂阈值(Doherty Threshold)这个理论：”系统需要在 400ms 内对使用者的操作做出响应，这样才能够让使用者保持专注，并提高生产效率。“。因此，我们可以使用动画、图像甚至文本来保持用户的注意力。（彩云注：给用户的提示可以先快速加载信息框架，让用户有事可做，而不是什么都看不到）
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
Hi，我是彩云。设计趋势年年在变，设计技能也在不断更新，但回到本源，底层的理论知识是不会变的。我自己几乎每年还会翻看一些讲设计基础的书，比如《写给大家看的设计书》之类的，会发现这些原理每次看都会有新的收获。随着工作年数增加，对底层知识的价值认识也越来越深刻，不知道你会不会有这种感觉？
在Medium上看到一位工作超过17年的国外设计leader写的一篇关于设计原理的文章，讲设计如何变得有效？总结得很好。
当没有认知紧张时，用户心流才会发生。当一个设计有效时，你才能体验到认知上的轻松。如果没有，你的“心流状态”就会中断(稍后会详细讨论)，让我们陷入认知紧张，于是“设计失败了”。
当基本设计原则被忽略时，这种情况很容易发生，导致设计无法“整合”。这些基本原则包括：平衡性、一致性和视觉层次、负空间、接近性、对比、统一、一致性、配色方案和排版层次等方面。（彩云注：很多人看到这些以为自己都懂，但实际设计时犯错最多的也是这些问题）
从神经科学的角度来说，当一个设计起作用时，我们会“感受到它”。其影响立竿见影。它发生在潜意识里，在一瞬间完成，是人的本能反应。我们不需要把它放在显微镜下分析它。
优秀设计以简洁和优雅而引人注目。乔纳森·伊夫(Jonathan Ive)和迪特尔·拉姆斯(Dieter Rams)都可以算作这种设计思想的拥趸。
人们常说，优秀设计背后的工艺是无形的。然而，这不是随机发生的。不管人们是否注意到，设计的背后是遵循着大量而严格的原理去执行的。伟大的设计师不会在画板上随意地将各种元素组合在一起，这是有方法的。
为什么有些设计具有美的感受，而有些却没有
相反地，当一项设计被认为“有些地方不对劲”时，人们就会下意识地觉得这个设计是有问题的。这样的结果会给品牌或产品带来不好的影响。当一个高端或奢侈品品牌受到高度关注时，这种影响尤其有害。这就是为什么你永远不会遇到设计不完美的香奈儿(Chanel)商店的原因。
“你对一件事的第一印象会建立起你随后的观念，如果一家公司在你看来不专业，你可能会认为他们做的其他事情都不专业。——Daniel Kahneman，普林斯顿大学心理学教授。
这不是一个精心制作的设计，会导致认知紧张。你会在这个网站上预订你的行程吗?
我们都同意上面是糟糕的设计，就像建在沙子上的房子，一个忽视基本设计原则的设计将会崩溃。潜意识里，它会立即被认为是破碎的，无论是视觉上、精神上和情感上。
人类的大脑是懒惰的、有偏见的，喜欢走捷径。Daniel Kahneman称之为“低维思维”。当人们看到某种设计时，它的“美学完整性”、视觉感知和神经科学之间存在着相互关联。
当一个设计是合理的，换句话说，它是令人愉快的、有效的，我们会迅速、直观的判断它是合理的。我们的心率降低，多巴胺水平增加，会有一种幸福和平静的感觉。这就像我们听到舒缓的音乐，会沉浸在一种每时每刻的“心流状态” 中。“在这种状态下，人们会专注于一项活动，其他一切似乎都不重要”——来自于一个心理学概念，由 Mihaly Csikszentmihalyi在他的畅销书《心流:最佳体验的心理学》中写道。
你更愿意住进哪个房间？
苹果的人机界面指南（Apple’s Human Interface Guidelines）几十年来一直在谈论“美学完整性”。它也可以被称为“设计完整性”或“审美凝聚力”。
苹果对美学完整性的定义是“当一个设计的外观和行为与其功能完美匹配时”（彩云注：我的理解就是所见即所得，符合用户的心理预期）。换句话说，设计的构成是产品的一个组成部分。我们将研究决定设计组合成败的设计原则——更多的是关于 UI，而不是关于 UX。
美学完整性不仅仅是关于设计有多好看。它指的是具有明显连贯性的设计：有效的结构和布局，是什么让它产生效果。换句话说，它的元素在视觉层次、对齐、间距、平衡、对称、重复、比例、强调、接近、对比、统一、一致性、配色、排版、负空间等方面都有出色的运用，这里仅举几个例子。
这与“黄金比例”无关，黄金分割不能解决问题。斐波那契数列螺旋没那么玄乎，给设计师带不来惊人的设计。
设计师们在安吉丽娜·朱莉或蒙娜丽莎的脸上画出金色螺旋形时惊呼道：”果然是”黄金比例“（彩云注：但事实上有点故弄玄虚了）。当然，自然界中确实有神圣几何学(黄金比例，又称斐波那契螺旋，是基于此)，但依赖“黄金螺旋”作为设计原则是一种谬论，它已被多次暴露在其赤裸裸的荒谬中。
这是我的洗衣机，上面叠加了斐波那契螺旋。
“审美的完整性”不是没道理的。这个概念是基于基本的设计原则，是有成就的设计师实践他们的艺术作品的经验总结。
让我们来看看一些设计原则，以及它们为什么会使得你的设计更能更加有效。通常情况下，真正优秀的设计会结合这些设计原则。
我们将探讨以下这些最底层的设计原理：
视觉感知的基本规则对任何视觉设计都是至关重要的，因为它们指导着如何尽可能快地传达信息。视觉层次是设计中信息的结构和优先级。它决定了人们接受和处理信息的顺序，因为它以一种视觉方式引导他们。
视觉层次感重在打造视觉优先级。通过巧妙地使用颜色、形状、大小、间距、比例和方向，创造性地使用决定层次的视觉元素来传达构图的意义、概念和情绪。
核心关注点是什么，你希望用户首先注意到或开始阅读的设计中最重要的元素是什么？我们想让它成为焦点，然后其他部分的设计从这里展开。
一个具有良好视觉层次的网站会引导用户关注重要的部分
视觉层次对于每一种视觉设计都是至关重要的，无论是需要引导访客眼球的首页还是移动端UI的导航入口。用户对每个元素的理解取决于组合中的其他元素及其上下文。
建立视觉层次的一些技术是:位置、大小和比例、颜色和对比、间距和亲密性、负空间、纹理、引导线和高度。在一个元素周围使用丰富的负空间可以使它看起来更有意义。使用引导线可以创造移动，就像一个人的眼睛在设计上移动一样。排版的层次结构也扮演着重要的角色，通过不同的大小和权重，我们可以让更重要的文本元素脱颖而出并建立秩序。
加分技巧
没有视觉层次的网站没有明显的兴趣点。
设计中的对齐和间距通过空间上的连接传达出一种秩序和组织感，这两个原则都在设计背后发挥重要价值。设计师早期学到的基本知识之一是在网格上编排设计，然后对齐和分隔这些元素。
左对齐、居中对齐、右对齐都没错，但你必须对齐，否则当元素没有对齐时，设计就会给人崩溃的感觉。它给人一种不安的感觉。
没对齐的话，眼睛看着很难受
网格有很多不同的类型:列网格、基线网格、模块网格、层次网格、像素网格等。不同设计使用不同网格，但最基本的是设计元素的对齐和间距。（彩云注：关于网格方面的知识，彩云以前也写过不少，感兴趣的也可以在公众号的历史发文中翻翻看）比如：
(Illustration courtesy UX Engineer)
网格可以被打破。一个死板的构图可能会在视觉上无趣，除非一个元素从网格中脱颖而出。错位或“打破网格”是赋予元素更多视觉权重的一个机会。当在设计中设置视觉层次结构时，它可以用来强调某些东西。
有时打破网格可以创造强调和移动
设计上有两种平衡:对称和不对称。所有的构成元素：排版、颜色、图像、形状、图案、留白等，都具有一定的视觉重量。有些元素很重，很吸引眼球，而有些元素很轻，感觉不那么重要。
这些元素的放置方式能够在对称设计中创造出一种平等的顺序感，或者一种稍微偏离平衡能够创造出一种不对称的设计。无论对称还是不对称，我们的大脑都被某种平衡感所吸引，因为它创造了和谐、秩序和美学上令人愉悦的结果。
多重原则:平衡、对齐和对称在网站上发挥作用
“对比”指的是使设计中不同的元素更容易区别开。强烈的对比可以在设计中强调一个区域，而微弱的对比可以弱化它，创造一个视觉层次。对比在设计中也扮演着重要的角色。对比不足会使文字特别难以阅读，尤其是对视力有障碍的人来说。
在左边的设计中，一些文字和背景之间的对比不够。
Web内容可访问性指南 (WCAG)呼吁“文本的视觉呈现应该有至少4.5:1的对比度”，除了大规模文本，它应该有至少3:1的对比度。因此，设计师需要确保内容保持舒适易读。（彩云注：具体可用性配色工具，彩云之前的文章中有分享过，现在这种可用性颜色已经越来越被重视了，你也要用起来啊）,之前写的文章，推荐大家可以看看：
《以前我经常为配色发愁，自从知道这3个配色神器后，配色变得容易多了！》
其他UI元素(如各种显示器和设备上的卡片、按钮、文字和图标)之间的适当对比也是必须的。如果UI元素之间没有明显的区分度，设计就容易产生混乱。
在格式塔原理中，对称和秩序的法则也被称为prägnanz，德语单词“好身材”的意思。这个原理说的是，大脑会以尽可能简单的方式感知模糊的形状，这都是为了节省大脑能量。
我们倾向于寻找一切事物的对称性。几项研究发现，面部对称能提高人们对人脸吸引力的评价(尽管完全对称的脸其实并不一定那么有吸引力)。该理论认为，这种偏好与选择DNA最好的伴侣的进化优势。
对称在自然界中也无处不在。看看一只蝴蝶，一朵花，或者一只海星。
对称
同样的原理也适用于数字领域，平衡对称的设计更令人愉悦。
对称性在应用中发挥作用。Uber Eats、Booking.com和Behance。
重复是一致性的近亲，是优秀可用性的标志。在设计中利用重复是件好事，因为我们的大脑总是在寻找模式、相似性和一致性。为什么?因为重复相同性质的元素需要更少的认知努力。
我们更容易识别重复的模式，而不是每次看到新模式都要重新校准大脑。正如前面提到的，大脑作为一种生存机制是懒惰的，模式识别和认知捷径意味着有意识地处理视觉信息所需的能量更少。
例如，重复元素的形状和大小、填充、留白、类型和颜色，也有助于更对称、更好地平衡，做出美观的设计。
The Athletic这个软件就是用重复元素做设计的好例子
奇数法则意思是说，在设计作品中奇数元素比偶数元素更有趣。偶数元素在图像中产生了对称，这可能会显得过于正式和不自然。比如，在一行中排列三个或五个卡片会比2个或4个效果更好，作品会更加让用户感到舒服和自然。
Iskos Design 就是用的奇数原则做的网页设计
三分法构图（也被称之为黄金网格规则），在画面中以水平和竖直方向分成3x3的网格和4个交叉点。这个规则能很好的协助设计师将最重要的元素放在网格的交叉点上，这样可以很容易的设计出满意的构图。
为什么会这样？因为三分法构图创造了类似斐波那契数列(黄金比例)那种不对称的美，产生了更有吸引力的构图。
你希望用户关注哪些地方？高级设计师非常擅长引导用户的视觉焦点，这种引导可以通过可见和不可见的引导线来完成。这些线条在构图中也可以打造一种动感，也能为画面增添视觉冲击力。
达到这种效果通常用特定的形状和线条，或者是它们的组合形成难以察觉的引导线来实现。利用透视、颜色、对比度和正负空间同样可以帮助达到这种想要的效果。
从左到右的不易察觉的曲线将用户的视线引导到页面文字上
大小（scale）是设计中一个元素与另一个元素的相对大小。元素通过大小不同创建视觉层次，其中最大的元素首先会吸引用户的注意力，因此看起来是最重要的。常规的设计策略就是将最重要的元素做成最大的，然后逐级递减。
比例(Proportion)不同于大小，类似但有区别。比例原则是指一个整体设计中各部分的尺寸关系。设计中的元素可以有各种大小，但它们之间的大小差异，整体来看就是比例。
熟练地使用大小和比例是实现设计统一的关键。当一些元素的大小过大或过小，或者比例失调时，设计组合就会失去统一性。这种错误可能发生在排版和其他元素上。例如，标题与子标题和正文相比显得过大。当设计元素失衡时，设计就会“感觉不平衡”。
大小和比例都没做好时(左图)，看起来处理的比较细致了，但依然没有做到很好，在大小上正文和标题分不清(右图)
强调原则用于使设计的某些元素突出(使用对比、接近、比例、留白等)或不突出，即弱化强调(例如在页面底部有一个几乎看不见的“小字”)。强调是层级之母，因为没有强调就没有层级。
与其他一些设计原则一样，“强调”是用来引导人们关注设计，并强调需要重点关注的第一、第二和第三点。首页面和电商转化页面在99%的情况下都使用这种原则。
使用这个原则，在购物网站上强调了标语和产品，转化效果非常好
统一是指设计元素如何很好地结合在一起，形成“视觉凝聚力”。它指的是设计中的连贯性，让人们觉得所有部分都是一起的。每个元素都应该具有清晰的视觉关系，以帮助传达清晰、简洁的信息。整体性好的设计比整体性差的设计更有条理，质量也更高。
运用统一的配色，重复、平衡和对称之类的原则将有助于在设计中形成一种和谐感，也就是一致性。设计中良好的一致性就好比歌曲中一首歌被和谐地唱出来，形成一个完美的整体。
一致的颜色、重复的图案、平衡和对称在蒂芙尼的网站上创造了一种统一的感觉。
格式塔的接近原则让设计师将同类型的相关元素进行分组。把它们分开得更远，元素就显得越不相关，它们之间的关系就会减弱。一般来说，人们会认为远离的元素是不相关的。
不应该让用户在设计中分辨哪些元素是相互关联的，正如美国邮政服务的例子所显示的那样，缺乏对邻近性的关注会导致直接的认知紧张，损害用户体验。
接近原则没做好的案例。由于字段标签离它们下面的字段更近，人们可能会搞混。
下面是一个邻近性原则做的好的案例，我们可以看到相关元素是如何通过邻近性关联起来的(分组的元素用紫色表示)
一个把接近原则用好的网页设计案例
一致性原则使数字产品的使用更加可预测，符合用户的期望。设计中的一致性可以培养熟悉度，它可以提高用户体验、可用性和用户使用效率。另一方面，不一致的设计将产生更多的认知负荷/脑力劳动，并导致困惑和挫折。这就相当于在用户的路径上设置障碍。让用户的心流嘎然而止!
做好一致性可以增强“审美凝聚力”。“我们都知道，当我们使用应用时，应用的导航位置如果经常变化，或者像“加入购物车”这样的主按钮在不同屏幕上从红色变成绿色，这是多么令人沮丧。
除了视觉一致性和易用性，品牌一致性在产品设计中也发挥着重要作用。如果没有一致的元素呈现，如排版、配色和图案，高质量的品牌体验将无法传递。
在用户体验方面，一致性意味着在设计中使用相似的UI元素来完成相似的任务，即在整个产品中拥有相似的功能和行为。因为可用性是一种评估用户界面易用性的质量属性，所以一致性对用户体验的可用性有很大的贡献。
一致性是通过使用相同的配色、排版、间距、模式和交互来实现的。
色彩心理学也不容忽视。色彩承载着意义和情感，可以向人的潜意识传递信息。在品牌方面，人们对颜色做了大量的心理学研究，因为在人们与品牌进行任何互动之前，颜色会让他们产生一种本能的反应。例如，蓝色通常被认为是可靠的、安全的和平静的，想想银行；而红色是刺激的，被认为是增加人们的心率，想想饮料包装。
一个极简主义的暗色主题设计传达了一个特定的品牌气质，并使用了少量的颜色。
排版在设计中扮演着非常重要的角色，它的重要性再怎么强调都不为过。在构图中，字体样式对人们感知设计的影响比任何其他元素都大，可能除了颜色。
因为我们的大脑以闪电般的速度运转，一个字体会对一个设计产生影响，以至于它可能在不到一眨眼的时间内改变用户的印象。与颜色一样，字体甚至会影响我们的情绪，资深设计师可以通过字体传达情绪和风格。通过选择合适的字体，我们可以传达出稳定、优雅、舒适、可靠、有力等信息。
排版层次结构可以快速建立视觉层次结构，并且通常在其中扮演重要角色。因此，在设计中经常使用不同的字体和字体大小来表示层次结构，例如标题、副标题、正文和引用。
“除了确保文本清晰易读，排版可以帮助你理清信息层次，传达重要内容，并表达你的品牌。” ——苹果的人机界面指南
兰博基尼的网站巧妙地使用了排版风格和比例来赋予其设计力量
Claude Debussy 曾说过，“音乐是音符之间的空间“。同样的观点也适用于设计，元素之间的负空间给予设计强调、平衡和统一。
元素周围适当的负空间将焦点集中在元素本身。它强调了内容，并提供了必要的喘息空间，以确保布局不显得杂乱。没有了呼吸空间，人脑就不太可能扫描兴趣点，更容易感到困惑。
苹果官网提供了一个利用负空间创造强烈焦点的杰出例子。
人们已经开始期待所有平台和设备上的优化、无阻碍的用户体验。理解设计原则及其交互方式对所有设计师来说都是至关重要的。使用专业技能设计它们是创造具有视觉吸引力的功能性设计的关键。我们不要忘记，美学的完整性会严重影响用户体验。
基于原则的设计是设计师在感觉有点迷失或用尽创意时可以依赖的黄金标准方法。在没有理解和实现设计原则的情况下，也可能实现可接受的设计。然而，这可能需要大量的尝试和错误才能创造出看起来不错的内容，并创造出最佳的用户体验。
产品的美学质量与它的实用性密不可分，因为我们每天使用的产品影响着我们和我们的幸福。”但只有精心制作的物品才会美丽。— Dieter Rams(迪特尔·拉姆斯)
当我们不关注由设计原则驱动的设计质量时，我们可能会忽视品牌质量及其所代表的一切。当某些东西设计不好时，品牌就会受到伤害，产品也会受到影响。这就是为什么伟大的设计师在他们的工作中极其严谨， 他们知道“你永远不会有第二次机会给人留下良好的第一印象。”
设计的细节成就了设计本身。—— 查尔斯 伊姆斯（Charles Eames）
作者：彩云Sky 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
卡片是一个UI组件，包含了某一个内容的信息和操作。卡片可以包含各种元素，但它们都应该属于同一个主题。
这样做的目的是为了避免冗长的文字，并呈现更多的内容。即使从设计的角度来看，用户可能不熟悉卡片的概念，但他们马上就知道如何使用它们，因为它们与实体卡片是一样的。（彩云注：这个就是用户心理学中隐喻的运用）
卡片之所以流行，是因为它们能更好的把控内容。卡片是模块化的，所以不同的内容可以堆叠在一起，而不需要注意它们的差异。
卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容，而无需担心设计会变得杂乱无章。
卡片可以将内容分解成易于理解的小块，以便用户与之互动。通过给内容一个容器，卡片向用户表明内容是真实和感性的。
卡片 UI 设计流行的原因还有很多：
直观：卡片在界面中看起来与现实世界中的卡片相同，它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前，它们在现实生活中无处不在：名片、棒球卡、便签。卡片代表了一种有益的视觉类比，它允许我们的大脑直观地将卡片与其所代表的内容联系起来，就像在现实生活中一样。
易于阅读：卡片不占用太多空间，并敦促设计师优先考虑其内容。不同的是，每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。
有吸引力且对用户更友好：基于卡片的设计通常非常依赖视觉效果（尤其是图片）；就信息架构而言，视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。
有利于响应式设计：卡片是矩形的，可以平滑地调整大小，以适应不同屏幕的水平和垂直正面，这意味着用户可以在所有设备上获得统一的体验。
便于分享：卡片可以鼓励用户在社交媒体上分享内容，因为它允许用户只分享特定的内容，而不是整个页面。
什么时候应用卡片设计？
这通常是当你有:
基于搜索的界面: 卡片能通过模块的内容快速显示合适的内容，这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。
信息浏览：当用户浏览信息时，卡片的兼容性更好。
任务管理：当可以将流程中的单个任务作为卡片进行说明时， 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好，其中每张卡片代表一个单独的任务。
类似项目：卡片最适合于异构项目的集合（当并非所有内容都是相同的基本类型时）。
可视化分析: 仪表板通常在同一页上同时显示各种内容样本。在这种情况下，卡片类比可以帮助在不同物品之间创造出更明显的差异，其中每张卡片可以适应不同的角色。
卡片的布局可以不同，以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。
(1)富媒体: 卡片可以包含缩略图，以显示图片，插图，头像，Logo，图标或图形。
(2) 标题: 标题文本可以包含相册或文章的名称或标题。
(3) 描述: 支持文本，如文章摘要或简短的描述。
(4) 行动按钮: 卡片可以包含用于操作的按钮。
(5) 副标题: 副标题文本可以包含详细介绍，如文章的署名或标记的位置。
(6) 图标: 卡片可以包含操作图标。
有一些小的技巧可以快速提高卡片设计细节。
1. 使用相关主题的图片
图片是卡片设计的主角，你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像，卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体，但需要与内容主题相关。
2. 增加视觉层次
卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部，并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。（彩云注：视觉层级对于信息表达至关重要！）
3. 限制内容长度
一张卡片应该只包含重要的信息，并提出一个相关的观点，以获取额外的细节，而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时，卡片可能会变得很冗长，并失去与卡片类比的实际联系，因为它不再像一张卡片了。
4. 避免嵌入链接
不要包含内联链接，卡片应该自己链接。嵌入文字链接会让用户误操作。
5. 区分操作主次
包含不同操作的卡片应该在视觉上形成对比。在下面的例子中，我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。
6. 去掉分割线
对于新手设计师来说，用分割线来区分内容是一种常见的方式，以此定义不同的组。这些边框会造成不必要的视觉干扰，从而影响内容。
APP中的卡片并不是纯粹的拟物概念，但通常情况下，使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下，你可以做几件事:
1. 使用圆角
在形态上与真实世界的卡片进行视觉对比。圆角更有效，因为它们让我们的眼睛容易跟随视觉动线，“因为它更适合头部和眼睛的自然运动”。
2. 增加一个轻微的外边框或者投影
增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次，这有助于我们区分UI元素。
然而，在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果，让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。
3.注意字体和留白
重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白，让用户有时间处理并进行视觉重置，有精力看完一张卡再到下一张。
选择简单和基本的字体，因为基本的排版最大限度地提高了可读性，并有助于浏览。
让我们看看一些真实项目中的卡片设计案例：
信息流中的卡片设计
保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构，但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素，以使读卡片的人更容易理解它们。
由Diseno Constructivo和Webpixels设计
他们突出特色图片和标题作为最突出的元素，这能帮助用户决定文章或发布的内容是否适合他们。
电商卡片设计
产品卡片是一个很重要的东西，它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意，激发人们获得产品的欲望，激励人们购买，并在搜索结果中得到高效推广。
由Webpixels设计
产品的名称应该放在最显眼的地方，这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语，所以你需要一个高质量的产品配图来设计完美的产品卡片。
如果产品有特价，不仅要在价格栏中注明促销价格，还要注明常规价格，以及客户可以节省多少钱。
个人中心卡片设计
简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要，卡片设计在这里也能发挥重要作用。
由Neelesh Chaudhary设计
就像每一张卡片一样，配置文件卡片也是一个UI组件，它包含了对它所代表的内容至关重要的信息。为了达到你的目标，你要向其他人推销你自己。
确保只包括必要的信息(例如，照片，名字，职业)，让你的“关于”页面有剩余的细节来完善你的个人资料。
仪表盘卡片设计
仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型，每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。
由Simmmple设计
仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI，允许用户精确地控制哪些数据需要在仪表板的前端做好。
只包括最相关的信息，为用户使用方便。当你的数据集在一起看更容易理解时，找到在一张卡片上显示它们的方法。但是要小心，不要让用户感到困惑。
日常计划卡片设计
看板任务卡似乎是一件非常简单的事情——拿一张便签，写下你需要做什么，然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息，清楚地传达了必须做什么。
由Neelesh Chaudhary设计
卡片上包含的信息包括任务的名称和重要的细节，如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”，但是状态可能因项目而异。
卡片结构最适用于添加或删除任务这样的小改变，而不是改变像你的总体目标这样的大想法。
有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片，我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效，而不是简单地作为内容列表的现代替代品。
笔者在车联网行业任职HMI视觉设计师，由于HMI设计发展的较晚，所以基本上在开始进入到这个领域的人，大多来自于互联网行业。由于互联网行业发展的比较早，形成了一套成熟的工作流程，即：分工明确的递进式协作：交互设计师要等到产品PRD评审结束才开始介入需求，然后交付黑白线框稿等给到视觉设计师继续跟进。这种工作模式可以让每个人在自己的岗位上做得更加专业，成为垂直领域的专家。在车联网行业发展初期的时候，这种工作模式对于传统行业的来讲，比较新颖、高效，所以在一定程度上促进了行业发展，但汽车操作系统的设计还是有很多不同于互联网设计的地方，所以本文旨在讨论HMI工作流程，如何分工，怎样高效的进行设计协同，以期望探索更适合车联网行业的设计协同方案，希望对你可以有所助益。
对于HMI设计来讲，需要了解很多专业知识，比如：屏幕、硬件、三电、法规……这些东西都会影响到设计的视觉表达，所以设计协同就显得尤为重要，那么什么是设计协同呢？指设计师在设计之初，即可开启分享与协作，让协同者尽可能早的参与到设计中，通过提供一系列工具，让协同者有更加友好地体验，保证每个人都可以准确找到相应需求的内容，并且快速提出修改意见与反馈。简单地讲，就是让每个人都参与到设计过程中，以使最终的结果能够满足用户的需求。
从产品功能逻辑层面来讲，HMI设计的“复杂度”是具有有一定的“限制性”的，即保证安全第一，过度复杂的设计必然影响驾驶和乘坐人的安全。所以对于设计，是需要进行全方位评估的，必然会涉及到不同的角色。同时随着项目的不断发展，设计团队也在不断壮大，设计师之间的协作也越来越多，相应的沟通和协作成本就会不断增加。如何才能更高效的合作，并把设计质量和一致性做得更好，是我们需要解决的问题。所以设计协同的最终目的是为了解决问题，做正确的事，让设计师做真正该做的事情。
让设计师专注于真正重要的事情，而不是把精力放在可以自动化处理的事情上。对所有人员的工作进行集中化管理，所有人员基于统一数据源进行协作。
通过构建团队资产库，比如设计规范、控件组件库等，通过建立健全设计规范，让数据沉淀，一方面让设计师的设计有据可依，提升设计的专业性，另一方面，减少因为人员变动造成的数据丢失。
在设计之初，就让协同者参与到设计之中，保证每个人都可以准确的找到他们的需求内容，并快速提出修改意见与反馈，让设计师更有针对性的解决问题，让设计师无需做重复性的工作。
在HMI设计的工作流程中，主要涉及到的角色有产品经理、交互设计师、视觉设计师、研发工程师、测试工程师、项目经理。
不同角色主要工作内容是：
围绕着HMI设计的整个工作流程是：
产品经理确认需求，输出PRD文档；交互设计师收到PRD文档以后，基于需求，梳理功能，完善业务流程，完成交互文档的制作，输出UE文档；视觉设计师在收到UE文档以后，针对交互文档中的流程页面，进行视觉设计，输出UI文件给到研发同学；研发同学根据UI文件和交互文档进行代码化，完成以后进入测试环节，测试工程师和产品、交互、视觉都需要参与到测试过程中，当完成测试工作以后进行发版。
涉及角色
自己、设计师小团队。
痛点
工作中很多重复的内容，比如：Button、List等使用的地方很多，如果每个元素都重新绘制，势必会投入很多时间，同时因为人为因素，难免会出现不统一的地方。那么怎么样解决这个问题呢？
协同方式
当团队初期发展的时候，或者整个团队只有少数几个设计师的时候，通过汇总通用样式和组件，形成视觉指导Guide，方便通用样式的复用，减少重复工作量，达到快速完成视觉设计的目的。
优点
通过样式库和控件组件库的搭建，形成了一定的共有样式，方便复用，有效的减少了重复工作量。
缺点
由于控件组件库是在设计进行到一定程度以后提炼的，会存在滞后性，并且随着设计工作越来越往后，会发现前期的控件组件存在不合适的地方，需要对之前的工作进行修正。
涉及角色
设计团队内部。
痛点
当公司发展到一定的阶段：
当设计团队越来越大，大家分工越来越细，想法越来越多，就会发现，复制粘贴guide的方式，已经无法满足团队的发展了，经常出现组件不能满足使用的情况，或者是组件相似但不知道怎么选择等问题。
同时因为没有统一的流程，会发现不同的业务对于同一功能交互逻辑的不统一现象，比如：搜索是很多业务都会使用的功能，因为没有统一定义，有的业务会采用即时搜索模式，有的业务必须点击搜索以后才可以进行搜索，并且这种问题，前期很难发现，只有到了中后期走查的时候才会发现。
所以在后期会针对每一个差异点进行统一，需要全流程重新来一遍，费时费力。那么怎么才可以避免这种情况的发生呢？答案就是构建设计系统。
协同方式
设计系统不同于guide的地方是：样式，控件组件只是设计系统中的两个组成部分，除此以外，设计系统还包括了一系列的标准来指导设计。比如：图标、动效、音效等。这些标准记录了设计团队内达成一致的一系列的决定，比如如何选择控件，如何在不同的控件中选择。正是这些标准才确保了设计方案不仅仅只解决一个问题，而是可以被复用的。这些标准也是为什么用户能获得一致的体验的原因。
通过设计系统的建立，让设计规模化，继而进一步强化车机系统的统一性，同时为设计师在做设计时提供一个很好的指导方向，让团队内不同成员的设计在风格上保持一致，提升设计团队的专业度。关于设计系统的建立本文就不再过多描述，后续会出专门的文章进行详述，这里主要是讲述设计系统搭建以后的协同方式。
设计系统的搭建需要专门的人或者团队进行，当搭建完成以后，需要输出的资源有：UE控件组件库、颜色/字体样式库、UI控件组件库、UI控件组件说明文档。这些资源各有什么用呢，接下来进行详细说明：
UE控件组件库
提供给交互设计师，基于提供的内容，交互可以快速的构建界面、交互和流程等，就像搭乐高一样。可以快速的构建一些产品原型或者是实验性的功能，来进行测试以快速验证想法。
颜色/字体样式库、UI控件组件库
提供给UI设计师，形式可以是Sketch Libraries，一方面方便设计师调用，使不同的设计师的设计变得更加统一，且更加可预测，同时组件也可以让设计师更多的时间专注于如何构建更好的用户体验，而不是去纠结于样式的调整。
UI控件组件说明文档
提供给研发，可以是pdf之类的文档形式，主要是详细的描述每一个组件的各种属性，以及里面包含的交互逻辑等，帮助研发搭建起研发自己的底层代码平台。
那么这些资源和不同的角色之间是怎么协作呢？UE控件组件库不需要常常更新，完成后给到交互设计团队，供交互设计师使用搭建UE文档。在项目开始之前，负责设计系统的UI团队进行颜色/字体样式库、UI控件组件库制作，完成以后分享到团队内，供业务设计师使用进行界面设计，同时进行UI控件组件说明文档的编撰，完成以后提供给相应的平台研发，让平台研发进行组件代码化。当代码实现以后进行走查，检查是否按照UI准确的实现。当业务设计师完成了业务的界面设计以后，进行评审，输出给对应的业务研发，研发对于相应的视觉界面进行对应的代码化，使用组件的地方直接调用平台代码，剩下的由业务研发进行代码化。
优点
组件由专门的UI设计师和研发团队负责，当出现设计变更以后，业务设计师可以快速通过组件库更新最新的视觉样式，同时和平台研发对接，进行代码修改，而不需要每个业务研发单独修改，大大减少了跨部门的协作沟通成本。
缺点
团队内需要专门的设计师构建设计系统并负责日常维护。
涉及角色
设计、交互团队。
痛点
由于需求的不确定性，以及车联网项目周期较长等特点，会出现需求经常变更的情况，那么交互就需要不停的更新交互文档，UI也需要不停的输出视觉文档，往往一个项目结束以后，会有几十份甚至上百份的设计文档的情况出现。
协同方式
随着云端化办公软件Figma的兴起，为多角色协作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即时设计等在线软件。
设计文件现在是一个链接，这意味着：
UI设计师不必再等到交互完成评审，输出交互文档以后进行视觉设计，交互和设计完全可以合二为一，输出一份高保真交互流程文档，并且输出的文档可以供研发直接浏览器查看，而不需要像之前一样，不停的进行设计资源的输出。极大的节省了设计师输出时间。优化了协作工作流。
优点
协作设计，云端办公，多角色参与。
一键获取文件，不需要通过其他平台转化，步骤简单；自动生成代码与标注。设计稿修改后自动更新，无需重复下载。
缺点
云端保存，会有数据泄露的风险。
必须在线操作。
涉及角色
UE、UI、研发。
痛点
由于公司发展，业务线增加了很多适配线，这块的工作基本上属于：把已有的UI适配到另一个屏幕尺寸下，需要设计的地方不太多，需要花更多的时间去重新按照最新的屏幕尺寸搭建一遍UI界面，属于用时间换业绩，为了达到这个目标，可以采取的方式大致分为两种：
第一种是增加更多的人力，不管是招更多的人，还是增加更多的供应商人员，都会增加业务支出，并且由于业务无法一直保证饱和，所以会出现一段时间忙的要命，招了很多人员，过了这段时间，业务不太多了，大家都闲了下来，但是开支还是必要的，所以这算是一种没有办法的办法，对于团队或是公司来讲，并不可持续。
另外一种方式就是重新梳理工作流，减少一些重复无意义的工作，比如像是系统设置等瀑布流式的界面，不同车型下的区别只来自于功能的有无，界面上并无太大区别，这里所说的工作，不仅仅指设计师的界面设计工作，同时也包括了研发同学的研发落地工作，同时因为研发同学的适配，也会造成测试走查环节，这些都是一些重复性的工作量，所以是否有一种更好的协作方式可以避免这种情况的发生呢？
答案就是我们接下来要讲的一种全新的工作模式：C2D2C模式。
协同方式
由于设计团队在早期的发展中，积累了大量的设计资产。这些设计资产的沉淀就是设计标准化的基础，将设计资产转为封装好的代码组件，也就是C2D的过程。然后将封装好的组件通过低代码平台进行属性配置、搭建页面、布局调整实现页面的设计就是 D2C 的过程。通过平台设定交互行为和绑定后台数据，完成整个系统，最后再进行站点发布，就实现了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，简单讲就是研发同学把设计资产通过设计标准化和研发工业化的方式完成代码化，然后让设计师调用已经代码化的设计资产进行设计工作，这样子当设计师完成了界面设计的时候，相当于同时完成了前端开发，接下来研发同学只需要根据拿到的界面添加简单的逻辑就算完成了研发工作，实现中后台设计研发流程的整体提效。
优点
由于样式、组件已经完成了代码化，那么在适配工作中，控件组件化高的界面就可以直接生成代码，不需要设计师重复设计，同时由于减少了设计师和研发的参与，节省了大量沟通成本，也减少了很多因为人为因素而产生的bug。
由于设计师减少了重复工作量，可以有更多的时间集中在视觉表现上，有效提升了设计输出的质量，保证了产品的设计感。
对于大量适配项目的团队，可以由设计师直接配置项目组件，无需经过研发，减少出错概率，极大提升工作效率。
缺点
前期需要研发同学代码化基础控件，所以需要投入人力、精力进行前期的工作。
由于控件提前进行了代码化，后续可能会出现无法满足业务需求等情况出现，所以需要有人及时对代码进行维护更新。
涉及角色
产品、UE、UI、研发、测试。
痛点
基于上面讲述的C2D2C模式，已经完成了一个共享平台的搭建，由于配置需要研发的参与，所以始终需要研发同学作为集成人员，并不利于其他角色的使用，那么怎么样可以让产品同学，设计同学，或者说是普通用户使用呢？
协同方式
一个优秀的共享平台是需要所有人都可以在其中使用的，所以，当公司或者团队发展到稳定阶段，我们需要重构工作流，以需求为导向，搭建全员工作平台，基于设计师和研发搭建的平台基础上，提炼需求，强化个性化和定制化，满足品牌产品的个性化需求，具体来讲，就是把UI界面中元素提炼出相应的功能，生成功能清单，通过选择不同的功能，生成相对应的界面。
当完整的共享平台搭建完成以后，团队中的每个角色的工作内容都发生了变化，产品的工作是构建更多的需求，交互设计师的工作是构建更多的交互形式，产品架构，UI设计师的工作是设计更多更好的界面布局，视觉表现，然后研发把上述内容通过代码汇总进我们的需求池中，扩展我们的平台丰富度。
HMI设计工作，就变成了：客户在我们的配置面板中选择需要的需求，喜欢的布局，想要的视觉，点击完成，就可以即刻看到高度定制化的一套系统。
优点
让每个人回归工作的本质，不需要为了一些重复的繁杂的内容而疲于奔命，做更有价值的工作，实现工作的价值
赋能行业，可以满足车企定制化的需求，提供车企一套完整的车机系统解决方案。
缺点
投入大，对于小体量的业务来讲短期无法创造价值。
对于现在的行业环境，增速提效已经达成了基本共识，设计协同就成了一个大课题，但是不同的企业，不同的团队面对的具体问题不一样，可使用的资源也不太一样，那么采用哪种协同方式并无定式，需要根据实际情况，进行具体分析，毕竟效率的提升是为了创造最大的价值。我们所有的努力最终目的是为了解决问题，做正确的事。
作者：菘蓝C 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
设计做到极致注重的就是对于细节的把控力，大厂的设计师之所以比较优秀，就是他们具备很好的细节把控力。想要提高产品设计的能力，发现设计细节和思考设计深入的能力至关重要。
最近在体验产品的时候，发现了一些设计细节做得比较好的优秀案例，分享给大家学习一下。
分享目录
一、Banner 轮播转场的品牌化
二、情感化的弹窗设计
三、最小化显示提高空间利用率
四、动态化的设置引导
五、沉浸式的活动氛围设计
六、人性化的提示设置
七、动态感知的温度设计
八、无处不在的广告位开发
九、主题化的图标设计
十、新颖的卡片式设计
一、Banner 轮播转场的品牌化
立足于品牌做设计，才能强化自身产品的差异化。如何在更多设计场景中融入品牌基因，是设计师需要深入思考的关键。
最近在使用腾讯视频 APP 时，发现首页 Banner 图在轮播的转场过程中，以品牌 LOGO 造型作为转场过度。一个小小的细节强化了用户对于品牌的记忆度，也体现出专属的设计差异。
二、情感化的弹窗设计
通过弹窗设计可以提高用户操作效率，也是传播信息（活动/广告）最直观的形式。但是体验多了用户便会开始排斥，提高弹窗的情感化设计变得尤为重要，降低用户的排斥感才能提高弹窗的作用。
很多娱乐影视等 APP 都会有“青少年模式”弹窗提示，抖音将弹窗视觉表达融入了精美的国风插画。也通过针对性的内容作为设置的引导，提高了用户对“青少年模式”的深入理解，增强了体验的积极性。
插画的形式在弹窗设计中表现比较突出，比如嘀嗒出行 APP 将“推送通知”的弹窗设计运用插画增强情感化表达。相较于生硬的表达方式用户更能接受，通过营销的文案引导用户授权，提高了产品的感官体验。
三、最小化显示提高空间利用率
对于工具型产品不同用户的操作焦点不同，更多定制化的体验才能提高用户的操作效率。
钉钉 APP 在协作栏目中，默认展示的各类工具可以进行收起，实现最小化显示。用户可以根据使用习惯和操作方式选择收起/展开，提高了当前空间的利用率，自定义的功能设计可以提高用户的操作体验。
四、动态化的设置引导
为了提高用户隐私权益，手机系统针对产品调用权限进行了阻力设计，需要用户的授权操作。提高用户的各类功能授权就需要设计师探索，降低用户的排斥感和提高授权的利好政策才能获得授权。
抖音在引导用户开启通知权限的设计中，采用了动态画面的表达来强调开启通知的利好政策，以此来攻破用户的心理防备。相较于生硬的弹窗提示，动态的表达和引导性的文案更能拉近与用户的距离感。
五、沉浸式的活动氛围设计
沉浸式的体验可以带给用户更好的场景感，提高用户的参与度。在活动的设计中，不断向游戏化和沉浸式方向加强体验，提高活动的趣味性和强化用户参与的积极性。
腾讯视频在情人节的互动活动设计中，就将抢红包的活动融入到当前的界面中，红包雨铺满整个屏幕，以趣味性的形式满足用户心理。不隔断与界面之间的联系，降低活动对用户的干扰，进而提高活动氛围感和参与度。
六、人性化的提示设置
短视频近些年改变了大家的生活方式和娱乐形式，也有用户容易过度依赖进而影响休息质量。
抖音作为短视频领域的头部产品之一，在增强用户体验的同时也要起到良性的引导作用。当用户刷短视频一定时间后会弹窗提示休息，而提示时间用户可以根据自己的实际情况进行设置，灵活的设置可以让用户合理分配时间。健康使用的引导可以让用户感受到产品的温度，提高用户体验的认可度。
七、动态感知的温度设计
天气预报是用户关注度较高的信息，对于温度的感知可以让我们出行更容易把控。在产品中显示天气情况也是一种情感化的升级，可以带给用户更有温度的体验。
利用饿了么 APP 点餐之后，首页会显示配送情况和当前的天气温度，背景以动态的天气画面增强视觉感知。也希望用户可以根据天气情况对外卖员多一份理解，加强人与人之间的宽容心，带给用户更强的情感化体验。
最近在使用爱奇艺 APP 时，发现左上角的品牌位置也结合了天气情况，结合顶部视觉区域的流体渐变，新增的天气预报和品牌 LOGO 完美的通过动效过度。整个设计表达流畅自然，感官体验也是非常值得学习的。
八、无处不在的广告位开发
广告是众多产品实现流量变现的方式之一，广告位的开发也是见缝插针，如何在仅有的空间增加更多广告位，产品设计师也在不断探索。
最近在使用腾讯视频 APP 时，进入到个人中心时会默认有个下拉广告。这个见缝插针的广告位新增，对于设计师来说让我感受到了广告的无处不在，不过对于用户来说是否会心生排斥感得通过数据去验证。但是作为产品设计师这也是一个启发，将有限的空间进行深度开发，还不会影响已有的结构布局，这也是一个启发性的案例。
九、主题化的图标设计
图标是产品中不可或缺的存在，图标设计的研究也是设计师需要重点对待的技能范围。精美的图标不仅可以提高产品的感官体验，也能吸引用户的关注度，进而提高业务模块的点击欲。
最近在使用顺丰速运小程序时，寄快递栏目的各业务入口图标设计非常引人注目，结合主题化的图标设计突出了活动传播力度。对于工具型产品而言，强化氛围感可以打破用户原有的认知，不仅可以突出活动主题，也能强化用户对产品的视觉感知。
十、新颖的卡片式设计
卡片式设计已经流行好几年了，目前依然是非常普及的 UI 设计趋势之一。如何进一步强化卡片式设计的创新度，我们需要不断的尝试和总结。
哗哩哗哩 APP 的创作中心设计也许是一个不错的启发，卡片内部右上角的视觉强化使得原本普通的表达变得更有视觉感。突出的设计也成功的吸引了 UP 主的注意力，强化了该入口的点击欲。这样的设计表达在保留卡片式设计的基础上，也是一种新颖的视觉表现，可以作为突出业务入口的表现方式进行探索。
作者：黑马青年 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
众所周知，「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为：为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。
「Live Activities设计规范」由苹果出品，原文为英文，上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」，使用比较熟悉的「用户体验五要素」对内容进行整理。
原文提供的Live Activity定义如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
从原文可以提炼出Live Activity显示特点：
1. 内容是频繁更新的、有进度/状态显示的、用户关心的。
2. 内容的信息量是一眼就能看完的程度。
但上述仍是表象，并非实质，接下来思考这几个问题：
1. 为什么显示的是进度/状态频繁更新的内容？
2. 为什么要强调用户关心的？
3. 为什么信息量是一眼就能看完的程度？
没有Live Activity时，频繁更新主要靠push推送。但push容易被其他APP的push覆盖，且随着各种APP的频繁使用，用户获取关键信息的效率和通过push打开APP的次数反而在下降。
进度/状态频繁更新的内容，说明每个状态存在的时间短，如果被覆盖/忽略，同一状态就不再复现，用户所关心的，或APP所希望用户关心的，就看不到了。比如：什么时候取外卖、待付款、上传成功等等。
当下我们所处的时代是信息泛滥的时代，需要对信息作精简，但用户的操作是可以多条线进行的，比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。
信息内容和量是官网一直在强调的，需要精简，只展示用户需要的，基本达到一眼看完的程度，目的就是知道变化的是什么，当前状态是什么。
分析了这么多，大胆推测一下Live Activity的设计初衷是：快&准确&轻。而终极目的是打动用户，形成好体验，进而推动口碑和销售；为各APP提供新的通知形式，互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。
关于这个层次相当于规定功能范围&信息边界限制，就是什么要，什么不能要。这部分的信息官网给出许多，在此将其分类梳理如下，为避免大家不好查找官网/译文对应出处，在句未已标注。
1. 仅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平台注意事项）
2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。（源自：什么是Live Activity-锁屏）
3. 支持用户手动清除锁屏状态下的Live Activity。（源自：实际操作）
4. 支持用户直接关闭对应APP的Live Activity。（源自：最佳实践方式第3/c条）
5. 支持Live Activity自动开始&结束。（源自：最佳实践方式第6/f条）
6. 限制跟踪活动/状态时长不超过8小时。（源自：最佳实践方式第1/a条）
7. 限制活动/进程结束后展示时长不超过4小时。（源自：最佳实践方式第8/h条）
8. 支持更改背景颜色&不透明度。（源自：设计有用的Live Activity第5/e条）
9. 限制内容布局。（源自：设计有用的Live Activity第5/e条）
10. 限制不同设备的展示尺寸。（源自：规范）
1. 避免在Live Activity中显示敏感信息。（源自：最佳实践方式第4/d条）
2. 避免在Live Activity中显示广告和促销活动。（源自：最佳实践方式第5/e条）
3. 只提供正在进行的任务/事件的关键摘要。（源自：最佳实践方式第2/b条）
4. 在任务/活动结束前，给用户提供关闭Live Activity按钮。（源自：最佳实践方式第6/f条）
5. 点击Live Activity直接定位到对应页面，无需用户二次导航。（源自：最佳实践方式第7/g条）
6. 考虑在活动结束后，锁屏上在合理时段后自动删除Live Activity。（源自：最佳实践方式第8/g条）
（个人猜测）由于是提供一个展示区域，且展示区域有限，所以对于层级架构，一级展示什么，二级展示什么，各阶段展示什么，这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。
通过Live Activity的展示形式，可以总结为2点：吸引、查看（摘要&详情）。
1. 一般是在原深感摄像头两侧展示（电话会直接展示扩展型），分为紧凑型和最小化。
2. 紧凑型在仅有一个活动/事件的时候展示，虽被原深感摄像头分割两端，但仅作为一条信息展示，为了视觉上的统一，这里的颜色不支持开发设置，使用的是系统默认色值。
3. 最小化在存在多个活动的时候展现，左侧和原深感摄像头粘连，右侧独立成岛。
4. 不管是紧凑型，还是最小化，都可以通过点击原深感摄像头区域，进入APP内页，或者长按唤出扩展型。
1. 进入内页的查看基本就是各家显神通了，这里主要讲扩展型和锁屏。
2. 原则上是不支持在扩展型和锁屏做复杂操作的，基本点击是进入APP。
3. 扩展型是用户长按紧凑型/最小化唤起的展示区域，内容是可以自定义的，当然官方也给了相应的建议，具体如下。内容信息种类多的可以采用这种信息左中右排布，底部预留大按钮。内容信息少的可以采用左内容右操作的方式。
4. 根据一致性原则，锁屏展示的布局框架应该与扩展型差不多，同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行，是会全部展示的，所以要注意品牌的传递，避免用户混淆服务方。
对于如何呈现这些东西，苹果还是写了很多建议，确保视觉上的一致性和美观。
1. 紧凑型状态下，为了保证两侧信息的连贯，除了语句阅读连贯，还需要在图形和颜色上具有一致性，视觉上连贯。
2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的，当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。
3. 设计师不仅要考虑最佳状态，还有深色&浅色模式下的，以及不同环境光、设备亮度下的显示。还有一点很容易忽视的，就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取，还需要考虑美感问题。
1. 紧凑型和扩展型之间的布局要保持一致，两者间的变化过渡效果是可以预测的。
2. 一般来说，扩展型和锁屏状态下的信息间标准间距是20pt。
3. 在某些情况下，例如图形和按钮，您可能需要使用更紧凑的边距，以避免挤满边缘或形成混乱的外观。
1. 内容和Live Activity边缘之间的边距需要保持一致，请遵循SwiftUI规则。
1内容和Live Activity边缘之间的边距需要保持一致，，发现以圆角边界为测距点得到的间距关系较为舒适。即：圆形/大致为圆形的图形保持上下，3. 以及左侧或者右侧间距一致即可；方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一，才能确保间距的一致性。
需要适应不同机型的尺寸。具体的尺寸规范如下。
动态岛使用44个点的角半径，其圆角形状与原深感摄像头相匹配。
下表中列出的所有值均以pt为单位。
ps：左侧为宽度，右侧为高度。
以上就是整理分析的全部。
在整理分析过程中加强了对「用户体验5要素」各个层划分的理解，也对Live Activity在各个层次上的要求更加明确。
企业级B端产品具有行业壁垒高、业务复杂、服务角色多等特点，在大型迭代项目中，如何做好设计协同，把握设计一致性和还原度常常让很多设计团队感觉无从下手，找不到切入点。在长期的项目实践中我们发现，做好设计规范能规范可以帮助个人、团队以及整个企业提高效率和产出质量，保障用户体验统一。
那么，我们该如何做好体验标准化，保障基础体验一致性？下面将和大家分享我们公司在构建设计规范的实践案例。
以我们设计团队为例，随着业务不断扩大，定制化需求不断增加，大型迭代项目做不好设计和开发协同，导致出现“体验一致性差”“设计效率低”“还原度不可控”等问题。如何有效解决这些问题呢？可以通过构建设计规范，以保证一致性，实现工作提效。
从不同角度出发，构建设计规范都能发挥积极的作用。
对企业来说：有利于实现产品经理、设计和研发的输出一致。设计侧主动建立产品设计规范，很大程度上是为了做好设计管控，实现原型、设计稿到线上页面统一的设计语言，从根本上提升设计质量和还原度，提高用户满意度。
对个人来说：当多个设计师共同协作同一项目时，由于设计理解不一致等原因，容易出现设计控件使用混乱等问题。若有详细的设计规范作为引导，有利于实现产品各个模块间的一致性。组件化的工具也能减少机械重复性的工作，让设计师将更多精力投入到用户研究和提升用户体验上。
产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路。
该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关。
搭建目的：通过定义原则，梳理关键页面和流程，搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断；从页面到流程，又能对应设计参照标准；同时业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由。
搭建范围：「全局说明」「页面布局」「通用流程」
该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率。
搭建目的：通过回溯整理过往设计，沉淀优化成完整的交互规范。再根据规范统一产品体验，进一步优化流程和效率， 让整个产品体验达到相对稳定的状态。
搭建范围：「全局说明」「页面布局」「通用流程」「基础组件」「业务组件」
好的设计规范有很多优秀的例子，例如Google、Apple、Microsoft这些引领全球设计风尚的公司，设计规范已经上升为设计语言，指导旗下所有产品的设计。国内做的优秀的案例，比如Ant Design，Element，arco.design等，像这类的产品已经实现了端到端的体验一致，把交互、前端和视觉的事情一并解决了，是值得学习的典范。这些优秀的设计规范都包含以下几个特点：灵活性，可扩展性，系统性和标准性。
一般团队内部构建的设计规范都源于某一产品或者业务，因为主要是团队内部成员使用，追求的是投入产出比最大化。所以可在行业通用设计规范的基础上，适度参考行业设计规范，能复用的直接参考，同时专注于业务本身，具有业务特性的再集合业务综合考虑，使整个规范制定效率更高，科学性、指导性更强。
设计规范的执行和推动主要分为四大步骤：
类型梳理：分析业务场景，整理和归类组件，评估具体组件优先级和迭代计划；
全局说明：统一布局，色板，字体，常用样式，规范设计语言；
抽象设计：将设计共性抽象出来，构建组件通用方案；
效果验证：通过定性/定量数据追踪效果，分析原因，迭代改进；
收集现有设计页面，分析业务场景，再参考行业通用规范的定义，整理和归类组件，可以先罗列完整，再根据产品实际业务需要进行增删改。
全局说明：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计。包括统一布局，色板，字体，样式等设计规则。
基础组件：可参考行业通用规范中的基础组件分类和组成，因为大部分基础组件都具有一定的通用性，站在巨人的肩膀上更高效。这里我们根据实际情况，将基础组件分为导航，通用，数据展示，数据录入，反馈5个大模块，每个模块下再细分各小类，构成基础组件的类目。
业务组件：根据业务需求，可以定义属于自己的业务组件，这也是区别于其他通用行业组件库的一个核心部分。
因为在大体量产品设计中，每个模块都由不同的同学负责，这样全局产品的把握就会降低，需要去补充全局规范说明去维持产品全局通用部分的一致性。包括布局，色彩规范，字体，样式等；
抽象设计是设计规范中最核心，工作量最大，难度最高的一个环节。我们可以将它拆解成几个部分，先做出基础组件，再基于基础组件和业务需求抽象设计业务组件，最后抽象成页面模板。
基础组件
组件库的搭建，就一定要提到原子思维。道尔顿原子论认为，物质世界的最小单位是原子，原子是单一的，独立的，不可被分割的，在化学变化中保持着稳定的状态。这个原子理论同样适用于设计系统中。
其中，最小单位设计元素就是基础组件。我们在做设计系统的时候希望当你改动任何一个原子，你有自信其他所有依赖于这个原子的部件全部自动更新。只有满足了这一点，设计系统设想中的效率、解放生产力才会真正实现。例如，在sketch中，分享样式和嵌套符号的使用。
业务组件
在构建完基础组件后，可以根据业务需求，将使用频率较高的组件进行评估，抽象成业务组件。
一般业务组件可分成两大类：
一类是由多个基础组件组成的带有业务需求复合组件，如：复合标签，快捷时间选择器等；
另一类是针对特定业务场景的业务组件：如地图，站点等；
页面模版
在完成基础组件和业务组件的构建后，我们可以根据全局说明，利用组件搭建页面模板。页面模版不仅能有效的提升组件的使用效率，也能提供很好的组件使用示范效应，加强设计说明和组件之间的结合。
组件质量评估：从物理到行为层，包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。
系统应用层面的评价：
系统是否帮助业务提效；
当业务不能直接应用系统，能否灵活改动；
系统是否帮助业务变得更有竞争力、更创新；
迭代机制
当我们完成设计规范的整体构建后，对于新需求，通过评估复用性、通用性和优先级，低级别的走定制设计完成交付。高级别的通过抽象设计、内审、沉淀到组件库中。
机制提效
在完成设计规范的构建后，我们可以联合产品经理和前端工程师，帮助每个环节的人员快速搭建产出物，推动上下游机制提效。
例如，我们会基于设计规范，为产品经理提供符合设计规范的Axure元件库，产品经理使用元件库，可以快速搭建原型，产出prd，与设计师、开发的沟通也更加顺畅。简单的修改可以跳过设计师出图这一步骤，直接和开发沟通，极大加快前期的节奏。甚至通过借助元件库，产品经理可以搭建出高保真原型，用于直接和用户确认或者给客户进行demo的演示。
基于设计规范，推动研发实现组件代码化，通过设计标准化可以达到研发工业化。通过定义标准规范，提高流程、组件的复用率，开发侧就可以制定相应组件，形成前端脚手架，方便后期迭代的组件化使用，有效地避免不必要的分歧点和重复造轮子，同时减少上线前设计走查、测试的工作量，保证落地效果，提升生产力。
以上就是我们在构建自己的企业设计规范的流程，最后，给大家展示一下，我们目前的企业设计规范和部分应用情况。
如何让自己的产品在保证基本的可用性和易用性的同时，还能让界面看起来柔和、更富有亲和力？一个产品能留住用户的虽然是内容本身的质量与吸引力，但一个小小的细节却能够阻止用户的流失，成为内容转化的最后一道防线，让人眼前一亮，值得借鉴。
体验目录：
01. 【剪映】化繁为简，突破性的C端深度编辑交互界面！
02.【剪映】组合操作，简化界面跳转的“批量编辑”
03.【必剪】轨道按钮文案自适应滑动跟随
04.【剪映/IOS】首页新增（试试看）教程专区板块，快速入门软件
05.【剪映】“剪同款”功能，让用户快速出片
06.【剪映】上滑升起列表，让用户查看选择更加直观
07.【剪映】不同类型的模块，分区展示
08.【剪映】选中特效后，自动播放（特效预览效果）
09.【剪映】滤镜功能“单行浏览”的原因以及必要性
产品体验：
在此前，用户想要对视频进行剪辑操作，用户大多都需要使用电脑的Ae、Pr等剪辑软件，此类软件体量大，操作门槛高，而且需要有电脑的存在，在人手一台智能手机的今天，剪映等专业剪辑APP的出现，填补了用户需要在手机上进行视频剪辑的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等专业剪辑软件的界面特点（画面轨道，音频轨道），也大大的降低了剪辑软件的操作门槛。
剪映的UI交互精明之处在于，它将专业剪辑软件的复杂，位置隐蔽，但又常用的剪辑操作。「整合」成为底部一个个显眼的功能图标，并且用极为精简易懂的文案，对功能进行了一个充分的描述。这一举动，大大降低了用户对剪辑软件复杂功能的理解门槛，用一种整合式的思维，提供功能给用户合成使用。这简单易懂的交互体验，也大大提高了用户的黏度，忠诚度。让小白用户接触了剪映后，再也无法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切机器辅助，机器完成，需要人效的地方越来越少，在这大背景下，我们软件的用户只会变得越来越懒。
在新时代的背景下，我们UI、交互设计师，需要一种宝贵的「化繁为简」能力，在不影响最终呈现效果的前提下，将一个软件的交互体验，文案、功能理解，以及功能使用操作做得越简单，用户的黏度，忠诚度就会越高。
一个工具类APP何为「好用」？也许就是像剪上映一样，“化繁为简，成效依然”
产品体验：
在剪映中，识别字幕的交互逻辑，是自动识别所有视频片段的语音，并且插入时间线中，识别字幕是【批量进入时间轴】的。所以想统一进行编辑，得一个个反复选中，然后逐一检查，这种累人的交互体验，让用户用了第一次就不会想用第二次。
剪映推出了「批量编辑」交互功能。
语音识别后，用户点击其中一个识别字幕，底部第一个功能就是「批量剪辑」功能，点击后，可以一键编辑全体的识别字幕内容，减少了用户调整识别字幕是的操作交互时间，增加了用户操作效率
设计思考：
在产品的功能交互设计中，不妨使用剪映的「整合思维」，将一些重复性高，标签统一，可统一操作的元素整合在一个功能中统一编辑，减少用户的操作切换与跳转，增加用户的交互体验与操作效率
产品体验：
在必剪中随着用户左右移动，轨道按钮的文案也会跟随移动，让用户无论滑动到何处，什么位置，都能清晰的知道轨道的应用名称，而不会出现混淆的情况。最大程度上，减轻了用户的理解成本
设计思考：
当我们的图标，功能板块，或者某些重要信息，被用户左右、上下滑动导致超出屏幕展示区域，用户想回头找到这些元素，就得重新滑动到对应位置，走一趟“回头路操作” 。这对用户来说其实是不便捷的，对交互设计来说，是不聪明的
我们可以利用【必剪】的文字跟随交互，来举一反三，让一些重要的功能，信息区域，随着用户的滑动而自适应跟随，最大限度地保证用户他不错过这些重要的功能、信息。
产品体验：
在用户（特别是大龄用户），在初次使用【剪映】这种有一定入门难度的APP的时候，其实都是感到陌生的，新手指引虽然能一定程度解决此问题，但是新手引导只能在第一次打开APP时展示，而且新手指引有非常强的局限性，它只能告诉能这功能要怎么用，而无法告诉你这功能的使用场景。
所以在首页中新增一个软件使用技巧、教程专区，可以让有需要的用户第一时间观看课程，入门软件，而且课程用户可反复观看，不像新手指引般一次性展示。
这种交互体验，大大减轻了用户入门软件的难度。
设计思考：
在我们设计的产品是一个工具型软件，且有一定入门、使用难度的时候，不妨参考一下【剪映】的首页+软件使用教程 的交互思维。
用最低成本教会用户如何使用这个软件，而且展示位置是每次打开APP时都会看到的首页，不用担心一些粗心的用户错过。
产品体验：
在剪映Tap栏中，有一个 “剪同款” 功能，选中对应的视频模版后，填入自己相册的素材，听过自动剪辑，特效覆盖，自动填充文字、BGM等一系列操作，支持用户一键快速成片。
设计思考：
在流量为王的时代，内容输出效率就代表了一切，剪映的 “剪同款” 功能，就是让用户的内容输出效率大大提高，将输出内容的过程简单化，无脑化，用户无需再去想用什么创意，视频用什么BGM，以及视频特效如何制作，这些都由APP的模版设计师帮你搞定，用户需要做的，就是提供出自己的素材即可。
这给予了我们产品设计师一个启发，在我们设计产品时，是否也能关注一下，急需内容输出，但内容输出困难的领域呢？也能把一些可自动化实现的步骤（如特效，BGM，字幕等等），交给系统，用户只需参与拍摄或提供一小部分素材，即可生成一条优质的内容。解决用户输出内容痛点，从而留存用户数量，从而实现用户量变现。
产品体验：
在剪映APP中，一些展示选择列表的功能中，用户上滑，列表都会随之升起，让用户可以更直观的查看选中其中内容，大大增加视觉传达效率。
让用户不会被窗口高度限制，更高效地浏览、选用列表中的元素，增加产品功能成效效率
设计思考：
当我们的浏览窗口，因UI布局高度受限时，设计师可以通过【窗口随着滑动响应移动】的交互方式，使得界面UI交互更多变幻，更为灵活。
产品体验：
在剪辑APP中，难免会有许多种类不同，作用各样的模块，但是剪辑轨道UI展示的空间有限，如果没有分区思维，那么整个剪辑轨道将会变得杂乱不堪，用户用久了看到各种轨道模块，也会疲劳过载
而剪映提供的UI解决方案也非常值得参考，将各种不同种类的效果轨道模块，分区展示，在用户点击【特效】前，剪辑轨道不展示所有的【特效模块】，在用户点击【特效】功能后，才展示对应的【特效模块】轨道
设计思考：
在我们面对多种不同类型，但是作用相同对象的作用对象时，利用交互思维，在UI界面上进行视觉分类很重要，否则你整个APP的操作界面将会杂乱无章。
剪映给了我们一个很好的参考，就是将不同种类的对象 【分区展示，分区管理，分区操作】，最大限度的保证交互界面的简洁舒适，且分类也能让用户更好的“点对点”进行操作，节省寻找对应操作对象的时间，所以，分类思维 是目前作为交互设计师的一项必不可少的技能了。
产品体验：
在剪映APP中，当用户选中特效，系统会自动播放【特效预览效果】，且自动暂停（如特效时长3s，那么系统播放完3s特效效果后会自动暂停，不会继续播放）
用户可以直接了当地查看特效与画面融合的效果，而不用选中后，再点击播放预览效果，觉得效果不满意，还得反复切换。这种交互方式，大大节省了用户的选择模版时间，让其成为（选择+预览=选中） 的高效交互流程
设计思考：
在我们设计一些需要实时预览的功能时，我们不妨参考一下剪映的（选择+预览=选中）的高效交互流程，让用户免去反复操作预览，重复选择的无效交互，提升用户在工具型APP的内容输出效率
产品体验：
当用户在剪映中唤起滤镜功能列表时，难免会感到惊讶，以及提出疑问：“为什么剪映要用单行浏览这种低效的交互方式？”
但是只要你仔细思考，并付出实践你就会明白，剪映在滤镜列表中，使用单行浏览的原因。
因为用户对滤镜的选择，是出于此滤镜的画面效果，所以展示滤镜效果时，滤镜效果图的比例大小是否清晰显得尤为重要，所以，剪映牺牲了一些浏览效率，但是大大保证了用户对此滤镜的浏览精读。
另外，滤镜列表不同于特效列表，具有大量重复图片填充。滤镜几乎每张填充的图片都是有所不同的，所以使用多行列表式排列，在多种不同颜色，不同风格的图片填充下，画面会变得杂乱不堪
设计思考：
当我们遇到，填充图片风格各异、或者注重展示画面的列表设计时，可以参考剪映，牺牲一下浏览效率，保证浏览舒适度，精读的设计方式，来防止我们设计的列表在视觉交互上显得杂乱无章
作者：坚行 来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
设计过程被描述为多个阶段，每个阶段都包含不同的活动来完成该阶段，它没有统一的标准流程，每个公司和设计师都有自己的流程版本。
尽管存在多个流程，但一般流程和阶段类似于以下内容:
了解问题：初步了解问题。观察、采访和倾听用户。
定义问题：解释和定义要解决的问题。
构思：通过头脑风暴产生尽可能多的想法。
原型设计：构建原型并与其他人分享（ 再次缩小解决方案空间，为实验阶段 ）。
测试：测试可能的解决方案、实施、改进或重新设计。
传统的问题解决采取有条不紊而又科学的形式。该过程从一个问题开始，定义要采取的步骤以及达到解决方案的工具或方法。
设计思维是一种创造性的策略，可以产生创造性的未来结果和/或创造性的问题解决方式，它应该被认为是一种以解决方案为中心的思维策略。
它通常被描述为一种创造性、主观和感性的对许多大型组织的分析逻辑（ 布朗，2008 年 ），或作为分析和创造性推理模式的组合（ 邓恩 & 马丁，2006 年；利特卡，2015 年 ）。
设计思维来源于常规问题解决方法，常规问题解法是设计思维的基础。
从解决问题到设计思维，Liedtka (2013)
结果发现，设计思维实际上也是一个解决问题的过程，而不仅仅是一个创新过程（ 利特卡，2013）
一个例子是，丰田采用设计思维从头开始分析其西海岸的一个客户联络中心，在重新设计过程中，组建了一个由一线呼叫代表、软件工程师、业务主管和变革代理组成的跨职能团队，这一举动最终改变了客户和员工的服务中心体验。
我们每天都会遇到问题，但是当我们解决同样的问题时，它们就成了例行公事（ 似乎已经忘记它们是问题了 ），我们甚至都没有意识到正在解决这些问题。例如，我的办公室在 30 分钟路程之外，该怎么到达那里？开车、坐火车或巴士到目的地；除非车子轮胎被刺破，否则你就需要弄清楚如何到达办公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 与 Roger Martin 共同创造了特定术语：“设计思维”，并将多年来酝酿的方法和想法封装成一个统一的概念。
设计思维是以人为中心、开放式、基于问题的方法论。这种方法最初是为了改变工程教育中的教学方式，而工程师处理和解决问题的方式有其设计思维的基础。
设计思维一词可以追溯到 1987 年 Peter Rowe 的著作：“设计思维。” 他描述工程师和建筑师处理问题的方法有很大不同。
90 年代初，认知科学家 Don Norman 加入 Apple 团队，担任他们的用户体验架构师，这使他成为第一个在职位中包含 UX 的人。他提出了“用户体验设计”这个术语，因为他想“涵盖人们对系统体验的所有方面，包括工业设计、图形、界面、物理交互和手册。” 从那时起，这些领域中的每一个都将用户体验，扩展到了自己的专业领域。
设计思维在解决“棘手问题”时特别有用。
棘手问题的特征
“棘手问题”一词是由设计理论家 Horst Rittel 在 1972 年创造的，用来描述本质上非常模糊 \ 特别棘手的问题。棘手问题，有很多未知因素，没有确定的解决方案。问题或解决方案可能与另一个棘手的问题有关，因此这是一个需要设计思维的持续过程。贫困、饥饿和气候变化是一些现代的棘手问题。
设计主题的范围是普遍的，因为 设计思维可以应用于人类经验的任何领域。
它可以用于：
符号和视觉传达：这包括平面设计的传统工作，如排版和广告、书籍和杂志制作、科学插图、摄影、电影、电视和计算机显示。
材料：这包括对日常用品的形式和视觉外观的传统关注 —— 服装、家用物品、工具、仪器、机械和车辆。
人类活动和组织性服务：包括对物流的传统管理关注，结合物质资源、工具和人类低效的序列和时间表，以达到特定的目标。
复杂的系统或环境：生活、工作、娱乐和学习。这包括系统工程、建筑和城市规划的传统关注点，或复杂整体部分的功能分析及其随后在层次结构中的集成。
设计思维起源于设计师的培训和专业实践，但这些原则可以被每个人实践并扩展到每个活动领域。（布朗，2013 年）
在企业中，设计过程可以为企业环境中的问题解决带来创新思维。它还可以用于医疗保健，通过向护士、医生和管理人员教授设计思维技术，我们可以激励相关从业者贡献新的想法。
不管是什么设计，理解和研究问题是必不可少的，因为我们能够从其出发，从而进行以用户为中心的设计。
设计思维的最早阶段是搞懂你能带来的情感价值。设计思维方法迫使你停留在提问与质疑阶段，而不是准确定义出问题后进入下一阶段。我们都有过快进入解决方案模式的倾向，所以设计思维方法迫使你真实地存在于这个不清楚、有时还非常混乱的时刻，从而使你对要解决的问题产生更好的理解。（利特克，2013）
传统的问题解决涉及提出一个解决方案，但设计思维首先使我们发散，试图为问题生成各种可能的替代解决方案。然后让我们进行收敛性思维，缩小多种可能性，找到单一的最佳解决方案。
根据利特卡和奥美 (2011) 的说法，设计思维的全部意义在于学习一种新的、系统的解决问题的方法。正如我们思考创造力一样，即使是设计思维也可以通过实践来教授和改进。
设计过程从来都不是线性的，它由多次失败和迭代组成（布朗，2018）。
首先，设计师试图将问题与过去的类似案例联系起来。如果这种方法不能提供任何解决方案，下一步就是使用知识和创造力作为一种实验思维形式来产生新的想法。使用决策矩阵对这些想法进行评估，从而会产生被进一步分析和测试的解决方案。如果成功，它将被实施。如果不成功，则需要重新表述问题，并重复该过程。这是一个迭代过程，即循环方法。
这一持续不断的重新再设计过程，源于和客户亲密接触的洞察。
学习设计思维不仅仅意味着学习一套新的工具。它还意味着：学习收集和分析大量数据；学习挖掘对象可能的形态而不是自主认为他是什么；学习管理不确定感，以及与许多新的伙伴合作（ 利特卡和奥美，2011）。你可以进行的研究类型分为三类：生成性研究、评估性研究和验证性研究。
一种常见的表述 —— 实际上是设计思维的另一种视角 —— 即设计师应该预料到会“很快失败或经常失败”（布朗，2009）。
当过程早期发生故障时，例如被拒绝的原型，实质上它可以为有效解决方案提供关键见解。这种观点与传统的先形成理论，再检验正误的方式相矛盾。
Airbnb、Braun 和百事可乐等多元化公司都在 采用设计思维并将其作为核心战略。例如，IBM 为全球旗下的 44 个设计工作室聘请了 1600 名设计师，并且正在培训数以万计的设计师员工建立深度创新能力 ( O'Keefe, 2017 )
设计思维为我们解决问题添加了以人为本的元素。当我们试图通过牢记人们的想法来解决问题，并使用基于直接观察乃至访谈的研究时，我们便会捕捉到与消费者需求一致的意外见解和创新。
它有助于将成功的产品更快地推向市场，最终节省企业资金。
IBM 的健康和人类服务组织的设计思维实践，通过有效使用设计和设计思维帮助企业将缺陷数量减少了 50% 以上。这种更高效的工作流程导致计算出的 ROI 超过 300%。
由于复杂的问题从来不能被所有人完全理解，因此在尝试设计解决方案时，处理歧义和多个并发的思路方向的能力是至关重要的素质。
设计思维通过综合和归纳思维，帮助实现质的飞跃。它允许通过解构来测试约束，并允许通过多样性思维和批评思维，来拥抱和探索歧义。
消费者通常不知道他们有什么问题需要解决，或者他们无法用语言表达出来。只有经过仔细观察，设计者才能根据真实消费者行为中看到的东西来识别问题，而不是简单地根据对消费者的想法来确定问题。这有助于定义模棱两可的问题，并找到解决方案。
该方法鼓励“跳出框架思考”（“疯狂的想法”）；它蔑视显而易见的事物并采用更具实验性的方法。
在早期的流程阶段鼓励大胆的想法，以产生创造性的解决方案。使用它是为了让设计师可以尝试开发新的不受约束的思维方式，或对常见问题的创新解觉方法。
根据大多数设计学院的说法，具备特定特质的人能够更好地发挥设计思维的作用。
同理心：从多个角度想象世界 —— 同事、甲方客户、实际使用者和消费者的角度。要成为更好的同理心，必须倾听和观察他人的行为，注意并获得洞察力。
综合思维：重要的是不仅要有分析能力，而且要能够提出新颖的解决方案，还要凭直觉。
乐观：除非你相信有解决方案，否则在遇到挑战且解决方案遇到瓶颈时，你可能会放弃。
实验主义：重大创新并非来自渐进式调整。设计思想家以创造性的方式提出问题并探索限制因素，并朝着全新的方向发展。
协作：产品、服务和体验日益复杂，因此必须拥有一支具有不同背景的团队，以帮助从多个角度看待问题。
当我们想到一个问题的多种解决方案时，对我们解决问题会非常有帮助，因此“功能固定性”阻止了我们以新颖的方式使用旧工具解决新问题。想要摆脱功能固定，首先是要让人们可以使用“改造后的衣架进入上锁的汽车”。这也是盗贼第一次可以用信用卡撬开简单的弹簧门锁。
为了帮助设计师利用文科和技术理论，整合多个领域的知识以找到创新的解决方案，我们采用设计思维来获得洞察力。该方法侧重于可视化和操作，因而帮助我们更容易地了解实际解法，而不仅仅是理论模型。
第一批美国公司在 2000 年代初期开始实施设计思维，这一概念引起了德国投资者 Hasso Plattner 的兴趣，他于 2006 年资助创建了两所设计学校（d.schools），其中一所位于波茨坦大学（德国），另一所位于美国斯坦福大学。由于两所学校都成功地为大型组织提供了高管设计思维培训，因此该研究重点关注这些国家，以寻找早期实施者。
设计思维通常涉及希望参与整个设计和开发过程的庞大利益相关者团队。
观点、才能和经验的多样性被认为是注入新思维的部分重要来源。多样性确保通过融合不同的观点、技能和知识来产生创意（卡振思，2018 年；萨梅和德拉赫-扎哈维，2013 年）。设计思维的协作方法和工具可帮助团队以积极的方式利用他们的差异。
决策是平等的，因为每个成员的意见都被征求和使用（卡尔格伦等，2016）。
当 IDEO 去 Apple 展示他们的鼠标时，它不是什么花哨的设备，而是一个用胶带粘起来的原型。
低保真原型制作起来既快速又便宜（ 想想几分钟和几分钱 ），但可以从用户和同事那里得到有用的反馈，这符合快速验证、廉价试错的原则。为每个想法投入尽可能少的资源意味着前期投入的时间和金钱更少。此外，将多个原型带到现场进行测试为用户提供了比较的基础参考，同时也有助于揭示某些需求。
为了创新，设计思维意识到认知和行动对创新过程很重要。认知包括接受度、乐观和创造性的信心（ 凯莉 & 凯莉，2013；郑，2018），而行动包括快速原型设计、旅程地图和假设浮现（ 假设浮现：assumption surfacing，这是一种评估技术，涉及写出潜在的假设和反假设。）（ 卡尔格伦等，2016；利特卡，2015）
如果领导层不欢迎风险、模棱两可和风格的改变，实施起来就会变得更加困难。它会被管理者“质疑”其具体指标
沃尔特斯 ( 2011 ) 声称，由于设计思维的模糊性，它与组织文化相冲突。
据受访者称，在日常业务中使用设计思维之所以不会是最优选项， 因为它是资源密集型的，增加了工作量。（ 丽莎等，2016）
在医疗保健等规避风险的行业和公司中，“经常和早点失败”的方法被认为是非常困难的。
许多设计师反对设计思维这一观点，设计思维不仅关乎一个过程，而且关乎改变思维过程并提高人们可能提出的解决方案的创造力。
“设计思维”的推广已被大型全球公司用来增加业务。不过，在更广泛的设计世界中，我甚至会说“设计思维”的过度宣传导致了所提供设计质量的下降。—— Yasushi Kusume
弗吉尼亚理工大学科学、技术和社会助理教授 Lee Vinsel 在《设计思维运动是荒谬的》中写道，“归根结底，设计思维与设计无关。这与文科无关。这与任何有意义的创新无关。如果这意味着重大的社会变革，那肯定不是关于“社会创新”。这是关于商业化的。”
观察人们的行为以及他们如何与环境互动，可以为你提供有关人们想法和感受的线索。
你可能认为你知道问题所在，但只有通过观察才能了解消费者真正需要什么。
宜家派设计师到人们家中，观测他们的互动行为来了解他们的需求。这将使设计者能够推断这些经历的无形含义，以发现洞察。这些洞察提供创新解决方案的构思方向。而事实上，最好的解决方案来自于对人类行为的最佳洞察。
Good Kitchen 是一家为老年人和体弱者提供膳食的社会服务机构。起初的问题似乎是设计不当的膳食菜单。然后设计思维揭示了无数问题，所有问题都源于服务本身的性质。因此，经由对服务进行了彻底改革的之后，最终提高了客户和员工的满意度（利特卡，2014）
作者：用尽晴天来源：站酷网
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
蓝蓝设计的小编 http://www.lanlanwork.com