『壹』 手機網頁設計排版需要注意的幾個事項
一般情況下都是先做PC版的頁面再做手機頁面，PC端網頁可以呈現更豐富的內容，用戶瀏覽網頁時更專注，達到最好的體驗。但有很多情況下，頁面的訪問更多的來自手機端，比如專題頁面，用戶通過微信、手機QQ入口進入。如果開始就先做PC版的專題，想必手機版的內容將是一個移植的PC版網頁，讓移動版的體驗大打折扣。
1、安全寬度與擴展區域讓頁面適應主流解析度
與PC上網頁的做法一樣，確定一個安全寬度，把重要信息控制在640PX寬度內(以iphone解析度為安全寬度。目前主要瀏覽器在iphone4S下的首屏高度如下,可以根據具體頁面投放的渠道做相應的首屏高度。
2、控制圖片的大小
專題的頭圖一般有很強的視覺，對於手機用戶來說，載入一張圖片的等待時間比PC上成本大很多，如果一個頁面載入時間超過5秒，70%的用戶會選擇關閉，那麼再出彩的專題也沒辦法呈現再用戶面前了,所以需要對設計稿做折中的處理。
在做頭部的延展區域(超出640px范圍)，推薦使用純色，漸變，可以平鋪的素材，以便於減少頭圖的大小，提高載入速度，並且延展區域可以無縫連接。模糊的背景可以最大限度的壓縮圖片質量。
3、字體
手機中的字型大小一般上電腦中的兩倍，一般在電腦中用的12px的字體在手機網頁中就該使用24px。在設計的過程中，也要使用iOS和安卓默認渲染的字體，以便更真實的還原真實環境。在規范的專題中，主要字型大小控制在3個，大中小都有一個區間。避免隨意用字體字型大小，並且字型大小必須上整數。
4、控制項交互區域適合觸控
手機專題的主按鈕高度大於80px，並且根據活動的需求放在首屏內。文字鏈接上下的間距大於80px，手指在屏幕上熱區最小感應是44px。
5、移動端網頁少用跳轉
手機用戶的網路環境不如PC用戶，頁面的跳轉會對用戶產生更大的心理效力，如果在手機頁面中能把信息合理的展示在一個頁面中最佳。如果非要跳轉，咱們可以用些假裝不是跳轉的方式，比如展開，浮出等。減少用戶產生的不安全感。
『貳』 手機UI設計的基本規范
大家都知道手機採用的：一個是蘋果的iOS系統，另一個就是谷歌公司的安卓系統。華為的鴻蒙系統雖然早就上線，但是還沒有真正運用在手機移動端上，小阿在這里期待著，希望有一天也能寫「華為『鴻蒙系統』的界面尺寸規范。」
這兩者之間有一個明顯的區別就是iOS系統是非開源的，簡單來說就是不能別隨意改動的，連圖標都是必須帶圓角的，對交互設計師很友好的。
垂直邊距
①狀態欄：24dp；②工具欄：56dp；③標題和列表項：48dp；④子標題：48dp；⑤內容區域間距離為8dp
6、切圖
上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關系，而xhdpi的Android手機屏幕與xxdpi的屏幕剛好是1.5倍的關系，所以iPhone 6 Plus和xxhdip也可以共用一套切圖，掌握好尺寸關系，能讓工作變得簡單很多。
7、界面適配
安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置，來優化用戶界面設計，帶來更良好的用戶體驗。
如何做到安卓界面適配呢？大家一定要很清楚的了解解析度、屏幕大小、密度的關系；明白實際密度和系統密度的關系，dp、sp、px的區別；明白dp與px的轉換。這里不做過多闡述，後期寫一篇具體的~
安卓的界面規范就講到這里，要明白設計界面規范的意義是確保設計的統一性與合理性，規范維護的是項目的統一，為了項目利益最大化，高效化。所以作為UI設計師的我們，如果一點設計規范不遵守，全靠自己想當然，那就別發給前端人員啦，他也看不懂。
所以作為UI設計，必須要要遵守設計規范，這樣才能做到設計有道可尋，希望以上回答對你了解手機界面設計規范有所幫助。
『叄』 h5頁面製作，設計多大的尺寸，怎麼和前端適配，實現設計的視覺稿效果
H5的頁面製作設計尺寸是有一定規范的，正常的話是考慮手機的適配問題，所以這個尺寸的話是基於手機來做的。
具體是多少呢？因為手機的尺寸是不一樣的，特別是在比例上，這就要求我們在不同的手機上必須要保證內容的呈現，一定是完整的，但自己要考慮一個問題，要把內容分為重要的和不重要，重要的是什麼呢，比如說背景圖；重要的話就是放一些文字信息等等。
這樣就劃分了一個安全區和出血區，出血區和安全區交界的部分，就是不重要的，可以在各位手機上被裁掉的或者用來遮住手機頁面背景的；但是安全的內容，是可以保證在任何大小屏幕手機上都可以完整顯示。
一般安全區內框的尺寸是375X603PX，但在製作上又是另外一回事了，作鋪滿內框的圖要按照這個尺寸的2倍大小去做。
出血區也就是外框尺寸是422X748PX，作鋪滿外框的圖要按照這個尺寸的2倍大小去做。
這個你可以參考下意派Epub360的畫布標准，這個工具是專業級的H5工具。