《IOS-iPhone设计规范ppt课件》由会员分享,可在线阅读,更多相关《IOS-iPhone设计规范ppt课件(46页珍藏版)》请在金锄头文库上搜索。
1、中国互联网+高端教育品牌第3-4章ios设计规范中国:全球最大的智能手机市场手机超越台式电脑,成为中国最大的上网终端。国内安卓系统86.4%的占有量目录目录1.什么是App?2.苹果发展3.iPhone界面设计规范4.项目案例一、什么是APP:App是英文Application的简称,由于iPhone智能手机的流行,现在的APP多指智能手机的第三方应用程序。APP目前比较著名的App商店:Apple的iTunes商店里面的AppStore,Android的GooglePlayStore,诺基亚的ovistore,Blackberry用户的,BlackBerryAppWorld.。APP商店三大
2、平台的设计规范,其实我个人觉得掌握了2个平台的规范即可,一个是Android,另一个就是IOS,这2大平台目前市场占有率是蛮高的,第三个就是微软的WindowsPhone了。不过在接触的项目中,设计这个平台的还不算多。另外建议,苹果Watch这些也要了解下。苹果的iOS系统,app格式有ipa,pxl,deb,谷歌的Android系统,app格式为APK,诺基亚的S60系统,APP格式有sis,sisx。App格式二、苹果发展:苹果公司(AppleInc.)是美国的一家高科技公司。由史蒂夫乔布斯、斯蒂夫沃兹尼亚克和罗韦恩(RonWayne)等三人于1976年4月1日创立,并命名为美国苹果电脑公
3、司(AppleComputerInc.),2007年1月9日更名为苹果公司。苹果公司在高科技企业中以创新而闻名,知名的产品有AppleII、Macintosh电脑、Macbook笔记本电脑、iPod音乐播放器、iTunes商店、iMac一体机、iPhone手机和iPad平板电脑等。2012年8月21日,苹果成为世界市值第一的上市公司。苹果公司(AppleInc.)1976苹果第一代标志1976年-1998年第二代标志当前苹果logo苹果早期电脑1977AppleI1977AppleII苹果早期电脑1980AppleIII后期iMac1997年发布彩色iMac电脑MacBookiOS6操作系统(
4、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日iPhone7iPhone7Plu
5、siPhone界面设计规范iPhoneSE三、iPhone界面设计规范:ios新特性为ios而设计,ios新特性遵从:UI能够更好地帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力。清晰:各种大小的文字应易读,图标应该醒目,去除多余的修饰,突出重点,很好的突出设计理念。深度:视觉的层次和生动的交互动作会赋予UI新的活力,不但帮助用户更好理解新UI的操作并让用户在使用的过程中感到惊喜。首先,去除了UI元素让应用的核心功能呈现的更加直接并强调其相关性。其次,直接使用iOS的系统主题让其成为应用的UI,这样能给用户统一的视觉感受。最后,保证你设计的UI可以适应各种设备和不同的操作模式,
6、这样用户可以在不同的场景下舒适地享用你的应用以内容为核心充分利用屏幕尽量减少视觉修饰和拟物化设计的使用尝试使用半透明底板保证清晰度使用大量留白让颜色简化UI通过使用系统字体确保易读性使用无边框的按钮用深度来体现层次半透明背景浮层来区分和其余部分的内容以不同的层级展示使用无边框的按钮适应性布局iPhone的显示环境可根据不同的设备和不同的握持方向而改变。界面布局体验布局包含的不仅仅是一个应用屏幕上的UI元素外观。提升重要内容或功能,让用户容易集中注意在主要任务上。使用视觉化的重量和平衡向用户展示相关的屏显重要元素。尽量避免UI上不一致的表现。界面布局体验给每个互动的元素充足的空间,从而让用户容易
7、操作这些内容和控件。普通屏幕常用的点按类控件的大小是44X44px。界面布局体验标准手势可交互元素吸引用户点击为了暗示交互性,设计时会使用很多的线索,包括颜色、位置、上下文、表意明确的图标和标签等。输入信息的方式要简单让用户更容易的进行选择。动画谨慎地增加动画,特别是在那些无法提供沉浸性体验的应用中。在合适的时候,使自定义的动画与内置动画保持一致。使用风格类型一致的动画。品牌推广品牌推广并不仅仅是在应用中展示品牌的颜色和Logo。理想状态下,你开发的某个特定品牌的应该通过创建独特的外观和感觉来为用户提供难忘的体验。色彩如果你要创建多样的自定义颜色,要确保它们能够和谐共存。注意在不同情境下的颜色
8、对比。字体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.设计时,要保持一个使用者而非设计者的思想。因为手机的可显示范围小,所以布局的时候要考虑逻辑性,比如什么时候需要标签栏,什么页面需要标签按钮,都需要好好考虑在使用中的意义8.模块常用间距20-30pxiOS规范界面尺寸界面尺寸界面尺寸一、需要提供给程序的切图文件为:二、设计图中需要切出来的元素:(右图所示)工作流程作业:途牛旅游THANKS!