大屏手机时代,如何重塑界面交互


12.30.2014 约稿于百度MUX新官网上线
这是一个大屏手机的时代。
强调这件事情的意义在于,这已经成为事实。
Medium上存在一份个人统计。
在过去7年,新上市的手机屏幕尺寸越来越大。
157-001
以4.5英寸为分界点,我们更清晰的看到这一变化。过去的两年,4.5英寸的比例从10%升至80%。
157-2
在国内的过去3个季度,使用FHD HD分辨率的手机从38%的份额增至50%。
157-3
【图】《百度移动分发报告2014H1》
更大尺寸的屏幕可以承载更多的内容展现,更适合游戏、阅读与播放视频,体验得以提升。
157-004
【图】《百度移动趋势报告2014Q2》
然而屏幕尺寸的上升并没有引起用户操作上的过多不适,有51%的用户已经适应双手操作。
157-5
【图】《How Do Users Really Hold Mobile Devices》by Steven Hoober
即使用户单手操作,在操作大屏幕时的相对盲区(深色区域),需要更多的响应时间,也可以被接受。
157-6
【图】《Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?》By Mikkel Bo
即便如此。3.5英寸~4英寸,依然是平衡单手操作与体验的合理尺寸范围。
157-007
这样就产生一个矛盾:用户拥有更大屏幕的尺寸,但从人机交互的角度,并不完美。
面对这一现状,从APP产品界面设计的角度,需要做出改变。
大屏幕拥有典型的可用性问题:纵向单手操作机身,边角、顶部、左右侧边难以触达,放置在以上盲区的点击入口,将导致体验路径中断。
交互设计角度的最佳实践:
1.设计安全区域,避开操作盲区。
示例,百度搜索结果页,根据视线规律,典型的左上角操作盲区可以用于logo展现。
157-8
2.注意使用场景路径触发的连贯性。
示例,在百度手机助手Android中下载百度浏览器,操作区域集中在安全区域。
157-009
3.更多的使用可拖动的浮动按钮,给用户更自由的操作可能性。
示例,百度浏览器Android中翻页/返回顶部的组合按钮。
157-010
4.更多的使用手势,并提供暗示。
示例,百度浏览器Android的删除窗口操作。
157-011
5.更多的使用语音作为输入方式。
示例:生活手记中使用语音替代键盘输入。
157-012
6. 横屏Pad化的操作设计,以及更多的内容展现。
示例,百度浏览器iPhone的横屏设计,如同网页的Responsive Layout概念。
157-013
在界面交互的层面之外,在不远的时间,硬件存在更多的优化可能性。
1.更窄的边框,更大的显示比例。
157-014
2.柔性材质。
157-015
3.“手机”成为服务的触发者,屏幕投射与隔空操作。
157-016
《The World as a Display》
之所以将讨论的范围扩展到硬件,是希望设计师在针对具体屏幕设计的同时,能够从另外的视角,思考人机交互的变化与可能性,激发创造力。
当前是大屏手机的时代,推动你的手机APP产品跟进吧!
一些有价值的相关基础研究链接

  1. 百度移动分发报告2014H1
  2. 百度移动互联网发展趋势报告2014Q2
  3. The Rise of the Phablet: Designing for Larger Phones
  4. Common Misconceptions About Touch
  5. How to design for thumbs in the era of huge screens
  6. Designing for Large Screen Smartphones
  7. Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
  8. Insights on Switching, Centering, and Gestures for Touchscreens
  9. A comprehensive look at smartphone screen size statistics and trends

(译)Windows Phone中环绕icon的圆圈

原文http://ux.artu.tv/?p=176
译文http://www.mdong.org/?p=2214
在Stockholm的Windows Phone Design Day期间的Q&A环节,Stockholm本地的交互设计师Petter Sifver提了一个问题,关于Windows Phone app bar上的icon,想知道为什么icon的周围会有圆圈。Petter友好地在其博客上为分享了他围绕设计阐述的观点

我们看到的是Button,而不是icon。——从字面上。在这些Button内部都有小icon。微软提供的开箱即用(out-of-the-box)的Metro设计语言有一致性接近“button like”(可意会的按钮)控件。不论它是一个Push Button, Toggle Button, Command Button或者媒体播放Buttons或者icon button——button在Windows Phone的Metro语言里有一个边框,来定义边界。所以icon buttons在app bar是朴素地遵循了同样的语言——我理解它们可能造成困惑的原因是,我注意到当我们谈论icon时,我们会经常表述在圆圈里的内容并称它们是icons。当我们谈论icon我们会表述它们像icon(没有圆圈——即便如此,99%的它们被当icon buttons来使用)。

Saliency概念是正确的,而在我们的Metro button设计语言中有例外设计。
这样做是在保持一致性。称呼它们button或icon从字面看起来很接近,但是有着非常大的区别。我们使用button用来交互,使用icon传达一个单项的信息。例如,在电话应用在call history list界面中紧挨着calls使用带有电话icon的button——它们是button,不是icon。

另外一个使用icon buttons例子是在文字消息应用——当你希望增加一个新的联系人并发送一条文字消息,你得到一个带有加号icon的小button,同样的,它是一个button——不只是一个icon。你会发现我们不会使用icon作为button。它已经通过加号icon吸引了人去使用——我知道我被建议了。回到开始,正确的接近windows Phone的Metro设计是使用icon button。

现在我们看一下我们如何使用icon。例如在状态栏中,它们是确确实实的通知icon,并且没有使用圆圈(它们不是button)。

我们使用icon做为图形,它们提供给用户单项的信息(它们是不可交互的,因此不是button)。例如在电子邮件应用我们使用小icon(不是button)与用户交流。当有附件在一封邮件里,这时它会成为高优先级邮件(标记)。

所有这些,我希望明确,我们在Windows Phone Design Day所谈轮到——Metro在做两件事情:Metro设计法则与Metro设计语言。Metro法则是设计支撑。Metro设计语言建立在法则之上,是在实体UI元素、动画、排版、构图与其它交互方向中的证明途径。

Metro设计语言由三件事情所定义:Windows Phone的native应用(邮箱应用、文字消息应用、people hub、本地搜索等等);第二,Windows Phone UX Guidelines;第三,控件库与其它Windows Phone SDK & Silverlight Toolkit的可用资源(所有的三项彼此之间会保持一致性)。开发人员与设计人员可以使用Metro设计语言,这会成功地为Windows Phone建立精巧美观、引人注目与一致性的体验。
Metro法则是优先的,它凌驾于任何语言,所以设计人员可用自由的探索法则,并且通过非主流的方式被你所证明。我们也乐意看到这些事情发生。Metro原则允许无限的探索与进化。这里我们给一些思路…从Swiss Design Style的课程中读一些文章。这描述了许多Swiss设计背后的理念(Metro的根源在它,也可以称为International Typographic Style)——阅读其中的海报与印刷媒体设计。然而,许多这些海报、设计与Metro设计语言并不相像,但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

NUI自然用户界面(Natural User Interface)


NUI不是一个新名词。
只是经历近年的一些新产品,有了更贴切的感受。
特别是消费电子终端界面CLI、GUI、NUI的变化。在桌面端,对象通常是显示固定的屏幕,设计师专注于键鼠驱动下的视觉效果。到了移动端,拥有更多传感器与交互方式,便携使得移动设备不限时空,传统专注于固定场景与操作的设计思路不合时宜。
NUI的概念恰好触碰到这一变化(并不局限于消费移动设备)。
设计亦不存在创新,只是发现。
社区 http://nuigroup.com/forums
Wikipedia NUI定义 http://en.wikipedia.org/wiki/Natural_User_Interface
自然用户界面自然在哪儿 http://blog.sina.com.cn/s/blog_4caedc7a0102dzpk.html
NUI视频集(proxy)http://vimeo.com/channels/nui
概念
“自然用户界面”(NUI)是下一个的人机交互(MMI/HCI)的模式转变。基于传统的人类本能的交互模式,如触觉、视觉、声音、运动和较高的认知功能,如表达、理解和记忆。自然用户界面的目的,是利用了一种沟通方式,更广泛的权力,利用有广泛技能的人才,通过传统的物理相互作用收益。
笔记
作为一个学科;NUI目标在于探索研究受到自然启发的计算技术,另一层面,尝试根据信息处理与交互模型理解我们周围的世界。通过它们的学习我们复制真实世界的环境,利用新兴科技与传感技术,获得在物理与数字客体间更精确与优化的交互。
从经验来定义自然交互:人们自然地沟通是经由手势、表情、运动,通过观察与操作物理客体来探索世界;主要假设是他们应该被允许与技术的交互,如同与日常真实世界的交互。自然用户界面的特色是一种新的建筑美学,关于如何在物理空间伴随人类感官,迁移计算到真实世界、创建沉浸式体验。
Shneiderman(1983)解释了用户控制的核心思想,包括:
可视的客体与操作
迅速的、可逆的、渐增操作
通过直接、使人感兴趣的可视化操作,替代复杂的命令语言语法
相关的关键字与领域
Open Source
开源
Cognitive Science
认知科学
Human Computer Interaction
人机交互
Computer Vision
计算机视觉
Linguistics
语言学
Multi-Touch
多点触控
Design (…)
设计
Artificial Intelligence
人工智能
Brain Hacks
Human Factors
人机工程
Interaction Design
交互设计
Usability
可用性
Information Visualization
信息可视化
DIY (Do it yourself)
DIT (Do it together)
Psychology
心理学
Philosophy
哲学
Physics
物理学
Natural Computation (http://en.wikipedia.org/wiki/Natural_computation)
自然计算
相关的人体传感技术

Voice recognition
声音识别
Finger identification
手指触摸鉴定
Gaze vector
Facial expression
面部表情
Handheld device movement
手持设备动作
Biometrics (body temp, heart rate, skin impedance, pupil size)
生物测定(体温、心率、皮肤抗阻、瞳孔大小)
相关的产品
Apple iPhone
Microsoft Surface
Microsoft Natal
Microsoft Roundtable
Microsoft Windows 7
Amazon Kindle
Reactable
Pulse Pen
Nintendo Wii

「milk香港版」交互设计漫谈(1)——Splash screen


当产品相对稳定与可控,小神有愿望快速记录这个项目。
内容涉及小神参与产品设计与执行的过程,由交互/视觉设计层面的需求分析、功能设计与设计执行组成。
与其带入一些工作中的设计技巧,小神更愿意分享其中的设计思想与理念憧憬。
设计之所以不同于美化,是因为前者被赋予了驱动的灵魂。

背景

milk香港版,内部命名”milk mobile”。是香港潮流杂志《milk》在移动新领域的合作尝试。目标设备为主流的中高端便携移动设备,iPhone/iPod touch/Android Phone/WP7…目前iOS版本如期发布,您可以从这里获得最新的版本。其它平台蓄势待发…
在发布后两周中,milk香港版荣得Apple app store的”新品推荐”与”热门推荐”,Lifestyle排位第二。
小神在过去的三个月,从零开始着手milk香港版的设计执行。

设计的生命周期

在展开一项工作时,我们都希望对它在整体上有所控制。
一个相对清晰的timeline使得设计在时间与质量之间平衡,并在恰当的里程碑有所产出,跟随整个项目进展。
milk mobile的设计定义
milk mobile的品牌与内容定位,决定这即是一面向城市快速消费的精神食粮。
它具备几个特质——高时效性、眼球经济、缺乏耐心的。
继而在视觉与操作着力营造如此的氛围:

  • 信息传递的高度流畅。
  • 信息呈现的节奏感。
  • 轻松的操作浏览环境。

探索从Splash screen开始
Splash是用户进入App,直到程序完全可用前,显示的第一个视图。
Splash Screen概念存在的价值

  • 品牌识别(权重30%)
  • 当用户通过桌面icon进入milk香港版,会再此传达具有品牌象征的手写milk英文字符。与milk其它产品形象统一,用户得以加深认同感与归属感。

  • 必要的数据加载与反馈过程(权重70%)
  • 对于milk香港版而言,splash screen的存在更多承载的是功能层面的需求。
    对网络与cache的不同状态产生的scenarios进行处理,并提供良好的反馈。

在iOS Human Interface Guidelines,对Splash的概念有较为详细的阐述,你可以点击这里查看。但并不赞同对Splash Screen的一个定义——Launch Images。
我们所感知到的信息是流动的,图像与其承载的信息也应该在表现上流动,贴近感知。
流动的图像表现上更贴近于animation,iOS从文字示意上误导设计人员并限制了它的可能性。
Launch/Splash是一个无限延展的屏幕空间,不仅是”图像”。
作为跨平台设计,Android对Splash screen的理解,更注重实用性。

If your application has a time-consuming initial setup phase, consider showing a splash screen or rendering the main view as quickly as possible and filling in the information asynchronously. In either case, you should indicate somehow that progress is being made, lest the user perceive that the application is frozen.

Windows Phone 7注重信息传递的效率。绝对效率是应该被真正推崇的,当你不能提供更好的理由使其存在。

Don’t use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with poor performance. Use them only to give feedback and reduce the perception of time for programs that have unusually long load times.
Don’t use animated splash screens. Users often assume that the animated splash screen is the reason for a long load time. Too often, that assumption is correct.

通常,我们尊重平台的design guidelines,它使得你的app与OS融为一体。
milk香港版Splash screen wireframes
基于以上的定义,沉淀设计。文档的细则,受限于NDA将不被分享。但你可以在测试app的过程中,看到不同scenarios下的表现。

  • 当无网络无cache状态。
  • milk香港版不可用,没有数据的App是丑陋的。用户更需要的是一个友好的帮助界面,提供状态反馈与解决方案,在易识别的区域提供异常网络状态与”重试”入口。

  • 当有网络无cache状态。
  • 客户端从服务器端取得少量的必要数据,继而无缝过渡。

  • 当无/有网络有cache状态。
  • 客户端优先读取cache,弱化用户不需要参与的载入状态信息,并无缝过渡。

受益于尺寸变形动画,milk logo的使用场景由Splash自然转化到app页面。于此同时,渐隐Splash背景与隐藏提示信息。由此结束整个Splash screen。
milk香港版Splash screen的视觉设计与交付
Splash的视觉风格统一于app完整的视觉设计。
黑白为色调,赋予皮革材质,以幽暗的顶部光线渗透全部的元素。致力于简洁但不失细节的表现。(视觉设计将单独成文)
使得用户将视觉重心停留在表现丰富的资讯信息。
针对iPhone的屏幕与app的默认展示方式,需要320×480以及为retina屏幕的640×960两种尺寸的设计(单位px)。
Android有着更广的屏幕设计需求,但从实际的开发实践,我们只保持了480×800的设计资源。这被验证为是体积与质量的最佳妥协方案。
接下来的是其中的一则redlines图像,此类的设计资源为团队的开发人员提供参考,使得整体项目运转顺利。

当时间充裕,执行Flash实现的高仿真模型,更高效的推动沟通,并为开发人员提供参考。
Review设计是一个自我提高的过程,并希望对读到该文的同学有所帮助。