古騰堡原則在產(chǎn)品設(shè)計(jì)中的應(yīng)用
編輯導(dǎo)讀:設(shè)計(jì)師明白一些基礎(chǔ)原理,可以幫助自己更好地完成產(chǎn)品設(shè)計(jì)。本篇文章為大家介紹了在設(shè)計(jì)中具有普適性意義的一個(gè)原則:古騰堡原則,作者從它的概念出發(fā),結(jié)合案例介紹了其在設(shè)計(jì)領(lǐng)域中的應(yīng)用,與大家分享。
01 背景
Edmund C. Arnold 是一名報(bào)紙?jiān)O(shè)計(jì)師,被公認(rèn)為現(xiàn)代報(bào)紙?jiān)O(shè)計(jì)之父。他設(shè)計(jì)了超過(guò)一千種報(bào)紙,包括波士頓環(huán)球報(bào),國(guó)家觀察報(bào),今日?qǐng)?bào),堪薩斯城之星報(bào)等等。
在那個(gè)年代,人們對(duì)于報(bào)紙的追求就像如今大眾對(duì)于手機(jī)的追求一樣,新聞的內(nèi)容雖然是主要的,但是報(bào)紙的外觀、閱讀方式、觸摸舒適度等等,也都是非常講究的。
Edmund C. Arnold 本身也是一位非常勵(lì)志的人物,1945 年二戰(zhàn)結(jié)束,32 歲的他開(kāi)始研究排版編輯,1960 年成為錫拉丘茲大學(xué) S. I. Newhouse 公共傳播學(xué)院的教授,并于1975 年被任命為弗吉尼亞聯(lián)邦大學(xué)圖形藝術(shù)系主任,期間還出過(guò) 27 本書籍…基本可以另起一篇文章詳述了,這里就不多做介紹。
20 世紀(jì) 50 年代,他在設(shè)計(jì)報(bào)紙的過(guò)程中,提出了一項(xiàng)原則,認(rèn)為人的閱讀方式應(yīng)該是遵循某種習(xí)慣進(jìn)行的,好像讀書本一樣 —— 除了從左到右,還有從上到下的方式。但這里面蘊(yùn)含著什么信息呢?經(jīng)過(guò)多方研究,他最終得出了被后人熟知的「古騰堡原則」,并附上了一張圖,名為「古騰堡圖」。
從圖中可以看出,用戶視線很自然的會(huì)從第一視覺(jué)區(qū)POA開(kāi)始,呈Z字形路線移動(dòng)到終端休息區(qū)TA。整個(gè)閱讀過(guò)程視線都會(huì)沿著一條方向軸開(kāi)始從左到右瀏覽。用戶會(huì)更容易關(guān)注到頁(yè)面的開(kāi)始與結(jié)束區(qū)域,而中間的段落則很少被關(guān)注到。
古騰堡揭示了一個(gè)實(shí)用的視覺(jué)軌跡規(guī)律:閱讀引力是從上到下,從左到右,呈現(xiàn)Z字形移動(dòng),而起點(diǎn)和終點(diǎn)會(huì)作為重點(diǎn)視覺(jué)記憶區(qū),中間過(guò)程會(huì)輕掃作為次要視覺(jué)記憶區(qū)。
02 應(yīng)用于按鈕
1. 底部單獨(dú)按鈕
這種形式在引導(dǎo)用戶操作的頁(yè)面中最為常見(jiàn),為了讓用戶更加舒適的閱讀,會(huì)將標(biāo)題和說(shuō)明放在左上側(cè)即第一視覺(jué)區(qū),引導(dǎo)用戶瀏覽所有內(nèi)容后用按鈕兜底作為終端休息區(qū),讓用戶能快速感知閱讀順序,這種布局能讓該頁(yè)面的轉(zhuǎn)化保持良好狀態(tài)。
2. 底部多按鈕
在微信中有這兩種底部多按鈕使用情況,第一視覺(jué)區(qū)都放置標(biāo)題和引導(dǎo)等提示內(nèi)容,而區(qū)別在于最終休息區(qū)兩個(gè)按鈕如果進(jìn)行放置。
除了顏色樣式來(lái)區(qū)分主次外,利用位置能更好的減少用戶誤操作,例如左邊豎排按鈕案例,如果將最強(qiáng)的按鈕放在底部,那么用戶可能不加考慮的流程化的看不到“拒絕”這個(gè)次級(jí)按鈕;
然而微信將其放在倒數(shù)第二個(gè)為的是讓“拒絕”按鈕能讓用戶注意到,最后視覺(jué)回流到“同意”,這樣便起到了防錯(cuò)性,缺點(diǎn)是會(huì)對(duì)用戶造成流程上較強(qiáng)的打斷性,適用于需要用戶思慮、審核信息的場(chǎng)景。
相比橫排按鈕,用戶點(diǎn)擊主操作按鈕時(shí)會(huì)更加順暢,有利于業(yè)務(wù)的轉(zhuǎn)化,對(duì)于用戶體驗(yàn)流程的打斷也會(huì)比豎向按鈕相對(duì)弱些,適用于能幫助用戶快速完成流程的場(chǎng)景,具體使用哪種布局要權(quán)衡體驗(yàn)、用戶隱私安全與業(yè)務(wù)目標(biāo)之間的統(tǒng)籌關(guān)系。
03 應(yīng)用于信息流
1. 圖文類信息
老生常談,說(shuō)到圖文類不少人第一反應(yīng)就是今日頭條。為什么今日頭條和餓了么都是圖+文,頭條的圖就會(huì)放在右側(cè),而餓了么圖就放在左側(cè)呢?
結(jié)合古騰堡的視線強(qiáng)弱分析,我們可以得知左側(cè)的首要視覺(jué)點(diǎn)一定是強(qiáng)視覺(jué)區(qū),對(duì)于今日頭條的新聞來(lái)說(shuō),光看它的配圖我們根本猜不出來(lái)整體條目所表達(dá)的內(nèi)容,所以頭條的圖片元素傳達(dá)信息的效率遠(yuǎn)不如文字,所以第一視覺(jué)區(qū)會(huì)留給文字信息;
而餓了么中圖片所傳達(dá)的信息效率更直觀,會(huì)一眼告訴用戶我這家是西餐還是中餐,是早點(diǎn)還是正餐,所以在餓了么的條目中圖片會(huì)被放在第一視覺(jué)區(qū)。
而這兩種布局的目的都是讓用戶可以快速瀏覽,不讓用戶在接收信息時(shí)受阻造成體驗(yàn)打斷。
既然舉了頭條為例,此處可以延伸一下,為什么今日頭條的視頻條目樣式做成圖一的樣子,也正是因?yàn)橛脩袅?xí)慣在今日頭條APP中先文字后圖片,而視頻的傳達(dá)信息效率要遠(yuǎn)大于配圖,所以將視頻作為終端休息區(qū)進(jìn)行視覺(jué)強(qiáng)化,一是可以強(qiáng)化信息種類的分類讓用戶更好辨識(shí),二是讓視頻條目傳達(dá)信息效率更快且滿足整體使用APP時(shí)一致性的用戶心智,讓用戶能快速上手并且順暢體驗(yàn)瀏覽。
04 由古騰堡衍生的艾森豪威爾法則“四象限法則”
1. 概念
四象限法則是時(shí)間管理理論的一個(gè)重要觀念是應(yīng)有重點(diǎn)地把主要的精力和時(shí)間集中地放在處理那些重要但不緊急的工作上,這樣可以做到未雨綢繆,防患于未然。而對(duì)于用戶體驗(yàn)層面上四象限法則也有可借鑒之處。
2. 單條目中的四象限法則
例如貝殼找房中,通過(guò)對(duì)其用戶進(jìn)行調(diào)研發(fā)現(xiàn),將條目中需要的功能點(diǎn)進(jìn)行統(tǒng)計(jì)歸類,再結(jié)合元素傳遞信息效率可以得出,房間的圖片是緊急重要,文字信息放在第二視覺(jué)區(qū),而單看右側(cè)文字區(qū)內(nèi),將字段信息又進(jìn)行了象限分類,在第四象限中放了刪除按鈕(最弱的信息)價(jià)格位于左下即緊急信息來(lái)強(qiáng)調(diào),而其他次級(jí)信息都放在了中間區(qū)域部分作為弱化,這也是基于用研的結(jié)果做出的信息布局。
有些初學(xué)者會(huì)將四象限法則與古騰堡進(jìn)行混淆,因?yàn)楣膨v堡的右下側(cè)是視覺(jué)重點(diǎn),而在四象限中右下側(cè)是最弱信息,其實(shí)并不矛盾,古騰堡所說(shuō)的是在整個(gè)頁(yè)面使用瀏覽過(guò)程中,它的整體由多個(gè)條目進(jìn)行堆疊,而四象限僅用于單個(gè)條目的信息布局中,用戶在使用過(guò)程中不可能只能看一個(gè)條目,所以區(qū)別是古騰堡原則是站在一個(gè)更大的信息匯聚中闡釋原理。
3. 四個(gè)條目組合成的四象限法則
單條目?jī)?nèi)符合原則,那么擴(kuò)大元件范圍,如果將田字格排布的四個(gè)條目組成一個(gè)單元,那么這個(gè)單元也符合四象限法則。
比如在我們?nèi)粘9渚〇|的時(shí)候,如果將商品的兩個(gè)維度:生活中物品的不可替代性作為重要,價(jià)格高低作為選東西時(shí)比較參考的緊急,那么在京東的首屏信息流的四個(gè)條目為一個(gè)單元組時(shí)我們便可以發(fā)現(xiàn)左上的廣告是主打即重要又緊急,右上放了生活必備品但是價(jià)格優(yōu)惠力度不是很大價(jià)格也較高,左下放便宜但隨時(shí)可替代的物件,而右下放置轉(zhuǎn)化最低的一些商品。這樣便可讓用戶在瀏覽每個(gè)單元時(shí)更加對(duì)號(hào)入座,潛意識(shí)的感覺(jué)到物品品類和價(jià)格都意外的更加滿意。
此處思考,為什么右下既然不緊急不重要卻還要放置商品呢?雖然沒(méi)有做過(guò)電商類業(yè)務(wù),但我覺(jué)得原因有三:
- 紅花也需要綠葉襯托,如果沒(méi)有第四號(hào)商品的存在也不會(huì)顯得前三個(gè)商品更加誘人;
- 第四象限位置可以做到進(jìn)行其他品類商品的曝光,挖掘用戶更多的需求和欲望;
- 在業(yè)務(wù)上四象限位置也可以進(jìn)行一些廣告位的購(gòu)買,讓用戶受到阻斷的流程最小化的同時(shí)又能為業(yè)務(wù)帶來(lái)利益。
話說(shuō)最近在地鐵上用手機(jī)打字寫文章有些費(fèi)勁,可能前面有語(yǔ)句不通的地方多請(qǐng)見(jiàn)諒。截圖京東的時(shí)候想到了雙十一即將來(lái)臨,你剁手了嗎?:)
本文由 @上校雞塊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!