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

 Villa finder app by Riko Sapto Dimo

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

信息布局上：

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

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

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

色彩：

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

图标：

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

控件：

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

设计细节：

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

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

应用场景：

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