轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.sillybuy.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.yixieshi.com/ucd/13948.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里

【導(dǎo)讀】為了在手機(jī)屏幕給定的范圍內(nèi)展示出更多內(nèi)容，優(yōu)秀的導(dǎo)航欄設(shè)計(jì)將起到關(guān)鍵性作用，對(duì)于不同的操作也當(dāng)因地制宜地選則不同的設(shè)計(jì)方案。

　　導(dǎo)航的設(shè)計(jì)是 App 設(shè)計(jì)發(fā)展過程中很值得玩味的地方，由于移動(dòng)設(shè)備特別是智能手機(jī)的屏幕尺寸有限，設(shè)計(jì)者們通常會(huì)將屏幕空間盡量留給主體內(nèi)容，優(yōu)秀的導(dǎo)航設(shè)計(jì)會(huì)讓用戶輕松到達(dá)目的地而又不會(huì)干擾和困惑用戶。

　　經(jīng)典導(dǎo)航：tabbar

　　Tabbar 的導(dǎo)航方式是由誰(shuí)發(fā)明的筆者不得而知，不過相信大家都同意是由蘋果將其傳播開來。不僅很多蘋果的官方應(yīng)用采用了這種設(shè)計(jì)，蘋果同樣大力推薦應(yīng)用開發(fā)者優(yōu)先采用這種方式。從某種角度來說，tabbar 基本就是導(dǎo)航的標(biāo)準(zhǔn)設(shè)計(jì)。

　　Tabbar 的優(yōu)點(diǎn)很明顯，用戶完成切換的成本很低，只需要一次點(diǎn)擊操作，而放在屏幕底部對(duì)主體內(nèi)容的視覺沖擊可以說是最小的，這樣用戶就不會(huì)在瀏覽主體內(nèi)容時(shí)受到過多的干擾。至于缺點(diǎn)也同樣明顯，那就是受制于屏幕寬度的限制，通常 4 到 5 個(gè)功能項(xiàng)的切換會(huì)比較合適，過多的話將會(huì)顯著提高用戶的切換成本。

　　優(yōu)秀的挑戰(zhàn)者：抽屜式導(dǎo)航

　　Tabbar 并不是完美的，它并不適用于過多的切換項(xiàng)。抽屜式導(dǎo)航通過縱向排列切換項(xiàng)解決了這一問題。不過這也意味著它不能和主體內(nèi)容同時(shí)出現(xiàn)在屏幕上。

　　在大部分的設(shè)計(jì)當(dāng)中，通過點(diǎn)擊屏幕左上角的按鈕喚出切換項(xiàng)，有些也可以通過向右滑動(dòng)手指來完成。一個(gè)簡(jiǎn)單的滑動(dòng)動(dòng)畫，就像拉出一個(gè)抽屜，「抽屜式導(dǎo)航」這個(gè)名稱應(yīng)該就是來源于此。突破了數(shù)量的限制，更大程度上釋放了主體空間，也因此提高了操作成本。就作者個(gè)人感覺，如果能將主要功能項(xiàng)組織在 4 到 5 項(xiàng)，tabbar 的設(shè)計(jì)方式可能會(huì)更好，否則，就應(yīng)該優(yōu)先考慮抽屜式導(dǎo)航了。

　　為頻繁操作設(shè)計(jì)：滑動(dòng)式的導(dǎo)航

　　導(dǎo)航并不一定只發(fā)生在功能項(xiàng)之間。例如新聞?lì)悜?yīng)用需要在不同類別的新聞之間進(jìn)行切換瀏覽。通常來說，這種切換的頻率要比功能項(xiàng)切換更高，切換項(xiàng)的數(shù)量也會(huì)比較多，像常見的新聞?lì)悇e就有 7,8 種。我記得在「網(wǎng)易新聞」早期的 iOS 版本中采用了「抽屜式導(dǎo)航」的方式進(jìn)行新聞?lì)悇e的切換，這種方式在高頻率切換時(shí)需要過多的操作次數(shù)，當(dāng)需要在相鄰類別連續(xù)切換時(shí)更是缺乏操作的連續(xù)性。新的 iOS 版「網(wǎng)易新聞」對(duì)新聞?lì)悇e的切換重新進(jìn)行了設(shè)計(jì)。

　　用戶通過在內(nèi)容頁(yè)面左右滑動(dòng)手指即可在不同的類別之間進(jìn)行切換。這種方式的用戶體驗(yàn)改進(jìn)了很多，尤其在連續(xù)切換時(shí)其操作方式的連續(xù)性比較強(qiáng)，主體頁(yè)面的過渡也更加平滑，會(huì)產(chǎn)生更加流暢的體驗(yàn)。當(dāng)然也會(huì)有一些缺陷，比如一次滑動(dòng)只能切換到相鄰的類別，要想直接切換到對(duì)應(yīng)類別可以點(diǎn)擊上方的類別列表，不過由于類別過多，有時(shí)候可能需要滑動(dòng)一下類別列表才能完成操作。不過總體而言，當(dāng)需要在具有相似屬性類別之間進(jìn)行較頻繁切換時(shí)，這種設(shè)計(jì)方式很值得參考。

　　如何走得更遠(yuǎn)?

　　iOS 系統(tǒng)中使用小的圓點(diǎn)圖來標(biāo)示當(dāng)前處于第幾屏，優(yōu)酷 iOS 版本中借鑒了這種設(shè)計(jì)方式，并將其創(chuàng)新地應(yīng)用到主體內(nèi)容的導(dǎo)航上。上面說到，像tabbar 這種橫向排列切換項(xiàng)的設(shè)計(jì)方式受制于手機(jī)屏幕寬度的限制，而通過使用占用空間更小的圓點(diǎn)圖，優(yōu)酷打破了這種限制，手指觸碰到圓點(diǎn)圖時(shí)，將會(huì)顯示類別提示，由于無(wú)法直接看到，可能無(wú)法按到正確的類別，通常需要移動(dòng)一下手指，不過就作者的體驗(yàn)來看，這個(gè)尋找類別的過程體驗(yàn)非常平滑，基本不會(huì)產(chǎn)生困擾。只是類別提示有些小，并且有些視覺角度下可能會(huì)被操作的手指擋住，如果能將類別提示顯示在更容易看到的地方，比如在標(biāo)題中顯示一個(gè)指示或許能進(jìn)一步提升用戶體驗(yàn)。

　　優(yōu)酷這種創(chuàng)新的導(dǎo)航方式應(yīng)用在類別的切換上取得了不錯(cuò)的效果，它是否同樣適用于功能項(xiàng)的切換呢，它有可能在某種程度上代替「抽屜式」導(dǎo)航嗎?功能的和類別不同，相對(duì)于「電影」、 「電視劇」 、「體育新聞」這種用戶已經(jīng)非常熟悉的詞匯，功能描述通常有著更高的認(rèn)知成本，如果再將其用指示圖代替，無(wú)疑會(huì)進(jìn)一步提高這種認(rèn)知成本。并且功能之間通常沒有相似的屬性，將其用相同的圖標(biāo)來代替并不符合認(rèn)知習(xí)慣，而使用不同圖標(biāo)又會(huì)使界面過于雜亂。看來問題重重，我們還需要更多的思考。