国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

設(shè)計(jì)規(guī)范的本身并不是只給設(shè)計(jì)師用的，他更大的作用是對于整個(gè)團(tuán)隊(duì)，比如：方便和開發(fā)之間的溝通，幫助他們制作統(tǒng)一的組件，以后用到的時(shí)候直接調(diào)用。而對于設(shè)計(jì)師來說，也不用重復(fù)做圖、重復(fù)標(biāo)注，改動一個(gè)的時(shí)候就能同步所有，大大提高了工作效率。

記得剛開始工作的時(shí)候，負(fù)責(zé)一個(gè)全新的項(xiàng)目， 團(tuán)隊(duì)也只有我一個(gè)設(shè)計(jì)師， 經(jīng)常出現(xiàn)這樣的情況，開發(fā)要改一個(gè)參數(shù)的時(shí)候，總是習(xí)慣性的直接問我這個(gè)地方是什么顏色、主色調(diào)是什么、圖標(biāo)是多大、分割線的顏色……那時(shí)候潛意識就覺得這些東西是需要有個(gè)規(guī)范文檔的，把一些常用的內(nèi)容，比如：色值、大小、按鈕、背景顏色等都放在一起， 團(tuán)隊(duì)成員在有需要的時(shí)候能夠快速找到。

于是就上網(wǎng)搜了很多別人做的設(shè)計(jì)規(guī)范，自己依葫蘆畫瓢做了一份， 滿心歡喜的給到開發(fā)的時(shí)候，卻被告知很多東西都派不上用場。

比如：字體規(guī)范里寫的一級標(biāo)題，每個(gè)人所認(rèn)為的一級標(biāo)題是不一樣的， 所以光寫一級標(biāo)題的話， 別人也不知道具體指的是哪里。

再比如圖片區(qū)域，規(guī)范的太死了，根本沒留適配的空間，就像個(gè)標(biāo)注，但其實(shí)現(xiàn)在看來作為標(biāo)注也是不合格的。

最后結(jié)局就是，花了很長時(shí)間做的規(guī)范只自嗨了自己，實(shí)際上對于團(tuán)隊(duì)來說一點(diǎn)作用都沒事后一直在想什么樣的規(guī)范是適合小公司的我們呢？又是什么樣的規(guī)范能夠真正節(jié)省團(tuán)隊(duì)時(shí)間、提高工作效率的呢？

而現(xiàn)在工作了幾年之后，對這些有了更多的理解，所以就想把這些都總結(jié)記錄一下，算寫給剛工作時(shí)候的自己，當(dāng)然也希望在寫給自己的同時(shí)也能夠幫助看的人，節(jié)省一些踩坑的時(shí)間。

關(guān)于設(shè)計(jì)規(guī)范?

在說具體怎么做規(guī)范之前，我想先就規(guī)范本身來說明下，講一下為什么需要做，以及做了之后的好處、作用，知其然知其所以然。

為什么要做規(guī)范

很多人在小公司的設(shè)計(jì)師都覺得，整個(gè)公司只有自己一個(gè)設(shè)計(jì)師，所有的設(shè)計(jì)稿都是自己一個(gè)人做的，風(fēng)格肯定都是統(tǒng)一的，所以沒必要花那么長時(shí)間去做一個(gè)沒有用的東西。但其實(shí)規(guī)范的本身并不是只給設(shè)計(jì)師用的，他更大的作用是對于整個(gè)團(tuán)隊(duì)，比如：方便和開發(fā)之間的溝通，幫助他們制作統(tǒng)一的組件，以后用到的時(shí)候直接調(diào)用。

而對于設(shè)計(jì)師來說，也不用重復(fù)做圖、重復(fù)標(biāo)注，改動一個(gè)的時(shí)候就能同步所有，大大提高了工作效率。

而且有時(shí)候就算設(shè)計(jì)稿是同一個(gè)人的，也很難保證前后界面的參數(shù)是一致的，畢竟人的精力有限， 事情多的時(shí)候， 很容易出現(xiàn)記憶偏差可能你在前面顏色、圖標(biāo)、模塊間距做的是這樣的，到后面相同模塊的時(shí)候， 就會做成另外一個(gè)樣子。

這種小問題到后面再去修改不但浪費(fèi)時(shí)間，還容易漏掉，而前期花時(shí)間定義好規(guī)則，并整理好規(guī)范，能夠有效避免這個(gè)問題，磨刀不誤砍柴工。

什么樣的規(guī)范才是好的

一個(gè)好的規(guī)范， 首先得有人愿意用，否則你做的再好也都白費(fèi)了。咱們來換位思考一下，如果你是使用者，你希望看到一個(gè)什么的規(guī)范文檔？

對于我而言，最重要的不是它做的多么細(xì)致、面面俱到、多么完美，而是我看的懂，我能夠30秒內(nèi)找到自己想要的東西，并且能夠?qū)Ξ?dāng)前的工作有幫助。所以說規(guī)范要簡單易懂、且有指導(dǎo)意義。

需要注意的地方

規(guī)范最好是當(dāng)主要界面的設(shè)計(jì)完成之后，再來制作，切記不要一開始就著手制作規(guī)范。這樣很容易出現(xiàn)前期制定的規(guī)范在后續(xù)的頁面上沿用不了的情況。

我一般是把每個(gè)底tab的一級頁面、再加上幾個(gè)二級、三級頁面都做好之后再開始。

也不要因?yàn)橐?guī)范而限制了自己的思維，當(dāng)發(fā)現(xiàn)規(guī)范有問題的時(shí)候，要及時(shí)去修正，而不是做了一次之后，一直沿用，永不修改。

規(guī)范要“因地制宜”，切實(shí)可行，不要流于形式。

哪些需要優(yōu)先確定?

尺寸

設(shè)計(jì)圖尺寸：

雖說現(xiàn)在大多數(shù)人都是以750 (@2x) 為設(shè)計(jì)稿， 但是也還是有人720 (@2x) 的尺寸， 或是375 (@1x) 的尺寸， 比如：我就是用的720。所以設(shè)計(jì)之初最先要定一個(gè)統(tǒng)一的設(shè)計(jì)尺寸，特別是多個(gè)設(shè)計(jì)師合作的時(shí)候，千萬不要想當(dāng)然的以為別人都和你一樣。

間距大小間距包括頁邊距、模塊與模塊之間的間距，這種全局的間距大小必須要一致，頁邊距的大小很好定，基本上20、24、32居多，根據(jù)產(chǎn)品特性定一個(gè)統(tǒng)一的就好。

而模塊與模塊之間的間距就相對復(fù)雜一點(diǎn)， 在定之前需要先確定模塊之間的分割方式，是用線、還是面、還是留白， 然后再確定間距。

確定好模塊與模塊之間的分割方式后，還需要確定模塊內(nèi)部的，確定之后就要嚴(yán)格執(zhí)行比如規(guī)范定的模塊與模塊之間用線，模塊內(nèi)部之間用留白，那后續(xù)所有頁面都需要按照這個(gè)規(guī)則來（特殊情況除外。

顏色

顏色包括基礎(chǔ)標(biāo)準(zhǔn)色（主色）、基礎(chǔ)文字色，還應(yīng)該包括全局標(biāo)準(zhǔn)色（背景色、分割線色值等）這些都需要標(biāo)好色值以及使用的場景。

當(dāng)顏色是漸變的時(shí)候，也需要標(biāo)清楚漸變的顏色。

字體

不需要把所有頁面的字號都放到規(guī)范里，只需要常用的字號、以及所使用的場景寫清楚就好。

需要注意的是，使用場景要寫一些帶有明確性指向的描述文字，比如：頂導(dǎo)航標(biāo)題字號、Feed 正文、詳情頁標(biāo)題等。

還有一點(diǎn)也不能忘記，那就是行間距，不管是一行文字還是多行文字，我們都需要標(biāo)注清楚行間距，也就是行高，如果是段落的話還需要標(biāo)注段落間距。

所以為了避免團(tuán)隊(duì)的其他成員忽略了文字的行間距，我們需要在做規(guī)范的時(shí)候標(biāo)明，所有文字必須注明行間距。

圖標(biāo)

項(xiàng)目緊急而人員又不足的時(shí)候，可能沒有那么多時(shí)間，去把所有的圖標(biāo)都畫的精細(xì)，那這個(gè)時(shí)候我們可以先定尺寸。

當(dāng)然這里說的定尺寸不是讓你把頁面內(nèi)所有圖標(biāo)的尺寸都定好，而是說優(yōu)先定幾個(gè)大的模塊，比如：頂導(dǎo)航、底導(dǎo)航、個(gè)人中心的…

等后續(xù)空閑的時(shí)候我們再去細(xì)化這些圖標(biāo)，開發(fā)也只需要換張圖，不影響其他建議圖標(biāo)尺寸盡量不要過多，比如：32、36、40、48 都有，這樣會顯得凌亂無序，而且這些完全可以統(tǒng)一成兩個(gè)大小的，比如：32、48的。因?yàn)閳D標(biāo)是可以有留白區(qū)域的，也就說圖標(biāo)本身大小可以是40，但是切圖尺寸是48。

這樣做的好處就是圖標(biāo)大小種類較少、方便記憶、也顯得專業(yè)，畢竟誰也不希望最后整理出來的規(guī)范，32的圖標(biāo)2個(gè)、36的圖標(biāo)2個(gè)、40的圖標(biāo)2個(gè)，這樣孤零零的多慘，所以建議圖標(biāo)尺寸不要太多，

按鈕

按鈕包括它的大小、色值、圓角度以及默認(rèn)、點(diǎn)擊、置灰狀態(tài)。

前期在制定規(guī)范的時(shí)候，我們可以先定大、中、小三個(gè)尺寸的按鈕樣式，后期再根據(jù)實(shí)際情況做修改。

如果你的 APP 內(nèi)很多按鈕都是文字 + icon的， 那么 icon 的大小以及它和文字之間的距離也是需要規(guī)范的。

圖片

圖片包括 APP 內(nèi)出現(xiàn)的所有圖，一般情況下都是產(chǎn)品圖和頭像，但是需要注意的是在制定規(guī)范之前，要先把圖片比例定好，常見的比例有1:1、2:1、4:3、16:9 等等。

然后再把每個(gè)模塊所用的圖片大小以及它的比例標(biāo)清楚，如果圖片有圓角度的話也需要注明。

頭像的尺寸可以定三個(gè)，大中小各一個(gè)，基本體量少的 APP 都夠用了。

建議 APP 內(nèi)的圖片比例兩到三個(gè)就好，因?yàn)檫@涉及到后臺上傳，比例不一樣的話，要不然就是開發(fā)需要對圖片進(jìn)行裁剪、要不然就是需要留不同的接口，后期分別上傳。無論哪一種，都是需要額外的人力成本，所以不要給自己挖坑哦。

導(dǎo)航

頂導(dǎo)航：

高度、字體大小、顏色、有沒有分割線，有的話分割線色值 ; 帶不帶圖標(biāo)、多個(gè)圖標(biāo)之間的間距等等。

底導(dǎo)航：

二級導(dǎo)航主要是一些篩選類tab，需要標(biāo)明文字大小、色值、選中后的橫線的大小。

這里橫線的樣式目前常見的有兩種：

1. 一種是固定的短線， 不管上面文字多少， 都是顯示一樣的大?。?/li>
2. 還有一種是和文字一樣長的， 無論哪一種， 事先都需要定義一下規(guī)則。

卡片相關(guān)

卡片包括很多模塊，比如：卡片標(biāo)題、卡片列表、一些基礎(chǔ)的卡片樣式，建議以高度為劃分，如果內(nèi)容差不多的話，建議統(tǒng)一一下高度。比如都是icon +文字，一個(gè)高度是72px，一個(gè)是80px，就可以統(tǒng)一成一個(gè)。

產(chǎn)品 list 等一些可復(fù)用的卡片樣式都可以做到規(guī)范里，統(tǒng)一樣式，后期修改起來也比較方便。

哪些可暫時(shí)確定，日后可再調(diào)整

前期的時(shí)候，因?yàn)楦鞣N各樣的原因，比如時(shí)間不夠、無法預(yù)知后面的情況等等，沒有辦法把所有的東西都定好規(guī)范，這時(shí)候我們可以對一些后期改動成本小的，暫時(shí)確定一下規(guī)范，后期需要修改的時(shí)候再統(tǒng)一修改。

圖標(biāo)風(fēng)格

在做圖標(biāo)的時(shí)候，我們所必須做的是把圖標(biāo)大小確定，對于圖標(biāo)本身的樣式、風(fēng)格、粗細(xì)等可暫時(shí)做幾個(gè)示意的樣式，等所有界面完成后，再來統(tǒng)一繪制。

很多時(shí)候我們并不清楚界面內(nèi)都需要什么樣的彈窗樣式，文字最多的有多少個(gè)，所以我們可以先定幾個(gè)最常用的，比如：雙向操作的（含確定、取消的）的彈窗、單向操作的（只有一個(gè)操作按鈕的）。

Toast 彈窗

后續(xù)做的過程中發(fā)現(xiàn)新的需求是現(xiàn)在已有的樣式，滿足不了的，就可以隨時(shí)添加或者修改。

哪些先不做?

空白頁插畫、缺省頁、占位圖等，這些可以先不用急著做，等項(xiàng)目都完成后，再來做就可以了。前期項(xiàng)目緊急的時(shí)候，不要把時(shí)間都花費(fèi)在這些小的頁面里。

加分項(xiàng)?

目錄

目錄相當(dāng)于一個(gè)索引，方便看的人對整個(gè)規(guī)范有一個(gè)大致了解，而且能幫助團(tuán)隊(duì)成員快速的找到自己需要的。

版式統(tǒng)一

規(guī)范文檔既然是統(tǒng)一頁面布局，方便團(tuán)隊(duì)協(xié)作的，那么它本身就應(yīng)該統(tǒng)一，比如：每頁格式、標(biāo)題大小、正文字號顏色等都需要保持一致，這樣才更能讓別人相信這是一個(gè)經(jīng)過深思熟慮做出來的規(guī)范文檔。

再比如：文檔里所有間距用綠色表示；元素用紫色表示；高度用紅色表示等等，讓每個(gè)顏色的存在都變的有規(guī)律可循。

總結(jié)?

規(guī)范的本身是為了提高團(tuán)隊(duì)的工作效率，不要顧此失彼。小公司的產(chǎn)品不像大公司體量那么大，規(guī)范不需要完全照搬大公司的，而是要根據(jù)自己公司的實(shí)際情況，制作出一個(gè)適合自己的，扁平快的規(guī)范文檔，讓規(guī)范能真正發(fā)揮它的作用做規(guī)范就像找對象，永遠(yuǎn)有更好的，但是更好的不一定是最合適的。

作者：橙子的橙子，公眾號：海鹽社

本文由 @橙子的橙子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議