您當前的位置:首頁 > 舞蹈

APP介面元素科普

作者:由 產品哥 發表于 舞蹈時間:2021-06-29

我們用過的APP數不勝數,但是更多的是侷限於其功能方面,一個APP包括哪些元素,APP完整的五臟六腑你可知曉?

APP,全稱是application,意思是應用程式,即裝在智慧手機裡的各類軟體。APP和移動作業系統(iOS、Android等)共同構成能手機的軟體部分。

智慧手機之所以智慧,很大的功勞要歸於APP。我們用微信和朋友聯絡,用網易雲音樂聽音樂,用音悅臺看MV,用美團叫外賣,用京東、淘寶購物…。毫不誇張的說假如沒有了各類功能強大的APP,我們的生活便黯然失色。作為網際網路從業人員,僅僅停留在會用APP是不夠的,必須深入瞭解它,才能更好的設計它。

本文包括以下內容:

各種“欄”

:狀態列、導航欄、標籤欄、工具欄、搜尋欄、範圍欄。

內容檢視

:列表檢視、卡片檢視、集合檢視、圖片檢視、文字檢視。

控制元素

:用於控制產品行為或顯示的資訊。

臨時檢視

:警告檢視、操作列表、toast、模態檢視。

(本文所描述的數值是以iOS系統為準,與Android系統的控制元件數值有差異)

各種“欄”

1.狀態列(Status Bar)

用來呈現訊號、時間、電量等資訊,Android系統還會顯示未讀資訊的提示。高度20pt,位於整個APP介面的頂部。

APP介面元素科普

狀態列

2.導航欄(Navigation Bar)

導航欄也被稱為標題欄,一般會顯示標題,也可以放搜尋、分段式控制元件或者其它功能入口。高度44pt,位於狀態列下方。

APP介面元素科普

搜尋

3.標籤欄(Tab Bar)

讓使用者在不同的子任務、檢視和模式中進行快速切換。標籤欄上一般有會三到五個圖示,若超過五個,可以考慮將第五個圖示用更多表示。高度49pt,位於APP最底部。

APP介面元素科普

底部標籤

4.工具欄(Tool Bar)

工具欄上防止著用於操作當前頁面中各物件的控制元件,位於APP最底部。高度通常設計成44pt。

APP介面元素科普

工具

5.搜尋欄(Seach Bar)

用於搜尋內容,幫組使用者精準的找到自己所需的資訊和功能。可位於導航欄下方,也可以放在導航欄上。高度可以自定義,一般設計為44pt。

APP介面元素科普

搜尋

6.範圍欄(Scope Bar)

只有和搜尋欄一起時才會出現,用於定義使用者的搜尋範圍。位於搜尋欄下方,高度可自定義,一般為30pt~44pt。

APP介面元素科普

範圍

內容檢視

1.列表形式(List style)

每條列表可以是單挑的圖片形式或文字形式,也可以是圖文結合的方式。每條列表之間會用分割線進行區分,利用“緊密、對比、重複、對齊”的原則設計每條列表的資訊,使得資訊清晰有力的傳達給使用者。

APP介面元素科普

列表形

2.卡片形式(Card style)

將同類資訊歸納到一個矩形或者圓角矩形當中。卡片可以被堆疊、覆蓋、移動,這樣極大的擴充套件了一個內容塊的視覺深度和可操作性。卡片在設計形式上可以增加邊緣、陰影,使得卡片具有立體感。

APP介面元素科普

卡片形

3.集合檢視形式(Collection View)

將同類資訊用平鋪的形式展現,一般以圖片為主題,文字為輔助資訊。多用於展示商品、照片、音樂等富媒體資訊。

APP介面元素科普

集合視

4.圖片形式(Image style)、文字形式(Text style)

圖片和文字檢視比較好理解,所以放在一起,圖片形式多見於圖片社交類APP,文字形式常見於內容類APP。

APP介面元素科普

公眾號“UE修養”&花瓣AP

內容檢視是整個APP資訊展示的主要形式,上述的五種常見檢視形式很多時候並不是獨立出現的,它們常常混合出現,例如有些內容檢視即屬於卡片、又屬於列表形式,大家要在透徹理解的基礎上靈活運用。

控制元素

控制元素用於控制產品行為或顯示資訊,常見的控制元素見下圖。

APP介面元素科普

控制元素

臨時檢視

臨時向用戶提供重要資訊,或提供額外的功能和選項。常見的有警告檢視、操作列表、toast、模態檢視。

警告檢視

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

操作列表

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

toast

:在使用者觸發某個操作時,彈出toast來對該操作進行反饋。

模態檢視

:佔據整個螢幕或者大部分螢幕,包含完成當前任務所需的文字和控制元件,通常也會一個完成任務的按鈕(點選後即可完成任務,當前模態檢視也會消失),和一個取消按鈕(點選後即放棄當前任務,同時當前模態檢視消失)

APP介面元素科普

警告檢視&操作列表&模態視

APP介面元素科普

toas

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

標簽: 檢視  APP  列表  bar  形式