用手機直接打開網站經常會看到和電腦端一樣的佈局和內容,但是由於手機屏幕大小的限制,內容經常會被強制縮放,導致使用手機訪問網站時很不方便,因此很多企業選擇了對網站進行手機適配,使其在手機端也可以友好的展示,設計手機端的展示形式則是非常重要的一部分,下面是新工式眾包平臺在製作手機網站時的佈局規律,特此分享,以供參考。
方法/步驟
設計師在設計頁面時,儘量使用電腦端上已有的元素(圖片、文字、視頻等,即製作該單頁上的所有元素),使這些元素合理且美觀的體現在移動端。原電腦端上已有的元素實在不適合手機端展示的可重新設計元素樣式。
設計師在對元素進行排布時,應該儘量遵守元素在電腦端上的排列順序。(在電腦端,從左向右從上往下的排布順序,在移動端顯示時按從上往下的排布順序)
對於電腦端Flash相關類型文件應該在移動端主動過濾並反饋給發包者及平臺
文字左右對齊,方便開發人員後續工作,標題過長可以使用省略號代替
使用原網站元素時注意功能的可實現,如圖為PC網站所示元素,直接用於手機展示會導致文字過小,應重新調整,如下圖為手機展示界面,使用了電腦端的元素卻無法實現功能
導航欄分類較多時可以分為兩行或者三行展示,如步驟1中的電腦版和手機版導航欄的區別
注意事項
文字一定要對齊,否則手機界面會非常不整齊,就很難看