起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品經理畫原型，掌握這3類元素就可以了！
我們平時看到的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 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
滑塊的英文應該是slider，文中拼寫為sider
寫的很細致，容易上手
真干貨！別人輸出的東西，是經過加工的，掌握底層的規則，自己進行加工輸出，會更牢固的掌握相關知識。一下子激起了自己對自己的組件庫有了擺動和改造的好奇心，每日都接觸這樣的頁面卻沒有去認真了解過這樣的組成結構。