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

这些色彩心理学知识教你如何传递信息

案例研究|康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么?

案例研究|一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集,这里有一份完整的指导手册

如何做好用户体验项目?从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求:回归本质,打磨信息架构

TCC 视野|2021 年用户体验设计趋势分析



- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入,一起交流设计知识,了解全球设计资讯,锻炼英文能力,发掘更多可能性~

添加小助手微信,备注「社群」,即可加入读者群。



热门课程推荐

热门资讯

请绑定手机号

x

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定