IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

长选项表单元素的移动交互设计

老邓态度 2012-05-02 23:49:21 累计浏览 2,199 次
本机暂存

    在处理一个很多选择项的表单元素时,网站设计师可以用Select控件轻松解决,如果选项实在太多,顶多用个弹出层。而手机由于屏幕空间有限,这时的交互设计就不那么简单了,像网站那样的Select和弹层的表现,常常不太适用。所以很多设计师会把选项内容放到另一个独立页面,引导用户转场到这个页面去完成选择并转场回来。

    转场意味着空间的变化,在交互设计中,这是易用性的大敌之一,移动交互设计中更是如此。手机的交互空间狭小,频繁的转场很容易让用户感到迷失,即便不迷失,也会影响其操纵感。WinPhone的交互设计就有这个问题。如果一个表单,有三五个长Select,在WinPhone上,点击提交表单按钮之前,用户可能就已经被那些Select导致的转场转晕了。

    其实iPhone在这个问题上有特别好的解决方案,苹果的交互设计天才,充分利用移动交互设计的独特优势——支持触摸和手势——来解决这个问题。解决方案就是PickView控件,也叫滚轮选取器,如下图所示。这是iPhone众多交互设计创新中耀眼的明星,滚轮占了屏幕的一部分,但用户并不需要转场,直接在当前页面,用手指转动滚轮就可以完成长选项的选择,出色的物理隐喻让用户一看就明白了该怎么操作。用户测试表明,即便是第一次使用iPhone的人在面对PickView这个新事物时,也能很容易地理解和操作。

    原图已失效

    由于滚轮可以有多个并列,所以它还能够很轻松地处理好多个互相关联的Select项的交互,比如年月日三个并列滚轮。

    Android在其4.0之前的版本,并没有类似的控件,但在4.0时,也增加了一个叫Picker的控件。如下图所示。

    原图已失效

    像酒店预订这类的APP,用户使用中经常要面对长选项表单元素,比如“选择城市”、“选择位置”,我们之前版本的交互方式是引导到独立页面。在这次“米途订酒店”更新的Android 3.0版中,我们把iPhone的PickerView控件借鉴进了Android,用户的掌控感更强了,体验明显提升。下图是改进前后的对比。

    原图已失效

    销售无第二,设计无第一。设计上总是仁者见仁,智者见智。我们的这种嫁接式交互方案,可能存在争议,不见得大家都认同。文章仅供大家参考,欢迎大家下载米途Android新版,并拍砖。

同分类推荐文章

  1. 「置顶」我做了什么 (2026-05-05 12:13:28)
  2. 万字长文推演:手机不再从 App 开始,Agent OS 如何接管任务入口 (2026-04-28 14:57:22)
  3. Android Perfetto 系列 10 - Binder 调度与锁竞争 (2025-11-16 15:33:30)

查看更多 移动开发 文章 →

建议继续学习

  1. 【社会化设计】自我(self)部分――欢迎区(welcome area) (累计阅读 16,831)
  2. 404~遇见你是最美丽的错误 (累计阅读 9,351)
  3. Web表单设计之注册表单 (累计阅读 8,880)
  4. App的成本 (累计阅读 7,584)
  5. 用色彩打造专业的视觉效果 (累计阅读 7,235)
  6. 在 Mac OS X 终端里使用 Solarized 配色方案 (累计阅读 6,150)
  7. 为什么要段首空两格 (累计阅读 5,952)
  8. 产品用户体验质量的模糊评价(2)――层次分析法 (累计阅读 5,487)
  9. 在程序员的眼里,用户是这样使用他们开发的软件的 (累计阅读 4,927)
  10. 产品细节、用户体验和学习的态度 (累计阅读 4,725)