MODULE 10 / LESSON 03

移动端表单、手势与权限

处理软键盘、单手操作和被系统打断的流程。

39 / 60 课适配不同平台

先理解这个概念

移动任务常发生在短时间、单手和不稳定网络环境中。软键盘占据空间,权限弹窗由系统控制,手势可能与系统返回冲突。设计要关注任务恢复,而不仅是静态屏幕的留白。

移动端输入发生在更小空间和更不稳定的环境中。软键盘会遮挡内容,输入法可能处于组合阶段,单手操作和网络变化会打断流程。权限请求也属于交互流程:用户需要理解为什么此刻需要权限,以及拒绝后还能做什么。

用程序员的语言说

移动流程像会被暂停和恢复的任务,必须保存上下文。

记住这三个原则

  1. 01

    输入类型、自动填充与键盘动作跟随字段用途。

  2. 02

    在需要功能时解释权限用途,再请求权限。

  3. 03

    键盘出现后仍能看到当前字段与关键错误。

实际设计时,分三步做

  1. STEP 01

    根据字段选择输入类型、自动填充与键盘动作,减少无意义切换;不要禁止粘贴验证码或密码。

  2. STEP 02

    让聚焦字段、错误和下一步在键盘出现时仍能访问。验证表单可滚动,避免底部按钮被永久覆盖。

  3. STEP 03

    在用户触发相关功能时解释权限用途,设计拒绝、受限与之后重新开启的路径,不把权限当成默认已获得。

一个容易理解的例子

BEFORE / 常见问题

启动 App 连续申请相机、定位和通知权限,还没解释任何用途。

AFTER / 可以这样改

用户点击“扫描票据”时解释相机用途,拒绝后提供手动录入。

请求发生在用户理解价值的时刻,也保留替代路径。

展开看:从场景到设计决定

用户点击添加照片后才请求照片访问权限;若拒绝,可以说明当前无法选择照片,并保留文字记录能力。上传前可预览所选图片,失败后保留其他输入。地址表单在键盘出现时滚动到当前字段,提交错误回到相关位置。不能为了让按钮固定在底部而遮住最后一项输入。

适用边界与取舍

自定义数字键盘可能看起来更统一,却容易损失输入法、辅助技术和粘贴能力。只有任务有明确需要时才替换系统输入。

YOUR TURN

把这个原则用一次

先做一个小判断

定位被拒绝的天气应用如何继续?

再完成一份设计练习

设计含金额、备注与照片的移动记账表单,补充键盘弹出和照片权限拒绝状态。

容易踩的坑

不要把下滑、侧滑或长按作为完成关键任务的唯一方式。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3Android · Layout basics