基于用戶體驗(yàn)的家具展示類網(wǎng)站設(shè)計(jì)研究

時(shí)間：2023-10-11 13:12:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-11 13:12:02 來源：網(wǎng)站運(yùn)營

基于用戶體驗(yàn)的家具展示類網(wǎng)站設(shè)計(jì)研究：工業(yè)革命以來，生產(chǎn)方式的改進(jìn)推動了現(xiàn)代設(shè)計(jì)、現(xiàn)代技術(shù)和現(xiàn)代藝術(shù)的同步發(fā)展，出現(xiàn)了大量的經(jīng)典家具設(shè)計(jì)。經(jīng)典之所以經(jīng)典，是因?yàn)榻?jīng)典家具設(shè)計(jì)的時(shí)代創(chuàng)新性、在家具設(shè)計(jì)史上的影響力以及設(shè)計(jì)美感都是不可否認(rèn)的。家具與互聯(lián)網(wǎng)于我們而言，都是日常生活中必不可少且高頻率使用的產(chǎn)品，但在產(chǎn)品更新迭代極快的新媒體互聯(lián)網(wǎng)時(shí)代，人們關(guān)注更多的是高科技產(chǎn)品、快時(shí)尚生活，常常忽略了這些頗具工匠精神的經(jīng)典產(chǎn)品設(shè)計(jì)。通過運(yùn)用新媒體技術(shù)將經(jīng)典家具產(chǎn)品用直觀、有趣的方式展示出來，同時(shí)注重用戶體驗(yàn)設(shè)計(jì)，為用戶營造愉悅感，以期更多人能夠了解經(jīng)典家具設(shè)計(jì)，同時(shí)輔助相關(guān)的學(xué)術(shù)研究。

1 基于用戶體驗(yàn)的網(wǎng)站設(shè)計(jì)概述

1.1 用戶體驗(yàn)

用戶體驗(yàn)是指產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾谓佑|和使用它[1]。包括用戶整體感知的與產(chǎn)品、服務(wù)或組織進(jìn)行交互的各個(gè)方面。用戶體驗(yàn)作為一個(gè)學(xué)科與構(gòu)成介面的所有元素相關(guān),包括版式、視覺設(shè)計(jì)、文本、品牌、聲音、交互等。用戶體驗(yàn)工作旨在協(xié)調(diào)這些元素為用戶創(chuàng)造最優(yōu)交互體驗(yàn)[2]。首先，用戶體驗(yàn)是非常主觀的。由于個(gè)體差異的影響，所以沒有確切的標(biāo)準(zhǔn)來進(jìn)行判斷。因?yàn)槊總€(gè)人的喜好、思維、心理狀態(tài)、情感訴求的方式等的不盡相同，導(dǎo)致產(chǎn)品對于不同用戶的作用是不一樣的，即使是相同的產(chǎn)品或服務(wù)，不同的用戶也可能會得到完全不同的體驗(yàn)，給予不同的評價(jià)。個(gè)性化、人性化的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)能大幅度提升用戶的使用體驗(yàn)，有利于實(shí)現(xiàn)了用戶體驗(yàn)角度下的互聯(lián)網(wǎng)產(chǎn)品生命周期的良性循環(huán)[3]。其次，用戶體驗(yàn)應(yīng)當(dāng)是整體體驗(yàn)。用戶體驗(yàn)不僅是針對于該網(wǎng)站的其中一部分，而是包括網(wǎng)站內(nèi)容、界面、交互性、效率等整個(gè)網(wǎng)站展現(xiàn)給用戶的整體感受。最后，用戶體驗(yàn)是有情境的，當(dāng)用戶使用不同設(shè)備的背景下，隨著環(huán)境和情況常常變化，有了很大的不確定性，因此用戶體驗(yàn)也會經(jīng)常變化。

1.2 用戶體驗(yàn)的表現(xiàn)形式及意義

是否具有好的用戶體驗(yàn)關(guān)乎到網(wǎng)站設(shè)計(jì)的成功與否。對于網(wǎng)站用戶體驗(yàn)的表現(xiàn)形式大體上可以分為以下5大類，感官體驗(yàn)、交互體驗(yàn)、情感體驗(yàn)、瀏覽體驗(yàn)和信任體驗(yàn)[4]。

感官體驗(yàn)主要是用戶視聽體驗(yàn)，偏重于使用時(shí)視覺和聽覺上的舒適體驗(yàn)；交互體驗(yàn)體現(xiàn)在用戶在使用網(wǎng)站時(shí)對網(wǎng)站進(jìn)行互動操作的體驗(yàn)，在這方面，網(wǎng)站的可用性和易用性的重要性則被凸顯出來；情感體驗(yàn)是關(guān)乎用戶心理狀態(tài)的體驗(yàn)，注重過程友好；瀏覽體驗(yàn)主要是吸引用戶瀏覽及更舒適的信息的識別與獲取的體驗(yàn)；信任體驗(yàn)指用戶更多地會選擇可信賴的網(wǎng)站進(jìn)行使用，網(wǎng)站為用戶營造一種可靠感。其中，視聽體驗(yàn)方面從設(shè)計(jì)風(fēng)格上來說，網(wǎng)站給人的第一印象就是它的設(shè)計(jì)風(fēng)格了，這關(guān)系到能否吸引到用戶停留并繼續(xù)使用，因此就要求設(shè)計(jì)師必須通過了解調(diào)研及分析目標(biāo)用戶，獲得用戶的審美習(xí)性，然后根據(jù)分析結(jié)論來確定網(wǎng)站的整體設(shè)計(jì)風(fēng)格，并依照整體風(fēng)格準(zhǔn)則進(jìn)行細(xì)化設(shè)計(jì)。這樣確定出來的網(wǎng)站設(shè)計(jì)的總體風(fēng)格才會更加容易接受，從而給使用者留下完美的第一印象[5]。網(wǎng)站設(shè)計(jì)中要依照整體設(shè)計(jì)風(fēng)格進(jìn)行整套的標(biāo)志設(shè)計(jì)、結(jié)構(gòu)設(shè)計(jì)、界面設(shè)計(jì)及圖標(biāo)設(shè)計(jì)等，有主有次，圖文位置規(guī)范，著重考慮整體性，以保證整體效果統(tǒng)一。另外，在使用網(wǎng)站的時(shí)候，所涉及的界面加載效果體驗(yàn)、動效、文本導(dǎo)航、甚至簡單的文字描述都應(yīng)該有清晰明確的定位，設(shè)計(jì)要容易被用戶理解以及保證易用性。要保證該網(wǎng)站是清晰易懂的這樣才不會在使用過程中給用戶帶來麻煩。除此之外還有聽覺體驗(yàn)效果，主要涉及到的內(nèi)容就是網(wǎng)站中音頻部分，要與網(wǎng)站所表達(dá)的內(nèi)容和諧統(tǒng)一，不能干擾正常的網(wǎng)站使用。總的來說，用戶體驗(yàn)在網(wǎng)站的各個(gè)部分都有所體現(xiàn)，貫穿整個(gè)網(wǎng)站設(shè)計(jì)，要求設(shè)計(jì)師和前端后臺人員充分配合，以用戶為中心，營造友好舒適的使用環(huán)境。

1.3 基于用戶體驗(yàn)的網(wǎng)站設(shè)計(jì)

James Garrett對網(wǎng)站的用戶體驗(yàn)極具操作性用戶體驗(yàn)5個(gè)層次模型：（1）戰(zhàn)略層，產(chǎn)品目標(biāo)和用戶需要；（2）范圍層，功能規(guī)格和內(nèi)容說明；（3）結(jié)構(gòu)層，交互設(shè)計(jì)與信息架構(gòu)；（4）框架層，介面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)；（5）表現(xiàn)層，視覺設(shè)計(jì)[6]。結(jié)合實(shí)踐需要總結(jié)出的基于用戶體驗(yàn)的網(wǎng)站開發(fā)流程見圖1。

前期用戶需求及情境分析。用戶是網(wǎng)站的實(shí)際使用者，在進(jìn)行信息架構(gòu)時(shí)應(yīng)事先明確網(wǎng)站的目標(biāo)用戶群，且要準(zhǔn)確掌握用戶群的具體情況，探究用戶使用網(wǎng)站的契機(jī)，作出適宜的情景分析，從而更加準(zhǔn)確地向用戶傳遞有效信息。

用戶體驗(yàn)設(shè)計(jì)。用戶體驗(yàn)設(shè)計(jì)并不是一種具體的設(shè)計(jì)方法，而是一種以用戶為中心的設(shè)計(jì)理念[7]。必須著重注意以下3點(diǎn)內(nèi)容：目標(biāo)用戶群、用戶的目的和習(xí)慣、達(dá)成目標(biāo)所必需的因素。要站在用戶的角度來探究什么樣的用戶體驗(yàn)是更加合適友好的。比如以尊重用戶習(xí)慣為例來說，雖然人們各有各的不同習(xí)慣，但是總有一些約定俗成的社會普遍認(rèn)可的行為方式，而人們往往會喜歡按照這種行為習(xí)慣進(jìn)行操作，人們會認(rèn)為這是友好、可靠的，因此，在設(shè)計(jì)時(shí)，要考慮到這一點(diǎn)，迎合用戶合理的行為習(xí)慣。比如網(wǎng)頁設(shè)計(jì)時(shí)PC端頁面導(dǎo)航居于界面頂部，手機(jī)端的網(wǎng)頁導(dǎo)航往往在左側(cè)和上側(cè)，Logo在頁面左上角、關(guān)閉或退出圖標(biāo)在右上角、網(wǎng)站相關(guān)信息在底部等，這些設(shè)計(jì)都是用戶習(xí)慣的，如果遵從這些方案可以幫助用戶降低學(xué)習(xí)難度，提升易用性。但并不是所有的習(xí)慣都是一成不變的，倘若有更佳的用戶體驗(yàn)的交互設(shè)計(jì)方案，可以對用戶進(jìn)行友善引導(dǎo)，使用戶習(xí)慣更合理舒適的交互方式。

網(wǎng)站結(jié)構(gòu)設(shè)計(jì)。網(wǎng)站的結(jié)構(gòu)是站內(nèi)信息數(shù)據(jù)的分類方式，是網(wǎng)站的骨架，在設(shè)計(jì)結(jié)構(gòu)時(shí)，要考慮到用戶的動線是否能夠在引導(dǎo)下保證他們在使用網(wǎng)站時(shí)能夠簡便快捷、清晰明了地找到自己所要的信息[8]，因此，如何做好網(wǎng)站結(jié)構(gòu)和信息數(shù)據(jù)的表現(xiàn)形式十分重要。網(wǎng)站結(jié)構(gòu)一般分為以下幾種：層級性分類結(jié)構(gòu)、分面分類型結(jié)構(gòu)、輻射型結(jié)構(gòu)、列表與內(nèi)容型結(jié)構(gòu)、直線型結(jié)構(gòu)。










界面設(shè)計(jì)。網(wǎng)站界面是和用戶產(chǎn)生最直接交流的部分，在界面設(shè)計(jì)中，要注意以下幾點(diǎn)。第一，界面設(shè)計(jì)要在用戶體驗(yàn)的基礎(chǔ)上進(jìn)行；第二，界面設(shè)計(jì)要考慮頁面的形式和基本要素；第三，界面設(shè)計(jì)的美觀性；第四，交互設(shè)計(jì)的應(yīng)用，打造良好的交互體驗(yàn)。

技術(shù)實(shí)現(xiàn)。針對于網(wǎng)站的具體設(shè)計(jì)采用適宜的技術(shù)，如Html5,JavaScript,CSS3等。如果做響應(yīng)式設(shè)計(jì)，在響應(yīng)式設(shè)計(jì)中要解決的問題有很多，比如圖片大小的問題，可以采用液態(tài)圖片，如圖片同比縮放技術(shù)，只要沒有另外規(guī)定圖片的具體寬度，頁面上所有的圖片就會以其原始寬度進(jìn)行加載，除非其容器可視部分的寬度小于圖片的原始寬度[9]。再如不同設(shè)備的布局問題，可以采用彈性布局，所謂彈性布局就是不對瀏覽器的寬度作任何設(shè)定，即非固定式布局，因而可以適應(yīng)不論是水平式的還是豎直式的終端設(shè)備[10]。

網(wǎng)站調(diào)試與發(fā)布。網(wǎng)站程序部分編寫完畢時(shí)，網(wǎng)站的基礎(chǔ)形態(tài)便形成了。隨后要對網(wǎng)站進(jìn)行可用性測試，從用戶體驗(yàn)出發(fā)，進(jìn)行細(xì)致觀察，并作出相關(guān)評估與分析總結(jié)，以便制定完善策略。解決完所有問題后，完成域名注冊，把網(wǎng)站上傳到虛擬主機(jī)空間，即完成發(fā)布。

后期維護(hù)、優(yōu)化、更新。網(wǎng)站上線后，并不代表工作完成，此時(shí)網(wǎng)站依然有許多沒有發(fā)現(xiàn)的漏洞，接下來要繼續(xù)完善，同時(shí)要對網(wǎng)站安全進(jìn)行維護(hù)以及網(wǎng)站內(nèi)容的更新迭代。此外，推廣網(wǎng)站也是必須要做的一項(xiàng)重要任務(wù)。

2 家具展示類網(wǎng)站設(shè)計(jì)實(shí)踐——Furny趣家

2.1 前期分析

設(shè)計(jì)師和用戶如同在跳交際舞，既要順應(yīng)著對方的步伐，又要進(jìn)行一定的引導(dǎo)。對方是一個(gè)人，不只是你感受的到他的溫度，他也聞得到你身上的味道，對你時(shí)時(shí)刻刻進(jìn)行著評價(jià)，因此我們有必要進(jìn)行準(zhǔn)確的網(wǎng)站定位和用戶相關(guān)分析。根據(jù)100份問卷調(diào)查總結(jié)得出以下分析。

本項(xiàng)目研究目的是通過直觀、有吸引力的趣味性的創(chuàng)意交互體驗(yàn)，以現(xiàn)代人最易接受的形式，將中外經(jīng)典家具設(shè)計(jì)生動形象地展示出來，讓用戶有主動選擇的愉悅感和更舒適的用戶體驗(yàn)，從而使更多人關(guān)注、了解中外經(jīng)典家具設(shè)計(jì)，普及家具文化，同時(shí)彌補(bǔ)傳統(tǒng)的家具展示方式的靜態(tài)不足、互動不足。為家具設(shè)計(jì)師提供資料，同時(shí)豐富教學(xué)內(nèi)容和方式，輔助相關(guān)研究。

目標(biāo)用戶：青少年、家具愛好者、相關(guān)專業(yè)師生、設(shè)計(jì)行業(yè)相關(guān)人士、追求品質(zhì)生活的人士等。

用戶特征：好奇心強(qiáng)，喜歡新鮮事物，樂于嘗試，愛好有趣的東西，對生活品質(zhì)有一定要求，尊重設(shè)計(jì)，十分適應(yīng)快時(shí)代生活，對網(wǎng)站加載速度有著較高的要求。

用戶痛點(diǎn)：當(dāng)想要通過網(wǎng)絡(luò)了解某些經(jīng)典家具設(shè)計(jì)時(shí)，苦于尋找相關(guān)資料，加上網(wǎng)上信息散亂、不全面、枯燥、含金量低，導(dǎo)致學(xué)習(xí)效率降低，耐性變差，產(chǎn)生糟糕情緒。

2.2 用戶體驗(yàn)設(shè)計(jì)

感官體驗(yàn)。界面視覺上色彩采用蒙德里安三原色，字體大方，版面秩序感好，個(gè)別家具展示視頻配樂高雅，與該展示頁所表達(dá)的內(nèi)容和諧統(tǒng)一，整體視聽體驗(yàn)佳。依照該設(shè)計(jì)風(fēng)格進(jìn)行整套的標(biāo)志設(shè)計(jì)、界面設(shè)計(jì)及圖標(biāo)設(shè)計(jì)等，有主有次，圖文位置規(guī)范，著重考慮整體性，以保證整體效果統(tǒng)一。

交互體驗(yàn)。體現(xiàn)在用戶在使用網(wǎng)站時(shí)對網(wǎng)站進(jìn)行互動操作的體驗(yàn)，在這方面，網(wǎng)站的可用性和易用性的重要性被凸顯出來，在設(shè)計(jì)時(shí)采用了大量的與各個(gè)家具產(chǎn)品本身息息相關(guān)的互動設(shè)計(jì)效果，有清晰明確操作提示，且易于理解，同時(shí)一改以往純圖文網(wǎng)站信息的繁雜與無趣，滿足用戶對趣味性和互動性的需求，同時(shí)可以激發(fā)學(xué)習(xí)欲望，有利于用戶獲得良好的產(chǎn)品體驗(yàn)；

情感體驗(yàn)。是關(guān)乎用戶心理狀態(tài)的體驗(yàn)，注重過程友好。如“贊助”界面采用友好的方式向用戶請求贊助資金，金額隨意，并表示感謝，使得用戶不會產(chǎn)生強(qiáng)烈排斥心理，以期用戶能在獲取有效信息和資料后樂于支持本網(wǎng)站的建設(shè)；“聯(lián)系我們”則采用界面內(nèi)顯示信息的方式而非新打開一個(gè)界面，提高了用戶使用網(wǎng)站時(shí)的效率，為用戶節(jié)省了時(shí)間，從而獲得更愉悅的體驗(yàn)。

瀏覽體驗(yàn)。趣味性頁面設(shè)計(jì)吸引用戶瀏覽，同時(shí)注重更舒適的信息的識別與獲取的體驗(yàn)。

信任體驗(yàn)。用戶更多地會選擇可信賴的網(wǎng)站進(jìn)行使用，網(wǎng)站為用戶營造一種可靠感。針對用戶有購買產(chǎn)品的需求而設(shè)立“Furny商店”，提供便利的周邊產(chǎn)品和家具產(chǎn)品分類，購買采用鏈接形式，以大家常用的淘寶為平臺進(jìn)行交易，增強(qiáng)用戶購買時(shí)的信任感；再如“聯(lián)系我們”則采用界面內(nèi)顯示信息的方式而非新打開一個(gè)界面，提高了用戶使用網(wǎng)站時(shí)的效率，為用戶節(jié)省了時(shí)間，從而獲得更愉悅的體驗(yàn)，同時(shí)，聯(lián)絡(luò)信息公開透明，增加了用戶信賴度，提高了可靠感，一定程度上加強(qiáng)了用戶忠誠度。

2.3 功能架構(gòu)、流程、原型設(shè)計(jì)

Furny功能架構(gòu)見圖2,Furny流程圖見圖3,Furny原型設(shè)計(jì)見圖4。

2.4 界面及視覺設(shè)計(jì)

2.4.1 Logo及圖標(biāo)設(shè)計(jì)

由于本網(wǎng)站匯集世界經(jīng)典家具設(shè)計(jì)，家具形式多樣，交互動效、畫面豐富，因此為盡量避免視覺干擾，對整體的界面風(fēng)格采用簡約經(jīng)典風(fēng)格，以達(dá)到不影響家具展示效果的目的。在Logo和圖標(biāo)設(shè)計(jì)上保持統(tǒng)一性，Logo及圖標(biāo)設(shè)計(jì)見圖5，依據(jù)經(jīng)典、簡約、扁平風(fēng)格，通過純色黑、白、紅3種經(jīng)典色彩作為圖標(biāo)元素設(shè)計(jì)，給人安全、可靠的感覺，增強(qiáng)用戶信賴度，同時(shí)，圖標(biāo)簡約大方，不會過分影響到視覺效果更為豐富的家具展示界面從而影響經(jīng)典家具文化主體信息的傳達(dá)。在每個(gè)單獨(dú)的家具界面都有“more”圖標(biāo)，圖標(biāo)設(shè)計(jì)以紅色為底色，十分醒目，可以引導(dǎo)用戶去點(diǎn)擊，從而了解更多相關(guān)信息。

2.4.視覺及交互動效設(shè)計(jì)

界面整體以簡約大方為主題風(fēng)格，主頁以蒙德里安三原色彩色標(biāo)簽導(dǎo)航為主體，吸引用戶眼球，隨后用戶可點(diǎn)擊進(jìn)入各個(gè)家具界面，或通過頂部下拉導(dǎo)航進(jìn)入其他功能頁面或信息頁面，各信息界面設(shè)計(jì)見圖6。在各功能及信息界面設(shè)計(jì)中統(tǒng)一采用黑、白、紅3色作為主色，同樣采用極致簡約的設(shè)計(jì)風(fēng)格，界面規(guī)劃清晰有條理，用戶學(xué)習(xí)時(shí)間成本低，從而提高學(xué)習(xí)效率，同時(shí)提高使用愉悅感。以主頁為例，將Logo放在用戶所普遍習(xí)慣的頁面左上方，下標(biāo)置于頁面底部，關(guān)閉圖標(biāo)置于右上角，導(dǎo)航位于界面頂部，界面中心為各個(gè)家具界面的引導(dǎo)標(biāo)簽，色彩上采用蒙德里安作品經(jīng)典色——紅、黃、藍(lán)及其鄰近色為主色調(diào)，色彩時(shí)尚、飽滿。家具標(biāo)簽采用可以通過鼠標(biāo)或觸屏進(jìn)行左右滑動，最中心的家具標(biāo)簽突出最大，以表示用戶當(dāng)前所選為該標(biāo)簽。













各家具界面設(shè)計(jì)見圖7，以經(jīng)典家具本身設(shè)計(jì)文化內(nèi)涵為中心進(jìn)行相關(guān)界面設(shè)計(jì)，將與其設(shè)計(jì)內(nèi)涵適宜的交互動效融入到各個(gè)界面設(shè)計(jì)中，在交互動效設(shè)計(jì)與平面視覺設(shè)計(jì)的共同作用下，完成經(jīng)典家具界面的設(shè)計(jì)。




在各個(gè)家具展示頁面中，視覺設(shè)計(jì)部分將重要內(nèi)容如家具產(chǎn)品及介紹明顯且清晰展示，同時(shí)具有一致的元素色彩及品牌識別性；界面設(shè)計(jì)部分頁面布局清晰，交互和非交互元素區(qū)分明顯；導(dǎo)航設(shè)計(jì)部分導(dǎo)航分類清晰；信息設(shè)計(jì)有通俗易懂的文案和清晰的選項(xiàng)；信息架構(gòu)中信息分類清晰、層級關(guān)系明確、任務(wù)路徑清晰；交互設(shè)計(jì)部分具備及時(shí)的操作反饋、操作結(jié)果符合用戶心理預(yù)期、避免了重復(fù)或過多的操作、遵循慣例；功能規(guī)格部分提供了用戶需要和期望的家具信息庫功能，同時(shí)對較為復(fù)雜或特殊的的操作給予幫助；內(nèi)容上為用戶提供了必要但不過多的家具信息。

在使用時(shí)所涉及的界面采用細(xì)膩貼心的加載效果體驗(yàn)、易于理解和操作的互動動效、清晰明確的導(dǎo)航系統(tǒng)、適當(dāng)?shù)贿^多的信息提示，使設(shè)計(jì)容易被用戶理解以保證其易用性。

植物椅界面見圖8，它由英國設(shè)計(jì)師R&E Bouroullec設(shè)計(jì)，該椅子的特點(diǎn)是如植物一樣自然生長的結(jié)構(gòu)，植物在園藝技術(shù)的影響下按照一開始所設(shè)定好的形態(tài)生長，而該椅子也是仿照植物汁液似得通過液態(tài)塑料流動制成，這也是椅子的生長概念在工藝上的體現(xiàn)。在此設(shè)計(jì)理念的背景下，在界面設(shè)計(jì)上采用了植物元素，以生長的植物作為界面內(nèi)的視覺中心，將植物椅放在視覺中心偏右處，與生長的植物互相配合，在頁面右上角設(shè)有花灑圖標(biāo)，并給予用戶明確的文字提示，用戶通過點(diǎn)擊右上角花灑圖標(biāo)，觸發(fā)下方植物生長，通過模擬植物澆水形成生動形象的植物動態(tài)生長效果幫助用戶更深入理解植物椅的設(shè)計(jì)理念。左側(cè)是植物椅簡要介紹及更多資料鏈接“more”圖標(biāo)，用戶可點(diǎn)擊“more”圖標(biāo)進(jìn)入鏈接頁面獲取更多相關(guān)圖片、視頻、文獻(xiàn)資料等，為用戶提供全面、可靠的學(xué)習(xí)資源。

2.5 基層語言及響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)

2.5.1 基層語言

根據(jù)界面和交互動效設(shè)計(jì)，所需要的基層語言有HTML5、CSS3、JavaScript。對一個(gè)網(wǎng)頁來說，HTML用于網(wǎng)頁結(jié)構(gòu)的搭建，CSS用于網(wǎng)頁樣式的描述，JavaScript用于網(wǎng)頁相關(guān)設(shè)置。HTML5是該語言的第五次重大修改，其優(yōu)點(diǎn)是可以提高可用性及友好的用戶體驗(yàn)、支持多媒體元素、能夠代替Flash和Silverlight，支持多種設(shè)備，支持跨平臺，支持自適應(yīng)網(wǎng)頁設(shè)計(jì)，支持即時(shí)更新等。CSS（層疊樣式表），樣式定義如何顯示HTML元素，其語法為selector{property:value}(選擇符{屬性：值})[11]。CSS3是升級版本，向著模塊化發(fā)展，現(xiàn)已有更多的模塊加入，大大緩解了曾經(jīng)只有一個(gè)模塊盒子所造成的龐大與復(fù)雜程度。JavaScript是一種腳本語言，其源代碼在發(fā)往客戶端運(yùn)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行，支持跨平臺?？梢詾榫W(wǎng)頁增加動態(tài)設(shè)計(jì)。

2.5.2 響應(yīng)式設(shè)計(jì)

在本網(wǎng)站的設(shè)計(jì)中采用響應(yīng)式設(shè)計(jì)，以適應(yīng)不同屏幕尺寸，而不是僅僅局限于某一種設(shè)備尺寸。響應(yīng)式網(wǎng)頁設(shè)計(jì)是Ethan Marcotte在2010年提出的，最初是指可以自動識別屏幕寬度，并作出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，現(xiàn)擴(kuò)展為頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶的行為以及設(shè)備環(huán)境，能夠進(jìn)行自動的響應(yīng)和相應(yīng)的調(diào)整，做到“一源多屏”[12,13]。

2.5.3 調(diào)試與發(fā)布

網(wǎng)站交互的動態(tài)網(wǎng)頁制作過程的最后，即為網(wǎng)頁調(diào)試和發(fā)布。很多問題是在調(diào)試過程中才被發(fā)現(xiàn)的，隨后及時(shí)對此進(jìn)行修正，以求達(dá)到設(shè)計(jì)時(shí)的預(yù)期效果，以便在發(fā)布后本網(wǎng)站能夠更好地為用戶服務(wù)。調(diào)試期間，首先以電腦端為基準(zhǔn)，對界面和交互動效進(jìn)行調(diào)試，方案確定后再將網(wǎng)站進(jìn)行響應(yīng)式移動端與電腦端協(xié)調(diào)調(diào)試響應(yīng)式設(shè)計(jì)，以潘頓椅界面為例，調(diào)試出適應(yīng)不同尺寸設(shè)備界面效果，F(xiàn)urny響應(yīng)式設(shè)計(jì)見圖9。最終經(jīng)過32次的細(xì)節(jié)調(diào)整完成調(diào)試，及制作后臺、完善數(shù)據(jù)、發(fā)布網(wǎng)站。發(fā)布后，對網(wǎng)站進(jìn)行及時(shí)查看與確認(rèn)，發(fā)現(xiàn)問題及時(shí)解決，以確保用戶正常使用。

2.6 網(wǎng)站維護(hù)、優(yōu)化與更新

體驗(yàn)的優(yōu)化、數(shù)據(jù)的更新、以及用戶的問題與建議是十分重要的。用戶通過提交反饋及上傳相關(guān)家具資料實(shí)現(xiàn)用戶與本站之間的溝通交流。不僅要主動對網(wǎng)站體驗(yàn)進(jìn)行優(yōu)化處理，而且要深切結(jié)合用戶反饋信息，定期對網(wǎng)站所回收的用戶數(shù)據(jù)進(jìn)行處理、分析，進(jìn)一步對本站進(jìn)行設(shè)計(jì)及技術(shù)上的優(yōu)化處理，作出適宜的改進(jìn)以及數(shù)據(jù)更新。

3 結(jié)語

在互聯(lián)網(wǎng)盛行的時(shí)代背景下，隨著HTML5、CSS3、JavaScript技術(shù)的改進(jìn)和開發(fā)，這對設(shè)計(jì)和實(shí)現(xiàn)一個(gè)具有優(yōu)良互動和舒適用戶體驗(yàn)的網(wǎng)站是十分有利的。將互聯(lián)網(wǎng)與經(jīng)典家具設(shè)計(jì)文化相結(jié)合，將科學(xué)技術(shù)與藝術(shù)形式進(jìn)行創(chuàng)新性融合[14,15,16]，使經(jīng)典家具設(shè)計(jì)文化以現(xiàn)代人最易接受的互聯(lián)網(wǎng)形式推廣、傳承。項(xiàng)目通過新媒體形式下的交互式網(wǎng)站設(shè)計(jì)實(shí)踐將經(jīng)典家具呈現(xiàn)在公眾視野面前，展示的產(chǎn)品能與受眾產(chǎn)生互動，為用戶提供最直觀的展示方式、趣味性設(shè)計(jì)和獨(dú)具特色的空間，讓用戶產(chǎn)生愉悅感，獲得更舒適的用戶體驗(yàn)，使受眾群體由傳統(tǒng)的參觀者變成能親自參與的體驗(yàn)者，普及家具文化內(nèi)涵[17]，使更多人關(guān)注、了解中外經(jīng)典家具設(shè)計(jì)，同時(shí)輔助相關(guān)教學(xué)研究。