iOS交互設計基礎之欄

一、欄

1、狀態欄

狀態欄：展示了設備及其周圍環境的重要信息

（1）狀態欄是透明的

（2）避免滾動內容直接透過狀態欄

2、導航欄

導航欄能夠實現應用不同信息層級間的導航

（1）避免過多的控件填滿你的導航欄

（2）確保你自定義的導航欄在你的應用的每個視圖中都有一致的外觀與體驗

注：微信讀書導航欄

3、工具欄

工具欄中放置用戶在當前情境下最常用的指令

注：微信閱讀書籍閱讀界面工具欄

（1）盡量避免在工具欄中放置偶爾用到的指令

（2）工具欄中的所有指令和操作是針對當前屏幕和視圖的

注：pmcaff中內容詳情頁工具欄，包含針對當前內容的功能按鈕

幾種常見的工具欄形式：

注：淘寶購物車工具欄，用于編輯購物車中商品，位于標簽欄之上

注：知乎日報內容詳情頁工具欄，包含針對當前內容的功能按鈕以及導航按鈕，位于屏幕底部

注：微博編輯消息頁面的工具欄

工具欄常用在一下幾種情境中：

（1）內容詳情頁中，放置針對當前內容的編輯操作按鈕

（2）圖文編輯頁面中，放置編輯時用到的工具按鈕

（3）針對列表項中的內容進行編輯，例如：購物車中的商品、

4、標簽欄

標簽欄讓用戶在不同的子視圖、任務和模式中切換

（1）標簽欄最多一次可承載5個標簽

（2）標簽欄常應用應用的的主界面中，來組織整個應用層面的信息結構，也就是我們常說的幾種主導航方式之一

（1）標簽欄常用來作主導航方式來布置產品結構

（2）標簽欄標簽超過5個后，視覺上略顯擁擠，平行主任務過多，容易給用戶造成困擾

注：口袋記賬當前版本標簽欄

5、搜索欄

注：Safari搜索欄

搜索欄中可出現一下可選元素：占位符文本（文案提示）、書簽按鈕、清除按鈕等

注：在行搜索框

注：UC瀏覽器搜索欄

二、臨時視圖

1、警告框

警告框用于告知用戶一些會影響到他們使用APP或設備的重要信息

（1）嚴格限制app中警告框的個數，并且保證每一個保證框，都能提供重要的信息或者游泳的選項

（2）警告框應簡明扼要的告訴用戶當前所處的情景，并且告訴用戶他們可以做什么

（3）盡可能地避免使用“你”、“你的”、“我”、“我的”等字眼出現

（4）避免在文案中詳細描述“該按那個按鈕”而導致文本過長

2、操作列表

操作列表展示了與用戶觸發的操作直接相關的一些列選項

注：下廚房上傳作品操作列表

（1）提供完成一項任務的不同方法，這樣多種操作方式不會永久的占用UI 的空間

注：探探上傳照片或者視頻

（2）在完成一項可能有風險的操作前獲得用戶的確認

注：騰訊新聞刪除評論

（3）避免讓用戶滾動操作列表

3、模態視圖

模態視圖為當前的任務或當前工作流程提供了一種獨立的功能，為用戶提供了一種不脫離主任務的方式去完成一個任務或者獲得信息

注：騰訊微云添加筆記

（1）模態視圖通常會包含一個完成按鈕和一個取消按鈕（可根據實際功能/情景來進行調整）

注：簡書編輯文章

（2）能占據整個屏幕，也可能占據屏幕的一部分

（3）選擇一個適當的動畫來展示模態視圖

垂直出現：模態視圖從底部邊緣滑入屏幕，也同樣從屏幕底部滑出

彈出：當前視圖從右往左水平滑動，顯示模態視圖，離開模態視圖時，原先的父視圖從左滑回屏幕右邊

PS：

（1）模態模型就行是導航模型中死胡同，它暫時覆蓋應用正常的操作頁面，讓你去完成和父頁面內容相關的一些任務

（2）通常莫泰視圖都是由屏幕底部滑出，覆蓋原有頁面

（3）模態視圖通常被用來添加或編輯內容

（4）模態視圖屬于正常流程上的一個臨時支路

原文地址： 點擊閱讀