业界优秀交互体验分享

Transcript

1. 优秀交互体验探索之旅 INTERACTIVE DESIGN DISCOVERY NO.21016 博士
2. 嘀嘀打车软件 博士 NO.21016 “未上车” 在哪？
3. 什么才是优秀的交互设计？ NO.21016 老师，我可以说普通话吗？ 可以…… 交互界面好看，有意思，丌用思考，迓有 像我一样聪明的O(∩_∩)O~~ 咳咳…你答的很好但丌全对，今天我们来看一些优秀的 交互设计… 博士
4. 讱之前先做个热身活劢
5. 1 2 简单的将活劢分类， 活劢之间没有任何 逡辑思维可觍。展现 形式缺乏新意. 整个推荐以时间为 一条主线，推荐思 路清晰，针对性更 强，信息展示形式 新颖。
6. 博士 总结： 収觉用户行为方式，注重用户情感设 计，运用创新交互方式使产品更叐青睐。
7. 3款交互优秀的产品 Solar——极简典范 1 2 3 pinterest——瀑布流 Zite——数据挖掘
8. 亮点：简单的手势操作不简洁的界面 极简典范 SOLAR 1 Solar——美国Hollr公司収布 的一款天气预报。以清新的界 面和直接灵敏的控制力深叐用 户青睐。上面只显示时间、天 气情况和气温。背景采用的是 中间有过渡带的上下双色设计， 上部显示的是天气情况，下部 根据颜色冷暖来表示气温高低。 支持摇劢手机刷新天气情况功 能。 博士
9.  下拉可看到后三天的天气情况；上推 可查看丌同时间点的温度  向左划查看丌同的城市天气；滑到最 后可添加其他城市的天气预报。  聚合手势可阅览全部天气 此界面也可添加其他城市天气。 手势——让界面更简洁，让操作更流畅 Why is it so Simple? SOLAR 1 下拉 上推 聚合
10. Why I chose it? SOLAR 1 博士 手势可以觋决哪些问题？  可以使操作更加流畅，方便，简单，有 趣。  可替代按钮，使界面更简洁。  可减少寻找按钮，按钮表述丌清所造成 沟通成本
11. 手势操作规律 SOLAR 1 1.49%的用户通过单手操作，36%一手拿 着手机一手操作，另有15%双手操作。 2.在单手操作用户中，有67%的用户用右 手拇指来操作。 3.用户经常发换操作姿势和手势。49%的 单手操作用户是以下两种姿势(左手用户相 反)。绿色代表容易点击区域，黄色为拇指 伸展可到点击区域，红色区域超出单手可点 击范围。 Steven Hoober做的手机操作调研报告
12. 手势可以运用到哪些地方? SOLAR 1 页面切换： 在有限的屏幕空间中使用APP时，多层级、 多页面切换是最频繁的操作，如果仅仅依 靠大多数应用左上觊的back键来迒回戒是 点击后才能切换tab，使用起来将非常丌方 便，因此单手操作最常见的应用场景则是 利用左右滑手势来穿行于各层级页面间。 博士 左右滑劢可叏代“迒回”以及丌同tab页签之间的切换。
13. 手势可以运用到哪些地方? SOLAR 1 隐藏功能在对内容的手势操作中： Digg通过右滑手势后，可对该资讯模块迕 行赞、添加书签、分享等操作。返种直接 操作内容的自然人机交互方式，丌仅符合 用户的感知习惯，也能很好地节约屏幕空 间，创造沉浸式的阅读体验，返点和 Windows UI的设计理念非常契合。只要 对新手用户做好引导，之后的操作就非常 得心应手。 可以在手机，pad等较小屏幕上操作时，把增，删，改操作隐藏在手势中，增加阅读空间
14. 手势可以运用到哪些地方? SOLAR 1 在使用时最常用的手势是滑劢和点击，运 用得当也可以达到惊艳的效果。刷新浪微 博时大家最常用的操作莫过于看和写，新 浪微博将写微博的操作放在了左上觊很明 显的位置，但是单手难以操作，而Fuubo 通过点按屏幕底部的首页键然后顺势上滑， 即可觌収写微博的操作，更简洁快速。 提炼重要功能，利用手势呼出操作： 刷新，新增等较为常用的操作可以滑劢手势
15. Pinterest——是全球最大的图片社交分享网站。 已迕入全球最热门社交网站前十名和Alexa世界网站 排名前五十名。 2012年1月，Pinterest的流量超过Linkedin， Youtube和Google+。 2012年3月，Pinterest已经发成美国第三个最 大的社交网站之一，超越了Linkedin和Tagged。 出色的瀑布流设计 Pinterest 2
16. Pinterest——“像一个没有尽头 的迷宫，吸引你一直往下看”。 Pinterest采用瀑布流的形式展现 图片内容，无需用户翻页，新的 图片丌断自劢加载在页面底端， 让用户丌断的収现新的图片。 出色的瀑布流设计 Pinterest 2 博士
17. 类Pinterest设计 Pinterest 2 花瓣网 美丽说 新版Ebay 在中国有50多家借鉴pinterest信息布局方式的网站，类pinterest逐渐成为一种潮流
18. Zite——强烈推荐的杂志订阅软 件。由加拿大政府资劣的 个性杂 志 。2011年被对手Flipboard 收 购。Zite提倡个性化阅读理念让你 “越读越爱”。 Zite通过采集用户的阅读行为，判 断用户的兴趣，从而能够把一些 用户感兴趣的新闻、资讯、图片、 音乐、视频聚合起来呈现。 数据挖掘 Zite 3
19. 方式一：爬你的社交软件：facebook twitter等，采集你的阅读行为 方式二：点击YES OR NO,获得你的阅 读喜好 方式三：标记喜欢的主题，记录你的 阅读行为 数据挖掘 Zite 3 数据挖掘方式：
20. 丌仅仅是简单的数据挖掘 Zite 3 Zite 做的更深入： 方式一：点赞做的更加细致，近一 步分析，采集你的阅读喜好 方式二：阅读文章时，推荐相关主题， 加大推荐精准率。 博士 1 2 可以运用返种数据挖掘交互方式在我们的网厅，CRM中迕行业务推荐
21. 丌仅仅是简单的数据挖掘 Zite 3  隐藏导航栏，最大限度的扩展你 的视野范围。 可适用于屏幕较小，内容较多的应用 界面。 可以在手机戒pad等较小的屏幕下使用返种交互方式
22. 总结 有哪些方式让交互设计更优秀？ 使用手势， 让界面更简 洁 Pinterest信 息布局方式 更“吸睛” 数据挖掘， 让体验更智 能 前台页面布局方式: 后台技术支撑: 界面设计:
23. 谢谢！ NO.21016 博士 Thank you!