大家有沒有發現 Facebook 近期的改版也開始在扁平界面中加入了一些擬物化風格的元素。身為一名 UI、UX 設計師，也趁著這波疫情足不出戶自我隔離期，一起加入了這挑起爭端的行列，這篇文章會以改造的口罩 3.0 界面教大家怎么制作擬物化風格的界面。

(注：由于作者是中國臺灣設計師，用詞略有差異，不影響文章閱讀)

疫情期間，數位轉型成功帶給民眾的安心感

在這波疫情當中，從一開始坊間的防疫機器人、敗口罩，以及疾管部門與 DeepQ 從 2017 年就開始就研發的「疾管家」(@taiwancdc)，都在這段期間內幫用戶減低了不少的焦慮。

而這次拿來改造的 APP 也是最近用戶量暴增的「健保快易通」跟里面的「eMask」系統。關于「健保快易通」這個 APP，要不是因為這波疫情下載來訂購口罩，根本不知道健保局發行的這款 APP 原來有么多實用的功能。

健保快易通與口罩實名制2.0

其實健保局已經默默耕耘健保快易通很久了，在健保快易通的「改革日記」里提到，健保局為了讓病歷走向云端，打造病醫雙贏，從 105 年起，服務開始改革創新。「健保快易通」好用之處，除了在疫情期間可以網絡預購口罩「eMask」之外，還有主打：院所查詢、健康存折、改革日記、醫療快搜、服務據點、健保法規、急診待床、急癥處理、常見問答等十大功能。

而有多數實用的功能，都收藏在「健康存折」里，例如：近三年西醫、牙醫及中醫就醫紀錄及用藥資料、就診行事歷、過敏資料……族繁不及備載。我相信這部分的功能是可以再去做分層的，可以針對年齡或者使用習慣不同，將用戶會優先用到的功能移至首頁。

口罩實名制3.0與擬物化設計的挑戰

雖然在這次的嘗試中，頁面 flow 不是設計重點，wireframe 的部分也是以原本的 APP 作為原型，但我還是有將主頁的功能鍵做了一些調整，有將可以主打這支 APP 的超實用功能放到了主頁面，因為真的是超棒的功能，不主打不行。另外也將 eMask 中拆成：口罩預購、訂單記錄、藥局查詢。如果有不合理之處再請大家給予指教。

在這里總結一下，這次的新擬物化風格改造，將針對以下三點進行優化：

• 界面組件新擬物化設計
• 針對口罩實名制 3.0 加入了「家庭成員合購」功能，只要登錄健保卡就可以代替家庭成員預購口罩
• 把其他貼心的功能，例如：用藥查詢、洗牙提醒放到了首頁

制作新擬物化風格只需要簡單三步驟

在一開始學習如何制作新擬物化風格的界面時，參考了許多國外設計師的教學，大多數的文章都只有教到最起頭的步驟。不過萬事開頭難，只要有了基本觀念，其實就掌握了一半的概念了，趕快開啟 Sketch、Figma 或 Photoshop 來試試看吧，以下為我自己統整的三個步驟，供大家參考：

步驟一：基本觀念

選好高光(highlight)、物件本體(object)、陰影(shadow)的 3 個色。

先選好光照到的高光處、物體本體、物體下的影子的顏色，且物體與背景為一樣的顏色。也可以選擇其他色彩，不過要避免使用彩度過高的顏色，會使光影變成一坨光暈。

步驟二：打造組件

分辨光源位置制造凹凸有致的效果

在幫組件上光影時，要先計劃好光打來的角度。如果是想要制造出適當的恐怖感，或許可以假設光從下方 90 度照射上來。不過一般來說，45 度角的光是最自然的太陽光。

如上圖，黃色的線代表著 45 度斜射的光線，若是凸出平面的組件，就會在迎光處產生亮點，而在背光處產生陰影。若是凹平面，迎光處就會變到右下角的溝槽，左上角的溝槽就會產生陰影。若是平面，則不會有任何光影產生。

把上個步驟做好的色塊依照高光、對象、陰影來排列組合組件及陰影，排列好后再將高光跟陰影做高斯模糊處理(柔化)，至于模糊程度就依各人喜好做調整。

有一個可以考慮的點是，若是界面想模擬的材質偏向粗糙面(例如：紙、布、皮革)則模糊的程度會越大，因為打在物體上的光會漫射;如果界面的材質是比較偏向可以反光的材質，則模糊的程度可以小一點。

步驟三：做個有「深度」的界面

根據組件的可點擊性將頁面組件做不同層次的區別。

接下來就把上述的光影概念套用在界面組件上吧!在開始設計界面組件的時候，可以先想哪些組件適合用凹界面的效果，哪些組件適用凸界面，而哪些組件則是以平界面(無光影)表示即可呢?同樣，以下提供我的分類規則讓大家參考：

首先，我將組件分成四個層級(level)：-1、0、0.5、1。于是按照組件屬性去將界面以凹、平、凸、凹凸的方式模擬。

Level -1：凹界面

這個區塊給人尚未完成的感覺，會讓人產生想要把它填滿的意圖

Level 0：平界面

是一個承載其他組件及單純提供信息的區塊(一般扁平化的平面)

Level 1：凸界面

會讓人有想要按下、點壓的沖動的區塊

Level 0.5：凸凹界面

當凸界面上的元素被按下后形成一個暫時凹下的狀態

另外再補充一點：想要強調成距離用戶最近的組件/凌駕于界面之上的區塊，可以用比背景更白的白色呈現(例如：Header、Navigation Bar、Tab Bar)

額外步驟：細節控設計師限定

善用內光暈打造誘人的立體弧線

畢竟都在玩擬物化風格了，身為產品設計師，怎么可以放過任何能表現產品細節的地方呢，如果你也喜歡實體按鈕上的半立體涂層，會讓你產生想用指腹捏它的沖動，就用 Inner Shadow 來表現按鈕上 icon/文字的立體感吧。

[[325223]]

記得大學模型老師叮囑我們，做模型的時候就是要「膽大心細」，可以大刀闊斧地做任何造型外觀的嘗試，但最終還是要收于細節。雖然新擬物化風格可以運用的產品真的不多，不過新手設計師可以借由這個熟悉對組件、提高組件與光影的掌握以及增進軟件中 componants/symbols 的制作能力。最后，熱騰騰的 UI elements 就在屏幕前誕生了。

△ 一字排開，阿斯～

結論

不知道大家有沒有注意到，我保留了原本界面中既有的跑馬燈元素。跑馬燈是不是一個適合表現最新消息的方式雖然有待商榷，但個人覺得看到跑馬燈才有到公家機關辦事的感覺。

最后，呼應到上一篇新擬物化設計 Neumorphism 讓 UI、UX 設計師重新思考的 5 件事，在這里總結一下新擬物化設計帶來的好處：

• 大大的 buttons 讓各種年齡層的用戶都可以不會因為手抖或眼花按錯
• 避免使用過多的色彩讓用戶集中精神在吸收信息以及聚焦在采取動作上
• 四種 level 的凹凸組件可以讓用戶下意識產生自然的可操作性