1. 前端拿到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。
2. ui設計師怎麼切圖給工程師
把UI設計的界面中的圖標，照片等前端無法直接用代碼實現的切圖給工程師，且切圖的時候盡量緊貼要切圖的圖標圖片去切。
3. UI設計稿交付給前端開發應該是什麼樣子的
對於互相比較了解的團隊的話，UI設計交付給前端開發的稿件應該具有清晰明細的結構和分層分組，圖層按整體版面命上語義話的圖層名稱。
如下圖所示：
對於初次磨合的團隊的話，在充分溝通的前題下還應該在設計稿中進行字體間距顏色代碼滑鼠移入狀態等細節的標注。
以上就是TOPVE唯藝互動對於UI設計稿交付給前端開發應該是什麼樣子的理解，希望能給你帶來幫助。
4. 為什麼ui要用2倍圖給前端
ui圖文設計師以pt為單位的，pt是一種相對尺寸。
所以在切圖配合前端的時候，會有一倍圖，二倍圖，三倍圖，不同的圖片尺寸對應的設備尺寸，解析度也不一樣。目前的話，一倍圖基本上很少用，二倍圖用的比較多，三倍圖用於蘋果plus。
前端搭建界面時，通常只會規定橫向尺寸。也就是說寬度是自變數，高度是因變數。因為用戶的屏幕/窗口尺寸是無法預期的，哪怕都是手機，型號也多到數不清。要讓一款產品能夠在所有型號的硬體上展示，前端開發時不可能設置一個固定的界面尺寸。
5. UI交互設計和前端是什麼樣的關系，為啥有聽別人說前端也是UI
交互設計和UI設計的關系：
1、交互設計是一種面向目標的設計。所有的工作都是圍繞用戶行為設計的。交互設計人員設計用戶行為，使用戶更方便高效地實現產品業務目標，並獲得愉快的用戶體驗。
ui設計有兩個概念：窄和寬。廣義的概念包含了互動的含義。事實上，UI設計包括圖形設計、網頁設計和移動界面設計，交互是當今設計師的一項重要任務。
2、如果UI設計是通用的，則應該包括原型設計、交互設計和視覺設計。狹義的ui通常只是人們看到的ui可視化設計的最後一部，交互是用戶操作事件的反映。
例如，點擊彈出菜單，瀏覽鏈接就會變成紫色，這是一種非常微妙的互動，但它處處反映用戶體驗。交互設計更多的是關於用戶行為響應的設計、UI可視化設計，以及更多關於界面的靜態設計。
6. UI把圖做好之後是怎樣跟前端交接的
首先，UI和前端之間要有一個共同的目標的前提下溝通，如果目標不一致，或沒有目標，那就沒辦法溝通。
一般在真正的代碼開發進行之前，前端期望設計給的東西有：
1. 1份jpg文件: 里邊有各個psd的動作分解圖，包括頁面邏輯，或交互分解。設計師放成這樣的目的在於在做設計時方便的拷貝，但對開發人員來說，如果分級過於隱藏就會漏掉某個部分的開發。
2. 1份psd文件: 一份好的psd文件是分層清晰，設計規范的文件。
3. 1份需求文檔: 需求文檔是對當前開發功能的基礎介紹或邏輯詳細描述。
4. 1份原型文檔: 原型設計文檔一般是由產品經理對最初功能設想的一份粗稿，這份稿只是對布局或交互做簡單的設計，需要經過設計進行藝術的加工之後，才成為一個可以呈現給用戶的完整界面。
當然這些所有的結果，需要經過層層開會審核，徵得各個項目組leader的同意之後通過郵件的方式發送給各個成員，最粗笨的辦法就是放在區域網的共享地址可以去拿psd文件。
7. UI設計稿交付給前端開發應該是什麼樣子的
最好的肯定是同步的設計稿，不僅能真實展示UI設計稿，還能解放設計師！
一個很方便的同步設計稿方式是，在sketch里做完設計後，可以用墨刀給sketch設計稿做自動標注，分享鏈接給開發哥哥，他們就可以查看標注了～
操作辦法：下載「墨刀sketch插件」並安裝，在sketch里選擇頁面導出到墨刀項目里，點擊「分享」獲取分享鏈接，發給開發，他們就能在「標注」處查看標注了。
這是我自己做一個設計稿分享給前端的效果圖：
8. ui如何與前端對接
ui與前端對接：做ul的其實就做移動端設計的，設計一些移動端頁面，當然也包括ico圖標，手機上用的各種小圖標，logo等，比如一個小刪除按鈕。
前端使用html、css、js等技術開始實現效果圖的頁面，同時需要和後台人員交流為後台數據留下借口和數據填充的區域等，或者獲取後台數據等，這需要和後台人員合作好。
用藍湖一鍵標注，下載不同格式的切圖。還有設計圖邏輯連線、交互說明、分狀態展示、高保真原型製作預覽等功能。對設計圖進行樹狀連線，清晰展示跳轉邏輯。還可在一旁添加細節說明，方便團隊成員的理解。
頭部內容：
這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。
頭部中最常用的標記符是標題標記符和meta標記符，其中標題標記符用於定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用做書簽和收藏清單。