移動端頂部欄ui設計分析

      移動端頂部欄ui設計分析，頂部欄的另一個趨勢是透明背景，透明背景與第一個刪除標題的背景目的相同，是為了節省界面空間。今天小編主要給大家分享移動端頂部欄ui設計分析，希望對你們有幫助!

      頂部欄樣式

      這是我們最常見的頂部欄樣式：上面是狀態欄status bar，中間是界面標題，左右兩側可能有icon，表示返回、消息提示、設置等操作。

      但當我查看手機上的應用程序時，并不是所有的應用程序都采用了這種樣式。我選擇了幾個“異類”并逐一分析。

      去標題化

      一些產品的一級界面會從頂部欄中刪除標題，要知道它為什么被刪除，首先必須知道它為什么存在。很簡單，標題的功能就是告訴用戶當前界面的名稱。

      但是，此功能與底部欄菜單重疊，因為用戶還可以從底部欄的選擇狀態知道他們在哪個界面上，正如我剛才所強調的，這是一個一級的界面，如果想去到二級，一旦沒有底部欄菜單，仍然需要取回標題。

      以上是一級界面刪標題的條件，接下來我們來談談刪除標題的動機。一個產品通常有五個一級界面，我們必須在有限的空間內顯示足夠的功能和內容，而刪除標題是一個好方法。

      一級界面也有優先級，“首頁”的點擊率最高，可以看到很多產品的首頁標題都被刪除了，但是一級界面的其它標題保留了下來。

      可點擊

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

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

      另一個常見的例子是當iPhone點擊狀態欄時，它會快速回到界面頂部。

      我認為未來會有越來越多的這種轉變，因為隨著產品的迭代，會有越來越多的功能，空間也會越來越小，在此前提下，裝飾元素向功能元素轉化是必然的趨勢。

      極簡設計的一個關鍵概念是去除與用戶任務無關的非功能性元素，或者將裝飾性元素轉換為功能性元素。

      背景色

      頂部欄的另一個趨勢是透明背景，透明背景與第一個刪除標題的背景目的相同，是為了節省界面空間。

      既然提到了背景，那就談談頂部欄的背景顏色。有四種常見的頂欄背景色:企業色、白色、深灰色、透明。

      企業色背景的一大好處是頂部欄標上了品牌，這樣用戶一看到產品就知道它是什么。tipu頂部的bar直接添加了企業色背景和logo，我不能判斷這個設計是好是壞，但我一看到頂部欄就知道是tipu，從品牌處理的角度來看，是非常成功的。

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-33742.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050