手機網站界面設計如何布局
2022-11-15點擊量:156
手機網站界面設計如何布局手機網站界面設計如何布局一、屏幕大小正確理解說起屏幕大小的時候,會有兩種表達方式,1)我的屏幕2.4吋,你的屏幕3.5吋。2)這個屏幕分辨率240*320,那個屏幕分辨率為320*480。但在設計過程中,屏幕的分辨率和屏幕的實際尺寸必須同時考慮。這里首先有幾個概念需要再澄清一下:屏幕物理尺寸:屏幕對角線長的實際尺寸,如2.4吋,3.5吋等等;屏幕分辨率:屏幕所能顯示像素的多少。如,240*320等;屏幕密度(pixelperinch):以每英寸的像素數。每英寸的分辨率數,如160ppi。物理尺寸決定了屏幕的實際尺寸,而分辨率可以表示屏幕上可以呈現的像素點數,屏幕密度決定了屏幕的精細程度。相同的屏幕大小,如果分辨率高,則屏幕元素更精細。一個界面元素在屏幕里的實際尺寸卻是與屏幕密度相關,屏幕密度較小的屏上,界面元素的實際尺寸就會大些,反之亦然。需要注意的是:在不同屏幕中,不同的圖標點陣或者不同的字體及大小的漢字,在人的主觀感知上,會有一個最優(yōu)的結果值。在設計的過程中,我們需要根據這個最優(yōu)值來進行界面的布局及手機版面設計。手機網站界面設計如何布局二、設計過程與屏幕適配思路1、確定目標的屏幕大小屏幕大小由寬度和高度兩個因素決定,但是在布局手機客戶端的過程中,最關心的是寬度值。寬度確定后,高度可以由滾動或者翻頁來顯示所有內容;文字可以在適當的位置折行;標題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度,圖標、文字、特殊的組件不僅需要考慮寬度,也需要考慮整個屏幕的布局是否與之適配。由于不可能對所有的客戶端進行單獨的開發(fā),因此,需要對手機屏幕的大小的歸類。同時,在設計中也不會真的只考慮屏幕大小一個因素,屏幕大小和操作系統(tǒng)、手機類型等還是存在很大的相關性的。首先,我們先來定義一下手機的屏幕大小的歸類檔次:A.小屏幕:寬度240px以下屏幕或者2.4以下屏幕一般以非智能機為主,歸在這個分類中的手機屏幕,一般是以java版本的客戶端為主。B.中等屏幕:寬度240~320px,或者2.4~3.0吋屏幕智能手機以Symbian或S60v1,2,3,Windowsmobile為主流;或者是非智能手機的客戶端以java版本為主。同時包括240*320的寬屏手機。C.大屏幕:寬度320px以上屏幕或者3.0吋以上的屏幕iPhone手機只有兩個版本的適配,屏幕物理尺寸保持一致;Android系統(tǒng)手機及衍生平臺手機;Winphone7系統(tǒng)手機;NokiaS60v5,symbian3等2、適配原則1)客戶端的logo,在各個手機上都應該清晰地顯示2)標題或者底部欄必須100%的與手機寬度適配3)文字內容如果顯示不下的話,可以自動適配寬度進行折行4)圖片可以根據寬度進行自動縮放,屏幕寬度超過圖片本身時,顯示圖片本身的大小5)適配過程中,界面的元素的寬高最小值應該符合用戶的主觀舒適范圍值6)不能完全使用分辨率的絕對比例來對界面布局進行縮放3、適配思路分析,根據我們前面的分析:C類大屏幕大小主要以Android、iPhone、winphone7和NokiaV5等手機為主,它們都是觸屏手機,在適配上可以劃為一個檔次。B類中等屏幕大小智能機主要以Symbian和Windowsmobile為主,因此在適配這兩個平臺時,主要集中在B類屏幕間的適配。B類中等屏幕大小還有一塊是非智能手機,使用Java客戶端,同時,A類小屏幕大小主要使用Java客戶端,因此,Java類客戶端需要適配的范圍更廣,至少應包括B類和A類的屏幕大小。...