「口罩實名制 3.0」介面如果是新擬物化設計風格，你可以嗎？

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

延伸閱讀：新擬物化設計Neumorphism讓UIUX設計師重新思考的5件事、Why flat Design is not Anti-Skeuomortphism

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

在這波疫情當中，從一開始坊間的防疫機器人、敗口罩，以及疾管署與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個色票

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

參考資料：Neumorphism (Soft UI) in User interface design — Tutorial

步驟二：打造元件

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

在幫元件上光影時，要先計劃好光打來的角度。如果是想要製造出恰吉的恐怖感，或許可以假設光從下方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/文字的立體感吧！

延伸觀看：細節大師Rams的紀錄片疫情期間免費觀看

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