APP開發(fā)設(shè)計(jì)師對于前端制作需要掌握那些規(guī)律?首先從一開始的立項(xiàng)到現(xiàn)在落地上線,可以說是從零開始進(jìn)行 APP 全部細(xì)節(jié)的梳理并且規(guī)定規(guī)范,這一路走過來還是能總結(jié)出很多心得,本文將分為3個(gè)部分,闡述如何從0到1建立設(shè)計(jì)規(guī)范。
APP制作前規(guī)范好目錄
如何確定內(nèi)容,規(guī)范里要寫什么如何寫如何推動(dòng)規(guī)范落地

一、如何確定內(nèi)容?
這里我網(wǎng)站制作、APP開發(fā)公司設(shè)計(jì)師總結(jié)了三步:
1. 網(wǎng)站制作也好APP開發(fā)也好設(shè)計(jì)師先要確定目標(biāo)用戶、用戶目標(biāo)、設(shè)計(jì)目標(biāo)
根據(jù)不同的用途和目標(biāo),不同的團(tuán)隊(duì)對設(shè)計(jì)規(guī)范的制定是不一樣。比如為了指導(dǎo)與規(guī)范全球第三方開發(fā)者進(jìn)行設(shè)計(jì)和開發(fā),Google 建立的 Material Design 覆蓋面廣,每個(gè)組件細(xì)節(jié)寫得非常細(xì)致。Ant Design 則是直接做出了組件,方便直接進(jìn)行調(diào)用。有些國內(nèi)設(shè)計(jì)團(tuán)隊(duì)的規(guī)范則是主要描述常用控件和色值。因此我們需要確立用戶目標(biāo)和設(shè)計(jì)目標(biāo),這樣才能確定我們的規(guī)范側(cè)重點(diǎn)是什么,需要做成怎么樣的形式。
在這里我列舉了自己撰寫規(guī)范時(shí)的用戶與目標(biāo):
2. APP開發(fā)制作設(shè)計(jì)師注意模范大平臺(tái),先列全
一個(gè)規(guī)范里面的東西是很多的,那么我們究竟需要做什么呢?假如一開始我們沒有方向,找一個(gè),列一個(gè),這樣我們很容易疏漏很多情況。在這里我采用的一個(gè)辦法是:首先熟讀 iOS,Material Design規(guī)范,并且模仿他們,在腦圖中,把規(guī)范中應(yīng)含有的所有內(nèi)容羅列出來,羅列一個(gè)大綱。
這里我列舉當(dāng)時(shí)自己做的一個(gè)腦圖大綱,覆蓋了主流規(guī)范中的所有細(xì)節(jié),大家可以進(jìn)行參考并模仿:
3. APP開發(fā)設(shè)計(jì)師注意針對自己情況進(jìn)行刪減
列完齊全的大綱后,我們需回顧設(shè)計(jì)目標(biāo),對大綱里的內(nèi)容進(jìn)行刪減。(比如在組件、模式這些地方,可以對著自己的 APP,進(jìn)行挨個(gè)尋找,看自己的 APP 當(dāng)前是不是運(yùn)用了這個(gè)組件,沒有的話就進(jìn)行刪減。)
在這里我列舉了針對自身 APP 的情況刪減后的大綱圖:
二、網(wǎng)站、APP制作設(shè)計(jì)師如何寫
進(jìn)過了以上的三步,我們基本得出了要寫什么的框架了,接下來就是如何寫規(guī)范的階段。
這里網(wǎng)站制作公司總結(jié)了3步:
1. 確定優(yōu)先級
我們可以通過版本迭代計(jì)劃+性價(jià)比+重要性(該組件在頁面出現(xiàn)的場景次數(shù)以及當(dāng)前的不統(tǒng)一對 APP 體驗(yàn)影響程度)這幾個(gè)維度分別確定每塊內(nèi)容的優(yōu)先級和分工?;A(chǔ)的、必要的、高性價(jià)比的放在第一期,復(fù)雜的向后放,隨著產(chǎn)品的迭代,我們的規(guī)范也會(huì)越來越完整。同時(shí)需要留意版本規(guī)劃,了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內(nèi)容的優(yōu)先級。龐大復(fù)雜,牽涉到很多頁面的,我們可以先降低其優(yōu)先級:比如全局提示框的規(guī)范,toast 的規(guī)范。同時(shí),我們也需常與開發(fā)溝通,爭取把可復(fù)用性高、組件日后變化幅度少的組件做成開發(fā)組件庫。
2. 確定規(guī)范書寫格式
我們制定的規(guī)范本身也是設(shè)計(jì)的交付物,假如每個(gè)設(shè)計(jì)師都按照自己的喜好來編寫規(guī)范,那么這個(gè)規(guī)范本身也會(huì)變得不規(guī)范,規(guī)范自身保持一致性是提高規(guī)范閱讀效率的一部分。
我們可以回歸我們之前制定的用戶目標(biāo)和設(shè)計(jì)目標(biāo)來制定我們規(guī)范的書寫格式。規(guī)范的用戶群是誰,主要想達(dá)到什么作用,是通過文檔展示還是網(wǎng)上展示,確定了這些問題后,就可確定規(guī)范的詳細(xì)程度、主要的展示形式(比如前文說到的 Ant Design 和 Material Design)。這里我的思考點(diǎn)是:假如規(guī)范寫太多字就會(huì)變得很臃腫,沒有人喜歡慢慢仔細(xì)的閱讀你寫的規(guī)范,所以我們應(yīng)該做到寫得簡明扼要,再輔以例子說明(根據(jù)開發(fā)的習(xí)慣,都是喜歡直接看例子,看標(biāo)注)。我的書寫格式是:先寫描述這個(gè)組件是什么,再列舉出現(xiàn)的場景,然后編寫交互規(guī)則,最后給出視覺標(biāo)注+例子。
3. 逐步對單個(gè)規(guī)范進(jìn)行整理與書寫
當(dāng)確定了要寫什么東西和格式之后,我們開始進(jìn)入到細(xì)節(jié),對每個(gè)內(nèi)容進(jìn)行整理,制定規(guī)范了。通過對每個(gè)內(nèi)容制定規(guī)范也是有方法的:
下面我通過整理「列表」這個(gè)規(guī)范來講解:
收集出現(xiàn)的所有的場景
當(dāng)一個(gè)產(chǎn)品已經(jīng)趨于成熟,這個(gè)組件出現(xiàn)的場景就會(huì)非常多,比如對話框,toast,列表這些組件出現(xiàn)的地方很多,需要我們自己仔細(xì)地體驗(yàn)產(chǎn)品,把所有頁面都找出來。
提取共性,歸納分類
我們需要分析每個(gè)頁面的特點(diǎn)并且把相同特點(diǎn)的頁面歸納一起,眾多的頁面場景就能整理成幾個(gè)典型的種類,然后只需對這幾個(gè)典型的種類進(jìn)行定義和描述即可。
在列表中,我分為了大封面列表、小封面列表、用戶列表、單行列表
編寫規(guī)則
在分類好后,我們可以對每個(gè)種類編寫規(guī)則,在這里我們需要描述好每個(gè)種類有什么特點(diǎn)或?qū)傩?,什么時(shí)候場景下適用,并且給出標(biāo)注和例子,方便閱讀者理解。
多與組內(nèi)成員討論修改在制定好初稿后,我們可以與組內(nèi)成員宣講下自己制定的規(guī)范。多從別人的角度出發(fā),確保你編寫的規(guī)范是否易懂,是否包含了全部的情況,是否容易執(zhí)行落實(shí)。
三、網(wǎng)站制作設(shè)計(jì)師如何推動(dòng)規(guī)范落地
寫完內(nèi)容后,最重要的一步就是推動(dòng)落地,規(guī)范要真正有人用才能體現(xiàn)價(jià)值。
1. 幫助推動(dòng)規(guī)范落地的小建議
制定規(guī)范推進(jìn)進(jìn)度表
表格里面應(yīng)該包含規(guī)范制定的優(yōu)先級,分工進(jìn)度,分工人員,并且確定每一期進(jìn)度的交付時(shí)間,開會(huì)討論的時(shí)間,作為負(fù)責(zé)人,也可以適時(shí)提醒成員每次的開會(huì)時(shí)間。
編寫過程中多與其他成員討論,達(dá)成一致性共識(shí)
制定規(guī)范后,與部門其他人員進(jìn)行宣講,灌輸概念,針對如何更好的落實(shí)進(jìn)行討論調(diào)整。在設(shè)計(jì)中都不可能一次就完美,我們需要不斷的在修改中逐漸完善規(guī)范建成后放在網(wǎng)上同步在網(wǎng)上,方便部門內(nèi)的其他成員能隨時(shí)查看和團(tuán)隊(duì)成員對規(guī)范的更新修改、同步。強(qiáng)制性制定規(guī)則要求團(tuán)隊(duì)成員執(zhí)行有明確的懲罰機(jī)制和要求才能更好的執(zhí)行,不然在規(guī)范制定后很容易健忘此事。規(guī)范保持持續(xù)的更新迭代規(guī)范推動(dòng)落地后并不是完全了事,要根據(jù)產(chǎn)品的迭代,保持規(guī)范的更新。這整個(gè)制定規(guī)范的項(xiàng)目中,還是有不少反思的地方,值得我們深思和注意。
2. 深思和注意
切記不要為設(shè)計(jì)規(guī)范而做規(guī)范
規(guī)范最重要的點(diǎn)是能推動(dòng)落地,能確確實(shí)實(shí)改善產(chǎn)品,達(dá)到統(tǒng)一性。因此我們在設(shè)計(jì)規(guī)范時(shí),并不需要「高大上」術(shù)語,給出一大堆的設(shè)計(jì)理念用來提升設(shè)計(jì)檔次。而是真正的回歸到我們的設(shè)計(jì)目標(biāo),針對目標(biāo)用戶制定規(guī)范,做到簡樸、易懂、能落地。沒人愿意閱讀長篇文字我們應(yīng)該盡量控制文案長度,做到通俗易懂即可。要時(shí)刻圍繞我們的目標(biāo)做規(guī)范比如,我這次做的規(guī)范中有一項(xiàng)是去工具化,在制定控件中,空白頁面中就會(huì)加入很多趣味化的設(shè)計(jì)。
靈活變通
規(guī)范只是適合大多時(shí)候的場景,對于一些規(guī)范中沒有包含或者不符合規(guī)范的場景,我們可以靈活變通,積極創(chuàng)新或者是補(bǔ)充新的規(guī)范(前提是與組內(nèi)積極溝通,達(dá)成共識(shí))。
總結(jié)
再來回顧如何從0到1建立規(guī)范。
1. 確定內(nèi)容
確定用戶目標(biāo)和設(shè)計(jì)目標(biāo)
模仿大平臺(tái),列全
針對自己情況進(jìn)行縮減
2. 寫
確定優(yōu)先級
確定規(guī)范書寫格式
逐步對單個(gè)內(nèi)容進(jìn)行整理與書寫: 收集全部情況 、 分類歸納 、提取共性,編寫規(guī)則
3. 推動(dòng)
制定規(guī)范推進(jìn)進(jìn)度表
編寫過程中多與其他成員討論
把規(guī)范建成后放在網(wǎng)上
強(qiáng)制性制定規(guī)則要求團(tuán)隊(duì)成員執(zhí)行
規(guī)范保持持續(xù)的更新迭代深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。