政府網站營運交流平台

我們想讓你知道的是… 在不知道整個開發過程的背景脈絡，直接跳下來做再設計是非常危險的事，在沒有開發時程、經費限制，不知道任務背後的考量、任務優先次序、使用者的使用數據、現有程式限制等，作者僅能單就自身經驗與猜測，重新思考這個軟體。 雖然思考會變得非常片面，但另一方面，或許可以這樣思考：本文僅提供另一種不同的聲音。但不表示作者的意見就絕對正確，軟體開發本來就是各種不同聲音融合下，討論、衡量過不同得失之後，取得當時最佳的方案。

---

文：Chun-Chuan Lin（互動設計師）

 

「臺灣健保行動快易通」再設計

配色

會以藍綠為主色調，搭配淡橘色，主要參考健保署現有改良過的文宣、網站的配色。考量之後或許 App 還會有更多連結到健保署網頁的捷徑，所以以健保署現有色調為主，避免新增過多調性，反而與健保署網站相衝突，或是調性無法融合。再者，藍綠色調給人沈穩放鬆的感覺，的確適合醫療保健相關產品，而淡橘色有輕快活潑的感覺，讓人感到光明，適合作為輔色。高山綠、海洋藍、晨曦橘，也符合台灣意象（好啦，這是我掰的）。

 

 

圖1：健保署文宣及網站配色示意

 

圖2：健保署網站上可怕的 Banner，這些是別的議題，列入待改進清單

 

整體資訊架構與視覺編排檢視

我一開始研究 App，通常就是會拼命截圖，去瞭解整個軟體架構，也大概知道有哪幾種資訊類型以及內容樣式。其實會發現，有些好像沒這麼重要的功能，卻都放在導覽列上。也會發現有不同樣式的按鈕、狀態頁、列表、圖示、色調。

程式預設紅、綠、藍直接套用，公部門美學在此展露無遺，不禁令人莞爾一笑。這樣的視覺呈現，或許是另類地表達台灣文化的多樣性，而程式的不穩定性，或許就是在測試民眾的耐性與堅毅性，且帶有破關的樂趣。

後面我會再討論對於資訊重整的看法，但下面就會單就個別頁面給予個人意見，以不動現有資訊架構為原則（畢竟不確定當時是否有特別考量）。

 

圖3：APP部分截圖，可大概瞭解階層關係與視覺風格

 

0. 啟動頁

英文稱作 Splash screen 或 Launch screen，會有這個頁面主要是因為載入程式需要時間，而啟動通常有兩種形式，一種是放上 Logo 展現品牌特色，一種則是放上 Placeholder，降低等待感。iOS Human Interface Guidelines 雖然不建議第一種，但 Android Material Design Guideline 則是兩種都列舉。

基本上啟動頁大概就只有視覺美感的問題（見仁見智的主觀感受），自己對於字體和顏色的選用有些意見，另外背景也過於繁複，感受到畫面上的物件都在試著喧嘩，強調自己的存在。

我試著簡化 Logo，把色調和背景變得乾淨一些，可以把 Logo 放大並移至上方，當作主軸。（抱歉，動了 Logo，現有各類出版物和或是看板也可能遭受影響，但我有把它列入設計限制，我在維持主意象不動下，僅作微調，可以減少衝擊。）

另外，我有考慮 Logo 這邊可以設計個動畫，有機會之後再補。

 

圖4：APP現行啟動頁(左)／再設計成果(右)

 

1. 快捷頁

看起來算是整個 App 的核心重點，基本上把所有主要功能都塞在這一頁了，各主功能的主要入口處。

這一頁最大的問題是，為什麼需要把功能選單切分成兩頁，為什麼不做一頁再一起就好？這樣操作步驟會變多。如果是想要強調部分功能，減少資訊量，也可以做單頁，把不重要的入口藏起來，然後有需要再展開，但仍在同一頁面上，而不用點擊「更多」與「回上頁」中來回切換。

這頁跑馬燈的概念是蠻有趣的，會想到醫院或是公部門常有的硬體設施，所以我也於以保留，但它其實可以點擊，所以我加了一個廣播的圖示，另外也調整了一下色調。

功能圖示部分，目前有些直接用圖片，會與其他風格不搭（例如：改革日記），但能理解為了宣傳書籍，使用圖片讓人印象更深刻，在書店看到，比較有熟悉感。取捨之下，我還是以 App 內感受為重。也猜測目前口罩預購為主要使用該 App 的原因，所以把它放大，有點像是廣告 Banner 的感覺，但未來如果有其他更重要的功能，可以替換。

圖示我採用半插畫的方式，其實有思考要以更簡單的風格還是半插畫式的，後來想說，讓頁面活潑一點，讓醫療冰冷的感受沒那麼強烈，而且現有的也是插畫風格，所以還是採用插畫。也考慮過是否需要塊狀的按鈕背景，後來想想，對部分使用者而言，或許多一點邊框感，會更有可以點擊的感覺。

 

 

圖5：APP各個小 icon 圖示，已統整為同一風格，讓線段粗細與圖案複雜度呈現一致

（未完待續）

 

Chun-Chuan Lin [email protected] 作品網址 be.net/designlcc 原文出處Medium 政府網站營運交流平台授權轉載