常上網的我們,有時候會為了圖個方便,在登錄網站的時候,輸入完用戶名和密碼隨手點擊記錄密碼,然后就登錄了,這樣的好處就是下次打開網站,不用輸密碼就直接登錄了,既方便又快捷。
小宋就是個比較懶的人,有時候注冊個網站,然后登錄時就直接記錄密碼,久而久之形成了這個習慣,也不那么在意網站的用戶名和密碼了,但是今天去登錄一個網站的時候,需要第二次輸入密碼確認,這一下懵圈了,因為是瀏覽器記錄密碼的,第一次就直接登錄進入了,而這讓確認密碼時,因為長時間不用密碼給忘記了,然后返回第一次登錄界面想要看密碼時,卻發現密碼都是被***號代替了,好尷尬。
怎么辦呢?求助萬能的度娘吧,于是就有了這篇文章,獨樂樂不如眾樂樂,有好東西一定要學會分享,話不多說,開始動手。
首先打開需要登錄的網站(一定是要記錄密碼的網站)如下圖
這時候我們選擇*號,然后點擊右鍵,選擇審查元素。這時我們會看到下圖
注意上圖紅框選中的位置,這時候我們只需要將<input type="password" name="t1" placeholder="請輸入密碼" class="am-form-field am-radius n-valid" aria-required="true">這段代碼里的password改為text,然后你會驚奇的發現,星號隱藏的內容可以看到是什么了。
據文章介紹這個原理其實就是:當文本元素的type="password"的時候,各瀏覽器識別到以后就會用星號、點號等使密碼隱藏。各瀏覽器都會遵循這一協議進行html元素解析,然后渲染顯示在頁面。如果識別到的type不為password的其他值,就不會用星號、點號隱藏覆蓋密碼。
你學會了么?收藏保存起來,以備不時之需。
PS:其實記錄密碼的危險還是挺大的,建議各位在登錄網站時,盡量選擇不記住密碼登錄,這樣一旦電腦被控制,也不會造成密碼泄露。
絡用的多了,各種注冊、賬號、密碼也多了,管都管不過來,還好現在大多數瀏覽器都有各種類似帳號管家的功能,只要注冊登陸瀏覽器然后各種網站的賬號密碼只要登陸一次讓它記住就行了,全權委托給瀏覽器管理了,可有時確實需要這密碼,比如要手機上登陸什么的就抓了瞎,各種“找回密碼”、“忘記密碼”一通折騰費時又費力。
在來介紹一個簡單實用小技巧,無需任何工具軟件,利用HTML語言規則僅僅幾步就能讓你看到自己以前設定的密碼:
1、要讓這個密碼星號正常顯示出來,在密碼星號的輸入框中鼠標右擊,選擇最下面的“審查元素”。
2、此時會在瀏覽器的右側跳出網頁的HTML源代碼并以藍色選中,你不必要懂HTML,只要找到“type=password"就行。
3、將“password"改為"text",然后回車,這時就會發現原來顯示星號密碼的部分已經成功顯示當初設定的密碼了,經測試了幾個市面常用的瀏覽器均行的通,如果有不能正常顯示的請留言。
還請用于正當用途。
輯導語:在涉及到一些表單頁面的設計時,必填項目常常需要用“*”來進行特殊標記。本篇文章作者從十分常見的星號(*)出發,從“星號(*)”起源到現在的用戶界面應用,將相關信息匯總歸納,一起來看。
這次的起因是在工作涉及到一些B端表單頁的設計,其中必填項目需要用“*”來進行特殊標記,這本來是大家常見共識的點,但慢慢發現,有的頁面中幾乎全部都是必填項,就開始思考既然全都需要用“*”標記,那標記還有意義嗎?于是就去查閱了部分資料,從“星號(*)”起源到現在的用戶界面應用,將相關信息匯總歸納,集合這一篇。
星號(英文:asterisk,拉丁文:asteriscum,意謂“小星星”,來自希臘文 ?στερ?σκο?)是印刷符號或字形。之所以稱為星號是因為與一般人印象中的星星相似。計算機科學家與數學家常稱之為“star”或“星”。
星號起源于歐洲封建時代,族譜印制者要表示出生日期的符號。最初的形狀是六芒,每一芒都像是由中央散開的淚珠。因此,有些電腦界的圈子稱之為“splat”(狀聲詞,類似中文的“啪”),或許是因為許多早期的列式打印機印出來的星號看起來像是被壓扁的蟲子。
現代的計算機操作體統已經可以同時兼容多種字體,因此使用不同的輸入法,所展示出的星號*也各不相同。
那我們回到之前的那個問題,同一頁內表單設計中如果存在大量標記符號,是否可以省略呢?答案是絕對不可以。要明確的一點是,表單上標記符號的目的是提醒用戶注意這里是一個重要項,要謹慎仔細的進行操作(常見為必填項)。
那除了使用標記符號外, 也可以在表單下方進行單獨說明告知用戶進行相應操作(此處要和驗證提示的說明文字區分開)。
回到一開始對于“標記符號(*)”的解釋,目的是為了提醒用戶注意,如果用戶已經知道該項為重要項,在某些特殊場景,例如“登錄頁”都需要輸入賬號密碼,已經是大家的共識(雅各布定律)的情況下,可以不進行特殊標示。
需要注意的是注冊頁是必須要進行標示的,需要根據實際業務情況選擇需要將哪些標示為必填項。
首先要明確一點,在界面設計中,“*”既有標示符號的屬性,其本身具有字符屬性。因此需要注意在使用標示符屬性時,“*”是一個獨立的元素。因為“*”經常和表題一起,就會有很多設計師直接在表題同一個文本框內打出一個*字符,這其實在邏輯上是不對的(盡管看起來一樣)。
標記符號(*)的放置位置并沒有一個統一的標準,在查閱大廠規范后發現放在表題前、表題后并沒有一致的標準,在實際項目中優先選擇放在前面,因為這種情況更多,用戶更容易接受。如果有其他的想法,注意保持全局統一。
前面說過“*”在作為標示符號時,是一個獨立的元素,那么在一個頁面中元素之間應該符合整體的柵格規范。如果直在表題框內打一個*,那么*就會和文字貼在一起,有的設計師會打兩個空格作為間距來改善視覺效果,這種做法仍然有些草率。在Ant Design中“*”和表題之間間距為4px。
在上文介紹了關于“*”的基本知識和界面設計中的使用方式,像是這種被大家習以為常的小細節,很容易被忽略。在平時的實踐過程中,應該多注意這些“共識性“的內容,并在系統學習分析后,再落實在自己的設計之中。
資料參考:
本文由 @YMOOOM 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自Unsplash,基于 CC0 協議。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。