沒啥介紹的，我只是來甩干貨的。
這篇筆記基本概括了目前app界面設計中常用的大部分控件及使用方式，適合入門觀看。
操作面板
操作面板這種UI組件用于顯示與特定內容的對應備選操作。
與導航欄和底部操作欄這種全局操作欄不同，操作面板主要出現于內容區域，根據內容不同，可以選擇的操作面板模式也不相同，大致分為以下四類
第一，條狀模式
條狀模式直接顯示于內容區域，并且位置固定，這種模式雖然占據一定的顯示區域，但明確了可以操作的功能，一般使用于操作頻繁的功能。
第二，疊加模式
是一種懸浮在界面之上的操作面板，在不需要操作時自動隱藏，需要操作時呼出，這個太重要了，我以前下載過一個軟件看圖片底部的操作面板總是擋住一大截，很不爽。
第三，下拉式菜單模式
這種模式是一種隱藏的操作面板，需要操作時點擊展開，適用于操作功能多，而又以內容為主的界面。
第四，滑塊模式，
主要用于以列表形式展現的內容，一般操作方式是按住一個列表往左滑動，露出操作區域。
每種操作面板模式都有各自的優缺點，設計時還是要根據app類型和使用場景來定奪。
標簽式導航控件
標簽式導航控件是一種位置相對固定的，用于在全局頁面中跳轉的UI組件。（總結的更拗口了）
大致分為以下五種模式
1，標準模式（安卓）
安卓標準模式導航控件在頁面頂部，一般屬于二級導航。
2，底部布局模式（蘋果標準模式，現在通用）
屬于一級導航，地位無可動搖，最多五個圖標。
3，下劃線模式
原文如下:與標準模式不同，下劃線模式的特征是通過文本標簽下方的下劃線來表示當前選中狀態。
這tm和標準模式除了樣式不同還有什么區別，湊數用的吧！
4，滾動模式
當標簽過多，界面放不下時，可選用這個模式，左右滑動標簽，可顯示界面以外的標簽內容，同屬于二級導航。
5，抽屜模式
書中介紹的估計是過時的樣式，不能收起來始終顯示在界面一側，我給他更正一下。
抽屜模式，一般位于界面左側，可放置更多標簽，屬于一級導航，只是相較于底部標簽，使用頻率沒那么高，所以平時隱藏在左側界面以外，點擊面包屑標呼出。
滑動導航控件
滑動導航是指以滑動屏幕的方式來代替點擊按鈕的操作行為。
1，標準模式
標準模式沒有具體的按鈕或圖標控件，一般用于圖片或郵件等內容性的元素的瀏覽。由于目前人們對智能機已經非常熟悉，所以即使沒有提示也能明白在內容瀏覽時可以滑動。
2，頁面指示器組模式
該模式指在一些特定的頁面下方顯示一組指示器，用戶可以根據指示器判斷當前有多少個頁面和目前處在哪個頁面之上。
他媽的我來用人話說說
就是在一些有固定數量頁面的時候，使用該模式，該模式會在下方顯示一組圓點（不一定是圓點，也可以是其他形式，），通常有幾個頁面就顯示幾個圓點，并且當前頁面的圓點作特殊處理。
3，標簽式導航控件模式
可以左右滑動的標簽式導航控件，一般數量不宜太多，嗯。
下拉式菜單
下拉式菜單是一種相對位置固定的控件，點擊該控件會垂直彈出一個列表，并且，列表條目數最多不宜超過七個。
1，標準模式
控件默認顯示文字一般要與彈出列表內容相關。
2，控制模式
控制模式沒有默認顯示文字，每一條列表條目代表一種界面狀態或顯示內容的范圍，例如，當前控件顯示文字為小狗，則界面內顯示的內容就是跟小狗相關的，狀態控制同理。
3，氣泡模式
和分段導航控件一個尿性，就是更換個樣式而已，功能上沒有卵區別，唯一的好處在于控件可以用圖標代替。
深入式菜單
深入式菜單就是一個超級下拉菜單列表，可以內嵌好多層，不過一般三層已經是極限，再多的話，不僅操作起來變得繁復，界面也會異常擁擠。
還有一種模式是使用全屏列表的形式展現第一層，點擊其中一個條目，跳轉到新的界面進入更深的層級。
和深入式菜單相同，具有多個層級的列表，但折疊式菜單一般只有兩個層級，所以設計一些層級較淺的菜單時可以用。
折疊式菜單由于是垂直展開次級列表，所以，在設計時，要想法把一級列表項與次級列表做出區分，最常見的方法是利用不同方向或樣式的剪頭，當然有更好的設計樣式更好。
氣泡模式同其他形式菜單。
儀表盤式導航控件
（跳板式菜單）
好高大上的名詞哦，嚇死爸爸了。
喝喝，九宮格布局而已。
九宮格布局排列的圖標一般都是使用頻率相近的功能，并且使用方式比較自由，既可以作為一級導航，也可以作為二級導航使用。
九宮格布局的最大優勢在于，一次可以顯示最多4乘4個圖標或選項，比標簽式導航顯示的多，比抽屜式導航顯眼。
缺點是點擊其中一個跳轉出去之后，想要再點擊其他圖標或選項時只能重新返回該界面，到底要怎么用，還是要根據具體設計情況而定，以盡量減少用戶不必要的操作為準。
返回/home
智能手機一般都是從左跳到右邊，所以返回圖標一般都是指向左邊。
home圖標的功能是回到應用初始的界面，即主頁，一般默認為一個小房子圖標，不過現在也有所變化，有的應用把自身的品牌形象作為home圖標，這樣不僅加深用戶對應用的認同感，也更有特色。
另外，在一些內容類應用中，home圖標也承載著更多的功能，比如點擊可以回到頂部或直接刷新。
向上/向下滾動按鈕
這個在手機上用的到嗎？
報告老師，這有一個作者湊字數。
無限分頁列表
在界面內容很多的情況下，使用無限分頁列表可以在不跳轉的前提下，繼續讀取瀏覽后面的內容。
一般應用在搜索結果的瀏覽或以內容為主的列表內容。
1，標準模式
標準模式是目前最常用的無限列表模式，它可以在目前讀取的內容向上滑動至頂時，自動加載后面的內容，而無需另外操作。
2，按鈕模式
顧名思義，即 當滑動至底部時會出現一個加載更多的按鈕，點擊按鈕即可加載更多內容。
分頁按鈕
報告老師，這作者又tm在湊字數！
刷新控件
刷新控件是一種用于更新列表狀態的UI組件，用戶可以通過刷新查看到最新的內容。
標準模式為下拉刷新，下拉刷新一般用于列表內容較少的界面，而有大量列表內容如無限分頁列表那樣的，則下拉刷新不如刷新按鈕方便。
側劃式菜單（抽屜式菜單）
側劃式菜單是一種與標簽式導航層級并列的全局導航控件，它的優勢在于可以放置比標簽欄更多的功能按鈕。
缺點是所有功能都被隱藏在漢堡圖標里面，用戶不點開它就不會知道他有什么功能，因此，側劃式菜單所承載的功能的重要程度，通常比標簽導航要次一級。
垂直列表
垂直列表是一種最常見的UI控件，適用范圍非常廣，種類也不一而足，如導航列表，搜索列表，內容展示列表等。
導航列表是一個個功能的入口，而該列表的設計，一般遵循相似功能為一組的原則進行設計，把不同的功能組以間距或其他方式分開排列，有助于用戶查看和使用。
而其余的種類，則殊途同歸，基本都是詳情頁的入口，所以，這類列表設計的關鍵在于，列表上放置的內容的選擇，列表上的內容都是從詳情頁摘出來的，包括圖片，列表內容的選擇，決定了列表的側重點，而如何才能達到最佳的設計方式，還是要根據具體的設計內容具體問題具體分析。
網格列表
網格列表主要應用于圖片的瀏覽與展示，一般橫排2到4列，有時也可以在圖片下方疊加或羅列標簽，寫上該圖片的相關信息。
輪播面板
輪播面板可以在一塊固定區域內以走馬燈或循環播放的形式展現內容。
1，標準模式
標準模式在固定區域內同時顯示多個圖片或條目，并且，最后一個圖片或條目只顯示一部分，用于提示用戶可滑動查看更多。
2，控制模式
在控制模式下，輪播圖一般位于界面下方，用于控制界面中主體元素的變化，如給圖片增加濾鏡的界面效果。
3，展板模式
這是一種非常常用的輪播模式，通常在展示多張大圖，如商品信息時使用，一般可滑動查看，也可自動輪播。
4，導航模式
不建議使用，略。
時間軸
時間軸并非一種單獨的UI控件，而是以時間為軸心羅列條目的一種形式。
而時間軸設計的核心在于，用戶在進入時間軸界面后，第一眼看到的是最新的條目還是最舊的，這個需要根據不同的應用場景做出不同的判斷，如搜索結果頁面，第一屏顯示的一定是最新發布的內容信息，而評論列表就不一定了，它可能會根據用戶需要而優先顯示最新的或最舊的，如知乎評論區（他么就會占沙發，評論的一點營養都么有，不好意思跑題了）他就設置了一個按鈕，讓用戶自己切換優先顯示哪種時間軸。
不過有一點是可以確定的，在消息模式（就是像QQ微信那樣的聊天界面，就喜歡講這樣的大白話。）下，優先顯示的一定是最新的條目。
文本框
文本框主要用于登陸注冊時的id和密碼輸入，以及好友之間文字消息的編輯與發送，或，長文本內容的編輯與發布。
尚未輸入任何文字的文本框會顯示淺色的提示文字，稱為占位符，如果使用了占位符，那么就不需要再額外增加文本標簽來說明文本框的功能了，以減少文本框占用的面積和信息量。
文本框的五種屬性
郵件地址
電話號碼
url
.數字
搜索
文本框的三種模式
單行模式
單行模式只能編輯一行文本，常用于用戶名郵箱手機號密碼等文本的輸入。
搜索框模式
搜索框模式和單行模式類似，也是只能輸入一行文本，不過搜索框模式更明確，它只能輸入搜索關鍵字，而且通常框內會添加一個放大鏡圖標以告訴用戶這是一個搜索框。（感覺寫了一大堆廢話。）
多行模式
顧名思義，就是可以輸入多行文本的文本框，一般用于長文本的編輯，如評論等。
開關/選擇框
設計師可以通過開關這種UI組件，請求用戶在備選條目中選擇合適的一項。
1，復選框模式
復選框模式有兩種應用方式
第一種就是常規的應用方式，用戶可以一次性選擇多個條目，重復點擊可以取消選擇。
第二種也是可以多選，區別在于它選擇條目或元素（如圖片，消息等）的目的是把它們作為一個組進行后續操作，如刪除或上傳等。
選擇器
選擇器用于在多個備選項中選擇一個合適的條目，用戶可以通過輕撥選擇器遍歷選項一覽，并選擇所需條目，選擇器多用于時間日期等備選項多而密的場景。
選擇器不是一種界面內嵌的UI元素，用戶在點擊選擇器之后，界面通常會彈出一個疊加窗口，顯示臨時的選擇界面，在使用選擇器時，用戶必須選擇一個條目，這與單選框有點相似，不過選擇器不會在界面中同時顯示所有備選項，因此即使選項很多，也不會占用太大空間。
標準模式
標準模式只提供一個選擇器，用戶只能從其中選擇一個選項。
復數模式
顧名思義，復數模式即是有兩個及以上的選擇器，比如日期選擇。
滑塊
滑塊是一種由滑槽和把手組成的UI組件，用戶可以通過移動把手來改變相關的值或狀態，滑塊通常是水平顯示，左邊是最小值，右邊是最大值。
標準模式
在標準模式中，用戶可以通過滑動滑塊來改變值的大小。如聲音或屏幕亮度的調整。
時間軸模式
時間軸模式控制的是文件播放的時間進程，如音樂或視頻的播放。
環狀模式
環狀模式可以顯示比標準模式更長的內容，并且本身像個表盤一樣，因此操作可以更精確，也更有趣味性，不過應用場景好像不太多。
注：滑塊的使用場景遠不止文中介紹的那幾種，例如，在購物網站中，設置兩個滑塊，讓用戶利用滑塊選擇價格區間，比讓用戶輸入數值要方便的多。
拖放控件
用戶可以通過拖放含有拖放控件的條目將其拖動至其他位置，來更改條目的順序或狀態。
模態消息
模態消息用于向用戶傳遞消息，它的特點是在界面中央疊加一個對話框，模態對話框是基于模態窗口這一基本UI，并通過它實現消息通知的功能。
模態消息是最可靠的消息通知類UI之一，它能準確的向用戶傳遞消息，只要用戶沒有關閉消息窗口，就無法返回先前的界面繼續操作。它的特點是強制用戶查看消息，這種方式有利有弊，需要謹慎使用。
標準模式
標準模式下的模態消息有兩個按鈕，確定和取消，一般用于重大操作時的提示，確定完成操作，取消中止操作。一般情況下，取消位于左側，確定位于右側。
確認模式
確認模式用于向用戶發送錯誤信息等重要消息，并確保用戶會閱讀到這些消息，在該模式下，模態消息窗口中只有一個確認按鈕，所以一般用于顯示通知類消息而不是帶有選擇性的提示消息。
自動關閉模式
在自動關閉模式中，用戶不必執行關閉消息窗口的操作，應用會在消息展示一段時間后自動關閉。
無模態消息
無模態消息在提示用戶時僅會占用上下很小的空間，并且不會妨礙用戶對當前頁面的操作，設計師可以在郵件或圖片等元素的添加刪除或發表動作順利完成后，通過無模態消息向用戶反饋執行結果。
標準模式
標準模式的無模態消息僅會簡單的顯示一些指定的內容，由于消息會在一段時間后消失，因此內容不宜過于復雜，要使用戶在短時間內理解其含義。
狀態欄模式
在狀態欄模式中，提示消息會在狀態欄中顯示（廢話），與標準模式相同，消息在顯示一段時間后消失，由于狀態欄在絕大部分界面中都會顯示，因此這種模式能夠有效利用屏幕空間。
可取消模式
可取消模式在標準模式上增加了取消按鈕，該模式主要用于用戶執行了破壞性的操作時的情況。
塊消息
塊消息可以被插入原有的界面中，作為界面的一部分與其他UI一起顯示，設計師可通過塊消息向用戶顯示臨時消息，用戶注冊及設定相關表單操作時往往需要顯示反饋消息，這時就會經常用到塊消息。
角標
角標通過數字或簡短的標簽文字來顯示消息，是一種小巧的UI組件，通常用于顯示臨時消息的附屬元素。
標準模式
標準模式內角標內將顯示一個數學作為消息內容，該數學通常用于表示未讀條數等尚未完成的條目數。
通知模式
通知模式下，角標內將顯示new，update等服務運營商發給用戶的提醒，該模式主要用于儀表盤式導航控件，或垂直列表中，在條目上添加角標能夠很好的引起用戶的注意。
氣泡模式
與角標一樣，氣泡消息也是它所對應的對象的一種附屬元素，適用于臨時的消息通知，，由于采用的是氣泡樣式，所以這種UI組件能比角標顯示更多內容，使用范圍更靈活寬廣。
無限循環指示器用于表明服務當前正在執行某些處理。
當用戶要操作的的內容因信號或其他原因需要等待時，則應顯示無限循環指示器告訴用戶正在處理中。
如果正在執行的操作影響范圍較大，設計師應考慮結合使用模態消息在界面上疊加一個窗口，反之如果操作僅會影響界面的一部分，則應采取其他模式，在相應的區域中顯示小尺寸的提示信息。
標準模式，標準模式的無限循環指示器是一個簡單的環狀動畫，每個系統都有預置的樣式，我相信你一定見過，我就不描述了啊哈哈。
原創模式
形式多樣，設計師腦洞有多大，原創模式就有多豐富，但必須都是循環動畫。
條狀模式
你一定也見過對不對，那我就不描述了啊哈哈。
進度條
設計師可以通過進度條來表示任務的執行狀況，進度條可以明確的告訴用戶操作的具體執行進度，以及完成整個處理的預計時間。
頁面指示器
設計師可以通過界面指示器告訴用戶現在查看的界面或頁面僅是整段連續內容的一部分，同時用戶能夠借助頁面指示器獲知當前位置及內容總量。
頁面指示器通常與滑動控件和輪播面板一起搭配使用。
圖表
圖表是一種最為簡單易懂的數據可視化方式，所以大量應用于各種手機應用及網站，其中最典型的就是折線圖，柱狀圖和餅圖，一些與工作生活密切相關的應用，如工具類或用于記錄數據類應用等，常會使用圖表。
在使用圖表時要考慮當前選用的圖表模式是否適用于目標數據，柱狀圖與折線圖適用于數值比較，餅圖通常用于比例的比較，進一步講，柱狀圖適用于對不連續的數據進行比較，折線圖用于對連續數值進行比較。
評分控件
評分控件用于顯示用戶對內容的評價或感想。
標準模式
標準模式的評分控件僅針對內容進行簡單的評價，只有開關兩種狀態，贊或取消贊，沒有負面評價。
表情模式
表情模式的評分控件提供了多個候選表情，用戶可以通過表情來做出評價，用戶選擇不用的表情圖標表現出感謝，贊同，同情等不同的情緒，以可視化的形式表現用戶評價的細微差別。
好評差評模式
該模式可表達負面評價。有一組兩個圖標，一個表示贊，一個表示踩，贊圖標和標準模式一樣，踩也可取消。
等級模式
等級模式的評分控件將評價分為了5級，主要用于對商品和店家等開放式的內容的評價，該模式中，用戶評價的平均分是一個很重要的指標，如果評分人數過少，則評分可信度就會降低，因此設計時應該顯示評分總人數以作參考。
常見圖標
房屋
小房子等于主頁，主頁等于小房子或品牌形象。
放大鏡
放大鏡圖標一般用于搜索功能，當放大鏡上附有加號或減號時就變成了放大或縮小屏幕的作用，不過現在一般都用手勢操作來放大或縮小屏幕。
齒輪
表示設置，雖然也有其他圖標能表示設置，但現在已經基本默認齒輪才是設置圖標界的老大。
星形
星形用于收藏或評分功能。
模擬時鐘
模擬時鐘圖標用于表示歷史記錄，最近查看倒計時，鬧鐘等一切與時間相關的功能。
大頭針
又稱倒水滴（其實是我自己起的名字），一般用于地圖中表示當前位置或熱門地址，也可用于表示跟定位相關的功能圖標。
你不贊一下嗎？（傲嬌臉）
Tags: 用戶界面設計 移動設計
文章來源：http://www.ui.cn/detail/181976.html