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

云雷纹

祥云纹

八宝纹

云头纹

寿字纹

万字纹

唐草纹

环带纹

缠枝纹

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

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

文叠文

该技巧操作起来很简单，就是在标题或内文下面，增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意：

• 颜色要比上面的文字淡，以免影响其识别性；
• 字体要用粗体，且字号要比上面的文字大；
• 要与上面的文字错位排版。

之所以这么处理是为了增加版面的层次、对比，以及丰富元素。

给标题增加小色块

这是增强标题设计感的另一种处理方式，单纯的文字标题难免显得单调，我们可以通过增加辅助元素使它变得更丰富一点，比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度，小于文字的高度，加上去的方式可以是叠加于文字之上，或是置于文字底部，创造出文字的一部分在色块内一部分在色块外的对比效果。还有，色块的颜色最好来源于版面中的其他元素。

用斜线或点填充空白

在做设计的时候常常会遇到这两种情况，一是版面中会多出一些影响版面平衡的空白，但已经没有合适的内容可以填充了，如果硬塞一些装饰文字或者图案，很可能会弄巧成拙；二是有的区域小元素小信息比较多、比较散。怎么办呢？

这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形，然后把它填充在空白处就可以平衡版面，且不会造成突兀的感觉，如下图案例：

要点：线条不宜太粗，点也不宜太大，而且此方法只适合填补小空白，不适合填补大面积的空白。

在比较散的元素下方排一组斜线，可以把各个分散的元素联系起来，使其成为一个整体。如下图：

把背景分成两个斜切的色块

背景能很大程度地影响版面的设计感，这一点应该都有体会，常规的处理方式是把背景作为一整个色块，而如果把背景分割成两个几何色块时，设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处，划一条倾斜的直线贯穿版面，使整个背景一分为二，而这两个色块的颜色对比要比较强烈。另外，在横版中用左右分割，竖版中用上下分割效果会比较好。

给图片加圆形色块

增加对比关系是加强设计感的最有效技巧，我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物，那么在这些图片上加一个圆形的色块，创造出虚与实的对比，通常也能得到不错的效果。

要点：

• 色块可以置于图片底部，也可以采用正片叠底压在图片上方；
• 圆形色块的边长至少要超出图片宽或高；
• 图片与色块要错位排列。

给每行文字都加一个色块

该手法在画册和海报设计中比较多见，与直接在一段文字下方加一个大色块不同，而是要根据每行文字不同长度，单独加一个相应长短的色块，所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体，增加文字视觉冲击力，而且还能使文字与背景区隔开，加强文字的识别性。

要点：

• 段落文字行数太多或太少效果都不会很好，3-10行左右为最佳。
• 各个小色块可以相互连起来，也可以相互隔开，以实际效果为准。

用飘带装饰包装上的文字

如果你看过的食品包装够多，你应该能发现，很多包装上的产品名称、广告语或者卖点等信息，都会摆放在一条飘带上。这么处理的效果通常不错，因为飘带具有礼品、赠送的寓意，用在哪里都不会太唐突，而且飘带的形式简单、有细节、变化丰富，很适合用作装饰元素。

还有一点也很重要，飘带的形式一般都是柔软的曲线，这与版面中其他直线元素可以形成鲜明的对比，加强版面的灵活性。

结语

以上的七个小妙招是不是既简单又实用，你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已，只能优化局部，不要指望用上这几招就能做出很好的设计，而且它们也不一定适合所有情形，在实际操作中一定要具体问题具体分析，灵活运用。

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

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

AR的特点

• 不隔离真实世界，而是将计算机生成的信息和物体叠加到现实场景中。
• 借助AR设备，用户可以更自然地与增强现实环境进行交互，这类交互满足实时性，例如手势、语音。
• 计算机生成的物体与真实环境无缝对接，并且用户在真实环境中运动时，也将继续维持正确的位置关系。

放置类AR的场景及类型

AR的场景多种多样，其中在手机设备的AR体验中，有一种基本且常见的场景：通过手机摄像头，用户在环境中放置虚拟物体（模型），用户与它有一些具体的互动操作，如移动、旋转等。

我们将这类场景统一称为放置类AR场景：放置对象可以是一扇虚拟场景的任意门，用户可走入门中互动；也可以是一件家居商品，用户可预览商品是否与室内环境搭配等。针对不同的放置对象和场景，设计侧重点也会有所不同。

基于真实环境放置虚拟模型，并与模型进行交互的AR场景。

放置类AR的交互框架及节点

无论放置的对象类型如何，用户打开相机，在屏幕中放下具体模型和进行互动的过程具有共性。我们把中间的完整流程拆分为了以下部分：

初始启动的节点分析和设计建议

1. 初始启动环节的作用

用户打开放置类AR功能后，进入环境识别前的过程，均属于初始启动的范围。放置类AR为何需要有初始启动环节，用户不直接进入AR场景进行体验？

由于技术和产品的需要，放置类AR初始启动承载帮助用户理解、AR素材准备，为用户带来更优的AR体验。

初始启动的流程中，包括启动页、引导页、加载页三个部分节点，三个节点可同时存在，也可只存在一个或两个节点，具体需要根据设计需求来决定。

启动页的定义及设计形式

在启动页游戏AR应用中比较常见，只有短暂停留。页面起到品牌露出的作用，或在启动APP后渲染氛围，迅速将用户带入。设计手段包含：音乐、音效、视觉、文字、动效，具体运用根据实际设计需求而定。可以参考以下两种设计内容：

• 品牌露出。围绕 logo 进行设计，给用户强化品牌的印象。
• 氛围烘托。围绕主场景/故事设计海报式的视觉设计，让用户对之后的AR应用的情节/人物/模型有初步印象。

启动页虽然不传递明确的含义和信息，但不同的设计手段可以给用户传递出不同的品牌调性和场景氛围感，其中音效和动效形式的应用会增加启动页设计的吸引力，下面将结合案例具体说明。

引导页的定义及设计形式

引导页促进用户进入后续的核心体验流程，传达有关体验的明确内容，根据 APP 的类型，引导内容有所不同。但不涉及后续具体细节操作。常见的引导包含：内容介绍、安全警告、体验建议、环境要求、玩法介绍、新手引导等。设计手段包含：语音、音乐、音效、视觉、文字、动效。具体运用根据实际设计需求而定。可以参考以下五种设计内容：

• 产品介绍式引导。简明扼要地介绍AR应用的主要作用。
• 辅助信息式引导。模型的补充理解信息，引导用户了解模型背景知识等。
• 体验建议/要求式引导。简明扼要地提出会直接影响AR应用体验沉浸感的建议或者要求，以引导用户照做，获得后续最佳体验。
• 背景故事式引导。通常以丰富的可视化形式展现于产品/模型交互相关的背景故事。
• 试玩式引导。直接以某个模型举例，引导用户一步步进行交互，获得该模型的完整交互体验。

引导页有明确内容，根据设计需求可以考虑从产品介绍、展示辅助信息、在体验时的建议或要求等。每种设计内容有各自的适用场景、设计形式及优缺点，将结合具体的案例进行说明。

加载页定义及设计形式

加载页需要用户等待，加载时长根据加载内容的大小而变化。过程可能包含素材下载、模型加载、材质渲染、界面UI等。设计手段：文字、视觉、动效、音乐、音效。具体运用根据实际设计需求而定。可以参考以下五种设计形式：

• 进度条式。常见的是浮层样式。感知最弱，通常设计样式跟随移动应用的框架样式。
• 文案式。通过文案传达加载过程中的信息，让用户知道进行到哪个步骤了，后台正在做什么。但需要注意进程描述的文案不超过3条，且语言需要简单好理解，避免使用技术性语言迷惑用户。
• 转场式。完整的转场页设计，视觉需要符合产品的整体调性，以保证整体的和谐统一。游戏中最常见。
• 下载式。下载式的加载可取消加载，因为模型较大，需要较长时间进行下载体验。并且通常用户只对单一模型感兴趣，没有连续体验多个模型的需求。必须下载成功，才能进入后续的AR体验。
• 静默式。将模型下载过程并入引导页，使用户无感知。该方法适合情节连贯的AR体验。

建议使用Jigspace、Lego AR、AliceARQuest等AR应用进行体验。

2. 初始启动设计原则及建议

整个初始启动环节包含启动页、引导页和加载页，整体的设计原则可总结为：

初始启动设计第一步是根据应用类型选择设计内容和形式

不管是启动页还是引导页的设计，都需要根据应用的类型去决定以何种形式给用户展现必要的信息。例如：游戏类注重用户的沉浸感，引导以故事介绍+体验建议为主。科普类的需要通过界面+三维的形式展示更多信息给用户，引导以产品介绍和信息补充为主。

启动页设计目标导向，不拖沓不无聊

根据APP类别选择恰当的形式，尽量简单直接，尽快进入后续内容页。游戏类可形式丰富，时长稍长。

引导页设计简单直接，使用多维度设计手段增加引导信息的丰富度

不管引导的内容是产品介绍，还是试玩引导，简单直接始终是目标，不在引导的部分占用用户过长的时间。另外也不能为了节约时间而使必要信息缺失，因此可以选择丰富的设计手段，让必要信息充分暴露。

加载页设计优先考虑无感知加载，否则根据加载时长使用不同形式

如无法无感知，则根据加载时长选择加载的设计形式。例如：时长较短的加载过程需要简单明快，不打扰用户。时长较长的加载过程需要过程明晰，给用户明确的预期。尽可能避免阻断式的加载过程。通过设计方法增加长时间等待的愉悦感，减少不耐烦。

场景搭建的节点分析和设计建议

1. 场景搭建环节的作用

AR应用启动后，经历完内容引导加载的过程，便正式进入了AR场景搭建环节。从技术的角度来说，想让模型稳定地融合于真实世界，我们首先需要让手机摄像头认识周围的环境，即为场景搭建的第一环节：环境的感知识别（环境识别包括平面识别、图片识别、物体识别等，本文聚焦在环境中的平面识别）。确定平面之后才能继续进行模型放置，直至用户成功把模型在真实环境中放下。

2. 平面识别的作用及完整节点

平面识别指通过对环境特征的感知，确定一个基于真实环境的平面。确定放置平面后，即可构建虚拟世界的坐标系，在虚拟世界中放置模型。平面识别是放置类AR体验的第一步，是后续所有体验内容存在的基石。因此在设计中我们需要保证平面识别的成功率，保证用户的顺畅体验。

这个环节本质上是个技术驱动的环节。程序启动后，系统以手机摄像头为原点建立了3D世界坐标系。相机界面打开后，系统开始识别拍摄到的真实环境。通过检测所捕获的图像之间的视觉差异点（即特征点），系统可以确立一个平面，并在世界坐标系中赋予平面一个位置信息，自此3D世界坐标系与真实环境中的平面建立了联系。找到平面后，系统仍会持续进行检测、更新平面的信息。

平面识别的成功需要用户将手机摄像头对准平面并移动手机，从而获得更多平面的特征点、确定平面。因此在设计中，首先需要引导用户做此动作配合；同时在用户动作中，应对识别状态给予实时反馈，让用户有把控感；识别失败时，有效的容错设计可以减少用户挫败感，提升识别成功率。设计节点可总结为以下几点：

动作引导定义及设计形式

动作引导需要引导用户做出配合的动作从而成功识别到平面。主要的引导内容是：引导用户将手机朝向一个平面任意方向移动，从而识别到平面。

表现用户动作的引导形式有多种，如：文字、图片、动图、语音以及这些方式的组合方案等等。每种单提示形式都有其各自的优缺点。如文字可准确传达信息但阅读时间较长；动图传达直观，但准确性不够等。因此建议使用组合方案的形式进行动作提示，结合单提示形式的优点，同时规避其缺点。可以参考以下2种：

• 动图类组合引导。用动图直观展示用户需要配合做的动作，同时辅以文字说明，清晰直观。
• 语音类组合引导。视觉+听觉双通道提示，使信息更有效传达。

动作引导建议使用组合方案来进行提示，可以根据产品类型和场景选择合适的方案。结合具体案例以说明：

平面识别中的定义及设计形式

程序识别平面的过程中，所花费时间往往受用户所处环境的影响，环境较复杂时，识别时间可能较长。因此建议在平面识别的过程中，反馈识别的状态，帮助用户了解系统的行为，知道自己所处的状态。状态反馈有两种建议的方式：

• 动效过渡。用特征点闪动、平面延展等动效形式表示平面正在识别中的状态。
• 可视化识别进度。通过量化平面识别进度来表示状态，让用户清晰了解自己所处的状态阶段。

平面识别中的状态反馈可以让用户了解系统行为，明晰所属状态。该步骤通常会和下一步合并设计。结合案例进行说明：

平面识别成功的定义及设计形式

平面识别成功后，建议可视化检测到的平面，给用户成功的反馈，同时让用户知道即将放置模型的平面在哪里。

• 平面可视化。通过UI层直接可视化出识别到的平面，如使用网格等UI形式。
• 模型放置位置的可视化。通过模型放置位置的UI侧面可视化识别到的平面局部，与下一步自然衔接。

平面识别成功的反馈是平面识别环节完成的节点，该步骤可能与之后的模型放置结合设计。结合案例进行说明。

平面识别异常的原因及设计

前文提到平面识别主要依赖对环境特征的检测，在一些情况下会很难识别到平面。当出现异常时，如何引导用户解决异常也是体验设计的重要内容之一。经过前期技术调研，平面识别异常的情况主要有以下几种：

• 光线过暗，没有足够的光。
• 光线过曝，光太强造成画面过曝。
• 缺少纹理，扫描纹理很少的平面很难成功，例如扫描纯白的墙是无法成功识别平面的。
• 图像模糊 ，如果用户快速移动手机，就会造成拍摄图像模糊，导致无法识别或识别不准确。

我们可以对每种异常进行具体的提示，也可以给出综合提示。这里建议的异常提示策略主要有两种：

• 针对性提示。在用户长时间检测不到平面时，根据当前具体的异常情况给出针对性提示。如检测到光线太暗，就提示用户去光线充足的地方体验。
• 总结式提示。若无法获得具体的异常情况，可总结、合并4个原因的解决方法进行提示。

进行提示内容话术设计时需注意：

• 提示话术不能太技术，需要用户可理解；
• 提示内容需保证用户可操作。

另外异常提示的设计形式也有多种：文字、图片、动图、语音、组合方案等等。在设计时需要结合「动作引导」的设计形式进行整体提示的组合方案设计。例如动作引导是文字+动图的形式，异常提示就不应该出现语音形式；动作引导是文字+语音形式，异常提示同样使用语音的形式更一致。

平面识别的设计原则及建议

平面识别的设计原则及建议：

• 动作引导需要自然、直观、易学。减少用户认知成本。
• 识别状态实时反馈，形式可以是视觉、声音甚至震动。给用户可控感、掌控感。
• 需要有容错设计。避免用户因识别失败带来的挫败感。
• 设计形式的一致性。动作引导与异常提示的设计形式需配套，保证设计的一致性。

模型放置的定义及作用

确定了放置平面后，下一步就是放置模型。模型放置指：通过一定的放置方式，让模型出现在平面的某个位置上。

在模型放置模块中，我们需要定义和设计放置方式以及放置位置。放置方式可以是自动放置，也可以是手动放置。放置位置可以是给用户体验效果最好的一个坐标点，即最佳放置位置；也可以是一片区域的任意一个坐标点，即可放置区域。

1. 放置方式的定义及设计形式

模型的放置方式主要有两大类：

• 识别到平面后系统自动放置模型；
• 经用户操作手动放置模型，可以是点击屏幕触发模型放置或拖拽模型进行放置。

可以参考以下三种设计形式：

• 自动放置。检测到平面后，模型自动出现在场景中，用户无需做任何操作。此方式适合用户不需走动的AR场景，对模型的位置要求不高。
• 点击手动放置。检测到平面后，用户需要点击屏幕触发模型放置。此方式适合场景互动类应用，需要用户在环境中走动，对模型位置有一定要求。
• 拖拽手动放置。检测到平面后，将模型从屏幕的模型库中拖拽到平面上。

模型的放置方式主要有自动放置与手动放置，可根据不同场景设定适宜的放置方式，以下结合案例具体说明。

2. 放置位置的设计内容及建议

放置模型时，模型即将放置的位置需要根据具体互动场景进行设计，以保证用户的视觉体验和互动体验。如果模型放置过近，用户无法看到模型全貌；过远，需要用户走动才能进行互动的应用会增加互动难度。可以参考以下两种设计内容：

• 最佳位置。自动放置场景和部分点击触发放置场景下，建议给模型设置一个默认最佳位置（具体的坐标点）。
• 可放置区域。拖拽放置场景下，建议给模型设置一个可放置区域。

在做具体的放置位置设计时，需要考虑以下几方面的因素：

• 模型完整呈现。需保证模型初次出现时在屏幕中显示完整且以最佳视角出现。
• 互动距离适宜。例如在AR任意门体验中，需要保证用户走两三步就能进入虚拟场景。自由放置的模型可以设置最近以及最远的互动界线，以免模型过大或过小造成交互困难。
• 场景元素布局符合逻辑。需考虑模型与场景内其它元素的关系，设计合乎逻辑的位置。例如食物出现在场景中的盘子里等。

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

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

即使是进的技术，也通常有一个非常原始的起点。从最初的手机到如今大规模普及的智能电话，其实经历了差不多30年的演变。

随着硬件设备和各种技术的逐步成熟，每个人都想知道技术的下一个变革在哪里。在诸多被广泛关注的革命性技术当中，AR，也就是现实增强技术领域所发生的变化，是最引人瞩目的。

随着苹果、谷歌和亚马逊这样处于排头的公司开始在 AR 领域发力，这种技术正在逐步成为主流。

「AR能够将人的表现力放大，而不是孤立起来」——Tim Cook

虽然 AR 和 VR 经常会被混淆，但是两者其实并不相同。从关系上来讲，AR 和 VR 并非是对立的敌人，更像是血脉相近的堂兄弟。两者之间的区别其实很简单：在 VR 中，我们眼中的物理现实世界被计算机所生成的数字世界给彻底取代了。相比之下，AR技术让数字信息直接叠加在我们可见的物理世界中。如今很多人都已经借助类似 Snapchat 滤镜之类的东西感受到 AR 在现实生活中的运用。

这种集成于各种摄影和即使通讯类软件中的AR滤镜，和如今 iPhone 在设计和研发上隐约一脉相承。

Tim Cook 在接受采访的时候曾经提及，AR 在他眼中并非是一种孤立产品，而是一种核心技术。对于这一技术，Cook 是这样评论的：「智能手机是给每一个人的，我们没有必要将它孤立而片面地放在某一国家、地区或者某个垂直市场中来看待，它是面向每一个人的。我们认为 AR 是一个宏大的技术范畴，对此我感到非常振奋，因为在此基础上可以从方方面面来改善人们的生活。」

根据 Deloitte 所发布的一份报告，在年营收超过1亿美元的企业中，近 90% 都已经在其业务或者APP 中开始应用AR或者VR技术。就目前的数据来看，他们这方面的财务状况也相当乐观。到2023年，AR 和 VR 相关的全球市场估计将会达到944亿美元。

当然，另外一方面企业和品牌也在竭尽全力地挖掘在未来商业领域的潜力，这也是他们推动AR技术的诸多原因之一。

接下来，我们可以深入讨论一下 AR 的内涵外延，以及它会如何改变我们和世界的互动方式。

AR 如何改变我们的世界

我们生活在一个大数据所驱动的世界当中，大型的结构化和非结构化的数据，包裹着我们地每一个动作。这些数据本身就已经是一个很大的话题了。设计师和技术革新者们一直在思考如何理解这些信息，并且合理地运用它们。

那么AR 将会如何切入到其中呢？

简而言之，数据是二维的。它存在于计算机屏幕上，而物理世界是三维的，这两个世界将会怎样协调一致？AR 的作用就在这个时候发挥出来了。

基本上， AR 技术所充当的就是将数字和物理现实接驳在一起的那个接口。AR 所带来的是一个全新的技术范例。在这个新领域当中，数据的复杂性将会被分析和转化，以更加直观的交互式图形和动画所替代，覆盖在现实世界层以上。

在这一点上，AR同法国哲学家鲍德里亚所梦寐以求的超现实主义在精神内核上高度统一。对于有想象力的技术革新者和科技企业而言，AR 技术的潜在应用场景是无止境的。这一技术将会被大规模普及开来，在未来，你不必像现在这样仅仅只能在游戏中体会这一技术。当然，像亚马逊和 Facebook 这样的商业巨头也开始认真探索如何更有意义、以更有影响力的方式来使用 AR 工具。

而这也是大势所趋。下面我将会拿出一些更为创新的方式，为你呈现 AR 技术是如何具体地改变我们的生活的。

• AccuVein 使用 AR 技术帮助医生和护士更为精准地判断患者手臂静脉的位置，而不用猜测。通过热成像技术识别静脉位置，然后借助 AR 技术将静脉位置呈现处得来，从此避免扎漏的情况。
• 波音公司使用 AR 技术来辅助安装飞机机翼，避免出错，这一技术已经非常成功了。
• 通用电器 GE 使用 AR 技术来帮助员工提升效率。通过使用 Xbox 和 Kinect 运动跟踪器，员工可以更快完成复杂的布线，将指令投射到不同零件上，而电子传感器也能提供实时反馈，确保了这一机制能够构成合理有效的闭环。

原本在游戏中作为噱头的 AR 技术逐渐脱颖而出，在通信、商业和建筑领域开始展现出无尽的潜力。

而最能感受到AR的这种影响力的，是在品牌和营销市场上。

为什么品牌需要在意 AR 技术？

由于 AR 能够承载复杂的数据，并且将它们转化为可同现实世界进行沟通的交互，身为用户，我们能够从中吸收更多的信息。换句话说，AR 将可以更好、更快更加有效地影响用户的决策机制。我们如今常见的社交媒体和大量的信息，已经让人疲劳了，而 AR 这种全新的切入方式，将可以改变营销，进而影响世界。品牌能够在 AR 的协助下以前所未有的方式来宣传自己和产品。

举个简单的例子。AR 所带来的体验并非传统的二维平面的图像，它让用户可以走进商店，尝试产品，帮你判断产品的实际效果，它用 X射线一般的视觉帮你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度无死角的视觉。

对于品牌而言有什么好处？

• 更强的参与感：互动式的AR能让品牌更直接地同受众进行互动，帮助他们体验产品，并且发现他们通常无法看到的新功能。
• 品牌知名度提升：通过出色的 AR 体验，品牌在用户心目中建立漆良好的口碑，由于 AR 所提供的实时的体验，因此在品牌价值上的转化也更加即时有效。
• 创新的用户内容产出模式：新的用户产出模式让品牌能够更上一层楼，通过整合用户提供的实时数据，甚至可以让用户离开门店之前就能作出相应的调整和反馈。
• 给用户更强的信心：通过实时的产品互动，用户将会更加准确地获得体验，迎合他们的期待，给用户决策提供更强的信心。

「在后网络时代，AR就是狼来了的故事——大家早已听说过，但是很少见到足够优秀的呈现形式。」——Om Malik

UX设计师如何应对这一挑战

对于一线的设计师而言，AR 技术是一件听起来非常令人兴奋的事情。但是事情的前后逻辑我们确实需要仔细捋一下。Pokemon Go 的成功到底是源于AR技术的加成，还是源自于品牌本身原有的吸引力？

另一方面，AR 技术改变生活各方面的巨大潜力直到现在才刚刚显现。别忘了，移动端设备的普及和成熟是经历了超过10年的酝酿，直到今天才说得上是比较成熟了。对于 AR 而言，想要立竿见影地看到某种效果，你可能要求有点高。

AR 是一种全新的媒介。设计师面对的最主要的挑战，是要进入三维空间进行思考。在接下来用户要如何同APP进行交互？他们会做出什么样的动作？附近会有其他的人和物体吗？这种情况下用户会做什么？它并非看起来那么简单，本质上这是一次概念上的彻底飞跃。设计师需要在脑海中开始反思这件事情了。

当然，只有时间能够最终证明 AR 是否会成为 iPhone 一样划时代的产物。一切是会因为 AR 彻底改变吗？又或者像 Hi-Fi 一样进入小众市场，逐渐收缩？可以确信的是，AR 技术是有相当大潜力的，这就是为什么你会听到越来越多相关的传闻。一旦一项技术开始每天都被提及，那么一切就皆有可能。我们很可能将会在未来以一种截然不同的方式来体验这个世界，谁敢轻易否定呢？

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

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

1.字号的设置

2.根据需求随意组合 

3.英文的行高

4.英文的行间距

5.中文的行高

6.中文的行间距

7.行高的禁忌

8.标题行高

9.正文行高

10.混合编排

11.字体选择

1.字号的设置

字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。

另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。

2.根据需求随意组合

当我们定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。

例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。

3.英文的行高

在设置文本行高的之前，需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以“行高”来进行定义的。在CSS-Style line-height属性是行高，值分别以百分比、数值和像素来表示。例如：h1.test {line-height:112px}，那标题h1的行高就是112像素了；绘图软件中控制行上下距离的也是行高。好的言归正传，中文的行高与英文行高会有一些差异，英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，如下图所示。

基线是英文字体结构中的概念，先简单了解一下它吧，以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时，改变的就是上图所示的这段距离。

4.英文的行间距

英文的行间距就没有行高那么复杂，也不用画基线。英文的行间距跟中文相同，指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为“行与行之间的距离”并称之为行间距。另外英文底部和顶部都有对应的专有名词的，在英文字体结构中最顶部/最底部隐性的两条线称为“上沿线/上限线”和“下沿线/下限线”。这块的知识先了解一下就行，以后在字体结构中会讲到。

5.中文的行高

接下来理解下中文的行高。上面讲到说英文的行高是由基线决定的，但中文字体与英文字体结构不一样，中文里没有基线的概念，那该怎么定义行高呢。中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文字体结构中没有上沿线/上限线和下沿线/下限线的概念，它们只存在于英文字体结构中。

6.中文的行间距

中文的行间距就比较好理解了，跟英文的行间距的道理相同。是指一行中文的最底部与下一行中文的最顶部之间的距离。也可以理解为行与行之间的距离。

虽然说行高与行间距的差别不太好区分，而且还有些绕，但理解它们还是很有必要的。

7.行高的禁忌

不管是标题、正文还是注释，他们的行高都不宜过高，行高过高会导致内容不易阅读，文字之间的整体性也会被打散。标题的字号越大行高应该越小，正文的字号越小行高应该越大。当然这些规则都是相对的，行高大小要合理把控，不能太大或过小。那要如何合理设置行高呢，往下看。

8.标题行高

标题的行高由字号决定的。平面设计中有时候可以把行高设置与字号相同，例如120pt的字号设置120pt的行高是没有问题的。在页面中行高是这么计算的，字号x倍数=行高。例如下图所示，大标题H3设置的字号是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字号与行高的倍数是一点点测的，因为字号与行高的比例不会小于1.0（1倍），我就根据自身审美进行测试，从1.0/1.1/1.2/1.3....开始测，直到测出自己满意的行高。如下图所示，带颜色数字的是倍数。

最终的行高还是由设计师直观判断决定的。所以做设计要理性中夹杂感性，规则与创意并存才是一个优秀设计师需要兼备的品质。那我就拿中文字号36px和英文字号24px来举个例子，这样大家好理解一些。如下图所示：

从测试结果中找到自己满意的行高就可以了。字号x倍数=行高，这里也不怕倍数小数位太多的问题。在绘图软件中是以像素为单位，但有时候前端代码会用父继承单位“em”。例如：大标题H3的字号是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那转换为前端代码就是h3.test{line-height: 1.3em}，直接做约等于就行了，差一点点看不出来的。

9.正文行高

来接着往下讲。正文行高与标题行高相同，差异就字号的不同选择的行高也不同。标题行高倍数大概1.0-1.6不等，正文行高倍数大概1.6-2.4不等，这也没有一定的标准，还是得根据项目情况与实际效果综合来看。如下图所示，带颜色的数字是行高的倍数。

说到这里，经常有人问我正文的行高的值应该怎么设置，大家在做设计时都会采用1.5/2倍关系，但这不是绝对的，行高的倍数也是受字号大小影响的。像新浪新闻的正文，字号是18px，行高设的是32px，即字号（18px）x1.777（倍数）=32px（行高），如果行高倍数设置2倍以上，字与字之间的距离变大，就不太好阅读了。

10.混合编排

好的，完全理解上述所有知识就可以把标题、正文和注释进行混合编排了。大标题字号40px、正文字号20px、正文行高40px、注释字号18px、注释行高32px、标题与正文的间距88px、正文与注释的间距64px。

11.字体选择

选择字体就没有什么技术含量了。做页面常用字体就只有那几种，微软雅黑、宋体、Verdana、arial、Times New Roman，就不举例说明了。中文网站最常用的就是微软雅黑+Arial，浏览器兼容性也最好。读到这里有人可能就会问了，载入其他字体也可以啊，是的做企业网站可以载入其他字体，但像做功能页面啊、后台页面啊，载入其他字体几乎就不可能了。所以还是要估计实际项目需求/品牌需求来选择与其相符的字体样式。

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

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

最近三星、华为和柔宇各发布了一款折叠屏手机，它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种，也是我目前最看好的手机形态之一（未来手机的形态应该是柔性手机，现在已知有柔性电路板的存在了）。通过几天的观察和思考，我认为折叠屏手机有以下好处：

• 更好的阅读体验。目前各手机厂商的折叠屏展开态均大于7英寸，我们看视频时拥有更好地观看体验，同时我们再也不用担心看漫画时字体太小看不清了。
• 提升效率。在「展开」模式下空间变大了，多窗口操作成为可能，我们可以一边看世界杯一边用微信和朋友一起视频呐喊。
• 易用性。在这里我想到了 ipad 一个不错的特性，打开多个应用后，并在多个应用之间进行文件管理，例如将相册里的图片拖到微信或者邮件里，避免了多个应用之间的来回切换。

以上基于「展开」态的想法，在折叠状态下还有一些不错的想法供大家思考。

外折叠设计

华为在MWC2019上演示了一个名叫「镜像智拍」的功能，它可以让被拍摄的人实时看到拍摄效果，并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍，妹子们再也不用担心自己的男朋友把自己拍得很丑了。

在折叠状态时可以把背面当做一个附加的交互空间，实现一些简单的交互操作，例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放，这种背部触控方式并不是什么新鲜事，在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。

除了附加的交互空间，我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序，例如我们可以用主屏幕玩游戏，在加载游戏时翻转屏幕刷个微博，操作起来十分方便。

折叠屏当然不只有展开和折叠两个状态，还有翻折状态，它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上，实现中远距离的自拍；同时它可以进行多角度拍摄，成为制作 VR 内容的利器。在玩法上，翻折状态可以通过两面屏幕的不同内容引入多人互动的概念，但这种应用场景比较难想象。

内折叠设计

相比外折叠设计，内折叠设计玩法相对较少，在这里我只想到了任天堂NDS 的概念：在翻折状态时它就是两块独立屏幕，它可以独立显示不同的内容，例如上屏显示内容，下屏显示操作区域，打游戏时翻折状态明显要比其他状态舒服。

个人观点：从以上案例来看，外折叠设计在交互和玩法上都比内折叠设计好，未来很有可能以外折叠设计为主。

折叠屏手机交互设计的改变

1. 响应式布局

当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大，而是要考虑响应式布局设计。

描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器，那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上，但现在手机也应该考虑响应式设计，以下是设计时需要考虑的细节。

它不是简单的响应式设计。从上文得知，「展开」态时要考虑是平板模式还是双屏幕模式，如果是平板模式，那么内容应该在一个整体里；若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。

考虑通过 Fragment（片段）来设计。Fragment 是 Android3.0提出的 API，出现的初衷是为了 UI 更灵活地适应大屏幕的平板电脑。以下是 Android 对 Fragment 的官方介绍：「Fragment 表示 Activity 中的行为或用户界面部分。您可以将多个 Fragment 组合在一个 Activity 中来构建多窗格 UI，以及在多个 Activity 中重复使用某个 Fragment。（ Activity 可以理解为一个页面，Android 开发中最重要的概念之一）」

参考微软的 UWP 设计概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用应用平台）。UWP 应用的理念并不是为某一个终端而设计，而是同一套代码和设计可以在所有 Windows 10设备上运行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。

它的响应式设计的设计技巧包括以下6点：

调整位置：你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。

调整尺寸：你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。

调整顺序：通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。

展现：你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。

换位：这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。

改变结构：你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。

以上6点引用了Windows 开发人员中心 《Design Basics：Responsive design 101 for UWP apps》

2. 场景化设计

考虑用户翻转折叠屏幕时的场景和动机是什么，从而优化现有界面及交互流程，举几个例子。

以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面，使游戏的沉浸感更强；当玩家采用大屏模式时，我们可以认为玩家需要获取更多信息，这时候把聊天、装备等相关功能界面展示出来。

当用户在微信里查看定位信息有新消息提醒时，手机变成大屏模式时应该同时存在地图界面和聊天界面。

相关注意事项

Google 在2018年11月就宣布了对折叠屏的支持，包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验，必须考虑以下两个方面：生命周期管理以及转场动效。

生命周期管理

目前大部分手机应用为了有更流畅的体验会做适量的生命周期管理，例如退出页面时会释放相关内存。因此设计师在设计折叠屏交互时要考虑哪些页面不能被销毁，一定要让用户进行展开、折叠等操作， 应用任务不中断重启，产品可以自动适应各种屏幕下的静态布局规格。

转场动效

从目前 Google 公布的新版 Android系统来看，已经可以做到当折叠/展开设备的时候，页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。

参考案例：

华为基于HUAWEI Mate X发布的折叠屏官方适配方案，相关链接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i

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

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

类似这种「矛盾」的设计原则还有好几对，接下来葱爷要把它们一一理清，让这些理论知识能真正指导设计实践。

对齐与变化

对齐是版式设计最基础的原则之一，具体指版面中的字与字、字与图、图与图要对齐，常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁，更便于阅读，比如下面这些作品都用到了大量的对齐关系。

我们来举个实例，假设你现在要设计一则手机banner图，目的是宣传某款手机的拍照功能，文案如下：

这种图不难做，你打算直接用一部手机和几张摄影作品作为画面的主视觉，于是去图片网站找了几张能体现该手机拍照功能好的图片：

图片找好后，你把其中一张图片填充到手机里作为屏幕背景，其余图片分散在手机周围，然后你把整个视觉主体放在了版面中央，文字则按主次排在了两侧，大致效果如下：

你盯着画面，正琢磨着还要加点什么的时候，总监不知何时出现在了你身后，他面无表情地盯着你的电脑，嘴里慢吞吞地吐出几个字：「太乱了，好LOW」，之后就消失了。你很聪明，立刻明白了总监是想要自己排得更整洁、更有序一点。

在目前的版面中虽然个别元素之间有对齐关系，但是缺乏整体的对齐，且图片采用了自由式排版，所以会显得混乱。于是你尝试把图片对齐排列，文字则以图片为基准进行对齐。

△ 左边的文字部分与右边的图片部分保持上下对齐，标题与内文为左右两端对齐，icon 与文字则是左对齐。

上图很「完美」地执行了对齐原则，整个版面干净、整洁了许多，视觉流程也更简单了。这下总可以了吧，然而事情并没你想的简单。因为总监不知何时又出现在了你的身后，他瘪着嘴一脸嫌弃地说道：「太呆板了，有点变化好不好？」

变化？难道又要调回改之前那种状态啊？当然不是，你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里，既要对齐，又不能机械地对齐；既要整洁有序也要灵活有变化。如何做到这一点呢？我的理解是：要在对齐中制造一点变化，在变化中找到对齐关系。比如下面这些作品：

现在你知道了，上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐，所以需要改变其中一个版块。该版面的视觉主体是图片，所以调整图片更合适。由于文字是呈水平排列的，那么图片部分是不是可以倾斜摆放形成一定的反差呢？这样既可以制造变化还能加强版面的空间感。

△ 除了把图片倾斜之外，LOGO也与内文错开移到了左上角，最下边的直线也可以延伸到了版面之外。

我们现在再回过头来看看这件作品是否符合前面我说的，「要在对齐中制造一点变化，在变化中找到对齐关系」这一要素。

从上图中可以看出，图片虽然做了倾斜，却是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线，但是没有哪一个元素是孤立的，每一个元素都与版面中的其他元素有对齐关系。更重要的是，左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的，所以整个画面才得以平衡。

统一与对比

虽然设计的构成要素只有文字、图片、色彩，但是每一个要素都有无数种表现形式，不同的字体、字号、色值、质感、风格、图片、方向等等。如果在一个版面内含有太多不同的东西，会显得很杂乱，从而让人心生厌烦，所以，需要通过某种方式把这些「不同」统一起来，以达到舒适、协调的效果。

以一则运动品牌的轮播图设计为例，文案如下：

这类设计以运动员作为主体最容易出效果，所以我们需要找一个正在奔跑的人物图片。

△ 这个人的姿势不错，就他了。

运动品牌最重要的是要设计出动感和时尚感，所以我把背景分割成一红一蓝两个倾斜的色块，然后把人物放在画面中央，文字分布在左右两边，以制造出强烈的视觉冲击。

由于有一个动感十足的模特和背景，所以整体看来还是比较符合运动海报的调性，但视觉上有点乱，因为有很多细节没有统一，比如人物倾斜的角度和背景色块、标题倾斜的角度不一样，主要文字的字体风格不一样（NIKE和JUST DO IT的字体比较硬朗，而蓄势待发的字体相对较柔），元素的风格也不统一（圆角的了解更多按钮与整体风格不搭），还有各元素的颜色也缺少联系等等。

那该怎么办呢？这里就需要用到统一的原则了，我们可以试着把上面提到的不统一的地方都统一起来，如下图：

△ 调整后的方案二，字体都是简洁有力的黑体字，而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了，「了解更多」的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。

调整之后确实不乱了，但是也有了新的问题，因为各元素太过统一使得画面缺乏层次和对比，该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则——对比。

对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法，目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。

想要处理好统一与对比的关系，需要记住两个要领：

• 各元素的调性要统一、元素的呈现方式要有对比。
• 要保证画面中的对比关系不会破坏整体的协调性。

顺着这样的思路，我们来给上图增加一些对比关系，例如方案二的标题倾斜角度太大，不美观，所以我干脆把它的倾斜方向改为垂直倾斜，既保留了动感也增强了对比，更加美观。在文字的字号上，我选择突出品牌名缩小广告语，加强了大小对比，并且还恢复了之前把背景一分为二的做法，只是增加了一点空间感，并把人物服装的颜色与背景色做了统一。调整后的效果如下：

我们可以观察一下，方案三确实比方案一更协调，比方案二更有层次和视觉冲击力，且整体调性依然年轻、时尚、有动感，这里就是运用了统一与对比的原则。

简单与丰富

简单应该是大家听得最多的设计原则，简约、极简风格的设计也非常受欢迎，但是我们也很困扰，因为自己做的所谓极简设计经常会被人说太单调、不够丰富；而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢？我们先来正确地认识一下简单与丰富。

简单并不是指做设计要用最少的元素、不做任何修饰，而是指设计主旨要简单，视觉流程要清晰，视觉要聚焦，主次要分明。

△ 上图的设计虽然元素和色彩都很多，但整体给人的感觉也还是简单的。

而丰富也不是指画面中一定要有很多元素或叠加一堆的效果，而是指有细节、有层次、有品质感。

△ 上图的设计虽然整体看来很简单，但是并不会显得单调。

为了方便理解，我们还是来举个例子：一款农产品册子的封面设计。该封面的必要元素很简单，只有一个 Logo 和一句文案，因此，我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文字，再配一款特种纸，做点工艺，就可以显得很高大上，很多大品牌也是这么做的。

这也是一种还过得去的解决方案，但表现手法确实太过简单，既体现不出设计师的设计功底，也没有体现出农业品牌的调性和特色，且缺乏吸引力，所以我们需要做加法，让其变得更加丰富。

怎么丰富呢？最直接的办法就是引入图片和色块，由于品类为农产品，且文案重在强调健康和安全，所以我们可以找一张绿色、生态的图片。

为了与狭长的版面保持统一，我把图片也裁剪成了竖版的矩形，并与一个同样大小的绿色色块结合在一起，组成版面的主视觉，logo放在图片左侧，如下图：

这么做还是有些设计感的，也增加了品类属性，不过缺少细节、不耐看，所以还需要加点东西。当然，新增加的元素只能作为辅助，不能太过抢眼，图片方面我很快想到了叶脉，叶脉与图片中的叶子元素也能产生关联，且适合做底纹，于是我又找来了一张叶脉的图片。

把叶脉图片放在图层最底部作为背景处理，这里会遇到三种情况，一是如果把叶脉纹完全平铺的话，整个版面就没有留白了，所以会显得压抑；二是把整片叶子都显示出来，但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面，与图片部分形成呼应，这样的效果看起来是比较舒服的。

图片部分得到了改善，但现在画面中还缺少一点小的装饰元素，增加一点文案是个不错的思路，所以我把文案和品牌名的英文加了进来。

做完加法后整个画面变得丰富了不少，层次也拉开了，而且给人的感觉依然比较简单，既不杂乱也不压抑，因为各元素主次分明，既有联系又没形成干扰。不过做加法的时候也要把握度，例如下图就有点堆砌过度了，看起来很繁杂、不精致。

想要处理好简单与丰富的关系，需要注意两点：

• 要保证主体单一且足够精致；
• 要保证有简单的装饰元素与主体形成互补。

规范与打破

规范与打破是存在于版式设计中的一对矛盾原则，规范是指把版面中的元素要按某种规律，或是在特定的范围内设计布局，目的是为了让画面更有条理和秩序，也更像一个整体。

△ 上图的主要元素都规范在一个矩形中，然后各个小矩形又组合成一个大矩形，看起来很整体，很有设计感。

与规范对立的是打破，指打破规范、打破束缚、打破平静，目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。

△ 用色块或图片来创造束缚感，然后把部分元素冲出色块，是规范与打破的一个经典组合形式。

可以说经过了严格规范而变得很好看的优秀设计很多，而有些设计却选择了打破规范，也得到了很惊艳的效果。那什么时候该严格遵守规范？什么时候应该打破规范呢？其实在一件完整的设计中最好两者都要有，而平衡这两者的要领就是：先规范后打破，即在规范好的基础上选择一些局部来打破。

葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动云服务平台方案介绍的册子，文案如下：

很明显该封面的视觉调性应该要有科技感，要能体现互联网、信息、大数据这些关键词，所以我找了一张看起来很有科技感的图片。

这类画册的版式通常应该偏向简洁、规矩，所以我决定用网格系统来辅助排版。以图片作为封面的主视觉，除了Logo，所有元素都排列在矩形图片内，并且所有文字都按照网格的设定保持左对齐，所有元素的高度、宽度，以及各元素之间的间距，都严格按照网格来排版。

△ 经过规范的版面整体看起来十分严谨。

不过这么做也造成了版面缺少变化、太过规矩等问题，所以我们可以尝试在此基础上做一些「打破」。

比如原本的 LOGO 与图片靠得太近，显得很压抑，这里就不必完全按照网格来排版，我们可以根据自己的感觉将 LOGO 与图片分得更开一些；中文标题、短线、英文标题这三者也太拥挤了，可以挪开一点；文字部分不一定全部都在图片范围内，所以我给英文标题加了一个蓝色块，并把色块移出了图片区域；以及把最下面的公司名称排在了图片下方等。调整后的效果如下：

△ 调整后的方案，构图也相应发生了变化，之前为上下构图，现在变成了对角构图。

在规范的基础上做了打破之后，我们可以看到，版面的整洁性依然在，整体的调性也依然简洁、严肃，但相比调整之前显得更灵活、更有设计感。

结语

设计不是简单的加减法，也不是只要做到对齐、统一这些很简单，方向很明确的原则就可以了，因为根本不存在什么原则可以让我们直接通向设计的终点，但是我们的目标是明确的，就是要做有效的设计，所有的设计原则、设计手段都要为这个目标服务。

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