領(lǐng)眾品牌官網(wǎng)
為廈門網(wǎng)站建設(shè)公司企業(yè)提供高品質(zhì)網(wǎng)站建設(shè)
熱線:0592-5596197

網(wǎng)站建設(shè)

當(dāng)前位置:首頁 > 營銷運營 > 網(wǎng)站建設(shè)

網(wǎng)站設(shè)計師必看 手機網(wǎng)站設(shè)計規(guī)范

來源:領(lǐng)眾品牌    查看次數(shù):    發(fā)表時間:2016-09-06 17:37:43

 在很多時候網(wǎng)站的設(shè)計師不是很懂得手機網(wǎng)站如何設(shè)計,因為尺寸分辨率的問題,對于很多網(wǎng)頁設(shè)計師來說又不是很懂代碼知識,下面廈門網(wǎng)站設(shè)計公司領(lǐng)眾品牌,就為身為設(shè)計師的你提供一些手機網(wǎng)站設(shè)計的標(biāo)準(zhǔn)規(guī)范。

一、手機網(wǎng)站設(shè)計尺寸規(guī)范

一般我們在做手機網(wǎng)站的時候,其最低手機設(shè)備的寬度是320px高不限,現(xiàn)在手機網(wǎng)站設(shè)計我們大都是參考iPhone 4的640x960px、iPhone 6 plus的1242x2208px的設(shè)計為標(biāo)準(zhǔn)規(guī)范,而其他手機及設(shè)備都是一樣的。我們先假定設(shè)計稿是按640x960px的規(guī)范輸出,先來看看前端的常用適配方案。

手機網(wǎng)站設(shè)計尺寸規(guī)范

二、前端適配方案

前端的適配方案大致分為四種:

1、根據(jù)meta按比例縮放

  這種方案的實現(xiàn)更偏技術(shù),大致原理是根據(jù)設(shè)備的分辨率及像素比等信息,計算出頁面的縮放(scale)數(shù)值,來進行等比縮放。最終的效果就是基于640x960px的設(shè)計稿再進行等比縮放,這種實現(xiàn)比較適合某些圖片較多的活動頁面開發(fā),可以使用設(shè)計稿上的絕對像素值進行開發(fā),即設(shè)計稿上是200px則CSS代碼中的數(shù)值也是200px。

  當(dāng)然,這種方案也有致命的缺點,即腳本計算的結(jié)果很難覆蓋全部設(shè)備,對于一些計算不準(zhǔn)確,或者分辨率像素比未知的設(shè)備,很容易整個頁面異常放大或縮小,直接暴露嚴(yán)重BUG。綜上,這種縮放方案可以總結(jié)出以下基本特征:

  效果:按設(shè)計稿等比縮放。

  場景:圖片較多的活動頁面開發(fā)。

  優(yōu)點:可以直接按照設(shè)計稿像素值開發(fā)。

  缺點:許多設(shè)備無法覆蓋,不斷填坑。

 

2、根據(jù)頁面寬度百分比適應(yīng)

  曾經(jīng)很長的一段時間,我們都采用百分比適配方案。例如微信購物入口中的京東購物,目前仍然采用這種方案。

  這種方案的主要表現(xiàn)就是,在比基準(zhǔn)設(shè)備(如640x960px)寬的設(shè)備上,頁面元素的橫向?qū)挾仁前窗俜直茸赃m應(yīng)的,但是高度不會變化。所以,無論遇到什么設(shè)備,只需要在寬度上進行兼容即可滿足,而文本圖片等內(nèi)容,也可以按照寬度自適應(yīng),盡可能充分利用屏幕空間。

  而開發(fā)時,由于iPhone以及許多Android機都具有高分辨率屏幕,比如iPhone 4S的Retina屏幕實際像素點是物理像素的兩倍。所以,我們開發(fā)時要在640x960px的設(shè)計稿尺寸的基礎(chǔ)上除以2,比如設(shè)計稿上的高度是200px,則CSS中就是height:100px;

  關(guān)于Retina屏幕的基本知識,建議大家自己查找資料,我只挑重點。

  效果:按設(shè)計稿尺寸除以2,元素寬度使用百分比實現(xiàn)。

  場景:平臺型頁面,頁面布局不是很復(fù)雜。

  優(yōu)點:可以適應(yīng)幾乎所有設(shè)備。

  缺點:橫向拉寬會使布局比例失調(diào),且復(fù)雜結(jié)構(gòu)百分比實現(xiàn)有難度。

 

3、基于媒體查詢的響應(yīng)式方案

  響應(yīng)式設(shè)計,曾經(jīng)乃至現(xiàn)在都是非常時髦的概念,不過在實際應(yīng)用中,響應(yīng)式設(shè)計還是有其相對狹隘的應(yīng)用場景。一般除了一些創(chuàng)新的小公司,或者某些專題網(wǎng)站之外,很少會用一套代碼來適配所有終端。比如PC,Mobile,Pad甚至iWatch等,全都用一套代碼來適配顯然是不科學(xué)的。

  目前普遍的觀點是,響應(yīng)式設(shè)計更適合專題頁面,或者沒有資源來針對各個終端進行單獨開發(fā)的團隊來使用。

  響應(yīng)式設(shè)計主要遵循MobileFirst,要針對不同設(shè)備給出不同設(shè)計方案,并設(shè)置合適的斷點,結(jié)合百分比方案,來在不同的設(shè)備顯示不同的布局。

  效果:不同設(shè)備表現(xiàn)可能截然不同。

  場景:專題網(wǎng)站,小團隊低成本開發(fā)。

  優(yōu)點:不通設(shè)備可以發(fā)揮更多的想象力。

  缺點:要出多套設(shè)計,且內(nèi)容可能需要取舍。

        響應(yīng)式頁面設(shè)計

 

4、REM縮放方案

 

  REM方案的原理跟meta方案非常相似,只不過是更加粗暴地根據(jù)設(shè)備的寬度來調(diào)整縮放。與meta方案不同的是,REM方案并不是縮放整個頁面,而是頁面上所有的尺寸都是與根元素(html)的字體大小相關(guān)的,我們只是根據(jù)不同設(shè)備來調(diào)整根元素字體大小,則所有尺寸隨之變化。

  效果:按照設(shè)計稿等比縮放。

  場景:活動頁面及部分平臺頁面。

  優(yōu)點:開發(fā)方便,適應(yīng)性好。

  缺點:等比縮放超大會顯得不精致,腳本計算晚頁面可能跳動。

手機網(wǎng)站設(shè)計尺寸規(guī)范

三、設(shè)計師與前端如何對接

  了解了上面的一些適配方案之后,作為設(shè)計師就要首先確定,我的設(shè)計稿在不同的設(shè)備上到底需要怎樣的表現(xiàn)?假設(shè)遇到了更寬的設(shè)備,是橫向拉寬?還是等比縮放?還是再設(shè)計一個截然不同的布局?

  這些前提基本確定了該設(shè)計稿會如何實現(xiàn),當(dāng)然你所設(shè)計的頁面可能是平臺的一部分,那么就要遵循平臺既有的縮放規(guī)則,否則可能會有一些不匹配的問題。比如meta不同的兩個頁面來回切換會產(chǎn)生瞬間放大的BUG等。

  確定好大致的適配方向,你還要選擇是基于640還是基于1242的尺寸進行開發(fā),有人提到iPhone6的750,這里我們可以按照640拉寬的情況統(tǒng)一對待。

  不過要注意的是,Sketch中默認(rèn)750的畫布,可不是按照640拉寬來構(gòu)思的,所以如果要在Sketch中基于默認(rèn)畫布開發(fā),要考慮到放在640的機型上icon會稍大的情況。

  如果按照640寬度進行設(shè)計,實際上我們潛在約定了這是個類似iPhone4/4S的2倍像素比的設(shè)計稿。那么,無論采用何種適配方案,我們輸出的icon等都是相當(dāng)于兩倍尺寸的。而在前端開發(fā)過程中,如果采用meta方案,則CSS中使用實際尺寸。

  而如果是百分比方案等,則在樣式中設(shè)置設(shè)計稿1/2的尺寸(對應(yīng)設(shè)備的物理像素),但icon圖片本身還是設(shè)計稿的尺寸,只是在Retina屏幕上需要更多的像素,所以用代碼將其展示時在設(shè)備上的物理尺寸壓縮到了1/2。

  關(guān)于物理像素,CSS像素,像素密度等內(nèi)容,足夠再寫上10086個字了。作為設(shè)計師,只需要知道大概的計算方式,以及基本的適配方案就可以了。

  最后,也是最重要的,一個開發(fā)團隊一定要有設(shè)計規(guī)范,并且有與之對應(yīng)的開發(fā)規(guī)范,這樣才能真正的實現(xiàn)無縫對接。

 

網(wǎng)站設(shè)計師在設(shè)計手機移動網(wǎng)站的時候一定要按照上面的標(biāo)準(zhǔn)規(guī)范,隨著手機網(wǎng)站、自適應(yīng)響應(yīng)式網(wǎng)站越來越多。

作者:一名

12年資深網(wǎng)站設(shè)計師 前端交互開發(fā)工程師

相關(guān)文章: