SlideShare a Scribd company logo
1 of 37
Download to read offline
一起移动吧 交互篇
Feedback
反馈类型
• 使用动画
如:iOS中的操作动画

• 改变颜色,ICON等
比如:链接,按钮

• 播放声音
• 其他

好的反馈要保证用户一直很清楚当前的状态
移动端的特殊性
• a:hover{text-decoration:underline}

• -webkit-tap-highlight-color: rgba(0,0,0,0);
Gesture
一起移动吧 交互篇
一起移动吧 交互篇
一起移动吧 交互篇
一起移动吧 交互篇
一起移动吧 交互篇
可响应区域
• 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)。
可操作的元素
Are you a gril ?
小调查
Portrait
landscape
横竖屏切换内部原理
去掉后链接字号横屏变大

竖屏(portrait )

横屏(landscape )
On iPad
the default value for -webkit-text-size-adjust is none.
On all other devices, the default value is auto.
一起移动吧 交互篇
-webkit-text-size-adjust:100%
-webkit-text-size-adjust:none
从竖屏到横屏的设计-1
从竖屏到横屏的设计-2
从竖屏到横屏的设计-3
从竖屏到横屏的设计-4
从竖屏到横屏的设计-5
从竖屏到横屏的设计-6
Keyboard
一起移动吧 交互篇
1. QQ帐号==数字?数字键盘:其它
2. 数字键盘可点击区域加大,约等于传统键盘的4.71倍
3. 点击输入时显示全部的操作
1.合理设置键盘类型

<input type="tel" />

<input type="text" pattern="d*" novalidate />

<input type="email" />
2.如果自动提示不准确,请关闭

<input type="text" autocorrect="off" />
3.统一键盘类型
4.合理禁用大小写

<input type="email" autocapitalize="off" />
BROWSER:

TROUBLE MAKER
We Always:

TROUBLE KILLER
TO BE:

SHUANG MAKER
THANKS

More Related Content

Similar to 一起移动吧 交互篇

Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告sean mao
 
Android那些事儿
Android那些事儿Android那些事儿
Android那些事儿麦哥UE
 
NOKIA 5800XM PRODUCT RESEARCH REPORT
NOKIA 5800XM PRODUCT RESEARCH REPORT NOKIA 5800XM PRODUCT RESEARCH REPORT
NOKIA 5800XM PRODUCT RESEARCH REPORT Hu yang
 
Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)Winnie Chiang
 
Android ui design tips
Android ui design tipsAndroid ui design tips
Android ui design tipswyh0416
 
E人e本产品简介
E人e本产品简介E人e本产品简介
E人e本产品简介power9000
 
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹Johnny Sung
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123oemgame
 
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2  mobile - oss - oss行動領域-2 (ver1.0)開放原始碼 Ch3.2  mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)My own sweet home!
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0) My own sweet home!
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010Baidu
 
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC
 
App design process part III
App design process part IIIApp design process part III
App design process part IIINTUST
 
可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptxetaoux
 
iOS产品如何实现快速版本发布
iOS产品如何实现快速版本发布iOS产品如何实现快速版本发布
iOS产品如何实现快速版本发布Bin Feng
 
初探程式語言設計以C#為例
初探程式語言設計以C#為例初探程式語言設計以C#為例
初探程式語言設計以C#為例Johnson Gau
 
产品设计与用户体验(据说是马化腾用来做培训的PPT)
产品设计与用户体验(据说是马化腾用来做培训的PPT)产品设计与用户体验(据说是马化腾用来做培训的PPT)
产品设计与用户体验(据说是马化腾用来做培训的PPT)Dahui Feng
 
Android workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneAndroid workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneJohnny Sung
 
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)Victor Alonso Lion
 
Android 4.x与2.x的区别
Android 4.x与2.x的区别Android 4.x与2.x的区别
Android 4.x与2.x的区别shuaijie
 

Similar to 一起移动吧 交互篇 (20)

Pad&pc差异调研报告
Pad&pc差异调研报告Pad&pc差异调研报告
Pad&pc差异调研报告
 
Android那些事儿
Android那些事儿Android那些事儿
Android那些事儿
 
NOKIA 5800XM PRODUCT RESEARCH REPORT
NOKIA 5800XM PRODUCT RESEARCH REPORT NOKIA 5800XM PRODUCT RESEARCH REPORT
NOKIA 5800XM PRODUCT RESEARCH REPORT
 
Ui gathering(視覺設計)
Ui gathering(視覺設計)Ui gathering(視覺設計)
Ui gathering(視覺設計)
 
Android ui design tips
Android ui design tipsAndroid ui design tips
Android ui design tips
 
E人e本产品简介
E人e本产品简介E人e本产品简介
E人e本产品简介
 
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹炎炎夏日學 Android 課程 - Part2: Android 元件介紹
炎炎夏日學 Android 課程 - Part2: Android 元件介紹
 
Gentek应用介绍20111123
Gentek应用介绍20111123Gentek应用介绍20111123
Gentek应用介绍20111123
 
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2  mobile - oss - oss行動領域-2 (ver1.0)開放原始碼 Ch3.2  mobile - oss - oss行動領域-2 (ver1.0)
開放原始碼 Ch3.2 mobile - oss - oss行動領域-2 (ver1.0)
 
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0) 開放原始碼 Ch3.1  mobile - oss - oss行動領域-1 (ver1.0)
開放原始碼 Ch3.1 mobile - oss - oss行動領域-1 (ver1.0)
 
Mobile app design 2010
Mobile app design 2010Mobile app design 2010
Mobile app design 2010
 
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
IxDC 中国交互设计体验日-C1_张立州_手机客户端交互设计三部曲
 
App design process part III
App design process part IIIApp design process part III
App design process part III
 
可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx可用性测试篇__android客户端设计研究系列.pptx
可用性测试篇__android客户端设计研究系列.pptx
 
iOS产品如何实现快速版本发布
iOS产品如何实现快速版本发布iOS产品如何实现快速版本发布
iOS产品如何实现快速版本发布
 
初探程式語言設計以C#為例
初探程式語言設計以C#為例初探程式語言設計以C#為例
初探程式語言設計以C#為例
 
产品设计与用户体验(据说是马化腾用来做培训的PPT)
产品设计与用户体验(据说是马化腾用来做培训的PPT)产品设计与用户体验(据说是马化腾用来做培训的PPT)
产品设计与用户体验(据说是马化腾用来做培训的PPT)
 
Android workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phoneAndroid workshop - 01. Getting started on android phone
Android workshop - 01. Getting started on android phone
 
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)
LISA ASIA Forum - Localizing Interactive Media & Gamest-version (ZH version)
 
Android 4.x与2.x的区别
Android 4.x与2.x的区别Android 4.x与2.x的区别
Android 4.x与2.x的区别
 

Recently uploaded

函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 

Recently uploaded (15)

20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 

一起移动吧 交互篇