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

157-980

12.30.2014 约稿于百度MUX新官网上线
mux_new_website_mdong.org

这是一个大屏手机的时代。
强调这件事情的意义在于,这已经成为事实。

Medium上存在一份个人统计。
在过去7年,新上市的手机屏幕尺寸越来越大。

157-001

以4.5英寸为分界点,我们更清晰的看到这一变化。过去的两年,4.5英寸的比例从10%升至80%。

157-002

在国内的过去3个季度,使用FHD HD分辨率的手机从38%的份额增至50%。

157-003

【图】《百度移动分发报告2014H1》

更大尺寸的屏幕可以承载更多的内容展现,更适合游戏、阅读与播放视频,体验得以提升。

157-004

【图】《百度移动趋势报告2014Q2》

然而屏幕尺寸的上升并没有引起用户操作上的过多不适,有51%的用户已经适应双手操作。

157-005

【图】《How Do Users Really Hold Mobile Devices》by Steven Hoober

即使用户单手操作,在操作大屏幕时的相对盲区(深色区域),需要更多的响应时间,也可以被接受。

157-006

【图】《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-008

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

为什么去“设计”?

me_mdongorg

它是否在激发你的灵感?开始一项生意?设计一个产品?改善一个想法?它是否使得你去改变与模仿?它激发你旅行?或生活在一个另外的城市或者国家?

你是否需要某个人同样去告诉你,你的产品/想法/执行/品牌是如何伟大?我们说不要担心别人如何想,相信你自己的判断。当其他人怀疑时,坚持你的信念。停止等待最好的时间去做你想做的事情。只需要向它而去并且立刻去做。

不要追随潮流趋势。你可以碰触到最COOL的事情是做自己。在世界中旅行,在其它城市生活,学习不同的文化。学习,可以保持你的思想年轻。身份的焦虑,不要因此抱怨。

但是你对于你需要做的事情要心存愿景、坚持与自信。

如果你的工作真糟糕,不要责备其他人,你的老板、你的父母、世界。只是退出,并为自己的选择负责。这并不关乎一个糟糕的工作,而是关乎你进入到了一个错误的地方,你将变成什么样的人。

开始做近些年随时光溜走的想法,承担风险。相信你的感受。直觉是可靠的。
坚韧与集中精力在执行,不管开始是如何让人气馁。自信你所做的事情,即使有别人的怀疑。
为自己创造机会,这正是进步的时间。

The coolest thing you can do is doing it. – Bill Tikos (TCH)

The Continent

thecontinent

2014.7 at Qinghai

是彼此的过客
后会无期

软技能-非职权影响力

最近在上一些内训课程,做些简单总结。

重点:影响力概念、策略、5种不同的影响力方式。

概念:通过积极有效的沟通,权衡任务和关系,已达成目标的能力。

过程:

  1. 目标:主目标、次目标
  2. 策略:时间、地点、对象、方式
  3. 行动

方式:

  1. 果敢表达
  2. 有力说服
  3. 融合共赢
  4. 鼓舞激励
  5. 洞察感知

方式转换的情况:

  1. 事态停滞不前
  2. 事态发展与目标越来越远
  3. 对方情绪变化
  4. 对方肢体语言变化

变速箱模型(Influencing Gear-box Model)

influencing_grear_box_model

模型的关键在于:影响他人最有效的方法是通过“洞察感知”洞察情景变化与对方反应,适时转换影响方式,以达成目标。

一些继续体会的点:

  1. 你教会别人如何对待你。
  2. 向外看的人在做梦, 向内看的人将觉醒。

llolli 1.0 release

We release llolli 1.0.
Designer 小气的神.

Llolli is a todo & calendar app.
Designed with love, Llolli is a new experience that will make your life easier.

Features

• Fast to create todo use text, voice, photo.
• Fast to transform between todo and calendar.
• Suggesting you with color base on current todo list.
• Compatible only with Google Calendar for now.
• Reminders.
• A completely redesigned calendar experience for your iPhone.
• Support browse calendar by day, week.

Download from AppStore

llolli_mdongorg

梦旅程

地点:青岛

设备:Apple iPhone4S
dreamway_0_mdongorg
dreamway_1_mdongorg
dreamway_3_mdongorg

用Photoshop/Fireworks创建9PNG图像

写这篇帖子是突然觉得自己土啊,没做透彻,引以为戒。

如果9PNG的制作者不是DEV,而是UE,就不需要draw9patch.jar这个工具。
UI设计过程中的Photoshop/Fireworks,即可精确且高效地导出9PNG。

关键点:

1.元素四周设置边框为1px的全透明背景(看起来跟在draw9path一样)。
2.可以填充的内容规则:不透明纯黑色的线条、点、2个分开的点。
3.左右透明区域控制拉伸,上下透明区域控制内容。
4.后缀更名为.9.png。

范例:

mdongorg9png
(图像点击可放大)

个人倒是不建议把9PNG的控制权给DEV,通常他们不能通过draw9path.jar控制图像的质量,以及精确地了解图像伸缩与内容显示的区域。

最起初引发重新学习的过程是碰到draw9path.jar在MAC系统中不能运行是缘由所在路径中包含中文。

Heartbeats

封面摄于克什克腾旗。

I can’t understand
How it’s making sense for we put up such defense
When all you need to know
No matter what you do
I’m just as scared as you
Tell me am I mistaken
Cause I don’t have another heart for breaking
Please don’t let me go
I just wanna stay
Can’t you feel my heartbeats
Giving me away

我无法理解
我们建立那么多的防御 有什么意义
你需要知道一切
无论你做什么
我和你同样恐惧
告诉我是我错了吗?
我已经没有另一颗心为你破碎
请别让我离开
我只愿为你停留
难道你没有听到我的心跳
出卖了我

Hedgehog’s Dilemma

律子:“你知道豪猪吉列姆的故事吗?”
美里:“豪猪?带刺的豪猪吗?”
律子:“豪猪虽然想将温暖传给对方,但身体靠得越近越会使彼此受伤。人类也是这样的。”
……
美里:“所谓长大成人就是不断聚了散,散了再聚。为了让彼此不受伤害而保持适当距离。”