本文是對於從業1年以上的移動端產品經理養分接近於0，但是對於0-1歲之間的產品新人，營養價值較高。所以，請適合人群閱讀。
對於剛剛開始或者打算從事App產品設計的新人來講，特別希望有人能告訴自己，App究竟應該怎麼做，或者說怎麼做能確保設計出來的App“不求有功，但求無過”。
看了很多文章，寫的不是過於深奧，不適合新人閱讀，要麼就是過於散碎，不足以形成體系。所以，今天我就想根據以往經驗，來簡明扼要的告訴新人，如何快速掌握App設計基礎。我們先從最為直觀，也是與用戶交互最多的界面開始講起。
當我們打開一款App，我們會看到很多東西，東點點，西點點，又會點開各種頁面，看到新的界面。不明覺厲的人在設計App時，都是隨心而動，想到什麼做什麼，至於丟了什麼、該做什麼、怎麼做，心裡並沒有一個“藍圖”。
實際上，任何一款App都是有共同的特點的，或者叫共同的結構、功能、規則，我總結了就四個字：欄、圖、控、框。如果你一頭霧水，就往下觀瞧：
“欄”
“欄”指的是App界面中存在著很多欄：
（1）狀態欄：一般位於界面頂部，我們在手機上看到的手機信號、時間、通知、電量等都是位於狀態欄；
（2）導航欄，也叫標題欄：多數情況下，App每個頁面僅次於狀態欄下會有導航欄，告訴用戶你現在處於什麼位置，當然有些App的一些界面並沒有導航欄，其實並不是沒有導航欄，只是留有位置沒有文字而已；
（3）標籤欄：有很多新人容易把標籤欄和導航欄搞混了，這也許是受Web端產品中“導航”所影響，App中一般位於底部或者頂部的，用於大版塊切換的欄，就是標籤欄；
（4）工具欄：用於執行鍼對當前頁面的操作的欄，比如留言框、收藏、分享、點贊等按鈕所處的欄；
（5）篩選欄：篩選欄並不是所有App都會有，一些信息維度比較多的App，比如招聘類App，會有篩選欄，支持按條件篩選，一般位於導航欄下方；
（6）搜索欄：這個很直觀了，就是執行搜索功能的欄，一般和導航欄重疊或者位於導航欄下側。
淘寶App首頁
大家這個時候可以打開一些App，驗證一下，是不是存在這些“欄”，還有沒有其他欄。
“圖”
“圖”指的是“視圖”，請注意“視圖”不是界面，而是代表著一種視圖結構。舉個例子更易理解，我們看到今日頭條首頁是由一條條信息、以列表形式構成的，這其實就是一種“列表視圖”。再比如我們看到的淘寶、京東等電商類App，類似於首頁這種視圖結構屬於“集合視圖”。以上兩種視圖是最常見的，不論是“列表視圖”還是“集合視圖”，都屬於宏觀上的視圖結構，實際上在這些宏觀視圖結構中還有微觀視圖結構，比如列表視圖中每組信息可以是文本視圖（純文本）、圖文視圖（純圖片）、文本+圖片視圖，在一些較個別的App中還存在“卡片視圖”，比如探探，一個界面就一個視圖，可以以卡片形式，通過滑動切換視圖內容。
今日頭條首頁和探探首頁
“控”
“控”指的是“控件”，說起控件，App裡面的控件真是太多了，不說具體的，就按照類別劃分：最常見的各種按鈕控件、輪播控件、文本控件、分段器控件、選擇控件、計數器控件、加載控件等。“欄”、“圖”原本都是靜態的，可是為什麼能有交互，就是因為在旁邊或者上面添加了控件。
淘寶首頁-刷新控件
“框”
“框”要比前面三種元素出現的頻率低，一般在特殊情況下才會出現。這也符合多數情況下，App應用是穩定的、安全的，少數情況下會出現波動或者風險的實際情況。當我們要刪除一條信息，會有對話框提示，當網絡不佳時頁面加載緩慢或者失敗，會有toast提示，當需要註冊時會有註冊框等等。目前，用的最多的就是對話框和toast，ios中對話框叫做“Alert View”，安卓系統中對話框叫做“dialog”。
今日頭條toast提示
講到這裡，一款App，不管它的定位、性質、功能是什麼樣的，基本都離不開以上四部分，換句話說，以上四部分組成了App的界面，有了這四部分，你的App可能還不是很完美，但起碼算是完整了。對於已經有多年產品經驗的老人來說，這確實不夠，但是對於新人來講，掌握“欄”、“圖”、“控”、“框”這四字要訣，你在設計App界面時不會丟三落四，不會找不到著眼點。
想象一下，你在設計App的首頁時，從上往下要有狀態欄、導航欄、搜索欄（可選）、標籤欄，安插了輪播控件的banner位，以列表形式結合圖文形式的視圖界面，每個圖文視圖安插了按鈕控件，下拉或者上拉或者點擊標籤欄“首頁”按鈕出現了加載或刷新插件。
文章讀的再多，也比不上動動手，建議大家讀完以後，多看幾款最好是不同類型的App，是不是如文中所講那樣，如果有時間，自己再動手畫畫，看看自己能不能有條不紊的設計出一個App的界面。
如果大家喜歡，下一篇我打算講一下《寫給0歲產品經理：快速掌握App設計基本方法之註冊登錄》。
本文由 @德綱大帝 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議