首頁

動(dòng)效如何使用更吸引人

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

沒有用戶會(huì)拒絕任何產(chǎn)品的錦上添花,而功能性動(dòng)效對(duì)于產(chǎn)品來講,在滿足功能效率的同時(shí),能夠帶來更多額外的附加體驗(yàn),是一種相對(duì)比較容易引發(fā)體驗(yàn)峰值的途徑,下面和大家介紹 功能性動(dòng)效的定義和類型。

移動(dòng)端功能性動(dòng)效的使用場(chǎng)景

一、功能性動(dòng)效的定義

功能性動(dòng)效的主要類型有頁面空間轉(zhuǎn)換、視覺信息反饋、功能操作引導(dǎo)、品牌與趣味,本文就來談?wù)勥@四種功能性動(dòng)效在移動(dòng)端的使用。

定義:功能性動(dòng)效是一種嵌入 UI 設(shè)計(jì)中微妙的動(dòng)畫,有著明確、合理的目標(biāo)

功能性動(dòng)效的主要類型:

頁面空間轉(zhuǎn)換;

視覺信息反饋;

功能操作引導(dǎo);

品牌與趣味。

二、功能性動(dòng)效的類型

類型 1 :頁面空間轉(zhuǎn)換動(dòng)效

1.1 主要作用

頁面空間轉(zhuǎn)換的動(dòng)效,主要是為了讓用戶通過理解頁面中空間轉(zhuǎn)換的動(dòng)效,了解到界面和元素之間的空間關(guān)系,并隨時(shí)感知到空間元素的變化。

告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的,防止頁面轉(zhuǎn)換視盲,在空間上也能營造更好的印象。

1.2 使用場(chǎng)景

頁面空間轉(zhuǎn)換類動(dòng)效,主要使用在輪播 banner/頁面切換/導(dǎo)航菜單切換。

1.3 優(yōu)秀案例賞析

案例 (1) :輪播 Banner 中的空間轉(zhuǎn)換動(dòng)效

案例 (2) :導(dǎo)航菜單切換

導(dǎo)航欄的的轉(zhuǎn)換是指 App 中導(dǎo)航菜單狀態(tài)的變換,有不同級(jí)菜單之間和同級(jí)菜單之間的轉(zhuǎn)換,解釋菜單之間的層級(jí)關(guān)系,讓用戶明白菜單轉(zhuǎn)換的過程中到底發(fā)生了什么,下一步操作具體如何去做。

類型 2 :視覺信息反饋動(dòng)效類型

具備良好用戶體驗(yàn)的產(chǎn)品,都應(yīng)該給用戶的每一個(gè)操作都提供反饋,無論成功與否,反饋會(huì)使用戶覺得自己與屏幕上的元素進(jìn)行真實(shí)互動(dòng)。即便隔著屏幕,也能讓用戶看起來是在直接操作,增加操作的可控性真實(shí)自然的體感。

2.1 主要作用

視覺信息反饋類動(dòng)效主要是為了告訴用戶目前操作到哪里了,時(shí)時(shí)狀態(tài)怎么樣,緩解用戶對(duì)應(yīng)用處理速度的量化感知。

具體表現(xiàn)為:

確認(rèn)系統(tǒng)接收到用戶的操作;

確認(rèn)(或拒絕)用戶的行為;

明確告知用戶當(dāng)前操作的進(jìn)度/狀態(tài),緩解用戶的緊張/焦慮感。

2.2 使用場(chǎng)景

系統(tǒng)信息提示/狀態(tài)反饋/操作結(jié)果反饋/進(jìn)度提示/加載提示。

2.3 優(yōu)秀案例賞析

案例 (1):系統(tǒng)提示反饋

系統(tǒng)反饋,當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時(shí),功能性動(dòng)畫也可以用來提醒用戶,可以給用戶一個(gè)快速而有簡潔的一個(gè)反饋。例如:短信提示、來電提示。如下圖:

案例 (2) :操作結(jié)果反饋

案例 (3) :進(jìn)度提示反饋

在進(jìn)度條設(shè)計(jì)中,明確告知用戶當(dāng)前的具體進(jìn)度和狀態(tài),讓用戶隨時(shí)隨地知道還需要等待多久,對(duì)當(dāng)前操作環(huán)境是可控的,而不是讓用戶去猜,讓用戶對(duì)當(dāng)前的操作環(huán)境不可控。例如:他當(dāng)下操作的步驟;目前數(shù)據(jù)下載/狀態(tài)的具體執(zhí)行進(jìn)度等,讓用戶有心理預(yù)期。

類型 3 :功能操作引導(dǎo)

當(dāng)用戶第一次使用你的app的時(shí)候,如果沒有幫助的話,他們可能會(huì)不知道如何操作。 我們應(yīng)該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。

3.1 主要作用

功能性的動(dòng)畫可以提示用戶去注意那些可以完成的操作,視覺提示可以給用戶告知即將發(fā)生的事情。

3.2 使用場(chǎng)景

新手引導(dǎo)/功能操作引導(dǎo)。

3.3 優(yōu)秀案例賞析

案例 1 :新手引導(dǎo)

案例 2 :功能操作中的引導(dǎo)

下圖中的例子,是一個(gè)游戲里面的小例子,直接用動(dòng)效完美詮釋了“手把手教導(dǎo)”,這樣用戶理解的成本就非常低,根本不用思考,按照引導(dǎo)去做就能完成任務(wù)。是一種非常清晰的解決問題的方式。

類型 4 :品牌與趣味

4.1 主要作用

為了避免與市場(chǎng)上很多APP同質(zhì)化,千篇一律的用戶體驗(yàn),品牌動(dòng)畫可以成為一個(gè)產(chǎn)品的營銷工具,用來表現(xiàn)一家公司的品牌價(jià)值或者突出產(chǎn)品的優(yōu)勢(shì),同時(shí)給用戶一種愉快又難忘的用戶體驗(yàn)。

4.1 使用場(chǎng)景

加載細(xì)節(jié)/動(dòng)效速度感知/動(dòng)效色彩的具體場(chǎng)景中使用。

4.3 優(yōu)秀案例

案例(1):Uber 啟動(dòng)頁的打開加載動(dòng)效

Uber 的打開動(dòng)效不僅讓用戶體會(huì)到愉悅感,而且它的展開式動(dòng)效還很好地“控制”了用戶雙眼的視覺焦點(diǎn)。如下圖:

案例(2):輸入操作中的動(dòng)效

下圖的例子是一個(gè)輸入賬號(hào)密碼操作時(shí)的動(dòng)效,是動(dòng)效帶來趣味體驗(yàn)的典型案例:

當(dāng)用戶輸入密碼的時(shí)候,這個(gè)動(dòng)作其實(shí)是一個(gè)非常隱私的動(dòng)作,所以現(xiàn)實(shí)生活中,自己輸密碼的時(shí)候,都會(huì)希望身邊的陌生人轉(zhuǎn)身/不要直接盯著看。

而下面的例子就把保護(hù)用戶隱私作為一種生理的本能,把這種生活中的習(xí)慣延續(xù)到界面細(xì)節(jié)當(dāng)中,當(dāng)用戶輸入密碼的時(shí)候,輸入框上面的貓頭鷹自覺的捂住了自己的眼睛,向用戶傳達(dá)系統(tǒng)的安全性之外,也和用戶進(jìn)行了一次無聲的趣味互動(dòng),是一個(gè)很好的信息反饋的案例。

除了上面的賬號(hào)輸入案例,還有其他類似的動(dòng)效例子。例如:很多結(jié)果輸入的反饋里,如果結(jié)果輸入錯(cuò)誤,那么輸入框和文字則會(huì)來回晃動(dòng),同時(shí)輸入的文字/輸入框同時(shí)變紅。這個(gè)效果會(huì)讓我們聯(lián)想到日常生活中的擺手和搖頭,而這些都代表著“no”,是一種非常自然的動(dòng)效交互邏輯。而正是這些小細(xì)節(jié)的使用,是打造良好用戶體驗(yàn)的關(guān)鍵。

結(jié)語

其實(shí),用戶比我們預(yù)想中更能注意到頁面中的細(xì)節(jié),動(dòng)效除了要幫助用戶快速找到他想要的東西,達(dá)到他想完成的任務(wù),也是一種可以給用戶傳遞情感的交互元素。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

 

高手總結(jié)的15個(gè)技巧,讓你輕松玩轉(zhuǎn)數(shù)據(jù)可視化!

資深UI設(shè)計(jì)者


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

大數(shù)據(jù)時(shí)代,數(shù)據(jù)驅(qū)動(dòng)決策。處理不好龐大、復(fù)雜的數(shù)據(jù),其價(jià)值將大打折扣。

那如何縮短數(shù)據(jù)與用戶的距離?讓用戶一眼抓到重點(diǎn)?讓老板為你的匯報(bào)方案鼓掌?

本文通過連環(huán)15關(guān),層層深入,傳你數(shù)據(jù)匹配圖形神功,讓數(shù)據(jù)可視化更。

無論數(shù)據(jù)總量和復(fù)雜程度如何,數(shù)據(jù)間的關(guān)系大多可分為三類:比較/構(gòu)成/分布&聯(lián)系。

一、比較

基于分類/時(shí)間的數(shù)據(jù)對(duì)比,通常需用到比較型圖表。用戶通過圖表輕松識(shí)別最大/最小值,查看當(dāng)前和過去的數(shù)據(jù)變動(dòng)情況。

常見場(chǎng)景:哪個(gè)地區(qū)的收件量最多?今年的收入和去年相比如何……

1. 條目少 – 柱狀圖

比較條目較少時(shí),如5個(gè)地區(qū)收件量的對(duì)比,可選用柱狀圖表示。

△ 柱狀圖

2. 條目多 – 條形圖

當(dāng)條目較多,如大于12條,移動(dòng)端上的柱狀圖會(huì)顯得擁擠不堪,更適合用條形圖。一般數(shù)據(jù)條目不超過30條,否則易帶來視覺和記憶負(fù)擔(dān)。

△ 條形圖

3. 看趨勢(shì) – 折線圖

當(dāng)X軸為連續(xù)數(shù)值(如時(shí)間)且注重變化趨勢(shì)時(shí),則適用折線圖。

△ 折線圖

4. 擴(kuò)大差異 – 南丁格爾玫瑰圖

除柱狀圖外,有無更新穎的表現(xiàn)方式呢?那就屬南丁格爾玫瑰圖了。

△ 南丁格爾玫瑰圖

由于扇形的半徑和面積是平方的關(guān)系,南丁格爾玫瑰圖會(huì)將數(shù)值之間的差異放大,適合對(duì)比大小相近的數(shù)值。它不適合對(duì)比差異較大的數(shù)值,因?yàn)閿?shù)值過小的類目會(huì)難以觀察。

此外,因?yàn)閳A有周期性,玫瑰圖也適于表示周期/時(shí)間概念,比如星期、月份。依然建議數(shù)據(jù)量不超過30條,超出可考慮條形圖。

5. 雙向 – 雙向條形圖

前面的例子都是單維度比較,當(dāng)比較正反兩類甚至更多維度的數(shù)據(jù)時(shí),可嘗試雙向條形圖,下圖為各大區(qū)的重點(diǎn)地區(qū)的收派件量的對(duì)比。

△ 雙向條形圖

用顏色區(qū)分大區(qū),空心/實(shí)心區(qū)分收件量和派件量,既能整體比較大區(qū),又能詳細(xì)對(duì)比地區(qū)的情況。

打怪升級(jí),再加點(diǎn)難度。在雙向圖上再增加一個(gè)維度,如下表,比較5個(gè)地區(qū)的利潤及相應(yīng)的收入和成本。請(qǐng)先思考一下,再下滑看推薦圖表。

△ 業(yè)務(wù)數(shù)據(jù)

△ 雙向條形圖(多維度)

通過圖形一眼就能看出深圳區(qū)的利潤低于廣州區(qū),即使它的收入高于廣州區(qū),但成本相對(duì)來說高于廣州區(qū)。

6. 目標(biāo)達(dá)成 – 子彈圖

實(shí)際業(yè)務(wù)中,常要考察指標(biāo)的達(dá)成情況,如收入達(dá)標(biāo)情況及所處區(qū)間(優(yōu)、良、差),如下表,你會(huì)怎么可視化呢?動(dòng)手畫一畫吧!

△ 業(yè)務(wù)數(shù)據(jù)

△ 子彈圖

子彈圖,因?yàn)橄褡訌椛浜髱С龅能壍馈O噍^于儀表盤,它能夠在狹小的空間中表達(dá)豐富的數(shù)據(jù)信息,在信息傳遞上有更大的效能優(yōu)勢(shì)。

若還要比較4個(gè)季度的收入情況,只需用不同顏色區(qū)分。如下圖,一眼便知第二季度表現(xiàn)較好,而第一季度則不佳。

△ 子彈圖

7. 性能 – 雷達(dá)圖

對(duì)于一些多維的性能數(shù)據(jù),如綜合評(píng)價(jià),常用雷達(dá)圖表示。指標(biāo)得分接近圓心,說明處于較差狀態(tài),應(yīng)分析改進(jìn);指標(biāo)得分接近外邊線,說明處于理想狀態(tài)。

△ 雷達(dá)圖

以上就是「比較」類的常用圖表,可歸納如下。

此表并非一成不變的「鐵表」,相互之間還會(huì)串聯(lián)交叉,大家還需靈活應(yīng)用。

二、構(gòu)成

部分相較于整體,一個(gè)整體被分成幾個(gè)部分。這類情況會(huì)用到構(gòu)成型圖表,如五大區(qū)的收件量占比、公司利潤的來源構(gòu)成等。

1. 單層 – 餅狀圖

第1關(guān)中,對(duì)比5個(gè)地區(qū)的收件量時(shí)用到了柱狀圖。若看占比情況,餅狀圖更合適。

△ 餅狀圖

如果變成17個(gè)地區(qū),會(huì)怎樣?

像不像彩色七星瓢蟲?

所以餅圖分類一般不超過9個(gè),超過建議用條形圖展示。

除餅圖外,環(huán)形圖(甜甜圈圖)亦可表示占比,其差異是將餅圖的中間區(qū)域挖空,在空心區(qū)域顯示文本信息,比如標(biāo)題,優(yōu)勢(shì)是其空間利用率更高。

△ 環(huán)形圖

2. 分層 – 環(huán)形圖、旭日?qǐng)D

對(duì)于管理層而言,需先把握大局和重點(diǎn)。比如大區(qū)負(fù)責(zé)人需一眼看到重點(diǎn)地區(qū)及重點(diǎn)分部的情況(如下圖),如何展示?

△ 環(huán)形圖

△ 旭日?qǐng)D

這個(gè)叫旭日?qǐng)D,逐層下鉆看數(shù)據(jù),大區(qū)的重點(diǎn)地區(qū)及相應(yīng)分部的構(gòu)成情況一目了然。

3. 累計(jì)趨勢(shì) – 堆疊面積圖

接下來,看看數(shù)值構(gòu)成隨時(shí)間變化的案例:第一大區(qū)(包含四個(gè)重點(diǎn)地區(qū))近四年收入構(gòu)成的趨勢(shì)要如何可視化?自己想一想,再下滑看推薦方案。

△ 業(yè)務(wù)數(shù)據(jù)

△ 堆疊面積圖

推薦方案是堆疊面積圖,可以展現(xiàn)分量(地區(qū))對(duì)于總量(大區(qū))的貢獻(xiàn),并顯示總量(大區(qū))的變化過程。需要說明的是,地區(qū)收入的起點(diǎn)并非從 y=0 開始,而是在下面的地區(qū)基礎(chǔ)上逐層疊加,最后組成一個(gè)整體。

4. 累計(jì)比較 – 堆疊柱狀圖

如果將上圖X軸的標(biāo)簽文字(即年份)和圖例(即地區(qū))互換(如下圖A),用來看每個(gè)地區(qū)近四年的收入構(gòu)成,用哪個(gè)圖更合適?

△ 堆疊柱狀圖

是不是覺得都可以?那圖中 X1 有何含義?堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于,堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)(如時(shí)間),堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù),因此用 B 方案更適合。

5. 累計(jì)增減 – 瀑布圖

若想表達(dá)兩個(gè)數(shù)據(jù)點(diǎn)間數(shù)量的演變過程,可使用瀑布圖。開始的一個(gè)值,在經(jīng)過不斷的加減后,得到一個(gè)值。瀑布圖將這個(gè)過程圖示化,常用來展現(xiàn)財(cái)務(wù)分析中的收支情況。

△ 瀑布圖

以上就是「構(gòu)成」類常用圖表,可歸納如下。

三、分布&聯(lián)系

通過分布&聯(lián)系型圖表能看到數(shù)據(jù)的分布情況,進(jìn)而找到某些聯(lián)系,如相關(guān)性、異常值和數(shù)據(jù)集群。

常見使用場(chǎng)景:客戶的年齡段分布?單票成本與收件量的關(guān)系?

1. 兩個(gè)變量 – 散點(diǎn)圖

仍以業(yè)務(wù)為例,下圖為全國網(wǎng)點(diǎn)的單票成本/收入分布情況。

△ 散點(diǎn)圖

單單這樣看,可能看不出什么,如果加兩條平均線就不一樣了。

加了平均線,就知道哪些網(wǎng)點(diǎn)高于平均線,哪些低于平均線。但網(wǎng)點(diǎn)那么多,總不能逐個(gè)點(diǎn)擊查看是哪個(gè)大區(qū)的,給散點(diǎn)加上顏色后,就很有意義了。

通過此圖,可以看出哪些大區(qū)單票利潤較低,急需提升,比如廣泛聚集于右下角的第四大區(qū),單票收入低于平均線,單票成本卻高于平均線。

2. 三個(gè)變量 – 氣泡圖

大家都知道,網(wǎng)點(diǎn)總利潤除了和單票利潤有關(guān),還和體量(即收件量)有關(guān),用散點(diǎn)的面積大小表示收件量,就變成了氣泡圖。

△ 氣泡圖

3. 結(jié)合地圖 – 熱力圖

氣泡圖與地圖結(jié)合可演變?yōu)闊崃D。通過熱力圖,能看到哪些網(wǎng)點(diǎn)收派件量較多,需進(jìn)行資源調(diào)配。

△ 熱力圖

以上是 「分布&聯(lián)系」類的常用圖表,可歸納如下:

小結(jié)

當(dāng)我們拿到數(shù)據(jù)后,先提煉關(guān)鍵信息,明確數(shù)據(jù)關(guān)系及主題,再選擇合適的圖表進(jìn)行可視化。希望下圖能給各位一些參考(結(jié)合可視化專家 Andrew Abela 的圖表選擇指南,進(jìn)行了簡化調(diào)整)。

數(shù)據(jù)可視化設(shè)計(jì)只要多練習(xí)、多總結(jié),總有一天會(huì)得心應(yīng)手。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

博博

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

UI巴巴 2018-08-03 21:40:30

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

今天將從醫(yī)療保健類產(chǎn)品開始延展到互動(dòng)和交互界面。很多醫(yī)療產(chǎn)品的界面有可能是一個(gè)小屏幕,也有可能是非常大的屏幕。

產(chǎn)品

醫(yī)療類的產(chǎn)品我們選擇了一些可穿戴設(shè)備的概念設(shè)計(jì)。

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Kingyo設(shè)計(jì)的Sange手表

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Crux Product Design 和 Chris Pearce 設(shè)計(jì)的

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Amazfit

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Gra?ina Bo?kut?為盲人設(shè)計(jì)的可穿戴配件

交互

我們與不同設(shè)備的交互不斷變化,將語音用戶界面引入醫(yī)療行業(yè)將徹底改變?nèi)藗儗?duì)護(hù)理的看法。精細(xì)設(shè)計(jì)的語音助理能夠像人一樣,更貼心。

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Michal Sambora設(shè)計(jì)的Alexa助理的界面

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

Gleb Kuznetsov?設(shè)計(jì)的ai智能語音助理

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感

SELECTO設(shè)計(jì)的語音助理

界面

干凈,簡潔,充滿未來感,避免錯(cuò)誤的發(fā)生。

醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感
醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感
醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感
醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感
醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感
醫(yī)療保健類產(chǎn)品設(shè)計(jì)、界面設(shè)計(jì)及交互設(shè)計(jì)靈感


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

這篇超詳細(xì)的教程,幫你全面掌握 APP 中的投影設(shè)計(jì)!

資深UI設(shè)計(jì)者


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

看似簡單的投影,在高手眼里有千萬種變化。不信看看今天這篇文章,讓資深設(shè)計(jì)師教你做投影設(shè)計(jì)!

在今天的 UI設(shè)計(jì)中,投影使用的范圍和頻次越來越高。打開手機(jī)APP,或是看追波上的練習(xí)稿,都可以看見無數(shù)投影使用的案例。

掌握好投影的使用,是必備的 UI 視覺設(shè)計(jì)基礎(chǔ)。投影遠(yuǎn)沒有大家想象的那么簡單,即使軟件中可以設(shè)置的參數(shù)并不多,在我的教學(xué)過程中,很多學(xué)員始終沒辦法很好的應(yīng)用投影來提升自己的設(shè)計(jì)質(zhì)感。

所以,這篇文章就會(huì)詳細(xì)講解投影的正確設(shè)計(jì)方法。

一、投影的基本介紹

在了解投影和設(shè)計(jì)的關(guān)系前,我們要先知道投影是什么。用專業(yè)點(diǎn)的方式解釋,即:

投影指的是用一組光線將物體的形狀投射到一個(gè)平面上去,稱為「投影」。

有了光源,才有投影。光影是美術(shù)和攝影最核心的基礎(chǔ)。那么投影有什么特征呢,先看看下面的這張靜物攝影。

圖中有很清晰的向右延伸的投影。距離主體越遠(yuǎn)的投影,也就越模糊,越淡。通過這樣的投影我們還可以很輕易的分析出,光源在左側(cè),且物體是放置在地面上的。

投影可以帶給我們非常多隱藏的信息,而這些往往被我們所忽略。再看看下方的案例,當(dāng)背景無法直觀的提供物體所處高度時(shí),投影就能起到關(guān)鍵的作用。

在平面畫布中,投影的做法直接影響我們對(duì)元素的認(rèn)識(shí)。 例如下圖中,投影可以讓我們了解按鈕本身是有厚度(遮擋了光線)或是離開了水平面處于懸浮狀態(tài)。

當(dāng)然,投影除了對(duì)物理信息的暗示,還涉及到對(duì)視覺效果的表現(xiàn)。上面的白鞋投影很重,且輪廓清晰,這樣能塑造更強(qiáng)烈的沖突,增加鞋子的立體感。但是不是所有攝影都需要有這樣雕刻版的投影效果呢?答案是否定的,例如下面這張圖片。

主體物和背景色彩能很好的結(jié)合,創(chuàng)造出有趣歡快的視覺氛圍,所以只需要柔和的投影即可。在 UI 的設(shè)計(jì)中,對(duì)于陰投影參數(shù)的定義,也會(huì)直接影響我們畫面的視覺效果。

成熟的攝影作品,會(huì)根據(jù)對(duì)投影的需要再去調(diào)節(jié)打光的方式,這是個(gè)非常復(fù)雜而且繁瑣的過程,需要經(jīng)年累月的學(xué)習(xí)。而在設(shè)計(jì)的過程中,創(chuàng)造投影卻非常容易,所以我們更該重視的是,如何正確的設(shè)計(jì)投影。

即先構(gòu)思出元素的物理特性,再給予它正確美觀投影樣式。

二、UI設(shè)計(jì)中的投影

在進(jìn)入了扁平化的設(shè)計(jì)環(huán)境后,投影有很長一段時(shí)間被抹除,因?yàn)榇蠹艺J(rèn)為那是擬物的遺毒,就怕設(shè)計(jì)里用到擬物元素顯得不夠時(shí)髦。

到了 Material Design 發(fā)布以后,谷歌在規(guī)范中增加了 Z 軸的概念,也就是為平面預(yù)設(shè)了立體的空間,設(shè)計(jì)元素可以定義與空間中水平面的距離。

下圖中,Z 軸數(shù)字越大,代表和水平面的距離越遠(yuǎn),上升得越多。而帶給我們這種感受的原因,就是投影的暗示,元素本身的坐標(biāo)并沒有任何改變。

既然增加了投影,那么谷歌的專業(yè)設(shè)計(jì)團(tuán)隊(duì),肯定不會(huì)很隨意的制定其參數(shù)。當(dāng)我們打開谷歌的官方 UI KITS 源文件進(jìn)行查看時(shí),就能發(fā)現(xiàn)其中的不同。

可以看見,元素疊加了多層的投影,這是違反新手對(duì)于投影定義的直覺的。原因在與,一般軟件中定義的投影,其深淺與元素的距離是線性等比的,而現(xiàn)實(shí)世界中,深淺與距離是非線性的函數(shù)關(guān)系。

在 UI設(shè)計(jì)師接觸的平面類軟件中,只有 PS 具備完美復(fù)現(xiàn)這種投影的能力,即控制投影的等高線。

而 Sketch、XD 這些軟件都不具備這樣的功能,且手機(jī)系統(tǒng)的投影渲染機(jī)制也是線性的,所以谷歌就通過使用 TopShadow、BottomShadow 疊加的方式,去模擬真實(shí)的投影效果,讓它們看起來更和諧自然,這就是多層投影的奧秘。

上面出現(xiàn)的投影都是黑白灰,但在現(xiàn)在流行的設(shè)計(jì)作品中,最常見的是應(yīng)用了彩色的投影,攝影中也經(jīng)常會(huì)應(yīng)用彩色的投影渲染氛圍。

但是,投影中的這些彩色區(qū)域,并不完全都是投影,還包含了折射和漫反射的原理等。為了簡化,我們可以認(rèn)為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘,傘下的人頭頂也會(huì)彌漫著草原的芬芳……

三、投影設(shè)計(jì)演示

在開始展示具體的設(shè)計(jì)案例前,我們要先明確一個(gè)原則,即:

優(yōu)雅的投影是讓你感受到它的存在,但不會(huì)吸引你去關(guān)注它!

一般的設(shè)計(jì)軟件中,元素的陰影即是在元素的背后添加了一個(gè)相同輪廓的純色矢量圖形,我們可以通過 XY 軸移動(dòng)它的位置,并使用模糊的參數(shù)來設(shè)置它的模糊度。

當(dāng)元素的距離水平面越近,陰影距離元素也就越近,即 XY 軸越小,模糊也越小,如果離得遠(yuǎn)則相反。

1. 常規(guī)投影類型

第一種投影的類型,即光源從元素的上方投射下來,可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0,只添加模糊的參數(shù),透明度較低。第二層陰影使用相同的模糊參數(shù),增加 Y 軸坐標(biāo),透明度較高。

在非 MD 設(shè)計(jì)中,它濃郁的投影參數(shù)會(huì)讓整個(gè)界面變「臟」,變擁擠。我們要做的是要降低投影的透明度,這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是,當(dāng)使用純黑色做陰影時(shí),透明度無論如何都不應(yīng)該高于 20%,正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律,我們還可以復(fù)制個(gè)矢量圖層做模糊效果也可以得到一樣的效果,這種方法可以支持我們?cè)O(shè)計(jì)出更真實(shí)的投影。即將 BottomShadow 獨(dú)立出來,縮小并向下移動(dòng)。

如果想要得到彩色的投影,那么只要切換投影的色彩即可。值得注意的是,不同色彩的刺激程度不同,我們要憑感覺去調(diào)整它們的透明度。

如果感覺不得勁,陰影太少了,那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素,那么當(dāng)使用了漸變色或者是圖片的投影,我們?cè)谏弦徊綇?fù)制出的那層投影,就可以不使用填充色,而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。

2. 非常規(guī)投影類型

光有垂直于平面的關(guān)系,那么發(fā)揮想象力,我們還可以更改光與面的位置,如下圖所示。

在這個(gè)場(chǎng)景中,投影就作用在圖片下方的地面,只有地面處于透視狀態(tài)時(shí),才能可以看見它的投影,所以,我們就可以得到下方的效果。

當(dāng)然,我們還可以結(jié)合光源的類型,比如使用聚光燈等,那么陰影的輪廓就會(huì)發(fā)生變化。

我們甚至可以預(yù)設(shè)元素本身產(chǎn)生有一定的變形,如邊緣翹起,那么就會(huì)產(chǎn)生獨(dú)特的陰影類型。

我們可以從日常生活中的觀察將各種不同的投影形式引用進(jìn)我們的設(shè)計(jì)中,讓我們的設(shè)計(jì)視覺更豐富有趣。

總結(jié)

學(xué)會(huì)正確的投影設(shè)計(jì)方式,并不是僅僅讓我們局限在對(duì) UI 元素的設(shè)計(jì)上。它還能給我們帶來很多意想不到的幫助,例如做設(shè)計(jì)的包裝。

通過前面講解的知識(shí)點(diǎn),上方展示案例中應(yīng)用的陰影方式相信你們已經(jīng)可以看出端倪了,如果使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影,就會(huì)發(fā)現(xiàn)效果遠(yuǎn)遠(yuǎn)不如案例的高級(jí),自然也難以帶給別人良好的視覺體驗(yàn)。

最后,在項(xiàng)目中,想要將設(shè)計(jì)出來的陰影交付給開發(fā),真正落地實(shí)現(xiàn)出來,無論安卓或是 iOS ,陰影的渲染和設(shè)計(jì)軟件的參數(shù)是不一致的,這就需要大家自己鉆研了。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

作為PM,你居然不知道Axure這10種非交互功能?

藍(lán)藍(lán)設(shè)計(jì)的小編

提到Axure,這可是絕大多數(shù)PM童鞋靠著吃飯的家伙事兒。Axure被很多人定義為一個(gè)以交互見長的原型設(shè)計(jì)工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對(duì)Axure的初衷一定是有誤解。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

博博

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

人人都是產(chǎn)品經(jīng)理 2018-07-21 13:14:44

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

荔枝微課是目前市面上知識(shí)付費(fèi)領(lǐng)域非常優(yōu)秀有競爭力的產(chǎn)品,本文對(duì)荔枝微課的產(chǎn)品設(shè)計(jì)進(jìn)行了分析與思考。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

一、產(chǎn)品概述

1. 體驗(yàn)環(huán)境

  • 體驗(yàn)版本:4.3.0
  • 體驗(yàn)設(shè)備:華為mate10(128G版)
  • 安卓版本:8.0.0
  • 體驗(yàn)時(shí)間:2018年7月

2. 產(chǎn)品簡介與定位

荔枝微課的應(yīng)用介紹:

“荔枝微課是連接人與知識(shí)的內(nèi)容分享平臺(tái),支持隨時(shí)隨地授課聽課。與大咖、草根,一同共赴知識(shí)盛宴?!?

可以發(fā)現(xiàn),荔枝微課主要著力于打造一個(gè)全民學(xué)習(xí)知識(shí)&全民分享知識(shí)的大眾知識(shí)分享平臺(tái),其核心內(nèi)容則是平臺(tái)沉淀下來的知識(shí)內(nèi)容,其運(yùn)營的關(guān)鍵是源源不斷的能吸引用戶購買的知識(shí)輸出。

核心價(jià)值主要有2點(diǎn):

對(duì)于知識(shí)學(xué)習(xí)者來說,荔枝微課可以為用戶提供一個(gè)內(nèi)容豐富的,可以隨時(shí)隨地進(jìn)行學(xué)習(xí)的知識(shí)平臺(tái),滿足用戶能夠方便快捷獲取知識(shí)的需求。

對(duì)于知識(shí)分享者來說,荔枝微課可以為用戶提供一個(gè)知識(shí)變現(xiàn)并實(shí)現(xiàn)自我價(jià)值的平臺(tái),以及平臺(tái)為知識(shí)分享著提供的推廣及流量支持。滿足用戶通過分享知識(shí)而實(shí)現(xiàn)個(gè)人價(jià)值并獲得現(xiàn)實(shí)收益的需求。

3. 用戶需求分析

3.1 用戶畫像

在進(jìn)行需求分析之前,我們先來了解一下荔枝微課的用戶群體,進(jìn)行簡單的用戶畫像,以便我們更加準(zhǔn)確地進(jìn)行需求分析。(PS:用戶畫像主要基于二手?jǐn)?shù)據(jù)資料、競品分析和個(gè)人體驗(yàn)產(chǎn)品后的逆向推理得出,由于個(gè)人水平以及時(shí)間問題,如有偏差望見諒。)

3.1.1 平臺(tái)角色

經(jīng)分析可發(fā)現(xiàn),平臺(tái)中主要存在兩大角色:知識(shí)分享者(知識(shí)分享者又可以細(xì)分為機(jī)構(gòu)和個(gè)人,在本文中不做區(qū)分)和知識(shí)學(xué)習(xí)者(也可以稱作知識(shí)消費(fèi)者)。

從產(chǎn)品的運(yùn)營模式來看,很多用戶既是知識(shí)消費(fèi)者,又是知識(shí)分享者,用戶在平臺(tái)上學(xué)習(xí)自己欠缺的知識(shí),分享自己的一技之長,形成了一個(gè)良性循環(huán)。

在體驗(yàn)中我發(fā)現(xiàn),知識(shí)分享者的知識(shí)分享流程主要是通過PC端的“講師管理后臺(tái)”完成的,因此在針對(duì)app的體驗(yàn)中我主要針對(duì)知識(shí)學(xué)習(xí)者用戶進(jìn)行分析。

3.1.2 核心用戶的基本信息

通過荔枝微課本身以及對(duì)比幾款競品的相關(guān)數(shù)據(jù),我們可以大致推斷其核心用戶的基本信息:

年齡通過百度指數(shù)以及對(duì)核心用戶的核心行為-學(xué)習(xí)各種實(shí)用技能知識(shí),進(jìn)行分析,我們可以看到,主要集中在30-39歲(占比60%左右),同時(shí)20-29歲, 40-49歲兩個(gè)階段也有不少分布(占比約為20%左右)。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

性別我們可以看到百度指數(shù)中顯示,其用戶性別比例男:女約為6:4。但是我們知道百度指數(shù)對(duì)于性別判定算法,有時(shí)候會(huì)產(chǎn)生誤差。在荔枝微課這里就發(fā)生了這樣的情況。

對(duì)于荔枝微課的性別比例,我們通過對(duì)產(chǎn)品進(jìn)行分析,可以發(fā)現(xiàn)這個(gè)性別比例并不準(zhǔn)確。

有一下2點(diǎn)理由:

  • 第一,在荔枝微課的“發(fā)現(xiàn)”頁中存在很多的課程分類,我們可以看到其中大部分內(nèi)容是針對(duì)女性用戶的:比如母嬰、形象、美妝個(gè)護(hù)、時(shí)尚、婚姻等等分類。而且作為優(yōu)先級(jí)最高的第一屏的分類項(xiàng)目是推薦、婚姻、家庭關(guān)系、戀愛、母嬰、育兒,這幾個(gè)比較偏女性用戶的分類。
  • 第二,在產(chǎn)品所有的課程內(nèi)容中我們可以看到大量的課程都是針對(duì)女性用戶的,比如瑜伽課、提升女生的氣質(zhì)等等相關(guān)課程。

因此我們大致可以進(jìn)行推理,荔枝微課的用戶應(yīng)當(dāng)女性偏多,女:男 約為 6:4 到 7:3 之間。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

區(qū)域可以看到荔枝微課的用戶主要集中在一線以及新一線城市。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

收入對(duì)于用戶的收入水平我們可以從2個(gè)方面進(jìn)行推測(cè), 一是我們上文得出荔枝微課的核心用戶主要分布在一線及新一線城市;二是,我們可以看到在荔枝微課中絕大部分課程的價(jià)格都在100元以下。我們可以進(jìn)行推測(cè),荔枝微課的核心用戶應(yīng)該處于中等收入水平。

用戶性格綜合以上所有的分析,大致可以推斷出用戶的性格有以下幾個(gè)特征:自我提升欲望強(qiáng)烈、存在一定的焦慮感、對(duì)自己某方面現(xiàn)狀不是很滿意。

二、產(chǎn)品分析

1. 產(chǎn)品結(jié)構(gòu)圖

荔枝微課有發(fā)現(xiàn)、精選、我的微課、個(gè)人中心4個(gè)以及導(dǎo)航模塊。

  • “發(fā)現(xiàn)”是分類別展現(xiàn)課程信息,主要是滿足用戶分門別類查找自己感興趣的知識(shí)的需求;
  • “精選”則是平臺(tái)為用戶精心挑選的課程列表;
  • “我的課程”是用戶學(xué)習(xí)課程的記錄,方便用戶方便快捷的進(jìn)行學(xué)習(xí);
  • “個(gè)人中心”則是用戶進(jìn)行個(gè)人設(shè)置以及記錄個(gè)人信息與操作的模塊。

其產(chǎn)品結(jié)構(gòu)圖如下:

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

2. 用戶使用流程圖

通過分析發(fā)現(xiàn),產(chǎn)品中存在2個(gè)核心流程,一是用戶購買課程流程(購買直播課程流程和購買非直播流程略有不同);二是用戶學(xué)習(xí)課程流程(學(xué)習(xí)直播課程流程和學(xué)習(xí)非直播流程有不同),其流程圖如下:

2.1 購買課程流程

購買直播課程流程和購買非直播流程略有不同,購買直播課程流程不需要判斷課程是否收費(fèi),免費(fèi)課程仍然進(jìn)入支付流程,并支付0元。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

從分析體驗(yàn)來看,從開始到結(jié)束,整個(gè)購買課程流程非常清晰且順暢,中間不存在多余流程,也沒有其他任務(wù)導(dǎo)致流程中斷,用戶體驗(yàn)很好。

2.2 學(xué)習(xí)課程流程

相對(duì)購買流程來說,學(xué)習(xí)課程流程就沒有那么清晰順暢了,我們可以看到直播課程學(xué)習(xí)流程比較清晰。但是非直播課程學(xué)習(xí)課程卻看起來比較復(fù)雜,個(gè)人覺得該流程中存在一些多余流程。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

(1)首次進(jìn)入課程存在多余流程

我們從流程圖中可以看到首次進(jìn)入時(shí),產(chǎn)品會(huì)讓用戶選擇是從第一條開始聽還是直接進(jìn)入課程。選擇從第一條開始聽,用戶將會(huì)進(jìn)入課程學(xué)習(xí)頁面,并從第一條語音開始播放。而選擇直接進(jìn)入課程,則進(jìn)入課程學(xué)習(xí)頁面,但課程不會(huì)進(jìn)行播放。

我們可以看到2個(gè)不同選擇只是有課程是否自動(dòng)播放的區(qū)別,這個(gè)區(qū)別對(duì)用戶來說不是必要,但是卻多了一個(gè)頁面,讓用戶多進(jìn)行了一步操作。這并不利于用戶完成整個(gè)課程學(xué)習(xí)流程。

而且,在體驗(yàn)過程中,我發(fā)現(xiàn)在這個(gè)選擇頁面中用戶是無法后退的,也無法關(guān)閉選擇彈框,只能在“從第一題哦啊開始聽”和“直接進(jìn)入課堂”中進(jìn)行二選一,這可能是為了提升課程播放頁面的打開率,但是這樣的設(shè)置對(duì)用戶體驗(yàn)不是十分友好。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

(2)非首次進(jìn)入流程存在多余流程

對(duì)于非首次進(jìn)入流程,我們來想象一個(gè)用戶場(chǎng)景:

在上班的路上,有一個(gè)用戶對(duì)荔枝微課上的一門化妝課程非常感興趣,她打開課程進(jìn)行學(xué)習(xí),半個(gè)小時(shí)后她到公司了,她關(guān)閉課程開始上班。等到下午下班之后,她想起來自己早上還有一門課程沒有學(xué)完,想要接著學(xué)習(xí),這之后她很希望荔枝微課幫她記住了自己上午學(xué)習(xí)到哪里了。

我們可以看到,對(duì)于用戶來說,被打斷的課程直接進(jìn)行續(xù)播,才是符合用戶預(yù)期的。所以個(gè)人覺得在用戶再次打開自己學(xué)習(xí)過的課程時(shí),給用戶“繼續(xù)未聽完的課”和“直接進(jìn)入課堂”的選擇是比較多余的,用戶其實(shí)不需要這樣的選擇。這種不記住自己的學(xué)習(xí)進(jìn)度的選擇,反而是用戶想要避免的。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

3. 導(dǎo)航結(jié)構(gòu)分析

荔枝微課有發(fā)現(xiàn)、精選、我的微課、個(gè)人中心4個(gè)一級(jí)導(dǎo)航模塊。

  • “發(fā)現(xiàn)”主要是分類別展現(xiàn)課程信息,主要是滿足用戶分門別類查找自己甘心去的知識(shí)的需求;
  • “精選”則是平臺(tái)為用戶精心挑選的課程列表;
  • “我的課程”則是用戶學(xué)習(xí)課程的記錄,方便用戶方便快捷的進(jìn)行學(xué)習(xí);
  • “個(gè)人中心”則是用戶進(jìn)行個(gè)人設(shè)置以及記錄個(gè)人信息與操作的模塊。

接下里我們來分析一下荔枝微課的這個(gè)導(dǎo)航結(jié)構(gòu):

首先是“發(fā)現(xiàn)”頁,發(fā)現(xiàn)頁匯總了各種課程信息,并通過頭部導(dǎo)航分類別進(jìn)行展示,形成了典型的首頁風(fēng)格。從結(jié)構(gòu)設(shè)置上來看并沒有什么問題,但是個(gè)人在體驗(yàn)中發(fā)現(xiàn)其在內(nèi)容展示上還是存在一定的優(yōu)化空間。

3.1 三個(gè)功能按鈕內(nèi)容不隨頂部導(dǎo)航切換

如截圖所示,在每個(gè)分類導(dǎo)航的輪播圖下方,都有“我的課程”、“精選專題”、“免費(fèi)專區(qū)”三個(gè)按鈕。點(diǎn)擊按鈕我們可以發(fā)現(xiàn)都是相關(guān)的課程列表,顯然,這是產(chǎn)品為了吸引用戶點(diǎn)擊而專門設(shè)置的。

但是比較令人不解的是,這幾個(gè)按鈕的內(nèi)容并不隨著用戶選擇分類的切換而切換。無論是用戶選擇婚姻分類還是理財(cái)分類,精選專題為用戶展現(xiàn)的列表都有可能是一些中醫(yī)課程或者是英語學(xué)習(xí),不會(huì)隨著用戶選擇的不同而量身推薦內(nèi)容。

另外,這種設(shè)置不但沒有根據(jù)用戶的興趣進(jìn)行針對(duì)性的推薦,而且,會(huì)對(duì)用戶造成一定程度的誤導(dǎo),從用戶的角度來說,導(dǎo)航切換了該導(dǎo)航下的內(nèi)容進(jìn)行相應(yīng)的切換是一個(gè)順理成章的邏輯,但這三個(gè)模塊內(nèi)容卻不進(jìn)行切換,這并不符合用戶的操作認(rèn)知。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

3.2 如果能更智能的進(jìn)行個(gè)性化課程推薦可能會(huì)更好

我們從結(jié)構(gòu)圖中可以看到,發(fā)現(xiàn)頁中共有26個(gè)分類導(dǎo)航,涵蓋各種年齡階段,不同性別不同層次的用戶群體可能感興趣的所有課程,可以說是課程內(nèi)容非常豐富了。但是,如果用戶對(duì)排名比較靠后的某一個(gè)類別感興趣的話,那么他想要找到這個(gè)類別就會(huì)相對(duì)比較困難,而且在進(jìn)行左滑的時(shí)候很容易錯(cuò)過中間某個(gè)分類。

同時(shí),在體驗(yàn)的過程中,我用了男女兩個(gè)性別不同的帳號(hào)進(jìn)行體驗(yàn),發(fā)現(xiàn)所展示的內(nèi)容完全一致,連導(dǎo)航的排序也一致,這說明產(chǎn)品沒有針對(duì)細(xì)分用戶做一些相對(duì)個(gè)性化的區(qū)分。

我們知道,對(duì)于非基礎(chǔ)知識(shí)的獲取需求,不同的用戶群體的需求可能差異很大,所以如果產(chǎn)品能夠應(yīng)用人工智能或者是大數(shù)據(jù)等技術(shù)對(duì)用戶進(jìn)行相對(duì)個(gè)性化的信息展示,那么在轉(zhuǎn)換率以及用戶體驗(yàn)方面都應(yīng)該都會(huì)有所提升。

然后是“精選”頁,個(gè)人覺得精選頁存在2個(gè)問題:

第一,是與首頁一樣沒有針對(duì)細(xì)分用戶進(jìn)行個(gè)性化的區(qū)分,我用了男女兩個(gè)性別不同的帳號(hào)進(jìn)行體驗(yàn),所展示的內(nèi)容完全一致。當(dāng)然,精選課程列表可能選取的是一些相對(duì)比較熱門的課程(熱門也是一種吸引力的保障),或者是一些產(chǎn)品出于商業(yè)盈利或者其他考慮而特意選出的部分課程,所以倒是不一定非要有用戶針對(duì)性。

第二,個(gè)人覺得其實(shí)精選課程并不需要作為一個(gè)一級(jí)導(dǎo)航頁存在,其實(shí)精選課程的內(nèi)容,完全可以由發(fā)現(xiàn)頁中的“推薦”分類進(jìn)行承載,只要在推薦類的課程列表中進(jìn)行一些模塊劃分便能實(shí)現(xiàn),并不需要顯示一個(gè)專門的一級(jí)導(dǎo)航頁。

接下來是“我的微課”頁,分為全部課程、最近學(xué)習(xí)、即將開始三個(gè)模塊。這里記錄了用戶購買和學(xué)習(xí)過的課程記錄,滿足用戶方便快捷進(jìn)行回溯或繼續(xù)學(xué)習(xí)的需求,是一個(gè)非常好的頁面。

但是,也存在一點(diǎn)點(diǎn)小問題,那就是被添加進(jìn)來的課程不能進(jìn)行管理,如果用戶無意間點(diǎn)開一個(gè)自己不感興趣的課程,后面想要?jiǎng)h除,無法實(shí)現(xiàn)。在用戶打開過的課程越來越多時(shí),可能會(huì)造成不好的用戶體驗(yàn)。

“個(gè)人中心”頁,個(gè)人中心頁是一個(gè)典型的個(gè)人中心頁面,這里就不進(jìn)行進(jìn)一步分析了。

4. 核心頁面分析

接下來我們對(duì)產(chǎn)品的幾個(gè)核心頁面進(jìn)行一下分析。

4.1 課程詳情頁

首先是“課程詳情”頁,我們先想象一個(gè)場(chǎng)景:

一個(gè)用戶在推薦頁看到了一個(gè)瑜伽課程感覺挺有興趣,于是她點(diǎn)開了這個(gè)課程,想進(jìn)一步看看課程更詳細(xì)的信息,好決定自己是不是要購買這個(gè)課程。課程詳情頁信息影響著用戶是否購買的決策,是一個(gè)非常重要的頁面。

我們來看看課程詳情頁的構(gòu)成。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間
  • 功能:購買專欄按鈕、課程試聽、分享課程、關(guān)注課程分享者帳號(hào)。
  • 信息:封面圖、專欄標(biāo)題、價(jià)格、課程更新進(jìn)度、在學(xué)人數(shù)、課程詳情、課程目錄、人氣榜、課程分享者帳號(hào)信息。
  • 需求:用戶想進(jìn)一步獲取更詳細(xì)的課程信息,好決定自己是不是要購買課程。
  • 思考:從信息內(nèi)容來看,荔枝微課的課程詳情頁做得非常好,尤其是頁面主體“詳情”內(nèi)容總能把課程非常具有吸引力的內(nèi)容提煉出來,可以說從內(nèi)容運(yùn)營方面來說領(lǐng)先于市面上很多產(chǎn)品。

不過從功能的角度來看,荔枝微課還是可以進(jìn)行小小的優(yōu)化,首先便是缺少直接的咨詢按鈕,我們知道用戶在進(jìn)行購買決策時(shí),如果能為用戶提供一個(gè)咨詢客服的入口,會(huì)一定程度提高轉(zhuǎn)換率。

當(dāng)然,因?yàn)槠脚_(tái)上存在大量的個(gè)人講師,因此,如果增加咨詢按鈕的話,這大量的客服工作可能需要平臺(tái)來承擔(dān),這樣會(huì)大量增加平臺(tái)的成本。所以,目前荔枝微課的課程沒有直接的咨詢?nèi)肟?,也有可能是出于?duì)成本的考慮。

然后,就是已消費(fèi)用戶的評(píng)論也是影響用戶購買決策的重要因素,如果能在課程詳情頁中增加用戶的評(píng)論,可能會(huì)錦上添花,對(duì)用戶的決策產(chǎn)生正向影響。

而且,這種評(píng)價(jià)體系也將為優(yōu)質(zhì)的課程做更好的背書,再輔以一些相應(yīng)的算法對(duì)課程進(jìn)行排序,這可以促進(jìn)講師們提升自己的課程質(zhì)量,長久下來將有助于平臺(tái)整個(gè)課程質(zhì)量的提升。

4.2 課程播放頁

視頻播放頁也是產(chǎn)品非常重要的頁面之一。我們可以看到左圖是荔枝微課的課程播放頁,右圖是進(jìn)入課程學(xué)習(xí)的上一步,選擇是“繼續(xù)未聽完的課”還是“直接進(jìn)入課堂”,如果用戶是第一次進(jìn)入課程則是,選擇“從第一條開始聽”還是“直接進(jìn)入課堂”。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

在上文中我們已經(jīng)提到過這個(gè)選擇頁面對(duì)于整個(gè)學(xué)習(xí)課程流程的完成有一定的多余,不過從其課程播放界面我們看到課程并不是一個(gè)完整的視頻或音頻而是一個(gè)模擬直播現(xiàn)場(chǎng)的分條課程頁面時(shí),我們大概能理解為什么會(huì)有這樣的選擇了。

我們知道講師進(jìn)行課程直播,然后將這些直播的內(nèi)容進(jìn)行沉淀,供用戶反復(fù)學(xué)習(xí),這是荔枝微課的一大核心特色。荔枝微課設(shè)置如上的課程學(xué)習(xí)頁面,可能是為了更好的還原直播課程現(xiàn)場(chǎng),包括直播的氣氛、講師與學(xué)生之間的互動(dòng)交流碰撞出的火花等等。

不過,我們來想象一個(gè)場(chǎng)景,當(dāng)不在那個(gè)直播氛圍中,用戶對(duì)于一條一條的去刷整個(gè)課程討論的需求有多高呢?更何況很多講師在直播的時(shí)候可能還不允許用戶進(jìn)行討論,全程只是講師在進(jìn)行講課。那用戶更希望將這個(gè)內(nèi)容一條條拆開還是將講課內(nèi)容整合起來聽呢?我想答案應(yīng)該很明顯吧。

我們可以看到,其實(shí)在產(chǎn)品中還有一個(gè)不一樣的播放頁面,如下圖所示,我們可以看到這就是直接將課程進(jìn)行了整合,而且用戶如果想要觀看上課模式,可以直接進(jìn)行切換,個(gè)人覺得其實(shí)所有的播放頁面都可以直接采用這種模式。

這樣不但能給用戶自主選擇的余地,而且我們?cè)谡n程播放被打斷之后,再次進(jìn)入課程播放頁的時(shí)候,也不用再選擇是“繼續(xù)未聽完的課”還是“直接進(jìn)入課堂”,而是可以直接斷點(diǎn)續(xù)播。

當(dāng)然,荔枝微課這樣的頁面設(shè)置可能背后有由于我個(gè)人產(chǎn)品能力不足,或者是我對(duì)荔枝微課了解不夠深刻所導(dǎo)致的認(rèn)知誤差,如果是這樣,還請(qǐng)海涵。

荔枝微課app體驗(yàn)報(bào)告:與AI結(jié)合,將有更大發(fā)展空間

三、總結(jié)

由于時(shí)間問題,這篇體驗(yàn)報(bào)告寫得并不是很深入,有的觀點(diǎn)也不一定準(zhǔn)確,如果有一些不當(dāng)之處,再次致歉。然后對(duì)于文中提到的一些問題,主要是秉持著希望荔枝微課發(fā)展越來越好的初衷進(jìn)行體驗(yàn)的,還希望各位不要覺得這是一篇找茬文才好。

總結(jié)來說,荔枝微課是目前市面上知識(shí)付費(fèi)領(lǐng)域非常優(yōu)秀有競爭力的產(chǎn)品,不過現(xiàn)在產(chǎn)品針對(duì)用戶進(jìn)行個(gè)性化的定制變得越來越重要,尤其是這種知識(shí)付費(fèi)產(chǎn)品,如何讓用戶迅速找到自己愿意付費(fèi)的課程成為了產(chǎn)品的重要競爭點(diǎn)之一。

個(gè)人覺得如果荔枝微課能夠在抓住在線教育風(fēng)口的同時(shí),再輔助以一定的人工智能、大數(shù)據(jù)等新技術(shù)進(jìn)行提升,應(yīng)該會(huì)帶來更大的發(fā)展空間。

本文由 @鐘娟娟 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



如何開始學(xué)UI?入學(xué)UI的五大問題!

藍(lán)藍(lán)設(shè)計(jì)的小編

1.我想學(xué)UI,請(qǐng)問看什么書啊?

2.我想學(xué)UI,請(qǐng)問哪個(gè)培訓(xùn)機(jī)構(gòu)比較好?

3.我想學(xué)UI,請(qǐng)問如何入手?

4.我不是設(shè)計(jì)專業(yè),但是我還是想學(xué)UI,請(qǐng)問如何系統(tǒng)學(xué)習(xí)?

5.我不管,我就是要學(xué)UI,請(qǐng)您給點(diǎn)兒建議。

經(jīng)驗(yàn)總結(jié)!Material Design和iOS 產(chǎn)品設(shè)計(jì)的差異化思考

資深UI設(shè)計(jì)者


如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

Material Design(以下簡稱MD)是谷歌設(shè)計(jì)的一套視覺語言設(shè)計(jì)規(guī)范,主要應(yīng)用于安卓類應(yīng)用。


iOS Human Interface Guidelines(以下簡稱iOS)是蘋果公司針對(duì) iOS設(shè)計(jì)的一套人機(jī)交互指南,目的是為了使運(yùn)行在 iOS 上的應(yīng)用都能遵從一套特定的視覺以及交互特性,從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

相對(duì)來說,我們對(duì)于 iOS 的設(shè)計(jì)規(guī)范更加熟悉——因?yàn)榭紤]到成本,設(shè)計(jì)師進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候只會(huì)出一套 iOS 的設(shè)計(jì)稿,然后去適配安卓機(jī)型。

很少會(huì)針對(duì)安卓機(jī)型再出一套 MD風(fēng)格的方案,這種現(xiàn)象雖然存在但是并不合理。不同的系統(tǒng)/平臺(tái)采用了不同的設(shè)計(jì)語言,不同的設(shè)計(jì)語言會(huì)培養(yǎng)出不同的操作習(xí)慣。

例如使用安卓手機(jī)的用戶平時(shí)見到的都是 MD風(fēng)格的界面,突然下了一個(gè) iOS風(fēng)格的應(yīng)用,那么操作起來就會(huì)很不習(xí)慣,增加了學(xué)習(xí)成本。

為了讓產(chǎn)品可以適用不同平臺(tái)用戶的操作習(xí)慣,提供 MD 和 iOS 兩套設(shè)計(jì)稿是非常有必要的。當(dāng)然 MD 和 iOS 的差異不是一篇文章就能說清楚的,這里我就從陰影、導(dǎo)航和配色這三個(gè)方面來簡單分析一下 MD 和 iOS 的差異。

一、陰影

對(duì)于不太熟悉 MD 的設(shè)計(jì)師來說,MD 意味著大色塊+陰影。

為什么 MD 如此癡迷于陰影?

從它的名字就可以看出來——Material Design,這里的 material 指的是紙張;因?yàn)閬碓从诂F(xiàn)實(shí)生活,所以 MD 非常喜歡使用真實(shí)世界元素的物理規(guī)律與空間關(guān)系來表現(xiàn)組件之間的層級(jí)關(guān)系,而陰影就是最常見的表現(xiàn)形式:

同樣的賬戶注冊(cè),安卓界面中按鈕帶有陰影而 iOS 界面中按鈕沒有陰影。

FAB(Floating Action Button),帶有陰影的浮動(dòng)操作按鈕甚至成為了 MD 的一大招牌。相比較而言iOS更加扁平化。

二、導(dǎo)航體系

產(chǎn)品導(dǎo)航體系主要由菜單欄構(gòu)成,而根據(jù)位置以及交互方式可以分為頂部欄菜單、底部欄菜單和側(cè)邊欄菜單。iOS 的導(dǎo)航體系主要由底部欄菜單構(gòu)成,而 MD 大量使用了頂部欄菜單和側(cè)邊欄菜單。

下面我們來看幾個(gè)例子:

網(wǎng)易云音樂在 iOS 中采用的是底部欄菜單導(dǎo)航,而在安卓機(jī)型上導(dǎo)航欄被移到界面頂部,「賬號(hào)」被收到側(cè)邊欄中。

b站在 iOS 中有底部欄菜單有5個(gè)標(biāo)簽,而在安卓機(jī)型中只有4個(gè)標(biāo)簽,「我的」同樣被側(cè)邊欄收起來。

推特在 iOS 中使用的底部欄菜單導(dǎo)航,在安卓機(jī)型中導(dǎo)航欄被移到了頂部。

而 Apple Music 做的更徹底,在安卓機(jī)型上直接舍棄了底部菜單欄,采用了側(cè)邊欄作為主導(dǎo)航模式。

我們發(fā)現(xiàn)前兩款國產(chǎn)應(yīng)用在安卓機(jī)型上都保留了底部欄菜單,而后兩款國外應(yīng)用直接砍掉底部欄菜單。不只是 Apple music 和推特,很多國外的安卓類應(yīng)用都沒有使用底部欄菜單。而國內(nèi)的應(yīng)用因?yàn)榭紤]到 iOS,即使 MD 化也是閹割版的,屬于 iOS 和 MD 的混血兒。甚至很多安卓應(yīng)用在設(shè)計(jì)風(fēng)格上往 iOS 靠攏,以b站為例,其5.11之前的安卓版本中都是沒有底部欄菜單的。

當(dāng)然這里并不是去評(píng)價(jià) MD 和 iOS 哪個(gè)導(dǎo)航體系更好用,我說下自己的觀點(diǎn):

底部欄菜單的使用非常方便用戶在單手握持情況下的操作,但是對(duì)于大屏手機(jī)來說,單手操作會(huì)顯得很吃力。如果用戶改由雙手握持手機(jī),那么從易用性上來說底部欄菜單沒有任何優(yōu)勢(shì)。

MD 的方案更加注重對(duì)界面空間的利用,側(cè)邊欄菜單就不說了。以底部欄菜單為例,在安卓機(jī)型中用戶滑動(dòng)的時(shí)候底部欄菜單會(huì)隱藏,方便的用戶可以看下知乎,安卓版的底部欄用戶滑動(dòng)的時(shí)候會(huì)隱藏,而 iOS 則是固定不動(dòng)的。

側(cè)邊欄的優(yōu)勢(shì)還體現(xiàn)在可以提供更多的標(biāo)簽,底部欄菜單最多可以放5個(gè)。但是側(cè)邊欄菜單需要用戶點(diǎn)擊才能調(diào)出來,比較隱蔽,而底部欄和頂部欄相對(duì)來說就會(huì)顯得一目了然,總之各有千秋。

至于為什么 MD 會(huì)拋棄底部欄菜單,我個(gè)人的理解是設(shè)備原因。因?yàn)榘沧繖C(jī)型底部有三個(gè)物理按鍵,如果采用底部欄菜單作為主導(dǎo)航模式,容易造成用戶誤點(diǎn)擊。

類似的還有 web 類應(yīng)用,因?yàn)闉g覽器的控件欄也在底部,所以如果采用了底部欄菜單同樣會(huì)造成用戶的誤操作。

三、配色

MD 提倡使用高飽和度的對(duì)比色來提升產(chǎn)品的視覺表現(xiàn)力,也就是我在上面提到的大色塊。同樣的一個(gè)功能,從底部欄背景色、插畫到按鈕,我們可以發(fā)現(xiàn) iOS 在色彩的使用上比較克制。

知乎之前的安卓版本使用了大面積的藍(lán)色,后來改成跟 iOS 一樣的白色。這樣的調(diào)整褒貶不一,有的用戶反饋這完全照搬了 iOS,要改回 MD。

產(chǎn)品界面設(shè)計(jì)中對(duì)比效果主要由配色、尺寸、間距和陰影來完成。MD 在配色和陰影上做的比較出彩,所以 MD風(fēng)格的產(chǎn)品在視覺表現(xiàn)上更有沖擊力。而 iOS 則顯得比較小清新,追求扁平和簡潔。所以我們無法去評(píng)判這兩款設(shè)計(jì)規(guī)范的孰好孰壞,因?yàn)槠涓髯缘某霭l(fā)點(diǎn)就是不一樣的。

當(dāng)然前面也提到了 MD 和 iOS 的差異不僅僅體現(xiàn)在以上說的這三點(diǎn),還有一些小細(xì)節(jié)也非常值得我們思考。我們都知道在 iOS系統(tǒng)中,用戶向右滑動(dòng)的時(shí)候會(huì)返回上一級(jí)頁面。因?yàn)樘O果手機(jī)沒有物理返回按鍵,所以這種機(jī)制非常受歡迎,但是在一些特定場(chǎng)景的時(shí)候就會(huì)有問題。例如如果我想復(fù)制微博里的「一曲肝腸斷,天涯何處覓知音」,選中光標(biāo)從左向右滑動(dòng),這時(shí)就會(huì)返回上一級(jí)頁面,特別不方便。所以我只能從右向左進(jìn)行復(fù)制,我后來試了一下微信和 QQ,發(fā)現(xiàn)默認(rèn)復(fù)制的是整條動(dòng)態(tài),這也算是一個(gè)折衷的方案。

總結(jié)

這篇文章并不是去評(píng)判 iOS 和 MD 兩種設(shè)計(jì)風(fēng)格孰好孰壞,也不是讓我們現(xiàn)在就去為自己的產(chǎn)品做出兩套設(shè)計(jì)稿,這個(gè)目前來說也不太現(xiàn)實(shí)。很多國民類應(yīng)用都只采用了一套設(shè)計(jì)稿,大家都這么做,整個(gè)大環(huán)境就是這樣。

但是還是那句話:存在不一定合理。出兩套設(shè)計(jì)稿雖然現(xiàn)在看起來不現(xiàn)實(shí),但是我們也要做好準(zhǔn)備,要有危機(jī)感。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

UI設(shè)計(jì)師必須要掌握的交互知識(shí)

藍(lán)藍(lán)設(shè)計(jì)的小編

交互設(shè)計(jì) Interaction Design 也被成為IXD。交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道,它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計(jì)師,就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計(jì)了呢?當(dāng)然不是,在視覺設(shè)計(jì)層面更多地考慮布局和交互原則才可以讓我們的界面更友好,視覺設(shè)計(jì)師是交互設(shè)計(jì)中非常重要的角色。

如何做好電商類App?來看這份對(duì)新版淘寶的設(shè)計(jì)思考!

資深UI設(shè)計(jì)者


電商類 App 是日常使用頻次非常高的應(yīng)用,它們的每一次更新改版不僅是業(yè)務(wù)的拓展、用戶需求的滿足,同時(shí)也是消費(fèi)趨勢(shì)的引領(lǐng)與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動(dòng),在分析淘寶改版的基礎(chǔ)上,通過幾個(gè)關(guān)鍵頁面的分析對(duì)比淘寶、京東、蘇寧易購三大綜合類電商平臺(tái)的產(chǎn)品設(shè)計(jì),希望此篇文章能讓大家對(duì)電商類 App 的產(chǎn)品設(shè)計(jì)有更深的認(rèn)識(shí)。

一、淘寶改版

前陣子淘寶進(jìn)行了改版,這次改版循序漸進(jìn),并做了較多的 A/B 測(cè)試。

1. 主要改版頁面

上圖是淘寶幾個(gè)主要改版頁面。從視覺上看,很明顯的大圓角卡片、去線條,整體風(fēng)格統(tǒng)一輕質(zhì)化。大圓角卡片追隨了 iOS11 的風(fēng)格(App Store 中尤為突出),卡片使信息更加聚焦,模塊感更強(qiáng);圓角卡片本身也比原先的卡片式增加了更多細(xì)節(jié);大圓角卡片親和力高,更加活潑,也符合淘寶人群的定位。

上圖為5個(gè) tab 的頁面,這次統(tǒng)一了頭部的顏色,強(qiáng)調(diào)了品牌,統(tǒng)一性方面也得到了提升。

以下是從單個(gè)頁面的角度進(jìn)行改版分析。

2. 個(gè)人首頁

△ 舊版圖為除夕的截圖,顏色方面先不討論

新舊版本的對(duì)比,可以看出88會(huì)員、卡券包優(yōu)先級(jí)提高,會(huì)員信息更加集中、突出。這也印證了這兩年會(huì)員機(jī)制的火熱,拉新成本和難度都越來越高的情況下,鞏固老用戶才能帶來更多的價(jià)值。

新版的卡片式很突出,去掉了大部分的線條,轉(zhuǎn)而用塊面來代替線條表達(dá)層級(jí)關(guān)系。

「我的訂單」部分 icon 樣式發(fā)生了變化(7. 7. 2 版),從填充式轉(zhuǎn)變?yōu)榫€條式,突出了 icon 右上角的數(shù)字,但這一點(diǎn)在測(cè)試版本中又改回來了(后面討論)。

88會(huì)員和物流這兩塊內(nèi)容滾動(dòng)呈現(xiàn),真正是動(dòng)效解決問題,從時(shí)間軸來解決信息量大而空間局限的問題,同時(shí)動(dòng)態(tài)效果增加了用戶吸引度。

在測(cè)試版中,這個(gè)頁面主要看到兩個(gè)點(diǎn)的變化,一個(gè)是 icon 改為原來的填充式,一個(gè)是動(dòng)效滾動(dòng)的節(jié)奏。

icon 的問題個(gè)人猜想是因?yàn)轶w量與重要性、位置的問題,線條式的體量弱于填充式。在「我的淘寶」頁面中,最重要的信息是「我的訂單」,因此需要一定的突出。另外在測(cè)試版里,「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告,此位置的突出性導(dǎo)致其弱化了底下的「我的訂單」,占用了原先「我的訂單」的 C 位,因此測(cè)試版考慮到更全的場(chǎng)景(有廣告),從而將 icon 的樣式換回了體量大的填充式。

動(dòng)效滾動(dòng)是上面說的88會(huì)員和物流,7. 7. 2版本里兩個(gè)滾動(dòng)是同時(shí)進(jìn)行的,而7. 7. 8的測(cè)試版中兩個(gè)滾動(dòng)是錯(cuò)開的。上下同時(shí)滾動(dòng)會(huì)讓人有些混亂,會(huì)讓人認(rèn)為這兩塊的信息是相互關(guān)聯(lián)的。

3. 店鋪首頁

這一塊做的 A/B 測(cè)試。店鋪頁面的改動(dòng)較大,導(dǎo)航做了較大調(diào)整。新版將常用操作和重要功能放到了底部固定;二級(jí)導(dǎo)航中的內(nèi)容讓商家自定義選擇,從而滿足不同店鋪的需求;新版一級(jí)二級(jí)導(dǎo)航較舊版層級(jí)關(guān)系明確了許多。

再來說說這次的 A/B 測(cè)試,這次的測(cè)試時(shí)間比較長(從7. 7. 2到目前的7. 8. 2都在,目測(cè)到8. 0應(yīng)該會(huì)給出一個(gè)結(jié)果)。店鋪頁在導(dǎo)航上的大改動(dòng),會(huì)在一定程度上對(duì)已經(jīng)形成習(xí)慣的老用戶造成沖擊,對(duì)頁面重新適應(yīng)和學(xué)習(xí),有點(diǎn)類似于前攝抑制(在認(rèn)知心理學(xué)上指之前學(xué)習(xí)過的材料對(duì)保持和回憶以后學(xué)習(xí)的材料的干擾作用)。新版設(shè)計(jì)的目的一是方便用戶初期快速學(xué)習(xí),二是中后期快速使用。對(duì)于中后期的快速使用就需要一段時(shí)間的鋪墊來獲得數(shù)據(jù)。該次測(cè)試應(yīng)該是區(qū)分各種不同的用戶,簡單來說測(cè)試新用戶、老用戶分別對(duì)于新舊版本的學(xué)習(xí),以及他們對(duì)新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進(jìn)行的操作,增強(qiáng)用戶感知(降低理解難度),進(jìn)一步提升對(duì)商品信息的把控感。比原先僅僅是文字展示而言生動(dòng)了許多,樣式接近外賣等待中的訂單頁面??梢暬倘豢梢哉故靖嗟男畔?,但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快,不同的人對(duì)圖形的理解也會(huì)有所偏差。不過介于外賣 App 的頁面已經(jīng)對(duì)很多用戶進(jìn)行了教育,相信這種理解上不會(huì)有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點(diǎn)。

物流詳情頁除了樣式的巨大變化,還有一個(gè)特點(diǎn)就是場(chǎng)景化細(xì)分,不同的場(chǎng)景做出了差異化。例如僅僅是物流詳情頁,根據(jù)不同的場(chǎng)景:發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達(dá)菜鳥驛站/其他快遞點(diǎn) – 已簽收等,頁面突出的信息均有所區(qū)別。已攬件時(shí)突出快遞信息,配送時(shí)突出配送員信息等。

從場(chǎng)景細(xì)分做差異化,讓用戶獲取當(dāng)前最需要的信息這件事的出發(fā)點(diǎn)無疑是很好的,但是從上圖中,僅是快遞信息這一類信息,就出現(xiàn)了三種樣式(如上圖),并且位置也不統(tǒng)一。如果用戶是購買了幾件不同店家的商品,這時(shí)快遞員打電話來說我是XX快遞的,快遞給你放在了某某地方,這時(shí)我想知道這是啥商品的時(shí)候,于是我就打開了物流詳情,來找快遞信息,發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了,找了好一會(huì)才發(fā)現(xiàn)放到了快遞員下方。這個(gè)例子也就是說在非常見場(chǎng)景下獲取某個(gè)信息時(shí)可能需要付出額外的學(xué)習(xí)成本。

不過在7. 7. 8的測(cè)試版本中,又將快遞信息的樣式減為兩種,算是一種妥協(xié)。本人認(rèn)為,場(chǎng)景細(xì)分出發(fā)點(diǎn)是好的,但在樣式和位置兩點(diǎn)中,最好至少有一點(diǎn)是固定不變的,這樣才不會(huì)過多增加用戶的學(xué)習(xí)成本,也能涵蓋一些小概率場(chǎng)景。

5. 動(dòng)效

這兩張圖都是店鋪頁面頂部的動(dòng)效,當(dāng)用戶向下滑動(dòng)頁面時(shí),頂部的信息會(huì)出現(xiàn)變化,也算是細(xì)分場(chǎng)景的一種,通過動(dòng)效的方式完美過渡,過渡的流暢感會(huì)讓用戶對(duì)該平臺(tái)增加些許好感。

我的淘寶這一頁的動(dòng)效解決問題在上面有說到,右邊的有好貨頁面,當(dāng)用戶在滑動(dòng)頁面時(shí),攻略推薦一欄的圖片有依次展現(xiàn)的效果,吸引眼球,小有驚喜。

總結(jié)來看,淘寶改版的設(shè)計(jì)角度可以總結(jié)為:設(shè)計(jì)追隨目標(biāo),品牌、會(huì)員突出,追隨設(shè)計(jì)趨勢(shì),細(xì)分場(chǎng)景,可視化展現(xiàn)和流暢動(dòng)效。另外淘寶對(duì)設(shè)計(jì)、測(cè)試的態(tài)度上來說,設(shè)計(jì)解決實(shí)際問題,設(shè)計(jì)需要驗(yàn)證,測(cè)試要嚴(yán)謹(jǐn)。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個(gè)與淘寶進(jìn)行了幾個(gè)關(guān)鍵頁面比較,以下主要從視覺的角度談一下有哪些問題,這里幾乎不牽扯業(yè)務(wù)、頁面跳轉(zhuǎn)等問題。

1. 首頁

淘寶:整體看起來沒有什么硬傷,沒有用卡片風(fēng)格。

京東:這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬,大有為了卡片而卡片既視感,京東秒殺這塊的整齊度不高,也有些左重右輕?!该咳展洹惯@種裝飾性較強(qiáng)的風(fēng)格也與整體卡片式簡潔風(fēng)格不符。「東家小院」樓層次級(jí)標(biāo)題的顏色跳躍,大有喧賓奪主之感。

蘇寧易購:目前還沒有改版。掌上搶這樓層整齊度不高,和京東類似,同時(shí)缺少層次感,部分有漸變部分沒有,非常不統(tǒng)一?!腹鋵?shí)惠」樓層視覺不平衡,而且信息層級(jí)很有問題。

2. 搜索結(jié)果頁

風(fēng)格:淘寶這頁用了無框設(shè)計(jì),省去了中間的分割線,商品圖片尺寸較大;從左到右,圖片尺寸越來越小,分割線從無到細(xì)到粗,整體效果上淘寶和京東效果比易購的好。

標(biāo)簽:在標(biāo)簽的處理上,易購的標(biāo)簽非常強(qiáng),在頁面上非常突出,喧賓奪主;京東的標(biāo)簽弱化,與淘寶類似,但完全不同類的標(biāo)簽樣式相同(秒殺與自營),會(huì)讓人覺得有些混亂。

圖文編排:淘寶和京東都沒有硬傷,比較和諧,但易購的圖片和文字大小間距比例不和諧,圖片與線框無論在視覺效果上還是像素上都沒有對(duì)齊;易購底部沒有適配 iPhone X。

3. 分類頁

風(fēng)格:淘寶用了明顯的卡片,去線條;而京東也用了卡片,卡片感微弱,是為了統(tǒng)一性而做;易購仍然是線框區(qū)分,整體區(qū)分效果不佳。

品牌:淘寶和京東在文字的處理上沒有用更多的色彩,而易購的色彩運(yùn)用得非常多,削弱品牌感,且沒有帶來任何優(yōu)勢(shì)。

4. 商品詳情頁

此頁面我僅從節(jié)奏感這一個(gè)角度來看,上圖已經(jīng)標(biāo)出了每個(gè)頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好,輕重緩和;京東和易購在節(jié)奏感上做的都有些問題,重節(jié)奏之間無輕節(jié)奏的調(diào)和會(huì)缺乏呼吸感。

5. 購物車

風(fēng)格效果:淘寶沒有用卡片風(fēng)格;京東用了卡片,導(dǎo)致大量留白,同時(shí)沒有帶來任何優(yōu)勢(shì),蘇寧易購整體稍顯擁擠,沒有亮點(diǎn)。

圖文編排:淘寶整體非常和諧;京東圖片均使用了白底,這點(diǎn)很好保持了統(tǒng)一性;京東使用了大量的設(shè)計(jì)細(xì)節(jié),字號(hào)、粗細(xì)、字體、顏色等等非常豐富,但整體效果并沒有很理想,稍顯瑣碎與凌亂;蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細(xì)節(jié):京東標(biāo)簽不同于搜索結(jié)果頁的弱化,而是非常強(qiáng)化,導(dǎo)致視覺焦點(diǎn)混亂,個(gè)別按鈕非常小,操作不便;易購標(biāo)簽處理上比京東收斂;易購底部 tab 與其他部分沒有區(qū)分,浮框像廣告,效果不佳,數(shù)量修改框的描邊太硬,比例不和諧。

6. 個(gè)人首頁

整體風(fēng)格:淘寶和京東都是明顯的卡片式,蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題:首屏出現(xiàn)「我的專場(chǎng)」的大片不平衡色塊非常不合適,部分 icon 效果不佳,另外有一些內(nèi)容上的 bug。

7. 訂單

淘寶和京東的訂單頁個(gè)人認(rèn)為沒有什么硬傷,淘寶有個(gè)適配的問題。蘇寧易購的問題比較多,首先是頂部「常購清單」中沒有商品的 bug,然后是圖片與購物車等地方的風(fēng)格不符,商品之間分割線有時(shí)有有時(shí)無,間距有問題等等。

三、總結(jié)

綜合上面具體頁面的分析可以看出淘寶在 UI 設(shè)計(jì)上的優(yōu)勢(shì):追隨設(shè)計(jì)趨勢(shì)、統(tǒng)一性、排版和諧等。

關(guān)于統(tǒng)一性這一點(diǎn),可能有人說京東做的更好,因?yàn)樗鼛缀跛许撁娑加昧丝ㄆL(fēng),而淘寶沒有。個(gè)人認(rèn)為,設(shè)計(jì)風(fēng)格是次于設(shè)計(jì)目標(biāo)的,如果這種設(shè)計(jì)風(fēng)格不能很好滿足該頁面的設(shè)計(jì)目標(biāo),建議還是以設(shè)計(jì)目標(biāo)為重;如果仍然強(qiáng)制使用該風(fēng)格的話,會(huì)得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格,除了卡片以外,還有去線條、色塊等等設(shè)計(jì)語言,因此并非強(qiáng)調(diào)一定要使用卡片形式。

日歷

鏈接

個(gè)人資料

存檔