<kbd id="hjlhsktk"></kbd><address id="hjlhsktk"><style id="hjlhsktk"></style></address><button id="hjlhsktk"></button>

              <kbd id="918s4rck"></kbd><address id="918s4rck"><style id="918s4rck"></style></address><button id="918s4rck"></button>

                      <kbd id="gdmdd0ac"></kbd><address id="gdmdd0ac"><style id="gdmdd0ac"></style></address><button id="gdmdd0ac"></button>

                              <kbd id="rfiucl8n"></kbd><address id="rfiucl8n"><style id="rfiucl8n"></style></address><button id="rfiucl8n"></button>

                                      <kbd id="vx3wk533"></kbd><address id="vx3wk533"><style id="vx3wk533"></style></address><button id="vx3wk533"></button>

                                              <kbd id="i4x2bjhx"></kbd><address id="i4x2bjhx"><style id="i4x2bjhx"></style></address><button id="i4x2bjhx"></button>

                                                      <kbd id="7sflgvdx"></kbd><address id="7sflgvdx"><style id="7sflgvdx"></style></address><button id="7sflgvdx"></button>

                                                          當前位置:首頁 > 校園動態 > 行業資訊

                                                          超全面!底部動作欄設計總結

                                                          發佈時間:2018/7/4 8:51:54

                                                           

                                                          一、底部動作欄

                                                           

                                                          底部動作欄屬於彈框體系中模態彈框的範疇 ,它所代表的不是某一種彈框樣式,而是一整個彈框類別:所有從界面底部向上滑出的面板都可以稱之爲底部動作欄。在 Material Design 裏稱之爲 Bottom Sheets,在 iOS 的設計規範中有 Activity Views 和 Action Sheets 兩種。

                                                          當然不管是 MD 還是 iOS 給的都只是一個指導意見,並不是說底部動作欄都只能這樣做。底部動作欄本質上就是一個操作選項的容器  ,操作選項的佈局樣式有兩種:列表式和宮格式。列表式適合展示的選項不多,一般2-5個 ,多用於用戶進行操作確認或者發起一項新的任務。

                                                           

                                                          當然如果你想展示多個選項也是可以的 ,固定好高度,用戶滑動即可 。

                                                          宮格式的優勢更多體現在其視覺表現力上 ,因爲配有圖標 ,所以會更加討喜一點 。

                                                           

                                                          以上只是對底部動作欄做一個簡單的介紹,接下來我們要拿它跟其他彈框樣式進行比較 。因爲有很多彈框樣式跟底部動作欄有共通的使用場景 ,如果不找出專屬於底部動作欄的特徵並且據此定義準確的使用場景 ,很難說完全的掌握了底部動作欄 。那麼接下來我就從優先級、易操作和指向性三個方面對底部動作欄進行分析 。

                                                           

                                                          二、優先級

                                                           

                                                          在產品的彈框體系中,我們必須首先明確各種彈框的優先級。因爲僅從滿足用戶基本需求的角度來說,一個對話框(Alerts)就可以應付所有的反饋場景。市面上有很多這樣的產品,裏面的彈框樣式有且只有對話框 。這樣做會有一個問題 ,那就是對話框因爲處於界面中間位置,遮擋了主要內容,會干擾用戶操作 。因此只有優先級最高 ,要讓用戶必須看到的信息我們才考慮使用對話框  。只有低頻而合理的使用,用戶纔會當回事,過度濫用會使用戶產生「狼來了」心理  。

                                                           

                                                          那麼從整個彈框體系角度來說 ,模態彈框的優先級高於非模特彈框 。從模態彈框內部來說  ,對話框的優先級高於底部動作欄 。

                                                          除了優先級的不同 ,很多設計師包括我自己不明白底部動作欄和對話框的區別在哪 。以上圖爲例,好像兩個都能說的通 。

                                                          底部動作欄和對話框的另一個區別在於:如果該項操作具有風險性,底部動作欄是確認/confirm ,而對話框是詢問/ask 。什麼意思?確認的前提是默認用戶對此項操作風險可知,而詢問是不可知的。以上圖爲例,同樣是清理緩存   ,用戶點擊「清理音樂緩存」的彈出的是底部動作欄,因爲默認大部分用戶都明白清理緩存的意思,這裏只需進行一下確認。而點擊關閉「跑步FM離線包」可能大部分用戶不明白這是什麼意思 ,所以要使用對話框告知用戶操作的風險性,詢問是否要繼續操作  。

                                                           

                                                          三、易操作

                                                          雖然優先級不比對話框  ,但是在易操作的角度來說,底部動作欄勝過對話框  ,因爲其位置正好被拇指的活動熱區所覆蓋。看到這裏大家可能會思考,如果彈框在底部更容易用戶操作,那麼爲什麼不把所有的彈框都放在界面底部呢?這是因爲並不是所有的彈框都對操作性有要求,最常見的例子就是通告欄(Notice Bar)。

                                                           

                                                          你在刷微信的時候 ,網絡突然斷掉 。如何向用戶去傳達這條信息呢 ?理論上,所有的彈框都可以滿足這個需求 。我們可以使用對話框或者底部動作欄 ,但是網絡的故障並不影響用戶繼續去使用微信的其他功能,沒必要立刻去重新設置網絡,有的用戶就是想看聊天記錄呢,使用對話框會干擾用戶 。只需用戶持續關注,不需要立即去處理 ,所以距離拇指活動熱區遠一點也沒有關係。

                                                           

                                                          四、指向性

                                                           

                                                          衡量彈框的另一項要素就是指向性。如果一個界面中有多個同類元素 ,爲了防止用戶無法確定具體的操作對象 ,彈框應該具有指向性。

                                                          例如聊天記錄中的圖片,如果我想直接對某張圖片進行轉發操作 ,彈出的是 UIMenuController ,而不是底部動作欄。這是因爲這一屏中的圖片有好幾張 ,如果使用底部動作欄 ,我無法確定要轉發的是否是我所期望的那張圖片 。但是一旦我點擊進入大圖模式,就可以確定所操作的對象,那麼操作選項就會以底部動作欄的樣式展示出來。

                                                           

                                                          五、適配

                                                          適配的問題不屬於設計師的鍋,但是對於適配場景的瞭解 ,可以幫我們更好的把控設計的開發還原度。舉個例子 ,如果用戶使用的是蘋果手機 ,開通了熱點 ,如果開發沒有考慮到這個場景,那麼就會導致整個屏幕向下移動,會對底部動作欄的信息造成遮擋,即使沒有遮擋 ,平移了一下也不是一個好的用戶體驗 。

                                                           

                                                          總結

                                                          以上就是我對底部動作欄做的一個簡單總結,有不同意見和看法的歡迎留言和加羣交流。

                                                           

                                                          開班信息

                                                          在線諮詢
                                                          -->