盡信工具,還不如沒有工具
盡信工具,還不如沒有工具-移動閱讀二維碼

在產品設計的過程中,好的工具能提高我們的效率。但與此同時,工具因其自身的局限性也會引發一些問題。在今天的譯文中,作者 Luke 分析了這些問題,然后給出了解決方案,并鼓勵設計師要相信自己的眼睛和直覺。下面進入譯文。

當我還是個設計新手的時候,我依靠 Photoshop 或者 CSS 來判斷一個設計是對還是錯。舉幾個例子,假如兩個圖形通過 PS 的「對齊」功能校準了,那我就認為他們是對齊的。假如兩個不同的形狀是同樣的尺寸,那我就認為他們是一樣大的。假如兩個顏色是同一個十六進制色值(譯注:即 HEX,例如白色的十六進制色值為 #FFFFFF),那我就認為他們「看起來」是一樣的。

上面的說法看似合乎邏輯,卻是錯誤的工作方式。

因為這些軟件的計算結果雖然「合理」,但它們并沒有像人類那樣去感知形狀、顏色和尺寸。換句話說,這些軟件無法像人類那樣,通過一個參照物,去感知另一個物體,并理解兩個相互關聯的物體間的環境。

所以,設計師需要不同于計算機的「非理性」的頭腦去決定一個設計看起來是對還是錯,因為只有我們才能理解設計中的前后關聯,而電腦做不到這點——搞清楚這個問題的設計師才可謂是優秀的設計師。

通常,經過深思熟慮的設計并不會引起用戶太大的注意,但明顯錯誤的設計絕逼會引起用戶的抱怨。讓我們來看一系列常見的例子。

對齊與視覺重量

計算機無法精準地計算出一個物體的中心在哪個位置,它只能夠通過一些信息來做判斷,例如寬、高,或者 x/y 坐標位置。作為設計師,我們需要通過我們的眼睛來輔助校準這個中心位置。

標準的播放圖標里的三角形是居中對齊的嗎?并不是。畫一個輔助的矩形就知道了——這個三角形偏離了中心線。

左側這個標準的播放按鈕里的三角形,若畫上一個輔助矩形后,可以看見它并不是完全居中的。

左側這個標準的播放按鈕里的三角形,若畫上一個輔助矩形后,可以看見它并不是完全居中的。

上圖右側這組完美居中的播放按鈕,三角形看起來卻是偏左的,而且偏得挺明顯的,這是為什么呢?原因在于視覺重量。三角形的大部分質量分布它的左半部分,這造成了它偏左的假象。

為了解決這個問題,我們必須手動校準三角形的位置,直到它「看起來」是居中的。

顏色

通過眼睛調整顏色則更加微妙。這也與物體的「重量」有關——即這個顏色出現的面積有多大。

簡而言之,同一個綠色被用來填充圖標和文字時,文字的綠色有可能看起來就要比圖標顯得更淺一些。

左側的圖標和文字組合使用的同一個 HEX 色值,右側的組合則使用了兩種不同的色值。

左側的圖標和文字組合使用的同一個 HEX 色值,右側的組合則使用了兩種不同的色值。

這很微妙,但你能看出來圖標要比文字的顏色更「重」。為了解決這個問題,不論你是把圖標的顏色調淺,或者把文字調深都可以——我的建議是選擇一個符合 AA 可訪問性指南的顏色即可(譯注:AA 可訪問性指南指的是 W3C 提出的方便有障礙人士訪問網頁的指南)。

我推薦使用 HSB / HSL 色值。它們允許設計師通過調整「L」或者「B」的值來迅速地改變一種顏色的明度。

我推薦使用 HSB / HSL 色值。它們允許設計師通過調整「L」或者「B」的值來迅速地改變一種顏色的明度。

尺寸

尺寸指的是我們的大腦所感知到的物體和文字的大小。假設有這么兩組圖形,一個 120×120 像素的矩形面積比一個 120×120 像素的圓要大。所以圓形必須再大一點才能看起來與矩形相匹配。

左側的兩個圖形都是 120×120 像素,但圓形看起來要小一些。右側的圓形是 126×126 像素,看起來和 120×120 像素的矩形差不多。

左側的兩個圖形都是 120×120 像素,但圓形看起來要小一些。右側的圓形是 126×126 像素,看起來和 120×120 像素的矩形差不多。

與其他的調整相比,它顯得很微小。但這個微小的調整能使得整體設計看起來更好——通過一個像素一個像素的調整,直到感覺對了為止。

譯注:接下來作者介紹了英文字母大小寫放在一起時,如何調整視覺比例的方法??紤]到中文都是方塊字,并不存在類似的問題,參考價值不大,故不作翻譯,有興趣的同學可以去閱讀原文。

……

在進行界面設計時,每增加一處這類細微的設計調整,都會影響網站的整體感覺。這種關注細節的能力將造就偉大的設計。

當這些習慣養成之后,比如減少 2 像素文字,或者輕移三角形 10 個像素等,它將使得你的設計有可能做到真正的像素級完美。

計算機,乃至人工智能目前都無法理解設計中物體間的上下關聯,所以它們不能做出像設計師那樣的校準。在計算機能夠解決這個問題之前,它仍然不能用于做復雜的設計決策。

此外,我們也不應該依靠計算機來思考所有的事情。我們應該信賴自己的眼睛與直覺。設計師在每天的工作中都在磨練自己的直覺,所以我們要信任設計師,哪怕計算機說這是「錯誤的」。


以上譯文僅代表原作者觀點。

本文鏈接:http://www.casaleticia.com/not-the-letter-tool.html
本文標簽: , , , ,