強(qiáng)烈推薦！設(shè)計(jì)之前我們應(yīng)該做什么

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

更多原型設(shè)計(jì)文章：
《設(shè)計(jì)師基礎(chǔ)知識(shí)：你知道線框圖和原型有啥區(qū)別嗎》
《一分鐘搭建網(wǎng)頁(yè)布局！PS擴(kuò)展神器VELOSITEY 》
《推薦移動(dòng)UI/UX設(shè)計(jì)師和PM使用的原型工具》

從哪里開始UX設(shè)計(jì)流程

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

一切都是從頭腦風(fēng)暴開始的。當(dāng)我剛剛開始設(shè)計(jì)產(chǎn)品的時(shí)候，我會(huì)先將腦中零散跳躍的詞匯和一閃而過(guò)的圖畫都列在本子上，之后，開始尋找它們的共同點(diǎn)和相似之處。對(duì)我而言，我更喜歡使用帶有方格的筆記本，因?yàn)樗涗浐屠L圖都更富有彈性，更加“響應(yīng)式”。在這個(gè)階段，完美往往不是我所追求的，這些草圖更多是給我自己來(lái)看的。

準(zhǔn)備工作

在開始前，我一般會(huì)將所有關(guān)鍵點(diǎn)都列出來(lái)，將重點(diǎn)梳理出來(lái)。這個(gè)過(guò)程中，你可能會(huì)整理出一系列的需求，而這些條目會(huì)在你開始繪制交互設(shè)計(jì)稿的時(shí)候幫你優(yōu)化流程。

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

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

1、將多種不同的交互記錄在便簽紙上，置于統(tǒng)一畫板中，有規(guī)律地一次移除一張貼紙，然后再掃描或者復(fù)印出來(lái)。

2、使用不同顏色的貼紙來(lái)代表不同的交互行為，這樣會(huì)更系統(tǒng)。

3、如果一張便簽還不夠說(shuō)明設(shè)計(jì)模型的細(xì)節(jié)的話，就在旁邊加一張繼續(xù)寫。只有描述清楚，才能審視清楚，了解細(xì)節(jié)，把控全局。

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

按照上面的方法，會(huì)制作出不同的原型設(shè)計(jì)稿。這些設(shè)計(jì)稿的基本框架是一樣的，但標(biāo)注交互細(xì)節(jié)的貼紙不盡相同。

工具多多益善

工具就是你的設(shè)計(jì)軍火庫(kù)。我存在電腦和云端的工具和資源不計(jì)其數(shù)，好的工具能夠縮短你的設(shè)計(jì)過(guò)程，而合理搭配不同的工具會(huì)讓你的設(shè)計(jì)如虎添翼，更快更優(yōu)秀。

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

當(dāng)談及設(shè)計(jì)線框圖和原型所用的工具的時(shí)候，每個(gè)人習(xí)慣的工具和創(chuàng)作的手法都不盡相同（在數(shù)字藝術(shù)領(lǐng)域中，設(shè)計(jì)的手法從來(lái)都是多樣化的！）。繪制草圖用什么工具，搭配什么鉛筆，使用PS還是AI，從來(lái)都沒有死板的規(guī)定。重點(diǎn)在于，你喜歡用什么，你習(xí)慣用什么？

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

強(qiáng)大的iPhone UI模板

當(dāng)我需要制作一款移動(dòng)端優(yōu)先的UI設(shè)計(jì)的時(shí)候，我通常會(huì)使用這款iPhone UI模板（對(duì)應(yīng)的，還有Android手機(jī)UI模板，Android平板UI模板，Windows Phone UI模板和Windows 8 UI模板等全套手繪模板）。

以下就是案例了：

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

考慮到目前正在流行響應(yīng)式設(shè)計(jì)，這個(gè)響應(yīng)式設(shè)計(jì)繪圖本也是我最近特別喜歡的東西：

低保真設(shè)計(jì)稿

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

當(dāng)你使用這樣的低保真設(shè)計(jì)稿的時(shí)候，反而有機(jī)會(huì)更好地把控流程。

紙質(zhì)原型

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

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

原文地址：Medium
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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