恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
怎样构建网站或应用的规范和标准
0.0°
2014-05-26 自译外文 经验/观点 原作者: Eelco Guntlisbergen 举报 29564 158 71 4

    尽管有些地方可能不同,但任何项目最重要的起始点莫过于构建一套规范。

 

    为每个项目构建规范和标准(纵然它并不在初始计划内)能够推动工作进度(increase your workflow,使设计保持连贯性,并使其在正确的道路上发展。

 

    这确实是设计者的责任。设计师需要执着于每一颗像素的精确,而开发者却缺乏此类认识,设计师不能因此而责怪他们。你要做的就是引导他们。

 

从创建下面三个主要的文件开始:


  1. 设计规范

  2. 组件文档

  3. 页面规格

 

    我们并不推荐还要做前端开发的设计者遵循以上的流程。直接在第二步完成后开始编码即可,否则平添任务量。

 

    两个著名的例子如BootstrapPurecss。是的,他们是完整的前端框架,而且可能比你现在工作的项目更庞大,但你已经理解我的意思了,是吧?

 


  1. 设计规范

    设计规范定义了设计项目中的所有元素的风格,是给开发者的基础风格导向。颜色、排版、表格、列表项、图标使用、分隔符以及更多细节的元素定义都要包含在文档里。将所创建的元素拖进来,然后为每一个元素的使用设定规范。

 

 

    *小贴士:元素要命名得当。尽管开发者最后会使用不同的类名,但对于参考来说是非常有用的。如果打算为网站的导航栏提供多种配色主题,那么用“首要主题颜色”和“二级主题颜色”来作参考比直接给颜色名更加方便。

 

2.组件文档

    从多方面来说,这个文档和设计规范是同一类型,但是是不同等级的。组件中包含的元素有:登陆框、滑块、轮播、页头、页脚等等。

 

    和普通的设计规范不同,它能帮助你在整个设计期间保持连贯性。这让开发者更加容易察觉那些重复的元素,那将大大加快开发进程。

 

 

    如上所见,在响应式设计项目中,组件文档中最好能够说明组件在不同状态下的“行为”再一次说明,大多数开发者都太关注这些事情(也不想去关注)。

 

    相信我,如果你没有将提示性文本高亮显示的话,他们根本不会知道在移动设备上它们是居中对齐的。

 

    当你觉得你完成了你的工作时,将所创建的元素拖进来,然后设定使用规范,否则会因为没有规范,而去反反复复的修改内边距、颜色以及字体大小。

 

    *小贴士:将组件导出成独立的PSB文件(Export components to separate .psb files.)。一个巨大的好处就是当你的客户需要修改东西的时候,你只需要更新一下特定的PSB文件即可,绝对是节约时间的利器。

 

3. 规格文档

    最后一步是页面规格。当我们准备好设置元素和组件的风格时,唯一剩下的事就是为这些组件定义页边距(类命名和间距)。

 

在实际项目中,我们曾在阿迪达斯的网上商城这种大型平台上使用此法,真的是非常容易的就将他们分离开来:


  1. 将应用在多个页面上的组件分离导出。

  2. 将页面导出。

应用3层组合(Layer Compositions),很容易导出:


  • Popup_Normal.jpg(常规图)

  • Popup_Naming.jpg(类命名图)

  • Popup_Spacing.jpg(间距图)

 

    我知道这看上去很痛苦,但作为一个交互设计师是很重要的环节。

 

    很幸运,有一些十分有用的插件可以节约你的时间。其中之一就是specKing。这款工具可以指定上述所有组件的规格,但我更喜欢用它来处理间距和标签。

 

 


更新:2014-05-26

收藏

158人已收藏

PassbyOne

静心

  • 15

    作品

  • 371

    粉丝

  • 7

    关注

  • 移动设计中不可或缺的交互
  • 单页面网站设计的5个技巧
  • UI/UX设计师访谈之Luca Burgio
  • 16个免费图库

    猜你喜欢

      2014-05-26 自译外文 经验/观点 原作者: Eelco Guntlisbergen 举报 29564 158 71 4

      怎样构建网站或应用的规范和标准

      0.0°

      你确定要举报怎样构建网站或应用的规范和标准

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年05月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      71
      158
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录