在本系列中,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.

话: 克里斯班克