移動端適配之我見

這篇文章源於今天上午群聊中引發的關於適配的問題。一方認為當前移動端產品安卓和iOS的交互視覺有必要統一，不同平台下的體驗能保證完整。無需針對不同平台專門設計。另一方面是認為我們需要嚴謹對待不同平台的適配，針對性的優化。然而我覺得當前國情下，確實沒有太大的必要去做不同的適配，一套設計去適配就能搞定，不管是效率還是體驗上都有它的好處。微信之前就是很好的市場案例。然而我下面就要說說我在實際項目中是如何用一套設計去適配不同平台的。

首先在選擇什麼尺寸適合？我的分析是需要一個能在兩個平台中比較多且處於中間的尺寸。於是乎我選擇了iPhone6/6S的尺寸750*1334。

理由如下：

• 這個解析度在蘋果設備上是一個中間尺寸，適配大小2套解析度的時候的損失最小。幾乎不需要去調整什麼。ps：項目中之前用過640*960的解析度設計，發現適配到6plus上文字會覺得比較小，且有點地方會覺得過於空洞。
• 安卓機型常用的設計尺寸我想大家都是720*1280吧？當然也有用更大尺寸的先不說。你會發現720和750兩個尺寸就差30px換算下來就是15dp。這個也只是橫行拉伸的微小差距。所以我們在適配的時候基本忽略這微小的差距。

  

• 不用更大的尺寸的原因是因為在設計的時候不那麼方便預覽，鄙人電腦13寸。且大尺寸適配到小尺寸上字體的變化需要去調整

綜上所訴：因為差距微弱，所以選擇750*1334，把安卓的720*1280這個@2x下的尺寸和蘋果的@2x的尺寸強行劃成等號。（完美主義者，你就畫2套吧，反正我拗不過你）

這樣保證了蘋果平台的適配基本完美解決，安卓平台的適配次完美解決。

解決了設計稿的問題接下來就要考慮切圖標註了！

如果你和我一樣用的是sketch，那麼你很幸運，我在這邊案例一個插件measure：http://utom.design/measure/。來自群內的@utom大神開發的軟體，完全免費。大家覺得好用可以去打賞下。

（什麼？你想知道什麼群？哦，故事是這樣的，很久之前那時候sktech才開始流行的時候我搞了個群，後來發現酷9的總監傅譯熳大姐她們公司很多人也用這個，我們都認識後來就提議以他的影響力建立個新的群更好的擴展交流。群號：歡迎加入界面設計軟體sketch交流，群號碼：372269775。但是已經滿了貌似，想加入的可以嘗試下。我不會告訴你我是管理員的。群內設計討論比較濃郁，暫時沒有另外建立群的打算。）

次噢，跑題很久了。拉回來…………

先看measure的介紹圖

如圖所示，他可以幫你自動生成4套解析度。當然我的做法是在設置的時候選擇蘋果的@2x。這樣就會生成4個切圖。其中三個可以給蘋果，全部4個安卓可用。

標註的話，大家用這個插件生成一個html的文件就行了。我都是這樣。效果如圖：

清晰可以看到各種參數，還乾淨整潔。

當然在和開發溝通你的適配原則的時候最好是需要標註一下這些屬性：如圖

這個是sketch3.9版本之後才有的新功能。利用measure上的note功能可以標識你的元素的智能縮放屬性是那種。方便開發去更好的還原你的設計。這幾個屬性我就不詳細說了。官網都有介紹的。我貼個中文的簡單介紹吧：http://www.ui.cn/detail/154342.html

到這裡基本上就能完成一個產品的設計和輸出了。當然還是需要你們和你們開發小哥多去溝通，讓她能理解到你的用心和能帶來的好處。她們才願意配合你的想法。我在落實這一套的方法的過程中基本沒有遇到困難。

最後感謝團隊勇於嘗試的開發小夥伴。

寫在最後：第一次寫這種東西，發現很多地方很難描述的比較好。懂得人肯定自然能懂，不懂的同學還是希望能在下面留言討論。我會一一回復。謝謝。