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