大屏智能手机设计要点

Designing for Large Screen Smartphones
lukew.com版权所有
作者:Luke Wroblewski
译者:波希米亚
原文地址:http://www.lukew.com/ff/entry.asp?1927

看着智能手机的屏幕一天比一天大,可手却还是那样……那么问题来了,到底要如何设计交互,才能让我们的拇指能够舒服、快速、轻松地操作呢?以下几点供参考:

为拇指设计

在 Steven Hoober 所做的 1,333 份针对智能手机的使用调查中发现,有 49% 的人是单手握持手机,同时,有 75% 的人使用拇指完成操作。当使用更大屏幕(超过4英寸)时,用起来就不那么舒服了,因为人们必须得把拇指伸的更远才能触及屏幕顶端。

large_smartphones1@2x

就拿我自己说吧,我每天用 Amazon’s Music app 时都会遇到这样的问题。因为主菜单按钮在屏幕左上角,离的太远,所以单手操作时真的很难够得到。如果想点到它,我就不得不把手往上挪,握到手机中部,或者干脆用另一只手来点。多希望能不这么麻烦。

large_smartphones2@2x

系统级的解决方案

考虑到目前已有很多 App 采用跟 Amazon Music 类似的导航设计,让这些 App 改版不现实,所以移动操作系统来解决这个问题就明智多了。苹果在其新的 iOS 系统中提供了一个解决方案,并形象地把这种体验称之为“可达性”。

利用这一方案,用户可以通过“快速双拍home键”,使应用顶部降至屏幕中央,从而达到触摸应用顶部操作的目的。(但原本只需要点1下,现在变成了3下)

large_smartphones3@2x

另外它是有超时的。就是说如果你双拍把屏幕拉下来后什么都没做,过一会儿它是会自动复位的(大概8秒,译者注),如果需要就得再双拍一次。这个设置就显得不那么优雅了。

边缘滑动手势

要想用拇指点到大屏幕左上角的图标是很困难的,但如果是沿设备底部边缘滑动就相对容易一些。这种“边缘滑动手势”可以作为一种简单、替代的方式来控制超出拇指范围的操作。

large_smartphones4@2x

跟所有手势操作一样,这种访问菜单的方式往往出乎预料。换句话说,首先你得知道有这种手势的存在,并且记住它。所以它并不能取代顶部菜单按钮,只能作为一个补充。

另外,这个手势只是让单手操作时进入菜单更简单,并不能操作菜单内容。

底部定位

为了确保重要且经常使用的操作,能够舒适地用单手或单个拇指触达,我们可以考虑把它们定位在屏幕的底部。这种解决方案并不仅仅解决“可达性”,它也可以提高各种其他重要指标。比如 Facebook 在最近的测试中发现,他们 iOS App 的底部标签栏的解决方案还提高了参与度,满意度,甚至感知速度。

large_smartphones8@2x

large_smartphones5@2x

同样在 Amazon Music app 里,我们不但可以把菜单图标放到底部,顺便还可以把最常用的功能调整到靠近底部的地方,这样更便于点击菜单和里面的内容。

浮动的操作按钮

虽然很多设计方案能适用多个操作系统,我们还是需要为重要的差异而设计。

以 Android 为例,屏幕下方是为系统导航预留的位置。这就意味着,如果在底部安放操作,很可能因与系统导航位置过近而产生误操作。事实上,在 Android 设计指南上也明确指出“不要使用底部 Tab bars”。

然而,在 Google 最新发布的设计语言“Material Design”中,出现了一个悬浮按钮式的替代解决方案。这种按钮用于重要操作动作,同时它脱离于当前界面。通常情况下,这个按钮不用于导航,但在 Amazon Music app 的案例中,它被定义为导航按钮,可见设计者多么鼓励频繁使用这个操作。

large_smartphones9@2x

让你的网站支持Retina

这个话题跟我刚刚换了支持 Retina 的笔记本有关。其实早有意识到,只是没 Retina 之前,认为这个工作是别人的事,毕竟现在支持“视网膜屏”的网站还是少数,但作为从业者,应该可以预见,未来3-5年,Retina 将会越来越普及,因为人们浏览网页的媒介正在发生巨大的变化,更多移动终端的介入,无疑会推动这一进程的发展。所以,早做准备,从现在开始,让你的网站支持 Retina!

普通网站/网页

方法有很多,但我发现最有效,也最方便的做法,就是利用 Retinajs ,原理也超简单,页面内调用 retina.js,比如你的图片叫 sample.png ,脚本会寻找同目录下是否有 sample@2x.png ,当屏幕是 Retina 时,脚本会自动切换成 @2x 的图片。如何操作:

首先在页面底部</body>之前,调用脚本:

<script src="/scripts/retina.js" type="text/javascript"></script>

如果你有图片,形如:

<img src="/images/my_image.png" alt="" />

当是 Retina 屏时,图片会被脚本自动替换为以下,当然前提是你传了 @2x 的图片:

<img src="/images/my_image@2x.png" />

行了,搞定。如果你想了解更详细的配置方法,可以到 Retinajs 官网,里面有很详细的说明,操作也非常简单。 Retinajs 官网:http://retinajs.com Retinajs Github:https://github.com/imulus/retinajs (这里有更详细的配置说明)


WordPress

这个就简单啦,推荐使用“WP Retina 2x”的WP插件,在“安装插件”中直接搜索“WP Retina 2x” 插件网站:https://wordpress.org/plugins/wp-retina-2x/


更新 2014-11-05

内容图片在CDN上,Retinajs和插件不生效

我也是后来才发现这个问题。在之前的 WordPress提速方案 说过,我的WP使用了七牛云,所以内容图片都会被同步到云上,通过CDN加速。可是这样的话,js就没法取到@2x图片,也就没法实现内容图片的retina效果。我折腾了两天,开始还以为是配置有问题,后来官网上看也有人提到类似问题,说还需要CDN服务商提供支持之类的……算了,我的更新量也不大,麻烦点能承受。 目前方案:“笨”方法 + Image-set “笨”方法指的是,所有内容图片直接上传@2x大小的图片,然后写死宽(width)高(height)。缺点是编辑时麻烦点,需要手动;优点是门槛低,易上手,而且只需要加载一张图,好管理,流量上其实比retinajs还少加载一张1x的。

<img src="/images/IMG_2014.jpg" width="1000" height="667" />

用 Image-set 来定义logo样式,这种不用经常变动的布局元素,用这种方法最好。

.site-logo { 
 background: url(images/logo.png) no-repeat 0 0;
 background-image: -webkit-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -moz-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -ms-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -o-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
}

扁平化设计与色彩趋势

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者:Carrie Cousins
译者:UCD翻译小组波希米亚
原文地址: http://designmodo.com/flat-design-colors/

这篇文章将展示很多很酷的范例,甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话,你打算怎么做?给点提示,色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

wistia

roybarber

squidee

solo

扁平化设计你可以通俗的理解为:使用简单特效,或者无特效来创建的设计方案,它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。

扁平化设计给人的感觉通常都很简洁,即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。

更多

iPhone应用设计趋势

iPhone App Design Trends
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/

在过去的两年里,你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传,使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用,但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着(是的,这些都是好用且有创意的界面)。

本文探究了如何让设计师利用图形元素和屏幕交互,制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意,这些未必是设计和可用性中的最佳观点。

更多

网页设计趋势发展历程之2009下

More Web Design Trends For 2009
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/

译者序:09年快过去一半了,虽然文章早翻译好了,但懒了,一直没上。不过这篇文章有效期不止12个月,它依然可以指导我们在未来的设计中做出更好的页面,值得好好阅读和收藏。

系列文章:网页设计趋势发展历程之2009上

2009年网页设计趋势下

首先来看看过去几个月里我们发现和观察到的主要趋势。在这篇概述中,将带你逐一回顾每个趋势和漂亮的案例,他们将激发你在下个项目中的灵感。

1. 出格布局

trend-01

更多