設(shè)計規(guī)范如何做到保持生長性與可復(fù)用性
各行各業(yè)都有著自己的規(guī)范,那么我們在做設(shè)計規(guī)范的時候,常常會面臨著一些問題。本文大致總結(jié)了兩個問題:規(guī)劃缺乏生長性和可復(fù)用性。那么該如何解決這兩個問題呢?作者對此進(jìn)行總結(jié),希望對你有所幫助。
最近一段時間筆者正好在梳理設(shè)計規(guī)范,在做設(shè)計規(guī)范的時候,經(jīng)常面臨如下幾個問題:
(1)由于業(yè)務(wù)發(fā)展,規(guī)范不斷在更迭,今天做的設(shè)計組件卻并不適合1個月之后客戶的需求。
簡而言之,規(guī)范缺乏對未來的規(guī)劃,缺少生長性。
(2)規(guī)范主要集中在業(yè)務(wù)組件上的思考,但是缺乏對業(yè)務(wù)流程的梳理,導(dǎo)致流程上復(fù)用率低。
(3)缺乏對整體信息架構(gòu)的梳理,缺少全局上對產(chǎn)品的思考。這個優(yōu)勢在于避免重復(fù)造車輪,有利于合并同類項,讓產(chǎn)品更輕量,更易用。
簡而言之,規(guī)劃缺乏生長性和可復(fù)用性。
一、應(yīng)該如何預(yù)留生長性
大部分做中后臺系統(tǒng)的同學(xué),大抵都會站在“巨人的肩膀”上重新規(guī)劃、設(shè)計組件?!熬奕说募绨颉崩鏏NT DESIGN,大而全,在列表和表單組件引用時非常絲滑,但是卻缺少精細(xì)化和對業(yè)務(wù)訴求的承載。
因此,大部分的同學(xué)都會結(jié)合業(yè)務(wù)訴求,形成一套對公司業(yè)務(wù)有強(qiáng)支撐和專業(yè)化的組件,做到小而精。問題是,設(shè)計同學(xué)在設(shè)計規(guī)范時,心里的那桿秤始終擺不平。定的太嚴(yán)謹(jǐn),未來業(yè)務(wù)變化后,組件又需要重新開發(fā),不可預(yù)期的提高了開發(fā)成本,定的太松弛,前端引用時會bug頻出。
其實導(dǎo)致“秤不平”,最重要是缺少了生長性的砝碼。那么什么是生長性,生長性的邊界又在哪里,該怎樣預(yù)留生長性呢?
1. 什么是生長性
生長性指的是產(chǎn)品方向變更時,設(shè)計組件仍能支撐業(yè)務(wù)訴求。比如原有組件設(shè)計時只考慮靜態(tài)交互,而業(yè)務(wù)變化后需要新增可拖拽功能,方便用戶快速處理信息。如果在設(shè)計組件時,就預(yù)留了生長性和空間,后期改動就只需要往上加,而不需要大改動。
再比如規(guī)范建立初期,業(yè)務(wù)是以國內(nèi)為主,但由于疫情之后,國內(nèi)僧多粥少,企業(yè)考慮未來出海,走差異化競爭。此時,國際化最直觀的變化在文字和行高規(guī)范,多門語言,多種文字在相同場景下會出現(xiàn)承載空間不夠或過于富余等問題。不同國家對部分結(jié)果頁指示也會有文化禁忌,此時就需要盡量避免引起語意沖突的部分。如果規(guī)范預(yù)留了足夠的生長性,業(yè)務(wù)迅速調(diào)整時,設(shè)計和開發(fā)也能無縫跟上,節(jié)約時間,搶占市場。
2. 生長性的邊界在哪里
規(guī)范總體來說,是設(shè)計和開發(fā)共同的指引。生長性的邊界在于“是否能做到清晰的指引”:開發(fā)在引用時,能否應(yīng)對各種報錯、能否處理極端場景,能否應(yīng)對產(chǎn)品經(jīng)理臨時的小需求等等。這些都是判斷生長性區(qū)間范圍的衡量標(biāo)準(zhǔn)。
3. 如何在組件中預(yù)留生長性?
(1)通盤考慮報錯
在設(shè)計報錯提示組件時,需要整合多個業(yè)務(wù)場景下,除了需要通盤考慮樣式之外,也需要和前端同學(xué)討論是否會影響性能的變化。
大部分的報錯可以分為:表單報錯、列表報錯、全局報錯、業(yè)務(wù)場景新組件報錯。報錯提示如若不能同時適應(yīng)這四種場景,就需要將組件做樣式微調(diào),分成四種報錯樣式,整合到規(guī)范中。
(2)定義極端場景
比如由于很多場景下,業(yè)務(wù)訴求很可能會在原有組件中加內(nèi)容、加層級,而增加的工作量往往產(chǎn)品會直接交付前端同學(xué)實現(xiàn),因此如果定義好了極端場景,設(shè)計同學(xué)就不必每個需求下都需要做微調(diào),前端同學(xué)對極端場景做判斷,即可輕松實現(xiàn)效果。(涉及到工作流程的問題)
(3)提前預(yù)留承載空間
首先,就需要厘清現(xiàn)有業(yè)務(wù)控件承載,比如頁面區(qū)域工具欄,工具欄本身區(qū)域有限,而業(yè)務(wù)方在不停加工具,在設(shè)計初期就需要規(guī)劃好,頁面承載空間不夠時,應(yīng)如何處理,這樣利于后期的延展。
(4)多端視覺和交互規(guī)范,確保品牌延展性
比如中臺產(chǎn)品支持PC端、Pad端,就需要考慮同樣組件在Pad下可點(diǎn)擊區(qū)域大小、Pad交互習(xí)慣等。
比如,醫(yī)療SaaS產(chǎn)品,大部分私人醫(yī)院都會要求產(chǎn)品支持Pad端。私人醫(yī)院相對公立醫(yī)院,更重視醫(yī)療體驗,以及微營銷?;颊咴诤蛟\或者做康復(fù)醫(yī)療時,需要做健康宣導(dǎo)或者活動營銷等。
因此在設(shè)計組件時,如果我們通盤考慮了該組件在PC端和移動端、Pad端的可承載性,便可以讓品牌得到了最大化延展。
(5)無障礙設(shè)計
規(guī)范建立初期,服務(wù)的是大多數(shù)身心健康人士。隨著業(yè)務(wù)拓展,企業(yè)品牌建立,對于殘障人士的無障礙設(shè)計、老年人關(guān)愛模式,是否需要考慮其中。需要同時結(jié)合公司品牌定位,為產(chǎn)品預(yù)留生長性。而無障礙設(shè)計的規(guī)范,國內(nèi)外很多知名企業(yè)已經(jīng)根據(jù)殘障人士的特點(diǎn),有一套該如何搭建的引導(dǎo),設(shè)計同學(xué)只需要順延,結(jié)合業(yè)務(wù),搭建自有的無障礙規(guī)范即可。
二、應(yīng)該如何最大化規(guī)范的可復(fù)用性
流程上復(fù)用率低、產(chǎn)品過重缺乏全局思考根本原因在于,過度重視原子組件搭建,而忽略了整體架構(gòu)和流程的梳理。
(1)引入共性流程規(guī)范
往往我們在工作中搭建規(guī)范時,會過度重視原子組件搭建,而忽略了流程梳理。規(guī)范上忽略了流程梳理,設(shè)計稿中也會難免遺漏一些場景,導(dǎo)致實際上線時用戶體驗不佳或者流程不絲滑。
舉個例子:
例如在金融軟件中,涉及到貸款流程,小微貸,企業(yè)貸,消費(fèi)貸等,由于屬性的不同,各個貸款流程在細(xì)微上有差異,也有共性。在梳理設(shè)計規(guī)范時,就可以提煉共性的貸款流程,封裝組件。在前端開發(fā)時就可以節(jié)省不少人力。
再比如醫(yī)療SaaS軟件中,會診流程和日程流程:
- 日程:發(fā)起日程-邀約日程-再次邀約(未及時加入提醒)-記錄日程。
- 會診:發(fā)起會診-邀約會診-再次邀約(未及時同意提醒)-線上視頻會診(線下記錄會診內(nèi)容)-上傳會診記錄-跟進(jìn)會診后患者狀況。
本質(zhì)上,會診也是日程的一個分類,但由于會診涉及到多個角色的協(xié)同,分為普通會診和多學(xué)科會診,比普通日程更加復(fù)雜,是屬于長期的工作流,因為會診除了會診之外,同時需要關(guān)注會診后患者的治療,以便下次會診復(fù)盤。
將日程和會診的共性流程進(jìn)行封裝,將為開發(fā)帶來諸多便利。
(2)梳理信息架構(gòu)
Z軸分布包含平面內(nèi)部的分布和空間上的排序。平面的分布可以梳理各個一級頁面、二級頁面的框架層,便于設(shè)計組內(nèi)同學(xué)在設(shè)計新頁面時參照規(guī)范快速出稿。而Z軸上的空間分布,包含浮層、彈窗、提示等的出現(xiàn)次序和排列。提前規(guī)劃好排列順序,有利于組件沖突時,有可供參考的規(guī)范引導(dǎo)。
(3)文案規(guī)范
文案往往體現(xiàn)產(chǎn)品氣質(zhì)。梳理文案規(guī)范,有利于從產(chǎn)品上提升企業(yè)氣質(zhì)和形象??梢詫⑽陌阜譃橐龑?dǎo)類文案、描述類文案、報錯類文案等。而文案規(guī)范梳理應(yīng)該放在成熟期的產(chǎn)品使用。業(yè)務(wù)在蓬勃發(fā)展期間,還是應(yīng)探索業(yè)務(wù)組件為主,文案規(guī)范可以往后延展。
以上是筆者結(jié)合項目經(jīng)驗的一點(diǎn)心得,希望能幫助到大家。
本文由 @灰研走B 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
學(xué)到了,謝謝分享
能幫到你,花時間寫就很值得~