
使用猪八戒APP
随时随地享服务
发布:2026-04-21 09:46:47 0浏览
在UI视觉设计中,除了排版、颜色、ICON、交互等重要的几大元素之外,还有一个很容易被忽视的元素配图:配图的好坏,能很大程度上影响着决策者的感知,以及你的设计过稿率。它犹如“障眼法”,因为一张界面中,内容本身一定是占据最多的部分,它能给与用户一个非常直观的视觉记忆,所以它的质量很大程度上决定最终的效果和成败。【作者】你是否有这样的遭遇:明明我的设计稿的已经非常规范了,为什么还是觉得不好看,甲方还是不满意?其实,在这种情况下,我们应该想一下,在排版与配色都很规范的情况下,是不是配图出现了问题。综上,我们可以看出,如果我们能够选择一个恰当且美观的配图,那么我们的视觉设计基本上成功了一半。我们暂且抛开交互,对于视觉设计而言,一张高品质配图的页面会让整个产品十分具有品质感,虽然页面的的元素完全相同,但是劣质配图的页面,会看起来非常的low,没有设计感。就如上,发生在本人身上的真实案例,排版、文字、icon等元素都不变,只是提高图片都质量,进而增加视觉美观度,影响了决策者的感知。那么我们该如何选择图片?1.图片本身的质量高配图的基本前提就是图片本身的质量要高。何为高质量图片,当然是高清晰,也就是图片的分辨率要高。一张清晰的配图和一张模糊的配图给人带来的视觉感受是天差地别的。2.有目的的找图我们需要根据不同的产品类型,根据不同的表达主体,有目的性找到更加精准和符合使用场景的图片。比如电商类的产品,主体是某个具体的物品,我们的配图的重点就应该落点到具体的物品上。我们可以进一步的明确使用场景,如果客户销售的主要是红酒,奶粉等商品,在配图的时候,我们最好选择这类商品。如下图,都是商城列表页面,左侧的图片,给出上线的实际效果,更贴合产品,方便客户给出建议方向和做出决策。3.简洁简洁这一条规则,对于UI设计入门者来说,是一条比较实用的配图技巧。配图时我们只需要牢记“简洁”二字就可以了。互联网时代的变迁,使许多用户越来越喜欢风格简单的风格。简约是当今社会人所最求的一种流行时尚,简约之美,更是起到了准确快速传达信息的功能,一目了然的取悦大众的眼光,具有很强的视觉效果。如果选择那些构图复杂的图片,无疑给自己增加了保证整体页面的统一性的难度。这时候就需要考虑很多方面的因素,保证整体图片的风格、视觉大小、色彩统一等,考验一个设计师的能力。举个例子:从下图家具App初稿可以看出。页面整体还是比较规范的,但是本来定位是要做一个高端的家具平台,却从视觉表现上总感觉整个APP很平民化。其实,此页面最大的问题就出现在了配图上。我们通过上面简洁的配图去稍作修改:调整后,是不是整个页面就显得高端起来了呢?4.风格统一首页我们通过一组图片,给大家展示一下统一和不同意的区别,如下图:我们可以设想一下,如果一张页面或者一个模块中我们将多种风格的图片放在一起,会产生什么样的视觉效果?正如下图,排版非常规范,如果风格不统一,就容易打断用户的视觉流,引起用户视觉错乱,进而增加用户处理图形信息的时间和精力。所以,保证配图的风格统一可以提高页面的整体性,避免某一模块格外突出而破坏页面的整体性。5.色调统一色调是指画面上颜色的整体倾向。页面设计的时,需要配合界面整体的主色调来选择图片,或者进行对图片进行处理,来确保页面的视觉的统一性。常见的有白色调、黑色调、深色调、纯色调、浅色调等。下面我们来看两张页面:上图中,整体配图饱和度高,跟主色绿色靠近。下图中整体的虽然色相有所不同,但色彩都偏向颜色较浅的暖色调,色彩整体统一且给人简洁舒适的感觉。6.视觉大小、角度统一视觉大小统一是指在同一比列图片中,主体的视觉大小统一。视觉角度统一主要针对主体明显的配图,例如:物品、人物等,保持一个相对一致的角度。像下图,不同的模块中,主体物的大小以及角度都相对一致,整体的统一感很好,这样用户不会有感觉不适的地方。
① 本文仅代表作者个人观点,不代表猪八戒网立场。
② 本文经授权发布,未经许可,请勿转载。如有需要,请联系猪八戒官方。