iosapp设计规范_ios设计规则

hacker|
95

文章目录:

iOS和安卓的设计规范有何不同

iOS设计规范围绕一个核心,就是“模态”

安卓设计规范如果总结成一句话,就是“任何地方均可点击”

区别iOS和安卓设计的10个check points

1. 如何全局导航:

iOS导航tab bar放在底部(顶部手短摸不着)

安卓导航tab个数少用固定tab,个数多用滚动tab,都在顶部(安卓的硬按键在底部,防止误操作)

(如果种类太多,都可以使用左侧抽屉设计)

2. 二级页页头导航条是什么顺序:

iOS导航

1 向上箭头+上级页面标题

2 当下页面标题(居中,可以没有)

3 操作(一般就一个)

iOS不需要给出logo

安卓导航

1 向上箭头+logo+当下页面标题

2 Spinner(optional)

3 重要操作(可能多个)

4 更多操作 (省略号竖向)

安卓不需要指出上一级页面标题

3. 搜索框设计

安卓搜索点击放大镜进入搜索

搜索框=非模态窗口+左箭头+LOGO+输入框(占位符)

iOS7搜索下拉滑出搜索框进入搜索

搜索框=模态窗口,没有左箭头,没有搜索按钮

4. 管理列表条目

iOS左滑能删掉条目

安卓长按操作条目(展现contextual menu或者contextual action bar)

ps:安卓4.0已经逐步接受手势操作,不那么严格

5. 批量管理条目

iOS右上角有编辑按钮,点击进入批量管理

安卓长按条目进入批量管理模态

5. 视觉

iOS主要内容白色,背景淡色,内容与背景衬线分割

安卓不使用背景,一切区域皆可点

6. 选择分类

iOS使用scope bar或者左上角抽屉设计(汉堡包)

安卓使用下拉菜单spinner(但是很少设计师喜欢)

7. 操作工具栏

iOS一律放在底部,叫split action bar

安卓一律放在顶部右端,叫contextual action bar

8. 产品LOGO

iOS不在导航中显示logo

安卓每一个页面左侧顶部都应该显示logo

9. 列表样式

iOS在条目上提供右箭头,提醒更多内容(optional)

安卓不放右箭头,一切区域皆可点击,不需要额外提醒

10. 按钮

安卓使用扁平方型按钮设计

iOS7建议borderless按钮设计

两者圆角尺寸也不同

以上是想到的10处不同,大家可以拿着它去看安卓和iOS上哪些app是符合规范的,哪些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和android设计规范区别

Android 整体视觉设计规范

App 界面的整体视觉组成大致可以分为四个部分:

StatusBar(状态栏)、TopBar(头部栏)、Body Content(内容区域)、FootBar(底部栏)。

StatusBar 的样式由系统 UI 决定,除背景配色外,不需要做其他的设计。

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界面设计尺寸和分辨率有哪些

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”。

3条大神的评论

  • avatar
    访客 2022-07-09 上午 05:17:30

    表中的文字就要小一些,字体大小为30,不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22,最小设置为20,再小就看不到啦。另外需要注意的一点是所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。ios和android设计规范区别Android 整体视觉设计

  • avatar
    访客 2022-07-08 下午 06:11:07

    们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢?因为我们手指有一个触碰面呀~低于上述的宽度,就可能碰不到。一定要非常注意用户的使用感受哦。☆ 关于分割线部分注意分割线不

  • avatar
    访客 2022-07-09 上午 03:43:04

    nt(内容区域)、FootBar(底部栏)。StatusBar 的样式由系统 UI 决定,除背景配色外,不需要做其他的设计。TopBar 两个系统平台规范上的显示高度与内容布局有明显的差异,按各自的规范进行设计。Body Content 除控件外

发表评论