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