線框圖不是設計的起點，文本編輯器才是！

導讀：

作者 Fabricio Teixeira 在文章中提出了「界面即故事，每個設計師都是故事講述者」的觀點，介紹了在繪製線框圖之前，設計師可通過故事框架法（Storyframes）來組織頁面內容，明確核心信息，從而保證最終的方案簡潔易懂、重點突出。

瀏覽一個精心製作的界面就像是閱讀一個精彩的故事。作為設計師，我們為何不把劇本創作的技巧多多融入設計流程中呢？

幾天前，我同團隊中的一名體驗設計師談論起這個自己使用多年的簡單技巧，或許是設計了數不清頁面後的直覺，我從未認為這是一個真正的「技巧」。

之前我醉心於線框圖中 （並且滿屏幕的移動灰色方塊和文本框），甚至會以期望人們看到的精細程度在紙上繪製方案，但在某個時刻，我決定用我後來命名為故事框架（ Storyframes，一種介於劇本/故事和線框圖之間的混合文檔）的方式來開始設計流程。

使用的軟體呢？

文本編輯器而已。

谷歌的Doc，微軟的Word，蘋果的TextEdit。任何一種文本編輯器都可以。

這個技巧尤其適用於登陸頁，主頁以及試圖講述一個統一、連貫故事的長滾動頁面。老實說，這些頁面如今正變得越來越流行。

在使用文本編輯器軟體「寫作」之前，我會問自己一個首要問題：

在會話和郵件中，我會怎樣向朋友介紹自己要表達的這件事/這個主題/這個產品/這個故事呢？

界面即故事

想想那些最佳的產品或服務，以及它們的網站首頁正在講述的故事。正是因為有人巧妙構思、精心設計、完美實現了那個網頁，所以你作為訪問者，才能快速清晰、簡單直接地理解所傳達的信息。

幾乎每一個網頁都在講述一個故事。

• Dropbox的主頁講述了一個Dropbox是什麼，它為何存在以及它是如何適應你生活的故事。
• 《紐約時報》的主頁講述了一個基於《紐約時報》的觀點，今日世界正在發生什麼的故事。
• Airbnb的主頁講述了一個Airbnb是什麼以及它所提供的服務案例的故事。

故事以劇本的形式運行良好。剝離所有的視覺混亂有助於你聚焦需要傳達的核心信息。而文本編輯器正是一個非常不錯的工具：簡潔明了，並且適用於你作為設計師使用的每一台設備——從電腦到平板電腦再到手機。

剝離所有的視覺混亂有助於你聚焦需要傳達的核心信息。

當你從核心信息轉換至自己偏好的設計軟體（Sketch，Photoshop，InDesign，Axure，Principle或其他）時，很有可能你會花費大量的精力去打磨形式而非打磨故事。

即使你熟練使用某個軟體或者創建低保真的線框圖，你仍然將腦力（以及一些額外時間） 消耗在定義形式而不是你要表達的基本觀點上。當你使用設計軟體，甚至在紙上繪製方案時，你尚未100%確定故事的某一部分是否需要在網頁上出現，就開始了設計決策（兩欄還是三欄？）。

界面即故事，每個設計師都是故事講述者——不管你正在設計一個長滾動頁面，還是產品介紹，註冊表單或者聊天機器人的對話。

形式並非總是在故事之後：當然需要理解故事，而且形式有時會先於故事。少數設計師認為通過設計有助於理解故事，雙方相互促進，共生共存。不錯。但本文更偏重我喜歡的開始方式，以及這個多年以來對我適用的技巧。我相信每一個設計師都有不同的方法。

故事框架案例：Dropbox主頁

故事框架看似一個劇本，專註於層級和頁面結構而非布局或最終的文案。這裡是Dropbox主頁以故事框架的形式看起來如何的簡單案例：

故事框架設計：幾行文字就可以幫你在使用設計軟體之前定義網頁的敘述概要n

撰寫頁面故事的最佳方法：

1、始於記錄

說實話，第一步就是把頭腦中的想法快速記錄到空白的文本文件中。把每一段看成一個模塊，每句話作為一個元素，最終把它們添加到你的設計中。通過練習記錄你能想到關於產品的所有想法，有助於你在對要點進行排序之前理清思路。

我會經常反思那個首要問題：在會話和郵件中，我會怎樣向朋友介紹自己要表達的這件事/這個主題/這個產品/這個故事呢？

記錄想法通常花費15分鐘，或者半杯咖啡的時間。

2.保持簡短

一旦你將所有想法聚合到一個文檔後，就該縮短故事長度了。因為你是產品設計團隊的一份子，對其了如指掌，所以刪減故事也就遊刃有餘了。

我沒有時間寫一份簡訊，所以我只好寫了一封長信代替了。——馬克·吐溫

在你回顧文檔並精鍊用戶需要知道哪些要點之前，休息一會並做做深呼吸。思考下他們的情境：他們是如何來到這個頁面的？此時他們對產品了解多少，在採取下一步行動之前至少要知道什麼？

3、嘗試多元

一旦完成初稿，你可以創建多個文檔副本並調整層級結構： 你可以怎樣重新排序元素來講述不同的故事？哪個版本的故事聽起來更自然？在此練習中，你也可以變換特定段落，或重新引入你在步驟2中刪除的內容。

4、展示對比

在創建線框圖之前編寫頁面故事的優點（或者坦誠點，目標）在於，它允許你非常方便的向其他團隊展示，並收集他們的反饋和意見。確保他們理解這並非最終方案，而是不同頁面結構的綜合。

直到那時，你才開始創建線框圖和視覺模型。

最後，無論你和團隊成員決定如何設計每個模塊，整體的頁面故事都不會改變——因為你和利益相關者從一開始就達成了一致。

故事框架：可能的最低保真度

我喜歡故事框架（或「頁面大綱」，或「頁面劇本」）的原因是我可以在一天中節省不少時間。你能夠對戰略、流程以及敘事方式做出高水平的決策，而無需在設計工具上浪費精力。

當整個故事更加完善，又有足夠的利益相關者支持的時候，你就可以自信地邁入下一個階段，並且詢問自己更加具體的設計問題：

• 展示信息的最佳方式是什麼？
• 哪些部分的文本可以組合成模塊？
• 故事的哪些部分可以用圖片、視頻或者簡短的動畫來代替？
• 故事的哪些部分可以用相同的資源來補足？
• 你希望展示哪些具體的證據來支持你的觀點？
• 你希望人們在看完你的頁面故事後採取哪些行動？

原文作者：Fabricio Teixeira

原文地址：Storyframes before wireframes – uxdesign

推薦閱讀：