美文网首页ui 产品样例UX/UI Design
看看大神在UI中是怎么应用插画的?

看看大神在UI中是怎么应用插画的?

作者: 晴天的设计宝藏 | 来源:发表于2020-07-05 22:56 被阅读0次
     Villa finder app by Riko Sapto Dimo

    第一眼看到觉得画面非常的干净、清晰。插画应用得很好,非常清新,插画虽占据了很大空间,但是完全没有影响内容表达;图标精致、表意明确,整个画面传递给我的是这个产品上的房源一定都很干净、有品质,什么元素都刚刚好,锦上添花的感觉~

    信息布局上:

    1.采用大留白与卡片式布局。应用亲密性原则将信息进行整合、分类,应用卡片进行信息聚合;采用图标与文字结合的形式让用户更快的解读信息,更快速的了解房源信息、易读易懂。

    2.采用微投影的形式凸出已收藏、评论功能。

    3.通过色彩(黄色、绿色)来凸出重要信息,与强按钮,吸引用户点击,引导用户操作。

    色彩:

    界面整体颜色调性为绿色,给人自然、干净、安静的感受。画面的色彩主要有两种,主色调为低明度低饱和度的绿色,辅助色为黄色,文字的颜色也是带点绿的黑色,让整体画面更加统一和谐。

    图标:

    功能图标与装饰性(信息辅助)图标都是采用线性图标,线性图标更轻量化,符合产品的气质。装饰性图标造型简单、表意明确,起到很好的传递信息的作用。已经操作的按钮是面性图标,且浮动到上层,是对用户操作的反馈,让用户清楚的知道已经收藏此房源。

    控件:

    按钮采用小圆角式的控件。全圆角的控件会偏向娱乐化、可爱一些,全直角又偏严肃,选用这种小圆角的是比较合适的。按钮的占比根据权重来体现,在详情页里面,预定按钮占据100%,能让用户更好的点击,也能很好的引导用户操作。

    设计细节:

    1.插画,这个界面的插画采用扁平的画风,给人自然、安静的感受,很好的传递了产品的气质与吸引用户。

    2.这两个卡片的处理形式不一样,第二张卡片给人有点肌理质感的感觉(应该是采用了绿色到白色的渐变),增加了卡片细节。

    应用场景:

    可以借鉴到产品介绍、详情展示页面。也可以学习这中插画+卡片的布局形式,应用在一些产品流程相关的界面设计中。善于利用插画去传递产品气质与信息,让界面锦上添花。

    相关文章

      网友评论

        本文标题:看看大神在UI中是怎么应用插画的?

        本文链接:https://www.haomeiwen.com/subject/vqnbqktx.html