您所在位置:首页 > 张家港UI设计培训_设计作弊的7个实用技巧 >

张家港UI设计培训_设计作弊的7个实用技巧

上元教育 2020-08-29
张家港UI设计培训_设计作弊的7个实用技巧


每个web开发人员都不可避免地会遇到需要做出可视化设计决策的情况,不管他们是否喜欢。

也许你工作的公司没有专职设计师,你需要自己实现一个新功能的用户界面。或者你正在攻克一个项目,你希望它看起来比另一个网站更好。

你很容易举手说,“我永远都无法让这看起来很好,我不是艺术家!“但事实证明,有很多技巧可以用来提升你的作品水平,而这些技巧并不需要图形设计方面的背景知识。

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

 
 
【咨询热线】韦老师 18015678234(同微信)
 
【学校地址】张家港河西路88号曼巴特写字楼14楼——上元捷梯教育(张家港校区)  
 

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

设置ui文本样式时的一个常见错误是过于依赖字体大小来控制层次结构。

“这段文字重要吗?我们把它弄大点。”

“这篇文章是次要的吗?让我们把它变小。”

不要把所有的重担都放在字体大小上,尝试使用颜色或字体粗细来完成相同的工作

“这段文字重要吗?让我们加粗些。

“这段文字是次要的吗?让我们用浅色吧。

尝试使用两种或三种颜色:

类似的,字体的两种粗细通常足够辅助UI工作:

在UI设计中,不要使用400以下的字体:它们可以用于大标题但是在字号较小的情况下太难阅读。如果你正在考虑使用较细的字体来减少文字的强调性,可以改用浅色或者较小的字体来实现。

 

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

在白色背景下,使用浅灰色文本是一个很好地弱化信息的方法,但在彩色背景下看起来就不那么好了。

这是因为我们实际上看到的灰色配白色的效果是降低对比度。

使文本更接近背景色实际上有助于创建层次结构,而不是使用浅灰色。

在使用浅色背景时,有两种方法可以降低对比度:

1、降低白色文字的透明度

使用白色文本并降低不透明度。这使得背景色有一点出血,以一种不与背景冲突的方式去强调文本。

2、选择与背景色相近的浅色

当背景是图像或图案时,或者感觉降低不透明度使文本太暗或不突出时,这比降低不透明度效果更好。

选择一种与背景色调相同的颜色,调整饱和度和亮度,直到看起来合适为止。

 

三、弱化阴影

不要使用大的模糊和扩散值使框阴影更明显,而是添加垂直偏移。

它看起来更自然,因为模拟了从上面照射下来的光源,就像我们在现实世界中看到的一样。

同样也适用于内阴影,看起来就像可填写的表格一样:

如果你有兴趣学习更多关于阴影设计的知识,《 Material Design Guidelines》是一本极好的入门书。

 

四、少用边框

当你需要将两个元素进行区分时,尝试不使用边框。

虽然边框是区分两个元素的好方法,但它并不是唯一的方法,使用过多的边框会让您的设计繁琐复杂。

下一次当你发现自己正在使用边框时,可以试试下面几个方法:

1、使用阴影

阴影可以很好地勾勒出一个元素的轮廓,就像边框一样,但是可以更加精细,并且在不分散注意力的情况下完成相同的目标。

2、使用两种不同的背景

为相邻元素提供稍微不同的背景色是区别两个元素的常用方法。如果您既使用了边框,又使用了不同的背景色,请尝试删除边框。您可能不需要它。

3、调大间距

有什么比简单地增加元素之间的间距更好的方法来区别两个元素?在不引入任何新用户界面的情况下,将元素间隔调大是区别元素组之间的一个好方法。

 

五、不要放大本来就很小的图标

如果你正在设计一些可以使用一些大图标的东西(比如登录页面的“功能”部分),你可能会本能地抓起一个免费的图标库,然后增加大小,直到它们满足你的需要。

毕竟它们是矢量图像,所以如果你增加大小对质量不会有影响?

当你增大矢量图像的尺寸时,它的质量不会降低,但是当你将它们放大到原来的3倍或4倍时,16-24像素的图标看起来就很不专业了。它缺乏细节,总觉得“矮胖”得不成比例。

 

如果只有小图标,请尝试将其封闭在另一个形状中,并为该形状提供背景色:

这样可以使实际图标更接近其预期大小,同时仍可以填充更大的空间。

如果你有预算,你可以使用付费icon网站用于设计更大的尺寸。

 

六、使用强调边框为平淡的设计添加颜色

如果你不是一个平面设计师,你如何从漂亮的照片或彩色插图中获得灵感并加入在你的用户界面设计中?

一个简单的技巧,可以使界面有很大的不同,是添加彩色的边框到你的部分界面,否则会觉得有点平淡。

例如,警告消息栏:

 

或突出显示活动导航项:

或者菜单栏:

不需要任何图形设计只需要添加一个彩色矩形到您的用户界面,它可以在很大程度上使您的网站感觉更有“设计感”。

选颜色有困难吗?试着从搭配好的配色里进行选择,比如dribble的颜色搜索,以避免被传统调色盘无尽的可能性所淹没。

 

七、不是每个按钮都需要背景色

当用户可以在一个页面上执行多个操作时,很容易陷入纯粹基于语义设计这些操作的陷阱。

像bootstrap这样的框架,通过提供一个语义样式的菜单来激励用户,每当您添加一个新按钮时,都可以从中进行选择:

张家港UI设计培训_设计作弊的7个实用技巧

上一篇:张家港UI设计培训_设计一个有效的网页头部

下一篇:张家港UI设计培训_UI设计为何能拿如此高薪