移动设备界面设计
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 条评论
回复 删除
下一页
