眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。

「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。

1. 戰略層——為什么做

原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

從原文可以提煉出Live Activity顯示特點：

1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。

2. 內容的信息量是一眼就能看完的程度。

但上述仍是表象，并非實質，接下來思考這幾個問題：

1. 為什么顯示的是進度/狀態頻繁更新的內容？

2. 為什么要強調用戶關心的？

3. 為什么信息量是一眼就能看完的程度？

沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。

進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。

當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。

信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。

分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。

2. 范圍層——做到什么程度

關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。

1）硬性限制

1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）

2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）

3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）

4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）

5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）

6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）

7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）

8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）

9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）

10. 限制不同設備的展示尺寸。（源自：規范）

2）非硬性限制

1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）

2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）

3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）

4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）

5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）

6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）

3. 結構層——這些東西如何組成？

（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。

4. 框架層——規劃用戶操作行為

通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。

1）吸引

1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。

2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。

3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。

4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。

2）查看

1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。

2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。

3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。

4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。

5. 表現層——如何呈現這些東西

對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。

1）顏色

1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。

2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。

3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。

2）間距布局

1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。

2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。

3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。

3）圓角

1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。

1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。

4）尺寸

需要適應不同機型的尺寸。具體的尺寸規范如下。

a. 靈動島

動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。

b. Live Activity大小

下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。

以上就是整理分析的全部。

在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。

不太愛看書，看了老忘，就很容易失去信心，垂頭喪氣、一蹶不振。

比較喜歡做圖，把信息間的邏輯以圖示化的方式表現出來，能加強理解，后期回顧也會比較舒心。

所以就有了這個系列——閱讀圖示化。

可能會出得很慢，畫圖比較費時間，想著怎么展示信息間的邏輯也很費時間。

基本是按著小節一塊內容對應單圖/多圖。

基本一張圖是一個完整的知識點。

當今提到促進業務增長，尤其是有關互聯網行業，總是繞不開B端設計。那么今天我們來挖一挖B端設計到底牛在哪里。

1、什么是B端設計

B端設計是指針對企業的終端用戶的產品設計，包括適用于消費者、企業、政府、行業等等市場的協同、全方位的客戶體驗設計，例如產品UI/UX設計、信息可視化設計等等。B端設計是提供終端用戶新的解決方案，注重以客戶的需求為導向，通過數據分析、可視化、流程優化等手段來進行產品設計。

在一個產品設計中，要考慮到用戶的體驗，UI/UX有著至關重要的作用，它能夠把產品從用戶的角度出發，將用戶直接引入到設計之中，使用戶步入終端，真正成為使用者。

此外，B端設計還要注重對業務流程的優化，例如在訂單管理系統的設計中，需要把客戶的需求分析清楚，盡可能用最少的步驟幫助客戶快速進行訂單操作，增加操作效率；同時，也需要考慮到如何將整個管理系統融入到業務流程之中，使其成為一個可持續發展的解決方案。

此外，B端設計還需要考慮系統安全性和可用性。系統安全性指的是在設計過程中重視數據安全，例如考慮不同用戶的權限，避免未經授權的訪問以及防止誤操作等；而系統的可用性則指的是系統操作的一致性，即如何在使用中滿足客戶的需求，在系統功能上保障系統的完備性和易用性，為用戶提供更方便的操作體驗。

2、B端設計的組成部分

正確的B端設計應包括：用戶界面設計、業務流程的優化、系統安全性以及可用性的考慮等。

用戶界面設計的目的在于提供簡單易用的用戶界面，以滿足客戶需求，提高用戶體驗。

業務流程優化則是確保系統能夠有效地協調用戶間的溝通，使用戶流程更加高效、可靠。

系統安全性考慮需要重視數據安全，增加對不同用戶權限的考慮，以避免未經授權的訪問以及誤操作。

而系統可用性方面，則需要系統操作一致性，保障功能的完整性和易用性，使用戶操作更加便捷。

用戶界面設計還需要考慮跨瀏覽器的兼容性，以確保用戶能夠在不同的終端上獲得有效的使用體驗。此外，對于功能性更強的應用，還需要考慮響應速度、網絡請求數和業務性能等方面的優化，以便在處理大量的信息時能夠有效地完成任務。

對于不同的用戶群體，應當提供相應的交互界面設計，例如考慮弱智使用者和視覺障礙者，以及嬰幼兒等特殊群體。此外，可以通過支持多種語言、國家文化差異和地域語言來優化用戶體驗。

3、如何使用B端設計原則來推動業務發展

B端設計原則可以幫助企業更好的把握商業機遇，推動業務發展。

首先，應當按照核心業務找出客戶需求，深入挖掘，從客戶視角出發，明確目標。

其次，要強化設計意識，注重交互性，利用技術手段和平臺將功能元件組合在一起，以便更好地解決客戶面臨的問題和滿足客戶的需求。

最后，對產品的功能、使用效果和用戶體驗進行定期的測試評估，根據反饋進行變更和優化，以滿足客戶的需求。

4、如何利用B端設計實現潛在的價值

為實現B端設計的潛在價值，可以采用多重方法，比如從創新的角度增加產品的附加值，加強功能和服務體驗，提升網站可用性，優化頁面布局，提高頁面加載速度等。

另外，還可以改進客戶體驗，通過可視化或語音技術提升網站和移動應用的交互性，以便讓客戶更容易獲取想要的信息和服務。

此外，可以加強產品的社會化和移動性，以便更好地滿足客戶的需求，從而獲得更多的潛在價值。

對于B端設計來說，還要考慮技術層面的因素。

首先，應根據客戶使用情況進行系統優化，以提高系統效率。

其次，要重視人機交互技術，盡可能提供給用戶更好的界面體驗，并利用智能技術提升用戶體驗。

此外，應結合實際情況，采用合適的網絡技術和安全技術，提升網站的安全性。

最后，還要將設計與市場營銷結合起來，通過有效的營銷手段，提高客戶購買意愿，以獲得更多的潛在價值。

B端設計要考慮的技術層面因素有：系統優化、人機交互技術、網絡技術和安全技術以及營銷手段。這些都是為了能夠更好地滿足客戶的需求，并獲得更大的價值。

5、優秀的B端設計案例，以及借鑒價值

首先，淘寶的B端設計把價值的提升放在了首位。它通過實時監測用戶行為來分析用戶習慣，以實現實時調整，提升客戶體驗。此外，淘寶的營銷手段也讓它的業務獲得了極大的成功。

另外，微信也是一個優秀的B端設計案例。它引入了更多的人機交互技術，以有效溝通用戶，同時也提供更安全、便捷的服務，大大提升了用戶體驗，獲得了廣泛的應用。

總之，優秀的B端設計不僅能優化用戶體驗，還可以帶來更多的商業價值。

從用戶體驗角度來看，優秀的B端設計應包括系統優化、人機交互技術、網絡技術和安全技術，這樣可以給用戶提供更流暢的體驗，更快的響應速度和更好的安全保障。

此外，B端設計還應該擁有一套完整和靈活的營銷手段，幫助企業獲得更多的客戶價值，以提升品牌影響力和競爭力。

要做好B端設計，一個重要的方面是把用戶群體的心理需求和行為習慣結合起來，設計出更具吸引力的產品界面。例如，可以通過實時調整產品配置、設定營銷活動等手段來滿足不同用戶群體的需求。

另外，為了提升用戶體驗，應該使用更智能化的人工智能（AI）技術，幫助企業更好地分析用戶行為，從而更有針對性地進行產品調整。

總而言之，B端設計的成功關鍵在于結合用戶群體的心理需求和行為習慣，并利用智能化的AI技術對用戶行為進行分析，只有這樣才能設計出更具吸引力的產品界面，滿足不同用戶群體的需求，并提升用戶體驗。

在企業開發B端產品之前，應該先進行大量的市場調研，以便弄清楚用戶的心理需求和行為習慣，這也是設計成功的前提。在制定設計思路時，應該結合用戶需求和行為習慣，并加入智能化AI技術，以有效調整產品界面，使其更具吸引力。在可行性研究階段，應該采用多種方法，以測試產品整體性能，包括安全性、可靠性等，確保系統可以正常運行，避免潛在風險的發生，為用戶的體驗提供完善的保障。市場調研是設計成功的先決條件。除了市場調研，企業還應該采用新穎的營銷策略，以拓展客戶群，豐富產品服務，提升用戶體驗，實現B端設計成功。

什么是開源設計（Open Source Design）

在講開源設計前，我們或許可以先講講開源一詞是指什么。

開源全稱開放源代碼，開源軟件最大的特點是開放，也就是任何人都可以得到軟件的源代碼，加以修改學習，甚至重新發放，當然是在版權限制范圍之內。雖然開源一詞最初是為軟件開發而創造的，但現如今開源所涉及的領域也極其廣闊，并不只是包括軟件領域，如醫藥領域的藥物開發開源、文化領域的書籍到期開源等等所以開源設計已包含了更廣泛的含義，它包括了由任何人或者團隊自由共享、協作的設計方案、項目、產品。

我們來看幾個大型開源的設計了解一下~

開源設計資源舉例

Ant Design

阿里的開源系統后臺組件庫

https://ant.design

ECharts

百度推出的開源圖表

https://echarts.apache.org/

Unsplash 

全球知名圖片開源平臺 

https://unsplash.com

所以我們不難發現開源設計都有以下特點： 

免費（大部分是）：開源設計的一個關鍵要素是它們通常（但不總是！）免費。這是一個重要因素，因為閉源設計通常需要花費不菲的價格或者冒著侵犯版權的風險去使用。 

思想碰撞：更多的設計師或者創意愛好者共同為一個創意提出自己的見解和再設計。

設計開源領域廣闊：設計開源領域也幾乎涵蓋了所有的設計和創意領域如平面設計、三維設計、用戶體驗設計、環境設計、建筑設計、服裝設計、插畫、動畫設計等等 

但是許多人可能會有一個疑問，開源設計和以往的素材網站或者源文件售賣網站有什么區別呢？ 

在我看來，開源網站與傳統售賣設計資源的網站最大的區別是開放與共建，以figma的社區為例，作者發布作品后，任何人都可以對其作品進行redesign甚至remix，這極大的提高了設計師的興趣，每個人都希望自己的作品能被他人看到，也希望自己的創意能與他人的創意進行更好的結合，這是一個多么美好的場景。而傳統網站只是冷冰冰的展示文件售賣資源，缺少了設計中的靈魂。 

那說了這么多，開源設計到底有哪些優勢呢？

開源設計的優勢 

提升設計效率：設計師不應花費時間去解決別人已經解決的問題，比如當我設計一個新項目時，無需從零開始設計系統組件，可以直接使用Ant Design、Ant Mobile Design等現有組件庫。

增加學習機會：通過開源社區，設計人員可以從其他人所做的項目中學習，并與專業人員交流經驗。 

提高設計質量：設計師自己看本人作品時，往往是身在其中不知如何下手，而將作品發布到更廣泛的社區有助于設計師獲得有價值的反饋以改進他們的作品。 

提升品牌價值：對設計開源后，公司品牌能在某些領域內獲得傳播，提升品牌價值。并且在招募人才時也能成為有吸引力的一項條件。 

提升個人價值：一個設計師想要提升個人價值和影響力，可以用開源作品來在行業內獲得一定口碑，甚至直接將用戶流量轉化為訂單，或許是更簡單且容易的事情。 

從這些優勢中不難發現，在開源生態中，我們的作品不再是一座孤島，通過互聯網，我們的作品可以和任何人進行鏈接并且產生共鳴，提升品牌和個人的價值，所以每個人都值得感受開源的美好。 

但開源的同時不可避免的會帶來許多新的問題和挑戰，讓我們一起來看一下。

開源設計帶來了哪些挑戰 

知識產權問題：在開源社區中，設計師可能不清楚其創作的知識產權。因此，他們可能會不自知地侵犯其他設計師的知識產權。 

設計門檻問題：設計開源意味著設計師的門檻變低，任何人都可以隨意使用開源的設計項目，導致設計師不再愿意花心血創作。 

設計師競爭力下降：開源設計意味著普通的設計內容已不需要單獨的設計師來完成，頂尖設計師的機會會更多，而普通設計師的競爭力會明顯下降。 

隨著這些挑戰的來臨，如何更好的面對設計領域的開源是值得深思的問題，既要保護設計師的自身利益，也要讓設計行業在開放、共享的環境下擁抱變革，所以在未來的道路上，我們每個人都可以嘗試用自身的方法去探索未來，讓每個人都能成為時代浪潮中的一朵浪花。

什么是“有駕”

【有駕】是百度旗下的汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。 

現狀分析

有駕品牌在孵化初期，重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強化用戶的感知。

但是隨著品牌持續運營進入新的階段，我們發現現有的設計無法滿足后續的運營訴求了，主要體現在：

品牌logo：不能體現汽車的行業屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時下潮流的年輕配色體系。

品牌活動：品牌關聯度弱，活動維度單一。

項目概述

因此，我們重新梳理有駕的品牌定位與調性，借助本次品牌升級，打造有駕差異化風格，形成獨有的視覺印記。

因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知，在原有基礎上進行品牌標識的探索及應用，以強化品牌感知，提升品牌的競爭力，整合業務資源做心智觸達。

前期分析

前期我們對汽車垂類的競品進行了一輪調研，并且結合有駕的用戶群里，尋找有駕品牌的差異點。

有駕用戶群體年輕化為主，普遍具有高學歷，集中在新一線二線城市。

通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后，我們確定了有駕品牌設計的四個核心關鍵詞：年輕、科技、未來、專業。

建立體系

在明確設計方向后，我們梳理了線上線下的所有品牌觸點，結合前期的調研結論，匯總出了有駕設計系統的完整框架，以確保品牌設計的完整性和靈活適用性。

設計落地

基于前期分析洞察結論，我們在繼承圓形和車形的基礎上，對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入，簡化圖形形態，嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。

相對于升級前，新版的logo加入汽車元素，解決升級前logo的行業屬性不明確的問題，讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。

符號提煉

確定品牌logo后，為了確保品牌能夠更好的拓展應用，進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型，造型偏向輪胎；在不破壞原有型的基礎上，加入一些折角的質感的變化，使圖形變化更加豐富，更有識別度。

設計語言

為了更好的觸達到各業務場景，所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結合有駕的年輕化，科技感的設計目標，探索出以下三種質感呈現：

符號拓展

在提取的形狀基礎上進行變形，增加折疊細節。在大事件活動，海報等場景使用，增加品牌關聯度。

設計字體

結合全新的品牌定位，我們也優化了有駕的品牌字體，從細節出透出有駕的品牌感知。

品牌手冊

新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。

目前我們也對現有的品牌手冊進行拓展和完善，同步到業務方，以便更好的保證各業務場景觸點下品牌的認知和統一，達到提質增效的目的。

品牌落地

除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中，讓有駕品牌形象更加立體多元。

結語

目前有駕品牌升級已經取得階段性成果，沉淀出更加完善的品牌資產，不僅提升設計效率保證全鏈路的品牌曝光，也為業務規模化打下基礎。之后我們也將不斷完善和擴充品牌資產，將設計成果不斷落地到業務中，細化業務目標并與設計目標緊密結合，多維度助力業務的高速發展。

前言

互聯網瞬息萬變，在產品不斷更迭的過程中，我們經常說要保證產品設計的一致性和質量，提升產研鏈路的效率。但現實情況是：產研團隊長期面對的是產品越來越復雜，體量越來越大，一個個復雜的產品下包含N個業務線，N個業務團隊，甚至還有外部合作的業務，每個迭代都要面對數以百計的功能上線，經常容易出現各種相同但不一致的功能，上線質量參差不齊，執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。

所以如何解決團隊效率和產品質量問題？我們的解法是抽象體系化的解決方案：設計模式化和代碼化，設計從原子到全局進行統一和優化，并形成系統化的設計指導，由開發進行模式代碼化，提供靈活可配置的規則。以此，設計有更系統化的設計原則，整體的統一性和體驗有保障，設計和開發周期也可以縮減，甚至大部分日常需求可直接由產品對接開發直接上線。

目錄

• 一、什么是系統化解決方案，什么樣的團隊適合做
• 二、如何輸出、推進設計解決方案
• 三、解決方案的管理和發展

(一)什么是系統化解決方案，什么樣的團隊適合做

1.1 什么是系統化解決方案？

大多數日常需求大多是從單點出發，當點變多變復雜了，就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象：從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化，來靈活提供拼裝N個不同頁面的機制，幫助團隊更系統化的進行產品設計。從組成內容不難看出，解決方案是需要建立在基礎組件基礎上，與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。

1.2 什么樣的團隊適合做

解決方案是一套相對穩定的設計機制，所以在產品初期或團隊建立初期，產品可能經常會調整的情況下，并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件，選擇性的建立部分穩定且利用率高的解決方案，并持續發展，保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟，解決方案也應該隨著一起成長，相互影響相互作用。

(二)如何輸出、推進設計解決方案

2.1 由大到小的進行信息拆解

1）對產品頁面（尤其是重點功能）進行盤點，劃分頁面類型：比如列表、表單、詳情、dashboard；

2）對頁面中的內容進行區塊歸類

3）對區塊中的信息進行拆解

這三個過程下來，對于問題、規則、規律都會有一定的概念。以一個后臺系統為例

1、頁面大類主要是：列表、表單、詳情。

2、其中列表的內容大致區塊分為：頁面標題區、列表操作、列表篩選、列表內容，到這個階段已經可以發現，相同區塊位置就存在不穩定，在后臺系統中可能影響面不會非常大，但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。

3、不同區塊的內容拆解，同樣也會發現一些細節問題，比如篩選的樣式、規則不一致，列表操作的方式、位置、樣式、交互不一致等等

2.2、抽象、重組：從布局——區塊——組件——設計規則

從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點：第一是如何通過設計規則來避免同樣的問題產生，第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面，首先得有一個布局劃分，不同的區塊要放哪些內容，再到區塊里的細節內容規則，從而抽象出由布局到區塊的設計規則和可復用的組件。

以前面說的列表為例

1) 區塊主要是4類，明顯的問題是區塊位置不穩定，所以在布局結構上，需要定義1-2個穩定的可配置的布局框架來適應不同的內容

2）不同區塊梳理組成內容，內容細則

3）標記出可組件化的內容及規則

4）提煉整個過程中通用的設計規則，作為全局的指導。如：國際化、排版規則、超限規則、適配規則、文案規則等等。

通過布局——區塊——組件——設計規則，可以靈活的進行頁面拼搭

2.3 落地代碼庫 

區分通用層和業務層，通用層落地到通用模板市場，利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性（如：業務主題、業務數據、業務拓展方案）的業務庫來生產新頁面。

目前群核設計團隊建立了一套平臺通用的解決方案，適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案，同樣的思路也應用在不同體系的工具場景中。整體實踐下來，產研效率提升近50%，甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升

三、解決方案的管理和發展

解決方案作為設計系統的一部分，與設計系統一同管理，業務設計師使用系統來輸出，反饋問題或需求給系統，有系統設計師判斷可行性，周期性的管理，及時更新并在內部互通，促進互相成長和發展。

解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容，業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別，則列入到通用庫。

這些方法和思路也并不限制行業或產品類型，僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題，只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率，讓產研團隊有更多的精力和時間投入更有價值的事情。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司