Web App dynamic design principles Web Apps design method

Article Description: the design method of Mobile Web app

"Editor 's note" This article author: Dengteng (@ thousand years cowhide sugar), Baidu Wireless interactive designer. In this article, the author will talk about mobile web App design methods, including: Web App definition, web App features, development status and design and so on. Hope to help you.

Native apps and Web apps have never stopped arguing, though many people criticize web apps for not being able to stop the emergence of various web apps, especially mobile web apps that are attached to the popularity of smartphones. This is a product form that grows up in criticism, regardless of its outcome, should attract the attention of developers and designers.

A. Web app definition

Wikipedia's definition of web apps is:

Web apps are apps that are written in a browser-supported language, run in a browser, and accessed over the Internet. So mobile web apps refer specifically to Web apps running in the smartphone browser. I think in the eyes of the user, it is the app; in the eyes of the developer, it's the web.

Two. Features of Web Apps

The Google Chrome development team's "Web App Development Guide" presents the following metrics for Web apps:

Is it independent to complete the current task without linking to another completely different usage environment?

Can you use it to interact, participate, and accomplish specific tasks?

Do you have a good user interface that looks very beautiful and occupies a full screen?

Do you use the same interface model as a local application, such as a button, dialog box, or other element?

Is it possible to work offline?

Are certain features of the device used, such as data from GPS positioning and motion sensors?

Do you hide traditional site navigation bars and guide links?

Does the application refer to the client-side architecture model design?

This is not the focus of this article, only for readers ' reference.

The other is to talk about the advantages and disadvantages of web app and HTML5, which are required by web apps relative to native app.

Advantage

Cross-platform and terminal

Update in real time without user manual upgrades

Low development costs and technical barriers, the former development engineer can quickly start

No need to install and take up less space

Easy to maintain

Search Engine Index Optimization

debugging, Easy Release

Disadvantage

Limited by browser, performance and interface effects gaps

Heavily dependent on network connections

Inconvenience of calling hardware and local files

cannot be sold in the App Store, but the future search engine can act as a distribution portal for Web apps and maybe

The following is a comparison of the languages, development tools, application formats, and application stores that develop platform applications:

Three. Status of development

As of now, App Store and Google Play in the number of apps are close to 700,000, marketplace's app number is close to 130,000. And with the release and popularity of new devices, such as iOS, Android, and Windows phone platforms, the number of apps has remained growing.

Because of its vague definition, the Web app does not yet have a more accurate statistical data. But the domestic mainstream mobile browser will put the web app in a very important position (from left to right in turn is roaming, Baidu, 360, QQ, UC Browser Application Center):

According to the latest survey, developers ' interest in developing HTML5 Web apps is growing:

JQuery, Sencha, JQ. The development of mobile UI components and frameworks such as Mobi and Zepto also makes the development of mobile Web apps simpler, more efficient and more performance.

The hybrid app, which encapsulates WebView, has both Web app and native app features, and a good balance between development costs and user experience. A good hybrid app is a perfect match for native app's user experience. This development model is getting more and more developers and developers of the favor. Facebook, Baidu has used this approach to develop its own products.

Four. Design

1. Screen Fitting

The screens of mobile devices are all kinds of things, and the main effects on design are screen resolution, size, and screen orientation.

Today's iOS devices have 320x480,640x960,1136x640,1024x768,2048x1536 these resolutions, 3.5-inch, 4-inch, 7.9-inch, 9.7-inch sizes.

The fragmentation of Android devices is even more serious. So we need to pay attention to the interface adaptation of web app under different screens.

[1] [2] [3] Next page