現代人每天或多或少都會接觸到一些資訊產品,裡面都有許多的圖示與符號,那可曾想過,這些符號是從哪裡來的? 為什麼這個功能要用這個符號? 還有這些符號是什麼意思呢?

1.分享符號
就是在手機或網站上看到,用來分享內容的那個,它長這樣:

所以這個圖案有什麼含意嗎? 為什麼長得像樹狀圖,還有 3 個點的連線呢?

Co.Design 推測這是一個類似把愛傳出去的畫面,一個人推廣給其他人,然後其他人又再傳給更多的人。

ShareThis 是一個為開發者提供社群分享工具的網站,ShareThis 的網站上寫說他們在 2006 年有了這個符號的概念,從網頁時光機的紀錄中,則是從 2007/7 月開始在網站上看到這個符號,而如今他們還以此符號作為公司的 logo。而且他們的 user guides 並倡導希望大家都可以使用這個圖案,而不是只被少數產業或服務獨佔。

但這個符號被大量散播則被認為是在 Google Android 上面,早期的 android 分享圖案是一個 Y 字型,採用節點、向外傳播的概念,Android 在 2012 年提出了 Action bar 的 UI,並提供 Action bar 用的 Icon pack 素材與規範,現在常見的分享圖案也在那時候出現,並一直沿用至今。

如果大家都用同一個符號來表示分享,並不是壞事,只是永遠不會這麼簡單,事實上許多公司的產品都有自己的分享符號,功能的出發點是相同的,但是圖像上則呈現出截然不同的成品與設計理念。舉 Open Share Icon 的分享符號來說(見下圖最右側),他的概念是一隻手拿東西給另一隻手。微軟近代的產品則是使用一個類似 Ubuntu logo 的節點圓圈來當作分享的圖示。

若習慣使用 Apple 的產品,分享圖示則通常是一個方框,然後一個往外指向的箭頭,是把文件夾裡的資訊散播到全世界的含意,但一般被詬病容易與上傳的圖示搞混。上述的三節點樹枝狀分享圖示,則被認為第一眼無法理解,需要經由學習與經驗才能得知那顆按鈕的用途。

圖案沒有誰對誰錯,這場大戰看來是沒有統一的一天,但我們暫時是無法離開這個符號了。

2.播放符號

這符號隨處可見,但他究竟代表什麼意思? 它是一個很棒的符號,具有高度的辨識性,簡潔、純粹,並具有很大的延伸性,可以融入任何你想要的設計風格與趨勢裡面 (如水晶按鈕風格、扁平式設計風格)。

播放符號是從哪裡來的呢?
簡單來說,沒有人知道。Gizmodo 認為這是來自60年代,當時音訊的意象就是兩顆滾動的碟盤,而在當時三角形的意思是箭頭,箭頭可以讓人們看出碟盤現在是往哪邊轉,但這只是推測而已。實際上這顆播放符號可以這麼有名,要歸功於全球化的消費性電子產品工業的技術發展,讓全世界知道這個符號代表什麼,而且它可以做什麼。

以前通常採用具象化的直線式思考邏輯 (像 Gmail 用信封當 logo),但那個時代已經過去了。現在只要大家認同「是的,這個符號代表播放」就可以了,是一個抽象化思考的時代。如果一個三角形表示「播放」,那兩個三角形一定代表「播放得快點」;如果一個指向右邊的箭頭代表「前進」,那反方向的箭頭就代表「後退」。概念雖然簡單,但全都是延續播放按鈕的概念,全都是抽象的。

3.藍牙符號

在十世紀左右,丹麥國王 Harald Blåtand ( 英文名: Harold Bluetooth ) 很喜歡吃藍莓,吃到牙齒常常都藍藍的。該國王也統一了整個斯堪地那維亞,跟藍牙的概念一樣「允許不同的產品與行業之間的連結和協作」,但這就是藍牙命名的由來。

藍牙的符號是從哪裡來的呢?
在聽過剛剛的故事之後,藍牙的符號來自盧恩字母 (Runes) 的 H 和 B 兩個字母,國王姓名的開頭字母。

藍牙是藍牙技術聯盟 (Bluetooth SIG) 的專利技術,而且是註冊商標,所以一般都用這個圖案代表藍牙。另外從這個故事知道他是「藍牙」,不是「藍芽」,中文譯名也是有規定的,以後不要再打錯了。

4.USB (Universal Serial Bus)

USB 埠是個有魔力的東西,通常一定要插三次才插得進去,一直到 USB3.1 Type-C 才訂定出正反都能插的 USB 接頭規格,那這個符號的設計理念是什麼呢? 稻草人嗎?

這個圖案代表羅馬神話中,海神尼普頓(海神波賽頓是希臘神話)的三叉戟,三叉戟擁有強大的能量,被叉住的圓形、方形、正方形代表世界上各種不同的裝置,都可以經由 USB 連接起來。

USB 跟藍牙差不多都是在 1994 年開始發展的,都是由一些大公司組成的組織,訂定規範而發展。

5.電源開關圖案
在二戰期間,就有用 I 跟 O 來表示裝置的電路是否接通。1906 年成立的國際電工協會 (IEC) ,則訂定出標準,每種符號分別有不同的規範圖像與狀態說明。

同樣是圓圈內有一條線,線在圈內(IEC 5010)或是突破圈外(IEC 5009),在一開始其實是不同的狀態與功能,前者表示開與關的切換,後者表示開機待命。那你是否有注意過,現在一般的開關,那一槓是在圈內還是圈外呢?

後來 IEEE 為了簡化,把突破圈外那顆符號重新定義為「電源開關」,就是現在一般電子產品使用的電源符號。

6.MAC 鍵盤的 Command 圖案 ⌘

在 MAC 標準鍵盤的 Command 鍵上面,有一個像花的圖案,到底是什麼呢? 難道 Jobs 喜歡中國結?

Command 鍵是一個特殊的組合功能鍵,最早是使用一個 Apple 圖案,但是 Jobs 覺得太氾濫,到處都有 Apple 圖案,但每一個都代表不同的功能,容易造成混淆。於是被下令做新的。Susan Kare 從國際符號標誌辭典中選中了「⌘」花形符號,源自瑞典的野營或露營地符號,提醒人們注意和關注,同時還具有無限循環、統一標準等含義。

**7.舊款 MAC 鍵盤的 Alt 圖案 ⌥ **

較舊型的 MAC 鍵盤,沒有 Option 這個按鍵,只有 Alt 與一個像手扶梯的圖案。
那個圖案是什麼意思呢? 其實就是電路開關的意象,也就代表 Alt 鍵的功能,非常淺顯易懂。

8.選單圖案

近幾年有很多行動裝置 App 或是網頁,使用了這個三條線的圖案作為「選單」按鈕,
這圖案算是行動裝置時代的一個介面元素,甚至被列為 2015 年的網頁設計趨勢,
因為連一些 for pc 的網頁都用那個三條線的圖案來代替選單,
到底為什麼要用三條線呢? 是散熱孔? 中文的三,還是代表上尉? 還是代表八卦中的乾卦?


這三條黑色的 bar 在國外稱為 “hamburger icon”,因為它長得像一個漢堡。這圖案目前公認最早是出現在 1981 年,一段早期的個人電腦的產品展示影片中出現的,在當時的確是用於觸發顯示選單的用途。而且這圖案的意義在於,它有視覺上的獨特性,不容易與其他常見的圖案重複,而且不論在各種解析度高低、各種大小的螢幕,都能顯示出統一一致的圖案。

事實上這個圖案一直有爭議,理由在於它看起來可能不像是選單,或是可以點的東西就要擺在使用者眼前,而不是藏在一個不知所云的圖案裡面,所以對於選單按鈕有各種折衷與配套方案。但隨著行動裝置的普及,後來使用者也就逐漸習慣了,知道那個圖案是可以點的,畫面上找不到的東西,就要點那個漢堡圖案去找。

9.「存檔」功能的磁片圖案

有人可能可能嗤之以鼻,連磁片都不認得嗎? 但就像有些前輩覺得沒用過磁帶機、打孔機寫程式,沒用過倚天中文打報告,就是菜逼八一樣。事實上比較這些一點意義也沒有,有以前的經驗當然很好,但資訊業著重的是「解決當下的問題」。


你曾好奇過為什麼電腦是從 C 槽開始? 因為以前的電腦 A 槽跟 B 槽是用來裝軟碟機的。磁片是 1990 年代火紅的產品,當時網路頻寬有限,而且多是以量計費,而燒光碟也不便宜,甚至還沒有 ... 繼續閱讀⇢

一、Web Fonts(雲端字型技術)

客人說她的網頁上要用娃娃體,除了做成圖片,還有其他選擇嗎?

為了確保使用者在不同瀏覽環境也能看到同樣的字體,一般只能使用系統內建字體,如 Windows 系統的正黑體、細明體、標楷體。如有特殊需求,最穩定的方法通常只能做成圖片或 Flash,但除了網頁載入的負荷與日後維護的成本,也降低了網頁內容被搜尋引擎索引的程度,而且當圖片在高解析裝置上,或是需要放大時,上面的字也模糊不清了。

網路字型內嵌技術(Web Fonts,或是比較潮流的講法:雲端字型),解決設計師在網頁上使用特殊字體的問題,瀏覽者的電腦不須預先安裝字型於系統內,也不須網頁載入瞬間就要下載整個好幾十 MB 的字型檔,就可以讓網頁的文字顯示額外的字體,設計師可任意的改變網頁上的文字樣式,輕鬆為網頁增添豐富性。

較知名的幾個 webfont 服務
– Google Fonts (英文,免費)
– Adobe Edge Web Fonts (FREE,英文字型為主,像本部落格的內文是使用這平台的思源黑體,一個月 25000 pageviews 內免費)
– Justfont (繁體中文、簡體中文,可選擇的字體最多)
– 華康 (繁體中文,字體經營豐富)
– 文鼎iFontCloud (繁體中文,字體經營豐富)
– 造字工房 (簡體中文,字體樣式較具獨特性,年費制)
– TypeSquare (日文、繁體中文)

此技術其實已經不算新技術,雖然繁體中文因為要製作的字數非常多,而且市場小,選擇少,花樣不如簡體中文或是日韓語系的 webfont 服務那樣豐富,但隨著科技進展與需求的增加,各家的字體清單也逐漸在擴充,使用起來也越來越成熟穩定。

中文的 webfont 服務通常都需購買授權才能使用,多半以 Pageview 計費,頁數越多的網站可能花費就越高。以一個有 5 頁的網站為例,平均每日訪客 100 人,而且網站每一頁都有去看,那麼一年就有 182500 個 pageview,購買 justfont 的商業 VIP 方案,每年要再多繳 2000 多元。

聽起來很厲害,但是 webfont 雲端字型實際使用時將會遇到缺字、不支援舊瀏覽器、網頁變慢等各種情況,請參閱本站相關文章 中文 webfont 雷人事件簿。

二、IconFont**

< i class=”icon-edit-sign” > < / i > ->
短短一行 HTML 就可以產生一個 icon,就這麼簡單。

為了減少 hhtp request,或是 retina 螢幕的裝置,這年頭要在網頁上放一個圖示,不再像以前一樣單純。但也多了一種選擇,就是 Iconfont,使用 HTML 及 CSS 語法載入「圖示字型檔」,再放置定義好的 class name,就可在網頁上產生圖示,並透過 CSS 更改圖示的顏色、大小、透明度、內陰影、外陰影、旋轉…等,容易上手,也方便套用一些互動語法。在高解析裝置上也不會模糊。

  • 阿里巴巴矢量圖標庫 大陸電商界的icon都有,還可以製作保存自己的icnofont
  • Font-awesome (免費使用)

使用一些開放原始碼的 iconfont 方案非常方便,但是總會遇到它提供的 icon 很多種,但剛好就缺你要用的那一種;或是 icon 的風格樣式不符業主需求的情況。如果要自己製作 iconfont,為了兼顧瀏覽器相容性,須設定/製作 eot, woff, ttf, svg 多種字型檔格式,與添加許多相容性語法,相當麻煩,還是仰賴一些線上外部工具來製作會比較方便。

由於 iconfont 是字體,所以每一顆 icon 一次只能顯示一種顏色,雖然之後也出現了多色的 iconfont,如 Stackicons,但製作過程繁瑣,會讓人覺得還是做成圖片就好了。

使用 Iconfont 時須注意,有些使用者的電腦瀏覽器版本較低,或是安全性設定較高(如 IE 設定停用字型下載,或是 Firefox 將 gfx.downloadable_fonts.enabled 設為 false ),容易導致瀏覽器無法下載字型檔案,而造成顯示錯誤。(如下圖)

三、瀏覽器最小字體設定

解析度 1920*1080 的 22 吋電腦螢幕,「螢幕點距」比解析度 1440*900 的 19 吋螢幕還小,所以使用者會有換了更大的螢幕,螢幕上的字卻比以前還小的情況。有些人可能會直接調整系統解析度,有些人可能會用 Ctrl + 滾輪,或是點選瀏覽器右下角的放大倍率,個別將網頁放大。

但是 Firefox, Chrome 等瀏覽器中還有一個「最小字型大小」的設定,會將小於設定數值的網頁文字通通放大,如 Chrome 的最小字型大小預設值為12px,所以 1~11px 的字體都會被強制放大成 12px 大小。但這種放大效果與使用 Ctrl + 滾輪來放大不同,「最小字型大小」會將字體放大,外層容器與圖片卻不會跟著放大。

網站一般皆是在預想使用者使用「預設值」的情況下進行製作,但若使用者自行調整該預設值,就會導致網站發生跑版,或是換行錯誤的狀況。早期可以用 css 設定 font-size-adjust 來解決,但隨著瀏覽器版本的更新,也逐漸失效。
– 解決方法1: 區塊不要排得太剛好,保留一些字體放大的緩衝空間。(但是許多業主看到畫面上有留白就會高血壓)
– 解決方法2: 使用 css3 的 transform:scale( ) 屬性。瀏覽器預設值為 12,如果最小字型大小被設定成 16px,那會導致網頁上小於 16px 的字被強制放大,就需要對 12~15px 分別設定縮放比率,讓各級字縮回正常尺寸,並設定 display:inline-block 等屬性,讓容器排列正常。(要先知道使用者把設定調成多大)
– 解決方法 3: 通通做成圖片、Flash ..。(爛)

2023/1 更新: Chrome 118 中移除了 12px 最小字體的限制

在 Chrome 118 之前的版本中,如果字型小於 10 像素,則系統無法依指定方式呈現,但如果語言是阿拉伯文、波斯文、日文、韓文、泰文、簡體中文或繁體中文,則系統會將其四捨五入。開發人員必須設法轉譯小型文字,例如使用 ... 繼續閱讀⇢