交互学堂
专注分享专业知识

2015 年移动设备界面设计语言及风格总结

起点学院

引文:2014年,Google推出影响全球设计趋势的materialDesign,接着苹果推出ios8和两台影响ios屏幕适配的大屏手机

1.大屏手机的普及化

首先让我们看一眼友盟的数据

Android

82593580

601230477

ios

202828843

590710234

友盟每天推送的邮件

82598930

595308539

3.5英寸~4英寸——平衡单手操作的合理尺寸范围。

601200060

51%的用户适应双手操作

82616847

盲区(深色区域)更多响应时间

202833154

为什么我们需要大屏手机?

展现、承载更多的内容:游戏、阅读、播放视频…

590726506

(以上,参考 大屏手机时代,如何重塑界面交互)

不用放大就可以看到主体图像,直接浏览内容

353926554

无需水平滚动就能看到更多文本

202846775

面对大屏手机,苹果做了什么?

601233806

轻触两次home键……

搜狗做了什么?

82676598

单手键盘

google做了什么?

在纷乱的智能设备和杂乱的屏幕种类中,

发布Material Design,构建跨平台和超越设备尺寸的统一体验

我们该怎么做?

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

31395435

以内容为核心,用UI支撑内容。

  • 简化排版结构
  • 去除视觉修饰
  • 聚焦(突出重点)
  • 增大字间距、行高度
  • 只使用一种字体

(我感觉是借鉴了印刷上的一些规范准则和版式设计)

590761398

完美的下划线

  • 哪些文字可点击?
  • 不需投入太多注意力
  • 距离文字恰当
  • 当有下行字母占位时,下划线要紧贴其后
  • 清除字母下伸部分

31442923

353963333

大量留白

让重要内容、功能醒目聚焦。

353969360

可用性问题:

  1. 纵向单手操作机身
  2. 边角、顶部、左右侧边难以触达
  3. 放置在以上盲区的点击入口,将导致体验路径中断

屏幕上半部分放置主要内容,从左屏幕到右屏幕依次排列

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

590766246

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

354021043

更多手势(以手势驱动界面);

202932624

语音代替键盘输入

601394114

paper的聊天头像

  • 滑动到“X”处删除

601398128

  • 任意位置的头像点击后弹出对话框

354035995

  • 第一次下拉显示“删除”按钮
  • 第二次删除删除草稿

354034298

846907379

内容跟随设备(屏幕)旋转

聚焦用户关心的主要内容

595898236

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

83311739

模态视图

  • 承载连贯操作
  • 不脱离主任务
  • 临时阻止其他部分的操作
  • 非线性
  • 引起关注
  • 简短
  • 高度聚焦

601609179

paper的展示搜索结果

淡出+延迟

31770145

内容区域用有边界按钮区分内容

846918938

2.动效的广泛应用(app的肢体语言)

Authentic motion

Easing Functions Cheat Sheet

Animated Checkboxes and Radio Buttons with SVG

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

随着显卡的提升,像素的增多,我们不禁要问,为什么像素少得可怜的时候我们要拟物化GUI,而像素多得吓人的时候我们反而极简而扁平呢?

ios7发布引发了全民扁平化,而动效为设计带来更多的可能和惊喜。设计师们又多了一片可发挥的领域。

83488255

仅用在希望吸引用户注意的部分

展示面积相同时,用户注意力会按这个顺序依次被吸引

601616613

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

354129116

1.面积大、时间长

产品介绍

590882609

595917664

2.面积大、时间短

难看清

用于页面切换,展现界面之间的空间关系

见“转场动画”

3.面积小、时间短

轻引导、轻反馈、轻提示→不打断用户流程,却轻轻吸引注意力(情感化设计)

Path的下拉刷新和小时钟

  • 流动感
  • 弹性

590894462

quora的搜索

203180424

4.面积小,时间长

一直持续轻微吸引用户,不干扰其他功能和信息

601632776

滑动指向性动效(理清物体排列状况)

chrome

846932487

对象切换-指向性动效(重点:这是平滑动画的关键)

当前物体后移(变暗淡透明),新物体出现

YouTube

595923745

Path个人页的滚动渐隐

最后标题出现,背景照片贴着状态栏…

595928426

标题的淡入淡出

  • 图片和主题右移,退出视线
  • 右上角的白色标题经过三个icon时逐渐变暗直至消失
  • 逃出三个icon的范围,白色标题又陡然呈现

590914992

添加-指向性动效

新物体滑入,挤出旧物体

范例:any do

846965876

范例APP:clear

31792930

下滑消失,上滑出现(增大可读区域)

范例APP:storehouse

31796665

31850312

点击-提示性动效

354139498

滑动-提示性动效

354136551

分合-指向性动效

any do 的任务的详细信息的修改(上层和下层合在一起)

胡痴儿按:几乎所有动效的进场和出场都是正方向和反方向的关系,也就是假如录成一段动画就是可循环重复的

分合就像约会。当你点击,一个妹子从雪山上来,当你点返回,她又回雪山去了

590922331

601654811

动效控件

范例APP:posegram

354190874

Path的分享给特别好友

590971036

Path的收藏

846979166

flickr的收藏

595946645

paper的like

焰火绽放

601666380

加载动画:

354197626

590981419

path的加载指示器

(简直唯美啊,而且每次都不同)

846982845

83527246

590981606

闲鱼的加载

203222207

京东app的刷新

83534385

来往的下拉

595954435

闲鱼的下拉

601675397

83538658

paper左右时间轴

按历史顺序排列

591003752

loading设计 _加载界面_loading图片素材欣赏_UI/UX图片大全

展开-空间扩展动效

if

31890870

转场动画(用产品连续性表达了设计的前后关系)

(坚硬的,刚性强,却不灵活)

范例APP:Flipboard

847030614

相似案例:deal in

601735506

601721633

对比案例:ibook(柔软的曲面,刚性差,但灵活)

601752013

相似案例:play books

play books for Ios

595982668

play books for Android

601757796

paper的卡片式翻页(这种神级的存在(@﹏@)~ )

  • 轻微的弹动
  • 卡片上动态的光泽

83577103

203250253

Steller的翻图(每张图都美到心醉)

847062659

storehouse

上翻或下翻时返回上级页面

(胡痴儿按:暗示性很强)

847078773

601775105

抛掷操作打开&关闭

paper

596017073

flickr

596023480

层次和暗示

paper的层次

203263646

354251999

暗示运动轨迹、动态焦点移动

胡痴儿按:

  • 物体运动受推力、风阻、重力影响
  • 物体按轨迹运动却不可见,除了黑夜里的火花、雪地里的足迹
  • ios的运动轨迹非常自然,它是有一定弧度的,像鱼儿水里游,像少女的乳头一浪接一浪
  • Android5.0之前的运动轨迹就是直线的、刚性的,机械得像个跳机械舞的

ios应用启动

31943986

案例:QQ音乐的MiniPlayer切换至播放页

分成动画:底层、信息层、唱片封面层 用不同的轨迹

203268144

601792183

慢入慢出(惯性)如:

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

开始时慢慢加速,停止时慢慢减速,如图:

83601480

apple的messages

596028977

翻动app们

847089836

案例:same的尖叫博物馆(你给我滚看看→ →)

31951362

按次序进出并延迟滑动的icon

易信的朋友圈

203272588

paper的赞列表

601801978

  • paper的”hamburger”图标翻转成”X”

354265579

83618679

203281174

601814548

案例:pages

596268107

paper的分类管理

  • 点击长按大图出现“自定义视图”
  • 左右晃动的卡片

胡痴儿按:等待被添加或删除时,他们吓得发抖或高兴得颤抖

591068993

601824429

ibook

596289117

203454825

ios的日历

601929213

203394454

预期动效(预感即将发生)

IOS6

596295576

capture

1.在运动发生前的准备阶段

847219410

2.运动过程本身

591124173

3.运动产生的结果

83712502

sunnycomb

354306093

百度魔拍

847285326

nice

203526905

招牌动效(加深用户印象的差异化展现)

path的“+”

堆叠物体被展开

602003356

83723414

591155509

facebook 推出的paper关闭消息的拉伸曲线动画。

  • 背景被拖拽
  • 消息气泡箭头被拉伸
  • 最后缩回原处

602012101

596331604

这种动效设计是有具前瞻性的尝试和探索,像path的那个展开的“+”引发了跟风潮流。

强奸处女座的拉动

Google+的下拉刷新(像素越拉越细→ w→)

847446969

掐死same

591152928

拆散一对same(我当时看到这俩分离再相聚的时候心都醉了)

203539991

203543896

flickr的下拉刷新

203555828

602092363

602102153

3.更生动的情感化设计

404页面设计 _404 not found_404出错页面_404错误页面图片素材欣赏

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

  • 没有用户学习成本,且用户可使用自定义;
  • 统一跨平台的视觉交互体验;
  • 降低设计开发成本,会自动更新;

(胡痴儿按:一个产品,要和iOS交配产生一个个体,具有iOS交互属性的后代,又要和Android交配,携带Android交互基因的后代,也就是说这个产品的视觉上要像他父亲(公司产品线),界面和交互上要像她母亲(iOS或Android),还要和她母亲的孩子们在移动端和谐相处{>~<})

(沉浸式体验的除外)

案例:豆瓣使用了iOS的系统主题UIkit

  • 用半透明底板:关联使用场景、区分内容;
  • 无边框按钮(被激活时高亮)

32154739

596420063

用户自定义字体大小

使用系统字体:确保易读性、可调节性;

847461726

豆瓣阅读

203585436

5.hamburger导航变tab导航(当时我设计恋爱笔记时参考的豆瓣小组,后来豆瓣小组改为底部导航,我们也改了)

扁平结构层级,随意切换。从深到广,从多到简。减少入口和用户思考时间,更快找到自己所需的功能,功能更专精。

案例:豆瓣小组

602258924

6.数据可视化(数据表现越来越丰富,如饼状、柱状、曲线、图案)

203588594

视差滚动

胡痴儿按:我想到了坐火车时看窗外,物体分了很多层,远处的山缓慢而悠闲,近处的电线杆飞窜着,拍出来的照:近处产生了运动模糊,远处清晰,由近向远越来越清晰。。太美了{>~<}

从一定距离的两点,观察同一目标的方向差异。

596431466

黄油相机的欢迎页

(注意每个元素的运动速度!)

596432157

一些新的交互探索

用陀螺仪的重力感应看全景图!

paper

203594375

red dot

354441401

给用户一点小惊喜(我当时一不小心屏幕横过来就被感动了)

847472650

补充:

个性的字体

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

Roboto,安卓标准字体

602268096

Roboto & Noto fonts

2014年Adobe与Google宣布推出思源黑体(更适合在移动设备及高分辨率屏幕上呈现)

颜色

Ios的Key color

203619172

Android

83760792

Color – Style

icon的几层境界:

  • 适合不同背景
  • 简洁有力(在小尺寸时清晰突出)
  • 高辨识度,吸引眼球
  • 塑造品牌
  • 隐喻(设计背后的故事)
  • 情感连接

203635500

品牌

用主题色标明可交互性的控件

same的蓝色

354455524

  • 自然地融入品牌
  • 巧妙地订制淡淡的水印

day one翻到底部时

354452858

Path翻到底部时

354465381

二级页面的返回和logo品牌巧妙地融合

quora

32221599

path

83771357

在当前页面提供设置选项

设置选项更浅更扁平

bilibili的弹幕设置

203658527

354483815

斗鱼Tv的弹幕设置

596452791

847524952

网易云阅读

203667837

596462948

UI上显示弱反馈

  • 当前在做什么
  • 接下来要做什么

易信的设置头像

32263978

文章来源: 设计夹微信公众号,作者@胡痴儿

未经允许不得转载:IAMUE_专业交互设计平台 » 2015 年移动设备界面设计语言及风格总结

交互设计问答社区

寻找答案发起提问