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