站百科网

Copyright © 站百科网 苏ICP备20021547号-5

iosui设计规范 ios安卓ui设计规范

2023-01-22 16:39:10站百科网 14

其实之前并没有太多人知道iosui设计规范但是最近热度上升受到了大家的关注。站百科网为你整理了ios安卓ui设计规范相关的最新内容,为你解读2023最新相关解释与说明仅供参考哦!

UI设计规范一iOS字体和切图及规范

我个人设计时按照iOS设计尺寸 iPhone6(750px*1334px)来进行页面的设计。在iOS开发中iPhone4、5、6、7是共用一套字体规范。在设计中按iPhone6设计版尺寸(750px*1334px)中适合的字体大小来定义。(开发过程中具体的问题需再具体分析)

在iOS中默认字体分为三类:

第一类: STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体,常用的方正黑体简体(不能商用)和微软雅黑(不能商用),也可以是冬青黑体简体(暂不详版权)和思源雅黑(免费)。

第二类: _H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及数字字体,常用的字体Helvetica

第三类: LockClock.ttf代表的是锁屏时间字体

中文字体: Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等(,看个人习惯,具体设计需求也可以是不常见字体)

英文字体: HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体),在选用不常见字体要在后面切图中:相关的字体要有图片形式导出.png图片,以及如有需要要有文字的字体包,当然还有使用版权的许可。

文件包命名规则是:项目名字+切图+作者名字+日期

例如:蚂蚁金服基金3.5.8.5版本迭代-H5页面设计_切图_李笑_20170321

文件包压缩一直采用.zip格式

文件包要包括:image,效果图+标注图,切图简单说明(word等文件)。

打开如下图:

在image中切图文件和切图命名中:

···不要出现大写,

···不要有中文、特殊符号以及空格,

···字母必须是小写字母,

···同类切图大小一致(后续文章单独整理切图方法和常见问题)

···iOS切图文件要有二倍像素适配(750px*1334px)iPhone6,iphone7和三倍像素适配(1242px*2208px)iphone6 plus,iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是:

模块_类别_功能_状态_@2x/@3x.png  (状态会有:点击状态,点击压下状态,禁用状态,选中状态等)

如:me_bg_nologin@3x.png和me_bg_nologin @2x.png

···iphone4:640X960

···iphone5:640X1136

···iphone6/7:750X1334

···iphone6/7:1242X2208

iPhone图标尺寸及整理如下:

后续会不断的整理和添加修正,欢迎批评指正

如果有用请分享给需要的朋友们

谢谢~

Android和IOS UI规范有什么区别

UI设计师在根据原型进行设计稿设计的时候,Android和IOS UI规范都是不同的,最好的条件下就会制作两个版本的设计稿来进行开发,下面我们一起来了解一下Android和IOS UI规范的区别。

01

先从设计稿尺寸开始说,Android的设计稿尺寸我们选择的是360*640,而IOS的设计稿尺寸为375*667。

02

从上到下开始了解,最上方的是状态栏,Android状态栏的高度为25px,IOS状态栏的高度为20px。

03

接下来就是导航栏,Android导航栏的高度为45px,IOS导航栏的高度为49px,两个版本中导航文字都是18px。

04

IOS导航栏有一点不同,那就是下方会多1px的分界,一般我们可用描边,或者是用Y=1的阴影来表示。

05

最下边就是标签栏了,Android标签栏的高度为50px,IOS标签栏的高度为49px。

06

IOS的标签也不同,也有向上的1px分界,用Y=-1的阴影或者是描边来表示。

07

在标签栏中肯定就是ICON图标了,Android和IOS的图标点击范围最小都是24px,IOS±4px调整,Android±8px调整。

08

关于设计的时候排版间距的问题,我的习惯是按照8px的倍数来排版,当然你也可以用10px,看个人习惯了。

特别提示

本文尺寸均为1x。

iosui设计规范 ios安卓ui设计规范 第1张

iOS和Android的APP界面设计规范(750×1334)

目前,很多UI设计师的UI设计稿是先做iPhone6(750×1334)的,目的是向上适配iPhone6Plus,同时向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。

iOS篇

————————————————————————————————————

界面尺寸

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

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

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

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

| 设备|App Store|程序应用|主屏幕|spotlight搜索|标签栏|工具栏和导航栏|

| :-------------:|:-------------:| :-----:|:-----:|:-----:|

|iPhone6 plus(@3x)|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|

|iPhone6(@2x)|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPhone5 - 5s - 5c(@2x) |1024 1024px|120 120px|144×144px|58 58px|75 75px |44 44px|

|iPhone4 - 4s(@2x)|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|

|iPad3 - 4 - Air - Air2 - mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|

|iPad1 - 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

|iPad mini |1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|

字体

iPhone 上的字体英文为: HelveticaNeue 至于中文,Mac下用的是黑体-简,Win下则为华文黑体,所有字体要用双数字号。

***用户体验部做过一个小调查, 对于app字体大小的调查结论如下:

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这四个文字大小,具体根据需求进行设计。

AI二次元绘画小程序内侧中 扫码免费体验

AI绘画小程序

须知:除非特别声明,否则均不代表站方观点,并仅供查阅不作为任何参考依据!

本文链接:https://www.aizhan321.com/wenda/58862.html

相关文章
昆明周边好玩的地方 昆明一日游的最佳攻略

说到昆明周边好玩的地方大家肯定都不陌生,但是你知道昆明一日游的最佳攻略到底是什么...

喜剧片爆笑电影经典 喜剧片爆笑电影经典语录

其实之前并没有太多人知道喜剧片爆笑电影经典但是最近热度上升受到了大家的关注。站百...

香奈儿的邂逅 香奈儿介绍

说到香奈儿的邂逅大家肯定都不陌生,但是你知道香奈儿介绍到底是什么吗?就由小编来为...