原文来自于:http://www.infoq.com/cn/news/2014/02/yelp-style-guide

近日,Yelp开发团队在博客发布消息:Yelp公开了内部网站设计指南。这份文档此前是Yelp内部使用文档,为设计师、产品经理、工程师提供了Yelp UI模式的通用信息,目的是保证Yelp网站的视觉设计一致性、降低技术模块化难度、可复用标记和样式文件。

Yelp开发团队表示,开发一个新功能时有三条原则:

  1. 采用预发布模式;
  2. 真的采用预发布模式;
  3. 如果预发布模式不能解决设计问题,有两个选择:
    • 修改已有模式来解决问题,并修改设计指南,让Yelp所有设计都改变;
    • 建立一个新模式,并融入Yelp的UI设计中,以备将来使用;

接着文中解释为什么要这么做以及他们怎么做。关于为什么:Yelp发展近10年,前端代码已经超出控制,分散且没有缺乏更高效率。Yelp开发团队的做法是:从Photoshop实体模型来编码,从设计和构建中剥离出组件。用Sass混入,Yelp团队通过网格系统重构了已有布局。

Yelp团队建议不要重复造轮子,对于设计师来说,不用去想如何呼出一个信息页面:“island”模式可以解决,对于同一功能,前端工程师也不用去想如何从头构建,只需简单使用文档标识。

文章最后提供了一些设计参考资料:

原文英文链接:Yelp’s got style (and the guide to back it up)

转:Yelp开发团队发布内部网站设计指南的更多相关文章

  1. Google发布移动网站设计原则

    Google 刚刚发布了由 Google 与 AnswerLab 联合打造,名为<Principles of Mobile Site Design: Delight Users and Driv ...

  2. Medium开发团队谈架构设计_转

    转自:Medium开发团队谈架构设计 背景 说到底,Medium是个社交网络,人们可以在这里分享有意思的故事和想法.据统计,目前累积的用户阅读时间已经超过14亿分钟,合两千六百年. 我们支持着每个月两 ...

  3. 《Dare To Dream 》第三次作业--团队项目的原型设计与开发

    一.实验目的与要求 1.掌握软件原型开发技术:  2.学习使用软件原型开发工具: 二.实验内容与步骤 任务1:针对实验六团队项目选题,采用适当的原型开发工具设计团队项目原型: 任务2:在团队博客发布博 ...

  4. 《Blue Flke》团队项目的原型设计与开发

    实验目的: 1.掌握软件原型开发技术 2.学习使用软件原型开发工具 实验过程和步骤: 任务1.针对实验六团队项目选题,采用适当的原型开发工具设计团队项目原型. 任务2.在团队博客发布博文,陈述团队项目 ...

  5. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  6. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  7. Google搜索排名优化-面向搜索引擎的网站设计

    内容摘要:网站在搜索营销方面最主要的缺点: 行业知识:不知道搜索引擎对吸引的新用户的重要性,在搜索引擎排名服务中追求“傻瓜相关”,购买一些其实没有太多实际意义的行业关键词.其实能够用户输入的关键词越多 ...

  8. 优化网站设计(十):最小化JAVASCRIPT和CSS

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

  9. 优化网站设计(九):减少DNS查找的次数

    前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...

随机推荐

  1. 关于fork函数

    这篇文章说得非常好.做个记录: 链接:http://coolshell.cn/articles/7965.html

  2. Purchase Document Open Interface(PDOI)

    PO模块也有自己的接口表,多用于把其他业务系统在Oracle EBS系统生成采购订单记录. Table Name Description Type PO_HEADERS_INTERFACE This ...

  3. war文件

    原文地址:http://blog.sina.com.cn/s/blog_4cbc6fdd0100fojv.html jar包和war包的区别:war是一个web模块,其中需要包括WEB-INF,是可以 ...

  4. RESTFul中的那些事(1)---在RESTFul中,HTTP Put和Patch操作的差别?

    笔者在用调用Google Calendar和Google Tasks的RESTFul API的时候.遇到了一个特殊的操作,PATCH. 那么PATCH操作和PUT操作的差别是什么呢? 依据PATCH ...

  5. spring02IOC

    1.创建所需要的Student 和 Grade实体类 public class Student { //学生实体类 private String name; //姓名 private Integer ...

  6. js数组的操作及数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

  7. Android-Eclipse汉化

    首先下载好汉化包 解压后得到eclipse文件夹 然后在eclipse根目录下创建language文件夹 将eclipse文件夹放入 在eclipse根目录下创建links文件夹 然后在里面添加这个文 ...

  8. HTML基本概念

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  9. Error: theForm.submit is not a function !!

    theForm.submit is not a function 调试了半天,才发现范了低级错误. 页面中有一个按钮ID 是 submit 而引发的错误. 引出的问题是页面上的元素命名范围不能是 wi ...

  10. linux free命令建检查内存状态

    前端时间发现博客服务器物理内存使用过高问题,就是使用linux free命令检查的,这次详细介绍下这个命令. 命 令: free 功能说明:显示内存状态.语 法: free [-bkmotV][-s  ...