讓人難忘的網(wǎng)站設(shè)計(jì)秘訣
任何網(wǎng)站都有一個(gè)目標(biāo):讓用戶一次又一次的回訪、分享你的網(wǎng)站內(nèi)容、經(jīng)常登錄你的網(wǎng)站、告訴別人你的網(wǎng)站,重要的是他們會記得你的網(wǎng)站。這一切是不會偶然發(fā)生的。一個(gè)讓人難忘的設(shè)計(jì)是一個(gè)會幫助你和用戶建立聯(lián)系的工具。現(xiàn)在,我們將要舉例七個(gè)極好的方法來告訴你如何給客戶留下一個(gè)讓持久難忘的印象。
1.創(chuàng)造一個(gè)記憶點(diǎn)
用戶會記得他們在你的網(wǎng)站上做的第一件事和最后一件事,這是一個(gè)非常重要的記憶點(diǎn)。強(qiáng)烈視覺沖擊的首頁和完美的交互是關(guān)鍵。
Tosco Music網(wǎng)站就是一個(gè)很棒的用有趣的視覺效果來開頭給用戶留下第一印象的例子。
·左側(cè)導(dǎo)航
·各要素之間的強(qiáng)烈對比
·有沖擊力的視頻內(nèi)容滾動播放
·漂亮的排版
這個(gè)網(wǎng)站的設(shè)計(jì)也做了一個(gè)良好的結(jié)尾印象。用戶可以找到更多他們感興趣的音樂表演或者被邀請用簡單的形式注冊公司電子郵箱。網(wǎng)站交互簡單流暢,也就是讓用戶對網(wǎng)站流連忘返的原因。
2.講故事的網(wǎng)站
(圖片的網(wǎng)站網(wǎng)址https://walkwest.com/)
網(wǎng)站是你了解世界的一個(gè)途徑。它是一個(gè)告訴別人你是誰和為什么你很重要的機(jī)會。無論這個(gè)故事是一個(gè)品牌故事還是一個(gè)旅游博客,故事講得生動有趣就會讓用戶緊緊跟著你的思路走下去。
講一個(gè)好故事需要兩個(gè)步驟:
·講述生動的內(nèi)容
·展示趣味性的圖片
你需要把這兩個(gè)元素完整的打包結(jié)合。
Walkwest 網(wǎng)站先用一個(gè)大膽的聲明來開頭,繼而再告訴你一個(gè)故事。如果你需要他們的服務(wù)(公關(guān)或者營銷),就會有一些引起你共鳴的東西。他們講故事的方式就是用簡單的圖片和簡短的語言。但不僅僅是網(wǎng)站講故事,它還用頁面滾動和視覺設(shè)計(jì)的的形式引導(dǎo)你去貫穿整個(gè)故事。用戶會在交互過程中了解更多,而這一切不過僅僅發(fā)生在幾秒之間。
這就是讓人記住的講故事。
3.有效的使用顏色
(圖片的網(wǎng)站網(wǎng)址https://www.hillmann-living.de/de/)
太多的顏色和設(shè)計(jì)會導(dǎo)致用戶放棄瀏覽網(wǎng)站,太少的顏色和設(shè)計(jì)會容易讓人遺忘。恰到好處的顏色搭配融合才能留住用戶。
顏色使用的竅門就是創(chuàng)建一個(gè)適合你內(nèi)容的調(diào)色盤且與用戶經(jīng)常接觸從而對比得出的很多其他東西(想一想你平時(shí)每天點(diǎn)擊的網(wǎng)站有多少相同顏色的藍(lán)色背景。)
Hillman Living網(wǎng)站使用鮮明顏色來突出圖像以便抓住你的注意力,幫助用戶集中在圖像中的椅子(就是他們賣的東西)
傳統(tǒng)簡約風(fēng)格的下滑頁面和審美——使用白色背景——但每個(gè)椅子同樣會有顏色重點(diǎn)。這個(gè)顏色會與你相隨,你很難讓這些橙色紅色藍(lán)色脫離你的腦海。(他們公司賭你會覺得這些值得你購買。)
4.讓網(wǎng)站變得好玩
(圖片的網(wǎng)站網(wǎng)址http://www.newcastlenow.org.au/)
當(dāng)你想到"好玩的網(wǎng)站"的時(shí)候腦海中會出現(xiàn)什么?一個(gè)游戲?一個(gè)電影片段?那設(shè)計(jì)技術(shù)呢,比如顏色、影像和排版?
以下任何一個(gè)要素都可以讓你的設(shè)計(jì)變得有趣!
·圖片和影像中的笑臉
·明亮飽滿的色彩
·有東西可以玩(比如游戲)
·一些幽默風(fēng)趣的語言(尤其是用這類的字體)
Newcastle Now網(wǎng)站就做了很多這樣的東西。這個(gè)網(wǎng)頁就是一個(gè)嘗試改造它自身和關(guān)于趣味設(shè)計(jì)的地方,從調(diào)色板到奇特造型,都是圖像上實(shí)現(xiàn)有趣互動從而讓人們感到愉悅的設(shè)計(jì)元素。這些設(shè)計(jì)會讓你覺得想要跳進(jìn)現(xiàn)場和屏幕上的人物們一起大笑。(我敢打賭你一定會記住它!)
5.與感官相聯(lián)系
(圖片的網(wǎng)站網(wǎng)址https://coffeetimescoffee.com/)
這個(gè)網(wǎng)站的所有文字和圖像都圍繞用戶的感官感受聯(lián)系展開的。
有一種方式是與用戶互動及提供反饋。舉個(gè)例子,一個(gè)用戶在網(wǎng)站上輸入一些東西然后得到一些回復(fù)。(想象成你和朋友之間的短信來往。)還有一個(gè)方式是就像Coffee Times Coffee這個(gè)網(wǎng)站一樣引導(dǎo)他們思考你的設(shè)計(jì)。
當(dāng)你看到主頁上那個(gè)視頻的時(shí)候,沒有一個(gè)喝咖啡的人會說似乎沒聞到香味(甚至有些會說還能聽到磨咖啡豆的聲音。)無論如何,設(shè)計(jì)對用戶來說不僅僅是屏幕上的一個(gè)圖像,它更是調(diào)動了感官愉快記憶。(它應(yīng)該會持續(xù)一段時(shí)間至少到你下次喝咖啡的時(shí)候)
6.搭配結(jié)合
(圖片的網(wǎng)站網(wǎng)址http://www.nike.com/us/en_us/)
一些網(wǎng)站設(shè)計(jì)常常有新的內(nèi)容更新,因?yàn)樗麄兇_實(shí)有重復(fù)的客戶群體。(一般像電子商務(wù)網(wǎng)站,還有新聞或雜志類型的網(wǎng)站)
更新內(nèi)容或者調(diào)整設(shè)計(jì)會讓用戶有全新的有趣體驗(yàn),這會鼓勵(lì)他們經(jīng)常思考和回訪你的網(wǎng)站。這個(gè)關(guān)鍵就在于你的內(nèi)容和設(shè)計(jì)如何讓人有全新體驗(yàn)(所以這會很棘手。)
Nike網(wǎng)站是這個(gè)領(lǐng)域的領(lǐng)先者之一。首頁的內(nèi)容幾乎每次訪問都不同,但每個(gè)新的主頁元素都同樣的有吸引力。Nike另一個(gè)做得很好的東西是主頁中內(nèi)容的每一點(diǎn)都與時(shí)事結(jié)合,用戶就會從這個(gè)全球體育設(shè)備零售供應(yīng)商這里獲取到時(shí)事信息。
你可能沒有耐克的資源,但它可以作為一個(gè)很好的收集信息和靈感開始。下個(gè)月開始可以每周訪問主頁或者看一下改變的地方,你會如何把這些想法和你的內(nèi)容結(jié)合起來呢?
7.別忘記結(jié)尾
(圖片的網(wǎng)站網(wǎng)址http://startuplab.no/)
如果你的主頁想讓設(shè)計(jì)師高興,除了要有震撼的視覺沖擊,有很棒的交互動作,但別忘了結(jié)尾的部分。跟第一印象一樣,網(wǎng)站給人的最后印象也是很重要的。知道如何設(shè)計(jì)這個(gè)要多做一點(diǎn)工作了,因?yàn)楸绕鹩脩酎c(diǎn)擊進(jìn)入你的網(wǎng)站,用戶可能從不同的位置離開你的網(wǎng)站。
挖掘你的數(shù)據(jù)分析和找到最多用戶離開的那個(gè)頁面是一個(gè)不錯(cuò)的經(jīng)驗(yàn)。創(chuàng)建一個(gè)可以提供給用戶的東西——超低折扣或者數(shù)字元素——或者你網(wǎng)站最好的部分持久的記憶。
關(guān)鍵是用戶是愉快的離開。(確保他們不是因?yàn)榫W(wǎng)站的錯(cuò)誤而離開也是很重要的)
Startup Lab網(wǎng)站里每一頁的左側(cè)都有一個(gè)結(jié)束動作——它是一個(gè)期待用戶去填寫的表格。這個(gè)結(jié)尾讓人印象深刻,因?yàn)檫@個(gè)動作很容易被發(fā)現(xiàn),表格填寫也很簡單,無論用戶在頁面哪里都只需要點(diǎn)擊兩下就能完成了。
總結(jié):
讓人難忘的網(wǎng)站設(shè)計(jì)是一個(gè)棘手的事情,因?yàn)樗鼛缀醵际前l(fā)生在用戶潛意識下的。難道你會停下來說"我準(zhǔn)備要記住這個(gè)網(wǎng)站了"嗎?這個(gè)是不可能的。
但是你確實(shí)會記住一些讓網(wǎng)站看起來非常棒的元素。晚一點(diǎn)的時(shí)候你可以想想這些信息,或者你下午想喝杯咖啡的時(shí)候。
我會非常樂意看到更多的讓你留下深刻印象的網(wǎng)站的例子,你可以在 Twitter和Design Shack上標(biāo)注分享給我。
作者CARRIE COUSINS
翻譯:歐惠玉
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)