UI设计规范有哪些?APP/网页/B端设计规范分享

更新时间:2023-03-16 14:36:34

UI设计规范有哪些?在进行 UI 设计时,如果没有一个清楚的 UI 设计规范,完全凭借感觉和经验去做的话,做出来的页面效果往往差强人意。本文就为大家整理了一些进行 UI 设计时常用的 UI 规范设计尺寸,包括 APP 设计组件尺寸,网页设计规范,B 端设计规范,和我一起看下去吧!

导语

一,常用的 APP 设计组件尺寸(包括 iphone 和 android 两个版本)

二,进行 UI 设计时会用到的网页设计规范(基于最新版 Material Design 3 整理)

三,B 端设计规范(基于 Acro Pro 整理)

UI设计规范

获取开源免费的完整版 UI 设计常用尺寸规范,尽在即时设计资源社区

一,常用的 APP 设计组件尺寸(包括 iphone 和 android 两个版本)

目前主流的 iOS 设备主要有 iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸),它们都采用了 Retina 视网膜屏幕,其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3 倍率的分辨率,其他都是采用的 2 倍率的分辨率。无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的 1.5 倍,并分别以 3x 和 2x 在文件名结尾命名,程序再根据不同分辨率自动加载 3x 或者 2x的切片。

android端采用的分辨率为 412 x 892,状态栏高度为 52px,底部导航条高度为 28px;采用的中文字体是思源黑体,英文或数字采用的字体为 Roboto;关于字号的设计规范,小字提示建议为 12px,正文或按钮文字为 14px,小标题为 16px,大标题为 24px,超大字号为34px,45px,56px,112px。

二,进行 UI 设计时会用到的网页设计规范(基于最新版 Material Design 3 整理)

网页常用设计尺寸为 1440px X 900px (高度不限),安全宽度为 1128px,具体设计尺寸要根据项目,客户要求,用户群所决定。中文常用字体为宋体-字体样式(无)、微软雅黑-字体样式(Windows LCD)、苹方(MAC),英文常用字体 Times NewRoman、Arial、sans,常用字号大小是导航和标题为:16px,18px,20px,24px,26px,30px,正文内容为 14px,中英文结合最小为 12px。

以上数据只提供参考,不需要死板的坚持传统设计规范,根据设计场景可自行修订。

三,B 端设计规范(基于 Acro Pro 整理)

当栅格系统内的信息内容较少时为 12 等分,信息内容较多时为 24 等分;辅助文案的字号规范为 12px;常规正文的字号最小为 13px,最大为 14px;小号标题的字号为 16px,中号标题为 20px,大号标题为 24px;小号运营标题的字号为 36px,中号运营标题为 48px,大号运营标题为 56px。

总结

以上就是「UI 规范」的全部内容,本文为大家总结了在进行 UI 设计时会用到的 APP设计,网页设计,B端设计的规范尺寸,当然,提供的数据仅供参考,并不强制大家一定按照这个数据执行,在进行 UI 设计的过程中,可以对以上提供的数据进行修订,让自己的设计作品更加完美。如果想了解更多设计规范尺寸,欢迎来即时设计看看,除了常用的规范尺寸之外,这里还有大量的设计资源和设计公开课,且开源免费,一搜即用。