ios开发规范,ios产品设计规范

IOS界面设计尺寸标准规范

很多IOS APP UI设计稿都是以iphone6为基准的,方便向上适配iphone7的尺寸,也方便向下适配iphone5的尺寸。所以我给大家分享iPhone6的界面设计尺寸有哪些规范。

创新互联是一家专业的成都网站建设公司,我们专注成都网站设计、网站制作、网络营销、企业网站建设,卖友情链接一元广告为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。

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倍以上

浅谈iOS与Android设计规范:6类交互设计规范对比

iOS和Android两个不同的平台,肯定是有很多区别的,下面就从交互的角度,谈谈区别。

以前就读过IOS和Android的规范,但是觉得没啥大用处,因为现在APP为了保持一致性,通常在IOS和Android上的设计是一样的,而且一些小公司只设计IOS的交互原型,因为只要IOS上能用,安卓上肯定没问题,前段时间,和一个人聊,问我它俩的区别,当时一脸懵逼,不知从何说起。毕竟是两个不同的平台,肯定是有很多区别的,下面就从交互的角度,谈谈区别。

一、全局导航

IOS:通常放在底部,方便用户点击

Android:通常放在上面,下面有物理按键,防止误操作。

解析:因为Android比IOS多了物理按键,为了防止误操作,所以只能将全局导航放在上面,但是随着屏幕越来越大,上面是手指无法触及的区域,所以切换起来相对成本较高。

二、二级导航

IOS:通常放返回、上一级标题、标题(居中),操作通常只有一个

Android:通常返回控件、logo、下拉菜单、重要操作、更多操作

解析:IOS显示了上一级的名称,让用户点击返回后,心里有预期,Android放了APP的logo,增加了品牌性,但是就使用来讲,用户不知道点击会回到哪,下拉菜单和更多操作都需要点击才能显示,增加了操作步骤。

三、工具栏

IOS:通常放在最下面,方便操作

Android:放在导航栏里,将重要操作放在外面,其他放在更多里。

解析:IOS将操作都放在底部,区域更大,操作更方便。Android将操作放在了顶部,显得很拥挤,并且还收起了一部分,需要用户查找,但是却节省了空间,让内容显示区更大。

四、提示框

IOS:出现在屏幕中间,可以带图标,可以不带,可以是静态的,也可以是动态的。

Android:不可以带图标,不能是动态的,最多只可以带一个操作按钮,最多只能出现一个提示,不能和低端的悬浮按钮重合。

解析:IOS的设计理念是尽量不打扰用户,只要用户能看见变化,轻易不会出现提示,只有一些用户无法感知时,才会出现提示框,所以可以是动态的,像调节音量。Android的提示要比IOS重一些,因为它可以带一个按钮。

五、警示框

IOS:标题和按钮是必须的,可以有内容和输入

Android:主要有四种:用途、内容、事件、表现。

1、用途包含了标题,内容和事件。

六、手势定义

IOS的手势规定有8种,如下:

解析:IOS只有8种手势,Android有14种,但是很多都不常用,个人感觉IOS的8种已经完全够用了,定义那么多种,用户的学习成本就会提高,而且Android的有些手势并没有定义可以做什么,所以给出这么多手势也没有用。

结语

本文对IOS和Android的规范进行了对比,Android的规范那是相当详细,但是IOS的只给出了设计原则,所以,一些是我自己总结的,可能对比的还不够全面,欢迎大家一起讨论。

IOS UI设计规范是什么

在现在的互联网行业中,有一个职业叫做UI设计师,UI的日常工作就是保证高保真设计稿的设计,对于IOS以及Android来说都是有不同的设计规范的,下面我们一起来了解一下IOS UI的设计规范。

01

先来说说设计稿的尺寸,一般来说在做IOS设计稿的时候,设计稿尺寸我们都是选择650*1334这个尺寸,如果是1x的话,就是375*667。

02

我们从上到下以1x的规范来进行了解,最上边的就是状态栏了,状态栏的高度是20,宽度都是375。

03

那么状态栏都是有哪些元素呢?实际上就是信号、网络状态、时间以及电量和通知等。

04

在信号栏下边就是我们的导航栏,导航栏的高度为44px。

05

导航栏中肯定是有导航文字的,导航文字一般来说我们都是居中对齐,并且导航文字的大小应该为18px。

06

接下来就是最底部,最底部就是我们的标签栏了,标签栏中都是我们的切换图标,标签栏的高度为49px。

07

标签栏中的图标大小也是有规范的,最小的点击区域我们必须保证为24px,低于这个范围的话是不方便进行操作的。

08

在图标的下方一般都还有文字,这里文字的大小比较小,可以根据图标大小来进行调整,一般来说文字大小为11、10px。

09

总的来说着就我们IOS UI的设计规范了,其他还有就是内容区域的文字大小规范了,一般来说都是16、15、14、12这四个文字大小,具体根据需求进行设计。

浅谈iOS APP设计规范-按照iphone6尺寸

现在iOS app 的尺寸也变多了,要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配,以前一般用的是iphone5的尺寸,iPhone6 plus出现后,iPhone6尺寸成了大多数设计师的选择。

一、iPhone6的界面布局是:

屏幕是4.7英寸的,设计稿的大小750x1334px

☆ 状态栏(status bar):就是电量条,其高度为:40px;

☆ 导航栏(navigation):就是顶部条,其高度为:88px;

☆ 主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px;

☆ 内容区域(content):就是屏幕中间的区域,其高度为:1334px-40px-88px-98px=1108px

二、关于iPhone6的图标的尺寸是:

☆导航栏的图标高度为44px(绝大部分功能按钮)左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。

☆关闭按钮34px*34px,返回按钮26px,简单笔画图标40px。

三、常用的可点击高度-登陆框、密码框、功能列表等,统一设成88px。

四、搜索栏、输入框、评论框、地址框的高度,在iPhone6的原型图上,统一设成58px或60px。

五、在iPhone6设计稿中,界面元素之间的常用距离。

常用间距-亲密距离:20px(与边缘距离);疏远距离:30px;

其它距离-10px,44px等;

区块间隔:30-40px。

A、疏远距离:比如,改图标距离手机屏幕最左边的距离;

B、亲密距离:比如,左边图标与右边文字之间的距离。

六、黑白灰颜色常用的数值是:

① 文字黑色#333

② 文字深灰色#666

③ 文字浅灰色#999

④ 边框浅灰色#e5e5e5

⑤ 背景淡灰色#f2f2f2

⑥ 按钮背景纯白色#ffffff

一、注意事项

1、在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。

2、不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。

3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字选用的规则

在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式,网页中会有常用的几个字体。

以下是在72像素/英寸下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好, 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。

三、字体的大小

1、导航栏的文字大小是36-38px;

2、标题字号:32px ,34px;

3、内容区域的正文文字大小是:28px,30px;

4、辅助性文字:20px , 24px,26px;

5、标签栏(或主菜单栏)的图标下方的文字大小为20px;

6、终极原则:不大于所在要件高度的一半;

7、行间距:字号的1.2-1.5倍。

下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小:

iOS设计规范

状态栏:40px         导航栏:88px         标签栏:98px

状态栏:40px         导航栏:88px         标签栏:98px

状态栏:60px         导航栏:132px         标签栏:147px

状态栏:132px         导航栏:132px         标签栏:147px

状态栏:88px         导航栏:88px         标签栏:98px

全局边距: 32px、30px、24px、20px(建议最小20px,边距数字选择偶数)

卡片间距: 20px、24px、30px、40px(通常上下间距最小不低于16px,过小的间距会造成用户的紧张情绪)

最常用的两种布局方式,列表式和卡片式

「信息」页面通常采用列表式布局。注:列表舒适体验的最小高度是80px,最大高度视内容而定。

例: 微信高度:136px    QQ高度:132px     自如高度110px     唯品会高度:106px。

每张卡片的内容和形式都是相互独立的互不干扰。

卡片本身一般是白色,而卡片之间的间距颜色一般是浅色,不同产品风格颜色可能不同。

双栏卡片布局形式,常见于图片信息为主导,每一屏显示至少4张卡片。

常见图片尺寸比例:16:9、4:3、1:1、1:0.618(黄金比例)等

对齐、对称、分组

文字是APP中最核心的元素,是产品传达给用户的主要内容。

在APP中字号范围一般在20-36之间(@2x)。iOS 11中出现了大标题的设计,字号还是要根据产品属性酌情设定。

36px: 用在少数标题。例:导航标题、分类名称等。

32px: 用在少数标题。例:店铺标题等。

30px: 用在较为重要的文字或操作按钮。例:列表性标题分类名称等。

28px: 用于段落文字。例:列表性商品标题等。

26px: 用于段落文字。例:小标题模块描述等。

24px: 用于辅助性文字。例:次要的标语等。

22px: 用于辅助性文字。例:次要的备注信息等。

iOS 主流设备的分辨率分别是:

640x1136px:【(@2x)iPhone SE  】

750 x1134px:【(@2x)iPhone6s/7/8  】

1242x2208px:【(@3x)iPhone 6s/7/8 Plus  】

1125x2436px:【(@3x)iPhone X 】

750x1624px:【(@2x)iPhone X 】

注: 基准设计尺寸:750px x 1334px。


文章名称:ios开发规范,ios产品设计规范
当前地址:http://scyanting.com/article/dsddsdg.html