天天看點

表單設計中“星号(*)”的使用分析

作者:人人都是産品經理
編輯導語:在涉及到一些表單頁面的設計時,必填項目常常需要用“*”來進行特殊标記。本篇文章作者從十分常見的星号(*)出發,從“星号(*)”起源到現在的使用者界面應用,将相關資訊彙總歸納,一起來看。
表單設計中“星号(*)”的使用分析

前言

這次的起因是在工作涉及到一些B端表單頁的設計,其中必填項目需要用“*”來進行特殊标記,這本來是大家常見共識的點,但慢慢發現,有的頁面中幾乎全部都是必填項,就開始思考既然全都需要用“*”标記,那标記還有意義嗎?于是就去查閱了部分資料,從“星号(*)”起源到現在的使用者界面應用,将相關資訊彙總歸納,集合這一篇。

一、“星号*”是什麼?

星号(英文:asterisk,拉丁文:asteriscum,意謂“小星星”,來自希臘文 ἀστερίσκος)是印刷符号或字形。之是以稱為星号是因為與一般人印象中的星星相似。計算機科學家與數學家常稱之為“star”或“星”。

星号起源于歐洲封建時代,族譜印制者要表示出生日期的符号。最初的形狀是六芒,每一芒都像是由中央散開的淚珠。是以,有些電腦界的圈子稱之為“splat”(狀聲詞,類似中文的“啪”),或許是因為許多早期的列式列印機印出來的星号看起來像是被壓扁的蟲子。

現代的計算機操作體統已經可以同時相容多種字型,是以使用不同的輸入法,所展示出的星号*也各不相同。

表單設計中“星号(*)”的使用分析

二、“星号(*)”的使用場景

1. 标記符号

  • 在文章表達中,會對一些特殊的字、詞、句後部進行标示,并在頁尾處進行進一步解釋。
  • 對于文章中存在語病進行标記,并在其他地方進行解釋說明。
  • 對于一些需要強調的内容區進行标記(如上文提到的表單)。
表單設計中“星号(*)”的使用分析

2. 替代字元

  • 在某些電腦界面中(Unix shell及微軟的指令提示字元),“*”是通配符,可以代表任何一種字元。
  • 在某些具有社交屬性的平台上(論壇、遊戲内對話等),“*”常被用來替代被“和諧”的字眼。
  • 在電腦中x(乘号)和X(字母)容易混淆,是以會用*來指代乘号。
表單設計中“星号(*)”的使用分析

3. 敏感資訊

  • 部分登入頁的輸入密碼會用“*”代表已輸入的字元。
  • 具有個人隐私身份證号、手機号等,在需要展示的場景中會用“*”代替部分字元。
表單設計中“星号(*)”的使用分析

4. 數學符号

  • 代表計算符号,如比如 f ∗ g 是 f 與 g 的卷積。
  • 代表某種數學屬性,如向量空間 V 的對偶空間符号為 V*。

5. 程式設計語言

  • 在C語言與C++中,星号被用來獲得指針的内容。它是得到變量位址的 & 算子的逆運算。它還被用來聲明指針變量。
  • 在 Common Lisp 程式設計語言,全局變量的名字按慣例陪襯上星号,*LIKE-THIS*。

三、界面設計的應用

1. 用還是不用?

那我們回到之前的那個問題,同一頁内表單設計中如果存在大量标記符号,是否可以省略呢?答案是絕對不可以。要明确的一點是,表單上标記符号的目的是提醒使用者注意這裡是一個重要項,要謹慎仔細的進行操作(常見為必填項)。

表單設計中“星号(*)”的使用分析

那除了使用标記符号外, 也可以在表單下方進行單獨說明告知使用者進行相應操作(此處要和驗證提示的說明文字區分開)。

表單設計中“星号(*)”的使用分析

回到一開始對于“标記符号(*)”的解釋,目的是為了提醒使用者注意,如果使用者已經知道該項為重要項,在某些特殊場景,例如“登入頁”都需要輸入賬号密碼,已經是大家的共識(雅各布定律)的情況下,可以不進行特殊标示。

表單設計中“星号(*)”的使用分析

需要注意的是注冊頁是必須要進行标示的,需要根據實際業務情況選擇需要将哪些标示為必填項。

2. 怎麼用

首先要明确一點,在界面設計中,“*”既有标示符号的屬性,其本身具有字元屬性。是以需要注意在使用标示符屬性時,“*”是一個獨立的元素。因為“*”經常和表題一起,就會有很多設計師直接在表題同一個文本框内打出一個*字元,這其實在邏輯上是不對的(盡管看起來一樣)。

表單設計中“星号(*)”的使用分析

标記符号(*)的放置位置并沒有一個統一的标準,在查閱大廠規範後發現放在表題前、表題後并沒有一緻的标準,在實際項目中優先選擇放在前面,因為這種情況更多,使用者更容易接受。如果有其他的想法,注意保持全局統一。

表單設計中“星号(*)”的使用分析

3. 常見錯誤

前面說過“*”在作為标示符号時,是一個獨立的元素,那麼在一個頁面中元素之間應該符合整體的栅格規範。如果直在表題框内打一個*,那麼*就會和文字貼在一起,有的設計師會打兩個空格作為間距來改善視覺效果,這種做法仍然有些草率。在Ant Design中“*”和表題之間間距為4px。

表單設計中“星号(*)”的使用分析

後記

在上文介紹了關于“*”的基本知識和界面設計中的使用方式,像是這種被大家習以為常的小細節,很容易被忽略。在平時的實踐過程中,應該多注意這些“共識性“的内容,并在系統學習分析後,再落實在自己的設計之中。

資料參考:

  • 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/

本文由 @YMOOOM 原創釋出于人人都是産品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協定。