UI设计要注意什么？怎么样设计更能把UI给呈现出来，今天分享的是UI设计的几个小技巧，可以快速改善要创建的视觉效果，感兴趣的朋友可以学习一下！

当我们使用完全由大写字母组成的文本时，需要注意将字母之间的间距拉大，这样可以防止字符彼此粘连，让文本更具可读性。

• 字重选择

除了字母间距之外，我们还需要谨慎选择字重。设计中可以使用纤细轻薄的字体，但要取决于字重。如果你正在制作一个用户最终会在屏幕上看到的产品，那么最好忘掉Hair(超级细)和Thin(非常细)、，因为它们非常难阅读，而且会在一些屏幕上造成半像素破碎的效果。

• 标题和正文字体大小

现在让我们来谈谈网页排版，大家都知道标题分为六个级别（h1-h6）。首先，你应该确保你的项目中不超过四个，并控制它们的逻辑和一致性。并且需要注意的是：尽管现在比较流行富有表现力的排版。不过你仍然要确保你的标题不要太过夸张了，因为太大的文字和太小的文字一样难以阅读。

接着是正文部分。浏览器的默认设置(以谷歌Chrome作为参考)是16px，这个大小读起来很舒服，但是我倾向于使用不小于17px的主文本和14px的附加文本。将12px保留为最小尺寸，再小的话就会由于视力问题或显示器不好而变得难以阅读。而且要切记避免在同一文段中使用两种大小差距不大的字体。比如16px和17px：这会让产品的外观非常混乱，并且完全是不合理的。

• 行高

通常，我们需要稍微增加一点行高以提高可读性。对于大型文本块尤其如此：网站或移动应用程序的博客，文章和信息块。标题采用相同的方法是合理的，这样可以确保字母的尾部不互相影响。

• 文本和标题层次结构

粗体文本应该用来突出显示文本的重要部分。这包括标题、链接和按钮，有时也包括文本中强调的部分。如果整个文本都使用粗体，就会不清楚应该看哪里，什么更重要。

• 文本对比

在设计中要特别注意文字的对比度，以确保我们的字体在任何类型的显示器上都是可读的。这对于经常使用浅灰色的输入字段文字尤其重要。

2.间距和边距

负空间(元素之间的空间)对于一个好的设计是必不可少的。空间不仅让元素之间的关系变得更加清晰，还能打造节奏和平衡感。

• 去掉多余的框架和线条

将一个元素与其他元素分离的最简单方法就是使用框架或1px隔离线。但这并不见得是最好的方法。我看过这样一些设计作品，一个盒子套一个盒子，里面还有几个盒子，并且每个盒子都有自己的1px框架。如果是这种情况，你需要停下来想一想:这真的合适且有必要吗?

现在界面上的卡片已经泛滥成灾了：在线商店中的卡片，动物护理应用中的卡片，交付应用程序中的卡片。有时使用边框是合理的，但是还有其他区分此类元素的方法，例如阴影或间距。最重要的是，卡片之间的空白应该大于卡片内部的空白，如果我们过多的使用边框，就会在视觉上减少卡片之间的空间。而内容才是产品中最重要的部分，所以请不要不合理的减少为其保留的空间。

• 不同的元素距离

边距有助于直观地确定一个元素是否属于另一个元素。让我们以新闻站点上一篇文章的布局为例：假设它由一张图片、一个标题、3-4行预览文本和发布日期组成。标题应该与文本“结合”，构成一个实体元素。日期的边距应比标题和文本之间的边距略大。最后，图片应该尽可能地远离标题文本单元。听起来很混乱？不妨参考一下下面的图片

• 少即是多

总会有甲方或者领导要求我们将所有信息放在一块或一个界面上——无论是标题、电话、菜单、特价信息、还是大大小小的徽标。我不是谈判者，也不能提出一个简单的技巧来使他们改变主意。但至少你可以说:用户一次收到的信息越少，他就越容易采取行动(例如，打电话)。循序渐进的获取信息可以让客户体验更轻松，更愉悦。客户永远都不会费力地解读你的界面布局。而一堆挤在一起的元素不止不美观，更是丑陋的。

• 屏幕边缘空白不均匀

如果你在制作海报、banner或我们最喜欢的卡片，那么请注意边缘的空白。如果以经典方式（从左上角到右下角）来布置内容，最好让上边距比左边稍大，这样会让你的页面更具吸引力。

3.颜色和图片

图像，图标和背景可以传达产品的情绪。图片应该准确地展示公司、APP或网站所提供的内容。

• 关于Logo的一些想法

虽然我不经常做logo，但在我为数不多职业生涯中还是总结出了一条经验：一个好的logo真的很难做，但只要遵循基本的规则和原则，一个像样的logo还是很容易的。例如，仔细选择颜色。有一次，我看到一家名为“VIP catch”的钓鱼店，上面有一个紫色的标志。紫色和“VIP”这个词的组合并不能真正让人联想到钓鱼。一般来说我们可以为任何行业使用任何颜色，但如果存在明显的脱节，如“XXX VIP Catch”紫色场景，那么最好仔细斟酌一下。

另一个logo提示是:如果你很难把一个图像(一个符号)放到一个标志上，那就不要这样做。试着把它做成一个纯字体的标志，少做一点，做得更好一点。让这个世界少一个印着印章或标着刻度的法律事务所吧。

• 阴影

物体下的阴影绝对不是黑色的，并且通常具有多个阴影：一个阴影很小且明亮，直接位于阴影之下（如果它站立或躺在某物上），第二个阴影则更加模糊和透明。我们应该避免在项目中出现“脏污”，不自然的阴影。

3.色彩和图像

任何矢量图都应该是矢量文件。所有的图表、符号和徽标都应该以SVG格式(用于iOS开发的PDF)提供给开发人员。PNG图标边缘会模糊，看起来很糟糕，尤其是在视网膜显示屏上。此外，矢量图像占用的内存较少。

• 更多关于图标的技巧

如果你正在为一个网站或App设计一组图标，那么应该确保它们都属于一个“家庭”。这意味着相同的笔画宽度，相同的边框半径。并检查每个图标都适合相同大小的正方形、具有相同的质量。如果一些图标中有圆，请确保这些圆的直径相同。图标应该具有一致的样式。

4. 常识

还有一些事情想告诉你，但是我不知道如何对它们进行分类，所以把它们放在了这个部分。

• 避免奇怪的布局

让我们回到刚才在空间和边距部分学习的新闻预览示例。如果我们将元素(图片、标题、文本和日期)按非常规的顺序排列，可能会造成混淆。所以请坚持熟悉的界面布局。熟悉并不一定意味着无聊，你可以在项目的其他部分展示你的创造力。避免在没有充分理由的情况下将元素实验性地放置在屏幕/页面/卡片上。否则，用户可能会感到困惑，并离开你的产品。记住，设计师和艺术家是不同的职业。在设计中，我们为人们创造了一个产品，这意味着你的个人创作冲动只能在不影响用户体验的情况下使用。

• 布局尺寸和测量

在开始设计移动应用程序之前，务必向开发人员询问屏幕尺寸，这一点很重要。通常情况下，iOS为320px，Android为360px。虽然移动应用程序或多或少清晰可预测，但网站设计可能会面临挑战，因为它将在各种设备上使用。以我作为前端开发人员的经验，以下情况很常见：所提供的布局是为巨大的监视器设计的。块与块之间有400-600像素的空白，巨大的字体，奇怪的网格。幸运的是，我也是一名设计师，我可以通过调整页边距和大小来解决这个问题，使它在任何屏幕上看起来都很好。然而，前端开发人员通常没有设计背景，他们将完全按照提供给他们的方式实现设计。结果，普通笔记本电脑屏幕上的元素会非常大。请注意，笔记本电脑屏幕垂直方向的平均极限约为700px，因此请尝试在此度量标准中加入一个语义块。

• Lorem Shmipsum

在你的设计中，Lorem Ipsum示例文本看起来廉价且不专业，因此请避免使用它。这只能说明设计师懒得去创造一些像样的内容。此外，我们也无需亲自创建它，Sketch和Figma为我们提供了大量插件。另一个提示：即使只是出于演示目的，也不要重复使用同样的内容。请放置不同长度的不同图片，标题和预览文本。

 以上就是今天分享的所有内容了，关注疯狂的美工官网，每天分享不同设计技巧！