Editor's Guide: When it comes to the design of some form pages, required items often need to be specially marked with "*". The author of this article starts from the very common asterisk (*), from the origin of "asterisk (*)" to the current user interface application, summarizes the relevant information and looks at it together.
preface
The reason for this time is that the work involves the design of some B-side form pages, where the required items need to be marked with "*", which was originally a common consensus point, but slowly found that almost all of the pages are required, and began to think that since all of them need to be marked with "*", is the mark still meaningful? So I went to consult some of the information, from the origin of "asterisk (*)" to the current user interface application, summarized the relevant information, and collected this article.
1. What is an "asterisk*"?
An asterisk (asterisk, Latin: asteriscum, meaning "little star", from the Greek ἀστερίσκος) is a printed symbol or glyph. It is called an asterisk because it is similar to the stars in the general impression. Computer scientists and mathematicians often refer to it as "star" or "star."
The asterisk originated in the feudal era of Europe, when genealogical printers wanted to indicate the date of birth symbol. The original shape was six mangs, each of which resembled a teardrop spread out from the center. As a result, some circles in the computer world call it "splat" (a phonological term, similar to the Chinese "pop"), perhaps because many of the early column printers printed asterisks that looked like squashed bugs.
Modern computer operating systems are already compatible with multiple fonts at the same time, so using different input methods, the display of asterisks* is also different.
Second, the use of "asterisk (*)"
1. Marker symbol
- In the expression of the article, some special words, words, and sentences are marked at the back of the sentence, and further explanations are made at the end of the page.
- The presence of speech disorders in the article is marked and explained elsewhere.
- Mark up areas of content that need to be emphasized (such as the form mentioned above).
2. Alternate characters
- In some computer interfaces (Unix shell and Microsoft command prompt characters), "*" is a wildcard character that can represent any kind of character.
- On some platforms with social attributes (forums, in-game conversations, etc.), the "*" is often used in place of the word "harmonious".
- X (multiplication sign) and X (letter) are easily confused in computers, so * is used to refer to the multiplication sign.
3. Sensitive Information
- Some login pages use the "*" to represent the characters entered.
- With personal privacy ID number, mobile phone number, etc., in the scene that needs to be displayed, "*" will be used instead of some characters.
4. Mathematical Codes
- Represents a computation symbol, such as f∗ g is a convolution of f and g.
- The dual space symbol for a mathematical property, such as vector space V, is V*.
5. Programming languages
- In C and C++, an asterisk is used to get the contents of a pointer. It is the inverse of the & operator to get the address of the variable. It is also used to declare pointer variables.
- In the Common Lisp programming language, the names of global variables are conventionally accompanied by an asterisk, *LIKE-THIS*.
Third, the application of interface design
1. To use or not to use?
So let's go back to the previous question, if there are a lot of markup symbols in the same page form design, can it be omitted? The answer is absolutely no. To be clear, the purpose of the marking symbol on the form is to remind the user that this is an important item, and it should be done carefully and carefully (often required).
In addition to using marker symbols, you can also make a separate instruction below the form to inform the user to take the appropriate action (here to distinguish it from the explanatory text of the verification prompt).
Back to the original interpretation of the "marker symbol (*)", the purpose is to remind the user that if the user already knows that the item is important, in some special scenarios, such as the "login page" needs to enter the account password, it is already the consensus of everyone (Jacob's law), can not be specially marked.
It should be noted that the registration page must be marked, and it is necessary to choose which items need to be marked as mandatory according to the actual business situation.
2. How to use it
First of all, to be clear, in the interface design, "*" has both the attributes of the marker and the character attributes itself. Therefore, it is important to note that when using the identifier attribute, "*" is a separate element. Because "*" is often associated with the table question, there will be many designers who directly type a * character in the same text box of the table question, which is actually logically incorrect (although it looks the same).
There is no unified standard for the placement of the marker symbol (*), and after checking the specifications of the big factory, it is found that there is no consistent standard before and after the table title, and it is preferred to be placed in the front in the actual project, because this situation is more and more acceptable to users. If there are other ideas, take care to maintain global unity.
3. Common errors
As mentioned earlier, "*" is a separate element when used as a marker, so in a page the elements should conform to the overall grid specification. If you type a * directly in the table box, then the * will be pasted with the text, and some designers will play two spaces as a spacing to improve the visual effect, which is still a bit sloppy. In Ant Design, the spacing between the "*" and the table title is 4px.
postscript
The basic knowledge about "*" and how to use it in interface design have been introduced above, and small details like this that are taken for granted by everyone are easy to ignore. In the usual practice process, we should pay more attention to these "consensus" content, and after systematic learning and analysis, we should implement it in our own design.
Reference:
- https://zh.wikipedia.org/wiki/%E6%98%9F%E8%99%9F
- https://baike.baidu.com/item/%2A
- https://ant-design.gitee.io/docs/spec/introduce-cn
- https://design.teambition.com/
- https://arco.design/docs/spec/introduce
- https://element.eleme.cn/#/zh-CN/component/installation
- https://design.youzan.com/design/introduce.html
- https://tdesign.tencent.com/design/values
- https://www.lightningdesignsystem.com/
This article was originally published by @YMOOOM everyone is a product manager, and reproduction without permission is prohibited.
The title image is from Unsplash and is based on the CC0 protocol.