分类: 网络教程

  • Web设计精确点滴

    Web设计精确点滴

    这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且我一直认为这些问题比较严重,正因为这些都是基本问题,很容易解决的,但把这种忽略养成一种习惯性的“经验”那就“杯具”了,然而这些细节问题也不同程度的代表了你的工作态度。当对一个位图的大小进行调整后,正常情况下会留下1px的毛边(如果你注意的话),边界会变得模糊,如果继续调整模糊度会加大,这个问题太不起眼了,以至于你无法用肉眼来理绘,我们先用商品图片举例子:

    也许单张小图还不够显注,下面对比一个列表图和大图,当然了除非你故意想要这种效果。


    放大2倍后对比

    放大2倍后对比

    另外不要试者调整带有边框的图片,最好是自己绘制,这个面两张对比图不用放大就能全面看到问题:

    2)关于边框和背景有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞,图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果,下面用几个例子来说一下:文字边框背景:

    因为区块加了边框后背景与边框之外的背景颜色相同,所以感觉空洞,所以最好是区块加上背景,而且背景色与边框最好是同一个基色。


    白色背景下,背景不要比边框太深,再努力的调整区块内容的颜色能与背景融合也于事无补,边框成了毛边。

    在深色背景下,才使用加亮边框。

    关于图片边框,图片本身就有背景,而且色彩是多样的,在给图片加边框时也最好是与图片背景同一个基色的背景,而且最好是取与图片最边上的色彩的深基色,如果是边上有多种颜色,取最多的那颜色,例:

    如果边框是用CSS定义的,而且是图列,比喻说是产品列表,而列表中的产品类别和背景色都不一致,就会出现边框与背景同色或不协调的情况,例如:

    上图中间一排图片边框的色彩就不协调了,如果在图片是不确定的情况下,加边框时最好是给图片与边框之间加上边框距。

    在看看在深色背景下的效果,深色背景下可以有两种方案,一是去掉外框,以白色间距边框,二是加亮外框,留出与背景相同颜色的间距。如下图:

    3)关于边距与对齐设计师寻找灵感时,偶尔会随意、自由的拖拉摆放区块、填色、绘制等,直到满意才会停下,在这个过程中会出现有与“经验”挂钩的细小漏洞,例如:

    下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。


    调整之后如下图:

    在看下面的例子:

    上图中区块上下间距与左右间距不匀称,和前几的列子一样,文字与区块上下垂直间距不协调,下图是修正后的结果。

    在来看一组给图片加框的效果:

    在来看图列间距:下面这个列图看似没问题,其实有两个细节问题(其中一个应该算是用户体验的问题)。首先第一列与第二列的间距要比第二列与第三列的距离要小2px,对于这个问题,有人会说这个间距用CSS定义就统一了,不会存在差异!注意了,我们讨论的是视觉设计,不能把这个问题丢给前端,否则你后面丢过去的更多(相信我),其次纵间距太小排的过于紧密。


    调整过后如下图:

    4)关于阴影与质感:在设计点缀版面时需要有深度和3D质感的时候,可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同,太强、太硬的质感只会让页面显得粗糙,web页面是个很细致的活,还是那句话,这里只说细节,先看图:


    阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离:

    理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。看下面的例子:

    上图Button和价格区块的投影没有质量,修改后如下图:

    其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。

    关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。

    就说到这里了,没时间往下说了,我要整理东走了,上面都只是你可能不注意的小小细节问题,你注意到的我也不会说了。

  • 视觉焦点-剖析网页设计中的几何圆

    视觉焦点-剖析网页设计中的几何圆

    你的设计为什么平平无奇,为什么吸引不到别人的眼球,这里先来说说什么是焦点(也可以称兴趣中心或者视觉中心),我认为用焦点更能简单准确的阐述。有人用通俗的方法来诠释焦点,在设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点,在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在你想让他关注的画面上,那样会让你的设计有重心和亮点。

    视觉焦点的处理方式

    人们用视觉获取环境中的信息,对你注意的周围都会是模糊的,你视线集中的中心点是最清晰的。第一张,视觉上呈现这样的状态是,视线上没有集中,整体模糊,是成方形的视觉框架。第二张和第三张,图中的两朵花在图形中是最漂亮的亮点,漂亮的东西会引人注意,你会注意到上一朵或则下一朵,注意任何一朵花的时候,眼球集中点会以圆的形状向外逐渐模糊,最中心点就是焦点。圆形作为设计中的元素的时候,自然更加的适应视觉上的感知。

    视觉强弱

    美女其实可以独立成为一个视觉焦点,但当我们给美女加了圆形边框后,视觉焦点就转移到圆形边框包括到的美女上,最后将圆形填充,视觉焦点就转移到填充色的圆形的美女上。

    下面本人做了点对比图片

    图1 整体画面平平,人物排列没有层次,视觉上给人感觉很散。

    图2通过添加圆形背景框,会让你想表达的图形首先进入用户眼球。

    图3不仅添加圆形背景框,再区分人物大小,主次分明,焦点突出,画面活跃立体。

    几何的对比

    上图中我们可以看到,方形过度到圆形的变化,圆形是由极其细小的边角组成,在变化当中图形变得越来越有乐趣,比较下来圆形在几何图形中具有平滑流畅的边缘,圆形更让人感觉轻松,愉悦。设计需要增加乐趣的时候,我们可以多运用流畅线条的图形来让页面活跃起来。

    实例效果进行比较

    在这个页面上圆形挑起了大梁,支撑整个页面,人物笑脸图片组合的圆形包围着瓶子,映射了这个饮料带给我们的快乐。圆形不仅加强了焦点,更加强了页面的层次感,让页面不会单薄,无力度。

    虽然同样用加框的形式来集中物体焦点,同圆形边框相比整体画面呆板,僵硬,缺失了活跃的感觉。

    富有节奏的设计,连贯的圆形元素组合,网站的主体富有节奏的形状,营造了网站活泼的气氛。方形的组合结构使得网站变得严谨许多。

    圆形对价格的标注,让用户对这诱惑的价格更加的感兴趣,很好的营造了商品的气氛。

    圆形元素和其它几何图形比较,具有圆滑的特点,让人感觉轻松,愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。我们都在不断尝试如何让页面变的美观而生动,创造富有活力的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,运用有趣的圆形来设计页面是设计中很有效的方法

    原文:http://www.xmued.com/?p=1122

  • 十个创意的环保袋

    十个创意的环保袋

    阿姨好大力气啊,提着一箱子可乐满街逛.嗯,看错了是吧,那只是个手提购物袋啊.

    这位仁兄谁啊,购物袋厂家BOSS的仇家?购物袋厂家的人看来还真是都不能得罪的哈.

    看哪店员的表情吧,都猜猜这个购物袋的后面画的是什么吧!

    对于男士来说,陪女友购物就等于健身了吧!还用画的这么直白?

    大家都来拯救动物吧!

    这个呢?多少有点 儿童不宜 吧.至于成人,咳咳,自己选吧!

    哥哥玩魔术是吧,哦,是这样啊,原来线是画上去的啊.

    提绳与图结合的很巧妙沃!

    好大一"包"啊,不至于什么东西都放到"里边"吧!

     

  • 原创:个性化边栏TAG标签云展示,去除TAG的[li]标签

    ZBLOG侧边栏默认的TAG列表用的是<LI>排列的..现在我们就做一个我现在用的TAG列表效果.首先看效果.

    1,打开FUNCTION目录下的c_system_base.asp文件,找到以下代码:

    Function BlogReBuild_Tags()

    上面一行是生成TAG的函数然后紧跟下来找到如下代码, 这是是生成TAG列表的

    Set objRS=objConn.Execute(“SELECT * FROM [blog_Tag] ORDER BY [tag_Count] DESC,[tag_ID] ASC”)If (Not objRS.bof) And (Not objRS.eof) Then  Do While Not objRS.eof   If j=i Then Exit Do   strTag=strTag & “<li><a href=”””& Tags(objRS(“tag_ID”)).Url & “””>”+Tags(objRS(“tag_ID”)).Name + ” <spantag-count””>(” & Tags(objRS(“tag_ID”)).Count & “)</span>” +”</a></li>”   objRS.MoveNext   j=j+1  LoopEnd IfobjRS.CloseSet objRS=Nothing

    !!!注意了:上面中间一行红色的就是我们现在要修改的内容..(如果各位博客不懂ASP,其它的代码不要动..)

    2.首先删掉两边的<li>和</li>标签..这样TAG就横行排列了..这样做的目的是让那些不熟悉CSS的朋友方便修改.代码变成如下..strTag=strTag & “<a href=”””& Tags(objRS(“tag_ID”)).Url & “””>”+Tags(objRS(“tag_ID”)).Name + ” <spantag-count””>(” & Tags(objRS(“tag_ID”)).Count & “)</span>” +”</a>”

    这样做以后还是达不到有些标签想要加大加粗的效果…怎么办呢..当然了,我首先想到的还是用CSS控制每个TAG,如果想要个别TAG加大或加粗显示,接下来怎么做.紧跟着我就想到了TAG管理里面有一个摘要功能…0.0..(小小的说一声..到目前为止我还不知道这个摘要是干嘛的.既然这样,我就让它为我所用), 接下来在CSS里定义好12到20的字体大小,比如然后在这里引用就可以了..

    3.TAGE加样式,代码变成如下:strTag=strTag & “<a href=”””& Tags(objRS(“tag_ID”)).Url & “””  class=”””& Tags(objRS(“tag_ID”)).Intro &”””  title=””总数:”& Tags(objRS(“tag_ID”)).Count &”””>”+Tags(objRS(“tag_ID”)).Name + ” <spantag-count””>(” & Tags(objRS(“tag_ID”)).Count & “)</span>” +”</a>”

    (蓝色是新增加的),到这里代码修改完成了..然后第四步

    4.在CSS里加控制TAG字体大小的CSS,我自已加的如下:

    #divTags ul a span.tag-count{ display:none}#divTags ul a.css13{ font-size:13px}#divTags ul a.css14{ font-size:14px}#divTags ul a.css15{ font-size:15px}#divTags ul a.css16{ font-size:16px}#divTags ul a.css17{ font-size:17px}#divTags ul a.css18{ font-size:18px}#divTags ul a.bold{ font-weight:bold}

    5..OK!到这里基本上就算完成了…然后最后一步  .进后台.. 编辑TAG.如图

    在摘要里面可以填上CSS,就OK了.

    然后重建…首页刷新…看效果.!!!!!

  • js+css结合高亮导航当前页链接

    很多朋友在做网站的时候可能遇到这样一个问题,如何高亮导航当前页链接以下是代码

    <script type="text/javascript">
    
    function currentpage(){
        if(!document.getElementsByTagName) return false;
        if(!document.getElementById) return false;
        if(!document.getElementById('nav')) return false;
        var nav = document.getElementById('nav');
        var links = nav.getElementsByTagName('a');
        for (var i=0;i<links.length;i++){
            var linkurl =  links[i].getAttribute('href');
            var currenturl = document.location.href;
                if(currenturl.indexOf(linkurl)!=-1){
                    links[i].className = 'on';
                    return true;
                }
        }
    }
    
    </script>
    
    <style type="text/css">
    #nav li a, #nav li a:hover {
        background: #f60;
        color: #fff;
    }
    #nav li a.on, #nav li a:hover.on {
        background: #000;
        color: #6f0;
    }
    </style>
    <div id="nav">
      <ul>
        <li><a title="首页" href="1.html" >首页</a></li>
        <li><a title="日志" href="2.html">日志</a></li>
        <li><a title="链接" href="3.html">链接</a></li>
      </ul>
    </div>
    <script type="text/javascript">currentpage();</script> 

    相关资料:http://sakuracomic.spaces.live.com/blog/cns!97fd0e4f75f1d939!326.entry

     

  • zblog 相册分类名称无法显示解决办法

    此问题网上流传的解决办法是修改为<#CACHE_INCLUDE_WINDSPHOTO#>或在 后台—插件管理下—WindsPhoto 后台首页—静态首页生成 但经反复测试,其实此方法也是不正确的..

    后来我修改为<#CACHE_INCLUDE_WINDSPHOTO_SORT#> 以后,这个问题终于完全解决了…嗯,写在这里,以防下次修改模板以后被还原..