产品设计术与器:界面设计7个实用设计技巧网站运营

来源:互联网 / 作者:SKY / 2018-06-25 15:06 / 点击:
7 个实用ui设计技巧用战术,而不是天赋改进你的设计。

7 个实用ui设计技巧用战术,而不是天赋改进你的设计。

产品设计术与器:界面设计7个实用设计技巧

每个Web开发人员,都不可避免地遇到需要做出视觉设计决策的情况,也许你工作的公司没有一个全职设计师,你需要自己实现一个新功能的UI。或者,也许你正在攻克一个编外项目,并希望它看起来比「另一个Bootstrap站点」更好。

很容易举起双手说:

“我永远无法让这个看起来很好,我不是一个艺术家!”

但事实证明,有很多技巧可以用来提升你的工作,不需要有平面设计的经验。

这里有七个简单的想法可以用来改善你的设计。

一、使用颜色和粗细来创建层次结构,而不是字体大小

产品设计术与器:界面设计7个实用设计技巧

对UI文本进行样式设计时常犯的一个错误是过于依赖字体大小来控制层次结构。

“这段文字是重要的吗?让它大一点。 ”

“这段文字是次要的?让它小一点。 ”

不要将所有繁重的工作都留在字号上,而是尝试使用颜色或字重来实现相同效果。

“这段文字是重要的吗?让它粗一点。 ”

“这段文字是次要的?让它细一点。 ”

尝试并坚持两种或三种颜色:

主要内容的深色(但不是黑色,如:文章的标题);

次要内容灰色(如文章发表日期);

辅助内容的浅灰色(可能是页脚中的版权声明)。

产品设计术与器:界面设计7个实用设计技巧

类似地,两种字体权重通常足以用于UI工作:

大多数文本的正常字重( 400 或 500 取决于字体);

较粗的字体( 600 或700)用于您要强调的文字。

产品设计术与器:界面设计7个实用设计技巧

UI设计上远离字重不超过 400 的字体 ,他们可以用在大标题上,但在较小的字号下不易于阅读。如果您正在考虑使用较轻的重量来淡化某些文字,请改为使用较浅的颜色或较小的字体。

二、不要在彩色背景上使用灰色文字

产品设计术与器:界面设计7个实用设计技巧

使文本变为浅灰色,是在白色背景上淡化它的好方法,但在彩色背景上看起来并不太好。这是因为我们实际看到白色灰色的效果是对比度降低,使文本更接近背景色实际上有助于创建层次结构,而不是使它变成浅灰色。

产品设计术与器:界面设计7个实用设计技巧

处理彩色背景时有两种方法可以降低对比度:

(1)减少白色文字的不透明度

使用白色文字并降低不透明度,这可以让背景颜色渗透一点点,以不与背景冲突的方式减弱文字。

产品设计术与器:界面设计7个实用设计技巧

1
3