火星网校
UI&UX小技巧 (第4篇)
发布时间：2024-04-09 20:27:54 浏览量：204次
本文共 2152 字，预计阅读 6 分钟
TCC 情报局的 第 200 篇 干货分享
2023 年的 第 29 篇
TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。在做界面设计时，往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用，让你的设计档次大幅提升。今天我们就来看看web设计中有哪些好用的小技巧吧～
1. 留白也是一种设计元素，用好它
1. Yup. Whitespace is a design element. So use it well.
不要过度堆砌你的设计，让你的设计和用户有“呼吸空间”。
留白是与排版、颜色和图像同样重要的设计元素，它可以清晰传达你的网站或 app 的信息，并为用户带来更好的用户体验。
如果你有很多的屏幕空间可用，并不代表你需要把每一寸空间都填满。用好留白，就像其他的设计元素一样。
（用好留白，不要让每一寸空间都堆满信息内容）
2. 在浅色文本和图片间保持合适的对比度
2. Maintain a suitable contrast ratio between light text and images.
始终要检查浅色文本在较浅的图片背景下是否清晰可读。
有时候简单给你的文字加一个略微不透明的深色背景，就可以使这些元素保持一个很好的对比度。
这也使你可以在深色和浅色图片之间快速切换，而不用去改变字体颜色。
（用略微深色的不透明背景，保持浅色文本和图片的对比度，使文本更易读）
3. 为你的标题和正文打造完美的垂直韵律
3. Get the perfect Vertical Rhythm for your Headlines and Body Text.
当想要在设计中实现出色的垂直韵律和文本元素之间稳固的视觉层级，就需要将边距处理得当。
我看过许多的设计，特别是文章列表，标题的上下页边距是相同的，这样就导致了其与下面的正文失去了联系。
这种情况下，我总是会给标题留出更多的上边距，而下边距则稍短一些。这样使得标题与下方的正文的联系更加紧密，列表中所有的文章也能保持良好的垂直韵律和视觉层级。
（利用上下边距的差异，来打造垂直韵律和层级）
4. 根据使用的文本块大小，调节合适的行高
4. Depending on the size of the text block you use, adjust your line-height accordingly.
并非所有的行高都是相同的。
当处理不同大小的文字块时，你需要根据实际找到最合适的行高。
例如，对于大段的文字，增加一些行高可以让用户的眼睛更容易分辨一行的结尾和下一行的开头，可以在更大的段落中顺畅移动。
如果文本段落较短（只有3-4行），行的长度也短，可以继续用标准的行高或者略微减小一些，不用担心可读性问题。
调整行高，使其最适应文本。
（大段落适当增加行高，小段落适当降低行高）
5. 保持文字调色板的简洁，只使用色调和阴影
5. Keep your text colour palette simple and just use Tints & Shades.
如果项目允许，没必要认为非得用许多不同的文本颜色才能很好地表达信息。
对有些人来说，尤其在没有项目规范的情况下，找到能很好搭配的颜色组合是一件困难的事情。
你是可以尝试使用主色调的浅色或深色变体。
（保持颜色的简洁，找到合适的颜色搭配不是一件易事）
6.用好亲密性原则
6. Proximity. A key Design Principle. Use it well.
亲密性原则是指彼此相关的项应当靠近，归组在一起。这一原则可以帮助你为用户创造更清晰的用户界面。
当运用亲密性原则时，可以确保有关系的设计元素被放在一起，这又可以反过来表明它们之间的关系，有助于提升用户在使用网站或 app 时的认知速度。
（把有关系的元素放在一起，好让它们被认为是一组的）
7. 投影，用得含蓄点
7. Shadows. Go subtle or go home.
在设计中巧妙地应用投影可以达到很强的视觉提示作用。
但记住，投影在现实世界中大部分时间是很难被注意到的。因此在你的界面中也应该遵循并复现这种情况。
当在界面中使用阴影时，请用得淡一些，用得含蓄一些，要不然宁肯不要使用。
（投影只要淡淡一些就足够了）
希望以上一些小小的技巧可以帮助你认识到，其实只要花一些小小的调整，就可以让设计达到很好的效果。
原文：https://www.marcandrew.me/ui-ux-micro-tips-volume-nine/
作者：Marc Andrew
译者：蓝建杭
审核：李泽慧
编辑：韩硕
本文翻译已获得作者的正式授权（授权截图如下）
十个技巧帮助你设计一款在线学习 APP
这些色彩心理学知识教你如何传递信息
案例研究｜康奈尔大学副业社区网站设计
网页设计师能从日式美学中学到什么？
案例研究｜一款为你带来难忘体验的美食 APP
如何制作打动面试官的作品集，这里有一份完整的指导手册
如何做好用户体验项目？从一个好计划开始
如何建立设计系统
如何把握不同层级用户的需求：回归本质，打磨信息架构
TCC 视野｜2021 年用户体验设计趋势分析
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
