`
天梯梦
  • 浏览: 13733286 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

设计: 未来Web设计的7大趋势

 
阅读更多

1. 手势取代点击

我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条:

设计: 未来Web设计的7大趋势

作为一名专业人士,想必你一定用过鼠标滚轮、光标键或触控板,那么你就已经超越了许多用户了。

在当今这个时代,滑动已取代了点击。手机用户轻松滑动手指即可随意滚动页面,相对而言,要精准地点击某一点反倒是变得困难了——完全和以前在电脑上的操作相反。

 

因此,我们应将网站体验的首要重点放在滚动上,点击为辅。当然,这一特点已经随处可见:

设计: 未来Web设计的7大趋势

随着手机用户的规模日益庞大,现代化网站都开始尽量减少点击,增加滚动。我们会发现链接越来越少,按钮因为其更大的“点击”区域,出现的频率越来越高。为适应滚动趋势,页面也变得越来越长。

 

那些多页网站意识到这一点后,开始纷纷合并页面,将单个页面延长,或者干脆像 TIME 杂志,直接做成无限滚动页面:

设计: 未来Web设计的7大趋势

将来是否能在手表上浏览网页还尚未可知,不过用手势来进行操作,这一点是肯定的。

 

2. 彻底淘汰网页折叠线

在页面滚动变得如此普遍的时代,各种设备又有着不同的尺寸,网页中的“折叠线”将不再被列入讨论范畴。

设计师们无需再将所有内容都挤在页面的最上端。这一改变便引出了 Medium 曾经推广过的设计趋势——全屏图片加标题,滚动后才可见页面主体内容:

设计: 未来Web设计的7大趋势

有了这长长的滚动页面,设计师们终于有机会实现梦寐以求的杂志效果:尽情使用美丽的大图片。在2015年的网站设计中,我们尤其可以看到利用大面积纵向空间来展现图片的方式。

 

3. 操作更快捷 网站更简化

现在人人都是网站高手,业余选手也似乎有了专业素质:使用多个标签页及滑动返回上页等都不在话下。

这些特点所带来的结果便是一切都变得更快速了,大家的耐心值都日益降低。试问如何才能惹恼一个好脾气的人呢?很简单,只要稍稍减慢网速,便立刻引爆。

设计: 未来Web设计的7大趋势

现今的网站所面临的挑战不只是让加载速度更快(技术问题),而且要让页面能更快地被受众所理解。一款无法弄懂的设计和超慢的载入速度具有同等的恼人效果。

 

简洁的设计更易被理解,也就意味着更讨人喜欢。我们很容易就能区分出下方的两款设计,哪款更现代。现代化网站可以更快帮助用户理解使用方式:

设计: 未来Web设计的7大趋势
设计: 未来Web设计的7大趋势

仿真设计被淘汰的主要因为用户敏锐度更高,耐心值降低,杂乱的设计只能减缓一切速度。

移动应用以其美观的极简界面击败了绝大多数网站,事实证明简约界面的表现更佳。

设计: 未来Web设计的7大趋势

扁平化设计只是一个开端,它所真正代表的是简约和即时性,希望这一走向可以在2015年发展得更深入。

 

4. 像素的消亡

我们曾经能清楚的知道组成一张分辨率为72 dpi的图片需要多少像素。如今,人们对这一概念越来越模糊。

设计: 未来Web设计的7大趋势

随着响应式网站的出现,相对于固定数值,我们更趋向于使用网格和百分比。然而,位图图像仍然存在。

几乎所有网站中使用的图片分辨率都只有现代显示器分辨率的一半,并且不按比例调整大小。对于 Retina 显示器和现代化浏览器而言,矢量图形之风正渐渐崛起。

 

这一风潮在图标字体以及谷歌材料设计中就已见端倪。具此特点的网站通常都具有更快的加载速度,图标在放大后也不损失质量,是现代化浏览器的理想之选。

设计: 未来Web设计的7大趋势

这些技术均已面世,只是要专业人士为更高标准的显示器来改变工作习惯,尚需时日。当用户的显示器平均标准达到 Retina 级别时(新款iMac显示器),相信设计师们定会追随这一改变。

 

5. 动画的逆袭

要让网站看起来过时很简单,只要放上一个GIF或Flash格式的“网站建设中”的动画就行。然而近来,却因为几个元素的结合,让动画在现代化网站中实现了华丽的逆袭。

 

扁平化设计可能会遇到风格重复,甚至略显无趣的问题,这时动画就可以起到点睛网站的作用,同时又可以在有限的空间中纳入更多的信息,一举多得。

设计: 未来Web设计的7大趋势
设计: 未来Web设计的7大趋势

移动应用重新定义了用户的需求,其中所使用的各类小动画都传达着自身的意义。现在,网站也开始启用这一趋势。

设计: 未来Web设计的7大趋势

像CSS动画这类的新技术在强化设计的同时,无需使用额外插件,因此,毫无速度或兼容问题之忧。事实上,网络组件(在第6点中会提及)反而更能加快网页速度。

 

GIF动画又回来了,甚至变得更具效力。你是否注意到,这篇文章中就大量运用了GIF动画,它的创建过程更为简易,并且方便分享。

 

6. 组件即是新框架

网络技术变得日益复杂,令人很难咀嚼其中含义。为达成一个简单的效果,例如添加谷歌分析或脸书按钮,设计师们不得不在在页面中嵌入复杂的代码。如果我们可以只写这么简单一句来解决问题就好了:。

网络组件就可以实现这个想法,只是对大部分设计师们而言,使用尚有困难。不过,相信在2015年里,它一定会有革命性进展。

 

谷歌材料设计的出现也许预示着这一变化的开始。谷歌材料设计由 Polymer 提供技术支持,适用于现代化浏览器,它利用简单的标签,即可从安卓应用中提取丰富的动画和互动组件:

设计: 未来Web设计的7大趋势

如果谷歌材料设计能够开花结果,相信将会有更多组件框架在2015年涌现。譬如:Bootstrap 4.0?

 

7. 社交媒体的饱和度与邮件的崛起

社交媒体于用户而言固然是个巨大的成功,然而对于广大的原创博主来说,就不那么乐观了。

首要问题就是饱和度。脸书发现,在每日亿万的博文中,用户所感兴趣或转发的只局限于一个固定的范畴。因此,你所发表的内容很不幸地只能被一小部分关注你的受众所见。(当然对此脸书也提供了解决方案:用户付费推广。)

 

社交媒体风潮并未消退,不过,Tim Ferriss 等一些知名博主已将推广重点从社交网络移至旧时流行——邮件推送。他们意识到电子邮件相比社交媒体,一大至关重要的优点即是:用户量得到大幅提升。

设计: 未来Web设计的7大趋势

希望这一后社交媒体风潮可以在2015年得以延续,因为它还有一个不容忽视的利器——网络提醒(类似手机中的提醒功能)。

设计: 未来Web设计的7大趋势

 

出彩新秀:CSS 形状

除了设计师以外,很少有人会注意到这一超酷技术。CSS 形状可以将排版定义为各类形状,譬如圆形:

设计: 未来Web设计的7大趋势

这一技术超乎想象,但是在无法保证所有浏览器的支持前使用,仍然过于冒险,因为这意味着为实现一个页面,你需要重复两种完全不同的技术来确保效果。

不过,还是忍不住要重复一遍,它真的超酷。

 

2015 看点

在2014年,我们看到了手机用户开始超越电脑用户,然而这仍未能改变大众的传统想法,大部分企业机构的第一关注点仍然是桌面外观,而后才是手机界面。

 

这一策略在2015年可能要开始显得落伍和不专业了。现今,手机已然成为浏览网站的首要工具,“移动界面为主”的策略也将从说说而已,变为真正的需求。

 

扁平化设计随处可见,当你细细推敲这一现象后,会发现,在幽灵按钮背后,所隐藏着的真正奥秘是——简约站点可更快得到用户的青睐。

 

简约不只是一时流行,它是未来的走向。相信它会持续发展下去。

将来,会有越来越多的博客使用动画,互动界面会在展现高质量的同时,更优化用户体验。

像素和折叠线开始渐渐退出历史舞台,将由滚动为主,点击为辅的体验占取主导。网络组件将大大简化在网页中引入移动应用体验的工序。

 

目前,你可以从一些网站设计中发现优秀移动应用的影子。随着时间的推移,相信用户将很难发现移动应用和网站体验之间有任何区别。

 

本文转自: 设计: 未来Web设计的7大趋势

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    瞬间之美:web界面设计如何让用户心动

    《瞬间之美:Web界面设计如何让用户心动》是一本专注于探讨用户体验设计的专业书籍,旨在帮助...这本书不仅是理论指导,更是实践操作的宝贵资源,对于想要在Web设计领域深入发展的专业人士来说,是不可或缺的参考书目。

    众妙之门:移动Web设计精髓

    本书首先讲解了移动Web的现状和未来趋势,阐述了为何移动Web设计如此重要,并引导读者理解移动用户的行为特征。 书中详细讨论了响应式设计,这是让网站能够自适应不同屏幕尺寸和设备的关键技术。通过使用媒体查询、...

    《响应式WEB设计:HTML5和CSS3实践指南》┊Benjamin Lagrone PDF

    总之,《响应式WEB设计:HTML5和CSS3实践指南》是一本深入探讨现代Web开发趋势的书籍,涵盖了从基础概念到高级技巧的广泛主题,对于任何想要提升其Web设计和开发技能的人来说,都是一份宝贵的资源。通过学习,你可以...

    2011年值得注意的5个Web设计趋势

    在2011年的Web设计领域,几个显著的趋势开始崭露头角,这些趋势不仅改变了设计的格局,也对小企业如何构建和优化网站产生了深远影响。...随着技术的不断进步,这些趋势也为未来的Web设计奠定了坚实的基础。

    Microsoft ASP.NET and AJAX: Architecting Web Applications

    该书主要针对 ASP.NET、AJAX 以及 Silverlight 技术在现代 Web 开发中的应用,并着重讨论了如何设计和构建高效的 Web 应用程序。 #### 二、AJAX 的重要性和挑战 **重要性:** 1. **提升用户体验**:通过局部刷新...

    Web的发展趋势图未来发展趋势详解PDF

    - **前景展望**:文档还对未来的Web发展进行了展望,提到了一些可能成为趋势的技术方向,如云计算、大数据处理等。 4. **国际视野** - **多语言版本的维基百科**:文档中列出了不同语言版本的维基百科,这反映了...

    基于WEB程序设计基础-浙江大学(17)

    【标题】"基于WEB程序设计基础-浙江大学(17)"所涵盖的知识点主要涉及Web开发的基础概念和技术,这部分内容通常包括...通过学习,学生不仅能够掌握基础技术,还能了解Web开发的最新趋势,为未来的职业生涯打下坚实基础。

    Web设计实战教程资源下载

    7. **可用性原则**:Web设计应遵循一系列可用性原则,如一致性、反馈、容错、灵活性和效率等,以确保所有用户都能有效地使用网站。 8. **无障碍设计**:考虑到不同用户的需求,无障碍设计确保网站对视觉、听觉或...

    web前端期末大作业:HTML+CSS+JavaScript绿色的盆栽花店网站响应式模板 大学生鲜花网页设计

    - **未来趋势**: 响应式设计、前端框架的应用等,都是当前Web开发领域的热门方向,具备这些技能对未来的职业发展大有裨益。 ### 六、总结 总之,这个绿色盆栽花店的网站项目不仅能够帮助学生巩固HTML、CSS和...

    PHP Solutions: Dynamic Web Design Made Easy

    - **持续进步**:学会如何跟踪最新技术和趋势,不断提升自己的技术水平。 #### 六、结语 《PHP Solutions: Dynamic Web Design Made Easy》是一本非常适合PHP初学者和有一定基础的开发者阅读的书籍。无论是想要...

    计算机程序设计语言发展史和对程序设计语言未来的看法[参考].pdf

    7. **编程教育友好**:为了降低编程入门门槛,未来的编程语言可能会设计得更加直观易学,如同Scratch这样的图形化编程语言。 8. **动态进化**:编程语言可能会具备自我更新和改进的能力,以适应快速变化的技术环境...

    Web前端页面设计毕业论文完整版.zip

    《Web前端页面设计毕业论文》是一份详尽探讨Web前端页面设计领域的学术作品,它涵盖了前端设计的基础理论、技术实践以及未来发展趋势等多个方面。本文旨在为读者提供一个全面理解Web前端设计的视角,并通过实例分析...

    浅谈web app的优势和设计的几个重点.pdf

    【Web App的优势】 Web App,即基于Web技术的移动应用程序,具有显著的优势。首先,它无需用户通过应用商店下载和安装,...随着技术的不断进步,Web App的潜力和影响力只会进一步增强,成为未来应用开发的重要趋势。

    基于Java+Web的智慧农业信息采集系统的设计与实现(毕设&课设论文参考).pdf

    ### 基于Java+Web的智慧农业信息采集系统的设计与实现 #### 一、引言 随着信息技术的快速发展,特别是在互联网技术领域的突破性进展,智慧农业作为一种新兴的农业生产模式正逐渐成为农业发展的新趋势。智慧农业...

    Web综合设计实践课程大作业

    【Web综合设计实践课程大作业】是一门针对Web应用程序设计的实践课程,旨在培养学生利用Web技术构建综合应用的能力。在本课程中,学生可能会接触到即时通讯系统的开发,这是一个在网络环境中广泛应用的技术,尤其在...

    《Web艺术设计》PPT课件-(2).ppt

    12. 未来趋势:随着移动互联网的发展,移动端网页设计变得越来越重要。设计师应关注如AMP(Accelerated Mobile Pages)这样的技术,以及WebVR、WebAR等新兴技术,以便随时适应市场变化。 综上所述,《Web艺术设计》...

    基于WEB资源的未来网络安全服务分析.pdf

    【网络安全服务的未来趋势】 随着互联网的广泛应用,网络安全已经成为了一个至关重要的议题。本文主要探讨了基于WEB资源的未来网络安全服务,旨在为网络安全提供新的研究思路和解决方案。 【WEB资源与未来网络】 ...

    web程序设计ppt

    随着技术的不断进步,未来Web程序设计将更多地涉及移动互联网和云计算等新兴领域,这也对开发者提出了新的挑战和要求。作为Web开发者,持续学习和适应新技术趋势,将有助于保持竞争力和创新能力。 通过以上内容的...

Global site tag (gtag.js) - Google Analytics