Wishlist 0 ¥0.00

大开眼界!2014年最逆天的UI设计

 

当硬件技术已经达到一个空前的高度之后,大公司们争先恐后的发全力试水虚拟现实产品,诸如Facebook、三星、索尼等等,似乎不做出些成就便不好意思自称巨头。

诚然,科技进步的越快,人们总想去创造一些更超前的东西,重要的用户界面UI设计开始受到了忽略,但毕竟它才是使用者与产品交互间的桥梁。但好在还有微软、谷歌,在过去的一年内仍然致力于用户界面的开发,于是我们看到了像Material Design这样出色的产品。

国外知名设计类网站fastcodesign盘点了2014年最佳的UI设计,小编选择了很有意思的6款产品,一睹为快。

黑科技 RoomAlive

动图中的效果着实感觉逆天,你可以把它当作“真人CS游戏机”!简单点说微软的RoomAlive是一款“投影仪+Kinect”的体感外设,扫描全房间的几何形态后,把电视屏幕上的图像投影到墙壁。虽然说电视机屏幕仍然是游戏的主要显示器,但是房屋四周墙壁上的“外围图像”可以即时环绕着玩家,Kinect作为深度感应摄像系统来追踪玩家行动,从而实现“真人对战”的功能,比如说“突然转身发现从身后悄悄逼近的敌人”。

微软的“读心笔”

当年乔帮主在设计iPad时曾说过,“如果要是让你看到一只手写笔,我们就会炸了它。”由此可见,乔帮主痛恶的触屏手写笔是多么鸡肋的存在,不过这么多年了过去了,我们却似乎从未等到手写笔绝迹的那一天,至少在苹果零售店中第三方公司的手写笔仍然保持稳定的销量,毕竟“笔”是几千年来人类生活工作不可分割的工具。但是手写笔的问题依旧没有解决,它们“生硬、笨拙、无法读懂用户”。

首先要明白个道理,简单粗暴的读取人心的方法,并不是真的去“看脸看心情”,而是看对方用手在做些什么。举个网友们感同身受的例子,打麻将时并不是看对手们的神色表情,而是看他手上的“小动作”,如何握牌、出牌,这样你也能猜出个一二了。

没错,这次又是微软研究院,他们似乎总喜欢让一些鸡肋产品锦上添花。你看到的这一枝手写笔,笔身有多点触握传感器,能侦测它被握住的方式。于是手写笔加平板电脑的组合,不仅能精确测量使用者的触碰方式,还能测出手写笔相对屏幕所在的位置。研究团队目前已经识别出大约30种不同的人类抓握方式,希望在日后的研究中,将使用者的肢体语言数据与生物力学结合,实现人与平板电脑更高效的交互。

Thumbles 操控触摸屏的像素

触摸屏和我们的平板电脑简直就是浑然一体,每一个按钮其实就是隐藏在屏幕后的一颗小小的像素。不过缺少了实体按钮,有些“动手分子”简直会觉得不痛快。Patten Studio工作室的研究员James Patten利用自主研发的Sensetable技术,设计了一款名为Thumbles的人机交互界面,虽然看上去很像鼠标,但是和鼠标不同的是,它能够直接控制屏幕中的元素,甚至让屏幕背后的像素点们重新排列组合。

虽然看上去酷,但实际也不知Thumbles有什么用。但是对于多年来厌倦了触摸屏的极客们来说,这个产品应该是一款酷炫的黑科技。

GravitySketch 虚拟的3D画板

在空气中画出一张3D图像,简直是不可思议的事情。不过GravitySketch的出现或许可以让设计师们随时随地“凭空工作”。

GravitySketch看上去就像是数位绘图板,但是借助AR技术,使用者配单上3D眼镜之后,就可以在这个完全平面的板上绘制出3D图像。也就是说,用户在绘制的过程中,是可以按照实际的三维方位,随心翻转绘图板,来构图画作的后部、底部和上部的区域。简单的说来,你可以把它当作一款“手绘成型”的3D打印机,但区别是图像是“虚拟凭空”存在的。

 

Adobe的水墨笔

长久以来,我们一直依赖于Adobe家族的各种软件,但却是“敢怒不敢言”。二十年前,用键盘快捷键推进了我们的工作效率;而今触摸屏时代,键盘和鼠标的“死板结合”却似乎阻碍了Adobe前行的道路。

Adobe首席设计师Michael Gough曾说:“不久的将来,鼠标和键盘不能再满足输入设备的要求了。”于是Adobe终于顺势推出Ink和Slide硬件系列,这也是这家巨头软件公司的首款硬件产品,外观上产品即为一支画笔和一把尺子,能够与iPad上的Adobe软件很好的契合。

Ink是一款时髦的蓝牙画笔,旋式水墨笔的设计风格让使用者的触摸得心应手。Slide是尺子,可以在iPad屏幕上绘出数字线条。毕竟鼠标还是轨迹球之类,都不能代替陪伴人类数年前的忠实工具——笔,所以水墨笔与Adobe的结合绝对是浑然天成。

SmartWalk 智能走道屏显系统

对于一些科技小白们来说,前面五款黑科技产品可能有点遥不可及了,至少他们需要的是一些能踏踏实实改善生活的实用产品,比如说解决路痴问题。

SmartWalk是一款 智能走道屏显系统,可以将行车动态信息实时显示在走道的路面上,还能够告诉路人们前往某个地点的具体路线和里程。低头族的我们像鸵鸟一般,走在繁华的大街上,把头埋得低低的盯着手机屏幕,如果能每隔三五步的距离都能看到人行道上的温馨提示,相比是无论走多远都不害怕迷路了。

细节的力量:11个极度专注细节的优秀网页设计

 

11-websites-focusing-on-details-1

著名的室内设计大师Charles Eames曾说过,“细节并不只关乎它们本身,它们还构成了设计。”的确,每一个网页都是由无数的细节构成,而其中的内容也是同样由这些细节连接组织到一起。不论是提供信息服务的网站,还是APP的官方宣传页,任何一个优秀的网站都能够经受得起挑剔眼光的洗礼,从图片到布局,从字体到架构。

网页设计的细节至关重要,因为正是它们给用户留下好印象,这些细节支撑起网站的良好体验,提高易用性。正如同Eames所说,它们成就了设计,不注意细节会让设计感流失。

接下来,我们一同看看这11款设计惊艳的网站。它们的好设计源于细节,有的界面雅致,有的交互出彩。深入揣摩这些案例,也许你的下一个网页设计作品会非常强大。

THE SPEED OF BASECAMP’S PASSWORD VERIFICATION

Basecamp 是一个基于网页的项目管理工具。正如同它的介绍,速度和效率是至关重要的。

这是网站的验证界面,设计师巧妙的事先隐藏了确认的按钮,只有当你输入了正确的验证码之后,OK按钮才会出现。这种措施不仅提高了网站的性能,还通过让按钮从无到有,将“验证码正确”的概念具现化,触动用户,增加成就感。

COLOPHON PRACTICED BY NEOTERIC DESIGN

在欧洲,在书中使用Colophons(题跋)可以追溯到15世纪的时候(中国就早很多了),不过这个网站是为了将其运用到网站上去。这次,Neoteric Design分享了他们网站的制作笔记——各个部分的功能,从字体软件到编程语言和内容管理系统。如果访客想知道一个网站是如何构建起来的,那么这个带题跋的笔记可以帮助用户方便快捷得了解这个网站的构建过程,满足好奇心。

VERSATILE TYPOGRAPHIC GRID BY BERGER & FÖHR

2014年5月去世的先锋设计师Massimo Vignelli曾说过,排版的栅格是“书的内衣”。其实由此推导,栅格系统又何尝不是“网页的内衣”呢?也正式它的存在,让网站整饬而干净。

在Berger & Föhr 为 Boulder当代艺术博物馆的网站进行重新设计的时候,栅格系统的“内衣”作用是如此的鲜明。当你浏览网页的时候,图片、文字段落、导航的边缘都隐约看到栅格的痕迹,你会在这里体会到对齐的力量。更重要的是,即使网站随着屏幕响应的时候,栅格所施加的影响依然存在。

不论网页的内容的属性是啥,使用栅格来严格组织内容是首要的工作。

PRIDE IN PLACE CELEBRATED BY MAKER’S ROW

越来越多的欧美网站开始在团队页面中标注设计师的家乡,声明这个站点的“故乡”。在足球领域,球队的球员介绍页面上,大家都喜欢“自豪地介绍球员来自……”,也正是这种“基于位置”的信息强化了整个队伍的归属感和凝聚力。同理,设计师们的“故乡”信息也有着同样的作用。

DIRECT ACCESS BY TWLOHA TO SOCIAL MEDIA

社交服务是如此之多,动不动俩服务还会在图标上撞个衫啥的,直接导致用户在分享的时候点错地方,而在欧美国家,这种情况更加严重。好在有TWLOHA,用带字体样式的文字LOGO替换图标,识别度提高了,美观度也有所保证。

 

DESIRE BY MINIMAL TO CONNECT

 

通常情况下,网站都会有个“Contact”页面,国内我们通常称之为“联系我们”。但是MINIMAL设计师工作室换了个思路,他们将这个常用的词改成了“Connect”,仿佛在说“来聊聊吧”。这是截然不同的感觉,传达出他们期待与用户沟通的强烈欲望。情怀?人性化。文案很重要。
 

NUDGES TO ACCESS DRAFT

当我们讨论登录/注册页面的时候,可以轻松脑补出页面的造型——其实绝大多少的页面都差不多,本质上也就是个表单。但是有人并不打算随大流。曾经开发出著名应用Draft的Nathan Kontny,他在设计页面的时候,将用户的留言添加到表单右边,将互动与沟通的氛围呈现出来,吸引更多的潜在用户来注册。

从商业角度上来看,这个案例给了我们一个经验:不要羞于展示用户对于产品的赞誉。

COLORS OF CREATIVEMORNINGS

在这个名为CreativeMornings的网站中,每个章节都用不同的色彩标示出来,同作者头像组合到一起。这种视觉元素贯穿于整个网站,这些色块会有下拉菜单,并且有着各种不同的边缘、形状和好玩的样式。加载内容的时候,还有漂亮的加载动效。大胆的用色,精致的细节,这个网站简直是高大上的典范啊。

ULTRA-LEAN SIGN-IN OF PULLEY

设计这个网站的团队曾经打造过著名的创意社区Big Cartel,而这个名为Pulley的网站本质上是一个电商APP,所销售的内容是可下载的数字内容。

要下载内容,只需要密码就可以了。基于网页、无需登录、输入即可下载,这些设定降低了成本,减少了摩擦和错误,也使得体验更到位。
 

PROJECT STORIES OF CRUSH LOVELY

StudioCrush是一个用来展示各种项目故事的网站。网站将叙述方式简化了下来,每个项目本质上就是从开始(项目起源)到结束(项目交付)的过程,中间由关键的叙事线索(过程)桥接起来。

从诸多案例中挑选了这个例子,相比于“客观”,作者更愿意用“野心”来描述他的起始状态;作为结论,没有拖沓的视频和描述,直接上图让大家一同来“欣赏”!就是这么直观,就是这么任性!撇开干瘪拖沓的内容,加上标签,写点干货,呈现内容,让故事可爱起来,这还不够么?
 

SIDE PROJECTS OF KNOED CREATIVE

这是一个关于公司目标和员工的页面,其中写了他们的使命、愿景和目标。但是,不同于其他的类似设计,Knoed Creative通过这个“朝九晚五之外”的内容模块展示了员工工作之余的生活和经历,将这个公司多样化的一面生动地呈现了出来。

动效设计案例!学学这些爱不释手的加载动效设计

我们现在越来越注重细节,小到加载动画,大到界面配色。这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了。所以今天我们要重点说说那些你以前觉得“不那么重要”的加载设计。

等待和加载动效几乎是无处不在了。设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验的必须组件。

虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部分,在许多设计项目中,加载动效几乎做到了无处不在。内页切换的时候可以用,组件加载的时候可以用,甚至幻灯片切换的时候也同样可以用上。不仅如此,它还可以用承载数据加载的过程,呈现状态改变的过程,填补崩溃或者出错的页面,它们承前启后,将错误和等待转化为令用户愉悦的细节。

等待和加载动效中,最常见的表现形式是进度条,但是许多设计师采用了更加有趣的表现手法,接下来我们一起来看看这些案例。

       4:20 Dead Obies

动效设计 加载方式 加载动效 UI动效设计

加载动效并不一定非要用进度条,设计师在这个页面中将LOADING这个词的每个字母拆开,不断复制来呈现加载过程,静态的文字和动态的效果交错,让人在新鲜有趣的动画中度过略显漫长的加载过程。

       NewsTech

动效设计 加载方式 加载动效 UI动效设计

充满科技感的页面设计为整个网站定下了基调,这种面向未来的设计手法在这个页面中体现到极致,加载动效采用了各种数据加载的样式,将等待过程变成了一个巨大的“WOW”。

       Ferias Beach Park

动效设计 加载方式 加载动效 UI动效设计

这个Ferias海滩公园的页面借由有趣的配色和动效传达出欢快的情绪,加载动效中童趣盎然的设计也令人难忘。

       Mad Max Fury Road

动效设计 加载方式 加载动效 UI动效设计

年度神作《Mad Max 4》本就是以突出的视觉设计而令人记住,所以它的官网在设计美学上也保持了一致性。加载动效中那个粗糙但古朴的LOGO也与整个电影风格相呼应,营造出躁动而个性十足的氛围。

       Panda Raid

动效设计 加载方式 加载动效 UI动效设计

网站的加载动效还是保持了进度条的基本设计,但是展现方式上借用了汽车的形象,加载速度不同的时候轮胎滚动的速率也不同,有趣、拟真也和网站主题贴合。

       Wiser Digital

动效设计 加载方式 加载动效 UI动效设计

在加载过程中,设计师用最经典的游戏乒乓球来帮你填补等待的时间,虽然你无法参与到游戏当中,但是这种情怀满满的加载动效给人印象非常深刻。

       Tenfold Creative

动效设计 加载方式 加载动效 UI动效设计

为了填补等待的时间,设计师将朗朗上口的文字做成动效,在加载的时候用它们来与你进行互动。虽然许多文字是一闪而过,但是你可以在阅读中度过这段时间。

       Tham Nguyen

动效设计 加载方式 加载动效 UI动效设计

Tham Nguyen 是一位著名的法国女设计师,她的个人网站中糅合了自然的情怀和女性的细腻,加载动画采用了走路的小女孩儿,俏皮而有趣。

       50m.space

动效设计 加载方式 加载动效 UI动效设计

和前面许多案例一样,设计师采用了扁平风的动态插画来填补等待时间,强化整体风格。

       Madagence

动效设计 加载方式 加载动效 UI动效设计

其实这个加载动效看起来并不够细腻,但是它充分运用了几何图形,四个简单有趣的方格轮流变幻,值得学习。

       Kajikenseiji

动效设计 加载方式 加载动效 UI动效设计

设计师在这个网页中,使用的是吐着气泡的鱼来作为过度,古朴的文字强化了网站的品牌形象,简单的色调和鱼的形象也充满了日系网站的独特气质。

       One Kichjoji

动效设计 加载方式 加载动效 UI动效设计

和之前的网站一样,加载动效采用了单色的灯塔形象,简单有趣但是也优雅地呈现了品牌形象。

 

       Interatction with Artificial Physics

动效设计 加载方式 加载动效 UI动效设计

这是一个精心设计的网站,强调人造和物理的属性,这种兼顾自然和人工设计的特征也体现在加载动效上,四个相互运动的气泡时大时小,看起来自然而混乱,但是仔细看你又仿佛能找到某种规律,这个有趣的过程中你会忘记时间的流动,直到网站加载完成。

       Catch the Dragon

动效设计 加载方式 加载动效 UI动效设计

水波纹扩散一般的加载动效,在黑白色调之下,兼顾了自然的特征和科技的感觉,微妙的互补效应和震动的效果令整个动效简单而赏心悦目。

       SLMF

动效设计 加载方式 加载动效 UI动效设计

大胆的排版和明显的对比让整个页面给人沉稳而舒服的感觉,用数字来呈现加载过程,字体随着加载不透明度会逐步提升,让人感受到过程的变化,简单但是非常值得学习。

       Zodiac

动效设计 加载方式 加载动效 UI动效设计

这个页面的加载动效堪称是梦幻级的,它不仅充满艺术感,而且设计得整齐划一,加上戏剧感十足的背景,兼顾美观和技术的动效变化简直是教科书一般的设计。

       MTV Bump

动效设计 加载方式 加载动效 UI动效设计

打开页面之后,鼠标光标变成了复古的沙漏造型,更让人惊喜的是加载动画是一个不停吞吐着彩虹色带的MTV Logo,复古而有趣。

       Y7K

动效设计 加载方式 加载动效 UI动效设计

Y7K的加载动效其实蛮讨巧的,巨大的LOGO上叠加一个色彩丰富的视频,漂亮而简单。

       The Happy Forecast

动效设计 加载方式 加载动效 UI动效设计

这个网站的动效设计手法并不鲜见,但是设计是不仅仅是添加了进度条那么简单,他还用渐变的动态文字告诉用户正在加载网站的哪个部分。时间很长,但并不无趣。

结语

动效设计是小伎俩,但是它在用户体验设计中的作用是不可估量的,它让折磨人的等待变成了愉悦的消遣。动效设计是大势所趋,加载/等待动效也是其中的重要组成部分,如果你热衷于动效设计,不妨关注一下这个领域。

常见的几种Loading加载动态效果形式赏析

在浏览网页、玩游戏、手机应用等场景,因为网速慢或是硬件差的关系,难免会遇上等待加载的情况,没人喜欢等待,耐心差的用户可能因为操作得不到及时反馈,直接选择放弃。正所谓细节决定成败,这时添加一个Loading进度条动画,就可以大大缓解等待时候的无聊和焦虑,有效让用户明确知道目前Loading的状态,并对结果有一个直观的预期,甚至有趣巧妙的设计,能让用户爱上等待,把等待看成一件很美好的事。

那常见的Loading动效有哪些形式呢?在观摩过大量优秀的案例后,作者总结出Loading动效通常有B.R.A三种形式。为避免误解,下面逐一解释一下:

B,Bar。Loading动画从某种角度也可以说是进度条,一般用于较长时间的加载,通常配合百分比指数,让用户对当前加载进度和剩余等待时间有个明确的心理预期。

最常见的直线进度条。

或者圆形进度条。

进度条和转场完美融合。

也有给LOGO描线的进度条。

R,Rotation。旋转代表时间的流逝,暗示着时钟一样顺时针旋转。不停循环转动的动画,能有效吸引注意力,给用户时间加速的错觉。旋转Loading动画一般用在较短的加载中,要是一直转却始终加载不出来,用户又该烦躁了。

最常见的自转。

顺时针自转暗示着时间的流逝。

巧妙地用两架飞机形成公转。

不规则多向转动,让用户把等待的时间用在研究运动规律上。

A,Animation。如果在Loading时配上一个形象的动画,能大大提高产品的亲和力和品牌识别度,用户大多会接受并喜欢这样的形式,一般品牌形象明确的产品会这么做。

用可爱的奔跑拟人形象来告诉用户:我在很努力加载请耐心等待。

这样萌的章鱼,用户一定舍不得加载界面的结束。

以上就是常见的三种形式,当然创意是无止境的,还有很多Loading动效同时融合了这几种形式,或者用一种全新的形式,比如作者多年前在PSP上见过将小游戏植入到Loading界面中的情况,以至于感叹Loading时间太短都不能好好玩耍了。

About Us

Since 1996, our company has been focusing on domain name registration, web hosting, server hosting, website construction, e-commerce and other Internet services, and constantly practicing the concept of "providing enterprise-level solutions and providing personalized service support". As a Dell Authorized Solution Provider, we also provide hardware product solutions associated with the company's services.
 

Contact Us

Address: No. 2, Jingwu Road, Zhengzhou City, Henan Province

Phone: 0086-371-63520088 

QQ:76257322

Website: 800188.com

E-mail: This email address is being protected from spambots. You need JavaScript enabled to view it.