中鹏教育

联系号码

400-930-6618

2018年UI界面设计的规范有哪些【中鹏培训机构】

2018/09/13

俗话说得好:无规矩不成方圆,设计中也是一样,没有一套好的设计规范,做得来的东西就会乱七八糟,大大的降低了美感,在使用中也会增加人的学习负担,或者出现不好用,不易用的情况 。UI设计的规范随着手机屏幕的增大,每年也都会有些新的变化,但设计是相通的,只要学会融合贯通,操作起来就会如鱼得水,今天我们就来了解下2018最新的设计规范吧。

1、设计稿尺寸

目前主流的移动端操作系统主要分为:IOS和Android系统。为了更好的适配两个系统的所有机型,当前最推荐的设计尺寸是以Iphone6/7/8的750*1334px做设计稿,这样向大屏幕(iphone6/7/8 plus机型)和小屏幕(iphone5/se机型)都是过渡比较小的,适配起来也是最合适的,所以下面的内容我们将以ios的设计规范来讲解。

图片1.png

2、界面布局

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

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

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

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

如下图:

图片2.png

3、图标规范

APP应用图标,建议使用1024*1024尺寸去做,逐级缩小去应用到各种场景中。

图片3.png

4、字号使用

字号使用建议(这个不是硬性规定,根据视觉效果酌情使用)

导航文字          34-38px

标题文字          28-34px

正文文字          26-30px

辅助文字          20-24px

Tab bar文字     20-22px

图片4.png

5、颜色使用

黑白灰颜色常用的数值是:

文字黑色#333333

文字深灰色#666666

文字浅灰色#999999

边框浅灰色#cccccc

背景淡灰色#f2f2f2

按钮背景纯白色#ffffff


6、常用组控件大小规范

常用的可点击高度,在iPhone6的原型图上,统一成88px。在iPhone6设计稿中,88px是一个常用的设计尺寸。参考图片如下

图片5.png

搜索栏的高度,在iPhone6的原型图上,统一成58px。在iPhone6设计稿中,58px是一个常用的设计尺寸。参考图片如下,

图片6.png

在iPhone6设计稿中,界面元素之间的常用距离,亲密距离:20px;疏远距离:30px。

疏远距离:比如,所有元素距离手机屏幕最左边的距离。

亲密距离:比如,左边图标与右边文字之间的距离。

参考图片如下

图片7.png

【综上所述】iPhone6的原型规范如下:

界面尺寸布局:满屏尺寸750x1334px

高度电量条高度40px,导航栏高度88px,标签栏高度98px;

各区域图标大小导航栏图标44px,标签栏图标50px;

各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

常用的颜色:背景浅灰色#f2f2f2,文字深黑色#333333,边框色深灰#CCCCCC;

常用可点击区域的高度:88px;

单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;


所有以上的规范都是由UI设计师根据设计的产品来定的,并非强制性使用,有一个统一的规范,在多人合作中可以提高工作效率,减少沟通负担,视觉上也比较清晰明了。


想了解更多UI设计相关的内容,请关注中鹏培训,我在中鹏等你哟!


相关推荐