本文摘要：扁平化設(shè)計(jì)以少勝多，化繁為簡，這篇 網(wǎng)站論文 認(rèn)為更好地滿足了師生員工的需求，以一種新的設(shè)計(jì)風(fēng)格展示了高校門戶網(wǎng)站，其他高校門戶網(wǎng)站在改版時(shí)也可以考慮這種風(fēng)格的應(yīng)用�！� 中國電子商務(wù) 》是創(chuàng)刊于2000年1月，以促進(jìn)中國電子商務(wù)發(fā)展和國際國內(nèi)電子商
扁平化設(shè)計(jì)以少勝多，化繁為簡，這篇網(wǎng)站論文認(rèn)為更好地滿足了師生員工的需求，以一種新的設(shè)計(jì)風(fēng)格展示了高校門戶網(wǎng)站，其他高校門戶網(wǎng)站在改版時(shí)也可以考慮這種風(fēng)格的應(yīng)用。《中國電子商務(wù)》是創(chuàng)刊于2000年1月，以促進(jìn)中國電子商務(wù)發(fā)展和國際國內(nèi)電子商務(wù)交流為己任，是目前國內(nèi)第一本專注于全面研究國際、國內(nèi)各行各業(yè)采用信息技術(shù)所帶來的商務(wù)新理念、經(jīng)營新模式、管理新思維和市場新機(jī)遇的新商務(wù)媒體。
摘要：隨著近年來扁平化設(shè)計(jì)風(fēng)格在各個(gè)領(lǐng)域的應(yīng)用，其極簡和符號(hào)化的設(shè)計(jì)特點(diǎn)也被越來越多的大眾所接受。各種社交網(wǎng)站、App應(yīng)用都采用這種風(fēng)格，扁平化風(fēng)格已成為一種流行趨勢。現(xiàn)在高校門戶網(wǎng)站設(shè)計(jì)也順應(yīng)這種流行趨勢。以高校門戶網(wǎng)站設(shè)計(jì)為例，闡述扁平化風(fēng)格在高校網(wǎng)站設(shè)計(jì)中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，旨在為師生員工提供一個(gè)滿足需求的門戶網(wǎng)站。
關(guān)鍵詞：扁平化;高校網(wǎng)站;網(wǎng)站
引言
隨著高校信息化的發(fā)展，高校門戶網(wǎng)站越來越重要，它是為師生員工提供學(xué)校要聞、通知公告、招生就業(yè)信息的重要平臺(tái)。扁平化設(shè)計(jì)給高校門戶網(wǎng)站帶來了全新的設(shè)計(jì)理念，它的核心理念是去除冗余、厚重和繁雜的裝飾效果，具體做法是去除不必要的透視、陰影、3D立體效果等，讓信息本身展現(xiàn)出來。高校門戶網(wǎng)站應(yīng)用扁平化設(shè)計(jì)能夠使學(xué)校新聞、通知傳達(dá)更清晰、應(yīng)用系統(tǒng)使用更便捷。本文通過筆者所參與的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項(xiàng)目的設(shè)計(jì)和分析，闡述了扁平化設(shè)計(jì)在高校網(wǎng)站設(shè)計(jì)中版式布局、導(dǎo)航欄、色彩搭配、文字選擇和極簡圖標(biāo)的應(yīng)用，為師生員工提供一個(gè)滿足需求的門戶網(wǎng)站。
1扁平化設(shè)計(jì)
扁平化設(shè)計(jì)是谷歌公司在2008年提出來的，它的核心思想是拋棄擬物設(shè)計(jì)理念，在設(shè)計(jì)時(shí)不再考慮漸變、陰影、透視等物體視覺效果，由簡單的點(diǎn)、線、面組成，構(gòu)造一個(gè)看起來更平的界面[1]。在設(shè)計(jì)元素上，通常使用純色塊和簡單的圖形元素相結(jié)合的設(shè)計(jì)，從而呈現(xiàn)直觀明了的視覺效果。所以扁平化設(shè)計(jì)是一個(gè)運(yùn)用簡易圖形、簡潔文字、簡單色彩相互搭配的極簡設(shè)計(jì)方法。這種設(shè)計(jì)不僅新穎美觀，而且直觀地展示了網(wǎng)站信息，因此深受人氣網(wǎng)站(如Google、Facebook)的喜愛。網(wǎng)站設(shè)計(jì)應(yīng)用扁平化設(shè)計(jì)具有以下優(yōu)勢：(1)視覺界面更加清晰在視覺界面，扁平化設(shè)計(jì)只采用相對簡單的形狀(如矩形、圓形)，消除多余的裝飾效果，不打造物體立體效果。在界面設(shè)計(jì)時(shí)，每個(gè)元素或圖片都不加邊緣修飾或陰影，由于簡化圖形，使整個(gè)網(wǎng)站界面更清晰[2]。(2)信息傳遞更加直觀扁平化設(shè)計(jì)有利于展示主要內(nèi)容，凸顯網(wǎng)站信息，讓網(wǎng)站以更直觀的方式把信息傳遞給瀏覽用戶[3]。除此之外，傳統(tǒng)網(wǎng)頁設(shè)計(jì)所采用的樹狀信息組織機(jī)構(gòu)，扁平化的網(wǎng)頁設(shè)計(jì)將底層信息上移，減少了中間類目的標(biāo)簽，信息展示一目了然。(3)用戶交互更加流暢扁平化設(shè)計(jì)通過合理的信息布局和多級(jí)導(dǎo)航，成功地避免了用戶重復(fù)切換網(wǎng)頁，縮短信息傳輸時(shí)間間隔，提高信息傳遞效率，讓用戶交互更加流暢。扁平化圖形幾何特征，識(shí)別度高，容易閱讀，用戶使用方便。
2扁平化在高校網(wǎng)站設(shè)計(jì)中的應(yīng)用
筆者在參與建設(shè)的“中國民用航空飛行學(xué)院門戶網(wǎng)站改版”項(xiàng)目中，以紅色作為主色，應(yīng)用了扁平化風(fēng)格。該項(xiàng)目在開始設(shè)計(jì)時(shí)參考了多個(gè)大學(xué)網(wǎng)站(如：北京大學(xué)、清華大學(xué))，結(jié)合學(xué)校本身的飛行特色，與網(wǎng)站研發(fā)人員不斷修改、調(diào)整，最終完成了學(xué)校門戶網(wǎng)站的改版工作。該網(wǎng)站在2017年1月開始啟用，信息展示明了、視覺效果良好，收到了師生員工的肯定。門戶網(wǎng)站地址為，新網(wǎng)站從以下五個(gè)方面體現(xiàn)了扁平化的設(shè)計(jì)理念：
(1)版式布局扁平化設(shè)計(jì)是一種簡單到極致的藝術(shù)設(shè)計(jì)風(fēng)格，布局尤為重要，它強(qiáng)調(diào)有序、整齊、一氣呵成，放棄復(fù)雜的布局結(jié)構(gòu)。所以改版后的網(wǎng)站在布局上精簡，從上到下將結(jié)構(gòu)分為簡單的三欄，分別是頭部、內(nèi)容和尾部，這三欄用大的顏色塊來布局。中間的內(nèi)容欄又分為信息欄和鏈接欄，用不同的底色進(jìn)行區(qū)別。網(wǎng)站的新聞?wù)故緝?nèi)容統(tǒng)一放在到中間信息欄，一目了然。
(2)導(dǎo)航欄扁平化設(shè)計(jì)倡導(dǎo)“Lessismore”理念[4]，它的導(dǎo)航欄展示非常精煉。改版后的網(wǎng)站導(dǎo)航設(shè)計(jì)，只使用了白色和簡單方塊，一方面淺色調(diào)白色對比了主色調(diào)紅色，另一方面凸顯了導(dǎo)航欄的文字。導(dǎo)航欄的“選中”和“未選中”兩個(gè)狀態(tài)分別用紅色色塊和灰色色塊來表示，既能明確向用戶指示當(dāng)前狀態(tài)，又顯得頁面干凈大方。主頁面的一級(jí)導(dǎo)航采用水平狀導(dǎo)航欄，放在頁面的頂部，確保師生員工能第一時(shí)間看到它。二級(jí)頁面的導(dǎo)航欄則采用側(cè)邊導(dǎo)航欄，符合用戶從左到右的閱讀順序，起到很好的導(dǎo)航作用。
(3)色彩搭配色彩搭配是扁平化設(shè)計(jì)中不可或缺的視覺元素，特別是設(shè)計(jì)中放棄了擬物設(shè)計(jì)的漸變、高光等特效，只能使用純色塊設(shè)計(jì)，在色彩選擇和搭配上就必須慎重。在新版的設(shè)計(jì)中，整個(gè)網(wǎng)站以暖色調(diào)紅色為主色，給人以熱烈激情的感覺。同時(shí)在左下處“快速導(dǎo)航”那里(如綿陽分院、遂寧分院)采用低飽和度的淡藍(lán)色、天藍(lán)色等冷色調(diào)與主色調(diào)遙相呼應(yīng)，吸引瀏覽者的注意力，平衡頁面色溫。同時(shí)又因?yàn)樵陧撁嬷惺褂昧溯^多的顏色，如五個(gè)分院處就使用了五種色塊，為了不讓用戶產(chǎn)生眼花繚亂的感覺，還加入了白色、灰色等淺色調(diào)進(jìn)行協(xié)調(diào)。“學(xué)校要聞”欄目的底色采用了白色，與黑色的新聞標(biāo)題相互照應(yīng)。“快速導(dǎo)航”、“專題網(wǎng)站”欄目的底色采用了灰色，使得主體更為突出。網(wǎng)站背景通過灰色、白色和虛化圖等方式進(jìn)行修飾，這些修飾有助于吸引瀏覽者目光集中在網(wǎng)站主要內(nèi)容上，從而制造出融合統(tǒng)一的頁面效果。
(4)文字選擇文字是門戶網(wǎng)站內(nèi)容最重要的構(gòu)成元素之一，扁平化設(shè)計(jì)的門戶網(wǎng)站偏愛字體簡潔、排版大方的風(fēng)格[4]。在字體的選擇上，需要考慮三點(diǎn)：筆畫清晰、體態(tài)優(yōu)美、便于閱讀。中國民用航空飛行學(xué)院網(wǎng)站采用了宋體，沒有使用草書、隸書等特殊字體，用通用、字型清晰的字體讓用戶能快速獲取到信息。字體顏色選擇了黑色和白色，符合人們白紙黑字的閱讀習(xí)慣，讓網(wǎng)頁文字閱讀起來流暢自然。字體大小則采用14px字號(hào)，大小適中，可讀性比較高。(5)極簡圖標(biāo)在設(shè)計(jì)扁平化風(fēng)格網(wǎng)站頁面時(shí)，尤其是圖標(biāo)設(shè)計(jì)，應(yīng)遵循簡約到極致的原則，不要使用復(fù)雜和模棱兩可的圖標(biāo)。改版網(wǎng)站在微博、微信、蘋果、Android等圖標(biāo)都采用標(biāo)志性圖片，直觀明了。圖標(biāo)設(shè)計(jì)時(shí)，傾向于選擇圓角設(shè)計(jì)，看起來更漂亮吸引人。在“學(xué)校要聞”、“通知公告”、“快速導(dǎo)航”和“專題網(wǎng)站”等欄目前面的圖標(biāo)設(shè)計(jì)中，采用了圓形小圖標(biāo)，使網(wǎng)站看起來更圓潤，更有親和力。在“院報(bào)網(wǎng)絡(luò)版”、“單位信箱”等欄目的圖標(biāo)使用了圓角設(shè)計(jì)，使學(xué)生訪問網(wǎng)站時(shí)，拉近與學(xué)生的距離。
3結(jié)語
扁平化風(fēng)格的運(yùn)用使得高校門戶網(wǎng)站耳目一新，它很注重網(wǎng)站頁面上的功能，突出展示了學(xué)校要聞、通知公告的具體內(nèi)容。在大數(shù)據(jù)時(shí)代，扁平化設(shè)計(jì)使信息內(nèi)容得到了聚集，讓用戶可以快速找到門戶網(wǎng)站中提供的資源，提高了師生員工瀏覽頁面的效率。相比傳統(tǒng)的高校門戶網(wǎng)站設(shè)計(jì)，扁平化設(shè)計(jì)使得高校門戶網(wǎng)站更為簡約，更能突出網(wǎng)站的功能，達(dá)到及時(shí)傳遞信息、方便用戶操作的目的。
轉(zhuǎn)載請注明來自發(fā)表學(xué)術(shù)論文網(wǎng)：http:///dzlw/13866.html
