IPhone应用程序的用户界面设计

  • 所需知识:只有对细节和基本Photoshop敏锐的眼光
  • 要求:笔,纸,Photoshop(或任何可以输出.pngs的图形编辑器)
  • 项目时间:2-5个小时

您在iPhone UI设计中的第一个项目通常以两种方式之一出现。也许您的客户在为他们完成网站后委托您使用他们的iPhone应用程序。或者你可能有点厚颜无耻,并且提升了你的技能,因为这是一个你感兴趣的领域,你现在发现自己有一个应用程序来设计,想知道从哪里开始。无论哪种方式,iOS4设备的设计与网络完全不同,不应该通过简单地打开Photoshop来启动,尽管它可能很诱人。

  • 阅读我们所有的应用设计文章这里

你的口头禅应该是:保持简单。您将无法提供在网络上可能习惯的完全相同的体验,或者在单个应用程序中提供数百个复杂功能而不会使用户过载。与此和平相处,并根据需要删除功能。找出核心功能。人们会使用您的应用程序,最重要的是什么?

请记住,最好的应用程序会回答以下问题:

  • “我很无聊:我怎么能打发时间?”
  • “我在哪里?”
  • “我怎样才能让这项工作更轻松?”

01.意向陈述

我总是从所谓的“应用程序定义声明”(ADS)开始:一些句子描述了应用程序和目标受众的核心功能。它有意保持简短,应该在整个过程中回过头来遏制添加不必要的功能并使项目保持正轨,避免不可避免的范围蔓延,因为人们对未来的功能可能性过度兴奋。

Start with a couple of sentences that summarise your app's core functions, known as the Application Definition Statement

从几个句子开始,总结了应用程序的核心功能,称为应用程序定义语句

编写完ADS后,请确定最适合您应用的设计类型。有五种主要类型的应用程序:“严肃的工具”,“有趣的工具”,“严肃的娱乐”,“有趣的娱乐”和“实用”。每个都涉及自己独特的用户界面决策。

02.应用程序的类型

严肃的工具始终保持最小的调色板,并由数据而不是图形驱动。好的例子是Mail,Dropbox(见下面的中间)和Instapaper。如果您查看所有这些应用程序的UI,您将很快了解应如何呈现一个严肃的工具。

有趣的工具鼓励悠闲的生产力:他们希望您拿起应用程序并进行探索,但具有明确的目的。他们适度使用颜色和图形,并且在层次结构中总是相当简单。有趣的工具的好例子是交付(见左下方),Ocado应用程序和Where To?

有趣的娱乐有一个非常简单的伞 - 游戏。这些应用程序始终是图形丰富的应用程序,可以充分利用声音和视觉反馈。通过视觉反馈,我们意味着如果用户关闭了声音,则已经向UI支付了对细节的关注。例如,当你在飞行控制中登陆飞机时,你会得到一个“伟大”或“欢迎”的视觉反馈,让你意识到你正在正确地玩(见右下图)。

严肃的娱乐听起来有点像矛盾:我花了一段时间来解决这个问题。基本上,这些应用程序使用顶部和底部的标准控件,但他们持有的内容是自定义的,并且意味着娱乐性。其中最好的例子是Sky News应用程序(见右上图),现在是电影!和iTunes应用程序。

最后但并非最不重要的是我最喜欢的类别 - 实用程序应用程序。 Apple将这些称为应用程序的“快餐”,因为它们通常使用30秒或更短时间。通常单屏或堆叠起来就像一副卡片一样,它们设计起来非常有趣,因为它们总是图形丰富。实用程序应用程序的示例是Weather,Ego和Phases(见上文左侧)。

现在我们可以实际进入一些iPhone UI。让我们来做线框! (注意:在本文中,我将参考各种元素的像素大小。对于iPhone 4,您需要将这些数字精确加倍。)

03.线框图

你可以随心所欲地画线 - 纸,烟花,Photoshop - 但不要太详细:保持灰色和白色的阴影和块元素。不要生成详细的图标或任何可以引导客户远离签署功能的主要任务的图标;他们以后可以签署设计元素。

考虑一下用户需要用来从一个屏幕到另一个屏幕的手势,或刷新页面并在此阶段签署这些手势。您可能还需要记住是否要支持不同的横向模式,在这种情况下,您还需要对其进行线框化。为用户提供视觉丰富的横向模式可以为您的应用添加布朗尼点数。

Create your wireframe however you like: there's nothing wrong with good old-fashioned pen and paper

无论你喜欢如何创建你的线框:好的老式笔和纸都没有错

您还需要考虑触摸手势的空间,例如按钮。 iPhone上的最小命中尺寸为44 x 22px:任何小于此尺寸的用户都可能因误击按钮而感到沮丧。理想的指尖目标是舒适的44 x 44px。您还必须考虑用户需要触摸的任何内容之间的空间。元素之间建议的最小间距在12到22px之间。

如果您要向客户展示您的线框,请花时间制作全面的文档,在需要的地方进行注释,并强化您为了更好的应用而必须做出的任何设计或用户体验决策。通过简单地将您的想法写在纸上并简明扼要地解释细节,您将在整个过程中最大限度地减少客户的问题和疑问。不要试图将屏幕作为附件发送到电子邮件中:给出目的并在最真实的环境中显示它们。

我总是将我的屏幕嵌入到Keynote文档中,屏幕在左侧,屏幕在右侧。我从来没有嵌入全部质量的艺术品,因为我的手指烧得太多了。为了演示而略微缩小艺术作品的习惯是一个好习惯。

If you're presenting your wireframes to clients, produce comprehensive documents to put your design in context

如果您要向客户展示您的线框,请生成全面的文档以将您的设计置于上下文中

04.设计UI

您会注意到iPhone或iPad附带的应用程序质量最高,对细节的关注程度很高,而且它们令人赏心悦目。获得最佳图形评论的应用程序是那些效仿的应用程序。 iPhone和iPad非常接近您的视线水平,因此可以使最细微的纹理和渐变变得明显。平面,块颜色可以很好地工作,但只需添加渐变,纹理和真实感的提示可以将您的应用程序从优秀变为梦幻。

其他可以使应用程序美观的元素是文本高亮,触觉背景,微妙阴影,高光泽饰面和清洁,清晰,自定义图标在您的应用程序(当然,所有使用节俭和适当)。

研究你最喜欢的应用程序的用户界面将帮助你看到这些小细节,但最好的应用程序总是那些获得用户界面和用户体验正确的应用程序,如Twitter的iPhone应用程序(以前的Tweetie)。 “拉动刷新”已成为许多应用程序的标准手势,并配有漂亮的用户界面:难怪它已经成为Twitter iPhone用户的最爱。

在设计时,请保持文档的整洁。如果您在Photoshop中工作,请确保明智地对图层进行分组和命名。虽然Photoshop是业界的最爱,但您可以在任何可以导出PNG文件的程序中工作,因为这是用于开发的内容。

在流程结束时将Photoshop文档移交给开发人员是正常的:与Web不同,这并不令人不悦。总是值得问您的开发人员是否希望您将UI预先切片为PNG文件。

05.图标

Protoype icons on paper: it's easy to let your ideas flow

纸上的原型图标:很容易让您的想法流动

我认为你的图标是你要设计的最重要的事情之一:它将是某人在App Store上与你的应用程序的第一次联系。从纸面开始:它是消耗性的,易于让您的想法在不做任何事情的情况下流动。一旦你拥有了一些你觉得你可以在计算机上进一步发展的东西,那就前进吧。最佳图标始终描绘单个定义的轮廓,并讲述您的应用所代表的内容。

Spotlight icons are seen on the search screen of the iPhone

在iPhone的搜索屏幕上可以看到聚光灯图标

尝试将文本从图标中删除:它很少有效,并且几乎没有必要,因为您的应用程序名称无论如何都会显示在图标下方。

聚光灯图标经常被遗忘。它们是29 x 29px,边界半径为5px。这些可以在iPhone的搜索屏幕上看到(见左图)。

您的标准iPhone图标为57 x 57px,边框半径为10px,iPad图标为72 x 72px,边框半径为12px。

不要忘记App Store的图标,它们是超大尺寸的512 x 512px,但通常适用于App Store的175 x 175px。

06.审批程序

Apple的审批流程有时可能会让您陷入蜿蜒的道路,让您不知不觉为什么您的应用程序遭到拒绝以及类似的应用程序已经通过。虽然获得批准没有圣杯,但你可以采取一些措施来最大限度地提高你的机会。

如果可能,纯粹使用SDK。一些“差距”方法使用Apple并不总是喜欢的JavaScript形式。纯粹使用SDK,再加上Cocoa和Objective C,你就会知道你的后端代码永远不会成为问题。

Apple不喜欢的其他东西是使用它的图标或图像。我曾犯过这个错误。我使用了我认为的通用播客图标,但它实际上属于Apple,他们不希望您在任何应用中使用它。出于同样的原因,请勿使用任何Apple商标,例如iPod或“i”品牌的任何其他衍生产品。

苹果也不太热衷于使用互联网上的流行股票图标。我之前看到应用程序因为这个原因而遭到拒绝,开发人员被要求将它们换成“更自定义的东西”。

07.了解你的工作量

曾几何时,很容易估计iPhone的设计工作量。如今,由于必须为Retina显示器生产另一套艺术品,因此设计这个平台可能非常耗时。如果您正在为iPad版本的应用程序进行设计,那么这是第三套需要完成的艺术作品。

在一个普通的应用程序(我的意思是不是游戏,因为这是最耗时的
从图形上看,我通常每天可以完成两个屏幕;但从不按屏幕收费。如果你已经正确地完成了你的用户体验和线框图,那么你应该将屏幕数量浓缩成一个漂亮,可用的数字,这样如果你为每个屏幕充电,你就会自己开枪。

When wireframing don't produce detailed icons or anything that could steer your client away from signing off the functionality

当线框图不会产生详细的图标或任何可以引导客户远离签署功能的东西时

考虑到所有这些不同的格式,最好从您需要生成的最大,最高分辨率的图稿开始,因为您可能会发现在处理过程中可以轻松缩小某些元素。但是,放大不应该是一个选项,因为你只能拉伸那里的像素,这将导致模糊,业余般的混乱。

最后,当开发人员通过在文件名末尾添加@ 2x将图像添加到应用程序包时,将自动使用iPhone 4 Retina显示图稿。例如,如果您有徽标,则需要两个文件徽标。 png和logo@2x.png,@ 2x描绘适合iPhone 4的艺术品。

如果您在应用程序中生成自定义图标,则应养成以矢量格式生成它们的习惯,因为这些可以在所有屏幕尺寸中使用,并且只需添加到Photoshop文档中。

08.结束

遵循这些指导方针应该可以帮助您完成第一个iPhone应用程序。最重要的是,保持您的解决方案简单,优雅和干净。花时间在一开始就制定出最好的设计路线,你就会走向成功之路。

喜欢这个?阅读这些!



翻译字数超限