网页设计新趋势:CSS3、字体以及图标

   工作流程亟待改进

  那这意味着什么?不可能为每一种设备一一进行设计吧?取而代之的是,我们需要改进工作流程。

  我们的设计流程、开发流程需要迭代了,我们应该使用更多适应性较强的技术、元素。

  1.CSS3

  别看CSS3刚出来不久,实际上,CSS3于1999年开始制定,花了14年!

  跟前几个版本的CSS不太一样,CSS3划分为好几个模块——2012年年中发布了超过50种模块,有4种尤其值得推荐,经过了大量的讨论、检测,这4种可以说已经是很完善的了。W3C推荐的这4种模块是:

  Media Queries (媒体查询)

  Namespaces (命名空间)

  Selectors (Level 3) (选择器)

  Colour(颜色)

  还有一些模块,比如 “Background and Borders”, “Multi-Column Layout”, “Flexible Box Layout” 作为“候选推荐”,也很值得关注。

  还有一些例如 “CSS Animations(CSS动效)”, “CSS Transforms(CSS转换)” and “CSS Filter Effects(CSS滤镜效果)”,尚处于起草阶段。

  除了上面4种W3C推荐的模块,还有很多CSS3技术也很流行。包括

  CSS Gradients(CSS渐变)

  Border-radius (边框半径)

  Box-shadow (图层阴影)

  Multiple Backgrounds (多重背景)

  Opacity (rgba) (不透明度)

  Animations & Transforms (动效&转换)

  我们来看看细节:

  CSS 渐变

  CSS渐变的引入取代了背景图像,无需图像也可以打造渐变


  为页面减负,加载更快,而且,响应式问题也好解决。

  边框半径

  现在,我们可以用CSS打造圆角效果,不用修改图像即可实现。非常方便的就能实现图像的边框、圆角、渐变、阴影的处理——过去想要达到这种效果,要费煞苦心,现在非常的方便。


  如果你客户是个明白人,那你就挺走运,要不然还得给他们解释新技术。利用CSS可以实现多设备较为一致的体验效果,圆角的优雅也无可替代!

  图层阴影

  CSS3引入了图层阴影,很简单的就能添加投影。而且还支持文字!


  跟渐变一样,也不用修改图片效果了,直接拿来就用,用CSS即可轻松实现。

  多重背景

  CSS3多重背景的引入提供了层次感极强的背景效果,极其美妙。

  不透明度(rgba)

  IE9向上兼容,终于不用制作重复的透明图像了。这就是为何我喜欢CSS3,简便、高效。


  动效&转换

  让你的网页更具交互性,尽管设计起来很困难,但是倘若成功,你的网站会大为动人。

  2.网络字体

  网络字体非常适合设计师,我们不用花费大量时间来调配、实验字体了。直接从网上引用,把注意力集中在创意即可。

  为什么网络字体牛逼?

  网络字体很酷,能够打造出炫目的网页设计。而且提供的选择字体很多,估计有成百上千种了。

  当然,不是所有的字体都好,但是不错的有很多,很多都适合设计。


  网络字体响应性能极佳,很适合响应式设计。我们完全可以抛弃惯例,使用这种新方法了。更好的可达性,更容易缩放的字体,更美丽的网站。

  该怎么用网络字体?

  有很多网站提供网络字体服务:

  Typekit

  H&FJ cloud.typography

  Fontdeck

  Fonts.com

  Google Fonts

  虽然不对,但是提供的字体种类很多。很多都是用JS或者纯CSS导入字体,这是开发者的福音。但是网络字体无法使用图像软件来与整体设计整合。那设计师怎么办?不过Typekit最近发表了一份计划,打算整合入Adobe CC中。看来设计师也有可选项。


  除此之外,再无他法去整合网络字体和图像。除非你花钱买,管理字体是个问题,价格更是问题。

  网络字体选项丰富、设计简便、CSS实现能够提高载入速度。

  3.图标

  图标现在很受重视,可以看做是一种趋势,图标因其符号化的视觉隐喻,快速打造视觉引导,比如说Logo,手机应用图标等等

  图标设计要有一定的前瞻性,能够很好的和内容结合。还要考虑响应式和加载速度问题,不过我们的可选新技术很多。

  PNG

  可爱的PNG(可提供透明背景) 是非常合适的图标输出格式


  但是想要在像Retina这种屏幕上达到最佳效果,少不了CSS和JS的支持crowd, then you’ll need some sort of CSS or JavaScript backup to make sure that you do that.

  使用PNG格式不会改变你的工作流程。可以用PS存储为你想要个尺寸,然后选择PNG。

  PNG的缩小性能极佳,但是放大的话,可能会出现像素块和模糊

  SVG(可缩放矢量图形)

  可缩放矢量图形也非常适合图标。只要有一张基于矢量的图像(例如,AI创建的矢量图)——或者光栅图(Photoshop)——那么可以保存为SVG可缩放矢量图形可以防止图片在缩放时出现像素块以及模糊,完美调节大小,适应需要。


  尤为适合Logo以及图标等需要缩放的设计中。但是在实际设计中,建议将尺寸调节为“在大多数情况下使用的尺寸”,这样浏览器的工作负担会降低很多。

  网络字体图标

  网络字体的可缩放性强,种类繁多,最近很流行。有几个聪明小伙将网络字体和图标结合到了一起,打造了字体图标。


  字体图标有一些争议:有人认为导入一整套字体,只为了那么几个图标,不太明智,会给页面添加很多负担,影响加载速度。

  如果想用字体图标,基本都要靠买,可能需要花很多钱,但是利用工具可以打造自己的字体图标,按需设计。推荐Symbolset ,可以买,也可以学学他们的设计思路。

  这边是响应式设计大环境下三种图标设计方法,而图标具体用法,这里不再赘述。合理改造工作流程,以便习惯新的设计方法、新的技术。

时间: 2024-08-20 04:29:56

网页设计新趋势:CSS3、字体以及图标的相关文章

2009年最新的十个网页设计新趋势

对于网页设计来说,最近几年的变化特别快,几乎每年都会有新的网页设计趋势产生.在2009年过去的几个月里,网页教学网整理和收集了2009年最新的十个网页设计新趋势. 1. Letterpress 凸版效果 在我们的观察中,一个意料之外的趋势是,凸版效果(Letterpress,也就是我们的篆刻中的阴文效果).这样的趋势,可能是因为一个简单的原因,因为这个技术很少被人使用.我们发现这种技术通过不同的样式应用在不同的网站上,多位在线服务网站. 2. Rich UI 交互式用户界面 令人感到欣喜,现代的

2013网页设计新趋势:扁平化网页设计

文章描述:这里简单介绍下关于扁平化的概念,所谓"扁平化设计"一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更"平"的界面.善于用颜色去鼓励用户探索. 随着互联网的高速发展,我们可以看到质感厚重,图层样式繁多的网站越来越少,反之各种轻质感,布局大胆.创意新颖.的网站慢慢进入了大家的视野,人类发展至今,人们的审美.时尚标准总是无时无刻不在改变,互联网也是这样,下面这篇文章将要给大家谈谈2013网页设计新风向 "扁平化设计

网页设计新趋势!你听说过“幽灵按钮”吗?

  @陈子木 透明按钮,顾名思义,也就是在设计网页中的按钮之时,不再设计复杂色彩.样式和纹理,而是外仅以线框示意轮廓,内只用文字示意功能,背景透出,与整个页面/背景合而为一的设计方式.国外的设计师称之为"幽灵按钮"(Ghost Buttons),盛赞这种按钮通透简约,贴合整体风格又不失神韵,别具魅力.这种按钮的设计早已有之,但是在iOS和安卓双双风格转向之后,它携了扁平之风雷,成了网页设计的新趋势,拥有类似设计的网页设计作品入雨后春笋一般,映入眼帘. 网页按钮设计中的"幽灵&

网页设计“新趋势”——滚屏动画

  动画效果正逐步成为网页设计中具有极大影响力的主力军:开发者们把网页变成了他们的试验田,从基础的动画开始,再到如今前卫成熟的技术.以动效驱动的项目如雨后春笋般出现,无疑推动了网页技术的发展,也使开发者有了无尽的渴望,让网页效果更上一层楼.网络正在慢慢成为有趣.精致而有活力的东西. 动画效果正逐步成为网页设计中具有极大影响力的主力军:开发者们把网页变成了他们的试验田,从基础的动画开始,再到如今前卫成熟的技术.以动效驱动的项目如雨后春笋般出现,无疑推动了网页技术的发展,也使开发者有了无尽的渴望,让

视点:2012年网页设计的趋势

每年的网页设计趋势都会有所改变,跟时装界一样,或者说世间万物亦是如此.作为网页设计师,你必须时刻关注业界的发展和变化,随时作出应对的准备.2012年网页设计的趋势将会是怎样的呢?一起来看看flashuser博客的观点. 各位网页设计师看到了这一篇文章,应该不太意外的发现,许多内容提及的趋势其实已经正在制作,甚至已经成为了各位的设计一部分呢! 我们无法预测未来,但是我们却可以改变.由于网络的产业的变化,我们多少都会稍微的改变了原本网页设计的做法,让设计出的东西更符合客户的需求,当越来越多人这么做的

2013年网站设计新趋势

随着网络技术的快速发展,页面设计也不断为之改变.2013年的网页设计趋势也将毫不例外地更新换代.同时在优秀网页设计史上,这将会是一个振奋人心和充满乐趣的一年.接下来我们将为您准备了一份关于本年度的预测--7种将会流行并受用户欢迎的网站. 响应式网页设计Responsiveweb design 响应式网页设计是一种特别的开发方式,它使得网页设计的同时无需考虑显示屏尺寸的问题.比如说,当一个设计效果分别在台式电脑,垂直或水平放置的平板电脑,还有智能手机上出现,其形式是完全不同的.响应式网页设计采用以

从3个方面聊聊2016年的UI设计新趋势

  移动应用 1. 各平台 (Android/iOS/HTML5/Web) 的标准设计语言接近一致 部分原生控件上只存在风格上的差异,对用户无显著影响. Material Design 不会大兴其道,更不可能逆袭(用 Material Design 设计的 App 在 iOS 上使用),iOS 的实用主义设计会显著影响 Material Design. 桌面常见的交互形式也将更多影响移动端,要支持 iPad Pro 这样的生产级设备,iOS/Android 会为了兼容桌面场景作出优化. 来源:G

2014网页菜单新趋势

  信不信由你,侧边栏菜单将会是2014的一个新趋势!实际上,菜单已经有相当长的一个历史,最开始它只被用在计算机应用程序上,后来逐渐流行到社交媒体网站.现在很多单页设计的网站菜单都非常精美而便利.来欣赏一些超级棒的侧边栏菜单: Parrot 一个简洁的充满有机氛围的网站.开发者利用垂直视差配合静态侧边菜单栏完美展示自己的产品. Michael Ngo 拥有一个非常明亮干净的排版.侧边菜单直白干脆.尽管色调单一,但是整体看起来非常纯洁. Create Pilates 该网站强烈依赖于配色.黄色和白

网站设计新趋势

随着网站建造技术的进展和人们对网络环境及其效用之认识的演变,网站设计出现了重大转变,由简单的静态HTML页面发展到富多媒体动态网站,能够与访客以精细熟练的方式进行交互.当然这并非说网站设计就不再使用静态或永久性编码规程和方法来保存和呈现网站内容.总之,这是一个持续变化的进程,对当下网络用户的各类期望与需求都极为敏感. 网站设计的概念可谓太广泛,太多样了:因此,要定义某些共同特征或趋势,能让网站开发者和用户在某个特定时间段内都最为赞同,实在不是那么轻而易举.不过,我们将设法总结网站设计师积累的经验