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

手机客户端产品的三种交互实现

闹玩 2009-11-26 22:22:08 累计浏览 3,103 次
本机暂存

    手机的优点是小,便于随身携带;手机的缺点是小,产品设计空间有限。这在之前的手机产品布局中已经提到。在确定了产品布局之后,另一个重要的设计考虑是产品和用户的交互操作。

    在一些交互较少的产品中,如手机阅读软件,交互不是设计上的难题,通过少数链接甚至手机的固有按键就可以实现交互操作。但在一些交互频繁、操作多样的产品中,如何在小小的手机屏幕上实现这些交互操作就是一个问题了。

    下面就以几款常见并且需要复杂交互操作的产品为例,分析不同交互需求下的不同的解决方案。

手机软件三种不同交互需求的实现方式

手机软件三种不同交互需求的实现方式

    一、完全暴露型的交互实现

    最自然的交互实现是“完全暴露型”,即把主要的交互功能、用户操作都展现在产品界面中。这种设计在很多产品中都可以看到,用户可以直观的看到这些操作的入口,选择想要的操作。

    在手机QQ2009的发送界面中,添加表情、常用语、传递语音等功能以图片按钮的形式排列在输入框下面,这种设计和QQ桌面产品的形式一致,符合用户使用习惯,用户也很容易操作。

    在12580客户端中,商户页面的几个主要功能,如地图、去这里、从这走、转发等功能排列在用户的基本信息下面,很直观,这种“按钮型布局”也比较美观、合理。

手机QQ和12580中的一些主要操作按钮直接展现在产品中

手机QQ和12580中的一些主要操作按钮直接展现在产品中

    二、合而为一型的交互实现

    完全暴露型的缺点是需要占据较多的空间(虽然这并不总是缺点),当需要安排的操作较多时,或者需要保持界面的简洁时,就需要把这些暴露的功能隐蔽起来。无论在桌面产品(如MS Office)还是手机软件(如手机Gmail)中,通过“菜单”的形式将多个交互操作合而为一是经常采用的做法。

    手机Gmail的收件箱界面很简洁(和Web产品相似),所有信件从上到下排列开来。手机Gmail将邮件中的常用功能,如打开信件,转发,撰写,搜索邮件等功能合并在左下角的“菜单”选项中,当通过左软键选择“菜单”时,会在手机屏幕正中弹出操作列表。而且,由于菜单的灵活性,一些功能相似的功能,还可以列入二级菜单中。

手机Gmail通过菜单统一所有当前页面的相关功能

手机Gmail通过菜单统一所有当前页面的相关功能

    三、随需而现型的交互实现

    在手机Gmail中,收件箱中每封信的操作都完全相同,此时,通过菜单可以实现合二为一。但是,如果一个页面中多个条目需要对应不同的操作,或者菜单已经被其他功能占用,无法容纳更多操作,此时该如何设计呢?

    一个灵活的实现方式是“随需而现”。也就是说,产品中并不展现各种交互操作的入口(如按钮或链接或菜单),当需要交互的时候,通过点击相应的内容再弹出对应的操作选项。

    在手机QQ、手机MSN、手机飞信中,都有类似的操作,我们不想以这些聊天工具为例。这里,我们选用了人人网最新发布的手机客户端产品为分析对象。人人网客户端实现了人人网Web产品中的绝大多数交互操作,如查看/回复/发表日志、查看/回复/发表留言、查看好友个人主页、发站内信、同意好友申请等。SNS的产品本身交互操作就很多,所以,将这些功能在一款产品中实现,如果组织不好,势必非常复杂,操作不便。

    在人人网客户端中,将这些功能各异的操作通过“点击-功能列表-选择”的方式实现,选择这种设计保证了界面的整洁,能够让用户把注意力集中在最关键的内容上,当需要时再进行对应的操作。

手机人人2009中,点击不同内容弹出不同操作

手机人人2009中,点击不同内容弹出不同操作

同分类推荐文章

  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. 视觉设计师应该略懂交互 (累计阅读 6,086)
  2. 深度解读网站用户体验三要素(3):别让我烦 (累计阅读 5,645)
  3. 这些反人类设计,你肯定也碰到过 (累计阅读 5,629)
  4. 行进在产品经理的路上 (累计阅读 5,040)
  5. 《部落冲突》的设计 (累计阅读 5,044)
  6. 那么明显,为什么用户看不见? (累计阅读 4,106)
  7. AXURE在原型设计中的应用 (累计阅读 4,019)
  8. 【社会化设计】自我(self)部分――用户登录之后 (累计阅读 3,945)
  9. 触屏键盘设计准则(内附绝密小抄)【译】 (累计阅读 3,901)
  10. 读书笔记-交互设计精髓[1] (累计阅读 3,828)