Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
一起移动吧-交互篇
Search
time zhong
November 15, 2013
Technology
0
120
一起移动吧-交互篇
time zhong
November 15, 2013
Tweet
Share
More Decks by time zhong
See All by time zhong
跨越不可能-让WebApp如Native般顺滑
timezhong
0
120
MAY I EAT WEB SPEECH
timezhong
0
110
可遇见的WEB
timezhong
0
150
一起移动吧-基础篇
timezhong
1
64
有沟必火
timezhong
1
130
我的一天
timezhong
0
110
被解放的GPU
timezhong
1
150
网站字体渲染过程
timezhong
7
850
Other Decks in Technology
See All in Technology
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
競技としてのKaggle、役に立つKaggle
yu4u
3
1.6k
On Your Data を超えていく!
hirotomotaguchi
2
690
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
140
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
1
310
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
JAWS-UG Bedrock Claude Night
yamahiro
3
610
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
320
VS CodeでAWSを操作しよう
smt7174
8
1.7k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
What's new in Ruby 2.0
geeforr
337
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
The Invisible Side of Design
smashingmag
294
49k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
BBQ
matthewcrist
80
8.8k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Designing Experiences People Love
moore
136
23k
Building Your Own Lightsaber
phodgson
99
5.7k
Transcript
None
Feedback
反馈类型 • 使用动画 如:iOS中的操作动画 • 改变颜色,ICON等 比如:链接,按钮 • 播放声音 •
其他 好的反馈要保证用户一直很清楚当前的状态
移动端的特殊性 • a:hover{text-decoration:underline} • -webkit-tap-highlight-color: rgba(0,0,0,0);
Gesture
None
None
None
None
None
可响应区域 • 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.
None
-webkit-text-size-adjust:100% -webkit-text-size-adjust:none
从竖屏到横屏的设计-1
从竖屏到横屏的设计-2
从竖屏到横屏的设计-3
从竖屏到横屏的设计-4
从竖屏到横屏的设计-5
从竖屏到横屏的设计-6
Keyboard
None
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