Archive

Posts Tagged ‘Design’

优秀网页色彩搭配实例设计欣赏

April 21, 2012 Leave a comment

紫萝卜 | 所有与设计有关

via 优秀网页色彩搭配实例设计欣赏.

网站除了需要充实的内容,合理的色彩搭配可以使网站加分不少。色彩是影响我们感官的最直接因素,下面一起与大家分享国外优秀的色彩搭配实例。

espacio creativo

Colorful Websites

10 years in type

Colorful Websites

Brooks – Shoe Advisor

Colorful Websites

Shoppub

Colorful Websites

The Neighbourhood

Colorful Websites

Advertisements
Categories: Design Tags: ,

瑞士雪山世外桃源般的宾馆 POD hotel

April 21, 2012 Leave a comment

煎豆网(JANDOU)—创意生活每一天!

via 瑞士雪山世外桃源般的宾馆 POD hotel.

煎豆网,创意生活每一天!
这又是一个大自然轻吻的设计,瑞士雪山世外桃源般的度假宾馆 POD hotel,该宾馆是由纽约的POD Design+Media设计事务所设计的,位于瑞士的弗利姆斯。住在这里体验世外桃源般的感觉,三个简单的住户单元将提供最实惠,最舒适的住宿环境,即使是在冰冷的冬天。可持续的项目预制模块,不仅可以随处安放,同时提供个人个性化订制,不过价格可能不是一般人能承受的起的哦,他们的价格大概在从11000美元到22000美元之间。
煎豆网,创意生活每一天!
煎豆网,创意生活每一天!

Categories: Design Tags:

20个个性的页脚设计的网站实例

April 20, 2012 Leave a comment

可咔酷 | 网络杂货铺

via 20个个性的页脚设计的网站实例.

如今的Web设计越来越流行比较大的一些页脚,这些页脚设计一般被用作网站的一些延伸导航、搜索、相关的主题、友链等等。优秀的页脚设计可以为页面加分不少哦,下面是20个个性的页脚设计的网站实例,欢迎品尝。

Seyart Design

WeNew Media

Stand & Ea

Magnifica

Grzegorz Kozak

Groovy Web Design

me & oli

Urban Pie

Twither

Duplos by Ricardo Mestre

Bristol Archive Records Talisman

Graduate Talent Pool

Mom & Popcorn

The Pixel

BimbiSicuramente

Mike Dascola

Blue Engineering

Gardener & Marks

InfinVision

James Garner

Source:Designmodo

Categories: Design Tags: ,

任务转场

April 19, 2012 Leave a comment

言多必得

via 任务转场.

译者 微博UDC

生命和自然是一个很大的转场效果。太阳徐徐升起标志一天开始然后缓缓落下标志白昼结束夜晚来临。我们诞生于子宫起源于微小细胞,慢慢成长渐渐老化,直至死亡。

有时,当一件东西从一个状态突然跳到另一个状态,感觉上可能还行但就是不太对。

故意设计的比较慢的转场效果感觉很糟。当设计一个应用、界面或者任意类型的结构化内容时,我们必须要确保当用户抵达一个新页面或新状态时知道他们从哪里来。从一个屏幕或一组内容到其他地方的转场效果应该自然且应该在各种配置下的设备上进行测试以得到更宽泛的效果感受评估。转场太快,可能令人有断裂或跳跃感;太慢,用起来很绝望。

当讨论到设计时,“转场”这个词通常会唤醒人们对于ppt或用廉价视频编辑软件做出来的自制电影的印象。但所谓转场过渡不仅只是如此。

转场让我们在不同状态间跳转,一天好几次。大多数时间,这些转场效果是完全不可见的(他们应该就是这样),直到他们被拿走了我们才认识到原来他们在那儿。本文讨论了转场效果以及完美设计的转场效果通过传达了一种控制感及便捷导航来增强用户体验的内容。同时也将讨论为何不好的转场效果会损害用户体验。

什么是转场过渡?

在定义上,转场的意思是“某种形式或类型之间的变化,或者是这种变化的过程。”之前已提过,我们一直无意识地在做转场变化,并且这些变化扩展了电脑界面。一个设计的好的转场效果就像是告知了用户他们用哪条路径快速的从A点到了B点。

众所周知,转场在界面设计中很常见,但同时也在电影和产品设计中被使用到。在产品设计中,转场由触摸、移动或者对于产品的物理搬动而触发;而在界面设计中,转场由应用界面或内容之间的跳转而触发。转场效果应该是可以给用户提供他们究竟在界面之间处于哪个位置这一信息。

转场的例子:

电影

在1971年的电影Willy Wonka & the Chocolate Factory的开场镜头里,金票获得者们为了一睹难以捉摸的Willy Wonka出现而聚集在神秘的工厂门外。

Frames from Willy Wonka & the Chocolate Factory (1971)

如镜头展现的,观众的视线从人群身后,穿过门,朝向工厂;另一台摄影机角度取的人群身后到工厂大门之间;我们的视线时而在Wonka身边看着他一瘸一拐走在红地毯上;时而从他身后看着他。尽管从摄影机角度上来说没有可见的在这两者之间的转场效果,观众仍可以十分清楚地理解视线究竟位于何处。

观众是坐在他们舒服的沙发上看电影的然而他们仍有一种身临其境的感觉。这是一种情绪上的转场效果。

界面

如果你有一部iPad或者iPhone,拿起来点击进入设定。轻击菜单选项看一看屏幕如何从右至左以及从左至右地切换。滑动任一界面至底部看一看那个提示已到内容底部的轻微跳动。这些简单的转场效果小心谨慎地传达给用户他们在操作系统里处于何种位置。只有缓慢播放这些转场效果才能注意到位于状态和状态之间的这些微小细节。

iOS transition effect in slow motion from Lim Chee Aun on Vimeo.

尽管我们的视线不像是在电影中某一物理位置,操作系统仍通过转场效果给用户提供空间感。当用户轻击菜单按钮时,屏幕向右切换展示下一步操作,或者向左切换展示之前的操作。

Google在windows系统上的chrome浏览器展示了另外一种简单转场,具体可见如下视频。当打开一个新的tab页时,可以发现从左侧会出现一个简单动画效果。而当关闭tab页消失前又会有一个小动画。

Android和iPhone上都可以使用的应用Path,充满了各式各样状态之间的有趣转场效果。

当应用打开时,用户从启动画面通过一个快速翻页效果跳到实际内容页。点击主菜单将弹出几个菜单选项,关闭菜单后这些选项将弹回。这个细节告知用户选项是从哪里出来的,也许用户并不一定会意识到,但这仍是整个用户界面中的一个重要细节。

Path – Introducing Path 2 from Path on Vimeo.

应用scorekeeper有一个看起来非常简单的界面。大色块和直角边带来一种易用感——视觉设计也充分体现了这一点。但仔细看。该应用的转场效果颇具美感。当一名选手在游戏中得分,该应用会在列表中更新排名,用一种绝妙的过渡效果将选手从原始排位移动到现有排位。

(需翻墙)

产品设计

恐怕在这里又不得不用Apple举个例子了。如果你曾买过一台iPhone,肯定会注意到它的包装设计。不光滑薄片材质做成的紧凑包装盒的每一个细节都设计到位。提起盖子造成的真空效果表明你并不只是在打开密封,破坏盒子,盖子缓慢被抬起的过程是揭示了设备的闪亮登场。这个开盒的动作可谓是一个物理转场。

Mission Transition from Mark Cossey on Vimeo.

尽管不是一个很明显的转场,MacBook的电源灯在睡眠状态下徐徐呼吸。这个转场有意思在若隐若现的显示方式模仿了沉睡者的呼吸节奏。之所以被认作一种转场过渡是因为它从视觉上象征了一种状态,这种状态既不是开启也不是关闭,而是介于两者之间。

(需翻墙)

汽车

现代汽车充满了各种引导驾驶员在各种状态之间过渡的绝妙转场效果。比如说,车前灯在关闭车门时亮起,扣上保险带启动引擎后渐渐熄灭。这个微妙的光线让用户实现了身份上在一个转场之间从普通行人到驾驶员平滑转换。

自然

当我坐在椅子上打这篇文章时,我可以从左至右的转动头。通过这个动作,我的视野转换了。如果我想要看左边的东西,我转动头——通过这个转动过程可以抓住触及视线的一切事物——直到视线停留在注意力中心。请观看视频中人体是如何从一个状态转换成另一个状态的。

Stunt Poetry from Rishi Kaneria on Vimeo.

为什么转场如此重要?

我们作为设计师竭尽所能让内容更容易找到、容易阅读并且充满艺术美感。而随着科技进步、数据处理器越来越强大,人们用以阅读内容的设备和系统将向前更进一步,我们将开发更新方式来展现这些内容。就像被迅速接纳的触摸操作,手势正也变得越来越重要。正因如此,我们需要让用户在应用中拥有位置感,转场在此之中会变得尤为重要。

现在大多数的页面内容都被归类为“页”:点击或者轻击链接显示了藏在链接之后的页面。页与页之间的跳转非常少见,我们已经习惯于这种内容展现方式。但设计师其实可以引入有用且漂亮的转场效果到网页中——比如通过应用jQuery ScrollTo——但这些转场效果可能会由于如下理由有些简陋难看,比如过慢的网速,大量的处理请求以及由JavaScript决定的效果速度。

转场过渡的好案例

将转场动画充分融入到设计中有许多方法。接下来是一些建议:

* 避免在点击、触摸或者滑过操作中任何停顿。
硬件速度一直会是一个硬伤,但很高兴芯片、处理器以及内存每秒都变得更快,所以测试你的代码和加载时间以确保没有延迟。

* 在真实环境里测试。
没有比在真实环境里测试转场更好的了——特别是设计移动产品,因为移动中的人花更少的时间和注意力在导航上。在超市里或者火车上用原型进行测试,并观察在压力下转场效果表现如何。

* 留心未来。不要重新改造轮子。
近来,我们用点击、触摸、滑过以及对话等各种方式与应用交互。然而,手势将很有可能成为另一种操作内容的新方式,所以从现在起试着思考这个问题。如果人们将可以使用身体(而不是手指或鼠标)通过各种形式来控制屏幕,我们将不得不考虑时间、速度以及物理条件——也就是,手势移动内容的速度需匹配内容本身移动的速度。设想一下尽全力投掷一个网球但结果球只移动了几英尺的挫败感。如果转场的时间点设计的不够理想用户也将感受到同样的挫败感。总的来说,照搬操作系统的惯例总没错,因为与用户熟悉的转场样式大相径庭很容易导致困惑感和挫败感的产生。所以,不要在设计新转场效果上犹豫不决;维持标准样式即可。

总结

好的转场效果对于用户来说应该是几乎不可见的。转场帮助用户理解他们试图要看到的以及他们从哪里而来,这一切应该快速且流畅。延迟或停顿损害了整体用户体验并且暗示用户可能出错了。当UI播放仿佛患上运动病,早就习惯了的流畅页面切换突然静止了一到两秒,用户会以为遇到了错误。这是我们理应避免的转场效果。

微博UDC原创博文,欢迎转载并注明出处,欢迎订阅 ) 

Categories: Design Tags:
%d bloggers like this: