ARSPIRE 17.1 好的導覽設計 Design for easy navigation

今天，不論做甚麼事情、在那個行業，都強調客人的體驗(UX User Experience)。無論在現實的建築空間，還是虛擬的網上世界，沒有好的導覽設計，客人找不到想找的東西，自然無法好好使用其服務或產品；客人感到迷失生厭，日後自然不願再度來訪。

Graphic from https://inbound.org

最近，我便要為我的初創企業寫一個功能頗多的網頁，雖然所有建築師都有點平面設計基礎，會Photoshop的我，Illustrator難不了我，即使Wordpress對我這新手是有點難，但身邊還有其他IT人和懂媒體設計的人，相信技術部份該還可以應付，更難的怕是如何分辦網頁的好壞，理解客人的體驗(UX User Experience)，和團隊一起做設計，遇到分岐時，自己都不懂，又如何能做出正確的決定？更如何可以以理服人呢？就如畫畫，要會「畫」畫，先要學懂「看」畫，懂「看」的人，（在此不詳談，希望他日另立專題和大家分享），只要把握一點媒體的技巧，便不難得心應手，所以會畫某種畫的人，很容易就一理通，百理明，學會其他畫種。

看了網頁的發展，發覺近年大部份都趨向相同的格式，一般都非常簡潔，開始懷疑這是否只是一個潮流，大家覺得這樣最美觀，還是有背後的原因呢？從事設計多年的我，當然知道再美觀的東西，如果不好用，都稱不上是好的設計，就像再漂亮的鞋子，不好穿最終也只會給人擱在一旁。在網頁，如果找不到想找的東西，又或看來很複雜，根本無法理解，自然沒有興趣繼續探索下去，那麼即使再美觀、再有個性，也只是圖勞無功，所以如何導覽是非常重要的。

網頁設計自己沒經驗，也沒有太多朋友可以請教，但做建築物的標誌，可有不少經驗，不單在P&T時，曾經和公司的平面部門一起做了蘇州喜來登酒店的標誌設計（因為那家顧問公司中了標後倒閉了），也參與了不少項目的標誌設計，更經歷過複雜如希慎廣場的個案，明白各方的要求，更看見計劃和現實的落差。還有，身邊有不少建築標誌設計高人，既然自己愛玩跨界，何不同時談談現實空間與虛擬空間的導覽，或許可以從中悟出一點道理來呢？

Annie 和Sammy分享他們做地鐵標誌的經驗

今夜請來了兩位P&T的舊同事，Annie Chan和Jacob Ho。Annie 退休前（現仍為MTR做顧問），在香港鐵路有限公司MTR從事標誌設計多年，她和另一位也是來自港鐵的嘉賓Sammy To， 是多年的好拍檔，一起做了香港及國內不同城市的地鐵標誌設計，如深圳、廣州、南京、北京等。Annie 在做標誌設計前，曾參與車站的營運及優化工程，又做過不少新車站的規劃，故對車站的運作、行人的流線，都瞭如指掌。

Jim 和Jacob

Jacob Ho 創立的標誌工程公司－至形（Gradation) ，團隊在港有二十多人，在國內有超過百五人，規模相當大，香港許多大企業都是他的客戶，還包括了興建中的上海狄士尼Disney，據他說，園內的標誌非常不一樣，做起來更像做藝術品。我還請了做網頁設計多年的Jim，他在創立獅子山設計前，也曾在大廣告公司工作，目睹了網頁設計行業的轉變。本來還有一位建築師Vincent Lai, 他不但有設計大型項目標誌的經驗，還是一位出色的網頁設計師，可惜，這夜他抱恙未能出席，但他還是和我分享了他最近為慈山寺做的設計。

Vincent 為慈山寺設計的電梯樓層標示，直接用上了中國「三」字來表示各層，非常簡潔

除了嘉賓的分享，也看了不少關於導覽設計的書籍，做了點功課，在此和大家分享：

認清目的 了解不同訪客的需要

導覽設計是為不熟悉某地方的人而設的，在網絡世界，就是那些新來的訪客；在現實世界，要接待新訪客的建築類型如交通輸杻、酒店、商場、醫院等，至為重要。不同用途的建築，客人的目可以很不同，訪客中，有的已清楚知道自己在尋找甚麼，如在車站中找某路車的人，導覽設計要引領他們走最快最短的路；有的則漫無目的，如在商場中，到處逛是消遣的一部份，只要知道身處何地，找到電梯廁所，不迷路便可以；有的屬半探勘的，心裏只有意願和問題，未有明碓的目標。對於經營商場的，當然希望延長客人逗留的時間，加長路線以增加沿線商店的數目，甚至刻意帶客人「遊花園」。兩種南轅北轍的目的，自然會得出很不同的設計，前者直接了當，後者則可能稍為迂迴，（但過了份則難免換來客人的不滿），更可能在途中加入別的選擇，如插入讓人垂涎的食物照片以推介鄰近的餐廳，就如網頁嵌入其他廣告和內容一樣。

經驗豐富的Jacob，便知道弄清目的及誰是目標客群，是非常重要的，讓各持份者提出自己的要求，並聆聽別人的想法，找出平衡點是非常關鍵的，所以他會在項目開展時，爭取各相關部門坐在一起，如市場推廣、租務、設計、物管、技術等，弄清各方要求，擺平各方矛盾，減少日後翻工的機會。

直覺操作 不假思索
　

網頁設計有本經典著作，名字改得很好，稱為"Don't make me think"，好的導覽設計，一切都那麼流暢自然，不用動腦筋，單憑直覺便可以去到要找的地方。

所有設計都是為人服務的，而人在不知不覺間，已養成了不少習慣，並慢慢地建立了一些「合理期望」，就如我們入門便在門口附近找電燈的開關。我們也會期望在分叉路前有標示，在網頁上方或左方有導覽列(Navigation menu bar)。同樣，我們看東西也有既定的習慣，如看東西從上而下，從左而右(這與全球通行的阿拉百數目字的寫法有莫大的關係)，地圖上方是北，粗大當眼的比幼小偏側的重要，外觀相同的是同類⋯⋯還有許多深入民心的符號，如男女代表洗手間、有人的方廂代表電梯、i 代表詢問處、放大鏡代表尋找........。如果我們貿然違反這些習慣，讀者則馬上要另覓解讀的方法，頓時要動起腦筋來。在網絡世界，這點對今天越來越沒有耐性的網民，更是重要，他們只要稍感複雜或吃力，便會馬上放棄。

人的習慣，不少也被應用到介面設計上，即使實物不存在，也模仿一些故有的效果和感覺。如將點擊的位置由平面變成擬似按鍵的模樣，讓人一看便知道它是可以按的，還模擬了按下的效果，提高了人們點擊的意慾和行動的回饋; 又如屏幕轉畫面做成像翻傳統紙本書頁的效果，以滿足人對看書的感覺和習慣。

流程圖 Site Map

不論實體空間或虛擬空間，都需要規劃出一張好的流程圖。現實空間導覽，有清晰的時間距離軸貫穿，每進一個空間，又或在分叉路口前，都要為行人提供方向以便選擇正確的路徑。對於地鐵這一類的交通建築設計，流線是相當清晰的，從街外入站，從未付款區付款入閘，然後在已付款區到月台， 都是很有規律的，所以地鐵公司有清晰的内部指引，列明各區要提供何種標誌。至於行人的流線，是順時針還是逆時針，完全取決於站內自動扶梯行走的方向，這些扶梯於上下班高峰期時，會順應需要而逆行，以疏導人潮。

MTR 每一區使用的標誌內部都有清晰的指引

流程圖的概念，不單在現實環境中重要，也是做網頁設計的關鍵步驟，一頁就像一個室內分區，一個連結就像一道通往另一房間的門。要有好的瀏覽體驗，就不能製造過多的層次，為訪客設下許多關卡，一般而言，最好不要超過三次點擊，便要抵達目的地。

為訪客設想問題，不要設下死胡同

設計要不停代客人設問，想像他們要找的是甚麼，同時也要為自己設問，想在客人此行得到些其麼。此外，還有一些必要的輔助功能，如洗手間、電梯位置，在網頁則可能是查找、聯絡、登入／登出等工具。

不管現實世界或是虛擬空間，也不能引訪客進入死胡同，即使已引領客人到了目的地，也要考慮如何帶訪客離開，又或引領他們繼續瀏覽希望他們光顧的地方，像設下安全網，爭取接著遊蕩或已完成任務的使用者。設計還要考慮，客人可能迷路或犯錯，有回頭或重新尋找的機會。Annie 告訴我們，地鐡的標誌設計，除了平日常用的，還要考慮遇到危急或突發事件時，如何引領乘客安然離開，只要我們留意一下，便會發現這些平日不發光，卻隨時候命的緊急指示牌。

明白視覺及介面的限制

所有設計都要面對不同的限制，由人本身到介面的篇幅尺寸。

人的視力有限，看不見遠處過小的字體，年紀大了，這問題便更為嚴重，當距離較遠時，人接收到的光線有限，發光的標誌會較易看到。人看過於長的句子，也會容易迷失，所以不管昔日的報紙雜誌，或今天的網頁，都會分欄，而分欄的數目許多時成了重要的設計決定。

除了距離限制外，觀看的時間也決定了文字和圖需要的大小，Jacob 便為我們推介了美國在這方面的指引，讓我們可以按距離、觀看的時間來推算字體的大小。

字體的大小取決於觀看的距離

今天，人越來越缺乏耐性，許多瀏覽網頁的人只會走馬看花，不會閱讀詳細的內容，故今天的網頁設計，都趨向極為簡潔，盡量用跨頁的大圖或幻燈，希望能一圖勝萬言，留下深刻的印象，再在當中加入少量關鍵文字，盡量做到非常扼要。

介面方面，在現實空間，在那兒放甚麼指示是建築標誌設計的第一步，放的位置要留意是否會被其他物件所摭擋，許多時要按實際環境調整，不一定可以放在最理想的位置。此外，科技為我們帶來了許多新的智能標誌，如利用互動電視屏幕作為指示圖，但這些新介面並不一定受到歡迎，更多的人還是喜歡使用傳統的指示牌設計，一方面不用動腦筋，另一方面，也不用等別人用完，才能使用。

要進入網絡世界，今天主要介面不只是桌上橫向的電腦屏幕，還有五花八門的行動裝置，最細的就只有兩三吋的手機屏幕，這寬度成了設計的一個重要局限，設計也不再只是一個標準，而是設下不同寬度的臨界點，然後改變欄的數目和版面，變成可以適應不同裝置的全方位設計。

平衡實用與美觀

好的設計會幫助人理解，利用相同的字體、大小、顏色，幫助人識別不同的種類和層次，利用強烈的對比，把人的眼睛吸引到重點之上，區分出甚麼是主要訊息，甚麼是次要的訊息，當然也不能忘卻一些必要的功能。

沒有經驗的設計師，有時會因處理不了畫面的舖排或較多的內容，而強行削足適履，把一些需要的資料省掉。有時可能為了追求更優雅的設計，而選用了太細小或過於纖幼的字體，讓人不好閱讀。還有設計師認為使用常規的設計，便欠缺創意，但正如上述，許多訊息的接收是建基於人們的習慣，如果過份違背常規，又或做得過份抽象難明，別人找不到或難以理解，那這些創新便沒有價值了。

除了功能問題外，設計還有許多不是對與錯的決定，如顏色、字型、風格等，這都要回到基本的問題上，設計希望目標客群看了有甚麼感覺，接收到甚麼訊息，建立怎樣的印象，而非純粹設計師的個人喜好。

標誌設計及製造

來賓從事標誌及平面設計多年，目睹著行業的變遷。和許多其他行業一樣，科技讓進入行業的門檻變得很低，昔日做平面設計，單是學用筆，買需要的工具、括字，都花費不少，但今天，軟件越來越容易使用，只要願意花點時間，任何人都可掌握繪圖的技巧，加上互聯網接通了供與求的市場，讓繪圖的酬勞大幅下降，也同時大大削弱了昔日大廣告公司作為中間人的角色。

大企業甚至自行建立設計團隊，既可得到更即時的服務，又可免點子外洩。承建商也不斷加強設計的實力，一方面可以提供設計和製造一條龍服務，另一方面可以為設計＂補底＂（因不管誰錯，施工的都會成為錯誤的直接受害者）。我心想，這怕是所有建築相關行業的寫照。

Jacob 還分享了施工的一些經驗，今天他們經常要在現場為所有標誌做原大樣板，把每道門的名稱貼出來，讓各方可以看著實物發現問題，在製造前解決各方的矛盾。做網絡介面的，要避免太多翻工，也該在詳細編碼前，多收集用戶的意見，早點找出問題。

幾年前，我和同事Sunny Wong 便為希慎設計了一組多件的戶外利園區指示牌，這個經驗讓我感到建築標誌設計一點也不簡單。它們雖小，卻是人們最留意的東西，在設計上，扮演著重要的角色，它們不單要美觀，還要地基牢固，抵擋強風、日曬雨淋，經得起磨損及破壞，還要解決接電、防水、發光等問題，本身儼如一間小屋，一點也不簡單。這點Jacob非常認同，他曾建議理大開辦建築標誌設計課程，作為在產品設計的分支，讓更多人認識這門設計，並了解這個龎大的市場。

為Hysan設計的利園地區標記及指示牌

導覽設計，看似簡單，卻影響著我們每天的生活，Annie 說得好，她想要是設計能為人每天省下一分鐘，那加起來便會是一件功德無量的貢獻。