Trends and Focus In Web Design   2012  jiuzhouli  番薯堡  jupeterlee
Do you mean chasing it,as a copycat ?
NO !Essence of Design trendsLearn the design methods    Relaxed sharing       Inspiration
ArchitectureWeb and mobile       Near future product        Web development       Web product trends      Animation in des...
a small selection of near future devices
Google Glass                                                                            Tiny       Voice? Gesture?        ...
Camera interaction   the identity of a total stranger in minutes.     HinmanCarnegie Mellon 大学的一个项目正在研究人脸识别,他们能在几分钟内准确的确定一...
Internet enabled car     Small      Touch and Voice Control       Bandwidth constrained      Fixed (but not stationary)新款的...
Voice Interaction   Siri is just the beginning. Next,   watch for spoken commands to   control everything from thermostats...
Smart TV                        Large        Stationary                       Public          Social                      ...
Magic Cube  Bluetooth  Productivity  Helper-applianceMagic 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 webZangZing 的应用可以轻松帮你把你所有的电子照片收集起来并进行相应的整理工作。 ZangZing 最棒的地方就在于它的群体分享功能
API Mash Ups      HinmanInstagram似乎不打算开发web版本,很多第三方企图填满这 一空间。 Ink361 在 Instagram 的基础上又提供了一些原创功能。今天他们就发布了地图浏览功能,使得用户可以在地图上找...
Responsive design   Don’t hide content  Remove surplus thing   Think device context    Hinman一种灵活网格(以及灵活适应的图片),配合媒体媒介查询来实现...
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 GLWebGL是一种3D绘图标准,Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至...
Web GLSunglass将CAD软件搬到了浏览器上,而且还让用户免费使用基础的CAD功能(更多功能需要付费)。它就像3D模型版的Google Docs一样,用户不仅可以在上面创建、设计CAD模型,还可以和他人通过语音或文字交流来协作完成3D...
Flash is the new niche    HTML 5+CSS 3 > FlashFlash将不是王者,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    HinmanMobile 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 !                 jiuzhouliFollow me番薯堡jupeterlee
Upcoming SlideShare
Loading in …5
×

Web design trends 2012

790 views

Published on

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
790
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web design trends 2012

  1. 1. Trends and Focus In Web Design 2012 jiuzhouli 番薯堡 jupeterlee
  2. 2. Do you mean chasing it,as a copycat ?
  3. 3. NO !Essence of Design trendsLearn the design methods Relaxed sharing Inspiration
  4. 4. ArchitectureWeb and mobile Near future product Web development Web product trends Animation in designs Less is More Other trends Discussion
  5. 5. a small selection of near future devices
  6. 6. Google Glass Tiny Voice? Gesture? Personal Constrained Many unknown Unknowns产品概念:我们认为技术是在用户需要的时候出现,当他们不需要时就消失。http://v.youku.com/v_show/id_XMzc2Mzk4ODg0.html
  7. 7. Camera interaction the identity of a total stranger in minutes. HinmanCarnegie Mellon 大学的一个项目正在研究人脸识别,他们能在几分钟内准确的确定一个陌生人的信息。Google、Apple、Facebook也在做相关的识别研究。但这可能引起隐私泄露的问题。
  8. 8. Internet enabled car Small Touch and Voice Control Bandwidth constrained Fixed (but not stationary)新款的Telsa X汽车室内具有一块内置APP和浏览器的触屏式操作面板。
  9. 9. 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、夏普都在开发语音控制的智能电视。
  10. 10. Smart TV Large Stationary Public Social Low-ish ppi Lean-back Remote Powerful Hinman市场上已出现很多的智能电视。这些智能电视具有应用程序和浏览器,有的配有智能机或平板电脑作为遥控器。Google早在2010年便推出了GoogleTV。微软也在研究智能电视系统,最令人关注的依旧是苹果的Itv,
  11. 11. Magic Cube Bluetooth Productivity Helper-applianceMagic Cube是一款超便携,与普通键盘尺寸一致的辅助设备,它可通过蓝牙与Android,IOS等移动设备配合使用,帮助用户输入信息。
  12. 12. Web Development
  13. 13. the web development Facebook Youtube Html5
  14. 14. product innovation
  15. 15. Internet Trends
  16. 16. Trends and Focus in Web Design
  17. 17. App redefined the web App inspire the web随着Mobile APP的风潮,Web 上也出现了不同思维模式出发的web app。这类产品都具有功能聚焦、注重体验等特点。
  18. 18. App redefined the webZangZing 的应用可以轻松帮你把你所有的电子照片收集起来并进行相应的整理工作。 ZangZing 最棒的地方就在于它的群体分享功能
  19. 19. API Mash Ups HinmanInstagram似乎不打算开发web版本,很多第三方企图填满这 一空间。 Ink361 在 Instagram 的基础上又提供了一些原创功能。今天他们就发布了地图浏览功能,使得用户可以在地图上找到那些有地理位置信息的图片,他们认为这将大大方便用户寻找他们需要的照片。
  20. 20. Responsive design Don’t hide content Remove surplus thing Think device context Hinman一种灵活网格(以及灵活适应的图片),配合媒体媒介查询来实现实时响应的、适应性的设计布局。这方面的工具有很多,具体的信息可查阅http://www.webapptrend.com/2012/05/2848.html
  21. 21. No words just scroll Scroll and discover错位视觉滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,可以带来非常出色的视觉体验。这是另一个上下滚动页面产生有趣效果的页面。随着页面滚动,画面就像街景一样动起来,在不同的位置,会出现相关的内容链接。同时页面默认播放街边嘈杂的声音,使访问者身临其境一般。
  22. 22. No words just scroll Parallax pearle Hinman以大量图片为特色的网站应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验;某些网站页面在移动设备上的效果可能较之在PC上有所不同,一些功能也可能无法正常使用
  23. 23. Onepager deluxe Hinman越来越多的个人页、公司组织的页面采用单页面的设计风格,将所有信息罗列于一个页面中。
  24. 24. Html5 Animation很多App的web介绍页面都使用html5的动画效果。Html5的动画加载起来比较快,而且不需要安装插件,动画流畅。
  25. 25. Web GLWebGL是一种3D绘图标准,Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。Webgl页面的加载速度也很快。
  26. 26. Web GLSunglass将CAD软件搬到了浏览器上,而且还让用户免费使用基础的CAD功能(更多功能需要付费)。它就像3D模型版的Google Docs一样,用户不仅可以在上面创建、设计CAD模型,还可以和他人通过语音或文字交流来协作完成3D建模设计。Sunglass使用HTML5和WebGL技术,设计者可以在网站上对3D模型进行拖拽、旋转、缩放等等。
  27. 27. Flash is the new niche HTML 5+CSS 3 > FlashFlash将不是王者,HTML5成为舞台的主角,CSS3+HTML5将会得到更广泛的应用。但是Flash还是会在合适的地方被使用。
  28. 28. Less is More only the essence极简设计是呈现最基本的元素,并摒弃所有多余结构,色彩,图形和其他素材的设计方法。其目的是使主要内容浮出并成为聚焦点。平衡,对齐,对比是极简主义的三大要领。
  29. 29. Big Title Hinman他们发现志愿者在浏览28-point或125-point的 Arial字体时,大的字体能产生更强烈的情感相关大脑活动,而且延续的时间也更长。研究人员推测,字体大小的情感效应可能反应了社会中语言的重要性。
  30. 30. Big Button Hinman大按钮聚焦用户视线的焦点,一般在注册、登录等界面使用的非常普遍。从网站的可用性上讲,大按钮更有利于用对网站辨识清晰、方便快捷访问。
  31. 31. Big Photo使用一个满屏的大图片,做为背景。这是一个很好的设计,让整个网页布局,充满了冲击力。
  32. 32. Layered, Transparent and round大的背景图占用了半屏面积,多少有点浪费,在图片上叠加信息成为必然,但是叠加的信息设计成了交互设计和视觉最大的考验,怎么利用好面积,又能把需要展示的信息充分展示完?
  33. 33. Highlight main featrues Hinman专注是从众多相似产品中脱颖而出的产品策略。有数据表明,如果界面某项功能在视觉上最明显,那也将提高用户使用的机率,而从主界面点击超过三次才能操作的功能被使用机率则非常低。
  34. 34. Highlight main featrues Hinman对于信息架构的不同,主界面也会有很大区分,以某一功能吸引用户,如拍照分享。
  35. 35. Details suggest quality电脑、智能手机分辨率的提升,给设计更多展示细节的空间。精致界面,细节体现品质
  36. 36. Animation effects Hinman精致的动画效果往往可以给人流程、舒适的体验感受。
  37. 37. Opening as a movie Hinman让用户享受加载过程。优化你的加载过程,提前显示部分信息或者做个合适的loading动画效果,让的用户知道你的应用已经在一步步执行他的操作,给予他应得的反馈,如此也让用户更有耐心等待加载。有的应用会将用户引导做的非常精致。
  38. 38. User guide HinmanMobile app或者网站改版后,需要对用户进行一定的引导。引导动画可以让用户忘记加载的过程,也能告诉用户功能入口的位置。
  39. 39. Sidebar当界面结构比较复杂,类似Pad的侧边栏有助于减少界面的层级关系,充分利用显示空间,或者让目录型数据便于操作。
  40. 40. Sidebar如果返回上一级才能跳转页面,会极大的增加用户查找信息的难度,使用侧边栏可以让应用的架构更为清晰。
  41. 41. Graphic Style Hinman随着metro风格的流行,越来越多的视觉风格采用Metro简洁与直观,没有过分华丽的炫目背景与精致的功能图标的风格。Android 4.0系统的视觉设计风格也整体趋向平面化、格子风趋势。
  42. 42. Irregular photo stream Hinman自下而上的因素(图片本身的因素)容易使用户可以更高效地选择到优质的视觉内容,而矩形模式下的扫视习惯会干扰自下而上的因素发挥作用。
  43. 43. Hiding something in Design Hinman只要提示足够合理,用户并不会找不到你藏起来的按钮,反而让它找到时,还会有惊喜。这不仅是观察一两个用户的结果。
  44. 44. Infographics Hinman信息图形化能够让信息传达更直观有趣。
  45. 45. infographics survey goes visual
  46. 46. Q?
  47. 47. Thank you ! jiuzhouliFollow me番薯堡jupeterlee

×