美(mei)觀(guan)的登(deng)錄(lu)頁面將帶(dai)來很好轉化率,那么如何(he)是(shi)登(deng)錄(lu)也面更加美(mei)觀(guan)與(yu)高效呢(ni)?
對于設計師(shi)來(lai)說,工作中的(de)挑(tiao)戰之一就(jiu)是創建一個(ge)看(kan)起來(lai)不(bu)(bu)錯,而(er)且還能有很好轉換率的(de)登錄(lu)頁(ye)面。您可以理解(jie)為什么這是案例設計的(de)目(mu)標和(he)業務目(mu)標常常是不(bu)(bu)一致的(de)。
當產品(pin)相關(guan)人員創建登陸頁時,他們更專注于布局(ju),基本原則和信息層次。然而(er),設(she)計(ji)師最關(guan)心的是用戶體(ti)驗,顏色(se),排版和風格元素,有助于建立強大(da)而(er)有效化(hua)的準則。
轉化優質設計(ji)本質上希望使這兩個思想學派相一致。因此(ci),不僅要專注于(yu)UX,還要強調勸導和轉化,同時將它與將導致更(geng)好的(de)網站的(de)美(mei)學選擇合并。
1.選擇正確的布局(ju)
產(chan)品經理非常了解,頁面上(shang)不同元(yuan)素的布局會影響轉化率(lv)。這就是為什么(me)他們(men)要(yao)求(qiu)設計師將最重要(yao)的信息放在(zai)首要(yao)位置,并從(cong)檢出頁面中刪(shan)除導航菜單,即(ji)使這個操作違反了UX設計的原(yuan)則。
但是,您(nin)可以采用一些(xie)理論原(yuan)則(ze)來創建(jian)轉化優化的著陸頁,而不會(hui)影響用戶體驗:
1)按照(zhao)三分法規定設計
如果你(ni)曾經拍過攝影課,你(ni)可能聽說過三分之一(yi)的規則。這個(ge)規則越(yue)少越(yue)好,這個(ge)規則說,任何形象在分為 9 個(ge)相等(deng)的部分時(shi),會有更多(duo)的緊張和精力(li)。
來自維(wei)基百科的這個GIF說明它完美:
維基百科 CC BY-SA 2.5
三分之(zhi)一的(de)(de)規則(ze)是攝影師并不總是把他們的(de)(de)主題放在框架中(zhong)的(de)(de)原(yuan)因。世界上最著名(ming)的(de)(de)一些照片遵循這一規則(ze)。
這里(li)有一個例子:
人(ren)物在九分之(zhi)一的右上角(jiao)
三分(fen)法則不僅(jin)適用(yong)(yong)于照片 – 它(ta)也適用(yong)(yong)于登(deng)錄頁。看看WebDAM的這個登(deng)陸頁面:
或(huo)者來自Inbound Emotion的(de)一個:
Inbound Emotion
根據(ju)設計理論和眼睛定視(shi)來看,3× 3 網格線(xian)的(de)(de)交點在任何頁(ye)面上(shang)都得到(dao)最多的(de)(de)關注。因此,放(fang)置在這些網格線(xian)上(shang)的(de)(de)元素也會更受關注。
“使用三分法規則來設計(ji)的布局視覺看上(shang)去會更舒(shu)適。”
2)按照菲茨法則的重要內容
訓練人眼遵循(xun)層(ceng)次結構。我們的(de)眼睛(jing)自(zi)然地從大到大的(de)元素發展。尼(ni)爾森進行的(de)眼睛(jing)跟蹤(zong)研(yan)究(jiu)也顯(xian)示:
在(zai)這里,用戶比標(biao)題更多地集(ji)中在(zai)人(ren)物圖像上(shang),并(bing)且(qie)他(ta)們的眼睛比較小的段落(luo)文字更長的字體。
與此相似的另一個原理是菲茨定(ding)律。最初(chu)由心理學(xue)家(jia)保(bao)羅·菲(fei)茨(ci)(Paul Fitts)在(zai) 1954 年(nian)制定(ding)的(de)描述人機交互的(de)方法(fa),該法(fa)規定(ding)用(yong)(yong)戶(hu)移動到屏(ping)幕上對(dui)象的(de)速(su)度是(shi)對(dui)象的(de)接近(jin)度(與用(yong)(yong)戶(hu))的(de)比例(li)及其(qi)大(da)小的(de)函數。
在(zai)數(shu)學(xue)上,這(zhe)表(biao)示如(ru)下:
結論(lun):目標越(yue)大,完成(cheng)點(dian)擊越(yue)快,時(shi)間越(yue)短。同樣(yang)地,目標越(yue)近,指向越(yue)快,完成(cheng)點(dian)擊時(shi)間越(yue)短。也(ye)就是說,定位(wei)點(dian)擊一(yi)個目標的(de)(de)時(shi)間,取決于目標與當前位(wei)置(zhi)的(de)(de)距離,以及目標的(de)(de)大小。