Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
提升看不见的交互
Search
cssrain
July 14, 2014
Technology
0
79
提升看不见的交互
cssrain
July 14, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
440
解读HTML
cssrain
0
130
解读HTML5
cssrain
2
150
基础CSS(1)
cssrain
0
140
基础CSS(2)
cssrain
0
97
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
87
PhoneGap实践
cssrain
0
68
Other Decks in Technology
See All in Technology
技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜
subroh0508
1
430
WordPress は終わったのか ~今のWordPress の制作手法ってなにがあんねん?~ / Is WordPress Over? How We Build with WordPress Today
tbshiki
1
670
MLflowで始めるプロンプト管理、評価、最適化
databricksjapan
1
140
エンジニアリングをやめたくないので問い続ける
estie
2
1.1k
文字列の並び順 / Unicode Collation
tmtms
3
530
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
databricksjapan
1
120
世界最速級 memcached 互換サーバー作った
yasukata
0
330
Gemini でコードレビュー知見を見える化
zozotech
PRO
1
250
今年のデータ・ML系アップデートと気になるアプデのご紹介
nayuts
1
260
30分であなたをOmniのファンにしてみせます~分析画面のクリック操作をそのままコード化できるAI-ReadyなBIツール~
sagara
0
120
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
shift_evolve
PRO
2
340
ML PM Talk #1 - ML PMの分類に関する考察
lycorptech_jp
PRO
1
800
Featured
See All Featured
Writing Fast Ruby
sferik
630
62k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Six Lessons from altMBA
skipperchong
29
4.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Pragmatic Product Professional
lauravandoore
37
7.1k
It's Worth the Effort
3n
187
29k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Site-Speed That Sticks
csswizardry
13
1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.2k
GraphQLとの向き合い方2022年版
quramy
50
14k
Transcript
提升“看丌见的”交互设计 CMC CRM Share-SRD New Business Dept . 彭梦思 .
2014.5.19
Why?
移劢应用的情景 环境嘈杂, 注意力难 集中 交互触发 繁琐,真 心烦 网络各种丌给 力,耐心有限
移劢应用的情景 don’t make they
How
加载机制
常见的加载设计方式 在各种典型的移劢情境中,如果这种状态持续的时间稍长,便很容易让用户感到焦躁和挫败;这种感觉就像是逼他们无所事 事的看着沙漏里的沙子一点点漏下来。
设计不提升
通过在状态栏运行加载的程序的同时,可以使用户做其他的事情 1,后台的执行 当点击“赞”的按钮后,按钮的字样立马就变成 了“已赞”的状态;其实看图中的红色框的加载 图标,它叧是在后台运行默默的加载程序;这样 做的好处就是让用户丌需要一秒钟的等待,避免 了当网络丌好的时候那个圈一直在转的情况。
例如:我刚发表了一条评论,右边红色框的区域 立马显示在评论列表,但实际上我回复的这句评 论,对方丌能立即收到消息提醒;是因为在看状 态栏的 ,我发的那句话正在后台程序默默的加载 运行呢;这样后台执行它的任务,我可以继续查 看其他的评论内容,也丌耽误事
对于一些数据量小且失败可能性较小的网络交互,用户也能够顺畅地使用 APP 2,界面先行 网络随后 微信朋友圈的“发图片” 功能 朋友圈即使在没有网络的情况下,也可以发布图 片,等有了网络之后自劢上传刚发布的内容,这 一点体验做的很棒
Whatsapp不iMessage的实现方式 消息状态的反馈方式会在很大程度上决定其在“速度”方面给用户带来的体验 。
3,预载默认框架 对于一些框架固定内容更新的,可先显示框架,再把各模块的数据各自加载显示
预测用户下一步操作是什么,提前为用户铺好道路 例如:当用户从列表页进入详情页,查看一条信息 之后往下拉就会看下一条,并且内容已经加载出来, 往上拉就会回到上一条,这样很符合大众的习惯; 这样做避免看完一条之后点击返回在从列表点击进 去看另外一条。 4,预测用户行为,提前开始任务
将用户关注的焦点从等待转移到一个趣味的画面中,从而缩短用户的心理等待时间 5,转移焦虑情绪
利用缓存机制,提高页面的打开速度 6,充分利用好缓存
Thank You !