2024-11-1 藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞
企業(yè)B端設(shè)計(jì)規(guī)范是構(gòu)建企業(yè)級(jí)產(chǎn)品界面的重要指導(dǎo)原則,它涵蓋了UI規(guī)范和組件規(guī)范兩大方面。UI規(guī)范主要包括色彩、字體、布局和圖標(biāo)等設(shè)計(jì)元素,以確保產(chǎn)品界面的統(tǒng)一性和美觀性。色彩規(guī)范包括品牌色、輔助色和中性色等,用于表達(dá)不同的操作狀態(tài)和信息層級(jí)。字體規(guī)范則注重字體大小、色彩和行高等屬性,以提升用戶體驗(yàn)和信息傳遞效率。
那么,我們?cè)撊绾巫龊皿w驗(yàn)標(biāo)準(zhǔn)化,保障基礎(chǔ)體驗(yàn)一致性?下面將和大家分享我們公司在構(gòu)建設(shè)計(jì)規(guī)范的實(shí)踐案例。
企業(yè)級(jí)B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn),在大型迭代項(xiàng)目中,如何做好設(shè)計(jì)協(xié)同,把握設(shè)計(jì)一致性和還原度常常讓很多設(shè)計(jì)團(tuán)隊(duì)感覺(jué)無(wú)從下手,找不到切入點(diǎn)。在長(zhǎng)期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn),做好設(shè)計(jì)規(guī)范能規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)以及整個(gè)企業(yè)提高效率和產(chǎn)出質(zhì)量,保障用戶體驗(yàn)統(tǒng)一。
以我們?cè)O(shè)計(jì)團(tuán)隊(duì)為例,隨著業(yè)務(wù)不斷擴(kuò)大,定制化需求不斷增加,大型迭代項(xiàng)目做不好設(shè)計(jì)和開(kāi)發(fā)協(xié)同,導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計(jì)效率低”“還原度不可控”等問(wèn)題。如何有效解決這些問(wèn)題呢?可以通過(guò)構(gòu)建設(shè)計(jì)規(guī)范,以保證一致性,實(shí)現(xiàn)工作提效。
從不同角度出發(fā),構(gòu)建設(shè)計(jì)規(guī)范都能發(fā)揮積極的作用。
對(duì)企業(yè)來(lái)說(shuō):有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計(jì)和研發(fā)的輸出一致。設(shè)計(jì)側(cè)主動(dòng)建立產(chǎn)品設(shè)計(jì)規(guī)范,很大程度上是為了做好設(shè)計(jì)管控,實(shí)現(xiàn)原型、設(shè)計(jì)稿到線上頁(yè)面統(tǒng)一的設(shè)計(jì)語(yǔ)言,從根本上提升設(shè)計(jì)質(zhì)量和還原度,提高用戶滿意度。
對(duì)個(gè)人來(lái)說(shuō):當(dāng)多個(gè)設(shè)計(jì)師共同協(xié)作同一項(xiàng)目時(shí),由于設(shè)計(jì)理解不一致等原因,容易出現(xiàn)設(shè)計(jì)控件使用混亂等問(wèn)題。若有詳細(xì)的設(shè)計(jì)規(guī)范作為引導(dǎo),有利于實(shí)現(xiàn)產(chǎn)品各個(gè)模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作,讓設(shè)計(jì)師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。
產(chǎn)品有不同發(fā)展階段,設(shè)計(jì)規(guī)范同樣也有,不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多,保證投入產(chǎn)出比最大化;同時(shí)也要構(gòu)建一個(gè)合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」,業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長(zhǎng)狀態(tài),存在著“先滿足功能,再優(yōu)化體驗(yàn)”的情況,導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過(guò)關(guān)。
搭建目的:通過(guò)定義原則,梳理關(guān)鍵頁(yè)面和流程,搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對(duì)產(chǎn)品有統(tǒng)一的設(shè)計(jì)價(jià)值觀和認(rèn)知判斷;從頁(yè)面到流程,又能對(duì)應(yīng)設(shè)計(jì)參照標(biāo)準(zhǔn);同時(shí)業(yè)務(wù)可以在規(guī)定的框架下發(fā)展,不僅讓產(chǎn)品體驗(yàn)的根基牢固,而且不會(huì)限制功能設(shè)計(jì)自由。
搭建范圍:「全局說(shuō)明」「頁(yè)面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定,也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上,進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程,但探索期產(chǎn)品的自由生長(zhǎng),會(huì)導(dǎo)致不少設(shè)計(jì)細(xì)節(jié)不一致,從而影響了產(chǎn)品整體的體驗(yàn)和效率。
搭建目的:通過(guò)回溯整理過(guò)往設(shè)計(jì),沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn),進(jìn)一步優(yōu)化流程和效率, 讓整個(gè)產(chǎn)品體驗(yàn)達(dá)到相對(duì)穩(wěn)定的狀態(tài)。
搭建范圍:「全局說(shuō)明」「頁(yè)面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」
好的設(shè)計(jì)規(guī)范有很多優(yōu)秀的例子,例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計(jì)風(fēng)尚的公司,設(shè)計(jì)規(guī)范已經(jīng)上升為設(shè)計(jì)語(yǔ)言,指導(dǎo)旗下所有產(chǎn)品的設(shè)計(jì)。國(guó)內(nèi)做的優(yōu)秀的案例,比如Ant Design,Element,arco.design等,像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致,把交互、前端和視覺(jué)的事情一并解決了,是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計(jì)規(guī)范都包含以下幾個(gè)特點(diǎn):靈活性,可擴(kuò)展性,系統(tǒng)性和標(biāo)準(zhǔn)性。
一般團(tuán)隊(duì)內(nèi)部構(gòu)建的設(shè)計(jì)規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù),因?yàn)橹饕菆F(tuán)隊(duì)內(nèi)部成員使用,追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計(jì)規(guī)范的基礎(chǔ)上,適度參考行業(yè)設(shè)計(jì)規(guī)范,能復(fù)用的直接參考,同時(shí)專注于業(yè)務(wù)本身,具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮,使整個(gè)規(guī)范制定效率更高,科學(xué)性、指導(dǎo)性更強(qiáng)。
設(shè)計(jì)規(guī)范的執(zhí)行和推動(dòng)主要分為四大步驟:
類型梳理:分析業(yè)務(wù)場(chǎng)景,整理和歸類組件,評(píng)估具體組件優(yōu)先級(jí)和迭代計(jì)劃;
全局說(shuō)明:統(tǒng)一布局,色板,字體,常用樣式,規(guī)范設(shè)計(jì)語(yǔ)言;
抽象設(shè)計(jì):將設(shè)計(jì)共性抽象出來(lái),構(gòu)建組件通用方案;
效果驗(yàn)證:通過(guò)定性/定量數(shù)據(jù)追蹤效果,分析原因,迭代改進(jìn);
收集現(xiàn)有設(shè)計(jì)頁(yè)面,分析業(yè)務(wù)場(chǎng)景,再參考行業(yè)通用規(guī)范的定義,整理和歸類組件,可以先羅列完整,再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。
全局說(shuō)明:明確影響整站各個(gè)模塊、各個(gè)頁(yè)面設(shè)計(jì)的原則和規(guī)范,指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計(jì)。包括統(tǒng)一布局,色板,字體,樣式等設(shè)計(jì)規(guī)則。
基礎(chǔ)組件:可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成,因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性,站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況,將基礎(chǔ)組件分為導(dǎo)航,通用,數(shù)據(jù)展示,數(shù)據(jù)錄入,反饋5個(gè)大模塊,每個(gè)模塊下再細(xì)分各小類,構(gòu)成基礎(chǔ)組件的類目。
業(yè)務(wù)組件:根據(jù)業(yè)務(wù)需求,可以定義屬于自己的業(yè)務(wù)組件,這也是區(qū)別于其他通用行業(yè)組件庫(kù)的一個(gè)核心部分。
因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中,每個(gè)模塊都由不同的同學(xué)負(fù)責(zé),這樣全局產(chǎn)品的把握就會(huì)降低,需要去補(bǔ)充全局規(guī)范說(shuō)明去維持產(chǎn)品全局通用部分的一致性。包括布局,色彩規(guī)范,字體,樣式等;
抽象設(shè)計(jì)是設(shè)計(jì)規(guī)范中最核心,工作量最大,難度最高的一個(gè)環(huán)節(jié)。我們可以將它拆解成幾個(gè)部分,先做出基礎(chǔ)組件,再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計(jì)業(yè)務(wù)組件,最后抽象成頁(yè)面模板。
基礎(chǔ)組件
組件庫(kù)的搭建,就一定要提到原子思維。道爾頓原子論認(rèn)為,物質(zhì)世界的最小單位是原子,原子是單一的,獨(dú)立的,不可被分割的,在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個(gè)原子理論同樣適用于設(shè)計(jì)系統(tǒng)中。
其中,最小單位設(shè)計(jì)元素就是基礎(chǔ)組件。我們?cè)谧鲈O(shè)計(jì)系統(tǒng)的時(shí)候希望當(dāng)你改動(dòng)任何一個(gè)原子,你有自信其他所有依賴于這個(gè)原子的部件全部自動(dòng)更新。只有滿足了這一點(diǎn),設(shè)計(jì)系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會(huì)真正實(shí)現(xiàn)。例如,在sketch中,分享樣式和嵌套符號(hào)的使用。
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后,可以根據(jù)業(yè)務(wù)需求,將使用頻率較高的組件進(jìn)行評(píng)估,抽象成業(yè)務(wù)組件。
一般業(yè)務(wù)組件可分成兩大類:
一類是由多個(gè)基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件,如:復(fù)合標(biāo)簽,快捷時(shí)間選擇器等;
另一類是針對(duì)特定業(yè)務(wù)場(chǎng)景的業(yè)務(wù)組件:如地圖,站點(diǎn)等;
頁(yè)面模版
在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后,我們可以根據(jù)全局說(shuō)明,利用組件搭建頁(yè)面模板。頁(yè)面模版不僅能有效的提升組件的使用效率,也能提供很好的組件使用示范效應(yīng),加強(qiáng)設(shè)計(jì)說(shuō)明和組件之間的結(jié)合。
組件質(zhì)量評(píng)估:從物理到行為層,包括樣式、組件、框架、組件交互 共4個(gè)維度。通過(guò)一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
系統(tǒng)應(yīng)用層面的評(píng)價(jià):
系統(tǒng)是否幫助業(yè)務(wù)提效;
當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng),能否靈活改動(dòng);
系統(tǒng)是否幫助業(yè)務(wù)變得更有競(jìng)爭(zhēng)力、更創(chuàng)新;
迭代機(jī)制
當(dāng)我們完成設(shè)計(jì)規(guī)范的整體構(gòu)建后,對(duì)于新需求,通過(guò)評(píng)估復(fù)用性、通用性和優(yōu)先級(jí),低級(jí)別的走定制設(shè)計(jì)完成交付。高級(jí)別的通過(guò)抽象設(shè)計(jì)、內(nèi)審、沉淀到組件庫(kù)中。
機(jī)制提效
在完成設(shè)計(jì)規(guī)范的構(gòu)建后,我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師,幫助每個(gè)環(huán)節(jié)的人員快速搭建產(chǎn)出物,推動(dòng)上下游機(jī)制提效。
例如,我們會(huì)基于設(shè)計(jì)規(guī)范,為產(chǎn)品經(jīng)理提供符合設(shè)計(jì)規(guī)范的Axure元件庫(kù),產(chǎn)品經(jīng)理使用元件庫(kù),可以快速搭建原型,產(chǎn)出prd,與設(shè)計(jì)師、開(kāi)發(fā)的溝通也更加順暢。簡(jiǎn)單的修改可以跳過(guò)設(shè)計(jì)師出圖這一步驟,直接和開(kāi)發(fā)溝通,極大加快前期的節(jié)奏。甚至通過(guò)借助元件庫(kù),產(chǎn)品經(jīng)理可以搭建出高保真原型,用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。
基于設(shè)計(jì)規(guī)范,推動(dòng)研發(fā)實(shí)現(xiàn)組件代碼化,通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過(guò)定義標(biāo)準(zhǔn)規(guī)范,提高流程、組件的復(fù)用率,開(kāi)發(fā)側(cè)就可以制定相應(yīng)組件,形成前端腳手架,方便后期迭代的組件化使用,有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子,同時(shí)減少上線前設(shè)計(jì)走查、測(cè)試的工作量,保證落地效果,提升生產(chǎn)力。
以上就是我們?cè)跇?gòu)建自己的企業(yè)設(shè)計(jì)規(guī)范的流程,最后,給大家展示一下,我們目前的企業(yè)設(shè)計(jì)規(guī)范和部分應(yīng)用情況。
藍(lán)藍(lán)設(shè)計(jì)(www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com