余果的博客

做一个框架

Introduction

user

余果

一个产品设计师。了解详情


Featured

做一个框架

余果 front-end

其实从我入职实习到今天,历经3年,两个部门(多媒体到社交平台),3次大改版,每次都想产生一个规范,一方面能约束整站设计风格,给设计师参考给前端开发参考,另一方面也希望可以输出我们的设计风格,但是从来没有成功过,所以这次我们认真分析了下我们不能做出bootstrap的原因。

  1. 框架不够好用、强大
  2. 没有强势的设计方,导致组件在各个产品或者模块中使用的时候要进行异化,恩,腾讯就是传说中的“产品经理驱动”的公司
  3. 站点复杂,比Twitter还要复杂的多,页面多
  4. 没有高层愿意大力推动,恩,高层是看战略层面……
  5. 框架代码有冗余性,这个问题在用bootstrap的时候就会有明显的感觉……
  6. 框架没有很好地区分可重用部分不可重用部分
  7. 模块扩展性不够,没有扩展性
  8. 没有人维护框架,也就是修改过生产代码以后,没有同步到框架中去
  9. 每个前端开发有自己的习惯,意识不统一

也不是不能解决啊骚年!

解决方案:

  1. 想做出质量上乘,能够开源出去的框架,第一步就是拿别人的开源代码来用,或者参考,虚怀若谷保持饥饿……不论代码,还是最终规范页的体验,我们都可以参考别人的代码。
  2. 当实在出现设计异化的需求的时候,要么是产品经理无理取闹,要么就是组件设计的有考虑不周的地方,即使调整,主动加入异化设计到规范中。
  3. 更多子产品页面可能无法顾及,但在平台级的页面(个人中心、设置、好友管理等)保持风格统一。
  4. 嗯……Bootstrap也是没有得到Twitter官方支持的啊,亲
  5. 在内部的代码仓库里组件都是粒子级别的,可以按需加载,而不是直接引入整个框架。
  6. 对组件的定义要清晰:不是所有粒度小的都是组件,而是非常明确其他页面也会用到的小粒度html代码和css代码才是组件。如果不清楚,参考Bootstrap。
  7. 多听取使用框架的人的意见:“他们平时要做哪些异化?可否直接通过class提供给他?再次参考Bootstrap。”
  8. 使用工具自动生成框架页,保持一份代码,DRY原则
  9. 把上面的都做好了,最后一步不是问题。
user

余果

一个产品设计师。 了解详情