Tag Archives: 设计

新版Mozilla Firefox的UI设计理念预览

Mozilla Firefox 未来的UI设计 作为Mozilla Firefox的忠实粉丝,这里跟大家分享一下Mozilla刚刚跟我们分享的 Firefox 的未来设计理念。他们首先展示了其实整个界面背後的设计哲学是来自火狐(Firefox)这种动物的「天性」,他们形容为和蔼(soft)丶友善(friendly)和富有人性的(human);于是他们便将界面的元素都设计得很 soft,tag 等图示都会有着圆滑的边缘(跟Chrome有点像啊)。还添加了阅读模式。另外,他们也打出界面一体化的牌,将手机丶平板和电脑的用户体验都统一了。而且在计划的当中也包括了为 Windows 8 而设的 Metro 版本,是以 Win 8 的特色 — Tile 来作为主调的。最吸引我的是新的开发模式(包括现有的3D层叠似视图),相信会给我们这些web developer带来巨大的便利和更高的用户体验。整个简报还有数不尽的「未来特色」,有兴趣的话可以到继续阅读看看。 Ux overview fxworkweek_april2012

写给设计师的基础色彩论 [Part2]

Color Theory For Designers, Part 2: Understanding Concepts And Terminology If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The… Read More »

[zz]24款非常实用的CSS3工具终极收藏

对于Web设计和开发人员来说,CSS是非常重要的一部分,随着越来越多的浏览器对CSS3的支持及不断完善,设计师和开发者们有了更多的选择。如今,用纯CSS就可以实现各种各样很酷的效果,甚至是动画。今天这篇文章向大家推荐24款非常优秀的CSS3工具,为了获得更佳的效果,请在Chrome 4+, Safari 4+, Firefox 3.6+, IE9+, Opera 10.5+版本浏览器中浏览如下在线工具。 1.CSS3 Pie 使用CSS3 Pie可以让IE6至IE8版本实现大多数的CSS3修饰特性,如圆角、阴影、渐变等等。 2. CSS3 Click Chart 非常好的CSS3效果演示,提供了示例代码。   3.CSS3 Please! 非常帅的一款CSS3工具,可修改代码,即时预览。   4.CSS3 Button Maker 一个非常不错的CSS3按钮制作工具。 5.CSS3 Generator 非常不错的CSS3代码生成器,带预览效果。 6.CSS3 Menu 非常不错的CSS3菜单制作工具。 7.CSS3 Gradients 一款非常棒的CSS3渐变效果演示工具。 8.CSS3 Cheat Sheet 一份不错的CSS3属性速查手册(PDF格式)。 9.CSS3 Selector Test 非常不错的CSS3选择器测试工具 10.CSS3 Transforms 一款强大的CSS3旋转动画效果演示工具,即时生成代码。 11.CSS3 Preview CSS3特性介绍及效果预览。 12.CSS3 Generator 一款非常不错的CSS3代码生成工具。 13.CSS3 Color… Read More »

高性能移动web开发

高性能移动web开发 移动终端面临的主要问题: 网络数据传输延迟(即便是3G网络) CPU运算能力(即便是配有1GHz+的设备) 移动终端可以做的优化: 根据设备屏幕来选择加载资源 降低延迟,加快连接速度 提高处理性能 本文介绍了一些针对移动设备优化技术,特别针对高级智能系统(iOS,Android,WebOS)。 原文:http://iloves.org/2011/05/high-performance-mobile/ 译自:High-Performance Mobile 原作者:David Calhoun 请尊重版权,转载请注明来源! 针对屏幕来优化图片 移动设备有不同屏幕尺寸,分辨率,应当有针对性加载不同的图片内容。 如果你正在开发一个只有一套带有很多图形样式的站点,那就意味着无论用户用何种大小设备都会下载这些巨大的图片。 为什么一定要让移动用户下载这些为桌面用户开发的样式图片呢? 不过不用担心,现代很多设备都支持 CSS media queries(媒体选择器)了, 通过media queries 我们可以方便的针对不同设备屏幕特性来加载不同版本的样式图片。 /* Screens bigger than 480px */ @media only screen and (min-device-width: 481px) { #header { background-image: url(header-full.png); } } /* Screens smaller than 480px */ @media only screen and… Read More »