跳到正文Seminar Week 6 Summary · Jimmy Huang's BlogSeminar Week 6 Summary
本页目录· 82 条
ChatGPT 说›Learning Outcomes
本周主要围绕移动用户界面设计（Mobile User Interface Design）展开，学习目标可以概括为：
理解移动 UI 中常见的设计风格与范式，包括拟物化设计（Skeuomorphism）、扁平化设计（Flat Design）、玻璃拟态（Glassmorphism）和材料设计（Material Design）。
理解材料设计 3（Material Design 3, M3 / Material You）的核心组成，包括可访问性、颜色、布局、动效、字体、图标、形状和交互状态。
掌握移动表单（Mobile Forms）的设计原则，尤其是如何减少输入负担、降低错误率，并让表单更适合小屏幕和移动场景。
掌握登录表单（Sign-in Form）和密码输入的基本 UI 指南。
理解移动可访问性（Mobile Accessibility）如何影响移动 App 的布局、触控、颜色、输入方式和导航设计。
将这些 UI 指南应用到 assignment 的 prototype、screen flow 和最终 app 设计中。
本周在课程中的位置
本周内容从“实现功能”转向“让用户真正好用地完成任务”。
前几周更多关注 Android / Kotlin / Compose 中如何实现界面、导航、数据和功能；本周强调的是：
本周内容和 assignment 直接相关：proposal / prototype 中需要体现 UI design guidelines；
表单部分需要选择并证明若干 form guidelines；
登录部分需要体现 password / sign-in guidelines；
screen flow 需要展示从 login / sign-up 到 home，再到主要页面之间的导航关系；
课堂中特别强调：不要只写 guideline，要在截图中能看出你确实应用了它。
1. 移动 UI 设计的核心问题
移动 UI 设计的重点不是把所有信息塞进屏幕，而是在小屏幕、移动场景和有限注意力下，让用户更容易完成任务。
好的移动 UI 不是“看起来复杂高级”，而是让用户不用想太多就知道下一步该做什么。
2. 设计风格与范式
2.1 拟物化设计（Skeuomorphism）
拟物化设计指的是让数字界面元素模仿现实世界中的物理对象。
使用真实物体的外观，例如电话、计算器、通讯录、笔记本；
使用纹理（textures）、阴影（shadows）、渐变（gradients）；
使用皮革、木头、螺旋装订等装饰性视觉元素；
让按钮看起来像现实中的按钮，让用户自然知道“可以按”。
为什么早期很有用
在智能手机刚出现时，很多用户并不熟悉数字界面的交互方式。拟物化设计通过模仿现实物品，降低了学习成本。
可供性（Affordance）
一个界面元素通过外观暗示用户“它可以被如何操作”。
有阴影、凸起的矩形，看起来像按钮；
平平的文字可能只是标签；
带箭头的滑动条暗示用户可以滑动。
如果界面元素本身的可供性不够明显，就需要指示符（Signifier）辅助，例如箭头、文字提示或图标。
拟物化设计的问题
随着用户逐渐熟悉手机和电脑界面，拟物化不再那么必要，并且会带来问题：
装饰太多，界面容易显得拥挤；
图片、纹理和阴影会增加加载和渲染成本；
视觉上不够简洁；
不适合现代响应式、轻量化界面。
2.2 扁平化设计（Flat Design）
典型例子包括 Windows Phone 7 和 iOS 7。
扁平化设计的优点
更轻量；
更现代；
信息更集中；
减少不必要的视觉噪音；
有助于提高加载和响应效率。
扁平化设计的问题
用户可能分不清一个元素是按钮还是普通文字；
有些可点击区域不明显；
交互线索变少。
因此后来的材料设计并没有完全放弃深度，而是保留了轻微的高度、层次和阴影，用来帮助用户理解界面结构。
2.3 玻璃拟态（Glassmorphism）
玻璃拟态是一种较新的视觉风格。课件中以 iOS 的液态玻璃（Liquid Glass）为例。
使用半透明界面组件；
像磨砂玻璃一样形成一个独立的功能层；
背景内容不会被完全遮住，而是被模糊或弱化；
常用于控制区、导航区或悬浮层。
玻璃拟态不是把界面完全盖住，而是在内容上方放一层半透明的“玻璃面板”。
这种风格可以让界面显得更轻、更有层次，但也要注意：
文字和图标必须清晰可读；
背景不能干扰前景内容；
不能为了视觉效果牺牲可访问性和可用性。
2.4 三种设计风格对比
3. Apple HIG 中的三个基础原则
课件中提到 Apple 人机界面指南（Human Interface Guidelines, HIG）的三个基础概念：层级、和谐、一致性。
3.1 层级（Hierarchy）
使用更大的标题；
使用更醒目的颜色；
把重要内容放在更靠上的位置；
用空间、分组或卡片突出重点；
用按钮样式区分主要操作和次要操作。
用户第一眼看到的内容，应该就是这个页面最重要的内容。
3.2 和谐（Harmony）
如果把你的所有 screen 打乱，再和别人的 screen 混在一起，仍然应该能看出哪些页面属于你的 App。
相似的颜色体系；
相似的字体风格；
相似的按钮样式；
相似的页面间距；
相似的图标风格；
一致的导航方式。
3.3 一致性（Consistency）
相同功能、相同层级、相同类型的元素，在不同页面中应该以相似方式出现。
标题位置一致；
按钮颜色一致；
主按钮总是放在类似位置；
字体大小和颜色一致；
列表、卡片、表单的样式一致；
同样的操作产生同样的反馈。
4. 材料设计（Material Design）
4.1 Material Design 是什么
材料设计是 Google 推出的一个可适应的 UI 设计系统。
设计指南（guidelines）；
UI 组件（components）；
工具（tools）；
最佳实践（best practices）。
材料设计的目标是帮助开发者设计清晰、可用、美观且一致的界面。
4.2 “Material”的设计隐喻
Material Design 的思想可以理解为“智能纸张”：
这也是为什么 Material Design 不像纯扁平化那样完全没有深度。它会保留一定的高度感（Elevation），帮助用户理解界面结构。
4.3 Material Design 3 Foundations
可访问性（Accessibility）：考虑不同能力的用户，让更多人能使用 App。
内容设计（Content Design）：让 UI 内容更容易理解和使用。
自定义 Material（Customizing Material）：根据品牌表达设计界面，例如颜色、图标、形状等。
设计令牌（Design Tokens）：保存可复用的样式值，例如颜色、字体、间距。
交互状态（Interaction States）：表达组件当前状态，例如 pressed、selected、disabled、loading。
布局（Layout）：安排元素在屏幕上的视觉位置。
面向所有人构建（Building for all）：从一开始就考虑不同用户群体。
Material A-Z：用于查找关键设计术语和概念。
4.4 Material Design 3 Styles
4.5 Material Design Expressive
Material Design Expressive 是 M3 的进一步演化，强调更强的情感表达和个性化体验。
更有个性；
更强调用户情绪连接；
更醒目、更活泼；
可能使用更不规则或更大胆的形状、颜色、布局。
现在 assignment 应优先掌握基础设计规则；
Expressive 风格可以很有趣，但如果使用不当，可能破坏一致性、对齐和可读性；
在还没有掌握基本 UI 原则前，不建议为了“酷”而过度表达。
5. 颜色、图像与动效
5.1 颜色（Colour）
使用颜色的原则
主色与辅色
静态配色与动态配色
5.2 颜色的三个原则
Hierarchy：表达层级
页面顶部用强色块突出；
主按钮用品牌主色；
次要信息使用较弱颜色。
Expressive：表达品牌
如果 App 属于某个组织或业务，颜色应当和品牌形象一致。
Legible：保证可读性
课件中提到的推荐对比示例是 4.5:1。黑色文字在白色背景上通常具有较好可读性。
5.3 图像（Imagery）
5.4 动效（Motion）
让用户分心；
降低效率；
让界面显得幼稚或混乱；
对部分用户造成不适。
在 Android / Compose 中，许多 Material 组件本身已经包含细微动效，例如文本框 label 浮动、按钮状态变化、导航切换等。
6. 通用移动 UI 设计指南
课件总结了一组 general design guidelines。这些原则应用于整个 App，而不是只写在 form 或 login 部分。
6.1 保持简单
页面中只放必要内容；
避免无关信息；
避免过多装饰；
用户应该能快速理解当前页面要做什么。
6.2 避免杂乱
太多颜色；
太多字体大小；
太多按钮；
图片过多；
间距不一致；
对齐混乱；
一个页面试图完成太多任务。
6.3 注意细节
6.4 保持一致性
字体；
字号；
颜色；
按钮样式；
图标风格；
对齐方式；
页面结构；
交互行为。
6.5 认真设计布局
哪些元素最重要；
用户先看哪里；
按钮放在哪里最容易操作；
元素之间是否有清晰分组；
小屏幕是否需要滚动；
重要内容是否在滚动前可见。
在 Compose 中，实际实现时可能需要嵌套多个 layout，例如 Column、Row、Box、LazyColumn、Card 等，才能得到良好的视觉结构。
6.6 让导航轻松
我现在在哪里；
我可以去哪里；
如何回到 home；
如何回到上一层；
主页面之间如何切换。
课堂中提到 assignment prototype 时：
login / sign-up 通常在主导航之前；
从 home screen 开始，主要页面应通过 navigation drawer 或 bottom navigation bar 访问；
如果有多级页面，需要清楚展示返回路径；
screen flow diagram 中要用箭头表达页面之间的跳转关系。
6.7 提供清楚反馈
反馈（Feedback）让用户知道系统发生了什么。
loading 状态；
提交成功提示；
错误提示；
表单输入错误的行内反馈；
当前页面或当前步骤提示；
按钮点击后的状态变化。
操作是否成功；
是否还在加载；
是否输入错误；
是否需要继续等待。
7. 移动表单设计（Mobile Forms）
7.1 什么是移动表单
登录；
注册；
问卷；
申请表；
个人资料编辑；
搜索筛选；
订单信息填写。
用户通常不喜欢填表，所以移动表单必须尽量简单、清楚、高效。
7.2 为什么移动表单更难设计
屏幕更小；
用户可能在移动中；
用户容易被打断；
输入速度较慢；
键盘会遮挡部分屏幕；
触控误点更常见；
用户希望快速完成任务。
更短；
更直观；
更少输入；
更少错误；
更容易恢复；
更适合单手或触控操作。
7.3 移动表单设计指南
7.4 纵向表单 vs 横向表单
在现代 Android TextField 中，label 常常已经集成在输入框中，并且输入后会变成浮动标签（Floating Label）。这可以减少传统 label 与输入框对齐的问题，但整体表单仍应优先保持纵向、清晰、整齐。
7.5 Assignment 中推荐选择的 form guidelines
课堂中特别提醒：assignment 中不要只写“我遵守了某原则”，而要能在截图中指出证据。
比较推荐的 3 个 form guidelines：
使用纵向表单；
合理分组字段，并用标题或间距区分；
提供 hints / examples；
用 * 标记 required fields；
尽可能使用 dropdown / list；
提供清楚的错误信息和行内反馈。
smooth conversational flow，因为较难从截图中证明；
minimise input fields，因为很难证明你删掉了哪些字段；
combine similar input fields，因为没有对比时较难证明。
8. 登录与密码设计
8.1 登录表单（Sign-in Form）
登录表单通常用于已有用户进入系统，一般只包含少量输入，例如：
email / username；
password；
login button；
remember me；
forgot password；
create account；
social login。
8.2 密码遮罩（Password Masking）
用户可能不知道自己是否输入正确；
移动端输入密码更容易出错；
用户可能因为看不到输入内容而反复失败。
默认隐藏密码，但提供 show / hide password 选项。
8.3 Sign-in Forms Guidelines
默认 mask password，但提供容易操作的 show / hide password；
提供 remember password / remember me 选项；
提供 forgot password / reset password 选项；
可选：提供 social media login 或 alternative accounts login。
8.4 Assignment 中的 password rules
课堂中特别提示 assignment 中需要 password rules。
Show / hide password这是最重要、最推荐体现的一条；
用户可以检查自己是否输入正确；
默认仍可以保持密码隐藏。
从以下规则中再选一条：Remember me / remember password；
Forgot password / reset password；
Login with social media or alternative account。
9. 移动可访问性（Mobile Accessibility）
9.1 W3C 与移动可访问性
W3C（World Wide Web Consortium）制定了许多 Web 和移动相关标准。
W3C WAI 的移动可访问性指南关注如何让移动应用对残障用户更可访问。
很多 accessibility guidelines 不只是为了残障用户，它们本身也是好的移动 UI 设计原则。
字体清晰；
颜色对比足够；
按钮足够大；
手势不要太复杂；
重要信息放在前面；
输入方式尽量简单。
9.2 Principle 1：可感知（Perceivable）
可感知的意思是：用户必须能够看见、听见或理解界面信息。
1.1 小屏幕尺寸
1.2 缩放与放大
视力较弱用户；
年长用户；
在强光或弱光环境下使用手机的用户。
1.3 对比度
移动设备会在不同光照环境下使用，例如室内、室外、强光、夜晚。
选择足够清晰的文字颜色；
保证文字和背景之间有足够对比；
避免彩色文字放在复杂背景上；
确保图标也能被看清。
课件中提到推荐对比示例为 4.5:1，例如黑色文字在白色背景上。
9.3 Principle 2：可操作（Operable）
2.1 支持键盘控制
无法精确触控的用户；
依赖辅助设备的用户；
使用外接输入设备的用户。
2.2 触控目标大小和间距
触控目标（Touch Target）必须足够大，并且彼此之间有足够间距。
课件中提到 Material Design 的规则：
如果按钮太小或太近，用户可能想点 Button 1，却误点 Button 2。
2.3 触屏手势
tap；
double tap；
long press；
swipe；
multi-finger gesture。
2.4 设备操控手势
2.5 按钮放在容易触达的位置
用户单手握持；
用户双手握持；
用户手指自然活动范围；
按钮是否靠近屏幕边缘；
主按钮是否容易触达。
10. Principle 3：可理解（Understandable）
可理解的意思是：界面结构和操作方式应该让用户容易理解。
10.1 屏幕方向
App 应尽量支持竖屏和横屏，不要强制用户旋转设备。
有些设备可能固定在支架上；
有些用户无法方便地旋转设备；
例如轮椅上的固定手机架可能只能保持一个方向。
10.2 一致布局
每个页面的 top bar 位置一致；
返回按钮位置一致；
主导航位置一致；
表单字段样式一致；
同类按钮样式一致。
10.3 重要元素放在滚动前
低视力用户；
认知障碍用户；
在移动场景中快速浏览的用户；
第一次进入页面、不确定重点在哪里的用户。
10.4 将相同动作的元素组合成一个可操作元素
如果图标和文字都指向同一个操作，应把它们作为同一个 actionable element。
10.5 清楚表示哪些元素可以操作
10.6 为自定义手势提供说明
tooltip；
tutorial；
onboarding；
简短提示文字。
11. Principle 4：稳健（Robust）
稳健的意思是：App 应能适应不同平台、设备、辅助技术和输入方式。
11.1 设置合适的虚拟键盘
虚拟键盘（Virtual Keyboard）应根据输入内容自动匹配。
11.2 提供容易的数据输入方式
dropdown list；
menu；
auto-complete；
default value；
auto-entry；
picker；
saved information。
11.3 支持平台特性
不同平台和操作系统有不同的辅助功能和 UI 特性。
Android Material components；
iOS system controls；
platform accessibility features；
screen reader support；
native input controls；
system gestures and conventions。
12. Assignment / Prototype 相关提醒
12.1 Prototype screen flow
课堂中提到 prototype 需要展示页面截图和页面之间的关系。
login / sign-up；
home screen；
main navigation；
主要功能页面；
必要的二级页面；
用箭头表示页面跳转。
用户从哪里开始；
如何进入主页面；
主导航如何工作；
哪些页面互相连接；
是否有清楚的返回路径。
12.2 Main navigation
从 home screen 开始，用户应能通过清楚的主导航进入主要页面。
navigation drawer；
bottom navigation bar。
12.3 General guidelines 不能当作 form / login guidelines
general design guidelines 应用于整体 App；
不能把 “keep it simple / consistency / good layout” 直接算作 form guideline 或 login guideline；
form guidelines 要对应表单设计；
login / password guidelines 要对应 sign-in 和 password 设计。
12.4 AI 工具的使用
课堂讨论中提到，AI 工具可以用于 UI 灵感和学习，例如帮助生成 screen idea 或 layout inspiration。
Summary
UI 设计不仅是让 App 好看，更是让用户容易理解、容易操作、容易完成任务。
拟物化设计强调现实物体隐喻，扁平化设计强调简洁，Material Design 在简洁和层次之间取得平衡。
好的移动 UI 需要层级、和谐和一致性。
Material Design 3 提供了颜色、布局、图标、动效、形状、字体和可访问性等完整设计系统。
颜色是信息，不只是装饰；图像和动效必须服务于用户理解。
移动表单应减少输入、使用纵向布局、提供清楚标签、合理分组、使用列表、给出反馈并减少错误。
登录表单中密码应默认隐藏，但最好提供 show / hide password，同时可加入 remember me、forgot password 或 alternative login。
移动可访问性原则本质上也是优秀移动 UI 的基础：信息要可感知，操作要可完成，界面要可理解，系统要稳健。
在 assignment 中，所有 guidelines 都要能通过截图和设计说明证明，而不是只写在文字里。