本文介紹了一個案例研究，是作者在一家擁有 60 多年歷史的產品導向型公司中實施服務設計的旅程，本文將著重介紹如何在大型國際數字支付技術組織 IDPTO（化名）中建立服務設計創新中心。這份經驗希望傳遞到每一個正在用服務設計影響公司內外部的朋友們。
在擁有 25 年的設計實踐經驗后，我收到了一份具有挑戰性的邀請，成為一家全球性公司的執行董事，并通過設計領導其轉型。選擇巴西是因為它負責拉丁美洲 75% 的支付交易。該公司已經針對該市場實施了加速增長計劃，因為他們認為這是正確的創新計劃的測試市場。在六個月的時間里，我從自己的服務設計咨詢公司轉行到 IDTPO。
在那段時間里，我有機會參觀了該公司位于美國的公司總部。這種面對面的互動對我來說至關重要：
2016 年 3 月，在圣保羅，我開始了為期三個月的組織問題診斷，以及另外三個月的定義問題階段。然后，我正式開始確定公司的痛點、局限性和全球領導層的戰略目標。我參與了公司接下來一年、三年和五年周期的整個戰略定義。
自過渡過程開始以來，我一直致力于競爭對手研究并繪制生態系統地圖。我還收集了有關公司直接面向消費者市場和幾項趨勢研究的可靠材料。在第二個月，我向領導層提交了一份戰略計劃，其中包括我們將如何工作的大綱，該計劃基于三個層面的行動：戰略、戰術和行動。
組織診斷的結論是，該公司已經在對設計原則的基本理解和應用的基礎上致力于以技術為中心的創新。
根據設計階梯 1，我確定該公司處于“界面設計”階段。如下所示，除了更改其圖形表示之外，我還修改了該工具并添加了另一個“設計作為文化”步驟。這是對上述模式的重要升級，更符合當前的創新戰略。
這一步（第4階梯）很重要，因為這是在組織中實施設計策略時的最終部分，即通過設計優化組織使其成為組織文化的步驟。
在我看來，“設計作為文化”分為三個層次：
我提出的戰略計劃包括兩個三年一次的周期性循環策略和相關的年度目標。第一個周期側重于通過開發獨特的創新流程來整合組織內的設計。
第二個周期側重于發展組織的能力，以從“設計作為過程”過渡到“設計作為戰略”。在最初執行的六年后，我們將能夠衡量組織中以設計為主導的變革的進展和收益。
評估指標后，我們將能夠繼續下一步（即“設計作為文化”）。
第一個周期從為組織的創新中心定義五項創新原則開始。這些原則已經與組織的領導團隊共同制定。
這不僅改變了交付方法，還引發了大膽的組織轉型，因為它改變了組織過去工作的范式。
甚至在創新中心正式啟動之前，我們就嘗試了兩種開發形式來解決問題。第一個是用經典五天設計沖刺模型幫助一家重要地區性銀行。第二個是為電子商務平臺開發聊天機器人。最后一個解決方案經歷了一個更長的七周時間，使我們能夠測試初創公司的融入，以幫助我們采用開放式創新方法。
在這個周期的第一年，三點很重要：
這就是為什么我選擇服務設計作為創新過程的基礎，同時參考了 Richard Buchanan 教授的工作。如圖 3所示，過去 20 年是從基于人工制品的物質性的實踐到為解決復雜問題而開發的“非物質解決方案”的設計思維轉變的時刻。
我們的經濟現在建立在象征價值的交換之上。經驗決定了每個人在這種交換中投入的價值。在過去的二十年里，我們看到了一系列新公司的出現，例如 Uber 或 Airbnb，它們誕生于數字環境中，專注于我們所說的體驗經濟 。
因此，服務設計和交互設計等主題近年來受到關注，因為它們是這種新經濟發展的基礎。僅六個月后，我們就協助五家金融科技公司將 IDPTO 技術應用于他們的流程。之后，其中三家金融科技公司能夠開發出現成的市場解決方案。在第 1 年末，我們向整個組織展示了流程（圖 4）。
該活動在公司的美國總部舉行并引起了很多關注，因為在一年內我們有項目要展示、成功指標和接下來兩年的路線圖。
創新過程不一定是線性的。該過程以簡報會（與不同利益相關者的協作研討會）開始，以最終確定和實施的解決方案結束。
到第 3 年末，我們超越了指標，贏得了獎項，并開始為公司的第二個創新周期做好準備——在戰略層面采用設計。創新中心戰略的一部分是將其工作方法擴展到整個拉丁美洲地區。2018年，我們對區域團隊進行了培訓，并準備了文件，包括經驗、教材、方法和工具。其他一些地區也采用了部分方式，例如美國和亞洲的加速計劃以及歐洲和亞洲的服務設計。盡管如此，還是存在挑戰：創新中心位于組織的產品領域內。
在第一個周期的最后一年，由于全球項目和獎項，我在內部和外部獲得了很多知名度之后，我與全球首席產品官討論了：
次年，他決定將該領域的名稱從“產品”改為“解決方案”。
在業務加速數字化的背景下，成功的戰略規劃為城市交通、公共交通、即時支付、新支付技術和新信息交易技術等領域的項目設定了總體目標。
我們有幾個項目要管理，我們需要使用對公司文化產生重大影響的項目管理方法。實施了新的高管培訓課程。加大投資力度，竣工項目穩步增長。
設計現在是公司戰略的一部分。設計已成為開發新服務和新技術的戰略決策的主要因素。
以下是我領導下的兩個創新周期后的一些數字：
這篇文章無疑是給了我們在自己的組織中運用服務設計的一針強心劑，讓我們有更多的自信去運用服務設計和影響組織，我們要相信服務設計方法論帶來的作用，相信其本身有強大的能力。
記得之前做項目的時候，小伙伴有說過一句：之所以可以反復成功，其實是方法論本身的能力，而我們更多的是在運用罷了。希望大家以此共勉。
作者：陳昱志Yeutz
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
很多情況下，用戶選擇一個產品的理由是有沒有某個功能，但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗，成了影響B端產品用戶續約的一個關鍵因素。
(1）流程越短越好。 我們在上班、逛街的時候，傾向選擇一條最短的路線，希望用最少的時間到達目的地。用戶操作系統時也希望這樣。
(2）整合功能場景。 某個功能由誰、在什么場景下操作，以及可能會遇到什么問題、需要什么關聯功能來解決，如果功能點相互獨立， 關聯很少，會讓用戶用起來很不順手，有種斷層的感覺。
（3）有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立，基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下， 可能不知道該怎么操作。這時，需要要提示用戶按具體步驟操作來順利完成任務。
交互體驗，對上承接了業務，對下承接了視覺。好的交互體驗能讓業務流程簡捷，更關注用戶習慣。 B端產品的交互和C端產品差異較大，C端常用的移動客戶端屏幕小，可顯示的內容較少，需要不停地跳轉完成操作，但B端產品大多用電腦來操作，一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點：
(1）少跳轉。曾有用戶反饋，說某個功能操作流程太長了，操作起來很麻煩。通過走查發現流程其實是沒有問題的，不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致，用戶在操作時去了另一個界面，然后再返回來，讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗，彈窗里面操作完點擊關閉即可， 改后用戶覺得流程縮短了，操作效率更高了。
B 端產品能用彈窗的時候，不要跳轉，哪怕彈窗里面加彈窗，只要不跳出這個頁面，用戶都會覺得沒有阻斷他的操作。雖然，從交互的角度講，彈窗里再加彈窗不符合規范，但在實用性面前是可以商榷的。
(2）少彈窗。 相比彈窗，在某些場景下，有更好的處理方式。比如，直接放頁面上。 彈窗是點擊按鈕觸發的，自動完成操作后關閉，或者用戶手動關閉。雖然比跳轉好，但比不上在頁面上直接呈現高效。
頁面上直接呈現是理想狀態。但是往往因為內容太多，很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求，原則是高頻且重點的內容外露。
（3）交互形式統一。 整個系統里面的交互規則要保持一致，大到彈窗的出現形式是居中彈出還是右側滑出，小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性， 需要對控件做個性化處理，但不要影響整體的一致性。
(1）信息清晰。 信息清晰不僅指信息結構的層次，還包括頁面的內容，最好讓用戶一眼就能看到上面寫了什么，有什么功能。有些設計師不喜歡加黑、大、粗的字， 覺得不夠高級，而是根據自己的美感把字體設計為一些個性化字體，且字號不大。
很多時候B端用戶的操作時間比C端用戶長，他們需要長時間盯著頁面，所以頁面信息清晰就能減少他們的疲勞。
(2）信息緊湊。 當頁面上想要呈現的內容較多時，設計師一定要壓縮空間，使布局合理緊湊。
(3）少用圖標。 有時候，設計師會使用圖標來代替文字表達，并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見，一是為了節省空間，二是為了美觀。但在B端產品中，大多數情況下，圖標越少越好，有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。
B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率，轉而影響到軟件的續約率。 為打造好的用戶體驗，我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候，有些好的交互方案會受到技術框架的限制，導致方案無法實施。
但是為了產品獲得更好的用戶體驗，首要考慮的依然是用戶的使用流暢度、易用性，而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決，把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品設計中，理解并設計好流程，對產品的體驗非常重要。通常涉及到有三個方面的流程：業務流程、審批流程、操作流程。
在企業的日常經營中，為了對業務過程進行更好的管理，企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作，使企業效率更高。對于 B端產品，設計師首先要讀懂業務流程，然后才能設計好產品。 業務流程，是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動。活動之間不僅有嚴格的先后順序限定，而且活動的內容、方式、責任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進行流轉交接。
下圖是某企業的采購流程，涉及了五個部門、多個崗位角色、多個業務活動。
業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的，在業務上具有一定的通用性，但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔，可以說“流程 + 單據=業務”， 每個環節的工作形成一張單據，記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后，進入到下一個環節的工作時，單據也會隨之流轉到下一個系統中對應的功能節點，并形成一張新的單據，記錄新的信息。
下圖是某企業采購流程中從采購到結算部分涉及的單據：
除讀懂業務流程外，我們還需要應用“場景驅動的設計”方法，整理出每個環節中涉及的用戶、場景，以及作業的特征，并大膽地通過設計來改造流程，最后通過設計減少人員工作量，減少流程中的多余環帶， 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程，要經過到貨簽收、質檢、 收貨入庫等過程，每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖：
經過對場景和可行性分析后，設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄，并全自動質檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成，作為用戶體驗設計師在調研的過程中發現有好的流程優化方法，或者看到好的競品值得參考，可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。
在企業中，出于對重點業務的管理需求，除了會制定固定的業務流程方便大家協作，還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時，將重要結果發給相應業務管理者審批。但是，由于一些企業組織機構復雜，管理嚴格，為了保證業務的合規與安全，需要多個角色、多個環節的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統中是提交單據)。
(2）各環節審批者會根據流程分別對材料進行審批。
(3）審批通過后會自動進行到下一步。
(4）審批不通過，就此流程結束。
(5）退回則打回到流程起點，待改進后重新走流程。
(6）審批都通過后，審批流程結束。
在實際應用中，可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當前審批人將審批材料轉給其他人。
(2）加簽：增加審批的步驟，在一些企業中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業或者國企，流程和功能更復雜。當面對復雜而多變的審批需求時，需要將審批流程設計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設計得更加模塊化，可以在任何一個業務環節中加入審批過程。
在審批流程的設計中， 根據企業制定的審批規則，自動判斷是否符合標準，自動審批。尤其對一些每天都在發生、經常重復而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發業務流程，以此來提高審批效率。
前面兩個流程主要基于企業業務制定，在企業沒有信息化前就已經存在了，在改造優化上還有一些阻力和困難。作為用戶體驗設計師，可以通過對操作流程的優化來改進用戶體驗。
以上文中的收貨案例為例子：
（1）系統中收到若干個質檢任務。
(2）逐一打印質檢單。
（3）帶著質檢單來到倉庫，尋找需要質檢的貨品。
(4）找到貨品，逐箱打開進行檢查，業務操作不熟練的還需要詢問老員工。
(5） 將質檢結果隨時記在打印出的質檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據實際工作中的業務場景，對操作流程進行了優化如下：
整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程，并簡化了“尋找單據”的過程及記錄結果的過程。
在對操作流程的設計過程中，也應遵循“場景驅動設計”的方法，并將物理實體、數字實體統一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復雜度。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、桑基圖、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是桑基圖重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、前言
視頻播放器中承載著極其豐富的內容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設計不但可為界面“減負”，還可幫助用戶更快捷觸達功能、提升操控便捷性。
視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知，如「單擊 →暫?！?、「雙擊→點贊」、「長按→快進」、「橫滑→導航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規通用手勢認知的基礎上，進一步對視頻場景中的手勢交互進行擴容升級？這也是我們接下來在手勢進階交互上的重點探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。
二、什么是「組合手勢」
「組合手勢」是基于常規手勢的組合擴展，其通常由兩種或兩種以上的常規基礎手勢所構成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規手勢為例，其觸發機制一般可分為兩個階段：step1交互信號→step2執行任務，即用戶通過某一基礎手勢發出交互信號，系統收到信號確認后便可立即執行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現有常規手勢兩階段觸發機制的基礎上，嘗試引入「意圖識別」環節，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發一般可分為三個階段：step1交互信號→step2意圖識別→step3執行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。
由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口，因此，其差異化創新具有較大設計靈活度，尤其需根據具體的使用場景進行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。
2.競品調研及選型
通過對競品進行調研，我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型， 分別為：長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。
選型A
「長按觸發獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發浮層播控選項」：通過長按手勢可觸發置于視窗上層的浮層選項入口，一定程度上可延續視頻觀看的沉浸體驗，但浮層擴展性有限；
選型C
「長按觸發特定播控功能」：通過長按手勢觸發特定的某個播控功能（如長按“快進”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設計方案
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經過和業務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
step1：以“長按手勢”創建一個新模式，即發出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統默認開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標功能項以選擇功能；
step3：用戶滑選錨定至目標功能后，松手釋放即可完成最后的功能執行確認。
「長按+向上滑選」快捷觸發對應功能項；
「長按+向下滑選」快捷觸發“快進”（一定程度上兼容老用戶對于此功能的使用習慣）。
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產生滑選行為便松手，則松手后依然可通過點選的方式觸發對應播控功能項。
3）易用性打磨
差異化的創新設計形式在前期總會面臨質疑和挑戰，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優化。
我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發現仍有部分易用性細節可進一步打磨優化。
3.1 ）擴展觸發熱區：
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發熱區，屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外，其它大面積區域熱區均可支持長按觸發快捷菜單，以降低觸發難度、提升易用性。
3.2 ）支持跟手觸發：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應反饋：
靈活判斷當前手勢觸控狀態（如滑入選擇 / 松手觸發），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發機制。
方案上線及驗證
以AB實驗對本次設計方案進行定量測試驗證：
「對照組」效果：長按觸發“快進”（各播控功能入口仍歸置于基礎菜單面板之中）；
「實驗組」效果：長按觸發“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經過近半個月的觀察，大盤指標穩定、播放完成率等滿意度指標穩步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發訴求。
「實驗組」的“快進”雖多了一步觸發步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高，通過滑選觸發“快進”的操作習慣也快速被培養起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口，隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、項目背景
百度文庫APP是一個在線文檔分享平臺，上線已有十余年的時間，是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入，時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中，我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現，文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。
二、由內而外，打造年輕化感知
通過對年輕市場進行洞察，我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求，他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高，也更愿意去探索產品新的玩法，與產品進行沉浸的情感互動。
所以此次年輕化改版不能只是對“產品的外表”進行升級，要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。
三、“老字號”互聯網產品的煥新之路
2.1 視覺升級-更好看
2.2 體驗升級-更好用
寫在最后
從UI設計誕生初期，設計師在屏幕上模擬現實世界的交互方式，用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉，設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。
未來，我們也會保持好奇心和探索欲，不斷打磨產品體驗，與用戶共同成長。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
宜家的設計為銷售負責。比如設計一個杯子，宜家的設計師需要考慮如何更多的賣出杯子。沒錯，銷售更多的產品是設計師的KPI。在這樣的目標導向下，設計師很容易去思考幾個問題。
眾所周知，宜家的產品是場景化的，總能讓人感受到設計師們的熱情、心血和心機。設計為銷售負責，售出更多的產品確實可以作為設計有效性的驗證方式之一，但銷售量卻不能作為設計的量化標準。
這兩者之間有很微妙的差異。我們引入一個概念叫做“數據趨勢的正向反饋”來解釋這個問題?！皵祿厔莸恼蚍答仭保邆湓试S波動，且不為一個具象的數值服務的特征。類似下圖示：
設計為銷售負責，我們可以理解為，衡量好設計的其中一個維度標準就是銷售“數據趨勢的正向反饋”，值得注意，不是銷售量的某個單一的KPI值。因為達成某個銷售量的KPI值有很多手段，設計策略、產品策略、運營策略和營銷策略等等方式都可能完成，如果用銷售量去衡量設計，會讓設計變得不夠純碎。但是，用“數據趨勢的正向反饋”來衡量設計是否有效，用戶是否認同卻是可行的。而且，“數據趨勢的正向反饋”意味銷售量是持續增長的，哪怕有波動，哪怕有快慢，長期看能夠持續增長代表用戶是健康的。設計價值是為產品帶來健康用戶，或者說是保障產品的健康度。產品健康度一般看幾個值。
用戶跳出率
用戶跳出率指只訪問了入口頁面就離開的訪問量與所產生總訪問量的百分比。通?；ヂ摼W的平均跳出率大致是73%，如果你的產品跳出率超過這個值，說明用戶質量不高。
平均訪問時長
平均訪問時長指用戶在一次訪問中，平均使用產品的時間。互聯網的平均訪問時長大致是2分40秒。
平均訪問頁數
平均訪問頁數=瀏覽量（PV）/訪問次數。互聯網的平均訪問頁數大致是2頁。
除此之外，產品還會從營收的角度看用戶支付金額、ARPU值和轉化率等等。營收指標對與設計來說，就是需要參考的趨勢數據了。了解了這些原理，怎么做呢？我們用首頁改版為例，首先按上述要求定義用戶健康度指標。假設首頁承載電商內容，根據電商特性在基礎指標之上，增加一個用戶在首頁的停留時長指標，這個指標衡量用戶是否能在首頁逛起來。
依據這些指標，就可以搭建針對于當前項目的用戶健康度指標，在設計過程中通過對指標和指標用戶的數據分析和對指標用戶的訪談綜合得出項目的核心問題及解決思路。通過線上驗證設計方案觀測數據模型的趨勢變化，以獲得最優的設計。設計在保障產品用戶健康度上，是一個持續迭代的過程。
產品沒有最健康，只有更健康。
作者：ZA大人
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
設計趨勢每年都在不斷地變化及輪回，多年前的風格技法在結合了當下的設計元素后，又會給我們展現出不同以往的主流時尚。
“趨勢不一定每年都會更新，但趨勢是我們設計的風向標?！?
基于對網絡數據的搜集及分析，我們對2023年設計趨勢做出了預測。
無論是否順應趨勢，我們都應該了解趨勢，擁抱變化，這才是我們設計師的準則。
借助當今的軟件和技術，3D創作已經不再被神話，越來越多的設計師開始在自己的作品中運用3D元素。
下圖是Droga5為格林威治（Greenwich）創作的一系列視覺設計，這組設計利用3D圖形，創造了更醒目的視覺效果，將格林威治宣傳為倫敦的新創意社區。
在手機品牌宣傳物料中，設計師將3D元素與手機進行了緊密結合，這樣的視覺樣式在市場中很快便能脫穎而出。
提起“酸”，大家下意識會想到酸的味道，而所謂的酸性設計更多表現的是一種設計理念。
酸性設計大多畫面元素豐富，各種金屬、玻璃、流體漸變、鐳射等科技感的元素都會運用其中，這也導致這類作品十分強調藝術的視覺沖擊性。
乍一看酸性設計會給人一種混亂失調的感覺，而實際上酸性設計并不止是某一種單一的設計風格，而是一種視覺情緒的表達。當下的暗黑金屬風、二次元的可愛風、明顯的幻彩漸變風格……往往都含有酸性設計的影子。
回看設計領域每一年的發展，“復古懷舊”一直是必不可少的關鍵詞。
無論是品牌形象，亦或是包裝設計，設計師們頻頻用現代手法詮釋復古之風。
還有傳媒集團CNET的品牌重塑，在現代時尚元素的基礎上，還融合了復古插畫，整體設計從1950-1970年代的美國新聞行業中汲取的靈感。
最近，襯線字體在品牌設計中的出鏡率極高。
不少網站的設計都是圍繞著襯線字體作為構圖中唯一或主要的設計元素而存在。
Stradivarius是誕生于1994年的西班牙女裝品牌，與ZARA隸屬同一公司。
2022年2月初，Stradivarius推出了全新的Logo視覺，襯線字體更容易彰顯女性簡潔現代的氣質外，同時兼具女性力量。
近兩年，NFT可以說是對設計、藝術、技術行業產生沖擊最大的新事物之一了。
NFT與平面設計聯系起來，就是我們所說的數字平面藝術。它的到來對設計師影響有很大變化，橫向能力要求有所提高，比如了解虛擬數字化設計，以及對全新審美和新三維技術有更高的要求。
以下這幅《Metafisica》便是非常熱門的NFT作品。
表情符號在如今是一個超越文本并能得到廣泛認知、跨越文化和多領域的視覺語言。
單一的枯燥圖標很難滿足多元化場景下情感的表達，于是，動態emoji圖標來了，它能帶來更強的視覺欣賞體驗。
高飽和度色彩是年輕的色彩，它是先天的樂天派，同時也是情感的直接表達。
可盡管“吸睛”對品牌而言十分重要，但在設計之余要注意色彩平衡，以免混用色彩，很容易引起視覺疲憊。
極簡主義杜絕一切多余的裝飾，形成獨特而簡單的視覺語言，用最簡潔的表現形式勾勒出產品最基本的形態。
簡潔的圖形設計摒棄了多余的圖案、文理等裝飾樣式，為真正重要的信息創造了呼吸的空間。
留白，是最高級的美。
將富有表現力的手寫字體寫在設計中，能為作品帶來不一樣的氛圍感。
隨手一寫，便是一幅“畫”！
2022年，我們在Dribbble或Behance中會發現很多設計師都開始有意識地采用“玻璃擬物化”美學的設計。相信在2023年，我們會看見更豐富的表達~
毛玻璃效果廣泛應用于UI設計之中，在摹客DT中也能快速完成。
使用玻璃擬物化設計的界面，由于毛玻璃的通透性，會呈現出一種虛實結合的美感。
除此以外，我們還可以看到的，這一趨勢已經明顯轉移到了玻璃和水晶質感上，而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以，2023我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。
2023年的設計趨勢給我們展示了設計的無盡可能，設計師們可以創作出更多超乎尋常的非凡設計，為用戶營造出獨樹一幟的全新體驗。
身為設計師，我們要持續積累優質的設計素材，要知道設計趨勢因人而異，我們能做的就是選擇合適的風格應用在設計中，才能發揮它不可估量的價值！
作者：摹客設計云
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、項目背景
百度文庫APP是一個在線文檔分享平臺，上線已有十余年的時間，是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入，時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中，我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現，文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。
二、由內而外，打造年輕化感知
通過對年輕市場進行洞察，我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求，他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高，也更愿意去探索產品新的玩法，與產品進行沉浸的情感互動。
所以此次年輕化改版不能只是對“產品的外表”進行升級，要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。
三、“老字號”互聯網產品的煥新之路
2.1 視覺升級-更好看
2.2 體驗升級-更好用
寫在最后
從UI設計誕生初期，設計師在屏幕上模擬現實世界的交互方式，用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉，設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。
未來，我們也會保持好奇心和探索欲，不斷打磨產品體驗，與用戶共同成長。
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言
互聯網瞬息萬變，在產品不斷更迭的過程中，我們經常說要保證產品設計的一致性和質量，提升產研鏈路的效率。但現實情況是：產研團隊長期面對的是產品越來越復雜，體量越來越大，一個個復雜的產品下包含N個業務線，N個業務團隊，甚至還有外部合作的業務，每個迭代都要面對數以百計的功能上線，經常容易出現各種相同但不一致的功能，上線質量參差不齊，執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。
所以如何解決團隊效率和產品質量問題？我們的解法是抽象體系化的解決方案：設計模式化和代碼化，設計從原子到全局進行統一和優化，并形成系統化的設計指導，由開發進行模式代碼化，提供靈活可配置的規則。以此，設計有更系統化的設計原則，整體的統一性和體驗有保障，設計和開發周期也可以縮減，甚至大部分日常需求可直接由產品對接開發直接上線。
1.1 什么是系統化解決方案？
大多數日常需求大多是從單點出發，當點變多變復雜了，就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象：從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化，來靈活提供拼裝N個不同頁面的機制，幫助團隊更系統化的進行產品設計。從組成內容不難看出，解決方案是需要建立在基礎組件基礎上，與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。
解決方案是一套相對穩定的設計機制，所以在產品初期或團隊建立初期，產品可能經常會調整的情況下，并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件，選擇性的建立部分穩定且利用率高的解決方案，并持續發展，保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟，解決方案也應該隨著一起成長，相互影響相互作用。
1）對產品頁面（尤其是重點功能）進行盤點，劃分頁面類型：比如列表、表單、詳情、dashboard；
2）對頁面中的內容進行區塊歸類
3）對區塊中的信息進行拆解
這三個過程下來，對于問題、規則、規律都會有一定的概念。以一個后臺系統為例
1、頁面大類主要是：列表、表單、詳情。
2、其中列表的內容大致區塊分為：頁面標題區、列表操作、列表篩選、列表內容，到這個階段已經可以發現，相同區塊位置就存在不穩定，在后臺系統中可能影響面不會非常大，但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。
3、不同區塊的內容拆解，同樣也會發現一些細節問題，比如篩選的樣式、規則不一致，列表操作的方式、位置、樣式、交互不一致等等
2.2、抽象、重組：從布局——區塊——組件——設計規則
從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點：第一是如何通過設計規則來避免同樣的問題產生，第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面，首先得有一個布局劃分，不同的區塊要放哪些內容，再到區塊里的細節內容規則，從而抽象出由布局到區塊的設計規則和可復用的組件。
以前面說的列表為例
1) 區塊主要是4類，明顯的問題是區塊位置不穩定，所以在布局結構上，需要定義1-2個穩定的可配置的布局框架來適應不同的內容
2）不同區塊梳理組成內容，內容細則
3）標記出可組件化的內容及規則
4）提煉整個過程中通用的設計規則，作為全局的指導。如：國際化、排版規則、超限規則、適配規則、文案規則等等。
通過布局——區塊——組件——設計規則，可以靈活的進行頁面拼搭
區分通用層和業務層，通用層落地到通用模板市場，利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性（如：業務主題、業務數據、業務拓展方案）的業務庫來生產新頁面。
目前群核設計團隊建立了一套平臺通用的解決方案，適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案，同樣的思路也應用在不同體系的工具場景中。整體實踐下來，產研效率提升近50%，甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升
三、解決方案的管理和發展
解決方案作為設計系統的一部分，與設計系統一同管理，業務設計師使用系統來輸出，反饋問題或需求給系統，有系統設計師判斷可行性，周期性的管理，及時更新并在內部互通，促進互相成長和發展。
解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容，業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別，則列入到通用庫。
這些方法和思路也并不限制行業或產品類型，僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題，只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率，讓產研團隊有更多的精力和時間投入更有價值的事情。
作者：酷家樂UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn