原型設計ui設計h5類等生產工具大爆發，設計師們應該何去何從？

01-14

不好意思問出了歧義，我的意思是設計師如何選擇，或者如何決定是否需要學習一個新工具。

工具永遠都不可能代替設計師！你聽說過斧子代替木匠的嗎？

我們程序員等這一天等了很久，大概六年那麼久了。文末推薦工作流程。

今年是2015年了，Android發布已經六年有餘，響應式設計炒作了若干年了，我們程序員早就可以寫各種漂亮的東西跑在稀奇古怪的設備上了。可是打開各種網站、各種App，多半丑的不忍直視，同行都要把我的臉丟盡了，每天被黑沒有品位黑出翔了。

這全拜設計師所賜啊。都2015年了，你們還在用Photoshop設計手機App是鬧哪樣的，你們都被它連累了知道不，工具不重要什麼的真是夠了。

那種微妙的布局，神乎其技的配色，Android用戶就被華麗麗的忽視了，iOS只有新版的設計稿，剩下的靠腦補，換個解析度就沒法看了啊，腦補你妹啊，最終我們成了沒品位的背鍋俠啊。快大膽的承認你也不知道各種稀奇古怪的解析度下表現的什麼樣吧，摸摸頭，不怪你。

還有那個《iOS人機交互指南》和Material design的文檔啊，用以前的工具實踐起來真是夠了，一個交互動畫Adobe全家桶出動還不夠用，After Effects和C4D學起來要人命，出完效果剩下的讓程序員腦補，腦補你妹啊，我們又成了沒品位的背鍋俠啊。大膽的承認你也不知道那種動畫在各種稀奇古怪的設備上表現的怎麼樣吧，摸摸頭，不怪你。

還有切圖啊，切圖啊，切圖啊。像素對齊啊，像素對齊啊，像素對齊啊。各種小細節摳起來要了親命了，Adobe全家桶一起上陣，連累大家一起悲壯的加班，還天天一副苦逼的樣子，大家都是打工的，凈看到你們吐槽了，用吐槽的時間提升一下工作效率多好啊。

真以為我們不懂審美啊，誰不知道這是看臉的時代，要扁平外加小陰影，要大膽而收斂的配色，要清晰又簡明的布局，要如絲般潤滑的動畫，只可惜，工具不給力啊。不是我們程序員想批判設計師，只准用記事本寫程序的話，我們也非常慢，我們只是想批判下工具，不行不要死扛了，快換吧。

我們是苦逼的背鍋俠，不想戳你的屏幕，不想一次次的跑去找你，所以快換工作流程，咱們一起愉快的玩耍吧。

推薦工作流程如下：

1. 產品經理使用墨刀之類的直接出可以運行原型，連同想抄誰家產品用什麼配色自己有哪些癖好一起打包，開會撕逼討論通過；

2. 嚴格按照設計規範，使用Sketch完成設計，使用Sketch Constraints標註約束，自己瞅瞅好不好看，順便說一下，我們在程序里實現的時候也是用的約束。然後使用Sketch Measure完成標註，切1x 1.5x 2x 3x四套圖（上下左右各多留一像素）。開會撕逼討論通過；

3. 需要交互的界面使用Principle完成製作，把最終的gif圖還有用到的各種曲線打包，開會撕逼討論通過；

4. 如果設計單頁web頁面外加很帥氣的交互，直接用Hype 3完成，打包成Html 5作為最終產品參加撕逼，否則交給程序員實現；

5. 圖標的設計在紙上完成，用Skecth或者AI做一套矢量的，遵循各個平台規範切圖，別用Photoshop了，真的；

6. 以上總花費沒多少，Sketch、Principle、Hype 3加起來不過兩三天的工資，請使用正版，別再用盜版的全家桶了，真是夠了。我們程序員很有品味，女朋友保有量也不低，我們沒說你們的作品一文不值，沒盜你們的圖，你們也別踐踏我們同類的勞動果實。

差不多就這樣了，改變一下，沒什麼難的，如果你還在用Photoshop每天跟程序員撕逼，真心建議你試一下。我們程序員一天能工作的時間真心不到六個小時，加班純粹是因為各種原因導致的工作效率低下。

祝好。

HTML5，也就是我們常說的H5，它是一種標記語言，主要用於網站的編寫和Web App的開發。H5製作的網頁可以說是現在網路推廣、促銷方面的利器。其優點主要體現在兩個方面，一是豐富的動效支持，二是查看方便。H5近年來越來越受到人們的喜愛。

但是，使用H5做開發，並不是人人都能做的，需要大量的編程語言和開發的基礎，而一些所謂的簡單設計H5的工具功能又不完善。如果我不會js，不會HTML5語言，怎麼能做出一個「類H5」的簡單App呢？

作為產品小白的熊先生最近正在悶頭做原型，在製作的過程中忽然發現，自己的設計其實完全可以應用到H5網頁這樣的推廣當中。最近正在做一個旅遊相關的app，那麼我就幫忙幫到底，做一個旅遊活動推廣的「類H5」推廣原型吧。

開始之前，我們需要確定一個原型設計工具，就用Mockplus好了，最近一直在用，拿來也比較順手。

然後，列好大鋼，編輯項目樹。良好的規劃是優秀的設計中必不可少的一部分。

接下來，我們開始頁面的設計。

第一步：載入動畫。

載入動畫是H5頁面標誌性的效果之一，「類H5」當然也不能忘記這一點。

方法：導入需要的圖片，根據頁面的內容，設置某些組件為不可見；拖拽它們各自的鏈接點設置「載入時」顯示自己的交互效果。並且給部分組件設置上移動的動畫效果，使得整個頁面更加生動。

第二步：設置交互效果。

使用原型設計工具來設置「類H5」網頁最大的優勢就在於：原型設計工具有更多的交互效果，你想要的總有辦法可以實現。這裡我們先簡單的設置一些彈窗的效果。比如，關於旅行社的介紹、導遊的相關資質、旅遊線路的介紹等等。

方法：拖拽出相應的彈窗組件，雙擊打開設計。然後拖拽頁面中組件的鏈接點到彈窗上，最後設置彈出的效果。

第三步：頁面跳轉。

在用戶比較感興趣的內容區域設置頁面的跳轉，重點內容用新的頁面來講解，減少其他內容的干擾，不僅保證了吸引用戶的眼球，更加保障頁面運行的流暢程度。

方法：設置頁面的跳轉效果對原型設計工具來說完全是小菜一碟，Mockplus只需要一個簡單的拖拽動作就可以搞定了。

第四部：在線發布。

設計做的再好，沒人欣賞怎麼行？可是，要怎麼才能把這樣一個「類H5」的原型項目發出去呢？

方法：發布。有了這個功能，你就可以把做好的作品上傳到Mockplus的伺服器，然後拿著這個鏈接分享給你的客戶們了。而且，Mockplus可以很簡單的就做到全屏演示的效果。怎麼樣，是不是很神奇？

設計的內容比較簡單，主要是希望大家能夠明白這個意思。

熊先生覺得：市場也好，設計也好，我們更注重的是得到的結果，而不是手中的工具。雖然使用原型設計工具來實現H5網頁似乎有些風馬牛不相及，但是只要能夠解決實際的問題，何必要墨守在固定的模式里呢？

學好理論知識，工具畢竟是工具，理論是平台，適用各種工具～

受教了