当前位置:首页 > 网站建设 > 正文内容

APP界面设计尺寸(ui设计手机界面尺寸)

网站建设2年前 (2023-03-25)1233

本篇文章给大家谈谈APP界面设计尺寸,以及ui设计手机界面尺寸对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

androidapp界面设计按什么尺寸

androidapp界面设计是按720*1280的,切图上可以点9切图做到所有手机的适配。

状态栏、导航栏和主菜单栏,以720*1280的尺寸来设计,那么状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px,因为是开源的系统,这里的数值也只能作为参考。

Android为了区别于IOS,从4.0开始提出了一套HOLO的UI风格设计风格,鼓励将底部的主菜单栏放到导航栏下面,从而避免点击下方材料误点虚拟按键,很多APP的新版中也采用了这一风格。

扩展资料:

注意事项:

1、通常情况要定位一个Icon只需给出上/下边距,左/右边距,标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份,通用型模块只需单独标明一份,如导航栏。

2、手机可视区域通常为宽度固定,长度超出边界可滑动,所以标注物体宽度时可按比例说明,如果要标注内容上下居中,左右居中,或等比可不标注。

3、当交付的是一张完整图片时,不需做机型适配,只需给高清图(1920*1080)即可,注意进行压缩。

4、若图标在不同页面重复出现,且尺寸相差不大,直接给出最大一份切图,并在圆形图标明尺寸,程序会根据需求缩放。

5、当背景是纯色时只需给出色值,Android使用16进制色值。

参考资料来源:百度百科-Android

参考资料来源:百度百科-界面设计

参考资料来源:百度百科-状态栏

参考资料来源:百度百科-导航栏

参考资料来源:百度百科-开源系统

参考资料来源:百度百科-切图

参考资料来源:百度百科-UI设计

ios app界面设计用什么尺寸?

界面尺寸规范

1、界面尺寸大小是:750x1334px。

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

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

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

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

iOS是由苹果公司开发的移动操作系统 。苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。

iOS与苹果的Mac OS X操作系统一样,属于类Unix的商业操作系统,原本这个系统名为iPhone OS,因为iPad,iPhone,iPod touch都使用iPhone OS,所以2010WWDC大会上宣布改名为iOS(iOS为美国Cisco公司网络设备操作系统注册商标,苹果改名已获得isco公司授权。

浅谈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倍。

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

关于APP界面设计尺寸和ui设计手机界面尺寸的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://hon-tex.cn/post/13831.html

分享给朋友:

“APP界面设计尺寸(ui设计手机界面尺寸)” 的相关文章

郑州制作网站(郑州制作网站便宜)

郑州制作网站(郑州制作网站便宜)

今天给各位分享郑州制作网站的知识,其中也会对郑州制作网站便宜进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、想做个网站,在郑州选择哪家网站建设公司比较好啊 2、郑州网站建设的一般流程是什么? 3、郑州的制作网站的公司,有什么好的推荐吗 4、想做一...

优化一个网站(优化网站是什么)

优化一个网站(优化网站是什么)

今天给各位分享优化一个网站的知识,其中也会对优化网站是什么进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、网站优化的方法有哪些? 2、网站怎么优化? 3、怎样优化网站 如何进行网站优化 4、网站优化有哪些方法? 网站优化的方法有哪些? 1.网站...

基于vue框架的网页模板(基于vue的web框架)

基于vue框架的网页模板(基于vue的web框架)

本篇文章给大家谈谈基于vue框架的网页模板,以及基于vue的web框架对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、bootstrap+vue.js做前端框架的特点 2、vue的ui框架有哪些 3、Vue移动端项目搭建: 手把手从零开始搭建 4、(一)基于...

短视频脚本制作模板(短视频脚本制作流程)

短视频脚本制作模板(短视频脚本制作流程)

今天给各位分享短视频脚本制作模板的知识,其中也会对短视频脚本制作流程进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、短视频脚本创作 2、短视频脚本范文 3、怎么写视频脚本 4、短视频脚本怎样写模板? 5、短视频脚本该如何撰写?求大神指导一下~...

微信h5页面制作工具(微信h5页面制作工具有哪些)

微信h5页面制作工具(微信h5页面制作工具有哪些)

本篇文章给大家谈谈微信h5页面制作工具,以及微信h5页面制作工具有哪些对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、微信H5页面免费制作工具有哪些,求各位大神解答 2、制作微信h5,易企秀或凡科,用哪个更好? 3、h5是什么工具制作的什么? 4、微信公众号编...

手抄报模板集(手抄报模板集合)

手抄报模板集(手抄报模板集合)

本篇文章给大家谈谈手抄报模板集,以及手抄报模板集合对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、2022年中秋节手抄报模板 2、法制在我心中手抄报模板 3、教师节手抄报模板初中生 2022年中秋节手抄报模板 2022年中秋节手抄报模板玄宗游月相传唐玄宗与申天师...