設(shè)計中會用到 UI 設(shè)計規(guī)范嗎？

時間：2023-12-06 03:12:02 | 來源：網(wǎng)站運營

時間：2023-12-06 03:12:02 來源：網(wǎng)站運營

設(shè)計中會用到 UI 設(shè)計規(guī)范嗎？：呵呵噠，設(shè)計過程中絕對會用到規(guī)范，特別是在一個UI teamwork的時候。之前去面試很多公司的ui，我上來就可以打包票說，你們這個ui是好幾個設(shè)計師做的吧。對方尷尬的說，是不是挺亂的。我就在心里呵呵噠。

我之前一直是在創(chuàng)業(yè)公司做獨立設(shè)計師，說好聽點是獨立設(shè)計師，難聽點，就是唯一的設(shè)計師。創(chuàng)業(yè)型公司，UI UE你要全包。但是我還是很有追求的在每個版本改版之后，更新設(shè)計規(guī)范。我的設(shè)計規(guī)范沒有大公司那么高大上，只包含了字體選用，配色運用，ui kit這些東西。我當時做這個設(shè)計規(guī)范，純粹只有兩個原因：

一，我要設(shè)計的界面太多了，而且產(chǎn)品迭代很快，來不及一個個界面標注重復(fù)性的東西，于是我就出一個字體運用規(guī)范，讓開發(fā)看一個文檔就好了。有個設(shè)計文檔，可以減少很多設(shè)計與開發(fā)之間的溝通，雖然我原來是左手ios 開發(fā)，右手android開發(fā)的UI小公舉，但即使是這樣，我也不想把時間浪費在重復(fù)的標注，沒有意義的“ 小公舉，你這個字體是多大，什么顏色”這樣的問題上。后來給開發(fā)團隊引進了zeplin，安卓小伙伴持續(xù)用著，ios開發(fā)，一直看著我的sketch源文件，在我教會開發(fā)sketch后，我連字體規(guī)范都少寫了很多。

二，我把這些東西一個版本的整理迭代好了，哪天來一場說走就走的旅行，沒有交接成本，即使公司找不到設(shè)計師，開發(fā)哥哥直接用這個規(guī)范，就可以分分鐘上崗黨設(shè)計師了。直接甩這個規(guī)范的sketch源文件就可以了。

事實是，在一年之后，我很感謝一年來的我如此的機智，因為我確實來了一場老娘不干了的裸辭，公司在很長時間也沒招到合適的設(shè)計師。再在就業(yè)的時候，很多公司對你的整理的設(shè)計規(guī)范興趣遠大于你作品興趣。我分析啊，主要他們可能他們心里覺得，一個設(shè)計師撐起的一個公司，居然還有設(shè)計規(guī)范。呵呵噠，你們肯定也想看我做的渣規(guī)范系不系。

附我做的規(guī)范一部分。



純粹是為了節(jié)省空間，拍的這么密集。嗯。因為程序員的屏幕大多都很小。。不像我們大設(shè)計師，23寸，27寸高清無碼大屏幕。心疼還要接渣顯示器的程序員三秒。。。

我一般就寫規(guī)定的用色，然后圖標的區(qū)域規(guī)范，包括切圖區(qū)域，點擊區(qū)域，具體的規(guī)范是放在ai的圖標規(guī)范里，有更詳細的視覺區(qū)域，切圖區(qū)域，點擊區(qū)域規(guī)定等。還有諸如圓角，像素大小規(guī)定等。我總是在幻想，公司哪天招個設(shè)計師跟我一起畫畫圖標。

是的，這些規(guī)定從我上崗到快離職，只有我一個設(shè)計師看到了。其他看到的都是程序員，但是我依舊非?？隙ㄋ嬖诘谋匾?，讓我不用每次更新，都要翻舊的設(shè)計稿，臥槽，我上次用的這個是什么顏色？有人說，可以用色板記錄啊，但是我的色板會把中間配色過程中使用的也保存下來，sketch的色板不像ps，可以標注備胎1號色，2號色。還有，設(shè)計師做視覺規(guī)范，可以幫助自己做個人沉淀，這個對自己的好處絕對大于對公司層面的好處。

——————————————感謝大家贊同的分割線，來更新一發(fā)——————————－

很多人評論私信問一些規(guī)則的詳細事宜。我參考了很多大廠的一些設(shè)計規(guī)范，比如百度，淘寶，jd。還有一些類似airbnb之類的，綜合來定制適合自己團隊，自己app的規(guī)范。統(tǒng)一來說，規(guī)范出了包含色值，文字，之外當然還有icon規(guī)范，來新司制定新的設(shè)計規(guī)范就是把icon 的圓角建議規(guī)范都定制好了。下面簡要的說明一下各規(guī)范建議規(guī)定的地方：

色彩體系：

高亮色，文字色，分割線色，背景色，輔助色，normal ,pressed,disabled的狀態(tài)都是附加了比如10%的＃000，10％#ffff之類的。

文字體系：

文字大小，line-height，所以字體大小與line-height的比例關(guān)系建議保持一致，如果存在小數(shù)點，可以四舍五入。比如：28px字體大小的line-height是40px。那26px的字體，line-height可以取36px，比例是1.4。

中文字體字形，英文字體字形，所用到的手繪字體等。

icon體系：

線性粗細，建議圓角大小，比如：

還有普適性icon的視覺區(qū)域大小，切圖區(qū)域大小。比如我常用的視覺區(qū)域大小是44px， 切圖區(qū)域大小是60px。icon的整體風格建議。這點可以參考md的。規(guī)定了各種。。。可以適當參考就行了。

https://www.google.com/design/spec/style/icons.html#icons-system-icons

button體系：

按鈕的常態(tài)高度，圓角大小。不同按鈕狀態(tài)的alpha值統(tǒng)一等。按鈕的線型，按鈕內(nèi)字體大小等。按鈕的長度延伸適配等?？梢圆捎胹ketch插件 Dynamic buttons，可以自適應(yīng)按鈕大小。

其他UIKIT體系：

1.nav bar統(tǒng)一，特別是有類別切換的。

2.文本框

3.單一列表，組合列表

4.bar 體系，高度，透明度，投影等。

5.popover體系，彈出框的寬度，背景灰度值，文本規(guī)范，按鈕規(guī)范等。

6.配圖規(guī)范，風格選圖建議（為了保持app的格調(diào)一致性）

7.情感化提示規(guī)范。

8.插畫規(guī)范。

還有好多，不一一例舉了。

還有另外好多問zeplin的事情的朋友，官網(wǎng)是zeplin.io.可以直接將sketch的畫板導入到zeplin，就可以直接查看相應(yīng)的色值，間距，大小了。可以根據(jù)不同的平臺切換顯示重要的是他會幫助我們整理相應(yīng)的一些規(guī)范。


當然我這里是重合了好幾個文件，所以有兩個高亮色。見諒。

還有最近新發(fā)現(xiàn)一個幫助建立品牌視覺設(shè)計規(guī)范的一個網(wǎng)站

Create Free Brand & Design Style Guides with Frontify Style Guide，仔細研究研究，還是挺好的。他默認的排版就挺美的了。

想到了再繼續(xù)補充吧。感謝大家。么么噠～




——————————————寫完一份新文檔的分割線—————————————————

最近針對app的android端 新寫了一份設(shè)計文檔，做了一個設(shè)計組建化，文檔的閱讀對象從單一的設(shè)計師變成了設(shè)計師，研發(fā)，產(chǎn)品經(jīng)理。文檔的涵蓋內(nèi)容就不止停留在設(shè)計層面，更多從實現(xiàn)角度出發(fā)，如何保證設(shè)計在設(shè)備上的還原度。直接貼部分文檔吧。


這也是第一次針對android也一個設(shè)計規(guī)范文檔，需要提醒一下設(shè)計師，在不同的平臺，適配的習慣不同，比如android平臺很多采用的是auto layout的布局方式，所以很多時候，規(guī)定的是固定的間距，而不是整體高度，寬度。iOS則很多時候是固定一個高度，寬度，不同設(shè)備適配的時候，標示比例。