Seven's Pad

Just another Product Blog site

Posts Tagged ‘视觉

最新40个趣味创意的404错误页面

leave a comment »

Error pages are often neglected by designers because they are rarely seen, or at least that’s the plan. But we all know things happen. A visitor may incorrectly enter a url, or try to find something on your site that just isn’t there. These are times when the 404 page will receive a few visits, but visiting an error page isn’t necessarily part of a pleasant user experience. That’s why many designers these days are taking a little extra time and effort to get creative with the 404 page. Doing so helps ease frustration by the user and shows an attention to detail. In this post I’ve rounded up 40 Creative 404 Error Pages to Inspire You.

agens

errorpages02

Abduzeedo

errorpages05

Tobias Ahlin

errorpages06

Chris Jennings

errorpages07

Mark Dijkstra

errorpages08

futureofwebdesign.com

errorpages09

twurn

errorpages10

IAMWW

errorpages11

amyherndonphotography.com

errorpages12

designzillas.com

errorpages13

xhtml kitchen

errorpages14

Christopher Meeks

errorpages15

Drexler

errorpages16

Oroza

errorpages17

Sandand Starfish

errorpages18

Imaginaria Creative

errorpages19

The Little Cake Parlour

errorpages20

Carsonified

errorpages01

publicitweet

errorpages21

Salt of the Earth

errorpages22

Doorstep Dairy

errorpages23

At First Sigth

errorpages24

Joyent

errorpages25

dm11sto.com

errorpages26

Veerle

errorpages27

tix02

errorpages28

Fuelly

errorpages29

getdropbox.com

errorpages30

cssremix

errorpages03

Huwshimi

errorpages04

turbomilk

errorpages31

theesthetik.com

errorpages32

Pixel Thread

errorpages33

hdqt.co.uk

errorpages34

Product Planner

errorpages35

chrisglass.com

errorpages36

gadies.com

errorpages37

Sofa

errorpages38

Project Fedena

errorpages39

David Hellmann

errorpages40

About the Author

Gisele MullerGisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

Related Posts

Here’s some other articles that you will definitely find useful.

55 Examples of Beautifully Integrated Social Media Links in Web Design

48 Examples of Excellent Layout in Web Design

34 Inspiring iPad Application Websites

60 Excellent Examples of Illustration in Web Design

50 Red Web Designs to Inspire You

Want more from WDL?

How about 10 Premium WordPress themes with support, plus a whole lot more!

来源:http://webdesignledger.com/inspiration/40-creative-404-error-pages-to-inspire-you

Advertisements

Written by sevenpad

07/01/2010 at 1:19 下午

发表在 产品相关

Tagged with ,

品牌的统一体验

leave a comment »

第一次写这类文章,有点儿紧张有点儿新奇有点儿痛苦,来CDC实习2个月啦,每天除了工作就是体验体验再体验,因为之前做了一些有关规范的工作,突然有想法迸发出来,就在这儿与大家分享,欢迎拍砖^^
我们先来看一些图片……

看完这3张图,你是否已经想到法国、澳大利亚?

再来看一些图片

是不是能想到巴西、中国和日本?

为什么我们能想到这些呢,因为它们体现了事物的特色和文化。

我们再来看些更具体的产品

假设用户不知道这些企业,但不难感觉到第一组是一个妈生的,第二组是一伙儿的。尽管外形也不同,但却有相似的风格和特色,让用户在使用时心里清楚,“哦,我使用的一直是他们的产品”。这样久而久之,用户就会习惯于使用一家公司的产品,用户的忠诚度也会在一定程度上增强。

我想,形成源源不断而又稳定的用户群对企业来说是至关重要的。

一个好的设计不是总在改变总在玩花样,而是以不变应万变,在不变中求创新。毕竟我们的用户都有习惯,在提升用户体验的同时也要尊重用户的习惯。谁都不愿意总去适应新的东西。我身边就有不少朋友喜欢使用A产品,同时也喜欢B产品,但却不知道其实A和B原来都是C公司旗下的产品,这无形中对C公司旗下其他产品的传达就会造成一定的影响。

某个程度上来说,品牌价值甚至等同于企业价值。当有一天我们无意间看到某个logo、用某个产品,不用想就知道,哦!这是腾讯的,这是百度的,这是阿里巴巴的时候,也就意味着我们在用户心中形成了品牌认同感,企业价值得到了提升;不过这固然是在产品非常好用的前提下,因为人们使用产品的体验会影响他们对品牌的认知。但是目前行业存在的普遍问题不是为了追随业界领跑者的步伐导致设计越来越趋同,就是为了创新而盲目的标新立异。当产品越来越多,信息越来越泛滥时,拥有自己独特的特色和表达才会最令人印象深刻。

另外,我们经常习惯于“迷信专家相信权威”,当我们喜欢上了苹果,就常常一同爱上ipod、nano、ipad。当用户容易辨认我们有哪些产品,品牌影响力更强烈的时候,我们的产品也就更容易被用户所信赖。企业的基础目标之一就是品牌识别, 广义的品牌识别不仅仅是logo的颜色字体等,还可以是概念系统,或者固有流程,在用户与产品交互的同时,企业的品牌形象就在用户心中形成了。

除此之外,将通用的设计规范化对于快速更新的互联网产品来说也是非常重要的,一些很成熟的东西我们只要反复去调用即可,而不是花时间再去设计它。这在提升品牌认同感的效果上也显而易见,当用户使用了十个千差万别的产品,都用到同一个界面同一个步骤或者同一个控件时,用户就会知道自己使用的同一家公司的产品了,在使用过程中也不用额外去思考和学习,这就极大地方便了用户。

最后举两个最具品牌识别的典范,当然都是有自己统一的设计风格和特色。

可以看到,无论是单品还是将单品组合成的房间,你都知道这是IKEA的。

不花俏用户体验第一的苹果文化值得很多企业学习。

当我们与用户产生共鸣,与竞争者形成差异,那我们的产品一定能够脱颖而出,获得更多的用户与更高的忠诚度。

参考文献:

baike.baidu.com/view/671549.html?wtp=tt 百度百科——品牌识别
马特·马图斯,《设计趋势之上》,山东画报出版社,2009.10
(美)摩霍兹(Merholz,p),《应需而变——设计的力量》,机械工业出版社,2009.05

本文出自Tencent CDC Blog

Written by sevenpad

06/14/2010 at 5:57 下午

发表在 产品相关

Tagged with , ,

sns视觉设计分享

leave a comment »

时常和sns相关工作的同事们一起讨论社区类网站的风格设定,logo的设计,排版等等问题,这里就工作中的实践经验和大家做分享,还有很多不足之处期望和大家共同努力。
关于视觉风格定位:

当时市面上已经有着一大批以不同明度,纯度的蓝色为主色调的sns产品

所以要让用户在众多同类产品一眼中认出来,必须给你的产品创造产异化,又根据校友的用户定位我们为校友选择了绿色作为主色调。
青葱岁月、绿色给人轻松、积极、清新的感觉,而且又和同类产品造成了视觉上较高的识别性。
下图是对外发布的第一版的QQ 校友

校友至上线以来经过无数次小的迭代,下面是去年一次较大的改版:

改版中的过程稿:

关于logo设计:

之前我们也给出了多个方案以及适用环境的效果比照。大家会倾向于选择写实四叶草的方案。

在产品推出公测前,我们对logo作了一次用户调查,得到了一个比较满意的反馈。下面是用研的方法和报告:
方法:以用户访谈的形式给20名在校大三以上的本科生和研究生看logo的设计稿件(包括环境使用效果图)请各自说出自己对各方案logo的理解并给出自己的评分(10分制)

关于构架布局:

这类网站的信息量很大、在整体界面的搭建上要简洁便于信息的阅读。因此网站栅格的搭建和信息的编排布局很重要。

关于文字编排:

由于大量的信息内容,文字的排版很重要,这里举出一些编排上的细节给予参考(以feed为例)。

注意:这类网站会有很多的子级页面所以在模块的分栏等细节设计上要考虑周全便于全站的统一。

关于icon:

这类社区网站使用到icon的地方会比较多,但这类图标起的是一定范围内适度上的提醒,而不会过度打扰到用户。
因此这期间我们对icon做了次较大的优化,优化方向在颜色上更柔,造型上更平稳方正。

关于其他设计:

常常讲到这类网站的设计约束性,但设计师更要为产品挖掘亮点,为产品加分。

以上仅是个人的实践和经验总结,欢迎大家指出不足之处并提供更多宝贵建议。
希望这些分享对大家做sns方面的设计能有所帮助。

本文出自Tencent CDC Blog

Written by sevenpad

06/14/2010 at 5:51 下午

发表在 产品相关

Tagged with , ,

多按钮共存——don’t make me think

leave a comment »

多按钮共存——don't make me think

之前在一个web系统的设计中,和另一个设计师讨论,“保存”和“取消”按钮该怎么设计。我的观点是,保存是比取消更常用的按钮,也是用户的主要目的(用户不会为了取消来使用表单),所以在视觉上,保存按钮应该比取消按钮更醒目,这样更容易被用户先看到,从而提高用户的效率。
下图:Google analytics系统中,Apply以按钮的形式表现,cancel以链接形式表现

多按钮共存——don't make me think

后来碰巧看到Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。作者把“提交”、“保存”,“继续”这样的按钮定义为主要动作。因为它们是用户操作表单的主要目的,而“取消”、“重置”、“撤销”这样的按钮定义为次要动作,因为这些动作不是操作表单的主要目的,并且它们的点击效果是负面的。

作者一共设计了6种视觉形式,并通过眼动仪来测试哪种表现最好。结果有点出乎我的意料,视觉上不区分主要动作和次要动作的设计方案,用户完成表单的速度最快。但即便如此,作者仍然建议采用视觉提示更明显的方案:“按钮+链接”。

多按钮共存——don't make me think

想更进一步讨论下,为什么会有这个问题。按照don’t make me think的说法,在没有选择的情况下,用户更容易快速地做出决定。或者不应该说是决定,因为本来就不需要用户去判断。没有多余的按钮吸引注意力,也没有多余的按钮可以点,用户不假思索地就完成了操作。比如当“下一步”按钮独立出现时,用户往往点得很愉悦。

下图:独立出现的“下一步”

多按钮共存——don't make me think

但是当按钮成对或者多个出现时,问题就来了,用户必须看完所有的按钮文字,才能做出判断,这无疑是设计师不愿意看到的。所以会在按钮上做一些引导,客户端比较常见的做法就是把最常用的按钮或者主要操作的按钮设为焦点状态。

下图:opera浏览器退出时的弹出对话框,Exit被设为焦点按钮

多按钮共存——don't make me think

而网页端因为不存在按钮焦点状态,所以需要通过别的方法来实现同样的效果。常见的拉开视觉层次的几个手段有:

1.按钮的排序

Windows系统上主要操作都是放在左侧,用户的浏览顺序也是从左侧开始,所以左侧的按钮最容易先被用户看到。

2.按钮的大小

一般是指按钮的长短。可以通过加长文字,或者直接加长按钮的手段来拉开视觉层次。这样的按钮更容易先被用户的视线捕捉到。

下图:“上一页”按钮只有一个箭头,而“下一页”按钮为文字加箭头

多按钮共存——don't make me think

下图:“确定”按钮比“取消”按钮更长

多按钮共存——don't make me think

3.按钮的颜色质感

通过给按钮添加颜色或质感,以模仿客户端焦点按钮的表现。

下图:wordpress将“publish”按钮人为地设为高亮

多按钮共存——don't make me think

在Google analytics这样的web系统中,由于采用的是系统默认样式的按钮,所以它选择把次要操作以链接的形式展现,从而拉开视觉层次。这样的设计在“登录”,“注册”中也很常见。

下图:google帐号的登录

多按钮共存——don't make me think

最后再多说一句,表扬下opera的设计。Opera的弹出框,让像我这样的用户,只看按钮就能快速做出判断,而不用浏览对话框主体文字。如果我需要更快做出判断,只看焦点按钮就可以了。

相比之下,大多数软件的按钮上仅仅写着“确定”,“取消”;我必须阅读按钮之上的大段文字,才敢按下其中一个。不仅强迫我选择,还强迫我阅读…

下图:三个按钮上很清楚的写明了动作

多按钮共存——don't make me think

总结一下刚才所说:

1.如果可能,尽量只给用户一个按钮。
2.当需要呈现多个按钮,并且它们之间存在主要动作和次要动作的关系时,通过拉开视觉层次的方法给用户更好的引导。
3.按钮的文字应该引起设计师足够的重视,承担更重要的角色,帮助用户快速做出判断。

本文出自Tencent CDC Blog

Written by sevenpad

06/14/2010 at 5:20 下午

发表在 产品相关

Tagged with , ,

The Story of Mr.Gray — Web 交互设计“灰色”的8类应用

leave a comment »

在进行Web的交互设计中,颜色信息的传达也是不可或缺的一部分。我们常会发现许多“灰色”的应用,他们的出现总是不动声色而又恰如其分,维持了整个页面的平衡与统一。本文将从一些实际案例出发,阐述“灰色”在Web交互设计中的8类应用。
首先让Mr.Gray 来做个简单的自我介绍吧:

狭义的 Mr.Gray

狭义的Mr.Gray, 是指没有色相与纯度,只有明度,将黑色和白色混和而成的一种中间色。 依据不同分类方法可大体分为浅灰与深灰两种,亦可分为暖灰与冷灰。

相对来说,其特征为视认性不高,经久耐看,不因过份的鲜明而刺眼,中立而温和。


图例暖灰与冷灰

广义的 Mr.Gray

广义的Mr.Gray是指一切具有中性、温和、不鲜明的现象与事物。在下文中所指的Mr.Gray,均指的是广义的Mr.Gray。

如果把所有的颜色混在一起,会是什么颜色?其实Mr.Gray 并不孤独。

Mr.Gray是一位相当有魅力的绅士。阅历越深,就越能懂得他的价值。

Mr.Gray好比是形状中的圆角,可以调和一些矛盾,使得它们不再尖锐。

下面让我们来看看大家对Mr.Gray的印象吧:

Mr.Gray在Web 交互设计中的8类应用

Mr.Gray谦和内敛等特性决定了他在职业生涯中,大部分时间都在扮演辅助陪衬的角色。下文将以一些实际案例来进行详细说明。

1. 当前场景下禁用或不可操作

这类设计处理的好处是避免用户进行无效的操作,提高用户的使用效率,并且给予一定的信息暗示。下图中是一些禁用、不可操作或者没有权限的图例:

2. 暗示一定秩序下,即将发生的步骤、事物

此类设计可以让用户对即将进行的任务全局一目了然,较少而清晰的步骤不会给用户带来心理压力,相反会促进用户完成该项任务。如下图中的创建QQ群的步骤预示。

3. 弱提示,辅助信息(包括色彩信息)

这一类应用较为广泛,如大段辅助信息文字,一些提示信息,次要陪衬信息,不常用功能操作等,“灰色”处理会让页面和谐统一,并突出最主要的用户体验操作。如下图1中,浏览照片为最首要体验,上排对照片操作的工具栏则进行了“灰色”处理,mouseover时再变亮和丰富。

再如一些登录与搜索中的辅助说明与操作信息:

4. 表示未被激活的“隐藏”状态

在Web设计当中,常需要考虑当前态、未被激活态等样式。常见方式是灰色化处理未被激活态,在对比中使用鲜明的色彩告诉用户当前所处的位置或状态。

下图为igoogle联系人当前不在线时场景,使用了灰色icon来进行区分,这类设计在即时通信产品中较为普遍。

5. 次要可链接信息

深色下划线会给清爽的页面带来些许不和谐,“灰色”处理可以调和这种矛盾,既能准确传达所需表达的信息,又能使得页面整体和谐统一。

Apple在此的Web设计秉承了一贯的简洁风格,使用简单的一小段下划线,却传达出了丰富的信息。

6. 不鼓励用户进行的消极或危险操作

下图中Flickr的“封锁”操作点击后,会阻止该好友与你进行一切信息交换与互动,该操作的“灰色”处理恰好可以辅助表达出这层隐含的意思。

又如删除整条标签的icon。

存储与取消的操作,一个为亮色另一个进行“灰色”处理,这类应用在Web交互设计中应用十分普遍。

这类应用与禁用使用场景的一些区别,在于鼠标mouseover时,会有响应,如鼠标变手型,对象变色等。

7. 信息分隔

常见的有下图中的斑马线,虚线,色块等来区分不同信息区域。

斑马线

虚线分隔

浅色块区分标题与内容区

8. Mr.Gray的相对性

因为色彩具有明显的相对性,而某些Web设计为保持整体风格的一致,甚至会将主要导航“灰色”处理,然而,这些处理都是相对的,也同样可以做到主次分明。如下图中wordpress的主导航。虽然导航当前态文字为灰色,但依靠浅色背景,相对而言还是更为突出的。只要把握住Mr.Gray的相对性,对其使用便能更加自如了。

以上内容均为个人观点与总结,有疑问欢迎共同讨论和交流,若有不足之处还请不吝赐教。

本文出自Tencent CDC Blog

Written by sevenpad

06/14/2010 at 5:13 下午

发表在 管理相关

Tagged with ,

产品设计—浅析iPhone用户界面UI设计精粹

leave a comment »

作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里,我们认真地咀嚼《iPhone Human Interface Guidelines》,感悟字里行间透露着的苹果的细致与智慧。兴奋、激动之余,有太多的惊喜想与大家分享。但无论从时间上还是精力上,130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见,加上翻译过程的一点体会,整理出11条设计精粹。最后,希望这份130页浓缩而成的快餐不会让您觉得难吃,enjoy yourself!

1. 了解应用类型及各自特点

iPhone平台有三类型的应用:

● 效率型应用(Productivity Applications)

● 实用工具(Utility Applications)

● 沉浸型应用(Immersive Applications)

每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点,选择合适的应用类型可以更好地迎对。

效率型应用用于帮助完成日常的一些工作,如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成,连贯的动作要求界面简单直接,让用户可以全神贯注于任务本身。这类应用一般都附带自然的层级结构。所以,表格视图(table view)可以在这类软件里大派用场。

图1.1 附带层级结构的效率型应用

实用工具用于执行一项简单的任务(如计算器,天气报告),简单,容易配置就可以了。

图1.2 实用工具之“天气报告”和“深度睡眠”

沉浸型应用可以为用户带来极致的娱乐和游戏体验,这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同,用户希望这类应用能够给他们带来最大的娱乐,因此,界面设计的自由发挥度比较高,仿真的、可爱的设计风格往往能恰到好处。

图1.3 沉浸型应用

2. 熟悉系统布局和控件特点

iPhone 操作系统提供了非常出色的UI库,这些标准的控件和视图都得到了大量的研究才得以真正派上用场。另一方面,iPhone 用户已经对这些软件非常熟悉,不管是出于什么理由,如果没有更好更实用的创意,我们应该遵循iPhone的控件规范。至少,在我们打破iPhone的规则之前,“You must understand the rules before you can break them.”(你必须了解规则然后才能打破他们)。

iPhone 提供的UI组件从大到小,大致可列举如下(具体每种控件和视图的细节,请参考《iPhone 用户界面设计指南》第二部分):

● 导航条,标签条,工具条和状态条

● 弹出对话框、操作面板和模式视图

● 表格视图(Table Views), 文本视图(Text Views), web视图(Web Views)

● 应用程序控件(如文本框、分页显示器、轮转选择器、进度条、更多按钮等)

3.  使用隐喻

隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。

iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻,整个产品的外形:棕色的头部导航,米黄色的纸质背景,配合细致的行隔线和垂直的双细线,俨然就是一可爱的小小备忘本。将产品与实体对应起来,用户一看就知道软件的用途。

iPhone操作系统的隐喻不胜枚举,我们尚可尽量遵循,但如果有“更合适更贴切”的隐喻,你也可以放胆一试。

4.  一目了然,即看即点

用户在移动场景下不会长时间对着手机屏幕,他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”,不要以为用户有时间去研究怎样使用你的应用程序,这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁,一目了然,用户看到就能马上理解。一般有三种方式可以简化界面:

● 删减软件功能:功能越少,界面越简洁。移动产品的设计,减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律: 为移动场景下的大多数用户设计最常用的少数几个功能特点(Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context)。

● 减少输入:尽可能地减少输入,直接为用户提供选项。如索引列表,既方便用户记忆,也可以帮助用户快速扫描并直接选中;轮转选择器,划上划下即可选中,减少打字耗时的同时省去繁多的错误检测。

● 避免不必要的交互:用户也不是你想像中那么傻的,不要一味提醒他们如何操作(帮助越多说明你的软件越难用),设计时应该关注如何更有效地引导用户集中精力快速完成任务。

内置的短信发送实在是太经典了,写信人和收信人左右区分,信息内容通过时间顺序排列下来,整个信息来回历史一目了然。呼叫程序同样出色,重新设计的数字键盘弱化了字母排列,突出数字,由此换来宽大容易点击的屏幕空间。

图4.1 一目了然的短信历史查看和拨号呼叫

5. 考虑屏幕上下

不论单手操作还是两只手配合操作,屏幕上部分的可见性是最好的。所以,在设计应用程序时,应该将最常使用的的信息——一般是高度概括的信息,如导航,或者一些常规操作如添加、完成、保存、取消——置于屏幕顶端。

屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域,必须仔细考虑它们的排列设计。如图5.1,一般情况下,操作面板的取消按钮放在最后,这样可以鼓励用户阅读完所有的选项,暗蓝色的返回按钮可以和一般的按钮区分开来,即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作(如删除),将其放在面板的顶部是最好的,因为顶部更容易被看到,再加上红色的警告暗示,用户选择起来会更为慎重。

图5.1 操作面板上的按钮排列

6. 提供指尖大小的点击区域

如果按键布局过于拥挤,用户就要小心翼翼地花更多时间去操作,错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素,让用户更快更容易点击。

旧版内置计算器的按键是大号的,有效区域都为44*44px,非常容易点击。新版的计算器为了容下更多的按钮,按键大小做了一些调整,虽然高度上略有减小,但用户点击起来还算容易。对于经常使用的“=”号,整个目标区域都加大了,这种样式上的区分可以将主要操作和次要操作区分开来,以便更好地引导用户。

横屏的计算器完整模式可以容下更多的按键,按键大小相对竖屏的要小,尽管如此,用户点击起来还是得心应手。

图6.1 适合手指点击的计算器按键

7.  灵活运用手势支持

去到哪里,手指就跟到哪里,多种动作随时变换,直接感知与设备交互,如此自然直接的“输入”,如果能够灵活合适地运用,除了可以带来良好的用户体验,还能极大满足用户的控制欲望。

图7.1 手势操作:滚屏、长按、拖动、捏

当然,手指的一个最重要问题在于它比鼠标指针大得多,灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作(如复制、粘贴、选择文字)是手指很难完成的。设计上应该考虑由此带来的影响,避免滥用。如果你的应用支持比较复杂的手势(长按、捏),确保用户能够理解他们的含义,并且为这些手势操作提供直接的响应反馈。

8.  考虑横竖屏方向变化

iPhone游戏里出现横竖屏设计比较正常,都是视具体的游戏类型来分。但一般的效率型应用或实用工具,也是横竖屏都有。林子大了,什么鸟都有,有些用户就是喜欢经常将屏幕旋转过来,而且还不在少数。他们或是喜欢横屏的浏览方式(如备忘录、音乐),或是希望打横可以看到更多的信息(如计算器)。设计的时候必须充分考虑用户的期望。有时将界面内容旋转就可以简单满足他们的需求,但有时也需要你重新去设计以展示更多的内容(如横屏的音乐会出现一个新的界面,展示所有的歌曲)。

图8.1 iPhoneQQ 横屏输入

竖屏情况下,输入键盘宽度只有320px,平均每个按键宽只有32px(320/10,这里忽略键与键的间隔);横屏时每个按键宽可以达到48px,多了整整16px。如果是在小屏幕上输入,你更倾向那种方式?

如果你的应用程序界面只支持单一方向的展示,最好的做法就是保持界面固定,不随着设备方向改变而改变。例如,当用户选择去看一个iPod视频时,不管屏幕打横打竖,这段视频都是横向展示的。有了这个暗示,用户就会很自然地旋转屏幕到水平横向观看。翻转按钮也没有存在的必要了。

9. 合理的反馈

纵观所有的内置应用,反馈可谓无处不在。由于大部分的操作都是通过手势(其实还有抖动、语音输入方式)完成的,通过一些明显的变化来响应用户做出的操作,能够给予用户极大的信心。

图9.1 iPhone版 QQ斗地主的音量大小调整

进入QQ斗地主的游戏设置页面调整音量大小时,手指的大小盖住了滑块,为了将选中的信息反馈给用户,两边的扩音器图标同时使用了外发光样式。

iPhone 操作系统提供了许多自动反馈的机制。动画就是其中一种。不过切记一点,动画的目的在于提升用户体验,而不是成为盲目追求酷炫的焦点。

10. 优化启动过程

iPhone OS4.0以前的应用都属于单任务的,用户会经常在多个应用程序之间切换,一个电话来了,用户不得不退出正在进行的应用程序。要确保用户回来时启动足够快速,以减少用户的等待,而且,为了将影响降到最低,应尽可能保存上次关闭之前的操作结果。这似乎都是工程师的职责,但作为一个优秀的设计师,你还可以为此做很多的事情。

开启时第一屏显示一个背景图或者简短的loading动画。即使是普通的效率型应用或者简单的实用小工具,启动时如果能够预先显示一个背景图,背景图与程序启动后首界面平稳自然地过渡,这种方式既可以带给用户即时的反馈,也可以“缩短”用户等待的时间。

图 10.1 启动时的预加载背景

运行天气应用和iPhone QQ时,即使是很短的启动时间,预加载背景还是能够让人感觉启动等待的时间缩短了。

虽然iPhone OS4.0开始支持多任务,但不要天真地以为这种背景预加载的细节可以忽视了,应用程序应该一如既往地为用户提供这种流畅的体验,毕竟,用户启动的时候还是期望软件可以“快一点”。

启动时要切记一点:不要弹出一个说明性窗口,或一个刺眼的闪屏,或其它类似的启动体验(网络wifi提示这些是例外)。这种方式很突兀,让用户立即使用你的应用程序就好了。

11. 为应用程序设计图标

应用程序图标是指放在iPhone屏幕上用来启动程序的图标。iPhone的屏幕大小只有480*320px,在这狭小的屏幕里,用户希望放下尽可能多的图标,这些图标必须具有突出的视觉效果才能方便用户辨认。要做到这一点,可以从以下两方面着手:

● 美观:确保图标简单美观,富有吸引力,这样用户才愿意让这些图标长久占据有限的屏幕空间。

● 可识别特点:要让用户在大量图标中轻松找到该应用程序,图标必须要有自己的特点,对于关联的产品,可以结合品牌进行设计。

图11.1 “企鹅”图标,一看就知道是QQ产品

为了与内置图标保持协调一致,iPhone操作系统一般会自动给图标增加一些视觉效果:

● 圆角

● 阴影效果

● 反光效果

图11.2 未添加视觉效果的的普通图标

图11.3 iPhone操作系统自动添加效果后的图标

为了确保你的图标可以利用这些视觉效果,你应该遵照以下图标设计规范:

● 图片格式:PNG

● 大小:57X57像素,90°直角(如果图像不符合标准,iPhone系统将自动按比例调整)

● 不要有任何发亮或有光泽的部分

● 不使用alpha透明

最后,将图标文件命名为Icon.png,放在程序的资源包中即可。

注:需要的话,可以要求iPhone操作系统不添加反光效果,详情请阅读《iPhone 应用程序设计指南》。

(本文出自Tencent,转载时请注明出处)

Written by sevenpad

06/09/2010 at 1:10 上午

发表在 产品相关

Tagged with , , , ,

25个光影效果网站

leave a comment »

类似的网站推荐过不少了,但每次发现新的光影效果网站时,都还是会让人为之惊叹,欧美网站不仅注重实用性,而且越来越把更多美的东西生动地渗透到Web设计中来,给人印象深刻的视觉享受,下面就是25个注重使用光影效果的风格网站。

Color Charge

Color Charge

365 Days of Astronomy

365 Days of  
Astronomy

Pixelight Creative

Pixelight  
Creative

Nice Sketches

Nice Sketches

Cosmive

Cosmive

Oakes Design

Oakes Design

FMCommunication

FMCommunications

Vogue

Vogue

Drew Wilson

Drew Wilson

Ciplex

Ciplex

Razvan Pavel

Razvan Pavel

You and I Graphics

You and I  
Graphics

Sebcreation

Sebcreation

Michael Austin Productions

Michael 
Austin

Designed by Dave

Designed by  
Dave

Fernando Sergio

Fernando  
Sergio

James B

James B

OKB

OKB

Stuart Anderson

Stuart Anderson

Sugarrhyme

Sugarrhyme

Mozami

Mozami

Studio 7 Designs

Studio 7  
Design

UbicWay

UbicWay

Quilo

Quilo

Dreamwire

Dreamwire

via: 25 Websites with Lighting Effects

鸟人网http://zdd.me/pim

Written by sevenpad

06/09/2010 at 1:06 上午

发表在 产品相关

Tagged with ,