用戶體驗草圖設(shè)計

時間：2023-09-28 09:30:02 | 來源：網(wǎng)站運營

時間：2023-09-28 09:30:02 來源：網(wǎng)站運營

用戶體驗草圖設(shè)計：前言： 設(shè)計思維可以幫助我們創(chuàng)造出完美的用戶體驗，而草圖則可以讓我們開始像設(shè)計師一樣思考，此書則一步步教您怎樣將自己的idea落實到草圖上，從而實現(xiàn)真正的設(shè)計。此篇文章將為你的草圖為你的設(shè)計為更好的用戶體驗為更好的生活提供強有力的實戰(zhàn)工具，請仔細閱讀，哈哈~

為什么要設(shè)計草圖——

《用戶體驗草圖設(shè)計——正確地設(shè)計，設(shè)計得正確》概要

在介紹為什么要設(shè)計草圖之前，首先給大家解釋一下，草圖、設(shè)計、繪畫三者之間的區(qū)別：




草圖和繪畫其實沒有任何的關(guān)系，一個不懂得繪畫的人，同樣可以運用草圖來表達自己的想法，并與他人進行溝通表達自己的想法。

首先它是一種可以幫助設(shè)計師表達、發(fā)展及溝通設(shè)計想法的基礎(chǔ)工具，對于想法的產(chǎn)生、設(shè)計的發(fā)展，到設(shè)計的選擇，直到最終被開發(fā)都起到非常關(guān)鍵的作用。

同時草圖運用的日常設(shè)計中時，可以使我們構(gòu)思出更為開放更具有創(chuàng)造力的想法，產(chǎn)生大量想法之后不用顧忌想法的質(zhì)量（成本很低），通過快速記錄想法來創(chuàng)作探索概念，與他人討論評估分享獲取新的靈感，最重要的是可以讓你在設(shè)計中獲得樂趣。

正確地設(shè)計

正確地設(shè)計往往是從單一想法開始，通過持續(xù)發(fā)展，改進迭代，最后變成一個最優(yōu)的想法（如下圖）

但是，

這樣往往就會存在一個不容忽視的問題：最優(yōu)的設(shè)計往往就會被最初的想法所限制，如果最初的想法本身就存在問題，那么最后的設(shè)計何談最優(yōu)。這樣就需要我們從多個角度，多個想法同時展開設(shè)計，也就是“局部爬山算法”（如下圖），局部最大值可能比整體最大值小的多，這樣我們就會得到相對比較好的想法。

設(shè)計得正確

要設(shè)計正確的草圖需要考慮多種不同的想法，從中進行選擇：




上圖很好的介紹了這一過程：由最初通過各種方式來發(fā)散想法，到思考篩選對想法進行收斂，到最后多個方案同時展開設(shè)計。當(dāng)然這期間會隨時有新想法的產(chǎn)生加入，從而選擇一個或多個值得深入的想法進行再次展開設(shè)計，進行多次迭代從而達到最優(yōu)的設(shè)計。

這其中會涉及到一個“收斂設(shè)計漏斗”。收斂設(shè)計漏斗每個階段都是一個迭代的過程，需要不斷產(chǎn)生并減少想法直到最終方案的確定。其想法探索與發(fā)展的顆粒度會越來越細，考慮的越來越全面。

方法如下：

• 闡明你的設(shè)計挑戰(zhàn)。
• 針對這個挑戰(zhàn)，對此系統(tǒng)拓展出10個以上不同的設(shè)計概念。
• 減少設(shè)計概念的數(shù)量。
• 選擇最優(yōu)希望的設(shè)計概念，作為起始點。
• 對某設(shè)計概念創(chuàng)造出10個細節(jié)或衍生變化。
• 將你最好的想法向一組人陳述。
• 當(dāng)你的想法改變的時候，將它們畫出來。

“發(fā)散收斂”圖中，“產(chǎn)生想法”為發(fā)散設(shè)計（產(chǎn)生方案，可能形成最好的idea），“思考篩選——展開設(shè)計”則為收斂設(shè)計（選擇值得深入的一個或多個方案想法，進行展開設(shè)計）。

如何設(shè)計草圖

收集想法

盡管大部分人認為草圖是一種創(chuàng)建新想法的方法，然而草圖的很大一部分其實是關(guān)于快速收集現(xiàn)有想法。從我們周圍世界中進行取材是有巨大價值的。當(dāng)你從他人處獲得想法時，你可以使用那些想法作為起始點，來激發(fā)你產(chǎn)生不同的方向，進行頭腦風(fēng)暴，將現(xiàn)有想法發(fā)展為新想法，或?qū)Υ罅肯敕ㄟM行融合。你不必一個人做這件事情，有一些方法來記錄這些獲取的想法，使你可以與同事們進行分享和討論。

1、涂鴉式草圖

快速畫出想法——任何地點，任何時間——抓取想法的精髓，其是一種快速表達想法，和他人探討交流的一種“手段”。

那么在畫涂鴉式草圖時，我們應(yīng)該注意以下幾點;

①包含哪些細節(jié)：包含的細節(jié)要突出主要概念，如何快速繪制某網(wǎng)頁的草圖時，那么主要概念為界面的結(jié)構(gòu)、一定形式的幾個關(guān)鍵按鈕和域；

②哪些進行抽象表現(xiàn)：次要的部分可以以某種方式弱化

③什么可以忽略：不重要的細節(jié)

涂鴉式草圖具有以下幾個特點：

• 非常快速畫出來的
• 一種在匆忙的時候快速抓取想法的方法
• 需要犧牲細節(jié)和高保證來換取速度
• 用過練習(xí)不用看也能畫出來

2、相機取材

開始取材最簡單的方法就是拍下你所討厭的，抓取啟示性的瞬間。

3、收集

收集一些圖片或者簡報等等，無論是好是壞都會有其作用。

4、分享

分享自己的收藏物，促進批次之間的交流，產(chǎn)生想法的碰撞與沖擊，從而激發(fā)出更好的想法。

視覺化敘述

想象一個人與系統(tǒng)一段時間內(nèi)的交互行為時交互設(shè)計的特別之處。故事板用一系列獨立的圖像來捕捉這些時間的元素，這些圖片一屏接著一屏地描述發(fā)生什么。

在介紹之前，先簡單說下故事的重要性：

• 可視化程度更高，更容易理解
• 對用戶來說印象更深刻
• 具有同理心和參與感：故事容易吸引注意力，當(dāng)人們聽到好故事時也容易反響激烈，我們的好奇心會使我們代入角色，而這會讓我們感覺有意義，從而更多得參與

從而衍生出故事板在交互設(shè)計中的應(yīng)用：

• 以人為中心的設(shè)計方法：站在用戶立場去審視設(shè)計，更了解使用場景
• “批判”技巧：故事板是團隊全員參與，每個人隨時都可以對每個場景進行“批改”
• 迭代法：有任何新的想法，都可以隨時加入故事板，因為故事板本身制作簡單、快速、成本低

那么，我們?nèi)绾螌⒉輬D轉(zhuǎn)化為故事板，如何創(chuàng)建故事板呢？

首先故事板要包含角色、場景、情節(jié)三方面主要因素。首先說下角色，即涉及你故事的具體角色。他們的行為、外表和期望，以及他們在操作過程總做出的任何決定都是非常重要的。其次是場景，即用戶的使用場景。最后是情節(jié)，創(chuàng)建一個故事構(gòu)架，確定故事的主線劇情，通常會包含起因，經(jīng)過和結(jié)果，即用戶目標(biāo)、觸發(fā)事件、行為流程、行為結(jié)果等，并圍繞用戶的目標(biāo)進行展開。除了以上三方面基本因素，還要考慮到故事板本身的真實（主要是讓角色、他們的目標(biāo)、以及他們的體驗盡可能清晰地呈現(xiàn)，用戶會感同身受）、簡單（跟主要目標(biāo)無關(guān)的都是耍流氓）和具有情感（用過角色的經(jīng)歷來傳遞情感）。

視覺化敘述包含順序故事板、狀態(tài)轉(zhuǎn)變圖、分支故事板、敘述性故事板。

• 順序故事板：說明的是一段時間內(nèi)的交互順序

• 狀態(tài)轉(zhuǎn)變圖：確定故事板之間的關(guān)系，通過故事板展現(xiàn)出交互狀態(tài)、交互所引發(fā)的轉(zhuǎn)變，以及多決策路徑

• 分支故事板：一段時間內(nèi)所發(fā)生的交互決策

• 敘述性故事板：一段時間內(nèi)關(guān)于使用情景的故事，包含物理環(huán)境、人的行為、一段時間發(fā)生的事情。它們展現(xiàn)出了所發(fā)生的事，因此需要補充界面故事板來突出界面上發(fā)生了什么，抓取每個活動所需要表現(xiàn)的細節(jié)，使用箭頭來說明運動的方向，添加注釋以突出發(fā)生了什么，并在每一草圖下面加上簡短的說明語句。

用戶體驗活靈活現(xiàn)

當(dāng)故事板中的每幅草圖之間已經(jīng)有了良好的起承轉(zhuǎn)合，那么你就可以將這些故事板升級成為一個可互動的視頻。這些視頻可以通過回放這些故事，展示故事的分支劇情來進行可視化的敘述。

邀請他人參與草圖設(shè)計

心智模型

一個人對某事物運作方式的思維過程，即一個人對周遭世界的理解。——Susan Carey

通俗的來說，就是得知用戶看到草圖時，是如何通過其表面呈現(xiàn)的視覺元素來解決它（或者不理解）

在設(shè)計一款產(chǎn)品時，首先要對用戶的心智模型有一定的了解和認知，產(chǎn)品的使用方式要契合用戶的心智模型。比如微信的紅包，形態(tài)“紅色長方形、上面有黃色的封口”并且可以在屏幕上展示出來。人們看到都懂這是紅包，習(xí)慣性地要去點擊。

而微信紅包的功能也的確滿足了用戶的心理需求和使用方式：一是它符合用戶操作習(xí)慣，收紅包的過程是發(fā)--接--拆；二是保障了用戶的控制權(quán)，紅包拆還是不拆用戶都有自主選擇的決定權(quán)。好奇心、期待感、驚喜、趣味等人類基本的情感要素就都體現(xiàn)在打開紅包那一刻。

產(chǎn)品界面設(shè)計同樣也要符合用戶的心智模型，這樣用戶才能快速了解每個界面按鈕圖標(biāo)等的含義所在，快速上手。

一款好的產(chǎn)品是最大程度上滿足用戶的需求，并且好的用戶體驗。那么我們?nèi)绾翁剿鹘鉀Q用戶的需求并將其轉(zhuǎn)化成產(chǎn)品分案，并且具有良好的用戶體驗。首先在“用戶為中心的設(shè)計”理念下，通過對用戶的心智模型的研究理解產(chǎn)品的用戶，從而設(shè)計出更適合用戶的產(chǎn)品。在探索用戶心智模型時，會無形之中提升產(chǎn)品的創(chuàng)新度和用戶體驗，研究和精通了產(chǎn)品所面向的用戶群體的心智模型，就更容易讓產(chǎn)品交互、可視化效果體驗等與用戶產(chǎn)生情感上的互動和共鳴。即最終成就的是優(yōu)秀的情感化設(shè)計，也是一個好的產(chǎn)品。

綠野仙蹤

名稱起源：1939年同名電影，男主角出場周邊總圍著煙霧和火焰，并伴隨著劇烈的聲響。托托推翻屏風(fēng)之后，發(fā)現(xiàn)魔法師是個“騙子”，他只不過是能夠控制舞臺效果和音效的普通人而已。







綠野仙蹤就是草圖在人的操縱下對用戶的操作進行反饋。你自己扮演系統(tǒng)后臺，接受并分析用戶的操作行為，接著像魔法師一樣人為的做出相應(yīng)的系統(tǒng)反饋。反饋的過程中要盡可能逼真。

發(fā)聲思考

揭露的是用戶在使用草圖原型時的真實感受與想法?；ㄙM很少的時間，卻能帶來豐富的可用性信息。

草圖板

將草圖貼到公告欄上與同事分享，對同事講解的過程，其實就是對草圖原型邏輯等的再次梳理，對草圖的組織和歸類，最終將收獲更多新的視角。

審查

把草圖呈現(xiàn)出來，獲取他人的反饋，是設(shè)計中比較重要的一環(huán)。