返回  

Clh项目设计的一些总结

2015/10/22 10:11:44 来源:

通过Clh设计团队及UED设计项目研究成员对之前项目的一些总结,包括与新的客户沟通,大客户自有平台建立过程中谈到的一些需求点,我们总结出了在短时间内互联网设计的一些想法和未来的趋势

一、设计的一些发展: 

1.复杂的文字用简单的信息图展示

作为视觉动物,我们在阅读图像语言时能更有效地汲取信息。信息图能最大程度地传递更多的信息。那么一种新的趋势就出现了——网页信息图!像一般信息图那样,网页信息图也涵盖了很多的信息,而更增加了交互性。这会强化传达效果。 

2.图片要大 

一些主要理念、宣传、口号等的配图要越来越大,越来越显眼。

2015年,图片以新的形式占据了核心位置。技术适应了响应式设计调整图片大小的潮流,能提取图片的主要色彩作为背景,然后让图片更少地占据服务器容量。这也就意味着,使用大图片的设计师会越来越多!

3.字体的调整

从多年前开始,文字的应用方向就已经显现了,只是可能设计师们只是适应得比较慢。网页上的字体和印刷上的字体非常不同,2015年,我们才大部分完全抛弃那些堆在一起显得密密麻麻、杂乱无章的文本。网页上,影响文本可读性的因素有:

字体大小

文本框宽度

行高

研究表明,更大的字体会增强网页易读性。而随着响应式设计的趋势,设计师已经开始做响应式字体的设计。这回让文字无论在什么界面上都会有很好的阅读效果。

4.扁平化设计无处不在

网络产业的几大巨头都在引导着扁平化设计的趋势——微软的界面、谷歌的Material Design、苹果审美的新趋向,等等。 

尽管有说法是对扁平化设计的讨论只在界面设计的范畴,但这的确是网页设计的技术趋势。这关乎我们消费网页文本的方式,关乎网页制作背后的技术。扁平化设计遵循着极简的设计原则,让受众可以更容易、更精炼、更快捷得读到网站的核心内容。

扁平化设计不仅符合审美潮流,更利于功能的完善,让受众能集中精力阅读内容。

5. 响应式设计的进化

几年前,响应式设计还只限于电脑、平板和智能手机,而现在随着智能手表、电视和其他智能家居的发展,响应式设计涉及的范围越来越大。尽管每一种平台都有独特性,但平板和智能手机就有着相似的交互系统,文本大小也差不多,分析起来比较方便。

但是说到智能手表这种——它们有着迥然不同的界面,评估的系统也完全不同,那么设计也要重新考虑。用智能手机或电视的思维去想手表的界面设计是不现实的。

对于这种新问题的解决还只是刚刚起步,在2015年,智能设备的市场需求会让设计师去不断适应技术的演进。

6.网页代码式微

以往,网页制作的分工是由两个界限分明的部分构成的:设计师做外观设计,工程师编写代码让它工作。随着设计工具变得越来越智能,这种分工正在改变。

如今,设计师不用编写代码就可以制作网页,利用平面设计软件的强大功能以及输出W3C的代码。

技术的进步带来了巨大改变,其中之一就是让设计师制作网页的门槛降低,可以让设计师为客户设计更现代、专业的网站。当然,优秀的工程师并不会消失,只是他们会从前端退居后端,为前端设计品质的体现提供保障。

二、网站的一些发展:

1.web移动端的PC效果移植

我们在PC网站上很常见视差,滚轮侦听,滑出等交互效果,使用HTML5的一些新特性,使用国外开源的移动框架,可以将PC上酷炫的效果同样移植到移动端上,体验会大不一样。 

2.CSS3动画将更加广泛

现在做国外的设计基本不用考虑IE9以下了,也就是说基本不用考虑IE,所以很好的运用CSS3动画能大大提高网站的视觉舒适程度,特别是细节动画,小小的细节动画可能会是点睛之笔哦。

是不是看了这些感觉怎么都是PC端的趋势?NO,NO,其实移动端也同时存在这些趋势,移动不仅仅使用APP这个词去衡量的,现在APP的技术门槛越来越低,满大街都是,和卖白菜一样,参差不齐,基于移动端的体验趋势,也是非常重要的。

移动端的一些常见趋势就不说了,谷歌百度一大堆,再增加一点:

3.基于HTML5的交互

比如碎片、离子、NDA、电影特效等运用到全屏轮播,tab切换,登陆注册弹窗等模块中。 

4.SVG图形和动画

以优越的处理性能和动画性能,加载速度,不言而喻它比png,jpg,gif效率质量都高太多。 

5.360全景+视频交互

使用HTML5技术生动的360全景展示,视频内置于其中,形成完美的场景交互,让网站完全趋向真实场景。

这种体验将摄影,技术,表现力,特效,音效等方面结合起来,在FWA上看到过几个网站      

6.信息推送

让网站可以保持与用户的连接—哪怕用户关闭了网站的浏览器标签页,使用一些新的w3c新标准技术。比如可以使用websocket,还有其它标准技术实现信息推送的体验。

7.超快用户体验 

“离线优先”,HTML5应用类缓存

网页的浏览速度和等待时间就不用多说了,非常重要。 

8.智能响应

根据用户点击等等而响应内容,而不是仅仅根据设备分辨率响应,所以这里说的智能响应并不仅仅指响应式布局Responsive Layout.

比如:当你是新用户开始浏览文章时,会有在线FAQ的表单来响应你的操作,反之,在你登陆后阅读一篇文章的时候,会有标注功能让你更好的对文章进行整理方便下次阅读。

比如Medium和The Next Web在阅读体验上做得就非常棒。 

9.ServiceWorkers

可让网站安装 Javas cript 文件,让web原生应用化,离线推送,这就类似一个基于WEB的半原生,甚至就是原生APP的实现。 

10.PJAX的普及

最早应该是体验在behance和pinterest这两个网站上,然后慢慢流行到了国内,比如花瓣,接着是前不久dribbble的瀑布流和查看作品的改版体验,利用HTML5的特性结合完全/局部刷新实现改变网址无刷新加载,同时满足SEO的需求。