iPhone 6 / 6+出現後,如何改進工作流以實現一份設計稿支援多個尺寸?
移動app開發中多種裝置尺寸適配問題,過去只屬於Android陣營的頭疼事兒,只是很多設計師選擇性地忽視android適配問題,只出一套iOS平臺設計稿。隨著蘋果釋出兩種新尺寸的大屏iPhone 6,iOS平臺尺寸適配問題終於還是來了,移動設計全面進入“雜屏”時代。看看下面三款iPhone尺寸和解析度資料就知道螢幕有多雜了。
加上Android生態中紛繁複雜的各種奇葩尺寸,現在APP設計開發必須考慮適配大、中、小三種螢幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題?設計和開發之間採用什麼協作模式?一個基本思路是:
1、選擇一種尺寸作為設計和開發基準;
2、定義一套適配規則,自動適配剩下兩種尺寸;
3、特殊適配效果給出設計效果。
手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store稽核。先曬一下我們採用的協作模式,再慢慢說明原委。
第一步,視覺設計階段,設計師按寬度750px(iPhone 6)做設計稿,除圖片外所有設計元素用向量路徑來做。設計定稿後在750px的設計稿上做標註,輸出標註圖。同時等比放大1.5倍生成寬度1125px的設計稿,在1125px的稿子裡切圖。
第二步,輸出兩個交付物給開發工程師:一個是程式用到的@3x切圖資源,另一個是寬度750px的設計標註圖。
第三步,開發工程師拿到750px標註圖和@3x切圖資源,完成iPhone 6(375pt)的介面開發。此階段不能用固定寬度的方式開發介面,得用自動佈局(auto layout),方便後續適配到其它尺寸。
第四步,適配除錯階段,基於iPhone 6的介面效果,分別向上向下除錯iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的介面效果。由此完成大中小三屏適配。
為什麼選擇iPhone 6作為基準尺寸?
當面對大中小三種螢幕需要適配的時候,很容易想到先做好一種螢幕,再去適配剩下兩種螢幕。第一個決定是到底以哪種螢幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6(750px/375pt)作為基準,基於幾個原因:
1、從中間尺寸向上和向下適配的時候介面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計,到320pt可能元素之間比例就不是那麼回事了,比如圖片和文字之間視覺比例可能失調。
2、iPhone 6 plus有兩種顯示模式,標準模式解析度為1242×2208,放大模式解析度為1125×2001(即iPhone 6的1.5倍)。可見官方系統裡iPhone 6和iPhone 6 plus解析度之間就存在1.5倍的倍率關係。很多情況下這兩種尺寸可以用1.5倍直接等比適配。
3、1242×2208這個奇葩的數值是蘋果官方都不願意公開宣傳的一個解析度,不便於記憶和計算柵格。640×1136雖然是廣泛應用的一個解析度,但是大屏時代依然以小尺寸為設計基準顯然不合時宜,設計師會停留在小屏的視角做設計。
所以,iPhone6的750×1334是最適合基準尺寸。
只交付一套設計稿,預設用什麼規則來適配?
前文提到適配策略是先選擇iPhone 6作為基準設計尺寸,然後通過一套適配規則自動適配到另外兩種尺寸。這套適配規則總結起來就一句話:文字流式,控制元件彈性,圖片等比縮放。
控制元件彈性指的是,navigation、cell、bar等適配過程中垂直方向上高度不變;水平方向寬度變化時,通過調整元素間距或元素右對齊的方式實現自適應。這樣螢幕越大,在垂直方向上可以顯示更多內容,發揮大螢幕的優勢。
按照上述預設適配規則,大中小三種螢幕顯示效果均相同。有時候想在大螢幕顯示更多內容,需要設計出特殊適配效果。比如App store首頁焦點圖,從iPhone 6適配到iPhone 6 plus時焦點圖尺寸和排版做了特殊處理。底下應用列表也從一排3+個變成一排4+個,真正實現了大螢幕顯示更多內容的理念。這些就需要設計師給出相應設計稿。
相關文章
- 直播系統原始碼,快速實現改變圖片尺寸原始碼
- 如何實現函式返回多個值函式
- 如何使用JavaScript控制檯改進工作流程JavaScript
- 輕量級工作流引擎的設計與實現
- 如何實現自動化工作流?
- eXo 如何實現中文支援?
- 一套測試用例如何實現支援多個環境執行
- ASP實現多語言支援 (轉)
- 同事反饋環:如何實現持續改進的文化
- Oracle如何實現多個欄位去重Oracle
- 兩個版本iPhone 6區別僅在於螢幕尺寸iPhone
- 程式設計師30 歲之後:如何實現質的突破?程式設計師
- 移動端 web 開發的設計稿與工作流Web
- Redis 設計與實現 (五)--多機資料庫的實現Redis資料庫
- 一個真正符合中國國情的工作流設計參考(包括PHP實現)PHP
- 眾多Logitech滑鼠/鍵盤支援改進Git
- Promise進階——如何實現一個Promise庫Promise
- [MAUI程式設計]介面多型與實現UI程式設計多型
- RocketMQ 多級儲存設計與實現MQ
- 聊聊如何實現一個支援鍵值對的SPI
- 部分iPhone6/Plus/SE升級iOS10後出現網路問題iPhoneiOS
- 如何辨別iphone6s真假? iPhone6改6s真假辨別方法iPhone
- 單執行緒的JS如何實現多個互動同時進行執行緒JS
- Go 如何實現多型Go多型
- 如何在一個頁面同時實現增,刪,改。
- php 實現golang defer延遲執行(先進後出)PHPGolang
- java中如何實現多個資料來源?Java
- GitHub釋出改進開發工作流的新工具Github
- iPhone尺寸iPhone
- 彙編實現10進位制轉16進位制並以ASCII碼輸出ASCII
- 改進uwsgi啟動指令碼,使其支援多個獨立配置檔案指令碼
- 如何設計和實現高可用MySQLMySql
- 使用Java實現多執行緒程式設計Java執行緒程式設計
- 多雲已成現實,企業如何更好地實現多雲管理?
- 諸多改進!Superset 1.2.0 正式釋出!
- 如何在HDFS中進行資料壓縮以實現高效儲存?
- 前端使用 Konva 實現視覺化設計器(6)前端視覺化
- 【新手指南】App原型設計:如何快速實現這6種互動效果?APP原型