正文

ui設(shè)計師怎么切圖給工程師（ui設(shè)計師如何切圖）

發(fā)布時間：2023-04-28 02:09:32 稿源：創(chuàng)意嶺閱讀： 99

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計師怎么切圖給工程師的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、UI設(shè)計中，有哪些值得關(guān)注的切圖規(guī)范?
2、UI設(shè)計切圖
3、UI設(shè)計的全工作流程是怎樣的？
4、UI設(shè)計切圖問題

ui設(shè)計師怎么切圖給工程師（ui設(shè)計師如何切圖）

一、UI設(shè)計中，有哪些值得關(guān)注的切圖規(guī)范?

1.為了提升APP使用速度，盡量降低圖片文件大小

為了提升APP使用速度，盡量降低圖片文件大小，也就是說，圖片切圖一般情況下文件大小都是相對較大，不利于用戶在使用app過程中加載頁面，所以，UI設(shè)計師要盡量壓低圖片文件的大小，畢竟在切圖資源輸出中圖標(biāo)切圖輸出是很重要的部分，這一點(diǎn)希望大家能夠明白。

2.可點(diǎn)擊部件應(yīng)當(dāng)注意其點(diǎn)擊區(qū)域不小于88px

早在人機(jī)工程學(xué)的研究中曾得出結(jié)論，認(rèn)為人類舒適的觸擊范圍需在7-9mm的大小。所以在ios官方的空間尺寸也經(jīng)常出現(xiàn)88px的數(shù)值，比如菜單欄的高度便是88px。因此，設(shè)計師系要注意，在圖標(biāo)設(shè)計中可點(diǎn)擊部件應(yīng)當(dāng)注意其點(diǎn)擊區(qū)域不小于88px，這對于圖標(biāo)設(shè)計來說很關(guān)鍵。

3.可點(diǎn)擊部件要把相關(guān)狀態(tài)都切圖輸出，比如正常狀態(tài)、點(diǎn)擊狀態(tài)

在切圖過程中不僅要輸出正常狀態(tài)的切圖，更要注意不要遺漏其他狀態(tài)的切圖。這個也是設(shè)計師經(jīng)常會出現(xiàn)的失誤，比如在按鈕切圖的過程中可能會忽略點(diǎn)擊切圖的狀態(tài)。所以設(shè)計師在做設(shè)計圖是最好盡量把頁面中會出現(xiàn)的各種狀態(tài)展示出來，避免后期切圖的時候遺漏狀態(tài)。

以上是環(huán)球青藤小編整理的UI設(shè)計切圖規(guī)范的相關(guān)內(nèi)容，希望對各位小伙伴們有所幫助，更多UI設(shè)計相關(guān)信息盡在本平臺，一起來看看吧!

二、UI設(shè)計切圖

常用的切圖工具一般有 Sketch、PS和XD。這三個都蠻好用的。如果你需要團(tuán)隊(duì)協(xié)作的話，可以使用摹客在線協(xié)作，它可通過插件在Sketch、PS和XD中進(jìn)行切圖并上傳至摹客，一鍵下載全部切圖。通過插件，可以在Sketch、PS和XD中進(jìn)行切圖，并上傳到摹客中。

三、UI設(shè)計的全工作流程是怎樣的？

作為一個專業(yè)UI設(shè)計師，不僅僅要了解整個產(chǎn)品在UI界面設(shè)計，交互設(shè)計中的工作流程，更需要了解整個產(chǎn)品從需求提出到產(chǎn)品上線的整個工作流程。

以下是互聯(lián)網(wǎng)產(chǎn)品各部門的工作分配及流程：

從圖中可以看到，一個互聯(lián)網(wǎng)產(chǎn)品從策劃到最后的上線營銷，都需要由不同的部門分擔(dān)其責(zé)，而每個部門中，根據(jù)崗位的劃分，在細(xì)分到每個工種上來，所以一個互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程，并不是單個的人，或者個別的部門可以實(shí)現(xiàn)完成的，它是一個完整的團(tuán)隊(duì)通力合作的產(chǎn)物。部門與部門，崗位與崗位相互協(xié)作配合，才會出色高效的完成項(xiàng)目。

一般互聯(lián)網(wǎng)公司會有幾個部門劃分：

1、產(chǎn)品部門（產(chǎn)品經(jīng)理、產(chǎn)品專員）

2、設(shè)計部門（GUI設(shè)計師、交互設(shè)計師、前端工程師）

3、研發(fā)部門（構(gòu)架工程師、程序開發(fā)）

4、測試部門（測試專員）

5、市場部門（銷售、渠道、公關(guān)、品牌）

6、運(yùn)營部門（客服、運(yùn)維）

各部門的工作職責(zé)如下：

產(chǎn)品部門：負(fù)責(zé)產(chǎn)品調(diào)研，產(chǎn)品方案策劃，產(chǎn)品原型圖設(shè)計，和技術(shù)開發(fā)對接，后續(xù)可能和運(yùn)營部門對接。

設(shè)計部門：負(fù)責(zé)產(chǎn)品視覺設(shè)計，交互設(shè)計，前端布局。有一些公司會把前端這一塊劃分到開發(fā)部門，理由是前端的工作和程序開發(fā)一樣，都是碼代碼，設(shè)計部門就是單純的只管視覺設(shè)計方面。但是這種說法其實(shí)不太正確，前端的代碼實(shí)現(xiàn)和后臺的程序開發(fā)，雖然都是碼代碼，但是運(yùn)用的技術(shù)是不一樣的，實(shí)現(xiàn)的功能和效果也是不相同的，所以前端工程師劃分到設(shè)計部門會更合理一些。

研發(fā)部門：產(chǎn)品構(gòu)架設(shè)計，數(shù)據(jù)庫設(shè)計，前后臺編碼設(shè)計，后期的運(yùn)維，網(wǎng)絡(luò)安全。

測試部門：測試程序中的bug，編寫測試計劃、測試用例及測試報告等文檔，優(yōu)化流程。

市場部門：產(chǎn)品企劃策略，促銷活動的策劃及組織，品牌規(guī)劃和品牌的形象建設(shè)，市場廣告推廣活動和公關(guān)活動。

運(yùn)營部門： SEO/SEM優(yōu)化推廣，平臺活動策劃（線上線下），廣告投放，客戶關(guān)系管理，數(shù)據(jù)分析。

設(shè)計部門的崗位劃分通常有UI設(shè)計師、交互設(shè)計師、前端工程師，小型公司崗位劃分不完善，會把交互設(shè)計師的工作（交互流程、交互線框、交互動效）交由產(chǎn)品人員來完成，以下梳理出UI設(shè)計師參與和需完成的流程：

一、需求梳理、分析

發(fā)生在產(chǎn)品開發(fā)前，以APP產(chǎn)品為例，會對市場和用戶進(jìn)行調(diào)研分析：市場定位（用戶定位、產(chǎn)品定位、技術(shù)定位），市場需求分析（目標(biāo)客戶群分析、競爭對手分析）。在前期的產(chǎn)品需求分析會議中，UI設(shè)計、技術(shù)工程師都會參與。此過程UI設(shè)計師了解清晰的用戶定位，產(chǎn)品定位，競爭對手分析，為后期的素材收集和風(fēng)格把控做準(zhǔn)備。

在這個過程中會根據(jù)提煉的真實(shí)用戶需求來確定產(chǎn)品需求，產(chǎn)品經(jīng)理將根據(jù)溝通中的相關(guān)資料的word、ppt、jpg等等東西翻譯成邏輯語言，最簡單的就是產(chǎn)出一張產(chǎn)品功能腦圖或者一份功能列表。

產(chǎn)品功能腦圖：

產(chǎn)品功能列表：

大家開始討論用戶體驗(yàn)流程，在白板上邊畫流程邊添加粗略的UI元素。之后產(chǎn)品經(jīng)理會在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、UI設(shè)計師、包括技術(shù)工程師會一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。此環(huán)節(jié)要敲定userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個主要界面。之后產(chǎn)品經(jīng)理繪制紙質(zhì)版低保真交互原型圖（可借用專業(yè)的模板本和工具）

二、關(guān)鍵界面線框圖（可不帶交互功能）

初步產(chǎn)品功能需求梳理清楚之后，產(chǎn)品經(jīng)理持續(xù)跟進(jìn)，反復(fù)溝通，在確定的用戶流程中，選出幾個關(guān)鍵的，有代表性的步驟，做1:1細(xì)化線框圖。此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。

三、關(guān)鍵界面視覺設(shè)計

此環(huán)節(jié)UI設(shè)計師會做關(guān)鍵界面的整體視覺設(shè)計，嘗試不同風(fēng)格、顏色的搭配，UI元素的運(yùn)用，最終確定產(chǎn)品的視覺設(shè)計風(fēng)格。

四、全部界面線框圖（帶交互功能）

產(chǎn)品經(jīng)理完成1:1帶交互和流程的全部界面線框圖設(shè)計并確認(rèn)。

界面線框圖（為交互功能添加釋義和說明。）

線框流程圖

五、全部界面視覺設(shè)計

UI設(shè)計師輸出全部界面的視覺設(shè)計圖，并確認(rèn)。

六、界面標(biāo)注、切圖

1、在確認(rèn)全部界面視覺稿以后，首先對每個界面進(jìn)行標(biāo)注，標(biāo)注圖移交前端工程師。

標(biāo)注圖（像素大廚、藍(lán)湖等軟件）

2、界面切圖，移交前端工程師

切圖文件夾

切圖文件

至此，UI的工作流程才算完成，但是現(xiàn)實(shí)項(xiàng)目中，很多環(huán)節(jié)是一個交替迭代的過程，需要不停地修改和優(yōu)化，包括整個流程進(jìn)入到開發(fā)以后，也會需要UI設(shè)計師協(xié)同調(diào)整，所以UI設(shè)計師的工作，不單單是只完成單純的界面視覺設(shè)計，前面包括用戶定位，線框繪制，流程梳理，交互實(shí)現(xiàn)，后面包括前端布局，很多環(huán)節(jié)，UI設(shè)計師都必須參與進(jìn)來，只有多角度地了解項(xiàng)目，了解各崗位的工作流程，才能做出符合市場需求，符合用戶需求的產(chǎn)品。

四、UI設(shè)計切圖問題

Create games in the way of samurai.將圖片邊界設(shè)大一個像素。如果用的是類似TexturePacker的工具可以將extrude設(shè)為1。這樣就可以避免黑線問題。

以上就是關(guān)于ui設(shè)計師怎么切圖給工程師相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。