在日常工作中,您是否也有過(guò)因?yàn)闆](méi)有規(guī)范的文檔,而出現(xiàn)的文件找不到、或交接時(shí)信息錯(cuò)漏等頭疼現(xiàn)象?本文將分享一些關(guān)于完整的設(shè)計(jì)規(guī)范系統(tǒng)的搭建方法,(主要針對(duì)于多端產(chǎn)品)希望對(duì)您有所幫助。
1、建立背景
2、“設(shè)計(jì)規(guī)范系統(tǒng)”是什么?
3、如何建立
4、如何使用
首先,我們需具體分析目前所存在的問(wèn)題方能對(duì)癥下藥。最直觀的方法便是從其使用性、內(nèi)容結(jié)構(gòu)兩個(gè)方面進(jìn)行分析:
1.1.使用性層面:
各端規(guī)范大多是窮舉組件,少量標(biāo)注,極少附有使用說(shuō)明;每個(gè)組件的撰寫(xiě)結(jié)構(gòu)、順序不一致;每份文檔格式相對(duì)獨(dú)立;對(duì)于需同時(shí)進(jìn)行多端設(shè)計(jì)的同學(xué)有可能會(huì)出現(xiàn)混亂;
1.2.內(nèi)容結(jié)構(gòu)層面:
各個(gè)平臺(tái)的風(fēng)格差異過(guò)大;
大多屬于歷史遺留問(wèn)題,在初期規(guī)劃時(shí),對(duì)產(chǎn)品調(diào)性的把控不周,致使風(fēng)格差異甚大;
組件的統(tǒng)一性、可復(fù)用性低;
每個(gè)組件幾乎獨(dú)立存在,組件間缺乏聯(lián)系,各端倍數(shù)不明確,導(dǎo)致在多端產(chǎn)品線上,無(wú)法快捷跨平臺(tái)適配;
團(tuán)隊(duì)協(xié)同效率低;
經(jīng)常找不到文件,需要老同事幫忙;或是文件版本較前難以追溯;再者工作交接時(shí),新同事很難快速了解;
可持續(xù)發(fā)展性弱;
研發(fā)團(tuán)隊(duì)沒(méi)有建立組件庫(kù)的意識(shí)。大多數(shù)組件樣式單獨(dú)寫(xiě)死,無(wú)法統(tǒng)一修改,全局改動(dòng)需耗費(fèi)較多成本。這也是設(shè)計(jì)師經(jīng)常會(huì)遇到一種現(xiàn)象,僅需要全局改動(dòng)某一個(gè)按鈕樣式,或者某一個(gè)組件樣式時(shí),得到研發(fā)同學(xué)給到的反饋大部分時(shí)候都是“這個(gè)實(shí)現(xiàn)起來(lái)很困難”、“這個(gè)不好做”...
個(gè)人工作效率低;
調(diào)用資源時(shí),經(jīng)常需要去翻查以往的源文件然后復(fù)制粘貼到新文件里面,遇見(jiàn)文件大的可能還要卡上幾次。這種重復(fù)又無(wú)任何意義的操作著實(shí)浪費(fèi)時(shí)間;
缺乏文件管理觀念;
文檔存儲(chǔ)不統(tǒng)一,歷史版本無(wú)整理;切圖命名不規(guī)范,增加開(kāi)發(fā)陳本外。
等等以上,這些都是日常得不能再日常的現(xiàn)象了。這些問(wèn)題在產(chǎn)品快速發(fā)展的過(guò)程中將更加暴露的徹底且不可逆。如果您希望設(shè)計(jì)越來(lái)越好,值得信賴(lài),就需要讓我們從頭開(kāi)始,建立一份完整的設(shè)計(jì)規(guī)范系統(tǒng)來(lái)幫助我們的產(chǎn)品在成長(zhǎng)中呈現(xiàn)規(guī)律且清晰的生長(zhǎng)模式,可控制、可迭代。
那到底“設(shè)計(jì)規(guī)范系統(tǒng)”是什么?需要具備什么特質(zhì)呢?
“設(shè)計(jì)規(guī)范系統(tǒng)”指的是用于推進(jìn)各端的設(shè)計(jì)規(guī)范格式統(tǒng)一而建立的規(guī)范系統(tǒng)。在設(shè)計(jì)規(guī)范的統(tǒng)一格式基礎(chǔ)上,能更加快速的進(jìn)行多端設(shè)計(jì)語(yǔ)言的統(tǒng)一。主要運(yùn)用于多端產(chǎn)品線規(guī)范。完整的規(guī)范系統(tǒng)需要具備簡(jiǎn)單易懂、結(jié)構(gòu)清晰、倍數(shù)確定、異同明確等特質(zhì)。
典型的多端產(chǎn)品大多包含觸摸大板端、電腦端、網(wǎng)頁(yè)端、平板端、移動(dòng)端等多平臺(tái)組合結(jié)構(gòu)。對(duì)于這類(lèi)多端產(chǎn)品,日常中,最繁瑣最耗時(shí)間且最沒(méi)有意義的工作不外乎就是適配工作了。擁有一套完整的規(guī)范系統(tǒng)可以更加有條理的設(shè)計(jì),也讓工作更容易。
建立一個(gè)相對(duì)完整的規(guī)范系統(tǒng)需包含哪些部分?可以從建立原因提取出關(guān)鍵問(wèn)題點(diǎn)來(lái)作為整個(gè)系統(tǒng)的結(jié)構(gòu)框架。分別為:設(shè)計(jì)手冊(cè)、資源庫(kù)、產(chǎn)品實(shí)時(shí)文檔、命名&存儲(chǔ)規(guī)范、使用說(shuō)明。
2.1."設(shè)計(jì)手冊(cè)"
設(shè)計(jì)手冊(cè)即是目前慣使用的視覺(jué)規(guī)范;又可細(xì)分為設(shè)計(jì)語(yǔ)言、組件庫(kù)兩部分。
設(shè)計(jì)語(yǔ)言一般包括原則性的說(shuō)明(產(chǎn)品設(shè)計(jì)原則、通用原則、內(nèi)容策略等)以及視覺(jué)元素(顏色、大小、字體等)的基礎(chǔ)定義。組件庫(kù)則可按照組件類(lèi)型劃分為通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋六種類(lèi)型。設(shè)計(jì)語(yǔ)言的“視覺(jué)元素”與組件庫(kù)是整個(gè)規(guī)范系統(tǒng)最基礎(chǔ)的規(guī)范部分,也是最核心的內(nèi)容。
2.2."資源庫(kù)"
資源庫(kù)則可以理解為日常工作中的切圖池。按照切圖的類(lèi)型以及日常工作中資源的調(diào)配關(guān)系,可分為圖標(biāo)庫(kù)、圖形庫(kù)、組件庫(kù)三部分。資源庫(kù)主要作用于日常工作中資源的切換或調(diào)取。傳統(tǒng)的資源查找、復(fù)制方式過(guò)于繁瑣,資源庫(kù)一鍵更改的快捷方式可大大提高設(shè)計(jì)效率。
2.3."完整文檔"
完整文檔指的是線上版本的視覺(jué)稿全文件。一般分為(sketch)源文件或輸出標(biāo)注稿兩種。源文件一般可作為后續(xù)多版本拓展、內(nèi)部協(xié)同、工作交接等作用,標(biāo)注稿則可為設(shè)計(jì)走查等提供檢驗(yàn)標(biāo)準(zhǔn)。
2.4."命名格式"
命名格式指的是在規(guī)范系統(tǒng)中建立統(tǒng)一的命名標(biāo)準(zhǔn)格式。在這基礎(chǔ)上方可建立規(guī)范化的文檔管理模式。比如文件存儲(chǔ)、資源庫(kù)的切圖資源、樣式庫(kù)等。
2.5."使用說(shuō)明"
使用說(shuō)明即是整個(gè)規(guī)范系統(tǒng)的基礎(chǔ)使用法則說(shuō)明??晒┬率挚焖倭私猱a(chǎn)品的整體設(shè)計(jì)語(yǔ)言,或在團(tuán)隊(duì)協(xié)作中起到統(tǒng)一基礎(chǔ)準(zhǔn)則作用。通常需要羅列說(shuō)明的內(nèi)容有:整體的各端倍數(shù)關(guān)系、通用字號(hào)、通用列表等基礎(chǔ)屬性、共性。
在建立之初,需了解并明確元素與元素、元素與組件、組件與組件、以及組件與規(guī)范系統(tǒng)間的關(guān)系。
原子設(shè)計(jì)
2013年網(wǎng)頁(yè)設(shè)計(jì)師Brad frost從化學(xué)中受到啟發(fā):原子元素結(jié)合在一起,形成分子,進(jìn)一步結(jié)合并形成相對(duì)復(fù)雜的生物體。
而宇宙中的物質(zhì)最小單位“原子”則是由英國(guó)化學(xué)家/物理學(xué)家約翰·道爾頓提出,原子是一種最后的不可分割的物質(zhì)微粒。進(jìn)一步說(shuō)明,原子是所有物質(zhì)的基本組成部分,分子是兩個(gè)或兩個(gè)以上的原子通過(guò)化學(xué)鍵組合構(gòu)成有機(jī)物,最終形成宇宙萬(wàn)物。并且在已知宇宙中的所有事物都可以分解為一組有限的原子元素(化學(xué)元素周期表)。
于是Brad frost將這個(gè)概念應(yīng)用在界面設(shè)計(jì)中并提出了原子設(shè)計(jì)方法論(Atomic design)。由原子、分子、組織、模塊和頁(yè)面共同協(xié)作以創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計(jì)方法。
原子是最基本和最小顆粒度的單位,在設(shè)計(jì)中以“元素”的形式存在,例如:顏色、文字、圖形、線條等;分子是由原子排列組合構(gòu)成,在設(shè)計(jì)中以“組件”的形式存在,例如:標(biāo)簽、按鈕等;組織是由原子、分子排列組合構(gòu)成,在設(shè)計(jì)中以“模塊”的形式存在。例如:列表等;模板是由原子、分子、組織排列組合構(gòu)成,在設(shè)計(jì)界面中以“原型圖”的形式存在;頁(yè)面是由模塊填充了內(nèi)容后形式,也就是設(shè)計(jì)中的“視覺(jué)稿”。
原子設(shè)計(jì)理論最大的價(jià)值,就是為設(shè)計(jì)體系、組件庫(kù)的構(gòu)建提供思路和方法。從抽象到具象、由局部到整體,層級(jí)分明,充分發(fā)揮了設(shè)計(jì)元素的可復(fù)用性,避免重復(fù)生產(chǎn),為設(shè)計(jì)師構(gòu)建組件庫(kù)提供了清晰的方法論指導(dǎo)。且可隨著產(chǎn)品的不斷迭代,只需改變某些原子、分子的屬性或組合方式,便可使整個(gè)體系同步更新,易于擴(kuò)展和維護(hù)。
建立的步驟
在明確所有關(guān)系之后,便可確定規(guī)范系統(tǒng)的制作原則:從小到大,從大到??;尋找相同點(diǎn),定義倍數(shù)關(guān)系。所謂從小到大,從大到小的意思便是,從每一個(gè)端到整體產(chǎn)品,再?gòu)恼w框架到每一個(gè)組件。保證每一個(gè)端,每一個(gè)組件都在框架內(nèi)。
3.1.確定設(shè)計(jì)手冊(cè)的內(nèi)容;
也就是確定視覺(jué)、組件庫(kù)中哪一些元素、組件是需要?dú)w納到設(shè)計(jì)規(guī)范里面的。設(shè)計(jì)界面中構(gòu)成的最基本元素一般有:顏色、布局(尺寸)、字體、分割線、蒙層、圓角半徑、陰影等,2個(gè)以上排列組合即可組合成組件。
組件庫(kù)則是由元素(視覺(jué))組合而成的組件,或由組件與組件排列組合構(gòu)成模塊;可根據(jù)組件視覺(jué)屬性、操作屬性劃分為通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋六種組件類(lèi)型。
組件庫(kù)中“通用”是屬于最基礎(chǔ)的的組件,是最基礎(chǔ)的元素進(jìn)行最簡(jiǎn)單的組合且是設(shè)計(jì)中幾乎各個(gè)界面都會(huì)經(jīng)常運(yùn)用得到的組件。而數(shù)據(jù)錄入中的“輸入框”、數(shù)據(jù)展示中的“列表”從結(jié)構(gòu)上其實(shí)更亦似通用的基礎(chǔ)組件。很多組件、模塊都是在這基礎(chǔ)上進(jìn)行二次組合而成。
3.2.確定整體內(nèi)容框架結(jié)構(gòu);
“視覺(jué)”即是確定“視覺(jué)”元素、“組件庫(kù)”組件的撰寫(xiě)維度有哪些?!耙曈X(jué)”部分是屬于最基礎(chǔ)構(gòu)成部分,每個(gè)部分都是獨(dú)特的元素,因此每個(gè)元素的撰寫(xiě)維度也盡不相同??筛鶕?jù)每個(gè)元素的特點(diǎn)進(jìn)行分析撰寫(xiě)即可。
色彩一般應(yīng)用于背景、圖標(biāo)、文字、分割線等場(chǎng)景,根據(jù)其具體使用場(chǎng)景以及顏色屬性可歸類(lèi)為三種類(lèi)型:中性透明色、中性實(shí)色、產(chǎn)品級(jí)色彩體系。文本、分割線、蒙層等這類(lèi)型元素的使用場(chǎng)景較為多變,采用透明色值可以更加融合于背景,屬于中性透明色。圖標(biāo)、背景則常為具體色值,屬于中性實(shí)色。而產(chǎn)品級(jí)色彩體系則主要有產(chǎn)品的主題色、輔助色、功能色等帶有產(chǎn)品特色的運(yùn)用。另外也需注意作為背景色的動(dòng)作用色,即normal、hover、click、disabled、focus等常用狀態(tài)用色。
布局通常包括設(shè)計(jì)尺寸、基礎(chǔ)布局。需了解并明確各端的基本尺寸大小,再根據(jù)各端使用特性或交互特性定義其基礎(chǔ)布局。例如各端界面排布方式、窗口大小等。
字體一般包含字體選擇、字號(hào)標(biāo)準(zhǔn)、文字顏色等信息。大多按照各平臺(tái)系統(tǒng)默認(rèn)字體為基礎(chǔ)字體。常用字號(hào)可按照使用屬性劃分為五個(gè)區(qū)間:說(shuō)明、常規(guī)、標(biāo)題、大標(biāo)題、特大標(biāo)題。同時(shí),根據(jù)各端常用字號(hào)梳理和統(tǒng)一標(biāo)準(zhǔn)用字。另外還需考慮文字在深淺背景上的用色。
陰影、分割線、圓角半徑、蒙層等屬性相對(duì)單一,可按照簡(jiǎn)單的按照類(lèi)型、使用場(chǎng)景進(jìn)行分析。
“組件庫(kù)”中的組件都是由元素組合而成存在一定的共性。大體可從組件簡(jiǎn)介、使用場(chǎng)景、交互說(shuō)明、結(jié)構(gòu)解說(shuō)、尺寸、出現(xiàn)位置、動(dòng)作解說(shuō)等這七個(gè)維度進(jìn)行分解。需注意通用單一、多平臺(tái)組件的框架差異。
3.3.定義命名格式規(guī)范;
可命名的大致分為文件存儲(chǔ)、資源庫(kù)的切圖資源、圖層樣式庫(kù)等三部分。文件部分主要為源文件、標(biāo)注稿的文檔管理,通常用按照項(xiàng)目劃分、版本號(hào)作為子目錄名稱(chēng)即可;切圖資源類(lèi)型主要有三類(lèi):圖標(biāo)、圖形、組件,其中,圖標(biāo)、圖形可根據(jù)類(lèi)型、功能模塊、自身屬性定義命名格式,而組件的命名則可根據(jù)設(shè)計(jì)手冊(cè)的框架作為主結(jié)構(gòu)再根據(jù)組件特性定義。圖層樣式庫(kù)的內(nèi)容是有賴(lài)于設(shè)計(jì)手冊(cè)中的內(nèi)容而存在的,因此可依據(jù)設(shè)計(jì)手冊(cè)的框架為基礎(chǔ),再結(jié)合實(shí)際使用定義命名結(jié)構(gòu)。
需注意的是所有命名格式都需使用“/”符號(hào)區(qū)分層級(jí)結(jié)構(gòu),除文件命名外。層級(jí)結(jié)構(gòu)命名可使用中文,不一定非要全英文,畢竟大部分人并不熟悉英文,特別是一些專(zhuān)業(yè)名詞,只要是合理并且能清晰展示框架結(jié)構(gòu)即可。在樣式命名上,也可適當(dāng)標(biāo)注相關(guān)屬性,如字號(hào)或字階區(qū)間等屬性,方便快速查看信息。
3.4.根據(jù)已確定的內(nèi)容、框架梳理產(chǎn)品各端基礎(chǔ)規(guī)范(設(shè)計(jì)手冊(cè)),并統(tǒng)一呈現(xiàn)格式;
“設(shè)計(jì)手冊(cè)”源文件需按照已定義好的框架分為6個(gè)模塊,分別為設(shè)計(jì)語(yǔ)言(視覺(jué))、通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋。每塊內(nèi)容按照統(tǒng)一的布局格式排布內(nèi)容。頭部為主信息,包含名稱(chēng)、設(shè)計(jì)尺寸倍數(shù)等。所有內(nèi)容從上到下、從左到右分類(lèi)排序。左側(cè)為文本說(shuō)明區(qū)域,例如使用說(shuō)明、微交互等,右側(cè)有樣式展示區(qū)域。
3.5.創(chuàng)建顏色樣式庫(kù)、文字樣式庫(kù);
根據(jù)已定義好的內(nèi)容建立。顏色圖層樣式需注意深淺兩種背景用色,以及常用背景色的動(dòng)作用色,即normal、hover、click、disabled、focus等常用狀態(tài)用色。
文字圖層樣式則按照基礎(chǔ)字階表、深淺色場(chǎng)景建立樣式庫(kù)。
需要注意的是,樣式庫(kù)中的字體選擇,需考慮各個(gè)平臺(tái)設(shè)備的字體差異,以及日常工作中調(diào)取組件時(shí)更替字體的便利性。在協(xié)同工作環(huán)境中,選擇一個(gè)較為通用的字體作為組件庫(kù)的基礎(chǔ)字體更能提高效率。多方案的文字樣式庫(kù),其制作與維護(hù)成本都較高,并且在實(shí)際運(yùn)用中,使用者未必能及時(shí)替換對(duì)于平臺(tái)的字體,再者這種多方案的組件庫(kù)、樣式也違背了規(guī)范系統(tǒng)的初衷。
在無(wú)法制定多方案樣式庫(kù)的情況下,只能提取各平臺(tái)共性進(jìn)行折中選擇。眾多平臺(tái)設(shè)備中,IWB、android、win、web等慣用于Microsoft YaHei;IOS、Mac則是蘋(píng)果系,PingFang SC。而內(nèi)部產(chǎn)品所承載的平臺(tái)大部分是IWB、android、web、win等平臺(tái),再者IOS、Android共用一套視覺(jué)、Mac、win也共用一套視覺(jué),則可視為使用Android、win為基準(zhǔn),故定義Microsoft YaHei為基礎(chǔ)字體。
另外,需考慮當(dāng)作為文本按鈕時(shí)的顏色應(yīng)用是如何(normal、hover、click、disabled、focus狀態(tài)的顏色應(yīng)用)。以及對(duì)齊方式、段落格式,目前sketch的文本樣式在實(shí)際應(yīng)用中是沒(méi)辦法編輯文字的對(duì)齊方式、粗細(xì)、行高等屬性,所以需要把各個(gè)所需的文本屬性單獨(dú)建立為樣式組件。
最后,考慮到實(shí)際的使用場(chǎng)景中,使用頻率較高,或者子級(jí)內(nèi)容較為龐大,又或者子級(jí)多且內(nèi)容單一,可以適當(dāng)調(diào)整樣式的命名結(jié)構(gòu)。例如,文本顏色,在實(shí)際的檢索中,更多的是關(guān)注的是其色值,而不是透明與否的性質(zhì),即可省略“中性透明色”該層級(jí)。
3.6.建立資源庫(kù)
資源庫(kù)本身是個(gè)sketch文件(sketch中的library或組件庫(kù))。由于在規(guī)范系統(tǒng)中,不單單只包含組件,還有各種圖標(biāo)、圖形等各種資源、各種樣式,避免“組件庫(kù)”跟框架中的組件庫(kù)混淆,故此定義為資源庫(kù),也是為了能更好的理解整個(gè)框架結(jié)構(gòu)。
建立資源庫(kù)的好處在于可以即時(shí)同步更新新編輯內(nèi)容。當(dāng)你編輯資源庫(kù)里的某一個(gè)組件時(shí),那么調(diào)用了該組件的其他sketch文件會(huì)收到組件庫(kù)更新提示,可以對(duì)新編輯內(nèi)容進(jìn)行預(yù)覽、對(duì)比和確認(rèn),使該文件中所有調(diào)用的組件同步更新到最新編輯版本,也可進(jìn)行選擇性更新。
利用已建立好的圖層樣式,創(chuàng)建資源庫(kù)。常見(jiàn)類(lèi)型有:圖標(biāo)、圖形、組件。把圖標(biāo)、圖形建立為組件也是為了方便資源調(diào)取,提高資源的復(fù)用性。特別是圖形類(lèi)資源,這類(lèi)資源普遍為一次性消費(fèi),把所有的資源整合到一起后,在后續(xù)的工作中可當(dāng)作為靈感素材庫(kù),也可在項(xiàng)目緊急時(shí)快速獲取有用素材。
在建立時(shí),每一個(gè)元素需賦予已定義好的圖層樣式,才能在后續(xù)的運(yùn)用中起到作用。其次,作為一份通用于多平臺(tái)設(shè)備的規(guī)范系統(tǒng),需要考慮每個(gè)平臺(tái)之間的異同關(guān)系,并且有明確的倍數(shù)關(guān)系。后才可定義通用組件再可進(jìn)行各端組件合并,或重新定義較為復(fù)雜的組件。
在做觸摸大屏、電腦端、網(wǎng)頁(yè)端、移動(dòng)端、平板端這幾個(gè)平臺(tái)的通用組件時(shí),一定會(huì)十分的頭疼。常規(guī)的移動(dòng)端多尺寸適配就已經(jīng)夠各設(shè)計(jì)師撓頭了,何況現(xiàn)在各種類(lèi)型的平臺(tái)設(shè)備,倍數(shù)關(guān)系不同不說(shuō),直觀視覺(jué)感受差異更是大,還需考慮可交互的動(dòng)作展示效果。
可以從各端的基礎(chǔ)屬性進(jìn)行共性提取。從下表中可得知PC、web、pad1 x三端為相同倍數(shù)關(guān)系,命名為關(guān)系A(chǔ);IWB與Moblie為相同倍數(shù)關(guān)系命名為關(guān)系B,關(guān)系A(chǔ)與關(guān)系B之間的差異為視覺(jué)階梯參數(shù)中,后者比前者高一個(gè)參數(shù)。另外,Pad、IWB、Moblie為相同的觸摸操作模式,需注意交叉關(guān)系中的部分組件展示樣式的差異性。
再者,資源庫(kù)的內(nèi)容展示排布需按照框架結(jié)構(gòu)的類(lèi)別進(jìn)行歸納,并且?guī)в蟹诸?lèi)文字標(biāo)明。通常在一個(gè)較為完整的資源庫(kù)文件里,組件的類(lèi)型會(huì)十分的復(fù)雜且數(shù)量多。按照一定的順序、類(lèi)別歸納整理排布,有利于后續(xù)進(jìn)行迭代調(diào)整或者檢索時(shí)快速找到對(duì)應(yīng)的組件。統(tǒng)一的排序方式也有利于組件之間的對(duì)比與校對(duì)。
4.1.制定使用規(guī)則說(shuō)明;
在大部分公司里,規(guī)范經(jīng)常都是處于被動(dòng)又尷尬位置,不是做了沒(méi)人看,就是沒(méi)做就有人喊著要的;又或者寫(xiě)完共享出去就完事,也不確定所有人是不是能夠完全明白規(guī)范里的所有內(nèi)容等現(xiàn)象。這些其實(shí)都是團(tuán)隊(duì)對(duì)于高效協(xié)作意識(shí)不夠所導(dǎo)致的。
在規(guī)范制定完成后,需對(duì)規(guī)范內(nèi)容進(jìn)行核心部分提取并,盡可能的把基礎(chǔ)信息、通用信息等能讓人一眼便知曉規(guī)范的大致信息的內(nèi)容提取出來(lái)作為規(guī)范的基礎(chǔ)準(zhǔn)則且形成文檔形式。然后對(duì)內(nèi)部團(tuán)隊(duì)包含研發(fā)團(tuán)隊(duì)進(jìn)行一次且詳細(xì)的規(guī)范講解,快速的提高大家對(duì)規(guī)范認(rèn)知以及熟悉度。這對(duì)于工作交接、團(tuán)隊(duì)協(xié)作、甚至是多方案產(chǎn)品都是大大提高工作效率的第一步。
4.2.了解并熟悉sketch中組件與圖層樣式的用法;
了解是否為組件以及有無(wú)圖層樣式的差異;作為一個(gè)組件并且運(yùn)用圖層樣式時(shí),則可以快速在右側(cè)操作面板進(jìn)行快速的更換組件、或者更換圖層樣式,比如顏色、文字屬性。且若引用的library有內(nèi)容更新,則可點(diǎn)擊右上角的通知進(jìn)行同步更新。
如果只是普通的界面元素組合但運(yùn)用了圖層樣式,除了不可快速替換組件以為,仍可以快速在樣式庫(kù)中更換屬性或者更新屬性信息。
但若兩者均無(wú),則需找到相關(guān)的屬性說(shuō)明文檔再為此更換其屬性,操作起來(lái)較為繁瑣不說(shuō),多人協(xié)作時(shí),內(nèi)容的維護(hù)與更新的信息是無(wú)法即時(shí)同步的,需流水線式的更替,稍有信息不對(duì)稱(chēng)的情況,就有可能出現(xiàn)內(nèi)容不統(tǒng)一。
資源庫(kù)的組件調(diào)用也是十分便捷,在頂部工具欄中的添加可進(jìn)行快速的調(diào)取使用。如若是替換組件,則可選中組件才右側(cè)操作面板進(jìn)行更替,或選中組件后右鍵選擇“替換”進(jìn)行更替組件。
4.3.記錄每一次內(nèi)容更新記錄;
詳細(xì)的記錄每一次更改的內(nèi)容以及更改時(shí)間,如果允許,圖例說(shuō)明是最好的呈現(xiàn)方式。把更新內(nèi)容記錄下來(lái)不單是為了內(nèi)容追溯、同步信息更是為后續(xù)迭代做基礎(chǔ)。
4.4.定期維護(hù)完整文檔;
完整文檔有很多種管理模式,但在維護(hù)前需明白,這本身便是屬于投入產(chǎn)出比低的工作。需根據(jù)團(tuán)隊(duì)自身要求去維護(hù),而不是無(wú)意義的為了做而做。
關(guān)于維護(hù)的方式,在實(shí)踐一段周期后,發(fā)現(xiàn)以大版本為節(jié)點(diǎn),或以版本周期為節(jié)點(diǎn)能更好的做好維護(hù)工作,如Vx.x.0、Vx.0.0。通常在這些版本周期大概為10個(gè)小版本并且長(zhǎng)伴隨大改版或者大功能迭代,可以配合這類(lèi)契機(jī)點(diǎn)進(jìn)行文檔整合,事半功倍。
在梳理好的文件里,可適當(dāng)標(biāo)明信息,例:v1.1.0(完整文檔)。
規(guī)范是需要靈活運(yùn)用的,不是把設(shè)計(jì)師框死,也并不存在絕對(duì)的對(duì)與錯(cuò),只有適合與否。
部分落地稿
本文轉(zhuǎn)自:小阿田的設(shè)計(jì)筆記