?? 安徽快三基本走势图:网页设计不能不知道:HSB色彩模型的用途 - 设计资讯 - Co. Ltd.安徽快3预测一定牛
  • 不回避不畏惧 广东把污染防治攻坚战打成歼灭战 2019-05-18
  • 滨江区:住宅小区平安指数常态监测和应用机制 2019-05-18
  • 晋中3500万打造“139记忆项目” 2019-05-11
  • 广西宣讲十九大:唱支山歌进乡村 唱到田头唱到心 2019-05-11
  • 民生时评:上海支付宝回收垃圾并不现实(原创首发) 2019-05-07
  • 【印度】 狄伯杰:上合为国际现实问题提供“解药” 2019-04-30
  • 【理上网来·辉煌十九大】认识把握习近平新时代中国特色社会主义思想的内在逻辑结构 2019-04-30
  • 海淀区首个村煤改电项目完工 2019-04-29
  • 骞垮窞甯傜綉缁滃晢鍝佷氦鏄撲笌鏈嶅姟鐩戠骞冲彴 2019-04-19
  • 女性之声——全国妇联 2019-04-19
  • 韩国:关注平昌冬奥会——朝啦啦队抵达  韩方举办欢迎晚宴 2019-04-09
  • 男子尾随女生抱腿抢走鞋子 物业:刚高考完喝多了 2019-04-07
  • 广播电视节目制作经营许可证 2019-04-03
  • 高清:2018年俄罗斯世界杯正式开幕 罗纳尔多亮相 2019-04-03
  • 抉择!欧文若长留绿军会损失8100万 恐会被安吉交易 2019-03-29
  • ?

    安徽快三基本走势图:网页设计不能不知道:HSB色彩模型的用途

    安徽快3预测一定牛 www.ktyjk.com 点击数:4422018-03-31 18:00:28 来源: 网页设计

    新闻摘要:对许多设计师来说,配色可能是一项体力活,每到配色这一步前后测试了无数版本依然调不出满意的颜色。

    网页设计不能不知道:HSB色彩模型的用途


      对许多设计师来说,配色可能是一项体力活,每到配色这一步前后测试了无数版本依然调不出满意的颜色。

      后来我们学会了偷懒的方法,直接在现有界面上吸取颜色。但这并不是长久之计,每个产品的配色方案都应该是独一无二的。色感好的人可以靠感觉轻松配出漂亮的颜色,但色感差的我们就需要掌握这其中科学的方法,因为任何事物都是有规律的,只要找到了其中的规律并加以运用练习,我们就能迅速的掌握这一技能。

      今天我会介绍一种运用HBS色彩模型的配色方法,以及在APP色彩规范上的运用,同时结合目前主流产品的配色,结合该模型进一步的分析讲解。这个模型也是许多BAT设计团队推荐的配色模型,使用这个色彩模型能帮助我们在调色时对颜色有明确的心理预期,帮助我们快速高效的搭配出科学美观的色彩。


      什么是hsb?

      HSB是一种将RGB色彩模型中的点放在圆柱坐标系中的表示方法,在概念上可以被认为是色彩的圆柱体(黑色在下白色在上)。如下图所示,圆柱的中心轴为灰色,以中心轴为角度变化的值称为“色相(H)”,到中心轴距离变化的值称为“饱和度(S)”,而沿着中心轴高度变化则称为“亮度(B)”或“明度(V)”。

      HSB色彩模型以直观的方式表达了关于颜色的信息:“这是什么颜色?深浅如何?明暗如何?”。通过该模型,我们只需通过简单的数字就能轻松判断出该数值的颜色,这是十六位进制码所做不到的。下面分别演示三种数值的变化带来色彩的改变。


      色相(Hue)是色彩的相貌,也就是我们常说的红、橙、黄、绿等颜色名称。色相值按位置度量,在HSB色彩模型中红色为0°,黄色为60°,绿色为120°,青色为180°,蓝色为240°,品红色为300°。十二色相环每一色相间距30°,二十四色相环每一色相间距15°。

      饱和度(Saturation)表示色彩的纯度,取值范围0~100%,从色环中心向外递增。当饱和度为0时点在中心,则显示为灰、白、黑无彩色。当饱和度达到100%时,点则移动到色环边缘,会显示每个色相最纯的色光。如下图所示,在色相(H)、亮度(B)不变的情况下减少饱和度(S)颜色逐渐变淡最后变成白色。

      亮度(Brightness)指色彩的明亮度,取值范围0~100%,沿着圆柱体底部向上递增。亮度为0时即黑色,点处于最底部。当达到100%时点上升到顶端,会显示色相最鲜明的状态。

      HSB在UI中的运用

      通过上述的讲解,我相信你一定对HSB模型有了基本的认识。但可能你还是不太了解如何具体运用在项目中。下面我将演示通过运用该模型来制定一套色板。

      在线上产品色彩规范中,一般会包含主色、辅色、灰度色。主色一般使用app图标中的品牌色。辅色则会使用主色的对比或者邻近色。我们以iOS规范中的红色为例。在色环上加减15°~30°可以得到一组邻近色板,加减120°则会得到一组互补色板。在实际运用中可以上下浮动20°左右,达到视觉协调的最佳状态,再配合明暗的变化,可以使色彩更有韵律和协调。

      灰度色在app页面中也会被大量使用。合理的运用灰度色能够令页面信息具备良好的主次层级关系,提升浏览体验?;叶壬?、白、灰,在灰度色值中色相(H)和饱和度(S)都为0,只需改变亮度(B)值。上文中我们有了解到,当亮度(B)为0时即黑色,点处于最底部。当达到100%时点上升到顶端,会显示色相最鲜明的状态。我们只需通过亮度(B)值的规律变化可以轻易的调色出一套简单好记的色板。

      在渐变色中的运用

      HSB模型对渐变色的搭配也非常方便,许多APP页面的导航ICON会运用微渐变背景提升质感,通过HSB模型会发现其中微妙的关系。通过饱和度由低到高产生的饱满的渐变质感。以及配合色相角度的变化。色相环模型玩具部屋 //alleyoop.com.tw/中越接近的色相渐变出来的颜色越自然。明度值(B)控制在75%以上色彩会更加通透,不会显脏。

      实际项目中的分析

      最后通过HSB模型对目前线上产品的部分颜色吸取,仔细分析会发现其中许多相似之处。

      支付宝主色为冷静的蓝色,使用互补的暖色系图标给页面增添了活力,仔细观察主色H值与辅色色相(H)值分别处于色环中加减165°左右的位置。

      同色系搭配的小红书主色相(H)值十分接近,主要通过改变降低饱和度(H)来突出价格和标签。

      严选整体配色素雅,颜色使用上十分克制。标签使用了和主色距离30°的邻近色黄来突出信息。

      以上色值为sketch吸取,与实际可能存在偏差,主要是给大家提供一种思路,并没有绝对的方法和公式。

      结语

      虽然目前各种配色工具越来越多,我们可以在几秒内就能迅速得到一个很好的配色方案,但作为设计师的我们了解色彩的基本理论是很有必要的。在实际的设计过程中,会遇到各种各样的问题,要考虑的因素也会十分复杂。配色是理性与感性的结合,我们需要做的只是在两者间找到平衡。熟悉配色原则能帮助我们快速解决相关问题,提升工作效率。

    优势

    SUPERIORITY

    为一流企业提供金牌网络服务

    我们为客户提供一站式服务,没有最好的方案,只有最适合每个企业的设计方案……

    理念

    IDEA

    持续追求更高品质

    艺之都团队的十年,是一个典型的技术团队成长的十年。一群年轻人,追着梦想,从无到有,从痴迷小组到精英团队艺之都从成立的那一天开始永放光芒……

    售前咨询
    0755-33563420
    免费网络问题咨询
    免费网络解决方案策划
    免费网站问题诊断
    免费网店问题诊断
    免费网站网店推广咨询
    服务与支持
    网站建设
    微信开发
    APP开发
    网店装修
    网站推广
    网店运营
    大数据服务
    营销培训
    服务器租赁
    账号与支持
    合同申请
    转账付款
    线下汇款
    索取发票
    快速入口
    网站管理
    备案管理
    账号管理
    域名信息查询
    域名控制台
    服务器控制台
    其他服务
    客户案例
    新品活动
    海外服务
    技术论坛
    注册公司
    财务代理
    VI设计
    资源推荐
    提交建议
    关注艺之都网络
    企业决策者必读
    艺之都网络APP
    艺之都微信
    艺之都微博
    艺之都服务中心

    核心产品:  营销型网站系统  微信分销商城系统  网店运营系统  大数据精准营销系统  域名注册备案  游戏开发运营

    增值服务:  工商注册  财务代理  VI设计  LOGO设计  营销策划  网站备案  短信服务  企业邮箱  WHOIS查询  网站模板  服务器维护

    更多推荐:  企业线上方案  品牌线上方案  线上商城方案  社交直播方案  医疗网络方案  旅游线上方案  精准营销方案

    关于艺之都    法律声明    廉政举报    荣誉查询    友情链接

    艺之都网络  深圳网站建设  东莞网站建设  广州网站建设  上海网站建设  北京网站建设  南阳网站建设  【添加分公司链接】

    2007-2019 www.ktyjk.com 版权所有粤ICP备:14099120号-3

    深圳市艺之都网络科技有限公司  深圳市龙岗区坂田商业广场禾田步行街二层

  • 不回避不畏惧 广东把污染防治攻坚战打成歼灭战 2019-05-18
  • 滨江区:住宅小区平安指数常态监测和应用机制 2019-05-18
  • 晋中3500万打造“139记忆项目” 2019-05-11
  • 广西宣讲十九大:唱支山歌进乡村 唱到田头唱到心 2019-05-11
  • 民生时评:上海支付宝回收垃圾并不现实(原创首发) 2019-05-07
  • 【印度】 狄伯杰:上合为国际现实问题提供“解药” 2019-04-30
  • 【理上网来·辉煌十九大】认识把握习近平新时代中国特色社会主义思想的内在逻辑结构 2019-04-30
  • 海淀区首个村煤改电项目完工 2019-04-29
  • 骞垮窞甯傜綉缁滃晢鍝佷氦鏄撲笌鏈嶅姟鐩戠骞冲彴 2019-04-19
  • 女性之声——全国妇联 2019-04-19
  • 韩国:关注平昌冬奥会——朝啦啦队抵达  韩方举办欢迎晚宴 2019-04-09
  • 男子尾随女生抱腿抢走鞋子 物业:刚高考完喝多了 2019-04-07
  • 广播电视节目制作经营许可证 2019-04-03
  • 高清:2018年俄罗斯世界杯正式开幕 罗纳尔多亮相 2019-04-03
  • 抉择!欧文若长留绿军会损失8100万 恐会被安吉交易 2019-03-29
  • 安徽时时彩平台注册码 福彩3d字谜图谜大全 排列5走势图 排列五开奖公告 15选5 香港六合彩资料图库 上海基诺彩票为什么还是5分钟一开奖 时时彩后二 北京赛车pk10下载 北京赛车pk10官方 中国竟彩网体彩直播 七星彩头尾 北京pk10直播盛 双色球八区分布图 幸运农场手机安卓 快乐扑克3对子周期表