正文

ui设计网页尺寸（ui设计网页尺寸大小）

发布时间：2023-04-28 03:10:16 稿源：创意岭阅读： 1444

大家好！今天让创意岭的小编来大家介绍下关于ui设计网页尺寸的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、UI设计网页时，导航栏尺寸规格一般是多少
2、IOS界面设计尺寸标准规范
3、UI界面设计规范有哪些？
4、UI设计一般新建PS文件的时候，通用的尺寸和分辨率是多少？

ui设计网页尺寸（ui设计网页尺寸大小）

一、UI设计网页时，导航栏尺寸规格一般是多少

目前ios的尺寸都是_@2x，除了plus需要注意导航栏60PX，底部标签栏148PX，尺寸需要_@3X也就是1.5倍计算。

二、IOS界面设计尺寸标准规范

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

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

三、UI界面设计规范有哪些？

一、字体

iOS的字体：

中文字体：苹方 / PingFang SC

CSS：Font-Family：PingFang SC

英文、数字：Helvetial

Andioid的字体：

中文字体：思源黑体 / Noto Sans Han

英文、数字：Roboto

二、规范

1、 iPhone界面尺寸

2、 iPhone图标尺寸

3、 iPad的设计尺寸

4、 iPad的图标尺寸

5、 Andioid的图标尺寸

6、Andioid的dp/sp/px换算表

三：小结

iPhone的主流设计尺寸：750x1334 px

1242x2208 px

Andioid的主流设计尺寸：720x1280 px

1080x1920 px

四、UI设计一般新建PS文件的时候，通用的尺寸和分辨率是多少？

移动端UI设计文件，目前以ihone6，750X1334px为基准可向上向下适配，@2X图基本可以与安卓系统2倍图相适配。分辨率为72像素。

大连富海优创UI设计工作室

以上就是关于ui设计网页尺寸相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

猜你喜欢

ui设计经典案例（ui设计经典案例分析）

ui设计线上课程（ui设计线上课程有哪些）

ui设计类型有哪些（ui设计类型有哪些种类）

ui设计类型是指什么（ui设计类型是指什么）

ui设计简约风格（ui设计简约风格图片大全）

ui设计简历项目经验案例（ui设计简历项目经验案例分享）

ui设计简历项目经验描述（ui设计师简历项目经验怎么写）

UI设计笔记（ui设计笔记本电脑排名）

ui设计稿（ui设计稿转换成前端代码）

ui设计种类（ui设计常见类别有哪些）

问大家

一个技能全面的UI/UE设计师需要必备技能是什么？

ui设计真的很缺人吗，为什么那么多公司搞ui设计收费培训？

工作三年的UI设计师，未来该如何发展？你怎么看？

美工想进阶成设计师往D方向走好还是UI？

平面设计师怎么快速进入互联网公司做ui设计？

济南，你们要的三月三千佛山相亲大会来了！火速报名中……

济南市婚恋所哪个好?举办相亲会最多的是哪一家?正规一点的

让品牌有温度、有情感
专注品牌策划15年

ui设计网页尺寸（ui设计网页尺寸大小）

猜你喜欢

问大家

推荐专题

相关主题

创意岭品牌策划

提交需求1对1免费咨询

让品牌有温度、有情感 专注品牌策划15年

ui设计网页尺寸（ui设计网页尺寸大小）

猜你喜欢

问大家

推荐专题

相关主题

创意岭品牌策划

提交需求1对1免费咨询

让品牌有温度、有情感
专注品牌策划15年