首頁

PRD:倒推數(shù)據(jù)可視化APP——Chartistic產(chǎn)品需求文檔

資深UI設(shè)計者

Chartistic是一款通過交互快速編輯數(shù)據(jù)可視化圖表的app。本文通過對“Chartistic”app進行產(chǎn)品體驗與分析后產(chǎn)出的PRD文檔。該文檔由幾個板塊組成:全局說明、產(chǎn)品說明、頁面詳細功能說明等。

目錄

一、文檔綜述

1.1文檔輸出環(huán)境

1.2產(chǎn)品簡介

1.3產(chǎn)品總結(jié)

二、全局說明

2.1鍵盤說明

2.2按鈕說明

2.3默認設(shè)置

2.4限制設(shè)定

2.5頁面交互

三、產(chǎn)品說明

3.1產(chǎn)品操作流程

3.2產(chǎn)品功能導(dǎo)圖

3.3頁面流程

四、頁面詳細功能說明

4.1歡迎頁

4.2首頁

4.3圖表編輯頁

4.3.1柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

4.3.2智能剪貼畫編輯頁

4.4X軸Y軸編輯頁(柱狀圖/折線圖/面積圖/餅圖)

4.5設(shè)置編輯頁

4.5.1柱狀圖/折線圖/面積圖設(shè)置編輯頁

4.5.2餅圖設(shè)置編輯頁

4.5.3智能剪貼畫設(shè)置編輯頁

4.6圖表完成頁

五、總結(jié)

一、文檔綜述

1.1 文檔輸出環(huán)境

1.2 產(chǎn)品簡介

Chartistic,一款備受好評的小眾數(shù)據(jù)可視化app。

在這個到處都充斥著數(shù)據(jù),以數(shù)據(jù)為導(dǎo)向的年代,日常辦公中隨時隨地都有可能需要對或多或少的數(shù)據(jù)進行可視化處理來幫助分析與演示。

雖然有很多的功能強大的工具可以創(chuàng)建圖表,但是卻沒有多少工具可以使創(chuàng)建更簡單、更具有交互性。

Chartistic無需登錄,打開即用,在移動端以交互的方式編輯數(shù)據(jù),一分鐘內(nèi)創(chuàng)建漂亮的柱狀圖、折線圖、區(qū)域圖和餅狀圖。將圖表以圖像的形式導(dǎo)出,并將其嵌入到演示文稿、電子郵件、文檔、電子表格中!

交互便捷,操作簡單的它已在43個國家/地區(qū)投入使用。在新加坡、泰國、菲律賓和越南,名列App Store的年度十佳應(yīng)用榜單。上線起至今共入選 App Store 精品推薦 9 次,下載量累計24萬次 。

1.3 產(chǎn)品總結(jié)

目標(biāo)用戶:需要對少量數(shù)據(jù)迅速進行可視化處理的辦公人群

產(chǎn)品定義:快速、簡單的移動端數(shù)據(jù)可視化工具應(yīng)用,導(dǎo)出圖表作為PPT等演示工具的補充。

產(chǎn)品特征:

  1. 無需登錄
  2. 交互式編輯
  3. 外觀選擇多樣性

二、全局說明

2.1 鍵盤說明

在不同頁面需要輸入編輯時,對應(yīng)的彈出鍵盤的類型,數(shù)字鍵盤只能輸入正數(shù)

2.2 按鈕說明

圖表編輯頁面:

  • 圖表上默認的隨機數(shù)值除外,標(biāo)題編輯按鈕、X軸編輯按鈕、Y軸編輯按鈕在未輸入值前呈現(xiàn)灰色
  • 圖表類型按鈕:當(dāng)前類型按鈕為黑色,未選擇類型為灰色

X軸Y軸編輯頁面:

  • Y軸默認的隨機數(shù)值除外,X軸名稱編輯框、Y軸名稱編輯框、X軸的值編輯框在未輸入有效值前預(yù)填文字呈現(xiàn)灰色

設(shè)置編輯頁面:

  • 圖表樣式選擇按鈕:當(dāng)前樣式按鈕為黑色,未選擇樣式為灰色

2.3 默認設(shè)置

新建圖表時

  1. 默認已有8組數(shù)據(jù),Y軸數(shù)值在【0~1000】范圍內(nèi)隨機,X軸不賦值待編輯
  2. 標(biāo)題默認可見、居中對齊
  3. Y軸默認最大值為1000,最小值為0,不顯示小數(shù)
  4. 網(wǎng)格可見,行計數(shù)10,每一間隔的值100,對齊線不顯示、簡單圖表不開啟
  5. 邊框默認選擇無邊框
  6. X軸標(biāo)題/Y軸標(biāo)題/X軸圖例/Y軸圖例默認顯示
  7. 背景/風(fēng)格/樣式隨機
  8. 單擊增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機,X軸不賦值待編輯

2.4 限制設(shè)定

  1. 最多可輸入12組數(shù)據(jù)
  2. Y軸最大值可編輯范圍為1-10000,最小值編輯范圍為0-9999,最大值需要大于最小值
  3. Y軸數(shù)值的編輯需在【最大值~最小值】范圍內(nèi)
  4. 首先確定的是(最大值-最小值)/行計數(shù)=每一間隔的值 ,行計數(shù)的數(shù)量需要在【0~15】。因此每一間隔的值需要在【0.07*(最大值-最小值)~ (最大值-最小值)】這個范圍內(nèi),確保最多只能有14行,考慮到(最大值-最小值)/輸入的間隔值得到的行數(shù)有可能不是整數(shù)的問題,實際顯示的行數(shù)為(最大值-最小值)/輸入的間隔值四舍五入取整后的行數(shù)
  5. 最大值、最小值、行計數(shù)、每一間隔的值僅可編輯為整數(shù)

2.5 頁面交互

  1. 彈屏?xí)r底部頁面虛化,單擊彈屏以外的虛化界面,彈層關(guān)閉,返回上一頁面;
  2. 圖表編輯頁面下滑展開X軸Y軸編輯頁面,從屏幕下方上滑關(guān)閉;
  3. 圖表編輯頁面左滑展開設(shè)置編輯頁面,從屏幕左側(cè)右滑關(guān)閉。

三、產(chǎn)品說明

3.1 產(chǎn)品操作流程圖

3.2 產(chǎn)品功能導(dǎo)圖

3.3 頁面流程

四、頁面詳細功能說明

4.1 歡迎頁

  • 頁面名稱:歡迎頁
  • 入口:打開App進入
  • 頁面說明:打開App自動進入歡迎頁,停留0.5秒后自動進入首頁

4.2 首頁

圖一

圖二

圖三

圖四

頁面名稱:首頁

入口:歡迎頁后自動跳入

頁面說明:

序號1:點擊出現(xiàn)其他鏈接彈層,首頁頁面置于底部并虛化(如圖三)

序號2:點擊出現(xiàn)新建圖表類型彈層,首頁頁面置于底部并虛化(如圖二)

序號3:

  • 點擊進入圖表編輯頁
  • 長按或者左滑出現(xiàn)復(fù)制、導(dǎo)出、刪除三個快捷處理按鈕(如圖四)

序號4,5:點擊關(guān)閉彈屏,首頁頁面置于頂部并解除虛化

序號6:點擊快捷處理按鈕消失,回到首頁,在首頁圖表列表第一個位置添加復(fù)制的圖表

序號7:點擊彈屏關(guān)閉,快捷按鈕消失,回到首頁,該圖表刪除,列表中該圖表后面的圖表前移填充空缺位置

4.3 圖表編輯頁

4.3.1 柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

圖5

圖6

圖7

圖8

圖9

頁面名稱:柱狀圖/折線圖/面積圖/餅圖圖表編輯頁

入口:

  • 點擊圖表完成頁編輯按鈕跳轉(zhuǎn)
  • 新建圖表類型彈屏中點擊圖表類型對應(yīng)按鈕進入

頁面說明:

主頁面:左滑展開展開設(shè)置編輯頁面,下滑展開X軸Y軸編輯頁面

序號1:點擊返回首頁

序號2:點擊進入圖表完成頁面

序號3:點擊圖表類型切換為折線圖,數(shù)值背景等設(shè)置不變,折線顏色為柱狀圖同一風(fēng)格的單個顏色(如圖6)

序號4:點擊圖表類型切換為面積圖,數(shù)值背景等設(shè)置不變,折線與面積顏色為柱狀圖同一風(fēng)格的單個顏色,折線的顏色比面積顏色深一個色號(如圖7)

序號5:點擊圖表類型切換為餅圖,數(shù)值背景等設(shè)置不變,配色也不變(如圖8)

序號6:單擊–切換圖表顏色風(fēng)格

序號7,17,18:按住上滑/下滑–修改圓點高度,上方或者下方的對應(yīng)數(shù)值一起修改,左側(cè)提示目前高度對應(yīng)的數(shù)值,修改值在設(shè)定的Y軸最大值與最小值之間

序號8,9,10,12:輸入值之前按鈕為灰色,輸入后字體顏色由背景設(shè)置決定;點擊展開X軸Y軸編輯頁面

序號11:

  • 點擊一次增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機,X軸不賦值待編輯
  • 最多可增加至12組數(shù)據(jù),增加至12組數(shù)據(jù)后按鈕變灰,點擊無反應(yīng)

序號13:點擊后小圈即序號7變成刪除符號如圖9,單擊刪除符號刪除該組數(shù)據(jù),當(dāng)刪除至只剩一組數(shù)據(jù)時刪除符號變回小圈,不可再刪除

序號14:點擊隱藏上面的下拉按鈕、添加按鈕、刪除按鈕、設(shè)置按鈕,隱藏后圖表變?yōu)樽笙颍瑔螕艉笠陨习粹o出現(xiàn)

序號15:點擊展開設(shè)置編輯頁面

序號16:輸入值之前按鈕為灰色,輸入后字體顏色由背景設(shè)置決定;點擊輸入標(biāo)題

序號19:點擊餅圖需要修改占比的目標(biāo)扇形后出現(xiàn)兩個半圓形按鈕,按住按鈕滑動分隔線調(diào)整目標(biāo)扇形角度,按鈕相鄰一邊的扇形同時被增大/減小角度,餅圖中間提示目前目標(biāo)扇形角度對應(yīng)的占比

4.3.2 智能剪貼畫編輯頁

頁面名稱:智能剪貼畫編輯頁

入口:

  • 點擊首頁圖表縮略圖跳轉(zhuǎn)
  • 新建圖表類型彈屏中點擊圖表類型對應(yīng)按鈕進入

頁面說明:

主頁面:左滑展開展開設(shè)置編輯頁面

序號1:按住上下滑動更改有色部分的高度,左側(cè)占比數(shù)值一起更改,更改范圍為0%-100%

4.4 X軸Y軸編輯頁(柱狀圖/折線圖/面積圖/餅圖)

頁面名稱:X軸Y軸編輯頁面

入口:

  • 圖表編輯頁面下滑展開
  • 編輯X軸名稱按鈕,編輯Y軸名稱按鈕,編輯X軸按鈕,下拉按鈕點擊展開

頁面說明:

餅圖沒有編輯X軸名稱按鈕與編輯Y軸名稱按鈕

序號1:點擊保留編輯結(jié)果,收起X軸Y軸編輯頁面,回到圖表編輯頁

序號2:點擊屏幕下半部分或者從下半部分上滑,收起X軸Y軸編輯頁面,回到圖表編輯頁

序號3:

  • 點擊一次增加一組數(shù)據(jù)按鈕,增加的數(shù)據(jù)Y軸數(shù)值在【最大值~最小值】范圍內(nèi)隨機,X軸不賦值待編輯
  • 最多可增加至12組數(shù)據(jù),增加至12組數(shù)據(jù)后按鈕變灰,點擊無反應(yīng)

序號4:

  • 初始狀態(tài)為隱藏,單擊刪除按鈕即序號5后出現(xiàn),點擊刪除對應(yīng)的該組數(shù)據(jù),點擊屏幕其他任意位置再次隱藏
  • 當(dāng)刪除至只剩一組數(shù)據(jù)時自動隱藏,不可再刪除

序號5:點擊編輯文本框與數(shù)值框之間出現(xiàn)小刪除按鈕即序號4,點擊刪除對應(yīng)的該組數(shù)據(jù)

異常提示:

  • Y軸編輯的數(shù)值>最大值時,彈屏【警告 所輸入的值大于最大值】,輸入框內(nèi)容回到修改前的值;
  • Y軸編輯的數(shù)值<最小值時,彈屏【警告 所輸入的值小于最小值】,輸入框內(nèi)容回到修改前的值;

4.5 設(shè)置編輯頁

頁面名稱:設(shè)置編輯頁面

入口:

  • 圖表編輯頁面左滑展開
  • 圖表編輯頁面設(shè)置按鈕點擊展開

4.5.1 柱狀圖/折線圖/面積圖設(shè)置編輯頁

標(biāo)題設(shè)置功能

頁面說明:

序號1:屏幕左側(cè)頁面點擊或者右滑返回圖表編輯頁

值設(shè)置功能

頁面說明:

序號2:最大值最高可設(shè)置為10000,最大值設(shè)置的值需要大于最小值,僅可編輯為整數(shù)

序號3:最小值最小可設(shè)置為0,最小值設(shè)置的值需要小于最大值,僅可編輯為整數(shù)

異常提示:

  • 最大值>10000時,彈屏【無效值 請輸入小于10000的值】,輸入框內(nèi)容回到修改前的值;
  • 最大值<=最小值時,彈屏【無效值 請輸入大于最小值的值】,輸入框內(nèi)容回到修改前的值;
  • 最小值>=最大值時,彈屏【無效值 請輸入小于最大值的值】,輸入框內(nèi)容回到修改前的值;

網(wǎng)格設(shè)置功能

頁面說明:

序號4:可見性為關(guān)閉狀態(tài)時,行數(shù)與每一間隔的值無法選擇與編輯

序號5:初始默認值為10,可編輯范圍為【0~15】,僅可編輯為整數(shù)

序號6:對齊條開啟狀態(tài)見圖,在圖表編輯頁面滑動所編輯的數(shù)據(jù)對應(yīng)到Y(jié)軸上的數(shù)值(圖中的0、100、200、300等數(shù)值)時停頓一下,左側(cè)提示所對應(yīng)的數(shù)值;滑動編輯的數(shù)值(如323、546等)不在Y軸上時,不顯示左側(cè)的數(shù)值提示

序號7:簡單圖表僅保留圖表主體形狀,如上圖

序號8:初始默認值為100,僅可編輯為整數(shù),每一間隔的值需要在 【0.07*(最大值-最小值)~ (最大值-最小值)】這個范圍內(nèi),考慮到(最大值-最小值)/輸入的間隔值  得到的行數(shù)有可能不是整數(shù)的問題,實際顯示的行數(shù)為(最大值-最小值)/輸入的間隔值四舍五入取整后的行數(shù)

異常提示:

  • 輸入的每一間隔的值不在【0.07*(最大值-最小值)~ (最大值-最小值)】這個范圍內(nèi)時,彈屏【警報 請輸入0.07*(最大值-最小值)到(最大值-最小值)之間的值】,輸入框內(nèi)容回到修改前的值;
  • 輸入的行計數(shù)不在【0~15】范圍內(nèi)時,彈屏【警報 請輸入小于15的值】,輸入框內(nèi)容回到修改前的值;

邊框設(shè)置功能

圖例設(shè)置功能

背景設(shè)置功能

頁面說明:
序號10:主題文字注釋

序號11:四種主題單選,設(shè)計出圖標(biāo)作為按鈕外觀,下方會出現(xiàn)對應(yīng)文字注釋,所選擇的背景按鈕外層加一圈黑色示意

圖表樣式設(shè)置功能

頁面說明:

序號9:柱狀圖/折線圖/面積圖樣式說明如圖

4.5.2 餅圖設(shè)置編輯頁

標(biāo)題設(shè)置功能

頁面說明:

序號1:屏幕左側(cè)頁面點擊或者右滑返回圖表編輯頁

表格設(shè)置功能

頁面說明:

豎向表僅可選擇左對齊或者右對齊,橫向表可選擇左對齊/右對齊/居中。

值設(shè)置功能

背景設(shè)置功能(同4.5.1柱狀圖/折線圖/面積圖)

圖表樣式設(shè)置功能

頁面說明:

餅圖樣式說明如圖

4.5.3 智能剪貼畫設(shè)置編輯頁

圖像搜索功能

頁面說明:

序號1:僅可輸入英文名稱搜索,無編輯內(nèi)容時文本框內(nèi)容為Search,字體淺灰色,輸入內(nèi)容后字體變?yōu)楹谏?

異常提示:

當(dāng)移動端無網(wǎng)絡(luò)時,搜索框下方“在線搜索圖像”更改為“連接中斷”,搜索框點擊無反應(yīng)

標(biāo)題設(shè)置功能

值設(shè)置功能

背景設(shè)置功能(同4.5.1柱狀圖/折線圖/面積圖)

圖表樣式設(shè)置功能

頁面說明:

智能剪貼畫樣式說明如圖

4.6 圖表完成頁

頁面名稱:圖表完成頁

入口:

  • 點擊首頁圖表縮略圖跳轉(zhuǎn)
  • 圖表編輯頁點擊完成按鈕跳轉(zhuǎn)

頁面說明:

序號1:點擊返回首頁

序號2:點擊進入圖表編輯頁面

序號3:點擊導(dǎo)出保存到本地或者分享

五、總結(jié)

以上便是我本次倒推撰寫的Chartistic的產(chǎn)品需求文檔,格式參考倒推“潮汐”APP的產(chǎn)品需求文檔。

這款A(yù)pp是一款很實用的手機應(yīng)用,交互很有特色,因為過于追求操作的簡便,導(dǎo)致功能局限比較大,對于App的未來優(yōu)化方向,筆者認為可以在以下幾個方向嘗試:

  1. 增加“編輯兩組不同指標(biāo)數(shù)據(jù)”的功能,因為在很多場景下是需要將兩組數(shù)據(jù)進行對比的,比如銷售額與成本額的走向?qū)Ρ龋?
  2. 在折線圖與柱狀圖的編輯中可以將數(shù)值編輯為負值,例如毛利率這種類型的數(shù)據(jù)可能會有負值出現(xiàn),而且負值是需要在數(shù)據(jù)可視化圖表中突出表現(xiàn)的數(shù)據(jù)。

這是本人第一次撰寫的產(chǎn)品需求文檔,一定有諸多不足,希望各位前輩不吝賜教,感激不盡!希望可以成為一名產(chǎn)品經(jīng)理,創(chuàng)造出對用戶有價值的產(chǎn)品,不求做改變世界的產(chǎn)品,只求改變自己,改變眼前。

 文章來源:人人都是產(chǎn)品經(jīng)理

學(xué)會這個體系化的設(shè)計思路,讓你做出專業(yè)全面的方案!

資深UI設(shè)計者

大部分交互設(shè)計師接到需求后,就開始分析下競品、然后結(jié)合自己產(chǎn)品和自己的想法,就著手交互原型制作了,在這樣一個設(shè)計流程中,交互設(shè)計師很難有體系化的思考。

有沒有一套體系化的設(shè)計思路,讓交互設(shè)計師做出的方案又專業(yè)、又全面、又經(jīng)得起挑戰(zhàn)和用戶檢驗的設(shè)計方案呢?

本文是我梳理的一套體系化設(shè)計流程與思路,希望可以幫到大家。體系化設(shè)計思路大綱如下:

  • 拆解目標(biāo)
  • 確定設(shè)計方法
  • 設(shè)計方案過程
  • 方案細化和走查
  • 數(shù)據(jù)跟蹤
  • 后續(xù)迭代

拆解目標(biāo)

作為一個交互設(shè)計師。在我們接到需求之后,首先需要弄清楚的是產(chǎn)生需求的業(yè)務(wù)背景是什么。其次是基于業(yè)務(wù)背景了解產(chǎn)品的目標(biāo)是什么。最后弄清楚產(chǎn)品的用戶人群有哪些,用戶目標(biāo)是哪些。

交互設(shè)計師通過從產(chǎn)品經(jīng)理或者其他需求發(fā)起方那里了解需求生產(chǎn)的業(yè)務(wù)背景,了解為什么要做這個需求。在了解清楚之后,追溯需求最原始本質(zhì)。

在我們實際工作的大部分情況下,大部分產(chǎn)品經(jīng)理不會在需求文檔中將業(yè)務(wù)背景寫清晰,這時候我們交互設(shè)計師就可以將業(yè)務(wù)背景在交互文檔中輸出,并清晰的展示出來。

1. 業(yè)務(wù)背景是什么?

業(yè)務(wù)背景通常是我們?yōu)槭裁匆鲞@個功能。通過做這個功能,對業(yè)務(wù)有什么幫助。通過業(yè)務(wù)背景,我們可以推演出業(yè)務(wù)訴求,并得到對應(yīng)的產(chǎn)品目標(biāo)。

2. 產(chǎn)品目標(biāo)是什么?

產(chǎn)品目標(biāo)是產(chǎn)品能得到什么樣的結(jié)果,對產(chǎn)品來說可以獲得什么樣的好處。所以在交互文檔的設(shè)計中要重點體現(xiàn)出產(chǎn)品目標(biāo)。通過明確產(chǎn)品目標(biāo),可以清晰的指導(dǎo)我們做交互方案。

3. 用戶人群是哪些?

用戶人群主要是通過我們對現(xiàn)有產(chǎn)品的用戶畫像得到,并推算出使用這個需求的用戶人群是哪一類人,通過明確的用戶人群,這樣我們在做設(shè)計過程中,可以很清晰知道這個需求為誰而做。

4. 用戶目標(biāo)是什么?

用戶希望通過使用這個功能達到什么樣的好處或目的。

5. 設(shè)計目標(biāo)是什么?

通過業(yè)務(wù)背景、用戶人群、用戶目標(biāo)和產(chǎn)品目標(biāo)拆解出對應(yīng)的設(shè)計目標(biāo)。

以登錄注冊為例。業(yè)務(wù)背景是目前產(chǎn)品的登錄和注冊的效果不理想。對應(yīng)的用戶人群分為兩類,分別為新用戶的注冊流程和老用戶的登錄流程。用戶目標(biāo)是方便快速的完成登錄注冊流程,越簡單越快越好。產(chǎn)品目標(biāo)是提升登錄注冊的完成率。

設(shè)計目標(biāo)是拆解,如何能提高登錄注冊的完成率。那么設(shè)計師可以拿到登錄注冊的完成流程,看看登錄注冊過程中,哪些步驟轉(zhuǎn)化率低,那么對轉(zhuǎn)化率低的地方進行設(shè)計優(yōu)化。

目標(biāo)拆解就是對頁面進行數(shù)據(jù)提升具體優(yōu)化方案,例如文案問題、視覺布局問題、交互路徑問題等。

確定設(shè)計方法

對于設(shè)計師來說設(shè)計方法有很多種。例如常見的有:目標(biāo)導(dǎo)向、數(shù)據(jù)分析、用戶調(diào)研、設(shè)計走查、場景化設(shè)計、用戶體驗地圖、競品分析等。

在做設(shè)計方案過程中,一般不會將上述的方法全部用到,更多的是使用其中的一種或者幾種混合使用。

根據(jù)具體的需求選擇適合的方法。例如在做登錄注冊這個優(yōu)化流程方案過程中,可以通過數(shù)據(jù)分析找到轉(zhuǎn)化率低和設(shè)計走查思考如何提升數(shù)據(jù),就可以完成設(shè)計目標(biāo)。

設(shè)計方案過程

1. 不同場景梳理

我們需要以場景的思維做場景分析,通過場景分析就可以清晰地描述這些場景,從而確定用戶的需求,并在這基礎(chǔ)上用交互方案滿足需求。

舉個栗子,產(chǎn)品提出一個需求:應(yīng)用添加「商品列表按照價格從低到高排序」的功能,這還是老思維,是在「定義我們的應(yīng)用」;

而如果從場景的角度來思考,用戶搜索某種商品,在列表頁會列出一長串商品,而用戶此時只想快速找到符合他的要求的那一個;而有些用戶在挑選的時候,會需要買價格便宜的,此時排序功能就是用戶的需求。

這樣從場景來理解,會更清楚地理解需求發(fā)生的環(huán)境,便于做出好設(shè)計。

比如,順著排序的場景,可以進一步想:有這樣需求的用戶在我們的應(yīng)用里多嗎?如果多,那么意味著用戶經(jīng)常需要進行排序的操作,所以在設(shè)計的時候,可以把排序的入口放的明顯一點,好操作一點,方便用戶輕松地進行排序。

對于使用滴滴快車的用戶,整個流程包含三個階段,分別為上車前,坐車中和下車后。每個階段都存在多種用戶使用場景。

2. 不同角色用戶

有時候需要考慮不同角色的用戶,例如后臺系統(tǒng),需要同時考慮普通用戶、管理員角色和超級管理員。

三個不同角色的使用權(quán)限也是完全不同的。權(quán)限:普通用戶 < 管理員角色 <超級管理員。三種角色的主操作流程也是不一樣的,在設(shè)計過程中需要差異化設(shè)計。

3. 設(shè)計不同流程

明確設(shè)計目標(biāo)、設(shè)計方法確定、弄清楚不同場景。接下來就是設(shè)計不同的流程。

一般先設(shè)計功能入口流程,接下來就是主流程和支線流程。最后才設(shè)計異常流程。

4. 方案細化和走查

在涉及到異常場景,且可以全局性復(fù)用的情況,則只需要全局性組件說明即可,不用每個流程都展示其異常場景組件或者頁面。

全局組件指的是整個產(chǎn)品通用的組件,例如全局?jǐn)嗑W(wǎng),操作成功、操作失敗、加載、空數(shù)據(jù)界面,404 等

全局?jǐn)嗑W(wǎng):一般是在首頁使用 tips 提示。用戶在其他界面點擊操作時,也會出現(xiàn) toast 反饋提示用戶。也有一些 app 在用戶進入后出現(xiàn)對話框提示用戶網(wǎng)絡(luò)異常。相對于對話框,使用 tips 對用戶的干擾度更小。

操作成功:一般操作成功都是根據(jù)具體的使用場景出現(xiàn)對應(yīng)的提示。

操作失?。寒惓G闆r導(dǎo)致操作失敗,這時需要統(tǒng)一的提示,通常使用 toast,也有一些使用對話框強提示用戶。

加載:涉及到全局加載和局部加載,全局加載在設(shè)計中要統(tǒng)一說明,例如上一個界面點擊進入下一個界面,使用的全局加載就需要說明。如果是一些小場景的加載,那么需要特殊說明。例如上拉加載,下拉加載,局部小區(qū)域加載等。

空數(shù)據(jù)類型一共有三類:

  • 初始狀態(tài)的定義:初始化狀態(tài),沒有任何內(nèi)容,需要用戶進行某種操作才能產(chǎn)生內(nèi)容的界面。
  • 清空狀態(tài)的定義:通過刪除或其他用戶操作,清空當(dāng)前的頁面內(nèi)容,產(chǎn)生了空界面,這時候需要有明確的提示,且告知用戶該如何處理。
  • 出錯狀態(tài)的定義:由于網(wǎng)絡(luò)、服務(wù)器或者沒有找他其他結(jié)果等原因?qū)е聼o法加載內(nèi)容,產(chǎn)生了空界面,這時候需要有明確的提示,且告知用戶該如何處理。用戶操作反饋的無結(jié)果界面也可以用這樣的思路來設(shè)計。

數(shù)據(jù)跟蹤

通過核心指標(biāo)判斷設(shè)計方案是否符合預(yù)期,以此驗證設(shè)計方案是否成功,并為后續(xù)產(chǎn)品的迭代優(yōu)化做依據(jù)。

1. 關(guān)注設(shè)計的核心指標(biāo)

設(shè)計過程中,要關(guān)注設(shè)計的核心指標(biāo),針對于核心指標(biāo),進行針對性的設(shè)計。

如果改版的最重要(核心)的指標(biāo)是任務(wù)流程完成率,先查看用戶操作流失率,然后分析找出流失原因,給出對應(yīng)的優(yōu)化方案。等到優(yōu)化方案的產(chǎn)品版本上線后,對比完成率數(shù)據(jù)變化。

如果改版的最重要(核心)指標(biāo)是人均觀看次數(shù),則要思考可通過哪些設(shè)計策略可提升產(chǎn)品的人均播放次數(shù)。

舉個例子,新浪微博,以前版本用戶看完視頻后,視頻會有重播按鈕和推薦視頻,用戶只有進行下一步點擊才能播放下一個視頻。

改版后看完視頻會自動切換到下一個視頻。這樣的設(shè)計策略雖然綁架了用戶的行為,用戶從一個主動接收者,變成了一個被動接收者,但是這種策略能有效的提升人均播放次數(shù)。

2. 核心指標(biāo)帶來的價值/收益

當(dāng)驗證了核心指標(biāo)往好的方向發(fā)展,這時候,就需要總結(jié)核心指標(biāo)帶來的價值和收益,這樣的話設(shè)計價值才可以直接被量化。

舉個例子:一個 banner 的點擊率達到 3% 的時候,每天 GMV 約 200 萬,當(dāng)重新設(shè)計了這個 banner,同時其他條件保持不變,點擊率提升到了 6%,這時候通過數(shù)據(jù)查看每天的 GMV 是多少,如果達到了 400 萬,那么這增加的 200 萬的 GMV 則是通過設(shè)計優(yōu)化所帶來的。

后續(xù)迭代

設(shè)計師在交付稿件后,容易松懈,以為項目告一段落,就疏于后續(xù)的跟進工作。其實后續(xù)的跟進也很重要。產(chǎn)品測試版上線后,交互設(shè)計師應(yīng)該跟進后續(xù)的走查和設(shè)計問題的反饋。

通過數(shù)據(jù)分析,確定上線的方案有哪些問題需要優(yōu)化,建立需求池方便后續(xù)跟進優(yōu)化,不斷完善產(chǎn)品設(shè)計。

文章來源:優(yōu)設(shè)

減少認知過載獲得更好的用戶體驗

ui設(shè)計分享達人

好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單,但實際上設(shè)計師已經(jīng)做出了非常多的設(shè)計思考。用戶越少的去思考界面,用戶就越能專注他們要完成的目標(biāo)。在瀏覽頁面時,用戶的注意力不應(yīng)該停留在界面和設(shè)計上,他們更應(yīng)該關(guān)注的是如何達成他們的目的。所以作為設(shè)計師的首要工作就是通過事先清除障礙,為用戶提供直達目標(biāo)的途徑。


“通常,飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態(tài)是非常困難的。與其強迫人們從他們的主任務(wù)上轉(zhuǎn)移注意力,不如直接帶他們?nèi)ニ麄兿肴サ牡胤??!?

——Luke Wroblewski,谷歌產(chǎn)品總監(jiān)


換個思路來看。復(fù)雜和混亂的界面會迫使用戶去尋找解決問題的方法,而通常情況下,這些方法并不是一目了然的。用戶會因為過多的選項、界面、導(dǎo)航等感到困惑,用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓,也足以讓用戶離開。

這種過度的思考就被稱為認知過載,在這篇文章里,我們將為你解釋如何避免認知過載。首先,我們需要明白我們大腦中存在過載風(fēng)險的原因。

Image title

認知超負荷的科學(xué)根源
認知過載是指工作記憶中腦力處理的信息總量過多。當(dāng)你的工作記憶接收到的信息超出其可以輕松處理的信息時,就會發(fā)生認知過載,從而產(chǎn)生挫敗感。
但這究竟意味著什么?工作記憶到底是什么?針對這些我們又應(yīng)該怎樣進行設(shè)計呢?那就讓我們先來了解一下認知負荷理論的起源吧。


JOHN SWELLER和認知負荷理論
雖然對認知的研究可以追溯到幾個世紀(jì),但直到20世紀(jì)80年代,澳大利亞教育心理學(xué)家約翰·瑞勒才將這項研究應(yīng)用于教學(xué)設(shè)計當(dāng)中。Sweller試圖為每一種類型的學(xué)習(xí)者找出最適合他們的學(xué)習(xí)方法,讓他們可以記住他們學(xué)到的所有知識。換句話說,怎樣的課程設(shè)計才是最佳的呢?
Sweller在1988年出版了“ 認知負荷理論,學(xué)習(xí)難度和教學(xué)設(shè)計 ”,這使他的研究工作達到新的高峰,于1994年重新修改并重新發(fā)表。他的研究中運用了數(shù)據(jù)組織結(jié)構(gòu)中的圖表數(shù)據(jù)庫,講述了有效和無效的教學(xué)方法,而他對于工作記憶負荷極限的研究結(jié)果才是設(shè)計師們找到的最有用內(nèi)容。
Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學(xué)家和語言學(xué)家,他在20世紀(jì)50年代測試出短期記憶的極限。Miller的研究在于數(shù)字化設(shè)計,尤其是分塊技術(shù)方面,這將在后面討論。另外,Miller還創(chuàng)作了論文“ The Magical Number Seven, Plus orMinus Two“,這個理論促使許多設(shè)計師將菜單項的數(shù)量限制在5和9之間。
雖然這些理論最初是針對教育領(lǐng)域的,但它們同樣適用于用戶體驗(UX)設(shè)計。


工作記憶
如果你每次打開冰箱,都必須回答一個像謎語一樣的問題,“什么東西小的時候四只腳走路,長大了以后兩只腳,而老了以后有三只腳?”這是一個老段子。但是,根據(jù)認知負荷理論,使用這種讓人無奈的用戶體驗設(shè)計會讓用戶產(chǎn)生挫敗感。

Image title

要理解認知負荷理論,你必須要了解什么是工作記憶,大腦在短時間內(nèi)用于完成任務(wù)的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶,并在需要時從長期記憶中抽取。通俗一點說,工作記憶相當(dāng)于計算機內(nèi)存,而長期記憶則相當(dāng)于硬盤驅(qū)動器。
工作記憶和短期記憶通??梢曰Q使用,但它們略有不同。工作記憶是處理信息的過程,而短期記憶更像是一個信息的便簽本,它雖然重要,但卻沒有長期記憶重要。
讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候,你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思,才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接,因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時,你的短期記憶會記住你在文章中的位置,這樣當(dāng)你從外部頁面返回時你不會迷失,但到了第二天早上,該位置就會被遺忘掉。

Image title

設(shè)計中的應(yīng)用
Steve Krug(史蒂夫·克魯格)是一位很有影響力的作家,他在網(wǎng)頁設(shè)計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設(shè)計師認為是有巨大影響力的著作。
書中記錄了許多寶貴的經(jīng)驗,下面就列舉一些的:
1、每一個頁面都要清晰明了。
2、用戶傾向于“滿意” - 也就是說,采取一個最簡單的解決方案來解決他們的問題,而不是最好的解決方案。此外,作為習(xí)慣的生物,用戶將一遍又一遍地使用相同的方法解決問題,而不會刻意尋找一個更好的選擇。
3、當(dāng)新用戶可以熟練使用該系統(tǒng)來實現(xiàn)他們的目標(biāo)時,系統(tǒng)的可用性就足夠了。
4、用戶使用網(wǎng)絡(luò)的絕大部分是想要節(jié)省時間。因此,用戶的行為通常會像鯊魚一樣“保持移動,否則就會死亡”。
5、后退按鈕是Web瀏覽器最常用的功能。
6、屏幕上顯示的主頁按鈕即使從來不被用戶使用,但也能讓用戶感到放心。
總之,用戶在瀏覽網(wǎng)站過程中哪怕是一瞬間的思考,也會對他們的工作記憶造成負擔(dān)。例如 “這個可以點擊嗎?“首頁按鈕在哪兒?”和“我怎么保存?”等等問題,都會不同程度破壞用戶體驗。


認知超負荷最常見的原因
許多設(shè)計元素都有可能對用戶的大腦造成超負荷,外界環(huán)境中會有更多的因素它們超出了設(shè)計師的控制范圍。例如:一個用戶瀏覽網(wǎng)站的同時會擔(dān)心第二天的工作報告,或者被窗戶外裝修的噪音所打擾,此時,無論你的網(wǎng)站設(shè)計多么簡單,這些都會耗盡他們的工作記憶。
我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關(guān)注的用戶更能專注于你的網(wǎng)站。不經(jīng)常上網(wǎng)的用戶往往比經(jīng)驗豐富的網(wǎng)絡(luò)用戶思考的更多。
雖然我們無法量化所有的認知過載,但我們可以盡量的去避免他的產(chǎn)生,下面,我們對網(wǎng)頁設(shè)計中最常見的類型以及避免它們的最佳方法進行了分類說明。
1.不必要的操作
用戶的每一步操作都會增加他們的認知負擔(dān)。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標(biāo)上,所以多余的操作將迫使用戶投入更多的精力,這樣就需要更多的工作記憶才能完成任務(wù),所以,那些不必要的操作步驟很考驗用戶的耐心。
速度和節(jié)奏是讓認知負荷最小化的基本因素。用戶希望以輕快,目的性很強的步驟來完成任務(wù),所以應(yīng)該提前消除一切延遲。
Image title

用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網(wǎng)站,但Touch of Modern卻要求用戶在使用之前必須進行注冊!這個強制而又多余的行為將會嚇跑很多的潛在用戶。
解決方案
下面這個方法,可以幫助我們找到不必要的操作有哪些:列出用戶要完成任務(wù)必須要去做的步驟。例如發(fā)送電子郵件:
1、點擊電子郵件圖標(biāo)。
2、點擊“發(fā)送到”輸入框。
3、輸入電子郵件地址。
4、點擊“主題”輸入框。
5、等等....
現(xiàn)在,重新審視列表并且找出可刪減的操作步驟,想到什么了嗎?你可以通過將光標(biāo)一開始就自動定位在“發(fā)送到”字段就可以刪除步驟2.這將減少用戶的操作,雖然很微小,但你消除的每一步對于用戶來說都是友好的。

Image title

我們來看看谷歌的主頁。光標(biāo)一開始就在搜索輸入框當(dāng)中,因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗,所以不要忽視它們。
2.過度刺激
雜亂無章的頁面會分散用戶的注意力,使用戶無法專注他們想要完成的目標(biāo)。就像有好幾個人同時與你交談時你會很難集中注意力,當(dāng)頁面上太多的圖片、動畫、圖標(biāo)、廣告、文本類型和鮮艷的顏色奪取你的注意時,就會很難集中注意力。
記住,每個人的工作記憶在完成目標(biāo)的過程中,會因為外界的刺激對每一步工作重新排序。每一次分心,尤其是視覺上的強烈刺激,都需要消耗用戶的一部分注意力。

Image title

LINGsCARS就是個極端的例子,你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上,即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
解決方法
首先,減少一切不必要的元素。僅保留必要的內(nèi)容通常是最佳的選擇,減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網(wǎng)站,而不是視覺上復(fù)雜的網(wǎng)站。
你還可以進行內(nèi)容區(qū)分以達到平衡的效果。太多相同的內(nèi)容(比如文字或圖像)會讓用戶感到厭煩。所以,視覺內(nèi)容要進行合理的組合,圖像、視頻、信息圖表等,能夠使頁面和諧,并便于用戶理解。
影視網(wǎng)站IMDb本可以在很大程度上輕松地只依靠圖片進行排版,但它反而運用同量的文字內(nèi)容來平衡網(wǎng)站頁面。

Image title


在抽取出一個頁面上必須要展示的元素之后,你應(yīng)該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解,也就是說,用一種方式,盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適,而這樣的結(jié)構(gòu)也能讓界面交互更容易。
下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單,右中是一個有特色的凍酸奶交易文本描述,插在文本中間的照片和色塊的使用,分分鐘創(chuàng)造出一個讓人喜愛的沙漏結(jié)構(gòu)。
下面來看看Groupon是如何將它的垂直菜單(中間偏左)和描述凍酸奶的文字(中間偏右)進行布局的吧。大圖居中被文字包圍著,這樣就打造了一個舒適自然的沙漏形狀。

Image title

對稱不僅僅是在屏幕的兩側(cè)應(yīng)用相同的布局,它是視覺重心和視覺方向的平衡。通過這種方式,非對稱頁面也能看起來很有組織性,如下圖的OTHR所示。

Image title

將你的頁面內(nèi)容精減到只包含簡單的和非競爭性的元素,這只是完成了預(yù)防過度刺激工作的一半。。不要忘記要以簡單的布局呈現(xiàn)這些元素。
3、太多選項(??硕桑?/strong>
這有點自相矛盾:用戶需要更多的選擇,但是往往太多的選擇會使他們的大腦超負荷。


席克定律(選擇困難癥)為我們揭示出了一種現(xiàn)象:用戶擁有的選擇越多,他們做出決定的時間就越長。


作為設(shè)計師要去理解庫克定律,可以把每個選項看作是明亮的閃光燈,如下所示,太多的閃光燈會過度刺激用戶。

Image title

甚至像Rakuten這樣的知名網(wǎng)站也會犯類似的錯誤,因為他們沒有真正的理解這個設(shè)計原則。給用戶需要的而不是給他們認為他們需要的。
解決方案
假如你已經(jīng)解決了不必要的和多余的選項,你可以將他們分別放入不同的組進行分類,你可以在百貨商店的網(wǎng)站上看到很多例子,這些網(wǎng)站擁有廣泛的產(chǎn)品選擇。
它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單,抽屜和拉出其中的一種方式隱藏一些選項,那么你將獲得兩全其美的效果,這些超級菜單雖然為用戶提供了許多選項,但一定程度上不會給用戶帶來很大的負擔(dān)。

Image title

但是,隱藏式的導(dǎo)航欄不利于發(fā)現(xiàn),因此電子商務(wù)和新聞等行業(yè)的設(shè)計人員應(yīng)該注意。你可以通過放置其他類似產(chǎn)品的鏈接使缺點最小化(比方說亞馬遜的“相關(guān)購買”)從而最大限度地減少隱藏菜單的缺點?;蛘吣憧梢詺w納導(dǎo)航菜單的類別,將它們精簡為單行導(dǎo)航(如Apple和CNN那樣)。

Image title

你還需要注意應(yīng)該如何組織整個網(wǎng)站的導(dǎo)航。許多與庫克定律有關(guān)的問題可以通過管理信息架構(gòu)(IA)來處理,我們將在下面的“難以查找的頁面和功能”部分中討論。
4.太多內(nèi)容
就像過度刺激和選項過多的問題一樣,提供過多的內(nèi)容會將用戶的工作記憶拉向不同的方向。
顯然,你希望展現(xiàn)的只是重要的內(nèi)容,但對于一些網(wǎng)站來說,一切都是重要的,如果你的網(wǎng)站也有非常多的內(nèi)容,為了避免讓用戶產(chǎn)生困惑,應(yīng)該對內(nèi)容信息進行和里的組織規(guī)劃。

Image title

Arngren的問題并不是它展示了很多的產(chǎn)品,而是它同時展示了太多的產(chǎn)品。在組織結(jié)構(gòu)上的調(diào)整將會給網(wǎng)站帶來更好的體驗。
解決方案
如上所述,George Miller的解決策略是“分塊”,將需要展示的大量內(nèi)容以可管理的方式組合起來,以便于記憶,電話號碼分為國家代碼,區(qū)號,一組三位數(shù)和兩組四位數(shù)字便于記憶,而一連串的11個數(shù)字會很難被記住。
你想在商店主頁上放大量產(chǎn)品的圖片嗎?比起將它們?nèi)苛_列出來,不如通過他們的類型將他們分組羅列。Etsy通過根據(jù)不同的店鋪將產(chǎn)品進行分組展示。

Image title

還有文本組塊,文本組塊包括簡短的自然段,合理利用標(biāo)題和副標(biāo)題以及足夠的留白。
對于需要大量數(shù)據(jù)的長表單字段,可以嘗試采用多步驟表單。長表單可能會令人生畏,有時會導(dǎo)致用戶流失。你可以將表單的信息分在不同的頁面里,減少信息過量給用戶帶來的影響。記得一定要有一個進度標(biāo)記來讓用戶知道還剩下多少頁。(可以總結(jié)為復(fù)雜的頁面簡單化)

Image title

購買機票總是涉及填寫大量的信息,其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗:選擇航班,填寫乘客信息,輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔(dān),也有可能會放棄購買。
5.模棱兩可的界面
認知超負荷的罪魁禍?zhǔn)紫染褪怯脩艚缑婊靵y。永遠不要讓用戶花費大量的時間來弄清楚他們?nèi)绾尾拍芡瓿上胍哪繕?biāo),以及花費時間來弄清楚圖標(biāo)的含義是什么。

Image title

并非所有用戶都是經(jīng)驗豐富的,從而可以理解SpeedCrunch這種含義模糊的圖標(biāo)。即使他們能夠識別代表Windows系統(tǒng)和Mac OS X系統(tǒng)的符號,那么位于右下角的那兩個圖標(biāo)也會讓用戶迷茫。
解決方案
使用用戶已經(jīng)熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作,即便是在以前從未使用過的網(wǎng)站上也是這樣。如果你覺得沒有新意,可以融合品牌特征巧妙的結(jié)合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標(biāo),但同時也賦予了他們品牌獨有的橙色。

Image title

標(biāo)準(zhǔn)標(biāo)簽(如“聯(lián)系人”和“提交”)的按鈕比非傳統(tǒng)標(biāo)簽(如“地址”或“開始”)更容易識別。通常已知的標(biāo)簽可以提高用戶的瀏覽體驗,而不常見的標(biāo)簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
另外,你如果真的需要一個從未見過的圖標(biāo)該怎么辦呢?如果這樣,可以運用現(xiàn)實生活中的場景展示來讓圖標(biāo)進行自我解釋,這種做法是連接現(xiàn)實和虛擬的橋梁。例如:早期的互聯(lián)網(wǎng)先驅(qū)選擇了一個信封來代表電子郵件,因為信封是郵件系統(tǒng)的明顯標(biāo)志。
此外,要避免含義模糊的圖標(biāo),特別是可能還會被誤認為是其他含義的圖標(biāo),就像下列Issuu的圖標(biāo),有些是被人熟知的,但有一些卻不是。如果用戶必須通過點擊這個圖標(biāo)來發(fā)現(xiàn)它的功能,這就會中斷他們的操作進程。

Image title

任何一個表意不清的圖標(biāo)都應(yīng)該附帶說明,告訴用戶怎樣操作。新的并且不常見的用戶界面,就需要更多的分步教程。例如,Slack就給出了一個完整的視頻引導(dǎo)來說明界面的操作流程。

Image title

6.難以查找的頁面和功能
即使用戶已經(jīng)擁有他們所需要的一切,但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素,導(dǎo)航應(yīng)該放在明顯的地方,給用戶信心去任意瀏覽網(wǎng)站而不會迷失。

Image title

如果你覺得漢堡包圖標(biāo)不好,那可以在看看Mojo Yogurt,它會要求你將鼠標(biāo)懸停在左上角的徽標(biāo)上以顯示導(dǎo)航菜單。

Image title

雖然圍繞著Logo有個小的動效,但對于整個屏幕的顏色和動效來說,它并不夠明顯。
解決方案
根據(jù)用戶的偏好理順你的信息架構(gòu)。你的目標(biāo)用戶群可能并不認可你的做法。因此,要想他們學(xué)習(xí)如何組織網(wǎng)站,卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。

Image title

如果你還希望通過組合頁面和菜單項來消除多余的頁面。設(shè)計工作室Waaark通過將其工作室的簡介,團隊成員簡介和聯(lián)系信息這三個頁面合并到一個頁面來簡化他們的導(dǎo)航。

Image title

如果某些功能或特征比其他功能或特征更重要,可以運用視覺手段來吸引他們的注意,增加大小,添加動畫以及使用對比色以此來吸引用戶的眼球。

Image title

PayPal期望有更多的老用戶而不是新用戶,并通過設(shè)置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
7.內(nèi)部不一致
假設(shè)網(wǎng)站的主頁使用標(biāo)準(zhǔn)的藍色和帶下劃線的文本來表示鏈接,但另一個頁面僅使用藍色而沒有下劃線。當(dāng)用戶瀏覽其他頁面時就會停下來去想,“它沒有下劃線,這還是個鏈接么?”他們甚至可能不會再去關(guān)心鏈接,而會被其他頁面的不統(tǒng)一分散注意力從而影響整體的用戶體驗。
要記住,最好的用戶體驗是不會被用戶所察覺的,而像上面這樣通常都會被注意到。
總結(jié)
1、認知過載是影響工作記憶的因素。當(dāng)過多的信息阻礙決策和整體經(jīng)驗時,就會發(fā)生認知過載。
2、使用不同的內(nèi)容類型和結(jié)構(gòu)化頁面組合,可以避免視覺混亂。
3、隱藏式菜單可以幫助用戶一次管理可用選項的數(shù)量,但降低了可發(fā)現(xiàn)性。
4、“分塊”和“步驟”等的方式可以防止認知過載。
5、UI元素和圖標(biāo)應(yīng)該基于用戶現(xiàn)有的認知上,這樣他們就不需要過多的思考,新的獨特的功能要加上解釋說明。
6、圍繞用戶的實際思考方式構(gòu)建你的信息架構(gòu)??ㄆ诸惖瓤捎眯詼y試可以為你的目標(biāo)群體揭示最直觀的導(dǎo)航方案。
7、視覺和功能的不一致,以及打字錯誤和語法錯誤,都會分散用戶的注意力。
8、盡可能減少冗余。另外,請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。


文章來源:UI中國

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

關(guān)于「撤銷」設(shè)計

資深UI設(shè)計者

關(guān)于「撤銷」有很多設(shè)計細節(jié)可以講,所以我花了兩周時間,將其濃縮成 3000 字,幫助各位產(chǎn)品設(shè)計師更好理解撤銷的設(shè)計細節(jié)。

撤銷的目的是幫助用戶取消當(dāng)前的操作行為。

撤銷可以對用戶使用產(chǎn)品起到一種安全保障作用,讓用戶在界面中自由地探索而無需擔(dān)心操作所可能導(dǎo)致的嚴(yán)重后果。

或者用戶刪除了一個視頻,撤銷可以幫助用戶恢復(fù)他所刪除的內(nèi)容;以及用戶進行了一步操作,覺得不太好,就通過撤銷來回退到上一步操作。

與之對應(yīng)的叫「重做」,就是當(dāng)用戶撤銷了當(dāng)前的操作,但是想了想,還是行進到剛才已經(jīng)操作的步驟好了。既給了用戶安全感,還給了用戶反悔的余地。

類似于下象棋的時候,你覺得這一步走得不好,所以悔棋了,雖然對家沒說什么,但是你心里又覺得過意不去,畢竟落子無悔真君子,所以你又把棋子放回去了(真是不怎么恰當(dāng)?shù)谋扔髂兀?

這樣做的目的是提升用戶使用產(chǎn)品的信心,增強對產(chǎn)品的控制感;鼓勵用戶放心地探索,快速建立起自己熟悉的操作路徑。

所以關(guān)于撤銷,我們可以從下面幾點來聊聊:

  • 依次序撤銷
  • 選擇性撤銷
  • 撤銷在界面中的運用
  • 與撤銷沖突的元素

依次序撤銷

它的意思是,依次撤銷之前的操作。

在尼爾森可用性原則里,就有一條類似的原則存在,即 User control and freedom(允許用戶自由操控)。

很多人把這條原則解讀為「撤銷原則」,本質(zhì)上是沒什么問題的,因為撤銷確實需要讓用戶自由操控。但是早期的撤銷,并不「自由」,而僅僅只是讓用戶在一定范圍內(nèi)「可操控」。

比如早期在一些產(chǎn)品里,執(zhí)行多步操作,但往往只能撤銷一次,要想繼續(xù)撤銷是不被允許的,所以它的操控自由度就很低。那時候如果把這條原則解讀為「撤銷原則」,顯然是不合理的。

于是,后來逐漸延伸出多次撤銷的功能。

我記得最早使用 PS 的時候,在 PS 里面就有關(guān)于撤銷次數(shù)的范圍設(shè)定,但是我忘了具體范圍的上限與下限是多少了。

使用的方式是,比如我設(shè)置參數(shù)為 10,那么之后我的撤銷也只能操作 10 次,要想繼續(xù)撤銷,就會告知無法繼續(xù)了。

現(xiàn)在的很多工具產(chǎn)品應(yīng)該是沒有這些限制了,比如 Sketch,Word 都是可以無限次撤銷直至最初始狀態(tài)或剛打開文件的狀態(tài)。

相對早期撤銷的使用邏輯,后來可多次撤銷的操作在自由度上,確實是好了那么一些。

它就是在「單次撤銷」的基礎(chǔ)上,給了用戶「多次撤銷」的機會,并讓用戶回到自己滿意的位置。

但是這里的撤銷,它還不夠自由,因為它是「依次撤銷」—— 每一步撤銷用戶都得經(jīng)歷。

選擇性撤銷

當(dāng)撤銷隨著用戶場景的變化而進化之后,才真正具備了比較自由的操控方式。

讓撤銷具備「選擇屬性」,必須與另一個元素做一個結(jié)合,那就是「歷史記錄」。

繼續(xù)拿 PS 舉例。

大家看到上面這張圖,當(dāng)你在 PS 的畫板里完成了一系列操作之后,發(fā)現(xiàn)后面有一些東西做得不是很好,想回去重做,但是依次撤銷又覺得不好把控,于是就通過操作歷史,來選擇具體回退到哪一步。

相比于依次序撤銷,選擇性撤銷的自由度更高,也更符合其對尼爾森可用性第三條原則的解讀。

或者再通俗一點的例子,瀏覽器。

假設(shè)這時候你打開了 5 個網(wǎng)頁,關(guān)掉了其中 3 個,但是突然想起第 1 個關(guān)掉的網(wǎng)頁還有值得收藏的內(nèi)容,于是依次撤銷 3 次,才打開第 1 個關(guān)掉的頁面。

而現(xiàn)在有網(wǎng)頁歷史記錄,就可以直接幫你打開之前關(guān)閉掉的所有網(wǎng)頁中的其中一個。

解決了用戶每一步都要經(jīng)歷的問題。

當(dāng)「撤銷」與「歷史記錄」結(jié)合之后,「選擇性撤銷」的出現(xiàn)還能解決掉「依次序撤銷」的一個關(guān)鍵問題:撤銷重做之后,無法復(fù)原。

通俗點講,就是當(dāng)用戶撤銷到之前的操作,進行了新的操作行為,那么原來舊的那條線路就被廢棄了??磮D:

當(dāng)用戶操作到第 5 步,然后撤銷至第 3 步,再執(zhí)行一次新的操作,那么步驟 4 與步驟 5 就會被廢棄。

大家知道很多設(shè)計師都會做版本記錄,因為 PS 的歷史記錄雖然在撤銷操作上方便了很多,但無法復(fù)原之前的操作邏輯依舊不能滿足一些設(shè)計師的訴求。

畢竟不廢棄的話,撤銷操作的邏輯就會很復(fù)雜;且通?!高x擇性撤銷」伴隨解釋,說明用戶清楚知道自己當(dāng)前行為會造成何種后果。但它并不能解決用戶操作過程中實際存在的這類問題。

而「選擇性撤銷」的「版本記錄」可以解決這個問題,來看下面這個例子。

結(jié)合歷史/版本記錄,比如用 Notion 或石墨寫了一篇文章,它們都會有版本記錄,過程中會根據(jù)時間維度與內(nèi)容變更維度來判斷是否進行保存,那么當(dāng)用戶想回滾到之前的那段內(nèi)容,只要對這些版本進行點擊查看,然后選擇具體撤回到哪一步即可。

比如我今天(2019.11.05)早上花了半小時最后對文章做了一次整理,添加了圖片,它就會記錄其中的操作變化,且可進行選擇。這里無論如何撤至哪一步,其它內(nèi)容都會有留存,不會消失。

也許這已經(jīng)不是通常意義上的撤銷,但它確實是撤銷的升級版。

這樣看起來是不是自由操控度要高很多呢?

到這里,我只是講了「撤銷」的特性,下面來聊下它在界面設(shè)計中是如何應(yīng)用的。

撤銷在界面中的運用

我們現(xiàn)在在很多產(chǎn)品里都能看到撤銷,在網(wǎng)頁里與移動 App 中,它的使用形式雖然多樣,但本質(zhì)上并沒什么區(qū)別。

大多就是單次撤銷,因為用不到多次撤銷,多次撤銷更多是在工具里被使用。

比如油管的撤銷使用:

當(dāng)用戶對一個視頻進行「不感興趣」的操作時,視頻內(nèi)容會變成右邊這樣,可撤銷。這個內(nèi)容會一直存在直到用戶刷新頁面時才會消失。

類似的還有淘寶網(wǎng)頁端的購物車,當(dāng)刪除添加的任一商品后,其也會在附近位置出現(xiàn)可撤銷的操作。

在網(wǎng)頁產(chǎn)品中,撤銷的運用大多是這樣的。

我們再來看移動端產(chǎn)品對于撤銷的應(yīng)用。

在 iOS 中比較常見的是微信的搖一搖手機撤銷正在鍵入的內(nèi)容:

這類撤銷較為被動,經(jīng)常是在無意間觸發(fā),所以不是我們主要要聊的。

而有一類產(chǎn)品,撤銷會以 Snackbars 的形式出現(xiàn),如圖:

當(dāng)這類郵箱產(chǎn)品,刪除了某封郵件后,在底部就會出現(xiàn)這樣的提示,告知用戶可撤銷上一步行為。

更多的還是工具類產(chǎn)品,比如修圖類產(chǎn)品 Snapseed:

它有單次撤銷,也可以重做,還能多次撤銷,多次撤銷就是點擊「查看修改內(nèi)容」之后,右圖出現(xiàn)的樣子,它會把所有步驟都呈現(xiàn)出來,給予用戶選擇具體撤銷至哪一步。

其實更多的也就是這樣了,但是,為什么呢?為什么在非工具類產(chǎn)品里撤銷很少見呢?難道用戶從來不會誤操作或操作之后反悔?

下面一節(jié)來解答。

與撤銷沖突的元素

先放結(jié)論:當(dāng)某個功能具備撤銷屬性時,切勿再使用二次確認對話框,反之同樣成立。

撤銷與二次確認,是兩種東西,雖然有時候解決的是同一個問題,但是它們的屬性是完全不同的。

舉個例子:

上面這張圖,左邊是在執(zhí)行操作前彈出的確認框,右邊是執(zhí)行操作后彈出的提示框。

二者的區(qū)別很明顯,二次確認的刪除提示框更具警示效果,后者作為提示,較為弱化,且通常是在用戶操作完成后彈出。對于用戶來說,在非工具類產(chǎn)品中,前者更好的抑制了用戶的沖動行為或誤操作行為。后者作為提示類控件,不具備警示效果。

所以它們不應(yīng)該同時出現(xiàn),且它們雖然是解決同一個問題,但是是完全不同的情況。

于是,在大多數(shù)產(chǎn)品中我們很少看到撤銷的使用,因為大部分需嚴(yán)謹(jǐn)?shù)牟僮鞫紩卸未_認,并不嚴(yán)重的操作也就不需要任何提示。即使是上述提到的郵箱刪除,沒有二次確認也是因為它有撤銷作為提示且還有回收站允許用戶檢查確認。

所以,除非是場景與之密切相關(guān)的,比如社交產(chǎn)品內(nèi)容發(fā)送后的撤回功能。

微信早期的撤回,只是撤銷,它并不具備「重做」屬性,現(xiàn)在撤回,內(nèi)容會重新出現(xiàn)在輸入框讓用戶重新編輯。

它們之間的差異是:它并不會產(chǎn)生嚴(yán)重后果,但確實會產(chǎn)生小問題。比如誤操作發(fā)出信息,或發(fā)出后發(fā)現(xiàn)話術(shù)并不嚴(yán)謹(jǐn)。

所以這一段內(nèi)容只是想告訴各位:二次確認操作與撤銷操作是兩種不同的東西,雖然看起來是解決同一個問題,但它們的差異也是非常明顯的。必須謹(jǐn)記。

另外還有個提示:心細的同學(xué)會注意到文章里或其他產(chǎn)品里出現(xiàn)的「撤銷」通常也會寫成「撤消」。在別的領(lǐng)域里這是兩種不同的內(nèi)容,但在產(chǎn)品設(shè)計領(lǐng)域里,目前并沒有對這兩者做明確的區(qū)分,所以暫時不用過于糾結(jié)。

總結(jié)

這篇文章講了很多內(nèi)容,我在這里梳理下:

  • 撤銷分為依次序撤銷與選擇性撤銷;
  • 依次序撤銷有單次撤銷與多次撤銷,以 PS 為例;
  • 選擇性撤銷大多在工具類產(chǎn)品里被使用,它與歷史記錄結(jié)合,解決了依次序多次撤銷部分內(nèi)容被覆蓋的問題;
  • 在非工具類產(chǎn)品里,被使用更多的是單次撤銷,是因為場景限制;
  • 撤銷與二次確認不可同時出現(xiàn),它們看起來是解決同個問題,但之間存在較大差異。

所以當(dāng)你設(shè)計的產(chǎn)品要用到撤銷時,也要注意這些細節(jié)問題。

這就是本篇文章的所有內(nèi)容了。其實這篇文章里包含的內(nèi)容有很多,而且有很多爭議點我都沒放出來,直接一筆帶過給出正確結(jié)論了。寫這種大部頭文章太累,要思考的點很多,需要幫助讀者從多視角排雷,很可能導(dǎo)致初學(xué)者在讀文章過程中出現(xiàn)閱讀吃力的問題。所以之后還是會挑一個點來寫吧。

文章來源:優(yōu)設(shè)

通知系統(tǒng)的設(shè)計規(guī)則全面分析

資深UI設(shè)計者

我們通過門鈴聲兒得知門外有人來訪,也能通過電話鈴聲得知正被人呼叫。短信通知也有著類似的作用,包括各類產(chǎn)品的消息推送。

但不同的是,消息推送的重要性隨著「通知」被濫用而變得不那么重要了。它們變得不像門鈴或電話鈴聲起到的作用性那么大,包括短信現(xiàn)在也大多是垃圾信息。

而且,通知越來越多地通過各種方式去觸達用戶。比如消息未讀的紅點提示,或者顯示消息的數(shù)字統(tǒng)計,以及手機使用過程中的頂部提示與聲音或震動的提醒,等等。

但我們還是無法抑制點擊圖標(biāo)的沖動,這僅僅是因為它具有未讀的計數(shù)或紅點提示,即使我們已經(jīng)知道當(dāng)中的內(nèi)容并不重要。

而我要說的是,當(dāng)通知內(nèi)容變得次要且被濫用之后,它仿佛成了一種違背設(shè)計原則的功能 —— 中斷用戶當(dāng)前行為。因為它打破了用戶與產(chǎn)品之間的層級關(guān)系,破局至產(chǎn)品之外來吸引用戶的注意力,這是一個非常打擾的行為。如果我在看書,突然收到一條并不重要的消息,那我一定會非常反感。

所以,為了不被「紅點」支配,以及不讓通知所打擾,我會把手機里所有產(chǎn)品的消息推送都給關(guān)了。

但是,以上內(nèi)容并不能說明通知的無用論。同樣有許多用戶還是沉迷于通知的使用上,它所控制的是用戶對于某個產(chǎn)品的控制欲,擔(dān)心錯過某條消息,就好像我在豆瓣寫了篇隨筆,就想看別人給我點贊評論的消息,但我又不可能一直盯著,所以通知這時候就起到了一個很好的作用。

以至于對于優(yōu)秀的產(chǎn)品人或設(shè)計師,包括運營來說,利用好通知,就能掌握用戶心理,巧妙的將用戶留在產(chǎn)品中。它們甚至有助于與打算放棄產(chǎn)品的用戶建立聯(lián)系并促進互動。

那么,我們應(yīng)該如何更合理的設(shè)計通知呢?下面我們通過「通知的組成部分」以及「通知的使用類型與規(guī)則」來詳細做一次拆解。

通知的組成部分

關(guān)于通知的簡單定義:它是一種吸引用戶注意的功能模式,讓用戶獲悉新事件的信息動態(tài)。產(chǎn)品將其發(fā)送給用戶并與用戶產(chǎn)生交流。

因此從這個定義中我們可以知道,通知有兩種形式,分別是被動只讀型和操作反饋型。

被動只讀型,是指該信息可讀,但不可進行操作;操作反饋型,是指用戶可對該通知進行操作,如某寶訂單支付成功后的地址信息確認通知。

所以在梳理組件的時候也要注意掉這個差異。

1. 消息中心

這里的消息中心,是一個信息匯總中心,但并不一定是信息來源。意思是,信息來源可能是有很多用戶在你的文章下面點贊了,而這個點贊行為被匯總到了消息中心,再用消息中心指引作者去到文章頁面查看具體詳情。

所以它是一個匯總表。但也有可能它就是信息來源點,比如一些系統(tǒng)通知,告知要升級,因為它沒有其他功能可承載,所以只會在消息中心里出現(xiàn)。

或者類比 iOS 系統(tǒng)的通知中心,如果通知是 App 推送的,那么它會指引用戶進入某個 App;如果通知是系統(tǒng)行為,如勿擾模式,「6:00 前來電和通知將會靜音」這個通知,是只可在通知中心進行操作的。想要更改,就需要手動打開設(shè)置。

2. 通知指示符

它可以是點,也可以是計數(shù)器,只要表明目前消息中心有新的信息就可以。我個人一直覺得這就是讓我們多數(shù)人養(yǎng)成強迫癥的罪魁禍?zhǔn)住?

3. 信息標(biāo)題

它主要是指該信息來自于誰或?qū)儆谑裁醋宇愋?,比如用戶互動點贊消息,評論消息,系統(tǒng)消息等等。用戶可以通過標(biāo)題來獲悉該信息類型,再通過內(nèi)容摘要來判斷內(nèi)容是否重要。

當(dāng)然,這里的摘要如果過長,就需要省略處理,引導(dǎo)用戶進入消息源或消息中心。

4. 推送時間

推送時間是一個看起來簡單,實際上也好像不是很復(fù)雜的邏輯。只要說明該通知的發(fā)送時間即可,但是需要注意的是時間段問題。比如幾分鐘前,幾小時前,幾天前,這里的邏輯是按照時間推進規(guī)則持續(xù)增加來告知用戶該消息的推送時間節(jié)點的。也就是過得越久,時間概念就越大。

5. 通知圖標(biāo)

上面講到消息類型,我們也經(jīng)常會在各類產(chǎn)品中發(fā)現(xiàn)不同通知的類型會匯總在各自的類型下。包括用戶所接收到的信息,通常也會告知用戶該信息屬于什么類型。有時候,標(biāo)題可能會更細,但是用戶通過圖標(biāo)可以判斷該信息屬于什么類型,甚至都不需要仔細查看標(biāo)題與內(nèi)容。

但是,并不是所有產(chǎn)品的信息都可以通過圖標(biāo)來判斷,有時候圖標(biāo)只是一個大方向,如果手機鎖屏,相對于用戶來說,這條通知只是告訴用戶該信息是由什么產(chǎn)品推送,而并不能指向至該產(chǎn)品的什么類型的信息。所以在使用的過程中,同樣需要根據(jù)業(yè)務(wù)的場景,謹(jǐn)慎地選擇圖標(biāo)。

6. 閱讀指示器

它就像是上面提到的紅點,這里指的是進入 App 的消息中心之后,所顯示的內(nèi)容。

7. 操作行為

這里的操作行為分兩種,分別是 App 外與 App 內(nèi),它們之間的操作邏輯是不同的。iOS 系統(tǒng)通知的清除操作,只是在系統(tǒng)的通知中心將該信息清除,進入具體 App 后,這條消息還是會存在。而在 App 內(nèi)刪除該條信息,則該信息才會真正消失。

所以從上面可以看到,通知推送,是有兩大類別的,分別是 App 外與 App 內(nèi),它們之間的邏輯關(guān)系與展示形式會有所差異,需要根據(jù)具體情況進行設(shè)計分析。

8. 小結(jié)

對上面的內(nèi)容進行總結(jié),可以得到這樣一幅畫像:

大部分系統(tǒng)或產(chǎn)品的通知組成,都可以通過此圖概括,唯一不同的是,它們會隨著不同的業(yè)務(wù)而發(fā)生變化。

比如豆瓣的推送消息告知用戶近期有新的電影上映,那么通知來源要么是電影模塊的功能詳情頁,要么是通知中心的系統(tǒng)消息;而通知類型就是內(nèi)容更新;詳情則根據(jù)具體內(nèi)容來組合排列;最后送達至用戶。

而其中的差別就是,如果是通知中心推送的,用戶點擊之后則是進入通知中心列表。如果是具體功能推送的,那么用戶點擊進入的就是具體功能頁面。如下圖所示:

從這里可以看出,通知是有具體模式的。

一旦確定了通知的主要目標(biāo),以及想要解決的問題,包括它們?nèi)绾螌I(yè)務(wù)產(chǎn)生作用以及對用戶形成吸引力,就可以確定通知的具體樣式了。

在這一節(jié)里只要知道通知的組成部分與通知模式如何指引用戶進入 App 即可。后面我來帶大家理一遍邏輯,以及在設(shè)計通知時要注意哪些問題。

通知的使用方法

聊完上面的內(nèi)容之后,我相信大家對通知的組成與使用模式已經(jīng)有了全新的認識,但也僅此而已,我們還是不知道一個優(yōu)秀的通知功能應(yīng)該從哪些方面去提升用戶體驗。這里面所包含的不止是表象,還有內(nèi)在的規(guī)則邏輯。所以從這一節(jié)開始,我們仔細來梳理一遍。

從我們平時使用到的,以及上文提到的,可以大概先梳理出幾類常見的通知類型。

1. 用戶信息類通知

這種類型的通知有很多,比如微信消息發(fā)送,知乎私信,手機短信等等,它們主要由用戶主動生成發(fā)送至其他用戶被動接收,作用就是促進用戶與用戶之間的互動關(guān)系,以提升用戶使用產(chǎn)品的頻率與時長。

這種通知,可給予用戶操作也可不給予操作,不操作就是讀取,并回復(fù);操作就是可對該用戶的信息進行屏蔽、已讀、刪除等設(shè)置。

這是最常見的通知類型,在多數(shù)社交產(chǎn)品與有社交特性的產(chǎn)品里都能看到。

說明

之所以給予用戶信息的操作行為,是因為用戶信息可分為感興趣的與不感興趣的,它主要取決于人。不感興趣的人,頻繁的發(fā)送信息,會影響用戶對產(chǎn)品的好感度,畢竟有很多用戶消息并不是用戶想要接收的,所以在社交產(chǎn)品里,用戶可刪除好友,或拉黑好友;在有社交屬性的產(chǎn)品里,用戶可拉黑賬戶,以達到不被騷擾的訴求。

如果沒有到達刪除好友的程度,也可對該好友的信息進行屏蔽,甚至對該好友信息做已讀而實際上未讀的處理;或者對重要信息做未讀而實際上已讀的處理。

當(dāng)然,用戶還能對群消息做更復(fù)雜的設(shè)置。這就是產(chǎn)品對這類通知的一種優(yōu)化方式。

2. 系統(tǒng)推送類通知

我們經(jīng)常會在手機上收到一種系統(tǒng)類通知,或者在 App 中也會收到類似的系統(tǒng)通知。大多是關(guān)于系統(tǒng)升級,密碼更新等。

這類通知多數(shù)是用戶被動接收,且對于系統(tǒng)與用戶來說是較為重要的。當(dāng)然也有不重要的,比如 App 更新說明的通知,告知用戶新功能有什么變化,或系統(tǒng)更新了什么等等。

對于這類通知,用戶大多無法進行設(shè)置,因為它們比較強制,沒有可以商量的余地,類似于告知用戶:我們有新的消息,比較重要,你來看看,即使你不打算更新或執(zhí)行也來看下。

說明

系統(tǒng)類通知,通常來說較為被動,要么強制用戶執(zhí)行操作,要么就是提醒用戶系統(tǒng)近期做了更新,或者是一些并不重要的信息提示,比如勿擾模式。

強制類系統(tǒng)通知不能頻繁,否則會給用戶造成控制欲反制的副作用。類似于本身用戶使用產(chǎn)品需要對產(chǎn)品享有控制權(quán),現(xiàn)在反而被產(chǎn)品控制了。這是不行的。

3. 通用推送類通知

這類通知就是第一節(jié)中提到的那些,比如點贊/評論,內(nèi)容更新等等,這類通知如果是忠實用戶,那么或許不會反感它的頻率,當(dāng)然還是需要適當(dāng)。但如果是普通用戶,那么造成的影響就是直接關(guān)閉該 App 的所有通知。

我們現(xiàn)在的很多人,之所以開始反感通知的主要原因,就是這類通知所造成的。內(nèi)容不斷更新,隨著時間的推移,每天推送多條對于該用戶來說無用的通知。包括只適合一些符合條件的用戶參與的活動通知也推送給所有人,那么用戶就會逐漸對這類產(chǎn)品的通知失去興趣,造成無法彌補的損失。

即便像某團一樣,經(jīng)常彈出開啟通知的彈框,也依然無法召喚回用戶。這就是很典型的下場。

說明

通用型通知,如果是業(yè)務(wù)很復(fù)雜的產(chǎn)品,就必須建立通知推送的功能模塊,給予用戶進行選擇接受哪類信息的權(quán)力。允許用戶進行相應(yīng)的設(shè)置,如活動類推送可拒絕接收。

在很多產(chǎn)品中都已經(jīng)置入這樣的推送模塊設(shè)置,如下圖。

這類內(nèi)容就是針對于產(chǎn)品的具體業(yè)務(wù)進行細分。

比如興趣精選,私信消息等做好類別劃分。用戶可對自己感興趣的通知做選擇性的推送接收。

另外就是,在相同賬戶的不同設(shè)備之間,推送應(yīng)該同步推送與被處理。不能這邊推送了,那邊沒推送,或者這邊處理了,那邊沒被處理。

4. 智能推送類通知

不知道大家是否有印象,在使用如大眾點評等產(chǎn)品時,只要你切換了城市,產(chǎn)品就會推送通知告知用戶該城市有哪些值得游玩的景點與品嘗的美食。

雖然這類通知還算不上多少智能,但至少在用戶群體中是存在這類訴求的。而這類訴求有時候并不能主動感知,因為用戶可能會想不起來通過哪類產(chǎn)品來查找附近美食。當(dāng)這么一條通知出現(xiàn)的時候,正好解決了用戶的問題,反而提升了用戶對于產(chǎn)品的好感度。

現(xiàn)在很多產(chǎn)品的通知都逐漸智能化,不會像以前那樣,三更半夜發(fā)來一條無關(guān)緊要的通知。而出現(xiàn)這類問題的主要原因還是在于產(chǎn)品、設(shè)計、運營,在這方面沒有下過功夫,只將通知作為一種普通的工具來使用。導(dǎo)致用戶開始排斥通知,將其強制關(guān)閉。之后,就很難再讓用戶開啟了。同理心效應(yīng),當(dāng)做這類功能的時候,可以回想一下自己是如何被其他產(chǎn)品打擾的。

隨著大數(shù)據(jù)的發(fā)展,我相信未來的通知系統(tǒng)會更加全面,且能做到千人千面的模式,不過在此之前,各位產(chǎn)品設(shè)計師,還需要對通知下一番功夫才是。

5. 小結(jié)

我們還可以繼續(xù)舉例說明,但是基本大同小異,所以到這里為止,我再對上面的內(nèi)容做一次總結(jié),梳理出一個好的通知應(yīng)該是如何設(shè)計的。

干擾最小化:通知本身具有強制性和干擾性。它的目的是把用戶的注意力吸引到產(chǎn)品上來,所以要認真思考發(fā)送通知的內(nèi)容、時間、頻率;不要提醒用戶當(dāng)前屏幕上已經(jīng)處于展示狀態(tài)的內(nèi)容;也不要推送與用戶無關(guān)的系統(tǒng)信息。

跨設(shè)備:當(dāng)用戶讀過了某條信息,這條信息應(yīng)該不再做展示。同理,用戶也應(yīng)該能夠在其它更適合接收消息的設(shè)備上找到已讀信息。用戶通知應(yīng)該在所有設(shè)備上進行同步。

允許設(shè)置:允許用戶在「設(shè)置」中禁止或調(diào)整通知的形式。如案例一,通過選擇推送內(nèi)容,來影響接收推送的頻率。案例二,可選消息提醒的形式是紅點+數(shù)字,或僅是紅點。

時效性:良好的通知應(yīng)盡可能實時推送。而不是等這件事情都過去很久了,才推送給用戶知道。

支持匯總:把同類型的通知合并為一條,并顯示信息未讀數(shù)量。也可以考慮一鍵展開通知,顯示信息詳情。

可操作性:把通知和操作結(jié)合在一起,讓用戶不需要打開首頁就能對特定通知進行常規(guī)操作。操作應(yīng)該清晰明了,且僅在未重復(fù)默認操作時提供。同時操作應(yīng)該是有意義、實時、和內(nèi)容對應(yīng)的,并且能讓用戶完成某個任務(wù)。如案例一,可以在不打開郵件的情況下,直接對通知進行管理、查看和清除。案例二中的操作針對的是未讀郵件,可便捷地在通知板面進行回復(fù)、刪除、標(biāo)為已讀或垃圾郵件。

總結(jié)

對本篇文章的拓展總結(jié):

  • 通知具有召喚屬性,但是頻率過多就會變成打擾,所以要注意通知的頻率與內(nèi)容重要性;
  • 設(shè)計師或產(chǎn)品經(jīng)理應(yīng)該將通知的內(nèi)容分類梳理出來,以便維護或新增必要需求可能需要用到的推送信息。
  • 通知一般為兩種類型,一類是推送只讀型,一類是操作反饋型;設(shè)計師需根據(jù)不同類型的通知做好對應(yīng)的設(shè)計,針對具體問題具體分析;
  • 想要利用好「通知」,也需要對業(yè)務(wù)有詳細的了解,再代入本文所列舉的注意點,就可以設(shè)計出一個體驗更佳的通知模式。
  • 通知規(guī)則不會脫離本篇文章的范圍,所以只要詳細研讀,必會有所收獲。

文章來源:站酷

干貨|尼爾森十大可用性原則案例解析

ui設(shè)計分享達人

尼爾森的十大可用性原則,它們被稱為「啟發(fā)式」,<br>被奉為交互設(shè)計師的入門法則。

開篇靈魂拷問:


你認為一個怎樣的產(chǎn)品才算是一個好的產(chǎn)品?

這個問題耳熟嗎?面試的時候是不是有被問到過?
我們經(jīng)常使用的那些產(chǎn)品,哪些是好的產(chǎn)品呢?

當(dāng)我們談?wù)撘粋€ APP 產(chǎn)品時,
作為用戶你最關(guān)心的是什么?
一般都是是這個產(chǎn)品好用嗎?功能復(fù)雜嗎?
而不是這個產(chǎn)品用戶界面顏色好看嗎?
交互的動效酷炫嗎?

互聯(lián)網(wǎng)已經(jīng)深入到每個人的生活當(dāng)中,
時刻影響著我們;
一個好的產(chǎn)品會給我們帶來便捷,
使我們的生活變得簡單而又美好;
也會有一些產(chǎn)品使用時會感到不舒服,
糟糕的產(chǎn)品體驗會讓我們的生活變得復(fù)雜而又煩惱。
所以,決定一個產(chǎn)品好不好用,
能不能長期使用都是用戶體驗直接決定的。
用戶體驗關(guān)注的是在滿足用戶需求的同時帶給用戶美好的感受。

接下來我們來聊一聊「尼爾森十大原則」,
這十大原則是具體而又全面的用戶體驗可行性檢驗方法。

    
尼爾森是誰?
雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機交互博士,他擁有79項美國專利,專利主要涉及讓互聯(lián)網(wǎng)更容易使用的方法。于1995年1月1日發(fā)表了「十大可用性原則」。1995年以來,他通過自己的 Alertbox 郵件列表以及 useit.com 網(wǎng)站,向成千上萬的 Web 設(shè)計師傳授 Web 易用性方面的知識,盡管他的一些觀點可能帶來爭議,至少在 Web 設(shè)計師眼中,他是 Web 易用性領(lǐng)域的頂尖領(lǐng)袖。2006年4月,并被納入美國計算機學(xué)會人機交互學(xué)院,被賦予人機交互實踐的終身成就獎。他還被紐約時報稱為“Web 易用性大師”,被 Internet Magazine 稱為 “易用之王”。
        
尼爾森的十大可用性原則,它們被稱為「啟發(fā)式」,      
    
    
是廣泛的經(jīng)驗法則,而不是特定的可用性指導(dǎo)原則。
雖然是1995年提出來的,
但是至今仍然被奉為交互設(shè)計師的入門法則,
我們不能把它上升為一種標(biāo)準(zhǔn),
而只當(dāng)做一種經(jīng)驗來學(xué)習(xí),
然后跟現(xiàn)實中的設(shè)計結(jié)合來使用。
因為尼老師是從 web 設(shè)計提出的十大可用性原則,
我們要結(jié)合的是目前移動互聯(lián)網(wǎng)的特點,

然后在「尼爾森十大原則」的結(jié)構(gòu)下探討在用戶體驗上達到的目標(biāo)。


尼爾森十大可?用性原則為:

01. 狀態(tài)可見原則 

02. 環(huán)境貼切原則 

03. 撤銷重做原則

04. 一致性原則 

05. 防錯原則

06. 易取原則 

07. 靈活原則 

08. 易掃原則 

09. 容錯原則 

10. 人性化幫助原則


下面我們就針對每一條來單獨分析一下吧~


 ·.  狀態(tài)可見原則 
系統(tǒng)應(yīng)該讓用戶知道發(fā)生了什么,
在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答仭?/span>
不要蒙蔽用戶;
溝通是所有關(guān)系的基礎(chǔ),無論?還是設(shè)備。

示例:在淘寶里,我下拉時他告訴我「松開刷新」,也就是現(xiàn)在還沒有開始刷新;我松開后狀態(tài)變更成「刷新中」,表示現(xiàn)在正在刷新。
這樣的設(shè)計告訴我們,界面現(xiàn)在是什么狀態(tài),現(xiàn)在在干嘛,在整個功能的變化過程中我們都能看到對應(yīng)的文字描述。


其他示例:下拉刷新時的加載中,加載完成提示,收藏成功、支付成功、實付失敗等提示。


·. 環(huán)境貼切原則

功能和服務(wù)貼近用戶使用的場景,

符合當(dāng)前場景用戶的體驗。

產(chǎn)品的功能和服務(wù)應(yīng)該貼近真實世界,

讓信息更自然,邏輯上也更容易被用戶理解。


示例:我們在店里買東西的時候經(jīng)常會聽到這樣的聲音「支付寶導(dǎo)致:5元」就是貼近環(huán)境的設(shè)計。
商家需要確認你是否付錢,
但是又經(jīng)常忙于手頭的事情無法及時查看;
而這樣功能的設(shè)計,商家即使在忙著手頭的事情依然能通過聲音來確認已經(jīng)收到你的錢了。
這樣的設(shè)計對于商家和消費者是友好便捷的。


 ·.  撤銷重做原則 

在使用產(chǎn)品時了解和掌控當(dāng)前頁面。

如果用戶誤操作,可以隨時撤銷,用戶在使用產(chǎn)品時足夠自由。


示例1:我們用微信和對方聊天時,當(dāng)我們寫了很多字,發(fā)出去時卻發(fā)現(xiàn)其中有錯誤,這時我們可以使用微信的撤回功能,體驗更好的是,撤回消息旁邊有「重新編輯」功能,可以讓之前編輯的文本回到對話框重新編輯再發(fā)送。如下圖:


示例2:iOS系統(tǒng)照片的刪除和撤回


·. 一致性原則

同樣的文字、狀態(tài)、按鈕,都應(yīng)該觸發(fā)相同的事情,遵從通用的平臺慣例。也就是,同一用語、功能、操作保持一致。主要包括以下五個方面:


1. 結(jié)構(gòu)一致性

保持一種類似的結(jié)構(gòu),新的結(jié)構(gòu)變化會讓用戶思考,規(guī)則的排序能減輕用戶的思考負擔(dān)。

示例:微信中每個模塊的條目都有統(tǒng)一的「圖標(biāo)+文字信息」的結(jié)構(gòu)樣式,能讓用戶快速了解每一個模塊;


2. 色彩一致性

產(chǎn)品所使用的主要色調(diào)應(yīng)該是統(tǒng)一的,而不是換一個頁面,顏色就不同。

示例:淘寶的圖標(biāo)顏色與界面的主色均為橙色,也包括其中一些標(biāo)簽和強調(diào)的文字顏色都是橙色色。整個界面除了圖片的有效信息外,都通過灰、白、橙色色來呈現(xiàn),界面保持了很好的一致性;


3. 操作一致性

能在產(chǎn)品更新?lián)Q代時仍然讓用戶保持對原產(chǎn)品的認知,減小用戶的學(xué)習(xí)成本。

示例:微信在對話框和通訊錄都采用了左滑出操作的交互,如下圖:


4. 反饋一致性

用戶在操作按鈕或者條目的時候,點擊的反饋效果應(yīng)該是一致的。

示例:QQ的每個分組點擊后都是向下展開組內(nèi)成員列表;


5. 文字一致性
產(chǎn)品中呈現(xiàn)給用戶閱讀的文字大小、樣式、顏色、布局等都應(yīng)該是一致的。
示例:例如微信幾個關(guān)鍵界面的字體:三個主界面內(nèi)容結(jié)構(gòu)不盡相同,但是,列表的標(biāo)題字體和間距都一樣,這樣讓整個APP視覺上看起來很舒服;


 ·.  防錯原則
比出現(xiàn)錯誤信息提示更更好的是,用設(shè)計防?止這類問題發(fā)生。在用戶選擇動作發(fā)?生之前, 就要防止用戶容易混淆或者錯誤的選擇。

1. 限制操作范圍與條件;
示例:未輸入驗證碼前,底部的登錄按鈕是置灰不可點擊的,只有填寫完整,底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài)。這就是為了防止用戶犯更多錯誤;


2. 對有風(fēng)險的操作進?二次確認;
示例:刪除個好友時,通過二次彈窗給出防錯措施。

·. 易取原則

減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。
1. 為用戶提供歷史記錄、關(guān)注、收藏等功能;
示例:愛奇藝為用戶提供了看過記錄和我的收藏,幫助用戶記憶:



2. 選擇而不是輸入,盡量降低輸入成本;

示例1:打車軟件自動獲取當(dāng)前位置;

示例2:iOS系統(tǒng)收到驗證碼后自動帶入到鍵盤,點擊直接輸入;


·. 靈活原則

對于新用戶來說,需要功能明確、清晰,對于老用戶需要快捷使用高頻功能。不可為了某一種用戶,把不必要的信息占據(jù)重要部分。主要體現(xiàn)在3個方面:

1. 自定義功能或模塊的展示位置;

示例:支付寶首頁的應(yīng)用是可以根據(jù)自身喜好自定義的,包括定義常用應(yīng)用、排序、刪除、新增等等。這樣用戶可以根據(jù)自己的個人興趣定制自己適合的應(yīng)用分布方式,這就叫做用戶定制常用功能,如下圖:


2. 將“常用”自動歸納以提升使用效率;

示例:微信聊天界面表情彈窗中會有一個「最近使用」的模塊,它把個人平時使用頻率或者次數(shù)最多的表情進行歸類。當(dāng)用戶使用的時候,能很快的找到自己喜歡或者常用的表情,提高了聊天效率;包括餓了么的「我的訂單」里的每一個訂單都可以通過再來一單重新一鍵下單,如下圖:


3. 縮短操作路路徑,提升使?用效率與體驗;

示例:微信的對話框,當(dāng)點擊「+」調(diào)出下面的操作選項時,會默認彈出剛截圖或拍照的照片,方便用戶直接調(diào)取,還有APP長按后出來的快捷操作列表,如下圖:


·. 易掃原則

直譯:美學(xué)和簡約的設(shè)計;頁面不應(yīng)包含不相關(guān)或很少需要的信息,頁面中的每個額外信息都會降低主要內(nèi)容的相對可見性。

示例:如下圖列表中出現(xiàn)的信息都是用戶比較關(guān)注的信息,比如配送費,配送時間,距離等;攜程的選擇機票界面講最重要的時間和機票價格放大突出,讓用戶能一眼看到,如圖:


 9 ·. 容錯原則

直譯:幫助用戶識別、診斷和從錯誤中恢復(fù);我們盡量避免用戶出現(xiàn)錯誤,但當(dāng)出現(xiàn)錯誤時,我們應(yīng)該盡量去安撫用戶的挫敗感。

?配圖+文字代替「404」,明確告訴用戶哪?錯了和解決方案。

示例:界面加載失敗時的刷新提示,還有登錄時的手機號碼校驗,如果手機格式錯誤會出現(xiàn)會提示用戶手機格式不正確和正確的格式。


 10 ·. 人性化幫助

幫助性提示最好的方法是:

1.無需提示:非常簡單易懂,用戶看界面就知道怎么操作,無需提示;

2.一次性提示:只需要一次提示用戶就懂如何使用;

示例:常見的新功能引導(dǎo)、引導(dǎo)?等,示例:


3.常駐提示: 較重要的提示,用于指導(dǎo)或幫助用戶;

示例:支付寶轉(zhuǎn)賬時,常駐在頂部的安全確認提示,還有轉(zhuǎn)賬時的服務(wù)費提示,如圖:


4.幫助文檔:稍微復(fù)雜一點的軟件,雖然要讓他盡量簡單但幫助文檔都是必要的;

示例:微信設(shè)置界面里的「幫助與反饋」,還有支付寶轉(zhuǎn)賬時彈出來的「求助反饋」,點進去后的常見問題界面;


以上就是我對Jakob Nielsen(雅各布·尼爾森)的十大交互設(shè)計原則的理解和實例解讀,希望對大家有所幫助。如果大家同樣對這些方面有些興趣或者看了后有些什么想法,歡迎一起討論。

轉(zhuǎn)自:站酷-搞設(shè)計的月野兔



產(chǎn)品設(shè)計核心三要素

資深UI設(shè)計者

先問一個問題:怎么樣衡量一個設(shè)計好與不好?工作中實踐越多次,越會發(fā)現(xiàn)華麗的設(shè)計稿并不是體現(xiàn)設(shè)計師專業(yè)能力的唯一標(biāo)準(zhǔn)。普通設(shè)計師和高級設(shè)計師區(qū)別在于,設(shè)計方案是否具備完整設(shè)計思路;設(shè)計對于業(yè)務(wù)有沒有真正的價值體現(xiàn);以及設(shè)計方案的推動落地的完整性到底有多少。設(shè)計越往后走,越考驗產(chǎn)品思維,設(shè)計思維,以及設(shè)計推動能力。這是產(chǎn)品設(shè)計師需要關(guān)注的核心三要素。


設(shè)計師在工作中接到設(shè)計需求會不自覺的第一時間想著如何去進行視覺表達,視覺表達確實非常重要,也是公司對于設(shè)計師的核心價值的定位之一,但視覺表達只是其中設(shè)計專業(yè)本職工作中的一個環(huán)節(jié)。設(shè)計師還要應(yīng)該能夠站在產(chǎn)品、設(shè)計、技術(shù)等不同維度去思考設(shè)計方案的可行性。產(chǎn)品打磨-視覺呈現(xiàn)-落地執(zhí)行,在這三個核心點里面設(shè)計師分別有不同的定位和價值所在。 


  一. 產(chǎn)品“雙標(biāo)”滿足   

產(chǎn)品打磨包含產(chǎn)品規(guī)劃,內(nèi)容組成,界面布局,交互梳理等等…所有環(huán)節(jié)的工作是為了符合產(chǎn)品最終的目標(biāo)。產(chǎn)品所有的能力會核心圍繞兩個點:1商業(yè)變現(xiàn) 2用戶需求滿足。這兩個目標(biāo)在產(chǎn)品執(zhí)行的環(huán)節(jié)有時候會有一些沖突,在產(chǎn)品打磨階段設(shè)計師通過怎樣的方式,做到既滿足產(chǎn)品商業(yè)目標(biāo)又滿足用戶體驗需求?可以按照以下幾個步驟進行分析尋求切入點: 


Image title



這里用騰訊動漫付費模塊舉例說明: 項目背景是騰訊動漫產(chǎn)品要做付費體系升級設(shè)計,接到需求先有由產(chǎn)品源頭一步步深入,逐步展開設(shè)計方案的規(guī)劃。 


 01 產(chǎn)品目標(biāo)確認  

通過對項目背景的解讀和產(chǎn)品方案的深入了解,以及總結(jié)當(dāng)前存在的一些問題,可以明確得到項目中產(chǎn)品核心目是什么。付費升級核心原因是付費轉(zhuǎn)化低,用戶付費意愿不夠強烈。此次升級的核心目標(biāo)是促進內(nèi)容消費,提升付費率。 


Image title



 02 分析用戶路徑  

確認目標(biāo)之后從哪個模塊兒開始進行首要需要考慮的。對于現(xiàn)有現(xiàn)有功能的升級,建議核心從產(chǎn)品本身著手,可以根據(jù)用戶行為分析,獲取用戶常規(guī)使用路徑,找到用戶使用場景下的核心目的,從而去挖掘用戶在付費路徑下的訴求點,根據(jù)訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產(chǎn)品的路徑。 

Image title



 03 觀察用戶核心需求是否被滿足 

 用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前,核心目是想快點看到漫畫內(nèi)容;閱讀過程中,想要及時宣泄對漫畫的故事情節(jié)的感受;閱讀后,希望找到更多相關(guān)內(nèi)容或者能夠和內(nèi)容有更多的互動。目前產(chǎn)品在這三個關(guān)鍵的路徑節(jié)點都存在一些問題,閱讀前對于付費缺乏正向引導(dǎo),閱讀過程中互相行為較少,閱讀后沒有更多延展內(nèi)容可供消費等。 


Image title



 04 洞察設(shè)計切入點  

根據(jù)用戶在閱讀 “前 中 后” 關(guān)鍵路徑的節(jié)點的不同情緒反饋,我們可以做出找到相應(yīng)情感滿足切入點,并且制定解決方案 


Image title



 05 制定設(shè)計方案  

將之前找到的設(shè)計情感切入點用交互和視覺的形式呈現(xiàn)出來,盡可能完整的表達清晰。下面展示是關(guān)于付費升級優(yōu)化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設(shè)計思路,逐步去引導(dǎo)用戶付費。讓用戶在趣味互動中完成產(chǎn)品的商業(yè)轉(zhuǎn)化目標(biāo)。 


https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html


 二. 設(shè)計呈現(xiàn)的“差異化”   

視覺呈現(xiàn)是設(shè)計師們都比較擅長的工作,但不同專業(yè)高度要求下方案最終呈現(xiàn)出的效果是完全不一樣的。好的設(shè)計方案,需要在設(shè)計上做出明顯的“差異化”,這里的差異化是指要區(qū)別于常規(guī)輸出一般的水平。差異化的可以從多個點入手:


Image title



優(yōu)質(zhì)的設(shè)計美感

美感是作為設(shè)計師首先需要培養(yǎng)的技能之一,也是在后續(xù)職業(yè)生涯的一直需要用到的技能。設(shè)計師被神職化的很大一個原因就是因為設(shè)計師的美感比一般人要好,有懂得欣賞美、鑒別美、以及創(chuàng)造美的能力。單一從視覺層面,設(shè)計作品是合格品還是精品,最終取決于畫面的精美程度。項目不分大小,再小的一個項目都可以做出精致品質(zhì),這也是體現(xiàn)設(shè)計師專業(yè)度的核心衡量之一。


Image title



完整設(shè)計思路:

設(shè)計方案的完整性也能夠很好的設(shè)計師專業(yè)度的差異化,幾張圖的設(shè)計稿和一個有完整設(shè)計思路的設(shè)計方案在品質(zhì)上自然是明顯差別的。設(shè)計師不光需要將設(shè)計呈現(xiàn)出來,更需要有嚴(yán)謹(jǐn)?shù)脑O(shè)計思路并且表達出來讓受眾到你的設(shè)計想法。設(shè)計前期分析、中期執(zhí)行、后期落地以及迭代優(yōu)化,能夠讓設(shè)計師有意識的鍛煉和提升自己的設(shè)計思維,對于設(shè)計師能力提升有必然的幫助。 


Image title



獨特創(chuàng)意:

設(shè)計差異化呈現(xiàn)上,創(chuàng)意是一個非常好的切入點。行業(yè)大趨勢的前提下,現(xiàn)在同類產(chǎn)品越來越趨于同質(zhì)化,受眾使用產(chǎn)品的時候都會有一些常規(guī)認知,關(guān)于功能的、交互操作的、內(nèi)容組成的等等,淘寶和京東、大眾和美團、甚至QQ音樂和網(wǎng)易音樂在產(chǎn)品使用體驗上都有高度重合的地方,這些已經(jīng)在用戶心智中形成習(xí)以為常的認知感受。如果能夠在用戶的常規(guī)認知里,用創(chuàng)意手法呈現(xiàn)出超出他們預(yù)期的內(nèi)容使其驚喜,產(chǎn)品設(shè)計就會有明顯差異化體現(xiàn)。 


Image title



善用情感化:

具備美感的設(shè)計能讓作品看起來有高級感,但更為高級且有效的是能夠引起用戶情感共鳴的設(shè)計。設(shè)計是主觀的,對于設(shè)計每個人都有自己的想法,也正是因為主觀的設(shè)計感受,能讓設(shè)計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設(shè)計,會形成產(chǎn)品的核心記憶點之一。設(shè)計師對于情感化設(shè)計往往會有一些誤區(qū),認為圖形可愛,色彩羨慕,動效流暢且能夠形成一套視覺體系,就能夠算情感設(shè)計。真正的情感設(shè)計是需要從用戶角度出發(fā),挖掘用戶的認知領(lǐng)域和喜歡,從而去進行符合用戶情感訴求的呈現(xiàn)。 


Image title


三. 方案推動的效能管理 

 

設(shè)計方案輸出只是整個產(chǎn)品生產(chǎn)流程中的一個核心環(huán)節(jié),產(chǎn)品上線后體驗如何最終取決于落地實現(xiàn)的程度。在方案落地支持過程中,效率協(xié)調(diào)和實現(xiàn)能力是保證設(shè)計方案貫徹一致執(zhí)行的關(guān)鍵因素:


 協(xié)作  

產(chǎn)品設(shè)計師工作協(xié)調(diào)分為內(nèi)部協(xié)作和外部協(xié)作。內(nèi)部協(xié)作即設(shè)計師之間的溝通協(xié)同,主要內(nèi)容是如何保持設(shè)計語言一致性,除了制定設(shè)計規(guī)范,還可以建立公共控件庫,線上調(diào)用??丶炷軌蚴乖O(shè)計師協(xié)作無學(xué)習(xí)成本,設(shè)計師輸出設(shè)計稿效率也能夠大大提升,同時保一致性。


外部協(xié)作主要是和下游的技術(shù)同事直接的工作對接,設(shè)計方案的交接方式以及開發(fā)獲取信息的效率很關(guān)鍵。在開發(fā)接收設(shè)計方案的時候,盡能力降低獲取成本以及理解成本。比如設(shè)計稿的標(biāo)注,在標(biāo)注上設(shè)計師一般會花很長時間,開發(fā)也需要逐步查看,偶爾還會有標(biāo)注遺漏的地方。我們團隊會直接采用插件,設(shè)計稿及時同步,并且開發(fā)可以自己隨時查看每個元素的標(biāo)注信息,便捷。


這里推薦兩款協(xié)調(diào)軟件:一款是InVision可以在sketch里進行控件協(xié)同調(diào)用,所有想用的元素直接源文件調(diào)用,不需要再問同事要源文件!另一款是Zeplin技術(shù)同學(xué)可以直接查看元素屬性以及間距等,設(shè)計師解放雙手不再需要標(biāo)注!


Image title



官網(wǎng)鏈接: 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/


實現(xiàn)能力   

專業(yè)技術(shù)之間的壁壘,也會成為設(shè)計方案實現(xiàn)的阻力。同樣的界面,設(shè)計人員用設(shè)計軟件實現(xiàn),技術(shù)人員用邏輯代碼實現(xiàn),實現(xiàn)的方式和成本存在很大的差異性,所以往往設(shè)計師認為很簡單的需求在開發(fā)層面的確非常難實現(xiàn)。當(dāng)然,不是所有需求都是無解的,設(shè)計師在技術(shù)實現(xiàn)層面還是可以做一些事情:


01 方案前置溝通

設(shè)計一個新的功能的時候,如果有非常規(guī)的設(shè)計方案,可以提前和技術(shù)人員溝通實現(xiàn)的難易程度,讓技術(shù)人員有前期預(yù)判和預(yù)演的時間。并且,可以將設(shè)計做成簡易DEMO方便技術(shù)人員快速理解,避免雙方存在信息不對等的情況。


02 搭建開發(fā)控件庫

開發(fā)控件庫和設(shè)計規(guī)范一樣,是最基礎(chǔ)但應(yīng)用最為頻繁的模塊兒。開發(fā)控件庫可以將最基礎(chǔ)的元素形成固有規(guī)范,所有開發(fā)實現(xiàn)都用同一套規(guī)范,以確保實現(xiàn)的高度一致性,同時也能夠提升實現(xiàn)效率和設(shè)計還原。設(shè)計可以輔助開發(fā)一起制定開發(fā)控件庫,確??丶旌驮O(shè)計規(guī)格的一致性。


03 尋求技術(shù)語言共通性

盡量將設(shè)計方案轉(zhuǎn)化為技術(shù)能夠理解和復(fù)用的形式進行對接。除了靜態(tài)設(shè)計稿的標(biāo)注,設(shè)計和技術(shù)實現(xiàn)最大的難點在于動態(tài)交互的實現(xiàn)上,對于動態(tài)設(shè)計,將設(shè)計方案轉(zhuǎn)換為代碼文件交付給技術(shù)實現(xiàn),這樣能確保功能的正常實現(xiàn)同時減少后期設(shè)計還原性的偏差。


以上初步總結(jié)的關(guān)于產(chǎn)品設(shè)計師在設(shè)計過程中從前期產(chǎn)品規(guī)劃到中期設(shè)計執(zhí)行再到后期開發(fā)落地應(yīng)該注意的一些核心點:

第一條,設(shè)計方案既要滿足產(chǎn)品目標(biāo)又同時要兼顧用戶體驗;

第二條,優(yōu)秀的設(shè)計師,會保持設(shè)計方案的“差異化”;

第三條,設(shè)計師職責(zé)除了確保設(shè)計方案完整性,更重要的是推動設(shè)計方案的完整落地。


在產(chǎn)品設(shè)計過程中,設(shè)計師需要關(guān)注還有很多關(guān)鍵點,這里也歡迎大家一起補充交流,正是這些關(guān)鍵點,將設(shè)計師的思維逐步打開,使其成為一個具有全鏈路思維的設(shè)計人才。 

文章來源:UI中國

交互手勢的容錯性和邏輯性

資深UI設(shè)計者

交互手勢是用戶操作的重要部分,交互手勢的設(shè)計好壞非常影響用戶體驗,那么,交互手勢的設(shè)計上對于容錯性和邏輯性需要注意什么?

隨著用戶體驗被愈發(fā)的重視,更多的 APP 偏向于使用多手勢優(yōu)化用戶的操作流程,降低使用阻力。

點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知,但是增加更快捷的手勢操作可以大大增大操作熱區(qū),提高操作效率,如下圖。

交互手勢的容錯性和邏輯性

然而,我們可以發(fā)現(xiàn)由于不同產(chǎn)品的設(shè)計師對于用戶體驗的理解不同、交互層面的思考不同,導(dǎo)致設(shè)計的交互手勢也不同。

有時同一種操作在不同的 APP 中交互手勢也是不統(tǒng)一的,這無疑增加了用戶的學(xué)習(xí)成本和記憶成本。

舉個例子,iOS 端的得到和有書的播放頁的打開和關(guān)閉方式。

得到有兩種方式打開和關(guān)閉頁面,用戶可以通過點擊控件或上滑控件打開播放頁,通過點擊收起按鈕或下拉頁面關(guān)閉播放頁。但是有書只有一種方式打開和關(guān)閉,用戶只能通過點擊控件打開播放頁,通過點擊返回圖標(biāo)關(guān)閉播放頁。

這讓習(xí)慣了使用得到的我去使用有書時,感覺非常別扭,每次都嘗試用得到的手勢去操作但是都失敗了,失敗后我下一次并沒有記住仍然用手勢去操作,如此反復(fù)令我相當(dāng)沮喪。

交互手勢的容錯性和邏輯性

容錯性

容錯性是一個很大的話題,今天我們僅僅在交互手勢層面上討論。

上面的例子中,有書并沒有設(shè)計滑動手勢去打開和關(guān)閉播放頁,那么我以我的經(jīng)驗去進行的滑動滑操作在有書這個產(chǎn)品中就是錯誤的和不被產(chǎn)品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中,如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書,本來養(yǎng)成的操作習(xí)慣在有書就失效了,用戶就會感覺“這個 APP 很難用,用起來很不舒服”,進而可能放棄有書轉(zhuǎn)而投向其他產(chǎn)品懷抱。

與手勢設(shè)計類似,這也是為什么現(xiàn)在的同種類型的 APP 的信息架構(gòu)設(shè)計越來越同質(zhì)化,當(dāng)我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ,本質(zhì)上也是為了降低用戶的遷移、記憶和學(xué)習(xí)成本。

如下圖所示,提高手勢的容錯性對用戶的意義。

交互手勢的容錯性和邏輯性

很多優(yōu)秀的產(chǎn)品考慮到了上述問題,設(shè)計了多手勢來優(yōu)化用戶體驗。

舉個例子,在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁,由于詳情頁是直接由卡片放大轉(zhuǎn)場的,不同于傳統(tǒng)的新頁面右側(cè)進入和從底部彈出。

在用戶的使用習(xí)慣和認知中新頁面如果從右側(cè)進入就可以通過右滑返回,從底部彈出的話就可以下拉返回。因此,當(dāng)用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回,對此理解不同的用戶可能會嘗試右滑,也可能嘗試下拉。

APP Store 的設(shè)計在此就有很好的容錯性,用戶可以通過三種方式返回首頁,分別是、右滑返回、下拉返回和點擊叉號返回,這不但降低了用戶的記憶和學(xué)習(xí)成本,也便于不同習(xí)慣的用戶使用。

交互手勢的容錯性和邏輯性

針對不同的場景,手勢的使用也會有不同。

一個很好的案例是知乎的評論:知乎的評論的關(guān)閉方式有三種,分別是下拉、右滑和點擊叉號。

用戶觀看評論的場景有兩種,第一種是只想看一下精選評論然后關(guān)閉,第二種是被評論吸引后一直往下看。當(dāng)用戶單手操作不方便點擊叉號時,下拉對應(yīng)的是第一種用戶;右滑對應(yīng)的是第二種用戶,不管用戶看了多少屏的評論,隨時可以通過右滑關(guān)閉評論(因為用戶翻閱了很多屏評論后需要下拉到第一條評論時,下拉關(guān)閉評論手勢才會生效,所以第二種用戶一般不使用下拉去關(guān)閉評論)。

可能你會心生疑惑:“第一種用戶也可以使用右滑來關(guān)閉評論呀”,確實可以,但是對于人的操作習(xí)慣來說,上下滑動會比左右滑動更方便。

交互手勢的容錯性和邏輯性

還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch,它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP,對于追求效率的用戶來說簡直不要更方便,但是對于不支持 3D Touch 的機型則無法使用情景菜單。

因此,在生活中我發(fā)現(xiàn)這樣的現(xiàn)象,很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習(xí)慣,總是嘗試去重按但是是無效的。

其實在很多安卓手機上也有情景菜單這一功能,它巧妙地將卸載也加到了情景菜單中,因此用戶只需要通過長按就可以獲得所有需要的功能,而不是像蘋果那樣長按是卸載而重按是情景菜單。

我猜測蘋果為了適配所有機型,提高容錯性,從今年的發(fā)布會的 iPhone 11 和iPhone 11 pro 開始,取消了 3D Touch,轉(zhuǎn)而使用 Haptic Touch (有震動反饋的長按)代替。當(dāng)你長按某個圖標(biāo)時,感受到震動后松開,即可呼出二級菜單;如果震動后仍不松開,則進入到卸載 APP 時的抖動狀態(tài),使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。

對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢?

如果一致統(tǒng)一的話,容錯性將大大提高,我們將拭目以待。

不僅僅是 iOS ,Android 的版本 Android 10經(jīng)歷了 6 個測試版迭代后正式發(fā)布,我們發(fā)現(xiàn)交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內(nèi)測系統(tǒng)開始引入全局手勢操作,用戶啟用后,屏幕底部便不會再出現(xiàn)虛擬按鍵和導(dǎo)航欄,只會剩下一個指示條,上滑返回主屏、側(cè)滑返回上一層的操作邏輯也均和 iOS 保持一致。

這可能標(biāo)志著安卓手機一直以來在國內(nèi)各家廠商的各種創(chuàng)新手勢的割裂生態(tài)中即將重歸統(tǒng)一,并和 iOS 保持一致。

這種妥協(xié)將大大提高在用戶使用一款新安卓手機時的容錯性,同時降低了今后用戶在兩大系統(tǒng)之間的遷移成本。

邏輯性

再談?wù)勥壿嬓?,在交互手勢的層面上,如果用戶能夠通過某個手勢進行某個操作后,按照邏輯,用戶也可以通過反向的手勢或?qū)?yīng)的手勢進行逆向操作。

比如,在微信首頁下拉調(diào)出小程序頁面,之后可以通過上拉返回首頁。點擊加號呼出更多操作,再次點擊加號收起更多操作。

如果違背了用戶的心理模型和邏輯性,用戶就會感覺到混亂和不適。

這里舉一個反例, Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息,但是收起后只能通過點擊展開更多個人信息而不能上拉,不符合邏輯與用戶的心理模型。

交互手勢的容錯性和邏輯性

如下圖所示,邏輯性對用戶的意義。

交互手勢的容錯性和邏輯性

有的時候,我們會發(fā)現(xiàn)為了提高容錯性,我們會犧牲一部分邏輯性。

就像上文提到的知乎關(guān)閉評論彈出框,邏輯上它是從底部彈出的,但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。盡管右滑關(guān)閉有些違背用戶的心理模型,但是確實給用戶帶來了很多操作上的便捷。

如何設(shè)計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

  1. 使用頻率:當(dāng)一個功能的使用頻率足夠高時,我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
  2. 危險程度:如果一個操作不可撤銷且存在危險性質(zhì),我們最好不要加入多手勢操作。此時我們需要用戶更加專注,如果加入多手勢操作可能會增加誤操作的概率。
  3. 特殊體驗:當(dāng)我們需要加入特殊的模擬體驗時,此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡,給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換,這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

1)考慮不同平臺的硬件系統(tǒng)和操作系統(tǒng)特性

由于硬件與操作系統(tǒng)差異,iOS 系統(tǒng)支持很多手勢,但是安卓系統(tǒng)在手勢支持方面就不如 iOS 豐富。

安卓硬件設(shè)備的差異比較大,不同安卓手機廠商會在安卓系統(tǒng)的基礎(chǔ)上自定義系統(tǒng)的手勢操作,因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應(yīng)平臺的規(guī)范,做到心中有數(shù)。

2)考慮所選的手勢的學(xué)習(xí)成本和記憶成本,用戶是否已經(jīng)被教育

如下圖所示,盡管設(shè)備支持的手勢數(shù)量多不勝數(shù),但是日常使用 APP 時,大部分用戶習(xí)慣使用的手勢很少,比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學(xué)習(xí)成本很高。

一般比較通用的功能是沒有必要在此處創(chuàng)新的,但是如果一些特殊的操作確實需要加入時,我們就需要考慮下面的問題。

交互手勢的容錯性和邏輯性

a. 如果沒有教育成熟,考慮加入教學(xué)或搭配簡易的操作方式

對于我們需要加入的手勢操作當(dāng)前用戶并未被教育成熟時,我們需要考慮加入手勢教學(xué),具體的手勢教學(xué)類型下一部分會詳細討論。

然而,大部分情況下用戶的記憶是短期的,教學(xué)內(nèi)容可能會被快速遺忘,下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應(yīng)該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設(shè)計,其考慮到了有些用戶在現(xiàn)實生活中并未見過擬物繩燈,并不知道是要進行下拉才能觸發(fā)操作。因此,QQ 閱讀貼心地搭配了一個簡單的點擊操作,用戶通過點擊繩燈也可以切換夜間模式,如下圖。

交互手勢的容錯性和邏輯性

b. 考慮所選手勢是否可能導(dǎo)致沖突和誤操作,如果導(dǎo)致了,考慮如何避免和折中

最常見的手勢沖突情況就是 APP 的手勢與操作系統(tǒng)的全局手勢沖突。

解決方案有兩個,一是避免設(shè)計與全局手勢一致的手勢操作,例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應(yīng)用等全局手勢操作;二是仍然設(shè)計與全局手勢沖突的操作,但是將全局手勢部分禁用或以其他的方式區(qū)分開。

如下圖有書播放頁的案例,由于進度條滑動控件過于靠左,導(dǎo)致使用 iOS 全局右滑返回手勢時有時會產(chǎn)生誤操作,即本來想要右滑返回卻不小心滑動了進度條。

這種情況下我們可以標(biāo)注一個右滑手勢禁用區(qū)域給開發(fā)工程師說明情況,將此情況避免掉即可。

交互手勢的容錯性和邏輯性

誤操作指的是,我們設(shè)計的手勢操作與 APP 內(nèi)的其他操作或系統(tǒng)全局手勢操作接近導(dǎo)致用戶觸發(fā)了非預(yù)期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作,經(jīng)過研究發(fā)現(xiàn),由于 iOS 端的知乎在瀏覽回答的頁面設(shè)計的右滑返回的熱區(qū)過大,導(dǎo)致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發(fā)了右滑返回,再次進入回答后又需要翻頁很久才能找到之前離開的地方,很影響體驗。

我覺得知乎可以減少熱區(qū),將熱區(qū)調(diào)整為 iOS 全局的右滑返回區(qū)域即可,如下圖所示。

當(dāng)然,產(chǎn)品設(shè)計需要平衡與取舍,如果減少了熱區(qū)是否會影響其他用戶的體驗還需要考慮和調(diào)研,兩者并無絕對的對錯

交互手勢的容錯性和邏輯性

3. 讓用戶了解并使用新手勢

當(dāng)新手勢無法直接讓用戶感知時,我們需要加入一些手勢教學(xué)幫助用戶快速上手使用。

1)手勢教學(xué)方式

a. 浮層和動畫引導(dǎo)使用靜態(tài)或動態(tài)的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

相比于靜態(tài),動態(tài)比靜態(tài)更為直觀和易學(xué)。

交互手勢的容錯性和邏輯性

b. 內(nèi)容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

由于教學(xué)內(nèi)容難免具有干擾性,對于高級用戶來說是不必要的,但是對于初級用戶又是必要的,因此以這種內(nèi)容暗示的方式使教學(xué)極為輕量化,在低干擾的情況下使得用戶學(xué)習(xí)了手勢操作。

如下圖,嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架,暗示用戶可以通過左右滑動切換文章。

再比如陌陌在打開點點功能時,會在用戶進入頁面的時候播放一個動畫,暗示有很多卡片疊加在了一起,用戶可以通過滑動切換卡片。

交互手勢的容錯性和邏輯性

2)教學(xué)的出現(xiàn)時機

a. 操作前當(dāng)產(chǎn)品中設(shè)計了不容易感知的新手勢,在用戶操作前,通過教學(xué)讓用戶了解和學(xué)習(xí)新的手勢。

b. 錯誤操作后對于一些與用戶的心理模型和習(xí)慣不一致的手勢,提前預(yù)測用戶可能輸入的錯誤手勢,在用戶錯誤操作后進行提示,規(guī)范用戶的操作方式。

如下圖,由于知乎舊版本是通過左右滑動切換回答的,新版本調(diào)整為上下滑動后,需要糾正用戶使用習(xí)慣。因此,當(dāng)用戶仍然使用左右滑動時,會出現(xiàn)浮層提示用戶正確的手勢進行教學(xué)。

交互手勢的容錯性和邏輯性

結(jié)語

以上是日常思考和總結(jié),有不恰當(dāng)之處歡迎指出。希望本文在大家進行手勢設(shè)計的過程中能夠幫助做出合理的決策。

文章來源:人人都是產(chǎn)品經(jīng)理 

淘票票9.0改版背后的設(shè)計思考與體驗度量

資深UI設(shè)計者

Sandy現(xiàn)任阿里影業(yè)—淘票票體驗設(shè)計專家,2015年加入阿里巴巴,深耕B端行業(yè)產(chǎn)品,服務(wù)于電影產(chǎn)業(yè)鏈中的投資、宣發(fā)等角色。2017年起接觸C端用戶產(chǎn)品,推行價值導(dǎo)向和問題導(dǎo)向。2019年開始實踐線上線下全鏈路設(shè)計。

 

活動筆記:

阿里影業(yè)的服務(wù)涉及的面很廣,涉及到b端與c端全流程的體驗服務(wù),包括面對片方的制作和宣發(fā)、發(fā)行、乃至面向用戶的售賣與放映,在每個節(jié)點都有涉及。而淘票票,經(jīng)歷了四年的產(chǎn)品迭代,以一年一個版本的速度的進行優(yōu)化。15年的理念是做一個好用的購票工具,16年新增了營銷,17年加強營銷,18年新賽道探索。到了2019年,改版應(yīng)該進行新的思考:怎樣做?做什么?怎么做?做對了嗎?

此次淘票票9.0版本是根據(jù)用戶現(xiàn)有的習(xí)慣與市場的變化,由設(shè)計師發(fā)起的一次自下而上推進的改版。以下是淘票票9.0的設(shè)計策略與設(shè)計目標(biāo):

  1. 內(nèi)容設(shè)計賦能
    新服務(wù),擴展觀影決策節(jié)點,幫助用戶發(fā)現(xiàn)好電影。
  2. 購票流程體驗打磨
    新體驗,解讀用戶行為,體驗走查,打磨核心購票鏈路體驗。
  3. 年輕化
    新用戶,關(guān)注用戶群體的變化,搜索年輕用戶群的品牌認知,提升年輕用戶滿意度。

接下來將對三點設(shè)計策略進行逐一的講解。

 

1. 新服務(wù)—內(nèi)容的賦能

根據(jù)內(nèi)容類型和場景進行劃分,結(jié)合內(nèi)容特點和用戶喜好,打造全場景運營,例如提供影訊、通稿、片單、榜單、熱點、解讀、文章和活動等等多元化內(nèi)容。通過提供不同的內(nèi)容展現(xiàn)給用戶,將內(nèi)容進行解構(gòu)、把觸達的場景進行細化、優(yōu)化設(shè)計的表達,從而達到幫助用戶可以更好的理解電影的目的。

 

2. 新體驗—打磨購票流程的體驗設(shè)計

設(shè)計前,首先應(yīng)當(dāng)熟知兩種設(shè)計思維導(dǎo)向:

  • A.當(dāng)設(shè)計目標(biāo)是幫助企業(yè)完成商業(yè)目標(biāo)時,是以價值為導(dǎo)向。
  • B.當(dāng)設(shè)計目標(biāo)是為了提升用戶體驗,則是以思維為導(dǎo)向、問題為導(dǎo)向。

而這次9.0淘票票改版采用的是以問題為導(dǎo)向,期間經(jīng)歷了五個流程:

2.1 找問題

首先出去找問題,找問題的方法有很多,如:用戶研究、定性、定量、業(yè)務(wù)數(shù)據(jù)和體驗走查,收集業(yè)務(wù)、用戶、客滿不同視角的疑似問題。

  • 會通過支付寶、淘寶、百度糯米來比較價格高低,對比價格需要反復(fù)推出
  • 進入不同的影院和場次,不太方便
  • 希望看過的電影能夠產(chǎn)生一些紀(jì)念價值
  • 不清楚80元和40元的座位有什么區(qū)別
  • 不明確片尾是否有彩蛋
  • 購票平臺的評分對自己沒有參考價值
  • 電影院的地址、停車場是否免費等信息不夠準(zhǔn)確
  • 買完票到取票之間,需要反復(fù)確認訂單信息、分享訂單信息,但是訂單入口
  • 藏得有些深

2.2 看現(xiàn)象

找完問題之后,基于數(shù)據(jù)的支撐,去看用戶有哪些習(xí)慣的變化,看到目前的現(xiàn)象后再進行數(shù)據(jù)解讀。

  • 影院頁和選座頁返回率高
  • 越來越多的用戶購買當(dāng)日的電影票
  • 多數(shù)用戶選擇更短的買票路徑
  • 大多數(shù)用戶去過的電影院在3家以內(nèi)

2.3 定位問題

基于使用場景和使用效率,進一步定位問題所在。

2.4 分析原因

分析出癥結(jié),以便推進最終的解題環(huán)節(jié)。

  • 癥結(jié)1:平臺服務(wù)與用戶決策心理脫節(jié)
    現(xiàn)有的流程是線狀的:選影片-選影院-選場次-選座-下單。但是用戶實際的心理決策是網(wǎng)狀的,用戶可能在選時間的時候考慮影評好不好,會在選場次的時候考慮價格是不是合理的。
  • 癥結(jié)2:認知過載
    理想狀態(tài)是在傳達信息后,在用戶感知、接收和決策后,希望得到用戶方的正反饋,但是現(xiàn)實往往是用戶認為認知負擔(dān)過重,反饋失效的情況。其中信息傳達、顏色的設(shè)置最直觀的感受是“亂”。決策流程上最直觀的感受是“打擾”,提醒用戶是否確定要買某時候的票、提醒用戶確定退出選座頁不保留剛才選的座位,所有的提示的設(shè)計,都是采用一種打擾的方式進行詢問的。

 

2.5 解題

解題1:場景化探索。

以解決問題為目標(biāo),達到優(yōu)化用戶體驗的目的,對場景進行預(yù)判、探索,把場景分為三個典型的場景:

  • 典型場景1:短時決策–例如距離開場時間較短,對價格不敏感,希望找到距離合適的影院,快速完成購票決定。
  • 典型場景2:追求體驗–對影廳的要求較高,希望找到放映效果最好的影廳。
  • 典型場景3:價格敏感–找到符合自己價格預(yù)期的影院。

解決:針對第一種場景,選坐頁可以快速找到選場次的功能,淘票票提供常去影院、附近影院的選擇,減少用戶決策時間。針對第二種場景,部分觀影者不知道價格更高的IMAX廳、杜比廳的觀影效果,價格比普通廳貴了50塊錢,那么這個錢值在哪?淘票票使用視覺映射和科普的手段,例如當(dāng)點擊進入杜比廳后,下拉可以呼出信息,了解相關(guān)的影廳,給予科普;而且界面設(shè)計不同,更貴的影廳視覺效果好,界面上也提供用戶更強的視覺沖擊。

 

解題2:用戶視角信息重構(gòu),進行信息降噪,減少認知負擔(dān)

認知負擔(dān)=信息呈現(xiàn)類型x信息量

以上公式可以看出,假設(shè)設(shè)認知負擔(dān)為定值,當(dāng)信息量增多的時候,需要減少信息呈現(xiàn)類型,適當(dāng)進行信息降噪與信息結(jié)構(gòu)化。降噪是把想要突出的信息更加突出;信息結(jié)構(gòu)化是把同類型的信息以結(jié)構(gòu)化的呈現(xiàn)出來,讓用戶自然對信息產(chǎn)生親密性。

對于信息傳達,改變之前比較打擾的提示彈窗,現(xiàn)在淘票票會把所有信息都放在頁面中,用一種更輕量的方式提示用戶,不再打擾用戶。信息重構(gòu)則是把需要用戶確認的信息放在最頭部,例如退票、改票,其次界面羅列的是優(yōu)惠信息,最后才是影城卡營銷和賣小食的信息區(qū)域。新舊改版對比圖很好呈現(xiàn)出淘票票有效減少認知負擔(dān)所做的優(yōu)化。

 

3. 新用戶—提升年輕用戶群對品牌認知

基于調(diào)研,淘票票的用戶群體趨近年輕化。改版中所制作情緒版、圖標(biāo)、元素、字號、空間結(jié)構(gòu)等視覺語言,注重和品牌元素的結(jié)合,產(chǎn)生出新的視覺語言與品牌形象,從而更加貼近年輕人的心理與喜好。

 

4. 體驗度量

根據(jù)heart模型進行設(shè)置,選出適合9.0版本的衡量維度:S,T,A。以體驗?zāi)繕?biāo)出發(fā),符合業(yè)務(wù)目標(biāo)進行探索。不一樣的體驗?zāi)繕?biāo)使用不一樣的度量方法。對于內(nèi)容而言,需要衡量的是用戶的接受度,用戶需要看到它,接受它,并且需要知道用戶是否覺得有用。而對于核心購票流程,該流程則是比較偏向工具,度量方式則是任務(wù)完成度、完成任務(wù)時所花費的時長、信息有沒有被有效的傳達給用戶等來衡量的。最后對于視覺方向,用戶的想法會比較主觀,通過滿意度和推薦度來衡量。

 

 

 

現(xiàn)場問答:

提問者1:觀影者通常會在朋友圈、豆瓣和推薦來決定要看的影片,基本不會在淘票票上尋找值得看的影片,為什么淘票票會做這方面的探索?為什么要做內(nèi)容決策這件事?

回答:從想看電影到下單的過程哪個地方淘票票是沒有做好的、做到的,根據(jù)定性調(diào)研,發(fā)現(xiàn)一半以上用戶都不會在淘票票上進行決策。但是淘票票還是希望嘗試一下,希望用戶可以在淘票票上完成完整的購票觀影體驗。從數(shù)據(jù)顯示,用戶心智還是不好但是有一些提升。而且豆瓣經(jīng)歷了10年從pc到app,保留了用戶的歷史等數(shù)據(jù),沒有辦法讓用戶直接轉(zhuǎn)到淘票票進行觀影決策,這也不是淘票票希望看到的。淘票票也希望可以和競品和合作方去提升觀影決策,達到共贏的目的。

 

提問者2:淘票票改版之后,有一個衡量它的改版效果S、T、A的度,有沒有考慮要做NPS?

回答:淘票票一直有在做,從這次改版之后來,淘票票所有用戶群指標(biāo)提升了應(yīng)該有五個百分點,然后年輕用戶的百分點在八個以上。NPS是一個非常關(guān)鍵的衡量用戶滿意度的指標(biāo)。

追問:NPS是不是適合淘票票這個產(chǎn)品?還是適合于所以互聯(lián)網(wǎng)產(chǎn)品?

回答:NPS在集團內(nèi)它的重視度是很高,基本上阿里系所有的產(chǎn)品都會有指標(biāo)。

 

提問者3:我之前是淘票票的用戶,曾經(jīng)用過淘票票做觀影決策,看下面的電影評價,結(jié)果發(fā)現(xiàn)電影評價是虛高的,就是說其實電影沒有那么好,但是評論會傾向性的選擇一個好的評論放在下面,經(jīng)過這次經(jīng)驗之后,就再也不用淘票票作為觀影決策了。想了解現(xiàn)在淘票票的評論機制,它是怎么個呈現(xiàn)的方式?是不是會優(yōu)先選擇就是比較好的評論放在首評?或者是有一些什么樣的計算方式?另一方面對于現(xiàn)在的評論失真的這種情況,有沒有想到一些改進的措施?是最近有沒有做過一些改版之類的,就是關(guān)于這種內(nèi)容方面的?除了剛才講的那些界面,視覺方面的,想了解內(nèi)容方面有沒有一些提升?

回答:第一點,用戶群的不同。對于影評這個來決策,淘票票可能跟豆瓣用戶群有非常大的差異,豆瓣是影迷聚集地,愛電影這幫人的一個粉絲聚集地,圈子比較小,想要進入這個圈子有一定的成本。但是像淘票票它服務(wù)的是大眾場景,服務(wù)的有外賣小哥,也有大城市去打工的用戶,也有三四線在國企里那種的員工,淘票票服務(wù)的用戶是大眾的,所以對于評分虛高這件事,不是說它好或者不好,也就是不能單純的絕對說好還是不好,可能大眾的心智就是這樣的。用戶不像一個資深影迷,看到速度與激情會認為是大爛片,可能反而覺得好,非常值得去看。第二點,關(guān)于這種影評的一個分發(fā)策略涉及到產(chǎn)品策略,不是很方便講。但是淘票票在這方面一直有優(yōu)化的,并且現(xiàn)在也是在持續(xù)優(yōu)化,希望影評可以真正為用戶去提供這個觀影決策。第三點,淘票票的用戶其實不只是c端用戶,它還有還有影院還有片方,但是水軍應(yīng)該不會有,至少淘票票平臺是非常不鼓勵這種情況,而且會有一定的反作弊、返水的機制。

 

提問者4:因為是以設(shè)計推動的一次改版,想了解一下推動的過程?第一就是因為平時改版都是產(chǎn)品的來做的,那這一次由設(shè)計來去推動的話,那設(shè)計跟產(chǎn)品之間的這個協(xié)作關(guān)系是什么樣的?然后改版歷時半年,是淘票票的設(shè)計歷程中是常態(tài)嗎?如果不是的話,平常的這個改版的節(jié)奏是什么樣的?

回答:第一點,設(shè)計要不斷的去跟產(chǎn)品、運營溝通,去跟不同角色溝通,溝通可能是最重要的一點。當(dāng)所有人都達成共識了,確實有這樣的問題需要改,那全部門所有人就會去團結(jié),去把這個事情搞出來。搞出來之后再去向上一層一層的去向上匯報。匯報的可能要經(jīng)過很多輪,不斷有反饋的意見下來,因為本身視角輸入的也不夠全,接受到的聲音也沒有上游接觸的多,所以團隊會去接受意見,然后重新的進行。一輪review下來大概三四個月的時間,然后再去跟開發(fā)團隊溝通為什么要去升級設(shè)計語言,怎么樣去幫開發(fā)提效?怎么在下一次10.0改版的時候更容易。第二點,團隊第一次歷時半年進行改版,之前沒有停下腳步來去深耕用戶體驗,所以有一些坑或者一些彎路。平常的改版中基本上是兩周發(fā)一個版本,非常小步快跑的。對于設(shè)計如何跟產(chǎn)品團隊去協(xié)作?剛剛也有講過,達成共識之后,然后把這個事兒做起來,提需求、進版本,從需求池里評估需求優(yōu)先級進版本。交互設(shè)計跟產(chǎn)品經(jīng)理這個角色沒有絕對的一個邊界,可能都是去不斷的去觸碰,只要去配合合作的好,把這個產(chǎn)品去做出來,不用管處在一個什么樣的一個崗位。

 

提問者5:最開始的時候有問到淘票票和貓眼之間的一些對比,想了解在改版完之后和平時的工作中,是怎么會去了解和競品?怎么去比較?有沒有一些關(guān)注的量化的一些指標(biāo)?

回答:不管服務(wù)于什么樣的產(chǎn)品,都會做競品調(diào)研。會關(guān)注市場的變化、競品的變化。對于設(shè)計團隊來說,其實主要的是關(guān)注的是用戶行為、功能和視覺界面。包括上了哪些個新的功能?在不同的渠道是怎么樣去運作的?運營思維是什么樣子的?淘票票團隊有在研究競品,有在做競品的一個分析,衡量的指標(biāo)也主要是滿意度、推薦度,因為沒有辦法去看競品的數(shù)據(jù),只能通過用戶反饋去看競品跟淘票票的差距。

 文章來源:uxren

需求評審后,產(chǎn)品經(jīng)理要干的6件事

資深UI設(shè)計者

有些產(chǎn)品經(jīng)理會陷入這種誤區(qū)——需求評審做完了,自己就可以放羊不管了。而本文則認為需求評審?fù)?,產(chǎn)品經(jīng)理還要做這六件事。

需求評審?fù)?,產(chǎn)品經(jīng)理還要干的6件事

1. 確認需求評審的遺留問題并同步各方

2. 制定詳細&責(zé)任到人的項目計劃

3. 完成文案設(shè)計

4. 按照項目計劃,協(xié)同各方,往前推進,關(guān)鍵環(huán)節(jié)必須與各方確認。關(guān)鍵環(huán)節(jié)包括:

  • 1)交互評審
  • 2)視覺評審
  • 3)推進聯(lián)調(diào)進度
  • 4)推進測試進度
  • 5)項目showcase
  • 6)項目發(fā)布

5. 準(zhǔn)備項目review

6. 開始下個需求的方案設(shè)計和需求文檔準(zhǔn)備

這六件事具體怎么做?

產(chǎn)品經(jīng)理A:需求終于評審?fù)炅?。有種放飛的感覺,可以休假,去浪了!

產(chǎn)品經(jīng)理B:你說真的嗎?為什么我評審?fù)?,還一直在被開發(fā)、測試、法務(wù)、財務(wù)窮追不舍?

產(chǎn)品經(jīng)理C:你說真的嗎?為什么我評審?fù)?,從來都是我在窮追不舍開發(fā)、測試、法務(wù)、財務(wù)?

產(chǎn)品經(jīng)理D:你們開玩笑的吧?就我這么慘!我不但要緊追不舍開發(fā)、法務(wù)、測試、法務(wù)、財務(wù),還要被老板、被客戶窮追不舍。

產(chǎn)品經(jīng)理A、B、C:哥們,來講講,最喜歡聽?wèi)K兮兮的故事了。你的傷痛最能撫平我的內(nèi)心。

產(chǎn)品經(jīng)理D:好吧。需求評審只講清楚了產(chǎn)品的骨架、細節(jié),讓各方開始投資源。評審?fù)?,產(chǎn)品經(jīng)理還有一堆事要推進,沒法放羊。

要跟的事情主要有下面6件:

1. 確認需求評審的遺留問題并同步各方

需求評審總有一些遺留問題要進一步確認,而后同步給各方。我不是圣人,有時候有些問題或者細節(jié)沒想到,評審的時候,大家提出來了,得趕快明確。

有時候需求評審中還有很大的bug沒想到,必須快速解決,要在開發(fā)沒動工前,都捋順。要不然變成需求變更,或者上線后被推倒重來,欲哭無淚。

我這種求生欲這么強,也沒人罩著的,必須狠命把需求做到95分以上。100分也不太敢說,畢竟眾口難調(diào)。

2. 制定詳細&責(zé)任到人的項目計劃

產(chǎn)品經(jīng)理還得身兼項目管理,項目管理從來都是事有輕重、事無巨細,難以假手他人。雖然我會盡可能調(diào)動大家的積極性,讓大家自驅(qū)管理項目,但還得牽扯不少精力。

項目管理的關(guān)鍵點:明確項目計劃、關(guān)鍵節(jié)點、每個關(guān)鍵節(jié)點的負責(zé)人、驗收方案。

比如什么時候交互評審、視覺評審、聯(lián)調(diào)、showcase、發(fā)布?分別是誰主要牽頭負責(zé),哪些人需要參與。

為了防止項目延期,每個節(jié)點都還得提前趕。真是操碎了心。

3. 完成文案設(shè)計

文案從來不是隨便寫寫。文案是和客戶交流的重要途徑,整幾個客戶看不懂的文案上去,后面客戶咨詢搞死人!

文案設(shè)計除了客戶視角之外,也不是自己想怎么寫就怎么寫,還要和法務(wù)、客服團隊溝通。因為文案被客戶投訴的案例,又不是沒有。

還有啊,我的產(chǎn)品有3種語言,簡體中文、繁體中文、英文,雖然每種語言有專門的文案設(shè)計師,但得跟他們說清楚,也要花不少時間、精力。

當(dāng)然,也有很多產(chǎn)品經(jīng)理,不管文案這種小事??晌矣X得文案體現(xiàn)了產(chǎn)品經(jīng)理最基本的素養(yǎng),是產(chǎn)品的底子。

4. 按照項目計劃,協(xié)同各方,往前推進,關(guān)鍵環(huán)節(jié)必須確認

關(guān)鍵環(huán)節(jié)有6個:

1)交互評審

一般來說會由交互設(shè)計師發(fā)起,開發(fā)、測試、法務(wù)、財務(wù)都要參與。

這樣能保證大家在說同一件事情,避免我要的是頭牛,結(jié)果開發(fā)給了頭驢。

如果設(shè)計師項目參與度低,交互評審還得我自己上。哪里缺人,我就得到哪補坑。

2)視覺評審

一般來說,交互和視覺評審會一起。

有時候項目很復(fù)雜,或者交互、視覺分工明確,那就得分開了。

通常由視覺設(shè)計師發(fā)起。同樣,如果視覺設(shè)計師參與度低的話,我還是得補坑。

3)推進聯(lián)調(diào)進度

聯(lián)調(diào)是很容易扯皮的環(huán)節(jié),大家來自不同域、不同職能團隊,各有各的小九九,所以得盯著,避免聯(lián)調(diào)成為坑王。

4)推進測試進度

進入到測試就意味著開發(fā)的七七八八了,當(dāng)然有時候為了壓縮項目周期,開發(fā)、測試會階段性并行。

除了測試進度,還得關(guān)注測試發(fā)現(xiàn)的問題,可能開發(fā)還得返工,也可能會發(fā)現(xiàn)需求評審中大家都沒有注意到的問題,得及時補救。

5)showcase

Showcase,說白了就是項目驗收。

驗收前,得先列出來要驗收哪些內(nèi)容,主流程、分支流程、逆向流程、重大關(guān)鍵節(jié)點。Showcase,也有可能發(fā)現(xiàn)新的問題,但基本上要避免在showcase環(huán)節(jié)發(fā)現(xiàn)重大問題,不然就得重大需求變更了。

showcase有時候由測試主導(dǎo),有時候沒資源,我得自己上。

6)項目發(fā)布

如果一路順利,就該發(fā)布項目了。

項目發(fā)布計劃雖然也是之前就定好的,但要考慮的方方面面也還挺多的,可以看之前的文章《項目發(fā)布要考慮的因素》。

總而言之,要和各方溝通好,要保證項目順利發(fā)布呦。

5. 準(zhǔn)備項目review

項目終于上線了,可我得天天得看客戶反饋,看數(shù)據(jù),跟客戶聊,跟業(yè)務(wù)聊,準(zhǔn)備復(fù)盤review。

產(chǎn)品狗似乎永遠都在準(zhǔn)備復(fù)盤、復(fù)盤中、復(fù)盤后反思的路上。

6. 開始下個需求的方案設(shè)計和需求文檔

項目通常是并行的。在需求評審?fù)旰?,我已?jīng)開始下一個需求的研究、設(shè)計了。

開發(fā)資源從上一個需求釋放出來的時候,產(chǎn)品經(jīng)理肯定得把下一個需求方案設(shè)計好,開始新的需求評審,妥妥的做好資源銜接。資源一旦釋放出來,下次想要資源,難上加難啊。

產(chǎn)品也需要持續(xù)迭代,讓客戶感受到,我們的產(chǎn)品在成長、進步,給人希望。

文章來源:人人都是產(chǎn)品經(jīng)理

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔