常上网的我们,有时候会为了图个方便,在登录网站的时候,输入完用户名和密码随手点击记录密码,然后就登录了,这样的好处就是下次打开网站,不用输密码就直接登录了,既方便又快捷。
小宋就是个比较懒的人,有时候注册个网站,然后登录时就直接记录密码,久而久之形成了这个习惯,也不那么在意网站的用户名和密码了,但是今天去登录一个网站的时候,需要第二次输入密码确认,这一下懵圈了,因为是浏览器记录密码的,第一次就直接登录进入了,而这让确认密码时,因为长时间不用密码给忘记了,然后返回第一次登录界面想要看密码时,却发现密码都是被***号代替了,好尴尬。
怎么办呢?求助万能的度娘吧,于是就有了这篇文章,独乐乐不如众乐乐,有好东西一定要学会分享,话不多说,开始动手。
首先打开需要登录的网站(一定是要记录密码的网站)如下图
这时候我们选择*号,然后点击右键,选择审查元素。这时我们会看到下图
注意上图红框选中的位置,这时候我们只需要将<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小时内与您取得联系。