譯文 | 如何開始你的第一個線框圖

摘要： 本文中，invision團隊將手把手教你如何設計線框圖，以及線框在產品設計過程中的位置，enjoy~ 無論你是使用者體驗設計的新手，還是你已經關注這個領域多年，你肯定知道線框圖。線框圖是將數字產品的想法轉化為現實的關鍵一步。 但線框在產品設計過程中的位置如何呢？如果你以前從來...

本文中，invision團隊將手把手教你如何設計線框圖，以及線框在產品設計過程中的位置，enjoy~

無論你是使用者體驗設計的新手，還是你已經關注這個領域多年，你肯定知道線框圖。線框圖是將數字產品的想法轉化為現實的關鍵一步。

但線框在產品設計過程中的位置如何呢？如果你以前從來沒有做過，你怎麼知道該做什麼？從哪裡做？該採取什麼步驟呢？草圖和線框有什麼區別？

幸運的是：invision 的團隊對這一過程進行了深入的介紹，我們希望與您分享我們的經驗。所以拿起一支筆和一張紙 (不僅僅是做筆記哦！)，一起來進行頭腦風暴吧。

一、開始我們的線框圖

首先，線框是一種低保真佈局設計，服務於三個簡單的但明確的目的：

1. 它顯示將顯示在頁面上的資訊
2. 它給出了頁面的結構和佈局
3. 它傳達了使用者介面的總體方向

就像建築的藍圖一樣，線框圖清楚而具體地描述了細節，同時給建造者(你本人，其他設計師，開發同學等等)一個專案的概述。

線框圖是筆紙的草圖和你的第一個原型之間的中間地帶。它們可以幫助您規劃使用者介面的佈局和互動模式，而不會分散使用者的注意力，比如顏色等。建議應該是清晰的，不需要顏色、陰影或花哨的選單。

我最喜歡的檢視線框圖的方法之一是使用線框圖 ofollow,noindex">Wirify 。尤其是當你剛剛起步的時候，可以讓你在一次點選中把任何網頁變成線框圖，這對獲得靈感或指導很有幫助。

線框是快速且高效的, 不過最重要的是, 它不是最終的輸出。線框 (以及您線上框之前繪製的草圖) 目的是在隨著你通過使用者研究或利益相關者的收集更多資訊而方便隨時作出調整。

線框是設計師、使用者、利益相關者和開發人員之間的通用語言。它們足夠複雜，可以讓每個人參與進來，但很簡單，不會被太多細節或設計語言所困擾。

二、不必包括線上框圖中的內容

一個好的線框的關鍵是簡單。

您需要做的就是展示元素在頁面上的佈局方式以及網站導航應該如何工作，以後可以新增花哨的影象和華麗的字型，從而最大限度地減少干擾。

請記住以下準則：

1. 保持你的顏色灰度：白色、黑色和灰色之間。
2. 最多使用兩種通用字型：可能是一種 serif 和一種 sans serif。通過字型顯示資訊的層次結構仍然可以通過更改字型的大小以及字型是否具有樣式 (粗體、斜體等) 來顯示。
3. 避免華麗的圖形和圖片：相反, 可以使用簡單的矩形和正方形作為佔位符, 並在框的中間顯示影象的放置位置, 其中包含 “x”， 比如可以通過使用三角形作為播放功能的按鈕。

二、從線框轉向成品

從草圖開始並向前邁進, 在產品設計過程的從頭到尾通常有許多步驟。

讓我們來看看你可能會遇到的幾個關鍵詞：

1. 我們已經討論過線框了它們是數字產品的 骨架 ：它們讓您對佈局和結構有了大致的瞭解。除了設計的骨架外，內容和副本是產品的肌肉。目標是在這個過程的早期就有內容。洛雷姆·伊普蘇姆永遠不會公正地對待你的設計。推特徽標將實際內容放在適當的位置是很有幫助的，以確保一切都按照您想要的方式流動。
2. 該過程的下一步是視覺稿 原型（mockup） ：這個原型是您的產品更直觀的視覺表現形式。想象一下像面板或面部特徵一樣的模型，在這個部分, 你通過多種嘗試來確定你的視覺風格，並賦予產品一些品牌個性。
3. 在將您的設計交給開發人員之前的最後一步是可互動的 原型（Prototype） ：製作一個原型就像給你的模型穿上衣服, 讓它適合公眾。這不是最終版本，但也是可以向別人作展示的。這一點，你需要做的就是在你把你的模型送到生產之前做一些小的調整。

記住，線框圖只是原型的第一步或第二步。

因為原型應該是你產品的最實用的草稿，線框圖可以幫助你關注內容，併為功能原型設定方向。

三、在設計過程中如何使用線框圖

不同的使用者體驗設計師以不同的方式進行線框圖設計。

有些人喜歡從手繪草圖開始，而另一些人則喜歡使用更傾向於技術的應用程式或工具。

通常情況下：手工或在計算機上進行線框圖的決定，以及從草圖到線框圖到程式碼的過程，更多地與特定情況需要的方法有關，而不是設計師的偏好。

羅西·阿拉巴頓在CareerFoundry的一個帖子中建議，你應該問自己這些問題才能開始：

1. 與此頁面互動時，目標使用者和業務目標是什麼?
2. 究竟如何組織內容來支援這些目標？
3. 您的主要資訊和logo應該放在哪裡？
4. 當用戶到達頁面時, 應該首先看到什麼？
5. 行為召喚在哪裡？
6. 使用者希望在頁面的某些區域看到什麼？

您的線框應該是網站框架以及如何導航的視覺化指南。

在現階段，外表和視覺吸引力並不是關鍵，你對線框的主要關注應該是以直觀和自然的方式呈現你的內容。

您的任務是讓你的使用者更容易實現他們的目標(或者讓他們達到你的轉換點或響應你的行動號召)，通過以這種方式呈現你的資訊，使產品的業務目標與使用者的需求保持一致。

通過畫看似簡單的顯現框框，很酷！不是嗎?

我們非常喜歡用徒手畫線框圖。手繪是一種工具，它可以幫助你完成從線框圖到創造性探索，展示到協作。試一試，讓大家知道你的想法吧！

作者：Will Fanguy

原文連結：https://www.invisionapp.com/inside-design/how-to-wireframe/

本文由 @天涯書生 翻譯釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議。