这个系列主要展示一下我的毕业设计：Draware Mobile UI。
这一篇focus在前期的设计，包括icon，交互等等。
一：概念的产生。
概念是在一天晚上睡觉的时候产生的。当时想，像iphone那样那么多的应用放在一起，用户在操作的过程中会不会不太方便，一个页面上有十多个icon，寻找一个icon会花费一些时间，甚至用户所需要的应用会在下一页上（iphone换页的交互方式是拖拉页面边缘）。如果有一种交互方式能让用户不需要选择就直接到达应用，那会大大提高易用性和可用性。
这种交互方式未来会有多种解决方式，以现在的无线技术发展前沿来看，context-aware（基于上下文的感知）、gesture recognition（捕捉手势，葡萄牙学者研究的方向： The current feasibility of gesture recognition for a smartphone using JEME. New York）等，都能为这种交互方式提供可能性。而我在那天晚上想到的是用手指在屏幕上画，画那些经抽象icon后得到的图像，然后页面就跳转到用户想去的地方。
这实际上是关乎于信息显示的方式。现在大多数手机都是将所有应用的icon放在主页上，然后让用户来完成判断、选择的过程，从而过滤出用户想点击的图标。
直接把应用显示在主页上，让用户完成判断、选择的过程：
用户输入信息，系统来完成过滤和映射的过程：
如果能够让系统自己来完成判断、过滤的过程，用户只需要输入指令，就能到达相应的页面，这无疑就省去了很多步骤。要让系统具有这种特性，有两个关键元素，一个是过滤条件：用户画什么？一个是映射关系：用户画出的东西怎么应对手机应用。
二：icon的设计
前面的概念提到，这种新的交互是用户在屏幕上画出icon抽象后的图像。于是Draware的icon的设计就需要满足：
- 线条化，很简单，容易抽象出来
- 辨识度高，最好能用户一看就知道是什么
- 容易记住或者学习，用户在使用过几次之后就能熟记icon抽象出的图像。
在满足这三点的情况下，设计了一组icon和它所对应的图像。
在项目后期，我还延伸了这种交互。手机上一个通话的icon是链到通话记录和拨号两个页面的，在用户画出图像之后，系统有一个缓冲时间（一秒左右），用户在这个时候可以进行第二次操作来选择具体要去哪个页面。同理应用于短信页面和写短信页面、拍照页面和相片库页面、摄像页面和视频库页面等。
其实Draware项目对于这种新交互方式的探索只是刚刚开始，抽象图标后的图像并不是用户在屏幕上去画的最佳方案，在我的预想中，一个语义强烈的动作会是很好的图像，比如说在日常生活中打开信件的动作，应用于短信的图像上。下面这个图大致的显示了图像演变的过程：
下一篇预告，具体页面的设计。包括视觉的细节和页面具体的交互。
5 Comments
赞一下，不过icon交互那块我觉得过度设计了
解释下：过度设计
本身draware这种行为映射，语义同化的想法很好。
但是仔细看图上手和icon的比例，实际上一个手指头就覆盖住了整个icon，手指一放下去已经把图标盖住了。（没看到视频，我判断失误）这后续的细节操作就显得很多余。另外可行性和可用性上也出现了问题。精确度要求更高了，把一个icon分成了两个感应区域，也就是分到了两个控件上，还增加了制作复杂度。drag&drop增加了用户操作复杂度。
仔细再抽象一下，实际上这个概念就是，第一下 focus，第二下enter。在windows上为单击和双击的差别，在普通按键手机上，靠方向键＋enter键分为两步。单击选中，双击打开，而 drag&drop进行拖动。（我比较赞赏这种设计，因为真正做到了没有东西可以再减）。所以我觉得一定得看一下《designing interaction》，看看第一代GUI OS——STAR，设计这些交互原型的原因。（第一章就是介绍鼠标，为什么要用鼠标？很大程度上就是为了精确度，单点控制，【而触摸屏的技术则叫做多点触摸】）
这里就可以发现触摸操作和鼠标操作的考虑模式就不同了，这个icon的交互行为实际上是对鼠标精确操作中的drag&drop与我们日常操作行为进行了拼合，嫁接到了手指触摸这种模糊操作。这个地方如果进行简单的移植，而不重新思考和定义细节（从部件的感应域，到触发事件，到交互行为，到回馈都要重新定义，所以要做交互一定要学前端开发），就会出现这种过度设计。
（插播：我自己设计的过程中，基本不会用drag&drop这种行为进行开关、选择性质的操作，这种行为我觉得是专门适用于定位和组织的，比如我以前介绍过的iamlin的这个实验性个站，我觉得它这个实验立意太浅了，开题的角度和应用都没有学弟的draware有深度，因为学弟在icon的操作上已经做到了语义同化。关于drag&drop我在交互的两个方向中详细介绍过我的观点。）
“下一篇预告，具体页面的设计。包括视觉的细节和页面具体的交互。”——这篇在哪里？