火星网校
有手就会的 UI&UX 小技巧(第3篇)
发布时间：2024-02-28 12:21:00 浏览量：118次
本文共 2994 字，预计阅读 8 分钟
TCC 情报局的 第 191 篇 干货分享2023 年的 第 20 篇
TCC 推荐：大家好，这里是 TCC 翻译情报局，我是李泽慧。在做界面设计时，往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用，让你的设计档次大幅提升。今天我们就来看看web设计中有哪些好用的小技巧吧～
当你在为项目创建高效、无障碍、美观的UI界面时，有时候只需要一些小小的调整就可以快速改善你的设计。
在这篇文章中，我收集了一些易于投入实践的小技巧，只需要付出一点点努力，就可以改善你的设计和用户体验。
1.想要说得不那么正式？用全小写吧。
1.Want to speak in a more informal tone? Try going all lowercase.
使用较大的字重和大写字母会让人感觉有点过于正式，而且有时会嘈杂。尝试使用全小写字母和更轻的字重。在设计某些项目时，这可以呈现出更非正式、友好的信息。
2.用字重、字号和颜色来表现文字层级
2.Use weight, size, and colour to indicate hierarchy within your type.
当设计文字时，所有元素不需要总是喊着说“快看我，快看我”。它们需要一个合适均衡的层级结构。只需要通过字重、字号和颜色的细微调节，就可以达到这个效果。这可以让用户在快速扫描后找到最重要的元素，避免过程中的出现疑惑。
3.深色背景上的亮文本？增加字重可读性更佳
3.Light Text on dark? Fatten up that font-weight for the best legibility.
当把深色文字放在亮色背景中时，你可以偶尔尝试一下选较轻的字重。但是，当情况反过来的时候，即亮色文本放在暗色背景时，你应该考虑加重一点字重，特别是对于那些长篇幅的文本。以此来达到最佳的可读性，并避免用户的眼睛疲劳。
4.选择合适的字体来创建正确情绪反应
4.Create the right emotional response with your typeface choices.
尝试为你要呈现的内容选择合适的字体。用户们都很聪明，他们有一种直觉，知道什么时候内容在与他们交谈，什么时候不是。选择正确的字体是使你的内容直接与他们对话的关键，且是在情感层面的。
（右边的案例，用更加浑厚稳重的字体，配合营造出“工作-生活”平衡的稳重感）
5.如果你不得不使用多种字体，坚持最多2个原则
5.If you (have to) use multiple typefaces, try to stick to the 2 max rule.
对我来说，只要有可能，我就会尽量坚持只使用1种字体的原则。但是，如果项目实在需要（多种字体），我建议将这些字体进行组合并控制数量最大为2。对于经验欠缺的人来说，很好地组合字体是比较困难的。放轻松点，但不要因为你可以加就随意加另一种字体。最多使用2个，然后结合字重、字号和颜色，瞬时就可以为你的设计带来视觉和谐。
（右边的案例，控制字体数量最多2个，并调整字体属性来达到视觉和谐）
6.全大写字母+字母间距=更佳可读性
6.All-Uppercase + Letter-Spacing = Better Legibility.
正在用全大写字母处理短行文字？为这些字母增加间距是一个为用户创造更佳可读性的好方法。这样做可以使单词更容易阅读和处理，因为字母的区别更大。只需要略微增加字母之间的间距，就能提高可读性，并为你的大写字母字体增添一些亮点。
7.设计元素保持一致性
7.Be consistent with your design elements.
我们是习惯性的生物，总是期望产品以我们所熟悉的方式呈现。我们期望在浏览一个网站或者 app 时整体能够保持一致，这也是一条需要执行的基本设计原则。
在布局、图标、颜色和按钮以及其他方面需要做到这样。保持一致性，减少困惑，改善用户体验。
（右边的案例，圆角保持一致）
8.大方地使用留白
8.White Space. Use it generously
留白是负空间。但同样的事物，也能有不同的意义。我的建议是，大方或适度地使用它，但是也要用好它。
在你的设计中添加留白是快速改进它们的最简单方法之一，让你的作品有呼吸感，并看起来更优雅。
9.为开头段落设计风格，吸引用户
9.Style that opening paragraph, and draw the user in.
如果你在处理长篇幅的内容，例如博客推送或文章，吸引读者进入内容至关重要。要做到这点，开头段落的外观几乎与内容本身一样重要。一些简单的调整，诸如不同的字号、行高、字重和颜色，就可以有更好的第一印象。
10.为扫读者设计，用短段落
10.Design for scanners. Use short paragraphs.
在处理长篇幅的内容时，尝试将段落变得简洁会很实用。我们现在都是扫读者，希望尽可能快地消化信息。尽可能用简短、清晰的段落来呈现你的文案，是令你的信息更好地被用户阅读和消化的可靠方法。
11.定义调色板，在设计中创造统一性
11.Define a colour palette, and create uniformity in your designs.
想要创造出看起来更专业的UI界面？定义你的调色板！不要用大量的随机颜色选择来填充你的设计。从开始就创建一个好的调色板，并坚持使用。这样子可以避免（选择颜色时）头痛，为你的设计增添统一性。
12.用8pt网格系统统一布置你的图标
12.Lay out your icons consistently when using the 8pt Grid System.
（例如：16×16, 24×24, 32×32等）。只有偶尔，才并非如此。如果不是特殊情况，确保任何插入到你的设计中的图标，都要放在一个8pt网格值（例如24×24）的容器内。这样做可以让你的图标在设计中得到一致的布局。
希望通过这些小技巧集，你能够认识到即使是设计中一些小小的调整，都可以对你和你的用户产生很好的结果。
往期精选文章：
十个技巧帮助你设计一款在线学习 APP
这些色彩心理学知识教你如何传递信息
案例研究｜康奈尔大学副业社区网站设计
Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标
网页设计师能从日式美学中学到什么？
案例研究｜一款为你带来难忘体验的美食 APP
如何制作打动面试官的作品集，这里有一份完整的指导手册
如何做好用户体验项目？从一个好计划开始
如何建立设计系统
如何把握不同层级用户的需求：回归本质，打磨信息架构
TCC 视野｜2021 年用户体验设计趋势分析
- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～
添加小助手微信，备注「社群」，即可加入读者群。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
