你真的了解APP嗎?

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

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

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

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

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

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

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

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


各種“欄”

①狀態(tài)欄(Status Bar)

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

狀態(tài)欄


②導(dǎo)航欄(Navigation Bar)

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


搜索欄


③標(biāo)簽欄(Tab Bar)

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


底部標(biāo)簽欄


④工具欄(Tool Bar)

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


工具欄


⑤搜索欄(Seach Bar)

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

搜索欄


⑥范圍欄(Scope Bar)

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


范圍欄


內(nèi)容視圖

①列表形式(List style)

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


列表形式


②卡片形式(Card style)

將同類信息歸納到一個矩形或者圓角矩形當(dāng)中。卡片可以被堆疊、覆蓋、移動,這樣極大的擴(kuò)展了一個內(nèi)容塊的視覺深度和可操作性??ㄆ谠O(shè)計形式上可以增加邊緣、陰影,使得卡片具有立體感。


卡片形式


③集合視圖形式(Collection View)

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


集合視圖


④圖片形式(Image style)、文本形式(Text style)

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

公眾號“UE修養(yǎng)”&花瓣APP

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


控制元素

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

控制元素


臨時視圖

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

Alert View:必須包含標(biāo)題,或者標(biāo)題加正文,有一個或者多個按鈕。

Action Sheet:由用戶某個操作行為觸發(fā),包含兩個或以上的按鈕。

toast:在用戶觸發(fā)某個操作時,彈出toast來對該操作進(jìn)行反饋。

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

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


toast


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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,692評論 4 61
  • 剛做開工作室的決定時候多數(shù)人是持反對意見的,知道我以后要畫畫一直做這件事的時候多數(shù)人也是持反對意見的。 原因很多。...
    ___舊時人閱讀 189評論 0 0
  • 時間管理day47 1.親子閱讀77天,《蕭袤童話》之《冬眠》 2.聽于鶯老師的《兒童常見家庭意外》,孩子安全無小...
    柚媽_8421閱讀 194評論 0 0
  • 目錄結(jié)構(gòu): 1:怎么在studio中使用lambda表達(dá)式;2:lambda表達(dá)式的使用; 1:怎么在studio...
    老柯南閱讀 624評論 0 1

友情鏈接更多精彩內(nèi)容