2021-06-30 分類(lèi): 網(wǎng)站設(shè)計(jì)
目前這個(gè)互聯(lián)網(wǎng)中網(wǎng)站設(shè)計(jì)是非常重要的,只要把網(wǎng)站的頁(yè)面設(shè)計(jì)的“漂亮”才可以留下用戶,如果你的設(shè)計(jì)不合格,即使你網(wǎng)站的功能再?gòu)?qiáng)勁,你的產(chǎn)品再好都不會(huì)留下用戶,因?yàn)轫?yè)面是用戶第一映像。
作為一個(gè)網(wǎng)站設(shè)計(jì)師和開(kāi)發(fā)者,我們所設(shè)計(jì)的每個(gè)項(xiàng)目都有特定的目標(biāo)與需求。但同時(shí)也有一個(gè)共同的目標(biāo),即要給用戶留下深刻的印象,讓他們難以忘記。富有趣味性的體驗(yàn),往往可以給人帶來(lái)愉悅的感受,而愉悅的感受往往讓人難以忘懷。所以要想設(shè)計(jì)出讓人印象深刻的網(wǎng)站,增添一些趣味性元素便是設(shè)計(jì)方法之一。
Jeremy Girard在Smashing Magazine上發(fā)表了《A Fun Approach To Creating More Successful Websites》一文,其中例舉了一系列成功網(wǎng)站,它們巧妙利用趣味性元素,取得了很大的成功——打動(dòng)了用戶的心,并給用戶留下了深刻的印象。CSDN對(duì)該文進(jìn)行了編譯,內(nèi)容如下:
從The Fun Theory網(wǎng)站談起
前段時(shí)間,我收到The Fun Theory網(wǎng)站的鏈接(它是大眾汽車(chē)投資的項(xiàng)目)。該網(wǎng)站以某個(gè)大賽為主要內(nèi)容,鼓勵(lì)用戶重新設(shè)計(jì)或思考他們?cè)谌粘I钪杏龅降氖虑椤瑫r(shí)要向其中增加一些趣味性。設(shè)計(jì)的作品要足夠有趣,吸引更多的人方便地使用它們。
在該網(wǎng)上發(fā)布的眾多視頻中,我最喜歡一個(gè)名稱(chēng)為“Piano Staircase”的視頻。在這個(gè)視頻中,設(shè)計(jì)對(duì)象是地鐵里的一段樓梯。在該樓梯旁邊有一個(gè)電梯,正如我們預(yù)想的那樣,平時(shí)大部分的人在往返的過(guò)程中都會(huì)使用電梯,而不會(huì)光顧樓梯。
某天晚上,該地鐵站點(diǎn)關(guān)畢后,這段電梯變成了一個(gè)巨大的鋼琴琴鍵,人踩上去還會(huì)伴有音樂(lè)聲。第二天,當(dāng)行人再次經(jīng)過(guò)該站點(diǎn)時(shí),他們被這個(gè)巨大的鋼琴樓梯吸引了,很多人優(yōu)先選擇嘗試這個(gè)“鋼琴”,而放棄了使用電梯。事實(shí)上,自樓梯被重新設(shè)計(jì)以后,其增加了66%以上的使用者——這是一個(gè)令人驚訝的增長(zhǎng)值啊。
為我們的網(wǎng)站也增添一些樂(lè)趣
看了該視頻之后,我首先想到的是,作為Web設(shè)計(jì)專(zhuān)業(yè)人員,我們?nèi)绾卫蒙厦娉晒Π咐慕?jīng)驗(yàn),為我們的作品增加一些樂(lè)趣呢?網(wǎng)站設(shè)計(jì)怎么做才能吸引到用戶?
通過(guò)增加趣味性,來(lái)營(yíng)造一種愉悅的用戶體驗(yàn),用戶不僅會(huì)樂(lè)于使用、印象深刻,同時(shí)他還會(huì)把這個(gè)體驗(yàn)分享給其他的人。
首先,對(duì)趣味性進(jìn)行定義
為網(wǎng)站增加趣味性,并不是建議把客戶的網(wǎng)站做成一個(gè)馬戲團(tuán)(當(dāng)然,除非你的客戶就是一個(gè)馬戲團(tuán))。而僅僅是建議在設(shè)計(jì)的元素及交互過(guò)程中,增加一些趣味性,以幫助網(wǎng)站可以在相當(dāng)長(zhǎng)的時(shí)間內(nèi)中,為用戶提供一種愉悅的體驗(yàn),從整體上更容易讓人記住。
“趣味”并不代表“幼稚”。你為產(chǎn)品增加一些愉悅的用戶體驗(yàn),但不應(yīng)該讓你的客戶看起來(lái)很幼稚、很不專(zhuān)業(yè)。
下面可以看一些成功的Web網(wǎng)站,看看他們是如何利用“趣味性”為用戶創(chuàng)造一種愉悅、難忘的體驗(yàn) 。
提高單個(gè)常規(guī)頁(yè)面的趣味性
幾乎所有的網(wǎng)站都由很多網(wǎng)頁(yè)組成。選擇一個(gè)特定的網(wǎng)頁(yè)或體驗(yàn)(比如“關(guān)于我們”、“聯(lián)系我們”等頁(yè)面),讓它更有趣,并給用戶留下深刻的印象,這個(gè)普通頁(yè)就會(huì)從該網(wǎng)站脫穎而出。
拿上文提到的“關(guān)于我們”頁(yè)面為例。Mutant Labs是一個(gè)英國(guó)設(shè)計(jì)與開(kāi)發(fā)公司。該公司網(wǎng)站上的“About US”頁(yè)面,不僅有趣,還加入了一些個(gè)性化的元素。只要把鼠標(biāo)移動(dòng)到團(tuán)隊(duì)成員上,對(duì)應(yīng)的成員就會(huì)跳出來(lái)做一個(gè)“招牌”動(dòng)作。這使原本枯燥的公司簡(jiǎn)介變得十分有趣了。
Mutant Labs的“About US”頁(yè)面
那對(duì)于“聯(lián)系我們”頁(yè)面呢?English Workshop是一個(gè)提供英語(yǔ)語(yǔ)言學(xué)習(xí)機(jī)會(huì)的組織機(jī)構(gòu)。該網(wǎng)站將提交反饋信息的頁(yè)面設(shè)計(jì)成了機(jī)器的控制面板樣式,以試圖它可以更好的貼合“工作坊”的主題。
English Workshop的“聯(lián)系我們”頁(yè)面
尋找一些方法,為網(wǎng)站中有希望提供特殊體驗(yàn)的普通頁(yè)面增添一些趣味性,這樣就會(huì)給網(wǎng)站的訪問(wèn)者帶來(lái)難忘的、獨(dú)一無(wú)二的印象。
為“404 error”頁(yè)面增添趣味性
對(duì)于大部分頁(yè)面,另一個(gè)特殊頁(yè)面是“404 error”頁(yè)面。在該頁(yè)面添加一些新的、個(gè)性化的元素,可以幫助你驅(qū)散該頁(yè)所給用戶帶來(lái)的挫敗感。從Smashing Magazine以前的文章中可以看到很多有趣的實(shí)例頁(yè)面。
除了上面提到的,一個(gè)好的“404 error”頁(yè)面還應(yīng)該包含指向關(guān)鍵頁(yè)面的鏈接,這些頁(yè)面應(yīng)該是用戶最有可能訪問(wèn)的。準(zhǔn)確定位這些頁(yè)面,用戶會(huì)送你一個(gè)微笑,同時(shí)可以很容易返回到他們想找的有價(jià)值的內(nèi)容。
Pumpkin-King.com網(wǎng)站中的“404 error”頁(yè)面
在搜索引擎中增加趣味性
谷歌因?yàn)樗乃阉饕娑劽?它常常會(huì)在搜索結(jié)果中添加一些趣味性的東西,而這正是谷歌體驗(yàn)的重要組成部分,同時(shí)大家也都知道現(xiàn)在有很多人都在做搜索引擎推廣。
首先,在某一特殊的日子里,Google的Logo就會(huì)變成古怪的“涂鴉”。這些涂鴉即包括簡(jiǎn)單的圖形,還包含一些與用戶交互的內(nèi)容,比如可以玩的吃豆子游戲、對(duì)吉他傳奇人物L(fēng)es Paul表示致意而設(shè)計(jì)的模擬吉他。同時(shí)還有大量只能通過(guò)特定的詞語(yǔ)和術(shù)語(yǔ)才能在Google上搜索到。在該頁(yè)面可以看到更多這樣的“趣味設(shè)計(jì)”。
Google增添的這種趣味性設(shè)計(jì)產(chǎn)生了很好的效果,因?yàn)樗⒉粫?huì)與Google提供的其他服務(wù)體驗(yàn)相沖突。這就是向項(xiàng)目添加趣味性的關(guān)鍵點(diǎn)——確保它不會(huì)對(duì)站點(diǎn)本身的目的和主要特色產(chǎn)生干擾。
準(zhǔn)確把握趣味性的度
向網(wǎng)站中增添趣味性,挑戰(zhàn)之一便是把它運(yùn)用的恰大好處。適當(dāng)?shù)靥砑尤の缎?,可以?chuàng)造一個(gè)給人印象深刻的網(wǎng)站,然而,過(guò)分強(qiáng)調(diào)趣味性,往往適得其反,用戶會(huì)被這種夸大而嚇跑。其實(shí),在很多時(shí)候,在網(wǎng)站和商標(biāo)設(shè)計(jì)上這種夸大也大有用武之地。
CaptainDash.com在整個(gè)網(wǎng)站上使用了有趣的插圖與交互方式,包括在“What We Solve”頁(yè)面用了有趣的圖書(shū)狀的圖層。這個(gè)體驗(yàn)很有趣,很獨(dú)特,也很具有個(gè)性。但在該網(wǎng)上逛了半天,很難準(zhǔn)確說(shuō)出這個(gè)網(wǎng)站是做什么的。所以對(duì)于趣味性體驗(yàn),這是潛在的陷阱之一——你的網(wǎng)站必須要能很快地回答用戶最基本的問(wèn)題:這個(gè)公司是做什么。
CaptainDash.com網(wǎng)站上的“What We Solve”頁(yè)面
Meomi.com是另一個(gè)精心設(shè)計(jì)的十分有趣的網(wǎng)站。當(dāng)你在網(wǎng)站移動(dòng)過(guò)程中,這個(gè)網(wǎng)頁(yè)中會(huì)有很多有趣的設(shè)計(jì)元素,與你互動(dòng)。該網(wǎng)站最讓我欣賞的地方,就是無(wú)論它設(shè)計(jì)的多復(fù)雜,我仍可迅速看出這個(gè)網(wǎng)站是做什么。在該網(wǎng)站最頂部,有一條十分醒目的標(biāo)語(yǔ):專(zhuān)注與玩耍、愉快和美好事物的小小設(shè)計(jì)室。
Meomi.com頁(yè)面
在網(wǎng)站上過(guò)分強(qiáng)調(diào)趣味性,有一定的風(fēng)險(xiǎn),但如果做得恰當(dāng),也會(huì)收到很好的效果——從始自終,創(chuàng)造一種愉悅,讓人難忘的體驗(yàn)。
趣味性會(huì)加深用戶對(duì)網(wǎng)站內(nèi)容的記憶
好的設(shè)計(jì)可以很好地支持網(wǎng)站的整體內(nèi)容、目的。所以我們應(yīng)努力通過(guò)一些有趣的方法去創(chuàng)造一種難忘的體驗(yàn),同時(shí)還要使內(nèi)容更加讓人難忘。
Converge大會(huì)的網(wǎng)站宣稱(chēng)它將“層層解剖,研究設(shè)計(jì)、開(kāi)發(fā)、市場(chǎng)人員之間的關(guān)系”。該網(wǎng)站展示了一個(gè)電子暴龍,當(dāng)你向下滾動(dòng)這個(gè)頁(yè)面時(shí),有趣的體驗(yàn)也就開(kāi)始了。這個(gè)恐龍自下而下始終顯示,但在表現(xiàn)逐漸變化,很好地貼合網(wǎng)站“層層解剖”的主題,這也加深了你對(duì)該網(wǎng)頁(yè)內(nèi)容的理解。
Converge大會(huì)的網(wǎng)站
Seamco網(wǎng)站表達(dá)了他們構(gòu)建有“可以使液體物品高效裝瓶、打包的工作流程線”。該網(wǎng)站通過(guò)一個(gè)模仿高效裝瓶流程線的精彩動(dòng)畫(huà)表達(dá)了該內(nèi)容。該網(wǎng)站從頂部(以裝瓶開(kāi)始)到底部(最終大卡車(chē)迅速把裝箱貨物運(yùn)走),都在表現(xiàn)這一流程線,設(shè)計(jì)豐富有趣,讓人印象深刻。
通過(guò)講故事,增加網(wǎng)站趣味性
讓用戶快速獲得網(wǎng)站的內(nèi)容,另一個(gè)方法是講故事——這是一個(gè)有趣的方法,能保證你所講的“故事”令人印象深刻。
Combine會(huì)議的宣傳網(wǎng)站利用印度國(guó)家的“美國(guó)核心地帶”,向我們講述了一個(gè)很有趣的故事……一個(gè)農(nóng)用機(jī)正在田地里工作,同時(shí)一個(gè)巨大的玉米正被注入大量的放射性物質(zhì),進(jìn)入頁(yè)面的中部,這個(gè)具有放射性的玉米開(kāi)始瘋狂地橫沖直撞……
另一個(gè)成功案例是詳述“共用汽車(chē)具有光明前途”的網(wǎng)站。通過(guò)使用鍵盤(pán)上的左右方向鍵,你就可以“駕駛”該網(wǎng)站上的汽車(chē)觀看其上所有的“風(fēng)景”,對(duì)“共用汽車(chē)”有更多的了解。通過(guò)這個(gè)方法,你可以訪問(wèn)到眾多內(nèi)容,通過(guò)點(diǎn)擊相關(guān)內(nèi)容,你可以了解更多相關(guān)。該網(wǎng)站所有的信息都以一種十分精彩的交互方式得以展現(xiàn)。
一些網(wǎng)站無(wú)法添加趣味性元素,真是這樣嗎?
當(dāng)我告訴Web設(shè)計(jì)師向他們?cè)O(shè)計(jì)的網(wǎng)站中添加一些趣味性元素可以獲得的益處時(shí),他們總會(huì)反駁說(shuō)他們所做的項(xiàng)目沒(méi)有地方可以增添趣味性。
是的,一些項(xiàng)目確實(shí)很難做得很有趣味性。但一些網(wǎng)站如果使用了該文章上面案例所使用的原則后,可以更成功。
SlaveryFootprint.org是一個(gè)“幫助用戶設(shè)想他們是如何陷入成為現(xiàn)代奴隸的”。這個(gè)網(wǎng)站似乎不太適合包含趣味性的內(nèi)容。但當(dāng)你訪問(wèn)這個(gè)網(wǎng)頁(yè)并選擇那個(gè)“What”紅箭頭時(shí),你就會(huì)開(kāi)始了體驗(yàn)旅程。向下滾動(dòng)頁(yè)面,彩色的、有動(dòng)畫(huà)效果的手的插圖推出相應(yīng)的內(nèi)容塊,告訴用戶相關(guān)的內(nèi)容。內(nèi)容最終以轉(zhuǎn)向“take the survey”頁(yè)面的提示結(jié)束,而“take the survey”頁(yè)面同樣采用這種交互方式——將一種簡(jiǎn)單的網(wǎng)頁(yè)形式轉(zhuǎn)變成了令人印象深刻且有效的體驗(yàn)。
確實(shí)有很多網(wǎng)站牽涉到敏感的話題,很難向其中添加趣味性元素。但正如前面兩個(gè)案例所證明的那樣,你可以借鑒其他網(wǎng)站所使用的解決方案,在不破壞網(wǎng)站內(nèi)容嚴(yán)肅性、重要性的情況下,營(yíng)造一種令人印象深刻的體驗(yàn)。
當(dāng)前文章:網(wǎng)站設(shè)計(jì)怎么做才能吸引到用戶的眼球
網(wǎng)頁(yè)路徑:http://redsoil1982.com.cn/news/118685.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容