您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

百度MUX:這只是一個箭頭

足夠簡單的圖形承載著豐富而又抽象的概念。如果追溯起來,箭頭符號的現(xiàn)實(shí)原型就是弓箭的箭頭。所以箭頭指向的方向意味著獵物,意味著目標(biāo)?,F(xiàn)代社會的我們能夠清楚的理解箭頭的指示作用,我相信這一點(diǎn)與百萬年前穿著獸皮的祖先舉著弓箭追擊獵物求生的經(jīng)驗(yàn)有著遺傳意義上的必然聯(lián)系。那種強(qiáng)烈的想獲取食物的求生意愿,對作為獵物的目標(biāo)的渴望,一代一代的遺傳下來。所以作為現(xiàn)代人的我們握著鼠標(biāo),盯著屏幕上來回移動的指示箭頭,會覺得這個圖標(biāo)理所當(dāng)然。甚至于眼心手一體,忽略了這個再正常不過的存在。

jt-001

最好的界面是沒有界面,最好的圖標(biāo)是用戶看到這個圖標(biāo)的時(shí)候意識不到這是個圖標(biāo)而直接得到了圖標(biāo)背后的信息。這就好比英文學(xué)到一定程度之后,讀過一篇文章再回憶起來會只記得文章的意思而不記得文章是用中文還是英文寫的。語言是為了溝通與交流而存在,無論是計(jì)算機(jī)語言還是圖形語言,都是語言的一種。如果我們可以像潘多拉星球上的那維族人一樣可以通過辮子上的神經(jīng)元交流,那么也就不會有那么多誤解與紛爭,也就不需要那么多復(fù)雜的語言了。

作為語言的不同形式,圖形相較于文字也有著不可否認(rèn)的優(yōu)勢。比如它像音樂一樣沒有國界的限制,它在傳達(dá)信息時(shí)更加直觀、具體。自從2007年iPhone橫空出世之后,智能手機(jī)的普及讓App逐漸逐漸取代了網(wǎng)址的作為互聯(lián)網(wǎng)入口的作用。移動應(yīng)用的啟動圖標(biāo)占領(lǐng)了用戶的桌面,如何讓用戶在一屏一屏的圖標(biāo)海中迅速發(fā)現(xiàn)自己的App并且讓用戶一眼就能搞懂自己的產(chǎn)品是做什么用的就變得非常重要。啟動圖標(biāo)雖然沒有被稱之為Logo,但他確實(shí)發(fā)揮著Logo的作用。

 

具象的箭頭:箭頭圖標(biāo)與交互路徑

移動App相對于PC站點(diǎn),有一個非常重要的特點(diǎn)在于移動App的輕量化。輕量化和即時(shí)性是這個時(shí)代的特點(diǎn)。深度的、需要長時(shí)間集中精力才能搞定的事情通常被放到PC上來做。用戶在手機(jī)上習(xí)慣就一個目標(biāo)打開一個App然后迅速完成任務(wù)后關(guān)閉。用戶在移動端的平均使用時(shí)長是遠(yuǎn)低于PC端的。PC端占據(jù)著用戶的工作時(shí)間,移動端占據(jù)著用戶的碎片時(shí)間。

jt-002

 

輕量化的特點(diǎn)要求移動應(yīng)用需要具備清晰易懂的信息架構(gòu)與交互方式,頁面層級深度不能給用戶帶來困擾和負(fù)擔(dān)。在這里我把這種合理設(shè)置頁面與頁面之間的流轉(zhuǎn)關(guān)系的設(shè)計(jì)工作稱之為交互路徑的設(shè)計(jì)。那么頁面中的“返回”按鈕、“下一步”按鈕在產(chǎn)品的交互路徑上起到路標(biāo)式的作用,而這兩個按鈕通常都有箭頭圖標(biāo)輔助或代替。

如果把一個個頁面理解為交互路徑上到達(dá)的一個個房間,那么房間越多,用戶可能會越焦慮,在用戶進(jìn)行的當(dāng)前任務(wù)之外,始終有一個問題需要面對:“我怎么回去?”

這個“返回”,不僅僅意味著從哪兒來的回哪兒去,有時(shí)候也意味著我要回到上一級目錄去,有時(shí)候則意味著退出某項(xiàng)任務(wù),有時(shí)候則意味著類似Ctrl+Z式的撤銷操作。所以說,返回按鈕就像是用戶手里的一根兒救命稻草,像是安全逃生通道的綠色的EXIT標(biāo)識,它給用戶帶來一種潛在的安全感。所以在任何一個頁面中充分考慮當(dāng)前任務(wù)的退出與返回是交互設(shè)計(jì)的一個非?;镜墓ぷ?。

微信這樣的超級App復(fù)合了社交、通訊錄、瀏覽器、支付等多個功能,而它又不支持多線程后臺任務(wù)(當(dāng)然如果支持的話可能會更復(fù)雜),那么假如我在某一項(xiàng)任務(wù)(比如瀏覽朋友圈文章)時(shí),另外一項(xiàng)任務(wù)(比如有人給我發(fā)消息了)突然出現(xiàn),這時(shí)我打開聊天界面之后怎么返回到剛才瀏覽的文章的頁面上去呢?

 

圓形的箭頭圖標(biāo):同步與刷新

數(shù)據(jù)的上傳(Upload)與下載(Download)其實(shí)本沒有上與下的方向概念,只是一種客戶端與服務(wù)端的數(shù)據(jù)交互。上傳是要把用戶的數(shù)據(jù)傳到服務(wù)器,下載是將服務(wù)器的數(shù)據(jù)傳給用戶。上與下的概念只是方便用戶理解而設(shè)定的一個概念模型。這是一個非常成功的概念模型,使后來“云”的概念變得容易理解。

與刷新和同步相比,上傳與下載更偏向于用戶自發(fā)的一種主動行為。刷新意味著重新下載新的內(nèi)容,所以刷新圖標(biāo)通常是一個圓形的向下的圖標(biāo)。同步則意味著上傳新的內(nèi)容或同時(shí)下載新的內(nèi)容,以與服務(wù)器上的內(nèi)容保持一致。所以通用的同步圖標(biāo)由兩個圓形的箭頭組成。

圓形的刷新圖標(biāo)和同步圖標(biāo),還附帶著一個可旋轉(zhuǎn)的心理模型的預(yù)期。就像iOS系統(tǒng)更新時(shí)的齒輪圖標(biāo)一樣,這種預(yù)期可能在潛意識中存在,一旦旋轉(zhuǎn)動畫出現(xiàn)時(shí),帶給用戶一種“本該如此的驚喜”的感覺。同時(shí),一個旋轉(zhuǎn)的圓圈通常用來表示加載進(jìn)程,加載與刷新的相關(guān)性,也體現(xiàn)在了兩個圖標(biāo)的表達(dá)上。


輔助表意的下箭頭

一個圓形的用戶頭像,右側(cè)有一個向下的右箭頭,這是現(xiàn)在用戶界面中一種常見的表現(xiàn)形式,大家都知道點(diǎn)開這個向下的小箭頭你會在用戶頭像下方得到一個關(guān)于用戶的菜單。

jt-003

 

也許這種形式并不是那么普遍,但文字與下箭頭的結(jié)合已經(jīng)成為了一種通用樣式。組合形式其實(shí)也有不少,但這些形式之所以能夠迅速被用戶認(rèn)同變成零學(xué)習(xí)成本的東西,功勞在于用戶界面中一個基礎(chǔ)的組件:下拉菜單(Droplist)。下拉菜單與普通的文本輸入框控件有什么區(qū)別?只是多了一個箭頭。

這里這些箭頭起著吸引注意力和輔助提示兩個作用,首先文字與圖標(biāo)的組合形式會比單純的文字鏈接更能吸引用戶的注意力,并且文字鏈接的通常用來實(shí)現(xiàn)頁面之間的跳轉(zhuǎn);其次文字與箭頭圖標(biāo)的組合形式提示這里點(diǎn)開還有新的內(nèi)容。


看似友好的右箭頭

箭頭圖標(biāo)的第一個引申意是方向,在此基礎(chǔ)上繼續(xù)引申出了指示(提示)的含義。右箭頭和表示返回的左箭頭相呼應(yīng),通常在界面中提示用戶這里將會前進(jìn)到下一個頁面。

jt-004

在智能手機(jī)發(fā)展初期,右箭頭在移動端的交互界面中與返回箭頭一樣,有著舉足輕重的作用。盡管在有些時(shí)候我們覺得沒有這個右箭頭的提示用戶也會理解一個列表頁,但iOS還是保留了它。可以理解,附帶右箭頭的列表相對于沒有右箭頭的,肯定會帶來更強(qiáng)的指示性。

在界面中怎樣讓用戶明白橫向滑動還可以查看更多內(nèi)容?你可以加一個小巧精致的箭頭指向右側(cè),提示用戶右側(cè)還有東西哦,不信你來點(diǎn)我呀。

各種機(jī)器、各種設(shè)備發(fā)出嗶嗶嗶之類提示聲音起初起著友好的提示作用,但這種聲音變得無處不在之后就會讓人心煩意亂?,F(xiàn)實(shí)生活中滿大街都是箭頭,給你指示不同的路。有時(shí)候能幫上大忙,有時(shí)候卻搞的你暈頭轉(zhuǎn)向。這種暈頭轉(zhuǎn)向的感覺在某些產(chǎn)品中也可以找到,太多的界面里充斥著各種各樣、各種方向的箭頭。箭頭符號有很好的提示效果,但用的時(shí)候還是要慎重。也許我們應(yīng)該多問問自己,真的需要這個箭頭嗎?

jt-005

對比上圖這兩個設(shè)計(jì),左側(cè)的界面依賴右箭頭給用戶提示右邊還有內(nèi)容,右側(cè)的界面依靠遮擋住的未顯示完整的圖片來告訴用戶右邊還有更多內(nèi)容。哪個更高明一些呢?

擋住一部分,暗示后面還有內(nèi)容。為什么用戶一看就能明白呢?這里利用了用戶的生活經(jīng)驗(yàn)。諾曼博士在《設(shè)計(jì)心理學(xué)》中提到的社會化語義符號,就是這個意思。運(yùn)用用戶的生活經(jīng)驗(yàn),盡量少的在界面上添加不必要的元素,大家的眼睛都夠累的了,盡量讓用戶把注意力集中在實(shí)際的內(nèi)容上吧!

是的,這只是一個箭頭,一個最常見不過的圖標(biāo),但如何把它放在合適的位置,如何不過度的濫用這個符號,卻是我們每一位設(shè)計(jì)師不得不每天面對的問題。

[教程作者:百度MUX]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di3366.html
優(yōu)酷視頻網(wǎng)站柵格化設(shè)計(jì)詳解
Get it!徹底搞懂UI和WEB設(shè)計(jì)中的尺寸單位
圖趣網(wǎng)微信
建議反饋
×