UI设计师和前端怎么合作

Question

如题所述

Answer 1

前端工程师需要和美工和后台开发人员进行合作。
1、和美工合作。
美工讲设计好的效果图，一般是一些psd文件给前端工程师，前端工程师根据效果如开始构思如何实现，并且开始使用Photoshop进行切图，切出需要的图片。如果图片有问题或者不好操作的地方还需要美工给出修改。
2、和后台开发人员：
前端使用html、css、js等技术开始实现效果图的页面，同时需要和后台人员交流为后台数据留下借口和数据填充的区域等，或者获取后台数据等，这需要和后台人员合作好。
3、完成项目
最终前端完成页面交给后台，由后台人员填充后台数据，一个完整的工程完成。此时还需要前端和后台人员一起测试，完成数据和前端的良好交互。

Answer 2

作为一名专业的UI设计师，除了需要有极强的设计功底之外，还需要熟悉各种设计规范，标注规范也是其中之一。设计好设计图后，可能需要给前端提供以下几个格式的文件。

(1) 1份jpg文件: 里边有各个psd的动作分解图，包括页面逻辑，或交互分解。设计师放成这样的目的在于在做设计时方便的拷贝，但对开发人员来说，如果分级过于隐藏就会漏掉某个部分的开发。
(2) 1份psd文件: 一份好的psd文件是分层清晰，设计规范的文件。
(3) 1份需求文档: 需求文档是对当前开发功能的基础介绍或逻辑详细描述。
(4) 1份原型文档: 原型设计文档一般是由产品经理对最初功能设想的一份粗稿，这份稿只是对布局或交互做简单的设计，需要经过设计进行艺术的加工之后，才成为一个可以呈现给用户的完整界面。
当然这些所有的结果，需要经过层层开会审核，征得各个项目组领的同意之后通过邮件的方式发送给各个成员，也可以放在局域网的共享地址里。
对于页面的标注有很多细节部分：
标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。
在进行标注时，首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注
文字，需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。
关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。
间距
有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解，尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。
颜色
需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项，切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。
尺寸
我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是：有圆角的地方，需要将圆角半径标出。
对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如划过状态、激活状态、选中状态，失效状态等等，如果你不标明，开会就会默认没有这些效果。
一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。
很多没有经验的设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小，如果你将这个按钮的宽度和高度都标注出来。
开发就会将这个按钮的大小写死，一旦遇到屏幕较宽的时候，按钮还是固定大小，就会影响视觉效果。
所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。本回答被网友采纳

Answer 3

用蓝湖一键标注，下载不同格式的切图。

还有设计图逻辑连线、交互说明、分状态展示、高保真原型制作预览等功能。

对设计图进行树状连线，清晰展示跳转逻辑。

还可在一旁添加细节说明，方便团队成员的理解。

Answer 4

可以试试协作工具， 建议试试蓝湖

Answer 5

通过第三方设计工具实现协作，比如蓝湖，上传设计图之后完成标注和切图，前端同事用起来很方便。