2009 年,买不起 Macbook 的我在 PC 上装上了黑苹果。在此之前,我用虚拟机体验了 Apple II 、Mac OS 8.1、Mac OS 9.2.2 、Mac OS X 10.6 ,在不断的折腾过程中,我开始对苹果、对GUI 的整个历史发生了兴趣。
此后,我在Jeff Johnson 的《认知与设计》当中,在 Steve Krug 的《Don’t Make Me Think》当中,在一本又一本和UI、交互、体验相关的经典书籍当中, 发现 Mac 系统的界面一直被作为范例来展示。
Mac 确实是优秀设计的典范,是 GUI 设计史当中绕不过去的最重要的操作系统家族。所以,视觉史系列文章的第一篇,我决定从 Mac 系统下手。
简单来说,我们泛指的 Mac 系统,通常是分为2个大的系列的。
1982 年随 Macintosh 发布的系统,一直到 1999年发布的 Mac OS 9 为第一个系列,一般被统称为「Classic Mac OS」。
而 2001 年之后所诞生的 Mac OS X 系列的操作系统,包括现在所说的 macOS ,则被视作为第二个系列的 Mac 系统,其中 X 是罗马数字 10 的意思。
苹果公司最初只有 Macintosh 电脑,系统并无名称,直到第5个大版本的时候,操作系统才拥有 Macintosh 这个名字。而 Mac OS 这一系统名称,则是在系统更新到第7个大版本的时候才被提出,而自此开始,Mac OS 的称谓正式出现。
而 macOS 则相当于是 Mac OS X 品牌的一次重启。它始于 10.12 Sierra 这一版本,并且为了和 iOS、tvOS、watchOS 这几个系统品牌保持一致,而从 Mac OS X 更名为 macOS。
在很长一段时间,国外很多老用户会将它简称为「OS8」、「OS9」,而在2001年之后直到今天,依然有很多人将它简称为「OSX」,这也是在了在讨论 Mac 系统这个前提下所用到的、带有版本的简略称谓。
注释:国内有不少人会将 Mac 称为「OS系统」,但是 OS 本就是 Operation System 的缩写,意为操作系统,Windows 是 OS,Linux 也是 OS,「OS系统」是一个错误且尴尬的表述。
如果不深究细节的话,Macintosh,MacOS,Mac OS X , macOS 这四个都简称为 Mac 系统。
Macintosh 并非最早的图形化界面,但却是真正推动图形化界面操作系统发展的里程碑。
Xerox Alto
对于图形化用户界面的起源,一个相对统一的共识是,它来源于施乐的帕罗奥托研究中心,而最早使用图形化界面的电脑,是当时正出于研发中的 Xerox Alto。在之前的文章当中,我曾经专门聊过最早图形化界面的诞生和设计细节:
他们是UI界面的创造者,是UI设计的开创者,他们同样要在「比稿」中前进,他们认真、实在、抠细节,这篇文章是关于他们,关于最初的UI界面的故事。
阅读文章 >>比尔盖茨曾经指责乔布斯从施乐这里「偷」走了图形化界面(GUI)的设计,实际上,为了换得机会去施乐的帕罗奥托研究中心去观摩学习研发中的Xerox Alto 和开发工具 Smalltalk,乔布斯是拿股权交换得来的。
这是 Xerox Alto 当时所采用的图形化界面。界面的确图形化了,只不过,从今天的视角来看,整体的界面逻辑并不清晰。
而在GUI的设计细节、实现方式上,Macintosh 则截然不同,可以说是后来居上。
说回 Mac。
回溯到 1979年,Jef Raskin 是Macintosh 电脑和操作系统项目的发起者和监督者,他想用自己最喜欢的一种苹果(McIntosh)来给这个操作系统命名。
这种名为 McIntosh 的苹果不仅被誉为加拿大国家级苹果,但是更重要的原因在于,当时纽约还有一家名为 McIntosh Laboratory 并且提供高端定制音响服务的公司,为了避免商业品牌上的冲突,Raskin 将系统的名称改为 Macintosh,故意错开了一个字母。当然随后 Macintosh 的名字逐渐超过了前者,在世界范围内,甚至慢慢超过了加拿大最著名的水果。
当然,1984年,最初版本的 Macintosh 系统随着同名的苹果电脑的发布而面向大众,这个并非最早的图形化界面操作系统开始了它的历程,如今它是最著名、最具有影响力的图形化界面的操作系统之一。
Macintosh 电脑的主板由 Burrell Smith 所设计,结合当时的硬件技术,让最终上市的 Macintosh 电脑拥有了一块分辨率为 512×342 的单色显示屏。
在这块寸土寸金的单色屏幕上,Macintosh 系统需要将图形化界面的价值尽可能发挥出来。
Macintosh 电脑开始出现在各大杂志媒体上,蜚声世界,但是此刻,这一操作系统并没有官方的名称。 1.x系列的只有一个非正式的 System 1 的名字,而随后的大版本也被称为 System 2,System 3,等等。
直到 System 5 的时候,这一操作系统才算是正式有了 Macintosh 的名称,而它正式的完整名称是 Macintosh System Software 。
最早的 System 1 当中,开机之后有一个非常可爱的欢迎界面:
菜单和窗口的概念清晰,比起 Xerox Alto 的设计更加成熟:
左上角的苹果图标打开之后,本质上是一个程序列表:
在 System 1 当中,文件夹是一个虚拟概念,在文件系统当中其实是根本不存在文件夹的,它是模拟现实文件夹的概念而存在的一个图形化界面概念:
在系统出错之后,系统报错界面中会使用炸弹图标来进行提示:
1984年的 Macintosh 的系统崩溃界面都比 2000 年之后的的 Windows 蓝屏界面来得更加有趣:
当然,用一个带有图形化界面的电脑玩游戏,难道不是一件天经地义的事情吗:
特别值得一提的是,Macintosh 自打一开始就为自己设计了一系列的字体:
其中风格独特的 San Francisco 在多年以后还拥有一个同名的字体,作为系统默认的字体而存在。
随后,在随后的 System 3 当中,垃圾桶的 APP 图标增加了「有垃圾文件」和「已清空」两种状态的区分,并且给系统新增了一个欢迎界面:
文件夹也不再只是一个虚拟的概念了:
同样的,在 System 3 当中游戏的精美程度也有了一定程度的提升:
当然,从 System 1 到 System 4,系统的功能在一代代地增加,但是受限于屏幕和基本的性能,其界面在整体观感上差别并不大:
不过在图标和界面细节的处理上,越来越丰富,越来越细致,比如系统的控制面板,功能和细节比 System 1 时代丰富了许多:
在 System 5 当中,Macintosh 还加入了多任务的功能,也就是 MultiFinder,使得用户终于可以同时运行多个任务,不过因为性能限制,跑多任务的时候,会比单任务慢不少。
对于 Macintosh 系统而言, System 6 是一个阶段性集大成的版本。系统的版本和软件的版本在 System 6 当中进行了统一,并且功能也有了相当程度的完善。
性能更强劲的 Macintosh SE/30 和 笔记本电脑 Macintosh Portable 也是在 System 6 更新期间发售的。
Macintosh Portable
Macintosh SE/30
终于,黑白用户界面的时代在 1991 年终结,Macintosh 系统从 System 7 开始拥有了彩色的用户界面:
色彩的加入,系统图标的拟真度也再一次提升,比如垃圾桶的图标,光影已经相当逼真了。
而为了更好地利用彩色界面的功能,用户可以根据自己的偏好进行全局色彩设置:
软件安装的进度指示方式,比起同时代的系统乃至于后面的很多系统,都要清晰明确:
关键信息的说明和引导上,Macintosh 系统在30年前就已经有明确的范式了,比如重要信息标红强调:
由于这个阶段系统分辨率的限制,在按钮的视觉层次构建上,阴影和按钮凸起的效果,都做的比较简单,但是总体上始终上是在模拟现实存在的元素,通过尽可能贴近现实的视觉设计,来减轻用户的认知负荷,计算器和键盘的设计就非常的典型:
System 7 当中,还内置了交互式的用户帮助系统:
在控制面板当中,图标的统一性再一次得到了提升,风格上明显有着当时的特征,只不过在信息的传达上,还不够优秀,如果没有文本标签,你很难判断每个按钮对应的功能是什么:
值得一提的是,System 7 所处的阶段,大量的兼容机和包括 Windows 在内的操作系统开始出现,激烈的市场竞争之下,苹果也发布了一系列的新款的 Macintosh 电脑:
为了应对激烈的竞争,苹果还想出了新的策略,而这一策略也促成 Macintosh 系统后续逐渐成为一个独立的品牌。
1996年,乔布斯重回苹果。同时在这个阶段,Macintosh 系统也随之进行了品牌重设计,Macintosh 系统更名为 Mac OS。
为了应对激烈的市场竞争,这一阶段的 Macintosh 电脑开始逐步切换到 PowerPC 架构的 CPU 芯片,同时,苹果公司也开始授权一些第三方厂商,使用同样架构的芯片和主板,并且安装System 7 的系统。
可以直接安装 System 7 的 StarMax 兼容机
这样一来,就开始出现问题了:非苹果产的电脑上,也会显示 「Macintosh 」的字样,那这个怎么和原厂的 Macintosh 电脑进行区分呢?
很简单,在原装的 Macintosh 上,依然还是 Macintosh,但是在兼容机上,它就是「黑苹果」——Mac OS:
在当时,很多人认为这种区分,仅仅只是用来进行差异化的临时解决方案。此时乔布斯即将重掌苹果,并且打算把前 CEO 的系统第三方授权策略给干掉。将 Macintosh 更名为 Mac OS 就是解决方案,只不过这个解决方案并后面还有其他的深意。
因为后面还有新系统。
Mac OS 8 是在 1997年7月26日发布的,同一个月另外一件大事,就是乔布斯正式任命为 CEO,执掌大权。
其实,此处的 Mac OS 8 并非真正意义上的大版本更新——它原本应该是 Mac OS 7.7 。但是,前 CEO 同第三方厂商签订的系统授权协议,是基于Macintosh System 7 的,而直接发布 8.0 版本等同于是巧妙地利用命名,直接把后续的服务和协议一起给断掉了,同时新的 Mac OS 系统从名字上也直接区分于原本的 Macintosh,可以说是釜底抽薪的一招绝杀。
同时,新名字,新世代,也是开创新局面的好预兆,一举多得。新的 Mac OS 8 系统在更加优秀的硬件基础上,在显示效果上也一下子进入了高清的时代。
虽然 Mac OS 8 在底层上,依然继承自 System 7 ,但是因为几年前开始的 Copland 项目有不少遗产,身为继承者的 Mac OS 8 在视觉和体验上,提升了相当明显:
Mac OS 8 当中加入了主题选择的功能,虽然比较简单,但是也至少有着跟 Windows 95 相互匹敌:
和同时代的很多操作系统一样,在多媒体软件上, Mac OS 8 有了颇为炫酷的视觉效果:
界面左上角的 Apple LOGO 继续作为程序列表的菜单按钮而存在:
类似 2.5 D 的图标设计,是这个时代的用户界面设计的流行风尚:
而这种变化,在 Mac OS 8.5 这一版本上,有了更为明显的提升——比如文本抗锯齿效果,让文本更加易于阅读:
更加柔和自然的的光影变化,更复杂的交互和界面元素,Mac OS 8.5 所呈现出来的视觉效果乃至于体验,不会弱于同时代的任何系统:
但是也仅仅只是不弱于对手而已。
Mac OS 9 是 Mac 系统第一个系列的最后一个大版本。
和 Mac OS 8 类似,原本的 Mac OS 9 原本应该作为 Mac OS 8.7 来发布的。
其实早在乔布斯回归并发布 Mac OS 8 之后,Mac OS 9 的发展路径和命运就已经注定了:为老硬件和老用户更新,并且继续为真正的新系统争取时间。
Mac OS 9 是在 1999 年 10 月 23 日发布的。这个面向新世纪而发布的操作系统,苹果是以「有史以来网络功能最好的操作系统」来进行宣传。
此时,乔布斯重组的设计团队,已经为新的操作系统挑选好了新的设计语言,而此时发布的 Mac OS 9 当中,也适当地加入了一些为真正的下一代系统所准备的视觉元素,比如播放器软件中的不锈钢拉丝效果:
窗口界面中的元素有着细腻微妙的光影起伏:
搜索应用中的内阴影、高度拟物化的小图标:
特别要说的是,此时的 Mac OS 9 中已经可以找到很多贴合现代 UI 设计中的诸多原则了,比如富有逻辑的分组:
容纳多个并列分组的标签页交互:
在诸如帮助页面和安装界面中,使用了层级丰富的排版视觉设计:
也许现在你对于字体的这种投影深恶痛绝,但是在20年前,这样的视觉效果是令人惊艳的:
Mac 系统的第一个操作系统系列,在明面上有着相对清晰的脉络:自家电脑,用自家系统。通过这一系列的界面设计,可以总结出下面的几点:
Mac 的图形化界面,始于施乐,成于乔布斯,在迭代中一步步完善。
不过,从 System 7 开始,它的危机就已经出现了。从 1991 年到 1999 年这 8 年时间当中,暗地里发生了一系列的事情,这些事情是 Mac 系统视觉史当中,不可或缺的组成部分。
下一篇,依然是 Mac 系统的视觉史,其中包括 WIndows、NeXTstep、BeOS,当然,还有 Mac OS X。
参考:
https://history-computer.com/ModernComputer/Personal/Macintosh.html
https://en.wikipedia.org/wiki/Xerox_Alto
https://web.archive.org/web/20001109004000/http://www.apple.com:80/macos/
https://apple.fandom.com/wiki/Mac_OS_8.5
https://en.wikipedia.org/wiki/System_7
https://www.versionmuseum.com/history-of/classic-mac-os
https://en.wikipedia.org/wiki/Macintosh_clone
https://en.wikipedia.org/wiki/Classic_Mac_OS
https://guidebookgallery.org/guis/macos/macos10
文章来源:优设 作者:陈子木
在第一篇 Mac 视觉史当中,我梳理过了整个 Mac 系统第一阶段的明线,而这一篇,我们来聊一下它的「暗线」。
这一章所涉及到的项目,几乎可以组成一个 大型的「90年代失败操作系统大赏」,在主要由成功者们所构成的故事、新闻乃至与传说当中,这些失败的故事和项目,被提及的次数很少。
但是对于 Mac OS X 而言,这里的每一次作死和失败都充满了意义。
对于绝大多数的用户而言,Mac OS X 是21世纪初顶尖设计的范式,在今天,它是最优秀操作系统的当中的典型。
但是仔细想想看:从 System 1.0 到 Mac OS 9.2.2,长达15年时间的挤牙膏渐进式升级的Classic Mac OS,怎么可能突然一下子就变成了充满现代感的 Mac OS X?这种翻天覆地式的变化的确充满了戏剧感,但那是在今天的视角之下。
在这场「90年代失败操作系统大赏」当中,无疾而终者多不胜数,你所看到的不仅有粉墨登场,还有各式各样的粉末谢场。在 Mac 的视觉史当中,这一篇应该是一个大型的「处刑现场」。
失败的尝试,同样是 Mac 整个视觉演变史当中,绕不过去的部分——没有这些失败,就没有今天我们所熟知的 macOS 的视觉风格,没有后面 iOS 、iPadOS、watchOS 等等一系列交互界面和视觉。
虽然我们此刻所谈及的是操作系统的视觉史,但是操作系统背后最重要的始终是推动它的「人」。谈 Windows 必然会涉及 比尔·盖茨,而谈到 Mac ,也不得不说乔布斯。
和当年很多操作系统不一样的地方在于,乔布斯一直坚持硬件和软件(操作系统)理应是一体的。这也是为什么在很长的一段时间以内,Macintosh 指的既是硬件(电脑),也是软件(操作系统),而因为这台电脑是更容易被指代的对象,当用户在指代系统的时候,使用的是诸如 System 1 ,System 2 这样的词汇。
原本的 Maciontsh 是有内部竞争对手的——Lisa,这个以乔布斯女儿命名的电脑研发项目被夺走之后,乔布斯在 Macintosh 上投注了300% 的精力,亲手操刀了不少设计。拥有大量资源倾斜的 Lisa 在当时那个阶段,看起来也并不差:
在这个 1983年的 UI 界面上,细节处理其实也算得上非常用心了,比如顶部菜单上的「阴影渐变效果」:
当然,Lisa 的定位也非常明确,它就是一台办公电脑,所以它的系统名称也非常简单直接地使用了 Lisa Office System 这样的名字:
也正是在这样的对比之下,有着丰富字体、多样的媒体功能、能够玩游戏的 Macintosh 在这场内部竞赛中,得以胜出。
当然,如同我们都知道的,乔布斯在发布 Macintosh 的 2年后被迫离开自己创立的公司。当然,更重要的是,硅谷的巨头们更加清楚计算机的发展方向。这使得 Macintosh 面对的外部压力骤增。
图形化界面(GUI)的概念和交互模式——这个点子本身可能比实现技术来得更重要。
在高手云集的硅谷,虽然绝大多数的企业和开发者都是后期入局者,但是他们只要投入足够多的技术人员和时间,类似的图形化交互界面总归是能做出来的。
比如 Visi Corp 给 IBM 提供了 Visi On 这样的图形化程序:
微软也在 1985 年为 IBM 的 PC 提供了 Windows 软件:
Commodore 的图形化界面也差不多同期问世:
而 GEOS 甚至为更老的 Apple ][ 提供了图形化界面的操作系统:
这些系统都是在 Macintosh 发布那一两年内相继问世的。
操作系统领域的竞争,刺激着苹果寻求突破。
多数企业都不会把鸡蛋放在一个篮子里,这样孤注一掷的决策确实有太大的风险。其他的商用操作系统,都开始拥有日渐完善的桌面端图形界面,使得苹果在差异性和独特性上不足。除了在硬件性能和产品线上增加投入,他们也开始尝试开发更优秀的图形化界面和下一代操作系统。
在上一篇当中,我提到过,在 80 年代末所发售的 System 6 是一个集大成的版本,在硬件性能和黑白显示器之下,这个操作系统本身的核心功能已经颇为完善了。这个时候,苹果开始有意识地进行一些探索性的项目。
某种意义上来说,「Blue」 和「Pink」 两个项目几乎是同时开始的。
虽然 1988 年的时候,乔布斯早已离开,但是他所塑造的 Macintosh 是当之无愧的传奇,那种「内部创业」和「改变世界」、「创造传奇」的硅谷精神对于此刻的苹果员工依然有着极大的影响。
当时苹果内部 5 名躁动不安的中层开发工程师想拜托日渐僵化的内部管理,想改变当时 System 6 表现欠佳的局面,想打造一个次世代的旗舰操作系统——某种意义上重现 1984 Macintosh 的传奇。
他们在这次私底下的会议上重新梳理并规划未来的操作系统。他们将System 6 基础上的可以增量更新的特性、可以很快实现的功能,写在蓝色的卡片上,将技术上更加先进、符合长期价值的功能(比如当时 Macintosh 所缺乏的抢先式多任务处理和组件化程序设计)写在粉色的卡片上,将更加激进的特性写在红色的卡片上。
这次会议基本上就塑造了后面的「Blue」和「Pink」两个项目,而红色卡片上的特性由于过于激进,仅仅只是备案而没有成立项目。
数百名工程师继续在 System 6 的基础上按部就班地更新功能、维护代码库,继续「Blue」项目,而它的最终产物,就是后面我们看到的 System 7:
而另外一边的「Pink」项目,一开始并不是公开的。当时 Erich Ringewald 领导这发起这次会议的核心 5人组,想像 Macintosh 项目开始那样,找一个隐秘的房间开始这次「内部创业」。
他们看上了 位于 Bubb Road 的一间仓库,当他们进去的时候,才发现这个仓库已经被另外一个正在秘密进行 Newton 项目的团队给占了。
当然这款同样极为传奇的(失败)掌上设备我们回头再说。
「Pink 」项目开局的时候,有 6个人,但是考虑到要彻底放弃 System 6 的遗产,重新开始全新的操作系统,程序要是面向对象的,要有内存保护,要抢先式多任务处理,要支持多语言足够国际化,还要有全新的图形库,这个团队开始一路膨胀。
先是苹果的先进技术小组(ATG)加入团队,人数变为11人。 2个月后,「Pink」项目增加到 25 人。7个月后,原始的5人组几乎都因为「人员多到失控」而离开「Pink」项目。1年后,「Pink」项目的开发组多达100人。
原本计划在2年后发布的「Pink」操作系统在原计划的2年之期到期之时,拥有了 150 人的超大规模,高级副总裁和市场营销部门的首脑领导着这个庞大的开发团队。
「Pink 什么时候上市?答案永远都是2年后。」
这是当时流传的一个内部笑话。
但是这个笑话只是刚刚开始。因为它才刚刚开始膨胀。
系统开发需要时间,而随着时间推移,市场变化需要「Pink」 更有竞争力,然后原本位于红色卡片上的「激进功能」开始不断的加入到「Pink」当中,然后项目就需要更多时间来开发——恶性循环开始了。
在「Pink」上,苹果投入了太多,放弃是不可能放弃了,唯一的办法就是拉更多人入局。当时的 CEO John Sculley 对外宣称「Pink」操作系统代码已经多达 150 万行,并去 IBM 做了内部演示。
然后,这个看起来像是被移植到 PC 上的 System 7 成功地引起了 IBM 的注意。让比尔·盖茨最不想看到的事情发生了:苹果、IBM 和 摩托罗拉成立 AIM 联盟。
AIM 联盟成立于 1991年10月2日,此时距离「Pink」项目开始已经过去了3年半。半年之后,苹果和 IBM 正式组建了合资公司 Taligent .inc ,而其中苹果占股较小。
原本被拿来吹嘘的「Pink」操作系统,此时也更名为 Taligent 。
Taligent OS 的确有着很多超越 Macintosh 的功能,比如更的程序机制,3D功能等等等等。在整个 UI 界面上,Taligent OS 使用了继承自「Pink」项目的一些设计:等轴测的图标,伪3D风格的图标,还有非矩形的窗口(注意看窗口的顶部菜单栏)。
当然,Taligent OS 从「PInk」项目继承过来的最大特性是:一直在开发,从未正式发布。
1994年,HP 入局,加入 Taligent 公司并且持股 15%,Taligent OS 的一部分技术开始运用到 HP 家的 NewWave 桌面环境中了:
与此同时,Windows 95 的关注度越来越高,而媒体吐槽苹果久未发布的新系统,并嘲讽难产多年的 Taligent OS(还有 Pink),已经成了一件政治正确的事情。
虽然 1994 年的时候,Taligent OS 在 SFA 展会上使用 Macintosh IIcI 展示了运行速度和崩溃速度同样快的 3D 应用,但是它最终还是没有发布。
1995年,苹果出售股权退出 Taligent 公司,「Pink」 项目的最终产品也并非 Taligent OS,而是 IBM 公司的 AIX 系统中的 Common Point 应用。
「Pink」到此终结。失败。
在 Taligent OS 研发期间,苹果将鸡蛋还放到了另外一个篮子里面,这个项目的代号借用了著名的科幻电影《星际迷航》,项目的 Slogan 是「大胆地探索 Mac 之前从未去到过的地方」。
这个地方就是使用英特尔芯片的 X86 架构的电脑上。
「StarTret」项目中,苹果是和当时的服务器供应商 Novell 共同构思的,这个项目最终因为内部斗争、人事纠纷、市场问题而关闭。值得一提的是,同样的尝试在 1985年的时候就有过,不过那次尝试很快就被中止了,以至于至今没有一个正式的代号留下来。
这算是2次失败。
作为 「Blue」项目产物的 System 7 最终并没有彻底解决苹果在操作系统上的困顿处境,系统依然问题很多,内存保护机制、抢先式多任务处理依然还没有。而 1994年3月开始的「Copland」项目,就是为此做准备的,它的代号来源于美国作曲家 Aaron Copland 。
除了在内存分配和多任务处理等核心功能上进行开发提升,它在 GUI 的视觉层面上的优化,也花费了相当多的心思。在视觉层面上,Copland 新设计的一套主题名为 Platinum ,所有的元素都有着颇为细腻的阴影,窗口元素则有着明显的突起,原本「Pink」项目中的等轴测图标也加入了进来。
除了 Platinum 之外,Copland 还加入了面向儿童的主题P,以及更加具有未来派风格的主题Z。
除了主题本身之外,Copland 还支持窗口最小化到底部为标签,多用户登录(Windows 98 之后才有这个功能),这种功能类似于现在的家长管理——管理员帐号可以决定其他用户可以使用哪些应用。可以说,非常超前了。
当你在 Copland 中拖动文件到不同文件夹的时候,这些文件夹可以自动打开,这一功能在当时也是非常先进的。
不过,Copland 极具前瞻性的另外一面,就是它本质上是一个「要你命3000」。各种新的功能和特性出于市场需求和项目需求毫无节制地被加入进来,所有的功能相互之间都存在冲突和影响,所有人都很清晰地知道,Copland 是不可能被作为正式产品所发布出来的。
「它只是一个不同团队开发产品的合集……并且期望它们能够神奇地组合到一起。」
这是当时的 CEO Amelio 自己说的。
当然,Copland 的阵亡不可避免,只不过它的界面管理器和 Platinum 主题最终留到了 Mac OS 8 当中,为苹果公司的自救大业添砖加瓦。
Copland 失败了。自家开发团队搞不定,只能从外部想办法了。
当时,CEO Amelio 个人比较倾向于 Windows NT,并且为此专门同盖茨通了电话,而盖茨也表示如果愿意使用 Windows,他可以组建团队将苹果的拳头产品 QuickDraw 移植过来。此时,WIndows 95 已经发布一年了,而 Windows NT 也刚刚发布,市场反响极好,份额节节攀升。
当然,苹果和微软的命运纠缠并不是此时才开始的。Windows 1.0 时代,图形化界面的专利授权是苹果授权给微软的。
而 Windows 2.0 继续沿用 1.0 时代的设计,但是苹果没有给 2.0 授权,最终引起了纠纷,盖茨借用不维护 Word 和 Excel 软件和当时的 CEO 达成了庭外的和解。这些事情回头有机会细说。
和CEO的想法不同,当时苹果的 CTO Ellen Hancock 其实是想选择 Solaris 来着,不过它还没有一套友好的用户界面,赢面不大。
最终摆在苹果CEO 和董事会桌面上的,就剩下两个备选了,一个是 BeOS,另一个是乔布斯的 NeXTSTEP。
然而这毫无疑问是一次极具戏剧化的选择,因为这两个操作系统背后的两个人,有着极深的纠葛。
Be 公司的 CEO 是法国人 让·路易·加西,他是 1981 年加入苹果公司并负责当时欧洲业务。
1985年,他在得知乔布斯计划在阵亡将士纪念日罢免 CEO 约翰·斯卡利(John Sculley)的计划后,抢先告知董事会,最终导致乔布斯从苹果辞职。
1987年,加西启动了 「Skunkworks」项目,而这个项目的产物就是后来的掌上电脑 Newton MessagePad,而最终这条产品线也是乔布斯关停的。当年的「Pink 」五人组在仓库里撞见的,就是加西的团队。
1990年,加西和CEO交恶,并且董事会对于他所推出的 Macintosh 产品不满意,最终导致他离开了苹果,并于次年创立了自己的 Be 公司。
彼时正在艰难推进 NeXT 电脑业务的乔布斯,在媒体那边的口碑并不好。而加西反而在这个时候,对 NeXT 不吝溢美之词。
当然,最终乔布斯的 NeXT 和 加西的 Be 最终还是摆在了同一张桌子上,被选择。
BeOS 是一个在当时来看极为激进的操作系统。它并不是为当时更为流行的办公场景而构建,而是一款旨在为多媒体处理而生的操作系统。
它并没有采用当时所流行的 Unix 的架构,有着一套相对更加独特的系统逻辑和设计规则。
它同样延续了当时最为流行的等轴测图标设计,在配色上更为鲜亮,在视觉化设计上,一点都不弱于同时期的任何操作系统,包括 Macintosh 和 NeXTSTEP。
在交互逻辑上,BeOS 沿用了当时很多 Unix 操作系统的右侧交互工具工具栏,正在运行的程序可以清晰地在此预览,而右上角的 BeOS LOGO 则类似开始菜单,可以呼出程序列表:
BeOS 的图标设计在统一性和规范性上极高,即使在今天看来,很多设计都不落俗套:
BeOS 能进入苹果的备选,一个很重要原因是这套操作系统兼容当时 Macintosh 所用的 PowerPC 的架构。尽管它一直都未曾推进到 1.0 正式版,但是并不影响它在电脑领域收割一大波粉丝。
但是作为一个操作系统而言,在消费市场上依然是一个失败的产品。
另外一边,乔布斯 的 NeXT 电脑并没有复制 Macintosh 消费市场上的成功。不过,NeXT 作为定位高端的工作站,倒是吸引了不少科学家和计算机领域的研究人员以及顶尖的数字创意从业者的注意。
在接近被收购的当口,NeXTSTEP 系统已经推进到了4.0 的大版本。由于它本身在硬件性能上的突出表现,在操作系统的各种细节上,一点都不吝惜,竭尽全力地刻画细节。而这其中,有很多概念和想法是从 Macintosh 时代继承并发扬出来,并惠及后面的 MacOSX 乃至于 macOS。
精巧的 3D 小插件,全彩高清大尺寸拟物化图标,底部程序坞组件,以及可以购买软件的软件商店,甚至于著名的游戏 Doom 和 Quake 都是在 NeXTSTEP 上首发的。
无论是内部的功能,还是外部的 UI 元素的细节控制,NeXTSTEP 都在当时条件允许的前提下,做到了尽善尽美。比如登录和关闭窗口中的光影细节:
(注:NeXTSTEP 是操作系统,而OpenStep 是一套 API。)
当然,NeXT 本身并不算成功,被苹果收购是最好的结局之一,这不仅是市场的选择,也是苹果的选择,是乔布斯的选择。
终极对决发生在 1996年10月12日,地点是帕罗奥托的花园庭院酒店。
CEO Amelio、CTO Hancock ,以及另外 的 6 位董事会成员是最终决策者。加西志得意满,没有作任何演示,而乔布斯不仅使用了他的天赋技能「现实扭曲力场」,而且如同魔术师一般演示了 NeXTSTEP 的各种功能和特性。
苹果公司,乔布斯,加西 三方的命运在此汇聚碰撞,然后再次扭转。当然,这个扭转的过程并非一帆风顺,此时,距离苹果的命运彻底改变,还有4年时间。
在离开苹果、创立 NeXT 的阶段,乔布斯和苹果曾数度交恶,其中所产生的纠纷与诉讼在此刻依然是障碍。
NeXT公司同意了种种限制条款:其产品将作为高端智能终端直接销售给高校,而且NeXT公司不能在1987年3月之前推出产品。苹果公司还坚持,NeXT的机器「不能使用与Mac兼容的操作系统」。后来的情况表明,如果当时苹果公司的要求刚好相反,会对自身更为有利。
——《史蒂夫·乔布斯传》
看完了这些失败的产品的产品,我们终于要说一下成功的产品了。
下一篇,我们将从「水」聊起。
引用来源:
https://en.wikipedia.org/wiki/Jean-Louis_Gass%C3%A9e
https://guidebookgallery.org/articles/sortingoutfactfromfiction
http://toastytech.com/guis/guitimeline2.html
https://lowendmac.com/2005/apples-copland-project/
https://en.wikipedia.org/wiki/Appearance_Manager
https://en.wikipedia.org/wiki/Star_Trek_project
https://dl.acm.org/doi/book/10.5555/582997
https://en.wikipedia.org/wiki/System_7
https://web.archive.org/web/20070120202050/http://robinnet.net/resume/Robin_portfolio_Taligent.htm
https://web.archive.org/web/20070106224709/http://www.wildcrest.com/Potel/Portfolio/InsideTaligentTechnology/WW87.htm
https://www.operating-system.org/betriebssystem/_english/bs-aix.htm
https://www.wired.com/1993/02/taligent/
文章来源:优设 作者:陈子木
对于许多公司和品牌而言,使用带有含义的动物logo,能非常准确的传递品牌信息!比如说豹子的敏捷,狮子的勇猛,长颈鹿的优雅,独角兽的神秘等等!这种品牌意识在其徽标中使用动物象征来策划。根据所选动物的类型,品牌是强大,快速,奢华,关怀,神秘和许多其他情感。
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
(图片均来源于网络)
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章:
蓝蓝注:我非常喜欢这个风格。
日前,在网上流行起了一种叫 Neumorphism 的新风格,也有人称为 Soft UI,这是一种类似于浮雕的效果。这种风格的出现,给目前流行的扁平化设计增加了一种新的设计形式,很多媒体甚至还将这个风格列为 2020 的设计趋势,三星 Galaxy 系列的发布会宣传海报也使用了这种风格,可见这个风格的火热程度。那么一开始我们不讨论这个风格好还是不好,先来了解一下这个新风格趋势。
最开始是一位来自乌克兰的设计师 Alexander Plyuto 在各平台发布了新的作品「Skeuomorph Mobile Banking」。这个作品自发布以来就获得了数十万浏览量,数千点赞数,热度持续飙升并登上 Popular 榜首。
作者是用 Skeuomorph 来命名这个作品风格,评论区就开始了这种风格的讨论,有的人说这是新的拟物风格(New Skeuomorphism),也有人说这是拟物风格 2.0 版本(Skeuomorph 2.0),而后来就有设计师创出一个新的虚构名词,把 New Skeuomorphism 两个词组合,Neo 谐音 New 就是 Neuomorphism。
这个名字就这么火了。大家都开始用上了这个名词出作品,成为了设计新趋势。甚至连作者后面的作品,也使用了这个名称。
再后来国外知名设计师 Michal Malewicz 发布了一篇关于这个风格的文章,将 Neuomorphism,删减了里面的字母「O」,改成了 Neumorphism。在大神的推动下大家又开始争先恐后地使用这个名称。
目前有各种对名称的说法,Neuomorphism,Neumorphism,Skeuomorphism,Soft UI,在没有实际确定的情况下,其实怎样叫都无所谓,重点是我们要知道这种设计风格趋势,关注的不是名字,而是设计。
既然 Neumorphism 只是一个虚构词,也没有任何官方认定,那就先不纠结应该叫什么,我们还是来说说它的前身吧,也就是 Skeuomorphism(拟物)。这是最早被 Apple 提出的设计概念,就是在界面中模仿现实物体纹理材质的设计,目的是让人们在使用界面时习惯性地联想到现实物体的使用方式。
拟物写实的设计风格曾经风靡全球,当时的 UI 设计师几乎都对拟物作品着迷。
而在 2013 年的 WWDC 大会中,苹果公司发布的 iOS7 系统,系统 UI 使用更简洁的设计风格。这场大会也使拟物风格逐渐过时,直到现在扁平风格的全面普及,拟物风格就再没有被广泛应用。
从前几年的设计趋势可以看到,扁平风格作为更更简洁的风格被设计师推崇,再加上苹果系统 iOS 7 设计风格的面世和谷歌系统规范 Material Design 的普及,扁平风格在 UI 设计中一直占据重要位置。
但设计的流行趋势也一直在改变着,在苹果公司发布的 iOS 13 系统中,就有出现轻拟物的设计手法,接着就有一大堆设计师猜测是不是拟物风格的回归,但我看系统中大部分界面设计也还是扁平风格,并没有把拟物风格作为主要设计风格,也许只是某种程度上解决了画笔的视觉识别问题。
拟物效果能否回归,这个言之尚早,但是新的风格趋势也许可以在扁平同质化的时候增添一点灵感与乐趣。
1. 设计
其实要做到这个效果并不难,了解一下这个风格的结构。
主要有三个样式组成,1 个背景+ 2 个投影。在这个基础上,通过改变颜色和大小参数来达到不同效果。
我尝试着使用彩色去做这个效果,使用浅色背景时还是有效果的,但使用深一点的颜色时,问题就出现了,效果更像是外发光或者普通投影。这也可能是为什么大多数作品都采用比较素的颜色作为背景的原因。
2. 浏览
这个风格最大的问题就是缺少对比度。在色彩使用上比较克制,没有大面积的平铺颜色,仅在极少的位置进行色彩点缀,作用是吸引眼球。从众多设计师的作品可以看出,整体视觉是比较平的,缺少层次。
我拿其中两张图进行了 15% 强度的模糊处理,可以看到除了点缀的位置以外,界面是没有重点的。
3. 操作
因为在界面中除了文字以外,几乎所有元素都应用了这种效果,导致界面所有内容看起来都是按钮的错觉。界面中的主要操作按钮也没有被重点提亮。正常态和点击态的对比度并没有拉开,容易造成状态混淆。点击欲望比较低,不利于引导用户进行下一步操作。
4. 动画
跟拟物效果的动画有同样的问题,元素动画效果很难做得轻快,更适合按钮的使用。由于视觉层级跟背景没有实际分离开,就像固定在了背景上一样,所以动画效果只要出现移动,就会让人觉得不合理,容易给人一种虫子在皮肤底下蠕动的感觉。
5. 开发
问题跟当年的拟物效果的实现类似,要实现这个风格,主要有两个方式。
切图:对元素的每个状态(Normal、Hover、Pressed),设计师都需要分别提供一张切图,这个会导致资源库增加大量的图片。 代码实现:这个风格的实现效果是对元素增加两个不同方向的投影,通过代码可以实现。但是需要开发对每个元素添加投影,样式代码增多,繁琐的工作量,开发也不会乐意。
附 CSS 实现新风格的网站:Neumorphism 的生成器
综合分析来看,这种设计风格目前在项目中推广和实现中并不合适。
这个风格的出现也确实给大家带来了一个新的思考,这个风格会持续吗?可用吗?也许扁平风格的多年流行后,设计潮流开始往回走,但并不是直接回到拟物风格,而是在效率和视觉效果中找一个平衡点。不论这个风格的对错,起码引起了设计师的注意,也激发了很多设计师的灵感,就像当年拟物风格和扁平风格的讨论一样,不分对错,设计师也不妨多留意一下这个风格,试着做一下效果图,或许会有新的发现。
(Onboarding 是指用户第一次使用产品时认识、熟悉产品的过程)
往期回顾:
对设计系统有所认识的话应该会知道原子设计(Atomic Design)的重要性,我们也能将同样的概念应用在 onboarding 上,其构成从宏观到微观分成体验流程、控件形式与界面元素三个层级。
体验流程是一个有时序性的旅程,可以由数个不同的载具表现组合而成;控件则是承载信息而存在的平面,可以放上不同的元素;而界面元素是无法再行分割的对象。
我在每个阶段都举了几个常见的例子,搭配市面上产品的应用方法。
一个产品通常不会只有一种用户——使用健身 app 可能是为了减肥,也可能是为了增重;使用协作产品可能是为了记录工作成果,也可能是为了管理团队。如果能够在 onboarding 阶段了解用户的主要意图、在适量的搜集信息后将用户分流(记得上篇的避免过度吸收法则吗?),就能够打造更切身的体验。
除了用户分流之外,还有一些概括性的分流如下:
真正新的使用者 vs. 回流使用者
某些使用者只是因为一些外部因素(手机掉了、手滑删掉 app、忘记密码)而重新登录/下载产品,他们已经接触过产品的核心价值了,并不需要再次学习,这就是为什么跳过(skip)功能很重要。
邀请人 vs. 受邀人
如果邀请人已经设定好群组,受邀人应该自动被加入,某些信息也该自动填入,而非让用户再填一次,从而导致出错。
新手 vs. 老手
与专业领域高度相关的产品(例如 Adobe 系列、CAD 系列等)还可以将用户区分为已经很熟悉作业流程的老手与初学者等级的新手。老手最重视的是定制化以符合他们习惯的作业流程、作业效率高不高,并且跟其他竞品做比较。新手则不然,初次使用产品时的他们也是初次进入这个领域,如果能帮助他们更加了解这个领域的大致流程的话会很加分。
△ Photoshop 的丰富资源指引(Rich Tooltips)对于新手来说是一大神助
特别点出几个重点 features,简单地告知用户最重要的功能为何、组件在哪里,用户在登录产品之后只要知道这几个主要动作就可以打遍天下无敌手。
△ Slack 指出 channel 和对话框如何使用
当产品较为复杂,难以指出特定 feature 时,也常以影片或图片来展现产品价值——也就是画一张大饼给用户,让他们想象未来的生活在用了这个产品后会有多便利,或是让自我感觉提升。
相对于展示,实际演练更着重用户要亲自执行。许多研究都证实从做中学习的成效,就算只是训练肌肉记忆(muscle memory),也能让用户对界面的物理空间更有概念,像是「噢对刚才有做过,我记得按键在右上角」。
我们也可以设计一套 demo 版的试用,像是将 scenario 抓一个出来让用户试跑,跑过一个假想的故事情节后印象会更为深刻。
在初次展示后将用户引导的数据回收再利用,变成每当用户有问题时都随时可用的资源库。
1. 导览 Guided Tour
可能是影片,也可能是滑动式 slideshow,但总之是向用户介绍产品的主要功能或是传达产品价值,通常是为了展示的体验流程所设置。
2. 指引 Tooltip / Coachmark
用极小的空间指向目标物,既可以集中用户注意力,又不会遮盖住大部分的使用空间,用户可以一边进行正规作业,一边通过指引了解不懂的内容。
△ Dropbox Paper 用诙谐的语气鼓励你开始打字
有一阵子很多产品会将所有指引放在同一张图上,但其实使用不当很容易造成信息过载、注意力分散、之后会很难全数记住的情况,我的建议是一次一个比较好。
3. 秀给我看 Show Me
通常只会出现在教程中,强迫用户一定要亲自去按到按键或执行关键动作,切实练习用户的肌肉记忆。
1. 空白状态的行动呼吁 Empty State CTA
擅用空白状态是 onboarding 重要的一环,毕竟许多产品在用户动作之前可能都没有太多料,这时候就要运用行动呼吁。
例如 Tumblr 在指导使用者选择有兴趣的领域之后就指出如何 po 内容,因为其用户生成平台(UGC,User-generated content)的本质就是要鼓励用户多交流、多产出,平台才有价值。
2. 进度列 Progress Bar
提供进度可视化,让用户有掌控时间的感觉,而不是不知道自己还要再走几个步骤而感到不耐烦。
Basecamp 将进度列摆在上端,让使用者知道已经快做完这些设置了
3. 待办事项 Checklist
人类天生喜欢将事情「全部做完」,欲罢不能:科技如何让我们上瘾?可以协助我们「引诱」用户更愿意完成 onboarding 程序。
Bluma Zeigarnik 让受试者完成某些任务,但在他们完成另一些任务前打断他们,强迫他们开始进行其他的任务。这些受试者会非常不情愿地停下手上正在做的事,有些人会强烈抗议,有些人甚至会生气,这显示出 Zeigarnik 的打断为他们带来多么大的压力。到实验的最后,受试者清楚记得那些未完成的任务。如果是打断后一阵子又让他们完成的话,就没有这种效应。(摘自 欲罢不能)
4. 跳过 Skip
每次有 onboarding 都会选择跳过的人举手!
我喜欢把这称为不喜欢看桌游规则的人们,所以在使用中遇到困难时给予提示,对他们来说才是最实用而且最愉悦的,而不是在使用前的纸上谈兵。
△ Tumblr 在使用者第一次发文时才提示如何装饰文字
设计 onboarding 时并不是只能选择一种方法,我们可以灵活运用各种元素。将 onboarding 视为一个旅程,而不是单一元素的无限重复。我看过大部分最棒的例子都是综合使用上述多种元素,以下以新兴生产力工具 Coda 为例,来看看集上述大成的 onboarding 作品。
在第一次进入产品使用引导时,可以自行选择偏好的学习方式——影片或是交互式教学。
Coda 并没有强制用户立刻进入 onboarding 模式,而是在呈现主画面之余,让我们看到右侧的待办事项,令人产生「想将之完成」的欲望。
点入后,先有个 setup 内容,任务情境是为了项目经理所设计,但随着使用教程的进行,用户也能够联想到自己生活中的其他任务,例如安排家庭旅游、写系列文案、追踪买家信息等。
正式进入学习阶段后,进度条就出现了。
单纯根据文字叙述,用户仍然可能混淆,这时候 Show Me 功能可以减少不必要的误解。
同上,当用专有名词(此处的 section )介绍某个界面元素时,将其他无关紧要的区域遮盖住,聚焦在重点区域,用户更容易将专有名词跟界面链接在一起。否则单说 section 谁知道是哪一个 section?
结束时记得给辛苦学习的用户一些奖励,并且贴心附上下一步,当然还是要留给使用者最终决定权。
完成一项后,Coda 会帮用户将完成的项目划除,于是得到立即的回馈。
完成所有步骤之后,原先是教程列的右侧区域转变成资源列,每当使用上遇到困难时就可以寻求各种协助。
Onboarding 并不是只会出现一次,推出多年的产品也仍会时常进行。
onboarding 的程序,例如推出新 feature 或有重新设计(redesign)的时候,目的仍然是让用户快速熟悉产品,所以这是身为产品设计师不可忽视的一环。
另外,除了 UI/UX 设计之外,文案写作也极其重要——如何跟用户诉说一个吸引人的故事、描绘出他们想象中的自己,也是成功 onboarding 必要元素。
文章来源:优设 作者:
在日常的设计工作中,版式即一个画面的骨架,也是视觉传达的重要组成部分,版式整体的活跃程度也能起到改变画面基调的作用,这也就是为什么很多作品看似很「简单」,但却不失设计感的原因。如何把原本比较中规中矩的版式结构通过设计手法将其差异化、提升设计感、增强活跃度,这样做的目的是为了打破墨守成规的形式,提升用户停留时间,以及画面的趣味性,所以本期就和大家一起总结一些常用增强版式活跃度、提升版式设计感的设计手法。
色块叠压法,顾名思义就是改变色块的摆放方式,可以分为两类,第一类是色块与色块之间的叠压。通过色块与色块之间的非常规摆放形式,打破原本常规的版式结构,增强其形式感、活跃度。下面我们举个例子:
通过上下对比,我们不难发现,下侧画面整体版式结构更跳跃,直白地说就是不死板,而且形式感更强,给人的感觉也更舒服、有趣味性;而上侧画面的整体感受并不是说不合理,只不过相对比而言,这种结构形式很常见,版式结构变化性不高,形式感和设计感也稍有欠缺,那么造成这种现象的原因是什么呢?
色块叠压的形式在很多优秀作品中也是很常见的,这种手法对于版式结构的重组、改变也是最直观的一种。比如:
通过色块之间的相互叠压,形成了打破常规的效果,使得页面版式的跳跃性更强。
第二类是色块与主体的叠压方式,通过色块与主体物或者产品之间的相互叠压作用,营造出非常规的设计形式,从而提升版式整体的灵活度以及设计感。举个例子:
这里运用的就是将主体物与色块之间相互叠压的手法,形成了一定的前后关系,而且这里主体处色块最大作用还是打破常规的版面形式,目的是在视觉上给人以更加新颖、更具形式感的感受,且虽然做了结构上的改变,但并没有影响到主体信息的传达。切记,不能一味地追求非常规而忽略了设计本质问题,一定要合理运用。
当作品版式不够活跃的时候,我们可以尝试刻意改变某处的局部信息,将其放大,提升视觉变化的对比性,因为放大的元素其本身就具有很强烈的视觉冲击力以及装饰性,比如大号字体、数字、图形等等,所以局部放大的手法在页面版式设计中也是很常用的一种表达形式。比如:
将主体的某一处细节或者某一局部放大处理,与原本偏常规布局形成了鲜明的对比关系,对页面整体而言也起到了很好的打破版式关系的作用。试想一下:当用户前面一直在浏览比较常规的布局结构时,突然有 1-2 处这样非常规的处理模块,会很大程度上提升页面对于用户视觉的冲击力,给用户留下更深刻的印象,同时也使得作品整体的版面结构更加富有跳跃性。
还有另外一种局部放大形式,即在放大的基础上故意按照非常规的形式摆放,往往也能起到很好的打破版面布局的作用,只不过这种形式在使用时相对不好把握。比如:
类似案例中所展示的一样,通过产品非常规的局部放大以及摆放形式,画面给人的感受更加大气,视觉冲击力更强烈,同时版式的跳跃性也更强。只不过这种形式在运用时要注意:页面整体中最多出现 1-2 次即可,用于活跃版式、提升设计感,一旦出现次数过多,很容易形成杂乱的现象,之所以叫做非常规是因为有常规方式加以衬托、辅助,所以才会在视觉上形成反差。
既然是为了提升版面的活跃度,那么版面中所有的元素都可以是尝试改变的元素,比如常用到的按钮,再或者线条等等。使用非常规的形状、图形也是方式之一,比如最简单的:
说到矩形,很多人都会想到常规形式,而也有一部分设计师会联想到非常规形式 1,少数人会想到 2 和 3 的形式,这四类并没有设计上的好坏之分,而是当我们习惯了常规形式的色块之后,也可以尝试一下其他形式,也是会有意想不到的效果。比如非常规形式 2 的运用:
相比平时看到的矩形排列方式,这一作品则给人很新颖的感觉,原本平面的作品,因为色块形状的改变使得整体有了很强烈的纵深感,版面的跳跃性很强烈,这样的版式还会有人说死板、常规吗?
非常规形状 3 的使用可以参考下面这个案例:
在原本页面中完全统一的形状图形中变换其中一处的形式,对于页面整体跳跃性的提升还是一目了然的,原因在于:此处矩形的形态就属于非常规类型,本身就具有一定的跳跃性、设计感,而用在此页面中又与上下形成了一定的反差对比,所以使得版面整体更加活跃。
还有很多非常规的形状,同样也可以尝试,比如:
想要版面看起来不古板,就要在页面中的每一个视觉元素上找突破。版式听起来好像一个很大的整体一样,其实一样可以抛开整体,把每一个局部作为突破点,寻找合适的视觉表达形式。当某一种形式已经让大家所熟知甚至成为常识的时候,我们不妨稍作改变,在不影响辨识度以及视觉传达的基础上,做一些形式上的调整,往往可以给予版式更强烈的跳跃性以及设计感。
版式就像配色一样,很感性,没有完全一成不变的理论。当我们想要提升版面整体跳跃性的时候,我们不妨试试以上方法,也许小小的改变对于整体而言就是完全不同的两种感受。当然,也不能盲目地追求形式感、特殊性。要切记:特殊是通过对比体现出来的,没有对比,就无法形成很好的视觉反差,同时也起不到应有的作用。还是要提醒大家,一个整体非常规的手法用在 1-2 处即可,太多的话是很难把握的。
文章来源:优设 作者:美工美邦
在我们设计UI有所疑惑时,可以参照以下标准做法。
这些做法并非一成不变—我只是列举出这些方法,相信它们可以对你的日常UI设计工作有所帮助。
我们需要记住一点,设计其实就是跳出框框思考,这意味着,有些时候我们要打破陈规。所以,对我的建议也不要全盘接受。
图中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素个数,简称PPI(Pixels Per Inch)。dp(density-independent pixel)是密度独立像素,也写作dip(也有device-independent pixel之说,设备独立像素)。
设计界面时,建议大家基于设备的密度像素,而不是像素。这样可以保证我们设计出的图标素材比例适当,适应不同尺寸的设备。
举个例子,假如我们以密度独立像素dp为单位,设计了一个 200 x 50的按键,那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素,在320ppi的屏幕上的尺寸则为400 x 100像素,即原尺寸的两倍。
因为有些屏幕的单位英寸的像素数量要比其他屏幕多,即ppi分辨率大,为了保证设计的图标在不同分辨率的屏幕上都一样大,设计师通常只是设计一个尺寸,导出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素,而是点的个数。论像素,则是1242 x 2688 px。知道了这些,给iPhone XS Max做设计时,我会以414 x 896个点为尺寸做设计,而后导出3x的图标素材。
为什么UI设计的间距都是8的倍数而不是5的倍数呢?这里有一个简单的解释—如果一个设备是1.5x的分辨率,我们就没法导出一个奇数。
另外,现代主流的屏幕尺寸都是以8为单位,以8的倍数做设计可以很好地适应这些屏幕。
以8的倍数设计可以保证设计的一致性。基于这种惯例,大家在进行设计工作时不用再猜测间距的数值,每个图标都可以完美地与其他图标对齐。
有关这个话题的更全面探讨,请参考Bryn Jackson的文章《八像素网格设计》。
我们在设计的过程中应该时常将自己抽离出来,审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱,是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。
我们设计的大部分元素都存在于线框里,简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。
善用对比度不仅仅是为了让用户的注意力集中于重要的信息,更是为了使产品更容易访问/使用。
设计产品就好比建设像图书馆、学校一类的公共场所,它的适用对象需要涵盖每一个人,包括失明、色盲和视障用户。
Web内容无障碍指南(WCAG)要求文本或文本图像的对比度至少为4.5:1。
为了保证设计达到该标准,我们可以下载Stark这款插件来检查设计是否是无障碍的。
为什么有些图标元素会被公认为标准?原因有多种。
假如你把一个按钮设计成圆形,那么当我们需要一个(字数较多的)“Start Free Trial”按钮时,它就会不必要地占用界面中竖直方向上的空间。
另外,用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖,那么这样的体验是不直观的,用户很可能会因此受挫。
故而,在我们发挥创造力的时候,最好以现有的设计规范为基准和前提。不要重新设计轮子。
每一种颜色都有自己的视觉重量,我们可以通过借助颜色的视觉重量来建立内容的视觉层次,用颜色的深浅来呈现内容的重要性的层级。
善用颜色视觉重量的秘诀是,一个更为重要的元素,应该有更重的视觉颜色,以便用户快速浏览网页,区分重要和不重要的信息。
大字号、粗体的信息会首先被用户注意到,而后他们会关注其下的辅助性信息。
通常,设计界面会控制使用的字体数目,两种不同的字体就应足够—这不是说你不能使用更多字体,只是你需要充分的理由。通常来讲,仅用两种字体会更好。
设计界面时要善用字体家族。
使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起,让设计在保持多变性的同时兼顾一致性。
选择字体时,尽量选择那些有多种重量(如标准、适中、粗体、特粗)和样式的(如长体、宽体、斜体)的字体家族(译者注:作者此处所述选字体经验的适用对象主要为英文字体。)。这样既会给设计留出可探索的空间,也不会增加额外的字体种类。
让用户去认知产品是产品设计中所推崇的,因为,我们为什么要让用户在使用的过程中去思考呢?
结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。
在好的设计中,结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品,而非通过回忆来想起。
在Gmail邮箱中,我瞟一眼就可以知道哪些是已读邮件,哪些是未读邮件,这个过程不需要过脑子。同理,我登录到自己的亚马逊账户后,可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。
设计时,应让元素、功能、选项明显可见,最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。
—Nielson Norman Group(尼尔森诺曼集团,人机交互和用户体验咨询公司,唐·诺曼是创始人之一)
作为用户,速度和效率是最重要的。用户使用一个应用程序,是为了解决某个特定的问题。
我要速度。
— Ricky Bobby(电影《塔拉迪加之夜:瑞奇鲍比的民谣》主角、赛车手)
如果将一张支票通过手机存入银行账户这个体验是非常让人享受的,那固然很好,但作为设计师,千万不要让你的创造力阻碍用户实现他们的目标。
关于动画和微交互的一条经验就是,如果某个体验只是无谓地增加了时间,那么这不是在改善用户体验。
如果加入的动画带有目的性,则可以改善用户体验;但是如果增加的只是不必要的分散注意力的元素或用户操作,那么用户体验不会变得更好。
Dribble上有很多着陆页的设计—当用户向下滚动鼠标时,动画随之展开。通常,这些设计展现出过火的动画效果,每个元素都在淡入淡出,动来动去,而几乎不关注体验本身。当太多事情同时在界面上发生时,用户很难知道到底哪些信息是应该关注的,这等同于浪费用户宝贵的时间。
这位Dribble用户,非常抱歉把你揪了出来:/
无数研究表明,界面中动画的最佳时间在200到500毫秒之间,这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过,人眼根本无法识别;而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》
所以,如果你要在界面中使用动画,那么给它一个明确的目的,并且不要让用户等待超过500毫秒。在2019年的今天,惹恼你的用户只需要1毫秒。
每次我们想要增加额外的信息到界面中时,例如按钮、文字、照片、动画、插图等等,它们就会跟相关的信息进行竞争。如果一页上有太多东西,那么某些元素的重要程度就会被削减。
谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上,没有把用户淹没在不必要的信息海洋里。
对不起了雅虎,在这必须把你当做不好的案例展示
最后,分享给大家一句我最爱的设计箴言:
臻于完美之时,不是加无可加,而是减无可减。
文章来源:UXRen
写在前面
过去几年中,我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化,但到2020年,我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势,以及它们的发展趋势,以及它们如何影响设计领域。
总体趋势
2020年的主要趋势动作设计与动画, 对于2020年,我们认为运动设计是主要趋势,因为我们在所有设计领域都遇到动画,从小的交互到徽标和UI,一切都在变化。动画内容正在进入现代世界,在现代世界中,书面内容没有以前那么吸引人。 动作设计正确实施后,可使广告系列的信息更快,更正确地传达给受众。
01. theQoos品牌插图由 闵庆 02 军团赛季 3由 尼克Scarcella 03. 溶剂-使大麻银行公开赛由 BluBlu工作室 04 云服务(动画图标)由 亚历山大Baleev 05. 病毒性肝炎由 昂布尔集体 , 蒂博ZELLER , 乔纳森Plesel 06 。 UXC_Design2020_Project研究通过 Donerzozo
目录
1. UI / UX
2.插图
3.动态图形
4.平面设计
5.基于技术的趋势
6.包装
7.版式
8.趋势工具
1. UI / UX
1.1暗模式(Android Q和iOS 13)
暗模式是2020年的新趋势,Android引入了两种类型的暗模式,分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌,但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。
有了介绍此更新的大公司,许多设计师将选择在他们的应用程序或站点中使用暗模式,因此希望在来年看到越来越多的暗模式。
1.2粗体颜色
在过去的两年(到2020年)中,强烈的色彩已成为重要的趋势。大胆的色彩丰富,明亮,甚至极富活力。它们可以是主要或次要颜色。

01. EMART UX / UI可再生的通过 加X, 李宝蓝 , Sabum卞 , 熙荣, 尤金全度妍 , 원 지 혜, Bongho彩 02 NSH通过 索菲娅费多托娃 03. 埃尔多拉多赌场-移动Web UI,应用程序ü用 的Loredana PAPP-Dinea , Mihai Baldean , Milo主题 04. mmcité+网站由 工作室9 兹林,帕维尔Valek 05. 自动哈克系列#21-25由 安德烈福 06. Flipd应用程序通过 ESTUDIO PUM
1.3 UI中的插图
多年来,插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释,可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外,它们还可以更快地传达信息。
01. 海妖重新设计,以 西尔Theyssens , 安东尼科拉德 02 浮雕-医疗项目由 马丁Pankiewicz 葛尔若, 米沃什Pożarkowski 03. abuk:图书封面设计有声书商店到 谢尔盖Valiukh, Tubik工作室 04.我llustration系统GOL到 ESTUDIO PUM 05 。 智能家居的应用程序- IOS到 玛丽亚Osadcha 06.斯基林贸易(skilling.com) - Loredana酒店PAPP-Dinea , 米哈伊Baldean
1.4讲故事
设计中的讲故事是关于帮助用户在平台上的旅程,从而使他的体验尽可能轻松和流畅(在UX设计中)。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事,我们可以使用一个特别创建的角色,将这个角色赋予他个性,我们创建一个故事和一个冲突,最终由我们的产品(UI设计)解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用,并且基于相同的原理,但实现方式有所不同。
01. 余吴-旅行计划应用由 朱莉张庭 02. UX / UI | 食品外卖应用由 康斯坦丁Seredkin 03. COOC通过 cuneyt仙
1.5动画图形和微交互
正如我们所说,动态图形是今年的趋势,它在UI设计中也有很强的表现,它为插图增添了力量,使创意更易于吸收并保留在用户的记忆中。
微交互在2018年成为第一流,但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势,这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。
如果您是UI设计师,但尚未在工作中使用微交互,建议您这样做,因为到2020年,没有UI的任何UI设计都将是非常基本的。
01. UI / UX | 智能药房应用的 阿纳斯塔西娅中号, 谢尔盖Nikonenko UX 02. 气候与动物:灭绝危机网站UI / UX 由 丹尼尔·谭, 达芙妮龙 03 飞素食者由 帕特里夏赖纳斯 04. UKRPOSHTA。乌克兰国家邮政局的移动应用程序,伊洛娜·金( Ilona Kim) 05 . Tagir Tikeev 的聋人报警应用程序
1.6用户界面中的视频
到2020年,信息必须非常快地到达用户手中,最好通过视频内容来完成。您选择通过动画或经典电影来解释产品,视频内容对于任何网站或应用程序都是必不可少的。
1.7功能
UI设计中的一个重要部分是功能,即,根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择,但是在新技术的帮助下,这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意,其功能使体验变得更轻松。它使用户可以更快地找到信息。
01.斯基林贸易(skilling.com) - Loredana酒店帕普用餐 , 迈克尔Baldean
1.8注意细节
在UI设计中,对细节的更多关注非常重要。从按钮,图标,加载到导航到细微的细节,都可以打造出非凡的设计。随着新技术的出现,我们在UI中必须注意的细节始终在变化。
在明年,我们将看到越来越少的按钮,以及更多基于手势的导航。例如,后退按钮(Android的导航常用)在Android 10中正式消失。
01. FLYR的视觉形象和营销网站的 Ramotion
02. 闹钟应用聋人通过 Tagir Tikeev
1.8渐变
几年来,我们一直在谈论设计中的渐变,这种趋势在2020年将继续保持强劲,因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮,图标,插图,甚至用于排版。
01. Wavecut - IOS应用程序通过 Eleken局 02. 抗忧郁症的应用程序-产品设计(UX / UI)由 安娜Arutiunian
03. 保罗回肠-电影音乐作曲家,制作人,DJ,Perfomer 通过 的Loredana PAPP-Dinea , 米哈伊Baldean , 米洛主题 04. ITEXIA通过 下一页局 , 亚历克斯海鸥 , Jegor Walowski
2.插图
2.1角色设计
角色设计包括定义一个支持整个概念的角色。最重要的是,通过绘图,设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。
01. 新微小的事情•儿童图画书由 Vuon插图 , 荣阮 , 荣范 02 的Adobe X Createfulness由 迈特弗兰基, 马蒂厄Tarwane 03。 3D人物V2由 安东尼奥·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2纹理
插图和纹理很好地结合在一起,可以创造出令人难忘的构图。从粒状纹理到预制的笔触,您可以找到许多想法来为插图添加纹理,也可以手动创建它们。浏览网络时,您可以找到许多可以在插图中使用的纹理,预制笔刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀
2.3平面插图
在过去的几年中,我们到处都可以看到平面插图。它们仍然处于趋势中,但现在有了一个新的组成部分:对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触,但也可以将其上色,使其阴影比所涉及的对象暗。
01. BILLY KENNY -刚刚为音乐通过 桑戈BANG 02 Babelia - Lecturas对维拉诺由 米格尔·安赫尔Camprubí 03. 拳击猫-第一滴血由 Felms 04. COUSCOUS STUDIO | 解释器VIDEO 由 哈立德abdelazi ž
2.4等轴测图
是的,等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加,这种趋势似乎已经生效,但是在2019年它已经发展了,现在我们在其他业务领域中发现了这一趋势。
01. 庞克市由 温祚_ 02 FastCompany -等距号由 阿图尔Tenczynski 03和05. 抗体亚型由 马里奥·德•梅耶尔 04. 松弛插图由 京张
2.5 3D
随着效率越来越高的软件和工具的出现,3d渲染已逐渐发生变化。3D插图非常受欢迎,因为与2D插图不同,它提供了更逼真的图像。
01. 游戏巴伊亚之家由 Miagui 02 天平 由 卡韦萨Patata工作室 03. 城堡毁灭者由 穆罕默德Chahin 04. Eyoo家庭3D插图由 Baianat 05. 个人插图第1卷由 巴勃罗·马林 06. 一个人旅行通过 乱伊莱恩
2.6超大胆的色彩
大胆的颜色非常适合插图。它们营造出欢乐的氛围,使角色脱颖而出,并在图像背后展现故事。
01. 玛莎·希肖娃(Masha Shishova)摄于莫斯科的 STRTFD咖啡壁画 02. 作家- 利奥·夏目( Leo Natsume)的移动互联网思想 03. 可口可乐圆罐插图由塔尼亚·雅库诺娃( Tania Yakunova)
3.动态图形
3.1 3D视频
在2020年,无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门,在这个世界中,只有想象力是极限。我们可以在广告,电影,游戏,广告活动等中找到3d。
01. 庞克市由 温祚_ , 视觉设计艺术的影响
3.2视频+动画插图(混合媒体)
拍摄的视频,动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频,从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。
01. Coppel /回到学校通过 大量工作室 02 PWR 由安娜·霍查, Edvina元
3.3 2D动画-说明性视频
2D动画专注于创建故事和角色,并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时,2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中,说明性视频对于任何网站都是必不可少的。
01. Freelive 由 工作室Infografika , 谢尔盖·萨多斯基 , 阿纳斯塔西娅Alterka , Arsentiy Lesnik宾馆 , 尤里·阿姆斯特朗 , 阿林好, 乔治VALD ,马克西姆Tleubaev
3.4动画徽标
您已经了解到动画是2020年的“必备”,为了保持竞争力,我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理,以引起人们的注意。这也是徽标设计的主要趋势。
01. 杯茶由 维多利亚伍 02 - 07. 运动野兽✕Logomachine。动画标志的 运动设计学院, 维克托Villamarin的, 波格丹·杜米特留, Logomachine .NET , 亚历山大·库兹涅佐夫, 扎克李, 丹尼斯Siurin , 斯坦尼斯拉夫·马尔琴科, 莉扎薇塔Tsareva , Supremus Levenus , 安东·福明, 埃米尔Khafizov , 胆碱哈达
3.5混合动画2D和3D集成
这一趋势不是一个新趋势,但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。
4.平面设计
4.1平面设计中的3D
尽管2d垄断了设计的这一分支,但3d可以为最终概念添加额外的内容。3d渲染可以采用插图,动画或字体的形式。
01. 画像由 费尔南多·多明格斯Cózar 02. NASA | 太空时代的 工作室-JQΔ 03. 美国宇航局X BBC | 不自然世界的 工作室,JQΔ
4.2双色
精益求精的概念可以完美描述这一趋势,设计师在其中创造出大胆的元素,并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择,因为某些打印技术如果颜色更多,则价格会更高。
01. 冬季公开赛'18由 Kinoto Studio, Romina Rios, Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物馆由 de_form工作室, 诺拉demeczky , 的Eniko DERI 04. 刻字系列IX由 拉斐尔·塞拉
4.3光学感知艺术
欧普艺术作品是抽象的,有许多知名的黑白作品。通常,它们给观看者留下动感,隐藏的图像,闪烁和振动的图案或肿胀或翘曲的印象。(来源:wikipedia.org)。
这种趋势给人以动静的印象,但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法,这是最合适的方法。
01 02 东京电影节共混物由 梅赛德斯巴桑 , 的Adobe住 03. 海报-第一卷由 Xtian米勒
4.4平面设计中的插图
插图在设计的所有领域都非常重要,因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年,并且即使在2020年,也将继续成为设计师的最爱。
01. GOOSE赫尔-海报由 Ewelina鹅 02 CAT酒吧和舞厅/ 2019至 kissmiklos, Eszter萨拉
4.5动画海报
动画无处不在,我们在设计的各个领域都可以找到它们,当然它们也存在于数字海报中。动画可以将2D与3D混合在一起,效果令人着迷。
01 节地铁地铁由 Bzoing, 维吉尼贝达德 02. 失败的Windows由 皮埃尔Kleinhouse, 辖Zivony
4.6复古合成波
复古合成波是一种在80年代出现的趋势,但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功,这一潮流再次开始流行。

01. 鸡尾酒和梦想通过 Gjorgji Despodov 02. CINEMAX由 杰森巴尔巴 03.奇怪的事情(Netflix.com)
4.7瑞士设计,达达主义,包豪斯
20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提,因为它们始终是的,遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说,这些运动强调版式,无衬线字体(Helvetica于1957年在包豪斯舞台上创建),几何形状,简单的线条,体积和颜色。
01. 瑞士海报01(版式方面)由 Mehman Mammedov 02. 黄视VOL.3通过 维奥莱纳齐名
4.8大的不间断彩色空间
大型,不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用,可以在图形设计,产品设计以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌内容由 约翰Vernizzi 03. Kekkilä-BVB的 Kurppa Hosk
4.9超极简主义
极简主义的设计仅使用必需品,非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素,使所有设计项目都有目的。要创建超极简主义的设计,您需要使用尽可能多的白色/负空间,简单的配色方案和一些基本的几何形状。
01. Heim杂志,第3页, Sasha Yaguza撰写 02. Andrei Gheorghe- DADA-通过 moodley品牌标识发布
5.基于技术的趋势
技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能,机器学习,虚拟现实和增强现实正在影响设计师的思维方式和创作方式。
5.1增强现实的移动应用
随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore,很明显,整个世界将面向增强现实技术。
许多大品牌已经在其应用程序中采用了这项技术,而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。
有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一
是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。
有关更具体的AI规则,请阅读Apple指南,以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式,引人入胜的体验”。
5.2 AI,ML,聊天机器人和虚拟助手
聊天机器人是一种 通过听觉或文本方法 进行 对话的 软件。[1] 此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为,尽管截至2019年,它们仍远远不能通过 图灵测试。[2] 资料来源:维基百科
人们还不习惯与AI对话,因此设计师(和开发人员)的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。
使用AIML(人工智能标记语言)设计和编写脚本聊天机器人,是出色的UX设计人员的魔力可以发挥作用的地方。
大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌:Spotify,星巴克,万事达卡,丝芙兰,Lyft,必胜客。
5.3 VR
大多数人将VR与游戏行业联系在一起是有充分理由的,但是随着所有大型科技公司开发VR套件和应用程序,我们可以肯定地说,我们将发现使用和享受这项技术的新方法。VR已经用于教育,医疗保健,旅游,房地产或建筑。
5.4语音用户界面(VUI)
语音用户界面(VUI)使用语音识别 来理解语音命令和问题,通常是文本到语音以播放答复,从而 使语音与计算机的人机交互成为可能 。语音命令设备(VCD)是受语音用户界面控制的设备。资料来源:维基百科
去年,使用互联网连接的设备的人中有40%每月至少使用一次语音助手,与去年相比,这一数字增加了10%。
6.产品设计
6.1包装中的图案
在过饱和的包装市场中,很难创造出可以脱颖而出的新产品,因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何,花卉,浪漫或单色图案是任何产品包装的大胆选择。
01. 飞行山羊咖啡由 妮可LaFave 02. VITA SPA皮肤 由 DWYW 03. 巧克力包装设计由 算术 04. 100手绘无缝的图案和形状 的 Arseny Samolevsky
6.2包装插图
插图一直是包装设计中的重要元素。通过他们,我们可以讲述一个故事,使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年,并且很可能会一直处于流行趋势。
01. 布里格斯原件由 熙宰金 02 天鹅绒咖啡杯 由 安东Malishev, 呵呵卡罗拉 03. 废物不包括厨房-品牌打造的 尝试和真正的DESIG ň04 家,甜蜜的寿司儿童 通过 精明的机构, 马里亚纳星火 05. Cerveza塔Maleante通过 Antonay
6.3留白
极简主义是设计的基本原则,而今天它又是新事物。它放弃了设计中不需要的所有内容,并用负空间代替了它。这种趋势将功能带到了最前沿,并专注于简洁的设计,使版式脱颖而出。
01. 香味精油 由Y u型简林, 黄恶嗯-祥 , 智泰莲 02. 重塑品牌理念,为BodriPincészet由 克里斯托夫Gáthi
6.4单色和两种颜色
首先,在调色板中仅使用1或2个色调似乎有些限制,但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色,就可以保持简约的外观,放弃所有多余的东西。结果是精美,高雅的产品令人赏心悦目。
01. Zerbet冰糕由 才林贾尔斯 02. 贝利啤酒 由 埃德大厅 悉尼, 叶卡捷琳娜Leontyeva , 波阿斯孙
6.5大胆的颜色
大胆的颜色和渐变仍然是非常强烈的趋势,这种趋势将在2020年持续。使用这些颜色,您可以创建令人难忘的产品。
01. 极简主义和享乐主义:Fabula Branding 重新设计了 千年品牌
02 纹身商城 通过 Openmint工作室, 叶卡捷琳娜Teterkino , 烟, 叶戈尔Kumachov
03. Organic by Larissa Kendrik 和 加布里埃尔· 沙茨曼
04. VIZOU -老花眼镜 的 工作室开头语, 阿克塞尔杜马克
05. 包装的调味开心果由 米拉Katagarova
6.6注意细节(受新艺术风格启发)
注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。

01. HYWILDE由 查德·迈克尔·工作室 02 AMSTEL KARGO IPA通过 卡帕罗设计船员
03. 大岛咖啡烘焙-咖啡咬伤的 农场设计
6.7包装中的讲故事
到2020年,品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事,以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。
01. 喙接通过 骨干品牌推广 02. Colorea用t 骨干品牌
7.版式
7.1粗体印刷
粗体印刷术是设计中的重要趋势,它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

01. 埃里克·林格(Eirik Lyng),作者: 埃里克· 赫斯特雷(ErikHerrström); 02. 包豪斯(Bauhaus_100)(x3),作者: BunkerType(JesúsMorentin)
03. UCCA当代艺术中心北京由 布鲁斯·莫设计(BMD) ,耶勒马雷夏尔
7.2小写
越来越多的应用程序使用完全小写的文本,非常易于阅读,并且完美地融入了简约和现代的设计中。在明年,我们绝对必须关注这一趋势。
01. Autea品牌和网页设计由 米哈尔Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定义字体
尽管自定义字体没有什么新意,但我们将看到这种趋势越来越多地出现在设计中,尤其是在徽标和海报中。这种做法在大品牌中更常见,因为生产专用字体可能会非常昂贵,但是设计人员可以对现有字体进行少量调整,结果可能会非常独特。
01. Think8全球研究院通过 勃洛克设计 02 ZINEZŐ//设计周期由 芭芭拉·卡托纳 , 媒体与设计系埃格尔 03. 式设计'19通过 TRÜF创意 04. Cako字体由 维奥莱纳齐名
7.4动力学排版
就像我们说的那样,动画在设计中无处不在,因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品,该产品保留在查看器的内存中。
01和02. Grafika , Gimmick Studio设计 。03&04. 增强现实与动作排版,作者: Alex Slobzheninov
7.5堆叠字体
堆叠文本可能是一种现代化的解决方案,可以吸引您注意基本信息。我们可以在网页设计,应用程序设计和图形设计中看到这种趋势。
01. L'嗡通过 Atipus巴塞罗那 02 期刊由 杰玛马奥尼 03. 海报收藏| VOL.8由 罗马发表 04. SMLXL由 梅丽莎Baillache, 垫新郎, 杰森·利特尔
8.趋势工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 开发的 用于移动和Web的媒体创建应用程序的集成套件 。[1] 它包含三个独立的设计应用程序: Spark Page, Spark Post和 Spark Video。(来源:WIkipedia)
他的免费Adobe Spark Web应用程序可与Spark Page,Spark Post和Spark Video iOS移动应用程序同步 ,从而使用户可以从任何设备创建,编辑和共享其视觉故事。
[3] 这三个设计应用程序允许用户创建和设计可用于企业,教育,社交媒体营销人员等的视觉内容。[4] Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时,用户可以导入图片或搜索图片。
8.2繁殖
Procreate是 由Savage Interactive针对iOS开发和发布的 用于 数字绘画的 光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计 ,并且适合从初学者到专业人士的艺术家。
它提供130多种逼真的画笔,多层, 混合模式, 蒙版, 过程视频的4K分辨率导出 , 自动保存以及许多其他经典和原始的 数字艺术 工具。除光栅图形外,该软件的编辑和渲染文本和矢量图形能力有限 。(来源:Wikipedia)Procreate是2018年App Store上最畅销的应用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc开发和发布的 用于 Web应用程序 和 移动应用程序的基于矢量的 用户体验设计工具。它适用于 macOS 和 Windows,尽管有适用于iOS 和 Android的版本 可帮助直接在移动设备上预览工作结果。XD支持 网站线框图,并创建简单的交互式点击型原型。(来源:维基百科)
作者授权
总结
每一年每一个时间段都会有新的趋势,学会的辩证的眼光去看待便是最大的智慧。世界一直都在变,趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应,念念不忘,必有回响。共勉!
文章来源:站酷-木七翻译整理
如“黄金分割”之于构图,“视觉层级”之于页面节奏,都是基础且必不可少。本文与你分享如果一步步从原型开始构建APP视觉层级。
工作中,你是否经常听到“视觉层级”这词?就犹如“用户体验”一样让人耳熟能详。抛开装逼因素,这两个词的多次提及,可见其重要程度。
音乐有节奏,好的音乐能通过音阶的高低起伏变化表达音乐情绪。
例如:《Main Title》即使你没看过《冰与火之歌》,光听音乐你是否能感觉到音乐给你营造千军万马恢弘之势。《Playing Love from The Legend of 1900》你是否想到一个宁静夜晚,佳人与你倾诉衷肠,柔情似水。
反之,节奏不好,则无法和听众达成共鸣。
绘画有节奏,张驰有度、大小对比、远近疏密变化,构成了画面的节奏。反之,没有节奏,则画面平淡。
同样的,APP UI也有节奏。页面良好的视觉层级,方便用户在浏览的过程中抓取关键信息,帮助用户快速达到目的。
拿到原型,明确页面目的和需求的1、2、3层级,并理解消化。开启设计师的隐形技能:根据一句话或者一个词,在大脑开始构建画面布局。在构思阶段,建议同时浏览同类型UI设计以及交互布局,在找参考的过程中,结合自身APP的页面目的一起构思,并在纸上绘出可行性方案。
由于,APP是为人服务。那么我们需要知道,人眼浏览习惯模式的科学依据。
曾有一数据显示:如果在3S内无法吸引用户,你将流失这个用户。如今我们所在的时代快节奏、碎片化,用户的日常浏览是“扫描”而非“阅读”。所以,了解人眼浏览习惯,变得十分重要。
人眼浏览习惯有:F型;Z型;其他;
还有,其他浏览模式,海哥HMI人机交互在他一篇文中《用户是怎么阅读的?尼尔森F模型》提到:
在明白人眼视线流程后,我们开始运用视觉手段,吸引用户来看我们想给他看的内容,并按照我们的预想顺序,依次阅读。
对比,让视觉有轻重,用户看起来不累。需要强调的信息放大,没那么重要的东西缩小。如果同一层级的模块,通过颜色或者样式的变化来表达。如:字体大小对比,颜色对比;模块大小对比;图片大小对比等。
字体千千万形状各不相同,然而他们都有着相似之处:字重的大与小。在同一字号大小下,字重大的笔画,以面构成,会比字重小的,更具视觉冲击力。
需要强调的信息,字号变大,字体加粗,这样就能区分主与次,建立更易读的视觉层级。
为了各个模块间的和谐组合和视觉上的凸显与美观,我们需要灵活运用各种样式表达。卡片投影;形状;材质等;
同一类别信息,模块化整合。便于用户浏览操作,视觉上不零散,整体美观。多模块化的组合,注意留白以及页面的节奏轻重。
以上要点,要根据实际情况灵活巧妙运用。在做的过程中,通过Mirror工具实时查看页面效果,不断改进,加强表达。
宗白华说过:“一切艺术都趋向音乐”。确切说一切“广义的”艺术都趋向于音乐状态。优秀的UI视觉层级表达,就如音乐一样有节奏变化,波浪起伏,是一种视觉享受。无论是平面还是UI,视觉层级,需要像“黄金分割原理”一样,是内化进设计师的身体里一个元素。多多实战练习,不需要死记硬背,就会刻在我们的大脑深处。
文章来源:站酷
蓝蓝设计的小编 http://www.lanlanwork.com