網路速讀|自動調整與設計師之眼

最近很愛速讀網路文章做心得分享,不過還是奉勸各位設計師不要逃避讀英文呀!讀英文文章可是第一手最潮的資訊呢

這篇基於Luke JonesOptical Adjustment Logic vs. Designers這篇原文做的小介紹與自己的經驗分享,大家有興趣可以看看他其他文章唷!(已取得轉貼授權)
視覺設計師我想是一個崇高也存在感低落的職業,因為目的很單純、工作卻複雜像是工匠般的精雕細琢,追求著比例上的完美,人們看著和諧的畫面時卻常常忘記那條線的位置,是來來回回的調整過幾百次、換過幾次顏色。
台面幾秒鐘、後台幾十分鐘
這篇文章主要的重點在於提點一些軟體無法做到的眉角

從相信軟體到相信眼睛、或是相信你的設計師


電腦終究不是人腦

早期在做設計的時候常常倚賴軟體所告訴我的資訊,如果photoshop告訴我兩個物件對齊了,那就是對齊了,如果他們一樣大就一樣大,如果兩個顏色是同一個數值,那他們應該就是一樣的,雖然這看起來很合理,卻不是一個適當的工作方式。尤其是Sketch居然偶爾在均等分配上有著重大的bug…

雖然軟體的運算是很理性的,他可以精確的算出數值、等比例放大,但他無法接近人們真正觀看到的角度、色彩或是大小,而且軟體並無法理解物件的內容物為何,整體的視覺畫面看起來如何或是人類所看到的是怎麼樣的感覺。

我們必須用我們自己的腦袋來決定這些東西看起來怎麼樣,因為我們能了解其中的內容與意義,花更多時間去調整這些微小的事物能讓人成為更好的設計師。

對齊+視覺重量

電腦沒辦法衡量這個物件到底看起來多重(這裡指的是視覺平衡),他只能根據大小、x/y位置去判斷,身為設計師我們必須補上電腦無法達到的細節,稱為視覺調整
像是他所舉的例子是三角形的對齊,左邊是真正對齊、右邊是電腦自動對齊
 
The left play icon appears centrally-aligned, despite it being off-centre when wrapped in a rectangle

色彩

視覺調整在色彩中會顯得更加細微,同樣的也是關乎視覺重量與有多少色彩出現在其物件上,簡而言之用來填充字體的同一個綠色會比icon看起來更淺
I would recommend using the HSB / HSL colour values in your design application. Aside from other benefits, the ability to adjust the ‘L’ or ‘B’ value allow designers to swiftly change the brightness of a colour.

大小

尺寸是我們大腦可認知的大小,包括文字。以這個在圓形和方形為例,一個120×120像素的正方形具有較大的表面積大於120×120像素的圓,因此這個例子中我們得手動的讓圓形大一點!
The left shapes are both 120 × 120 pixels, which makes the circle feel too small. The right circle is 126 × 126 pixels, to compensate for the larger surface area of the square
人腦所產生的錯覺最出名的例子就是一些經典的錯視例子
明明是一樣大的圓,因為周遭物件的關係所以看起來不一樣大,這類的例子在設計物中雖然不是那麼明顯,但設計的好壞有時候就藏在細節中!,我稱之為:欺騙大腦的小精靈(之前設計實驗課教學用到的詞)
相較於其他調整這是非常細微的,但卻有助於整體設計的完整,輕推上下1px直到感覺對了這在字體學中也是一樣的道理,像是字體的Kerning微調等等
關於Kerning可以參考這篇

大寫字

The uppercase text in the top example seems larger than the text it is next to, the uppercase text in the bottom example has been adjusted by 2 pixels to make it feel the same size

除非設計方針就是要讓大寫字凸顯,不然大寫字通常都要比一般字再小個一兩級,當遇到更大的設計介面呈現的時候,這些細節都會被放大檢視,注意這些微小的調整更能幫助你的設計更棒

因為電腦無法理解物件的內容所以無法做到設計師的細微調整,我們不能依靠電腦為我們做到這些,我們應該依賴自己的眼睛與直覺,設計師每天都在磨練這些能力,我們應該多相信他們,即使電腦告訴我們這些是對的

以上講了許多細微的調整,也許有人乍看之下真的是完全不懂,然而這些正是視覺設計師所關心的細節,就像我常常說的:這是陰陽眼啊!
開天眼後看到的是天堂與地獄(美與醜),曾經有人就問過我說,真的有差嗎?一般人根本看不出來。確實一般人是看不出的,但我相信他們感覺得出來,當一個畫面調整的乾淨清爽、容易閱讀,就算他們不知道設計師調了行距與色彩,他們仍能感覺到無障礙,那就是設計的功勞。另一方面來說,人們看不到不代表我們就不要求,就像建築物,因為看不到裡面所以偷工減料嗎?只有設計師有要求,漸漸的大眾美感也是會被潛移默化的影響的!

最後再次感謝Luke Jones授權引用圖片與文章!!
Thank you very much!

對「網路速讀|自動調整與設計師之眼」的一則回應

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s