
使用猪八戒APP
随时随地享服务
发布:2026-04-08 10:17:51 0浏览
用户在设计界面时,基本上都避免不了图片的使用。尽管产品上线后不好控制实际的上线稿,但在做设计过程中,图片的选择是需要谨慎的,为的是把最好的一面展现出来,这是用户体验设计师的基本职业要求。在图片进行选择时,需要注意以下几个方面:比例的选择1:1长款等比型图片,是最常见的一种图片类型,这种图片可以让界面看起来更简洁。如feed流中的头像、logo等位置,为了避免拉伸变形基本都采用此中比例类型的图片。在界面中需要通屏展示的时候,1:1比例的图片就不合适了,因为手机屏幕是窄而高,如果以通屏图片展示,意味着高度上会占据太多的空间。logo位置采用了1:1的比例4:3比例型图片,一般适用于以图片为主或者用户群体较为年轻的产品。如下图为站酷APP采用了此中比例的图片。feed流中的图片占有比较重要的比例,所以使用了4:3的比例通屏显示。4:3比例图片16:9比例型图片,显示器的大多数尺寸比例都是16:9的比例,而且这个比例应用也较为广泛,主要包含的设计、播放窗口等。宽度固定型图片,在一些以图片为主且图片内容比较复杂的产品应用比较多,例如电商类或短视频类APP,均采用了该种方式。宽度给予固定的数值,高度自适应。需要注意,图片的高度也应控制一个最大值,以此来控制图片高度不超过屏幕可显示区域。这种方式可以让界面信息看起来更加流畅。宽度固定型图片选图的统一比例统一,当确定一款产品中图片的比例后,就要尽量将图片的比例规范化,即相同属性的板块图片比例要保持统一。可以让界面在视觉上更规整,并且提升品质感。图片比例保持统一需要注意在不同场景下都要保持比例的统一,防止出现变形等情况的出现。如下图中为资讯类APP,左文右图排列的图片与并排3张图中的第3张图片大小是一致的。左文右图排列时,文本的宽度正好占据了两张图片的宽度,这样后期运营维护在上传图片时就可以不用考虑时一张的情况还是多张的情况,因为它们大小是一致的。比例的统一视平线统一,在一些通过图片替代图标或需要展示人物头像的界面中,图片的视平线统一也是使界面整洁规范的重要因素之一。如果相同的图片视平线不同,会使用户在浏览时视觉变得不流畅。这里所谓的“视平线”指的是摄影角度与图片位置。格调统一,在一些图片比例较大的产品中,配图的格调统一可以很好的反映出产品的格调。选图的清晰度选图的清晰度需要注意图片的质量。清晰、高质量是提升界面视觉效果最简单的方法。有时你非常认真的设计了很多精致美观的图标或插画,但是一张模糊的图片就足以让你前面的努力都白费。你可以访问一些比较好的图片素材网站,如国内的花瓣、站酷海洛、摄图网等等。需要注意某些图片的版权问题。清晰地图片会让界面更出彩图片与主题的贴合性图片要与产品相关联。也就是产品内的图片格调要统一,产品属性也要统一。在视频类相关的界面中,如果选取与食品无关的配图搭配文字,即使图片再有格调,也达不到用户的心理预期。另外,有些设计师在初做界面设计时对于配图的重视程度不够,认为只要将图片位置填充上即可。所以很可能会重复使用一张图以节约时间。但这样界面的视觉效果会大打折扣,因此在设计时,还要尽量模拟真实的线上场景进行配图。这并不是浪费时间,而是设计师该有的一种态度。本人是做UI设计工作的,特借贵平台输出一些内容为大家分享,旨在共同学习和进步。以上部分分享内容来自《规律与逻辑》。如有部分侵权请告知,将会立即删除。
① 本文仅代表作者个人观点,不代表猪八戒网立场。
② 本文经授权发布,未经许可,请勿转载。如有需要,请联系猪八戒官方。