跳到正文ChatGPT 说 · Jimmy Huang's BlogChatGPT 说
本页目录· 298 条
1. 本周 Seminar 总览
这周主要讲的是 Mobile User Interface Design(移动端用户界面设计)。重点不是“界面好不好看”这么简单,而是:用户在手机小屏幕上使用 app 时,能不能快速理解、顺利操作、少犯错、少迷路,并且不同用户,包括视力不好、行动不便、在户外使用的人,也能正常使用。
本周内容和本课程整体关系很直接:FIT5046 这门课需要你做 Android / Kotlin / Compose app,功能当然重要,但老师反复强调 用户体验、导航、界面一致性、表单设计、登录设计、accessibility 也会影响 proposal、prototype 和最终 app 的质量。
这周最重要的实际用途是 assignment / proposal / prototype。老师明确说 proposal 里有分数要求:需要写 2 条 password guidelines 和 3 条 form guidelines。老师也特别提醒,这些 guidelines 必须能在你的截图或 prototype 里看出来,不能只写很抽象、无法证明的规则。
一句话概括:
本周是在教你如何设计一个“用户看得懂、点得准、填得快、导航清楚、风格统一”的移动端 app。
2. 核心知识点总结
2.1 为什么移动端 UI 设计重要
是什么
移动端 UI 设计关注的是用户在手机 app 里的操作体验,比如:
按钮是否容易点到
文字是否容易读
表单是否容易填写
用户是否知道自己在哪里
不同页面是否像同一个 app
用户操作后有没有反馈
为什么重要
手机和电脑不一样:
和本课程整体关系
你们后面要做 Android app,不只是写功能,还要做 prototype / screenshots / navigation flow。老师明确说,UI guidelines 会影响 proposal 和 final app。
学生更容易理解的话
做手机 app 时,不是把所有功能堆上去就行,而是要让用户“不用想太多就会用”。
2.2 设计风格:Skeuomorphism、Flat Design、Glassmorphism、Material Design
A. Skeuomorphism 拟物化设计
是什么
例如早期 iPhone 的 calculator 看起来像真实计算器,contacts 看起来像真实通讯录。
为什么重要
早期用户不熟悉手机界面,所以把界面做得像现实物品,可以降低学习难度。
相关术语:Affordance
Affordance 指的是一个 UI 元素本身能不能暗示用户“我可以怎么操作它”。
例如一个按钮有阴影、凸起,看起来就像可以按下去,这就是 affordance。
为什么后来减少使用
因为用户后来已经习惯手机操作了,不再需要界面像真实物品。拟物化设计还会:
学生更容易理解的话
拟物化就是“把 app 做得像现实里的东西”,目的是让新手一看就懂,但现在用太多会显得老旧、复杂。
B. Flat Design 扁平化设计
是什么
Flat Design 去掉很多阴影、纹理、渐变和装饰,让界面更简单、更平面化。
为什么重要
需要注意的问题
用户可能分不清某个东西是按钮、标签,还是普通文字。
学生更容易理解的话
Flat Design 很干净,但不能干净到用户不知道哪里可以点。
C. Glassmorphism / Liquid Glass 玻璃拟态
是什么
Glassmorphism 使用半透明、磨砂玻璃一样的层,让前景元素像一层玻璃覆盖在背景上。
为什么重要
它是一种较新的视觉风格,可以让界面看起来更有层次、更现代。
老师口头补充
老师用 Android navigation drawer 举例:传统 drawer 打开后会完全遮住后面的内容,而玻璃效果会让用户隐约看到后面的内容。
需要掌握程度
这部分主要了解即可,不是本周 assignment 的核心评分点。
D. Material Design
是什么
Material Design 是 Google 提供的一套 UI 设计系统,包括:
guidelines
components
tools
styles
layout
colour
typography
motion
accessibility
Android app 很多设计都和 Material Design 有关。
为什么重要
你们做的是 Android / Compose app,所以 Material Design 是非常重要的参考系统。
Material Design 的核心理解
界面中的组件可以理解成一层层 “smart paper”。每个 UI 元素像一张有层次、有深度的纸,通过 elevation、shadow、layout 组合成完整界面。
和本课程整体关系
你做 Compose app 时会用到 Material components,比如 text field、button、navigation、card、floating action button 等。Material Design 的规则会帮助你做出更符合 Android 用户习惯的 app。
2.3 Apple HIG 的三个重要原则:Hierarchy、Harmony、Consistency
老师虽然这周主要讲 Android / Material Design,但特意放了 Apple Human Interface Guidelines,因为很多原则在不同平台之间是相通的。
A. Hierarchy 层级
是什么
Hierarchy 是指界面里不同信息有不同重要程度。
你要通过位置、字体大小、颜色、留白等方式,让用户知道什么最重要。
为什么重要
手机屏幕小,用户不能一次处理太多信息。层级清楚,用户才能第一眼看到重点。
例子
一个页面有标题、图片、按钮、列表、地图时,你不能随便摆放。你要决定:
用户最先应该看到什么
哪些是主要操作
哪些是次要信息
哪些可以放到下方或滚动后再看
学生更容易理解的话
Hierarchy 就是告诉用户:“先看这里,再看那里。”
B. Harmony 和谐 / 整体感
是什么
Harmony 指所有页面看起来像同一个 app,而不是像不同人随便做出来的页面。
为什么重要
老师强调
老师说,如果把你的页面截图和别人的页面截图混在一起,她应该能轻松找出哪些页面属于你的 app,因为它们有统一的风格。
学生更容易理解的话
Harmony 就是:你的 app 每一页都要像“一家人”。
C. Consistency 一致性
是什么
Consistency 指相同类型的元素在不同页面中保持一致,例如:
为什么重要
老师特别强调
老师说 marking assignment 时,她第一眼会看 consistency 和 harmony。
她还强调:“重复是设计成功的关键”,不是每一页都要做得不同。
学生更容易理解的话
Consistency 就是:同样的东西,不要一页一个样。
2.4 Material Design 3 Foundations
A. Accessibility 可访问性
是什么
设计时考虑不同能力的用户,例如视力不好、行动不便、使用辅助设备的人。
为什么重要
老师说,如果你的 app 要给公众使用,accessibility 很重要。
而且 accessibility 不只是给 disabled users,也能帮助所有用户,比如户外光线强时文字是否看得清。
B. Content Design 内容设计
是什么
为什么重要
界面不仅是颜色和布局,文字标签、提示语、错误信息也会影响用户体验。
C. Customizing Material / Brand Expression 品牌表达
是什么
如果 app 代表某个品牌,颜色、字体、风格要体现品牌。
老师举例:KFC 可能会用红色,ANZ Bank 可能会用蓝色。
为什么重要
品牌表达能让 app 看起来有身份、有统一视觉语言。
D. Design Tokens 设计令牌
是什么
Design tokens 是可以重复使用的设计值,例如颜色、字体、间距。
为什么重要
例如你定义一个 primary colour,后面所有主要按钮都用它,而不是每次随便选颜色。
学生更容易理解的话
Design token 就像“设计变量”,用来统一全 app 的样式。
E. Interaction States 交互状态
是什么
loading
submitted
error
selected
disabled
completed
为什么重要
没有反馈时,用户不知道系统有没有收到操作,可能会重复点击或误以为 app 坏了。
老师强调
F. Layout 布局
是什么
老师强调
老师说 final app 中需要使用 nested layouts,也就是 layout 里面再放 layout。
只用一个 horizontal layout 或 vertical layout 很难做出复杂、好看的页面。
和 assignment 关系
Proposal 阶段是 first design,要求可能不会那么严格;但 final app 需要更认真地处理 layout。
2.5 Material Design Styles
A. Colour 颜色
是什么
老师强调
老师说:Colour is a form of data.
例如地图里红色道路可能表示拥堵,绿色可能表示顺畅。
为什么重要
信息层级
品牌表达
状态提示
可读性
accessibility
使用原则
老师口头建议
不要把背景和文字都做得很 colourful,因为很容易看不清。
B. Primary Colour 和 Secondary Colour
Primary Colour
主要按钮
active state
app bar
floating action button
Secondary Colour
不是一定要有,但如果用了,要和 primary colour 匹配,并满足 accessibility / contrast 要求。
C. Colour Schemes
Static colour scheme
可以用于 light theme / dark theme,也可以配合品牌颜色。
Dynamic colour
需要掌握程度
了解概念即可,assignment 中更重要的是颜色选择合理、少而清晰、可读性好。
D. Imagery 图片
是什么
图片可以是真实照片、专业摄影、用户生成照片,也可以是插图。
使用原则
informative:传达信息
delightful:让界面更愉快
intentional:有明确目的
老师口头补充
老师说有些学生做 food / recipes / trees / gardening 这类 app,但列表里没有图片,会显得无趣。
如果是 food、pets、plants 这类内容,在 LazyColumn / card / list 里放小图片会更合适。
注意事项
图片要有理由,而且不同页面的图片使用方式也要一致。
E. Motion 动效
是什么
Motion 用在页面转场和交互反馈中,让 app 感觉更自然。
为什么重要
好的 motion 可以让用户理解界面变化,例如列表变成详情页、按钮状态变化等。
老师强调
Material Design 的 motion 应该是 subtle,也就是很轻微、自然。
不要使用老式、夸张、卡通式 animation,因为会分散注意力。
学生更容易理解的话
Motion 是“轻轻提示用户发生了什么”,不是“炫技动画”。
F. Typography 字体
是什么
Typography 关注文字是否可读、漂亮、一致。
老师口头补充
G. Elevation 层级深度
是什么
Elevation 是让界面元素有轻微深度感,例如 card 看起来在背景之上。
为什么重要
它解决了完全扁平设计中 affordance 不清楚的问题。
用户更容易知道哪些东西可以点、哪些是层级更高的内容。
2.6 General Design Guidelines 通用设计规则
Keep it simple:保持简单
Eliminate clutter:减少杂乱
Attention to detail:注意细节
Maintain consistency:保持一致性
Design layouts thoughtfully:认真设计布局
Ensure effortless navigation:导航要轻松
Provide clear feedback:提供清楚反馈
Use colour and imagery appropriately:合理使用颜色和图片
assignment 特别注意
这些 general design guidelines 是用于整体 app 的,不能直接拿来当作 form guidelines 或 login/password guidelines 写。
2.7 Mobile Forms 移动端表单
是什么
Mobile forms 是在手机上收集用户输入的界面。
survey
job application
login
sign up
profile form
booking form
为什么重要
屏幕小
用户可能被打断
用户可能在户外、路上、嘈杂环境中
输入文字麻烦
用户希望快点完成
所以 mobile form 必须简单、清楚、高效。
2.8 Mobile Form Guidelines 表单设计规则
A. 使用 vertical forms
是什么
为什么重要
横向表单会让用户眼睛来回 zigzag,看起来慢,也容易错。
例外
如果两个字段关系非常紧密、经常一起填写,而且都很短,可以横向放。
例如 state + zip code / postcode。
assignment 重要性
老师明确建议:尽量用 vertical forms。
这是比较容易在截图中证明的 form guideline。
B. 使用 meaningful and familiar labels
是什么
例子
First name
Surname
Address
Postcode
为什么重要
C. Group and sequence fields logically
是什么
例子
Personal informationFirst name
Surname
Phone number
老师口头建议
给每组加标题
组与组之间留空间
用很淡的边框或背景区分
不要用很粗、很黑的框造成 clutter
assignment 重要性
这是老师认为可以证明、可以拿分的 form guideline。
你可以在 report 里把截图放出来,并说明这里用了 grouping。
D. Provide hints and examples
是什么
例子
注意
提示文字要短、小、清楚,不要写成长句,否则会造成 clutter。
assignment 重要性
这是容易在截图中证明的 form guideline。
E. Clearly mark optional and required fields
是什么
通常可以用 * 表示 required field。
注意
如果你的表单没有 optional field,就不要硬写这一条。
老师强调:guideline 要和你的实际表单匹配。
F. Use lists when possible
是什么
能用下拉列表、选择列表、菜单、radio buttons、checkboxes 的地方,就不要让用户手动输入。
例子
选择澳大利亚州名时,不应该让用户手动打 “VIC / Victoria / Victria”,而应该用 dropdown list。
为什么重要
减少输入量
降低拼写错误
保证数据一致
让用户更快完成任务
老师特别强调
wherever you can, you must use lists in your form.
We really need to see list in your forms.
所以这是 assignment 中非常重要的隐含重点。
G. Prevent errors and provide meaningful error messages
是什么
例子
如果 email 格式错了,不要只写 “Error”,而要写:
Inline feedback
错误提示最好直接显示在相关字段下方,而不是让用户自己找哪里错了。
老师口头补充
老师说 text field 下方的小字错误提示就是 inline feedback。
比如 password 或 email 错误时,直接在字段下面显示说明。
2.9 Sign-in Forms / Password Guidelines
背景
登录表单通常只有少量输入,例如 email / username 和 password。
但 password 是一个特殊问题,因为它同时涉及 usability 和 security。
A. Mask password but provide show/hide option
是什么
为什么重要
show/hide option 可以提高 usability。
老师特别强调
老师明确说这是 password guideline 之一,而且她非常期待看到这一条。
她认为没有 show password 会造成 usability problem。
assignment 重要性
proposal 需要 2 条 password rules。
老师说第一条最好就是 show/hide password。
B. Remember password / Keep me signed in
是什么
为什么重要
注意
这和 security 有一定冲突,所以要根据 app 场景决定。
但老师在本次 assignment 语境下认为可以使用。
C. Reset password if forgotten
是什么
提供 “Forgot password?” 或 reset password 的选项。
为什么重要
很多用户会忘记密码,如果没有重置入口,用户会卡住。
D. Alternative login / social media login
是什么
允许用户通过其他账号登录,例如 Google、Facebook 等。
为什么重要
E. 老师特别提醒
老师提到现在有些网站会加入密码长度、复杂度规则,例如 8 characters、特殊字符等。
但她说这些内容不在当前 slides 里,所以 assignment 请优先使用 slides 里的 password guidelines。
也就是说,password guidelines 建议从以下 4 个里选 2 个:
Mask password + show/hide option
Remember password / keep me signed in
Reset password if forgotten
Login with social media or alternative accounts
2.10 Mobile Accessibility Guidelines
是什么
Accessibility 是让不同能力、不同使用环境下的用户都能使用 app。
老师口头强调
老师说 W3C 的 mobile accessibility guidelines 虽然是 accessibility,但实际上很多也是普通 mobile UI design guidelines。
所以不要把 accessibility 当成额外内容,它和你平时做 app 的可用性直接相关。
A. Principle 1: Perceivable 可感知
Small screen size
Zoom / magnification
Contrast
手机会在不同光线环境中使用,所以文字和背景要有足够对比度。
课件提到常见推荐比例是 4.5:1,例如黑字白底。
学生更容易理解的话
用户在太阳下、公交上、室内弱光下都可能用你的 app,所以文字一定要看得清。
B. Principle 2: Operable 可操作
Keyboard control
支持外部或替代 keyboard,对某些用户很重要。
Touch target size and spacing
课件提到 Material Design 中 touch target 至少约 48dp / 9mm。
为什么重要
Gestures
如果必须使用复杂手势,例如多指、长按、多次点击、摇晃手机,要提供替代方式或说明。
Button placement
C. Principle 3: Understandable 可理解
Screen orientation
最好支持 portrait / landscape,不要强迫用户旋转设备。
Consistent layout
Important elements before scroll
Grouping
Clear indication that elements are actionable
Gesture instructions
如果有自定义手势,要提供 tooltip、tutorial 或说明。
D. Principle 4: Robust 稳健
Virtual keyboard
输入 phone number 时显示数字键盘
输入 email 时显示包含 @ 的键盘
输入普通文字时显示文字键盘
Easy data entry
Platform features
不同平台有不同辅助功能和 UI components,开发时要利用平台已有能力。
3. 老师强调的重点
3.1 Consistency 和 Harmony 是 marking 时第一眼看的内容
老师怎么强调
老师明确说她批改 assignment 时,第一眼会看 consistency 和 harmony。
为什么重要
这说明它不是普通背景知识,而是直接影响 prototype / final app 观感和评分的重点。
你要怎么做
同样的主色
同样的字体层级
同样的 button 风格
同样的 card / list 风格
同样的 navigation pattern
同样的 spacing 和 alignment
3.2 Proposal 里有 2 条 password rules 和 3 条 form rules
老师怎么强调
老师说来听这节课的人就能知道答案,没来的学生通常会写错。
为什么重要
你要怎么做
vertical forms
grouping fields logically
hints and examples
required / optional field markers
lists / dropdowns where possible
inline error feedback
3.3 Form guidelines 必须能“证明”
老师怎么强调
老师说不要选那些很难在截图里证明的 guideline。
你要能在 report 里指着截图说:这里我用了这个 rule。
为什么重要
Assignment 不是让你背 guideline,而是让你展示你真的应用了 guideline。
不推荐作为 assignment 证据的 rules
推荐使用的 rules
3.4 Lists / dropdowns 在表单里非常重要
老师怎么强调
老师说 wherever possible must use lists,并且 “we really need to see list in your forms”。
为什么重要
这几乎是本周 form design 里最强烈的口头重点之一。
你要怎么做
3.5 Password show/hide option 是最推荐的 password guideline
老师怎么强调
老师说这是一条重要 usability guideline,而且她期待看到这一条。
为什么重要
它直接对应 proposal 里的 password rules 分数。
注意
虽然 show password 可能有 security risk,但当前 assignment 场景下,老师认为 usability 更重要;如果你的 app 不是高度安全系统,可以使用。
3.6 Navigation 必须清楚,用户要知道自己在哪里、怎么回去
老师怎么强调
老师说从 home screen 开始,每个主要 screen 应该有主要 navigation,例如 drawer 或 bottom navigation bar。
如果有 secondary navigation,也要让用户知道怎么返回。
为什么重要
Navigation 是 prototype 和 screenshot flow 的关键。
你要怎么做
3.7 Home screen 必须有 menu / navigation bar / drawer
老师怎么强调
老师在讲 assignment screenshot diagram 时明确说,home screen definitely should have the menu,这是 compulsory。
为什么重要
这是 assignment 结构要求,不只是设计建议。
你要怎么做
3.8 Assignment screenshots / diagram 要展示完整 screen flow
老师怎么强调
老师说要运行 emulator,截图,然后放到 Word 或 PowerPoint 里,缩小、排列,并用 arrows 展示流程。
为什么重要
这会影响你 report 里 prototype / navigation flow 的展示清晰度。
你要怎么做
做出 Compose screens
在 emulator 里运行
对每个 screen 截图
放到 Word / PowerPoint
按用户流程排列
用 arrows 连接
展示 login / sign up -> home -> main screens -> secondary screens
3.9 AI 可以用,但不能让 AI 替你完成整个 assignment
老师怎么强调
学生问能不能用 Google Stitch 之类 AI 工具生成 UI。
老师回答:AI 可以用来获得灵感、学习、参考布局,但不能直接把 whole solution 交给 AI。
为什么重要
这说明本 unit 对 AI 使用比较开放,但仍然要求你自己理解、实现、整合。
你要怎么做
自己判断是否符合 guideline
自己用 Android Compose 实现
自己解释为什么这样设计
3.10 Assignment 只接受 Compose,不接受其他平台
老师怎么强调
老师明确说 “only in Compose”,不接受其他平台。
为什么重要
你要怎么做
即使你用 AI 工具生成了设计灵感,也要最终落到 Android Kotlin / Jetpack Compose。
3.11 App idea 不需要全球唯一,但要有真实 impact 和 target group
老师怎么强调
学生担心任何 idea 都已经有人做过。老师说不需要完全 novel,简单但有效的功能也可以。
是否帮助真实用户
是否有清楚 target group
是否有 impact
是否有一点自己的 creativity
为什么重要
你要怎么做
不要只写泛泛的 task management / event management。
可以选择小众用户群体,只要需求真实、影响明确,反而更有说服力。
3.12 Accessibility 不只是“残障人士专用”,也是通用好设计
老师怎么强调
老师说 W3C accessibility guidelines 其实很多就是 mobile UI guidelines。
为什么重要
这会影响你对 contrast、button size、gesture、keyboard、lists 的设计判断。
你要怎么做
即使 assignment 没要求你写 accessibility,也要用这些原则检查 prototype。
4. transcript 里补充的重要信息
4.1 课程背景:Android 从 Java / XML 发展到 Kotlin / Compose
以前 Android UI 用 XML 写 layout,再用 Java 处理交互
后来 Kotlin 成为 Android 重要语言
Compose 改变了 UI 开发方式
本课程材料已经改成 Kotlin / Compose
Assignment 只接受 Compose
为什么重要
这解释了为什么你现在必须关注 Compose UI,而不是旧式 XML / Java UI。
4.2 本周内容和 assignment prototype 直接相关
老师明确说这节课对 assignment 很重要,因为你要做 prototype。
navigation 是否容易
用户能不能找到功能
页面元素是否在正确位置
界面是否一致
4.3 老师对 Material Design Expressive 的态度
课件介绍了 M3 Expressive,但老师口头说目前不要重点追求这种非常 expressive 的风格。
consistency
harmony
alignment
readable typography
clear navigation
解释
Expressive design 可以以后探索,但现在 assignment 更重要的是基础设计是否扎实。
4.4 Material Design 网站有代码示例
老师提到 Material Design 相关页面有 Android / Kotlin code,可以参考、下载、尝试。
4.5 Layout nesting 是 final app 的重点
课件只说 layout arrange elements visually,但老师口头补充:
final app 一定会需要 nested layouts。
只用简单 horizontal / vertical layout 不够做出复杂页面。
4.6 不要使用夸张 animation
课件讲 motion,但老师补充说不要用 distracting animation。
Material Design 的 motion 应该 subtle。
很多 Android components 本身已经有自然动效。
4.7 Emulator / API 问题
学生问 API 35 / API 36 emulator 是否可以。
4.8 Screenshot diagram 的具体做法
不一定需要特殊工具
可以用 Word 或 PowerPoint
把 emulator screenshots 缩小后排列
用 arrows 表示页面跳转
login / sign up 后到 home screen
home screen 必须有 menu
bottom navigation bar 一般不要放太多项,约 4 个较合适
navigation drawer 可以承载更多主要页面,例如 5–7 个左右
secondary screens 也要用箭头展示它们从哪里进入、如何返回
4.9 表单里的 label 在 Compose / Android TextField 中有 floating label
老师补充:以前 label 和 text field 是分开的,所以 vertical form 更明显。
现在 Android TextField 通常有 floating label,用户输入后 label 会浮到边框附近,这本身已经帮助处理了 label 和 input 的关系。
但老师仍然提醒:整体表单不要横向排得让用户 zigzag 观看。
4.10 表单 guidelines 要选“能展示证据”的
课件列了很多 form guidelines,但老师说 assignment 里最好选那些可以在截图中证明的。
4.11 Password 新规则不要乱用
老师说现在很多地方会有 password length / complexity rules,但当前 slides 没有这些内容。
所以 assignment 中请 stick to slides,也就是 show/hide、remember/reset、alternative login 这些。
4.12 Final app 里 list data 要 meaningful
老师提到以前有学生在 final app list 里放 AAA、BBB 这种无意义数据。
她说这是 assignment,应该放 meaningful data。
为什么重要
即使功能能跑,如果内容随便、界面没 polish,也会显得不专业。
4.13 没有发现明显课件和 transcript 冲突
整体上,transcript 是对 slides 的展开解释。
课件提到 password unmasking 有 security risk;老师口头上说在你们 assignment 的一般 app 场景中,show/hide password 更重要,除非你的 app 是高度安全场景。
课件列了很多 form guidelines;老师口头上进一步筛选出 assignment 中更适合写、能证明的 guidelines。
5. 这周最可能要掌握的考点 / 作业相关点
5.1 最可能和 assignment 直接相关
A. 2 条 password guidelines
Password 默认 masked,但提供 show/hide option
Forgot password / reset password
Remember password / keep me signed in
Alternative login / social login
为什么判断重要
老师明确说 proposal 有 2 password rules 的分数,并且上课的人会知道答案。
B. 3 条 form guidelines
Use vertical forms
Group and sequence fields logically
Provide hints and examples
Mark required / optional fields
Use lists / dropdowns where possible
Provide inline error feedback
为什么判断重要
老师明确说 proposal 需要 3 form guidelines,而且反复解释哪些可以证明、哪些不建议写。
C. Form guidelines 要能在 screenshot 里证明
为什么判断重要
老师反复说:你要能指着截图说 “this is where I used it”。
D. Home screen navigation
最可能要求
为什么判断重要
老师在 break 后专门讲了 assignment screenshots / diagram 做法,并说 home menu 是 compulsory。
E. Consistency / Harmony / Alignment
为什么判断重要
这不是理论小点,而是会影响整个 prototype 观感。
F. Use lists in forms
为什么判断重要
老师说 “we really need to see list in your forms”。
这语气很强,说明很可能是 tutor / marker 会期待看到的设计点。
G. AI 使用边界
可能和 assignment academic integrity / process 相关
5.2 如果 quiz / exam 出题,可能考这些
A. 概念辨析
Skeuomorphism vs Flat Design vs Material Design
Affordance 是什么
Signifier 是什么
Material Design 的 smart paper / elevation 思想
Hierarchy / Harmony / Consistency 的区别
B. 应用判断
哪里不 consistent
哪里 contrast 不够
哪里 navigation 不清楚
哪里 form 设计不好
哪里 touch target 太小
哪里 missing feedback
C. Accessibility
6. 我应该怎么学这周内容
6.1 推荐学习顺序
Step 1:先搞懂移动端 UI 的核心问题
先理解为什么手机 app 不能照搬 desktop:
小屏幕
用户容易被打断
输入困难
使用环境复杂
需要快速完成任务
Step 2:理解设计风格的演变
Skeuomorphism:为什么早期要模仿现实物品
Flat Design:为什么后来追求简洁
Flat Design 的问题:affordance 不够明显
Material Design:用适度层级、组件和规则解决问题
Glassmorphism / Expressive:了解即可
Step 3:重点掌握 Hierarchy / Harmony / Consistency
Hierarchy:信息重要程度
Harmony:所有页面像同一个 app
Consistency:重复元素保持一致
标题位置是否一致
颜色是否一致
button 是否一致
card/list 是否一致
navigation 是否一致
Step 4:学习 Material Design 的几个实用 style
colour
typography
imagery
motion
elevation
layout
Step 5:重点攻克 Form Guidelines 和 Password Guidelines
vertical form
grouping
hints/examples
required/optional marker
list/dropdown
inline feedback
然后对照你的 prototype,确认截图中真的能看到。
Step 6:最后用 Accessibility checklist 检查你的 app
6.2 必须先搞懂的基础概念
6.3 哪些内容属于“理解型”
为什么拟物化早期有用,后来不适合
为什么 flat design 可能降低 affordance
为什么 consistency 比“每页都不同”更重要
为什么 colour 是 data
为什么 mobile forms 要更简单
为什么 accessibility 也是普通 UI 设计的一部分
为什么 motion 应该 subtle
6.4 哪些内容属于“记忆型”
Skeuomorphism / Flat Design / Material Design 的特点
M3 foundations 和 styles 的主要类别
Hierarchy / Harmony / Consistency 的含义
Password guidelines 的 4 个选项
Form guidelines 的主要选项
Accessibility 四个原则:Perceivable、Operable、Understandable、Robust
Touch target 至少约 48dp / 9mm
Contrast 推荐例子 4.5:1
General guidelines 不能直接当 form/login guidelines 写
6.5 哪些内容属于“应用型”
设计统一的颜色、字体、button、card、list
做清楚 navigation flow
home screen 加 menu / bottom nav / drawer
用 vertical forms
用 dropdown/list 减少输入
给 required fields 加 *
给复杂字段加 hints/examples
给 password 加 show/hide
给错误输入加 inline feedback
截图并用 arrows 展示 screen flow
用 Compose 实现,而不是其他平台
6.6 哪些内容只需要了解
Glassmorphism / Liquid Glass
Material Design Expressive
Material Design 的历史版本 M1 / M2 / M3
Gmail icon 设计背后的物理光影例子
W3C 组织背景
Apple HIG 的全部 foundation 分类
6.7 哪些内容需要重点掌握
Consistency / Harmony / Hierarchy
General design guidelines
Mobile form guidelines
Password guidelines
Navigation design
Accessibility basics
Screenshot diagram / prototype presentation
Compose-only requirement
6.8 最容易混淆的地方
A. Consistency 不是“无聊重复”
不要为了显得丰富而每页换颜色、换字体、换按钮位置。
B. Harmony 和 Consistency 不完全一样
Consistency:具体元素和行为保持一致
Harmony:整体视觉感觉属于同一个 app
C. General guidelines 不能直接当 form guidelines
“Keep it simple” 是整体原则,但 proposal 要你写 form guidelines 时,要写更具体的 form rule,例如 vertical forms / dropdown lists。
D. Form guideline 要能证明
有些 guideline 本身对,但不好在截图中证明。
E. Password show/hide 有 usability 和 security trade-off
课件说 unmask password 有 security risk;老师说当前 assignment 中 show/hide option 是很重要的 usability guideline。
所以写的时候可以说:默认 masked,但允许用户主动 show/hide。
F. Motion 不是夸张 animation
Material motion 应该 subtle。
G. Accessibility 不是最后才加的东西
Accessibility 应该从设计开始就考虑,例如 contrast、button size、keyboard、gesture。
H. Images 不是越多越好
需要图片的地方要用,比如 food / tree / pet list;但不要把无关图片堆满屏幕。
6.9 学完后你应该能回答的问题
什么是 affordance?为什么 flat design 会带来 affordance 问题?
Skeuomorphism 和 Flat Design 的区别是什么?
Material Design 为什么强调 elevation / layers?
Hierarchy、Harmony、Consistency 分别是什么意思?
为什么老师说 consistency 是 assignment marking 的第一眼重点?
Colour 为什么是一种 data?
Primary colour 和 secondary colour 怎么用?
为什么 mobile forms 比 desktop forms 更难设计?
什么是 vertical form?什么时候可以横向放两个字段?
Assignment 里适合写哪 3 条 form guidelines?
哪些 form guidelines 不推荐写,因为不好证明?
Password guidelines 可以写哪 2 条?
为什么 show/hide password 很重要?
为什么表单里应尽量用 lists/dropdowns?
Home screen 在 prototype 里必须有什么?
Screenshot diagram 应该怎么展示 app flow?
Accessibility 中 contrast、touch target、gesture、keyboard 各要注意什么?
AI 工具在本 assignment 中可以怎么用,不能怎么用?
7. 给我一份简短复习清单
本周快速 checklist
概念
Material Design
Assignment / Proposal
Form Design
Accessibility
8. 如果我是初学者,你再用更简单的话解释一遍
做手机 app 不是只要功能能跑,还要让用户舒服地用。
手机屏幕很小,用户可能在走路、坐车、太阳底下、很吵的地方使用你的 app。
所以你的界面不能太乱,不能让用户猜,不能让用户找半天。
以前的 app 会把按钮、计算器、通讯录做得像真实物品,因为那时候大家还不熟悉手机,这叫 拟物化设计。
后来大家熟悉手机了,界面就变得更简单、更平面,这叫 扁平化设计。
所以现在像 Material Design 会加一点层次、阴影、动效,让用户知道哪些东西可以操作。
重要内容更明显,不重要内容放后面,这就是 hierarchy。
这周和 assignment 最直接相关的是表单和登录。
表单就是用户要输入东西的页面,比如注册、登录、填写资料。
尽量竖着排
相关问题放一组
字段名称要清楚
有固定选项就用 dropdown/list
必填项标出来
输错时直接在旁边告诉用户哪里错了
密码默认隐藏是正常的,但你最好给用户一个 show/hide password 的按钮。
2 条 password rules
3 条 form rules
而且这些规则不是写了就行,要能在你的 screenshot 里看出来。
例如你写 “I used dropdown list”,截图里就真的要有 dropdown list。
你写 “I grouped fields logically”,截图里就要看到分组标题、间距或边框。
最后,老师还提醒你们做 assignment 的截图流程:
你要用 Compose 做 screen,在 emulator 里运行,截图,然后放到 Word 或 PowerPoint 里,用箭头连起来,展示用户从 login / sign up 到 home,再到其他页面的流程。
Home screen 必须有 navigation,例如 bottom navigation bar 或 navigation drawer。
页面要统一:颜色、字体、按钮、布局一致。
表单要好填:少输入、多选择、清楚提示。
导航要清楚:用户知道自己在哪、能去哪、怎么回来。