闲扯几句图形界面的设计

前段时间在微薄上对 windows 以及 vc 发牢骚。对于已经熟悉的软件，我很难忍受图形界面。

但图形界面对于大多数用户还是必不可少的，学习门槛低是最大的原因。但仅仅为降低学习门槛为原则去设计界面却绝对不是好的设计。

图形界面和命令行界面最大的区别是用户了解软件的角度不同。对于命令行界面的软件，用户的第一直觉大约是，我想做一件事情，所以我使用(或编写)这个软件。那么，这个软件应该如何达到我的目的。先有需求，然后寻找答案。通常，软件会有使用说明、可能和软件一起分发放在一个文本文件里，更多的是用命令行参数，传入一个 -h 之类的命令列出来。也可以在网上搜索。总之，需要用户去挖掘。当然，有的软件有所有默认配置，不需要参数就可以启动。如果更改了需求，可以去修改配置文件。修改配置文件的过程，往往可以通过观察默认配置的写法来学习。

图形界面的软件则不是这样。

当用户打开软件，图形界面直接展现出来。即使他是带着疑问：我该怎样完成我的需求？但看到界面后，第一反应却会是：那些第一眼直观可见的操作控件是做什么用的？

这个次序就变成了：我看见了一些功能，我想了解这些功能能达到什么目的，这些能做的事情里是否有我需要的。

如果按钮无害，用户会点点试试看发生了什么，现代软件通常还会在他鼠标移动过去时浮动一个提示框来做详细告之。受过往操作经验的影响，他可能还会按一下右键看一下右键菜单；拖动一下看起来可以拖动的控件；点一下可以点的下拉菜单；进一步学习软件能做什么。整个学习过程也就自然完成了。当软件的界面排布完全符合他以前用过的类似品时，这个过程可能省略到看一眼这么简短，然后直奔主题去点击他需要的那个按钮。

有时为了让用户可以直达目的，而不是先让用户自行尝试了解所有功能，再去匹配自己的需求（后者可能相当低效，以至于让用户中途放弃），软件需要制作一个简短的新手引导。这在最近的手机软件或网络游戏中相当常见。

在我看来，图形界面设计之所以被称为设计。必然需要经过思考，先将软件要解决的问题抽象分类，理清数据组织结构，帮用户把一些从用户角度看起来不太相关的事务提取出共性，归纳到类似的物件上。

比如 windows 把文件，文件夹等都图形实体化，然后用拖动来代表对其的操作，并把类似删除这种操作也实物化为垃圾站这种东西可以作为一个操作对象。

然后经过合理的布局和分类，排布到不同层级的界面展示。同时需要做一些创造，用恰当的形式来占现。我所说的形式，并不指更漂亮的图标，线框，字体；而是指类似弹出菜单，工具条这样的东西。在 windows 软件的年代，开发者似乎并不太愿意去考虑新形式，许多人觉得现有的控件已经很丰富了，我们只需要去选择。反正用户都已经接受了这些东西，他们熟悉，可以不用担心不一样的东西带来的风险。当然，最重要的是，可以减少开发成本。而最近几年，这种想法已经少的多了。在手机 app 领域，我们时常能看到耳目一新的东西。虽然弄巧成拙的也有不少，但，原来还可以这样方便的操作啊，这种感慨也挺多的。

这些才是设计师存在的价值。只是重新排布一下按钮的摆放、计算一下留白空间、选择好看的字体、画几个精美的图标，从视觉上讨好用户，只是界面设计中需要考虑一个方面而已，我觉得，甚至谈不上是重要的一个。

好的界面设计，我认为要考虑以下几个方面。

一是展示功能。主界面是否能展示软件解决的关键问题。用户都是从这里开始摸索软件，然后把他们看到的功能一一记下来，然后和自己心中的疑问去匹配，判断能否完成自己的需要。

一个软件，或是软件中一个模块。往往只需要解决一两个关键需求。用户心中的疑问也只有一两个。过多的功能堆砌都是不恰当的。因为接受用户的指令只是达成目的的一个开始环节，界面还需要承担信息反馈这个任务。大多数软件都需要让这个占据最大的屏幕空间。

从易于了解功能的角度讲，界面控件的可辨识程度，就相当重要。简洁的控件设计，恰当的留白以突出主要功能都是为了让用户视觉上可以直击我们需要引导让他看到东西。

二是操作效率。界面控件应该有合适的大小和间距易于定位，相关操作应有尽量短的移动距离。用图标区分相似元素的可辨识度是很重要的。合适的二级菜单可以避免主界面上信息量过大的问题，又可以方便的引导用户做多步操作，但是形式却很重要。这方面，我觉得 tweetbot 就做的不错。

三是高级操作带来的快捷操作。chrome 以前，我一直在用 opera 。最大的喜爱原因就是鼠标手势。虽然不是所有人都习惯复杂的鼠标手势，但一旦学会，可以更便捷的操作。高级操作形式不应是达成目的的唯一操作方法，但作为一个可选项却很有意义。

最后，我觉得最重要的是，应该充分理解软件是要做什么，而不是一味的模仿。没错，用户总希望新的软件和他用过的软件是一样的，这样就不用再学习。用户习惯什么的，是那些模仿设计最好的借口。直到我们看到新的设计被用户接受后，然后更新我们的界面。当然，也有很多新设计从始至终都没被人接受。我觉得那大多数不是因为扭曲了用户习惯，而是本身就设计的不够好。

比如，我认为 QQ 的好友分组展现就是一个糟糕的设计。当然，作为山寨软件之王，那也是从 MSN 里抄来的。

最糟糕之处在于，为什么一个好友就只能存在于一个组里？（或许是我不知道如何把一个好友分到多个组里）我的同学最近在和我一起打魔兽，因为这个原因，我就需要把他从同学分组里拖去魔兽组？

每个分组的组名都占据有限的界面空间也是一个浪费。更何况，这个组里有多少人，且其中多少人在线根本不是主要需要展现的信息，也侵占了屏幕。打开主界面，用户的主要目的是快速找到联系人，而不是独自欣赏：我有好多朋友啊。

假设允许同一个人在不同分组里也有许多问题。

首先，分组这个操作就变得复杂了。到底是复制一个好友去一个分组，还是移动一个好友到一个分组就会困扰用户。删除好友和从一个分组里删除好友也变得不同。网易泡泡就曾经面临这个问题。其结果就是，让各种无所谓的操作充斥着右键菜单。另外，当一个人同时处于多个组内，也很可能在主界面上重复出现同一个人的信息。

这个问题的本质在哪里？或许分组本身就是错误的。分组的本意或许是想借鉴 Windows 的文件夹的图形抽象方式，但一开始就错了。大多数分组行为是为了给人打上标签方便找到人，而不是让人归属到文件夹下。抽象角度出了问题，怎么改良都对不了。

现代社交网站乎都是用给人打标签来解决这个问题的。一个人可以没有，或有多个标签。大多数操作都是围绕人而不是标签的。标签只是检索人的一个手段而已。其实不光是社交网站，我们看到，在 gmail 这样的 email 软件、douban 这样的管理自己读书电影评论网站中，也是如此。

假设用标签系统来取代好友分组系统，我会这样去做。

在界面的顶端保留一条标签栏，横向罗列现在关注的标签。我可以展开这个标签栏，展示我创建的所有标签，并可以通过鼠标点击选择或屏蔽掉我的关注点。然后，在界面下方列出所有拥有至少一个关注标签的好友。我可以通过直接点击标签栏中某个特定标签把相关人排在最前面，而不用因为人员名单过长而去拉动滚动条。甚至，滚动条都应该是隐藏的，就如 gtalk 那样，必须用户强制开启。

给好友打标签或去掉标签的操作都放在好友下方，可以点击好友名字展开（类似 tweetbot) 。

我不保证这样的设计一定会被用户接受，因为用户习惯往往是可怕的固执。但这样的设计可以节省许多界面空间以展示更多用户需要的信息。对组的操作也被简化了。

我能找到的另一个例子是计算器。我有点计算器 app 控，在 ios 上购买或免费下载了许多计算器 app 了。计算器的功能其实都差不多，但是却少有让人使用感觉方便的。

我觉得这个坏头是 windows 自带计算机开始的。他区分了基本计算器和科学计算等。结果大多数计算器 app 也沿袭了这个设计（当然，几乎所有 app 也想到，可以利用重力感应横置设备来快速切换，而不用再让用户选菜单了）。且几乎所有的计算机 app 都模仿了传统实物计算器的布局。

区分不同类型的计算器版面的初衷或许是好的。如果界面按钮过多，或降低用户的操作效率。因为按钮越少越密集，定位的难度就越高。当用户没有那么多功能需求时，应该让界面更简洁。但这真是矛盾不可解决的吗？

许多计算机 app 还自带单位转换器，可惜多数却做成一个额外的模式。可为什么我需要切换模式去转换单位？不应该是计算完毕后，我需要数字结果的另一种表达吗？

同样的问题还出在进制转换等等需求上。

现代图形界面还带来了比传统计算器液晶显示屏更丰富的展示能力，cpu 的处理能力也远非那些机器可比。怎么用好它却是一个难题。

我不想在这里花太多文字来解释怎么把这些问题解决好。我想说，如果你用过 Calculator∞ 自然会和我有一些新的想法。我可以负责任的说，作为一个计算器 app 控，我用了它的免费版第一天就毫不犹豫的付费了。而在昨天我在微薄上夸了它两句，它居然就限免了。有兴趣的同学赶紧装一个试试。

文章来源：http://blog.codingnow.com

标签： 产品设计 交互设计 图形设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。