手绘插画个性化融入网页设计中的7大手法

[font=Verdana][size=3]只有足够的优秀,才能被用户留下来。现在互联网浪潮中, 各企业都有自己的网站,让自己的网站更有特色是我们所追求的。手绘 的插画和图标常常是在这个需求之下被引入到整个设计中,能够赋予网页以个性,增强整体设计的吸引力,可以更轻松地营造氛围,传递情绪。[/size][/font]
[font=Verdana][size=3]手绘图标设计近年来的使用频率越来越高,说是趋势也不为过。那么,手绘图标在网页设计中,通常是扮演什么样的角色,又是如何被使用的呢?今天的文章,我们来聊聊这个话题。[/size][/font]
[font=Verdana][size=3]1、作为分隔符[/size][/font]
[font=Verdana][size=3]手绘元素有一个很有意思的特点,它几乎可以和任何设计元素有效地搭配起来。可以和图片、视频组合使用,可以为留白增加视觉焦点,甚至可以在文本附近出现。很多时候,你不敢在整个设计中使用手绘元素是担心它会打破设计的整体感,但是当你开始尝试就会发现它在很多时候还是很有用的。[/size][/font]
[font=Verdana][align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/201781614420556.jpg[/size][/align]
[size=3]手绘图标本身拥有不错的融入感,很多设计师会利用它的这种融入感,将它插入到网页当中,作为分隔不同区块的间隔元素来使用。作为分隔符,手绘图标不会显得过于突兀,让分割区块的留白也不至于单调,让用户明白内容区块的边界的同时,也保持了整个页面设计的节奏感。[/size]
[size=3]交互式涂鸦[/size]
[size=3]手绘元素用好了同样可以带来有趣的交互体验。无论是将它之作为加载动画,还是作为整个页面交互的一部分,手绘图标或者手绘涂鸦都可以引起用户的兴趣。[/size]
[align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/201781614421719.jpg[/size][/align]
[size=3]Real Estate Stained Glass 这个网站就做的相当的到位,他们不仅仅使用了手绘图标,将整个网站做成了手绘动画,而用户可以随着动画和音乐,给页面中不同的区块上色,整个过程无比的流畅,你所填充的色彩会实时地出现在页面当中,整个沉浸式的体验相当棒。[/size]
[size=3]手绘的字体[/size]
[size=3]很多地方手绘元素并不一定真的是手绘出来的。比如 手绘风格 的字体有很多,它们当然都不是真正手绘出来的。 手绘风格 的字体很受欢迎,也非常适合用来展示。[/size]
[align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/2017816143125758.jpg[/size][/align][size=3]手绘字体常常能够个人以轻盈而又富有人性的的感觉,挑选手写字体的时候,要注意它的美感和可读性之间的平衡。[/size]

[size=3]Tradewinds Hotel 就挑选了一款简约又轻灵的手写字体,它的尺寸够大,清晰、可读性良好,在网页中用作展示之用。[/size]
[size=3]强化视觉[/size]
[size=3]在网页当中,绝大多数的元素都是功能性的,而用来点缀的元素不少都是出于纯粹的视觉设计的目的而存在的。[/size]
[align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/2017816143144852.jpg[/size][/align]
[size=3]在 Mother’s Brewing 这个网页当中,首页上巨大的手绘的心型图标明显就是为了这样的目的而存在的。设计师在其他有的页面上也采用了类似的手绘图标来装饰页面,强化视觉,填补空间。[/size]
[size=3]调节情绪[/size]
[size=3]手绘风格 的设计元素常常会给人有趣的感觉,在很多设计项目中,这些手绘元素能够营造氛围,调整访客的情绪。[/size]
[size=3]http://www.ewpv.com/eWebEditor/UploadFile/201781614325728.jpg
Signs for Science 这个网站中,手绘的图标和小插画,配合着网站中玛卡龙系的配色和圆润的字体,营造出充满童趣的氛围,用户在这种氛围下心情通常不会太差。[/size]
[size=3]展示创意[/size]
[size=3]在设计师的作品集当中,手绘元素常常是用来呈现创意的有效手段。一方面,有趣的手绘元素出人意表,另一方面,设计师还能通过手绘来呈现设计的过程,展示设计思维。[/size]
[align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/2017816143225996.jpg[/size][/align]
[size=3]The Feebles 这个网站当中,设计不仅借用手绘来展示他的设计过程,而且网站本身还采用了许多手绘元素,比如左上角的LOGO。[/size]
[size=3]动画特效[/size]
[size=3]在这个动效大行其道的时代,即使料到手绘元素最后也很难绕过动效啊。动态的手绘元素,无疑拥有更强的娱乐性,能够增强网站的转化率,让用户停留的时间更长。[/size]
[align=center][size=3]http://www.ewpv.com/eWebEditor/UploadFile/2017816143250755.jpg[/size][/align]
[size=3]Long Story Short 就在网页设计上沿用了这样的思路。不止是网站本身的手绘LOGO 采用了动态效果,而且借用快速的视频剪辑,将他们其他的品牌设计项目快速地展现出来。[/size]
[size=3]结语[/size]
[/font][font=Verdana][size=3]手绘设计元素的用途还有很多,它们可以让设计变得更加赏心悦目,个性十足。从排版设计到动态效果,它们的存在让设计更加富于人性。虽然手绘元素不一定适用于每个项目,但是掌握它,依然可以在多数设计项目中使用。[/size][/font]
,了解更多网页设计、网站制作内容,请关注:广州网页设计[url]http://www.ewpv.com[/url]
广州网页设计工作室www.ewpv.com
发表于 2017-8-21 18:06:08 | 显示全部楼层 |阅读模式

回复 | 使用道具 举报

该帖共收到 0 条回复!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

QQ|论坛首页|站点统计|小黑屋|云锁论坛-服务器安全技术讨论专业论坛、云锁软件技术讨论 ( 京ICP备14002707号-3  

GMT+8, 2018-5-24 18:13 , Processed in 0.102268 second(s), 28 queries .

Powered by 云锁

© 2014-2018 JOWTO Inc.

快速回复 返回顶部 返回列表