箭頭符號:一個最常見卻不容忽視的圖標

2021-02-24 信息與互動設計

 歡迎大家踴躍投稿哦!

投稿郵箱:iidc@iidc.org.cn

箭頭符號可能是人類圖形史上最偉大的創造。

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


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

作為語言的不同形式,圖形相較於文字也有著不可否認的優勢。比如它像音樂一樣沒有國界的限制,它在傳達信息時更加直觀、具體。自從2007年iPhone橫空出世之後,智慧型手機的普及讓App逐漸逐漸取代了網址的作為網際網路入口的作用。移動應用的啟動圖標佔領了用戶的桌面,如何讓用戶在一屏一屏的圖標海中迅速發現自己的App並且讓用戶一眼就能搞懂自己的產品是做什麼用的就變得非常重要。啟動圖標雖然沒有被稱之為Logo,但他確實發揮著Logo的作用。

具象的箭頭:箭頭圖標與交互路徑

移動App相對於PC站點,有一個非常重要的特點在於移動App的輕量化。輕量化和即時性是這個時代的特點。深度的、需要長時間集中精力才能搞定的事情通常被放到PC上來做。用戶在手機上習慣就一個目標打開一個App然後迅速完成任務後關閉。用戶在移動端的平均使用時長是遠低於PC端的。PC端佔據著用戶的工作時間,移動端佔據著用戶的碎片時間。


輕量化的特點要求移動應用需要具備清晰易懂的信息架構與交互方式,頁面層級深度不能給用戶帶來困擾和負擔。在這裡我把這種合理設置頁面與頁面之間的流轉關係的設計工作稱之為交互路徑的設計。那麼頁面中的「返回」按鈕、「下一步」按鈕在產品的交互路徑上起到路標式的作用,而這兩個按鈕通常都有箭頭圖標輔助或代替。

如果把一個個頁面理解為交互路徑上到達的一個個房間,那麼房間越多,用戶可能會越焦慮,在用戶進行的當前任務之外,始終有一個問題需要面對:「我怎麼回去?」

這個「返回」,不僅僅意味著從哪兒來的回哪兒去,有時候也意味著我要回到上一級目錄去,有時候則意味著退出某項任務,有時候則意味著類似Ctrl+Z式的撤銷操作。所以說,返回按鈕就像是用戶手裡的一根兒救命稻草,像是安全逃生通道的綠色的EXIT標識,它給用戶帶來一種潛在的安全感。所以在任何一個頁面中充分考慮當前任務的退出與返回是互動設計的一個非常基本的工作。

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

圓形的箭頭圖標:同步與刷新

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

與刷新和同步相比,上傳與下載更偏向於用戶自發的一種主動行為。刷新意味著重新下載新的內容,所以刷新圖標通常是一個圓形的向下的圖標。同步則意味著上傳新的內容或同時下載新的內容,以與伺服器上的內容保持一致。所以通用的同步圖標由兩個圓形的箭頭組成。

圓形的刷新圖標和同步圖標,還附帶著一個可旋轉的心理模型的預期。就像iOS系統更新時的齒輪圖標一樣,這種預期可能在潛意識中存在,一旦旋轉動畫出現時,帶給用戶一種「本該如此的驚喜」的感覺。同時,一個旋轉的圓圈通常用來表示加載進程,加載與刷新的相關性,也體現在了兩個圖標的表達上。

輔助表意的下箭頭

一個圓形的用戶頭像,右側有一個向下的右箭頭,這是現在用戶界面中一種常見的表現形式,大家都知道點開這個向下的小箭頭你會在用戶頭像下方得到一個關於用戶的菜單。

也許這種形式並不是那麼普遍,但文字與下箭頭的結合已經成為了一種通用樣式。組合形式其實也有不少,但這些形式之所以能夠迅速被用戶認同變成零學習成本的東西,功勞在於用戶界面中一個基礎的組件:下拉菜單(Droplist)。下拉菜單與普通的文本輸入框控制項有什麼區別?只是多了一個箭頭。

這裡這些箭頭起著吸引注意力和輔助提示兩個作用,首先文字與圖標的組合形式會比單純的文字連結更能吸引用戶的注意力,並且文字連結的通常用來實現頁面之間的跳轉;其次文字與箭頭圖標的組合形式提示這裡點開還有新的內容。

看似友好的右箭頭

箭頭圖標的第一個引申意是方向,在此基礎上繼續引申出了指示(提示)的含義。右箭頭和表示返回的左箭頭相呼應,通常在界面中提示用戶這裡將會前進到下一個頁面。


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

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

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


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

擋住一部分,暗示後面還有內容。為什麼用戶一看就能明白呢?這裡利用了用戶的生活經驗。諾曼博士在《設計心理學》中提到的社會化語義符號,就是這個意思。運用用戶的生活經驗,儘量少的在界面上添加不必要的元素,大家的眼睛都夠累的了,儘量讓用戶把注意力集中在實際的內容上吧!

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

專委會微信公眾號文章來源於作者授權或者投稿文章,大部分轉載文章都儘量標明了出處以及作者信息,版權都歸作者所有,若涉及到版權問題,請添加微信:dajiangjuan聯繫刪除,謝謝!(有關投稿問題也可騷擾哦!)



相關焦點

  • 蘋果表情符號的製作:這些小圖標是怎麼來的?
    這也是一個讓他們成為一生的朋友的項目,是這些小小的圖標成功的關鍵。簡而言之,我就是那位實習生,Raymond就是我一輩子的好朋友和導師。在那3個月的時間裡,我們一起創作了其中使用最廣泛的一些emoji:笑哭,屎堆、紅心、晚會煙花等約460多個表情。後來,作為蘋果的全職員工,我甚至還自己又設計了一些。那是在2008年的夏天,距離我拿到羅德島設計學院(RISD)圖形設計碩士學位還有一年。
  • 最全的工業管道識別匯總(顏色、符號、相關知識)
    注意:(1)兩個色環標識之間的最小距離應為10-15m;(2)兩支柱之間至少有一個標識;(3)當多根管道排列在一起時,其色環的設置應該考慮整齊度和美觀性管道上的識別符號是對管道中的物質名稱、物質流向、物質工藝參數、管徑等內容的簡化和縮寫,以便於工作人員辨認。所以管道標誌的識別符號應符合以下要求:1、物質名稱的標識(1)採用物質全稱標識。比如:氮氣、硫酸、甲醇,等等。(2)採用化學分子式標識。
  • 越愛發表情符號的人,他們腦袋裡想的東西越汙!
    根據在線約會網站Match.com調查顯示,在簡訊中最經常使用表情符號的人一天中會多次想到性活動。此外,那些說自己一個月只會想到一次性生活的人使用表情的機率最低。「相比30%不使用表情的人,62%的經常使用表情符號的用戶都想結婚,」Fisher說。由在線醫生服務DrEd.com進行了一項調查,調查者分析了一段時間內在美國和歐洲Twitter上調情和發送色情簡訊的表情使用情況。他們關注了發送的這些人,發現其中的表情符號都是最具「性暗示」的圖標。
  • 漲知識:鍵盤上最奇怪的7個符號是這樣來的
    說起鍵盤上最奇怪的鍵,那必須要說說數字鍵上面排列的那一串符號了。和標點符號同為鍵盤上的符號他們,好像更加的神秘一些。
  • 純正乾貨:圖標設計的三點最基本規範你會?
    圖標設計的規範涵蓋顏色、符號的表達、線條的運用等等。
  • 緊張性頭痛:一個最常見,卻又最常被忽視的疾病
    伴隨著生活節奏的加快,現代人的生活、工作壓力越來越大,隨之而來產生了一些不容忽視疾病,影響著我們的健康。據調查,全球有將近一半的人一生中至少有過一次頭痛的經歷,目前頭痛在我國的發病率為23.8%,緊張型頭痛佔頭痛的40%,它是一個最常見,卻又最常被忽視的疾病。什麼是緊張型頭痛?它是怎麼引起的?一旦得了這種病該怎麼辦,應該如何治療呢?
  • [科普] 哥哥帶你飛:10個最常見宗教符號的含義.
    下面要說的這些宗教符號,都流傳了數千年,時常會出現在生活中(比如你的個性飾品上)。但這些符號的含義你真的了解嗎?時至今日,雙頭鷹的圖案還留在若干斯拉夫和東歐國家的國徽或旗幟上2、新月符號最早出現在公元前3500年,在埃及、希臘、印度、拜佔庭和蘇美爾王國都有使用。在基督徒中,這是崇拜聖母瑪利亞的象徵,在亞洲,則代表了宇宙的力量,在印度是心智控制的意思。1453年君士坦丁堡淪陷後,新月符號就與伊斯蘭教緊密相連
  • 經驗分享:10個超讚的圖標設計技巧
    >捕捉對象的特徵對於icon design 最重要的一點是當你設計出一個圖標,用戶能不能立即辨認.無論是青蛙還是鉛筆,它所表達意義的識別性,必須一目了然.必須具備經典的隱喻特徵。在一本雜誌的圖標教程裡,圖標大師Vu(scrape.sk)和Min Tran(frexy.com)討論了他們關於鉛筆圖形的背後進程:「圖標需要突出對象的最典型特徵,表現它所表達的概念和細節。
  • 2014年最流行詞語出爐 心形符號居首
    2014年最流行的詞語出爐。嚴格意義上來說,它並非是一個詞語,而是一個愛的符號。表情符號在英語中大行其道,顯示出網絡快速發展時期,符號正在強勢崛起。目前共有722個表現感情、表情、心情,或人、場所、物品的符號。2015年將會新增250個表情符號。位於美國德克薩斯州奧斯丁市的全球語言檢測機構(Global Language Monitor)通過分析博客、社交媒體以及全球25萬家主流在線和出版媒體中詞語和符號的使用情況,發布了2014年度流行詞語榜。
  • ICON圖標還能這樣用,環球旅遊不管碰上什麼語言瞬間溝通!
    可是當地語言他一竅不通,於是他想出了一個主意,把所有常用的溝通事情做成小圖標他管這件T恤叫「IconSpeak(圖標說話)」。這上面一共有40種不同的圖標,非常國際化,是人類基本就能懂~~!寒冷的夜晚,找一個能睡覺的地方
  • 特邀專欄:遊戲圖標的設計跟其它應用的圖標設計有何不同?
    這是因為適當視覺上的刺激可以直接引起大腦聯想:當一個品牌的核心視覺元素合理的出現在入口圖標上的時候,大腦的直覺就會告訴你關於這個軟體程序的一切。Flat),圖標選用了 Level1 的莊園場景,其典型的軟綿綿小人雕塑是此遊戲最大的亮點英雄薩姆3(Serious Sam 3),玩過遊戲的都知道,圖標中是Sam的標誌性武器之一:末日炸彈,同時也是Sam 的專屬Logo我的世界(Minecraft),圖標採用了遊戲中最為常見的土塊作為背景安琪拉之歌(Aquaria),圖標的中的形象是遊戲主角Naija妹子的側臉頭像
  • 金港某住戶家門口出現這個符號,幸好及時清理不然就出事了!
    近日家住金港某小區的王阿姨反映,最近自家樓道住戶門口突然出現了一些奇怪的符號,有箭頭→有三角△還有一些半月形),雖然不知道這些符號是誰畫的有啥特殊的含義,她還是心裡感到很不安,擔心是別有用心的人留下的。
  • 「粉絲與偶像之間雙箭頭的愛!」這種瞬間會記一輩子吧!
    後臺回復「封面」可領取當天好看的封面哦粉絲與偶像間最難忘的互動
  • 電氣工程圖紙常見符號及意義丨附案例圖紙
    以下節選自《GB50786-2012 建築電氣製圖標準》1、強電符號2、通信及綜合布線符號3、火災自動報警符號
  • 加拿大妹子發現門外一個奇怪標記符號,網友們的分析,簡直毛骨悚然
    Jade Jules是來自加拿大紐芬蘭的一名Tiktok博主,擁有著53000位粉絲的她算是一個小網紅了,就在前兩天,她出門倒垃圾時突然發現了一個畫在自家院子地上的這麼一個奇怪符號——「1F」而在兩年後,蘇格蘭一個警察局也在社交媒體上分享了類似符號的圖像,其中還專門標明了每個符號所代表的含義,簡直令人細思極恐——左1:「家裡裝有警報系統」;右1:「容易得手的獨居女性」;左2:「這家人很怕被搶劫」;右2:「偷這家的風險很大」;
  • 《牛津詞典》年度詞彙首次頒給了一個表情符號:笑Cry
    據了解,《牛津詞典》的出版方牛津大學出版社已經連續多年評選年度詞彙,但將年度詞彙頒給一個表情符號尚屬首次。數據顯示,這款表情符號流行速度確實驚人,在英國其使用率由2014年的4%上升至現在的20%。其實這款表情符號對中國網友來說也很熟悉,它有一個接地氣的名字:笑cry(即「笑哭」的意思),多被網友用來表示笑到哭,笑出淚的心情。 「在網上看到一些搞笑的圖片、視頻或者段子,經常會用到這個表情。」 網友「大明」表示。因為這個表情符號似哭非哭、似笑又非笑,不少網友也用來闡釋一種「哭笑不得」的心情。
  • 今晚學什麼:電腦桌面上的圖標突然都不見了怎麼辦
    部分網友可能會遇到一件事,自己的電腦桌面圖標突然不見了,或是消失了,自己又不知道怎麼解決干著急!
  • 沒有右轉箭頭的紅燈可以右拐嗎
    今天我們就來聊聊其中一種情況——沒有右轉箭頭的紅燈是否可以右拐,從根本上清楚這種情況是否闖紅燈,能減少闖紅燈引發的事故。    首先需要知道紅綠燈有兩種,一種是圓屏/全屏紅綠燈,另一種是箭頭紅綠燈,這兩種紅綠燈的作用不用,側重來說說箭頭紅綠燈,這是明確指出了方向的紅綠燈,但如果遇到了沒有右轉箭頭的紅燈(只有直行和左轉信號燈),當直行和左轉紅燈亮時