產品經理有很大一部分時間，都在做產品設計，產品設計有一項很重要的工作就是原型設計。1、沒有形成自己有效的組件庫，每次畫原型的時候都現想，效率低；2、知其然，不知其所以然，能把原型畫出來，但是每個界面用到什么元素，為什麼要用這個元素，是不清楚的；3、只考慮界面，不考慮場景，不能作出更優的交互方案；出現以上這些問題，是對交互設計的知識掌握得不夠，這篇文章梳理了iOS交互中常見的三類界面元素，包括欄、控件和視圖。可以說我們看到的所有APP，都是由這三類元素組成。掌握這些底層、基礎的組件，可以提升原型設計的能力。這三類元素包含具體的子元素，欄有6個，控件有14個，視圖有13個，一共33個元素，一定要熟練掌握。所謂熟練掌握，最好是能達到這種程度：熟悉了這些元素後，再畫一遍，形成自己標準組件庫，以後畫原型能用上。這三類元素的標準來自於iOS，但在大部分情況下，也適用於安卓應用、H5應用。為什麼要自己畫一遍？因為自己畫一遍可以加強記憶，有些底層基礎的東西，就是要記住才行。不要指望在網上去下載一個通用的組件庫，從此一勞永逸，網上有些博主分享的組件確實很全，但是有很多冗餘的，可能80%都用不上。掌握最基礎的元素，可以搭配出各種組件，一定要形成自己的組件庫，包括刀哥分享的組件，也是給大家一個參考，不要做拿來主義。在iOS人機交互設計指南里，把欄一共分為6種，分別是狀態欄、導航欄、搜索欄、標籤欄、工具欄、側邊欄。為了方便記憶，可以按照所處的位置，從上到下，頂部有狀態欄、導航欄、搜索欄，底部有標籤欄、工具欄，側面有側邊欄。
狀態欄顯示用戶當前的移動網絡信息、WiFi信號、時間、電量等，大部分情況下，需要讓用戶知曉這些信息，但為了沉浸式的效果，也可以隱藏。不同機型，狀態欄不一樣，但我們畫原型時，有一個可以占位的組件就行了。
導航欄通常左側顯示返回按鈕，中間顯示頁面標題、右側顯示快捷操作。微信的導航欄，當頁面數據正在加載時，標題處顯示正在加載的效果。搜索欄，主要是用於搜索的入口，搜索欄通常配合搜索界面，在搜索界面，顯示最近的搜索記錄，還可以一鍵清空搜索內容。當搜索結果較多時，可以加一個範圍選擇，可以快速進行分類標籤欄位於頁面底部，可以快捷切換，換到不同的頁面，通常作為產品的一級導航。工具欄是對視圖的操作，比如對文章、音樂、視頻的點讚、收藏、評論。工具欄容易和標籤欄混淆，標籤欄屬於導航，而工具欄屬於操作，這是本質的區別。側邊欄，默認情況下是收起的狀態，當點擊某個按鈕的時候，從側面彈出，當移動端頁面內容緊湊時，會考慮使用側邊欄，比如個人中心、分類篩選項目較多。按鈕是比較常用的控件，通常是用產品進行輸入操作發起的入口。
移動端屏幕尺寸較小，一些功能性的操作不能完全平鋪出來，此時，通過情景菜單，可以擴展更多的操作選項。比如在iOS系統里，長按圖標，可以彈出分享、刪除、編輯等操作。可以在一些文本視圖、網頁視圖中，選中文本，來執行更多的操作，如複製、轉發、收藏。當某一個選項可能包含多個值時，可以使用選擇器，比如省市區、項目類型等。
在選擇簡單數值時，可以使用數字滑塊。比如在借貸產品里，選擇借款金額時。設置參數檔位：
8）進度控制器 Progress Indicators
9）刷新 Refresh Content Controls在頁面加載數據時，可以使用刷新加載控件。微信時聊天界面是在導航欄里加了加載的狀態。10）分段器 Segmented Controls
在移動端，分段器的使用頻率比較高，尤其是在一些訂單的狀態分類場景中。
在一個頁面里，要展示更多的內容，可以使用頁面指示器來容納更多的內容。iPhone的頁面指示器：
文本框是經常用到的控件，文本框的樣式也有很多種，設計文本框時，有幾個要點：②加入一鍵清空的按鈕，可以讓用戶快速清空，重新填寫；④同一頁面不要加入太多表單，當表單太多時，分步驟實現。視圖是各類元素的組合，掌握基礎的視圖，可以更高效完成原型。視圖可以分為內容類的，如表格、文本、圖像、網頁以及集合，還有操作類的，如行動菜單、警告框、彈出框、工作表、活動視圖。其他的視圖還有分欄視圖、滾動視圖和翻頁視圖。集合是由比較複雜的組件組成，沒有太固定的模式，比較靈活。需要執行比較重要的操作，或者選項超過2個以上時，可以使用行動菜單，行動菜單通常是從底部往上彈出。Popover是正常操作流程中短暫出現的一個控制區域，根據iOS人機交互指南的原則，儘量不要在iPhone里使用這個空間，因為iPhone的屏幕相對比較小，在iPad這種屏幕較大的系統里，可以使用這個空間。工作表是相對比較複雜的交互，在一個活動視圖里加了一些表單。比如發送郵件。活動視圖，是對當前上下文有用的任務，例如在微信里，對文章的一些列操作：分欄視圖管理兩個並排的視圖，主視圖中顯示主要內容，右側輔助視圖中顯示輔助內容。在iPhone里，很少用到這種視圖，在iPad等較大的設備上，比較常見。當一屏顯示不完整時，使用滾動視圖，可以展示更多的內容，在iPhone上很常見。翻頁視圖提供了一種內容頁面之間實現線性導航的方法，幫助從一個頁面流暢的切換到另外一個頁面。以上內容均來自《iOS人機交互指南》，雖然是iOS的指南，但其背後的邏輯是想通的。每個產品都是由界面組成，每個界面又都是由欄、控件和視圖這些元素組成。Web產品、移動H5產品、移動iOS安卓產品都是這樣。作為產品經理，雖然不必精通交互，但是應該具備交互設計的基本知識，至少掌握一套移動端的控件，一套Web端的控件。移動端的控件，包括uniapp、vant都跟iOS的交互很類似，所以掌握最底層的iOS交互設計規範，就掌握了大部分移動端的設計規範。Web端的控件，也有很多標準的前段框架，比如element、layui、bootstrap，推薦大家學習一下element的組件。還是那句話，不要去網上下載別人做好的組件庫，自己閱讀一下官方的設計指南，然後動手自己畫一套，明確每個組件的交互邏輯，應用場景。別人輸出的東西，是經過加工的，掌握底層的規則，自己進行加工輸出，會更牢固的掌握相關知識。【2023產品經理成長日曆】整合了30+位老師的原創內容和遴選自價值12000+元書籍等。每天一個乾貨內容，包括產品規劃、需求分析、產品運營、數據分析、工作技巧、每月話題討論等乾貨。
留言列表
留言列表