移动设备界面设计

移动设备界面设计

1.大屏手机的普及化

大屏现状

Android主流：1280*720

ios主流：1136*640

原因：大屏幕便于展现、承载更多的内容：游戏、阅读、播放视频…

趋势案例

1、苹果：轻触两次home健半屏操作

2、搜狗输入法：单手键盘

3、google发布Material Design 构建跨平台和设备的统一体验

怎么做

1、充分利用全屏构造更大的展示空间，创建沉浸式体验

2、以内容为核心，用UI支撑内容

3、大量留白。让重要内容、功能醒目聚焦。

4、可用性问题：纵向单手操作机身；边角、顶部、左右侧边难以触达；放置在以上盲区的点击入口，将导致体验路径中断

设计安全区域，避开操作盲区，比如在左上角操作盲区展示logo

使用场景路径触发的连贯性，操作区域集中在安全区域

全局切换（左右滑动在页面可控区域进行页面间转换）

更多手势（以手势驱动界面）

时效性产品的下拉刷新（获取最新信息，新内容上浮，旧内容下沉）

5、滑动代替了点击（屏幕太他妈大了，我一个弹钢琴的都点不到盲区有木有！！）

6、语音代替键盘输入

7、内容跟随设备（屏幕）旋转

8、横屏Pad化的操作设计，以及更多的内容展现，如同网页的Responsive Layout概念

2.动效的广泛应用（app的肢体语言）

1、用动效表现四维时空——展示Z轴空间、时间变化

2、仅用在希望吸引用户注意的部分展示面积相同时，用户注意力会按动效→颜色→形状顺序依次被吸引

3、相对面积和时长划分为四种动效

1.面积大、时间长

2.面积大、时间短难看清用于页面切换，展现界面之间的空间关系见“转场动画”

3.面积小、时间短轻引导、轻反馈、轻提示→不打断用户流程，却轻轻吸引注意力（情感化设计）

4.面积小，时间长一直持续轻微吸引用户，不干扰其他功能和信息

4、滑动指向性动效（理清物体排列状况）案例：safari多标签页切换

5、对象切换-指向性动效当前物体后移（变暗淡透明），新物体出现

6、添加-指向性动效新物体滑入，挤出旧物体

7、固定标签头部标签始终固定在顶部直到被顶走下滑消失，上滑出现（增大可读区域）

8、点击-提示性动效

9、滑动-提示性动效

10、切换对象-指向性动效

11、分合-指向性动效any do 的任务的详细信息的修改（上层和下层合在一起）

12、动效控件案例：posegram、flickr的收藏

13、加载动画:京东app的刷新

14、展开-空间扩展动效

15、转场动画（用产品连续性表达了设计的前后关系）（坚硬的，刚性强，却不灵活）案例：Flipboard

16、暗示运动轨迹、动态焦点移动案例：QQ音乐的MiniPlayer切换至播放页分成动画：底层、信息层、唱片封面层 用不同的轨迹

物体运动受推力、风阻、重力影响

物体按轨迹运动却不可见，除了黑夜里的火花、雪地里的足迹

ios的运动轨迹非常自然，它是有一定弧度的，像鱼儿水里游，像少女的乳头一浪接一浪

Android5.0之前的运动轨迹就是直线的、刚性的，机械得像个跳机械舞的

17、慢入慢出（惯性）案例：same的尖叫博物馆（你给我滚看看→ →）案例：知乎Android客户端的“三”和“←”之间的切换（完美地参考Gmail，很好地遵循了materialDesign）

如：车的启动压缩的弹簧展开坐下&站起球落地不断弹起动画：在运动开始和结束时更多的帧，而过程中用较少的帧

18、以操作焦点为中心的空间扩展（翻动、放大，拓展空间内容，简化引导流程）案例：Google以触摸点为中心延展

19、告诉用户他在哪，从哪里来到哪里去从缩略图到全屏，同时中心点转移案例：pages

20、空间速率Parallax界面视差空间结构（越靠近屏幕边缘启动速度越快、越靠近屏幕中心启动速度越慢）

21、预期动效（预感即将发生）

22、招牌动效（加深用户印象的差异化展现）案例：path的“+”堆叠物体被展开

3.更生动的情感化设计

4.遵循iOS和Android的各个平台规范

降低用户学习成本；

统一跨平台的视觉交互体验；

降低设计开发成本

用半透明底板：关联使用场景、区分内容；

使用系统字体：确保易读性、可调节性；

无边框按钮（被激活时高亮）

5.hamburger导航变tab导航扁平结构层级，从深到广，从多到简。减少入口和用户思考时间，更快找到自己所需的功能，功能更专精。

6.数据可视化（数据表现越来越丰富，如饼状、柱状、曲线、图案）

7.视差滚动

8.一些新的交互探索

用陀螺仪的重力感应看全景图！案例：paper

人与摄像头交互（捕捉用户运动轨迹）案例：camme通过前置摄像头捕捉手掌动作或眨眼实现快门

旋转交互案例：Nest转动调整、按下确定

招手取消报警

后台自动完成的交互追踪睡眠和呼吸等信息

Voice in：发出指令google glass的“Ok glass”

Voice out：反馈延伸moov运动设备siri给出语音反馈

9.模块化处理为解决用户对不同功能产品的选择困惑案例：Google积木手机

10.中控中界面案例：tesla中控

11.智能外设解决了屏幕软件上的操控缺陷，强化扩展功能

12.关怀设计案例：Smart PJ’s代替自己给孩子讲故事

13.给用户一点小惊喜

14.个性的字体随着各移动系统的设计规范逐渐统一和技术的愈发成熟，移动应用将会有更美观的字体。

Roboto，安卓标准字体

15.颜色（参加平台规范）