泰晓科技 -- 聚焦嵌入式 Linux - 追本溯源,见微知著!
网站地址:http://tinylab.org
微信公众号关注我们新浪微博


扫一扫

关注 @泰晓科技
赞助泰晓原创 ○ 在线实验Linux ○ 下载开源书籍
请稍侯

移动终端 UI 设计新思路:从图形界面回归“命令行”?

Chen Jie 创作于 2014/09/02

by Chen Jie of TinyLab.org 2014/09/01

前言

曾经有一个笑话调侃 GNU手机,“GNU Phone最牛逼的地方是完全用命令行操作…”

不过,有这样一种说法,叫做命令行操作比图形界面效率高许多。例如,在写本文时,正在使用 vi 而非一款图形文本编辑器。即便在图形化非常易用的 os x 上,命令行操作仍然非常有魅力。

那么,移动终端用上高效的“命令行”界面如何?也许不是那么无厘头。首先让我们看看命令行操作是怎样过渡到了图形界面。

从命令行到图形界面

命令行操作最头疼的大概是需要学习其用法。例如,使用不熟悉的命令,通常需要召唤 man/info,要不就问 --help。对于命令行用法的学习,可以分成几个方面:

  • 了解每个参数的含义。

  • 了解参数间的关系-参数间的互斥和依赖。对于交互式的命令行界面而言,参数还可能与当前会话的上下文有关。

进入到图形界面时代后,参数化身图形控件,布局在平面上。同时,参数间、参数和上下文间关系也进行图形化表达,例如多选一关系用 “radio button” 来表示。从某种角度上说,图形界面是用交互式图形化方法,来说明用法。

来看下面一个图,展现的是图形编程中的MVC概念: image

MVC 概念似乎有诸多解释。此处解释参见幻灯“Adobe Source Libraries Overview & Philosophy, p54”。另,此处图示也基于幻灯中相应图例。

再来看上图,用户(User)通过控制器(Controller)来扰动模型(Model),最后产生一组符合模型(Model)约束的参数(Params)传给程序,程序处理后更新视图(View)。例如下图是一个图像处理软件的缩放对话框 – 用户可以指定宽度和高度,通过指定像素或是原始宽/高的百分比。用户还可以选择是否维持当前的宽高比。

image

在此对话框中,用户比如输入新的宽度为1382像素。该输入通过控制器(Controller)触发事件,在事件响应中,各参数按照模型(Model)约束被重新计算:

  • 新的宽度值(按照像素计算):1382(用户直接输入值)

  • 新宽度百分比(与图片原始宽度相比):1382 / 2304 * 100% = 60%

  • 新的高度值(按照像素计算):由于维持宽高比参数为False,故保持不变

  • 新高度百分比(与图片原始高度相比):由于新的高度值维持不变,故保持不变

模型确保参数有效,当缩放程序收到此组有效参数后,生成缩放预览,并更新视图(View)。

新思路:从图形界面到”命令行”?

如前述,图形界面可以看作一个交互式图形化表达的用法说明。因此使用图形界面时,首先是进行学习认知,例如一扫界面元素来寻找感兴趣的操作。这种“遍历寻找”的操作很繁琐,例如在旅途中寻找住所,通常我是这样做的:

  • 找到并打开“去哪儿”图标,开始与去哪儿App 的会话

  • 找到酒店一页,选择酒店搜索

  • 填写入住城市(输入法)、填写关键字(选择提示选项,或者用输入法输入一个)、填写入住和退房日期(日期控件来选择)

  • 然后点击搜索,然后选择,下订单…

这种交互还可能中断用户的思路,因为需要认知界面,需要按照界面的套路来交互,最后用户忘了要操作个啥来着的…

如果有命令行,我查找住店只要打开“去哪儿”,然后输入“住北京 9-2/1 鸟巢”,就可以搜索了。再进一步,我们可以通过自然语言来下达命令,例如“请列出北京鸟巢附近酒店,9月2日入住,住一天”。

你可能会说现在已有许多像Siri这样的助手了,这个idea有什么不同?这个不同在于这是一种UI新思路,所有App都有命令行来进行对话。换句话说,App的UI界面产生了重大变化,界面元素被大幅简化,并使用云或者本地的语音和语义引擎来处理自然语言的命令。再换句话说,用户只是在和App对话 —— 这是一种即时通讯风格的界面。

说到这,你也许想问为啥要在标题强调“移动终端”呢?因为这对移动终端更有意义:

  • 移动终端屏幕有限,因此需要更多分页来组织图形界面元素,于是操作变得很深

  • 移动终端使用环境复杂,用户注意力较为分散,图形界面元素太多太深很容易分神

  • 即时通讯方式对于移动终端而言,更加自然

  • 移动终端的App开发需求很多,而即时通讯风格的界面较为统一,易于通用化,这意味着可以利用通用组件来快速开发界面。微信订阅号即是这样一个例子:许多小店,没有自己的App,却有微信订阅号。

小结

当前移动终端特别是手机界面,不是苹果的图标style,就是 Win8 的磁贴style。而本文所介绍的即时通讯风格 style不同于前两者,它现在已经被申请了专利(申请号:2013104120050),一个原始粗糙的设想图如下:

image

Read More: