2018-10-15 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
我們?cè)诳?App 時(shí),有沒有思考過這樣的問題,同樣都是提示彈窗為什么出現(xiàn)那么多不同的樣式,亦或者同樣都是讓界面進(jìn)行切換的導(dǎo)航為什么有的可以通過側(cè)滑切換,有的卻只能點(diǎn)擊切換呢?最近在玩 App 時(shí)發(fā)現(xiàn)了幾組這樣的控件,下面就來(lái)和大家分享下我對(duì)他們的理解和選用。目錄:
警告框:是一種操作上的確認(rèn),只有當(dāng)用戶點(diǎn)擊按鈕后才算真的完成,才可以有其他操作,主要作用是警告或提示用戶的。
警告框由三部分組成:標(biāo)題、正文、按鈕。有些簡(jiǎn)單的警告或提示只有正文和按鈕即可。
操作表/ActionSheet:操作表通常會(huì)從屏幕底部邊緣向上滑出一個(gè)面板,可提供2個(gè)以上的選擇。呈現(xiàn)給用戶的是簡(jiǎn)單、清晰、無(wú)須解釋的一組操作,沒有正文的描述內(nèi)容(大部分)。另外重要的功能操作也會(huì)用紅色文字展示。
文字內(nèi)容的重要性
文字內(nèi)容的重要性:選擇警示框和操作表時(shí),要考慮的是兩個(gè)彈窗文字內(nèi)容對(duì)于用戶的重要程度,如果內(nèi)容極為重要?jiǎng)t選用警示框,如果文字內(nèi)容不重要甚至不需要描述文字我們就應(yīng)該選擇操作表。
案例:如下圖,淘寶登錄密碼錯(cuò)誤時(shí),由于警示框更重要的是文字內(nèi)容的體現(xiàn),幫助用戶找到問題所在,所以選用警示框。再看 QQ郵箱的垃圾箱中點(diǎn)擊全部清空時(shí),由于信息本身就在垃圾箱內(nèi),不需要對(duì)用戶過多的文字提示,用戶直接操作即可,所以最后選用操作表。
用戶操作流暢性
用戶操作流暢性:當(dāng)我們需要讓用戶停止操作并必須點(diǎn)擊當(dāng)前界面的按鈕時(shí),要選擇警示框,警示框?qū)τ脩舨僮魃系牧鲿承杂兄車?yán)重的影響。如果不需要太過強(qiáng)硬,我們就選用只需在屏幕中任意位置點(diǎn)擊就會(huì)消失的操作表。
數(shù)量
數(shù)量:這是最容易區(qū)分使用的方面,當(dāng)彈窗中的按鈕數(shù)量超過2個(gè)時(shí)我們一定選用操作表,因?yàn)榫究虻陌粹o數(shù)量不可以超過兩個(gè)。如果數(shù)量一樣,可以根據(jù)上面兩點(diǎn)擇優(yōu)使用。
案例:如下圖,我們?cè)诘玫紸pp 中點(diǎn)擊開通「推送通知」時(shí),因?yàn)椴僮靼粹o只有一個(gè),所以選擇警示框。而點(diǎn)開微博中的更多按鈕,用的則是操作表,因?yàn)椴僮靼粹o有三個(gè)。
標(biāo)簽欄:標(biāo)簽欄位于屏幕底部,它是懸浮在當(dāng)前頁(yè)面之上的,并且會(huì)一直存在,只有當(dāng)用戶點(diǎn)擊跳轉(zhuǎn)到二級(jí)菜單后才會(huì)消失。用戶可以在不同的子任務(wù)、視圖和模式中進(jìn)行切換,并且切換按鈕間都屬于不同的內(nèi)容。
當(dāng)用戶選中某個(gè)標(biāo)簽時(shí),該標(biāo)簽呈現(xiàn)適當(dāng)?shù)母吡翣顟B(tài)。數(shù)量也有限制,不能超過5個(gè),如果存在5個(gè)以上的標(biāo)簽可以將最后的標(biāo)簽設(shè)計(jì)成「更多」標(biāo)簽。
工具欄:工具欄同樣位于屏幕底部,懸浮在當(dāng)前頁(yè)面之上的,并且當(dāng)用戶不需要使用的時(shí)候,可以隱藏它。例如向上滑動(dòng)界面時(shí),工具欄會(huì)自動(dòng)隱藏。工具欄的內(nèi)容主要是對(duì)當(dāng)前頁(yè)面的相關(guān)操作按鈕。
切換狀態(tài)
切換狀態(tài):當(dāng)我們需要同級(jí)別界面切換時(shí),應(yīng)該選擇標(biāo)簽欄,同時(shí)標(biāo)簽欄的切換通常為一級(jí)導(dǎo)航,工具欄的功能僅針對(duì)當(dāng)前界面內(nèi)容的相關(guān)操作。
案例:如下圖,微信讀書底部欄中是關(guān)于同級(jí)別的視圖切換,所以選擇標(biāo)簽欄,同時(shí)標(biāo)簽欄也常用于產(chǎn)品的一級(jí)導(dǎo)航。而 Safari瀏覽器底部的內(nèi)容是針對(duì)當(dāng)前界面的操作功能,所以使用了工具欄。
位置狀態(tài)
位置狀態(tài):當(dāng)?shù)撞繉?dǎo)航始終在界面最上方時(shí),上下滑動(dòng)都不會(huì)消失,則選擇標(biāo)簽欄;如果底部導(dǎo)航上滑隨之消失則選擇工具欄(說明:也有少數(shù)的工具欄是怎么滑動(dòng)都不會(huì)消失的)。
案例:如下圖,我們來(lái)看看百度的 App,當(dāng)我向上滑動(dòng)界面時(shí),底部導(dǎo)航的位置是不會(huì)消失的,所以使用了標(biāo)簽欄。再看 Safari瀏覽器,因?yàn)樯匣瑫r(shí)底部欄會(huì)被隱藏,所以選用了工具欄。
選中狀態(tài)
選中狀態(tài):當(dāng)用戶選中底部某一項(xiàng)時(shí),如果需要高亮顯示且顯示的內(nèi)容是不同子任務(wù)的視圖,則使用標(biāo)簽欄;而當(dāng)選擇后,出現(xiàn)操作表等與當(dāng)前界面相關(guān)的操作時(shí),應(yīng)該選擇工具欄。
案例:如下圖,我們還是來(lái)看百度App,當(dāng)我點(diǎn)擊底部的選項(xiàng)時(shí),切換的同時(shí),當(dāng)前選中的「好看視頻」需要變成選中的樣式,來(lái)告知用戶當(dāng)前選中的是那個(gè)界面,所以使用了標(biāo)簽欄。再看 Safari瀏覽器,點(diǎn)擊底部按鈕后出現(xiàn)操作表且當(dāng)前選中的按鈕也不會(huì)變高亮,因?yàn)椴粫?huì)在當(dāng)前切換界面,所以選擇了工具欄。
Tabs:Tabs 來(lái)自 MD規(guī)范,早在 Android 2.0時(shí)代,官方的通訊錄App 就使用頂部 Tab導(dǎo)航,可以滑動(dòng)切換不同視圖。Tabs 里 Tab 呈現(xiàn)的內(nèi)容可以有很大的差別,而且數(shù)量沒有限制,Tabs 不能作為表單的單選組件。
分段控件:iOS 原生控件之一,每個(gè)分段作用是互斥的,在分段控件里,所有的分段選項(xiàng)框在長(zhǎng)度上要保持一致,同 iOS規(guī)范中對(duì)于分段控件的分段選項(xiàng)不得超過5個(gè),每個(gè)分段選項(xiàng)可以是純文字或者圖片。
來(lái)源不同
來(lái)源不同:分段控件來(lái)自 iOS規(guī)范,而 Tabs 來(lái)源于 MD規(guī)范。
案例:如圖我們來(lái)看 iPhone 的日歷界面點(diǎn)擊收件箱,因?yàn)槭?iOS系統(tǒng)配置的應(yīng)用,所以界面中切換樣式用的是分段控件,而反觀安卓系統(tǒng)則用的是 Tabs切換。
內(nèi)容不同
內(nèi)容不同:分段控件主要起到分割和篩選同類數(shù)據(jù),而 Tabs 則沒有這樣的限制,Tabs 里的每一項(xiàng)所呈現(xiàn)的內(nèi)容可以有很大的差別。另外分段控件更多的是以單選功能出現(xiàn)在表單的使用中,而 Tab 則不能作為表單的單選組件。
案例:如下圖鯊魚記賬中的圖表頁(yè),支持、收入為整個(gè)界面展示項(xiàng)目,為了讓用戶查看起來(lái)更加方便,把數(shù)據(jù)分割為周、月、年的不同的數(shù)據(jù)展示,因?yàn)槭峭悢?shù)據(jù)切換,所以選擇了分段控件。反觀36氪首頁(yè)的 Tabs欄,由于每個(gè)內(nèi)容的差別都很大,所以使用了 Tab欄展示。
操作方式不同
操作方式不同:分段控件需要點(diǎn)擊操作,而 Tabs 除了點(diǎn)擊外還可以通過左右滑動(dòng)切換不同視圖。
案例:如下圖,網(wǎng)易錢包App 界面中的切換控件,因?yàn)樵诒韱沃星沂菢O為近似的數(shù)據(jù)圖,不易讓用戶側(cè)滑屏幕切換,需要讓用戶更精準(zhǔn)的點(diǎn)擊選擇。所以使用了智能點(diǎn)擊的分段控件,而優(yōu)酷視頻的切換頁(yè)變化都比較明顯,很容易區(qū)分,所以選擇了可以側(cè)滑屏幕切換的 Tabs。
數(shù)量
數(shù)量:分段控件數(shù)量不能超過5個(gè),而 Tabs 沒有數(shù)量限制。
案例:如下圖網(wǎng)易云音樂中的消息界面,界面中因?yàn)榉诸惖臄?shù)量未超過五個(gè)(不是所有未超過5個(gè)的就要用分段控件,同時(shí)也要根據(jù)以上說的其他三種情況判斷,這里只針對(duì)數(shù)量闡述而已),所以可以使用分段控件,而網(wǎng)易云音樂視頻界面中因?yàn)榉诸悢?shù)量過多且內(nèi)容上有區(qū)別所以選擇了 Tabs。
Toast:Toast 通常出現(xiàn)在頂部和中部,浮于頁(yè)面上方,無(wú)法對(duì)其操作,出現(xiàn)一段時(shí)間后便會(huì)消失,并且在此期間不影響其他正常操作。
Snackbar:Snackbar 出自于安卓系統(tǒng),是安卓系統(tǒng)的特色彈窗之一。它是由一段信息和一個(gè)按鈕組成,他們會(huì)在超時(shí)或者用戶在屏幕其他地方觸碰后自動(dòng)消失。Snackbar 可以在屏幕上滑動(dòng)關(guān)閉。Snackbar 不會(huì)妨礙用戶對(duì)產(chǎn)品的其他操作。
操作不同
操作不同:Toast 彈窗沒有任何操作鍵,而 Snackbar 是有操作鍵的。
案例:如圖馬蜂窩App 中給作者的文章點(diǎn)贊功能只需要告知用戶,點(diǎn)贊已成功即可,不需要其他操作,所以選用 Toast彈窗。而攜程中當(dāng)進(jìn)入酒店界面時(shí),除了告知用戶下面還有更多信息外,還想引導(dǎo)用戶直接查看,所以選用了帶操作功能的 Snackbar。
退出狀態(tài)不同
退出狀態(tài)不同:Toast彈窗完全是通過超時(shí)后自動(dòng)消失,不存在任何操作,而 Snackbar 可以超時(shí)消失也可以用戶主動(dòng)上滑關(guān)閉。
案例:如下圖豆瓣App 廣播界面中,當(dāng)我點(diǎn)擊換一批后,換好的內(nèi)容會(huì)自動(dòng)刷新到最前面,所以用戶不需要任何操作就可以看到內(nèi)容,就可以選用無(wú)操作必須等待超時(shí)后才會(huì)消失的 Toast彈窗。
而攜程App 中的酒店界面,因?yàn)楦嗑实膬?nèi)容在下面,并沒有展示出來(lái),為了不讓用戶在滑動(dòng)瀏覽時(shí)造成視覺障礙。所以選擇了 Snackbar,除了超時(shí)后自動(dòng)關(guān)閉外,也可以通過滑動(dòng)界面讓彈窗主動(dòng)關(guān)閉。
組成元素不同
組成元素不同:Toast彈窗主要是由文字和背景組成,也可以額外附加圖標(biāo)。而 Snackbar 除文字、背景,圖標(biāo)外還有操作鍵組成。
案例:如下圖得到App 中只需要提示用即可,所以選用 Toast,組成元素選用背景+文字+圖標(biāo),而小紅書App 需要加入操作鍵,所以選擇了 Snackbar。
通過上面的分析,大家是不是對(duì)這八個(gè)組件有了更深的理解呢?
每個(gè)組件都有不可替代的作用,如果大家還有哪些不清楚的組件對(duì)比可以在文章下留言,之后我會(huì)選擇一些整理出來(lái)再次和大家分享,感謝大家的耐心閱讀。
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com