企業(yè)網(wǎng)站界面信息架構(gòu)視覺表達

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了企業(yè)網(wǎng)站界面信息架構(gòu)視覺表達范文，希望能給你帶來靈感和參考，敬請閱讀。

引言

互聯(lián)網(wǎng)技術(shù)的發(fā)展使得越來越多的企業(yè)選擇建立企業(yè)網(wǎng)站來宣傳企業(yè)文化、擴大品牌影響力，通過讓服務(wù)持久地面向大眾群體來提高公司效益。但緊迫的需求與開發(fā)周期之間產(chǎn)生沖突，一些中小型企業(yè)為了節(jié)約時間成本，只注重網(wǎng)站的信息架構(gòu)的建設(shè)與開發(fā)、忽略了網(wǎng)站外觀的視覺化設(shè)計，大大降低了企業(yè)“軟價值”。不僅未能得到用戶的品牌認(rèn)同感、反而在初步的視覺體驗階段就使用戶退卻，不利于企業(yè)的長久發(fā)展，因此企業(yè)需要建設(shè)適配自身品牌形象與信息架構(gòu)的網(wǎng)站界面。

一、企業(yè)網(wǎng)站界面的信息架構(gòu)的作用與研究現(xiàn)狀

（一）企業(yè)網(wǎng)站的界面特點

企業(yè)網(wǎng)站的本質(zhì)是企業(yè)為了提高行業(yè)內(nèi)知名度與競爭力、拓展服務(wù)渠道而展開的宣傳手段。受限于互聯(lián)網(wǎng)規(guī)則，網(wǎng)站容納了一系列承載企業(yè)相關(guān)信息的網(wǎng)頁界面。企業(yè)網(wǎng)站界面的形式特點受到企業(yè)特性的制約，總結(jié)起來主要有三點：企業(yè)類型決定界面風(fēng)格要素；企業(yè)業(yè)務(wù)需求決定界面功能要素；企業(yè)文化決定品牌形象要素。

（二）理想的企業(yè)網(wǎng)站界面的信息架構(gòu)

信息架構(gòu)（InformationArchitecture）是由LouisRosenfeld企業(yè)網(wǎng)站界面信息架構(gòu)的視覺表達THEVISUALDESIGNOFTHEINFORMATIONARCHITECTUREOFENTERPRISEWEBSITEINTERFACE和PeterMorville于1957年提出的概念，他們認(rèn)為網(wǎng)站的信息架構(gòu)由組織系統(tǒng)、標(biāo)記系統(tǒng)、導(dǎo)航系統(tǒng)和檢索系統(tǒng)四個部分組成的[1]，通過結(jié)合自上而下與自下而上兩種分類體系歸納信息，理想的信息架構(gòu)能夠幫助用戶更成功地獲取和管理信息，從而有效地解決用戶的信息需求[2]。理想的信息架構(gòu)應(yīng)基于用戶體驗，首先保證信息的有效性及信息架構(gòu)的邏輯性；其次，信息架構(gòu)的構(gòu)建應(yīng)兼?zhèn)潇`活性與高效性；最后良好的信息架構(gòu)可以將科學(xué)與藝術(shù)結(jié)合，進行視覺上的美化。

（三）信息架構(gòu)視覺化的研究現(xiàn)狀

隨著互聯(lián)網(wǎng)產(chǎn)品不斷強調(diào)用戶視覺體驗的背景下，已經(jīng)有不少學(xué)者對信息架構(gòu)視覺化領(lǐng)域做了相關(guān)研究：方學(xué)兵和金麗麗認(rèn)為視覺信息設(shè)計的可用性設(shè)計在于對視覺形態(tài)、視覺層次、視覺定義和視覺圖標(biāo)的拓展等四個方面的把控[3]。李文今、侯文君等人從認(rèn)知理論與交互定律出發(fā)，進一步探究了網(wǎng)站信息架構(gòu)的展現(xiàn)方式對用戶認(rèn)知的影響[4]。王苗輝認(rèn)為，用戶對視覺信息界面的認(rèn)知主要體現(xiàn)在視覺元素的分組和布局、視覺元素的屬性和視覺元素含義三個方面[5]。但這些研究都偏向于對信息結(jié)構(gòu)或視覺元素的單側(cè)論述，沒有展開研究信息結(jié)構(gòu)和界面視覺之間的關(guān)聯(lián)。文章將從信息架構(gòu)和界面視覺元素的關(guān)聯(lián)性展開，研究企業(yè)網(wǎng)站界面的信息架構(gòu)的視覺轉(zhuǎn)化和表達。

二、企業(yè)網(wǎng)站界面中的視覺元素

界面的視覺設(shè)計是連通用戶體驗與產(chǎn)品內(nèi)核的重要途徑。企業(yè)網(wǎng)站能否觸動用戶，首先體現(xiàn)在界面的視覺效果能否吸引用戶愿意繼續(xù)體驗下去。如果一個良好的信息構(gòu)架沒有經(jīng)過視覺美化，那么用戶留存率和轉(zhuǎn)化率都將大大降低。界面的視覺要素主要有以下幾類：文字。文字是人類傳遞信息的主要載體，網(wǎng)站中的文字設(shè)計主要體現(xiàn)在字體、字號、字重、字距、行距、跳躍率、排版方式等方面[6]。文字屬性的選擇除了考慮美學(xué)層面的內(nèi)容，也要考慮人機尺度的問題。圖形。木村博之從視覺表現(xiàn)形式的角度，將信息圖形分為圖解、圖表、表格、統(tǒng)計圖、地圖和圖形符號[7]。色彩。色彩是視覺言語的重要表現(xiàn)形式，是界面視覺呈現(xiàn)的首要元素。相比起界面的其他視覺要素，界面的色彩特征更容易影響用戶對界面第一印象。網(wǎng)站中的色彩往往指的是色彩搭配，色彩搭配的應(yīng)用涵蓋了界面上其他所有視覺元素，合理的色彩可以體現(xiàn)出界面信息的關(guān)聯(lián)性、層級位置、重點內(nèi)容和信息狀態(tài)，也能夠傳遞企業(yè)風(fēng)格、企業(yè)文化，展示企業(yè)品牌形象。肌理。肌理是物體材質(zhì)的表面特征，最原始的肌理體驗來源于觸覺，但隨著日常經(jīng)驗的豐富，人們可以從視覺上感受到肌理和質(zhì)感，這種通感行為的產(chǎn)生讓界面的視覺元素有了更大的發(fā)揮空間，隨著3D設(shè)計效果和新擬物風(fēng)格（Neumorphism）在界面視覺中有了越來越廣泛的應(yīng)用，這也讓視覺質(zhì)感備受關(guān)注。流媒體。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)絡(luò)傳輸數(shù)據(jù)的速度明顯提升，音視頻可以打破寬帶和流量的限制，被應(yīng)用在網(wǎng)頁中。相比起圖片與文字，音視頻、動畫可以用較少的頁面空間傳遞更多的信息，讓網(wǎng)頁內(nèi)容更加豐富[8]。

三、企業(yè)網(wǎng)站界面信息架構(gòu)的視覺轉(zhuǎn)化

（一）企業(yè)網(wǎng)站界面信息架構(gòu)的視覺轉(zhuǎn)化難點

本文主要是對網(wǎng)站的信息架構(gòu)向網(wǎng)站視覺表現(xiàn)的轉(zhuǎn)化過程與方法進行研究，首先要從企業(yè)網(wǎng)站界面的信息架構(gòu)視覺轉(zhuǎn)化的難點切入，主要體現(xiàn)在以下4個方面：1.信息權(quán)重與視覺元素的優(yōu)先級：信息的權(quán)重以企業(yè)網(wǎng)站目標(biāo)為導(dǎo)向，具體關(guān)注網(wǎng)站所解決的問題或期望的收益是什么、收益過程是否伴隨著風(fēng)險及風(fēng)險程度如何、追求怎樣的用戶體驗及用戶的可接受度如何等。信息權(quán)重參考信息的等級、價值、重要性和時效性。信息權(quán)重值的高低直接限制了視覺元素的優(yōu)先級別。2.信息異質(zhì)與視覺元素的準(zhǔn)確性：企業(yè)網(wǎng)站的信息種類繁多，具體表現(xiàn)為界面信息的內(nèi)容、長度、格式、狀態(tài)等特征的差異性。信息的差異性使視覺元素在體現(xiàn)相關(guān)信息時存在定義準(zhǔn)確度的問題。視覺元素必須要準(zhǔn)確地將信息內(nèi)容傳達給用戶，并且保證用戶可理解。3.信息超載與視覺元素的簡化：信息超載指的是信息接收者承受了超出其處理能力范圍的過量信息，以致于無法理解相關(guān)信息、無法明確所需要的信息、沒有獲取信息的途徑。在企業(yè)網(wǎng)站中，企業(yè)想要把盡可能多的信息傳遞給用戶的同時，應(yīng)考慮到用戶的接受信息的能力。為了使用戶能在能力范圍內(nèi)盡可能多地接收有效信息，需要借助信息視覺化來使信息的呈現(xiàn)方式更為集中有效，并且容易被注意、被理解。因此，在界面信息得到合理規(guī)劃和組織的基礎(chǔ)上，對視覺元素進行盡可能簡化，避免視覺元素給用戶帶來不必要的認(rèn)知負荷。4.信息邏輯與視覺元素的藝術(shù)化：信息架構(gòu)是企業(yè)網(wǎng)站的骨架，決定了網(wǎng)站界面的信息容量、界面的布局形式和網(wǎng)站未來的發(fā)展方向。用戶能否體驗到網(wǎng)站的功能，以及是否愿意繼續(xù)體驗的核心就在于網(wǎng)站的信息架構(gòu)是否科學(xué)。信息架構(gòu)越是嚴(yán)謹(jǐn)，網(wǎng)站的用戶體驗越好，但高度的邏輯觀給界面科學(xué)性與藝術(shù)性的結(jié)合帶來一定的難度。界面的視覺化不能一味追求藝術(shù)性，信息的架構(gòu)方式也要考慮到界面的呈現(xiàn)方式。界面的視覺元素要以“形式追隨功能”為宗旨，在滿足信息架構(gòu)、體現(xiàn)網(wǎng)站需求的基礎(chǔ)上發(fā)揮藝術(shù)功能。

（二）企業(yè)網(wǎng)站界面信息架構(gòu)的視覺轉(zhuǎn)化方法

1.構(gòu)建視覺元素的信息顯示秩序：網(wǎng)站界面視覺元素的信息顯示秩序表現(xiàn)為視覺內(nèi)容的關(guān)聯(lián)性與層級性。（1）視覺元素的關(guān)聯(lián)性：視覺元素的關(guān)聯(lián)可以通過色彩、文字、圖形等視覺元素的一致性與相似性以及元素的在空間內(nèi)的親密性體現(xiàn)。其中文字除了可以通過字體、字號、字重等基本屬性關(guān)聯(lián)視覺元素，還可以通過文字的字距、行距、跳躍率、排版方式對信息類別進行歸屬，視覺分布依據(jù)距離原則和相似原則，近距離的文字屬性會被關(guān)聯(lián)在一起?！癈lassicCarsontheBigScreen”是一個以插畫展的形式展示經(jīng)典老爺車的網(wǎng)站，網(wǎng)站的文字內(nèi)容包括這些經(jīng)典款車型的故事以及原產(chǎn)地、總銷量、推出時間等官方的數(shù)據(jù)，如圖1?！癈lassicCarsontheBigScreen”對于信息的視覺關(guān)聯(lián)性處理得十分優(yōu)秀，對不同車輛的同種類別信息使用了相同字體、字號和字重，并均以灰色的圓形背景襯托車型圖案，這些信息的距離較遠，但用戶可以明白它們屬于同一類信息。其次在空間的處理上，“ClassicCarsontheBigScreen”將對一款車型的所有介紹內(nèi)容集合在一起，在排版中表現(xiàn)空間的親密感，雖然一些文字的屬性不一致，但通過距離原則，用戶可以明確它們表述的信息所屬同一輛車型。不同車型的信息依次依據(jù)時間線分列在界面左右兩邊，通過制造疏離感，使不同車型信息的空間關(guān)系更加清晰。（2）視覺元素的層級性：網(wǎng)站界面中視覺層級不明確會給用戶帶來視覺干擾，視覺干擾在企業(yè)界面中的體現(xiàn)方式是：不傳遞界面信息構(gòu)架內(nèi)容的顯示元素對傳遞信息構(gòu)架內(nèi)容的顯示元素產(chǎn)生干擾、次要的信息顯示元素對主要的信息顯示元素產(chǎn)生干擾、同級別信息顯示元素之間的相互干擾。在企業(yè)網(wǎng)站界面設(shè)計中，應(yīng)該消除無意義的顯示元素，強化權(quán)重高的信息、弱化權(quán)重低的信息，使較重要的信息先引起用戶的注意，為用戶高效地篩選信息、辨別信息提供基礎(chǔ)。視覺的層級性可以通過色彩特異、方向特異、尺寸特異、形狀特異以及運動特異等方式實現(xiàn)[9]，以視覺元素之間的對比完成注意的捕獲?！癈lassicCarsontheBigScreen”中，車型的圖案和色彩與視覺元素形成對比，讓車型的外觀特征更吸引瀏覽者注意，同時，界面的文字信息通過字號、字重等屬性傳遞層級性，字號大和字重強的文字容易被閱讀，頁面中車型首次出現(xiàn)在熒幕上的時間、經(jīng)典的別稱等內(nèi)容會被瀏覽者一眼看到，如圖2。2.提高視覺元素的信息表達效率（1）視覺元素的準(zhǔn)確性：界面信息架構(gòu)的轉(zhuǎn)化中視覺元素能否準(zhǔn)確傳達相應(yīng)的信息內(nèi)容一直是設(shè)計的重點之一，許多公司將界面設(shè)計工作分設(shè)為交互設(shè)計和UI設(shè)計兩個部分，前者關(guān)注用戶體驗，從界面信息布局和操作流程上進行思考，后者專注于界面的視覺表現(xiàn)形式，即如何優(yōu)化界面視覺元素，使其更準(zhǔn)確高效地傳遞信息，易于用戶對信息的接收。易理解的視覺元素應(yīng)符合用戶認(rèn)知、依據(jù)用戶習(xí)慣、基于企業(yè)文化。符合用戶認(rèn)知。從用戶認(rèn)知來看，視覺元素的準(zhǔn)確性在于設(shè)計師對于信息內(nèi)容的視覺表現(xiàn)符合用戶的心智模型。依據(jù)用戶習(xí)慣。在設(shè)計上幫助用戶按照使用經(jīng)驗總結(jié)出的規(guī)律進行界面操作，方便用戶將過往的使用經(jīng)驗直接遷移到新的產(chǎn)品中。如有需要打破用戶習(xí)慣的需求，需要多方面考察這種需求是否能帶來極大的效益?；谄髽I(yè)文化。企業(yè)網(wǎng)站的設(shè)計必須體現(xiàn)企業(yè)的品牌形象和文化理念，明晰的企業(yè)形象展示可以使用戶對品牌有更直觀的認(rèn)識，增加用戶對產(chǎn)品的忠誠度。為了使企業(yè)文化深入人心、擴大行業(yè)影響力，不少企業(yè)建立了成熟的設(shè)計規(guī)范，例如蘋果、谷歌、微軟、IBM等行業(yè)巨頭都建立了視覺、操作和風(fēng)格相統(tǒng)一的規(guī)范性設(shè)計語言。通過制定規(guī)范使用戶的體驗更流暢、助于加深對企業(yè)文化的理解與認(rèn)同，從而提高用戶黏度。蘋果公司的官網(wǎng)對于視覺元素準(zhǔn)確性的把握十分到位。蘋果公司遵循“少即是多”極簡主義設(shè)計理念。在網(wǎng)站的設(shè)計也體現(xiàn)了這樣企業(yè)文化，蘋果官網(wǎng)的大部分頁面，除了展示的產(chǎn)品固有色彩和按鈕藍之外，文字、背景、企業(yè)標(biāo)識均為黑白灰色系，此外界面會以大量留白營造廣闊的空間感。圖3是蘋果官網(wǎng)的首頁，設(shè)計師通過低飽和度的背景色彩以及留白空間為界面降噪，主圖產(chǎn)品的光澤與質(zhì)感體現(xiàn)出產(chǎn)品的流線造型與科技感，運用大標(biāo)題的字體風(fēng)格使信息的識別度更強、界面更具高級感。圖4是蘋果公司官網(wǎng)的音樂產(chǎn)品頁，設(shè)計者在網(wǎng)頁中以視頻作為背景，不同于傳統(tǒng)網(wǎng)頁依靠文字和圖片展示信息給用戶留下刻板與單調(diào)的印象，蘋果官網(wǎng)展現(xiàn)出信息時代的活力，通過視頻迅速將用戶帶入音樂世界，使產(chǎn)品尊重自由與熱愛的理念更直觀地傳達給用戶，達到點題和強化記憶的效果。同時以該界面為例，用戶點擊官網(wǎng)頂部導(dǎo)航欄內(nèi)任意一類產(chǎn)品標(biāo)簽時，會在導(dǎo)航欄下方顯示二級導(dǎo)航。二級導(dǎo)航包括該類型產(chǎn)品下的系列型號與配件，設(shè)計人員通過將復(fù)雜信息視覺化，以簡易的產(chǎn)品圖形符號向用戶展示產(chǎn)品信息，既能讓用戶快速地認(rèn)知與理解界面所要傳達的內(nèi)容，又可以使界面具有藝術(shù)性。（2）視覺元素的美化與簡化：視覺元素的美化功能應(yīng)建立在完善的信息架構(gòu)功能之上，視覺表現(xiàn)層面的設(shè)計給予信息框架層支持，以彌補信息框架邏輯排布的視覺呈現(xiàn)問題。視覺元素的設(shè)計有助于用戶感受網(wǎng)站的文化氛圍，如圖5；視覺元素的美化涉及到：視覺元素的對比性與一致性、網(wǎng)站界面布局的條理性、配色方案、界面質(zhì)感、頁面文字排版等。例如通過在界面中使用不同的肌理可以增加界面視覺元素的對比性，呈現(xiàn)更加豐富的視覺效果，使界面信息更具感染力，如圖6。在美化視覺效果的同時應(yīng)該持理性克制的態(tài)度，例如界面顏色的數(shù)量過多時會加重用戶的認(rèn)知負荷[10]，反而失去了信息視覺化的意義。圖7“Amundi”是歐洲市值第一、同時也是全球前五的投資管理公司。得益于全面的專業(yè)知識和研究驅(qū)動的投資文化，Amundi能幫助客戶做出更明智的投資決策。其網(wǎng)站的視覺整體呈現(xiàn)內(nèi)斂的設(shè)計風(fēng)格，盡可能地簡化了視覺元素。設(shè)計者對網(wǎng)站主頁板塊的布局規(guī)劃采用頂部復(fù)合導(dǎo)航配合動態(tài)banner大圖，復(fù)合導(dǎo)航可以使復(fù)雜信息結(jié)構(gòu)有條理地展示出來，這種布局干凈清爽，有較強的視覺表現(xiàn)能力。網(wǎng)站內(nèi)的信息瀏覽入口被設(shè)計為卡片形式，并以文字對相應(yīng)卡片內(nèi)容進行簡要描述，方便用戶篩選信息，也使界面簡潔有效。色彩上以飽和度偏低的藍色和灰白色為主，使用大量留白，在對信息內(nèi)容進行居中處理并融入線性設(shè)計結(jié)構(gòu)，形成了親切的卓越資產(chǎn)管理形象，如圖8。3.規(guī)劃視覺元素的信息引導(dǎo)路徑：視覺元素的信息引導(dǎo)是以網(wǎng)站的任務(wù)流程為導(dǎo)向的，在信息架構(gòu)視覺化的過程中要有意地引導(dǎo)用戶做出預(yù)期的操作行為。在初次訪問網(wǎng)站時，用戶會通過掃視網(wǎng)站內(nèi)容來快速獲取想要的信息，視覺瀏覽模式都以“Z”字型為基本路徑。有相關(guān)研究表明，在一個版面中，觀者會花約1.5倍的時間停留在版面上方約55%的面積上，觀者的注意分配的時間從高到低依次為左上方、右上方、左下方和右下方[11]，如圖9。根據(jù)用戶的操作習(xí)慣和視覺瀏覽路徑，把下一個任務(wù)的視覺元素布局在上一個任務(wù)的下方、右方或右下方，如圖10。影響用戶視覺搜索的還有搜索目標(biāo)的數(shù)量和類別，在網(wǎng)站的視覺設(shè)計中，應(yīng)該對該界面即將承擔(dān)怎樣的“任務(wù)”作出提前規(guī)劃，設(shè)置數(shù)量合適的搜索目標(biāo)，根據(jù)信息的優(yōu)先等級有序地將信息內(nèi)容以用戶視覺搜索路徑進行布局。清晰的交互反饋也是引導(dǎo)用戶操作的重要方式，在交互中加入動效可以增加操作的連貫性，經(jīng)過多次操作能夠幫助用戶理解網(wǎng)站的信息架構(gòu)。交互動效要以功能為主，遵循清晰聚焦、克制有度、自然流暢這三個核心原則，避免動效給使用者帶來信息干擾。

四、結(jié)論

企業(yè)網(wǎng)站界面視覺化設(shè)計應(yīng)結(jié)合企業(yè)的信息構(gòu)架，體現(xiàn)企業(yè)的文化理念，使企業(yè)品牌深入人心。企業(yè)網(wǎng)站界面信息架構(gòu)的視覺化設(shè)計要遵循用戶體驗至上的原則，克服視覺轉(zhuǎn)化過程中因信息權(quán)重、信息異質(zhì)、信息超載、信息邏輯等方面帶來的困難。從視覺元素的信息顯示秩序、視覺元素的信息表達效率、視覺元素的信息引導(dǎo)路徑三方面進行網(wǎng)站界面的視覺化設(shè)計。

作者:李慧君 陳凈蓮 單位:北京林業(yè)大學(xué)藝術(shù)設(shè)計學(xué)院