当前位置:首页 > 星盘分析 > UI基础专题|图片种类有哪些?图片设计规范有哪些?

UI基础专题|图片种类有哪些?图片设计规范有哪些?

关键词:???发布时间:2019-09-27 08:40:01

点击蓝字关注回复“设计”领取设计大礼包

编辑:小A

全文阅读:3分钟

网页中的图片设计,是UI设计中的重点。它们是网页中最常见,也是最直观可见的元素。

今天就和大家分享图片设计的规范。


01
用户头像


目前头像图片通常使用圆角矩形和圆形两种,如图,图形能聚焦内容,显得饱满。的从形式感来说,圆形会显得有新意,不那么呆板,适合展示真人头像;缺点是非人像的照片或其他传统图标都是基于方形的,裁成圆形损失会比较大,显得比较死板。

社交应用使用头像场景比较多,以下以此类应用举例说明。在应用的列表页使用了44*44的头像,帖子详情页使用了60*60的头像,在应用的消息列表页使用了80*80的头像,在应用的消息列表页使用了96*96的头像,在应用的个人中心页使用了144*144的头像。


02
商品图片


商品图片统一不用圆角,1PX灰色描边,在浅色背景下,灰色可以很方便地将图片和背景区分开来。图片一般使用1:1比例,或者3:2比例。电商应用程序使用商品图片场景较多。


03
无数据图片


1商品底图


在加载页面的时候,图片可能没有加载出来,这时图片位置不能为空白页,需要有一个默认无数据的图片占位,这个默认图片,一般采用灰调设计。图片中可放上应用的logo或者应用中的全局图形。规范中图片有多少尺寸,就应有相同尺寸的无数据商品图。

2头像底图


在用户没有上传头像的时候,可以有一个默认头像的设计,由于头像图片是规则的1:1比例,所以只需要设计一个最大尺寸的默认头像图片。

3无数据图


在某些默认情况下,用户的数据为空,也需要设计一个图片。如网络不顺畅时,淘宝应用使用的是图标加文字的形式。如果应用有了全局图形,也可以把这个图形融入无数据图设计中。


04
总结



? 今天分享的是图片设计规范知识,分为用户头像、商品图片、无数据图片这3大块,看完之后相信大家对UI设计中图片的设计尺寸、图片设计中需要注意的问题、不同场景下的图片样式有清晰的了解

注:图片和文字来源于余振华《术与道—移动应用UI设计必修课》一书,版权归原作者所有!


想看更多好看又实用的内容

赶紧?星标 置顶?我呀



爱我请给我好看!


相关内容
分享 2019-09-27 08:40:01

0个评论

文明上网理性发言,请遵守新闻评论服务协议