Posts Tagged ‘ericy’

CSS半透明层的实现非透明文字层和半透明图片层立体效果

This item was filled under [ 设计理论 ]

 CSS半透明层的实现,主要就是灵活运用filter中alpha的效果,使两层之间产生立体效果。  在本示例中,最低层的是一张图片,上边是一个透明度被定义为60%的Div层,层内是文字,因为上面的曾非100%透明,因此可以看到下层的图片,也就是文字层盖住的地方半透明显示下面图片,没用盖住的地方,还是完整显示下面的图片,形成立体效果。  例子代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> CSS半透明层的实现</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style> #container { position: absolute; top: 20px; left: 20px; width: 400px; height: 300px; background: url(images/pic.jpg) no-repeat; } #container .textblock { filter: alpha(opacity=60); opacity: 0.6; margin-top: 50px; margin-left: 50px; width: 280px; background: #ffffff; border: 1px solid [...]

Continue reading...

Tagged with: [ , , ]

[转]2011年网页设计趋势分析与预测

This item was filled under [ 设计理论 ]

        设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计,那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联系(constant connection)和虚拟现实(virtual reality)。   作为设计师的你,2011年会作神马打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师,给用户创造一个梦境,让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素:优秀的配色,直观的设计,良好的交互性和快的响应速度。此外,永远不要低估简约的力量。2011年,你的设计不但要考虑笔记本、台式电脑,还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗?   2011年网页设计趋势有何变化?一起关注11个网页设计趋势热点:   1. 更多的CSS3 + HTML5   这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5,但在2011年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者,新技术(指CSS3+HTML5)将会取而代之。2011年,Flash渐行渐远,魔术师“HTML5”成为舞台的主角:         当然,说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此,2011年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计,他们会在一些可用的地方使用HTML5替代Flash,使网站变得简单运行更快速。然而,目前HTML5还不能够取代Flash,Flash的某些效果HTML5暂时还不能够实现。   然而最值得人兴奋的是CSS3的应用越来越广,在某些地方甚至超越PS(Adobe表示有鸭梨),因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会,是时候去了解CSS3和HTML5。   2. 简单的配色方案   没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的,太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然,颜色最好保持使用2到3种。调整颜色的透明度,或许会给你意想不到的效果。比如:      只是简单的绿色,通过调节透明度设计出如此美观的Twitter可视化工具。可要知道:这个网页只是用了XHTML/CSS和Javascript,给力吧!      红色绝对经典,如果配色做得好给人的视觉冲击就更……上面的网站独特的红色和易友好的文字设计让人不得不为之折服。   3. 移动互联网时代的到来   智能手机,ipad和上网本随处可见,OMG,2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。   创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素,那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是,新的技术让一切变得更简单。   在使用CSS3的情况下,设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。   你也可以设计一个移动设备专属的网站,但相信那个网站不久还是要改版的,以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选项。如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化,那你并未准备好迎接移动互联网时代的到来。据相关预测,智能手机销量将会超越个人PC。赶快准备好,迎接移动设备大军的来临。   4. Parallax Scrolling   先来解释下Parallax Scrolling,Parallax scrolling 是让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现(示范站点:站点1 站点2)。Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果:如header、footer或者背景。不过最好不要运用于网站导航,那显得有点不伦不类。      Old Pulteney Row to the Pole 在网站背景使用了Parallax Scrolling特效,打开该网站然后往下拉即可看到效果。   5. 设计需考虑更多的触屏设备   触屏技术应用越来越广泛,触屏设备随处可见。这意味着,你的导航设计不再只是鼠标导航,你必须要要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗?   作为设计师,我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮,然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接? [...]

Continue reading...

Tagged with: [ , , ]

扬华素质网辅导员博客扬华博客系统首页 个人博客首页

This item was filled under [ 网站界面 ]

       作品名称:扬华素质网辅导员博客扬华博客系统首页 个人博客首页 设计者:ericy 时间:2010年12月 说明:信息发布管理、业务管理系统 演示地址:http://blog.yanghua.net/ 备注:首页效果浓缩图

Continue reading...

界面设计的三大原则及细节分析

This item was filled under [ 设计理论 ]

人和机器的互动过程(Human Machine Interaction)中,有一个层面,即我们所说的界面(interface)。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程,认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面是用户与程序沟通的唯一途径,要能为用户提供方便有效的服务.。用户界面设计的三大原则是:置界面于用户的控制之下、减少用户的记忆负担、保持界面的一致性。详细说来有以下几点。   1.简易性   界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。   2.用户语言   界面中要使用能反应用户本身的语言,而不是游戏设计者的语言。   3.记忆负担最小化   人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限,24小时内存在25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。   4.一致性   是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与游戏内容相一致。   5.清楚   在视觉效果上便于理解和使用。   6.用户的熟悉程度   用户可通过已掌握的知识来使用界面,但不应超出一般常识。   7.从用户的观点考虑   想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。   通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。   8.排列   一个有序的界面能让用户轻松的使用。   9.安全性   用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。   10.灵活性   简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄)。   11.人性化   高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。   本文链接:http://www.blueidea.com/design/doc/2010/8088.asp      

Continue reading...

Tagged with: [ , , ]

西南交通大学研究生学术论坛

This item was filled under [ 网站界面 ]

  作品名称:西南交通大学研究生学术论坛 设计者:ericy 时间:2009年3月 说明:信息发布管理 备注:首页效果浓缩图

Continue reading...

扬华素质网班级管理系统及班级主网站首页蓝色调模板

This item was filled under [ 网站界面 ]

  作品名称:扬华素质网班级管理系统及班级主网站首页蓝色调模板 设计者:ericy 时间:2010年7月 说明:信息发布管理、业务管理系统 备注:首页效果浓缩图

Continue reading...

[转] DIV+CSS常见错误汇总

This item was filled under [ 设计理论 ]

应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误: CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。   1. 检查HTML元素是否有拼写错误、是否忘记结束标记   即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。   2. 检查CSS是否正确   检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。   3. 确定错误发生的位置   如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。   4. 利用border属性确定出错元素的布局特性   使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。   5. float元素的父元素不能指定clear属性   MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。   6. float元素务必指定width属性   很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。   7. float元素不能指定margin和padding等属性   IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。   8. float元素的宽度之和要小于100%   如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。   9. 是否重设了默认的样式?   某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。   10. 是否忘记了写DTD?   如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD: 以下是引用片段:   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 来源:http://www.002pc.com/master/College/Page/css/2008-10-06/2118.html

Continue reading...

Tagged with: [ , , , , ]