隨著各個(gè)手機(jī)操作系統(tǒng)以及設(shè)計(jì)類(lèi)網(wǎng)站平臺(tái)的不斷涌現(xiàn)，多數(shù)設(shè)計(jì)網(wǎng)站的應(yīng)用都在往手機(jī)設(shè)計(jì)上遷移。但是當(dāng)前的國(guó)內(nèi)外手機(jī)網(wǎng)種類(lèi)繁多，手機(jī)屏幕的大小、比例各異，并且手機(jī)的屏幕本身就小，因此既要考慮應(yīng)用在不同屏幕大小上的適配，又要保持其一致性。那么，國(guó)內(nèi)外手機(jī)網(wǎng)站設(shè)計(jì)尺寸及界面布局是怎么樣的呢?下面杭州手機(jī)網(wǎng)站設(shè)計(jì)公司蒙特針對(duì)這個(gè)問(wèn)題給大家講解一下。

　　在客戶(hù)端的手機(jī)網(wǎng)站設(shè)計(jì)及其網(wǎng)站設(shè)計(jì)方案過(guò)程中，針對(duì)不同的屏幕大小，應(yīng)該如何來(lái)設(shè)計(jì)?是否每個(gè)大小的屏幕尺寸都需要一個(gè)新的界面布局，等等。那么在手機(jī)網(wǎng)站設(shè)計(jì)方案中手機(jī)網(wǎng)站界面設(shè)計(jì)該如何布局呢?

　　杭州手機(jī)網(wǎng)站設(shè)計(jì)一、屏幕大小正確理解

　　說(shuō)起屏幕大小的時(shí)候，會(huì)有兩種表達(dá)方式，1) 我的屏幕2.4吋，你的屏幕3.5吋。 2)這個(gè)屏幕分辨率 240*320，那個(gè)屏幕分辨率為320*480。但在設(shè)計(jì)過(guò)程中，屏幕的分辨率和屏幕的實(shí)際尺寸必須同時(shí)考慮。

　　這里首先有幾個(gè)概念需要再澄清一下：

　　屏幕物理尺寸：屏幕對(duì)角線長(zhǎng)的實(shí)際尺寸，如2.4吋，3.5吋等等;

　　屏幕分辨率：屏幕所能顯示像素的多少。如，240*320等;

　　屏幕密度(pixel per inch)：以每英寸的像素?cái)?shù)。每英寸的分辨率數(shù)，如160ppi。

　　物理尺寸決定了屏幕的實(shí)際尺寸，而分辨率可以表示屏幕上可以呈現(xiàn)的像素點(diǎn)數(shù)，屏幕密度決定了屏幕的精細(xì)程度。相同的屏幕大小，如果分辨率高，則屏幕元素更精細(xì)。一個(gè)界面元素在屏幕里的實(shí)際尺寸卻是與屏幕密度相關(guān)，屏幕密度較小的屏上，界面元素的實(shí)際尺寸就會(huì)大些，反之亦然。

　　需要注意的是：在不同屏幕中，不同的圖標(biāo)點(diǎn)陣或者不同的字體及大小的漢字，在人的主觀感知上，會(huì)有一個(gè)最優(yōu)的結(jié)果值。在設(shè)計(jì)的過(guò)程中，我們需要根據(jù)這個(gè)最優(yōu)值來(lái)進(jìn)行界面的布局及手機(jī)版面設(shè)計(jì)。

　　杭州手機(jī)網(wǎng)站設(shè)計(jì)二、設(shè)計(jì)過(guò)程與屏幕適配思路

　　手機(jī)網(wǎng)站版面設(shè)計(jì)1、確定目標(biāo)的屏幕大小

　　屏幕大小由寬度和高度兩個(gè)因素決定，但是在布局手機(jī)客戶(hù)端的過(guò)程中，最關(guān)心的是寬度值。寬度確定后，高度可以由滾動(dòng)或者翻頁(yè)來(lái)顯示所有內(nèi)容;文字可以在適當(dāng)?shù)奈恢谜坌?標(biāo)題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度，圖標(biāo)、文字、特殊的組件不僅需要考慮寬度，也需要考慮整個(gè)屏幕的布局是否與之適配。由于不可能對(duì)所有的客戶(hù)端進(jìn)行單獨(dú)的開(kāi)發(fā)，因此，需要對(duì)手機(jī)屏幕的大小的歸類(lèi)。同時(shí)，在設(shè)計(jì)中也不會(huì)真的只考慮屏幕大小一個(gè)因素，屏幕大小和操作系統(tǒng)、手機(jī)類(lèi)型等還是存在很大的相關(guān)性的。

　　首先，我們先來(lái)定義一下手機(jī)的屏幕大小的歸類(lèi)檔次：

　　A. 小屏幕：寬度240 px 以下屏幕或者2.4 以下屏幕

　　一般以非智能機(jī)為主，歸在這個(gè)分類(lèi)中的手機(jī)屏幕，一般是以java版本的客戶(hù)端為主。

　　B. 中等屏幕：寬度240~320 px，或者2.4~3.0吋屏幕

　　智能手機(jī)以Symbian或S60 v1,2,3，Windows mobile為主流;或者是非智能手機(jī)的客戶(hù)端以java版本為主。同時(shí)包括240*320的寬屏手機(jī)。

　　C. 大屏幕：寬度320 px以上屏幕或者3.0吋以上的屏幕

　　iPhone 手機(jī)只有兩個(gè)版本的適配，屏幕物理尺寸保持一致;Android 系統(tǒng)手機(jī)及衍生平臺(tái)手機(jī);Win phone 7 系統(tǒng)手機(jī);Nokia S60 v5，symbian 3等

　　手機(jī)網(wǎng)站版面設(shè)計(jì)2、適配原則

　　1) 客戶(hù)端的logo，在各個(gè)手機(jī)上都應(yīng)該清晰地顯示

　　2) 標(biāo)題或者底部欄必須100%的與手機(jī)寬度適配

　　3) 文字內(nèi)容如果顯示不下的話，可以自動(dòng)適配寬度進(jìn)行折行

　　4) 圖片可以根據(jù)寬度進(jìn)行自動(dòng)縮放，屏幕寬度超過(guò)圖片本身時(shí)，顯示圖片本身的大小

　　5) 適配過(guò)程中，界面的元素的寬高最小值應(yīng)該符合用戶(hù)的主觀舒適范圍值

　　6) 不能完全使用分辨率的絕對(duì)比例來(lái)對(duì)界面布局進(jìn)行縮放

　　3. 適配思路分析，根據(jù)我們前面的分析：

　　C類(lèi)大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手機(jī)為主，它們都是觸屏手機(jī)，在適配上可以劃為一個(gè)檔次。

　　B類(lèi)中等屏幕大小智能機(jī)主要以Symbian 和Windows mobile為主，因此在適配這兩個(gè)平臺(tái)時(shí)，主要集中在B類(lèi)屏幕間的適配。

　　B類(lèi)中等屏幕大小還有一塊是非智能手機(jī)，使用Java客戶(hù)端，同時(shí)，A類(lèi)小屏幕大小主要使用Java客戶(hù)端，因此，Java類(lèi)客戶(hù)端需要適配的范圍更廣，至少應(yīng)包括B類(lèi)和A類(lèi)的屏幕大小。