ui设计的常用尺寸(新手学习UI设计尺寸和规范) | 您所在的位置:网站首页 › 尺寸和像素区别 › ui设计的常用尺寸(新手学习UI设计尺寸和规范) |
ui设计的常用尺寸(新手学习UI设计尺寸和规范)
点有苹果 2022-11-24 02:18:58 收藏 赞 分享 分享到:在对界面的一些尺寸规范不是十分清楚的时候,往往凭借自己的感觉去绘制界面。 大家都知道移动端设备屏幕尺寸非常多。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920。近年来iPhone也加剧了:640×960, 640×1136, 750×1334, 1242×2208。 整理了一些UI设计尺寸规范,ui设计需要遵循一定的规范,才能使其成为用户都能理解的设计产品。
1、尺寸 设计图尺寸
UI组件布局 状态栏和导航栏:在 iPhone6/7/8设计中,状态栏的高度为20pt(40px)。导航栏的高度是44pt(88px)。在 iPhoneX 设计中,状态栏的高度为44pt(132px)。导航栏的高度也是44pt(132px)。
标签栏:iPhone6/7/8设计中,标签栏的高度为49pt(98px)。在iphone X 中为83pt(249px),通常我们会在 Tab栏图标之下加上10pt(20px/30px)的注释文字。
其中包含:34pt(102px)安全区域。 个人一般作图为:iPhone X@2 750*1624(@1 375*812) 状态栏:88PX 导航栏:88PX 标签栏:98PX 安全栏:68PX 2、字体 IOS设计中: 中文字体:PingFang SC 英文字体:SF UI Text 、SF UI Display 其中SF UI Text适用与小于19pt的文字,SF UI Display适用于大于20pt的文字 安卓设计中: 中文字体:思源黑体/ Noto 英文字体:Roboto 3、启动图标 设计师需要设计启动图标(1024x1024px)之后按照程序员的要求切出几十个不同尺寸的图标。比如,在手机中@3x情况下桌面图标尺寸为180x180px,在@2x情况下为120x120px。
规范始终是规范,并不灵活。我们要遵循设计规范,它能保证我们的设计不会出现较大的问题,最大限度保证产品的一致性。 (ps:如果文中有错误的地方,欢迎指正) , 展开全文免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。投诉邮箱:[email protected] |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |