成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

格式塔原理中的接近性原則是如何影響排版設(shè)計的?

作者:陳子木
2017-11-17
8455

人腦是一個相當出色的數(shù)據(jù)處理器,背后所蘊藏的功能非常豐富,直到今天都還沒有得到充分的探索。

人腦是一個相當出色的數(shù)據(jù)處理器,背后所蘊藏的功能非常豐富,直到今天都還沒有得到充分的探索。對于需要對用戶體驗進行設(shè)計的設(shè)計師而言,了解人的認知能力和背后的機制,對于創(chuàng)建對用戶友好的產(chǎn)品,非常有幫助。

在諸多認知方式當中,格式塔原理是相當關(guān)鍵的一種,無論是日常生活還是UX設(shè)計當中,都是相當常見的一種認知機制。人們在感知復(fù)雜的對象的時候,會有意識或者無意識地將它們納入到一個有組織的系統(tǒng)當中,而不是簡單的視作為對象的集合,而這就是格式塔原理的基礎(chǔ)。格式塔原理會適用到不同層次的認知當中,有的是顯性的,有的則是隱性的,但是最有趣的是可視化的部分,也就是設(shè)計師借助這種原理所創(chuàng)造出來的各種設(shè)計。格式塔原理當中涵蓋了許多延伸出來的規(guī)則,今天我們要聊的,是其中的接近性原則。

接近性原則

我們常說的接近性原則,指的是對于彼此接近的事物、元素,傾向于認為它們是相關(guān)的一種認知傾向。所以,面對著數(shù)據(jù),我們會將數(shù)據(jù)和不同的對象按照各種將它們分組,組織到一起。對于設(shè)計師而言,這是一種非常有效的思路:如何按照大腦吸收消化數(shù)據(jù)的自然方式來組織信息。Andy Rutledge 是這樣用可視化的方式將接近性原則呈現(xiàn)了出來:

01.jpg

值得注意的是,通過研究和實驗驗證,接近性原則中距離的接近,比起色彩和形狀的近似,更容易被人所認知。即使是特征完全不同的元素,只要它們足夠靠近,人們也更加傾向于認為這些元素是相關(guān)的,就像下面的案例。

02.jpg

在包含大量不同內(nèi)容的用戶界面當中,接近性原則對于整個布局設(shè)計是有極大幫助的。合理運用接近性原則能夠讓用戶更輕松地獲取信息,感知內(nèi)容。很多時候,用戶并沒有準備好花費時間來學(xué)習(xí)復(fù)雜的界面,可以快速被感知和識別的信息,能更好的留住用戶。在此之后,才能讓用戶真正享受到網(wǎng)站或者APP給他們帶來的便利。這個邏輯是很清晰的。

一般而言,我們認為接近性原則在UI界面當中,有兩個應(yīng)用方向:一是應(yīng)用于排版和文案等元素和內(nèi)容,另一個是不同的內(nèi)容區(qū)塊和控件區(qū)塊。接下來所說的案例,會用到之前Tubik 團隊的設(shè)計和產(chǎn)品。

排版和文本

接近性原則在排版和文案當中著相當廣泛的應(yīng)用,甚至可以說是必須用到的規(guī)則。想要確保文本能夠被快速地閱讀,每行文本的長度,間距,段落的篇幅,空間距離的控制都會對其有所影響,就像讀者通常不會接受橫排超長的排版。同樣的,絕大多數(shù)的用戶在網(wǎng)頁上快速掃描的時候,會迅速地查看標題、副標題、高亮內(nèi)容和關(guān)鍵詞等因素,在對內(nèi)容感興趣的時候,才會點擊鏈接查看更多。這就是為什么設(shè)計師會盡量選擇可以快速感知且符合美學(xué)的界面設(shè)計。

留白通常也被稱為負空間,它也在排版布局過程中扮演著重要的角色。留白不僅可以強化排版布局的呼吸感,而且能夠用來區(qū)分不同的分組和區(qū)塊。

03.jpg

對于大塊的文本內(nèi)容,設(shè)計師可以用不同的方式來進行處理。比如設(shè)計師可以用留白來區(qū)分不同的段落,讓用戶在區(qū)分段落的情況下更好地理解其中的內(nèi)容。根據(jù)接近性原則,靠近的內(nèi)容會表達相近的意思,傳遞統(tǒng)一的想法,這樣一來,通過留白,段落和段落之間有了區(qū)分,內(nèi)容也就更加結(jié)構(gòu)化了。

04.gif

Architecture blog

這是一個建筑博客的界面概念設(shè)計。整個界面是按照接近性原理來進行構(gòu)建的,這也使得整個設(shè)計有了層次。首先,不同的文本被集中成小塊,各自呈現(xiàn)出不同的信息。其次,每一小塊內(nèi)容都靠近了相關(guān)的圖像,即使用戶是快速掃視,也能明白其中的相關(guān)性,從而更輕松的理解含義。而CTA按鈕和鏈接等元素則和文本元素相對距離較遠,但是又包含在同一個內(nèi)容區(qū)塊內(nèi),以此來呈現(xiàn)關(guān)系。設(shè)計師通過這樣的布局設(shè)計,激活了布局內(nèi)各個不同的功能區(qū)域,使得它們在結(jié)構(gòu)上足夠協(xié)調(diào)清晰,保持著和諧的感覺。所有的文本區(qū)塊都是圍繞著主題來設(shè)計,用戶可以一目了然地獲取信息。

這種設(shè)計方法還能延伸到目錄和列表的設(shè)計上去。因為接近性原則還是組織信息群組和區(qū)塊的高效工具。

05.jpg

06.jpg

Slopes Website

舉個例子,看看 Slopes 這個網(wǎng)站。頂部頁頭的幾個鏈接關(guān)系著網(wǎng)站導(dǎo)航交互,它們被放置在一起,距離其他元素也很遠,很明顯是一組。而從側(cè)面展開的漢堡菜單也類似,不同的鏈接互相靠近,組成不同的組。根據(jù)接近性原則,負空間增強了頁面的視覺層次結(jié)構(gòu)。

內(nèi)容區(qū)塊和控件

接近性原則的使用還可以延伸到布局當中已經(jīng)組織好的內(nèi)容區(qū)塊和控件上,它們可以不止是文本,還能是圖像,鏈接,圖標,控件和CTA元素,卡片,甚至其他的東西。設(shè)計師可以利用接近性原則組織出更加貼近人的認知體系的設(shè)計。

07.jpg

Jewellery Ecommerce App

以下面這個在線的珠寶購物APP為例,右邊的屏幕可以顯示產(chǎn)品卡片,其中包含了相關(guān)的一般數(shù)據(jù),包括顏色、寬度、重量和材質(zhì)等,通過相互靠近和線條的分割,從而讓人輕松分辨出清晰的分組,底部的文本內(nèi)容也自然而然地被視之為一個統(tǒng)一的內(nèi)容片段。用戶一瞥就能看清哪些是關(guān)鍵的數(shù)據(jù),哪些是詳細描述。

08.jpg

The Big Landscape

這個在線雜志的布局也是一個不錯的例子,同樣是倚靠接近性原則來實現(xiàn)清晰的布局。首先,整個網(wǎng)站的布局是嚴格按照網(wǎng)格系統(tǒng)來排布的,并沒有可見的線條框架來區(qū)分內(nèi)容。接近性原則讓用戶能夠一眼區(qū)分整個頁面的大體布局,頂部的導(dǎo)航鏈接明顯是一組,左側(cè)的列表條目都相互接近,是明顯的一組,而右側(cè)占據(jù)主要位置的文本內(nèi)容則和標題非??拷?,它們構(gòu)成了頁面的內(nèi)容主體。右上角的搜索和訂閱是相對次要的功能,但是也因其獨特的功能性,被分為一組。這種策略讓整個布局更加易于瀏覽,直觀,且易于導(dǎo)航。

雖然接近性原則是格式塔原理的一種使用方式,是非常簡單但是極其有效的一種設(shè)計策略和技巧,幫助用戶節(jié)省了大量的經(jīng)歷,根據(jù)人的認知習(xí)慣和心理模式來構(gòu)建界面。


0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號樓2層

版權(quán)信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號