界面如何搭配高质量图片

2021-10-14    泥人张 网站设计文章及欣赏

使用图片作为背景

这里的图片选择要突出核心内容且一定要高质量,不要选择杂乱无章或与主题无关的低质量图片

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片于背景进行融合

结合页面表达需要,选择合适的配图并做融合或出界的设计,会让画面极具吸引力和强烈的设计感。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将高质量的图片紧密的放在一起,不留任何间距

当画面主要以高质量图片吸引用户注意时,尽可能的利用更大展示面积,这样会显得更加高级和有视觉冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方添加色块

这里的色块要注意跟图片的主色调保持相近,可以直接吸图片上的颜色然后找找邻近色就好了,色环上 30°区间内的颜色就比较和谐。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方/上方增加图案或形状

这里的形状建议不要太过于复杂,用一些基本图形就可以,比如圆点、方块矩形之类的,增强画面的形式感

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方或上方增加文字、图案或不规则形状

这里的文字、图案或不规则形状跟上面的技巧类似,都是起到装饰的作用,但文字的话有时候还要注意识别性,比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切到文字或形状中

这个很好理解,就是以文字或形状作为遮罩,增加画面的设计感,文字尽量选择粗体

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片周围增加一个非常窄的边距

这个技巧可能跟第 3 条有些冲突,其实这 2 个方法都是可以的,要根据页面具体的排版情况灵活使用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片上增加颜色层

这个技巧也比较容易理解,一般会选择饱和度较高的颜色应用在充满活力的页面上,增加画面的冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在彩色叠加到图片中的一部分上

这个技巧跟上面的有些类似,只不过是以小面积叠加的形式,颜色一般选择品牌色或主题色,与背景尽量有较大反差会更加容易出彩。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切成其他形状

这个方法有一点需要注意的就是剪切的形状不要过于复杂,一般用基础图形就好

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

以上,就是我总结的一些可以用来操作 UI 图片的实用方法,这些方法可以使得作品变得更加有视觉感也更加专业。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:彩云Sky

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档