如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個小小的細節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗?zāi)夸洠?/strong>
01. 【剪映】化繁為簡，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡化界面跳轉(zhuǎn)的“批量編輯”
03.【必剪】軌道按鈕文案自適應(yīng)滑動跟隨
04.【剪映/IOS】首頁新增（試試看）教程專區(qū)板塊，快速入門軟件
05.【剪映】“剪同款”功能，讓用戶快速出片
06.【剪映】上滑升起列表，讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊，分區(qū)展示
08.【剪映】選中特效后，自動播放（特效預(yù)覽效果）
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產(chǎn)品體驗：
在此前，用戶想要對視頻進行剪輯操作，用戶大多都需要使用電腦的Ae、Pr等剪輯軟件，此類軟件體量大，操作門檻高，而且需要有電腦的存在，在人手一臺智能手機的今天，剪映等專業(yè)剪輯APP的出現(xiàn)，填補了用戶需要在手機上進行視頻剪輯的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等專業(yè)剪輯軟件的界面特點（畫面軌道，音頻軌道），也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于，它將專業(yè)剪輯軟件的復(fù)雜，位置隱蔽，但又常用的剪輯操作。「整合」成為底部一個個顯眼的功能圖標(biāo)，并且用極為精簡易懂的文案，對功能進行了一個充分的描述。這一舉動，大大降低了用戶對剪輯軟件復(fù)雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡單易懂的交互體驗，也大大提高了用戶的黏度，忠誠度。讓小白用戶接觸了剪映后，再也無法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機器輔助，機器完成，需要人效的地方越來越少，在這大背景下，我們軟件的用戶只會變得越來越懶。
在新時代的背景下，我們UI、交互設(shè)計師，需要一種寶貴的「化繁為簡」能力，在不影響最終呈現(xiàn)效果的前提下，將一個軟件的交互體驗，文案、功能理解，以及功能使用操作做得越簡單，用戶的黏度，忠誠度就會越高。
一個工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡，成效依然”
產(chǎn)品體驗：
在剪映中，識別字幕的交互邏輯，是自動識別所有視頻片段的語音，并且插入時間線中，識別字幕是【批量進入時間軸】的。所以想統(tǒng)一進行編輯，得一個個反復(fù)選中，然后逐一檢查，這種累人的交互體驗，讓用戶用了第一次就不會想用第二次。
剪映推出了「批量編輯」交互功能。
語音識別后，用戶點擊其中一個識別字幕，底部第一個功能就是「批量剪輯」功能，點擊后，可以一鍵編輯全體的識別字幕內(nèi)容，減少了用戶調(diào)整識別字幕是的操作交互時間，增加了用戶操作效率
設(shè)計思考：
在產(chǎn)品的功能交互設(shè)計中，不妨使用剪映的「整合思維」，將一些重復(fù)性高，標(biāo)簽統(tǒng)一，可統(tǒng)一操作的元素整合在一個功能中統(tǒng)一編輯，減少用戶的操作切換與跳轉(zhuǎn)，增加用戶的交互體驗與操作效率
產(chǎn)品體驗：
在必剪中隨著用戶左右移動，軌道按鈕的文案也會跟隨移動，讓用戶無論滑動到何處，什么位置，都能清晰的知道軌道的應(yīng)用名稱，而不會出現(xiàn)混淆的情況。最大程度上，減輕了用戶的理解成本
設(shè)計思考：
當(dāng)我們的圖標(biāo)，功能板塊，或者某些重要信息，被用戶左右、上下滑動導(dǎo)致超出屏幕展示區(qū)域，用戶想回頭找到這些元素，就得重新滑動到對應(yīng)位置，走一趟“回頭路操作” 。這對用戶來說其實是不便捷的，對交互設(shè)計來說，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來舉一反三，讓一些重要的功能，信息區(qū)域，隨著用戶的滑動而自適應(yīng)跟隨，最大限度地保證用戶他不錯過這些重要的功能、信息。
產(chǎn)品體驗：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時候，其實都是感到陌生的，新手指引雖然能一定程度解決此問題，但是新手引導(dǎo)只能在第一次打開APP時展示，而且新手指引有非常強的局限性，它只能告訴能這功能要怎么用，而無法告訴你這功能的使用場景。
所以在首頁中新增一個軟件使用技巧、教程專區(qū)，可以讓有需要的用戶第一時間觀看課程，入門軟件，而且課程用戶可反復(fù)觀看，不像新手指引般一次性展示。
這種交互體驗，大大減輕了用戶入門軟件的難度。
設(shè)計思考：
在我們設(shè)計的產(chǎn)品是一個工具型軟件，且有一定入門、使用難度的時候，不妨參考一下【剪映】的首頁+軟件使用教程 的交互思維。
用最低成本教會用戶如何使用這個軟件，而且展示位置是每次打開APP時都會看到的首頁，不用擔(dān)心一些粗心的用戶錯過。
產(chǎn)品體驗：
在剪映Tap欄中，有一個 “剪同款” 功能，選中對應(yīng)的視頻模版后，填入自己相冊的素材，聽過自動剪輯，特效覆蓋，自動填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設(shè)計思考：
在流量為王的時代，內(nèi)容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內(nèi)容輸出效率大大提高，將輸出內(nèi)容的過程簡單化，無腦化，用戶無需再去想用什么創(chuàng)意，視頻用什么BGM，以及視頻特效如何制作，這些都由APP的模版設(shè)計師幫你搞定，用戶需要做的，就是提供出自己的素材即可。
這給予了我們產(chǎn)品設(shè)計師一個啟發(fā)，在我們設(shè)計產(chǎn)品時，是否也能關(guān)注一下，急需內(nèi)容輸出，但內(nèi)容輸出困難的領(lǐng)域呢？也能把一些可自動化實現(xiàn)的步驟（如特效，BGM，字幕等等），交給系統(tǒng)，用戶只需參與拍攝或提供一小部分素材，即可生成一條優(yōu)質(zhì)的內(nèi)容。解決用戶輸出內(nèi)容痛點，從而留存用戶數(shù)量，從而實現(xiàn)用戶量變現(xiàn)。
產(chǎn)品體驗：
在剪映APP中，一些展示選擇列表的功能中，用戶上滑，列表都會隨之升起，讓用戶可以更直觀的查看選中其中內(nèi)容，大大增加視覺傳達效率。
讓用戶不會被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產(chǎn)品功能成效效率
設(shè)計思考：
當(dāng)我們的瀏覽窗口，因UI布局高度受限時，設(shè)計師可以通過【窗口隨著滑動響應(yīng)移動】的交互方式，使得界面UI交互更多變幻，更為靈活。
產(chǎn)品體驗：
在剪輯APP中，難免會有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒有分區(qū)思維，那么整個剪輯軌道將會變得雜亂不堪，用戶用久了看到各種軌道模塊，也會疲勞過載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區(qū)展示，在用戶點擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點擊【特效】功能后，才展示對應(yīng)的【特效模塊】軌道
設(shè)計思考：
在我們面對多種不同類型，但是作用相同對象的作用對象時，利用交互思維，在UI界面上進行視覺分類很重要，否則你整個APP的操作界面將會雜亂無章。
剪映給了我們一個很好的參考，就是將不同種類的對象 【分區(qū)展示，分區(qū)管理，分區(qū)操作】，最大限度的保證交互界面的簡潔舒適，且分類也能讓用戶更好的“點對點”進行操作，節(jié)省尋找對應(yīng)操作對象的時間，所以，分類思維 是目前作為交互設(shè)計師的一項必不可少的技能了。
產(chǎn)品體驗：
在剪映APP中，當(dāng)用戶選中特效，系統(tǒng)會自動播放【特效預(yù)覽效果】，且自動暫停（如特效時長3s，那么系統(tǒng)播放完3s特效效果后會自動暫停，不會繼續(xù)播放）
用戶可以直接了當(dāng)?shù)夭榭刺匦c畫面融合的效果，而不用選中后，再點擊播放預(yù)覽效果，覺得效果不滿意，還得反復(fù)切換。這種交互方式，大大節(jié)省了用戶的選擇模版時間，讓其成為（選擇+預(yù)覽=選中） 的高效交互流程
設(shè)計思考：
在我們設(shè)計一些需要實時預(yù)覽的功能時，我們不妨參考一下剪映的（選擇+預(yù)覽=選中）的高效交互流程，讓用戶免去反復(fù)操作預(yù)覽，重復(fù)選擇的無效交互，提升用戶在工具型APP的內(nèi)容輸出效率
產(chǎn)品體驗：
當(dāng)用戶在剪映中喚起濾鏡功能列表時，難免會感到驚訝，以及提出疑問：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細思考，并付出實踐你就會明白，剪映在濾鏡列表中，使用單行瀏覽的原因。
因為用戶對濾鏡的選擇，是出于此濾鏡的畫面效果，所以展示濾鏡效果時，濾鏡效果圖的比例大小是否清晰顯得尤為重要，所以，剪映犧牲了一些瀏覽效率，但是大大保證了用戶對此濾鏡的瀏覽精讀。
另外，濾鏡列表不同于特效列表，具有大量重復(fù)圖片填充。濾鏡幾乎每張?zhí)畛涞膱D片都是有所不同的，所以使用多行列表式排列，在多種不同顏色，不同風(fēng)格的圖片填充下，畫面會變得雜亂不堪
設(shè)計思考：
當(dāng)我們遇到，填充圖片風(fēng)格各異、或者注重展示畫面的列表設(shè)計時，可以參考剪映，犧牲一下瀏覽效率，保證瀏覽舒適度，精讀的設(shè)計方式，來防止我們設(shè)計的列表在視覺交互上顯得雜亂無章
作者：堅行 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計公司。
追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計也是今年追波設(shè)計流行趨勢之一。
MetroUI是Windows8的界面設(shè)計語言，在2010年至2013年間曾經(jīng)風(fēng)靡一時，那也是移動互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國家推行實體經(jīng)濟、數(shù)字化帶動To B 、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實現(xiàn)B端產(chǎn)品與C端設(shè)計風(fēng)格的傳承與銜接，你會發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無愧。
最后來看下按鈕的設(shè)計，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設(shè)計重功能和交互體驗，視覺點到為止的設(shè)計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
字體三原則：可讀性、易識性、易讀性。當(dāng)你同時讀一篇文言文和一篇設(shè)計文章，肯定設(shè)計文章的內(nèi)容可讀性更好。易識性是用在字體設(shè)計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設(shè)計師都息息相關(guān)，因為我們都需要編排文本。當(dāng)我們小時候?qū)懽魑臅r，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性。可以在相關(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一，第一個設(shè)計目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實書寫的感覺。之前很多帶有簽名的設(shè)計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產(chǎn)生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計師編排的順序進行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應(yīng)的熱點圖。
多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達和豐富畫面的，多彩高斯?jié)u變風(fēng)其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達信息需要去設(shè)計與內(nèi)容相匹配的視覺風(fēng)格。
B端設(shè)計的火爆帶動了B端相關(guān)模塊設(shè)計，更多的人也愿意嘗試B端相關(guān)模塊設(shè)計，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計已經(jīng)不再是假大空概念設(shè)計，而是一套實用美觀可落地的設(shè)計。
儀表盤設(shè)計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺界面的儀表盤設(shè)計也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個人信息、報表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報表數(shù)據(jù)，團隊收益、任務(wù)進度、轉(zhuǎn)化比例、新增、存量、團隊工作時長等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個公司業(yè)務(wù)不同、每個人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級系統(tǒng)性去思考和設(shè)計。
復(fù)雜的事情簡單化，簡單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動化。流程設(shè)計是每一個企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計的難點，需要對業(yè)務(wù)高度抽象，讓每一個業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計。
B端C化是B端產(chǎn)品設(shè)計的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計的視覺靠齊，國內(nèi)B端產(chǎn)品界面設(shè)計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務(wù)的發(fā)展，B端產(chǎn)品也開始移動化、智能化，國內(nèi)主流還是通過小程序、H5來現(xiàn)實B端產(chǎn)品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個性化管理系統(tǒng)，輕松實現(xiàn)多元業(yè)務(wù)場景的數(shù)字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時直接選擇使用模版，綁定對應(yīng)的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業(yè)流行帶動的。B端講的更多的是企業(yè)對企業(yè)。企業(yè)對企業(yè)除了講行業(yè)解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司，國內(nèi)的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計趨勢。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個技法”，完全能滿足UI設(shè)計師。當(dāng)然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權(quán)，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設(shè)計中趨于穩(wěn)定的位置。從寫實到扁平再到輕擬物，其實是設(shè)計師們一路不斷探索的結(jié)果。本質(zhì)就是光影對形體產(chǎn)生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個部分的處理。寫實三維的圖標(biāo)等設(shè)計更適用于簡潔的畫面中，扁平等設(shè)計更適用于復(fù)雜一點的界面中，比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡單且出彩。
簡潔設(shè)計遵從了密斯·凡德羅的“少即是多”的設(shè)計原則，在B端產(chǎn)品界面中更加需要簡潔設(shè)計，我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮啙嵙??；氐浆F(xiàn)實當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡潔是設(shè)計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數(shù)據(jù)說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B端產(chǎn)品視覺設(shè)計C端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺設(shè)計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名UI設(shè)計師一定會經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計的過程，品牌設(shè)計的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計的技巧對產(chǎn)品定位、品牌宣傳打下扎實的基礎(chǔ)。
暗黑模式的設(shè)計是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設(shè)計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計準(zhǔn)則，即正文和背景之間的對比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測試界面的對比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產(chǎn)品設(shè)計中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計師一生中最寶貴的經(jīng)驗之一，它能提高設(shè)計師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計就是將產(chǎn)品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
插畫作為設(shè)計的一大品類，不同的插畫師都有自己擅長的風(fēng)格，本質(zhì)是都有自己的個性，但是在產(chǎn)品設(shè)計中更多是需要共情、共性來講故事，表達產(chǎn)品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計類的插畫風(fēng)格。設(shè)計的本質(zhì)是舊元素的重新組合，插畫不會過時，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計風(fēng)格。
幾何插畫算是插畫簡化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達出簡潔、科技的現(xiàn)代感。難點還是在人物形態(tài)的表現(xiàn)上，平時多練習(xí)練習(xí)速寫還是很有必要的。
線面插畫最近一兩年非常流行，準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時某些結(jié)構(gòu)會表現(xiàn)不出來，這時候用線條簡單勾勒后，結(jié)構(gòu)就會清晰明了。其次當(dāng)線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計，微交互和動效設(shè)計是繞不開的，UI界面設(shè)計通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細微的動效更能調(diào)動用戶情緒，取悅用戶。C端產(chǎn)品微交互和動效已經(jīng)很成熟了，一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動效的設(shè)計價值，共同打造產(chǎn)品體驗細節(jié)。
Mg動畫需要很好的節(jié)奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉(zhuǎn)場動畫更加自然，MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環(huán)會讓人更加印象深刻。
MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)該場景還是需要有較大留白空間的界面，因為三維圖標(biāo)太小后就看不到更多細節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個更好的問題上？設(shè)計師應(yīng)該保持開放多元的視角。設(shè)計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設(shè)計價值。
為什么輕三維在界面設(shè)計中占有一席之位？一個是設(shè)計師不斷追求差異化的產(chǎn)物。另一個是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環(huán)境光更佳出彩。
P4D是PS加C4D的設(shè)計表現(xiàn)技法，也是視覺設(shè)計的最后一個環(huán)節(jié)，通過PS對C4D的渲染圖片進行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強大的合成功能，將渲染圖片與圖片素材進行合成，來表現(xiàn)畫面的視覺度，當(dāng)然三維軟件比較難實現(xiàn)的水、粒子、煙花等效果，也可以通過PS的后期合成來實現(xiàn)，這也是P4D的強大之處。
卡通IP設(shè)計最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動態(tài)）調(diào)色。
卡通IP火的本質(zhì)更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于UI設(shè)計師來說學(xué)習(xí)是有成本的，暫時并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計差異化的角度來看三維視覺確實有一定的競爭力。
C4D三維場景動畫通過構(gòu)建實物和場景模擬生活中的現(xiàn)實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優(yōu)勢是通過動力學(xué)和表達式來模擬真實感，未來在AR/VR領(lǐng)域會有更好的發(fā)展。相對于界面動效學(xué)習(xí)成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學(xué)還是有一定的優(yōu)勢。
作者：水手哥。 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統(tǒng)一的標(biāo)準(zhǔn)流程，每個公司和設(shè)計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內(nèi)容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構(gòu)思：通過頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設(shè)計。
傳統(tǒng)的問題解決采取有條不紊而又科學(xué)的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設(shè)計思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來結(jié)果和/或創(chuàng)造性的問題解決方式，它應(yīng)該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設(shè)計思維來源于常規(guī)問題解決方法，常規(guī)問題解法是設(shè)計思維的基礎(chǔ)。
從解決問題到設(shè)計思維，Liedtka (2013)
結(jié)果發(fā)現(xiàn)，設(shè)計思維實際上也是一個解決問題的過程，而不僅僅是一個創(chuàng)新過程（ 利特卡，2013）
一個例子是，豐田采用設(shè)計思維從頭開始分析其西海岸的一個客戶聯(lián)絡(luò)中心，在重新設(shè)計過程中，組建了一個由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務(wù)中心體驗。
我們每天都會遇到問題，但是當(dāng)我們解決同樣的問題時，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語：“設(shè)計思維”，并將多年來醞釀的方法和想法封裝成一個統(tǒng)一的概念。
設(shè)計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問題的方式有其設(shè)計思維的基礎(chǔ)。
設(shè)計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計思維?！?他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學(xué)家 Don Norman 加入 Apple 團隊，擔(dān)任他們的用戶體驗架構(gòu)師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設(shè)計”這個術(shù)語，因為他想“涵蓋人們對系統(tǒng)體驗的所有方面，包括工業(yè)設(shè)計、圖形、界面、物理交互和手冊。” 從那時起，這些領(lǐng)域中的每一個都將用戶體驗，擴展到了自己的專業(yè)領(lǐng)域。
設(shè)計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設(shè)計理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來描述本質(zhì)上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關(guān)，因此這是一個需要設(shè)計思維的持續(xù)過程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問題。
設(shè)計主題的范圍是普遍的，因為 設(shè)計思維可以應(yīng)用于人類經(jīng)驗的任何領(lǐng)域。
它可以用于：
符號和視覺傳達：這包括平面設(shè)計的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務(wù)：包括對物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時間表，以達到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計思維起源于設(shè)計師的培訓(xùn)和專業(yè)實踐，但這些原則可以被每個人實踐并擴展到每個活動領(lǐng)域。（布朗，2013 年）
在企業(yè)中，設(shè)計過程可以為企業(yè)環(huán)境中的問題解決帶來創(chuàng)新思維。它還可以用于醫(yī)療保健，通過向護士、醫(yī)生和管理人員教授設(shè)計思維技術(shù)，我們可以激勵相關(guān)從業(yè)者貢獻新的想法。
不管是什么設(shè)計，理解和研究問題是必不可少的，因為我們能夠從其出發(fā)，從而進行以用戶為中心的設(shè)計。
設(shè)計思維的最早階段是搞懂你能帶來的情感價值。設(shè)計思維方法迫使你停留在提問與質(zhì)疑階段，而不是準(zhǔn)確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設(shè)計思維方法迫使你真實地存在于這個不清楚、有時還非?；靵y的時刻，從而使你對要解決的問題產(chǎn)生更好的理解。（利特克，2013）
傳統(tǒng)的問題解決涉及提出一個解決方案，但設(shè)計思維首先使我們發(fā)散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說法，設(shè)計思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計思維也可以通過實踐來教授和改進。
設(shè)計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設(shè)計師試圖將問題與過去的類似案例聯(lián)系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創(chuàng)造力作為一種實驗思維形式來產(chǎn)生新的想法。使用決策矩陣對這些想法進行評估，從而會產(chǎn)生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復(fù)該過程。這是一個迭代過程，即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計過程，源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設(shè)計思維的另一種視角 —— 即設(shè)計師應(yīng)該預(yù)料到會“很快失敗或經(jīng)常失敗”（布朗，2009）。
當(dāng)過程早期發(fā)生故障時，例如被拒絕的原型，實質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點與傳統(tǒng)的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設(shè)計思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個設(shè)計工作室聘請了 1600 名設(shè)計師，并且正在培訓(xùn)數(shù)以萬計的設(shè)計師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計思維為我們解決問題添加了以人為本的元素。當(dāng)我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計思維實踐，通過有效使用設(shè)計和設(shè)計思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計算出的 ROI 超過 300%。
由于復(fù)雜的問題從來不能被所有人完全理解，因此在嘗試設(shè)計解決方案時，處理歧義和多個并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計思維通過綜合和歸納思維，幫助實現(xiàn)質(zhì)的飛躍。它允許通過解構(gòu)來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經(jīng)過仔細觀察，設(shè)計者才能根據(jù)真實消費者行為中看到的東西來識別問題，而不是簡單地根據(jù)對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ妴栴}的創(chuàng)新解覺方法。
根據(jù)大多數(shù)設(shè)計學(xué)院的說法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創(chuàng)新并非來自漸進式調(diào)整。設(shè)計思想家以創(chuàng)造性的方式提出問題并探索限制因素，并朝著全新的方向發(fā)展。
協(xié)作：產(chǎn)品、服務(wù)和體驗日益復(fù)雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當(dāng)我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設(shè)計師利用文科和技術(shù)理論，整合多個領(lǐng)域的知識以找到創(chuàng)新的解決方案，我們采用設(shè)計思維來獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設(shè)計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國），另一所位于美國斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計思維培訓(xùn)，因此該研究重點關(guān)注這些國家，以尋找早期實施者。
設(shè)計思維通常涉及希望參與整個設(shè)計和開發(fā)過程的龐大利益相關(guān)者團隊。
觀點、才能和經(jīng)驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計思維的協(xié)作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時，它不是什么花哨的設(shè)備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現(xiàn)場進行測試為用戶提供了比較的基礎(chǔ)參考，同時也有助于揭示某些需求。
為了創(chuàng)新，設(shè)計思維意識到認知和行動對創(chuàng)新過程很重要。認知包括接受度、樂觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設(shè)計、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險、模棱兩可和風(fēng)格的改變，實施起來就會變得更加困難。它會被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計思維的模糊性，它與組織文化相沖突。
據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計思維之所以不會是最優(yōu)選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫(yī)療保健等規(guī)避風(fēng)險的行業(yè)和公司中，“經(jīng)常和早點失敗”的方法被認為是非常困難的。
許多設(shè)計師反對設(shè)計思維這一觀點，設(shè)計思維不僅關(guān)乎一個過程，而且關(guān)乎改變思維過程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計思維”的推廣已被大型全球公司用來增加業(yè)務(wù)。不過，在更廣泛的設(shè)計世界中，我甚至?xí)f“設(shè)計思維”的過度宣傳導(dǎo)致了所提供設(shè)計質(zhì)量的下降?！?Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會助理教授 Lee Vinsel 在《設(shè)計思維運動是荒謬的》中寫道，“歸根結(jié)底，設(shè)計思維與設(shè)計無關(guān)。這與文科無關(guān)。這與任何有意義的創(chuàng)新無關(guān)。如果這意味著重大的社會變革，那肯定不是關(guān)于“社會創(chuàng)新”。這是關(guān)于商業(yè)化的。”
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動，可以為你提供有關(guān)人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設(shè)計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設(shè)計者能夠推斷這些經(jīng)歷的無形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務(wù)機構(gòu)。起初的問題似乎是設(shè)計不當(dāng)?shù)纳攀巢藛?。然后設(shè)計思維揭示了無數(shù)問題，所有問題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對服務(wù)進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
作者：用盡晴天來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計師都可以百分百地弄明白對話框這個概念。這篇文章是對「對話框」的一個簡單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。
01
了解對話框
對話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進來，在對話中它給出消息或要求輸入。
當(dāng)用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個對話框便消失了，把應(yīng)用的主窗口交還給用戶。
關(guān)于對話框的概念，以下是百度百科的解釋：
對話框越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動設(shè)備中。它可以保留用戶當(dāng)前進程的情況下，指引用戶完成一個特定的操作 。
按照對話框的交互方式，可將其分為「模態(tài)[1]對話框」和「非模態(tài)對話框」。我們可以把他們看作是兩個小家族，模態(tài)家族的人比較強硬，而非模態(tài)家族的人相對溫柔一點。兩個家族的主要區(qū)別：是否強制用戶對其進行回應(yīng)。
模態(tài)對話框：是位于瀏覽器的主頁面核心區(qū)域，需要用戶對它做出相應(yīng)交互，模態(tài)才會消失。而對話框會因為自身的吸引程度、停留時間、信息量承載多少被劃分為多種對話框類型進行區(qū)分，常見的對話框分別為：普通對話框、內(nèi)嵌表單對話框、分步表單對話框、文件選擇對話框、復(fù)雜信息展示對話框。
△ 何時使用模態(tài)對話框
1）在重要的警告時使用，避免出現(xiàn)嚴(yán)重問題、或修正已出現(xiàn)的問題。
例如：用戶錄入信息后未保存就要關(guān)閉時，彈出模態(tài)對話框提示用戶保存。
2）在需要用戶輸入信息或進行某操作，才能繼續(xù)當(dāng)前流程的時候使用。
例如：在使用Canva資源網(wǎng)站時，點擊“上傳”會彈出模態(tài)化的登錄/注冊窗口，引導(dǎo)登錄/注冊后使用。
3）用來將復(fù)雜流程拆分成簡單步驟。
例如：Teambition-分步驟的模態(tài)對話框式創(chuàng)建項目。
4）用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。
例如：在轉(zhuǎn)賬場景中，如果先復(fù)制一個賬號，打開手機銀行APP（以招商銀行或平安口袋銀行為例），系統(tǒng)會通過模式對話框詢問用戶是否向這個賬號轉(zhuǎn)賬，這樣的設(shè)計做到了預(yù)判用戶行為，節(jié)省用戶后面的操作成本。
非模態(tài)對話框：與模態(tài)完全相反，它更加溫和，不會強制打斷用戶正在進行的現(xiàn)有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態(tài)對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。
△ 何時使用非模態(tài)對話框
1）在獲取與當(dāng)前流程不必要信息的時候使用。
例如：平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。
2）不打斷重要流程中使用。
例如：在平安口袋銀行APP中購買理財時，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。
簡單來說，兩者的優(yōu)缺點見下表：
02
從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標(biāo)導(dǎo)向的角度來看對話框，對話框要傳遞的信息的常見應(yīng)用場景主要有以下五種：
屬性對話框是向用戶呈現(xiàn)或讓用戶改變所選對象的屬性或者設(shè)置。一般來說，在屬性對話框中，用戶可以修改當(dāng)前的選擇，也可以設(shè)置應(yīng)用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性，屬性對話框常見在一些設(shè)置、詳情中。
例如：Windows 11系統(tǒng)的設(shè)置界面，可設(shè)置系統(tǒng)的全局屬性。
功能對話框通常從菜單中打開，是最常見的模態(tài)對話框，只控制單一功能，如打印、文件上傳/導(dǎo)入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個動作，而且也允許用戶設(shè)置動作的細節(jié)，屬于模態(tài)對話框。
例如：瀏覽器的打印功能，會彈出模態(tài)化的打印窗口，用戶可設(shè)置打印的細節(jié)。
例如：飛書的文檔導(dǎo)入功能，使用模態(tài)化對話框，引導(dǎo)用戶選擇文件類型或進行批量導(dǎo)入操作。
進度對話框是由應(yīng)用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能，其他功能的處理能力可能會降低。
每個進度對話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息：
例如：使用Axure軟件導(dǎo)出html文件時的進度提示，既提醒用戶當(dāng)前Axure正在運行，又告知用戶當(dāng)前文件導(dǎo)出進度。
例如：使用Sketch軟件導(dǎo)出文件時的進度提示
通知對話框?qū)⒁恍┲匾畔蟾娼o用戶。來源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。
常見的有通知中心對話框，處理完成某個操作的告知等等。
例如：花瓣的通知提醒
例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態(tài)對話框方式。
公告對話框，和進度對話框一樣，由應(yīng)用程序直接啟動，不是由用戶請求發(fā)起的。公告對話框有三種：錯誤、警告、確認。
這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認]，或者[OK]。
屬性、功能、進度對話框，是用戶主動請求的--它們?yōu)橛脩舴?wù)。但是，應(yīng)用程序發(fā)起的公告對話框--它們?yōu)閼?yīng)用程序服務(wù)，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。
03
我們可以從應(yīng)用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現(xiàn)頻率。
解決用戶錯誤的方法不是指責(zé)用戶，讓用戶再認真一些，或者給他們更多的指導(dǎo)練習(xí)，而應(yīng)該優(yōu)化應(yīng)用設(shè)計，讓犯錯變得困難。
示例：登錄藍湖時的短信驗證碼輸入框
示例：轉(zhuǎn)賬時輸入金額的數(shù)字鍵盤，金額大小的位數(shù)提示；平安口袋銀行的身份證號專屬鍵盤。
示例：輸錯密碼是一個很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現(xiàn)錯誤頻率。
示例：在支付寶聊天窗輸入一串?dāng)?shù)字，支付寶發(fā)現(xiàn)這個問題后，提供了識別后直接轉(zhuǎn)賬的功能，預(yù)判了用戶的慣性，減少錯誤發(fā)生。
Zoom - 拉會前預(yù)設(shè)值在加入會議室的界面，提前選擇是否在進入會議房間后“不自動連接語音”和“保持攝像頭關(guān)閉”，有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會議的意外尷尬。
在很多破壞性的操作都會二次進行提醒，讓用戶確認操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時候，是不是眼疾手快地按下那個「確認」按鈕？
這種對話框在沒有容錯處理時，非常容易被我們這種無腦按「確認」的用戶釀成大錯。比如我“手賤”只是試試這個刪除，然后就把某個表幾千條辛苦寫了一個月的數(shù)據(jù)刪掉了，由此可見系統(tǒng)的容錯處理有多么重要。
示例：Windows系統(tǒng)在早期的時候，刪除文件時會讓用戶進行二次確認，但這是完全沒必要的，因為刪除文件不是真正的刪除，還會在回收站里面。
Mac系統(tǒng)：在回收站刪除文件將是永久性刪除，此時的確認對話框才是對用戶有用的。
從對話框本身的設(shè)計優(yōu)化出發(fā)，我們可以對話框的使用場景和文案方面著手進行優(yōu)化設(shè)計。
其實什么時候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。
例如你在手機上買了一張電影票，支付失敗的結(jié)果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購買失敗，那么用戶極有可能當(dāng)場卸載你的產(chǎn)品。
模態(tài)彈框會打斷用戶當(dāng)前操作流程，所以「使用對話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊?，重要的信息優(yōu)先考慮使用對話框。
具體的使用原則有：
如果非要使用對話框，那么請使用友好尊重用戶的方式。當(dāng)我們說到人與人之間的交流時，語言是重要的媒介，而用戶與產(chǎn)品之間同樣如此。
在設(shè)計過程中應(yīng)始終努力設(shè)計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認為也是不必要的，糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗。例如以下幾種情況：
因此糟糕的提示文案設(shè)計會誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產(chǎn)生本末倒置的結(jié)果， 也給用戶帶來不佳體驗。
所以，語言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機的功能性關(guān)系轉(zhuǎn)化成人類的個人情感體驗。而這種用戶的情感體驗才能夠真正的彰顯品牌個性，從而與其他產(chǎn)品區(qū)分開來。
△ 錯誤提示設(shè)計三步法
總結(jié)：
對話框可以成為幫助用戶完成目標(biāo)的有用助手，而不是讓他們在每一步操守挫敗的可怕絆腳石。通過保持對話框的可管理性，并且只有在他們的功能真的屬于另一個房間的情況下才調(diào)用他們，你將很好地維持用戶的工作流狀態(tài)，保證他們會成功完成任務(wù)，并且滿懷感激。
前言
每當(dāng)臨近春節(jié)時，互聯(lián)網(wǎng)大廠的新年福利活動都會相擁而至，大家在各種活動中紅包拿到手軟。此時，百度APP的「好運中國年」系列活動也如期與大家見面，毫不吝嗇的把“好運”傳遞給每個用戶。
2019年至今，「好運中國年」已進行了五年，每年都會在品牌和玩法體驗上進行探索與創(chuàng)新，今年進行了更深入的打磨，給用戶一種“新”體驗。在設(shè)計理念上，通過具有科技感和年俗氣息的視覺創(chuàng)新，打造一場百度獨有的“科技廟會”；活動玩法方面，較以往也更加豐富，包括了百度經(jīng)典集卡玩法和多種紅包玩法，給用戶多元有趣的活動體驗。今年春節(jié)的活動周期比往年更長，近一個月的好運中國年讓用戶樂此不疲。
打造好玩好逛的科技廟會
活動初期，我們從產(chǎn)品、用戶、社會三個角度進行分析，確定活動的設(shè)計目標(biāo)。
百度APP是百度在移動搜索方向的核心產(chǎn)品，代表了百度先進的搜索技術(shù)能力，具備很強的科技屬性。今年團隊設(shè)計的重點目標(biāo)就是將活動與產(chǎn)品屬性相結(jié)合，因此今年開始嘗試打造「科技感」春節(jié)活動；好的活動體驗可以加深用戶對活動的記憶，為了讓用戶對「好運中國年」印象深刻，我們結(jié)合多種玩法營造科技廟會的氛圍；而這么多的活動需要一個“集合體”來承載，“它”既要多元又要契合團隊探索的有社會價值的年俗工藝，因此選用了“廟會”這個形式來承載。
經(jīng)過分析，最終確定以好玩好逛的“科技廟會”作為本次活動的設(shè)計理念，給用戶“新”的體驗感受。
來場對“科技廟會”的探索
“科技廟會”是什么樣子呢？通過將詞拆解的方法，以“科技”和“廟會”為關(guān)鍵詞進行思維發(fā)散，想象以什么樣的視覺來呈現(xiàn)今年的春節(jié)活動。
探索過程中嘗試AI繪畫，用新的科技手段輔助尋找靈感。
定調(diào)
經(jīng)探索，廟會的圖像特征越來越清晰，它是一場熱鬧的具有多元文化載體的文化現(xiàn)象，擁有像舞獅/臺戲/商鋪/古樓/燈籠/風(fēng)竹等事物，是民間藝術(shù)的結(jié)合體，描繪了老百姓新年期間的市井生活。
「科技感」則是一種視覺感知，既可以通過點、線、抽象圖形進行感受，是粒子、發(fā)光體、光環(huán)、全息；又可以通過機器人、移動設(shè)備、全息屏幕等具象物體體現(xiàn)，是圖形元素間的動態(tài)穿插或是一種變化發(fā)展的趨勢。
我們將射線、光環(huán)、粒子、全息圖像、速度感圖形等元素植入具有人文特征的廟會中，切入“科技廟會”主題風(fēng)格，進而確定視覺調(diào)性。
最終通過KV將探索的“科技廟會”視覺調(diào)性展示出來。打造出的視覺情緒是新奇熱鬧的，整體營造一場充滿科技氛圍的春節(jié)集市。以兔子形象IP為故事主體，講述一個“兔年春節(jié)逛科技廟會”的世界觀。通過“兔子舞獅”、“古鎮(zhèn)建筑”、“商品小攤”等元素來體現(xiàn)廟會，道路上的全息路標(biāo)、遠處向上延伸的科技立光、城市建筑上的懸浮光圈來增加科技感。
定義“科技特色”的品牌體系
從確定設(shè)計理念開始，今年「好運中國年」的品牌設(shè)計就被貼上了“不一樣”的標(biāo)簽。有別于往年的關(guān)鍵點是，需要在字體、圖形和IP上充分體現(xiàn)今年“不一樣”的“科技感”。
品牌字體
首先把“科技感”植入品牌字體中，形成獨特的字體風(fēng)格?！翱萍肌斌w現(xiàn)的是一種發(fā)展與進步、速度與前進，代表了“硬”實力，我們把這種氣質(zhì)體現(xiàn)在今年的品牌字體中。與去年較圓潤的字體相比，今年的字體更為硬朗，在此基礎(chǔ)上字的斜度統(tǒng)一為12度，起落筆則用“尖角”延伸，整套字體現(xiàn)出科技創(chuàng)新帶來的活力激發(fā)。
品牌圖形
輔助圖形是品牌的重要記憶點之一，能夠強化品牌特征，提升用戶對品牌的認知。今年的輔助圖形保留了去年的基礎(chǔ)形，不一樣的是增加了「科技感」特色的圖形元素，結(jié)合點、線、以及方格符號元素，進一步烘托科技氛圍，在延續(xù)去年視覺感受的基礎(chǔ)上增添了新的概念。
UI組件也注入科技感，在紅包、btn、輔助入口等組件中增加科技感點線元素的點綴，信息載體使用半透明效果的異形面板，指引箭頭則運用馬賽克表現(xiàn)形式。將這些UI組件進行復(fù)用，科技氣質(zhì)貫穿到各活動中，確保在不同玩法上呈現(xiàn)統(tǒng)一的視覺感受。
品牌IP
今年的活動IP形象更具親和力和辨識度。在兔子形象的設(shè)定過程中我們嘗試多種頭身比例，最終選用的比例為2:1，大頭形象在面部特征和表情上能夠體現(xiàn)更多細節(jié)，使整體更具親和力，同時也可以讓科技感的全息眼鏡顯得更為突出。IP貫穿活動始末，起到統(tǒng)一活動主題調(diào)性、強化引導(dǎo)，增加新年氛圍和親和力的作用。
舊瓶裝新酒：經(jīng)典重塑，打造多元好玩的集卡活動
集卡是百度歷年春節(jié)的經(jīng)典玩法，是用戶最喜愛的玩法之一，也是「好運中國年」系列活動中在線時間最長的活動，無論在視覺還是玩法上都要更加豐富多元。
[一] 玩法升級，傳承創(chuàng)新
過去兩年中，活動采用雙層卡玩法，集齊「好」「運」「中」「國」「年」基礎(chǔ)卡后合成高級卡，集齊高級卡后獎勵會翻倍。然而通過洞察研究發(fā)現(xiàn)，用戶在高級卡階段容易失去熱情、感到無聊，由此發(fā)現(xiàn)高級卡階段的活動體驗仍有改善空間，因此嘗試在今年進行了“新”的玩法體驗創(chuàng)新。
今年團隊在傳統(tǒng)集卡玩法上探索變化，傳承經(jīng)典的同時，提出“新”的集卡闖關(guān)玩法。用戶集齊「好」「運」「中」「國」「年」基礎(chǔ)卡后，開啟新的階段，合成高級卡獲得新春祝福語圖鑒，通關(guān)全套祝福語圖鑒獲得終極獎勵，同時整體降低集卡難度，讓用戶更容易玩下去。
[二] 傳統(tǒng)工藝，氛圍拉滿
“新酒”還體現(xiàn)在工藝的多樣上，與去年單一的年畫工藝相比，今年的集卡高級卡場景中展示了四種工藝，汲取了廟會中出現(xiàn)的民俗文化和民間藝術(shù)品-剪紙、燈籠、爆竹、團扇。通過科技感的全息影像將每個場景串聯(lián)，打造了一種科技廟會的感知。四個場景從家到國，層層遞進，各場景結(jié)構(gòu)源于品牌logo的熊掌元素，向用戶傳遞著年俗文化、透傳品牌，宣揚科技興國的理念。
燈籠
說到春節(jié)，家家戶戶都會準(zhǔn)備各式各樣的燈籠來期盼闔家團圓。
因此活動中選擇燈籠做為構(gòu)建高級卡場景一的主元素，同時也是文字的主承載物，每個燈籠呈現(xiàn)不同的造型，「團」字的兔子造型和場景中的兔子IP，來呼應(yīng)兔年生肖。通過地臺上的廟會建筑和糖葫蘆等元素的結(jié)合營造出廟會年俗氛圍。
卡片則采用了較高挑的燈籠輪廓做為基礎(chǔ)造型，強化卡片屬性，也能夠更好的承載文字和品牌的透傳。
剪紙
剪紙藝術(shù)作為高級卡第二個場景的視覺呈現(xiàn)，帶領(lǐng)用戶感受其豐富內(nèi)涵，感受設(shè)計對民俗生活的理解、對生活之美的追求。
場景中高級卡下端增加了以全息影像方式展現(xiàn)的廟會場景，同樣營造出科技廟會的氛圍。
爆竹
隨著春節(jié)的腳步越來越近，人們最期待的便是新年的第一聲爆竹，中國的爆竹文化，蘊含著華夏兒女的精神寄寓，表達著所有民族的共同期盼。近年來，隨著大眾環(huán)保意識的加強，爆竹聲已離我們逐漸遠去。因此，“爆竹”元素做為第三關(guān)高級卡的主元素，目的是為用戶營造久違的爆竹帶春聲，配合一席冬雪，向用戶描繪大自然對大地和人類的厚愛。
團扇
團扇是中國傳統(tǒng)工藝品及藝術(shù)品，有著深厚的文化底蘊。同樣寓意著吉祥如意。結(jié)合卡面文字，第四個高級卡主元素被設(shè)定為團扇。其外觀分別為圓形、花瓣形、芭蕉式等。通過設(shè)計手法展現(xiàn)團扇的刺繡工藝，細致到邊角和裝飾。而場景層則通過掐絲琺瑯的形式向用戶展現(xiàn)了祖國的大好河山?？ǖ暮竺孢€點綴了具有科技屬性的衛(wèi)星元素，預(yù)示著未來科技的蓬勃發(fā)展。
[三] 科技廟會，獨具特色
集卡是好運中國年系列活動中最先與大家見面的，為了讓用戶了解陸續(xù)開啟的更多活動，我們在集卡活動頁下方開辟了一個活動聚合專區(qū)，在設(shè)計上將傳統(tǒng)與科技融合，打造了一個豐富又獨具特色的廟會場景。前期提煉的科技元素轉(zhuǎn)化為環(huán)繞道路的彩色全息路標(biāo)，行駛中的百度無人車，LED光感的廟會建筑等，與各活動入口共同打造一個科技感十足的廟會街道。
親朋共團圓：疫情后我們第一次團聚
在過去新冠疫情肆虐的三年中，大家與親人朋友團聚的機會變得格外珍貴。在后疫情時代的第一個新年，活動從除夕到元宵節(jié)，逐步開啟多個紅包福利活動，與去年相比，在玩法上更多樣，增加了3個邀好友和2個紅包雨活動，為用戶與親朋創(chuàng)造了豐富多樣的線上互動場景。
除夕和元宵節(jié)是春節(jié)的首尾時刻，通過紅包雨游戲為用戶發(fā)放福利。在除夕夜，特別開設(shè)了多個時段的大額紅包玩法，用戶與家人一起守歲搶紅包、迎接新年到來。
團圓紅包、新春大紅包、開工領(lǐng)紅包，是春節(jié)系列活動中的3個各不相同的邀好友活動，我們通過差異化的設(shè)計形態(tài)，向用戶呈現(xiàn)豐富多樣的紅包福利。
在春節(jié)假期到來前，團圓紅包活動的互動方式主打線上分享，提前為用戶創(chuàng)造與家人線上聯(lián)系領(lǐng)福利的場景。
而在春節(jié)假期后期推出的掃碼領(lǐng)紅包活動中，迎合朋友見面聚會場景，設(shè)計上強化掃碼互動方式，便于線下面對面拉好友參與。
開工領(lǐng)現(xiàn)金是今年百度春節(jié)新增的特殊玩法，貼合新年后開工利是的現(xiàn)代習(xí)俗，吸引用戶向身邊的同事朋友分享這份好彩頭。
年俗文化鏈通全局
當(dāng)然這些活動的視覺也少不了科技和年俗文化的碰撞，將這些細節(jié)元素貫穿在各個活動中給用戶更加統(tǒng)一完整的沉浸體驗，如此多的年俗物件，是在去年活動中沒出現(xiàn)過的。
傾聽用戶聲音，點滴之中打磨更好的細節(jié)體驗
今年的“新”體驗也體現(xiàn)在我們的細節(jié)打磨上。秉承用戶體驗至上的原則，從去年春節(jié)活動開始，團隊嘗試通過投放問卷了解用戶參與活動的感受，在今年為用戶打造了更好的細節(jié)體驗。
通過細致入微的設(shè)計思考、克制的細節(jié)處理，打磨出「更簡單」、「更生活」、「更生動」的體驗。在今年的體驗反饋中，獲得了很多用戶的稱贊。
[更生活]
更生活體現(xiàn)在高級卡的場景設(shè)計上，將燈籠的點亮態(tài)和未點亮態(tài)通過顏色和質(zhì)感進行區(qū)分，通過集卡逐一點亮燈籠，制造小的驚喜點，寓意照亮全家人的平安與幸福。
[更簡單]
為了讓活動更易于上手，我們將主頁和彈窗中的主按鈕文字放大，提高主按鈕的視覺層級，這種設(shè)計讓白發(fā)人群也可輕松參與到活動中。
同樣的，掃碼活動中二維碼的展示也進行了放大處理，節(jié)省了點擊再放大的步驟，更便于識別和用戶之間的面對面分享。
[更生動]
在紅包雨活動中，為了保證用戶的游戲體驗，使用了二維游戲引擎，增強動畫流暢度。同時在多種道具上增加了點擊實時反饋，強化道具的生命力。
在開工領(lǐng)紅包活動中使用動作捕捉數(shù)據(jù)，讓人物的動作更真實，更靈活。同時設(shè)計了金幣的碰撞反饋，提升用戶的點擊感和爽感。給用戶更好的游戲感體驗。
作者：許波bobobo來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計公司
「文章的內(nèi)容會更偏實際工作產(chǎn)出，并非將競品分析的定義平鋪展示，耐心讀完，你一定會有收獲?！?
關(guān)于競品分析，一直有小伙伴想讓我出一篇文章。因為我看過大量的 B 端產(chǎn)品，很多同學(xué)就會好奇，怎樣能系統(tǒng)的進行競品分析？好吧，壓箱底的內(nèi)容也拿出來了，今天就來和大家說說競品分析，以及我們作為設(shè)計師，究竟應(yīng)該如何使用競品分析。
我相信大多數(shù)設(shè)計師都有體會過被銷售奪命連環(huán) call 的經(jīng)歷，很多時候我們就是想要白嫖別人的“身子”，但是又不敢明說，只能夠通過花言巧語來騙取別人的使用賬號。難，因為很多產(chǎn)品并不會直接給你使用賬號，其實銷售也是為你們考慮，即使給了你賬號，你也沒法完整體驗整個流程，索性就不給你看，因此大多數(shù)情況下銷售會給你演示，這可能就是試用當(dāng)中最難的第一個地方。
在 B 端，鑒定你是否是行內(nèi)人的最好辦法，便是在溝通的時候給你講很多專業(yè)術(shù)語，因為術(shù)語就如同我們設(shè)計師日常溝通的一個辦法。比如：“這里我用到了卡片分類將整個信息去做規(guī)整”、“那里在 Figma 里主要用 Components 去解決頁面重復(fù)的問題”
這些內(nèi)容其他行業(yè)的人肯定也聽不懂，因此術(shù)語多也是我們非常頭疼的地方。最近也在嘗試整理不同行業(yè)的 B 端產(chǎn)品分析，也算是幫助同學(xué)們在陌生的領(lǐng)域當(dāng)中能夠快速熟悉。
很多同學(xué)的競品分析，都主要集中在鼠標(biāo)的操作上。便是不停地點點點，在整個頁面你會發(fā)現(xiàn)點擊過后沒有任何目的，試用過后也不會有什么結(jié)果。因此久而久之，很多設(shè)計師只會去看這個產(chǎn)品的頁面風(fēng)格，然后根據(jù)說這個頁面非常丑陋就罵罵咧咧的離開，所以也導(dǎo)致大家的積極性下降。
關(guān)于競品分析，其實很多人還是會使用 C 端產(chǎn)品的分析邏輯，但這對于 B 端產(chǎn)品來說，競品分析很容易就會誤導(dǎo)設(shè)計師，讓大家朝著不太正確的方向發(fā)展。
比如以這個內(nèi)容為例，我們可以看到雖然其標(biāo)題寫的是某某產(chǎn)品的競品分析，但是其實則的內(nèi)容就是一篇較為完整的產(chǎn)品體驗報告，主要就是講解了產(chǎn)品對應(yīng)的功能，遠遠稱之不上為競品分析（嚴(yán)格上來說應(yīng)該是設(shè)計的競品分析）
所以我認為 B 端競品分析對于設(shè)計師來說需要具備一下幾個特點：
因為站在前人的肩膀上，我們能夠快速產(chǎn)出對應(yīng)的設(shè)計方案，因此競品分析最好是有明確的需求目的。比如我要去做一個 導(dǎo)航菜單的設(shè)計，那就要去考慮在整個導(dǎo)航菜單當(dāng)中，它不同的設(shè)計方法，以及在各個產(chǎn)品當(dāng)中它們是如何選擇的，只有了解了這些內(nèi)容后，才能夠幫助我們?nèi)ソ鉀Q設(shè)計當(dāng)中的問題。
而競品，在其中主要就是引導(dǎo)作用，讓我們可以思考這款產(chǎn)品背后的具體邏輯，了解它是如何 how to do。
了解行業(yè)趨勢是非常重要的一個內(nèi)容，雖然都是在說 B 端，但是我們可以通過競品分析了解到行業(yè)的大體動向，能夠幫助我們?nèi)プ鼍唧w的分析。
比如我們可以看到很多 B 端產(chǎn)品的動向，像是 Jira、Ant Design、飛書，它們都在降低視覺層級，凸顯內(nèi)容層級，這些動向的總結(jié)并不是我隨便去看文章，而是通過整體的分析了解到的。
（這個觀點也在 Ant Design 5.0 的更新當(dāng)中得到了驗證）
其實這就需要你不停的跟進多款產(chǎn)品，了解他們目前的產(chǎn)品發(fā)展方向。雖然有很多人會認為這不是應(yīng)該產(chǎn)品做的事嗎？為什么設(shè)計師要去做？但是去跟進他們的動向，其實就是了解他們之前在設(shè)計這些模塊的時候翻了哪些錯，后續(xù)是如何調(diào)整的。比如我們以飛書的改動為例，我追蹤飛書管理后臺的更新有大概 4 年，通過這樣的堅持，我們能夠看到的是飛書它經(jīng)過一個又一個版本的迭代，優(yōu)化了很多內(nèi)容，才到如今的設(shè)計，并且隨著內(nèi)容數(shù)據(jù)的增多，可以發(fā)現(xiàn)它是在如何發(fā)生變化。
并且發(fā)現(xiàn)這個界面設(shè)計風(fēng)格的改版是未來的趨勢，早在一年前就已經(jīng)預(yù)言，記得也在課程上講過，這個風(fēng)格未來一定是需求（不信問一問 第三期課程的同學(xué)應(yīng)該知道）所以這便是了解行業(yè)趨勢最快的一個途徑，而我們要做的是持續(xù)跟進，多去進行內(nèi)容的查看。
回顧飛書管理后臺的更新，了解一個B端產(chǎn)品的發(fā)展歷程
大家一定接到過很多從 0-1 的功能模塊，在這個時候我們其實是對于它的交互內(nèi)容理解較為簡單。而使用競品分析就能夠幫助我們?nèi)チ私庑枨笈c這些功能模塊，他們究竟是如何做設(shè)計的，思路有哪些？這些都能夠提供給我們進行幫助。
比如我之前負責(zé)過一個階段推進器的需求，當(dāng)時對于階段推進器這四個詞非常陌生。感覺從未接觸過，心中想的應(yīng)該是 火箭？飛機的推進？
產(chǎn)品經(jīng)理給到我的需求是這樣的：
我頓時就犯了難，這時候雖然不了解，但是我通過強大的圖庫+賬號，快速找到與之對應(yīng)的功能模塊。
然后深度體驗產(chǎn)品的交互細節(jié)，并給出了合理的方案，這樣競品分析就能夠幫助我對于未知需求、未知領(lǐng)域的探索。
我們在做競品分析的時候，需要考慮的是交互體驗層面的競品分析，而非產(chǎn)品框架層面的競品分析。很多時候產(chǎn)品層面的競品分析我們不需要掌握，因為它過于宏觀，很多內(nèi)容并不是我們作為設(shè)計師應(yīng)該關(guān)心的，因此我們在做競品分析時不應(yīng)該盲目的大，而是克制更為聚焦的小，希望做到的是從微觀再到宏觀。
舉一個例子，下方三個指標(biāo)圖，如果你要去做競品分析，你會如何做？
首先關(guān)于三個指標(biāo)圖我們發(fā)現(xiàn)，它們的設(shè)計內(nèi)容并不相同。
1.為數(shù)據(jù)展示指標(biāo)圖，你會發(fā)現(xiàn)在整個指標(biāo)圖當(dāng)中包含有同比、環(huán)比、對應(yīng)的時間 以及 數(shù)據(jù)的詳情，給人的感覺數(shù)據(jù)非常專業(yè)。
2.以數(shù)據(jù)占比為主，明顯是想表達你的使用情況。你可以想想，會出現(xiàn)在哪個頁面當(dāng)中？
3.一個非常簡單的指標(biāo)圖，但是在個數(shù)這個字段極為特殊，應(yīng)該是想呈現(xiàn)對應(yīng)的數(shù)據(jù)變化。
關(guān)于競品分析，我們必須得先了解不同競品之間的種類與關(guān)系，這樣才能方便我們快速尋找競品。
直接競品，顧名思義就是去分析產(chǎn)品的直接競爭對手，因為直接競爭對手都會有較為完整的解決方案，如果第一次去做某些功能的時候，我們可以快速分析直接競品去快速了解它的思路。當(dāng)然我們通常對直接競品還需要將他的產(chǎn)品進行各個階段的進行留檔，以及競品迭代分析，這個我們就留著第三章來說。
關(guān)于直接競品，有一個非常簡單的方法，就是在我們書簽分類當(dāng)中，在一個分類下的一定就是直接競品。所以直接競品我們更關(guān)注的是產(chǎn)品類型幾乎相同~
間接競品通常是與產(chǎn)品沒那么相關(guān)，但是會有很多功能模塊是相通的。因為很多時候，我們很難找到非常相似的 直接競品，或者這些競品當(dāng)中的設(shè)計不太滿足，這時候我們就要去考慮去分析間接競品。
比如在上圖的客戶管理模塊，微盟里的客戶管理與紛享銷客里的客戶管理就會完全不同，雖然他們都是客戶管理，但是在設(shè)計上完全不同。前者主打簡單，我們在借鑒的時候就要更深入思考；后者為核心板塊，就要體驗他為核心板塊做了什么內(nèi)容。所以間接競品我們更關(guān)注的是產(chǎn)品功能模塊幾乎相同，但是他們的設(shè)計目的可能會存在不同的差異，因此將其進行分析。
交互競品主要針對產(chǎn)品無論的類型還是功能模塊上，都好不搭嘎，但是設(shè)計上有一些交集的地方，我們可以去學(xué)習(xí)他們的交互解決方案。比如我們需要去處理的是一個復(fù)雜的篩選模塊，同行業(yè)里幾乎沒有類似的做法，那我們就可以借鑒很多有類似功能的產(chǎn)品，比如 ONES 的篩選邏輯、紛享銷客的高級篩選、TAPD 的篩選彈窗，這些本身都是毫不相干的產(chǎn)品，但是他們在交互模式上可以借鑒，通過這樣就能夠幫助我們在交互層面上去解決問題，而交互競品更看重的是你平時對這個產(chǎn)品的了解程度。
了解了常見的競品的劃分過后，我們尋找到了競品應(yīng)該如何分析？
作為一個成熟的 B 端設(shè)計師，我們競品分析的方法并不是將傳統(tǒng)式教條主義那樣，按照 第一步、第二步、第三步 的方式，按照某一個方法去局限自己的思路。比如常見分析的方法有：功能拆解法、矩陣分析法、功能對比法、評分比較法、競品畫布、PEST 分析法（后面會講到這些內(nèi)容應(yīng)該如何使用）
因為我們在實際工作當(dāng)中，如果按照上面你的方式分析，很容易就變成一個填空題，而因此缺少了對于整個產(chǎn)品的細致思考。所以我們?nèi)《氖橇硪粋€非常重要的觀點：「通過現(xiàn)象看本質(zhì)」
這個方法聽上去有些抽象，但是我們還是來看看它究竟應(yīng)該如何使用。
比如你接到了一個設(shè)計需求，現(xiàn)在需要設(shè)計一個篩選組件。而擺在你面前的便是兩個完全不同的篩選組件類型，這時候你應(yīng)該怎么辦呢？
但是這些傳統(tǒng)的教條類的分析會讓大家感覺在處理頁面的時候非常束手無策，因為他們在分析時，通常都是非常宏觀的分析，比如產(chǎn)品大方向、產(chǎn)品的未來規(guī)劃，沒人會去關(guān)注你個臭設(shè)計的。其實我們再去對競品分析時，主要專注兩部分的分析：
我們 就以剛才講到的篩選為例，首先從外在表現(xiàn)來看，發(fā)現(xiàn)左側(cè)的篩選并不重要，因為它需要點擊篩選圖標(biāo)后才能呼出篩選，執(zhí)行對應(yīng)的篩選操作而對應(yīng)的右側(cè)篩選顯得非常重要，因為它的所有篩選項都是常駐在頂部，我們想要篩選就可以直接到對應(yīng)的字段進行操作。
現(xiàn)在其實我們就在分析表象，就是這兩個設(shè)計之間的差別在哪，緊接著我們在揣摩一下交互，當(dāng)兩個篩選點擊過后，發(fā)現(xiàn)：左側(cè)的篩選針對的是通用的字段，因為我需要點擊添加篩選條件，點擊想要篩選的字段，才能夠執(zhí)行篩選的操作。右側(cè)的篩選針對的是固定的字段，因為字段都是在頁面當(dāng)中常駐，并且沒有對應(yīng)的添加篩選的入口。這是從設(shè)計師在這個方案當(dāng)中傳達出來的信息，緊接著分析一下，為什么這個設(shè)計師要這么設(shè)計。按照課程當(dāng)中的話來說，就是這個設(shè)計師也不是傻子，它為什么要這么做？原因在哪？這時候我們就要通過外在的表象分析其內(nèi)在的邏輯。
內(nèi)在邏輯是將外在的表象通過設(shè)計實現(xiàn)在內(nèi)在的產(chǎn)品邏輯當(dāng)中，在邏輯當(dāng)中會涉及到很多內(nèi)容，我們做設(shè)計時所寫的交互說明很多時候就源自于此。
同樣是上面的篩選，那為什么會這樣設(shè)計，其中的原因又是什么？我們剛才講到了篩選一個為通用篩選字段，一個為固定篩選字段，那為什么會存在這種情況，其實是因為在左側(cè)，整個系統(tǒng)的字段是不可控的，用戶可以去自定義字段，也就是添加自己想用的字段來進行展示；而右側(cè)字段可控，主要就是所有的字段都在整個系統(tǒng)當(dāng)中，我們沒有辦法去隨意的添加刪除。
而為什么會產(chǎn)生這樣的原因呢？其實是因為 aPaaS 平臺上，整個系統(tǒng)都是自定義字段，因此只能夠?qū)⒑Y選做到一個入口里，通過入口來執(zhí)行篩選的操作。而 SaaS 平臺，特別是行業(yè)屬性型產(chǎn)品，所有的業(yè)務(wù)都是固定寫死的，因此你會發(fā)現(xiàn)我們不允許系統(tǒng)進行隨意的更改，也就導(dǎo)致了我每個頁面具體要呈現(xiàn)什么內(nèi)容完全由我們自己說了算，也就導(dǎo)致股常駐固定篩選。
我們作為設(shè)計師，其實不應(yīng)該只分析其外在的表象，而更應(yīng)該在乎的是其內(nèi)在的邏輯。剛才我們是從前往后去推導(dǎo)設(shè)計的邏輯，那我們想想，能不能從后往前去做分析，當(dāng)然是肯定的。
比如在之前回答一個同學(xué)的問題時，我們就能夠通過競品分析了解到設(shè)計思路。
問題如下：
“我們?nèi)プ鲆粋€ HRM 系統(tǒng)的面試點評的優(yōu)化，因為在系統(tǒng)當(dāng)中經(jīng)常會有面試評價的問題，就是使用系統(tǒng)的面試官經(jīng)常出現(xiàn)忘記填寫面試評價、面試評價錯亂的情況，我們應(yīng)該如何優(yōu)化？”
3.舉個例子
比如在之前回答一個同學(xué)的問題時，我們就能夠通過競品分析了解到設(shè)計思路。問題如下：
“我們?nèi)プ鲆粋€ HRM 系統(tǒng)的面試點評的優(yōu)化，因為在系統(tǒng)當(dāng)中經(jīng)常會有面試評價的問題，就是使用系統(tǒng)的面試官經(jīng)常出現(xiàn)忘記填寫面試評價、面試評價錯亂的情況，我們應(yīng)該如何優(yōu)化？”
首先我從沒做過 HRM 系統(tǒng)，因此不太了解這個產(chǎn)品的具體特性，所以在回答這個問題時，我們只能夠通過競品分析的方式，去獲取一些設(shè)計優(yōu)化的方式。
在分析問題之前，必須先了解我們目前已經(jīng)掌握的內(nèi)容。
產(chǎn)品：針對人事系統(tǒng)管理的招聘模塊
階段：已經(jīng)面試人員的面試評價
問題：面試評價未填寫，錯亂的問題
針對上面的內(nèi)容，我們還能夠進行相應(yīng)的提問：
具體的角色有哪些？解決的問題究竟是什么？究竟是什么樣的面試評價錯亂/未填寫？
通過系統(tǒng)當(dāng)中已知的內(nèi)容，我們逐步明確以下幾個內(nèi)容
產(chǎn)品：人力招聘系統(tǒng)
角色：面試官、HR、應(yīng)聘者
功能：面試評價
痛點：大部分面試官忘記面試評價，導(dǎo)致面試評價錯誤、混亂，無法對應(yīng)
場景：線下面試，線上面試
其實我們剛才的內(nèi)容，都是前期的問題分析，我們在做任何設(shè)計時都應(yīng)該這么做，而后就是競品的分析，首先去搜集競品，去尋找直接競品、間接競品、交互競品。
直接競品：因為 HRM 行業(yè)本身要求比較嚴(yán)格，所以在選擇時，我們選擇了釘釘上能夠直接試用的 易招聘
間接競品：最近使用 CCtalk 上課的頻率較高，所以使用 CCtalk 的課程評價
交互競品：在點餐的時候發(fā)現(xiàn)可以評價商品，因此選擇美團外賣分析其點評評價
當(dāng)然在這些競品當(dāng)中，沒有嚴(yán)格的要求。最主要的就是你一定要熟悉它。
而我們在分析時，就要了解一款產(chǎn)品的表象和它的邏輯
易招聘
在易招聘里，我們進入到人才信息過后，就能夠快速預(yù)覽人員的所有內(nèi)容，包含簡歷、登記表、測評、面試記錄、Offer 等，其中在面試記錄里，我們就能夠查看這個員工的所有面試設(shè)計記錄。
因為我沒有接觸過 HRM 系統(tǒng)，通過易招聘這樣的直接競品，讓我對 HRM 行業(yè)的產(chǎn)品有一個基礎(chǔ)的認識，通過了解面試評價的基本內(nèi)容。
然后將競品的內(nèi)容按照外表+邏輯進行整理。
外表：
- 發(fā)現(xiàn)易招聘里依然容易出現(xiàn)面試評價錯亂等問題，他們通過 一鍵催所有評價+一鍵催評價 解決
- 試用 一鍵催評功能，設(shè)計邏輯是當(dāng)點擊過后，我們會在 釘釘 收到 Ding 一下的加急消息，提示你需要閱讀。（這個與平臺深度綁定，如果是 飛書、企業(yè)微信 提示方式又會有所不同）
- 面試評價較為簡單，選擇對應(yīng)狀態(tài)，在下方寫下評論即可。
由于對于評價這個功能也不太了解，因此我們又體驗了其他的評價功能的產(chǎn)品，希望有所啟發(fā)。
CCtalk
因為 CCtalk 平常使用頻率較高，所以評價想到的就是課程評價究竟有哪些邏輯。老規(guī)矩我們先看外表：
- 提供快速評價的入口，我們可以點擊五角星來實現(xiàn)評價的快速點評
- 提供默認標(biāo)簽，我們可以選擇老師常見的面試評價標(biāo)簽
- 直播課程結(jié)束后，會有彈窗提示。面試結(jié)束后可以主動彈窗進行提示。
在理解內(nèi)核，理解內(nèi)核我是通過一次一次的測試，得到了 CCTalk 他會包含以下規(guī)則：
- 課程必須結(jié)束后才可評價，也就是正在直播的課程，不能直接評價。也就是評價不能與課程同時進行。
- 課程查看時間必須超過 10min 才可評價。也就是點評之前，必須要判定用戶是否有評價資格。
因為經(jīng)常點外賣，因此也會想到美團外賣的點餐評價，也就將其呈現(xiàn)出來了。
外表：
會有彈窗提示，是否進行評價
評價可以有標(biāo)簽進行快速選擇
對于騎手的評價會有滿意于不滿意兩種狀態(tài)
內(nèi)在邏輯：
當(dāng)騎手完成送貨后，可以對訂單進行評價
提前點送達，會收到系統(tǒng)的默認提示
不同的滿意狀態(tài)，對應(yīng)呈現(xiàn)的默認標(biāo)簽也會不同
我們分析了多個產(chǎn)品的設(shè)計邏輯過后，面對上述的問題，我們得到以下的設(shè)計思路：
- 面試評價的難度 降低無用的表單信息，將重要內(nèi)容凸顯 美團外賣
- 面試評價的快速提醒 HR 一鍵提醒功能 易招聘
- 面試流程的卡點 取消不必要的必填，并且在內(nèi)容上有快捷方式 美團外賣
- 面試過后的反饋 快速提示面試評價 CCtalk
- 面試的最佳實踐 能不能將面試與面試點評放在一起，提醒面試官可以一邊面試一邊評價 CCtalk
- 面試是否能夠提供面試題庫 規(guī)范面試官的提問方式，幫助面試官進行規(guī)范化的考量 CCtalk
通過競品的外在表象和內(nèi)在邏輯進行分析，進而在產(chǎn)出方案時，我們能夠更為清晰的處理工作的需求。而上面的思路，我們只需要將需求結(jié)合，產(chǎn)出設(shè)計頁面即可。那對應(yīng)的方案這里就不做呈現(xiàn)，畢竟競品分析我么你主要分析的也是思路。
首先關(guān)于競品分析的方法，我們的目的主要是為了呈現(xiàn)自己的思路。比如剛才我們已經(jīng)完成的思路的拆解，進而就需要通過方法將自己的思路進行理論化的包裝，給到其他人，這樣就能夠保證在評審當(dāng)中“你的思路是正確的”
功能拆解法是針對系統(tǒng)或軟件的功能分解，可以采用不同的方法進行拆分。
我們常用的方式是按照菜單導(dǎo)航進行拆解，即將不同功能按照其在菜單中的位置進行分解。同時還可以根據(jù)使用流程來進行功能拆分，即將整個系統(tǒng)或軟件按照用戶使用時的流程進行分解。
功能拆解法能快速幫我們?nèi)コ尸F(xiàn)產(chǎn)品的具體架構(gòu)，了解競爭對手的功能情況。
矩陣分析法可以通過將不同競品的關(guān)鍵指標(biāo)以矩陣的形式呈現(xiàn)，從而幫助設(shè)計師更好地分析和比較不同競品之間的特點和優(yōu)劣勢，去尋找產(chǎn)品方向上的機會點。
矩陣分析法主要通過制作矩陣坐標(biāo)軸，將不同競品的特點和關(guān)鍵指標(biāo)對比，從而分析它們在不同方面的優(yōu)劣勢。在制作矩陣表格時，通常將各個競品的關(guān)鍵指標(biāo)列在表格的橫向和縱向兩個方向，從而形成一個以競品名稱為標(biāo)題的矩陣表格。
例如，我在分析垂直業(yè)務(wù)型產(chǎn)品與行業(yè)屬性型產(chǎn)品時，就會將很多關(guān)鍵指標(biāo)進行對比：產(chǎn)品市場占比、產(chǎn)品的設(shè)計難度、業(yè)務(wù)復(fù)雜度，同時在這些競品當(dāng)中，我們選擇了兩個指標(biāo)進行分析「設(shè)計難度、業(yè)務(wù)復(fù)雜程度」通過對比和分析不同競品在這些指標(biāo)上的位置得分情況，設(shè)計師可以更好地了解各個競品之間的優(yōu)劣勢，從而更好地制定設(shè)計策略和優(yōu)化產(chǎn)品設(shè)計。
總之，競品分析的矩陣分析法可以幫助設(shè)計師更好地了解市場競爭環(huán)境，分析不同競品之間的優(yōu)劣勢，為設(shè)計和優(yōu)化產(chǎn)品提供參考和啟示。
功能對比法是一種通過比較和分析不同競品的功能來了解其特點和優(yōu)劣勢的競品分析方法。該方法主要通過比較不同競品在功能上的差異和優(yōu)劣勢，幫助設(shè)計師更好地了解市場上類似產(chǎn)品的功能特點，并從中獲取設(shè)計靈感和啟示。
功能對比法在 B 端產(chǎn)品當(dāng)中，我們主要分析一些影響產(chǎn)品體驗的核心功能。比如產(chǎn)品的自定義能力、是否有新功能的交互引導(dǎo)、產(chǎn)品有問題時的幫助體驗如何，這些我們都能夠通過功能對比的方法進行快速的了解，快速讓自己的產(chǎn)品在行業(yè)當(dāng)中取得一定的優(yōu)勢。
競品分析是指對與自己產(chǎn)品或服務(wù)相似的競爭對手進行調(diào)查、分析和比較，以了解市場競爭狀況，為企業(yè)制定市場策略提供依據(jù)。在競品分析中，評分比較法是一種常用的方法。
評分比較法是指按照一定標(biāo)準(zhǔn)對不同競爭對手的產(chǎn)品體驗進行評分，再將得分進行比較，以確定各競爭對手的優(yōu)劣勢和差距，進而明確產(chǎn)品的具體定位。
評分比較法的優(yōu)點在于可以直觀地展示競爭對手之間的差距，幫助企業(yè)更清晰地了解自身在市場中的位置和優(yōu)劣勢，進而制定更科學(xué)的競爭策略。但評分比較法也存在一些局限性，例如評分標(biāo)準(zhǔn)的選擇可能不夠客觀，評分者的主觀性可能會影響評分結(jié)果等。
商業(yè)畫布的目的是幫助企業(yè)了解自己所處的市場競爭環(huán)境，以及競爭對手的優(yōu)劣勢和策略。因為他是偏業(yè)務(wù)層面的分析，通常由以下幾個部分組成：
商業(yè)畫布可以幫助企業(yè)了解自身在市場中的定位和優(yōu)劣勢，以及與競爭對手之間的差距和機會。通過對競爭對手的分析和比較，企業(yè)可以更好地制定市場策略，提高市場競爭力。
而這些方法的使用，主要目的是為了呈現(xiàn)你的思路，通過方法論的方式進行包裝，進而能夠讓沒有體驗過的人快速了解，方便他們理解你的方案思路。
競品分析最簡單莫過于借鑒別人的設(shè)計思維，因為我們在剛接觸到一個需求的時候通常都會非常的茫然。而現(xiàn)如今的界面設(shè)計很少有行業(yè)里面完全新的功能，大多數(shù)的界面模式已經(jīng)被行業(yè)當(dāng)中驗證使用，所以先不要嘗試去創(chuàng)建一個新的交互需求，先試著尋找一下有沒有較為成熟的交互邏輯。
比如我們現(xiàn)在接到一個需求，要去做一個頁面的代碼配置信息，手里拿到的就只有一些簡單的產(chǎn)品截圖。
那這個時候我們就需要考慮與之類似的交互到底會有哪些？
想來想去過后你會發(fā)現(xiàn)，我們似乎可以從 VScode + Figma 等頁面布局當(dāng)中去獲取靈感，進而在繪制這些頁面的時候會更為完整。
并且思路借鑒，并不意味著我們需要去 copy 別人的完整方案，很多時候要去分析的是它的方案真實適不適合我們的產(chǎn)品。
畢竟產(chǎn)品當(dāng)中就會存在很多特殊的場景，場景不同你的思考的點就會存在差異。
再舉個例子：比如我們在課程上講到了三個風(fēng)格非常類似的 指標(biāo)圖，當(dāng)你看得到這三個完全相同的組件時，其實會覺得他們只是存在風(fēng)格上的差異：一個數(shù)據(jù)凸顯、一個展示進度、一個展示指標(biāo)
但是深入去分析了解，才知道它們除了風(fēng)格上的差異之外，其實還會存在使用場景的不同。
左上圖是數(shù)據(jù)凸顯：因為是一個 BI 產(chǎn)品，在產(chǎn)品當(dāng)中主要呈現(xiàn)的是關(guān)于這個字段詳細的數(shù)據(jù)記錄。所以在數(shù)據(jù)呈現(xiàn)的時候較為詳細和準(zhǔn)確。
右上圖展示進度：同樣是一個指標(biāo)圖，它呈現(xiàn)的內(nèi)容更多是一個進度展示。究其原因，發(fā)現(xiàn)它被用于企業(yè)管理頁面，以便我們可以通過進度了解資源的具體用量。
左下圖展示指標(biāo)：這個指標(biāo)圖有點特殊。在鼠標(biāo)懸停時，我們發(fā)現(xiàn)該圖表可以點擊。這意味著該指標(biāo)圖可進行下鉆操作，以快速查看相關(guān)聯(lián)的數(shù)據(jù)情況。
因為競品分析并不是一個短期分析完了就結(jié)束的過程，如果處理一個需求，針對一個功能，我們都需要持續(xù)的對產(chǎn)品進行動態(tài)的跟蹤。就像我跟進了 飛書 3-4 年，一步一步看到它的變化、產(chǎn)品也在不斷地發(fā)展，因此你的分析也應(yīng)該是持續(xù)跟進的。
我們作為設(shè)計師，更應(yīng)該對產(chǎn)品持續(xù)進行關(guān)注，比如創(chuàng)建對應(yīng)的產(chǎn)品版本庫，將這些競品持續(xù)關(guān)注，不斷地總結(jié)，這樣你才能擁有自己的護城河。。
回顧飛書管理后臺的更新，了解一個B端產(chǎn)品的發(fā)展歷程
關(guān)于如何尋找競品，我其實之前有給大家講過，正好趁著這些內(nèi)容更新，又給大家科普一波~
在競品的尋找上，其實我們主要有幾種尋找的渠道：
我們可以通過搜索引擎檢索到大量的同類型產(chǎn)品，使用搜索引擎我們只需要明確想要尋找哪個領(lǐng)域或產(chǎn)品的競爭對手，然后根據(jù)該領(lǐng)域或產(chǎn)品的特點，選擇適當(dāng)?shù)年P(guān)鍵詞，通常會有兩種方式，產(chǎn)品類型以及產(chǎn)品名稱。
我們以尋找 CRM 行業(yè)的產(chǎn)品為例，就可以在搜索引擎當(dāng)中得到兩類關(guān)鍵名稱：
產(chǎn)品類：紛享銷客、銷售易、銷幫幫 ...
行業(yè)類：CRM、客戶關(guān)系管理系統(tǒng)、企業(yè)客戶管理 ...
當(dāng)然在搜索引擎上的選擇，國內(nèi)肯定就是 百度、搜狗、Bing 等平臺；如果是國外，則主要是 Google。
在國內(nèi)的應(yīng)用，主要講究的是生態(tài)，因此我們尋找競品還可以通過競品的 ISV 快速獲取。
目前國內(nèi)的企業(yè)應(yīng)用平臺主要有三個：釘釘、企業(yè)微信、飛書
無論是什么產(chǎn)品，我們都能夠通過這三個平臺進行快速的尋找。
比如我們想要尋找財稅相關(guān)的產(chǎn)品，那我能夠通過 釘釘、企業(yè)微信、飛書找到非常多與之相關(guān)的產(chǎn)品。并且這樣的一些平臺能夠提供 試用 15 天的功能，代表著我們可以直接體驗多款同類型產(chǎn)品。
Youthce.com
如果是咱們賬號的老讀者都知道，我自己有一個個人網(wǎng)站，雖然年久失修，但是里面仍然總結(jié)了市面上較為常見的 B 端產(chǎn)品，其中就包含 200+ 各個行業(yè)的競品。
因此肯定還是要先安利自己的網(wǎng)站，最后說一句，個人網(wǎng)站肯定更新、肯定更新~
36 企服點評
這是 36 氪出品的企業(yè)服務(wù)點評網(wǎng)站，很多國內(nèi)的 B 端產(chǎn)品都會在這個網(wǎng)站上出現(xiàn)，雖然做得一般，但也是國內(nèi)最好的網(wǎng)站了（攤攤手）
網(wǎng)站感覺恰飯的產(chǎn)品都點多，很多不知名的產(chǎn)品排行都比較靠前~
找 SaaS
也是類似的企業(yè)軟件的匯總平臺，內(nèi)容雖然很多，但是它的排序規(guī)則并不是很認可。
比如人才招聘領(lǐng)域，排在前面的產(chǎn)品我一個都不認識，這個排序規(guī)則就值得大家細品細品，這算是大家找軟件的一個補充吧。
SaaS 點評網(wǎng)
類似的企業(yè)服務(wù)社區(qū)，我們能夠快速的進行產(chǎn)品分析。
G2
可以把它理解為是國外軟件的大眾點評，我們可以在該網(wǎng)站上查看和撰寫軟件和服務(wù)的評價，并對其進行打分、發(fā)布評論和分享經(jīng)驗。這些評價基于用戶的真實體驗，具有很高的可信度和參考價值。
也可以在這上面找到國外產(chǎn)品的流行趨勢，并且每年 G2 都會頒布 「Best Software for 2023」來展示在過去一年，不同領(lǐng)域當(dāng)中那些產(chǎn)品做得非常優(yōu)秀。
Capterra
Capterra 是一個在線的軟件和服務(wù)目錄網(wǎng)站，目的是在幫助企業(yè)尋找和比較各種軟件和服務(wù)產(chǎn)品。與 G2 比較類似，不過使用它通常會采取一些關(guān)鍵詞來去尋找。
Crozdesk
企業(yè)軟件搜索，不過會有很多國外的行業(yè)報告提供給我們，免費下載~
競品截圖是我們設(shè)計師最主要的靈感來源。
CE青年花瓣
我在我的花瓣中總結(jié)了50個B端產(chǎn)品，并為每個產(chǎn)品提供了詳細的截圖。我還提供了相應(yīng)的標(biāo)簽來對這些截圖進行細致的管理。已經(jīng)有很多設(shè)計師向我反饋他們會打開這個花瓣網(wǎng)站，每天都去獲取相應(yīng)的靈感。當(dāng)然，也會有一些機構(gòu)和媒體拿著這些截圖，進行對外的售賣，并且價格不菲。
所有資源都已經(jīng)免費提供給大家了。大家可以好好利用這些資源，幫助自己提升設(shè)計能力。
SaaS UI
SaaS UI 是國外截圖分享的一個平臺，里面按照產(chǎn)品為單位，搜集了大量的產(chǎn)品截圖。同時對于沒有的產(chǎn)品你還可以提交請求，等待一段時間就能更新到你想要的產(chǎn)品截圖。
Webframe
在 Webframe 里面，我們能夠通過左側(cè)的導(dǎo)航，快速對于產(chǎn)品進行分類。
與 SaaS UI 不同，它的分類按照產(chǎn)品的整體結(jié)構(gòu)展開的，比如：官網(wǎng)、價格頁、登錄頁、編輯、彈窗、搜索 等等...
這種方式在我們?nèi)狈`感的時候能夠快速通過導(dǎo)航，找到自己想要的截圖內(nèi)容，既能夠進行橫向?qū)Ρ龋瑫r也能夠?qū)ふ业皆摦a(chǎn)品的全部截圖。
SaaS Landing Page
這是一個專注于 B 端官網(wǎng)設(shè)計的網(wǎng)站，所有的官網(wǎng)都通過小編的精心篩選，質(zhì)量上肯定有所保障。同時還匯總了網(wǎng)站的 字體、顏色、技術(shù)棧，能夠讓我們快速掌握該網(wǎng)站的設(shè)計風(fēng)格。
我們提到的所有資源都放在我的微信工號里。回復(fù) “頁簽”，即可獲取。
關(guān)于競品分析，其實就是通過研究別人的產(chǎn)品來了解自己的產(chǎn)品可能會遇到的問題。你可以通過不同的競品分析方式呈現(xiàn)你的競品分析結(jié)果。因為我們作為設(shè)施設(shè)計師考慮的不是產(chǎn)品層面上的各種關(guān)系，而是設(shè)計層面上的交互邏輯。
盲目的分析只會讓你越陷越深，達不到我們最初的目標(biāo)。
希望這篇文章能夠?qū)δ阌兴鶈l(fā)，這也是我在實際工作中運用競品分析的關(guān)鍵思路。
作者：CE青年來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計公司
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計公司
B端項目一般用到的顏色會很豐富，再帶上數(shù)據(jù)可視化場景，那需要的顏色需求就會更多。像Ant design色彩體系包含12個主色以及衍生色：
Material design色彩體系包含16個主色以及衍生色:
那這種即能滿足多種不同場景的同時色彩搭配在一起又很協(xié)調(diào)的色彩體系，是如何科學(xué)搭建的呢？
從各大廠的色彩規(guī)范中，可以總結(jié)將色彩劃分為4種類型：
主色（品牌色）
常用于主按鈕、文字高亮、重要信息高亮等場景～
中性色
常用于文字、圖標(biāo)、卡片背景色、分割線、邊框之類的～用于處理頁面信息主次關(guān)系，助力閱讀體驗～
功能色（語義色）
功能色代表了明確的信息以及狀態(tài)（比如成功一般用綠色，出錯失敗一般用紅色，提醒一般用橙色/黃色，鏈接一般用藍色～）
擴展色
常用于更多顏色需求場景，比如Dashboard頁面的圖表（數(shù)據(jù)可視化）、插畫配圖等
通常會制定8色板、12色板、16色板。比如Ant design的色彩系統(tǒng)是制定了12個色板，Atlassian design是制定了8個基礎(chǔ)色板（可以衍生16或者24色板），Material design色彩體系是制定了16個色板～
在創(chuàng)建之前，我們先了解一下HCT / HSL / HSB 色彩空間
這些色彩空間的區(qū)別，想要了解的可以到網(wǎng)上查找一些專業(yè)知識～我們這里只針對項目中使用哪一種色彩空間能夠為設(shè)計師調(diào)色帶來便捷性出發(fā)。
H-色相/色調(diào)
是色彩的基本屬性，就是平常所說的顏色名稱(如紅色、黃色)等，取值在0—360度之間（黑色與白色無色相）；
S-表示飽和度/純度
顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色；
B/L-表示明度
顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。
Ant design設(shè)計團隊使用的是HSB顏色模型進行設(shè)計，認為設(shè)計師在調(diào)整顏色時更容易對顏色有明確的心里期望，并促進團隊溝通。
HCT是Google研制的色彩空間～
H-Hue色相
取值在0-360之間；
C-Chroma色度
可以理解為色彩濃度，取值在0-100之間，數(shù)值越大，顏色濃度越濃；
T-Tone光度
也就是亮度，取值在0-100之間，數(shù)值越大，顏色越亮。
*個人認為無論采用哪一種色彩空間，只要真正能夠幫助到我們運用在項目中，都是可以滴
品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一，常用于主按鈕、文字高亮、重要信息高亮等場景～
確定產(chǎn)品主色的思路有以下幾種：
了解業(yè)務(wù)屬性
屬于哪一個行業(yè)、產(chǎn)品的定位是什么、目標(biāo)受眾群體，想給用戶傳達怎樣的視覺感覺；
競品分析
了解同業(yè)務(wù)屬性的產(chǎn)品一般用的哪些顏色，從而獲得靈感；
滿足WCAG2.0標(biāo)準(zhǔn)
文本的視覺呈現(xiàn)以及文本圖像至少要有1:4.5的對比度，以確保所有的文字內(nèi)容清晰易讀，對比度足夠。工具網(wǎng)址：Color review https://color.review
從B端領(lǐng)域里面一些國內(nèi)國外大廠的設(shè)計規(guī)范中，我分別將主色在亮暗模式背景下進行可讀性測試，學(xué)習(xí)到以下內(nèi)容：
1. 亮暗模式下可以選取不同顏色做為主色，但亮暗模式的兩個主色是在同一個色板的衍生色上；比如國內(nèi)的TDesign，國外的Shopify\Atlassian\Salesforce色值不同；一般情況下會選用一樣的主色在亮暗模式下；
2. Shopify\Atlassian\Microsoft無論在白色背景還是黑色背景上，都滿足WCAG2.0的標(biāo)準(zhǔn)。剩下的要么在白色背景上不滿足，要么在黑色背景上不滿足。（當(dāng)然這些都只是作為難捏不準(zhǔn)主色時的一個參考，并不是規(guī)則～）
我負責(zé)的一款海外產(chǎn)品，主要是對服務(wù)器、數(shù)據(jù)庫監(jiān)控分析的工具，客戶選定的主色是藍色系，他們很喜歡datadog這個產(chǎn)品，我發(fā)現(xiàn)該產(chǎn)品的主色在HSB模式下，S色彩濃度高 B明度值76視覺上偏灰，加上客戶產(chǎn)品的logo主色H值是偏紫色調(diào)，所以最終確定在亮模式下用#0756D5為主色（亮暗模式的選擇，我打算采用Shopify\Atlassian\Salesforce的方法，暗模式下用主色的衍生色～）
功能色可以用于特定功能、狀態(tài)反饋、應(yīng)用圖標(biāo)、dashboard數(shù)據(jù)表盤等場景，最常用到的反饋的成功、失敗、警告狀態(tài)～
結(jié)合參看其他優(yōu)秀的文章，加上我自己的一些實踐思考，方法匯總?cè)缦拢?
1.以主色色相為基礎(chǔ)，差值15°，圍繞360°色環(huán)取24色～另外大家都知道相差15°的顏色為鄰近色，那我們提取出來的任何兩個相鄰的顏色都是鄰近色，我們拆分出來的色彩是比較和諧的~
以我負責(zé)的海外項目為例～
2.根據(jù)自身產(chǎn)品系統(tǒng)的復(fù)雜度，在24色板上去掉接近的顏色，篩選出一定說的顏色。前面也有提到一般是8、12、16色板。我負責(zé)的項目選擇是10個色板～
3. 色彩校正
HSB色彩空間最大的弊端就在于相同 Saturation（飽和度） 和 Value（亮度）的色彩，在不同的 Hue （色相）上的亮度感知是完全不一樣的，其原因是 HSV/HSL 色彩空間是應(yīng)用于數(shù)字化圖像處理領(lǐng)域，為了方便機器理解、計算、呈現(xiàn)而設(shè)計，是人類視覺的線性模型，但人類的感知卻是非線性的，所以造成數(shù)值與感知不匹配的問題
市面上的校準(zhǔn)方式一般是在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無彩色視覺感官明度～具體怎么調(diào)，是不是就按照這個方式全部都要調(diào)成統(tǒng)一的感官明度？我去研究了Apple/Material design/Ant design的色板，從里面選取統(tǒng)一編號的顏色，發(fā)現(xiàn)如下：
他們的色彩明度并不是完全一致的，一般是橙色、黃色這些帶有語義的顏色明度會亮一些～所以色彩校正不能完全調(diào)成一樣的感官明度，只能作為一個輔助。
為了滿足界面對色彩的需求，需要對主色和輔助色進行色板延伸，建立不同梯度的調(diào)色板。常用的有2種方法：
第一類：手動調(diào)整
1.淺色調(diào)色板，在顏色上有序疊加（ 比如20%、40%、60%、80%、90%）不透明度的白色#ffffff；深色調(diào)色板，在顏色上有序疊加 （比如20%、40%、60%、80%）不透明度的黑色#000000。（數(shù)值并不是固定的，設(shè)計師可按需自行調(diào)整～）
2.淺色調(diào)色板，色相（H）往感光明度高的色相依次差值 2，飽和度（S）依次減少 15，明度（B）依次增加 5；深色調(diào)色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次減少 15，飽和度（S）依次增加 5。（Ant Design 和 Material Design 調(diào)色板也都加了色相旋轉(zhuǎn)）
第二類：使用色板生成工具（走捷徑）
1.Material Design
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
2. Ant Design
https://ant.design/docs/spec/colors
3. ColorBoX
4.figma插件Supa Palette(收費)
中性色包含了黑、白、灰，是頁面中文字、背景常用的顏色，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關(guān)鍵。
最熟悉的常見文字顏色就是#333，#666，#999，我喜歡直接拿Material design的灰色色板來用，同時還會拓展藍灰色板（在確定好灰色色板后，在上面疊加主色的不透明度即可生成藍灰色色板～）應(yīng)用于圖標(biāo)、背景、描邊。
最后，得出所有顏色的同色系色階：
從色板里面挑選亮模式下主色為Primary600，暗模式下主色為Primary400，實際效果圖如下：
dashboard數(shù)據(jù)可視化頁面的配色方案我是如何實踐的呢？
結(jié)合AntV數(shù)據(jù)可視化色彩體系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/
匯總?cè)缦拢?
根據(jù)不同數(shù)據(jù)類型、使用場景擴展出 6 種可視化色板類型
適用于描述不同類別的數(shù)據(jù)，比如餅圖的不同分類、填充地圖中的不同國家、關(guān)系圖中的不同角色等
適用于表示數(shù)據(jù)樣本中數(shù)值或梯度的變化，如排行榜等級變化、風(fēng)險等級變化等
適用于描述數(shù)據(jù)正負值的變化，中間一般會有一個中間值（通常為0），比如氣溫的冷熱、海拔高低、股票漲跌等
將兩組順序色板通過圖層疊加模式產(chǎn)生一組新的色板，一個顏色代表兩種變量數(shù)據(jù)，常用于觀察一個事物兩個維度變化的相關(guān)性
對比突出重點或特殊數(shù)據(jù)，將重點關(guān)注的數(shù)據(jù)標(biāo)以高飽和度的強色調(diào)，其他普通數(shù)據(jù)標(biāo)以低飽和、低明度的基本色。常用于對比重點關(guān)注事物與其他分類事物的差別
適用于氣象預(yù)警配色、紅綠燈配色、股市的紅漲綠跌等
我負責(zé)的項目數(shù)據(jù)類型采用的是兩種配色方案
1.不同類別的數(shù)據(jù)，圖表類型有餅圖、折線圖、柱狀圖采用分類色板；
2.明確表明狀態(tài)的用語義色板
如何從色彩系統(tǒng)中調(diào)分類色板呢，我常用的方法如下：
1. 參照Echart的配色規(guī)律(保守不會出錯的方法)
2. 研究市面上做的好的表盤產(chǎn)品（比如Mixpanel）或者競品Datadog的配色規(guī)律
3.無障礙測試校驗-色盲群體的適用性
大約10%的世界人口是色盲，可以借助工具來校驗：Adobe color 網(wǎng)頁版 https://color.adobe.com/zh/create/color-accessibility
實踐才是檢驗真理的唯一標(biāo)準(zhǔn)～色彩規(guī)范只是為了讓設(shè)計更有章法、更有說服力，在運用色彩時還是需要謹慎克制，可以研究各大廠的設(shè)計規(guī)范，然后把學(xué)到的東西運用在項目實踐中。
作者：志龍有妖氣_zlyyq 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字數(shù)據(jù)。
通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系，建立很強的心智圖景。
其間也穿插了很多職能相關(guān)部分的對比，如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。
作者：Viola_1241 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計公司
莫奈是一款主要服務(wù)京東內(nèi)部用戶的數(shù)據(jù)可視化平臺，它以容器的形式將京東城市各種與智慧城市建設(shè)及運營相關(guān)的能力聚合，并以可視化的形式面向客戶呈現(xiàn)。
作為京東莫奈的設(shè)計負責(zé)人，過去三年一直負責(zé)莫奈可視化平臺的用戶體驗設(shè)計工作，由于本人日常設(shè)計主要以智慧城市、數(shù)據(jù)可視化大屏為主，所以我即是莫奈的設(shè)計負責(zé)人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關(guān)的問題，這些問題，部分在產(chǎn)品日常迭代中得到了優(yōu)化，但是也有相當(dāng)一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設(shè)計師，我日常與業(yè)務(wù)方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側(cè)收集了不少使用體驗相關(guān)的問題。我對以上兩個渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認為這些問題比較嚴(yán)重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產(chǎn)品迭代的周期，針對莫奈體驗問題，進行一次密集的優(yōu)化和革新，這便是本次莫奈體驗升級改版的基礎(chǔ)背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設(shè)計中用到的一些方法、流程和經(jīng)驗與大家做次交流和分享，希望能為同行在類似的改版設(shè)計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產(chǎn)品負責(zé)人的多次溝通，我們事實上已經(jīng)對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數(shù)產(chǎn)品的體驗升級都可參考下面的流程執(zhí)行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產(chǎn)品負責(zé)人、開發(fā)負責(zé)人等關(guān)鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預(yù)估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節(jié)奏有條理，避免工作內(nèi)容長時間停滯在某一個環(huán)節(jié)而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗設(shè)計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責(zé)任將用戶的聲音轉(zhuǎn)化為需求，并推進落地為產(chǎn)品的一部分；從產(chǎn)品團隊來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務(wù)方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產(chǎn)品架構(gòu)做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學(xué)的角度看，以往不合理的底層代碼設(shè)計，使產(chǎn)品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學(xué)總要消耗部分精力去維護那部分不穩(wěn)定的存在，從而導(dǎo)致研發(fā)同學(xué)人效比低、開發(fā)體驗差；從上級Leader來看，公司的核心經(jīng)營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優(yōu)化都依賴于強悍的技術(shù)和優(yōu)秀的產(chǎn)品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現(xiàn)實執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計師也有相當(dāng)大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價值便得以體現(xiàn)。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現(xiàn)，莫奈的使用具有上下游的關(guān)聯(lián)性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業(yè)務(wù)，往往具有比核心用戶更高的決策權(quán)。因此我們優(yōu)先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時，我們也通過對內(nèi)外的宣講和培訓(xùn)，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經(jīng)獲取了不少用戶反饋、收集了相當(dāng)?shù)膯栴}建議，但作為體驗升級的系統(tǒng)性工作，為了更全面的了解用戶體驗痛點，我們還是設(shè)計了一次完整的用戶調(diào)研活動。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實的反饋。
用戶調(diào)研的核心目標(biāo)是充分收集用戶反饋，并將反饋結(jié)果量化及系統(tǒng)化，量化后的結(jié)果可做為設(shè)計側(cè)推動產(chǎn)品執(zhí)行體驗優(yōu)化的關(guān)鍵依據(jù)，也可以作為后續(xù)驗證優(yōu)化結(jié)果的對照項。
本次問卷設(shè)計我們參考了PSSUQ整體可用性量表，并結(jié)合本次調(diào)研目標(biāo)做了部分調(diào)整。
PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個方面將體驗結(jié)果量化，然后通過與行業(yè)基本經(jīng)驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當(dāng)前整體體驗結(jié)果有一個全局的概況性評價。同時根據(jù)三個方向的評分也可以更細致的指導(dǎo)后續(xù)的設(shè)計優(yōu)化方向，為設(shè)計決策提供更多科學(xué)可信的依據(jù)。
PSSUQ整體可用性量表作為一個通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(nèi)容更加符合本次調(diào)研目標(biāo)。
問卷設(shè)計好之后，接下來就是問卷發(fā)放以及結(jié)果分析了。
PSSUQ量表內(nèi)每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調(diào)研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數(shù)量：20），說明問卷結(jié)果具有較好的可信度，其結(jié)果值得進一步研究。
通過整理和統(tǒng)計問卷數(shù)據(jù)，可以得出以下結(jié)論：
1、內(nèi)外部用戶在系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個維度對莫奈均不滿意
2、對比行業(yè)經(jīng)驗值（均值），莫奈系統(tǒng)總體體驗質(zhì)量與行業(yè)同類產(chǎn)品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結(jié)果與日常同相關(guān)同學(xué)的溝通結(jié)果一致，以上評分結(jié)果也反映出此次體驗升級的緊迫性，作為由設(shè)計驅(qū)動的改版設(shè)計，設(shè)計側(cè)面臨較大壓力。
在設(shè)計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標(biāo)做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個選項以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關(guān)聯(lián)屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產(chǎn)品的反應(yīng)速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎(chǔ)的使用體驗，后者決定產(chǎn)品能多大程度上便捷的服務(wù)用戶。良好的穩(wěn)定性和反應(yīng)速度可以讓用戶專注于任務(wù)本身，而使用模板能最快速的產(chǎn)出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復(fù)雜場景下的業(yè)務(wù)需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當(dāng)前產(chǎn)品日常迭代中優(yōu)化的點，我整理后會以需求的方式向產(chǎn)品團隊提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關(guān)信息，并將相關(guān)問題梳理到本次改版任務(wù)中，做系統(tǒng)的解決和處理。
在【05、體驗痛點分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數(shù)據(jù)....。之后，在用戶完成基礎(chǔ)任務(wù)后，我們還會針對用戶關(guān)心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內(nèi)部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產(chǎn)品團隊并同步添加反饋問題的用戶為該需求的關(guān)注者，后續(xù)，當(dāng)該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環(huán)。這樣做既是我們團隊的責(zé)任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。
通過線上問卷調(diào)研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產(chǎn)品建設(shè)的上下游協(xié)作關(guān)系，把每一個具體的問題匯總給對應(yīng)的角色，并由對應(yīng)的角色產(chǎn)出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關(guān)于體驗升級的所有事項及具體任務(wù)便可周密安排，之后便是資源投入、推進升級工作具體執(zhí)行。
用戶體驗5要素模型，從產(chǎn)品的戰(zhàn)略層出發(fā)，層層遞進直到表現(xiàn)層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側(cè)同學(xué)更是如此，他們鮮有意識到產(chǎn)品的目標(biāo)、內(nèi)容以及性能等這類的因素，也是構(gòu)成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續(xù)迭代的產(chǎn)品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現(xiàn)，而是要通過持續(xù)不斷的改進和優(yōu)化才能持續(xù)滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導(dǎo)產(chǎn)品及研發(fā)團隊更好的理解用戶體驗，這樣不僅能幫助設(shè)計師在本次體驗升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責(zé)人產(chǎn)出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結(jié)果，體驗升級方向以設(shè)計為主導(dǎo)，同時兼顧產(chǎn)品和研發(fā)的部分目標(biāo)，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質(zhì)量提升”解決表現(xiàn)層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗升級方向作為對體驗升級結(jié)果的導(dǎo)向，將指導(dǎo)后續(xù)設(shè)計動作的展開。
基于體驗升級方向，接下來就要制定具體的設(shè)計策略，來實現(xiàn)體驗升級方向中要達成的結(jié)果。設(shè)計策略制定第一步先確定設(shè)計目標(biāo)，我們將設(shè)計目標(biāo)拆解為三個方向，每個方向通過兩個關(guān)鍵詞定義。設(shè)計目標(biāo)主要分為視角與交互兩個方向，同時兼顧產(chǎn)品側(cè)“易拓展、易維護”的需求。實際設(shè)計中，視覺與交互并非獨自分開進行，在設(shè)計開始的階段，需要先定義設(shè)計風(fēng)格等基礎(chǔ)設(shè)計要素，之后視覺便可在此基礎(chǔ)之上全面展開，此時視覺設(shè)計要考慮交互的效果，交互設(shè)計也需要斟酌設(shè)計的展現(xiàn)。
對于設(shè)計目標(biāo)中關(guān)鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(guān)鍵詞所表現(xiàn)出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關(guān)鍵詞所表達出的意象的設(shè)計要素，之后通過在設(shè)計中應(yīng)用這些設(shè)計要素，就能把關(guān)鍵詞定義的抽象的設(shè)計概念轉(zhuǎn)化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關(guān)聯(lián)算法，針對“科技和高效”這兩個視覺目標(biāo)的關(guān)鍵詞收集了海量的音視頻設(shè)計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現(xiàn)“科技、高效”這兩個概念的所有設(shè)計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設(shè)計執(zhí)行的過程中應(yīng)用這些設(shè)計要素，通過合理的搭配和組織，將這些設(shè)計要素融入到莫奈新的設(shè)計語言，如此，產(chǎn)品最終便可在視覺上呈現(xiàn)出與視覺目標(biāo)關(guān)鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設(shè)計要素其實已經(jīng)足夠具體，但是如何將這些要素應(yīng)用在設(shè)計中，我們還需要進一步歸納。我個人一直以來習(xí)慣從形、色、字、質(zhì)、構(gòu)、動、音7個維度分析一個設(shè)計作品的設(shè)計風(fēng)格，就如同人體是由肌肉、骨骼構(gòu)成的一樣，以上7個維度也是構(gòu)成一個設(shè)計作品的“經(jīng)、骨、肉”。所以，我認為對于一個設(shè)計作品，尤其是UI設(shè)計作品，以上7個維度基本能夠完全概況它的風(fēng)格，所以當(dāng)我要為自己的產(chǎn)品做風(fēng)格設(shè)定時，我也是從這7個維度出發(fā)來為每個維度定義具體的風(fēng)格和策略。
這種細分維度然后定義風(fēng)格的方式有多種優(yōu)勢，其中最明顯的是它能夠?qū)⑽覀冿L(fēng)格定義的設(shè)計工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計要素的特點，這時候我只需要對“質(zhì)感”這個維度的風(fēng)格進行優(yōu)化和調(diào)整，而不需要推翻整個7要素重新再來。這種設(shè)計方式讓我的設(shè)計更加理性，也讓后續(xù)設(shè)計執(zhí)行的工作更加的有條理和舒適，從設(shè)計風(fēng)格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設(shè)計感受的方法。
對于產(chǎn)品界面的造形設(shè)計，一方面依照情緒版中提取的設(shè)計要素“透視、空間感、異構(gòu)造形”來考慮，另一方面我也結(jié)合莫奈的產(chǎn)品Logo做了適當(dāng)?shù)某橄蠛脱堇[；兩者結(jié)合最終確定了當(dāng)前莫奈的造形設(shè)計。
首先，產(chǎn)品左側(cè)主導(dǎo)航采用了具有一定透視角度的異形設(shè)計；產(chǎn)品頂部標(biāo)題區(qū)域也采用了相同的設(shè)計思路：左側(cè)為品牌Logo設(shè)計了一個容器，Logo在其中容納放置；Logo右側(cè)收起的區(qū)域預(yù)留了常用公告、跑馬燈的設(shè)計，方便產(chǎn)品把日常重要信息同步給用戶；最右側(cè)呈現(xiàn)用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設(shè)計，用戶是否能夠接受，在設(shè)計開始時我存在一定的疑慮，因此在設(shè)計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設(shè)計有創(chuàng)意具有鮮明的特點，也有部分用戶認為透視的設(shè)計看著較為怪異，尤其是左側(cè)主導(dǎo)航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數(shù)值中選擇了一個即能展示透視的設(shè)計效果、又不至于透視過大導(dǎo)致文本圖標(biāo)等變形嚴(yán)重而不易識別的角度，其次，我還配合開發(fā)同學(xué)對導(dǎo)航透視文本和圖標(biāo)的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項優(yōu)化完成后，新的用戶測試表明大家對該設(shè)計的滿意度有很好的提升。
莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關(guān)鍵詞，結(jié)合情緒版提取的設(shè)計要素，將原有品牌色做了細微的調(diào)整。首先藍色飽和度增加，綠色調(diào)整色相使其偏向藍色的一端并增加亮度。如此，當(dāng)兩個顏色搭配使用時，藍色作為主色調(diào)體現(xiàn)科技、可靠的視覺和心理感受；綠色作為點綴色和強調(diào)色，體現(xiàn)活力、高效與創(chuàng)新。藍綠對比強烈，具有很好的場景適應(yīng)性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗升級方向中定義的“增強品牌特色”的目標(biāo)以及情緒版中提取的非襯線的設(shè)計要素，對于字體的設(shè)計風(fēng)格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現(xiàn)字體風(fēng)格的設(shè)計目標(biāo)，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經(jīng)過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現(xiàn)京東的品牌特色并體現(xiàn)出與其它產(chǎn)品差異化的字體設(shè)計。京東正黑體主要用于莫奈產(chǎn)品中的數(shù)字、拼音、英語、數(shù)值符號四個場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當(dāng)其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時，其小數(shù)點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當(dāng)字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現(xiàn)象，加之該字體很少更新，沒有針對當(dāng)前高像素密度、高分辨率的屏幕特點做相關(guān)的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調(diào)研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯(lián)合開發(fā)的開源字體，其字重豐富、字形簡潔、現(xiàn)代，能夠很好的適應(yīng)PC與移動端的顯示，也能適應(yīng)當(dāng)前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現(xiàn)。除此之外，思源黑體的字形特點與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。
結(jié)構(gòu)設(shè)計主要目標(biāo)是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構(gòu)建所需的大多數(shù)功能，也是莫奈產(chǎn)品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設(shè)計雖然也有不錯的設(shè)計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設(shè)計規(guī)范，大屏編輯器頁面的產(chǎn)品需求總是需要UI產(chǎn)出設(shè)計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設(shè)計、開發(fā)和維護都具有較高的成本。
新的改版設(shè)計，在設(shè)計之初就聯(lián)合產(chǎn)品對編輯器內(nèi)的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當(dāng)前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數(shù)量，同時每個組件也針對自身功能和用途的特點進行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計兼顧了開發(fā)與設(shè)計同學(xué)使用莫奈的場景。對于開發(fā)同學(xué)，他們在代碼中習(xí)慣使用十六進制色值，而設(shè)計師更習(xí)慣于RGBA或HSLA的調(diào)色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設(shè)計同學(xué)確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設(shè)置的模式以統(tǒng)一的格式呈現(xiàn)。而諸如此類優(yōu)化，在本次體驗升級中不勝枚舉。
莫奈的動效設(shè)計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設(shè)計風(fēng)格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網(wǎng)頁端實時渲染，具有矢量動畫的特點，能適應(yīng)多種設(shè)備及屏幕分辨率，具有優(yōu)秀的前端呈現(xiàn)效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設(shè)計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優(yōu)化，我們交互優(yōu)化的目標(biāo)是“簡單、流暢”。
首先進行交互優(yōu)化的是各類圖表的屬性及配置項設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數(shù)據(jù)、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現(xiàn)了什么數(shù)據(jù)、圖表可以與用戶進行那些互動三個維度解決了圖表在數(shù)據(jù)可視化呈現(xiàn)中最基礎(chǔ)的需求。由于圖表在數(shù)據(jù)可視化呈現(xiàn)中頻繁使用，所以與圖表配置相關(guān)的操作自然也是相當(dāng)高頻和常用。當(dāng)前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內(nèi)容進行修改；第二是批量對多個圖表的相同屬性進行修改在當(dāng)前版本不可用，導(dǎo)致用戶圖表配置成本高。針對用戶最關(guān)心最影響體驗的兩個交互問題，我的優(yōu)化方案如下。
要解決問題，首先要知道問題從何而來。經(jīng)過深入與產(chǎn)品、研發(fā)同學(xué)及部分用戶訪談溝通后，我發(fā)現(xiàn)當(dāng)前導(dǎo)致圖表配置項層級過深主要有兩個原因，分別是產(chǎn)品規(guī)劃與設(shè)計展現(xiàn)。
具體來講，產(chǎn)品層面有三個問題：
01、產(chǎn)品對于當(dāng)前圖表配置項的結(jié)構(gòu)梳理是以程序的邏輯來呈現(xiàn)，而非以用戶的視角來歸納。舉個栗子，在當(dāng)前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數(shù)據(jù)系列>系列名稱>形狀設(shè)置>顏色設(shè)置。而這一路徑為何如此設(shè)計？因為顏色這個屬性的后端代碼就是這樣的結(jié)構(gòu)。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現(xiàn)的內(nèi)容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設(shè)置時往往需要在樣式一級菜單下點擊多個屬性、反復(fù)嘗試確認，才能最終完成顏色修改的設(shè)置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結(jié)構(gòu)設(shè)計是必要的么？答案是并不是！因為只有用戶關(guān)注的才是有用的，產(chǎn)品應(yīng)該提供用戶想要的內(nèi)容而不是強塞給用戶產(chǎn)品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當(dāng)?shù)膶ε渲庙椬鲂┚?，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現(xiàn)無關(guān)緊要的內(nèi)容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯(lián)合產(chǎn)品經(jīng)理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當(dāng)所有圖表的配置項都以思維導(dǎo)圖的形式呈現(xiàn)時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結(jié)構(gòu)存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設(shè)計和產(chǎn)品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結(jié)論，對此，一方面我們通過為配置項區(qū)域增加數(shù)據(jù)埋點，分析用戶對各個配置項使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調(diào)研了同類產(chǎn)品中一些用戶量較大、設(shè)計質(zhì)量較高的產(chǎn)品來進行當(dāng)前有限的優(yōu)化。
配置項層級過深的另一個原因，是屬性配置列表的結(jié)構(gòu)及布局設(shè)計存在“深層級、空間利用率底”的特點。
如下圖，左側(cè)圖片示意了舊版莫奈的配置列表設(shè)計結(jié)構(gòu)?？梢钥吹脚f版設(shè)計完全采用樹結(jié)構(gòu)的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區(qū)分，舊版的設(shè)計基準(zhǔn)尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導(dǎo)致信息展示困難；其次，樹狀的結(jié)構(gòu)在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標(biāo)滾輪才能看全信息，綜上，舊的設(shè)計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設(shè)計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設(shè)計，將提煉后的一級屬性標(biāo)簽固定在屬性配置列表左側(cè)。相較于之前，這樣的設(shè)計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側(cè)屬性內(nèi)容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設(shè)計采用分隔線與色塊結(jié)合的方式來表達屬性列表內(nèi)的層級關(guān)系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數(shù)據(jù)可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統(tǒng)一修改、一次性調(diào)整的需求非常迫切和剛需。比如當(dāng)前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調(diào)整為相同的綠色，在用戶的視角下，此時的操作應(yīng)該是先選中6個想要調(diào)整的圖表，然后找到橫軸顏色設(shè)置項，之后統(tǒng)一調(diào)整色彩。但莫奈當(dāng)前的版本，如果用戶按照上述流程操作，看到的將是下圖左側(cè)的示例：圖表多選之后，對齊、坐標(biāo)等基礎(chǔ)項仍然可用，而與屬性相關(guān)的其它設(shè)置并沒有被聚合并呈現(xiàn)，在此情況下，用戶想要完成最初的目標(biāo)就只能6個圖表逐個依次調(diào)整！顯然，這樣的操作并不符合用戶預(yù)期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關(guān)的問題，同時也是一個強技術(shù)相關(guān)的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經(jīng)完成了對60多個圖表的細致分析，有了這項工作的基礎(chǔ)，當(dāng)前面臨的問題便不那么棘手。如右側(cè)示例：當(dāng)用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。
新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預(yù)覽與模板展示。
創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏?xí)r可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內(nèi)部編輯器是什么樣，或許用戶有實際項目，但當(dāng)前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設(shè)計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標(biāo)，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預(yù)覽與模板展示優(yōu)化：原有的設(shè)計，當(dāng)用戶點擊創(chuàng)建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內(nèi)包含一個空白模板以及有限多個其它內(nèi)容模板，而在如此狹小的區(qū)域展示這么多內(nèi)容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設(shè)計首先是全屏鋪開，盡可能充分的利用頁面空間。
在模板展示及預(yù)覽方面，我設(shè)計了列表展示與縮略圖分布展示兩種方式，并添加了分類標(biāo)簽和搜索按鈕，此外還聯(lián)合產(chǎn)品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用
模板預(yù)覽方面，在兩種布局模式下，用戶鼠標(biāo)滑過模板縮略圖時，模板均會以較大的視圖動態(tài)呈現(xiàn)模板內(nèi)容。在列表模式下，模板預(yù)覽窗口固定在頁面右側(cè)區(qū)域；縮略圖分布的模式下，預(yù)覽窗口根據(jù)鼠標(biāo)指針的位置激活。當(dāng)用戶選中某個模板時，點擊底部創(chuàng)建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內(nèi)容進一步完成自己的定制化設(shè)計。
如今移動端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當(dāng)前也逐步從移動端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設(shè)計在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當(dāng)前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進一步提升搜索的效率。
一個數(shù)據(jù)可視化場景，通常是由N個數(shù)據(jù)圖表與其它數(shù)據(jù)要素一起構(gòu)成的多個頁面來呈現(xiàn)和展示的。這些頁面內(nèi)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調(diào)研時發(fā)現(xiàn)，大部分用戶都沒有給組件規(guī)范命名的習(xí)慣，大多數(shù)情況下，組件在圖層面板列表內(nèi)都是以默認名稱或者默認名稱+1、2、3的形式存在。這導(dǎo)致了當(dāng)頁面組件較多時，通過組件命名來查找組件其實相當(dāng)困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗?？s略圖以快照方式保存當(dāng)前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。
新的設(shè)計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設(shè)計更明顯的分組示意圖標(biāo)以及為組內(nèi)列表添加深色色塊的方式，完成了成組對象與列表內(nèi)其他要素區(qū)分的需求，新的設(shè)計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設(shè)計元素。
此次體驗升級是設(shè)計主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗設(shè)計師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時刻關(guān)注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉(zhuǎn)化為體驗痛點、制定對應(yīng)的優(yōu)化策略是體驗設(shè)計師的基本功。而對于設(shè)計和產(chǎn)品本身是否熱愛，也是設(shè)計能否不斷精進、體驗是否能夠不斷提升的關(guān)鍵。好的設(shè)計不僅服務(wù)了產(chǎn)品、幫助了用戶、同時也成就了設(shè)計師本身。
本人為莫奈提供設(shè)計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內(nèi)部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗優(yōu)化建議；以線下線上的形式面向莫奈產(chǎn)品及研發(fā)團隊進行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團隊建立了非常友好緊密的聯(lián)系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設(shè)計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關(guān)乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗的能力，并將其應(yīng)用到體驗設(shè)計師的職業(yè)工作中，我相信，倘若如此實踐，必能在職業(yè)和生活中都獲得有不錯的成就。
好的產(chǎn)品，必然是持續(xù)關(guān)注用戶訴求，不斷迭代發(fā)展的產(chǎn)品，好的體驗設(shè)計也必然是陪伴產(chǎn)品不斷優(yōu)化、持續(xù)精進的設(shè)計，復(fù)盤的意義不僅是沉淀過去的經(jīng)驗，更是為未來更好的體驗蓄能。
此次分享如能為大家?guī)砟桥乱稽c點的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.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è)計的小編 http://www.bouu.cn