10个提升设计细节的实用小技巧(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:UI中国   作者:彩云Sky

关键词

标题设计

特别是在背景是动态的,设计标题并在图片上添加文本就变得非常具有挑战性。

通常,带有动态图片背景的文字,常见解决方案是添加投影,但它无助于用户的可读性。它在字母和单词周围增加了更多的视觉混乱,因为它把字母间的留白给填补了。

对于一些人来说,黑白颜色叠加是解决这类问题的有效方法。但是最近,我发现了使用渐变填充的新方法。

10个提升设计细节的实用小技巧,PS教程,思缘教程网

渐变填充方式

这样做比在图片上增加黑色背景或者减少其透明度要容易的多。而且,只是一部分图片有一些灰度,另一些部分依然保持自然。文本的位置会变得更暗,这样可以提升文字的可读性。

7. 行的长度

10个提升设计细节的实用小技巧,PS教程,思缘教程网

大多数设计师通常会把每一行做的很长来适应网页宽度。但这样会给用户带来视觉压力,每一行45-65个字符是最理想的。

如果你为了达到理想效果缩短了行的长度,导致右侧有一个非常大的留白空间,如下图所示:

10个提升设计细节的实用小技巧,PS教程,思缘教程网

右侧有一个很大的白色区域

不要怀疑你做的初衷,将文本内容进行居中,就可以消除右侧的空白。

10个提升设计细节的实用小技巧,PS教程,思缘教程网

居中内容

8. 将设计组件化

10个提升设计细节的实用小技巧,PS教程,思缘教程网

设计不一致的地方在于它并没有基于规范。当你意识到这个问题时,你可能已经设计了5种不同的卡片,10个不同的按钮,5个不同的标题样式等。

在开始为特定的内容设计界面之前,尝试回头看看以前的一些设计,因为很可能会看到可以复用的样式。

我们可以把文章的卡片内容复用在艺术图片卡片上,而不是重新设计一个新的样式(如上面的例子)。这样可以节省设计师的时间,并保持界面统一。

9. 使用品牌颜色作为强调

10个提升设计细节的实用小技巧,PS教程,思缘教程网

我们通常认为,品牌色彩必须占据界面颜色的很大一部分。我们很难在干净简约的设计中向客户展示大面积的霓虹黄色,橙色,和粉红色品牌颜色。那么到底怎么做呢?只是需要将它们用来作为强调色即可。

10. 重点突出

10个提升设计细节的实用小技巧,PS教程,思缘教程网

最后,像上面那样去设计一个列表时,可以让选择框,符号或者数字在页边。这样可以使得列表更清晰,可读性更强。

希望这10个设计小技巧能够帮助你提升你的界面设计。

原文:https://medium.com/sketch-app-sources/design-cheatsheet-274384775da9

 收藏