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标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。