中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作者對原型設計中的常用的一些通用元件進行了場景和規范整理，主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Bars篇，但源文件已涵蓋所有篇組件，后續還會繼續更新迭代。

百度網盤下載地址

https://pan.baidu.com/s/1M6OEK-adzNyNHyjIaSq6OA

一、頂部導航欄（Navigation Bars)

1. 使用場景

用于在層級信息中的導航，也可以用來管理屏幕信息。

2. 外觀

導航欄項目分為左中右三個區域，左側一般放置返回按鈕或左按鈕，右側放置右按鈕，中間則是提示信息。

3. 通欄顯示

iOS：在iPhone上，導航是整屏通欄顯示的。在iPad上，導航欄可能會嵌在分欄中的某一欄里，不會橫貫整屏。

Android：通欄顯示，當設備尺寸發生變化時需進行自適展示，展示的信息功能需根據尺寸大小對一些次要功能進行隱藏或露出。

4. 標題展示

iOS：使用當前視圖的標題作為導航欄的標題；標題左側出現返回按鈕，寫著前一級的標題。

Android：標題信息可以根據上下文信息實時轉換。

5. 原生規范【iOS Human Interface Guidelines】

1. ?考慮在程序的最頂一級的工具欄放置分段控件。
2. ?避免用過多的控件填滿導航欄，即使看起來空間足夠。
3. ?可以定義導航欄的顏色和透明度。
4. ?避免改變返回按鈕的外觀和行為。
5. ?不要創建分段的返回按鈕（比如面包屑按鈕）。
6. ?iPhone上需考慮由于設備方向變化導致的導航欄自動改變。

6. 原生規范【Google Material Guidelines】

1. ?可定義上滑時隱藏頂部導航欄，下拉時展示頂部導航欄。
2. ?可定義導航欄的顏色，標題文案可根據上下文信息實時轉換。
3. ?導航欄上的操作按鈕可以根據上下文需求進行轉換。

二、搜索欄（Search Bars)

1. 使用場景

用于幫助用戶查找內容或快速定位。

2. 外觀

1. ?不要增加額外的“搜索”按鈕，利用手機提供的鍵盤的自帶“搜索”按鈕。
2. ?放在頁面頂部位置，而不是頁面中部，更符合用戶的認知習慣。

3. 交互說明【搜索過程】

1. ?默認狀態：默認展示搜索提示詞；
2. ?獲取焦點：跳轉到搜索頁，并展示熱門候選詞，最近搜索記錄；
3. ?輸入中：根據輸入的內容展示聯想結果，如果候選詞包含在多個分類中，還需要提供分類展示頁面。
4. ?結果展示：用界面或者文字描述按照何種排序規則展示結果，如何展示。

4. 交互說明【呈現搜索結果】

1. ?給用戶想要的預期結果，最吻合的結果排在最靠前；
2. ?保留用戶輸入的內容；
3. ?自動糾正用戶輸入的錯誤拼音，給出和錯誤拼音最貼切的（正確）結果。搜索結果同理。
4. ?需要提示用戶輸入的內容無結果，比“無結果”更好的方式是“給用戶推薦其他內容”。

三、狀態欄（Status Bars)

1. 使用場景

用于展示設備和當前環境相關的重要信息。

2. 外觀

總出現在屏幕頂部，包含網絡連接、時間、電量等用戶需要的信息。

3. 網絡提示

iOS：在網絡訪問的時候會顯示Loading的Indicator。

Android：會在開放用戶權限或連接共享服務時顯示小箭頭。

4. 交互說明【返回頂部】

iOS：點擊頂部狀態欄后會返回頁面頂部。

Android：安卓不支持該交互。

5.交互說明【何時隱藏】

當用戶全屏觀看媒體或游玩游戲時，要將狀態欄隱藏；否則最好不要隱藏。

四、底部導航欄（Tab/Bottom Bars)

1. 使用場景

用于切換子任務、視圖和模式。

2. 原生規范【iOS Human Interface Guidelines】

1. ?如果底部導航欄中的某個選項暫時不可用，不要將該選項置灰。在不可用而又點擊了的情況下，頁面只要展示這個頁面為什么沒有內容就可以了。
2. ?避免使用過多的選項。當然，如果選項過少也會有問題。一般在iPhone上，3到5個選項比較合適。在iPad上可以適量增加。
3. ?支持配置紅點或數字進行信息提示。

3. 原生規范【Google Material Guidelines】

1. ?底部導航欄主要是為手機的導航設計的。如果是在較大的顯示屏上，比如桌面，則可以使用側邊導航。
2. ?僅展示最重要的3-5個功能。若低于3個，則使用標簽導航，不可超過5個，否則用戶會難以辨認選項。
3. ?底部導航是固定的，避免使用可橫滑的交互方式。

4. 交互說明【按鈕狀態】

按鈕分為默認態與選中態兩種狀態。

5. 交互說明【TAB點擊】

1. ?當用戶選擇點擊某個選項時，則應該直接展現相應的頁面，或者刷新當前的頁面；注意不要在點擊后展示菜單或者彈出框，如果點擊系統返回鍵，不會切換到底部導航欄上一次點擊的頁面。
2. ?點擊當前頁按鈕時，彈回當頁第一屏位置。
3. ?點擊不同選項按鈕時，不需要橫滑切換動效。

6. 交互說明【是否固定】

1. ?如果涉及的APP層級簡單，不存在操作路徑和界面層級的路徑沖突，且下級界面不存在底部固定工具欄，那么推薦使用固定處理。
2. ?如果涉及的APP界面信息層級復雜，那么推薦使用不固定方案。

五、工具欄（Tool Bars)

使用場景

用于操作/切換當前屏幕上的信息。

外觀

工具欄一般放置于屏幕的底部，在iPad上也可能出現在頂部。工具欄上的控件等寬放置。

• 外觀1：圖標+文字
• 外觀2：純圖標
• 外觀3：純文字

原生規范【iOS Human Interface Guidelines】

1. ?工具欄上要放那些用戶能對當前內容所做的操作，不要用它來切換程序模式。
2. ?在工具欄上放置當前情景下用戶最常用的功能。
3. ?盡量避免在同一個工具欄上混合使用有邊框和無邊框的控件。
4. ?支持定義工具欄的顏色和透明度。
5. ?iPhone上需考慮由于設備方向變化導致的工具欄高度變化。

原生規范【Google Material Guidelines】

Google Material Guidelines中將Tool Bars作為WEB元件進行說明，而將上方的底部導航欄Bottom Bars作為移動端的元件使用，功能和場景同等于iOS的Tool Bars。

感謝閱讀，敬請期待后續Views篇和Controls篇。

文由 @愚者秦?原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議