转:Yelp开发团队发布内部网站设计指南
原文来自于:http://www.infoq.com/cn/news/2014/02/yelp-style-guide
近日,Yelp开发团队在博客发布消息:Yelp公开了内部网站设计指南。这份文档此前是Yelp内部使用文档,为设计师、产品经理、工程师提供了Yelp UI模式的通用信息,目的是保证Yelp网站的视觉设计一致性、降低技术模块化难度、可复用标记和样式文件。
Yelp开发团队表示,开发一个新功能时有三条原则:
- 采用预发布模式;
- 真的采用预发布模式;
- 如果预发布模式不能解决设计问题,有两个选择:
- 修改已有模式来解决问题,并修改设计指南,让Yelp所有设计都改变;
- 建立一个新模式,并融入Yelp的UI设计中,以备将来使用;
接着文中解释为什么要这么做以及他们怎么做。关于为什么:Yelp发展近10年,前端代码已经超出控制,分散且没有缺乏更高效率。Yelp开发团队的做法是:从Photoshop实体模型来编码,从设计和构建中剥离出组件。用Sass混入,Yelp团队通过网格系统重构了已有布局。
Yelp团队建议不要重复造轮子,对于设计师来说,不用去想如何呼出一个信息页面:“island”模式可以解决,对于同一功能,前端工程师也不用去想如何从头构建,只需简单使用文档标识。
文章最后提供了一些设计参考资料:
- 创建动态设计指南以提升性能 (Nicole Sullivan)
- 用动态设计指南统一敏捷和UX (Grant Hutchins, Andrew Cramer, Steve Berry)
- 构建垂直的韵律 (Richard Rutter)
- 前端设计指南 (Anna Debenham)
- 原子设计 (Brad Frost)
- Github设计指南
- Mailchimp的模式库
- Salesforce1设计指南
- Starbucks设计指南
原文英文链接:Yelp’s got style (and the guide to back it up)
转:Yelp开发团队发布内部网站设计指南的更多相关文章
- Google发布移动网站设计原则
Google 刚刚发布了由 Google 与 AnswerLab 联合打造,名为<Principles of Mobile Site Design: Delight Users and Driv ...
- Medium开发团队谈架构设计_转
转自:Medium开发团队谈架构设计 背景 说到底,Medium是个社交网络,人们可以在这里分享有意思的故事和想法.据统计,目前累积的用户阅读时间已经超过14亿分钟,合两千六百年. 我们支持着每个月两 ...
- 《Dare To Dream 》第三次作业--团队项目的原型设计与开发
一.实验目的与要求 1.掌握软件原型开发技术: 2.学习使用软件原型开发工具: 二.实验内容与步骤 任务1:针对实验六团队项目选题,采用适当的原型开发工具设计团队项目原型: 任务2:在团队博客发布博 ...
- 《Blue Flke》团队项目的原型设计与开发
实验目的: 1.掌握软件原型开发技术 2.学习使用软件原型开发工具 实验过程和步骤: 任务1.针对实验六团队项目选题,采用适当的原型开发工具设计团队项目原型. 任务2.在团队博客发布博文,陈述团队项目 ...
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Google搜索排名优化-面向搜索引擎的网站设计
内容摘要:网站在搜索营销方面最主要的缺点: 行业知识:不知道搜索引擎对吸引的新用户的重要性,在搜索引擎排名服务中追求“傻瓜相关”,购买一些其实没有太多实际意义的行业关键词.其实能够用户输入的关键词越多 ...
- 优化网站设计(十):最小化JAVASCRIPT和CSS
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- 优化网站设计(九):减少DNS查找的次数
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
随机推荐
- Javascript校验含中文的字符串长度
原文地址:http://sozai.wlling.com/html/Tutorial/JavaScript/2009/0214/2936.html /** * 得到字符串的字符长度(一个汉字占两个字符 ...
- mongodbOperator
mongodb创建数据库表语句 db.createCollection("CollectionName or tableName"); db.createCollection(&q ...
- ajax提交数据问题
加入traditional:true属性 traditional 类型:Boolean 如果你想要用传统的方式来序列化数据,那么就设置为 true.请参考工具分类下面的 jQuery.param 方法 ...
- springmvc对jsonp的支持
在与前端开发人员合作过程中,经常遇到跨域名访问的问题,通常我们是通过jsonp调用方式来解决.jsop百科:http://baike.baidu.com/link?url=JKlwoETqx2uuKe ...
- 跟Google学习Android开发-起始篇-构建你的第一个应用程序(4)
说明:此系列教程翻译自Google Android开发者官网的Training教程,利用Chome浏览器的自动翻译功能作初译,然后在一些语句不顺或容易造成误解的地方作局部修正.方便英文不好的开发者查看 ...
- Android开发之扫描附近wifi热点并列表显示
近期项目中用到了wifi模块.今天做一个简单的总结. 參考:http://www.2cto.com/kf/201310/253617.html 1.如何获取wifi对象并进行操作 要操作WIFI设备, ...
- [Angular 2] Dispatching Action with Payloads and type to Reducers
While action types allow you tell your reducer what action it should take, the payload is the data t ...
- Java集合类具体解释
假设您喜欢这些文章,欢迎点击此处订阅本Blog 集合类说明及差别 Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Ma ...
- 公共Webservice
网络上可供测试的Web Service腾讯QQ在线状态 WEB 服务Endpoint: http://www.webxml.com.cn/webservices/qqOnlineWebService. ...
- Android Studio 简介
Android Studio是Google于2013 I/O大会针对Android开发推出的新的开发工具,目前很多开源项目都已经在采用,Google的更新速度也很快,明显能感觉到这是Android开发 ...