從用戶體驗(yàn)部分原則來(lái)看閑魚(一)
今天我們主要從用戶體驗(yàn)的部分原則來(lái)看閑魚,主要以產(chǎn)品視覺(jué)設(shè)計(jì)四大原則、交互設(shè)計(jì)十大可用性原則、情感化設(shè)計(jì)來(lái)看閑魚,今天那先講兩個(gè)部分視覺(jué)和交互的用戶體驗(yàn)。
其實(shí)主要是因?yàn)橛脩趔w驗(yàn)分為這個(gè)幾個(gè)方面:
- 視覺(jué)的感官體驗(yàn),給用戶帶來(lái)的是視覺(jué)表現(xiàn)層的體驗(yàn),所以我們把產(chǎn)品視覺(jué)設(shè)計(jì)四大原則來(lái)對(duì)照用戶的感官體驗(yàn)。
- 交互的用戶體驗(yàn),也就是產(chǎn)品設(shè)計(jì)中給用戶使用過(guò)程產(chǎn)生交互互動(dòng),比如點(diǎn)擊效果、輸入、彈出、切換等等。所以我們用交互設(shè)計(jì)尼爾森十大可用性原則來(lái)對(duì)照交互的用戶體驗(yàn)。
- 情感用戶體驗(yàn),這是由外而內(nèi)的心理作用,給用戶帶來(lái)心理認(rèn)同,增加滿足和愉悅感。所以我們用情感化設(shè)計(jì)原則來(lái)對(duì)照我們的情感用戶體驗(yàn)。
產(chǎn)品視覺(jué)設(shè)計(jì)四大原則
在產(chǎn)品視覺(jué)的設(shè)計(jì)中我們可以用四大原則來(lái)滿足用戶感官體驗(yàn)的優(yōu)化,主要是:對(duì)齊、重復(fù)、親密、 對(duì)比。
1. 對(duì)齊
頁(yè)面信息對(duì)齊,左對(duì)齊、右對(duì)齊、居中對(duì)齊,保持頁(yè)面視覺(jué)統(tǒng)一。
移動(dòng)端的閱讀習(xí)慣是從左往右的,因此我們也是遵循向左對(duì)齊,或者尾部信息向右對(duì)齊。居中對(duì)齊在整體信息排列中較少使用,除非是比較正規(guī)、傳統(tǒng)的產(chǎn)品設(shè)計(jì)使用居中對(duì)齊的大關(guān)系,而在小細(xì)節(jié)的對(duì)齊中居中對(duì)齊應(yīng)對(duì)logo/頭像等也有使用。從開(kāi)發(fā)的成本上,對(duì)齊的設(shè)計(jì)也是方便了他們的開(kāi)發(fā)。
舉例子:閑魚消息頁(yè)面頂部功能區(qū)域采用居中對(duì)齊方式,比較正式一些,突出顯示引導(dǎo)用戶點(diǎn)擊;個(gè)人頭像和消息左對(duì)齊顯示,發(fā)布圖片右對(duì)齊顯示。閑魚我的頁(yè)面,功能圖標(biāo)和信息左對(duì)齊顯示,消息和進(jìn)入按鈕右對(duì)齊顯示;贊賞、關(guān)注、粉絲居中顯示。重點(diǎn)突出的信息,居中顯示,引導(dǎo)用戶瀏覽路徑。常規(guī)列表左對(duì)齊、右對(duì)齊顯示,滿足用戶瀏覽習(xí)慣,提升用戶體驗(yàn)。
2. 重復(fù)
重復(fù)比較簡(jiǎn)單的理解為一致性,顏色、形狀、材質(zhì)、空間關(guān)系、線寬、材質(zhì)、空間等等。我們常說(shuō)視覺(jué)規(guī)范的一致性就是這樣,保持這些單元的統(tǒng)一,貫穿始終這樣我們的頁(yè)面排版才會(huì)整體、產(chǎn)品設(shè)計(jì)才會(huì)整體。
舉例子:閑魚消息頁(yè)面,頭部功能區(qū)域圓形圖標(biāo)重復(fù),字體重復(fù)。消息列表頭像、名稱、消息、圖片重復(fù),保持一致性,和統(tǒng)一。首頁(yè)部分功能區(qū)域圖標(biāo)重復(fù)、風(fēng)格重復(fù)一致;活動(dòng)區(qū)域標(biāo)題和圖片保持重復(fù)性原則;在類別篩選部分,每個(gè)類別瀑布流展現(xiàn),宮格重復(fù),保證頁(yè)面篩選一致性。
3. 親密
如果多個(gè)項(xiàng)相互之間存在很近的親密性,它們就會(huì)成為一個(gè)視覺(jué)整體。因此我們?cè)谠O(shè)計(jì)時(shí)候往往需要將信息整合把有親密組織關(guān)系的內(nèi)容整合一起。減少了混亂不堪的信息內(nèi)容排列,整合框架,這也是方便用戶瀏覽,滿足了易讀性、易用性。個(gè)人觀點(diǎn)(在產(chǎn)品設(shè)計(jì)中親密度的把控,要多學(xué)理論、然后理論實(shí)踐結(jié)合,多多體證,才能更好的滿足用戶體驗(yàn))
舉例子:閑魚首頁(yè)分為4大部分,功能區(qū)域、活動(dòng)區(qū)域、閑置區(qū)域、分類區(qū)域,每個(gè)區(qū)域相互親密,形成一個(gè)整體,通過(guò)間距分割,滿足用戶的易讀性,降低學(xué)習(xí)記憶負(fù)擔(dān)。消息頁(yè)面就更明顯了,主要分為功能操作區(qū)域和消息列表區(qū)域,每個(gè)區(qū)域相互親密通過(guò)間隔和表現(xiàn)形式區(qū)分。(這類需求就沒(méi)有基本需求那樣必備,是產(chǎn)品中期望需求體驗(yàn)越多越好,用戶越滿意,反之用戶滿意度也會(huì)下降)。
4. 對(duì)比
對(duì)比的通俗來(lái)說(shuō)就是要有對(duì)比性、不同點(diǎn),就是要避免頁(yè)面上的元素太過(guò)相似,這樣那既要避免了同質(zhì)化也強(qiáng)調(diào)了差異化的節(jié)奏感,突出重點(diǎn)信息傳遞。當(dāng)然這個(gè)度需要我們?cè)谌粘9ぷ髦卸喽喾e累。比較常見(jiàn)的對(duì)比有方向?qū)Ρ?、信息?duì)比、顏色對(duì)比、對(duì)稱對(duì)比、比例對(duì)比等等。
舉例子:閑魚聊天頁(yè)面,雙方消息顏色對(duì)比,色彩的對(duì)比更加強(qiáng)的雙方聊天的視覺(jué)效果,對(duì)比也是比較明顯。閑魚的兌換詳情頁(yè)面,文字和信息的對(duì)比,突出展示內(nèi)容信息,讓用戶一目了然區(qū)分內(nèi)容和圖片,多重信息對(duì)比,也增加了信息獲取的質(zhì)量,提升用戶體驗(yàn)。
產(chǎn)品設(shè)計(jì)的四大原則是一位美國(guó)設(shè)計(jì)師Robin Williams歸納整理的,文章中也有許多排版中案例說(shuō)明,如果想進(jìn)一步了解排版設(shè)計(jì)四大原則,可以看看這本書《寫給大家看的設(shè)計(jì)書》。
交互設(shè)計(jì)十大可用性原則
尼爾森(Jakob Nielsen)是一位人機(jī)交互學(xué)博士,于1995年1月1日發(fā)表了「十大可用性原則」。尼爾森的十大可用性原則是尼爾森博士分析了兩百多個(gè)可用性問(wèn)題而提煉出的十項(xiàng)通用型原則。它是產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)設(shè)計(jì)的重要參考標(biāo)準(zhǔn),值得深入研究與運(yùn)用。
——百度百科
這是一套實(shí)用性的原則,無(wú)論是產(chǎn)品開(kāi)發(fā)還是落地,都能夠很好的幫助我們提升用戶體驗(yàn)和設(shè)計(jì)質(zhì)量。以人為本,以用戶為中心,讓我們?cè)O(shè)計(jì)師能夠很好的明確設(shè)計(jì)方向和用戶需求的科學(xué)方法論。
1. 狀態(tài)可見(jiàn)性原則
解讀狀態(tài)可見(jiàn)原則,我們將會(huì)從實(shí)際的案例中挑選,結(jié)合原則進(jìn)行說(shuō)明,方便大家更好的理解和把控狀態(tài)可見(jiàn)性原則。
(1)讓用戶知道系統(tǒng)在做什么
就是在產(chǎn)品設(shè)計(jì)過(guò)程中,像用戶展示系統(tǒng)進(jìn)行的操作狀態(tài)。
舉個(gè)例子::比如當(dāng)頁(yè)面刷新過(guò)程中,告知用戶加載進(jìn)度。當(dāng)系統(tǒng)進(jìn)行判斷操作過(guò)程中告知用戶當(dāng)前操作狀態(tài)。當(dāng)用戶清除緩存時(shí)告知用戶產(chǎn)品怎么清除緩存,等等。
(2)讓用戶知道自己處于系統(tǒng)的什么位置
其實(shí)就是我是在哪里呀,我要去哪呀,從哪去呀,讓用戶一目了然,不用太多學(xué)習(xí)成本。這是在頁(yè)面元素中的核心,一旦用戶不知道自己處于系統(tǒng)什么位置,就會(huì)容易操作失誤或者放棄產(chǎn)品。失去了設(shè)計(jì)為用戶服務(wù)的本質(zhì)。
舉個(gè)例子在閑魚頁(yè)面我們系統(tǒng)的標(biāo)題欄、TAB欄的提示貫穿整體,用戶知道我們所處的什么頁(yè)面。比如認(rèn)證提示,每一步告知用戶進(jìn)行到哪里了。
(3)讓用戶知道系統(tǒng)做了什么
讓用戶知道產(chǎn)品做了什么,明確了知道下一步如何操作。
舉個(gè)例子:在閑魚登錄時(shí)當(dāng)你輸入密碼錯(cuò)誤等,系統(tǒng)提示密碼輸入錯(cuò)誤,可以重新輸入。
當(dāng)你退出登錄,系統(tǒng)提示保存了當(dāng)前數(shù)據(jù),下次可繼續(xù)登錄。當(dāng)你清除緩存時(shí),產(chǎn)品展示已清除置灰,數(shù)量變化等。
(4)讓用戶知道自己在做什么
當(dāng)用戶進(jìn)行操作時(shí),產(chǎn)品及時(shí)反饋,用戶做了什么。
舉個(gè)例子:在閑魚中最簡(jiǎn)單的例子就是當(dāng)我們聊天時(shí)候,我們輸入信息發(fā)送,顯示在我們跟對(duì)方的聊天頁(yè)面中。
(5)新手提示
作為我們的新用戶是承載整個(gè)產(chǎn)品流量的口子,新手的提示關(guān)系著我們運(yùn)營(yíng)中的留存,這個(gè)方面做好,也是對(duì)運(yùn)營(yíng)業(yè)務(wù)鏈路有著很大的幫助。
舉個(gè)例子:在新手提示中,有一個(gè)設(shè)計(jì)要點(diǎn)就是可以采用趣味性設(shè)計(jì),更好的與用戶情感交流。
2. 環(huán)境貼切原則
簡(jiǎn)單的理解就是產(chǎn)品設(shè)計(jì)要跟現(xiàn)實(shí)相互結(jié)合,產(chǎn)品設(shè)計(jì)要符合用戶認(rèn)知,不能做個(gè)我認(rèn)為用戶是這樣理解的產(chǎn)品哈哈哈。
(1)圖片、圖標(biāo)與現(xiàn)實(shí)相互結(jié)合
符合用戶對(duì)描述圖標(biāo)功能的認(rèn)證。
舉個(gè)例子:在閑魚首頁(yè)功能頁(yè)面,二手手機(jī)圖標(biāo)采用現(xiàn)實(shí)生活手機(jī)作為造型,游戲交易采用游戲手柄作為造型,二手圖書采用圖書翻頁(yè)形式作為造型,珠寶文玩采用珠寶玉器作為造型,符合用戶在現(xiàn)實(shí)生活中熟悉的東西,滿足認(rèn)知,有良好體驗(yàn)。?
(2)文字表達(dá)滿足用戶認(rèn)知
符合用戶自己現(xiàn)實(shí)生活的認(rèn)證場(chǎng)景。
舉個(gè)例子:在魚塘頁(yè)面,文藝書畫、樂(lè)器等興趣魚塘,我們叫品質(zhì)文青聚集地,文藝青年在當(dāng)下比較火的網(wǎng)絡(luò)名詞,喜歡文化藝術(shù)的青年,符合用戶年齡人群的環(huán)境認(rèn)知。
3. 撤銷重做原則
這個(gè)比較好理解就是產(chǎn)品設(shè)計(jì)滿足撤銷重做原則,防止用戶出現(xiàn)后悔操作或者誤操作等等,滿足用戶體驗(yàn)?zāi)嫦虿僮鳌?/p>
(1)撤銷
瀏覽操作可以撤銷到前一步,舉個(gè)例子:閑魚頁(yè)面常見(jiàn)的返回操作就是撤銷的一個(gè)例子。
(2)重做
就是用戶撤銷上一步,又反悔了要到之前哪一步;或者用戶操作完成發(fā)布又反悔了重新發(fā)布,滿足用戶充足的反悔余地,給予用戶對(duì)產(chǎn)品的信心和控制感。
舉個(gè)例子:閑魚發(fā)布閑置后后悔了要重新發(fā)布,可以在管理頁(yè)面進(jìn)行編輯或者刪除重發(fā)操作。
4. 一致性原則
一致性原則主要包含顏色、字體、圖標(biāo)、圖片、功能、提示等等全局的一致性,給用戶帶來(lái)全局一致的舒適體驗(yàn)。由于一致性包含內(nèi)容較多,所以下面就舉幾個(gè)主要例子來(lái)進(jìn)行說(shuō)明一致性原則。
(1)顏色一致性
顏色一致性是全局操作的重要一點(diǎn),也是符合品牌基因貫通產(chǎn)品的重要體現(xiàn)。
舉個(gè)例子:顏色一致性在我的頁(yè)面和首頁(yè)頭部有了明顯體現(xiàn)。
(2)提示一致性
提示一致性只要是提示操作一致性,包含設(shè)計(jì)的圓角、字體層級(jí)、顏色等融合一起的一致性。
舉個(gè)例子:這次例子是不一致性的例子,取消保存、刪除、退出等操作一個(gè)彈窗一個(gè)設(shè)計(jì)樣式,不符合基本的提示一致性設(shè)計(jì),當(dāng)然這也是我們?cè)O(shè)計(jì)師在自己產(chǎn)品體驗(yàn)設(shè)計(jì)中需要改進(jìn)優(yōu)化的地方。
5. 防錯(cuò)原則
簡(jiǎn)單意思防止用戶出錯(cuò),在用戶錯(cuò)誤操作或者可能因?yàn)檎`操作引起不必要的操作損失時(shí),給以用戶提示,防止用戶出錯(cuò)。這里主要舉兩個(gè)比較常見(jiàn)類型的例子,幫助設(shè)計(jì)師理解放錯(cuò)原則。
(1)退出操作提示
退出登錄退出保存時(shí)提示操作,防止用戶丟失數(shù)據(jù)出錯(cuò)。
舉個(gè)例子:在退出登錄提示是否要注銷登錄,把確認(rèn)層級(jí)加大,放在右邊,清晰提示用戶,防止用戶出錯(cuò)。
(2)登錄操作
登錄操作時(shí),滿足登錄操作條件后才會(huì)顯示按鈕高亮,其他情況下置灰操作,防止用戶錯(cuò)誤點(diǎn)擊。
舉個(gè)例子:閑魚登錄操作輸入驗(yàn)證碼后,按鈕高亮可以進(jìn)行登錄(登錄操作不能截圖,大家可以自己下載閑魚去體驗(yàn)一下)
6. 減少記憶負(fù)擔(dān)
系統(tǒng)主動(dòng)識(shí)別,減少用戶記憶負(fù)擔(dān),常見(jiàn)有掃碼識(shí)別、語(yǔ)音識(shí)別、指紋識(shí)別、掃臉識(shí)別等等系統(tǒng)操作。
舉個(gè)例子:閑魚掃碼識(shí)別用戶,識(shí)別條形碼商品等等。
7. 靈活高效原則
簡(jiǎn)單理解就是靈活高效設(shè)計(jì),滿足大多數(shù)用戶操作需求,操作高效便捷。因?yàn)椴煌a(chǎn)品類型不同,這里舉幾個(gè)常見(jiàn)類型說(shuō)明,如自動(dòng)回復(fù),表情包預(yù)覽、常用表情包等。
(1)自動(dòng)回復(fù)
比較典型的靈活高效設(shè)置,用戶不在線直接自動(dòng)回復(fù),選擇不同回復(fù)語(yǔ)。
舉個(gè)例子:閑魚我的頁(yè)面設(shè)置自動(dòng)回復(fù),靈活高效。
(2)表情包預(yù)覽
聊天時(shí)選擇自己的表情包,預(yù)覽,選擇適合自己的表情發(fā)送。
舉個(gè)例子:聊天頁(yè)面表情包預(yù)覽,可愛(ài)的閑魚表情切換,滿足用戶操作需求。
8. 易掃原則
簡(jiǎn)單理解就是用戶掃描產(chǎn)品信息時(shí),能夠容易獲取信息。因此需要突出層級(jí)強(qiáng)化主要部分。
舉個(gè)例子:閑魚的我的頁(yè)面,每個(gè)區(qū)塊進(jìn)行功能區(qū)分,分為買、賣、玩、其他4個(gè)主要部分。降調(diào)層級(jí),同時(shí)在區(qū)塊內(nèi)每個(gè)功能圖標(biāo)宮格顯示,也易于用戶查找,滿足了易掃原則,提示了用戶體驗(yàn)。
9. 容錯(cuò)原則
簡(jiǎn)單理解就是靈活高效設(shè)計(jì),滿足大多數(shù)用戶操作需求,操作高效便捷。因?yàn)椴煌a(chǎn)品類型不同,這里舉幾個(gè)常見(jiàn)類型說(shuō)明,如:自動(dòng)回復(fù)、表情包預(yù)覽、常用表情包等。
(1)反饋幫助
產(chǎn)品出現(xiàn)問(wèn)題或者用戶出現(xiàn)問(wèn)題,給予反饋提示或者幫助。
舉個(gè)例子:網(wǎng)絡(luò)無(wú)法打開(kāi)時(shí),提示開(kāi)小差了,可以刷新一下試試。
(2)限制操作
防止產(chǎn)品出現(xiàn)一些問(wèn)題,可以進(jìn)行提前限制操作來(lái)避免。
舉個(gè)例子:下載圖片有時(shí)候流量太少了,怎么辦,可以通過(guò)對(duì)圖像下載限制,避免用戶損失。
10. 人性化幫助
簡(jiǎn)單理解就是幫助用戶操作,幫助用戶解決問(wèn)題,給予提示、引導(dǎo)、建議、反饋等。這里主要說(shuō)明2個(gè)主要常見(jiàn)的人性化幫助,信息提示和幫助說(shuō)明。
(1)信息提示
產(chǎn)品新增功能或者復(fù)雜功能時(shí),浮窗提示操作。舉個(gè)例子:新手撈魚互動(dòng),提示點(diǎn)擊引導(dǎo)信息,幫助用戶更好的操作。
?
(2)幫助說(shuō)明
APP常用功能,用戶有疑問(wèn)或者不懂得操作時(shí),查看幫助說(shuō)明,也能進(jìn)行及時(shí)反饋:,方便用戶更好的使用產(chǎn)品。
舉個(gè)例子:閑魚的幫助說(shuō)明功能更加全面,滿足不用用戶場(chǎng)景的問(wèn)題需求,也能及時(shí)和客戶進(jìn)行咨詢反饋信息。
本文由 @阿韓設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
- 目前還沒(méi)評(píng)論,等你發(fā)揮!