一、手機端原型設計尺寸規範注意事項

iPhone6的原型規範如下：

1、介面尺寸佈局：滿屏尺寸750x1334px

2、高度電量條高度40px，導航欄高度88px，標籤欄高度98px；

3、各區域圖示大小工具欄、導航欄圖示44px，標籤欄圖示50px；

4、各區域文字大小電量條文字22px，導航欄-文字32px，標籤欄字20px；

5、常用的文字大小：32px，30px，28px，26px，24px，22px，20px；

6、常用的顏色：背景淺灰色#f2f2f2,文字深黑色#323232，邊框色深灰#CCCCCC；

7、常用可點選區域的高度：88px；

8、單行文字的背景框的高度：88px，雙行則為：176px，三行則為：264px；

9、常用間距：親密距離：20px；疏遠距離：30px，其它距離：10px，44px等；

原型設計中，需要考慮不同螢幕尺寸的蘋果手機，在@1x的情況下的適配情況。

比如：

iPhone5在@2x的畫素解析度、螢幕尺寸是，640x1136px；對應的@1x的邏輯解析度，螢幕尺寸就是320x568px；

  iPhone6在@2x的畫素解析度、螢幕尺寸是：750x1334px；對應的@1x的邏輯解析度，螢幕尺寸就是375x667px；

  iPhone6Plus在@3x的畫素解析度、螢幕尺寸是：750x1334px；對應的@1x的邏輯解析度，螢幕尺寸就414x736px；

  在做原型時，做成對應的@1x的尺寸即可。

模組區分

模組之間的區分
模組之間利用“留白”、“細線”、或“色塊”區分
色塊分割：不同屬性模組間區分
                  分割線：1px  #e5e5e5

                  色塊：10px  #f2f2f2

留白分割：同一模組內文字欄位間分割20px

                小模組間分割20px

細線分割：相同屬性模組間區分1px  #e5e5e5

二、網站原型設計

【頁面高度】高度是可以向下延展的，所以一般對高度不限制。對於一屏來說一般沒有一個固定值，因為每個人的瀏覽器的工具欄不同，所以高度沒有確切值。

【頁面寬度】
1、在IE6.0下，寬度為顯示器解析度減21，比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下，寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下，寬度的分率辨減23。比如1024的寬度-23就變成1001
如果是1024的解析度，網頁設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點。也方便做一些浮動層的設計。如果是800的解析度一般都設成770。但也有設成760的。這些需要明白並且牢記，不然很可能做出來不符合瀏覽器要求。不過一般設定的再稍微小一點，因為有些瀏覽器加了外掛或者其他的東西寬度會有變化，所以 800的解析度一般設定760左右，1024的設定990左右。

網頁設計標準尺寸參考：
1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。
2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話，高度是612-615之間，就不會出現水平滾動條和垂直滾動條。
3、頁面長度原則上不超過3屏，寬度不超過1屏，每個標準頁面為A4幅面大小，即8.5X11英寸。
4、全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px （另外120*90，120*60也是小圖示的標準尺寸 ）
5、每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K

網頁廣告尺寸
1、120*120，這種廣告規格適用於產品或新聞照片展示。 
2、120*60，這種廣告規格主要用於做LOGO使用。
3、120*90，主要應用於產品演示或大型LOGO。
4、125*125，這種規格適於表現照片效果的影象廣告。
5、234*60，這種規格適用於框架或左右形式主頁的廣告連結。
6、392*72，主要用於有較多圖片展示的廣告條，用於頁首或頁尾。
7、468*60，應用最為廣泛的廣告條尺寸，用於頁首或頁尾。
8、88*31，主要用於網頁連結，或網站小型LOGO。

廣告形式 畫素大小 最大尺寸
BUTTON 120*60(必須用gif) 7K；215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果；430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K；585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片，FLASH格式
圖文混排 各頻道不同 15K
彈出視窗 400*300(儘量用gif) 40K
BANNER 468*60(儘量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200（可做不規則形狀但尺寸不能超過300*200） 30K 播放時間 小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸
1.首頁右上，尺寸120*60
2.首頁頂部通欄，尺寸468*60
3.首頁頂部通欄，尺寸760*60
4.首頁中部通欄，尺寸580*60
5.內頁頂部通欄，尺寸468*60
6.內頁頂部通欄，尺寸760*60
7.內頁左上，尺寸150*60或300*300
8.下載地址頁面，尺寸560*60或468*60
9.內頁底部通欄，尺寸760*60
10.左漂浮，尺寸80*80或100*100
11.右漂浮，尺寸80*80或100*100