01 設計網(wǎng)頁中遇到的問題

面對企業(yè)級中后臺龐大且復雜的集合，會面臨各類問題：

• 業(yè)務多，資源少

• 人力成本高

• 沒有品牌性

• 體驗差

官網(wǎng)設計中也有很多相似功能，面對繁多需求，設計者快速做出響應會產(chǎn)生重復勞動成本。只能做到滿足功能，用戶體驗并不是很友好。

02 突破問題

通過總結之前的工作，發(fā)現(xiàn)很多設計內(nèi)容有50%以上的重復率，我們要做的是將這50%重復率形成設計體系化，建立資源整合，搭建規(guī)范化官網(wǎng)模塊，并把模塊設計反推給產(chǎn)品，在提高設計效率的同時也減少產(chǎn)品工作，減少協(xié)同成本。

通過“收集需求——整合歸納——定義組件——代碼搭建“ 的過程提升設計效率。       

• 第一步：整合資源，模塊的確立

整合各個業(yè)務線資源，并根據(jù)業(yè)務系統(tǒng)進行分類：數(shù)據(jù)中臺，技術中臺，業(yè)務中臺。面對這三大類別，目前官網(wǎng)需求量會達到幾十個，而面這些繁多網(wǎng)站需求，首先要做的就是整合分類。

通過對對業(yè)務線歸類，統(tǒng)計出高頻15+個組件模塊：

Banner、產(chǎn)品優(yōu)勢、產(chǎn)品特色、案例、信息內(nèi)容、信息流程、合作方、聯(lián)系我們、關于我們、使用流程、功能介紹、手機\電腦信息展示、合作方、地理地圖、其他模塊等…

• 第二步：模塊梳理歸類

并更具根據(jù)模塊類別的復用率進行再次梳理，產(chǎn)出設計模版。模版根據(jù)設計形式、排版布局等方面進行進一步延展，復用率高的模塊對應模板更豐富。

03 設計語言（理念）的建立與模塊產(chǎn)出

• 設計風格建立

視覺體系上，B端產(chǎn)品不同于C端，設計更多為體驗服務，色彩的豐富度相對較弱，單一。要突出b端設計，我們決定從精致性上為切入點，選定“輕擬態(tài)”風格，即突出設計的細節(jié)性又不會因為過度設計影響內(nèi)容。并根據(jù)業(yè)務體系與設計風格，完善設計語言關鍵詞提煉：科技、高效、簡約。

          

• 字體與顏色規(guī)范

色彩能夠起到視覺語言傳達和信息承載作用。企業(yè)級產(chǎn)品延用了matrix 的配色體系，以藍色調(diào)為主色，同時模塊產(chǎn)出深淺色系，便于多方面選擇。

• 設計布局

采用刪格系統(tǒng)定義布局，根據(jù)首頁和內(nèi)頁展示形式進行基礎布局

         

• icon再創(chuàng)新

圖標也進行三大層級劃分，以應用于不同場景：

3D圖標

3d質(zhì)感圖標。用于重要層級模塊，數(shù)量控制4個以內(nèi)。

玻璃球圖標

磨砂玻璃風格已經(jīng)廣泛應用于ui產(chǎn)品中的很多地方，我們在磨砂玻璃基礎上，創(chuàng)新新的icon風格“玻璃球”icon，該風格能更換的和輕質(zhì)感設計融合在一起，用幾何元素設計，通過拼接組合和系統(tǒng)icon設計，能夠在短時間內(nèi)快速產(chǎn)出立體icon，適用少于8個類別的模塊icon。

輕擬態(tài)線性圖標

3d線性圖標適用于多場景模塊，可大范圍出現(xiàn)在頁面中。

         

三維設計

banner模塊分為3d三維風格和二維平面圖片，根據(jù)不同業(yè)務線定義使用規(guī)則。如商業(yè)，公益相關產(chǎn)品，選定圖片作為banner展示更能準確傳達信息，而技術類官網(wǎng)用3d效果更能傳遞科技性。

同時定義多種banner布局：左文右圖，文字居中，banner加搜索模塊，圖片banner等，

可根據(jù)需求自由選擇。

幾何化形的裝飾元素

為了體現(xiàn)網(wǎng)頁設計的“空間感” 網(wǎng)頁設計中加入幾何元素穿插，根據(jù)業(yè)務品牌語言 圓、三角、方定義輔助裝飾元素。（圓-業(yè)務 ；方-技術 ；三角-數(shù)據(jù)圓、三角、方定義設計幾何元素）

多樣性變化 

為官網(wǎng)模塊的產(chǎn)出依據(jù)業(yè)務線，在建立規(guī)范化組件的同時也需要考慮設計中的“區(qū)別性”業(yè)務線-營銷產(chǎn)品，更多體現(xiàn)商業(yè)性質(zhì)設計采用暗色系，而技術類官網(wǎng)更多體現(xiàn)科技感，加入3d元素。在同一模塊的設計也加入背景白色/暗色和模塊的亮色/暗色。

04 實際應用

目前我們已經(jīng)產(chǎn)出50+模塊，10個+網(wǎng)頁模版，通過代碼化，建立“云搭”這一網(wǎng)頁生成工具，建立中臺系統(tǒng)在生成平臺，目前已經(jīng)支持多個業(yè)務線。從設計產(chǎn)出模塊到開發(fā)實現(xiàn)模塊代碼話再到產(chǎn)品拼接選擇，整體過程節(jié)約了設計資源，為產(chǎn)品研發(fā)提效提供一站式解決方案。

后續(xù)我們將發(fā)布云搭二期文章，會為大家介紹設計師是如何從產(chǎn)品、交互思維，自主研發(fā)“云搭”這款工具的，敬請期待。