專業人士的設計流程

製作線稿

前言

您將在此章節中學習到：

了解線稿的定義以及在執行製作上客戶需要知道的事項。
線稿流程包含哪些範疇。
最佳做法：製作線稿所需要與該避免的事項。

相關成員

設計師
客戶
開發人員

身為設計師，絕不能跳過線稿階段。線稿階段是銜接前期研究與設計視覺化的橋樑，我們可以透過線稿在專案早期開發階段反覆快速地進行測試修正。這不只是因為它能幫我們節省大量時間，也能避免浪費時間在永無止境的調整上，同時確保我們的流程更加穩固。讓我們的願景更明確、更具邏輯性。根據線稿的成果，最終設計對客戶而言也會更加務實與具有價值助益。此階段的產出通常是一組使用者流程和線稿。

線稿流程對客戶的益處：

可以更快速產製原型。
可以儘早測試客戶的想法。
可以及早除錯與解決問題。
客戶將會更了解他們的產品、使用者的行為模式與需求。

線稿流程對團隊的益處：

有助於專案團隊了解可能沒有考慮到的新需求與問題。
在設計師提供網頁或 App 完稿介面前，開發人員就知道如何進行開發。
在進入設計階段前，有機會收集回饋，並測試產品如何運作。

什麼是線稿？

線稿是一種基本視覺介面規範，描繪介面的架構，還有頁面之間的關聯性。線稿是被用來定義專案的架構、內容與功能的藍圖。在任何設計視覺化工作開始前先創建線稿，就可以更專注在資訊架構上，不受色彩或視覺因素影響。

製作線稿的階段要做什麼事情？

製作線稿的流程可分為兩個子階段：

使用者流程圖

使用者流程圖，也稱為流程圖 (flowchart)，是以視覺呈現產品設計裡所有規劃的使用者旅程。用來說明使用者會碰到的步驟、決策及漏斗 (funnel)。考量周全、成熟的使用者流程圖讓你發覺使用者轉換的關鍵時機，適當地應用在已找到的阻礙上。可以參考使用者流程示意圖的範例，或流程圖點此觀看。

單頁畫面線稿

單頁畫面的線稿 (也稱為示意圖或藍圖)，是頁面架構、構圖和資訊階層的視覺指南。目的是能夠以充分表達、使用者友善和商業效益的方式來排列網站內容和元素。由於線稿要專注在不受華麗的視覺效果影響，因此要拿掉所有視覺元素，如顏色、圖表、效果…等，可以看一下單頁畫面線稿的範例。

在線稿中該納入哪些元素？

元素清單

線稿應包含產品所有重要的元素：

導覽
公司識別標示 (如果有的話)
內容文字區塊＋範例文字 (佔位符文本，placeholder text)
行動呼籲 (calls to action)
小工具
區塊
表單
彈出對話框
滑入狀態 (如果有用到的話)

該使用什麼樣的軟體來設計線稿？

在 Netguru 我們所使用的工具：

用 Sketch 製作線稿。
用 InVision 產製簡便原型。

製作線稿的最佳做法

必需與避免

線稿的主要目的是直觀地展現想法，還有促進溝通、反覆修正及快速構思。以下列出我們在 Netguru 深深相信的最佳實踐做法：

1. 色彩可能分散注意力，確保設計專注於創造體驗，而非以視覺設計取向為解決方案。

DOs

以低飽和度的色調製作線稿。
只有在有助於定義設計背後的理念時才使用顏色；也要盡可能地限制自己使用的色彩 (即便只有使用色彩才能助於定義設計的理念)。

DON'Ts

除非有確切的用途，否則不要在線稿設計中使用色彩。
不要使用太多淺灰色；是可以使用淺灰色，不過，專注在一種就好。

2. 保持一致：呈現解決方案的最佳方式是在將線稿的設計保持一致

DOs

在 UI 元素中的視覺展現保持一致。理想情況下，通過可重複使用的元件來呈現例如：Sketch 的元件功能 (英)。
請注意字型大小及間距。
開始將想法數位化之前，先簡單地畫下來：這可以在早期的反覆修正中節省許多時間。

DON'Ts

避免在相似元素中使用不同粗細的線條。
避免使用過多的字型及字型大小。

3. 使用真實內容：寫作是一項設計技能，可以幫助你更佳理解客戶及故事。

DOs

如果沒有真實內容：就根據自己研究的競品內容。
使用純灰色佔位符元素來表示圖片、影片和地圖。
以現實案例設計 (也就是說，不要假設每個姓氏的字元都是最大值，例如：10 個字符長。)

DON'Ts

不要在關鍵設計元素中使用佔位符文本，例如導航欄或行動呼籲 (例如：Lorem Ipsum…。)
如果要顯示一系列的資料，如表格或磚塊式排列 (tile)，每個元素不要使用相同的文案。

4. 不要把線稿只拿來自己使用。這個過程的主要目的是以溝通帶來潛在可能，並且比你獨自工作時，更有機會發現更好的解決方案。

DOs

對新的想法保持開放的態度。
向客戶展示線稿之前，請從你的專案團隊中獲取意見：他們了解產品且了解客戶。
對解決方案抱持著第二個想法 (在 Netguru，我們有專門的 Slack 頻道)。

DON'Ts

避免只把線稿用在向客戶展示整個產品的最終成果。相反地，要合作並交流。

5. 設定明確的期望：確保客戶理解此步驟背後的原則。

DOs

在開始設計之前，就告訴客戶理想中的成果。
儘早、經常、清晰地溝通。
最好在第一次展示線稿時，與客戶進行即時溝通/會議/通話，這樣才有機會回答所有問題並避免誤解。

DON'Ts

不要假設客戶知道如何使用協作工具或知道線稿不是最終設計：一定要告知。
避免留下沒有解釋的複雜設計流程。

6. 使用適合的工具完成工作。在 Netguru，我們大多在 Sketch 製作線稿 (它有彈性、易用、毋需在其他 app 中重做版面)，但請記住，不要被特定的工具限制住。

DOs

任何適合你的工具皆可；舉例來說，素描與白板。

DON'Ts

別讓軟體成為阻礙。

7. 你的設計不是你的設計

DOs

準備好經常改變，並擁抱快速發想。

DON'Ts

別太執著於你的線稿，但同時也記住要捍衛值得捍衛的想法。

8. 要精挑細選，也要保持簡單。

DOs

一開始就選擇最好的想法，避免肯定無法執行的。

DON'Ts

不要過度使用線稿。在想著設計的最後階段時，嘗試只做必要的部份。

9. 掌控對話。

DOs

驗證線稿的方法是掌控對話：如果離題，請將對話拉回到你想要的。

DON'Ts

不要害怕禮貌性地打斷，並提出有意義的開放性問題。

10. 考量到最終設計的線稿。

DOs

只要在製作線稿時有考量到最終設計，可省去大量的工作：可重複使用的符號，精確的元素，合適的字型。
與開發人員討論設計解決方案的技術效能。

DON'Ts

通過專注於線稿的視覺形式，不要忘記功能的重要性。
別過度追求完美像素，不要花太多時間在後期容易改變的事情上。

客戶可能會提的問題

你能夠解釋線稿和視覺設計的差別嗎？

線稿是快速地以視覺建立產品基礎架構的方式。在此階段，我們一起定義產品/功能是如何運行，也可以幫助我們避免發生 UX 問題；也可以在提供最終設計前，向開發人員展示網站/程式應該如何運作。視覺設計也是設計流程的一環，在線稿之後。在視覺設計階段，我們專注在視覺圖片的產出，還有根據線稿的產品風格。總結來說，我們使用線稿想出產品的基礎架構；接著以視覺設計規劃產品的長相。我們利用兩者打造更適合於使用者需求的產品。

線稿就只是靜態圖片嗎？讓它們可以進行測試吧！

你在說的應該是產品原型 (prototype)，這是在非常早期就可以簡單點按的玩意，用來測試互動、情境與故事。產品原型 (或是可以點按的 Mockup) 是研究使用者行為和產品功能的工具。

我會從中獲得什麼好處呢？

線稿通常有助於發現團隊從未考慮過的新需求和問題。線稿通常會演變成系統的需求。在這個階段，我們還可以檢視產品是否滿足所有使用者需求。經由製作線稿，你將會獲得更貼近目標客戶群的產品。

在本階段問問自己：

使用者流程是否完整？
InVision 上是否有線稿可用？
線稿是否可點擊？
線稿是否遵循我們的最佳做法？ – 使用真實內容 – 專注於資訊架構 – 線稿已準備好在視覺設計階段重複使用
蒐集過回饋意見了嗎？

本階段的理想成果

可點擊的低或高保真度 (fidelity) 線稿 (最好是高保真度線稿)
使用者流程 (user flows) 涵蓋所以必須完成的工作和使用者故事 (user stories)
加上真實內容
為線稿設計測試情境 (scenario)
線稿已經由客戶測試過，並且同意：就準備進入視覺設計階段

製作線稿

前言

線稿流程對客戶的益處：

線稿流程對團隊的益處：

什麼是線稿？

製作線稿的階段要做什麼事情？

使用者流程圖

單頁畫面線稿

在線稿中該納入哪些元素？

元素清單

該使用什麼樣的軟體來設計線稿？

製作線稿的最佳做法

必需與避免

客戶可能會提的問題

在本階段問問自己：

本階段的理想成果

延伸閱讀

本章節譯者