移動(dòng)端頂部欄ui設(shè)計(jì)分析

      移動(dòng)端頂部欄ui設(shè)計(jì)分析，頂部欄的另一個(gè)趨勢(shì)是透明背景，透明背景與第一個(gè)刪除標(biāo)題的背景目的相同，是為了節(jié)省界面空間。今天小編主要給大家分享移動(dòng)端頂部欄ui設(shè)計(jì)分析，希望對(duì)你們有幫助!

      頂部欄樣式

      這是我們最常見(jiàn)的頂部欄樣式：上面是狀態(tài)欄status bar，中間是界面標(biāo)題，左右兩側(cè)可能有icon，表示返回、消息提示、設(shè)置等操作。

      但當(dāng)我查看手機(jī)上的應(yīng)用程序時(shí)，并不是所有的應(yīng)用程序都采用了這種樣式。我選擇了幾個(gè)“異類”并逐一分析。

      去標(biāo)題化

      一些產(chǎn)品的一級(jí)界面會(huì)從頂部欄中刪除標(biāo)題，要知道它為什么被刪除，首先必須知道它為什么存在。很簡(jiǎn)單，標(biāo)題的功能就是告訴用戶當(dāng)前界面的名稱。

      但是，此功能與底部欄菜單重疊，因?yàn)橛脩暨�可以從底部欄的選擇狀態(tài)知道他們?cè)谀膫�(gè)界面上，正如我剛才所強(qiáng)調(diào)的，這是一個(gè)一級(jí)的界面，如果想去到二級(jí)，一旦沒(méi)有底部欄菜單，仍然需要取回標(biāo)題。

      以上是一級(jí)界面刪標(biāo)題的條件，接下來(lái)我們來(lái)談?wù)剟h除標(biāo)題的動(dòng)機(jī)。一個(gè)產(chǎn)品通常有五個(gè)一級(jí)界面，我們必須在有限的空間內(nèi)顯示足夠的功能和內(nèi)容，而刪除標(biāo)題是一個(gè)好方法。

      一級(jí)界面也有優(yōu)先級(jí)，“首頁(yè)”的點(diǎn)擊率最高，可以看到很多產(chǎn)品的首頁(yè)標(biāo)題都被刪除了，但是一級(jí)界面的其它標(biāo)題保留了下來(lái)。

      可點(diǎn)擊

      在我們的日常印象中，除了頂部欄的icon外，其余的都是不可點(diǎn)擊的。但我最近遇到一些特例，其中登錄/注冊(cè)界面是主要的，而這里的頂部欄可以看作是登錄/注冊(cè)按鈕。

      一級(jí)界面的頂部欄樣式為下拉框樣式，用戶可以單擊篩選。

      另一個(gè)常見(jiàn)的例子是當(dāng)iPhone點(diǎn)擊狀態(tài)欄時(shí)，它會(huì)快速回到界面頂部。

      我認(rèn)為未來(lái)會(huì)有越來(lái)越多的這種轉(zhuǎn)變，因?yàn)殡S著產(chǎn)品的迭代，會(huì)有越來(lái)越多的功能，空間也會(huì)越來(lái)越小，在此前提下，裝飾元素向功能元素轉(zhuǎn)化是必然的趨勢(shì)。

      極簡(jiǎn)設(shè)計(jì)的一個(gè)關(guān)鍵概念是去除與用戶任務(wù)無(wú)關(guān)的非功能性元素，或者將裝飾性元素轉(zhuǎn)換為功能性元素。

      背景色

      頂部欄的另一個(gè)趨勢(shì)是透明背景，透明背景與第一個(gè)刪除標(biāo)題的背景目的相同，是為了節(jié)省界面空間。

      既然提到了背景，那就談?wù)勴敳繖诘谋尘邦伾�。有四種常見(jiàn)的頂欄背景色:企業(yè)色、白色、深灰色、透明。

      企業(yè)色背景的一大好處是頂部欄標(biāo)上了品牌，這樣用戶一看到產(chǎn)品就知道它是什么。tipu頂部的bar直接添加了企業(yè)色背景和logo，我不能判斷這個(gè)設(shè)計(jì)是好是壞，但我一看到頂部欄就知道是tipu，從品牌處理的角度來(lái)看，是非常成功的。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.dedgn.cn/news-id-33742.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050