iosapp设计规范(安卓和ios的设计规范)
本文目录一览:
设计APP平面时图片的分辨率是多少?
1、苹果iOS版本的iphone APP UI设计尺寸规范:
2、Andriod 版本的APP UI设计尺寸规范
主流的手机设计尺寸:460*800 px 1280*720 px 设计版本是:1280*720 px
视觉设计师通常在480x800px下进行设觉设计,然后进行适配HVGA(320×480)等。
我们设计稿的尺寸是选最大的 1280*720来设计。然后按照常用的分辨率来切几个版
ios和android设计规范区别
Android 整体视觉设计规范
App 界面iosapp设计规范的整体视觉组成大致可以分为四个部分iosapp设计规范:
StatusBar(状态栏)、TopBar(头部栏)、Body Content(内容区域)、FootBar(底部栏)。
StatusBar 的样式由系统 UI 决定iosapp设计规范,除背景配色外,不需要做其iosapp设计规范他的设计。
TopBar 两个系统平台规范上的显示高度与内容布局有明显的差异,按各自的规范进行设计。
Body Content 除控件外,采用相同的布局与视觉设计。
FootBar 除控件外,采用相同的布局与视觉设计。
二、Android差异化设计案例解读
1. StatusBar/TopBar 差异化设计
2. 常用的三个系统图标/控件差异化
3. 搜索/输入控件差异化
4. 弹窗样式差异化
三、Android系统交互与iOS系统交互的差异化设计
1. 交互方式:
除了上面提到了弹窗样式与交互差异化之外,对于一些系统交互行为,推荐尽量使用 iOS 与 Android 各自平台的系统控件与交互方式,降低开发与用户学习成本。系统交互行为主要包含以:返回上级/关闭当前页面的方式、通知开启或者关闭设置、发送/提交内容(键盘自带或者新增按钮点击)、Item 列表排序/删除、提示窗显隐、时间选择控件、手势操作等等。
2. 交互动效:
交互动效也推荐尽量使用 iOS 与 Android 各自平台的系统提供的动效。比如 iOS 的镜头切近与高斯模糊,Android 的纸墨磁吸等等。
单条 item 的交互差异示例
总体来说,就是以 iOS 版为参照,底部栏与中间内容区域尽量保持相同的设计,通过对状态栏、头部样式、控件(开关、选框、搜索、输入)、系统图标(返回、分享、更多)、弹窗样式、系统交互进行 Android 规范化差异,以保证该 App 的设计在两个不同的系统平台即能符合中国用户的使用习惯,又能适当体现系统的不同风格与特性。
安卓/ios中,app设计时常见的尺寸有哪些
大家都知道手机采用的:一个是苹果的iOS系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。
而安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。
今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是plus版本,这种一般切图命名为@3X。
今天我们的主题就是探讨iOS的界面尺寸规范。
首先苹果分为两种尺寸,一种是中码比如6s、7、8等,这种我们一般切图命名为@2X。还有一种就是Plus版本,这种一般切图命名为@3X。
苹果6s 的尺寸750px * 1334px,6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍,怎么说呢,就是6s之类的手机想要变成Plus,我们设计师稍微想要偷懒一下设计,只需要整体扩大1.5倍,比如图标。
来分析一下界面的尺寸规范:
首先是状态栏,就是信号电池栏的高度为40px。导航栏部分,就是“设置”栏高度为88px。
而下边的底部栏(导航栏)高度则为98px。
注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分,我们就可以任意填充内容,Banner或者图标?
☆ 关于图标部分
苹果的图标极具有美感,完全符合栅格黄金比例,所以看起来十分协调。因为都是使用的网格进行规范化设计,所以一整套图标都保持着高统一性。
整个点击图标最小不能小于44px,一般大小为58px,圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。
☆ 关于分割线部分
注意分割线不是一条线,是一个宽度为1px的矩形,而且颜色多为灰色。
☆ 关于板块与板块之间
板块与板块之间的灰色条间隔是30-70之间,一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px,列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师,这一点是要考虑的是吧?
☆ 关于列表中的尺寸规范以及字体要求
☆ 关于左右间隔的安全区域
这个安全区域又称之为留白边距,iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整,宽度一般在16px--30px浮动,最大的特点就是数值全是偶数。
☆ 关于切换按钮的尺寸
☆ 关于字体
iOS系统的字体是苹方字体,字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。
主标题的字体大小设置一般是32-36左右,加粗居中。列表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。
另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。
iOS和安卓的设计规范有何不同
是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备iosapp设计规范,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。
iOS是苹果公司的移动操作系统。
iOS是由苹果公司开发的移动操作系统,苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。
iOS和安卓的ui区别二:UI设计规范不一样。
具体的UI设计规范详解请点击阅读:iOS、Android、WindowsPhone官方设计规范汇总
比如现在通常设计的尺寸对比如下:
iOS: 750*1334 或者 1242*2208
android 720*1280 或者 1080*1920
iOS和安卓的ui区别三:导航方式不一样
iOS的Tab放在页面底部,不能通过滑动来切换,只能点击。也有放在上面的,也不能滑动,但有些Tab本身可以滑动,比如天猫的。还有新闻类的应用。
Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换,Tab多的话,Tab本身也可以滑动。比如豌豆荚,百度贴吧,QQ。总之,Android啥都可以有。
iOS和安卓的UI区别四:单条item的操作
iOS单条item的操作有两种,点击和滑动,点击一般进入一个新的页面,滑动会出现对这条item的一些常用操作,如微信里滑动一条对话,会出现标记未读和删除。
Android中,单条item的操作也有两种,点击和长按,点击一般进入一个新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。比如小米的短信页面;长按也可以弹出情境操作栏dialog,进行操作,比如Android版的微信。
OS和安卓的UI区别五:实体键
iOS只有一个实体键(音量,电源不算哈),home键,这个键有这么几个功能:
1、按一次,回到桌面。
2 、双击,出现多任务界面
3、iOS8里面,轻触两下Home键,调出单手模式
4 、指纹解锁
Android有四个实体键(现在很多被屏幕上的虚拟键代替,但功效是一样的)4.4一下的分别是back键,home键,menu键,和搜索键。4.4及以上,是back键,home键,多任务键。安卓原生是这样,经过优化的Android就不一定iosapp设计规范了,比如魅族的smart bar,根据当前页面情景变化,不过蛮好用。
Android的back键,在大部分情况下,和页面上的返回功效一样。不过,Android的back键可以在应用件切换,还可以返回主屏幕。这个iOS里面的键不能在应用间直接切换。
iOS和安卓的UI区别六:浮窗设计元素不一样
安卓里可以看到各种浮窗,流量,清理内存等等。iOS暂时还不支持这样的浮窗。越狱的貌似可以。
iOS和安卓的UI区别七:图标尺寸和命名规范不一样
1、iOS和安卓手机的APP图标尺寸规范和图标命名规范
2、对比PC、iOS、Android等终端APP的交互设计的差异化