Vue.js前端工程师提出新UI开发方法论，要促进设计师与工程师更紧密的协作

使用者界面设计（User Interface, UI）的开源框架Vue.js，其核心团队成员赵锦江，日前在一场活动中提出实验性的UI设计方法“Atomic Design+”，是基于目前主流的方法论Atomic Design，重新诠释前端开发中，由小元件到整体页面呈现的分层设计架构，目的要让UI设计师与前端工程师能更紧密的协同合作，而非现今常见的作业流程中，由设计师先画好整体UI，再交由工程师来开发的情景。

Atomic Design是现今主流的方法论，将网页设计架构，由小到大分层为原子（Atoms）、分子（molecules）、有机体（organisms）、样板（templates）与页面（pages）。若要更具体对应到设计流程，不可拆分的原子等同于基本的HTML元素，如表单标签、输入框、按钮等；分子则是由多个原子组成，如前述元素组合成搜寻字段；而多个分子能合成有机体，如网页最上方的header，通常包括品牌logo、主导览列表和搜索字段等；多个有机体又能构成网页的样板，最后再加入网站内容、动画进行微调，来完成整个网站的开发。

不过，赵锦江认为，设计网站的最小单位应该改为字段（field）更恰当，“既然UI就是为了展示信息，那我们不妨从提供讯息的角度，以网页中的每个功能作为原子的概念。”由于字段是能体现功能的最小单位，所以在新的Atomic Design+架构中，设计流程架构改为从字段开始，一层层往上组合成群组（groups）、卡片（cards）、区块（sections）、页面（pages），以及App应用程序。

赵锦江提到，新架构是将基本元素融合到每一层中，如颜色与行距（color & spacing）、字型样式（typography）、动画（animations）、导航（navigations）、装饰（decorations），在设计最小单位时就要纳入考量，并在往后的每一层中体现连贯的风格。比如说，在设计搜寻字段时就要考量到区块颜色、字型、图样风格等，在设计主导览列表时也要一并考虑下拉式页面的动画风格等。

因此，赵锦江认为理想的开发情境，是由设计师与工程师协同合作，从底层开始就相互讨论，一层开发完再到下一层，来减少UI设计与最终网页呈现的落差，以及工程师开发完成后必须不断修改的问题。“如果这种方法能实现，不仅每一层的协作方式，甚至每个人需要具备的能力、整个团队结构都会产生改变。”

尤其，现在设计师与工程师大多为分开独立作业，未来若能具体推广这个开发方法，“也许设计团队跟前端团队可能重新回到一个大团队。”目前，赵锦江的团队也尝试用此方法用来开发网页。

除了新兴设计工具走向线上协作与云端管理，UI开发也更重视设计师与工程师的双向沟通

赵锦江在网络上昵称“勾三股四”，是一名网页前端开发工程师，从2007年毕业于中国西安西北工业大学软件工程学系，就从事前端工作至今，先后曾在傲游浏览器（Maxthon）、手机淘宝和阿里云工作，同时也是前端设计框架Vue.js核心团队成员；而他在网络上也不吝于分享网页开发技术与经验，其GitHub账号有上千人追踪，微博也累积上万名粉丝。

“身为前端工程师，很重要的职责之一，就是把设计师的想法变成现实。”赵锦江在活动中表示，现行UI设计工具实际应用在开发过程中，会遇到一些无法克服的问题，这也是现今有越来越多UI设计软件兴起的原因，除了常见的Photoshop之外，也出现了如Sketch、InVision、Marvel、Axure、Adobe XD、Zeplin等软件，能让设计师依据不同设计需求去挑选适合的软件来作业。

对此，赵锦江也整理出开发UI设计图档最常碰到的几个问题。比如说，设计工具的自动化丈量，理论上已经标注非常详细，但是，却不一定会符合前端工程师的需求，尤其图片与文字都有外框，是应该采用文字高度与边框的距离，还是采用文字框与边框的距离？就是在开发过程需要厘清的。

又或者，许多设计师喜欢用色块加上透明图层来显示颜色，但工程师却不一定能运用工具，直接量测到图层叠加后的颜色，反而需要透过截图才能测量，这就是UI设计工具不够友善的地方。

还有，在Bootstrap的数据库中具备所有文字标题的大小（heading level），但图片本身却有很多种理解方式，除了字号固定之外，每种heading level的排距，是要算上方heading level的下边距，还是下方heading level的上边距？还是各占一半，或以某种比例分配？那分配好之后，又是属于内边距还是外边距？这些看似微不足道的细节，决定了开发过程是否能顺畅进行，如果资讯不能透过设计稿传递楚，就需要额外花时间理解。

此外，现在的设计几乎都走向响应式网站，在浏览器中，用户可以根据喜好来来调整页面呈现的高、宽度，使用者界面也可以动态滑动，但设计过程使用的画布却是固定尺寸，这也让网页开发的过程，需要更多的沟通来调整页面。赵锦江也特别指出，近来手机屏幕尺寸也越来越多元，这也对软件启动画面的设计，带来一定程度的挑战。

要克服现有设计工具的局限，设计师与工程师的双向沟通很重要，赵锦江表示，现今普遍协作方式，通常是由设计师先完成设计稿，再交由工程师开发，部分较复杂的设计，会多增加“设计还原评审”的流程，也就是工程师开发完程式、尚未与后端串接之前，先提供给设计师回馈意见并修正。不过，多数设计师与工程师仍多为分开作业，没有达到充分沟通。

这种单向协作方式，可能无形中限缩的创新的可能。比如说，设计师因为担心想法难以实现，可能在没和工程师沟通的情况下，直接去找其他网站已经做到的设计作为参考。当设计师逐渐习惯这种设计思维之后，就可能局限了原本的创意，也减少了工程师技术创新与突破的机会。

赵锦江表示，上述这些普遍存在于设计工具与工作流程的问题，未来可能出现更多新兴的设计工具与方法论来改善。比如说，内部团队正在尝试的Atomic Design+方法论；或是目前新兴的设计工具，大多已经能在浏览器中执行，部分也与云端结合，提供云计算或储存的功能，来更快的线上协作与交付演示，还能轻松管理版本，这是传统设计工具不具备的场景。“不过，工具是一方面，也要鼓励设计师真正拥抱真实的环境，不然有了工具，设计师还是按照旧有思维来思考，问题就没有真正解决。”