用户界面设计的10个小窍门

点选下方白字+ 点选右上角“…”标为隆哥蒙嗨小伙伴们他们好～生日快乐！！✊他们与否真的去年的gqj更令人激动呢！比过节的气氛的热切～祝贺他们的父亲送祝贺。那时给他们撷取一则界面结构设计的10个贴士，来看一看咯～

贴士目录

用配色和字总之结构设计层次，而不而已明甫的大小不一

千万别建立多种不同配色的白色

借助自然哲学认知配色

采用博纳县宽度隔开组

借助配色隔开行

行的宽度

用片头叠底替代文档阴霾

模块化提高工作效率

采用品牌色做为强调色

突出项目标记

他们大多数人开始接触UI结构设计的时候，都而已知道很少或者根本不懂任何结构设计理论。但是，尽管万事开头难，他们还是需要通过许多结构设计类的书籍和文章来学习如何配色、排版、布局等。

结构设计不是简单可以用配色，形状和文字表示的，应该是一个“言之有物”的过程，即每当他们改变明甫、添加阴霾或改变配色时，一定要有为什么必须这样做的理由。在本文中，我将撷取一些我在结构设计界面时学到的东西，以及我在学习过程中的新发现。

#1   用配色和字总之结构设计层次，而不而已明甫的大小不一

当面对需要信息层次结构的内容时，放大明甫表示强调和重要性通常不能解决问题，如下图所示:

信息层次并不仅仅是不同尺寸字体的组合，而是由字体尺寸，字重，字体配色形成对比的正确组合。对比差异越大，层次关系表现越明显。

● ‍   如何建立更好的对比度？

千万别仅用大小不一不同但是字重相同的文字来建立对比度和层次结构

相反，对于主要内容采用更粗更黑的字体样式，对于次要内容采用更小更细的字体样式。

从深到浅建立三种不同的文字配色（参见下图的示例）。

通常我采用我的基色作为节录的文字配色。

在结构设计中敢于借助大的字宽度（比如标题24px，节录16px，标签文字10px等）。

更大的宽度=更好的对比度

查看https://www.modularscale.com/ 这是一个用来建立更好的字体层次结构的在线计算器。

对比度=尺寸+字重+配色

最后，请务必检查其对比度。

您可以采用此计算器

https://www.modularscale.com/检查其可访问性。

#2   千万别建立多种不同配色的白色

通过来回调整你的配色选择器，产生不同深浅的白底黑字的效果，这会让你头疼。

他们都知道采用白色文档配色(#000)会导致读者眼睛疲劳，所以他们的解决方案是建立更黑的变体作为替代。他们可以采用不同不透明度的白色作为解决方案，而不是选择3个或更多的配色值:

在下图的例子中，我采用白色作为主要配色(#000)，并根据应用的位置(即主要内容、次要内容等)降低了不透明度

#3   借助自然哲学认知配色

他们大多数人都不太擅长选择正确的配色组合，每当他们看到具有精心配色的结构设计时，他们都会问自己：“他们是怎么做到的？”（如下图）

直到我了解到认知配色不仅仅适用于那些从一开始就拥有结构设计天赋的人，在色相、饱和度、亮度（HSB）上进行简单的加法和减法就能发挥魔法（在这个公式里他们将采用HSB的色彩模式而不是RGB模式）。你可以轻松摆脱彩色背景上无聊的白色，并把它变成毕加索的作品。（如下图）

● ‍   那么HSB中的加法和减法怎么算呢？

实际上有两种方法，如下图，两种方法都具有相同的基色＃B9F4BC（圆形背景色），但图标中文件夹和装饰条的配色则不同。在他们开始时，记住第一个字母相当于色相，其次是饱和度，然后是亮度。

● ‍   方法A

在方法A中，他们可以看到在整个图形（圆形背景，文件夹，装饰条）中，色相H值保持123不变，而饱和度S和亮度B是变化的。

。饱和度从24变为40（增加+16），亮度从96变为82（减少-14），这表明为了形成良好的对比度，饱和度的变化需要与亮度成反比例调整。装饰条也是一样的，采用文件夹的饱和度S值和亮度B值作为基础值，饱和度从40移动到44(增加+04)，亮度从82变为75(减少-07)。因此，他们得到了这个公式：

较暗的配色值=饱和度增加亮度减少

更亮的配色值=饱和度减少亮度增加

每当我想知道我的结构设计应该采用什么样的正确配色时，这个公式帮助了我。我了解到最好的起点是有一个基色，然后以基色为基础保持色相值相同，调整饱和度和亮度的值。

● ‍   方法B

在方法B中，同样的原理（上面的公式）依然适用，但是色相H值发生了变化。他们之前在各种结构设计材料中采用的配色模式RGB和CMY现在对他们来说很有用。

RGB分别代表红色、绿色和蓝色，而CMY代表青色、洋红色和黄色。我刚开始结构设计时我并不了解这两种配色模式的重要性，直到我无意中发现可以将RGB和CMY进行配色组合。

现在在方法B中，如果想要在基色的基础上有一个较暗的变化，他们需要在调色板中将配色选择器往靠近RGB的方向移动，反之将配色选择器往靠近CMY的方向移动选择较浅的配色。如下图：

由于他们想要在文件夹图标中采用比基色＃B9F4BC（圆形背景）更深的配色，他们需要将配色选择器移动到最靠近的RGB（本例为蓝色）的位置。如果想要一个配色较浅的文件夹，把选择器移动到左边靠近CMY（本例为黄色）的位置。

* RGB导致配色变深，CMY导致配色变浅的情况比较多。

通过移动配色选择器得到他们想要的配色后，基于方法A中的公式，他们得到以下的配色公式：

红色，绿色，蓝色（RGB）+方法A公式=配色变深

青色，洋红色，黄色（CMY）+方法A公式=配色变浅

#4   采用博纳县宽度隔开组

除了在两个组之间添加一条线来表示区分之外，在组与组之间采用一个宽敞的博纳县的解决方案将会表现的更好、更容易的。正如邻近定律所说:

相互靠近或接近的物体，往往被归在一起。

在我下方的🌰中，我的目的是通过在标题和作者之间采用24px的大博纳县来建立一个隔开。

#5   借助配色隔开行

做列表界面往往很无聊，因为只需要不断地复制模块就可以了。但是对于用户，如果行与行之间没有很明显的区别，写作起来会很困难。因此，除了采用线条之外，在列表中添加彩色背景对于写作中的用户来说很有用的，并且对于他们结构设计师来说也会更有乐趣。

#6   用片头叠底替代文档阴霾

结构设计标题模块或在图像上添加文档是非常具有挑战性的，特别是如果图像背景是动态的(或时不时变化)。对于动态图像背景的文档，通常的解决方案是给文档添加阴霾，但这并不能提高用户的可读性。而且它会增加了文字周围的视觉混乱，因为它们填补了文字之间的博纳县。

对于一些人来说，黑白配色叠加是一种对结构设计很有帮助的解决方案。但是最近，我发现采用片头叠底是可以作为渐变填充的混合工具采用。

这样做要比在图像上建立一个白色背景并减少其不透明度容易得多。此外，片头叠底效果的灰度比例还能使图像的其他部分保持其自然的配色，并使文档所在的部分图像更暗一点，来提高文档的可读性。

#7   行的宽度

大多数结构设计师经常使内容的宽度更长，以便符合页面。但这样会采用户造成视觉疲劳，不如每行45-65个字符是理想的。你与否曾遇到过像这样两难的情况: 减少行的宽度以达到理想状态，但这样做会在右边留下一个像下图这样的大空白。

千万别犹豫，使整个文档与页面垂直居中，如下图，这样您就可以减小空白区域了。

#8   模块化提高工作效率

不是基于模块的结构设计会使结构设计不一致。当你意识到你已经制作了5种卡片界面，10个按钮，5种标题样式，各种。

在开始为特定内容建立界面之前，请试着查看之前建立的结构设计，您可能看到可以回收借助的样式模板。

他们可以采用“Aa的兴趣打卡11Day”的样式，并将其替换为“Aa 的潜水日记”的内容，而不是重新“发明轮子”并为“Aa 的潜水日记”建立另一张界面卡片(下面的🌰)。这将为结构设计人员节省天数，同时还能保持界面一致。

#9   采用品牌色做为强调色

他们通常认为品牌配色必须占据界面结构设计配色的很大一部分。但事实上，在干净简洁的布局中，他们很难决定在哪里展示客户的那些譬如霓虹黄、橙、粉等花里胡哨的品牌配色。好的方案是把它们用作强调色。

#10   突出项目标记

最后，如果你正在建立一个类似右侧的列表结构设计，请将项目标记、符号或数字放在空白处以突出显示列表。这将采用户的可读性流动不被打扰并且更清晰。

参考资料：https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

更多写作1.视觉和交互都必须知道的交互结构设计模式2.2018结构设计师超详细面试指南3.产品结构设计心得-视觉篇4.扁平描边插画呕血教程5.老司机教你3步解析品牌结构设计6.【只言片语01】设计的逻辑7.【只言片语02】结构设计中的加载8.【只言片语03】无效的用户测试9.【只言片语04】体验结构设计杂谈10.【只言片语05】app中5种形式的地址选择11.交互输出文档12.用户体验结构设计师的8个关键问答