App產(chǎn)品設計『核心模塊』通用模塊(二)

這是《App產(chǎn)品設計指南》系列文章的第8篇內(nèi)容栏账,更多精彩可以點擊下方鏈接查看所计。

《App產(chǎn)品設計指南》專欄目錄

上篇文章介紹了一些常見的通用模塊,在本文中我們會接著了解App產(chǎn)品中的通用模塊缩宜,這次和大家介紹的是關于消息提示類的模塊不跟。

在開始正文之前,我們先了解一個概念:彈窗励堡。彈窗分為模態(tài)彈窗和非模態(tài)彈窗兩種谷丸,模態(tài)彈窗就是不能進行其他操作的彈窗,非模態(tài)彈窗則可以繼續(xù)進行操作应结。非模態(tài)彈窗通常都有時間限制刨疼,出現(xiàn)一段時間后就會自動消失。

Toast吐司

Toast吐司是我們經(jīng)常用到的一個組件鹅龄,它是一種非模態(tài)彈窗揩慕。Toast不會獲取到焦點,通常顯示一段時間之后就會自動消失扮休。

Toast可以出現(xiàn)在屏幕頂部迎卤,中央或者底部,具體如何選擇需要和平臺定義的整體規(guī)范保持一致玷坠。

知乎&汽車之家

Dialog對話框

Dialog屬于比較重度的場景蜗搔,而且會有很多衍生的類型。

Dialog是一種模態(tài)彈窗八堡,不會自行消失樟凄,必須用戶進行操作才會消息。由于中斷了用戶目前的操作兄渺,如果該信息不是必須的缝龄,用戶會感覺焦慮,憤怒挂谍。所以使用Dialog一定要慎重叔壤。

愛奇藝&網(wǎng)易云音樂&京東&喜馬拉雅

Snackbar消息條

Snackbar是非模態(tài)彈窗,谷歌MD規(guī)范里對Snackbar的定義是:一種針對操作的輕量級反饋機制凳兵,常以一個小的彈出框的形式百新,出現(xiàn)在手機屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方庐扫,包括浮動操作按鈕饭望。

Snackbar與Toast比較相似,屬于比較輕度的消息提示形庭,不會打擾用戶的正常操作铅辞。另外它可以和其他的操作進行組合,使用場景會更加廣泛萨醒。比如說文案+按鈕這種組合形式斟珊。

Snackbar目前沒有統(tǒng)一的中文叫法,有人叫做消息條富纸,有人叫做操作提示欄囤踩。Snackbar和下文中提到的Noticebar比較類型旨椒,但也存在很多不同點。下面會針對差異點重點介紹一下堵漱。

位置

Snackbar通常位于頁面底部综慎。

停留時間

Snackbar一般停留時間比較短,超過時間自動消失勤庐∈揪或者是點擊Snackbar上的操作,觸發(fā)操作的同時消失愉镰。還可以點擊Snackbar以外的區(qū)域米罚,Snackbar也會消失。

數(shù)量

Snackbar只有一個丈探。

餓了嗎&愛股票

Noticebar通告欄

Noticebar是非模態(tài)彈窗录择,通常位于頁面頂部,一般用作系統(tǒng)提醒类嗤、活動提醒等通知糊肠。

位置

Noticebar通常位于頁面頂部,比如在搜索框下面遗锣,全局導航下面货裹。

停留時間

Noticebar可以是查看后直接關閉,或者是始終顯示精偿。

數(shù)量

Noticebar可以有一個也可能有多個弧圆,但一般建議只使用一個。

百度貼吧&OFO共享單車

Actionbar操作面板

Actionbar和Dialog比較類似笔咽,都是模態(tài)彈窗搔预,用戶需要進行操作。Actionbar組件可以放置更多的功能按鈕叶组,提供更多選擇拯田。用戶可以選擇點擊“取消”按鈕或者點擊上方的遮罩層關閉彈窗。

Actionbar的樣式比較多甩十,比如純文字船庇,圖文混排等。

嗶哩嗶哩&QQ音樂

無論選擇什么樣的組件都是服務于產(chǎn)品功能侣监,服務于用戶需求鸭轮,用戶場景。所以我們在產(chǎn)品設計時一定要盡可能多的挖掘橄霉、理解用戶窃爷,甚至可以自己設計出組件,交互模式。

在寫作過程中按厘,如果有意見或者想法医吊,歡迎有興趣的讀者添加我的微信一起交流探索,共同進步刻剥。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遮咖,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子造虏,更是在濱河造成了極大的恐慌,老刑警劉巖麦箍,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漓藕,死亡現(xiàn)場離奇詭異,居然都是意外死亡挟裂,警方通過查閱死者的電腦和手機享钞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诀蓉,“玉大人栗竖,你說我怎么就攤上這事∏。” “怎么了狐肢?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長沥曹。 經(jīng)常有香客問我份名,道長,這世上最難降的妖魔是什么妓美? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任僵腺,我火速辦了婚禮,結(jié)果婚禮上壶栋,老公的妹妹穿的比我還像新娘辰如。我一直安慰自己,他們只是感情好贵试,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布琉兜。 她就那樣靜靜地躺著,像睡著了一般锡移。 火紅的嫁衣襯著肌膚如雪呕童。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天淆珊,我揣著相機與錄音夺饲,去河邊找鬼。 笑死,一個胖子當著我的面吹牛往声,可吹牛的內(nèi)容都是我干的擂找。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼浩销,長吁一口氣:“原來是場噩夢啊……” “哼贯涎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起慢洋,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤塘雳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后普筹,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體败明,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年太防,在試婚紗的時候發(fā)現(xiàn)自己被綠了妻顶。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蜒车,死狀恐怖讳嘱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情酿愧,我是刑警寧澤沥潭,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站寓娩,受9級特大地震影響叛氨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜棘伴,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一寞埠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧焊夸,春花似錦仁连、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至揪阶,卻和暖如春昌抠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鲁僚。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工炊苫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留裁厅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓侨艾,卻偏偏與公主長得像执虹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子唠梨,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355

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