改善用户体验 网页设计中手绘风格的运用

  [核心提示] 怎样在网页中应用手绘风格,改善网站的用户体验

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

  识别度与真实感

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

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

  独特的外观和感受

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

  

  识别度与个性化

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

  

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

  人性化与亲近感

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

  

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

  信息传达与内容构建

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

  解释产品特性

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

  

  展示工作流程

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

  

  引导用户

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

  

  团队展示

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

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

  

  Polecat 的整体展示方式:

  

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

  

  故事讲述

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

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

  

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

  

  引起用户注意

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

  

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

  

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

  

  原文地址:http://www.geekpark.net/read/view/167258

时间: 2024-09-19 09:47:59

改善用户体验 网页设计中手绘风格的运用的相关文章

网页设计中手绘风格的运用 改善网站的用户体验

怎样在网页中应用手绘风格,改善网站的用户体验 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感.当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的.一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近. 在网页设计中,道理也是一样的:手绘和手写风格的应用可以让产品显得更加独特.更加真实.更加值得信赖.下面是手绘风格带来识别度和真实感的三个例证: 独

网页设计技巧:手绘涂鸦元素在网页设计中的运用

文章描述:谈谈网页中涂鸦手绘元素的魅力. 涂鸦是上课的时候给历史书的古人加两撇胡子;涂鸦是在一面空白的墙上刷出斑斓的花纹;涂鸦是将线稿扫描进电脑然后用手绘板在PS里润色--涂鸦早已走进我们每个人的生活,从服装到装潢到海报广告,到处都有那些温暖可爱的线条. 手绘是应用于各个行业手工绘制图案的技术手法,设计类手绘,主要是前期构思设计方案的研究型手绘和设计成果部分的表现型手绘,前期部分被称为草图,成果部分被称为表现图或者效果图.手绘内容很广阔,所以言语无法尽善表达. 曾经,手绘的应用局限于前期的构图,

用户体验网页设计遇见色彩情感

文章遇见就是美好"> 有一段时间没分享一点儿东西了,记得上次与大家分享过"情感化设计中的手绘应用表现".今个再次煽情一下,与大家分享一点关于色彩情感的那些事儿,可能前部分的色彩介绍大家有了解过.但任何事情有因有果,所以还是先让大家了解下关于色彩的组成和色彩的情感等,再来简单说说在我们生活中和界面设计中的运用所带来的感受,以及人们对色彩的喜好偏差和色彩的决定性作用等等. 一.关于色彩 1.色彩 色彩,对于人类而言,始终属于自然界最神奇的奥妙之一,永远都在激发着我们的好奇心

用户体验:网页设计与网页内容呈现关系

有时候,规划师(或需求.交互)把内容呈现的框架草图搭建好后,就直接"丢"给了设计师,让设计师在画好的框架里去美化内容,出来后的效果,往往达不到规划师(或需求.交互)预期的目标效果,然后就是反复的修订和磨合.如何改变这样的局面呢?我想首先规划师(或需求.交互)的目标要定义清楚,然后要做完善的信息架构分析,内容的主次位置.版块结构.所占面积都要细化考究,交给设计师的是一个尽量完善完整的框架方案,而设计师呢,必须全面理解目标及内容划分的原因,几方面结合,才能做出精美的设计作品. 举个例子,我

22条改善用户体验的原则

  火鱼注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯.1986年,在史蒂夫·乔布斯以1000万入主以后,创作了<玩具总动员>.<海底总动员>.<头脑特工队>等经典3D动画电影.2006年,皮克斯被迪士尼以74亿美元收购,成为华特迪士尼公司的一部分. 几年前,Emma Coats在Twitter分享了她作为皮克斯(Pixar)分镜艺术家期间所学习到的,关于讲述故事的22条规则. 这些规则是"由在皮克斯(Pixar)的导演们和

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

文章描述:本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感.当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的.一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近. 在网页设计中,道理也是一样的:手绘和手写风格的应用可以让产品显得更加独特.更加真实.更加值得信赖.下面是手绘风格带

网页设计中的手绘运用

手绘元素通常是用在纸上的,但是它们被越来越多的用在网站设计上面,这些速写元素令网站极具个性并能为访问者提供有趣的体验.手绘风格的引入,对于互联网应用作品起到了一个积极的影响.不同的主题和绘画风格,使其表现形式具有原创性,给设计带来了多元化,人性化的特征. 我们先来看一些网络中的案例: 节庆主题插画 GOOGLE每一次节日活动的banner设计都别出心裁,这很大程度要归功于应景且独特的的手绘风格作品. QQ浏览器中的闪屏设计,另一种视角展现节日主题. 网页中的插图 韩国保险类网站,五张插图使不同的

手绘在网页设计中的运用

手绘元素通常是用在纸上的,但是它们被越来越多的用在网站设计上面,这些速写元素令网站极具个性并能为访问者提供有趣的体验.手绘风格的引入,对于互联网应用作品起到了一个积极的影响.不同的主题和绘画风格,使其表现形式具有原创性,给设计带来了多元化,人性化的特征. 我们先来看一些网络中的案例: 节庆主题插画 GOOGLE每一次节日活动的banner设计都别出心裁,这很大程度要归功于应景且独特的的手绘风格作品 QQ浏览器中的闪屏设计,另一种视角展现节日主题. 网页中的插图 韩国保险类网站,五张插图使不同的保

手绘元素在网页设计中的运用实例

手绘元素通常是用在纸上的,但是最近它们被越来越多的用在网站设计上面.手绘风格已经变得很流行了.这些速写元素令到网站极具个性并能为访问者提供有趣的体验.这里是一些在网站设计中使用手绘风格的网站最佳实例,希望能给你某些参考. PS:事实上,手绘风格和涂鸦很像,很多地方就直接将两者放到一起来说了,如果非要分的很轻的话,,我们一般可以认为手绘比较优雅一些,而涂鸦则更夸张-- Yellow Bird Project Mark Forrester camellie Tech Adventure Merge