用戶認(rèn)知視角下網(wǎng)站界面輕量化設(shè)計(jì)研究

瑞?！「呖『?/p>

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

關(guān)鍵詞：用戶認(rèn)知；網(wǎng)站界面；植物科普；輕量化設(shè)計(jì)

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

一、國內(nèi)植物科普網(wǎng)站界面設(shè)計(jì)現(xiàn)狀分析

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

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

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

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

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

二、網(wǎng)站界面信息應(yīng)以用戶情緒認(rèn)知理論為前提

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

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

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

三、輕量化設(shè)計(jì)理念

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

1.勒·柯布西耶的設(shè)計(jì)思想奠定了現(xiàn)代主義的基礎(chǔ)，他反復(fù)強(qiáng)調(diào)：建筑應(yīng)該是生活于其中的機(jī)器[4]110。

2.米斯·凡德洛的設(shè)計(jì)思想，提出“少則多”的設(shè)計(jì)原則[4]114。對(duì)于結(jié)構(gòu)本身所呈現(xiàn)出的美感始終貫穿于主題，而在形式上大力刪減從而突出設(shè)計(jì)的功能性。

3.芬蘭現(xiàn)代設(shè)計(jì)師阿爾瓦·阿圖的有人情味的設(shè)計(jì)。他在強(qiáng)調(diào)功能、民主化的同時(shí)，探索一條更加具有人文色彩、更加重視人的心理需求滿足的設(shè)計(jì)方向[4]121。

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

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

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

3.成型工藝和連接技術(shù)優(yōu)化[5]。基于輕量化設(shè)計(jì)理念，如何使網(wǎng)站界面設(shè)計(jì)在面對(duì)龐大的信息量時(shí)以簡(jiǎn)馭繁、怎樣用外觀吸引大眾的同時(shí)接收到必要信息是目前我們網(wǎng)站界面設(shè)計(jì)所要解決的重要問題。

四、植物科普網(wǎng)站界面的輕量化設(shè)計(jì)策略

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

（一）內(nèi)容信息輕量化

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

（二）圖像信息輕量化

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

（三）標(biāo)志設(shè)計(jì)輕量化

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

（四）界面布局輕量化

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

五、結(jié)語

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

參考文獻(xiàn)：

[1]顧振宇.交互設(shè)計(jì)原理與方法[M].北京：清華大學(xué)出版社，2016：41.

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

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

[4]王受之.世界現(xiàn)代設(shè)計(jì)史[M].北京：中國青年出版社，2002.

[5]張娜，等.車身輕量化設(shè)計(jì)方法及應(yīng)用[J].汽車實(shí)用技術(shù)，2022（10）：179-183.

[6]杭間.設(shè)計(jì)的善意[M].桂林：廣西師范大學(xué)出版社，2011：168.

[7]張波.淺論界面設(shè)計(jì)的“簡(jiǎn)”與“繁”[J].美與時(shí)代（上），2015（8）：46-47.

作者簡(jiǎn)介：瑞睿，內(nèi)蒙古藝術(shù)學(xué)院碩士研究生。研究方向：視覺傳達(dá)設(shè)計(jì)。

通訊作者：高俊虹，博士，內(nèi)蒙古藝術(shù)學(xué)院教授。研究方向：視覺傳達(dá)設(shè)計(jì)。

編輯：劉貴增