[Day 004]Apple Design学习记录

364 阅读5分钟

Apple Design设计资源:Apple Design Resources

Apple Design设计指南:Human Interface Guidelines

设计资源

  • 组件库
  • 设计模板
  • 导出模版
  • 一些技术图标、按钮(如:Apple 登陆、Siri、homekit图标)
  • 字体
  • icon
  • 产品底座(介绍图、App介绍页可用)
  • 徽章和logo(如:App Store下载、Apply Pay)

设计指南

这部分我只简单记录下学习Apple Design中感触较深的内容,完整的学习建议还是看一遍官方指南。

平台特点

这里只看iOS、iPadOS、watchOS,tvOS国内用户太少,macOS后续再学习

ios

显示:中等尺寸的高分辨率屏幕

输入:手势、屏幕键盘、语音、定位、陀螺仪、加速度计

应用交互:有时之花几分钟时间查看事件,查看数据或发送信息;有时连续很长时间玩游戏、看视频等。通常会打开多个应用并频繁切换。

系统功能:

  • 小组件
  • 主屏幕快捷操作(长按应用icon的那个彩蛋)
  • 提供搜索结果
  • 捷径
  • 活动视图(分享菜单)

最佳实践

  • 控制屏幕内控件的数量帮助用户专注于主要任务和内容
  • 无缝适应外观变化(设备方向,黑暗模式)
  • 交互尽量放在屏幕中间或底部,这个位置用户能更容易、舒适的按到
  • 尽量通过平台功能获得信息,减少用户输入(如人脸识别替代支付密码输入)

iPadOS

显示:大尺寸高分辨率显示屏

输入:增加了外接键盘、apple pencil

应用交互:增加了跨应用拖放

系统功能:

  • 分屏(要求自适应宽度)
  • 小组件
  • 拖放

最佳实践

  • 利用大显示屏尽可能一屏多展示内容,减少全屏转换和弹窗,按钮等要放在易与触及的地方
  • 结合手势、物理键盘、applePencil实现独特交互
  • 无缝适应外观变化(设备方向,黑暗模式)

watchOS

显示:很小的高分辨率显示屏

输入:增加了旋转按钮控制精确滚动,siri 快捷方式可以方便执行日常任务,利用设备功能提供的数据(gps,各种健康传感器,高度、加速度、陀螺仪等)

应用交互:用户通常使用watchOS应用提供的表盘复杂功能、通知、siri等而不是应用本身

系统功能:

  • 表盘复杂功能
  • 通知
  • 常亮展示
  • 表盘

最佳实践

  • 快速、一目了然、简洁的传递关键信息,帮助用户通过简单的手势操作执行对应的操作
  • 通过数据预测用户可能的需求提供可操作内容实现个性化体验
  • 提供表盘复杂功能,展示数据或提供快速进入应用的入口
  • 使用通知提供及时、高价值的信息,并使用户可以不打开应用而采取对应操作
  • 支持siri

设计基础

可访问性

不止为了考虑不同程度残疾的用户,也为了为每个人提供更好的用户体验

简单一致的交互

手势

  • 不要覆盖系统平台的首饰
  • 尽可能简化手势
  • 提供手势的替代操作

按钮和控件

  • 触摸屏交互元素至少需要44x44的命中目标

用户输入

  • 尽可能用说话替代打字
  • 支持siri或快捷方式,仅通过语音来执行重要操作
  • 尽可能不要阻止用户选择文本

触觉

  • 支持系统定义的触觉来实现触觉反馈

字体

  • 使用动态字体支持用户自己选择是否展示更大的文本(方便老年人)
  • 不同的字体大小要保证一致的信息层侧结构
  • 谨慎使用Ultralight、Thin 和 Light字重
  • 自定义字体确保清晰易读

颜色与效果

  • 不要仅依靠颜色区分对象或传达重要信息(帮助色盲色弱)
  • 首选系统颜色

应用图标

  • 拥抱简单
  • 尽可能少使用文本
  • 尽可能不使用照片
  • 根据不同的尺寸优化icon

颜色

  • 非游戏应用谨慎使用颜色
  • 适配黑暗模式
  • 在拨通光照条件测试配色方案
  • 尽可能使用系统颜色
  • 手表使用纯黑作为背景色使屏幕显得更大

图片

  • 为所有图片提供高分辨率图像
  • 手表上避免透明使图片更小

布局

  • 注意设备安全区域处理
  • 设计一个一致的布局适应设配旋转/调整窗口大小,同时尽可能多展示相同的内容
  • 利用位置传达相对重要性
  • 通过提供足够的空间提高基本信息的重要性
  • 视觉分组来分类内容
  • 注意纵横比
  • 适应系统文本大小变化
  • 展示部分屏幕外内容暗示有隐藏的内容(右侧或下侧滚动展示)
  • 多个设备上测试应用

动画

  • 使用动画表达事物变化
  • 有目的的增加动画,为了提高用户体验而不是影响用户操作
  • 力求真实、可信
  • 快速、精确
  • 避免在频繁的交互中使用动画

排版

  • 字体大小尽量保证大多数人可以轻松阅读
  • 使用字体粗细、大小和颜色强调重要信息,使内容更有层次
  • 尽量减少界面中使用的字体数量
  • 尽可能使用系统字体

用户操作模式、组件、输入、相关技术

这四个大类我简单介绍下每个大类包含了哪方面的功能,具体内容就不一一罗列了

用户操作模式

Patterns - Patterns - Human Interface Guidelines - Design - Apple Developer

用户常见操作、任务和体验,例如:

  • 进入全屏
  • 文件管理
  • loading
  • 拖放
  • 设置
  • 等等

组件

All components - Components - Human Interface Guidelines - Design - Apple Developer

重要!!!

大致可以看作SwiftUI组件库的参考文档,对于刚使用SwiftUI各种组件名和组件内容还对不上号的新人来说是一个很好的寻找自己需要的组件的地方

输入

Inputs - Inputs - Human Interface Guidelines - Design - Apple Developer

介绍了各种输入方式,如iPad的Apple Pencil,Apple Watch 的旋转表冠等

技术

All technologies

罗列了相关技术,如:AirPlay,HealthKit,CarPlay等

小知识

pt:是一个绝对单位,在不同的设备上保证展示出的长度一致。