秩序感在現(xiàn)代交互設(shè)計(jì)中應(yīng)用

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了秩序感在現(xiàn)代交互設(shè)計(jì)中應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

摘要：秩序感先于網(wǎng)頁(yè)設(shè)計(jì)，但也存在于網(wǎng)頁(yè)設(shè)計(jì)中，用途廣泛。針對(duì)生活與設(shè)計(jì)之間的秩序關(guān)系展開(kāi)闡述，并結(jié)合當(dāng)前教學(xué)現(xiàn)狀進(jìn)行分析，在理論研究的過(guò)程中，總結(jié)網(wǎng)頁(yè)實(shí)踐經(jīng)驗(yàn)，分析設(shè)計(jì)案例，從中發(fā)現(xiàn)秩序感的存在。并探討秩序感在網(wǎng)頁(yè)版式設(shè)計(jì)中的基本規(guī)律，了解用戶(hù)對(duì)于網(wǎng)頁(yè)秩序感的適應(yīng)性以及秩序感在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

關(guān)鍵詞：秩序感；版式設(shè)計(jì)；視覺(jué)美感；秩序化設(shè)計(jì)

0引言

我們按照自然規(guī)律生活，生物秩序是藝術(shù)秩序的基礎(chǔ)，有序的設(shè)計(jì)以自然秩序的自然滿(mǎn)足人們的審美和心理需求?？萍嫉陌l(fā)展使人們對(duì)于視覺(jué)的觀感有了更嚴(yán)格的要求，對(duì)版式設(shè)計(jì)有了更嚴(yán)格的要求，因此，秩序感的設(shè)計(jì)應(yīng)運(yùn)而生。秩序感的設(shè)計(jì)，強(qiáng)化了給用戶(hù)帶來(lái)的視覺(jué)感受，同時(shí)，接收視覺(jué)信息后更關(guān)注用戶(hù)行為反饋。秩序感在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用不僅增強(qiáng)了網(wǎng)頁(yè)的秩序性，還能讓用戶(hù)對(duì)網(wǎng)頁(yè)的內(nèi)容與構(gòu)成輕松的了解，增強(qiáng)了閱讀的便利性。

1源于自然與生活的設(shè)計(jì)秩序

人類(lèi)生活在社會(huì)規(guī)律中，與自然的關(guān)系密不可分。正如宗白華先生所說(shuō)：“中國(guó)人在天地的動(dòng)靜、四十的節(jié)律、晝夜的來(lái)復(fù)，生長(zhǎng)老死的綿延中，感到宇宙是生生而具條理的?！痹谠紩r(shí)代，人類(lèi)通過(guò)打磨和打磨石頭來(lái)創(chuàng)造遵循一定規(guī)律的圖案。隨著主觀意識(shí)的出現(xiàn)，原始人將形狀和大小相似的石頭和骨頭連接起來(lái)，創(chuàng)造出原始的裝飾品。這種有序的組合就是人們審美的心理結(jié)構(gòu)。許多生活規(guī)律都離不開(kāi)秩序感。城市動(dòng)脈兩側(cè)的摩天大樓，等距的樓梯等。人們?cè)谶@個(gè)社會(huì)環(huán)境中創(chuàng)造秩序，根據(jù)各種需求創(chuàng)造美好的秩序。這種美的秩序，藝術(shù)的秩序，影響著我們的生活，提高了我們的生活質(zhì)量和理想主義的領(lǐng)域。各種秩序豐富了我們的生活，同時(shí)也以豐富多彩的方式豐富呈現(xiàn)出了藝術(shù)。

2秩序感在網(wǎng)頁(yè)版式設(shè)計(jì)中的產(chǎn)生

網(wǎng)頁(yè)版式是根據(jù)科學(xué)和藝術(shù)的原則，在網(wǎng)頁(yè)畫(huà)面中進(jìn)行文本和圖形的排列。在網(wǎng)頁(yè)中，圖形和文本的布局產(chǎn)生了秩序感，它不但符合人類(lèi)的視覺(jué)審美規(guī)律，并且符合秩序美感的規(guī)律。網(wǎng)頁(yè)這個(gè)概念出現(xiàn)也不過(guò)三十年的時(shí)間，版式風(fēng)格更是豐富多彩，網(wǎng)頁(yè)版式中最常見(jiàn)的的三種風(fēng)格，即古典風(fēng)格、網(wǎng)格風(fēng)格、自由風(fēng)格。古典風(fēng)格：古典風(fēng)格的版面是嚴(yán)格的遵循對(duì)稱(chēng)平衡的，并且遵循統(tǒng)一的規(guī)格與尺寸，各元素之間的間距統(tǒng)一，給人以?xún)?yōu)雅精美的心理感受。網(wǎng)格風(fēng)格：網(wǎng)格風(fēng)格的版面采用大小比例相同的網(wǎng)格為版面基礎(chǔ)，提供了標(biāo)準(zhǔn)的尺寸與規(guī)格，按照網(wǎng)格來(lái)排列文章、標(biāo)題、圖片等。它使網(wǎng)頁(yè)看起老更有秩序，一直到現(xiàn)在，它仍然是現(xiàn)在設(shè)計(jì)中廣泛適使用的一種網(wǎng)頁(yè)排版方式。自由風(fēng)格：自由風(fēng)格的網(wǎng)頁(yè)版式布局是不固定的，網(wǎng)頁(yè)中的各種元素自由編排，這種布局注重空間與留白、正負(fù)形之間的關(guān)系，布局豐富多樣。從古典風(fēng)格注重具有裝飾性的線條，到網(wǎng)格風(fēng)格簡(jiǎn)介與功能為首的理念，再到自由風(fēng)格注重豐富又多樣的布局，秩序感的概念與其相應(yīng)的原則越來(lái)越多的融入到網(wǎng)頁(yè)版式設(shè)計(jì)中。

3秩序感在網(wǎng)頁(yè)版式設(shè)計(jì)中的存在與特征

3.1網(wǎng)頁(yè)版式中秩序感的規(guī)律性

網(wǎng)頁(yè)的設(shè)計(jì)風(fēng)格是由文字、圖像以及色彩所決定的，表現(xiàn)出來(lái)有規(guī)律的秩序感。相對(duì)來(lái)說(shuō)，具有一定代表性的是北歐簡(jiǎn)約風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)，與波普式自由設(shè)計(jì)風(fēng)格。斯堪的納維亞簡(jiǎn)約網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格布局遵循機(jī)械化的幾何順序，并以嚴(yán)格和標(biāo)準(zhǔn)化的方式組織元素?？梢钥吹?，布局具有嚴(yán)格的“骨架”功能，強(qiáng)調(diào)理性秩序。流行風(fēng)格的自由設(shè)計(jì)風(fēng)格強(qiáng)調(diào)傳達(dá)網(wǎng)頁(yè)的個(gè)性，看似隨意的擺放其實(shí)遵循一定的規(guī)則。圖1是U2Lighting的網(wǎng)站首頁(yè)，該產(chǎn)品走的是高端設(shè)計(jì)風(fēng)格，所以在網(wǎng)頁(yè)風(fēng)格上選擇了北歐簡(jiǎn)約的設(shè)計(jì)風(fēng)格，采用的左右對(duì)稱(chēng)式構(gòu)圖，導(dǎo)航欄的字體使用了和logo相同的襯線體，統(tǒng)一的間距，黑白灰為主要色調(diào)，這樣既突出產(chǎn)品的特征也創(chuàng)造出了神秘的氣氛，使網(wǎng)頁(yè)傳達(dá)的產(chǎn)品信息更加直觀。

3.2網(wǎng)頁(yè)版式中的平衡感

網(wǎng)頁(yè)中版式秩序的最基本的特征就是平衡感，單調(diào)的網(wǎng)頁(yè)很難吸引用戶(hù)的視線。從網(wǎng)頁(yè)版式的角度看，理性的布局會(huì)使這種平衡感更加明顯。這種平衡感是通過(guò)文字、圖形、色彩相互組合、搭配體現(xiàn)出來(lái)的。自由、隨性的網(wǎng)頁(yè)版式其平衡性是體現(xiàn)在適度的對(duì)網(wǎng)頁(yè)版式進(jìn)行改變。圖2是Lumix相機(jī)的首頁(yè)，版式采用的中規(guī)中矩的左右構(gòu)圖對(duì)稱(chēng)構(gòu)圖，相機(jī)處于畫(huà)面的正中央，相機(jī)周?chē)M(jìn)行了大量的留白，提升了頁(yè)面的呼吸感，色彩上采用經(jīng)典的黑白色，背景添加了底紋，豐富畫(huà)面的同時(shí)又使網(wǎng)頁(yè)具有靈動(dòng)性。整個(gè)網(wǎng)頁(yè)層次明確、產(chǎn)品突出，提升了用戶(hù)對(duì)頁(yè)面的視覺(jué)好感。

4秩序感在網(wǎng)頁(yè)版式設(shè)計(jì)中的應(yīng)用

秩序感的原則是網(wǎng)頁(yè)版式設(shè)計(jì)中條理性的來(lái)源，條理性可以使用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)沿著一定的順序閱讀。如圖3所示，用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)，習(xí)慣以從上到下的順序，然后從左到右進(jìn)行瀏覽。所以在進(jìn)行設(shè)計(jì)工作的時(shí)候，最關(guān)鍵的信息基本上都是放在畫(huà)面的頂部或者左邊，通常這個(gè)部分都是網(wǎng)頁(yè)的導(dǎo)航欄，一般政府或者企業(yè)類(lèi)的網(wǎng)頁(yè)會(huì)使用這種版式。圖4是Komosition的首頁(yè)，用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)首先會(huì)看到最具有視覺(jué)沖擊力的信息，就是畫(huà)面中的表盤(pán)，這也是頁(yè)面?zhèn)鬟_(dá)的最重要的元素，秩序感增強(qiáng)了它的視覺(jué)效果。隨著視覺(jué)引導(dǎo)線進(jìn)性移動(dòng)，可以使用戶(hù)更有興趣的去瀏覽網(wǎng)頁(yè)，也使網(wǎng)頁(yè)中的版式更具有條理性與針對(duì)性。圖5是MOTIVE的首頁(yè)，網(wǎng)頁(yè)采用了對(duì)角式構(gòu)圖，運(yùn)用了經(jīng)典的F式布局，舍棄了網(wǎng)頁(yè)普遍使用的左右對(duì)稱(chēng)式構(gòu)圖，將文字與圖片進(jìn)行了中心對(duì)稱(chēng)式放置，在擁有秩序的同時(shí)也使整個(gè)網(wǎng)頁(yè)的畫(huà)面充滿(mǎn)藝術(shù)的氛圍。同時(shí)，這種F式布局的版式也尊崇從左到右、從上到下的瀏覽順序，有著非常強(qiáng)的條理性，便于用戶(hù)的瀏覽與交互使用。

5格式塔理論在網(wǎng)頁(yè)版式設(shè)計(jì)中的應(yīng)用

格式塔理論是西方心理學(xué)的重要理論之一，對(duì)現(xiàn)代的網(wǎng)頁(yè)設(shè)計(jì)有非常大的影響。了解用戶(hù)主觀意識(shí)，不僅可以幫助設(shè)計(jì)師設(shè)計(jì)出更適合用戶(hù)的網(wǎng)頁(yè)，并且還可以使畫(huà)面中的每個(gè)元素、各種布局都有嚴(yán)謹(jǐn)?shù)睦碚撘罁?jù)支撐。庫(kù)爾特·考夫卡在《格式塔心理學(xué)原理》中就提出“眼腦作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程，正式通過(guò)這一過(guò)程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體?！焙?jiǎn)單來(lái)說(shuō)，我們的主觀意識(shí)會(huì)自動(dòng)的將復(fù)雜或相同元素簡(jiǎn)化為一個(gè)易于閱讀的整體，用格式塔理論設(shè)計(jì)網(wǎng)頁(yè)，可以提高設(shè)計(jì)師的工作效率，同時(shí)也可以營(yíng)造網(wǎng)頁(yè)的秩序感。格式塔理論是網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的最多的心理學(xué)理論，主要包括：相似原則、接近原則和閉合原則。相似原則：人的潛意識(shí)會(huì)將視線范圍內(nèi)的一些相似元素看做成一個(gè)整體，甚至都不需要文字提示，我們的主觀意識(shí)會(huì)把相同的元素整合。在網(wǎng)頁(yè)版式設(shè)計(jì)中，這個(gè)是被經(jīng)常使用的原則，如圖6搜狐視頻的橫向?qū)Ш綑?，為了區(qū)分一級(jí)導(dǎo)航和二級(jí)導(dǎo)航欄，分別使用了紅底白字和白底黑字。如圖7淘寶的橫向?qū)Ш綑冢疤熵?、聚劃算、二手”這三個(gè)分類(lèi)則使用了加大的橙色字體，與其它的分類(lèi)進(jìn)行區(qū)分，雖然在同一導(dǎo)航欄，但通過(guò)這個(gè)方法使三個(gè)分類(lèi)區(qū)分，也是整個(gè)網(wǎng)頁(yè)的層次得到了增強(qiáng)。接近原則：各元素之間的相對(duì)距離會(huì)影響我們感知他們是否組織在一起，接近的物體會(huì)被我們認(rèn)為是一個(gè)整體。如圖8所示，沒(méi)有什么標(biāo)注，人們的主觀意識(shí)就是把它當(dāng)作是左右兩組。圖9是一個(gè)在線雜志的網(wǎng)頁(yè)，這是一個(gè)典型的接近原則的案例。整個(gè)網(wǎng)頁(yè)的版式嚴(yán)謹(jǐn)?shù)陌凑站W(wǎng)格系統(tǒng)進(jìn)行布局，頁(yè)面中沒(méi)有出現(xiàn)線條或者框架來(lái)劃分，但通過(guò)接近原則可以看出網(wǎng)頁(yè)被劃分成了五組。頂部導(dǎo)航欄與logo是一組，左側(cè)列表文字相互接近、間距相同很明顯是一組，右側(cè)大面積的圖文有著一定的關(guān)系是一組，右上角的訂閱按鈕雖是次要區(qū)域，但他依然是網(wǎng)頁(yè)中不可缺少的，也是一組，其它的例如網(wǎng)站鏈接、底部按鈕也是一組。接近原則使網(wǎng)頁(yè)更流暢精準(zhǔn)的傳達(dá)信息，同時(shí)也增強(qiáng)了畫(huà)面的秩序美感。閉合原則：當(dāng)視覺(jué)元素不是完整的整體時(shí)，卻仍然能被人識(shí)別出來(lái)，這種情況在圖標(biāo)設(shè)計(jì)中應(yīng)用的比較多。如圖10實(shí)際上是三條線段，但人們會(huì)主觀的認(rèn)為他組合形成了一個(gè)三角形。

6秩序感對(duì)網(wǎng)頁(yè)版式設(shè)計(jì)的啟示

秩序感來(lái)源于自然界，而秩序感先于網(wǎng)頁(yè)布局的設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)中的秩序感是有一定規(guī)律的。網(wǎng)頁(yè)布局豐富多樣，但都有一定的規(guī)律。常用的網(wǎng)頁(yè)布局排序方法主要有對(duì)比、留白、平衡等技術(shù)。對(duì)比度可以增強(qiáng)圖像效果，突出重要的視覺(jué)元素。留空可以簡(jiǎn)化圖像的復(fù)雜性，增加空間感。平衡是根據(jù)特定規(guī)則放置每個(gè)視覺(jué)元素以匹配顏色和形狀。它起到溝通的作用，并賦予網(wǎng)頁(yè)一定的順序。網(wǎng)頁(yè)的整體美感是通過(guò)設(shè)計(jì)、前端、配色、媒體和網(wǎng)頁(yè)呈現(xiàn)的內(nèi)容來(lái)實(shí)現(xiàn)的。各方面的不足指出都會(huì)影響整個(gè)網(wǎng)頁(yè)的秩序和美觀。設(shè)計(jì)是網(wǎng)頁(yè)上的一個(gè)非常重要的環(huán)節(jié)，它是在網(wǎng)頁(yè)上傳達(dá)信息的最重要途徑之一。根據(jù)不同網(wǎng)站的屬性，設(shè)計(jì)相應(yīng)的網(wǎng)頁(yè)版式布局，可以更好地傳達(dá)信息，提高網(wǎng)站的視覺(jué)效率，促進(jìn)人機(jī)交互的發(fā)展。

7結(jié)束語(yǔ)

秩序感在網(wǎng)頁(yè)信息的傳達(dá)過(guò)程中起到了一定的保障作用，因此，將網(wǎng)頁(yè)設(shè)計(jì)都呈現(xiàn)出秩序感對(duì)網(wǎng)頁(yè)信息的傳達(dá)至關(guān)重要。在當(dāng)今社會(huì)，秩序感的設(shè)計(jì)已經(jīng)與網(wǎng)頁(yè)設(shè)計(jì)融為一體，而在網(wǎng)頁(yè)信息平臺(tái)上，秩序感已經(jīng)成為網(wǎng)頁(yè)進(jìn)行信息傳達(dá)的基礎(chǔ)設(shè)計(jì)法則。因此，網(wǎng)頁(yè)版式設(shè)計(jì)中的秩序感尤為重要，它不僅符合人類(lèi)視覺(jué)運(yùn)動(dòng)的一系列常規(guī)，同時(shí)，能帶給用戶(hù)又優(yōu)質(zhì)的交互體驗(yàn)感。

作者:張宇 單位:中國(guó)礦業(yè)大學(xué)建筑與設(shè)計(jì)學(xué)院