IOS-iPhone设计规范ppt课件.ppt

中国互联网 高端教育品牌 第3 4章ios设计规范 中国 全球最大的智能手机市场手机超越台式电脑 成为中国最大的上网终端 国内安卓系统86 4 的占有量 目录 1 什么是App 2 苹果发展3 iPhone界面设计规范4 项目案例 一 什么是APP App是英文Application的简称 由于iPhone智能手机的流行 现在的APP多指智能手机的第三方应用程序 APP 目前比较著名的App商店 Apple的iTunes商店里面的AppStore Android的Google Play Store 诺基亚的ovi store Blackberry用户的 BlackBerry App World APP商店 三大平台的设计规范 其实我个人觉得掌握了2个平台的规范即可 一个是Android 另一个就是IOS 这2大平台目前市场占有率是蛮高的 第三个就是微软的WindowsPhone了 不过在接触的项目中 设计这个平台的还不算多 另外建议 苹果Watch这些也要了解下 苹果的iOS系统 app格式有ipa pxl deb 谷歌的Android系统 app格式为APK 诺基亚的S60系统 APP格式有sis sisx App格式 二 苹果发展 苹果公司 AppleInc 是美国的一家高科技公司 由史蒂夫 乔布斯 斯蒂夫 沃兹尼亚克和罗 韦恩 RonWayne 等三人于1976年4月1日创立 并命名为美国苹果电脑公司 AppleComputerInc 2007年1月9日更名为苹果公司 苹果公司在高科技企业中以创新而闻名 知名的产品有AppleII Macintosh电脑 Macbook笔记本电脑 iPod音乐播放器 iTunes商店 iMac一体机 iPhone手机和iPad平板电脑等 2012年8月21日 苹果成为世界市值第一的上市公司 苹果公司 AppleInc 1976苹果第一代标志 1976年 1998年第二代标志 当前苹果logo 苹果早期电脑 1977AppleI 1977AppleII 苹果早期电脑 1980AppleIII 后期 iMac 1997年发布彩色iMac电脑 MacBook iOS6操作系统 2012年6月12日发布 iOS10操作系统 2016年6月13日发布 iPhone发展历程 iPhone发展历程 2007年1月09日iPhone2007年6月29日iPhone2G2008年7月11日iPhone3G2009年6月09日iPhone3GS2010年6月08日iPhone42011年10月05日iPhone4S2012年9月13日iPhone52013年9月20日iPhone5S2013年9月11日iPhone5C2014年9月9日iPhone6iPhone6Plus2015年9月10日iPhone6SiPhone6SPlus2016年9月8日iPhone7iPhone7Plus iPhone界面设计规范 iPhoneSE 三 iPhone界面设计规范 ios新特性 为ios而设计 ios新特性 遵从 UI能够更好地帮助用户理解内容并与之互动 但却不会分散用户对内容本身的注意力 清晰 各种大小的文字应易读 图标应该醒目 去除多余的修饰 突出重点 很好的突出设计理念 深度 视觉的层次和生动的交互动作会赋予UI新的活力 不但帮助用户更好理解新UI的操作并让用户在使用的过程中感到惊喜 首先 去除了UI元素让应用的核心功能呈现的更加直接并强调其相关性 其次 直接使用iOS的系统主题让其成为应用的UI 这样能给用户统一的视觉感受 最后 保证你设计的UI可以适应各种设备和不同的操作模式 这样用户可以在不同的场景下舒适地享用你的应用 以内容为核心 充分利用屏幕尽量减少视觉修饰和拟物化设计的使用尝试使用半透明底板 保证清晰度 使用大量留白让颜色简化UI通过使用系统字体确保易读性使用无边框的按钮 用深度来体现层次 半透明背景浮层来区分和其余部分的内容以不同的层级展示使用无边框的按钮 适应性布局 iPhone的显示环境可根据不同的设备和不同的握持方向而改变 界面布局体验 布局包含的不仅仅是一个应用屏幕上的UI元素外观 提升重要内容或功能 让用户容易集中注意在主要任务上 使用视觉化的重量和平衡向用户展示相关的屏显重要元素 尽量避免UI上不一致的表现 界面布局体验 给每个互动的元素充足的空间 从而让用户容易操作这些内容和控件 普通屏幕常用的点按类控件的大小是44X44px 界面布局体验 标准手势 可交互元素吸引用户点击 为了暗示交互性 设计时会使用很多的线索 包括颜色 位置 上下文 表意明确的图标和标签等 输入信息的方式要简单 让用户更容易的进行选择 动画 谨慎地增加动画 特别是在那些无法提供沉浸性体验的应用中 在合适的时候 使自定义的动画与内置动画保持一致 使用风格类型一致的动画 品牌推广 品牌推广并不仅仅是在应用中展示品牌的颜色和Logo 理想状态下 你开发的某个特定品牌的应该通过创建独特的外观和感觉来为用户提供难忘的体验 色彩 如果你要创建多样的自定义颜色 要确保它们能够和谐共存 注意在不同情境下的颜色对比 字体 iPhone上的字体英文为HelveticNeue 中文Mac下是黑体 Win下可以用华文黑体 或者方正黑体简体 或者苹方 字体的大小没有严格的标准 一般标题为32 36px 正文内容为24 30px 辅助文字为20px或18px 一种简单方法是找个不错的APP 截图后放进PS参考里面的字体大小 设计规范 1 所有部件的尺寸必须是双数2 字号规范大 32 34 36正文 30 28 24 22辅助提示 18 203 普通屏幕下 最小触控点为44 44 Retain屏幕下 可点击部件不小于88px是在不够大的 可以在切图时用空白 透明 空间补足 4 常用灰色背景色 eeeeee 1像素线常用色值为 e8e8e8 常用灰色文字 333 6 9如果背景为白色 1像素线也可为 eeeeee5 除了广告图片 其他部件最好用形状工具绘制6 设计时 可点击的部件尽量和四周边框保持一定距离 一般控制左右20 30px的空间 7 设计时 要保持一个使用者而非设计者的思想 因为手机的可显示范围小 所以布局的时候