「分享」、「上傳」分不清?談圖示設計哲學

時至今日,將內容或連結分享至社群網路或電子郵件聯絡人是一個非常普遍的動作,然而應該用什麼符號來設計分享圖示,設計師們仍舊沒有達成共識。問題不僅在於各大平台的分享圖示不一致,此外它的設計也隨著時間演進成各種版本。
評論
評論

 

 圖片來源:alexkingorg

本文譯自 〈Share: The Icon No One Agrees On〉。作者為 Pixelapse 的共同創辦人羅敏銘(Lo Min Ming)。Pixelapse 是專屬設計師的視覺版本控制平台。羅敏銘鍾愛設計、寫程式、攝影、藝術,也愛好美食與品酒。他撰寫的主題包括設計、工程、創業。有興趣的讀者可以上他的網站 minming.net 或者在 Twitter 追蹤 @lominming

您知道以上這些圖示有什麼共通點嗎?它們全部都試圖傳達一個相同的動作──分享!時至今日,將內容或連結分享至社群網路或電子郵件聯絡人是一個非常普遍的動作,然而應該用什麼符號來設計分享圖示,設計師們仍舊沒有達成共識。問題不僅在於各大平台的分享圖示不一致,此外它的設計也隨著時間演進成各種版本。

我花了一些時間思索這個問題,試圖找出最適合代表分享的符號。

上傳(Uploader)──iOS 7

iOS 7 的分享圖示。

我第一次見到這個圖示是在 2013 年蘋果發表 iOS 7 的 WWDC 大會上。那時,我立即仿照 重新作了一個分享圖示 ,希望看看有沒有人和我一樣,不喜歡這個新圖示。

這個圖示的主要問題是它看起來太像「上傳」了。若把這個分享圖示放在下載圖示旁邊,馬上就發現 iOS 7 分享圖示非常容易讓人混淆。那向上指的箭頭,完全就是下載圖示的箭頭反方向,人們自然容易推論這個圖示代表相反的意義:上傳。

箭頭向外指的托盤(The Outgoing Tray )──Pre-iOS 7

iOS 7 誕生以前,此款「箭頭向外指的托盤」的圖示被使用了許多年,現在 Mac OS X Mavericks 仍舊使用這個圖示(不過 Mac OS X Yosemite 則採用 iOS 7 的分享圖示)。整體而言,它是一個設計得很好的圖示。箭頭從托盤裡頭向外指,隱喻分享的意義。從第一支 iPhone 誕生,就使用這個符號,人們對它的熟悉感漸增。

三個圓點(Three Dots)──Android 分享符號

Android 分享圖示簡單地由三個點和連結它們的直線組和而成。為開發者設計的分享外掛程式 ShareThis 也使用同樣的符號作為圖示,它看起來像是有許多節點的圖形,而這些節點又由頂點連結他們。第一眼它似乎沒有傳達什麼意義,但若是要大膽猜測,設計師試圖呈現左邊的節點傳散出去,變成右邊的點。總的來說,這個圖示所隱含的意義不是直覺性的,使用者能夠看懂單純是因為他們使用後學習的結果。我懷疑只有蘋果使用者,才會有辨識這個符號的困難。

從 Google 搜尋分享圖示, 前 10 名圖示就有 7 個是以三個點構成的,可見 Android 分享圖示的影響力。

Y──舊版 Android

在 Android 作業系統 Honeycomb 前的版本,在各式各樣的 Android 裝置都使用 Y 型的圖示,儘管現在這個圖示不是很普遍,但我依然非常喜歡這個圖示,因為箭頭代表者向外傳散的意思,跟分享的行為很像,而且它具有垂直對稱的特色。單純根據它的形狀以及所要傳達的意義,我認為它是設計得最好的圖示。

最左邊的是原始的分享圖示。也有一些衍生出來的變體。

圓圈──Windows 8

圓圈型分享圖示在 Windows 8 的常用工具列裡頭。

Windows 8 分享符號,與 Ubuntu 的 logo 很像,在作業系統、Windows Phone 等裝置都很普遍。圓圈型的分享符號是另一個完全抽象的符號,沒有任何實質性的意義。若沒有底下的文字,第一次使用的人可能有會辨識困難的問題。

禮物──Windows Phone 7

Windows Phone 7 的分享圖示是一個禮物的圖案,屬分享圖示中相當有趣的特例。禮物圖案背後的概念顯而易見──代表著分享給他人的一個禮物。然而,此符號的問題是:人們不是真的「分享」(share)禮物,而是「送」(give away)禮物。

禮物這個圖示很有趣,讓人眼睛為之一亮,但對使用者來說太過陌生了。當使用者第一次看到它的時候,沒有任何線索告訴使用者它到底是做什麼用的。這個符號只用了短短一年半就被汰換掉,Windows 8 即採用新的分享圖示。

手──開源分享圖示(Open Share Icon)

Shareaholic 試圖創造國際設計師通用的分享符號,因此 Open Share Icon 的設計概念:

Open Share Icon 用視覺的方式傳達分享的動作,就像是一隻手將一個物件傳送至另一隻手,傳達「傳下去」或「分享」的意思。圖示也代表一隻「眼睛」,傳達「看看這個」之意。

整體而言,這是一個有趣的概念與點子。儘管它的設計很明顯,但大多數的使用者不會一眼就辨識出「手」的形狀。如果手不是立刻就分辨出來,那麼圖示就失去原本的意義了。不幸地,Open Share Icon 沒有流行起來,網站也很少使用。

---

由於不同平台上有許多不同版本的分享圖示,許多設計師試圖創造一個「國際通用」的分享符號。以下是我發現的其他圖示:

散布

某些設計師使用「散布」的概念來代表分享,它可以把分享所帶來的網路效果網路描述地很好,但我發現此符號太過擁擠、雜亂,不是一個好的分享圖示。

圖表


某些分享圖示由幾個大小不同的原點和線組合而成,這些圖示看起來很像圖表。可以很好地描繪出人際之間的連結感,但它們並無很好地呈現「分享」這件事。

張開的手掌

許多年前,張開手的符號被用來象徵分享的網路資料夾。某些老舊的企業軟體依然使用張開手的符號作為分享的動作,然而這種分享到本地區域網路的行為,和分享到社群平台的動作不同。

許多人

許多人的符號通常都指的是分享給合作夥伴或團隊成員的行為。我從來沒有看見它用於社群平台的分享行為。

奶昔!

有時候,解決設計問題最棒的方式就是詢問非設計師的人。在這個議題上,我詢問我那不是設計師的室友:

提到「分享」時,什麼最先浮現在你的腦海中?你要如何運用一個符號代表分享呢?

他馬上畫下一杯有兩隻吸管的飲料,隨後解釋他畫的是奶昔:

我朋友的速寫。

奶昔圖示是一個非常有趣的點子。把分享的行為描繪地非常好。然而,這個符號有兩個問題,把奶昔放在其他我們常用的符號裡頭有點突兀。更重要的是,這個符號似乎傳達一個非常具體的概念,意即,兩個人之間分享同樣的事物。然而,在我們討論的分享情境中,它幾乎是把點子分享到其他 許多 的平台。

我一時興起畫的奶昔向量圖。

所有分享的圖示

本文討論過的所有圖示一覽表。

您應該使用哪一個圖示呢?

我們不太可能看到所有圖示統一的結果,因為蘋果不會開始採用 Android 的設計語言,Google 不會開始實行微軟的設計,而微軟也不會想使用其他平台的分享圖示。由於這三大操作系統的公司個別都擁有很大的市占率,使用者至少會遇到代表同一個動作的三種不同圖示。

最棒的圖示是使用者最熟悉的。

最棒的圖示不是最簡單的那個,也不是最有道理的那個;最棒的圖示是大多數使用者已經熟悉的那個。有效的圖示是讓使用者不必費力就能理解。

您應該根據開發的平台選擇圖示。

若您開發的平台是 iOS 7,您應該使用 iOS 7 既有的分享圖示,也就是前述所提及的「上傳」圖示。同樣地,若您開發 Android app,那麼您就該使用「三個圓點」。

如果我想要在所有平台上都用統一的符號呢?

若您想要為 app 或網站選擇一個跨平台統一的分享圖示,那麼「箭頭向外指的托盤」與「三個圓點」圖示會是最好的方案,因為它們是目前辨識度最好的圖示。不過,這兩者我更推薦「箭頭向外指的托盤」圖示,因為對某些不曾使用過蘋果產品的人來說,他們也能輕易地辨識圖示的意義。相對而言,「三個圓點」圖示比較抽象。

一年內,iOS 7 的「上傳」圖示(未來 iOS 與 Mac OS X Yosemite 皆採用)與 Windows 8 的「圓圈」圖示的辨識度很可能會變得更高。

基本概念

若排除使用者熟悉度與圖示被 app 採用的熱門程度,單純就設計來看的話,我會選擇「Y」圖示,因為這個圖示是最不抽象也是最直接代表分享動作的圖示。它的設計辨識度很高,而且也具備垂直對稱的特色。不過很遺憾地,它沒有被廣為使用。

---

今日我依然使用「箭頭向外的托盤」作為我預設的分享圖示。

若您是 App、網站的設計與開發者,您使用什麼樣的分享圖示呢?歡迎與我們分享。


阿物科技《B2B 數位轉型白皮書》提出 B2B 數位行銷十大趨勢、六大具體方針指引

以 MarTech 見長的阿物科技(awoo)提出一份《B2B 數位轉型白皮書》,為企業剖析為什麼現在必須立刻實施 MarTech 計畫,以及如何找到最佳的行銷途徑。
評論
Photo Credit:Campaign Creators on Unsplash
評論

疫情席捲全球,人們的生活與工作模式與以往大不同,全球商務與貿易生態也改變了。不只避免人與人連結的「零接觸經濟」成為當代顯學,講究以人為本、科技賦權的「行銷 5.0」時代也已然到來。換言之,現在的企業不能僅是完成傳統數位化(例如只是把資料 e 化),還必須實施新一代科技的數位轉型,將線下的規模延伸至線上,並善用「行銷科技 MarTech」以帶來真正的獲益成長。

三個必須展開 B2B 數位行銷的理由

改變既有 B2B 行銷模式、思考數位轉型是必須的嗎?答案是:沒錯。根據阿物科技《B2B 數位轉型白皮書》中的資料顯示:B2B 的買賣雙方的工作型態已逐漸往數位靠攏,諸如:透過視訊會議互動、上網搜尋相關資訊等,再再顯示線上發展的必要性。

此外,B2B 買方採購決策者,也樂於透過線上管道與品牌互動聯繫、獲取產品與服務資訊,而非實體面對面;反映到銷售數字上,則是 B2B 買方比起過去更願意透過線上或電商採購,誠如顧問公司麥肯錫調查指出,疫情期間 B2B 企業減少了 34% 的面對面銷售、增加了 10% 的線上模式,明確指出疫情為商務帶來的影響。

另外,由於科技與數位變遷,許多技術到位,進而驅動行銷變革,也就是說,當數位行銷、線上銷售已成為標準配備,企業若要鞏固其專業性與權威性,行銷數位轉型便是無法迴避的任務。更重要的是,由於愈來愈多的企業轉型為數位工作型式,也就是客戶(或說買家)多已構築線上溝通的生態基礎,因此要與客戶接觸最好的方式,便是跟著轉往線上,搶佔商機。

總之,在外部環境(全球疫情影響)、數位變遷(即至科技,或說行銷 5.0 時代的到來)、買方行為(數位工作型態)等三大元素交織的時間點上,建立 B2B 線上行銷生態系是一條必須踏上的明確道路。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

B2B 數位行銷十大趨勢,以及具體執行策略

阿物科技《B2B 數位轉型白皮書》對於當前 B2B 數位趨勢提出十大觀察,包括:

  1. B2B 通路,數位渠道將佔 8 成。
  2. B2B 企業 Y 世代上位,逾 7 成握有採購決策。
  3. 2019 年疫情爆發前 B2B 電商營收達 12.2 兆美元,超過 B2C 營收規模,預估 2027 年全球 B2B 電商營收將達 20.9 兆美元。
  4. B2B 與 B2C 模式將趨於一致,在行銷模式上將難以區分 B2B 還是 B2C。
  5. B2B 台灣賣家數於國際電商平台激增 3 倍。
  6. B2B 貿易受疫情影響,全球 1,200 個展會延期或取消,或改以線上進行。
  7. B2B 經營內容與 SEO 是行銷趨勢。
  8. B2B 需經營品牌,並同步經營社群,讓企業成為市場上的意見領袖,留住忠誠粉絲與潛在客戶。
  9. B2B 行銷需善用 SEO 智慧賦能,如透過自然語言處理(NLP)分析內容文本、電腦視覺(CV)分析網頁產品情境,為產品貼上特徵標籤,以供使用者搜尋意圖之預測,也讓 SEO 從字元比對升級為「意圖比對」,以呈現更精準的搜尋結果。
  10. 數據驅動、內容為王,行銷不只以「人」為中心,也要以「物」為中心同時洞察行為與意圖數據。

種種趨勢意味著,建立 B2B 數位轉型的線上化行銷生態系,是當前 B2B 企業不可迴避的任務。阿物科技也在白皮書中提出具體做法,透過「以 SEO 為核心+電商行銷」的架構建立,結合 SEO 關注的「關鍵字、網頁優化、內容經營」與電商行銷的「導流、導購、會員經營」帶入 B2B 模式,進而完成從導流到導購的 B2B 內容行銷與 SMarketing1,以及會員經營、再行銷,創造顧客終生價值。

(註1)SMarketing:意即 Sales+Marketing,指的是企業如何結合行銷與銷售團隊,讓雙方得以合作並完成業務目標,例如建立共同的語言、建立共同的工作流程等。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

六大方針助攻 B2B 企業成為數位行銷常勝軍

綜觀 SEO(搜尋引擎最佳化) 與內容行銷趨勢、B2B 買賣雙方的痛點與現象、影響現況的三大元素(疫情來臨、數位變遷、世代交替)等考量,阿物科技也在白皮書中提出 B2B 企業與電商行銷數位轉型的六大方針指引:

  1. 掌握數位行銷發展趨勢,舉凡 SEO 搜尋引擎優化、內容行銷經營、社群媒體擴散、權威領導聲量(KOL)等概念,皆須有所了解。
  2. 要有「數據驅動,內容為王」的雙核心管理。
  3. 採取「以 SEO 為核心、以電商行銷為架構」的 B2B 行銷數位轉型策略。
  4. 建立「長期、有效率、穩定的」買賣雙方的互動網絡與線上數位平台。
  5. 具備「得優質流量得天下」的 SEO/CRO 思維與行動,為「導流」建立深厚基礎。
  6. 導入「以 SEO 為核心的成長流量服務」,搶攻後疫情時代下的全球商機。

若企業渴望在全球 MarTech 潮流中一同乘風破浪,不妨立即展開電商行銷數位轉型,開啟 B2B 貿易的新大航海時代。

立即下載:《B2B 數位轉型白皮書 - 以數位行銷力決戰 2022》

瞭解更多:阿物科技的 MarTech 趨勢解密