惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
aimingoo的专栏
aimingoo的专栏
P
Proofpoint News Feed
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
The GitHub Blog
The GitHub Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
月光博客
月光博客
量子位
博客园 - 司徒正美
V
V2EX
I
InfoQ
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Vercel News
Vercel News
H
Hackread – Cybersecurity News, Data Breaches, AI and More
美团技术团队
N
Netflix TechBlog - Medium
L
LangChain Blog
IT之家
IT之家
Blog — PlanetScale
Blog — PlanetScale
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Stack Overflow Blog
Stack Overflow Blog
A
About on SuperTechFans
Microsoft Azure Blog
Microsoft Azure Blog

人人都是产品经理

为什么你的产品找不到差异化?90%的失败都卡在第一步上(下) – 人人都是产品经理, 3年从30万到1300万用户、获2200万美元融资,这个AI教育产品用“抽卡”破解了获客难题 – 人人都是产品经理, 园区招商系统怎么做才能真正帮到去化?我加了这一个功能,推广链接转发400次阅读过万 – 人人都是产品经理, AI大事件:OpenAI发完网络安全模型又搞药物研发,小鹏汽车要抓”DeepSeek时刻” – 人人都是产品经理, 电商不是卖货,是一场更残酷的产品经理实战 – 人人都是产品经理, 没想到,活动营销又回来了! – 人人都是产品经理, 为何All-in海外KOC:一场关于AI时代窗口期的豪赌 – 人人都是产品经理, 重新理解企业的内部协作 – 人人都是产品经理, 苹果的 AI 战略到底是什么? – 人人都是产品经理, 医疗智能体·第2讲——合规护城河:等保、PIPL与HIPAA的架构实战 – 人人都是产品经理, 向量知识库五步法:从“答非所问”到“精准回复” – 人人都是产品经理, 鸿蒙PC三方库构建总指挥HPKBUILD(sha)库为例 – 人人都是产品经理, 何时该用LLM?AI产品经理的LLM设计指南 – 人人都是产品经理, 医疗信息领域的需求方、决策方、准入方以及关注点(二) – 人人都是产品经理, 即梦涨价:一场被误读的「傲慢」 – 人人都是产品经理, 面试AI PM必答题:Hermes和OpenClaw的区别,如何讲清楚业务价值 – 人人都是产品经理, AI的下一张船票:世界模型——AI产品经理必须理解的技术拐点 – 人人都是产品经理, 小红书做GEO,怎么让AI信你?记住这 3 个重要信息 – 人人都是产品经理, 5 家印度 AI 初创公司,看看印度 AI 再做什么 – 人人都是产品经理, AI项目跨团队协作:产品技术业务如何不打架 – 人人都是产品经理, Agentic Workflow(智能体工作流):让AI从”答案生成器”变成”数字员工” – 人人都是产品经理, lycium_plusplus 项目全景解读:OpenHarmony 三方库构建的“大管家” – 人人都是产品经理, 从爆单救火到前置履约:两套预采策略,把生鲜大促履约效率拉满 – 人人都是产品经理, 什么时候该补货?我用一轮数据做了一个决定 – 人人都是产品经理, 从“机械兜底”到“动态分流”:AI客服重复进线治理的4大底层逻辑 – 人人都是产品经理, 抖音拼效率,红书拼洞察 – 人人都是产品经理, 全民狂欢与退潮——为什么龙虾这波热潮冷却得如此之快? – 人人都是产品经理, Stripe押注!MPP重塑全球支付 – 人人都是产品经理, 小红书GEO:AI引用你的内容,不是因为你对,而是因为你看起来可信 – 人人都是产品经理, 前百度副总裁押注办公Agent,日韩付费爆发,Manus迎来强劲对手 – 人人都是产品经理,
UI配图不够有设计感?可以试试这10个优化办法
彩云sky · 2022-12-15 · via 人人都是产品经理

在界面设计中,好看且和谐的配图会让用户潜意识里更容易接受、或者更愿意停留于当前页面,那么,如何才能把配图做好,让界面看起来更加高级和耐看?本篇文章里,作者总结了10个优化UI配图的小方法,一起来看一下。

“配图用的好,作品差不了”,UI中配图的好坏直接影响到界面的品质感。它非常重要但却经常容易被忽视,要想把配图做好其实也是有规律可循的,今天的文章就将总结配图使用的10个优秀方法,相信看完一定会有所收获。之前我也写过另一篇如何选好配图的文章《如何选到设计感强的配图,我总结了这7个实用方法》,同时也分享了很多超高质量的图片素材资源和网站,千万别错过。

在欣赏了Behance上数百个高质量的项目和众多Dribbble优质作品后,我总结出了一套可以将图片与UI结合提升设计感的方法,可以让你的作品立即看起来更加专业。

本文的灵感来源于我刚开始做UI时所遇到的困难。和许多其他设计师一样,当我在Dribbble和Behance上浏览别人的作品获得灵感时,面对这些海量作品时常会感到迷失和不知所措。就像透过万花筒看到各种花哨的图案一样,当把万花筒挪开的时候这些图案就消失了,幸福的感觉是短暂的。当我自己开始设计作品时,我仍然不知道该怎么做。

随着时间的推移,我意识到我并没有从日常的作品欣赏和搜集中思考和学习,就只是漫无目的地欣赏了其他设计师的作品。

渐渐地我发现了一种欣赏其他设计师作品的好方法,我会有意识地去总结记录下他们使用的想法和技巧,然后应用到我的日常工作。在本文中,我很想分享一些其他设计师用来处理配图的方法,这些方法可以使作品看起来更加专业。

一、使用图片作为背景

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

二、将图片于背景进行融合

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

四、在图片下方添加色块

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

八、在图片上增加颜色层

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

十、将图片剪切成其他形状

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

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!

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

为我投票

我在参加人人都是产品经理2022年度作者评选,希望喜欢我的文章的朋友都能来支持我一下~

点击下方链接进入我的个人参选页面,点击红心即可为我投票。

每人每天最多可投35票,投票即可获得抽奖机会,抽取书籍、人人都是产品经理纪念周边和起点课堂会员等好礼哦!

投票传送门:https://996.pm/MZ9B9

原文作者:Victor Adeyemo(本文翻译已获得作者的正式授权)

原文:https://bootcamp.uxdesign.cc/top-10-techniques-to-make-your-ui-images-pop-113ac366420d

译者:彩云Sky,公众号:彩云译设计;人人都是产品经理专栏作家,腾讯高级视觉设计师。

本文由@彩云sky 翻译发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。