中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

無論是設計一款產品還是一個功能，“用戶體驗的5個層面”都會貫穿始終，從產品的方向骨架開始，逐漸豐富完善，直到細枝末節的處理。

近些年， 無論是媒體、社交、電商、音樂、視頻，移動應用的社交化越來越成熟，都在培養用戶間或強或弱的社交關系。各種應用中的“評論”功能已成為其不可或缺的一部分。“評論”不再以用戶發表意見為唯一目的，還營造出了一種隱藏在屏幕背后的社群關系。在很多應用中，依靠這種“四兩撥千斤”的社群關系，涌現出無限的產品智慧。

而在手機app使用頻率蓋過pc網頁的背景下，人們出于不同目的、處在不同場景、在有限尺寸的屏幕上經歷著不同復雜度的評論活動，縱使是多樣性十足的一個動作，設計工作也并不是沒有方法可循，接下來我們就一起探討一下。

假設你在設計一款新的app，并且初步認為需要評論功能，如何進行設計思考呢？

無論是設計一款產品還是一個功能，“用戶體驗的5個層面”都會貫穿始終，從產品的方向骨架開始，逐漸豐富完善，直到細枝末節的處理。

簡單復習一下這5個層次：

• “戰略層”：五要素中最重要的一層，是用戶體驗的起點，戰略可以演變和改變，決定著整個產品的走向。
• “范圍層“：戰略層形象化的第一步。帶著經營者和用戶兩方面的需求，就能弄清楚如何滿足戰略目標，提供怎么樣的功能。
• “結構層”：開啟交互設計的第一步，即信息架構的設計。將零散的需求組合為一個整體，并合理展現出來。
• “框架層”：交互設計的第二步，在這一步會確定很詳細的界面布局，確定整個產品的上下文。
• “表現層“：視覺設計的過程，也是用戶首先會注意到的方面，是冰山的最上一角。界面中的配色和風格，都在這一步完成。

這5個層次可以很好地引導設計思路，我們可以把“評論區的設計問題”單獨拿出來，利用這5層來提出相應的引導性問題（請從下往上看）：

利用用戶體驗5個層次提出引導性問題

接下來我會逐層說明，但會著重講解與“交互設計”相關的兩層。

一. 戰略層：確定產品類型和目標

在最初階段，需要首先確定產品的類型。常見的移動App類型如社交、電商、服務、自媒體、新聞、社群、音樂、視頻類。但隨著互聯網的發展，越來越多的app都在向多重類型發展。舉個栗子：小紅書的“社區＋電商”的特征，其優勢很明顯，用戶的粘性大幅增加，這構成了小紅書一個非常強大的壁壘。多重類型的出現，展示了產品更多的可能性，是做產品的一種智慧。而如何確定類型，取決于對產品目標的設定——解決什么問題？給誰用？怎樣算成功？確定了產品類型后，就有了整體的大方向，后面的每一步都是基于戰略層的決定而發展。

二. 范圍層：用戶有何需求？為什么要評論？

有了產品的戰略目標，就要開始思考，提供哪些功能去實現它？如果你想提供評論功能，首先需要思考用戶為什么要評論。我們從“寫評論”和“看評論”兩方面來分析。

用戶為什么要寫評論？總的來說，縱觀市面主流app以及個人體會，用戶寫評論的動機可分為三大類：溝通感情、表達見解、求助。而用戶為什么要看評論？其動機與寫評論非常不同，頻率也高得多，可分為四大類：依靠評論做決策、尋找答案、尋找共鳴、查看反饋（比如朋友圈）。

仔細分析用戶的動機，可以知道產品提供此功能的意義在何處。如果你的app經過戰略層和范圍層的過濾，結論是不需要任何評論功能，那也是產品方向上相當大的邁進。例如唯品會，在移動app端并不設有評論功能，原因在于它的快銷特征，當用戶收貨后想要夸贊或吐槽時，相應的產品可能已經甩光，評論則失去了意義。

三. 結構層：如果需要評論，采用什么樣的展現形式？

在我們了解了用戶評論的諸多動機，也就是需求來源之后，如何把零散的需求可視化？魔力就在這一步。

我們還是從“寫評論”和“看評論”兩方面來分析。

3.1 寫評論

這個動作可輕可重，輕到點擊圖標，重到長篇大論。觸發評論的入口該如何設計？

3.1.1 點擊圖標

社交中的贊，多媒體中的下載和分享，電商中的收藏，社群中的頂和踩，都能非常精準地表達用戶的態度。如何取舍？

具有“評論”功能的常用圖標

“贊”/“收藏”/“頂”/“下載”/“分享”——這五個動作都有表示喜歡和贊賞的意思。按程度來看，“贊”、“收藏”、“頂”的程度相似，在一個app中只需出現最貼近產品語義的那個；而“下載”和“分享”則表示更高階的喜歡，“下載”是想要長久保留一件東西的態度，而“分享”是把喜歡一件東西的心情宣揚出去，讓更多人喜歡，所以程度更強烈。以上幾個功能可以根據用戶的需求，酌情選擇。

“踩”——無論在電商，音樂視頻，社群，服務型app中，都有與“踩”語義相似的功能，例如淘寶中的“差評”，音樂app中的“不感興趣”，知乎中的“不同意”。而在社交app中，除了曾經短暫出現于facebook中之外，現在已經沒有實例。因此，在設計“踩”功能時需要慎重考慮用戶的玻璃心，如果你的app是社交類，尤其是強關系社交，則不建議使用。

3.1.2 編輯文字

前文中提出的用戶在寫評論時的三大動機：溝通感情、表達見解、求助，它們特征不同，這會導致評論的入口展現形式也不同。

（1）溝通感情

多出現在強關系社交app中，例如微信朋友圈。特征：很強的針對性、有即時性。所以寫評論的入口需要設置在每一個人的動態后，如下圖：

社交中的評論入口

（2）表達見解

可分為依次遞進的三個層次，一般見解、有態度的評判、深度探討。

1）一般見解

包括對自媒體、音樂、新聞等內容的評價，對反饋期望不高。特征：簡潔快速、有即時性。所以入口需要設置在方便點擊且明顯的位置，考慮到拇指觸達最舒適的區域，可將輸入框放在頁面下方，如下圖：

一般見解的評論入口

一些實際參考：

實例1

2）有態度的評判

通常在消費，或體驗過后進行評價。特征：非即時性——需要體驗的時間，例如網購、打車、看電影。所以在用戶未體驗時，不應提供入口，識別用戶體驗完畢的時間點并將用戶完成的訂單收集起來，再提供評價入口，如下圖：

有態度的評價入口

一些實際參考：

實例2

在消費類的參考實例中，有一個例外——大眾點評。由于它無法精確識別用戶是否到店，而自身又是點評類app，所以它的評價入口設在了通用位置。除此之外，另需注意此類評論的時效性，例如時隔一年后再來評價曾經住過的酒店是否有意義？因此過了時效后，則不應該允許用戶評論。

3）話題探討

深度討論一個問題，用戶的表達欲比較強烈，對反饋期望很高。特征：篇幅可能較長、有即時性。對于這種評論，應提供寫作氛圍濃厚的獨立頁面，如下圖：

話題探討評論入口

一些實際參考：

實例3

（3）求助

在評論中提問，通常會得到其他人或樓主的解答。特征：簡潔快速、有即時性，與剛才講到的“一般見解”特征類似，所以表現形式也類似，在方便點擊且明顯的位置。實際參考：

實例4-好好住，網友詢問家具鏈接

3.2 看評論

上一層中，我們分析出用戶在看評論時的四大動機：依靠評論做決策、尋找答案、尋找共鳴、查看反饋。同樣需要依據它們的不同特征，設計不同的展現形式。

3.2.1 依靠評論做決策

用戶的消費決策通常需要基于其他人對商品的評價。特征：評論數量不斷增長、需要引導性入口、評論間無互動、有即時性。由于數量的增長，為了保持頁面篇幅穩定，需要將評論隔離出來，建立新的頁面；但需要一個引導性入口，所以可放置熱門/最新評論在前一頁；評論間無互動，只需提供單純的評論列表，如下圖:

幫助決策的評論展示方式

一些實際參考：

實例5

可以把這種展示方式稱為：半沉浸式。

3.2.2 尋找答案

搜索問題，尋找自己想要的答案。特征：問題篇幅較短、評論間有互動、有即時性。由于問題簡練，頁面下方仍有很多空間，可以跟隨瀑布式評論；評論間的互動既可以用嵌套，也可以用跳轉的方式展示，選擇哪一種取決于評論內容的篇幅長短，短評則可以用層層嵌套的方式，而如果產品性質導致評論需要一定篇幅，則建議用跳轉方式，如下圖。

左：嵌套式，右：跳轉式

一些實際參考：

實例6

可把這種展示方式稱為：瀑布流式＋嵌套式/瀑布流式＋跳轉式

3.2.3 尋找共鳴

影評、書評、樂評，都可以幫助看客們找到共鳴。

（1）樂評

特征：評論篇幅較短、偶爾有互動、有即時性。音樂解放了用戶的眼睛，可以實時看評論，但播放頁面已無操作空間，所以需要提供獨立沉浸式頁面展示評論，互動的評論可以嵌套展示，如下圖：

實例7

可把這種展示方式稱為：沉浸式

（2） 影評、書評

特征：有長評與短評之分、評論間有互動、有即時性。在頁面中需要分出長評、短評區域，為避免兩種評論羅列使頁面過長，需將所有兩種評論分別隔離到新頁面；在新頁面中，由于長評論篇幅較長，利用列表管理時需截成統一篇幅，這導致完整的評論需再次被隔離到新頁面。因此短評需要兩個頁面，長評則需要三個頁面，如下圖。

影評、書評展示方式

對于長評和短評本身來說，也相當于是半沉浸式的展現方式。

3.2.4 查看反饋

發表朋友圈或文章后，用戶通常會迫不及待地查看反饋。特征：評論數量有限、有互動性、即時性。由于評論與正文相關性極強，并且通常較為簡練，可使用瀑布流式的展現方式，可參照微信朋友圈。

以上針對“寫評論”與“看評論”時用戶的不同動機，推薦了相應的界面展現方式。這些結論并非權威，但可以作為思考的切入點。完成這一步，評論區的展示用幾個界面，如何跳轉，便可以確定了。接下來的一步就要開始思考界面具體內容。

四. 框架層：如何安排評論的順序才更有意義？

用戶寫完評論后都會不自覺地提出這樣一個問題：我的評論去哪了？而你的評論去哪，取決于評論如何排序。怎樣的排序才合理，針對不同的用戶需求，標準也是不同的。仍然根據用戶看評論的四個動機：依靠評論做決策、尋找答案、尋找共鳴、查看反饋來分析。

4.1 依靠評論做決策

通過上文了解到，此類需求多發生在電商、服務類app中。而商家給出的評論列表，與消費者真正期望看到的并不十分匹配。商家制定了一些規則來決定評論的順序，例如通過評論字數、圖片數量、用戶信譽等級、被贊次數等將優質評論置頂，甚至花錢購買好評，導致首先進入用戶眼簾的一定是好評，而商品卻不一定真的這么好。因此需要幫助消費者看到更客觀的評價，例如：按時間排序，提供好評/中評/差評之間的比例，只看圖片等。

4.2 尋找答案

答案分為兩種，一種有確定的對與錯，而另一種則是仁者見仁，智者見智。而用戶在刷這兩種答案時，行為稍有不同。

大家一定都熟悉知乎上的那種問題：XXXXX是一種怎樣的體驗？這是典型的沒有所謂正確答案的問題，而在查看它的評論時，用戶往往希望刷到更多的不同觀點，甚至參與其中一起探討。無法用對與錯來評判的情況下，只能用質量高與低來排列評論的順序，于是一個評論的字數、被贊同與不贊同的比例、回復數、用戶本身的粉絲數、回復問題的次數等，就作為評判其質量高低的因素。

而對于另一種只能用對與錯來回答的問題，用戶得到確定的答復之后，就會停止刷下去。所以對于這類評論，所謂的“熱度”并不一定起作用，而“準確度”才是用戶真正需要的。例如在百度知道中經常會看到，一個比較簡單的提問，一樓卻復制粘貼一些文章、論文來回答問題，但答案可以用簡潔的一句話概括。因此對于此類答案的排序，字數、贊同數、回復數、賞金數往往不一定說明問題，而提問者經過實際驗證過后，對答案的“認證標志”可作為一個非常重要的指標。

4.3 尋找共鳴

影評、書評、樂評中的評論通常百家爭鳴，用戶極容易陷入評論的漩渦。由于此類評論內容靈活性太高，給沒有分類的海量評論排序似乎有失合理性。既然是“尋找共鳴”，用戶就一定是帶著自己的目的而來，所以在提供評論區域的同時，是否可以考慮加入一些輕度篩選，例如針對影視劇，可以允許用戶選擇集數或里面的主要角色，對于書籍，可提供章節的篩選，在每一個篩選條件下，再按照字數、贊同數、回復數、用戶影響力與等級等條件來排序。

4.4 查看回復

這里出現的所有評論，都是針對用戶自己的，在這種場景下用戶的注意力更多是在每條回復的內容上，對順序需求反而比較簡單，因此，保存完好的“上下文”，按時間線排序即可。

以上這些場景中，為了實現排序的規則，少不了廣大用戶的配合，例如：按照贊同、不贊同、回復數量等排序，需要真正有用戶去點贊、點踩、回復。所以需要在每一條評論上設置這些功能，如圖:

網易云音樂－輕互動決定著排序

以上是針對評論區的主體——評論內容的順序所做的一番思考，同樣的方法可用在其他頁面。在已搭好的框架上添枝加葉，整個頁面的細節會逐漸清晰到每行文字、每個圖標，接下來便可以進入最后一層的工作。

五. 表現層：如何設計圖標、字體等元素才能保持界面和諧？

視覺設計的結果是用戶最先接觸到的對象，人們通常用“好看、丑、酷炫、清爽”等來描述自己對整個app的第一感覺。有些時候視覺設計的目的并不單純為了美觀和酷炫，比這些更重要的是如何保持app中所有界面的統一、和諧，而這些方面，并不只是視覺設計師才需要做。

5.1 風格&色彩

app的整體風格可以擬物化，也可以扁平化，色彩可以多碰撞，也可以很素雅，而選擇哪種風格，取決于產品的性質和用戶的使用場景及時長。

文章中提到的所有app幾乎都以功能性和文字信息為主，通常會持續使用一段時間（例如購物、刷知乎），用戶對于內容本身的關注要高于界面元素的外觀，因此，文字內容的呈現需要清晰，不宜使用過強的對比色，也不宜做得很難識別，保證可讀性的前提下，盡量保護用戶的眼睛，延緩疲勞，常用的背景色值為#eeeeee。

5.2 字體

為保持頁面和諧一致，一個app中不要出現兩種以上的字體，不明確而繁瑣的字體搭配會導致整個畫面失調，甚至聽到“有點LOW”這樣的評價。

字體混搭的效果

所以通常只需要一種字體貫穿全文，重點強調的部分通過放大字號或加粗來處理。

• iOS常選用的中文字體：蘋果簡體黑，方正蘭亭纖黑，冬青黑體，華文細黑；英文字體：Helvetica,
• 安卓常用的中文字體：Noto, 思源黑體；英文字體：Roboto。
• 常用字號：大標題40-42px，正文字號32px，副文本26px，小字20px。
• 字體顏色：很少看到純黑純白的色彩搭配，通常正文會用低調而清晰的深灰色，顏色值＃333333；副文本可用稍微淺一點的顏色，顏色值＃666666；而輔助信息的小字則用淺灰，顏色值＃999999。

這樣字體便有了層次和節奏感，信息的重點也在無形中被突出。

5.3 圖標

圖標在任何界面設計中都不可避免，如何保證其易讀、一致、美觀？

5.3.1 語義

圖標替代的是更為易懂的文字描述，所以對其語義傳達的準確性要求很高。在設計圖標時需注意：

（1）沿用主流設計

不適宜的創新會帶來更大的認知負荷。例如，你覺得這兩個圖標可以準確表達“下載”的意思嗎？

這是“下載”的意思嗎？

（2）相似的語義需要更深層的分析

同樣是表達“贊”，在社交app中與社群app中的語義也不同。例如，作為溝通情感的工具，你更喜歡“一顆心”，還是喜歡“大拇指？” 顯然，對于朋友間的贊美，“心”可以將喜歡傳達的更準確，而對于知乎上的一個客觀答案，“大拇指”可以帶來更多的成就感。

5.3.2 尺寸

在圖標的尺寸設計上，需注意：

（1）點擊區域足夠大

有限的手機屏幕上，點擊的舒適區更有限。人手指正常觸摸屏幕的最小點擊區域大概為44px * 44px，圖標的設計尺寸可以依靠視覺效果來定，但在開發時都應保證點擊范圍足夠大。

（2）尺寸不宜過多

雖然尺寸大小可以幫助用戶區分信息的重要程度，但過于零散的尺寸會讓界面顯得非?；靵y。例如下面的對比：蝦米音樂的首頁有至少3種尺寸的圖標，稍顯混亂，而網易云音樂首頁上的圖標尺寸一致，界面看起來干凈統一。如下圖：

實例8

（3）注意視差平衡

同一個尺寸規格，形狀不同，會導致面積占比引起視差，同樣是撐滿邊框的圖標，大小看起來卻不同，因此要在參考尺寸范圍內進行調整。

視差平衡

5.3.3 樣式

圖標樣式的一致性對整體頁面的影響也比較大，需要注意以下幾點：

（1）正負形一致

正形圖標，是以“面“繪制的圖標，面積占比大，視覺強度也大。負形圖標，以“線”繪制的圖標，簡潔抽象，理解的門檻稍高，視覺強度小?？捎脕肀磉_選中/未選中的狀態，如實例9，但在同一狀態下，不建議混合使用，如實例10：

實例9-選中為正形，未選中為負形

實例10-都是未選中，混合了兩種方式，不夠統一

（2）細節處理方式一致

細節的處理方式，包括圓角與直角的設置，線條的粗細是否均勻，圖標上的斷點處理等，例如下面的圖中，每一組圖標都是因為有相似的細節處理，整體看起來有著非常強的一致性。

圖標來自于http://www.iconwerk.com/

結語

看到這里的都是真愛。之所以會有這篇文章，是因為有一天同事問我的一個問題：

“手機app設計有模板么？你看這樣一個app怎么布局？”

在討論到評論區時我也曾不停地打開各種app取經，發現形式非常多樣，于是便開始思考為什么，最后就有了這篇“不成熟的小建議”，感謝這位同事妹子。

文中有遺漏或不準確之處，歡迎重重地拍磚。

最后，感謝您的閱讀^_^

作者：Dannii（楊玲蘊）

來源：https://www.jianshu.com/p/419df3865524

本文由 @楊玲蘊 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議