UI设计应该注意什么？如何设计更多地呈现UI，优秀的漫游小边今天分享一些UI设计技巧，可以快速提高创建的视觉效果，感兴趣的朋友可以学习！
当我们使用完全由大写字母组成的文本时，我们需要注意扩大字母之间的间距，以防止字符相互粘连，使文本更可读。
字重选择
除了字母间距，我们还需要仔细选择字重。纤细轻薄的字体可以在设计中使用，但要看字重。如果你正在制作一个用户最终会在屏幕上看到的产品，最好忘记Hair和Thin(非常细)。、，因为它们很难阅读，而且会在一些屏幕上造成半像素破碎。
标题和文本字体的大小
现在让我们来谈谈网页排版。我们都知道标题分为六个级别（h1-h6）。首先，你应该确保你的项目中不超过四个，并控制它们的逻辑和一致性。应该注意的是，尽管现在流行的表达式排版。但你仍然必须确保你的标题不会太夸张，因为太大的文本和太小的文本一样难以阅读。
然后是文本部分。浏览器的默认设置（以谷歌chrome为参考）为16px。这个尺寸读起来很舒服，但我更喜欢使用不少于17px的主文本和14px的附加文本。将12px保留到最小尺寸，再小，也会因为视力问题或显示器不好而变得难以阅读。记住避免在同一段落中使用两种大小差异较小的字体。例如，16px和17px：这将使产品的外观非常混乱，而且完全不合理。
行高
通常，我们需要增加一点行高来提高可读性。特别是对于大型文本部分：博客、文章和信息部分的网站或移动应用程序。标题使用相同的方法是合理的，以确保字母的尾部不相互影响。
文本和标题层次结构
粗体文本应用于突出显示文本的重要组成部分。这包括标题、链接和按钮，有时还包括文本中强调的部分。如果整个文本都是粗体的，你就不知道该看哪里，更重要的是什么。
文本对比
在设计中，我们应该特别注意文本的对比度，以确保我们的字体在任何类型的显示器上都是可读的。这对于经常使用浅灰色输入字段文本尤为重要。
2.间距和边距
负空间（元素之间的空间）对于一个好的设计至关重要。空间不仅使元素之间的关系更加清晰，而且还创造了一种节奏和平衡感。
去除多余的框架和线条
将一个元素与其他元素分离的最简单方法是使用框架或1px隔离线。但这并不一定是最好的方法。我看过一些设计作品，一个盒子，几个盒子，每个盒子都有自己的1px框架。如果是这样，你需要停下来想想：这真的合适和必要吗？
现在界面上的卡片已经泛滥成灾:在线商店、动物护理应用程序和应用程序中的卡片。有时使用边框是合理的，但还有其他方法可以区分这些元素，如阴影或间距。最重要的是，卡片之间的空白应该大于卡片内部的空白。如果我们使用太多的边框，我们将在视觉上减少卡片之间的空间。内容是产品中最重要的部分，所以请不要不合理地减少为其保留的空间。
不同元素的距离
边距有助于直观地确定一个元素是否属于另一个元素。让我们以新闻网站上最后一篇文章的布局为例：假设它由图片、标题、3-4行预览文本和发布日期组成。标题应与文本“结合”，形成实体元素。日期的边距应略大于标题和文本之间的边距。最后，图片应尽可能远离标题文本单元。听起来很混乱？参考下面的图片
少即是多
甲方或领导总是要求我们把所有的信息放在一个或一个界面上——无论是标题、电话、菜单、特殊信息，还是大大小小的标志。我不是谈判者，也不能提出一个简单的技巧来改变他们的想法。但至少你可以说，用户一次收到的信息越少，他就越容易采取行动（例如，打电话）。一步一步地获取信息可以让客户体验更轻松、更愉快。客户永远不会费力解释你的界面布局。而且一堆挤在一起的元素不仅难看，而且难看。
屏幕边缘的空白不均匀
如果您正在制作海报、横幅或我们最喜欢的卡片，请注意边缘的空白。如果内容以经典的方式（从左上角到右下角）布局，最好让上面的距离略大于左边，这将使你的页面更有吸引力。
3.颜色和图片
图像、图标和背景可以传达产品的情感。图片应准确显示公司、APP或网站提供的内容。
一些关于Logo的想法
虽然我不经常做标志，但我在我的职业生涯中总结了一个经验：一个好的标志真的很难做到，但只要我遵循基本的规则和原则，一个像样的标志仍然很容易。举例来说，仔细选择颜色。有一次，我看到一个名叫“VIP catch上面有紫色标志的钓鱼店。紫色和“VIP“这个词的组合并不能真正让人想起钓鱼。一般来说，我们可以为任何行业使用任何颜色，但如果有明显的脱节，比如“XXX VIP Catch紫色场景，那么最好仔细考虑一下。
另一个标志提示是：如果你很难在标志上放置一个图像（一个符号），不要这样做。试着把它做成一个纯字体的标志，少做，做得更好。让世界上少一家印有印章或刻度的法律事务所。
阴影
物体下的阴影绝对不是黑色的，通常有多个阴影：一个阴影非常小和明亮，直接位于阴影下（如果它站立或躺在某个东西上），第二个阴影更模糊和透明。我们应该避免项目中的“脏”和不自然的阴影。
3.颜色和图像
任何矢量图都应该是矢量文件。所有的图表、符号和标志都应以SVG格式(用于iOS开发的PDF)提供给开发人员。PNG图标的边缘会模糊，看起来很糟糕，尤其是在视网膜显示屏上。此外，矢量图像占用的内存较少。
更多关于图标的技巧
如果你正在为一个网站或应用程序设计一组图标，请确保它们都属于一个“家庭”。这意味着相同的笔画宽度和相同的边框半径。并检查每个图标适用于相同尺寸的正方形，质量相同。如果有些图标中有圆，请确保它们的直径相同。图标应具有相同的风格。
4.常识
还有一些事情要告诉你，但我不知道如何对它们进行分类，所以我把它们放在这一部分。
避免奇怪的布局
让我们回到刚才在空间和边缘学习的新闻预览示例。如果按照非常规顺序排列元素(图片、标题、文本和日期)，可能会造成混淆。因此，请坚持熟悉的界面布局。熟悉并不一定意味着无聊，你可以在项目的其他部分展示你的创造力。避免在没有充分理由的情况下将元素实验性地放置在屏幕/页面/卡上。否则，用户可能会感到困惑，离开你的产品。记住，设计师和艺术家是不同的职业。在设计中，我们为人们创造了一种产品，这意味着你的个人创作冲动只能在不影响用户体验的情况下使用。
布局尺寸及测量
在设计移动应用程序之前，向开发人员询问屏幕尺寸是非常重要的。iOS通常是320px，Android是360px。虽然移动应用程序或多或少是可预测的，但由于它将用于各种设备，网站设计可能会面临挑战。根据我作为前端开发人员的经验，以下情况很常见：提供的布局是为巨大的监视器设计的。块与块之间有400-600像素的空白，字体巨大，网格奇怪。幸运的是，我也是一名设计师。我可以通过调整页边距和大小来解决这个问题，使它在任何屏幕上看起来都很好。然而，前端开发人员通常没有设计背景，他们将完全按照提供给他们的方式进行设计。因此，普通笔记本电脑屏幕上的元素会非常大。请注意，笔记本电脑屏幕垂直方向的平均极限约为700px，因此请尝试在此测量标准中添加一个语义块。
Lorem Shmipsum
在你的设计中，Lorem Ipsum示例文本看起来既便宜又不专业，所以请避免使用。这只能说明设计师懒得创造一些像样的内容。另外，我们不需要亲自创建它，Sketch和Figma为我们提供了很多插件。另一个提示：即使只是为了演示，也不要重复使用相同的内容。请放置不同长度的图片、标题和预览文本。
湘公网安备43019002002199
