一起移动吧-交互篇

Transcript

2. Feedback
3. 反馈类型 • 使用动画 如：iOS中的操作动画 • 改变颜色，ICON等 比如：链接，按钮 • 播放声音 • 其他 好的反馈要保证用户一直很清楚当前的状态
4. 移动端的特殊性 • a:hover{text-decoration:underline} • -webkit-tap-highlight-color: rgba(0,0,0,0);
5. Gesture
11. 可响应区域 • Apple： 44*44 pixels。 • Android Design说7-10mm是比较理想的尺寸。 • Microsoft的Windows Phone UI Design and Interaction Guide推 荐的最小触控目标尺寸为7*7mm(26*26px)，理想的尺寸为 9*9mm(34*34px)。 • Nokia的开发指南建议目标尺寸应该不小于10*10mm(28*28px)。
12. 可操作的元素
13. Are you a gril ？
14. 小调查
15. Portrait landscape
16. 横竖屏切换内部原理
17. 竖屏(portrait ) 横屏(landscape ) 去掉后链接字号横屏变大
18. On iPad the default value for -webkit-text-size-adjust is none. On all other devices, the default value is auto.
20. -webkit-text-size-adjust:100% -webkit-text-size-adjust:none
21. 从竖屏到横屏的设计-1
22. 从竖屏到横屏的设计-2
23. 从竖屏到横屏的设计-3
24. 从竖屏到横屏的设计-4
25. 从竖屏到横屏的设计-5
26. 从竖屏到横屏的设计-6
27. Keyboard
29. 1. QQ帐号==数字？数字键盘:其它 2. 数字键盘可点击区域加大，约等于传统键盘的4.71倍 3. 点击输入时显示全部的操作
30. 1.合理设置键盘类型 <input type="tel" /> <input type="text" pattern="\d*" novalidate /> <input type="email" />
31. 2.如果自动提示不准确，请关闭 <input type="text" autocorrect="off" />
32. 3.统一键盘类型
33. 4.合理禁用大小写 <input type="email" autocapitalize="off" />
34. BROWSER: TROUBLE MAKER
35. We Always: TROUBLE KILLER
36. TO BE: SHUANG MAKER
37. THANKS