作者归档：大脸

关于 大脸

某移动交互设计师。 成熟困难症，外向接触本能焦虑症。 通俗点说就是一幼稚与内向的凡人。

在线应用窗口一致化分析

发表于 由
11

虽说互联网的革命总觉得势不可挡，大家都期待着，某一天，只需要一个浏览器，就可以完成平常用客户端才能完成的任务。虽然，HTML5与Chrome一度让我们看到浏览器代替操作系统的希望（via 1，2，3，4，5），但目前来看，用户同时保持两种平台的使用的状况，要持续很长一段时间。

想让用户无缝地从客户端应用转移到在线应用，我们还面临很多问题。

从逻辑上说，在线应用属于操作系统中浏览器客户端应用内运行的一套程序，很多交互上依然还是要依赖上层应用（浏览器客户端），这就如同在Mac OS内跑一个Windows的虚拟机的那种差别。

这样的环境，就给在线应用带来一个很严重且无法避免的问题：体验不一致。在线应用没法提供和客户端应用一样的体验环境，用户如果如果想好好使用在线应用，得需要重新学一次，成本过高。尤其是对于那些生产力应用，而这种不一致，无疑是致命的打击。

生产力应用指的是可以完成那些对具体信息的组织与处理的任务。用户通过生产力应用可以创造并处理信息。比如Outlook，Photoshop，Word，AutoCAD。

这些体验的不一致在UI上的表现主要包括以下几点：

  1. 键盘快捷键 ——只有少部分在线应用支持快捷键，这些快捷键难以发现且不支持复杂的组合。
  2. 鼠标右键 —— 只有少部分在线应用支持，而且无法和浏览器右键菜单并存。（新版Flickr的交叉显示做法不错。）
  3. 信息交换 —— 把本地照片拖进Photoshop内即可打开，把Flickr照片能拖进Photoshop.com内编辑吗？

继续阅读 →

何处安放的Loading

发表于 由
16

可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。
虽然在反馈系统中，当用户需要等待时，更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短，且用户的带宽为主要影响要素时，却使用Loading这种低成本实现的反馈。

Loading图标的历史来源已经无法考究(据传是苹果最先使用)，但是，它的动态效果，在视觉上刚好是一个重复循环的“风火轮”。非常适合做不确定等待时间的进度反馈。

Loading的主要作用，在于提供反馈给用户表示当前状态，并且让用户的命令的执行和完成过渡得更加平滑。从这种角度上说，它和很多流动式反馈没有多大区别，如MAC系统中窗口最小化的渐进动画。

Loading的图标仅仅在web应用当中产生，而在客户端中，则较少使用，因为鼠标手型能够代替它的工作。

但是对比客户端，web端的Loading反馈可控性更好，创意也更加。如以下几种：

四种种经典Loading图标

那么在设计中，如何放置Loading图标，也应该有所章法。但是无论如何放置，都有一个规则：确保用户可以注意到。

继续阅读 →

胡诌Buzz

发表于 由
7

从Buzz推出之后，纷纷扰扰的看法就从未停歇过，对于Google强推的一款社交产品，Buzz确实值得获得分析与讨论。

胡诌需求

如果我用的观点来定性Buzz与twitter的区别，我会这么说：Buzz是沟通工具，而twitter则是一款传播工具。
很多用户抱怨Buzz内的自动置顶给他带来信息干扰，以及默认同步好友并公开关注列表让用户觉得个人隐私被出卖了。诚然Google的做法也是令人反感的。但工具本身并无好坏之分，关键在于是否用在正确的场景中。而Buzz的目的并不在于帮助你发现更多新奇有趣的信息，不在于帮你扩展你的社交圈（手机上的Nearby功能除外），如果以twitter使用习惯强加于他，你会觉得处处受困。Buzz的目的只是用于你现有社交圈的沟通方式的拓展而已。

那么有没有一种沟通情景，很符合目前Buzz的需求设计呢？Google团队在解释为啥 Google Buzz 没经过太多内测就提前放出就有涉及到：

Jackson说当Google员工内部测试这个产品的时候，他们从未想到过要mute掉任何同事的对话，他们的邮件联系人列表里的同事就是他们在Buzz里follow的人。很显然，对于那些不在Google工作的人来说他们并不需要这样的配置，所以Google后来紧急发布了一系列针对隐私保护的新功能。——摘自谷奥

从以上的描述中，我们可以大致了解到，Buzz的沟通情景，适用于那些对内公开，对外封闭的实名小圈子。如某个企业内所有成员，如某种爱好者组织团队……

实际上，Buzz所具有的即时性，储存性，以及半公开性，尤其适合于这种小圈子的讨论，或者用kentzhu的话说：信息的局域化传播。

继续阅读 →

安慰你的用户

发表于 由
10

在煎蛋上看到一个比较有意思的文章，顺便也看看下面的回复，突然想起很多有意思的东西，关于情感化设计。我开始思考，是不是在很多时候，在考虑界面精简的同时，我们也需提供一点毫无意义的东西给予用户安慰的效果？

这篇文章叫做：一切都是假象：按钮的安慰效果，截取其中的一段：

安慰剂按钮 Placebo buttons ：是指一种放置在公共场合假装有效，但实际已经停止工作的按钮。

你有没有猛按电梯关门键的经验。纽约客一篇文章曾提到，在90年代初，当地的电梯都还没有关门键，这都是后来添加上的，但实际上这并没有太大的用处，只是为给人们造成‘猛击此次，关闭电梯’一个假象，同时也能缓解人们在等待电梯下楼时的烦闷。

如果细致观察你的生活，想必你也有以下常见的习惯：

  • 热得不行回家马上把空调调到16°C。——但事实上气温不可能马上下降到16°C
  • 电脑卡的时候狂点击鼠标右键内的“刷新”命令。——事实上，“刷新”并不能解决卡的问题。
  • BT下载的时候让任务暂停后马上继续，希望速度能加快。——好吧，从我个人角度来说，我发觉这好像有点效果。
    ……

继续阅读 →

榨干Chrome UI

发表于 由
38

目前的我，已经成为Chrome的严重依赖用户，甚至U盘内也随身装着Chrome便携版。对我而言，它有着其他浏览器无法代替的杀手级优势：快速，稳定，完美支持Google所有在线服务；简洁到一塌糊涂的界面。

而其他浏览器，他们只在一些特殊需求中才会使用，如Firefox的AutoProxy翻墙，IE插件下的网银支付，Opera的turbo加速等。

用过Chrome的的人都有个习惯：就是都不好意思说Chrome不好用。当然这是玩笑话，Chrome 3.0版本之前功能也一直较为简单，但并不妨碍它的用户对其赞不绝口。究其根本，还是出在其独具一格的UI体验上。

只用一句话来评价：Chrome 才是浏览器，其他的只是软件。

戈达尔曾经为证明斯皮尔伯格是一个平庸的导演而愤怒地说过：“如果你真想知道他为什么（平庸），我会在放映室里一个镜头一个镜头地讲给你听！”

现在我要做一件类似的事情，不过目的是为了证明Chrome是一款多么优秀的浏览器。

继续阅读 →

如何突破Good enough?

发表于 由
12

优涩控是一个很有意思的团体，每个成员都有很独立的喜好的IT公司，如00后就是100%的果粉，极爷是标准的G粉；但我却是一个不折不扣的微软粉丝。原因来自The Story of the Ribbon，设计一个伟大的产品很难，但把一个不伟大的产品修改得伟大则是难上青天。Cc872782.Ribbon01(en-us,MSDN.10)

A ribbon is a command bar that organizes a program’s features into a series of tabs at the top of a window. Using a ribbon increases discoverability of features and functions, enables quicker learning of the program as a whole, and makes users feel more in control of their experience with the program. A ribbon can replace both the traditional menu bar and toolbars.

“功能区（Ribbon）”是一个命令栏，将程序功能组织到窗口顶部的一系列选项卡中。使用功能区能够使程序的功能特性更易于发现，使用户能够快速整体地了解程序，并使用户在该程序中体验到更强的控制感。功能区能够同时取代传统菜单栏与工具栏。

第一次使用word 2007的用户会明显的感觉到，相比Office 2003 经典的WIMP UI，Office 2007的Ribbon UI是对用户体验的一个完整的再设计；但稍微体验一下，你就不得不惊叹，他是那么的容易实现你的目标。

继续阅读 →

为中文而设计的文本框

发表于 由
23

搜索自动完成.png

我一直觉得，文本框的这个东西，在有输入法的国家，是我们这些懒人的杯具，文本框的自动完成功能，在配合输入法下，简直是个鸡肋。一次次的切换Ctrl+Space，是否有让你崩溃想敲烂键盘呢？

上面的那张图已经很明显的让我们感觉到了三个问题：

  1. 输入法把自动完成遮挡住了，我看不见。
  2. 使用键盘↑↓键只能切换输入法内的选字，无法选择自动完成内的选项。想用却用不到。
  3. 当你懊恼的打算用鼠标去点自动完成列表内的文字时，杯具发生了，你发觉，你点了，事实上什么效果都没有。你的文本框变成一遍空白。（在Chrome下多种中文搜索引擎有此问题，杯具啊。）

备注：经过笔者测试多种搜索引擎在不同浏览器的呈现效果，这三个问题出现的几率各不相同，但在chrome下这三个问题非常明显。（Chrome渲染有问题？）

继续阅读 →

让你的产品更具响应性

发表于 由
57

在最开始，有两个问题？

  1. 既然人脑是世界上最智能的东西，为啥我们还需要电脑？
  2. 为啥如今web技术发展理论上已经能够实现所有的客户端功能，为什么我们还需要客户端？

原因都很简单，因为后者比前者更快，响应更迅速。

什么是响应性？

过去的几十年当中累积的大量证据表明，响应性（即软件应用程序跟上用户、不让他们等待的能力）是确定用户满意度的最重要因素。相比安全性，稳定性，易用性，响应性无疑是最容易最方便被用户所感知的。在使用计算机或者手持设备的时候，用户对于等待的憎恶比对其他任何事情的喜爱程度都要深。

然而，用户对于响应性的感知其实包括两个因素的：

  1. 速度：指的是机器自身的计算能力，机器性能越强，速度越快。
  2. 流畅感：使用时系统的反馈能否满足用户的时间支配需求。

继续阅读 →

使用信息提示提高系统的功能可见性

发表于 由
43

什么是信息提示（Infotips）?

信息提示，用于对一些较为隐性的页面上的元素进行补充说明。通过鼠标悬停来表现。

在这个示例中，用信息提示对链接进行说明

在这个示例中，用信息提示对链接进行说明

在各种提示当中，信息提示是最有效且实现成本最低的一种提示：他的干扰性很小，容易实现，并且不存在平台或者浏览器兼容问题，实在是居家旅行杀人放火必备提示。

有效的利用信息提示，能够快速提高系统的反馈机制，同时，他还能有效的增强一下系统功能的可见性。

继续阅读 →

高度认知与低度认知

发表于 由
11

点击查看大图

这是爱情公寓的注册页面，看到这幅图片您一定会乐了，因为两个按钮上的文字；但我们所关注的并不是其情感化的贴心语句，而是其所包含的对于高度认知与低度认知的差异化设计。

高度认知与低度认知是对用户的分类的一种维度，他对按照熟练度区分而出来的新手用户与专家用户既有相同性但也存在差异。高度认知与低度认知的差异的原因更多是文化以及生活习惯的沉淀，他们之间的相互转化也比较困难。在设计上，有必要考虑对两种用户的差异化而进行设计。

什么是高度认知与低度认知？

有些人对于大部分信息都了然于胸，在操作的时候，更加依赖自己的经验或者习惯，因此，他们对于信息的需求量非常的少，有时候他们只需要很少的信息就能了解系统的状态。但有时候他们也容易过渡遵循自己的习惯于经验，即使出错也会一次次的重复操作下去。

继续阅读 →