简洁至上的Web设计 – 创意要素及设计技巧
简洁，不等于简单。这与弹琴是一个道理，你也许有能力弹得很快，但你并不需要在所有地方都弹得这么快。在很多时候，让速度慢下来反而比弹得飞快要来的更加困难。实际上，味道往往最能体现在从容自然、舒缓平淡的韵律当中。
简洁的Web页面设计风格是当前圈子当中的风潮之一。在本文中，我们首先将对这类风格当中的那些最具代表性的组成要素进行分析，随后，我(英文原文作者)还会向各位分享一些工作中的实战技巧。
简洁风格的创意组成要素
固定宽度的页面布局结构
花时间观察一些简洁风格的网站，你会发现它们当中的绝大多数都有用到经过良好规划的网格布局系统。如果哪位朋友对网格布局还不大了解的话，可以设想一下，在着手进行实际的视觉设计工作之前，使用辅助线将页面划分为若干等宽的列，通过这种方式对页面结构及元素的布局进行更精准的规划。网格布局可以使设计方案当中的信息结构更加清晰，在视觉上具有强烈的节奏感与一致性。
固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子，虽然Creative Review当中的页面布局会根据内容类型的不同而有所区别，但我们能够感受到的浏览体验却是相当连贯的，因为这些页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和About页面：
产品设计与用户体验设计的博弈
“用户体验设计”、“以用户为中心的设计”等在前些年颇为流行，但是近两年似乎“产品经理”、“产品设计”这些词又是大热。有些业内大拿更喜欢称自己为“产品设计师”而非“体验设计师”。可是难道“产品设计”不应该以“用户体验”为出发点进行设计吗?难道“产品设计”与“用户体验设计”不是一回事吗?
仔细想想，还真不是一回事。当然不可否认两者有比较大的交叠，产品设计包含了用户体验设计，用户体验设计也涉及产品设计。但两者背后的根本思路是很不同的：
所谓用户体验设计，本质上是使产品符合用户的心理模型和行为习惯，满足用户的需求与期望，以实现良好的用户体验。
所谓产品设计，尤其是互联网产品的设计，本质是设计一套能影响、控制甚至操纵用户的机制，可以潜移默化地改变用户的心理与行为(这里说的“控制”、“操纵”均是中性含义)
所以，从产品与用户关系的角度来看，产品设计是一种进攻型设计，用户体验设计是一种防守型设计。而一个出色的产品，它必然是攻守兼备的。
Android 4.0设计规范 优先导读 十大改变 （附全文翻译pdf）
在拜读和翻译了Android design设计指导后，对比Android 4.0与Android2.3及之前版本的app设计指导，总结了Android 4.0设计的10大改变：
1. 导航栏 (详见模式PATTERNS>导航Navigation) 由之前的物理按键导航（返回、菜单、搜索、主页）变成了嵌入屏幕的虚拟按键（返回、主页、最近任务）。
左侧为早期有4个物理按键的手机，右侧为新版只有3个虚拟按钮的手机
把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航栏中。
最近任务的界面 把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”（action overflow），如下图中的黄色圆点所示。
黄色圈部分为“更多操作”（action overflow）的位置和点击后内容的展示方式
2. 操作栏 (详见模式PATTERNS>操作栏Action bar)
操作栏从之前的app图标＋操作，变成如下图所示：
1向上＋2 Spinner＋3 重要操作＋4 更多操作。
其中，向上按钮，点击后是去到当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮；Spinner 是用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作（action overflow）是集合操作栏中不常用的和非重要操作的地方。 Continue Reading →
再见了！差不多先生
关于差不多先生
你知道中国最有名的人是谁？
提起此人，人人皆晓，处处闻名。他姓差，名不多，是各省各县各村人氏。
差不多先生常说：“凡事只要差不多，就好了。何必太精明呢？”
他小的时候，他妈叫他去买红糖，他买了白糖回来。他妈骂他，他摇摇头说：“红糖白糖不是差不多吗？”
他在学堂的时候，先生问他：“直隶省的西边是哪一省？”他说是陕西。先生说，“错了。是山西，不是陕西。”他说：“陕西同山西，不是差不多吗？”
后来他在一个钱铺里做伙计；他也会写，也会算，只是总不会精细。十字常常写成千字，千字常常写成十字。掌柜的生气了，常常骂他。他只是笑嘻嘻地赔小心道：“千字比十字只多一小撇，不是差不多吗？”
有一天，他忽然得了急病，赶快叫家人去请东街的汪医生。那家人急急忙忙地跑去，一时寻不着东街的汪大夫，却把兽医王大夫请来了。差不多先生病在床上，知道寻错了人；但病急了，身上痛苦，心里焦急，等不得了，心里想道：“好在王大夫同汪大夫也差不多，让他试试看罢。”于是这位兽医王大夫走近床前，用医牛的法子给差不多先生治病。不上一点钟，差不多先生就一命呜呼了。
这是胡适先生创作的一篇传记型题材寓言，通过这篇小小的寓言，我们认识了这位差不多先生，而在看了这么多关于差不多先生的荒唐事迹之后，我相信大家都不想成为差不多先生这种人。但是细细想想，是不是隐隐觉得自己身上还是有着差不多先生的影子呢？我们是不是常常也抱着“差不多”的态度对待生活和工作呢？在做网页设计的过程中，我们是不是也有过“差不多就好了”的想法呢？ Continue Reading →
怎样通过更好的用户体验促进网站转化率的提升
对电子商务网站来说，可用性和用户体验的改善，对转化率的提高是有显著效果的。所谓的改善，不仅包括更好的视觉效果与内容架构，更重要的是，怎样以更专业化的、让人信赖的方式在正确的时间传达正确的信息，与潜在客户进行有效的沟通。
通过本文，你将了解到，为产品创建着陆页面时需要注意哪些涉及用户体验和可用性方面的因素，包括怎样使用户的注意力集中在最重要的信息上，以及怎样通过视频、用户打分等方式，有效提升转化率。
专业化、可信赖的视觉风格及体验
“保持简单”确实是良好可用性的重要体现。有些方法原则是我们已经熟悉的，比如通过合理的设计与正确的文案，使链接能在最短的时间内向用户展示最准确的含义；保持网站结构的可预见性；针对用户的操作，提供清晰明确的状态回馈信息等。简单且有效的体验，可以使用户感到愉悦，并减少误操作。
这些方法固然可以帮助用户更好的浏览和使用网站，但对提升转化率、扩大销量等方面来说，并没有很直接的推动作用。而且在很多时候，“简化”的设计思路会与销售和市场等方面的因素产生冲突。所以，对于电子商务方面的网站，还有一些更“专业”化的指导原则需要我们去理解和遵循。
树立信任，注重信誉的打造
专业化的、让人信赖的视觉设计风格，对网站信誉的打造起着至关重要的作用。通常情况下，人们会对“在线购物”持有谨慎态度，尤其是在他们所不熟悉的购物网站中。所以首先要保证的就是让我们的网站看上去足够可信。以inkd.com为例，在视觉方面，通过对网格布局及其他一些设计原则的正确使用，即保持了内容的简洁可读，又塑造了专业可信的形象。
符合用户心智模型的功能及信息架构，也是提升可信度的重要因素。一定要确保用户在使用网站的过程中有充分的控制权。对于有经验的用户来说，他们可能会更多的使用搜索功能来快速寻找想要的产品，并且，通常还会对搜索结果做进一步的筛选和排序。而相对新手一些的用户可能更喜欢直接在首页就能看到产品的简介，或是更倾向于使用网站提供的导航菜单来寻找商品。
要保证流程的连贯性，并符合用户预期。当用户在商品索引页面点击某商品时，接下要来进入的必须是商品详情页；除非用户主动从详情页面中跳出，否则接下来的流程将是购物车或结算相关页面。顺便说一句，最好同时向用户提供“放入购物车”和“购买并结算”这两种功能，因为当用户只买一种商品的时候，“放入购物车”的功能只会增加一步没有必要的操作，而且会增大用户取消购买的几率。 Continue Reading →
Windows 8来者不善，准备接招
微软称要通过Windows 8再造操作系统，嗯，今天的主角是 Windows 8
Windows 8 你一定接触过，无论是看过，还是安装过，无论你喜欢，还是不屑，都阻挡不了她的缓缓袭来。 今天，我们来介绍一下windows8的精髓。
关键词“兼容PC与平板”“引入Metro UI”
Windows 8增加了对平板电脑的支持，同时引入Windows Phone中的Metro UI，在使用中我们发现，很多的交互是为了平板而设计。
设计灵感来源
三个重要影响
（1）现代设计 — 包豪斯（减少元素，以显现本质）
（2）国际主义平面设计风格 — 瑞士平面设计风格 （清晰，真实，美观）
（3）动态设计 — 电影艺术（动画“活”起来，激发用户情感）
生活中，人们行色匆匆，我们更需要提供快速，简洁，直接，明确的设计。
Windows 8的设计灵感来源于生活中的各类导航，地铁站，机场等。人们即使在急于奔波的时候，也能一眼在这些导航中获得他们要的信息。
容错性设计
即便你的产品90％的时间都运行良好。但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。——《getting real》
我们有时候不能不面对产品出错的时候。无论设计得多么用心，无论做了多少测试，用户仍然会遇到错误和问题。既然出错不可避免，那么如何进行容错性设计才是关键。
容错性设计就是当错误发生时，人们看到的界面。
就像对付不该发生的错误一样，容错性设计的关键在于“做好防御”。产品设计者们必须不断寻找可能造成用户困惑和不满的出错点。好的防御性设计决定用户体验的好坏。
举个例子：
有没有人注意过进入银行ATM机可以有多少种刷卡方式。答案是八种！而正确进入方式只有一种方式。
如何从设计上避免用户出错，限制是一种非常必要的方式。
- 限制用户某些交互操作
SIM卡如果做成一个倒角避免了长方形带来多种插入方式的错误。
三项插座和相应插孔的匹配避免了用户使用两项或其他插座错误的可能。
置灰是界面上限制某些操作的好方式。
Flickr的照片上传wizard，防止用户跳过第一步直接进入后面操作，采用置灰的方式。一方面告诉用户这可以进行当前操作，另一方面预示后面还有哪样的操作。
其次，减少认知困惑也很重要。 继续阅读：容错性设计
推己及人－用户推荐
关注到‘用户推荐’的契机是现在某购物站点的‘猜你喜欢’，虽然是换了皮的推荐，但真的某一天开始高准确度地猜中了我的心头好。我猜是我大量操作，坚持不屑地使用该产品，给数据库留下了足够的蛛丝马迹，这才被一箭命中，让程序看穿了喜好。
某日开会，业务与设计在争执‘推荐’模块内容，到底由业务推？还是按照用户喜好来推？换句话说到底是安排相亲对象还是放任自由恋爱？
‘用户推荐’到底是你说你的？还是我看我的？大家目的不一样，作为用户来说，仰赖自己智慧做出的选择，远比那些花花绿绿的推荐广告来的可靠，但有意思的是结果可能殊途同归。 继续阅读：推己及人－用户推荐
如何开始第一场可用性测试
相信每个产品设计者都希望自己能够打造出非常棒，贴合用户的产品，而可用性测试是对产品提升作用非常好的工具，可以为产品提供很多非常有价值的内容，让你可以恰当的在产品与用户之间找到一个微妙的平衡。
可用性测试在专业互联网公司里是隶属于用户研究的职责，而且用户研究这个职位并非每个公司都会设置，如果你也像我一样渴望提升产品品质又没有用研帮忙，也没有这方面的领路人的同行们，怎么办？因此我写了这篇文章，不是因为我是一个用户研究，也不是我对可用性测试多精通。
前段时间恰好啃了一些资料，把笔记整理了一下写下了这篇文章，这篇文章不可能让你精通于可用性测试，最多让你粗略的了解它，所以在文章结尾处，我会把之前收集的一些资料放上，方便大家进行后续的深入研究，同时希望有经验的人能够多多指点取经。
准备：可用性测试资源
- 测试目的：这次的可用性测试是为了完成什么样的目的
- 测试时间：预估时间(90分钟左右)
- 工作人员：需要几名工作人员，一般来说5个人的可用性测试由(5名测试人员,5个陪同测试人员,1个助理,1个主持人)
- 测试人员：5名参与测试人员（5名测试人员就能够把80%的问题找到了，人数过多并不是好事，找人的时候可以根据情况自己选择，一般来说多找“轻用户”和“有潜在需求”的人
- 主持人：负责串联起来整个可用性测试。（讲稿在下面） 继续阅读：如何开始第一场可用性测试
聊聊线框图：UED和PD对于线框图不同的定位
本周和PD们进行了一次《线框图以及Axure入门》培训。这是应几位PD的需求，他们也要学习如何设计线框图，所以想更加高效进行入门。
在场的有UED，有PD，我发现，对于两者都要画线框图，引发了一些讨论，这也是我事先预想到可能会引发争议的部分。
其中有个PD讲，有一次，老板是要求她来画线框图给他看的，她花了很多心思在线框图上，结果交付给交互设计师的时候，交互设计师不知道如何进行发挥了，交互设计师说：你都画这么好了，我不知道画什么了。之后，交互设计师进行了“润色”后，交付给视觉设计师，结果视觉设计师发现自己也无从发挥了，因为视觉稿已经出来了，都上了色了。
如果能够提升项目效率，这样倒真的也是好事。PD直接画出确认版的线框图，然后直接给视觉设计师，交互就不需要了。在很多小公司，也确实如此运作，也蛮好的嘛。
交互设计师说：交互设计师承担了一种需求翻译的工作，将PD的商业需求，进行具象化，并加入一些用户的视角，帮助优化产品，之后翻译成视觉设计师能够理解的语言，最后产生视觉稿。这也只讲到了一部分，如果PD也能够具象化，并传达得很好，为何还需要交互呢？
但是，在实际的工作环境里，我们必须得承认一个前提：术业有专攻，每个人的精力是有限的。 继续阅读：聊聊线框图：UED和PD对于线框图不同的定位