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

    在网页设计中,对目前的网站配色(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的例子中,Takeit的颜色搭配用比较温和的方式去引导用户的注意力。事实上,颜色在指导用户方面,它可以变得敏感 (subtle)但不需要戏剧性(dramatic)或者过分夸大(over the top)。尤其当各种颜色之间开始紧密结合时特别有效。这基本就是品牌颜色工作的原理。

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

    89be56ab24a26ac7256cb09c0194.jpg

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

    6f0c56ab24d26ac7256cb040b9f3.jpg

            图片中的颜色

    一个关于颜色的有趣的小窍门是在图片里去体现颜色。UI设计的基础不仅是给网站添加一些颜色而已。随着网页使用高清图片做背景和大产品图片使用的兴起,多使用合成的图片为你的设计带来色彩也是一个不错的主意。

    eb7c56ab24e332f875520fd47876.jpg

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

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

    150b56ab24f432f875520f9eed35.jpg

            谁需要颜色呢?

    有趣的是有些网站反其道而行,他们尝试使用尽量少的颜色进行设计。网站没有亮丽的色彩点缀也可以变得很华丽。灰度配色方案可以为品牌创建必要的外观和感觉以及展示核心的思想。

    2f2f56ab25006ac7256cb08b1b10.jpg

    Visual Soldiers就是一个优秀的例子,其配色方案非常的简单,甚至是单调,就像Tomasz Wysocki’s portfolio。 这两个网站有同样的优雅。因为色彩单调,所以他们反而抓住了你的注意力。也许你会想在他们页面中的一个CTA(引起用户动作)或是一个链接中找到一些轻微的蓝色或者绿色的提示,但是这里没有。使用尽可能少的颜色是这两个网站品牌的一部分。就算仅有黑和白两种颜色,他们看起来也同样的时髦和美观。

    b33b56ab252032f875520fddfbfd.jpg

             结论

    就像你所看到的,颜色是非常强大的。如果你能让颜色自己去做一个设计,它的本领会远远超出你的想象。颜色可以通过流式(flow)和重要的声明(statement)引导用户的注意力,帮助指导用户。颜色充满个性,也可以十分有趣。对我而言,我认为颜色,或缺乏(色彩),赋予了设计生命。

    So have fun with it.

     

    (由于译者水平有限,文中多部分属于意译,翻译不佳请读者原谅,若有翻译错误请读者不吝指出,十分感谢)

    原作者:Paula Borowska      创作于:November 23, 2015     原文链接:http://designmodo.com/web-design-colors/

    译    者:睦宇博客—一个网页设计爱好者的博客         译文链接:http://www.muyublog.com/125.html

    微海报分享

    Related posts

    2020年8月6日

    Illustrator快捷键


    Read more
    2020年4月20日

    3-3 课 Keyshot渲染实例(吉他)——材质图的应用


    Read more
    2020年4月20日

    3-2 课 Keyshot的HDRI贴图的编辑功能


    Read more
    2020年4月20日

    3-1 课 Keyshot场景的视频教程


    Read more

    严老师电话|微信|

    手机:18902259698

    QQ咨询

    严老师 QQ 275043888

    QQ联系咨询课程

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

    地址:广州天河北路703号 曜一城 C座 21 楼 08 联系电话18902259698

    ©2018 晶网设计 粤ICP备10225019号-1