Interface design is a branch of design that beautifies, optimizes and standardizes the user interface of software in order to meet the requirements of software specialization and standardization. Specifically, it includes software startup cover design, soft

Frame design, button design, panel design, menu design, label design, icon design, scroll bar and status bar design, installation process design, packaging and commercialization.

In the process of design, there are some key issues that need attention. Here are some key points:

Design of (1) software boot cover

The software startup cover should end with a high-definition picture. If the software boot cover needs to be used on different platforms and operating systems, it will consider different formats and choose different colors.

It should be more than 256 colors, preferably 2 16 colors. The size of the software boot cover is mostly 1/6 of the resolution of the mainstream display. If it is a series of software, the unity and continuity of the overall design will be considered. The company logo, product trademark, software name, version number, website address, copyright notice, serial number and other information produced or supported should be prominently marked on it, so as to establish the image of the software and facilitate users or buyers to get tips when the software is started. Illustrations should use graphics with independent copyright, strong symbolism, high recognition and good visual communication effect. If photography is used, it should also be digitized to form the personalized characteristics of the software.

(2) Software framework design

The framework design of software is much more complicated, because it involves the use function of software, so it is necessary to have a better understanding of the program and use of software products, which requires designers to have certain follow-up experience of software, be able to learn software products quickly, and communicate with program developers and program users of software products to design a friendly, unique software framework that conforms to the principles of program development. Software framework design should be concise and lively, with as little unnecessary modification as possible. It should consider saving screen space, the size of various resolutions, the state and principle of zooming, and reserve positions for buttons, menus, labels, scroll bars and status bars designed in the future. In the design, the overall tone should be reasonable, the software trademark should be placed in a prominent position, the main menu should be placed on the left or above, the scroll bar should be placed on the right, and the status bar should be placed below, which should conform to the visual process and user psychology.

(3) Software button design

Software button design should be interactive, that is, there should be 3 to 6 state effects: click state; The state in which the mouse is placed on it but not clicked; The state that the mouse is not placed on it before clicking; The state that the mouse is not placed on it after clicking; The state when you can't click; The state of being independently and automatically changed. Buttons should have a concise icon effect and allow users to have function-related reactions. The style of buttons in the group should be unified, and the buttons with big functional differences should be different.

(4) Software panel design

The design of software panel should have zoom function, the panel should be clearly divided into functional areas, and it should match the style of dialog box and pop-up box to save space and facilitate switching.

(5) Menu design

Menu design generally has a selected state and an unselected state. The name should be on the left and the shortcut key should be on the right. If there is a lower menu, there should be a lower arrow symbol, and different functional areas should be divided by lines.

(6) Label design

Label design should pay attention to the change of corner parts, and the state can refer to the button.

(7) Icon design

Icon design colors shall not exceed 64 colors, and the sizes are 16x 16 and 32x32. Icon design is a square art, which should pay attention to visual impact. It needs to show the connotation of the software in a small scope, so many icon designers use simple colors when designing the logo, and use their eyes to make many wonderful icons by using the spatial mixing effect of colors and points.

(8) Design of scroll bar and status bar

The scroll bar is mainly designed for the transformation of content in a fixed-size regional space, and should have up and down arrows, scroll marks and so on. Some still have traces of turning pages. The status bar is used to display and prompt the current status of the software.

(9) Installation process design

The design of installation process is mainly to beautify the process of software installation, including the graphical representation of software functions.

(10) packaging and commercialization

Finally, the protection of software products should be considered in the packaging of software products, and the improvement of functions should be integrated into aesthetics. Some product introductions and product interface designs can be printed.

Icon design specification

Digital design introduces a new icon design style. The following are specific specifications for designing and creating style icons.

Icon style should be interesting, colorful and energetic, because the current system supports 32-bit icons with very smooth edges. After drawing each icon in the vector program, processing it with Adobe Photoshop can make the image more perfect. This specification is specially written for designers. When creating images, it is recommended that you cooperate with high-level graphic designers, especially those with rich experience in vector and 3D software.

The purpose of the overview of icon design is to familiarize you with the new style of WindowsXP and prepare for creating icons.

Icon style characteristics

(1) is rich in colors and complements the appearance of WindowsXP.

(2) Different angles and perspective features add dynamic vitality to the image.

(3) The edges and corners of the elements are very soft and slightly smooth.

(4) The light source is located in the upper left corner of the icon, and other parts of the icon are illuminated by ambient light.

(5) The gradient effect makes the icon three-dimensional, thus making the appearance of the icon fuller.

(6) Projection makes the icon more contrast and stereoscopic.

(7) Adding contours can make the image clearer.

(8) Daily necessities (such as computers and equipment) have a more modern personal appearance.

Icon size

There are four sizes of Windows XP icons, and the following four sizes are recommended:

(1) 48x48 pixels

(2) 32x32 pixels

(3) 24x24 pixels

(4) 16x 16 pixels

Icon color depth support

WindowsXP supports 32-bit icons. 32-bit icon is 24-bit image plus 8-bit alpha channel. Make the edge of the icon very smooth and blend in with the background.

Each WindowsXP icon should contain the following three color depths to support different display settings:

24-bit image plus 8-bit alpha channel (32-bit)

8-bit image (256 colors), plus 1 bit transparent color

4-bit image (16 color), plus 1 bit transparent color.

pallette

The main color used in the icon.

Angle and grouping of objects

Perspective grid used by WindowsXP style icons: Not all objects use 16? 6 can achieve good results. Some objects are usually displayed as intuitive images: document icons, symbol icons (such as warning or information icons) and single object icons (such as magnifying glasses).

Unless creating overlapping auxiliary objects can clearly express the meaning of the icon, intuitive images should be used for readability and completeness. You should also consider how to view icons in groups to determine how to group objects.

project

After using projection, WindowsXP icons will be clearer and more stereoscopic. You can achieve this effect in Photoshop, which will be introduced later in this guide. To add a drop shadow to an image, double-click the image's layer in Photoshop and choose Drop Shadow. Then change the angle to 135, the distance to 2, and the size to 2. At this point, the projection is 75% opaque black.

summary

When drawing XP-style icons, adding an outline to the image can make it clearer and ensure that the image has a good effect under different background colors.

concept

When designing icons, consider the following factors:

Make use of existing concepts to ensure that users' ideas are truly expressed. Consider how icons appear in the user interface environment and how they are used as part of an icon set. Consider graphics

Cultural background. Avoid using letters, words, hands or faces in icons. When people or users must be represented by icons, please make icons as popular as possible. If the image in the icon consists of multiple objects, then consider how to make the image smaller. It is recommended to use no more than three objects in the icon. For 16? 6. You can also consider deleting some objects or simplifying the image to make it easier to identify.

Transparent tool

Open Gif Movie Gear (GMG) to a dialog box with your icon. Click the background color of the icon with the eyedropper tool. This color will turn dark yellow-green (or choose as in GMG

The color of the transparent background color). Repeat all 4-bit and 8-bit frames. To save the icon, select the file-> Save icon as ...

Create toolbar

Windows toolbar icons use the same style as other icons, except that they don't use projection. Because toolbar icons are very small, it is recommended that you use simple images. If displayed in an intuitive way

Images can clearly express the meaning of icons, so there is no need to use other complicated methods.

Create AVI

WindowsXP uses 8-bit AVI. The process of creation. Avi files are the same as creating icons-prepare an image in Photoshop and drag it into GMG. Please follow the instructions below to create an 8-bit icon. To save AVI using GMG, please go to file-> Export as-> AVI files. When created. Avi file, please consider the following factors: use magenta (R255 G0 B255) as the background transparent color. In Photoshop, it is important not to have stray pixels. Please set the filling capacity to 0 and ensure that anti-aliasing is not selected.

Software man-machine interface

UI is the abbreviation of user interface. UI design refers to the overall design of human-computer interaction, operation logic and beautiful interface of software. Good UI design is not just about making software become

Have personality and taste, but also make the operation of the software comfortable, simple and free, fully reflect the positioning and characteristics of the software.

Good things are often irresistible. This is why the excellent design of products plays an important role in the sales and promotion of almost all commodities such as computers, automobiles, daily necessities, furniture, food and clothing.

Similarly, for software companies, software products are their commodities, and the software interface is the appearance of their products. Whether the interface is beautiful or not is directly related to the marketing success or failure of software products.

We can clearly see that Microsoft attaches great importance to software interface design. Please think back to the first time you saw win2000. Are you amazed at the beauty and ease of use of his interface compared with nt4.0? And if you have used xp system, you will be shocked and impressed by its amazing sensory concept! Kingsoft PowerWord of Kingsoft Company is a successful example of domestic software. The change from Kingsoft 3.0 to Kingsoft 200 1 is a classic. The famous web animation software flash was changed from 3.0 to 4.0, and only icons and tables were modified, which immediately greatly enhanced the color …

Nowadays, successful software companies in the world attach great importance to the beautification design of software interfaces, because they deeply know that in the fierce market competition, it is far from enough to have powerful functions and defeat powerful opponents. We can be similar. When choosing a mobile phone, if you have two mobile phones with the same performance, and the first one is much more beautiful than the second one, which one would you choose? The beautiful kind, of course. Imagine that your customers will also compare you with competitors' software.

Nowadays, software companies all know how important advertising marketing activities are to marketing, and spare no effort to advertise, do activities and promote. But we know that the ultimate goal of these activities is to let users buy and use software products, and users ultimately use your products, so why not make more efforts on the aesthetics of the software interface? In mature markets such as home appliances, automobiles and computers, it is a joke to promote a powerful but ugly product with very beautiful advertisements. However, this kind of joke is common in the software industry. This is also a big gap between China's software industry and foreign countries, just like football in China.

Practice has proved that as long as merchants invest little in product aesthetic design, they will have great output. Its input-output ratio is far greater than the input of function-led development.

After users buy back the software, their connection with your enterprise, or the expression of your corporate image in the eyes of customers, is largely conveyed through the interface of your software, so a beautiful and friendly user interface will be very beneficial for promoting your corporate culture, instilling your corporate philosophy into customers and promoting your enterprise. Especially if your company is in the form of project contracting, the beautiful interface will give your customers confidence and goodwill both when bidding and after project delivery.

To be a competitive software, it needs not only powerful functions, but also friendly interface design. Looking at today's it industry, the development trend of its software interface design generally has the following technologies:

The development of 1. command language user interface.

According to the characteristics of its language, the forms of human-computer interaction are divided into

A. Formal language

B. Natural language.

C. Quasi-natural language.

2. Wide application of graphical user interface.

Graphical user interface and human-computer interaction process greatly depend on the participation of vision and manual control, so it has strong direct operation characteristics.

3. The maturity of direct operation user interface technology.

The user ultimately cares about the object he wants to control and operate. He only cares about the semantics of the task and will not be too distracted by the semantics and grammar of the computer. For a lot of physical, geometric and visual tasks, direct manipulation has shown great advantages.

4. The development of multimedia user interface and multi-channel user interface has greatly enriched the expression forms of computer information.

5. Application of virtual reality technology

Virtual reality system provides users with immersive multi-sensory experience. As a new form of human-computer interaction, virtual reality technology is expected to fully realize a harmonious and "people-centered" human-computer interface than any previous form of human-computer interaction.