※ [本文转录自 AndroidDev 看板 #1K74LEqe ]
作者: dementia (妖精尾巴魔导士) 看板: AndroidDev
标题: [分享] 好UI烂UI大车拼01 不是平面风就是好设计
时间: Fri Sep 19 23:01:25 2014
网志好读版：
http://thisblogexist.pixnet.net/blog/post/106801865
~ ~ ~ 本文开始 ~ ~ ~
随着APP市场的白热化，UI、UX日渐受到厂商重视。什么是好UI呢？
小知识
UI：使用者接口（user interface）
UX：使用者经验（user experience）
UX比UI抽象，含盖的层面也更广泛。一个好的UI大约具有以下要素：
1. 简单易懂：占1/3
2. 操作流畅：占1/3
3. 美观大方：占1/3
所以说，如果把UI交给美工，运气不好的话只能拿到1/3的“分数”。好的UI
与UX绝对不等同于好的美工，却仍有很多人误以为只要把UI交给美工弄弄就可
以了－－千万不要再这样想囉！
糟糕案例1号：以为做了平面简约的风格就是好UI
接下来就让我们看真实案例。
由于案例有好几个，内容很多，我不会一次写完，如果您在读完后觉得喜欢，
请您耐心等待续集。
每一个案例中当然都有好的部分和糟糕的部分，而且平心而论，这些APP的UI
都有一定水准，比那些“不想下载”和“才开启就想关掉”的那些强太多了。
APP资讯
APP名称：高效Todo(备忘 提醒 日程 记事)
版本资讯：5.3.0
这个APP的点子非常好！也许是一个还很新的APP，有潜力，如果UI能改善的话
应该会有更多人使用。
让我们先看看首页：
http://pic.pimg.tw/thisblogexist/1411129216-279528542.png
很多厂商或开发者都会把“新增”按键或重要的按钮置于右上角，大概是因为
右上角很空吧！
那绝对不是个好位置！
就因为那不是好位置，所以才容易空出来。从视觉上来说，最佳位置是左上角
，这也是为什么LOGO通常会放左上角的缘故。从操作上来说，虽然每一种尺寸
的手机略有不同，但都在中间以下。
由于一开始不容易注意到“新增”钮，连带着可能会让使用者在中间乱点乱画
，于是使用者就看到－－放大了！
http://pic.pimg.tw/thisblogexist/1411129217-486137811.png
炫爆啦！！
不幸的是炫和好是两码子事。
现在的手机普遍在5吋以上，分辨率更是越做越高，其实不用放大就已经很清
晰。如果不是特别为银发族设计，切换大小的意义在哪里呢？
这时候你可能注意到，右上角有一个不太确定是柜子还是幸运草的图，也可能
没注意到。
如果你没注意到，那就回不去了。
为什么会注意不到呢？位置是原因，另一个问题是色彩。“新增”键是蓝的，
左边都是灰的，因此使用者直觉上会产生两种解释：解释一，蓝色是按钮，灰
色是普通文字；解释二，蓝色是普通文字，灰色是按钮。
在这里，蓝色比较醒目，因此比较容易被解释成按钮。
于是你终于发现了这颗重要的按钮，你点了一下“新增”，终于，进入了你想
要的页面。
http://pic.pimg.tw/thisblogexist/1411135336-2148168492.png
接下来你茫然了。尽管这些图示感觉都很熟悉，在其他地方都有见过，但是在
目前的脉络下代表什么意思？不知道。好吧，先点点看再说吧。
有些功能在点下去后，就能知道是做什么的；有些功能在点下去后－－请借我
使用说明书。
工具类APP在“新增”页面最需要下功夫，好让使用者顺利输入既多又杂的项
目，但实际的情况是，厂商或开发者倾向于把UI弄得很乱，似乎全世界有只有
自己看得懂。
请看上面这张图。同样是按钮，字体有大有小：有些是白底黑字的，有些是灰
的；有些长，有些短；有些从上方依序往下排，有些置底，这样不规则的版面
当使用者来逛菜市场的吗？
最后让我们来试一下后台：
http://pic.pimg.tw/thisblogexist/1411129258-1079611213.png
首先，这里再次出现了“不一致按钮”的问题。你可能跟我一样，觉得四块发
亮的浅蓝色应该是纯文字表单，不，那是按钮。
再来，是个有趣的东西，我称之为“藏镜人”，因为它藏在后台里面，好像后
台住了一位藏镜人。
唉呀！看来你也发现了，在这个后台接口有个长得很像后台的符号－－点进去
还真的是一个后台！不对，应该说，那才是真正的后台。不愧是“藏镜人”！
本篇完。请耐心等候续集……