產品設計這個涉及的范圍有點大！先來了解學習下規范吧！
一、先細分講解下移動端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界面交互設計規范
推薦使用以下的顏色：
請記得點“喜歡”! 請加QQ群:產品圈--247485909.本群討論產品工作為主!
