編輯導讀:隨着互聯網行業的發展,產品體驗的一致性和開發的效率越來越被重視,設計系統的出現就是為了解決這樣的問題。一套優秀的設計系統有利於幫助產品在各個平台保持一致的設計語言和風格,給用户一致的產品體驗。本文將從4個方面,對設計系統進行深度分析,希望對你有幫助。
58同城是一個海量的分類信息服務平台,提供房產、招聘、二手車、團購、黃頁、交友等多種服務。由於存在不同業務類型與錯綜複雜的用户體系,使得各業務設計師之間的溝通與合作尤為重要。在同一平台下,如何構建58設計中台成了最大的課題。
58UXD用户體驗設計中心從未停止探索。近年來成立多個專項體驗小組,經過不斷的技術完善與創新,建立全新10.0設計語言。最大化保證了平台穩定性與分業務的靈活性,讓設計走向專業化和智能化。
我們將業務中公共的、通用性高的部分合並同類項,抽取到中台沉澱為服務能力。在一定的範圍內獲得最佳秩序,減少相同業務、系統的重複建設,直觀地降低設計產品研發成本。
接下來將從項目發起到設計交付全流程進行分析,我們是如何在每個節點進行干預,使設計系統實現高效運轉。我們不難發現,隨着智能化工具的研發、業務發展的需要,設計師職能逐步從視覺製作轉換為設計決策者。工具化、模塊化、組件化逐步代替人工,為設計師爭取了更多時間進行用户調研、優化產品原型、參與交互等工作,多角色實現全流程體驗優化。
那麼在每一個環節採取何種措施可以提升設計服務力呢?用一張設計運轉齒輪概括我們的優化步驟。
設計流程:需求池、分析策略、制定設計語言、決定執行標準、開始生產、優化交付、反饋驗證、沉澱經驗、提煉優化點重回需求池。
按階段劃分為:
- 設計前:將需求分級與標準化,根據設計語言的制定設計方案。
- 設計中:進入模塊化後根據原型拼接,同步選擇生產方式,利用資產池中的相關元素,依靠人機來完成需求製作,最後完成交付。
- 設計後:針對上線後的數據後平台觀測,加入用户分析形成新的優化點,最終迴流需求池,沉澱的經驗加入知識庫。
資產池需要設計不斷供應、優化、增補保證效率、效果。那整個設計齒輪運轉的關鍵是什麼?
從標準、內核、元素、工具四個關鍵點進行一一解讀。
01 標準專業的設計必須建立標準,舉一個小例子,不難發現工廠製衣過程中水洗標都在左側,這個是行業標準,根據人體工程學等因素設定,工廠根據標準進行批量生產,不論是跨類型還是跨工廠都可以實現模版化快速生產。同樣所有產品都需要建立一定的設計準則,根據複用模型量產提升設計規模。
具體可以從需求標準化、流程模塊化、組件通用化入手。
1. 需求標準化標準化需要提供設計需求文檔。
從源頭做起,把產品需求標準化,根據需求類型自動進入相應的需求池,加快設計理解。要求產品人員按需求填寫需求單,獲得充分信息輔助設計,避免目標偏差。
標準化可以按格式提供內容。
例如流量運營中的投放需求,根據設計研究對文案、字數、主標題與副標題的行數、圖片內容等因素加以規範。產品按格式提供需求文檔,加快處理速度,為實現自動化奠定基礎。
標準化可以進行需求分級。
如何判斷需求的優先級?分級別決定採取怎樣的設計手段?
可以根據緊急度與重要度兩個維度分別進行判斷,重要的不緊急的可以長期重點發力,也可列為okr項目不斷跟進,重要的緊急的那麼要馬上做,緊急的不重要的常態化需求,可以大家分擔做。不緊急不重要的級別權重為最低排最後。
根據評級評估表,進入相應排期分類,快速溝通設計成本與相應產出標準。
標準化需要風險評估。
是否存在技術實現難度?是否採用特殊動效、c4d、AR等特殊手法?預期修改意見是否大於3次?是否存在策略層變動風險?是否存在原型變動頻繁情況?
如有以上情況,需要在需求文檔中額外説明,並郵件同步。技術、產品、設計同學根據風險評估,做好應對方案。
2. 流程模塊化把工作流程梳理成關鍵節點,採取階段性的跟蹤。在固定的流程上採取固定的方法,從而讓流程實現自運轉。例如設計走查的時間點,切入在功能測試的同時進行,在冒煙測試階段進入視覺測試,上線前必須設計同學審核等等,每一步可以利用iwork進行跟蹤。
3. 組件通用化設計系統中的元素、控件、版式都可以組件化,但切記通用原則,以保證根據不同目的進行不同的組合。
例如58首頁的改版,我們將功能劃分為不同模塊,充分滿足業務進行不同的組合與調用,形成新的界面。
需求可以利用工具將組件模塊生成為所需頁面,並不斷驗證與優化。
02 內核任何組合都離不開設計內核,真正展示產品的核心優勢與價值,與競品產生差異化。讓我們一起探索58同城用户體驗的設計內核。
秉承58同城讓生活簡單美好的願景,打造豐富的本地服務信息平台,採用簡單易理解的、親民的、無冗餘的設計理念。將“設計規範”逐漸改為設計體系、設計語言,把設計語言作為一種“溝通的方式”向產品的各個觸點傳遞。
設計內核:以簡馭繁,做有用的設計。
58同城logo由紅、綠、藍、橙等色調構成,每種顏色代表了不同的業務,品牌理念圍繞LOCO(Life、People、Creativity、Ecosystem),包括生活化、人、創造力、生態四個維度進行LOCO配色拆分,平台採用主橙色,分類業務招聘、房產、黃頁、二手車等從橙色延續到藍色,並將LOCO符號拆分延展,組合成相應的業務品牌符號。緊緊圍繞設計語言核心理念,保證了一致性與多元化。
全業務通用原則:一致、疊加、多彩、圓潤為基調,表達專業、豐富、多元、親和的設計理念。
根據品牌基因設定固定配色規則,例如通用標籤規則的設計,讓每一個組件、每一個元素都具有了58的靈魂。
03 元素為提升設計效率,我們建立了共享設計資產池,其中包括插畫庫、icon庫、元素庫、圖片庫、組件庫、玩法庫等等。積累需要漫長的過程,所以研發了水晶球共享平台,鼓勵設計師上傳,互通有無的同時保持設計對齊。
04 工具工欲善其事,必先利其器。2020年初在58UXD高級總監何瀟帶領下成立了TOOLKITS設計工具研發小組。小組成員緊密配合,設計驅動全方位打造設計中台,利用工具輔助設計流程中的各個觸點。
在設計流程的不同階段,為設計、產品、技術提供相應的工具。
典型案例:
- 58問卷系統:企業定製化雲服務平台。服務於企業以及產品的調研。提供豐富的問卷模版與58特色的商家數據服務。
- IWIKI:文檔庫管理平台。上傳知識沉澱、分享、用研、競品分析等,同時支持規範查詢等相關內容。
- IWORK:產品需求管理平台。產品、設計師、技術的任務池,追蹤整個設計流程。
- 58雲盤:文件存儲雲平台。源文件等大型資產存儲,支持遠程在線協作。
- 水晶球:設計資產分類管理中心。素材可視化分類,設計產出的複用與再造,為智能化生產提供原材料。
- 斑馬:人工智能設計平台。提供智能合圖、摳圖、素材模版搭建等功能,最終通過機器製圖實現設計自動化。
- 風火輪:組件可視化三方協作平台。從代碼、設計樣式等進行全面打通,提高設計還原度。實現代碼組件化,減少溝通成本,全面提效。
- MATRIX:中後台設計組件平台。致力於打造企業級的產品設計體系,建立適用於設計團隊、開發團隊、產品團隊的全鏈路通用產品解決方案。讓項目開發更直觀,更高效、更簡單。
圖中為共建項目的責任人,項目背後還有很多努力的同學,整個設計系統離不開58UXD每一位設計師的辛苦付出。如果對其中項目感興趣的同學,敬請關注58UXD相關文章。
以上分別從標準、內核、元素、工具等角度分析了優化的關鍵點。58UXD將探索更多的輔助方法幫助設計師減輕負擔,更好的服務用户。
我們的目標:讓設計提升服務,讓生活簡單美好。
作者:李巖,設計專家
本文來源於人人都是產品經理合作媒體@58用户體驗設計中心(微信公眾號@58UXD),作者@李巖
題圖來自 Unsplash,基於CC0協議。