<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>奔向远方 &#187; 网页制作</title>
	<atom:link href="http://www.tisswb.com/archives/tag/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9c/feed" rel="self" type="application/rss+xml" />
	<link>http://www.tisswb.com</link>
	<description>结婚开始倒计时了，高兴~</description>
	<lastBuildDate>Tue, 19 Jul 2011 09:30:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>转载：概述网易网站设计思想</title>
		<link>http://www.tisswb.com/archives/450.html</link>
		<comments>http://www.tisswb.com/archives/450.html#comments</comments>
		<pubDate>Sat, 28 Mar 2009 17:39:17 +0000</pubDate>
		<dc:creator>笨二十一</dc:creator>
				<category><![CDATA[东拉西扯]]></category>
		<category><![CDATA[网站策划]]></category>
		<category><![CDATA[网页制作]]></category>

		<guid isPermaLink="false">http://www.tisswb.cn/?p=450</guid>
		<description><![CDATA[很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了，虽然这个观点也并不是完全错误的，确实门户网站首页是由这三 方面内容组织而成，但随着互联网的快速发展，用户对访问网站的要求也越来越高，在互联网行业，因为很多东西是免费和相似的，用户转移成本会比较低，在这个 网站有的东西去其他网站基本都能找到，只是输入个网址就可以了。网站营运商如果想留住用户和吸引更多的用户浏览自己的网站，那这个时候就是需要提高网站的 用户体验来满足用户多方面的需求。
因此现在门户网站的设计越来越讲究和更为用户着想，最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤， 其实有很多门户网站设计也会经历其中一些步骤，只是公司对这方面还没有一个很好的认识，没有一个系统的叫法和详细的职能分工，往往都是一个人身兼多职，大 部分都是按个人经验主观判断去决定，没有一些客观的数据支持。例如经常会有一些网站策划者说：我也是网站用户之一，这个功能我没有使用需求，其他用户也应 该没有使用需求可以删除。如果这时候有一份客观的使用分析数据就知道用户到底有没有这个需求了。虽然我们不可能全部都需要客观数据去做支持，但起码能以客 观数据为基础再延伸到其他设计中。
<span class="readmore"><a href="http://www.tisswb.com/archives/450.html" title="转载：概述网易网站设计思想" target="_blank">阅读全文——共2785字</a></span>]]></description>
			<content:encoded><![CDATA[<p>很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了，虽然这个观点也并不是完全错误的，确实门户网站首页是由这三 方面内容组织而成，但随着互联网的快速发展，用户对访问网站的要求也越来越高，在互联网行业，因为很多东西是免费和相似的，用户转移成本会比较低，在这个 网站有的东西去其他网站基本都能找到，只是输入个网址就可以了。网站营运商如果想留住用户和吸引更多的用户浏览自己的网站，那这个时候就是需要提高网站的 用户体验来满足用户多方面的需求。</p>
<p>因此现在门户网站的设计越来越讲究和更为用户着想，最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤， 其实有很多门户网站设计也会经历其中一些步骤，只是公司对这方面还没有一个很好的认识，没有一个系统的叫法和详细的职能分工，往往都是一个人身兼多职，大 部分都是按个人经验主观判断去决定，没有一些客观的数据支持。例如经常会有一些网站策划者说：我也是网站用户之一，这个功能我没有使用需求，其他用户也应 该没有使用需求可以删除。如果这时候有一份客观的使用分析数据就知道用户到底有没有这个需求了。虽然我们不可能全部都需要客观数据去做支持，但起码能以客 观数据为基础再延伸到其他设计中。</p>
<p>下面我们从几个方面来分析网易网站的设计思想：</p>
<p><strong>一、架构</strong></p>
<p>1、网站首页是兵家必争之地，每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率，总是希望把所有东西一下子让用户看到，但最后我 们就发现你放的东西越多，用户就根本找不到他想要的东西，快速离开的可能性很大。在国内的门户网站都习惯了资讯多、页面长，什么都往首页堆，感觉内容越多 会显的越大气，但用户的耐性是有限的，所以网页的通透性对国内网站很重要，每一屏的架构变化不宜太多，适当就好，主次内容信息位置保持一致性，不然用户每 浏览到下一屏都需要重新去解读架构，思考该从那里开始阅读，不但用户的耐性被消耗掉还会增加用户的浏览成本，所以网站首页的架构必须清晰明了，保持较好的 通透性，减少用户的浏览成本。</p>
<p>例如网易首页，采用三栏式结构，左栏为导航推荐区提供网易特色产品入口，中栏为主要资讯区，提供快速、全面、动态的各类新闻资讯，右栏为特色栏目区如博客、论坛等。各栏的内容属性清晰，用户能快速找到他们需要的信息畅顺的浏览不需要多余的思考。</p>
<p style="text-align: center;"><img class="size-full wp-image-370 aligncenter" title="e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac2" src="http://www.ued163.com/wp-content/uploads/2009/03/e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac2.jpg" alt="e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac2" width="204" height="239" /></p>
<p>据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。网易网站的架构也在往这个方向改进，不断的提升用户体验。网易资讯类页面大致可分为3类架构，下图是3类架构的视觉走向图。</p>
<p><img class="size-full wp-image-372 alignnone" title="e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac1" src="http://www.ued163.com/wp-content/uploads/2009/03/e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac1.jpg" alt="e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac1" width="569" height="312" /></p>
<p>网易首页采用第一种架构，各频道首页例如新闻、体育、娱乐等采用第二种架构，新闻最终页采用第三种架构。这样可使用户保持统一的视觉走向，无论浏览那个页面用户都知道他们需要的资讯在那里，符合用户浏览网页的习惯，减少用户浏览成本。</p>
<p><strong>二、风格</strong></p>
<p>相信多数人都很喜欢apple的产品，为什么apple的产品那么受大众欢迎，除了品牌影响力外，时尚简单的外观设计和界面设计，也是受欢迎的其 中原因之一，在apple的产品设计中让人感觉没有多余的东西，每一根线存在都是有意义的。还有在中国的书画史上，有很多艺术境界高远的作品都是少费笔墨 却格外传神（如郑燮的竹石、齐翁的墨虾）。虽然网站设计不能称作为一件艺术创作，但用最少的元素设计出最好的作品这个也是网站设计中所追求目标之一。</p>
<p>能用一根线表现出效果就没有必要使用2根线，能用文字表示清楚的就不需要用图片。页面设计如果使用过多装饰元素，会造成页面庞大下载速度缓慢，不 要高估网民的耐性，大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面，过多的色彩和装饰反而会分散用户的注意力，影响到用户浏览效 果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰（个性产品网站除外）。这也是网易门户一直沿用简洁风格原因之一。</p>
<p>例如新改版的网易新闻，打破了以往条条框框的感觉，取消了多余的线框，界面更清晰简洁，资讯内容更突出。</p>
<p><img class="alignleft size-full wp-image-374" title="e696b0e997bb1" src="http://www.ued163.com/wp-content/uploads/2009/03/e696b0e997bb1.jpg" alt="e696b0e997bb1" width="488" height="436" /></p>
<p>列举2个简洁风格做的比较好的外国门户网站<br />
<img class="alignleft size-full wp-image-375" title="e4be8be5ad90" src="http://www.ued163.com/wp-content/uploads/2009/03/e4be8be5ad90.jpg" alt="e4be8be5ad90" width="523" height="1139" /></p>
<p>Yaho新闻使用的是立体效果的设计，time是以线条为主的设计，2者给人感觉是简洁清晰没有多余的东西，既突出了资讯内容又不失美感。</p>
<p>每个门户网站的面向受众都不同，也会造成门户网站的风格定位不一样，例如面向受众年龄层比较年轻的门户网站，在设计风格可能会偏向多色彩多功能，而面向受众年龄层较大的门户网站，在设计风格上就会相反。但不管怎样的设计风格保持清晰方便用户浏览的界面是必要的。</p>
<p><strong>三、信息排布</strong></p>
<p>门户网站首页一般都会承载大量的资讯信息，密密麻麻的信息会让用户浏览网页的时候会产生压迫感，如何能让用户顺畅的浏览成为设计中重要的一环。</p>
<p>大家可以对比下面2张信息排布图，信息条数都是相同的但第一张信息排布图会让人感觉信息很清晰。而第2张图会让用户感觉到信息排布有压迫感，可能 还没有开始阅读就已经没有耐性了（忠诚度非常高的用户例外，但这类用户毕竟比较少）。所以在信息排布的时候到达一定行数时需要用一些留空做到视觉隔离，让 视觉上有透气的感觉。</p>
<p><img class="size-full wp-image-376 alignnone" title="e4bfa1e681afe68e92e5b883" src="http://www.ued163.com/wp-content/uploads/2009/03/e4bfa1e681afe68e92e5b883.jpg" alt="e4bfa1e681afe68e92e5b883" width="567" height="264" /><br />
<strong><br />
四、视觉顺序</strong><strong> </strong></p>
<p>每天的新闻会有重点和非重点之分，有新和旧之分（旧只是相对），大部分用户是希望先看最重要的后看非重要的，先看新的后看旧的这样一个顺序，那网站设计师就需要在视觉设计上引导用户去浏览，如下图示</p>
<p><img class="size-full wp-image-377 alignnone" title="e8a786e8a789e9a1bae5ba8fe59bbee589afe69cac" src="http://www.ued163.com/wp-content/uploads/2009/03/e8a786e8a789e9a1bae5ba8fe59bbee589afe69cac.jpg" alt="e8a786e8a789e9a1bae5ba8fe59bbee589afe69cac" width="468" height="401" /></p>
<p>在一个信息版块里，会有第一视觉区、第二视觉区、第三视觉区，就是说当用户看到这一信息版块时第一眼会落到图片的位置，第2眼会落到大标题上，第 3眼会落到其他地方。这样有顺序的引导用户浏览，可减少用户的浏览成本，增加页面的视觉效果。在这个信息版块里第1视觉和第2视觉有可能会因为选材方面而 转换视觉，按常理图型视觉冲击力是大于文字的，但当选用的图片素材不优的时候也会被文字所吸引过去。</p>
<p><strong>五、亮点</strong></p>
<p>在国内的门户网站有资讯多页面长的特点，当用户浏览到页面最底部而又需要浏览更多资讯的时候，可能需要拉到最顶部才能点击导航浏览其他页面，这是一 个比较费力的工程，一般门户网站的做法是提供一个“返回顶部”的功能，新改版的网易频道页面在这个位置提供一个和头部对应的导航，不需要用户二次点击就能 达到目的。如下图：</p>
<p><img class="alignleft size-full wp-image-378" title="e5b0be" src="http://www.ued163.com/wp-content/uploads/2009/03/e5b0be.jpg" alt="e5b0be" width="490" height="289" /></p>
<p>以上从几方面简单分析了网易网首页的设计思想，相信还存在很多不足的地方，但我们会不断的摸索和尝试，为网友提供一个人性化的网络平台而努力。</p>
<p>现阶段国内互联网行业和一些发达国家相比确实还有一段比较远的距离，特别是在网站用户体验上还处于摸索阶段，国人对浏览网站舒适度需求也在不断提升，因此 提高网站的用户体验是网站设计未来发展的方向。但因为用户体验是纯主观的，就带有一定的不确定因素，个体差异也决定了每个用户的真实体验是无法通过其他途 径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tisswb.com/archives/450.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>网页横排不间断平滑跑马灯效果代码</title>
		<link>http://www.tisswb.com/archives/164.html</link>
		<comments>http://www.tisswb.com/archives/164.html#comments</comments>
		<pubDate>Thu, 16 Oct 2008 01:48:18 +0000</pubDate>
		<dc:creator>笨二十一</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web技术]]></category>
		<category><![CDATA[网页制作]]></category>

		<guid isPermaLink="false">http://www.tisswb.cn/?p=164</guid>
		<description><![CDATA[今天需要制作一个带跑马灯效果的页面，发现在了这样一段不错的代码，可以实现不间断平滑跑马灯效果：
&#60;div id=&#8221;demo&#8221; style=&#8221;overflow:hidden;width:600px;color:#ffffff;&#8221;&#62;
&#60;table cellpadding=&#8221;0&#8243; cellspacing=&#8221;0&#8243; border=&#8221;0&#8243;&#62;
&#60;tr&#62;
&#60;td id=&#8221;demo1&#8243; valign=&#8221;top&#8221; align=&#8221;center&#8221;&#62;
&#60;table cellpadding=&#8221;2&#8243; cellspacing=&#8221;0&#8243; border=&#8221;0&#8243;&#62;
<span class="readmore"><a href="http://www.tisswb.com/archives/164.html" title="网页横排不间断平滑跑马灯效果代码" target="_blank">阅读全文——共841字</a></span>]]></description>
			<content:encoded><![CDATA[<p>今天需要制作一个带跑马灯效果的页面，发现在了这样一段不错的代码，可以实现不间断平滑跑马灯效果：</p>
<p>&lt;div id=&#8221;demo&#8221; style=&#8221;overflow:hidden;width:600px;color:#ffffff;&#8221;&gt;<br />
&lt;table cellpadding=&#8221;0&#8243; cellspacing=&#8221;0&#8243; border=&#8221;0&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td id=&#8221;demo1&#8243; valign=&#8221;top&#8221; align=&#8221;center&#8221;&gt;<br />
&lt;table cellpadding=&#8221;2&#8243; cellspacing=&#8221;0&#8243; border=&#8221;0&#8243;&gt;<br />
&lt;tr align=&#8221;center&#8221;&gt;<br />
&lt;td&gt;&lt;img src=&#8221;图片路径&#8221; width=&#8221;100&#8243;&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;img src=&#8221;图片路径&#8221; width=&#8221;100&#8243;&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;img src=&#8221;图片路径&#8221; width=&#8221;100&#8243;&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;img src=&#8221;图片路径&#8221; width=&#8221;100&#8243;&gt;&lt;/td&gt;<br />
&lt;td&gt;&lt;img src=&#8221;图片路径&#8221; width=&#8221;100&#8243;&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/td&gt;<br />
&lt;td id=&#8221;demo2&#8243; valign=&#8221;top&#8221;&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
&lt;/div&gt;<br />
&lt;script&gt;<br />
var speed=10//速度数值越大速度越慢<br />
demo2.innerHTML=demo1.innerHTML<br />
function Marquee(){<br />
if(demo2.offsetWidth-demo.scrollLeft&lt;=0)<br />
demo.scrollLeft-=demo1.offsetWidth<br />
else{<br />
demo.scrollLeft++<br />
}<br />
}<br />
var MyMar=setInterval(Marquee,speed)<br />
demo.onmouseover=function() {clearInterval(MyMar)}<br />
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}<br />
&lt;/script&gt;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tisswb.com/archives/164.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

