该文档提供了移动产品界面适配设计的原则和技巧，包括遵循官方指导、确认适配必要性、了解平台差异以及符合品牌形象。文中提到的设计技巧包括黄金分割和格式塔心理学的原则，尤其强调了元素的相近性和一致性。还涉及界面元素的缩放策略，以适应不同的屏幕尺寸和用户需求。

1. 移动产品界面适配设计
范冰 fanbing01@snda.com
2011.10.11

4. 终端 屏幕

5. 原则 技巧

6. 原则
PRINCIPLES

7. 1. 参阅官方指导文档
FOLLOW THE GUIDELINE

11. 2. 确认是否有适配必要
COFIRM THE NECESSITY

14. 1）游戏类 — 沉浸式体验

15. 2）阅读类 — 更大字体/展示面积

16. 3）输入类 — 更方便的输入

17. 4）影音/图片类 — 更合适的画面比例

18. 5）时间轴 — 更长的周期范围

19. 6）其它 — 操作平行元素

20. ● 围绕核心任务
● 不要丢失此前位置
● 有时需要另起炉灶
● 动画效果

21. 还没来得及做横屏适配？ ——

22. 「 Just Avoid Holding It In That Way ! 」

23. 3.了解平台差异性
FIT IN WITH PLATFORM

25. iPhone：简洁一致 减少记忆
Android：功能更多 节省界面

29. ……

31. 4.符合产品品牌形象
FIT IN WITH YOUR BRAND

34. WFT?!

37. 技巧
TECHNIQUES

38. 1.黄金分割
GOLDEN SECTION

44. 2.格式塔心理学
G E ST A L T P S Y C H O LO G Y

45. 1）接近性

46. 有充足的空间时（如小屏->大屏）
或界面元素较多时，确保相关元素位置
靠近。

50. 2）相似性

51. 空间有限（如大屏->小屏）或界面元素/信息
结构较多时，确保相关元素（颜色、尺寸、
画风等）一致。

53. 3）闭合性

54. 使用视觉引导，让用户感觉画面之外
别有洞天。

57. 3.界面元素缩放
ＲＥＳＩＺＥ ＥＬＥＭＥＮＴＳ

58. 1）等比例缩放

59. ● 适合全屏游戏类
● 优先匹配高度／宽度，多余部分剪裁
● 个别元素需额外放大/缩小

60. 2）固定中心+延展外围

61. ● 适合固定界面（九宫格、大图块等）
● 纯色、平铺、透明

62. 3）添加额外元素

63. ● 适合有明确层级关系的产品
● 致力于减少用户操作次数

64. 1. 参阅官方指导文档
2. 确认是否有适配必要
3. 了解平台差异性
4. 符合产品品牌形象
1. 黄金分割
2. 格式塔心理学
1)相近性 2）一致性 3）闭合性
3. 界面元素缩放

65. @XDash
http://about.me/XDash
http://www.syncoo.com

66. THANKS.