常用交互設(shè)計規(guī)范整理

很多公司萎坷,由于設(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è)绕娘。


(IOS12頁面布局)


Andorid一級頁面,標題居左顯示栽连,功能按鈕在標題欄右側(cè)顯示险领,如有多個功能按鈕,則多個功能按鈕并排秒紧。頁面下拉绢陌,標題會放大顯示。二級頁面依然延續(xù)返回熔恢、標題居左脐湾,功能按鈕居右的布局。


(Andorid9頁面布局)


二叙淌、系統(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ū)分,相比動作對話框貌笨,警示框提醒強度更重一些弱判。


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市躁绸,隨后出現(xiàn)的幾起案子裕循,更是在濱河造成了極大的恐慌臣嚣,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件剥哑,死亡現(xiàn)場離奇詭異硅则,居然都是意外死亡,警方通過查閱死者的電腦和手機株婴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門怎虫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人困介,你說我怎么就攤上這事大审。” “怎么了座哩?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵徒扶,是天一觀的道長。 經(jīng)常有香客問我根穷,道長姜骡,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任屿良,我火速辦了婚禮圈澈,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘尘惧。我一直安慰自己康栈,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布喷橙。 她就那樣靜靜地躺著啥么,像睡著了一般。 火紅的嫁衣襯著肌膚如雪重慢。 梳的紋絲不亂的頭發(fā)上饥臂,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天逊躁,我揣著相機與錄音似踱,去河邊找鬼。 笑死稽煤,一個胖子當(dāng)著我的面吹牛核芽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播酵熙,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼轧简,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了匾二?” 一聲冷哼從身側(cè)響起哮独,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤拳芙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后皮璧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舟扎,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年悴务,在試婚紗的時候發(fā)現(xiàn)自己被綠了睹限。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡讯檐,死狀恐怖羡疗,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情别洪,我是刑警寧澤叨恨,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站挖垛,受9級特大地震影響特碳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜晕换,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一午乓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧闸准,春花似錦益愈、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至库快,卻和暖如春摸袁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背义屏。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工靠汁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人闽铐。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓蝶怔,卻偏偏與公主長得像,于是被迫代替她去往敵國和親兄墅。 傳聞我的和親對象是個殘疾皇子踢星,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 好久不見了。沒想再次見你卻是在這里隙咸。自上一次見你已經(jīng)九年零五個月了沐悦。 …… 鳳梧從沒想過能再次見到君瑾成洗,...
    飝靀閱讀 172評論 1 0
  • 今晚要乘火車,上午心里就惦記著藏否,(此次已經(jīng)提前20天預(yù)先請了假泌枪,)在臨出發(fā)前,再次告假秕岛,目的是希望在請假前把一些需...
    紫煙_3cfc閱讀 141評論 0 0