SlideShare a Scribd company logo
1 of 47
Download to read offline
Trends and Focus In Web Design   2012




  jiuzhouli

  番薯堡

  jupeterlee
Do you mean chasing it,
as a copycat ?
NO !
Essence of Design trends

Learn the design methods

    Relaxed sharing

       Inspiration
Architecture
Web and mobile



       Near future product



        Web development




       Web product trends

      Animation in designs

           Less is More

          Other trends



            Discussion
a small selection of near future devices
Google Glass
                                                                            Tiny       Voice? Gesture?

                                                                          Personal       Constrained


                                                                              Many unknown Unknowns




产品概念:我们认为技术是在用户需要的时候出现,当他们不需要时就消失。http://v.youku.com/v_show/id_XMzc2Mzk4ODg0.html
Camera interaction
   the identity of a total stranger in minutes.




     Hinman
Carnegie Mellon 大学的一个项目正在研究人脸识别,他们能在几分钟内准确的确定一个陌生人的信息。Google、Apple、Facebook也在做相关的识别研究。但这可
能引起隐私泄露的问题。
Internet enabled car
     Small

      Touch and Voice Control

       Bandwidth constrained

      Fixed (but not stationary)




新款的Telsa X汽车室内具有一块内置APP和浏览器的触屏式操作面板。
Voice Interaction
   Siri is just the beginning. Next,
   watch for spoken commands to
   control everything from thermostats
   to televisions—Apple’s rumored TV
   is said to include voice recognition,
   and Samsung, LG and Sharp are
   among those planning
   voiceenabled TV sets and related
   products, perhaps making remote
   controls obsolete.




Siri 只是一个开端。除了现在微软的Kinect、Apple 4S,以后将出现语音控制一切的情况。据说I苹果、三星、LG、夏普都在开发语音控制的智能电视。
Smart TV
                        Large        Stationary

                       Public          Social

                       Low-ish ppi    Lean-back

                       Remote        Powerful




    Hinman
市场上已出现很多的智能电视。这些智能电视具有应用程序和浏览器,有的配有智能机或平板电脑作为遥控器。Google早在2010年便推出了GoogleTV。微软也在研究智能电视系统,最
令人关注的依旧是苹果的Itv,
Magic Cube
  Bluetooth

  Productivity


  Helper-appliance




Magic Cube是一款超便携,与普通键盘尺寸一致的辅助设备,它可通过蓝牙与Android,IOS等移动设备配合使用,帮助用户输入信息。
Web Development
the web development




                      Facebook   Youtube   Html5
product innovation
Internet Trends
Trends and Focus in Web Design
App redefined the web
    App inspire the web




随着Mobile APP的风潮,Web 上也出现了不同思维模式出发的web app。这类产品都具有功能聚焦、注重体验等特点。
App redefined the web




ZangZing 的应用可以轻松帮你把你所有的电子照片收集起来并进行相应的整理工作。 ZangZing 最棒的地方就在于它的群体分享功能
API Mash Ups




      Hinman
Instagram似乎不打算开发web版本,很多第三方企图填满这 一空间。 Ink361 在 Instagram 的基础上又提供了一些原创功能。今天他们就发布了地图浏览功能,使得用户可以在地图上找到那些有地理位置信息的图
片,他们认为这将大大方便用户寻找他们需要的照片。
Responsive design
   Don’t hide content

  Remove surplus thing

   Think device context




    Hinman
一种灵活网格(以及灵活适应的图片),配合媒体媒介查询来实现实时响应的、适应性的设计布局。这方面的工具有很多,具体的信息可查阅
http://www.webapptrend.com/2012/05/2848.html
No words just scroll

    Scroll and discover




错位视觉滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验。这是另一个上下滚动页面产生有趣效果的
页面。随着页面滚动,画面就像街景一样动起来,在不同的位置,会出现相关的内容链接。同时页面默认播放街边嘈杂的声音,使访问者身临其境一般。
No words just scroll


       Parallax pearle




     Hinman
以大量图片为特色的网站应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验;
某些网站页面在移动设备上的效果可能较之在PC上有所不同,一些功能也可能无法正常使用
Onepager deluxe




    Hinman
越来越多的个人页、公司组织的页面采用单页面的设计风格,将所有信息罗列于一个页面中。
Html5 Animation




很多App的web介绍页面都使用html5的动画效果。Html5的动画加载起来比较快,而且不需要安装插件,动画流畅。
Web GL




WebGL是一种3D绘图标准,Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲
染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。Webgl页面的加载速度也很快。
Web GL




Sunglass将CAD软件搬到了浏览器上,而且还让用户免费使用基础的CAD功能(更多功能需要付费)。它就像3D模型版的Google Docs一样,用户不仅可以在上面创建、设计CAD模型,
还可以和他人通过语音或文字交流来协作完成3D建模设计。Sunglass使用HTML5和WebGL技术,设计者可以在网站上对3D模型进行拖拽、旋转、缩放等等。
Flash is the new niche
    HTML 5+CSS 3 > Flash




Flash将不是王者,HTML5成为舞台的主角,CSS3+HTML5将会得到更广泛的应用。但是Flash还是会在合适的地方被使用。
Less is More
      only the essence




极简设计是呈现最基本的元素,并摒弃所有多余结构,色彩,图形和其他素材的设计方法。其目的是使主要内容浮出并成为聚焦点。平衡,对齐,对比是极简主义的三大要领。
Big Title




    Hinman
他们发现志愿者在浏览28-point或125-point的 Arial字体时,大的字体能产生更强烈的情感相关大脑活动,而且延续的时间也更长。研究人员推测,字体大小的情感效
应可能反应了社会中语言的重要性。
Big Button




   Hinman
大按钮聚焦用户视线的焦点,一般在注册、登录等界面使用的非常普遍。从网站的可用性上讲,大按钮更有利于用对网站辨识清晰、方便快捷访问。
Big Photo




使用一个满屏的大图片,做为背景。这是一个很好的设计,让整个网页布局,充满了冲击力。
Layered, Transparent and round




大的背景图占用了半屏面积,多少有点浪费,在图片上叠加信息成为必然,但是叠加的信息设计成了交互设计和视觉最大的考验,怎么利用好面积,又能把需要展示的信息充分展示完?
Highlight main featrues




    Hinman
专注是从众多相似产品中脱颖而出的产品策略。有数据表明,如果界面某项功能在视觉上最明显,那也将提高用户使用的机率,而从主界面点击超过三次才能操作的功能被使用机率则非常
低。
Highlight main featrues




    Hinman
对于信息架构的不同,主界面也会有很大区分,以某一功能吸引用户,如拍照分享。
Details suggest quality




电脑、智能手机分辨率的提升,给设计更多展示细节的空间。精致界面,细节体现品质
Animation effects




    Hinman
精致的动画效果往往可以给人流程、舒适的体验感受。
Opening as a movie




    Hinman
让用户享受加载过程。优化你的加载过程,提前显示部分信息或者做个合适的loading动画效果,让的用户知道你的应用已经在一步步执行他的操作,给予他应得的反馈,如此也让用户更
有耐心等待加载。有的应用会将用户引导做的非常精致。
User guide




    Hinman
Mobile app或者网站改版后,需要对用户进行一定的引导。引导动画可以让用户忘记加载的过程,也能告诉用户功能入口的位置。
Sidebar




当界面结构比较复杂,类似Pad的侧边栏有助于减少界面的层级关系,充分利用显示空间,或者让目录型数据便于操作。
Sidebar




如果返回上一级才能跳转页面,会极大的增加用户查找信息的难度,使用侧边栏可以让应用的架构更为清晰。
Graphic Style




    Hinman
随着metro风格的流行,越来越多的视觉风格采用Metro简洁与直观,没有过分华丽的炫目背景与精致的功能图标的风格。Android 4.0系统的视觉设计风格也整体趋向平面化、格子风趋
势。
Irregular photo stream




    Hinman
自下而上的因素(图片本身的因素)容易使用户可以更高效地选择到优质的视觉内容,而矩形模式下的扫视习惯会干扰自下而上的因素发挥作用。
Hiding something in Design




    Hinman
只要提示足够合理,用户并不会找不到你藏起来的按钮,反而让它找到时,还会有惊喜。这不仅是观察一两个用户的结果。
Infographics




    Hinman
信息图形化能够让信息传达更直观有趣。
infographics

 survey goes visual
Q?
Thank you !
                 jiuzhouli




Follow me

番薯堡

jupeterlee

More Related Content

Similar to Web design trends 2012

面孔@极客公园创新大会的产品宣讲
面孔@极客公园创新大会的产品宣讲面孔@极客公园创新大会的产品宣讲
面孔@极客公园创新大会的产品宣讲面孔 网
 
面孔网张路:Julia开源框架
面孔网张路:Julia开源框架面孔网张路:Julia开源框架
面孔网张路:Julia开源框架yangdj
 
《氪周刊:互联网创业必读》(第58期).pdf
《氪周刊:互联网创业必读》(第58期).pdf《氪周刊:互联网创业必读》(第58期).pdf
《氪周刊:互联网创业必读》(第58期).pdfChada Chiu
 
CSDN移动电子刊第三期
CSDN移动电子刊第三期CSDN移动电子刊第三期
CSDN移动电子刊第三期yangdj
 
如何打造品牌热门App案例篇
如何打造品牌热门App案例篇如何打造品牌热门App案例篇
如何打造品牌热门App案例篇Mary Yang
 
雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2yaohung
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱rockcody
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱rockcody
 
最科技——最周刊十六期
最科技——最周刊十六期最科技——最周刊十六期
最科技——最周刊十六期最科技团队
 
Mugeda 36kr
Mugeda 36krMugeda 36kr
Mugeda 36kr36Kr.com
 
氪周刊:关注互联网创业》(第56期)
氪周刊:关注互联网创业》(第56期)氪周刊:关注互联网创业》(第56期)
氪周刊:关注互联网创业》(第56期)Chada Chiu
 
《氪周刊:互联网创业必读》(第52期)
《氪周刊:互联网创业必读》(第52期)《氪周刊:互联网创业必读》(第52期)
《氪周刊:互联网创业必读》(第52期)36Kr.com
 
FBIF015:周文彪 程序化购买+助力品牌营销
FBIF015:周文彪 程序化购买+助力品牌营销FBIF015:周文彪 程序化购买+助力品牌营销
FBIF015:周文彪 程序化购买+助力品牌营销Simba Events
 
數位大革命來襲 掌握您的決勝關鍵
數位大革命來襲 掌握您的決勝關鍵數位大革命來襲 掌握您的決勝關鍵
數位大革命來襲 掌握您的決勝關鍵Mooi Hsieh
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)chenzhongren
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)Chada Chiu
 
《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)36Kr.com
 
Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路kent zhu
 
343 创业计划书(汪伦)
343 创业计划书(汪伦)343 创业计划书(汪伦)
343 创业计划书(汪伦)Rui (Nash) Yang
 

Similar to Web design trends 2012 (20)

面孔@极客公园创新大会的产品宣讲
面孔@极客公园创新大会的产品宣讲面孔@极客公园创新大会的产品宣讲
面孔@极客公园创新大会的产品宣讲
 
面孔网张路:Julia开源框架
面孔网张路:Julia开源框架面孔网张路:Julia开源框架
面孔网张路:Julia开源框架
 
《氪周刊:互联网创业必读》(第58期).pdf
《氪周刊:互联网创业必读》(第58期).pdf《氪周刊:互联网创业必读》(第58期).pdf
《氪周刊:互联网创业必读》(第58期).pdf
 
面孔
面孔面孔
面孔
 
CSDN移动电子刊第三期
CSDN移动电子刊第三期CSDN移动电子刊第三期
CSDN移动电子刊第三期
 
如何打造品牌热门App案例篇
如何打造品牌热门App案例篇如何打造品牌热门App案例篇
如何打造品牌热门App案例篇
 
雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2雲端行動商務發展趨勢 V1.2
雲端行動商務發展趨勢 V1.2
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
 
移动应用的陷阱
移动应用的陷阱移动应用的陷阱
移动应用的陷阱
 
最科技——最周刊十六期
最科技——最周刊十六期最科技——最周刊十六期
最科技——最周刊十六期
 
Mugeda 36kr
Mugeda 36krMugeda 36kr
Mugeda 36kr
 
氪周刊:关注互联网创业》(第56期)
氪周刊:关注互联网创业》(第56期)氪周刊:关注互联网创业》(第56期)
氪周刊:关注互联网创业》(第56期)
 
《氪周刊:互联网创业必读》(第52期)
《氪周刊:互联网创业必读》(第52期)《氪周刊:互联网创业必读》(第52期)
《氪周刊:互联网创业必读》(第52期)
 
FBIF015:周文彪 程序化购买+助力品牌营销
FBIF015:周文彪 程序化购买+助力品牌营销FBIF015:周文彪 程序化购买+助力品牌营销
FBIF015:周文彪 程序化购买+助力品牌营销
 
數位大革命來襲 掌握您的決勝關鍵
數位大革命來襲 掌握您的決勝關鍵數位大革命來襲 掌握您的決勝關鍵
數位大革命來襲 掌握您的決勝關鍵
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)
 
《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)《氪周刊:互联网创业必读》(第65期)
《氪周刊:互联网创业必读》(第65期)
 
《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)《氪周刊:互联网创业必读》(第83期)
《氪周刊:互联网创业必读》(第83期)
 
Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路Kentzhu:玩法变了,移动产品设计新思路
Kentzhu:玩法变了,移动产品设计新思路
 
343 创业计划书(汪伦)
343 创业计划书(汪伦)343 创业计划书(汪伦)
343 创业计划书(汪伦)
 

More from Baidu

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍Baidu
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategyBaidu
 
About linkedin
About linkedinAbout linkedin
About linkedinBaidu
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysisBaidu
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010Baidu
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture designBaidu
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socializationBaidu
 
Mobile interface design for color blind user
Mobile interface design for color blind userMobile interface design for color blind user
Mobile interface design for color blind userBaidu
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysisBaidu
 

More from Baidu (9)

涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍涨客资,用推策 推策产品介绍
涨客资,用推策 推策产品介绍
 
Seo design strategy
Seo design strategySeo design strategy
Seo design strategy
 
About linkedin
About linkedinAbout linkedin
About linkedin
 
Diandian.com development strategy analysis
Diandian.com development strategy analysisDiandian.com development strategy analysis
Diandian.com development strategy analysis
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010
 
Chinese youth culture design
Chinese youth culture designChinese youth culture design
Chinese youth culture design
 
Mobile app socialization
Mobile app socializationMobile app socialization
Mobile app socialization
 
Mobile interface design for color blind user
Mobile interface design for color blind userMobile interface design for color blind user
Mobile interface design for color blind user
 
Mobile im app interface ananlysis
Mobile im app interface ananlysisMobile im app interface ananlysis
Mobile im app interface ananlysis
 

Web design trends 2012