完善產(chǎn)品設(shè)計(jì)的26個(gè)步驟

在過去的四年中，我一直在設(shè)計(jì)儀表板和應(yīng)用程序，并且我學(xué)會(huì)了如何與不同部門打交道，并利用他們的知識(shí)來提高產(chǎn)品設(shè)計(jì)的效率。

今天，我將分享我日常工作中的所有步驟，相信這些步驟使我成為一名更好的設(shè)計(jì)師。

前處理

1.獲得盡可能多的信息（詢問三個(gè)示例）

對(duì)我而言，沒有什么比看到一個(gè)實(shí)際的工作示例更清楚了。當(dāng)我與新客戶一起工作時(shí)，或在產(chǎn)品的全新登錄頁面上時(shí)，我發(fā)現(xiàn)最簡(jiǎn)單的起點(diǎn)就是要求客戶提供三到四個(gè)鼓舞人心的頁面，因?yàn)檫@確實(shí)對(duì)雙方都有幫助。讓您的客戶將創(chuàng)意付諸實(shí)踐，使您有機(jī)會(huì)輕松地了解他們的喜好以及對(duì)最終設(shè)計(jì)的期望。

如果您與多個(gè)團(tuán)隊(duì)合作，那么您應(yīng)該致力于與產(chǎn)品開發(fā)人員一起度過與您的設(shè)計(jì)師同事一樣多的時(shí)間。我了解到，做出有效的設(shè)計(jì)決策的關(guān)鍵是確保您與開發(fā)團(tuán)隊(duì)保持盡可能多的交流。就我而言，在某些情況下，我找到了解決問題的方法，我自己無法解決。

目的是在進(jìn)行開發(fā)之前消除盡可能多的問題。

2.了解角色

首先，我必須說我對(duì)角色表示懷疑，但是現(xiàn)在這對(duì)我來說很有意義。

因此，與我以前的過程完全相反，我可以看到角色在處理產(chǎn)品功能時(shí)是多么重要，尤其是在解決方案有許多不同的情況時(shí)。它可以幫助您了解您真正為誰設(shè)計(jì)的。我的目標(biāo)是擁有大約四到五個(gè)角色。

3.設(shè)定確切的目標(biāo)-我們應(yīng)該精確追蹤什么？

我認(rèn)為大多數(shù)設(shè)計(jì)師/客戶都忽略了這一步驟，但是對(duì)于雙方來說，設(shè)計(jì)最重要的方面之一就是了解您正在設(shè)計(jì)的產(chǎn)品的目標(biāo)。我們傾向于直接跳入像素并迅速充實(shí)項(xiàng)目的UI。如果是全新的網(wǎng)站或新功能，請(qǐng)確保為您首先要實(shí)現(xiàn)的目標(biāo)設(shè)定明確的目標(biāo)。

由于所有內(nèi)容都是可追蹤的，因此請(qǐng)說說您要追蹤的確切點(diǎn)。例如，這些范圍可能從新注冊(cè)到使用Paypal的許多客戶與使用信用卡購買的客戶不等。始終確保您知道一開始的目標(biāo)！

（無論如何，您稍后都需要在Mixpanel上設(shè)置渠道。）

4.設(shè)置項(xiàng)目文件夾并開始構(gòu)建情緒板

有很多啟發(fā)網(wǎng)站? -Dribbble，Behance，Pttrns  等。找到與您正在從事的項(xiàng)目相似的項(xiàng)目真的很容易。此外，可能已經(jīng)有解決您遇到的問題并試圖解決的問題。

當(dāng)我開始一個(gè)新項(xiàng)目時(shí)，我總是設(shè)置一個(gè)文件夾，該文件夾名為-  源文件，屏幕和導(dǎo)出，靈感和資源。我將在互聯(lián)網(wǎng)上找到的所有內(nèi)容保存到Inspiration文件夾中，以便以后使用它來創(chuàng)建基本的情緒板。該文件夾中可能包含來自插件，色板甚至來自Behance的完整案例研究的所有內(nèi)容。

低保真

5.白板

如果我們要添加新功能或重新設(shè)計(jì)流程，我們坐下來，每個(gè)人都可以在白板，紙甚至iPad上草擬想法。此操作使我們可以將團(tuán)隊(duì)中的每個(gè)人都置于設(shè)計(jì)師的位置。稍后，我們將給出兩個(gè)設(shè)計(jì)選項(xiàng)，以查看哪一個(gè)效果最佳。

在此過程的這一部分中，我們始終嘗試通過整個(gè)體驗(yàn)并討論大多數(shù)邊緣情況。與設(shè)計(jì)階段甚至開發(fā)階段相比，現(xiàn)在解決這些問題確實(shí)至關(guān)重要。那時(shí)候您可能會(huì)浪費(fèi)很多時(shí)間和精力。

6.映射出所有屏幕（用戶需要輸入哪些數(shù)據(jù)）

現(xiàn)在是超越白板并列出用戶所有輸入和故事的時(shí)候了。寫下用戶應(yīng)確切插入特定屏幕的內(nèi)容以及用戶如何實(shí)現(xiàn)其期望的目標(biāo)。

7.寫下所有可能的狀態(tài)

由于所有儀表板，應(yīng)用程序或網(wǎng)站的表單都具有不同的狀態(tài)，因此這是您不應(yīng)該忘記的另一個(gè)重要步驟。

在設(shè)計(jì)時(shí)，我們需要確保解決所有這些問題。在我們的Sketch文件或PSD中擁有閃亮的圖形和炫酷的個(gè)人資料圖片非常好。但是，用戶很可能會(huì)看到應(yīng)用程序的另一面。尤其是當(dāng)它們出現(xiàn)在您的產(chǎn)品上時(shí)。有必要做準(zhǔn)備。以下是我們?nèi)绾翁幚砥渲幸粋€(gè)數(shù)據(jù)組件中的空狀態(tài)的示例。

8.準(zhǔn)備第一個(gè)圖

所有這些導(dǎo)致低保真度的最后部分。由于有了白板任務(wù)的結(jié)果，我們現(xiàn)在知道了所有可能的狀態(tài)，用戶的輸入和目標(biāo)。總結(jié)所有交互，我創(chuàng)建了一個(gè)圖，說實(shí)話，我已經(jīng)多次更改了此操作的樣式：從具有光柵化版式的Sketch文件變?yōu)閮H用矩形表示每個(gè)頁面的矩形，其名稱如下。話雖如此，這個(gè)過程總是很痛苦，我通常會(huì)遇到一種情況，我們想在此過程中稍后進(jìn)行更改或添加一些內(nèi)容。使用這些解決方案，我通常不得不執(zhí)行更多步驟。例如更改線條，箭頭和圖像的位置。

最近，我一直在使用Camunda Modeler，這并不是一個(gè)精確的設(shè)計(jì)工具。這是一個(gè)用于創(chuàng)建技術(shù)圖表的簡(jiǎn)單應(yīng)用程序。聽起來很奇怪，但此應(yīng)用程序旨在幫助您構(gòu)建基本圖表。最重要的是，創(chuàng)建的所有內(nèi)容都是完全可伸縮的。您可以輕松地拖放任何點(diǎn)，它將自動(dòng)為您創(chuàng)建線條和箭頭。您還可以從不同類型的要點(diǎn)中進(jìn)行選擇，這有助于突出顯示例如用戶收到對(duì)講機(jī)的電子郵件時(shí)的信息。Camunda導(dǎo)出到SVG，從而可以輕松為Sketch中的可跟蹤點(diǎn)著色。

工作/設(shè)計(jì)

9.滑板

當(dāng)我將所有圖像收集到Inspiration文件夾中時(shí)，便可以開始創(chuàng)建情緒板。在開始像素處理之前，我主要使用情緒板來與同事討論我的想法并描述一些視覺想法。

10.初稿

設(shè)計(jì)始終是一個(gè)持續(xù)的過程。您將在整個(gè)過程中進(jìn)行很多迭代，以取得理想的結(jié)果。初稿也是收集反饋的一種方式。您不必進(jìn)行像素完美的設(shè)計(jì)即可開始接收來自隊(duì)友，客戶或潛在用戶的反饋。為了獲得他們的第一個(gè)想法并開始討論，我通常會(huì)混合使用我們當(dāng)前設(shè)計(jì)的屏幕。這使我們可以在不到一天的時(shí)間內(nèi)開始使用外觀逼真的設(shè)計(jì)。您可以制作第一個(gè)簡(jiǎn)單的原型來測(cè)試事物是否可以很好地連接在一起。

11.寫你的副本

復(fù)制是用戶決策的關(guān)鍵方面之一，我將其視為設(shè)計(jì)的關(guān)鍵部分。沒有一個(gè)令人迷惑的對(duì)話框，用戶在努力尋找下一步，這是一個(gè)不錯(cuò)的設(shè)計(jì)。

12.第一次實(shí)習(xí)測(cè)試

通過初稿，您可以在Marvel或Invision中快速創(chuàng)建原型。這是我最近開始做的事情，事實(shí)證明這是另一個(gè)令人驚奇的驗(yàn)證方面。使用原型，您現(xiàn)在可以輕松地與團(tuán)隊(duì)中的3或4個(gè)人建立呼叫，并與他們共享原型鏈接，并在測(cè)試特定流程/場(chǎng)景時(shí)嘗試提出一些問題。

這樣，您可以輕松地測(cè)試您的提問技巧，并且顯然可以在真實(shí)用戶上測(cè)試您的設(shè)計(jì)決策，而不必?fù)?dān)心浪費(fèi)資源和時(shí)間。我傾向于選擇不參與儀表板開發(fā)的人員。另外，還要避免避免看到以前已經(jīng)有機(jī)會(huì)玩過原型的人。

13.禮節(jié)

我們都知道保持整潔有多么困難。如何提供另一個(gè)功能。這通常會(huì)導(dǎo)致草圖或PSD文件混亂。我已經(jīng)學(xué)到了很多關(guān)于在初創(chuàng)公司中擔(dān)任單一設(shè)計(jì)師，在團(tuán)隊(duì)中工作或開發(fā)自己的數(shù)字產(chǎn)品之間的區(qū)別的知識(shí)。

當(dāng)您在團(tuán)隊(duì)中工作時(shí)，請(qǐng)考慮一下您的PSD，就像您正在為其他人創(chuàng)建它們一樣。我使用的規(guī)則是，如果一個(gè)文件夾中的層數(shù)超過8，則應(yīng)創(chuàng)建一個(gè)新層。

我找到了一個(gè)很棒的Sketch插件，為我的UI套件工作節(jié)省了時(shí)間：重命名。

提示：將所有內(nèi)容放在畫布上。我一直在努力設(shè)計(jì)漂亮的標(biāo)題，而其余的畫布是白色的。在設(shè)計(jì)時(shí)，我學(xué)會(huì)了將所有內(nèi)容放在第一位-只是玩布局和版式。設(shè)計(jì)精美的細(xì)節(jié)并在適當(dāng)位置使用整個(gè)概念要容易得多。

14.創(chuàng)建UI元素并開始使用LEGO

我可能參加聚會(huì)很晚，而在撰寫本文時(shí)，這聽起來已經(jīng)過時(shí)了。我們?cè)诖诉^程中未進(jìn)行任何線框圖的原因很簡(jiǎn)單。我發(fā)現(xiàn)Sketch 39帶有令人難以置信的東西，那就是“具有調(diào)整大小屬性的形狀”。這使團(tuán)隊(duì)中的每個(gè)人都可以輕松進(jìn)行設(shè)計(jì)。現(xiàn)在，我們的Sketch文件是純拖放文件。您可以輕松地給任何隊(duì)友一張空白的畫布，他們可以創(chuàng)建幾乎高保真的草稿。因此，我們能夠跳過所有線框圖工具，并以幾乎真實(shí)的像素開始。

這與我們能夠?qū)⒕€框?qū)嶋H轉(zhuǎn)換為實(shí)際設(shè)計(jì)緊密結(jié)合。任何PM都可以創(chuàng)建線框，然后我可以輕松地將其接管并轉(zhuǎn)換為高保真度。

資產(chǎn)與交付

當(dāng)您完成基于第一反饋的設(shè)計(jì)和迭代時(shí)，您還沒有完成。現(xiàn)在是時(shí)候?qū)⒛脑O(shè)計(jì)移交給工程師/開發(fā)人員了。

15.規(guī)格

我的主要目標(biāo)之一是始終能夠與團(tuán)隊(duì)溝通我的決定，并能夠盡我所能減少開發(fā)人員的困難，以便為他們提供最佳的資源。對(duì)我來說，這絕對(duì)是我從事設(shè)計(jì)師工作中最重要的部分。

由于我們記錄了所有交互并從流程開始就準(zhǔn)備好了所有內(nèi)容，因此創(chuàng)建規(guī)格很容易。我傾向于在Google文檔中或在Sketch文件的屏幕下方編寫規(guī)范。最好在解釋所有功能的同時(shí)處理您的設(shè)計(jì)，以便將來任何人都可以抓取您的文件。

16.圖

該技術(shù)非常適合打印設(shè)計(jì)并與團(tuán)隊(duì)討論。但是如今，我認(rèn)為有更好的選擇。比如準(zhǔn)備好最終的原型。

17.最終原型

對(duì)我來說，關(guān)鍵的事情之一是始終在原型中準(zhǔn)備好所有交互。在與隊(duì)友進(jìn)行的小型會(huì)議或展示一些特殊流程的過程中，我通常會(huì)在最終決賽的過程中擁有3-5個(gè)原型。我傾向于在一個(gè)畫板上準(zhǔn)備Sketch中的所有狀態(tài)，然后復(fù)制這些畫板以在導(dǎo)出時(shí)準(zhǔn)備好每個(gè)狀態(tài)。

最好在設(shè)計(jì)的各個(gè)部分中添加注釋，以進(jìn)一步擴(kuò)展規(guī)范，以便每個(gè)文案和對(duì)話框都能按要求工作，即使是文案撰稿人也可以輕松地檢查真實(shí)像素和流。

18. QUICKTIME視頻>注釋

當(dāng)我不在環(huán)聊上向團(tuán)隊(duì)或客戶展示內(nèi)容時(shí)，我會(huì)發(fā)送一個(gè)截屏視頻，介紹我如何瀏覽原型并解釋我所設(shè)計(jì)的一切。對(duì)于任何演講之前的我來說，這都是對(duì)我的一個(gè)很好的確認(rèn)，我知道我決定設(shè)計(jì)的任何問題的答案以及可能的奇特互動(dòng)。在遠(yuǎn)程團(tuán)隊(duì)中工作時(shí)，也可以很好地使用它。每個(gè)人都可以隨時(shí)重播整個(gè)交互思維。

19.動(dòng)畫

可以使用After Effects或Principle作為最后的效果。很好地解釋您希望如何移動(dòng)。

20.風(fēng)格指南

工程師的另一個(gè)關(guān)鍵點(diǎn)是要了解事物在不同情況下的反應(yīng)。考慮輸入的錯(cuò)誤狀態(tài)或顯示錯(cuò)誤消息的位置。同樣，提交按鈕的禁用狀態(tài)將如何顯示，放置微調(diào)框的位置等。

網(wǎng)站設(shè)計(jì)制作Lego塊的Sketch文件，因此工程師甚至可以開始對(duì)所有屏幕進(jìn)行編碼之前，工程師一一遍歷您的Symbols畫板和樣式元素非常容易。