APP开屏图设计思路



UI设计创意分享 2018-07-03 14:57:45

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

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

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

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

设计开屏图有几大难点:

  1. 用户驻留时间短,导致注意力无法集中;
  2. 用户主观意识认为它不重要,进一步减少注意力;
  3. 要用用户投入较少注意力的情况下,用图像+文字吸引用户,并告之用户,这对文案和图像表达都很有挑战;

开屏的类型有哪些呢?

  1. 页面截图为主
  2. 插画(将页面主体元素融入插画)
  3. 截图意象化

我的设计过程:

  1. 文案解读,提取关键字
  2. 素材灵感搜索,想传达什么画面,营造什么气氛
  3. 手稿构图【老大建议前期上个色看气氛小稿,之前还没这么做过,下一个版本尝试】
  4. PS/AI钢笔绘制

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

APP开屏图设计思路

APP开屏图设计思路

APP开屏图设计思路

APP开屏图设计思路

APP开屏图设计思路

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

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

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

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

APP开屏图设计思路

关键字提取

APP开屏图设计思路

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

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

APP开屏图设计思路

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

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

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

APP开屏图设计思路

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

APP开屏图设计思路

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

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

APP开屏图设计思路

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

APP开屏图设计思路

这是最终稿:

APP开屏图设计思路

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

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



0