编者按:这是 UI 设计师 Diana Malewicz 的第二篇 UI 设计分享。这一次,她要设计的是一个控制面板的界面,如何控制不同UI元素的平衡,如何从零开始构建,相当值得学习~
欢迎来到我的「UI设计指南」第二篇!如果你对于我的第一篇文章印象不错的话,那么这一篇应该也会合你胃口:
当然,请注意一点,我创建 UI 界面的过程中,绕过了通常 UI 和产品设计应该有的「用户调研」——「用户研究」——「体验分析」这样的前置步骤,而是直接开始创建干净、一致的 UI 界面。在真实的设计项目当中,开头的这些步骤是无法忽略的!
这一次我们要设计的是仪表盘界面。那么我们从基本的想法开始。
这一次,我们将会设计一个服务于医疗行业的控制面板(实际上,这个设计的初衷来源于我的姨妈,她是一名医生,不仅要治疗病人还要处理大量的文书工作),而整个设计我将会在 Sketch 中完成。
通常,我会从一个非常低保真的线框图开始。我会创建一系列的矩形线框,然后将他们按照需求和大小进行排列,直到最终满足我的想法为止。我选择了一些随机的、但是相近的色彩,确保我能看清位置就可以了。
然后我针对哪些内容在哪里显示,进行了基本的说明。
这就是一个非常原始的界面框架了。
如今大数据产业正在超出我们的想象悄然发展,而随着大数据时代的到来,越来越多的公司开始意识到数据资源的管理和运用。今天就给大家介绍一些可视化大屏的UI设计。
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
--大屏UI设计--
(以上图片均来自于网络)
其实可视化大屏的UI设计并不只是一个简单的设计,其核心就是要以展示数据为核心,不管在多么炫目的情况下都不会影响数据的展示。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章:
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
蓝蓝设计的小编 http://www.lanlanwork.com