提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
尽管有些地方可能不同,但任何项目最重要的起始点莫过于构建一套规范。
为每个项目构建规范和标准(纵然它并不在初始计划内)能够推动工作进度(increase your workflow),使设计保持连贯性,并使其在正确的道路上发展。
这确实是设计者的责任。设计师需要执着于每一颗像素的精确,而开发者却缺乏此类认识,设计师不能因此而责怪他们。你要做的就是引导他们。
从创建下面三个主要的文件开始:
我们并不推荐还要做前端开发的设计者遵循以上的流程。直接在第二步完成后开始编码即可,否则平添任务量。
两个著名的例子如Bootstrap和Purecss。是的,他们是完整的前端框架,而且可能比你现在工作的项目更庞大,但你已经理解我的意思了,是吧?
设计规范定义了设计项目中的所有元素的风格,是给开发者的基础风格导向。颜色、排版、表格、列表项、图标使用、分隔符以及更多细节的元素定义都要包含在文档里。将所创建的元素拖进来,然后为每一个元素的使用设定规范。
*小贴士:元素要命名得当。尽管开发者最后会使用不同的类名,但对于参考来说是非常有用的。如果打算为网站的导航栏提供多种配色主题,那么用“首要主题颜色”和“二级主题颜色”来作参考比直接给颜色名更加方便。
2.组件文档
从多方面来说,这个文档和设计规范是同一类型,但是是不同等级的。组件中包含的元素有:登陆框、滑块、轮播、页头、页脚等等。
和普通的设计规范不同,它能帮助你在整个设计期间保持连贯性。这让开发者更加容易察觉那些重复的元素,那将大大加快开发进程。
如上所见,在响应式设计项目中,组件文档中最好能够说明组件在不同状态下的“行为”再一次说明,大多数开发者都太关注这些事情(也不想去关注)。
相信我,如果你没有将提示性文本高亮显示的话,他们根本不会知道在移动设备上它们是居中对齐的。
当你觉得你完成了你的工作时,将所创建的元素拖进来,然后设定使用规范,否则会因为没有规范,而去反反复复的修改内边距、颜色以及字体大小。
*小贴士:将组件导出成独立的PSB文件(Export components to separate .psb files.)。一个巨大的好处就是当你的客户需要修改东西的时候,你只需要更新一下特定的PSB文件即可,绝对是节约时间的利器。
3. 规格文档
最后一步是页面规格。当我们准备好设置元素和组件的风格时,唯一剩下的事就是为这些组件定义页边距(类命名和间距)。
在实际项目中,我们曾在阿迪达斯的网上商城这种大型平台上使用此法,真的是非常容易的就将他们分离开来:
应用3层组合(3 Layer Compositions),很容易导出:
我知道这看上去很痛苦,但作为一个交互设计师是很重要的环节。
很幸运,有一些十分有用的插件可以节约你的时间。其中之一就是specKing。这款工具可以指定上述所有组件的规格,但我更喜欢用它来处理间距和标签。
标准
website
css
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册