当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

App设计实践案例-Gmail的APP界面设计的经验心得【第一课】

      在一次检查电子邮件的行为的简单的变成了我苦差事,谷歌实施的Gmail iOS应用了最新的设计到Gmail的Web应用程序。它看起来相当的距离,但是当你真正开始使用它,你会发现,除了一些小的延误已经得到了一个基本问题 – 内容无法读取。

该设计是不能说是最好的。我想利用这个机会来传达一些设计经验,并完成一个小小的重构设计,采用了这些设计经验技巧和设计干货分享给大家。

第1课:提供足够的对比度

对于一个应用程序,其主要目的是为了让用户读取和写入的对比是首要的设计原则应遵循。但是,这正是Gmail中无法做到。贾森·康威尔,首席设计师的Gmail,告诉

“我们花了很多时间与排版,使其手感轻盈,干净,而不是像一个负担。”

真的,他们把它太轻了,干净,这感觉就像一个负担。虽然有读和未读邮件之间充分对比没有因为Helvetica Neue字体的更轻的重量和灰色它们设置英寸因此打火机色调的已读邮件和背景之间的对比度不够,他们太轻薄是可读的。你可以尝试一下:在一个舒适的水平设置你的手机的亮度;将手机在大约12英寸(30厘米)从你的眼睛和尝试读取收件箱中的屏幕读取消息。明白我的意思?

投胎 - 收件箱 - 原

没有谷歌为什么要设计它呢?

康韦尔的话听起来像一个直接的答案:

如果我们只是设计[的Gmail]看起来像苹果的应用程序,我们已经有点失败。我们希望它有一些个性那是它自己的。

但是,有可能是这背后一个更合理的理由 – 他们可能已经想到了,一旦你读你不回去给他们,经常使他们足够可读的消息。但是,如果你做了什么?

你怎么能提高设计?

您可以让一切可读,仍然在一个以上的方式创造差异化对比读和未读邮件。你可以通过改变以下任何一种或所有产生的对比。

  • 字体大小
  • 字体粗细
  • textbrightness(亦称亮度)
  • 文字颜色

投胎对比

我增加了字体的大小和重量,黑暗的文本,并转移蓝色的未读消息的时间戳其发送者在此到达:

投胎 - 收件箱,重新设计

虽然我的眼睛重新设计看起来比原来的一些你最好也未必如此,它的外观是唯一的,因为它的工作原理一样重要。原来看上去好于可读性为代价而重新设计实现了两者之间的平衡。

投胎屏幕对比

投胎规格对比

 

信息屏幕也可以得到改善

从收件箱去你又遇到了小文的讯息画面。这不是为不可读如收件箱中的光的文字,但提高它会使阅读更加舒适。

投胎消息,原

虽然这次只是单纯改变大小就足够了,有一件事你可以做的更好了 – 使它更加微乎其微。白色的消息层上面漂浮的灰色背景,完整的阴影,形成于两侧一个20像素的灰色边框。一个万无一失的方法,使你的用户界面最小的是消除这种多余的边框和阴影。这是古怪的Gmail应用程序,其对极简主义的亲和力,并没有选择这样做,也许它是康威尔提到的个性的一部​​分。

投胎消息屏原装利润

除了是一种风格的选择,消除了边界会增加保证金,这样可以让我们的眼睛从一个文本行的末尾顺畅地流动到下一行的开头。

有多少余量就足够了?

而在印刷设计余量通常运行大于移动设计这样一英寸就会留下很多未使用的空间两侧。因此,我们可以依据我们的另一个属性,装订线宽度决定。

在文本是奠定在列的任何布局的列之间的宽度,堪称装订线宽度,以提高可读性事宜。太近列看起来像一根数据线,太宽,他们看起来超脱,保持它等于或小于领先(连续两行文字之间的间距)看起来是对的多一点。其理由是,该栏之间的间距应大于行间的空间,使我们的眼睛不要困惑,那里的下一行开始。

投胎-排水沟宽度

背着它在移动设计中的文字是奠定在单个列,我们可以考虑利润率为装订线宽度,并按照其约定在设置它的大小。也就是说,页边距应至少等于领先。作为最低限度,至少应该比线之间的空白稍大。但在Gmail应用程序的有效保证金大小的一半,领导也低于空白。

重新设计的讯息画面

综合以上考虑,我重新设计了屏幕,增加了字体大小,相应的领导和保证金。保证金仍不足的领先,但它至少是大于行间空白的厚带。

投胎消息,重新设计

投胎消息屏幕对比

投胎消息规格对比

本文标题:App设计实践案例-Gmail的APP界面设计的经验心得【第一课】

本文地址:http://www.25xt.com/allcode/4301.html

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。