Unnamed 02/26/2009

• Tag Clouds Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine

  Tags: TAG, 界面设计

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

• 2009年海外Web设计风潮（上）_斐派精准 - 互动体验，精准营销 - 效果为先，见效付款，承诺效果

  2009 Web 设计风潮
  
  1. 凸版印刷风格
  2. 富UI
  3. 透明 PNG
  4. 大字体
  5. 代用字体
  6. 灯箱框
  7. 媒体块
  8. 杂志式样
  9. 幻灯滚动
  10. 重点展示区域

  Tags: 设计, ui设计, 界面设计

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 2. 富UI

    
    

    现代 Web 中的 UI 变得越来越漂亮，越来越好用。过去的一年，Web 中的 UI 有了显著提高，有了一种接近桌面的感觉。Ajax 和 Flash 被广泛使用。

    
    

    特别是我们比去年看到了更多留白区域，还看到很多现代的 UI 技术会显示用户同系统之间交流的视觉状态，比如，按钮在正常和被按下时显示不同的样子，用户同系统交互时能及时得到反馈，另外，越来越多的服务可以被用户定制。

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 1. 凸版印刷风格

    
    

    这种风格有些出人意料，可能因为之前很少有人使用。该风格在在各种主题的网站中都有，但主要用于产品设计或在线服务类网站。

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 3. 透明 PNG

    
    

    使用 PNG 实现透明虽然不被 IE6 支持，却在过去的一年大行其道。设计师们似乎正在尝试将背景图片和内容融合并实现一些印刷媒体的风格。比如，将 PNG 半透明图片放到整体背景的某个区域上，用来加亮显示这个区域，如标题或声明。一些 PNG 同名技术还用来实现灯箱框效果。

    
    

    Smashing Magazine 去年曾有篇使用透明效果实现创意设计的文章，很多设计师在他们的作品中开始尝试这些技巧。有趣的是，透明效果常被用于页首和页尾部分，不过也有些例外。

  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 4. 巨大字体

    
    

    以前的文章中我们曾介绍过巨型字体设计，2009年，巨型字体设计还会风行，尤其是那些设计社，以及展示型，产品介绍型，或在线服务型网站，他们会使用巨型字体显示重要信息。

    
    

    巨型字体设计中使用的字号往往超过36px，设计师们对字体编排注入了更多关注，以实现更漂亮，更连贯，更值得信赖的站点。

  • 
  • 
  • 
  • 
  • 
  • 

  • 5. 代用字体

    
    

    设计师们还把更多注意力放到字体上，虽然经典的 Web 字体，Helvetica, Arial, Georgia 以及 Verdana 等仍占主流，一些代用字体正浮出水面（如 sIFR）。

    
    

    有趣的是，这些字体会和设计无缝地衔接，设计师们似乎并非为字体而字体，而是要将字体同他们的设计结合在一起实现更漂亮的效果。

  • 
  • 
  • 

• 2009年海外Web设计风潮（下）_斐派精准 - 互动体验，精准营销 - 效果为先，见效付款，承诺效果

  1. 反 Box 式布局
  2. 单页布局
  3. 多栏布局
  4. 巨型插图与多变背景
  5. 更多留白
  6. 社会网络元素
  7. 讲解式导航菜单
  8. Status elements (Flickr, Twitter et al)
  9. 动态 Tab
  10. 超大搜索框
  11. Category visuals
  12. 作者头像图标 （这也算？-译者）
  13. 图标和视觉引导
  14. Tag 索引 (取代 Tag 云)
  15. 插图风格
  16. 水彩风格
  17. 手写风格
  18. 怀旧风格
  19. 有机纹理或照片背景
  20. 证章风格
  21. 价格标签风格
  22. 条带风格
  

  Tags: 界面设计, ui设计, 设计

  • • 反 Box 式布局
      

      

      
      
    
    
    • 单页布局
      

      

      
      
    
    
    • 多栏布局 
      

      

      
      
    
    
    • 巨型插图与多变背景
      

      

      
      
    
    
    • 更多留白
      

      

      
      
    
    
    • 社会网络元素
      

      

      
      
    
    
    • 讲解式导航菜单
      

      

      
      
    
    
    • Status elements (Flickr, Twitter et al)
      

      

      
      
    
    
    • 动态 Tab 
      

      

      
      
    
    
    • 超大搜索框
      

      

      
      
    
    
    • Category visuals
      

      

      
      
    
    
    • 作者头像图标 （这也算？-译者）
      

      

      
      
    
    
    • 图标和视觉引导
      

      

      
      
    
    
    • Tag 索引 (取代 Tag 云)
      

      

      
      
    
    
    • 插图风格
      

      

      
      
    
    
    • 水彩风格
      

      

      
      
    
    
    • 手写风格
      

      

      
      
    
    
    • 怀旧风格
      

      

      
      
    
    
    • 有机纹理或照片背景
      

      

      
      
    
    
    • 证章风格
      

      

      
      
    
    
    • 价格标签风格 
      

      

      
      
    
    
    • 条带风格
      

      

  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 2. 单页布局

    
    

    单页布局是使用一个单一的页面展示站点的全部内容，这并不意味着站点内容少，这个页可能很复杂，包含了大量图形和动画效果，加载的时间也会有些长。比如，用户点击导航菜单后，该栏目下的新内容会在旧内容处通过渐入渐出，滑入滑出等动画效果显示出来，而页面其它部分始终保持不变。（白宫的最新网站的首页就有这个意思 - 译者）

  • 
  • 
  • 
  • 

  • 3. 多栏布局

    
    

    多栏布局（大于3栏）通常比较复杂，但通过适当设计，会对访问者带来更好的访问体验。最近几年，Web 内容爆炸，用户停留在一个网站的时间越来越少，就要求  Web 设计者尽可能有效地展示数据，既要让访问者多停留，又要让他们更容易发现他们希望看到的内容。

  • 
  • 多栏设计一般用于杂志布局或展示型布局站点，一般使用网格布局技术实现。多栏布局一般使用概述/细节式结构，首先用多栏展示概述式内容，然后进入详细内容的展示。Mozilla Labs 就是一个很好的例子。
  • 
  • 
  • 

  • 4. 巨型插图式与多变背景设计

    
    

    象巨型字体主导当前 Web 设计一样，巨型插图风格设计似乎也正流行起来，巨型插图可以和巨型字体的结合使用，带来更吸引人，更生动的效果。

    
    

    另外，设计师们越来越喜欢使用那些色彩鲜艳的图形提供背景，包含各种风格，抽象画，剪贴画，剪贴簿，装饰画，怀旧，水彩，有机纹理以及照片背景等。

  • 
  • 
  • 
  • 
  • 
  • 
  • 

  • 5. 更多留白

    
    

    这是近年来最值得期待，也是最有意义的 Web 设计风潮，设计师们在页面留白方面越来越慷慨。（这也是我非常欣赏的一种风格，只可惜在我们国内，仍有大量的客户认为满当当的页面说明你的公司实力雄厚 - 译者。）

  • 
  • 
  • 
  • 
  • 

  • 6. "社会"网络元素

    
    

    任何人都喜欢流量与认可，在 Web 设计中加入社会网络元素，可以鼓励你的访问者参与进来。（不过在 Web 2.0 日渐式微的今天，也许满页花里胡哨的社会网络元素正逐渐变得让人厌烦 - 译者）

  • 
  • 
  • 
  • 
  • 
  • 

  • 7. 解释风格的导航

    
    

    传统的水平导航条，一般是一些标题连接或图标链接，用户很难从这些短短的信息中真正知道这些导航所代表的内容，解释性导航会在栏目导航菜单上提供进一步解释内容，让用户更好地理解这些栏目代表的内容。

  • 
  • 这类导航一般使用更容易表达内容的大图标，加解释性文字，鼠标 Hover 效果也必不可少。
  • 

  • 8. 动态 Tabs

    
    

    这类设计一般在页面加载时，将多个 Tab 中的内容一次性加载，通过 Javascript 或 CSS 效果，实现鼠标指向某个 Tab 时，该 Tab 中的内容立即显现。（微软官方站近一年来一直是这个设计风格的代表。- 译者）

  • 

Posted from Diigo. The rest of 互联网之'我的阅读' group favorite links are here.