当前位置:首页 » 网页前端 » ui切图给前端
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

ui切图给前端

发布时间: 2022-07-14 00:49:39

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设计的界面中的图标,照片等前端无法直接用代码实现的切图给工程师,且切图的时候尽量紧贴要切图的图标图片去切。