為什么同樣尺寸的圓形看起來比方形的??？
字體設計師不會把所有字母都設計得一樣高。他們會注意到人類視覺的特殊性，所以他們會使用光學技巧創造一個和諧的、可讀的、平衡的字體。
在上圖中，一個正方形、一個三角形和一個圓在幾何上是相等的。然而，我們的眼睛卻認為三角形和圓形偏小。這是因為這三種形狀有不同的重量。從字體上講，就是黑色的數量分布并不均勻。
有兩種方式能夠使得它們保持視覺平衡：
A. 計算兩個形狀的面積，并保持它們相等
我不喜歡使用這種方法，因為它只適用于簡單的形狀，如三角形、圓形和菱形。這種方法對于復雜的視覺效果不太有效。
B. 使尺寸更大、超出和模糊形狀是測試視覺重量最簡單的方法
現在你應該明白了為什么非方形/圖標看起來比方形小，讓我們看看真正的圖標和 UI 元素如何使用這些光學原理變得更好。
在設計整套圖標時，確保它們的平衡是至關重要的。為了保持平衡，在圖標背板和圖標區域之間留出額外的空間，并允許非方形圖標超出圖標區域。
另一個例子是一個矩形的UI元素和一個圓形按鈕放在一起。如果圓形按鈕的高度與矩形UI元素相同，那么圓形按鈕看起來會更小?；诠鈱W校正原理，你需要區別對待這兩個元素。
看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你覺得哪一個更正確?請在留言區發表你的看法。
還有比正方形更正方形的嗎?
我們的眼睛有古怪的視覺感知，我們看到的事物與現實不同。下面是一個類似的小測試，你覺得哪個圓和哪個方更標準?
在這些橢圓和矩形中，一個是正圓，一個是正正方形。我已經修改了正確的，但他們似乎更對稱了，這是因為垂直-水平錯覺。(彩云注：右邊是調整過的，看起來會更圓和更正)
大多數幾何字體不是幾何圖形。字體設計師通過牢記人類的視覺感知來設計高質量的字體。他們幾乎在每個字母中都使用光學原理，以使字體保持平衡。
你從上面的測試中應該明白了我的意思。要了解更多，請看下面的圖片。我把字母“O”從幾何字體Futura放在一個完美的圓圈旁邊。你覺得哪一個看起來更對稱?
你甚至在底部文字出現之前就猜到了，對吧?來自Futura的字母“O”比完美的圓更寬，但看起來更對稱。原因是，我們的眼睛傾向于看到的垂直區域比水平區域要長，即使它們是相同的。
讓我們看看這個錯覺是如何出現在字母“T”上的。
在上圖中，水平筆畫的粗細要小于垂直筆畫的粗細，以避免產生錯覺。你可以在設計方形圖標、方形背景或頭像邊框等時使用這個技巧。
如何使駕駛盡可能平穩?
設計字體字形就像開車。當我們開車時，如果已經在彎道的起點時，我們不會轉動方向盤，只是在到達彎道前稍作自然轉彎，以免發生意外。
字體設計者不依賴于圖形編輯軟件的預設弧度。他們會調整曲線使其更平滑，因為他們知道人眼可以立即注意到直線突然變成曲線的點。
讓我們看看這兩種曲線：純幾何和微調。試著觀察哪一個干擾了你的眼睛，哪一個是光滑的。
讓我們看看在UI設計中我們可以在哪些地方融入這種學習。
你可能已經注意到右邊的按鈕、圖標和框架看起來更賞心悅目。而左邊的曲線有一個很硬的從直線到曲線的過渡。
我們如何修正曲線呢?在設計時，可以進入形狀編輯模式，手動調整曲線手柄的大小，如下圖所示。
為什么眼睛的判斷比數值參數更重要?
間距是字體設計中最關鍵的部分。字體設計師根據字母的形狀對字母進行組合，并以不同的間距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它們一起出現，那么它們之間的間距會有點寬，需要減少間距。這有助于形成和諧的字體。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
現在，讓我們看看如何將這個知識點運用到視覺設計的其他方面。你可能已經注意到，在圓形或矩形容器中放置三角形圖標會使圖標顯得不協調。這僅僅是因為當用軟件來對齊的容器中，三角形的面積兩邊是不相等的?？纯聪旅娴膱D片，可以用視覺解釋來理解它。
為了使三角形在其容器內具有光學中心，我們需要平衡兩邊的重量。對于三角形，你可以找到質心，并將其與容器的中心對齊?，F在，如果三角形是用形狀工具創建的，Adobe Illustrator會提供質心的提示。
如果沒有看到質心提示，也不要擔心。質心可以通過簡單地畫線從任何兩個邊的中心到它們對面的頂點來定位。查看下面的圖片來更好地理解它。
這種方法只適用于幾何形狀。對于其他更復雜的形狀，你需要依靠你的眼睛判斷，而不是數學參數。
需要記住的是:如果你為開發者切圖時，你需要在圖標周圍保留一些區域，這樣他們就可以將圖標放在背景的中央。
從圖標的質心畫一個圈，留下它周圍的額外區域。
讓我們檢查一下，可以在留言區討論下到底哪個公司使用了錯誤的資源？
如何平衡?
你有沒有仔細注意過字母“B”?它的底部被設計得比頂部大。如果我們設計的兩個半圓在數學上是相等的，它會看起來不平衡(檢查左圖)。這是因為我們進化到從“視角”的概念來處理物理世界，在這個概念中，遠處的物體看起來比附近的物體更小。（彩云注：可以理解為當你在山腳時看到的山腳物體要比看山頂的要大，透視原理）
在印刷中，這意味著要使字體同樣平衡，就需要在底部畫得更重。
讓我們通過翻轉字體中的幾個字母來看到明顯的區別。
字體來源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
同樣的概念適用于其他水平對稱的字母形式，甚至在字母“H”的交叉杠是放在實際的中心以上，使它看起來更平衡。
所以，下次當你設計一個水平的圖標或標志時，使用這種底部重的技巧來讓它在視覺上更加平衡。
這種錯覺也被稱為“波根多夫錯覺”( Poggendorff illusion)，這是一種奇怪的現象，會扭曲我們對形狀相交角度不是90°的感知。出于某種原因，我們的大腦很難推斷出一條被其他形狀部分覆蓋的線，從而導致連續性的中斷。為了更好地理解它，先看看下面例子中的左邊的圖，看看哪條線是連續的，A還是B?然后檢查我縮小了封面線的右邊的圖片。我希望你明白我的意思。
在拉丁字體中，' X '或' x '就是這種錯覺的受害者，需要特殊處理使其看起來更自然。字體設計者稍微偏移對角線，以矯正X或X的光學效果。(彩云注：右邊是調整后的，視覺上看更加連續)
如果你在為其他語言設計字體或為APP設計圖標集時遇到類似的問題，你可以嘗試像在字母“X”中那樣偏移斜線。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：彩云Sky 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
076.「百度地圖」出行前的“極端”天氣預報
077.「搜狗輸入法」“跨界”復制/粘貼
078.「支付寶」螞蟻森林/莊園-模擬現實世界的自然規律
079.「躺平」趣味化的“擊掌”點贊
080.「QQ音樂」導入外部歌單-不同的設備/賬號歌單無縫對接
081.「微信」簡便且高效的圖片翻譯功能
082.「橙」不一樣的的登錄方式
083.「高德地圖」桌面一鍵導航-出行更高效
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
085.「餓了么」合適的時間、合適的提醒
086.「搜狗輸入法」教你少打字、多開掛
087.「美團」垃圾分類-解決餐后垃圾分類之憂
088.「優酷」個性化彈幕設置-看劇調侃兩不誤
089.「隨便走」AR導航-“傻瓜”式操作，老少皆宜
090.「微信讀書」模擬現實的行為動作
076.「百度地圖」出行前的“極端”天氣預報
產品體驗：
使用百度地圖，導航路線規劃后，會出現當日的天氣提醒，點擊進入即可查看每個時段的天氣預報。
設計思考：
“賭博看運氣，出行看天氣”，任何時候，大家如果優先知道天氣情況就可以提前做好準備，這對人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問題的重要因素，所以提前預知天氣的重要性可想而知。
使用百度地圖APP，導航路線規劃后，出行方式的下方會提示最近可能影響到出行問題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過點擊進入，查看每個小時的天氣詳情，對于時間不是很敏感的用戶來說，為了錯開惡劣的天氣，提前或延遲出行也是一種不錯的選擇。
077.「搜狗輸入法」“跨界”復制/粘貼
產品體驗：
電腦和移動端都使用搜狗輸入法，且在同一個賬號登錄的情況下，電腦端出現文字復制的操作后，可在移動端設備任何位置的輸入框內直接粘貼，非常便捷。
設計思考：
輸入法給大部分用戶的第一感覺就是用來輸入文字的，哪個好用用哪個，一旦習慣了使用某個輸入法，基本就成了忠實用戶，不會隨意去改變。不過有時候輸入法只是輔助作用，并不需要直接使用，比如：我們在電腦網頁看到自己喜歡的文案語錄時，想發個朋友圈，就需要先復制，再用電腦端微信發到手機微信，最后從手機微信復制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過自己碼字就會浪費大量的時間。
搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實用的功能。最近發現了一個新的設計細節，讓人驚呼。當電腦和手機端都使用搜狗輸入法且登錄同一個賬號時，在電腦端復制文字后，打開手機端任何輸入窗口，即可看到在電腦上復制的文字，直接粘貼即可，由被動輔助變為主動攝取，再也不用通過聊天工具發送到手機端進行二次復制的繁瑣操作了，實現“跨界”復制/粘貼，非常方便?？梢钥闯鰣F隊站在用戶體驗的角度上，對于輸入法使用場景的串聯考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠度。
078.「支付寶」螞蟻森林/莊園-模擬現實世界的自然規律
產品體驗：
在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場景，模擬現實世界中的自然規律，白天晴空萬里、且有陽光照射，夜晚滿天繁星、且有流星劃過，頗具真實感。
設計思考：
幾年前QQ牧場養殖、農場偷菜，如今演變卻變成了支付寶的螞蟻莊園養小雞、森林偷能量，將以前的純游戲思維轉變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進公益事業的發展，同時用戶也會得到心理上的滿足和成就感。螞蟻森林/莊園小游戲對用戶產生的粘性除了其模式的新穎，也離不開產品團隊日夜刻苦鉆研所提升的用戶體驗。
螞蟻森林/莊園的視覺場景跟隨著白天、夜晚的環境變化，產品遵循現實世界慣例來呈現信息，更具真實感，便于用戶在使用中將現實中的體驗不經意間帶入到游戲場景，可使其更加投入，通過用戶的現有認知，以促成情感化的體驗，使產品更具親和力。
079.「躺平」趣味化的“擊掌”點贊
產品體驗：
在躺平APP對其他用戶的發表的動態推薦時，使用了擊掌圖標，且有光彩線條圍繞著掌心向四周擴散的動效樣式，趣味性十足。
設計思考：
推薦是對其事件/事務認可的一種表達行為，最早可追溯到上古時代的堯舜禹時期，那時候如果對某件事或人，高度認可時就使用鼓掌（慢速且有節奏）的方式來表達；到后面慢慢演變成了簡單的一個字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語...表達?；诨ヂ摼W的發達，為了讓更多人發現其內容資源的優質性，80%以上直接沿用了豎大拇指樣式來表達對內容的認可及贊許，即使有區別于其他產品，也是在局部或動效樣式上做出一點改變。
躺平APP的點贊樣式較為新穎，使用了擊掌的圖標，并且使用了光彩線條圍繞掌心向四周擴散的動效樣式，相比豎起大拇指則更加強烈，意味著喝彩，表達了對內容的高度認可，相較于同質化嚴重的情況下作出了創新， 在過渡的時間差中，進行了趣味化的表達，更具視覺沖擊力。
（“擊掌”的點贊方式適合用于類似躺平、動漫、B站等二次元或個性化的產品中，如果用于工具、新聞、電商等類型產品，可能會對用戶產生干擾，慎用）
080.「QQ音樂」導入外部歌單-不同的設備/賬號歌單無縫對接
產品體驗：
在QQ音樂我的頁面，使用“導入外部歌單”功能，根據提示，即可把其他音樂應用里歌曲添加到QQ音樂歌單。
設計思考：
現在聽歌早已不像以前，一張內存卡或一根數據線就可以把手機里的歌曲轉移它處。基于人們生活水平的提高，數據流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無需下載（除非深山老林或地洞沒有信號）占用手機內存，創建一個歌單，把自己喜歡的收藏起來，即時聽歌，非常方便，如果沒有特別的情況，成為了一款音樂應用的忠實用戶后，基本不會頻繁轉移。
QQ音樂的導入外部歌單功能，可將其他音樂APP的歌單添加到QQ音樂自己的歌單里。對于導入外部歌曲，很多用戶沒有什么概念，感覺自己用不上，別忘了蝦米音樂“尸骨未寒”，很多事情不是沒有可能發生，當一旦需要時，這個功能就是“救命稻草”，可以想象，如果通過手動把以前的幾百首歌曲一首一首的添加到歌單，不知道會不會“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯的音樂交友方式，實現不同設備、賬號的音樂歌單無縫對接。
081.「微信」簡便且高效的圖片翻譯功能
產品體驗：
在微信的聊天對話框中打開英文圖片，點擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。
設計思考：
在我們的生活中，有時候多多少會遇到一些英文，比如進口食品包裝、藥物說明、護膚品等，其中就有一部分是純英文說明，無論自己多么博學多才，但不見得都能理解英文。記得之前有一次，我自己的電腦藍屏，出現的全是英文，雖然自己也是一直提倡用互聯網解決問題，且也有一些拍譯軟件，但一想著需要下載注冊，沒準兒還要先看廣告或收費，且天生對英文有一種與生俱來陌生感，還未開始便放棄了，于是成了伸手黨，去請求別人幫助。
微信的圖片翻譯功能就是專為解決這一問題而生。通過在對話框中點擊圖片直接翻譯，看到一道綠色的光由上而下掃過之后，圖片中的英文就變成了中文，著實方便，比起以前通過第三方或先提取圖片中的文字來翻譯，操作簡單且效率還提升了很多，可以說是一個非常實用的小功能。
082.「橙」不一樣的的登錄方式
產品體驗：
在橙APP的登錄頁面，區別了常見的登錄界面樣式，使用對話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業屬性。
設計思考：
在任何應用中，要想有自己的“私密”領地，都繞不開登錄/注冊的流程，但凡手持智能手機又想玩的開的用戶，對登錄的流程是非常熟悉的，比如手機號+驗證碼、一鍵登錄、第三方登錄，無外乎這幾種常規的登錄方式，如果想來點“刺激”的，無非就是加個logo、貼個插圖、來點動效等，見怪不怪了。
橙APP的登錄方式雖然同樣是手機號+驗證碼登錄，但在流程樣式上卻非常新穎。鑒于應用本身屬于社交行業，通過對話詢問的方式讓用戶按照流程輸入了手機號和驗證碼，給用戶造成這不是對使用該APP設置門檻的錯覺，降低用戶的防備心理（很多產品用戶量的增長都被擋在了登錄之門外），讓用戶不知不覺在聊天過程中完成了登錄流程操作，其方式非常友好且登錄的過程是愉快的，同時還兼帶了濃濃的社交行業屬性，通過更直觀的登錄場景感受，拉近用戶跟產品之間的距離，使用戶的印象更加深刻。
083.「高德地圖」桌面一鍵導航-出行更高效
產品體驗：
通過高德地圖的收藏夾，點擊收藏地址右側的功能菜單，在彈窗中將該地址“添加快捷導航到桌面”，后續就不用每次輸入常用的目的地了，直接通過桌面的圖標入口即可一鍵導航。
設計思考：
對于在外的工作人員，導航算是手機必備的軟件，以前只是純粹的導航認路，而隨著汽車量的增長，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會習慣性打開地圖導航，隨時觀察路線擁堵情況來思考是否有更換更優路線的需求，于是就按照慣例打開導航、錄入目的地、選擇路線......等一系列的常規操作，日復一日，似乎沒有覺得什么不妥。
高德地圖的桌面一鍵導航功能，為長期有駕駛需求的用戶提供了更為便捷的操作，將經常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導航便捷入口，有需要時桌面點擊即可，系統將自動規劃最優路線，通過最便捷的方式一鍵導航，再也不用日復一日的重復之前的操作了。站在設計師的角度，在解決用戶需求時，操作越復雜、步驟越多，用戶的選擇條件、視覺負擔及時間成本就越多，出錯的情況也越多，故而用戶流失的可能性就越大。高德地圖通過一鍵導航簡化操作流程，通過合理的操作路徑，降低用戶時間成本，有效提升了使用頻率及粘性。
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
產品體驗：
首次進入愛奇藝閱讀APP，在性別選擇頁面中，男生和女生的頭像通過動畫的形式反復左右替換，用強視覺提醒的方式推動用戶進行選擇操作，以便于提供更匹配的內容資源。
設計思考：
大部分新聞或閱讀類型的APP，在用戶首次進入應用時，都有類似性別、行業、愛好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內容資源來提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無需要直接跳過即可。
愛奇藝閱讀首次即進入APP時，以動態的性別頭像插圖反復左右切換的動效方式來提示有用戶選擇性別，相比常見的靜態按鈕直接顯示在那里會更加友好，不會過于生硬、冷冰冰，其動畫視覺樣式給予明確的指引和提示，更能引起用戶的注意，通過強烈的視覺提醒促使用戶更高效的完成當前任務。
類似這種選擇且非強制性的前置頁面，很多設計師只是按部就班當做一個流程，其實要想做好并非僅僅如此，可以通過趣味化、情感化、動效等方式增強用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進入應用之后所看的內容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉化，所以應用中，用戶的前置選擇對產品的重要性可想而知。
085.「餓了么」合適的時間、合適的提醒
產品體驗：
如果在餓了么有正在進行中的訂單，再次進入應用時，右下角會提供一個查看的快捷入口，點擊可快速進入該訂單查看進度或騎手配送狀態。
設計思考：
隨著外賣行業的普及，給我們的生活帶來了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時間在外賣平臺上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們去店途中和店里的等待時間，特別是對上班族來說，真的是太便利了。不過外賣平臺不像京東淘寶-人們可以無憂無慮的逛上幾個小時，通常都是目標明確的用戶，在短時間內完成自己的需求，要么下單、要么查看配送進度。
如果在餓了么有訂單存在，再次進入首頁，右下角會提示配送信息，點擊直接進入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會遮擋部分內容。其實并非如此，是因產品根據用戶的使用場景進行行為預判而設計的快捷入口，在正常情況下，從下單到完結一般在30分鐘左右，如果用戶存在未完結訂單且在短時間內再次進入平臺，80%以上的用戶此時需求為查詢配送進度，因此，右下角的進度提示正是在合適的時間給予用戶合適的提醒，根據用戶的場景需求提供了最為便捷的解決方案，由此可見、利大于弊。
086.「搜狗輸入法」教你少打字、多開掛
產品體驗：
進入搜狗輸入法的設置中，可開啟開掛模式，里面的三連發、回聲、重要的事情說三遍分別對應不同的效果。
設計思考：
搜狗輸入法在業界雖不敢說是最牛，但一定是數一數二的存在，發展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現在更是研發了很多“黑科技”。
從搜狗輸入法左側的logo中進入工具選項，在設置中即可選擇開掛模式（真實效果見上圖）。正如字面的意思，搜狗輸入法通過智能幫助用戶自動完成一些列的復制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡單、輕松完成，方便用戶在開懟、賣萌、刷屏過程中直接碾壓對方的打字速度。開掛功能可謂是實用性與趣味性兼備，讓我們在日常中，面對不同的社交需求時帶來貼心的改變。
（凡事有一個度，刷屏如果沒有用對場景，可能會遭到對方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時間拿去拍領導、拍老板，后果就不說了，刀可切菜亦可傷人）
087.「美團」垃圾分類-解決餐后垃圾分類之憂
產品體驗：
美團我的頁面，推薦工具的“垃圾分類”功能，能幫助我們進行識別因外賣產出的垃圾類型，便于跟線下對應的垃圾桶“對號入座”，減少不必要的垃圾混合而增加清潔工人的工作量。
設計思考：
外賣平臺的興起，給我們的生活帶來了很大的便利，同時也產生了一些危害，首當其沖就是環境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產出，確實在外賣行業普及后，亂扔垃圾的情況跟隨著瘋速增長，雖然這些屬于個人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無端增加垃圾分類的工作難度。
美團的“垃圾分類”功能對衛生環保方面增添了一份力量，當用戶不知道自己產出的生活垃圾是何種類型時，可通過查看常見垃圾類型提示或搜索來確定類型，方便用戶按類型將垃圾丟入對應的垃圾桶，解決餐后垃圾分類之憂，幫助養成良好的垃圾分類習慣，助力垃圾分類落地。還能消除用戶對“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發展及環境保護貢獻自己的一份力量。
088.「優酷」個性化彈幕設置-看劇互動兩不誤
產品體驗：
在優酷APP開著彈幕看片時，可通過彈幕設置調整字體的不透明度、行數、大小及速度來設定最適合自己樣式。
設計思考：
彈幕，用戶非常熟悉的一個詞，很多時候在看影片時，彈幕里面的內容遠遠要比影片帶來的樂趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動視頻的觀看氛圍，讓活躍的用戶有了表達自我的動力和熱情。但對于“鍵盤俠”來說，僅僅在上方顯示的幾行彈幕根本無法滿足自己看影片互動及調侃的需求。
優酷的彈幕設置中，可以根據自己的實際需求對彈幕字體大小、透明度、區域等參數進行設置，針對喜好調侃互動的用戶來說，使用滿屏半透明度字體樣式的彈幕無疑是最好的選擇，互動看片兩不誤。
089.「隨便走」AR導航-“傻瓜”式操作，老少皆宜
產品體驗：
使用隨便走導航，全程利用AR實景，通過3D立體形式的方向引導，幫助我們找到周邊的任何一個地方。
設計思考：
導航是我們出行必備的工具，目前高德和百度在該領域各自獨霸一方，看似很牛叉，但并不是萬能的。比如老人操作起來有一定的難度，經常各種功能找不到還說不好用；又比如我們在陌生的重慶市，可能你從這南面1樓進去，北面就在20樓，毫不夸張，如果通過常規的地圖導航去找人，我建議你最好吃個早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。
隨便走APP是一款便捷式輕量導航工具，主打“讓生活樂趣一目了然”。利用“AR全息實景”的展現方式，改變了必須要有地圖的模式，對于我們找周邊的美食、酒店、公交、廁所、景點等需求，進行穿透式3D立體指引，操作簡單，不管前、后、左、右、上、下都有非常明顯的視覺引導，只有你想不到，沒有它找不到，對于長期生活在大城市的用戶，交通復雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡單，學習成本基本為零，對家中老人而言，也是一款不錯的導航工具。
090.「微信讀書」模擬現實的行為動作
產品體驗：
在微信讀書的書架頁面，點擊書籍以及書本翻頁，都使模擬了現實生活中較為自然且真實的從書架拿書、及各個角度翻頁的效果。
設計思考：
看書APP雖然眾多，但真正能堅持下去、養成習慣的沒有幾個人能做到，站在平臺的角度思考，畢竟書本的內容是平臺無法修改的，除了提供優質的資源并給予方向指引外，其他便是通過設計體驗來提升用戶的好感度了，
微信讀書APP從書架的拿書動作到書本的翻頁，都模擬了現實生活中用戶看書的行為動作，大家都知道，真正喜歡閱讀的人，是不會在意這些所謂的橫豎及交互效果的，但前面都說了，這種人畢竟在于少數。因為受眾的差別，模擬現實其最主要的作用就是為了吸引眼球，模擬用戶的實際行為，將其代入真實的情境中，使用戶對產品產生深刻的認同感，則看著更加舒心，待用戶提升忠誠且養成看書習慣之后，這些作用就會慢慢變得微不足道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：大漠飛鷹CYSJ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從紙質閱讀到屏幕閱讀，通過理解用戶從紙質到屏幕閱讀行為的轉變，我們從傳統中文排印經驗中吸取對字體、間距、標點的處理方式，跨越平面與UI不同終端的設計規范和實現手段。在UI設計的語境中調整中文排版策略，優化手機百度圖文閱讀場景設計，提升手百用戶的閱讀體驗。
· 屏幕閱讀與紙質閱讀不同
人的閱讀習慣會根據閱讀環境而改變，包括文本的書寫格式、文本的媒介、語言符號等。基于屏幕的閱讀行為，往往表現了如下特征：很少人會一字一句閱讀頁面，更多的是在瀏覽、關鍵詞確認、非線性閱讀、有選擇性的閱讀。
· 設計差異點
UI設計與書籍排版不同之處在于：
第一、屏幕上可以實現更多的交互功能，增強了閱讀的沉浸感和交互體驗。
第二、UI設計不可控因素更多。平面排版紙張和內容固定可控，可以保證設計的精準展示。但在UI設計中，想讓頁面達到和原本設計一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內容的靈活可變，都讓最后的展示效果多了很多不可預期。這就是為什么會有很多排版優秀的印刷品設計，但UI中優秀的排版設計卻特別少。
因此，針對屏幕閱讀的設計要注意：不能照搬文字排版規則，更要充分考慮屏幕與內容的靈活可變，確保設計方案可實際落地。
· 明確設計目標
本次設計改版主要針對手機百度——圖文落地頁部分，希望通過優化文字展現、內容排版提升閱讀體驗。
CEA閱讀體驗模型將用戶的閱讀體驗分為舒適、效率、吸引三個緯度。
舒適（Comfort)：視覺負擔低，信息適量，看著不累、沒有信息壓迫感
效率（Efficiency）：重點信息突出，直觀性強，容易識別
吸引（Attraction）：頁面設計美觀，有吸引力
基于此模型，此次優化方案中我們確定的設計目標是：優化內容可讀性；提升閱讀效率；提升頁面美觀度。
· 優化內容可讀性
· 選擇屏顯友好字體
屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無法做到印刷字體那么多細節的設計。目前屏顯漢字的設計方式一般是：
1、從字體的結構入手，擴大中宮的設計，字形設計看起來舒適放松，提升辨識度，相較于中宮內縮的字體，呈現現代的明亮感。
2、字形簡潔，平直少細節的筆畫有助于提高字體本身的辨識。
遍歷手百用戶常用手機的默認字體，系統默認字體都是使用屏顯友好字體。
· 選擇字重更全的字體
與紙質閱讀相比，用戶在在屏幕閱讀中，會經常進行掃讀、關鍵詞確認，而不是像在紙質書上一字一句的讀。
目前我們提供給作者的能夠做重點信息區別的方式包括：文字加粗、風格化二級標題。但我們發現目前在一些安卓手機上，一些字體在增加字重后出現沾粘情況，不能保證可讀性。
字重，即字形的重量，字重的等級用來標明同一字體家族不同粗細筆畫的字形。
但通常一個特定的字體家族僅會包含少數的可用重量。若一個指定的字重不存在時，CSS會就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會映射到更輕的重量。
目前落地頁代碼中字體的設置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場景和分辨率較低的安卓機型上，會匹配到更粗的字重，出現文字沾粘的情況。
我們調整了font-family中的字體適配順位，在安卓端優先適配字重更全的字體，保證安卓端加粗字體的展現，優化內容可讀性。
· 提升閱讀效率
· 優化字間距和行間距
閱讀場景下，文字的間距是影響閱讀效率的關鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。
根據當前現狀，再結合行業設計經驗，我們選擇了字號與行高倍數組合的一系列方案，進行了眼動實驗和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過對比不同機型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁正文文字在當前方案基礎上縮字間距為0，擴大行間距1.70倍行號的設計方案。
· 段落間距適配字號
圖文落地頁的定位是長文閱讀場景，作者發文長度的中位數是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長度為2屏（純文字，無圖情況）。
對于長文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對長文的“畏懼感”，調整文章段落間距，一篇長文通過合理的分段，成為一段一段的短文，每結束一段短文，用戶都有機會進行休息并獲得滿足感。
出于屏效考慮，當前圖文落地頁段落間距不論用戶使用哪一檔字號，都為一個固定值。所以在調大字號的模式下，段落間距小，用戶難以區分；在小字模式下，段落間距又太大，降低了屏效。
優化段落間距的設定，段落間距應隨著字號的變化對應做出變大或變小的調整。調整后的最大字號與最小字號段落間距都更合適，閱讀節奏更好。
· 頁面美觀，提升吸引力
書籍排版中“微觀字體排印”中一直都關注字距、行距、標點符號等排版調整，這些排印規則大部分源于文字本身的規律，排版風格和規范，并不隨著設計潮流而輕易改變，是需要在所有媒介上都應遵循的規則。但是現在的UI排版中幾乎都沒有遵循，這也是我們經常覺得UI頁面上的中文排版看起來不精致的原因。
通過學習W3C《中文排版需求》《中華人民共和國國家標準-標點符號的用法》等中文排版規范文檔中對標點等微觀排版的調整思路，并結合UI場景落地，希望從細節處提升頁面美觀度和吸引力。
· 優化標題，突出內容
在標點使用規范中對標題中標點符號的使用有嚴格的定義：標題的作用是概括表明文章內容，一般標題中除書名號、引號等表示專用名詞的符號外，不應該出現標點符號，題中停頓可用空格表示。如確實因需要表明語意而必須使用標點符號時，應使用同號的半角標點，標題末尾除問號或嘆號外，一般不使用其他標點符號。
但在實際UI界面中，我們無法在生產端對作者使用的不規范標點符號進行逐一的確認、修正。UI需要的是展示規則，保證多種內容最后都能有良好的視覺呈現。
在不修改作者不規范標點使用的前提下，優化標題中標點符號的寬度：將標題中引號、書名號使用半角標點；連續標點將前一位標點使用半角標點，其余標點不變，目的是在保持標題基本閱讀節奏感的同時，減少標點在標題中的占位，突出標題內容。
· 標點首尾禁則
在中文排版規則中，為了保持閱讀順暢、體例一致，多數標點符號的位置有限制，通常一個標點符號依其性質，禁止出現在行首或行尾。這項規則自活字排版時代開始通行。在中文排版里面這項標點規則叫“標點首尾禁則”。
如何執行這種標點規避，平面排版中處理遵守“先推入，后推出”原則，即不希望標點符號出現在行首時，應在已經標點擠壓的基礎上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最后一個字至下一行。前行多出來的空間需按照優先順序拉伸，最后沒有拉伸機會再按平均拉大字距的方式處理。
但“先推入，后推出”原則在UI場景中實現難度太大，意味著在判斷每個標點位置的時候，還需要進行多次邏輯判斷，技術成本太高。因此我們以效率優先，將“先推入，后推出”原則修改為“推出式標點避頭尾”，即從上一行推出一個字排在下行的行首，避免行首、行末出現禁排的標點符號。
雖然由“先推入，后推出”退階為“僅推出式標點避頭尾”，但整體文章還是避免了標點出現在行首尾情況，遵循了中文排版基礎規范。
· 連續標點擠壓
中文的標點符號通常占1個字符寬度，便于識別、配置和排版，但當頁面中連續出現2個及以上的標點符號的時候，文章上會出現一塊空白，這些空洞會使在閱讀時候增加文字間距，使文字過于跳躍，增加讀者理解內容的時間，造成腦眼勞累；同時會造成版心灰度的不均衡，影響視覺美感。
標點符號字面分為“可調整”和“不可調整”兩類，“可調整”的標點符號標點本身在字面左、字面右、字面居中，可縮減掉標點不占位部分的空間。
不可調整的標點包括：半字連接號、間隔號、分隔號，因為這幾個標點固定半個字寬。
在《中文排版標準》里面說明：當文中出現連續標點符號排列時，為了使文字更加緊湊、易讀，應該對標點符號的寬度進行調整。如果兩個符號占用2個字寬，應當縮減成1.5個字寬。在此原則上，允許排版風格進一步調整讓兩個符號只占1個字寬。擠壓方向應該是標點符號緊靠內容，擠壓掉離內容遠的空間。
根據這一原則，我們在代碼中設置當連續出現兩個及以上的標點時，擠壓第二位及以后的標點為半角，縮減連續標點時的占位，減少閱讀時候的視覺跳躍，減少文章中出現的“空洞”。
· 完整設計方案
回顧整個設計方案，包括了3個部分：
1、對比屏顯字體與印刷字體，結合字體的字重，優化字體家族選擇范圍與展示順位，優化內容可讀性。
2、通過眼動實驗、可用性測試調整字間距、行間距和段落間距，優化閱讀節奏，提升閱讀效率。
3、學習W3C《中文排版標準》等規范，吸取中文排印優良傳統，通過對內容中標點符號等微觀細致的調整。使正文區頁面能夠保持字距均勻，版面齊整、灰度均衡。從標點細節提升頁面美觀度和吸引力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
伴隨短視頻平臺的崛起，移動互聯網的主流內容消費形態向短視頻視聽語言轉變，視頻信息流廣告的時代已經來臨。如何通過設計提升轉化，是視頻信息流廣告所面臨的挑戰。
為了提升廣告轉化效果，我們結合實際項目，通過大量的實驗與思考，梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現原則，我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。
///
延遲增強是什么？
視頻信息流廣告有三要素：內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料，基礎框架需對齊宿主保持一致性，所以僅有承載轉化信息和行為的轉化組件，是可設計部分。
而“延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現方式。它由消費者決策時的理想心理動線，結合廣告行為推導得出，并經過實驗驗證了其對于轉化提升的有效性。
“延遲增強”包括兩個階段：1.廣告展現初始階段，延遲展現廣告意圖，通過內容吸引潛在用戶；2.廣告內容逐步呈現階段，轉化組件漸進式增強，輔以增益信息，不斷強化，引導轉化行為。
它指導了轉化組件從“呈現”到“增強”的全流程，從時機（出現&增強時機）/引導（動效&互動引導）/前置（信息&轉化前置）三個部分，幫助提升廣告轉化效果。
///
時機-延遲增強如何呈現？
轉化組件的呈現時機包含“何時展現”與“何時增強”兩個部分，前者幫助增加廣告接收率，后者提升廣告轉化率。
01/ 出現時機：
延遲展現廣告意圖，可以提升廣告賣點的展現機率
互聯網的快速發展使得受眾被動卷入爆炸式增長的資訊信息體中，廣告借助這一媒介迅速發展，但也因為部分商業廣告的過度宣傳與其降低用戶信息獲取便捷性的本質，不可避免的使受眾產生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。
所以對廣告來說，在廣告展現初始，延遲展現廣告意圖，融入內容，可以緩解受眾的抵觸情緒，提升廣告賣點的展現機率。
02/ 增強時機：
通過用戶行為和視頻特征動態決定增強時機，可以有效提升轉化
對廣告來說，搭配廣告內容進行增強，通過內容積累購買欲/信任感，然后通過階段性的增強來提示操作，對比一成不變能起到更好的轉化效果。
我們首先嘗試了程序化的增強時機，在不增加技術成本的前提下，根據歷史經驗，面向不同的廣告均采用固定時段的階段性增強。
但不同的廣告物料內容不同，不同的用戶偏好也不同，固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候，我們采用了動態時機策略，通過用戶行為和視頻特征動態決定增強時機，在程序化增強時機之后，再次實現了轉化提升。
///
引導-延遲增強如何引導轉化行為？
轉化組件如何引導轉化，則可分為基礎的視覺引導與進階的互動引導，前者幫助搶奪視覺注意力，后者則能夠在互動體驗中植入部分幫助決策的“小心思”。
01/ 視覺引導：
適當增加視覺吸引點，可以有效引導點擊
延遲增強需要通過階段性的增強來提示操作，而如何增強能有效吸引注意則需要琢磨，已有實驗表明轉化按鈕增加掃光動效與智能取色，能有效吸引注意，引導點擊，對轉化提升有良好效果。
02/ 互動引導：
讓用戶主動選擇，可以增加廣告曝光，輔助轉化決策
互聯網產品設計對于用戶交互體驗的追求越發極致，如影視行業走向可交互網劇，本質上是從用戶接收轉變為用戶主動參與，用戶本身對于獲得優質體驗的意識逐漸覺醒。商業化產品也需要緊跟“體驗”與“互動”，將廣告變為互動體驗或具備使用價值的信息，讓用戶從被動瀏覽到主動參與，掌握對廣告的選擇權。
以互動投票為例，我們通過用戶與用戶之間的觀點表達，以投票選擇的形式誘發群體性選擇，引起好奇心與同儕壓力。
若用戶選擇符合群體選擇，則帶來群體性背書，增強信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對群體選擇產生好奇，從而瀏覽兩種選項的內容，有效的增加了品牌曝光。
///
前置-延遲增強如何幫助轉化達成？
轉化組件的前置主要包含信息前置與轉化前置，前者輔助轉化決策，后者幫助便捷操作，更好更快的完成轉化。
01/ 信息前置：
增加增益信息或前置落地頁信息，可以輔助轉化決策
購買/轉化一定是需要足夠的信息積累信任感才能達成的，在前卡適當的增加賣點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級，二電類廣告可以增加價格信息，甚至可以前置優惠劵、圖片banner等信息，均能實現轉化的正向提升。
02/ 轉化前置：
縮短轉化路徑，可以幫助轉化行為更便捷的達成
在信任感積累與階段性的增強都達成的時候，在當前轉化對比跳轉落地頁再進行轉化，鏈路更短，用戶流失概率更小。比起實驗嘗試，更像是延遲增強的基礎能力配置。
首先，我們針對表單/咨詢/電話/安卓下載都進行了轉化前置，具有用戶明確意向的按鈕點擊會直接在當前進行反饋。
除了直接將操作前置外，針對不同細分場景的需求，還可以通過交互形態的優化在感官上縮短路徑。
這里以百度的視頻MAX廣告為例，我們針對重落地頁的商家，將MAX首屏（視頻頁）與H5落地頁的關系變拼接結構為雙層結構，通過浮層面板承載落地頁，延時自動彈出，強引導下方內容，激發用戶上滑瀏覽興趣，解決了落地頁隱藏較深，轉化鏈路過長的問題，同時增加了落地頁曝光從而提升轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
設計師在接觸一個新的業務領域時，會習慣性地通過競品研究快速地了解行業，通過對比競品快速地找到體驗優化機會點。但B端產品具有專業性強、功能復雜度高和操作鏈路長的特點，即便有競品可以對照，B端設計師也很難在短時間內深刻理解業務邏輯，做出超越性的設計。
應該如何去打破這個困局呢？除了深耕業務和修煉基本功外，本文嘗試從預判設計、表達清晰、操作可控 三個方面提供了一些助力B端產品體驗提升的小妙招。
在團隊活動時，從搭檔的一個眼神我們就能預判他接下來的動作，相互的默契配合能讓我們順利地完成任務，在產品設計中的預判設計也可以得到事半功倍的效果。
我們可以從歷史記錄、效果預知、智能輔助和行為慣性4個方面進行設計，輔助用戶決策，提升操作效率。
1.歷史記錄
a.用戶操作行為記錄
廣告優化師通常會管理幾十至上百個賬號，需要在多個賬號之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會造成信息遺忘和決策卡頓，從而會影響操作效率。在管理后臺的設計中可以通過記錄用戶最近操作行為，恰合時宜地為用戶提供幫助。
案例：在新建計劃環節，標識出本賬號上次的選擇記錄（最近一次的投放目標），輔助優化師快速做決策。
b.基于操作習慣的系統預測
平臺系統可基于個體操作習慣和大數據分析來預測用戶需求，提供高概率的操作建議，給予用戶貼心指導。
案例：針對廣告平臺表格信息密集，不易快速獲取關鍵指標的問題，Google提供了用戶自定義欄，而Facebook的表格欄會根據用戶列操作習慣和自定義欄行為進行大數據分析，預置一些高頻意圖的組合欄，一鍵切換即可查看關鍵指標，操作更便捷。
2.效果預知
a.效果預覽
表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。
案例：在進行廣告創意創建的過程中，優化師填寫完標題和上傳完物料后很難知道廣告投放到手機端用戶看的真實效果。而所見即所得的可視化編輯方法支持創意樣式實時預覽，可以輔助優化師更好地進行創意優化。
b.效益預估
針對一些需要效力評估的頁面，平臺通過預置好的算法對用戶內容的表達及時給出估算值，給出建議，從而提高內容填寫質量，降低填寫的盲目性。
案例：Google廣告平臺在新建創意環節，對廣告素材資源的組合方式和數量進行估算，呈現當前廣告與高質量廣告設置的差距，輔助用戶進行高質量的廣告制作。
3.智能輔助
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
4.行為慣性
在一些場景里，用戶的行為具有很強的關聯慣性，例如上班時間進到辦公區域打開辦公APP首要目的一般是打卡簽到。通過梳理主線任務或整理用戶體驗地圖可以挖掘出很多基于行為預判的設計機會點。
案例：預判用戶在工作臺內截屏后大概率是去反饋遇到的問題，適時將反饋入口透出，可以提高反饋的效率和用戶體驗。
現實生活中，在與他人交往時，清晰的表達尤為重要。同樣是演講，有的演講者“詞不達意”沒有重點，或者內容晦澀難懂讓聽眾感覺索然無味；而好的演講者則會用場景化的方式將邏輯復雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。
好的設計也應該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務。
如何讓用戶通俗易懂地了解產品功能，并能快速上手？我們可以從功能易理解、內容強吸引和選擇無負擔三個方面來降低用戶的操作門檻。
1.功能易理解
a.術語轉換
將一些晦澀難懂的詞匯轉化表達方式，轉化為更貼近用戶視角的文案描述，傳遞細節感受；
b.信息有效展示
透過需求背后的真實意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產品的服務效益。
案例：服務器預警平臺從傳統的表格形式優化成拓撲圖。將所有的云服務器都抽象成一個個矩形，矩形的顏色代表服務器監控指標的狀況。當方塊顏色顯示為黃色，則表示該云服務器內有監控指標出現了異常，這個時候目標用戶就需要重點關注。
2.內容強吸引
對于老用戶來說，從之前習慣的平臺遷移到新的平臺一般會有很大的抵觸心理。遷移前用戶考慮的關鍵點包括：不遷移是否有影響？新平臺有什么優勢嗎？遷移起來麻煩嗎？
以百度營銷客戶中心遷移引導頁方案為例，初期方案首屏只告訴用戶平臺升級了，但是不能快速了解到升級后的核心優勢有哪些，同時遷移按鈕設計得很弱，傳達的信息是遷移可能會很麻煩，很容易讓用戶止步于此。
所以在進入遷移導流頁面時，首屏首先要講清楚新版平臺的能力和遷移方式。對于當下想遷移的用戶，明確遷移方式和入口；對于徘徊不定的用戶，告知遷移后的好處并做好最后下線時間的提示。這些信息不僅能夠消除用戶遷移前關于成本的顧慮，也能吸引用戶立即開始遷移行動。
3.選擇無負擔
B端產品操作鏈路通常比較長，用戶很容易迷失其中。對于邏輯復雜的功能在做頁面設計時需要突出主次和流程引導，盡可能提供一個主要觸發的主按鈕，讓客戶不用過多思考就知道模塊和操作的隸屬關系，降低認知的負擔。
我們在執行任務時總是希望有過往經驗可借鑒，如果事情按照自己的預期發展了會覺得很踏實有可控感。同理，用戶在操作一個系統界面時也會有類似的心理變化，對于自己熟悉的功能希望主動權在自己手里，能復用之前的經驗無需額外的學習成本；對自己不熟悉的功能希望有及時的引導，能很快地上手并能掌握主動權。
不可控的操作體驗會讓用戶在使用過程中產生很強的挫敗感，一旦有了這樣的心理感受就很難被扭轉。那如何保障體驗的基線確保用戶正向的感受呢？下面就結合操作一致性和明確指引性兩方面進行說明。
1.操作一致性
針對同類型的功能，在交互設計上要盡可能地保持邏輯對齊，保證平臺的一致性同時降低用戶的學習成本。一致性設計對產研提效也有很大的益處。
案例：下例中的批量操作項的邏輯，都是通過選中復選框之后在模塊上方展示批量操作欄且支持一鍵關閉。這樣該平臺的用戶無論在任何場景下只要注意到復選框就對批量操作功能有了預期，沒有額外的學習成本。
2.明確指引性
對于復雜的使?流程，最好能夠在客戶使?的過程中建立統一的指引，引導客戶?步步完成操作，從而提高任務的完成率，促成業務目標達成。
案例：當一個平臺需要用戶完成的任務繁多且流程性強時，需要把所有的核心任務按照層級進行呈現，并作為一個固定模塊展示在醒目位置。這樣用戶既可全局視角理解業務又能作為功能入口快速觸達。
B端業務中，交互設計的核心在于為特定場景設計擇優的行為路徑；通過分析用戶當前所處的階段和場景來判斷此刻遇到的關鍵問題。針對不同的問題去選擇對應的解決策略，例如對于新手來說降門檻會是首要任務，對于熟手來說操作的效率會顯得更為重要。結合預判設計、表達清晰、操作可控三個維度的案例可以讓我們在對業務理解有限的情況下，產品設計能有更多思考角度，也能有更明確的設計主張。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你是否每天都在使用QQ音樂收聽歌曲，但是你有沒有觀察到QQ音樂的播放頁其實藏著很多功能。一個小小的播放頁，雖然看上去那么的不起眼，仿佛它的功能只是用來切歌、看歌詞和單曲循環，但隨著QQ音樂社交化、娛樂化的發展，如今這個播放頁已經成為了一個重要的聚合頁入口。本期「設計大偵探」的「細節獵人」，為你解剖QQ音樂播放頁的37個功能，11種分享方式以及17種歌曲海報。
一、歌曲
「歌曲」是播放頁的默認分類，這個分類的功能比較多，所以我把它拆分為「個性化設置」、「聽歌場景」、「音樂工具」和「分享方式」四種類型?！競€性化設置」和「音樂工具」為用戶提供多種音樂偏好的設置，滿足各類用戶需求，特別是音樂發燒友；「聽歌場景」則是根據場景劃分聽歌需求，用戶可以K歌、發起跟聽，甚至邀請好友一起聽，把聽歌的行為社交娛樂化；「分享方式」則是利用騰訊強大的社交生態優勢，為用戶設計了豐富多樣化的分享方式和個性化海報，吸引用戶分享，傳播，從而拉新引流。
1.1 個性化設置
1.1.1 銀河音效
「銀河音效」是為了滿足各種耳機發燒友對音質的追求?！搞y河音效」按照重低音、環繞、曲風等類型進行分類，多達數十種，完美解決各類用戶人群的需求。平臺還推出獨家定制音效，支持適配各類品牌耳機、音響和汽車，吸引用戶購買VIP會員，激活變現。另外QQ音樂還推出一個「聲音實驗室」的欄目，包含了智能煲機（幫助耳機快速達到最佳狀態）、4D震動和動感閃光，黑科技賦能，讓音樂更有趣。
1.1.2 播放設置
「播放設置」是一個為用戶提供對音樂播放進行個性化設置的功能，包括無縫播放、淡入/淡出、音量平衡、智能音質增強等功能，可以滿足某部分有特定音樂需求的用戶。
1.1.3 播放器樣式
平臺為用戶提供了多種播放器樣式，包含了黑膠唱機（深、淺）、靜態方形、旋轉圓形、靜態圓形、歌手寫真等樣式，還支持智能光效和音樂影片的播放背景，滿足各類用戶對播放器樣式個性化設置的需求。
1.1.4 個性主題
「個性主題」為用戶提供了豐富多樣的主題裝扮和頭像掛件，包含明星、星座、影視、文藝等各種主題，當用戶使用以后，整個QQ音樂的界面風格都會隨之改變，這就像以前的QQ空間裝扮，一鍵換膚，個性又時尚，深受年輕用戶喜歡。「個性主題」作為為QQ會員獨家專享打造的板塊，是實現商業變現的重要手段。
1.1.5 收藏和屏蔽
當你喜歡某首歌曲的時候，你可以點擊收藏，自動添加到你的默認歌單，這樣對用戶建立自己的歌單非常有幫助，從而提高用戶留存率。而如果你不喜歡它的曲風，或者特別討厭，你只需要點擊屏蔽，平臺在播放時會自動跳過，非常方便。
1.2 聽歌場景
1.2.1 唱歌
「唱歌」是直接跳轉到騰訊的另外一款音樂產品全民K歌，當用戶聽歌的時候突然想唱歌，那么可以直接進入全民K歌，有效降低用戶的流失率，滿足用戶多場景的需求。
1.2.2 跟聽
「跟聽」是一個非常有趣的功能，用戶進入跟聽模式以后，可以邀請朋友加入自己的播放列表，也可以跟聽其他用戶的歌單?！父牎篂槁牳柙黾恿松缃换拥膶傩?，目前功能還比較簡單，但讓聽歌的場景變得有趣、好玩。
1.2.3 一起聽
「一起聽」是一個社交互動式的聽歌功能，用戶可以邀請好友一起聽歌。當朋友進入后，還支持發表情，就像一個聊天室。這就像是專門為一些年輕小情侶量身定制的聽歌場景一樣，平臺還會為用戶生成聽歌記錄，比如一起聽歌的時間，聽過的歌曲等，甚至還會生成一個心動等級，激發用戶為了更高等級使用這個功能。
1.2.4 駕駛模式
「駕駛模式」非常簡潔，系統會自動檢測用戶聽歌的環境自動切換。這個功能的設計充分考慮了用戶駕車時候需要換歌的場景，提供了語音找歌、個性電臺、我喜歡的歌單、最近播放和電臺，省去了用戶開車時候不方便換歌的痛點，用戶體驗非常友好。
1.2.5 評論
一邊聽歌一邊看評論已經成為現在年輕用戶非常喜歡的聽歌方式，在評論里，可以找到這首歌很多感人的故事，引發共鳴，勾起回憶。用戶進入評論后，除了可以看見其他用戶的精彩評論，還可以進入歌手的撲通小組（類似貼吧），和其他歌迷一起交流，從而增加用戶時間，提升用戶留存率。
1.3 音樂工具
1.3.1 片段播放
「片段播放」提供按歌詞選和按音軌選兩種形式，用戶可以自由裁取需要循環的片段反復收聽。這有點像過去我們使用MP3或復讀機收聽歌曲那樣，功能雖然簡單，但可以滿足某些特定場景使用。
1.3.2 倍速播放
用戶可設置歌曲播放的倍速，支持0.5x到2.0x播放，這個功能在聽書的時候特別實用，非常方便。
1.3.3 定時關閉
用戶在音樂播放中可開啟定時關閉功能，比如15分鐘、60分鐘等，這個功能在助眠的時候非常方便，當你慢慢睡著的時候，音樂也隨之關閉。
1.3.4 設備投放
「設備投放」就是支持音樂投放到電視等其他電子設備，當一群朋友在家里為你過生日的時候，你可以把你的歌單直接投屏到電視，讓大家一起陶醉在美好的音樂夜晚。
1.3.5 設置鈴聲
當你覺得某首歌曲特別好聽，想把它設置為鈴聲的時候，你不用去應用市場搜尋其它工具，你只需要進入「設置鈴聲」，你可以自己截取喜歡的音樂片段，系統也會自動智能截選一段精彩的鈴聲。在右上角提供了詳細的鈴聲設置流程，教程非常簡單。其次QQ音樂還有一個鈴聲專區，里面提供了海量的鈴聲選擇。
1.3.6 查看曲譜
查看曲譜是一個非常實用的功能，對于很多音樂愛好者來說，當在某個夜晚抱著吉他想彈奏某一首歌曲，你只需要打開「查看曲譜」，里面包含了智能吉他曲譜、智能尤克里里曲譜以及五線譜/六線譜/簡譜。進入曲譜后，你還可進行自由編輯，比如編輯和弦、更改時值等。這種實用不起眼的小功能，對提升用戶的滿意度非常有幫助，可以搶奪用戶時間，降低用戶流失率。
1.4 分享方式
1.4.1 分享給好友
用戶可以把歌曲分享給微信好友、QQ好友，還可以通過私信方式分享給QQ音樂好友。
1.4.2 設置聽歌狀態
利用騰訊強大的產品生態，用戶還可以把聽歌狀態同步到微信和QQ，這不僅可以滿足年輕用戶個性化的追求，還能通過外部觸發拉新引流。
1.4.3 分享到社區
用戶可以把歌曲分享到朋友圈、QQ空間、撲通動態和新浪微博，吸引用戶分享傳播，拉新引流。
1.5 歌曲海報
1.5.1 音樂卡片
「音樂卡片」為用戶提供了8種精美的風格，有復古懷舊的磁帶、CD風格，有黑白膠唱機風格，還有專屬的VIP會員專享風格?？ㄆ瑑热莅枨姆饷?、歌名、歌手、音樂指數和過去24小時收聽人數等信息，目的是為了吸引更多的用戶掃碼聽歌，其次VIP會員卡片還加入了QQ音樂豪華綠鉆音樂卡片標識，彰顯VIP會員地位。
1.5.2 歌詞海報
在以前磁帶、CD時代，抄歌詞是廣大音樂愛好者最美麗的回憶之一，「歌詞海報」就是利用這樣的分享場景，支持用戶選擇任意歌詞，然后生成個性化的海報?！父柙~海報」不僅提供了海量的背景圖片，還支持用戶自己上傳，甚至還提供歌詞字體選擇，吸引用戶主動分享。
1.5.3 高光視頻
「高光視頻」就是一段30秒的音頻，提供了6個精美的模版，用戶保存到手機后，可以短視頻的形式分享到視頻號、朋友圈等平臺，和靜態的海報不同，這樣的傳播形式更能引起其他用戶的關注，從而拉新引流。
1.5.4 微信狀態卡片
「微信狀態卡片」為QQ音樂綠鉆會員專享，為會員提供了多種精美的狀態卡片，用戶需要選擇兩行歌詞，然后才能生成。這樣個性化的設置同步到微信狀態后，更能引起追求個性的年輕用戶關注。
1.5.5 歌詞視頻
「歌詞視頻」相比高光視頻，功能更豐富，首先不限制用戶選擇歌詞數量，其次提供了風景、科幻、自然等不同主題的視頻模版，而且還支持用戶自己拍攝。用戶還可以選擇音樂播放的起點，添加視頻動效和濾鏡。通過這樣短視頻的方式吸引用戶分享到視頻號以及更多的短視頻平臺，傳播拉新。
二、歌詞
3.2.1 彈幕
聽歌彈幕就像視頻彈幕，用戶可以邊聽歌邊發彈幕聊天，這是一個年輕用戶非常喜歡的功能，用巴甫洛夫效應來解釋，這就是用戶對源源不斷彈出的彈幕充滿了期待，從而增加了聽歌樂趣，提升用戶使用時間。
3.2.2 歌詞動效
「歌詞動效」為用戶提供了多種個性化模版，滿足年輕用戶的各種個性化需求，其次也是實現商業變現的方式之一，用戶需要開通SVIP才能享受更多精美的動效模版。
3.2.3 歌詞設置
用戶可以調整歌詞的字體大小、簡繁轉換、調整進度，還可以制作歌詞海報進行分享。其中歌詞海報支持靜態圖海報和視頻海報制作，還提供了多種精美模版，吸引用戶分享傳播。
三、推薦
3.3.1 歌曲信息
用戶可以查看歌曲詳細信息，包括歌手、專輯、發布時間以及詳細的制作詳情。
3.3.2 音樂指數
「音樂指數」是一個非常創新的功能，QQ音樂根據用戶聽歌的次數、搜索的次數制定了一個官方的指數評級。用戶可以從這個頁面看到歌曲的實時數據，包括今日、昨日音樂指數、全站排名、上升趨勢和歌曲成就等。
3.3.3 相關推薦
根據歌曲的曲風，平臺會推薦相關歌曲，這有點像私人電臺；其次平臺還收錄了歌曲的各種演繹版本，這真的非常方便，你可以輕松切換自己喜歡的版本；最后為用戶推薦包含此歌曲的歌單、節目和視頻，徹底搶占用戶的時間。
四、總結
QQ音樂的播放頁設計，可以說把騰訊系產品設計的風格發揮得淋漓盡致。為用戶提供各種豐富多樣的個性化設置和音樂工具，播放器樣式、銀河音效、個性主題、歌詞動效、曲譜、鈴聲，只有你想不到的，沒有QQ音樂無法提供的。然后當你想要享受更多特權，你就需要付費開通VIP，這簡直就是騰訊系產品的殺手锏，準備了一千種方式和場景讓你很自然的掏腰包。
其次把社交基因發揮到極致。跟聽、一起聽、彈幕這些都是為了活躍度最高、消費意愿最強的小情侶、小年輕用戶準備的。也許有部分用戶會質疑，我從來不使用這些功能，但作為一個月活超過2億的平臺型產品，QQ音樂擁有眾多各年齡階段的用戶，這就像上期我們分享的《順豐速運為用戶準備了18種寄件方式》一樣，看似多余復雜，但其實是為了滿足各類用戶人群的特定需求。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：廖爾摩斯 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
其實很簡單，心理學目的是了解用戶真實的想法，希望設計師在注重頁面美感的同時也要注重用戶的使用，做產品設計最終目的是為了給公司帶來價值，給公司帶來價值的前提是要給用戶帶來價值，這就需要我們去了解心理學當然不需要精通，每個心理學如果要去吃透他，需要耗費非常大的精力，對于設計帶來的幫助不成正比，所以只需要了解各個心理學法則在產品中如何應用就OK了。
本次繼續分享10個心理學的知識，將從心理學的背景定義、重點解析、設計運用、詳細案例4個維度進行深度解析
簡述定義：保證用戶在使用流程中的高峰處和結尾處保持較高的愉悅體驗
簡述定義：用戶對未完成的事情、被中斷的事情記憶更加深刻
簡述定義：基礎的信息組織原則，主要提升用戶獲取信息的效率
簡述定義：用戶會更加珍惜已經獲得的服務、物品等
用戶同時思考兩件事情以上時，思考效率和準確性會下降，做事情難以專注。
用戶在使用一個產品流程時的高峰體驗和結尾體驗。
用峰終法則提升用戶在整個產品上或某個功能上的體驗，需要先對用戶在整個產品上或某個功能上的使用行為與想法進行分析，并繪制出用戶的情緒曲線，根據情緒的峰值節點和使用流程的結尾，這兩個“關鍵時刻”，進行體驗上的重點打造。
2002年的諾貝爾經濟學獎得主、美國心理學家丹尼爾?卡尼曼經過深入研究，發現人們對體驗的記憶由兩個因素決定，即高峰（無論是正向的還是負向 的）時與結束時的感覺，這就是“峰終定律”。關于峰終定律有這樣一個實驗：讓兩組人員聽相同時間的強噪音，然后一組停下來，另一組接著再聽一段時間的弱噪音，就實際遭遇來講，后一組比前一組受了更多的折磨，但是聽到更長時間噪音的后一組的痛苦指數卻要比前一組低很多，原因就是對于兩組人員來講，結束時刻的噪音給他們留下的感受最為深刻，因而他們的痛苦指數主要是由噪音結束時的刺激程度所決定的。在另 外一種情況下，令兩組人員聽相同時間的噪音，其中一組的噪音強度較高，另 外一組的噪音強度較低，但是其中某一時刻聽到了極其刺耳的超強度的噪音， 結果就是，后一組的痛苦指數要高于前一組，盡管就總體而言，后一組所聽到 的噪音強度要低許多。
這體現的就是感受過程中的“高峰”一刻的決定作用。依照峰終定律，高峰和結束時的體驗主宰了人們這段感受的性質和強弱的 程度，而跟感受的總的比重以及體驗時間的長短無關。也就是說，如果在一段 體驗的高峰和結尾，體驗是愉悅的，那么對整個體驗的感受就是愉悅的，即使 這次體驗更多的是痛苦或不愉快的感受。
用戶根據體驗的高峰和結束來判斷產品體驗是否好壞，并不是根據用戶使用產品的每一個節點感受的平均值來判定，我們可以理解為結果比過程重要。
就像我們看電影時，一個電影2小時前1小時都枯燥無味，突然中間有5分鐘讓你的情緒上升，此時你可能覺得這個電影還行，至少讓你達到了情緒高潮，當你繼續觀看時電影片段又變得枯燥無味，突然最后10分鐘和結束時出現了電影彩蛋，并且這10分鐘的內容特別符合你的胃口，這時候你就會出現一種“嗯，這個電影不錯，結局挺好”這樣的心理暗示，此時會發現接近100多分鐘的枯燥內容都被你忽略掉了，或者你也記得但是你默認了電影90%的枯燥。
一些app里在用戶購買成功后，將已購商品以一種具有儀式感的收藏卡形式展示給用戶，給用戶驚喜的體驗，在盲盒星球內購買盲盒成功后會彈出卡片，把用戶獲得感拉滿，在網易云音樂直播間內如果是新手用戶就會彈出新人見面禮，通過視覺的表現形式把氛圍拉拉滿，當然還有一種反向峰值，當有一些產品進行抽獎時，如果用戶未中獎會彈出情感化彈窗，對用戶進行安慰降低用戶的挫敗感。
上面講的偏向于業務彈窗，還有一種是功能性彈窗， 當用戶使用某個產品流程時，這個流程可能通過多個維度才能到達最終的節點，在最后用戶完成操作時通過情感化彈窗進行提示，又或者在版本升級時需要引導用戶進行更新，使用情感化的表現，能夠將產品與用戶產生情緒共鳴，增加趣味性，提升體驗。
當用戶使用產品去完成目標時，突然中間步驟出現網絡波動、網絡斷開等不可抗拒的因素，此時在頁面中添加一些情感化設計，會緩解用戶焦慮情緒，甚至可以在空狀態中添加動效來提升趣味性。
近期在工作中做了一個直播項目，其中的一個功能就涉及到直播抽獎，因為產品獎品比例較多且輪數也多，用戶的中獎幾率也比較高，所以導致用戶在中獎后基本就退出直播間，因此在做設計的過程中為了避免這個問題，我在中間彈窗上做了優化。
通過情感的中獎彈窗形式來強化用戶的感知度，在直播過程中提升興奮感，提升用戶觀看的直播的欲望。
在講一個案例，去年我們做一個刷題功能的體驗優化，用戶在刷題場景下會面對幾十道甚至上百道題目，整個過程非常漫長，并且舊版的功能交互上并沒有展示總共還有多少題的這個提示，用戶在刷題過程中會非常焦慮，為了解決這個問題，通過這三個手段改進，1）我在刷題過程中以進度條的形式去實時告知用戶刷題進度，減少用戶焦慮，2）用戶在最后幾題的場景中會添加鼓勵話語，強化用戶峰值，3）在結果頁面為用戶展示直觀的數據變化，強化用戶的滿足感，同時激勵用戶進行持續性刷題。
用戶只記得使用過程中體驗高的場景和結束時的場景。
無論是在交互還是視覺上我們都可以利用峰終定律幫助用戶達到好的使用體驗。
蔡格尼克記憶效應（Zeigarnik effect；又稱蔡加尼克效應、“契可尼效應”） 是一種記憶效應，指用戶在完成一件事的過程中被打斷，他會持續關注這件事，記憶更加深刻。
簡單理解就是用戶對沒有完成的事更關注。
該效應由蘇聯心理學家蔡加尼克在20世紀20年代提出，有一次她在酒館用餐，遇到了一位記憶力過人的服務生，她不用筆記就能記住所有客人下單的菜肴，奇怪的是當菜肴上齊之后，蔡加尼克再次詢問服務生，她竟然完全不記得菜單了，這就是由于她的工作完成之后，緊張狀態消失，記憶水平隨之下降了。
我們生活中也會遇到相似的場景，考試我們都經歷過，在過程中某一道題沒答上來，在答后后面的時候腦子里一直會想那道未填的題，而前面填過那么多題，我們卻不容易記住。
看綜藝大家經常都知道，看到關鍵節點的時刻總會有廣告插入，但是我們又舍不得換臺生怕廣告結束，錯過了什么關鍵內容，廣告商其實就是摸透觀眾心理，讓你又愛又恨的看廣告。
生活中還有很多場景，像晚上刷抖音一直想著刷兩條就趕緊睡覺，一抬頭發現凌晨了...打游戲贏一把就不玩了，但當到了贏一把時一看時間過了好幾個小時...小時候買方便面集里面的卡片....
為什么我們會對未完成的工作事項記憶深刻？
假如我們把事項分為三類：1）我們允許其正常完成，2）我們再完成的過程中打斷，過一段時間在接著進行，3）在完成的過程中打斷，并且不允許完成。
稍加思考其實會發現，正常完成任務后是沒有任何心理負擔，完成事項的過程中被打斷，這時候人的心理的會時刻記憶這件未完成的事項，就像我現在寫這篇文章，如果某個段落我沒寫完去做一些其他事情，我就會時刻想著我文章的小段還沒有完成，那么假如我在寫文章的過程中，被打斷并且不允許我寫后續的文章，我的注意力可能就會完全在寫文章這件事，我要去想怎么才能繼續寫，或者怎么才能讓我繼續寫，這恰恰驗證了人們對于未完成且無法繼續的事項心理負擔是最重的。
在一些教育產品或者簽到產品中都會有一些進度型的提示，像下面“開言英語”的課程報名頁面，在側面添加了進度條，時刻告知用戶當前進度，并且在進度末端提示未到達節點，對用戶進行心理暗示，引導完成未來事項。
在新用戶注冊頁面時很多產品會收集用戶基本信息，通常會使用分段形式把信息分開，減輕用戶心理負擔，并且在完成任務時會給用戶明確當前進度，同樣在一些其他場景例如認證信息場景中，哪怕用戶中途因為其他時間被打斷，回來后也能夠很快的定位到未完成事項。
很多日歷產品中會添加代辦事項的功能，這個功能就很好的利用了《蔡加尼克效應》有些用戶會通過在日歷下面添加每天的計劃以此來督促自己完成，如果某一天的事項發現沒有完成就會有很重心理負擔，哪怕到了第二天也會回過頭來把錯過的事項給完成，像我經常就會使用《滴答清單》來督促自己完成什么事情，如果有哪一天的事項沒有在清單上打上勾，我可能好幾天都在關注這件事。
前幾個月的時候我在公司做了一個新用戶注冊登錄的流程，在過程中我主要是負責UI和UX的工作，在這個過程中就使用到了蔡加尼克效應，當時接到的需求是公司戰略目標擴張，需要在移動端更針對性的收集新用戶信息以此進行內容推薦，提升用戶留存。
在得知業務目標是提升用戶留存時，我就思考設計的發力點，通過倒推的方式去一步一步拆解，在這個需求場景內，用戶留存取決于內容推薦是否準確，內容推薦準確度取決收集的用戶信息是否準確和用戶信息填寫率，用戶填寫的準度度需要產品側通過內容的方式進行發力，而如何讓用戶信息填寫率增長則是設計目標。
設計目標已經很明確了，那么如果去優化呢，當時我是先把舊版的問題給拆解出來。
1、交互上舊版把用戶信息都堆積在一個頁面上，并且對于業務目標上很多信息是無效的并且還在視覺核心位置，如用戶頭像、用戶昵稱等這些信息對于內容推薦沒有任何作用。
2、視覺上沒有核心聚焦區域，用戶進來后會措手不及不知道從哪開始下手填寫，并且按鈕的樣式也不夠直觀對用戶造成不可點擊的假象。
首先從交互上開始優化，因為會新增很多信息填寫內容，所以為了避免用戶在同一個頁面看到很多的表單，把交互流程拆解，按照業務維度把表單拆分成多個頁面，在每個流程內給用戶傳達出這個填寫是個簡單的事情，從而避免用戶從第一步就抗拒。
這里面還涉及到【沉沒成本效應】當用戶在填寫第三步四步的時候會因為前面已經填寫了那么多信息花費了時間并不想放棄，沉沒成本前面幾篇文章講過設計心理學-5種用戶體驗法則，這里不詳細講了，其次就是【蔡加尼克效應】用戶在每個頁面看到當前進度的時候就會產生必須完成的暗示，然后這個心理暗示就會持續推動用戶完成剩下的內容填寫。
后期我們針對舊版和新版的優化做了可用性測試，結果上也非常正向，新版的步驟雖然被拉長了，但是每一個步驟都比較簡單用戶填寫起來沒有門檻，所以填寫效率上大于舊版，詳細過程之前有復盤過一篇文章感興趣的可以了解一下注冊登錄可用性流程最后用戶的信息填寫率也是非常有效的提升。
上線之后數據也是正向增長，當然不止這一個場景才能用到蔡加尼克效應，比如像一些用戶成本要求比較高的健身打卡、學習打卡等任務可以使用一些階段獎勵來激勵用戶持續完成。
五架帽理論簡稱為LATCH原則，它定義了在好的組織性信息才能提升用戶體驗，使設計更易于理解、靈活和可維護。
LATCH的概念最初由Richard Saul Wurman在他的設計原則和設計模式中提到，后來在他的《信息架構》的書中重新定義了五架帽概念。
LATCH即是Location位置，Alphabet字母，Time時間，Category類別和Hierarchy視覺層級組成，這五種方式目標都是通過高效的信息呈現來提升用戶體驗。
理論上講的是通過位置來組織信息，其實比較好理解，我們可以理解為你本人所在位置是一個坐標點，所有的信息形成都是圍繞你的坐標點來組成的。
例如地圖軟件中你的當前位置不斷變換，手機屏幕中不斷加載出新的地標建筑，在一些游戲場景，例如絕地求生，隨著你的位置變換，不同的建筑環境、人、道具等都會隨著在你周圍出現，當一些信息組成對用戶非常重視時則會優先出現，比如駕駛過程中當前位置不變，地圖會優先加載道路信息，其次是建筑信息（網絡波動的時候比較明顯）。
并且隨著VR/元宇宙等技術，基于位置變換組織信息已經是非常重要的一環。
總結：通過位置結合時間能夠給用戶展示高效率的信息
與字面意思一樣，按字母順序排列信息，當數據量很大時，它是組織信息的最佳方法之一，在產品應用中常見的就是像通訊錄、目錄等能夠快速的定位到信息，通過這種方式延伸出其他場景的排序方式，例如電商產品中的側邊分類，就是利用英文字母的邏輯把商品類別進行分類，在一種就是按照時間的維度進行信息分類。
當信息具有相同性需要排序的時候，使用分類的方式能夠最快的提升用戶篩選效率，在我們生活我們每個人都有分類的習慣，如電腦桌上會放置一些小物件或電子設備相關的，衣柜里統一都放衣服每一層放不同季節的衣服，每當我們想使用到某件物品時第一時間就能定位到它的位置。
在產品中使用最多的是分類和導航，例如同樣的鞋子可以用品牌分類，也可以按照季節分類或者性別分類......音樂可以用流行、搖滾、民謠等等分類......
類別是該理論中比較關鍵的一環，它定義事物按照分類的方式能夠讓用戶快速的查找信息組織。
上面位置、字母、類別都是提高信息查找效率，視覺層級與字面意思相同，當我們滿足基本的查找效率后可以使用不同的視覺層級來凸顯重要性。
例如在產品設計中可以從顏色、大小等方式來滿足我們想要的層級梯度，讓產品/用戶的核心價值快速的讓用戶察覺到。
上面只是對每條規則單獨拆出來解析，實際中它們是可以共存的，如位置結合時間能夠讓用戶第一時間看到重要信息，類別結合字母就出現了我們看到的通訊錄，類別結合視覺層級能夠讓分類更加重要等。
五架帽理論最終目的都是為了提升用戶使用產品時的信息效率，它的五條設計規則也是在產品設計中的必須要遵守的，為什么說要遵守，因為設計中我們可以仔細回想下，基本上每一個頁面的誕生都與這五條規則相關，一但違背，這個頁面的可用性或者美觀就會有所缺失。
當一個物品用戶沒有擁有時，對他的價值感相對較低，當用戶擁有時會高估和珍惜物品的價值。
心理學家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 對稟賦效應進行了實驗，并在他們 1990 年的論文“稟賦效應和粗略定理的實驗檢驗”中展示了這一概念，這一現象可以用行為金融學中的“損失厭惡”理論來解釋，該理論認為一定量的損失給人們帶來的效用降低要多過相同的收益給人們帶來的效用增加。因此人們在決策過程中對利害的權衡是不均衡的，對“避害”的考慮遠大于對“趨利”的考慮。出于對損失的畏懼，人們在出賣商品時往往索要過高的價格。
比如我們過生日收到的禮物，在沒有得到這件禮物之前，我們對他的價值或者吸引力往往沒那么高，但是當這件禮物通過生日的形式送給你的時候，他就具有一定的意義并且這件禮物是屬于你的，假如此時有人花市場價購買你的禮物，內心更多的想法是不舍得賣，因為這件禮物已經屬于你了。
講個自己真實的故事，我自己是對一些財富手串、事業手串等等相關的東西不感興趣的，哪怕他很便宜我也不會去買，但是有一天女朋友從雍和宮幫我求來一個財富手串并且還是開過光的，以后我就每天帶著這個手串形影不離，有一次放在某個地方找不到了，當時我就很焦慮，感覺自己損失了很大一筆錢，這個其實就是稟賦效應作祟，因為這件東西通過很特別的方式才到我手里，我已經認定這就是我的東西了，所以他對我的價值是極其高，哪怕我之前對這種手串不感興趣。
最常見的產品設計場景中就是分享的場景，例如我們常見的一些分享都是底部彈出一些第三方鏈接方式，那么想一下這樣的方式分享率極低，我們可以利用稟賦效應去強化產品的價值感，在學習產品中把學習數據融入分享頁面中提升讓用戶感受到學習的價值增加分享欲望，在旅游產品中一般都會記錄用戶的旅游足跡，此時把用戶經過的城市以地圖的形式融入在分享頁面中，激發用戶的旅游價值，稟賦效應在分享產品中不止這些玩法，商品收貨時、貴重物品分享時等等。
誘導即是向用戶贈送免費的東西，通過這種方式提供免費試用服務或者是一些優惠禮包等，當得到免費服務或者優惠時由于稟賦效應用戶可能會去進行付費或者深度使用，讓用戶感受到這是它自己的東西，對產品的價值感加倍。（但是我感覺這種方式效果提升不是很明顯，但是確實可以利用這種心理去嘗試可能會有意外收獲。）
誘發稟賦效應的另一個重要因素是用戶的主人翁意識，在一些產品中會有一些個性化的設置，用戶可以根據自己的喜好去進行設置，這樣可以讓用戶與產品產生價值聯動，比如谷歌瀏覽器的背景和同步功能就是我一直使用的原因，雖然其他瀏覽器也有同樣的功能，但是在互聯網初期谷歌可是用這個功能吸引了不少用戶，在比如app中常見的換膚、換色等功能。
有正向的也就有反向的，反向指的就是厭惡效應，人們對自己所擁有的東西更加珍視，所以對于損失所表現出來的厭惡要比獲取收益表現出的愉悅強烈得多，我們往往會對所損失的東西更為敏感，有心理學家實驗過，股票下跌的損失要用雙倍的漲幅才能挽回心理痛苦，在產品中常見的就是會員試用服務，當我們給用戶7天或者30天的試用期后，時間一到大部分用戶都會選擇付費，因為他們默認這些服務已經擁有不愿損失。
情緒和社會會影響一個人的決策，因此根據行為經濟學，當我們了解這些因素時，我們可以構建設計來幫助用戶做出可能的最佳決策，產品設計師可以通過使用價值賦能、個性化、免費試用等簡單方法，利用這種效果來提高產品的留存率和滲透率。
指的是用戶同時思考兩件事情以上時，思考效率和準確性會下降，做事情難以專注。
我們日常工作的時候，如果好幾件待辦事情同時需要處理，我們自己也是很難去說專注某一件事完成，做設計師的都知道，在設計時如果被別人打擾很容易打斷設計思路，我們應該都經歷過好不容易沉浸下來去做某個需求，忽然中間有個緊急的需求插過來讓我們完成，當我們把緊急需求完成后，再去做被打斷的需求發現思路被打斷了，這就是《干擾效應》的影響。
人們在處理事情時大腦會給傳遞出目標信號，根據人的本能認知進行操作，處理收到的反饋信息，最后在反饋給大腦，當多個事情需要處理時，大腦需要同時傳送不同的目標信號，身體的各項部位進行執行，這時候我們往往跟不上大腦信號，因為《想》和《做》是跟人能能力反應相關。
人們處理事情就像電腦運行軟件一樣，同時運行多個軟件時，電腦的效率就會出現發燙、卡頓等問題，人處理多項事情時效率就會變慢，無法專注某一個事情。
看下圖中這兩組金剛區圖標，首先第一組的問題是雖然顏色很豐富，但是沒有進行很好的分類，增加用戶的思考時間，干擾性太大。
再看第二組金剛區圖標，雖然很精致且有食欲，很符合外賣平臺的調性，當然有好也會有壞，這么多復雜的圖標同時出現，當用戶目標很明確的時候，這么多的圖標就形成了信息干擾，用戶需要配合文字才能減少篩選效率。
下面這組某生鮮的金剛區也是同樣的問題，雖然把商品實物圖作為信息傳達的元素，但商品過于復雜，在移動端屏幕上很難看到細節，這需要用戶對商品的認知非常明確，例如一用戶來賣水果，如果是第一次使用這個產品可能很難通過圖標來找到入口。
我們看下面的美團首頁，他的金剛區入口有15個，他們的處理方法在結構上是進行了層級區分，把重要切頻率高的5個入口重點突出，使用頻率較低的入口弱化，通過層級和減少復雜度避免用戶出現迷惑行為。
個人中心是承載功能入口較多的頁面，很多功能用戶一般很少用到，每個用戶的功能使用頻率都根據用戶習慣而定，在設計上個人中心常見的就是把功能按照維度分類，如設置類、功能類等便于用戶查找。
還有一種像站酷這種列表布局也是比較效率的布局方式，這種布局方式按照用戶的習慣，由上到下的順序進行瀏覽，干凈簡潔的頁面，某種程度是減少了干擾。
先看一張對比圖，簡單講下我是如何運用干擾效應進行設計。
這是去年我對我們產品的個人中心頁進行改版，左邊是舊版頁面，舊版頁面無論是視覺上還是交互上都不符合用戶認知，在功能層面也是紊亂不夠簡潔，整個改版流程呢分為分析用戶目標、問題梳理、針對優化、結果驗證。
這里主要講下如何針對用戶目標進行優化，用戶目標分兩個維度，一是個人中心作為管理內容進行使用，二是通過個人中心查看投遞簡歷的進度，其中投遞簡歷對于產品價值是相對較高。
提一嘴當時的用戶是技術類居多，大多是求職、學習目的。
無論是視覺上還是交互上問題都是比較多，并且結構比較混亂，把一些用戶不常用且對產品沒有價值的功能點放置層級較高，過多的就不寫了，總之都是問題。
作者：愛吃貓的魚___ 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
篩選可以說是我使用比較頻繁的一種交互形式，比如我點外賣，會選擇滿減優惠力度大，同時我也可以選擇在哪一個價格區間內的產品，這就會用到篩選，而到了B端產品上來，一個CRM系統當中，篩選的邏輯也會比移動端的復雜，伴隨著：且關系、或關系、大于、小于等等這樣復雜的邏輯，也為設計本身增加了很多難度。因此，今天我們就來討論討論篩選控件
篩選存在的對于整個表單來說是非常重要的，它可以幫助用戶，在表單茫茫多的數據當中進行快速的定位；可以對表單進行快速劃分，縮短用戶對于數據的尋找時間；能夠滿足用戶在工作中，實際業務場景的篩選。
對于實際B端場景來說，篩選是日常數據分類的一個重要途徑，我們先來看看實際場景到底有哪些？
比如今天作為一個電話銷售人員，想要聯系最近注冊的用戶時，通常會通過篩選來選出最近幾天注冊過，同時又沒有銷售更進的客戶，進行一個優先級的排布；
再比如說，在銷售周報當中，銷售主管可以通過篩選得到每個人這周完成的狀態，也可以通過篩選得出每個人對于線索的更進情況和對客戶的流失狀態等等，這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用
篩選可以通過多個篩選條件進行多維度的尋找，而導航、搜索只能通過單一條件進行指定篩選。
雖然在現在很多搜索都可以支持多維度用空格去進行多字段的關鍵詞搜索，但本質上區別不大
所以在B端項目當中，如果你有表單，那你就需要篩選
我們將篩選分為基礎篩選和高級篩選兩種，兩種篩選會根據業務場景不同，在不同的頁面去使用
基礎篩選一般為系統預設好的篩選字段，具有很強的業務和場景的需求。基礎篩選一般分為四個部分：
篩選條件：是指用戶可以篩選的范圍
篩選項：是指用戶可以選擇的篩選項目
已選項：是指用戶已經選中的篩選項
備選項：是指用戶還沒有選擇的篩選選項
基礎篩選更多作為用戶快捷篩選的一種方式，因為一般使用場景當中用戶幾個篩選邏輯為“且”
同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。
高級篩選一般為篩選中含有運算符，同時篩選當中包含條件關系，比如且關系或者否關系。一般高級篩選包含以下幾類關鍵詞
篩選關系：是指幾個篩選條件之間的關系，一般為 且、或關系，即 且 關系為幾個條件之間的交集；或 關系為幾個條件之間的聯集（并集）
篩選字段：是指在篩選當中，所要的篩選項，一般為表單當中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關系，常見的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數值
高級篩選一般滿足更多的用戶場景，為用戶多條件多字段、多個篩選關系、多個篩選操作 提供有利保障。
當在篩選器條件少于5個的情況下，最常使用的就是上下布局，這樣篩選能與網站保持統一的情況下，上下布局也更方便用戶進行閱讀
當篩選器過多的情況下（一般在5-15個之間），篩選器過多，需要滾屏才能看到篩選結果，用戶使用起來會很別扭。所以在5-15個的情況下，一般會將篩選項進行收折，這樣保證篩選整體面積不會太大，同時將用戶常用的篩選放在前面，可以滿足用戶基本的業務需求和使用場景
左右布局在PC端一般是以字段選擇進行篩選，通俗來講就是將用戶可以篩選的所有字段全部羅列出來，然后通過勾選選，擇出你需要篩選的字段，進行篩選器的使用
左右布局的好處是能夠將篩選的所有條件都直接的展示出來，可以適應很多場景，在篩選器用15個以上時。通過左右布局的方式，能夠讓篩選條件進行滾動，在最大限度保持用戶使用體驗
在日常的B端產品中，篩選的形式有哪些？篩選到底應該怎么設計？接下來為大家總結梳理一些在 B端產品 中的篩選玩法，希望為你開啟新大陸。
平鋪型一般為用戶搜索結果數據量過大，使用戶搜索出來的結果與其預期差距過大，用戶然后可以通過篩選對數據的再一次分類，使用戶能夠精準尋找其想要的結果。
平鋪型一般為篩選條件少于6個，這樣能夠通過1行或者2行去展示篩選項的結果
多用于信息量大的產品，比如電商、視頻網站等等。常見的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來。
平鋪型的好處是將篩選項的結果全部或者部分放出，能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結果。
缺點也是很明顯，平鋪型的控件占比大，需要占據大量面積展示平鋪出的篩選結果。
比如淘寶PC端，搜索一個產品后花去40%的面積去展示所有的篩選條件，其實就是想引導用戶，淘寶搜索過后spu的數量仍然過大，想通過進一步的篩選，讓用戶明確自己對想要東西。同時因為面積占比大，通常平鋪型都是以收折的狀態，只有在搜索觸發后才會完全展開
收折型篩選是一種簡單直接的篩選形式，將用戶常用的篩選形式通過下拉框的形式進行篩選。每一個篩選條件就是一個下拉框，這種形式看上去很簡單，但是在B端場景中，下拉框對于用戶來說認知成本低，操作性也較強，同時在用戶重度使用時，又能給用戶很好的使用體驗的一種方式
用戶可以直接對其常用的字段篩選進行一步操作，并且沒有復雜的篩選關系，全部都是“且”的篩選邏輯，能夠保證用戶進行快速的篩選選擇
將所有信息全部平鋪展開，信息量過于冗雜繁多，同時在做通用性產品時，這種方式很難做到通用性
單側篩選是一種更通用的篩選形式，通過對于你想篩選的字段進行勾選，勾選完成后就會出現篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點擊查詢，篩選操作才算完成。
整個單側篩選，大量的篩選條件可以放置在表單的左側或者右側，通過表單縱向空間，去承載大量篩選條件。
節省空間、通用性強。因為在很多Saas系統、Paas系統當中，無法針對每一個客戶進行設計，就要考慮到系統通用型高，做一些大而全的功能。在每個表單也所需要定制化修改的地方很少，同時能容納的信息量可以很大。
就是在后臺系統當中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中，要通過不斷尋找，來滿足我的篩選需求，操作麻煩。
我們產品在某一次改版就將篩選由收折式修改為單側式，因為我們用戶使用篩選的場景非常的多，用戶每次篩選都要多進行2、3步操作，導致用戶進行了大量的吐槽，后來進行修改，將篩選順序支持手動調整順序，用戶吐槽的次數才慢慢減少。
表頭篩選是一種復雜篩選的形式，其最開始是來源于Excel的篩選形式。點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺產品的發展中，得以借鑒過來。
可以通過表頭的點擊，使用戶更快捷進入到自己的篩選條件，在通常情況下，在表單越左的數據顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。
用戶第一次進入系統很難理解這種交互形式，且在每個表頭都會有一個icon，影響用戶對于表頭的識別。
通過點擊篩選按鈕，展現出篩選彈窗，進行篩選。這種篩選適合在篩選功能在系統中不是很重要的層級。最常見的就是Tapd，在其中篩選不是很強的一個功能，同時也是系統中十分有必要的。
是能夠在節省面積的情況下，可以進行很復雜的篩選，同時可以支持復雜情況下的篩選
彈窗會遮擋一部分表單數據，會影響篩選人的判斷，其次篩選條件的添加也相對更加繁瑣。
在我們一系列篩選的調整過后，我們團隊也總結了對于我們來說更重要的條件和形式，來和大家分享探討一下。
我們認為影響篩選控件最重要的是用戶的使用頻率，因為用戶的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高級篩選，也會影響到篩選的形式。
篩選功能的做法，取決于我們產品未來是想往哪一個方向發展，如果想把功能做的強大，就得考慮到篩選的后續擴展性。因此滿足實際業務也是十分重要。
在B端系統當中，最可能遇見的就是你給用戶設計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統最開始給用戶設計好了很多功能點，但是用戶對于這個點的認知成本實在過低，也導致了后面系統功能點很多都被埋沒。因為在你設計好了一個功能點后，要適當引導用戶，解釋這個功能的使用場景才不會讓你設計的功能被淹沒。
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
最近看到很多美妝博主都在出什么紅黑榜，其實就是在說哪些產品是有問題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B端設計當中，也會存在這一情況。然后我在打開 Ant Design ，瀏覽完所有的組件，你會發現：“組件當中也會存在紅黑榜~”
今天就趁著 618 剛過的這個時間節點，我也來“帶帶貨”，說說B端組件當中的紅黑榜
首先我先說一下關于紅黑榜的定義
1.使用頻率高：也就是這個組件我們平時會頻繁的使用
2.黑榜：在使用過程中，會遇到諸多問題，導致無法正常使用
3.紅榜：往往會更滿足B端產品的實際需求，對于組件有更深的認識
通過我的分享能夠給大家有一個初步的認識，當然整個組件都是基于我平時的設計觀察與使用，目的也是想和大家分享、避避坑，如果有什么疑惑，歡迎在評論區我們一起討論~
樹形選擇在B端系統當中的出現頻率非常高，比如我們常見的：表格、表單、各類詳情頁，只要涉及到 層級結構的選擇，都會有它的身影（注意，這里主要說的是樹狀的選擇類組件）但是作為設計師，樹形選擇在使用的過程當中，會出現很多意想不到問題
尺寸無法確定
因為樹形選擇本身這個組件的特殊性，它的大小需要通過內容當中的高度與寬度共同決定，而在設計過程當中，高度與寬度究竟為多少就要仔細的考慮
因為在使用樹形選擇時，需要思考每一個內容的具體尺寸，太高太低都不行
如果太低，展開樹形選擇就會非常的麻煩；如果太高，則在數據量較少的時候，會給人數據很空
橫向空間也是同理，也就造成了在設計時，需要深入思考
樹形選擇，作為基礎組件，在應付復雜的選擇需求時，很明顯的會感到“力不從心”，無論是從它顯示選中時的內容，還是大量的數據時的選擇難度，樹形在適用性上，都會大大降低，當遇到這類情況時，建議采取更多 “業務組件” 的方式來對選擇進行優化
分類表單（也可以叫Tab表單，不過只是代稱而已~）在B端產品當中也非常常見，它出現在復雜的表單當中，但是作為設計師，在真正去使用分類表單時，你就會發現會有非常多的問題需要我們去處理
對于用戶而言，分類表單不能夠完整的查看表單信息，每一個都需要來回切換。也就意味著填寫表單的時候，我們不能通過滾動查看所有數據，而是要去點擊每一個單獨的分類里面，通過分類了解具體的表單內容
同時必填項的提示，在分類表單也非常難以處理，因為其每一個獨立，而作為用戶，其實是不清楚具體哪一個分類里面有必填項，也會導致填寫的效率過于低下（其實會有處理的辦法，只是大家對于這類提醒都不太滿意）
分類表單在編輯狀態時，同樣難以處理。當提交完分類表單后，我們還需要考慮數據在詳情頁里的展示形式，因為表單與詳情頁的映射關系，這時候在設計時，應該提供某一分類下的數據編輯，還是整個分類表單的數據編輯？
其實這種情況，特別是初級B端設計師，處理起來也是非常棘手
頂部導航非常特殊，雖然在我之前 導航菜單 的文章當中提到過，但在使用頂部導航的過程當中，還是會面臨很多問題
頂部導航最大的局限性便是展示數量太低，畢竟在空間布局當中，橫向空間與縱向空間的差異其實是非常大的，頂部導航的高度設定不能過高，同時 二級、三級菜單 只能夠使用下拉菜單，也就導致在導航菜單的設計當中局限性過大，并且項目一旦發展過后，不容易解決問題
當然，頂部導航并不是一無是處，在許多工具型產品、官網 當中，頂部導航都有著它的一席之地，其實這類形式，更多是以內容為主的網站結構，才會采取頂部導航，也就是上下結構會更加合理
柵格嚴格意義上來講不算是組建，但是由于很多設計師 誤用、亂用，導致設計師為了柵格而柵格
因為在常見的移動端設計當中，是不存在柵格（主要是移動端橫向空間小，使用不頻繁）
在桌面端的設計當中，并不是說柵格不好，而是很多時候設計師使用柵格往往會非常盲目，舉一個簡單的例子，在表格當中是否需要使用柵格？
答案是：“不用使用柵格”，其實這類問題就是目前很多設計師的問題，因為會盲目使用，也就導致了我在做設計的過程當中，出現很多為了柵格而柵格的現象。后面有時間單獨總結一下柵格主要運用在哪些地方，希望大家別盲目使用
至于柵格應該如何使用，在我之前的文章當中都有提到，可以自行點擊歷史記錄查看
滑動輸入條在很多概念設計當中都會經常出現，特別是在 Dribbble 上的桌面端設計當中，是每一個設計師的標配，但是在實際的B端項目中，特別是桌面端的B端系統當中，滑動輸入條是非常不合理的一個組件
因為B端產品當中，大多數的產品都是需要精準錄入，并且數據的區間非常大，因此也就造成了滑動輸入條，使用起來給用戶的感受是非常糟糕的，并且由于大多數用戶的預期還是以直接輸入為主，這也就造成了現如今B端產品很見到滑動輸入條的原因
面包屑導航在實際工作當中經常使用，因為在常見的B端系統當中，導航菜單以及信息結構，一定是非常復雜的（除非你的系統里面就只有一級導航菜單，并且沒有其他的頁面層級邏輯）
因此通過面包屑導航，能夠讓我們清晰知道整個頁面的信息結構，通過面包屑又因為其 小巧、靈活，無論你是在一個完整大頁面當中，又或者是一個小的氣泡卡片當中，面包屑都能進行承載，并且它還能夠起到 返回 的作用，又能夠清晰的展示頁面的路徑信息，是一個可以一舉多得的組件
穿梭框相比大家的不會陌生，在設計B端產品的時候，或多或少都會有所涉及，與此同時，由于穿梭框本身復雜，再加上很多設計師會覺得它占比過大，因此不會去使用
今天安利穿梭框，其實是想安利這一類的穿梭類的組件，你會發現其實很多業務選擇類的組件都會通過穿梭框的形式進行演變，比如我們常見的“國家城市選擇、部門成員選擇” 甚至表格當中的字段顯示隱藏設置，這些都是傳統的數據選擇過后一步一步演變而來，因此這類穿梭框型的數據選擇
其實更加體現的是設計師基于目前的組件所進行的優化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由
折疊面板就像一個大的“盒子”，當產品經理在你的身后說著：“這個信息我要放，那個信息也不能落下的時候”，拖出一個折疊面板來解決這個問題
其實在折疊面板的使用過程中，主要是在詳情頁以及表格當中，因為折疊面板本身可以容納很多信息，并且能夠交代具體的層級關系，因此使用折疊面板能夠有更多展示數據的可能性，即插即用，非常方便
在頁面當中的任何地方，蹦出一個氣泡卡片你都不會感到奇怪。其實氣泡卡片我在日常設計當中，經常使用的一個組件，因為它能夠容納下任意的內容，小到一串文字、大到一個視頻，都能夠在氣泡卡片當中進行使用
并且在信息當中，氣泡卡片作為一個信息補充的組件，因此在系統當中，需要展示但是又不是那么重要的信息，使用氣泡卡片，就會更加的方便
最后一個，自然逃不掉我們的錨點導航。感覺在我的瘋狂安利下，越來越多的產品都開始使用錨點導航。因為B端產品必定是復雜且多的信息，自然而然我們在使用的過程當中要更多考慮信息的承載
作者：CE青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設計，一起來學習吧。
從Instagram和Facebook這樣的社交媒體應用到亞馬遜這樣的電商平臺，卡片設計似乎是無處不在的，這些大廠廣泛應用使得卡片設計很快流行了起來。
作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有UI元素?；谶@些內容，卡片設計可以根據不同的設備和屏幕調整其大小，平衡界面視覺和用戶體驗。
卡片是一個UI組件，包含了某一個內容的信息和操作?？ㄆ梢园鞣N元素，但它們都應該屬于同一個主題。
這樣做的目的是為了避免冗長的文字，并呈現更多的內容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內容。卡片是模塊化的，所以不同的內容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容，而無需擔心設計會變得雜亂無章。
卡片可以將內容分解成易于理解的小塊，以便用戶與之互動。通過給內容一個容器，卡片向用戶表明內容是真實和感性的。
卡片 UI 設計流行的原因還有很多：
直觀：卡片在界面中看起來與現實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前，它們在現實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來，就像在現實生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設計師優先考慮其內容。不同的是，每張卡片都變成了易于閱讀的內容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內容。
有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。
有利于響應式設計：卡片是矩形的，可以平滑地調整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統一的體驗。
便于分享：卡片可以鼓勵用戶在社交媒體上分享內容，因為它允許用戶只分享特定的內容，而不是整個頁面。
什么時候應用卡片設計？
這通常是當你有:
基于搜索的界面: 卡片能通過模塊的內容快速顯示合適的內容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O計是一種非常適合呈現這類內容的方式。
信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
類似項目：卡片最適合于異構項目的集合（當并非所有內容都是相同的基本類型時）。
可視化分析: 儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創造出更明顯的差異，其中每張卡片可以適應不同的角色。
卡片的布局可以不同，以支持它們包含的內容類別。下面的組件通?？梢栽诙喾N卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。
(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(4) 行動按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
(6) 圖標: 卡片可以包含操作圖標。
有一些小的技巧可以快速提高卡片設計細節。
1. 使用相關主題的圖片
圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內容主題相關。
2. 增加視覺層次
卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部，并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。（彩云注：視覺層級對于信息表達至關重要?。?nbsp;
3. 限制內容長度
一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節，而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內聯鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區分操作主次
包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。
6. 去掉分割線
對于新手設計師來說，用分割線來區分內容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次，這有助于我們區分UI元素。
然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設計案例：
信息流中的卡片設計
保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設計
他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發布的內容是否適合他們。
電商卡片設計
產品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意，激發人們獲得產品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。
由Webpixels設計
產品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產品配圖來設計完美的產品卡片。
如果產品有特價，不僅要在價格欄中注明促銷價格，還要注明常規價格，以及客戶可以節省多少錢。
個人中心卡片設計
簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發揮重要作用。
由Neelesh Chaudhary設計
就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業)，讓你的“關于”頁面有剩余的細節來完善你的個人資料。
儀表盤卡片設計
儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。
由Simmmple設計
儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI，允許用戶精確地控制哪些數據需要在儀表板的前端做好。
只包括最相關的信息，為用戶使用方便。當你的數據集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
日常計劃卡片設計
看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。
由Neelesh Chaudhary設計
卡片上包含的信息包括任務的名稱和重要的細節，如任務的類型和誰擁有它?？窗蹇ǚ旁跔顟B類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”，但是狀態可能因項目而異。
卡片結構最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。
有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動?？ㄆ谔峁┰S多不同種類內容摘要的環境中尤其有效，而不是簡單地作為內容列表的現代替代品。
作者：彩云Sky 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計的小編 http://www.syprn.cn