筆者在車聯網行業任職HMI視覺設計師，由于HMI設計發展的較晚，所以基本上在開始進入到這個領域的人，大多來自于互聯網行業。由于互聯網行業發展的比較早，形成了一套成熟的工作流程，即：分工明確的遞進式協作：交互設計師要等到產品PRD評審結束才開始介入需求，然后交付黑白線框稿等給到視覺設計師繼續跟進。這種工作模式可以讓每個人在自己的崗位上做得更加專業，成為垂直領域的專家。在車聯網行業發展初期的時候，這種工作模式對于傳統行業的來講，比較新穎、高效，所以在一定程度上促進了行業發展，但汽車操作系統的設計還是有很多不同于互聯網設計的地方，所以本文旨在討論HMI工作流程，如何分工，怎樣高效的進行設計協同，以期望探索更適合車聯網行業的設計協同方案，希望對你可以有所助益。
對于HMI設計來講，需要了解很多專業知識，比如：屏幕、硬件、三電、法規……這些東西都會影響到設計的視覺表達，所以設計協同就顯得尤為重要，那么什么是設計協同呢？指設計師在設計之初，即可開啟分享與協作，讓協同者盡可能早的參與到設計中，通過提供一系列工具，讓協同者有更加友好地體驗，保證每個人都可以準確找到相應需求的內容，并且快速提出修改意見與反饋。簡單地講，就是讓每個人都參與到設計過程中，以使最終的結果能夠滿足用戶的需求。
從產品功能邏輯層面來講，HMI設計的“復雜度”是具有有一定的“限制性”的，即保證安全第一，過度復雜的設計必然影響駕駛和乘坐人的安全。所以對于設計，是需要進行全方位評估的，必然會涉及到不同的角色。同時隨著項目的不斷發展，設計團隊也在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本就會不斷增加。如何才能更高效的合作，并把設計質量和一致性做得更好，是我們需要解決的問題。所以設計協同的最終目的是為了解決問題，做正確的事，讓設計師做真正該做的事情。
讓設計師專注于真正重要的事情，而不是把精力放在可以自動化處理的事情上。對所有人員的工作進行集中化管理，所有人員基于統一數據源進行協作。
通過構建團隊資產庫，比如設計規范、控件組件庫等，通過建立健全設計規范，讓數據沉淀，一方面讓設計師的設計有據可依，提升設計的專業性，另一方面，減少因為人員變動造成的數據丟失。
在設計之初，就讓協同者參與到設計之中，保證每個人都可以準確的找到他們的需求內容，并快速提出修改意見與反饋，讓設計師更有針對性的解決問題，讓設計師無需做重復性的工作。
在HMI設計的工作流程中，主要涉及到的角色有產品經理、交互設計師、視覺設計師、研發工程師、測試工程師、項目經理。
不同角色主要工作內容是：
圍繞著HMI設計的整個工作流程是：
產品經理確認需求，輸出PRD文檔；交互設計師收到PRD文檔以后，基于需求，梳理功能，完善業務流程，完成交互文檔的制作，輸出UE文檔；視覺設計師在收到UE文檔以后，針對交互文檔中的流程頁面，進行視覺設計，輸出UI文件給到研發同學；研發同學根據UI文件和交互文檔進行代碼化，完成以后進入測試環節，測試工程師和產品、交互、視覺都需要參與到測試過程中，當完成測試工作以后進行發版。
涉及角色
自己、設計師小團隊。
痛點
工作中很多重復的內容，比如：Button、List等使用的地方很多，如果每個元素都重新繪制，勢必會投入很多時間，同時因為人為因素，難免會出現不統一的地方。那么怎么樣解決這個問題呢？
協同方式
當團隊初期發展的時候，或者整個團隊只有少數幾個設計師的時候，通過匯總通用樣式和組件，形成視覺指導Guide，方便通用樣式的復用，減少重復工作量，達到快速完成視覺設計的目的。
優點
通過樣式庫和控件組件庫的搭建，形成了一定的共有樣式，方便復用，有效的減少了重復工作量。
缺點
由于控件組件庫是在設計進行到一定程度以后提煉的，會存在滯后性，并且隨著設計工作越來越往后，會發現前期的控件組件存在不合適的地方，需要對之前的工作進行修正。
涉及角色
設計團隊內部。
痛點
當公司發展到一定的階段：
當設計團隊越來越大，大家分工越來越細，想法越來越多，就會發現，復制粘貼guide的方式，已經無法滿足團隊的發展了，經常出現組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。
同時因為沒有統一的流程，會發現不同的業務對于同一功能交互邏輯的不統一現象，比如：搜索是很多業務都會使用的功能，因為沒有統一定義，有的業務會采用即時搜索模式，有的業務必須點擊搜索以后才可以進行搜索，并且這種問題，前期很難發現，只有到了中后期走查的時候才會發現。
所以在后期會針對每一個差異點進行統一，需要全流程重新來一遍，費時費力。那么怎么才可以避免這種情況的發生呢？答案就是構建設計系統。
協同方式
設計系統不同于guide的地方是：樣式，控件組件只是設計系統中的兩個組成部分，除此以外，設計系統還包括了一系列的標準來指導設計。比如：圖標、動效、音效等。這些標準記錄了設計團隊內達成一致的一系列的決定，比如如何選擇控件，如何在不同的控件中選擇。正是這些標準才確保了設計方案不僅僅只解決一個問題，而是可以被復用的。這些標準也是為什么用戶能獲得一致的體驗的原因。
通過設計系統的建立，讓設計規?；?，繼而進一步強化車機系統的統一性，同時為設計師在做設計時提供一個很好的指導方向，讓團隊內不同成員的設計在風格上保持一致，提升設計團隊的專業度。關于設計系統的建立本文就不再過多描述，后續會出專門的文章進行詳述，這里主要是講述設計系統搭建以后的協同方式。
設計系統的搭建需要專門的人或者團隊進行，當搭建完成以后，需要輸出的資源有：UE控件組件庫、顏色/字體樣式庫、UI控件組件庫、UI控件組件說明文檔。這些資源各有什么用呢，接下來進行詳細說明：
UE控件組件庫
提供給交互設計師，基于提供的內容，交互可以快速的構建界面、交互和流程等，就像搭樂高一樣?？梢钥焖俚臉嫿ㄒ恍┊a品原型或者是實驗性的功能，來進行測試以快速驗證想法。
顏色/字體樣式庫、UI控件組件庫
提供給UI設計師，形式可以是Sketch Libraries，一方面方便設計師調用，使不同的設計師的設計變得更加統一，且更加可預測，同時組件也可以讓設計師更多的時間專注于如何構建更好的用戶體驗，而不是去糾結于樣式的調整。
UI控件組件說明文檔
提供給研發，可以是pdf之類的文檔形式，主要是詳細的描述每一個組件的各種屬性，以及里面包含的交互邏輯等，幫助研發搭建起研發自己的底層代碼平臺。
那么這些資源和不同的角色之間是怎么協作呢？UE控件組件庫不需要常常更新，完成后給到交互設計團隊，供交互設計師使用搭建UE文檔。在項目開始之前，負責設計系統的UI團隊進行顏色/字體樣式庫、UI控件組件庫制作，完成以后分享到團隊內，供業務設計師使用進行界面設計，同時進行UI控件組件說明文檔的編撰，完成以后提供給相應的平臺研發，讓平臺研發進行組件代碼化。當代碼實現以后進行走查，檢查是否按照UI準確的實現。當業務設計師完成了業務的界面設計以后，進行評審，輸出給對應的業務研發，研發對于相應的視覺界面進行對應的代碼化，使用組件的地方直接調用平臺代碼，剩下的由業務研發進行代碼化。
優點
組件由專門的UI設計師和研發團隊負責，當出現設計變更以后，業務設計師可以快速通過組件庫更新最新的視覺樣式，同時和平臺研發對接，進行代碼修改，而不需要每個業務研發單獨修改，大大減少了跨部門的協作溝通成本。
缺點
團隊內需要專門的設計師構建設計系統并負責日常維護。
涉及角色
設計、交互團隊。
痛點
由于需求的不確定性，以及車聯網項目周期較長等特點，會出現需求經常變更的情況，那么交互就需要不停的更新交互文檔，UI也需要不停的輸出視覺文檔，往往一個項目結束以后，會有幾十份甚至上百份的設計文檔的情況出現。
協同方式
隨著云端化辦公軟件Figma的興起，為多角色協作提供了可能性，目前主流的工具有：Figma、MasterGo、Pixso、即時設計等在線軟件。
設計文件現在是一個鏈接，這意味著：
UI設計師不必再等到交互完成評審，輸出交互文檔以后進行視覺設計，交互和設計完全可以合二為一，輸出一份高保真交互流程文檔，并且輸出的文檔可以供研發直接瀏覽器查看，而不需要像之前一樣，不停的進行設計資源的輸出。極大的節省了設計師輸出時間。優化了協作工作流。
優點
協作設計，云端辦公，多角色參與。
一鍵獲取文件，不需要通過其他平臺轉化，步驟簡單；自動生成代碼與標注。設計稿修改后自動更新，無需重復下載。
缺點
云端保存，會有數據泄露的風險。
必須在線操作。
涉及角色
UE、UI、研發。
痛點
由于公司發展，業務線增加了很多適配線，這塊的工作基本上屬于：把已有的UI適配到另一個屏幕尺寸下，需要設計的地方不太多，需要花更多的時間去重新按照最新的屏幕尺寸搭建一遍UI界面，屬于用時間換業績，為了達到這個目標，可以采取的方式大致分為兩種：
第一種是增加更多的人力，不管是招更多的人，還是增加更多的供應商人員，都會增加業務支出，并且由于業務無法一直保證飽和，所以會出現一段時間忙的要命，招了很多人員，過了這段時間，業務不太多了，大家都閑了下來，但是開支還是必要的，所以這算是一種沒有辦法的辦法，對于團隊或是公司來講，并不可持續。
另外一種方式就是重新梳理工作流，減少一些重復無意義的工作，比如像是系統設置等瀑布流式的界面，不同車型下的區別只來自于功能的有無，界面上并無太大區別，這里所說的工作，不僅僅指設計師的界面設計工作，同時也包括了研發同學的研發落地工作，同時因為研發同學的適配，也會造成測試走查環節，這些都是一些重復性的工作量，所以是否有一種更好的協作方式可以避免這種情況的發生呢？
答案就是我們接下來要講的一種全新的工作模式：C2D2C模式。
協同方式
由于設計團隊在早期的發展中，積累了大量的設計資產。這些設計資產的沉淀就是設計標準化的基礎，將設計資產轉為封裝好的代碼組件，也就是C2D的過程。然后將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調整實現頁面的設計就是 D2C 的過程。通過平臺設定交互行為和綁定后臺數據，完成整個系統，最后再進行站點發布，就實現了 C2D2C 的完整流程。
C2D2C（Code to design to design）的模式，簡單講就是研發同學把設計資產通過設計標準化和研發工業化的方式完成代碼化，然后讓設計師調用已經代碼化的設計資產進行設計工作，這樣子當設計師完成了界面設計的時候，相當于同時完成了前端開發，接下來研發同學只需要根據拿到的界面添加簡單的邏輯就算完成了研發工作，實現中后臺設計研發流程的整體提效。
優點
由于樣式、組件已經完成了代碼化，那么在適配工作中，控件組件化高的界面就可以直接生成代碼，不需要設計師重復設計，同時由于減少了設計師和研發的參與，節省了大量溝通成本，也減少了很多因為人為因素而產生的bug。
由于設計師減少了重復工作量，可以有更多的時間集中在視覺表現上，有效提升了設計輸出的質量，保證了產品的設計感。
對于大量適配項目的團隊，可以由設計師直接配置項目組件，無需經過研發，減少出錯概率，極大提升工作效率。
缺點
前期需要研發同學代碼化基礎控件，所以需要投入人力、精力進行前期的工作。
由于控件提前進行了代碼化，后續可能會出現無法滿足業務需求等情況出現，所以需要有人及時對代碼進行維護更新。
涉及角色
產品、UE、UI、研發、測試。
痛點
基于上面講述的C2D2C模式，已經完成了一個共享平臺的搭建，由于配置需要研發的參與，所以始終需要研發同學作為集成人員，并不利于其他角色的使用，那么怎么樣可以讓產品同學，設計同學，或者說是普通用戶使用呢？
協同方式
一個優秀的共享平臺是需要所有人都可以在其中使用的，所以，當公司或者團隊發展到穩定階段，我們需要重構工作流，以需求為導向，搭建全員工作平臺，基于設計師和研發搭建的平臺基礎上，提煉需求，強化個性化和定制化，滿足品牌產品的個性化需求，具體來講，就是把UI界面中元素提煉出相應的功能，生成功能清單，通過選擇不同的功能，生成相對應的界面。
當完整的共享平臺搭建完成以后，團隊中的每個角色的工作內容都發生了變化，產品的工作是構建更多的需求，交互設計師的工作是構建更多的交互形式，產品架構，UI設計師的工作是設計更多更好的界面布局，視覺表現，然后研發把上述內容通過代碼匯總進我們的需求池中，擴展我們的平臺豐富度。
HMI設計工作，就變成了：客戶在我們的配置面板中選擇需要的需求，喜歡的布局，想要的視覺，點擊完成，就可以即刻看到高度定制化的一套系統。
優點
讓每個人回歸工作的本質，不需要為了一些重復的繁雜的內容而疲于奔命，做更有價值的工作，實現工作的價值
賦能行業，可以滿足車企定制化的需求，提供車企一套完整的車機系統解決方案。
缺點
投入大，對于小體量的業務來講短期無法創造價值。
對于現在的行業環境，增速提效已經達成了基本共識，設計協同就成了一個大課題，但是不同的企業，不同的團隊面對的具體問題不一樣，可使用的資源也不太一樣，那么采用哪種協同方式并無定式，需要根據實際情況，進行具體分析，畢竟效率的提升是為了創造最大的價值。我們所有的努力最終目的是為了解決問題，做正確的事。
作者：菘藍C 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內容：
1，什么是彈窗？
2，彈窗的規范如何定義？
3，彈窗使用規則是什么？
4，什么是抽屜？和彈窗對比優缺點是什么？
一、什么是彈窗？
彈窗是在保留當前頁面狀態的情況下，告知用戶并承載相關操作。
思考：彈窗里面哪些構成原件可以根據業務屬性可以有可以沒有呢？
答案：標題區和操作區。
二、彈窗的規范如何定義？
1、定義彈窗的大小規范
彈窗的的大小有兩種定義方式。一種是固定大小，一種是自定義大小。需要根據自己的業務場景二選一。
彈窗寬度一般定義為三種。分別為560px，720px，960px，都是8的倍數方便記憶。尺寸并不是定死的，可以根據自身業務場景調節。
彈框固定高度會有一個最小高度200px，一個最大高度560px。在其之間的高度是由內容區的內容決定，超過最大高度560px時出滾動條。
彈窗自定義高度，只定義最大高度，隨著頁面拉升縮小，彈窗邊距不變。
2、定義彈窗內容規范
定義：標題欄操作欄高度，內容區邊距。
3、彈窗類型
彈框類型是根據使用場景區分提示彈窗，自定義彈窗兩種
彈窗優點：沒有跳出父級頁面，彈窗任務完成后仍然會留在父頁面進行操作，減少用戶操作中步驟體感
彈窗缺點：信息承載量少，信息內容過多的時候會出現上下左右滾動條，彈窗會降低用戶操作效率
三、彈窗使用規則是什么？
1、不超過兩種操作選項
假如承載的操作項比較多，建議新跳轉一個落地頁。
2、多步驟操作，選擇用頁面承載
3、盡量避免彈窗疊彈窗
第一個彈窗的內容考慮用頁面承載或者第二個彈窗是否可以用氣泡或者下拉來承載。
假設一定要疊，二級彈窗的復雜度要低于一級彈窗，滿足形式上的平衡，遵循從大到小的邏輯或者是覆蓋上級，完成任務后點“返回”返回。
四、什么是抽屜？和彈窗相比優缺點是什么？
抽屜是信息承載量和頁面比肩，又兼具彈窗的優點。
作者：鯤sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
看完本篇文章，你會學到以下內容：
1， 什么是表單頁？
2，表單頁設計原則
3，表單的構成
4，表單的交互
5，頁面布局
6，提升表單易用性
7，體驗衡量指標
1、采集/錄入數據信息。2、編輯數據信息。3、特殊的條件設置。后臺產品的本質是針對數據的增、刪、改、查。而增、改、查都可以用表單完成。
OA系統里面的請假申請，報銷申請，錄入員工，新建會議。教育類的創建課程。HRM系統里面發布職位以及物聯網管理系統新建設備等等。
用戶快速定位重要信息和目標選項同時文案和組件能夠準確傳達相應含義
整體表單排布有合理的交互形式；科學的信息布局和組織形式；盡可能“少操作一步”用戶在面對50和表單和500個表單的心理壓力是不一樣的。
操作前：提示和防錯。
操作中：實時反饋與糾錯
操作后：合理的保存、清空、取消、撤銷機制。
表單通常由表單標簽、表單域、提示提示、操作按鈕四部分構成。
左標簽
優點：表意明確，節約縱向空間，多用于web端
缺點：不太適用于移動端等狹長空間
頂標簽
優點：對齊舒適，節約橫向空間，多用于移動端及英文場景下。
缺點：縱向空間利用率不高
行內標簽
優點：最節省空間，多用于注冊登錄
缺點：輸入狀態標簽消失，用戶陷入迷茫
左對齊標簽
視線從標簽移動到表單域時間為500ms，這比右對齊標簽所用的時間長的多，所以更適合閱讀，用于詳情的陳列。
特點：閱讀效率高，操作效率較低；
右對齊標簽
視覺動線參差不齊，不適合高效閱讀，但適合高效操作，更適合表單填寫。
特點：閱讀效率不高，標簽指向明確，操作效率高
步驟一：根據業務已經有的字段長度定義4-5種寬度規范，建議寬度可以是8或者是40的倍數。
步驟二：根據你要搭建的表單，選用合適的規范，長度與輸入預期成正比。有人會說排出來的表單左邊沒對齊，右邊也沒對齊，其實這就是B端產品特征那就是是好用大于好看，就要給用戶一種心智那就是給你的這個長度那就是要輸入一個這么長的內容。
避免“正確的廢話”：給不到用戶任何的幫助還增加了用戶的閱讀成本。
按鈕常見位置：一般出現在頁面頂部、跟隨表單里的內容、表單內容底部、頁面底部。
按鈕閱讀順序：按鈕出現頁面右上角或右下角時，閱讀順序是從右往左，這符合pc端操作習慣以及人閱讀習慣。按鈕跟隨表單內容或在表單內容底部時，閱讀順序為從左往右，這符合人的填寫順序從上往下，從左往右。
底部按鈕右對齊：一般用在彈框，因為彈框頁面比較小，右對齊比較符合操作習慣。
底部按鈕居中：一般用在頁面中，因為右下角操作距離會有點遠，所以表單用頁面承載的話按鈕建議居中。
表單中字體全部統一采用14px。表單上下間距一般有三種，1.內容與內容間距為24px。2.內容與說明文案間距為4px。3.內容與子內容間距以及及子內容之間的間距為8px。
表單交互方式有四種。1.原位編輯；2.氣泡卡片；3.彈窗/抽屜；4.頁面跳轉。
原位編輯
編輯內容即為展示內容，容量低于5個時使用。
氣泡卡片
設置項與看板內容緊密相關時使用氣泡卡片，建議設置項低于5個。
彈窗/抽屜
設置項與看板內容可以有關聯也不可以沒有，大于三個以上的錄入項使用。
如果錄入項較多，用彈框承載出現翻頁的情況下可考慮使用抽屜。
頁面跳轉
如果容量超出了彈框/抽屜的承載量并且錄入項與看板沒有那么強的關聯性可采用頁面跳轉的方式。
頁面布局方式有四種。1.分組；2.錨點定位；3.標簽頁；4.分步驟
5.1.1標題分組
設置項超過7個；彼此間的關聯性較弱且可以分類去歸納
5.1.2卡片分組
有多個設置項，多個分類；彼此之間的關聯性更弱，分類明確
有多個分類的情況可通過錨點定位迅速找到相關信息
彼此之間沒有特定的相關性，可以獨立設置。每個設置包含了多個錄入項且使用了標題分組。
小結
當錄入項少于7個時使用基礎布局；當錄入項在7-15個時可采用標題分組，卡片分組、錨點定位布局；當錄入項大于15個時需采用標簽頁布局。
利用步驟條將大型，復雜任務拆解為多個部分，并按照相關性分組。
建議3種分組依據
1.采用必填項劃分，把必填的選項分在一起；2.采用相關性劃分；3.以操作成本劃分。把好填的簡單的表單放在前面，復雜的放在后面。
提升表單易用性方式有5種。1.信息降噪；2.清晰易讀；3.高效智能；4.防錯糾錯；5.所見即所得
場景一：當表單中大多數都是必填只有極少數非必填時
場景二：表單項非必填項比較多，可將低頻的非必填項收起
場景一：盡量采用單列布局，視覺動線流暢，不容易遺漏信息；按enter鍵換行。
場景二：如果出于業務方需要，必須在橫向添加內容，那最好有一定的分組依據。但這樣就不應該出現豎向分組，以免遺漏信息。
6.3.1根據上下文信息可以自動獲取的，無需用戶再次填寫。
例如根據手機號帶出用戶姓名；根據地址帶出郵政編碼；根據身份信息帶出生日。
6.3.2提供合適的“默認項”。
例如根據行業現狀提供常規的比例分配；根據定位把地區做默認的填充。
6.3.3提供搜索、聯想，自動顯示匹配的信息
用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。
6.3.4 OCR識別文件內容
對于一些標準證件信息的錄入，可以通過OCR識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。
6.4.1對于長數字，四位一空格，用來分段
例如輸入銀行卡號；充值場景下輸入手機號等
6.4.2為用戶封閉不正確道路
將超出時間選擇范圍的日期置灰。電話號、身份證錄入時只允許輸入數字同時設置字數上限。
6.4.3告訴用戶哪里錯了，而非簡單粗暴的錯誤提示
表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。適合對移動端、小程序、H5頁面的設置。
體驗衡量指標有4種。1.任務完成率；2.任務完成時長；3.必填項目數；4.易用度評分
7.1任務完成率
7.2任務完成時長
7.3必填項目數
結合業務場景給出最適合的必填項設定，提高用戶填寫效率。
7.4易用度評分（用戶完成某項任務的難易程度）
易用度可通過調研問卷和評分量表獲取。
作者：鯤sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
我們需要什么樣的配色方案？
B端的系統的主色代表著一個系統的氣質，與所在行業、產品的定位、用戶群體都有一定的關系。前面調研了眾多竟品及市場前沿配色方案，目的就是期望從它們身上找出共性，引領我們的系統找到最適合的方案，這是知彼。
光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據的方案。
B端系統的真正使用人群比較復雜，具有年齡跨度大，文化水平參差不等，從事行業廣泛等特點。
源于自然之美的色調，突顯靈活性與再生的創意！
依據彩通色彩研究所專家的說法，紐約時裝周2021春夏季的色彩強調我們渴望能激發出巧思與創意的色彩，這些色彩的百搭性質穿越季節，容許更多的選擇自由，適于表達原創的風格，也足夠靈活來適應現代新的更片斷化的生活方式 。
“2021春夏的色調呈現出大自然，強調我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實的感覺，這種感覺對色彩而言愈來愈重要，同時結合了某種程度的舒適與輕松感，并散發出活力，激勵振奮我們的心情”
說到這里“主題色”如何來選擇？
色彩對于人的大腦的沖擊力大于造型，比如淘寶，我們會記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現產品的性格和氣質，所以選擇一款適合產品的主色很重要。
我們的用戶在更替，如何讓產品年輕化、品牌年輕化是現在幾乎所有企業都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產品的發展方向。
比如：我們這次顏色升級中律動、青春活力是核心關鍵詞，而藍色則可以讓產品視覺符號得到延續。
對于主題色的選擇指標有哪些？
通過關鍵詞圖片像素化提取顏色，同時參考B端產品顏色流行趨勢和當年的年度流行色，以及竟品顏色分析結果，獲取藍色的色相、純度、明度范圍。
2020潘通年度顏色經典藍（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）
假設：竟品的主題色藍色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產品流行趨勢的主色也多是藍色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。
色彩的使用范圍及色階有哪些？
色彩的應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景；針對這些使用場景只有一個色值是不能滿足所有場景使用的，所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統中，常使用 Tints and shades 系統來建立調色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板，在符合無障標準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色板。
B端產品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？
輔助色是為了幫助頁面區分狀態和層級而設立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產品正確的信息，讓其信息傳達更明確清晰。
輔助色的作用是配合襯托產品主色調，在不同的產品中，輔助色運用的策略是不同的，比如我們在竟品調研中發現，輔助色經常是取自主色的鄰近色、對比色和互補色等。
儀表盤配色：通過對竟品的分析可得知，優秀的儀表盤的配色有多系列及低純度的特點，多系列配色是為了滿足用戶個性化的需求，而低純度是考慮用戶在長時間使用產品，色彩對其心理的影響。
功能色：這類顏色在系統一般不會隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質，使其搭配和諧。
1.通過默認主題色選擇輔助色及默認儀表盤顏色
我們以默認主題色為#467FEA（H 219 S 70 B 92) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據。
以鄰近色、互補色、對比色為原則選擇豐富的顏色
鄰近色：在色相環中，相差15°的顏色為鄰近色，凡在60°范圍內的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個色調中構建出豐富的視覺層次感和質感，賦予不同的功能含義，信息表達明確，和諧統一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
對比色： 在色相環中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對比色。
互補色： 在色相環中成180°角的兩種顏色，互為補色；主色可以和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配；這種搭配既能保持互補色搭配強烈的對比度，區分關鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：藍色作為主色，互補色黃色作為輔助色應用在圖表、圖標和標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應用在不同的關鍵信息上，有助于用戶更好的閱讀產品的功能和內容。
獲得輔助色-9色相
通過鄰近色、互補色和對比色的選擇，我們從24色色相環中得到了9色相色環，9色相色盤優化后將做為圖表的儀表盤顏色和語義類的功能色出現頁面設計中。
校正輔助顏色
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導致色板看起來不一致，為了讓不同色相看起來更加協調，需要調整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對竟品的分析總結同時結合默認主題色分析得出的9色色環，歸納分離，最后形成系統的默認儀表盤顏色。
功能色的目的是明確信息及狀態，比如成功、出錯、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對色彩的基本認知，結合分析得出的9色色環，顏色校正，得出系統功能色。
輔助色的色階
為了度量不同的可視化從高到低的數值，我們儀表盤顏色遠遠不夠，所有為了保證視覺上的統一性，我們需要加入輔助色的明度色階來區分數據層級。
同時我們產品有深色和淺色兩種模式，由于視覺對比的原因，在深色的場景看下看的顏色，和淺色場景下看到的顏色是兩種感受，深色場景下顏色會發亮，所以為了保持視覺上統一，我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號，命名方式采用植物色彩命名，這也是200多年前顏色數值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維?！?他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊?！?從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降。—— Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的?！?
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗目錄：
01. 【剪映】化繁為簡，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡化界面跳轉的“批量編輯”
03.【必剪】軌道按鈕文案自適應滑動跟隨
04.【剪映/IOS】首頁新增（試試看）教程專區板塊，快速入門軟件
05.【剪映】“剪同款”功能，讓用戶快速出片
06.【剪映】上滑升起列表，讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊，分區展示
08.【剪映】選中特效后，自動播放（特效預覽效果）
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產品體驗：
在此前，用戶想要對視頻進行剪輯操作，用戶大多都需要使用電腦的Ae、Pr等剪輯軟件，此類軟件體量大，操作門檻高，而且需要有電腦的存在，在人手一臺智能手機的今天，剪映等專業剪輯APP的出現，填補了用戶需要在手機上進行視頻剪輯的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等專業剪輯軟件的界面特點（畫面軌道，音頻軌道），也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于，它將專業剪輯軟件的復雜，位置隱蔽，但又常用的剪輯操作。「整合」成為底部一個個顯眼的功能圖標，并且用極為精簡易懂的文案，對功能進行了一個充分的描述。這一舉動，大大降低了用戶對剪輯軟件復雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡單易懂的交互體驗，也大大提高了用戶的黏度，忠誠度。讓小白用戶接觸了剪映后，再也無法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機器輔助，機器完成，需要人效的地方越來越少，在這大背景下，我們軟件的用戶只會變得越來越懶。
在新時代的背景下，我們UI、交互設計師，需要一種寶貴的「化繁為簡」能力，在不影響最終呈現效果的前提下，將一個軟件的交互體驗，文案、功能理解，以及功能使用操作做得越簡單，用戶的黏度，忠誠度就會越高。
一個工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡，成效依然”
產品體驗：
在剪映中，識別字幕的交互邏輯，是自動識別所有視頻片段的語音，并且插入時間線中，識別字幕是【批量進入時間軸】的。所以想統一進行編輯，得一個個反復選中，然后逐一檢查，這種累人的交互體驗，讓用戶用了第一次就不會想用第二次。
剪映推出了「批量編輯」交互功能。
語音識別后，用戶點擊其中一個識別字幕，底部第一個功能就是「批量剪輯」功能，點擊后，可以一鍵編輯全體的識別字幕內容，減少了用戶調整識別字幕是的操作交互時間，增加了用戶操作效率
設計思考：
在產品的功能交互設計中，不妨使用剪映的「整合思維」，將一些重復性高，標簽統一，可統一操作的元素整合在一個功能中統一編輯，減少用戶的操作切換與跳轉，增加用戶的交互體驗與操作效率
產品體驗：
在必剪中隨著用戶左右移動，軌道按鈕的文案也會跟隨移動，讓用戶無論滑動到何處，什么位置，都能清晰的知道軌道的應用名稱，而不會出現混淆的情況。最大程度上，減輕了用戶的理解成本
設計思考：
當我們的圖標，功能板塊，或者某些重要信息，被用戶左右、上下滑動導致超出屏幕展示區域，用戶想回頭找到這些元素，就得重新滑動到對應位置，走一趟“回頭路操作” 。這對用戶來說其實是不便捷的，對交互設計來說，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來舉一反三，讓一些重要的功能，信息區域，隨著用戶的滑動而自適應跟隨，最大限度地保證用戶他不錯過這些重要的功能、信息。
產品體驗：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時候，其實都是感到陌生的，新手指引雖然能一定程度解決此問題，但是新手引導只能在第一次打開APP時展示，而且新手指引有非常強的局限性，它只能告訴能這功能要怎么用，而無法告訴你這功能的使用場景。
所以在首頁中新增一個軟件使用技巧、教程專區，可以讓有需要的用戶第一時間觀看課程，入門軟件，而且課程用戶可反復觀看，不像新手指引般一次性展示。
這種交互體驗，大大減輕了用戶入門軟件的難度。
設計思考：
在我們設計的產品是一個工具型軟件，且有一定入門、使用難度的時候，不妨參考一下【剪映】的首頁+軟件使用教程 的交互思維。
用最低成本教會用戶如何使用這個軟件，而且展示位置是每次打開APP時都會看到的首頁，不用擔心一些粗心的用戶錯過。
產品體驗：
在剪映Tap欄中，有一個 “剪同款” 功能，選中對應的視頻模版后，填入自己相冊的素材，聽過自動剪輯，特效覆蓋，自動填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設計思考：
在流量為王的時代，內容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內容輸出效率大大提高，將輸出內容的過程簡單化，無腦化，用戶無需再去想用什么創意，視頻用什么BGM，以及視頻特效如何制作，這些都由APP的模版設計師幫你搞定，用戶需要做的，就是提供出自己的素材即可。
這給予了我們產品設計師一個啟發，在我們設計產品時，是否也能關注一下，急需內容輸出，但內容輸出困難的領域呢？也能把一些可自動化實現的步驟（如特效，BGM，字幕等等），交給系統，用戶只需參與拍攝或提供一小部分素材，即可生成一條優質的內容。解決用戶輸出內容痛點，從而留存用戶數量，從而實現用戶量變現。
產品體驗：
在剪映APP中，一些展示選擇列表的功能中，用戶上滑，列表都會隨之升起，讓用戶可以更直觀的查看選中其中內容，大大增加視覺傳達效率。
讓用戶不會被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產品功能成效效率
設計思考：
當我們的瀏覽窗口，因UI布局高度受限時，設計師可以通過【窗口隨著滑動響應移動】的交互方式，使得界面UI交互更多變幻，更為靈活。
產品體驗：
在剪輯APP中，難免會有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒有分區思維，那么整個剪輯軌道將會變得雜亂不堪，用戶用久了看到各種軌道模塊，也會疲勞過載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區展示，在用戶點擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點擊【特效】功能后，才展示對應的【特效模塊】軌道
設計思考：
在我們面對多種不同類型，但是作用相同對象的作用對象時，利用交互思維，在UI界面上進行視覺分類很重要，否則你整個APP的操作界面將會雜亂無章。
剪映給了我們一個很好的參考，就是將不同種類的對象 【分區展示，分區管理，分區操作】，最大限度的保證交互界面的簡潔舒適，且分類也能讓用戶更好的“點對點”進行操作，節省尋找對應操作對象的時間，所以，分類思維 是目前作為交互設計師的一項必不可少的技能了。
產品體驗：
在剪映APP中，當用戶選中特效，系統會自動播放【特效預覽效果】，且自動暫停（如特效時長3s，那么系統播放完3s特效效果后會自動暫停，不會繼續播放）
用戶可以直接了當地查看特效與畫面融合的效果，而不用選中后，再點擊播放預覽效果，覺得效果不滿意，還得反復切換。這種交互方式，大大節省了用戶的選擇模版時間，讓其成為（選擇+預覽=選中） 的高效交互流程
設計思考：
在我們設計一些需要實時預覽的功能時，我們不妨參考一下剪映的（選擇+預覽=選中）的高效交互流程，讓用戶免去反復操作預覽，重復選擇的無效交互，提升用戶在工具型APP的內容輸出效率
產品體驗：
當用戶在剪映中喚起濾鏡功能列表時，難免會感到驚訝，以及提出疑問：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細思考，并付出實踐你就會明白，剪映在濾鏡列表中，使用單行瀏覽的原因。
因為用戶對濾鏡的選擇，是出于此濾鏡的畫面效果，所以展示濾鏡效果時，濾鏡效果圖的比例大小是否清晰顯得尤為重要，所以，剪映犧牲了一些瀏覽效率，但是大大保證了用戶對此濾鏡的瀏覽精讀。
另外，濾鏡列表不同于特效列表，具有大量重復圖片填充。濾鏡幾乎每張填充的圖片都是有所不同的，所以使用多行列表式排列，在多種不同顏色，不同風格的圖片填充下，畫面會變得雜亂不堪
設計思考：
當我們遇到，填充圖片風格各異、或者注重展示畫面的列表設計時，可以參考剪映，犧牲一下瀏覽效率，保證瀏覽舒適度，精讀的設計方式，來防止我們設計的列表在視覺交互上顯得雜亂無章
作者：堅行 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維?！?他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊?！?從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非?；靵y的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降?！?Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的?！?
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
作者：用盡晴天來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個設計師都可以百分百地弄明白對話框這個概念。這篇文章是對「對話框」的一個簡單梳理和總結，希望可以解決大家心中的一些疑惑。
01
了解對話框
對話框是疊加在應用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進來，在對話中它給出消息或要求輸入。
當用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個對話框便消失了，把應用的主窗口交還給用戶。
關于對話框的概念，以下是百度百科的解釋：
對話框越來越廣泛地被應用于軟件、網頁、以及移動設備中。它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作 。
按照對話框的交互方式，可將其分為「模態[1]對話框」和「非模態對話框」。我們可以把他們看作是兩個小家族，模態家族的人比較強硬，而非模態家族的人相對溫柔一點。兩個家族的主要區別：是否強制用戶對其進行回應。
模態對話框：是位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，模態才會消失。而對話框會因為自身的吸引程度、停留時間、信息量承載多少被劃分為多種對話框類型進行區分，常見的對話框分別為：普通對話框、內嵌表單對話框、分步表單對話框、文件選擇對話框、復雜信息展示對話框。
△ 何時使用模態對話框
1）在重要的警告時使用，避免出現嚴重問題、或修正已出現的問題。
例如：用戶錄入信息后未保存就要關閉時，彈出模態對話框提示用戶保存。
2）在需要用戶輸入信息或進行某操作，才能繼續當前流程的時候使用。
例如：在使用Canva資源網站時，點擊“上傳”會彈出模態化的登錄/注冊窗口，引導登錄/注冊后使用。
3）用來將復雜流程拆分成簡單步驟。
例如：Teambition-分步驟的模態對話框式創建項目。
4）用來獲取信息，該信息可大大減輕用戶的后續操作/精力。
例如：在轉賬場景中，如果先復制一個賬號，打開手機銀行APP（以招商銀行或平安口袋銀行為例），系統會通過模式對話框詢問用戶是否向這個賬號轉賬，這樣的設計做到了預判用戶行為，節省用戶后面的操作成本。
非模態對話框：與模態完全相反，它更加溫和，不會強制打斷用戶正在進行的現有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。
△ 何時使用非模態對話框
1）在獲取與當前流程不必要信息的時候使用。
例如：平安口袋銀行和平安數字口袋采用氣泡卡片展示更多功能或引導用戶登錄。
2）不打斷重要流程中使用。
例如：在平安口袋銀行APP中購買理財時，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。
簡單來說，兩者的優缺點見下表：
02
從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標導向的角度來看對話框，對話框要傳遞的信息的常見應用場景主要有以下五種：
屬性對話框是向用戶呈現或讓用戶改變所選對象的屬性或者設置。一般來說，在屬性對話框中，用戶可以修改當前的選擇，也可以設置應用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設置一次的屬性，屬性對話框常見在一些設置、詳情中。
例如：Windows 11系統的設置界面，可設置系統的全局屬性。
功能對話框通常從菜單中打開，是最常見的模態對話框，只控制單一功能，如打印、文件上傳/導入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個動作，而且也允許用戶設置動作的細節，屬于模態對話框。
例如：瀏覽器的打印功能，會彈出模態化的打印窗口，用戶可設置打印的細節。
例如：飛書的文檔導入功能，使用模態化對話框，引導用戶選擇文件類型或進行批量導入操作。
進度對話框是由應用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當前應用正在忙于某些內部功能，其他功能的處理能力可能會降低。
每個進度對話框都應該向用戶清晰地展現如下信息：
例如：使用Axure軟件導出html文件時的進度提示，既提醒用戶當前Axure正在運行，又告知用戶當前文件導出進度。
例如：使用Sketch軟件導出文件時的進度提示
通知對話框將一些重要信息報告給用戶。來源可以是一些觸發的事件，也可以是其他用戶的通知。
常見的有通知中心對話框，處理完成某個操作的告知等等。
例如：花瓣的通知提醒
例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態對話框方式。
公告對話框，和進度對話框一樣，由應用程序直接啟動，不是由用戶請求發起的。公告對話框有三種：錯誤、警告、確認。
這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認]，或者[OK]。
屬性、功能、進度對話框，是用戶主動請求的--它們為用戶服務。但是，應用程序發起的公告對話框--它們為應用程序服務，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。
03
我們可以從應用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現頻率。
解決用戶錯誤的方法不是指責用戶，讓用戶再認真一些，或者給他們更多的指導練習，而應該優化應用設計，讓犯錯變得困難。
示例：登錄藍湖時的短信驗證碼輸入框
示例：轉賬時輸入金額的數字鍵盤，金額大小的位數提示；平安口袋銀行的身份證號專屬鍵盤。
示例：輸錯密碼是一個很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現錯誤頻率。
示例：在支付寶聊天窗輸入一串數字，支付寶發現這個問題后，提供了識別后直接轉賬的功能，預判了用戶的慣性，減少錯誤發生。
Zoom - 拉會前預設值在加入會議室的界面，提前選擇是否在進入會議房間后“不自動連接語音”和“保持攝像頭關閉”，有效避免忘記閉麥或者忘記關攝像頭就直接加入了線上會議的意外尷尬。
在很多破壞性的操作都會二次進行提醒，讓用戶確認操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時候，是不是眼疾手快地按下那個「確認」按鈕？
這種對話框在沒有容錯處理時，非常容易被我們這種無腦按「確認」的用戶釀成大錯。比如我“手賤”只是試試這個刪除，然后就把某個表幾千條辛苦寫了一個月的數據刪掉了，由此可見系統的容錯處理有多么重要。
示例：Windows系統在早期的時候，刪除文件時會讓用戶進行二次確認，但這是完全沒必要的，因為刪除文件不是真正的刪除，還會在回收站里面。
Mac系統：在回收站刪除文件將是永久性刪除，此時的確認對話框才是對用戶有用的。
從對話框本身的設計優化出發，我們可以對話框的使用場景和文案方面著手進行優化設計。
其實什么時候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。
例如你在手機上買了一張電影票，支付失敗的結果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發現自己購買失敗，那么用戶極有可能當場卸載你的產品。
模態彈框會打斷用戶當前操作流程，所以「使用對話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態彈框的就不要用模態彈框。總之，重要的信息優先考慮使用對話框。
具體的使用原則有：
如果非要使用對話框，那么請使用友好尊重用戶的方式。當我們說到人與人之間的交流時，語言是重要的媒介，而用戶與產品之間同樣如此。
在設計過程中應始終努力設計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認為也是不必要的，糟糕的提示性文案甚至會破壞產品中最好的用戶體驗。例如以下幾種情況：
因此糟糕的提示文案設計會誤導用戶在產品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產生本末倒置的結果， 也給用戶帶來不佳體驗。
所以，語言是使產品更加人性化的主要因素。產品的文案則充當了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機的功能性關系轉化成人類的個人情感體驗。而這種用戶的情感體驗才能夠真正的彰顯品牌個性，從而與其他產品區分開來。
△ 錯誤提示設計三步法
總結：
對話框可以成為幫助用戶完成目標的有用助手，而不是讓他們在每一步操守挫敗的可怕絆腳石。通過保持對話框的可管理性，并且只有在他們的功能真的屬于另一個房間的情況下才調用他們，你將很好地維持用戶的工作流狀態，保證他們會成功完成任務，并且滿懷感激。
「文章的內容會更偏實際工作產出，并非將競品分析的定義平鋪展示，耐心讀完，你一定會有收獲?！?
關于競品分析，一直有小伙伴想讓我出一篇文章。因為我看過大量的 B 端產品，很多同學就會好奇，怎樣能系統的進行競品分析？好吧，壓箱底的內容也拿出來了，今天就來和大家說說競品分析，以及我們作為設計師，究竟應該如何使用競品分析。
我相信大多數設計師都有體會過被銷售奪命連環 call 的經歷，很多時候我們就是想要白嫖別人的“身子”，但是又不敢明說，只能夠通過花言巧語來騙取別人的使用賬號。難，因為很多產品并不會直接給你使用賬號，其實銷售也是為你們考慮，即使給了你賬號，你也沒法完整體驗整個流程，索性就不給你看，因此大多數情況下銷售會給你演示，這可能就是試用當中最難的第一個地方。
在 B 端，鑒定你是否是行內人的最好辦法，便是在溝通的時候給你講很多專業術語，因為術語就如同我們設計師日常溝通的一個辦法。比如：“這里我用到了卡片分類將整個信息去做規整”、“那里在 Figma 里主要用 Components 去解決頁面重復的問題”
這些內容其他行業的人肯定也聽不懂，因此術語多也是我們非常頭疼的地方。最近也在嘗試整理不同行業的 B 端產品分析，也算是幫助同學們在陌生的領域當中能夠快速熟悉。
很多同學的競品分析，都主要集中在鼠標的操作上。便是不停地點點點，在整個頁面你會發現點擊過后沒有任何目的，試用過后也不會有什么結果。因此久而久之，很多設計師只會去看這個產品的頁面風格，然后根據說這個頁面非常丑陋就罵罵咧咧的離開，所以也導致大家的積極性下降。
關于競品分析，其實很多人還是會使用 C 端產品的分析邏輯，但這對于 B 端產品來說，競品分析很容易就會誤導設計師，讓大家朝著不太正確的方向發展。
比如以這個內容為例，我們可以看到雖然其標題寫的是某某產品的競品分析，但是其實則的內容就是一篇較為完整的產品體驗報告，主要就是講解了產品對應的功能，遠遠稱之不上為競品分析（嚴格上來說應該是設計的競品分析）
所以我認為 B 端競品分析對于設計師來說需要具備一下幾個特點：
因為站在前人的肩膀上，我們能夠快速產出對應的設計方案，因此競品分析最好是有明確的需求目的。比如我要去做一個 導航菜單的設計，那就要去考慮在整個導航菜單當中，它不同的設計方法，以及在各個產品當中它們是如何選擇的，只有了解了這些內容后，才能夠幫助我們去解決設計當中的問題。
而競品，在其中主要就是引導作用，讓我們可以思考這款產品背后的具體邏輯，了解它是如何 how to do。
了解行業趨勢是非常重要的一個內容，雖然都是在說 B 端，但是我們可以通過競品分析了解到行業的大體動向，能夠幫助我們去做具體的分析。
比如我們可以看到很多 B 端產品的動向，像是 Jira、Ant Design、飛書，它們都在降低視覺層級，凸顯內容層級，這些動向的總結并不是我隨便去看文章，而是通過整體的分析了解到的。
（這個觀點也在 Ant Design 5.0 的更新當中得到了驗證）
其實這就需要你不停的跟進多款產品，了解他們目前的產品發展方向。雖然有很多人會認為這不是應該產品做的事嗎？為什么設計師要去做？但是去跟進他們的動向，其實就是了解他們之前在設計這些模塊的時候翻了哪些錯，后續是如何調整的。比如我們以飛書的改動為例，我追蹤飛書管理后臺的更新有大概 4 年，通過這樣的堅持，我們能夠看到的是飛書它經過一個又一個版本的迭代，優化了很多內容，才到如今的設計，并且隨著內容數據的增多，可以發現它是在如何發生變化。
并且發現這個界面設計風格的改版是未來的趨勢，早在一年前就已經預言，記得也在課程上講過，這個風格未來一定是需求（不信問一問 第三期課程的同學應該知道）所以這便是了解行業趨勢最快的一個途徑，而我們要做的是持續跟進，多去進行內容的查看。
大家一定接到過很多從 0-1 的功能模塊，在這個時候我們其實是對于它的交互內容理解較為簡單。而使用競品分析就能夠幫助我們去了解需求與這些功能模塊，他們究竟是如何做設計的，思路有哪些？這些都能夠提供給我們進行幫助。
比如我之前負責過一個階段推進器的需求，當時對于階段推進器這四個詞非常陌生。感覺從未接觸過，心中想的應該是 火箭？飛機的推進？
產品經理給到我的需求是這樣的：
我頓時就犯了難，這時候雖然不了解，但是我通過強大的圖庫+賬號，快速找到與之對應的功能模塊。
然后深度體驗產品的交互細節，并給出了合理的方案，這樣競品分析就能夠幫助我對于未知需求、未知領域的探索。
我們在做競品分析的時候，需要考慮的是交互體驗層面的競品分析，而非產品框架層面的競品分析。很多時候產品層面的競品分析我們不需要掌握，因為它過于宏觀，很多內容并不是我們作為設計師應該關心的，因此我們在做競品分析時不應該盲目的大，而是克制更為聚焦的小，希望做到的是從微觀再到宏觀。
舉一個例子，下方三個指標圖，如果你要去做競品分析，你會如何做？
首先關于三個指標圖我們發現，它們的設計內容并不相同。
1.為數據展示指標圖，你會發現在整個指標圖當中包含有同比、環比、對應的時間 以及 數據的詳情，給人的感覺數據非常專業。
2.以數據占比為主，明顯是想表達你的使用情況。你可以想想，會出現在哪個頁面當中？
3.一個非常簡單的指標圖，但是在個數這個字段極為特殊，應該是想呈現對應的數據變化。
關于競品分析，我們必須得先了解不同競品之間的種類與關系，這樣才能方便我們快速尋找競品。
直接競品，顧名思義就是去分析產品的直接競爭對手，因為直接競爭對手都會有較為完整的解決方案，如果第一次去做某些功能的時候，我們可以快速分析直接競品去快速了解它的思路。當然我們通常對直接競品還需要將他的產品進行各個階段的進行留檔，以及競品迭代分析，這個我們就留著第三章來說。
關于直接競品，有一個非常簡單的方法，就是在我們書簽分類當中，在一個分類下的一定就是直接競品。所以直接競品我們更關注的是產品類型幾乎相同~
間接競品通常是與產品沒那么相關，但是會有很多功能模塊是相通的。因為很多時候，我們很難找到非常相似的 直接競品，或者這些競品當中的設計不太滿足，這時候我們就要去考慮去分析間接競品。
比如在上圖的客戶管理模塊，微盟里的客戶管理與紛享銷客里的客戶管理就會完全不同，雖然他們都是客戶管理，但是在設計上完全不同。前者主打簡單，我們在借鑒的時候就要更深入思考；后者為核心板塊，就要體驗他為核心板塊做了什么內容。所以間接競品我們更關注的是產品功能模塊幾乎相同，但是他們的設計目的可能會存在不同的差異，因此將其進行分析。
交互競品主要針對產品無論的類型還是功能模塊上，都好不搭嘎，但是設計上有一些交集的地方，我們可以去學習他們的交互解決方案。比如我們需要去處理的是一個復雜的篩選模塊，同行業里幾乎沒有類似的做法，那我們就可以借鑒很多有類似功能的產品，比如 ONES 的篩選邏輯、紛享銷客的高級篩選、TAPD 的篩選彈窗，這些本身都是毫不相干的產品，但是他們在交互模式上可以借鑒，通過這樣就能夠幫助我們在交互層面上去解決問題，而交互競品更看重的是你平時對這個產品的了解程度。
了解了常見的競品的劃分過后，我們尋找到了競品應該如何分析？
作為一個成熟的 B 端設計師，我們競品分析的方法并不是將傳統式教條主義那樣，按照 第一步、第二步、第三步 的方式，按照某一個方法去局限自己的思路。比如常見分析的方法有：功能拆解法、矩陣分析法、功能對比法、評分比較法、競品畫布、PEST 分析法（后面會講到這些內容應該如何使用）
因為我們在實際工作當中，如果按照上面你的方式分析，很容易就變成一個填空題，而因此缺少了對于整個產品的細致思考。所以我們取而代之的是另一個非常重要的觀點：「通過現象看本質」
這個方法聽上去有些抽象，但是我們還是來看看它究竟應該如何使用。
比如你接到了一個設計需求，現在需要設計一個篩選組件。而擺在你面前的便是兩個完全不同的篩選組件類型，這時候你應該怎么辦呢？
但是這些傳統的教條類的分析會讓大家感覺在處理頁面的時候非常束手無策，因為他們在分析時，通常都是非常宏觀的分析，比如產品大方向、產品的未來規劃，沒人會去關注你個臭設計的。其實我們再去對競品分析時，主要專注兩部分的分析：
我們 就以剛才講到的篩選為例，首先從外在表現來看，發現左側的篩選并不重要，因為它需要點擊篩選圖標后才能呼出篩選，執行對應的篩選操作而對應的右側篩選顯得非常重要，因為它的所有篩選項都是常駐在頂部，我們想要篩選就可以直接到對應的字段進行操作。
現在其實我們就在分析表象，就是這兩個設計之間的差別在哪，緊接著我們在揣摩一下交互，當兩個篩選點擊過后，發現：左側的篩選針對的是通用的字段，因為我需要點擊添加篩選條件，點擊想要篩選的字段，才能夠執行篩選的操作。右側的篩選針對的是固定的字段，因為字段都是在頁面當中常駐，并且沒有對應的添加篩選的入口。這是從設計師在這個方案當中傳達出來的信息，緊接著分析一下，為什么這個設計師要這么設計。按照課程當中的話來說，就是這個設計師也不是傻子，它為什么要這么做？原因在哪？這時候我們就要通過外在的表象分析其內在的邏輯。
內在邏輯是將外在的表象通過設計實現在內在的產品邏輯當中，在邏輯當中會涉及到很多內容，我們做設計時所寫的交互說明很多時候就源自于此。
同樣是上面的篩選，那為什么會這樣設計，其中的原因又是什么？我們剛才講到了篩選一個為通用篩選字段，一個為固定篩選字段，那為什么會存在這種情況，其實是因為在左側，整個系統的字段是不可控的，用戶可以去自定義字段，也就是添加自己想用的字段來進行展示；而右側字段可控，主要就是所有的字段都在整個系統當中，我們沒有辦法去隨意的添加刪除。
而為什么會產生這樣的原因呢？其實是因為 aPaaS 平臺上，整個系統都是自定義字段，因此只能夠將篩選做到一個入口里，通過入口來執行篩選的操作。而 SaaS 平臺，特別是行業屬性型產品，所有的業務都是固定寫死的，因此你會發現我們不允許系統進行隨意的更改，也就導致了我每個頁面具體要呈現什么內容完全由我們自己說了算，也就導致股常駐固定篩選。
我們作為設計師，其實不應該只分析其外在的表象，而更應該在乎的是其內在的邏輯。剛才我們是從前往后去推導設計的邏輯，那我們想想，能不能從后往前去做分析，當然是肯定的。
比如在之前回答一個同學的問題時，我們就能夠通過競品分析了解到設計思路。
問題如下：
“我們去做一個 HRM 系統的面試點評的優化，因為在系統當中經常會有面試評價的問題，就是使用系統的面試官經常出現忘記填寫面試評價、面試評價錯亂的情況，我們應該如何優化？”
3.舉個例子
比如在之前回答一個同學的問題時，我們就能夠通過競品分析了解到設計思路。問題如下：
“我們去做一個 HRM 系統的面試點評的優化，因為在系統當中經常會有面試評價的問題，就是使用系統的面試官經常出現忘記填寫面試評價、面試評價錯亂的情況，我們應該如何優化？”
首先我從沒做過 HRM 系統，因此不太了解這個產品的具體特性，所以在回答這個問題時，我們只能夠通過競品分析的方式，去獲取一些設計優化的方式。
在分析問題之前，必須先了解我們目前已經掌握的內容。
產品：針對人事系統管理的招聘模塊
階段：已經面試人員的面試評價
問題：面試評價未填寫，錯亂的問題
針對上面的內容，我們還能夠進行相應的提問：
具體的角色有哪些？解決的問題究竟是什么？究竟是什么樣的面試評價錯亂/未填寫？
通過系統當中已知的內容，我們逐步明確以下幾個內容
產品：人力招聘系統
角色：面試官、HR、應聘者
功能：面試評價
痛點：大部分面試官忘記面試評價，導致面試評價錯誤、混亂，無法對應
場景：線下面試，線上面試
其實我們剛才的內容，都是前期的問題分析，我們在做任何設計時都應該這么做，而后就是競品的分析，首先去搜集競品，去尋找直接競品、間接競品、交互競品。
直接競品：因為 HRM 行業本身要求比較嚴格，所以在選擇時，我們選擇了釘釘上能夠直接試用的 易招聘
間接競品：最近使用 CCtalk 上課的頻率較高，所以使用 CCtalk 的課程評價
交互競品：在點餐的時候發現可以評價商品，因此選擇美團外賣分析其點評評價
當然在這些競品當中，沒有嚴格的要求。最主要的就是你一定要熟悉它。
而我們在分析時，就要了解一款產品的表象和它的邏輯
易招聘
在易招聘里，我們進入到人才信息過后，就能夠快速預覽人員的所有內容，包含簡歷、登記表、測評、面試記錄、Offer 等，其中在面試記錄里，我們就能夠查看這個員工的所有面試設計記錄。
因為我沒有接觸過 HRM 系統，通過易招聘這樣的直接競品，讓我對 HRM 行業的產品有一個基礎的認識，通過了解面試評價的基本內容。
然后將競品的內容按照外表+邏輯進行整理。
外表：
- 發現易招聘里依然容易出現面試評價錯亂等問題，他們通過 一鍵催所有評價+一鍵催評價 解決
- 試用 一鍵催評功能，設計邏輯是當點擊過后，我們會在 釘釘 收到 Ding 一下的加急消息，提示你需要閱讀。（這個與平臺深度綁定，如果是 飛書、企業微信 提示方式又會有所不同）
- 面試評價較為簡單，選擇對應狀態，在下方寫下評論即可。
由于對于評價這個功能也不太了解，因此我們又體驗了其他的評價功能的產品，希望有所啟發。
CCtalk
因為 CCtalk 平常使用頻率較高，所以評價想到的就是課程評價究竟有哪些邏輯。老規矩我們先看外表：
- 提供快速評價的入口，我們可以點擊五角星來實現評價的快速點評
- 提供默認標簽，我們可以選擇老師常見的面試評價標簽
- 直播課程結束后，會有彈窗提示。面試結束后可以主動彈窗進行提示。
在理解內核，理解內核我是通過一次一次的測試，得到了 CCTalk 他會包含以下規則：
- 課程必須結束后才可評價，也就是正在直播的課程，不能直接評價。也就是評價不能與課程同時進行。
- 課程查看時間必須超過 10min 才可評價。也就是點評之前，必須要判定用戶是否有評價資格。
因為經常點外賣，因此也會想到美團外賣的點餐評價，也就將其呈現出來了。
外表：
會有彈窗提示，是否進行評價
評價可以有標簽進行快速選擇
對于騎手的評價會有滿意于不滿意兩種狀態
內在邏輯：
當騎手完成送貨后，可以對訂單進行評價
提前點送達，會收到系統的默認提示
不同的滿意狀態，對應呈現的默認標簽也會不同
我們分析了多個產品的設計邏輯過后，面對上述的問題，我們得到以下的設計思路：
- 面試評價的難度 降低無用的表單信息，將重要內容凸顯 美團外賣
- 面試評價的快速提醒 HR 一鍵提醒功能 易招聘
- 面試流程的卡點 取消不必要的必填，并且在內容上有快捷方式 美團外賣
- 面試過后的反饋 快速提示面試評價 CCtalk
- 面試的最佳實踐 能不能將面試與面試點評放在一起，提醒面試官可以一邊面試一邊評價 CCtalk
- 面試是否能夠提供面試題庫 規范面試官的提問方式，幫助面試官進行規范化的考量 CCtalk
通過競品的外在表象和內在邏輯進行分析，進而在產出方案時，我們能夠更為清晰的處理工作的需求。而上面的思路，我們只需要將需求結合，產出設計頁面即可。那對應的方案這里就不做呈現，畢竟競品分析我么你主要分析的也是思路。
首先關于競品分析的方法，我們的目的主要是為了呈現自己的思路。比如剛才我們已經完成的思路的拆解，進而就需要通過方法將自己的思路進行理論化的包裝，給到其他人，這樣就能夠保證在評審當中“你的思路是正確的”
功能拆解法是針對系統或軟件的功能分解，可以采用不同的方法進行拆分。
我們常用的方式是按照菜單導航進行拆解，即將不同功能按照其在菜單中的位置進行分解。同時還可以根據使用流程來進行功能拆分，即將整個系統或軟件按照用戶使用時的流程進行分解。
功能拆解法能快速幫我們去呈現產品的具體架構，了解競爭對手的功能情況。
矩陣分析法可以通過將不同競品的關鍵指標以矩陣的形式呈現，從而幫助設計師更好地分析和比較不同競品之間的特點和優劣勢，去尋找產品方向上的機會點。
矩陣分析法主要通過制作矩陣坐標軸，將不同競品的特點和關鍵指標對比，從而分析它們在不同方面的優劣勢。在制作矩陣表格時，通常將各個競品的關鍵指標列在表格的橫向和縱向兩個方向，從而形成一個以競品名稱為標題的矩陣表格。
例如，我在分析垂直業務型產品與行業屬性型產品時，就會將很多關鍵指標進行對比：產品市場占比、產品的設計難度、業務復雜度，同時在這些競品當中，我們選擇了兩個指標進行分析「設計難度、業務復雜程度」通過對比和分析不同競品在這些指標上的位置得分情況，設計師可以更好地了解各個競品之間的優劣勢，從而更好地制定設計策略和優化產品設計。
總之，競品分析的矩陣分析法可以幫助設計師更好地了解市場競爭環境，分析不同競品之間的優劣勢，為設計和優化產品提供參考和啟示。
功能對比法是一種通過比較和分析不同競品的功能來了解其特點和優劣勢的競品分析方法。該方法主要通過比較不同競品在功能上的差異和優劣勢，幫助設計師更好地了解市場上類似產品的功能特點，并從中獲取設計靈感和啟示。
功能對比法在 B 端產品當中，我們主要分析一些影響產品體驗的核心功能。比如產品的自定義能力、是否有新功能的交互引導、產品有問題時的幫助體驗如何，這些我們都能夠通過功能對比的方法進行快速的了解，快速讓自己的產品在行業當中取得一定的優勢。
競品分析是指對與自己產品或服務相似的競爭對手進行調查、分析和比較，以了解市場競爭狀況，為企業制定市場策略提供依據。在競品分析中，評分比較法是一種常用的方法。
評分比較法是指按照一定標準對不同競爭對手的產品體驗進行評分，再將得分進行比較，以確定各競爭對手的優劣勢和差距，進而明確產品的具體定位。
評分比較法的優點在于可以直觀地展示競爭對手之間的差距，幫助企業更清晰地了解自身在市場中的位置和優劣勢，進而制定更科學的競爭策略。但評分比較法也存在一些局限性，例如評分標準的選擇可能不夠客觀，評分者的主觀性可能會影響評分結果等。
商業畫布的目的是幫助企業了解自己所處的市場競爭環境，以及競爭對手的優劣勢和策略。因為他是偏業務層面的分析，通常由以下幾個部分組成：
商業畫布可以幫助企業了解自身在市場中的定位和優劣勢，以及與競爭對手之間的差距和機會。通過對競爭對手的分析和比較，企業可以更好地制定市場策略，提高市場競爭力。
而這些方法的使用，主要目的是為了呈現你的思路，通過方法論的方式進行包裝，進而能夠讓沒有體驗過的人快速了解，方便他們理解你的方案思路。
競品分析最簡單莫過于借鑒別人的設計思維，因為我們在剛接觸到一個需求的時候通常都會非常的茫然。而現如今的界面設計很少有行業里面完全新的功能，大多數的界面模式已經被行業當中驗證使用，所以先不要嘗試去創建一個新的交互需求，先試著尋找一下有沒有較為成熟的交互邏輯。
比如我們現在接到一個需求，要去做一個頁面的代碼配置信息，手里拿到的就只有一些簡單的產品截圖。
那這個時候我們就需要考慮與之類似的交互到底會有哪些？
想來想去過后你會發現，我們似乎可以從 VScode + Figma 等頁面布局當中去獲取靈感，進而在繪制這些頁面的時候會更為完整。
并且思路借鑒，并不意味著我們需要去 copy 別人的完整方案，很多時候要去分析的是它的方案真實適不適合我們的產品。
畢竟產品當中就會存在很多特殊的場景，場景不同你的思考的點就會存在差異。
再舉個例子：比如我們在課程上講到了三個風格非常類似的 指標圖，當你看得到這三個完全相同的組件時，其實會覺得他們只是存在風格上的差異：一個數據凸顯、一個展示進度、一個展示指標
但是深入去分析了解，才知道它們除了風格上的差異之外，其實還會存在使用場景的不同。
左上圖是數據凸顯：因為是一個 BI 產品，在產品當中主要呈現的是關于這個字段詳細的數據記錄。所以在數據呈現的時候較為詳細和準確。
右上圖展示進度：同樣是一個指標圖，它呈現的內容更多是一個進度展示。究其原因，發現它被用于企業管理頁面，以便我們可以通過進度了解資源的具體用量。
左下圖展示指標：這個指標圖有點特殊。在鼠標懸停時，我們發現該圖表可以點擊。這意味著該指標圖可進行下鉆操作，以快速查看相關聯的數據情況。
因為競品分析并不是一個短期分析完了就結束的過程，如果處理一個需求，針對一個功能，我們都需要持續的對產品進行動態的跟蹤。就像我跟進了 飛書 3-4 年，一步一步看到它的變化、產品也在不斷地發展，因此你的分析也應該是持續跟進的。
我們作為設計師，更應該對產品持續進行關注，比如創建對應的產品版本庫，將這些競品持續關注，不斷地總結，這樣你才能擁有自己的護城河。。
關于如何尋找競品，我其實之前有給大家講過，正好趁著這些內容更新，又給大家科普一波~
在競品的尋找上，其實我們主要有幾種尋找的渠道：
我們可以通過搜索引擎檢索到大量的同類型產品，使用搜索引擎我們只需要明確想要尋找哪個領域或產品的競爭對手，然后根據該領域或產品的特點，選擇適當的關鍵詞，通常會有兩種方式，產品類型以及產品名稱。
我們以尋找 CRM 行業的產品為例，就可以在搜索引擎當中得到兩類關鍵名稱：
產品類：紛享銷客、銷售易、銷幫幫 ...
行業類：CRM、客戶關系管理系統、企業客戶管理 ...
當然在搜索引擎上的選擇，國內肯定就是 百度、搜狗、Bing 等平臺；如果是國外，則主要是 Google。
在國內的應用，主要講究的是生態，因此我們尋找競品還可以通過競品的 ISV 快速獲取。
目前國內的企業應用平臺主要有三個：釘釘、企業微信、飛書
無論是什么產品，我們都能夠通過這三個平臺進行快速的尋找。
比如我們想要尋找財稅相關的產品，那我能夠通過 釘釘、企業微信、飛書找到非常多與之相關的產品。并且這樣的一些平臺能夠提供 試用 15 天的功能，代表著我們可以直接體驗多款同類型產品。
Youthce.com
如果是咱們賬號的老讀者都知道，我自己有一個個人網站，雖然年久失修，但是里面仍然總結了市面上較為常見的 B 端產品，其中就包含 200+ 各個行業的競品。
因此肯定還是要先安利自己的網站，最后說一句，個人網站肯定更新、肯定更新~
36 企服點評
這是 36 氪出品的企業服務點評網站，很多國內的 B 端產品都會在這個網站上出現，雖然做得一般，但也是國內最好的網站了（攤攤手）
網站感覺恰飯的產品都點多，很多不知名的產品排行都比較靠前~
找 SaaS
也是類似的企業軟件的匯總平臺，內容雖然很多，但是它的排序規則并不是很認可。
比如人才招聘領域，排在前面的產品我一個都不認識，這個排序規則就值得大家細品細品，這算是大家找軟件的一個補充吧。
SaaS 點評網
類似的企業服務社區，我們能夠快速的進行產品分析。
G2
可以把它理解為是國外軟件的大眾點評，我們可以在該網站上查看和撰寫軟件和服務的評價，并對其進行打分、發布評論和分享經驗。這些評價基于用戶的真實體驗，具有很高的可信度和參考價值。
也可以在這上面找到國外產品的流行趨勢，并且每年 G2 都會頒布 「Best Software for 2023」來展示在過去一年，不同領域當中那些產品做得非常優秀。
Capterra
Capterra 是一個在線的軟件和服務目錄網站，目的是在幫助企業尋找和比較各種軟件和服務產品。與 G2 比較類似，不過使用它通常會采取一些關鍵詞來去尋找。
Crozdesk
企業軟件搜索，不過會有很多國外的行業報告提供給我們，免費下載~
競品截圖是我們設計師最主要的靈感來源。
CE青年花瓣
我在我的花瓣中總結了50個B端產品，并為每個產品提供了詳細的截圖。我還提供了相應的標簽來對這些截圖進行細致的管理。已經有很多設計師向我反饋他們會打開這個花瓣網站，每天都去獲取相應的靈感。當然，也會有一些機構和媒體拿著這些截圖，進行對外的售賣，并且價格不菲。
所有資源都已經免費提供給大家了。大家可以好好利用這些資源，幫助自己提升設計能力。
SaaS UI
SaaS UI 是國外截圖分享的一個平臺，里面按照產品為單位，搜集了大量的產品截圖。同時對于沒有的產品你還可以提交請求，等待一段時間就能更新到你想要的產品截圖。
Webframe
在 Webframe 里面，我們能夠通過左側的導航，快速對于產品進行分類。
與 SaaS UI 不同，它的分類按照產品的整體結構展開的，比如：官網、價格頁、登錄頁、編輯、彈窗、搜索 等等...
這種方式在我們缺乏靈感的時候能夠快速通過導航，找到自己想要的截圖內容，既能夠進行橫向對比，同時也能夠尋找到該產品的全部截圖。
SaaS Landing Page
這是一個專注于 B 端官網設計的網站，所有的官網都通過小編的精心篩選，質量上肯定有所保障。同時還匯總了網站的 字體、顏色、技術棧，能夠讓我們快速掌握該網站的設計風格。
我們提到的所有資源都放在我的微信工號里?；貜?nbsp;“頁簽”，即可獲取。
關于競品分析，其實就是通過研究別人的產品來了解自己的產品可能會遇到的問題。你可以通過不同的競品分析方式呈現你的競品分析結果。因為我們作為設施設計師考慮的不是產品層面上的各種關系，而是設計層面上的交互邏輯。
盲目的分析只會讓你越陷越深，達不到我們最初的目標。
希望這篇文章能夠對你有所啟發，這也是我在實際工作中運用競品分析的關鍵思路。
作者：CE青年來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：AYONG_BDR 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B端項目一般用到的顏色會很豐富，再帶上數據可視化場景，那需要的顏色需求就會更多。像Ant design色彩體系包含12個主色以及衍生色：
Material design色彩體系包含16個主色以及衍生色:
那這種即能滿足多種不同場景的同時色彩搭配在一起又很協調的色彩體系，是如何科學搭建的呢？
從各大廠的色彩規范中，可以總結將色彩劃分為4種類型：
主色（品牌色）
常用于主按鈕、文字高亮、重要信息高亮等場景～
中性色
常用于文字、圖標、卡片背景色、分割線、邊框之類的～用于處理頁面信息主次關系，助力閱讀體驗～
功能色（語義色）
功能色代表了明確的信息以及狀態（比如成功一般用綠色，出錯失敗一般用紅色，提醒一般用橙色/黃色，鏈接一般用藍色～）
擴展色
常用于更多顏色需求場景，比如Dashboard頁面的圖表（數據可視化）、插畫配圖等
通常會制定8色板、12色板、16色板。比如Ant design的色彩系統是制定了12個色板，Atlassian design是制定了8個基礎色板（可以衍生16或者24色板），Material design色彩體系是制定了16個色板～
在創建之前，我們先了解一下HCT / HSL / HSB 色彩空間
這些色彩空間的區別，想要了解的可以到網上查找一些專業知識～我們這里只針對項目中使用哪一種色彩空間能夠為設計師調色帶來便捷性出發。
H-色相/色調
是色彩的基本屬性，就是平常所說的顏色名稱(如紅色、黃色)等，取值在0—360度之間（黑色與白色無色相）；
S-表示飽和度/純度
顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色；
B/L-表示明度
顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。
Ant design設計團隊使用的是HSB顏色模型進行設計，認為設計師在調整顏色時更容易對顏色有明確的心里期望，并促進團隊溝通。
HCT是Google研制的色彩空間～
H-Hue色相
取值在0-360之間；
C-Chroma色度
可以理解為色彩濃度，取值在0-100之間，數值越大，顏色濃度越濃；
T-Tone光度
也就是亮度，取值在0-100之間，數值越大，顏色越亮。
*個人認為無論采用哪一種色彩空間，只要真正能夠幫助到我們運用在項目中，都是可以滴
品牌色是體現產品特性和傳播理念最直觀的視覺元素之一，常用于主按鈕、文字高亮、重要信息高亮等場景～
確定產品主色的思路有以下幾種：
了解業務屬性
屬于哪一個行業、產品的定位是什么、目標受眾群體，想給用戶傳達怎樣的視覺感覺；
競品分析
了解同業務屬性的產品一般用的哪些顏色，從而獲得靈感；
滿足WCAG2.0標準
文本的視覺呈現以及文本圖像至少要有1:4.5的對比度，以確保所有的文字內容清晰易讀，對比度足夠。工具網址：Color review https://color.review
從B端領域里面一些國內國外大廠的設計規范中，我分別將主色在亮暗模式背景下進行可讀性測試，學習到以下內容：
1. 亮暗模式下可以選取不同顏色做為主色，但亮暗模式的兩個主色是在同一個色板的衍生色上；比如國內的TDesign，國外的Shopify\Atlassian\Salesforce色值不同；一般情況下會選用一樣的主色在亮暗模式下；
2. Shopify\Atlassian\Microsoft無論在白色背景還是黑色背景上，都滿足WCAG2.0的標準。剩下的要么在白色背景上不滿足，要么在黑色背景上不滿足。（當然這些都只是作為難捏不準主色時的一個參考，并不是規則～）
我負責的一款海外產品，主要是對服務器、數據庫監控分析的工具，客戶選定的主色是藍色系，他們很喜歡datadog這個產品，我發現該產品的主色在HSB模式下，S色彩濃度高 B明度值76視覺上偏灰，加上客戶產品的logo主色H值是偏紫色調，所以最終確定在亮模式下用#0756D5為主色（亮暗模式的選擇，我打算采用Shopify\Atlassian\Salesforce的方法，暗模式下用主色的衍生色～）
功能色可以用于特定功能、狀態反饋、應用圖標、dashboard數據表盤等場景，最常用到的反饋的成功、失敗、警告狀態～
結合參看其他優秀的文章，加上我自己的一些實踐思考，方法匯總如下：
1.以主色色相為基礎，差值15°，圍繞360°色環取24色～另外大家都知道相差15°的顏色為鄰近色，那我們提取出來的任何兩個相鄰的顏色都是鄰近色，我們拆分出來的色彩是比較和諧的~
以我負責的海外項目為例～
2.根據自身產品系統的復雜度，在24色板上去掉接近的顏色，篩選出一定說的顏色。前面也有提到一般是8、12、16色板。我負責的項目選擇是10個色板～
3. 色彩校正
HSB色彩空間最大的弊端就在于相同 Saturation（飽和度） 和 Value（亮度）的色彩，在不同的 Hue （色相）上的亮度感知是完全不一樣的，其原因是 HSV/HSL 色彩空間是應用于數字化圖像處理領域，為了方便機器理解、計算、呈現而設計，是人類視覺的線性模型，但人類的感知卻是非線性的，所以造成數值與感知不匹配的問題
市面上的校準方式一般是在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀地看到無彩色視覺感官明度～具體怎么調，是不是就按照這個方式全部都要調成統一的感官明度？我去研究了Apple/Material design/Ant design的色板，從里面選取統一編號的顏色，發現如下：
他們的色彩明度并不是完全一致的，一般是橙色、黃色這些帶有語義的顏色明度會亮一些～所以色彩校正不能完全調成一樣的感官明度，只能作為一個輔助。
為了滿足界面對色彩的需求，需要對主色和輔助色進行色板延伸，建立不同梯度的調色板。常用的有2種方法：
第一類：手動調整
1.淺色調色板，在顏色上有序疊加（ 比如20%、40%、60%、80%、90%）不透明度的白色#ffffff；深色調色板，在顏色上有序疊加 （比如20%、40%、60%、80%）不透明度的黑色#000000。（數值并不是固定的，設計師可按需自行調整～）
2.淺色調色板，色相（H）往感光明度高的色相依次差值 2，飽和度（S）依次減少 15，明度（B）依次增加 5；深色調色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次減少 15，飽和度（S）依次增加 5。（Ant Design 和 Material Design 調色板也都加了色相旋轉）
第二類：使用色板生成工具（走捷徑）
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(收費)
中性色包含了黑、白、灰，是頁面中文字、背景常用的顏色，為產品界面創造結構、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。
最熟悉的常見文字顏色就是#333，#666，#999，我喜歡直接拿Material design的灰色色板來用，同時還會拓展藍灰色板（在確定好灰色色板后，在上面疊加主色的不透明度即可生成藍灰色色板～）應用于圖標、背景、描邊。
最后，得出所有顏色的同色系色階：
從色板里面挑選亮模式下主色為Primary600，暗模式下主色為Primary400，實際效果圖如下：
dashboard數據可視化頁面的配色方案我是如何實踐的呢？
結合AntV數據可視化色彩體系 https://antv.vision/zh/docs/specification/language/palette 和文章https://pixso.cn/designskills/shujukeshihuapeise/
匯總如下：
根據不同數據類型、使用場景擴展出 6 種可視化色板類型
適用于描述不同類別的數據，比如餅圖的不同分類、填充地圖中的不同國家、關系圖中的不同角色等
適用于表示數據樣本中數值或梯度的變化，如排行榜等級變化、風險等級變化等
適用于描述數據正負值的變化，中間一般會有一個中間值（通常為0），比如氣溫的冷熱、海拔高低、股票漲跌等
將兩組順序色板通過圖層疊加模式產生一組新的色板，一個顏色代表兩種變量數據，常用于觀察一個事物兩個維度變化的相關性
對比突出重點或特殊數據，將重點關注的數據標以高飽和度的強色調，其他普通數據標以低飽和、低明度的基本色。常用于對比重點關注事物與其他分類事物的差別
適用于氣象預警配色、紅綠燈配色、股市的紅漲綠跌等
我負責的項目數據類型采用的是兩種配色方案
1.不同類別的數據，圖表類型有餅圖、折線圖、柱狀圖采用分類色板；
2.明確表明狀態的用語義色板
如何從色彩系統中調分類色板呢，我常用的方法如下：
1. 參照Echart的配色規律(保守不會出錯的方法)
2. 研究市面上做的好的表盤產品（比如Mixpanel）或者競品Datadog的配色規律
3.無障礙測試校驗-色盲群體的適用性
大約10%的世界人口是色盲，可以借助工具來校驗：Adobe color 網頁版 https://color.adobe.com/zh/create/color-accessibility
實踐才是檢驗真理的唯一標準～色彩規范只是為了讓設計更有章法、更有說服力，在運用色彩時還是需要謹慎克制，可以研究各大廠的設計規范，然后把學到的東西運用在項目實踐中。
作者：志龍有妖氣_zlyyq 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn