標(biāo)題：iOS當(dāng)中4種UI元素的可用性問題及優(yōu)化建議

關(guān)鍵字：設(shè)計規(guī)范? 設(shè)計元素? 可用性測試

鏈接：http://www.beforweb.com/node/748

評論:

這篇文章說了四種UI設(shè)計元素：

頁碼指示符（小圓點(diǎn)）

導(dǎo)航欄的完成按鈕

加號（+）圖標(biāo)

拖拽圖標(biāo)

然而隨著各個平臺的開發(fā)者對設(shè)計規(guī)范的含糊委造，以至于這些設(shè)計元素不止出現(xiàn)在iOS平臺上盖灸，Android平臺也常常會出現(xiàn)這樣的設(shè)計元素。而這篇文章指出了這些元素在使用上導(dǎo)致一些可用性問題曹质。

1.頁碼指示符（小圓點(diǎn)）

我記得在我去年在上一家公司實習(xí)的，我們公司的App首頁用的就是這種指示符擎场，羽德，形式與下圖類似：

是的，就是在導(dǎo)航欄“首頁”這個導(dǎo)航標(biāo)題下面有三個指示符顶籽，用來告訴用戶玩般，通過滑動，后面還有兩頁內(nèi)容礼饱。在這一級導(dǎo)航中坏为，第一頁內(nèi)容是微博列表，第二頁是博主動態(tài)镊绪，第三頁是關(guān)注的博主匀伏。本來這三個關(guān)聯(lián)性不太大的內(nèi)容拼湊在一起，本身就有點(diǎn)不妥當(dāng)蝴韭，并且用這種圓點(diǎn)指示符進(jìn)行分頁够颠，更加增加用戶的認(rèn)知成本。雖然當(dāng)時公司沒有做用戶行為的記錄榄鉴，但是我猜履磨，能滑到第三頁查看”關(guān)注的博主“這一頁的用戶肯定很少蛉抓！

當(dāng)時Android的設(shè)計中，用Tab的形式作為二級導(dǎo)航欄放在一級導(dǎo)航欄下面剃诅，已經(jīng)很普遍了巷送。這樣的優(yōu)點(diǎn)也不言而喻。用Tab的形式矛辕，一來用戶可以一眼看到三個頁面的內(nèi)容笑跛，而不用去猜測下面另個頁面隱藏的是什么。二來用戶想從第一頁跳到第三頁的時候聊品，可以直接點(diǎn)擊Tab進(jìn)行切換飞蹂，不用滑動兩次。

跟當(dāng)時的產(chǎn)品經(jīng)理討論這點(diǎn)翻屈，他給我的回復(fù)是”人家Twitter首頁也是這樣的陈哑！你敢說不好？妖胀！”當(dāng)時無以反駁芥颈。不過還好在后面改版中，通過信息架構(gòu)重組赚抡，解決了這個問題爬坑。

文章也提到兩種優(yōu)化的建議，要么采取更靈活地導(dǎo)航方式取代涂臣，要么在單純靠指示碼引導(dǎo)的基礎(chǔ)上盾计，采用右邊緣露出一部分下頁的內(nèi)容來加強(qiáng)“更多”的暗示。我們采用了第一種赁遗。

2.導(dǎo)航欄的完成按鈕

文章舉出的例子是在登錄/注冊的流程中署辉，很多應(yīng)用程序會把完成的按鈕放在導(dǎo)航欄的右上角。這違背了自上而下的信息流向岩四。但是當(dāng)表單比較長的時候哭尝，為了避免完成按鈕在 有限的垂直空間下被忽略，固定在右上角剖煌，也不失為一種妥協(xié)的辦法材鹦。然而文章指出，除了把完成按鈕用常規(guī)的方式放在列表內(nèi)容最后耕姊，和固定在導(dǎo)航欄的右上角之外桶唐，還可以嘗試固定在屏幕底部（但是要注意不與鍵盤產(chǎn)生沖突）。暫時get不到固定在屏幕底部的實現(xiàn)效果茉兰，因為鍵盤在填寫表單的時候尤泽，鍵盤也必然在底部。但是也感謝作者在這里提供了一個新的思路。但愿在往后的設(shè)計中坯约，可以啟發(fā)出更多優(yōu)秀的設(shè)計方案熊咽。

3.加號（+）圖標(biāo)

在不同 的App中，+號這個元素在不用的位置闹丐，也承載著不同的含義网棍。所以在使用這個元素的適合，更加要小心謹(jǐn)慎妇智，一不小心就增加用戶的認(rèn)知負(fù)擔(dān)。

“當(dāng)加號位于導(dǎo)航欄當(dāng)中時氏身，通常表示“新建”功能巍棱；如果被放在列表單元當(dāng)中，要么是表示將這條內(nèi)容添加到某種分組當(dāng)中蛋欣，要么是用來展開詳情航徙。”

文章指出了幾個很典型的例子陷虎，來分別論述自己的觀點(diǎn)到踏。在這里，我最想提到的是用戶量級以“億’為單位的微信尚猿。

不管是Android還是iOS窝稿，微信的首頁頂部導(dǎo)航欄的右邊都有一個”+“按鈕，點(diǎn)擊按鈕凿掂，展開下拉二級菜單伴榔。當(dāng)然微信有海量的用戶，而且大部分用戶的生活已經(jīng)離不開微信的情況下庄萎，導(dǎo)航欄這里不管這里用什么圖標(biāo)踪少，用戶只要有需要就會去嘗試點(diǎn)擊，找到自己需要的操作糠涛。然而正是因為微信有這種巨大的威力援奢，在圖標(biāo)的設(shè)置上更加應(yīng)該小心謹(jǐn)慎，因為一旦錯誤引導(dǎo)忍捡，就會”培養(yǎng)“了用戶的錯誤認(rèn)知集漾，從而導(dǎo)致用戶在使用其他”正確 “的模式的時候，產(chǎn)生不適锉罐。

用表示“更多”含義的三個點(diǎn)帆竹，來代替“+”這個圖標(biāo)，會更加恰當(dāng)一點(diǎn)吧脓规？

4.拖拽的圖標(biāo)

文章提到一點(diǎn)比較具備參考意義栽连，就是拖拽的圖標(biāo)跟傳統(tǒng)的“漢堡包”菜單的圖標(biāo)太相似了，都是三條橫條。所以在設(shè)計的時候秒紧，剛好應(yīng)用中有拖拽的操作绢陌，這個操作又在很淺的層級就可以進(jìn)行拖拽的話，那么建議把“漢堡包”菜單的圖標(biāo)熔恢，前面再加三個點(diǎn)脐湾，來進(jìn)行區(qū)分比較妥當(dāng)。

總結(jié)：

這篇文章從可用性測試的角度來對界面元素設(shè)計進(jìn)行分析叙淌，而且分析得很透徹很詳細(xì)秤掌，也給出了相應(yīng)地優(yōu)化方案。但是在平時的設(shè)計工作當(dāng)中鹰霍，這類非常細(xì)小的問題闻鉴，好像大家都不太在乎，也懶得去糾結(jié)茂洒。但是我想說孟岛，要成為一名優(yōu)秀的交互設(shè)計師，這樣的精神實在是必須要具備督勺。如果一個細(xì)節(jié)可以放棄渠羞，那么整個應(yīng)用的更多細(xì)節(jié)都會被放棄掉，從而設(shè)計也就沒有用戶體驗而言了智哀。關(guān)注用戶次询，關(guān)注細(xì)節(jié)，多點(diǎn)進(jìn)行可用性測試盏触。