設計應由黑白做起的 4 大原因👀

Stacey Shih
創,世界
Published in
4 min readOct 10, 2020
此文翻譯自 Anand Satyan 的文章 “4 Reasons Why You Should Design Without Color First”,已獲作者同意進行翻譯,歡迎大家點入原文閱讀&拍手🌟

使用黑白、灰階進行介面設計,可以促使我們專注於使用者體驗、更仔細地思考並安排元件的優先順序,同時帶來更好的討論品質、增加設計的一致性。

1. 專注在版面和間距

當你開始在黑白色彩的限制下進行設計時,你會花大部分的時間思考如何安排元件讓他們得以在視覺上組成群組。並且開始思考相對無形但重要的面向,像是:「易讀性 (Readability)」如行高、字型和段落等等,以及「專注的中心」如行動呼籲按鈕 (call to action buttons) 的尺寸大小,以及「易掃讀性 (Scannability) 」如元件的群組和間距等。

Musety App by Muse

2. 利害關係人會問更好的問題

好的設計需要時間淬煉。在設計的早期階段,多數設計師會羞於(不願意)將未完整的作品呈現在利害關係人(註1) 或 使用者 面前,以即時獲取他們的回饋。然而,「蒐集利害關係人的早期回饋」真是再重要不過了,它可以幫助你避免走冤枉路。大部分的利害關係人並不真的清楚他們想要什麼,或是拙於給予建設性的回饋。透過提供他們比紙筆的草稿更擬真一點的早期設計版本,將讓他們更了解設計的流程,並提出更有建設性的提問。

你可能得到這樣的疑問:「這個按鈕用什麼顏色比較有效?」而不是「你為什麼在這個按鈕上選擇用黃色?」,而『好的問句可以引發更好的討論方向。』

3. 讓設計更加簡潔

創造一個簡潔的設計,並不是件容易的事。當你使用黑白灰階進行設計時,可以更專注在易用性 (usability)、物件間距、尺寸,以及元件佈局、操作互動和流程上。第一個版本的設計圖,應盡量只使用黑與白的色塊,以彰顯元件之間的階層關係和視覺重量的分配。

4. 建立一致性

設計稿中,最好使用少於三個顏色。使用過多的顏色,可能會造成風格的混淆,或是誤將使用者引導到相對不重要的區域。

若有主要的品牌色,可以有意識地將它增加到黑白設計稿上,使用者的眼睛將會自然地被吸引到「有顏色」的區域,達到引導的作用,同時也能讓設計風格更一致。

UXPin Design Systems Tool

因此當你下次打開 Sketch, Illustrator 或是任何你偏好用來做設計的工具時,不妨嘗試暫時不考慮顏色的元素,先完整一個黑白灰階的設計版本。再於其上進行優化。

譯註

(1)為了讓這篇翻譯可以更適用於各種情境,我用「利害關係人」(Stakeholders)取代「客戶」(Clients)

翻譯心得&討論

因為工作的關係,覺得「如何用更易理解的方式翻譯文案」其實是很有趣的課題。加上自己也在許多心嚮往之的設計師所寫的翻譯文中受惠許多,於是萌生了嘗試翻譯好文章給大家讀讀的念頭💡

在去年第一次看到這篇文章時,除了覺得很有同感之外,也嘗試調整了自己的工作模式,受益良多。這次為了翻譯再仔細地重新閱讀時,發現本文其實主要在傳遞一個減法的概念:

為了幫助團隊溝通和專注在重點討論上,設計流程中可以嘗試抽離一些暫時不那麼重要的元素。

實際操作上,個人覺得仍應依照當下的設計訴求,並觀察「利害關係人的最佳理解程度」,進行彈性調整。原文下方留言區也有很多討論,值得一讀!

舉例來說,當你做的設計是以色彩為主題或作為優先考量時,可能就不是那麼適用由黑白開始的設計方式。但即使不使用黑白設計,也可以用黑白方式檢視自己的設計稿,幫助檢查對比、排版等在彩色時不易發現的問題。

再者,因為螢幕色差、各種濾藍光眼鏡(?)還有先天上的限制,其實每個人看到的顏色通常都是不一樣的。用黑白濾鏡檢視設計稿,可以同時檢測設計的通用性&友善性。

最後要特別感謝原作者 Anand Satyan ,二話不說就答應了翻譯的請求,還特別提到了他對台灣的喜歡,非常 nice !大家可以到原文拍手或是關注他!

第一次寫設計翻譯,為了更好地傳遞內容,有稍稍添加了一些自己的理解在裡面,非常需要大家的各種指教 🙇如果喜歡這篇文章的話可以幫忙拍個手 👏 或是有想討論的也歡迎在下方留言喔!

--

--