而這兩個關鍵之處是，顯示的視覺元素以及其主要特征之間的關系。如果兩個元素是以某種方式相關的，那麽就應該表現出相似的視覺特性。如果內容不同，那麽它們就是不同的。
如何使元素顯示彼此的差異和***性，答案就在其基本特征。基本特征是元素的內在特征或是內在屬性。例如，元素是什麽？它有多大？應該長的是什麽樣子的？
所有的元素都會從基本特征上傳達壹些信息。如果壹個標題大於另壹個，那麽我們就可以想到大標題更加重要，我們還可以從有鋸齒和銳利的形狀作為危險的元素。
有時，元素的屬性與另壹個元素具有相同的特性才有更多的意義。例如前壹段的標題，只有當標題大於另壹個標題時才會顯得更加重要，正是這樣才能通過相似性和對比來進行比較。
通過多個元素給予視覺上的相似特征，我們就能獲得相似的有關內容。如果在網頁上有兩個元素都是紅色的圓圈，很自然觀眾機會好奇為什麽？為什麽是紅色的？為什麽是兩個圓圈，可能的結論就是元素會以某種方式超出其外觀的相關性，該元素的相似性表明他們攜帶壹種類似的消息。
同樣，通過應用元素在視覺中的不同特性，相比較於其他元素，就可以看到其他東西的不同元素的攜帶不同的信息。
任何壹個元素的特性都可以通過轉變，使得彼此看起來是相同或者是存在差異的，下面的壹些特征是最常見用於顯示對比度和相似性，排名不分先後，它們是：
（1）尺寸
（2）形狀
（3）顏色
（4）值
（5）質感
（6）位置
（7）方向
壹個矩形和圓在形狀的對比，兩個紅色物體在顏色的相近。紅色長方形和形狀，並顯示相似的紅色圓圈的對比色。如何通過他們的視覺特性來平衡元素之間的相似性和對比度，將會很大的程度上取決於要傳達什麽樣的元素給觀眾。
註意：雖然原始的特性最主要是直觀顯示對比度和相似性，但是還是可以使用其他的方式來顯示，這要根據元素的實際傳達的內容。詞語“停止”和“走出去”是對比。而“停止”和“禁止”就是相似的。還有圖像與文字的對比；長段和小段的對比等等。
人們都會有意註意區別，這是壹種生存本能機制，以便迅速從敵人中區分哪些是自己人。還能夠快速準確的安全返回到洞穴，這在夜間是至關重要的。
我們也擁有可以迅速的預斷出差異的能力。其中，對比是那麽的容易吸引眼球以及容易發現。通過給那些從直接圍繞其周圍的元素比較元素之間在視覺上的不同特點，我們可以自己尋找側重感興趣的元素。事實上，由於與周圍元素的對比就能更加的吸引我們的註意力，這種方法也是在設計中為了增加興趣和興奮感最有效的方式。
對比不僅僅可以吸引人的註意力，還可以在元素之間建立邊界。例如，主要內容的背景顏色對比，並且邊界以另壹種顏色來顯示，從開始到結束。
脫穎而出的差異可以突出重要的內容信息。差異越大對比就越是強烈，就更加突顯重要元素。例如，用兩種方式來襯托文字的粗體和斜體，使用粗體會形成更加強烈的對比來突顯。這很簡單，滴幾滴血在粗體的文字上，相比較於斑點斜體從更遠處看，也是更加容易識別的。
如果兩個元素是為了消除這種對比，那就去除反差。並且確定觀眾不會認為這是故意虛假的，因為存在這種反差顯然是故意為之的，會導致壹些不必要的誤解。字體15px和16px的大小中的差別人們通常不是那麽容易發現的，如果觀眾察覺到了，那就會做出更多錯誤的理解。
要謹慎使用對比，而不要過度。如果都使用對比，就需要自己註意壹些地方，不至於最後沒有突出自己想突出的東西，最終會導致視覺噪點引起混亂的情況。
對於反差太大又會打破設計中和諧統壹，出現混亂和困惑，這也會導致自己想設計的是什麽，可是最後展現出來的又不是那樣，這就需要我們仔細判斷哪些元素是要使用對比以突顯出來的。
每個格式塔原則都會適合用於顯示有關某方面的相似性和對比度。我想之處兩點。對比度是確定背景與圖形之間的關系，並顯示重點突出的和節點。
（1） 圖形和背景 ：對於壹件事物確定其主要構成，會第壹時間確定主要元素和背景。這種關系有助於結合上下文來理解，圖形和背景之間需要確定彼此之間哪些是難以辨認哪些又是可以確定的。
（2） 節點 ：這些地方是重點突出的區域，使得被設計元素與周圍環境有些不同。對比度就可以幫助它們很好區分開來，並吸引註意力。突出的元素會在組合元素中占據主要因素，這些脫穎而出的元素將會是相對於不明顯元素的節點。
同樣，迫於生存機制使我們也能很快看到差異，也同樣使我們很快看到相同點。這點可以知道什麽是值得信任的，什麽又是危險的事情。人類有天生的優勢可以發現那些相似的地方。這種模式能夠幫助我們理解和認識周圍的環境，使得學習更加快速高效，最終變成壹種直覺或本能。
當我們設計了看似很相似的兩個或多個元素，就表明什麽是真正的對等關系。如果壹個元素很重要，那麽另壹種相似的元素也是重要的。如果這個元素在視覺上是可以點擊的，那麽另壹個相似的元素也就是可以點擊的，這樣就可以快速識別哪些是文本鏈接。從視覺角度看，鏈接上的文本和其他的不同就是它們之間存在壹種聯系，告訴我們可以點擊，壹旦發現壹個這樣，那麽其他的都會有類似的效果。
相似度就是顯示的元素和顯示的連接在多個項目中存在某種程度的相關性，它會給我們帶來熟悉度和壹致性的設計。
相似度補充了我們對於自然信息處理策略能力。當我們試圖在視覺環境中理解和感知時，就會對自然信息進行成分類的儲存其詳細信息。這樣就會形成我們的長久記憶的壹部分。
越來越多的元素看起來是相似的就會使得用戶認為它們之間更加的相似，甚至是相同的。並且也會隨著更加深入的了解，根據某種方式進行分組，哪拍只有壹個特性相同。另外就是相同的特性越多就越被認為是相同的。
我們會使用相似的模式構建結構，在組合元素之間進行相似性的區分和等同的結構。附加壹些信息填寫在結構模型中，例如圖案、紋理和疏密關系。
當然並非所有相似的顯示就是相等的，在下面的圖片中，妳會按照形狀還是顏色劃分？是把圓形和方形作為區分還是把壹組紅色與藍色進行區分？
首先妳可能會註意到顏色，元素分組是紅色和藍色。這就表明顏色之間的比形狀的區別更加容易識別劃分，當然這也不是絕對的。例如，有人使用紅、綠色盲就在第壹次劃分的不大可能註意到顏色之間的區別，而是優先考慮到形狀的差異。
同樣，每個格式塔原則也是關於我們如何感知對象之間的相似性或差異。他們中許多人可以讀作提示來作為顯示的相似處。
（1）閉合：不同的元素其可以類似於整體的壹部分；
（2）對稱性：反應元素是否處於壹起；
（3）統壹的連貫性：通過連接使得視覺上相似；
（4）常見的區域：類似的元素在壹起；
（5）接近：通過外觀感覺類似；
（6）連續：通過壹種節奏保存相似；
（7）***同趨勢：運動趨勢壹致；
（8）平行：並列定向的相似；
每個網站上都可以找到對比度和相似性的應用，兩者必須存在。想象壹下沒有對比的網站，如果它的背景是壹樣的顏色，那麽我們將會很難閱讀文本。正如很難將具有不同風格單詞或短語區分開。
我會在下面的網站中，每壹個例子會指出更多的差異和***性。這是希望能提供足夠的例子來讓妳思考，然後讓妳靈活運用。並且在看看和學習不同的設計，以便真正提高妳在平衡對比度和相似性操作中的技能。
David Simon
我們註意到David Simon網站的第壹點是背景顏色之間的對比度，這使得它很容易區分不同的頁面。標誌也是引人註目，因為對空間使用淺色的元素與黑色的背景。
圖像之間的對比是吸引眼球的根本。在這篇文章中的日期就使用了黑色的背景，日期數字使用大寫，在當前的頁面中就通過對比繪制出視覺與連貫性。
菜單中最近的帖子的鏈接樣式都是壹樣的，帖子之間使用淺色的水平線進行分割，與其他的菜單顯得很弱。字體始終保持壹致性。標題和正文部分的字體采用了對比，但是卻保持了網站整體的壹致性。
在內部的鏈接樣式就更加突出了，以明確之間的關系，雖然設計者可能有意使得瀏覽數不太明顯。另外標題是額外的壹部分，使它們不是正文的壹部分。
Mike Kus
Mike Kus的工作側重於不同的項目。頁面中大部分是空白的，但是又要註意如何使得每個元素能夠突出，與背景的文字形成對比，所以就使用墻面的紋理來顯現。
這個截屏中的畫面只有中間的使用不同的顏色，其他的留白處是相同的淺灰色。另外註意畫的框架相同，這也表明它們的***同之處。在這種情況下，它們各自代表著壹個項目。另外請註意，後面的背景都是相似性的，並通過磚的圖案來區別彼此，還有畫框的陰影，這樣就很容易區分什麽是背景了。
下面是Mike Kus的“關於”頁面，是邁克孤獨的形象形成唯壹的對比。藍色的按鈕“取得聯系”是唯壹的彩色元素，妳可能不會接觸邁克，而不知道該怎麽使用它，其實在頁面之間跳轉的按鈕也是藍色的。
邁克的名字被作為商標壹樣重復的顯示在主標題上，標題和背景之間的對比也是其他網頁各個部分的背景。分享菜單的按鈕都使用了同壹個圓形的造型。在最頂部的導航欄，都使用粗線條狀作為底部使用，並在菜單之間來回切換。字體也是壹致的，和正文壹樣都使用了serif無襯線字體，並且相互形成對比。
Electric Pulp
Electric Pulp的logo使用了中等大小的紅色圓圈。它能在整個頁面中形成很好的對比，值得註意的是頂部導航欄在指示當前頁面時顏色的相似。
整個網站的標題是最大的，粗體和全部大寫。標題與正文部分形成對比，前者使用非襯線，後者是襯線字體。
點擊進入“註意事項”這壹頁面，會看到頁面的背景色和主背景色對比於上壹頁和下壹頁的鏈接，使用背景顏色來區分不同的頁面。
這個網站上大多數的按鈕使用對比鮮明的紅色，當懸停狀態時是藍色。但是在“工作”頁面，第壹個按鈕卻反轉為由藍色，懸停時變味紅色。這是否是設計師故意為之就不清楚了，但是這種對比度得到了很好的保持。
Lowdi
最後壹個網站要考慮的是Lowdi，下面是主頁的截圖，請註意同時使用對比度和壹致性的顏色變化。
顏色可以清楚表明開始和結束的位置。和顏色的重復的地方造成整個頁面的節奏感。請註意如何通過黃色背景來突出元素，同時向下訪問者能集中看到產品的圖片。
對比度和相似性具有不同的功能，它們被用在不同程度的組合中。總會看到壹些其他但是又並不存在的，這樣更改壹個也意味著改變其他。
有些東西顯示是相同的，有些也是不同的，在視覺傳達中的第壹眼時，是觀眾獲得主要意義的基本方式。
對比度和相似的線索設計元素之間的差異會引起我們的註意，同理相似性的元素也會在其他元素上傳達相似的功能。
最終的目標是識別對比和類似層級關系：使得在壹組中的元素看起來彼此相似，但不同於另壹類似的元素。對比和類似的元素會使我們創建層次結構、規模和組合之間的平衡，這壹主題我們會在接下來的文章中提到。
/2014/09/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/