最新中文字幕免费看影视,在线观看国产一区二区三区,在线欧美日韩制服国产,中文字幕,亚洲一区,制服欧美激情丝袜综合色

新聞資訊

精品主題,實(shí)戰(zhàn)科普,最新行業(yè)熱點(diǎn)話題,隨時(shí)掌握云上咨訊。

超干貨!iOS中4種UI元素的可用性問題及優(yōu)化建議
來源:中科服    發(fā)布時(shí)間:2015-08-04    文章分類:行業(yè)動(dòng)態(tài)     分享:

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

 

一方面,設(shè)計(jì)師和開發(fā)者可以比較輕松的上手打造在質(zhì)量方面至少符合“基礎(chǔ)標(biāo)準(zhǔn)”的產(chǎn)品,而無需重新思考和驗(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)楣俜剿龅臏y(cè)試不夠徹底,或者說這些元素和模式是用來解決某一類設(shè)計(jì)問題的最基礎(chǔ)最具適用性的解決方案。

 

本文當(dāng)中提到的4UI元素都是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)致的可用性問題。

 

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

?頁(yè)碼指示符(小圓點(diǎn))

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

?加號(hào)(+)圖標(biāo)

?拖拽圖標(biāo)

 

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

 

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

 

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

 

很多app或網(wǎng)頁(yè)都會(huì)使用這種元素來暗示用戶可以通過橫向滑動(dòng)來查看同級(jí)的其他頁(yè)面,也有一些是將其用在界面中特定的區(qū)域來暗示其中存在更多內(nèi)容。不能否認(rèn),這種形式的頁(yè)碼指示符在app和移動(dòng)Web的界面設(shè)計(jì)當(dāng)中都很流行,但是要知道,它同時(shí)也是用戶最容易忽略掉的界面元素之一。在我們所做的一系列可用性測(cè)試當(dāng)中,用戶經(jīng)常難以發(fā)現(xiàn)這些在尺寸上過于微小的圓點(diǎn),進(jìn)而錯(cuò)失了那些可以通過橫滑來查看到的內(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圖上,使這些本就難以被留意到元素不知不覺的融入到背景當(dāng)中,進(jìn)一步降低了可發(fā)現(xiàn)性。如果一定要這樣做,那么必須確保圓點(diǎn)和背景色之間始終具有較高的對(duì)比度,最好是使用純色背景。

 

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

 

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

?首先考慮你的內(nèi)容是否適宜通過橫滑的方式依次瀏覽,還是可以通過更復(fù)雜同時(shí)也更靈活的其他導(dǎo)航方式進(jìn)行架構(gòu)。

?對(duì)于橫滑瀏覽的內(nèi)容,盡量采用右邊緣露出一部分內(nèi)容的方式來加強(qiáng)對(duì)于“更多”的暗示,而不要單純依靠頁(yè)碼指示符。

 

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

 

iOS中很多代表“完成”操作的按鈕時(shí)常被置于導(dǎo)航欄當(dāng)中右側(cè)的位置,包括表單界面的提交按鈕也是如此。如今這種模式也開始潛移默化的影響到一些Android平臺(tái)里的app。

 

根據(jù)我們的可用性測(cè)試所得出的結(jié)論,不說跨平臺(tái)的影響力,單就iOS本身,我們也不建議將“完成”性質(zhì)的按鈕放在這里,原因很簡(jiǎn)單,將最終操作放置在界面頂部,有悖于自上而下的信息流向。用戶在填寫表單或編輯內(nèi)容時(shí),交互行為通常是由上至下的,當(dāng)他們即將完成的時(shí)候,也會(huì)預(yù)期在結(jié)尾處看到結(jié)束處理的操作。多數(shù)情況下,當(dāng)人們無法在結(jié)尾處找到這樣的功能時(shí),便會(huì)產(chǎn)生迷惑并開始四處尋找。

 

在下面的案例當(dāng)中(左側(cè)是Pinkberry,右側(cè)是Nordstorm),用戶填寫完表單之后需要點(diǎn)擊登錄或下單按鈕。這樣的布局就是我們所說的有悖于自上而下信息流向的形式,用戶的全部注意力都隨著表單而逐漸下移,最終發(fā)現(xiàn)在結(jié)尾的地方?jīng)]有任何完成操作,剩下的就是茫然無措。要知道,即使是在手機(jī)這樣的小屏設(shè)備上,四處尋找某種UI元素也是需要耗費(fèi)很多額外的注意力成本的;將完成按鈕直接放置在內(nèi)容底部是最符合直覺的做法。

 

當(dāng)然,從另外一個(gè)方面講,將完成按鈕置于導(dǎo)航欄當(dāng)中的模式也有其自身的優(yōu)勢(shì):

 

因?yàn)閷?dǎo)航欄是固定在頂部的,所以用戶在編輯內(nèi)容時(shí)可以隨時(shí)點(diǎn)擊到,而且當(dāng)內(nèi)容區(qū)域較長(zhǎng)時(shí),放置在頂部的按鈕也不會(huì)被鍵盤所遮擋。如果用戶確實(shí)無需完成全部?jī)?nèi)容的填寫便可以進(jìn)行完成操作,那么你可以考慮將完成按鈕固定在底部,并會(huì)隨著鍵盤的起落而相應(yīng)的移動(dòng)。

 

這種方式的缺點(diǎn)是會(huì)占用一定的縱向空間,但優(yōu)點(diǎn)也是很明顯的:

 

即符合直覺,又隨時(shí)保持可見,同時(shí)相比于頂部右端的位置來說,更易單手點(diǎn)擊操作。

 

 

鑒于導(dǎo)航欄里的完成按鈕所存在的一些可用性問題,我們建議:將按鈕置于內(nèi)容底部;如果內(nèi)容較長(zhǎng),可以嘗試將按鈕位置固定,并使其不會(huì)被鍵盤遮擋,以便用戶可以隨時(shí)點(diǎn)擊。

 

3.加號(hào)(+)圖標(biāo)

 

見過的app越多,你越會(huì)發(fā)現(xiàn),在不同的環(huán)境當(dāng)中,加號(hào)圖標(biāo)往往會(huì)代表各種不同的功能。當(dāng)加號(hào)位于導(dǎo)航欄當(dāng)中時(shí),通常表示“新建”功能;如果被放在列表單元當(dāng)中,要么是表示將這條內(nèi)容添加到某種分組當(dāng)中,要么是用來展開詳情。無論是在同一個(gè)app的不同界面,還是在不同的app之間,同一元素承載著不同的功能含義,這對(duì)于用戶的認(rèn)知與記憶都是一種負(fù)擔(dān)。

 

加號(hào)圖標(biāo)的可用性在很大程度上取決于它在界面當(dāng)中所處的位置。當(dāng)位于導(dǎo)航欄時(shí),加號(hào)通常能夠表達(dá)準(zhǔn)確的含義,即創(chuàng)建一條與主要內(nèi)容相同性質(zhì)的新內(nèi)容。然而,當(dāng)加號(hào)出現(xiàn)在主要內(nèi)容當(dāng)中時(shí),多種含義的可能就會(huì)給用戶帶來迷惑。

 

舉個(gè)例子,Any.do曾經(jīng)的一個(gè)版本當(dāng)中,會(huì)在待辦事項(xiàng)分組標(biāo)題右側(cè)放置加號(hào)圖標(biāo)。在這個(gè)環(huán)境下,你不知道點(diǎn)擊這個(gè)圖標(biāo)是會(huì)展開其中的全部事項(xiàng),還是會(huì)在這個(gè)分組中創(chuàng)建新事項(xiàng)。在最近的一個(gè)版本中,他們將加號(hào)放在了界面右上角,明確的用于創(chuàng)建新事項(xiàng)。

 

無論是Web還是移動(dòng)app,位于界面內(nèi)容當(dāng)中的加號(hào)圖標(biāo)通常用來表示該內(nèi)容可以擴(kuò)展查看更多信息,有時(shí)還會(huì)搭配箭頭圖標(biāo)同時(shí)使用。通過加號(hào)來觸發(fā)其他類型的功能很可能破壞用戶所習(xí)慣的預(yù)期。例如,在LinkedInapp當(dāng)中,取決于所在位置的不同,嵌套在圓環(huán)當(dāng)中的加號(hào)圖標(biāo)代表著關(guān)注或是加入某小組的功能。在我們的可用性測(cè)試當(dāng)中,很多用戶抱著查看詳情的預(yù)期去點(diǎn)擊該按鈕,卻發(fā)現(xiàn)自己關(guān)注了對(duì)方動(dòng)態(tài),進(jìn)而感到莫名其妙。

 

返回列表

你知道你的Internet Explorer是過時(shí)了嗎?

為了得到我們網(wǎng)站最好的體驗(yàn)效果,我們建議您升級(jí)到最新版本的Internet Explorer或選擇另一個(gè)web瀏覽器.一個(gè)列表最流行的web瀏覽器在下面可以找到.