640*1008 標(biāo)準(zhǔn)的

指的是 HTML5 ；HTML5本身是由W3C推薦出來(lái)的，它的開(kāi)發(fā)是通過(guò)谷歌、蘋(píng)果，諾基亞、中國(guó)移動(dòng)等幾百家公司一起醞釀的技術(shù)，這個(gè)技術(shù)最大的好處在于它是一個(gè)公開(kāi)的技術(shù)。換句話說(shuō)，每一個(gè)公開(kāi)的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫(kù)找尋根源。另一方面，W3C通過(guò)的HTML5標(biāo)準(zhǔn)也就意味著每一個(gè)瀏覽器或每一個(gè)平臺(tái)都會(huì)去實(shí)現(xiàn)。HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語(yǔ)法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式；用HTML5的優(yōu)點(diǎn)主要在于，這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開(kāi)發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開(kāi)放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過(guò)封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。

這個(gè)看你的要求是什么樣的，如果是定制的，登錄兔展網(wǎng)站之后找到H5定制頻道找到兔大師問(wèn)下就可以了。如果是購(gòu)買(mǎi)模板自己進(jìn)行修改一般是幾十元。

最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的(Generator)，用 2x 的 PSD 輸出 3x 的切圖也可以。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。Sketch 相當(dāng)棒，但目前(v3.1)還是有不少小問(wèn)題，加上對(duì)中文支持不夠好，在界面設(shè)計(jì)中還不能完全取代 Photoshop。關(guān)于題目的問(wèn)題，首先一份設(shè)計(jì)稿就不能適用于 iOS 各手機(jī)屏幕尺寸。以下是 Bjango 把目前各 iOS 手機(jī)屏幕還原為 1x 的對(duì)比圖，可見(jiàn)在設(shè)計(jì)稿中四種屏幕尺寸寬高都不一樣，不是簡(jiǎn)單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設(shè)計(jì)稿了。如何支持多個(gè)尺寸屏幕，這個(gè)要分情況討論。對(duì)于常規(guī)界面我們可以偷個(gè)懶，只做 iPhone 5 屏幕尺寸的設(shè)計(jì)稿，請(qǐng)開(kāi)發(fā)在其它屏幕上自適應(yīng)，最終檢查實(shí)機(jī)效果沒(méi)問(wèn)題就行。蘋(píng)果官網(wǎng)上屏幕對(duì)比頁(yè)面里用到的都是常規(guī)界面：對(duì)于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配，比如下面是個(gè)簡(jiǎn)單的 profile 頁(yè)面示例，自動(dòng)適配到大屏幕的效果挺糟糕的。此時(shí)設(shè)計(jì)師應(yīng)該手動(dòng)為大屏幕重新調(diào)整設(shè)計(jì)，像下圖一樣。在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大，要單獨(dú)切圖，所以不是說(shuō)簡(jiǎn)單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時(shí)矢量切圖在開(kāi)發(fā)中優(yōu)勢(shì)很明顯，只要把大屏幕中切圖的尺寸告訴開(kāi)發(fā)即可，無(wú)需針對(duì)非 3x 元素額外輸出切圖。* 手機(jī)屏幕畢竟還是像素位圖，像細(xì)線圖標(biāo)即使是矢量的在縮放后仍可能會(huì)出現(xiàn)虛化模糊的現(xiàn)象(類(lèi)似 HTML 里的 icon font)，理論上并非所有情況都適合用矢量切圖。但是，iPhone 6 Plus 屏幕本身又是 downscale 的，導(dǎo)致原本 pixel perfect 的切圖也會(huì)在縮放后發(fā)虛，完全沒(méi)有 pixel perfect 而言，究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點(diǎn)了，要等看到實(shí)機(jī)才能確定。切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖(但要在實(shí)機(jī)上確認(rèn)效果)。Photoshop 就只能輸出位圖了，上面提到定制界面里的一些切圖得單獨(dú)輸出，其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可。另外，AI 不適合做界面設(shè)計(jì)。勇于嘗試 Sketch 是好的，但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。另外強(qiáng)烈推薦@Akane_Lee 老師一篇iPhone 6 及 Plus制圖建議的好文!@Akane_Lee ：iPhone 6 和 Plus 新機(jī)一發(fā)表，群里就有人跑來(lái)哀嚎說(shuō)老板叫他準(zhǔn)備 iPhone6 的適配，可現(xiàn)在什么文檔都沒(méi)有完整啊!在很多細(xì)節(jié)不明的情況下，我只能建議這種最保險(xiǎn)安全的作法：做 @1x，放大給 @2x 和 @3x 用。以下情境預(yù)設(shè)為做一套 Mockup 要切出各種尺寸的圖。

最新的 Photoshop 是有跟 Sketch 一樣的輸出切圖功能的(Generator)，用 2x 的 PSD 輸出 3x 的切圖也可以。而且 Photoshop 配合 Slicy 輸出切圖比 Sketch 3 快捷很多。Sketch 相當(dāng)棒，但目前(v3.1)還是有不少小問(wèn)題，加上對(duì)中文支持不夠好，在界面設(shè)計(jì)中還不能完全取代 Photoshop。關(guān)于題目的問(wèn)題，首先一份設(shè)計(jì)稿就不能適用于 iOS 各手機(jī)屏幕尺寸。以下是 Bjango 把目前各 iOS 手機(jī)屏幕還原為 1x 的對(duì)比圖，可見(jiàn)在設(shè)計(jì)稿中四種屏幕尺寸寬高都不一樣，不是簡(jiǎn)單地把 iPhone 5 界面縮放一下就變成 iPhone 6 的設(shè)計(jì)稿了。如何支持多個(gè)尺寸屏幕，這個(gè)要分情況討論。對(duì)于常規(guī)界面我們可以偷個(gè)懶，只做 iPhone 5 屏幕尺寸的設(shè)計(jì)稿，請(qǐng)開(kāi)發(fā)在其它屏幕上自適應(yīng)，最終檢查實(shí)機(jī)效果沒(méi)問(wèn)題就行。蘋(píng)果官網(wǎng)上屏幕對(duì)比頁(yè)面里用到的都是常規(guī)界面：對(duì)于一些定制的界面我們應(yīng)該根據(jù)不同屏幕重新適配，比如下面是個(gè)簡(jiǎn)單的 profile 頁(yè)面示例，自動(dòng)適配到大屏幕的效果挺糟糕的。此時(shí)設(shè)計(jì)師應(yīng)該手動(dòng)為大屏幕重新調(diào)整設(shè)計(jì)，像下圖一樣。在上圖中可看出 iPhone 6 Plus 界面中部分切圖尺寸比 3x 更大，要單獨(dú)切圖，所以不是說(shuō)簡(jiǎn)單地給 iPhone 6 Plus 統(tǒng)一切 3x 圖就 OK 的了。這時(shí)矢量切圖在開(kāi)發(fā)中優(yōu)勢(shì)很明顯，只要把大屏幕中切圖的尺寸告訴開(kāi)發(fā)即可，無(wú)需針對(duì)非 3x 元素額外輸出切圖。* 手機(jī)屏幕畢竟還是像素位圖，像細(xì)線圖標(biāo)即使是矢量的在縮放后仍可能會(huì)出現(xiàn)虛化模糊的現(xiàn)象(類(lèi)似 HTML 里的 icon font)，理論上并非所有情況都適合用矢量切圖。但是，iPhone 6 Plus 屏幕本身又是 downscale 的，導(dǎo)致原本 pixel perfect 的切圖也會(huì)在縮放后發(fā)虛，完全沒(méi)有 pixel perfect 而言，究竟是不是 iPhone 6 Plus 屏幕已經(jīng)優(yōu)化的看不出像素點(diǎn)了，要等看到實(shí)機(jī)才能確定。切圖方面用 Sketch 的話可以盡量試試 PDF 矢量切圖(但要在實(shí)機(jī)上確認(rèn)效果)。Photoshop 就只能輸出位圖了，上面提到定制界面里的一些切圖得單獨(dú)輸出，其他常規(guī)的用 2x 的 PSD 輸出 1-3x 切圖即可。另外，AI 不適合做界面設(shè)計(jì)。勇于嘗試 Sketch 是好的，但若 Sketch 各種毛病忍不了的話建議還是用 Photoshop 好些。另外強(qiáng)烈推薦@Akane_Lee 老師一篇iPhone 6 及 Plus制圖建議的好文!@Akane_Lee ：iPhone 6 和 Plus 新機(jī)一發(fā)表，群里就有人跑來(lái)哀嚎說(shuō)老板叫他準(zhǔn)備 iPhone6 的適配，可現(xiàn)在什么文檔都沒(méi)有完整啊!在很多細(xì)節(jié)不明的情況下，我只能建議這種最保險(xiǎn)安全的作法：做 @1x，放大給 @2x 和 @3x 用。以下情境預(yù)設(shè)為做一套 Mockup 要切出各種尺寸的圖。