原来你的H5活动是这样设计的!?

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
6426 38 599 2018-12-09




在2018年9月25日早上9点25分49秒




我跟往常一样回到公司办公座位上,右手手上拿着楼下麦当劳6元购买的超值早餐,左手瞬时按下了桌子下的主机电脑开关,然后一边吃着双层包皮夹杂着火腿的汉堡,慢慢在等待电脑的启动。不到一会儿时间,开启的电脑桌面就响起哒哒哒的声音,自启动的邮箱接收了最近收到的邮件,此时我还沉醉在超值早餐的吞咽过程中,还没回过神来。伴随着一口热辣辣的豆浆入口,我缓缓的把视线移动到了收到的工作邮件当中。噔~一个活动设计H5需求弹出,这2天我需要设计一个《抢十月终极大礼》的宣传页面。




一开始看到这个活动需求的截止时间,其实我是拒绝的,2天时间设计一个炫酷吊炸天的活动页面,感觉时间是不足够的,不过作为一个有专业精神的设计尸,我觉得我还是应该细细看下需求搞,然后再确定怎么跟需求方撕逼~嘀嘀嘀,双击打开交互稿文件▼


Image title


需求稿里面有这次宣传页的所有交互图示,整个活动可以分为三个部分,第一部分头图,第二部分点击购买大礼包,第三部分抢购Q币充值。

Image title

眨眼一看,摸摸小下巴沉思几秒钟,好像又没那么难,应该是可以完成的!这时我再具体看看头图文案:抢十月终极大礼,1元解锁30话!!充值最高返利70%哦~奥,嗯,吓?我思考了数分钟,这是一道看文字想画面的创作题!!!



Image title


福尔摩师V:首先看到这两段文字,我要先提炼出具有动次打次感觉的画面词语!例如:抢字!还要再提炼出最具用户吸引力的画面词语:大礼!!


由此我可以联想出以下画面!密密麻麻的人群,在拥挤的抢一个礼物的画面既视感~


Image title

大概的画面印象有了,那么怎么起草稿呢?这里又需要考虑分析画面元素组成跟色调是什么!?


画面猪脚不用多说了,本身自有的品牌形象企鹅娘+小黑子!画面色调选择,这里的关键字是10月,10月会有延续国庆的feel倾向,所以这里我选择用红黄色为主!(好吧其实是我瞎比比的,因为我本身喜欢这个颜色搭配,哈哈哈~)


Image title


分析到这里基本思路都比较明确了就可以开始画,头图的草稿了!如下图▼


Image title


再画草稿的时候要考虑下这个画面的延展性跟具体用在什么地方,我这个图除了要用在H5活动(750-1334)设计里面,还要用在闪屏(ip6,ip7,7p,ip8,8p,ipx,安卓机.....)各种banner位置等等,所以在草稿的时候就要考虑这些问题,尽量用大的尺寸去画,而且尽量分层!!到时缩小再用也完全OJBK(一般我都是新建画布A4分辨率300去画图的,看个人习惯吧!没有限制),不然到时做延展设计时,你就会发现各种问题!简直崩溃的不要不要哦!!!所以切记切记!


草稿差不多了,就要开始把第二部分,第三部分的交互设计稿去补充做完了~具体如下图▼


Image title




到了这一步大概花费了小半天时间(快速出草稿这一部分,越快越好,试错时间越短,你留给后面做设计细节的时间就越多!),基本的设计原型已经出来了,这时候不要盲目的往下做哦!要去跟需求方沟通确认下,这个草稿设计有没问题,有没达到需求方的需求目的,不然你做到了一大半才去沟通,错了,重做!可是真的浪费时间啊!!!不要说了!都是泪~


此时我经过了和需求方的反复沟通~她说:完全ojbk!没问题(很完美的即视感),这时我又默默的回到设计尸的工位,翘起了二郎腿,视线仰望45度角,嘴角向扬露出微微一笑,心想(我真是个天才!),呃?滴答滴答滴答~时间不多了,赶紧细化设计!


设计过程展示▼


Image title



完整设计展示▼


Image title


Image title

Image title


Image title


总结活动设计的一些核心点▼


01.分析理解文案想出对应画面!(画面跟文案对不上,会跟尴尬!没有1+1>2的效果)


02.整个活动思考逻辑要理顺,不是盲目立即去找参考!


03.理解设计需求,有问题马上去跟需求方沟通!(并不是每个需求方的需求稿都是深思熟虑的!你懂得!所以有问题尽量沟通解决,可以把坑,扼杀在开始设计之前!)


04.一定要快速出草稿跟需求方确定,过了以后才继续往下做!!!!不然你会后悔的!


05.活动按钮弹窗等等,可以单独做个UI kit 给重构开发人员,方便后续工作开展 !


从拿到需求后,经过了24小时48秒之后的我,又继续回到了设计尸工位,右手手上拿着楼下麦当劳6元购买的超值早餐,左手瞬时按下了桌子下的主机电脑开关,然后一边吃着双层包皮夹杂着火腿的汉堡,慢慢在等待电脑的启动。诶?怎么画面如此熟悉,仿佛发生过的场景一样~我到底做了什么?我在哪里?我是谁?


Image title


作者:VELES












全部评论:38

  • 2020-12-17 14:30

    受益匪浅

  • A成长

    2020-07-17 15:54

    @陈辰辰: 包皮

  • snow1122

    2019-10-28 16:35

    麦当劳给了多少广告费,我肯德基给双倍

  • 素材UI梦

    2019-06-22 16:58

    所以你的字体是怎么设计的,直接画吗

  • 素材UI梦

    2019-06-22 16:54

    很细节 受益匪浅

  • 黑棒棒黑

    2019-01-21 15:09

    我很讨厌看这些的 但是在你这里 完全没有感到一点不喜欢,萌萌哒的配图加文案,轻松加愉快,完美。

  • 哈哈哈243

    2019-01-14 15:51

    @幻想家: 头像不错

  • wyj0635

    2019-01-02 15:10

    文风有我当年的影子。

  • 幻想家

    2018-12-25 14:00

    好棒,不知道自己啥时候能成为一个有点子会画画的设计师

  • imishrl

    2018-12-23 09:34

    优秀优秀

  • 倾慕的是你

    2018-12-22 17:49

    作为用户我是不喜欢广告的,但作为设计师我是非常喜欢的

  • 右手化缘

    2018-12-21 18:17

    感觉你们画画的是不是不太注意排版

  • momoxiaochong

    2018-12-19 14:23

    2天的工期,一天就做完了?太牛逼了,膜拜,这速度、这质量简直不让人活了

  • 卟呤小怪兽

    2018-12-19 10:34

    为什么我这边的麦麦是7元

  • Z卬灮

    2018-12-18 20:06

    @yl168: 红黑配色会增加紧迫感的,适合这样的主题。

  • yl168

    2018-12-18 11:01

    配色可以再斟酌一下,这么大面积的黑色,很没购买欲望

  • Zehoo

    2018-12-17 17:28

    通熟易懂,希望每个需求文档都这么好

  • llluohanrui

    2018-12-17 16:46

    吃着双层包皮夹杂着火腿的汉堡确定六元

  • _青红造了个白

    2018-12-17 15:55

    你的文字真有趣,哈哈。很轻松的看完,还想看...感觉像是某部小说里面的男主角日常修仙记

  • 陈辰辰

    2018-12-17 15:19

    吃着两层啥夹着火腿???

  • A小怪ai

    2018-12-17 13:40

    想问一下,2天画完这些,需要加班吗

  • A小怪ai

    2018-12-14 15:28

    你一定是个热爱生活的人,6元超值早餐,奢华

  • 李萝卜

    2018-12-14 15:03

    前半段可以说一模一样 不过我接到需求后就是各种素材网站翻不停 emmm 我认真的思考一下这个问题 嗯 可能是我双击打开需求的时候 没喝上一口豆浆

  • 三每日月

    2018-12-14 08:53

    吃着双层包皮夹杂着火腿的汉堡,脑壳疼。

  • 许了了

    2018-12-13 22:16

    在你这里工作都是一件很开心的事呢

  • 张彭彭

    2018-12-13 19:14

    @StarsDream: 感觉是都会做的活~没有分那么细

  • StarsDream

    2018-12-13 17:01

    这个属于视觉设计师还是UI的活?

  • mrjucn

    2018-12-13 08:51

    你们腾讯的QB,只要优惠力度大,不做图只写文字都有人买。。。

  • 天天先生

    2018-12-12 16:04

    我很讨厌看这些的 但是在你这里 完全没有感到一点不喜欢,萌萌哒的配图加文案,轻松加愉快,完美。

  • 趁早

    2018-12-12 15:59

    很棒

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票