UI设计模式提示:单页Web应用程序

一旦有人开始使用您的网站或Web应用程序,他们需要知道去哪里以及如何在任何时候到达那里。如果他们无法轻松浏览您的应用程序,您很快就会丢失它们。因此,在Web应用程序中设计有效的导航至关重要。

在本系列中,Creative Bloq,Chris Bank ofUXPin用户体验设计应用程序,讨论了导航设计模式的重要性,以及当今一些最热门的网站和网络应用程序的详细示例。

有关更多示例网页设计模式,下载UXPin的免费电子书,Web UI设计模式2014

问题

+$The user wants a central place to view or take actions on most or all content so they don’t have to waste time navigating between pages.

解决方案

+$Use modern web development techniques to build a single-page app that doesn’t need to reload itself as the user browses through it. This pattern is more of a complete restructuring of how the web works rather than something you can hack into your app afterwards.

+$In a way, the page in a single-page app isn’t really a page in the traditional web sense, rather it's more of a particular data view. Single-page web apps load asynchronously (using Ajax), in that they perform instantly without the user having to wait for separate pages to load between operations.

Gmail的+$is a good example of a single-page app that integrates multiple actions into a single 'page'. The trend of single-page designs is a less-hardcore implementation of this UI pattern, where all content can be accessed on the same page. This makes browsing much faster and responsive, blurring the line between desktop and web apps.

Click the image to see a larger version

单击图像以查看更大的版本

+$For web apps likeSpotify的+$, the single-page app pattern becomes essential when you consider that the user might play music in the background but also browse through more music at the same time; having a single-page app eliminates the need for a page reload, so the music can keep playing.

Click the image to see a larger version

单击图像以查看更大的版本

+$One consideration you'll need to make when implementing a single-page app is the URL structure. Because content is loaded dynamically using JavaScript, URLs can become useless and accessing a particular view can become impossible if not done right.

+$Web apps like Gmail and Twitter overcome this by explicitly generating unique URLs for each view, which also solves the problem of the browser’s Back button becoming unusable.

话: 克里斯班克

克里斯班克是增长的领先者UXPin一个用户体验设计应用程序,可以创建响应式交互式线框和原型。



翻译字数超限