如何作一套設計稿兼容Android和iOS雙平臺,IOS和安卓UI的區別(轉載/學習用)

 來源:視覺中國   做者:熱心網友   發佈時間:2015-05-27html

來自:http://www.17xsj.com/UIsheji/lilunjiqiao/2221.htmlapp

 

 

如今許多公司都須要設計能夠同時運行於Android和 iPhones平臺的App。在理想狀態下,咱們應該單獨花數月時間分別設計兩個app。然而在現實中,設計一個app的時間就已經很緊了。更通行的作法是設計一個app,而後把它交給兩個不一樣的團隊去開發。若是你也按這種方式開發app的,那麼提早了解一下Android和 iPhones平臺的差別是頗有必要的。工具

1.瞭解對手佈局

一般的狀況是每一個人都有本身偏心的系統。那我本身來講,我以爲iPhones給個人感受更天然一些。但要了解另外一個平臺,最好的辦法就是買一臺支持該平臺的設備。若是能夠的話,最好一直堅持使用這個設備,直到這個app項目結束爲止。若是你是個自由設計師,新設備的價格也許會讓你心疼,但與它能帶給你帶來的長遠收益相比,這是值得的。測試

2.選擇平臺字體

由於設計app的日程一般很是緊張,而咱們又只能選擇其中一個平臺的app,因此從開始咱們應該根據市場需求,決定究竟以哪一種app開始。諸如這款app將更多用於安卓手機嗎?這款app是否須要付費?目標人羣有哪些?研究一下這些問題有助於咱們作出正確的選擇。優化

3.熟悉規則設計

在開始設計以前,首先要了解Android 和iOS平臺的官方設計指南。在過去,一款app在進入蘋果的應用商店以前,一般須要兩週時間等待審覈。相對而言進入谷歌Play的門檻要低一些。但隨着谷歌Material Design設計指南的完善,這一狀況也在逐漸改變。rest

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

安卓和IOS系統的區別分爲如下幾點:htm

1. 整體風格

從iOS7開始,蘋果摒棄了嘗試在早期的iPhone中使用的擬物化(skeuomorphic)設計風格,轉向扁平化設計。而谷歌的狀況卻相反。谷歌新推出的Material Design指南傾向於營造更接近真實世界的效果。

2. 真實按鈕

安卓手機有一個“後退(back)”按鈕,在app界面中,它可讓用戶回到早先的界面。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App
iPhones上沒有這個按鈕,回到上個界面的操做通常是經過屏幕左上角的“返回上一級”圖標實現的,但但使用時須要考慮app界面的不一樣路徑。

3.全局元素

有一些全局性圖標(如狀態和首標)會出如今全部界面中。若是想你的設計看起來很天然的話,就不要去改動這些條形的高度和風格。我建議在你設計第一個界面時就將這些元素定義好。在後續設計中,你能夠在模擬文件中使用佔位圖形(或OS中的狀態和首標)來代替它們,但必定要告訴開發人員,在全部頁面中這些元素都應該保持一致。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

 

兩個平臺在導航設計上略有不一樣。在安卓系統中,標題文字是左對齊的,而在iOS中,文字是居中的。在iOS中,不少公司都會將標題替換爲公司圖標,但在安卓系統中,這卻並不是是一個好的策略。由於狀態條(包括信號,電池和時間等信息)是原生系統自帶的,無需考慮它的設計。須要保證的是在製做模擬文件時,要使用正確的圖標以避免形成誤解。

4. 導航

或許安卓與iOS最大的不一樣之處體如今各自的導航上。安卓平臺的主要導航方式是一個抽屜式目錄。在用戶使用app的整個過程當中,他彷佛始終出如今界面裏。而蘋果的導航使用的是標籤欄的模式,它位於屏幕的下方,容許用戶查看app中不一樣的一級活動區。因此在設計app的一級活動區時,應該分別針對兩種平臺設計不一樣的目錄。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

從總體上考慮,app的結構或許比導航目錄更爲重要。若是app的總體結構良好,那麼導航條也會較爲出色。正如咱們剛纔說過的,你要面對的導航模式有兩種,Android中的抽屜式目錄和iOS中的標籤欄。在設計單獨的頁面時,有時把導航層直接隱藏也不失爲一個辦法。

5. 是否使用卡牌界面

卡牌式界面(Cards)正在逐漸成爲數字設計中重要的UI類型。他們用途靈活,便於用戶快速理解界面中的內容。從視覺效果上講,卡牌式界面也與安卓material design的理念很是一致。卡牌之間的陰影使它看起來感受很是天然。

在iOS中,使用卡牌界面則須要審慎行事。即使是像Facebook 和Pinterest這樣的大公司,當他們使用卡牌設計時,也給人以不太符合iOS設計指南的感受。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

iOS建議設計師使用幻燈片和層疊效果,但其基本試圖則更爲貼近扁平化設計風格。Instagram的app所有采用了扁平化風格的設計,雖然從整體結構上講,它的每一個帖子更應該被當作是卡牌界面。所以若是你想在iOS平臺下使用卡牌式界面的話,必定要當心使用陰影效果,並儘量使陰影看起來十分柔和。

6. 排版

iOS系統使用的字體是Helvetica Neue,而安卓使用的是Roboto。雖然兩種字體的風格各不相同,但它們的規格是接近的。若是想保證速度的話,也能夠選擇一種字體使用。但須要與開發者作好溝通,選擇的字體大小要適用於平臺中。在處理較爲重要的佈局或極端大小的字號時,建議對兩種字體都進行測試。

若是想追求效果的話,則須要你根據兩種平臺的不一樣特色,作出進一步的優化。如下僅是一些須要注意的要點:

安卓的Material Design在佈局中使用了大量的白空間

在 material design中,字體的使用更爲大膽.。造型誇張的標題配合以大量的空間每每能起到分層的做用。

在iOS中, 缺乏戲劇性的變化。但經過調節字號的大小。一樣能起到分層的做用。

在典型狀況下,兩個平臺使用的都是字體庫中較小的字號。然而在下面的示例中咱們也能夠看到,安卓使用的是較小的規範字體,而iOS 使用的倒是加粗的Helvetica Neue規範字體。這個簡單的示例說明,即便是很是簡單的排版,在安卓和iOS 中呈現出的效果也是大相徑庭的。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

7. 分層和觸控目標

iOS (44px @1x)和 Android (48dp - 48px at 1:1 比例)對於觸控目標的設計指南有所不一樣。Material Design建議將全部元素按8dp 方形基線網格(square baseline grid)對齊。

根據我從最新項目中得到的經驗,我認爲遵循安卓的設計指南更爲可靠一些,由於(a) 48px的觸控目標更大,所以在兩個平臺中的應用更爲可靠(b) Material design的佈局更符合當前的設計趨勢。總之,你須要一個可靠的網格,但安卓的定義更爲嚴格,咱們發如今安卓平臺下,8dp的網格效果良好。這意味着爲了建立一個瓦片網格(tiled grid)佈局,你須要將垂直面和水平面都設置爲8dp變量( increments)。

8. 按鈕風格

Material Design定義了幾種不一樣的按鈕風格: 1.浮動式活動按鈕: 這是最傳統的按鈕樣式。它投下的陰影很重,看起來就像浮在頁面上。這類按鈕應該僅僅應用於背景中,在卡牌式界面中使用時應該很是謹慎。不該在彈出式提示中使用這類按鈕,由於會創造太多分層。主要活動按鈕應使用強調色,而次級活動按鈕使用稍弱一些的顏色。

2.扁平按鈕: 關鍵文本使用強調色,沒有任何界限清晰的元素。這類按鈕使用邊距和全部的大寫字母來造成結構。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

與Material Design設計相比,iOS app採用的是典型的扁平化風格,不使用分層或陰影效果。主活動按鈕採用填充色,而次級活動按鈕則採用同一色調的反白(reversed out)。爲了將扁平化風格設置的恰到好處,必定要保證顏色的使用清晰,一致。iOS平臺下也有簡潔文字風格的按鈕,但它並不具有安卓按鈕的大寫字母風格,字號相對也較小一些。

9. 行動表單

行動表單容許用戶從一個UI中選擇不一樣的操做。例如,當我觸控一張圖片時,我能夠進行分享,上傳,複製或刪除等不一樣操做。

iOS 和Android系統對這一狀況採起的方法是不一樣的。儘管兩個平臺都使用了近似的行動表單,這種表單通常在屏幕下方,並會部分地覆蓋當前頁面。

但安卓和iOS使用了不一樣的細節來顯示分層。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

 

Android的分層使用單色,並略帶陰影, 爲的是提示用戶當前界面被一層“紙”覆蓋住了。

iOS的分層沒有陰影,但帶有透明度很低的背景。

十、下拉按鈕

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

下拉按鈕只存在於安卓系統中,它的做用是讓用戶快速作出選擇。要注意的是,原生的iOS系統中沒有與之對應的按鈕。在下面的截圖中,若是用戶按住步驟1中的“資料”( profile)按鈕,那麼該位置就會顯示出一個簡單的目錄,供用戶選擇一份能夠查看的我的資料。這些目錄也常被用於行動條區域疊加層的按鈕中,三個垂直排列的黑點顯示了它們的存在。

十一、特殊數據輸入

對於像事件和日期這樣的特殊數據,目前安卓已經開發出內置的對話系統。它在形式上很像彈出式提示框,但UI是專門針對此類型的數據輸入開發的。例如日期的輸入,安卓有專門針對日期輸入的優化界面。而iOS的方法是一個從底部顯示的圓盤。這是在設計之初就須要注意的。

十二、.分段控件

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

分段控件的做用是在同一個視圖下切換不一樣的內容。它們的做用是相同的,但在視覺上又各不相同,因此咱們在針對不一樣的平臺設計時要注意到這一點。在iOS系統下有三個標籤,樣式大體相同,並排排列在咱們前面提到過的按鈕上。在安卓系統下,則是用一條簡單的下劃線標出了他們的位置,其他充足的負空間是爲了提示用戶它們之間存在互動。

13. 提示消息

提示消息在整個設計中佔有重要的位置,由於它們控制着一些關鍵的操做,如註冊,接受協議甚至是確認付款,因此務必要確保它們的樣式是合適的。

安卓系統下的提示消息採用的是咱們前面討論過的扁平風格按鈕。material design的設計指南中規定了他們的尺寸。操做按鈕通常是位於提示信息的正下方。這裏的“按鈕”其實所有是文本。它們通常都是大寫字母,以營造一種均衡感,它們的顏色通常是與app主要操做按鈕的顏色一致。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

 

在iOS系統中,操做按鈕之間有分隔線。它們在形式上一般是一句話或大寫標題,分隔開的區域一樣給人一種穩定之感。它們通常位於屏幕正中央,在顏色上也與主操做按鈕顏色一致。

14. 圖標

圖標是UI中須要專業人士設計的部分之一。不管打算採用免費圖標,仍是請專業的設計師來設計,都要注意安卓平臺和iOS下圖標的不一樣特色。iOS中的圖標是簡潔的線條,筆觸較爲輕盈。而安卓系統的圖標筆觸較爲濃重,有時甚至是徹底實心的圖標。在過去,安卓曾使用特殊視角和三維的圖標,但如今改用二維圖標了。如下就是這兩個平臺中一些圖標的對比。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

13. 小圖標和加載圖像

在設計中,咱們可能會忽視一些微小的UI細節。有一些圖標,如提示和加載圖標一般是由開發者本身解決的。你可能就遇到過與當前的app風格大相徑庭的奇怪提示。它們但是源於原生系統的默認提示,但一樣是能夠經過改動,使之與app風格一致的。在處理這種狀況時,須要開發者與設計師密切合做。

14.通用UI控件

單選按鈕,複選框,切換按鈕等實用的元素也應該被賦予天然的風格。正如提示消息和對話框同樣,這些元素控制的一些在用戶看來表明着信任和友好的區域。這些元素應該儘可能實用原生系統的元素,這樣至少有兩個好處:(a)用戶知道如何使用它們 (b)讓用戶處理敏感數據或確認支付時感到放心。

從下面的示例圖中咱們能夠看到,開關和單選按鈕在Android和iOS中幾乎是同樣的。在這裏,設計師能夠先作出一個設計,而後根據不一樣的平臺進行微調。但即使是外觀上的細微差別,也能體現出這些元素是否符合各自平臺的風格。所以在設計這些元素時應該多使用你的UI工具包,而且在設計的早期階段就與開發人員作好溝通。

雙平臺故事:雙平臺故事:如何爲Android和 iOS設計雙平臺App

Android (左) 和 iOS (右)

結語

設計出在兩種平臺下都與原生系統在風格上協調一致的app並不是不可能。而且如今的app設計風格基本上是你中有我,我中有你的狀況,安卓的app中也有借鑑IOS的設計。咱們須要作的就是從設計開始就密切留意兩種平臺在設計元素上的差別,爲之後的微調留出餘地,還要注意與開發者密切溝通,這樣才能作出一款不錯的app。

相關文章
相關標籤/搜索