2010年1月 的存档

• 如何精简用户界面

  日期：2010.01.18 | 分类：用户体验设计(UED) | 评论数：0

  简洁、易用、友好、直观。这些词语经常被提及，但在执行过程中经常被遗忘。这是因为软件功能的复杂性所导致的。如何处理好软件的复杂功能往就可以决定它的命运。一个复杂的界面会让用户不知如何操作。如果，减少复杂的操作过程并精简操作界面，那该软件的用户体验就大大的提升了。

  去除无用的功能

  研究发现：80%的用户仅仅使用软件20%的功能。而那些没用的功能不仅浪费开发时间，也使得软件更加难以使用（这些功能对用户的阻碍作用大于有用价值）。软件试图尽力可以把任何事都做好。而一个成功的软件应是简练精干的，可单独智能化的解决单个问题。
  精简的软件可通过削减功能得到。通过默认去除的方法判断一个功能是否有必要保留。将软件所有的功能进行真正的筛选。如果该功能不能帮助大多数用户完成日常的任务，那么可以将其排除在外。删除功能是艰难的，当整理完毕后看到用户顺畅的使用软件。你就会知道多么值得去做这件事情了。

  隐藏复杂部分

  如果实在无法去除某个复杂功能，那么就将其隐藏。通常情况下，不常使用的功能要比经常使用的功能占据更多的屏幕**。而优秀的界面应该确保最常用的功能在最显著的位置，将不常用的功能隐藏。

  当我们重新设计CMS系统时，我们无法去除一个复杂的功能：批量编辑功能。在之前的版本里，在主屏幕上有一整排的批量编辑按钮。约占据了屏幕30%的区域，但我们发觉很少有人会用到此功能。我们的解决方法是，放置一个小图标并在旁边显示数值以示下拉列表里有几个选项。点击图标或数字则显示下拉列表。通过这种方式节省了大量的**，也不会干扰用户使用那些最基本的功能。

  

  

  最小化视觉干扰我们已经讨论了通过去除与隐藏的方式降低界面复杂性的方法。但减少“视觉感知”的复杂性也是很重要的。最小化视觉干扰将使得界面看上去易于使用。减少视觉干扰的两个方法是：空白与对比。

  空白，是指介于各个元素之间的间隙。它应是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了。

  虽然使用空白多多益善，但也要尽可能的保证有对比感。设计理论家说：设计师应使用最小的视觉变化来表达想法。事实上这就是意味着元素之间要有主次感。

  

  

  你可以看到修改过的版本有很重的黑线，与之前的边框不同。那个版本视觉干扰更小呢？（当然是原来的更好）大量的空白区域减少视觉干扰并让人觉得更舒适。

  做减法、重复使用，循环利用当软件成形后，问题经常发生在程序的各个结合部分。存在的问题往往可以通过相同方法加以解决。界面中应使用相同的组件。使用相同组件的两个好处：减少开发所需时间；给人一致的使用体验，如果用户学会使用一个操作，他们就可以把相同的操作行为运用到进行其他操作中去。

  在设计CMS过程中，我们在表单验证上花费了大量的时间。我们用红色框出无效的区域，甚至增加红色的提示框来说明每个填写表单的环节有多少错误。

  在之后的开发过程中，我们在需求列表中增加了版本比较的功能。与其创建全新的框架，不如使用在已有的框架上进行改进。我们用蓝框标出已修改的表单，并使用蓝色提示框标注该区域。通过这种方法我们快速部署到用户已经熟悉的界面上。

  

  

  重复使用元素是另一种可以减少界面复杂的方法，因为用户可以迅速的熟悉软件。

  空白状态不应空白空白状态是指界面无数据时的样子，如用户初次使用软件。作为设计师，我们花费大部分精力用来设计如何最好的展示内容，但时常忘记如何展示无数据的样子。

  如何建立合理的默认值是很重要的。软件的空白状态通常是给用户的第一印象，用户通过第一印象来考虑是否来使用软件。好的空白状态可有助于用户学习使用软件的途径，帮助用户学会初次使用软件的基础操作。

  

  Versions的mac版本显然在程序的空白状态投入了很多心思。在首次运行的时候，程序突出了两大人们可能会用得到的功能。

  再次重复：不要忘记空白状态！

  相关展示我们已经见过大量界面混乱，复杂的软件。然而，有效的减少程序的复杂性有点难度。

  Invoice Machine 的界面十分的简约。示例显示它非常节约扩展部分并注重细节。

  

  Freckle只是确保你可以跟踪自己的时间。简洁的界面闪现活力，将例行任务变得有趣。

  

  Image Spark黑白色的渐变。界面几乎没视觉干扰，易于使用。

  

  Ballpark有简洁的界面，用色不跳。

  

  Krop，其核心就两个表单：地址与关键词。

  

  Fever网站的整个目的就是减少你与感兴趣博客之间的距离。它通过非常简单独特的方式来实现。

  

  Screenr 是个惊人的简单截屏并发布到Twitter的软件。值得注意的是没有的功能它有，但其他类似软件有的功能它都没有。

  

  Squarespace 在隐藏复杂功能方面做得很好。虽然它是网络的发布平台，它把功能隐藏在一个简洁的界面中。

  

  总结

  * 减掉不必要的功能；
  * 然后隐藏那些不能减掉的功能；
  * 减少视觉噪音并重复利用元素；
  * 使用空白帮助用户；

  (翻译略有删减)
  英文地址：http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/
  原文地址：http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/

  来源：http://forum.chinaui.com/viewthread.php?tid=67424&extra=page%3D1

• 以后对孩子说，曾有个网站叫谷歌。他妈妈喊他回家吃饭。

  日期：2010.01.17 | 分类：紫枫生活 | 评论数：0

  以后对孩子说，曾有个网站叫谷歌。他妈妈喊他回家吃饭。

  

  百度被黑

  

  谷歌退出中国

  

  互联网“标具”速速围观

  

  以后对孩子说，曾有个网站叫谷歌

• 交互设计-有效性”之“简洁清晰，自然易懂”

  日期：2010.01.15 | 分类：交互设计, 用户体验设计(UED) | 评论数：0

  

  我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络开始接触越来越多的信息，那么，如何获取/传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

  1.什么是“简洁自然，清晰易懂”？

  简洁清晰：使信息最简化
  “少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。

  自然易懂：使用用户语言
  用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更可以被用户所接受。

  2.信息表述的种类与设计原则

  在网页交互设计中，用于传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。

  

  1）页面布局

  界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。

  ①界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。
  ②布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等
  ③页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。
  ④布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。
  ⑤信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。

  2）交互文本

  交互文本指产品界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。

  

  ①表述的信息尽量口语化，不用或少用专业术语；
  ②表述语气柔和、礼貌，避免使用被动语态，否定句等；
  ③简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。
  ④对于同种操作的交互文本，操作行文字保持统一性。
  ⑤字体使用默认/标准的字体，大小以用户的视觉清晰分辨为主；

  3）界面色彩

  人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。

  

  ①根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。
  ②考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。
  ③避免界面中同时出现3种以上的颜色。
  ④颜色的对比度明显，如在深色的背景中使用浅色的文字。
  ⑤使用颜色指导用户关注到到最重要的信息。

  4）图像图标

  相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。往往表述一种信息，一张图片或者一个标识更能让不同用户理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。

  

  ①表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。
  ②同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性；
  ③仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。
  ④尽量与交互文本结合使用。

  5）声音

  在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。

  ①表述清晰，语气亲切，不生硬，有礼貌。
  ②使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。
  ③使用不让用户反感（如：恐怖，恶心，烦躁）的声音。
  ④在用户可预知的情况下发出声音。

  4.小结

  对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。

• 用户体验量化方法研究

  日期：2010.01.13 | 分类：用户体验设计(UED) | 评论数：0

  以用户体验层次模型为基础，我们提出了三种用户体验量化方法：以任务为中心、以体验为中心以及以行为为中心的量化方法。三种方法中有不同的要素组成，各要素间存在着不同的关系。

  用户体验量化方法研究的提出

  近年来，用户体验一词铺天盖地的出现在网络上、书本中。而在众多的用户体验相关描述中，认知度较高的包括：（1）用户体验是用户在使用产品的过程中所感受到的、所获得的全部内容的总和；（2）用户体验是衡量产品质量的一个重要标准，是一种与交互相关的集合。与此同时，无论是用户体验的相关工作人员，还是众多企业的高管，都意识到好的用户体验不仅能够满足用户的需求，同时能够提高企业的经济效益。

  而此时，用户体验的相关工作人员所面临的问题是如何评测产品给用户带来的体验呢？这就需要我们通过一定的方法对用户体验进行量化。在诺曼、Robert等学者所作研究的基础上，我们在用户体验量化方法上进行了大胆的尝试。在用户体验量化方法的研究过程中，我们首先通过分析用户体验的流程来建立用户体验的层次；其次，以该层次为基础来寻找每个层次的组成要素以及要素间的相互关系，并依照层次的划分提出用户体验量化的方法；再者通过案例详细阐述用户体验量化方法的运用。

  在这里，我将分三次向大家展示整个方法的研究，今天要和大家分享的是用户体验层次模型的建立。

  用户体验层次模型的构建

  为了研究用户体验量化方法，我们首先需要明确用户体验是如何产生的。这就需要我们建立一个囊括全部要素在内并能表明各要素间相互关系的用户体验层次结构。诺曼认为用户体验是一种与交互相关的集合，这为用户体验层次结构的构建提供了依据。于是我们结合诺曼的理论从用户体验的流程出发对用户体验进行模糊的层次划分，之所以称之为模糊的层次是因为对于不同的操作者以及不同的产品，甚至是不同的任务来说，各个层次中各要素的划分不尽相同，这一点会在其他的研究中涉猎，但在《用户体验量化方法研究》的系列中将不再详细陈述。用户体验模糊层次模型如图1所示。

  

  图1展示了用户体验的产生流程，元素处于整个用户体验模糊层次的最底层，包括产品层面要素和行为层面要素。以手机为例，产品层面的要素包括手机所发出的声音、光，手机所呈现的图片、视频等；而行为层面的要素包括按、长按、单击、双击等。行为交互层是指使用户与产品进行交互的单元，不难发现，用户与产品间的交互都可以通过图1中所示的最小单元来形成；若干个行为交互形成了用户的体验行为；用户的若干个体验行为形成了用户体验。将图1的内容按照发生的先后顺序进行重新构建，我们可以得到用户体验的逻辑层次，并称它们为目标层、行为层、体验层，如图2所示。这三个层次与诺曼所提出的本能层、行为层、反思层的理论相吻合。

  

  在目标层上，需要用户对自己的目标进行识别，得到为完成实践目标所需要的信息与操作方式从而进入行为层；在行为层中，用户完成若干个行为交互，最后进入体验层；在体验层中用户会产生不同的主观感受，这需要通过问卷方法对用户的主观感受进行度量。三个层次间相互关联、互相影响，是用户体验形成的必然组成要素。用户在体验层形成最终的主观感受，而目标层、行为层即是用户主观感受的原因，又是用户主观感受的客观记录，通过对目标层、行为层的分析，可以获取用户相应的主观感受。这一点在后面所提出的用户体验方法中有明显的体现。

• 当视觉设计师遇上产品经理、开发工程师

  日期：2010.01.12 | 分类：用户体验设计(UED), 视觉设计 | 评论数：9

  

  我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试的…等等。那如何在其他团队成员的面前不卑不亢，游刃有余地应对呢？下面这篇文章给了我很大的启发，特别分享给大家。

  　　产品经理、开发工程师和市场策划专员等产品利益关系人认为——视觉设计师在整个团队中没有突出的地位。难道这个论断是正确的吗？我们还能用哪些实例来向这些利益关系人证明视觉视觉设计的重要性呢？

  　　尽管，视觉设计师在他的职业生涯中或者是在某个产品开发进程中会面临不同的阻碍，以下3点是会被经常提及的：

  　　● 视觉设计就是怎样把东西做得更漂亮
  　　● 做流行的东西就可以提高视觉设计的品质
  　　● 我们从单个元素出发来评价视觉设计的效果

  　　视觉设计就是怎样把东西做得更漂亮

  　　尽管现在只有很少的一部分人依旧坚持着这个观点，但认为视觉设计只是蛋糕上的奶油这个观念已存在很久。这就好比把最后一步的视觉设计比喻成产品包装上的一个吸引人注意的蝴蝶结。

  　　这个观点也许源于工业时代。在当时，工业产品才开始出现不同以往的外观设计，而且像雷蒙·罗维（Raymond Loeway，1889-1988，法国）这样的现代工业设计师开始大张旗鼓地宣扬自己的产品美学。

  　　显而易见的，视觉设计确实可以改善产品的表征，但是它可以传递给用户的信息其实更多。通过对不同元素的排列布局，视觉设计师也在向用户传递着产品的核心价值：

  　　● 这是什么？
  　　● 我怎么使用？
  　　● 为什么我只使用它？

  　　上述3个问题在交互式产品的设计上尤其显得至关重要。下面我们通过一个实例来说明。

  　　图1到图3呈现的是同一个网站的不同视觉排列，基于相同的视觉元素——字体、颜色、渐变和图片。不同的布局直接影响着主要功能点的不同。

  

  上图中，我们可以清晰地看出页面的主要功能是查看客户联系信息。然后则是用户可以编辑、删除或者为联系信息写备注。在图2中，页面的重点放在了客户和公司的交流上，然后是用户可以浏览、编辑和删除客户信息。

  

  最后，图3的设计重点是用户信息的可编辑性。查看和实时跟踪客户信息的功能被弱化了。

  

  这3种不同的视觉呈现方案告诉了我们用户的3个主要任务：查看客户联系信息、管理和更新这些信息以及保留客户的记录。在每个方案中，视觉设计的基本元素是相同的：颜色、字体、渐变和图片。

  　　视觉设计可以做到的远比美化界面多得多。它还肩负着传递产品核心功能的作用。“这是什么？”“怎么使用这些功能？”“怎样更高效地使用？”

  做流行的东西就可以提高视觉设计的品质

  　　就像现在很流行的网站“make my logo bigger”所为客户做的事一样，产品经理经常会要求视觉设计师更多地关注排版中的某个细节。这些意见在帮助我们更容易抓住设计重点的同时，也暴露了对于视觉设计的另一个误解：“为了改进这个网站的视觉效果，你要把这个做得大一下，这个字体用粗体，变成红色！”

  　　然而，页面中任何元素的重要性如何是取决于它周围环境的。比如，在一个页面中放入一个大红色的圆，它会很引人注目。如果把同一个圆放在10个粉色的圆边上，它就不会那么醒目了。因此，决定某个元素的重要性要从设计的整体出发。我们不应该只关注于某个元素来改进设计。如果这样做的话，页面的整体平衡就会被破坏，也会混淆页面功能的层次关系。

  　　如果你答应每个利益关系人去逐个调整页面的不同细节，你每次的调整都要在用户需求和产品需求之间做抉择，然而，大多数情况下，两种需求是无法同时得到满足。图4和图5是两个不同下载页面的比较。火狐的页面中有一个醒目的下载按钮来触发这个行为。而页面中其他的元素，比如产品特性等就不会那么明显。

  

  图5是Flock的下载页面，有4个地方可被点击来触发下载的行为：页面的右上角、左边菜单的底部、新闻板块的右上角和页脚的位置。如果不是因为每个下载细节都被强化的话，Flock可能就会像火狐一样——只有一个下载的按钮。

  

  我们从单个元素出发来评价视觉设计的效果

  　　如果我们把关注的重点单单落在某个元素上而不是整体页面的话，也会让局部的调整很困难。“你能把logo做得大一些吗？”“你能把标题的颜色变一下吗？”“我们能在这里换一张图片吗？”…

  　　这些零散的建议确实可以帮助我们更了解客户的意图，但客户很少会关注到这对整体页面设计的影响。换一个颜色可能需要重新定义页面的色调，设计师还需确保新的色调不会影响到用户关注主要任务。换一张图片可能意味着也要同时调整它周围的元素，因为原先图片制造的视觉焦点可能不复存在…等等。

  　　一个最终的视觉设计稿应该是建立在平衡和调整各个元素相互关系上的——同时传递产品的核心价值。所以，当设计师在调整了一个元素后，他还必须重新考虑页面的布局以不破坏原有的平衡。孤立地完成一个个小设计，合在一起后并不能说这就是一个完整的设计。

  　　互联网产品的页面元素尤其容易被独立开来进行评估。因为它也许是分一个个单独的模块做测试的，团队里的一个成员也可能认为我只要把自己的那部分给做好了，整体的项目也就做好了。图6就表明了独立设计可能造成的结果。

  　　当我们单独看页面头部ebay的logo、paypal提供安全保障的提示和正中照相机的促销广告是，都会觉得不错。事实上，当这三者同时出现在一个页面上时，他们更像在互相竞争，都过于抢眼了。

  

  但愿以上这些实例已经证明了视觉设计师在团队中的价值。但要让更多的团队成员认同视觉设计不仅仅关乎到样式、流行等，视觉设计师还需多提升自我经验，在项目初期就表明视觉设计对于整个项目的重要性。

  　
  《Common Visual Design Misconceptions》
  By Luke Wroblewski
  原文链接：http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php