<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

132022-4

什么是數據可視化

01. 什么是數據可視化？

數據可視化即數據的圖形表示，旨在以更易于掌握和理解的有效方式傳達大量海量數據。從某種意義上說，數據可視化是原始數據和圖形元素之間的映射，它決定了這些元素的屬性如何變化?？梢暬ǔＪ峭ㄟ^使用圖表，折線或點，條形圖和地圖來進行的。

Data Viz是描述性統計的一個分支，但它需要設計，計算機和統計技能。
美學和功能齊頭并進，以直觀的方式傳達復雜的統計信息。
Data Viz工具和技術對于做出以數據為依據的決策至關重要。
在形式和功能之間取得了很好的平衡。
每個STEM領域都將從了解數據中受益。

Jorge Rey的化石燃料Dataviz

02. 它是如何工作的？

如果我們能看到它，我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調，但這是事實，可視化更加有效和全面。

在某種程度上，我們可以說數據Viz是講故事的一種形式，目的是幫助我們根據數據做出決策。這些數據可能包括：

追蹤銷售
識別趨勢
識別變化
監控目標
監測結果
合并數據

秘密7 –塞爾吉奧·費爾南德斯（Sergio Fernandez）提出離婚可視化的理由

03. 什么時候使用？

數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數字中。

話雖如此，Data Viz適用于：

年度報告
簡報
社交媒體微敘事
信息手冊
研究
趨勢販運
SciViz
燭臺圖，用于財務分析
確定路線

可以看到數據可視化的常見情況是在銷售和營銷，醫療保健，科學，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統計信息圖

04. 為什么要使用它？

簡短的答案：決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說，它是確定以下情況的寶貴工具。

識別變量關系之間的相關性。
獲得有關受眾行為的市場見解。
確定價值與風險指標。
隨時間監視趨勢。
通過頻率檢查速率和潛力。
應對變化的能力。

太空垃圾-BBC科學焦點，作者：Federica Fragapane

05. 數據可視化類型

您可能已經猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

地圖

地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關的信息，并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D（靜態或動態），因此可以使用多種組合來創建Data Viz地圖。

COVID-19支出數據可視化POGO，George Railean

但是，最常見的是：

區域地圖：顯示國家，城市或地區的經典地圖。對于每個區域中的不同特征，它們通常以不同的顏色表示數據。
線圖：它們通常包含空間和時間，由于對特定場景進行了分析，因此通常是路線選擇的理想選擇，尤其是該地區的駕車或出租車路線。
點地圖：這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。
熱圖：它們根據特定屬性指示地理區域的權重。例如，熱圖可以按區域分布感染者的飽和度。

圖表

圖表以圖形，圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別，因此它們經常與圖形混淆。但是，兩者之間的差別很?。簣D形顯示數據組之間的數學關系，并且僅是表示數據的統計圖方法之一。

圖表數據可視化，作者：Madeline VanRemmen

順便說一句，讓我們談談數據可視化中最基本的圖表類型。

條狀圖

他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇，并遵循不超過三個變量的趨勢，否則，條形變得混亂且難以理解。

餅狀圖

這些熟悉的圓形圖按部分劃分數據。切片越大，部分越大。它們非常適合描述整體的各個部分，它們的總和必須始終為100％。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。

線形圖

他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。

散點圖

這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如，如果您的x軸包含有關汽車價格的信息，而y軸包含有關薪水的信息，則正向或負向關系將告訴您某人的汽車所反映的薪水。

表格

與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現，并且旨在顯示應該閱讀而不是可視化的特定數值數據時，它們是理想的選擇。

數據可視化| Aishwarya Anand Singh的養蜂與否

例如，圖表非常適合顯示特定區域內一段時間內特定疾病的數據，但是當您還需要了解具體原因（例如原因，結果，復發，治療時間和治療方法）時，最好使用表格。

06. 數據可視化與信息圖表

5個主要差異

它們并沒有什么不同，因為它們在視覺上都代表數據。通常，您搜索信息圖表并找到標題為“數據可視化”的圖像，反之亦然。但是，在許多情況下，這些標題都不會引起誤解。這是為什么？

數據可視化僅由一個元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個Data Viz元素。
與可能簡單或極其復雜且繁重的數據可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人，后者通常也是可以理解的。
有趣的是，數據Viz不提供敘述和結論，而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如，數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”，而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。
數據可視化可以在Excel中進行，也可以使用其他自動生成設計的工具，除非將其設置為演示或發布。但是，信息圖表的美學非常重要，其設計必須吸引更廣泛的受眾。
在交互方面，數據可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態圖像。

Skype通過可視化.com進行可視化

07. 如何創建有效的數據可視化？

5種有用的技巧

該過程自然類似于創建信息圖表，并且圍繞了解您的數據和受眾。更準確地說，這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

1.做功課

準備工作已經完成了一半。在甚至開始可視化數據之前，必須確保您了解該數據的最后細節。

不可否認的是，了解您的數據查看對象是另一個重要部分，因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰？他們如何處理視覺數據？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報告？

您正在可視化什么樣的信息，它能反映出您的目標嗎？

最后，考慮要使用多少數據并加以考慮。

圖片來自Brodie Vissers

2.選擇正確的圖表類型

在上一節中，我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。

圖表中將有多少個變量？
您將為每個變量放置幾項？
值之間的關系是什么（時間段，比較，分布等）

話雖如此，如果您需要展示整個項目的各個部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產品的市場份額的百分比。但是，餅圖不適用于時間范圍內的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點圖，s和折線圖更為有效。

另一個示例是如何在圖表中使用時間。使用水平軸會更準確，因為時間應該從左到右。它在視覺上更直觀。

Oberhaeuser的MagnaGlobal廣告市場海報

3.對數據進行排序

首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時，您必須處理大量數據，這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫，將您的信息分成兩個或多個圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

提示：使用條形圖和柱形圖進行比較時，請按值（而不是字母順序）以升序或降序對信息進行排序。

圖片由薩曼莎·赫爾利（Samantha Hurley）

4.利用顏色發揮自己的優勢

在每種可視化形式中，顏色都是您最好的朋友和最強大的工具。它們產生對比，重音，強調并直觀地引導眼睛。即使在這里，色彩理論也很重要。

設計圖表時，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負，并且難以為觀眾閱讀。但是，您可以使用顏色強度來發揮自己的優勢。例如，當您在不同的時間段內比較同一概念時，可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

選擇顏色時要考慮的事項：

不同類別的顏色不同。
系列中所有圖表的采用一致調色板，方便以后將進行比較。
最好使用對色盲友好的調色板。

Jamie Kettle可視化塑料廢物污染數據

5.獲取靈感

當您想成為數據可視化設計中的佼佼者時，請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實現的每種數據。

下圖這個Twitter帳戶數據可視化是一個很好的例子。同時，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數據創建視覺效果。

lilit Hayrapetyan創作的大數據紀錄片的人臉

8個數據可視化示例

作為另一種藝術形式，Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土，這些圖表證明了數據也可以是美麗的。現在，讓我們來看看一些例子。

1.黑暗之魂III體驗數據

我們從孟小偉的個人項目開始，介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大，但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作，并且在信息圖表中看起來很棒。

我的黑暗之魂3孟小偉在播放數據

2.有史以來最偉大的電影

凱蒂·西爾弗（Katie Silver）根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影。可視化顯示了每部電影的關鍵數據點，例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

凱蒂·西爾弗（Katie Silver）的100部最佳電影數據可視化

3.最暴力的城市

費德里卡·弗拉加帕內（Federica Fragapane）顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列，并根據兇殺率在水平軸上排序。

4.家族企業作為數據

這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖，其中包含行業細分以及對就業貢獻的散點圖。

視角雜志–家族企業by Valerio Pellegrini

5.太陽系的軌道圖

該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置，并按小行星的類型進行了著色。

埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖

6.標題的語義

KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

標題語義學KatjaFlükiger

7.月球和地震

該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh）

8. Nanosats的黎明

可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini）

最后的話

數據可視化不僅是一種科學形式，而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據，并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數據和受眾有關。這樣，您就可以選擇正確的圖表類型，并使用可視化技術來發揮自己的優勢。

原文地址：https://graphicmama.com/blog/what-is-data-visualization/

譯文地址：站酷

作者：AL Boicheva

譯者：ZZiUP

轉載請注明：學UI網》什么是數據可視化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(4062)

132022-4

UI設計師交互設計-注重產品細節的使用體驗

前言

在使用產品的過程中，你是否看到了一些有趣的細節，而這些細節提升了你的使用體驗？這些產品細節，便是產品設計師需要留意的，因為這些產品細節在某種程度上提升了用戶的留存與轉化。本文我就對一些產品細節進行了拆解，一起來看一下。

一.【夸克瀏覽器】節日彩蛋-特定場景下輸入關鍵詞觸發彩蛋效果

二.【酷狗音樂】播放Tab-多交互操作，應對多場景使用

三.【騰訊新聞】左滑熱點榜單-用戶關注的熱點放在路徑短的位置

四.【荔枝博客】品牌傳播-產品情感漏出，與用戶產生共鳴

五.【百度網盤】自定義倍數-給用戶更多可控操作，精細化觀影感受

六.【網易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

七.【即刻】頭像彩蛋-趣味互動回彈，把喜歡強烈表現出來

八.【荔枝】錄聲音-輕擬物動態圖，使用中的及時反饋

九.【微博】點贊反饋-情緒最大化宣泄，盡情釋放情緒

十.【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

一、【夸克瀏覽器】節日彩蛋-特定場景下輸入關鍵詞觸發彩蛋效果

1. 使用場景

在圣誕節日來臨之際，用戶使用搜索引擎輸入關鍵詞的頻率會增加，在此增加彩蛋給用戶營造節日氛圍

2. 設計思考

設計目標：增加關鍵詞趣味彩蛋雨，提高產品趣味體驗，提高用戶搜索頻次。

設計方案：在節日來臨前，用戶通過搜索節日特定關鍵詞，會在搜索結果頁中以彩蛋雨的形式墜落下來，圖案貼合節日物品，給用戶營造出節日氛圍，給予用戶節日的浪漫。用戶在使用時并不是一個冰冷的產品，而是有情感共鳴有情緒的產品。

二、【酷狗音樂】播放Tab-多交互操作，應對多場景使用

1. 使用場景

想要提高屏效，一屏顯示更多內容。在瀏覽操作時會因為功能按鈕外漏造成誤操作情況。

2. 設計思考

設計目標：提升屏幕顯示內容面積，給予TAB播放更多交互形式，增加趣味性提升產品記憶點。

設計方案：在TAB播放中給予「長按」「雙擊」兩種交互操作，長按中包含雙擊的播放暫停，因為此操作，使用率較高，提供多入口能有效提高易用性。長按時，激活更多常用功能，包含移動進度條、收藏、下一首等操作，配合特有的交互展示形式，給用戶形成產品記憶點，同時在瀏覽不同頻道時，功能的隱藏大大降低誤操作以及視覺干擾的情況。

三、【騰訊新聞】左滑熱點榜單-用戶關注的熱點放在路徑短的位置

1. 使用場景

如今的新聞產品都提供熱點時事新聞，給用戶提供更多豐富內容聚集。

2. 設計思考

設計目標：提高用戶使用率，不影響主框架的情況下給用戶最短路徑查看熱點新聞的入口，提高用戶瀏覽時長。

設計方案：首屏以及導航模塊更多還是以新聞資訊等內容為主，關注熱點更多是娛樂熱門等內容，瀏覽率都高的情況下，把熱點模塊放到左滑頁面中，在不影響首頁框架情況下，增加新的板塊，給用戶更多瀏覽選擇，豐富產品多元化內容。

四、【荔枝博客】品牌傳播-產品情感漏出，與用戶產生共鳴

1. 使用場景

如今的產品趨于同質化，由原來只注重功能轉變為產品情感表達，給用戶產生情感互動，從功能付費變為情感價值觀付費。

2. 設計思考

設計目標：傳播產品價值觀，給予用戶引導，產生產品正向記憶，從而提高粘性。

設計方案：上幾期產品分析中有說到頂部logo外漏的設計描述，有的植入隱藏功能，有的表示刷新功能等，歸根結底都是給予靜態標志功能屬性，提高屏幕利用率同時提升用戶探索欲望。

荔枝博客本身產品內容相對聚焦，想要做出差異化就要往品牌情感入手，當用戶點擊左上角「荔枝博客」標志時，會彈出產品的由來以及做博客的初衷，讓用戶思考產品深層意思時無形中把產品植入到用戶記憶中，給用戶情感綁定，提升用戶使用粘性。

五、【百度網盤】自定義倍數-給用戶更多可控操作，精細化觀影感受

1. 使用場景

市場上的視頻倍速參差不齊，0.25、0.5、1倍三種遞增邏輯，用戶在觀影時會存在沒有想要選擇著倍速，只能使用平臺提供的選擇使用，操作受限制。

2. 設計思考

設計目標：解決倍速不是用戶想要的，提供自定義倍速，給用戶更多可操作性，提升觀影感受。

設計方案：在百度網盤中觀看視頻時，點擊調節倍速在提供默認常規5種倍速下提供自定義倍速，以0.1的速度逐漸遞增，用戶可以在0.5-3倍之間任意選擇，根據視頻類型、觀影習慣選擇合適的速度，同時把市面上不同倍速問題給用戶造成的觀影困擾也同步解決，提高視頻觀影體驗。

六、【網易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶

1. 使用場景

音樂無國界，每首音樂背后都有一段很長的故事，在我聽哈利波特主題曲時，瀏覽評論發現特定特定位置點擊會有彩蛋，嘗試了一下果然如此。網易云音樂評論區的強大之處展示之一。獨有的彩蛋。

2. 設計思考

設計目標：提升評論活躍度，強化廣告的表現形式，增加用戶對產品的探索欲望提高使用粘性。

設計方案：哈利波特音樂中，在評論區第九和第十條中間分割線處，點擊兩下！觸發魔法視頻，把用戶帶入情境之中，勾起滿滿的回憶，配合音樂聲音，真可謂視覺聽覺雙重享受。

對于開發來說，只需要在特定歌曲評論中寫一個位置判定以及觸發條件，當用戶觸發條件后，播放特定視頻，觸發用戶情感共識，提升使用粘性。同時如果做為廣告植入也是比較好的呈現方式，但要注意視頻質量，盡量弱化廣告中的產品，可以把品牌情感揉入視頻中與用戶產生情感關聯。

七、【即刻】頭像彩蛋-趣味互動回彈，把喜歡強烈表現出來

1. 使用場景

在看關注人主頁時，想要強烈的表達出情感給予對方，釋放自己心中的喜歡時如何表現出來。

2. 設計思考

設計目標：提升趣味玩法，增強用戶操作感受，豐富產品玩法體驗，提升使用粘性。

設計方案：在個人主頁，通過拖拽用戶頭像放手回彈，頭像以拉距來彈射回原有位置并且迸發出愛心動畫，讓用戶產生更貼近的情感傳達，反復操作達到一定數量會有文字提醒，文案的趣味描述也讓彩帶功能增加了一份趣味。

八、【荔枝】錄聲音-輕擬物動態圖，使用中的及時反饋

1. 使用場景

在使用錄音功能時，單純靠進度條記憶靜態按鈕顯示很難產生強提醒，除非做大做突出，荔枝在錄音中是如何表現的。

2. 設計思考

設計目標：解決錄音功能頁面元素單一用戶進行中與暫停感知淺的問題，結合動態插圖給用戶及時反饋，同時貼合線下使用場景，給用戶注入產品記憶點。

設計方案：在我的-進入錄聲音模塊中，頭圖展示一個錄音磁帶機，當開啟錄音功能時，磁帶機會進行旋轉播放，左慢右快的展示形式符合真實機器的運動規律，給用戶強提醒告知用戶此時正在錄音中，當暫停時，磁帶機及時停止，和按鈕形成觸發綁定，提高產品使用體驗。

九、【微博】點贊反饋-情緒最大化宣泄，盡情釋放情緒

1. 使用場景

單一的贊有時無法滿足用戶的愛意，用戶希望更強烈的表達情感，來滿足自己反饋欲。

2. 設計思考

設計目標：提升贊的強烈感知，釋放用戶內在情緒，提高產品趣味體驗，從而增加使用粘性。

設計方案：在微博單條動態頁面中，對“贊”進行點擊一次操作是普通點贊反饋；長按觸發連贊機制，會帶來多彩多圖標的更強的視覺感受，帶來強烈的情感反饋，讓用戶盡情的釋放情緒，得到內在解壓。

十、【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘

1. 使用場景

新聞資訊產品，文章之間來回切換閱讀，時有發生，或者手頭有事忙完再回過頭看。

2. 設計思考

設計目標：解決閱讀中斷導致回看路徑長，影響閱讀效率的問題。

設計方案：瀏覽文章時，屏幕側邊從左向右劃動是返回上一級的交互手勢，當用戶在滑動中停留一下就會激活浮窗功能，隨著手勢操作移動到黑圈內顏色會顯示藍色，表示移入成功，這時放手返回首頁，右下角會顯示一個圓形浮窗，可快速查看浮窗內的文章。

值得學習的是，左滑浮窗圖形隨著手勢上下位置進行移動，路徑更短更快的進行操作，提高用戶使用體驗。因為隱藏式的交互有一定學習成本，產品充分考慮到這點，在文章右上角更多按鈕中放置加入浮窗功能，兩個激活入口，兼容新老用戶使用，提高產品易用性。

十一、結語

設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

文章來源：站酷作者：碳水sir

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1964)

132022-4

UI設計師交互設計-教你在UX輕松創建文案

在了解了人物性格語氣的重要性以及在大廠中的應用場景之后，大家一定很關心，要如何在自己的業務中從0開始創建文案的人物性格語氣呢？下面會結合在酷家樂云設計工具的實踐，針對這部分內容做詳細介紹?？峒覙吩圃O計工具主要是針對內裝設計師的設計工具。整個過程大致分為 5 個階段：資料研究、小組研討、確定人物性格關鍵詞、豐富人物性格、繪制畫像。

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode5" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter ONE 「資料研究」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__7" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-研究內部資料，了解基調和方向

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode8" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">工具產品文案的人物性格和語氣一定是符合公司的戰略定位、品牌形象和設計原則的，因此我們首先對公司現有的內部資料進行收集和研究，為工具產品文案的人物性格與語氣確定一個基調和方向。研究的資料包括但不限于以下內容，包括公司戰略書、品牌白皮書、設計價值觀、設計原則、用戶畫像等等。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__10" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">閱讀相關資料，分析資料中的關鍵詞，在公司資料傳遞出的氣質和價值觀中，提取與人物性格語氣相關的內容。在我們的資料研究中，有一些詞是被反復提到的，且能反映一定人物性格的。比如權威、專業、引領、靈活友好、高效專注、冷靜、秩序、簡潔等等。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode11" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__13" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter TWO「小組研討」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode15" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-設計小組舉行研討會，輸出各自的人物理解

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__16" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">設計師基于自己對產品的了解，以及通過對不同角色的同事、比如視覺、運營、客服的調研，提出工具產品人物性格的大致方向，進行分享討論。我們理解的工具產品要具備以下的一些人物特征，包括沉著冷靜、專業有經驗、善解人意、自信的、隨和的、理性的、靠譜的等。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode18" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__19" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter THREE「性格關鍵詞」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode21" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">- 歸納總結，得出人物性格關鍵詞

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__22" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">基于以上兩輪發散的思考之后，我們進行了一下收斂和聚合。將所有的關鍵詞匯總在一起，對這些關鍵詞進行分析和排查。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode24" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">首先，我們將這些詞匯分為兩大類。一類是描述性格的，比如善解人意、隨和的、理性的、直接的等等。另一類則不是描述性格的，比如關注用戶，更多的是一個人的表現，而非性格。再比如專業有經驗，是指一個人的能力，而不是性格。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__25" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode26" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">性格描述的詞匯里，我們進一步聚合細分，總共歸為 3 類。靈活友好、隨和的、善解人意為一類，理性為一類，直接坦率為一類。非性格描述的詞匯里，我們主要看這些描述是否和前面的性格相關聯，是否出現一些詞匯，是前面的性格類詞匯涵蓋不了的，進而對性格類詞匯進行一個校準。比如，專業、品質化、值得信賴等描述主要表示我們的產品是專業資深，有一定有話語權，這和性格描述的理性關聯性很大。我們認為一個靠譜的、沉穩的、理性的人，他的能力一定是足夠專業，表現出的特質一定是自信的，值得大家信賴，有一定權威性的。再比如，我們認為崇尚科技、科技感的東西在某種程度上和理性、冷靜這種氣質是相吻合的。依此類推，經過所有的分析后，我們發現性格描述下的3類詞匯基本和非性格描述下的詞匯是相關聯的，滿足這3類性格的人物是符合公司和品牌整體調性的。所以這3類性格將作為我們人物性格的考慮范圍。最后我們將每一類性格進行一個關鍵詞的總結，得出了善解人意、理性、直率三個關鍵詞。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode28" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__29" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter FOUR「豐富人物性格」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode31" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-細化性格關鍵詞，讓人物更好理解

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode32" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">基于每種性格，為了更好的理解，我們詳細描述這個人物是什么樣的，不是什么樣的，并給到一些例子描述。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__33" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode34" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">善解人意

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__35" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">是什么？

能夠理解用戶當下的心理狀態，知道別人的需求是什么，然后說相應的話
能夠理解用戶的困難，并幫助他們克服
懂得聆聽用戶，給到用戶反饋渠道，關心用戶的反饋
提供新的或更好的方法，幫助用戶實現目標

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__36" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？

置身事外，只是客觀的描述事實，沒有體諒用戶的心情
給人以壓迫感或距離感

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__37" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：

發生問題時，應告訴用戶可行的解決方案，或產品為用戶做了哪些挽救措施
從用戶視角描述價值
多給用戶支持和鼓勵，不要命令、強迫用戶，不要責怪用戶
使用貼近用戶的用語，不使用過于專業、用戶難以理解的表述，也盡量不創造新的概念或詞匯

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__39" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">理性

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__40" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">是什么？

能夠聚焦關鍵信息，精煉表達
能夠控制情緒，克制表達
邏輯清晰，表達嚴謹，前后一致

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__41" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？

說話沒有重點，所有細節都面面俱到
采用情感化的表達方式強調或放大情緒

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__42" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：

提供幫助用戶實現目標的關鍵信息，不用把前因后果都解釋一遍
慎用“啦”、“哦”、“吧”、“嗎”等矯飾的語氣詞，以及“！”、“？”等語氣標點
不說“可能”、“不確定”、“也許”這類似是而非的詞，也不能說過于絕對的話，會影響嚴謹性

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__44" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">直率

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__45" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">是什么？

不卑不亢，平等地和用戶對話
表達簡單清晰，不繞彎子
追求效率，為用戶提供解決問題的最短路徑

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__46" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？

過度的關懷和討好
過于官方，沒有提供有效幫助
掩蓋問題

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__47" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現：

說話平等直接，避免用”您“這類詞，而是用你、我來進行對話
在出現問題時，及時通知用戶，無需遮遮掩掩
在用戶遇到問題時，坦誠客觀描述事實，無需過多表達歉意

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode49" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter Five「繪制畫像」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__51" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-將性格形象化，讓人物更立體

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode52" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">為了讓大家更直觀的理解我們的人物，方便在與各職能角色溝通時快速達成共識。我們收集了符合我們人物性格的一些畫像打印出來，通過討論投票的形式，選出最符合我們產品的人物畫像。

                                                <p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:&quot;font-size:16px;outline:0px;padding:0px;line-height:32px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><br />

文章來源：站酷作者：酷家樂UED

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

                                                <p style="margin-top:0px;margin-bottom:1rem;white-space:normal;caret-color:#282828;box-sizing:border-box;font-size:16px;background-color:#FFFFFF;color:rgba(0, 0, 0, 0.843);font-family:&quot;letter-spacing:0.1px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.syprn.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>(&nbsp;<a href="http://www.syprn.cn/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.syprn.cn&nbsp;</a>)是一家專注而深入的<a href="http://www.syprn.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">界面設計公司</a>，為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.syprn.cn/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">BS界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">cs界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">ipad界面設計</a><a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">包裝設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">圖標定制&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">用戶體驗 、交互設計、&nbsp;</a><a href="http://www.syprn.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">網站建設</a><a href="http://www.syprn.cn/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、<a href="http://www.syprn.cn/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">平面設計服務</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong></strong></strong>
                                                </p>
                                                <div>
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />

評論(0) 瀏覽(1987)

132022-4

2022設計作品精選 | 數據可視化

展示一：

[png 到 jpg 輸出圖像]

[優化輸出圖像]

[優化輸出圖像]

[優化輸出圖像]

[優化輸出圖像]

[優化輸出圖像]

[優化輸出圖像]

[png 到 jpg 輸出圖像]

[優化輸出圖像]

展示二：

[優化輸出圖像]

展示三：

[png 到 jpg 輸出圖像]

展示四：

展示五：

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》2022設計作品精選 | 數據可視化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(1855)

132022-4

提高用戶體驗的10個優秀案例

一、特殊場景下的差異化設計

根據用戶使用場景和特殊情況出現時，產品會結合變化呈現不同的功能或者服務，這種差異化的設計更能體現情感化設計的一面，提高用戶對于產品的認可度。

騰訊新聞 APP 在東航事故出現時，在底部操作欄新增了祈禱的圖標，方便用戶表達祈禱的心情。特殊情況下的差異化設計滿足了用戶的情感需求，也體現出了產品的溫度，帶給用戶更強的粘性。

二、優化指引路徑提高操作效率

通過提取本機號碼一鍵登錄減少了繁瑣的注冊流程，提高了登錄的效率，減少用戶的操作路徑。在登錄時都需要用戶同意一些條款協議等內容，當用戶未勾選時通常都是提示用戶，指引用戶選擇后操作。這樣的設計增加了用戶的操作路徑，使用體驗不是很好。

網易云音樂 APP 在同樣問題出現時，提供了一個彈窗進行指引，用戶無需重復操作，直接點擊“同意并繼續”即可完成登錄。在用戶誤操作出現時，無需用戶過多的操作路徑，給出了更高效的操作解決方案，提高了用戶使用體驗。

三、溫馨提示降低用戶的過度依賴

隨著互聯網時代的到來，太多的娛樂產品占據了我們的時間，過度依賴和使用耗費了大量時間。特別是短視頻的走熱，刷視頻容易帶來過度依賴，影響用戶的視力等健康問題。

抖音 APP 作為用戶量龐大的短視頻產品，提高用戶體驗至關重要。為了降低用戶的過度依賴，提示用戶注意休息，特意設計了溫馨提示。用戶可以設置提示時間和進行管理，APP 也會定期提示用戶。溫馨的設計提高了用戶對產品的好感度，也能輔助用戶做好時間管理，以免過度依賴而影響休息時間。

四、隱藏式設計提高版面利用率

對于用戶來說希望內容具有較高的可見性，提高內容的曝光度才能被關注。在控制內容的優先級時，通過隱藏式設計可以滿足更多內容的呈現，不過需要做好隱藏內容的引導，提高隱藏內容被發現的概率。

網易云音樂 APP 在云貝中心簽到設計中使用了隱藏式設計，將簽到相關的附屬內容隱藏在展開卡片中，為更多主要內容提供了展示空間。為了提高展開的交互設計，在每天初次訪問時會默認展開，然后再收起隱藏，這個動態的指引提高了這個交互動作的曝光度。利用隱藏式設計滿足了產品需求，通過動作引導提高了用戶知曉度，是一個具備較好體驗的設計解決方案。

五、更人性化的模式設計

隨著用戶群體的跨度增加，為了帶給不同年齡段用戶更好的體驗，眾多產品都針對不同用戶提供了定制化模式。特別是針對老年用戶而進行適老化設計，還有針對青少年兒童設計的時間管理等，不同模式滿足了更多不同年齡段的用戶需求。

比如優酷 APP 在個人中心設計了“模式切換”，點擊可以設置長輩模式、青少年守護、兒童守護。針對不同年齡段對于產品的使用需求進行定制化，帶給用戶更加人性化的使用體驗。

六、定制化的播放頁模式設計

不同用戶對于產品的使用需求有所差異，固定的模式雖然可以減少產品的開發成本，但是單一的體驗不夠人性化。針對不同用戶提供更多選擇，可以帶給用戶更加人性化的體驗。

MOO 音樂 APP 為了滿足不同用戶對于播放頁的體驗差異，設計了播放頁模式定制化切換，用戶可以選擇以專輯封面或者背景大圖進行展示。為了直觀的方便用戶做出選擇，模式設計以可視化的圖形展示，便于用戶更快的做出選擇。定制化的模式雖然把繁瑣的事情留給了產品開發者，卻把更好的體驗帶給了用戶。

七、縮放預覽滿足對細節的體驗

隨著短視頻走進更多用戶的視野中，短視頻的形式也是越來越豐富，滿足不同用戶的使用體驗至關重要。特別是圖片形式引入短視頻平臺，對于細節的體驗因人而異，縮放畫面滿足對于細節的體驗才能更加人性化。

抖音 APP 無論是針對視頻還是圖片形式作品都可以縮放預覽，配合縮放的手勢交互帶給用戶放大細節查看的體驗，滿足了不同用戶對于細節的需求。手勢交互也是產品設計師需要多多探索的方向，更加便捷的操作有助于提升用戶對于產品的使用體驗。

八、滿足用戶好奇心的設計

用戶從小白到依賴是一個逐步探索的過程，好奇心的用戶會點擊嘗試任何的功能，甚至連一個圖標或者 LOGO 都希望獲得彩蛋。作為設計師來說設計出來的每一個元素都需要考慮用戶體驗，給予反饋式的設計才能滿足好奇心的驅使。

愛奇藝 APP 首頁左上角的 LOGO 展示你有注意到嗎？有沒有嘗試去點擊體驗，作為好奇心驅使特意嘗試了一下。點擊之后會跳轉到皮膚等設置的頁面，為該功能的曝光新增了首頁入口，用戶也可以通過個人中心“裝扮”進行設置。該設計解決方案不僅滿足了用戶點擊的好奇心，也賦予了 LOGO 展示功能化的作用。

九、可以標記和疊加的點贊設計

點贊設計在眾多產品中均有體現，這是用戶表達對于內容的喜歡，以此來增加作者和用戶之間的互動性。為了吸引用戶點擊和帶來差異化的體驗，點贊設計也被腦洞大開，在表情化、疊加點贊、點贊標記、微動效等方向不斷探索。

小宇宙 APP 在播放頁中對音頻進行點贊時，可以多次疊加點贊，點擊之后會針對音頻播放進度條進行點贊標記，反復點擊也會使得進度條紋增高，以此來強化點贊的程度。該設計解決方案不僅豐富了點贊的設計，也能通過標記和進度條紋的高度讓用戶記住關鍵的部分，方便后續回顧的時候知道哪些時間段是重要內容，提高用戶對于產品的使用體驗。

十、差異化的短視頻推薦設計

作為新聞資訊類產品來說，大部分用戶的習慣還是圖文結合的閱讀形式，不過隨著短視頻的出現，改變了一部分用戶的閱讀習慣。通過短視頻獲取新聞資訊、搜索指定內容、學習生活技巧或者專業技巧等均可實現，改變了用戶的閱讀習慣和獲取內容的形式。

央視新聞 APP 作為新聞資訊類的專業平臺，在滿足用戶閱讀新聞的同時，也跟進了短視頻觀看新聞的體驗。在底部標簽欄以舵式導航的形式作為短視頻新聞入口，點擊之后會有推薦視頻展示，差異化的推薦設計不僅提高了內容的曝光度，也吸引了用戶的關注度。

小結

本期為大家總結了提高用戶體驗的十個優秀設計解決方案，體驗、分析、總結是為了掌握別人的設計經驗，積累設計靈感并運用到項目設計中。靈感的積累離不開總結，探索細微之處的差異化對于 UX 設計師而言至關重要。

本期分享到此結束，僅為個人角度的體驗總結，希望可以帶給大家更多靈感啟發。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》提高用戶體驗的10個優秀案例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(5615)

122022-4

交互設計中排行榜設計詳解

排行榜設計有幾種展示方式？排行榜入口引導怎么做？視覺表現有那些？看這一篇，帶你全面了解排行榜的背后思考及做法！

“今天吃什么啊？”

“不知道啊，看看大眾點評，哪家店比較靠前”

“一會去看什么電影？”

“我看豆瓣上，這部片子評分特別高，我們去看這個吧”

當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，會發現當你面對的選擇越多時卻越不知道該如何做決定，或者當下做了決定后會一直思考做的這個決定是不是最好的，這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？如果排行榜僅僅是用來降低用戶的選擇成本，為什么所有商家都對排行榜趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配！

排行榜的本質是一個沒有感情的信息篩選機制，將所有相關的同類事物之間通過比較，從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應使得用戶降低自己的選擇成本，可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名，那么這一切背后的原理是什么？

一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。

1.選擇類排行榜-降低用戶選擇成本

在沒有各種應用前，當我們決定購買什么東西或去哪家消費時，前期需要花費大量的人力、物力去搜集相關的信息進行整理集合，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。

選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助用戶降低選擇成本的同時，也影響著用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）。

比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解，收集信息建立備選集，但由于京東在電子設備購物方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。

2.信息類排行榜-滿足社交需求

在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了可以展開話題相通的談資。

在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感等等，這些都是在滿足大眾自己的社交需求。

3.分享類排行榜-自我確認需求

過年期間各家app紛紛都推出了自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并把這些報告的截圖分享到自己的朋友圈！在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要清楚自身在大數據下的自我確認，通過各種各樣自我測試類榜單，判斷自身的能力、情緒、價值等等，來達到自我認同，否則就會感到焦慮不安。

加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺，人人皆演員”。在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。

我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，大家一起參與討論。

無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？下面我們來討論排行中平臺的影響及背后的原因。

對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。

1.平臺權威性—用戶側

從我們記事起，我們對世界的認識來自我們的父母或老師，而這些教導我們什么是對、什么是錯的長輩或老師，對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家，比如：醫生、律師、教授等，認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究這一領域問題的工作，做出更輕松的決定，雖然不一定是正確的。

搜索我們會第一時間想到百度，需要觀看影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？

2.平臺權威性—平臺側

影響用戶的決策方向

平臺權威性對用戶來說意味著說服力和影響力，在減輕用戶的決策壓力的同時，也影響著用戶做出平臺所需的決策方向；

平臺自帶話題性

平臺本身的權威性也會為平臺承載的內容帶來討論的話題度，加大平臺承載內容的傳播范圍。比如，每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度。

輸出口優化

排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值。

平臺盈利

平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。

3.平臺權威性—廣告告知

在平臺完成建立權威性后，部分平臺開始利用排行榜進行商業變現，比如百度、58的競價排名等，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。

上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得上榜用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。

由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。

而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。

排行榜資源的建立

排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。

同系同門資源導流

對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。

自建用戶體系

不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。

偽造

當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。

面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。

1.頁面tab

在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。

知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。

而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。

2.圖標入口

首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。

其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。

3.商品詳情頁榜單入口

用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）。

4.搜索-篩選（無明確搜索目的）

當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。

沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。

1.編輯推薦/小編推薦

在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。

2.猜你喜歡/相關推薦

平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。

3.年度總結排行榜

朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。

4.TOP排行榜

不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。

5.搜索-篩選（有明確搜索目的）

相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。

排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。

好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。

1.唯一性榜單頭部

當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。

2.可復用性榜單頭部

有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。

得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。

排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

1.純文字形式

純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

2.圖文結合形式

相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。

圖片形式

上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）。

左文右圖VS左圖右文

每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。

因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。

3.橫排+列表表現形式

說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到）

榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；

信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。

排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。

資料來源：

社交的本質
社會心理學對用戶體驗的影響系列：權威性原則
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
交互分析：排行榜應該如何設計？
如何利用好排行榜產生榜單效應？
萬字長文深度分析：產品排行榜的設計和玩法
關于排行榜的設計，這有一份7000字干貨手把手教你做！
淘寶“有好貨”競品分析：淘寶為何要把排行榜藏起來？
我們曬網易、支付寶年度榜單，其實只是在曬自己？

評論(0) 瀏覽(4566)

122022-4

界面設計中的那些版式-圖版篇

這篇主要說一下版面和圖形使用，對高手來說可能有些老生常談，但對移動端界面設計或許會有點參考價值，用幾分鐘看看吧。

作者：王鐸(Micu設計)

這篇主要說一下版面和圖形使用，對高手來說可能有些老生常談，但對移動端界面設計或許會有點參考價值，用幾分鐘看看吧。

界面美不美，除了構圖之外，另一個重要手段的就是如何處理留白，也可以理解成版率。留白就是為了凸顯層次、突出內容。

手持設備屏幕較小，決定了信息顯示是有限的。用戶有效接受信息并不與界面內提供的信息量成正比，有的時候提供的越多，用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。

讓用戶接受該接受的有效信息，是關鍵。

在設計界面的時候，因為內容和頁面都比較多，為了保證頁面與頁面的統一性，首先需要設定頁面內容四周的留白。在設定頁面的間距后相應的內容圖標，圖片等的安排就確定下來了。用這樣的方法能使調整出來的頁面更為條理化。

紅色色的部分就是內容。在頁面中一般會有導航的存在，那么內容區的版面是從導航下面計算的。

界面四周增加留白。這樣的界面很容易集中用戶的視線到少數的內容上去，突出了焦點，整體給人一種典雅高級的感覺。

反之，縮小留白或者不留白，頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加，沖擊感增強，讓界面更顯得富更有張力。

根據頁面的內容不同和功能點，適當的調整界面周邊的留白非常重要。一般圖片本身比較有意境，可以直接采用“出血”的方式，不留白或者少留白。

下面介紹一些版面的小規律、小技巧。

1.取其精華，一塊顏色也能定天下！

提取主要的信息，通過對整個頁面的顏色進行調整，從而提高版面使用率。將一個或多個功能點作為主信息，提到首頁中進行設計，從達到想要的視覺效果。這樣處理后的界面設計不僅能顯得大氣有張力，而且展現出來的信息聚合度高。

在缺少圖像素材的情況下，如何讓界面顯得有張力，整體感強，呈現出來的版面率高。

單色背景留白，凸顯主要信息。要求圖標或者文字，相對簡潔，能夠很好地和背景色融為一體。再通過線條和規則的圖形來分割留白區域，增加層次感。

做好這些的前提是，設計師要明確主要信息，以及它們之間的關系。

結合產品特點巧妙的運用大色塊，將變化的信息用顏色區分出來。讓用戶最直觀的感知信息的變化。

2.多色塊靈活分割，加強內容使用率

圖片素材少，還可以采用多色塊進行分割，讓界面顯得不那么單調。

加強內容使用率可以通過色塊（臨近色或是互補色）的延伸或是圖像的重復來組織頁面版式。將圖片和色塊進行統一化排版布局，整體基調能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統一性與簡潔性，色調的一致的統一性和連續性使頁面更為整體，這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區域也會增加，從而操作也變得便捷起來。

3.構圖不拘一格，找到最合適的內容版率。

橫向和縱向分割，使界面顯得整齊、穩定，而斜向分割讓界面沖擊感強。

使用不同的構圖方式，穿插性地將少量的圖片整合在構圖的形狀中，能讓界面變得活躍而富有活躍性。這樣的表現方式還能將產品的氣質融入進去，淋漓盡致地展現。有節奏感的設計更為取巧地加強了版式率。在界面設計中，圖文的穿插可以引導用戶的視線，讓原本簡單的內容變得有趣。在層次上，也可以區分內容的主次性，讓閱讀更加的輕松。

4.簡約化桌面或主頁，讓界面越近越美

常用方式：圖標、加大文案字號、序號、數字等來達到加強版式率的運用，提高視覺上的豐富性。

圖標表達

人們越來越認同扁平化，一方面是因為扁平化的圖標看上去清新簡潔，用戶理解快。另一方面，與圖標搭配的背景更加單純，要么留白，要么炫簡，盡可能減少給用戶在視覺上干擾。好的扁平化圖標不是簡單地刪減細節，而是著重凸顯有效的信息。

圖標是最為直接的表達方式，簡單明確的圖形，能讓用戶通過對圖標的認識快速找到想要的功能和需求點。圖標與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強了界面內容的節奏。運用圖標的設計條理清晰，功能明確。

信息化圖標能給產品增色。有趣的圖標設計不僅能很好的將功能點進行區分，也能好的將軟件的特性和品牌展現出來。

把圖形融入到界面中，可讓內容更為豐富，層次更加的分明。

5.突出重點文案，調整版面率，讓信息更清晰。

調整文字大小將調整版式的使用率，使原本空的界面內容顯示的更為飽滿，用戶閱讀起立更為直接。使用較大的字號進行加強頁面使用率能讓頁面顯得更為信息。突出重要的引導文案，加強了軟件的情景感和帶入感?？焖僖龑Я擞脩魧δ艿睦斫猓瑥亩鴾蚀_的使用。

在頁面中我們可以強調重點數據或功能詞等來區分界面中的層次感。讓用戶的視線更為集中。

6.串聯圖片，讓它們講故事，視圖化版面。

這種設計方法更多的是將文案用圖形或插圖展現出來。在數據頁面和引導頁中最為常見。

一段文案一副插圖的引導頁更為有特色，給用戶的情懷感更強。這種設計手法也是最容易體現產品特質和吸引眼球的。圖案的易讀性高，能在極其短暫的時間內快速傳達給用戶信息。用圖像來講故事，是設計中最根本的表現方法，也更是最為受歡迎的表達方式。

圖在界面中的運用

三種方式：摳，邊界關系，殘缺

1.切摳弄，制造純色留白！

在處理圖片素材的時候，常常會碰到圖片背景雜亂，產品不夠突出的問題。在設計之前我們可以對素材先進行處理，將產品直接摳出來。利用這種方式可以找到產品的形狀，越明確的形狀越能反映用戶對產品的認知度。產品的獨特性能快速明確的表達給用戶，用戶從潛意識第一時間的判斷到產品的類型和使用特性。

下面是一個曲奇餅干的網站，將主餅干的勾出來，進行層次感的區分。在產品介紹中采用了側面的實物摳圖，體現出了曲奇餅干最為真實的厚度。運用碎落的餅干塊虛化拉開產品的層次。深色的背景與餅干對比強烈，直接凸顯了實物的形狀。讓用戶一目了然，食欲大增。從而增了用戶的購買欲望。

在很多的電商APP中也常采用摳圖，去除多余雜亂的信息，利用產品的形狀直接體現不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。

2.建立邊界，再打破邊界，破出重圍

如果需要展示的信息較多，采用分割區域的方法，可以使界面顯得整齊干凈。而當信息較少時，設計師可以大膽選用“局部出血”的方式，建立邊界，再突破它，增加層次感和沖擊力，以凸顯主題。

一定要記得設定好的內容范圍是為了讓頁面顯得整體化，而不僅僅是擺放和拼圖。

在網頁設計中有時候會見到這種方式，其實在手機、平板等UI設計中我們完全可以套用。

運用圖片的穿插來區分背景和產品或形象的層次感，處理完的界面更加富有生命力。放大需要突出的主形象，把它作為第一焦點展現在用戶的眼前，有種強烈的“面對面”感受。

在APP中采用將圖片局部突出出來，能拉開信息的層次，將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導用戶點擊，另一方面在上下滾動的長副瀑布流里，適當地打破平衡，可以豐富頁面的節奏感。

在ICON的設計中我們也常用到破圖的方法。在統一的圓角矩形中，將表達寓意的圖形局部超出，使圖標更為有空間感和靈活性。

采用這種方式設計的圖標空間感強，層次感強烈，能使產品形象顯得更為突出。

在字體中也經常運用到破圖的方法，讓字體更為生動。在破字的過程中也能引發出不同的創意點。

大美青海字體設計我把數字9破出了方塊。而在優車尚品字體的設計中，我通過品字的破圖找到了車的聯想，讓整個字體設計的更為貼切靈動。

3.沖出畫面，只保留局部，讓產品再大一點！

有時候，我們拿到素材，在處理后發現，圖片比較平常，用戶一眼就知道是什么。這個時候，可以考慮保留局部的方式，營造殘缺美，增加時尚感。不要小看用戶的的腦補能力，當然，這種方案還是要與客戶或者產品經理及時溝通，殘缺美不是所有人動能接受的。

我們將圖片進行放大，找出產品特點。選擇能撐起整個頁面構圖的位置，切除不必要的圖形，讓圖片沖出畫面！這樣處理后，頁面顯得非常富有張力，激發了用戶想看到產品整個形象的欲望，起到產品預熱的效果。

在WATCH的預熱官網中，設計師將圖片放大，裁取有特點的部位進行展示，引導了用戶點擊觀看產品的整體形象，激發了用戶更多的去了解產品的特性。

從版面角度看，局部放大裁切圖片，增加了留白，增加了版式率，讓整個頁面顯得飽滿，微距的效果使用戶與產品更貼切。

這一篇主要理順了一下版面和圖形使用知識，并不全面，大家還是以欣賞為主。看完了能有個留白、破圖的印象就不算白看。

設計大方向上的東西終于絮叨得差不多了，我知道其實大家都懂，就是不知道從何下手而已，下一篇來點小方向的實用東西，歡迎大家留言。

文章來源：站酷作者：micu設計

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、

BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1752)

082022-4

UI設計師交互設計-如何寫好產品體驗文檔

文章將分為6部分

1、撰寫文檔的目的

2、什么樣的產品值得體驗

3、產品體驗類型

4、產品體驗文檔應該包含的內容

5、文檔質量的評判標準

6、體驗文檔和競品文檔的異同

一、撰寫目的

首先要理清楚，我們為什么要寫產品體驗文檔， 是工作需要？還是興趣使然？

明確寫作目的才不會迷失方向，不知道自己在寫什么，應該寫什么。

其次，要 明確文檔的受眾是誰。

好的文檔，是寫別人想看的內容，你要明白受眾想要看什么內容。

二、什么樣的產品值得體驗

1、與你工作相關的

如果你是做平臺型電商，那么淘寶、京東這些你就得去體驗體驗。

2、上熱搜、應用商店登榜

例如之前大火的啫喱，一度在APP Store的熱度超過微信、抖音，作為產品經理就很有必要下載體驗一番，琢磨一下它爆火的原因，提升自己的產品感覺。

3、新穎的商業模式

例如之前QQ音樂，在聽歌過程中給用戶插入廣告播放，雖然極度惡心，但確實是一個比較新穎的商業模式。。。

4、新穎的交互模式

例如現在有很多APP的開屏廣告，直接使用手機的重力感應器，用戶稍微搖動手機就會跳轉到對應的廣告頁，不需要用戶去點擊。

雖然我覺得這種交互方式挺惡心的，但在不同的場景下，其實也有可借鑒之處。

5、新穎的解決方案

例如之前房產平臺推出的3D實景看房，用新的方式更好地滿足，用戶想直觀了解房屋布局的需求。

三、產品體驗類型

1、深度體驗

特點： 多角度、深挖產品細節。

這意味著，我們需要投入大量的時間和精力，持續做很多案頭工作。

哪些產品適合我們去做深度體驗呢？

個人建議是：經久不衰、行業TOP 10、與你工作比較相關的產品。

全面體驗這些產品，可以在很多方面帶給我們靈感。

例如從0到1它是怎么做出來的？1到100的推廣它是怎么完成的？100到正無窮的行業壁壘它是怎么形成的？......

相信我，花一段時間去持續研究這些產品，一定收獲滿滿。

2、快速體驗

「快餐式」體驗，特點： 短平快。

當我們想了解一些產品有趣的表現層、交互層設計時，就可以用這種方式，花個1-2小時把玩，記錄你覺得特有意思的點。

四、文檔應該包含的內容

接下來，阿G將通過分析「善診」這款APP，和大家分享一下，好的產品體驗文檔應該包含的7部分內容。

注意： 我們不是為了寫文檔而寫文檔。

1、體驗環境

1）產品信息，通常會包含

產品名稱

產品logo
產品版本

2）體驗信息，通常會包含

體驗人
體驗目的

體驗時間

3）系統信息，通常會包含

體驗系統
體驗設備

撰寫體驗環境的 3個注意事項：

1、產品版本

不同環境，版本可能不一樣，導致功能、界面等差異。

例如善診，截止文章發出前，蘋果最新的版本是2.7.0，小米最新的版本是2.6.0，華為最新版本是2.6.9，所以寫的時候最好備注一下。

2、體驗時間

可以是持續一段時間，特別是深度體驗時。

3、寫體驗環境的目的

為了讓讀者（包括自己）清楚了解所體驗產品的基礎信息，方便（日后）翻閱。

特別是體驗目的，要 很清晰地讓讀者知道， 為什么要體驗這款產品，體驗這款產品能收獲什么。

2、產品概述

1）產品類型

寫清楚產品的類型和形態，例如善診是一個中老年健康醫療服務平臺，專注在移動端。

2）Slogan

一個產品向外界傳遞的產品理念，例如「父母健康找善診」。

3）產品介紹

通過體驗產品和查閱公司/產品的資料，為讀者提煉產品特點，介紹產品的主要用途。

4）產品歷程

按時間線，介紹產品一些重大事件。

以上信息獲取渠道：

1、公司官網（特別是B端產品，官網會給你安排得明明白白）

2、應用商城相關的產品介紹（注意靈活使用搜索引擎，哈哈）

3、用戶分析

1）用戶畫像

一般會從人口學、社會學角度，放一些用戶的年齡分布、地域分布、學歷、性別占比等數據。

具體還是要以體驗的產品類型、所處行業為準，把需要呈現給讀者的重點信息放出來就好，不用貪多。

2）用戶需求

3）使用場景

通過行業信息、產品功能、用戶畫像，結合自己的思考，提煉重點用戶需求和使用場景。

很多時候，我們不熟悉體驗產品所處的行業，不要緊，可以猜，然后通過和他人交流、查閱資料，修正內容。

以上信息獲取渠道：

1、用戶畫像：百度指數、頭條指數，或者行業報告

2、需求和場景：行業報告 + 體驗產品（當然如果你身處于行業之中，就可以依據經驗來做一些總結）

4、商業模式

1）模式概述

詳細描述一下公司/產品的變現方式，最好可以圖文 + 數據。

2）模式優勢

每一個產品能活下來，都有能夠形成閉環、具備一定優勢的商業模式。利用搜索引擎查閱相關資料，再加上對產品的體驗思考，剖析、學習其商業模式，有助于培養我們的商業嗅覺。

以上信息獲取渠道：

行業報告 + 新聞報道

做產品，可不僅僅是為了情懷，首先你要考慮的是，如何活下去。

5、市場表現

1）市場/用戶規模

產品在所處市場的占比，或者用戶規模，可以側面驗證它是不是一個好產品。

這里的「好」不僅是用戶體驗好，更是真正解決了一些行業/用戶的需求。

2）融資情況

資本是最敏感的，一個產品有沒有前景，融資情況會很坦白地告訴你，哈哈。

以上信息獲取渠道：

1、市場/用戶規模

上市公司，可以看一下財報，里面真的啥都有......
非上市公司，那只能去官網瞅瞅，或者通過搜索引擎，看看對應的小道新聞或者行業報告

2、融資情況：企查查

6、運營體系

1）版本迭代

為什么要看產品的版本迭代？

任何產品的迭代，都是基于內外部環境變化引起的策略調整，我們可以通過觀察某個產品的迭代情況，培養我們對市場環境變化的敏銳度。

同時可以通過歷史版本迭代，思考產品的迭代邏輯和規律，看看是否有可借鑒之處。

2）增長轉化策略

結合時間線和版本迭代記錄，思考體驗產品的運營策略是如何完成其用戶/銷量的增長轉化。

以上信息獲取渠道：

版本迭代：七麥數據、App Annie（付費）

7、功能體驗

1）核心流程圖

通過把玩產品，梳理出最核心的業務流程圖。

2）信息架構圖

信息架構圖，簡而言之就是把產品主要對象的屬性列出來，與頁面、交互都無關。（后面可以再單獨出一篇和大家聊聊信息架構圖應該怎么畫）

3）特色功能

可以找一些你覺得最有意思，最特別的功能，并做簡單介紹。

4）產品建議

在體驗產品過程中，覺得哪些地方可以改進，具體說一下問題點，分析問題點可能產生原因，再提出有效的改進建議。

8、總結反思

對比自身

思考一下體驗產品上某個亮點，如何能和自己負責的產品進行有效結合，站在巨人的肩膀上看世界。

上面說的7部分內容，是不是每次寫體驗文檔的時候，都應該有？

當然不是，我們應該根據體驗目的、體驗類型、產品類型，適當地做一些裁剪。

五、文檔質量的評判標準

圍繞著體驗目的和讀者感受，可以把產品體驗文檔的質量評判標準做一個總結。

1、通用（兩種體驗類型都應該有）

1）體現產品核心價值

2）抓住產品重點

3）體現產品特色

4）結構清晰

5）格式美觀

6）思考總結

2、深度體驗可以有

1）詳細數據支持

2）商業模式分析

六、體驗報告和競品報告的異同

很多小伙伴會把產品體驗報告和競品分析報告搞混：都是對產品進行體驗和分析，除了名字之外，到底有啥區別？

我們從「異同」兩個方面來分析，看看它們究竟有啥區別。

1、異

1）目的不同

競品分析文檔是對競品做分析，常用SWOT模型，將自己和競品做對比分析，學習借鑒。而產品體驗，不一定是競品，可能只是你個人感興趣而已。

2）范圍不同

競品分析文檔，一般僅限于輸出競品的思考總結，而產品體驗的范圍更廣。

3）深度不同

產品體驗可以淺嘗輒止，但競品分析不行，競品分析需要透過現象看到本質，觀察競品的一舉一動，配合市場動態，不斷調整我們自身產品方向，甚至是公司戰略定位。

2、同

產品分析報告和競品分析報告，除了都是對產品進行分析之外，還有一個共同點：我們要 做自己。

不管體驗的產品多厲害，不管競品多無敵，我們都是抱著學習、借鑒的心態去分析，去思考問題。

每個團隊、每個產品誕生的環境都不盡相同，縱然其他產品做的再好，我們也不能「全盤皆抄」，要時刻保持初心，做自己。

好了，產品體驗文檔如何撰寫，阿G就先聊到這里。

其實產品體驗的整個過程，最重要是以下幾點思考：

1、如果你是這個產品的產品經理，你會用什么方案去解決重點用戶的需求？

2、你的方案和現在產品方案的差異點在哪里？

3、為什么會有這些差異點？

4、方案對比的優缺點各有哪些？

不管是C端還是B端，不斷思考這幾個問題，相信慢慢就提升自己的產品Sense。

多體驗、多思考、做自己、少糾結模板

文章來源：站酷作者：阿G聊產品

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1758)

072022-4

echarts設置柱狀圖柱狀圖粗細大小

主要屬性：

 //設置柱狀圖大小
                    barWidth: 20, 
            

                
                    1
                

                
                    2

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>柱狀圖大小</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于準備好的dom，初始化echarts實例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定圖表的配置項和數據
            myChart.setOption({
                title: {
                    text: '柱狀圖'
                },
                tooltip: {},
                legend: {
                    data: ['銷量']
                },
                xAxis: {
                    data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
                },
                yAxis: {},
                series: [{
                    name: '銷量',
                    type: 'bar',
                    　 //設置柱狀圖大小
                    barWidth: 20,
                    //設置柱狀圖漸變顏色
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 處的顏色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 處的顏色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 處的顏色
                            }], false)
                        }
                    },
                    data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
                }]
            });
        </script>
    </body>

</html> 
            

                
                    1
                

                
                    2
                

                
                    3
                

                
                    4
                

                
                    5
                

                
                    6
                

                
                    7
                

                
                    8
                

                
                    9
                

                
                    10
                

                
                    11
                

                
                    12
                

                
                    13
                

                
                    14
                

                
                    15
                

                
                    16
                

                
                    17
                

                
                    18
                

                
                    19
                

                
                    20
                

                
                    21
                

                
                    22
                

                
                    23
                

                
                    24
                

                
                    25
                

                
                    26
                

                
                    27
                

                
                    28
                

                
                    29
                

                
                    30
                

                
                    31
                

                
                    32
                

                
                    33
                

                
                    34
                

                
                    35
                

                
                    36
                

                
                    37
                

                
                    38
                

                
                    39
                

                
                    40
                

                
                    41
                

                
                    42
                

                
                    43
                

                
                    44
                

                
                    45
                

                
                    46
                

                
                    47
                

                
                    48
                

                
                    49
                

                
                    50
                

                
                    51
                

                
                    52
                

                
                    53
                

                
                    54
                

                
                    55
                

                
                    56
                

                
                    57

評論(0) 瀏覽(6488)

072022-4

css 設置tr的邊框

有時候有設置tr邊框的需求，寫下如下css

tr{

border-bottom: 1px solid red;

}

發現不起作用，后來在w3c上查了查，原來只有table，th和td有獨立的邊框，tr并無邊框。

但我想實現每一行都存在下邊框，其他邊框不存在，該怎么辦呢？

有兩種實現方法：

方法1：

table{

border-collapse: collapse;

}

tr{

border-bottom: 1px solid red;

}

解釋，border-collapse: collapse; 將table，th和td的邊框合成單一的邊框，此時在使用tr就可以達到目的。

方法2：

先在table標簽里面設置cellspacing等于0，

<table cellspacing="0">

然后，

td{

border-bottom: 1px solid red;

}

解釋，如何不設置cellspacing等于0，直接設置td的下邊框，則下邊框會不連續，因為cellspacing不為零，單元格于單元格之間存在間隙。

轉自：csdn

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

評論(0) 瀏覽(5734)

« 1 ... 5 6 7 ... 9 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合