Mobile UI Design Notes

It is not easy to achieve the same function in a relatively small space. Since the invention of the Internet, the size of the screen has been growing steadily, and web designers have learned how to make the most of the screen space. Now the grid system is about 960 pixels wide, allowing infinite extension in the vertical direction. Space has always been a cheap commodity before people began to use the phone.

Designing on a large computer web site is much easier than designing in a space with limited mobile devices, and once spacious space has been used to encourage sloppy typography and a wide range of negative space designs. In a 320-480-pixel-wide cell phone screen, the layout design of both columns became very risky.

But in the mobile web design, the hardest part is not a few columns of the problem, nor the use of responsive framework design, not to learn media inquiries and backward back to the old browser, the biggest challenge is that designers need to decide what should be retained and deleted.

　　Design experience for Mobile UI

There are many ways to adapt a Web site to a mobile device. The simplest and most common method is: don't change anything. The result: The text is small, it is inconvenient to read, navigation is difficult to click, and a picture smaller than a stamp loses its original visual impact. Such a user experience is really bad, but from the site owner's point of view, such a revision does not need to pay any hard.

Another way is to design a mobile version that contains the main content of the site. We take it for granted that the Content management system will be equipped with two sets of content, which is often not the case, and this approach will make the site a victim of capacity limits on mobile devices, especially when smaller screens can hold less content.

People don't access websites on mobile devices because they don't need that much information, and more likely because they want to be more convenient. However, site managers need another convenience and do not need to manage both sets of content simultaneously. If there are two sets of content, it will increase the risk of inconsistent content, at the same time, for mobile phone viewers and non-mobile visitors at the same time service will create a doubling of the workload.

Designers who are willing to devote their energies to a set of content know that the opportunity to achieve this is in this tiny (mobile) canvas.

　　"Little Design" is not a new phenomenon.

Thinking in a compact way does not mean that thinking is limited. The design of other media has shown people how to creatively refine content in a limited context.

　Card

Business cards require two distinct functions:

To impress others,

Use a portable method to provide contact to others.

There is no room on the business card to advertise or list all the products. Finally, creative business card designers think in a casual way, "what is a business card?"

　Advertising signs

Size is not the only problem. Mobile UI designers want to solve the problem of concentration, just as billboard designers try to capture the attention of people moving. Drivers focus most of their attention on driving, so billboards have to impress people from a distance. Highway advertising design space has been much more tolerant, but still need to be in a very short period of time to pass information. A successful advertising creative can tell a complete story, and the visual information complement each other.

　　RSS Feeds

Streamlined messaging is not limited to visual media. Simple and portable, really simple design to go beyond any unnecessary width, height, font, color, and browser compatibility requirements. Subscriptions do not have any settings about when, where, and how they can be used, so it can be designed to meet the needs of any application from the mobile Web site to the app Store using the iterative design.

Business cards, billboards, code, and news subscriptions have a common purpose--simplification does not just mean reducing (content) and shrinking (volume), it represents focus!

　　Condensed structure

Focus on the development of the site is not an easy thing, focus will cost a lot of energy, the need for constant dedication, both will inspire a person's creativity, even when no one appreciates. The first way is to flatten the structure of the website.

A typical site map is shown in the image above. The site map presents the relationships between different pages, which can be shown by the lines between the squares. The site map is neither accurate (the navigation bar allows users to jump between different pages), and there is no substantive help (links are not content).

It is very tricky for a designer to decide what to merge and subtract from a traditional site map. Venn can be useful in this regard.

The above example shows the relationship between different content through overlapping ellipses. Case studies can describe how the product and customer service will benefit the customer. As a result, the "case" circle covers both products and services (service). Products that customers may order (overlapping portions), the "Contact Us" page and other content are not related, it is independent content.

Six ellipses do not represent a site with only six pages, specifically, it represents the site has six types of information or functions. A company may produce a lot of goods, but each product should have a name, description, picture and purchase settings. In the same way, each case is a unique story, but the same problem/solution format should be used.

In order for the user to be able to focus on the site, we need to minimize overlapping parts.

The above scenario requires the integration of each case and related commodity or customer service. If a case is more than one, you should link to the next one and don't repeat it. A home page or product overview may enumerate each item. Do not repeat the content with a separate shopping cart page, each item should be set up next to the "Buy Now" button, the new payment page to complete the purchase process.

　　Venn maps apply to any type of Web site.

Do you have to do two pages to find posts in your blog? The above example describes how you can do this by using a page with a setting to complete the previous two pages.

This approach is only a guideline, not a rule, which will vary depending on the site in the course of use. The home page still overlaps with other content, because the home page often contains content connections to the entire site. In the above, although the order is merged into the product page, we have designed a new "payment" page. Focus is not to reduce the number of pages, but to make the whole process more fluid.

　　Use folding

Merging content, which solves the problem of navigation bars at the expense of more complex designs. Fortunately, the same concept-the type of unified information-can benefit both individual pages and the entire site. The following illustration shows a typical news class page.

Although this layout can work on a widescreen desktop or laptop, it can be problematic if applied to a smart machine (pictured below).

Borrow a proverb from the newspaper industry: "Creases" is the first place that readers see. But folding is not so much the dividing line as the beginning of new content. When using touch-screen devices, people instinctively know that scrolling through the screen with their fingers makes it possible to scroll the page. That means the designer can maximize the folding advantage.

First, let's review the purpose of using Venn diagrams to integrate relevant types of information.

Overly-used navigation links (usually the first place to start modifying) and ads that jump to other articles are either merged or removed. The metadata appears in an empty area around the navigation. Ads, directories, site names, and whether or not navigation appears at the top of the screen reflect the priority order of the designer's mind.

When we discard the concept of the page at the beginning and then rearrange the page based on the content, we have a surprisingly good effect.

In the above, the new page element is then organized and displayed on a vertical surface. Conceptually, the browser of the smartphone becomes a window, and the user needs to fill in every piece of content. It's not that the screen gets smaller, but that the user can see less content each time than usual.

　Rethinking Navigation bar Design

Mobile phones allow designers to radically transform traditional elements, not just to rearrange them. In addition to making better modifications, they also question "Why do we need to change?"

Users can have a general idea of the content of a site through a list of links, but it is becoming increasingly apparent that the list is too verbose to be a problem that designers have to deal with. The navigation bar is out of date, and the form of pages and panels is becoming popular. More and more responsive web sites move the navigation bar to a separate page or take the form of a drop-down list. By convention, clicking on an icon that contains three horizontal bars shows a clickable list of links or a site architecture.

As shown in the above picture, 5 sites have adopted three horizontal bar ☰ navigation icons, navigation icons ☰ sometimes have explanations, sometimes not. Click the icon and the navigation will float on the page. This works fine because the user can decide when to show or hide the link.

Oddly enough, the Starbucks icon also contains a hover state, but it may not be surprising. Mobile design means information design for more applications, not just desktop browsers that support mobile devices.

　Reducing content

Cutting extra information is just as important, both for mobile and desktop Web sites. But it's not that easy to cut information. Because usually the development of things in the process is from scratch.

Plan: To identify goals, audiences, responsibilities, how to measure success, and so on.

Design: Create graphics, compose materials, build prototypes, and more.

Build: HTML, CSS, JQuery, Dojo, PHP,. NET, CMS, (where you can insert your favorite and most annoying acronyms)

Test: In different browsers, in the actual use of the process

Configuration: Upload to server, recommended in this order.

This is a violation of user intuition, but for the user to be more focused in the process, the designer must be cut from the start of the design.

Plan

Design

Review: To consolidate the cuts, we need to keep asking ourselves, "What else can we do?"

Build

Test

Editor: Carefully check every part of the site, if you remove a part, the site can still function?

Test again: It's great, you get rid of several parts, but is it too much to overdo?

Configuration

This is not for the sake of deletion and deletion is not for the convenience of some users and let the site become low-energy. This is the design of information designed to make this information more effective than users expect.

Help users make informed choices: for example, a descriptive text does not always serve the title. The title itself should contain the correct keywords that help the user decide what to click on. Thumbnails should be able to display the entire image while maintaining its own identifiable nature.

Practice Reset: When you create or edit pages, posts, pictures, or other media, think about what they will look like when they are using different environments. 就像在不同的浏览器中进行测试一样，同样的设计在不同的环境中会有什么反应?在手机浏览器中还能正常工作吗?在台式机浏览器中呢?在邮件中呢?能够被大声诵读吗?能够被粘贴到word文档中，被打印和传真吗? Do not underestimate the seemingly absurd use of the situation, they are a good attempt, not long ago the Web page was not able to appear on the phone. Where will your site appear in the future?

Delete the home page: Don't worry, then you can put the homepage back. There's nothing better than removing a set profile to help you spot the priority of your site. Which page can best present the purpose of the website? If one of them has a page that can replace the homepage, you can think about what the page can do for the site.

In every page, every article, every part of the content repeats the experiment: if you delete it, what can replace it? If the answer is "irreplaceable," then it is necessary. If the homepage disappears and the "main business" page is still working, you need to redesign the page until it becomes critical, or simply erase it.

In short, be concise. In today's modern media, space and attention are so precious that we have to make the most of it.