自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

我用新擬物化設計風格,做了一個App改版案例

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

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

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

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

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

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

 

△ 中國臺灣人請大聲說出你的答案!

 

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

其實健保局已經(jīng)默默耕耘健??煲淄ê芫昧耍诮”?煲淄ǖ摹父母锶沼洝估锾岬剑”>譃榱俗尣v走向云端,打造病醫(yī)雙贏,從 105 年起,服務開始改革創(chuàng)新?!附”?煲淄ā购糜弥帲嗽谝咔槠陂g可以網(wǎng)絡預購口罩「eMask」之外,還有主打:院所查詢、健康存折、改革日記、醫(yī)療快搜、服務據(jù)點、健保法規(guī)、急診待床、急癥處理、常見問答等十大功能。

 

△ 健保快易通跟eMask的主要頁面

 

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

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

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

在這里總結一下,這次的新擬物化風格改造,將針對以下三點進行優(yōu)化:

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

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

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

步驟一:基本觀念

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

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

步驟二:打造組件

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

在幫組件上光影時,要先計劃好光打來的角度。如果是想要制造出適當?shù)目植栏校蛟S可以假設光從下方 90 度照射上來。不過一般來說,45 度角的光是最自然的太陽光。

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

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

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

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

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

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

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

 

△ 四大類界面組件

 

Level -1:凹界面

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

Level 0:平界面

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

Level 1:凸界面

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

Level 0.5:凸凹界面

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

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

額外步驟:細節(jié)控設計師限定

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

 

△ 細節(jié),是細節(jié)!

 

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

 

[[325223]]

△ 按鈕欠按,按鈕全家都欠按!

 

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

 


△ 一字排開,阿斯~

結論

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

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

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

 

責任編輯:未麗燕 來源: 優(yōu)設
相關推薦

2022-02-22 20:35:22

公鑰私鑰數(shù)據(jù)

2025-03-06 13:10:32

2020-07-15 15:09:21

Python掃雷游戲Windows

2020-11-16 09:02:38

Python開發(fā)工具

2021-04-29 15:53:21

AI 數(shù)據(jù)人工智能

2022-12-05 18:17:06

技術

2023-11-28 12:00:22

應用程序API

2018-01-15 15:00:06

工程師項目設計師

2013-05-21 11:22:15

Google+UI設計

2021-07-19 10:22:52

疫苗設計師百度

2019-08-14 16:56:38

Python職責模式請假

2021-05-10 10:26:31

技術資訊

2013-05-24 11:06:53

大數(shù)據(jù)行為數(shù)據(jù)

2013-07-08 10:40:02

2022-01-17 09:22:42

SwiftUI App Store開源

2015-05-21 15:46:20

2021-08-06 09:35:37

Python盯盤機器人編程語言

2018-06-11 17:31:00

俄羅斯P20手機

2015-11-06 10:14:36

APP虛擬服務器

2022-06-16 15:07:06

布局結構app
點贊
收藏

51CTO技術棧公眾號