如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前我們更新過如何做投影的文章:《投影一直做不好?看這篇文章就搞定!》,主要針對的是投影的原理進行講解,包括如何用圖層樣式去做投影,怎樣用工具繪制投影,這些都是我們了解投影的一個基礎。教程發布之后,很多同學留言,表示沒看夠,希望針對其他投影形式再進行更深入的講解,那這次我們就來滿足大家要求。其實投影的設計不難,只要符合畫面的光影邏輯,然后加上制作投影的方法,基本就能搞定很多基礎的投影形式,話不多說,我們開始今天的教程。
其實投影在設計中的應用是非常廣泛的,比如這些海報,都運用了投影的形式。
在平面設計中,除了合成設計之外,我們在什么情況下會選擇用投影?
1. 增加識別性
比如,在顏色比較混亂的背景上添加文字,或者添加圖片,為了區分他們之間的主次關系,我們會添加一個投影。
2. 增加空間感和層次感
這兩個畫面,通過投影與主體的位置關系,產生較強的空間感和層次感。
3. 提升畫面格調
反應產品質感的投影形式,會提升畫面的格調,這類比較多的是化妝品與品。
4. 增加形式感
如果你的畫面缺少創意性,不妨試試這類投影形式,通常來說它們都是用投影作為畫面中的主體,以此來傳遞出很強的形式感與故事性。
5. UI設計
UI 設計中使用投影。
常規型投影包含了普通投影,弧形投影,接觸投影,彌散投影。
普通投影
普通投影就是我們最常見的一個投影形式,它可以用圖層樣式來設置,它的特點就是在圖像的四周都會有點陰影的感覺,讓畫面與背景形成前后景的關系,就像這里的案例。
弧形投影
弧形投影,它的投影是在物體的一側,像翹起的邊緣。
接觸投影
接觸投影,是物體立面與底面的關系,會有一種三維立體的感覺。
彌散投影
彌散投影,與普通投影的區別在于,它更有深度,也是現如今比較流行的投影形式。
長投影主要分兩種,一種是色塊投影,一種是在色塊的基礎上的漸變投影。
比較常用在圖標的設計,還有海報的設計。
倒影,這類型陰影應該是比較難處理的了,想必大家在做設計的時候,大多數情況會規避倒影這種形式,除非是拍好的照片自帶倒影,不然很少有同學愿意觸碰這塊。因為它比較考驗大家對圖形的認知能力,以及對透視基礎的掌握,之前我們有講過一篇關于素描知識的文章,在里面介紹過關于物體的基本結構,我們所看到的任何一個物體都有一個結構或者形狀,比如立方體、圓柱體、圓錐體、球體。任何一個物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當中,這些基本形狀同樣適用。
首先來看二維的倒影,二維的倒影比較簡單了,也都很好做,復制一個下來,加個蒙版做漸變處理就可以了。
三維物體,最基本的就是這幾個形狀,或者幾種形狀的組合,掌握幾種形狀的倒影,就能應付大部分倒影的形式。
立方體為基礎型的倒影。
圓柱體為基礎型。
圓錐體為基礎型。
球體為基礎型。
組合型。
懸空投影,這類投影給人很強的空間感,并且大多數情況,投影都會成為畫面中的主角。
分為三種類型,二維的懸空投影,2.5D 的懸空投影,三維懸空投影。
二維的懸空投影
先來看看二維懸空投影,是二維的平面懸空,添加一個彌散投影。
2.5D的懸空投影
2.5D 沒有消失點,但是會有立體感,在下方添加一個投影,就會有懸空的感覺。
三維懸空投影
三維懸空投影能有很多創意形式。
創意投影,它不會根據物體本身的形態去表現,而是根據文案和設計構思而產生的很有創意的投影形式,這個主要靠大家發散思維的聯想了。
最常見的就是電影海報中的投影表現。
一種情況是接近真實的投影,和實際照片是一樣的道理,一種情況是類似于創意投影,合成的投影算是這幾種投影當中最難的。
合成中的投影要自己創造一個光源,也就是想象出一個光源,根據光源關系,繪制出投影效果。
投影在這里都是很真實的表現。
合成也可以做創意投影,這三張公益海報的主角是動物的影子,但是形成影子的是前面的物體,這是很有創意的表現方式。
制作投影的方法比較多,比如說利用圖層樣式,用矢量圖形做投影,高斯模糊設置投影,手繪投影等,每一種方法都適用不同的投影類型,我們想更有效率的完成工作,就要對這些技法有個較深的了解。下面我就帶大家來了解下每種方法。
1. 圖層樣式
第一個,也是最簡單的,用 ps 當中的圖層樣式來做。
模式一般我們就選擇默認正片疊底,這是在正片疊底文章中講到過,后面的顏色,如果是主體與背景顏色差異比較大的時候,我們可以選擇環境色;如果差異不大,我們可以選擇主體的相近的顏色,很少有選擇純黑色的投影。
不透明度就是陰影的透明程度,也是很好理解。下面角度,是光線照射的方向。全局光,選擇之后,畫面中其他元素添加投影,就會默認為一個光源,這樣畫面中投影會更和諧。
距離,物體和投影之間的距離,數值越大越遠。擴展,就是陰影面積的大小。大小,就是陰影的虛化程度。
等高線,可能很多同學不太理解,其實很簡單的,我們來看下,縱向,越向上,越實,越向下越虛化。橫向,最右側是投影的中心位置,越向左,離中心越遠。根據畫面中的等高線,我們來分析下。
這樣就好理解了,我們看畫面中藍色圓點的位置,代表中心位置很實,黃色圓點的位置代表遠離中心的位置很虛化,最后就得出右側的投影。
那如果說,我想讓投影的周圍都變得很實,該怎么調整?
就是把虛的那個點向上調整,這樣,就代表外圍投影變得相對較實,我們會得到這樣一個投影。
如果我想,投影靠近外圍的位置,變得比較實,靠近中心的位置,變得比較虛,就可以這樣調整。
得到的投影是這樣的,我們看到中間白色的區域,就是虛化之后的效果,接近了透明。這個搞懂了,利用圖層樣式做投影也就基本沒什么問題了。
ps 還自帶了這么多等高線的樣式,大家可以去實驗一下。
那什么類型投影,比較適合用圖層樣式來做?
普通的投影和彌散投影。
畫面中人物的投影設置。
2. 矢量圖形做投影
畫一個矢量圖形,之后選擇實時形狀屬性,然后點擊蒙版,通過調整羽化值,來調整投影的虛化程度,用這個方法會比較直觀的觀察到,而且因為是矢量圖形,所以還很方便我們隨時調整它的形狀。
高斯模糊和矢量圖形做投影,所適用的投影類型是一樣的,同樣適用于普通投影,弧形投影,接觸投影,彌散投影。
還有懸空投影,它和矢量圖形投影的區別就是,矢量圖形更方便改顏色和形狀,還有虛化程度。
在主體下方加一個小面積的虛化陰影,就會有懸空的感覺。
3. 高斯模糊做投影
添加高斯模糊之前,一定要記得給圖層轉換為智能對象,因為高斯模糊對圖層是有不可逆的破壞性的,所以添加智能對象之后會很方便我們隨時去調整它的顏色和模糊程度,動感模糊同理。
高斯模糊做投影,適用的投影類型。
4. 手繪投影
最后一個,用鋼筆工具或者畫筆工具來繪制投影,這個是比較難的,在投影那篇文章中,我們已經講過在一個場景中,怎樣分析投影的位置,大小,形狀,方向,以及如何用鋼筆工具去繪制投影,這里我們就不再重復了,如果有不懂的同學,回看之前的文章《投影一直做不好?看這篇文章就搞定!》
那我們來看一下,手繪投影適合什么類型的設計。
第一種就是合成設計,這個要考慮光源的位置,投影的透視,投影的顏色等,一般會采用畫筆和鋼筆工具的結合。
創意的投影同樣適合,因為它和合成投影基本一樣,只不過不會根據對象的實際特征去繪制。
倒影適合用鋼筆工具和畫筆工具來制作,這里就涉及到了透視,我們能看到物體在基面上的倒影,實際上是物體在基面上的投影的倒立映像。
在平時的工作生活中,我們要學會觀察,比如積水的路面,反射建筑的倒影是什么樣子的,鏡子里的自己,或者可以多看看攝影照片,慢慢養成習慣,提高對倒影的敏感度。
做倒影最重要就是兩個字──拆分,我們給這個立方體做倒影,首先要思考的是,它的倒影是由哪幾個面產生的,找到物體與承影面接觸的線,然后把這兩個面提取出來,沿著這個線把所在的面拆分出來。
然后向下鏡像,根據實際情況再翻轉,要注意,倒影的透視和原本物體的透視要一致,也就是平行原本對象的邊線。
然后給倒影添加一個蒙版,做一個漸變,就可以了。
用剛才的方法給魔方做一個倒影
同樣把與底邊接觸的面裁剪出來,可以看到透視關系還是不一樣的,我們應該讓倒影的面和上面的魔方透視一致。
用調整大小里的斜切,調整倒影的透視。
添加蒙版,然后在與地面接觸的位置添加一個閉塞陰影就可以了。
再做一個復雜點的,給包做倒影。
同樣,找到底面接觸面,然后把相應的面裁切出來。這里注意的是,每個面要單獨拆分,這樣才方便為每個面設置倒影。
把所有拆分的面復制一個出來上下鏡像。
調整透視,就用調整大小工具,斜切,合并倒影的圖層。
用蒙版漸變,別忘了閉塞陰影。
倒影規律及特點:
好了,前面介紹了每一種投影形式,以及適合的場景。那接下來,我們來看看在同一光源的前提下,不同承影面,也就是投影在不同的材質上是如何表現的吧。
布面材質是軟性材質,在光源下會吸收光的反射,所以投影的邊緣會相對模糊,不會過于鋒利。
案例演示
我們來看下在布面材質上的投影的做法,首先在物品與布面底部繪制一個閉塞陰影:
然后新建圖層,根據光源繪制出陰影的長度與形狀:
給長投影做高斯模糊,然后用蒙版把邊緣處理得柔和一些:
統一光影,把產品修飾一下:
整體調整下色調,就可以了:
鏡面是光滑的,所以光照射之后,會形成和物體一樣的影像,也就是倒影。
設計之前,先參考下帶有鏡面倒影的照片。
案例演示
第一步,閉塞陰影:
第二步,拆分圖像,拿到下方,調整透視,這是之前我們講過步驟,這里就不重復了。
調整產品的光影與色調:
加點小裝飾,烘托氛圍:
最后是整體調整下色調和明暗:
水面和鏡面類似,但是水面會存在水波紋,所以在做投影時候要注意投影的形態要與水波紋一致。
參考一些帶有水面倒影的照片。
案例演示
依然先畫閉塞陰影:
繪制出整個投影形態:
高斯模糊處理,因為是水面,所以陰影和倒影要共存:
下面就是倒影了,方法步驟同樣。
那么問題來了,是怎么做到彎曲的效果的?其實就是用 PS 當中的置換來做,這是置換的參數與水面素材。
關于置換的教程我們也發布過,《平面高手課堂!如何用扭曲工具快速強化作品設計感?》
最后統一色調和光影就完成了。
地板有的會打一層蠟,這個時候,就會存在一些倒影,所以在這樣的地板上倒影和投影是并存的。
先看一下在不同地板上的投影樣貌。
案例演示
這個我們選擇大理石材質,首先閉塞陰影:
繪制投影的形態:
給投影高斯模糊,添加蒙版做漸變:
然后,按照光影和環境色,處理產品的明暗和色調:
5. 漸變色/純色
這也是我們設計中遇到比較多的情況,在純色或漸變色的背景中,為了讓畫面具有空間感,我們經常會給物體加投影,這個投影可以是常規投影,也可以是倒影。
案例演示
閉塞陰影:
根據光源繪制投影:
高斯模糊,然后添加蒙版做漸變:
修飾產品的色調和光影:
統一光影色調:
教程到這里就結束啦,估計有的同學會納悶,為什么我們沒有細講怎樣根據光源繪制投影?因為在之前投影文章中已經手把手給大家演示過了,沒看過的同學趕緊去補課,可閱讀《投影一直做不好?看這篇文章就搞定!》
總結下今天的內容,第一,投影在畫面中作用。第二,我們給投影形式做了分類,有常規型,長投影,倒影,懸空投影,合成投影。然后是制作投影的方法,著重介紹了倒影該怎樣做,最后是投影在不同材質上的表現。通過關于投影的這兩篇教程,相信大家已經能掌握一些原理和技巧了,其實最快速學習投影的方法,就是要學會觀察生活中的事物。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前我們更新過如何做投影的文章:《投影一直做不好?看這篇文章就搞定!》,主要針對的是投影的原理進行講解,包括如何用圖層樣式去做投影,怎樣用工具繪制投影,這些都是我們了解投影的一個基礎。教程發布之后,很多同學留言,表示沒看夠,希望針對其他投影形式再進行更深入的講解,那這次我們就來滿足大家要求。其實投影的設計不難,只要符合畫面的光影邏輯,然后加上制作投影的方法,基本就能搞定很多基礎的投影形式,話不多說,我們開始今天的教程。其實投影在設計中的應用是非常廣泛的,比如這些海報,都運用了投影的形式。
在平面設計中,除了合成設計之外,我們在什么情況下會選擇用投影?
1. 增加識別性
比如,在顏色比較混亂的背景上添加文字,或者添加圖片,為了區分他們之間的主次關系,我們會添加一個投影。
2. 增加空間感和層次感
這兩個畫面,通過投影與主體的位置關系,產生較強的空間感和層次感。
3. 提升畫面格調
反應產品質感的投影形式,會提升畫面的格調,這類比較多的是化妝品與品。
4. 增加形式感
如果你的畫面缺少創意性,不妨試試這類投影形式,通常來說它們都是用投影作為畫面中的主體,以此來傳遞出很強的形式感與故事性。
5. UI設計
UI 設計中使用投影。
常規型投影包含了普通投影,弧形投影,接觸投影,彌散投影。
普通投影
普通投影就是我們最常見的一個投影形式,它可以用圖層樣式來設置,它的特點就是在圖像的四周都會有點陰影的感覺,讓畫面與背景形成前后景的關系,就像這里的案例。
弧形投影
弧形投影,它的投影是在物體的一側,像翹起的邊緣。
接觸投影
接觸投影,是物體立面與底面的關系,會有一種三維立體的感覺。
彌散投影
彌散投影,與普通投影的區別在于,它更有深度,也是現如今比較流行的投影形式。
長投影主要分兩種,一種是色塊投影,一種是在色塊的基礎上的漸變投影。
比較常用在圖標的設計,還有海報的設計。
倒影,這類型陰影應該是比較難處理的了,想必大家在做設計的時候,大多數情況會規避倒影這種形式,除非是拍好的照片自帶倒影,不然很少有同學愿意觸碰這塊。因為它比較考驗大家對圖形的認知能力,以及對透視基礎的掌握,之前我們有講過一篇關于素描知識的文章,在里面介紹過關于物體的基本結構,我們所看到的任何一個物體都有一個結構或者形狀,比如立方體、圓柱體、圓錐體、球體。任何一個物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當中,這些基本形狀同樣適用。
首先來看二維的倒影,二維的倒影比較簡單了,也都很好做,復制一個下來,加個蒙版做漸變處理就可以了。
三維物體,最基本的就是這幾個形狀,或者幾種形狀的組合,掌握幾種形狀的倒影,就能應付大部分倒影的形式。
立方體為基礎型的倒影。
圓柱體為基礎型。
圓錐體為基礎型。
球體為基礎型。
組合型。
懸空投影,這類投影給人很強的空間感,并且大多數情況,投影都會成為畫面中的主角。
分為三種類型,二維的懸空投影,2.5D 的懸空投影,三維懸空投影。
二維的懸空投影
先來看看二維懸空投影,是二維的平面懸空,添加一個彌散投影。
2.5D的懸空投影
2.5D 沒有消失點,但是會有立體感,在下方添加一個投影,就會有懸空的感覺。
三維懸空投影
三維懸空投影能有很多創意形式。
創意投影,它不會根據物體本身的形態去表現,而是根據文案和設計構思而產生的很有創意的投影形式,這個主要靠大家發散思維的聯想了。
最常見的就是電影海報中的投影表現。
一種情況是接近真實的投影,和實際照片是一樣的道理,一種情況是類似于創意投影,合成的投影算是這幾種投影當中最難的。
合成中的投影要自己創造一個光源,也就是想象出一個光源,根據光源關系,繪制出投影效果。
投影在這里都是很真實的表現。
合成也可以做創意投影,這三張公益海報的主角是動物的影子,但是形成影子的是前面的物體,這是很有創意的表現方式。
制作投影的方法比較多,比如說利用圖層樣式,用矢量圖形做投影,高斯模糊設置投影,手繪投影等,每一種方法都適用不同的投影類型,我們想更有效率的完成工作,就要對這些技法有個較深的了解。下面我就帶大家來了解下每種方法。
1. 圖層樣式
第一個,也是最簡單的,用 ps 當中的圖層樣式來做。
模式一般我們就選擇默認正片疊底,這是在正片疊底文章中講到過,后面的顏色,如果是主體與背景顏色差異比較大的時候,我們可以選擇環境色;如果差異不大,我們可以選擇主體的相近的顏色,很少有選擇純黑色的投影。
不透明度就是陰影的透明程度,也是很好理解。下面角度,是光線照射的方向。全局光,選擇之后,畫面中其他元素添加投影,就會默認為一個光源,這樣畫面中投影會更和諧。
距離,物體和投影之間的距離,數值越大越遠。擴展,就是陰影面積的大小。大小,就是陰影的虛化程度。
等高線,可能很多同學不太理解,其實很簡單的,我們來看下,縱向,越向上,越實,越向下越虛化。橫向,最右側是投影的中心位置,越向左,離中心越遠。根據畫面中的等高線,我們來分析下。
這樣就好理解了,我們看畫面中藍色圓點的位置,代表中心位置很實,黃色圓點的位置代表遠離中心的位置很虛化,最后就得出右側的投影。
那如果說,我想讓投影的周圍都變得很實,該怎么調整?
就是把虛的那個點向上調整,這樣,就代表外圍投影變得相對較實,我們會得到這樣一個投影。
如果我想,投影靠近外圍的位置,變得比較實,靠近中心的位置,變得比較虛,就可以這樣調整。
得到的投影是這樣的,我們看到中間白色的區域,就是虛化之后的效果,接近了透明。這個搞懂了,利用圖層樣式做投影也就基本沒什么問題了。
ps 還自帶了這么多等高線的樣式,大家可以去實驗一下。
那什么類型投影,比較適合用圖層樣式來做?
普通的投影和彌散投影。
畫面中人物的投影設置。
2. 矢量圖形做投影
畫一個矢量圖形,之后選擇實時形狀屬性,然后點擊蒙版,通過調整羽化值,來調整投影的虛化程度,用這個方法會比較直觀的觀察到,而且因為是矢量圖形,所以還很方便我們隨時調整它的形狀。
高斯模糊和矢量圖形做投影,所適用的投影類型是一樣的,同樣適用于普通投影,弧形投影,接觸投影,彌散投影。
還有懸空投影,它和矢量圖形投影的區別就是,矢量圖形更方便改顏色和形狀,還有虛化程度。
在主體下方加一個小面積的虛化陰影,就會有懸空的感覺。
3. 高斯模糊做投影
添加高斯模糊之前,一定要記得給圖層轉換為智能對象,因為高斯模糊對圖層是有不可逆的破壞性的,所以添加智能對象之后會很方便我們隨時去調整它的顏色和模糊程度,動感模糊同理。
高斯模糊做投影,適用的投影類型。
4. 手繪投影
最后一個,用鋼筆工具或者畫筆工具來繪制投影,這個是比較難的,在投影那篇文章中,我們已經講過在一個場景中,怎樣分析投影的位置,大小,形狀,方向,以及如何用鋼筆工具去繪制投影,這里我們就不再重復了,如果有不懂的同學,回看之前的文章《投影一直做不好?看這篇文章就搞定!》
那我們來看一下,手繪投影適合什么類型的設計。
第一種就是合成設計,這個要考慮光源的位置,投影的透視,投影的顏色等,一般會采用畫筆和鋼筆工具的結合。
創意的投影同樣適合,因為它和合成投影基本一樣,只不過不會根據對象的實際特征去繪制。
倒影適合用鋼筆工具和畫筆工具來制作,這里就涉及到了透視,我們能看到物體在基面上的倒影,實際上是物體在基面上的投影的倒立映像。
在平時的工作生活中,我們要學會觀察,比如積水的路面,反射建筑的倒影是什么樣子的,鏡子里的自己,或者可以多看看攝影照片,慢慢養成習慣,提高對倒影的敏感度。
做倒影最重要就是兩個字──拆分,我們給這個立方體做倒影,首先要思考的是,它的倒影是由哪幾個面產生的,找到物體與承影面接觸的線,然后把這兩個面提取出來,沿著這個線把所在的面拆分出來。
然后向下鏡像,根據實際情況再翻轉,要注意,倒影的透視和原本物體的透視要一致,也就是平行原本對象的邊線。
然后給倒影添加一個蒙版,做一個漸變,就可以了。
用剛才的方法給魔方做一個倒影
同樣把與底邊接觸的面裁剪出來,可以看到透視關系還是不一樣的,我們應該讓倒影的面和上面的魔方透視一致。
用調整大小里的斜切,調整倒影的透視。
添加蒙版,然后在與地面接觸的位置添加一個閉塞陰影就可以了。
再做一個復雜點的,給包做倒影。
同樣,找到底面接觸面,然后把相應的面裁切出來。這里注意的是,每個面要單獨拆分,這樣才方便為每個面設置倒影。
把所有拆分的面復制一個出來上下鏡像。
調整透視,就用調整大小工具,斜切,合并倒影的圖層。
用蒙版漸變,別忘了閉塞陰影。
倒影規律及特點:
好了,前面介紹了每一種投影形式,以及適合的場景。那接下來,我們來看看在同一光源的前提下,不同承影面,也就是投影在不同的材質上是如何表現的吧。
布面材質是軟性材質,在光源下會吸收光的反射,所以投影的邊緣會相對模糊,不會過于鋒利。
案例演示
我們來看下在布面材質上的投影的做法,首先在物品與布面底部繪制一個閉塞陰影:
然后新建圖層,根據光源繪制出陰影的長度與形狀:
給長投影做高斯模糊,然后用蒙版把邊緣處理得柔和一些:
統一光影,把產品修飾一下:
整體調整下色調,就可以了:
鏡面是光滑的,所以光照射之后,會形成和物體一樣的影像,也就是倒影。
設計之前,先參考下帶有鏡面倒影的照片。
案例演示
第一步,閉塞陰影:
第二步,拆分圖像,拿到下方,調整透視,這是之前我們講過步驟,這里就不重復了。
調整產品的光影與色調:
加點小裝飾,烘托氛圍:
最后是整體調整下色調和明暗:
水面和鏡面類似,但是水面會存在水波紋,所以在做投影時候要注意投影的形態要與水波紋一致。
參考一些帶有水面倒影的照片。
案例演示
依然先畫閉塞陰影:
繪制出整個投影形態:
高斯模糊處理,因為是水面,所以陰影和倒影要共存:
下面就是倒影了,方法步驟同樣。
那么問題來了,是怎么做到彎曲的效果的?其實就是用 PS 當中的置換來做,這是置換的參數與水面素材。
關于置換的教程我們也發布過,《平面高手課堂!如何用扭曲工具快速強化作品設計感?》
最后統一色調和光影就完成了。
地板有的會打一層蠟,這個時候,就會存在一些倒影,所以在這樣的地板上倒影和投影是并存的。
先看一下在不同地板上的投影樣貌。
案例演示
這個我們選擇大理石材質,首先閉塞陰影:
繪制投影的形態:
給投影高斯模糊,添加蒙版做漸變:
然后,按照光影和環境色,處理產品的明暗和色調:
5. 漸變色/純色
這也是我們設計中遇到比較多的情況,在純色或漸變色的背景中,為了讓畫面具有空間感,我們經常會給物體加投影,這個投影可以是常規投影,也可以是倒影。
案例演示
閉塞陰影:
根據光源繪制投影:
高斯模糊,然后添加蒙版做漸變:
修飾產品的色調和光影:
統一光影色調:
教程到這里就結束啦,估計有的同學會納悶,為什么我們沒有細講怎樣根據光源繪制投影?因為在之前投影文章中已經手把手給大家演示過了,沒看過的同學趕緊去補課,可閱讀《投影一直做不好?看這篇文章就搞定!》
總結下今天的內容,第一,投影在畫面中作用。第二,我們給投影形式做了分類,有常規型,長投影,倒影,懸空投影,合成投影。然后是制作投影的方法,著重介紹了倒影該怎樣做,最后是投影在不同材質上的表現。通過關于投影的這兩篇教程,相信大家已經能掌握一些原理和技巧了,其實最快速學習投影的方法,就是要學會觀察生活中的事物。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
不知大家有沒有和我一樣的疑惑:日常產品的信息引導到底該如何設計?可能有人第一時間會想到浮層、動效、彈窗等等,但這些都只是表層樣式而已。背后的引導機制該怎么入手?有沒有一個系統性的了解?需要注意些什么?
所以,今天就想聊聊這方面的看法,下面是我對信息引導的理解所提煉、搭建的一個「PST」框架:Performance-表現、Strategy-策略、Target-目標。
目標層:信息不會平白無故去引導用戶,都是為了某個確定的目標而展示的。如在首頁彈窗展示是為了進行新手教育,以達到讓用戶使用新功能,進入新頁面等運營指標或增長指標。
策略層:目標確定了,需要確定可做信息引導的各種場景和機制。如設置某時間進行信息推送,用戶網絡不行的情況下怎么解決?
表現層:不同的場景中有各種表現形式,如下拉菜單、彈窗、浮層、視頻等等。
這 3 層環環相扣,互相影響。因為每個產品的目標各不相同,所以這篇就先對信息引導的「策略層」進行分析,下篇再講下引導的形式和適用場景。
可能每個人會有自己的分法和定義,我就按照自己的理解概括一下信息引導的基本類型。
1. 新功能引導
向用戶展示產品的新功能/頁面,對產品的新功能有一個大致的了解,多用于用戶首次進入/使用功能的引導,如:各種新手遮罩引導、產品介紹。
2. 指標引導
以提高產品的業務目標/增長目標為導向,按照一定的規律引導用戶使用某功能,如:產品的信息 push 和廣告。
3. 結果引導
在用戶已結束的操作行為、結果頁面上,引導商戶使用相似功能或內容模塊,促進產品的連續消費。
比如:淘寶在訂單支付成功后,都會進行店鋪、紅包、優惠券、相關寶貝的推薦,保證消費者還處于「購物鏈」上。
4. 異常引導
針對用戶可能會犯錯的行為進行提示、警告,是一種前置的容錯機制。如支付寶,用戶在向「異常好友」轉賬時,以輪播的方式進行信息提示,避免用戶轉錯賬。
拋去業務目標和引導樣式的局限,信息的引導可以從幾個方面切入和思考:產品架構、用戶行為、時間、階段/過程。
像很多同學做信息引導時,一上來就想著浮層、彈窗、動效等各種表現形式,而忽視了最簡單、最底層的引導方式:利用產品的架構布局去引導。
這種方式是通過架構布局,來體現內容間的差別與關系,突顯出核心內容模塊,強調的是「視覺重量」,如:各模塊間的面積大小、色彩強弱。像淘寶首頁有各種功能入口,通過架構上的布局來進行功能分類和引導。
如何利用架構布局進行信息引導呢?
2 個點可以參考:重組和單拎。
重組:將同一層級、相關聯的信息組成一個內容模塊,從而使信息更聚焦、減少視覺干擾。
如騰訊動漫的個人中心頁面,在老版本中頭部信息較為分散、無關聯,信息的引導性很差。而在新版本中,則通過「重組」把信息關聯在一起,頁面更聚焦清晰、引導性更強。
單拎:一種與「重組」相反的引導思路,將信息分解成各個獨立的模塊進行展示,讓信息得到更多的展示。
很多「入口化」的功能,都適用該思路進行信息引導,如:手機淘寶的個人中心,有些功能原本可以和其他模塊一樣做成入口化的,但出于產品目標、用戶訴求等維度的考慮,將部分內容「單拎」出來進行展示效果更好。
按時間維度去發散的話,則可以分成「用戶行為時間」和「網絡實時時間」引導。
用戶行為時間
根據用戶操作的行為時間進行信息引導。如愛奇藝,用戶在觀看了 30 分鐘視頻后,會彈出積分領取提示。
這種引導需要注意的是:產品的時間機制。
如愛奇藝的「觀看滿30分鐘」:是觀看單個視頻時長,還是一天里的總視頻時長積累?離線觀看視頻(有流量聯網)時是否也計入時長等等?這些機制都需要在前期,根據產品的平臺特性、業務目標、用戶習慣等維度去設置好。
網絡實時時間
根據當前網絡時間進行引導。如百度地圖,會在 17 點快接近高峰期時,向用戶彈出路況提示。
這類場景的引導,更注重于:產品的推送機制。
如設置了某個時間點推送內容,若用戶沒網絡或者網絡較差時,是晚點再推送,還是推送提前預設置好的「靜態」內容?這些都是需要考慮的點。
根據特定的維度,將信息/功能分解成 N 個獨立且關聯的階段。分階段的維度可以是時間、日期、金錢、物品等等。
很多運營活動就會把獎勵分成不同的階段進行發放,如圖:
這種引導方式的優勢是:可以將全部的信息分解到各個階段中去,頁面的拓展性強,用戶理解和操作成本低。劣勢在于:周期較長,用戶缺乏足夠的動力。
因此,很多產品都會把最大獎勵、最好的結果放在最后階段,加上利用消費者的「目標趨近效應」──人們在距離目標越近時,越有動力去完成它,一步步地引導用戶消費。
根據用戶的當前操作進行引導,如觀看視頻時,點擊屏幕會暫停播放且會彈出廣告信息;長按內容列表時,會出現多選、排序、刪除等操作。
而根據「用戶行為」做引導,需要注意 2 點:引導的返回策略和落地方式。
返回策略
結合用戶場景與產品特性,看信息引導后是否需要制定返回策略,相當于一種「逆向引導」。而返回的策略不僅體現在「機制」上,還可以體現在「視覺樣式」上。
機制:如愛奇藝在觀看視頻時最小化產品、跳轉到新的頁面后,返回觀看視頻時會自動后退幾秒進度,以保證用戶的觀看記憶不會出錯。
樣式:如淘寶在支付訂單后,會有兩種返回形式。一是左上角的「返回」icon,返回到購物車頁面;二是中間比較明顯的「返回首頁」按鈕,返回至淘寶首頁。
而對于產品來說,「返回首頁」的優先級顯然更高一點:既可以讓用戶形成消費閉環,又能瀏覽、搜索更多的商品,提升產品的 UV、PV、復購率等業務和增長指標。所以,才會把「返回首頁」按鈕的樣式,做得比「返回」icon 重一些。
引導的落地方式
引導的落地方式就是信息引導后,用戶跳轉到哪里?一種是跳轉至新的頁面進行落地,頁面空間大、可控性強;另一種是停留在當前頁面展示,減少用戶的操作成本。
如優酷在觀看視頻時,可以在當前頁面進行獎品的引導和獲取。
至于最終采用哪種落地方式,則根據產品目標、用戶場景、頁面形態等特征去抉擇。
以上就是個人對信息引導「策略層」的一些心得和看法。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
情感化在我們的決策過程中起著至關重要的作用。一秒鐘的情感交互可以改變人對產品的整體體驗
人類是一種情緒驅動的物種;我們選擇某些產品并不是因為它們有意義,而是我們認為它們會給我們帶來什么樣的感受。未來的界面將在產品設計的基礎上使用情感化的概念。人們使用的經驗將基于智商(IQ)和情商(EQ)。
本文試圖展望未來,看看我們將在未來的十年內設計什么樣的界面。我們將仔細研究三種交互媒介:
01、語音
02、增強現實(AR)
03、虛擬現實(VR)
未來情感化界面的實例
將來的界面會是什么樣子?盡管我們還沒有這個問題的答案,但是我們可以討論界面可能具有的特性。在我看來,我相信我們最終會遠離那些充滿菜單、面板、按鈕的界面,而轉向更“自然的界面”,即擴展我們身體的界面。未來的界面不會鎖定在物理屏幕上,而是使用整個五官感覺的力量。
因此,他們需要的學習成本更少——理想情況下,根本沒有學習成本。
情商在商業中的重要性
除了讓體驗更加自然和減少學習成本外,情感化設計還為產品創造者帶來了另一個好處:它提高了用戶對產品的使用率。合理的利用人類對情感的行動能力來創造更好的用戶參與度。
體會真實的語音界面
現在,以語音為主要界面的產品越來越受歡迎。我們當中的許多人在使用亞馬遜Echo和蘋果Siri進行日常活動,如設置鬧鐘或預約等。但目前市場上的大多數語音交互系統仍有一個與生俱來的限制:他們沒有考慮用戶的感受,因此,當用戶現在與谷歌這樣的產品交互時,他們會有很強的與機器交流的意識,并非是真正的人類。系統可預測地響應,并編寫響應腳本。與這樣一個系統進行有意義的對話是不可能的。
但是如今市場上有一些完全不同的系統。其中一個是社交聊天機器人應用程序Xiaoice。這個應用程序的核心是一個情感計算框架;這個應用程序是建立在這樣一個理念之上的,即首先要與用戶建立情感聯系。Xiaoice能夠動態地識別情緒,并通過長時間的對話和相關的回應吸引用戶。因此,當用戶與Xiaoice互動時,他們會覺得自己在和一個真正的人交談。
許多人在電影《她》(2013)中看到了基于語音的互動影響力。Theodore ( Joaquin Phoenix 主要角色) 愛上了一個 Samantha (一個復雜的操作系統)。這也使我們相信,未來基于語音的交互系統,主要目的之一將是為用戶提供虛擬伴侶。這部電影最有趣的是 Theodore 沒有 Samantha 的視覺形象——他只有她的聲音。要建立這種親密關系,就必須產生反映一致個性的回應。這將使系統具有可預測性和可信賴性。
雖然技術離Samantha這樣的操作系統還很遙遠,但我相信語音優先的多模式界面將是語音支持界面發展的下一篇章。這些界面將使用語音作為主要的交互方式,并在創建和構建連接感的上下文中提供附加信息。
為Brain.ai設計的語音界面示例(圖片來源:Gleb Kuznetsov)
AR體驗的演變
增強現實(AR)被定義為現實世界之上的數字覆蓋,并將我們周圍的物體轉化為交互式數字體驗。我們的環境變得更加“智能化”,用戶的手指尖上會出現“有形”物體的錯覺,這樣就在用戶和產品(或內容)之間建立了更深層次的聯系。
使用AR重新定義現有概念
AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它可以幫助我們看到以前無法看到的東西,這有助于我們了解更多關于周圍環境的信息。AR屬性有利于幫助設計人員使用熟悉的理念創造新的的層次體驗。
例如,通過使用移動AR,可以打造一個新的飛行體驗感受,允許乘客查看有關其它班機或當前航班飛行進度的詳細信息:
AR在空中客車A380的飛行體驗中。(圖片來源:Gleb Kuznetsov)
AR幫助我們在空間中找到自己的路,并讓我們一目了然地獲得所需的信息。例如,AR可用于為當前位置創建豐富的上下文提示。被稱為SLAM(同步定位和映射)的技術非常適合這種場景。SLAM允許對環境進行實時映射,還可以將多媒體內容放入環境中。
為用戶提供價值的機會有很多。例如,用戶可以將他們的設備指向建筑,并在屏幕上了解更多關于這個建筑的信息。它能夠顯著的減少工作量,并通過允許導航和訪問實現輕松的情感體驗。
在上下文中提供其他信息(圖片來源:Gleb Kuznetsov)
我們周圍的環境(如墻壁或地板)可以變成一個可交互的場景,這種方式在過去僅限于我們的智能手機和電腦。
你在下面看到的概念設計就是這樣的;它使用物理對象(白墻)作為通常使用數字設備傳送的內容的畫布:
交互式墻的概念 - 在現實世界之上的數字覆蓋。(圖片來源:Gleb Kuznetsov)
避免信息過載
許多人都看過一個叫做“超現實”的視頻。在這段視頻中,物理世界和數字世界已經融合,用戶被大量信息所淹沒。技術允許我們同時顯示幾個不同的對象。如果使用不當,很容易造成過載。信息過載是一個嚴重的問題,它會對用戶體驗產生負面影響,避免信息過載將是AR設計的目標之一。精心設計的應用程序將會過濾掉那些與使用人工智能的用戶不相關的內容。
高級個性化
當系統實時地根據用戶的需求和期望來調整內容或功能時,就會發生數字體驗的個性化?,F在許多移動應用和網站使用個性化的概念來提供相關內容。例如,當你訪問Netflix時,你看到的電影列表會根據你的興趣進行個性化設置。
AR眼鏡允許創造一種新的個性化水平,即“高級”的個性化水平。由于系統“看到”了用戶看到的內容,因此可以利用這些信息提出相關建議或在上下文中提供其他信息。試想一下,你很快就會戴上AR眼鏡,傳輸到視網膜的信息將根據你的需要進行調整。
從增強現實走向虛擬現實,創造沉浸式體驗
AR體驗具有自然的局限性。作為用戶,我們在內容和內容之間有明確的界限; 這條線將一個世界(AR)與另一個世界(現實世界)分開。這條線讓人感覺到AR世界顯然是不真實的。
你可能知道該如何解決這個限制,例如虛擬現實(VR),當然。虛擬現實并不是一種全新的媒介,但直到最近幾年,技術才達到讓設計師創造沉浸式體驗的程度。
沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時,你的大腦很難處理你收到的信息是否真實。
以下是設計人員在創建沉浸式虛擬環境時需要記住的內容:
01、寫一個故事
有意義的VR需要有一個強有力的故事核心。這就是為什么在你開始設計VR環境之前,你需要為用戶旅程寫一個故事。一個被稱為“故事板”的強大工具可以幫助你做到這一點。使用故事板,可以創建故事并檢查所有可能的結果。當你審視你的故事時,你將看到何時以及如何使用視覺和音頻提示來創造一種沉浸式的體驗。
02、與角色建立更深層次的連接
為了讓用戶相信虛擬現實中他們周圍的一切都是真實的,我們需要與用戶扮演的角色建立聯系。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這個表示應該是實際的手-而不僅僅是一個假造的復制品??紤]不同的因素(如性別或膚色)是至關重要的,因為這會使互動更加現實。
用戶可以看到他或她的手,看他們看起來像一個角色。(來源:leapmotion)
也可以將現實生活中的一些對象帶到虛擬現實環境中,以創建這種連接。例如,一面鏡子。當用戶查看鏡像并在反射中看到其角色時,它可以在用戶和虛擬角色之間實現更真實的交互。
虛擬現實用戶會查看虛擬鏡像并將自己視為VR環境中的角色。
03、使用手勢而不是菜單
在設計沉浸式虛擬現實體驗時,我們不能依賴與傳統的菜單和按鈕形式。為什么呢?因為顯示菜單相對容易打破沉浸感。用戶將會知道他們周圍的一切都不是真實的。設計師不需要使用傳統的菜單形式,而是需要依賴手勢。設計界仍在為使用手勢定義一種通用語言的過程中,參加這項活動是有趣和令人興奮的。棘手的部分是讓用戶熟悉和可預測的手勢。
試圖將現有的交互概念重用于VR體驗。不幸的是,這個概念會打破沉浸感。新媒體需要新的互動模式。
04、與VR環境中的元素交互
要創建一個感覺真實的環境,我們需要讓用戶能夠與現實中的對象交互。理想情況下,環境中的所有對象都可以設計成允許用戶觸摸和查看它們的方式。這樣的物體會起到刺激作用,幫助你創造一種更沉浸的體驗。觸摸對于探索環境極其重要;嬰兒在最初幾天獲得的最重要信息是通過觸摸獲得的。
05、在虛擬現實中分享情感
虛擬現實有機會成為一種新的社會體驗。但要做到這一點,我們需要解決一個重要的問題,即,把非言語的暗示帶入交互中。
當我們與他人互動時,我們獲得的信息中的一個重要部分來自肢體語言。驚奇、厭惡、憤怒——所有這些情緒都存在于我們的面部表情中,在面對面的交流中,我們從眼睛區域推斷信息。當人們在虛擬現實環境中交互時,提供這些信息是很重要的,以此來創建更真實的交互。
好消息是,頭戴式設備(HMD)將很快覆蓋情感識別。在虛擬現實中,幾乎任何人與人之間的互動都會從面部表情中受益。
06、為VR環境設計聲音和音樂適合
音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音,就不可能創造真正的沉浸式體驗。聲音既可以用作背景元素(即周圍風的聲音)也可以用作方向。在后一種情況下,聲音可以作為提示-通過播放方向性(聲音來自何處)和距離(用戶可以將注意力集中在特定元素上)。
在為虛擬現實設計音頻時,最重要的是使聲音成為3D。2D聲音對虛擬現實來說不太好,因為它會使一切變得過于平坦。三維聲音是你可以聽到的聲音,在你周圍的每個方向-前面,后面,上面和后面-所有的地方。您不需要專門的耳機來體驗3D聲音;可以使用HMD的標準立體聲揚聲器來創建它。
頭部跟蹤是良好聲音設計的另一個關鍵方面。讓聲音以現實的方式表現是至關重要的。這就是為什么當用戶移動頭部時,聲音應該根據頭部移動而變化。
結論
當我們考慮到產品設計的現代狀態時,很明顯我們只是處于冰山一角,因為我們非常局限于平板電腦。
我們見證了人機交互(HCI)的根本轉變——重新思考數字體驗的整個概念。在未來的十年里,設計師們將打破玻璃(我們今天所熟知的移動設備時代),轉而使用未來的接口——復雜的語音接口、先進的ARS和真正的沉浸式VRS。當我們要創造一種新的體驗時,我們必須明白,我們唯一的界限就是我們的大腦告訴我們,它必須一直是怎樣的。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
這是一個移動端的時代,Twitter 的移動客戶端經歷了很多版本的迭代,但是桌面端的更新改版則非常的克制。一周之前,Twitter 將接近7年未曾大幅度改版的桌面端頁面,從里到外重新翻新了設計。
新浪微博的每一次小幅度調整都會帶來大量的吐槽和不適,更不用說像Twitter 這樣的世界級的社交媒體網站。用戶的不適應不理解和負面反饋是避免不了,這樣的大幅更新改版背后,有著這個平臺不得不做的理由。
最近 Twitter 新版背后的設計師接受了連線雜志的采訪,深入地聊了一下改版背后的考量。
設計技術和工具的快速發展,視覺設計本身,尤其是 UI 界面的很多具體的執行端的工作慢慢的沒有那么麻煩了,但是找到為什么這么設計的設計決策,并不是那么簡單。
在整體視覺風格上,Twitter 桌面端的設計給人的整體感知是更加現代的——并且和移動端版本的設計靠近且保持了一致。這絕對是一個以數字產品為核心的科技公司應該做到的最基本的事情。
原本置于頂部的導航欄消失了,功能性更強的左側邊欄承載了主要的導航功能。
其中,原本被隱藏的「書簽(bookmarks)」和「列表(LIsts)」是非常實用的內容管理功能,在這次改版的時候被直接顯示在側邊欄當中。
而更重要的改變在于,關于當下正在發生的熱門事件,單獨占據了右側的側邊欄「Trends for you」,大家正在熱烈討論的熱門事件以Twitter 中標志性的標簽(Hashtags)的形式呈現,相當于微博中的「熱門微博」。而這在老版的 Twitter 中,這類內容的存在感并沒有那么強烈,原本存在于第一屏的左側側邊欄中,并且只有標簽,除非你有意識地去關注和點擊,否則很容易錯過。
搜索欄同樣被挪到了右側邊欄,置于「熱門趨勢」內容的頂部。這一設計巧妙的地方在于,它暗示了內容呈現的邏輯:當你搜索內容的時候,搜索結果會直接覆蓋在右側,而不會占據中間的主要的信息流。
毫無疑問,新版的 Twitter 在布局上更加扁平了,但是信息的扁平化呈現還不止布局上,交互上也相應的變化。在老版的 Twitter 中,當你點擊具體的推文條目的時候,內容會以彈出框的形式呈現,但是新版中則會在當前層中直接擴展開顯示,不會彈出,整體的融合感和有機感會更強。
老版 Twitter 中推文彈出框
新版 Twitter 中的界面
同樣的,用戶在回復、轉推和點贊的時候,也不用在不同的彈出框模式下進行,而是更加直覺地在當前的頁面中完成,整體感更強,更加直覺。
用戶交互頻次相對較高的轉贊評和「熱門」和主要信息流都不會在彈出框和疊加層控件中完成了,主要信息流也不會被因此而覆蓋,整個 Twitter 因此顯得更加敞亮開闊。
另外一方面,新版 Twitter 提供了更加豐富的個性化設計的體驗,這也是對于 Twitter 用戶體驗的一次重要提升:
雖然在之前老版的 Twitter 中也可以定制字體大小色彩,但是之前的字體大小是純粹的隨意設置,這種自由度讓很多并不熟悉的用戶難以控制好文本和色彩的對比度,從而造成了整體視覺的愉悅度較低的情況。
新版中的配色和字體大小都是經過調校之后,比較合理的選擇,這樣擁有了足夠的選擇空間,又保持了整體視覺體驗上的愉悅性的設計。在產品顆粒度的控制上,Twitter 有著一套成熟精準的設計方案。
與此同時,所有人都期待的,深色模式,同樣隨著這次頁面重設計,一并打包更新了:
對于深色模式的控制,Twitter 和和其他的平臺略有一點不同,他們所設計的深色模式包括「昏暗(Dim)」和「熄燈(Light out)」兩種,前者的背景色是深灰,而后者則幾乎是全黑。
任何一個社交媒體平臺,大量的用戶涌入進來之后都會面臨著復雜的管控問題,更不用說 Twitter 這個已經存在了13年的世界性的平臺。許多狀況不可能簡單的一刀切來解決。
作為平臺,Twitter 已經在竭力推動「健康的對話」,但是在充滿分歧和對抗的網絡當中,情緒化是常態,簡單的依靠 Twitter 官方的帳號來發聲,并不足以覆蓋如此廣泛的垂直領域和復雜多樣的用戶群體,以及不同的國家和地區。
「我們以前經常會推出一些新的設計和小功能。上線之后,過一陣子我們再搜出來,用投影儀投到墻上重新審視,」Twitter 的聯合創始人 Biz Stone 說:「然后我們會覺得,好像不應該這么設計?!?
「我們的目的是為公眾的對話來服務的。但是目標明確之后,還需要問一個問題:我們真的夠好嗎?」Biz Stone 在采訪的時候,這么說道。正是在這樣一個問題促使之下,Twitter 的改版重設計就悄然推動起來了。
從左到右分別為 Biz Stone,Bryan Haggerty 和 Mike Kruzeniski 。圖片來自 Wired,攝影師:Samantha Cooper
Twitter 團隊對此選擇了謹慎行事。他們選擇了類似灰度測試的方法,讓不同的用戶參與到不同的「測試」當中來,包括不同的書簽模塊的設計,不同的深色模式,不同的搜索模式,等等。絕大多數的設計都正面的,但是它們也并不是爆炸性的。
如今所呈現出來的新版頁面當中,絕大多數的設計都克制而微妙,以往的很多功能都得到了簡化。「我們正在試圖尋找合適的機會,重新創造更加大膽的設計,但是它需要一個穩固的基礎,所以我們打算從這一次的重設計開始,從我們最好的功能和服務開始。這就是基礎?!筎witter 的高級產品設計總監 Mike Kruzeniski 面對連線雜志的采訪,是這么解釋他們設計的初衷。
所以,Twitter 的這次重設計只是一個開始。對于這個平臺上大量的關于仇恨和騷擾相關的負面內容,清理起來并不是一套規則就可以全部解決的,而 Twitter 更傾向于人為來處理和干預,但是平臺本身需要更好的支持這方面的功能。
在 Twitter 早期階段,視覺設計并不是他們的重心?!肝覀冎皇潜M全力地讓產品具備可用性,」Stone 回憶當時的情況:「我們并沒有試圖讓它看起來好看……我們只是努力讓平臺保持活力?!巩敃r的 Twitter 整個團隊大概只有30個人。
實際上,隨著后面更加專業的 UI 設計師加入進來之后,整個團隊的設計能力也越來越強。UI 界面是Twitter 和用戶進行溝通的媒介。
雖然現在是移動端為主的時代,但是桌面端 Twitter 的重要性并沒有弱化。Twitter 的網頁重設計項目的負責人 Jesar Shah 說:「人們在桌面上大量使用 Twitter 來搜尋感興趣的信息,跟他們息息相關的信息內容?!乖陧撁娴淖髠龋幸粋€快速的賬戶切換的功能,對于這一點,Shah 補充道:「圍繞這個功能點,我們從全球不同的地方獲得了反饋。比如日本就是Twitter 最大的市場之一,當地用戶基于自己不同的興趣點創建的賬戶,比如一個賬戶專門是關于美食的,一個是專門關于旅行的,還有一個則是給自己的寵物貓的。無論你使用哪個設備,都要能夠快速便捷地切換帳號,這是我們這么長時間的調研中,聽到最多的一個需求點?!?
從左到右分別為 Ashlie Ford,Marina Zhao 和 Jesar Shah ,她們主導了這次 Twitter 的設計。
「我們需要確保整體體驗足夠優秀,所以原則上需要嚴謹。鑒于我們服務對象是全球客戶,所以我們需要盡可能滿足不同用戶的訴求?!筍hah 和 Ford 所帶領的團隊專門創建了一份調查問卷,以獲取反饋。他收到了來自全球總計20萬份問卷,Ford 的團隊花了整整一周的時間,借助翻譯工具將其中來自非英語國家的問卷都翻譯出來,并且梳理匯總了。
「用戶肯定會以為我們不會仔細閱讀這些問卷,但其實我們都仔細閱讀過了?!筍hah 說道。她閱讀到的第一個用戶需求反饋就是想要更多的表情符,為了應對這樣的需求,Twitter 制作了一個分組表情輸入控件。同時,他們還提供另一個不斷更新的熱門 Gif 圖片表情合集,非常貼合用戶需求了。
Twitter 已經 13歲了。
在 這個社交媒體平臺上,@realDonaldTrump 可以進行「Twitter 治國」,還有大量的流言和不真實的信息,騷擾和不夠人性化的內容。這都是客觀存在的,亟待解決。在今年年初的時候,策展人 Chris Anderson 將 Twitter 比作是正在撞向冰山的泰坦尼克號。的確如此。
但是,設計改變不了一切。Twitter 的設計團隊在接受采訪的時候也坦誠地接受了這個事實。但是他們認為,設計可以幫助他們界定和構建 Twitter 功能,并且逐步地幫助用戶來解決身份認同的問題。
「如果你在 Twitter 上問一個用戶,Twitter 是什么,你會得到一千個答案?!筀ruzeniski 說:「曾經我們認為這樣很糟糕,但是現在我認為這是一個很棒的事情。因為現在我們可以更好地幫你找到特定的興趣,并且和你的興趣、你所關注的主題連接到一起?!?
曾經的推特是一個鋪滿木地板,到處都是品牌標志性藍色的「鳥籠」式的建筑,但是如今重新裝修過的辦公室則更加現代,墻壁上到處是各種各樣的涂鴉,這些涂鴉代表著Twitter 這個平臺內的各種垂直社區,比如 Black Twitter、NBA Twitter,以及各路名人的粉絲社區。
走過Twitter 的辦公室,你會清晰地收到這樣的一個信息:一切都是關于人的,而不是產品。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
好的衡量指標帶你上天堂,不好的衡量指標帶你睡…嗨,本周Nathan 與大家分享下一些在UX 工作中,常會聽到的一些衡量指標專有名詞,有些或許是你常常聽到但不太確定的,有些則可能是你所在的領域或項目比較少討論的。
雖然在大多數的公司中,與中小型的設計團隊,采用快速定性的研究,可能是比較符合CP 值的方式。但當產品、用戶甚至團隊具有一定規模時,關于量化指標的重要性,在2019 年的今天想必已經不需要再重復敘述。
不太一樣或是常被誤會的是,對于設計師來說,多數在工作中使用的量化衡量指標,其實大多是圍繞設計工作的顯性部分,也就是可用性(Usability) 上,而可用性工作其實只是UX Design 的一環。
但, UX 畢竟是由商業環境中反推學術的一門職位。
如果僅僅只是將量化指標用在UX Designer 的工作上,反而是自己自廢武功。不要忘記小至前端展現,大至商業策略,都可以是UX Design 的范圍。
Five Levels of UXs ConversionXL
因此如何學習使用一些既帶有商業特性,又能體現用戶體驗的指標,是每個UX 工作者,多少都要知道的。
We are not design the UX,but we can design for UX
另外,本篇主要在分享一些使用體驗橫標指標上的一些迷思,與介紹工作中常用的一些指標,至于如何透過這些指標幫助UX Designer 在工作中提升重要性,來自證UX 工作能帶來的價值部分,可以看一下Nathan 以前寫過的一篇古早文。
當有一定的用戶后,結合常見的數據分析工具或內部團隊自建的數據埋點,網站和應用馬上就能出現許多可供分析的數據,似乎只要有這些數據,令人驚喜的洞察就會自動浮出水面。
GSM(Goal-Signal-Metrics)是Google 提出的目標導向衡量模型,用來拆解用戶使用產品時的設計目標-行為信號-衡量指標的一種模式。
Google GSM Framework, Goal-Signal-Metrics
在商業場景中,所有的數據衡量必定帶有明確的目標,比如:透過觀察寬口轉化和窄口轉化,分析廣告投放效益以及GMV 成本。甚至,如果僅基于這些觀察數據進行動作性的優化,沒有配合中長期的決策時,變化僅會流于短期效益。
一個數據指標容易監測與計算,并不意味著它對你的產品來說就是重要的。透過現在大部分的分析工具,可以很容易就監測跟蹤成百上千的各種指標,而且分析的工具也層出不窮。新產品團隊往往因為能獲取大量的數據,然后就期望洞察自動出現,但往往不遂人意。
例如,網頁或App 的PV 數據很容易收集,但如果你的網頁或產品是屬于內容消費類型的,它就無法呈現用戶是否在你的網站消費內容(有效時長更具代表性)。高的PV 或許是由市場廣告轉化過來的用戶,但對內容消費類的產品目標,肯定不是確定每個用戶到底瀏覽了多少頁面,PV 可能是衡量廣告效果的重要度量,但它并不是監測用戶參與度的良好方式。
如果你不確定你正在用的數據指標,是否有正向幫助的話??梢詤⒖糀ARRR 的轉化模型,來幫助自己梳理清楚核心的轉化鏈路。
如上面所說相較于PV、UV、DAU,用戶在網站或應用中的有效停留時長,可能更適合用來衡量用戶在產品中的參與度。
但停留時間越長可能是正面的,也可能是負面的。在電商產品類的轉化過程中,如果在關鍵的轉化節點用戶停留較久,可能意味著用戶因困惑、分心或挫敗而花費了大量時間。即便同時監測網站或應用的停留時長和轉化率,你可能仍然不清楚為什么用戶參與度如此高,對于最后的成交卻沒有太大幫助。
這時就需要透過配合更細致的數據指標組合,慢慢的定位用戶在操作步驟中的關鍵問題,并嘗試透過A/B Testing 來解決。
大家常用的數據指標,并不一定適合自己當前產品階段或企業目標。
正常而言企業的主力產品,正是代表著企業主要的商業營利模式,因此在發布產品后要監測的各種衡量指標,通常在產品準備進入市場前,都已依照商業模式進行拆分。但在產品的冷啟動時期,這些依商業模式拆分的指標,很多時候無法反映出,企業的產品是否正在往好的方向成長。
比如Saas服務類型的產品,通常都會使用凈收入留存NDRR (Net Dollar Retention Rate)作為主要的商業模式指標,但在前期用戶量少時,搭配NPS或PSAT等類型的指標,才能夠好的回歸到Saas產品的服務體驗本質。了解企業目前提供的服務,對用戶來說是否是正向的,并且能持續增長。
在產品開發迭代中發布新功能后,數據可能會開始上升。產品團隊可能認為這是新功能的發布造成的,但銷售部分卻可能會將它與一項新的促銷活動聯系起來,而UX 團隊則可能認為這與他們的新設計相關。
這種場景在產品的數據到達一定規模時十分常見。真實情況是只能透過控制一些固定因子,來做更細部的A/B Testing 拆分。但大多時候產品的迭代時間與開發資源,很難真正做到能明確確認是因為什么原因。
因此結合前面所說的,各團隊在主要的數據指標中,配合其他輔助指標,甚至提取更與團隊緊密相關的個別指標,來了解在產品的迭代過程中,各自團隊做的決策是否是正向的。
用戶體驗指標,跟易用性和商業指標目的不同
下面就會介紹幾種工作中常用的,與體驗相關的衡量指標,部分指標在訂定的一開始,本身即包涵了商業與體驗維度。
大部分的體驗衡量指標,都會基于三個主要價值觀,結合其他用戶態度類型作為衡量基準。
下面介紹幾種,在工作中可能常用到的通用型,與不同業務場景型的體驗衡量指標。
01 傳統網站服務使用的PULSE
PULSE 是基于商業和技術的衡量模型,被很多組織和公司廣泛應用于跟蹤產品的整體表現。包含:
但不難看出PULSE 指標僅覆蓋了UX 設計中最最基礎的可用性部分,和衡量用戶體驗的直接關系不大,難以評估設計工作到來的影響,畢竟這個指標創建之初是用來衡量產品的技術與商業效果。
因此為了彌補PULSE 指標中存在的問題,Google 提出了HEART 指標模型。HEART 是“以用戶為中心度量的指標體系,以及把產品目標與創建指標體系相互關聯的過程”
02 以使用者為中心的HEART
HEART其實也是業界使用的老黃歷了,尤其常用GA ( Google Analytics ) / Adobe Omniture的人一定都對他不陌生。
早期產品開發上線的階段,大多是訂定業務KPI 作為衡量項目產出的價值,但在用戶體驗的部份,卻很難有可視化以可及量化的衡量指標。因此Google 嘗試把產品目標以及體驗指標相互結合,建立以用戶為中心的HEART 度量體系。
Google Heart 體驗衡量指標模型
01 NPS( Net Promoter Score凈推薦值)
凈推薦值最早是由貝恩咨詢的創始人Fred Reichheld 在2003 提出,通過測量用戶的推薦意愿,從而了解用戶之于產品或服務的忠誠態度。
NPS 算是近幾年用戶體驗領域上的當紅指標(甚至業內還有所謂的NPS 教派XD),基本上互聯網類產品都可以使用。其基本核心理念是,一個企業的用戶可被劃分為三類:推薦者、中立者和批評者。
相較于其他的指標,NPS 詢問的是意愿而不是情感,對用戶來說更容易回答,且直接反應了客戶對企業的忠誠度和購買意愿,在一定程度上可以看到企業當前和未來一段時間的發展趨勢和持續盈利能力。
02 CES( Customer Effort Score用戶費力度)
CES 指的是你的產品或服務,會需要用戶花費多少力氣才能滿足自身需求。
根據Oracle 的一項研究,82%的人把他們的購買經歷描述為“花費太多的努力”,CES背后的理論就是,應該想辦法減少客戶為了解決問題而付出的努力。CES可以幫助你找出可優化的方向,更容易理解在哪里進行改善,較低的費力度也與客戶留存直接相關,從而增加客戶的生命周期價值。
一般情況下,大多會先利用CSAT、PSAT這類的指標來衡量客戶對產品或服務的體驗反饋,當這套標準的價值到達臨界點時,就應該嘗試CES作為滿意度指標的擴充,更充分的評估Saas產品的用戶體驗情況。
03 FCR( First contact resolution一次性解決率)
作為Saas類服務型產品,在獲取新客或幫助舊客時,大多是通過客戶服務,在許多的互聯網公司Customer Service團隊也是重點投入資源的。而「FCR一次解決率」即是用來衡量這類客戶服務的指標。
FCR 是指客戶的服務需求在第一次客戶服務中完全解決的占比率。
測量一次性解決率是相當簡單的。通過單次交互(電子郵件響應,電話,聊天會話等)解決你收到的客戶請求數量,并除以同一時期收到的請求總數。
一次性解決率不僅對Saas 產品的客戶至為重要,也能體現客戶服務的績效和表現,甚至深入到每個員工的層面上。
01 SUS( System Usability Scale系統可用性量表)、QUIS(Questionnaire for User Interface Satisfaction用戶交互滿意度)
SUS 應該也算是用來評估單個用戶使用某個產品的可用性時,最常見的指標了。SUS 是一種用來量化定性數據的方法,并不僅僅依靠數據統計,需要結合用戶具體參與來進行調研,通常作為可用性測試的組成部分。
SUS 通常用來作為改版效果的整體評估,在使用時可以對題目的主詞產品進行替換,這些替換對最后的測量結果都沒有影響。
而QUIS 則可以說是SUS 的進階版,會更注重具體頁面或操作節點的易用性,通常作為SUS 的延伸使用。比較簡單的QUIS 版本包括27 個問題,分為5個類別:
Overall Reaction 總體反應、Screen 屏幕、Terminology/System Information 術語/系統信息、Learning 學習、System Capability 系統能力
02 CSAT( Customer Satisfaction客戶滿意度)、PSAT( Purchase Satisfaction購買滿意度)
客戶滿意度也算是經典的衡量指標之一了,隨著商業競爭的激烈,各類型的產品與企業都對客戶滿意度更加重視,很多時候你所熟悉的電話滿意調研、電子郵件調研,甚至直接在消費后的星級評分,其實都是關于這類問題的問券。
PSAT 則是在CSAT 的基礎上,針對消費類型產品進行細化,強調售后使用體驗的部分。這類問卷的好處是簡單且擴展性強,可大至系統小至任務。
但缺點就是用戶容易在中等范圍內回答問題,無法給企業帶來真實的反饋。而且,即使在客戶滿意度很高的情況下,依然有可能遭遇留存流失問題。
因為滿意度并不直接與客戶忠誠度相關聯。
其他相關的系統性可用型指標當然還有許多,不過在工作流程中一般來說都較少會使用到,主要還是更具專業性的用研User Researcher 角色較常使用,包含:
01 PSM(Price Sensitivity Measurement 價格敏感度測試)
PSM 衡量目標用戶對不同價格的滿意及接受程度,了解其認為合適的產品價格,從而得到產品價格的可接受范圍。
PSM 考慮了消費者的主觀意愿,又兼顧了企業追求最大利益的需求。但測試過程主要基于目標對象的自然反應,沒有涉及到任何競爭產品的信息。所以在橫向拉通上顯得較為薄弱。
也正因為缺少對于競爭產品的分析,所以PSM 目前主要集中在自成體系的產品鏈路中,用來配合Saas 服務或虛擬產品的定價,在實體產品中已經較少被使用。
02 DSR(店鋪質量評分)
DSR 算是電子商務類產品中的特殊指標,初期是在在阿里巴巴的電商生態中大規模使用,目前也慢慢變成電商場景的通用指標。
DSR 是指買家在電商平臺上購物成功后,針對本次購物給出的評價分數。買家可以評分的項目包括「描述相符、服務態度、發貨速度、物流速度」4 項。
DSR 評分計算方法:每項店鋪評分取連續6個月內買家給與該項評分的總和/連續6個月內買家給與該項評分的次數,統計最近180天
DSR 評分直接影響賣家在電商平臺中,商品搜索曝光權重的高低,從而影響商品與店鋪的排名。因此對于平臺類的UX Design Team 來說,建立類似DSR 的曝光評分機制,也是間接影響服務提供商的產品體驗,進而提升整體平臺中的用戶體驗質量。
03 ZMOT(Zero Moment Of Truth第零關鍵時刻)、FMOT(First Moment Of Truth第一關鍵時刻)、SMOT(Second Moment Of Truth第二關鍵時刻)
FMOT & SMOT 是目前新零售場景常會提到的指標模型,但其實在傳統的零售行業早就是一個通用的衡量指標,FMOT 指的是消費者在接觸到對應商品貨價的關鍵3~7 秒,所有的商品售價、包裝、擺設都是在這關鍵3~7 影響消費者拿取商品甚至購買的關鍵因素。
而SMOT 則是指這類實體產品,在消費者購買回家后的首次體驗,是否符合這個商品的廣告語,對于一個品牌來說,即是是否成功地履行了它的承諾還是令人感到失望,這也是消費者是否會成為一個品牌的粉絲,甚至在線上或線下渠道分享的關鍵(是否很像NPS 的精神?)。
延伸出的ZMOT,即是線上線下結合的新零售關鍵指標,讓消費者在「尚未接觸」到特定商品前,就透過線上向消費者進行行銷,當消費者主動進行相似活動、搜索時,就能接收到產品的正面訊息來影響消費意向。
本質核心也就是
當廣告出現在用戶需要的時刻,就變成了服務
ZMOT & FMOT & SMOT
用戶體驗的主觀評估,大多是偏觀察式的方法,也是大家比較耳熟能詳的用定性調研法,比如眼動儀、觀察法、品牌問卷… etc.。
當然如果要盡可能嘗試量化這類User Attitude 主觀評估數據時,前提都是把用戶體驗理解成兩種維度,一種維度是實用性(Pragmatic)偏向常說的可用性,另一種是享樂性(Hedonic)也就是常說的舒適性,享樂性維度還會被拆分成了幾種屬性,例如Stimulation和Identification。
01 UEQ(User Experience Questionnaire 用戶體驗調查表)
UEQ 是SAP 開發的一套定量分析用戶體驗的工具。用戶在問卷上表達出他們在使用產品和服務中的感受,印象和態度,然后生成一個包含用戶體驗數個方面的量化表。包括傳統的易用性方面的指標:
也包括三個體驗方便的指標:
02 HQ(Hedonic Quality享受性質量)、PQ(Pragmatic Quality實用性質量)& AttrakDiff
HQ 主要是用來消費型產品的情感衡量指標,較常使用消費者對于消費類型產品的評價。而PQ 則主要是在易用性層面上加入主觀因素的評分,如果要針對性地對HQ & PQ 進行系統性評分,AttrakDiff 則是一個較常使用的工具。
AttrakDiff 包含了28 項題目,每一項都是一個7 分制量表,分和最高分代表一對具有評價性質的反義詞,用戶需要根據使用產品過程中的某一方面的體驗從低到高進行評分,比如“混亂的— — 清晰的”,分數越高,表明產品的某一方面設計得越清晰。
在產品或業務中導入體驗數據衡量指標,不是新入行的設計師想像的這么簡單。真正的實務過程絕不是將文章中的指標,直接導入自己對接的產品中,每一個數據指標都有其目的,且不同的人即便看到的數據相同,也都會有自己的解讀方式。
過于依賴指標,如果不隨時依據市場動態與公司策略進行調整,不僅容易因為短期的良好數據忽視了中長期的產品成長,也會慢慢的喪失設計師的感性創意能力。
所以,清楚的認知到哪個指標可以幫助我進行什么樣的設計策略。才是真正的使用方式。千萬別讓設計師變成動作導向的工作職位,
Value-Driven 價值導向的工作模式,才是設計師的生存法則
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
很多設計師和產品經理在剛入門時,都會對一些數據指標很模糊(這些花花綠綠的是啥玩意兒)。尤其是與產品團隊和運營扯需求、與開發談指標、談實現等場景,數據指標就更為常見。假如我們對指標不了解、沒有概念,則會被多方質疑你的專業能力,同時你也無法提升“數據驅動業務、數據驅動產品、數據驅動設計”的核心能力。
關注數據指標,不僅僅是產品經理或運營的“專利”,作為交互和UI設計師也需要掌握這方面的技能,來幫助我們產出更貼近用戶行為的設計。同時,監測產品數據也有2個重要作用:一是可以監控產品迭代中的問題點和設計點、運營和市場活動的收入水平等,看看他們目前處于什么狀態,也可以為后續產品迭代的方向提供參考幫助。二是通過對數據的挖掘和分析,可以發現新的商業機會和產品爆發點,也就是近兩年咱們經常聽到的數據增長、用戶增長、增長設計概念。
因此,作為一名設計師或產品經理必須要了解與業務相關的核心數據指標。由于所在領域不同、業務不同,因此團隊所關注的數據側重點也不同。今天就從“網頁基礎指標、用戶數據指標、如何獲取數據指標、產品設計的生命周期”來梳理我們產品設計者常見的指標維度。
一、什么是數據指標?
它是對當前業務有參考價值的統計數據,是通過對于業務需求的進一步抽象,并進行數據埋點后,加工出來的一套計算規則,并通過有效的方法論和數據可視化呈現,最終能夠解釋業務變化和用戶行為。當然,不是所有的數據指標都叫指標,只有對當前業務有參考價值的指標才可稱作指標,同時要具備:可統計、可分析、可監測的特點。
二、網頁基礎指標
先了解下流量的概念:分為站外流量來源和站內流量路徑。以下就拿電商產品舉例:
站外流量:通過其他平臺或外界媒體進入到你的店鋪就是站外流量。又分為免費和付費,免費有自然流量和搜索流量(比如在百度搜你店鋪的名稱并點擊進入,這就是從免費的外界平臺進入),而付費則主要是一些廣告投放的流量(比如將你的店鋪鏈接付費植入到某公眾號,讓他幫你推廣,既從他公眾號進入店鋪的流量)。
站內流量:通過平臺內的推薦入口或者搜索路徑等方式,進入到你的店鋪就是站內流)。主要指用戶在網站內的行為路徑。
PV(頁面瀏覽量)
用戶每1次對網站中的每個網頁訪問(成功訪問/進入)均被記錄1次。用戶對同一頁面的多次訪問,訪問量累計。在一定統計周期內用戶每次刷新網頁1次也被計算1次。
理論上PV與來訪者數量成正比,但是它不能精準決定頁面的真實訪問數,比如同一個IP地址通過不斷的刷新頁面,也可以制造出非常高的PV。
UV(獨立訪客人數)
訪問網站的一臺電腦客戶端為一個訪客。00:00~24:00內相同的客戶端只被計算一次。
使用獨立用戶作為統計量,可以更加精準的了解一個時間段內,實際上有多少個訪問者來到了相應的頁面。
VV(用戶訪問次數)
當用戶完成瀏覽并退出所有頁面就算完成了一次訪問,再次打開瀏覽時,VV數+1。VV同時也是視頻播放次數(Video View)的簡稱。
PV、UV、VV有啥區別?
比如你上午打開了UI中國,訪問了兩個作品頁面并關閉網頁。下午又打開了UI中國,訪問了五個作品頁面。則當日統計結果為:PV=5、UV=1、VV=2
跳出率
一個非常重要的指標,表示用戶來到網站后,且沒有進行操作就直接離開的比例,代表著陸頁面(訪客進入網站的第一個頁面)是否對用戶有吸引力,常用的計算方式是落地頁面的訪問量除以總訪問量。
比如,在一個統計時間內,網站有1000個不同用戶從某個鏈接進入,其中有50人沒有二次瀏覽行為,是直接退出網站的,那么這個鏈接的網站跳出率為:50/1000=5%。然而有些退出的行為不能作為退出考慮,比如頁面上刻意添加的導出鏈接,如合作伙伴的網站等,還有聯系我們,付款頁面等,都不算是負面的跳出,所以要根據不同情況統計有效的數據才能得出可靠的跳出率。
統計一個網站的跳出率是非常有必要的,能幫助產品提高用戶粘性。跳出率高,說明用戶體驗做得不好,用戶進去就跳出去了,著陸頁沒有滿足用戶的期望與需求,或是人群定位不精準。相反如果跳出率較低,說明用戶體驗做的很好,最起碼用戶能在第一時間獲取自己需要的內容,并且可能還會二次光顧。
退出率
針對網站內某一個特定的頁面而言,退出率是衡量從這個頁面退出網站的比例,通過一個頁面的退出次數除以訪問次數。
退出率反映了網站對用戶的吸引力,如果退出百分比很高,說明用戶僅瀏覽了少量的頁面便離開了,因此需要改善網站的內容來吸引用戶,解決用戶的內容訴求。
跳出率與退出率又有啥區別?
跳出率是指用戶進入網站起,沒進行什么跳轉操作,又從這個頁面退出或關閉的比例。退出率則是無論用戶從哪個頁面進入網站,最終從這個頁面退出的比例。
跳出率適用于訪問的著陸頁 (即用戶成功訪問的第一個頁面),而退出率則適用于任何訪問成功并退出的頁面,既用戶在網站上訪問的最后一個頁面 。退出率通常針對局部的頁面來統計,比如支付流程退出率高,那就要針對現狀對流程做優化。但站在網站總體的角度統計退出率沒啥意義,因為有訪問網站,就必然有離開網站。而跳出率則可以適用于著陸頁面,也可適用于網站整體。
平均訪問時長
指在特定統計時間段內,瀏覽網站的一個頁面或整個網站時,用戶所停留的總時間除以該頁面或整個網站的訪問次數的比例。
如用戶在網站特定時間內總停留時間為1000秒,在這段時間內,總的訪問次數是100次,那么這個頁面或網站的平均訪問時長就是1000秒/100=10秒。
該數據是分析用戶粘性的重要指標之一,也可以側面反映出網站的用戶體驗。平均訪問時長越短,說明網站對用戶的吸引力越差,可用內容信息越少。
轉化率
在一個統計周期內,完成轉化行為的次數占推廣信息總點擊次數的比率。
轉化率=(轉化次數/點擊量)×100%。以用戶登錄行為舉例,如果每100次訪問中,有10個登錄網站,那么此網站的登錄轉化率就為10%,而最后有2個用戶關注了商品,則關注轉化率為2%,有一個用戶產生訂單并付費,則支付轉化率為1%。
轉化率是產品盈利的重要指標之一,它直接反映了產品的盈利能力。不同行業的轉化率,關注點也不同,比如電商產品就要關注銷售轉化,看看參與活動的用戶當中有多少是在活動后產生支付的,有需要的還可以根據數據分析出人均購買次數和購買金額。再比如我們監測注冊量,就要關注注冊轉化率,看看這個活動給產品帶來了多少新增用戶。所以轉化率可以針對性分析產品在哪些方面做的不足,可以快速定位到問題點。
轉化率是采用訪客數量(UV)還是訪問量(PV)?
這需要根據團隊數據分析的目的而定。比如采用訪問量,就是認為每次訪問都可產生付費。若采用訪客量,就認為用戶多次訪問才能購買是正常的行為。個人建議前期采用訪客數量,以排除自己團隊對網站訪問的數據干擾,因為訪問量是可以通過同一個IP不斷刷新網頁而遞增的,而訪客數量是精準到一個IP地址(既一個用戶、一個設備)。
回購率
指用戶對商品或者服務的重復購買次數(回頭客)。
重復購買率有兩種計算方法:一是所有購買過產品的用戶,以每個人為獨立單位重復購買產品的次數,比如有10個客戶購買了產品,5個產生了重復購買,則重復購買率為50%;二是單位時間內,重復購買的總次數占比,比如10個客戶購買了產品,其中有3人產生二次購買,3人中又有1人產生三次購買,則重復購買次數為4次,重復購買率為40%。重復購買率越高,則用戶對產品的忠誠度就越高,反之則越低。
三、用戶數據指標
ARPU
即每個用戶平均收入。
ARPU=總收入/用戶數。它注重的是一個時間段內運營商從每個用戶所得到的收入,衡量互聯網公司業務收入的指標。ARPU值高說明平均每個用戶貢獻的收入高,但無法反映利潤情況,因為利潤還需要考慮到成本。果每用戶的成本也很高,那么即使ARPU值很高,利潤也未必高。
而用戶數可以是總平均在線用戶數、付費用戶數或是活躍用戶數,不同產品標準可能存在差異。ARPU注重特定時間段內從每個用戶所得到的收入,衡量互聯網公司業務收入的指標。ARPU值高說明平均每個用戶貢獻的收入高,但未必說明利潤高,因為利潤還需要減去成本。ARPU的高低沒有絕對的好壞之分,分析的時候需要有一定的標準。ARPU值高說明平均每個用戶貢獻的收入高,這段時間業務在上升。
新增用戶
既安裝應用后,首次成功啟動產品的用戶
按照統計跨度不同分為日新增(DNU)、周新增(WAU)、月新增(MAU)。新增用戶按照設備維度進行去重統計,如果該設備卸載了應用,一段時間后又重新安裝了該應用,且設備未進行重置,若再次打開應用,則不被計算為一個新增用戶。
新增用戶量指標主要是衡量營銷推廣渠道效果的最基礎指標。新增用戶占活躍用戶的比例也可以用來用于衡量產品健康程度(產品沒有新增和活躍,就進入“絕癥狀態”)。如果某產品新用戶占比過高,那說明該產品的活躍是靠推廣得來,這種情況非常有必要關注,尤其是新增用戶的留存率情況。
活躍用戶
既在特定的統計周期內,成功啟動過產品的用戶。除此之外,我們還可以將活躍用戶定義為某統計周期內操作過產品核心功能的用戶(按照設備去重統計)。
活躍用戶是衡量產品用戶規模的重要指標,和新增用戶相輔相成。如果只看一個指標來定義產品的成功與否,那一定是活躍用戶數。當然,一般重點關注核心用戶規模即可。希望用戶每天都使用的應用有新聞APP、社交APP、音樂APP等,其產品的KPI考核指標一般都有日活躍用戶數這項。但對于某些低頻消費需求和臨時性需求的APP,比如旅游、攝影、工具類等,可能會關注月活躍數,甚至特定周期內的活躍數。
活躍用戶數根據不同統計周期可以分為日活躍數(DAU)、周活躍數(WAU)、月活躍數(MAU)。
DAU(日活):某個自然日內成功啟動過應用的用戶,該日內同一個設備多次啟動只記一個活躍用戶;
WAU(周活):某個自然周內成功啟動過應用的用戶,該周內同一個設備多次啟動只記一個活躍用戶。這個指標是為了查看用戶的類型結構,如輕度用戶、中度用戶、重度用戶等;
MAU(月活):某個自然月內成功啟動過應用的用戶,該月內同一個設備多次啟動只記一個活躍用戶。這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。
留存率
既在某一統計時段內的新增用戶數中再經過一段時間后仍啟動該應用的用戶比例(留存率=留存用戶/新增用戶*100%)。通常重點關注次日、3日、7日、30日即可,并觀察留存率的衰減程度。
次日留存率:即某一統計時段新增用戶在第二天再次成功啟動應用的比例。如果次日留存率達到50%以上,說明這個產品已經是非常優秀了;
7日(周)留存率:即某一統計時段新增用戶在第7天再次成功啟動該應用的比例。這個時間段內,用戶通常會經歷一個完整的產品體驗周期,如果這個階段用戶能夠留下來繼續使用,很有可能成為產品的忠實用戶;
30日(月)留存率:即某一統計時段新增用戶在第30天再次成功啟動該應用的比例。通常移動端產品的迭代周期為2~4周一個版本,所以月留存率能夠反映出一個版本的用戶留存情況,一個版本的更新,或多或少會影響部分用戶的體驗,所以通過對比月留存率能判斷出每個版本的更新對用戶的影響面積,從而定位到類似問題進行優化。
若以上時段的留存率低,會映射出哪些問題?
次日留存率低:說明所針對的用戶群對我們的產品不感興趣;
7日留存率低:說明我們產品的內容質量太差,用戶過了新鮮勁兒之后發現產品用起來特別枯燥;
30日留存率低:版本迭代規劃做得不好,功能更新、內容更新、BUG修復、性能等都做得比較差,此時需要重新規劃迭代內容,不可一錯再錯。
留存率是驗證用戶粘性的關鍵指標,設計師和產品經理通??梢岳昧舸媛逝c競品對標,衡量用戶的粘性和忠誠度。對于一個版本相對成熟的產品,如果留存率有明顯變化,那就說明用戶質量有變化,很可能是因為推廣渠道等因素所引起的。同時,留存率也是產品改版的重要指標,產品體驗越好,越符合用戶需求,則留存率越高。若產品本身滿足的是小眾低頻需求,留存率則選擇雙周甚至是30日進行監測。一般來說,留存率低于20%會是一個比較危險的信號。
流失率
指那些曾經使用過產品或服務,由于各種原因不再使用產品或服務的用戶。用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。流失率和留存率有緊密關聯,流失率高既留存率低,但活躍度不一定高,因此需要綜合分析。也是重點關注次日、7日、30日的流失率。
對于流失用戶的界定依照產品服務的不同而標準不同,對于微博和郵箱這類用戶幾乎每天登錄查看的產品而言,可能用戶未登錄超過1個月,我們就可以認為用戶可能已經流失了。而對于電商產品而言,可能3個月未登錄或者半年內沒有任何購買行為的用戶可以被認定是流失用戶,所以不是每個產品都有固定的流失期限,而是根據產品屬性而判斷。設計師和產品經理需要找到流失的異常數據,定位流失用戶的原因,并在下個版本中修復產品中存在的問題。甚至還可以定位到流失的具體用戶ID,通過當時用戶注冊的個人信息進行跟進,我們最常見的就是游戲類產品“召回老玩家”的運營手段。
一次性用戶
既新增日后再也沒有啟動過應用的用戶。
一次性用戶是關鍵的營銷指標,和判斷無效用戶的標準,從中把目標用戶過濾出來。一般劃定的界限是至少超過7天時間才能夠定義是否是一次性用戶。
使用時長
既統計時間段內,某個設備從啟動應用到結束使用的總計時長。
一般按照人均使用時長、次均使用時長、單次使用時長進行分析,衡量用戶產品著陸的粘性,也是衡量活躍度,產品質量的參考依據。
啟動次數
既統計時間段內,用戶打開應用的次數。
重點關注人均啟動次數,結合使用時長可進行分析。用戶主動關閉應用或應用進入后臺超過30s,再返回或打開應用時,則統計為兩次啟動,啟動次數主要看待頻數分布情況。
使用間隔
既用戶上次使用應用的時間與再次使用時間的時間差。
使用頻數分布,觀察應用對于用戶的粘性,以及運營內容的深度。雖然是使用間隔,但是通過計算同一設備,先后兩次啟動的時間差,來完成使用間隔統計,充分考慮應用周期性和碎片化使用的特征。
四、如何獲取這些數據?
在工作中可能會發生這種情況“上文提到的數據指標有些看不到”、“不知道怎么看”,最終因為沒有數據而無法進行監測和分析。這里主要是因為在產品上線前沒有對數據進行開發統計。這部分工作一般是由產品經理去規劃,開發來執行,設計師也可以提出自己想要監測數據的需求給到開發,我們把這個規劃叫做“數據埋點”。
埋點其實是對產品的一個可視化健康檢查,貫穿產品的整個生命周期,使產品逐步達到最佳狀態(需要數據結果和產品迭代相互呼應),為未來產品優化方向給出指導意見。當然,埋點的目標不同,最終數據驗證的結果也會有所不同。
比如,新版本上線,需要驗證用戶行為和功能效果的幾種場景:
(1)新功能是否得到了用戶的使用與認可?本次新增的功能用戶點擊率和活躍度怎樣?
(2)用戶在核心功能的操作路徑上是否順暢?有沒有因為功能按鈕的設計而導致無效點擊增多?
(3)在某個特別的節日進行了產品內的banner推廣或者促銷,該活動運營的效果如何?新用戶增長是怎樣的?
...
所以說,埋點是互聯網領域非常重要的數據獲取手段。埋點采集信息的過程一般也稱作日志采集。通俗點講,就是在APP或者WEB產品中植入一段代碼,監控用戶行為事件。典型的應用場景就是某個運營活動,頁面的點擊量(PV)有多少,點擊用戶數(UV)有多少,都是用埋點數據進行計算的。當然這些信息并不是消費一次就沒用了。通過埋點收集到的信息,可以作為監控并通過可視化數據呈現出來,幫助產品、設計、運營人員看到產品的長期表現,也可以作為基礎原料,進行復雜的運算,用于用戶標簽、渠道轉化分析、個性推薦等等。比如我們用某資訊類產品看新聞的時候,會發現每次推薦的內容都是上次所點擊的相關類別,這就是通過埋點數據獲取的用戶行為習慣,通過數據進行個性化推薦。
除了對需要監測的特定功能區做埋點之外,一般大公司也有自主研發的供內部產品組使用的數據分析系統,一些關鍵數據在上面都能夠實時監測到,并有特定的團隊去維護它。其次,現在市場上還有很多數據統計工具可以自動監測到產品的相關數據,大多都是付費的,這里就不打廣告了,百度搜索關鍵詞會出現一大堆類似的數據監測產品。
五、產品階段不同,關注的數據也不同
產品階段就是產品生命周期,可分為初創期、成長期、成熟期、衰退期,每個階段的工作權重和數據關注點都會有所區別。
1、初創期
初創期的重點在于驗證產品的核心價值,通過某種產品或服務可以為特定的人群解決某個問題。這時我們需要關注的關鍵數據是目標用戶畫像,同時是第一批種子用戶對產品的使用情況和反饋建議。所以初創期更需要設計師和產品經理去做定性分析(比如用戶訪談),直接確定產品是否滿足了用戶需求、產品有沒有覆蓋到更多的使用場景等。因此產品初期我們可以不用在數據分析上投入更多精力。說白了,該階段用戶量較少,用戶行為等數據還停留在比較初期的階段,所以數據分析的效果不能發揮到最大化,且價值不明顯。該階段就是先保證產品順利上路,同時要綁定一批種子用戶,解決基本的用戶訴求,讓產品和團隊先生存下來。階段與手段不匹配的情況下,還把某些事情強加上去,這就是“作秀”。
2、成長期
經過了產品打磨的初始階段,產品一般會有較好的留存率,這個時候產品開始進入自發增長期(成長期)。該階段的產品已經能夠解決用戶的基本訴求了,所以將側重點關注在用戶的生命周期的管理,為產品吸引更多的新用戶來使用(新鮮血液),既拉新和留存,那么我們數據關注的重點也要放在拉新和留存上。
拉新要關注推廣數據和推薦數據:
(1)推廣數據:就是產品以拉新目的所采取的所有推廣運營活動和行為的指標數據,不同推廣方式(線上+線下)的到達率、觸達面積、點擊率、轉化率、二次訪問率、流失率。比如我們舉辦了一場線下活動,現場實到多少人、哪些是目標用戶、哪些不是目標用戶、有多少人當場試用了我們的產品,又有多少人在活動后下載了產品等等。
(2)推薦數據:是用戶是否愿意將產品推薦給他人的行為數據分析。這里我們在數據上可以關注整個分享環節動態,比如產品有100個種子用戶,他們中有多少人只是自己用產品、有多少人會分享給朋友、他們的分享行為帶來了多少新增用戶等,這些數據會告訴我們產品在用戶心中的位置。
留存則是要做用戶的留存分析:
重點有用戶的次日留存率、7日留存率、30日留存率、日活、周活、月活、產品頁面訪問深度、退出率等等。需要注意的是,這些指標不能單獨監測,需要將他們結合起來看。說透了,留存就是要提高目標用戶在核心場景的反復出現頻率和停留時間(核心場景既產品的主要功能、主要盈利模式和用戶最喜歡的模塊)。
3、成熟期
隨著用戶快速增長,產品不斷完善,產品在進入成熟期前后,設計師和產品經理的重心開始從用戶生命周期的前半段(吸引、激活、留存)往后半段(流失、回流)開始偏移并做出相應的產品設計,同時也更關注商業化行為,既用戶價值(用戶給產品帶來的價值,產品給開發者帶來的價值)。
這里的用戶價值指的是用戶對公司和產品的商業價值,既解決產品訴求。和我們經常說的用戶訴求有所不同。該階段我們要根據用戶的情況進行細分,“保大棄小”,盡可能提升高價值用戶的活躍度,對于低價值用戶可以適當地減少投入精力。有增長就有減少,所以除了對用戶活躍度的關注之外,還需關注核心場景的用戶行為數據和高價值用戶的流失率。
假設我們的產品日活和周活都很高,但是核心場景上的點擊率或是停留時間非常低,核心場景關系到公司商業目標和價值的實現,用戶在這一塊的行為少,要么你的用戶不是目標用戶,要么你的核心場景存在比較大的缺陷讓用戶不滿意。高價值用戶的流失率也是一個道理,都是值得引起我們警惕的數據指標。
4、衰退期
每個產品都有一個生命周期,這是受市場因素導致的,此時用戶會逐漸流失(這里說的流失并不是完全放棄我們的產品,而是從降低活躍度漸漸走到消失),既被其它新產品的體驗模式所吸引,所以這時應該更關注用戶流失后使用的產品,分析競品的商業模式和功能,同時監測流失速度,需盡快拓展產品邊界,尋找新的切入點。
六、敲黑板
1、改版前不放在心上,迭代發布后才關注數據
對于平常就很少關注數據的設計師來說,經常在改版前因為專注于界面上的優化,而忽略了真實的用戶行為。
真實案例:我們產品中有一個步進器組件,用于客戶選擇相應的天數,且此項為必填項。之前我們內部的溝通結果是提供一個7天的默認值,當然對此默認值是有爭議的,有的同事認為默認10天比較合理,所以為了驗證用戶的操作習慣,我們在上線前對該組件進行了埋點。經過用戶使用過一段時間之后,我們通過數據發現大部分用戶在使用步進器時,點擊“減少”比“增加”的次數要多,而且一般停留在5天,就這樣我們把默認值從7天優化為5天,減少了大部分用戶的2次點擊,并且在類似的業務模塊內,會記住用戶上次所選的值,從而提高填寫表單的效率。
雖然只是一個小小的交互優化,但足以證明設計師關注產品數據不僅能夠驗證設計結果,還能對產品體驗不斷打磨,精細化提升用戶體驗。很顯然,如果沒有此次對數據的監測和教訓,只會讓我們繼續活在自己的世界里,永遠也不會在意這個小問題,導致這個組件繼續復用、濫用,一錯再錯,直到用戶親自給我們提優化建議的時候,就已經太晚了。
所以,如果你想讓某個設計方案更貼近用戶或者想對比改版前后的效果,那就需要提前將自己的埋點需求整理成Excel表格,發給相關的開發同事,再對照交互原型詳細討論這些埋點,確保雙方理解一致,不至于最后埋點的數據不是自己想要的。
下面是我在工作中用到的埋點需求表(用戶行為統計表)和數據收集表,大家可以參考使用:
2、成為一名解決產品問題的設計師
隨著互聯網行業的發展,行業對我們設計師的要求只會越來越高,從近兩年冒出的UX設計崗、產品設計崗就能感知到。所以,未來的界面設計師一定會更關注產品和數據,不再是曾經“畫”頁面的團隊底層執行者了,了解一些數據知識可以將用戶的行為可視化,以便更清晰的了解用戶行為,經過一段時間的數據對比,設計師和產品經理可以共同驗證并規劃后面迭代的方案,預測產品的走向與趨勢。并且通過數據分析,可以量化交互方案的效果,作為一名解決產品問題的設計師,可以主動去承擔一些用研工作,化被動為主動。
以上是一些基礎的數據指標,希望對你有所幫助。若有來自不同行業和業務的產品數據指標,歡迎討論交流~
是的,我們距離目標又近了一步,標紅的你都看了嗎?
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
創意是營銷中離消費者最近的環節,同樣也是最性感、最直接的部分。但為什么我們都看過杜蕾斯海報卻依舊寫不出好文案?一個好創意如何誕生?
近日,阿里媽媽發布《美妝行業淘寶首焦創意洞察》(以下簡稱《報告》),試圖通過數據洞察的方式幫助品牌商家更懂創意,探討什么樣的創意真正能被消費者買單,怎樣的創意生產能提升運營效率,最終幫助品牌實現生意增長。
如果說創意表現是營銷的末端,那么洞察則是營銷的起點,在營銷媒體「傳播體操」看來,創意和洞察更是「術」與「道」的關系。因為有了消費者洞察,才會有推廣策略,從而產生許多創意。
創意能讓品牌與用戶實現更好的溝通,但數字化時代,媒體形態多元化、觸點碎片化,對創意提出了更高要求。
以 618 這類大型營銷節點為例,阿里媽媽此前洞察到,618 消費者是以女性為主的 1-2 線高學歷高消費家庭用戶,90 后年輕人群為次主流消費群體。消費人群老齡化與年輕化并行,渠道下沉趨勢顯現。
因此在創意和營銷上,品牌方應重點關注 4 個人群:崛起的新生代,承載主力核心的小鎮青年、城市青年,以及正在興起的中老年人群。懂得消費者需求及市場變化,始終圍繞以消費者運營為核心,才能讓創意發揮更大的營銷價值。
此前,阿里媽媽基于行業推出系列洞察報告,此次首次發布創意領域的營銷洞察,則進一步豐富洞察維度,持續輸出營銷洞察能力。
這或許也讓品牌、商家和設計師們曾經的矛盾被解決。此前,在面對銷售的需求時,視覺設計的結果需要為用戶下單購買、產生交易服務,往往會與審美「打架」?!秷蟾妗吩噲D減小品牌方和設計師的認知溝壑,通過解讀創意圖片背后的運營邏輯,為好的創意提供數據基礎。
《報告》聚焦美妝行業的展示類營銷創意。通過對海量創意樣本的算法支持及數據分析,《報告》分析了淘寶首頁焦點圖(以下簡稱「首焦」)這一表現創意的關鍵區域,挖掘創意特征對點擊效果的潛在提升效應。
《報告》發現,淘寶首焦曝光點擊后的流量聯動效應明顯,首焦上的點擊進店能夠有效提升消費者在其他渠道上的進店概率,而在資源位與定向方式固定的前提下,創意設計往往是影響點擊率的第一要素。
從數據上進一步看到,首焦點擊人群較非首焦點擊人群,在后續其他觸點上的進店概率會高出一籌,尤其在美容護膚/美體精油和彩妝類目分別提升了 9.1 倍和 11.2 倍。這意味著,首焦投放有助優化全店流量獲取能力。若需完成拉新任務,可以考慮首焦投放與其他營銷方式組合。
具體來看,《報告》逐一拆解了首焦圖片的創意構成──調性、色調、標示、文本內容、商品數量、人像。在控制創意之外的潛在影響因素下,阿里媽媽透過洞察報告還原創意質量的高低對營銷效果的影響差異,從而得出最優的組成方式。
不過,在大家積極探索新內容形態的當下,為什么靠圖片傳達信息依舊重要?在阿里媽媽營銷研究中心高級行業研究專家蘇寅看來:「從展現形態上來看,圖片創意依舊是品牌方與用戶溝通的重要抓手。作為基礎的信息媒介,圖片與視頻類內容深度聯動,功能互補,形成品牌與消費者的立體化溝通?!?
「互聯網女皇」瑪麗·米克爾發布的《2019年互聯網趨勢報告》也佐證,雖然短視頻直播增長迅速,但使用圖片成為越來越重要的溝通方式,基于圖片的通訊也得到計算機視覺及人工智能的推進。而在廣告營銷領域里,圖片創意的價值也正在被逐漸受到關注。
有數據支撐的創意洞察后,數字化營銷時代也需要更數字化的創意解決方案。
隨著報告的發布,阿里媽媽將攜手旗下平臺創意中心,為品牌和商家提供數字化的創意解決方案。作為國內領先的提升營銷效率的全域創意解決方案平臺,創意中心接下來也計劃把創意黑科技和創意資產的能力,與生態中的各類伙伴進行合作,賦能整個營銷創意行業。
除此,阿里媽媽也從產品功能、營銷策略上提供賦能。
旗下展示營銷產品智鉆在 618 前實現升級,在展現形式上首次突破淘寶首焦靜態圖片形態,以創意元素組件化的形式,創新支持微動效、倒計時、店鋪回頭客等組件。品牌商家因此有了更多展示信息增益的可能,可提升創意對消費者的心智傳達和溝通效率,同時也能提升轉化效果。
附完整版報告內容:
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
深入了解色彩理論屬性是非常有必要的,可以很好利用一些定式理論和色彩搭配方法應用于你的設計!
本文重點介紹了色彩理論和色彩組合在設計中應用的基礎知識: 例如學習更多關于色相環、RGB、CMYK色彩模型的相關知識。
很多人認為UI的色彩選擇主要取決于設計師的品味和美感。然而,色彩選擇的過程比表面看起來要復雜很多,在設計中起著重要的作用。在我們之前的一篇關于顏色心理學的文章中,我們發現顏色對我們的情緒和行為有很大的影響。這就是為什么產品的成功很大程度上取決于設計所選擇的顏色。研究表明,人們只需90秒就能對一種產品做出下意識的判斷,而其中62%至90%的判斷僅基于顏色。因此,選擇合適的顏色對于改進產品的轉換率和提高產品的可用性是非常有用的。
為了創造好的設計,更有效地運用顏色,你需要了解顏色是如何形成的,以及它們之間是如何相互聯系的。這就是為什么藝術學校、學院和大學的學生學習色彩理論,致力于研究色彩的本質。今天,我們提供給你記住(甚至學習)色彩理論的基礎上的顏色組合,可以有效地應用于你的設計創作。
01.色相環/色輪
如果你上過有關繪畫的課,你一定見過由不同顏色組成的圓圈。它被稱為色相環/色輪,這有助于理解不同的顏色如何相互關聯,以及如何將它們組合起來。色相環通常由主色、次色和三色組成。最主要的是這三種色素的顏色不能形成任何其他顏色的組合。把原色結合起來,就得到了第二種顏色,而原色和第二種顏色的混合就得到了第三種顏色,它們通常有兩個詞的名字,比如紅紫。
色相環/色輪是由艾薩克·牛頓于1666年以示意圖的方式創建的,從那時起,它經歷了許多變換,但仍然是色彩組合的主要工具。主要的想法是,色相環/色輪必須這樣做,以便顏色適當地產生混合。
02.顏色模型
在你開始混合顏色之前,你需要了解顏色有兩種不同的性質:有形的顏色是物體表面的顏色,其他顏色是由光產生的,比如電視的光束。這些類型創建了兩個顏色模型,通過它們可以形成色輪:加法和減法。
加色模型將紅、藍、綠作為原色,因此也稱為RGB顏色系統。這個模型是屏幕上使用的所有顏色的基礎。在這個系統中,原色以相同比例組合而成的第二種顏色是青色、品紅和黃色,但是你需要記住,你添加的光越多,顏色就變得越亮越淺。對于習慣于油漆、染料、油墨和其他有形物體的減色法的人來說,通過混合加色得到的結果往往是違反直覺的。
減色法通過對光的減法得到顏色。它由兩種顏色系統組成。第一種是RYB(紅、黃、藍),也稱為藝術系統,常用于藝術教育,尤其是繪畫。RYB是現代科學色彩理論的基礎,該理論認為青色、品紅和黃色是三種顏色中最有效的組合。這就是CMY顏色模型的形成過程。它主要用于印刷,當制版印刷的關鍵部件為黑色油墨時,該系統被命名為CMYK(青色、品紅、黃色和黑色)。如果沒有這種額外的色素,最接近黑色的陰影將是渾濁的棕色。
03.色彩的加法與減法
您應該記住這兩個系統之間的主要區別:加法用于數字屏幕,減法用于印刷媒體。如果你正在做的設計項目是要打印出來的,不要忘記一個簡單但重要的規則:你在屏幕上看到的顏色在打印出來的時候看起來不一樣。加色譜比CMYK更寬,這也是為什么建議設計師在打印前把他們的項目轉換成減色法,這樣他們就可以看到接近他們得到的結果。然而,如果您使用數字產品,RGB顏色系統是明智的選擇,因為它允許創建驚人的東西與它的廣譜彩色。
04.色彩協調
“協調”這個詞通常與有序和令人愉快的事物聯系在一起。色彩協調是指在設計中以最吸引人、最有效的方式對色彩進行排列,讓用戶感知。當色彩有條理的時候,觀者會感到愉悅和平靜,而不協調的設計則會給人混亂和厭惡的感覺。色彩的平衡在設計中是至關重要的,因為用戶對網站或應用程序的第一印象,顏色有很大的影響。設計師區分了有效工作的基本配色方案。
05.單色
它是基于一種顏色與它的各種色調搭配。單色的呈現總是一個勝利的選擇,因為它色彩屬性單一,容易創造一些簡潔的配色方案。
06.類似色/同類色
要創建類似的色彩,您需要使用顏色輪上相鄰的顏色。這種類型的配色方案用于不需要對比的設計,包括網頁或橫幅的背景。
07.互補色
互補的方案是混合的顏色放在彼此前面的色輪上。這個方案與類似的單色相反,因為它的目的是產生高對比度。例如,藍色背景上的橙色按鈕在任何界面中都很難被忽略。
08.分割互補
這個方案與前一個方案類似,但它使用了更多的顏色。例如,如果你選擇藍色,你需要選擇另外兩種顏色,這兩種顏色相鄰,意思是黃色和紅色。這里的對比度沒有互補方案那么鮮明,但它允許使用更多的顏色。
09.三元/三色方案
當設計需要更多的顏色時,您可以嘗試三元方案。它基于色輪上等距的三種不同顏色。為了在這個方案中保持平衡,建議使用一種顏色作為主色,另一種顏色作為輔色。
10.四色方案/雙互補
四色方案是為經驗豐富的設計師,因為它是最難平衡。它采用了四種顏色的色輪,這是互補對。如果你把所選顏色上的點連接起來,它們就形成了矩形。這個方案很難協調,但是如果你做的一切都正確,結果可能會令人驚嘆。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
我們先從真實生活場景中的互動說起。
人與人之間的互動無處不在,它是我們生活中必要的組成部分,也是整個人類社會的基石。從本質上來講,社交產品要解決的問題就是人們之間互動的問題。那么如何定義互動呢,我們可以從日常的生活場景中窺得一二。
首先,讓我們來看一看日常生活中的互動案例:
這是一個很常見的熟人互動案例,我們可以看到,熟人間很容易產生話題,并持續互動下去。但是如果同樣的話題發生在不是很熟悉的人之間,可能就會是另一番場景:
在例二中,因為A與B互相不熟悉,所以A沒有對B的回復產生進一步互動,對話因此而結束。我們可以進一步推理,其實在這個案例中,不管原因變成什么,只要A沒有響應B的反饋,那么A與B的互動就大概率會終止。
這是因為良好的互動行為一定是雙方(或多方)的互相行為,一旦因為某些原因導致其中的反饋中斷,互動將無法持續。由此可以總結出:
互動在本質上是由一系列的反饋(互動)組成的一條反饋鏈
但是光有反饋鏈還遠遠不夠,在社交場景下,我們往往希望反饋鏈足夠長,這樣才能讓互動雙方產生感情升溫。在例二中,其實是存在著一條很短的反饋鏈的,A與B只互動了一個回合。A沒有繼續響應B的反饋,是因為B的反饋質量較低。試想,當A向B問好時,若B的回復是“早上好,你今天穿的真精神!”,那么A會不會響應B的反饋呢?我想大概是會的。由此可見:
反饋鏈的長短取決于每次反饋(互動)的質量。
高質量的反饋具備很多特點,其中有三個尤為重要
1 反饋鏈中的指向性
我們日常生活中的互動行為,一般都會以一個“握手機制”作為開端。這個握手機制可以是顯性的(直接喊出對方的稱呼,可以是名字、外號,也可以是關系稱謂),有時也可以是隱性的(眼光的對視、話題的流轉等)。這個握手機制幫助互動雙方建立了互動的場景,讓雙方達成"開始交流"的共識,以便信息的接收者做好傾聽并回復的準備,這就是互動中的指向性。
任何互動行為都是發生在兩個或者多個明確的對象之間的,因此在良好的互動行為中,指向性顯得尤為重要——沒有人會去響應別人的自言自語。在互動的過程中,指向性不明確的互動行為是低質量的,不容易獲得進一步的反饋,例如評論區中的統一回復、群發的新年問候、領導在臺上的講話等。反之指向性明確的互動是高質量的,比較容易獲得反饋,例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。
2 適度的互動行為
互動行為的適度包含兩個方面:信息適度及行為適度。
一方面,由于互動行為本質上是信息的傳遞過程,因此每次反饋的信息質量會直接影響到反饋的整體質量。好的反饋應該傳達適度的信息,讓接收者可以對傳遞的信息進行輕松的接收及處理,降低接收者的反饋門檻。
另一方面,傳遞信息的行為也應該是適度的。在生活中,不同的場合下,我們會選擇不同的行為來表達同樣的意思,比如比較正式的場合會選擇握手作為問好,而與家人久別后的見面則可能是一個熱情的擁抱。
3 反饋的即時性
互動行為是依賴于一定語境的,當語境消失,互動也將停止。在社交產品的互動場景中,互動語境一般會隨時間流逝而逐漸減弱直到消失,所以反饋的質量也隨時間的流逝而逐漸衰減,若想讓反饋鏈可以得到延續,要盡量保證在語境消失前產生反饋行為,因此即時性的反饋就顯得十分重要。
有了以上的理論基礎,接下來分析一下Qzone中的互動行為。
Qzone中的互動方式可以歸為三類:評論、轉發、點贊。其中,評論和轉發都可以產生完整的反饋鏈。針對評論,用戶還可以繼續通過評論、點贊等方式進行反饋;針對轉發內容,用戶也可以進行進一步的評論、轉發、點贊。而對于點贊行為,反饋鏈到此戛然而止,用戶無法對點贊行為進行直接的反饋。
因此,為了讓用戶的點贊可以形成完整的反饋鏈,我們的設計目標就呼之欲出——為Qzone中的點贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。互動場景的選擇
既然要設計的是一個具有指向性的互動行為,我們就必須在可以接收到贊的場景里去做這件事。所以我們首先遍歷了主人態下,所有可以看到別人給自己點贊的場景。
但是以上的場景中,并不是都適合承載點贊的反饋行為。根據用戶的行為目的,我們可以把以上場景分為兩類:圍繞點贊行為的關鍵行為路徑(圖c.消息列表、圖d.點贊列表)、不以點贊為核心目標的其他場景(圖a.好友動態、圖b.個人主頁)。顯然,我們應該把圍繞點贊行為的關鍵行為路徑作為主要互動場景。并且所有對于點贊的反饋都是直接依附于點贊行為本身的,使反饋行為具有明確的指向性。
前文提到,適度的互動包含“信息適度”和“行為適度”兩個方面,落地到產品里,就是定義互動行為的“語義”和“交互行為”。
關于點贊反饋行為的語義表達,我們列舉了很多來自現實社交場景中的備選方案,然后以動作的情感程度和成熟程度劃分了4個象限,對這系列動作進行歸類。
由于點贊行為本身所傳達的情感是比較輕量化的,我們更傾向于選擇一個輕量化的情感表達方式作為點贊的反饋;同時由于Qzone的用戶群體以年輕用戶為主,我們還需要選擇一個盡量貼合年輕用戶感官的語義。因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念??紤]到“擊掌”比“剪刀手”具有更為明顯的指向性,所以確定“擊掌”為最終的落地方案。
同時,因為點贊行為本身是一個及其輕量化的行為,所以我們也用最輕量的交互操作作為它的反饋,只需要一次點擊即可。
用戶每次收到針對點贊的反饋,都會收到一條與點贊相同的消息提醒,通過push、首頁新消息提醒、紅點等讓用戶第一時間知曉。在消息箱列表中,每一條點贊和回贊都成為單獨的一條消息,可以讓用戶最直觀的查看并進行反饋。
綜上所述,我們確定了整個反饋鏈的交互框架:
擊掌的視覺設計是一個發現問題到解決問不斷循環的過程。在這個過程中,推動解決方案逐步升級的核心方法是情感化設計。
擊掌動作本身就帶有豐富的情緒,而情感化的設計方法可以讓情緒的釋放更大化,所以在視覺設計階段,我們以情感化設計作為方法去推進方案逐步完善,最終建立起用戶與產品、用戶與用戶間的情感連接,加深用戶對功能的認可和共鳴,帶來更加有趣的體驗。
情感化設計具象到擊掌這個功能,需要解決兩個問題:
1.如何喚起用戶在現實場景中的擊掌記憶;
2.如何符合空間用戶群體的基本調性。
設計之初,我們用平面icon的形式來表現擊掌,雖然可以滿足基本的功能訴求,但是在視覺體驗上乏善可陳,我們又嘗試更豐富的各種視覺表現以此引起用戶對擊掌這個動作的共鳴。
在設計推敲的過程中共經歷了三個階段,在不斷發現問題和解決問題的循環中尋找更優的設計方案:
Step 1 | 靜態展示到動勢塑造
我們用兩個手掌疊加的樣式構造了擊掌icon的基本造型。為了增強用戶對于“擊掌”的語義感知使用了漫畫中常用的動態線條,讓用戶從視覺上直觀感受到這是一個動態的互動行為,而非簡單的單方面點亮icon,以此加強用戶對擊掌這個互動行為的認知。
Step 2 | 2D動畫演繹
但是這樣的動勢表達仍然具有局限性,動態線條的表達方式并不具備普適性,無法保證用戶可以理解其中的含義。因此我們在第二個階段的設計迭代中使用更加直觀的動畫來幫助用戶理解,使其與現實生活中的動作產生呼應。
Step 3 | 3D表現
在解決了語義表達的問題后,我們遇到了一個新的挑戰,由于整個動畫的展示視范圍較小,在視覺表現力上并不理想。因此在第三個設計階段中,我們通過放大動畫、嘗試3D表現形式的方法解決上述問題。同時,3D的表現手法還可以通過光影和質感來傳達更多信息,更加直觀易懂,具有極強的代入感。
空間的主流用戶以年輕人居多,為了匹配用戶群體的基本調性需要打造一個“年輕”、“有趣”的3D擊掌動畫。為此,我們以“3D”、“young”、“fun”作為關鍵詞收集參考素材,以此建立情緒版。
1 趣味和輕量的質感
如前文所述,對于擊掌反饋行為是一個輕量化的互動,為避免3D表現手法過于寫實而帶來不必要的厚重感,同時也為了增加動畫的趣味性,我們選擇卡通的手掌造型進行建模;在材質的選擇上我們偏向黏土材質,弱化高光,讓視覺上體驗更加輕量。
2 彈性曲線讓動畫更生動
現實生活中的擊掌動作是一個減速運動,但是為突出擊掌的動勢和加強趣味性,我們采用了非寫實的彈性曲線來打造這個動畫,以此加強動畫的趣味性。
3 禮花烘托氛圍
在后續的產品迭代優化過程中,我們引入了無限擊掌的玩法,用戶之間可以無限回贊。這就導致動畫被重復播放,會加速用戶對動畫的審美疲勞。所以為配合產品玩法的升級對動畫的設計也進行了迭代,基于擊掌次數設計了不同的展示彩蛋——在擊掌達到特定次數后,會有彩帶禮花蹦出,在烘托多次擊掌的熱情氛圍的同時,給用戶帶來更多趣味和驚喜。
在擊掌功能的設計過程中,我們不斷在發現問題、解決問題的循環中不斷尋求更優解,逐步把一個不到100像素范圍內的擊掌icon做到更好,以此來喚起用戶的對現實擊掌的記憶,建立起與用戶情感上的連接。
另外,通過趣味性的視覺表現手法不斷推敲動畫設計,讓Qzone的年輕用戶不僅從心理上建立連接,在表現層也能感知到符合自身標簽的趣味調性。
除上文提到的彩帶禮花以外,在擊掌玩法升級過程中,我們也拓展了更多內容:
隨著用戶間反復擊掌次數變多,粒子效果會不斷升級,并加入富有層次的入場效果;而且達到關鍵擊掌次數的時候,會展示擊掌的次數,通過用戶的成就感來刺激其產生更多的擊掌行為。
為了豐富手掌樣式的選擇,給用戶提供更多樣的體驗,我們和增值團隊一起設計了更多的手掌形式,同時引入一些IP形象,讓擊掌更能喚起用戶的共鳴,也更加有趣。
擊掌這個功能從前期探索到上線和二次迭代經歷了很長一段時間,整個項目對設計師來說也是一次收獲滿滿的過程。
創新也可以是從1到N的過程
創新并不都是從0到1從無到有的創新,尤其對于功能和框架體系成熟的產品,盲目的追求創新去改變用戶的認知和習慣是不妥的,從小的問題點著手去深挖和思考,找到合適的解決方案并打磨細節給用戶創造驚喜,以小博大去做創新也能達到四兩撥千斤的效果。
打磨細節創造驚喜
探索和挖掘到一個不錯的想法之后,打磨細節也是同樣重要的,我們出了各種不同的擊掌效果方案,去找到給用戶驚喜和操作輕量的平衡,這個功能上線以后我們也一直在關注用戶的反饋,從用戶反饋中發現還可以做驚喜升級,從一個點出發,把這個點不斷的擴充做的更細致和更加閉環。
從生活中來,到生活中去
擊掌這個功能之所以有這個好的數據和用戶認可度,有一個很重要的原因是因為本身這個行為和現實生活中的場景是相對應的,所以讓用戶能很快的理解和操作,符合用戶真實場景的認知所以學習成本比較低,我們在做設計的時候用生活場景挖掘產品,能達到事倍功半的效果。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn