谁说程序猿不能怼前端!我来教你几招

201 阅读6分钟

每一个Web开发人员都会遇到需要做出视觉设计决策的情况,不管喜欢与否。

也许你工作的公司没有一个专职的设计师,你需要自己去设计。也许你正在做一个项目,你希望它看起来更有设计感。

你会很容易就说:“我永远都做不好,我不是设计师!“但事实证明,你可以用大量的技巧来提高你的工作水平,而不需要有丰富的平面设计经验。 这里有七个简单的技巧,可以用来改善你的设计。当然了,你也可以用来怼一波你们公司的前段~

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

file

当UI文本太过于依赖字体大小来控制层次结构时,这是一个常见的错误。

“这篇文章重要吗?让我们把它字体放大?”

“这篇课文是次要的吗?让我们把它字体缩小?”

我们不能用调字体的大小来突出重点,我们要试着用颜色或字体的粗细来设计。

“这篇文章重要吗?让我们用深色?”

“这篇课文是次要的吗?让我们用浅色?“

我们可以试着用这三种颜色:

  1. 主要内容用黑色(但不是全黑)(如文章标题)
  2. 次要内容用灰色(如文章发表的日期)
  3. 用于辅助的内容用较浅的灰色(如页脚中的版权通知)

file

类似地,这两个字体的粗细对于UI设计来说通常是足够的:

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

重要级字体粗细(600或700),用于强调文本

file

尽量不要用400以下的字体来设计,它尺寸太小会导致读者难阅读。如果你想使用更细的字体来淡化某些文本,你可以使用更浅的颜色或调字体的大小。

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

file

文本使用淡的灰色是去强调它白色的背景,但是在其它颜色背景下它就没有这种效果了。

这是因为我们在白色上看到的效果是对比度降低了。

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

file

当使用丰富多彩的背景时,有两种方法可以降低对比度:

1.降低白色文字的不透明度

使用白色文本,降低不透明度。让背景颜色渗滤一点,以不与背景冲突的方式来强调文本

file

2.自己选一种基于背景颜色的颜色

当你的背景是图像或图案时,这比降低不透明度更好,或者当降低不透明度时,文本会变得过于单调。

file

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

三、阴影

file

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

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

表格输入上使用的嵌入阴影:

file

四、边框

file

当你需要在两个元素之间创建分离时,要留有空间

虽然边界是区分两种元素的一种很好的方法,但它们不是唯一的方法,使用太多的元素会让你的设计感到杂乱。

我们可以学一下下面的几种方法:

1.使用边框阴影

边框阴影是一个很好的勾画一个元素像边界,它比边缘线更好些,可以实现相同的目标,而不是分散了注意力。

file

2.使用两种不同的背景色

用不同的背景色可以来区分开两个相邻的元素,如果除了边框之外,你已经使用了不同的背景颜色,可以尝试删除边框。

file

3.增加间距

可以增加间距代替线条来区分开两个元素

file

五、图标不一定就要大

file

如果你设计的东西使用一些大图标(比如页面的“特色”部分),你可能会本能的去截取一个免费的图标,然后放大,直到它们符合你的需要。

毕竟它们是矢量图像,所以如果你增加尺寸,质量不会受到影响

虽然矢量图像在增加尺寸时不会降低质量,但是在16到24px的图标看起来总是感觉不成比例地“矮胖”。

file

如果所有图标都是小图标,试着将它们放在另一个形状中,并赋予形状一个背景颜色:

file

这样可以让实际图标更接近它原本的尺寸,同时还能填充更大的空间。

六、添加一条有颜色的边

file

如果你不是一个平面设计师,你是如何让你的页面更有灵性呢?

一个简单的诀窍是,可以给你的界面部分添加一条有颜色的边,否则会有点单调。

例如,在边框的一侧添加

file

或突出显示活动导航项:

file

或者甚至跨越整个布局的顶部:

file

它不需要任何图形设计天赋来给你的页面添加一个彩色矩形,它可以让你的网站感觉更有设计感。

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

file

当用户可以在页面上进行多个选择时,很容易陷入纯粹基于语义的设计的陷阱。

就像Bootstrap之类的框架通过给你一个菜单按钮来鼓励你去选这个选项

file

“这是一个积极的作用吗?把按钮弄成绿色的。”

“这删除数据吗?”把按钮弄红。”

语义是按钮设计的一个重要部分,但还有一个更重要的就是层次结构。

页面上的每一个按钮都位于一个重要的金字塔中。大多数页面只有一个真正的主要按钮,一些次要的次要按钮,以及一些很少使用的第三级按钮。

当设计这些按钮时,在层次结构中它们的位置是很重要的。

  1. 主要按钮应该是显而易见的位置,固体,高对比度的背景颜色在这里很好用。。
  2. 次要按钮应明确但不突出。轮廓样式或对比度较低的背景颜色是很好的选择。
  3. 三级按钮应该是可发现的,但不引人注目。像链接这样的动作通常是最好的方法。

file

例如,下面的主要、次要、三级按钮的搭配

file

如在确认对话框的按钮:

file

该篇来自laravel国际大神Adam Wathan,Adam每年都是我们laravel国际会议laracon上的惊喜人物,原文地址,我们的Laravel教父Taylor Otwell也推荐该篇博文,同时该博文在Medium社区多个话题下均是第一热度。事实上,laravel大神们一般也都是不错的全栈,laravel既是一个后端框架,同时也是web全栈们的利器~ 想真正学好laravel,快速做一名全栈,欢迎作客我们的PHP&laravel交流群:109256050