Login / Registration Form: Ideas And Beautiful Examples

All throughout the modern web, we are seeing a growing amount of places for user input. These include shopping carts, interactive web games, and most certainly website registration forms. It seems that not only should designers be focusing on page design, but form aesthetics are also equally vital role.

Consider how many forms you may have filled out over the course of your Internet history. There are countless examples of these from forums, message boards, blogs, and so many more. In this article we’ll be taking a look at some great tricks to designing your in-page forms.

signup form Login / Registration Form: Ideas and Beautiful Examples

It is wise to consider some of the items here from an objective perspective. Although many login and registration forms work well with one type of site, there is no final judgment call on what’s the “best” solution. Use your design intuition to apply bits and pieces from forms you aspire towards.

Consider Multiple Inputs

To start things off consider a small contact form from Foundation Six Web Design. Yes this isn’t a login form so it may steer a bit off topic. However, their page design is very impressive and it shows you what a little creativity can achieve.

Each of the input fields offer room for you to type personal contact info – name, e-mail, etc. The styles go far beyond ordinary, offering user input in a type of handwritten calligraphy. This type of formatting will keep your users in a state of wonder and achieve a goal of much higher design standards.

multiple input Login / Registration Form: Ideas and Beautiful Examples

You’ll want to implement styles like these similar to all of your login pages. I certainly wouldn’t recommend sticking with the same style of input text and option/select menus. When jogging your brain for creativity, consider how each element should be layed out: plenty of space between layers, large easily-readable text, and even sidebar links to their direct e-mail line.

JQuery Login Boxes

This has been used on countless websites in the past and will surely be seen within new-age designs. Long gone are the days where standard practices would bring users onto a new page for each step of the login process. Normally this would mean a page to input your data and also a new page for processing login information.

Pixel2Life offers some fantastic insight into a new field of data input. From their homepage you can click the login link and bring up a dynamic jQuery-powered login box. This form contains an Ajax call to an external PHP script which checks the credentials of your login info and, once processed, either grants or denies access.

jquery login Login / Registration Form: Ideas and Beautiful Examples

Going another step further the astute may notice a registration link directly below the login box. This offers a much smoother user experience for those looking to sign up for the website but unable to locate the registration link.

If a user doesn’t have an account but would like to make one, this brings them onto the registration page without any buggy page glitches. The login box would still be a viable option for accessing your own account, however allowing the option gives way for greater returns and higher volumes of new registrants.

Simple One-Page Registrations

Another shifting paradigm we see is the lacking in such detail for new account registrations. This isn’t necessarily a bad statistic assuming users are growing impatient towards filling out data. The numbers actually suggest websites with shorter registration pages garner heavier lists of new users on a daily basis.

Sikbox offers a lightweight option for visitors to create their own search box for a website. The only requirement is your own custom domain which to provide search results for. The input fields are large, text is very simple to read and there are absolutely no advertisements to distract users from the task of building their search form!

one page registration Login / Registration Form: Ideas and Beautiful Examples

Now this isn’t the best form to build off when creating your own registration page for a forum or blog archive. These will, by standard definition, at least require some type of e-mail address/username combination along with a password. Some new-age web applications will generate dynamic passwords for users just to make the registration process quicker.

Of course, the trade-off here is lacking control on the user’s end to generate their own password which many people are accustomed to.

Build Off Flashy Effects

One of the greatest signup experiences I’ve ever had was creating my first Tumblr account. The home page of their site offers both a login and signup form placed directly beneath each other with new CSS3 highlight/fade effects.

thumblr Login / Registration Form: Ideas and Beautiful Examples

This systematic approach is similar regarding Pixel2Life’s jQuery login area. However, the difference with Tumblr is the network cannot offer any content to those without a blog (aside from browsing others accounts). The real benefit from tumblr is creating your own blog and following others – thus your main objective on the front page is either to create an account or log in.

There are some bugs with this system. Most notably within IE6/IE7 not supporting these new CSS properties. Also used on the home page is a system for adding label elements into form input values – basically overruling the “default” characters used for email/password boxes.

twitter Login / Registration Form: Ideas and Beautiful Examples

These labels fade away on focus in modern browsers such as Chrome/Firefox. But no such luck with the deprecated browsers which, as you can imagine, is quite annoying trying to re-read your own input!

20+ Examples Of Beautiful Form Design

Below is a quick roundup gallery of some fantastic login form designs. These have been picked from around the web and include numerous forms of web applications. If you have suggestions for other sites feel free to share them in the comments section below!

Snoggle News

Snoggle News Login / Registration Form: Ideas and Beautiful Examples

Robo.to

roboto Login / Registration Form: Ideas and Beautiful Examples

Virb

virb Login / Registration Form: Ideas and Beautiful Examples

Grooveshark

grooveshark Login / Registration Form: Ideas and Beautiful Examples

Storenvy

storenvy Login / Registration Form: Ideas and Beautiful Examples

Dropbox

dropbox Login / Registration Form: Ideas and Beautiful Examples

Green Globe Ideas

green globe Login / Registration Form: Ideas and Beautiful Examples

Freshbooks

freshbook Login / Registration Form: Ideas and Beautiful Examples

Themeforest

themeforest Login / Registration Form: Ideas and Beautiful Examples

MailChimp

mailchimp Login / Registration Form: Ideas and Beautiful Examples

BaseCamp

basecamp Login / Registration Form: Ideas and Beautiful Examples

TestFlight

testflight Login / Registration Form: Ideas and Beautiful Examples

AwesomeJS

awesomejs Login / Registration Form: Ideas and Beautiful Examples

Unlocking

unlocking Login / Registration Form: Ideas and Beautiful Examples

PopScreen

popscreen Login / Registration Form: Ideas and Beautiful Examples

Gowalla

gowalla Login / Registration Form: Ideas and Beautiful Examples

Kontain

kontain Login / Registration Form: Ideas and Beautiful Examples

MobileMe

mobileme Login / Registration Form: Ideas and Beautiful Examples

Laterthis

laterthis Login / Registration Form: Ideas and Beautiful Examples

Launchlist

launchlist Login / Registration Form: Ideas and Beautiful Examples

Theidealist

theidealists Login / Registration Form: Ideas and Beautiful Examples

Advertisements

UI做到极致:苹果的程序图标中隐藏的秘密

如果你是苹果用户,那么 Mac 和 iPhone 中的图标可谓早已司空见惯,但是你知道这些图标中隐藏的秘密么?这些看过之后就被忽略的东西,却在细节之中体现了科技产品中蕴含的人性和趣味。

iPhone、iPod Touch、iPad 图标

Maps

The map on the iPhone Maps icon? It’s Apple’s home address. Number 1 Infinite Loop, Cupertino. The address itself is an in-joke amongst programmers, describing a never-ending loop of code, and also describes the circular road Apple’s campus is built upon. You can see that circular road, and Interstate 280 which flies right by it, in all their glory within the Maps icon, along with a pin to indicate Apple’s front door.

红色的大头针标注的是苹果在加州 Cupertino 的总部:Number 1 Infinite Loop。这个地址是苹果编程员的一个内部笑话,含义是永无休止的循环代码。

iPod Artists

Dive in to the iPhone or iPod touch’s iPod function and cast your eyes toward the bottom of the screen. There you’ll see an Artists option, illustrated as all good bands are, by a man screaming his lungs out at a microphone. But look closer. Does the silhouette look familiar? It should do to U2 fans, since it’s lead singer, and some-time Apple collaborator, Bono.

打开 iPod 的音乐,菜单中 Artists 的标签是某位艺术家的侧身像,谁呢?Bono,U2 的主唱。

iBook Browser

Fire up your iPhone, iPod or iPad for that matter and dive into iBooks. Take a look inside the iBooks Store and glance down at the Browse icon. Whose glasses are those? They look awfully like those of Apple founder, CEO and interface-tweaker-in-chief, Steve Jobs. It seems the Podfather is also a bit of a bookworm.

打开 iBooks Store,看 Browse 图标,是不是一副眼镜?仔细看看,像乔布斯戴的那副,还是哈利波特戴的那副呢?

Mac 图标

TextEdit

The Apple Textedit icon is itself a work of literary genius. Open it in full and you’ll see a speech written across the surface of its virtual notepad. It’s an an extract of the monologue from Apple’s Crazy Ones advert, and is signed by John Appleseed, a name Apple often uses as a placeholder for names in its address books.

如果你用过 iPhone ,在设置邮件的时候,会发现输入姓名的地方显示的范例名字是 John Appleseed。这个名字历史很久,是苹果图标中最早的彩蛋之一。Mac OS 中的 Text Edit 图标便是署名 John Appleseed 的一篇文稿。文稿内容是苹果 1997 到 2002 年间著名的"Think Different" 广告大战中演讲词的一部分。苹果经常用 AppleSeed 作为通讯录的占位符。

Dictionary/Thesaurus

There’s some more Apple wordplay at work on the cover of the dictionary featured in the Apple Dictionary icon. The words “Lorem Ipsum Dolor Sit Amet Etiam” are clearly seen when the icon is viewed at full size. That’s latin for “Hello world! Etcetera”… well, it’s all up for debate. Have a look at the comments section below and join the debate!

此程序的图标是本厚厚的字典。封面下部有一行小字:Lorem Ipsum Dolor Sit Amet Etiam 。这是一段毫无意义的拉丁文,设计师和编辑们将此作为测试排版的占位文字已经多年。

Disk Utility

将图标扩展为 512×512 像素之后,会发现上面写着一句话 "小心轻放硬盘,以免损坏电路板,确保正确接地"。

Mail

It’s so small, and semi-transparent, it’s almost invisible. But the Mac Mail icon which sits in the dock of every Mac holds a postmark labeling its origin as Cupertino, California. Of course, that’s the home of Apple. Logical, yes. Obvious? Not at all. There’s even a friendly little “Hello from Cupertino” message baked into the icon. Neat touch, no?

邮件的图标是一个邮票,而邮戳的文字是 "Hello from Cupertino,CA"。Cupertino,CA 正是苹果的总部所在地。

iCal

If you put the icon for Apple’s iCal calendar app into the OS X dock, you’ll see it shows today’s date. However, look it up in the Applications folder and you’ll see its default setting: July 17. That’s the day Apple CEO Steve Jobs introduced it in front of crowds at the Macworld Expo 2002.

iCal 的图标显示的日期是 7 月 17 日。这是因为苹果发布 iCal 是在 2002 年 7 月 17 日的 MacWorld Expo 大会。

计算器

12374218.75 这个数字,多年以来人们一直在猜测它的含义,目前仍没有准确的解释。

iTunes 9

Apple replaced the iTunes icon with a solid blue bauble in its latest incarnation, but previous iterations featured a musical note resting on a shining silver CD. Open up the full size icon file and you’d see that image of a CD was precise down to the finest detail: laser etched on its inside edge were the words “iTunes 7” and “Apple 2006”.

据说这个图标上有隐藏句子,是白色文字,写在浅灰色光盘之上,内容是 "Apple 2006 iTunes 7″。

Aperture

If you’ve splashed out on Apple’s imaging and photography application Aperture, you’ll be able to gawp at its icon, featuring a lens which is “Designed by Apple in California” and reading “50mm 1:1.4” Those Apple designers are nothing if not fastidious in their attention to detail, and by crikey, that’s a lovely looking lens they’ve created.

镜头上文字是 "Designed by Apple in California" 和 "50mm 1:1.4",不是 L 头啊,1:1.2L 才够给力啊。

Keynote 2008

Apple’s presentation application forms part of iWork, but while that might seem dry and uninspiring check out the icon for it. There’s a lectern, and a Q4 2008 report… but on that report are written the lyrics from the musical Spring Awakening. Who says business can’t also have a hint of showbiz glitz? The significance of Spring Awakening isn’t known.

一个台灯, 演讲台上放着一份 Q4 2008 报告。报告上的文字是音乐剧 Spring Awaking 中的歌词。

Console 10.5.6

An error message Apple meant to appear? That’s what’s on the icon for Mac OS X’s console. The app is designed to show what the Mac’s been up to behind the scenes. That includes errors, but that is the Error AY7:36 shown on the icon? So far our research has come to nothing. Do you know?

"WARNING: AY 7:36"。 谁知道是什么意思么?

Font Book

Apple’s computers have long been a favourite of writers, designers and editors of every persuasion. The Font Book app is, therefore, an often used part of OS X. Its icon, however, holds a neat in-joke. The letters used to make it are A, F and K. In internet-speak, AFK stands for Away From Keyboard.

图标中的三个字母是 A,F,K。在网络缩略词中,意思是 Away From Keyboard(远离键盘)。

Stickies

The Stickies app isn’t particularly obvious, but its icon easter egg certainly is. The phone number 555-7361 and the name Lou can clearly be seen scribbled on its logo. Those who watch a lot of films or TV might recognise that 555 area code, it’s reserved for fictional mentions, so don’t go dialing it now, will you?

便签的图标上除了有鸡蛋和牛奶之外,还记录着 Lou 的电话号码 555-7361。在美剧和电影中,555 是经常出现的一个区号,一个专门为虚拟世界保留的区号。当然,也有可能这号码是来自安徽马鞍山的娄知县的,这事得问燕小六。

Interface Builder

What sort of pencils do Apple designers use? Open up the icon for the Apple Interface Builder, a tool used by programmers to create the screens you see on iPhone and iPad apps, and take a squiz. There’s a drawing of a pencil, a set square and a paintbrush. The pencil is helpfully labelled as a “no 2 graphite pencil with eraser”. Heading to the art supplies shop yet?

iPhone 和 iPad 简洁美观的界面我们都很熟悉了,但是你知道苹果的设计师们使用的是什么样的铅笔和工具来绘制这些界面吗?Interface Builder 的图标上就告诉了我们答案:画板上及上面画的带橡皮的 2 号铅笔、画笔、直尺。

Photo Booth

We’re hearing that the woman pictured in the photos within Photo Booth’s icon are the developer of the app. Although we can’t confirm that, even after a lot of fruitless Googling. Can you identify her? Either way, finding actual photos inside the Photo Booth icon was a nice surprise.

图标中的美女据说就是 Photo Booth 的开发人员,不过 Electricpig 的编辑经过一番搜索之后,也无法确认是真是假。也许可以到 Quora 上去提个问题,说不定美女会亲自来解答这个问题的。

Firmware Update Utility

Check out the icons for Apple’s firmware update utilities and you’ll see there’s a silicon chip indicated on their icons. Open the icon at full size and you can see the chip’s model number. So what, you might say? That chip pops up all over the place, from firmware updates to the Mac System Profiler. The significance of the numbers isn’t clear. Can you crack it? The code is: 810-54-2136-1 RM-NCE-1 6319-415-1239.

这个图标中是一个芯片,上面还写着型号。这个芯片不光出现在固件升级图标中,还出现在 Mac System Profiler 中。芯片的型号是 810-54-2136-1 RM-NCE-1 6319-415-1239,有人知道是什么意思吗?

Windows Computer

Access a networked Windows PC from a Mac and you’ll see a tiny beige monitor next to it. It’s small, nondescript and seems innocent. But dig out the full-size version of that icon and you’ll see the monitor is displaying a “blue screen of death” error message, a sly poke at Windows perceived unreliability by Apple designers.

使用 Mac 电脑访问网络上的 Windows 电脑是就会出现这个小 CRT 显示器的图标。这个图我们传统的 Windows 用户太熟悉了,看来苹果公司的设计师们也很了解 Windows 电脑的精髓:蓝屏。我说你们也太坏啦~

Apple Java

Java isn’t owned by Apple, but there’s an app included with OS X to run Java code. It was made by Apple designers, so obviously includes some creative flourish. On first look it’s a simple coffee cup resting on a napkin. Nothing unusual there, just a play on words around the Java name. But fire up the full size icon, and you’ll see the napkin has a doodling on it. That doodling is genuine Java code. Now that’s attention to detail.

这是苹果公司在系统中内置的运行 Java 代码的程序。这图标所表现的大概就是一名程序员的生活状态,喝杯咖啡还要在纸巾上写上两句 Java 的代码。这得多大的瘾啊~

如果你还知道更多苹果图标背后的故事,或者其他类似这样高科技背后的趣味小故事,不妨在新春假期之际与我们一起分享。

触屏网页设计

历时数月,连番经历了多个基于触屏手机原生浏览器的网页产品设计与开发。对触屏手机用户体验设计有了进一步的认识,也颇想分享些心得。

上篇包括以下一些内容:

>>精神与基础

何谓高端——高端设计精神

平台间平衡

不同分辨率及比例间移植

浏览器框架

>>设计“泛”过程

移动场景下的用户需求

少即是多的设计原则

界面气质

———————————————————————————————————————————

>>精神与基础

何谓高端(high-end)——高端设计精神

最初,我问了自己一个问题:究竟什么是我们津津乐道的“高端”体验?

我对它的参悟从细细打量iPhone那一刻,略有了眉目。虽然它是工业化商品的出色代表,但我更希望将它视为“艺术品”。它的精巧优雅透射于每个曲面与用材,每处工艺都丝丝入扣。内部软件设计也传承了这种血统与气质,并升华为一种纯粹、本能、情感化和典藏大气。凡拥有者都奉为“我的”艺术品(调动起归属情感);凡未拥有者,它则是人人希冀的“礼物”。设计师像创造艺术品一样创造客户端或网页,才能诞生高端体验。这个过程没有折中和妥协,唯有用尽心力。

以上是撇开高端市场和用户需求,对于高端体验的另一维度的思考。当然,高端版设计的补集并非所谓“低端”版。面对低性能手持终端,要将约束诸多的版本同样冠以“高端”的设计精神,实属上流。

平台间平衡

触屏版设计,目前主要面向iPhone和Android平台(Symbian V5平台体验没有摆脱其经典键盘机的经验束缚,所以暂不归为设计对象)。适配不同平台的网页应用设计,需要平衡软硬件差异带来的交互特性和系统习惯的差别。比如:iPhone唯一的home硬键(导航必须通过软件界面实现)、无菜单风格、单页面单一任务的交互思想、弹出对话框的按钮倒置,等等。而Android平台则多数保留返回、菜单、主页(home)、搜索等四个系统硬键;依赖上下文菜单和弹出式菜单处理复杂任务;建立用户长按的操作习惯。

触屏网页如需实现一些复杂的设计,Android-Chrome对比iPhone-Safari的表现稍显逊色。比如:页面局部横向滑动一组内容;在限定高度内滚动列表等等。Android版本繁复,为保证设计一致性,往往会向下适配。另外,考虑成本,会尽可能平衡不同平台间差异,精简版本。若要追求体验极致化,可通过UA(User Agent)标识匹配不同平台。

不同分辨率及比例间移植

分辨率问题是手持终端永恒的话题。设计师无法回避不同机型屏幕分辨率的差异和横竖比例(Aspect Ratio)展示兼容性。

iPhone 3GS和iPad屏幕分辨率密度相近(163 ppi 与 132 ppi),利用界面背景平铺能基本解决适配问题。

如直接将iPhone 3GS的图片资源复用到iPhone 4的虹膜屏(326 ppi)上,界面元素的物理面积会缩小为原来的1/4,画面质量和操作易用性均有损失。

要实现界面物理尺寸的无缝缩放(Resolution Independence),目前常用预绘制(pre-rendered)方式。客户端产品需根据机型独立定制界面;网页产品需分化版本,通过识别用户代理(User Agent)去指向不同URL。为了保证较高灵活性和低成本的重绘,在视觉设计时,建议用Photoshop的矢量路径工具(开启对齐像素模式),并应用图层样式绘制(快速复制图层样式)。注意像素虚化的细节。本文不作赘述,请查看《Designing for iPhone 4 Retina Display: Techniques and Workflow》了解。

为了提高页面适配能力,公共界面元素宜少用图片,多用CSS3支持的规则设计样式。

在此,推荐另一篇关于屏幕大小适配的专业文章《客户端交互设计适配之——屏幕大小》。

浏览器框架

“网页版”遇到了“客户端”版心生感叹:“既生瑜何生亮啊?”客户端产品设计有诸多优势,例如:

  • 自定义软键盘
  • 自绘控件
  • 丰富的隐喻图形界面
  • 浮出式面板的绝对定位(始终置底的工具栏在网页端不好实现)
  • 丰富的手势操作
  • 支持较复杂的动画反馈
  • 较大容量缓存
  • 后台实时通信
  • 调用手机硬件功能如:声音或震动的提示;通过GPS或基站获取地理位置信息;通过摄像头、麦克风传输多媒体文件。

上述均是网页设计的短板,设计师常感捉襟见肘。然而网页版对全产品战略有着深远的意义。它的优势在于:更敏捷地弥补平台性空缺,并有效维持跨平台产品的体验一致性;更及时地响应日常运营和产品功能推广;更迅速地响应用户需求;节省手机流量;更无缝地实现不同产品间的业务拉动(客户端产品是相对独立的,不容易做整合)。

九尺之台起于垒土。做好触屏手机网页应用设计,需要对“浏览器”框架有大致了解。iPhone和Android浏览器都是Webkit内核。以iPhone-Safari浏览器为例:

  • 不支持Flash和Java(包括Java Applet)
  • 不支持插件
  • 不支持基于浏览器的文件下载
  • 不支持插入本地文件,即不支持
  • 节省缓存。iPhone仅支持小于25kb的缓存
  • 支持cookie
  • 界面的动态交互则可利用JavaScript来实现
  • 支持播放html5视频

此外,Webkit内核手机浏览器的一些特性会影响交互,例如:支持表格、CSS3高级样式表等等。其中,最重要的特性是Ajax动态异步请求与局部刷新,后面会详细的说明这个特性的意义。

———————————————————————————————————————————

>> 设计“泛”过程

移动场景下的用户需求

移动场景下,用户主流需求是利用碎片时间阅读、搜索、下载、游戏、沟通。在设计前期需要思考:

  • 用户是在什么状态下如何进行操作的(了解用户核心需求及使用方式)?
  • 如何展示信息,才更容易引起用户兴趣(筛选适于手机端呈现的信息及信息布局)?
  • 为什么选择手机浏览器访问网页(分析网页应用与客户端应用的定位差异)?

手机终端用户使用目的、操作行为以及潜在困难远比用户端坐在桌旁要复杂多了。援引wpzune上发表的一份由Harris研究的手机使用习惯的图文报告。可以了解到有趣的移动互联网用户使用行为。

iPhone 的应用有三大分类:高效型应用、实用工具型应用和沉浸式应用(详见iPhone HIG)。不同的产品定位会产生差异化设计策略,从而影响用户的交互方式。设计启动前需与产品经理明确界定产品类型和大致的设计方向。

少即是多的设计原则

易用的手机应用须遵循少即是多的设计原则,简便的交互,清晰的提示或反馈,少而精当的请求,从简单中展现优雅,准确地满足用户。

  • 保持用户对页面专注力,让人一目了然如何使用你的内容

清晰定义适合手机使用场景的应用定义说明(Application Definition Statement),筛检功能,降维信息,满足用户专注地获取信息、完成当前任务。

涉及到具体页面设计,分享一个心得:可尝试用简洁语句归纳出我们设计的每个页面的核心功能以及对用户的意义。如果难以准确简单地归纳出来,将意味着增加用户理解成本和记忆负担。

  • 避免噪音、无用的留白、花里胡哨的背景

避免用户被内容以外的视觉信息干扰。

  • 尽可能减少用户的输入

记忆用户信息;有策略地向用户提请求。

  • 简洁表达必要信息

简洁明确地提示引导性操作(如新手任务、操作指引、功能介绍)和中断性操作(如提示、询问)。

  • 避免不必要的交互

界面气质

触屏版网页设计应充分表现触屏界面的气质。可触控界面要求关注链接及控件尺寸。以iPhone 3GS为例,适于手指点触的控件尺寸是44×44pix;随手势的轻重变化,iPhone控件响应范围在22×22pix ~ 55×55pix之间。

触屏界面显著的气质表现为:

  • 足够响应范围的控件和文字链接
  • 圆角
  • 纸张化的扁平风格与相对立体的按钮
  • 页面中常见图文混排

>>提升体验的细节

让消息更随手

翻页大讨论

重要数字了然于胸

关于软键盘

大话横竖屏切换

让界面更“可触模”

对话框设计

链接下划线的讨论

节省之道

不把网页设计成客户端

————————————————————————————————

让消息更随手,操作门槛更低

费茨法则(Fitts’ Law,1954)是一则人机交互法则。它阐述了:快速移动到目标的时间是离目标距离与目标大小的函数。目标距离愈远,目标面积愈小,则移动到目标的耗时愈久。费茨法则适用于手或手指进行实体触摸或显示器上用指针虚拟指向。

微软 Office 2007(Word2007、Power Point2007、Excel2007)有一处改良设计很好地应用了费茨法则。选中文本的右上角会浮出相应最常用的富文本编辑工具面板,且工具面板透明度随鼠标离目标的距离的增大而增大。

在触屏版网页设计中,利用Ajax动态异步请求与局部刷新的特性,可实现费茨法则。依据情景分析,随“手”响应用户最迫切的需求。例如:手机QQ空间触屏版好友动态列表的设计。展示每条feed的好友评论并留出“评论”和“回复”的操作入口,以引导用户参与。便利的操作、明确的反馈会刺激好友间产生互动。对比Wap形态产品的交互,无须每个步骤逐页跳转,体验如行云流水般顺畅。

翻页大讨论

>>常用触屏翻页控件类型

>>翻页控件选择

>>设计案例推导——正文翻页

翻页的本质是“控制”。有控制地展示一页的内容,避免单次对用户推送过多信息;控制页面流量,提升页面响应速度。事实上,用户在第一页里找到他期望的信息后,会非常“懒”于翻页。Soso的搜索结果,用户翻页行为在单次搜索的占比就印证了这个行为模式。一来,用户无法对未见信息产生兴趣的,他的期待程度也会锐减。二来,跳转页面的时间消耗及流量耗费都是用户非常敏感的。我们的设计策略有:

  • 触屏网页一页展示更多的信息量(触摸方式决定连续滚屏代价很小)
  • 根据信息类型选择翻页控件
  • 扩大控件响应区域,使操作尽可能轻巧

触屏网页常用翻页控件,按内容区分交互方式:

客户端可通过在列表边缘超限手势滑动完成列表加载命令。网页是无法实现的。

翻页控件的选取从内容量级、内容性质与组织方式等因素综合考虑。

注:蓝色区域数字对应上图翻页控件的编号

建议:翻页控件可选形式较多,在一个产品中采用相对集中的翻页控件类型,一般不要超过3种。从而,减少开发的逻辑复杂度,给用户更一致的操作体验。

设计案例推导——正文翻页

在设计资讯正文阅读的翻页时,曾设想将文本包含其翻页控件正好限定在一屏以内(320pixels×480pixels)。正文阅读的体验甚至可以像iBook翻书体验一样。创意出发点是:限制页面纵向长度,保证正文以下后续模块的曝光度。另外,若一页文本长度不限定在屏幕区域以内,翻页跳转时页面需要快速向上滚至正文区域顶部,这个跳跃容易造成用户的视觉迷失。

然而这个令人欣喜不已的设想,却带来了很多实现上的困难。首先限高的措施,必须要统计全文全角半角字符个数,这会相对消耗性能;另外当正文内配有图片时,图片所占篇幅是无法精确控制的;再者横竖屏切换时,单屏容量是变化的,势必需要重新计算和排版。所以权衡之下,决定将正文的翻页设计为目前常见的纵向延伸方式,即编号7对应的翻页方式。

重要数字了然于胸

416 — iPhone-Safari竖屏的首屏高度

200 — iPhone-Safari竖屏软键盘呼出后剩余可显示高度

268 — iPhone-Safari横屏的首屏高度

94 — iPhone-Safari横屏软键盘呼出后剩余可显示高度

补充说明,iPhone-Safari地址栏高60像素,在页面加载完成后可由程序控制隐藏。

Android平台机型众多,屏幕分辨率参差不齐,导致不同机型系统控件尺寸的差异,先按下不表。此外,Android-Chrome浏览器在加载完成后,自动转至全屏浏览模式,页面可视区域没有额外遮挡。仅需避免网页内控件被Android-Chrome浏览器浮出工具条遮挡的问题。


关于软键盘

客户端可根据输入框内容控制弹出软键盘类型,如数字键盘或全键盘。网页则无法判断。

在软键盘呼出时,当前激活输入框会自动上移,不受软键盘遮挡。从iPhone-Safari浏览器呼出的软键盘,带有一条高为44像素的半透明表单辅助栏(Form Assistance)。这条表单辅助栏是不能由程序控制隐藏的。

通过限定输入区高度或者支持页面滑动(系统弹框不能滑动)以确保输入内容可被完全展示。

长文本输入——手持终端文本输入因其效率和操作难度而成为UGC的瓶颈。改善写操作,就成了提升体验的突破口。触屏版网页比Wap网页(单行输入框)有更大的控件定制自由度和展示空间。适当扩大长文本的可编辑区域,方便用户审视全局和定位到局部进行编辑。输入框高度应设定为软键盘弹出后完整显示可编辑区域为宜。

Android平台横屏状态的软键盘表现为独占式输入状态,即输入框以及键盘按钮会占满全屏。不存在页面遮挡问题。

在此想强调:尺寸,在大家的印象中,似乎只有视觉设计师才需要细抠像素。其实交互设计师同样需要很强的意识和设计积累,尤其在无线产品的设计中。


大话横竖屏切换

>>客户端的横竖屏切换方式

>>粗放的实现方式

>>网页横竖屏设计要点

>>设计案例分享

基于客户端的产品设计,可由产品形态决定屏幕方向。

A. 锁定横屏模式(如游戏、视频)或竖屏模式(长页面浏览类产品);

B. 差异化横竖屏的展示内容(如iPhone的iPod应用横屏时展示Cover Flow模式,竖屏时则展示List或单曲播放模式);

开放权限让用户自主设定横竖屏方向感应。

C. 开放权限让用户自主设定横竖屏方向感应。

但网页只能适应浏览器本身横竖屏切换。所以在设计页面时需兼顾横竖屏的展示问题。如注重首屏效应的页面,要注意避免横屏后的信息损失。大图预览需预设一个横竖屏通用的默认图片尺寸。

在产品调研过程中,见过两种网页竖屏切至横屏的比较粗放的实现方式。一种是等比放大页面内容(包括文字和图片),以填充横屏页面;一种是在竖屏页面制作就预留横屏的页面宽度,切换时自动折行。这两类前端实现方式都有损体验。

兼顾横竖屏页面展示的设计要点有:

  • 快速地响应
  • 自然地过渡
  • 避免页面内容差异过大而导致重刷页面
  • 明确暗示交互的方向
  • 页面位置没有大幅跳跃,等

交互设计时,会优先以产品的最佳呈现模式来设计。比如手机腾讯网、手机QQ空间的长页面适合容纳短标题信息,垂直方向有较高的滚屏效率,所以优先设计竖屏模式(用户一般会自主选择最佳状态)。页面的横屏,则由前端实现自适应适配。同时,前台开发控制页面视觉中心始终在屏幕内,确保用户可控。一些特殊页面需要额外设计横竖屏两种状态。

相册展示——以宫格方式展示,除计算缩略图尺寸均分画面外,还要检验边际尺寸是否能留出半行缩略图,以暗示用户滚屏的方向。

图片尺寸——兼顾横屏和竖屏的可视区域,定义大图预览的极限尺寸(避免转屏时,重新拉取尺寸不同的新图片)。最大化可视区域,除去额外视觉干扰,我们设计了一个交互细节:用户点击缩略图进入大图预览页面,在完成页面刷新后,由前台控制自动隐藏页面头部(占篇幅的logo栏和导航栏),以提升浏览图片的体验。

让界面更“可触模”

多点触摸的体验颠覆传统按键操作的最大魅力在于直接操控。网页设计时,同样要留意发挥这种体验的魅力。我们来分享登录验证码评分两个例子。

登录验证码——登录页面的基本组件包括帐号和密码的输入框。QQ产品出于安全因素和防刷策略的考虑,在非常规情况下会出现验证码输入环节。PC端网页的验证码通常必须通过点击链接来刷新。

我们先在这里暂停一下,一起思考下触屏版的验证码如何设计得更好?

为了力求直接的操作和直白的语义化设计,和视觉设计师一起反复推敲,最终将验证码直接设计成按钮,点击验证码本身就触发刷新。

评分——五星评分制。设计大大的五颗星,暗示用户直接触摸。评分的结果能清晰地反馈给用户,让评分操作和评价体系建立清晰关系。

对话框设计

基于iPhone-Safari和Android-Chrome浏览器,系统对话框只配置了三种模式。

除以上三种标准对话框以外的其他设计要求,需自绘实现。比如:

  • 对话框里需要双输入框
  • 触发对话框内容实时刷新
  • 自定义按钮名称
  • 自动消失的提示(Toast)
  • 对话框宽度自适配横竖屏幕宽度,等

值得注意的是:出于提高性能的考虑,自绘对话框对视觉设计会有一定的限制。我们应谨慎使用不规则形,减少图片使用。

整个产品中,既有部分可直接调用系统标准对话框,又有部分必须自绘的对话框。通常,我们会遵照统一原则,让整个产品通用一套对话框视觉设计。


链接下划线的讨论

>>设计原则

>>设计案例分享——链接可触

>>设计案例分享——搜索结果页

触屏版界面会避免用下划线来表示链接,因为这会看上去比较拥挤(见iPhone HIG for Web Applications)。但是触屏界面没有鼠标悬停状态,因此要在界面中清楚区别链接和非链接。同时链接与非链接用色要保持高度统一,避免用户猜测和思考。

文本化信息中夹杂着链接的设计,要预留充足的可触范围(29pix高度以上)。如iPhone版问问“我的主页”中的链接设计。

对SoSo搜索结果页的设计,我曾思考:现在搜索结果基本是纯文本的。一个搜索结果模块由标题、内容摘要和来源、时间、页面格式等信息组成。用户浏览结果页,其实对视觉信息做了两步处理:快速逐条分离模块,然后在极短的时间内通过模块内的标题和摘要筛选感兴趣的结果。这是为什么大篇幅纯文本的搜索结果页面,会采用反差很大的几种文字颜色,以提高阅读效率。这种配色一定不是出于美学上的考虑。此时,标题链接加下划线,可以提高模块分离的效率。虽然下划线链接,与HIG对链接的设计要求相左,但这种情景下会使页面更加易读。

节省之道

从Wap网页跨度到触屏版网页设计,仿佛找到了一夜暴富的感觉。但手持终端的设计,节省永远是睿智的表现。对流量保持审慎,节制地使用图片、样式。下面我们来体会下节省之道。

>>节省流量

手机端网页不能直接展示PC端网页的图片。实现图片压制,可由前端CSS压缩分辨率或由后台服务器的重新配置一套小尺寸图片。前端实现的方式,会让用户看到适配手机屏幕的小图,但实际耗费的仍是原图流量。从用户的利益出发,我们在图片压制的实现方式上推荐后台配置,由服务器承担这个压力。

>>敏捷响应

响应时间是影响用户体验非常重要的因素。我们从手机浏览器用户的反馈中可以了解到用户对零点几秒的浏览提速都非常敏感,并且受用不已。浏览器自身的性能是一个方面。另一方面,在网页设计与实现时,要不断优化页面性能,尽力在每一处细节处理上节省时间。前端工程师做过实验分析:页面大小在一定量级内,响应时间并不与单次请求的页面流量成正比。一次1KB多的下载请求和一次100多kb的下载请求,耗费的响应时间几乎一样。时间基本耗费在发送请求和等待服务器响应上。由前台协调资源分配,可以提升页面效率。另外,从用户体验上分析,用户期望页面内容能跟随手势同步展示。因此类似于滑动方式翻页的设计,最好预读未展示的内容以提升响应速度。

最后来看一组图:一张会“呼吸”的用户界面,对比一张长时间没动静的白屏,体验孰优孰劣不言而喻。两张页面完成加载的耗时一样,但用户心理上对等待时间的感知差异很大。

不把网页设计成客户端

这个话题应该有两派对立声音。有一些产品经理或设计师会不知不觉地把针对手机浏览器的网页设计得客户端味十足。我认同手机网页也会朝着类似客户端的体验去发展。但是基于目前手机浏览器的诸多限制,我更倾向于把网页和客户端形态区分开。正如前文所述,网页表现能力、存储能力和调用硬件的能力有局限,很多地方无法与客户端媲美。其实较客户端而言,网页可以适当承载内容复杂度稍高的页面信息。网页宜遵循扁平化架构,流淌式的信息浏览方式。

Experiences are Emotional:体验是情感的


As Experience Design broadens to take on the challenge of delivering experiences that are clearly related and consistent regardless of context or channel – the aim of customer experience initiatives in many large organizations – we run the risk of failing in our attempts if we persist in adopting terminology relevant only to a single context, and focused only on a small portion of the experience itself.

当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计。

As Experience Designers we are running the risk of failing in our attempts to enable experiences that are clearly related and consistent regardless of context or channel. Our persistent use of terminology relevant only to a single context, and focused only on a small portion of the experience itself, hampers the efforts of customer experience initiatives in many large organizations.

当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计——如同在许多大型组织内部客户体验部门的目标——此时,如果我们依然坚持采用只和单一情境相关的术语语境来讨论该体验,并且只是集中在这个体验本身的一小部分的话,很有可能让我们所做的各种尝试(希望体验稳定且一致)最终失败,这也会限制许多大型机构组织内客户体验部门作出的努力后所得到的效果。

To design experiences that are consistent across different contexts and environments we need to focus on the qualities of the experience that do not change, rather than the means through which we enable that experience.

设计一种在各种不同情境和环境下一致的体验,我们需要关注于这个体验中的那些保持不变的性质,而不是我们为了得到这种体验所采用的方法。

体验是一种混合的产物,这种混合包含了我们所采取的行为,我们通过不同的感官所得到的感受,以及我们对前两者所作出的反馈,于情感层面。

Experiences are a combination of the actions we take; what we perceive through our various senses; and our emotional response to both.

Form constrains形式的限制

Actions are constrained by the physical or technological environment within which the experience takes place. A person’s behaviour, and context, are inexorably tied to this environment. The form of an object or space both implies and constrains its use. The availability and type of controls; the physical or virtual dimensions; the presence or absence of pathways; all contribute to, and constrain, the range of available actions.

行为会被体验发生地点的物理环境或科技环境所限制,一个物体或一个空间的形式都能够暗示和限制它本身的使用范围。控制的种类和它的有效性,维度是物理抑或虚拟,路径的存在与否,这所有的东西既提供了也限制了允许采取有效行为的范围。

Similarly, the range of senses we can stimulate is also limited by the environment. Digital environments lack smell and touch, producing a greater reliance on thought, sight and sound. Physical environments provide different perceptual constraints, allowing for the use of aromas, for example, to enhance the experience. At the same time, the presence of these additional stimulants also acts to dull the influence of all sensual influences.

类似地,环境也限制了我们能够被激起的感受的范围。数字环境下缺乏嗅觉和触觉的存在,却对心智思考、视觉和听觉有更大的依赖。物理环境虽会有不同的感知限制,但亦可通过,比方说允许利用氛围(Aroma正常翻译作灵氛),来提升某种体验。同时,这些附加的感知刺激物的存在也钝化了(不能)被全感观支配的影响。

Our focus, then, falls to the emotional response participants have when undertaking these activities, and perceiving through their senses. It is the emotional response that provides a consistent design intent across environments, touchpoints, interactions.

因此,我们的关注点放在了当参与者进行这些活动、并通过他们的感官去感受的时候,这些参与者所产生的情感层面的反应。恰是这些情感化的反应提供了在不同环境、不同接触点、和不同互动方式下的一致的体验设计目的。

Articulate design intent清楚表达我们的设计目的

We need to articulate our design intent using the language of emotion so that the same resultant experience can be delivered across the various environments within which customers might interact; working within the constraints of action and perception imposed by each environment.

我们需要使用情感的语言来清楚表达我们的设计目的,使同样结果的体验能够被不同的互动环境所传递出来;并且,我们还要学会在各个不同环境里,在行为和感知的限制条件下传递出同样的体验信息。

The transition from usability and HCI-type practices to one of user experience has been represented by a shift in focus from the functional characteristics of a system or interface, to a focus on the slightly more abstract qualities of those functions when executed in a certain way.

从基于可用性或HCI框架类型下的实践,向用户体验的转化的表现,可从一个系统的界面对其功能特性所反应出的关注,向按照某种特定方式执行这些功能时候所表现的更为抽象的品质的关注,展现出来。

We need to articulate our design intent using the language of emotion

我们需要通过使用情感层面的语言,清楚表达我们的设计目的

This can be seen in a lesser reliance on measures such as task-completion and time-to-complete, and the increased use of descriptors like ‘ease of use’ of a system, or whether a system is ‘intuitive’ to use. These are qualities of the functional implementation. And whilst these contribute to the emotional response a user may have when interacting with the system, they can be seen merely as descriptors of the qualities of the actions undertaken within one very specific type of environment; and then only at the plane of interaction between user and system. Descriptions of perceptual attributes within this UX tradition are similarly narrow. Talk of “speed” and “performance” provide some level of broader application – to, say, the efficiency of a service – but focus solely on one type of perception – namely the passage of time.

这一点可以从许多时候我们减少采用如“完成任务”或者“完成所需的时间”等衡量方法,而增加对系统的“易用性”的描述或者系统是否能够让用户凭借“直觉”使用的描述。这些正是功能执行时所表现的更为抽象的品质所在。同时,即时这些品质能够被归结于用户与系统交互时发生的情感化的回馈,它们也只不过可以被看作是一种用于描述(用户)在一个非常特定的环境下所进行的活动的品质的方式,况且这只是发生在用户与系统所构成的交互平面上。归结于此,用户体验传统下的感知描述也是类此般的狭窄。谈论“速度”和“表现”提供了一些更广的应用-如对于服务的有效性-但这些都只是全然集中在一种感知方式-即,流逝的时间(这个维度上)。

Emotive qualities情感层面的性质

UX designers with a more visual bent, coming from a graphic design or visual communications tradition, (typically) speak more to the emotive qualities of a visual language or aesthetic. And it is here that we really begin to see an appropriate descriptive focus for the resultant experience, albeit within the realm of the visual domain.

那些来自于平面设计或者传统视觉传达的、更有视觉设计倾向的用户体验师,(典型地)更注重运用视觉语言或美学意义于表现情感品质。而正是在此,我们开始能够以一种恰当的描述方式来关注那些体验,尽管是在视觉的范围内。

The process of arriving at an emotive description often works in reverse, however, with the designer choosing an emotive language to describe a particular visual exploration or aesthetic, rather than receiving a direction in experiential or emotional terms to begin. Where that direction is given, such as through the guise of brand values or personality, the description is of the organization – not the emotional response of the customer or user.

但是,这种产生一个(体验的)情感性描述的过程是一个逆向的过程,设计师们选择一种情感化语言(为结果)去描述一个特定的视觉化过程,这个过程针对于探究或审美,而不是开始于从经验或情感所获得一个指引。但即使给出指引,例如通过品牌价值或品牌个性等名词的伪装下,这个描述也仅是对于该组织的描述-而非顾客或用户的情感化回馈。

Such descriptions tend to fall short in two, significant ways:
这种描述很有可能在下面两个重要的方面上显出其不足:

  • the perspective and focus of brands is, by definition, around the personality of the organisation; and;
    这种品牌的视角和品牌的重点,就本身而言,是围绕着该机构组织的个性;并且;
  • this emotional perspective is kept distinct from the work of designing the activity and perceptual qualities of the system/service.
    这种情感化的视角把自身区分与一些设计工作 ,即活动的设计和感知层面上系统或服务的品质的设计。

Whether we look to the qualities of actions undertaken as described in usability/HCI circles of the UX field; the narrow perceptual lens of time; the broader perceptual lens of aesthetic; or the language of brand personality, we fail to articulate the qualities of an experience we may wish to reproduce in a consistent manner across environments.

不管我们如何看待进行中的活动在用户体验领域中可用性/HCI圈子里的品质,不管是时间的窄感知视角,还是审美的更为宽泛感知视觉;或者是品牌个性的语言,我们都没能够清楚表达一种体验的特质,一种我们所希望在不同的环境下能够再生产有着稳定形态的体验。

Mac App Store

An articulation of the emotional qualities of our intended experience is, therefore, essential when we take on the more holistic challenge of designing systems or end-to-end service experiences. For example, when aiming to deliver an online experience consistent to one delivered in-store – such as with Nespresso; or when extending a product line into a product-service system – such as the introduction of the new Mac App Store.

所以,清楚表达我们目标体验的情感性质,对于我们在进行整体设计系统或端到端服务体验的时候,是非常重要的。比方说,针对于传递与在实体店内一致的在线体验,如Nespresso,或延展一个产品线成为一种产品-服务系统,如新的Mac App Store的推出。

Coming back to the example of the phrase ‘ease-of-use’, let’s explore why such descriptors are insufficient as a means of articulating the experience intended. Something is easy-to-use when the actions possible within the context of the system are clear, well-ordered, work as expected, and do not require complex or complicated input sequences in order to achieve some desired end.

回到‘易用性’这个术语的例子上,让我们来探究一下为什么这样的描述的方式对于清楚表达目标体验来说,是不充分的。有些东西是容易使用的条件是:当该系统所在情境的一切可能动作是发生在一个清晰、好秩序、如预想般运作,并且不会为了要得到一些期望结果而要求一些复杂难懂的序列输入。

Express our intent表达我们的目的

However, our desire for such ease-of-use – from the perspective of experience design – is not an end in and of itself. Our aim might be, for example, to instill our user with a sense of confidence, capability, or willingness to act. Perhaps our aim is simply to avoid frustration and maintain a sense of calm.

但是,我们对于这样易用性的渴望——从体验设计的角度来说——并不是其自身的终点。比方说,我们的目标可能是灌输给我们的用户一种自信、有能力、或是有意愿去行动的感觉。或者我们的目标只是简单地防止用户感觉沮丧,并保持一种平静地感觉。

When we express our intent in these terms, we’re much better equipped to execute across different contexts and environments and achieve the same experience. “Easy to use” might be a useful descriptor for a digital interface, but it is inappropriate, and therefore largely meaningless, when designing, say, a retail presence or the logistics capability for an online purchase. Much better to employ ‘willingness to act’ as the desired experiential characteristic.

当通过这些术语去传达我们的目的时,我们实现了在不同的情境和环境下,有更好的方法去得到相同的体验。“容易去使用”可能对数字化界面来说是一个有用的描述,但对于设计例如一个在线购物的连锁店实体或物流能力的时候,这样的表述是不恰当的,也因此而很大程度上没有意义的。此时,如果采用“有行动的意愿”这样的表述作为期望体验的特性的话会更好。

To what extent are organisations attempting to craft the type of consistent, multi-context experience for which these emotional descriptions are needed?

到什么程度时,组织机构会需要这些情感的描述来尝试传达在多种情境下稳定的体验?

Similarly, we find ourselves woefully ill-equipped to make decisions about other experiential elements that become relevant in different context. For example, how should our retail environment’s lighting be designed? What aromas or smells might be appropriate?

类似地,我们可悲地发现当在其他体验元素在不同的情境下需要产生关联时,我们往往没有太好的方法给我们作出任何决定的帮助。比方说,我们的连锁店里的环境灯光应该如何设计?什么样的氛围和味道是恰当的?

Vice versa, if scents or lighting are being used in a physical environment – such as the signature smell of some hotel chains – do we simply ignore them when designing a customer’s interaction with a call centre? Or is there an emotional intent behind the use of a particular scent which can be translated into a contact-less environment like a call centre?

反之亦然,如果在物理环境中采用了味觉或灯光——例如在一些连锁酒店中标志性的味道——我们会不会简单地忽视它们,当需要设计客户与呼叫中心的交互时候?或者说某种特定的味道的使用背后有没有一个特定的情感层面的目的,能够被转化为在设计无须和用户直接接触的环境(如呼叫中心)的时候所考虑的因素?

Is this really a concern, however? To what extent are organisations attempting to craft the type of consistent, multi-context experience for which these emotional descriptions are needed?

但是,这真的会是我们关心的因素吗? 到什么程度时,组织机构会需要这些情感的描述来尝试传达在多种情境下稳定的体验?

Modern practice in architecture, systems, interaction and service design all require the type of multi-context consistency described above. Corporations and Government agencies in Europe, North America, Australia and Asia are actively pursuing projects designed to introduce ‘customer’ experiences designed around an holistic, unified set of characteristics – and mostly failing to achieve the level of consistency desired or needed.

在建筑设计、系统设计、交互设计和服务设计中的现代实践都要求如上述般一种跨情境体验的稳定性。在欧洲、北美、澳洲和亚洲的公司组织和政府机构均主动地寻求引入一种顾客体验项目,它围绕一种全面、整体、且统一的性质——但在绝大多数时候都没能成功得到所希望或需要的稳定一致性。

Let us ensure alignment让我们确保一个基准

We can better ensure alignment across contexts and environments if our objective is described in terms more suitable for such application. Once we begin to think of experiences as experiences, rather than actions or perceptions, we become much better able to critique each specific incarnation of that experience in whatever context it might occur.

如果我们目标的描述对于这些应用来说是更有效的,我们就可以更好的确保不同情境和环境下的基准点 。只要我们开始把体验用属于其自身的方式来思考,而不是用别的像动作或者感知的方式,我们将变得能够更好的评判体验的每一种特定形态,不论它可能产生于何种情境当中。

We cannot ignore the actions customers will want or need to carry out; nor should we. Similarly we should not ignore the characteristics of customers’ perception. However, it is the emotional qualities of the experience that provide us with the means to translate the full range of experiential qualities of one system or service component to another, thereby delivering on the promise of experience design.

我们不能忽视顾客们希望或需要执行的行为动作;我们也不应该忽视。同样地,我们也不能忽视顾客感知的特性。但是,正是我们所感受的体验的情感品质,把一个系统或服务部分的情感品质完全传达到另一个系统或服务上,这其中也传递出体验设计的希望。

产品交互的良性循环

用户与产品之间的相互可以看成是双向线性的过程,手机上输入字母“d”和界面输出显示是一次短交互,完成一次购物支付是长交互,这是使用一次产品过程中。用户体验考量的是用户使用产品的全过程,这个过程包括了从安装到放弃使用的时间轴,交互的良性循环的优秀用户体验的表现。

简单以推荐引擎为例来说明各元素是如何在时间轴上发挥作用的:

初始化。基于群体特征和用户的相关程度,将相似用户喜好的其他物品推荐给用户。在用户对产品还没有发生行为时,用户填写的个人信息(性别、年龄和收入等)可以作为初始化推荐。

内容推荐。单个用户选择某一物品,系统基于物品的元数据推荐相似的产品。这是用户个体行为对数据的过滤,当用户多次行为之后,系统可以大概估计对用户的喜好。用户的历史行为会不断影响后续推荐,形成用户和系统之间的交互循环。

协同过滤。基于用户行为发现物品的相关性。内容推荐是单个用户对系统数据的过滤,而协同过滤是基于多个用户行为的交叉结果,所以依赖于其他用户行为数据量准确度。

IMG_0115

输入法的字词联想也可以看出一个推荐引擎。当打入字母“da”,系统从词库挑选出“da”目录下的汉字“大/达/打……”,“大”字上屏之后,系统联想与“大”组词概率比较大的字“家/学/概……”。这些联想词最早可能是从字典中筛选出来的,如用户选择了“概”字,“概”会被系统加权,下次对“大”联想时更靠前显示。用户输入词组“dagai”,选择“大概”上屏,也是对“概”字的加权。

如用户输入“daniu”,选择了“大牛”上屏,而系统词库中没有这个词组,属于用户自造词。如用户分别输入“da”和“niu”并上屏,系统智能分析“大”和“牛”有组词的概率,有可能用户下次输入“大”字,系统会联想到“牛”。

baidu

联想的交互是单个用户对系统词库的内容过滤,初始词库可以逐渐形成个性词库。如果是云端输入法,系统可以实时获得所有用户的输入字词,词库的更新频率更快,满足用户个性词库的同时也能更新最新流行词,这是多个用户对词库的协调过滤。

用户自造词会降低部分词汇的出现概率,系统甚至会从词库中删除这些词汇。从输入法的例子中可以看出用户行为是如何影响系统和其他用户,历史行为影响新的行为,实现不断的交互循环。

纯银的“显性内容决定论”可以理解为:优质用户产生优质内容,优质内容吸引优质用户,内容决定产品的魅力和气场。从系统设计的观点看,用户行为可以看成系统数据的一部分,优秀用户的行为和优质内容是同质化数据。它们之间的频繁交互是优化内容数据的组织形式,再不断向外扩展生成和吸收同质数据,版本迭代是滚雪球式的数据扩展。

如此看来,产品架构需要考虑是如何增加数据量、组织数据和数据扩展的良性循环。

2

切客的勋章

以手机LBS为例,增加数据量的方法简单分为三种:用户输入、导入数据和商家发布信息。需求驱动用户主动使用,LBS的勋章激励机制是引导用户行为,优惠券是刺激用户需求。用户的签到行为如果无法加以利用的话,可以认为是不断输入垃圾信息。但签到的位置、签到商家的类型和频繁程序都是可以加以分析,便于后期向用户推荐有效信息和组织用户之间的联系。

每次循环都会影响到后续的产品质量,“小步快跑”的道理也在此,用户对于产品的感受也是不断增强,但也可能达到饱和。使用豆瓣电台选择喜欢听的音乐,累计听歌近两万首时,电台猜中概率明显降低。原因可能是:

  1. 已经遍历各种音乐,难以发现新歌曲,个人输入行为已经趋向于饱和。
  2. 没有文艺范,不是目标用户群,对音乐缺乏探索。
  3. 听到不喜欢的音乐时,可能会连续点击十次下一首,最后无奈关掉电台,对于用户的隐性反馈缺乏理解。

以思维导图式的方式理解产品会缺乏组织性,循环是产品架构的初级概念之一,以时间轴去安排产品设计的优先级。

工具型产品的设计感想

什么是工具型产品? 

工作的这段时间以来,我主要参与了一些电子商务类产品的交互设计,我发现这类产品的设计思路和门户、频道等产品有较大的差异,它们更关注于完成任务及操作,而非内容的分类与展示。之前我通常称这类产品为功能型产品。在去年广州举行的交互设计体验日上,通过和其他交互设计师交流,发现在业内这类产品似乎也没有一个固定的称谓,有的交互设计师称之为“工具型产品”,我觉得倒也很贴切。 

为什么要单独定义它?

如果看过《用户体验的要素》,大家一定记得其中讲到的有关用户体验的五个层级。根据产品战略的不同,需要设计师采用不同的设计思维。下图左边代表的是工具型产品(比如电子商务类产品的支付部分),右边代表的是内容型产品(比如门户、部分频道等)。从图中可以看出,左右两边在不同的层级上有明显的差异。

\ 

工具型产品与内容型产品的区别

工具型产品关注的是任务——所有的操作都被纳入一个过程,去思考人们如何完成这个过程。在这里,我们把网站看成用户用于完成一个或多个任务的一个或一组工具。

内容型产品关注的是信息——网站应该提供哪些信息,这些信息对用户的意义是什么。在这里,我们把网站看成一个“用户可以穿越的信息空间”。

\

工具型产品的设计师把每一个问题看成是“应用软件”的设计问题,然后从传统的桌面和客户端软件的角度来考虑解决方案。

内容型产品的设计师以信息的发布和检索的角度来看待网站,然后从传统出版、媒体和信息技术的角度来考虑问题的解决方案。

在五个层级上的区别:

\

结构层的区别示意图:

\

表现层的区别示意图:

\

——————————————————————————————————————————

到底什么是交互设计?

关于这个问题的答案,我想很多专业的交互设计师也未必能说的很清楚。

从《用户体验的要素》上,可以找到“交互设计”所处的位置。这是从客观的角度来定义“交互设计”的概念。

\

如图所示,工具型产品的结构层即为“交互设计”,这一部分的产出物主要为任务流程图。然而实际上并不存在绝对的工具型产品或是绝对的内容型产品,在每一个层面中,这些要素必须相互作用才能完成该层面的目标。因此也可认为一般产品的结构层为“交互设计”。那么“交互设计”可理解为:主要通过功能规格(业务逻辑)设计任务流程,最后制作出页面原型的过程

在网上找到了其他比较受认同的解释,这是从交互设计积累的经验得到的:帮助用户高效的完成产品所设想的任务,同时在这个过程中,能让用户感觉到愉悦和不受打扰。但是,到底如何才能高效的完成产品所设想的任务?如何才能让用户感觉到愉悦和不受打扰?如何去衡量和评判?却不好界定。

把这两者相结合,可得到一个更具体的关于交互设计的定义:所谓交互设计,就是通过分析用户心理模型、设计任务流程、运用交互知识,把业务逻辑以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的最佳平衡点)的过程。

交互设计的四要素

\

从新的定义中可提炼出交互设计的几点要素:

•业务逻辑是考虑一切问题的关键点。要想做出好的设计,不管在任何一个层面上都不能忽略业务逻辑。

•在业务逻辑正确的基础上,只要任务流程设计的正确,一般来说产品就是可用的;忽视了任务流程的设计(尤其是大型产品),产品将是不可用的。

•分析心理模型对于理解业务逻辑、优化任务流程、提升用户体验都有重要的作用。

•熟悉交互规范可以避免在框架层出现错误

业务逻辑、任务流程、心理模型、交互规范在设计的不同阶段中都起着重要作用。这就意味着对于一个交互设计师来说,只懂交互知识对于做好一个产品的设计是远远不够的。

交互设计四要素的运用 

例1:网易宝支付流程

\

当余额不足时,就会在余额下面再次出现其他付款方式的选项,以补足余额。

1.业务逻辑:除余额可以和其他方式组合外,其余tab下的支付方式是各自独立的。但在第一层tab上,所有的支付方式都是并列的,这显然和业务逻辑不完全对应。

2.心理模型:如果把这个比做用户的钱包,那么用户的钱包里绝对不会出现除余额外其他付款方式的“重影”。

3.任务流程:没发现大问题(所以对用户来说依然是可用的)。

4.交互规范:每个tab下应该都是不同的内容,但目前有大量重复。

综上就能判断出网易宝的支付页面确实有很大问题(也许对用户影响不大,但代码负担重、拓展性差)。再用这四要素去判断支付宝的设计,就会发现好了很多(但也不是没问题)。

\

例2:支付宝默认勾选余额

当余额不足时,用户会使用余额吗?(和用户心理有关)

\

心理模型:余额可比作现实生活中的现金,当现金不足时,大部分人会选择通过银行卡等方式支付,而不会选择全部现金加银行卡的方式。所以大部分用户在余额不足时,不会选择使用余额支付。

例3:支付宝红包

\

1.业务逻辑:红包的支付优先级高于余额,正如同余额的支付优先级高于网银一样。但从界面上看,红包和余额的关系比余额和网银的关系要密切很多。

2.心理模型:和现实生活类比,红包好比优惠券,余额好比现金。那么如果让用户把优惠券、现金和网银支付做个分类的话,很显然现金和银行卡是一类,优惠券是另一类。所以这里把红包和余额放在一起是不符合用户心理模型的,余额和网银的关系反而应该更近一些。

3.任务流程:无大问题(对用户来说可用)

4.交互规范:同一个界面上出现两个同等分量的提交按钮不妥;在该页面上,“下一步”表示的是对于红包和网银信息的提交,所以应该在最外面,而不是从属于网银的区域内。

——————————————————————————————————————————

总结:

设计一个产品就像盖房子一样,要在战略层的基础上一级一级向上垒。对于设计师来说,不管是设计什么类型的产品,不仅要对产品整体有大概的认识,还要特别熟悉下一层级的内容,才能做出符合产品要求的设计。每一个层级的负责人都有权利和义务对上一个层级的不合理之处提出意见和建议。

根据产品的战略不同,可以在理论上将产品分为工具型产品和内容型产品,设计时需要采取不同的思维和方法。但产品多有交叉,也需要综合考虑。

交互设计,就是通过分析用户心理模型、设计任务流程、运用交互知识,把业务逻辑以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的最佳平衡点)的过程。

业务逻辑、心理模型、任务流程、交互规范是交互设计的四要素,可以通过这四要素快速找出设计中的问题所在。

All about Android

最近做android一些应用的设计,看到腾讯WSD有比较全面的介绍,转过来,原文在:http://wsd.tencent.com/2011/01/aboutandroid1.html

Android 是近年来在移动设备行业相当火热的词汇,在此我从交互设计的角度整理了此文章,文章分为三个部分,跟大家讨论android的那些事儿。

第一部分:成长中的android;

  1. 什么是android,为什么要android,怎么来做android;
  2. 目前android怎么样了:多屏幕,多应用,多用户,多变种,“多”以致“乱”的用户体验。

第二部分:android phone的交互特性;

  1. 以screen和box为载体的信息布局;
  2. 以物理按键和屏幕对象组成的意图对象集合;
  3. 以长按为特色的意图动作集合;
  4. 以状态栏为载体的通知系统;
  5. 一些零碎的特性。

第三部分:android pad的特性。

  1. Pad和phone的区别;
  2. Android pad和ipad的区别;
  3. 设计android pad的尝试与展望其未来发展。

——————————————————————————————————————————–

第一部分:成长中的Android

——————————————————————————————————————————-

什么是Android?

Andy Rubin

  • Android 是google公司主导的一个开放的手机操作系统,不过目前已经超过了手机的局限,而定位于移动设备的操作系统。
  • Android一词的本义指“机器人”,取名原因很简单开发者叫Andy Rubin。中文官方称呼“安致”,民间称呼“安卓”。
  • 2004年Andy Rubin创业成立新公司Android。
  • 2005年Google为发展移动互联网,收购了Android公司,展开了短信、手机检索、定位等业务。
  • 2007年11月5日Google对外宣布基于Linux平台开源手机操作系统叫android,该平台由操作系统、中间件、用户界面和应用软件组成,号称是首个为移动终端打造的真正开放和完整的移动软件。早期由Google开发,后由开放手机联盟(Open Handset Alliance)开发。
  • 2008年9月22日,美国运营商T-Mobile USA发布第一款基于Android的手机——T-Mobile G1。该款手机为宏达电制造,是世界上第一部使用Android操作系统的手机,支持WCDMA/HSPA网络,理论下载速率7.2Mbps,并支持 Wi-Fi。在随后的几个月越来越多的厂商也开始宣布将提供Android手机。

T-Mobile G1

为什么要发展Android?

  • 变革:人们对信息的获取和计算经历了几次变革,首先从以PC桌面系统为中心转向以PC web为中心,现在正从PC web转移到无线互联网为中心。谷歌的mission是成为全球的计算机,把互联网的“云”就必须带到移动互联网上,因为移动互联是未来的全部。Android 作为谷歌战略的重要组成部分,将进一步推进“随时随地为每个人提供信息”这一企业目标的实现。
  • 自由:谷歌的目标是让移动通讯不依赖于设备甚至平台,基于此Android 将进一步补充谷歌长期以来的移动发展战略:通过与全球各地的手机制造商和移动运营商结成合作伙伴,开发既有用又有吸引力的移动服务,并推广这些产品。
  • 盈利:自由战略决定了必然形成一个开放的手机操作系统及提供智能应用的市场平台那就是android market。Apple公司以iTunes App store 应用超市征收上架费的模式获得大量用户群并挣得巨额利润;Nokia也开发了OVI应用商店,但因为Nokia智能手机系统的复杂等等原因,应用的数量和质量都不能满足用户的需求;Google android market目前以免费为软环境,建立未来广告阵地,Market 从自身来讲是个盈利的阵地。

  • 整合:Android 从设计之初就跨手机、机顶盒和上网本等多样终端而工作,需要提出的谷歌 Chrome 操作系统则为那些花费绝大部分时间用于上网的用户而设计,被设计用于装备从小型上网本到大型台式系统在内的各种计算机。Chrome 操作系统和 Android 有一些领域重合,Google坚信选择驱动创新,并让包括谷歌在内的每一个人受益。Android将是Google 的产品体验生态系统中的重要一链。

怎么发展Android?

Google的使命:组织全世界的信息,且让所有人无障碍的获取以实现价值。而移动设备让成为了实现这一目标的催化剂。同时强调统一的体验才能保证应用有用。 2007年Google 用户体验leader Leland Rechis谈及到移动用户体验战略,如下: 发布应用要考虑6层问题。

  1. 理解谁是用户,何时,何地来使用。
    • 重复性操作用户:Google提供cookies 来方便用户进进出出。
    • 无聊型用户:为了打发等车或坐车时的那几分钟;浏览多于撰写,要简化输入功能。
    • 紧急性用户:为了寻找特定的信息或者是在特定时间完成某个任务,比如检查航班、找旅馆等等。多是本地应用,所以Google强化本地信息的应用。
  2. 装在口袋里:屏幕有限,要考虑减少输入,也要考虑清楚最有价值的信息放在屏幕上。
  3. 比PC更需要个人隐私保密。
  4. 一致性:重点指的是在不同屏幕下的一致性,贯穿PC,mobile phone,PAD,TV等设备的Google的体验生态系统。
  5. 强化本地化。任何应用对用户来说都有区域限制,也是区域优势。需要更完善的本地化服务(LBS)。
  6. 整合设备,模式,产品。是谷歌“云”服务的一个终端而已。

新上任的android UE leader Matias Duarte 之前在palm公司指导手机webOS操作系统的设计,到android团队上任之后,指导了2.3和3.0系统的设计。在2011年CES展会接受engadget的采访中提到,Android是前所未有的充满发展空间,特别要关注android 3.0 honeycomb的巨大市场潜力。

Matias Duarte

Android现状

官方版本历史

官方每半年做一次系统升级,分别定在每年的夏天和年终。以C D E F G为首字母的甜点食品顺序排列。 每个版本的发布都让android有不小的进步。

http://developer.android.com/resources/dashboard/platform-versions.html 源于官方的统计数据说明,目前版本集中在2.1和2.2版本,最新的2.3的装机量很小。

2.3版本新特性

  • UI中更多的绿色运用,表现更精细,简洁,快的特征;
  • 快而直观的文本编辑,长按实现选择编辑的功能;
  • 电量,消耗可视化管理。
  • 任务管理器
  • 网络电话 sip账号,根据地区和设备制造商不同而不同。
  • 浏览器添加标签
  • 近场通信:近距离(10cm以内)安全通信的无线通信技术,模拟为一张非接触卡,移动支付,移动票务,身份识别。银行卡,门禁卡,电子票。
  • 下载管理:可通过浏览器,邮件等查看历史下载文档。
  • 相机:前后摄像头 都可用

android 2.3 界面snapshot

多屏幕

屏幕包括两个维度,一个是尺寸,一个是分辨率。如下图,android把屏幕分为小屏幕,普通屏幕,大屏幕,超大屏幕;分辨率分为低,中,高和超高分辨率。这样的结果就出现了4×4为16种屏幕布局可能。

最早看见的开发文档把屏幕分为了低、中、高的分辨率屏幕,分别制作图标集,现在又出现了超高分辨率的标准如下图。 目前终端屏幕多在中和高分辨率中,大概覆盖的屏幕尺寸如图。当pad出现之后,屏幕适配确实成为一个难题。

对不同屏幕的适配的解决办法
  1. 同一个应用制作多分辨率的图标集。
  2. Android系统中屏幕元素用dp单位,可根据低中高三个规定好的规格设计。
  3. 图片会利用 9patches技术,生成能透明的可拉伸的PNG图片。

图标类别
指定屏幕属性上的标准件尺寸(像素)

低分辨率屏 (ldpi)
中分辨率屏 (mdpi)
高分辨率屏 (hdpi)

Launcher
36 x 36 px
48 x 48 px
72 x 72 px

Menu
36 x 36 px
48 x 48 px
72 x 72 px

Status Bar
24 x 24 px
32 x 32 px
48 x 48 px

Tab
24 x 24 px
32 x 32 px
48 x 48 px

Dialog
24 x 24 px
32 x 32 px
48 x 48 px

List View
24 x 24 px
32 x 32 px
48 x 48 px

多分辨率的图标集

多系统版本

除去上文提到的android不同版本,另外还有其它厂商和团体开发的自定系统,包括深度定制和适度的shell修改。

  • Moto blur l  HTC sense
  • Sony Ericsson timespace
  • 魅族m9
  • 点心 UI
  • Kite UI
  • MIUI
  • Lephone
  • OPhone

Moto blur:更强调SNS信息更新备份的展示界面。

Moto blur

索爱Timescape:同样强调了sns功能,可以让你在一个界面里同时看到电话联系人、Facebook、twitter和短信内容,主界面的四个角落里分别可以放置一个快捷方式,用户可以进行自定义。

索爱Timescap

HTC sense:以时间卡片为视觉代表的UI,自定义的UI丰富了视觉表现,但是在交互方式层面并没有太多的变化。

HTC sense

魅族M9 :基于android 2.2系统,在信息展示层面有深度修改优化,是一款比较适合国内用户使用的系统。泄露出来的M9 rom 目前还可以移植到milestone等手机上,也说明了此rom受关注的程度很高。与原生的android 不同的地方在于:

  • Title和status bar的整合,以期节约空间。
  • 框的统一设计,对话框警示框等。
  • 吸取iphone的文件夹概念。
  • 取消android本来的桌面和应用抽屉概念,保证应用仅在桌面展示。

M9

Lephone:联想开发的手机,在硬件外观设计上获得好评,在UI设计上有以下新颖之处:

  • 取消android的众多物理按键,以Touch pad 取代之,比如向上出现menu,向左为返回等动作。
  • 在页面的title上,应用多有返回键
  • Status bar右侧类似太阳的其实是返回主屏的按钮。

lephone

Miui:口号是让android 手机更快更好玩。这个UI类似Iphone,但更丰富,也真的更好玩。视频演示:http://v.youku.com/v_show/id_XMjIwOTUzNzgw.html

miui

点心UI:主要运用在sharp手机上。特色:

  • 大圆角设计
  • 独特四向开锁设计
  • 状态栏上放常用功能。

点心UI

Ophone:中国移动主导的open mobile system,内核也是基于android的。在menu,长按等特征中得以继承,有特色的地方再于:Title 右侧的返回按钮。

ophone

多终端,多应用,多用户:

截止2011.1.10仅在中关村在线上就有389款android手机, 89款平板电脑从680到1.3万(三星w899)的价格不等。另外传说nokia 5903将搭载android2.1系统。在android market上统计的应用数量也有22.8万余个,直逼itunes app store的30万个。更多的数据显示android手机的用户与日俱增。

Android平台总结:

从上面多版本,多屏幕,用终端,多用户,多应用的现实状况来看,android平台有太多的要素没有统一,因此造成了不太友好的用户体验。从版本升级来看,我们可以知道android系统是个成长的系统,每个阶段来说都是不成熟的系统,会有大量的用户抱怨体验不好,因此也有大量的团队来改善其UI。

这些特性正是由于它的开放性,在它官方的guideline中,每说一个特性的时候,都会讲“我们并不是限制您必须如此开发,只是这样方法仅作参考,提高您的效率。” 正是由于这种开放性,android系统比起其他的任何系统都百花齐放。

相比IOS等相对封闭的系统,开放带来的就是缺乏规范,界面不够统一,这种情况愈演愈烈。 限于官方指导文档不够细致,我们需要从google自行研发的应用中总结整个平台的特性,继而有效地复用在自己的产品研发上,达到一致的用户体验。

android平台目前运用在phone上的量比较多,目前正蔓延到平板电脑上,但是简单的移植会造成很差的体验,尺寸和操作的不同需要做适配变化。目前的android3.0 系统是针对平板电脑上的操作系统。逐渐形成了phone 和pad 两个操作系统的发展趋势。目前android在这方面更加剧了体验的分裂。希望android能有更适合的策略尽快统一体验。

milestone 为代表的android 手机

首先我们简单说下谁在用Android的手机。据尼尔森最近数据调查结果显示:

  • 在女性消费者当中,想购买iPhone的比例为31%,想购买Android手机的比例为23%;
  • 在男性消费者当中,想购买iPhone的比例为29%,想购买Android手机的比例为33%。

可以得出性别差异,男性更倾向买Android手机。这也给Android 带来了个性色彩的定义:技术、工程、规矩,理性。

另外,我们可以认为使用Android手机的用户有一大部分有使用symbian的历史。可以理解用户习惯symbian 系统在底部安排功能按钮和菜单的习惯。

交互设计上有个简单原则叫 don’t make me think,但是使用Android手机后,会让你感觉it makes me think a lot。对比norman定义的交互原则,我给Android打了个分数(满分100):

可见Visibility- can is see it?
50

反馈Feedback – what is it doing now?
80

表意Affordance – how do I use it?
60

导航Mapping – where am 1 and where can I go?
60

约束Constraint – why can’t I do that?
80

一致Consistency – this is familiar
40

因为menu等元素让位于屏幕空间,相比iPhone,用户是很少能全面了解页面功能的,必须先点击menu键展示更多的功能,所以可见性并不好;而由于上文中提到的多版本,多变种,多屏幕,多应用,多用户的现状,一致性是个很严重的问题。

在分析之前,我总结了5条交互设计的原则:

  1. 减少视觉压力。精简文字
  2. 减少思考压力。惯常图标,少的选择
  3. 减少记忆压力。一致性,运用“7±2”和“组块”原理,
  4. 减少移动压力。显示与操作的就近
  5. 减少或消除技术带来的负担。惯常用语。

—————————————————————————————————————-

人作为交互主体与界面客体通过意图动作完成交互,以实现用户某任务。而界面是信息载体在手机上直观传达了用户能做什么,需要怎么做。 下文把Android系统的交互分解如下:

  • 布局
    1. Screen
    2. box
  • 意图动作
    1. 单击,长按,拖拽,pinch……
  • 意图对象
    1. 物理按键,menu,置于屏幕对象,状态栏
  • 反馈
  • 导航
  • 其它

—————————————————————————————————————-

布局

应用的界面构成

对于一个应用来说,从开发的角度来说就是一系列的activity构成了一个应用,从设计的角度来说,应用由一系列的screen和box组成的,他们是应用中信息和操作的载体。

screen

Android和iPhone的对比

对比可以看见Android的title没有承载导航的功能,因为返回的功能给了物理键,目的是节约空间。

Android 的status bar 需要在任何应用中可见,因为承载了通知机制,任务管理等功能。 布局特性是根据操作特性决定的,要追求视觉平衡,另外更重要的要符合手机操作的情景,比如Android智能手机属于全触屏手机,屏幕尺寸需要用户单手握持,我们要达到键盘机单手操作的需要,就需要尽可能把更多的操作放在屏幕的下面,特别是一些紧急应用的功能。 因此我建议把分类tab放置在页面下方,当没有固定button的时候。当两者冲突时优先考虑需要放置在屏幕上的命令按钮。(这也是依据满足最小移动的原则) 下图出现了几种典型的情况,分别是

  1. 常用按钮外置出现的toolbar;
  2. menu出现的位置和数量,系统定义的2×3的排列,在更多的场景中不适用,更多的menu可以放出来,我们这边定义了2×4的排列方式;后面会介绍menu的策略。
  3. 底部tab的情况,tab一般是图标加文字的形式,我们给定了个max数量5,
  4. 和底部tab不同的是顶部tab需要省略掉title。因为tab能实现当前页面的定位需求。

Box

为什么要出现box的形式呢?原因在于:

  1. 合理运用能减少内容层级,让应用的结构更扁平。
  2. Box比screen更醒目,内容也更清楚。因为可视区域减小,信息更紧凑。

下图是box的分类,我们可以看到上下分为有按钮的和没有按钮的情况。另外有种toast的弱提示形式也包含在box中。

各种box

区分不同的对话框在于框内的内容,

  1. 警示对话框:重度提示警示用
  2. 选择对话框:做单选或复选,需要有确认按钮来确认选择。
  3. 输入框:内部有输入的空间,如果遇到键盘遮挡,输入框需要划动到屏幕顶部,保证不被遮挡。
  4. 列表框:类似单选对话框,不同的是没有了radio button。如何区别于单选框就看内容选择结果是否有严重后果。
  5. 上下文菜单:是Android长按出现的,是一个命令集合,形式和列表框类似,但内容不同。在这里一般是动作命令。
  6. 说明框:多用于版本说明。

在设计box的时候要注意:

  1. 标题:正常的框都是必须有标题的,标题要简洁,直接说明框的目的,比如“退出”“重新下载”等,出现“提示”的标题是没有意义的。标题中也不能有疑问语气。
  2. 内容:要形式上对齐,结构上相似,意义要明确简洁。
  3. 收回方式:是否放个“取消”按钮呢?我的经验是按照情况来定,基本依据上面的图,能不放就不放,尽量用返回键。
  4. 按钮数量:1,2,3? 尽量少让用户做选择。最好不让有歧义的按钮,按钮彼此要互斥相对。
  5. 文本:标题上的文本,内容文本和按钮文本要一致,尽量使用“确认”“取消”。不要用别的文字。

上图是一些box案例

意图动作

跟其它的触屏手机类似,特别强调的是Android中的长按动作在系统中有丰富的应用,是屏幕尺寸限制下的丰富交互的一个捷径。

意图动作实例

意图对象(intent object)

意图对象简单来说就是能触发命令的界面元素,是指上文中的动作可以操作的对象,Android手机分为物理对象和屏幕对象两大类。

物理对象

物理键是Android系统手机的经典标志。

  • 返回键:展现了Android系统活动栈的概念
  • 主屏键:保证了导航的起点,在失去方向的时候能快捷的回到原点。
  • 菜单键:为呼出和收纳功能命令。目的是保留更多的空间给内容展示
  • 搜索键:推销google搜索业务的
  • 关机键:和其它手机一样,关机和锁屏。
  • 轨迹球 触摸板
  • 音量键(- +)及拍照键

全局的返回按键

  1. 它可以是跨应用的,比如你开启了a应用,通过通知系统去了b应用,你是可以通过返回键回去的;另外你的应用调用了另外的应用,你是可以通过返回键回去的。屏幕上是否出现返回键是应用自身的事情。所以因应用情况不同而不同。你觉得应用层级不深,且页面间不会频繁的前进,后退等有任务流向的应用不出现返回;类似浏览器这样的应用,页面存在多tab的层层页面操作,是有必要加返回button的。
  2. 返回的最终是主屏键;WP7的返回键不同的是,它的返回有点混乱的,因为主屏将是其中的一个节点,而非终点。
  3. Android用户是习惯用返回键的。

轨迹球。

  • 按顺序切换焦点,
  • 有焦点但没有鼠标悬停的效果,
  • 轨迹球的好处,确实能很好的实现单手操作,摆脱必须点触屏幕的束缚。

屏幕对象

屏幕对象包括三部分:隐藏的菜单;置于屏幕的命令;状态栏。这三部分都需要用户通过不同的意图动作触发对象以实现和界面的交互。在android系统上别有一番特色。

隐藏的menu(不可见=不可预见)
  • 隐藏的目的是为了节约屏幕空间;
  • Menu的不可预见性 因为隐藏,所以要猜。大多猜错。
  • 上下文菜单的不可预见性

菜单的三种表现形式

图中包含Android系统中三类菜单表现形式:

  1. 选项图标菜单 第一次按下菜单键会在屏幕底部显示一个不可滚动的图标框。(系统默认最多6个按钮,以2×3的形式展现,但大多自绘菜单可以安排为2×4,下图展示在一个应用中从1到8的排列方式)
  2. 选项扩展菜单 当有比图标菜单多的菜单项时,最后一个图标被命名为“更多”,选择了它之后会有一个包含了任意数量的菜单项列表,当需要的时候可以滚动显示。
  3. 上下文菜单 在对象上长按,出现应用于对象的菜单对话框。

全局操作和针对某对象的操作用不同的菜单命令 选项菜单应用于全局,而上下文菜单用于内容中的一项。如图中所示,用户导航到菜单,然后选择一个菜单项来执行一个操作或打开一个对话框。 应自绘需要,安排8个图标菜单的情况下,假如出现1-7个的情况,推荐用下面的排列方式,排列理念就是对称和稳定的金字塔形式。注意把右下角的位置始终留给“退出”命令。

2×4模式下,从1到8的推荐排列形式

上下文菜单可以说是对某元素的次级操作快捷入口,也出现了特殊的交互方式,如下图的横向图标排列形式,这种情况适合命令数量少的情况。 这种情况是把一个item的交互区域分割为2到3个区域,分别是置前或置后的图标配合较长的文字。点击图标浮出如图的上下文菜单,长按文字出现上下文菜单,短按文字出现第一命令。

置于屏幕的命令

命令直接置于屏幕上,通常是以文本链接,图标按钮或是文字加图标的形式。屏幕上命令容易被发现,可以直接看见命令。直观的代价是占用用户空间以及可能的视觉杂乱。 这类命令是频繁操作的,屏幕有空间来展示这些命令。在运用这类命令的时候注意信息层次和传达效果。

状态栏

状态栏承载了任务管理,下载进度,任务通知等功能切换。状态栏里面的通知机制是Android最具特性的一面。通过下拉拖拽的形式打开通知系统,用向上拖拽或返回键退出通知系统。

M9的通知页不是全页面的,有一定的好处

注意:在不同应用中都要方便的从状态栏接收到外部通知。除了全屏的阅读,游戏,下拉的Status bar通知系统不可遮挡的。 下图是手机QQ阅读应用如何利用状态栏的通知系统贯穿在下载管理中的。点击“下载”在状态栏有加入下载提示,下载完成出现提示,并通过通知直接打开刚下载的图书文件。

在手机QQ阅读中对状态栏的运用

其它特性

分离的sd卡

和iPhone相比,Android手机是需要插卡来增加手机存储空间。 每次开启要加载,如果没有安装sd卡将出现不能正常使用的情况。设计应用时需要考虑没有SD卡或者没有安装好SD卡的情况。

桌面和应用抽屉

桌面和应用抽屉

启动应用有很多的方式和位置。延续了PC上windows的特色,用户认为重要的应用会在桌面创建快捷方式。所有的应用将放在应用抽屉中,就是从屏幕底部向上拉出的页面。 对于一个应用都可能存在两个启动位置,这样的交互不同于iPhone的单入口形式,造成的困扰:

  • 可能重复放置应用快捷方式到桌面;
  • 在应用抽屉中按字母派讯,不好找想要用的应用,无法确定位置;
  • 桌面应用快捷方式横向翻屏和应用抽屉的下拉方式没有统一的交互方向,增加思考的成本。

注意:在应用开发中要避免多入口,多交互方向的情况。要让用户在确定的位置找到目标对象。

软件退出

  • 按主屏键回到主屏并不结束活动,应用仍在在后台运行,
  • 按返回键或菜单中的退出命令一般会出现退出确认框。

屏幕方向

Android手机有重力感应器,能自动横屏和竖屏切换。但并不是所有应用都要去做这个横竖屏适配。因为屏幕多的缘故,给人的效果是不一样的。应该考虑应用的特殊性来特殊对待。

为节电和节约流量的设计

Android手机的屏幕一般较大,应用耗电相当的大,而屏幕电量消耗占了主要部分,开发应用时要注意考虑用户无意的让屏幕常亮,要增加机制自动锁屏,类似游戏中的防沉溺机制。 为节约流量的设计。 耗费流量的应用要设立保护机制,做wifi和gprs的优先判断。在普通网络中最好给用户预先提示。让用户心理有个消费预期。

Android Pad 和Phone一样都存在多尺寸问题。对于Pad,更揪心的是屏幕比例和尺寸的多样性,这些因素直接影响着UI的表现方式。比较困惑的是我们的如何设计一个兼顾各种屏幕尺寸,分辨率,比例和方向的Android Pad应用。为此我们质问自己Android Pad 和Phone有什么差别?Android Pad 和iPad有什么区别?

现在很难找个能代表Android Pad的产品(不确定的尺寸,按钮位置,数量),在此仅以下图表示神秘莫测的Android Pad。

神秘多变的Android Pad

第一个问题:Pad怎么就成了Pad?在此我总结了Pad和Phone的区别:

Pad
Phone

尺寸
5寸-10寸
2寸-5寸

应用场景
家,办公环境中用于娱乐,演示 有连续长时间沉浸式的流畅体验
放在口袋中,随身携带 时间上更碎片化。

交互方式
触摸屏幕,点击,拖拽。
触摸屏幕,点击,拖拽。

手持方式
一般双手握持,可双手操作 另外借助膝盖,也叫laptop。 左手握持,右手操作较多
单手操作的情况较多。 可以说就是在手掌中的。

操作时间
较长,半小时以上
操作时间短,大多在3分钟以下, 操作频率高。

显示方向
大多兼顾水平和竖直方向
大多是竖直方向

信息展示层级
页面+弹出菜单的结构。 较少的全页面切换,局部信息切换 Screen + popup box
页面到页面的切换 Screen to screen,页面到另一页面的切换

内容
足够的空间展示更多的内容和功能。内容和功能的外显更多。
空间有限,一些功能,内容巧妙的隐藏, 比如内容通过下级页面来拼接。 功能放在menu中,或者情景菜单中隐藏。保持页面更多地展示内容。

外媒评价的10大android pad  http://www.cnbeta.com/articles/131157.htm

型号
尺寸
分辨率
物理按键数量及位置

Advent Vega
10
1024×600
1个位于宽侧正中

Archos 70
7
800×480
4个位于窄侧右

Archos 101
10
1024×600
4个位于窄侧右

Asus Eee pad
10/12
不详
不详

Dell Streak
5
800×480
3个位于窄侧右

Elonex eTouch
10
1024×600
1个位于窄侧右

Notion Ink Adam
10
1024×600
不明

Samsung Galaxy Tab
7
1024×600
4个位于窄侧下

Toshiba Folio 100
10
1024×600
4个位于窄侧右

Viewsonic Viewpad 10
10
1024×600
3个位于窄侧右

另外众多国内品牌下的Android Pad 都在7寸到8寸,分辨率在800×480占绝大多数。物理按键各有不同。

目前Android Pad的特征如下:

目前多数Android Pad 都运行的是用于手机的系统版本。

尺寸
基本分为3个尺寸,5寸(dell streak),7寸(多),10寸(多)。

屏幕分辨率
800×480和1024×600的居多。

屏幕比例
16:10,17:10,都不是传统的4:3的比例,这和iPad比较大的区别。

物理按键数量和位置

    1. 类似iPad的单主屏键,位于窄侧的正中
    2. Android Pad的多按钮,位于窄侧靠上位置
    3. aigo Pad e700按钮分别放置在窄的两侧。

总的趋势:数量有1个的,3个的,4个的,但绝大多数都放置在屏幕窄的一侧,很少把物理按键分散放置的。

屏幕默认方向
水平方向的居多,仅三星为代表的7寸屏默认竖直方向。

Android Pad的布局方案

注意:以下的布局方案基于Android 1.5到2.2系统下,不一定适于Android3.0

  • Design for 宽屏
  • Design for 水平方向:视不同应用考虑不同的默认方向,宽屏的竖直方向难以让人接受。
  • Design for 双手持双手操作和单右手持右手操作

鉴于众多的宽屏终端,在信息布局上可以如下规划。

  • Status bar:作为信息通知和任务切换的意图对象在pad上是不可缺少的。
  • 双栏布局:左侧为应用一级导航,右侧为下级页面。
  • Page:包括page title,内容区,右侧更多功能操作。
  • Popup box:操作出现的弹出框在操作按钮的附近出现(图中popup box),信息弹出框底部是更多的功能操作区
  • Dialog box:在这个信息弹出框之上还可以弹出对话框,是一些功能和属性的判断与选择。
  • Toast:在对话框之上还可能出现toast样式的弱提示信息。

Android Pad 水平方向布局

Android Pad 竖直方向布局

以上是近期市面上流行的Android Pad,他们大多安装在1.6到2.2的系统上,而这样的系统被认为是Android在小屏幕上系统勉强用在大尺寸屏幕上。

对于大屏幕,Android 又在做什么呢?

Android的未来 Android 3.0 Honeycomb

将运行专门用于Pad的Android 系统3.0 这个系统的特征就是取消了物理按键,把主页,返回,菜单放置在屏幕上成为更灵活的意图对象。

装载Android 3.0 的MOTO XOOM

MOTO XOOM装载了Android 3.0 ,我们可以看到这个系统的特征就是取消了物理按键,把主页,返回,菜单放置在屏幕上成为更灵活的意图对象。这样的好处非常明显:

  1. 更多方向的随意支持,不再受按键的制约,Pad可以4个方向显示应用界面。
  2. 全局的主屏,菜单和返回按键可以根据应用属性更好的自定义位置,应用的展现方式更加灵活。
  3. 实现全触摸操作的界面,不再依赖物理按键。

3.0系统是全新的为大屏幕特别是平板电脑设计的操作系统。强调真实,全息的界面设计,是优雅的,聚焦内容的交互模式。它依然继承了Android完美的多任务,强大的通知机制,自定义的主屏,工具等,并把这些特性贯穿于栩栩如生的3D体验中,更深刻的交互。

和以往的系统相比,布局上的变化在于顶部和底部的bar。

  • 系统栏(System Bar),位于屏幕底部,对应全局状态和通知系统。类似之前版本顶部的状态栏,但增加了例如多任务切换的功能。
  • 操作栏(Action Bar):位于应用中屏幕的顶部,是该应用具体的操作功能。

3.0拥有更丰富的连接方式,USB, WIFI, 蓝牙。增加了更有效率的连接协议,这样就可以直接连接相机等设备同步媒体文件了。

3.0更新了一系列的标准应用,例如浏览器支持多个Tab;相机的圆弧型界面;联系人和邮件运用双栏设计。值得一提的是列表操作中,实现多选并拖拽的交互。

相机的圆弧型界面

联系人和邮件运用双栏设计

多选并拖拽的交互

更多关于3.0的资讯查看http://developer.android.com/sdk/android-3.0-highlights.html