最近进行专业实训做 Android 项目的时候，我开始对「所见即所得（英文缩写为 WYSIWYG）」的交互开始感兴趣起来。「所见即所得」是这样一种状态：你在屏幕上看到的，就是结果。比如我喜欢用 Typora 来写 markdown 文章，原因就是它的界面采用了「所见即所得」的方式：
Typora 的使用界面
在 Typora 上，你打过的每一个字都会立即成为 HTML 格式化后的样子。相比起传统 markdown 编辑器左右分栏的显示方式，它既不影响编辑，又方便了查看。
这种狭义上的「所见即所得」是传统计算机文字编辑技术方面的概念，它还有一层广义上的含义。比如现在许多常用软件的设置项都是自动保存的，一个复选框，直接点击勾选即可设置，不需要再「保存」或是「应用」；还比如有许多编辑软件不需要退出前询问是否保存，直接关闭就可以了，因为用户每做一次改变后它都会存盘。这也是一种所见即所得。用户不需要考虑那么多，保存设置或编辑以后应该是什么样子直接呈现出来就好。
而在 UI 和交互上，我认为所见即所得就是一个视图应该在正确的场合显示出正确的样貌。在网页上，如果浏览的人没有将鼠标 hover 到超链接上的时候，那它就不要显示下划线，仅仅是用一个特殊颜色标识但保持和文段中其他文字相同的格式就好。手机滚动视图一侧的滚动条，只有在滚动的时候才要去显示滚动到了什么位置，而用户正常阅读时就隐去，把焦点放在内容上。
这些我觉得都是非常好的例子，我在设计和开发 app 时也会尽量把这一设计准则运用到其中。比方说我们在做一款运动 app 时，有一个设置计时开始跑步的界面，大致是这个样子，还没做完：
App 的设置计时视图
注意看这个计时选择的视图，它在一开始就是一个普通的 00'00"，但当用户去点击这个视图想要设置时间时发现这个时间原来是一个滚轮选择器，这样用户就可以用滑动滚轮的方式去设置时间。当设置完毕时，滚轮又变回到普通的时间文字。这样的交互就很符合我在上文中提到的准则：它原本就是一个显示用户当前设置的计时的视图，当用户触摸这个视图时，它变成滚轮选择器指示用户这个是可以通过滚动来改变值的。出于设计上的考虑，在这个界面真的放一个滚轮会遮挡后方的背景，使视觉效果大打折扣。相反地，使用合适的控件在适当的时机显示正确的画面，才会有优良的视觉感受和交互体验。这就是我在做开发中所体会到的。
如果大家看了这样的示例、听了我的一番理论以后觉得有点新奇，仔细考虑后认为确有合理之处，我也已经把这个滚轮控件开源，大家可以亲自试一试：HiddenWheelView，也欢迎大家 star 和 fork。^_^ 希望各位开发者今后也可以尝试将这种设计理念运用到自己的产品中，相信它会给产品带来新意，给用户以舒适的使用体验。
网友评论