你真的会做交付文档了吗?
毫无疑问,设计人员和开发人员之间存在着不可避免的设计交付工作,设计和开发的沟通优劣会直接影响一款产品的好坏。完美的设计交付必然是产品迈向成功的一个里程碑,然而在实际的工作中,设计和开发的交付却存在很大问题,沟通难、协同难、设计意图被误解的问题困扰着很多设计团队。
但其实,这些问题是可以很好解决的,我们一起来看看设计和开发之间究竟该如何协作。
1. 邀请开发人员参与设计流程
在项目最初就该意识到这一点,设计需要开发的加入。想想你的团队,是不是也是这样呢?项目的设计往往缺乏开发人员的参与,这就像是在前进的路上直接走了翻墙的捷径路子,埋下了一颗苦果。
为什么开发人员需要参与设计?其实很简单,团队需要更多的人(参与产品却又专业不一样的人员)来确认设计的可行性问题以及探讨潜在的问题。要确定设计的可行性以及产品的发展趋势并不容易,仅靠单个部门就能全权决定风险太大。
比如说,有时你在其他地方看到的那种复杂的交互元素其实也就是开源库的一部分,而且实行起来并没有看上去的那么复杂。但往往很多时候,一些看起来很简单的东西反而会让这个整个项目从头开始,因为调子可能是错的。开发人员的加入可以很大程度的解决产品设计定调误区的问题。
此外,开发人员参与早期设计,还可以在创建设计时就开发并使用一些设计元素。这个也可以看做是一种最早期的反馈,有利于开发理解设计,并发现真正有价值的东西以及潜在的问题。
2. 使用正确的工具
能百分百做到“浏览器兼容性”的工具其实并不多,为了提高效率,建议使用专门的工具,比如网页设计,就可以选择诸如Adobe Illustrator或InDesign等工具,它们也是许多设计师在使用过程中感到最舒服的工具,但这些工具并不是为了创建Web用户界面,建议不要以这些格式向开发人员提供文件,而是提交Adobe Photoshop或Sketch文件格式(开发人员更倾向于你使用后者)。
3. 进行良好的档案管理
选择了正确的工具后就进入最要紧的设计环节了。对于开发人员而言,解码设计师的设计文件系统并不是一件好玩或者轻松的事情,所以一定要使用常用技术和文件管理,以减小设计师和开发之间的“语言差异”。
就目前来看,使用Photoshop做设计还是最大的一个现状,因此使用无损技术(如图层样式)非常重要。(无损文件可以让开发人员在不更改原始信息或图层的情况下进行更改。)
小Tips:
要记得创建图层蒙版,有利于单独编辑或变换形状和蒙版。
将矢量元素导入为智能对象,有利于维护原始文件的属性。
4. 合理使用设计插件
用于Photoshop和Sketch的设计插件可以增强设计工具的功能,同时使设计开发过程更加顺畅。现在的设计插件可以说是数不胜数,选择太多反而容易不知道如何选择?别急,这里有几款精选插件:
Photoshop插件:
Duplllicator:克隆图层或组并支持移动。(非常适合制作小元素或按钮的副本)
GuideGuide:这个小工具可以让你更轻松地使用设计指南,并从过程中消除一些不便的地方。
Perspective Mockups:此工具可以更改透视图并在实际界面中查看Photoshop设计。
PSD Cleaner:如果缺少文件管理,此工具可以帮助切换到之前清理过文件。
IDoc:支持智能标注,一键切图,交互原型。
Sketch插件:
Dynamic Button::可以为随内容更改而变化的按钮创建自动换行和样式。
Sketch Measure::此工具可以以快速且易于管理的方式将你的设计转换为样式指南。
Sketch Palettes:可用于保存和加载颜色的调色板管理器。
Sketch Toolbox:号称Sketch插件必备。
IDoc:支持智能标注,一键切图,交互原型。
5. 开发和使用网格
现在已经有很多不同类型的网格,网格是一种通用语言,可帮助设计和开发人员高效交流,比如空间,透视和宽高比如何设置和显示。
建议设计中加入网格,这里推荐Tuts +类型,是我比较倾向的。
6. 组织文件
设计交付最重要的目的之一是让开发人员能够理解设计者的设计意图。良好的文件管理就很有必要了,即将文件夹结构组织成具有描述性名称的逻辑子文件夹和图层。 (如果命名为文件夹1,图层1其实是没有任何作用的,必须以其中包含的内容标记命名,例如Home Button。)在分组文件时考虑HTML结构,这会使设计稿看起来更合乎逻辑。
记住:每一个图层都要命名。
颜色代码、图层名称和文件夹添加前缀以暗示交互性,例如悬停状态。这个视觉提示对开发人员非常有用,因为开发要筛选数百或更多的图层,很容易错过某些东西(特别是隐藏层)。
最后,记得删除未使用的图层。
7. 准备交互元素
如果你认为你可以直接向开发人员提供PSD文件,那就错了。每个图像,插图,字体,颜色样本包括图标也需要准备好。如果没有这些信息,你的设计稿一定会被退回来。
单独整理所有高分辨率图像文件,并以3倍于你期望的分辨率注明。
字体也不要忘记。虽然你可以在技术上使用任何具有Web使用许可证的字体,但重要的是要认识到字体是一种需要与其他所有内容一起加载的大型文件类型。否则,请考虑使用基于Web的通用工具,如Adobe Typekit或Google Fonts。在Google字体和Typekit之间,你也可以选择数百种高品质字体。
准备一个包含所有已批准副本的单独文档。文本文件可以让你轻松返回并查找某些文本元素,并根据需要进行复制和粘贴。
为开发人员制作PDF证明。开发人员可以打印出来,用于做笔记或在整个过程中进行可视化引用,还有助于确保开发人员看到你的全部设计。(也可以随意做笔记。)
将文件托管在可访问的位置。虽然你可以将所有内容通过电子邮件发送给开发人员,但文件还需要公开出来,以便团队中的每个成员都可以随时访问他们需要的任何内容。可以选择 Dropbox或Google Drive,开放访问权限给团队的所有成员。
以上就是我的一些经验总结,希望大家喜欢。
原文作者:CARRIE COUSINS
原文链接:https://www.secretstache.com/blog/organize-website-design-files/
你真的会做交付文档了吗?相关推荐
- 基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档(上篇)
前言 为什么在开发中,接口文档越来越成为前后端开发人员沟通的枢纽呢? 随着业务的发张,项目越来越多,而对于支撑整个项目架构体系而言,我们对系统业务的水平拆分,垂直分层,让业务系统更加清晰,从而产生一系 ...
- 基于.NetCore3.1搭建项目系列 —— 使用Swagger做Api文档 (下篇)
前言 回顾上一篇文章<使用Swagger做Api文档 >,文中介绍了在.net core 3.1中,利用Swagger轻量级框架,如何引入程序包,配置服务,注册中间件,一步一步的实现,最终 ...
- 软件测试交付物、交付文档、测试产物等如何写?有何依据?模板是是什么?
软件测试交付物.交付文档.测试产物等如何写?有何依据?模板是是什么? 1 前言 2 个人观点 2.1 网上搜索 2.2 参考标准 2.3 标准区别 2.4 标准模板 3 总结 1 前言 这个问题来源于 ...
- ui测试怎么做?依据文档有哪些_微信小程序开发流程有哪些?各个环节注意事项...
微信小程序开发流程有哪些?各个环节注意事项是什么?微信小程序开发有哪些注意事项,开发流程是怎样的?下面就一起来看看吧. 1.微信小程序开发之注册小程序 在开发小程序之前,首先就是要注册一个小程序.不过 ...
- 软件项目开发,交付文档(全)
2019独角兽企业重金招聘Python工程师标准>>> 作为一个软件项目负责人,这些文档的编写是必须懂的 这里列出软件项目开发,交付时文档的文档供大家参考.模板的话需要一个个文档去研 ...
- GUI实战|Python做一个文档图片提取软件
大家好,本文将进一步讲解如何用Python提取PDF与Word中图片,并结合之前讲解过的GUI框架PysimpleGUI,做一个多文件图片提取软件,效果如下: 本文主要将分为以下部分讲解: PDF.W ...
- python可以做表格文档吗_生活中的python-利用python-docx自动生成表格简化工作流程...
因为工作原因,需要经常往两个word模板里填写内容并生成新的word文件,模板大致如下图: 老的工作流程: 打开两个表,在表中对应位置填写个人信息,保存.这样一来,当需要填写的信息比较多的时候,工作就 ...
- 看看XDOC如何做Word文档预览
移动互联网的到来,使得Word文档在移动端的显示成了问题.大家解决方法大概有三种:转换为PDF.用HTML模拟页面效果.纯网页效果. XDOC的用了第三种方式,将word文档实时转换为纯网页,生成的页 ...
- 找到了SOA比赛的最详细文档` 有初赛的具体交付文档等内容`已将DOC文件发到公用邮箱`
搭建SOA梦想,成就校园创新之星 2006"IBM杯"中国高校SOA应用大赛 大赛活动细则 版本:Version 1.2 国际商业机器中国有限公司 2006年04月05日 目录 1 ...
- word巧妙设置页码(做标书文档设置页码必备方法)
我们在做投标书或者文档时需要插入页码,因为投标书有一定的格式,一般在标书的封面及目录都不插入页码,从文档的正文开始插入页码,方法如下: 如果想从文档的第三页开始插入页码,则将光标置于文档第二页的最后 ...
最新文章
- 一篇价值百万的文章:我为什么在22岁辞去年薪150万的工作?
- HTTP协议学习笔记
- android web 打印,Android设备WebView打印Console Log
- bidirectional pathtracing算法学习
- 电商ERP vs.传统ERP,有何不一样?
- 抓取各个浏览器引擎关键字,,百度学术关键字
- Gartner:2022年全球IT支出将超4万亿美元,软件增速最高
- Viewer.js 图片预览插件
- 计算机网络的拓扑结构三种基本型,2018年自考《计算机网络基本原理》试题库四...
- 2018百度之星初赛B轮 p1m2
- Unity3D渲染系列之SkyBox天空盒
- CAD中 OLE不能旋转_AutoCAD中光栅图像和OLE图像,究竟如何选择
- Microsemi Libero使用技巧5——使用FlashPro生成stp程序文件
- 算法7:求用小矩形覆盖大矩形有多少种方式
- 区块链技术指2.3 基于区块链的电子货币
- Ubuntu20.04 安装搜狗拼音
- java计算器实训报告_Java实验报告计算器
- 哪款蓝牙耳机玩吃鸡延迟低?四款低延迟游戏蓝牙耳机推荐
- 如何判断2的n次方?用四种方式来扒一扒。
- python写文件自动换行_python怎么换行继续写脚本
热门文章
- html5断点续传播放视频,HTML5 大文件断点续传完整思路整理
- DFS:拯救少林神棍(Sticks)[四轮剪枝操作]
- verilog源码积累:ram和axi slaver
- Python淘宝商品比价定向爬虫
- 【CVPR 2022】目标检测SOTA:DINO: DETR with Improved DeNoising Anchor Boxes for End-to-End Object Detection
- MyBatis学习笔记三——映射配置文件
- 码住!Elsevier-最全清样/校样(Proof)处理流程
- 组合数学 | 递推关系和母函数
- 持续集成之Jenkins _ 老徐先带你入个门
- 解决MacOs10.15+ shimo 无法正常使用 PPTP协议问题