原创/自译教程:APP设计规范(原创文章)

用户头像
武汉/UI设计师/9年前/2602浏览
原创/自译教程:APP设计规范(原创文章)

想来各位工作时最常提起的就是规范,最让人头疼的也是“规范”了吧。一个没那么多亮点的app,有了规范也会让用户用着舒服,反而言之,一个很特别很个性的app肆意发挥,没有规范,这让用户用着也觉得食之无味弃之可惜了吧。进入正题,咳咳...

一、IOS部分

1.界面尺寸

a89058abe670a801219c77cc39ce.jpg注:PPI越高,显示的密度越高,拟真度就越高。

示例

1c1058abec06a801219c7794753d.jpgios通常用750*1334px(iphone6尺寸),主流为1080*1920px(PLUS尺寸)

推荐http://screensiz.es/phone

      Screen Size这个网站可以在线查询不同屏幕的尺寸


2.字体规范


2.1字体选择

IOS7-8:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。英文用:HelveticaNeue

IOS9(及9以上):中文使用苹方体


2.2字体大小

iPhone上的字体英文为Helvetica Nenu,一种纤细简单的文字,中文为一种比较细黑体(常用华文细黑,冬青黑体,不是微软雅黑)

A:导航栏标题:medium 34px(34-36px)

B:按钮和表头:light 34px

C:表格标签:Regular 28px

D:Tab页图标标签:Regular 20px(20-34px)

E:文本中特殊字体最小不能小于16px

bf3a58abed9da801219c77afc6af.jpg

2.3颜色选择

2.3.1常用字体颜色

在界面中的文字分为三个层级,主文、副文、提示文案等。在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。

022058abf04da801219c77cab16c.jpg2.3.2常用背景与分割颜色

分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。

5f4758abf081a801219c779f328e.jpg建议:不管是IOS系统还是Android系统,字体大小设定都不是定死的,我们可以在PC端做好效果图后导到自己的手机里看一下实际效果。


3.图标尺寸大小

图标都按照最大1024*1024进行设计,之后按照比例进行缩小、调整

高光部分与圆角不需要做,ios系统自动生成

APP Stroe图标 1024*1024PX

应用启动图标  120*120PX

导航栏图标  44*44PX          

标签栏图标  50*50PX

c3e158abf15ca801219c77264626.jpg注:750*1334px中一个图标最小不要小于44*44px;页面中的小icon要小、易画、不要太具象化

小icon:   http://www.iconfont.cn/       (可现用、可灵感用)

          https://www.iconfinder.com/   (可现用、可灵感用)

           http://www.easyicon.net/      (找灵感)



二、Android部分

1.界面尺寸

ddc758ae8f79a801219c778366be.jpg安卓界面尺寸不像苹果,只有那么几个,而且都是苹果公司开发,安卓系统的手机开发商及界面尺寸很多,这就有了适配问题……所以安卓做界面的时候就要以一个市面上用户居多的那个尺寸来做,做完切图,cutterman你懂的撒,点几下就完事儿(/≧▽≦)/


Android界面尺寸:

480 * 800        720 * 1280        1080 * 1920

Android的尺寸比IOS要多很多套,建议采用720*1080或1080*1920这个尺寸进行设计

Android的APP界面与IOS基本相同:状态栏、导航栏、标签栏以及中间的内容

                                             

布局规范

720*1280的布局规范

根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求: 
状态栏高度: 50 px 
导航栏、操作栏高度: 96 px=48dp x 2 
主菜单栏高度: 96 px 
内容区域高度: 1038 px (1280-50-96-96=1038) 
Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px

补:1080*1920是用3@,用720*1280的各栏高度除以2乘以3可得

e7f158aeaa25a801219c77ea99e8.jpg 

图标尺寸

489158ae989fa801219c775b522d.jpg字体大小

fa3e58ae9c3da801219c77c08be9.jpg

Android

英文字体:Roboto  中文字体:Noto(思源字体) 安卓手机的默认中文字体都是droid sans fallback,是谷歌自己的字体,与微软雅黑很像,小米miui 用的也是这种字体。



三、切图

第三方插件Cutterman的安装:

打开文件菜单-脚本-浏览-打开.Jsx文件,把Cutterman粘贴到弹出的文件夹中


我们再来看看这个@1、@2、@3,系统ios

2d5858ae92a8a801219c77eaeca6.jpg

@1x适配:iPhone4 iPhone4S

@2x适配:iPhone5 iPhone5S iPhone5C iPhone6 iPhone6s

@3x适配:iPhone6 Plus   iPhone6s Plus


前面ios有讲到过PPI,安卓这边有DPI

MDPI:320*480         HDPI:480*800

XHDPI:720*1280       XXHDPI:1080*1920

56af58ae9249a801219c770dbd74.jpg

当然切图的时候还得注意图层的命名以及文件的整理归类,最后你还得标注,当然有的公司UI不标注=、=,随你吧,app规范总结到此结束,还有啥不懂得记得问度娘,若文中有什么错误或写得不好的地方还请包涵,还有就是我从百度上撸来的几张不清晰但是用放大镜还是看得见的图。。。。。就别吐槽了,蟹蟹,就酱

关于规范网址:http://www.foolo.cn/

设计师导航:http://www.niudana.com/

           http://www.userinterface.com.cn/

            http://hao.uisdc.com/

网址相信大家逛各种技术网站的时候都有看过或者收藏过,这里只是冰山一角,献丑了,飘走=、=



305f58aea26fa801219c779adbe7.jpg

不好意思,赞在下边↓

61
Report
|
79
Share
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in