網(wǎng)站優(yōu)化

Website development

網(wǎng)頁設(shè)計中那些元素影響了視覺體驗？

發(fā)布時間：2016-12-14 10:39:26

視覺設(shè)計.jpg

當(dāng)自定義標(biāo)簽打印機合并標(biāo)簽重新設(shè)計了它的網(wǎng)站，他們的終目標(biāo)是提高客戶轉(zhuǎn)化率。但他們喜歡他們的網(wǎng)站，并沒有看到需要作出許多改變。后，他們改變的只有一件事在他們的主頁：添加行動號召一個明亮的綠色按鈕。

根據(jù)一個項目的案例研究，運行測試后，統(tǒng)一的標(biāo)簽是看轉(zhuǎn)換增加62%震驚。所有這一切，只是添加一個行動呼吁按鈕。對于Tracy Gamlin來說，他們的網(wǎng)絡(luò)營銷經(jīng)理，教訓(xùn)是很明顯的：

當(dāng)我們在這個案例中，我們看到的視覺設(shè)計制造差異的一個明顯的例子。具體來說，合并標(biāo)簽做了幾件事。行動號召的色彩對比彈出網(wǎng)頁上，它具有容易復(fù)制的按鈕閱讀的字體，這是大到足以讓人注意到。

什么是重要的視覺元素

人是視覺動物，而網(wǎng)絡(luò)是一種視覺媒體。在任何網(wǎng)站上，一個人的用戶體驗會的通知，通過視覺元素的影響。這些元素都是UI設(shè)計的重要方面，作為視覺傳達(dá)一個人如何能與網(wǎng)站進行交互。

在這篇文章中，我們將討論如何五突出的視覺元素，看到全國數(shù)百個網(wǎng)站的人可以大大影響用戶的體驗。他們是:

1、排版

2、圖標(biāo)

3、命令按鈕

4、白色的空間

5、圖像

這些視覺元素都在好的用戶體驗的總體方案，發(fā)揮了獨特的作用。當(dāng)設(shè)計師了解如何這些視覺元素的影響用戶體驗，他們可以提供的經(jīng)驗，吸引用戶的種類，提高組織的轉(zhuǎn)化率。簡單地改變周圍看似很小的屬性的視覺元素?zé)o論是尺寸或定位–可以導(dǎo)致用戶的一個顯著不同的經(jīng)驗。

圖像HubSpot

例如，當(dāng)涉及到印刷，某些字體實際上使我們感覺好的或壞的，據(jù)The Next Web基于因素，如大小、右線長度（50到75個字符），和適當(dāng)?shù)拈g距。同樣，我們的大腦首先確定一個標(biāo)志的顏色、形狀和形式，在做出積極的識別標(biāo)識這些對象分組，根據(jù)HubSpot的圖表

然后，我們的大腦將這種視覺模式與現(xiàn)有經(jīng)驗表明相同的模式。后，語義屬性的喜好和屬性提供給所標(biāo)志的意義。記住，我們的設(shè)計理念和使用它們不僅僅只是確定一個組織。同樣，我們可以用行動，空格，和圖像的影響用戶的體驗，的方式，我們將探討不久。

排版

文本的形式在任何給定的網(wǎng)站我們看到的大多數(shù)內(nèi)容。因此，對印刷術(shù)的出現(xiàn)是在UX設(shè)計的重要力量。帶這項近的研究來自西班牙卡內(nèi)基梅隆大學(xué)和Universitat Pompeu Fabra。它對可讀性和理解的一個在線閱讀實驗并得出結(jié)論，越大越好–更好。

研究對象進行閱讀實驗的維基百科，可以說是一個流行的和文本的網(wǎng)頁重網(wǎng)站，并報告他們的文字更容易閱讀和理解的時候，更大的字體大小。有鑒于此，作者建議所有網(wǎng)站使用18點字體大小的所有網(wǎng)頁的正文。他們指出：“好的可讀性與主觀18分了，但是移動到22點字體大小沒有產(chǎn)生有意義的改進。

是什么使這項研究如此強大，它大膽地轉(zhuǎn)移和挑戰(zhàn)我們的一些版式規(guī)范–如2013把雜志上的文章談然后用12點字體大小的普及（16像素）。在某種程度上，這使得18點字體大小的秘密武器。

圖標(biāo)

理性往往被認(rèn)為是單純的品牌工具，迅速、普遍地識別一個公司或新聞出版。當(dāng)然，有一個營銷要素在一個頁面的標(biāo)題顯示的標(biāo)志。如果一個用戶喜歡的東西，他想買的東西或同意她寫的，他或她會馬上知道什么品牌銷售產(chǎn)品或相同的價值觀。但有比這更重要的事。

從嚴(yán)格的用戶體驗角度，標(biāo)志是用戶自己定位的手段，往往增加一倍作為一個快速鏈接到該網(wǎng)站的主頁。此外，他們提供了一個一致的燈塔，確定場地。這是微妙的，但憑借始終顯示在網(wǎng)站的相同點標(biāo)志，提高用戶的體驗。

進入研究從尼爾森諾爾曼集團，研究參與者被要求執(zhí)行導(dǎo)航任務(wù)和品牌回憶練習(xí)的分析看后不同部位左對齊和居中的標(biāo)志。結(jié)果證實，左對齊標(biāo)志輔助UX相當(dāng)。他們總結(jié)，“回到主頁大約是6倍的努力當(dāng)標(biāo)志被放置在頁面的中心相比，它是在左上角的時候?！?/span>

如果沒有足夠的理由讓一個標(biāo)志在視覺上突出，還記得前面提到的智慧的HubSpot的圖表：識別標(biāo)志部分模式匹配現(xiàn)有的經(jīng)驗。換句話說，如果標(biāo)志是突出的，和用戶有一個積極的經(jīng)驗，他們會更容易把品牌在未來的積極的事情。

命令按鈕

作為一般規(guī)則，號召行動按鈕反映了用戶的目標(biāo)：他們促使人們點擊，點擊，或選擇，以移動到用戶的旅程的下一步。記住，這些按鈕的定位是創(chuàng)造一個積極的用戶體驗中心。用戶更容易找到和理解行動的召喚，他們會找到更直觀的體驗。

根據(jù)心理學(xué)原理感知集合理論我們的大腦過程，號召行動按鈕根據(jù)我們之前的預(yù)期。我們期待他們能夠在登陸頁面；我們總是在登陸頁面–這是一個循環(huán)理論看他們！不過，這是任何有效的行動的出發(fā)點，如果我們按照額外的實踐。

圖像為了

雖然沒有一個行動的布局，他們應(yīng)該有一個面向行動動詞從他們，讓用戶明白他們必須采取行動，根據(jù)HubSpot的實踐。一旦建立了，建立了Unbounce的研究以及：使用很長的銷售頁面有多個按鈕，如果行動的號召以下使用方向的線索，通過引導(dǎo)他們的按鈕講故事吸引用戶，并使按鈕突出運用對比。

除此之外，與所有的視覺元素，可用性測試來了解目標(biāo)受眾的具體需求。

白色的空間

白色的空間就在我們周圍的網(wǎng)絡(luò)：它指的是周圍的任何元素的負(fù)空間。它可以幫助用戶集中在頁面上的重要內(nèi)容，無論是行動的召喚按鈕或一個視頻，因為潛意識的回應(yīng)它。任何的白色空間框架往往站在一個頁面上，使瀏覽更加容易。因此，在一個頁面上增加白色空間也增大閱讀理解。

圖像樹屋的博客

根據(jù)這項研究來自威奇托州立大學(xué)，參與者在網(wǎng)上閱讀學(xué)習(xí)理解更多的內(nèi)容從一個網(wǎng)頁時，它周圍的文本空間（閱讀：白色空間）時相比，它沒有利潤。該研究的作者的結(jié)論：

“在線閱讀白空間的使用是很重要的使用教材和資料的人數(shù)繼續(xù)以穩(wěn)定的速度增長。”

一個強大的智能加白色空間到一個網(wǎng)頁，可以將其可用性的例子，看看美國聯(lián)合航空公司。直到去年，他們的網(wǎng)站有幾乎沒有任何空格在頁邊距。相反，新的設(shè)計突出的特點大量的白色空間在利潤率，以及在頁腳。因此，用戶現(xiàn)在可以更容易地集中在頁面上的主要內(nèi)容。白色空間的舊設(shè)計的缺乏使它更可能是用戶可能會“迷失”在頁面的不同的內(nèi)容塊。

圖像

不談視覺效果明顯的討論是不可能的：圖像。我們的大腦處理圖像的超快速–在13毫秒，據(jù)每日郵報。這可以幫助我們快速掌握信息的處理速度，從而幫助我們前進。例如，如果我們看一個鞋產(chǎn)品頁面，我們看到的圖像，立刻就明白它是什么，決定我們是否喜歡它，并決定去尋找定價信息做出購買或繼續(xù)下一步。

可能作為一個結(jié)果，研究表明，使用圖像提高轉(zhuǎn)換率。轉(zhuǎn)換XL引用許多案例研究，使用圖像對轉(zhuǎn)化率有積極的影響：

在線零售商由于生育產(chǎn)假看到增加了27%，因為他們開始使用360度旋轉(zhuǎn)圖像

安全零售商磚房安全增加圖像的下拉式的搜索結(jié)果，這增強了轉(zhuǎn)換由誰使用其網(wǎng)站搜索客戶中高達(dá)100%

藝術(shù)網(wǎng)站提高網(wǎng)站轉(zhuǎn)換Medalia藝術(shù)驚人的95%增加了主頁上的藝術(shù)家的形象后

需要強調(diào)的是，雖然，每個例子都是獨特的。換句話說，是由于生育不一定是磚家的安全工作，反之亦然。這就是為什么測試是非常重要的任何項目。

然而，一個共同的圖像，根據(jù)Jeff Bullas，他們有更好的表現(xiàn)。他們使文章獲得94%比文章沒有圖像的看法，他們增加搜索多達(dá)60%接觸業(yè)務(wù)的可能性如果其搜索結(jié)果的圖像，他們增加觀點的新聞稿45%。

使其視覺

連小小的視覺設(shè)計的變化可能會導(dǎo)致顯著更好的用戶體驗。網(wǎng)站的轉(zhuǎn)化率和用戶參與度是影響視覺設(shè)計選擇設(shè)計。提高視覺線索和提高一個網(wǎng)站的視覺吸引力，不僅是一個聰明的設(shè)計決策，更是一個精明的商業(yè)決策。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6985,0.html

上一篇：網(wǎng)頁設(shè)計中卡片式設(shè)計與移動端和響應(yīng)式設(shè)計

下一篇：網(wǎng)站設(shè)計都有那些設(shè)計模式？

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理