第一眼看到觉得画面非常的干净、清晰。插画应用得很好,非常清新,插画虽占据了很大空间,但是完全没有影响内容表达;图标精致、表意明确,整个画面传递给我的是这个产品上的房源一定都很干净、有品质,什么元素都刚刚好,锦上添花的感觉~
信息布局上:
1.采用大留白与卡片式布局。应用亲密性原则将信息进行整合、分类,应用卡片进行信息聚合;采用图标与文字结合的形式让用户更快的解读信息,更快速的了解房源信息、易读易懂。
2.采用微投影的形式凸出已收藏、评论功能。
3.通过色彩(黄色、绿色)来凸出重要信息,与强按钮,吸引用户点击,引导用户操作。
色彩:
界面整体颜色调性为绿色,给人自然、干净、安静的感受。画面的色彩主要有两种,主色调为低明度低饱和度的绿色,辅助色为黄色,文字的颜色也是带点绿的黑色,让整体画面更加统一和谐。
图标:
功能图标与装饰性(信息辅助)图标都是采用线性图标,线性图标更轻量化,符合产品的气质。装饰性图标造型简单、表意明确,起到很好的传递信息的作用。已经操作的按钮是面性图标,且浮动到上层,是对用户操作的反馈,让用户清楚的知道已经收藏此房源。
控件:
按钮采用小圆角式的控件。全圆角的控件会偏向娱乐化、可爱一些,全直角又偏严肃,选用这种小圆角的是比较合适的。按钮的占比根据权重来体现,在详情页里面,预定按钮占据100%,能让用户更好的点击,也能很好的引导用户操作。
设计细节:
1.插画,这个界面的插画采用扁平的画风,给人自然、安静的感受,很好的传递了产品的气质与吸引用户。
2.这两个卡片的处理形式不一样,第二张卡片给人有点肌理质感的感觉(应该是采用了绿色到白色的渐变),增加了卡片细节。
应用场景:
可以借鉴到产品介绍、详情展示页面。也可以学习这中插画+卡片的布局形式,应用在一些产品流程相关的界面设计中。善于利用插画去传递产品气质与信息,让界面锦上添花。