瑞睿　高俊虹

摘? 要：隨著計算機與互聯網融合時代的到來，網站界面設計已成為當下企業(yè)宣傳推廣的媒介之一。在網站界面設計中想要大眾了解企業(yè)和產品，就必須充分考慮到大眾可得信息的接收、色彩上的觀感、視覺呈現效果的處理等問題，使用戶在心情愉悅的同時能夠迅速掌握有用信息，避免無用信息的干擾。所以網站界面設計的結構、內容、圖像、文字應盡量地化繁為簡、簡中求美、通俗易懂，達到輕量化的效果。

關鍵詞：用戶認知；網站界面；植物科普；輕量化設計

基金項目：本文系內蒙古自治區(qū)直屬高?；究蒲袠I(yè)務項目（22NYJB01）研究成果。

一、國內植物科普網站界面設計現狀分析

根據百科網前三頁的檢索信息，包含植物科普信息的國內植物類科普網站類別大致分為植物百科網站、植物數據庫網站、植物園網站、植物花卉網站和植物保護網站五大類。植物百科網站主要以了解植物為中心，在界面上簡單易操作，但內容上過于冗雜，沒有系統的整理，所以，其全面性和權威性有待商榷；植物數據庫網站是專門的科普門戶網站，后臺系統性較強，檢索功能系統完善，這類網站是以學習植物知識、植物學相關研究為主；植物園網站與園林、森林公園網站的性質相同，都是以觀賞性旅游景點吸引游客的網站，具有營銷策略的服務功能，來宣傳和推廣植物文化及旅游產業(yè)的發(fā)展。這也是目前互聯網+旅游的重點項目；植物花卉網站主要以售賣、了解種植為主，這類網站有專門的銷售渠道系統；植物保護網站是專門保護者協會組建的，具有相關的政策服務系統，后臺系統性較強。以下從三個方面進行分析。

（一）從網站導航欄設計方面分析。導航欄設計是整個網站的指南針，對網站起著不可或缺的作用。一些好的網站為了能夠使讀者瀏覽下去，都是將它放在頂部位置，從左到右順序排列，數量上限制在7個或7個以內。在導航欄功能中“首頁”與標志設計的功能相同，可以使網站回到初始首頁的位置。以植物百科網站導航欄設計為例（如圖1），其關鍵詞超過了7個，并且這些植物沒有進行合理歸類，使導航欄整體看來過于繁重、擁擠且不美觀。

（二）從色彩風格和標志設計方面分析。在網站界面設計中，區(qū)別于競爭對手的最好形式是有一個好的標志設計，它是一個企業(yè)必備的名片，體現著一個企業(yè)的知名度、影響力等。但是，在本研究所查到的網站中，絕大多數的植物類科普網站的界面顏色都是以綠色為主，大部分標識設計均缺乏識別性、顯著性和準確性，過于同質化。有的植物科普網站的標志設計過于復雜化，表現形式是以用葉子做圖案設計或是以名稱的文字進行設計（如圖2、圖3）。

（三）從網站布局和內容板塊方面分析。首頁設計上分為全屏式、瀑布式結構。全屏式結構的區(qū)域是固定的，不可下滑，電腦分辨率多大，那么網站首頁的寬高就多大，缺點是展示的重要信息不能及時地讓用戶看到；瀑布式結構的區(qū)域是不固定的，可下滑，根據客戶需求可以加內容，但不能過多。內容板塊的設計是根據客戶想要展示的內容進行添加的，在進行網站設計時，設計師一般都會遵循客戶的需求而忽視用戶的需求，這使得有的界面列表頁、內容信息重復和單一。以植物百科網網站為例（如圖4），網站首頁中部到以下都是列表，文字內容部分過多，會使用戶的興趣度降低，這部分列表信息應在子頁的板塊區(qū)域進行展示。有的植物科普網站內容區(qū)域過于單一并且冗雜，文字部分的占比比圖片還要大（如圖5）。

綜上，設計師不僅要考慮用戶的需求，還要考慮用戶實際所需的信息，首先要做的就是從用戶認知的視角去考慮問題。并且，不管從導航欄設計上、色彩風格上、標志設計上還是頁面布局和內容信息上都要進行改進與創(chuàng)新，

二、網站界面信息應以用戶情緒認知理論為前提

在用戶體驗中，最應該關注的是用戶情緒，情緒是在較短時間內刺激的一種外放的態(tài)度。在Siminov（1997）的情緒認知信息理論中把個體所獲得的信息作為一種情緒預測的變量，對交互設計有一定啟發(fā)性。如果一個有機體因缺乏信息而不能適當地組織自己，那么神經機制就會使負面情緒開始行動。Siminov認為，情緒等于“必要信息”與“可得信息”之差，并以“需求”作為系數，即：E=N（Ia-In）。其中E為情緒水平，Ia為必要信息，In為可得信息，N為需求。Siminov 認為，當有機體需要的信息等于可得的信息時，有機體的需要得到滿足，情緒便是沉寂的。如果可得信息超出了有機體預期的需要，便會產生積極的情緒；反之，則會產生消極情緒。積極的情緒和消極的情緒都可以促進行為[1]。

根據情緒認知理論，情緒主要受到外部環(huán)境、生理和認知過程三方面因素的影響，其中最為關鍵的決定情緒性質的是認知過程這一因素。認識過程，又稱認知過程，是人最基本的心理過程，它是人腦對客觀事物的屬性及其規(guī)律的反映。認識過程包括感覺、知覺、記憶、思維和想象等[2]23。感覺和知覺都是人腦對直接作用于感覺器官的客觀事物的反映，客觀事物是感覺和知覺的源泉[2]26。人的感覺依據刺激的來源，可以分為兩大類：外部感覺和內部感覺。外部感覺接受外部刺激，反映外界事物的屬性，包括視覺、聽覺、味覺、嗅覺和皮膚覺；內部感覺接受機體內部的刺激并反映它們的狀態(tài)，包括動覺、平衡覺和機體覺。視覺是我們認識外部世界的主導感覺，在各個感覺中占比是第一位的。一個正常的人從外界接受的全部信息中，有80%-90%是通過視覺獲得的[2]27。因此，在網站設計中想要大眾了解企業(yè)和產品，就必須充分考慮到大眾可得信息的接收、色彩上的觀感、視覺呈現效果的處理等，使用戶在心情愉悅的同時能夠迅速掌握到有用信息，避免無用信息的干擾。

自人類誕生以來，從裝飾主義到功能主義再到現代主義，一直都在追尋著美麗的事物。網站界面設計也是如此。起初在網站功能單一的時代，人們就對計算機和互聯網有著濃厚的興趣。隨著人們物質基礎的豐厚，大眾開始追求華麗繁瑣，使得網站的功能負重力越來越大，內容信息冗雜堆砌，導致出現了大眾接收不到必要的信息、色彩上所帶來的觀感繁復、興趣下降等問題。因此，要以用戶情緒認知理論為前提解決這些問題，比如內容冗雜應化繁為簡使讀者便于解讀，負重就應減輕，使網站在加載時快速便捷。在Raj Lalz的Digital Design Essentials 一書中關于界面設計最佳的經驗與準則中提到了“輕量化設計——選擇具有視覺美感的顏色和布局”這一準則，為我們的界面設計提供了有力依據。所以基于用戶認知視角下，進行輕量化設計是首要問題。

三、輕量化設計理念

（一）輕量化是一個涵義非常廣泛的設計準則，其目標是減輕工業(yè)品的重量。輕量化廣泛應用于運動的機械零件、交通工具以及運動器械中。在這些領域中采用輕量化的動機主要是達到更高的加速度、提高有效載荷以及減少能源消耗等。輕量化的應用領域非常廣泛，從一般機械制造（如機器人、包裝機械、體育用品等）、能源生產設備（如風力發(fā)電機）到汽車與飛機制造直至航天飛機與太空站的構造[3]。輕量化設計主要受到以下為現代主義設計做出突出貢獻的代表人物的設計思想的影響。

1.勒·柯布西耶的設計思想奠定了現代主義的基礎，他反復強調：建筑應該是生活于其中的機器[4]110。

2.米斯·凡德洛的設計思想，提出“少則多”的設計原則[4]114。對于結構本身所呈現出的美感始終貫穿于主題，而在形式上大力刪減從而突出設計的功能性。

3.芬蘭現代設計師阿爾瓦·阿圖的有人情味的設計。他在強調功能、民主化的同時，探索一條更加具有人文色彩、更加重視人的心理需求滿足的設計方向[4]121。

（二）隨著經濟的蓬勃發(fā)展和汽車行業(yè)的增多，為了減少材料的浪費以及加強資源和環(huán)境的保護，汽車行業(yè)不斷地進行探索，使其在輕量化設計方面成果較為顯著，也為其他行業(yè)提供了有效實踐與理論基礎。這一點也為筆者在網站設計上提供了思路和借鑒。汽車輕量化的重要方法有以下三點：

1.材料輕量化，減少白車身重量。選擇合適的材料對車身重量有著重要影響，材料輕量化，直接影響著車身輕量化，在確保車身性能不受影響的前提下，要優(yōu)先選擇成本低、可持續(xù)性好及易加工成型的車身材料。

2.車身結構優(yōu)化設計。結構優(yōu)化設計是車身輕量化的關鍵，車身輕量化發(fā)展之初，更多依賴于工程技術人員的反復試錯，往往研發(fā)時間長而效果甚微。隨著輕量化技術的不斷提升，結構優(yōu)化設計也逐漸向縱深發(fā)展，通過有限元等數值方法加上計算機輔助技術和迭代計算，找到最優(yōu)結構方案，不但提高了設計效率和質量，而且節(jié)約了人力和財力成本。

3.成型工藝和連接技術優(yōu)化[5]?；谳p量化設計理念，如何使網站界面設計在面對龐大的信息量時以簡馭繁、怎樣用外觀吸引大眾的同時接收到必要信息是目前我們網站界面設計所要解決的重要問題。

四、植物科普網站界面的輕量化設計策略

基于用戶認知視角下我們應如何利用輕量化進行植物科普網站界面設計呢？首先從字面上解析，界面設計就是要“輕盈”“簡潔”“質量”。所以在網站界面設計上，內在的輕量化需要與其外在的表現相匹配才能做到真正的“輕”。輕量化設計在外觀上追求適當不冗余的設計，“‘裝飾作為人類本能的需求和溫飽以后實現更高精神需求的一種天才活動，有‘度的把握被認為是通向美和罪惡的分水嶺”[6]。界面的簡潔是要讓用戶便于使用、便于了解，并能減少用戶發(fā)生錯誤選擇的可能性。要根據用戶的行為習慣，通過清晰的流程和界面，讓用戶減少對每一次選擇的思考以及尋找的時間，讓準確的色彩和表述減少用戶心理斗爭的時間。通過不斷地調研，用各種可用性實驗來計算用戶在每一個界面下所需思考的時間，得到的結論是：最好的頁面設計就是用戶耗費時間最少的那個頁面[7]46。其次是根據上述所講的汽車輕量化的重要方法，結合我們植物科普網站實際問題做出策略方法。界面設計的質量在于功能上的操作便捷，界面是實現人機交互和操作邏輯的終端體驗端， 是用戶最先接觸到的層面，服務于人的操作。好的界面設計不僅能讓產品變得有個性、有品味，還要讓操作變得舒適、簡單和自由[7]46。所以網站界面的結構、內容、圖像、文字應適當地化繁為簡、簡中求美。

（一）內容信息輕量化

在當下科學普及、信息冗雜的時代背景下，我們需要對植物科普網站的內容信息突出重點、避免繁瑣、簡潔易懂，為讀者節(jié)約不必要的時間，方便讀者閱覽頁面內容。內容信息可以采取圖像與文字結合的方式（如圖6），圖像可以是照片、插畫或圖形。插畫和圖形的特點在于能夠吸引讀者的視線，也能使界面更加具有特色；文字信息在于突出發(fā)布的時間和簡要的關鍵詞，例如植物科普網站就要重點突出植物特點、植物功能、生長環(huán)境、地域分布等關鍵詞。

（二）圖像信息輕量化

隨著相機的像素越來越高，內存越來越大，我們需要對圖像進行裁剪，同時，還要考慮保證圖片的分辨率和清晰度、網站是否能夠加載等問題。解決的辦法是限定圖片的尺寸以保障它的清晰度，或者利用圖形插畫設計進行代替。圖形插畫設計可以使整個界面外觀豐富，不再只是圖片上的選擇。關鍵詞也可以進行圖案和插畫設計（如圖7）。如手機上的UI設計，它的可操作性使用戶用起來更加地舒適便捷；又如地圖軟件上常出現的路線圖標、酒店圖標、景點圖標等，教育軟件上的學習功能圖標等，這些圖標都可以進行轉換運用到網站界面設計上，不僅讓用戶有“點”進去的欲望，更能使網站界面不再單一化。

（三）標志設計輕量化

標志設計是網站界面設計的引領者，標志是企業(yè)或公司綜合信息傳遞的橋梁。標志設計依據它特有的獨特性功能，使企業(yè)或公司不允許有一絲一毫的雷同，這就要求設計師在進行標志設計時必須要獨特別致、簡明突出，呈現不一樣的視覺效果，使其具有創(chuàng)造性、獨特性，這樣才會給人留下深刻的印象。標志的表現形式可以分為圖像與文字結合模式、聲音記憶模式和觸摸記憶模式，在網站界面設計中，主要以圖像與文字結合為主。目前的植物科普網站的標志設計過于復雜、同質化嚴重，應吸收下面植物網站標志設計優(yōu)點，簡約、獨特性強（如圖8）。

（四）界面布局輕量化

界面布局的整體設計決定著大眾是否為此停留，從而進一步地進行學習，所以在顏色和布局上是至關重要的。一般流程是設計師先確定標志設計，之后在標志設計的輔助色上進行汲取和提煉，再結合客戶給的圖片文字進行整體的網站界面設計（如圖9）。網站界面設計一般以首頁設計為重點，因為其是大眾首先瀏覽的界面，其次是子頁的設計。首頁中較為重要的部分是banner的展示和導航信息。界面設計的尺寸是按照目前電腦最大的分辨率來設置的1920*1080px，寬度一定是在1920px，長度是可變的，主要展示區(qū)域的寬度是1200px，字體最小16px，不能過大，否則會影響用戶的閱覽。整體上下排序采用1920px、1200px、1920px的布局方式（如圖10）。1920px是指背景要以1920px為主，內容還是1200px；1200px是指沒有背景，內容以1200px為主。導航欄上的關鍵詞限定在7個或7個以內，內容信息展示一到三個，采用三一三排序方式和整體界面相呼應。

五、結語

本文利用輕量化設計，以化繁為簡、簡中求美為設計思路，幫助植物科普網站界面設計實現最優(yōu)方案，力圖做到以下幾點：以圖文方式呈現的內容信息有利于讀者閱讀，并認識和接收到有用信息；從圖像信息上使網站界面設計更加多樣，更加輕便；從標志上更容易使用戶記憶，有效地宣傳植物科普網站；從內容到形式的界面布局，以內容為主體，形式外化，使大眾享受視覺盛宴。目前本研究還存在一些問題，比如樣本量不足、摻雜一些主觀的想法等。后續(xù)會加大樣本量，盡量以客觀數據進行分析，完善用戶認知視角下網站界面設計輕量化的研究。

參考文獻：

[1]顧振宇.交互設計原理與方法[M].北京：清華大學出版社，2016：41.

[2李寧，李屏.心理學[M].武漢：華中科技大學出版社，2014.

[3]德吉舍爾，呂夫特.輕量化：原理、材料選擇與制造方法[M].陳力禾，譯.北京：機械工業(yè)出版社，2011.

[4]王受之.世界現代設計史[M].北京：中國青年出版社，2002.

[5]張娜，等.車身輕量化設計方法及應用[J].汽車實用技術，2022（10）：179-183.

[6]杭間.設計的善意[M].桂林：廣西師范大學出版社，2011：168.

[7]張波.淺論界面設計的“簡”與“繁”[J].美與時代（上），2015（8）：46-47.

作者簡介：瑞睿，內蒙古藝術學院碩士研究生。研究方向：視覺傳達設計。

通訊作者：高俊虹，博士，內蒙古藝術學院教授。研究方向：視覺傳達設計。

編輯：劉貴增