我們用過的APP數(shù)不勝數(shù)，但是更多的是局限于其功能方面，一個(gè)APP包括哪些元素，APP完整的五臟六腑你可知曉？

APP，全稱是application，意思是應(yīng)用程序，即裝在智能手機(jī)里的各類軟件。APP和移動(dòng)操作系統(tǒng)（iOS、Android等）共同構(gòu)成能手機(jī)的軟件部分。

智能手機(jī)之所以智能，很大的功勞要?dú)w于APP。我們用微信和朋友聯(lián)系，用網(wǎng)易云音樂聽音樂，用音悅臺(tái)看MV，用美團(tuán)叫外賣，用京東、淘寶購物…。毫不夸張的說假如沒有了各類功能強(qiáng)大的APP，我們的生活便黯然失色。作為互聯(lián)網(wǎng)從業(yè)人員，僅僅停留在會(huì)用APP是不夠的，必須深入了解它，才能更好的設(shè)計(jì)它。

本文包括以下內(nèi)容：

各種“欄”：狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄、搜索欄、范圍欄。

內(nèi)容視圖：列表視圖、卡片視圖、集合視圖、圖片視圖、文本視圖。

控制元素：用于控制產(chǎn)品行為或顯示的信息。

臨時(shí)視圖：警告視圖、操作列表、toast、模態(tài)視圖。

（本文所描述的數(shù)值是以iOS系統(tǒng)為準(zhǔn)，與Android系統(tǒng)的控件數(shù)值有差異）

各種“欄”

1.狀態(tài)欄（Status Bar）

用來呈現(xiàn)信號(hào)、時(shí)間、電量等信息，Android系統(tǒng)還會(huì)顯示未讀信息的提示。高度20pt，位于整個(gè)APP界面的頂部。

狀態(tài)欄

2.導(dǎo)航欄（Navigation Bar）

導(dǎo)航欄也被稱為標(biāo)題欄，一般會(huì)顯示標(biāo)題，也可以放搜索、分段式控件或者其它功能入口。高度44pt，位于狀態(tài)欄下方。

搜索

3.標(biāo)簽欄（Tab Bar）

讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行快速切換。標(biāo)簽欄上一般有會(huì)三到五個(gè)圖標(biāo)，若超過五個(gè)，可以考慮將第五個(gè)圖標(biāo)用更多表示。高度49pt，位于APP最底部。

底部標(biāo)簽

4.工具欄（Tool Bar）

工具欄上防止著用于操作當(dāng)前頁面中各對(duì)象的控件，位于APP最底部。高度通常設(shè)計(jì)成44pt。

工具

5.搜索欄（Seach Bar）

用于搜索內(nèi)容，幫組用戶精準(zhǔn)的找到自己所需的信息和功能?？晌挥趯?dǎo)航欄下方，也可以放在導(dǎo)航欄上。高度可以自定義，一般設(shè)計(jì)為44pt。

搜索

6.范圍欄（Scope Bar）

只有和搜索欄一起時(shí)才會(huì)出現(xiàn)，用于定義用戶的搜索范圍。位于搜索欄下方，高度可自定義，一般為30pt~44pt。

范圍

內(nèi)容視圖

1.列表形式（List style）

每條列表可以是單挑的圖片形式或文本形式，也可以是圖文結(jié)合的方式。每條列表之間會(huì)用分割線進(jìn)行區(qū)分，利用“緊密、對(duì)比、重復(fù)、對(duì)齊”的原則設(shè)計(jì)每條列表的信息，使得信息清晰有力的傳達(dá)給用戶。

列表形

2.卡片形式（Card style）

將同類信息歸納到一個(gè)矩形或者圓角矩形當(dāng)中?？ㄆ梢员欢询B、覆蓋、移動(dòng)，這樣極大的擴(kuò)展了一個(gè)內(nèi)容塊的視覺深度和可操作性。卡片在設(shè)計(jì)形式上可以增加邊緣、陰影，使得卡片具有立體感。

卡片形

3.集合視圖形式（Collection View）

將同類信息用平鋪的形式展現(xiàn)，一般以圖片為主題，文字為輔助信息。多用于展示商品、照片、音樂等富媒體信息。

集合視

4.圖片形式（Image style）、文本形式（Text style）

圖片和文本視圖比較好理解，所以放在一起，圖片形式多見于圖片社交類APP，文本形式常見于內(nèi)容類APP。

公眾號(hào)“UE修養(yǎng)”&花瓣AP

內(nèi)容視圖是整個(gè)APP信息展示的主要形式，上述的五種常見視圖形式很多時(shí)候并不是獨(dú)立出現(xiàn)的，它們常?；旌铣霈F(xiàn)，例如有些內(nèi)容視圖即屬于卡片、又屬于列表形式，大家要在透徹理解的基礎(chǔ)上靈活運(yùn)用。

控制元素

控制元素用于控制產(chǎn)品行為或顯示信息，常見的控制元素見下圖。

控制元素

臨時(shí)視圖

臨時(shí)向用戶提供重要信息，或提供額外的功能和選項(xiàng)。常見的有警告視圖、操作列表、toast、模態(tài)視圖。

警告視圖（Alert View）：必須包含標(biāo)題，或者標(biāo)題加正文，有一個(gè)或者多個(gè)按鈕。

操作列表（Action Sheet）：由用戶某個(gè)操作行為觸發(fā)，包含兩個(gè)或以上的按鈕。

toast：在用戶觸發(fā)某個(gè)操作時(shí)，彈出toast來對(duì)該操作進(jìn)行反饋。

模態(tài)視圖：占據(jù)整個(gè)屏幕或者大部分屏幕，包含完成當(dāng)前任務(wù)所需的文字和控件，通常也會(huì)一個(gè)完成任務(wù)的按鈕（點(diǎn)擊后即可完成任務(wù)，當(dāng)前模態(tài)視圖也會(huì)消失），和一個(gè)取消按鈕（點(diǎn)擊后即放棄當(dāng)前任務(wù)，同時(shí)當(dāng)前模態(tài)視圖消失）

警告視圖&操作列表&模態(tài)視

toas

一個(gè)完整的APP包括四大類：各種“欄”；內(nèi)容視圖；控制元素；臨時(shí)視圖。你get了嗎？

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