1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

实战案例!设计师怎样和前端开发一起制定设计规范?--九分科技

时间:2020-07-03   分类:设计管理    作者:网络   来源:网络整理   点击:150

实战案例!设计师怎样和前端开发一起制定设计规范?

@画一个长沙:作为设计师,您可能会惊讶地看到以下标题:开发设计规范这不是设计师的业务吗? 为什么我们要进行前端开发? 与以前的网站不同,该样式是基本的并且交互很简单。 前端以页面为单位开发。 当前的网站更加复杂和庞大。 前端开发通常采用基于组件的开发,也就是说,不是以页面为单位,而是将页面再次拆分。 这与设计器

设计规范方面,本月最推荐的版本是:“超实用的六步透视网易设计规范(完整的PDF下载)”

通常,设计师会 在设计过程中,视觉元素被有意识地提取以形成组件库以供重用。 例如,iOS组件库:

实战案例!设计师怎样和前端开发一起制定设计规范?

△iOS工具包

类似,前端开发还将在开发过程中形成一个组件库,以避免代码重复。 最经典的例子是Bootstrap是一位在Twitter上工作的设计师和工程师,他创建了这个流行的前端开发框架,该框架包含按钮,输入框,模式框和网站所需的其他组件。

实战案例!设计师怎样和前端开发一起制定设计规范?

△引导程序 [h ]

也就是说,设计人员不仅需要一套完整的设计规范,而且开发人员还需要一套组件库和文档。 将两者结合以重现规范将提高设计人员和开发人员的协作效率。 另外,由于设计人员和开发人员的想法不同,制定时间互为补充,制定的规格将更加完整和实用。

那么如何做这样的一组设计规范? 不久前,我们的网站进行了修订,并制定了一系列此类规范。 我们将其命名为Musikit。 现在,我回顾整个过程,希望带给您一些思考。

实战案例!设计师怎样和前端开发一起制定设计规范?

△Musikit [h ]

实战案例!设计师怎样和前端开发一起制定设计规范?

△Musikit Home 一个 3.设计师在初步设计中制定一些基本规范

在交付产品文档后,设计师开始控制总体样式并制定一些基本规范,例如字体使用,字体大小 级别,基本色相等。完成这些操作后,设计人员将开始设计特定页面。 无论特殊页面(主题,事件等)如何,此时都需要诸如按钮之类的基本控件,然后设计人员将其提取出来。

当控件具有一定数量时,基本的设计规范就已经形成。 在这个阶段,设计人员不需要考虑太多的全局性问题,也不必因为规范而限制思维。 他只需要遵循思维方式并提取公共控制权即可。 第二步,【公众号小程序分销商城搭建找九分网络,只要800元起:13106499520 QQ:452570709】,添加了前端开发以扩展控件>当设计师达到上述状态时,将添加前端开发。 此时的前端开发可以对设计师的设计草图进行技术评估,并扩展和补充控件。 例如,设计草稿的注释区域中有两种回复按钮:回复和取消。 设计者考虑使用不同的样式来区分不同的功能,但并未考虑按钮的状态:鼠标向上移动时,单击时以及按钮被禁用时。

实战案例!设计师怎样和前端开发一起制定设计规范?

△回复按钮和“取消”按钮

因此,前端对其进行了补充并改善了按钮的不同状态。

实战案例!设计师怎样和前端开发一起制定设计规范?

△按钮状态(行为)

同时,我注意到此页面的设计草案中还有一些较大的按钮。 考虑到按钮的大小也会发生变化,我们已进行了一致的讨论,并决定将按钮扩展为五种大小:高度从20px到60px。每个60px的差为10px。 #p#分页题#e#

接下来,我们最初确定了三种不同的颜色来满足当前的设计方案,从而基本完成了一组按钮组件。 在此过程中,前端开发需要及时了解设计者的想法,并根据以前的经验对控件进行某些扩展。 当然,不需要太全面,主要使用一般方案,再次考虑特殊方案。 三,设计师与前端开发之间的“轮回之战”

在随后的设计和开发过程中,设计师与前端需要进行沟通 彼此以一定的频率反馈,重复第二步过程以共同改善这套规格。

随着组件数量的增加,我们首先对其进行简要分类,然后根据复杂性将它们分为组件和插件。

实战案例!设计师怎样和前端开发一起制定设计规范?

△Musikit导航 [ h]

零件是一些常用的简单控件,例如按钮,输入框,表格,页码等。这些东西大多数都是相对简单的,没有太多的交互作用,只是您可以使用CSS样式来实现。

该插件更为复杂,通常包含一些复杂的交互,并且还包含一些基本组件。 弹出提示,模式框,表单提交等都是插件。 他们不仅需要CSS样式,还需要JS进行交互

在接下来的过程中,设计人员和前端开发人员需要一定程度的敏感性,并注意在工作过程中可用作零件或组件的内容。 例如,在设计和开发登录和注册弹出层的过程中,我们注意到发送SMS验证码可以用作组件,因为在这里不仅需要发送SMS验证码,而且对于绑定帐户等场景也是必需的。 手机。

实战案例!设计师怎样和前端开发一起制定设计规范?

△发送短信验证码

某些组件可能非常复杂。 为了适应多种情况,前端开发需要找到设计人员以了解将来如何使用它,哪些属性不能写为配置项,等等。我们最初在设计时写了模态框的宽度 模态框。 后来,在设计师的新设计草案中,

内容采集来自9fen.net


【网站建设微信小程序搭建就找九分网络,最低只要800元起!联系:13106499520 QQ:452570709】
,模态框的宽度出现了不同。 我们及时将模式框的宽度调整为可配置的项目

实战案例!设计师怎样和前端开发一起制定设计规范?

△模态框 [ h] 第四,形成文档

一般设计文档是设计师制作的照片档案。 自从这次以来,前端开发也参与了,我们将设计规范制作到了网页中并添加了代码部分。

实战案例!设计师怎样和前端开发一起制定设计规范?

△代码部分 [

通过这种方式,设计人员和前端可以引用它们,并且这些控件仍然可以是交互式的,清晰的,简单的且易于理解的。

我们将这些内容放置在主站点下,并限制了访问权限。 考虑到某些代码很长,并且设计人员可能有代码恐惧症,我们添加了一个角色切换按钮,该按钮在切换到设计版本时将隐藏代码。

实战案例!设计师怎样和前端开发一起制定设计规范?

△角色切换 结论 [ h]

第一阶段修订完成后,Musikit在线。 我相信,使用Musikit,在工作的第二阶段,【企业网站搭建就找九分网络,仅800元起:13106499520 QQ:452570709】,每个人的效率都会提高,但是这套设计规范还远远没有完成。 在此过程中,设计人员了解前端开发的一些简单原理,并且前端开发也可以及时了解设计人员的想法。 每个人都不再在做自己的事情,而是在协作。 这可能是联合设计规范的最大收获。 。

标签: 经验分享 优设 优设网 设计规范 设计准则

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----
  • 微信号