“我大三就接個LOGO單子，都一萬?！?/p>
悟腳叔叔TM在iH5設(shè)計定制群里是一個讓人頂禮膜拜的存在，每次他一開口提到自己接單的報價，就很容易冷群——因為大家都無言以對。
前幾天豆豆在群里提了個企業(yè)需求：“展示性H5，加上實時提問互動、抽獎功能，可以代碼開發(fā)的報個價吧?！?br/>
愛湊熱鬧的牙叔回答，4萬。然后悟腳叔叔TM像高僧一樣冷冷丟了句“可以報到6”，接著不緊不慢地補充道：“上次我給一個報了10，還覺得便宜。”（所以他年收入到底有多高？?。?/p>
來源： iH5（ID：ih5_cn）
一、年輕，是熬夜的本錢？
悟腳叔叔TM（以下簡稱悟腳叔叔），28歲，目前就職于一家產(chǎn)業(yè)營銷公司，擔任插畫設(shè)計師，同時負責H5的設(shè)計與實現(xiàn)。
兩年前他為房地產(chǎn)公司設(shè)計的插畫
他從初中開始學(xué)習(xí)素描、水彩，大學(xué)修讀視覺傳達專業(yè)，到現(xiàn)在已經(jīng)有十幾年繪畫經(jīng)驗。平面設(shè)計、網(wǎng)頁設(shè)計、視頻剪輯，樣樣拿得出手；雖然他常用HTML5工具做H5，也具備一定的代碼編寫能力。
這是個徹頭徹尾的工作狂。最近的五一假期，他三天都沒有休息，而泡在電腦前趕制設(shè)計單。最忙的時候，有一次一星期內(nèi)他做了三個H5，其中兩個還是與美的合作的——而更可怕的是，他居然還是利用下班的空余時間完成的任務(wù)。
《與美的合作的 虛擬展館H5》
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
《與美的合作的 開普勒星球H5》
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
與美的合作的第一個H5，根據(jù)企業(yè)需求得模仿去年6月發(fā)布的杜蕾斯虛擬美術(shù)館。后者是H5界里程碑式的作品，是杜蕾斯組織的以“液體主義”為主題的畫展，通過H5包裝出一個線上畫廊，立體感十足。
上為杜蕾斯展館H5，下為美的展館H5
和原版面向的大眾不同，悟腳叔叔設(shè)計的美的展館用于一次重要的內(nèi)部展示。盡管如此，從上圖能看出這個短期內(nèi)設(shè)計出的作品具有極高的還原度。開普勒星球那個H5也是他為美的做的，所給制作時間只有兩天，頗有“江湖救急”的意味。
很難想象那個星期他是怎么熬過來的，因此我感慨：“真慘?！?br/>
“我其實無所謂啊，對我來說我對電子類東西比較感興趣，對吃和去其他地方旅游、玩這些沒有興趣?！彼p描淡寫回答，把自己多年的堅持與刻苦歸結(jié)于一種喜好。
二、完美主義+強迫癥=細節(jié)控
與房地產(chǎn)公司合作的出題問答H5 ——《出題的站出來，保證不打死你》
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
我對悟腳叔叔的初次了解是他的H5作品《出題的站出來，保證不打死你》。在幾乎沒有宣傳渠道支撐的前提下，這個H5首日瀏覽量高達6,000。
這樣一個看起來很簡單的測試題H5，實際上動用了各種繁復(fù)的素材，也正是這么多細節(jié)的集合才顯出整體精巧的設(shè)計感。
出題H5的頁面元素解構(gòu)
上圖是對10道測試題中一個頁面的解構(gòu)。他一般先用設(shè)計工具把各種素材設(shè)計完成，再導(dǎo)入iH5編輯器，利用時間軸等功能進行動效的添加。這樣一個作品花費他4個日夜，交完稿才總算能好好睡一覺。
他平常很喜歡觀察細小的東西，每到一個新的空間，會強迫性地把眼前能看到的東西用眼睛搜尋一遍，“我也不知道為什么，反正就（習(xí)慣性地）看一遍?！?br/>
在設(shè)計上，他也是自然而然地鉆牛角尖，不愿意放過任何一個細節(jié)，因此他畫畫經(jīng)常為了摳細節(jié)耗費很多時間和精力。
在他制作的H5《跑贏自己，從心出發(fā)》中，僅僅一個控制視頻播放的小按鈕，除時間軸外便設(shè)置了足足13個觸發(fā)事件。
《跑贏自己，從心出發(fā)》H5的編輯界面
他對設(shè)計近似于偏執(zhí)，以至于有時會把自己辛辛苦苦做出的設(shè)計原稿刪掉。比如當他的設(shè)計稿被甲方否決后，他就會果斷把這個PSD原件刪除，因此這樣自己再做第二次設(shè)計才不會局限在第一版的思維里。
“假如只是別人覺得不滿意，可是自己卻很喜歡，你會刪嗎？”
“嗯，會的?！?/p>
三、品牌H5的搶手山芋
與百度手機助手合作的?；℉5
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
與QQ音樂合作的三周年合輯H5
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
悟腳叔叔和很多知名品牌都有過H5制作上的合作，百度手機助手、QQ音樂、萬科、寶馬中心、宜家家居、史密斯熱水器，等等。
但其中與汽車廠商阿斯頓·馬丁的合作讓他印象最深。
與阿斯頓·馬丁合作的新車宣傳H5
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
當時，阿斯頓·馬丁要發(fā)布新車，而電影《007：幽靈黨》同期上映。阿斯頓·馬丁是邦德的專用座駕不必多說，企業(yè)要求他以兩周為限期做出宣傳的H5，結(jié)果他僅用三天就完成，而且方案被直接通過并發(fā)布。
百度檢索《探尋007座駕的秘密！》結(jié)果
這個H5的瀏覽量為1.8萬，百度它的名字《探尋007座駕的秘密！》可以看到作品廣受業(yè)界好評。在悟腳叔叔看來，如果想把H5玩出花樣，需要綜合畫面、動效和傳播途徑，而且甲方的關(guān)系舉足輕重——畢竟掌握各種生殺大權(quán)。
而在剛過去的五一假期，讓他加班的是與一家房地產(chǎn)公司的合作，要求完成一個用代碼編寫的復(fù)雜H5，涉及數(shù)據(jù)存取。為了確保數(shù)據(jù)的私有性，公司讓他先用HTML5工具實現(xiàn)H5的基本功能，再由專人編程重現(xiàn)設(shè)計邏輯。
作品《見證卓越的力量》
掃描二維碼，立即體驗！
（數(shù)英網(wǎng) App 用戶需點擊放大二維碼后，長按識別）
這個H5涉及3D特效模擬、照片上傳與合成等多種高級應(yīng)用，作為一個設(shè)計原型也屬于上乘之作。雖然他偶爾也用代碼制作H5頁面，但這種情況比較少見，照他戲謔的說法算是甲方的“變態(tài)”需求。
過去，悟腳叔叔希望自己可以成為一名畫師，但現(xiàn)在他說自己太理想化了。因為他的興趣相對狹窄，就算沒有工作，他就學(xué)一下軟件、畫畫、玩玩DOTA，“挺累的，不過開心就好”。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（5條）