IOS界面设计尺寸标准规范
很多IOS APP UI设计稿都是以iphone6为基准的,方便向上适配iphone7的尺寸,也方便向下适配iphone5的尺寸。所以我给大家分享iPhone6的界面设计尺寸有哪些规范。IOS界面设计尺寸规范(以iPhone6为例) 一、界面尺寸规范1、界面尺寸大小是:750x1334px。 2、状态栏(status bar):就是电量条,其高度为:40px 3、导航栏(navigation):就是顶部条,其高度为:88px 4、主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px 5、内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px二、图标尺寸规范1、导航栏和工具栏尺寸大小44x44px; 2、标签栏尺寸大小75x75px 3、导航栏的文字大小最大值是34-36px,标签栏的图标下方的文字大小为20px。 4、内容区域的文字大小是:20px 24px,26px,28px,30px,32px,34px。三、设置界面的图标高度和开关滑动按钮的高度:58px 四、可点击高度规范在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。五、搜索栏高度规范搜索栏的高度,在iPhone6的原型图上,统一成58px。六、界面元素之间的距离规范在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30p x。 A、疏远距离:比如,所有元素距离手机屏幕最左边的距离。 B、亲密距离:比如,左边图标与右边文字之间的距离。七、原型设计中,需要考虑不同屏幕尺寸的苹果手机,在@1x的情况下的适配情况。1、iPhone5在@2x屏幕尺寸是,640x1136px对应的@1x,屏幕尺寸就是320x568px 2、iPhone6在@2x屏幕尺寸是:750x1334px对应的@1x,屏幕尺寸就是375x667px 3、iPhone6Plus在@3x屏幕尺寸是:750x1334px对应的@1x,屏幕尺寸就414x736px 八、iPhone6Plus的@3x,iPhone6的@2x, iPhone5的@2x的介绍1、iPhone6Plus是5.5英寸屏幕,1242x2208px-@3x的像素分辨率,逻辑分辨率是414x981px-@1x。物理尺寸是1080x1920px。这个物理尺寸,也是安卓机目前最流行的大屏设计稿尺寸。 2、iPhone6是4.7英寸屏幕,750x1334px-@2x的像素分辨率,逻辑分辨率是375x889px-@1x。 3、iPhone5是4英寸屏幕,640x1135px-@2x的像素分辨率,逻辑分辨率是320x757px-@1x。总结:iPhone6的原型规范如下:1、界面尺寸布局:满屏尺寸750x1334px; 2、高度电量条高度40px,导航栏高度88px,标签栏高度98px; 3、各区域图标大小导航栏图标44px,标签栏图标50px; 4、各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px; 5、常用的文字大小:32px,30px,28px,26px,24px,22px,20px; 6、常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,边框色深灰#CCCCCC; 7、常用可点击区域的高度:88px; 8、单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px; 9、常用间距:亲密距离:20px疏远距离:30px,其它距离:10px,44px等; 10、按钮和文本框,原型图做成直角的,圆角半径是多少,由Ui来设计; 11、这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的3倍以上
1、苹果手机iOS界面设计尺寸和分辨率
(1)界面尺寸:3.5英寸(iPhone1/2/3/4/4S)、4英寸(iPhone5/5S/5C)、4.7英寸(iPhone6/6S)、5.5英寸(iPhone6 plus/6S plus)等。
(2)分辨率:320*480像素(iPhone1/2/3)、640*960像素(iPhone4/4S)、640*1136像素(iPhone5/5S/5C)、750*1334像素(iPhone6/6S)、1080*1920像素(iPhone6 plus/6S plus)等。
2、苹果iOS界面
iOS是由苹果公司开发的移动操作系统。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。iOS与苹果的Mac OS X操作系统一样,属于类Unix的商业操作系统。
3、发展历程
(1)2007年1月9日苹果公司在Macworld展览会上公布,随后于同年的6月发布第一版iOS操作系统,最初的名称为“iPhone Runs OS X”。
(2)2007年10月17日,苹果公司发布了第一个本地化iPhone应用程序开发包(SDK),并且计划在2月发送到每个开发者以及开发商手中。
(3)2008年3月6日,苹果发布了第一个测试版开发包,并且将“iPhone runs OS X”改名为“iPhone OS”。
(4)2008年9月,苹果公司将iPod touch的系统也换成了”iPhone OS“。
(5)2010年2月27日,苹果公司发布iPad,iPad同样搭载了”iPhone OS”。这年,苹果公司重新设计了“iPhone OS”的系统结构和自带程序。
(6)2010年6月,苹果公司将“iPhone OS”改名为现在的“iOS”。
ios14桌面布局怎么设置?好看的ios14桌面摆放推荐!图片1
在本次的iOS 14中,苹果为我们带来了Widget小组件、APP Library、Picture in Picture画中画等大家或许有些眼熟的功能,也带来了一些有意思的小功能比如APP Clips,总之,趋同是有,真香警告也有,不过具体的上手体验究竟如何还是有待商榷。
这里,笔者为自己的陈年老机——iPhone Xs升级了最新的iOS 14,抢先为大家试水iOS 14究竟是否值得升级。
ios14桌面布局怎么设置?好看的ios14桌面摆放推荐!图片2
01 桌面布局大不同——小部件+应用库带来干净便捷的桌面体验
在本次的iOS 14中,通过几个小功能的升级带来了全新的桌面布局方式。首先,就是大家早有耳闻的“桌面小部件”的升级,目前来看,iOS经支持了大部分的系统应用比如天气、日历、待办事项等,都可以通过小部件的形式放置在主屏上。在加入了小部件之后,桌面上的图标自动适应调整。
与安卓的小部件不同的是app对小部件的尺寸大小做了限制,我们可以看到有2x2、2x4、4x4这几个尺寸的选择,显而易见的,更大的尺寸能够显示更多的内容。另外,不想放置过多的小部件但是又想应用这一系列功能,可以使用叠放功能,只占用2x4的空间,但是可以通过上下滑动在各个组件之间切换,“一件更比六件强”,倒是挺方便的。
当然,不想打乱桌面布局的小伙伴们也可以在负一屏中加入小部件,就像这样——
其实原本的负一屏就是放置着各种卡片,如今小部件也是用另一种形式来展现,但是功能确实差不多的。而且,小部件对比之前卡片的设计,给了用户更多的自主“装修”的空间。不过,也有小伙伴发来吐槽——等等,这莫不是微软的磁贴?
除了桌面小插件外,iOS 14的桌面隐藏功能搭配应用库功能也为美化桌面和提升用户使用效率带来了不小的改变。
在“编辑主屏幕”模式下,点击下方的页面切换按钮,就能够选择显示或者隐藏的桌面了。看着干干净净的桌面,不得不说,确实有点爽。
不过,桌面隐藏了,那我的APP上哪儿找?在iOS 14中,加入了程序库的功能,各种APP分类存放,常用应用分类应用更是在顶部醒目位置,方便你更快的找到自己想用到的APP。
另外,应用太多还可以通过首字母搜索让你一键找到想要的应用,可见iOS 14是在认真的照顾用户体验。当然,看着这个程序库,笔者还是陷入了沉思:
说清楚,你和安卓的“抽屉”到底是什
术语解读和系统平台对比
android是Google公司开发的操作系统。
iOS是苹果公司的移动操作系统。
导航方式不一样
iOS的Tab放在页面底部,不能通过滑动来切换,只能点击。也有放在上面的,也不能滑动,但有些Tab本身可以滑动,比如天猫的。还有新闻类的应用。
Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换,Tab多的话,Tab本身也可以滑动。比如豌豆荚,百度贴吧,QQ。总之,Android啥都可以有。
UI设计规范不一样
比如现在通常设计的尺寸对比如下:
iOS: 750*1334 或者 1242*2208
android:720*1280 或者 1080*1920
单条item的操作
iOS单条item的操作有两种,点击和滑动,点击一般进入一个新的页面,滑动会出现对这条item的一些常用操作,如微信里滑动一条对话,会出现标记未读和删除。
Android中,单条item的操作也有两种,点击和长按,点击一般进入一个新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。比如小米的短信页面;长按也可以弹出情境操作栏dialog,进行操作,比如Android版的微信。
例外的是,Android里面也可以有单条item的滑动,如新版QQ,这种比较少见。AndroidL的短信,可以滑动进行归档。大Android啥都可以有。
实体键
iOS只有一个实体键(音量,电源不算哈),home键,这个键有这么几个功能:
1、按一次,回到桌面。
2 、双击,出现多任务界面
3、iOS8里面,轻触两下Home键,调出单手模式
4 、指纹解锁
Android有四个实体键(现在很多被屏幕上的虚拟键代替,但功效是一样的)4.4一下的分别是back键,home键,menu键,和搜索键。4.4及以上,是back键,home键,多任务键。Android原生是这样,经过优化的Android就不一定了,比如魅族的smart bar,根据当前页面情景变化,不过蛮好用。
Android的back键,在大部分情况下,和页面上的返回功效一样。不过,Android的back键可以在应用件切换,还可以返回主屏幕。这个iOS里面的键不能在应用间直接切换。
浮窗设计元素不一样
Android里可以看到各种浮窗,流量,清理内存等等。iOS暂时还不支持这样的浮窗。越狱的貌似可以。
iOS和Android的UI区别七:图标尺寸和命名规范不一样
1、iOS和Android手机的APP图标尺寸规范和图标命名规范
2、对比PC、iOS、Android等终端APP的交互设计的差异化
界面尺寸规范
1、界面尺寸大小是:750x1334px。
2、状态栏(status bar):就是电量条,其高度为:40px
3、导航栏(navigation):就是顶部条,其高度为:88px
4、主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px
5、内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px
iOS是由苹果公司开发的移动操作系统 。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。
iOS与苹果的Mac OS X操作系统一样,属于类Unix的商业操作系统,原本这个系统名为iPhone OS,因为iPad,iPhone,iPod touch都使用iPhone OS,所以2010WWDC大会上宣布改名为iOS(iOS为美国Cisco公司网络设备操作系统注册商标,苹果改名已获得isco公司授权。
IPHONE 4 App Icon:114 x 114 PX
IPHONE 3GS App Icon:57 x 57 PX
IPHONE 4 App UI:960 x 640PX (设计时,高度还需要减去状态栏40PX)
IPHONE 3GS App UI:480x 320PX
它那一体化的整机好似半透明的玻璃鱼,透过绿白色调的机身,可隐约看到内部的电路结构,奇特的半透明圆形鼠标令人爱不释手。色彩用了亮丽的海蓝色,大面积使用弧面造型,有一种无拘无束的令人震撼的美感,给电脑业和设计界带来的影响是巨大的。从1901年第一台电子打字机面世,到一个世纪以后已经不可思议地变成了这个小绿蛋。一时间,敢于表达个性、令人耳目一新的优秀产品设计相继出笼。
从色彩设计上看imac鲜艳的色彩使它从乳白色的海洋中跳出来。
在imac设计中色彩与具体的形相结合,便具有极强的感情色彩和表现特征,具有强大的精神影响。当代美国视觉艺术心理学家布鲁墨 (CarolynBloomer)说:“色彩唤起各种情绪,表达感情,甚至影响我们正常的生理感受,”阿恩海姆则认为“色彩能够表现感情,这是一个无可辩驳的事实。”因而“色彩是一般审美中最普遍的形式”,色彩成为设计人性化表达的重要因素。在现代设计秉承包豪斯的现代主义设计传统,多以黑、白、灰等中性色彩为表达语言,体现出冷静、理性的产品设计时,imac的色彩设计使消费者的心理便为之一振,并豁然开朗起来――原来电脑等高科技产品也可以是彩色的,可以是五彩斑斓的。在现代设计的色彩运用中,融入了设计师和消费者个人的情感、喜好和观念。
从设计心理学角度看imac满足深层次的精神文化需求
imac已将设计触角伸向人的心灵深处,通过富有隐喻色彩和审美情调的设计,在设计中赋予更多的意义,让使用者心领神会而倍感亲切。科技的发展使电脑具有更多更微妙的功能和更复杂的操作程序,如何使产品更易于操作和被消费者认同是80年代以来设计师们所面临的课题。imac的设计给出了一种答案,,把一个新的复杂机器设计得像人类久违的伙伴那样平易亲切,又符合生产的要求。imac的成功得益于她对人性的特别关注和对“产品语意学“的成功运用。这一里程碑式的设计,使我们重新审视自己的产品和设计,并思索什么才是设计的本源。设计本原来源于人性化的创新。正如设计师卡里姆所说:“你呆在计算机屏幕前的时间越长,你的咖啡杯的外观就显得越重要。“高科技产品不应该是冷漠和令人生畏的,它更应该是亲切的、易操作的、对人性充满关爱的。
从时代生活方式上看imac成功的提高了数字化产品与人的亲和力。
自imac问世以来,其精美的外型和合理人机界面设计,是使用者面对电脑这一高科技产品的使用不再那么陌生和恐惧。科技的飞速发展,信息渠道的畅通无阻,给人们的生活带来无限便利的同时,也加快了工作和生活节奏,人们的内心充满了对技术的恐慌感。赋予高科技产品以人性化的友好界面,比任何时候都显得更为重要,imac界面设计开创了软件操作人性化的先河。淡雅的色调,适中的鼠标移动速度,下拉操作菜单,都非常的科学和富有人情味道。信息化社会的形成和发展,电脑作为一种方便而且理想的设计工具,导致设计手段、方法、过程等一系列的变化是毋庸置疑的,从而开始迈向数字化设计、非物质设计时代。信息时代设计将从有形的设计向无形的设计转变;从物的设计向非物的设计转变;从产品的设计向服务的设计转变。如果说数字化为当今人类社会生活的发展带来了崭新的生存意义,人性化设计则是对这种生存意义的物化诠释。