专栏名称: Aceyclee
目录
相关文章推荐
人人都是产品经理  ·  深度解析 5种「AI 智能体」模式 ·  15 小时前  
人人都是产品经理  ·  电商后台系统设计:如何用信息架构降低认知负荷 ·  昨天  
人人都是产品经理  ·  幻想能够再次重生的东北雨姐,开启了“全国投胎”之旅 ·  3 天前  
51好读  ›  专栏  ›  Aceyclee

[译] 迅速提高设计美感的 7 个小技巧

Aceyclee  · 掘金  · 产品  · 2018-03-06 06:06

正文

[译] 迅速提高设计美感的 7 个小技巧

用战术来改进你的设计

1. 利用颜色和粗体来创建层次结构,而非使用字体大小

对于文本样式的设计,最常犯的一个错误就是依赖字体大小来控制层次结构。

我们很常听到这样的要求:

「这段文字比较重要,加大字体!」

记住,不要过于依赖字体大小,而是 尝试使用颜色和字体粗细来完成相同的工作。

尝试使用三种以下的颜色进行设计:

  • 主要内容用黑色(如文章的标题)
  • 次要内容用灰色(如文章发表日期)
  • 辅助内容用浅灰色(如页脚中的版权声明)

同样,两种 font weights 足以适用于大部分 UI 设计了:

  • 大部分文本的正常粗细值(400 或 500,取决于字体)
  • 更粗号的字体(600 或 700)用于您要强调的文字

用于网页展示的一般不小于 400,他们更适合大标题,较小尺寸下阅读会很不舒服。

当然,对于那些不重要的文本(比如电影海报下的出品公司等),可以改用较淡的颜色或者较小的字体。

2. 不要在彩色背景上使用灰色字体

白色背景上使用浅灰字体是个淡化文本的好方法,那是因为 降低了字体与背景的对比度。 但灰色字体并不适用于彩色背景。

正确的方式应该是找寻接近背景色的文本颜色,这样才有助于创建层次结构。

两种方式:

  • 降低白色文字的不透明度

这样可以让背景颜色「渗透」进字体,同时又不会和背景有颜色冲突

  • 挑选与背景颜色相近的字体颜色

选择与背景色调相近的颜色,并调整饱和度和亮度使其与背景更融洽。当文本背景包含图像或者其他非颜色元素时,这种方法更好。

3. 正确使用阴影

阴影效果并不是采用一大块模糊效果去仿制,而是正确地模拟现实世界中光源照射的情况。

阴影效果的设计推荐阅读 『Material Design Guidelines』

4. 不要频繁使用边框(border)

当你需要进行分割操作时,尝试使用留白来创造边界感。

边框当然是区分两个页面元素的好方法,但它并不是唯一的方法,而且频繁使用边框会让页面显得很复杂凌乱。

下次可以试试这样:

  • 使用框型阴影

同样能达成效果的操作,却不容易分散用户的注意力

  • 使用两种不同的背景颜色

通常相邻元素的背景颜色略有不同就有明显的区分效果了

  • 添加更大的间距

5. 不要使用过大的图标

如果你正在使用像 Font Awesome 或者 Zondicons 这样的免费图标集,而且你设计的东西需要使用大图标,比如 landing page 的功能部分,那就需要注意了。

虽然矢量图像在放大尺寸时并不会降低图像质量,但是放大尺寸后的 缺乏细节 却无可辩驳,这会显得你很不专业。

如果你只有小图标,尝试将其放在另一个包含背景颜色的形状中,会更合适。

这不仅能保持原有图标处于最合适的尺寸,也能适配更大的页面。

当然,最好的方法是使用大尺寸高级图标集,如 Heroicons Iconic

6. 使用颜色边框丰富设计







请到「今天看啥」查看全文