友情提示：文章尾部有福利相送，不要錯(cuò)過(guò)~

在我從事UI設(shè)計(jì)師這幾年的工作中逐漸發(fā)現(xiàn)，最讓人糟心的不是應(yīng)付各種奇葩的需求，完成設(shè)計(jì)稿，而是交付。每次交付的設(shè)計(jì)稿和最后開(kāi)發(fā)出來(lái)的產(chǎn)品總是讓我心塞無(wú)比，很少最終產(chǎn)品和我的設(shè)計(jì)稿是完全一致的。

UI設(shè)計(jì)師對(duì)接產(chǎn)品經(jīng)理是個(gè)問(wèn)題，UI設(shè)計(jì)師對(duì)接前端工程師是個(gè)問(wèn)題。

UI設(shè)計(jì)師處于整個(gè)產(chǎn)品開(kāi)發(fā)鏈條中最為重要也是最為尷尬的一環(huán)，產(chǎn)品界面設(shè)計(jì)完全出自設(shè)計(jì)師，但是卻不是由設(shè)計(jì)師來(lái)最終實(shí)現(xiàn)。

根據(jù)我的經(jīng)驗(yàn)，其實(shí)大部分問(wèn)題都出在了溝通上，開(kāi)發(fā)工程師沒(méi)有完全理解設(shè)計(jì)稿，他們完全依賴(lài)我們的標(biāo)注和切圖來(lái)進(jìn)行開(kāi)發(fā)，設(shè)計(jì)師的切圖和標(biāo)注，是否規(guī)范和精確，直接影響視覺(jué)效果的還原度。往往設(shè)計(jì)做的越精致創(chuàng)意，交付過(guò)程就越煎熬。

然而，最后界面長(zhǎng)的不好看,老板不會(huì)怪程序猿,是會(huì)怪你的。

標(biāo)注難

“這里的間距是多少啊，沒(méi)有標(biāo)我怎么寫(xiě)？”

“這里的字體需不需要加粗？”

“這個(gè)字需要多大的字號(hào)？”

“這個(gè)是Android的尺寸？iOS的呢？我要自己算啊？”

“這里的icon為什么不沒(méi)有高度和寬度呢”

...........

我想大多數(shù)的設(shè)計(jì)師和我一樣，時(shí)常因?yàn)槁?biāo)元素被開(kāi)發(fā)追問(wèn)這些問(wèn)題。開(kāi)發(fā)能不能完美的的還原設(shè)計(jì)稿，很大一部分取決于我們?cè)O(shè)計(jì)師的標(biāo)注，但是哪些該標(biāo)，哪些不用標(biāo)，我們?cè)O(shè)計(jì)師往往不好把握，尤其是新手設(shè)計(jì)師。我們往往就盡量標(biāo)得詳細(xì)一些，手動(dòng)標(biāo)注占領(lǐng)了我們?nèi)粘４蟛糠值臅r(shí)間，還不能有效的完成交付，經(jīng)常加班，有時(shí)還會(huì)有開(kāi)發(fā)人員來(lái)問(wèn)或者直接不問(wèn)就自己做主隨便做的情況。手動(dòng)標(biāo)注加大了溝通和時(shí)間的成本，讓人精疲力盡。

切圖難

難點(diǎn)1：作為UI設(shè)計(jì)師，在日常工作中一個(gè)非常重要的設(shè)計(jì)輸出物，就是切圖。只要是無(wú)法用代碼不好實(shí)現(xiàn)和表達(dá)出來(lái)的，就需要切圖。規(guī)范的切圖，會(huì)直接影響到開(kāi)發(fā)工程師對(duì)設(shè)計(jì)效果的展示。光一個(gè)蘋(píng)果應(yīng)用中的圖標(biāo)就需要3種不同的大小，安卓的要求更是五花八門(mén)，最后還得打包交給開(kāi)發(fā)，太多無(wú)用和低效的瑣事浪費(fèi)了大量的時(shí)間。

難點(diǎn)2：切圖的命名格式在不同的公司都不盡相同，需要UI設(shè)計(jì)師和對(duì)接的開(kāi)發(fā)工程師進(jìn)行溝通，或者是團(tuán)隊(duì)內(nèi)部進(jìn)行溝通規(guī)范，才能達(dá)到良好的切圖命名規(guī)范，大大降低了工作效率。

設(shè)計(jì)協(xié)作更難

設(shè)計(jì)師和程序員作為專(zhuān)業(yè)性很強(qiáng)的工作者，他們之間需要溝通和協(xié)作的工作內(nèi)容太多，但往往兩者不能很好的互相理解對(duì)方的工作，設(shè)計(jì)師不懂代碼，程序員不懂設(shè)計(jì)，這給產(chǎn)品交付帶來(lái)了巨大的困難，但是設(shè)計(jì)又是一個(gè)與其他部門(mén)有著很多溝通需求的工作，在協(xié)作上設(shè)計(jì)一直有著很多痛點(diǎn)。雖然現(xiàn)在市面上有許多協(xié)作應(yīng)用，但始終缺少一款能讓設(shè)計(jì)師得心應(yīng)手，解決他們實(shí)際痛點(diǎn)的協(xié)作設(shè)計(jì)工具。

摹客iDoc是由Mockplus團(tuán)隊(duì)開(kāi)發(fā)的協(xié)作設(shè)計(jì)工具，是一款更快更簡(jiǎn)單的智能標(biāo)注和切圖工具，完美地解決了標(biāo)注難，切圖難，設(shè)計(jì)協(xié)作難的問(wèn)題。

特色功能：

• 智能標(biāo)注，讓設(shè)計(jì)師解放雙手，再也不需要手動(dòng)做；可以完整而清晰地將PS、Sketch設(shè)計(jì)圖中每個(gè)元素的尺寸、位置、顏色、間距、字號(hào)等樣式信息自動(dòng)同步到摹客iDoc，開(kāi)發(fā)師可以隨時(shí)查看。

• 還支持百分比標(biāo)注；不僅可以選擇單個(gè)圖層，還可以連續(xù)選擇多個(gè)圖層，并智能標(biāo)注需要的度量。設(shè)計(jì)師再也不用手動(dòng)標(biāo)注了，開(kāi)發(fā)人員需要什么信息自己就能查看，開(kāi)發(fā)人員也省心了。

• 全貌面板展示流程，設(shè)計(jì)稿可以隨意拖動(dòng)，還可以自由設(shè)置邏輯線(xiàn)，讓設(shè)計(jì)圖管理更輕松，更清晰。

• 支持圖釘批注，還支持圓形、矩形、直線(xiàn)、箭頭等多樣批注

• 可以彈出放大鏡，查看微小距離的標(biāo)注

其他亮點(diǎn)功能：

• 設(shè)計(jì)規(guī)范自動(dòng)采樣生成，還可分類(lèi)管理、同步應(yīng)用、一鍵導(dǎo)出設(shè)計(jì)風(fēng)格指南

• 自動(dòng)獲取切圖，可下載多個(gè)或全部切圖

• 一鍵查看頁(yè)面中的重復(fù)元素

• 樣式代碼自動(dòng)導(dǎo)出

• 支持多種附件文檔支持，支持任何類(lèi)型文件的上傳共享，并支持多種產(chǎn)品文檔的直接在線(xiàn)預(yù)覽，包括Axure、Justinmind、Mockplus的原型演示、office文檔預(yù)覽、圖片文件預(yù)覽、pdf和文本文件預(yù)覽。

摹客iDoc讓團(tuán)隊(duì)協(xié)作更高效，產(chǎn)品交付更輕松

摹客iDoc的誕生不是偶然，是必然。中國(guó)的設(shè)計(jì)師們需要這樣的一款產(chǎn)品來(lái)解放他們的繁雜的日常，讓他們更加專(zhuān)注于設(shè)計(jì)，而非拘泥于如何完美的呈現(xiàn)交付稿。從產(chǎn)品、設(shè)計(jì)到開(kāi)發(fā)只需要一個(gè)文檔，告別混亂的文檔和各種說(shuō)明，讓團(tuán)隊(duì)協(xié)作更加高效。如果你也是一名設(shè)計(jì)師，那么不凡試試這款產(chǎn)品吧。

【文末福利，見(jiàn)者有份】UI設(shè)計(jì)學(xué)習(xí)的小伙伴有福啦，摹客小伙伴為大家準(zhǔn)備了好禮相送！領(lǐng)獎(jiǎng)姿勢(shì)走起來(lái)：

https://idoc.mockplus.cn/