月入10万的H5设计师,经验分享

原创文章 分类: 经验/观点 版权:
2130 15 17 2
2017-03-20
11.5
编辑推荐

全程高能。


以下是新近一场线上的分享会——《零基础,如何设计好看的H5?》的分享实录,请来iH5平台上月收入10万的两名H5设计师进行知识分享。


完整内容参见文末链接。


一、他是悟脚叔叔

 

Image title


他是悟脚叔叔,业内知名的H5设计师,这次揭秘了很多的个人设计经验,以及他一个公益项目的制作历程(《你,有什么资格睡觉?》,http://0c8a0952908d.vxplo.cn/idea/Yo9cBZM


以下内含大量秘闻...


1、一个作品是怎么诞生的?

 

早期的时候卓越集团找到我需要做一个H5,他们给到的需求只有一个Word文档,里面有5句话,说卓越集团怎么样、要带什么功能、要有一个照片分享,要求是做得酷炫。

Image title

(悟脚叔叔做过的一个酷炫邀请函H5《全球INS大会,这会有意思!》局部图,http://0c8a0952908d.vxplo.cn/idea/Ofp21Ud


当时做这个H5,我在想怎么去把这5句话拆分,怎么和卓越集团所在的地产行业结合?其中最重要的是加载页面,后面乱七八糟的功能我都不关心。前面的30秒钟,我要把用户留住,后面什么都好说——

 

因为前面10秒钟如果不酷炫,基本上80%的用户都会流失。

 

所以后来我做了一个3D旋转的地球,用C4D和AE合成、导出序列帧,然后用iH5的图片序列解决这个问题。序列帧一共有100张,我设置播放到99张的时候让标题出现,作品如下:

 

Image title

 (悟脚叔叔为卓越集团做的H5-DEMO版,http://0c8a0952908d.vxplo.cn/idea/nh21yk7


2、什么绘画技巧适合美术小白?

 

关于插画,我教大家一个比较简单的方法,每天临摹一张画

 

不知道有没有人知道小人书是什么?它是50、60年代,我们老一辈的人看的一些小漫画。

Image title

现在很多珍藏版市场价都要十万一本,不过京东上有翻印版,你可以去搜一下,一套下来可能也就百来块钱。很实惠,可以考虑入手一套,每天临摹一张,学习其中线条的运用,一段时间下来,你就可以轻松驾驭白描技法。

 

白描指什么?

 

《你,有什么资格睡觉?》这个H5,也是用iH5做的,用的就是白描。

Image title

我从小就学画画,高中一心想考国美的山水专业,需要的是国画的白描基础,要用单勾、复勾的技巧画画。

 

单勾指的是从头至尾用一根线条,勾勒出一个人的形态、身体结构;复勾还可以在上面来回轻勾、顿挫去表现人体结构。需要区分的是,它和线描速写又不一样。

 

我光白描就学了两三年,大学四年也一直在教学生。


我的建议是一开始在纸上学习,能更直接地感受到用笔的回馈,后面就可以买个手绘板,入门级四五百就可以买一个。


(编者注:以下省略200字左右的手绘板采购攻略)

 

3、《你,有什么资格睡觉?》的由来?

 

这个H5背后涉及比较庞大的体系。

 

不是画完就没事了,你要考虑在手机上看的比例。每一页我都是当做海报去做,才能平衡画面的比重、内容的大小、比例、用户操作习惯等。

Image title

设计的时候,一开始我会做加法,把很多内容都往上放,不要嫌多。


画完看的时候,发现内容好多,画面失去比重了,再果断地把前面的序列帧都删掉。

后面的答题需要填写信息资料,里面包含很多细节上的设计,比如信息选项、答题进度、电波设计等等。

Image title

Image title

这个H5的答题环节比较多,主要是因为需要一定的题量才能得出测试结果。


甲方可能忽略了大家看H5,很多是报着玩的心态,这点是一个遗憾的地方。

 

4、(秘1)这个单子的报价…

 

“我请你睡觉”这个H5,是我前阵子离职后准备做简历找工作,还没正式成立自己的工作室时,找过来的一个公益项目。

 

因为是公益的,我也没收多少,其实一般我现在一个H5起步价要35K,手绘类的是50K起。因为是做公益的,我也没收什么钱,不是没有收,但是不多。


5、(秘2)我是这么画画的...

 

这些是我电脑里的设计相关的一些软件——

Image title

比如Corel Painter 13、SAI等,是比较小众的日漫绘画软件,它们和PS这些软件模拟真实绘画效果就不一样。我最早期做电脑绘画就是用Corel Painter 13,有很多笔触、笔刷,后面才慢慢转到PS上面。

 

比如智图,是用来压缩图片的,因为用PS导出原图图片非常大,压缩可以降低网页加载速度。

 

建议没有手绘基础的,不要一上来就用Corel Painter这种对绘画要求比较高的软件。下面是几年前我用这个软件做的毕业设计——

Image title

Image title

上面这张图,我的原意是:


你去照亮别人的时候,却不知道自己已经陷住了自己,或者不知道该往哪里走。

 

二、他是小牙

Image title

他是小牙,在iH5的ID叫“造物者”。

 

小牙这次揭秘的是他今年情人节为中兴做的一个H5——《门窗都关了,你就给我看这个?》(http://db84f609426b.ih5.cn/idea/CDXN4E_):

 

1、怎么让你的客户找上门?

 

客户不是天上掉下来的,他们能找到你,那么你一定是有一些经验积累的。这些积累要你每一天挖掘自己,把自己的设计、理念、品质,提高上去。


小牙近1年多的部分作品


2、怎么确定你的设计创意?

 

技术在创意面前是渣;反过来,创意在技术面前也是渣。

 

创意来源于社会。它的难点不是创意本身,而是如何和客户说明白怎么跟产品结合,结合好了是创意,结合不好就是浪费时间,人家下次也不找你了。

 

下面是我做过的两个H5的创意构想,大家可以看看——创意A是《门窗都关了,你就给我看这个?》这个H5的由来。

Image title

Image title


3、怎么实现点线交互设计?

 

中兴这个H5,上线不久就有好多人说“就那些技术、就是视频”,瞧不起的这种感觉。我就说你去看看,看代码,是不是视频?

 

它不是视频,其实是用iH5做的,90%用工具中的时间轴;设计用了PS,音乐合成用的是Garageband。当然说AE能做的,也能用视频做出这种效果,但是视频加载慢不说,还有很多弊端。

 

然后就有人问,不是视频它为什么不卡呢?

 

很简单,我把一个1分多钟、包含上百个关键帧的时间轴,切成若干个时间轴,然后前后衔接好。这里面我用了9个页面,大概每一个页面都有10到20个轨迹,甚至一个页面里N个时间轴分别做着不同的动作。

Image title

Image title

Image title

Image title


案例的整体其实是没有多少设计的,但甲方为什么会喜欢,大众为什么会喜欢?


因为它简单,用简单的方式诠释了一件事儿,又结合了产品的本身。


4、(秘)这个单子的报价…

 

很顺利,几乎没有改过稿子,因为他们要的不是这种H5。因为做得太好了,6W到手。

 

【彩蛋】

(分享过程中,悟脚叔叔爆的料)

 

问:你多大?

答:不到30。

 

问:你的电脑配置?

答:去年4万多买的苹果电脑。

 

问:你为什么没考上国美?

答:第一年我考,专业全国排名第15名,第二年第3。为什么没有进?都是因为英语没过。现在我教过的很多学生上了国美,也有去列宾美术学院的。

 

问:你的收入?

答:我一个月接3到4单,1单35K起,你可以自己算一下。

 

附:三方直播间回顾

http://v4.qianliao.cn/topic/840000085544602.htm


讲完课第二天,悟脚叔叔和小牙都因为身体原因跑医院了,悟脚叔叔还调笑自己:35岁前收山。


高薪设计师实在是高危行业啊……

Seedheart

好玩是一切的宗旨。

431粉丝/4关注

原创小生
他从瑞典回来后,用了10年让设计师用上H5腾讯这个H5的套路太深!大部分人没看懂

Seedheart

Seedheart

好玩是一切的宗旨。

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN