【h5網(wǎng)站網(wǎng)頁(yè)】H5設(shè)計(jì)原稿的切圖是什么尺寸的，是微信公眾號(hào)版的?主流HTML5移動(dòng)網(wǎng)絡(luò)開(kāi)發(fā)框架?下面就和小編一起來(lái)看看吧!

　　H5設(shè)計(jì)原稿的切圖是什么尺寸的，是微信公眾號(hào)版的?

　　最新的Photoshop具有與Sketch相同的輸出切割功能，可以使用2x的PSD輸出3x的切割圖。此外，Photoshop配合Slicy輸出切割圖比Sketch3快得多。Sketch相當(dāng)棒，但現(xiàn)在(v3.1)有很多小問(wèn)題，對(duì)中文的支持不夠，在接口設(shè)計(jì)中無(wú)法完全取代Photoshop。關(guān)于網(wǎng)站模板關(guān)于主題，首先設(shè)計(jì)原稿不能適用于iOS各手機(jī)的畫(huà)面尺寸。Bjango將現(xiàn)在的iOS手機(jī)畫(huà)面還原為1x的對(duì)比圖，可以看出設(shè)計(jì)原稿中4種畫(huà)面尺寸的寬度不同，并不是簡(jiǎn)單地縮小iPhone5畫(huà)面就成為iPhone6的設(shè)計(jì)原稿。如何支持多個(gè)尺寸的屏幕，這必須根據(jù)情況進(jìn)行討論。對(duì)于通常的界面，我們可以懶惰，只做iPhone5畫(huà)面尺寸的設(shè)計(jì)原稿，請(qǐng)?jiān)谄渌?huà)面上開(kāi)發(fā)適應(yīng)，最終檢查實(shí)機(jī)效果。蘋(píng)果官方網(wǎng)站的屏幕比較頁(yè)面使用的是通常的界面。對(duì)于一些定制的界面，我們應(yīng)該根據(jù)不同的畫(huà)面重新適應(yīng)。例如，以下是簡(jiǎn)單的profile頁(yè)面示例，自動(dòng)適應(yīng)大畫(huà)面的效果很差。此時(shí)，設(shè)計(jì)師應(yīng)手動(dòng)為大屏幕重新調(diào)整設(shè)計(jì)，如下圖所示。上圖顯示，iPhone6Plus界面的一部分切割尺寸比3x大，因?yàn)楸仨殕为?dú)切割，所以不能簡(jiǎn)單地給iPhone6Plus統(tǒng)一所有Plus。此時(shí)矢量切割圖在開(kāi)發(fā)中的優(yōu)勢(shì)是顯而易見(jiàn)的，只要告訴開(kāi)發(fā)大屏幕切割圖的尺寸，就沒(méi)有必要進(jìn)行額外的輸出切割圖。畢竟，手機(jī)屏幕仍然是像素圖。即使像細(xì)線圖標(biāo)是矢量的，它們也可能在縮放后變得虛假和模糊(類(lèi)似于HTML中的iconfont)。理論上，并非所有情況都適合矢量切割。但是，iPhone6Plus屏幕本身是downscale，原本pixelperfect的切圖也在縮放后變得虛弱，完全沒(méi)有pixelperfect，iPhone6Plus屏幕是否被優(yōu)化如果切圖使用Sketch，可以嘗試PDF矢量切圖(但必須在實(shí)機(jī)上確認(rèn)效果)。Photoshop只能輸出位置圖。上面提到定制界面中的一些切割單獨(dú)輸出，其他通常用2x的PSD輸出1-3x切割即可。此外，人工智能不適合界面設(shè)計(jì)。勇敢地嘗試Sketch是件好事，但如果Sketch的各種缺點(diǎn)無(wú)法忍受，建議使用Photoshop。另外，強(qiáng)烈推薦@Akane_Lee老師iPhone6和Plus制圖建議的好文章!Akane_Lee:iPhone6和Plus新機(jī)一發(fā)表，群中就有人叫上司準(zhǔn)備iPhone6的適應(yīng)，現(xiàn)在什么文件都沒(méi)有完整在許多細(xì)節(jié)不明的情況下，我只能建議這種最安全的方法:做@1x，擴(kuò)大到@2x和@3x。以下情況預(yù)設(shè)為制作Mockup切割各種尺寸的圖。

　　主流HTML5移動(dòng)網(wǎng)絡(luò)開(kāi)發(fā)框架?

　　一定要使用框架。否則，就恢復(fù)JS，自己寫(xiě)風(fēng)格H5移動(dòng)開(kāi)發(fā)也分為兩種，一種是普通網(wǎng)頁(yè)，另一種是封裝的應(yīng)用程序在手機(jī)上跑步。接下來(lái)，我只大致介紹哪個(gè)框架。關(guān)于建站，具體特性不能說(shuō)三兩句話，主題可以自己搜索相關(guān)資料。后者有名的框架是PhoneGap、MUI等。前者具體分為CSS框架和JS框架。風(fēng)格框架有很多，常見(jiàn)的有jQueryMobile、Bootstrap、KendoUI、AmazeUI等。JS框架一般是AngularJS、Backbone、ReactJS等，但老實(shí)說(shuō)，這些JS框架比較重，一般是為比較復(fù)雜的場(chǎng)景設(shè)計(jì)的，如果你的頁(yè)面需求簡(jiǎn)單的話，只需要設(shè)計(jì)框架就可以了。值得一提的是，國(guó)內(nèi)BAT的三大巨頭也有自己的H5框架，已經(jīng)開(kāi)源了。百度是GMU、Clouda+、EFE三個(gè)，螞蟻是KissyMobile，騰訊是FrozenUI。