移动设备界面设计
2021-03-28 15:43:13 11 举报AI智能生成
移动设备界面设计
作者其他创作
大纲/内容
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.颜色（参加平台规范）
0 条评论
下一页
