很多公司萎坷,由于設(shè)計及開發(fā)資源的限制,同一個APP應(yīng)用悦冀,安卓和IOS系統(tǒng)會使用一套UI和交互安吁,所以很少思考安卓和IOS交互的差異性醉蚁,大多是根據(jù)當(dāng)前的場景和用戶行為選擇界面布局和交互控件,哪怕是安卓和IOS使用一套UI和交互設(shè)計鬼店,還是要了解兩者之間的交互差異网棍,在設(shè)計交互時可以兼容不同系統(tǒng)的用戶使用習(xí)慣,可以更準確的評估安卓和IOS的技術(shù)開發(fā)成本妇智,很多時候IOS有現(xiàn)成的控件滥玷,安卓卻沒有,安卓需要重新編寫巍棱,那就會有更長的開發(fā)時間惑畴,這些都是開發(fā)評估工作量時重點關(guān)注的。
同一個APP為安卓和IOS設(shè)計不同的UI和交互時航徙,雖然都是基于本身的系統(tǒng)特性和用戶使用習(xí)慣進行設(shè)計如贷,但也要遵循設(shè)計一致性的原則,不能做出來感覺像完全沒有聯(lián)系的兩個APP,所以設(shè)計師要保證Tab bar和內(nèi)容區(qū)域的一致性杠袱,狀態(tài)欄尚猿、標題欄、控件楣富、系統(tǒng)交互凿掂、系統(tǒng)圖標、消息框的系統(tǒng)差異化纹蝴。
基于IOS12和Andorid9進行一些常用設(shè)計規(guī)則的整理
一庄萎、界面布局
IOS系統(tǒng)的一級頁面,在IOS12中進行較大的變化塘安,標題居左糠涛,標題上面兩側(cè)是功能按鈕,頁面上滑動標題字體縮小居中顯示耙旦。IOS11的標題是居中顯示。二級頁面萝究,IOS12并未有太多改變免都,左側(cè)依然是返回+上級頁面,標題居中顯示帆竹,功能按鈕一般在標題欄左右兩側(cè)绕娘。
Andorid一級頁面,標題居左顯示栽连,功能按鈕在標題欄右側(cè)顯示险领,如有多個功能按鈕,則多個功能按鈕并排秒紧。頁面下拉绢陌,標題會放大顯示。二級頁面依然延續(xù)返回熔恢、標題居左脐湾,功能按鈕居右的布局。
二叙淌、系統(tǒng)圖標
三秤掌、控件
1)搜索/輸入
IOS搜索控件是當(dāng)前界面輸入,搜索框后面是“取消”按鈕鹰霍,輸入鍵盤帶有“搜索”/“確認”鍵闻鉴,輸入框內(nèi)一鍵清除功能。
Andorid搜索功能是切換頁面搜索茂洒,取消通過“返回”按鈕操作孟岛,“返回”按鈕在搜索框前面,由于安卓鍵盤是可以定制,每家系統(tǒng)的默認鍵盤都會有按鍵的差異蚀苛,以前很多安卓輸入鍵盤是沒有搜索功能的在验,現(xiàn)在也多加入該功能,逐步與IOS相似堵未。
2)選擇
IOS常見的選擇交互是腋舌,切換下級頁面,是在選項后渗蟹,以“對號”的形式確認块饺,安卓則通過彈出簡易菜單的形式設(shè)計,進行選項切換雌芽。
3)開關(guān)
開關(guān)控件IOS和Andorid的UI和交互都具有相似性授艰,通過左右滑動開啟、關(guān)閉功能世落,向右滑動為開啟淮腾,左滑動為關(guān)閉。同時對于開啟屉佳、關(guān)閉重要功能谷朝,都會彈出對話框,進行操作提示武花。Andorid系統(tǒng)對于重要功能的開啟狀態(tài)圆凰,功能底部有著色警示。
四体箕、系統(tǒng)交互
1)返回鍵
返回鍵是Andorid系統(tǒng)所特有的专钉,從物理鍵一直延續(xù)到全屏?xí)r代的虛擬鍵,保持著用戶體驗的延續(xù)性累铅。返回邏輯是按照倒敘的時間流進行的跃须,返回鍵控制的不僅是一個頁面,還有動作娃兽。比如當(dāng)前頁面有多層交互回怜,在進行了一系列交互操作后,點擊“返回”鍵换薄,并不是返回上級頁面玉雾,而是返回上一個動作狀態(tài)。
在App退出中比較常用的功能就是返回轻要,練習(xí)點擊兩次返回鍵即可退出App复旬,這是安卓和IOS用戶在使用習(xí)慣中很大的差異。
2)界面切換
IOS系統(tǒng)中冲泥,從上級頁面切換進入下級頁面的交互是驹碍,右側(cè)有箭頭引導(dǎo)壁涎,點擊向左滑動切換。Android則沒有任何視覺引導(dǎo)志秃,需要用戶去點擊嘗試怔球,點擊功能行都可切換至下級界面,如果該功能沒有下級頁面則無變化浮还。
3)頁面表單切換
IOS系統(tǒng)的表單的切換交互是竟坛,點擊"標題tab"切換,安卓系統(tǒng)的頁面中表單切換交互除了可以點擊“標題tab”切換之外钧舌,還可以左右滑動切換担汤。Android的交互明顯更靈活,在有些場景下明顯比IOS的體驗要便捷洼冻,很多IOS的APP在設(shè)計時也經(jīng)常采用崭歧。
4)列表條目刪除
IOS系統(tǒng)有兩種交互方式,第一種是通過列表編輯功能撞牢,進行刪除率碾,點擊“減號”按鈕,當(dāng)前條目向左滑動激活“刪除”按鈕屋彪,點擊“刪除”按鈕即可所宰。第二種交互方式是選中當(dāng)前條目,直接向左滑動激活“刪除”按鈕撼班。
Andriod系統(tǒng)刪除列表中的條目歧匈,是通過列表編輯功能垒酬,選中內(nèi)容砰嘁,然后點擊”刪除“功能】本浚可做批量選擇操作矮湘,比IOS系統(tǒng)操作更便捷。
5)條目增刪
IOS點擊“加號”按鈕口糕,增加條目缅阳,點擊“減號”按鈕,條目向左滑動出現(xiàn)刪除按鈕景描,點擊刪除按鈕刪除條目十办。
安卓點擊“加號”按鈕,新增條目超棺,點擊“減號”按鈕向族,刪除條目,刪除條目雖然交互只有一步棠绘,雖然便捷件相,但誤操作概率也會更高再扭。
7)消息框
不管是交互設(shè)計師還是產(chǎn)品經(jīng)理,更關(guān)心消息框的功能邏輯夜矗,而不是設(shè)計樣式泛范。消息框按照提示的重要性等級進行分類,分別為輕度提示紊撕、中度提示罢荡、重度提示。雖然分了三種類型逛揩,由于中度提示和輕度提示在交互上的差異性不明顯柠傍,在App交互設(shè)計中常用的就是輕度提示和重度提示。
安卓系統(tǒng)常用的消息框是Toast和對話框辩稽,IOS系統(tǒng)是沒有Toast交互定義的惧笛,與之相對應(yīng)的就是HUD。
Toast和HUD都是輕度提示逞泄,在提示性的場景中顯示患整,是對當(dāng)前行為的一種反饋,避免對當(dāng)前任務(wù)產(chǎn)生任何干擾喷众,讓感興趣的用戶能夠發(fā)現(xiàn)提示各谚。自動消失,無需任何操作到千。
對話框應(yīng)用場景是對不可逆昌渤、涉及用戶權(quán)益等內(nèi)容的警示,比如用戶授權(quán)憔四、重要刪除膀息、重要功能開啟、支付等了赵,設(shè)計中盡量確保用戶能夠看到潜支,哪怕打斷當(dāng)前任務(wù),必須用戶主動操作選擇才能進行柿汛。Andorid系統(tǒng)對話框針對不同的場景冗酿,可以配置不同的按鈕數(shù)量。
IOS系統(tǒng)對話框針對不同的場景络断,警示和動作對對話框進一步細分裁替,并設(shè)計不同的交互方式進行區(qū)分,相比動作對話框貌笨,警示框提醒強度更重一些弱判。