LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
如何在网页设计中使用颜色
2016年1月30日

在网页设计中,对目前的网站配色(Landscape of color)认真琢磨一下还是非常有趣的。大多数网站或多或少相同,但是颜色的设计搭配却是一个非常给力的工具。

我并不想尝试去阐述一些具有革命性的东西或者是特别的发现。但如果大部分网站都采用同样的配色方案,那对颜色意味着什么呢?实际上,远超出你的想象。幻想一下整个世界的每一个网站都是非常漂亮和五彩缤纷的,但它同时也意味着千篇一律。这就像你文章中每一个段落的粗体。

因此,当配色方案比较柔和的时候,它允许有更多的机会。

        关注你想要的任何东西

许多网站都有一个基本的灰度配色方案-白色的背景和黑色的字体。(网页中)想让你看到的部分会赋予颜色作为强调。这就是为什么网页不会充满颜色—它们使用在想让你看到的按钮,标题或者链接上面。

263456ab230f32f875520f93ffe6.jpg

使用Vibrant,例如,当你第一次登陆它们的主页,主页的背景和图片是黑白的,网站标志,可点击的按钮和汉堡菜单是亮黄色,这些可以很快的(在灰度背景中)脱颖而出,吸引你的注意力。

另一个例子是Takeit; 当你第一次登录他们的主页就看一个大大的蓝色背景。然而,其他的都是白色的。最前面并且居中的大标题会让你的注意力集中在中间。同时,你的眼睛在很短的时间内就能注意尺寸较小但是仍然明显的APP商城的按钮。你可以看到是颜色如何指引用户的注意力的。

fa0d56ab234e32f875520f3e3a73.jpg

       创造个性

颜色是非常奇妙的,因为它可以设置一个网站或者品牌的语气和情绪。Beagle(很 遗憾,译者访问的时候,网站已经不在了)提供创建项目简介的服务,他们的网站使用了较轻的茶色。当你向下滚动他们的主页时,你会看到棕色,炭色,绿色,甚 至粉红色这样一些愉快的色调。世俗的色调(earthly tones)看起来专业和优雅,给人对于其所代表的公司(留下)一个非常好的印象。

An Interesting Day 网站它特指“在奥斯陆峡湾(Oslofjord)的一个小岛上举办的一个不可思议的,为期一天的会议”( “a weird, one-day conference on a tiny island in the Oslofjord”)。当红色的背景和红色的字体在上面的是偶,你一定会有一种怪异的不同的感觉。这不是我们每天看到的东西。这看起来很好,但更重要的 是这种配色方案传达了一种很明显的“怪异的”(weird)个性。

9c1f56ab246232f875520fbeb206.jpg


        写一个非常重要的声明

通过颜色做一个声明(statement)会很有趣。但你必须保证这个颜色很显眼并且能抓住用户的注意力。这很简单的说~。但对于语句来说也必须是 一个很好的颜色选择。你不能只是随便选取了一种亮色,(反之)它的外观和感觉必须对整个页面来说具有意义和目的性。举个栗子,这是Gaga Symphony的登录页面。当你登录到他们的界面,你会被亮丽的粉红色背景所包围。这不是你期待的交响曲。相反,你觉得交响乐应该更优雅,你期待静谧的色调。但是,不是这一个,Gaga交响乐是充满活力,有趣和创造性的。因此,(其所使用的)桃红色(hot pink)是有意义的。

602d56ab246d6ac7256cb0e6c378.jpg

       提供内聚(Cohesion)和流动(Flow)

颜色也可以指导用户使用流式页面。在上面的Takeit的例子中,她比较温和的准确指引了用户的注意力。颜色为了指导用户,它可以变得敏感 (subtle)但不需要戏剧性(dramatic)或者过分夸大(over the top)。尤其当各种颜色之间开始紧密结合时特别有效。这基本就是品牌颜色工作的原理。

看Marvel或者Dropbox。他们APP的配色方案都使用了明显的蓝色,但是你看在它们图形中的其他颜色,像绿色,橘黄色或者红色,非常恰当的搭配在一起;这样就让他们变得有意义了。

89be56ab24a26ac7256cb09c0194.jpg

一个不同的例子是Innovation Project Canvas。他们使用了绿色来指引用户(操作)沿着他们的页面滚动。你不需要使用许多颜色来创建一个漂亮的流式页面;仅仅使用一种颜色也可以做得更好。Innovation Project Canvas仅仅使用他们的绿色就达到了极佳的参与指导用户的效果。

6f0c56ab24d26ac7256cb040b9f3.jpg

        图片中的颜色

一个关于颜色的有趣的小窍门是通过图片去使用它。用户界面的基础不仅是给网站添加一些颜色而已。随着登录页面上照片背景和大产品图片使用的兴起,去使用合成的图片为你的设计带来色彩也是一个不错的主意。

eb7c56ab24e332f875520fd47876.jpg

CartoDB 是一个能够让你将地理位置数据可视化的APP。(CartoDB是一个开源的允许你在web上存储和虚拟化地理数据的工具,这个数据库通过灵活方式让开发 者更容易的创建地图和设计自己的应用。)有什么最好的方法可以炫耀它们的服务有多好而不是炫耀他们的地图有多美吗?那就是他们的主页。这是一个机智的方式 去为他们的的产品说话,同时为他们的页面增加视觉兴趣和色彩。

说到产品为它们自己说话,ETQ让 他们的鞋子大大胜过了他们的UI。这个网站风格非常简洁,以最低限度去延伸他们的配色方案。他们把重点放在他们的产品上。尽管他们不是所有的鞋子都像例子 中的一样富有色彩,但是要让他们的鞋子成为其设计中最大的颜色板块,仍然有一段很长的路要走。ETO真正的让鞋子脱颖而出。

150b56ab24f432f875520f9eed35.jpg

        谁需要颜色呢?

有趣的是看到网站没有颜色。有时候你不需要它(颜色)。网站没有红色,绿色或者蓝色也仍旧可以很华丽。灰度配色方案可以为品牌创建必要的外观和感觉以及发表声明。

2f2f56ab25006ac7256cb08b1b10.jpg

Visual Soldiers确实很好,没有颜色,就像Tomasz Wysocki’s portfolio。 这两个网站有同样的优雅。因为整体缺乏色彩,所以他们反而抓住了你的注意力。你想在一个CTA(引起用户动作)或是一个链接中找到一些轻微的蓝色或者绿色 的提示,但是这里没有。颜色的缺乏是这两个网站品牌的一部分。就算仅有黑和白两种颜色,他们看起来也同样的时髦和美观。

b33b56ab252032f875520fddfbfd.jpg

         结论

就像你所看到的,颜色是非常强大的。如果你能让颜色做一个设计,它可以做到许多事情。颜色可以通过流和重要的声明指引用户的眼睛,帮助指导用户。颜色充满个性,也可以十分有趣。对我而言,我认为颜色,或缺乏(色彩),赋予了设计生命。

微海报分享

Related posts

2020年9月14日

国家职业资格培训鉴定实验基地BIM证书


Read more
2020年9月14日

绿色建筑产业联盟BIM证书考证


Read more
2020年9月11日

2019全球建筑学院排名TOP 20


Read more
2020年8月6日

Illustrator快捷键


Read more

搜索本站

最新文章

  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日
  • 住宅小区BIM咨询 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模