文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计经验技巧 → 提高网页设计水平的7点要诀

提高网页设计水平的7点要诀

时间:2010/2/8 17:51:00来源:本站整理作者:我要评论(1)

提高网页设计水平的7点要诀:

   1. 学好HTML和CSS编程 
    这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计,比如那些无法用网页实现的设计。要保持与时俱进,弄清楚现什么效果可以用现在的CSS技术实现,什么效果不可以。
    使用CSS3最新技术设计的经典案例 
  

    Atebits(http://www.atebits.com/)在网页文本中使用了文本阴影,这样就不需要使用图片了。它还使用了-webkit-transform和-webkit-transition来向这三个图标加入了一些动画,不过这些效果只有在支持webkit的浏览器中才能看到,比如Chorme和Safari。
  

    Elliot Jay Stocks(http://elliotjaystocks.com/)使用了一种叫做@font-face的CSS3方法来让浏览器下载特定的字体,这就免去了使用图片的麻烦。
    2. 注重细节
    好的设计和伟大设计之间的距离在于是否做好细节。
    优秀设计细节的例子 
  

    Metalab(http://metalabdesign.com/)很好的混合了着色(Shading)、渐变和阴影,为网页增加了额外的细节。
  

    We Follow(http://wefollow.com/)巧妙的使用了渐变和阴影,为其用户界面添加了很好的细节。
    3. 善于使用留白 
    世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字,页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息,但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间,减少阅读者眼镜的压力,从而让用户有一种愉快的浏览体验。 
    合理使用留白的例子 
  

    Soccernet(http://soccernet.espn.go.com/news/story?id=657760sec=transferscc=5739)在他们的文章页面中很好的使用了留白,你可以看出文字都离其它元素有一定的距离,从而提高了可读性。
  

   Usability Post(http://www.usabilitypost.com/)使用留白的方法和Soccernet差不多。   4. 图片很重要
    如果你有一个天才的设计,但却没有高质量的图片,那将是非常悲哀的。图片应当辅助你的设计来推销产品或传达一定的信息,或者仅仅来吸引眼球。 
    精彩图片的例子 
  

    Palm(http://www.palm.com/us/products/phones/pre/)在其Palm Pre产品页面上使用了一幅精美的图片来作为抬头。通过一种清新而动人的方式展示了其产品。
  

    Tom Pojeta(http://www.pojeta.cz/)在其页面上使用了绘画图片,为其站点带来了生气。 
    5. 充分发挥色彩的威力 
    色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意,因为它可以按照你的意愿来对用户进行一定的引导。例如,页面中的链接应当与页面正文文字的颜色有所区别,以便用户能够认出它们是链接。如果链接的颜色和正文的颜色差不多,那么用户如何能注意到它们并点击它们呢? 
    充分发挥色彩威力的例子 
   

    Sam Brown(http://sam.brown.tc/)在暗色背景上使用了许多种的颜色,当鼠标移动到链接上时其背景会变成彩色,以便链接能清晰的显示。
  

    MIX Online(http://visitmix.com/)采用了彩色的导航条,当点击一个彩色导航条以后,页面的背景色便会变成相应的颜色。
    6. 不要忘了页脚
    页脚设计经常被忽视,因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多,因为它们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。 
    页脚设计的例子 
&nb

相关视频

    没有数据

相关阅读 自适应网页设计四步搞定网页设计与PS设计中的常用命令规范解析Dreamweaver8掌握网页代码基本格式Web设计师应该重视的10个设计元素网页设计中的字体图形化设计技巧详细解析网页设计中色彩表达的含义及搭配原则注意用网页细节设计提升用户满意度:完美的瞬间如何提升网页设计师的工作价值

文章评论
发表评论

热门文章 Wordpress本地安装教程dx1.5如何设置二级域名

最新文章 hbuilder有哪些快捷键Wordpress本地安装教程 Wordpress本地安装教程expression web 4文档乱码解决方法dz 2.5“收藏本版”关闭小对话框无法关闭解在制作安装软件之前,您必须先将易语言存盘,

人气排行 如何使用multipart/form-data格式上传文件Photoshop PS图层混合模式详解(非常详细)ISAPI_Rewrite3使用教程网站里添加收藏和设为首页代码桌面快捷方式图标不见了C#获取执行程序所在的当前路径的方法详解(XMLHttpRequest)进行跨域请求方法如何用远程桌面连接进行传输文件