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

uidec他(她)的空间>>4年前来源:UI中国

人气316

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

 

    为每个项目构建规范和标准(纵然它并不在初始计划内)能够推动工作进度(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。这款工具可以指定上述所有组件的规格,但我更喜欢用它来处理间距和标签。

 

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

 

     
TA的上传
  • 红色风格企业后台管理系统界面设计
  • 4张后台管理系统界面UI
  • 几张系统管理登录页设计
  • 国家电网管理系统后台界面
  • 简约大气后台登录页
  • 员工考勤系统后台界面
  • 飞哥网站
  • 一起海带APP设计
  • 扁平风格手机主题UI
  • 25个优秀UI图标ICON设计作品
查看全部

只有登录之后才可以评论,请点击进行登录

全部评论: 0

登录

忘记密码

如果您尚未注册,请选择以下方式登录

Q Q 登 录 微 博 登 录
已有账号?快去登录>>

注册