蘋果和安卓手機屏幕尺寸比較多,怎麼能設計一套頁面,都兼容呢?
還是各種版本都做,那麼主要的尺寸是什麼
謝邀。剛要問「題主是不是PM」,一看果然…
大概給你說一下,讓頁面自動適應,Android跟iOS都有其實現方式。在設計UI的時候,對各個UI元素按照相對的距離來排列,剩下的開發者會自己給你對出來實現方式。
不要做幾個屏幕解析度的圖,再讓開發者挨個給你適配就行,這樣非常不環保,甚至有可能挨刀子。不邀而答,來刷一下答題數。
只說Android的。iOS可參照 @杜亮 的回答。
當下Android開發這塊,主流只做一套布局和切圖。
解析度按照1920x1080設計即可
雖然目前Android已經推出了2560x1920的解析度,但我接觸的主流項目通常PM和設計按照1920x1080做文檔和切圖。代碼儘可能自適配。
match和wrap程序員會用,還有weight權重。最重要是布局文件要寫好,這樣連橫豎屏都能用一個布局。切圖儘可能做點九。
減少紋理,當然這個具體問題具體分析,只要布局寫好了,圖片大多不是問題,實在有還原度高的幀動畫可以切多套圖。文字儘可能控制長度。
我做過的項目涉及到多語言,俄羅斯語那長度那簡直了。
Android還有dimens工具。
一般的程序員都會用這個工具來控制在不同的解析度下適配長度和字體大小了。另外如果題主是PM,應該轉變下思路,尊重Android Design文檔,不要什麼頁面都弄得好像是在iOS上運行一樣。鏈接在此:Design | Android Developers
最後貼一下我之前接手項目的布局結構圖,我當時真是暗暗罵了聲娘,高級工程師釀的美酒你醉不醉。http://www.zhihu.com/question/25308946
http://www.zhihu.com/question/26519174/answer/33193666如果是新手,在易用實用的前提下,一切從簡。我相信你是在說web頁面,不然你嘛蘋果和安卓的軟體又不是通用的,樓上幾位完全是瞎折騰啊,要麼就是你這個問題很傻氣!
————————
正題開始首先,移動web頁面的解析度跟設備的解析度是兩碼事,這也是它有別於app的地方。
移動web頁面的解析度是指瀏覽器的解析度,雖然設備(安卓、蘋果、wp……)的解析度很多,但是瀏覽器默認的解析度卻沒有多少,比如蘋果4跟5的瀏覽器默認的網頁寬度都是只有320px的。
基於以上解讀,其實——web頁面解析度是不管你什麼設備的,安卓蘋果都一樣。
其次我想告訴你的是——你的這個問題叫做「自適應網頁(有別於響應式)」歐美國家的大部分網站其實都是自適應的,國內網站如果進入歐美,大部分也是被設計成了自適應的了,你可以去看360的國際版網頁。
為什麼國內「落後」於國外的網頁呢?其實是百度在拖後腿啦,百度到目前為止還不能很好的識別自適應頁面,給的排名自然就不公平了,而谷歌是沒問題的。
最後告訴你自適應網頁如何寫吧。第一理念,寬度用百分比表示;第二理念,div模塊化;第三,頁面浮動式布局;第四,媒體查詢;第五,js自適應設置
總結,國內其實很多網站都在採用自適應的寫法了,比較典型的就是果殼網,當然了,如果你是想學習怎麼寫的話,可以去看看那些小眾網站,他們的代碼加有備註除了一些基線條邊距什麼的,其它的都用百分比。千萬別 又限定字體大小又限定一行幾個字元,會被鄙視甚至砍死的。
推薦閱讀: