Download - 最终 大屏手机上的设计策略
![Page 1: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/1.jpg)
大屏手机上的设计小策略
--单手操作痛点讨论
![Page 2: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/2.jpg)
你有没有遇到过这种情况~
![Page 3: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/3.jpg)
你有没有遇到过这种情况~
![Page 4: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/4.jpg)
你有没有遇到过这种情况~
![Page 5: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/5.jpg)
你有没有遇到过这种情况~
![Page 6: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/6.jpg)
痛点
执行任务 达到目标
![Page 7: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/7.jpg)
那如果这样…
![Page 8: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/8.jpg)
然后这样…
![Page 9: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/9.jpg)
我们会讨论什么?
执行任务 达到目标
痛点
设计tips
![Page 10: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/10.jpg)
关于这次讨论~
2个环节 2个目标
•设计总结•设计应用(痛点讨论)
•设计思路,设计意识•解决方案
![Page 11: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/11.jpg)
关于这次讨论~
第1个环节
![Page 12: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/12.jpg)
大屏
单手操作
回到痛点…
![Page 13: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/13.jpg)
对大屏的吐槽…
![Page 14: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/14.jpg)
对大屏的吐槽…
![Page 15: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/15.jpg)
“大”行其道-趋势
Iphone54英寸
三星s45.1英寸
Nexus55英寸
魅族35.1英寸
Note35.7英寸
联想K9005.5英寸
华为mate6.1英寸
![Page 16: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/16.jpg)
为什么喜欢大屏?
更大的可视范围和操控区域
视频 游戏 阅读体验较好
跟随潮流…
![Page 17: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/17.jpg)
为什么喜欢大屏?
![Page 18: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/18.jpg)
如果,这理由还不够…
![Page 19: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/19.jpg)
为什么喜欢大屏?
大屏显脸小
![Page 20: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/20.jpg)
•大屏并非是最好;最优的屏幕大小因人而异;
•“大行其道”的现象与市场,消费心理等多因素有关;
•但我们可以通过设计减少因为屏幕大而带来的痛点。
接受大屏现象
![Page 21: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/21.jpg)
关于单手操作的质疑
![Page 22: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/22.jpg)
为单手操作的必要性
UXmatters发布针对用户握持和操作手机习惯的研究报告
![Page 23: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/23.jpg)
为单手操作的必要性
![Page 24: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/24.jpg)
•手机角色的转变:
移动互联网入口;
生活工作学习助手(手的延伸)
为单手操作的必要性
•使用场景移动性:
行走,站立,地铁公交,床上躺着~
单手操作最自然 ~
通信工具
![Page 25: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/25.jpg)
为单手操作设计很有必要!!
![Page 26: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/26.jpg)
当大屏手机遇上单手操作
矛盾:拇指覆盖区有限,顶部功能无法顺利触达。
![Page 27: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/27.jpg)
1.魅族3—下拉悬停
![Page 28: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/28.jpg)
操作位置转移1.魅族3—下拉悬停
![Page 29: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/29.jpg)
操作位置转移1.魅族3—下拉悬停
![Page 30: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/30.jpg)
操作位置转移1.魅族3—下拉悬停
下拉悬停:降低操作区域的高度;
优势:“强大的微创新”(创新性;基本可单手操作使用;)
劣势:“使用率不高”“鸡肋”(成功率不高;心理负担大;拇指操作流较长;)
总结:操作位置下移的设计思路;
![Page 31: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/31.jpg)
2.Fuubo—菜单
![Page 32: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/32.jpg)
2.Fuubo—发送操作
![Page 33: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/33.jpg)
操作位置转移
fuubo:将常用功能放在底部(符合FIT原则的操作)
优势:创新性强;很方便进行单手操作;劣势:无
2.Fuubo
![Page 34: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/34.jpg)
3.Q立方桌面
![Page 35: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/35.jpg)
操作位置转移
Q立方桌面:操作位置从顶部移到页面内所有区域;优势:方便操作;劣势:无。
2.Fuubo
![Page 36: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/36.jpg)
4.快播—单手模式
![Page 37: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/37.jpg)
快播:将操作按钮位置移动;
优势:大胆设计;劣势:操作并不方便;
手指滑动不自然;操作按钮排列方式不自然;
总结:不要为了设计而设计;提供方便的操作;
4.快播—单手模式
![Page 38: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/38.jpg)
5.讯飞输入法-单手模式
![Page 39: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/39.jpg)
5.Note2-单手模式
![Page 40: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/40.jpg)
单手模式:将操作区域位置移动;
优势:设计创新;提供了方便操作;劣势:点击区域减小,弱化了大屏的优势;
切换为双手操作有障碍;
总结:为单手操作的设计不影响双手操作;
5.输入法&Note2:单手模式
![Page 41: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/41.jpg)
5手势
![Page 42: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/42.jpg)
手势操作
优势:手势操作不受区域限制;操作快捷;
劣势:需要学习成本;误操作;
5手势
![Page 43: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/43.jpg)
6.长按
长按等于顶部的点击操作;优势:可方便触达;劣势:隐藏较深,需要用户引导;
![Page 44: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/44.jpg)
7.软件硬件结合
手势y阅读翻屏 发微信语音助手、录音、相机等模块
呼出常用操作
Oppo N1背部触控技术;优势:创新性强;可实现单手操作;劣势:学习成本高;
操作不是很方便;应用范围底;
![Page 45: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/45.jpg)
8.传感器运用
摇一摇吹一吹…作为代替顶部点击操作的方案优势:操作方便无局限;劣势:切入场景不自然;操作动作较大;
![Page 46: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/46.jpg)
总结
设计方法:
1.操作位置转移:
•从上移动到底部;
•从居中移动到侧边;
2.转换操作方式:
•手势:
•长按;
•软硬件结合;(传感器)
![Page 47: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/47.jpg)
设计考量因素:
控制学习成本;
不影响大屏的优势;
切换到双手操作无障碍;
总结
![Page 48: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/48.jpg)
我们不是为了设计而设计,设计是为了解决问题。
![Page 49: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/49.jpg)
为单手操作做设计其实是在符合产品规范,满足其可用性的基础上
做优化的过程。
![Page 50: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/50.jpg)
这个过程中,我们可以总结一些规律用来思考设计方案,但最
重要的是设计意识的培养。
![Page 51: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/51.jpg)
第1个目标:必要性
how to do
关于这次讨论~
![Page 52: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/52.jpg)
关于这次讨论~
第2个环节:浏览器痛点
可能的解决方案
![Page 53: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/53.jpg)
是的,你们要开始发言了。。
![Page 54: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/54.jpg)
浏览器痛点讨论
你可以从这里入手
•位于页面顶部的操作;
•用户常用功能:搜索;收藏;下载…
ps:由于大屏而产生的痛点奥~
![Page 55: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/55.jpg)
我想到的:
痛点:1.搜索栏,地址栏;2.刷新;
3.收藏/历史/下载页面;4.搜索VR;5.分享;6.Action bar;7.长按菜单;8….
![Page 56: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/56.jpg)
解决方案
设计考量因素:
•控制学习成本;
•不影响大屏的优势;
•切换到双手操作无障碍;
设计方法:
1.操作位置转移:
•从上移动到底部;
•从居中移动到侧边;
2.转换操作方式:
•手势:
•长按;
•软硬件结合;(传感器)
![Page 57: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/57.jpg)
关于这次讨论~
2个目标
•设计意识•解决方案
![Page 58: 最终 大屏手机上的设计策略](https://reader030.vdocuments.mx/reader030/viewer/2022012402/559e02111a28ab2f6a8b4644/html5/thumbnails/58.jpg)
微信号:南音
谢谢大家~