1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

我用新拟物化设计风格,做了一个App改版案例--九分网络

时间:2020-06-17   分类:设计管理    作者:网络   来源:网络整理   点击:185

大家有没有发现 Facebook 近期的改版也开始在扁平界面中加入了一些拟物化风格的元素。身为一名 UI、UX 设计师,也趁着这波疫情足不出户自我隔离期,一起加入了这挑起争端的行列,这篇文章会以改造的口罩 3.0 界面教大家怎么制作拟物化风格的界面。

内容采集来自9fen.net

(注:由于作者是中国台湾设计师,用词略有差异,不影响文章阅读)

本文来自九分网络

疫情期间,数位转型成功带给民众的安心感

在这波疫情当中,从一开始坊间的防疫机器人、败口罩,以及疾管部门与 DeepQ 从 2017 年就开始就研发的「疾管家」(@taiwancdc),都在这段期间内帮用户减低了不少的焦虑。

copyright 9fen.net

而这次拿来改造的 APP 也是最近用户量暴增的「健保快易通」跟里面的「eMask」系统。关于「健保快易通」这个 APP,要不是因为这波疫情下载来订购口罩,根本不知道健保局发行的这款 APP 原来有么多实用的功能。

九分网络

健保快易通与口罩实名制2.0

其实健保局已经默默耕耘健保快易通很久了,在健保快易通的「改革日记」里提到,健保局为了让病历走向云端,打造病医双赢,从 105 年起,服务开始改革创新。「健保快易通」好用之处,除了在疫情期间可以网络预购口罩「eMask」之外,还有主打:院所查询、健康存折、改革日记、医疗快搜、服务据点、健保法规、急诊待床、急症处理、常见问答等十大功能。

copyright 9fen.net

我用新拟物化设计风格,做了一个App改版案例--九分网络 www.9fen.net

内容采集来自9fen.net

△ 健保快易通跟eMask的主要页面 copyright 9fen.net

而有多数实用的功能,都收藏在「健康存折」里,例如:近三年西医、牙医及中医就医纪录及用药资料、就诊行事历、过敏资料……族繁不及备载。我相信这部分的功能是可以再去做分层的,可以针对年龄或者使用习惯不同,将用户会优先用到的功能移至首页。 www.9fen.net

口罩实名制3.0与拟物化设计的挑战

虽然在这次的尝试中,页面 flow 不是设计重点,wireframe 的部分也是以原本的 APP 作为原型,但我还是有将主页的功能键做了一些调整,有将可以主打这支 APP 的超实用功能放到了主页面,因为真的是超棒的功能,不主打不行。另外也将 eMask 中拆成:口罩预购、订单记录、药局查询。如果有不合理之处再请大家给予指教。

www.9fen.net

在这里总结一下,这次的新拟物化风格改造,将针对以下三点进行优化: www.9fen.net

界面组件新拟物化设计

内容采集来自9fen.net

针对口罩实名制 3.0 加入了「家庭成员合购」功能,只要登录健保卡就可以代替家庭成员预购口罩

copyright 9fen.net

把其他贴心的功能,例如:用药查询、洗牙提醒放到了首页

九分网络

制作新拟物化风格只需要简单三步骤

在一开始学习如何制作新拟物化风格的界面时,参考了许多国外设计师的教学,大多数的文章都只有教到最起头的步骤。不过万事开头难,只要有了基本观念,其实就掌握了一半的概念了,赶快开启 Sketch、Figma 或 Photoshop 来试试看吧,以下为我自己统整的三个步骤,供大家参考: copyright 9fen.net

步骤一:基本观念

选好高光(highlight)、物件本体(object)、阴影(shadow)的 3 个色。 本文来自九分网络

我用新拟物化设计风格,做了一个App改版案例--九分网络

内容采集来自9fen.net

本文来自九分网络

先选好光照到的高光处、物体本体、物体下的影子的颜色,且物体与背景为一样的颜色。也可以选择其他色彩,不过要避免使用彩度过高的颜色,会使光影变成一坨光晕。

九分网络

步骤二:打造组件

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

九分网络

我用新拟物化设计风格,做了一个App改版案例--九分网络 www.9fen.net

九分网络

在帮组件上光影时,要先计划好光打来的角度。如果是想要制造出适当的恐怖感,或许可以假设光从下方 90 度照射上来。不过一般来说,45 度角的光是最自然的太阳光。 九分网络

如上图,黄色的线代表着 45 度斜射的光线,若是凸出平面的组件,就会在迎光处产生亮点,而在背光处产生阴影。若是凹平面,迎光处就会变到右下角的沟槽,左上角的沟槽就会产生阴影。若是平面,则不会有任何光影产生。 本文来自九分网络

把上个步骤做好的色块依照高光、对象、阴影来排列组合组件及阴影,排列好后再将高光跟阴影做高斯模糊处理(柔化),至于模糊程度就依各人喜好做调整。

内容采集来自9fen.net

有一个可以考虑的点是,若是界面想模拟的材质偏向粗糙面(例如:纸、布、皮革)则模糊的程度会越大,因为打在物体上的光会漫射;如果界面的材质是比较偏向可以反光的材质,则模糊的程度可以小一点。

九分网络

我用新拟物化设计风格,做了一个App改版案例--九分网络 copyright 9fen.net

九分网络

步骤三:做个有「深度」的界面

根据组件的可点击性将页面组件做不同层次的区别。

本文来自九分网络

标签: ui app 界面设计 改版实战 新拟物化设计 智慧医疗

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----