设计师如何为网站设计准则-网页设计培训
作者:一网学   最后更新时间:2014-06-11 16:55:33

专业设计师必读!如何为网站和应用创建设计准则


编者按:专业的设计师在每个项目开始之前就会创建一套设计指南与标准,如作者所说,这样可以优化工作流程,使设计保持统一,是每个严谨的设计该有的职业态度,也是成为专业设计师的奠基石之一。噢,对了,文中还推荐了很多实用方便的利器帮你创建这样一个指南呦。


推荐阅读:

网页设计中色彩搭配的原则和技巧

增强网页设计吸引力的5条原则

5个设计原则让通知更友好-网页设计教程【一网学】


@十萬個為什麽 :尽管做法不尽相同,一组指南总是所有项目最重要的起点之一。为每个项目创建指南(即使它原本没有)可以优化你的工作流程,也能使你的设计保持统一,并有望采取正确的开发方式。

这的确是设计师的责任。你不能怪开发者没有你那样的像素眼。你得指导他们。

从创建3种主要类型的文档开始。


  1. 样式指南

  2. 组件文档

  3. 页面标注


这套流程不推荐兼任前端开发的设计师采用。如果是这种情况,你需要多做一步,通过代码写出的风格指南和组件,创建一个单独的平台。你甚至会想在第二步就开始编写代码,省去剩余的步骤。

Bootstrap 和Purecss 就是两个知名的例子。确实,它们是完整的前端框架,或许比你正在进行的项目更庞大,不过你应该理解了吧?


1. 样式指南


样式指南明确了一个设计项目中每个元素的样式。它基本上是开发者最普遍的样式手册。在这个文档中,颜色、字体、表格、列表项、图标使用、分隔线和其他元素都有详尽的定义。一旦你创建好并设立了每种元素的相应规范,就可以拖放使用了。


专业设计师必读!如何为网站和应用创建设计准则


*提示:为元素命名。尽管开发者最终可能会用不同的class名,当谈论某个元素时也会非常有用。比如说,你给一个有渐变色导航栏的网站设计了不同主题。说#主配色 - #第二配色总比说这些颜色的名字好。


2. 组件文档


在许多方面,这个文档与样式指南完全相同,却是另一个层次的东西。组件是指类似于登录框、轮播图、旋转木马、页头、页尾等等。


这不同于通常意义的样式指南,这个文档有助于在整个设计过程中保持一致性。它能使开发者更轻易地辨认出重复的元素,使流程加速。


专业设计师必读!如何为网站和应用创建设计准则


从上面可以看出,在设计响应式项目时,将每个元素的“表现”包含进来是有好处的。再说,通常开发们不会关注这些事情(也不该由他们来关注)。


相信我,若你不强调一下CTA文字在移动端要居中显示,他们就不会注意。

一旦完成,拖放这些组件,确保从一开始就定下规范,防止最终样品陷入无休无止的调整:内边距、颜色和字号。


*提示:将组件导出成独立的.psb文件。这么做有个很大优势,你的客户决定改稿时,你只需要更新特定的几个.psb文件。确实很节省时间。


3. 标注文档


最后一步是页面标注。既然已经定好了元素和组件的样式。唯一剩下的就是引用这些组件,定义外边距(名称和间距)。

像下面这样将其分解真的很有帮助,我们之前把这种方法用在adidas网上商城和同等规模的平台上:

  1. 分别导出多个页面用到的组件。

  2. 导出页面。

两种导出方式中,我都用了3套图层复合,可以轻松完成导出:

  • Popup_Normal.jpg

  • Popup_Naming.jpg

  • Popup_Spacing.jpg


专业设计师必读!如何为网站和应用创建设计准则


我知道这一切看起来很辛苦,但作为交互设计师,它至关重要。

所幸,有些很棒的插件可以帮你节省一些时间。specKing 就是其中之一。这个工具可以标注之前提到的所有东西,不过我更爱用它来标注间距和标签。


专业设计师必读!如何为网站和应用创建设计准则


原文地址:designmodo


上一篇:怎样有效合理的评价你的设计效果-网页设计培训

下一篇:切图神奇Slicy使用技巧介绍-网页设计培训

其它免费教程

PS修图教程:5步学会PS风景修图+利器推荐

时间:2016-04-23 点击:1239

​小编:小喵很喜爱摄影,一直在研究摄影构图和累积修图知识的道路上蹒跚前行。本篇是小喵最近对使用 Ad...

用PS插件制造残旧刮痕风格【摄影后期培训】

时间:2014-10-24 点击:1869

总觉得照片画面太过平实吗?其实给照片加上残旧的刮痕效果,也是一种尝试的手法,制造方法也很简单,只需要...

设计师如何在爱好和专业之间平面?聊聊职业设计师的素养

时间:2015-03-30 点击:1293

为此我做了一个简单的分享,先说结论,我理解的职业设计师和设计爱好者、设计学科在读博士、设计院校老师等...

轻松制作GIF图!如何玩转PS时间轴的5个小技巧

时间:2016-05-04 点击:1911

小编:通过前两篇文章,我们已经知道制作动画的基本知识的和技巧,下面通过5个非常有用的知识点跟大家更深...

网页设计培训带你认识网页设计中的GRUNGE

时间:2014-09-01 点击:1574

GRUNGE 原意是摇滚乐的一种风格形式,描述音乐里那种嘈杂而失真的感觉,但在设计行业里,它有特别的...

更多设计教程>>


在家就能免费试听
多了解下对你最终选择总是有帮助的
姓名:
电话:
Q Q:
答案:
邮箱:
留言:
提交试听申请