Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Interface Design
Design

手机UI:如何重新设计这款叫 Spendmeter的 iPhone App(第一部分)

by
Difficulty:IntermediateLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Yushine (you can also view the original English article)

本系列教程将展示所有用Photoshop来重新设计一款iPhone 应用程序的必要的步骤。 你将学习到许多当创造突出的应用程序界面时需要的独特的设计思维和设计模式。 This tutorial is presented in two parts in collaboration with Mobiletuts+, where you will be able to find an increasing amount of mobile design related tutorials in the future. 阅读这个系列的第二个部分


这款叫Spendometer 的应用程序

欢迎俩到我们系列教程的第一部分,重新设计iPhone 应用程序 Spendometer! 这个一个非常小的app,允许你坚持一个预算。 从Apple网站下载,这是Sendometer:

如果你想坚持一个预算,记录你花费的一切是个好主意,但把一切都写在一个笔记本上是麻烦的工作。 Moneybasics Spendometer 是一个可以使每天的预算变得简单而实用的app。 Spendometer 能够让你建立自己的预算,记录你的开支,并使你能浏览你的消费记录,在一个星期或一个月,甚至过去所有的消费多少。 它有一个功能可以帮助你保持记录夜里出去玩的开支。

每次你买了东西,简单的输入到手机里的Spendometer上,它回为你保持记录。 你可以建立你自己的消费限制,选择你的消费报告——周或月。

Moneybasics Spendometer 为你提供必要的工具来确保你的财务状况。

它真是一个可爱的小app,很好地实现了它的功能,但是说实话,从设计的角度看,它只做了一点点在TLC(薄层色谱)方面。 下面你将看到的应用程序的图标,和几个应用程序的屏幕截图。 截图使用的是iPhone 4 -正如你所看到的,一些区域是像素化,也就是说,他们还没有用高分辨率的图形来更新他们的应用程序。


图标设计


启动屏幕


Spendometer 屏幕


报告屏幕


报告屏幕


设置屏幕


设置预算屏幕


在我们开始之前看一些阅读材料

在我们继续这篇教程之前了解一点关于iPhone的设计是明智的。 理想的情况是,你应该阅读iPhone人机界面指南从苹果的官方网站开发人员网站


教程

与所有主要的设计一样,你应该做的第一件事就是得到一个你想要的粗略的设计。 最好的方式当然是画草图。 对于大型应用程序而言,许多 UI 设计师将画出一页又一页的想法,注释和头脑风暴——我们已经为应用程序结构重新设计,我们可以沿着它快速前进。

下面是几个我放在一起的草图——这些都是非常粗糙,和一般的线框图,它们是我脑海里的想法,我希望做类似的设计。 颜色和风格可以等我们稍后到达的阶段。

我脑子里的图像是一个使用非常简单,圆滑,现代和特征显著的界面。 一些让人们会“wow”的东西。 我也希望它是非常小的,这个应用程序非常简单,因此设计也会很小。 不需要一些冗余的杂乱。

记住,你不需要逐字逐句跟随本教程,尝试不同的东西,并在技术之后运用自己的创造力。 我们很希望看到你的反馈,所以请在评论区分享你的进步。

我们开始前一件事:我是写这个教程的同时设计,而不是在完成设计之后。 我认为展现创造流程比一个设计更重要。 大多数教程之后写的是已经完成的设计,因此你不会看到设计师的错误,或花了多少尝试来得到一些正确的东西。 每一个设计师这样做,就像任何其他的工作——人们犯错,从错误中学习和提高。 所以,如果你看到当你阅读这篇教程时你可能要回归自己,那是因为我决定的东西需要改变啦! 让我们开始吧!


步骤1

第一步是打开你的文档。 我们将为 iPhone 4 的新的高清显示屏做设计,这意味着现在的设计比先前用iPhone 3GS的设计有更高的分辨率。

打开 Photoshop,前往文件 > 新...命名你的新建文档使它更匹配,比如“Spendometer 重新设计”。 输入你的维度(在 Photoshop 中没有为新的显示做预先设置)iPhone 4超高清屏,我们将使用640*960 px,分辨率326 ppi(每英寸像素),这是新标准。 你可以看到我的设置,如下。

我们的下一步是在一些虚拟形状的状态栏(电话信息和时间的状态栏),导航栏(状态栏下栏)和工具栏(在屏幕底部的状态栏)

最好的方式是插入一个预先存好的这个app的屏幕截图,通过前往文件>放置

你可以使用矩形选框工具来选择你设计的不同区域并用固定形状代替。 现在,我将使用空白。 在新图层上填补,将图层重命名为匹配的名字,如“导航栏”和“工具栏”。 我们会创建基本形状,并添加颜色和细节。 你也可以删除我们粘贴的大多数屏幕截图——唯一一点是我会保持状态栏,如下所示。

我们现在有一个空白的iPhone画布,准备开始设计。 接下来我们要做的是在我们的图层窗口创建一些新的文件夹。 我们需要几个文件夹为了一些不同的屏幕。

  1. 启动屏幕
  2. Spendometer 屏幕
  3. 记录屏幕
  4. 报告屏幕
  5. 设置屏幕
  6. 设置预算屏幕

应用程序本身确实有比这更多的屏幕,但我觉得很多人不需要,所以我们将会大幅减少,填充更多的内容到相同的屏幕。 我们也会错过几个屏幕,大都会复制其他屏幕——唯一的区别是标题!

在图层窗口创建新的文件夹,为每个列表里的屏幕。 你可以通过点击图层窗口上的小文件夹来做。 我们不需要把所有东西都放进这些文件夹。


步骤2

我想用一个小的纹理来综合圆滑和现代的设计。 选择的纹理材质是木头,这个纹理非常精确(价值 2-4美元) 一旦你已经下载了一些纹理,去吧,将它们放入你的文档通过文件>地方....调整你的纹理规模让它很好地符合你的UI设计,并合并到你的背景图层。

我们将纹理提亮一点,我们不想让它如此显著。 为你的木质纹理背景创建一个新图层,用油漆桶工具填充上白色。 降低图层的不透明度到35%,并添加白色洗涤你的背景,然后合并下来按Cmd + E(Ctrl + E)来组合用于洗涤我们的背景。


步骤3

我们也要用木头的纹理来做我们导航栏和工具栏。 从来自GraphicRiver的同一个包装 ,选择另一个纹理,并把它放到你的文档。 调整大小并将它覆盖到你的导航栏。

一旦你对放置的位置满意,点击你的导航栏图层缩略图同时按住cmd键来选择图层的内容。 双击进入你的新的木质纹理图层,并前往 编辑 > 复制 来复制你的选项。 删除这个纹理图层,然后粘贴你的选项到一个新的图层。

现在是时候对我们的导航栏添加一些样式。 右击你的新的导航栏图层,选择混合命令来打开图层样式窗口。 我们想要添加一些简单的风格给我们的导航栏,来显著增加我们的导航栏的外观。

首先,让我们添加一个投影。 我使用了一个90度的角,不透明度为25%——所有其他选项设置为默认值。

给我们导航栏一些深度,我们要应用一个斜面和浮雕风格。 这种风格由于滥用而名声很差,但实际上它是一个非常强大的工具,可以节省你很多时间。 应用一个光滑的内斜层,使用100%的深度,大小为196 px 和柔滑水平 16 px 。 减少强调模式透明度为20%,和影子模式不透明度到55%。

通过应用这两个简单的风格,留下的东西看起来很漂亮!

放大你的导航栏,添加一个1 px的条状在底部,增加对细节层的关注。 为你的导航栏创建一个新图层,然后使用单行选框工具来创建一个1 px 长宽的选项。 用白色填充你的选项。

改变图层混合模式为叠加,降低不透明度到70%来产生以下结果、

现在我们的导航栏完成了——稍后我们将回来创造我们的标题字体风格。


步骤4

我决定做另一个木制工具栏在app的底部,显得太“大量的木头”,所以我们将把底部变深一点,把我们的导航图标放在这里代替。

选择你的工具栏图层的内容,然后选择橡皮擦工具。 选择一个柔软的橡皮擦在100 px,同时按住 shift 键,删除黑色工具栏的上部区域。 按住shift键的同时这样做,你将能够在一条直线消除内容,而不是全部控制并超过你可以擦掉的。

改变你的工具栏层混合模式为叠加,降低不透明度到60%。 这将给它看起来稍微烧焦的外观,给我们一个好的背景来准备好放置图标(一旦我们设计)。 现在是时候放置我们的导航栏和工具栏图层到他们的各自独立的图层文件夹了。


步骤5

现在我们开始继续向前。 现在我们要为我们的启动屏幕设计,这将在应用程序中最简单的屏幕,因为它将不包括任何导航或工具栏。 隐藏导航栏和工具栏层文件夹,创建新的(透明)图层在你启动屏幕文件夹,称之为“阴影”。

用黑暗的纯色填充你的新图层(我用# 333333)使用油漆桶工具。 选择你的状态栏图层的内容,然后点击你的新的启动屏幕图层,点击删除键来删除一个小面积的灰色图层来显示状态栏。

原地复制你的图层,这样你就有两个一样的形状。 在新的图层,前往 编辑 > 变化 > 自由变化 在你的新的形状/图层上转换盒。 同时按住 alt 和 shift 键,缩小你所选择(的形状)的规模。 按住 shift 键来保持形状的比例,按住 al t键会平均调整它的边缘。 为你的新尺寸的形状创建选区。

删除你的新形状(同时仍然留下选区),然后从你的原始图层删除这个选区。 你应该得到一些看起来像下面的截图的图像。

前往 滤镜>模糊>高斯模糊 并使用半径为 50 px 给你的阴影一个柔和而模糊的效果。

使用之前使用过的相同的技术,为状态栏创建选区,从我们的阴影图层删除删除任何重叠的阴影。

再次原地复制我们的阴影图层。 改变你的底部阴影图层混合模式为叠加,不透明度100% ,并改变你的阴影图层的混合模式为正常,不透明度到25%。

下一个阶段是创建我们的logo版式。 我们会让它看起来好像已经刻进了木头,通过使用少量的图层样式和技术。 抓取你的文字工具,并布局一些文本。 利用字体设置来对齐文本。

尝试一些不同的字体,直到你感觉看起来不错。 我决定使用 StencilHelvetica 的组合。

现在是时候让我们的文字看起来就像刻在我们的背景上了。 在整个应用程序设计中,我们将让我们的很多排版看起来像这样,特别是在导航栏的图标和标题。

这种效果需要大量的图层样式。 我们必须做的第一件事是改变我们的字体颜色。 使用吸管工具选择一个深色的背景,然后应用颜色给字体。

降低你的字体图层的不透明度到50%,然后打开文本图层的混合选项。 第一个风格我们将应用的是内阴影,使用如下设置:

下一个风格我们将使用的是一个非常微妙的投影,使用如下设置:

最后,我们将添加一个线条给我们的文本,使用如下设置(我使用的颜色使 #E6D0B3)。

改变你的文字图层的混合模型为线性加深。

我们将使我们的内阴影稍微强烈/粗一点。 原地复制你的文字图层,并改变混合模式为饱和度,使它接近透明,但是允许任何图层样式仍然能显现。 打开图层样式窗口,完全消除投影和线条样式。 点击你的内阴影选项卡,更改设置,类似于下面你可以看到的。

再次重复同样的步骤,这次使用以下设置:

如你所见,我们将应用更多阴影给我们的字体,由于简单地改变混合模式的饱和度,而不影响实际的颜色效果。 首先给每个边缘都添加的一个额外阴影,是一个软阴影,而第二个额外的阴影则应用一个强烈和锋利的阴影,用于字体的正面。

我们的启动屏幕看上去相当不错,它看上去甚至更好,一旦按规模缩小放置到高分辨率的高清屏幕上!


步骤6

我们的下一步是我们的 Spendometer屏幕,这是看过启动屏幕后将显现的第一屏。 使用我们刚刚在前面的步骤中使用的效果,设置字体和几个不错的图层样式应用于在导航栏中的 Spendometer  的标题。 这里最好是复制你的导航栏;给每个屏幕。 我设置文字图层为90%的不透明度,并应用一些纹理,使用下面的图层样式。 没有必要为这个字体创造额外的阴影,因为它非常小。

我所设计的顶部的导航栏看上去稍微暗一点,否则就是字体太亮。 为了解决这个问题,我要调亮导航栏。 最简单的方法是通过选择导航栏图层,然后前往 图像 > 调整 > 亮度/对比度。 把亮度上调到60,把对比度调到10.

将我们的导航栏中的1px的细条不透明度降低,让它更好地适应新的更亮的导航栏。 我将它下降到 40%。

为了让我们导航的标题文本的结构显示更清晰,我改变我们的字体的颜色,用更亮的选择,然后将图层的混合模式设置为正片叠底——记住这都是实验——所有混合模式反应(非常)差异化,取决于你的基础形状是什么颜色。

原地复制你的文本图层,并降低不透明度到40%。 这是让我们的文字有点暗,恢复回之前的样子,但通过不降低不透明度,仍让我们展示更多的纹理。

你现在可以复制和粘贴你的导航标签图层文件夹到你的每个不同的屏幕文件夹,并编辑他们像编辑每个屏幕的标题,如下所示:

这是为现在所做的标题——我们可以稍后再访问它们。 你可能已经意识到,为移动设备设计有大量的操作是试验和错误。


步骤7

我们的下一步是建立一个白色背景,准备在上面放置更多的元素。 这意味着我们要覆盖我们的大部分木制背景,但是总体上看在白色和无纹理背景上的东西对眼睛来讲通常是更愉快的体验。

选择矩形选择工具,并选择尺寸为 600*700 px。 在你的画布上点击任意一个地方,通过箭头键使你的选区居中。 它应该很容易排列恰好20px 的距离在边缘和选区之间(左,上,右)。

在你的spendometer文件夹中创建一个新图层,叫它取个匹配的名字,如“白色背景”。 前往 选择 > 修饰 > 平滑,用 5 px 的半径来平滑你的形状 用白色填充。

选择椭圆选区工具,并拖拽出一个相同的选区。 位置在底部,如图所示,并点击删除键来删除这个小的白色背景的选区。

打开图层样式窗口。 我们将应用大量的效果在我们的白色背景上。 首先,我们将添加一个线条。 我使用如下设置,颜色为#6C4C24:

接下来我们要应用一个内阴影来为我们的背景添加一点深度。 我使用的设置如下所示:

最后一个图层样式我们要应用是一个投影,使用以下设置,使白色背景从整个应用程序背景中突出来:

降低整个白色背景层的不透明度到75%左右,允许小一点的木纹显现。 我们的最终结果(下图)给了我们一个很好的白色画板来放置我们的应用程序的元素,使它容易阅读也更漂亮。

我们要添加一个透明度低的,1 ps 的黑色线条给主要内容图层的底部。 原地复制你的白色背景图层,并调整整个的图层样式。 用黑色来填充形状,并使用鼠标控制键下移 1 px。 放置在你的原始白色背景图层的下方。 给你原来的白色背景图层创建选区,然后点击你的新的复制图层,点击删除键。 降低不透明度大约为40%。 你最后会得到类似如下的东西:


这是第一部分的结尾啦,大家!

这是本教程的第一部分。 建议你每次导出文件为一个高分辨率的jpeg图像,在你的iphone显示以确保它看起来不错。 这就是我的启动屏幕的显示方式(我们将在下一个教程中测试其他屏幕!):

教程的第二部分在Mobiletuts+,包括应用程序的其余部分的设计。 跳转去完成界面的创建吧!


更多Mobiletuts+ 设计内容:


想要为 Mobiletuts+ 写作吗?

我们正在积极寻找设计师为我们的社区贡献手机设计技能。 如果你对付费内容写作感兴趣,请今天就联系我们!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.