改善网站的用户体验网页中应用手绘风格

2016-02-17 01:45 4 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - 平面设计 】

本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验。

识别度与真实感

手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感。当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的。一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

在网页设计中,道理也是一样的:手绘和手写风格的应用可以让产品显得更加独特、更加真实、更加值得信赖。下面是手绘风格带来识别度和真实感的三个例证:

独特的外观和感受

首先,手绘风格带来独特的外观和感受。著名的原型图和线框图工具 Balsamiq 是典型代表。Balsamiq 的功能强大而复杂,其外观和感受却是非常简单明了,手绘风格的应用使用户回忆起基本的纸笔勾画,让用户专注于基本的功能呈现,而不是纠结于产品外观上的细节。同时,这样的外观也形成了 Balsamiq 本身独特的风格。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

识别度与个性化

手绘风格带来更高的识别度,让用户记住你的产品。例如 Windows 上著名的代码编辑器 Notepad++ 的新 logo:

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

变色龙主体图案不仅恰到好处地展示了产品本身的功能(高亮代码的积累和变化),同时图标本身也显得相当可爱,抓住了用户的注意力,帮助用户把 Notepad++ 和竞争对手的编辑器产品区分开。

人性化与亲近感

手绘风格带来人性化与亲近感。告诉用户产品呈现的内容背后有着活生生的人,并且这些人已经仔细地考究了产品的细节,让它看上去更加真实,更值得信赖。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

iPad 上著名的儿童数学练习应用 MathBoard 复刻了黑板的观感,孩子们甚至可以直接用手在黑板上写出数字。这样的设定让算术练习不那么冰冷和枯燥,具有了一丝人性化的色彩,更加易用,更有吸引力。

信息传达与内容构建

信息的传达方式决定了用户是否会看到和理解这些信息。手绘风格可以更有效、更清晰地传达信息。下面是三个例证:

解释产品特性

描述一个产品特性可能需要好几行字,如果用手绘的话,一张图就够了。著名的应用测试服务 TestFlight 在其网站上介绍特性时使用了四个便签形式的草图来配合文字描述。在传递产品特性信息的同时也使网站变得图文并茂,更加易读。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

展示工作流程

与其用大段文字解释产品操作中第一步做什么第二步做什么,不如给每一步配上一张清晰的手绘图,增加可读性,大为减少文字的用量。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

引导用户

使用手绘图标可以有效地引导用户进入产品和网站的各个部分。例如之前我们介绍过的 Stamped,其网站上用卡通风格图片来引导用户进入各个种类的网页。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

团队展示

用户总是会很想知道网站、产品或者服务背后的人,因此一个有爱的团队展示页面上显得尤为重要。仅仅提供联系方式是远远不够的,还需要向用户展示他们要联系的这群人有着怎样的个性和气质,要让团队显得平易近人而又值得信赖。要达到这样的目的,使用手绘图片是一种很好的做法。例如

The Knock Knock Factory 的团队成员展示方式:

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

Polecat 的整体展示方式:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

以及 Grove 的真实照片配手写字体的展示方式:

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

故事讲述

手绘图最早和最常用的功能就是用来讲述一个故事了~ 不管是为了解释产品的功能,还是为了加深用户对产品的印象,使用手绘图进行故事讲述都是有效的方式。

比如,著名原型图工具 Axure 首页挂着这样一幅用户体验人员和产品经理工作自我吐槽的简笔画。很好地引起用户的共鸣,增强用户对产品的好感。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

Tourist Eye 用三幅连环画解释自己的产品功能。

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

引起用户注意

如果要吸引用户点击某个地方,那么手绘的圈点和箭头会是很好的选择。比如说这样:

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

有的时候,使用多个箭头也是可以的:

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

当然,要注意适可而止,滥用手绘箭头的话,效果适得其反

改善网站的用户体验网页中应用手绘风格,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160217/1577339.html

延伸阅读
GRUNGE 原意是摇滚乐的一种风格形式,描述音乐里那种嘈杂而失真的感觉,但在设计行业里,它有特别的含义,表现为不规则颓废邋遢垃圾等特殊的视觉效果,而这样反而会营造出另类的美感。今天飞屋睿UIdesign写了一系列教程,从认识GRUNGE到如何运用在作品设计中,都有教程,赶紧学起来。 一、认识GRUNGE GRUNGE,从英文单词的字面意义解释为:蹩...
如果说内容占据食物链的顶端,那为什么我们还要花大量时间在在讨论更好的设计上?每一天,我们都在辩论、试验和商讨关于美学、增强功能和布局之类的话题上,却甚少谈及内容。然而,我们得承认当下是内容为王,但是,这并不意味着设计就此贬值了。 It may seem logical that the user experience lives and dies by how the user relates on an ...
Agami Creative Billy Hughes Binocle The Croquis Electric Pulp Happy Cog James Lai Creative Element Fusion K4 Laboratory Le Bloe Magouya Matt Dempsey Erguvan Platin Evleri Rockatee Design Sergio Design Trends Sunrise Design Toby Powell Toggle V...
您是否还在为更加详细的了解自己的网站用户的情况而烦心呢,现在百度统计无疑能帮上您的大忙,因为百度现在是最大的中文网站的搜索引擎,使用百度引擎可以更加快速准确的去了解您网站的具体情况。 当您的网站的代码正确添加后,进入百度统计,用户即可看到含有丰富数据的概况页,为用户提供用户网站最重要的流量报告,方便用户从全...
随着互联网产业的飞速发展和电子产业的飞速发展,人们的社交似乎离不开网络,这就应运了SNS的飞速发展。 从打开QQ空间关注朋友们的动态,最近心情如何;到去人人网上找到久不联系同窗故友;上班闲着去开心上偷偷菜发发扰骚;休息时去白社会听听歌、看看报、做做测试、试试手气、算算运气。 今天让我们以QQ空间为导引,共同探讨中国SNS的用户体验...

经验教程

277

收藏

98
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部