我們平時看到的APP，都是由欄、控件和視圖這三類界面元素組成的。掌握這些底層、基礎的組件，可以提升原型設計的能力。本文對這三類常見的界面元素進行了梳理，一起來看一下吧。

　　産品經理有很大一部分時間，都在做産品設計，産品設計有一項很重要的工作就是原型設計。

　　在做原型設計時，經常會遇到以下問題：

　　沒有形成自己有效的組件庫，每次畫原型的時候都現想，效率低；知其然，不知其所以然，能把原型畫出來，但是每個界面用到什麼元素，為什麼要用這個元素，是不清楚的；隻考慮界面，不考慮場景，不能作出更優的交互方案； 出現以上這些問題，是對交互設計的知識掌握得不夠，這篇文章梳理了iOS交互中常見的三類界面元素，包括欄、控件和視圖。

　　可以說我們看到的所有APP，都是由這三類元素組成。掌握這些底層、基礎的組件，可以提升原型設計的能力。

　　這三類元素包含具體的子元素，欄有6個，控件有14個，視圖有13個，一共33個元素，一定要熟練掌握。所謂熟練掌握，最好是能達到這種程度：

　　記得元素的中英文名字；能夠知道每一個元素的具體使用場景；每一個元素，能有1-3個設計方案； 熟悉了這些元素後，再畫一遍，形成自己标準組件庫，以後畫原型能用上。這三類元素的标準來自于iOS，但在大部分情況下，也适用于安卓應用、H5應用。

　　為什麼要自己畫一遍？因為自己畫一遍可以加強記憶，有些底層基礎的東西，就是要記住才行。

　　不要指望在網上去下載一個通用的組件庫，從此一勞永逸，網上有些博主分享的組件确實很全，但是有很多冗餘的，可能80%都用不上。

　　掌握最基礎的元素，可以搭配出各種組件，一定要形成自己的組件庫，包括刀哥分享的組件，也是給大家一個參考，不要做拿來主義。

　　下面我們來具體說一下具體元素的使用。

　　01 欄 在iOS人機交互設計指南裡，把欄一共分為6種，分别是狀态欄、導航欄、搜索欄、标簽欄、工具欄、側邊欄。

　　為了方便記憶，可以按照所處的位置，從上到下，頂部有狀态欄、導航欄、搜索欄，底部有标簽欄、工具欄，側面有側邊欄。

　　1）狀态欄 StatusBar

　　狀态欄顯示用戶當前的移動網絡信息、WiFi信号、時間、電量等，大部分情況下，需要讓用戶知曉這些信息，但為了沉浸式的效果，也可以隐藏。

　　不同機型，狀态欄不一樣，但我們畫原型時，有一個可以占位的組件就行了。

　　2）導航欄 NavBar

　　導航欄通常左側顯示返回按鈕，中間顯示頁面标題、右側顯示快捷操作。

　　微信的導航欄，當頁面數據正在加載時，标題處顯示正在加載的效果。

　　3）搜索欄 SearchBar

　　搜索欄，主要是用于搜索的入口，搜索欄通常配合搜索界面，在搜索界面，顯示最近的搜索記錄，還可以一鍵清空搜索内容。

　　當搜索結果較多時，可以加一個範圍選擇，可以快速進行分類。

　　微信的搜索頁：

　　小紅書的搜索頁：

　　4）标簽欄 TabBar：

　　标簽欄位于頁面底部，可以快捷切換，換到不同的頁面，通常作為産品的一級導航。

　　微信的标簽欄：

　　小紅書的标簽欄：

　　5）工具欄 ToolBar

　　工具欄是對視圖的操作，比如對文章、音樂、視頻的點贊、收藏、評論。

　　小紅書的點贊、收藏、評論：

　　工具欄容易和标簽欄混淆，标簽欄屬于導航，而工具欄屬于操作，這是本質的區别。

　　6）側邊欄 SideBar

　　側邊欄，默認情況下是收起的狀态，當點擊某個按鈕的時候，從側面彈出，當移動端頁面内容緊湊時，會考慮使用側邊欄，比如個人中心、分類篩選項目較多。

　　側邊欄最典型的代表是豆瓣：

　　02 控件 1）按鈕 Button

　　按鈕是比較常用的控件，通常是用産品進行輸入操作發起的入口。

　　2）開關 Swichs

　　用于狀态控制，也是比較常見的操作。

　　3）情景菜單 ContextMenus

　　移動端屏幕尺寸較小，一些功能性的操作不能完全平鋪出來，此時，通過情景菜單，可以擴展更多的操作選項。

　　比如在iOS系統裡，長按圖标，可以彈出分享、删除、編輯等操作。

　　4）編輯菜單 EditMenus

　　可以在一些文本視圖、網頁視圖中，選中文本，來執行更多的操作，如複制、轉發、收藏。

　　微信公衆号文章的文本編輯菜單：

　　5）選擇器 Pickers

　　當某一個選項可能包含多個值時，可以使用選擇器，比如省市區、項目類型等。

　　6）滑塊 Sider

　　在選擇簡單數值時，可以使用數字滑塊。比如在借貸産品裡，選擇借款金額時。設置參數檔位：

　　7）步進器 Stepper

　　可以更快速調節數字。

　　8）進度控制器 Progress Indicators

　　在加載頁面時，可以通過進度控制器顯示當前進度。

　　9）刷新 Refresh Content Controls

　　在頁面加載數據時，可以使用刷新加載控件。微信時聊天界面是在導航欄裡加了加載的狀态。

　　10）分段器 Segmented Controls

　　在移動端，分段器的使用頻率比較高，尤其是在一些訂單的狀态分類場景中。

　　11）頁面指示器 Page Controls

　　在一個頁面裡，要展示更多的内容，可以使用頁面指示器來容納更多的内容。iPhone的頁面指示器：

　　12）文本框 Text Fields

　　文本框是經常用到的控件，文本框的樣式也有很多種，設計文本框時，有幾個要點：

　　最好是做實時的校驗，減少用戶重新輸入的成本；加入一鍵清空的按鈕，可以讓用戶快速清空，重新填寫；友好的提示文案；同一頁面不要加入太多表單，當表單太多時，分步驟實現。 13）标簽 Lables

　　14）色彩面闆 Color Wells

　　這個控件的使用頻率相對較低。

　　03 視圖 視圖是各類元素的組合，掌握基礎的視圖，可以更高效完成原型。

　　視圖可以分為内容類的，如表格、文本、圖像、網頁以及集合，還有操作類的，如行動菜單、警告框、彈出框、工作表、活動視圖。其他的視圖還有分欄視圖、滾動視圖和翻頁視圖。

　　1）表格 Table

　　2）文本視圖 Text View

　　3）圖像視圖 Image View

　　4）網頁視圖 Web View

　　5）集合 Collections

　　集合是由比較複雜的組件組成，沒有太固定的模式，比較靈活。

　　6）行動菜單 Action Sheets

　　需要執行比較重要的操作，或者選項超過2個以上時，可以使用行動菜單，行動菜單通常是從底部往上彈出。

　　7）警告框 Alerts

　　8）彈出框 Popovers

　　Popover是正常操作流程中短暫出現的一個控制區域，根據iOS人機交互指南的原則，盡量不要在iPhone裡使用這個空間，因為iPhone的屏幕相對比較小，在iPad這種屏幕較大的系統裡，可以使用這個空間。

　　9）工作表 Sheets

　　工作表是相對比較複雜的交互，在一個活動視圖裡加了一些表單。比如發送郵件。

　　10）活動視圖 Activity Views

　　活動視圖，是對當前上下文有用的任務，例如在微信裡，對文章的一些列操作：

　　11）分欄視圖

　　分欄視圖管理兩個并排的視圖，主視圖中顯示主要内容，右側輔助視圖中顯示輔助内容。在iPhone裡，很少用到這種視圖，在iPad等較大的設備上，比較常見。

　　12）滾動視圖 Scroll Views

　　當一屏顯示不完整時，使用滾動視圖，可以展示更多的内容，在iPhone上很常見。

　　13）翻頁視圖

　　翻頁視圖提供了一種内容頁面之間實現線性導航的方法，幫助從一個頁面流暢的切換到另外一個頁面。

　　寫在最後 以上内容均來自《iOS人機交互指南》，雖然是iOS的指南，但其背後的邏輯是相通的。

　　每個産品都是由界面組成，每個界面又都是由欄、控件和視圖這些元素組成。Web産品、移動H5産品、移動iOS安卓産品都是這樣。

　　作為産品經理，雖然不必精通交互，但是應該具備交互設計的基本知識，至少掌握一套移動端的控件，一套Web端的控件。

　　移動端的控件，包括uniapp、vant都跟iOS的交互很類似，所以掌握最底層的iOS交互設計規範，就掌握了大部分移動端的設計規範。

　　Web端的控件，也有很多标準的前段框架，比如element、layui、bootstrap，推薦大家學習一下element的組件。

　　還是那句話，不要去網上下載别人做好的組件庫，自己閱讀一下官方的設計指南，然後動手自己畫一套，明确每個組件的交互邏輯，應用場景。

　　别人輸出的東西，是經過加工的，掌握底層的規則，自己進行加工輸出，會更牢固的掌握相關知識。

　　看完這篇文章， 希望你能動手去梳理移動端和web端的組件，形成自己的組件庫。

　　專欄作家

　　刀哥，刀哥說，人人都是産品經理專欄作家。7年産品老司機，現任某互聯網公司高級産品專家，有豐富的金融項目經驗，豐富的實操經驗，擅于輸出接地氣的實用幹貨，幫助成千上萬的産品經理晉升成長。

　　本文原創發布于人人都是産品經理。未經許可，禁止轉載。

　　題圖來自Unsplash，基于 CC0 協議。

　　該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

　　,