7個(gè)看不見的設(shè)計(jì)點(diǎn),產(chǎn)品經(jīng)理來瞧瞧
在產(chǎn)品設(shè)計(jì)中,可能會(huì)存在一些設(shè)計(jì)點(diǎn)并不“屬于”產(chǎn)品經(jīng)理的職責(zé)范疇,但這些設(shè)計(jì)點(diǎn)卻不能被忽略,因?yàn)樗鼈儠?huì)影響到用戶的最終體驗(yàn)。本篇文章里,作者就闡述了幾個(gè)不應(yīng)忽視的設(shè)計(jì)點(diǎn)及自己的經(jīng)驗(yàn)總結(jié),一起來看看。
前言
在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí),像交互原型圖、UI界面,這些都是可以看到的。
還有我們看不到的設(shè)計(jì)點(diǎn),這些點(diǎn)在做產(chǎn)品設(shè)計(jì)時(shí)同樣可以考慮到。
我整理了以下幾點(diǎn),分享各位,希望對(duì)各位有用。
一、熱區(qū)
熱區(qū)是指頁(yè)面中可以點(diǎn)擊的區(qū)域,點(diǎn)擊熱區(qū)會(huì)觸發(fā)一個(gè)交互事件。
比如說點(diǎn)擊頭像,進(jìn)入個(gè)人主頁(yè),頭像區(qū)域就是個(gè)熱區(qū)。
熱區(qū)的尺寸范圍也會(huì)影響用戶體驗(yàn),為了讓用戶快速選擇,我們可以選擇擴(kuò)大熱區(qū)范圍。
對(duì)于列表,可以將整行作為一個(gè)熱區(qū)。
對(duì)于同一模塊內(nèi)有不同的熱區(qū),可以采用區(qū)域劃分的方式,而不是將熱區(qū)放在元素上(元素是指文字、圖片、icon等)。
另外對(duì)于熱區(qū)范圍,我們需要進(jìn)行明確:不同區(qū)域會(huì)觸發(fā)什么操作。
雖然應(yīng)該是交互設(shè)計(jì)師去考慮,但是哪有一般公司哪有交互設(shè)計(jì)師,還是產(chǎn)品經(jīng)理去管。
二、快捷鍵
對(duì)于快捷鍵,像ctrl+c、ctrl+v,幾乎每天都會(huì)用到。
所以我們需要考慮,在我們的產(chǎn)品中,尤其是PC端產(chǎn)品,是不是也要加入快捷鍵,來提高使用效率。
比如在表單錄入頁(yè):
- 加入ctrl+S快速保存;
- 加入ctrl+N新增數(shù)據(jù);
- 加入ctrl+P打印。
加入太多的快捷鍵會(huì)有一定的學(xué)習(xí)成本,我們可以考慮對(duì)常用功能、核心功能加入采用快捷鍵。
如抖音點(diǎn)贊、評(píng)論是常用功能,在抖音網(wǎng)頁(yè)版,按“Z”,快速點(diǎn)贊“X”;“C”,收藏;↑、↓鍵切換視頻;←、→鍵快退/快進(jìn)。
另外對(duì)于APP內(nèi),我們也可以考慮加入快捷鍵,我認(rèn)為@就是個(gè)快捷觸發(fā)鍵。
釘釘目前就可以輸入/,調(diào)用出功能快捷入口。
通過一個(gè)斜杠將產(chǎn)品內(nèi)的各個(gè)功能快速串聯(lián)在一起,不得不說,能想到這一點(diǎn)真的很棒。
我們也可以參考這個(gè)設(shè)計(jì),想想在我們的功能產(chǎn)品中有沒有地方可以用。
三、數(shù)據(jù)加載
在說到《5000字詳解性能需求》時(shí),我們提到過對(duì)于不同加載方式,同樣會(huì)影響到產(chǎn)品的用戶體驗(yàn)。
常見的加載方式有:
分頁(yè)加載:在做列表時(shí),研發(fā)一定會(huì)問要不要分頁(yè)、一頁(yè)加載多少數(shù)據(jù)。
分頁(yè)加載就是分批次加載,一般一次加載10條/20條數(shù)據(jù)。當(dāng)進(jìn)入到下一頁(yè)時(shí),再進(jìn)行加載。
另外像如APP的信息流加載,也都是分頁(yè)加載,一次加載個(gè)10條,看完這10條,再刷新加載出新的10條。
全屏加載:全屏加載的方式一般是一次把頁(yè)面中全部的數(shù)據(jù)加載完成,當(dāng)然會(huì)用更多的響應(yīng)時(shí)間。
全屏加載一般用于頁(yè)面元素較少,或者頁(yè)面內(nèi)容必須要同時(shí)看才使用。
懶加載:一次不加載完,當(dāng)頁(yè)面進(jìn)入到屏幕可視區(qū)域時(shí),再加載出對(duì)應(yīng)的數(shù)據(jù)。
現(xiàn)在很多APP的頁(yè)面都是采用這種方式。不出意外的話,研發(fā)都會(huì)選擇這種方式。
預(yù)加載:提前把內(nèi)容加載好,用戶進(jìn)入到頁(yè)面時(shí),可以直接看。
在使用預(yù)加載的時(shí)候,我們需要提前預(yù)估到用戶的下一步操作,提前把數(shù)據(jù)加載好。
像抖音,每個(gè)視頻都是提前加載好的,每次下滑,看到的都是提前加載好的視頻。
你可以刷抖音的時(shí)候試試,把流量/wifi關(guān)上,還是能刷出幾個(gè)視頻。
另外像APP的開屏廣告、彈窗banner一般都是預(yù)加載好,進(jìn)入頁(yè)面直接看。
還有一種“欺騙”用戶的加載方式:后端加載,在頁(yè)面顯示操作成功,但是后端還在處理。
微信發(fā)朋友圈時(shí),就算在斷網(wǎng)的情況下也是可以發(fā)布出來,但是就自己能看到,等聯(lián)網(wǎng)后才能成功發(fā)布出來。
不同的加載方式是在前端能看出來的,畢竟加載不出來數(shù)據(jù),頁(yè)面就是空白的。
但是我還是想在這提,因?yàn)橛行┭邪l(fā)同學(xué)不清楚要用什么加載方式、不清楚怎么加載。
比如說預(yù)加載,研發(fā)不會(huì)知道要提前加載哪些數(shù)據(jù),就需要產(chǎn)品去告訴他們。
四、數(shù)據(jù)存儲(chǔ)
當(dāng)在做表單錄入的時(shí)候,一定會(huì)存在沒填寫完就退出,如果用戶再次進(jìn)入時(shí),那之前錄入的在頁(yè)面還能不能看?
如果還能顯示,那數(shù)據(jù)是存在前端,還是存在后端?
前端一般是指將數(shù)據(jù)緩存在本地,下次進(jìn)入表單頁(yè)面時(shí),讀取本地?cái)?shù)據(jù),展示出之前錄入的數(shù)據(jù)。
如果緩存清空,那之前錄入的數(shù)據(jù)就會(huì)被清空。
后端是指存在數(shù)據(jù)庫(kù)中,下次進(jìn)入表單頁(yè)面時(shí),讀取數(shù)據(jù)庫(kù)里的數(shù)據(jù),展示出之前的數(shù)據(jù)。
除非把數(shù)據(jù)庫(kù)里數(shù)據(jù)給刪除才看不到。
對(duì)于一些數(shù)據(jù)量少、容易填寫的數(shù)據(jù),我們可以直接保存在本地,緩存清了就清了,讓用戶再填寫。
對(duì)于填寫的多,填寫內(nèi)容較復(fù)雜、填寫時(shí)存在經(jīng)常別打斷的情況,我們可以考慮保存的數(shù)據(jù)庫(kù)里。
還有一種緩存到服務(wù)器,通常是在提供公共服務(wù)的場(chǎng)景里
我之前做過一個(gè)公共單位換算的接口,簡(jiǎn)單理解就是:接口傳入原始數(shù)據(jù),通過“原始數(shù)據(jù)×換算比例”后,再返回出計(jì)算結(jié)果。
大多數(shù)情況下,接口傳入的原始數(shù)據(jù)都是相同的,沒有必要每次都去進(jìn)行計(jì)算。
所以只需要把計(jì)算后的數(shù)據(jù)緩存到服務(wù)器中。當(dāng)有相同的原始數(shù)據(jù)傳入時(shí),直接讀取緩存數(shù)據(jù),接口返回緩存里的計(jì)算結(jié)果即可。
對(duì)于沒有計(jì)算過的數(shù)據(jù),才調(diào)用接口進(jìn)行計(jì)算,并將計(jì)算結(jié)果緩存在服務(wù)器中。
這樣就提高了接口的響應(yīng)時(shí)間,還減少了服務(wù)端的壓力。
多說一句,還是以上邊提到的單位換算接口為例。
如果計(jì)算公式變了,或者是換算比例變了,這時(shí)需要有清空緩存的機(jī)制。
如果不清空緩存,還是會(huì)按照之前緩存的數(shù)據(jù)返回接口。只有清空緩存后,才會(huì)按照最新的計(jì)算方式進(jìn)行計(jì)算。
這也引出了對(duì)于緩存需要考慮的幾個(gè)問題:
- 緩存的有效期是多久;
- 緩存要不要自動(dòng)清空;
- 緩存什么時(shí)候清;
- 要不要清空緩存數(shù)據(jù)的功能給用戶;
- ……
這就針對(duì)不同的緩存數(shù)據(jù)在看了。
五、感官
視覺、嗅覺、觸覺、聽覺、味覺都是感官體驗(yàn),我們這里只說下觸覺、聽覺。
1. 觸覺
對(duì)于觸覺,就是手機(jī)振動(dòng)了。
振動(dòng)主要用于消息反饋、提醒,強(qiáng)化感官體驗(yàn)。
- 在抖音點(diǎn)贊時(shí),會(huì)有微微的振動(dòng);
- 微信拍一拍,會(huì)有振動(dòng);
- 今日頭條下拉刷新會(huì)有振動(dòng),點(diǎn)擊tabbar會(huì)有振動(dòng);
- B站長(zhǎng)按視頻快進(jìn)時(shí),會(huì)有振動(dòng);
- ……
以上這些,振動(dòng)主要狀態(tài)反饋。
對(duì)于狀態(tài)反饋,我們可以在頁(yè)面中添加提示,但是會(huì)存在不方便看頁(yè)面的場(chǎng)景。
比如:刷手機(jī)進(jìn)地鐵。
在這種場(chǎng)景下,聽覺、視覺反饋容易被忽略時(shí),可以考慮加入振動(dòng),強(qiáng)化觸覺反饋。
在iOS、Android系統(tǒng)里提供了對(duì)應(yīng)的接口可以調(diào)用。
我們以iOS系統(tǒng)來說,它提供了默認(rèn)震動(dòng)以及自定義震動(dòng)接口。
iOS將振動(dòng)分為3大類:
1)Notification(通知):通知的振動(dòng)分為:成功、警告、錯(cuò)誤。
截圖來自Apple官網(wǎng)
2)impact(不知道咋翻譯)
沖擊觸覺提供了一種物理隱喻,您可以使用它來補(bǔ)充視覺體驗(yàn)。例如,當(dāng)視圖卡入到位時(shí),人們可能會(huì)感到輕敲,或者當(dāng)兩個(gè)重物相撞時(shí)會(huì)感到砰的一聲。
——Apple
impact中分為5種類型:light、medium、heavy、rigid、soft。
3)selection(選擇)
當(dāng) UI 元素的值發(fā)生變化時(shí),選擇觸覺會(huì)提供反饋。
——Apple
大家可以直接去Apple查看說明:
https://developer.Apple.com/design/human-interface-guidelines/patterns/playing-haptics/
對(duì)于振動(dòng)還有個(gè)比較有趣的玩法:
- 在iOS13以上版本,可支持播放視頻+振動(dòng)。
- 抖音在播放視頻時(shí)加入了振動(dòng)。
- B站推出的動(dòng)感視頻中,手機(jī)可以伴隨旋律節(jié)奏進(jìn)行振動(dòng)。
在看視頻時(shí),不僅在視覺、聽覺上刺激用戶,又加上了觸覺,三觀共同刺激,讓用戶感官刺激飆升。
這也有另外一點(diǎn)需要產(chǎn)品關(guān)注:需要知道不同系統(tǒng)的特性。我們需要關(guān)注系統(tǒng)新版本,有沒有可以結(jié)合的新功能。
比如當(dāng)ios支持添加桌面快捷入口后,幾乎所有的APP都開始做將主要功能添加到桌面中。
就算不關(guān)注系統(tǒng)升級(jí)的功能,也得需要關(guān)注自己的產(chǎn)品是不是適配系統(tǒng)新版本,有沒有bug。
2. 聽覺
聽覺就是指的聲音提醒,作用包括消息反饋、提醒、情感渲染等。
聲音提醒比振動(dòng)有更好的效果,而且應(yīng)用的場(chǎng)景更多:
- 掃完健康碼會(huì)有語音提醒;
- 微信、支付寶收款時(shí)會(huì)有語音提醒;
- 有新消息過來,肯定要有聲音提醒;
- 接收到push推送時(shí),會(huì)有提醒;
- ……
現(xiàn)在各個(gè)APP都巴不得每個(gè)用戶有開啟提醒,多個(gè)提醒,就多了個(gè)觸達(dá)方式,就多了流量入口。
這些出于讓數(shù)據(jù)好看的目的我們先不說,而是聲音提醒對(duì)我們產(chǎn)品的用戶體驗(yàn)的好處。
分享一個(gè)我當(dāng)時(shí)做聲音提醒的場(chǎng)景。
客戶使用我們的產(chǎn)品對(duì)工單進(jìn)行實(shí)時(shí)審核,但是工單是不定時(shí)有的,客戶一般是做其他工作時(shí),當(dāng)有待審核工單過來的,然后立馬去進(jìn)行審核。
這個(gè)時(shí)候用戶的注意力是在其他的工作頁(yè)面,不會(huì)一直盯著工單的待審核頁(yè)面。
所以當(dāng)有新工單過來時(shí),通過聲音提醒,審核人員立刻進(jìn)行工單審核。
簡(jiǎn)而言之,就是在某個(gè)場(chǎng)景下,用戶不方便通過屏幕得到提醒時(shí),可以通過聲音做提醒。
我當(dāng)時(shí)道理都懂,就是沒想過加聲音提醒,當(dāng)客戶提了這個(gè)需求之后,就立馬排期。
大家在做產(chǎn)品時(shí),可以考慮消息提醒能不能在某個(gè)場(chǎng)景使用。
在對(duì)于使用聲音提醒時(shí),還有一個(gè)就是使用不同的音效:
成功時(shí)的音效、失敗的音效、提示的音效等等。
關(guān)于音效的內(nèi)容我不專業(yè),在這我就拋磚引個(gè)玉。希望大家在工作中能把音效也考慮進(jìn)去。
六、特殊群體
我之前做APP產(chǎn)品經(jīng)理時(shí),收到過一個(gè)視障用戶發(fā)過來的郵件,這封郵件對(duì)我的觸動(dòng)很大,我將郵件內(nèi)容放在下方,大家可以看下。
這個(gè)用戶提的需求我立馬放到了需求池內(nèi),并和研發(fā)溝通了這個(gè)事。
得到的結(jié)論是不好做,測(cè)試也不好測(cè),另外有很多優(yōu)先級(jí)高的需求等著去做,所以都一直放在了需求池,直到我離職后也沒有實(shí)現(xiàn)。
直到現(xiàn)在我也一直想著這件事。
在這分享給各位,希望各位在做產(chǎn)品時(shí),能想到有些特殊群體也在使用我們的產(chǎn)品,如果我們能幫他們,就盡量幫。
這也引出來我們?cè)谧霎a(chǎn)品時(shí)更到的一個(gè)層面,就是產(chǎn)品經(jīng)理的心性,這個(gè)東西才是更看不見摸不著,有句話叫:善良比聰明更重要。
有些產(chǎn)品為了提高點(diǎn)擊率,故意添加迷惑性的按鈕、故意把關(guān)閉按鈕放到不容易看見的地方、故意寫難懂的文案迷惑用戶。
做這些“不善良”的功能,無非就是KPI壓著,老板盯著,目的也就是提高點(diǎn)擊,提高轉(zhuǎn)化,提高營(yíng)收。
當(dāng)然,善良o(jì)r不善良,我無法評(píng)價(jià),畢竟產(chǎn)品經(jīng)理也只是個(gè)打工人。
我只希望做的每個(gè)功能,都是問心無愧的,用戶罵人的時(shí)候,自己心里能過得去就行。
我之前也被用戶罵,不過那時(shí)我比較年輕,心里就想,是領(lǐng)導(dǎo)要這樣做的,罵的都是領(lǐng)導(dǎo)。
之后我就把用戶罵的話,整理出來給領(lǐng)導(dǎo)看,讓領(lǐng)導(dǎo)心里有點(diǎn)數(shù),然后找機(jī)會(huì)優(yōu)化。
七、總結(jié)
也許大家看了這幾點(diǎn)會(huì)覺得這些不是產(chǎn)品該做的,比如說:
- 使用什么加載方式不應(yīng)該讓研發(fā)去定嗎?
- 對(duì)于熱區(qū),這不是UI/UX需要考慮的嗎?
- ……
這些問題,絕對(duì)沒有錯(cuò),產(chǎn)品經(jīng)理肯定不是什么都知道。
但是,我認(rèn)為作為產(chǎn)品,我們需要站到前邊。
我們需要主動(dòng)提出這些對(duì)產(chǎn)品有好處的需求,然后將這些東西交給更專業(yè)的同學(xué)去做。
如果你的團(tuán)隊(duì)里有經(jīng)驗(yàn)豐富,職業(yè)素養(yǎng)很高的研發(fā)、UI、測(cè)試,那是一件很幸運(yùn)的事。
如果沒有呢,只能靠你自己,你去提,你去推動(dòng),只能靠自己。
你是槍手,團(tuán)隊(duì)成員是槍,想打哪,就等你開槍。
本文由 @王大鹿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
特殊群體確實(shí)一直被忽略
滿滿干貨!總結(jié)的很詳細(xì)!“我認(rèn)為作為產(chǎn)品,我們需要站到前邊”