响应式网页设计
- - 前端观察这个话题最近很火爆，我也一直在关注，响应式网页设计和移动互联网密切相关，并因移动终端的丰富和普及而兴盛，并且是一个颇具争议的话题，我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下，感兴趣的话可以 先看下这个PPT. 在说到这个话题前，我们先看下网页设计和前端开发的现状：. 全球有超过53亿手机用户（包括传统手机）.
网页设计中手绘风格的运用
标签：
网页设计
| 发表时间：2012-11-27 13:11 | 作者：Carlos_Gong
出处：http://www.geekpark.net/
作者： Carlos_Gong / 产品观察家
Just trolling :-) 邮箱：[email protected]
[核心提示]怎样在网页中应用手绘风格，改善网站的用户体验
本文中，我们将讨论怎样在网页中应用手绘风格，以改善网站的用户体验。
识别度与真实感
手绘风格非常有利于展示人性色彩，形成独特的识别度，为用户带来真实感。当你收到好友寄来的明信片时，你总是希望看到卡片是手写的，带着好友独特的笔迹，而不是用电脑打印出来的。一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近。
在网页设计中，道理也是一样的：手绘和手写风格的应用可以让产品显得更加独特、更加真实、更加值得信赖。下面是手绘风格带来识别度和真实感的三个例证：
独特的外观和感受
首先，手绘风格带来独特的外观和感受。著名的原型图和线框图工具 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
关注极客公园，即时获得最新内容： Twitter | 微信：极客公园 | 新浪微博 | 花瓣网 | 人人小站 | Google+ | 点点
相关 [网页设计] 推荐：
网页设计的12种颜色
- chenhua - 阮一峰的网络日志前不久，ColourLovers.com公布了一项调查结果. 他们发现，美国前100大网站的Logo，主要使用12种颜色. 其中，采用蓝色的网站最多，红色排在第二种，黄色排在第三种. 我把这12种颜色的RGB代码列出来，供将来自己做网页时参考.
网页设计师的新挑战
- changwei - 互联网的那点事随着苹果带来的平板电脑风暴让很多设计理念得到进一步的升级. 每天都有太多的好的创意涌现出来，似乎世界的每个角落都有一群孜孜不倦的Geek在研究着新的技术，在想着好的创意. 或许他们只是用着一种自娱自乐的姿态做着自己喜欢的事情，却给很多人带来了快乐和方便，也在微妙的改变着这个时代. 下面是来自网络搜集来的30个伟大的应用程序以及字体设计，来自网页设计师和开发人员.
如何成为网页设计专家
- Desmond - 译言-每日精品译文推荐你是否想与客户侃侃而谈让他们认真的对待你的观点，因为看上去你就是个专家. 如果你的答案是肯定的，那么恭喜你，有许多人与你一样. 如果希望有一天能真正做到，那么你需要退后一步再想想，成为专家对你来说为什么如此重要. 为什么我们都希望看上去像个专家. 我们都希望成为专家是因为我们希望我们的观点能够被其它人认真对待.
HTML5和CSS3：网页设计的框架
- 壮壮爱 - 译言-每日精品译文推荐来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设，网页上一些元素看起来和草稿中相对应元素不完全一样，客户端会发现那些字体定位上的细微的区别.
网页设计应急小技巧
- Guan - 所有文章 - UCD大社区工作中，网页设计师经常会遇见这些状况：时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策，脑袋里一片空白，没想法了，怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧：. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正，四平八稳，有点呆板.
触屏网页设计初探 (二)
- 没剑 - 信息和交互 - UCD大社区触屏版网页应用，实现移动场景用户需求、体现少即是多的设计精髓并表现主流的触屏界面气质，可算初步达标. 在设计过程中需不断打磨细节，提升体验，令设计日臻完美. 让消息更随手，操作门槛更低 . 费茨法则（Fitts’ Law，1954）是一则人机交互法则. 它阐述了：快速移动到目标的时间是离目标距离与目标大小的函数.
自适应网页设计（Responsive Web Design）
- - 阮一峰的网络日志随着3G的普及，越来越多的人使用手机上网. 移动设备正超过桌面设备，成为访问互联网的最常见终端. 于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页. 手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素.