本文是對(duì)于從業(yè)1年以上的移動(dòng)端產(chǎn)品經(jīng)理養(yǎng)分接近于0，但是對(duì)于0-1歲之間的產(chǎn)品新人，營(yíng)養(yǎng)價(jià)值較高。所以，請(qǐng)適合人群閱讀。

對(duì)于剛剛開(kāi)始或者打算從事App產(chǎn)品設(shè)計(jì)的新人來(lái)講，特別希望有人能告訴自己，App究竟應(yīng)該怎么做，或者說(shuō)怎么做能確保設(shè)計(jì)出來(lái)的App“不求有功，但求無(wú)過(guò)”。

看了很多文章，寫(xiě)的不是過(guò)于深?yuàn)W，不適合新人閱讀，要么就是過(guò)于散碎，不足以形成體系。所以，今天我就想根據(jù)以往經(jīng)驗(yàn)，來(lái)簡(jiǎn)明扼要的告訴新人，如何快速掌握App設(shè)計(jì)基礎(chǔ)。我們先從最為直觀，也是與用戶交互最多的界面開(kāi)始講起。

當(dāng)我們打開(kāi)一款A(yù)pp，我們會(huì)看到很多東西，東點(diǎn)點(diǎn)，西點(diǎn)點(diǎn)，又會(huì)點(diǎn)開(kāi)各種頁(yè)面，看到新的界面。不明覺(jué)厲的人在設(shè)計(jì)App時(shí)，都是隨心而動(dòng)，想到什么做什么，至于丟了什么、該做什么、怎么做，心里并沒(méi)有一個(gè)“藍(lán)圖”。

實(shí)際上，任何一款A(yù)pp都是有共同的特點(diǎn)的，或者叫共同的結(jié)構(gòu)、功能、規(guī)則，我總結(jié)了就四個(gè)字：欄、圖、控、框。如果你一頭霧水，就往下觀瞧：

“欄”

“欄”指的是App界面中存在著很多欄：

（1）狀態(tài)欄：一般位于界面頂部，我們?cè)谑謾C(jī)上看到的手機(jī)信號(hào)、時(shí)間、通知、電量等都是位于狀態(tài)欄；

（2）導(dǎo)航欄，也叫標(biāo)題欄：多數(shù)情況下，App每個(gè)頁(yè)面僅次于狀態(tài)欄下會(huì)有導(dǎo)航欄，告訴用戶你現(xiàn)在處于什么位置，當(dāng)然有些App的一些界面并沒(méi)有導(dǎo)航欄，其實(shí)并不是沒(méi)有導(dǎo)航欄，只是留有位置沒(méi)有文字而已；

（3）標(biāo)簽欄：有很多新人容易把標(biāo)簽欄和導(dǎo)航欄搞混了，這也許是受Web端產(chǎn)品中“導(dǎo)航”所影響，App中一般位于底部或者頂部的，用于大版塊切換的欄，就是標(biāo)簽欄；

（4）工具欄：用于執(zhí)行針對(duì)當(dāng)前頁(yè)面的操作的欄，比如留言框、收藏、分享、點(diǎn)贊等按鈕所處的欄；

（5）篩選欄：篩選欄并不是所有App都會(huì)有，一些信息維度比較多的App，比如招聘類App，會(huì)有篩選欄，支持按條件篩選，一般位于導(dǎo)航欄下方；

（6）搜索欄：這個(gè)很直觀了，就是執(zhí)行搜索功能的欄，一般和導(dǎo)航欄重疊或者位于導(dǎo)航欄下側(cè)。

淘寶App首頁(yè)

大家這個(gè)時(shí)候可以打開(kāi)一些App，驗(yàn)證一下，是不是存在這些“欄”，還有沒(méi)有其他欄。

“圖”

“圖”指的是“視圖”，請(qǐng)注意“視圖”不是界面，而是代表著一種視圖結(jié)構(gòu)。舉個(gè)例子更易理解，我們看到今日頭條首頁(yè)是由一條條信息、以列表形式構(gòu)成的，這其實(shí)就是一種“列表視圖”。再比如我們看到的淘寶、京東等電商類App，類似于首頁(yè)這種視圖結(jié)構(gòu)屬于“集合視圖”。以上兩種視圖是最常見(jiàn)的，不論是“列表視圖”還是“集合視圖”，都屬于宏觀上的視圖結(jié)構(gòu)，實(shí)際上在這些宏觀視圖結(jié)構(gòu)中還有微觀視圖結(jié)構(gòu)，比如列表視圖中每組信息可以是文本視圖（純文本）、圖文視圖（純圖片）、文本+圖片視圖，在一些較個(gè)別的App中還存在“卡片視圖”，比如探探，一個(gè)界面就一個(gè)視圖，可以以卡片形式，通過(guò)滑動(dòng)切換視圖內(nèi)容。

今日頭條首頁(yè)和探探首頁(yè)

“控”

“控”指的是“控件”，說(shuō)起控件，App里面的控件真是太多了，不說(shuō)具體的，就按照類別劃分：最常見(jiàn)的各種按鈕控件、輪播控件、文本控件、分段器控件、選擇控件、計(jì)數(shù)器控件、加載控件等?！皺凇薄ⅰ皥D”原本都是靜態(tài)的，可是為什么能有交互，就是因?yàn)樵谂赃吇蛘呱厦嫣砑恿丝丶?/p>

淘寶首頁(yè)-刷新控件

“框”

“框”要比前面三種元素出現(xiàn)的頻率低，一般在特殊情況下才會(huì)出現(xiàn)。這也符合多數(shù)情況下，App應(yīng)用是穩(wěn)定的、安全的，少數(shù)情況下會(huì)出現(xiàn)波動(dòng)或者風(fēng)險(xiǎn)的實(shí)際情況。當(dāng)我們要?jiǎng)h除一條信息，會(huì)有對(duì)話框提示，當(dāng)網(wǎng)絡(luò)不佳時(shí)頁(yè)面加載緩慢或者失敗，會(huì)有toast提示，當(dāng)需要注冊(cè)時(shí)會(huì)有注冊(cè)框等等。目前，用的最多的就是對(duì)話框和toast，ios中對(duì)話框叫做“Alert View”，安卓系統(tǒng)中對(duì)話框叫做“dialog”。

今日頭條toast提示

講到這里，一款A(yù)pp，不管它的定位、性質(zhì)、功能是什么樣的，基本都離不開(kāi)以上四部分，換句話說(shuō)，以上四部分組成了App的界面，有了這四部分，你的App可能還不是很完美，但起碼算是完整了。對(duì)于已經(jīng)有多年產(chǎn)品經(jīng)驗(yàn)的老人來(lái)說(shuō)，這確實(shí)不夠，但是對(duì)于新人來(lái)講，掌握“欄”、“圖”、“控”、“框”這四字要訣，你在設(shè)計(jì)App界面時(shí)不會(huì)丟三落四，不會(huì)找不到著眼點(diǎn)。

想象一下，你在設(shè)計(jì)App的首頁(yè)時(shí)，從上往下要有狀態(tài)欄、導(dǎo)航欄、搜索欄（可選）、標(biāo)簽欄，安插了輪播控件的banner位，以列表形式結(jié)合圖文形式的視圖界面，每個(gè)圖文視圖安插了按鈕控件，下拉或者上拉或者點(diǎn)擊標(biāo)簽欄“首頁(yè)”按鈕出現(xiàn)了加載或刷新插件。

文章讀的再多，也比不上動(dòng)動(dòng)手，建議大家讀完以后，多看幾款最好是不同類型的App，是不是如文中所講那樣，如果有時(shí)間，自己再動(dòng)手畫(huà)畫(huà)，看看自己能不能有條不紊的設(shè)計(jì)出一個(gè)App的界面。

如果大家喜歡，下一篇我打算講一下《寫(xiě)給0歲產(chǎn)品經(jīng)理：快速掌握App設(shè)計(jì)基本方法之注冊(cè)登錄》。

本文由 @德綱大帝 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議