澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:2011年网页设计趋势,网

做靠谱交互动画的 5 种方法

2015/04/19 · HTML5 · 交互动画

本文由 伯乐在线 - Abel 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:24ways.org。欢迎加入翻译组。

从我在这个网站上开始写《Flashless Animation》这篇文章到现在已经两年了。从那时起,交互动画已经从像圆润的APP一样的用户界面到交互式杂志在网站上流行。对网页交互动画师、交互开发人员、用户体验师、用户界面设计人员和许多其它与交互动画有关的人员来说,这是一个多么令人兴奋的时间。

但是匆忙的设计交互动画,似乎表示我们很少讨论是否必须要使用交互动画,而是更多地讨论我们用交互动画能干什么?我们花费很多时间为怎么以 60fps 使所有东西可以动画而着急,而不是设计一些方法让初级用户避免障碍。

我喜爱网页动画,并以它为生。我知道动画能被滥用,而且我们都拿flash-trubation来娱乐。但是在网页设计期间积累的教训,我们忘记它是如此的快啊。视差滚动效应也许是对这原因产生的大概介绍。在Flash和网页动画API这一令人深思的时期,我们确实学到了很多。

所以这里的五点建议,我们可以用于把处于交互动画滥用边缘的使用者拉回到高水平上。有这几点建议在心中,我们可以让2015的网页动画年真正地属于它自己。

有目的性的使用动画

很遗憾,大量的Web开发社区认为动画是装饰性的。UI设计师和交互开发人员当然理解的更到位。但是当我给一个工作室培训交互动画的时候,我知道我的学生是在和一些决策者做艰苦的斗争,这些决策者认为有动画会非常美妙并要求尽可能的在项目的结尾附上动画,而我的学生则认为不然。

这种观念差异很难动摇,但是当我们精心做动画的时候这种观念差异也许就会消失。附加动画带来的危害比益处要多,这点很少被用户考虑。例如,用户也许会抱怨动画太快或者太慢,或者他们不知道动画在展示什么。

当我今年参加 Chrome 开发峰会的时候,我有和 Roma Shah 交流的机会,她是 Polymer Material Design 背后的 UX 主管。我问她有什么建议给在设计当中使用动画和转场的设计师。她简单的回答:有目的地使用动画。如果你不能慢下来想想如何做交互动画并代表用户做一个充分知情和精心制作的决定,那么你最好不要做这个尝试。动画需要花费精力来制作,而一个差劲的动画比没有更糟糕。

不止《生活的错觉》这把书中提到的动画 12 条准则

我们总是试着在激发我们兴趣却毫不相干的事情之间找到相关性。最近越来越多的人把《生活的错觉》放在挨着《理解漫画》这本书的同一个书架上。这些书给我们带来很多来自其它领域的有用的观点。然而,我们不应该在网站上犯类似与漫画书与动画片的错误。虽然它们可以帮助我们用新的角度理解我们的工作,但是这些概念会或多或少产生上述混淆两者概念的作用。

我一直在慎重地思考《生活的错觉》,迪士尼动画工作室的经验丰富的工程师们在书中提出了动画十二条准则。这些规则对做动人的、逼真的动画非常有用,如像弹起的球、蹦跳的松鼠、绚丽的物理极光一样的页面转场动画。但是什么时候或者怎样把一个动画作为一个大型交互体验的一部分,这些准则没有对这些问题做方向性的指导。比如一个下拉操作需要多久才能伸展完毕,或者一组可操作对象是应该按照顺序,还是按照整体做成动画。

这十二条准则仅仅是一个开始地方,除此之外我们还有其它很多东西要学习。我已经写过至少六条应用到web和app的设计交互动画功能。当我们思考做交互动画时,我们不仅仅考虑做什么动画、动画的物理学,还要考虑为什么要做动画,怎样做动画。如果动画是多余的或者令人费解的,再严密的物理设计也是徒劳的。

有用、有必要,然后是漂亮

有一句行内话:除非一个动画既是必须又是有用的,要不然不要做它;如果它既是必须的,又是有用的,那就毫不犹豫去把它做漂亮。当说到动画和网页,目前很少有文章写什么样的动画是有用或者必要的。我们大部分都是倾向于做漂亮、令人愉快、令人有趣的动画。虽然动画的外观漂亮很重要,但是外观是仅次于用户的整体体验的。

第一次我在掌机看到黄色口袋妖怪的开机动画时,我被迷住了。到了第六次的时候,当Freak的游戏图标出现在屏幕上时,我被开始按钮搞的厌烦了。当我们在做设计的时候,令我们高兴和有意义的东西对用户来说却是未必的。像黄色口袋妖怪令人欣喜的开机动画一样,纯粹令人愉快的动画即使是被用户欣然的接受,但是太多次的重复却最终无意义的动画,用户就会慢慢对该动画产生厌恶之情。

如果一个动画不能在某种方式上帮助用户,如让用户知道他们在网站的什么位置或者一个页面上的两个元素是如何彼此相关的,那么它是在耗费电池并在不停地产生仅仅令用户高兴的效果。资源很少得到合理的利用。

动画不是仅仅为了令用户高兴,首先,我们必须能让动画给用户清晰的表达两个意思。以从 Finethought.com 网站上这个菜单图标为例。当我们点击这个菜单图标时,它向我们表达了两个意思。

1.这个菜单按钮用动画给用户以反馈,表面这个图标已经被点击了。

2.这个菜单按钮表明通过点击关闭图标,页面的内容将会发生改变。

假定我们有两个好的理由来做交互动画,那么就会有理由来取悦用户。

以四倍速度让动画更快

有一个传统动画的概览法适合于网页动画:不管你的动画应该持续多久,把动画的持续时间减半,然后再减半。当我们设计动画几个小时之后,我们对时间的感觉会变长。对我们来说速度很快的动画,对大部分用户来讲已经到了无法忍受的慢。事实上,最近来自于用户对网站动画接口的绝大数批评似乎是:“它太慢了。”一个好的动画是不唐突的并且速度是非常快的。

如果让你的动画持续时间处于一个最佳值,那么请把动画持续时间减少到原来的四分之一。

安装一个关闭开关

不管一个动画是多么的富有见解和必要性,总有一些人对动画不感冒。对这些人来说,我们必须增加一种方式来让他们关闭网页上的动画。

幸运的是,网页设计师已经在考虑赋予用户一些自己做决定来改变网页体验的权力。以下面的动画为例,这个《小鱼商店》的动画电影网站允许用户关闭视差效果。虽然它不能移除全部动画,但是这个网站确实减少了动画的视觉给用户带来的头晕的感觉。

在我们网页设计的工具库中,动画是一个强有力的工具。但是我们必须小心:如果我们滥用动画,动画也许会带来不好的效果;如果我们低估动画,它就不能完全发挥它的作用。但是如果我们恰到好处的使用动画,当既有必要又有用的使用动画,赋予用户关闭的动画的权力,那么动画会变成一个帮助我们建造一些用起来简单、带给我们快乐的东西。

让我们把2015的网页动画年带给用户吧!

赞 收藏 评论

原文:How We Developed ColorMatchTabs Animation for iOS

在设计和编程之间只有薄薄的一线,当我们进入新的十年时,这条线变得越来越模糊。在Photoshop上绘制漂亮的模型就够了吗?5年以前也许如此。在今天,普通的网络用户要求的更多。所有的东西都很漂亮,但没有实质内容,过段时间人们就会厌烦。如果你唯一的目标是用你漂亮的设计影响圈内其他设计师,你会发现你很快就落伍了。2011年不关心漂亮,而是关心功能。新的一年甚至十年的趋势是交互设计、粘度和虚拟现实。

网页设计中的隐藏菜单示例,网页设计菜单示例

原文出处: designmodo   译文出处:网秦UEC   欢迎分享原创到伯乐头条

澳门新浦京娱乐场网站 1

在网页设计中使用导航图标这一趋势正迫使我们再度审视导航菜单、它们在设计中的位置以及在用户体验中的角色。尽管这一理念并没有弱化其在导航方面的意义和重要性,但其能够给设计师和开发人员带来更多的创意空间。

根据项目的不同,导航图标彼此区别很大,但是其中大多数会偏向于使用流行、简单、贴合移动端的三行图标,这一类图标外观漂亮,而且在几乎任何环境下都比较带感。这个小图标能够用来隐藏小菜单,也能够隐藏复杂、内容量大的菜单。

如果再给打开过程配合上动态化的功能或细微但吸引人的效果,那么这种古朴的图形更能优化设计。另外,其不仅能够应用于各类导航(明确传达信息),还能帮助解决响应性方面的问题,并促进与移动网站的结合。

下面是一些采用隐藏菜单配合导航图标的网站设计,都是鲜货。

 

eWebDesign

 

本例中,我们可以看到大量的图像背景和视差效果。菜单图标放置在大标题的右上角,打开后有非常详尽的导航菜单指向其他板块。

澳门新浦京娱乐场网站 2

 

Sampedro

 

标题栏的显眼图片和诙谐的slogan,这二者的组合能够绝对地吸引用户的注意。隐藏导航栏有效地以不突兀的方式将重心从导航栏转移到了复杂的背景上。

澳门新浦京娱乐场网站 3

 

Chapoleone

 

Chapoleone采用了华丽的照片背景,流露出奢华精美的感觉。在这里如果用综合式的导航栏就会破坏整体的冲击力,因此左上角隐藏在小图形后方的滑出菜单绝对相得益彰。

澳门新浦京娱乐场网站 4

 

Maecia

 

Maecia通过其诱人的动态效果和精美的背景将好奇的人带入了其作品。为了不让网上的访客迷乱,其主页采用了鼠标单击打开的隐藏导航栏。

澳门新浦京娱乐场网站 5

 

We are Empire

 

We are Empire证明了基于古典色调和大量留白空间的最简设计也能有华丽而诱人的外观。在这里,隐藏菜单极佳地补完了整体外观。

澳门新浦京娱乐场网站 6

 

Brand Junkie

 

漂亮的圆形复古风格logo非常抢注意力,让人第一眼就难以忘记。导航图标与整体环境完美贴合,甚至第一眼都找不到,要过几秒钟才能慢慢映入眼帘。

澳门新浦京娱乐场网站 7

 

Intelart

 

Intelart美妙的暗色首页完美运用了背景与前景的对比。其左上角无缝贴合的汉堡按钮与logo和文字完美回应,以美妙的方式呈现出了一副以图片为核心的精美导航栏。

澳门新浦京娱乐场网站 8

 

Monograph

 

Monograph的导航图标完全不像是习惯上的三行按钮,但是这一有趣的方式却使其成为了整体环境的重要组成部分,与其他内容完美结合。

澳门新浦京娱乐场网站 9

 

Camp David Film

 

尽管主导航栏习惯性地占据了标题栏的位置,但公司团队却巧妙地隐藏了二级导航栏。二级导航栏可以让用户进一步通过分类探索网站,节省了大量的空间以便展示漂亮的照片。

澳门新浦京娱乐场网站 10

 

Michael Villeneuve

 

Michael Villeneuve选用了非常趁手的简约化关键。通过结合俏皮的轮廓线图形、吸引人的小动画和简洁的实心彩色背景,其营造出了美妙而独一无二的用户体验。

澳门新浦京娱乐场网站 11

 

Exit Film

 

Exit Film采用了网页设计潮流中比较新鲜的集中布局风格。其汉堡按钮占据了中心位置,与非正统的页面安排完美和谐。

澳门新浦京娱乐场网站 12

 

La Ligne Rouge

 

这里的导航图标目的是完善整体设计并强化印象。导航按钮采用了精美的曲棍球棒,与logo相互呼应,巧妙融入主页页面。

澳门新浦京娱乐场网站 13

 

Xander

 

通过全屏滚动展示的别致图片,网上的观众完全不会因为缺乏主导航栏而感到麻烦,更不会感到烦人。这里隐藏菜单是个绝佳的选择。

澳门新浦京娱乐场网站 14

 

Tannbach

 

尽管使用汉堡按钮是主流,但你还是可以返璞归真,把菜单隐藏到简单的拖拽使用面板后方。Tannbach就使用了这一方法。不过,其做法不乏互动和美感。首页漂亮的图片和背景巧妙地容纳了部分动态导航元素,可以说是绝配。

澳门新浦京娱乐场网站 15

 

Cofa Media

 

Cofa Media通过其描绘公司工作流程的有趣视频背景来吸引用户。略微细长的汉堡按钮巧妙地展现出主导航栏,进而占据整个屏幕,提高用户体验。

澳门新浦京娱乐场网站 16

 

Alt_Cph14

 

Alt_Cph14拥有独一无二绝对能够抓住人注意力的外观。其数字化的设计匹配了很多脉冲干扰效果,外加扎眼的蓝色单色背景营造出了鲜明的印象。简单原始的汉堡按钮与整体主题相得益彰。

澳门新浦京娱乐场网站 17

 

Ball&Claw

 

Ball&Claw 通过精美的图形、巧妙的文字体系和经典的配色展示出了美妙的家装感觉。导航图标与主页设计完美搭配,带来了一丝高贵感。

澳门新浦京娱乐场网站 18

 

Hooch Creative

 

首页不要任何视觉元素使其文案成为了主角,占据了首要位置。标语在这种环境下显然具有巨大的视觉重量。菜单图标也起到了一定的辅助作用。

澳门新浦京娱乐场网站 19

 

Sam Dallyn

 

Sam Dallyn成功地将用户的注意力引导到了作品上。网格化、中心布局效果不错,很好的强调了视觉元素。所有内容看起来都很精美漂亮,甚至是左侧侧边栏上不显眼的小汉堡按钮也和设计主线相互应和。

澳门新浦京娱乐场网站 20

 

The First 50 Years of Bose

 

首页整齐地分为两个板块,可以用鼠标单击激活,包含了多种动画控制方式。汉堡按钮用肉眼几乎看不见,但又是整体作品的关键部分,其可以作为网上读者的方向标。

澳门新浦京娱乐场网站 21

 

Demodern

 

Demodern采用了独到的导航图标,与视频背景形成鲜明对比。另外,其可爱的几何图形让菜单与主页设计巧妙结合,给用户带来了优秀的阅读感。

澳门新浦京娱乐场网站 22

 

结束语

导航图标能够补充并提升不同网站的设计。不管是要让用户关注作品的作品集,还是文案为主导的普通公司网站,其都在其中占有一席之地。

原文出处:designmodo译文出处:网秦UEC欢迎分享原创到伯乐头条 在网页设计中使用导航图标...

韩文、中文和日文文字外形相似,所以国内的网站除了中国风之外,还能借鉴日韩的风格。韩国网站我想大家也见过不少,他们特别喜欢使用Flash来制作,效果超弦(Why? 因为他们网速比我们快7、8倍…)。而日本网站呢,他们用Flash?响应式?还是扁平化设计呢?

关于作者:Abel

澳门新浦京娱乐场网站 23

简介还没来得及写 :) 个人主页 · 我的文章 · 10

澳门新浦京娱乐场网站 24

在应用中有很多方式去组织导航栏:tab barsside menusTinder-like swipes ,然而,大多数现有的解决方案都有一个问题,对于大屏幕手机是很不方便的,用户必须通过去不断地点击图标来切换屏幕。

2011年你会如何设计呢?设计师的最终目标是留住用户,而不是让人炫目。所有得到惊讶声和赞叹声的设计师都很容易被忘记。高超的设计师可以创造出一种环境,吸引并迷住用户到不想点击"返回"按钮的地步。几个元素汇聚在一起,组成一个奇妙的幻境:和谐的色彩主题、直观的设计、易用的信息和快速的反应。另外,永远不要低估简洁的力量。当然,情况一直如此,但在2011年,你将不再仅针对电脑桌面和笔记本,还要为智能手机、上网本、Tablet等等设计。你准备好了吗?

接下来设计达人网小编为大家精选一组优秀的日本酷站,在收集日本网站的同时也让小编惊叹了,日本的网站设计以及使用的Web技术相当不错,本以为日本的工业设计好,想不到网站设计水平也相当高。

我们决定分享我们创建用户界面动画的概念,解决了在大屏幕上的应用程序导航的问题。

看看2011年前11个趋势。

日本网页设计:很多已经使用新的网页设计趋势,如视差滚动、全屏背景、全屏视频等等,很少使用Flash,特别注重网页的配色、版式和交互设计,整体网页布局新颖,不少网站使用了可爱的漫画式手绘风格。

澳门新浦京娱乐场网站 25

1、更多的CSS3 HTML5

多么令人满意啊!在过去几年里,CSS3和HTML5只出现在网页设计那遥远的地平线上。但现在,在2011年,我们看到了它的爆发。设计师们终于开始让Flash走开。你可能感觉到,Flash和一些对你当前和潜在用户有用的最新最热技术,配合的不是很好。在2011年,你会慢慢远离Flash,拥抱被称为HTML5的魔术。看看这组惊人相似的比较:

澳门新浦京娱乐场网站 26澳门新浦京娱乐场网站 27

现在已经显示,Flash和HTML5是不相等的对手。在2011年两者都有大量的应用空间。问题是设计师们在2010年(和之前)滥用了Flash。举一个例子,很少整个网站由Flash组成,特别是这些日子。HTML5减轻了Flash的一些负担。不过,HTML5还不能完全取代我们由Flash实现的那些非凡的设计元素。

也许更让人兴奋的是,CSS3在今年可以投入使用了。移开Photoshop(哇,Adobe还是不能休息),CSS3可以更快实现文本阴影、圆角边框和背景透明。如果你还没有开始,现在就开始钻研了解CSS3和HTML5吧。

Web前端技术方面:已有部分网站开始HTML5、CSS3技术,虽然使用这些新技术,但在IE8兼容方面还是做得很好的,有的不兼容IE8的会做一个浏览器兼容提示。

content_review-app-concept.gif

2、简洁的配色方案

简洁。没有什么比在安静的背景上显示清晰的消息更安静了。安静可以被解读为几种不同的方式。忘掉黑白和灰度阴影,想想绿色、黄色或甚至红色作为你的主色调。不过,限制你的调色板只有两或三种颜色,试试各种颜色不同的灰度。用少量颜色表现信息是非常了不起的。观察一下:

澳门新浦京娱乐场网站 28

绿色阴影创造了这个Twitter可视的工具。边注:这个网站是用XHTML/CSS和java script创建的。

澳门新浦京娱乐场网站 29

如果做的不好,红色很容易产生冲突。这个网站用高对比的易读文字克服了红色本来的特性。

下面一起来欣赏这些优秀的日本网页设计作品,希望对你的新项目带来灵感吧,Enjoy!

[ ColorMatchTab 动画,在 DribbbleGithub 可以查看]

3、适用于手机

智能手机、iPad、上网本,哦天哪!一个令人眼花缭乱的手机产量在2011年提供给消费者。这意味着你的网页设计必须适应多种窗口。

创建一个适用于手机的网站不是简单的从你的设计中去掉那些花哨的东西。这只会产生一个空虚无个性的设计。虽然不太可能,但从你的原始设计中去掉那些魔法,变成简单陈述你的品牌,这非常困难。幸运的是,技术正在快速解决这些麻烦。

借助CSS3的帮助,主要是media queries,手机网页设计有一个大的飞跃(以后详说)。最重要的一个进步是,你可以设计一个整站并允许你的编码遵从用户的可视区域。

设计一个专门的手机网站可能很有诱惑力,但这可能不再能满足你的观众了。越来越多的手机网站包含了访问原始网站的选项。如果你没有提供这一选项或你的原始网站没有为手机标准优化好,你就没有为2011年做好准备。预测显示,智能手机今年的销量将超过个人电脑。准备好你的设计,满足这一需求。

hanamichiya

ColorMatchTab动画有什么用?

开发这个动画是为了说明一个概念在我们开发的一款评论应用,这个应用将显示用户周围的有趣的地方,也可以他们留下评论和阅读其他人留下的评论。动画显示了四种不同的类别:产品澳门新浦京娱乐场网站,、地点评论朋友,就像四个不同的屏幕。

我们在 Relativewave 完成了这个动画的原型,Relativewave 是一个非常好的制作原型的工具。

ColorMatchTab 动画我们为了区分不同的类型的 tab bar 采用了彩色的图标。为了避免混乱,每个图标,以及每个颜色,都是唯一的一个特定类别。当 tab bar 的其中一栏变成活跃,一个填充着相应的颜色,并且出现相应的分类标题的圆角矩形使它非常突出,这样非常清楚哪些tab bar是当前活跃的。

用户所看到屏幕是整体的一部分,通过应用引导用户进一步了解每个屏幕。Call-to-action 按钮很容易发现,并帮助用户用自己的方式了解应用。

我们使用了 FAB(浮动操作按钮)来创建一个 Call-to-action ,是很难不被注意到的。容易实现在屏幕底部中间部分创建这个按钮,特别是对更大屏幕的设备。

当我们的设计师创造了这个概念后,我们的任务给动画带来生命力。

正如你可以看到下面,我们开发了几个动画组件:一个底部栏,一个顶部栏,有内容的页面,和屏幕的转场。每一个组件都有开发难点。

4、视差滚动(Parallax Scrolling)

视差滚动:不是指老早的电子游戏。如上所述,2011年这一热门设计趋势是创造一种深度感。还有什么方法比视差滚动更好吗?视差可以影响用户产生一种三维空间的错觉。它可以由一些简单的CSS技巧或jQuery插件如Spritely的帮助实现。视差滚动可以作为设计中最重要的次要元素,例如,在页头、页脚,或背景。把它放在导航可能会迷惑你的访问者。

澳门新浦京娱乐场网站 30

Old Pulteney Row to the Pole网站在背景中使用了由上至下的视差滚动效果。这增加了一种很微妙的深度和许多乐趣。

只由CSS和HTML创建的视差滚动,由Roman Cortes创建。

很漂亮的水彩背景,网站的右侧菜单效果很赞!看来很多日本设计师的手绘功底都很厉害啊!各位小伙伴,你懂手绘了吗?

底部按钮

为了实现这个底部按钮我们调整每个元素,使它们从圆心等距。开发人员可以根据他们的需要改变圆的半径,从而在圆的周围调整元素的位置。您还可以调整尺寸大小和动画持续时间,并选择您喜欢任何图像作为图标。

澳门新浦京娱乐场网站 31

content_reviews.png

5、为触摸屏设计,而不是鼠标

技术已经越来越变得触觉化。可用性正从抽象转向具体。这意味着,不是操作你的鼠标去远程连接,你的目的地就在你的手指尖。Tablet、大多数智能手机和一些台式机都使用触摸屏。你的设计可以容纳用手指导航吗?

你的多少设计是以鼠标为导向的?作为设计师,我们尊敬鼠标。当鼠标悬停的时候,我们的链接正在发亮。然而在触摸屏中没有悬停这回事。你的设计如何向访问者显示链接呢?下拉菜单怎么办呢?在触摸屏设计中这也是不行的。

同样的,访问者将如何细读你的网站呢?有争议的是,网站可能是为标准网页浏览器创建的,而在触摸屏中,水平滚动可能更适合。很好的适应这一情形的是杂志一样的布局,访问者几乎可以翻阅你的网站。

最后,考虑一下,将流动布局作为交互设计义务的一部分。在2011年,你不再应付屏幕分辨率的大小。访问者会从垂直的浏览方向改变到水平的浏览方向。你的设计必须是灵活的,能适应任何挑战,否则你将停留在2010年。

澳门新浦京娱乐场网站 32

婴儿在看iPad的魔术!

6、网页设计中的深度知觉

不,我不是在说"我能在你的网站看到你的咖啡杯和键盘"那种两年以前的设计。深度知觉是指在网页设计中创造一种维度,让你的网站的某部分看起来更靠近浏览者。如果做的好,能让人想起一种虚拟的3D效果。还记得在看3D电影大片时的感觉吗? 像阿凡达?毫不夸张的说,里面的元素简直要跳出屏幕了。

虽然3D技术还没有普及到网页设计,你仍然可以在设计中复制这种深度。

澳门新浦京娱乐场网站 33

这个好玩的网站提供了一个可旋转的3D地球,用良好的阴影和层次创造了一种深度。

澳门新浦京娱乐场网站 34

醒目,聪明,这个庆祝Jordan(不管是男人或鞋)的主题网站非常具有娱乐性。3D元素如此清晰简单,使人大吃一惊。

澳门新浦京娱乐场网站 35

顶部栏

一年前,苹果宣布了一项新的UI组件称为 UIStackViewWWDC sessionApple’s documentation )。 UIStackView 允许你创建多个没有任何约束的成员视图。你只设置分配模式和它怎样工作。在内部机制下,它会自动布局。但这对你来说意味着什么呢?这意味着你不必添加约束,在你需要的的时候你可以这样做。如果视图是隐藏的 UIStackView 也会自动调整约束。

这个实现非常简单 - 我们会展示在 UIStackView 下的各种各样的 UIViews

您可能注意到顶部菜单是导航栏的一部分,有几种方法来实现一个自定义导航栏。苹果有一个很好的示例项目,显示如何创建自定义的导航栏(特别是扩展和自定义导航栏)。我们决定使用一个扩展的导航栏,但您可以选择一个自定义的导航栏来提供更多的原生行为。

7、大图背景

大尺寸背景在2011年将会激增。这些图片会是高分辨率、并覆盖整个网站的。大照片可以瞬间抓住你的观众——他们无法不看到它并对它有一个印象。背景图片必须适应内容,只是简单放一张漂亮的图片而没有上下环境会破坏用户的体验。趋势表明,柔和的和轻微透明的背景不会盖住你的内容,而是与之协调一致。

澳门新浦京娱乐场网站 36

这个网站使用率一张高分辨率的照片,整个主色调是黄色的。

澳门新浦京娱乐场网站 37

这个网站在大尺寸背景上增加了一些好玩的动画。警告:自动播放的音乐。

浏览网站

页面内容

页面是通过 UIScrollView 构建的,并且包含视图控制器在里面。

通过检测当前索引的内容偏移量,当一个视图超过50%出现在屏幕上。这个索引值将会发生变化,然后我们观察到当前的内容偏移量来检测变化。

当我们从第一个到第四个 tab bar 切换的时候,为了避免屏幕闪烁,我们先隐藏在屏幕的所有内容,然后在切换后再次显示所有内容。这是 ColorMatchTabs 动画的一部分。我们没有使用 UIPageViewController ,这是一个明智的选择,因为它实现起来达不到同样的流畅性能。

我们也不需要重复使用视图控制器,因为 tab bar 预计不会有超过五个(就像 UITabBarController )。这个类的这个接口也类似于 tab bar 控制器,你所需要做的就是设置一个视图控制器的数组

澳门新浦京娱乐场网站 38

content_menu.png

8、大胆的域名&组合

虽然严格意义上这不是网页设计的问题,还是期待看到更有创意的域名。一度令人垂涎的.com域名已经失去了许多吸引力——主要原因是你必须在注册域名时想一些别人没有想过的词语。2011年将会看到越来越多的企业不用.com而选择更稀奇古怪的域名如.me或.us。想想这种可能性,在还没有普及之前选好一个吧。

澳门新浦京娱乐场网站 39

.me是一个用于个人作品或博客很好的域名,特别是你想要一个不同于企业品牌的独立标识。

澳门新浦京娱乐场网站 40

另一个.me组合的例子

dascorp

转场

用户按下底部按钮(粉红色按钮),屏幕之间切换时都需要通过转场。

新的视图出现从底部的按钮的中心,逐渐扩大,直到它取代以前的视图。我们实现通过 CircleTransition 类来实现转场动画,并且实现相应的 UIViewControllerAnimatedTransitioning 协议方法。

这个只显示圆内视图,隐藏圆外视图的圆,是通过 CALayermask 属性实现的,这表明圈内的一切隐藏一切超越它。要达到这种效果我们使用 UIBezierPath 两实例化两个圆圈,一个小尺寸和一个足以覆盖整个屏幕大的圆。我们还创建了一个新的 CAShapeLayer 暂时的圆遮盖,最后的动画发生在这两个轨迹之间。

控制器使用的动画遵循 UIViewControllerAnimatedTransitioningDelegate 协议。接受该协议控制器,我们要显示或隐藏,并要求我们返回一个接受 UIViewControllerAnimatedTransition 协议的对象。

这个转场具有以下属性:

  • 起点处— 动画这一点是在按钮的中心,也是动画在屏幕上消失的一个点
  • 持续时间— 持续多长时间
  • 模式— 一个可能的动画模式列表(隐藏和显示)

9、QR:快速反应

如果你在名片、杂志或其他地方看过那种弹出的方形条码,你可能已经知道这是一种2011年的热门趋势。融入到网页设计中会如何呢?令人惊讶的好,真的。

这种条码被称为QR,更短的快速反应。用你的照相手机给条码简单照张相,像变魔术一样,你的手机就会连接与条码有关联的网站。更美妙的事是你可以有无数多的方式使用它。在你的网站上放上你的QR,访问者就能更快的访问你的手机网站。你也通过在url放置与QR关联的代码,追踪你的访问者。当你在网站评论时,使用QR作为你的头像。

2011年太多手机应用了,明智的使用这一新媒介的优势吧。

澳门新浦京娱乐场网站 41

该网页使用了响应式设计,基本兼容IE8,当用户向下滚动网页设计,内容会渐变显示出来。

Dropping items

Dropping items 可能是 ColorMatchTab 动画最有趣的部分。我们需要能够将图标从动画的一个元素移动到另一个元素。要做到这一决定,我们决定使用临时图标。一旦临时图标到达他们的目标在屏幕上,在当前的动画组件中隐藏它们,并显示真正的图标。

为了确保这些图标正确显示在不同的屏幕尺寸上,我们必须做以下几方面:

  • 显示 tab bar 顶部的临时图标
  • 隐藏 tab bar 的图标
  • 在主屏幕上临时图标的转场动画
  • 在模式视图控制器上显示临时图标
  • 在模式视图控制器上临时图标的转场动画
  • 在模式视图控制器上隐藏临时图标

10、缩略图设计

不断进取的google已经向普通用户介绍了预览浏览。通过点击查看网站内容的日子已经过去了。今天,你只需点击那个放大镜并悬停(假设你没有用触摸屏),之后你就能奇妙的在另一端看看出现什么。

如果你的设计是基于Flash的,这肯定会是一个问题。预览不会显示你设计中的那些元素。

在2011年一般的互联网用户会更懂得上网,期待看到更多的人通过这些方式浏览。用缩略图判断一个网站实在是太有诱惑力了。

澳门新浦京娱乐场网站 42

澳门新浦京娱乐场网站 43

菜单控制器

如果你想完全利用屏幕上所有的动画显示,你必须为 MenuViewController 设置数据源。该数据源允许您自定义视图控制器、标题、颜色、图标:

public protocol ColorMatchTabsViewControllerDataSource: class {

func numberOfItems(inController controller: ColorMatchTabsViewController) -> Int
func tabsViewController(controller: ColorMatchTabsViewController, viewControllerAt index: Int) -> UIViewController
func tabsViewController(controller: ColorMatchTabsViewController, titleAt index: Int) -> String
func tabsViewController(controller: ColorMatchTabsViewController, iconAt index: Int) -> UIImage
func tabsViewController(controller: ColorMatchTabsViewController, hightlightedIconAt index: Int) -> UIImage
func tabsViewController(controller: ColorMatchTabsViewController, tintColorAt index: Int) -> UIColor

}

我们也提供了一个示例应用程序,所以你可以打开它,运行和学习如何将它使用在您的应用中。

11、粘度/生活流程

最后,但不是最不重要的,是在网页设计中注重粘度。互联网本来是个荒凉的环境,我们通过在开放论坛上分享我们的生活使之更人性化。希望通过生活流程的形式看到更多隐私。个人博客和作品在2011年将会 更明显的出现在Twitter的feed上(而不仅是Twitter页面上的一个链接)。人们会通过Foursquare让你知道他们每时每刻都去了哪里。实际上,希望通过某人的线上活动看到他专门的生活流程。2011年绝对会引出我们内心可怕的尾行者,毫无疑问。

澳门新浦京娱乐场网站 44

浏览网站

总结

我们希望我们实现的这个 tab bar 是对你有用的,尤其是看到它在屏幕之间非常流畅的滑动。我们将组件分成几个部分描述,以便你可以将它作为单独的项目或作为一个整体来使用。

如果你在你的 Apps 中使用我们的解决方案,我们将很高兴。我们喜欢分享我们的经验,并总是高兴地讨论我们的工作。如果你决定在你的应用中使用我们的部件,不要犹豫与我们联系,我们将您添加到 'Readme' 中。如果你碰巧发现我们的部件有问题,在GitHub库创建一个问题,我们会很乐意帮助你!

ColorMatchTab 动画,在 DribbbleGithub 可以查看。

mitsugashi

设计简约的糕点食品网站,但这种简约在国内很容易飞稿机。

澳门新浦京娱乐场网站 45

浏览网站

regettacanoe

明快的蓝色与黄色的时尚配色,很符合网站主题。左上角菜单蓝色的曲线好像和鞋跟一样,这是令人印象深刻的设计。

澳门新浦京娱乐场网站 46

浏览网站

ca4la

很独特的小型电子商务网站,浏览时注意看哪些动画,好玩之余更有意义。

澳门新浦京娱乐场网站 47

澳门新浦京娱乐场网站:2011年网页设计趋势,网页设计中的隐藏菜单示例。浏览网站

hotakubo-seikei

一所医院网站,网站整体页面设计得很精美,就连图片质量也很注重,这医院看起来很高档次啊。

医院类网站在国内肯定不会这么做了,都会做成门户式,做内容,搞SEO,什么内容都有…… 不过大家可以参考他的设计,相当不错。

澳门新浦京娱乐场网站 48

浏览网站

hishiken

漂亮的图像 视差特效,很美的网页啊。

澳门新浦京娱乐场网站 49

浏览网站

asitanosikaku

网站前面哪个有点手绘风格的椭圆是用html5 Canvas做出来的,鼠标经过带有一些弹性效果,其次这个椭圆还能根据浏览器分辨率来自适应大小哦。

点击每个连接的内容都是AJAX加载,总体的交互设计体验真的很不错。

澳门新浦京娱乐场网站 50

浏览网站

kataomoi3

网站使用文字漂落来做视差效果,很漂亮,做个人博客类的网站推荐。

澳门新浦京娱乐场网站 51

浏览网站

kiyomizudera

用全屏视屏作为背景的网页,视频的景色超赞,文字使用垂直排版,垂直字体是日本常用的一种排版方式,其实古时中文也是垂直的,从首页点击进去后,默认是全屏幻灯片展示,整体感觉很有Feel,有木有?

澳门新浦京娱乐场网站 52

浏览网站

学習院女子大学

首页Flash banner做得不错呢。

澳门新浦京娱乐场网站 53

浏览网站

q-co

不得不说,里面的创意很赞,进入首页后,用笔画一个圆圈,然后圆圈里会有动态图像显示。其次网站视差技术做得很好,具体请行浏览。

澳门新浦京娱乐场网站 54

浏览网站

tokyonohatakekara

甜品店的网站,手绘元素比较多,也很可爱。

澳门新浦京娱乐场网站 55

浏览网站

k-associates

一家室内设计公司的网站,他们的作品展示方便很特别,使用了垂直色块,然后从右向左的水平慢移。

点击作品的图像展示以全屏方式展示。

澳门新浦京娱乐场网站 56

浏览网站

japan

只想说,这网站不是FLash做的。

澳门新浦京娱乐场网站 57

浏览网站

kamomepark

首页使用全屏幻灯展示,菜单和新闻用方块固定在边栏,方块设计简约,所以不影响整体外观。

产品展示页是使用不间断水平浮动图片方式,功能很强大,支持鼠标中键来控制滚动,用户点小图后全屏显示大图,还有一点细节做得不错,就是你浏览大图时,本来水平滚动的图片将会停止滚动,这样用户关闭大图后也能看到刚才点击的位置。

澳门新浦京娱乐场网站 58

浏览网站

c-gp

强烈建议大家点击一下TEAM链接看看。

澳门新浦京娱乐场网站 59

浏览网站

gooddesigncompany

日本一家设计机构网站,首页直接显示作品,但展示的方式很有趣,不知道是怎么实现的。

该网页的布局能自适应宽度,普屏和宽屏浏览效果很佳。

澳门新浦京娱乐场网站 60

浏览网站

kotobanoie

全屏视屏背景网页,你要以一边看视频一边浏览这个网站上的内容。

澳门新浦京娱乐场网站 61

浏览网站

wamokei

一家模型制作公司的官方网站,单页面网站设计,首页的第一屏使用了全屏照片作为背景,另外当用户点击其它页面时,其实也是全屏的哦!

澳门新浦京娱乐场网站 62

浏览网站

100tokyo

这个100tokyo使用了扁平化设计,也支持响应式,整个网站配色以浅棕色为主。使用了简单的CSS3样式,比如鼠标经过渐变效果。

澳门新浦京娱乐场网站 63

浏览网站

santepc

全屏Flash网站,看起来有没有潮的感觉?

澳门新浦京娱乐场网站 64

浏览网站

最后

各位小伙伴,看了上面的日本网页设计,你觉得怎样呢?你还会为企业做哪些烂掉牙的布局排版吗?不一定要响应式,不一定要扁平化,创意 技术才是王道,这就是日本网页设计!

很多网页设计师需要自己写前端代码,所以建议大家在项目中多运用CSS3,这是未来必须使用的技术。

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:2011年网页设计趋势,网