7个方法,让你做网页设计界的张小平

admin 2020-03-17 14:40 公司动态

对于网页设计,有时候不仅仅是UI设计师的任务,有时候还可能是Web开发人员的任务,因此这篇文章将除了适合学UI的同学阅读,还适合研究H5的同学。

有时候,在进行网页设计时,很容易就陷入了设计的瓶颈,尤其是当自己的设计被一次又一次的打回,而自己痛苦地在电脑桌前表示,“我永远都不能让这看起来很好!”但事实证明,你可以用很多技巧来提升你的工作水平。

不要仅仅将所有繁重的工作留在字体大小上,而是尝试使用颜色或字体粗细来完成同样的工作。

尝试并坚持两种或三种颜色:主要内容的深色(但不是黑色)(如文章标题);二级内容的灰色(如文章发布日期);辅助内容的浅灰色(可能是页脚中的版权声明)

同样,两个字体权重通常足以用于UI工作:大多数文本的正常字体粗细(400或500,具体取决于字体);要强调的文本较重的字体粗细(600或700)

在设计中,避免使用400以下的字体粗细; 它们可以用于大标题,但是在较小的尺寸下会变得难以阅读。如果你正在考虑使用较细的字体来减弱某些文本,请使用较浅的颜色或较小的字体大小。

在白色背景上,使文本变成浅灰色是强调它的好方法,但这个颜色的字体在彩色背景上看起来并不那么友好。那是因为我们实际上在白色背景上看到灰色字体的会产生降低对比度的效果。而使文本更接近背景颜色实际上有助于创建层次结构,而不是使其变为浅灰色。

使用白色文本并降低不透明度。这样可以让背景颜色稍微渗透,以不与背景冲突的方式去强调文本。

当背景是图像或图案时,或者当降低不透明度使文本感觉太钝或褪色时,这比减少不透明度更好。

不使用较大的模糊和展开值来使框阴影更明显,而是添加垂直偏移。它看起来更自然,因为它模拟了一个从上面照射下来的光源,就像我们以前在现实世界中看到的一样。

当你需要分离两个元素时,尝试避免突然看到边框。虽然边框是区分两个元素的好方法,但它们不是唯一的方法,使用太多边框可能会让你的设计感到繁杂和混乱。

box shadow可以很好地实现像边框元素那样的功能,但也可以更精细,并且实现相同的目的而不会分散注意力。

通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。如果您已经使用了除边框之外的其他背景颜色,请尝试删除边框; 你可能不需要它。

有什么更好的方法来分离元素,而不只是简单地隔开?将事物间隔得更远是不引入任何新UI的情况下创建元素组之间区别的好方法。

如果你正在设计一些可以使用一些大图标的东西(比如登陆页面的“功能”部分),你可能会本能地使用免费图标集,然后放大尺寸直到满足你的需求。但是它们是矢量图像,如果增加尺寸,难道质量不会受到影响吗?

虽然矢量图像在增加尺寸时不会降低质量,但在16-24px处绘制的图标在将它们放大到原本尺寸的3倍或4倍时会看起来非常不专业。因为这些图缺乏细节,总有种不成比例的“矮胖”。

这使您可以使实际图标更接近其预期大小,同时仍然可以填充更大的空间。如果您有预算,您还可以使用设计用于较大尺寸的高级图标集,当然是要钱的那种。

如果你不是一名平面设计师,你如何在你的设计中添加那些从美丽的摄影或彩色插图中获得的视觉效果?一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框,否则会感觉有点乏味。

它不需要任何图形设计人才来为您的UI添加彩色矩形,它可以大大有助于使您的网站更“设计”。

当用户可以在页面上执行多个操作时,很容易陷入纯粹基于语义设计这些操作的陷阱。无论何时添加新按钮,都可以选择:

页面上的每个操作都位于重要金字塔的某个位置。大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及一些很少使用的三级操作。

主要行动应该是明显的。坚固,高对比度的背景色在这里工作得很好。次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。三级行动应该是可发现的,但不引人注目。像链接一样设置这些操作通常是最好的方法。

最重要的是保存大,红色和粗体样式,以便当负面操作实际上是界面中的主要操作时,就像在确认对话框中一样:

这7个方法希望对你以后的工作以及学习有帮助,希望同学们可以设计出自己满意,领导满意,甲方满意的作品。

上一篇:教你用PPT制作出一个镂空感页面设计的具体操作
下一篇:制作网站的步骤一般有哪些

猜你喜欢

手机扫一扫添加微信

0592-5969527