V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
miya
V2EX  ›  程序员

你们公司都有哪些规范?编码规范,UI 设计规范。。。。对规范越来越迷茫,求指教

  •  
  •   miya · 2014-03-14 15:17:05 +08:00 · 5367 次点击
    这是一个创建于 3889 天前的主题,其中的信息可能已经有所发展或是发生改变。
    因为是小公司,产品研发告一段落,接下来要完成的就是要制定公司的前端编码规范和UI设计方面的规范,我们公司有专门做前端的,也有做UI的,关于前端规范和UI设计方面的规范总感觉有联系又有区别,制定规范的时候让人好迷茫。。。求指教~3Q
    18 条回复    2018-06-30 22:26:43 +08:00
    5key
        1
    5key  
       2014-03-14 15:18:57 +08:00
    围绕着让你们开发效率能够更高效的角度出发就行了。

    比如统一UI组件,生产前端组件。
    miya
        2
    miya  
    OP
       2014-03-14 15:22:50 +08:00
    @5key 前端这边的规范包括页面的尺寸,栅格吗?前端和UI是应该揉在一起出一份规范还是分开做规范比较合理?
    zakokun
        3
    zakokun  
       2014-03-14 15:26:41 +08:00
    小公司还分这么细啊?我们都是直接前端中间,后台.各干个蛋
    5key
        4
    5key  
       2014-03-14 15:28:19 +08:00
    @miya 前端和设计分开,但是关联。设计的指导设计,前端的帮助前端提升效率。保持统一是为了大家都快。
    acros
        5
    acros  
       2014-03-14 15:29:57 +08:00
    我就是进来嘟囔下:楼主头像似乎是本人呢····
    miya
        6
    miya  
    OP
       2014-03-14 15:32:56 +08:00
    @acros 这你都知道。。。
    tension
        7
    tension  
       2014-03-14 15:34:53 +08:00
    UI的规范跟前端的规范是分不开的...

    可以搜索下 大街网 前端规范...

    我记得看到过,设计的叫一个牛逼!
    miya
        8
    miya  
    OP
       2014-03-14 16:31:45 +08:00
    @tension 呼。。。为毛我找了半天木有找到,请问有链接不亲?劳烦贴一下耐
    learnshare
        9
    learnshare  
       2014-03-14 16:45:40 +08:00
    UI 跟前端可以结合一下,规范可以定在生产工具、流程、配色、组件、JS lib 之类的
    lightening
        10
    lightening  
       2014-03-14 16:54:01 +08:00
    tension
        11
    tension  
       2014-03-14 16:59:53 +08:00
    Vinwan
        12
    Vinwan  
       2014-03-14 17:03:59 +08:00
    @miya http://www.bbc.co.uk/gel 可以参考 BBC 的,目前做 Style Guide 最好的应该就是他们了。
    tox
        13
    tox  
       2014-03-14 21:59:59 +08:00
    注释规范,SVN提交规范,编码规范等等。团队一大,项目一大,经常迭代。这些是必须的。
    JerryZhang
        14
    JerryZhang  
       2014-03-15 11:21:53 +08:00
    要求规范还是去参与开源项目吧,会做的比较好。

    一些大公司对编码规范要求可能严格一些,小团队就那样了。所谓规范不也就是给人用的,还有多少规则也顶不过项目的压力。限时限人的时候,可能就不会要求那么多了。

    出去工作之前设想着公司都应该有良好的编码规范,大家都会遵守。其实反之,工程师的水平参差不齐,性格各异,能做到自己的风格统一算是不错了。
    JerryZhang
        15
    JerryZhang  
       2014-03-15 11:22:43 +08:00
    Sorry.. 我好像答非所问。
    konakona
        16
    konakona  
       2014-03-15 21:55:30 +08:00
    WEB团队合作时,无论公司大小,我建议至少有以下基础规范:
    1.脚本语言注释规范(如JS)
    2.汇编语言注释规范(如PHP)
    3.服务器软件安装指南规范
    4.PSD切图规范(这需要与前端人员或根据前端所使用框架,如bootstrap进行规定)
    5.设计元素规范(根据当前项目进行的设计,一般为按钮的大小倍数、间距倍数、颜色限制等等)
    6.SVN使用规范(如注释)
    jprovim
        17
    jprovim  
       2014-03-28 03:34:05 +08:00
    mark
    Soulless123456
        18
    Soulless123456  
       2018-06-30 22:26:43 +08:00
    UI 设计规范有几大分类组成,分别是:Logo、标准色、字号、段落设置、图标、图片、间距、圆角值、大小、阴影、组件等。

    1.Logo

    品牌印象的直接感受,根据页面不同背景所使用的 Logo 图也不同。将产品中所使用到的 Logo 统一分类,以下引用 Moby's Petshop UI Style Guide 的 Logo 资源例举说明。Moby's Petshop UI 的 Logo 由图形和文字组合而成,而品牌色为蓝色,Logo 的使用也需要考虑到 Footer 黑色背景下的 Logo。所以用 Logo 的横竖向排版和单个 Logo 图形来分类更好。分类里面则展现品牌色的 Logo、品牌色背景的 Logo、Footer 黑色背景的 Logo。


    2.标准色

    颜色是设计最重要的部分,没有之一。细节决定品质,所以对颜色的运用格外细致,颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词,明确用于什么界面。以下引用 real-pixels UI Style Guide 的颜色规范,可以借鉴的是每个颜色不仅标注了颜色值,而且右侧给出了颜色使用的场景,值得借鉴的是按钮 Normal 状态和 Hover 状态的颜色值放在一起,这样,对不同状态显示的颜色感受更直观。


    对颜色值统一规范命名变量,提高开发效率的同时更好的维护设计规范。


    在前端开发中,对颜色值进行编号,这样对代码也有着极大的优化。定义一个设计规范的 CSS 样式库,开发过程中就不用重复修改 CSS 参数值,直接引用定义好的变量名就可以,这样修改设计规范的成本大大降低。

    3.字体

    字体是设计中必不可少的考虑因素,不同的字体气质不一样,并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明。以下引用的是 Retail Banking Service UI Style Guide 中的字体规范。在定义字体名称的同时也定义了字体的风格,并且添加了不同字体风格的预览效果,常见的字体风格有:Light、Regular、Italic、Semibold、Bold。



    4.段落设置

    在实际的产品设计中,段落有很多种样式,不同场景下的段落要求也不一样。比如,阅读内容的段落要求文本可阅读性强,所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨,装饰性强就可以。需要注意的是在定义段落默认字体的时候还需要定义一个后备字体,即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨,这也就是段落规范在设计中存在的意义。



    5.图标

    图标是重要的软件标识,在设计资源中是最重要的模块之一。在软件产品中甚至可能每个页面都存在图标,图标除了美化的作用以外,还有着明确指代含义的计算机图形。具体分为以下三个作用:1. 图标是与其它网站链接以及让其它网站链接的标志和门户。2. 图标是网站形象的重要体现。3. 图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范,这样才更清晰明了。




    6.图片

    图片也是属于设计规范最重要的部分之一,按照用途分类整理图片资源,设计风格系统化。



    7.度量

    在设计的过程中,我们经常会使用一套规范的度量标准,来保持产品的一致性,分别为圆角值、间距、大小。

    对度量解释最好的是设计中经常使用到的栅格系统( Grid Systems ),运用固定的格子设计版面布局,其风格工整简洁。

    这就是我们在网页和 APP 设计的过程中经常使用到栅格系统的原因。



    8.阴影

    阴影风格及参数也是设计规范中的一部分。在整理设计规范的时候,需要注意的是阴影的参数值是网页中控制阴影的参数值,而不是设计软件中的参数值。举个例子,网页中阴影对应的参数值为:box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 不透明度:10%,这才是程序员需要的阴影参数值,否则最终开发出来的阴影会出现不一致的情况,无法达到规范的目的。



    9.组件

    常用的 UI 组件( Component ):

    Button 控件、下拉框、选择框(单选\复选框)、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。

    Button 控件

    按钮是最常见的组件之一,按钮有 5 个状态:1.Normal 2.Hover 3.Active 4.Disabled 5.Loading。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。如果是图标按钮的话,除了上述参数值以外还需要标注 icon 和按钮文本之间的间距和 icon 图标的大小。

    如果想了解更多关于设计规范的知识,可以戳这里: https://www.mockplus.cn/blog/post/1009
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5511 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:36 · PVG 16:36 · LAX 00:36 · JFK 03:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.