‘壹’ 前端拿到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。
‘贰’ UI设计切图后给前端工程师与设计稿不符
这是前端问题，尺寸没做好，你可以给他标注尺寸，还有就是安卓系统尺寸太多，前端没有做好匹配，有就是兼容问题，估计你那前端是否实习生，
‘叁’ UI设计稿交付给前端开发应该是什么样子的
对于互相比较了解的团队的话，UI设计交付给前端开发的稿件应该具有清晰明细的结构和分层分组，图层按整体版面命上语义话的图层名称。
如下图所示：
对于初次磨合的团队的话，在充分沟通的前题下还应该在设计稿中进行字体间距颜色代码鼠标移入状态等细节的标注。
以上就是TOPVE唯艺互动对于UI设计稿交付给前端开发应该是什么样子的理解，希望能给你带来帮助。
‘肆’ 为什么UI要给前端多个不同尺寸的图片多个不同尺寸的图片有什么用如何使用
用来匹配不同尺寸的手机的
因为不同尺寸手机的分辨率和DPI均不一样
为此UI专门出了多个不同尺寸的图片，以达到能在不同手机上视觉效果一致
‘伍’ ui设计banner图怎么给前端
banana图直接将原图给前端，更新到网站就可以了，这个没有什么难的，只要图片是按照要求的尺寸和策划就好了。
‘陆’ UI设计稿交付给前端开发应该是什么样子的
最好的肯定是同步的设计稿，不仅能真实展示UI设计稿，还能解放设计师！
一个很方便的同步设计稿方式是，在sketch里做完设计后，可以用墨刀给sketch设计稿做自动标注，分享链接给开发哥哥，他们就可以查看标注了～
操作办法：下载“墨刀sketch插件”并安装，在sketch里选择页面导出到墨刀项目里，点击“分享”获取分享链接，发给开发，他们就能在“标注”处查看标注了。
这是我自己做一个设计稿分享给前端的效果图：
‘柒’ ui切图怎么命名给前端
1、所有命名全部为小写英文字母
原因是开发小哥哥的代码里面全是小写的英文字母，如何切图命名成中文的话，会导致开发小哥哥将命名全部更改，这样会耽误产品开发的进度。
2、所有命名不得出现大写以及中文和空格或其他符号，单词之间用_隔开
切图格式：Png格式
通用切片命名格式：组件_类别_功能_状态@2x.png
举例：
[email protected]（中文对应的是：标签栏_图标_主页_默认@2x.png）
1.工程师在实现我们效果图的过程中，需要计算好每一个元素的位置，然后再调用我们切好的图进行填充，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求；
2.切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量，养成良好的命名习惯，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。
3.一个团队之间应该统一标准，制定并遵循规范，这样不管是后期版本的跟新迭代或者是设计师之间的交接，都会方便快捷很多。
‘捌’ UI把图做好之后是怎样跟前端交接的
首先，UI和前端之间要有一个共同的目标的前提下沟通，如果目标不一致，或没有目标，那就没办法沟通。
一般在真正的代码开发进行之前，前端期望设计给的东西有：
1. 1份jpg文件: 里边有各个psd的动作分解图，包括页面逻辑，或交互分解。设计师放成这样的目的在于在做设计时方便的拷贝，但对开发人员来说，如果分级过于隐藏就会漏掉某个部分的开发。
2. 1份psd文件: 一份好的psd文件是分层清晰，设计规范的文件。
3. 1份需求文档: 需求文档是对当前开发功能的基础介绍或逻辑详细描述。
4. 1份原型文档: 原型设计文档一般是由产品经理对最初功能设想的一份粗稿，这份稿只是对布局或交互做简单的设计，需要经过设计进行艺术的加工之后，才成为一个可以呈现给用户的完整界面。
当然这些所有的结果，需要经过层层开会审核，征得各个项目组leader的同意之后通过邮件的方式发送给各个成员，最粗笨的办法就是放在局域网的共享地址可以去拿psd文件。
‘玖’ 为什么ui要用2倍图给前端
ui图文设计师以pt为单位的，pt是一种相对尺寸。
所以在切图配合前端的时候，会有一倍图，二倍图，三倍图，不同的图片尺寸对应的设备尺寸，分辨率也不一样。目前的话，一倍图基本上很少用，二倍图用的比较多，三倍图用于苹果plus。
前端搭建界面时，通常只会规定横向尺寸。也就是说宽度是自变量，高度是因变量。因为用户的屏幕/窗口尺寸是无法预期的，哪怕都是手机，型号也多到数不清。要让一款产品能够在所有型号的硬件上展示，前端开发时不可能设置一个固定的界面尺寸。
‘拾’ 前端开发过程中，ui给一个图，下一步怎么做
ui给的图就是你要实现的页面内容和效果。就是你用你的前端技术，开发出来一个跟图片一样的网页。