<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          格式塔之接近原則,如何幫助信息易理解?

          2021-6-18    seo達人


          格式塔心理學誕生于20世紀初,指出人們的視覺感知具有整體性,并且總體大于個體的總和。

          也就是說,我們不會只看局部或者個體,也是需要重新組織所看到的視覺信息來理解世界。如果不這樣做的話,我們的大腦就會不堪重負。就像下圖我們看到的是一個笑臉,而不會說是31個點。格式塔心理學家將組織信息的方法抽象為格式塔原則。

          圖片

          格式塔原則是非常重要的設計理論,因為信息的組織也就意味著信息的接收和理解,而信息易理解正是設計師的核心任務。

          其中,格式塔原則中的接近原則是最常見的原則之一,下面我將提供一些例子來幫助大家理解這個原則。

           

          01.接近原則

          接近原則是指:將相關物體的物理位置靠近,這樣一來,相關的物體就會被看作凝聚為一體的一個組,而不是一堆彼此無關的片段。
          在左側的圖片中,你會看到一組圓圈;在右側的圖片中,你會看到三組圓圈。而它們唯一的區別就是圓圈之間的距離(接近度)。
          圖片
          接近原則比其他的格式塔原則更強。即使物體的形狀和顏色都不相同,只要距離更近,他們仍然會被認為是一組。因此,接近性原則至少是比相似性原則更強。
          圖片
          接近原則還能夠直接影響用戶的視覺動線,因為元素的物理距離不同,你會在左圖縱向瀏覽,看到的是列,右圖橫向瀏覽,看到的是行。
          圖片

           

          02.接近原則的重要性

          接近原則對許多設計師而言,絕對算一個沒有專門了解,但卻經常使用的原則。我認為,了解接近原則背后的原理總是有幫助的。
          比如,我們可以更好地進行設計推理并向其他人解釋設計問題。通過接近原則,可以快速地幫助開發同學理解,為什么卡片之間的水平距離是5px,而垂直距離是15px。
          并且當我們感覺設計稿奇怪卻不清楚原因時,格式塔原則也是一個很好的自查清單。

           

          03.印刷品案例

          字體與段落

          接近原則能夠直接影響文本閱讀,使用好接近原則可以幫助用戶更快速地理解文本。
          比如,標題前后需要設置更大的空間,哪一邊的內容距離標題更近,則會認為該內容和標題聯系緊密。
          行高是另一個例子,行與行之間的空隙必須大于單詞與單詞之間的空隙,并且空隙要足夠小才能形成一個緊密的段落。英文字母之間的間距也是如此,字母之間的間距要足夠寬,才可以區分出字母,但也要足夠窄,字母們才能夠形成單詞。
          圖片

           

          雜志布局

          盡管如今是電子信息的時代,但我們先來看看印刷品的布局仍是有意義的。印刷品的布局是我們進行網頁設計的基礎,它能夠幫助我們更輕松地理解這些原則。
          在雜志版面中,圖片分布在頁面的不同位置,我們只需要判斷文本距離哪一個圖片更近,便可以知道文本在描述哪一個圖片。
          圖片

           

          名片布局

          我們來看一下這兩個名片,左側名片上的每一項看上去都與其他項沒有任何關聯。這樣一來,我們不知道從哪里開始閱讀名片,也不知道何時才算結束。
          如果對名片的距離做一點調整,便形成了一個個組。我們會清楚的知道信息的閱讀順序,能夠更容易更快速地找到信息。另外,信息之間的空白也會變得更有組織。
          圖片

           

          04.網站案例

          現在的網站信息非常豐富,組織信息也變得更加重要。

           

          菜單

          菜單通常位于網頁的左側或者頂部。在頂部菜單中,菜單之間保證充分的留白更加符合現代審美。但一定要注意的是,要確保菜單與下方內容的距離,否則,很難辨別內容和菜單本身。

           

          項目組

          一個項目組通常是由圖片、標題和文本內容等不同部分組成,為了讓他們看起來是一個項目組,元素之間的距離不能太大。

           

          卡片

          卡片在如今的網頁中是一個常見元素,當有頁面中存在不同的卡片組時,一定要確保組內卡片的空間小于卡片組之間的空間。
          圖片

           

          表單

          表單同樣是一個常見頁面,比如注冊或登錄等都需要表單,針對表單我專門寫過兩篇文章,分別是組織內容和標簽細節。
          比如,在頂對齊表單中,我們可以通過調整元素之間的距離,明確那個標簽/描述屬于哪一個字段,這將會讓表單更易于使用。
          圖片

           

          列表

          每個app總會有一些列表相關的頁面,因此學習如何設計好它們是非常有價值的。
          列表設計的其中一個關鍵點就是,如何區分各項目。我們可以使用空間距離取代項目間的線條進行區分,這樣做可以減少視覺噪音。我們需要注意的是,確保項目之間的空間明顯大于組成元素的空間。
          圖片
          接近原則是一個非常棒的設計原則,可以幫助設計師組織信息。
          雖然許多設計師已經在無意識地使用著接近原則,但是如果進一步了解它,它或許是一個更加強大的設計工具。尤其是在復雜的屏幕中,我們更加需要接近原則幫助我們組織信息,減少其他元素的視覺干擾。

           

          原文地址:Medium

          譯文地址:栗子設計喵 (公眾號)

          作者:Lukas Oppermann

          譯者:栗子

          轉載請注明:學UI網》格式塔之接近原則,如何幫助信息易理解?


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合