2015(20190929160211)【精品文档系列】.pdf

2015 年移动设备界面设计趋势 小编推荐：最近坐地铁看见有人看知乎的时候在看这篇回答，图片很吸引人，所以今早到了 公司就赶紧整理给大家，不可错过哦 ~ @胡痴儿的回答： 前提： 2014 年， Google 推出影响全球设计趋势的 materialDesign ，接着苹果推出 ios8 和两台影响 ios 屏幕适配的大屏手机 1.大屏手机的普及化 首先让我们看一眼友盟的数据 Android ios 3.5英寸 ~4 英寸 —— 平衡单手操作的合理尺寸范围。 51% 的用户适应双手操作 盲区（深色区域）更多响应时间 为什么我们需要大屏手机？ 展现、承载更多的内容：游戏、阅读、播放视频 … （以上，参考 大屏手机时代，如何重塑界面交互） 不用放大就可以看到主体图像，直接浏览内容 无需水平滚动就能看到更多文本 面对大屏手机，苹果做了什么？ 轻触两次 home 键 …… 搜狗做了什么？ 单手键盘 google 做了什么？ 在纷乱的智能设备和杂乱的屏幕种类中， 发布 Material Design ，构建跨平台和超越设备尺寸的统一体验 我们该怎么做？ 充分利用全屏构造更大的展示空间，创建沉浸式体验： 以内容为核心，用 UI支撑内容。 （我感觉是借鉴了印刷上的一些规范准则和版式设计） 大量留白。 让重要内容、功能醒目聚焦。 可用性问题： 屏幕上半部分放置主要内容，从左屏幕到右屏幕依次排列 设计安全区域，避开操作盲区，比如在左上角操作盲区展示 logo 使用场景路径触发的连贯性，操作区域集中在安全区域 materialDesign 的悬浮按钮（贴近手指）； 全局切换（左右滑动在页面可控区域进行页面间转换） miniplayer 左右滑动切歌 (更轻更扁平 ) listen 的启动页介绍的手势 时效性产品的下拉刷新（获取最新信息，新内容上浮，旧内容下沉） 滑动代替了点击 （屏幕太他妈大了，我一个弹钢琴的都点不到盲区有木有！！） 语音代替键盘输入 内容跟随设备（屏幕）旋转 聚焦用户关心的主要内容 横屏 Pad 化的操作设计，以及更多的内容展现，如同网页的 Responsive Layout 概念。 模态视图 更大的热区 Path 的个人背景图 单击任意一处弹出 再单击弹窗外任意一处退出 内容区域用 有边界按钮 区分内容 2.动效的广泛应用（ app 的肢体语言） Authentic motion Easing Functions Cheat Sheet Animated Checkboxes and Radio Buttons with SVG 用动效表现四维时空 —— 展示 Z 轴空间、时间变化 随着显卡的提升，像素的增多，我们不禁要问，为什么像素少得可怜的时候我们要拟物化 GUI ，而 像素多得吓人的时候我们反而极简而扁平呢？ ios7 发布引发了全民扁平化，而动效为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的 领域。 仅用在希望吸引用户注意的部分 展示面积相同时，用户注意力会按这个顺序依次被吸引 相对面积和时长划分为四种动效 1.面积大、时间长 产品介绍 2.面积大、时间短 难看清 用于页面切换，展现界面之间的空间关系 见 转场动画“ ” 3.面积小、时间短 轻引导、轻反馈、轻提示 →不打断用户流程，却轻轻吸引注意力（情感化设计） Path 的下拉刷新和小时钟 quora 的搜索 从横屏切换会的 google 被弄歪了 =_= 4.面积小，时间长 一直持续轻微吸引用户，不干扰其他功能和信息 滑动指向性动效（理清物体排列状况） chrome Safari 对象切换 -指向性动效 当前物体后移（变暗淡透明），新物体出现 YouTube Path 个人页的滚动渐隐 最后标题出现，背景照片贴着状态栏 … flickr 添加 - 指向