WebApp Design Considerations

Color design

Aesthetics-related knowledge (color composition, plane composition, etc.) I will not repeat, I believe that the people engaged in such industries no one knows nobody. Here is a brief talk about the special features of WebApp design, color and composition.

The first is color. People who have been engaged in advertising and print design work should have been exposed to one thing, the standard color palette. What is the color? What you see is not necessarily true, the counter-statement, really you may not be able to see, hehe, said some of the abstract. To give a practical example, #f0f0f0这个很浅的灰色, currently 80% of customers have been upgraded to LCD display, and most LCD display is not displayed correctly, even if the display, the display will be very different, why so? The panel type from the LCD, The LCD panel is roughly divided into the following types: NT, VA, IPS. VA and IPS panel display capabilities can be comparable with the CRT, although the price is higher, but its large visual angle (178) and complete color restoration, the designers have abandoned the CRT a dose of cardiac booster (of course, most professional graphic designers, this life can not abandon the Diamond Dragon CRT, hehe, Different is not the same). NT panel accounts for the majority of the current market, the reason is that it responds fast, low cost. 22 inch LCD Only sell 20**, do not see all know its use is low cost NT panel, NT panel due to its inherent technical limitations, its display capacity is only 16.2M color (current 16.7M color NT panel should be used in the way of vibration simulation), color is the lifeblood of the designer, Lack of color, it means that you painstakingly build the design is likely to go to the customer is completely a sample. I have seen a lot of interfaces, the use of these shallow gray, it seems very elegant, but you really think about the user's actual working environment? If he is using a cheap LCD that is not very good, then your design is not to let people scoff? In summary, first of all, Designers must make sure that their designs are very easy to use and that they are "usable" in all complex environments without serious visual disturbances. You need to check your design at least on the CRT and NT panel's LCD to see if there are layout anomalies and visual disturbances due to lack of color, and here I have to BS a bit of Microsoft Live Mail, under the lack of color NT panel, completely out of the way, neither see the border, nor the background, This is definitely a visual design of failure, in contrast, the design of the yahoo!mail is going to be a hundredfold (and the same is true for both portals as well).

In addition to the use of the environment's hardware differences, there is a difference in color settings (even when the graphics card is too poor), the kind of only support to enhance the 16-bit color of the PCI jack Card is basically extinct, you know, that is the classic Pentium mmx**. At the bottom of the current graphics card, but also support at least 24 bit true color, and support 32-bit color graphics card is everywhere. However, there are still people who do not know ("Do not" use the computer software users really do not account for a few), the use of 16-bit color enhancement settings, the consequences of the result, is naturally ugly contour lines and disgusting color collocation.

　to sum up, because WebUI's audience is very broad and uncertain, and because of the technical structure of the characteristics, we can not and do not want to ask for the end-user what (if you ask someone to install this change, it is better to do a setup come true). Therefore, to fully guarantee the ease of your design, is every WebUI designer in the visual design should first grasp a good yardstick. Desktop applications can be advanced and ornate due to the controllability of their hardware environments, but web design, especially the user interface design for Web-based enterprise applications, has to keep a sober mind at all times. look at the interface of Javaeye, it is very simple but beautiful, I believe that no one will be particularly fond of him or special dislike, if a vote, believe that 80% of people will accept, and the other 20% people should be indifferent. This is the UI visual design in the pursuit of the 80/20 principles, we do not need a particularly gorgeous appearance, as long as more than 80% of people satisfied. Here again ext, ask yourself, how many people are attracted by his appearance? The appearance of preferences can create a strong preconceived idea, which is why most applications like to make a breakthrough in the appearance of the concept of the reason (a lot of software version upgrade is the biggest improvement is the appearance). However, the industry software is definitely not the appearance of the gorgeous to win, or, in the current domestic market, the industry software has not yet reached the kind of appearance can only seek breakthroughs in the height. Therefore, as a UI designer in the field of application software, you can do the concept, attract people's attention, to get a place. But the UI designers of industry software should never put their main focus on the visual design, which will not only get you lost, but will also make your products lose their way.

Composition and visual style design

We only discuss the following three common applications, as for the 3D interface and virtual reality are not discussed, they are:Web applications, desktop applications, mobile devices.

First we look at the desktop application, so to speak, the operating system is the desktop user interface design leader, in other words, UI designers in the desktop UI design, the first thing to consider is the operating system environment. Often, a particular software environment for desktop applications, the UI is also a lot of restrictions, this limitation, is the system's inherent interaction style settings. For example, we often see a software interface that says "Wow, or Mac-style looks good!" This is used. NET development "Swing is too ugly to do things, but also thieves slow," why would this happen? Because, in most cases, we design and develop software in an operating system environment, its components and controls inevitably use the UI API provided by the operating system itself, which means , no matter what kind of software you do, you need to follow the development specifications of the relevant operating system user interface. Windows has a offcial Reference on MSDN. Similarly, Apple,java and even Nokia, they have the corresponding voluminous API documentation and development specifications. So, here again have to mention the Ext,ext API document is what? hehe, it is no different than the GUI specification of these operating systems, its API documentation is its development specification. So, I used to say "ext again how to toss, is also ext", now you should really understand what I mean. Ext, in my opinion, is not a Web UI anymore, I prefer to boil it down to the desktop UI in the Windows family. The desktop UI has one of the most basic metrics wimp (window, icon, menu, pointer), and obviously, Ext is the desktop UI style. And it interacts with Windows the same way, so I'm positioning it as a browser-based, Windows-style desktop UI library.

17xuee for you to summarize, the desktop application of the common layout is: more frame structure, by the grid, Toolbar, Menu, form, icon and other controls.

look again at the Web app, I've mentioned more than once that the Web is free and open. Because of its openness, there is today's ext, Ajax and Thin client and rich client dispute. What exactly should web design be like? This is inconclusive, because the Web is everyone's web, the existence is reasonable. Web design, the most should consider is "the context of design", in a completely open platform design, just like on a white paper painting. The biggest limitation is not the technology, but the designer itself. Only the designer can decide how to do the design of their own, also, only his ability to limit their own design. Combined with context, if you are developing a web mail program, how do you do this interface design for users who have been using outlook for many years to form a deeply ingrained habit? To develop an entirely new and untouched novelty? No, that deviates from the human nature of design, so , the simplest way to meet users is to design and develop a web-style app that looks like Outlook, giving users complete stress-free and efficient work in a familiar environment. Then, if you want to develop a news release system, naturally meet the user's established knowledge and habits of the Web, the application design like newspapers, magazines, and provide good content classification and search, in order to make it easy for users to find the resources they want, in the shortest possible time to obtain more valuable information ( Both RSS and portal are generated as a result). For example, you want to design and development is an information management system, then, it is likely to be efficient and convenient to delete and change functions and a powerful report, query system, is the UI design first need to consider (desktop-style UI is very suitable for such applications). Or, if you are developing a large, complex industry application that embodies business processes, then it reflects the highly conceptual nature of the industry solution and the normative and instructional role of software for business processes, which is a major consideration when designing the UI. All this can be achieved on the web, thanks to Ajax, thanks to the concerted efforts of developers and designers around the world.

　To summarize, the common layout of the Web interface-if it comes to tradition-is, naturally, a flat-panel text stream (the web was designed to share and view documents between researchers). However, the web has grown to this day, I really do not know how to summarize its layout style. It can only be said that the common are: banner-navi-content layouts (mostly in Web sites and most Web applications), left-and right-frame layouts (common in Web applications based on content and data maintenance), portal layouts (Enterprise portals or portals), and so on.

Finally, talk about the mobile device user interface. Typical is the application software on the mobile phone, color and size as well as graphics processing performance is its most important limitation. Basically, the development of the application on each platform to follow the platform's development guidelines and specifications, and the style is generally consistent with the operating system itself, and then do not repeat it. In fact, the reason for a separate mention of mobile devices, because some industry software also need to consider the needs of PDA and mobile phone users, which has become our design style positioning and technology selection of a restrictive condition.

IconCSS, structure and performance separation

　The icons are broadly divided into two types: vector icons and pixel icons, according to their authoring style. a few years before the alpha channel, the icons were almost pixel-like, stiff and concise (such as Windows2000 's icon), but very engaging. In recent years, as the alpha channel became more popular, the icons began to become more and more beautiful (mainly due to Apple), more and more realistic, designers in order to create more beautiful icons, and gradually switch to vector design software to create.

WindowsXP-style icons are vector icons. Drawing icons is almost a housekeeping skill for all UI designers and a yardstick for measuring a UI designer's level of competence in GUI design. Square of the place shows hero, hehe. So, what else does the icon have in addition to good looks? In fact, the main role of the icon in the graphical user interface is to assist in the identification, each person in the growth process, the first thing to know is through the recognition of its outline, rather than by the text. Therefore, the icon will be the most concise way to show the function and characteristics of things: for example, the projection of things that it should be clickable, the small envelope indicates that this is an email, the magnifying glass indicates that this is a search. All along, the icons are as close to the reality as possible, but not all the things on the web can be found in the real world. Learning ability is a human innate ability, beginning to encounter the web of human beings began to learn and understand the world, they know what is the mouse pointer, what is called the cursor, what is the link, what is the scroll bar. It is the constant cognition of mankind, which has contributed to the habit, and forms the user interface style of today. The earliest web is no icon, or, on the web, the concept of icons is completely different from the desktop UI. In WebUI, icons tend to be auxiliary rather than "click", which differs greatly from the functionality of icons in the desktop UI. Therefore, you can take a closer look, most of the traditional webui, there is absolutely no click on the icon (except for the forum emoji). )。 WebUI is more accustomed to displaying information in a textual way, with underlined text indicating that the link is clickable.

　In summary, the icon in the WebUI and desktop application icons have inherent essential differences, therefore, the design of copying desktop UI will often introduce users into the wrong habits, so that users take for granted that WebUI should do that, this is unfair to the web, the WebUI design is a great irony. You know, toolbar and menu are simply not WebUI essentials-including icons.

What about CSS,CSS? First, it appeared in the printing industry and was later introduced to the web for formatting documents. When it comes to CSS, we have to mention the separation of structure from performance. Speaking of this, maybe someone will think of, the site of the Naked Ben Festival, hehe. I am sure you all have your own opinion on how the structure and performance are separated. My understanding of this is that the web is not just css+html, but also a variety of server-side technologies. In fact, rather than let HTML and CSS to do the structure and performance of separation, so that developers in coding, when the structure and performance separation. I am not a strong supporter of the idea of separation of structure and performance, I will use table to do the layout when necessary, even if the HTML code is increased, then, I exchange for good compatibility, no longer have to pay special attention to each browser in the CSS parsing and rendering of the small differences, it is worthwhile. As long as the developer only needs to write a simple tag to develop the page in some way, who will pay attention to the HTML and CSS structure and performance of the separation? Of course, the tag package is more than one reason, I will discuss in detail in the later chapters.

Every UI designer starts his career working on pictures, and slowly, they find out why every time their design makes a developer frown, it's impossible or difficult. What is the technology? Later, the UI designers learned HTML, OH ~ The original HTML is this way, Their designs began to become more practical, not only to process and design pictures, but also to provide the necessary HTML support for developers. Then they found out why their designs were always so slow to load and that others ' designs were loaded so quickly. Later, they slowly learned the transduction, understand the CSS. Later, they not only learned HTML and CSS, but also considered performance and compatibility, and began to pay attention to the art of coding, knowing what a design pattern is, what is called abstraction and encapsulation. At this point, they really lifted themselves to the height of the WebUI designer. They find themselves getting lazy, preferring to implement a special effect by using CSS's complex coding, rather than taking the time to draw a picture (such as a shadow). They write less code, more and more CSS, and slowly, the structure and performance of the separation, HTML into the entire div and ul,css files such as the Heavenly Book general voluminous dozens of KB. Therefore, the separation of structure and expression is a natural evolutionary process of thought. I see today, there are so many designers to this as the norm, as the norm, can't help feeling, webui not that, table innocence. Is it worth it when you are unable to use DIV+CSS to achieve a certain layout instead of introducing a lot of JS or simply changing a design?

　　Summing up, the CSS undoubtedly gave the WebUI designer a bigger development, it is the WebUI designer's sword, of course, it is also a double-edged sword. Excessive reliance on CSS will only make your design more concise, more and more boring, this is the CSS lost. Picture is not a sin, if you do not want your inspiration a little bit of exhaustion, then, re-pick up the Picture it, you will find that the design can be more beautiful (see Vista related sites, design can be more beautiful). Here again a small mention of ext, although it comes with the theme of support, but it can really do to let the designers do what they want? How much does it cost to be free?

　　WebUI's graphic design, its degrees of freedom is determined by the interaction style and the technical architecture of the dual role. Limiting the interaction style and technical architecture is tantamount to limiting the graphic design style, which is tantamount to limiting the UI designer's play. Therefore, it is essential for UI designers to choose and decide on the interaction style and technical architecture as a key step in the design of the interface. Only from the perspective of the user's business, reasonable positioning of the interactive style and technology architecture, it is possible to make a real user interface to meet the users ' habits and needs. What designers really need to harness is not the technology but the design itself. so here, I want to say: never lose your way in front of technology. It is the design to choose technology, and should not let the technology to decide the design.

WebApp Design Considerations