互聯網開(kāi)發&品牌全案設計(jì)

12年(nián) 實戰經驗,品質服務

這(zhè)隻是(shì)一(yī)個(gè)箭頭

2017-05-16 關鍵詞: 3176

箭頭符号可(kě)能(néng)是(shì)人(rén)類圖形史上(shàng)最偉大(dà)的(de)創造。
 
足夠簡單的(de)圖形承載著(zhe)豐富而又(yòu)抽象的(de)概念。如(rú)果追溯起來(lái),箭頭符号的(de)現(xiàn)實原型就(jiù )是(shì)弓箭的(de)箭頭。所以箭頭指向的(de)方向意味著(zhe)獵物(wù),意味著(zhe)目标。現(xiàn)代社會(huì)的(de)我們能§(néng)夠清楚的(de)理(lǐ)解箭頭的(de)指示作(zuò)用(yòng),我相(xiàng)信這(zhè)一(yī)點與百萬年(nián)前穿著(zhπe)獸皮的(de)祖先舉著(zhe)弓箭追擊獵物(wù)求生(shēng)的(de)經驗有(yǒu)著(zhe)遺傳意義←上(shàng)的(de)必然聯系。那(nà)種強烈的(de)想獲取食物(wù)的(de)求生(shēng)意♦願,對(duì)作(zuò)為(wèi)獵物(wù)的(de)目标的(de)渴望,一(yī)代一(yī)代的(de)遺傳下(xià)來(lái)。所以作(zuò)為(®wèi)現(xiàn)代人(rén)的(de)我們握著(zhe)鼠标,盯著(zhe)屏幕上(shàng)來(lái)回移動的(de)指示箭頭,會(huì)覺得(de)這(zhè)個(gè)圖♦标理(lǐ)所當然。甚至于眼心手一(yī)體(tǐ),忽略了(le)這(zhè)個(gè)再正常不(b ù)過的(de)存在。
 
最好(hǎo)的(de)界面是(shì)沒有(yǒu)界面,最好(hǎo)的(de)圖标是(shì)用(yòng)戶看(kàn)到(dào∑)這(zhè)個(gè)圖标的(de)時(shí)候意識不(bù)到(dào)這(zhè)是(shì)個(gè)圖标而直接得(de)到(dào)了(le)圖标背後的(de)信息。這(zhè)就(ji¶ù)好(hǎo)比英文(wén)學到(dào)一(yī)定程度之後,讀(dú)過一(yī)篇文(wén)章(zhāng)再回憶起來(lái)會(huì)隻記得(de)文(wéδn)章(zhāng)的(de)意思而不(bù)記得(de)文(wén)章(zhāng)是(shì)用(yòng)"中文(wén)還(hái)是(shì)英文(wén)寫的(de)。語言是(shì)為(wèi)了(le)溝通(tōng£)與交流而存在,無論是(shì)計(jì)算(suàn)機(jī)語言還(hái)是(shì)圖形語言,都(dōu)是(shπì)語言的(de)一(yī)種。如(rú)果我們可(kě)以像潘多(duō)拉星球上(shàng)的(de)那(nà)維族人(rén)一(♣yī)樣可(kě)以通(tōng)過辮子(zǐ)上(shàng)的(de)神經元交流,那(nà)麽也(yě)就(jiù)不(bù)會(huì)有(yǒu)那(nà)麽多(duō)誤解與紛争,也σ(yě)就(jiù)不(bù)需要(yào)那(nà)麽多(duō)複雜(zá)的(de)語言了(le)。
 
作(zuò)為(wèi)語言的(de)不(bù)同形式,圖形相(xiàng)較于文(wén)字也(yě)有(yǒu)著(zhe)不(bù)可(kě)否認的(de¥)優勢。比如(rú)它像音(yīn)樂(yuè)一(yī)樣沒有(yǒu)國(guó)界的(de)限制(zhì),它在傳達信息時(sσhí)更加直觀、具體(tǐ)。自(zì)從(cóng)2007年(nián)iPhone橫空(kōng)出世之後,智£能(néng)手機(jī)的(de)普及讓App逐漸逐漸取代了(le)網址的(de)作(zuò)為(wèi)互聯網入口的(de)作(zuò)用(yòng)。移動應用(yòng)的(de)啓動β圖标占領了(le)用(yòng)戶的(de)桌面,如(rú)何讓用(yòng)戶在一(yī)屏一(yī)屏的(de)圖标海(hǎi)中迅速發©現(xiàn)自(zì)己的(de)App并且讓用(yòng)戶一(yī)眼就(jiù)能(néng)搞懂(dǒng)自(zì)己的(de)産品是(shì)做(zuò)什(shén )麽用(yòng)的(de)就(jiù)變得(de)非常重要(yào)。啓動圖标雖然沒有(yǒu)被稱之為(wèi)Logo,但(dàn)他(tā)确實發揮著(→zhe)Logo的(de)作(zuò)用(yòng)。
 
具象的(de)箭頭:箭頭圖标與交互路(lù)徑

移動App相(xiàng)對(duì)于PC站(zhàn)點,有(yǒu)一(yī)個(gè)非常重要(yào)的(de)特點在于移動App的(de)輕量化(huà)。輕量化(huà)©和(hé)即時(shí)性是(shì)這(zhè)個(gè)時(shí)代的(de)特點。深度的(de)、需要(yào)長(cháng)時(×shí)間(jiān)集中精力才能(néng)搞定的(de)事(shì)情通(tōng)常被放(fàng)到(dào)PC上(shàng)來(lái)做(zuò)。用(yòng)戶在<手機(jī)上(shàng)習(xí)慣就(jiù)一(yī)個(gè)目标打開(kāi)一(yī)個(gè)App然後迅速完成任務後關閉。用(yòng)戶→在移動端的(de)平均使用(yòng)時(shí)長(cháng)是(shì)遠(yuǎn)低(dī)于PC端的(de)。PC端占據著(zhe)用(yòng)戶的(de)工(gōng)¥作(zuò)時(shí)間(jiān),移動端占據著(zhe)用(yòng)戶的(de)碎片時(shí)間(jiān)。

 
輕量化(huà)的(de)特點要(yào)求移動應用(yòng)需要(yào)具備清晰易懂(dǒng)的(de)信息架構與交互方式,頁面層級深度不(bù)能(néng)給用•(yòng)戶帶來(lái)困擾和(hé)負擔。在這(zhè)裡(lǐ)我把這(zhè)種合理(lǐ)設置頁₩面與頁面之間(jiān)的(de)流轉關系的(de)設計(jì)工(gōng)作(zuò)稱之為(wèi)交互路(lù)徑的(de)設計(jì)。那(nà)麽頁面中的(de)“返回”按鈕、“←下(xià)一(yī)步”按鈕在産品的(de)交互路(lù)徑上(shàng)起到(dào)路(lù)标式的(de)作δ(zuò)用(yòng),而這(zhè)兩個(gè)按鈕通(tōng)常都(dōu)有(yǒu)箭頭圖标輔助或代替。
 
如(rú)果把一(yī)個(gè)個(gè)頁面理(lǐ)解為(wèi)交互路(lù)徑上(shàng)到(dào)達的(de)一(yī)個(gè)個(gè)房(​fáng)間(jiān),那(nà)麽房(fáng)間(jiān)越多(duō),用(yòng)戶可(¥kě)能(néng)會(huì)越焦慮,在用(yòng)戶進行(xíng)的(de)當前任務之外(wà​i),始終有(yǒu)一(yī)個(gè)問(wèn)題需要(yào)面對(duì):“我怎麽回去(qù)?”
 
這(zhè)個(gè)“返回”,不(bù)僅僅意味著(zhe)從(cóng)哪兒(ér)來(lái)的(de)回哪兒(ér)去(qù),有(yǒu)時(shí)候®也(yě)意味著(zhe)我要(yào)回到(dào)上(shàng)一(yī)級目錄去(qù),有(yǒu)時(shí)候則意味著(z≈he)退出某項任務,有(yǒu)時(shí)候則意味著(zhe)類似Ctrl+Z式的(de)撤銷操作(zuβò)。所以說(shuō),返回按鈕就(jiù)像是(shì)用(yòng)戶手裡(lǐ)的(de)一(yī)根兒(ér↕)救命稻草(cǎo),像是(shì)安全逃生(shēng)通(tōng)道(dào)的(de)綠(lǜ)色的(de)EXIT标識,它給用(yòng)戶帶來(lái)一(yī)種€潛在的(de)安全感。所以在任何一(yī)個(gè)頁面中充分(fēn)考慮當前任務的(de)退出與返回是(shì)交互設計(jì)的(de)一(yī)個(gè)非常基本的(d e)工(gōng)作(zuò)。
 
微(wēi)信這(zhè)樣的(de)超級App複合了(le)社交、通(tōng)訊錄、浏覽器(qì)、支付等多(duō)個(gè)功能(néng),而它又(y™òu)不(bù)支持多(duō)線程後台任務(當然如(rú)果支持的(de)話(huà)可(kě)能(néng)會(huì)更複雜(zá)),那(nà)麽假如(rú)我☆在某一(yī)項任務(比如(rú)浏覽朋(péng)友(yǒu)圈文(wén)章(zhāng))時(shí),另外(wài)一(yī)項任務(比如(rú)有(yǒu)人(Ωrén)給我發消息了(le))突然出現(xiàn),這(zhè)時(shí)我打開(kāi)聊天界面之後怎麽返回到(dào)剛才浏覽的(de)文(wén)章(zhāng)&的(de)頁面上(shàng)去(qù)呢(ne)?
 
圓形的(de)箭頭圖标:同步與刷新

數(shù)據的(de)上(shàng)傳(Upload)與下(xià)載(Download)其實本沒有(yǒu)上(shàng)與下(xià)÷的(de)方向概念,隻是(shì)一(yī)種客戶端與服務端的(de)數(shù)據交互。上(shàng)傳是(s₽hì)要(yào)把用(yòng)戶的(de)數(shù)據傳到(dào)服務器(qì),下(xià)載是(shì)将服務器(qì)的(de)數(s&hù)據傳給用(yòng)戶。上(shàng)與下(xià)的(de)概念隻是(shì)方便用(yòng)戶理(lǐ)解而設定的(d↔e)一(yī)個(gè)概念模型。這(zhè)是(shì)一(yī)個(gè)非常成功的(de)概念模型,使α後來(lái)“雲”的(de)概念變得(de)容易理(lǐ)解。
 
與刷新和(hé)同步相(xiàng)比,上(shàng)傳與下(xià)載更偏向于用(yòng)戶自(zì)發的(de)一®(yī)種主動行(xíng)為(wèi)。刷新意味著(zhe)重新下(xià)載新的(de)內(nèi)容,所以刷新圖标通(tōng)常 是(shì)一(yī)個(gè)圓形的(de)向下(xià)的(de)圖标。同步則意味著(zhe)上(shàng)傳新的φ(de)內(nèi)容或同時(shí)下(xià)載新的(de)內(nèi)容,以與服務器(qì)上(shàng)的(de)內(nèi)容保持一(yī)緻。所以通(tōng)用(yòng&)的(de)同步圖标由兩個(gè)圓形的(de)箭頭組成。
 
圓形的(de)刷新圖标和(hé)同步圖标,還(hái)附帶著(zhe)一(yī)個(gè)可(kě)旋轉的(de)心理(lǐ)模型的(de)預期。就(jiù)像↓iOS系統更新時(shí)的(de)齒輪圖标一(yī)樣,這(zhè)種預期可(kě)能(néng)在潛意識中存在,一(yī)旦旋轉動畫(huà)出現(xiàn)時(shí),帶給用(yòn↔g)戶一(yī)種“本該如(rú)此的(de)驚喜”的(de)感覺。同時(shí),一(yī)個(gè)旋轉的≥(de)圓圈通(tōng)常用(yòng)來(lái)表示加載進程,加載與刷新的(de)相(xiàng)關性",也(yě)體(tǐ)現(xiàn)在了(le)兩個(gè)圖标的(de)表達上(shàng)。
 
輔助表意的(de)下(xià)箭頭

一(yī)個(gè)圓形的(de)用(yòng)戶頭像,右側有(yǒu)一(yī)個(gè)向下(xià)的(de)右箭頭,這(zhè)是(shì)現(xiàn↑)在用(yòng)戶界面中一(yī)種常見(jiàn)的(de)表現(xiàn)形式,大(dà)家(jiā)都(dōu)知(<zhī)道(dào)點開(kāi)這(zhè)個(gè)向下(xià)的(de)小(xiǎo)箭頭你(nǐ)會(huì)在用(‍yòng)戶頭像下(xià)方得(de)到(dào)一(yī)個(gè)關于用(yòng)戶的(de)菜單。

 
也(yě)許這(zhè)種形式并不(bù)是(shì)那(nà)麽普遍,但(dàn)文(wén)字與下(xià)箭頭的(de)結合已經成為(wèi)了( le)一(yī)種通(tōng)用(yòng)樣式。組合形式其實也(yě)有(yǒu)不(bù)少(shǎo),但(dàn)這(z±hè)些(xiē)形式之所以能(néng)夠迅速被用(yòng)戶認同變成零學習(xí)成本的(de)東(dōng)西(xī),功勞在于用(yòng)戶界面中一(yī)個(gè)基礎的(d÷e)組件(jiàn):下(xià)拉菜單(Droplist)。下(xià)拉菜單與普通(tōng)的(de)文(wén)本輸入框控件(jiàn)有(yǒu)什(shén)麽區(qū¥)别?隻是(shì)多(duō)了(le)一(yī)個(gè)箭頭。
 
這(zhè)裡(lǐ)這(zhè)些(xiē)箭頭起著(zhe)吸引注意力和(hé)輔助提示兩個(gè)作(zuò)↑用(yòng),首先文(wén)字與圖标的(de)組合形式會(huì)比單純的(de)文(wén)字鏈接更能(néng)吸引用≤(yòng)戶的(de)注意力,并且文(wén)字鏈接的(de)通(tōng)常用(yòng)來(lái)實現(xiàn)頁面之間(jΩiān)的(de)跳(tiào)轉;其次文(wén)字與箭頭圖标的(de)組合形式提示這(zhè)裡(lǐ)點開(kāi)還(hái)有(yǒu)新的≈(de)內(nèi)容。
 
看(kàn)似友(yǒu)好(hǎo)的(de)右箭頭

箭頭圖标的(de)第一(yī)個(gè)引申意是(shì)方向,在此基礎上(shàng)繼續引申出了(le)指示(提示)的(de)含義。右箭頭和(hé)表示返<回的(de)左箭頭相(xiàng)呼應,通(tōng)常在界面中提示用(yòng)戶這(zhè)裡(lǐ)∑将會(huì)前進到(dào)下(xià)一(yī)個(gè)頁面。

在智能(néng)手機(jī)發展初期,右箭頭在移動端的(de)交互界面中與返回箭頭一(yī)樣,有(yǒu)著(zhe)舉足輕重的(de)作(zuò)用(yò÷ng)。盡管在有(yǒu)些(xiē)時(shí)候我們覺得(de)沒有(yǒu)這(zhè)個(gè)右箭頭 的(de)提示用(yòng)戶也(yě)會(huì)理(lǐ)解一(yī)個(gè)列表頁,但(dàn)iOS還(hái)是(shì)保留了(le)它。可(kě)以理(lǐ)解,附帶右箭頭的(∞de)列表相(xiàng)對(duì)于沒有(yǒu)右箭頭的(de),肯定會(huì)帶來(lái)更強的(de)指示性。
 
在界面中怎樣讓用(yòng)戶明(míng)白(bái)橫向滑動還(hái)可(kě)以查看(kàn)更多(duō)內(nèi)容?你(nǐ)可(kě)以加一(yī)個(gè)小(xΩiǎo)巧精緻的(de)箭頭指向右側,提示用(yòng)戶右側還(hái)有(yǒu)東(dōng)西(xī)哦,不(bù)信你 (nǐ)來(lái)點我呀。
 
各種機(jī)器(qì)、各種設備發出哔哔哔之類提示聲音(yīn)起初起著(zhe)友(yǒu)好(hǎo)的(de)提示作(z uò)用(yòng),但(dàn)這(zhè)種聲音(yīn)變得(de)無處不(bù)在之後就(jiù)會(huì)讓人(rén)心煩意亂。現∑(xiàn)實生(shēng)活中滿大(dà)街(jiē)都(dōu)是(shì)箭頭,給你(nǐ)指示不(bù)同的(de)路(lù)。有(yǒ♥u)時(shí)候能(néng)幫上(shàng)大(dà)忙,有(yǒu)時(shí)候卻搞的(de)你(nǐ)暈頭轉向。這(zhè)種暈頭轉向的(de)感覺在某些(xiē)産品中©也(yě)可(kě)以找到(dào),太多(duō)的(de)界面裡(lǐ)充斥著(zhe)各種各樣、各種方向的(de)箭頭。₩箭頭符号有(yǒu)很(hěn)好(hǎo)的(de)提示效果,但(dàn)用(yòng)的(de)時(shí)候還(hái)是(shì)要(yào)ε慎重。也(yě)許我們應該多(duō)問(wèn)問(wèn)自(zì)己,真的(de)需要(yào)這(zhè)個(gè)箭頭嗎(ma)?
jt-005
對(duì)比上(shàng)圖這(zhè)兩個(gè)設計(jì),左側的(de)界面依賴右箭頭給用(yòng)戶提示右邊還(hái)有(yǒu)內(nèi)容,♠右側的(de)界面依靠遮擋住的(de)未顯示完整的(de)圖片來(lái)告訴用(yòng)戶右邊還(hái)有(yǒu )更多(duō)內(nèi)容。哪個(gè)更高(gāo)明(míng)一(yī)些(xiē)呢(ne)?
 
擋住一(yī)部分(fēn),暗(àn)示後面還(hái)有(yǒu)內(nèi)容。為(wèi)什(shén)麽用(yòng)戶一(yī)看(kàn)就(jiù)能(néng)明(m€íng)白(bái)呢(ne)?這(zhè)裡(lǐ)利用(yòng)了(le)用(yòng)戶的(de)生(shēng)±活經驗。諾曼博士在《設計(jì)心理(lǐ)學》中提到(dào)的(de)社會(huì)化(huà)語義符号,就(jiù)是(shì)這(zhè)個(gè→)意思。運用(yòng)用(yòng)戶的(de)生(shēng)活經驗,盡量少(shǎo)的(de)在界面上α(shàng)添加不(bù)必要(yào)的(de)元素,大(dà)家(jiā)的(de)眼睛都(dōu)夠累的(de)了(le),盡量讓用(yòng)戶把注意力集中在≈實際的(de)內(nèi)容上(shàng)吧(ba)!
 
是(shì)的(de),這(zhè)隻是(shì)一(yī)個(gè)箭頭,一(yī)個(gè)最常見(jiàn)不(bù)過的(de)圖标,但(d←àn)如(rú)何把它放(fàng)在合适的(de)位置,如(rú)何不(bù)過度的(de)濫用(yòng)這(zhè)個(gè)符号,卻是(shì)我們每一∏(yī)位設計(jì)師(shī)不(bù)得(de)不(bù)每天面對(duì)的(de)問(wèn)題。
欄目 案例 售後 電(diàn)話(huà)