iOS人机界面指南之UI设计基础
2015-07-15 10:48:19 10 举报AI智能生成
iOS人机界面指南－UI设计基础
作者其他创作
大纲/内容
7、交互性和反馈（Interactivity and Feedback）
用户知道标准手势（Users Know the Standard Gestures）
标准手势
点击
拖拽
滑动
轻扫
双击
捏合
长按
摇晃
不要给标准手势赋予不同的行为
不要创建和标准手势功能相似的手势操作
可以用复杂手势作为完成某任务的快捷方式，但不能是唯一触达方式
除非是游戏，否则避免定义新的手势
在特定的环境中，可以考虑使用多指操
可交互元素吸引用户点击（Interactive Elements Invite Touch
一个关键的颜色可以给用户提供很强的视觉指引，尤其是没有冗余的其它颜色时
返回按钮使用多个线索指明其可交互性并传达其功能
一个图标或者标题提供了清晰的名称指引用户点击它
在内容区域，有必要给按钮添加边界或背景
子主题
反馈有助于理解（Feedback Aids Understanding）
尽可能将状态或其他的反馈信息整合到UI中
避免显示不必要的警告框
输入信息的方式要简单（Inputting Information Should Be Easy）
让用户更容易地进行选择
适宜地从iOS中获取信息
提供有用的反馈来平衡用户的输入
8、动画（Animation）
动画作用
传达状态和提供反馈
增强直接操作的感觉
帮助人们可视化他们的操作结果
谨慎地增加动画，特别是在那些无法提供沉浸性体验的应用中
在合适的时候，使自定义的动画与内置动画保持统一
开发者的自定义动画应该切合内置iOS应用的动画
使用风格类型一致的动画
大多数情况下，恰当一点的做法是让自定义动画更具现实性
9、品牌推广（Branding）
以精致优雅不唐突的方式植入品牌的颜色和图片
避免远离用户关心的内容
抵抗住诱惑，不要把你的logo贯穿整个应用
10、颜色与字体（Color and Typography）
色彩有助于增进沟通（Color Enhances Communication）
如果你要创建多样的自定义颜色，要确保它们能够和谐共存
注意在不同情境下的颜色对比
当你使用自定义的栏颜色时，着重考虑半透明的栏和应用内容
注意颜色的盲区
考虑选择一种基准色颜色来表征交互性与状态
色彩可以向用户传达信息，但不一定会以你希望的方式
大多数情况下，不能让颜色喧宾夺主，让用户分心
文字应该清晰易读（Text Should Always Be Legible）
采用Dynamic Type
能自动调整文字的粗细，字母间距以及行高
为语义上有区别的文本模块指定不同的文本样式，比如正文、脚注或者标题
文本可以根据用户在动态文字和可访问性设置中指定字体大小的变化作出适当的响应
文本尺寸的响应式变化需要优先考虑内容
在适当的情况下，当用户选择一个不同的文本尺寸时要调整页面布局
确保一个自定义字体在不同尺寸下的所有类型都具备可读性
常情况下，应用中整体应该使用单一字体
11、图标和图形（Icons and Graphics）
应用图标（The App Icon）
应用图标是整个应用品牌的重要组成部分
最好的应用图标是独特的，整洁的，打动人心的，让人印象深刻的
个好的应用图标应该在不同的背景以及不同的规格下都同样美观
栏图标（Bar Icons）
图形（Graphics）
支持Retina显示屏
显示照片或图片时请使用原始尺寸，并不要将它拉伸到大于100%
不要使用带有苹果符号与版权的图片
12、术语和措辞（Terminology and Wording）
保证你使用的术语是用户能理解的
使用非正式的友好语气，但不需要太过低三下四
像新闻编辑一般遣词造句，避免不必要的冗余语句
给控件加上短标签或者容易理解的图标
描述时间时要注意准确性
写App Store描述
确描述你的应用
强调应用的品质与亮点
修正所有的拼写、语法与标点符号错误
尽量少用全大写的词汇
可以描述bug修复情况
尽量少用全大写的词汇
1、为iOS而设计（Designing for iOS）
革新关键词
遵从
清晰
深度
以内容为核心（Defer to Content）
充分利用整个屏幕
尽量减少视觉修饰和拟物化设计的使用
尝试使用半透明底板
保证清晰度（Provide Clarity）
使用大量留白
让颜色简化UI
通过使用系统字体确保易读性
使用无边框的按钮
用深度来体现层次（Use Depth to Communicate）
主屏幕上方使用半透明背景浮层
例如备忘录、日历
2、iOS应用解析（iOS App Anatomy）
UIKit提供的UI组件
Bars
内容视图
控制按钮
临时视图
UIKit定义对象实现的功能
手势识别
绘图
辅助功能
打印支持
3、适应性和布局（Adaptivity and Layout）
为自适应而开发（Build In Adaptivity）
显示环境display environment
尺寸类别（size class）
常规的（regular）
压缩的（compact）
使用模式
横屏
竖屏
iOS能随着显示环境和尺寸类别变化而自动生成不同布局
在不同环境提供良好体验（Provide a Great Experience in Each Environment）
在所有环境下都保持对主体内容的专注
避免布局上不必要的变化
如果你的应用只在一个方向上运行，那么请直接一点
避免提示人们旋转设备的提示UI出现
支持同一个方向上的变化
如果你的应用将设备方向翻转视为用户输入（的一种指令），那么就按照程序设定的方式来响应设备翻转
使用布局来沟通（Use Layout to Communicate）
布局包含的不仅仅是一个应用屏幕上的UI元素外观
提升重要内容或功能，让用户容易集中注意在主要任务上
使用视觉化的重量和平衡向用户展示相关的屏显重要元素
使用对齐来让阅读更舒缓，让分组和层次之间更有秩序
确保用户能明白处于默认尺寸的首要内容的含义
准备好改变字体大小
尽量避免UI上不一致的表现
给每个互动的元素充足的空间，从而让用户容易操作这些内容和控件
4、起始与停止（Starting and Stopping）
即时启动（Start Instantly）
尽可能避免使用闪屏或者其他启动体验
避免让用户做过多设置
聚焦在满足80%的用户需求上
尽可能用其他方式获取更多（用户）信息
如果你必须获取设置信息，在你的应用中直接向用户询问，然后尽快保存这些设定
尽可能让用户晚一些再登录
谨慎使用新手引导
只提供开始使用应用所必需的信息
使用交互动画来吸引用户，并让用户通过实际上手来学习如何使用
能够简单地取消或者跳过新手引导
不要太早要求用户去给你的应用评分
一般建议按照屏幕默认的定向方式启动你的应用
准备一张与应用首页看上去一样的闪屏
如果可能，不要让用户在初次启动应用时阅读免责声明或者确认用户协议
在应用重启后，需要恢复到用户退出使用时的状态，让他们可以从中断之处继续使用
时刻准备好停止（Always Be Prepared to Stop）
应用无需关闭或退出选项
不要强制让应用退出
如果应用中所有的功能当前都不可用，那么应该显示一些内容来解释当前的情形，并建议用户如何进行后续操作
如果只有部分功能不可用，那么只要当用户使用这些功能时显示提示即可
5、导航（Navigation）
导航类型
分层
扁平
内容或经验驱动
用户应该时刻清楚自己当前在应用中所处的位置，以及如何前往他们所想到的页面
使用导航栏（Navigation Bar）帮助用户轻松访问分层内容
使用标签栏（Tab Bar）显示同类型的内容或功能
使用页面控件（Page Control）显示同类项或同类页
一般来说，最好能给用户到达每一屏的路径
6、模态情境（Modal Contexts）
使用情形
必须引起用户关注的时候
一个独立的任务需要完成或者很明确需要被放弃，为了避免在模棱两可的状态下遗漏用户信息的时候
保持模态任务的简单，简短和高度聚焦
始终提供明显、安全的途径退出模态任务
一个任务需要多层级的模态视图时，确保用户理解点击完成按钮的结果
保证提醒对话框的内容都是重要且可操作的
尊重用户关于接收通知的选择
13、与iOS的整合（Integrating with iOS）
正确使用标准UI元素（Use Standard UI Elements Correctly）
好处
标准UI元素会根据iOS官方的更新而自动更新——而自定义元素不会。
标准UI元素对于你自定义外观和行为来说拥有优秀的扩展性
避免用户学习成本
注意点
严格遵循每个UI元素的设计规范
不要混用不同版本的iOS里的UI元素
大体来说，请避免创造自定义UI元素来表现标准交互行为
不要用系统自带的按钮和图标表达其他含义
如果你的应用是沉浸式体验，那么创造全新的自定义UI是合理的
弱化文件和文档处理（Downplay File and Document Handing）
图形库视图（document library view）特征
高度图形化
让用户用最少的动作完成自己的任务
包含新建文档功能
给用户足够的信心，让他们相信除非主动取消或者删除，他们的成果会被随时妥善保存
必要时提供可配置选项（Be Configurable If Necessary）
尽可能在主界面提供设置选项
如果应用内相关设置需要在系统设置中改变，帮助用户直接访问系统设置
充分利用iOS技术（Take Advantage of iOS Technologies）
0 条评论
下一页
为你推荐
查看更多
