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