交互界面知识.docx

交互界面知识.docx

《交互界面知识.docx》由会员分享，可在线阅读，更多相关《交互界面知识.docx（12页珍藏版）》请在冰豆网上搜索。

交互界面知识

∙

腾讯搜搜UED是一支专业面向搜索领域的用户体验设计团队，英文全称SOSO User Experience Design。

2010年腾讯搜搜在经历了新logo上线、改版等一系列大动作后，正在以全新的姿态服务于千千万万的互联网用户，与此同时对于搜索引擎用户体验设计的标准也在不断提高，用户体验设计团队也在日益壮大。

为了能更好的代表搜搜对外展示团队的工作成果，以及更好的扩大搜搜UED的团队影响力，我们决定对团队的视觉形象进行一次再设计，并希望新视觉形象能承载起创造、智慧、专业、用心的团队使命。

∙

初次脑暴：

接手需求后，经过Brain Storming，我们初步制定了一些与团队有关的key words来指引我们未来的设计方向。

∙

–

第一轮提案：

考虑到易识别、拓展应用方便以及和兄弟团队保持统一的因素，我们决定使用UED三个英文字母作为Logo设计的基础图形，再根据之前定下的key words，不久，丰富多彩的第一轮方案便出炉了。

团队内部经过第一轮评审后，产生了两派观点：

第一种赞成七巧板的造型，原因是采用七种颜色七巧板造型的logo能与SOSO彩虹色的Logo相互呼应，并且七巧板图形以后可以衍生出丰富的拓展应用。

第二种赞成搜索框的造型，理由是仅仅用UED三个英文字母并不能很好诠释团队的使命和含义，还需要加入搜索的元素，强调我们是一支专业的搜索设计团队。

∙

第二轮提案：

于是朝着这两个设计方向，经过不断改进设计，第二轮方案浮出了水面。

在第二轮评审中每个团队成员分别对两个方向的几种不同方案提出了宝贵意见。

在最后的投票表决中，第二排中间“搜索框+ued+放大镜”的方案获得了大多数的支持，之后我们便将设计和修改的重点都放在了这一方案上。

∙

方案修改和更迭：

之后我们对“搜索框+ued+放大镜”的这款方案进行了更加细致的修改，精细到了笔画的粗细和圆角的大小，甚至连英文字母收笔处的小细节也没有疏忽。

降低用户界面的复杂性

整洁，简单易用，用户体验良好，直观。

许多人都提倡这些规则却常常在实现的时候丢失了。

主要体现在：

太复杂了。

如何处理好一个应用的复杂程度将成为它成败的关键。

一个比较极端的例子就是一个复杂的界面可以让用户纠结在一个很简单的但是完全疏远他们的案例中。

但是如果你在此之前仔细思考过减少那些确实很复杂的东西从而降低它的复杂程度，用户会很感谢你带给他们这么舒畅的体验。

我们最近在设计两款网络应用的时候面临着非常大的挑战，其中包括一个企业级管理系统.。

接下来我们使用了一些能够帮助我们把复杂的应用变得简单易用。

[摘要:

顺便一提，你知道SmashingMagazine有移动版的吗？

如果你有iphone,黑莓手机或者其他可以使用的设备，不妨试一试]

去掉不该要的

第一个对付复杂度这个坏蛋的武器是一把斧头。

系统的分析一下能够发现80%的用户只会使用到软件里边20%的功能。

那些没用的功能不仅是浪费开发时间，还会让程序越来越难用。

应用程序在运作的时候常常想把任何事都做的很好。

一个成功的应用应该是很可靠的：

找出一个问题并且很好的去解决它。

就像37signals说的那样“你没有尽力去比赛。

”

想要做一个又可靠又好用的应用最好的办法就是做减法。

在做决定的时候不管这个功能是不是必要的，我们都要先持有怀疑的态度，让这个功能成为讨论的话题。

如果超过半数以上的用户在使用的时候都不怎么能用到它，那它真的可以被废掉。

别误会我错了，要想做一个作决策的人是很困难的，但是当用户舒畅的使用过如此简单易用的应用以后，你就可以得到他的充分信任了。

把复杂的隐藏起来

如果当你不能砍掉某个功能的时候，最好的办法就是把它隐藏起来。

很多时候，不经常用到的复杂的功能占据的屏幕空间要比经常用到的简单的功能要多很多。

这是不应该的！

一个良好的用户界面应该把最突出、最常用的东西直接展示出来并且把那些很少用到的东西都给隐藏起来这样他们就不会影响到操作了。

当我们重新设计我们的内容管理系统的时候，我们不能去掉那些比较特别的复杂的功能：

批量编辑功能。

在CMS以往的版本中，屏幕的一整列全都用来放批量编辑菜单。

这个功能占据了整整30%的屏幕空间，但是我们发现只有非常少的用户会去使用它。

我们的解决方法是插入一个单独的图标和一个数字在它的旁边标示出有多少项目在菜单里。

点击图标或者数字可以在一个对话框中显示菜单里边的项目列表。

这样可以节省大量的空间并且可以让绝大多数用户在工作的时候不会收到干扰。

用JohnMeada老大说的话来形容就是：

“当一个轻量的、不花哨的应用超出了我们的期望，我们不仅感到惊讶还会非常的高兴。

”

降低视觉干扰

在此之前我们都在讨论如何降低界面的复杂程度以及隐藏掉功能。

但是减少感官上的复杂程度也很重要。

用户体验设计师BrandonWalkin说：

“界面中大量的视觉干扰会对一个感觉很复杂的界面造成很大的影响。

”保证最低限度的视觉干扰可以让一个界面看起来非常简单易用。

两个降低视觉干扰最基本的方式就是留白和对比。

就像MarkBoulton定义的那样“留白，是构成作品的基础空间。

”留白将会是你默认的排版工具。

单靠感觉在设计中是绝对不推荐的除非你可以用留白实现同样的效果。

你可以惊讶的发现单靠留白你可以完成很多事情。

当留白被大量使用的时候，对比应该越少越好。

就像设计理论大师EdwardTufte提出的“少量的有效区分”提倡设计师使用最小的视觉变化有效的表达出他们的想法。

事实上这句话是想强调什么是重要的，什么是次要的。

为了说明这两点，我们来看看TypeKit的定价列表然后再看看改进版的：

修改以前

修改以后

你应该注意到了改进版中加入了粗描边，和HTMLtable的默认边框没什么两样。

哪个版本将操作中的视觉影响降了到最低？

（答案当然是原版的）大量的留白和少量的辅助对比减少了视觉影响并且时你的应用感觉很清爽。

轻量化、重复利用、再循环

在应用刚刚开发好的时候，有很多问题重复的在许多地方发生。

这些重复出现比较有代表性的错误往往都有类似的解决方案。

找出重复使用界面组件的方法。

在不同的地方重复使用组件有两个优点：

较少的开发时间，在用户使用应用的时候保证界面的一致性。

如果用户学会了如何去完成一个操作，他们会一如既往的用同样的行为去进行另一次的操作。

在设计一个CMS系统的时候，我们花掉大量的时间去完善表单验证。

我们用红色字符标示出错误，并且加入红色的验证气泡标识出有多少错误在每一个表单里面。

在此之后，一个比较功能被添加到了需求列表里边。

我们创造的是一个验证框架，而并不是创造一个新的机制。

表单改变后会用蓝色标识出，并且我们用蓝色气泡统计出所有的改变。

这样我们可以快速的开始开发，让用户能更快的学会使用它。

重用界面组件是另一个视觉复杂程度的办法因为用户会很快熟悉它并且知道自己接下来的操作会是怎样的。

不应该是空白的空白状态

空白状态是指界面里边没有任何信息显示，比如有人第一次使用这个应用的时候。

作为设计师我们要花大量的时间去想出怎么把界面做的更好看，同时又常常忘记内容根本不会永远存在。

建立好合适的默认状态是非常重要的。

空白状态往往是人们对这个产品的第一印象是他们是否要使用这个应用的决定性因素。

一个好的空白状态如同一个引导系统，帮助用户完成最初的操作步骤。

显然，Versions（一个Mac的SVN客户端）的工作人员在程序的空白状态上花了不少的心思。

该程序突出的强调了用户第一使用它的时候可能用到的功能和操作。

再次强调下：

别忘记了空白状态哦！

案例

我们做了很多混乱而复杂的软件。

仅仅是降低程序的复杂程度就已经很难了。

我们只出色的完成了很少数的一些程序。

InvoiceMachine是其中一个最简洁的用户界面。

这是一款典型的能够表达出精简以及非常注重细节的一个例子。

Freckle可以让你好好的控制你自己的行程安排。

方便快捷的界面以及明快的颜色，让日常工作变得更加的愉快。

ImageSpark使用了光滑的黑色和白色的渐变以及简单的立体效果。

整个界面只有一点点交互，操作起来很简单。

Ballpark拥有清晰的控制面板和整洁的界面，在用色方面也非常的简单。

Krop的精髓是在它的两个可输入文本域：

地点和关键字。

它只需要5秒钟就能找到你想要的招聘信息。

Fever的主要用途是用来减少你和你敢兴趣的博客文章之间的障碍。

它通过简单，独一无二的界面做到了这点。

Screenr是一个出奇的简单的录制屏幕录像并且发送到Twitter的工具。

值得注意的是不是所有的功能它都有，但是它也根本没什么功能。

Squarespace是隐藏复杂性做的很好的一个例子。

然而它是一个全功能的Web发布平台，它的力量隐藏在一个简单的用户界面背后令人印象深刻。

结语

首先，通过减少不必要的功能然后隐藏掉不能减去的功能来降低功能上的复杂程度。

其次，通过减少视觉干扰以及重用组件来降低感官上的复杂程度。

最后，用空白状态来引导用户。

在界面中降低复杂程度可以帮助用户更快的、更有效的以及非常愉快的学会使用你的客户端。

就像爵士音乐家CharlesMingus说的：

“让简单变复杂很正常；让复杂变简单，变得非常简单，那叫创造力。

”