说起来，平时主要就是写代码，跟设计那块儿，八竿子打不着。我们公司，之前做项目，前端设计图都是设计师出了PS稿或者AI稿，然后丢给前端切图、写样式，再由我们后端去搭架子、写逻辑。这个流程，也不是说不就是有时候改动起来特别麻烦。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.icu
有一次，一个紧急的项目下来，时间特别赶。产品经理那边急着要一个能动的“样子”，不是静态的图，而是点一点就能看到效果的那种。设计师，手头活儿又多，根本排不上。我们这些后端出身的，对“设计”这玩意儿，就像看天书，根本不知道怎么捣鼓。
当时就有点犯愁，总不能什么都等着别人？就想着有没有什么工具，能让我们这些“糙老爷们”也能上手，快速地把一些想法变成能跑的页面流。
我当时就到处瞎琢磨，上网搜、问同事。有人提Sketch，有人说Figma。有点儿习惯Adobe家的东西，毕竟以前也偶尔用用PS裁剪个图啥的。偶然间看到Adobe家出了个叫XD的，听名字就觉得是搞UI/UX这块的，而且还带着“CC”后缀，感觉应该跟其他Adobe软件能打通，想着也许能方便点儿。
动手前的琢磨和试探
我这人做事情，不喜欢一上来就买全套，先找了个免费试用版。
下载安装XD挺方便的，就直接从Adobe官网搞下来，一路“下一步”就完事儿了。打开一看，界面挺干净，没那么多花里胡哨的按钮，感觉比PS这种老牌的“全能手”要简洁得多。当时心里就想，这东西，没准儿真能给新手留条活路。
刚开始我就是瞎点，摸索。跟学开车一样，先启动，然后挂档，看哪个按钮是干啥的。它那个界面，左边是工具栏，右边是属性面板，中间一大块是工作区域。这点布局跟其他设计软件差不多，算是有点基础。
真正的上手历程——从零开始瞎鼓捣
-
第一个画板：我先是新建了一个“画板”，就像在白纸上画画一样。XD里面默认有很多手机、平板、网页的尺寸，直接选一个就行，省得自己去记那些像素。
-
画几个框框圆圆：然后就拿起左边的那些工具，画矩形、圆形、文本框。这跟Office里的画图功能差不多，拖拽就能画出来，还能改颜色、描边、加阴影，全都是可视化操作。我当时就是想着，先把自己脑子里的那个“页面”样子，用这些基本图形堆出来。
-
写点字：文本工具也简单，点击、输入，然后右边属性面板调字体、大小、颜色，跟Word差不多。我把要展示的功能名称、按钮文字都写上去了。
-
重点来了——连线做原型：这个是XD最让我惊喜的地方！它上面有个“原型”模式。点一下切换过去，你画的每个“元素”上面就会出现一个箭头。你只要把这个箭头从一个按钮拖到另一个页面，就相当于告诉XD：“用户点击这个按钮，就会跳到那个页面去！” 还有什么“轻击”、“滑动”这些交互方式，都可以选。我第一次把几个页面连起来，一点击播放按钮，真的能像手机APP一样点来点去的时候，那感觉简直了，成就感爆棚！
-
组件复用省力气：后来发现它还有一个“组件”功能。比如我画了一个导航栏，或者一个按钮样式，我可以把它变成组件。以后再要用，直接拖出来就行，改了一个，其他所有用到的地方都会跟着变。这下子，效率直接提上去了，不用一个一个去复制粘贴、去改。
-
搞定后的分享：做完了，点击右上角的分享按钮，可以生成一个链接。把这个链接发给产品经理，他们直接在浏览器里就能打开看，还能模拟操作。比以前导出各种静态图，然后邮件发来发去，方便太多了。
心得体会——XD让我省了多少事儿
通过这段时间的瞎折腾，我发现XD这玩意儿，对我们这种不太懂设计，但又需要快速表达设计思路的人来说，简直是福音。它没有PS那么复杂的功能，也没有AI那么多的画板模式，它就是专注于UI/UX的原型设计。工具简洁，操作直观，很快就能上手。
以前遇到那种紧急要一个“能看”的东西，我可能得花半天时间去手绘草图，或者用PPT勉强凑合。现在有了XD，一两个小时就能把一个基本的页面流程搞出来，而且看起来还挺像那么回事儿。最主要的是，能动起来，产品的同事看了也直观，方便快速迭代和反馈。
给想学的新手的几句大白话
如果你跟我一样，是个代码狗，或者不是专业设计师，但平时工作学习中，偶尔需要自己画画界面、做做原型来表达想法的，我真的推荐你试试Adobe XD。别怕自己没基础，这东西就是为我们这种“非专业”人士准备的。
上手就那几步：
先去官网下载个免费版用用，打开后别急，左边工具栏的形状、文字、画板工具，你挨个点点试试看。
然后关键是那个“原型”模式，把你的页面元素之间连起来，试试看点击跳转的效果。
多练习，多琢磨，很快你就能用它快速把你的脑子里的想法“画”出来，而且还能让它“动”起来。比你手绘草图或者用其他复杂软件瞎搞，省心省力多了。