本文总结了七个简单直观的提示，用于改善网页视觉效果和增强质量感，享​​受〜

对于每个网页设计师来说，总是有时候需要做出设计决策。也许你的公司没有全职设计师，而且要求需要一个全新的UI;或者你正在制作自己的个人项目，并且你希望它比Bootstrap的默认值更好。这时，很多人都会撤退:“我不是一个艺术家，我无法取得更好的成绩！“但事实证明，为了设计更好的结果，合理使用技能更为重要。效果不佳。

在今天的文章中，我们总结了七个简单直观的提示，用于改善网络视觉效果和提高您的质量感。非常实用和实用，我希望你喜欢它。

1.使用颜色和单词粗细来创建层次结构而不是简单的大小比较

当UI文本的样式控制时，最常见的错误是过分依赖字体大小差异来创建对比。

“这个文字很重要吗？然后让它更大。 ”的

“这篇文章相对较小吗？让它变小。 ”的

简单地使用字体大小比较，对比度是不够的，尝试结合颜色和单词重量来创建更好的对比度。

“这个文字很重要吗？让我们更加大胆。 ”的

“这篇文章相对较小吗？让它变得更轻。 ”的

如果可以，您甚至可以使用两种或三种颜色：

主要内容是黑暗（如标题，但不使用纯黑色）

次要内容是灰色的（例如文章发布的日期）

辅助功能内容为浅灰色（例如页脚中的版权声明）

同样，在UI设计中，通常两个不同的单词足以创建良好的层次感：

大多数文本使用正常的单词重量（400到500，取决于字体）

对需要强调的文本使用较重的权重（600到700，具体取决于字体）

你应该尽量不让文本的部分文本重量小于400，因为这部分字体本身的字体大小已经很小，低于400会使可读性变差。如果您仍然需要减轻单词的重量，您可能希望使字体颜色更轻，或者将其替换为具有更强识别和相对较小重量的其他字体。

2.不要在彩色背景上使用灰色文字

在白色背景上，将黑色文本更改为灰色是稀释其视觉效果的好方法，但在彩色背景中进行此操作是另一回事。

事实上，让白色背景下的文字从黑色变为灰色实际上可以达到降低对比度的效果。

但是在彩色背景上，为了降低对比度，您应该让文本更接近背景颜色而不是灰色。

通常有两种方法可以降低背景颜色的对比度：

（1）降低白色文本的不透明度

降低不透明度允许背景颜色通过，以非冲突的方式降低前景文本和背景之间的对比度。

（2）根据背景颜色手动选取文本颜色

当背景是图像或图案时，半透明文本将影响可读性。此时，最好根据背景主色选择相应的文本颜色。

3.影子设计

与使用各种漫反射模糊阴影相比，微妙的垂直偏移阴影效果的使用更加明显且更自然，它模拟了最常见的光源特征，即从上到下光线产生的阴影效果。

如果您对此感兴趣，“材料设计指南”将清楚地向您解释生成此类阴影的详细信息。

4.尽可能少地使用边框

盒子模型是Web前端最常用的工具。当您需要在两个元素之间创建分隔时，尽量避免直接接触两者的边界。

虽然边框是分隔两个元素的好方法，但它不是唯一的方法。太多的使用会减少整个布局的设计，甚至造成混乱。

因此，您可以尝试以下方法来避免：

（1）使用框阴影

框阴影还可以创建边框感，并且更加微妙，并且看起来并不笨拙并且不会分散用户的注意力。

（2）使用不同的背景颜色来区分

通常，相邻元素背景仅需要微妙的差异以使它们可区分。因此，您所要做的就是在不同的部分使用不同的背景颜色，并尝试删除边框，因为您根本不需要它。

（3）添加额外的空格

在元素之间创建分隔效果不必由线框表示，只需添加空格并将它们分开。通过空白和间距对元素进行分组是UI设计中的常用技术。

5.不要让小图标不合理地扩展

在设计登录页面时，您可以突出显示产品的功能。此时您需要一些大图标作为视觉锚点。此时，您可以访问Font Awesome或Zondicons等网站，找到一些免费的矢量图标。然后放大到符合您需求的尺寸。

它们都是矢量图标，据说是无损的。但是一个通常只有16次的图标; 16放大三倍或四倍。它不是无损的，但它在视觉上不专业：缺乏细节，它总是感觉太粗糙。

但是，如果这些小图标是您可以制作的唯一材料，请尝试将其放入另一种彩色图形中：

这种设计不仅允许图标达到所需的视觉体积，而且看起来比放大更加细致。当然，如果你没有那么紧张，最好购买一些大的高质量图标，比如Heroicons或Iconic。

6，增加单面边框的颜色，增强个性

当然，您可能不是具有足够图形设计经验的设计师，但您可以使您设计的界面更具视觉吸引力。

最简单的方法是在界面边框的一侧添加单个或偶数渐变边框，这将使普通界面变为活动状态。

例如，在警告弹出窗口的一侧：

或者在导航栏的底部触发：

或者在整个页面的顶部：

这不需要任何图形设计经验，但它会显着增强设计感。

回到10,000步，你不知道选择什么颜色，简单，只需在Dribbble的颜色搜索中寻找一些漂亮的颜色，实际上就足够了。

7，并非每个按钮都需要颜色

很多时候，按钮本身所处的上下文和按钮上的文本内容可能会令人困惑。像BootStrap这样的框架允许设计者通过上下文和语义进行选择：

“这是一个积极的行动？让这个按钮变成绿色。 ”的

“这会删除数据吗？然后将按钮设置为红色。 ”的

实际上，语义与按钮本身的设计密切相关，但是有更多重要的维度被忽略，那就是层次结构。

页面上的每个操作实际上都位于整个交互式金字塔中的某个位置。大多数页面实际上只有一个主要操作，一些不太重要的小操作，以及一些第三级操作。

在设计这些交互时，重要的是通过层次结构展示这些交互的重要性。

主要操作应该是显而易见的。必须使用纯色，高对比度按钮。

次要操作应该是显而易见的，但不是很突出，使用鬼按钮或背景对比度较低的颜色是合理的。

3级操作应该是可发现的，但不是很明显，它们最好设计为链接。

“破坏性交互中涉及的按钮不是红色的吗？”“rd”;

没必要！如果破坏性交互中涉及的按钮不是主要操作，则根据二次操作的按钮或甚至三级操作来设计。

如果这是主要操作，您可以将其设为带有粗体文本的大红色按钮：

原作者: Adam Wathan& Steve Schoger

译者：陈子木

翻译地址：http://www.uisdc.com/7-practical-tips-cheating-design

本文由@陈子木授权，未经作者许可，不得转载。

该地图来自Unsplash，基于CC0协议

« 微信支付：在灰度测试中，在线有“允许用手机号码转账”功能 | 马云回应“转移1200亿家庭”:要学会在谣言的口水中游泳 »