假設(shè)一款新的App需要評(píng)論功能,該如何設(shè)計(jì)?
無(wú)論是設(shè)計(jì)一款產(chǎn)品還是一個(gè)功能,“用戶(hù)體驗(yàn)的5個(gè)層面”都會(huì)貫穿始終,從產(chǎn)品的方向骨架開(kāi)始,逐漸豐富完善,直到細(xì)枝末節(jié)的處理。
近些年, 無(wú)論是媒體、社交、電商、音樂(lè)、視頻,移動(dòng)應(yīng)用的社交化越來(lái)越成熟,都在培養(yǎng)用戶(hù)間或強(qiáng)或弱的社交關(guān)系。各種應(yīng)用中的“評(píng)論”功能已成為其不可或缺的一部分?!霸u(píng)論”不再以用戶(hù)發(fā)表意見(jiàn)為唯一目的,還營(yíng)造出了一種隱藏在屏幕背后的社群關(guān)系。在很多應(yīng)用中,依靠這種“四兩撥千斤”的社群關(guān)系,涌現(xiàn)出無(wú)限的產(chǎn)品智慧。
而在手機(jī)app使用頻率蓋過(guò)pc網(wǎng)頁(yè)的背景下,人們出于不同目的、處在不同場(chǎng)景、在有限尺寸的屏幕上經(jīng)歷著不同復(fù)雜度的評(píng)論活動(dòng),縱使是多樣性十足的一個(gè)動(dòng)作,設(shè)計(jì)工作也并不是沒(méi)有方法可循,接下來(lái)我們就一起探討一下。
假設(shè)你在設(shè)計(jì)一款新的app,并且初步認(rèn)為需要評(píng)論功能,如何進(jìn)行設(shè)計(jì)思考呢?
無(wú)論是設(shè)計(jì)一款產(chǎn)品還是一個(gè)功能,“用戶(hù)體驗(yàn)的5個(gè)層面”都會(huì)貫穿始終,從產(chǎn)品的方向骨架開(kāi)始,逐漸豐富完善,直到細(xì)枝末節(jié)的處理。
簡(jiǎn)單復(fù)習(xí)一下這5個(gè)層次:
- “戰(zhàn)略層”:五要素中最重要的一層,是用戶(hù)體驗(yàn)的起點(diǎn),戰(zhàn)略可以演變和改變,決定著整個(gè)產(chǎn)品的走向。
- “范圍層“:戰(zhàn)略層形象化的第一步。帶著經(jīng)營(yíng)者和用戶(hù)兩方面的需求,就能弄清楚如何滿(mǎn)足戰(zhàn)略目標(biāo),提供怎么樣的功能。
- “結(jié)構(gòu)層”:開(kāi)啟交互設(shè)計(jì)的第一步,即信息架構(gòu)的設(shè)計(jì)。將零散的需求組合為一個(gè)整體,并合理展現(xiàn)出來(lái)。
- “框架層”:交互設(shè)計(jì)的第二步,在這一步會(huì)確定很詳細(xì)的界面布局,確定整個(gè)產(chǎn)品的上下文。
- “表現(xiàn)層“:視覺(jué)設(shè)計(jì)的過(guò)程,也是用戶(hù)首先會(huì)注意到的方面,是冰山的最上一角。界面中的配色和風(fēng)格,都在這一步完成。
這5個(gè)層次可以很好地引導(dǎo)設(shè)計(jì)思路,我們可以把“評(píng)論區(qū)的設(shè)計(jì)問(wèn)題”單獨(dú)拿出來(lái),利用這5層來(lái)提出相應(yīng)的引導(dǎo)性問(wèn)題(請(qǐng)從下往上看):
利用用戶(hù)體驗(yàn)5個(gè)層次提出引導(dǎo)性問(wèn)題
接下來(lái)我會(huì)逐層說(shuō)明,但會(huì)著重講解與“交互設(shè)計(jì)”相關(guān)的兩層。
一. 戰(zhàn)略層:確定產(chǎn)品類(lèi)型和目標(biāo)
在最初階段,需要首先確定產(chǎn)品的類(lèi)型。常見(jiàn)的移動(dòng)App類(lèi)型如社交、電商、服務(wù)、自媒體、新聞、社群、音樂(lè)、視頻類(lèi)。但隨著互聯(lián)網(wǎng)的發(fā)展,越來(lái)越多的app都在向多重類(lèi)型發(fā)展。舉個(gè)栗子:小紅書(shū)的“社區(qū)+電商”的特征,其優(yōu)勢(shì)很明顯,用戶(hù)的粘性大幅增加,這構(gòu)成了小紅書(shū)一個(gè)非常強(qiáng)大的壁壘。多重類(lèi)型的出現(xiàn),展示了產(chǎn)品更多的可能性,是做產(chǎn)品的一種智慧。而如何確定類(lèi)型,取決于對(duì)產(chǎn)品目標(biāo)的設(shè)定——解決什么問(wèn)題?給誰(shuí)用?怎樣算成功?確定了產(chǎn)品類(lèi)型后,就有了整體的大方向,后面的每一步都是基于戰(zhàn)略層的決定而發(fā)展。
二. 范圍層:用戶(hù)有何需求?為什么要評(píng)論?
有了產(chǎn)品的戰(zhàn)略目標(biāo),就要開(kāi)始思考,提供哪些功能去實(shí)現(xiàn)它?如果你想提供評(píng)論功能,首先需要思考用戶(hù)為什么要評(píng)論。我們從“寫(xiě)評(píng)論”和“看評(píng)論”兩方面來(lái)分析。
用戶(hù)為什么要寫(xiě)評(píng)論?總的來(lái)說(shuō),縱觀(guān)市面主流app以及個(gè)人體會(huì),用戶(hù)寫(xiě)評(píng)論的動(dòng)機(jī)可分為三大類(lèi):溝通感情、表達(dá)見(jiàn)解、求助。而用戶(hù)為什么要看評(píng)論?其動(dòng)機(jī)與寫(xiě)評(píng)論非常不同,頻率也高得多,可分為四大類(lèi):依靠評(píng)論做決策、尋找答案、尋找共鳴、查看反饋(比如朋友圈)。
仔細(xì)分析用戶(hù)的動(dòng)機(jī),可以知道產(chǎn)品提供此功能的意義在何處。如果你的app經(jīng)過(guò)戰(zhàn)略層和范圍層的過(guò)濾,結(jié)論是不需要任何評(píng)論功能,那也是產(chǎn)品方向上相當(dāng)大的邁進(jìn)。例如唯品會(huì),在移動(dòng)app端并不設(shè)有評(píng)論功能,原因在于它的快銷(xiāo)特征,當(dāng)用戶(hù)收貨后想要夸贊或吐槽時(shí),相應(yīng)的產(chǎn)品可能已經(jīng)甩光,評(píng)論則失去了意義。
三. 結(jié)構(gòu)層:如果需要評(píng)論,采用什么樣的展現(xiàn)形式?
在我們了解了用戶(hù)評(píng)論的諸多動(dòng)機(jī),也就是需求來(lái)源之后,如何把零散的需求可視化?魔力就在這一步。
我們還是從“寫(xiě)評(píng)論”和“看評(píng)論”兩方面來(lái)分析。
3.1 寫(xiě)評(píng)論
這個(gè)動(dòng)作可輕可重,輕到點(diǎn)擊圖標(biāo),重到長(zhǎng)篇大論。觸發(fā)評(píng)論的入口該如何設(shè)計(jì)?
3.1.1 點(diǎn)擊圖標(biāo)
社交中的贊,多媒體中的下載和分享,電商中的收藏,社群中的頂和踩,都能非常精準(zhǔn)地表達(dá)用戶(hù)的態(tài)度。如何取舍?
具有“評(píng)論”功能的常用圖標(biāo)
“贊”/“收藏”/“頂”/“下載”/“分享”——這五個(gè)動(dòng)作都有表示喜歡和贊賞的意思。按程度來(lái)看,“贊”、“收藏”、“頂”的程度相似,在一個(gè)app中只需出現(xiàn)最貼近產(chǎn)品語(yǔ)義的那個(gè);而“下載”和“分享”則表示更高階的喜歡,“下載”是想要長(zhǎng)久保留一件東西的態(tài)度,而“分享”是把喜歡一件東西的心情宣揚(yáng)出去,讓更多人喜歡,所以程度更強(qiáng)烈。以上幾個(gè)功能可以根據(jù)用戶(hù)的需求,酌情選擇。
“踩”——無(wú)論在電商,音樂(lè)視頻,社群,服務(wù)型app中,都有與“踩”語(yǔ)義相似的功能,例如淘寶中的“差評(píng)”,音樂(lè)app中的“不感興趣”,知乎中的“不同意”。而在社交app中,除了曾經(jīng)短暫出現(xiàn)于facebook中之外,現(xiàn)在已經(jīng)沒(méi)有實(shí)例。因此,在設(shè)計(jì)“踩”功能時(shí)需要慎重考慮用戶(hù)的玻璃心,如果你的app是社交類(lèi),尤其是強(qiáng)關(guān)系社交,則不建議使用。
3.1.2 編輯文字
前文中提出的用戶(hù)在寫(xiě)評(píng)論時(shí)的三大動(dòng)機(jī):溝通感情、表達(dá)見(jiàn)解、求助,它們特征不同,這會(huì)導(dǎo)致評(píng)論的入口展現(xiàn)形式也不同。
(1)溝通感情
多出現(xiàn)在強(qiáng)關(guān)系社交app中,例如微信朋友圈。特征:很強(qiáng)的針對(duì)性、有即時(shí)性。所以寫(xiě)評(píng)論的入口需要設(shè)置在每一個(gè)人的動(dòng)態(tài)后,如下圖:
社交中的評(píng)論入口
(2)表達(dá)見(jiàn)解
可分為依次遞進(jìn)的三個(gè)層次,一般見(jiàn)解、有態(tài)度的評(píng)判、深度探討。
1)一般見(jiàn)解
包括對(duì)自媒體、音樂(lè)、新聞等內(nèi)容的評(píng)價(jià),對(duì)反饋期望不高。特征:簡(jiǎn)潔快速、有即時(shí)性。所以入口需要設(shè)置在方便點(diǎn)擊且明顯的位置,考慮到拇指觸達(dá)最舒適的區(qū)域,可將輸入框放在頁(yè)面下方,如下圖:
一般見(jiàn)解的評(píng)論入口
一些實(shí)際參考:
實(shí)例1
2)有態(tài)度的評(píng)判
通常在消費(fèi),或體驗(yàn)過(guò)后進(jìn)行評(píng)價(jià)。特征:非即時(shí)性——需要體驗(yàn)的時(shí)間,例如網(wǎng)購(gòu)、打車(chē)、看電影。所以在用戶(hù)未體驗(yàn)時(shí),不應(yīng)提供入口,識(shí)別用戶(hù)體驗(yàn)完畢的時(shí)間點(diǎn)并將用戶(hù)完成的訂單收集起來(lái),再提供評(píng)價(jià)入口,如下圖:
有態(tài)度的評(píng)價(jià)入口
一些實(shí)際參考:
實(shí)例2
在消費(fèi)類(lèi)的參考實(shí)例中,有一個(gè)例外——大眾點(diǎn)評(píng)。由于它無(wú)法精確識(shí)別用戶(hù)是否到店,而自身又是點(diǎn)評(píng)類(lèi)app,所以它的評(píng)價(jià)入口設(shè)在了通用位置。除此之外,另需注意此類(lèi)評(píng)論的時(shí)效性,例如時(shí)隔一年后再來(lái)評(píng)價(jià)曾經(jīng)住過(guò)的酒店是否有意義?因此過(guò)了時(shí)效后,則不應(yīng)該允許用戶(hù)評(píng)論。
3)話(huà)題探討
深度討論一個(gè)問(wèn)題,用戶(hù)的表達(dá)欲比較強(qiáng)烈,對(duì)反饋期望很高。特征:篇幅可能較長(zhǎng)、有即時(shí)性。對(duì)于這種評(píng)論,應(yīng)提供寫(xiě)作氛圍濃厚的獨(dú)立頁(yè)面,如下圖:
話(huà)題探討評(píng)論入口
一些實(shí)際參考:
實(shí)例3
(3)求助
在評(píng)論中提問(wèn),通常會(huì)得到其他人或樓主的解答。特征:簡(jiǎn)潔快速、有即時(shí)性,與剛才講到的“一般見(jiàn)解”特征類(lèi)似,所以表現(xiàn)形式也類(lèi)似,在方便點(diǎn)擊且明顯的位置。實(shí)際參考:
實(shí)例4-好好住,網(wǎng)友詢(xún)問(wèn)家具鏈接
3.2 看評(píng)論
上一層中,我們分析出用戶(hù)在看評(píng)論時(shí)的四大動(dòng)機(jī):依靠評(píng)論做決策、尋找答案、尋找共鳴、查看反饋。同樣需要依據(jù)它們的不同特征,設(shè)計(jì)不同的展現(xiàn)形式。
3.2.1 依靠評(píng)論做決策
用戶(hù)的消費(fèi)決策通常需要基于其他人對(duì)商品的評(píng)價(jià)。特征:評(píng)論數(shù)量不斷增長(zhǎng)、需要引導(dǎo)性入口、評(píng)論間無(wú)互動(dòng)、有即時(shí)性。由于數(shù)量的增長(zhǎng),為了保持頁(yè)面篇幅穩(wěn)定,需要將評(píng)論隔離出來(lái),建立新的頁(yè)面;但需要一個(gè)引導(dǎo)性入口,所以可放置熱門(mén)/最新評(píng)論在前一頁(yè);評(píng)論間無(wú)互動(dòng),只需提供單純的評(píng)論列表,如下圖:
幫助決策的評(píng)論展示方式
一些實(shí)際參考:
實(shí)例5
可以把這種展示方式稱(chēng)為:半沉浸式。
3.2.2 尋找答案
搜索問(wèn)題,尋找自己想要的答案。特征:?jiǎn)栴}篇幅較短、評(píng)論間有互動(dòng)、有即時(shí)性。由于問(wèn)題簡(jiǎn)練,頁(yè)面下方仍有很多空間,可以跟隨瀑布式評(píng)論;評(píng)論間的互動(dòng)既可以用嵌套,也可以用跳轉(zhuǎn)的方式展示,選擇哪一種取決于評(píng)論內(nèi)容的篇幅長(zhǎng)短,短評(píng)則可以用層層嵌套的方式,而如果產(chǎn)品性質(zhì)導(dǎo)致評(píng)論需要一定篇幅,則建議用跳轉(zhuǎn)方式,如下圖。
左:嵌套式,右:跳轉(zhuǎn)式
一些實(shí)際參考:
實(shí)例6
可把這種展示方式稱(chēng)為:瀑布流式+嵌套式/瀑布流式+跳轉(zhuǎn)式
3.2.3 尋找共鳴
影評(píng)、書(shū)評(píng)、樂(lè)評(píng),都可以幫助看客們找到共鳴。
(1)樂(lè)評(píng)
特征:評(píng)論篇幅較短、偶爾有互動(dòng)、有即時(shí)性。音樂(lè)解放了用戶(hù)的眼睛,可以實(shí)時(shí)看評(píng)論,但播放頁(yè)面已無(wú)操作空間,所以需要提供獨(dú)立沉浸式頁(yè)面展示評(píng)論,互動(dòng)的評(píng)論可以嵌套展示,如下圖:
實(shí)例7
可把這種展示方式稱(chēng)為:沉浸式
(2) 影評(píng)、書(shū)評(píng)
特征:有長(zhǎng)評(píng)與短評(píng)之分、評(píng)論間有互動(dòng)、有即時(shí)性。在頁(yè)面中需要分出長(zhǎng)評(píng)、短評(píng)區(qū)域,為避免兩種評(píng)論羅列使頁(yè)面過(guò)長(zhǎng),需將所有兩種評(píng)論分別隔離到新頁(yè)面;在新頁(yè)面中,由于長(zhǎng)評(píng)論篇幅較長(zhǎng),利用列表管理時(shí)需截成統(tǒng)一篇幅,這導(dǎo)致完整的評(píng)論需再次被隔離到新頁(yè)面。因此短評(píng)需要兩個(gè)頁(yè)面,長(zhǎng)評(píng)則需要三個(gè)頁(yè)面,如下圖。
影評(píng)、書(shū)評(píng)展示方式
對(duì)于長(zhǎng)評(píng)和短評(píng)本身來(lái)說(shuō),也相當(dāng)于是半沉浸式的展現(xiàn)方式。
3.2.4 查看反饋
發(fā)表朋友圈或文章后,用戶(hù)通常會(huì)迫不及待地查看反饋。特征:評(píng)論數(shù)量有限、有互動(dòng)性、即時(shí)性。由于評(píng)論與正文相關(guān)性極強(qiáng),并且通常較為簡(jiǎn)練,可使用瀑布流式的展現(xiàn)方式,可參照微信朋友圈。
以上針對(duì)“寫(xiě)評(píng)論”與“看評(píng)論”時(shí)用戶(hù)的不同動(dòng)機(jī),推薦了相應(yīng)的界面展現(xiàn)方式。這些結(jié)論并非權(quán)威,但可以作為思考的切入點(diǎn)。完成這一步,評(píng)論區(qū)的展示用幾個(gè)界面,如何跳轉(zhuǎn),便可以確定了。接下來(lái)的一步就要開(kāi)始思考界面具體內(nèi)容。
四. 框架層:如何安排評(píng)論的順序才更有意義?
用戶(hù)寫(xiě)完評(píng)論后都會(huì)不自覺(jué)地提出這樣一個(gè)問(wèn)題:我的評(píng)論去哪了?而你的評(píng)論去哪,取決于評(píng)論如何排序。怎樣的排序才合理,針對(duì)不同的用戶(hù)需求,標(biāo)準(zhǔn)也是不同的。仍然根據(jù)用戶(hù)看評(píng)論的四個(gè)動(dòng)機(jī):依靠評(píng)論做決策、尋找答案、尋找共鳴、查看反饋來(lái)分析。
4.1 依靠評(píng)論做決策
通過(guò)上文了解到,此類(lèi)需求多發(fā)生在電商、服務(wù)類(lèi)app中。而商家給出的評(píng)論列表,與消費(fèi)者真正期望看到的并不十分匹配。商家制定了一些規(guī)則來(lái)決定評(píng)論的順序,例如通過(guò)評(píng)論字?jǐn)?shù)、圖片數(shù)量、用戶(hù)信譽(yù)等級(jí)、被贊次數(shù)等將優(yōu)質(zhì)評(píng)論置頂,甚至花錢(qián)購(gòu)買(mǎi)好評(píng),導(dǎo)致首先進(jìn)入用戶(hù)眼簾的一定是好評(píng),而商品卻不一定真的這么好。因此需要幫助消費(fèi)者看到更客觀(guān)的評(píng)價(jià),例如:按時(shí)間排序,提供好評(píng)/中評(píng)/差評(píng)之間的比例,只看圖片等。
4.2 尋找答案
答案分為兩種,一種有確定的對(duì)與錯(cuò),而另一種則是仁者見(jiàn)仁,智者見(jiàn)智。而用戶(hù)在刷這兩種答案時(shí),行為稍有不同。
大家一定都熟悉知乎上的那種問(wèn)題:XXXXX是一種怎樣的體驗(yàn)?這是典型的沒(méi)有所謂正確答案的問(wèn)題,而在查看它的評(píng)論時(shí),用戶(hù)往往希望刷到更多的不同觀(guān)點(diǎn),甚至參與其中一起探討。無(wú)法用對(duì)與錯(cuò)來(lái)評(píng)判的情況下,只能用質(zhì)量高與低來(lái)排列評(píng)論的順序,于是一個(gè)評(píng)論的字?jǐn)?shù)、被贊同與不贊同的比例、回復(fù)數(shù)、用戶(hù)本身的粉絲數(shù)、回復(fù)問(wèn)題的次數(shù)等,就作為評(píng)判其質(zhì)量高低的因素。
而對(duì)于另一種只能用對(duì)與錯(cuò)來(lái)回答的問(wèn)題,用戶(hù)得到確定的答復(fù)之后,就會(huì)停止刷下去。所以對(duì)于這類(lèi)評(píng)論,所謂的“熱度”并不一定起作用,而“準(zhǔn)確度”才是用戶(hù)真正需要的。例如在百度知道中經(jīng)常會(huì)看到,一個(gè)比較簡(jiǎn)單的提問(wèn),一樓卻復(fù)制粘貼一些文章、論文來(lái)回答問(wèn)題,但答案可以用簡(jiǎn)潔的一句話(huà)概括。因此對(duì)于此類(lèi)答案的排序,字?jǐn)?shù)、贊同數(shù)、回復(fù)數(shù)、賞金數(shù)往往不一定說(shuō)明問(wèn)題,而提問(wèn)者經(jīng)過(guò)實(shí)際驗(yàn)證過(guò)后,對(duì)答案的“認(rèn)證標(biāo)志”可作為一個(gè)非常重要的指標(biāo)。
4.3 尋找共鳴
影評(píng)、書(shū)評(píng)、樂(lè)評(píng)中的評(píng)論通常百家爭(zhēng)鳴,用戶(hù)極容易陷入評(píng)論的漩渦。由于此類(lèi)評(píng)論內(nèi)容靈活性太高,給沒(méi)有分類(lèi)的海量評(píng)論排序似乎有失合理性。既然是“尋找共鳴”,用戶(hù)就一定是帶著自己的目的而來(lái),所以在提供評(píng)論區(qū)域的同時(shí),是否可以考慮加入一些輕度篩選,例如針對(duì)影視劇,可以允許用戶(hù)選擇集數(shù)或里面的主要角色,對(duì)于書(shū)籍,可提供章節(jié)的篩選,在每一個(gè)篩選條件下,再按照字?jǐn)?shù)、贊同數(shù)、回復(fù)數(shù)、用戶(hù)影響力與等級(jí)等條件來(lái)排序。
4.4 查看回復(fù)
這里出現(xiàn)的所有評(píng)論,都是針對(duì)用戶(hù)自己的,在這種場(chǎng)景下用戶(hù)的注意力更多是在每條回復(fù)的內(nèi)容上,對(duì)順序需求反而比較簡(jiǎn)單,因此,保存完好的“上下文”,按時(shí)間線(xiàn)排序即可。
以上這些場(chǎng)景中,為了實(shí)現(xiàn)排序的規(guī)則,少不了廣大用戶(hù)的配合,例如:按照贊同、不贊同、回復(fù)數(shù)量等排序,需要真正有用戶(hù)去點(diǎn)贊、點(diǎn)踩、回復(fù)。所以需要在每一條評(píng)論上設(shè)置這些功能,如圖:
網(wǎng)易云音樂(lè)-輕互動(dòng)決定著排序
以上是針對(duì)評(píng)論區(qū)的主體——評(píng)論內(nèi)容的順序所做的一番思考,同樣的方法可用在其他頁(yè)面。在已搭好的框架上添枝加葉,整個(gè)頁(yè)面的細(xì)節(jié)會(huì)逐漸清晰到每行文字、每個(gè)圖標(biāo),接下來(lái)便可以進(jìn)入最后一層的工作。
五. 表現(xiàn)層:如何設(shè)計(jì)圖標(biāo)、字體等元素才能保持界面和諧?
視覺(jué)設(shè)計(jì)的結(jié)果是用戶(hù)最先接觸到的對(duì)象,人們通常用“好看、丑、酷炫、清爽”等來(lái)描述自己對(duì)整個(gè)app的第一感覺(jué)。有些時(shí)候視覺(jué)設(shè)計(jì)的目的并不單純?yōu)榱嗣烙^(guān)和酷炫,比這些更重要的是如何保持app中所有界面的統(tǒng)一、和諧,而這些方面,并不只是視覺(jué)設(shè)計(jì)師才需要做。
5.1 風(fēng)格&色彩
app的整體風(fēng)格可以擬物化,也可以扁平化,色彩可以多碰撞,也可以很素雅,而選擇哪種風(fēng)格,取決于產(chǎn)品的性質(zhì)和用戶(hù)的使用場(chǎng)景及時(shí)長(zhǎng)。
文章中提到的所有app幾乎都以功能性和文字信息為主,通常會(huì)持續(xù)使用一段時(shí)間(例如購(gòu)物、刷知乎),用戶(hù)對(duì)于內(nèi)容本身的關(guān)注要高于界面元素的外觀(guān),因此,文字內(nèi)容的呈現(xiàn)需要清晰,不宜使用過(guò)強(qiáng)的對(duì)比色,也不宜做得很難識(shí)別,保證可讀性的前提下,盡量保護(hù)用戶(hù)的眼睛,延緩疲勞,常用的背景色值為#eeeeee。
5.2 字體
為保持頁(yè)面和諧一致,一個(gè)app中不要出現(xiàn)兩種以上的字體,不明確而繁瑣的字體搭配會(huì)導(dǎo)致整個(gè)畫(huà)面失調(diào),甚至聽(tīng)到“有點(diǎn)LOW”這樣的評(píng)價(jià)。
字體混搭的效果
所以通常只需要一種字體貫穿全文,重點(diǎn)強(qiáng)調(diào)的部分通過(guò)放大字號(hào)或加粗來(lái)處理。
- iOS常選用的中文字體:蘋(píng)果簡(jiǎn)體黑,方正蘭亭纖黑,冬青黑體,華文細(xì)黑;英文字體:Helvetica,
- 安卓常用的中文字體:Noto, 思源黑體;英文字體:Roboto。
- 常用字號(hào):大標(biāo)題40-42px,正文字號(hào)32px,副文本26px,小字20px。
- 字體顏色:很少看到純黑純白的色彩搭配,通常正文會(huì)用低調(diào)而清晰的深灰色,顏色值#333333;副文本可用稍微淺一點(diǎn)的顏色,顏色值#666666;而輔助信息的小字則用淺灰,顏色值#999999。
這樣字體便有了層次和節(jié)奏感,信息的重點(diǎn)也在無(wú)形中被突出。
5.3 圖標(biāo)
圖標(biāo)在任何界面設(shè)計(jì)中都不可避免,如何保證其易讀、一致、美觀(guān)?
5.3.1 語(yǔ)義
圖標(biāo)替代的是更為易懂的文字描述,所以對(duì)其語(yǔ)義傳達(dá)的準(zhǔn)確性要求很高。在設(shè)計(jì)圖標(biāo)時(shí)需注意:
(1)沿用主流設(shè)計(jì)
不適宜的創(chuàng)新會(huì)帶來(lái)更大的認(rèn)知負(fù)荷。例如,你覺(jué)得這兩個(gè)圖標(biāo)可以準(zhǔn)確表達(dá)“下載”的意思嗎?
這是“下載”的意思嗎?
(2)相似的語(yǔ)義需要更深層的分析
同樣是表達(dá)“贊”,在社交app中與社群app中的語(yǔ)義也不同。例如,作為溝通情感的工具,你更喜歡“一顆心”,還是喜歡“大拇指?” 顯然,對(duì)于朋友間的贊美,“心”可以將喜歡傳達(dá)的更準(zhǔn)確,而對(duì)于知乎上的一個(gè)客觀(guān)答案,“大拇指”可以帶來(lái)更多的成就感。
5.3.2 尺寸
在圖標(biāo)的尺寸設(shè)計(jì)上,需注意:
(1)點(diǎn)擊區(qū)域足夠大
有限的手機(jī)屏幕上,點(diǎn)擊的舒適區(qū)更有限。人手指正常觸摸屏幕的最小點(diǎn)擊區(qū)域大概為44px * 44px,圖標(biāo)的設(shè)計(jì)尺寸可以依靠視覺(jué)效果來(lái)定,但在開(kāi)發(fā)時(shí)都應(yīng)保證點(diǎn)擊范圍足夠大。
(2)尺寸不宜過(guò)多
雖然尺寸大小可以幫助用戶(hù)區(qū)分信息的重要程度,但過(guò)于零散的尺寸會(huì)讓界面顯得非?;靵y。例如下面的對(duì)比:蝦米音樂(lè)的首頁(yè)有至少3種尺寸的圖標(biāo),稍顯混亂,而網(wǎng)易云音樂(lè)首頁(yè)上的圖標(biāo)尺寸一致,界面看起來(lái)干凈統(tǒng)一。如下圖:
實(shí)例8
(3)注意視差平衡
同一個(gè)尺寸規(guī)格,形狀不同,會(huì)導(dǎo)致面積占比引起視差,同樣是撐滿(mǎn)邊框的圖標(biāo),大小看起來(lái)卻不同,因此要在參考尺寸范圍內(nèi)進(jìn)行調(diào)整。
視差平衡
5.3.3 樣式
圖標(biāo)樣式的一致性對(duì)整體頁(yè)面的影響也比較大,需要注意以下幾點(diǎn):
(1)正負(fù)形一致
正形圖標(biāo),是以“面“繪制的圖標(biāo),面積占比大,視覺(jué)強(qiáng)度也大。負(fù)形圖標(biāo),以“線(xiàn)”繪制的圖標(biāo),簡(jiǎn)潔抽象,理解的門(mén)檻稍高,視覺(jué)強(qiáng)度小??捎脕?lái)表達(dá)選中/未選中的狀態(tài),如實(shí)例9,但在同一狀態(tài)下,不建議混合使用,如實(shí)例10:
實(shí)例9-選中為正形,未選中為負(fù)形
實(shí)例10-都是未選中,混合了兩種方式,不夠統(tǒng)一
(2)細(xì)節(jié)處理方式一致
細(xì)節(jié)的處理方式,包括圓角與直角的設(shè)置,線(xiàn)條的粗細(xì)是否均勻,圖標(biāo)上的斷點(diǎn)處理等,例如下面的圖中,每一組圖標(biāo)都是因?yàn)橛邢嗨频募?xì)節(jié)處理,整體看起來(lái)有著非常強(qiáng)的一致性。
圖標(biāo)來(lái)自于http://www.iconwerk.com/
結(jié)語(yǔ)
看到這里的都是真愛(ài)。之所以會(huì)有這篇文章,是因?yàn)橛幸惶焱聠?wèn)我的一個(gè)問(wèn)題:
“手機(jī)app設(shè)計(jì)有模板么?你看這樣一個(gè)app怎么布局?”
在討論到評(píng)論區(qū)時(shí)我也曾不停地打開(kāi)各種app取經(jīng),發(fā)現(xiàn)形式非常多樣,于是便開(kāi)始思考為什么,最后就有了這篇“不成熟的小建議”,感謝這位同事妹子。
文中有遺漏或不準(zhǔn)確之處,歡迎重重地拍磚。
最后,感謝您的閱讀^_^
作者:Dannii(楊玲蘊(yùn))
來(lái)源:https://www.jianshu.com/p/419df3865524
本文由 @楊玲蘊(yùn) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels,基于 CC0 協(xié)議
小姐姐棒極啦??!
厲害耶小姐姐
以后可不可以多多發(fā)一些這一類(lèi)的文章
“例如唯品會(huì),在移動(dòng)app端并不設(shè)有評(píng)論功能,原因在于它的快銷(xiāo)特征,當(dāng)用戶(hù)收貨后想要夸贊或吐槽時(shí),相應(yīng)的產(chǎn)品可能已經(jīng)甩光,評(píng)論則失去了意義?!?br /> 1、唯品會(huì)在收貨后,有評(píng)論功能
2、唯品會(huì)定位的快消,但是部分商品會(huì)重復(fù)拿來(lái)做活動(dòng),所以評(píng)論是發(fā)揮作用的
3、唯品會(huì)的評(píng)論做了展示的策略:好評(píng),優(yōu)質(zhì)展現(xiàn),差評(píng)沉底(隱藏)
4、優(yōu)評(píng)有一定幾率的獎(jiǎng)勵(lì),說(shuō)明平臺(tái)還是比較看重評(píng)論這個(gè)模塊
以上,補(bǔ)充,謝謝。
收藏了
滿(mǎn)滿(mǎn)的干貨,贊
想法是一樣的
贊
mm
??
??
棒
棒棒棒 收獲滿(mǎn)滿(mǎn)
最近在做乙方,做很多項(xiàng)目都沒(méi)有從產(chǎn)品思維出發(fā),而是從業(yè)務(wù)流程上,講真,感覺(jué)做的很沒(méi)興致
同病相憐
學(xué)習(xí)了
是這樣的吧
哇,轉(zhuǎn)粉了
受教!
贊??
感謝分享??
感謝陳~
寫(xiě)的太好了,在設(shè)計(jì)某個(gè)功能時(shí),根據(jù)作者描述的思維路徑,由粗到細(xì),一個(gè)完整的設(shè)計(jì)模型就展現(xiàn)在眼前了。