Since the introduction of the concept of a graphical user interface (GUI) since the first WIMP presentation by Xerox in 1970, the computer user interface has been transitioned from character development to the graphical age. After less than half a century of rapid development, through the attention of the Apple system and popular beneficiaries of the Microsoft Windows system, graphical user interface presents an endless stream of changes. In the face of these colorful, emotional and rational graphical interface design, icon elements undoubtedly play a role that can not be ignored, want to explore with everyone in the next icon of the micro-world.
First, start with the semiology.
What is semiotics?
With the development of human society and the increasing civilization, the symbolic world is enriched and enriched gradually. As early as the primitive period of the past, the exchange of symbols came from the human civilization of ending notes, totem rituals and hieroglyphs. From the concrete and simple physical world to the abstract and rich symbolic world, all the forms of human spiritual culture are the products of symbolic activities.
"Symbol" - symbol, mark, the carrier of information, is a kind of sensory system perceived by the object, the object represents a certain thing, the collective agreed with the public agreement. Use simple symbols to represent complex things or concepts. At the same time it has the function of cognition and communication, through the symbol to convey information.
Semiology has been the source of linguistics since the 19th century, and then comes from three academic fields of structuralist linguistics, logic, cultural philosophy and aesthetics. Modern semiology has been born. Concerning the symbolic nature of language, attention was devoted to it during the pre-Qin period in our country. The Book of Changes, thousands of years ago, was a miracle in the history of semiotics. It established a system that contains what is said today, such as grammatical construction, semantics and language Use the complete system of symbols.
Semiotics in the graphical user interface performance is the application level, in the field of semiotic research, foreign involvement earlier. There are three ways of semiotic transmission, one of which is suitable for the Internet communication mode: common experience mode of communication. This model is based on common perceptions formed by the common experience span between the coder and the decoder, culminating in what we call the conventions of convention.
Semiotics Some Theoretical Studies Saussure and Pierce are forerunners in the field of semiotics. Saussure's structural semiotics lays the foundations for the study of European semiotics. He breaks down semiotics into signifiers and Signified A reference to both the alias and the allegory, which is the form and content.
Compared with Saussure's method of research, it is a duality around the two sides of the signifier and the signifier, while Pierce is a three-dimensional research method. He believes that semiotics contains symbols, objective objects, to explain these three, to make up for reaching the part that Saussure did not deal with. Pierce is a pragmatist philosopher in the United States. His semiology theory is based on the logical study of meaning, representation and symbolic concepts. It is summarized in three categories: design sensation, human experience and thinking . That is, the media, the object refers to explain the triangle formed by these three elements. His theory is universal, suitable for any field, known as "general semiotics." Hear the three most important symbols under the association layer below the three lower symbols: the image symbol (icon), the symbol (Index) and the symbol (Symbol).
Semiotics in the iconic micro-world naturally has three levels of performance, this article focuses on the object-related layer to further explore.
Icon object related layer
Characterization of image symbols for the object of the real or imitation to characterize, based on the similarity, there are obvious perceived characteristics. Such as computer operating system Recycle Bin with trash to express; with folded paper on behalf of the document; the meaning of the folder directly using the folder tool icon to characterize. The design of the image symbol allows the user to have a sense of pleasure in using the cognitive process. On the one hand, the morphological semantics are relatively straightforward and understandable. On the other hand, under the era of dematerialization, the cognition of the virtual world can be immediately associated with the reality Of the physical world, which is why more and more of today's graphical interface presents a "quasi-materialized" design.
The logo symbol is not like a pictorial symbol directly describes the shape of the object, which has a causal or close logical relationship with the symbolic object. The most common type of signposts in everyday life is public orientation. Since the exit of a building in a guidance system is usually characterized by the graphic concept of "gate," the homepage that follows the website in the graphical user interface is usually Small house graphics to characterize the user's browsing step has been back to the current site "home", the home page. The graphical user interface also has to use a large number of different directions up and down, straight or curved arrows, they are from the traditional public guidance system. Including the interface commonly used "refresh" icon, from the International Organization for Standardization logo of the "recycling recycling" logo simplified from.
In addition, navigation, menu, search, and other interactive controls link nodes are also identification symbols.
Symbolic symbols are not similar or directly related to the characterization of the object, it is the most abstract symbols in the large graphic symbolic implied. The objects it refers to are similar in nature or not related to themselves, but have similarities in nature. They are the conventional forms of representation that groups form in long-term labor practice. For example, corporate logos, words, numbers, colors, poses, banners and religious figures are symbols that have strong social and cultural backgrounds. For example, the shared icon first appeared in the Microsoft XP operating system is characterized by the shape of a handle, which is still used in the icons of other interface media sharing semantics. Another example is that the thumbs up characterize the "support" semantics in web pages. Belong to the category of gestures symbols. The Logo representing the product or company's corporate identity is usually used as the "Home" icon on the navigation bar of its website, which is also used as a symbolic symbol.
In the case of the use of symbolic symbols in graphical user interfaces, particular care needs to be taken because the denominator of each nation's own group is not conducive to cross-border communication. We advocate the emphasis on the elemental symbols of nationalization in the context of localization, while in the context of globalization, it is still necessary to follow the guidelines for symbolic use of trans-regional and intercultural symbols. Even the cultures in the same area may have symbolic changes in different periods.
Semantic Recognition of Graphics It is often a difficult task for an icon in a graphical interface to illustrate the complex objects it contains between pixels in pixels. Therefore, it is necessary to properly remove the noise information of the graphic and keep the brief and concise information in the icons so that the users are concerned about where they should be concerned rather than the larger amount of information.
Scott McCloud's analysis of animated images in Understanding Comics, the universal characterization of cartoons, shows that the more a cartoon is represented, the more people are represented. Therefore, the conciseness of the icon's shape and the choice of details determine the range of objects to which the graphic can refer. As shown in the figure of the high recognition interval falls in the middle of the realistic latitude, but also fully illustrates the icon is too simple or complex, will expand or reduce the scope of the reference, we must balance this degree.
Synchronicity and diachronic common-tense refers to a period of time, the same symbol has different referents; diachronic experience of a long period of change, different symbols refer to the same thing. The diachronic nature of icon design is illustrated by graphical symbolic metaphors based on cultural identities. There are two examples of time-tested features. For example, the floppy disk icon has always been to save, just for the continuation of traditional culture. The concept of "storage" has experienced the evolution of the symbols of floppy disks and hard disks in the world of realization. The most controversial iTunes 10 icon of 2010, which has been used for many years, has been replaced with a circular texture symbol that is not specifically referred to, which shows that the entire software is better aligned with current icon symbols .
Grammatical Analysis of Graphical Languages After the 1980s Professor Jochen Gros, a product design major at the University of Design and Development in Offenbach, Germany, engaged in a new exploration of graphical language. The subject attempts to explore the natural language lexical and syntax rules to adapt the graphic symbols to build a visual language. The system makes the sequence of linear graphics appear to be readable, and the text as a graphical symbol is fluid. This graphic language system takes into account the factors of different cultural backgrounds and takes into account the different logic of graphic languages outside of Europe. At the same time it is compared to some of the previous traffic sign system or building navigation system logo graphics, meaning in the meaning of the expression has greatly improved the accuracy of intercultural cross-international comprehensive rapid and efficient interpersonal communication possible. The graphic language system respectively uses thick and thin lines to indicate the textual context, verbs, adjectives, main verb-object structures in the graphic.
The operation of symbols and the combination of symbols The establishment of rules symbols needs to go through the process of symbolization. The operation methods of symbols include methods such as "insert", "add", "combine" and "iterate". In combination with the specific rules of the combination of icons, the combination of algebraic operators and icon combinations also has its own set of icon algebraic theories: Combinatorial Com, Marker MAR, Context Interpretation CON, Enhancing ENH, Inverting INV, Index IDX.
Combine COM (X, Y) and merge the semantics of X and Y for concept consolidation. Linking this icon semantics to network information is a combination of two concepts, Earth and Data Connections.
Markers The MAR operator is represented as MAR (X, Y), marked with the symbol X on the symbol Y, thereby emphasizing the local properties of the symbol Y. As shown in the magnifying glass mark "+" indicates the operational semantics of magnification.
Scenario Explanation CON (X, Y) refers to the meaning of placing X in Scenario Y, which is often a special function of X. As shown in the document with W text words "DOCX" paper contains the words, which highlights that this is a word format document file.
ENHANCEMENT ENH (X, Y) Enhances the concept of icon X with the additional attribute Y in order to enhance the attribute meaning of X. As shown by the increase of this attribute to enhance the number of people avatars, you can express the concept of groups.
There is only one variable X in the inversion operator INV (X), the operation value represents negation, which is synonymous with "no". This form of icon is often used for the same icon is a non-state switch, the equivalent of a single switch. For example, the marked object with a solid five-pointed star, but not marked with a hollow bar-type icon.
The index operator IDX (X) is used to abstract the properties of an icon. Font Row is a native player in Mac OS X. It uses a metaphorical approach to using a comfortable seat as a Logo icon for the software, aiming to make the user feel comfortable listening to a comfortable seat.
Where is the future change?
The rapid changes in computer technology give designers a new stage, the development of computer technology and the actual needs of users, these two impetus to a large extent determines the direction of development of the GUI paradigm.
First of all, the "zero interface" of nature and harmony is undoubtedly a major development direction in the future. The future will be the next generation of human-computer interaction interface based on graphical user interface, integrating a large number of multi-channel modes of communication such as natural language and touch , More actively promote the exchange of people, people and the world, between man and nature. In this trend of the times, the icon shape will be how to develop it?
Overall appearance of the times and personality of visual symbols and shapes: the size of the icon is widely used; exquisite, details, artistic personalization; material tends to restore the true nature of the simulation, that is, to be materialized; the silhouette icon will be more refined and compact; iOS mobile terminal app icon In many outstanding works put on a strong design sense of the rounded coat.
Throughout so many excellent icon design, art, graffiti style, silhouette, 3D, realistic style, and even a variety of material techniques, such as the concept of soft clay icon creation, technically, almost omnipotent. In addition, we can have more possibilities to guess and try?
I first went to throw a brick. Once there were teachers and students who talked about the fashion issues. In a sense, the tracing back to history and the retro feeling are not necessarily to be tried. Using today's techniques, we can draw a picture When the interface just hatched prototype pixel icon, it will be some kind of scene.
Here to share an Apple Museum collection interface site: The Vintage Mac Museum
Including CSS 3 I do not know when the technology can be popularized, the designer using the logic of coding combined with the graphical thinking of thinking, there will be more ideas and interesting things worth our visit to personally enjoy the process.
http://www.red-team-design.com/wp-content/uploads/2011/09/awesome-css3-buttons.html
Source: http://cdc.tencent.com/?p=5038