亚瑟国产精品久久无码,精品久久久久香蕉网

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

以場景為中心的產(chǎn)品設(shè)計：突破你的大腦然后像用戶一樣思考

SXM

2015-05-06

0 評論 15323 瀏覽 8 收藏

11 分鐘

當(dāng)?shù)谝淮伍_始設(shè)計交互式產(chǎn)品時，我是非常掙扎的。小的項目都還好，但是當(dāng)交互變得復(fù)雜時，我注意到工具、團(tuán)隊的交流甚至是我自己的思考都開始失效了。我看到今天許多創(chuàng)業(yè)公司面臨著同樣的問題。所以我想（和大家）分享一些方法，利用這些方法我已經(jīng)在過去的幾年中改變了處理復(fù)雜大型產(chǎn)品的設(shè)計過程。

過去常常進(jìn)行頁面設(shè)計

回顧大學(xué)，我們主要設(shè)計海報，圖書封面，（網(wǎng)站）主頁和很多其它頁面。我們使用 Adobe Illustrator 和 Photoshop 軟件，它們在設(shè)計頁面時表現(xiàn)都非常棒。同行的批評是非常有用的，因為批評本身就非常類似于使用產(chǎn)品：一個普通的觀眾走到他們之前沒有見過的事物面前，然后看上幾分鐘。在一個設(shè)計工作室看到一張海報就好像走在大街上看到這張同樣的海報。

以頁面為中心的設(shè)計不是服務(wù)于 APP 的

一旦你將要處理一個擁有十多個頁面和數(shù)百個狀態(tài)的APP時，你不能像（設(shè)計）一張海報一樣在大腦中 Hold 住整個產(chǎn)品。我注意到我們團(tuán)隊在圍繞著單個頁面發(fā)郵件，討論著單個頁面，給所有頁面命名時僅僅只是記錄（keep track）。但是我們對如何把頁面和特征組合在一起（這件事）沒有任何的關(guān)注。

我們把產(chǎn)品當(dāng)作一組頁面來思考。但是這種工作方法有一個問題：人們怎樣在現(xiàn)實生活中體驗這款產(chǎn)品是不重要的。在任何地方人們都在很短的時間流里使用產(chǎn)品，大概從30秒到幾分鐘。

一個用戶可能在一個搜索結(jié)果中首先注意到你的產(chǎn)品，花一分鐘的時間大概瀏覽一下這款產(chǎn)品，然后離開。他們可能回來，注冊，然后再次離開。他們可能打開來自這款產(chǎn)品的郵件，回來，購買產(chǎn)品，然后離開。每一個這樣的小故事都是人們實際情況下體驗?zāi)愕漠a(chǎn)品的一種方式。

一個產(chǎn)品不是（簡單的）一組頁面——它是這些頁面組成的使用場景。

如果你的團(tuán)隊沒有關(guān)注這些使用場景，如果你孤立地思考每個頁面，那么你的想法將和實際使用你的產(chǎn)品的用戶完全不同。

以場景為中心的設(shè)計

一旦我意識到使用場景是我們實際上設(shè)計的東西，一切都變得簡單起來。但是我對保持關(guān)注的故事仍然有困惑——我不斷地發(fā)現(xiàn)自己在思考個別頁面。

所以我開始通過不同的方式來突破我的設(shè)計過程。我改變了工具，可交付成果，以及如何和我的團(tuán)隊一起工作。這里有我發(fā)現(xiàn)的最好的四種可以專注于故事的方法。

方法一：在畫線框圖之前使用故事板

在開始設(shè)計產(chǎn)品之前我會思考它的一個使用場景，這對于產(chǎn)品的成功是至關(guān)重要的。產(chǎn)品的核心很有可能是由十幾個或是更多的使用場景組成的，但是我只選擇一個開始。然后我構(gòu)建了一個故事板——很像漫畫。如果我已經(jīng)在腦海里有了線框圖，那么故事板的每個框架在界面上都會有一個對應(yīng)的頁面。有時候我得到的更多是抽象的使用場景，每個框架都是一個小型交互數(shù)據(jù)塊：用戶閱讀或點擊的任何區(qū)域。

好吧，這不是火箭科學(xué)，但這門學(xué)科在很多方面都有幫助：

故事板幫我同樣專注于我們需要設(shè)計的所有屏幕——其中一些甚至可以被搜索引擎用來搜索信息片段或電子郵件。

故事板強(qiáng)迫我去思考用戶目標(biāo)，因為它們顯示了如何在產(chǎn)品中完成任務(wù)。

一旦我們認(rèn)同故事板是對公司最重要的東西，它們能夠幫忙選定所有功能在屏幕上的優(yōu)先級。

故事板真的能夠幫助我專注于屏幕之間的切換，一個按鈕在屏幕上要有它的意義，但它也需要設(shè)定好用戶將在接下來的屏幕上看到什么。

而且最棒的部分是，我可以反復(fù)使用這些相同的故事板，所以它大幅加快了我的其它工作速度。當(dāng)我向團(tuán)隊展示UI設(shè)計稿時，我需要向他們展示一個故事板。當(dāng)用戶開始使用產(chǎn)品的時候，我們可以在一組屏幕上向用戶展示相同的故事板。如果我們做出了一個可交互的demo或者完成了一個產(chǎn)品的介紹視頻，就如你猜測的那樣——我們需要一個故事板。

方法二：用 Fireworks 渲染整個使用場景

我知道大多數(shù)的設(shè)計師都使用 Photoshop 或 Illustrator ，況且是視覺設(shè)計，沒有什么軟件比它們更好了。但是如果我們正在設(shè)計故事板，那么設(shè)計標(biāo)準(zhǔn)應(yīng)該是將來用戶會看到的高保真頁面。這些故事板可能需要20~30個頁面，如果用 Photoshop 去設(shè)計它們會變得很艱難，所以大部分的設(shè)計師不會找這麻煩，我們又再次回到設(shè)計單個頁面。幸運(yùn)的是， Fireworks?有一些巧妙的功能能夠使設(shè)計盡可能地保持以故事為中心：

內(nèi)置網(wǎng)頁：您可以在一個文件中建立一個完整的故事。上下方向鍵可以很容易地翻閱故事班，看看到底用戶將看到什么。

母版：如果頁眉或圖標(biāo)出現(xiàn)在多個頁面，你可以把它做成一個母版。然后，如果你需要在用戶測試之修正一個圖標(biāo)，你不必單獨修改20個文件。

查找和替換：團(tuán)隊可以在設(shè)計進(jìn)程的中途修改一個功能的名字嗎？沒問題。

高保真：您可以在同一個工具中把一個粗糙的線框圖變成一個好看的線框圖，一旦故事板是固化的（solid），你可以為了更好的細(xì)節(jié)設(shè)計而回到 Photoshop 軟件中。

方法三：在紙上回顧整個使用場景

當(dāng)我們團(tuán)隊到了需要審查設(shè)計稿的時候，我?guī)缀鯊膩聿徽故竟铝⒌囊粋€個頁面，相反，我將會把一個故事板里的所有頁面都打印出來，然后把他們鋪在很長的會議桌上或者用膠帶把它們貼在墻上。

這樣的工作方法非常好，因為團(tuán)隊人員可以近距離地看到一個頁面上的所有細(xì)節(jié)。他們可以往后退一步，看到相鄰的頁面，想想頁面之間的交互切換。甚至他們可以后退更多以看到整個故事板，這有助于讓每個人對頁面上需要有的內(nèi)容的用戶目標(biāo)和任務(wù)保持相同觀點。

當(dāng)我向其他設(shè)計師展示工作內(nèi)容時，我將跳過圖紙僅僅是在電腦上點擊屏幕——他們將獲得所需信息。而且我發(fā)現(xiàn)打印的這種方法對工程師和PM們來說是非常有幫助的，他們不會像我一樣花整天的時間來研究交互設(shè)計。哦對了，在設(shè)計的時候你可以直接用紙做筆記，并且可以把他們帶回你的辦公桌上作為下次的迭代素材。

方法四：不要發(fā)送 mockups ，記錄屏幕錄像。

這是我所知道的最奇怪又是最有幫助的設(shè)計交付物。我過去常常通過電子郵件來解釋交互細(xì)節(jié)。我會附上一組頁面，然后努力去解釋它們是如何組合在一起的。這寫起來很痛苦，而且閱讀起來也不是那么輕松。所以我開始用ScreenFlow錄制故事板的視頻。由于每個頁面已經(jīng)建在Fireworks中，我只需要假裝去點擊用戶會點擊的地方，跳轉(zhuǎn)到下一個頁面，然后對著相機(jī)描述正在發(fā)生什么。第一個視頻我花了很長的時間去錄制，并且通過實踐的方式克服了我的怯場，不久之后，我錄制視頻的速度要比寫郵件快得多了。