福州網頁設計師的基本視覺設計原則

  • 福州網頁設計師的基本視覺設計原則已關閉評論
  • A+
所屬分類:網站建設公司

每一種設計都要求在不同的元素之間創造一種團結感,或者創造性地打破這種團結以鼓勵特定的行動。這里介紹的原則將幫助您做到這兩點。

每一個視覺設計都試圖在不同的元素之間創造一種團結感,或者創造性地打破這種團結以鼓勵特定的行動。

值得慶幸的是,有一些簡單但強大的指南可用于創建和破壞統一設計。我們要為此感謝誰?格式塔心理學家。

如果你不熟悉,那么理解格式塔意味著:

物理,生物或心理現象的結構,配置或模式,如此整合,以構成具有不能通過其各部分的總和得出的屬性的功能單元

(聽起來有點像網站,對吧?)

基本上,格式塔心理學家正在尋找一種方法來解釋人類如何在混亂的世界中達到有意義(和/或妄想)的感知。通過這一努力,他們確定了4個核心概念,描述了人類如何解釋視覺數據。

這4個基本原則擴展到13個關于視覺體驗的特定經驗法則,我們都可以記住這些原則來創造更好的設計。

以下是4項核心原則:

1.出現

出現的原則表明我們在開始識別其部分之前試圖理解整體。

當我們看到一個物體時,我們首先嘗試接受它的輪廓,然后我們將輪廓與我們之前看到的其他物體進行比較。如果我們找到匹配,我們假設我們知道它是什么,然后我們可能會開始分析它的組件。如果我們沒有找到匹配,然后,我們就開始分析追求的是一種整體的各部分。

什么是設計的意義?

討厭打破它,但出現的原則表明我們應該堅持熟悉的,容易識別的模式。

因此,盡管您可能想要對下一個表單設計感到瘋狂,但最好還是堅持使用之前人們所見過的樣式。在末尾帶有“發送”按鈕的清晰輪廓和標記的框將比更“創造性”的設計更快地被識別為形式。但是堅持下去。這并不意味著你應該停止閱讀 - 或者創造性地設計。

這就是復雜的地方:出現表明了視覺解釋的層次結構:我們從整體開始,然后放大部分。這意味著您可以使用單個表單元素進行創作,只要整個內容可以立即識別為表單。

Emergence為極簡主義提供了一個令人信服的論據:一個簡單的形式比復雜的形式更容易識別。所以請保持簡單,朋友們。

2.具體化

具體化的原則表明,我們的思想填補了視覺信息的空白,以便識別物體。這意味著你不必看到整體的東西來理解它是什么,雖然整個對象越簡單或越廣泛認識,它就越容易被一個部分識別出來。

這意味著您應該毫不費力地識別此符號的含義:

福州網頁設計師的基本視覺設計原則
即使有一半的圖像消失了,你也明白了,對吧?

那么具體化對設計意味著什么呢?

具體化意味著您不必包含所有對象以使其可識別。您可以使用此原則來節省布局空間,在旋轉木馬中建議下一張幻燈片的內容,使您的“即將推出”頁面更清晰,更具吸引力等等。

福州網頁設計師的基本視覺設計原則
List Apart利用具體化來限制其字標所占用的空間。

3.多穩態

這個房間里有一個深夜的宿舍,但是我們走了:多穩態解釋了為什么你只能看到那些著名的視錯覺中的面孔或者花瓶,但從來沒有同時看到過。

福州網頁設計師的基本視覺設計原則
面孔還是花瓶?多穩態意味著您一次只能看到一個。

你知道,人類的思維并沒有挖掘不確定性,所以它注重了一種看待某種東西的方式,排除了可能的替代方案。很有意思吧?有點讓你思考政治。但讓我們繼續前進。 ?

什么是多穩定性意味著設計?

多穩定性在設計中有效應用可能是一項艱難的工作,因為它往往會導致混淆而不是理解(當然,這是我們通常的設計目標)。

但是,多年來已經證明了數十種強大的徽標,您可以使用多種功能來制作令人難忘且令人驚喜的設計,例如FedEx徽標。一旦你看到那個箭頭(在E和X之間),以及具體化的其他箭頭,就很難看到它。

福州網頁設計師的基本視覺設計原則
多線性意味著你會看到箭頭......一旦你注意到它。

4.不變性

不變性原則表明我們非常擅長識別相似點和不同點。這意味著從一群類似物體中脫穎而出很容易。

還記得在黑客帝國中穿紅裙子的那位女士嗎?在辛德勒的名單中穿紅色外套的小女孩怎么樣?這兩個人都非常突出 - 并且仍然令人難忘 - 因為他們鮮艷的色彩實際上是從我們看到他們反對的同質黑白背景中尖叫出來的。它標志著它們是有意義的,值得你注意。

不變性對設計意味著什么?

在設計領域,當在一個其他同質的元素組中引入一個不同的元素時,不變性可以產生強大的結果。

您經常會看到這個應用的一個領域是產品的定價頁面,其中一列通過顏色或大小從定價表的其余部分中脫穎而出。

福州網頁設計師的基本視覺設計原則
哪一欄最吸引您的眼球?

Echo的定價頁面使用不變性使“自定義”選項脫穎而出,并以一種截然不同的顏色吸引眼球。雖然其他列都使用不同的藍色陰影,但它們的相似性足以在自定義色譜柱明亮的色調面前消失。

您還可以在某些網站的主要導航系統中看到這一點,設計師已經從人群中脫穎而出,使用更亮的顏色或變體設計。

福州網頁設計師的基本視覺設計原則
MailChimp的設計師使用不變性來吸引那些“注冊免費”按鈕。

這樣,用戶就可以了解網站希望您采取的操作,從而明確用戶體驗。在MailChimp的例子中,兩個主要CTA中相同的設計和語言也清楚地表明,任何一個鏈接都會將您帶到同一個地方。

感覺就像核心原則的專家呢?真棒。讓我們深入一點。

將格式塔原則應用于網頁設計

一般來說,格式塔原則有助于我們理解我們如何處理視覺信息,既可以從整體開始,也可以按照自己的方式處理部件,或者嘗試將混亂的整體分解為更簡單的組件部分。

換句話說,當談到我們對視覺刺激的解釋時,我們總是在尋找理解事物的最簡單方法。格式塔心理學家稱之為:

Pr?gnanz法(又名“好身材”或“簡單法則”)

人們將模糊或復雜的圖像解釋為最簡單的形式。

因此,我們只是看到一個互鎖環的排列,而不是將奧林匹克標志的設計視為束狀圓形和葉形。

福州網頁設計師的基本視覺設計原則
根據Pr?gnanz法則,我們將奧林匹克標志視為互鎖環,而不是一堆無意義的復雜形狀。

請注意,根據多穩態原則,您可以嘗試查看更復雜的排列,但需要付出更多努力 - 您的眼睛只想返回更簡單的模式。

這對你的設計意味著什么?這意味著您可以創建簡單形狀的復雜排列,只要它們組合在一起形成一個易于理解的整體。這基本上是喬治·修拉(Georges Seurat)用他的點彩畫作品做的事情:

福州網頁設計師的基本視覺設計原則
修拉知道我們會在他的點彩畫中看到形狀。

這使我們完全理解了封閉原則。

關閉

當我們看到復雜的排列時,我們會尋找一種可識別的模式。

我們總是試圖將意義和秩序帶到無意義的混亂中(我們不是在談論你的最后關系),我們的眼睛通過具體化來做到這一點:填充缺失的數據以理解我們看到的東西。

您可以通過Mike Erickson(也稱為Logomotive)在OneFund的這個(可悲的拒絕)設計中看到這一點。(更不用說你看到的絕大多數最小標志設計了。)

福州網頁設計師的基本視覺設計原則
你的頭腦尋找閉合創造了一個無中生有的F。

在這里,我們沒有給出形成字母F所需的所有視覺信息,但我們推斷陰影提供的缺失信息以創建字母。我們這樣做是因為,否則,圖像只是一些看似隨機的黑色塊,下面有一些類型。

關閉基本上是使所有最小徽標都起作用的原因。

對稱和秩序

毫不奇怪,人們傾向于在物體中尋找秩序,而對稱性是這樣做的一種方式。這就是為什么對稱對我們來說是如此令人滿意的原因:它是一種簡單,和諧的規則,傳達了事物的秩序感和正確感。這可能就是為什么對稱性在世界各地的政府建筑中如此受歡迎的原因。(以及為什么3柱設計風靡一時。)研究還表明,我們面部“美”的標準在很大程度上取決于對稱性。

福州網頁設計師的基本視覺設計原則
我們對對稱性的熱愛解釋了3柱設計的普及。

雖然對稱的形狀令人滿意,但由于所有的和諧,它們看起來也有點靜態或陳舊。有時他們缺乏運動感或活力。這個問題為設計師提供了一個機會:通過在其他對稱設計中添加不平衡元素,可以引起人們對不平衡點的注意??赡苤皇悄阈袆犹栒俚淖罴褕鏊?,不是嗎? ?

圖/地面

人們將對象視為圖形(焦點)或地面(背景)。 ?

當幾個物體并置時,我們自然會在它們之間產生空間關系感,即使沒有明顯的視覺線索。這意味著即使是非常簡單的物體排列也可以用來創造一種關系感,因此甚至可以用一絲敘事來表達。

福州網頁設計師的基本視覺設計原則

 

請注意,連接元素(上面的小矩形)不必實際觸摸其他對象來創建這種關系感。這就解釋了為什么常常使用箭頭將文本連接到圖像,如下圖所示。

福州網頁設計師的基本視覺設計原則
箭頭幫助我們連接副本和圖像,以更好地掌握圖形的信息。

如果沒有箭頭,可以將“它在這里和這里看起來很好”連接到相應的圖像,但這需要觀察者的一些推斷才能理解一個“這里”指的是平板電腦,另一個指的是電話。箭頭使復制和圖像之間的連接更清晰,使整個事情更容易理解。

共同地區

如果元素包含在同一區域內,則會將元素視為組的一部分。

您會看到網站一直使用這種視覺技巧。事實上,它已經成為許多人譴責的標志之一,因為網頁設計的同質性越來越高。但這并沒有削弱技術在澄清各組設計元素之間關系方面的能力。

福州網頁設計師的基本視覺設計原則
共同區域的原則有助于我們將標題,正文和圖像連接成一個故事。

在上面的屏幕截圖中(取自Google的Now網站),設計師使用巨卡來幫助我們了解標題,圖片和段落都是相關的。我們立刻得到“正確時間的正確信息”定義了下面的圖像和副本的主題,并且?“全天候的幫助”正在引入一組新的元素。

接近

我們看到彼此接近的物體比相距很遠的物體更相關。

在視覺上,距離定義了相關性??拷奈矬w被視為相關的物體,而相距很遠的物體則不是。

例如,請查看下面的Google即時網站。文字“Spotify”顯然與下面卡片中的所有內容相關 - 即使它沒有包含在卡片中 - 因為它比卡片更接近卡片,比如文本“OpenTable”。

福州網頁設計師的基本視覺設計原則
接近有助于我們在這張圖片中直接保持復雜的關系。

您還可以組合鄰近區域和公共區域以創建更復雜的效果??纯?/span>Mook是一個免費的Webflow模板,由Tim Noah設計的創意代理商。

福州網頁設計師的基本視覺設計原則
在Tim Noah的Mook模板中接近工作。

在這里,Tim使用鄰近區域和公共區域來明確“我們的工作”和“發現我們為他人所做的事情”是相關的。同樣適用于“策略”,正文副本和下圖的單位。

延續

我們看到線條或曲線上的元素與不在線條或曲線上的元素相關。

福州網頁設計師的基本視覺設計原則
我們知道這三個點因為延續而相關。

正如斯巴魯的Zero Landfill網站所示,線條和曲線也有助于我們理解關系。正如您在上面的屏幕截圖中看到的那樣,很明顯粗糙環上的點彼此密切相關 - 至少比頁面其他區域的文本更加緊密。

共同命運(同步)

我們看到的元素在相同的方向上移動,而不是與靜止或向不同方向移動的元素相關。

福州網頁設計師的基本視覺設計原則
船通過共同的命運保持圖像和文本相關。

你可以看到共同命運的原則與The Boat上的美麗戲劇一起發揮,它使用視差滾動來傳達風暴的混亂拋擲和它講述的故事的前進動力。

隨著所有這些動作的繼續,你可以忽略這樣一個事實:上面屏幕中心的文字與它之間的兩個前景圖像有關。但是當船和風暴拋向的波浪一般移動到屏幕的右側時,前景文本和圖像之間的關系變得更加清晰 - 因為它們向上移動到屏幕上。(雖然設計師在滾動時通過文字和圖像傾斜和移動來增加戲劇效果。)

排比

我們看到并行元素與非并行元素相關性更高。

為了看到行動中的平行主義,我想不出比意大利未來主義者馬里內蒂的經典視覺詩“自由中的假釋”(“自由言論”或“自由中的言辭”)更好的例子。

福州網頁設計師的基本視覺設計原則
平行文本行幫助我們理解這種復雜的字母糾結。

在這種混亂的文本混亂中,Marinetti通過設置幾行彼此平行的線條,偶爾提供(相對)清晰度和相關性的呼吸。這些平行線與其他分散的文本產生張力,但也通過暫時恢復正常閱讀體驗到動態構圖來創造緩解。

相似

我們看到共享特征的元素與不具有特征的元素相關。

您已經看到了一些相似性的例子(參見統一連通性部分,以及MailChimp在不變性部分的設計)。但要放大一點,請從Designer News看一下這個設計:

福州網頁設計師的基本視覺設計原則
圓形圖標有助于我們了解兩個網站設計帖子是相關的(即相同類型的帖子)。

在這里,帶有黃色背景的網頁圖標用于連接兩個網站設計帖子,清楚地表明它們是相同類型的帖子。右邊的“訂閱”按鈕中出現相同顏色的事實可能會讓您認為它也以某種方式相關,但不同的形狀和文本有助于區分它。

重點

興趣點,重點或差異捕獲并引起我們的注意。

焦點是網頁設計這么多元素的關鍵,它指出它幾乎感覺很奇怪。但是,這種中心性使智慧和有目的地應用重點和差異變得更加重要 - 畢竟,正如俗話所說,“如果一切都被強調,那就沒有了?!?/span>

當然,有多種方法可以在設計中強調重點,包括:

  • 明顯的顏色變化,例如當CTA按鈕或其他鏈接被賦予高度對比的顏色時
  • 戲劇性的大小變化,例如英雄標題設置為72pt
  • 印刷重點,如粗體,斜體,全部大寫等。
  • 戲劇性的空白,就像你將焦點與其他元素完全隔離一樣

還有更多。

過往的經驗

我們根據過去的經歷來看待事物。

好的,這是一個非常棘手的問題。與我們在這里討論的所有其他視覺設計原則不同,沒有人控制過去的經歷。

你在這里做的最好的目的是吸引過去的平均經驗。例如,大多數人將冰淇淋與各種溫暖,模糊的感覺聯系在一起 - 更不用說其美味帶來的基本樂趣。冰淇淋甜筒的形象可能會喚起人們對童年無盡夏日的懷舊情懷,或者在家庭聚餐后享用傳統碗冰淇淋的團結感。

或者,一個人可能患有乳糖不耐癥。離開冰淇淋的形象永遠標志著...不愉快的聯想。

您還必須記住受眾的變化。如果您為國際受眾 - 甚至是不同年齡段的受眾 - 設計網站或產品,您需要記住,某些圖像或設計元素的情感和體驗共鳴可能因細分不同而異。