一、先细分讲解下移动端App的设计规范：
标准色规范
我之前做过前端开发，而且一直都是移动端(微信和App)方面的，但我很少去了解颜色搭配方面的问题，看了上面的文章才发现，原来是有标准色规范！
颜色方面的，我暂时不评论，做到视觉设计方面，再较真！
标准字规范
这里我就有话语权了！
1，设计师做出来的图和规范的字体最小的是20px,由前端输出的结果最小的会是10px，那么问题来了？手机系统（安卓和IOS）的内核都是webkit，所以最小的字体大小是12px，不可能出现10px。所以，规范上来讲，需要前端和设计师来协调，谁是中间人？---产品经理啊！
2，这个问题怎么解决？
首先我们先确定要兼容的界面范围(即断点范围)，我们要搜集国内大部分手机的机型，分辨率，屏幕大小这些数据。 下面的干货就是我做前端总结出来的！
断点分析:国内的奇葩手机厂商，够开发者们受的，特别是华为和魅族(魅族大概是384px).
/* 手机断点 */
/*min-device-width或max-device-width指的是设备整个渲染区宽度(设备的实际最大或最小宽度),
用了它可能在某些安卓机无法调用到下面的样式,因为某部分安卓机的屏幕大小不一致.*/
/*iphone4等屏幕高度480px的解决方案*/
@media only screen and (max-device-height:480px) {
}
/*iphone5以上的屏幕高度解决方案*/
@media only screen and (min-device-height:481px) {
}
@media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:Note2-Note3,S2-S4*/
}
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6 plus,红米等大屏幕手机*/
}
/*手机横屏:orientation:landscape*/
@media only screen and (min-width:480px) and (max-width:569px) and (orientation:landscape) {
/*小米1,1s,iphone4,4s,5,5s等屏幕横屏宽度断点*/
}
@media only screen and (min-width:570px) and (max-width:640px) and (orientation:landscape){
/*三星,红米等手机屏幕横屏宽度断点*/
}
@media only screen and (min-width:641px) and (max-width:667px) and (orientation:landscape) {
/*Iphone6横屏宽度断点*/
}
@media only screen and (min-width:736px) and (max-width:767px) and (orientation:landscape){
/*Iphone6 plus横屏宽度断点*/
}
@media all and (orientation:landscape) {
/*这里是指所有屏幕横屏时*/
}
/*平板和电脑:最低宽度768px*/
@media only screen and (min-width:768px) and (max-width: 959px) {
}
@media only screen and (min-width:960px) and (max-width:1024px) {
}
@media only screen and (min-width:1025px)and (max-width:1536px) {
}
如何让字体实现响应？随着页面的大小而变大或缩小？就在这里使用断点设置html的百分比！(在屏幕为320px的时候，html是62.5%)
/*1rem=10px,同时,浏览器或App最细的字体大小是12px*/
/*字体自适应*/
/*比如说你在320px分辨率时,设置字体大小为1.2rem时,现在在不同宽度都可以看上去一样大小实现自适应.*/
/*设计师是以iphone6为设计标准时,16px=100%,每个断点以2px递增页面最小的字体大小(6.25%=1px)*/
h1{font-size:2.8rem;}
h2{font-size:2.6rem;}
h3{font-size:2.2rem;}
@media only screen and (min-width:360px) and (max-width:374px){
/*三星大屏幕机最低宽度:note2-note3,S2-S4:14px*/
html{font-size:87.5% !important;}
}
@media only screen and (min-width:375px) and (max-width:430px) {
/*Iphone6,Iphone6plus最低宽度:16px*/
html{font-size:100% !important;}
}
/*手机横屏:最低宽度480px:18px*/
@media only screen and (min-width:480px) and (max-width:740px)and (orientation:landscape){
html{font-size:112.5% !important;}
}
/*平板电脑:最低宽度768px:20px*/
@media only screen and (min-width:768px) {
html{font-size:125% !important;}
}
我已经把前端的部分列出来了，那么剩下就是设计师该思考问题的时候了。
在不同屏幕上，字体大小该是多少？主标题，副标题，文案等字体大小分别是多少？这个一定要从视觉设计方向去思考！
下面该来探讨下页面规范：
希望你是看过关于8px原理的朋友，因为如果你了解过这方面的话，就会知道节约成本，快速兼容IOS和安卓的开发是直接以安卓的720px x 1280px的规范！有以下原因，你可以参考:
1，间距：720px除以8px可以分成90份，来横向布局，这样前端做开发的时候就会轻松很多了，间距的css复用性强。因为我发现很多设计师在计算间距大小的时候，是不会思考这个方面的。
2，有专业的设计师计算过，在IOS和安卓上的大小比较，设计师写的Px，前端开发者一般是直接除以2就可以了！
3，宽度，间距我们已经计算过了，但往往很少去思考过高度，高度是多少比较合理呢？要根据什么来判定呢？所有的高度最好的计算方式是宽度除以1.618(黄金比例)，然后我们可以继续利用这个计算方式加上断点@media来去做响应式或自适应页面兼容不同屏幕的大小。最麻烦的就是这个高度了，你设计页面的时候，只考虑到在360px屏幕大小的手机，但375px，384px，414px等这些手机的高度难度不用改变吗？宽度可以用百分比，但高度用百分比的话，你会发现并不靠谱！
好了，页面的宽度，高度，间距已经解释完毕，又返回字体大小方面的，如果你要做到最佳效果，还是可以继续思考字体大小也以8px来做倍数去实现相关效果会比较好！
同时，我做前端开发App使用的字体是华文宋体，如下：(参考腾讯团队在github上的共享)
body{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;}
最后关于字体大小，我还是要吐槽一些设计师，他们设计界面的时候竟然用“方正字体”，这个字体是收费的，公司一般来说又不会给钱的，你还用这个字体做规范设计干毛线啊！(随机应变吧)
弹层规范
弹层规范这个我们得多注意，因为如果你使用原生的弹框，安卓和IOS的效果是不一样的，所以上面这个图就展示给你，告诉你在什么情况下要进行区分，什么情况下可以统一！
Loading规范
Loading规范这里就考验设计师和产品经理的创意了，我们刷新的时候，往往都需要等待，如何让用户的等待时间缩短？就用到Loading。 文字+图片或纯文字，当然加载时长是跟用户当前网络和App的服务器有关！
文章以上内容图片是来自网络：交互干货必收 | App界面交互设计规范
推荐使用以下的颜色：
联系客服
