編者按：原型是APP后續(xù)的視覺設(shè)計與開發(fā)的重要基礎(chǔ)，原型的構(gòu)建幾乎決定了產(chǎn)品的走向，失之毫厘，謬以千里。在很多時候，原型設(shè)計的時間有限，如何快速制作準確可靠的原型就是產(chǎn)品和設(shè)計師要操心的事情了。今天的文章用一個天氣類應用作為案例，詳細講述了如何圍繞用戶體驗在三天內(nèi)搞定原型設(shè)計，希望能給你幫助~

基本流程

第一天：研究&總結(jié)
第二天：構(gòu)想&設(shè)計
第三天：測試&迭代

工具：筆、紙、iPhone、POP（Beta，免費版）

研究

用戶訪談

在同潛在用戶溝通之前，我會事先準備好三個問題：“你為何會查看天氣？”“你現(xiàn)在在用哪些天氣類的網(wǎng)站和APP？”“你會多久查看一次天氣？”

準備好問題之后，我花費了一天時間，同六個用戶圍繞這3個問題進行訪談。

·用戶——用戶群體可以被劃分為兩個大類
·背景——兩者都會在早上查看天氣，這是他們交叉天氣查看時間
·行為——查看天氣是每天早上的日常行為，并且會圍繞著天氣做一天的準備；其次，這種行為很明顯是為了更好地圍繞著天氣情況計劃周末和旅行之類的活動。

在研究分析的時候確定兩類用戶群

用戶訪談繼續(xù)

為了發(fā)現(xiàn)更多關(guān)于用戶需求和用戶目標的細節(jié)問題，我需要繼續(xù)六人訪談，并且借助我的“四列表”方法來搞定這一切。這種方法并不難，我會在訪談階段將時間劃分為連續(xù)的四個塊，這四塊時間內(nèi)，這6名用戶需要針對四個不同的主題，盡可能多的列出他們的想法。這四個主題是這樣劃分的：

·痛點——在查看天氣時哪些事情會讓人感到沮喪或者糾結(jié)？
·樂趣——哪些設(shè)計體驗良好，它們有沒有提升空間？當一切運轉(zhuǎn)良好的時候，應該是什么樣子？
·背景——什么時候、什么地方你會查看天氣？
·行為——當你查看天氣的時候會怎么做/操作，會有什么樣的感受？

總結(jié)

將數(shù)據(jù)轉(zhuǎn)化為想法

通過用戶訪談，我將用戶的數(shù)據(jù)搜集起來，確定那些讓用戶愉悅或者痛苦的地方，從而辨別出那些同用戶緊密相連且能引起共鳴的設(shè)計。

根據(jù)用戶訪談之后的分析總結(jié)，完善關(guān)于用戶目標的初步想法

確定功能

問題：用戶快速獲取相關(guān)天氣信息基本會圍繞下面三種模式：1）為新的一天做準備；2）查看當時的天氣情況；3）為后續(xù)的事件做準備。

1、早上用戶首要的事情是查看天氣，確定當天要穿什么帶什么→主屏幕應該在顯著位置未來一個小時內(nèi)的溫度和降水等情形。
2、為了做好準備，用戶需要整天的精準數(shù)據(jù) → 第二屏需要包含以小時為單位的精準數(shù)據(jù)。
3、有一部分用戶需要知道是否需要攜帶抗過敏藥物 → 需要顯示當天空氣中的花粉濃度，以及未來三天甚至一周的拓展數(shù)據(jù)。
4、用戶可能會碰到突變的天氣，諸如陣雨和冰雹 → 在天氣惡劣或者突變的情況下對用戶即時發(fā)出通知
5、用戶需要為周末或者旅行進行計劃則需要至少未來3~5天的視圖 → 需要為用戶準備可以延長時間段的模塊
6、用戶喜歡能快速訪問多個地點的信息→ 需要讓用戶可以添加額外的地點，并且可以通過快速滑動或者下拉來訪問
7、喜歡騎車或者經(jīng)常四處溜達的用戶需要知道相關(guān)時段兩點之間的路況 → 需要添加一個支持A點到B點路況信息的模塊
8、有用戶講述了他曾在旅程中遭遇奇怪惡劣天氣但天氣APP并未提醒的事情 → 需要考慮為應用增加一個模塊，專門為用戶提醒當前地區(qū)日常情況和應對技巧
9、做好了周末出行計劃但又錯過了好天氣是一個共同的痛點，想在好天氣享受出行樂趣是共同的需求 → 考慮增加一個快速查看下一個周末天氣的模塊

設(shè)計

為什么要手繪？

根據(jù)我的發(fā)現(xiàn)，最初的概念設(shè)計主要是借助筆和紙完成的。手繪設(shè)計的特色就是速度快。相同時間之內(nèi)，提交一份電子文檔的時間足夠我在紙上畫十個原型了。

第一版原型

借助一個名為POP(Prototyping on Paper)且尚處于測試階段的APP，我能夠?qū)⑽业氖掷L原型轉(zhuǎn)化為界面。接下來，我要開始做測試了。

測試第一輪

我為前來測試的志愿者提供了兩種情形，我為他們準備了iPhone版的POP原型，并且觀察他們執(zhí)行任務的行為和反應。

情形1:“想象你剛剛醒來，你打算開始新的一天，并且想知道當天天氣如何，能展示一下你將如何操作么？”

情形2:“想象一下，你準備在周末參加戶外音樂會，但是不知道天氣如何，你會怎么辦？”

結(jié)果與迭代

·用戶需要進行一些必要的滾動和點擊操作，才能到達相關(guān)的界面，之后用戶會根據(jù)顯示的數(shù)據(jù)進行思考并作出相應的決策。
·在觀察第一輪測試過程中，我逐漸意識到我錯過了一個關(guān)鍵點：天氣是影響我們享受生活的因素。

“我們要如何充分利用好天氣來享受生活，并且盡量讓惡劣的天氣負面影響更小？”

測試有助于重構(gòu)用戶目標

語音界面

我開始意識到，我上一版的設(shè)計在問題的關(guān)注點上就偏移了，它僅僅只是代表了我和測試者的共同需求。

用戶目標本質(zhì)上是作出明確的決策，最終的目的是搞明白要穿什么、帶什么、準備什么以及是否要繼續(xù)某個特定活動。

而第一版的原型一開始先設(shè)定好交互和操作的方式，并未抓住問題的核心。所以，我準備在第二版原型上圍繞著用戶的核心目標，來調(diào)整設(shè)計。

第二版原型

這個概念姑且稱之為“Little Birdy”，它加入了一個更加直接的語音操作界面，在你剛剛進入程序的時候需要稍加設(shè)置個人信息和喜好，在這個流程中，程序會對你了解更多。

這種新的設(shè)計，移除了復雜的滾動和點擊操作，用戶也無需分析復雜數(shù)據(jù)來做決策，程序會替你給出合理的建議。不過這樣的設(shè)計，APP需要搜集相當?shù)臄?shù)據(jù)，來確保用戶得到正確的結(jié)果。

測試第二輪

我們?yōu)闇y試者再次提供了兩種新的情形，并且為他們安排了新的任務，并要求對APP進行定制化。初步反饋信息非常理想。

下一步

如果有機會進一步完善這一原型，接下來要做的重要步驟包括如下內(nèi)容：

·額外的用戶研究和測試
·改進UI設(shè)計：怎樣設(shè)計可以讓界面更簡單？
·優(yōu)先增加的功能，諸如惡劣天氣通知
·增加用戶引導教程
·測試跳過介紹的選項
·探索付費功能的可能性

我還注意到，這個項目是圍繞著用戶體驗來進行設(shè)計的，并未考慮到市場的需求，也就是說，如果要實施起來還應該加入市場競爭分析。

挑戰(zhàn)與收獲

從用戶體驗的角度來看這個項目，設(shè)定明確的目標對于高效研究和用戶數(shù)據(jù)搜集有著極其重要的意義（同樣的，這也對于大規(guī)模數(shù)據(jù)分析有著重要意義，比如人口統(tǒng)計數(shù)據(jù)在類似APP中的具體應用）。

由于只有三天時間來創(chuàng)建整個原型，時間資源極其有限，所以設(shè)定好各個環(huán)節(jié)的時間間隔，對于后續(xù)的工作很有幫助。這也是為什么手繪原型是整個環(huán)節(jié)最重要的手段。

當你在蘋果的App Store中搜索天氣應用的時候，超過8000個同類應用證明這類工具的廣泛存在，而這也是這款帶有我個人烙印的應用脫穎而出的主要障礙。

這次項目之后，我意識到了做記錄（包括設(shè)計注釋、用戶訪談的內(nèi)容記錄、設(shè)計過程中的記錄）是一項關(guān)鍵的技能，我打算通過保持每天做記錄的習慣來提升這一技能，這可以為后續(xù)的設(shè)計決策節(jié)省大量的時間。

【APP設(shè)計那些事兒】

學習優(yōu)秀案例：
《洗腦推薦！有哪些色彩豐富的極簡APP設(shè)計？》

掌握專業(yè)工具：
《歪果設(shè)計師真會玩！13款設(shè)計師標配的實用APP》

提升產(chǎn)品氣質(zhì)：
《小處顯逼格！APP界面如何在細節(jié)上提升氣質(zhì)？》

原文地址：medium
優(yōu)設(shè)譯者：@陳子木

「子木說」

Axure在原型設(shè)計工具領(lǐng)域的地位就像PS之于設(shè)計師，它最大的特色就是每個產(chǎn)品經(jīng)理都在用它。說不上為什么，一直對它喜歡不起來。在Mac平臺上推薦一個更原生、有口皆碑的原型設(shè)計工具，OmniGraffle。網(wǎng)上相關(guān)的介紹文章并不少，稍加搜索能找到不少。下載戳這里：OmniGraffle，注冊機。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(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"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量97萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：