提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱?,我們會在第一時間與您聯系!
中臺企業(yè)級項目經常會面對各個業(yè)務線的需求,面對大量網站設計需求,會遇到很多問題,比如:如何快速產出設計需求、制定統一設計風格等。本文將和大家詳細介紹設計師們如何發(fā)起快速產出高質量設計網站
近半年我做過幾十個官網需求,從定義每個官網從設計到開發(fā)走查會花費大量時間。因此,我總結了一套工作方法,1天時間就可以快速產出多個網頁設計,本文將結合項目從設計提效角度與大家分享設計方法:
(最右邊banner@77設計)
01
設計網頁中遇到的問題
面對企業(yè)級中后臺龐大且復雜的集合,會面臨各類問題:
業(yè)務多,資源少
本多個需求同時跟進,項目多且雜從而產生超負荷。也不便于更好地理解業(yè)務。
人力成本高
設計資源有限,設計完成后需要和不同業(yè)務線開發(fā)進行多次設計走查,影響設計師提效。
沒有品牌性
針對b端產品,多樣性設計無法形成品牌特性,傳達品牌特色,導致中臺業(yè)務線繁多但不“精致”
體驗差
官網設計中也有很多相似功能,面對繁多需求,設計者快速做出響應會產生重復勞動成本。只能做到滿足功能,用戶體驗并不是很友好。
02
突破問題
突破問題通過總結之前的工作,發(fā)現很多設計內容有50%以上的重復率,我們要做的是將這50%重復率形成設計體系化,建立資源整合,搭建規(guī)范化官網模塊,并把模塊設計反推給產品,在提高設計效率的同時也減少產品工作,減少協同成本。
通過“收集需求——整合歸納——定義組件——代碼搭建“ 的過程提升設計效率。
第一步:整合資源,模塊的確立
整合各個業(yè)務線資源,并根據業(yè)務系統進行分類:數據中臺,技術中臺,業(yè)務中臺。面對這三大類別,目前官網需求量會達到幾十個,而面這些繁多網站需求,首先要做的就是整合分類。
通過對對業(yè)務線歸類,統計出高頻15+個組件模塊:Banner、產品優(yōu)勢、產品特色、案例、信息內容、信息流程、合作方、聯系我們、關于我們、使用流程、功能介紹、手機\電腦信息展示、合作方、地理地圖、其他模塊等...
第二步:模塊梳理歸類
并更具根據模塊類別的復用率進行再次梳理,產出設計模版。模版根據設計形式、排版布局等方面進行進一步延展,復用率高的模塊對應模板更豐富。
03
設計風格建立
設計語言(理念)的建立與模塊產出
視覺體系上,B端產品不同于C端,設計更多為體驗服務,色彩的豐富度相對較弱,單一。要突出b端設計,我們決定從精致性上為切入點,選定“輕擬態(tài)”風格,即突出設計的細節(jié)性又不會因為過度設計影響內容。并根據業(yè)務體系與設計風格,完善設計語言關鍵詞提煉:科技、高效、簡約。
字體與顏色規(guī)范
色彩能夠起到視覺語言傳達和信息承載作用。企業(yè)級產品延用了matrix 的配色體系,以藍色調為主色,同時模塊產出深淺色系,便于多方面選擇。
設計布局
采用刪格系統定義布局,根據首頁和內頁展示形式進行基礎布局
icon再創(chuàng)新
圖標也進行三大層級劃分,以應用于不同場景:
3D圖標3d質感圖標。用于重要層級模塊,數量控制4個以內。
(3dicon設計:甜甜)
玻璃球圖標磨砂玻璃風格已經廣泛應用于ui產品中的很多地方,我們在磨砂玻璃基礎上,創(chuàng)新新的icon風格“玻璃球”icon,該風格能更換的和輕質感設計融合在一起,用幾何元素設計,通過拼接組合和系統icon設計,能夠在短時間內快速產出立體icon,適用少于8個類別的模塊icon。
輕擬態(tài)線性圖標3d線性圖標適用于多場景模塊,可大范圍出現在頁面中。
三維設計banner模塊分為3d三維風格和二維平面圖片,根據不同業(yè)務線定義使用規(guī)則。如商業(yè),公益相關產品,選定圖片作為banner展示更能準確傳達信息,而技術類官網用3d效果更能傳遞科技性。
同時定義多種banner布局:左文右圖,文字居中,banner加搜索模塊,圖片banner等,可根據需求自由選擇。
(該banner 來源@七七設計)
幾何化形的裝飾元素為了體現網頁設計的“空間感” 網頁設計中加入幾何元素穿插,根據業(yè)務品牌語言 圓、三角、方定義輔助裝飾元素。(圓-業(yè)務 ;方-技術 ;三角-數據圓、三角、方定義設計幾何元素)
多樣性變化 為官網模塊的產出依據業(yè)務線,在建立規(guī)范化組件的同時也需要考慮設計中的“區(qū)別性”業(yè)務線-營銷產品,更多體現商業(yè)性質設計采用暗色系,而技術類官網更多體現科技感,加入3d元素。在同一模塊的設計也加入背景白色/暗色和模塊的亮色/暗色。
(banner 來源@七七設計)
04
實際應用
目前我們已經產出50+模塊,10個+網頁模版,通過代碼化,建立“云搭”這一網頁生成工具,建立中臺系統在生成平臺,目前已經支持多個業(yè)務線。從設計產出模塊到開發(fā)實現模塊代碼話再到產品拼接選擇,整體過程節(jié)約了設計資源,為產品研發(fā)提效提供一站式解決方案。
(3dbanner:甜甜設計)
最后還有必不可少的一步:當我們完成項目時定期對用戶進行訪談和制做用戶體驗地圖,不斷追蹤用戶體驗,收集體驗問題,便于后續(xù)進一步的優(yōu)化。
Powered by Froala Editor
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊