編者按：這周又是一篇來(lái)自Nielsen Norman Group的文章。供參考吧，這種文章背后的思維模式甚至是精神才是最該汲取的，內(nèi)容本身反而是其次；這樣的東西看的越多，實(shí)踐當(dāng)中具有代表性的產(chǎn)品案例經(jīng)歷的越多，你越會(huì)發(fā)現(xiàn)，設(shè)計(jì)這種事，在很多時(shí)候，無(wú)明無(wú)暗，無(wú)是無(wú)非，有的只是特定的產(chǎn)品、特定的資源、特定的情境、特定的用戶群體，以及所有這些因素混雜在一起之后擺在面前的需要不斷權(quán)衡、爭(zhēng)取或妥協(xié)的各種可能性。下面進(jìn)入正文。

那些大的軟件公司，譬如Apple、微軟、Google等等，通常會(huì)為第三方app設(shè)計(jì)師們提供一系列設(shè)計(jì)指南。這樣做的目的在于：

一方面，設(shè)計(jì)師和開(kāi)發(fā)者可以比較輕松的上手打造在質(zhì)量方面至少符合“基礎(chǔ)標(biāo)準(zhǔn)”的產(chǎn)品，而無(wú)需重新思考和驗(yàn)證全新的設(shè)計(jì)模式及UI元素。 另一方面，如果某一平臺(tái)當(dāng)中的所有產(chǎn)品都遵從統(tǒng)一的設(shè)計(jì)規(guī)則，那么用戶也將受益于界面外觀與互動(dòng)方式的一致性。

遵守設(shè)計(jì)指南，這幾乎是一條鐵打的規(guī)矩。但是在實(shí)際當(dāng)中，“官方標(biāo)準(zhǔn)”未必能很好的適用于各種情況。我們不清楚為什么有些元素會(huì)出現(xiàn)在設(shè)計(jì)指南當(dāng)中，也許是因?yàn)楣俜剿�做的測(cè)試不夠徹底，或者說(shuō)這些元素和模式是用來(lái)解決某一類(lèi)設(shè)計(jì)問(wèn)題的最基礎(chǔ)最具適用性的解決方案。

本文當(dāng)中提到的4種UI元素都是Apple慣于在自家app中使用的，其中的一些也出現(xiàn)在了官方的設(shè)計(jì)規(guī)范當(dāng)中；自然，不計(jì)其數(shù)的設(shè)計(jì)師也會(huì)跟從這些用法。而另一方面，我們（Nielsen Norman Group）在一次又一次的可用性測(cè)試當(dāng)中也真真實(shí)實(shí)的發(fā)現(xiàn)了這些元素所導(dǎo)致的可用性問(wèn)題。

說(shuō)不定Apple的諸神會(huì)用雷劈我們，但我們?nèi)匀唤ㄗh各位設(shè)計(jì)師在使用這些UI元素時(shí)多加考慮，或嘗試優(yōu)化/替代方案，因?yàn)檫@些元素在可用性測(cè)試當(dāng)中的表現(xiàn)確實(shí)存在問(wèn)題：

• 頁(yè)碼指示符(小圓點(diǎn))
• 導(dǎo)航欄里的完成按鈕
• 加號(hào)(+)圖標(biāo)
• 拖拽圖標(biāo)

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

iOS的頁(yè)碼指示符，在形式上就是橫排的圓點(diǎn)，用來(lái)表示一系列可以通過(guò)橫滑瀏覽的分頁(yè)視圖。其中，代表當(dāng)前視圖的圓點(diǎn)處于高亮狀態(tài)，其他的則是灰暗的半透明狀態(tài)。

iOS系統(tǒng)首屏，頁(yè)碼指示符用來(lái)表示頁(yè)面總數(shù)以及當(dāng)前所在位置。我們時(shí)常見(jiàn)到這種通過(guò)系統(tǒng)首屏來(lái)演示頁(yè)碼指示符使用方式的范例，實(shí)際上，頁(yè)碼指示符能完美適用的界面環(huán)境并不多，而系統(tǒng)首屏正是其中之一，因?yàn)橛脩裘鞔_的知道自己的手機(jī)里裝有很多app以至于第一屏無(wú)法完整呈現(xiàn)，需要通過(guò)橫向滑動(dòng)查看更多。

很多app或網(wǎng)頁(yè)都會(huì)使用這種元素來(lái)暗示用戶可以通過(guò)橫向滑動(dòng)來(lái)查看同級(jí)的其他頁(yè)面，也有一些是將其用在界面中特定的區(qū)域來(lái)暗示其中存在更多內(nèi)容。不能否認(rèn)，這種形式的頁(yè)碼指示符在app和移動(dòng)Web的界面設(shè)計(jì)當(dāng)中都很流行，但是要知道，它同時(shí)也是用戶最容易忽略掉的界面元素之一。在我們所做的一系列可用性測(cè)試當(dāng)中，用戶經(jīng)常難以發(fā)現(xiàn)這些在尺寸上過(guò)于微小的圓點(diǎn)，進(jìn)而錯(cuò)失了那些可以通過(guò)橫滑來(lái)查看到的內(nèi)容或功能入口。所以，我們認(rèn)為圓點(diǎn)形式的頁(yè)碼指示符至少不能被用作關(guān)鍵功能和內(nèi)容的唯一導(dǎo)航方式。

雖然iOS允許你將這些圓點(diǎn)渲染成其他顏色，但想要使如此微小的元素一目了然的突顯在界面當(dāng)中還是非常困難的，除非你能確保將其置于高對(duì)比度的純色背景上。很多產(chǎn)品會(huì)將圓點(diǎn)們放置在五顏六色的banner圖上，使這些本就難以被留意到元素不知不覺(jué)的融入到背景當(dāng)中，進(jìn)一步降低了可發(fā)現(xiàn)性。如果一定要這樣做，那么必須確保圓點(diǎn)和背景色之間始終具有較高的對(duì)比度，最好是使用純色背景。

iOS的Zappos，在第一張底圖上，頁(yè)碼指示符已經(jīng)很弱了，而在右側(cè)第二張底圖上，幾乎完全消失了。

有一部分產(chǎn)品則在iOS的基礎(chǔ)上進(jìn)一步自由發(fā)揮，將圓點(diǎn)改為方形或其他形狀，布局上也更加隨意。不妨設(shè)想，即便用戶已經(jīng)習(xí)慣了iOS的小圓點(diǎn)模式，現(xiàn)在他們就算發(fā)現(xiàn)了界面中的這些小元素，還要猜想這些方塊會(huì)不會(huì)就是代表著以前的那些小圓點(diǎn) – 可發(fā)現(xiàn)性沒(méi)有顯著提升，同時(shí)還造成了認(rèn)知上的困難。如果要使用頁(yè)碼指示符，盡可能使用用戶已經(jīng)熟悉的圓點(diǎn)模式，并將其居中的置于對(duì)應(yīng)內(nèi)容的下方。

Android中的Fab，借鑒了iOS模式的小圓點(diǎn)，但將其置于了內(nèi)容的右側(cè)，相比于居中的位置，更難被發(fā)現(xiàn)。

即便用戶能夠注意到頁(yè)碼指示符，這里還有一些潛在問(wèn)題，譬如小圓點(diǎn)們可以讓用戶知道有多少同類(lèi)型的信息視圖以及當(dāng)前所處位置，但無(wú)法提供任何與內(nèi)容本身相關(guān)的信息。此外，用戶對(duì)互動(dòng)的控制權(quán)也非常弱，必須按照次序逐一瀏覽，無(wú)法直接跳轉(zhuǎn)。所以，如果在你的需求當(dāng)中這些體驗(yàn)要素比較重要，那么小圓點(diǎn)恐怕不是你的最佳選擇。

鑒于小圓點(diǎn)頁(yè)碼指示符所存在的一些可用性問(wèn)題，我們建議：

• 首先考慮你的內(nèi)容是否適宜通過(guò)橫滑的方式依次瀏覽，還是可以通過(guò)更復(fù)雜同時(shí)也更靈活的其他導(dǎo)航方式進(jìn)行架構(gòu)。
• 對(duì)于橫滑瀏覽的內(nèi)容，盡量采用右邊緣露出一部分內(nèi)容的方式來(lái)加強(qiáng)對(duì)于“更多”的暗示，而不要單純依靠頁(yè)碼指示符。

標(biāo)簽： APP優(yōu)化 UI優(yōu)化 性能優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。