專業人士的設計流程
03

製作線稿

前言

您將在此章節中學習到:

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

相關成員

  • 設計師
  • 客戶
  • 開發人員

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

線稿流程對客戶的益處:

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

線稿流程對團隊的益處:

  • 有助於專案團隊了解可能沒有考慮到的新需求與問題。
  • 在設計師提供網頁或 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
  • 通過專注於線稿的視覺形式,不要忘記功能的重要性。
  • 別過度追求完美像素,不要花太多時間在後期容易改變的事情上。

客戶可能會提的問題

Q
你能夠解釋線稿和視覺設計的差別嗎?
A
線稿是快速地以視覺建立產品基礎架構的方式。在此階段,我們一起定義產品/功能是如何運行,也可以幫助我們避免發生 UX 問題;也可以在提供最終設計前,向開發人員展示網站/程式應該如何運作。視覺設計也是設計流程的一環,在線稿之後。在視覺設計階段,我們專注在視覺圖片的產出,還有根據線稿的產品風格。總結來說,我們使用線稿想出產品的基礎架構;接著以視覺設計規劃產品的長相。我們利用兩者打造更適合於使用者需求的產品。
Q
線稿就只是靜態圖片嗎?讓它們可以進行測試吧!
A
你在說的應該是產品原型 (prototype),這是在非常早期就可以簡單點按的玩意,用來測試互動、情境與故事。產品原型 (或是可以點按的 Mockup) 是研究使用者行為和產品功能的工具。
Q
我會從中獲得什麼好處呢?
A
線稿通常有助於發現團隊從未考慮過的新需求和問題。線稿通常會演變成系統的需求。在這個階段,我們還可以檢視產品是否滿足所有使用者需求。經由製作線稿,你將會獲得更貼近目標客戶群的產品。

在本階段問問自己:

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

本階段的理想成果

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

延伸閱讀

本章節譯者

Ming ChouMoney ChienSusan Lin、Felly Wu