UI組件應(yīng)用指南!標題欄設(shè)計方式詳解
本文從標題欄的組件介紹、設(shè)計要點、使用場景、樣式拓展四個方面,幫你掌握UI組件中的標題欄設(shè)計。
一、組件介紹
頂部標題欄,是幾乎所有 APP 頁面設(shè)計中的第一個組件,用來展示頁面的名稱和放置一些層級較高的操作選項。
iOS 官方組件庫提供了一些頂部標題欄的樣式,但因為大標題的設(shè)計并不符合中文市場,所以只要簡單認識它們的構(gòu)造即可。
而市面上應(yīng)用的標題欄五花八門,樣式各不相同,但它們包含的元素卻始終圍繞在幾個固定的模塊中。所以,掌握頭部標題欄的設(shè)計,只要先熟悉幾種常見的樣式,就可以在實際項目中根據(jù)需要進行自定義組合和創(chuàng)新。
二、設(shè)計要點
1. 框架布局
做標題欄第一步要做的,是確定欄的數(shù)量。
除去固定的狀態(tài)欄以外,標題欄還可以另外加入一到兩個欄,最多三個。每個欄至少高 44pt,它本身的背景是透明的,它們的背景即是標題欄的背景。
有了欄,接下來需要整理需求中放入標題欄的功能。
我整理了標題欄中頻繁出現(xiàn)的功能點,并分成三個展示類型,你們在做自己界面的時候可以考慮從以下內(nèi)容中選取。
以欄的形式存在的功能:頁面標題、產(chǎn)品 logo、搜索、分頁器、日期、用戶昵稱/歡迎語/slogan
這些元素可以占據(jù)頁面一整行的寬度,不一定要占滿,但它可以作為獨立的一行;有些長度較長的文字類產(chǎn)品 logo 則可以等同于標題使用。
以圖標形式存在的功能:搜索、通知、用戶中心、產(chǎn)品 logo、返回、側(cè)邊欄、其他……
這些元素以圖標的形式與第一類相結(jié)合,置于欄的左右;圖形形式 logo 則作為圖標使用。
以背景形式存在的功能:Banner、插畫。
有些 Banner 可以作為整個標題欄的背景。
有了欄,也有了功能,最后我們只需要把功能置入欄中,這樣就基本完成了一個標題欄的布局。
2. 分頁器排版
分頁器在標題欄中如何排版也是一個比較復(fù)雜的問題,因為分頁器的樣式、位置都有極大的自定義空間。我這里不會詳細去講分頁器該如何設(shè)計,那是分頁器組件會專門講的事情,我這里只歸納分頁器在標題欄中的擺法。`
首先我們需要知道,分頁器的每一個標簽,都有一個透明的背景,當我們考慮分頁器該如何排版時,本質(zhì)是在考慮這些一個個單元格該如何排版。
這些單元格只存在兩種排版形式,一種是定寬,一種是等分。
定寬,即固定每個單元格的寬度,將它們肩并肩排布好之后,再在欄中進行做對齊或居中對齊。一般適合少于四個或大于六個標簽的情況。
等分,即先確定整個分頁器的寬度,再根據(jù)分頁器的數(shù)量對這個寬度進行均分的方法。適合五到六個標簽的情況 (太少會顯得疏,太多會擺不下)。
三、使用場景
標題欄會應(yīng)用在幾乎所有頁面,但根據(jù)頁面需求會有不同的呈現(xiàn)方式。
首頁或者一級頁面的標題欄應(yīng)該是相對最復(fù)雜、功能最多的,下級頁面則使用較簡單的布局。常見的類型有下面幾種。
1. 基礎(chǔ)樣式
只包含一個標題/logo 欄或再加一個搜索欄的樣式。
例如,微信的標題欄是一個基礎(chǔ)且標準的樣式,第一欄頁面標題居中,該標題字號為 17pt,蘋方中粗體,右側(cè)一枚功能按鈕;第二欄就只有一條搜索欄。
如果搜索欄兩側(cè)有圖標,則搜索欄的寬度可以用 390 減去(兩個邊距+兩個圖標寬度+兩個間距)。
2. 包含 1 級分頁
只包含一個分頁器的樣式??梢耘c搜索或其他圖標合并成一欄,也可以置于搜索欄的上側(cè)或下側(cè)。
只包含一個分頁器的樣式。可以與搜索或其他圖標合并成一欄,也可以置于搜索欄的上側(cè)或下側(cè)。
字體的大小根據(jù)展示內(nèi)容重要性和頁面設(shè)計風格相關(guān),如果要切換的選項少,可以和圖標混合成一欄,如果切換的選項多,則獨立占一欄的位置。
3. 包含 2 級分頁
指包含兩級分頁器的情況,上方切換不同類型的頁面,下方切換該頁面下的不同分類內(nèi)容,這種樣式往往應(yīng)用在一些比較復(fù)雜的場景中。
4. 包含背景樣式
包含背景的設(shè)計是在頂欄背后增加主色、漸變、圖片的類型,可以和分頁控件并存。
這類設(shè)計主要目標是強化空間頂部的視覺重心,用于渲染品牌特征或活動氛圍。主要的設(shè)計要點是確保頭部和下方元素的銜接是合理的。
主流的做法包含下方直接截斷和漸變過渡兩種,為了讓過度更順滑,往往會在過渡區(qū)域上方疊加一個卡片元素,用來強化前后景的對比。
5. 混合輪播圖
和包含背景的形式類型,只是有的設(shè)計會更進一步,直接將背景做成輪播圖,更好的利用空間。
該類型的設(shè)計主要注意的事項就是要確保頂部的內(nèi)容可見,不能在顏色上和背景融為一體。
同時,要確保 Banner 本身的布局頂部有留白空間,不會讓 Banner 的內(nèi)容、文字信息和標題欄內(nèi)容疊加到一起,造成視覺錯誤。
四、樣式拓展
1. 極有家(每平每屋又雙叕改名了)
極有家給搜索欄做了一定程度的縮小,縮到不足半寬,與右側(cè)的圖標兩端對齊地排列到同一個欄內(nèi),這也是一種安排元素的思路。其次圖片背景采用不規(guī)則的形狀,盡管我非常不建議你們這么做——因為這非常怪異——但市面上確實有APP是這么頭鐵的。
2. 去哪兒
上滾的樣式可以與第一屏的樣式有所不同,把不重要的欄或者元素移出,不過此種變化需要一定程度的動效去表達動向,不能直接消失。例如去哪兒的旅行攻略頁面當頁面上滾時,搜索欄會逐漸以半欄的形式出現(xiàn)在右上角,而原本的三個功能圖標將會右滑移出。
3. 即刻
標題欄也可以根據(jù)頁面的場景需要,做成卡片化的形式,將四周鏤空出來。這種做法可以模糊內(nèi)容和框架的界線,讓場景在觀感上更整體。比如即刻的即刻鎮(zhèn)頁面,它的歡迎語/副文本和頭像并沒有跳出標題欄的框架,但它一旦將標題欄做成卡片,就會讓人覺得它是內(nèi)容和場景的一部分而非頁面框架的一部分。
4. 其他案例展示
歡迎關(guān)注作者的微信公眾號:「超人的電話亭
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)