怎么让设计更高级? 一些不受关注的小细节设计提升作品高级感的技巧
<p>在做UI界面设计时，有时候看着设计出来的界面总觉得不大好，但又不知道问题出在哪，这里其实考验的就是设计观察力。资深设计师之所以强，往往就是强在对设计细节的把握能力，他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来，但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累，为此，彩云围绕设计细节计划出一个系列文章，今天这篇文章是第一期，感兴趣的同学保持关注，后续会有更多设计细节干货文章连载更新，保证看完就能用到自己的工作中。</p><p>在这篇文章中，我整理了一些小的设计技巧，来帮助你快速改进自己的设计。有时只需要一些小的调整，就能快速提高设计的品质。</p>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156336.jpg" alt="" /></p>
<p>当你在设计一个高效、美观的UI界面时，有时只需要一些小的调整，就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。</p>
<p>在这篇文章中，我整理了一些小的设计技巧，来帮助你快速改进自己的设计，提高用户体验。</p>
<h3><strong>适当使用文本装饰元素</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156337.jpg" alt="" /></p>
<p>有些人会拿极简设计出来说事，认为不应该加多余的文字干扰 ，界面上的内容都应该遵循有意义这个原则，这没有问题。但有时候增加文本的目的只是简单的为了“装饰”，这样是可以的。我们不希望所有的设计都变得平平无奇。</p>
<p>纯粹出于装饰原因而加入一些比较特别的元素也完全没问题，它可以不遵循可访问性标准，比如颜色对比度特别浅，看不清都没关系。只要这些元素不影响用户体验就可以。</p>
<h3><strong>UI界面中的不同元素要有区分度</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156338.jpg" alt="" /></p>
<p>按钮、通知（文字链接）是用户界面中两个独立又重要的元素。如果可以的话，<strong>一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来</strong>。</p>
<p>按钮，在大多数情况下都是最重要的，所以在界面中一定要确保是最突出，并且很容易区分其他元素（例如：文本链接）。</p>
<h3><strong>使用更自然的投影</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156339.jpg" alt="" /></p>
<p>设计过程中我们通常都会用到投影。投影的恰当使用，可以有效提高视觉品质。在设计界面时，避免使用比较重的投影，降低不透明度，让界面看着更加自然。</p>
<h3><strong>使用让视觉更加清晰的字体</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156340.jpg" alt="" /></p>
<p>在设计中，字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度，提高视觉的整体效果。<strong>但要确保选择是合适的字体，行高和字重粗细，确保给用户呈现的内容清晰度</strong>。</p>
<h3><strong>面包屑导航设计要便于用户理解</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156341.jpg" alt="" /></p>
<p>导航的设计无处不在，通常会应用在内容比较多的网站上，但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下， 就可以让用户快速确定自己所在站点中的位置，以及他们可能需要去的其他地方。</p>
<p>例如：如果他们通过搜索跳转到某个站点的某个位置，这就特别有用。像上图中的设计一样，始终让导航链接中的最后一项让它在视觉上与其他有明显区别，这样用户更加容易理解。</p>
<h3><strong>少用过高饱和度的颜色</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156336.jpg" alt="" /></p>
<p>高饱和度的颜色（明亮的蓝色、红色、绿色等）在网站上是挺有视觉冲击力，并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳，尤其是结合文本内容一起使用的时候。</p>
<p>尽量少地使用高饱和的颜色，你可以尝试把饱和度降低，<strong>增加颜色中的灰度来使颜色变淡</strong>，这样不仅能避免用户视觉疲劳，还能更加突出重点内容，让用户阅读起来更加方便且不被视觉干扰。</p>
<h3><strong>使用用户熟悉便于识别的图标</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156342.jpg" alt="" /></p>
<p>在设计中使用图标时，最好使用用户熟悉并便于识别的图标，让用户能快速理解使用它能做什么。使用不能传达正确含义的图标，只会变成视觉噪音，引起用户混淆，成为用户的认知障碍。</p>
<h3><strong>使用亲密性原则来表达元素之间的关系</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170156343.jpg" alt="" /></p>
<p>版式设计四大基本原则：对比，重复，对齐，亲密性，其中亲密性原则是把画面中相关元素进行分类，建立某种视觉上的关联，实现页面整体结构清晰度，加快用户在浏览网站或应用时的认知。</p>
<h3><strong>使用4pt基线网格+8pt网格来做字体排版</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170157344.jpg" alt="" /></p>
<p>进行文字排版时，将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。</p>
<p>你只需要使<span style="color: rgb(255, 0, 0);"><strong>用 4 的倍数（16、20、24、28 等）的行高值将字体与 4 的基线网格对齐</strong></span>。为什么是 4？ 好吧，就我个人而言，我发现在处理某些文本大小时，过去以 8 的倍数进行缩放并不是那么通用。</p>
<h3><strong>减少标题的行高</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170157345.jpg" alt="" /></p>
<p>冗长的正文需要足够的行高来增加可读性，而标题通常要短得多，所以你可以稍微减少间距。</p>
<p>标题的推荐行高通常是文本大小的1 – 1.3倍，标题文字越大，需要的行高就越少。</p>
<h3><strong>使用色轮上的邻近色不容易出错</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170157346.jpg" alt="" /></p>
<p>邻近色，是最和谐的配色方案之一，当你在挑选颜色遇到困难时，它能给你很大的帮助。</p>
<p>一组由“<strong>主”、“次”、“再次”</strong>组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。</p>
<h3><strong>在设计中最大化信噪比</strong></h3>
<p align="center"><img src="https://img.jbzj.com/file_images/article/202108/20210805170157347.jpg" alt="" /></p>
<p>设计中的清晰度和可用性可以通过<strong>“最大化信号”和“最小化噪音”</strong>来实现，这反过来又产生了高信噪比。</p>
<p>
<div class="cupage">上一页<strong>1</strong>2 下一页 阅读全文</div>
頁:
[1]