產(chǎn)品設(shè)計這個涉及的范圍有點大痛黎！先來了解學(xué)習(xí)下規(guī)范吧！
一以躯、先細分講解下移動端App的設(shè)計規(guī)范：
標準色規(guī)范
我之前做過前端開發(fā)槐秧，而且一直都是移動端(微信和App)方面的，但我很少去了解顏色搭配方面的問題忧设，看了上面的文章才發(fā)現(xiàn)刁标，原來是有標準色規(guī)范！
顏色方面的址晕，我暫時不評論膀懈，做到視覺設(shè)計方面，再較真谨垃！
標準字規(guī)范
這里我就有話語權(quán)了启搂！
1，設(shè)計師做出來的圖和規(guī)范的字體最小的是20px,由前端輸出的結(jié)果最小的會是10px刘陶，那么問題來了胳赌？手機系統(tǒng)（安卓和IOS）的內(nèi)核都是webkit，所以最小的字體大小是12px匙隔，不可能出現(xiàn)10px疑苫。所以，規(guī)范上來講纷责，需要前端和設(shè)計師來協(xié)調(diào)捍掺，誰是中間人？---產(chǎn)品經(jīng)理芭鲆荨乡小！
2，這個問題怎么解決饵史？
首先我們先確定要兼容的界面范圍(即斷點范圍)满钟，我們要搜集國內(nèi)大部分手機的機型，分辨率胳喷，屏幕大小這些數(shù)據(jù)湃番。 ?下面的干貨就是我做前端總結(jié)出來的！
斷點分析:國內(nèi)的奇葩手機廠商吭露，夠開發(fā)者們受的吠撮，特別是華為和魅族(魅族大概是384px).
/* 手機斷點 */
/*min-device-width或max-device-width指的是設(shè)備整個渲染區(qū)寬度(設(shè)備的實際最大或最小寬度),
用了它可能在某些安卓機無法調(diào)用到下面的樣式,因為某部分安卓機的屏幕大小不一致.*/
/*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) {
/*這里是指所有屏幕橫屏?xí)r*/
}
/*平板和電腦:最低寬度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) {
}
如何讓字體實現(xiàn)響應(yīng)？隨著頁面的大小而變大或縮薪哺汀泥兰？就在這里使用斷點設(shè)置html的百分比弄屡！(在屏幕為320px的時候，html是62.5%)
/*1rem=10px,同時,瀏覽器或App最細的字體大小是12px*/
/*字體自適應(yīng)*/
/*比如說你在320px分辨率時,設(shè)置字體大小為1.2rem時,現(xiàn)在在不同寬度都可以看上去一樣大小實現(xiàn)自適應(yīng).*/
/*設(shè)計師是以iphone6為設(shè)計標準時,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;}
}
我已經(jīng)把前端的部分列出來了鞋诗，那么剩下就是設(shè)計師該思考問題的時候了膀捷。
在不同屏幕上，字體大小該是多少削彬？主標題全庸，副標題，文案等字體大小分別是多少融痛？這個一定要從視覺設(shè)計方向去思考壶笼！
下面該來探討下頁面規(guī)范：
希望你是看過關(guān)于8px原理的朋友，因為如果你了解過這方面的話雁刷，就會知道節(jié)約成本覆劈，快速兼容IOS和安卓的開發(fā)是直接以安卓的720px x 1280px的規(guī)范！有以下原因安券，你可以參考:
1墩崩，間距：720px除以8px可以分成90份，來橫向布局侯勉，這樣前端做開發(fā)的時候就會輕松很多了，間距的css復(fù)用性強铝阐。因為我發(fā)現(xiàn)很多設(shè)計師在計算間距大小的時候址貌，是不會思考這個方面的。
2徘键，有專業(yè)的設(shè)計師計算過练对，在IOS和安卓上的大小比較，設(shè)計師寫的Px吹害，前端開發(fā)者一般是直接除以2就可以了！
3，寬度绸栅，間距我們已經(jīng)計算過了洛勉，但往往很少去思考過高度，高度是多少比較合理呢纵穿？要根據(jù)什么來判定呢下隧？所有的高度最好的計算方式是寬度除以1.618(黃金比例)，然后我們可以繼續(xù)利用這個計算方式加上斷點@media來去做響應(yīng)式或自適應(yīng)頁面兼容不同屏幕的大小谓媒。最麻煩的就是這個高度了淆院，你設(shè)計頁面的時候，只考慮到在360px屏幕大小的手機句惯，但375px土辩，384px支救，414px等這些手機的高度難度不用改變嗎？寬度可以用百分比拷淘，但高度用百分比的話各墨，你會發(fā)現(xiàn)并不靠譜！
好了辕棚，頁面的寬度欲主，高度，間距已經(jīng)解釋完畢逝嚎，又返回字體大小方面的扁瓢，如果你要做到最佳效果，還是可以繼續(xù)思考字體大小也以8px來做倍數(shù)去實現(xiàn)相關(guān)效果會比較好补君！
同時引几，我做前端開發(fā)App使用的字體是華文宋體，如下：(參考騰訊團隊在github上的共享)
body{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;}
最后關(guān)于字體大小挽铁，我還是要吐槽一些設(shè)計師伟桅，他們設(shè)計界面的時候竟然用“方正字體”，這個字體是收費的叽掘，公司一般來說又不會給錢的楣铁，你還用這個字體做規(guī)范設(shè)計干毛線啊更扁！(隨機應(yīng)變吧)
彈層規(guī)范
彈層規(guī)范這個我們得多注意盖腕，因為如果你使用原生的彈框，安卓和IOS的效果是不一樣的浓镜，所以上面這個圖就展示給你溃列，告訴你在什么情況下要進行區(qū)分，什么情況下可以統(tǒng)一膛薛！
Loading規(guī)范
Loading規(guī)范這里就考驗設(shè)計師和產(chǎn)品經(jīng)理的創(chuàng)意了听隐，我們刷新的時候，往往都需要等待哄啄，如何讓用戶的等待時間縮短雅任？就用到Loading。 ?文字+圖片或純文字增淹，當然加載時長是跟用戶當前網(wǎng)絡(luò)和App的服務(wù)器有關(guān)椿访！
文章以上內(nèi)容圖片是來自網(wǎng)絡(luò)：交互干貨必收 | App界面交互設(shè)計規(guī)范
推薦使用以下的顏色：
請記得點“喜歡”! 請加QQ群:產(chǎn)品圈--247485909.本群討論產(chǎn)品工作為主!
