秩序感在現(xiàn)代交互設(shè)計中應(yīng)用
前言：想要寫出一篇引人入勝的文章？我們特意為您整理了秩序感在現(xiàn)代交互設(shè)計中應(yīng)用范文，希望能給你帶來靈感和參考，敬請閱讀。
摘要：秩序感先于網(wǎng)頁設(shè)計，但也存在于網(wǎng)頁設(shè)計中，用途廣泛。針對生活與設(shè)計之間的秩序關(guān)系展開闡述，并結(jié)合當(dāng)前教學(xué)現(xiàn)狀進行分析，在理論研究的過程中，總結(jié)網(wǎng)頁實踐經(jīng)驗，分析設(shè)計案例，從中發(fā)現(xiàn)秩序感的存在。并探討秩序感在網(wǎng)頁版式設(shè)計中的基本規(guī)律，了解用戶對于網(wǎng)頁秩序感的適應(yīng)性以及秩序感在網(wǎng)頁設(shè)計中的應(yīng)用。
關(guān)鍵詞：秩序感；版式設(shè)計；視覺美感；秩序化設(shè)計
0引言
我們按照自然規(guī)律生活，生物秩序是藝術(shù)秩序的基礎(chǔ)，有序的設(shè)計以自然秩序的自然滿足人們的審美和心理需求?？萍嫉陌l(fā)展使人們對于視覺的觀感有了更嚴(yán)格的要求，對版式設(shè)計有了更嚴(yán)格的要求，因此，秩序感的設(shè)計應(yīng)運而生。秩序感的設(shè)計，強化了給用戶帶來的視覺感受，同時，接收視覺信息后更關(guān)注用戶行為反饋。秩序感在網(wǎng)頁設(shè)計中的應(yīng)用不僅增強了網(wǎng)頁的秩序性，還能讓用戶對網(wǎng)頁的內(nèi)容與構(gòu)成輕松的了解，增強了閱讀的便利性。
1源于自然與生活的設(shè)計秩序
人類生活在社會規(guī)律中，與自然的關(guān)系密不可分。正如宗白華先生所說：“中國人在天地的動靜、四十的節(jié)律、晝夜的來復(fù)，生長老死的綿延中，感到宇宙是生生而具條理的?！痹谠紩r代，人類通過打磨和打磨石頭來創(chuàng)造遵循一定規(guī)律的圖案。隨著主觀意識的出現(xiàn)，原始人將形狀和大小相似的石頭和骨頭連接起來，創(chuàng)造出原始的裝飾品。這種有序的組合就是人們審美的心理結(jié)構(gòu)。許多生活規(guī)律都離不開秩序感。城市動脈兩側(cè)的摩天大樓，等距的樓梯等。人們在這個社會環(huán)境中創(chuàng)造秩序，根據(jù)各種需求創(chuàng)造美好的秩序。這種美的秩序，藝術(shù)的秩序，影響著我們的生活，提高了我們的生活質(zhì)量和理想主義的領(lǐng)域。各種秩序豐富了我們的生活，同時也以豐富多彩的方式豐富呈現(xiàn)出了藝術(shù)。
2秩序感在網(wǎng)頁版式設(shè)計中的產(chǎn)生
網(wǎng)頁版式是根據(jù)科學(xué)和藝術(shù)的原則，在網(wǎng)頁畫面中進行文本和圖形的排列。在網(wǎng)頁中，圖形和文本的布局產(chǎn)生了秩序感，它不但符合人類的視覺審美規(guī)律，并且符合秩序美感的規(guī)律。網(wǎng)頁這個概念出現(xiàn)也不過三十年的時間，版式風(fēng)格更是豐富多彩，網(wǎng)頁版式中最常見的的三種風(fēng)格，即古典風(fēng)格、網(wǎng)格風(fēng)格、自由風(fēng)格。古典風(fēng)格：古典風(fēng)格的版面是嚴(yán)格的遵循對稱平衡的，并且遵循統(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è)計中廣泛適使用的一種網(wǎng)頁排版方式。自由風(fēng)格：自由風(fēng)格的網(wǎng)頁版式布局是不固定的，網(wǎng)頁中的各種元素自由編排，這種布局注重空間與留白、正負形之間的關(guān)系，布局豐富多樣。從古典風(fēng)格注重具有裝飾性的線條，到網(wǎng)格風(fēng)格簡介與功能為首的理念，再到自由風(fēng)格注重豐富又多樣的布局，秩序感的概念與其相應(yīng)的原則越來越多的融入到網(wǎng)頁版式設(shè)計中。
3秩序感在網(wǎng)頁版式設(shè)計中的存在與特征
3.1網(wǎng)頁版式中秩序感的規(guī)律性
網(wǎng)頁的設(shè)計風(fēng)格是由文字、圖像以及色彩所決定的，表現(xiàn)出來有規(guī)律的秩序感。相對來說，具有一定代表性的是北歐簡約風(fēng)格的網(wǎng)頁設(shè)計，與波普式自由設(shè)計風(fēng)格。斯堪的納維亞簡約網(wǎng)頁設(shè)計風(fēng)格布局遵循機械化的幾何順序，并以嚴(yán)格和標(biāo)準(zhǔn)化的方式組織元素。可以看到，布局具有嚴(yán)格的“骨架”功能，強調(diào)理性秩序。流行風(fēng)格的自由設(shè)計風(fēng)格強調(diào)傳達網(wǎng)頁的個性，看似隨意的擺放其實遵循一定的規(guī)則。圖1是U2Lighting的網(wǎng)站首頁，該產(chǎn)品走的是高端設(shè)計風(fēng)格，所以在網(wǎng)頁風(fēng)格上選擇了北歐簡約的設(shè)計風(fēng)格，采用的左右對稱式構(gòu)圖，導(dǎo)航欄的字體使用了和logo相同的襯線體，統(tǒng)一的間距，黑白灰為主要色調(diào)，這樣既突出產(chǎn)品的特征也創(chuàng)造出了神秘的氣氛，使網(wǎng)頁傳達的產(chǎn)品信息更加直觀。
3.2網(wǎng)頁版式中的平衡感
網(wǎng)頁中版式秩序的最基本的特征就是平衡感，單調(diào)的網(wǎng)頁很難吸引用戶的視線。從網(wǎng)頁版式的角度看，理性的布局會使這種平衡感更加明顯。這種平衡感是通過文字、圖形、色彩相互組合、搭配體現(xiàn)出來的。自由、隨性的網(wǎng)頁版式其平衡性是體現(xiàn)在適度的對網(wǎng)頁版式進行改變。圖2是Lumix相機的首頁，版式采用的中規(guī)中矩的左右構(gòu)圖對稱構(gòu)圖，相機處于畫面的正中央，相機周圍進行了大量的留白，提升了頁面的呼吸感，色彩上采用經(jīng)典的黑白色，背景添加了底紋，豐富畫面的同時又使網(wǎng)頁具有靈動性。整個網(wǎng)頁層次明確、產(chǎn)品突出，提升了用戶對頁面的視覺好感。
4秩序感在網(wǎng)頁版式設(shè)計中的應(yīng)用
秩序感的原則是網(wǎng)頁版式設(shè)計中條理性的來源，條理性可以使用戶在瀏覽網(wǎng)頁時沿著一定的順序閱讀。如圖3所示，用戶在瀏覽網(wǎng)頁時，習(xí)慣以從上到下的順序，然后從左到右進行瀏覽。所以在進行設(shè)計工作的時候，最關(guān)鍵的信息基本上都是放在畫面的頂部或者左邊，通常這個部分都是網(wǎng)頁的導(dǎo)航欄，一般政府或者企業(yè)類的網(wǎng)頁會使用這種版式。圖4是Komosition的首頁，用戶在瀏覽網(wǎng)頁時首先會看到最具有視覺沖擊力的信息，就是畫面中的表盤，這也是頁面?zhèn)鬟_的最重要的元素，秩序感增強了它的視覺效果。隨著視覺引導(dǎo)線進性移動，可以使用戶更有興趣的去瀏覽網(wǎng)頁，也使網(wǎng)頁中的版式更具有條理性與針對性。圖5是MOTIVE的首頁，網(wǎng)頁采用了對角式構(gòu)圖，運用了經(jīng)典的F式布局，舍棄了網(wǎng)頁普遍使用的左右對稱式構(gòu)圖，將文字與圖片進行了中心對稱式放置，在擁有秩序的同時也使整個網(wǎng)頁的畫面充滿藝術(shù)的氛圍。同時，這種F式布局的版式也尊崇從左到右、從上到下的瀏覽順序，有著非常強的條理性，便于用戶的瀏覽與交互使用。
5格式塔理論在網(wǎng)頁版式設(shè)計中的應(yīng)用
格式塔理論是西方心理學(xué)的重要理論之一，對現(xiàn)代的網(wǎng)頁設(shè)計有非常大的影響。了解用戶主觀意識，不僅可以幫助設(shè)計師設(shè)計出更適合用戶的網(wǎng)頁，并且還可以使畫面中的每個元素、各種布局都有嚴(yán)謹?shù)睦碚撘罁?jù)支撐。庫爾特·考夫卡在《格式塔心理學(xué)原理》中就提出“眼腦作用是一個不斷組織、簡化、統(tǒng)一的過程，正式通過這一過程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體?！焙唵蝸碚f，我們的主觀意識會自動的將復(fù)雜或相同元素簡化為一個易于閱讀的整體，用格式塔理論設(shè)計網(wǎng)頁，可以提高設(shè)計師的工作效率，同時也可以營造網(wǎng)頁的秩序感。格式塔理論是網(wǎng)頁設(shè)計中運用的最多的心理學(xué)理論，主要包括：相似原則、接近原則和閉合原則。相似原則：人的潛意識會將視線范圍內(nèi)的一些相似元素看做成一個整體，甚至都不需要文字提示，我們的主觀意識會把相同的元素整合。在網(wǎng)頁版式設(shè)計中，這個是被經(jīng)常使用的原則，如圖6搜狐視頻的橫向?qū)Ш綑?，為了區(qū)分一級導(dǎo)航和二級導(dǎo)航欄，分別使用了紅底白字和白底黑字。如圖7淘寶的橫向?qū)Ш綑?，“天貓、聚劃算、二手”這三個分類則使用了加大的橙色字體，與其它的分類進行區(qū)分，雖然在同一導(dǎo)航欄，但通過這個方法使三個分類區(qū)分，也是整個網(wǎng)頁的層次得到了增強。接近原則：各元素之間的相對距離會影響我們感知他們是否組織在一起，接近的物體會被我們認為是一個整體。如圖8所示，沒有什么標(biāo)注，人們的主觀意識就是把它當(dāng)作是左右兩組。圖9是一個在線雜志的網(wǎng)頁，這是一個典型的接近原則的案例。整個網(wǎng)頁的版式嚴(yán)謹?shù)陌凑站W(wǎng)格系統(tǒng)進行布局，頁面中沒有出現(xiàn)線條或者框架來劃分，但通過接近原則可以看出網(wǎng)頁被劃分成了五組。頂部導(dǎo)航欄與logo是一組，左側(cè)列表文字相互接近、間距相同很明顯是一組，右側(cè)大面積的圖文有著一定的關(guān)系是一組，右上角的訂閱按鈕雖是次要區(qū)域，但他依然是網(wǎng)頁中不可缺少的，也是一組，其它的例如網(wǎng)站鏈接、底部按鈕也是一組。接近原則使網(wǎng)頁更流暢精準(zhǔn)的傳達信息，同時也增強了畫面的秩序美感。閉合原則：當(dāng)視覺元素不是完整的整體時，卻仍然能被人識別出來，這種情況在圖標(biāo)設(shè)計中應(yīng)用的比較多。如圖10實際上是三條線段，但人們會主觀的認為他組合形成了一個三角形。
6秩序感對網(wǎng)頁版式設(shè)計的啟示
秩序感來源于自然界，而秩序感先于網(wǎng)頁布局的設(shè)計，網(wǎng)頁設(shè)計中的秩序感是有一定規(guī)律的。網(wǎng)頁布局豐富多樣，但都有一定的規(guī)律。常用的網(wǎng)頁布局排序方法主要有對比、留白、平衡等技術(shù)。對比度可以增強圖像效果，突出重要的視覺元素。留空可以簡化圖像的復(fù)雜性，增加空間感。平衡是根據(jù)特定規(guī)則放置每個視覺元素以匹配顏色和形狀。它起到溝通的作用，并賦予網(wǎng)頁一定的順序。網(wǎng)頁的整體美感是通過設(shè)計、前端、配色、媒體和網(wǎng)頁呈現(xiàn)的內(nèi)容來實現(xiàn)的。各方面的不足指出都會影響整個網(wǎng)頁的秩序和美觀。設(shè)計是網(wǎng)頁上的一個非常重要的環(huán)節(jié)，它是在網(wǎng)頁上傳達信息的最重要途徑之一。根據(jù)不同網(wǎng)站的屬性，設(shè)計相應(yīng)的網(wǎng)頁版式布局，可以更好地傳達信息，提高網(wǎng)站的視覺效率，促進人機交互的發(fā)展。
7結(jié)束語
秩序感在網(wǎng)頁信息的傳達過程中起到了一定的保障作用，因此，將網(wǎng)頁設(shè)計都呈現(xiàn)出秩序感對網(wǎng)頁信息的傳達至關(guān)重要。在當(dāng)今社會，秩序感的設(shè)計已經(jīng)與網(wǎng)頁設(shè)計融為一體，而在網(wǎng)頁信息平臺上，秩序感已經(jīng)成為網(wǎng)頁進行信息傳達的基礎(chǔ)設(shè)計法則。因此，網(wǎng)頁版式設(shè)計中的秩序感尤為重要，它不僅符合人類視覺運動的一系列常規(guī)，同時，能帶給用戶又優(yōu)質(zhì)的交互體驗感。
作者:張宇 單位:中國礦業(yè)大學(xué)建筑與設(shè)計學(xué)院