網(wǎng)站論文樂器電子商務(wù)網(wǎng)站設(shè)計

所屬分類：電子論文閱讀次時間：2017-07-29 17:03

本文摘要：扁平化設(shè)計以少勝多，化繁為簡，這篇網(wǎng)站論文認(rèn)為更好地滿足了師生員工的需求，以一種新的設(shè)計風(fēng)格展示了高校門戶網(wǎng)站，其他高校門戶網(wǎng)站在改版時也可以考慮這種風(fēng)格的應(yīng)用。《中國電子商務(wù) 》是創(chuàng)刊于2000年1月，以促進中國電子商務(wù)發(fā)展和國際國內(nèi)電子商

　　扁平化設(shè)計以少勝多，化繁為簡，這篇網(wǎng)站論文認(rèn)為更好地滿足了師生員工的需求，以一種新的設(shè)計風(fēng)格展示了高校門戶網(wǎng)站，其他高校門戶網(wǎng)站在改版時也可以考慮這種風(fēng)格的應(yīng)用。《中國電子商務(wù)》是創(chuàng)刊于2000年1月，以促進中國電子商務(wù)發(fā)展和國際國內(nèi)電子商務(wù)交流為己任，是目前國內(nèi)第一本專注于全面研究國際、國內(nèi)各行各業(yè)采用信息技術(shù)所帶來的商務(wù)新理念、經(jīng)營新模式、管理新思維和市場新機遇的新商務(wù)媒體。

　　摘要：隨著近年來扁平化設(shè)計風(fēng)格在各個領(lǐng)域的應(yīng)用，其極簡和符號化的設(shè)計特點也被越來越多的大眾所接受。各種社交網(wǎng)站、App應(yīng)用都采用這種風(fēng)格，扁平化風(fēng)格已成為一種流行趨勢。現(xiàn)在高校門戶網(wǎng)站設(shè)計也順應(yīng)這種流行趨勢。以高校門戶網(wǎng)站設(shè)計為例，闡述扁平化風(fēng)格在高校網(wǎng)站設(shè)計中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，旨在為師生員工提供一個滿足需求的門戶網(wǎng)站。

　　關(guān)鍵詞：扁平化;高校網(wǎng)站;網(wǎng)站

　　引言

　　隨著高校信息化的發(fā)展，高校門戶網(wǎng)站越來越重要，它是為師生員工提供學(xué)校要聞、通知公告、招生就業(yè)信息的重要平臺。扁平化設(shè)計給高校門戶網(wǎng)站帶來了全新的設(shè)計理念，它的核心理念是去除冗余、厚重和繁雜的裝飾效果，具體做法是去除不必要的透視、陰影、3D立體效果等，讓信息本身展現(xiàn)出來。高校門戶網(wǎng)站應(yīng)用扁平化設(shè)計能夠使學(xué)校新聞、通知傳達更清晰、應(yīng)用系統(tǒng)使用更便捷。本文通過筆者所參與的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項目的設(shè)計和分析，闡述了扁平化設(shè)計在高校網(wǎng)站設(shè)計中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，為師生員工提供一個滿足需求的門戶網(wǎng)站。

　　1扁平化設(shè)計

　　扁平化設(shè)計是谷歌公司在2008年提出來的，它的核心思想是拋棄擬物設(shè)計理念，在設(shè)計時不再考慮漸變、陰影、透視等物體視覺效果，由簡單的點、線、面組成，構(gòu)造一個看起來更平的界面[1]。在設(shè)計元素上，通常使用純色塊和簡單的圖形元素相結(jié)合的設(shè)計，從而呈現(xiàn)直觀明了的視覺效果。所以扁平化設(shè)計是一個運用簡易圖形、簡潔文字、簡單色彩相互搭配的極簡設(shè)計方法。這種設(shè)計不僅新穎美觀，而且直觀地展示了網(wǎng)站信息，因此深受人氣網(wǎng)站(如Google、Facebook)的喜愛。網(wǎng)站設(shè)計應(yīng)用扁平化設(shè)計具有以下優(yōu)勢：(1)視覺界面更加清晰在視覺界面，扁平化設(shè)計只采用相對簡單的形狀(如矩形、圓形)，消除多余的裝飾效果，不打造物體立體效果。在界面設(shè)計時，每個元素或圖片都不加邊緣修飾或陰影，由于簡化圖形，使整個網(wǎng)站界面更清晰[2]。(2)信息傳遞更加直觀扁平化設(shè)計有利于展示主要內(nèi)容，凸顯網(wǎng)站信息，讓網(wǎng)站以更直觀的方式把信息傳遞給瀏覽用戶[3]。除此之外，傳統(tǒng)網(wǎng)頁設(shè)計所采用的樹狀信息組織機構(gòu)，扁平化的網(wǎng)頁設(shè)計將底層信息上移，減少了中間類目的標(biāo)簽，信息展示一目了然。(3)用戶交互更加流暢扁平化設(shè)計通過合理的信息布局和多級導(dǎo)航，成功地避免了用戶重復(fù)切換網(wǎng)頁，縮短信息傳輸時間間隔，提高信息傳遞效率，讓用戶交互更加流暢。扁平化圖形幾何特征，識別度高，容易閱讀，用戶使用方便。

　　2扁平化在高校網(wǎng)站設(shè)計中的應(yīng)用

　　筆者在參與建設(shè)的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項目中，以紅色作為主色，應(yīng)用了扁平化風(fēng)格。該項目在開始設(shè)計時參考了多個大學(xué)網(wǎng)站(如：北京大學(xué)、清華大學(xué))，結(jié)合學(xué)校本身的飛行特色，與網(wǎng)站研發(fā)人員不斷修改、調(diào)整，最終完成了學(xué)校門戶網(wǎng)站的改版工作。該網(wǎng)站在2017年1月開始啟用，信息展示明了、視覺效果良好，收到了師生員工的肯定。門戶網(wǎng)站地址為，新網(wǎng)站從以下五個方面體現(xiàn)了扁平化的設(shè)計理念：

　　(1)版式布局扁平化設(shè)計是一種簡單到極致的藝術(shù)設(shè)計風(fēng)格，布局尤為重要，它強調(diào)有序、整齊、一氣呵成，放棄復(fù)雜的布局結(jié)構(gòu)。所以改版后的網(wǎng)站在布局上精簡，從上到下將結(jié)構(gòu)分為簡單的三欄，分別是頭部、內(nèi)容和尾部，這三欄用大的顏色塊來布局。中間的內(nèi)容欄又分為信息欄和鏈接欄，用不同的底色進行區(qū)別。網(wǎng)站的新聞?wù)故緝?nèi)容統(tǒng)一放在到中間信息欄，一目了然。

　　(2)導(dǎo)航欄扁平化設(shè)計倡導(dǎo)“Lessismore”理念[4]，它的導(dǎo)航欄展示非常精煉。改版后的網(wǎng)站導(dǎo)航設(shè)計，只使用了白色和簡單方塊，一方面淺色調(diào)白色對比了主色調(diào)紅色，另一方面凸顯了導(dǎo)航欄的文字。導(dǎo)航欄的“選中”和“未選中”兩個狀態(tài)分別用紅色色塊和灰色色塊來表示，既能明確向用戶指示當(dāng)前狀態(tài)，又顯得頁面干凈大方。主頁面的一級導(dǎo)航采用水平狀導(dǎo)航欄，放在頁面的頂部，確保師生員工能第一時間看到它。二級頁面的導(dǎo)航欄則采用側(cè)邊導(dǎo)航欄，符合用戶從左到右的閱讀順序，起到很好的導(dǎo)航作用。

　　(3)色彩搭配色彩搭配是扁平化設(shè)計中不可或缺的視覺元素，特別是設(shè)計中放棄了擬物設(shè)計的漸變、高光等特效，只能使用純色塊設(shè)計，在色彩選擇和搭配上就必須慎重。在新版的設(shè)計中，整個網(wǎng)站以暖色調(diào)紅色為主色，給人以熱烈激情的感覺。同時在左下處“快速導(dǎo)航”那里(如綿陽分院、遂寧分院)采用低飽和度的淡藍色、天藍色等冷色調(diào)與主色調(diào)遙相呼應(yīng)，吸引瀏覽者的注意力，平衡頁面色溫。同時又因為在頁面中使用了較多的顏色，如五個分院處就使用了五種色塊，為了不讓用戶產(chǎn)生眼花繚亂的感覺，還加入了白色、灰色等淺色調(diào)進行協(xié)調(diào)。“學(xué)校要聞”欄目的底色采用了白色，與黑色的新聞標(biāo)題相互照應(yīng)。“快速導(dǎo)航”、“專題網(wǎng)站”欄目的底色采用了灰色，使得主體更為突出。網(wǎng)站背景通過灰色、白色和虛化圖等方式進行修飾，這些修飾有助于吸引瀏覽者目光集中在網(wǎng)站主要內(nèi)容上，從而制造出融合統(tǒng)一的頁面效果。

　　(4)文字選擇文字是門戶網(wǎng)站內(nèi)容最重要的構(gòu)成元素之一，扁平化設(shè)計的門戶網(wǎng)站偏愛字體簡潔、排版大方的風(fēng)格[4]。在字體的選擇上，需要考慮三點：筆畫清晰、體態(tài)優(yōu)美、便于閱讀。中國民用航空飛行學(xué)院網(wǎng)站采用了宋體，沒有使用草書、隸書等特殊字體，用通用、字型清晰的字體讓用戶能快速獲取到信息。字體顏色選擇了黑色和白色，符合人們白紙黑字的閱讀習(xí)慣，讓網(wǎng)頁文字閱讀起來流暢自然。字體大小則采用14px字號，大小適中，可讀性比較高。(5)極簡圖標(biāo)在設(shè)計扁平化風(fēng)格網(wǎng)站頁面時，尤其是圖標(biāo)設(shè)計，應(yīng)遵循簡約到極致的原則，不要使用復(fù)雜和模棱兩可的圖標(biāo)。改版網(wǎng)站在微博、微信、蘋果、Android等圖標(biāo)都采用標(biāo)志性圖片，直觀明了。圖標(biāo)設(shè)計時，傾向于選擇圓角設(shè)計，看起來更漂亮吸引人。在“學(xué)校要聞”、“通知公告”、“快速導(dǎo)航”和“專題網(wǎng)站”等欄目前面的圖標(biāo)設(shè)計中，采用了圓形小圖標(biāo)，使網(wǎng)站看起來更圓潤，更有親和力。在“院報網(wǎng)絡(luò)版”、“單位信箱”等欄目的圖標(biāo)使用了圓角設(shè)計，使學(xué)生訪問網(wǎng)站時，拉近與學(xué)生的距離。

　　3結(jié)語

　　扁平化風(fēng)格的運用使得高校門戶網(wǎng)站耳目一新，它很注重網(wǎng)站頁面上的功能，突出展示了學(xué)校要聞、通知公告的具體內(nèi)容。在大數(shù)據(jù)時代，扁平化設(shè)計使信息內(nèi)容得到了聚集，讓用戶可以快速找到門戶網(wǎng)站中提供的資源，提高了師生員工瀏覽頁面的效率。相比傳統(tǒng)的高校門戶網(wǎng)站設(shè)計，扁平化設(shè)計使得高校門戶網(wǎng)站更為簡約，更能突出網(wǎng)站的功能，達到及時傳遞信息、方便用戶操作的目的。