UI/UX 設(shè)計原則-視覺指示在現(xiàn)實生活中的延伸

視覺指示(Visual Indicators) 可以讓某些物品在蕓蕓眾生之中突顯出來。它們不會要求用戶采取行動,而是讓某些值得注意的事項,獲得關(guān)注的溝通工具。指示不會一直顯示,只在某些條件下才會出現(xiàn)。指示可能會用圖示、排印風格、放大、顏色變化和動畫等方式傳達訊息。

在互聯(lián)網(wǎng)的世界,到處都可以看到指示的范例。比如Gmail ,用回紋針顯示帶有附件的郵件,還有用黃色五角星標示已經(jīng)收藏起來的討論。Todoist 的使用者用勾選框的顏色來區(qū)分優(yōu)先順序,而且也很容易看出哪些有備忘記錄。iOS 的App 在下載更新時,圖示會覆蓋一層進度指示,讓使用者知道還要下載多久。

我喜歡研究UX 和ui界面設(shè)計,是因為原則和元素可以延伸出互聯(lián)網(wǎng)產(chǎn)品本身。我們的周圍到處都有像直觀功能(affordance) 和符號(signifier) 的指示,傳達它們所代表物體的信息。最明顯的視覺指示方式是加上文字,例如超市里,把東西標上「打八折!」的標簽。

在這篇文章里,我們將舉一些現(xiàn)實生活中的例子,沒有文字的指示,而是顏色、方向和姿態(tài)等來給出視覺指示。

狀態(tài)指示

系統(tǒng)狀態(tài)提示是Jakob Nielsen的用戶界面設(shè)計的10個易用性法則之一,其中提到:任何系統(tǒng)都要一直讓使用者知道現(xiàn)在發(fā)生什么事情。在現(xiàn)實世界,到處可見以視覺指示傳達狀態(tài)的情況,而且用途相似。

物品:信箱

指示:旗標位在「往上」的位置[收信/寄信的狀態(tài)]

對象:郵差

信息:「嘿,這里有信件要寄!」

物品:餐廳帳單

指示:卡片伸出帳單夾[結(jié)帳狀態(tài)]

對象:服務(wù)生

信息:「可以進行結(jié)帳了!」

 

物品:飛機引擎

指示:旋轉(zhuǎn)中的螺旋圖像[運轉(zhuǎn)/關(guān)閉狀態(tài)]

對象:機場地勤人員

信息:「小心!這架飛機的引擎啟動了?!?

 

進度指示

還要[增加] 多少,[此物品] 才會[完成]?進度指示用來傳達用戶距離流程結(jié)束還剩多少時間或步驟,這在互聯(lián)網(wǎng)產(chǎn)品里很常見。而在現(xiàn)實世界,它們以顯眼的記號傳達某種狀態(tài)還剩下多少份量或時間,或是還要多少行動。

物品:書

指示:插在某一頁的書簽[進度]

對象:讀者

信息:「這本書你大約已經(jīng)看完一半啦。」

物品:腳踏車煞車皮

指示:溝槽的消耗量[剩下可用量]

對象:腳踏車騎行者

信息:「上面的溝槽幾乎不見了。該換煞車皮咯!」

物品:牛油果

指示:梗底下的顏色[成熟度顏色]

對象:正在購物的人

信息:咖啡色=「我已經(jīng)熟透了或者被碰傷了。」綠色=「我熟了,可以吃了!」

 

個人喜好

我一直在尋找能夠讓問題在提出之前就獲得答案的創(chuàng)意方式。事先預測人們在尋找的物品,就可以免于造成潛在的困惑。我發(fā)現(xiàn)以下指示所傳達的訊息,可以不說出任何一個字,就有助于區(qū)分其他人和我自己之間的界線。

物品:啤酒罐

指示:把罐子凹下去[所有權(quán)]

信息:「這不是你的啤酒?!?

補充一下:酒杯上的裝飾小物(還有毛巾上的吊飾 )都是相同的手法!

物品:餐廳的茶壺

指示:擺放位置,還有把茶蓋斜放[空的/滿的狀態(tài)]

對象:服務(wù)生

信息:「茶壺已經(jīng)空了。請幫我們再倒些水?!?

物品:有領(lǐng)子的襯衫

指示:衣架鉤子的擺放方式[干凈/穿過的狀態(tài)]

對象:我自己!

信息:鉤子向外=「襯衫是干凈的。」鉤子向內(nèi)=「這件襯衫至少穿過一次了。」

 

這些指示并不會明講自己是什么東西。但是,只要在正確的情境之下,這些視覺線索可以幫助使用者辨別出物品的不同之處。至于使用者依賴這些傳遞信息的行為,則要看當下的需求或最終目標。不管是在互聯(lián)網(wǎng)或現(xiàn)實世界里,視覺指示都隨時在旁提供協(xié)助。

每天更新,
全站高品質(zhì)素材免費下載!