让工作变得流程规范化，各司其职，应该是每个互联网打工人的心愿。

但现实却是，不少公司现在还是“一人多职”，原本只需敲代码的程序员都有可能从“需求调研、系统设计、落地开发”全流程来跟进；而对于那些原本就没有产品经理、设计师的公司来说，程序员就自然而然成了“顶梁柱”！

对程序员来讲，不要求你的设计水平多么高超，只用能应对紧急情况即可。

况且，拥有设计技能的程序员在职业规划上的选择也会更广阔，独立开发者、全栈工程师、技术设计兼修的产品设计师、创业者……

一旦当你同时掌握了技术和设计两大技能，你就是产品设计的造物主！

那么，该如何简单画一个界面呢？

快速搭建一个原型界面

在之前的流程化工作中，拿到需求后，我们更多考虑的是功能实现，而并非出于对产品整体功能规划的考量。

因此，从产品设计的最初环节——原型设计着手，提前理清业务逻辑与页面布局，这样在提升产品思维的同时，还能锻炼商业思维。

前面我提过，不要求程序员的设计水平，即使画低保真线框也不影响。

之前我尝试过Axure，虽然算是原型设计中元老级别的工具，但因为没有元件库资源，导致在画原型时很耽误时间，需要用基础组件一层层叠加，比较复杂。

目前我常使用的是摹客RP，它预设了丰富的组件和图标，还封装了许多常用组件，拖拽至页面，就能快速搭建原型。再加上强大的交互，无论需要画线框还是高保真设计稿，摹客RP都能简单且快速地产出。

即便在项目周期紧、没太多时间画原型的情况下，你也可以在模板中心找到类似的原型模板，稍做修改即可。

模板中心有各个种类的原型，后台、电商、资讯、健康、社交、官网……种类一应俱全，满足你的各种需要。

完善的流程图模式

作为一名程序员，画流程图可以算是家常便饭了。通过流程图可视化代码，让团队成员能够轻松理解程序并快速识别逻辑中的错误，让团队协作事半功倍。

在摹客RP中，内置了流程图功能，流程图、用例图、泳道图都能轻松绘制。

并且摹客RP绘制流程图最方便的一点在于，原型图与流程图相互结合，无需多个软件来回切换，十分方便。

之前我用Visio画流程图时，经常碰到画着画着就超出边界的情况，甚至还需要在一开始就先估算好大小再动手操作，很是麻烦；但在摹客RP的流程图模式下，页面能无限放大，可以自由绘制。

当原型画完，就要开始做起咱们的老本行“码代码”了。

摹客RP与摹客协作平台打通了联系，将原型稿发布至协作平台后，可以自动生成对应的样式代码，一键复用即可。

而且除了能生成Web端的css代码外，还能生成iOS的Objective-C/Swift、Android的XML。

而且当鼠标hover在某一元素上时，会自动显示它的标注信息，长宽、不透明度、字体字号字重等，帮你从繁琐的标注工作中解放出来，画完原型就能直接上代码。

在摹客协作平台中，可支持自主下载不同平台（iOS/Android/Web）、不同倍率、不同格式（PNG/WebP/SVG/JPG）的切图，满足咱们的自给自足。

对我们而言，使用摹客RP和摹客协作平台就能实现轻量级的产品设计及开发工作。以后无论是公司的紧急需求，还是接外包项目，都能自己轻松搞定，无需外援帮助！

最后，摹客RP链接放这里了，大家可以都来体验一下。提升自己的能力天花板，从深入了解产品设计的全流程开始，一定没错！