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

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

疫情期間，數(shù)位轉(zhuǎn)型成功帶給民眾的安心感

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

而這次拿來改造的 APP 也是最近用戶量暴增的「健?？煲淄ā垢锩娴摹竐Mask」系統(tǒng)。關(guān)于「健?？煲淄ā惯@個(gè) APP，要不是因?yàn)檫@波疫情下載來訂購口罩，根本不知道健保局發(fā)行的這款 APP 原來有么多實(shí)用的功能。

健?？煲淄ㄅc口罩實(shí)名制2.0

其實(shí)健保局已經(jīng)默默耕耘健?？煲淄ê芫昧?，在健?？煲淄ǖ摹父母锶沼洝估锾岬剑”＞譃榱俗尣v走向云端，打造病醫(yī)雙贏，從 105 年起，服務(wù)開始改革創(chuàng)新。「健?？煲淄ā购糜弥?，除了在疫情期間可以網(wǎng)絡(luò)預(yù)購口罩「eMask」之外，還有主打：院所查詢、健康存折、改革日記、醫(yī)療快搜、服務(wù)據(jù)點(diǎn)、健保法規(guī)、急診待床、急癥處理、常見問答等十大功能。

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

口罩實(shí)名制3.0與擬物化設(shè)計(jì)的挑戰(zhàn)

雖然在這次的嘗試中，頁面 flow 不是設(shè)計(jì)重點(diǎn)，wireframe 的部分也是以原本的 APP 作為原型，但我還是有將主頁的功能鍵做了一些調(diào)整，有將可以主打這支 APP 的超實(shí)用功能放到了主頁面，因?yàn)檎娴氖浅舻墓δ?，不主打不行。另外也?eMask 中拆成：口罩預(yù)購、訂單記錄、藥局查詢。如果有不合理之處再請(qǐng)大家給予指教。

在這里總結(jié)一下，這次的新擬物化風(fēng)格改造，將針對(duì)以下三點(diǎn)進(jìn)行優(yōu)化：

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

制作新擬物化風(fēng)格只需要簡(jiǎn)單三步驟

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

步驟一：基本觀念

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

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

步驟二：打造組件

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

在幫組件上光影時(shí)，要先計(jì)劃好光打來的角度。如果是想要制造出適當(dāng)?shù)目植栏?，或許可以假設(shè)光從下方 90 度照射上來。不過一般來說，45 度角的光是最自然的太陽光。

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

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

有一個(gè)可以考慮的點(diǎn)是，若是界面想模擬的材質(zhì)偏向粗糙面(例如：紙、布、皮革)則模糊的程度會(huì)越大，因?yàn)榇蛟谖矬w上的光會(huì)漫射;如果界面的材質(zhì)是比較偏向可以反光的材質(zhì)，則模糊的程度可以小一點(diǎn)。

步驟三：做個(gè)有「深度」的界面

根據(jù)組件的可點(diǎn)擊性將頁面組件做不同層次的區(qū)別。

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

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

Level -1：凹界面

這個(gè)區(qū)塊給人尚未完成的感覺，會(huì)讓人產(chǎn)生想要把它填滿的意圖

Level 0：平界面

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

Level 1：凸界面

會(huì)讓人有想要按下、點(diǎn)壓的沖動(dòng)的區(qū)塊

Level 0.5：凸凹界面

當(dāng)凸界面上的元素被按下后形成一個(gè)暫時(shí)凹下的狀態(tài)

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

額外步驟：細(xì)節(jié)控設(shè)計(jì)師限定

善用內(nèi)光暈打造誘人的立體弧線

畢竟都在玩擬物化風(fēng)格了，身為產(chǎn)品設(shè)計(jì)師，怎么可以放過任何能表現(xiàn)產(chǎn)品細(xì)節(jié)的地方呢，如果你也喜歡實(shí)體按鈕上的半立體涂層，會(huì)讓你產(chǎn)生想用指腹捏它的沖動(dòng)，就用 Inner Shadow 來表現(xiàn)按鈕上 icon/文字的立體感吧。

[[325223]]

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

△ 一字排開，阿斯～

結(jié)論

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

最后，呼應(yīng)到上一篇新擬物化設(shè)計(jì) Neumorphism 讓 UI、UX 設(shè)計(jì)師重新思考的 5 件事，在這里總結(jié)一下新擬物化設(shè)計(jì)帶來的好處：

• 大大的 buttons 讓各種年齡層的用戶都可以不會(huì)因?yàn)槭侄痘蜓刍ò村e(cuò)
• 避免使用過多的色彩讓用戶集中精神在吸收信息以及聚焦在采取動(dòng)作上
• 四種 level 的凹凸組件可以讓用戶下意識(shí)產(chǎn)生自然的可操作性