在這波疫情當(dāng)中，從一開始坊間的防疫機(jī)器人、敗口罩，以及疾管部門與 DeepQ 從 2017 年就開始就研發(fā)的「疾管家」（＠taiwancdc），都在這段期間內(nèi)幫用戶減低了不少的焦慮。
而這次拿來(lái)改造的 APP 也是最近用戶量暴增的「健？煲淄ā垢锩娴摹竐Mask」系統(tǒng)。關(guān)于「健？煲淄ā惯@個(gè) APP，要不是因?yàn)檫@波疫情下載來(lái)訂購(gòu)口罩，根本不知道健保局發(fā)行的這款 APP 原來(lái)有么多實(shí)用的功能。
其實(shí)健保局已經(jīng)默默耕耘健？煲淄ê芫昧耍诮”？煲淄ǖ摹父母锶沼洝估锾岬剑”＞譃榱俗尣v走向云端，打造病醫(yī)雙贏，從 105 年起，服務(wù)開始改革創(chuàng)新！附”？煲淄ā购糜弥，除了在疫情期間可以網(wǎng)絡(luò)預(yù)購(gòu)口罩「eMask」之外，還有主打：院所查詢、健康存折、改革日記、醫(yī)療快搜、服務(wù)據(jù)點(diǎn)、健保法規(guī)、急診待床、急癥處理、常見(jiàn)問(wèn)答等十大功能。
△ 健？煲淄ǜ鷈Mask的主要頁(yè)面
而有多數(shù)實(shí)用的功能，都收藏在「健康存折」里，例如：近三年西醫(yī)、牙醫(yī)及中醫(yī)就醫(yī)紀(jì)錄及用藥資料、就診行事歷、過(guò)敏資料……族繁不及備載。我相信這部分的功能是可以再去做分層的，可以針對(duì)年齡或者使用習(xí)慣不同，將用戶會(huì)優(yōu)先用到的功能移至首頁(yè)。
雖然在這次的嘗試中，頁(yè)面 flow 不是設(shè)計(jì)重點(diǎn)，wireframe 的部分也是以原本的 APP 作為原型，但我還是有將主頁(yè)的功能鍵做了一些調(diào)整，有將可以主打這支 APP 的超實(shí)用功能放到了主頁(yè)面，因?yàn)檎娴氖浅舻墓δ，不主打不行。另外也?eMask 中拆成：口罩預(yù)購(gòu)、訂單記錄、藥局查詢。如果有不合理之處再請(qǐng)大家給予指教。
在這里總結(jié)一下，這次的新擬物化風(fēng)格改造，將針對(duì)以下三點(diǎn)進(jìn)行優(yōu)化：
- 界面組件新擬物化設(shè)計(jì)
- 針對(duì)口罩實(shí)名制 3.0 加入了「家庭成員合購(gòu)」功能，只要登錄健？ň涂梢源婕彝コ蓡T預(yù)購(gòu)口罩
- 把其他貼心的功能，例如：用藥查詢、洗牙提醒放到了首頁(yè)
在一開始學(xué)習(xí)如何制作新擬物化風(fēng)格的界面時(shí)，參考了許多國(guó)外設(shè)計(jì)師的教學(xué)，大多數(shù)的文章都只有教到最起頭的步驟。不過(guò)萬(wàn)事開頭難，只要有了基本觀念，其實(shí)就掌握了一半的概念了，趕快開啟 Sketch、Figma 或 Photoshop 來(lái)試試看吧，以下為我自己統(tǒng)整的三個(gè)步驟，供大家參考：
步驟一：基本觀念
選好高光（highlight）、物件本體（object）、陰影（shadow）的 3 個(gè)色。
先選好光照到的高光處、物體本體、物體下的影子的顏色，且物體與背景為一樣的顏色。也可以選擇其他色彩，不過(guò)要避免使用彩度過(guò)高的顏色，會(huì)使光影變成一坨光暈。
步驟二：打造組件
分辨光源位置制造凹凸有致的效果
在幫組件上光影時(shí)，要先計(jì)劃好光打來(lái)的角度。如果是想要制造出適當(dāng)?shù)目植栏校蛟S可以假設(shè)光從下方 90 度照射上來(lái)。不過(guò)一般來(lái)說(shuō)，45 度角的光是最自然的太陽(yáng)光。
如上圖，黃色的線代表著 45 度斜射的光線，若是凸出平面的組件，就會(huì)在迎光處產(chǎn)生亮點(diǎn)，而在背光處產(chǎn)生陰影。若是凹平面，迎光處就會(huì)變到右下角的溝槽，左上角的溝槽就會(huì)產(chǎn)生陰影。若是平面，則不會(huì)有任何光影產(chǎn)生。
把上個(gè)步驟做好的色塊依照高光、對(duì)象、陰影來(lái)排列組合組件及陰影，排列好后再將高光跟陰影做高斯模糊處理（柔化），至于模糊程度就依各人喜好做調(diào)整。
有一個(gè)可以考慮的點(diǎn)是，若是界面想模擬的材質(zhì)偏向粗糙面（例如：紙、布、皮革）則模糊的程度會(huì)越大，因?yàn)榇蛟谖矬w上的光會(huì)漫射；如果界面的材質(zhì)是比較偏向可以反光的材質(zhì)，則模糊的程度可以小一點(diǎn)。
步驟三：做個(gè)有「深度」的界面
根據(jù)組件的可點(diǎn)擊性將頁(yè)面組件做不同層次的區(qū)別。
接下來(lái)就把上述的光影概念套用在界面組件上吧！在開始設(shè)計(jì)界面組件的時(shí)候，可以先想哪些組件適合用凹界面的效果，哪些組件適用凸界面，而哪些組件則是以平界面（無(wú)光影）表示即可呢？同樣，以下提供我的分類規(guī)則讓大家參考：
首先，我將組件分成四個(gè)層級(jí)（level）：-1、0、0.5、1。于是按照組件屬性去將界面以凹、平、凸、凹凸的方式模擬。
△ 四大類界面組件
Level -1：凹界面
這個(gè)區(qū)塊給人尚未完成的感覺(jué)，會(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）
△ 凸凹界面：在凸界面的button上再做一次凹界面效果
額外步驟：細(xì)節(jié)控設(shè)計(jì)師限定
善用內(nèi)光暈打造誘人的立體弧線
△ 細(xì)節(jié)，是細(xì)節(jié)！
畢竟都在玩擬物化風(fēng)格了，身為產(chǎn)品設(shè)計(jì)師，怎么可以放過(guò)任何能表現(xiàn)產(chǎn)品細(xì)節(jié)的地方呢，如果你也喜歡實(shí)體按鈕上的半立體涂層，會(huì)讓你產(chǎn)生想用指腹捏它的沖動(dòng)，就用 Inner Shadow 來(lái)表現(xiàn)按鈕上 icon/文字的立體感吧。
△ 按鈕欠按，按鈕全家都欠按！
記得大學(xué)模型老師叮囑我們，做模型的時(shí)候就是要「膽大心細(xì)」，可以大刀闊斧地做任何造型外觀的嘗試，但最終還是要收于細(xì)節(jié)。雖然新擬物化風(fēng)格可以運(yùn)用的產(chǎn)品真的不多，不過(guò)新手設(shè)計(jì)師可以借由這個(gè)熟悉對(duì)組件、提高組件與光影的掌握以及增進(jìn)軟件中 componants/symbols 的制作能力。最后，熱騰騰的 UI elements 就在屏幕前誕生了。
△ 一字排開，阿斯～
不知道大家有沒(méi)有注意到，我保留了原本界面中既有的跑馬燈元素。跑馬燈是不是一個(gè)適合表現(xiàn)最新消息的方式雖然有待商榷，但個(gè)人覺(jué)得看到跑馬燈才有到公家機(jī)關(guān)辦事的感覺(jué)。
最后，呼應(yīng)到上一篇新擬物化設(shè)計(jì) Neumorphism 讓 UI、UX 設(shè)計(jì)師重新思考的 5 件事，在這里總結(jié)一下新擬物化設(shè)計(jì)帶來(lái)的好處：
- 大大的 buttons 讓各種年齡層的用戶都可以不會(huì)因?yàn)槭侄痘蜓刍ò村e(cuò)
- 避免使用過(guò)多的色彩讓用戶集中精神在吸收信息以及聚焦在采取動(dòng)作上
- 四種 level 的凹凸組件可以讓用戶下意識(shí)產(chǎn)生自然的可操作性
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。