网页视觉设计师设计基本手册

规则会限制你,同时也会让你在设计上少走一些弯路。

这里的x并不是错误,我给的新意见也不一定是最好的解决方案。

也是根据个人在工作中的一些总结而来的技巧。

如有地方不对,还望多包涵总结。好啦不多说了,大家看正文。

网页视觉设计

网页视觉设计


很多设计师在设计ICON的时候喜欢设计很多细节部分,又是秒边又是浅色透明等。整个给人特别繁琐。所以我们需要经过简化设计。

网页视觉设计

有时候会遇到客户没有提供信息内容的时候,很多设计师会随意简单的复制相同的信息。这样会给客户传达出不专业,不认真的感觉。所以我们可以找和客户相关行业的文字替换,在视觉上也让人更容易接受。

网页视觉设计

两张或多张图片相叠加的时候,有大图和小图结合,小图更多会展现细节部分,很多设计师会不经意间将小图遮住,这样就不利于小图的展示,反而更像修饰,既然修饰可以尝试用图形等元素。如果你是想展现出来细节完全可以把他放在大图上面展示。

网页视觉设计

左边的排版从整体内容上来说是没有错误的。但是却给用户在视觉上传达出死板的感受,所以有些时候排版需要学会做一些适当的删减。就像右边这样,整体给人会有一定的设计感。

网页视觉设计

在进行任务照片处理上,使用一定的突破设计方式是好的。这样避免了死板,关键是大部分初入行的设计在处理上还不够彻底。于是就会导致视觉传达出上不上下不下的感受。所以有些时候我们需要大胆一些。就像右边的排版给人的感觉会好很多。

网页视觉设计

以前的时候设计师在按钮上都会习惯性用黑色投影,(当然用黑色是没有错误的)只是我们现在可以适当的做一些变化。会让你的设计更出彩。就是投影的色彩可以尝试吸取主体相近的颜色,上面左边偏青色的按钮投影运用了黑色的投影,总给用户传达出不一致的感受。所以在右边我们将按钮黑色的投影改成了与主体相近的青绿色的的色彩在视觉上会提高了一个致性。

网页视觉设计

左边网站LOGO(偏向圆形方形)放在了左上角,在视觉上会给用户传达出左右失重的感觉于是我们将LOGO放在了中间,就完美解决了这个问题。一般网站头部LOGO摆放的位置,主要根据LOGO 的形状比例和导航的数量来定,比如LOGO偏长导航栏目数量较少,可以尝试LOGO 和导航栏目平行摆放,如果LOGO 形状偏方正或者圆形,在导航栏目较少的情况下可以考虑一排摆放。反之可以考虑上下排版等,更加详细方法可以日后再仔细分析。

网页视觉设计

越来越多线的元素融入在设计中,线条形状及他们的属性改变了他们运用的目的性,所以上面左边的设计整个给人十分抢眼。在于我们没有理解线条在此的作用是辅助性的,于是我们降低了线的显示,所以得到了右边的设计。

网页视觉设计

我看到很多小伙伴设计的更多的箭头都是使用符号打上去的,而且没有调整好大小,整体传达也不一致,所以需要明白如果是文字结合ICON那就需要将ICON设计出来。至少体现出设计师的专业性。

网页视觉设计

左边的关闭图标设计是没有错误的,但是还是具有改进的空间,因为图标本身传达出关闭的意思。所以我们可以考虑将X外面的圆形线条弱化。让他成为X的一种修饰元素。而不是和图标中的X的视觉一样重要,这样就会扰乱用户视线。为了给用户传达出更好的视觉体验。于是就出现了右边更好的关闭图标。

网页视觉设计

左边的图在视觉上给用户很饱满的感觉,会让人感到莫名的拥挤,所以有时候需要突出一处,并不需要越大越好。而是需要保留一些空间感,让整个画面保持透气感,才能给用户带来愉悦的感受。

网站设计需要注意
网页视觉设计

初入行的网页设计师在设计网站后期需要更新栏目(如产品列表、产品详情等)的图片的时候。不会注意图片尺寸大小的统一。从而导致后期上传图片时会有图片大小不完美的情况发生。(有些喜欢把锅丢给网站技术。。。。)所以在设计的时候一定需要多注意。。

网站设计需要注意
网页视觉设计

很多专题或者促销的banner背景都会用一些斜着的图形或者线条,很多刚入门的伙伴可能会随意画,比如左上角的线条元素用多了的话,会让画面乱而不严谨,所以我们尽量不要使用12.7 或者 23.1之类数值,尽量使用 15 30 45 等严谨的数值。

网页视觉设计

当我们运用纯色作为背景的时候,很多时候会给人很干、单一的感觉,所以可以考虑在纯色背景上加一些色彩,让画面背景变的更加柔和。

网页视觉设计

左图给用户的感觉比较压迫,层次感不明显。所以我们可以稍微让图片展示的更多一些。让画面丰富起来,让图片更有透气感。

网页视觉设计

其实中英文字的结合在选择字体的时候,需要考虑字体的统一性,就像左上图中英文字体结合在一起总会给人感觉不适应,而右图我们将两种字体进行统一,让他们变成了衬线字体,给用户感受就提升了很多。

网页视觉设计

在同等级的模块之间的间距保持一致,会让网站的设计更严谨,就像右图这样。

网页视觉设计

有时候网站中用到的图标最好统一,最好的方法就是将需要放的图标在一起集合,进行对比。找出其中的差别,在进行不断的修改统一后,再运用到网站的设计中去。