手機網站界面設計如何布局

手機網站界面設計如何布局一、屏幕大小正確理解

說起屏幕大小的時候，會有兩種表達方式，1) 我的屏幕2.4吋，你的屏幕3.5吋。 2)這個屏幕分辨率 240*320，那個屏幕分辨率為320*480。但在設計過程中，屏幕的分辨率和屏幕的實際尺寸必須同時考慮。

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

屏幕物理尺寸：屏幕對角線長的實際尺寸，如2.4吋，3.5吋等等;

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

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

物理尺寸決定了屏幕的實際尺寸，而分辨率可以表示屏幕上可以呈現的像素點數，屏幕密度決定了屏幕的精細程度。相同的屏幕大小，如果分辨率高，則屏幕元素更精細。一個界面元素在屏幕里的實際尺寸卻是與屏幕密度相關，屏幕密度較小的屏上，界面元素的實際尺寸就會大些，反之亦然。

需要注意的是：在不同屏幕中，不同的圖標點陣或者不同的字體及大小的漢字，在人的主觀感知上，會有一個最優的結果值。在設計的過程中，我們需要根據這個最優值來進行界面的布局及手機版面設計。

手機網站界面設計如何布局二、設計過程與屏幕適配思路

1、確定目標的屏幕大小

屏幕大小由寬度和高度兩個因素決定，但是在布局手機客戶端的過程中，最關心的是寬度值。寬度確定后，高度可以由滾動或者翻頁來顯示所有內容;文字可以在適當的位置折行;標題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度，圖標、文字、特殊的組件不僅需要考慮寬度，也需要考慮整個屏幕的布局是否與之適配。由于不可能對所有的客戶端進行單獨的開發，因此，需要對手機屏幕的大小的歸類。同時，在設計中也不會真的只考慮屏幕大小一個因素，屏幕大小和操作系統、手機類型等還是存在很大的相關性的。

首先，我們先來定義一下手機的屏幕大小的歸類檔次：

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

一般以非智能機為主，歸在這個分類中的手機屏幕，一般是以java版本的客戶端為主。

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

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

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

iPhone 手機只有兩個版本的適配，屏幕物理尺寸保持一致;Android 系統手機及衍生平臺手機;Win phone 7 系統手機;Nokia S60 v5，symbian 3等

2、適配原則

1) 客戶端的logo，在各個手機上都應該清晰地顯示

2) 標題或者底部欄必須100%的與手機寬度適配

3) 文字內容如果顯示不下的話，可以自動適配寬度進行折行

4) 圖片可以根據寬度進行自動縮放，屏幕寬度超過圖片本身時，顯示圖片本身的大小

5) 適配過程中，界面的元素的寬高最小值應該符合用戶的主觀舒適范圍值

6) 不能完全使用分辨率的絕對比例來對界面布局進行縮放

3、 適配思路分析，根據我們前面的分析：

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

B類中等屏幕大小智能機主要以Symbian 和Windows mobile為主，因此在適配這兩個平臺時，主要集中在B類屏幕間的適配。

B類中等屏幕大小還有一塊是非智能手機，使用Java客戶端，同時，A類小屏幕大小主要使用Java客戶端，因此，Java類客戶端需要適配的范圍更廣，至少應包括B類和A類的屏幕大小。

      注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-68649.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注網頁制作頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050