在我早年,作為一個設計師,我依靠 PS 圖象處理軟體或者 CSS 來告訴我什麼是對的還是錯的。如果 PS 圖象處理軟體表明兩個形狀對齊,然後他們對齊。如果兩個不同的形狀是相同的大小,那麼就是這樣。如果兩個顏色有相同的十六進位制值,那麼他們看起來相同的顏色。本文講述的是 WooCommerce 獨立站網頁設計師怎樣運用光學調整來使 WooCommerce 獨立站網頁設計更協調?
這種方法似乎是合乎邏輯的,但它是一種不正確的工作方式。計算軟體也都是理性的,但軟體不能考慮到人類感知的形狀,顏色和大小的方式,即軟體無法理解在其他物件的背景下,在一個整體的視覺語言環節中一個人如何感知物件。一個人需要理性的頭腦來決定什麼東西看起來光的正確與否,因為我們可以看到和理解的上下文時,計算機不能理解這些細微的差別,並且知道如何調整才是一個好的設計師更好的設計師。
讓我們來看看這個在行動中的一小部分例子。
對齊+視覺重量
計算機不能計算一個物體的重量,它只能依賴於某些資訊,如寬度,高度,或 X / Y 位置。作為設計師,我們需要透過一些所謂的光學調整來彌補這一點。
在一個遊戲圖示中的三角形是在圓的中心對齊嗎?錯誤。在遊戲圖示周圍繪製一個矩形,顯示它的關閉中心。
雖然’ 正確’ 播放圖示沒有出現偏離中心,它是明確的,它是,而不是隻是一點點。為什麼?視覺重量。三角形的重量或質量位於它的左手邊,這創造了一個被關閉中心的光學錯覺,即使它不是。為了解決這個問題,我們必須手動將三角形直到它出現中央。
顏色
顏色的光學調整是更微妙的。再次,它是關於物體的重量,以及有多少顏色出現。總之:同樣的綠色可能被用於一個充滿圖示和一些文字,但其中一個看起來比其他更輕。
它是微妙的,但您可以看到,該圖示是比文字更重。調整,使圖示顏色較淺,或使文字更黑暗的?-? 我建議選擇哪個顏色將幫助您滿足 AA 可訪問性指南。
規模
尺度是關於我們的大腦如何感知物體的大小,包括文字的大小。如果我們考慮到這一點,在圓形和正方形,一個 120 畫素的正方形有一個更大的比 120 畫素的 120 畫素圓的表面積,所以圓必須更大,以彌補。
與所有其他調整,這是微妙的,但調整有助於整體設計看起來正確。這是非常? 微調元素-? 輕推值上下 1 畫素,直到感覺對了。
這個字型也是如此,在過彎的字母下降或上升超過上限高度,基線,如果您寫一行文字在 Garamond 和文字的基線和高度畫一條線,您會看到彎曲的形狀在這些線。如果這些價值不存在,個別人物會覺得太小,他們的下一個兄弟姐妹。
大寫字母的文字
最後,在光的調整是必要的例如:當設定大寫文字旁邊的標準文字。大寫文字比標準的情況下,文字更加突出,需要進行補償。
除非本設計方面的目的是為了更加突出的大寫字母,大寫字母的文字應該是由一個小的畫素數量減少,例如 16 畫素 14 畫素或 12 畫素 11 畫素。當在一個大的介面上的每一個這些微小的設計細節加起來,會影響網站的整體感覺。這種對細節的關注是什麼使得一個好的設計。一旦它成為一個工作流程的一部分,2 畫素或 10 畫素接近三角形的權利需要時刻減少文字的大小,但這些都是做設計的感覺完美的東西。計算機甚至人工智慧無法理解一個設計的背景,所以它不能作出準確的調整,一個設計師可以使。直到一臺計算機可以對一個孤立的元件在一個完整的視覺語言的上下文中作出合理的判斷,它不能依賴於作出複雜的設計決策。更多 WooCommerce 建站資訊請諮詢跨飛獨立站。
我們不應該依靠電腦來為我們做所有的思考,我們應該依靠我們的眼睛和我們的本能。設計師每天都在鍛鍊他們的直覺,所以我們應該相信他們。好的設計師或作出好的 WordPress 網站設計。