揭開指標系統的設計巧思!專訪「角白設計」莊濟寰、「Bohan Graphic」施博瀚

 揭開指標系統的設計巧思!專訪「角白設計」莊濟寰、「Bohan Graphic」施博瀚

「我想到去日本買衣服的經驗,每次看衣服時都察覺不到店員的存在,但當你要問價格、正要轉頭時,他就會馬上出現在你面前,我想像的指標系統就是這樣,你需要它時,它可以讓你輕鬆辨識,但當你關注在其他事情時,它也不會干擾你。」這是角白設計負責人莊濟寰(Roger)對指標系統設計的期待。

車站2號出口往哪走?你知道洗手間在哪嗎?要回答這些方向性問題,往往得仰賴指標系統,舉凡車站、美術館、百貨公司、飯店,都可見其蹤跡;融入場域的同時,指標也肩負著資訊傳遞的重要任務。參與過許多指標系統設計案的Roger,近期新作為嘉義市立美術館的視覺識別系統(VIS),從logo開始,一步步形塑嘉美館的品牌形象;而其中的指標系統正是相對隱性的存在,「因為美術館真正的主角是展品,所以我希望指標可以退到最後,提供指引功能即可,不要再創造更多物件讓民眾心緒混亂。」為了與該場域相融,指標最後不另作量體,而直接以牆面絹印的方式呈現,icon顏色也使用深灰色,絲毫不搶展品風采。


要達到空氣一般的存在,其實並不容易,背後所付諸的時間心力不容小覷。操刀新竹火車站指標系統優化設計的Bohan Graphic負責人施博瀚表示,由於指標系統存放於真實場域,不像一般logo設計能在紙面上與客戶討論就好,場勘極其重要,「我都會想像自己是第一次到這個場域的人,對於動線的理解是什麼?然後用體驗的方式去感受這空間的布局,思考如何能夠更好。」

指標落點因地制宜

新竹火車站因為歷史悠久,且場域功能明確,指標的落點大都沿用原來的位置;嘉美館亦同,各樓層的平面配置相似,落點位置並不是一件太傷腦的事。反觀某些高複雜性空間,就會需要空間設計師介入,進行整體動線規畫,最明顯的例子就是台北車站。


Roger分析,要判別落點位置,通常有幾項參考,例如該處是否屬於動線樞紐位置、單一通道過長時會增設落點等。而依據場域功能的不同,落點位置也會有所調整,以商場為例,由於周年慶等活動會造成大量人流,設計師在規畫指標落點時,需事先了解百貨慣用的廣告訊息露出位置,若以頂掛式橫幅廣告為主,那指標就要避免設置在天花板附近,以防遭遮擋,導致周年慶期間大批民眾迷路的窘狀。


落點位置沒有絕對,視空間條件而定,好比電影院就不適用嘉美館的絹印手法,因為燈光過於昏暗;反觀美術館等擁有大面玻璃、任自然光傾瀉而下的空間,若設置電影院常見的燈箱式指標,反而會看不清楚;又或是地鐵站等交通樞紐,指標則以頂掛矩形量體為佳,因為這樣一來,將能顧及來自四面八方的民眾,以免大家一窩蜂擠至牆面前閱讀指標訊息,造成人潮堵塞。

icon 組合應用大哉問

icon設計重點在於風格的一致性,分成線條感,色塊感、幾何圖形圈限3種,例如手機app就屬第3種,「但新竹火車站icon都是混著用,空間會太跳,所以當我們用統一的架構去收整,即便看起來差不多,你還是會覺得整體變舒服很多。」施博瀚說道。正所謂魔鬼出在細節裡,原先計程車和公車logo的風格明顯不同、各種人像在內的icon也可見肩膀造型不一等,逐一修正後,不僅大力減輕視覺的凌亂感,也讓新竹火車站搖身變成一處清幽雅致的公共客廳。

「如果畫茶水間,是要畫飲水機、茶壺、還是一個人在喝水的樣子?」icon繪製的首要考量即為易辨性,而在繪製完所有icon後,便是時候思考如何組合與應用。他表示,新竹火車站的問題在於,同一塊招牌內的指引混亂,進而影響導視效果,因此需要重新梳理,例如將同方向的指標icon置放同一區塊,增加資訊的閱讀效率;換言之,指標設計是一種資訊圖表(infographic)的呈現,「設計不只是靈感,還是一個整理的過程。」

而對Roger來說,指標系統設計更是和業主共同邏輯推演的過程。例如他曾和館方來回討論「館長室」指引資訊的實際需求,「嘉美館分為展館和行政中心兩個建築體,而展館主要是以觀展民眾為主,並非洽公人士,所以在展館中使用『行政區』來取代『館長室』更為洽當,而『館長室』的字樣則是標示在館長室的門口處。」以來訪者屬性做為判斷依據,是十分有效的策略,另外,針對與民眾觀展較無相關的空間,好比機房、電氣室、典藏室等,標示「禁止進入」即可。

不是在欣賞字的美感

綜觀近期公共設計選用字體,會發現嘉美館、新竹火車站、甚至北花線回遊號車體外觀都運用同一套字體「文鼎晶熙黑」。施博瀚分享字型選擇的眉角,一般情況下,方方正正、筆畫布局相對飽滿、近似圖像化的漢字較為適合,例如文鼎晶熙黑,原因在於這樣的字體少有視覺斷差,「如果字的下緣有一段凹進去的落差,遠看就會比較難辨識,但我們不是在欣賞字的律動美感,而是要夠醒目、夠容易判讀為佳。」


中文之外,歐文和標點符號也要納入考量,例如i、l、1三者相像,能明確辨識三者差異的字體就有機會成為設計師的首選。此外,讓指標能否「順眼」的關鍵還有一項:中英文長度差。當英文長度過長時,一般會直接壓縮處理,導致字體扭曲變形,比如火車站哺乳室的英文長度是中文的好幾倍,有鑑於此,施博瀚也特別追加一款窄版字型(Arial Narrow)供交替使用;公共設計要細膩,才會深得人心。

公共VS商業空間

公共指標一般不能輕易改動人們對icon的既有認知,反觀私人企業的指標系統案,畢竟屬於個人資產,把玩品牌風格之餘,也能從中進行更多創意發想。例如施博瀚曾經參與的西門町「路徒行旅」視覺識別設計,在登山越野風、英倫復古風交融,且藏有懷舊氣息的旅館空間裡,可見車牌廠商客製的房間門牌、老式鐵件製成的指示牌等,處處是巧思,與空間氛圍相得益彰,「配角要演得好其實不容易,就像演路人也要演得自然,否則搶掉主角的戲,整體就會很突兀。」


比起商業空間,公共場所的指標系統對可辨識資訊的要求更高,更趨近通用設計,而Roger認為,能否擁有高容錯率最為重要。「如果今天是上坡,結果icon讓我誤認為是下坡,進而造成身體上的危險;或是這個設備『我要你不要去碰』,因為它有電,結果你畫了一個icon,看來像是『歡迎大家去摸』,這都是很可怕的事。」依據視覺經驗不同,人們對符號的解讀也會有所不同,因此設計指標時要盡量符合多數人的符號想像,才能將意外傷害降至最低。

究竟,公共設計如何才能滿足大眾?施博瀚回答:「假設台灣人平均身高是165公分,但門框不可能就只做165公分,你一定要做到連最高的人也可以過得去的高度。」看待公共設計,就像數學的集合概念,光交集(A∩B)不夠,得聯集(A∪B)才行。

莊濟寰(Roger)

角白設計負責人暨創意總監。專長視覺設計、品牌規畫、跨領域策略制定、活動識別等,作品曾獲德國紅點設計獎(Red Dot)、TID大獎、金鼎獎、金點設計獎等殊榮。近期作品有:嘉義市立美術館視覺識別系統、2020蔡英文總統連任競選主視覺、台電企業形象旗艦館《電幻1號所 D/S ONE》等。

施博瀚

Bohan Graphi© 設計工作室負責人,擅長識別系統、品牌企劃、標準字設計。作品曾獲金點概念設計獎年度最佳設計、SDA BEST100、DFA亞洲最具影響力設計獎、ADAA決選、新一代設計銀獎等,並相繼收錄於多本設計刊物中;亦為繁體中文字型「凝書體」的創作者。

文|曾智怡

圖片提供|莊濟寰、施博瀚、台灣設計研究院

更多設計新知與美感話題皆在La Vie 2021/1月號《拆解一家餐廳》

延伸閱讀

RECOMMEND

微軟Office圖標新設計!流動線條、明亮漸層營造動態感,呼應人與AI流暢合作的產品體驗

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗

最近使用WordExcelPowerpointOutlook等程式,有沒有發現它們悄悄換上了新圖標(icon)?近日微軟(Microsoft)針對旗下10個主要Office應用程式,進行了2018年以來首次的圖標再設計,其保留原版大致架構,融入流暢曲線、鮮明的漸層色調,並簡化視覺元素,透過微小卻精妙的調整,呈現更易辨識、更具彈性和親和力的新形象。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

AI如何影響設計?微軟用這組圖標回應時代

電腦上的軟體圖標(icon)雖小,卻是完整使用者體驗不可或缺的一部分。設計精良的圖標,不僅得以將產品/服務功能、品牌識別等要素化繁為簡,更能在使用者心中留下難忘的視覺印象。然而隨科技飛速發展,人們生活及工作模式變動之快,圖標能否貼合時代脈動及使用者需求,也考量品牌及設計者的策略和功底。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

微軟Office上回推出新圖標已是2018年,距今推出的2025最新版已過7年。這期間AI技術發展極快,大大改變人們的工作模式,微軟也從中觀察到使用者對Office產品體驗的期待有所轉變,因此於2023年推出AI智能助理「Copilot」,提供內容協作、跨應用程式整合等服務,盼能透過人與AI之間流暢合作,達到提高生產力、激發創意等目標。時隔兩年再推Office新版圖標,則可視為將「人與AI流暢合作」此概念視覺化的設計行動,藉此反映出AI對設計及產品開發的實質影響。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)
微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

以「連結」為設計關鍵字

作為微軟Office宇宙中的「串連者」,CopilotLogo以彩色環帶般的視覺,象徵流動、整合、連結等特質,其有機線條及繽紛色彩,也成了Office圖標再設計的一大靈感來源。在新版圖示中,微軟汲取Copilot Logo意象,並以「連結」為關鍵字發展設計,其不僅意指視覺之間相互「連結」所達成的一致性,更體現了微軟Office體系無縫「連結」人與AI及各軟體,所帶來的流暢使用體驗。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)
微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

弧線 X 曲面 X 鮮亮漸層共組動感圖標

設計團隊秉持「進化,而非革命」的設計精神,不對圖標做大幅調整,而是透過精妙微調傳遞理念。2025新版圖標保留了原版既有的字母區塊,如代表WordWExcelX等,以確保即刻辨識度;並沿用原版大致架構,巧妙做了點「減法」,像是把Word圖標中原有的4個矩形調整為3個,減少視覺上的干擾。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)
微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

相對容易觀察到的改變在於「線條輪廓」和「色彩」。新版圖標以曲線取代銳利邊角、將形狀邊緣柔化,用曲面代替原先厚重且靜止的形體,讓整體視覺變得更加俏皮可親。用色方面,每個軟體沿用其代表色,像是Word的藍、Powerpoint的橘、Excel的綠等,但色彩變得更加飽和鮮亮,並擅用漸層創造視覺上的靈動感和立體度。透過這組動感又俏皮的新icon,微軟向世界遞出一封邀請函,邀人們打開Office一同激盪腦力和創造。

微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)
微軟Office圖標迎新版設計!流動線條、鮮亮色彩共織動感視覺,呼應人與AI流暢協作的產品體驗
(圖片來源:Microsoft Design)

延伸閱讀

RECOMMEND

讓字型成為品牌語言!華康如何與 LINE 打造品牌字態圈?專訪「LINE Seed 繁體中文版」設計團隊

字型,不再只是美感裝飾,更是品牌語氣的具象延伸。在企業識別進化的當下,LINE 與華康攜手打造的專屬字體「LINE Seed 繁體中文版」,成為一場以文字為主體、由視覺延伸至文化的共創實驗。這不只是開發一套字型,更是以華康深厚造字專業為核心,協助品牌構築屬於自己的語感系統,最終讓每一筆筆畫都能承載情緒、說出品牌。

企業字型的角色正在重塑!從過去識別系統中默默無名的配角,逐漸成為品牌語言與文化策略中不可或缺的主角。當 LINE 決定打造自己的中文字型,選擇與華康攜手合作,這段跨域共創的歷程,既展現了雙方對於語言、文化與設計的重視,也讓我們得以一窺品牌字型背後的技術鍊與溝通厚度。對華康而言,這是一場來自委託方的信任,也是一項從文化語境出發的造字任務。

(攝影:Liszt Chang)
(攝影:Liszt Chang)
(圖片提供:華康字型)
(圖片提供:華康字型)

從語氣到字氣:LINE 如何透過字型延續品牌語言?

LINE 長期經營的視覺體系裡,「Simple & Clean」不只是美學方向,更是一種語氣設定;簡潔、親切、具信任感,是品牌希望在每個使用介面中傳遞的感受;但當品牌逐漸橫跨更多語言、平台與服務,如何讓字型也能延續這份語氣,就成為一項關鍵挑戰。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

「我們的角色、色彩都已經很有辨識度,卻發現字體還缺一塊拼圖,」LINE 台灣資深設計總監 Kaka 這麼說道。從品牌素材到官方帳號LINE TODAY,每一次出現的文字,其實都在幫品牌說話。「希望創造『LINE Seed 繁體中文版』就是為了讓這個語氣,從圖像延續到文字,讓整體體驗更完整。」這樣的語氣需求,成為華康進入設計的起點。字型設計與開發部協理簡亨儒指出:「LINE 的字,不該太銳利、太張揚,而要像品牌本身那樣,溫和而清晰。」於是,華康從筆畫重心、字距配置到筆勢收尾,逐字修正語調,把抽象的品牌印象轉譯為具體的文字節奏。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

跨域對話裡的設計共識:語氣是討論出來的

五位來自 LINE 的設計師與華康團隊齊聚一堂,從專業技術聊到個人感受,每一次提問都像是把話題往更深的地方掘進。現場笑聲不斷,也讓人真切感受到這不只是一次合作專案,而是一段愉快而真誠的共創旅程;雙方用設計彼此回應,也在過程中看見專業如何被尊重、被理解,最後成為一種默契。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

設計師 Hana 形容:「我們設計師自己在開會,有時候可以為了一個小筆畫討論半小時,甚至聽完別人的意見後又推翻原本的結論。」這樣的過程,對華康來說並不陌生,但難得的是品牌方的積極參與與高度回饋。「很多品牌開發字型是『下單』,但 LINE 是真的『參與』。」華康協理簡亨儒說。除了結構、字距等基礎設計條件,LINE 團隊還會針對非漢字部件進行「許願」,甚至手繪草圖,提出對符號與細節的想像,再由華康轉化成字型語言。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

特別是 LINE Seed 繁體中文 是以日文字型為基礎延伸出的繁體中文版,華康需根據繁體邏輯重新調整諸多部件。歐文字型與符號設計師劉芮廷提到:「例如標點符號的擺位,其實在不同的語系裡都不一樣,需要依據繁中的習慣來製作,完成後進行排版檢視時,也還會需要再微調,讓視覺上更舒服。

(圖片提供:LINE)
(圖片提供:LINE)
(攝影:Liszt Chang)
(攝影:Liszt Chang)

當字型進入日常,它也走進了品牌的情感記憶

對華康來說,一套企業字型的完成,不在交稿那天,而在它真正被「使用」的那一刻。「其實我們沒有硬性規定大家要用這套字型,但很自然地,同事們就開始用了。」LINE設計經理 Winnie 分享。從簡報到提案、從社群內容到內部文件,LINE Seed 繁體中文版 幾乎成了團隊默默選擇的預設語言,也是字型真正落地的證明;尤其在中英混排的環境中, LINE Seed 繁體中文版 維持了視覺一致性,消除常見的「語感斷層」。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

協理簡亨儒指出:「我們當初就不是做一套華康的字,而是幫 LINE 做一套能說出他們品牌的字。」LINE 設計經理 Oneway 也補充:「我們希望有一天在書店、展場、或某支影片裡,能發現 LINE Seed 繁體中文版 被使用,讓這套字被聽見。」

(攝影:Liszt Chang)
(攝影:Liszt Chang)

那些印象深刻的筆畫調整:一筆一劃都得有理由

LINE Seed 繁體中文 是一套包含四個字重、總計超過五萬字的完整中文字集,背後所耗費的設計與溝通心力,遠比外界想像得龐大。從設計初稿到最終定案,雙方歷經了將近三年的來回,光是進入校對與調整階段,就花了超過半年時間,每一筆都反覆確認是否「像 LINE」。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

華康與 LINE 團隊都提到,「雨」、「辶」、「比」、「之」等字的討論特別深刻。像「雨」的四點水,就是一個代表性案例!它以看起來向輕盈的雨滴,有節奏地落下,正如 LINE 在字體上想說的話,不用大聲,但要被聽見,也要被感覺。「辶」這類部首,因應中日書寫差異,也需重新定義筆畫方向與收筆節奏。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

資深設計師 Mitch 分享,像「比」這樣筆畫簡單的字,中間那兩橫,一開始做得很平,看起來比較沒精神,後來改成微微上揚,整個語氣才提起來;而只有三筆的「之」也曾讓設計師苦惱不已,「平捺筆彎太多會太可愛,太直又顯得僵硬」。這些細節或許難以被察覺,卻在使用者閱讀時產生潛移默化的語氣感知;也正是這樣的堅持,讓 LINE Seed 繁體中文版 能被共感,而不只是看見。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

終於聽見字型的傾訴

企業字型的真正價值,不在於與眾不同,而是能否成為品牌語氣的一部分,潛移默化地被使用、被感受、被記住。在這段橫跨語系與專業的合作歷程裡,華康作為字型開發主體,不只是回應技術需求,更協助品牌用更有溫度、細膩的方式「把話說好」。這場設計歷程並未在字型上線那天結束,反而在使用與對話中持續延伸。10 28 日即將登場的《華康字型 × LINE 設計論壇》,也將揭開更多幕後細節!從非漢字設計、品牌語氣校準,到技術微調背後的選擇與取捨;論壇不只是分享成果,更是一場設計師與品牌人彼此學習、彼此理解的公開對談。

(圖片提供:華康字型)
(圖片提供:華康字型)

採訪最後,我們請團隊每人用一句話形容對 LINE Seed 繁體中文版 的直覺感受——有人說它「舒服」、有人說「清晰」、有人說「簡單友好」,也有人形容它像一個「會微笑的語氣」。這些答案沒有標準格式,卻恰好說明了字型的本質:它無聲,卻處處牽動感受。

(攝影:Liszt Chang)
(攝影:Liszt Chang)

論壇資訊

品牌字態圈|華康字型 x LINE 設計論壇

時間:2025 年 10 月 28 日(二)14:00 – 17:00

地點:臺北文創多功能廳 D&E 廳(台北市信義區菸廠路 88 號 6 樓)

講者:華康字型設計與開發部協理 簡亨儒、華康歐文字型與符號設計師 劉芮廷、LINE 台灣品牌行銷部資深設計總監 柯淑慧(kaka Ko)、LINE 台灣品牌行銷部資深設計師 尹相崙(Mitch Yin)、StudioPros 設計總監 李宜軒

報名請點此

文|邵瀠萱