兄die你想和开发做朋友吗？

▲

点击上方蓝字关注「UIHome」

长久以来设计师和开发之间一直有一条看似不可逾越的鸿沟，但今天之后你不但可以跨过这条鸿沟而且还有可能和开发成为兄弟，要不花一个3分钟读读这篇文章？

用开发的思维去做设计

设计师要养成「开发思维」已经是老生常谈的问题，很多时候我们也只是停留在理论基础，并没有很好的把这样的思维运用到实际项目中，那么现在我就举一个简单的例子来告诉大家如何运用开发的思维去做设计。

任务中心就是一个相对来说比较典型的例子，在设计一个任务中心的时候需要设计师较高的逻辑思维能力。

例如上面这个页面，我们在设计类似这样的任务页面时就得考虑用户会产生的几种使用结果，通过这样的结果我们去做相对应的UI设计。

第一是任务进度条的设计，当进度条前进到一个任务节点时，礼物icon应该发生怎样的变化我们得输出不一样的高保真设计图对接开发，这样开发才能在第一时间了解清楚整个任务中心的样式逻辑。

第二是任务列表中任务按钮的状态设计，我们看到「天天领奖」和下面的2个任务的按钮就是应用了不同的颜色和不同的文案作为区分。

第三是「接口数据」的展示设计，比如头部的你本周已经驾到多少天，还有勋章和积分的展示，在设计这些元素时，我们都要考虑数据展示的最大值，根据最大值来定该数据的字体大小，从而保持UI的元素整体性。

学会高效的组件化设计

高效的组件化设计能让你和开发之间节约极大的时间成本。从字体到icon再到控件的引用都可以制定详细的设计规范。

看似复杂的组件化设计，都可以通过Kitchen这款插件在Sketch平台下实现。

在Sketch里你只需安装好Kitchen，然后就可以通过Symbol进行组件化设计十分的方便与快捷。

保持良好的设计习惯

优秀的UI设计师不仅能设计出漂亮的页面更要养成良好的设计习惯，比如对图片资源的命名。

只有通过专业的资源命名，才能让开发节约时间成本，从而快速推进项目的迭代效率。

学会与开发高效协同工作

高效协同的第一步就是要学会一些简单的开发术语，例如下面这个登录页面。

上图就是一个登录页面完整的对接过程，这种「伪代码」的对接方式，能让开发工程师缩短开发的时间成本，也能将PM需要实现的需求一步到位的实现，大大提高了协作的效率。所以在平时的协作过程中，大家可以参考以上开发术语去和工程师高效的沟通。

学会开发术语只是高效协作的第一步，玩转协同工具才能让你的效率更上一层楼，在这里我给大家推荐我目前在用的几个协同平台。

Teambition

首先来介绍一下Teambition，作为国内协同工具的创导者，TB可以说是功不可没，在TB上，你可以根据自己的协同习惯，来定制属于你的协同流程（如下图）。

在上图我们可以看到，TB的协同模式基本覆盖了全行业，不单单是针对互联网人群，不同行业的协同工作流程也会有所不同，正是因为这样，Teambition才会在今天的协同市场上占据了主导地位。

Teambition上手还是比较简单的，具体的使用教程大家可以前往TB的官网https://www.teambition.com 进行学习。我在这里只拿其中一个「产品进展」模块来进行简单的使用阐述。

上图就是「产品进展」模块的协同流程，一个完整的「产品进展」工作流程一共有6步，分别是「产品计划」→「产品设计」→「产品研发」→「产品测试」→「产品发布」，整个协作的流程，各岗位的同学都可以参与到其中，PM同学把PRD撰写完毕之后，提交任务到看板上，紧接着设计同学接到需求之后开始设计工作，UI出图之后就开始把设计图转给研发岗的同学，然后就是QA同学负责测试，最后就是版本的发布。如果在协同过程中，遇到功能的增加或删减，各岗位的同学也能第一时间收到相关的推送。

墨刀

有了Teambition的支撑，接下来就是原型图的输出了，在这里我推荐的是墨刀这个平台。首先墨刀算是国内最早一批做原型协同开发的平台之一，时至今日墨刀在产品原型的协同上可谓是相当的成熟，其次墨刀也拥有和蓝湖上传PSD还有Sketch的功能。

蓝湖

蓝湖想必大家都不陌生，只要你是一个稍微有些经验的设计师，就应该会知道蓝湖，蓝湖的横空出世，可以说是已经（我不敢说彻底）解决了设计师最头疼的标注和适配问题，在蓝湖上一共可以实现3端的代码输出，3端的切图格式输出，设计师只需要通过蓝湖的插件，就能将设计图与切图一块上传至蓝湖供开发人员使用，大大的节省了开发的时间成本。

如果你觉得这些还不够

如果你觉得以上我所说的还不能满足你想和开发做朋友的迫切心里，那么继续往下看。

我们的黑马大佬为了帮大家解决这一大难题，特地上线了一档全新的UI课程。

黑马哥亲授与一对一辅导

新增一线企业资深UXD