成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

Bottom bar/Tab bar使用指南與規(guī)范

作者:
2016-04-19
2087

寫在前面:

Google在上一個月更新了Andorid的設(shè)計規(guī)范,將bottom bar即iOS中的tabbar重新加入到MD的設(shè)計規(guī)范中。詳情大家可以看:原文譯文

PS:因為私人原因,導(dǎo)致了斷更一個月,非常抱歉。以后會產(chǎn)出更好的內(nèi)容,還有還請大家到時留意一下我的個人博客,即將上線哦!


Bottom bar/Tab bar使用指南與規(guī)范

設(shè)計師要知道,設(shè)計本身比好看更重要。設(shè)計還涵蓋了用戶如何使用一個產(chǎn)品,用戶是不會理會它是網(wǎng)站還是應(yīng)用,這就好比是產(chǎn)品跟用戶的對話,導(dǎo)航欄就是其中的對話之一。無論你的網(wǎng)站或應(yīng)用程序功能有多好視覺設(shè)計有多好看,如果用戶無法找到使用的方法,那都是一文不值的。

為什么底部導(dǎo)航是如此重要?

Steven Hoober在自己的移動設(shè)備使用量的研究發(fā)現(xiàn),49%的人在手機(jī)上依靠一個拇指把事情完成。下圖中,該手機(jī)的屏幕上顯示的圖是近似的范圍圖,其中的顏色代表用戶可以用拇指與屏幕接觸的區(qū)域。綠色表示用戶可以很容易到達(dá)的區(qū)域;黃色,這需要一個伸展的區(qū)域;紅色的,即需要用戶的區(qū)域移位。

在智能手機(jī)上單手操作的舒適度。圖片來源:uxmatters

它需要放置在頂層和經(jīng)常使用的屏幕底部,因為它們是單手操作最舒適的區(qū)域。


Tab Bar

許多應(yīng)用程序使用底部導(dǎo)航欄(又稱tab bar)時都遵循把最重要的功能展示的原則。例如Facebook的tab上都放置核心功能,使功能之間快速切換。

Image title



底部導(dǎo)航設(shè)計的三個關(guān)鍵時刻
導(dǎo)航就好比是一輛能載用戶去他們想去的地方的車輛。還有底部導(dǎo)航應(yīng)該用于類似重要性的功能切換,而這些目的地,需要在應(yīng)用的任何地方都可以直接訪問。
良好的底部導(dǎo)航設(shè)計遵循以下三個規(guī)則。


1.僅顯示最重要的“目的地”。
在底部導(dǎo)航欄最好使用三到五個的頂級功能點/目的地。如果有少于三個目的地,請考慮使用標(biāo)簽來代替。
Image title避免在底部導(dǎo)航使用五個以上的功能點/目的地,因為它們之間會太靠近彼此。而且在標(biāo)簽欄有太多的功能會使用戶選擇困難癥突發(fā)。請記住每增加一個選項卡,應(yīng)用的復(fù)雜性也會相應(yīng)增加。


Image title

如果您的頂級導(dǎo)航已經(jīng)超過五個標(biāo)簽,請?zhí)峁┢渌绞竭M(jìn)入。


避免滾動的標(biāo)簽欄
部分隱藏的導(dǎo)航是小屏幕一個解決方案 - 你不必?fù)?dān)心有限的屏幕大小,只需將您的導(dǎo)航選項變成一個可滾動的標(biāo)簽。但是滾動內(nèi)容是低效率的,因為需要滾動才能看到想要的選項。

Image title


2.與當(dāng)前位置的關(guān)系
未指明當(dāng)前位置可能是在底部導(dǎo)航設(shè)計上最常見的錯誤。 用戶最常問,“我在哪里?”,這是最需要解決的根本問題之一。
用戶應(yīng)該知道一眼就知道如何從A點到B點,而且不需要任何來自外部的指導(dǎo)。應(yīng)該使用適當(dāng)?shù)囊曈X線索(圖標(biāo),標(biāo)簽和顏色),從而使導(dǎo)航不言而喻。


圖標(biāo)
因為底部導(dǎo)航最重要的部分是圖標(biāo),它們應(yīng)該被用于連通的內(nèi)容的溝通媒介。一個通用型強(qiáng)的圖標(biāo),用戶就會一目了然,如搜索,電子郵件,打印等功能。不幸的是“萬能”的圖標(biāo)是罕見的,而應(yīng)用設(shè)計師往往設(shè)計上都很容易弄巧反拙。
Image title

我在上一篇文章就指出過這個問題。


顏色
避免在底部標(biāo)簽欄用不同顏色的圖標(biāo)和文字標(biāo)簽,而是使用應(yīng)用的主要顏色來表示視覺焦點。
Image title一個簡單的規(guī)則 - 用應(yīng)用的主要顏色作為底部的導(dǎo)航操作選中的狀態(tài)(包括圖標(biāo)和任何文字標(biāo)簽)。

Image title

如果底部導(dǎo)航欄是彩色的,使得當(dāng)前選中的圖標(biāo)和文本標(biāo)簽設(shè)為黑色或白色。

Image title


文本標(biāo)簽

文本標(biāo)簽應(yīng)提供簡短和有意義的定義導(dǎo)航圖標(biāo)。避免長時間文本標(biāo)簽,因為這些標(biāo)簽會截斷或包裹。

Image title

菜單內(nèi)容應(yīng)易于瀏覽。用戶應(yīng)該能夠明白,當(dāng)他們點擊標(biāo)簽欄會去到哪。

目標(biāo)大小

使目標(biāo)足夠大,可以很容易地點擊。計算每個底部導(dǎo)航動作的寬度,由動作的次數(shù)除以該視圖的寬度。另外,使所有底部導(dǎo)航的寬度能滿足最大動作時候的操作。

Android的設(shè)計規(guī)范建議在移動的底部導(dǎo)航欄的尺寸。

Image title


標(biāo)簽欄上的徽章

您可以在標(biāo)簽欄的圖標(biāo)上顯示徽章,表明存在與該視圖或模式相關(guān)的新信息。

Image title


3.使導(dǎo)航不言而喻

良好的導(dǎo)航應(yīng)該像一只看不見的手引導(dǎo)著用戶。畢竟,如果人們無法找到那些最酷的功能還是最引人注目的內(nèi)容這都是無用的。


行為

每個底部的導(dǎo)航圖標(biāo)必須指向一個目標(biāo)位置,但不要顯示無法打開菜單或其他彈出窗口。點擊底部導(dǎo)航圖標(biāo)應(yīng)該直接引導(dǎo)用戶到相關(guān)的視圖或刷新當(dāng)前活動視圖。

Image title

不要使用標(biāo)簽欄為用戶提供了在當(dāng)前屏幕或應(yīng)用模式元素控制。如果您需要提供控制請使用工具欄來代替。

Image title


盡力爭取一致性

盡可能,使所有標(biāo)簽的視覺保持一致性。你可以通過在底部導(dǎo)航藍(lán)提供相同的標(biāo)簽給用戶帶來視覺的穩(wěn)定感。

當(dāng)它的功能將不可用,不要刪除標(biāo)簽。如果刪除了選項卡,你會讓應(yīng)用程序的UI變得不穩(wěn)定和不可預(yù)測。最好的解決辦法是確保所有選項卡都可用,但解釋為什么一個選項卡的內(nèi)容不可用。例如,如果用戶沒有脫機(jī)文件,在Dropbox的應(yīng)用程序離線選項卡顯示不可用,解釋如何有他們。這項稱為空狀態(tài)。

Image title


把它藏起來

如果屏幕滾動內(nèi)容中,標(biāo)簽欄可以當(dāng)人們滾動新的內(nèi)容時候隱藏,并透露如果他們開始拉回到頂端時會重新出現(xiàn)。

Image title


視覺享受

避免使用橫向運(yùn)動之間進(jìn)行轉(zhuǎn)換?;顒雍头腔顒右晥D之間的過渡應(yīng)該使用淡入淡出動畫。

Image title


小貼士

底部導(dǎo)航應(yīng)該是

  • 可見,井然有序的(用三到五個的頂級標(biāo)簽欄,避免底部導(dǎo)航滾動內(nèi)容)。

  • 清晰(bar里元素應(yīng)該是很容易辨認(rèn)和目標(biāo)應(yīng)足夠大,可以很容易地點擊)。

  • 簡單(確保每個導(dǎo)航圖標(biāo)引到正確的目標(biāo),并使所有元素,包括底部導(dǎo)航和整個應(yīng)用程序一致)。


結(jié)論

在每個網(wǎng)站和應(yīng)用設(shè)計中幫助用戶定位想要的頁面都應(yīng)該予以高度的重視。通常在這種時刻,背后的目標(biāo)是創(chuàng)建一個自然與用戶的心理模型對齊的交互系統(tǒng)。

你是為了你的用戶而設(shè)計,永遠(yuǎn)把用戶放在第一位。你的產(chǎn)品越清晰易用,用戶就越有可能使用它。


0
2
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號