如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

你可能已经注意到，在17、18年的时候，渐变在印刷和web设计中的使用的越来越多了。看起来设计行业已经接受了这种趋势，这种渐变过渡在形状和颜色上只会越来越动态。如果你不知道如何将彩色的形状和背景应用到你想要通过设计传达的信息中去，那么使用彩色的形状和背景是一件棘手的事情。

5大渐变趋势是什么，如何在你的工作中有效地使用渐变呢?

1、 双色版的渐变

双色调渐变是两种颜色，它们之间有平滑过渡。没有更多，没有更少。使用Illustrator中的渐变工具创建这些类型的颜色过渡非常简单。当为Duotone渐变组合颜色时，没有规则。当你混合3种颜色或更多颜色时，规则就会出现.但是两个，你可以做任何你想做的事情。这一切都取决于你对设计本身的意图。如果你需要强大而大胆的信息，那么你可能需要考虑使用更鲜明，更高对比度的颜色组合。另一方面，如果你希望采用柔和，更安静的方法，则使用较少饱和的颜色就好了。看你怎么用了

如何使用双色版的渐变？

你可以像Duotone Gradients一样有创意。这种类型的渐变最广泛使用是照片叠加。渐变主要用作内容的简单背景。以下示例是由JessicaHägg和Stink Studios为Spotify创建的此类案例之一。

Duotone Gradient的另一个例子是由Barthelemy Chalvet为AgenceMe创建的家庭导航设计。在这里，我们再次将Duotone视为内容的背景。内容包括文本和插图。但是，图中使用的颜色非常谨慎。插图主要是浅色调，只是一些色彩鲜艳的细节，与背景双色调（温暖）相反（冷）。

总而言之，使用双色调渐变趋势的最安全方法是将渐变背景与黑白照片混合，或将它们作为照片叠加层应用。如果你将它们与其他颜色混合，请确保不要过分。多种颜色在设计中可能非常出色，但如果匹配不当，它们也会引入混乱和混乱。如有疑问，请使用较少的颜色。在大多数情况下，少即是多。

2、半透明渐变

前五大渐变趋势包括半透明渐变。这些类型的渐变在它们中具有褪色效果，它们在一端具有全色调，而在另一端具有0％颜色不透明度。

这些半透明渐变可以是双色调甚至是三色调渐变，但它们总是以透明度结束或开始。

如何使用半透明渐变？

使用半透明渐变的一种方法是将它们与其他渐变形状和背景重叠，或者作为照片上的叠加层。下面的示例显示了Studio-JQ制作的艺术作品

在这里，我们可以看到在三色渐变圆上使用一个半透明形状。微妙的半透明形状在渐变圆形前形成雾气氛，就像褪色的月亮，简单而有效地使用透明效果。

在Magdiel Lopez制作的海报艺术品中可以看到混合了摄影和纹理的半透明渐变的另一种奇妙用法。

三、网格渐变

网格渐变是在Illustrator中使用网格工具制作的渐变，因此是标题。这种类型的渐变需要更多的技巧来制作。通常它们将多种颜色混合在一起，这应该小心生产，因为某些颜色不能很好地匹配。除了将多种颜色混合在一起外，它们还形成一种类似于液体的纹理图案，使其具有更加动感的外观。

到目前为止，您可能已经注意到所有渐变如何与黑白照片完美配合，为他们提供增强色彩强度所需的对比度。它还消除了设计中“过多”的混乱和感觉。

如何使用网格渐变？

网格渐变可以用作独立模式。由于它们通常具有动态外观，因此可以作为简约模式应用，并辅以创意印刷术。

使用网格渐变进行品牌推广也越来越受欢迎。这种类型的使用可以在下面由Focus Lab制作的简约品牌项目中看到。

4.渐变模糊

这是事情变得有趣的地方......。介绍渐变模糊！我相信你已经看到了这些有趣的外观，有一种强烈的“艺术”感觉。它们现在是Top 5 Gradient Trends的一部分。

如何使用渐变模糊？

它们似乎经常被用作海报设计的一部分。抽象的伟大之处在于它可以用来描述各种情感和抽象概念。它可以说明声音，光线，宇宙，幸福或悲伤。我们根本不知道如何描述这些单词中的许多单词，但精心挑选的模糊彩色形状可以帮助我们。

让我们看一些使用渐变模糊的示例：

5.渐变球体

最后的渐变趋势是渐变球体，具有强烈三维形状的网状圆圈，提醒我们在行星和气泡上。

如何使用渐变球体？

Gradient Spheres在应用程序和网页设计中占据了一席之地。由于它们与行星类似物体相似，因此它们通常用于技术未来类型的项目中。例如，Jiyoon Kim使用Gradient Spheres设计一个具有轻盈未来感的创意手表UI。

Mirtho Prepont为Asana制作的海报设计中使用的Gradient Sphere的另一个创意示例：

写在最后

如果你使用渐变的照片，第一步应该是选择正确的照片。最好的选择是具有清晰焦点的照片，如果可能的话，焦点周围没有其他任何东西。值得花时间的第二件事是照片的颜色。如果颜色与你的渐变无任何关系，最安全的做法是将照片切换为黑白模式。

但是，有时可以通过在Photoshop中使用“颜色饱和度”工具或“颜色平衡”来调整颜色。这正是我在这个例子中所做的。第三是选择渐变形状和背景。

选择正确的渐变对象时，请确保它们都具有相似的色调。在我的例子中，我使用蓝色/紫色物体与粉红色/黄色物体形成鲜明对比。这些都是我需要的颜色。任何更多的东西，组成会感到混乱。虽然很容易穿过线，所以如果你不确定，只需要减少颜色和减少形状。

如果你感觉某些东西仍然缺失，请添加中性几何形状，如果背景为浅色，则为白色;如果背景为暗，则为黑色。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

Cheatsheet总结了我的方法

我最近致力于为电子健康记录（EHR）产品定义间距系统，以改善产品页面的可读性和一致性。我提出了3个间距规则（3C规则）和以4为基准的间距网格，并且这些规则与新的印刷系统配合得非常好。

存在的问题

当定位垂直元素时，设计师不应做出随意或者任其自然的判断。通常设计师通过按住Shift和上下箭头键在Photoshop中实现垂直增量：“根据实际情况来决定使用5px或10px。”这种方法虽然是10的倍数并且可用，但是它不符合任何印刷要求的规范。

——Robert Bringhurst，著有《印刷风格元素》一书。

• 我们在EHR产品中使用了5px、10px、15px、20px的边距/填充，但是在何时何种情况下使用这些间距，我们并没有一个严格的规范。

• 边距/填充只是间距系统的一部分，字体行高也会增加额外的高度空间，但目前我们没有为现有（旧的）文字样式创建行高规范。

• 相似的组件和内容在产品中看起来不一致，这造成了EHR产品的整体样式不统一，并且因为数据疏密程度不同，造成了阅读体验的不流畅。

解决问题

步骤1：确定文本行高（确定基准网格）

首先我们假设使用非常流行的8点基准网格（即以8的倍数为一个间距规单位）会达到好的效果，因此在实验中，我把基准主体字体大小设置为13px，行高设置为8的倍数即16px或则24px然后看看这两个行高规则是否有用。如果没用，则意味着8点基准网格是不适用的。

然后我将基准字体大小设置为13px，并在16px和24px之间的偶数寻找行高值。开始我将它与18px（6的倍数）匹配，如果成功那就意味着我采用了6点基准网格，也就是6的倍数（间距会是3、6、12、18、24）。后来我尝试了20px的行高，使用起来效果很好，所以我采用了4点基准栅格（也就是间距为2、4、8、12、16、20等）。

步骤2：用希克定律和几何级数来确定间距值

“随着可选择数量的增加，做出决定的难度将会增加。”

——希克定律

我们要想出一个可感知的间距系统来简化设计决策，另外将所需值的数量保持在一个最小范围内。

• 间距值是基准网格的倍数数值（如步骤1中确定的4点基准网格），因此我的间距值为4点基网格（2、4、8、12、16、20、24、28…)

• 一般来说，4–-5个间距值已经为产品设计提供了足够的差异性，即使对于复杂的企业产品也足够了，但是在实际过程中可能需要灵活的在规范中增加间距值。

•    我决定使用4点基准网格，因为它提供了更好的视觉可感知区间，对于层次结构的展示来说非常好，因此间距值应该是(2、4、8、16)。

如何以可预见的方式应用这些间距值？3C法则来拯救你。

我深受Nathan Curtis上面文章中介绍的Insets，Stacks＆Inline等间距词汇的影响。我决定在其基础上构建一个额外的词汇组，以便我的团队更容易理解每个词汇的使用环境。我将所有的间距规则分解成3个C：容器、内容和组件。

· 容器规则使用了平方差的概念（使用16px）

· 内容规则使用了堆栈的概念（头部堆栈使用2px，叶节点堆栈使用0、4、8、16px具体取决于内容类型）

· 组件规则使用内联的概念（大多数情况下使用8px，4px表示关联关系）

第1C：容器规则

容器是UI中的框架，其中包含内容，通常这些内容是页面、卡片、模态、弹窗等。由于容器在层次结构中处于最高层次，所以我确保所有容器的间距值（在我的例子中是16px）。提示：切勿在任何间距计算中包含边框。

第2C：内容规则

• 内容存在于容器内部，内容包含：

• 标题（h1、h2、h3、h4、h5） 以段落，列表，表格，表格的形式穿插数据。

所有这些内容都是使用页边距垂直叠加的，但字体行高也为指定的页边距增加了额外的间距。我无法以一致的方式解决这个问题，因此我同时考虑了行高和边距，创建了自己的处理堆栈的方法，以下是我的过程：

A）首先解决头部堆栈

• 如下图，我通过使用2个选项来获取标题的行高。

• 为了简化这2个选项之间的行高决策，我计算了每个行高比，并决定使用等于1.5或更高的行高。对于选择哪个行高，我仍然犹豫不决，但是在进行了视觉探索并回顾了设计团队的结果之后，我们确定了应该采用那个行高选项。

视觉探索的过程

• 我从顶部的H1开始，尝试使用2px、4px、8px等的不同间距选项。行高为36px的间距选项都很紧凑，但4px间距与行高40px感觉恰到好处！

• 接下来我解决了H2问题，在我们的产品中，H2恰好是白色页面的第一个标题。所以根据容器规则，最上面的H2在顶部有16px。我决定在所有H2标题上面给出16px间距高度（最大允许间距值），因为这个值使得层次结构非常清晰。

• 然后我在所有标题（H2、H3、H4、H5）和列表、段落、表格之间进行了间距值0px、2px、4px和8px的实验。2px和4px的间距相差无多，但是我们在设计团队内部审查结果时，2px的视觉感知更好，尽可能的坚持只有一个边际数值，因为它简化了设计和开发过程。

标题和叶节点间距实验

标头堆栈 - 间距为2px和4px

B）接下来解决叶节点堆栈

EHR有4种主要类型的叶节点：

• 表单（几乎50％的产品）
• 列表（几乎30％的产品）
• 表格（可能是产品的15％）
• 段落（可能是产品的5％）

我开始为最简单的内容类型——段落来处理间距。

每个段落内的间距

这非常简单，只需要清空段落中的所有文本行空间，这样两行之间就有0px边距。

Sketch中的排版段落（行高20px是通过视觉探索得出的，并使用WCAG SC 1.4.8进行验证，其中规定“ 行间距至少是段落内的空间的1.5倍 ”（20/13 = 1.538）

两个连续段落之间的间距

我第一个想法是使用行高为20px的间距，但后来看到了WCAG SC 1.4.8，其中指出   “段落间距至少要比行间距大1.5倍，因此一段最后一行的行高为250％，这样可以保持距离下一段第一行间距更合适。 假设％值是根据基本字体为13px的大小计算的，我计算出两段之间的实际间距应约为（ps - ls）= 13px，将使用margin-bottom：13px在CSS中定义。但是13px不是我们在步骤2中确定的间距值之一，因此我选择了16px作为段落底部的边距。

解释WCAG SC 1.4.8中的段落间隔规则

在Sketch中多段落排版

如果对计算结果有疑问，我总是用视觉探索进行交叉检查。与其他可能的值相比，段落之间的16px间距最佳。其实我认为12px间距会更好。但是我不想仅为这个用例为整个间距系统添加额外的值，另外我们的EHR产品没有很多段落，几乎没有任何连续的段落。

列表中列表项内的间距

列表是由多个同质数据项组成的数据结构，由于列表将所有这些同质数据项组合在一起，因此列表项不像段落（它们之间有16px）那样间距很重要。同时列表项仍然需要稍微分开，所以我尝试了0px和16px之间的间距，我只有3个值可以试验2、4、8，总体看起来列表项之间的间距为8px看起来最适合层次结构。

带有标签的2个连续输入字段之间的间距

表单有连续的输入字段，一个接一个地叠加在另一个之下。

无标签2个连续输入字段之间的间距

无标签对于可访问性来说并不是一个好的处理方式。然而在某些情况下，标签最好不要显示，这些情况是：

• 当多个输入字段一起表示1个对象时（例如在下面的地址部分，“地址”字段包括街道地址1，街道地址2，城市，州，邮编）
•   当标签过于明显/重复且无法拼写时，例如搜索。

第3C：组件规则

组件有按钮、输入字段、图标等，这些组件通常放置在一起（内联）。此外所有的组件的尺寸均为4的倍数（也是8的倍数），因此按钮和输入域内部有一个24px高度的空间（加上1px 顶部和1px的底部边框，整体高度为26px）。当组件能完美利用好基准网格，并且按规则设置间距时，整体布局才会完美和谐。

2个组件的间距

我用了一个简单的规则，即在大多数时候任意2个相邻组件之间使用8px间距。在少数情况下使用4px来显示两个组件之间更紧密的关系（格式塔的接近性原则）。

组件内部间距

我对组件内部的任何左/右填充都使用了8px。

图标在组件内部间距

根据格式塔的接近性原则，将图标放在组件内，将他们的间距设置为4px，而不是通常的8px。

外部图标与组件间距

如果图标与组件关联组合，则其与组件间距为4px以显示其关联关系（格式塔的邻近原则）。但是如果图标与一组组件关联，那么它与最后一个组件间距8px，以表明它不仅仅是与最后一个组件关联，而是与整个组件关联。

结论

• 你将提出一个具有有限数值和有明确使用规范的间距系统，这非常易于使用并且合乎逻辑记忆。
• 在UI中使用间距，使其信息层次结构更加合理清晰，并遵守可访问性指南WCAG1.4.8，这有助于不同能力的人更好的掌握和理解信息。
• 开发工程师了解间距系统，并且熟悉其应用的场景和规则，这样可以让设计和开发之间的沟通更顺畅，工作效率更高等。
• 设计师不再需要对所有内容进行排查，开发工程师不再需要花时间检查Zeplin等其他工具中样式问题。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

UI走查表有什么用？

一套成熟的UI走查表能更科学更地改稿；减少设计中的反复试错、评审交付时更言之有物；不仅仅停留于“看上去顺眼”、“我觉得挺好”、“先这样”的视觉表层。更深一层来说，走查表有助于培养设计师的结构化思维，形成一个完整的设计体系。

01.页面要表达的意思是否正确

在设计页面的时候，需要注意页面要传达给用户的信息重点，例如本次案例的产品需求中，该页面的功能是促使用户快速下单，信息上则要侧重于价格与优惠信息。

首屏信息是给用户的第一印象，在用户打开页面，尽可能展现出更多用户感兴趣的内容， 而此次页面需要突出促销优惠信息，次要信息则放在后面。

02.页面视觉重点

相信大家平时经常听说0.618的黄金比例（斐波那契数列），屏幕方寸间合理运用黄金比例可以让界面视觉重心更加平稳，视觉更加舒适。同时有助界面区域分割，集中视觉焦点，承载更重要的信息，让整个界面布局更加合理。

淘宝、京东到家等成熟的一线产品黄金比例运用，o在视觉焦点区域都向用户展示了关键信息。

02.元素间距符合各层级的关系

为什么页面会杂乱无章？主要是信息一味地堆砌，分布没有区别，但只要遵从以下方法，页面就会清晰很多，有节奏的呼吸感也出来了。

同类的板块不应被混乱的间距区隔开来，他们应该更集中，并且整体与别的板块区别开来，同理，不仅仅是板块，元素与元素之间也是如此，这样用户可以更加快速地看到自己想要的东西。

那么，如何更好地让信息按照相似属性分布合理呢？这就要利用5分、等分原则来让分布变得更合理，假设相同板块的间距值为a px，则不同板块为2apx。这样不仅在视觉可以将信息分布开来，还能让整体的布局更加规整，不会凌乱，尽可能使用同一或者同倍数的间距，更便于开发。

案例中，相近元素的间距为16px（a px），则不同类别的元素则为32px（2a px）。

01.字体种类的控制

一个产品如果字体种类过多，会导致界面的不统一与混乱。通常字体控制尽量在3种以内，中文字体、英文字体以及特殊数字字体。如下图：

02.字号与粗细控制

字号过多使信息失去重点，基础字号控制在3种以内，目的在于清晰区分信息的层级。正文字号建议为28px，副文案为24px，大标题、价格等重要信息需按实际情况加大，令信息的层级区分更明显。

加粗字体往往是整个界面的视觉焦点，重点的文本（如标题、价格）需要加粗处理，注意控制字体加粗的使用，以免造成信息层级的混乱。 下图为调整字号及粗细的前后对比：

03.行距控制

行距太小不便于用户阅读，太大会显得松散，所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比：

04.字体颜色

字体主要以黑白灰为主：#333333､#666666､#999999；字体颜色深浅有序能让信息层级主次分明，产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值，并在产品中反复使用，统一规范输出。

信息越重要，字体颜色越深。除此之外我们还需要注意到什么呢？也是很多刚入行的设计小伙伴很容易忽略的细节，产品的实际使用环境。比如，我们此次改版的产品详情界面就是线上下单，线下提货的运营模式，不仅需要考虑室内使用环境，还需要考虑到特殊的室外强光环境。结合下图感受一下。

如何在强光环境下保证产品良好的视觉体验呢？这也是UI走查表需要注意到的细节点：强光测试(大于4.5:1)。

4.5：1经验数值参考前辈行业经验总结：

https://www.w3.org/TR/WCAG20/

https://www.sitepoint.com/making-bootstrap-accessible/

我们先观察一组颜色对比，如下图：

我们会发现字体颜色层级依然是深黑色、中黑色、浅黑色，相信很多设计师朋友已经注意到我们使用的颜色更深了，为什么呢？为了保证好在强光环境下的信息阅读可阅读性，如下图：字体信息最浅层级，浅黑色的色彩数值对比数值都大于4.5:1。

强光测试链接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF

有细心的设计师朋友或许已经注意到色彩值并没#333/#666/#999那么便于记忆了，为什么呢？

为了提升更好的视觉感受与界面的品质感，我们在字体颜色中采用了偏蓝灰，至于为什么，大家不防给我一起观察下图，上图灰色看上去略微有一些脏脏的感觉，下图视觉更耐看、更有质感。

腾讯新闻、金色财经App中的也应用到了偏蓝灰，带来种扑面而来的清爽。

除了常用字体层级的颜色对比，在界面中针对关键的卖点信息还用到强调色，即品牌色

品牌色也会经常运用到特殊字体、提示文字、链接等等。

改版前，促销信息缺少提示入口；改版后，以品牌色作为入口字体颜色，引起用户注意。

01.视觉比例

由于图标通常都是成群结对的出现，彼此之际的统一性显得非常重要，但是常常容易被忽略，可以制定如下图的图标盒子来规范尺寸。

02.图标设计要点

设计图标时应注意基础形状复用，保持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行设计，既能统一大小又有整体感。

面性图标

设计时需要注意挖空比例的一致性，保持图标的整体性。如价格走势、降价通知这一排图标，挖空比例控制在20%

线性图标

设计时应注意保持良好的线条粗细的统一，案例中使用2px的粗细线条重复使用，所有图标的粗细与文字粗细一致，和谐统一

03.图标尺寸

在app中，功能图标大致可分成两种：可以点击的按钮；不可点击的展示图标。

可以点击的按钮常用于导航栏、tab栏、操作栏（吸底按钮图示）常用尺寸为：48x48px 64x64px。如下如的导航和吸底按钮都用了48x48px的大小。

不可点击的展示图标常用于信息展示位置（价格走势/规格/评论等图示）常用尺寸为：24x24px 32x32px，如下图，评论模块中的展示图标使用24x24px，价格走势则使用了32x32px的尺寸。

04.标签的走查规范

从商业的角度，标签是为了凸显产品卖点，比如你在商场时常能看到“全场低至2.9折”这类的促销信息，其实在界面中同样也会有，目的就是为了抓住用户贪小便宜的消费心理，对比没有标签的同类商品，用户会更佳倾向与有有标签的商品。

常用标签样式有三种表现样式，面性：填充一整个色块；线面结合：低饱和度的色块结合高饱和度的描边；线性描边：1px粗细描边；

如上图：为展示清楚，在原来基础上放大了1倍，运用规则与之前提到的图标一样，根据模块功能的重要性去搭配，按照重要到次要的排序是：面性>线面>线性

标签呼吸感规律：

很多初级设计师都在疑惑到底标签文字定多大合适呢？标签字号一般为：18-22px

以"自营"标签为例

如上图：外框边距横纵向成2倍的倍数关系，所以以后在画标签，只要先定好字号大小，剩下的边框边距就按照2倍的关系去拓展

为了确保我们做视觉稿的时候易于文本的阅读我们通常会用到一些配图，而这些配图通常也影响着我们整个界面的美观度，一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例，图片的选取当然也是重中之重，那么我们在项目中应该如何选取图片并且正确的使用图片的比例呢？

01.图片使用的规范

第一点：首先就是要做到让图片的背景保持统一并且做到干净整洁

第二点：图片主体的比例大小跟其他图片保持统一避免出现有些图片展示局部有些图片展示整体

02.图片模块的常用使用比例

UI设计中图片的比例会比较的多常用的有下列几种

1：1，这种比例比较适用于电商，它可以让商品图片展示最大化。也是目前电商最主流的图片使用尺寸。如下图：

16：9，这种比例比较适用于视频，这是标准的人体工程学比例，根据人体工程学家的研究发现人的两只眼睛的视野范围并不是方的，而是一个长宽比例为16：9的长方形，所以我们看到的视频比例通常会采用16：9。如下图：

4：3，这种比例应用于新闻类APP比较的多，它源自于一些微小型相机最原始的尺寸比例，不需要进行过多比例的裁剪，应用起来比较方便，对于需要展示大量的图片信息类的产品来说特别的适用。如下图：

如果你还是不知道如何去使用尺寸，那么你可以直接查找相关竞品进行设计。

压轴给大家带来一个小惊喜，我们整理了一个较为完整的设计走查表，希望在实践中能够帮到大家。

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

上周和小伙伴一起翻译了一篇 medium 上点赞量超多的文章（8.1k赞），该文作者在电子产品的界面设计领域有13年的从业经验，也经历了从架构师到用户体验设计师再到如今的产品设计师的多次职业转换，文章主要是讲他对用户体验设计的犀利吐槽，以及对产品设计所代表的工作方法的无限看好。或许观点上并没有什么新意，但是，就像某大佬说的，设计是对混乱的驯服。想要驯服混乱仅凭理论套路是远远不够的，而设计师真正的价值或许也就在于此：投身于未知与混沌的灰色之中，并且还要从中分出黑白。

那么为什么我要翻译这篇巨长的文章呢？就我个人而言，单纯很喜欢作者傲慢中带着犀利的风格，就像看一篇文字版的吐槽大会般有趣。我在翻译的时候加上了自己的思考和看法，所以，文末也留了 medium 的原文链接，可以去查看作者的本意，并观看其中的演讲视频。

这是关于我从架构师转变到用户体验设计师的一段经历，以及我是如何看待行业现状的。

十年前的某一天，我决定要把我的职业从架构师改成用户体验设计师。我记得当时很多可用性专家、架构师、界面设计师、交互设计师对我说：这只是潮流而已，「用户体验设计」这个表述并不，简直就是胡说八道，体验怎么可能被设计？

然后在去年，我又突然决定把我的职业从用户体验设计师改成产品设计师。同样的，一群用户体验设计师又来对我说，这只是潮流而已，用户体验设计师和产品设计师之间并没有什么本质的区别。

但是，对我来说，它们是不同的。在我看来，产品设计更加的谦虚真诚。我觉得这是用户体验设计师不具备但最应该学会的：谦虚务实。

我不是在劝你像我一样改换职业名称（坦白地说，你最好别这么做），我真的一点儿也不在意。我只是想告诉你，我决定转变的原因，以及我是如何看待行业现状的。

很肤浅的话题，聊职称大概是世界上最无聊的事儿了，但是作为设计师们，我们又确实很喜欢讨论它。或许，这次我们可以聊的更深入一点。

用户体验设计的出现是因为我们设计师的需求

我一直很喜欢 Alan Cooper 提出的这个词：交互设计师（interaction designer）。我认为它很地抓住了这项工作的本质。但是早在十年前看来，这个词的定义就已经很狭隘了。数字产品的设计师们希望工作能触及到更多的内容，而「用户体验设计」似乎就承担了这个「需要触及更广泛内容」的责任。

它确实抓住了这个需求，现在 UX 这个词广泛流传，每个人都在使用这个缩写，但问题是每个人对它的理解是不同的。所以，直到现在它也是个令人疑惑的概念。

在Peter Merholz 的一次访谈中，Don Norman 对创造 UX 这个词的初衷做了如下解释：

我发明了这个词是因为我觉得人机交互和可用性这两个词儿太狭隘了。我想要创造一个可以覆盖人们体验各个方面的系统，包括图形设计，界面，体感交互和这个系统的使用手册。但从那之后，这个词就开始广泛地流传，慢慢地失去了它本来的意义。

如今它偏离本来的意义越来越远，以至于 Alan Cooper 先生说：根本没有用户体验设计这回事。

UX设计师是如何看待自己的以及他们真正做的是什么？

在我们尽可能扩宽工作边界的努力之下，我们把 UX 这个气球吹得快要爆掉了。UX 现在承担了「设计不同触点的体验」的任务，包括组织转型，制定策略，改革创新，市场营销，设计从 app 到广告、服务、设备、地点、事件，甚至公司文化在内的所有事情。

或许用户体验确实应该做到这些，但是问题是，没有一个用户体验设计师能一个人把所有的这些事情做好，要创造一个复杂的产品，你需要的是一个由不同领域专家组成的团队。

我不得不说很多 UX设计师真的是眼高手低，他们根本不具备足够的技能或者经验去支撑他们的野心。

我同时也负责招聘的工作，大多数申请 UX 这份工作的求职者可以分为以下几类：

• UI/UX设计师，其实就是图形设计师，他们并不擅长信息架构、定义目标和需求，创建交互模型，考虑商业利益。他们只生存在追波上。
• UX设计师，他们靠画规范的线框图谋生，有时候也做做可用性测试。（顺便说一句，他们是最有可能成长为优秀的产品设计师的人。很多有经验的 UX设计师叫他们「线框仔」，我真的很讨厌这种没必要的鄙视。他们忘了自己也是这么成长起来的。）
• 空想家，专注于建工作坊，喜欢在墙上贴便利贴和画布，但是通常没有把想法转化为实际设计方案的能力。

当然，以上只是一种简单的归纳，但是从我的观察来看，很多做 UX 的都可以归到这三类人当中，因为真的很少见到那种既懂战略又会战术，既有创造力又有执行力，既了解商业又懂设计的人才。

UX设计师日常做的事情以及他们对商业的价值根本配不上他们的自我认知：「用户体验设计很重要 」。

用户体验设计实际上并不像很多「什么是UX」的文章写的那样是所有事情的中心。我推荐你去看Paul Addams在UX London 2018上的优秀演讲——《The end of Navel Gazing》。标题「用户中心论的终结」很好地表达了这个意思。

UX专注于用户和工具，但是这两点并不足以解决真正的商业问题

我观察到的另一个现象，是关于用户体验设计目前的状态的。UX设计师们每天都会发表数不清的文章，它们大部分都是关于研究工具以及方法论（例如用户画像，用户体验地图，原型制作工具，用户研究方法等等），各种教程，无关紧要的图形设计趋势，或者用户界面细节。

Fabricio Teixeira 和 Caio Braga 写了一篇优秀的文章来说明这些理论的狭隘之处：

https://essays.uxdesign.cc/state-of-design-publishing/

然而，这些我们经常讨论的东西，对于处在残酷商业竞争环境下的产品设计团队来说，并没有什么用。因为计划与管理实际的产品开发进程和理想的「Design thinking 五步法」之间并没有太大的关系。

整个 UX 行业好像对商业这部分都没什么兴趣，也难怪，「用户体验设计」这个名字就暗示了他们只关注用户。商业是别人的事。

UX设计现在很像一个宗教，而且它的信徒的想法通常都很接近

也难怪会冒出 UX 的忠实捍卫者们了，如果你胆敢不同意他们的信仰，他们就会把你的心扯出来。

仅仅只要说一句：用户研究不是总是被需要和有实际意义的。他们就会告诉你如果你不会用户研究，你就不是一个合格的用户体验设计师。如果你个人并不是很喜欢一些方法论，像用户画像或者其他，你最好赶紧默默溜走。

可悲的是，UX们总是想成为最有创新能力的人。但是我认为他们并不是。因为，创新力需要尝试不同的工作方法，考虑新鲜的想法，要求与众不同以及灵活多变，敢于实验，勇于实践，并拥有商业头脑与落地思维。想要成为真正的革新者，需要的是自己去开创自己的道路，去突破规矩，去冒险。而不是重复说那些所有人都在说的简单的陈词滥调，遵从那些轻而易举的方法指南。我觉得 UX设计师整个群体都搞不清楚地图和实际道路，模型（或其他噱头）和现实之间的差别。（只有这些「革新者」的想法才很容易被预测：因为他们所有人都读一样的书，说着同样的话。）

我感觉我已经超越了UX

我从事数码产品的设计有13年了，现在我不觉得我和大多数的 UX设计师之间有什么共同点。我觉得我已经超越了用户体验设计。我跟产品经理或产品需求方之间更为投契。

Peter Merholz 在他的一次演讲中说过，用户体验这个行业的出现是因为产品经理对用户体验缺乏考虑，我同意这种说法。

数字产品就是我现在正在做的，像网页，app，界面。我的目标是为我的客户创造一个成功的产品，一个会帮助他们赚钱或者省钱的产品。可用性和用户体验只是实现这个目标的一部分，它们很重要，但是说实在的，并不是最终的目的。我不会像大多数的 UX设计师那样不切实际的浪漫主义。

我也需要为我自己和我的公司赚钱，所以我要擅长规划一个有效率的设计流程，估计好预算，有条有理地和客户进行合作，销售与推广我的工作，招聘人才等等。

我知道我很擅长数字产品设计，但是我可能并不擅长做所有类型的设计。这就是为什么我更喜欢「数字产品设计师」这个头衔的原因了。

我喜欢它的点在于，它更聚焦于产品而不是用户。它把我的工作放在了资本市场的背景之下。产品需要对顾客有用，但是也需要切实地有利可图。

对我来说，无论它是什么，听起来，「产品设计」比「用户体验设计」都更加的落地。产品设计更容易被所有人理解，甚至你妈妈也能懂。它不需要太多解释。用户体验只是它的一部分，但是从另一方面讲，比起想要解决世界上所有问题的万能药UX 来说，产品设计这个说法更加的谦虚。

现在我大部分时间依然是在做交互设计和信息架构这种传统工作。我大部分的精力也都是花在制定策略，进程管理和设想概念的层面。但是我也正在带上许多的帽子：决策者，界面设计师，架构师，文案，创意总监，项目经理，产品需求方，用户研究员，测试人员。总之，哪里有需要哪里就有我。

当然我需要和很多人（他们是各自专业领域的专家）一起合作来实现我的愿景，然后把它迭代变得更好，更完善。技术专家，开发者，图形设计师，内容设计师，项目经理，甚至律师等等。最后的用户体验其实是很多这些人的工作共同作用的结果。

用户体验是很多人工作的结果，是一个产品或者服务生产出来的，并不是一个职位的描述。

我会把产品设计师定位为这样一个角色：他们是那些为产品功能和形式的最终呈现负责，并能够以任何可能的方式对设计流程以及产品的发布进行规划和优化的人。（如果你还把产品设计仅仅看作是 UI/UX 的另一个名字，这对你毫无帮助）对于很多有经验的 UX设计师来说，并没有什么新鲜的，但是产品设计确实和 UX 不同。

我看到如今，越来越多的有经验的 UX设计师称自己是产品设计师了，所以，也许这是一个潮流吧。又或许是某种原因？

Andy Budd，一个有着很棒的见解的家伙，我一向很尊敬他，最近他发了一个推特说：UX就像爵士乐，产品设计就像朋克乐。

好吧，我的看法跟他完全相反。打比方说，如果你想成为一个 UX设计师，你现在要做的只需要去上个周末课程，学习设计过程的5步法以及5个方法论，像用户画像，用户体验地图，愿景图，你就可以开始干活儿了。

但是成为一个产品设计者，你需要把产品交付给市场的实际经验，这非常的难，因为经常是一团混乱，复杂的过程。产品设计就像自由的爵士乐。可能听起来混乱嘈杂，有一点像朋克乐，但是想要把它玩好，你需要很多的技能和经验以及音乐理论的掌握，也需要一些即兴创作的能力：改变规则甚至是反对它们。更不用说，在团队中，你需要成为整个团队工作的主导。

无论你想叫自己什么，无论你有多大的梦想，但，也要记得保持真实和谦卑

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

现在让我们关注最常见的设计专业：UI/UX设计师。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

为什么是第一性原理

最早提出这个概念的是亚里士多德。他说：在任何一个系统中，存在第一性原理，是一个最基本的命题或假设，不能被省略，也不能被违反。

后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」：

我们运用第一性原理，而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较，对别人已经做过或者正在做的事情我们也都去做，这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界，也就是说一层层拨开事物表象，看到里面的本质，再从本质一层层往上走。

所以，我希望用第一性原理的思维方式，发现交互设计的本质，从而更好地理解和运用它。

什么是交互设计

交互设计，又称互动设计（英文Interaction Design，缩写 IxD 或者 IaD）是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式（the「interaction」即人工制品在特定场景下的反应方式）相关的界面。——百度百科

读完上面关于交互设计的权威解释，相信有读者和我一样，在短时间内很难弄明白：到底什么是交互设计？

下面，我们一起用第一性原理，拆解和分析交互设计的本质。

小学语文老师教会我们一种名次解释的方法——拆词法，那么，交互设计可以拆解成：交互层和设计层。

交互层是什么

交互，即交流与互动。具体点说，在某个场景下，一个对象为了某个事件目标，与其他对象产生信息的交流与互动。在笔者看来，交互的本质是信息的交流与互动，包含用户、目标、场景，它们共同构成交互设计的交互层，这是交互设计的前提。

而用户、目标、场景，也正是辛向阳教授定义的交互设计5要素其中的3个。

案例1：我们为「餐厅点餐」这个事件进行交互设计，那首先要知道这个案例的交互层是什么，也就是信息的交流与互动是怎样的。

这个例子的交互层是：用户（我们）需要在某个场景（餐厅），与其他对象（餐厅/服务员）产生信息的交流与互动，才能达到目标（完成点餐）。

案例2：我们为「地铁上听音乐」这个事件进行交互设计，按照上面的思路，我们知道这个事件的交互层是：用户（我们）需要在某个场景（地铁上），与其他对象（音源）产生信息的交流与互动，才能达到目标（听音乐）。

我小结一下，帮你理解交互设计的交互层。

当我们为某个事件进行交互设计时，首先要知道自己在一个什么样的事件前提下开展交互设计，而这个前提就是我所说的交互层，即用户在某个场景下，与其他对象产生信息的交流与互动，从而达到目标。

所以，在交互设计里的交互层，本质是信息的交流与互动，包含用户、目标、场景，主角是信息交流互动的双方或多方。

设计层是什么

在说交互设计的设计层之前，我们先来看「什么是设计」。

设计是把一种设想，通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科

现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计，就是在交互层的前提下，为一个事件合理的规划/计划（行为），并传达（媒介）出各种感觉（用户体验）。

所以，在交互设计里的设计层，本质是找到解决问题的手段，包括媒介和行为，主角是设计媒介和行为的设计师。

我们继续用前面的两个案例，理解交互设计的设计层。

案例1：为了完成「餐厅点餐」的交互设计，我们依据交互层这个前提，开始找到解决问题的手段，并为之设计媒介和行为。

在一些餐厅，用户还是通过纸质菜单，用口述的方式完成点餐。这里的媒介是纸质菜单和服务员，行为是口述。

在另外一些餐厅，用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机，行为是用手机扫码、点餐、结账等一系列动作。

案例2：为了完成「地铁上听音乐」的交互设计，在非智能手机的时代，我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的，那时候的媒介是播放器和耳机，行为是打开播放器播放音乐、在播放器调整音乐。

随着互联网和智能手机的普及，蓝牙传输技术的升级（aptX/LDAC等），以及用户诉求的升级和多样化，我们可以设计出更多贴近交互层（用户、目标、场景）的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。

此外，笔者认为：媒介和行为是相辅相成的关系，二者在交互设计的过程中会互相促进和限制。举个例子，一些带线控的蓝牙耳机自动连上手机后，按一下耳机上的播放键，就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上，而不仅仅是音乐APP里。

小结

用第一性原理，我将交互设计拆解成交互层和设计层，并结合辛向阳教授定义的交互设计5要素，得出结论：交互的本质是信息的交流与互动，由用户、目标、场景构成；设计的本质是找到解决问题的手段，由媒介、行为构成。

交互设计的本质：设计师为用户设计出在某个场景下信息交流与互动的媒介和行为，从而达成目标。

如何做好交互设计

1. 把握交互设计的行业差异化

本文从我个人的角度和经验，给大家分享了我对交互设计这个底层概念的理解，在我研究的过程中，最大的体会是，交互设计不仅仅表现在屏幕上，其实在线下场景下，同样有很多体现，比如现在热门的服务设计，我觉得它是对交互设计的场景化应用和延伸。

由此看来，交互设计会因行业和产品形态的不同，而存在差异化。拿B端产品来说，用户行为是完成某一项规范化的工作，而这项工作，往往具备行业和岗位专业性，设计师需要更好地理解行业和专业，才能贴近交互层（用户、目标、场景），设计出好的媒介和行为。

2. 具备相关思维

项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节，我们需要把每一个设计Case 当成自己的项目一样去对待，而项目经理就是自己，充分发挥主动解决问题的意识和能力。

用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释，在这里就不赘述了。

3. 充实知识储备

点击下方标题，查看已更新的知识篇文章：

• 《用一篇文章，带你回顾桌面GUI 的设计发展史》
• 《用Airbnb 的产品，帮你快速理解尼尔森10大可用性原则！》
• 《用YouTube 为例，让你轻松读懂交互设计7大定律！》
• 《以Apple Music为例，为你解读格式塔7大法则》
• 《设计师应该知道的 iOS 设备常见差异化设计》

4. 提升专业技能和底层能力

《从今天起培养这5个好习惯，让你在 2019 年快速成长！》

写在最后

本文从构思到写完，断断续续有1个多月了，总希望找到一个合适的方式去解读交互设计，把这个概念说明白，但事实是越研究越觉得复杂，我需要了解的还有很多。

所以，我写这篇文章的目的不仅仅是分享我对交互设计的浅见，还希望用「第一性原理」这个拆解、分析、解决问题的思维方式，去研究「什么是交互设计」这个问题。

交互设计这个概念或领域，远比我写的要复杂和深入，我在研究「交互设计」路上才刚起步，希望能与读者朋友一起交流这个话题。

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

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计