1. UI設計稿交付給前端開發應該是什麼樣子的
最好的肯定是同步的設計稿，不僅能真實展示UI設計稿，還能解放設計師！
一個很方便的同步設計稿方式是，在sketch里做完設計後，可以用墨刀給sketch設計稿做自動標注，分享鏈接給開發哥哥，他們就可以查看標注了～
操作辦法：下載「墨刀sketch插件」並安裝，在sketch里選擇頁面導出到墨刀項目里，點擊「分享」獲取分享鏈接，發給開發，他們就能在「標注」處查看標注了。
這是我自己做一個設計稿分享給前端的效果圖：
2. UI設計切圖後給前端工程師與設計稿不符
這是前端問題，尺寸沒做好，你可以給他標注尺寸，還有就是安卓系統尺寸太多，前端沒有做好匹配，有就是兼容問題，估計你那前端是否實習生，
3. UI把圖做好之後是怎樣跟前端交接的
首先，UI和前端之間要有一個共同的目標的前提下溝通，如果目標不一致，或沒有目標，那就沒辦法溝通。
一般在真正的代碼開發進行之前，前端期望設計給的東西有：
1. 1份jpg文件: 里邊有各個psd的動作分解圖，包括頁面邏輯，或交互分解。設計師放成這樣的目的在於在做設計時方便的拷貝，但對開發人員來說，如果分級過於隱藏就會漏掉某個部分的開發。
2. 1份psd文件: 一份好的psd文件是分層清晰，設計規范的文件。
3. 1份需求文檔: 需求文檔是對當前開發功能的基礎介紹或邏輯詳細描述。
4. 1份原型文檔: 原型設計文檔一般是由產品經理對最初功能設想的一份粗稿，這份稿只是對布局或交互做簡單的設計，需要經過設計進行藝術的加工之後，才成為一個可以呈現給用戶的完整界面。
當然這些所有的結果，需要經過層層開會審核，徵得各個項目組leader的同意之後通過郵件的方式發送給各個成員，最粗笨的辦法就是放在區域網的共享地址可以去拿psd文件。
4. 微信小程序ui要怎麼切圖給程序
1、首先打開手機，然後在手機桌面中點擊登錄微信。
5. UI中的「切圖」是什麼意思為什麼要切圖
切圖是設計師交付給開發的產物之一，設計稿完成後，設計師需要將其切成便於製作成頁面的圖片。但因為開發經常需要不同平台不同尺寸的切圖，如果全部由UI來做，不僅費時費力，可能還會因為細微的差距造成開發不能很好的還原設計稿。
所以可以用摹客之類的專業工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記，上傳至摹客後，開發就可以自主下載不同平台不同尺寸的切圖和使用了。
(5)ui切圖給前端擴展閱讀：
切圖用於完成html+css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具 把自己所需的切成一張張小圖，然後前端開發用DIV+CSS完成靜態頁面書寫，完成CSS布局。
切圖大家都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，首先處理的是什麼類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網站或電商網站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。
6. 為什麼UI要給前端多個不同尺寸的圖片多個不同尺寸的圖片有什麼用如何使用
用來匹配不同尺寸的手機的
因為不同尺寸手機的解析度和DPI均不一樣
為此UI專門出了多個不同尺寸的圖片，以達到能在不同手機上視覺效果一致
7. 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
8. ui切圖怎麼命名給前端
1、所有命名全部為小寫英文字母
原因是開發小哥哥的代碼裡面全是小寫的英文字母，如何切圖命名成中文的話，會導致開發小哥哥將命名全部更改，這樣會耽誤產品開發的進度。
2、所有命名不得出現大寫以及中文和空格或其他符號，單詞之間用_隔開
切圖格式：Png格式
通用切片命名格式：組件_類別_功能_狀態@2x.png
舉例：
[email protected]（中文對應的是：標簽欄_圖標_主頁_默認@2x.png）
1.工程師在實現我們效果圖的過程中，需要計算好每一個元素的位置，然後再調用我們切好的圖進行填充，那麼在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求；
2.切圖輸出應該盡可能的降低工程師的開發工作量，避免因切圖輸出而導致的不必要的工作量，養成良好的命名習慣，比如可以利用版本命名，亦或時間命名都可以更清晰地標明。
3.一個團隊之間應該統一標准，制定並遵循規范，這樣不管是後期版本的跟新迭代或者是設計師之間的交接，都會方便快捷很多。
9. ui設計師怎麼切圖給工程師
把UI設計的界面中的圖標，照片等前端無法直接用代碼實現的切圖給工程師，且切圖的時候盡量緊貼要切圖的圖標圖片去切。