企業網站界面信息架構的視覺表達

李慧君 陳凈蓮

摘要：探索企業網站界面信息架構的視覺轉化內容和視覺表達方法。分析信息架構視覺化的研究現狀，研究網站界面視覺要素以及信息架構視覺轉化的難點。得到企業網站信息架構視覺轉化的方向。企業網站界面設計要結合企業文化和信息架構，從視覺元素的信息顯示秩序、信息表達效率和信息引導路徑進行網站界面信息架構的視覺轉化。

關鍵詞：企業網站界面設計信息架構Web界面視覺元素信息傳遞

中圖分類號：J05

文獻標識碼：A

文章編號：1003-0069（2021）01-0110-04

引言

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

一、企業網站界面的信息架構的作用與研究現狀

（一）企業網站的界面特點

企業網站的本質是企業為了提高行業內知名度與競爭力、拓展服務渠道而展開的宣傳手段。受限于互聯網規則，網站容納了一系列承載企業相關信息的網頁界面。企業網站界面的形式特點受到企業特性的制約，總結起來主要有三點：企業類型決定界面風格要素;企業業務需求決定界面功能要素;企業文化決定品牌形象要素。

（二）理想的企業網站界面的信息架構

信息架構（InformationArchitecture）是由LouisRosenfeld和PeterMorville于1957年提出的概念，他們認為網站的信息架構由組織系統、標記系統、導航系統和檢索系統四個部分組成的【1】，通過結合自上而下與自下而上兩種分類體系歸納信息，理想的信息架構能夠幫助用戶更成功地獲取和管理信息，從而有效地解決用戶的信息需求【2】。

理想的信息架構應基于用戶體驗，首先保證信息的有效性及信息架構的邏輯性;其次，信息架構的構建應兼備靈活性與高效性;最后良好的信息架構可以將科學與藝術結合，進行視覺上的美化。

（三）信息架構視覺化的研究現狀

隨著互聯網產品不斷強調用戶視覺體驗的背景下，已經有不少學者對信息架構視覺化領域做了相關研究：方學兵和金麗麗認為視覺信息設計的可用性設計在于對視覺形態、視覺層次、視覺定義和視覺圖標的拓展等四個方面的把控【3】。李文今、侯文君等人從認知理論與交互定律出發，進一步探究了網站信息架構的展現方式對用戶認知的影響【4】。王苗輝認為，用戶對視覺信息界面的認知主要體現在視覺元素的分組和布局、視覺元素的屬性和視覺元素含義三個方面【5】。但這些研究都偏向于對信息結構或視覺元素的單側論述，沒有展開研究信息結構和界面視覺之間的關聯。文章將從信息架構和界面視覺元素的關聯性展開，研究企業網站界面的信息架構的視覺轉化和表達。

二、企業網站界面中的視覺元素

界面的視覺設計是連通用戶體驗與產品內核的重要途徑。企業網站能否觸動用戶，首先體現在界面的視覺效果能否吸引用戶愿意繼續體驗下去。如果一個良好的信息構架沒有經過視覺美化，那么用戶留存率和轉化率都將大大降低。界面的視覺要素主要有以下幾類：

文字。文字是人類傳遞信息的主要載體，網站中的文字設計主要體現在字體、字號、字重、字距、行距、跳躍率、排版方式等方面問。文字屬性的選擇除了考慮美學層面的內容，也要考慮人機尺度的問題。

圖形。木村博之從視覺表現形式的角度，將信息圖形分為圖解、圖表、表格、統計圖、地圖和圖形符號【7】。

色彩。色彩是視覺言語的重要表現形式，是界面視覺呈現的首要元素。相比起界面的其他視覺要素，界面的色彩特征更容易影響用戶對界面第一印象。網站中的色彩往往指的是色彩搭配，色彩搭配的應用涵蓋了界面上其他所有視覺元素，合理的色彩可以體現出界面信息的關聯性、層級位置、重點內容和信息狀態，也能夠傳遞企業風格、企業文化，展示企業品牌形象。

肌理。肌理是物體材質的表面特征，最原始的肌理體驗來源于觸覺，但隨著日常經驗的豐富，人們可以從視覺上感受到肌理和質感，這種通感行為的產生讓界面的視覺元素有了更大的發揮空間，隨著3D設計效果和新擬物風格（Neumorphism）在界面視覺中有了越來越廣泛的應用，這也讓視覺質感備受關注。

流媒體。隨著互聯網技術的發展，網絡傳輸數據的速度明顯提升，音視頻可以打破寬帶和流量的限制，被應用在網頁中。相比起圖片與文字，音視頻、動畫可以用較少的頁面空間傳遞更多的信息，讓網頁內容更加豐富【8】。

三、企業網站界面信息架構的視覺轉化

（一）企業網站界面信息架構的視覺轉化難點

本文主要是對網站的信息架構向網站視覺表現的轉化過程與方法進行研究，首先要從企業網站界面的信息架構視覺轉化的難點切入，主要體現在以下4個方面：

1.信息權重與視覺元素的優先級：信息的權重以企業網站目標為導向，具體關注網站所解決的問題或期望的收益是什么、收益過程是否伴隨著風險及風險程度如何、追求怎樣的用戶體驗及用戶的可接受度如何等。信息權重參考信息的等級、價值、重要性和時效性。信息權重值的高低直接限制了視覺元素的優先級別。

2.信息異質與視覺元素的準確性：企業網站的信息種類繁多，具體表現為界面信息的內容、長度、格式、狀態等特征的差異性。信息的差異性使視覺元素在體現相關信息時存在定義準確度的問題。視覺元素必須要準確地將信息內容傳達給用戶，并且保證用戶可理解。

3.信息超載與視覺元素的簡化：信息超載指的是信息接收者承受了超出其處理能力范圍的過量信息，以致于無法理解相關信息、無法明確所需要的信息、沒有獲取信息的途徑。在企業網站中，企業想要把盡可能多的信息傳遞給用戶的同時，應考慮到用戶的接受信息的能力。為了使用戶能在能力范圍內盡可能多地接收有效信息，需要借助信息視覺化來使信息的呈現方式更為集中有效，并且容易被注意、被理解。因此，在界面信息得到合理規劃和組織的基礎上，對視覺元素進行盡可能簡化，避免視覺元素給用戶帶來不必要的認知負荷。

4.信息邏輯與視覺元素的藝術化：信息架構是企業網站的骨架，決定了網站界面的信息容量、界面的布局形式和網站未來的發展方向。用戶能否體驗到網站的功能，以及是否愿意繼續體驗的核心就在于網站的信息架構是否科學。信息架構越是嚴謹，網站的用戶體驗越好，但高度的邏輯觀給界面科學性與藝術性的結合帶來一定的難度。界面的視覺化不能一味追求藝術性，信息的架構方式也要考慮到界面的呈現方式。界面的視覺元素要以“形式追隨功能”為宗旨，在滿足信息架構、體現網站需求的基礎上發揮藝術功能。

（二）企業網站界面信息架構的視覺轉化方法

1.構建視覺元素的信息顯示秩序：網站界面視覺元素的信息顯示秩序表現為視覺內容的關聯性與層級性。

（1）視覺元素的關聯性：視覺元素的關聯可以通過色彩、文字、圖形等視覺元素的一致性與相似性以及元素的在空間內的親密性體現。其中文字除了可以通過字體、字號、字重等基本屬性關聯視覺元素，還可以通過文字的字距、行距、跳躍率、排版方式對信息類別進行歸屬，視覺分布依據距離原則和相似原則，近距離的文字屬性會被關聯在一起。

“ClassicCarsontheBigScreen”是一個以插畫展的形式展示經典老爺車的網站，網站的文字內容包括這些經典款車型的故事以及原產地、總銷量、推出時間等官方的數據，如圖1?！癈lassicCarsontheBigScreen”對于信息的視覺關聯性處理得十分優秀，對不同車輛的同種類別信息使用了相同字體、字號和字重，并均以灰色的圓形背景襯托車型圖案，這些信息的距離較遠，但用戶可以明白它們屬于同一類信息。其次在空間的處理上，“ClassicCarsontheBigScreen”將對一款車型的所有介紹內容集合在一起，在排版中表現空間的親密感，雖然一些文字的屬性不一致，但通過距離原則，用戶可以明確它們表述的信息所屬同一輛車型。不同車型的信息依次依據時間線分列在界面左右兩邊，通過制造疏離感，使不同車型信息的空間關系更加清晰。

（2）視覺元素的層級性：網站界面中視覺層級不明確會給用戶帶來視覺干擾，視覺干擾在企業界面中的體現方式是：不傳遞界面信息構架內容的顯示元素對傳遞信息構架內容的顯示元素產生干擾、次要的信息顯示元素對主要的信息顯示元素產生干擾、同級別信息顯示元素之間的相互干擾。在企業網站界面設計中，應該消除無意義的顯示元素，強化權重高的信息、弱化權重低的信息，使較重要的信息先引起用戶的注意，為用戶高效地篩選信息、辨別信息提供基礎。

視覺的層級性可以通過色彩特異、方向特異、尺寸特異、形狀特異以及運動特異等方式實現【9】，以視覺元素之間的對比完成注意的捕獲。“ClassicCarsontheBigScreen”中，車型的圖案和色彩與視覺元素形成對比，讓車型的外觀特征更吸引瀏覽者注意，同時，界面的文字信息通過字號、字重等屬性傳遞層級性，字號大和字重強的文字容易被閱讀，頁面中車型首次出現在熒幕上的時間、經典的別稱等內容會被瀏覽者一眼看到，如圖2。

2.提高視覺元素的信息表達效率

（1）視覺元素的準確性：界面信息架構的轉化中視覺元素能否準確傳達相應的信息內容一直是設計的重點之一，許多公司將界面設計工作分設為交互設計和UI設計兩個部分，前者關注用戶體驗，從界面信息布局和操作流程上進行思考，后者專注于界面的視覺表現形式，即如何優化界面視覺元素，使其更準確高效地傳遞信息，易于用戶對信息的接收。易理解的視覺元素應符合用戶認知、依據用戶習慣、基于企業文化。

符合用戶認知。從用戶認知來看，視覺元素的準確性在于設計師對于信息內容的視覺表現符合用戶的心智模型。

依據用戶習慣。在設計上幫助用戶按照使用經驗總結出的規律進行界面操作，方便用戶將過往的使用經驗直接遷移到新的產品中。如有需要打破用戶習慣的需求，需要多方面考察這種需求是否能帶來極大的效益。

基于企業文化。企業網站的設計必須體現企業的品牌形象和文化理念，明晰的企業形象展示可以使用戶對品牌有更直觀的認識，增加用戶對產品的忠誠度。為了使企業文化深入人心、擴大行業影響力，不少企業建立了成熟的設計規范，例如蘋果、谷歌、微軟、IBM等行業巨頭都建立了視覺、操作和風格相統一的規范性設計語言。通過制定規范使用戶的體驗更流暢、助于加深對企業文化的理解與認同，從而提高用戶黏度。

蘋果公司的官網對于視覺元素準確性的把握十分到位。蘋果公司遵循“少即是多”極簡主義設計理念。在網站的設計也體現了這樣企業文化，蘋果官網的大部分頁面，除了展示的產品固有色彩和按鈕藍之外，文字、背景、企業標識均為黑白灰色系，此外界面會以大量留白營造廣闊的空間感。圖3是蘋果官網的首頁，設計師通過低飽和度的背景色彩以及留白空間為界面降噪，主圖產品的光澤與質感體現出產品的流線造型與科技感，運用大標題的字體風格使信息的識別度更強、界面更具高級感。圖4是蘋果公司官網的音樂產品頁，設計者在網頁中以視頻作為背景，不同于傳統網頁依靠文字和圖片展示信息給用戶留下刻板與單調的印象，蘋果官網展現出信息時代的活力，通過視頻迅速將用戶帶入音樂世界，使產品尊重自由與熱愛的理念更直觀地傳達給用戶，達到點題和強化記憶的效果。同時以該界面為例，用戶點擊官網頂部導航欄內任意一類產品標簽時，會在導航欄下方顯示二級導航。二級導航包括該類型產品下的系列型號與配件，設計人員通過將復雜信息視覺化，以簡易的產品圖形符號向用戶展示產品信息，既能讓用戶快速地認知與理解界面所要傳達的內容，又可以使界面具有藝術性。

（2）視覺元素的美化與簡化：視覺元素的美化功能應建立在完善的信息架構功能之上，視覺表現層面的設計給予信息框架層支持，以彌補信息框架邏輯排布的視覺呈現問題。視覺元素的設計有助于用戶感受網站的文化氛圍，如圖5;視覺元素的美化涉及到：視覺元素的對比性與一致性、網站界面布局的條理性、配色方案、界面質感、頁面文字排版等。例如通過在界面中使用不同的肌理可以增加界面視覺元素的對比性，呈現更加豐富的視覺效果，使界面信息更具感染力，如圖6。

在美化視覺效果的同時應該持理性克制的態度，例如界面顏色的數量過多時會加重用戶的認知負荷【10】，反而失去了信息視覺化的意義。圖7“Amundi”是歐洲市值第一、同時也是全球前五的投資管理公司。得益于全面的專業知識和研究驅動的投資文化，Amundi能幫助客戶做出更明智的投資決策。其網站的視覺整體呈現內斂的設計風格，盡可能地簡化了視覺元素。設計者對網站主頁板塊的布局規劃采用頂部復合導航配合動態banner大圖，復合導航可以使復雜信息結構有條理地展示出來，這種布局干凈清爽，有較強的視覺表現能力。網站內的信息瀏覽入口被設計為卡片形式，并以文字對相應卡片內容進行簡要描述，方便用戶篩選信息，也使界面簡潔有效。色彩上以飽和度偏低的藍色和灰白色為主，使用大量留白，在對信息內容進行居中處理并融入線性設計結構，形成了親切的卓越資產管理形象，如圖8。

3.規劃視覺元素的信息引導路徑：視覺元素的信息引導是以網站的任務流程為導向的，在信息架構視覺化的過程中要有意地引導用戶做出預期的操作行為。在初次訪問網站時，用戶會通過掃視網站內容來快速獲取想要的信息，視覺瀏覽模式都以“Z”字型為基本路徑。有相關研究表明，在一個版面中，觀者會花約1.5倍的時間停留在版面上方約55%的面積上，觀者的注意分配的時間從高到低依次為左上方、右上方、左下方和右下方【11】，如圖9。根據用戶的操作習慣和視覺瀏覽路徑，把下一個任務的視覺元素布局在上一個任務的下方、右方或右下方，如圖10。影響用戶視覺搜索的還有搜索目標的數量和類別，在網站的視覺設計中，應該對該界面即將承擔怎樣的“任務”作出提前規劃，設置數量合適的搜索目標，根據信息的優先等級有序地將信息內容以用戶視覺搜索路徑進行布局。

清晰的交互反饋也是引導用戶操作的重要方式，在交互中加入動效可以增加操作的連貫性，經過多次操作能夠幫助用戶理解網站的信息架構。交互動效要以功能為主，遵循清晰聚焦、克制有度、自然流暢這三個核心原則，避免動效給使用者帶來信息干擾。

結論

企業網站界面視覺化設計應結合企業的信息構架，體現企業的文化理念，使企業品牌深入人心。企業網站界面信息架構的視覺化設計要遵循用戶體驗至上的原則，克服視覺轉化過程中因信息權重、信息異質、信息超載、信息邏輯等方面帶來的困難。從視覺元素的信息顯示秩序、視覺元素的信息表達效率、視覺元素的信息引導路徑三方面進行網站界面的視覺化設計。

參考文獻

【1】RosenfeldL，MorvilleP.InformationarchitecturefortheWorldWideWeb[M].北京：清華大學出版社，2003.[2]MichaelJ.Albers.InformationArchitecturefortheWorldWideWeb：DesigningLarge-ScaleWebSites（BookReview）.[J]JournalofBusiness&TechnicalCommunication，2000，14（4）：498-500.

【3】方學兵，金麗麗.人機界面視覺信息清晰度的可用性研究【J】.九江學院學報（社會科學版），2011，30（02）：105107.

【4】李文今，侯文君，秦憲剛等.基于認知理論的B2C網站信息架構評估模型研究【J】.北京郵電大學學報（社會科學版），2017，19（02）：39-43+52.

【5】王苗輝.基于視知覺的視覺信息界面設計研究【J】.包裝工程，2011，32（08）：49-51+55.

【6】劉書辰.《申報》文字排版設計解析——以其第21923號第13頁新聞版面為例【J】.設計，2019，32（17）：32-34.

【7】木村博之.圖解力：跟頂級設計師學作信息圖【M】.北京：人民郵電出版社.2013

【8】馬馳.圖形界面設計中的動態效果應用及趨勢探析【J】.設計，2019，32（20）：113-115.

【9】薛澄岐.復雜信息系統人機交互數字界面設計方法及應用【M】.南京：東南大學出版社，2015.

【10】袁義凡.近十年認知負荷在界面設計中的應用研究綜述【J】.設計，2020，33（17）：116-118.

【11】姬文淵，呂健，劉翔等.基于認知規律的用戶界面信息布局設計方法【J】.計算機工程與設計，2020，41（05）：1358-1366.