學習黑科技！拒絕頹成一個沒人要的胖子

本文作者：May

愛丁堡大學Design Informatics碩士畢業，擅長交互設計與用戶體驗作品集輔導與Arduino原型開發輔導。

此篇文章由馬克筆設計留學原創首發，禁止一切商用目的的轉載和引用

優秀文章教程回顧：

《學姐帶你了解愛丁堡大學-《猜火車》里的愛丁堡氣質》

《一起玩弄「積木」，高興地像個孩子》

正文：

這個時間點，絕大部分學生已經放假啦，回家啦，可是回到家裡幹啥呢？經過緊張而密集的考試周，乍一到家總是要昏天黑地地休息幾天，見老朋友、聊天吹水、煲劇網購、當鍵盤俠。。。當代青年的假期日常多半是這樣吧。或許最開始你只是想在最初的幾天短暫地放飛自己，然而由於沒有提前做好時間規劃，一鬆懈起來覆水難收，拖延症晚期發揮得是淋漓盡致。

如果你不想頹成一個「躺在家的胖子」，又沒有足夠的禦寒屬性去參加一些體育活動，那麼也沒有關係。科學實驗顯示，相同單位時間的腦力勞動比體力勞動消耗的熱量更多，推薦一個很多設計專業學生在一開始都會排斥的腦力消耗方案——學代碼。

學代碼這件事，我說過大概有八百次了，不論是上課時還是在往期的文章里，其重要性自是不言而喻。此前關於Arduino和Scratch這類「傻瓜」式編程工具的強推，大家可以作為備選的學習方向來參考（傳送門在此：Arduino為什麼這麼火，一起玩弄「積木」，高興地像個孩子）。若這類側重邏輯、弱化語法的工具不是你的「菜」，那麼現在來安利另一種學代碼的方向：前端設計。

前端的學習也是「所見即所得」的，同時也可以滿足對於手敲代碼的儀式感的內心渴望。倘若外貌至上的你對於編程開發環境的「look」忍無可忍，http://animejs.com(如下圖)這個打擦邊球的動效代碼生成器工具或許可以聊以慰藉，成為你強啃代碼的起點。

Anime是一個online代碼生成工具，主頁顯示了它具有三大塊功能。最左側的DOCUMENTATION是一個動效庫，進入後，工作界面分工明確，左側是預設的動效演示，右側是對應的腳本語句。

小夥伴們可以通過左側的動效預演目錄預覽切換想要的效果，右側則會出現相應的腳本語句，自行複製粘貼到相應的開發環境下便可以實現狂跩酷炫的效果。

中間的CODEPEN板塊是一個作品展示區，點開後我們能看到的是「達人」們已經完成的動效作品，既有充滿科技感的數據可視化，也有構思巧妙的聯動設計，小夥伴們也可以把這裡當做創作靈感的獲取地。打開每個作品，它的HTML、CSS、JS都是全的，還有對應動效的演示，觀感體驗簡直不要太友好。

最右側的GITHUB按鈕是進入animejs的github傳送鈕，註冊一個github賬號後，fork一下，便可以把整個animejs的資源作為筆記本收入囊中，可以任性地進行修改操作。不過要知道，修改後的效果只是在你的git裡面發生改變，要想將改變呈現在原網站，還是需要有許可權允許的。

目前這一類「所見即所得」的前端工具也很多，開始嘗試後你會發現，代碼其實也可以很美的。

最後

學習使我進步

學習使我快樂

學習使我走向人生巔峰

。。。

懂點代碼，交出讓開發大哥高興的設計稿，不僅使得團隊合作高效，也會使設計師的自身滿足感得到提升。

原文鏈接：學習黑科技！拒絕頹成一個沒人要的胖子