iOS设计

苏文杰 2016-11-29 17:51:48

本点博可采用思维简图模式查看

!革新风格
!!遵从
!!清晰
!!纵深
!以内容为核心
!!充分利用整个屏幕
!!尽量减少视觉修饰和拟物化设计的使用
!!尝试使用半透明底板
!!保证清晰度
!!!使用大量留白 如短信界面
!!!让颜色简化UI
!!!通过使用系统字体确保易读性
!!!使用无边框的按钮
!!用深度来体现层次。日历,备忘录

!iOS应用解析
!!UIKit framework
!!!Bars:导航栏
!!!内容视图:集合视图和表格视图
!!!控制按钮
!!!临时视图:如警告提示和动作菜单

!适应性和布局
!!为自适应而开发
!!在不同环境提供良好的体验
!!!在所有环境下都保持对主体内容的专注
!!!避免布局上不必要的变化
!!!如果你的应用只在一个方向上运行,那么请直接一点
!!!!避免提示人们旋转设备的提示UI出现
!!!!支持同一个方向上的变化
!!使用布局来沟通
!!!布局应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。
!!!提升重要内容或功能,让用户容易集中注意在主要任务上
!!!使用视觉化的重量和平衡向用户展示相关的屏显重要元素
!!!使用对齐来让阅读更舒缓,让分组和层次之间更有秩序
!!!确保用户能明白处于默认尺寸的首要内容的含义
!!!准备好改变字体大小
!!!尽量避免UI上不一致的表现
!!!给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件

!起始与停止
!!即时启动
!!!尽可能避免使用闪屏或者其他启动体验
!!!避免让用户做过多设置
!!!!聚焦在满足80%的用户需求上
!!!!尽可能用其他方式获取更多(用户)信息
!!!!如果你必须获取设置信息,在你的应用中直接向用户询问,然后尽快保存这些设定
!!!尽可能让用户晚一些再登录
!!!谨慎使用新手引导
!!!!只提供开始使用应用所必需的信息
!!!!使用交互动画来吸引用户,并让用户通过实际上手来学习如何使用
!!!!能够简单地取消或者跳过新手引导
!!!不要太早要求用户去给你的应用评分
!!!建议按照屏幕默认的定向方式启动你的应用
!!!准备一张与应用首页看上去一样的闪屏
!!!如果可能,不要让用户在初次启动应用时阅读免责声明或者确认用户协议
!!!在应用重启后,需要恢复到用户退出使用时的状态,让他们可以从中断之处继续使用
!!时刻准备好停止
!!!iOS 应用无需关闭或退出选项
!!!!随时并尽快保存用户信息,因为在后台的应用随时有可能被终止或退出。
!!!!当应用停止的时候保存当前状态,使用户可以在回到应用时能从中断之处继续使用。例如,在使用可滚动的数据列表时,退出后保存列表所在的位置。
!!!不要强制让应用退出
!!!如果应用中所有的功能当前都不可用,那么应该显示一些内容来解释当前的情形,并建议用户如何进行后续操作
!!!如果只有部分功能不可用,那么只要当用户使用这些功能时显示提示即可

!导航
!!分类
!!!分层。
!!!扁平。
!!!内容或经验驱动
!!!用户应该时刻清楚自己当前在应用中所处的位置,以及如何前往他们所想到的页面
!!!使用导航栏(Navigation Bar)帮助用户轻松访问分层内容
!!!使用标签栏(Tab Bar)显示同类型的内容或功能
!!!在应用中,如果每屏显示的都是同类项或同类页,可以使用页面控件
!!!一般来说,最好能给用户到达每一屏的路径

!模态情境
!!使用情景
!!!必须引起用户关注的时候。
!!!Ÿ 一个独立的任务需要完成或者很明确需要被放弃,为了避免在模棱两可的状态下遗漏用户信息的时候
!!保持模态任务的简单,简短和高度聚焦
!!保持模态任务的简单,简短和高度聚焦
!!始终提供明显、安全的途径退出模态任务
!!保证提醒对话框的内容都是重要且可操作的
!!尊重用户关于接收通知的选择

!交互性和反馈
!!用户知道标准手势
!!!不要给标准手势赋予不同的行为
!!!不要创建和标准手势功能相似的手势操作
!!!可以用复杂手势作为完成某任务的快捷方式,但不能是唯一触达方式
!!!除非是游戏,否则避免定义新的手势
!!!在特定的环境中,可以考虑使用多指操作
!!可交互元素吸引用户点击
!!!使用关键的颜色、多个线索指明和清晰的标题引导用户
!!!在内容区域,有必要给按钮添加边界或背景
!!反馈有助于理解
!!!尽可能将状态或其他的反馈信息整合到UI中
!!!避免显示不必要的警告框
!!输入信息的方式要简单
!!!让用户更容易地进行选择
!!!适宜地从iOS中获取信息
!!!提供有用的反馈来平衡用户的输入

!动画
!!作用
!!!传达状态和提供反馈
!!!增强直接操作的感觉
!!!帮助人们可视化他们的操作结果
!!注意
!!!谨慎地增加动画,特别是在那些无法提供沉浸性体验的应用中
!!!在合适的时候,使自定义的动画与内置动画保持统一
!!!开发者的自定义动画应该切合内置iOS应用的动画
!!!使用风格类型一致的动画
!!!大多数情况下,恰当一点的做法是让自定义动画更具现实性

!品牌推广
!!每个自定义的元素本身都需要具备良好的观感和功能性,并与应用中其他元素保持一致
!!遵从、清晰度和深度,花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味,并把它们在你的自定义元素中表达出来。
!!以精致优雅不唐突的方式植入品牌的颜色和图片
!!避免远离用户关心的内容
!!抵抗住诱惑,不要把你的logo贯穿整个应用

!颜色与字体
!!色彩有助于增进沟通
!!!如果你要创建多样的自定义颜色,要确保它们能够和谐共存
!!!注意在不同情境下的颜色对比
!!!当你使用自定义的栏颜色时,着重考虑半透明的栏和应用内容
!!!注意颜色的盲区
!!!考虑选择一种基准色颜色来表征交互性与状态
!!!色彩可以向用户传达信息,但不一定会以你希望的方式
!!!大多数情况下,不能让颜色喧宾夺主,让用户分心
!!文字应该清晰易读
!!!采用动态字体
!!!能自动调整文字的粗细,字母间距以及行高。
!!!为语义上有区别的文本模块指定不同的文本样式,比如正文、脚注或者标题。
!!!文本可以根据用户在动态文字和可访问性设置中指定字体大小的变化作出适当的响应
!!!文本尺寸的响应式变化需要优先考虑内容
!!!在适当的情况下,当用户选择一个不同的文本尺寸时要调整页面布局
!!!确保一个自定义字体在不同尺寸下的所有类型都具备可读性
!!!通常情况下,应用中整体应该使用单一字体

!图标和图形
!!应用图标
!!!应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事,以及与用户建立情感连接的机会。
!!!最好的应用图标是独特的,整洁的,打动人心的,让人印象深刻的。
!!!一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能让图标在小尺寸时变得不清晰。
!!栏图标
!!图形
!!!支持Retina显示屏
!!!显示照片或图片时请使用原始尺寸,并不要将它拉伸到大于100%
!!!不要使用带有苹果符号与版权的图片

!术语和措辞
!!保证你使用的术语是用户能理解的
!!使用非正式的友好语气,但不需要太过低三下四
!!像新闻编辑一般遣词造句,避免不必要的冗余语句
!!给控件加上短标签或者容易理解的图标
!!描述时间时要注意准确性

!与iOS的整合
!!正确使用标准UI元素
!!!严格遵循每个UI元素的设计规范
!!!不要混用不同版本的iOS里的UI元素
!!!大体来说,请避免创造自定义UI元素来表现标准交互行为
!!!不要用系统自带的按钮和图标表达其他含义
!!!如果你的应用是沉浸式体验,那么创造全新的自定义UI是合理的

!弱化文件和文档处理
!!高度图形化
!!让用户用最少的动作完成自己的任务
!!包含新建文档功能
!!给用户足够的信心,让他们相信除非主动取消或者删除,他们的成果会被随时妥善保存
!!必要时提供可配置选项
!!!尽可能在主界面提供设置选项
!!!如果应用内相关设置需要在系统设置中改变,帮助用户直接访问系统设置

!充分利用iOS技术