7項(xiàng)設(shè)計(jì)建議提高網(wǎng)站訪客量
小編推薦:用設(shè)計(jì)的方式讓產(chǎn)品更受歡迎一直是產(chǎn)品人員孜孜以求的,像文章說的一個小改動就能增加70%的點(diǎn)擊,是不是很有吸引力?讓我們來學(xué)習(xí)下,也來搞個誘人的網(wǎng)站吧~
怎么讓訪客待得更久并且不斷回頭?Webydo為你提供7項(xiàng)強(qiáng)大的建議。
讓用戶對網(wǎng)站設(shè)計(jì)滿意僅僅是萬里長征第一步。在網(wǎng)站上線后,還需要與幾百萬個其他網(wǎng)站爭搶關(guān)注度,而你則需要想盡辦法留住訪客,讓他們不斷回頭。
如何做到吸引人是用戶體驗(yàn)設(shè)計(jì)中最為困難的一個方面,其不僅要求有高質(zhì)量的內(nèi)容,還要有巧妙、讓人熱血沸騰的方法來呈現(xiàn)內(nèi)容。
如果你覺得自己的網(wǎng)站沒什么生氣,那么下面這些建議應(yīng)該可以幫助你讓網(wǎng)站煥發(fā)活力,贏回訪客!
01. 讓鼠標(biāo)的滾動變得引人入勝
對網(wǎng)站進(jìn)行一項(xiàng)改動就能提高70%的吸引力,這種好事存在嗎?你別說,它還真存在!
Parallax滾動方式因其能夠以獨(dú)特、吸引眼球的方式呈現(xiàn)視覺訊息而席卷整個設(shè)計(jì)界。
Parallax是指運(yùn)用若干個在滾動頁面時相互獨(dú)立運(yùn)動的元素,形成能夠吸引人繼續(xù)滾動的動態(tài)體驗(yàn)。
這方面的一個優(yōu)秀范例當(dāng)屬Sony的Be Moved設(shè)計(jì)。這項(xiàng)設(shè)計(jì)大大延展了Parallax的功能界限。很多類似Webydo的高級自由代碼網(wǎng)站設(shè)計(jì)平臺可以幫助你設(shè)計(jì)出擁有像素完美級精確度的美妙Parallax網(wǎng)站。另外,他們在近期發(fā)布了自由代碼的Parallax Scrolling Animator,可幫助打造像素完美的Parallax網(wǎng)站。
02. 符號與圖標(biāo):視覺的潤滑劑
信息量比較豐富的網(wǎng)站需要使用大量的文字。這也就意味著設(shè)計(jì)師必須想辦法以沖擊力最強(qiáng)的方式來呈現(xiàn)這些文字。
使用圖標(biāo)可以幫助網(wǎng)站訪客更快地找到所需內(nèi)容。圖標(biāo)這種小巧的視覺元素不僅能夠表現(xiàn)自己所承載的概念,還能通過獨(dú)特的外觀像視覺標(biāo)志一樣引導(dǎo)人的目光從一處轉(zhuǎn)移到另一處。
在以前,圖標(biāo)只能使用位圖圖形,因而繪制和修改都非常麻煩,并且也難以進(jìn)行樣式設(shè)計(jì)。
現(xiàn)在,設(shè)計(jì)師可以使用圖標(biāo)字體打造和文字一樣具有矢量性質(zhì)、可無限擴(kuò)展并可通過CSS進(jìn)行定制化的字型。其中最棒的一項(xiàng)工具當(dāng)屬Glyphter。其誘人而且直觀的工具可通過各種開源圖標(biāo)集(包括Font Awesome!)進(jìn)行繪制,或者上傳你自己的SVG打造自定義字體,并且這些自定義字體可供你自由下載并運(yùn)用到其他網(wǎng)站的設(shè)計(jì)當(dāng)中。有了圖標(biāo)來支持文字內(nèi)容,段落和界面元素等就不再是簡單的一堆文字,同時其還可結(jié)合使用動態(tài)字體,這樣網(wǎng)站的閱讀就會變的更加有趣、簡單。
03. 靈活的字體:響應(yīng)式內(nèi)容設(shè)計(jì)
響應(yīng)式設(shè)計(jì)不僅局限于布局——還應(yīng)運(yùn)用到內(nèi)容上去。布局能夠適應(yīng)屏幕大小固然很好,但是內(nèi)容也需要相應(yīng)進(jìn)行適應(yīng)。
移動端用戶一般沒時間閱讀大段大段的文字,因此你的移動端網(wǎng)站必須精簡,展現(xiàn)出明確的行動呼吁。如果文字太小,在小屏幕上進(jìn)行閱讀就會困難重重,因此應(yīng)當(dāng)使用動態(tài)樣式技術(shù)讓文字保持在舒適的大小——千萬別讓用戶自己動手去縮放!
在這方面最佳的范例是Information Architects 網(wǎng)站的設(shè)計(jì)——其也是這一方法的開創(chuàng)者之一。他們的博客對響應(yīng)式字體的技巧和理論進(jìn)行了深入的探討,并明確說明了動態(tài)字體優(yōu)于靜態(tài)字體的原因。
如果內(nèi)容能夠根據(jù)訪客的閱讀情況進(jìn)行恰當(dāng)?shù)捻憫?yīng),那么網(wǎng)站本身的體驗(yàn)就會更加流程、醒目,并從整體上來說更加引人入勝。這一理念同樣適用于圖像…
04. 使用矢量圖形作為響應(yīng)式視覺元素
文字僅僅是網(wǎng)頁設(shè)計(jì)的一角,圖像也和文字一樣具有重要意義。通常來說,圖像采用JPG、PN和GIF等位圖文件格式。
而位圖圖像的問題在于兩方面:
1. 位圖的大小是固定的,因此無法無損擴(kuò)展以適應(yīng)新的布局大小或分辨率,從而就要求添加更多圖形內(nèi)容適應(yīng)移動端的視網(wǎng)膜屏等。
2. 每次使用位圖時,就會對你網(wǎng)站的加載流程提出HTTP請求。隨著網(wǎng)站越來越多的運(yùn)用圖形,這樣就會造成加載時間大幅度提升,更不必說呈現(xiàn)頁面所需要的數(shù)據(jù)量大幅增加。
解決辦法:矢量圖形。由于矢量圖形基本就是運(yùn)用數(shù)學(xué)方法呈現(xiàn)視覺元素,因此可以輕松擴(kuò)展到任意大小、適應(yīng)任意分辨率,同時不用擔(dān)心圖形質(zhì)量下降。
SVG是目前比較流行的一種矢量圖形格式,很多網(wǎng)頁設(shè)計(jì)師尤其鐘愛于這種格式,因?yàn)槠淠軌蛳窈芏嗥渌麡?biāo)記語言一樣實(shí)時調(diào)整樣式和修改,并生成漂亮并且可以互動的效果。
另外,矢量圖形占用空間小,并可由瀏覽器直接呈現(xiàn),從而也就不會產(chǎn)生外部資源占用。
05. 游戲化
游戲化,當(dāng)屬最難應(yīng)用的技巧之一。游戲化是指在設(shè)計(jì)中引入類似游戲的元素給訪客帶來互動感并在其進(jìn)行導(dǎo)航時給予激勵。
游戲化通常以完成特定任務(wù)后解鎖徽章的形式出現(xiàn);在Treehouse等需要用戶完成一系列課程的網(wǎng)站上,這一模式較為適用。但如果你沒有課程或類似的結(jié)構(gòu)怎么辦?
對于博客、電子商務(wù)類網(wǎng)站或其他比較標(biāo)準(zhǔn)的網(wǎng)頁類環(huán)境下,游戲化可以采用優(yōu)惠卷或折扣等方式在特定的情況下提供給訪客。例如,博客可以在訪客在Tweet上發(fā)了網(wǎng)站鏈接后提供免費(fèi)的電子書下載,或者電子商務(wù)網(wǎng)站可以在訪客瀏覽完全部產(chǎn)品目錄后提供折扣卷等。
這種小玩意有助于個性化訪客的訪問體驗(yàn),另外,能夠獲得個別關(guān)注這種感覺對于培養(yǎng)用戶投入和鼓勵用戶回頭也非常重要。
06. 圖像壓縮:速度至上
網(wǎng)站加載時間過長是扼殺訪客吸引力的頭號兇器。在這個注意力范圍短而廣的時代,如果網(wǎng)站的加載時間太長,訪客將會毫不猶豫的離去,沒人有耐心等待頁面緩慢的加載。
隨著網(wǎng)站變得越來越復(fù)雜,視覺效果越來越吸引人,加載時間也難以避免的會受到影響。幸運(yùn)的是,我們可以采用多種技巧緩解這一問題:
1. 減少內(nèi)容
2. 針對web優(yōu)化圖像
3. 通過內(nèi)容分發(fā)網(wǎng)絡(luò)提供網(wǎng)站
首先來說,很多設(shè)計(jì)師在網(wǎng)站發(fā)布時都愿意盡量減少網(wǎng)站內(nèi)容。最簡化可以從CSS和JS文件剝離所有留白、評論和冗余內(nèi)容,僅留下能夠較快加載的精簡版本。
同樣,還有很多算法有助于減小網(wǎng)站的圖像大小,同時不會影響視覺質(zhì)量。你可以連續(xù)運(yùn)行多種算法,另外,Image Optim(僅限Mac機(jī))等應(yīng)用可將準(zhǔn)備圖像的過程簡化到一擊即成。
最后,網(wǎng)站還可以利用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)以更快的速度分發(fā)文件。CDN能夠通過遍布世界的多個服務(wù)器分發(fā)網(wǎng)站的數(shù)據(jù),從而確保為訪客提供文件的服務(wù)器是距離其最近的服務(wù)器。CDN能夠給網(wǎng)頁加載時間帶來關(guān)鍵的影響,其通常用于防止規(guī)模較大的網(wǎng)站因世界各地?cái)?shù)千訪客同時加載而出現(xiàn)崩潰。Webydo等基于云的網(wǎng)站設(shè)計(jì)平臺的眾多優(yōu)點(diǎn)之一,就是能夠代替你處理這一優(yōu)化過程。
07. 推送通知
在很多網(wǎng)站上,吸引訪客的目標(biāo)之一,就是如何在你發(fā)布新內(nèi)容后讓訪客回頭,這一點(diǎn)適用于博客、視頻等等各式各樣的網(wǎng)站。
通常來說,設(shè)計(jì)師會使用各種表單讓訪客登記接收郵件通知。盡管這種方法仍然廣為流行,但目前已經(jīng)有了一種比郵件效果強(qiáng)30倍,而且吸引力遠(yuǎn)遠(yuǎn)強(qiáng)于郵件的新技術(shù):瀏覽器推送通知。
通過Roost等工具,設(shè)計(jì)師可以輕松實(shí)現(xiàn)瀏覽器通知功能,讓訪客在即便未打開你的網(wǎng)站時也能收到新內(nèi)容提醒。
目前,在最新的OS X上只有Safari完整支持這一功能,但Chrome和Firefox也會在年內(nèi)推出推送通知支持,所以說現(xiàn)在是get這一激動人心新技能的絕佳時機(jī)。
歡迎回到現(xiàn)實(shí)!
上述的各項(xiàng)技術(shù)技巧在設(shè)計(jì)流程中都有著重要的意義,在你開始網(wǎng)頁設(shè)計(jì)前應(yīng)予以仔細(xì)考慮。
保證網(wǎng)站反應(yīng)迅速、美觀且具有動態(tài)效果能夠鼓勵訪客與你提供的內(nèi)容進(jìn)行更加全面的接觸。目前市面上有很多工具能有效地幫助你設(shè)計(jì)或再設(shè)計(jì)出先進(jìn)、誘人的網(wǎng)站,讓網(wǎng)站的吸引力全面飆升。
翻譯:蔣燦 ?查看英文原文
mark