当前位置:首页> 2018

移动端安卓ui设计规范有哪些

发布者:乾学教育 发布时间:2018-9-6 164浏览

      作为一名合格的ui设计师,熟练掌握设计规范是非常重要的一项功课。因此,今天乾学教育的小编总结了一些移动端安卓ui设计规范,有需要的小伙伴们看下哈。

      很多设计师做设计规范,纯粹只有两个原因:

      1、要设计的界面太多了,而且产品迭代很快,来不及一个个界面标注重复性的东西,于是我就出一个字体运用规范,让开发看一个文档就好了。有个设计文档和UI设计规范,可以减少很多设计与开发之间的沟通。

      2、把这些东西一个版本的整理迭代好了,哪天来一场说走就走的旅行,没有交接成本,即使公司找不到设计师,开发哥哥直接用这个规范,就可以分分钟上岗党设计师了。直接甩这个规范的sketch源文件就可以了。推荐阅读>>>苏州ui培训机构学哪些内容

移动端安卓ui设计规范有哪些

      移动端一套完整的UI设计规范基本上包含8个方面:

      1、标准色

      2、标准字

      3、图标

      4、 按钮

      5、公共控件

      6、模块

      7、布局

      8、APP效果展示图

      换句话说就是

      配色 字体 排版 布局 按钮 表单 提示框、标记、标签弹窗、提示框 图片尺寸(banner、模块图片、头像图片)等元素进行规范整理。

      也就是每一位APP设计师都会经历的一个过程。也是APP设计师学习和进步的过程。

      画布尺寸:

      如果想一稿适配ios,那就新建720×1280  分辨率72,像素/英寸。

      如果单独设计安卓MD新规范的,那就新建1080×1920  分辨率72,像素/英寸。

      720×1280常见的字体大小:

      24px、26px、28px、30px、32px、34px,36px等等。记住是偶数的。最小字号20px。

      字体:

      中文用Noto/思源黑体(是一个字体,叫法不同而已),英文用Roboto。

      单位换算

      距离单位是DP

      文字单位是SP

      720×1280尺寸的换算关系 1dp=2px,文字1sp=2px。也就是说程序员拿到我们的px单位的标注稿,自己除以2就是dp和sp了。

      1080×1920尺寸就是1dp=3px,文字1sp=3px

      界面里的小图标常见的尺寸:

      24px、32px,48px等,记住4的倍数比较好。

      注意图标的尺寸要统一尺寸,以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大,需要调整下。

      移动端界面设计之尺寸篇(淘宝版)

      界面上的间距和元素尺寸:

      最新规范MD的做法:

      8dp原则   栅格系统的最小单位是8dp,一切距离、尺寸都应该是8dp的整数倍。

      常见一般常用做法:

      直接把ios的设计稿照搬过来,只不过状态栏,导航栏,标签栏按照安卓的来。

      720 x 1280 设计稿尺寸:

      状态栏高度:50 px

      导航栏高度:96 px

      标签栏高度:96 px

      设计稿实时预览:

      安装一个Ps Mirror可以在安卓手机上实时观看效果。

      标注工具:

      马克鳗

      PxCook 像素大厨

      Parker标

      一键标注神器-zeplin

      标注的时候,如果是720×1280尺寸设计的,就选对应的xhdpi,如果是1080×1920尺寸设计的,就选对应的xxhdpi。

      界面的图标切图:

      用Cutterman选中下面所示,根据需要选择不同分辨率的导出。

      界面中重复利用的资源切图需要做成点9图片:

      主要是一些按钮,单色或半透明的背景块。图标不用做点9。

      启动图标:

      做1024×1024尺寸,安卓对图标的样式没有要求,你可以做各种形状都行,一般做方形无圆角的,各家手机厂商的定制系统会自己加圆角。

      然后用 IconTemplate 自动切图一套图标资源丢给程序员就ok了。

      交接给程序:

      最好是一个界面一个文件夹。文件夹里包括:界面效果图,标注文件图,切图资源文件包。

      引导页:

      值得注意的是引导页切图需要单独设计多套(480×800、720×1280、1080×1920)这个可别傻乎乎的用Cutterman切几套图,这就尴尬了。

      适配方法3个原则:(不清楚的在网站搜索适配2字)文字流式

      控件弹性

      图片等比缩放

      测试界面:

      程序实现DEMO版本以后,咱们要在测试机上好好检查下界面问题,及时跟程序沟通并更改。

      以上是小编总结的移动端设计规范(安卓系统),接下来小编也会为大家整理iOS界面设计规范的呢。


热门文章

南京苏州各大高校寒假时间表新鲜出炉(文章)免费

乾学原创课程26已学习