ios开发规范,安卓和ios的设计规范
IOS UI设计规范是什么
在现在的互联网行业中,有一个职业叫做UI设计师,UI的日常工作就是保证高保真设计稿的设计,对于IOS以及Android来说都是有不同的设计规范的,下面我们一起来了解一下IOS UI的设计规范。
成都创新互联沟通电话:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联网页制作领域10多年,包括石凉亭等多个行业拥有丰富的网站营销经验,选择成都创新互联,为企业保驾护航。
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的设计规范
链接URL:http://scjbc.cn/article/dseedsi.html