TOPVE唯艺互动

TOPVE VIEW
保持不断的探索与研究
慧眼看世界,在设计的路上不断追求创新!
Keep exploration and research

网页视觉设计师设计手册指南二

发布于:2017-02-28 21:52:00 作者:俊敏 来源:站酷  人气:

当前位置:首页观点设计理论 正文

规则会限制你,同时也会让你在设计上少走一些弯路。这里的x并不是错误,我给的新意见也不一定是最好的解决方案。也是根据个人在工作中的一些总结而来的技巧。如有地方不对,还望多包涵总结。好啦不多说了,大家看正文。

网页视觉设计师设计手册指南二

规则会限制你,同时也会让你在设计上少走一些弯路。这里的x并不是错误,我给的新意见也不一定是最好的解决方案。也是根据个人在工作中的一些总结而来的技巧。如有地方不对,还望多包涵总结。好啦不多说了,大家看正文。

网页视觉设计师设计手册指南二-太过复杂的ICON

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

网页视觉设计师设计手册指南二-给客户示范的文字

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

网页视觉设计师设计手册指南二-图片叠加的小细节

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

网页视觉设计师设计手册指南二-关于排版的透气性

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

网页视觉设计师设计手册指南二-突破需要彻底

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

网页视觉设计师设计手册指南二-传达出不一样的投影

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

网页视觉设计师设计手册指南二-网站LOGO放在头部哪里合适?

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

网页视觉设计师设计手册指南二-辅助性质线条运用

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

网页视觉设计师设计手册指南二-查看更多,了解更多等的箭头

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

网页视觉设计师设计手册指南二-按钮主次关系的运用

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

网页视觉设计师设计手册指南二-突出并不是越大越好

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

网页视觉设计师设计手册指南二-网站中图片比的一致性

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

网页视觉设计师设计手册指南二-图形元素角度的问题-让纯色变得更加柔和

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

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

网页视觉设计师设计手册指南二-适当的调整让图片具有透气感

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

网页视觉设计师设计手册指南二-中英文之间的搭配、同等级模块之间的对齐方式

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

17、同等级模块之间的对齐方式
在同等级的模块之间的间距保持一致,会让设计更严谨。就像右图这样的方式。

网页视觉设计师设计手册指南二-图标的统一性

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

这次差不多就这么多啦,希望对大家有所帮助。谢谢大家能够看完。规则是限制你的同时也是帮助你不会犯错误,希望各位根据自己的功力在实际情况去灵活运用。

作者:俊敏
原文:http://www.zcool.com.cn/article/ZNDcyNzA0.html

分享到:
你觉得这篇文章:
收藏到个人中心
唯艺互动-专注高端网站设计

TOPVE唯艺互动

相信设计的价值 让美好的事情发生

专注高端网站界面设计

联系我们

QQ联系:270304282

邮箱:haobanfa1@163.com

唯艺互动-专注高端网站设计

抱歉!好像您使用的浏览器版本太低了
为了得到我们网站最好的体验效果,我们建议您升级到最新版本的IE浏览器,或选择其它推荐浏览器

继续访问请进入旧版TOPVE