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

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

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

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

0引言

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

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

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

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

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

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

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

網(wǎng)頁的設(shè)計(jì)風(fēng)格是由文字、圖像以及色彩所決定的，表現(xiàn)出來有規(guī)律的秩序感。相對(duì)來說，具有一定代表性的是北歐簡約風(fēng)格的網(wǎng)頁設(shè)計(jì)，與波普式自由設(shè)計(jì)風(fēng)格。斯堪的納維亞簡約網(wǎng)頁設(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)頁的個(gè)性，看似隨意的擺放其實(shí)遵循一定的規(guī)則。圖1是U2Lighting的網(wǎng)站首頁，該產(chǎn)品走的是高端設(shè)計(jì)風(fēng)格，所以在網(wǎng)頁風(fēng)格上選擇了北歐簡約的設(shè)計(jì)風(fēng)格，采用的左右對(duì)稱式構(gòu)圖，導(dǎo)航欄的字體使用了和logo相同的襯線體，統(tǒng)一的間距，黑白灰為主要色調(diào)，這樣既突出產(chǎn)品的特征也創(chuàng)造出了神秘的氣氛，使網(wǎng)頁傳達(dá)的產(chǎn)品信息更加直觀。

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

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

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

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

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

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

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

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

7結(jié)束語

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

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