交互设计基本功!5个值得学习的APP交互方式

图1 Opera Coast的下拉搜索

图2 Flickr的下拉搜索

二、登录验证帐号

代表应用：印象笔记

通常的登录和注册是分开设计的，而印象笔记将登录和注册整合，每一步骤都只有一个表单，注册和登录没有任何冲突。这样避免了”用户已存在”然后又要重新填写表单的不良体验，在流程上有很大的优化，如下图4所示：

图3 印象笔记

图4 印象笔记的登录流程优化三、未激活按钮的设计

代表应用：snapchat

交互设计中有个叫做”预设用途”的原则，大意就是一个界面或者控件，要让用户一看见它就知道如何使用。显然，最基本的要求就是至少要能知道这个控件可否操作，而所谓”未激活的按钮”就是含有”激活”和”未激活”两种状态而目前处于”未激活”状态的按钮，这就要求分别对两种状态进行设计。通常来说，有两种方法，隐藏或呈不可操作的视觉效果（比如灰色），比如snapchat的表单填写界面，当表单尚未填写完全时，CONT INUE按钮一直处于灰色状态，即告诉用户该按钮尚未激活。读到这里你或许会觉得这其实很简单嘛，但只要你仔细观察一下，就会发现有很多的应用没有这样设计。

图5 snapchat的表单

四、输入框title或提示文本的解决方案

代表应用：dubble

通常设计输入框时，我们会使用Lable标签给每个输入框一个title，比如”用户名”、”密码”，另外，还会在输入框中使用灰色的提示文本，如图6所示。但是，在手持设备的应用中，这样的设计会产生两个问题，一是浪费屏幕空间，我们知道，手持设备的屏幕空间是很宝贵的,而以Lable标签呈现

的title会占去很大一块屏幕空间；二是提示文本在用户输入时便消失不见，提示效果无法持续到任务结束。那么，如何解决这两个问题呢，如下图7所示，在用户输入时将title移至输入框边框中，或者像dubble应用的注册界面，把输入框的提示文本移动到键盘上面，如图8所示：

图6 通常情况下的输入框设计

图7 将title移至输入框边框

图8 dubble的输入框提示文本