交互設計過程中，如何製作一個優秀的 UI storyboard，有哪些注意事項？

04-08

首先應該明確， Storyboard 是一種設計工具，它的根本目的是激發創意、梳理流程、驗證理念以及溝通傳達。有時候 Storyboard 也承擔了重要的「營銷」作用，對表現手法和美觀程度的要求很高，此處暫不對這方面展開探討。

Storyboard 主要被用在概念設計階段。當設計師經過用戶調研階段，了解用戶當前體驗的痛點以及設計目標後，可以通過 Storyboard 探索與表達用戶與產品的交互如何能夠解決現存問題。

《設計中的思維可視化》(IxD2013_B1_概念設計) 中的四格漫畫法(P46)精準地概括了應該如何組織 Storyboard：

#1創建目標用戶，#2描述問題場景，這兩格來自於之前的調研成果，體現了設計師對設計問題的理解程度，也幫助將設計背景進一步傳達給非設計職能的項目成員。

#3描述交互過程，在實際創建 Storyboard 的過程中，不必拘泥於一格，需要表達核心交互理念。但是切忌糾結技術細節或邏輯分支。#4描述達成目標，將產品給用戶帶來的價值具象化。

這個階段的 Storyboard 可以採取各種各樣的表現形式。漫畫、拼貼都好。記住，你的首要目標是傳達、探索設計方案，而不是展示高超的手繪能力。

——————————————————————————————————————————

有時候，我也在具體交互設計階段使用 Storyboard。我們通常將這種 Storyboard 稱為 Happy Path，體現用戶在理想情況下的典型使用流程。這個階段的 Storyboard 通常做成低保真原型的形式，完整表達用戶完成一個使用路徑時的交互。

Happy Path 中不描述極端情況和異常，盡量減少分支。根據不同的用戶角色和目標，設計不同路徑。

製作與驗證 Happy Path 的過程是一個設計「微交互」的好時機，你會很容易發現用戶在交互過程中面臨的負擔、干擾以及分岔，從而在設計中加入更多細節的考量，使得交互過程更加合理與順暢。

這個問題，以前我老大教過我，我就來板磚吧：

1 有清晰的故事線，說明用戶痛點

2 產品獨有的解決方案是比市場上其他產品有優勢

3 優秀的用戶體驗，有打動人心的那個點

對於UI 中的storyboard而言，設計師應首先明白故事版的具體作用和意義。故事版不僅僅是設計中的一種研究方法，更是用於探討產品的使用流程，及展示給用戶產品的操作步驟的。對於比較優秀的UI故事版而言，不應該只強調他的設計效果。

鏈接：故事板 app_百度圖片搜索

出處：百度

對於app中的故事版而言主要分為interaction design storyboard 和UI storyboard，交互設計的故事版主要是用於設計的過程當中，他可以以人物的場景設計為主主要展現產品的使用流程及使用環境。在設計交互設計故事版的過程中，優秀的故事版最重要的要求的就是能夠要求故事的敘事性要清楚，對於故事版並不一定畫特別特表好看，最重要的是讓讀者能夠明白話的是什麼，能夠讓讀者清楚的知道產品的操作使用流程順序等。

所以在設計的時候設計師往往注重故事版的統一性，首先風格要統一，其次色調統一，再次，產品的界面要表達的比較充分、主題要突出。以上述為例，風格可以相對簡約一些，主體突出之後，對於每個頁面的敘事行為可以進行細緻的描述就更好了。

鏈接：ui 故事板_百度圖片搜索

出處：百度

上述是是故事形式的方式闡述故事版的。對於界面形式故事版，由於APP主要是用於展現產品的使用流程，為了突出產品的功能性，所以在展現的時候可以只展現產品的主要頁面。這個時候的APP界面流程類似於產品的原型圖，但是在這裡要強調產品的功能使用方式，而不是界面效果。

鏈接：app操作說明圖_百度圖片搜索

出處：百度

對於傳統意義的UI故事版，其主要作用是用於給用戶解釋產品的最終效果，以及產品的使用流程。在此，產品的UI 故事版特別像產品的說明書，目的是為了清楚的解釋產品的操作步驟，以及這款APP的主要功能等。

鏈接：The valuable and professional IT business website in Greater China

出處：中關村在線

對於最終的UI故事版的解釋效果可以採用文字標註的形式，也可以採用視頻短片的形式，也可以用作遊戲體驗的方式，對於UI故事版的最終效果都是給人服務的，其最終的目的都是為了讓用戶有一個好的體驗，讓用戶比較方便的懂得產品的操作步驟從而增強產品的體驗感。

以上簡述，望有用

———————————————————

歡迎關注我的個人官方微信（kang-shishi）

http://weixin.qq.com/r/BkRfRzjE_2WErXwk9xEU (二維碼自動識別)

如有藝術留學、院校、專業、作品集方面的問題，可私信康石石諮詢

問題問的不好，storyboard為什麼要加UI這個定語呢？storyboard是產品設計（分析）方法，和UI關係不大。這個東西的核心在於把產品使用場景形象化，從而把你的解決方案形象化。可以參考下面鏈接的文檔：

Storyboard | Service Design Tools

storyboard這個東西如果沒想好那麼就不要做。

我至今沒完整看下去過一個 App 的 storyboard 哪怕他根本沒有跳過。

你不應該跳過應不應該要的問題直接問怎麼做。