用戶喜歡在網上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個用戶都為此而樂此不疲。
很多互聯網產品在用戶點擊收藏后，讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇，他們只想簡單的把自己喜歡的東西收藏下來。
選擇本身并不是一件很容易的事情，尤其是對于那些有選擇困難癥的人來說。實際上，我每次都是選默認那個。
這并不是一個好的用戶體驗。
當然也有一些做的很好的體驗，比如微信的收藏，收藏后會出現一個“收藏成功”的非模態反饋。
同時可以添加標簽，但這個并非強制，為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說并不需要用戶去創建自定義分類。
你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。
網站會根據你采集的圖片在極短的時間內，自動識別出圖片對應的收藏夾類型。可以直接采集到對應的文件夾。
然而經過測試，經常會出現誤差。因為圖片的分類其實很復雜的，屬于高度自定義，很顯然，智能識別并不是一個好的解決方案。
花瓣是一個設計師收集靈感的網站，該網站常見的用戶使用場景是，設計師在瀏覽素材時，會大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來花瓣網加入了快速采集的功能，其邏輯是網站會默認選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。
社區類產品有各種點贊，收藏等互動信息，但用戶又不想被別人知道這些信息。
因此，在規劃產品時需要考慮到用戶互動隱私的保護，這是用戶側的剛性需求。
抖音個人主頁的點贊列表，我記得剛開始是公開的，且不能設置為私密。
用戶點贊的視頻會出現在這里，卻少有人希望這些信息被別人看到，總有些點贊視頻你并不想被別人看到。
如果點贊列表可見，那么用戶在點贊的時候就會有所顧慮，這不利于平臺的互動率。
特別是隨著抖音上熟人也越來越多，強關系社交場景在漸漸加強。
抖音后來也發現了這個問題，把它設計成了默認隱藏。（當然可以自己設置為公開，但只有極少數用戶會這樣做。）
由于點贊是私密的，用戶可以隨心所欲的點贊自己喜歡的視頻，毫無社交壓力。
這是為何？
源于人性心理學：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設置了權限，畢竟，誰想被別人窺視當年那個煞筆的自己呢？
現在訂閱號打開率越來越低，朋友圈分享曾是訂閱號流量來源的一大入口。
朋友圈早已淪為了一個人設打造的陣地，現在的人發圈越來越謹慎。
用戶似乎越來越不愿意在朋友圈分享文章了，除非是有利于自己人設打造的內容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點了“在看”后，此文章會出現在看一看這個模塊，且七天前的分享將不可見，這就相當于一個弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對于公眾號主來說，相當于增加了一個流量入口，激發他們創作更多的內容。
視頻號點贊也是同理，會被朋友看到，導致用戶在點贊的時候就會有所顧慮。
他會考慮，我點贊了這個視頻，我老師、上司、父母、親戚、朋友會不會看到？他們會怎么想？
但他在抖音上點贊是沒有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關系平臺；
第二，抖音上的點贊默認是私密的。
因此，微信才推出了私密贊的功能，需要長按才能觸發。
這并是一個優雅的解決方案，一是操作成本有點高，二是用戶存在較高的學習成本。
微信作為一個強關系社交場景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時用過mac OS和windows系統的用戶不知是否發現，這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過來，確定在左，取消在右。
為什么會有這樣的差異？哪一種更加合理？
在交互設計中，這種彈窗叫做模態反饋，艾倫·庫珀在《About Face 4》中提到：模態模式一種臨時模式，它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。
首先我們要明白這兩個按鈕哪個使用率更高，一般來說，“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。
所以這兩個按鈕在視覺上一定要做出差異化，“確定”的視覺層級要高于“取消”，這樣用戶才會一目了然，不會感到困惑。
回到剛才的問題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習慣是從左到右，所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。
mac彈窗的背后邏輯：
根據一般的任務的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進入下一步任務流程。
看上去似乎都有道理，這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性，讓用戶形成操作習慣就沒有啥問題。
從個人的使用習慣而言，個人更傾向于mac的這種方式。
手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側或都放在右側，前者以iPhone為代表，后者以安卓手機為代表。
這兩種方式有什么區別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來看看都放在右側會有什么問題，以下使用場景相信用戶不會陌生：
用戶a，在地鐵上玩王者，聲音有點大，想把聲音調小，結果不小心按到了電源鍵，導致手機息屏，而此刻你正在激烈的團戰，內心有一萬只“草尼瑪”奔騰而過……
用戶b，每次按電源鍵（解鎖或鎖屏）都會不小心同時按到音量鍵，結果直接就截圖了！這種情況發生了不止一次，因為這兩個按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時大拇指會觸碰到，左手拿時中指剛好會觸碰到，而電源鍵又有指紋鎖功能，導致手機在不斷的解鎖，而你毫無察覺……
通過上面的案例，可以得出結論：若按鍵都放在右側，會導致用戶經常誤觸而造成不必要的麻煩。
放在兩側就不會有這樣的問題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔心按錯，減少誤操作的幾率。
值得一提的是，iPhone手機的電源鍵一開始是位于頂部位置，這是為何？
因為剛開始時手機都是小屏幕（3.5～4寸左右），對于iPhone5S及以前的手機來說，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來隨著手機大屏的趨勢（4.7寸以上），這個時候單手已經不方便按到頂端了，從6代開始就把電源鍵放在右側了。
但無論是哪種方式， 兩個按鍵都是分開放。
還有一個小細節，iPhone的實體鍵不是在右側正中間，而是在靠上的位置。
iPhone設計理念是單手持握，并且大多數人右手握手機，大拇指經常會碰到右側邊框，若果放中間，這樣會造成誤觸音量鍵和靜音鍵。
其實上面的案例3就已經說明了按鍵放在中間的弊端。
我想起了當年的錘子T1，左右按鍵一樣大且位于兩側的中間，這是典型的為了追求完美的對稱而向用戶體驗妥協。
iPhone從初代開始就已經建立了自己的設計理念，不管是工業設計還是界面設計，并沿用至今。
從初代開始，iPhone機身左側音量鍵上方就有一個靜音鍵。
這些年來，iPhone一直在減少各種實體按鍵以及外部接口，比如3.5mm耳機孔、home鍵。
但直到如今這個靜音鍵卻一直保留下來，為何iPhone對于這個按鍵情有獨鐘？
靜音鍵開啟后，任何來電或通知都是無聲的，震動也會消失。
在無需點亮屏幕的情況下實現一鍵靜音，方便快捷，深受用戶的青睞。
根據自身的使用習慣以及用戶研究，無非以下幾種使用場景，比如看電影、開會、上課等：
1.進電影院看電影前，我一般都會撥一下，避免在看電影的過程中被來電鈴聲打擾，影響了自己和別人觀影。
2.開會的時候也會撥一下，以防在開會的時候突然被來電鈴聲所打擾，避免不必要的尷尬。
3.學生黨在上課前一般也會開啟，這樣整節課都不怕打電話進來了。
總之，就是不希望自己的手機鈴聲打擾到自己和別人，帶來不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機，對著手機屏幕一頓操作。
而實體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個按鍵這么重要，卻很少看到安卓手機上有（除了一加基本上沒有）。
實體靜音鍵并非蘋果首創，之前的Palm、Blackberry（黑莓）早已有這樣的設計。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統還可以把靜音按鈕直接放在桌面上，設置靜音非常方便，也就沒必要再多加一個實體鍵了，顯得多余又徒增成本。
上面提到過的，作為安卓陣營唯一的靜音鍵，一加手機引以為傲的三段式按鍵，該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。
但個人認為這個設定復雜了，三種模式遠比兩種模式復雜。用戶并不一定能搞明白，有一定的學習成本。
在早期，iPhone的控制中心并沒有靜音按鈕，想要設置個靜音并不是一件容易的事情，而這個功能又是必須的，蘋果索性直接做了一個實體物理鍵。
這樣靜音的時候只需要把靜音鍵撥過來就可以了，一步到位，使用體驗也很好，所以一直保留至今。
雖然現在iPhone的控制中心已經加入了勿擾模式，但考慮到老用戶的使用習慣，以及品牌調性，蘋果對于這個實體按鍵的去掉還是顯得很謹慎。
考慮到之后iPhone在防水、機身內部空間的改進，不排除蘋果終有一天會取消iPhone上這個靜音鍵。
靜音鍵雖好，但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知，或者開啟后忘記關閉，導致錯過了一些重要的電話。
雖然開啟了靜音鍵，但并不是絕對的靜音。如果是鬧鐘，鈴聲還是會響起，因為鬧鐘的優先級要遠高于靜音模式。
蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵，或者開啟后忘記了關閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開啟了靜音模式，卻還可以調解音量大小的原因所在。細微之處方見真功夫。
在日常生活中，旋鈕是個很常見的東西，比如音箱，微波爐，收音機，老式電視，車載旋鈕……
在機械產品上，旋鈕凸起的把手和它下面的圓盤刻度，是最明顯不過的旋轉暗示，符合人的自然感知。
旋鈕式交互是個人非常偏愛的一種交互方式，我認為這種交互跟iPhone的home鍵一樣經典，主要原因有三：
旋鈕操作簡單，看到這種按鈕，一歲小孩子都會忍不住用手去抓。對于用戶來說，幾乎不需要學習成本。
在旋轉的過程中，可調大調小，一切盡在用戶的掌控之中，用戶感覺到有十分的安全感。
在調節的過程中，調大調小都能立刻收到即時的反饋，這是用戶最喜歡的交互方式。
我們在觸摸屏上很少看到這種旋鈕式交互，因為這種交互是要建立在抓住旋鈕實物的感受。
而觸控屏是個二維的世界，沒有真實抓握的手感，無法還原出三維世界的真實手感。
汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后，越來越多的國內廠家開始盲目跟風，把絕大部分的功能按鈕集成到屏幕中，比如空調，不僅不方便，行車中使用還容易造成危險駕駛。
車上的觸控體驗跟手機上是完全是兩碼事，使用場景也完全不同。最大的區別在于后者沒有安全問題。
都知道開車不玩手機，可是行車時操作中控屏跟玩手機有什么兩樣？
對于駕駛員來說更加安全，通過旋鈕調節空調，熟悉后完全可以實現盲操，邊開車邊操作毫無壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。
而安全是汽車駕駛的重中之重。
用戶的操作有真實的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。
軟件系統用久了會變卡，可能會死機，難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。
一旦屏幕失靈，或者系統死機了，那所有按鍵都失效了。
雖然特斯拉為了提升其車載系統的穩定性下了很大功夫，但是問題從來都沒有停止過。
但是硬件基本上很少會出問題，物理旋鈕才讓人100%放心。
無論廠家如何吹噓，虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。
因此，有一些實體鍵出于安全駕駛的考慮還是應該保留，將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
文章來源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
之前總結了B端表單頁設計的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復雜的組件，平時工作中遇到的相關問題也是最多的，此次針對選擇錄入常用組件的應用場景和交互規則進行總結
選擇錄入的類型比較多，可以簡單的分為兩大類即
基礎選擇組件：單選/多選/開關/下拉選擇
復雜選擇組件：時間/日期/穿梭框/級聯選擇/樹形選擇等
B端表單業務場景比較多，很多場景具有通用性，有的場景卻有一定的獨立性，需要了解場景及用戶的需求和組件的適用性才能提高用戶操作體驗和效率
一.單選框
單選框(Radio)是表單中比較常用的控件，它通常被用來從一組互斥的相關選項中選擇一個單獨的選項。
當點擊一個未選中的單選名時，它會被選中，其他按鈕為未選中狀態。英文命名Radio來源于舊收音機上的按鈕，用于舊收音機不同頻道的切換，當一個按鈕被按下時，其他按鈕會彈起，使被按下的按鈕處于唯一被選擇狀態的按鈕。
使用場景
1.當用戶需要在一組互斥的選項中進行單一選擇時使用單選框；如果要進行多個選擇，推薦使用多選框。
2.當選項數目在2-7個之間時使用單選框；如果選項超過7個，推薦使用下拉框。
3.如果有兩個含義相反的選項，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個多選框或者開關勾選為同意，不勾選為不同意。
4.如果每個選項都有同等的優先級，沒有推薦選項時，使用單選框；如果需要向用戶推薦某個選項，可以使用下拉框。
5.如果提供給用戶的選項很熟悉，看了第一個選項就能預見到所有的內容，如“周一”，那么后邊的選項是“周二到周日”等，這種情況下就不需要將所有的選項都展示出來，可以使用下拉框來簡化界面。
交互邏輯
1.選項的設置，在設計單選框的選項時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。應該滿足“互斥”的原則，因此選項之間要避免存在交集，同時也要注意選項覆蓋要全面，不能出現遺漏。
例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項。給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都可能不會選，就需要提供一個“其它”選項。
2.默認選項，一般情況下為第一個選項，需要選擇最安全，最有可能的選項作為默認選項，提前預判用戶的選擇，提升用戶選擇效率。
3.選項排序會影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復雜程度排序，由簡單到復雜；也可以按照操作后風險排序，將最安全的操作放在前邊，由風險最低到最高進行排序
4.排列對齊方式，豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項進行左對齊，不用受制于選項的標簽文字長短，但豎直排列會占用較多的垂直空間；水平排列要注意每個選項之間的間距，間距盡量大一點，要不然用戶會分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對而言，水平排列的方式更加常用。
5.交互區域，單選框的面積較小，用戶在點擊的時候會比較困難。可以通過擴大點擊區的交互區域來提高易用性，將標簽文字也設置為可點擊，增加操作區域的面積，方便用戶操作
6.文字標簽，每個選項的文字都要簡潔明了的表達該選項所代表的含義。一般使用短語而不是句子，因此不需要以句號來結尾。盡量保證每個文字標簽用語的表達的一致性，不要出現有的用名詞，有的用動詞的情況。如果需要解釋說明，可以在選項下方使用單獨一行文字。如果標簽文字無法進行精簡，必須使用多行文字，將單選按鈕與文字頂對齊
7.交互狀態，每個選項都有選中和未選中兩種情況，每種情況對應了3種交互狀態，分別為默認、懸浮和禁用。
二.多選框
多選框的交互定義是幫助用戶完成從若干個互斥的選項集合當中選取一個或者多個選項的任務，多選框多用于表單中。傳統意義上，多選框是方形，單選框是圓的，用戶已經形成這種習慣認知，所以盡量避免使用特殊形狀
使用場景
1.當用戶需要在一組互斥的選項中進行多個選擇，完成N選n的任務，使用多選框
2.當選項數目在3-7個之間時使用多選框；如果選項超過7個，推薦使用下拉選擇
3.當選項數量為一個，包含“是”和“否”的邏輯，也可叫單個多選框 比如常見的用戶協議頁面，通常采用單個多選框。
交互邏輯
選項排序/對齊方式/交互區域/文字標簽等邏輯與單選框基本一致
1.選項的設置，因為所有選項處于外露狀態，所以超過7個時建議使用下拉選擇器，避免選項過多難以展示
2.默認選項，相對單選框，默認選擇在多選框中并不常見
3.提交操作，單個多選場景中，提交時必不可少的，可以是確認按鈕或是其他方式；下拉選框中為了提高效率也可不用確認，點擊空白處即確認選擇。
4.排列對齊方式：縱向排布，適用于選項內容較多或信息長度差異較大的情況；橫向，適用于選項數量多且內容簡短的情況
5.特殊狀態：相對于其他控件，多選有了兩個較為特殊的狀態“半選中”“禁用(已選)”
1）半選中狀態是全選狀態的一種特殊狀態，依附于全選狀態，所以當多選框中存在全選時才可能出現半選狀態，同時還需要有選中狀態的子項，全選半選狀態屬于【父級】狀態，交互的邏輯是狀態的變化是隨時體現的，所以【子級】狀態的變化，作為【父級】狀態也應該隨之變化，這樣父子級聯動才會有半選中狀態的出現。
2）禁用狀態有未選禁用和已選禁用，未選禁用一般是該條數據不滿足條件無法選中進行操作。而已選禁用一般用戶的權限不足無法進行操作，通常展示出來只是為了讓用戶了解到有此操作。
應用場景
1.復雜選擇器
復雜選擇器中常常會用到多選框，可以明確展示選項的選擇狀態，需要注意的是多選框可以承載的半選，全選狀態所對應的關系，是否符合業務場景。在實際工作中，我曾遇到過父級選擇影響子級但是子級無法影響父級的多選場景，不符合常規的多選習慣，但是在實際業務場景中真實存在。
2.權限設置
在很多權限設置/流程設置的頁面中，常常會用到多選框，需要注意的是各個場景中選中，取消，默認，重置等不同狀態下，頁面的變化，狀態扭轉時交互邏輯的合理性和易用性。
3.表格多選
表格頁面情況多且復雜，對于勾選有兩種形式一種是勾選多選框，一種是點擊行數據選擇，需要明確哪一種更適合當前的業務場景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對整個表格的影響
三.開關
開關用于兩種相對對立的狀態的切換,多用于「開/關」「啟用/停用」等，不同于單選和多選開關是一個即時性的操作，這也導致開關使用的特殊性。開關能明確的展示當前的功能狀態，讓用戶能高效的進行跳轉操作。
使用場景
1.用于對流程的快速開啟，如表格中開啟或關閉某條數據/功能
2.權重較高的功能或設置，如配置表單的停用/啟用，用戶權限的啟用/停用
3.用于開啟/關閉全局權限，后設置其他功能的操作，如業務規則的設置等
交互邏輯
1.開關 配有對應的文字說明，開啟/關閉某種功能或權限
2.開關具有聯動性，通過開關去控制下層功能的操作
3.開關的每一次變更狀態都要有相應的反饋，輔助用戶進行狀態判斷
四.下拉選擇
下拉選擇B端業務中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級聯，下拉樹等基本場景是可選項過多時，會使用下拉選擇器對所有選項進行整合方便用戶高效錄入信息。選項層級建議不超過 三層且需要有一定的邏輯排序，通常包括觸發器和下拉面板兩個部分當選項數量過多的時候，建議增加「搜索」功能。
下拉選擇結構
1.標簽文本：選擇器標題，明確選擇內容
2.選框：與文本框類似，需有一個外邊框，為可操作的熱區范圍，主要功能是與下拉菜單進行聯動
當選項較多的時候，多選框會配上搜索功能，目的是為了讓用戶快速找到對應的選項，而形式主要有以下兩種
3.右側標識(可選)：每個選框右側的圖標，都是選框類型的象征。常見的是下拉箭頭，默認朝下；展示選項列表時，箭頭朝上。
4.占位符：保持暗提示的簡潔，避免把暗提示作為選擇器的輔助說明，默認占位文字，格式為「請選擇xxx」
5.回顯值：回顯值通常包括兩種類型
1）當下拉單選，一般采用純文本回顯即可
2）當下拉多選，需要同時展示多個選中項，因此在錄入框中采取Tag形式，使單個選項也可以點擊刪除形成完整的閉環
6.選項：下拉選擇一般針對選項數超過5個
內容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項內容的不同，形式中也有較為復雜的，重點分析級聯選擇和樹：
1)樹展示，可選擇的數據是一個樹形結構時，例如公司層級、學科系統、分類目錄等，樹結構中可以自由選擇子節點和根結點。
2)級聯展示，針對的一般是有所屬關系的選項且所屬關系比較明確，層級一般3-5級，選擇到最末子級才能完成選擇一般是由大到小進行選擇，選項數量上3>2>1，比如省市縣選擇
3)分組展示,選項過多時考慮使用的方式，使用分割線將同一類選項進行劃分，用戶選擇時會思考從大的分類到具體的選項。但選項過多則還是建議用樹結構
7.選項面板：承載所有可選擇的選項列表，在選項數量過多時會對下拉菜單的高度進行限制，即設置下拉菜單的最大高度，當超過最大高度時，出現滾動條。面板相當于一個容器可以根據業務需求承載復雜的形式 例如tab分類、錨點、字母定位等，
選擇器狀態
默認（Default
懸停（Hover
1.未選擇，若選框有搜索功能則光標變成文本輸入狀態，若沒有搜索功能則光標變成小手（示例
2.已選擇，選擇后懸停狀態下全部清空的功能，不是所有場景下配置該功能， 要考慮實際業務中是否需要清空
激活（Active
1.未選擇，點擊框體激活下拉面板，單選一般是勾選后自動關閉面板，多選則需要點擊面板以外確認關閉面板
2.已選擇，若是已選擇再次激活，需要將已選擇的選項高亮，再次點擊已選選項則取消選擇；選項熱區，一般將整行作為熱區擴大點擊范圍，方便用戶操作。
禁用（Disable
1.選框禁用，用戶無法激活，選框置灰，在設計工程中需要將禁用于正常狀態之間拉開差距，這樣用戶能快速識別
2.選項禁用，表示該選項無法被選擇，不影響整個選擇器的功能，只用將該選項置灰即可，光標置入時會變成Not allowed
回顯規則
單選，多數單選選擇后下拉面板自動收起，回顯選擇的選項，選項回顯時有一些特殊情況如存在極端情況文案過長則結尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項中存在主文本副文本，考慮實際業務場景回顯時可只顯示主文本。
多選，以Tag形式展示已選擇項使單個選項也可以點擊刪除形成完整的閉環；存在的極端情況是當選項過多時的展示效果，一般有兩種形式撐開高度和選項融合
1）撐開高度，一般用在需要完全展示選擇項同時可快速調整已選項的場景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實現一些疏密變化，一般也不會無限撐開，會有一定的限制，并且在右側增加滾動條。
2）選項融合，對選項展示不作要求的場景中可根據文本框的寬度進行選項融合，展示具體的選項數量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。
3）省略展示選項，以文本形式展示，鼠標hover氣泡展示全部選項信息
問題思考
何時用下拉選框，何時用彈窗選擇？
大部分情況下，單選優先用下拉選框，用戶比較高效的完成選擇，同時也可以明確自己的選擇。而多選場景中對于選項數量可控，選項復雜度較低的可以用下拉選框。但是對于選項結構復雜，內容過載，用戶頻繁的滾動容易造成誤操作影響選擇的準確性和高效性，此時會考慮使用彈窗，且多選彈窗一般需要配有搜索區，選項區，已選區。需要注意的是，已選項在彈窗內的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項，所以可以采用省略展示選項的方式。
選擇搜索如何顯示？
如下彈窗選擇中，對于數量和層級比較復雜的選擇項，搜索是很有必要的，對于搜索結果的展現形式不同的場景可能會有不同，用戶使用搜索一般是對于選項比較明確，所以推薦搜索結果展示末級，用戶可以更高效的做出選擇，避免復雜的層級關系干擾。
五.時間與日期選擇器
兩種類型
1.時間點選擇，選定某一個時間/日期點，B端時間點選擇的業務場景較少
2.時間段選擇，選定某一個時間范圍，一般有開始時間和結束時間，時間段的應用一般是在數據篩選的場景中
確定時間類型后，要考慮時間粒度，時間粒度分為年、季、月、周、天、時、分、秒，B端圖表頁面中針對年度、季度、月度的篩選時很常見的，需要結合場景選擇時間粒度。
日期選擇器中一般是通過點擊讓用戶選擇時間，除了讓用戶點選外，時間選擇器還會提供一些快捷選項例如“今天、本周、本月，本季度“等。選擇后回顯的時間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺需要確定統一的樣式，避免增加用戶的認知成本。
時間段選擇，常見兩種形式分段式和連體式，在不同的平臺都有應用，在交互上的區別分段式需要用戶點擊兩次分別選擇開始時間和結束時間，連體式是用戶點擊一次調起時間選擇時間段，相對而言連體式操作更便捷，但是分段式理解更簡單，連體式存在一定的認知成本，總體上來說其實區別并不大，平臺需要建立統一的標準，這樣能形成較為統一的體驗和習慣。
選擇器在實際工作中應用廣泛，B端業務復雜，總會遇到各種新的場景，總結會有不足不全之處，歡迎大家一起探討交流。
文章來源：站酷 作者：MuMu魚
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
用戶體驗是用戶對產品價值的整體感受，其中包括用戶感受到的產品價值以及用戶感受到的操作體驗。不要讓用戶思考，這是每個設計師所追求的。這篇文章舉了大量的例子，來跟大家一起進行產品細節洞察分析。感興趣的朋友一起來看看吧。
對于B端，我想剛開始很多同學就直接拿Ant Design套套界面，因為公司要求并不高，隨后字節Arco Design也推出了對應的模版和規范，能讓我們快速作出一個不出錯的方案。
但是隨著公司對B端越來越重視，這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此，我們的設計追求也不止于此。
那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
其實很簡單，王陽明先生告訴我們知行合一，知是行之始行是知之成。我們如何才能提升B端界面端精致度，第一需要知道什么是好的設計；第二需要不斷的去實踐去練習，缺一不可。
本文先和大家談談知的層面，提高我們的眼界，下面就和大家分享一些不錯的B端產品，大家有時間可以去慢慢體驗。
PS：作為B端設計師，一定要去多拆解競品，多研究好的產品，別面試的時候，面試官問你研究的B端產品是什么，你只知道阿里云、騰訊云、百度云哦！
做B端的同學，尤其是做CRM的同學應該都知道Salesforce，他是全球最大的 CRM（客戶關系管理） 工具公司。
Hubspot同樣是提供客戶管理相關的應用，雖然成立相對Salesforce晚，但是在市場上也占有一席之地。
從設計的角度來看，他的界面風格更加簡潔舒適，從體驗上來看和國內的CRM系統完全不同，其體驗更加自然和舒適。
這種風格大家看了有沒有覺得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發現風格有一點類似，大家可以對比國內產品去拆解下他們的交互細節有什么不同，完成同樣的任務他們采用的方案有何不同，相信你會有很多的收獲。
國外的界面看著總讓人覺得很舒適，僅僅是因為克制的設計、中性灰使用得好嗎？當然不是，是因為英文本身就是圖形化的文字。
如果翻譯成中文，你會發現好像不是特別理想。
這個樣子拿給領導過稿，怕是分分鐘被拍死，因此我們還是需要多看看國內優秀的產品。
神策的設計，我想B端的朋友不陌生吧，國內產品中他的設計一直是我們的參考對象。
不同于其他產品，他的體驗門檻比較低，注冊后就可以去體驗他的demo，也沒有試用期限，參考對象從可視化報表，到界面交互均能找到參考。
不過當你參考一次后發現，做出來的界面怎么還是少了一些靈魂，雖然界面風格上了一個臺階，但為什么用戶還是覺得產品難用。
這里不得不和大家推薦項目管理類產品了，這類產品是專門給互聯網公司的開發團隊使用，他們都是專業用戶，同時這些都是提高他們工作效率的工具，因此這些產品投入的成本更高，優化得更好，拆解他們的產品，就是直接觀看高手的成長之路。
Jira是Atlassian公司出品的一款事務管理軟件，JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。
同時他也是國內項目管理類產品的學習研究對象，因此大家可以通過文章、B站、界面截圖，自己申請體驗等方式全面的進行體驗。
同時也可借助群的力量，調研下有使用Jira的小伙伴，看看他們在使用中有什么問題，下面是我收集Jira網頁版和本地配置版的問題截圖，這些都來自不同角色的真實體驗，會更有分析的價值。（這部分截圖涉及到公司的數據，同時數量多不太方便打碼，就不分享給大家了。）
當然國內的項目管理類產品也得去看，我們要對比哪里做得好，哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產品不管從視覺還是體驗都非常不錯，大家一定要去體驗。
通過不斷對競品進行拆解，你已經不是當初那個小白了，你的行業認知，方案設計能力應該趕超了一大波人。
成長的同時，又發現你設計的界面，不太精致，少了些溫度，這時候推薦你看文檔管理類產品。
第一個和大家推薦的是WPS，界面簡潔，配色舒適。
在管理類的軟件中，不得不提飛書的管理界面，從設計到使用體驗，他給我的感覺終于不是那么千遍一律，用組件庫搭建起來的感覺。
他開始有了溫度，開始注重品牌感的打造，用戶的引導，符合品牌調性的插畫。
對一些體驗的細節進行優化，比如傳統的編輯都是放在頁面頂部，它采用了離光標更近的位置。
根據菲茲定律，光標當前的位置和目標位置的距離D越短，所用的時間越短，具體好不好用，歡迎大家在評論區留言哦。
到這時候如果你覺得線上的產品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關鍵詞，去看看有沒有新的靈感。
我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應該可以找到很多不錯的設計。
風箏KK的花瓣：https://huaban.com/boards/76913106
如何提升B端界面的精致度？
第一，要知道什么是好的設計，多拆解國內外優化的B端產品。
第二，多在工作中時間，有時間多做ABC方案，鍛煉自己的方案設計能力，多踩一些坑，時刻保持學習能力，慢慢就成長了。
文章來源：站酷 作者：風箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
知識圖譜作為語義網絡，其技術算法研究被廣泛應用在人工智能和大數據等領域。通常，知識圖譜的運轉過程是由數據模型完成，用戶可見的只是計算后的結果，其數據的可視化也僅停留在對結果的可讀性展示上。但其實，圖譜之間的關系、數據計算的過程，也具備分析價值和潛在的機會信息。將知識圖譜轉化為可視化信息圖，能幫助用戶更好的理解和利用數據及其關系，但對于沒有技術背景的界面設計師來講，從技術架構、計算函數等技術視角去理解知識圖譜概念和應用相對困難。本文分享一種設計思路，幫助大家在實際工作中，完成知識圖譜向可視化交互界面的轉化。
在使用產品的過程中，你是否看到了一些有趣的細節，而這些細節提升了你的使用體驗？這些產品細節，便是產品設計師需要留意的，因為這些產品細節在某種程度上提升了用戶的留存與轉化。本文我就對一些產品細節進行了拆解，一起來看一下。
一.【夸克瀏覽器】節日彩蛋-特定場景下輸入關鍵詞觸發彩蛋效果
二.【酷狗音樂】播放Tab-多交互操作，應對多場景使用
三.【騰訊新聞】左滑熱點榜單-用戶關注的熱點放在路徑短的位置
四.【荔枝博客】品牌傳播-產品情感漏出，與用戶產生共鳴
五.【百度網盤】自定義倍數-給用戶更多可控操作，精細化觀影感受
六.【網易云音樂】情感彩蛋-給你夢幻的魔法，帶你重拾記憶
七.【即刻】頭像彩蛋-趣味互動回彈，把喜歡強烈表現出來
八.【荔枝】錄聲音-輕擬物動態圖，使用中的及時反饋
九.【微博】點贊反饋-情緒最大化宣泄，盡情釋放情緒
十.【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘
在圣誕節日來臨之際，用戶使用搜索引擎輸入關鍵詞的頻率會增加，在此增加彩蛋給用戶營造節日氛圍
設計目標：增加關鍵詞趣味彩蛋雨，提高產品趣味體驗，提高用戶搜索頻次。
設計方案：在節日來臨前，用戶通過搜索節日特定關鍵詞，會在搜索結果頁中以彩蛋雨的形式墜落下來，圖案貼合節日物品，給用戶營造出節日氛圍，給予用戶節日的浪漫。用戶在使用時并不是一個冰冷的產品，而是有情感共鳴有情緒的產品。
想要提高屏效，一屏顯示更多內容。在瀏覽操作時會因為功能按鈕外漏造成誤操作情況。
設計目標：提升屏幕顯示內容面積，給予TAB播放更多交互形式，增加趣味性提升產品記憶點。
設計方案：在TAB播放中給予「長按」「雙擊」兩種交互操作，長按中包含雙擊的播放暫停，因為此操作，使用率較高，提供多入口能有效提高易用性。長按時，激活更多常用功能，包含移動進度條、收藏、下一首等操作，配合特有的交互展示形式，給用戶形成產品記憶點，同時在瀏覽不同頻道時，功能的隱藏大大降低誤操作以及視覺干擾的情況。
如今的新聞產品都提供熱點時事新聞，給用戶提供更多豐富內容聚集。
設計目標：提高用戶使用率，不影響主框架的情況下給用戶最短路徑查看熱點新聞的入口，提高用戶瀏覽時長。
設計方案：首屏以及導航模塊更多還是以新聞資訊等內容為主，關注熱點更多是娛樂熱門等內容，瀏覽率都高的情況下，把熱點模塊放到左滑頁面中，在不影響首頁框架情況下，增加新的板塊，給用戶更多瀏覽選擇，豐富產品多元化內容。
如今的產品趨于同質化，由原來只注重功能轉變為產品情感表達，給用戶產生情感互動，從功能付費變為情感價值觀付費。
設計目標：傳播產品價值觀，給予用戶引導，產生產品正向記憶，從而提高粘性。
設計方案：上幾期產品分析中有說到頂部logo外漏的設計描述，有的植入隱藏功能，有的表示刷新功能等，歸根結底都是給予靜態標志功能屬性，提高屏幕利用率同時提升用戶探索欲望。
荔枝博客本身產品內容相對聚焦，想要做出差異化就要往品牌情感入手，當用戶點擊左上角「荔枝博客」標志時，會彈出產品的由來以及做博客的初衷，讓用戶思考產品深層意思時無形中把產品植入到用戶記憶中，給用戶情感綁定，提升用戶使用粘性。
市場上的視頻倍速參差不齊，0.25、0.5、1倍三種遞增邏輯，用戶在觀影時會存在沒有想要選擇著倍速，只能使用平臺提供的選擇使用，操作受限制。
設計目標：解決倍速不是用戶想要的，提供自定義倍速，給用戶更多可操作性，提升觀影感受。
設計方案：在百度網盤中觀看視頻時，點擊調節倍速在提供默認常規5種倍速下提供自定義倍速，以0.1的速度逐漸遞增，用戶可以在0.5-3倍之間任意選擇，根據視頻類型、觀影習慣選擇合適的速度，同時把市面上不同倍速問題給用戶造成的觀影困擾也同步解決，提高視頻觀影體驗。
音樂無國界，每首音樂背后都有一段很長的故事，在我聽哈利波特主題曲時，瀏覽評論發現特定特定位置點擊會有彩蛋，嘗試了一下果然如此。網易云音樂評論區的強大之處展示之一。獨有的彩蛋。
設計目標：提升評論活躍度，強化廣告的表現形式，增加用戶對產品的探索欲望提高使用粘性。
設計方案：哈利波特音樂中，在評論區第九和第十條中間分割線處，點擊兩下！觸發魔法視頻，把用戶帶入情境之中，勾起滿滿的回憶，配合音樂聲音，真可謂視覺聽覺雙重享受。
對于開發來說，只需要在特定歌曲評論中寫一個位置判定以及觸發條件，當用戶觸發條件后，播放特定視頻，觸發 用戶情感共識，提升使用粘性。同時如果做為廣告植入也是比較好的呈現方式，但要注意視頻質量，盡量弱化廣告中的產品，可以把品牌情感揉入視頻中與用戶產生情感關聯。
在看關注人主頁時，想要強烈的表達出情感給予對方，釋放自己心中的喜歡時如何表現出來。
設計目標：提升趣味玩法，增強用戶操作感受，豐富產品玩法體驗，提升使用粘性。
設計方案：在個人主頁，通過拖拽用戶頭像放手回彈，頭像以拉距來彈射回原有位置并且迸發出愛心動畫，讓用戶產生更貼近的情感傳達，反復操作達到一定數量會有文字提醒，文案的趣味描述也讓彩帶功能增加了一份趣味。
在使用錄音功能時，單純靠進度條記憶靜態按鈕顯示很難產生強提醒，除非做大做突出，荔枝在錄音中是如何表現的。
設計目標：解決錄音功能頁面元素單一用戶進行中與暫停感知淺的問題，結合動態插圖給用戶及時反饋，同時貼合線下使用場景，給用戶注入產品記憶點。
設計方案：在我的-進入錄聲音模塊中，頭圖展示一個錄音磁帶機，當開啟錄音功能時，磁帶機會進行旋轉播放，左慢右快的展示形式符合真實機器的運動規律，給用戶強提醒告知用戶此時正在錄音中，當暫停時，磁帶機及時停止，和按鈕形成觸發綁定，提高產品使用體驗。
單一的贊有時無法滿足用戶的愛意，用戶希望更強烈的表達情感，來滿足自己反饋欲。
設計目標：提升贊的強烈感知，釋放用戶內在情緒，提高產品趣味體驗，從而增加使用粘性。
設計方案：在微博單條動態頁面中，對“贊”進行點擊一次操作是普通點贊反饋；長按觸發連贊機制，會帶來多彩多圖標的更強的視覺感受，帶來強烈的情感反饋，讓用戶盡情的釋放情緒，得到內在解壓。
新聞資訊產品，文章之間來回切換閱讀，時有發生，或者手頭有事忙完再回過頭看。
設計目標：解決閱讀中斷導致回看路徑長，影響閱讀效率的問題。
設計方案：瀏覽文章時，屏幕側邊從左向右劃動是返回上一級的交互手勢，當用戶在滑動中停留一下就會激活浮窗功能，隨著手勢操作移動到黑圈內顏色會顯示藍色，表示移入成功，這時放手返回首頁，右下角會顯示一個圓形浮窗，可快速查看浮窗內的文章。
值得學習的是，左滑浮窗圖形隨著手勢上下位置進行移動，路徑更短更快的進行操作，提高用戶使用體驗。因為隱藏式的交互有一定學習成本，產品充分考慮到這點，在文章右上角更多按鈕中放置加入浮窗功能，兩個激活入口，兼容新老用戶使用，提高產品易用性。
設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。
文章來源：站酷 作者：碳水sir
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在了解了人物性格語氣的重要性以及在大廠中的應用場景之后，大家一定很關心，要如何在自己的業務中從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;">
<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;">
<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_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;">
<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:"">
<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:"">
<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 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:"">
<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:"">
<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 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:"">
<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:"">
<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:"">
<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:"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:"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:"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://m.skdbbs.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>( <a href="http://m.skdbbs.com/" 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;">m.skdbbs.com </a>)是一家專注而深入的<a href="http://m.skdbbs.com/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://m.skdbbs.com/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界面設計 </a>、 <a href="http://m.skdbbs.com/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界面設計 </a>、 <a href="http://m.skdbbs.com/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://m.skdbbs.com/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;"> </a>、 <a href="http://m.skdbbs.com/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;">包裝設計 </a>、 <a href="http://m.skdbbs.com/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;">圖標定制 </a>、 <a href="http://m.skdbbs.com/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;">用戶體驗 、交互設計、 </a><a href="http://m.skdbbs.com/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://m.skdbbs.com/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;"> </a>、<a href="http://m.skdbbs.com/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:"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 />
“今天吃什么?。俊?
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，會發現當你面對的選擇越多時卻越不知道該如何做決定，或者當下做了決定后會一直思考做的這個決定是不是最好的，這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？如果排行榜僅僅是用來降低用戶的選擇成本，為什么所有商家都對排行榜趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，將所有相關的同類事物之間通過比較，從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應使得用戶降低自己的選擇成本，可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名，那么這一切背后的原理是什么？
一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費時，前期需要花費大量的人力、物力去搜集相關的信息進行整理集合，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助用戶降低選擇成本的同時，也影響著用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）。
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解，收集信息建立備選集，但由于京東在電子設備購物方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了可以展開話題相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感等等，這些都是在滿足大眾自己的社交需求。
過年期間各家app紛紛都推出了自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并把這些報告的截圖分享到自己的朋友圈！在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要清楚自身在大數據下的自我確認，通過各種各樣自我測試類榜單，判斷自身的能力、情緒、價值等等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，大家一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？下面我們來討論排行中平臺的影響及背后的原因。
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。
從我們記事起，我們對世界的認識來自我們的父母或老師，而這些教導我們什么是對、什么是錯的長輩或老師，對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家，比如：醫生、律師、教授等，認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究這一領域問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，需要觀看影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
影響用戶的決策方向
平臺權威性對用戶來說意味著說服力和影響力，在減輕用戶的決策壓力的同時，也影響著用戶做出平臺所需的決策方向；
平臺自帶話題性
平臺本身的權威性也會為平臺承載的內容帶來討論的話題度，加大平臺承載內容的傳播范圍。比如，每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度。
輸出口優化
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值。
平臺盈利
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性后，部分平臺開始利用排行榜進行商業變現，比如百度、58的競價排名等，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得上榜用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
同系同門資源導流
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
自建用戶體系
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
偽造
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）。
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
圖片形式
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）。
左文右圖VS左圖右文
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
社交的本質
社會心理學對用戶體驗的影響系列：權威性原則
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
交互分析：排行榜應該如何設計？
如何利用好排行榜產生榜單效應？
萬字長文深度分析：產品排行榜的設計和玩法
關于排行榜的設計，這有一份7000字干貨手把手教你做！
淘寶“有好貨”競品分析：淘寶為何要把排行榜藏起來？
我們曬網易、支付寶年度榜單，其實只是在曬自己？
文章將分為6部分
1、撰寫文檔的目的
2、什么樣的產品值得體驗
3、產品體驗類型
4、產品體驗文檔應該包含的內容
5、文檔質量的評判標準
6、體驗文檔和競品文檔的異同
如果你是做平臺型電商，那么淘寶、京東這些你就得去體驗體驗。
以上信息獲取渠道：
圍繞著體驗目的和讀者感受，可以把產品體驗文檔的質量評判標準做一個總結。
1）體現產品核心價值
2）抓住產品重點
3）體現產品特色
4）結構清晰
5）格式美觀
6）思考總結
1）詳細數據支持
2）商業模式分析
很多小伙伴會把產品體驗報告和競品分析報告搞混：都是對產品進行體驗和分析，除了名字之外，到底有啥區別？
我們從「異同」兩個方面來分析，看看它們究竟有啥區別。
競品分析文檔是對競品做分析，常用SWOT模型，將自己和競品做對比分析，學習借鑒。而產品體驗，不一定是競品，可能只是你個人感興趣而已。
競品分析文檔，一般僅限于輸出競品的思考總結，而產品體驗的范圍更廣。
產品體驗可以淺嘗輒止，但競品分析不行，競品分析需要透過現象看到本質，觀察競品的一舉一動，配合市場動態，不斷調整我們自身產品方向，甚至是公司戰略定位。
4、方案對比的優缺點各有哪些？
多體驗、多思考、做自己、少糾結模板
文章來源：站酷 作者：阿G聊產品
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗四維度的概念、價值以及相互之間的關系
用戶體驗，是用戶在使用產品過程中建立起來的一種純主觀感受。
解讀用戶體驗，可以有很多視角。本文提供一個以人為本的視角：用戶體驗四維度。具體如下。
HI X：Human Interface Experience，人與界面的交互體驗。
HC X：Human Content Experience，人與內容的交互體驗。
HH X：Human Human Experience，人與人的交互體驗。
HB X：Human Brand Experience，人與品牌的交互體驗。
用戶體驗四維度
01 四維度的概念
怎樣判斷一款產品有幾個維度？這就要從四維度的概念說起。
1. HI X（人與界面的交互體驗）
HI X 是指用戶在瀏覽、閱讀、操作界面過程中產生的主觀感受。
HI X 既受信息架構、交互設計和UI設計的影響，也受根需求和功能架構的影響。主要依托手機和電腦的互聯網產品，天然存在界面。所以，HI X 屬于基礎屬性，所有產品都有。
2. HC X（人與內容的交互體驗）
HC X 是指用戶在消費內容時，內容本身帶給用戶的主觀感受。
這里的內容，既包括衣服、鞋子等實體商品，也包括文章、圖片、視頻等虛擬內容。諸如淘寶、網易嚴選等電商產品，以及公眾號、Instagram、抖音等 UGC 產品，都具備 HC X 屬性。
3. HH X（人與人的交互體驗）
HH X 是指用戶與其他用戶、產品工作人員溝通交流時產生的主觀感受，或產品的社區氛圍、溝通氛圍帶給用戶的主觀感受。
所以 HH X 有兩層含義。第一層發生在用戶與用戶之間，是指當用戶扎堆或溝通交流時，交流氛圍、交流內容帶給用戶的主觀感受。第二層發生在用戶與產品工作人員之間，是指當產品依靠人力向用戶提供咨詢、售后、配送等服務時，產品工作人員的服務行為帶給用戶的主觀感受。
關于第一層含義，不管是更強調社區屬性的產品，比如天涯社區、豆瓣小組、百度貼吧，還是更強調內容屬性的產品，比如公眾號、微博、小紅書的筆記，都具備 HH X 屬性。
關于第二層含義，常見的 HH X 由客服人員提供。如果是電商產品，提供人員還包括快遞員和售后人員等。
4. HB X（人與品牌的交互體驗）
HB X 是指當用戶想起、談論起品牌，或使用品牌的產品、體驗品牌的服務時，品牌帶給用戶的主觀感受。
只要一款產品做成了品牌，它就有 HB X 屬性。
HB X 會直接影響到我們是否信任、喜歡一個品牌，以及是否會使用它的產品和服務。所以，我們對 HB X 往往會有一個抓重點的綜合評價。就像一個外向活潑的女生，雖然在外向程度方面和一個內向安靜的男生不一致，但雙方也可能會選擇在一起，因為內向、外向并非雙方關注的重點。
因為 HB X 牽涉到對品牌的綜合評價，所以就像工作都有一段試用期、戀愛都有一段了解期一樣，HB X 的形成往往也需要較長時間，通常至少要 3~5 年。
02 四維度的價值
每一個維度，各有什么價值？
1. HI X（人與界面的交互體驗）
作為基礎屬性，HI X 的價值主要體現在以下兩方面。
如果是一款只具有 HI X 屬性的工具型產品，比如視頻會議產品 Zoom，那于這款產品而言，HI X 就是一切，這款產品的成敗也幾乎完全取決于 HI X。
如果是一款同時具有 HC X、HH X 屬性的內容型社區型產品，比如 B 站、快手這些視頻類產品，那此時的 HI X 就會扮演一個類似交通出行（基礎設施）的角色。如果 HI X 比較差，這個“出行”過程就會像出去玩時的塞車一樣，讓人難受；如果 HI X 很優秀，這個“出行”過程就會像準點的高鐵、飛機一樣，又快又爽。
2. HC X（人與內容的交互體驗）
HC X 主要從內容層面影響用戶滿意度。
如果 HC X 比較好，用戶消費時的決策時間就會被大大縮減，同時用戶滿意度也會比較高。比如淘寶上就有一些原創設計、質量不錯、價格不貴的精品小店，很受歡迎。我們去網易嚴選、優衣庫天貓旗艦店這些質量不錯、設計不錯、價格適中的店鋪買 東西時，也會很快很省心。
以上說的是電商產品，對于 UGC 類的內容產品，也是類似的道理。比如站酷上的首頁推薦和編輯推薦，相對而言，HC X 比較不錯，所以看這些內容的用戶也會比較多。
3. HH X（人與人的交互體驗）
HH X 是用戶情緒的最大影響因素，在情感方面對用戶具有最大吸引力。物以類聚，人以群分。HH X 良好的產品，會像一場談笑風生、其樂融融的聚會，吸引用戶去扎堆。
良好的 HH X 往往意味著良好的氛圍，它不僅能帶給我們諸如輕松、愉快等積極情緒，還能在一定程度上帶給我們一種歸屬感。最終的結果，就是我們喜歡用這款產品。比如 B 站的 HH X 就比較好，具體而言就是彈幕氛圍比較歡樂友好，這樣的氛圍帶給用戶的感覺是比較好的，用戶也喜歡在 B 站就著彈幕看視頻。
4. HB X（人與品牌的交互體驗）
HB X 事關品牌能不能以正面形象住進用戶心里。
良好的 HB X，往往意味著良好的品牌美譽度和忠誠度。HB X 良好的產品，就像你信任和喜歡的男/女朋友一樣，他/她會在你心里占據一定的分量和地位，讓你樂意介紹給家人和朋友認識。比如蘋果的 Mac，就有很高的品牌美譽度和忠誠度，用戶也很樂意把 Mac 推薦給身邊的朋友。
03 四維度的關系
四維度之間存在怎樣的關系?
1. HI X 是另外三個維度的基礎
HI X 作為基本維度，相當于“水之源，木之本”。如果把用戶體驗四維度比作一個金字塔的話，塔底的基石一定是 HI X，塔尖則是 HB X。
2. HC X 通常是 HH X 的基礎
HH X 的產生，通常離不開 HC X。也就是說，通常得有一個合適的“內容”或“主題”，才能把人聚攏過來。比如結婚的時候，你可以邀請到很多親朋好友來參加婚禮，但在平時，你很難邀請到這么多人。我們在 B 站看視頻的時候，彈幕通常比較歡樂友好，氛圍不錯，但如果沒有這些視頻，也就不會有這些彈幕，以及不錯的社區氛圍。
3. HI X、HC X 和 HH X 共同構成了 HB X 的基礎
HC X、HH X 和 HI X 一樣，都可以成就 HB X。
以早期 Keep 為例，剛開始只有課程這個功能，也就是說只有 HI X 和 HC X 這兩個屬性。其中，HI X 還可以，HC X 比較優秀。在此基礎上，慢慢發展出了社區功能（HH X 屬性），而且做得不錯。再往后，有了“自律給我自由”的品牌精神。在課程、社區、品牌精神等因素的助力下，Keep 有了不錯的品牌美譽度和忠誠度。也就是說，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。
4. HB X 也可以僅有 HI X 這一個基礎
有些產品并不具有 HC X 和 HH X 這兩個屬性，而是僅有 HI X 這一個屬性。單憑一個良好的 HI X，也可以成就良好的 HB X。
比如 Zoom，作為一款開視頻會議的工具應用，它最初只有 HI X 這一個屬性。但是因為很好用，HI X 很優秀，所以如今的 Zoom 即便沒有內容（HC X）和社區（HH X）屬性，依然成了一個在全球都很受歡迎的品牌，擁有了不錯的 HB X。
總的來說，在四維度的金字塔里面，它們的關系如下圖所示。
文章來源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.skdbbs.com