iOS人机界面设计指南 #1
翻译iOS人机界面设计指南。译文内容有删改,并增加了个人注解和案例补充说明, 仅供参考, 欢迎交流~
目录
一、设计理念 (Design Themes)
1.1 清晰 (Clarity)
1.2 遵从 (Deference)
1.3 层次 (Depth)
二、设计原则 (Design Principles)
2.1 设计语言的整体性 (Aesthetic Integrity)
2.2 一致性 (Consistency)
2.3 操作直观 (Direct Manipulation)
2.4 反馈 (Feedback)
2.5 隐喻 (Metaphors)
2.6 掌控感 (User Control)
一、设计理念 (Design Themes)
1.1 清晰(Clarity)
-文字应清晰易读, 图标应精确而清晰, 装饰应微妙而恰当, 高度关注功能性.
-负空间, 颜色, 字体, 图形, 界面元素应巧妙地突出重点并传达交互性.

1.2 遵从 (Deference)
//所谓遵从 (deference)按照我的理解, 是指对“内容”尊敬顺从, 以内容为导向性去指导设计.
-流畅的动效和清晰美观的界面可以帮助人们理解内容并与之互动.
-突出内容. 让内容占据主体.
-半透明和模糊通常会作为“更多”的引导暗示.
-减少使用边框, 渐变色和阴影, 可以让界面保持清爽的同时突出内容.

1.3 层次(Depth)
-独特的视觉层次和贴近现实的动效可以传达层次感, 赋予界面生命力并促进用户理解.
-触摸和可见性可以带来愉悦感, 使用户访问其他功能和内容时不会丢失对上下文的连贯理解.
-转场过渡动效可以传达层次感.
//表现层次感思路: 利用好垂直于屏幕的Z轴, 模仿物理现实中的透视原理. 常用的视觉表达是: 模糊、遮罩、阴影(Android的Material design用阴影较多), 常用动效是: 大小缩放、移动覆盖、模糊渐变

二、设计原则 (Design principle)
2.1 设计语言的整体性 (Aesthetic Integrity)
//Aesthetic Integrity直译应为“整体美学”.我理解为整个APP的设计包括交互、视觉都应从其产品定位出发. 如“效率至上”或“情感化”等核心概念渗透到图标设计、文案、导航等全局细节中.
-设计语言的整体性意味着App的外观交互与其功能的契合度.
-任务类App,可以通过使用微妙的、不引人注目的图形、标准化控件和可预测的交互方式来使用户保持专注.
-沉浸式应用如游戏,可以提供引人入胜的外观、乐趣、刺激,鼓励用户去发现与探索.

2.2 一致性 (Consistency)
-使用系统提供的界面元素、众所周知的图标、标准文本样式和统一的术语.
-以人们期望的方式整合功能和行为.

2.3 操作直观 (Direct Manipulation)
-操作直观的内容可以吸引注意力并便于用户理解.
-比如: 用户通过旋转设备这样直接的操作, 可以得到即时、可见的结果.
//移动端设计区别于pc端设计的一个特点. 在移动端上的设计更多可用手指直接触摸元素, 直接进行交互控制并实时呈现元素的变化. 而pc端需要通过手-鼠标指针-元素, 整个人机交互的需要以鼠标指针为中介. 比如旋转视图, pc上通过鼠标点击放大按钮, 这一行为实际上应该拆分为手-鼠标-按钮-图片, 而移动端只需要旋转一本书那样, 把设备直接旋转. 设计启发: 优先考虑直接对元素本身进行交互操作, 减少中介, 缩短控制链条; 考虑手势交互.

2.4 反馈 (Feedback)
-反馈可以确认行动并显示结果.
-应为每一个操作提供可感知的反馈.
-比如: 轻触时交互元素将突出显示; 进度条指示长时间运行的操作的状态, 动效和声音便于阐明操作结果.
//常见反馈: 视觉反馈、音效反馈、震动反馈、动效反馈; 常见使用场景: 轻触时、返回结果(成功、失败)时、加载时......

2.5 隐喻 (Metaphors)
-当APP的虚拟对象和交互方式是扎根于真实或数字世界的隐喻时, 会降低用户的学习成本.
-比如: 用户移开当前的视图以显示下面的内容. 用户对元素进行拖动、滑动. 用户切换开关, 拖动滑块、滚动picker. 甚至是浏览书籍和杂志.
2.6 掌控感 (User Control)
-在整个iOS系统中, 控制一切的是人, 而不是应用程序.
-HOW: APP可以建议行动方案、警告危险后果, 但让APP接管决策通常是错误的做法. 应在「授权用户」 和「避免有害结果」之间找到正确的平衡.
-HOW: 让用户觉得自己掌控了一切, 交互对象应让人感到熟悉和可预见,确认破坏性操作,并让「取 消」 操作变得容易.

待更新
三、应用框架 (App Architecture)
3.1 启动(Launching)
3.2 欢迎(Onboarding)
3.3 加载(Loading)
3.4 模态(Modality)
3.5 导航(Navigation)
3.6 请求权限(Requesting Permission)
3.7 设置(setting)
四、……
——————————————————
不得不说, 站酷的文章编辑器是异常的难用. 编辑器中的排版效果, 和真正发布出来的文章页面, 无论是数字标记、图文对齐、文本间距都前后不一致了😢…… 让我非常没有掌控感, 严重影响效率...... 现成的用户体验反面案例.




















































































