色彩的使用技巧与指针

 更新时间:2016年9月20日 19:04  点击:1563

  1. 了解你的网站所要传达的讯息和品牌。选择可以加强这些讯息的颜色。例如,如果在设计一个强调稳健的金融机构,那么就要选择冷色系、柔和的颜色,像是蓝、灰或绿。在这样的状况下,如果使用暖色系或活泼的颜色,可能会破坏了该网站品牌。

  2. 了解你的读者群。文化差异可能会使色彩产生非预期的反应。同时,不同地区与不同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色,但这样的颜色却引不起高年龄层的兴趣。

  3. 不要使用过多的颜色。除了黑色和白色以外,约选择四到五个颜色就够了。太多的颜色会导致混淆,也会拉走读者的注意力。

  4. 在阅读的部分使用对比色。颜色太接近无法产生足够的对比效果,也会妨碍观众阅读。白底黑字的阅读效果最好。

  5. 用灰阶来测试对比。当你在处理黑色、白色和灰色以外的颜色的时候,有时候会很难决定每个颜色的相对值。为了要确认你的色盘能提供足够的对比,你可以建立一个仿真网站,并将它转换成灰阶即可。

  6. 选择颜色要注意时效性。同一个色彩很容易就充斥着整个市场,且消费者很快的就对流行色彩感到麻木。但就另外一个角度来看,你可以使用几十年前的流行色彩,引起人们的怀旧之情。

  7. 选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色,例如标题和超级链接等。

  8. 注意网站色差问题。每一个网站开发人员都知道,即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的 gamma 值,并在不同的作业平台上测试你的色盘。




  先说这个“长”,中国网站的页面真是长啊,以至于我坐在电脑前浏览的时候经常会想,这个页面的最低端会不会已经搭拉到我的脚面上了。我们的万里长城是第几大奇迹来着?反正中国的网站应该紧排在她后面。

  我们的大型门户网站恐怕应该是长页面的领军者吧。现在能生存下来的大型门户各个实力不凡,又纷纷上市,其他网站能与他们页面相似应该也能说明实力相似吧,这几家大型门户已经给用户形成了“长则是好”的印象,于是众多网站都纷纷“长”起来了。无论是综合性网站还是专业性网站,只要有内容,就能做多长就做多长,没有内容,抄袭别人内容也要做长,以至于不少实力有限的网站只是首页很长,到了栏目页面(二级页面)就简陋的可怜了。

  长的基础就是要内容要多,这些众多的长网站在组织内容的思路上基本是一致的,就是把二级页面的内容摘要的放在首页上。首页分成若干个相应的通栏的大块儿(这样可以逐个部分的下载页面,易于显示),再在每两块之间加一条广告,最后再在页面的最上面加一个更综合的区域,所谓的重中之重,这样以来页面想短都短不了。

  按照Jakob Nielsen的说法:网站首页的长度不应该超过4屏。当然这个准则也未必就那么准确,但是至少应该承认页面不是越长越好的。

  第二,说说“闪”。就是网页上能动的东西 众所周知,网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样,我们将网页看作一张报纸、一本杂志来进行文字的排版处理,针对不同的需要,有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时,我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力;做一个新闻页面,可能会用到段落首字下沉等效果,用以强调某条新闻。

  在一张报纸上、一本杂志上要实现这些效果并不难,但是我们如何在网页上实现这样的效果呢?下面就向大家介绍几种文字排版处理的技巧。

  1、段落首行自动缩进

  每个段落的首行要缩进两个汉字大小是众人皆知的常识,我们通常在每个段落首行加上多个“ ”标签来实现缩进,这样虽然能够达到目的,但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。

<style type="text/css">
p{text-indent: 2em}
</style>

  通过上面的样式,页面中每段包含在标签<p>和</p>之间的段落都会自动缩进两个汉字字符大小。

  2、段落首字下沉

  我们阅读传统媒体时,经常看到如图1的效果,通过使用样式,我们也可以很轻松地实现类似效果。


图1 很常见的段落首字下沉效果


<style>
#chr:first-letter{font-size: 24pt;left: 0px; float: left;position: absolute }
</style>

  上面这段代码定义了一个首字大小为24pt的缩进,使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了,例如下面的段落:

<p id=chr>柳永(987?-1053?)字耆卿,福建崇安人。……</p>

  3、文字竖排效果

  如下面的一段诗文,在网页上显示时文字呈竖直排布,非常适合诗词的文字编排。

<div style="line-height: 18px; text-align: center; writing-mode: tb-rl">
<pre>
长恨歌(片段)<br>白居易<br>
汉皇重色思倾国,御宇多年求不得。
杨家有女初长成,养在深闺人未识。
天生丽质难自弃,一朝选在君王侧。
……
</pre></div>

代码

  标签中的样式规定了文字的竖直排布,并且每行的间距为18像素,文字为中间对齐。网页读取时都会自动将空格去除后才显示,在诗文内容开始和结束部分分别加上标签<per>和</per>,可以使诗文内容按照自己的意愿精确显示,其效果如图2。
  网站策划是成功网站平台建设成败的关键内容之一。在中国真正普及全职的网站策划人员严格讲是2002年,在之前更多是由技术性人才(软件项目经理、网站美工等)担任此项职位,随着中国互联网环境转晴,网站的高竞争使网站策划的地位突显。我们可以看到,许多真正处于领军性地位的网站平台90%具有一个特点——网站策划思路清晰合理,界面友好,网站营销作用强;因此专业的网站策划是未来网站成功的重要条件之一。
 
  在未来,网站策划呈现以下5大趋势:
 
  1.具备市场/销售意识,且掌握扎实技术的专业网站策划人才成抢手货

  网站定位决定了网站策划思想的宽度和深度,网站客户决定了网站策划思维形式,网站页面和程序的实现决定了优秀网站策划思想的表现力,网站市场/销售再次验证网站策划水平的高低;如果需要深入并运用上句的思想,就必须具备市场、销售、和扎实技术于一身,这种复合性网站策划人才则是现今大网站品牌竞争中不可或缺的人力资源,随着国家2001年开设电子商务专业,这种人才真正成熟须要再等5年以上;但由于网站越来越多,优秀的网站竞争越来越难,这种人才在5年内将从从事网站销售、市场、技术这三方面的人才中产生,其中当前网站竞争实力不高的情况下,技术人才转型是网站策划是当前现状,不过未来以市场/销售为主的人才转型,才能真正推动网站策划走向专业化。

  2.人机工程学思想将大行其道

  人机工程学又称人机工效学(Ergonomics),是一门让技术人性化的科学,一门关于技术和人的协调关系的科学。即如何让技术的发展围绕人的需求来展开,把人作为产品和环境设计的出发点,使其性能、色彩等更好地适应和满足人类的生理和心理的需要,从而使人们在工作中更安全、便捷和舒适,工作效率更高。其研究方法和评价手段涉及心理学、生理学、医学、人体测量学、美学和工程技术等多个领域。

  人机工程学已渗透至我们生活的每一个部分,例如:喝水的杯子,洗口的牙膏,使用的电脑…等各方面,人机工程学更是利于产品销售的优化剂,那么我们从专业网站策划看,更需要人机工程学帮助我们使网站平台更容易推销给目标客户。在未来人机工程学将使网站在以下方面得到质的提升:
人性化:通过引导性文字语言、图形语言、个性互动等方式,使网站平台更利于客户浏览,以吸引并留住客户。

  方便性:网站操作简便、易用,内容分布合理,符合客户的行为习惯。

  逻辑性:整体网站策划流程符合客户心理,且在充分分析客户行业特征的基础上,建立网站内部功能之间的逻辑转换,让客户享受整个访问过程。

  科学性:网站栏目策划、定位具备科学性,其既充分代表了网站的意图,又能充分调动访客继续点击,引导客户购买产品。

  控制性:网站在建立客户行为权限控制方面,必须符合公司业务规则,根据不同的客户类型产生不同的权限。

  交互性:建立异步沟通系统(帮助中心、留言板、操作指南…)方便客户与网站之间沟通;建立同步沟通系统(即时聊天、电话反馈…)达到即时双向沟通目标。

  界面友好性:心理学表明,适合的界面对于客户点击欲望的提升和印象指数的提升效果明显,网站界面是客户与网站交流的重要载体,在这点上网站策划师需要与网站设计师协作实现。但思想方法确保以下内容您做到了:

  a、 同样的界面对象是否具有一致性、连续性的行为?
  b、 各种提示信息是否简单、清晰?
  c、 色彩是否统一、协调?是否避免了同时使用太多的颜色?
  d、 文字内容是否简洁、重点突出?字体、字号、字型是否合适?
  e、 界面对象的动静处理是否得当?
  f、 布局是否合理、简洁、协调、美观,画面是否均衡等等?

  3. 文化理念全面渗透网站策划实战

  网站竞争从技术竞争、平台竞争,以及现在的市场竞争,经过几年的发展,未来将上升至“文化竞争”的高度,例如:新浪网络媒体、网易虚拟社区、阿里商人文化…..

  从历史的角度来看,经济可以推动文化的发展,文化却能够决定经济、政治的走势;

  从网站经营的角度来看,好的网站经营能够促使网站的客户不断的聚集、交流,逐步建立以网站或网站行业或网站性质为核心的文化;但网站或网络文化的建立却能够带动网站从量变至质变的转换,并且能够形成“马太效应”,对网站资本运作、市场运作、技术运作、人力资源运作等综合方面产生催化作用,使网站经营真正走向成功。

  从现有已形成文化的网站案例来看,新浪已成为中国甚至华人世界最具权威性质的网络媒体,它形成了与电视媒体、杂志媒体、报刊媒体、广播媒体并列的第五大媒体,其文化力量可见一斑;以网易为代表的社区交流型网站更是如此,网络游戏文化、网络交友文化更是深入人心,并对中国互联网普及进程产生决定性的推动作用;以阿里、当当、易趣、淘宝为代表的商人文化,对中国走向世界,世界了解中国,商人上网做生意的普及的贡献有目共睹;以前程无忧、CJOL、卓博、中华英才为代表的网上人力资源文化更是加速了全国人力资源高效互动。

<
[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06
  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31
  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24
  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24
  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31
  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • PHP实现无限级分类(不使用递归)

    无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
  • 双冒号 ::在PHP中的使用情况

    前几天在百度知道里面看到有人问PHP中双冒号::的用法,当时给他的回答比较简洁因为手机打字不大方便!今天突然想起来,所以在这里总结一下我遇到的双冒号::在PHP中使用的情况!双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧...2021-10-21