GUI

Development path

1. The germination stage

The earliest concept of the window system was put forward with the emergence of the first computer real-time graphics display system, namely SAGE Project (US Air Force Air Defense System) and Ivan Sutherland Sketchpad (Sketchpad is recognized as a computer-aided drawing (CAD) program The founder of, and has a major impact on the development of modern computer graphical user interfaces). Sketchpad was running on the Lincoln TX-2 computer at MIT. It uses an x-y point image display and a light pen that was just invented at the time.

In 1960, Doug Engelbart developed the OLS online system at SRI (Stenford Research Institute), adding cursors and multiple windows to the software interface.

In 1970, some SRI researchers entered Xerox PARC (Palo Alto Research Center) and completed the first WIMP (window, icon, menu and pointer/drop-down menu) demonstration.

In 1973, the first computer using the Alto operating system was developed at the Xerox PARC Research Center. Alto is the first operating system that has all the essential elements of a modern graphical user interface. Features: the use of a three-button mouse; bitmap display; the use of graphics windows.

2. Development stage

In 1980, ThreeRivers Computer Company released the Perq graphics workstation.

In 1981, Xerox released Xerox 8010 (Star) as a replacement for Alto. Features: double-clickable icons, overlapping windows, dialog bar, monochrome display with a resolution of 1024*768.

In 1983, Apple released Lisa. Features: drop-down menu and main menu bar. Visi released Vision, the first electronic charting software that uses a complete graphical interface and targets the IBM personal computer environment. The initial practical use of the graphical user interface was used by Vision to design spreadsheets. The concept of "window" and mouse was first introduced to personal computers, which was earlier than Microsoft's first version of Windows.

In 1984, Apple released the Macintosh series of computers. Macintosh is the first commercial product to successfully use a graphical user interface. The virtual desktop concept started to work. The files looked like a piece of paper, and the directories looked like folders. There was also a set of desktop gadgets such as computers, notebooks, and clocks. All these things can be placed on the screen according to their own needs, or they can be deleted by dragging files and folders into the trash on the screen.

In 1985, Geos released the Commodore64 system after Apple II of Apple. Microsoft released the first version of the inspection operating system Windows.

In 1987, Apple released the Macintosh II computer, which was the first color display model of the Macintosh. Features: Display resolution of 640*480, 256 colors. Microsoft released the second version of Windows. Features: The window has new functions that can be superimposed and resized. Acorn released the "Arthur" graphical interface operating system developed for Acorn computers.

In 1988, Apple released GS/OS, a 16-bit operating system developed for Apple IIGS. Its graphical interface is very similar to Apple's Macintosh series. IBM released the standard version of OS/21.10 with the addition of a graphical user interface (OS/21.0 is also completely in command line mode). This version of the graphical user interface is written by Microsoft, so the entire interface looks very similar to Windows2.

In 1990, Commodore released Amiga Workbench 2 for the A3000 model. Features: added three-dimensional bump effect, and increased system menu. Microsoft released Windows3.0. GeoWorks releases PC-GEOS.

In 1992, IBM released OS/2 Version 2.0, a 32-bit true color operating system. Microsoft released Windows 3.1. The Amiga Workbench 3 system of the AGAAmigas computer is released.

In 1993, Microsoft released the first version of Windows NT, which is Microsoft's new 32-bit operating system, which uses the same version number and graphical user interface as Windows 3.1.

In 1994, QNX Software Systems released the first embedded micro-window system Phtotn microGUI. The resource manager window is a typical application of embedded multi-window technology.

In 1995, Microsoft released Windows95. Agenda96 is released.

In 1996, New Deal Office 2.5 was released, its predecessor was PC-GEOS. IBM released OS/2Warp4. Microsoft released Windows NT 4.0 with the same interface as Windows 95.

In 1997, Apple MacOS8 was released and sold 1.25 million copies in just two weeks, becoming the best-selling software at that time.

In 1998, Microsoft released Windows98. Features: Internet Explorer network device replaces the traditional window form, the entire help system is also replaced by Internet Explorer, and ads are placed in the upper right corner of the desktop.

In 1999, Apple released Mac OS X Server, a Unix-based operating system that inherited the Apple Macintosh graphical user interface. RISCOS released RISCOS4 operating system suitable for RiscPC, A7000, A7000+ computers.

In 2000, Apple announced the release of Mac OS X, using a new crystal graphical interface. Microsoft Windows2000 (AKAWindows NT 5) was officially released.

In 2001, Microsoft released Windows XP. Microsoft's next-generation operating system has invested heavily in user interface design, "expecting to change the way people use computers." In the half a century since the computer appeared, the graphical interface has been continuously improved and gradually matured. It has completely replaced the command language interface and become the dominant form of modern software interface. The graphical user interface is one of the greatest inventions in human history, and it has profound significance for the popularity and further development of computers. Xerox, Apple, Microsoft and other companies have played an important role in this process.

Features

1. Human-computer interaction

The main function of GUI is to realize human-computer interaction between human and computer and other electronic devices. It is a tool for data transmission and interactive control between the user and the operating system. The user can control the electronic device through certain operations, and the electronic device will feedback the result of the user's operation through the display screen. As an indispensable part of using electronic information products, the graphical user interface enables information interaction between people and software. This human-computer interaction makes the user's operation more convenient.

2. Aesthetics

For ever-changing electronic products, graphical user interfaces are playing an increasingly important role. Beautiful and friendly interface design is often more attractive to customers and becomes the key for enterprises to gain a competitive advantage. The graphical user interface integrates knowledge from many disciplines such as ergonomics, cognitive psychology, design art, linguistics, sociology, and communication. It has now developed into an independent discipline. 1 Today, with the rapid development of electronic technology, the difference between the performance and function of electronic products is not very large, and developers have begun to pay more attention to the aesthetics of products. Atmospheric appearance, simple design style, and good visual effects have increasingly become the key factors affecting user experience. Because the graphical user interface is a combination of various elements, including many artistic and beautiful design elements, the interface is beautiful, this beautiful visual experience can enable users to purchase corresponding products and improve the economic benefits of the enterprise.

3. Practicability

The purpose of the GUI is to achieve human-computer interaction. Developers research and design a specific user interface, packaging obscure computer languages into simple and easy-to-understand graphics, and users can understand the content expressed behind complex computer languages through the recognition of graphics. The graphical operation mode has strong practicability, which facilitates the user's use and improves the use efficiency. This creative transformation has made cold electronic products intimate and walked into the lives of thousands of families from the laboratory. By continuously optimizing the graphical user interface, developers make the transmission of information and data more efficient, and the result operation and feedback are more convenient and accurate, bringing a good user experience and strong practicability.

4. Technicality

The graphical user interface of early electronic products uses character interface, which requires the operator to have high professionalism. After the text is converted into graphics, the corresponding data information is also converted into images. The user operation and the received information are all graphic objects, no longer need to recite a large number of command symbols, and can operate electronic products without having professional knowledge and operation skills. But the simplified operation process does not mean that the graphical user interface is not technical. Hidden behind the graphical objects are more professional code writing and related operations. On the contrary, the operations behind these are more technical. Technicians write and design relevant code to convert the character interface into a graphical interface so that users can use the graphical interface to achieve what they want to operate. This conversion method often requires a high degree of technicality, so the graphical user interface only hides the technicality, not the technicality.

Classification

With the rapid development of Internet technology and communication technology, various communication electronic consumer products, such as desktop computers, tablet computers, and mobile phones, have become indispensable items in people's daily lives. The graphical user interface (GUI) of electronic consumer products is a bridge for data transmission and manipulation interaction between the hardware and software systems of electronic products and users. The graphical user interface (GUI) of electronic consumer products can be roughly divided into the following two categories.

1. The user interface of the operating system unique to the specific product

The operating system user interface is bound to electronic consumer products and is a part of the product, such as the specific brand, specific model of mobile phone or computer unique operating system interactive interface, which includes the boot screen and operating system user interface Icons, layout, interactive dynamic presentation, pointer cursor, desktop background, window arrangement, menu status, etc. A beautiful, intelligent, reasonable, efficient, and easy-to-use interactive interface is another important factor that affects consumers' purchase decisions in addition to the appearance of electronic products.

2. Software that can run on electronic products of different brands and models

Software that depends on the Internet, computers, and mobile phones, especially free software, has a different profit model from the direct exchange of goods and currencies in the traditional real economy. It uses a completely free promotion model and does not directly make profits from users. The main source of profit is Internet advertising and Internet value-added services. A stable user base is the basis of the development of the software industry. How to lock users and increase user stickiness is a problem that free software must solve. To solve this problem, in addition to developing unique features that meet user needs, it is for users. It is also important to provide an excellent, convenient, and beautiful graphical user interface (GUI) to enhance the user experience.

System structure

Graphic user interface system usually refers to the display model, window model and user model supported by the corresponding hardware platform and operating system, as well as the application program interface API (Application Program Interface) composed of the application interfaces of these three models, in which the computer hardware The platform and operating system are the foundation of the graphical user interface system. Only when the hardware platform technology and operating system functions have developed to a certain extent, users can conditionally use the graphical user interface. Generally speaking, a certain graphical user interface system only depends on a specific hardware platform and operating system, but Motif is an interface system that can run on multiple hardware platforms and operating systems.

The display model of the graphical user interface determines the basic display mode of the graphic on the screen, that is, the way of displaying various graphic objects using the bitmap graphic display technology. For example, define the type face and size of the font created on the screen, and define the generation method of the line or curve in the drawing program, including various treatments, such as dimension, shading, etc. Different graphical user interface systems use different display models. For example, most current graphical user interfaces running on UNIX systems use the X window system as the display model, while MSWindows3.1 uses the graphical device interface (GDI) designed by Microsoft itself as the display model.

The window model determines the image of multiple applications displayed on the screen. It can be expressed in the design of the program as movable, resizable windows, menus, scroll bars, dialog boxes, etc. It usually consists of two parts: one is programming tools, such as function set; the other is instructions on how to move, output and read the information displayed on the screen. Some graphical user interface systems include a unique window system, such as AppleMacintosh, while others use a common window system, such as MIT's X window system. The X window system can not only serve as the display model of the graphical user interface system, but also serve as its window model.

The user model of the graphical user interface is also called the look and feel of the graphical user interface. It also includes two parts: First, the tools for constructing the user interface, such as toolboxes and frame sets, including high-level interface components (Widget) Or the definition and description of the data structure of the object element; the second is to define the organization of various graphical objects on the screen and the behavior specifications and agreements between these objects. Each graphical user interface user model should explain what kind of windows and display modes it supports, because the definition specifications and the establishment of the tool set must be specific to the display model and window model.

The application program interface API of the graphical user interface system is composed of the display model, the window model, and the user model application program interface. The application program interface of each model is mainly a development tool provided by the model to the developer.

The desktop management system is a graphical management system for human-computer interaction. It makes human-computer interaction more convenient and flexible. It usually includes the following components: a graphical file management system, an icon library for users, a desktop management organization, and icons Treasury management agencies, etc.

Design Principles

Different uses and types of graphical user interfaces have different visual expression styles. A well-designed graphical user interface does not have a fixed formula to apply, but a good design will also follow certain guidelines.

1. Design principles of consistent interface style

The consistency of the user interface mainly refers to the general operation sequence, terms and information wording presented to the user, the layout and color matching of the interface elements

The plan and layout style must be consistent. Having a highly consistent user interface allows the information in all parts to be organized in an orderly manner, giving the user a sense of clarity and overallity, which helps the user establish an accurate mental model for the operation of the interface, thereby reducing training and support costs.

Except in special circumstances, the design style of the graphical user interface should maintain a high degree of consistency. Consistency is one of the important factors for the success of the interface design. An effective way to ensure consistency is to write formal "design style standards" documents. This document specifies the design guidelines that must be followed in the design of the graphical user interface of a product or series of products. The design criteria specified in the "Design Style Standard" should be very specific, which may include examples of icons and sizes, fonts, and other content and formats used. It can be effectively used for the management and adjustment of the graphical user interface, and is indispensable for the design work of designing large-scale, complex graphical user interfaces or the collaboration of multiple people and departments.

2. The logical principle of interface layout

The interface layout should reflect the general sequence of user operations and the frequency of use. The layout of the graphical interface should conform to the order in which people usually read and fill out paper forms. Usually people's reading order is from left to right, top to bottom, and some countries and nationalities have different mainstream reading habits. For example, Arabic and Hebrew are from right to left and top to bottom. Therefore, the layout of the graphical interface will be modified according to the differences in regional culture. The graphical interface elements that users often use should be placed in a prominent position so that users can easily notice them. On the contrary, some infrequently used elements can be placed in an inconspicuous position, and even allow users to hide them in order to expand the available area of the screen. For those elements that need to have certain conditions before they can be used, they should be displayed in a gray state and only changed to a normal state when they have been used. The specific element should be placed in the vicinity of the data to be controlled to help the user establish the relationship between the element and the data. Elements that affect the entire dialog box should be distinguished from those that control specific data, and closely related elements should be organized in the same area.

3. Inspiring design principles of the interface

Apocalyptic is a term put forward by Donald Norman when studying the design of everyday objects. It is defined as the characteristics and actual characteristics of things that are felt, mainly to determine the basic characteristics of how things can be used, that is to say, apocalyptic refers to a certain object Attribute, and this attribute allows users to know how to use this item. For example, door handles of different shapes imply "push", "pull" or "rotate" respectively. The graphical elements in the graphical user interface (such as buttons, icons, scroll bars, windows, links, etc.) can also imply the functions they represent or inspire users to use them. Icons are one of the most important elements in a graphical user interface. For example, the window is reduced to an icon, which can be used to indicate a dialogue process that you do not want to perform temporarily. The user can click it at any time to re-execute the dialogue. Icons can also be used to indicate programs and functions that users can access, such as the recycle bin, "disk" icon, etc. Icons can also be used for data storage and organization, such as various types of file icons and folder icons. Due to technical limitations, most of the icons that initially appeared in the graphical user interface are monochrome geometric symbols, and their sizes are relatively small. As the resolution of the display increases, 1024 × 768 pixels and 1280 × 1024 pixels appear. More and more icons adopt a realistic design style and are no longer limited to simple geometric types. Graphic elements not only make the user interface visually artistic, but more importantly, help the user understand the interface. Designing icons that represent system functions or object operation methods will bring some interesting challenges to designers. One of the most important challenges is to use the visual language of icons to represent abstract concepts. Icon design should maintain a unified visual style, but also pay attention to make each icon have a distinctive personality.

4. Interface design should follow customary usage

Idiomatic usage is based on the way we learn and use habits. The interface that follows habitual usage does not focus on technical knowledge or human intuition, nor does it cause associations. The main reason why the graphical user interface is easy to use is to define a series of vocabulary for users to interact with the system. The basic usage vocabulary is formed by inseparable actions and feedback mechanisms such as pointing, clicking (clicking) and dragging. The basic usage vocabulary can form a series of combined vocabulary and form a more complex combination of usage. For example, operation methods such as double-click, click and drag, and operation objects such as buttons and check boxes.

Interface designers often look for suitable metaphors for interface design. Metaphoric interfaces rely on users to establish an intuitive connection between the visual cues and functions of the interface. Users can use the life experience of the physical world to understand the user interface. Effective metaphors help users learn and understand how to use the interface. But Alan Cooper believes that "use metaphor for user interface design" is a wrong concept. First, metaphors are not scalable. Metaphors that are effective in the simple process of simple programs may fail as the complexity of the program increases. Secondly, metaphor relies on a similar association between designers and users, but if users do not have a similar cultural background as designers, it is easy to be ambiguous. In addition, metaphor binds our ideas to the physical world, which has great limitations.

GUI test

GUI (Graphical User Interface) is the front-end representation of the underlying program code, and it will make corresponding front-end responses to user operations such as selecting drop-down list boxes, menus, navigation bars, button controls, and so on. Compared with the traditional software, the software with a graphical interface has a beautiful graphical user interface that gives users the most intuitive experience, allowing users to quickly get started and is gradually favored by users. Therefore, the software on the current market Most have graphical user interfaces.

GUI testing refers to software testing of software with a GUI, by testing the GUI of the application program, so as to test the function of the system under test, the structure of the GUI, and the code to implement the GUI. The mobile terminal GUI test case refers to a series of related events/actions of a completed user behavior, that is, the mobile application GUI test case is composed of a series of events/actions. It can be seen that the input of GUI testing of mobile applications is generally events/actions, while the output is generally state changes. The state change may be reflected in the change of the page, or it may be the state change of some elements on the page. In GUI test cases for mobile applications, the dependency between events/actions is also a very important activity.

GUI protection

1. Copyright Protection of Graphical User Interface (GUI)

The graphical user interface is designed to pursue user-friendliness, simplicity, reasonableness, efficiency, and intelligence. It has certain practicality, but "utility" does not belong to the traditional protection of copyright. TRIPs and the WIPO Copyright Treaty (WCT) both believe that The protection of the copyright of a computer program should not extend to "ideas, procedures, methods of operation, or mathematical concepts." An important basic principle of copyright law is to protect the expression of the work but not the ideological connotation of the work. The graphical user interface of the operating system and software is the behavior and result of the software running. Whether it constitutes an “expression” that can be protected by copyright law is a question worth considering. The copyright protection provisions specifically for computer programs, that is, Article 2 of the "Protection Regulations for Computer Programs" only protect computer programs and related documents. It is believed that the graphical user interface depends on the existence of internal programs. From this visual effect, only Can feel the designer's thinking, but not as an independent existence, so it cannot be a work protected by copyright law. In the current judicial practice of our country, there are litigation cases concerning software interface infringement, and the basis of the judgment is also the basic principle of the copyright law.

2. Graphic design user interface (GUI) design patent protection

Countries (regions) with relatively developed communication technology industries in the world, such as the United States, Japan, South Korea, France, the United Kingdom, the European Union, and Taiwan, have successively established a design patent protection system for the graphical user interface of electronic products.

(1) Protection of the GUI by the US design patent system:

Regarding U.S. design patents, U.S. Patent Examination Guidelines Section 1504.01 refers to: out of the description of the main body of design patents applied under Article 171 of the Patent Law "new, original, decorative designs applied to industrial products", Images that are not applied to industrial products cannot be applied for design patents. "Computer-generated icons" (Computer-generated icons), such as full-screen displays or individual icons, are two-dimensional images, which can only be used as surface decoration when viewed separately. If you want to apply for a design patent, you must meet the "applied to industry" Product". If the claim of a design patent application is a computer-generated icon displayed on a computer screen, display, other display panel, or part of the above types of displays, the claim is eligible for "applied to industrial products". The patentable design is inseparable from the items it is applied to. The design cannot exist alone as a surface decoration. Therefore, the computer-generated icon must be reflected on the computer screen, monitor, other display panel, or part of the above display device. The US Examination Guide 1504.01(a) has a detailed description of the examination procedures and standards for the application of "computer-generated icons" as design patents.

(2) Protection of GUI by Chinese Patent Law:

"Decision of the State Intellectual Property Office on Amending the "Guidelines for Patent Examination"": (SIPO Order No. 68) Effective May 1, 2014, newly added protection of design patents for graphical user interfaces. The design referred to in the Patent Law refers to "a new aesthetically pleasing design for the shape, pattern or combination of products and the combination of color and shape and pattern and suitable for industrial applications. The design must use the product as the carrier and the appearance Design is the design of the product, and its carrier should be the product." "The protection scope of the design patent right shall be based on the design of the product shown in the picture or photo.", "For the product design including the graphical user interface, the overall product design view shall be submitted".

Aesthetic research

1. The beauty of the graphical user interface

The composition of the graphical user interface can be understood as the process of constructing the graphical user interface. Through precise calculation, design, segmentation of the graphical interface, placement of the graphical interface itself and all the graphical interface components in the whole, a high visual dynamic balance and unlimited design Possibility to create highly visually clear designs. Some specific compositions, such as tic-tac-toe composition, circular composition, S-shaped composition, etc., will give users a visual beauty. The typical golden section contains rich aesthetic values, with a strong mathematical beauty.

In addition to using mathematical logic for creation, the method of plane composition is also often used for design. For example, use contrast, repetition, change, balance, etc. Graphic user interfaces often use the size of graphic elements to contrast, which not only increases the visual fixation point, but also highlights important functions.

2. The color beauty of the graphical user interface

The beauty of color in the graphical user interface can be understood as starting from the user's perception and psychological effects of color, using scientific analysis methods to restore complex color phenomena to basic elements, using the variability of color in space, quantity and quality , According to certain rules to combine, and then create a beautiful color effect suitable for graphical user interface. According to the data, 90% of the information people receive from the outside world comes from the eyes, and color has a huge influence on the emotional tendency of the interface. To allow users to understand the beauty of color, designers should understand the user's psychological feelings and cognitive characteristics of color, so that the color beauty of the entire visual interface can be well grasped. The user's visual interface is different from daily photos or graphic art works, and it assumes certain functions. Therefore, the user's visual interface has special requirements for color, which must have a high degree of consistency and meet the user's aesthetics. According to the change of color hue, lightness and saturation, it can produce a rich and harmonious graphical user interface.

3. The light and shadow of the graphical user interface

Light and shadow exist in all realistic environments. This combination allows us to recognize the texture of the material, understand the size of the object, perceive the space and confirm the position. If you want a visual interface with a sense of hierarchy and space, and get user approval, then excellent light and shadow effects are necessary. Adding a light source to the graphic effect can make the interface have an environmental effect and obtain a rich sense of hierarchy. The effective use of light and shadow effects can also make the design interface gain visual focus. The icebrrg website's first-level graphical user interface adds radial light to the upper right corner to make the dark blue background produce an effect of viewing under the sea; at the same time, guide the user to continue reading along the emitted light. Different expressions of light and shadow can effectively shape the texture and level of the interface. Through the subtle portrayal of light and shadow, such as adding a weak shadow under each button, adding soft highlights at appropriate positions, the overall interface has a sense of volume. In fact, many exquisite interface designs, after zooming in, their secrets will be presented in front of us. It is this subtle design that allows users to get a higher visual enjoyment and appreciate the beauty more.

4. The humane beauty of the graphical user interface

The humanity beauty of the graphical user interface can be understood as the realization of the graphical user interface, based on human behavior habits, physiological structure, psychological situation, thinking mode, etc., around the needs of people, to realize the psychophysiological needs and spiritual pursuit of people Respect and satisfaction. The graphical user interface must satisfy not only the user's visual aesthetics, but also the inherent needs of the user's cognitive characteristics and behavior habits. Designers often pay great attention to graphic details when they start designing, but designers should first take a moment to think about whether these visual elements are necessary and what level of detail they need to have.

Development trend

1. Make good use of metaphors

From a cognitive point of view, people will seek clues to understand new things from the existing experience background and then generate associations when they are cognizing. Therefore, we must master this cognitive process in design and make good use of metaphor to convey the interface Essentials and things to express in the design. For example, use the trash can to refer to the function of recycling files.

2. Direct control

Direct manipulation makes the user feel "operated". In order to satisfy this principle, when a user operates an object, the user must always be able to see the object on the screen, and the effect of the action performed on the object must be able to be presented in real time. For example, drag a document, or drag the cut text from one document to another. Provide direct operation function when users need it, save users to deal with some trivial things.

3. Visibility

In the user interface of the software, the user interacts with the interface by tapping the objects seen on the screen through a device such as a mouse. The user clicks on an object and then selects the action to be performed on the object. All the actions that the object can perform are displayed in the menu, and the user does not need to memorize the action instructions, but only needs to check from the menu.

4. Visual art perfection

Perfection means that the interface should adhere to the principles of visual design and properly organize the interface information. This means that the picture elements must have a better screen display effect, and the display technology should have a higher quality. The graphic design should be as beautiful and exquisite as possible, so that the form of the graphic conforms to the common perception of beauty. The modeling elements of the four major types of logo design, such as point, line, surface and body, can be used in conformity with the law of form to form the aesthetic sense independent of the structure of various specific things.