微信小程序制作
当前位置:网站首页 > 网站建设热文 > 西安网页设计时如何配色才算成功呢 返回列表

西安网页设计时如何配色才算成功呢

作者:admin 时间:2020-12-29 浏览量:391
颜色的存在不仅使您的网站看起来漂亮。颜色有一个更重要的功能-使您的网站可用。这就是为什么设计师在选择网站的颜色时,必须始终把可读性放在第一位,而美放在第二位。我们还将讨论使用的工具,所以请继续关注。当您考虑到可用颜色的数量时,似乎很容易挑选出一组可以很好地组合在一起并具有可读性的颜色。如果你坚持使用经典的背景颜色,如白色(FFFFFF),或非常浅灰色(f5f5f5,FAFAFA,FCFCFC等)。和前景颜色,如黑色(000000),或非常深灰色(080808,050505,030303等),或最轻/最暗的主要颜色(即红色,绿色,蓝色或任何颜色,你正在使用),你可能会想,为什么可读性是一个问题。然而,迟早你会厌倦这些经典的组合,每个人都在使用,你会想要一些更时尚的东西。
这就是你的问题开始的地方。这些更时尚的组合在美学上可能是令人愉悦的,但就可读性而言,它们不一定是赢家。当然,没有人说要在一组常用的组合之外找到好的组合是不可能的。有了正确的工具,我将在本文中提到,找到具有良好可读性的颜色变得更加容易。然而,在我们使用工具之前,让我们回顾一下颜色和可读性的一些基本知识。
颜色亮度由以下公式决定:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
注意:这个算法是从一个将RGB值转换为YIQ值的公式中提取的。这个亮度值给出了一种颜色的感知亮度。
色差由下列公式决定:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
色亮度差的范围是125。色差的范围是500。
这些公式看起来很神秘,很难理解,但是当您使用一个为您计算值的工具时,例如颜色对比工具,如果您选择的颜色是否通过测试,您很容易得到答案。
漂亮的-大胆的颜色-碰撞
但是,除非你想要重新发明轮子,寻找亮度和差异都很好的颜色组合,否则你可以坚持已经为你开发的安全选择,比如光线背景上的深色文本。
金色经典:灯光背景下的黑暗文本
所有相同的,黑暗的文本在一个轻的背景提供了最好的可读性。当然,这取决于您选择的颜色,但在白色上使用黑色时,可读性最高:
漂亮的-大胆的颜色-verde
正如您从上面的屏幕截图中看到的,可读性取决于字体大小(很明显,字体本身也是如此),一个好的工具会告诉您,您所选择的组合是否只适合标题,还是对标题和正文文本都有好处。
一般来说,字体大小越大,它的可读性就越强。不要太依赖于这一点,因为正如你所知道的那样,身体文本10-14是使用最多的大小(即相对较小)杭州网站建设费用多少,这意味着对于正文文本来说,你将无法使用标题可读的颜色。
黑色加白色并不是唯一的好组合。如果您想在使用白色作为背景颜色时看到更多优秀到良好对比的示例,请查看本文中的第一个表。
白色背景是相当常见的,但有时你会想要更多的颜色。例如,一些浅色的红色,绿色,黄色,蓝色等。制作伟大的背景时,使用黑色或其他非常深的前景颜色。这些组合不像使用黑色时那样可读性好,但比例仍然很好。
以下是背景颜色与白色不同,前景颜色与黑色不同的组合示例:
用于不同的背景和前景
许多设计师用来使页面更易读(也更令人赏心悦目)的一个小窍门是为背景使用渐变。一个渐变的白色和一个非常苍白的颜色的任何其他颜色工作最好。
嗯,你不能用可读性公式来测量它的亮度和对比度,但是如果构成渐变的两种颜色分别有很好的可读性值,那么结合起来,结果就更好了。
黑暗背景的错综复杂
黑暗的背景是非常令人沮丧的-这不仅是因为黑暗的颜色传统上与生活中不好的东西有关,至少在西方文化中是如此,还因为选择一种可读的前景颜色是非常痛苦的。
问题来自这样一个事实:即使你的对比值很好,这也不会使你更容易阅读课文。白色对黑色可能有最好的比例,但它会导致眼睛疲劳相当快。正如帕比尼·加布里埃尔·佩蒂特(Pabini Gabriel-Petit)所写,“在黑色背景下,高色度的黄色(#FFF00)、绿色(#00FF00)、青色(#00FFFF)和洋红(#FF00FF)提供了最好的对比。”
如果这些颜色组合,不管它们的可读性如何,给你的感觉是你回到了80年代或90年代初,当时显示器是绿色的,文本是橙色的,你并不孤单。
我从来没有使用过这样的古董显示器,所以我无法从经验中分辨出来,但当我登上一个背景暗、文字轻的网站时,我总觉得这是一台时光机,把我带回到二三十年前,而我的眼睛是第一个反对的。
好吧,黑暗的背景可能很可爱,但是当我不得不读一篇2000字的文章(以及下面的评论)时,这让我哭了-真的!一些关心他们的用户(和他们的眼睛)的网站提供了切换颜色的方法,所以如果你不喜欢默认的黑暗背景,你不会被迫观看它。
此杭州网站建设费用多少外,有许多方法可以覆盖网站使用的默认颜色,但我宁愿访问使用可读颜色方案的站点,也不愿花时间对颜色进行微调。
也许我会走极端,但杭州网站建设费用多少我个人永远不会建议对有大量文本可读的网站使用带有浅色字体的暗背景-我觉得这是一个可用性的罪过#1。对于其他类型的网站,比如杭州网站建设费用多少:浅谈网页设计中的配色方案画廊,甚至没有1000字文字的公司网站,黑暗背景也不是禁止的。
那些难以捉摸的颜色
在我讨论了两种最常见的场景-即光线暗和暗光时,剩下的唯一的事情就是讨论你能想到的所有其他颜色组合。
这些颜色组合包括大多数颜色,但出于某种原因,您既不能将它们用于背景,也不能用于文本颜色,因为无论您如何巧妙地组合它们,对比度都很低,或者组合不美观(或者两者兼而有之)。
当然,这并不意味着这些颜色是无杭州网站建设费用多少用的。一点也不-它们非常适合标题,特别是字体更大的标题,也很适合强调,从下面的例子中可以看出:
颜色对可读性有很大的影响。这就是为什么你需要明智地选择它们,这样它们不仅创造了美观的组合,而且使用户更容易阅读文本。文本是任何网站不可分割的一部分,我们不应该通过使用难以阅读的颜色组合来惩罚访问者。这是我们将向您展示一些伟大的网站的例子,使用大胆的颜色组合,以吸引观众的注意力。
受到这些粗犷的彩色网站的启发
设计师是如何做到这一点的?在目前的趋势下,如果你想做一个令人难以忘怀的声明,你需要做几件事:
一种色彩饱满的配色方案,它明亮得足以引起人们的兴趣,而又不会使他或她失明。
令人敬畏的、可能令人震惊的图像(一张照片或一幅插图)
一条独特的、非凡的标语。
然而,这并不容易实现。要获得一个美丽的,大胆的色彩设计,你需要仔细考虑。你还需要一些设计技巧和大量的勇气。
因为没有单一的一般规则为您的设计选择颜色,我只会给您一些灵感!这是为了帮助你锻炼你的创造性肌肉,因为颜色,在许多设计博客中讨论,是重要的网页设计。
因此,为了切入主题,我向你们展示了漂亮大胆的配色方案设计的例子。我希望它能为如何有效地使用这些颜色提供一些启示。
联系方式:18066528545   029-89298792

阅读过此文章的读者,还阅读过下面的文章

  • 小程序与原生APP那个好?下面我们就来一起了解一下小程序与原生APP那个好。以下是所整理的小程序与原生App的内容,希望对你有所帮助。

    小程序的优点:

    基于微信平台开发,享受微信自带的流量,这个优点最大
    无需安装,只要打开微信就能用,不占手机内存,体验好
    开发周期段,一般最多一个月就可以上线完成
    开发所需的资金少,所需资金是开发原生APP的一半不到
    小程序名称是唯一的,在微信的搜索里权重很高
    容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本没有大问题
    基本不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序
    发布,审核高效,基本上午发布审核,下午就审核通过,升级简单,支持灰度发布
    开发文档完善,社区活跃
    支持插件式开发,一些基本功能可以开发成插件,供多个小程序使用
    小程序的缺点:
    局限性很强(比如页面大小不能超过1M,不能打开超过5个层级的页面,样式单一,小程序的部分组件已经是成型的- 了,样式不能修改,比如幻灯片,导航)只能依赖于微信依托与微信,无法开发后台管理功能
    不利于推广,推广面窄,不能分享朋友圈,只能分享给朋友,附近小程序推广,其中附加小程序也收到微信限制
    后台调试麻烦,因为API接口必须https请求,且公网地址,也就是说后台代码必须发布到远程服务器上;当然我们可以修改host进行dns映射把远程服务器转到本地,或者开启tomcat远程调试;不管怎么说终归调试比较麻烦
    前台测试有诸多坑,最头疼莫过于模拟器与真机显示不一致
    js引用只能使用绝对路径,不能操作DOM
    原生App优点:
    原生的相应速度快
    对于有无网络操作时,譬如离线操作基本选用原生开发
    需要调用系统硬件的功能(摄像头,拨号,短信蓝牙…)
    在无网络或者弱网情况下体验好
    原生App缺点:
    开发周期长,开发成本高,需要下载
  • 小程序和Vue写法的区别?下面我们就来一起了解一下小程序和Vue写法的区别。以下是我所整理的小程序和Vue写法的区别,希望对你有所帮助。

    遍历的时候:

    • 小程序wx:for=“list”,
    • 而Vue是v-for=“item in list”

    调用data模型(赋值)的时候:

    • 小程序:this.data.item // 调用,

    • 小程序:this.setDate({item:1})//赋值

    • Vue:this.item //调用,

    • Vue:this.item=1 //赋值

  • 小程序调用后台接口遇到那些问题?下面我们就来一起了解一下小程序调用后台接口遇到那些问题。以下是所整理的小程序调用后台接口遇到的问题,希望对你有所帮助。

    数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序

    小程序不可以直接渲染文章内容这类型的html文本,显示需要借助插件
    注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其他的标签让插件来做
  • 分析微信小程序的优劣势?下面我们就来一起简单的了解一下微信小程序的优劣势。下面是所整理的微信小程序的优劣势,希望对你有所帮助。

    优势:

    容易上手,基础组件库比较全,基本不需要考虑兼容问题
    开发文档比较完善,开发社区比较活跃,支持插件式开发
    良好的用户体验,无需下载,通过搜索和扫一扫就可以打开,打开速度快,安卓上可以添加到桌面,与原生APP差不多
    开发成本比APP要低
    为用户提供良好的保障(小程序发布,严格是审查流程)

    劣势:
    限制较多,页面大小不能超过1M,不能打开超过5个层级的页面
    样式单一,部分组件已经是成型的,样式不可修改,例如:幻灯片,导航
    推广面窄,不能分享朋友圈,只能通过分享给朋友,附加小程序推广
    依托与微信,无法开发后台管理功能
    后台调试麻烦,因为api接口必须https请求且公网地址
    真机测试,个别安卓和苹果表现迥异,例如安卓的定位功能加载很慢

  • 简单描述下微信小程序的 相关文件类型。下面我们就来一起了解一下微信小程序的 相关文件类型。以下是所整理的微信小程序的 相关文件类型,希望对你有所帮助。

    wxml 模板文件,是框架设计的一套标签预言,结合基础组件,事件系统,可以构建出页面的结构

    wxss 样式文件,是一套样式语言,用于描述WXML的组件样式
    js脚本逻辑文件。逻辑处理网络请求
    json配置文件,小程序设置,如页面注册,页面标题及tabBar
    app.json 整个小程序的全局配置,包括:
    pages:\[所有页面路径]
    网络设置(网络超时事件)
    页面表现(页面注册)
    window:(背景色,导航样式,默认标题)
    底部tab等
    app.js 监听并处理小程序的生命周期函数,声明全局变量等
    app.wxss 全局配置的样式文件

  • 请谈谈原生开发小程序,wepy,mpvue的对比?下面我们就来一起了解一下原生开发小程序,wepy,mpvue的对比。个人认为,如果是新项目,且没有旧的 h5 项目迁移,则考虑用小程序原生开发,好处是相比于第三方框架,坑少。

    而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发,则比较适合 wepy 或者 mpvue 来做迁移或者开发,近期看wepy几乎不更新了,所以推荐美团的mpvue。
    而如果如果团队前端强大,自己做一套框架也没问题。

029-86195145 180 6652 8545 西安嘉瑞德网络科技公司
工作时间:周一到周六 8:30-18:30
邮箱:2528823962@qq.com
QQ:2528823962
地址:陕西省西安市未央元朔路明丰伯马都A座10820室
  • 微信小程序制作微信二维码
    扫码咨询
Copyright © 2015 西安嘉瑞德网络科技有限公司 陕ICP备17015187号-1