- 相关推荐
网页手绘元素的使用方法
手绘是应用于各个行业手工绘制图案的技术手法，设计类手绘主要是前期构思设计方案的研究型手绘和设计成果部分的表现型手绘，前期部分被称为草图，成果部分被称为表现图或者效果图。下面小编来给大家介绍网页手绘元素的使用方法，希望对大家有帮助!
网页手绘元素的使用方法 1
1、作为分隔符
手绘元素有一个很有意思的特点，它几乎可以和任何设计元素有效地搭配起来。可以和图片、视频组合使用，可以为留白增加视觉焦点，甚至可以在文本附近出现。很多时候，你不敢在整个设计中使用手绘元素是担心它会打破设计的整体感，但是当你开始尝试就会发现它在很多时候还是很有用的。
手绘图标本身拥有不错的融入感，很多设计师会利用它的这种融入感，将它插入到网页当中，作为分隔不同区块的间隔元素来使用。作为分隔符，手绘图标不会显得过于突兀，让分割区块的留白也不至于单调，让用户明白内容区块的边界的同时，也保持了整个页面设计的节奏感。
2.交互式涂鸦
手绘元素用好了同样可以带来有趣的交互体验。无论是将它之作为加载动画，还是作为整个页面交互的一部分，手绘图标或者手绘涂鸦都可以引起用户的兴趣。
Real Estate Stained Glass 这个网站就做的相当的到位，他们不仅仅使用了手绘图标，将整个网站做成了手绘动画，而用户可以随着动画和音乐，给页面中不同的区块上色，整个过程无比的流畅，你所填充的色彩会实时地出现在页面当中，整个沉浸式的体验相当棒。
3.手绘的字体
很多地方手绘元素并不一定真的.是手绘出来的。比如手绘风格的字体有很多，它们当然都不是真正手绘出来的。手绘风格的字体很受欢迎，也非常适合用来展示。
手绘字体常常能够个人以轻盈而又富有人性的的感觉，挑选手写字体的时候，要注意它的美感和可读性之间的平衡。
Tradewinds Hotel 就挑选了一款简约又轻灵的手写字体，它的尺寸够大，清晰、可读性良好，在网页中用作展示之用。
4.强化视觉
在网页当中，绝大多数的元素都是功能性的，而用来点缀的元素不少都是出于纯粹的视觉设计的目的而存在的。
在 Mother’s Brewing 这个网页当中，首页上巨大的手绘的心型图标明显就是为了这样的目的而存在的。设计师在其他有的页面上也采用了类似的手绘图标来装饰页面，强化视觉，填补空间。
5.调节情绪
手绘风格的设计元素常常会给人有趣的感觉，在很多设计项目中，这些手绘元素能够营造氛围，调整访客的情绪。
Signs for Science 这个网站中，手绘的图标和小插画，配合着网站中玛卡龙系的配色和圆润的字体，营造出充满童趣的氛围，用户在这种氛围下心情通常不会太差。
6.展示创意
在设计师的作品集当中，手绘元素常常是用来呈现创意的有效手段。一方面，有趣的手绘元素出人意表，另一方面，设计师还能通过手绘来呈现设计的过程，展示设计思维。
The Feebles 这个网站当中，设计不仅借用手绘来展示他的设计过程，而且网站本身还采用了许多手绘元素，比如左上角的LOGO。
7.图标和LOGO
手绘图标和LOGO 可能是最受欢迎的手绘元素了。手绘风格的图标和LOGO 常常会显得更加有个性，不对称、不规则的细节是它们最有代表性的特点，而这些细节也让它们显得非常迷人。
Higher Ground 中的图标并不能算是严格意义上的手绘的LOGO，但是其中的衬线字体搭配着波浪纹的装饰，呈现出手绘LOGO的特点。
8.动画特效
在这个动效大行其道的时代，即使料到手绘元素最后也很难绕过动效啊。动态的手绘元素，无疑拥有更强的娱乐性，能够增强网站的转化率，让用户停留的时间更长。
Long Story Short 就在网页设计上沿用了这样的思路。不止是网站本身的手绘LOGO 采用了动态效果，而且借用快速的视频剪辑，将他们其他的品牌设计项目快速地展现出来。
网页手绘元素的使用方法 2
1.作为分隔符，划分内容区块
方法：将手绘图标或线条插入网页中，作为不同内容区块的分隔元素。
分析：手绘元素具有良好的融入感，不会显得突兀，同时能为分隔的留白区域增添视觉焦点，保持页面设计的`节奏感。例如，使用手绘线条分隔文章段落，或用手绘图标区分导航栏与内容区。
2.增强交互体验，提升用户参与度
方法：将手绘元素融入加载动画、按钮点击效果或页面交互流程中。
分析：动态手绘元素能引发用户兴趣，增强沉浸感。例如，Real Estate Stained Glass网站允许用户通过鼠标涂鸦为页面元素上色，实时反馈的色彩变化提升了互动趣味性。
3.运用手绘字体，传递轻盈人性化的氛围
方法：选择模拟手绘风格的字体，用于标题、标语或装饰性文本。
分析：手绘字体具有轻盈、个性化的特点，能传递温暖和人性化的感觉。需注意平衡美感与可读性，如Tradewinds Hotel网站使用简约草书字体作为标题，既突出设计感又确保易读性。
4.强化视觉焦点，突出关键信息
方法：在网页关键位置（如首页、CTA按钮）使用大型手绘图标或插画。
分析：手绘元素的独特性能迅速吸引用户注意力。例如，Mother’s Brewing网站首页的巨型手绘心形图标，成为视觉中心，强化品牌记忆点。
5.调节情绪氛围，营造特定场景感
方法：结合手绘图标、插画与配色方案，构建情感化设计。
分析：手绘元素的童趣或艺术感能影响用户情绪。例如，Signs for Science网站通过手绘图标与马卡龙色系搭配，营造轻松愉快的氛围，提升用户停留意愿。
6.展示创意过程，增强设计说服力
方法：在设计师作品集或品牌故事页面中，用手绘元素呈现设计草图、思维流程。
分析：手绘能直观展示创意从萌芽到成型的过程，增强用户对设计价值的认同。例如，The Feebles网站通过手绘LOGO和创作过程插画，传递设计理念与品牌个性。
7.设计手绘图标与LOGO，塑造独特品牌形象
方法：采用不对称、不规则的手绘风格设计图标或LOGO。
分析：手绘LOGO的个性化细节能提升品牌辨识度。例如，Higher Ground网站使用衬线字体搭配波浪纹装饰，模拟手绘质感，形成独特的视觉标识。
8.结合动画特效，提升动态表现力
方法：为手绘元素添加动态效果，如悬停动画、页面滚动触发动画等。
分析：动态手绘元素能增强娱乐性，延长用户停留时间。例如，Long Story Short网站将手绘LOGO设计为动态字体，并配合快速视频剪辑展示品牌项目，提升转化率。
9.运用多格漫画，讲述品牌故事
方法：通过分格漫画形式，以简洁画面和精简对白呈现品牌理念或产品功能。
分析：多格漫画符合网络文化的叙事需求，能吸引用户连续关注。例如，用漫画分格展示产品使用步骤，比传统文字说明更生动易懂。
10.结合疏密线条表达，营造复古氛围
方法：运用线条疏密变化形成节奏感，以黑白或低饱和度配色呈现怀旧风格。
分析：疏密线条表达类似于素描手法，适合需要传递历史感或艺术气质的网页设计。例如，复古主题网站可使用密集线条突出重点内容，稀疏线条营造留白空间。
【网页手绘元素的使用方法】相关文章：
手绘陶瓷的手绘瓷器的保养10-03
手绘墙的手绘教程知识09-11
关于手绘墙的手绘教程知识08-24
什么是墙体手绘-墙体手绘的分类08-23
手绘墙绘的手绘墙画的材料07-16
手绘技法和手绘工具的表达效果07-28
手绘壁画需要哪些材料-手绘壁画的材料08-26
快速手绘效果图的手绘临摹技巧！07-24
快速手绘效果图的手绘临摹技巧09-09