iOS设计的未来?

编者语:被业界人士众说纷纷的iOS 7将在下个月的2013WWDC大会上推出,到那时可能将会有更多关于iOS 7的设计概念公布。而近来各种媒体对于苹果公司新帅首席设计师乔纳森·艾维(Jony Ive)将在iOS 7中放弃拟物设计,转而使用扁平设计的预测也不绝于耳,这意味着iOS 7将有一个翻天覆地的变化。我们来看看本文作者 Tim Green对此的前瞻见解吧.

“完全扁平化”、“像安卓”、“微软式”!⋯⋯等等

关于苹果将“扁”化用户界面风格的传闻已经越演越烈,所以我决定也和大家分享一些动态,当然不是所谓的“内部小道消息”,而是从目前排名较前的一些iOS应用来分析。

上图所显示的icon,都是最受欢迎、最广为人知或者在iOS平台屡获好评的应用程序——没有纹理以及特殊的光泽。是的,我们可以从包括Spotify, Path, Everonote在内的icon设计中看到扁平化的趋势,不过,大多数的icon还是采取了其他的处理方式,如Facebook, Google Drive, Dropbox, Flipboard, 尽管它们的设计中依然带有“顶部发光”的效果,但都可以发现微妙的梯度和曲线设计,以增强透视感和立体感。

在我看来,这些都表明着iOS的设计风格正朝着某一特定方向转变。我所说的并不是指“扁平化设计”本身,当然也不是特指Metro UI那样具有极强的引导性,而是一套更成熟的视觉指示标系统,能够更好地引导人们在点击它们的同时思考这些图标背后的想法。为什么这么说?因为,现在不再是2007年,人们对于各种媒介工具和使用过程非常了解,不需要华丽的手把手的指导说明,只需要简单的一个符号和颜色就可以让大家明白这是个什么样的app,简化人机互动。目前,Google 和Facebook已经将这种设计浪潮引入iOS应用平台,并且进一步进行了更美观、优雅的设计改进。

另外,目前越来越普遍的是运用一种类似“卡片式”的设计版式(cards pattern),通常都是以中性或者灰色为背景。这与后台切换显示内容的iOS标准有所不同。个人认为Pinterest已经开始往这个方向发展了,但是大部分的应用还是利用它作为呈现简洁信息内容的一种方式。(如上图, 还有Mailbox, Gmail等)

另一个不太常见的方式是垂直式的层叠卡片,你可以在Evernote和Google Chrome的设计中看到。不同的屏幕分层排列在Y轴上,这虽然有趣但体验并不是很好。所以,我并不认为会有更多的应用程序会使用这样的设计作为导航工具。

另一个趋势则是从应用中移除按钮框,只留下可以点击的icon。也许这被看成是模仿安卓系统,不过恰当点来说,需要一个按钮框使点击icon融入背景的想法有些过时了。这种做法渐渐在开发者中流行起来了,我不认为苹果会对现有的独特样式中做出大量的按钮移除,至少,不会很明显地强调这一点。

最近我发现许多应用已经开始被重新设计,比如Facebook和iOS原生音乐播放器,它们都删除了后退按钮(箭头形状的按键上面写着“后退”),取而代之的是一个简单的箭头icon。从中可以看出,在用户的操作中,我们可以使用更多的icon作为视觉提示,而非使用文字引导。目前的UI图像中也能看出这种趋势,通过他们就能够指导用户去完成下一步点击。

说了那么多,我决定选择“Messages”这个icon作为例子,对其进行重新设计。我认为有三个方面将会在iOS设计中做出明显的改进:光泽,条纹和艳丽的颜色。结合之前我提到的几点外,还做了一个简单的改变,将标签文本向下拉了点,并大胆的改成26像素的Helvetica Neue字体,使之清晰度更高,更流畅,可读性更强。同时,在色调方面,我认为目前普遍比较流行的柔和色调并不是苹果的作风,所以色彩处理依然会比较鲜亮,但至少会做一些调暗的处理。

原文作者:Tim Green

来源:The future of iOS designs?

编译: Mary.Ma@DamnDigital

(转载请注明来自:DamnDigital)

时间: 2024-10-26 04:48:48

iOS设计的未来?的相关文章

Tweetie之父布里切特:未来着眼iOS设计

洛伦-布里切特(腾讯科技配图)腾讯科技讯(乐学)北京时间12月6日消息,据国外媒体报道,在洛伦-布里切特(Loren Brichter)28岁时,他就已经在移动界面上大有作为了:在iPhone屏幕上用手指拖住屏幕往下一拽,你就能够更新你正在使用的应用程序的页面,这种拖曳刷新功能就是他开发出来的.现在,很多非常受欢迎的iOS应用程序都在使用它,包括Facebook和苹果自己的Mail应用程序.与此同时,他还开发出了针对应用程序的快速滚动技术.而且,在25岁的时候,他就已开始向Twitter销售Tw

动效设计富有未来科技感

  基于情景的消隐           小编推荐:动效设计让你的设计富有未来科技感 这是iOS上的Chrome,有着基于情景的消隐动效. 当向下滚动时,导航控件自动消隐.用户向上滚动时,导航控件出现.优设哥发现这一点上,腾讯网的新闻详情页已经采用了.案例围观地址(上下滚动鼠标滑轮,注意页面顶部导航的变化):http://news.qq.com/a/20131104/001730.htm .这种方法既能提高浏览体验.也拓展了有限的浏览空间.这对于空间限制较大的移动设备来说,尤为重要. 用户会快速扫

Web设计的未来在哪里?

与过去相比,一切似乎都在超速发展.我们正在目睹世界的瞬息发展,正利用像Google和维基百科这些前所未有方式来获取信息.所有情况让我们不禁自问,网页设计的未来将走向何方? 虽然预知未来并非易事,但是我们可以给出一些大致的意见,并且预测事情发展的走向.就目前设计界的演变趋势来看,我们开始看到未来道路的光明前景和新创意的涌现.我们这些设计者中谁紧随这些趋势,谁就能脱颖而出,并且成为科技新时代的霸主. 用户体验的增长 随着社交媒体一代的增长,我们正看到比过去多得多的网络用户.从前的网页都是静态页面,以

为移动设备做设计:为未来的网页做设计

文章描述:为未来的网页做设计(为移动设备一致体验做设计). 原文designing for the future web: http://www.smashingmagazine.com/2011/03/29/designing-for-the-future-web/ Introduction 灰常好的一篇文章!这里只了提些主干出来,强烈推荐原文,尤其技术方面的很多tips有深入的讲解. 本文推崇的是"因为现代人越来越生活net依存状态,ipad,3g等等,各种情况下人时时刻刻都在online状

HTML5是如何成为网页设计的未来的

  @陈子木 移动设备的大规模普及应用使得个人用户和企业用户对移动设备的依赖性逐步提高,这也使得相关的科技企业和开发者在近年不断强化B2B和B2C领域的技术支持.不仅仅是移动操作系统的前赴后继,移动设备也呈现出爆发式增长,这一切都必须归功于用户在渐渐远离桌面,拥抱移动互联网的趋势. 如果你正在寻找介入移动互联网的解决方案,那么HTML5可能就是你的菜.一次编写,到处运行的编程平台不仅仅是程序员和开发者梦寐以求的利器,同样也是混迹互联网的企业和个人都不容错过的有力武器.因此,HTML5值得你拥有.

Web设计的未来:网页响应式设计路在何方?

作者Tom Ewer认为在多数情况下,网页并非需要响应式设计.虽然移动设备将成为未来上网的主要渠道,但并不是所有网站都应该使用像是设计,也许分类进行选择.在文中列举5点证明响应式设计的弊端或是差强人意的方面,并形容其有一个"免费通行证",总是避过批评和建议. Facebook设计总监KateAronowitz:"我们开发产品首先考虑移动端,其次是桌面端." Adobe CTO Kevin Lynch:"移动设计转型甚至超过PC革命." 2014年

浅谈交互设计的未来之服务设计

  做交互设计也有好几个年头了,最近一直在思考一个问题,我们这些俗称线框仔的交互设计师,如何保持自己的竞争力,我们的未来会是怎样的? 在互联网公司里担任交互设计师,往往只是一个项目里的螺丝钉,工作内容不外乎分析需求.分析用户.画线框图.做原型demo,在web时代如此,在移动互联时代亦是如此,我们往往只是着眼于屏幕上的信息与用户进行交互,从而容易陷入一个怪圈:交互设计师就是捣鼓UI,做屏幕上的人机交互的东西. 我也曾一度陷入这种想法,但跳出来看后,才惊觉交互其实应该有更广泛的范畴,它是关于我们身

PHOTOSHOP中改进IOS设计流程的诀窍

在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法.许多的技巧适用于一般的UI设计.注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键. 1.保持尺寸为偶数 你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧?为了在标准分辨率下像素仍然保持完美的呈现,你需要保证大小和距离为偶数.具体的做法便是:基于2ps的网格设计.在编辑(Edit)〉首选项(Preference)〉参考线.网格和切片(Cuides,

详解PS进行IOS设计流程的诀窍

在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法.许多的技巧适用于一般的UI设计.注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键. 1.保持尺寸为偶数 你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧?为了在标准分辨率下像素仍然保持完美的呈现,你需要保证大小和距离为偶数.具体的做法便是:基于2ps的网格设计.在编辑(Edit)〉首选项(Preference)〉参考线.网格和切片 (Cuides