申请报道

扫一扫,联系编辑获得审核机会

符合以下要求,获得报道机会

  • 1. 新公司求报道
  • 2. 好项目求报道
  • 3. 服务商求报道
  • 4. 投资融资爆料

当前位置:首页 >  站长 >  网站运营 >  正文

进阶之路 手绘元素在网页设计中的8大使用方法

 2017-12-26 16:59  来源:A5企业专栏  我来投稿

  2018年最火项目 电销机器人等你加盟

  

undefined

 

  大多数时候,站长在做网站都是奔着网站外观大方、功能齐全去的,不过有些站长却希望自己的网站能够看上去更有趣、更具个性化色彩。手绘元素就是在这个时候被引入进网页设计之中的,因为它可以用来增强网页设计的吸引力,营造轻松、和谐的氛围,传递愉快、自由的情绪。近些年来,手绘元素在网站中使用地越来越频繁,差不多成了一种设计趋势。那么在网页设计中,手绘元素通常扮演什么样的角色,又能起到哪些作用呢?今天小飞主要就这一主题展开探究一下,希望大家看完之后对手绘元素有更加深刻的认识和理解。

  1. 分隔区块

  不少站长担心在网站中使用手绘元素会破坏网站的整体和谐美感,其实手绘元素几乎可以和各种视觉元素组合使用。它可以同图片、视频组合使用,可以给留白增加视觉焦点,甚至可以出现在文本附近。也因此,设计师经常使用手绘元素去分隔不同内容区块或不同区域。这是因为,一方面,手绘元素本身拥有不错的融入感,放在网页中不会显得过于突兀。另一方面,手绘元素具有一定的个性化特征,不仅能让区域之间界限分明,还能让这分隔的留白不显得单调。用手绘元素分割不同区块有助于保持整个页面设计的节奏感。

  

 

  2. 服务于用户交互

  手绘元素还可以让网站中的交互变得更加有趣。不管是将它作为加载动画还是网页设计交互体验的一部分(许多网站已经开始使用),手绘元素这种设计技巧能够很好的引起用户的兴趣,发挥自己的优势。

  Real Estate Stained Glass网站在运用手绘元素引起用户互动方面就很出色。当你登入这个网站,点击开始时,用户可以通过移动鼠标给物体上色。尽管网页上有很多手绘元素,但整个涂鸦的过程十分顺畅,填充的颜色会适时出现在页面中,这种沉浸式的体验能够起到维系用户的作用。

  

 

  3. 手绘字体

  有时候最好用的手绘字体并不一定是手绘出来的。不少模仿手绘风格的字体就很流行,它们尤其适用于展示性质的网站。手绘字体或者说手绘风格的字体常常有更轻盈、更人性化的感觉(这是因为用户易于带入自己的情感)。当然,要想手绘字体能够发挥出自己的积极作用,我们一定要保证它的可读性,实现字体美感和可读性之间的平衡。

  Tradewinds Hotel网站的标题就挑选了一款简约的草书字体,字体足够大,用户容易辨认。其他位置使用的字体也是选用了简洁的无衬线样式,与标题字体形成对比,不仅突出强调了手绘字体,还保证了良好的可读性,便于用户理解网站内容。

  

 

  4. 强化视觉效果

  上面说的手绘元素在网页中都起到了一定的功能性作用。但这还有一些手绘元素纯粹是服务于用户感官效果的。在网站中零星地点缀着一些手绘元素,它们可以呈现其他方法难以实现的微妙、有趣的视觉效果。

  Mother’s Brewing就是这样做的。网站首页上使用了巨大的手绘心型图标;其他页面中也有手绘元素的运用,一些很明显,一些比较隐蔽;每个CTA按钮都是手绘的丝带样式。背景上的元素和滑动元素上重叠,填满了网页上沉寂的空白,手绘元素的使用让整个网站在视觉上十分引人注意。

  

 

  5. 营造氛围

  手绘设计元素常常更加轻松、欢快。它们可以在几乎任何网站中发挥自己的这种特点,你在网站使用的手绘元素越多,网站会显得越轻快,用户在浏览时的情绪也不会太差。

  Signs for Science网站就利用了手绘元素让网站充满童趣(当然,这种效果也要在一定程度上归功于网站配色的应用)。不过,从网站字体、图标再到下划线,手绘元素让整个网站保持了一致的基调,网站显得创造力十足、足够轻盈,这也更能鼓舞用户与网站产生互动。

  

 

  6. 展示创意

  手绘设计元素还可以用来展示网站的创意,这尤其适用设计师作品集的展示网站。这些手绘元素可以让用户集中了解设计师想法的产生,设计的具体过程。

  The Feebles网站首页上就使用了手绘元素,右图展示了设计师的创作过程。除此以外,首页左上方还有一个手绘Logo,十分俏皮。

  

 

  7. 手绘图标和Logo

  手绘图标和Logo可能是最受欢迎的手绘元素了,他们最具代表性的特点就是不对称、不规则。也正是这些细节上的差别让它们极富个性,十分迷人。

  从严格意义上来说,Higher Ground网站中的图标算不上手绘Logo,但是其使用了衬线字体搭配波浪纹的装饰,呈现出手绘Logo的特点。

  

 

  8. 动态手绘效果

  在这个动效大行其道的今天,手绘元素最终也难逃动画效果的"魔爪"。动态的手绘元素,无疑拥有更强的娱乐趣味,在增强网站转化率、延长用户停留时间上有其他设计元素所不可比拟的优势。

  Long Story Short就在网页设计上沿用了这样的思路。网站Logo 使用了动态的手绘字体,而且还借用快速的视频播放,将它们其他品牌设计项目快速地展现出来。

  

 

  看了这么多,相信大家对于手绘元素的用途已有了一定的了解。从排版设计到动态效果,手绘元素的存在可以让网页设计变得更加赏心悦目、更具个性魅力、更有人情味。虽然手绘元素不一定适用于每个网站,但是不可否认,手绘元素是非常有效的一项网页设计技巧,它可以适用于多种网站设计。赶紧来起飞页自助建站平台(http://www.qifeiye.com/?t_wd=a5)做一个网站,用用手绘元素吧!

扫一扫关注A5创业网公众号

扫一扫关注A5创业网公众号

责任编辑:扬扬   /   作者:起飞页

相关文章

  • 极简网页设计技巧,打造简约之美

    极简主义网页设计风格,如何才能做到简约而不简单?简约风设计需要了解和掌握哪些禁忌和技巧,才能让网页设计简洁而不失魅力?继续阅读文章,小编将结合具体实例为大家一一讲解。

    标签:
    网页设计
  • 实例:如何设计下拉菜单技巧

    下拉菜单可以说是网页设计中令人又爱又恨的元素之一了。下拉菜单有许多优点:不占地方,不需要做输入验证,所有平台都支持,技术门槛低,用户都很熟悉其使用方法。然而与之同时,下拉菜单又是最容易被错误使用的表单组件。这篇文章就来告诉大家下拉菜单的适用场景和设计技巧。

  • 3个要点,教你设计好无限滚屏

    随着社交网络的流行,无限滚屏刷新feed流成为探索更多内容的一种必要的交互方式,如同Flickr、Facebook所做的。用户愿意浏览大量内容去寻找自己感兴趣的东西,用户会先关注内容再关注其他东西,而无限滚屏形式能让用户找到他们想要的内容。此外,无限滚屏的线性结构能让网页编辑容易操控。随着用户向下滚

  • 网页中背景纹理设计需要掌握的几点技巧

    优秀的网页纹理背景有利于提供网页整体的质感,并且纹理背景同时也是打造模糊效果的另外一种手段,善于观察的设计师应该都知道,合理的利用纹理图案不仅能够让页面更具质感,甚至妙趣横生。当然,最关键的还是提升网站的吸引力,毕竟大部分企业建站的目的都是为了赢得更多的客户,让企业的产品或服务被更多的人知晓,而今天

  • 为何前期的发现阶段是网页设计最关键的环节?

    创建用户需要的网站通常需要大量的研究,想要真正理解使用你的产品和服务的用户是有针对性进行用户体验设计的关键所在。在这篇文章当中,Justinmind将会给你一个答案。文章将会总结发现阶段的概念界定,以及如何借助发现阶段来探索更合理的设计。

    标签:
    网页设计
  • 七种让用户抓狂的网站用户体验 为什么禁不了

    很多网站每天都在谈用户体验,以做好用户体验为方向的时候,很多时候却对一些让用户感到不爽的体验视而不见,而且极力掩饰着,这七种让用户抓狂的体验都是什么呢?

  • 影响网站运营的决定性因素有哪些

    对于运营来说,要先运后营,我们要先做好可以运作的准备,再来做精准的营作。对于网站运营来说,和其他类型的运营相似但有很大的区别。作为建站的目的,我们要考虑网站的核心定位是什么,是不是需要提升网站的销售能力或宣传能力。针对的用户是什么,要不要去找目标用户群,然后把他们吸引过来,然后通过技术手段,围绕网站

  • 网站也有寿命 如何高质量的停止运营网站呢

    雅虎邮箱关闭、门户论坛网站停运……互联网变化太快,一个网站运营的产品已经没有卖点,或者与时代发展不相符,再运营下去会耗费大量的资金,只有选择关闭了!网站停止运营是一件痛苦的事情,长痛不如短痛,选择放弃未必不对,要知道网站也是有寿命的,那么,当网站关闭时,如何做才能把损失降到最低呢?

  • 为什么有些网站的失败 一开始就注定了

    同样的网站摆在用户面前,作为用户来说,能不能一下分辨出哪个是真网站,哪些是假网站呢?通常是很难分辨出来的,如今互联网网上有很多网站,如果你的网站从一开始就模仿或者直接照搬别人的网站设计,也许从上线那天,这个网站命运让人堪忧。

    标签:
    网站运营
小程序

热门排行

信息推荐

扫一扫关注最新创业资讯