满象网络 满象网络
  • 首页
  • 运营知识
    • 用户运营
    • 电商运营
    • 社群运营
    • 产品运营
  • 行业洞察
  • 产品相关
    • 产品经理
    • 产品设计
    • 评测分析
    • 交互体验
    • 数据分析
  • 营销干货
    • 品牌营销
    • 广告文案
    • 增长黑客
    • 活动策划
    • 竞价推广
  • 职场必看
    • 职场攻略
    • 企业战略
  • 好文分享
  • 行业动态
  • 爱思动态
  • 注册
  • 登录
首页 › 产品相关 › 交互体验 › UI界面的配图到底啥样才有逼格(上)

UI界面的配图到底啥样才有逼格(上)

商业化VIEW
2020-12-01 19:19:42交互体验阅读 162

虽说采用符合上线产品的图片能更加体现真实性,但也不能忽视设计稿的配图,设计稿配图的质量可能会直接决定领导或同事对该界面设计好坏的判定标准。

UI界面的配图到底啥样才有逼格(上)-满象网络

为了保证设计稿配图的高质量,也为了体现真实性,我们可以通过有技巧的配图来提高界面整体的逼格。

本篇文章先介绍如何找到合适的图片,下一篇则会介绍如何保证UI界面配图的整体统一性。

一、图片本身质量

1.高清

好看的配图,图片本身的质量肯定要高,那么何为高质量图片呢?最基本的一点当然是高清,高清也就是高分辨率,我们看视频时知道1080P就算是高清了,图片在1920PX1080P以上就是高清图了,高清图需要注意的一点是占用内存大,一般都超过了1M,在上线界面中我们要对图片进行压缩处理。

UI界面的配图到底啥样才有逼格(上)-满象网络

2.高品质

除了高清,高品质也非常重要。品质高的图片也就是所谓的“有逼格”,品质低的图片就是所谓的“low”,那么何为高品质呢?图片本身构图、光线、影调、色彩等很出彩,视觉上的感受就是舒服舒服舒服,看到后会不由自主被吸引的图片(不局限于实物摄影图)。

UI界面的配图到底啥样才有逼格(上)-满象网络

二、有目的的找图

找到高品质的图片还不够,我们需要根据不同的目的性找到更加精准的图片。根据表达主体的不同,我们构图的方式也会有所差异。

1.主体是具体的物品或人物

比如电商、外卖类产品的主体是某个物品,找图片时我们的重点就应该落点到具体的物品上。虽然道理都懂,但找这种具体物品的图片是最头疼的......如果是没有版权顾虑的设计稿或练习稿,可以直接在花瓣搜索关键词+png或是搜电商/食物素材、包装设计等,然后选择画板,这样能找到很多高质量且经过简单处理的素材图,如下图:

UI界面的配图到底啥样才有逼格(上)-满象网络

主体需要突出某个物品的图片,一般都采用中心构图,强调物品同时,弱化不相关的干扰。

UI界面的配图到底啥样才有逼格(上)-满象网络

左图网易考拉列表页商品是直接采用了纯白背景,没有做投影,极致的突出了商品本身;右图Keep商城列表页商品则采用的浅灰色背景+投影,质感更强,但工作量要大一些。

2.主体是特定的场景

特定场景的常见界面类型有旅游类、租房民宿类、新闻类产品,这几类产品的配图基本聚集在某一个场景中,根据场景大小的不同分为:大场景构图、局部场景构图、特写近景构图。

旅游类产品如果是以风景展示为主,可以采用大场景构图或局部场景构图,如下图:

UI界面的配图到底啥样才有逼格(上)-满象网络

左图大场景构图适合山川海洋这种自然景观以及俯瞰城市景色等,右图局部场景构图则更适合展现人文景观、局部景点等。

租房民宿类产品以室内装修展示为主,适合采用局部场景构图。而新闻类产品根据内容的差异三种场景构图都会用到。

3.线下有对应图片

线下有对应图片的产品包括电影类、图书类、漫画类、音乐类等从线下搬至线上的产品,它们本身在长期的实物发展过程中已经相当成熟了,找到合适的配图相对更加容易。

UI界面的配图到底啥样才有逼格(上)-满象网络

需要注意的是,因为实物本身已经有一个用户熟知的图片比例了,绘制线上界面时也要尽可能还愿对应的比例。比如上图电影海报的标准尺寸是99X69cm(打印尺寸),图书封面是A4的尺寸210mm X 297mm(打印尺寸),专辑封面的比例基本是1:1。

划重点

本期主要介绍了想要做好UI界面,好的配图必不可少。要找到优秀的配图,首先明确图片本身必须是高质量的,其次要根据自身的目的找到最合适的图片。

下一期则会介绍通过保证图片的风格、视觉大小、色彩等的统一,从而保证整体配图的统一性。

赞赏 赞(0)
宜家LOGO升级,各大品牌都玩起了“大家来找茬”吗?
上一篇
加薪指南:百度信息流账户广告放量技巧
下一篇

请登录以参与评论

现在登录
暂无评论
近期文章
  • 新能源充电站能赚钱吗?
  • 你怎么看待打工临时夫妻现象?
  • 没有这两种能力,赚钱就是空谈
  • 闲鱼运营学到这些技巧你就离成功更近了!
  • QQ群最新排名优化
  • 没有门槛的项目,真的能赚到钱吗?
  • 当B站“不再二次元”,破圈易,盈利难!
  • 直播间十大话术总结,直播间的互动话术你懂了几个?
聚合文章
职场生存:如何定义职场沟通的价值
巨变即将到来?雷军如此激动,软银孙正义将投资小米?
写在米2发布前:一个小米手机用户的感受
什么样的积分体系既可以满足用户需求,又可以达到运营目标?
降价促销 PK 天天低价,谁更胜一筹?
短视频时代,教你打造爆款的13个案例
太震撼了!微软黑科技RoomAlive
苹果有内鬼!一个员工ID15万卖给黑客
B端交互设计过程中的思考
2021-04-19 19:26:54
241 0 0
一文读懂“人本主义心理学中洞察人性”的马斯洛需求层级理论
2021-04-06 19:27:01
368 0 0
HSB色彩模式,让配色有理有据
2021-04-03 19:27:36
177 0 0
交互设计中缩短用户路径的方法与案例
2021-04-01 19:27:17
289 0 0
  • 0
  • 0
Copyright © 1992-2023 满象网络. Designed by nicetheme.
未经许可,请勿转载 豫ICP备2020024986号-2
  • 首页
  • 产品相关
    • 交互体验
    • 产品经理
    • 产品设计
    • 数据分析
    • 评测分析
  • 好文分享
  • 职场必看
    • 企业战略
    • 职场攻略
  • 营销干货
    • 品牌营销
    • 增长黑客
    • 广告文案
    • 活动策划
    • 竞价推广
  • 行业洞察
  • 运营知识
    • 产品运营
    • 用户运营
    • 电商运营
    • 社群运营
  • 行业动态
商业化VIEW
公众号:商业化VIEW,《从零开始打造商业化产品》作者。
1864
文章
0
评论
0
喜欢