天天看點

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  由于設計師、産品經理使用的移動裝置大部分是iPhone,是以在做設計時,容易忽略Android和iOS的差異,按照iOS的規範進行設計,兩端隻做一套。

  隻做一套的會存在兩個問題:

  1、安卓使用者的使用習慣不太适應iOS的設計,導緻使用時遇到阻礙,任務流程失敗率變高。

  2、如果設計師或者産品經理有的異常場景狀态沒有想到,導緻安卓開發沒有元件調用,為了省事就直接調用安卓自帶元件,導緻整個産品在視覺風格上面既有産品風格的元件又有安卓系統的元件,統一性差。

  是以設計師在設計過程中,針對兩端的差異性,可以單獨将具有差異性的Android部分做出來,保持兩端的差異性。今天我就總結了一下android和iOS差異性。

  文章大綱如下所示:

  1、視覺風格和理念

  2、支付規則

  3、推送規則

  4、檔案選取規則

  5、手勢差別

  6、元件風格

  7、元件用法

  1、視覺風格和理念iOS通過使用留白、簡化UI、使用無邊框按鈕等方式使得呈現的功能更加清晰。

  以功能驅動設計

  留白可以使重要的内容和功能更加醒目、更易了解。使一個應用看起來更加聚焦和高效,如下圖1所示。

  讓顔色簡化UI,使用一個主題色。比如備忘錄中用了黃色,高亮了重要區塊的資訊并巧妙地用樣式暗示可互動性,如下圖2所示。

  使用無邊框的按鈕,通過文案、顔色以及操作指引标題來表明該無邊框按鈕的可互動性。如下圖3所示。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  Material 通過建構系統化的動效和空間合理化利用,并将兩個理念合二為一,構成了實體隐喻。

  在基本元素的處理上,借鑒了傳統的印刷設計:排版、網格、空間、比例、配色、圖像等,使用這些基礎的平面設計規範。

  在這些設計基礎上,建構出視覺層級、視覺意義以及視覺聚焦。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  2、支付規則

  當App含有虛拟商品,那麼使用者購買方式也不一樣。

  對于iOS使用者來說,支付管道必須走蘋果支付平台,并抽取30%作為服務費。而android版不用走平台,使用支付寶、微信支付等第三方支付平台即可。

  如下圖所示,網易雲音樂android版,支付時可以選擇支付寶、微信、京東等支付方式。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  而iOS端則隻能走蘋果官方平台(App Store)。對于公司來說,抽成30%意味着收入下降,但是這種走平台支付也有一個好處,可以連續訂閱,自動續期扣錢。

  3、推送規則

  iOS系統的消息推送必須依靠蘋果的APNS(Apple Push Notification Service)伺服器來完成,資訊與app之間的互動是通過蘋果的伺服器完成的。

  Android的消息推送相比之下更加開源,在不選擇使用GCM的情況下,app的消息推送就需要在自己或者是第三方伺服器與裝置之間建立一條長連接配接,通過長連接配接進行推送。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  這意味着iOS端,即使app的背景殺死,依舊可以接收到推送。而android端則需要保持背景線上才能收到推送消息。

  4、檔案選取規則

  iOS系統每個app之間沒有檔案夾概念,導緻無法找到對應app的檔案夾。

  如果iOS版app想要發送檔案時,則無法選擇對應的檔案夾裡面的檔案。但是因為有了iCloud的存在,可以通過iCloud選擇檔案。

  如下圖所示,微信如果想發送檔案到微信好友時,點選檔案,進入iCloud選擇檔案發送即可。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  而安卓版則可以調取檔案夾,選擇對應的檔案發送。如下圖所示,qq給好友發送檔案時,直接進入手機的檔案夾中找到對應的檔案

  5、手勢差別

  android和iOS的手勢差別比較大,對于隐藏的操作,安卓長按較多,iOS左右滑動較多。

  如下圖所示,安卓針對清單更多操作時,采用長按手勢,長按出現菜單。

  而iOS左右滑動出現隐藏的操作。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  6、元件風格的差異性

  iOS和android整體上視覺差異很明顯。

  android元件整體呈現通過投影産生層級區分,如下圖所示。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  iOS則通過簡潔的視覺層級區分,UI設計中Android和IOS設計差異總結如下圖的元件樣式。單純的分割線區分層級關系。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7、元件用法

  7.1搜尋欄

  android常使用搜尋圖示,使用者點選圖示進入搜尋欄界面。

  iOS直接以輸入框的形式展示,使用者點選激活輸入框,從視覺的角度上看,iOS的搜尋欄視覺更強化,更容易引導使用者搜尋。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.2警示對話框

  android對話框文案左對齊,按鈕文案右對齊。

  iOS對話框文案居中對對齊,按鈕也都居中對齊。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.3卡片

  android針對于提示語,通常放在卡片裡面,而iOS放在卡片外面。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.4toast

  android的tost一般在界面底部,文案左對齊(非居中對齊)。安卓除了toast還有snackbar 。

  iOS一般在界面居中位置,為了強化回報狀态,一般會有圖示搭配對應的文案。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.5導航欄

  Android版的傳回icon,通常用左箭頭(中間有一杠)。同時導航欄的标題位于左邊箭頭之後,标題為目前界面的标題。

  iOS版的傳回箭頭(中間沒有一杠),傳回箭頭之後為上一級界面的标題。導航欄中間的标題為目前界面的标題。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.6發送按鈕

  Android版微信資訊發送的按鈕放在了工具欄上,ios版微信的資訊發送按鈕内嵌在鍵盤上。

  下圖為android版發送流程。

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  下圖為iOS版發送流程:

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  7.7更多操作

  針對于更多操作時,android長按通常出現菜單,而iOS長按通常出現底部操作清單

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

  總結:

  以上是針對iOS和android端部分設計的差異性總結。如果需要做兩套設計,那麼應該如何設計呢?可以先做一套iOS的,然後針對android端的,元件涉及到不同的地方進行全局替換。例如長按操作,android使用菜單,iOS使用底部操作清單。對話框、底部操作清單和toast等元件進行全局替換即可。是以,您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多資訊,請給我點個關注,我之後還會發包含有關在該領域工作的更多相關文章。

越努力越幸運:UI設計色彩趨勢總結​zhuanlan.zhihu.com

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

越努力越幸運:UI設計中的篩選控件指南​zhuanlan.zhihu.com

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

越努力越幸運:UI設計中踩過的坑​zhuanlan.zhihu.com

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

越努力越幸運:平面設計中的字型設計新花樣​zhuanlan.zhihu.com

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結

越努力越幸運:平面設計中的國風海報設計​zhuanlan.zhihu.com

pyqt 擷取 UI 中元件_UI設計中Android和IOS設計差異總結