@陳子木 很多做UI設計師開始設計前都有制作原型的習慣，可是萬事開頭難，打開原型設計軟件之前，設計師還需要耗費大量的經歷在尋找靈感，思考框架，甚至在繪圖本上涂抹很差時間。看看過來人是如何開始他們的UX流程和原型設計的吧！

更多原型設計文章：
《設計師基礎知識：你知道線框圖和原型有啥區別嗎》
《一分鐘搭建網頁布局！PS擴展神器VELOSITEY 》
《推薦移動UI/UX設計師和PM使用的原型工具》

從哪里開始UX設計流程

我會隨手在我周圍的每一個物體表面上涂鴉，記錄下點滴的想法。不論是外賣菜單，還是辦公室的玻璃窗還是Moleskine的筆記本，都是我記錄想法的地方。

一切都是從頭腦風暴開始的。當我剛剛開始設計產品的時候，我會先將腦中零散跳躍的詞匯和一閃而過的圖畫都列在本子上，之后，開始尋找它們的共同點和相似之處。對我而言，我更喜歡使用帶有方格的筆記本，因為它記錄和繪圖都更富有彈性，更加“響應式”。在這個階段，完美往往不是我所追求的，這些草圖更多是給我自己來看的。

準備工作

在開始前，我一般會將所有關鍵點都列出來，將重點梳理出來。這個過程中，你可能會整理出一系列的需求，而這些條目會在你開始繪制交互設計稿的時候幫你優化流程。

下面是Smashing Magazine所提供的建議：

如何使用便簽在單個畫板中探索多種不同交互和思路

1、將多種不同的交互記錄在便簽紙上，置于統一畫板中，有規律地一次移除一張貼紙，然后再掃描或者復印出來。

2、使用不同顏色的貼紙來代表不同的交互行為，這樣會更系統。

3、如果一張便簽還不夠說明設計模型的細節的話，就在旁邊加一張繼續寫。只有描述清楚，才能審視清楚，了解細節，把控全局。

4、如果交互細節描述簡單，便簽紙大了，那么可以用刀裁掉多余的部分，甚至可以根據布局裁剪成合適的造型。盡量讓畫板看起來更合理，更清爽。

按照上面的方法，會制作出不同的原型設計稿。這些設計稿的基本框架是一樣的，但標注交互細節的貼紙不盡相同。

工具多多益善

工具就是你的設計軍火庫。我存在電腦和云端的工具和資源不計其數，好的工具能夠縮短你的設計過程，而合理搭配不同的工具會讓你的設計如虎添翼，更快更優秀。

這只是我這幾年整理的素材的一部分，并且我也逐漸離不開它們了。

當談及設計線框圖和原型所用的工具的時候，每個人習慣的工具和創作的手法都不盡相同（在數字藝術領域中，設計的手法從來都是多樣化的！）。繪制草圖用什么工具，搭配什么鉛筆，使用PS還是AI，從來都沒有死板的規定。重點在于，你喜歡用什么，你習慣用什么？

做UI模板設計的朋友近期發布了幾款多功能繪圖模板和流程圖模板，希望做UX和UI設計的朋友可以在它們的幫助下快速繪制線框圖和交互設計稿。以下是我見過的比較喜歡的設計稿：

強大的iPhone UI模板

當我需要制作一款移動端優先的UI設計的時候，我通常會使用這款iPhone UI模板（對應的，還有Android手機UI模板，Android平板UI模板，Windows Phone UI模板和Windows 8 UI模板等全套手繪模板）。

以下就是案例了：

這也是我最喜歡的組合，iPhone UI模板和iPhone流程圖模板。

考慮到目前正在流行響應式設計，這個響應式設計繪圖本也是我最近特別喜歡的東西：

低保真設計稿

這種低保真設計稿可以幫你快速完成線框圖設計，當你和團隊考慮完全之后，再挪到Axure、Omnigraffle或者InDesign這樣的設計軟件中去，然后展示給客戶和合作伙伴看。

當你使用這樣的低保真設計稿的時候，反而有機會更好地把控流程。

紙質原型

最好最快最粗糙的原型設計可能會用到你周圍所有的東西，以達到最好的呈現。下圖中的紙質智能手表設計原型就設計的非常巧妙，手繪的手腕和手表上挖了個洞，不同的UI隨著你的拉動會順次出現在“屏幕”上。不要拘束，也許你廚房的廚具、舊的數碼設備，甚至于鞋盒都可以成為你設計的原材料！

你在的UX設計流程是怎樣的？你會怎樣制作UX原型？不妨與我們一同分享一下吧！

原文地址：Medium
優設網翻譯：@陳子木
本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量69萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：