APP开屏图设计思路

用户头像
厦门/UI设计师/7年前/3275浏览
APP开屏图设计思路

每一次的设计回过头看,总能看到画面里的不足之处,如何将文案通过画面的形式传达出准确的信息,值得一起探讨。

夜以继日的撸一个又一个版本的界面,开屏图的设计大概就是UI设计师唯一可以发挥视觉插画的战场。(设计部门里分工比较细,我主要工作就是负责版本的迭代界面设计&开屏图&新版本视频宣传封面,其他运营的活动不在负责范畴里)


做这样的总结,主要目的是为了自省过去,因为发现每一次做完后,都会发现自己要么内容画得太单调,要么构图太散乱,要么用色太无趣,这么多的问题好像会反复出现在“下一次的画面”里,那这次就写下来。

画面要考虑的几点:构图、明暗关系、主次关系、配色(占比、轻重、分布、冷暖搭配、色彩区间)


设计开屏图有几大难点:

  1. 用户驻留时间短,导致注意力无法集中;

  2. 用户主观意识认为它不重要,进一步减少注意力;

  3. 要用用户投入较少注意力的情况下,用图像+文字吸引用户,并告之用户,这对文案和图像表达都很有挑战;


开屏的类型有哪些呢?

  1. 页面截图为主

  2. 插画(将页面主体元素融入插画)

  3. 截图意象化


我的设计过程:

  1. 文案解读,提取关键字

  2. 素材灵感搜索,想传达什么画面,营造什么气氛

  3. 手稿构图【老大建议前期上个色看气氛小稿,之前还没这么做过,下一个版本尝试】

  4. PS/AI钢笔绘制


接手项目以来做了5个版本开屏图:


既然要举个栗子,拿最新的热乎乎的刚刚上线的来解说吧:

(沉浸当下时总无法看到问题,回过来再瞧瞧时又能发现在画面上处理不当的地方,啪啪打得脸好疼,捂脸...):


产品给的需求文案如下图,字号的大小加粗来区分文案的主次关系。

(需求一开始是2张,“消息盒子”是版本上了公测后临时补充的需求,当时就按照前面2张的构图把元素拼进去,没有一开始就整体设计思考,补充的第3张,真的补得超痛苦,手稿就在纸上简单画了。)


关键字提取

根据关键文字,进行素材搜集,找一些插画寻找自己想要的元素,构思画面。

ps:4399family有好多个角色可以使用

对找到的参考元素,结合角色进行手稿草图。

文案的第1点“消息盒子”后面临时加入的,就先讲一开始有构思连贯的两张:

【全局搜索 新用法 直搜礼包更带感】:吃鸡游戏场景的加入,女枪手扫射到跳伞甲,“啊”给画面带来小趣味;打算把礼包放着在下方的彩带处。

undefined

【预约游戏 等上线 微信通知好及时】:飞船控制室,有很多个爪,可以放置游戏卡片,微信也以它的动物的形式围绕在控制室旁边。

草图搭好构图后,就使用ps钢笔工具进行绘制。

对于画面把握还不是很厉害的小司机,绘制的过程中,要不断的去看整体,协调画面里的元素,和草图的元素有些增减。


第一版初稿做到这样,重新再审视,发现一些问题,以及给产品看后,反馈目前的页面里没有传达出“某款游戏的礼包、预约、搜索栏”,结合反馈又再次做了元素及构图调整:

这是最终稿:






在做临时插入的“消息盒子”时,反过头审视原先完成的2张图,色彩的运用,主体内容在绿色的背景下,对比度处理得不是很好,用色偏灰。


阶段性小结,也看到自己不足的地方,被喷一下也无妨。












26
举报
|
34
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
盲盒APP UI设计
【新年UI图标】会员icon
UI界面 组件
【新年UI图标】秒杀icon
钱包ui模板
【新年UI图标】汽车icon
我的钱包-UI界面设计-app
【新年UI图标】30个图标
拟物风质感写实UI卡片合集源文件
科技医疗透明柜UI界面设计
【新年UI图标】银行卡icon
UI通用设计素材1
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
智能家居中心 简约 UI设计组件库
【新年UI图标】钱包icon
手表表盘UI系列
UI应用平面图标
3D渐变流体抽象矢量UI背景图
新拟态风格 UI设计组件库
新能源APP应用UIKit
Security Camera UI kit
高级表盘系列UI源文件
你可能喜欢
大家都在看
登录注册