<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          2022-3-23    周周

          什么是格式塔原理 (Gestalt)


          格式塔心理學(xué)誕生于 1912 年,是由德國心理學(xué)家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現(xiàn)象并對它們編定了目錄。其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的:我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu),并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區(qū)域。「形狀」和「圖形」在德語中是 Gestalt,因此這些理論也稱作視覺感知的格式塔原理。

          格式塔創(chuàng)始人總結(jié)的七個(gè)基本原則:

          • 接近性原則
          • 相似性原則
          • 連續(xù)性原則
          • 閉合性原則
          • 簡單對稱性原則
          • 主體與背景原則
          • 共同命運(yùn)原則
          1. 接近性原則

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          在上圖的兩個(gè)圖形組合中,我們可以看出「A」中的圓角矩形給我們的視覺效果是以橫向的「行」為單位進(jìn)行組合,而「B」中更像是以「列」為單位進(jìn)行組合。因「A」每兩個(gè)圓角矩形之間的間距橫向 20px 大于豎向30px,而「B」與之相反所以會產(chǎn)生這樣的視覺效果。距離近的關(guān)聯(lián)親密,距離遠(yuǎn)的就各自獨(dú)立分組這就是格式塔理論中的接近性原則。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          在視覺效果上,圖上單獨(dú)的特征已經(jīng)不是特別明顯了,替換而來的是接近組合形成了層次分明的整體。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          我們在做版式設(shè)計(jì)時(shí)會把圖文信息以不同形狀、大小、顏色分組排列,在視覺上營造視覺層次,便于用戶閱讀。如上圖元素以組的形式分布在海報(bào)中的各個(gè)位置,形成不同大小的視覺層次,讓我們能夠依次看到主要信息、次要信息、輔助信息等內(nèi)容。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          上圖微信的發(fā)現(xiàn)頁面中,把功能分組用戶,硬性分割每組是一個(gè)整體。而 App store 中的「探索更多」和「為你推薦」和下方內(nèi)容距離更近,在中間沒有明確分割線的情況下進(jìn)行軟性分割,用戶也會知道他們和下方內(nèi)容是一個(gè)整體。

          2. 相似性原則

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          人們在觀察事物的過程中經(jīng)常會將相近或者相似的東西自動的合并在一起,如上圖中我們會在視覺中默認(rèn)分為「灰-粉-灰」三部分。人們在感知事物過程中會形成的心理模型,相似的物體默認(rèn)歸屬于一組,這就是格式塔的相似性原則。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          上圖中的郵件界面就是格式塔相似性原則的體現(xiàn)。我們在瀏覽的過程中,會從心理上默認(rèn)把縱向的郵件圖標(biāo)、發(fā)件人、郵箱標(biāo)題等自動歸為一類。

          相關(guān)閱讀:

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          因擁有共同的視覺元素具有聯(lián)系性,上圖是以「圖片+標(biāo)題+作者」為一個(gè)模塊,從而在視覺上我們把界面分成一個(gè)個(gè)組類。

          3. 連續(xù)性原則

          因人眼的視覺會偏向連續(xù)的形式,使閱讀上更具有連貫性,在觀察事物的過程中會情不自禁地形成一種視覺延續(xù)的感受,這就是格式塔的連續(xù)性原則。

          上圖中 IBM 的 logo,我們之所以能看出來是 IBM,就是因?yàn)槲覀冊谝曈X上看到的不是離散的線條,而是連續(xù)的圖形。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」就是我們在閱讀過程中形成的視覺延續(xù)的體現(xiàn),有橫向或縱向的閱讀模式。因此,在設(shè)計(jì)中有效的對齊可以減弱用戶的視覺疲勞感,不打破視覺的連續(xù)性。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          4. 閉合性原則

          閉合性與連續(xù)性比較相似。真實(shí)的圖形是非閉合的,但在視覺上我們會自動把空白填滿形成封閉的空間,這就是格式塔的閉合性原則。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          圖中 IBM 的 logo,我們的視覺會將非閉合事物進(jìn)行閉合處理。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」中我們的視覺系統(tǒng)自動的嘗試將敞開的圖形封閉起來,從而將其感知為完整的物體而不是分散的碎片。

          5. 簡化對稱性原則

          在觀察事物過程中,我們第一印象更傾向于簡單而且對稱的圖形,這就是格式塔的簡化對稱性原則。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」中是屬于人類視覺的自然感知,①屬于一種視覺經(jīng)驗(yàn)第一時(shí)間感知,而②和③屬于視覺的強(qiáng)烈感知,是通過分析和解析。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」就是格式塔的簡化對稱性的體現(xiàn),用戶在瀏覽的的過程中有效減輕了閱讀壓力。

          6. 主體與背景原則

          當(dāng)小圖形重疊大圖形之上,我們的視覺會傾向于將小圖形歸為主體,大色塊為背景,這就是格式塔中的主體與背景原則。如「下圖」。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」就是利用了主體與背景的原理,體現(xiàn)了圖形之間的共生關(guān)系,凸顯主體與背景。

          7. 共同命運(yùn)原則

          共同命運(yùn)是為運(yùn)動物體的體現(xiàn),與接近性原理和相似性原理相像,都與我們的視覺系統(tǒng)會有著給對象進(jìn)行分組來感知事物的傾向相關(guān),但是一起運(yùn)動的物體會被感知為屬于同一組或是彼此相關(guān)這樣的一種視覺現(xiàn)象,這就是格式塔中的共同命運(yùn)原則。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」選中的圖形 02、07、08、12、13、14、21、22,我們在處理的過程當(dāng)中,會默認(rèn)把它們歸為一類。

          用超多案例,幫你學(xué)會經(jīng)典格式塔理論的7個(gè)視覺原則

          「上圖」格式塔理論中共同命運(yùn)涉及到運(yùn)動的物體,iPhone 中刪除應(yīng)用時(shí)候,左上角都有一個(gè)刪除的標(biāo)記,在處理的過程中,要么刪除,要么保留,這就是共同命運(yùn)原則。



          總結(jié)


          格式塔原則的體現(xiàn)在設(shè)計(jì)中比比皆是,我們只有更好的利用視覺空間設(shè)計(jì)作品,減少設(shè)計(jì)的復(fù)雜性,盡量保持格式塔原則的完整,用戶才能更好更容易地理解使用我們的產(chǎn)品。





          文章來源:優(yōu)設(shè)網(wǎng) 作者:土撥鼠

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

          藍(lán)藍(lán)設(shè)計(jì)www.sdgs6788.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


          日歷

          鏈接

          個(gè)人資料

          存檔

          午夜视频久久久久一区 | 国产精品免费看久久久| 亚洲中文字幕伊人久久无码 | 国产精品久久久99| 久久久中文字幕| 色偷偷888欧美精品久久久| WWW婷婷AV久久久影片| 久久婷婷五月综合97色一本一本| 亚洲午夜久久久久久久久久 | 97久久精品人人做人人爽| 国产精品一区二区久久国产| 九九久久自然熟的香蕉图片| 久久er99热精品一区二区| 久久发布国产伦子伦精品| 婷婷综合久久中文字幕| 久久久久亚洲AV成人网人人网站 | 亚洲国产精品成人久久蜜臀 | 久久久午夜精品福利内容| 欧美精品乱码99久久蜜桃| 久久无码AV一区二区三区| 无码人妻久久一区二区三区免费| 久久99国产综合精品女同| 99久久婷婷国产综合精品草原| 久久国产视频网| 久久AV高潮AV无码AV| 狠狠狠色丁香婷婷综合久久五月| 国产精品一区二区久久精品无码 | 伊人久久国产免费观看视频 | 久久国产精品视频| 精品久久久中文字幕人妻 | 性做久久久久久久久| 久久久久久夜精品精品免费啦| 日本免费久久久久久久网站| 久久高清一级毛片| 亚洲av伊人久久综合密臀性色| 99久久国产综合精品网成人影院| 色99久久久久高潮综合影院| 国产精品久久久久久久久鸭| 久久精品中文字幕大胸| 蜜桃麻豆www久久| 久久天堂AV综合合色蜜桃网|