移動端H5設計稿尺寸

移動端H5尺寸 設計移動端 H5 專案的時候，我們一般以使用者量較高的 iPhone6/7/8的尺寸：750x1334px為準，然後我們要在頂部預留出微信或者瀏覽器導航區域。主要內容區域就可以自由設計了。一般H5的操作是上下滑動。字型方面使用蘋方字型，並且字號設定為24PX以上，渲染方式設定成銳利。英文則需要使用 SF-UI 代替。當然 H5可以呼叫背景音樂、視訊、連結等多媒體，讓體驗更佳。除了讓前端小哥哥們開發之外，其實還有一種方式可以無需程式碼生成簡易版的 H5，就是通過 H5 工具生成。目前比較火的 H5 生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發，那麼我們設計稿的尺寸需要設定為640x1008PX。這些工具較為簡單，註冊後將 PSD 上傳即可對每個原件進行動效的設定了。但是如果需要複雜的動效和互動，還是需要前端工程師的配合。

電腦Web頁Banner 設計稿尺寸

Banner 的寬度有兩種，一種是滿屏（1920PX）、一種是基於安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準的使用者螢幕，加上瀏覽器本身與外掛和底部工具條等距離，留給網站的一屏高度大概為900px，所以 banner 不可以做得很高，否則第一屏資訊會顯示得不夠。你可能會說，那就讓使用者往下拉啊。但是在網站的訪問使用者之中，第二屏觸及到的使用者比第一屏會少很多。也就是很多使用者可能點選網站後就會跳走或者關閉，那麼第一屏的資訊真的非常重要了，可謂是寸土寸金。所以我們的 banner 不應該佔據過大的區域。比如站酷網的 Banner 區域為1380x350px。

畫板尺寸

因為網頁尺寸與使用者螢幕相關，而使用者螢幕的種類難以統計。所以我們的設計稿只能主要顧及主流使用者的解析度，其他解析度用適配的方式來解決。在最新版 Photoshop 網站 Web 預設尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們如果做網站時建議按主流的解析度1920x1080px來設計。所以我們通常設計網站時的網站寬度為1920px，每個螢幕的高度約為900px。為什麼是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內容安全區域為1200px （或1000px / 1400px）。以這個尺寸來設計相對標準。當然在設計網頁前需要知會前端設計尺寸，因為對於適配的方式和後續配合他們更有發言權。

web字型要求

在網站設計中我們的文字大小一般來說是12-20畫素。為什麼不能比12px更小？因為如果比12畫素更小的中文無法放得下複雜的筆畫了。而且奇數的文字表現和適配都不好做，也就是說我們必須使用偶數的字號來設計。如：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字型使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數字需使用 Arial字型，渲染方式選擇無。

文字排版八條定律

• 第一，保證文字是可讀的。
• 第二，不要在一個版面中使用三種以上的字型。
• 第三，如果英文標題或單獨進行排版時，儘量全部使用大寫而非首字母大寫。中文標題或單獨進行排版時結尾不需要句號。
• 第四，文字之間的間距在UI設計中一般設定為0，行距一般為字號本身的1.5倍到2倍。但是考慮到使用者使用場景，比如使用者在地鐵內閱讀新聞時可能地鐵會出現晃的情況而導致序列，就需要我們考慮增加行距。總之字間距和行距以及文字大小都要依據實際場景來決定。在UI設計中文字大小單位須設定成PX（畫素），大小必須是偶數。如：24px、26px、28px等。
• 第五，文字閱讀需要清晰地背景區分，比如黑紙白字和白紙黑字原則。
• 第六，除非不得已儘量避免在一個版式中使用中英文混排。
• 第七，文字左邊對齊同時右邊也需要對齊。可以通過PS中的段落面板設定間距組合和避頭尾法則，但是有時半形符號可能會讓我們很棘手，那就要通過調整間距和空格等方式讓文字儘量對齊。
• 第八，中文前面需要空兩個全形字元空格，英文前面無需空格，但需要大寫。

總結

無論您面對的專案是 To C 的還是 To B 的網站產品，我們都應該首先確立設計風格 > 尋找設計素材 > 建立情緒板 > 完成視覺稿 > 切圖標註 > 建立視覺規範 > 進行專案走查。

如果設計一般網站的頁面，可以按照1920 X 1080px尺寸設計。每屏高度900px，字型使用宋體12px、無和微軟雅黑 14-20、Windows LCD。Banner 儘量滿屏，但是圖片需要按照4:3或16:9等比例來設計。做網站時可以建立柵格以更好地進行自適應和響應式佈局，我們也要為超連結和按鈕設計不同的相應滑鼠的狀態；另外我們也可以多多嘗試在網站設計中加入視差滾動、雪碧圖動畫等好玩的互動。

如果設計手機端的頁面，可以按照750X1334PX尺寸設計。字型使用蘋方24PX以上、銳利。英文字型使用SF UI。按鈕和點選區域需要大於88PX方便手指點選。並且頭部需要預留出微信或瀏覽器的導航區域。