⌘ K
简体中文
设计工作流程

如何寻找移动应用 UI 灵感,并将其转化为设计简报

收集移动应用 UI 参考、研究完整界面序列,并将视觉观察转化为原创且可测试的设计简报的实用流程。

ScreenKits 编辑团队6 分钟阅读
由图片卡片、地图和仪表盘组成的概念性移动界面画廊。
概念性编辑插画,并非实际应用界面截图。

收集一整个文件夹的漂亮应用界面很容易,却很难用好。如果没有问题引导搜索,视觉参考可能把设计带向模仿,却仍未解决真正的用户任务。

将截图视为调查的起点。有效的流程从任务出发,比较完整流程,记录视觉背后的设计决策,再将观察结果转化为可以制作原型和评估的简报。

核心要点

  • 收集参考资料前,先明确用户、任务和设计上的不确定性。
  • 研究界面序列和交互状态,而不只是孤立的视觉处理方式。
  • 写下可迁移的原则,再为自己的产品作出原创决策,并与真实用户验证。
  • 趁简报仍可灵活调整时,检查无障碍和平台适配。

1. 从设计问题出发

开始浏览前,用一句话描述你为谁设计、处于什么时刻。例如:“第一次下厨的用户需要选择一道工作日晚餐,并理解接下来要做什么。”然后说出不确定之处:困难在于快速浏览选项、信任推荐,还是开始一道多步骤菜谱?

这个问题确定了搜索范围。决定哪些平台、产品领域和任务相关。如果你研究首次使用体验,就浏览新手引导实例;如果问题是套餐选择,就看付费墙界面;如果是数据输入,就比较表单模式。ScreenKits 让你按类别浏览真实应用界面。将有用的应用保存为浏览器书签,以便整理观察时返回查看。

  • 目标用户是谁,他们想完成什么?
  • 哪项设计选择尚不确定:信息层级、顺序、导航、内容还是反馈?
  • 哪些约束很重要,例如平台、无障碍、设备尺寸或业务规则?

2. 收集少量有目的的参考资料

收集几个针对同一任务或密切相关任务的实例。纳入不止一种方法:直接路径、引导路径,或许还有处理错误或空状态的版本。对每个候选实例,保存应用,并记录你想重新查看的界面或时刻。紧凑的资料集比未经筛选的灵感板更容易比较。

当底层问题相同时,也可以跨类别寻找参考。日程安排应用和购物清单应用可能都需要帮助用户选择日期并确认变更。真正有用的联系是决策结构,而不是表面主题。不要因为受众或行业相似,就认定某个界面能解决你的具体问题。

  • 选择参考资料时,要能说清理由,例如“它展示了选项变更后摘要如何变化”。
  • 纳入不同方案,避免把第一个精美实例当作默认答案。
  • 使用浏览器书签保留所选应用,便于撰写简报时进行比较。

3. 阅读流程,而不只是截图

孤立的界面只展示某一时刻的布局、颜色、文字和控件。它不会揭示用户如何到达这里、点击后会发生什么,或任务是否成功。按顺序走查每个相关界面。记录入口、决策、操作、反馈和下一状态。当验证错误、关闭或返回修改选择等替代状态会影响任务时,也应纳入。

区分观察与解读。“三个步骤中的主操作都靠近底部”是观察;“这样一定更好用”则是尚未证实的主张。截图可以启发假设,但不能证明可用性。尼尔森诺曼集团认为,原型制作和用户测试可帮助发现潜在可用性问题,并了解人们如何与拟议界面交互。

记录内容菜谱选择流程示例
用户目标选择一道适合今晚时间安排的晚餐菜谱。
观察到的模式时间和饮食筛选条件出现在菜谱列表之前。
可能的原则在浏览结果前提供影响较大的限制条件。
待解问题用户是否知道哪些筛选条件是可选的?
产品决策显示两个必要的筛选条件,按需提供更多选项。

4. 将观察结果转化为原创简报

综合分析是参考资料发挥作用的关键。提炼可迁移的原则,例如“在确认前让用户看到某项选择的后果”。然后根据自家产品的任务、内容和约束,决定如何应用这一原则。不要因为某个实例吸引人,就照搬品牌插画、原文或独特布局。

对于菜谱示例,参考资料集可能提示尽早显示时间,并预览所选筛选条件会改变什么。原创简报可以规定一条简短的晚餐规划路径、可见的时间限制、清楚的筛选状态,以及保存前的核对步骤。这些决策回应产品目标,而不是重现其他应用的界面。

  • 受众与情境:谁需要这个设计,会在何时何地使用?
  • 用户目标与成功标准:他们应该能够完成或理解什么?
  • 流程:主要步骤、决策和重要的替代状态有哪些?
  • 设计原则:界面应让哪些内容清楚或容易操作?
  • 约束与待解问题:哪些条件必须成立,哪些还需要研究?
  • 评估计划:你会让用户在原型中完成什么任务,又会观察什么?

5. 制作原型、检查无障碍并持续改进

在打磨视觉样式前,先将简报变成粗略的线框流程图。制作关键决策及其反馈的原型,然后邀请具有目标受众代表性的人完成真实任务。观察犹豫、意外选择和错误。修订流程并重复测试;尼尔森诺曼集团的研究指南将迭代设计和原型评估视为学习过程的一部分,而不是假定初稿已经定案。

同时开展无障碍评审。Apple 的《人机界面指南》强调可感知、可适应的交互,并考虑不同输入方式。检查文字缩放、对比度、控件大小与间距、清晰的标签,以及含义是否只靠颜色传达。也要检查流程能否适应较长的文字,能否通过辅助技术理解。如果产品遵循 Android 惯例,Material Design 的无障碍指南是有用的补充。

  • 给用户一个任务提示,而不是界面导览,并观察他们能否继续。
  • 趁结构修改仍容易时,测试早期、低保真版本。
  • 查阅与你支持的设备和设计系统相关的平台指南。
  • 只有在需要调查具体问题时才回到参考资料;不要把视觉相似性当作证据。

从参考资料到简报的检查清单

交接简报前,确认它描述的是产品决策,而不是情绪板。即使没有参与资料收集,也应能够理解目标任务、拟议流程、尚未解决的选择,以及团队准备如何验证设计是否有效。

  • 原始用户和任务已经明确。
  • 每份参考资料都注明它帮助探索的问题或模式。
  • 观察结果与假设和可用性主张已经分开。
  • 简报描述了原创流程和针对产品的理由。
  • 纳入无障碍、平台行为和重要的替代状态。
  • 定义了原型任务和基于观察的评审计划。

资料来源与延伸阅读

将灵感转化为你的下一个流程。

浏览真实界面、比较设计模式,并了解各部分如何衔接。

探索应用界面