隨著各個(gè)手機(jī)操作系統(tǒng)的應(yīng)用平臺(tái)的上線，幾乎所有的互聯(lián)網(wǎng)應(yīng)用都在往手機(jī)上遷移。然而手機(jī)與PC 不一樣，PC經(jīng)過(guò)了多年的發(fā)展，在設(shè)計(jì)上形成了很多不成文的規(guī)則，如網(wǎng)頁(yè)的寬度都在960px左右【當(dāng)然，由于整體的電腦屏幕往大尺寸及高分辨發(fā)展，除了背景寬屏自適應(yīng)外，不少網(wǎng)頁(yè)也正朝著更寬的方向上發(fā)展】。當(dāng)前的手機(jī)種類(lèi)繁多，手機(jī)屏幕的大小、比例各異，并且手機(jī)的屏幕本身就小，因此既要考慮應(yīng)用在不同屏幕大小上的適配，又要保持其一致性，同時(shí)還要提高每個(gè)手機(jī)屏幕的使用效率，這就存在著很多的矛盾點(diǎn)。

在客戶端的設(shè)計(jì)過(guò)程中，針對(duì)不同的屏幕大小，應(yīng)該如何來(lái)設(shè)計(jì)？是否每個(gè)大小的屏幕尺寸都需要一個(gè)新的界面布局，還是所有的屏幕尺寸都使用相同的界面布局？我們將在下面的內(nèi)容中來(lái)探討這些內(nèi)容。

一、當(dāng)前熱門(mén)手機(jī)的屏幕大小

下圖中，我抽取了國(guó)內(nèi)某個(gè)網(wǎng)絡(luò)電器城某周的10大暢銷(xiāo)手機(jī)排名：

雖然只是2010年中的某一周的手機(jī)銷(xiāo)售量排名，由此可以看出，當(dāng)前使用中的手機(jī)屏幕差異很大，各種屏幕大小和分辨率都有。如果為了適配更多的用戶群體，則需要考慮的手機(jī)屏幕大小和分辨率更多?！静贿^(guò)，根據(jù)當(dāng)前的手機(jī)發(fā)展趨勢(shì)，及手機(jī)客戶端的使用行為可以看出，最主要需要用戶關(guān)注的手機(jī)屏幕是2.4吋以上，240*320以上的手機(jī)屏幕，因?yàn)檫@樣的手機(jī)使用客戶端的頻率和用戶量都會(huì)更多。個(gè)人建議更多地是考慮320*480及以上的屏幕?！?/p>

二、屏幕大小正確理解

說(shuō)起屏幕大小的時(shí)候，會(huì)有兩種表達(dá)方式，1） “我的屏幕2.4吋，你的屏幕3.5吋。” 2）“這個(gè)屏幕分辨率 240*320，那個(gè)屏幕分辨率為320*480?！钡谠O(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ì)大些，反之亦然。

在進(jìn)行手機(jī)界面布局中，除了元素的像素值外，考慮元素的實(shí)際尺寸也非常重要，甚至更為重要（人眼是要靠物體成像在視網(wǎng)膜上的視角大小來(lái)進(jìn)行識(shí)別感知，視角是與物體實(shí)際大小和距離有關(guān)）。

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

也可以看出，這個(gè)用戶感知最優(yōu)的取值也與使用手機(jī)的人群有關(guān)（如年齡大的用戶需要物理尺寸更大的界面元素）。

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

也可以看出，這個(gè)用戶感知最優(yōu)的取值也與使用手機(jī)的人群有關(guān)（如年齡大的用戶需要物理尺寸更大的界面元素）。

三、設(shè)計(jì)過(guò)程與屏幕適配思路

1．確定目標(biāo)的屏幕大小

屏幕大小由寬度和高度兩個(gè)因素決定，但是在布局手機(jī)客戶端的過(guò)程中，最關(guān)心的是寬度值。寬度確定后，高度可以由滾動(dòng)或者翻頁(yè)來(lái)顯示所有內(nèi)容；文字可以在適當(dāng)?shù)奈恢谜坌?；?biāo)題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度，圖標(biāo)、文字、特殊的組件不僅需要考慮寬度，也需要考慮整個(gè)屏幕的布局是否與之適配。

由于不可能對(duì)所有的客戶端進(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版本的客戶端為主。

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

• 智能手機(jī)以Symbian或S60 v1,2,3，Windows mobile為主流；或者是非智能手機(jī)的客戶端以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等

D. 平板屏幕：7吋及以上的屏幕【可以不包含在手機(jī)中，^_^】

• 由于當(dāng)前的平板電腦上的應(yīng)用的開(kāi)發(fā)都是基于手機(jī)應(yīng)用的功能，但是，平板的屏幕物理尺寸大增，使用情景也和手機(jī)不一致，在設(shè)計(jì)上有很多的特殊性，可發(fā)揮空間也更大，因此個(gè)人建議單獨(dú)的設(shè)計(jì)。

其次，根據(jù)我們的產(chǎn)品戰(zhàn)略，來(lái)確定待開(kāi)發(fā)產(chǎn)品的用戶群體來(lái)確定一款目標(biāo)手機(jī)屏幕。由于對(duì)于某個(gè)業(yè)務(wù)的手機(jī)客戶端都不會(huì)只推出其中的某一款（除非是戰(zhàn)略上的用戶群確定為使用某種手機(jī)的特殊業(yè)務(wù)），而是會(huì)對(duì)不同的手機(jī)平臺(tái)分別進(jìn)行適配。因此，確定的目標(biāo)手機(jī)屏幕，應(yīng)該是在該檔次中最主流的手機(jī)屏幕大小，在以此為基準(zhǔn)向上或向下來(lái)適配其他的同檔手機(jī)。

2．適配原則

1）? 客戶端的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)該符合用戶的主觀舒適范圍值。

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客戶端，同時(shí)，A類(lèi)小屏幕大小主要使用Java客戶端，因此，Java類(lèi)客戶端需要適配的范圍更廣，至少應(yīng)包括B類(lèi)和A類(lèi)的屏幕大小。

（1）Android 與iPhone手機(jī)的適配

iPhone 本身就只有兩個(gè)分辨率及一個(gè)屏幕大小尺寸，可以很好的來(lái)適配（最多出兩套圖片即可，系統(tǒng)會(huì)自動(dòng)讀取）。

對(duì)于android，由于其開(kāi)放性，導(dǎo)致了各種屏幕的大小及分辨率都有。但Android系統(tǒng)有一個(gè)很好的特性，系統(tǒng)會(huì)根據(jù)屏幕的分辨率密度來(lái)進(jìn)行自適應(yīng)。但是，當(dāng)密度差異較大時(shí)，自適應(yīng)后，圖標(biāo)會(huì)由于拉伸變得模糊影響效果。這時(shí)，必須要通過(guò)重新設(shè)計(jì)新的圖標(biāo)或者加大間距來(lái)保持最佳的視覺(jué)效果及更便利于用戶操作。

Android 手機(jī)屏根據(jù)屏幕的分辨率密度和物理尺寸，可以分為以下幾類(lèi)：

注：圖中的【】?jī)?nèi)的值為手機(jī)所占的百分比值。Android 開(kāi)發(fā)平臺(tái)數(shù)據(jù)，不一定準(zhǔn)

Android 提供了如下的機(jī)制來(lái)對(duì)不同大小和密度的屏幕進(jìn)行適配：

1）? 圖片資源的縮放

基于當(dāng)前屏幕的密度，平臺(tái)自動(dòng)加載任何未經(jīng)縮放的限定尺寸和密度的圖片。如果圖片不匹配，平臺(tái)會(huì)加載默認(rèn)資源并且在放大或者縮小之后可以滿足當(dāng)前界面的顯示要求。如果沒(méi)有多套資源，平臺(tái)會(huì)認(rèn)為默認(rèn)的資源是中密度的屏幕資源（160dpi）。例如，當(dāng)前為高密度屏幕，平臺(tái)會(huì)加載高密度資源（如圖片），如果沒(méi)有，平臺(tái)會(huì)將中密度資源縮放至高密度。

2）? 根據(jù)分辨率和坐標(biāo)自動(dòng)縮放（密度不同的屏幕適配）

如果程序不支持多種密度屏幕，平臺(tái)會(huì)自動(dòng)縮放絕對(duì)像素坐標(biāo)值和尺寸值等，這樣就能保證屏幕元素能和密度160的屏幕上一樣能顯示出同樣物理尺寸的效果。平臺(tái)會(huì)根據(jù)密度的比例來(lái)縮放實(shí)際尺寸的大小。

3）? 兼容更大的屏幕大?。ㄆ聊徊煌倪m配）

當(dāng)前屏幕超過(guò)程序所支持屏幕的上限時(shí)，定義supports-screens元素，這樣超出顯示的基準(zhǔn)線時(shí)，平臺(tái)會(huì)以屏幕大小的比例來(lái)縮放整個(gè)屏幕。

由上表格也可知，當(dāng)前的Android手機(jī)主要集中在標(biāo)準(zhǔn)屏的中密度和高密度兩個(gè)型號(hào)上。因此在設(shè)計(jì)中，主要是設(shè)計(jì)其中的一種為主，再去適配另一個(gè)型號(hào)即可。對(duì)于在一個(gè)檔次上的手機(jī)，都會(huì)根據(jù)上述的三個(gè)原則，系統(tǒng)自動(dòng)去適配。個(gè)人認(rèn)為，在進(jìn)行Android手機(jī)設(shè)計(jì)時(shí)，如果只準(zhǔn)備一套資源時(shí)，應(yīng)該以高密度的版本為主，這樣去適配中密度時(shí)，效果更好。

當(dāng)然，如果屏幕的密度差異較大時(shí)，自動(dòng)適配的效果肯定不會(huì)，如果要取得更好的適配效果，必須針對(duì)幾個(gè)不同的屏幕密度進(jìn)行單獨(dú)設(shè)計(jì)屏幕元素，提高視覺(jué)滿意度。

（2）非Android、iphone的手機(jī)適配

對(duì)于其他的非Android、iphone手機(jī)，則需要更多地考慮其適配規(guī)則，這些手機(jī)系統(tǒng)不提供自適應(yīng)的適配。

簡(jiǎn)單整理規(guī)則如下：

1）? 向上適配（標(biāo)準(zhǔn)屏向更大【分辨率高，物理尺寸大】的屏幕適配）

在向更大的屏幕適配時(shí)，根據(jù)設(shè)備分辨率的不同，會(huì)分為兩種狀態(tài)。

A．如果兩者的屏幕分辨率密度（dip）差不多，物理尺寸更大的屏幕。那可以直接在當(dāng)前尺寸上拉長(zhǎng)、拉寬即可，圖標(biāo)、行距都可以保持不變。

B. 如果屏幕密度要大很多，物理尺寸差不多的。則適配點(diǎn)包括：

• 設(shè)計(jì)多套圖標(biāo)，需要有更大分辨率的圖標(biāo)
• 使用不同的字體，需要更大的字體來(lái)適配大設(shè)備分辨率的屏幕
• 增加行間距
• 自適應(yīng)放大內(nèi)容中的圖片
• Tab頁(yè)簽 需要根據(jù)屏幕的大小來(lái)確認(rèn)每屏最多顯示的數(shù)目。
• 考慮一些復(fù)雜界面，增大界面中的一些元素的分辨率，會(huì)導(dǎo)致許多東西需要重新設(shè)計(jì)。這種情況需要重新設(shè)計(jì)該界面。

2）? 向下適配

在向更小的屏幕適配，這種情況較少，那會(huì)集中在如下幾點(diǎn)：

• 考慮一些極限點(diǎn)的改進(jìn)，需要適配到小屏幕的手機(jī)中，如標(biāo)題的最大字?jǐn)?shù)等。
• title、bottom欄與小屏幕寬度適配。
• 考慮到行高（行信息展示）的設(shè)計(jì)是否適合更小的屏幕高度。
• 在結(jié)構(gòu)上，需要考慮在小屏幕中，顯示是否合適。
• 根據(jù)屏幕密度的比例來(lái)設(shè)計(jì)屏幕元素，需要更小分辨率的屏幕元素
• 使用小的字體，具體的大小需要根據(jù)屏幕的大小來(lái)設(shè)定。

（3）豎屏橫屏適配

橫豎屏的適配，在本文中，不過(guò)多討論，這里只是簡(jiǎn)單的整理一下，我自己的理解。

對(duì)于不同功能的應(yīng)用，都有其特定的頁(yè)面展現(xiàn)形式，個(gè)人并不贊同蠻目對(duì)任何應(yīng)用不加選擇的都去適配橫屏。

個(gè)人觀點(diǎn)如下：

1）? 不同的應(yīng)用，在設(shè)計(jì)的過(guò)程中，對(duì)于選擇不同的屏幕有不同的選擇，如普通list多的應(yīng)用，豎屏更合適；顯示圖片更多的界面，或者想更好的展示全景的應(yīng)用，橫屏更合適。

2）? 不必遵循，對(duì)任何的應(yīng)用都可以自動(dòng)進(jìn)行橫屏豎屏的切換。如果覺(jué)得沒(méi)有必要橫屏或者豎屏的應(yīng)用，就可以不切換。

3）? 由于用戶在使用手機(jī)的過(guò)程中，經(jīng)常會(huì)無(wú)意中調(diào)整位置，從而導(dǎo)致手機(jī)誤認(rèn)為是要進(jìn)行橫豎屏的轉(zhuǎn)化，從而更容易導(dǎo)致操作上的失誤，引起用戶的反感。

4）? 橫豎屏的切換時(shí)，允許用戶對(duì)于同一個(gè)界面有不同的展示方式。例如不一定在豎屏?xí)r時(shí)list方式顯示，在橫屏?xí)r也和豎屏保持一致，這時(shí)橫屏可以有更好的適應(yīng)橫屏的展示方式，使用戶更好的操作。

由于手機(jī)系統(tǒng)各異，手機(jī)的屏幕尺寸五花八門(mén)，屏幕的性能也呈現(xiàn)多樣性，還有觸摸屏和非觸屏的區(qū)分，這四個(gè)變量結(jié)合起來(lái)，會(huì)有無(wú)數(shù)種不同的情況，如何能使你的應(yīng)用完美地展現(xiàn)給用戶，適配固然很重要。但是，更重要的是你要在適配之前，確定應(yīng)用的目標(biāo)群體。如果你的應(yīng)用主要是針對(duì)高端手機(jī)用戶的，那你何必去考慮低端的手機(jī)呢？畢竟為了很少的用戶，使你花了很大的力氣，可能會(huì)有不值得，這一點(diǎn)絕對(duì)值得每一個(gè)設(shè)計(jì)師思考。

===========

題外話

一般來(lái)說(shuō)，我們?cè)谠O(shè)計(jì)一個(gè)產(chǎn)品時(shí)，首先需要確定產(chǎn)品的用戶群體，然后基于用戶群體來(lái)設(shè)計(jì)針對(duì)該用戶群特點(diǎn)和使用行為的界面。但是對(duì)于手機(jī)客戶端，感覺(jué)這個(gè)過(guò)程不能完全適用：

原因是因?yàn)?，我的客戶端設(shè)計(jì)主要是針對(duì)不同的手機(jī)平臺(tái)（Android、ios，Win Phone 7，Palm Pre，Symbian…）來(lái)開(kāi)發(fā)的，因此，開(kāi)發(fā)出來(lái)的客戶端適用于所有的持有該手機(jī)的用戶。但是這些手機(jī)持有者是否都有相同的特質(zhì)，是否都喜愛(ài)使用該客戶端，是個(gè)很大的未知數(shù)。另一方面，如果我在建立用戶群時(shí)，完全根據(jù)用戶的需求、使用行為又或者人種學(xué)特征來(lái)分類(lèi)，那每一群人中持有的手機(jī)各不相同，那又該如何定義每個(gè)不同平臺(tái)下的客戶端的功能呢？

當(dāng)然，有人也會(huì)說(shuō)那就先了解不同的手機(jī)平臺(tái)的用戶群特征，然后再研究這群人對(duì)本客戶端應(yīng)用的需求和使用行為，以此再來(lái)設(shè)計(jì)客戶端，目前來(lái)說(shuō)這是更好的研究思路。

總之，這樣深入的討論，會(huì)發(fā)現(xiàn)客戶端會(huì)越想越復(fù)雜，有人說(shuō)手機(jī)客戶端的設(shè)計(jì)是最復(fù)雜的，是很有道理的，值得大家更多地探討…

來(lái)源：http://ued.taobao.com