設計心理學:塑造您的在線形象

已發表: 2023-02-15

在我們的設計心理學系列的前兩期中,我們詳細介紹了顏色的重要性。 然而,顏色選擇只是與不良設計作鬥爭的一部分。

無論您是在為新網頁設計創建背景圖案,還是在構思新產品的包裝,最終您都將不得不用鉛筆在紙上畫草圖。 無論您開始形成什麼樣的形狀,它都會對您的觀眾產生強大的影響。

繼續閱讀以了解更多關於您的客戶將在您選擇的形狀和他們對您的整體品牌的評價之間建立的常見關聯。 另外,查看一些真實示例,了解這些形狀如何用於各種設計!

  • 線條
  • 圓形和橢圓形
  • 三角形
  • 四邊形
  • 多邊形
  • 抽象形狀

直線和曲線

當談到線條工作時,你真的不得不在棱角分明和曲線美之間劃清界線。 線條可能是產生所有藝術品的基本形狀,但嚴重依賴線條的徽標和網頁設計絕非簡單。

通常,人類更喜歡曲線而不是直線。 這可以歸因於視覺系統的神經生理學。 即使是眼睛未完全形成的嬰兒,也會將注意力更長時間地集中在彎曲的形狀上,而不是尖銳的、有棱角的線條上。

來自 Affinity 網站的屏幕截圖,其中包含他們的圓形三角形徽標
Affinity 徽標的圓角邊緣柔化了它對用戶的整體效果

但是,曲線不一定會增加用戶將注意力集中在您的設計上的時間。 事實上,銳角更有可能引起用戶的快速注意。 曲線意味著柔和和復雜,而銳利的線條和角度則意味著嚴肅和簡單。

研究表明,有棱角的物體會引發威脅感。 形狀的清晰度已被證明可以增加杏仁核的活動,杏仁核是處理恐懼的大腦區域。 出於這個原因,銳角通常需要觀眾的注意力,並且比彎曲的對應物更快地吸引眼球。

您可以使用這些自然的人類反應模式來創建讓您的觀眾有所感受的設計。 對於有趣、輕鬆的品牌,曲線可以幫助您分解網站上的文本塊並營造奇思妙想的感覺。 但是,對於更嚴肅的品牌角色,銳角和直線將有助於營造一種引人入勝的感覺。

來自 The Inlay 網站的屏幕截圖,具有白色背景和三條垂直線
創意工作室 The Inlay 使用細直線來打破他們的極簡主義網站,讓你的眼睛移動

創意工作室 The Inlay 使用直線和極簡主義設計在您滾動頁面時吸引您的眼球,但避免過度使用可能引發負面反應的銳角。

然而,技術諮詢公司 Affinity 在其整個網站上使用了大量以關係為導向的語言。 他們的圓形箭頭標誌和整個設計中的彎曲形狀比技術空間中使用的傳統、僵硬的圖像更容易接近。

圓形和橢圓形

如果你稱某人為方塊,你可能是在暗示他們很無聊。 相反,則意味著圓圈意味著樂趣、青春和無憂無慮的心態。 這是有道理的,因為嬰兒的注意力已被證明對曲線保持更長時間,他們也傾向於更喜歡圓形玩具。

當您的觀眾看著一個圓圈時,會想到開放和團結。 圓形也可以表示社區或保護的感覺——比如在你自己的泡泡里安全,甚至是一個很好的擁抱。 圈子的其他特徵可以包括友誼、溫暖、女性氣質和重生(想想:生活的圈子)。

Ring 網站的屏幕截圖展示了他們的四種門鈴產品
產品本身的環形按鈕燈是給 Ring 用戶的另一個視覺提示

從命名的角度來看,Ring doorbell 已經觸動了用戶的感官。 在聽覺上,你可以想像門鈴“響”,而在視覺上,想像中的“響”與他們的標誌和物理硬件的設計方式有關。

Netflix 節目 The Circle 主菜單頁面的屏幕截圖。兩個女性人物的背影看著參賽者的屏幕
圓圈出現在個人資料圖片、按鈕形狀,甚至參賽者居住的建築物的建築設計中

Netflix 真人秀節目 The Circle 是循環品牌最有意義的另一個地方。 前提是一群人可能會或可能不會說出他們的身份真相,他們試圖僅通過名為 The Circle 的社交媒體平台在同齡人中獲得人氣。 目標? 待在社區內——待在 The Circle 中。

三角形

加速度、運動和平衡,三角形很容易說明活動。 它們是充滿活力、強大的形狀,可以喚起從興奮到謹慎的一系列情緒。

三角形具有影響力,它們的指向方式至關重要,因為方向會改變它們在消費者心目中的含義。 例如,一個朝上的三角形可以顯示出力量,但是當稍微傾斜時,它們就可以顯示出不穩定。 但是各個不同方向的多個三角形可以表現出樂趣或興奮——就像五彩紙屑一樣!

Rick Astley 的紅極一時的“Never Gonna Give You Up”預覽圖像的屏幕截圖,中間有一個三角形播放圖標
這張 YouTube 視頻的預覽圖片使用了一個三角形的“播放”圖標

您最喜歡的視頻或音樂流媒體服務上的播放按鈕很可能只是一個指向右側的三角形。 它類似於表示向前運動的箭頭,而不是表示暫停的兩條直線(兩條直線之間的字面“中斷”)。

帶有徽標的 HGTV 主頁屏幕截圖
“Home & Garden Television”通過徽標頂部的簡單三角形展示房屋

HGTV 也巧妙地使用了三角形設計。 等腰三角形橫跨其文字商標的頂部,這是一種清晰而簡單的方式來說明房屋的屋頂。 徽標另一端的“V”指向下方,形成了很好的平衡。

四邊形

四邊形包括任何四邊形。 正方形和長方形是最常見的示例,但此處也包括梯形、菱形等。 正方形和長方形通常是穩定、穩定、順從或直率的象徵。 它們的直角在視覺上暗示了理性、秩序和結構。

正方形和長方形經常被想要給人以腳踏實地或務實印象的品牌所使用。 從國家地理到 LinkedIn 再到多米諾骨牌,正方形和長方形在各行各業都很常見,尤其是徽標。

其他類型的四邊形也將傳達這些規則感,但具有更前衛、現代的視覺扭曲。 鑽石可以用來傳達奢侈品或高端產品,因為我們會無意識地將形狀和寶石聯繫起來。 像風箏和菱形這樣的四邊形非常適合在不訴諸過度使用的模式的情況下暗示一定程度的穩定性。

Mokthar Saghafi 設計網站上的平行四邊形圖案截圖
Mokthar Saghafi 設計網站截圖

澳大利亞網頁設計師 Mokthar Saghafi 使用平行四邊形作為他網站的幾何圖案。 四邊形的圖形整齊地堆疊在一起,暗示著四邊形通常所蘊含的穩定性。 不過,將它們設置為略微不規則的菱形而不是真正的矩形會增加另一層視覺趣味。

印有樂高標誌的塊狀街道標誌
照片由 Faiz Zaki 拍攝

雖然樂高可能看起來不接地氣或不合規,但它們肯定很穩定——否則你會用它們來建造什麼呢? 他們的方形標誌也是對其產品的視覺呼應。 它看起來非常類似於帶有四個螺柱的方形樂高積木。

五邊形、六邊形和八邊形

在數學和設計中,這種形狀的集合被稱為“多邊形”。 多邊形是一個總括性術語,用於描述任何二維幾何形狀,但它通常用於具有 5 個或更多邊的形狀。

在自然界中,這些形狀隨處可見,從蜂窩到貝殼圖案再到晶體和岩層。 然而,在網頁設計中,它們的使用頻率較低。 這對您的客戶來說可能是一件好事,因為它將幫助您從更常見的設計趨勢中脫穎而出!

複雜且充滿未來感的多邊形通常用於營造結構良好的現代氣息。 然而,某些多邊形通常用於利基行業。 例如,汽車和機械製造和維修公司經常在設計中採用六邊形和八邊形,因為它們類似於螺栓頭。

Built By Buffalo 主頁的屏幕截圖,其中他們的特色項目以蜂窩狀顯示
使用這種模式來展示他們的作品,Built By Buffalo 可以在非常小的網絡空間中展示大量項目

英國網頁設計機構 Built By Buffalo 使用的六邊形佈局是一種很好的方式,可以在不壓倒主頁的情況下預先展示他們的大量工作示例。 然後在整個網站上使用它來展示團隊頭像、炫耀有趣的辦公室照片以及調出重要信息。

五角大樓旅遊網站“關於”頁面的屏幕截圖。三個對角線作為圖形元素穿過旅遊照片
Pentagon Tours 標誌的粗線條是通過對網站上的圖像進行圖形處理來模仿的

五角大樓是世界上最知名的建築之一,因其五邊形結構而得名。 使用多邊形進行建築設計的一個典型例子,建築本身傳達了堅忍和穩定

抽象形狀

還有一些其他幾何和抽象形狀通常用於網頁和產品設計、促銷和品牌推廣工作。 讓我們快速瀏覽一下其中一些流行的形狀及其含義。

斑點

斑點通常是具有有趣或愚蠢特徵的形狀。 著名的“bouba/kiki 效應”已經證明,跨文化和書寫系統的個人會將無意義的單詞“bouba”歸因於斑點形狀,而“kiki”則與尖尖的抽象形狀相關聯。  

當您選擇使用帶有尖銳邊緣的尖銳抽象形狀時,您會迅速吸引觀眾的注意力。 然而,使用更圓的形狀,您會讓它們感覺更舒適和有趣。

Buzzworthy 的導航菜單的屏幕截圖,球根形狀的照片旁邊有“工作。工作室。團隊。聯繫方式。遊樂場。”
當您打開 Buzzworthy 導航菜單 u 時,會出現動畫“bouba”形狀

位於布魯克林的自定義 WordPress 設計工作室 Buzzworthy 使用大量的斑點形狀和球狀過渡動畫來展示他們有趣、時髦的風格。

十字架

通常用於展示靈性和治療、聯繫或平衡,十字架一直出現在網頁設計中。 這是在視覺上暗示兩件事之間的會面或聯繫的最常見方式。 叉號在設計中的另一個常見用途是作為“加號”符號,表示您可以將商品添加到購物車或展開以獲取更多信息。

在標誌中,十字架通常是為宗教組織保留的,因為它們有著強烈的宗教聯繫,但其他更不可知論的形狀使用也取得了成功。

美國紅十字會網站的屏幕截圖,上面有他們標誌性的“紅十字”標誌
美國紅十字會網站截圖

美國紅十字會是使用交叉圖像的最著名組織之一。 他們的工作位於需要幫助的個人和可以在災難期間或之後提供幫助的個人的交匯處。 紅十字會的標誌將它們置於這兩者的交匯處,同時也在視覺上暗指治愈和健康。

螺旋線

螺旋意味著運動和進步。 圓形的螺旋和環圈通常說明完美、美麗和進化。 如果您的螺旋形更尖銳,如之字形運動,則更有可能傳達產品、公司或服務正在採用的支點、變化或新方向。

螺旋的方向也將與它的感知方式有很大關係 - 特別是如果您計劃對其進行動畫處理。 你最不想做的就是試圖傳達發展、成長或創造力,並最終讓你的用戶陷入螺旋式下降。 與大多數事情一樣,盡可能讓你的螺旋向上和向右移動來傳達積極的運動。

Rally 主頁的屏幕截圖,白色背景上有一個黃色螺旋
當您滾動時,螺旋會移動得更快並改變顏色。 如果你停下來閱讀,螺旋會慢慢向上移動

Rally 是一家位於猶他州鹽湖城的數字產品工作室,他們在整個網站上使用白色背景上的簡單螺旋。 不斷變化的顏色和螺旋的動態運動讓觀眾在視覺上保持興趣,並創造一種有凝聚力的用戶體驗。

有機形狀

有機形狀包括樹葉、樹枝、根、波浪、星星、雲等等。 在可以一起使用幾何形狀來創建圖像的地方(例如:頂部有三角形的正方形變成一個簡單的房子),有機形狀通常作為圖像獨立存在。

這些形狀通常是不規則或不對稱的(但並非總是如此),並且它們會以某種方式與自然世界相關聯。 “雲”的概念是對有機意象的完美運用。

SoundCloud 主頁的屏幕截圖。他們在左下角的標誌是雲形的,它的左半部分由幾條垂直的細線組成,就像你在音頻文件中看到的那樣
SoundCloud 的徽標使用自然圖像使技術在視覺上更有趣和平易近人

“雲”存儲的想法將一些非常令人興奮和技術性的東西聯繫在一起——一個保存信息的無形“位置”——並將其與自然世界聯繫起來,使它更容易為技術新手所接受。 例如,SoundCloud 是一個音樂共享網站,用戶可以在該網站上上傳音頻文件,並與全球不斷壯大的音樂愛好者社區分享。

設計背後的思想

與往常一樣,這些並不是硬性規定。 在您的設計中使用多種形狀、線寬和對齊方式來創造視覺趣味。 將多個元素結合使用將使您能夠講述一個讀者可以用眼睛看到並在直覺中感受到的故事。

WP Engine 資源中心是您獲取所有設計信息的來源,我們的設計心理學系列都是關於使用設計的基本元素通過精心策劃的品牌吸引客戶。

閱讀第一部分和第二部分,深入了解顏色的含義以及如何在視覺敘事中使用它們。 然後,請注意第四部分,該部分將探討您的字體、內容佈局和單詞選擇的重要性。

第1部分
第2部分