01 設(shè)計網(wǎng)頁中遇到的問題
面對企業(yè)級中后臺龐大且復(fù)雜的集合,會面臨各類問題:
- 業(yè)務(wù)多,資源少
- 人力成本高
- 沒有品牌性
- 體驗差
官網(wǎng)設(shè)計中也有很多相似功能,面對繁多需求,設(shè)計者快速做出響應(yīng)會產(chǎn)生重復(fù)勞動成本。只能做到滿足功能,用戶體驗并不是很友好。
02 突破問題
通過總結(jié)之前的工作,發(fā)現(xiàn)很多設(shè)計內(nèi)容有50%以上的重復(fù)率,我們要做的是將這50%重復(fù)率形成設(shè)計體系化,建立資源整合,搭建規(guī)范化官網(wǎng)模塊,并把模塊設(shè)計反推給產(chǎn)品,在提高設(shè)計效率的同時也減少產(chǎn)品工作,減少協(xié)同成本。
通過“收集需求——整合歸納——定義組件——代碼搭建“ 的過程提升設(shè)計效率。
- 第一步:整合資源,模塊的確立
整合各個業(yè)務(wù)線資源,并根據(jù)業(yè)務(wù)系統(tǒng)進(jìn)行分類:數(shù)據(jù)中臺,技術(shù)中臺,業(yè)務(wù)中臺。面對這三大類別,目前官網(wǎng)需求量會達(dá)到幾十個,而面這些繁多網(wǎng)站需求,首先要做的就是整合分類。
通過對對業(yè)務(wù)線歸類,統(tǒng)計出高頻15+個組件模塊:
Banner、產(chǎn)品優(yōu)勢、產(chǎn)品特色、案例、信息內(nèi)容、信息流程、合作方、聯(lián)系我們、關(guān)于我們、使用流程、功能介紹、手機(jī)\電腦信息展示、合作方、地理地圖、其他模塊等…
- 第二步:模塊梳理歸類
并更具根據(jù)模塊類別的復(fù)用率進(jìn)行再次梳理,產(chǎn)出設(shè)計模版。模版根據(jù)設(shè)計形式、排版布局等方面進(jìn)行進(jìn)一步延展,復(fù)用率高的模塊對應(yīng)模板更豐富。
03 設(shè)計語言(理念)的建立與模塊產(chǎn)出
- 設(shè)計風(fēng)格建立
視覺體系上,B端產(chǎn)品不同于C端,設(shè)計更多為體驗服務(wù),色彩的豐富度相對較弱,單一。要突出b端設(shè)計,我們決定從精致性上為切入點,選定“輕擬態(tài)”風(fēng)格,即突出設(shè)計的細(xì)節(jié)性又不會因為過度設(shè)計影響內(nèi)容。并根據(jù)業(yè)務(wù)體系與設(shè)計風(fēng)格,完善設(shè)計語言關(guān)鍵詞提煉:科技、高效、簡約。
- 字體與顏色規(guī)范
色彩能夠起到視覺語言傳達(dá)和信息承載作用。企業(yè)級產(chǎn)品延用了matrix 的配色體系,以藍(lán)色調(diào)為主色,同時模塊產(chǎn)出深淺色系,便于多方面選擇。
- 設(shè)計布局
采用刪格系統(tǒng)定義布局,根據(jù)首頁和內(nèi)頁展示形式進(jìn)行基礎(chǔ)布局
- icon再創(chuàng)新
圖標(biāo)也進(jìn)行三大層級劃分,以應(yīng)用于不同場景:
3D圖標(biāo)
3d質(zhì)感圖標(biāo)。用于重要層級模塊,數(shù)量控制4個以內(nèi)。
玻璃球圖標(biāo)
磨砂玻璃風(fēng)格已經(jīng)廣泛應(yīng)用于ui產(chǎn)品中的很多地方,我們在磨砂玻璃基礎(chǔ)上,創(chuàng)新新的icon風(fēng)格“玻璃球”icon,該風(fēng)格能更換的和輕質(zhì)感設(shè)計融合在一起,用幾何元素設(shè)計,通過拼接組合和系統(tǒng)icon設(shè)計,能夠在短時間內(nèi)快速產(chǎn)出立體icon,適用少于8個類別的模塊icon。
輕擬態(tài)線性圖標(biāo)
3d線性圖標(biāo)適用于多場景模塊,可大范圍出現(xiàn)在頁面中。
三維設(shè)計
banner模塊分為3d三維風(fēng)格和二維平面圖片,根據(jù)不同業(yè)務(wù)線定義使用規(guī)則。如商業(yè),公益相關(guān)產(chǎn)品,選定圖片作為banner展示更能準(zhǔn)確傳達(dá)信息,而技術(shù)類官網(wǎng)用3d效果更能傳遞科技性。
同時定義多種banner布局:左文右圖,文字居中,banner加搜索模塊,圖片banner等,
可根據(jù)需求自由選擇。
幾何化形的裝飾元素
為了體現(xiàn)網(wǎng)頁設(shè)計的“空間感” 網(wǎng)頁設(shè)計中加入幾何元素穿插,根據(jù)業(yè)務(wù)品牌語言 圓、三角、方定義輔助裝飾元素。(圓-業(yè)務(wù) ;方-技術(shù) ;三角-數(shù)據(jù)圓、三角、方定義設(shè)計幾何元素)
多樣性變化
為官網(wǎng)模塊的產(chǎn)出依據(jù)業(yè)務(wù)線,在建立規(guī)范化組件的同時也需要考慮設(shè)計中的“區(qū)別性”業(yè)務(wù)線-營銷產(chǎn)品,更多體現(xiàn)商業(yè)性質(zhì)設(shè)計采用暗色系,而技術(shù)類官網(wǎng)更多體現(xiàn)科技感,加入3d元素。在同一模塊的設(shè)計也加入背景白色/暗色和模塊的亮色/暗色。
04 實際應(yīng)用
目前我們已經(jīng)產(chǎn)出50+模塊,10個+網(wǎng)頁模版,通過代碼化,建立“云搭”這一網(wǎng)頁生成工具,建立中臺系統(tǒng)在生成平臺,目前已經(jīng)支持多個業(yè)務(wù)線。從設(shè)計產(chǎn)出模塊到開發(fā)實現(xiàn)模塊代碼話再到產(chǎn)品拼接選擇,整體過程節(jié)約了設(shè)計資源,為產(chǎn)品研發(fā)提效提供一站式解決方案。
后續(xù)我們將發(fā)布云搭二期文章,會為大家介紹設(shè)計師是如何從產(chǎn)品、交互思維,自主研發(fā)“云搭”這款工具的,敬請期待。
原文地址:58UXD
作者:環(huán)鐵藝術(shù)家
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》做了近百個網(wǎng)頁,總結(jié)的高質(zhì)量設(shè)計方法
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司