欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何快速制作有效的UI设计规范?

发布时间:2017:11:29 12:03:42 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1156个文字,预计阅读时间3分钟
导语
这是一种简单快速制作规范的方法,已经在公司内部得到实践,可行性很高。适用于中小团队。

  这是一种简单快速制作规范的方法,已经在公司内部得到实践,可行性很高。适用于中小团队。

  像优秀的设计规范比如Material Design / ANT Design等。

  这里主要讲解如何快速制作一份设计规范。附件带工程文件和sketch插件。规范所用素材非工作设计界面,但不影响内容。关于设计规范的好处,这里不详细描述。

  分析以往痛点

  

如何快速制作有效的UI设计规范?

 

  小结:规范落实起来难,,效果就低很多,沟通成本加大,背离初衷。

  问题场景

  一家公司有30名设计师,4个前端开发团队,已有一份PDF规范。有趣的事情是,设计师的设计稿间距高度、字号、颜色用法有很大的个人习惯。有时还重复做已有的控件。然后开发爸爸们,同样也是,同一个可以复用的导航栏,侧边栏等,都重复去写了代码。小团队之间,都单独有自己的控件库,在UI验收时才能去解决,但是这无形中增加了成本。

  我们能否减少这些问题呢,带着这些疑问,我也摸索出一点小经验。这也是我真正想要分享的内容。

  首先确保团队已经使用Sketch办公。为什么用Sketch ? 关于这个问题,主要是效率方面高。

  先出设计稿还是先出规范?

  对于大多数小伙伴来说很疑惑,我也疑惑过。但是,你还没设计,怎么知道你真正想要的是什么颜色什么字号?这里我建议是,部分设计稿出来再做规范,然后慢慢的完善。

  你说,公司已经有规范了怎么办,那可以把规范换一种方式呈现出来。

  规范制作

  这里主要以一个iOS设计稿为主,涉及到安卓的话,如果要精准,也时需要2份设计稿和2份设计规范。

  

如何快速制作有效的UI设计规范?

 

  这是一个Sketch制作的设计稿。我会简单做一个设定。

  

如何快速制作有效的UI设计规范?

 

  视觉规范

  颜色:界面用色/背景用色/文字用色/线条用色

  字号:标题字/正文字/辅助字

  行高

  间距

  

如何快速制作有效的UI设计规范?

 

  有小伙伴有疑问了,上面的色值那个C1/C2的代号是什么意思?

  这个代号主要是为了方便前端开发人员建立UI库。比如,我们设计稿一个间距是20px,可能在开发眼里的20px和他所计算的单位不在一个频道。如果以J2来代号来表达一个间距值,那么不管双方是什么单位,但是至少这个间距大小呈现出来是一致的。当开发问设计人员某个地方间距是多少,你可以直接告诉他是J2,那么开发就会知道,哦,是20dp。

  交互样式

  点击效果

  

如何快速制作有效的UI设计规范?

 

  组件库

  元素层:按钮

  组件层:可直接复用

  

如何快速制作有效的UI设计规范?

 

  

如何快速制作有效的UI设计规范?

 

  比如,我们把设计规范做完了,如何去使用呢?

  需要分2个方向,一个是UI,一个是前端。

  设计师规范的使用

  

如何快速制作有效的UI设计规范?

 

  可以直接在sketch上面拷贝样式,或者直接Command C+V。还可以调出别的同事的画板,然后导入到自己的机子上。

  

如何快速制作有效的UI设计规范?

 

  插件名字叫做sketch palettes.可以上网搜索,可以下载的。

  前端开发规范使用

  他们没有sketch的前提下, 可以借用插件Marketch导出一个html格式。

  

如何快速制作有效的UI设计规范?

 

  导出后用浏览器打开index.html。

  

如何快速制作有效的UI设计规范?

 

  

如何快速制作有效的UI设计规范?

 

  这样的呈现方式是不是比一个PDF文件要好呢?左边是类目,右边是相关的属性。也可以直接下载某些图标。

  

如何快速制作有效的UI设计规范?

 

  当设计规范建立,开发人员也建立了自己的UI库,然后再去推进之前剩下没有统一样式的小尾巴。

  如果以后设计稿迭代怎么办?

  

如何快速制作有效的UI设计规范?

 

  

如何快速制作有效的UI设计规范?

 

  只需要做一个类似的说明文档即可。方法有很多,相信大家可以解决。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:在产品设计过程中缺乏创意?不妨参照 ISIIVE 方法

下一篇:最后一个月,这3个设计趋势是网页设计师的最爱

  • 18886 文章总数
  • 2253689访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信