2分六合

  • 热门专题

建立设计体系规范之色彩篇

作者:wy  发布日期:2019-01-14 08:42:00
Tag标签:    
  •   在设计理念中最重要的就是色彩,一个好看的版面能给我们带来多大的起手,色彩不仅仅只局限于彩色丰富鲜艳等,还有一个很重要的关键那就是阴影,阴影是立体感的展现,是一个心情的释放,以下文章我们就来学习一下设计的色彩和阴影。

      在开始设计组件之前,我们需要为这些组件奠定基础。我们需要把产品分解成最基本的形式。

      即使是最简单的标题组件,它是多个可重用的风格的集合…

      我们需要打破思维直到我们到达最低点:最基本的风格。一个很好的起点是建立CSS样式属性。大多数的这些属性只能设置固定值,这样可以重用在每一个网站上。设置特定的属性值是最终会将我们的产品与其他产品区分开来。这些自定义值将定义我们全球化风格模式。我们的风格模式是我们将使用在设计和建造我们产品的每一个方面。

    2分六合  当我们完成设计时,每一个风格都存在于我们的产品预定义的全球化风格模式中。

    2分六合  让我们从最明显的样式属性入手,这是唯一一个样式属性可以用现代设计工具进行命名、存储和重用:颜色。

      我们的主要品牌色彩选择蓝色。辅色选择与其互补的:橙色。

      色彩搭配的成功与失败是一种常见的设计模式,让我们添加绿色和红色。颜色像黑色和黄色也会看起来很好。

    设计蓺喎?http://hkcren.com/design/wrss/rsso=" src="http://hkcren.com/uploadfile/2019/0113/20190113101305995.jpg" style="width: 614px; height: 670px;" />

      最后,我们需要一些灰色。大多数UI至少需要以下几种灰色:

      一个非常浅的灰色背景。

      一个稍暗的灰色作为边界、线条、分隔线。

      一个中度的灰色作为小标题,支持附加内容。

      一个深灰色作为主标题、内文和背景。

      当然,你可能需要更多的灰色。可能在内容上需要三个不同的色调。你可能喜欢两个不同的深度。这完全取决于你。重点是,预先确定的任何风格它们需要是可重用的在整个产品在稍后的阶段。最后一个点,我们还需要为每个颜色添加色调或阴影。这些在设计组件或者添加背景或深色线条中可能是有用的。

      阴影在UI中是另一种常用的样式属性。我们所看到的许多设计师仅仅是在设计的组件中加入阴影。这适用于大多数的样式属性。孤立地设计常常会导致不一致的用户界面。

      让我们退一步想想到底想要实现怎样的阴影。我们显然试图在UI中添加了一些阴影,但很可能许多组件可以受益于同样的效果。所以让我们从风格模式中分离出单个组件的样式。

      这四个阴影样式应该足以满足系统中的每个组件:

      一个淡淡的阴影用来表示交互式的组件。

      一个稍明显的阴影表示悬停效果。

      很大很深的阴影用于视角的下拉/弹窗和其他类似的组件。

      一个长阴影表示模态组件。

      我们描述了色彩和阴影在设计上的适用性,我们还解析了利用色彩和阴影能怎样的把设计感推到最高处,这些看似很小的设计理论对于设计来说是一个非常大的进步历程。想要学好怎样把设计感的美观放大,先从最简单的开始。

延伸阅读:

2分六合About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
  • <tbody id='s8jfy'></tbody>

  • <tfoot id='s8jfy'></tfoot>

      <legend id='s8jfy'><style id='s8jfy'><dir id='s8jfy'><q id='s8jfy'></q></dir></style></legend>
      <i id='s8jfy'><tr id='s8jfy'><dt id='s8jfy'><q id='s8jfy'><span id='s8jfy'><b id='s8jfy'><form id='s8jfy'><ins id='s8jfy'></ins><ul id='s8jfy'></ul><sub id='s8jfy'></sub></form><legend id='s8jfy'></legend><bdo id='s8jfy'><pre id='s8jfy'><center id='s8jfy'></center></pre></bdo></b><th id='s8jfy'></th></span></q></dt></tr></i><div id='s8jfy'><tfoot id='s8jfy'></tfoot><dl id='s8jfy'><fieldset id='s8jfy'></fieldset></dl></div>

          <bdo id='s8jfy'></bdo><ul id='s8jfy'></ul>