浅谈登录页面的设计

模糊背景的应用不仅使整个网站更加人性化，也在很大程度上烘托了网站想要表现的氛围。下面是对web登陆页面设计的探讨。希望对你有帮助。

1.极端减法

这是一款不同于常规设计思路的登录框产品，并不是通常意义上的登录窗口。它只保留了用户名的输入，按回车键即可确定，跳出了登录界面设计中的条条框框，配色也足够醒目简洁。

二。吸引人的用户界面

1.模糊背景

最近模糊背景的使用如雨后春笋，因为模糊背景的使用不仅让整个网站更加人性化，也在很大程度上烘托了网站想要表现的氛围。下面的案例是一个迷人的登录界面，在模糊的背景上用最小的图标和细线设计。背景图的颜色和按钮的颜色都是在同一个色系中精心挑选的，让界面和谐地融为一体。

2.深色背景

当我们第一次看到下面的案例时，明亮的输入框吸引了所有的注意力。深色的背景图片使得登录表单成为页面的视觉中心，没有任何东西可以分散用户的注意力。这不仅是优质的感官体验，更是舒适的用户体验。

3.平面纯色背景

以下案例中的扁平化设计让我着迷。基本的风格应该是枯燥的，但如果仔细搭配颜色，扁平的登录界面会变得活泼俏皮。

三。清晰的视觉垂直线

人的视觉浏览一般是“L”型视线，意思是从上到下，从左到右。而表单界面的设计非常注重用户的引导作用。当一个界面没有过多强调的元素时，表单的视觉浏览顺序符合L型规律，基本符合用户的心理预期。然后，用户可以简单高效地完成表单项的填写和提交，而无需过多的思考和搜索。

4.关注用户体验设计

登录和注册表单的使用率非常高，一个表单的设计其实并不是一件简单的事情。用户体验是必须要考虑的。有的喜欢把注册和登录放在一个页面上，有的喜欢用AJAX显示，没有刷新效果。反正有很多招数。简而言之，一切以最佳用户体验为前提。设计永无止境！即使是报名表，也值得仔细研究。如果不注重用户体验，会造成网站大量用户流失。

1.减少用户输入

一般来说，注册表中每增加一个字段，注册率就会相应降低。

用户注册时两次填写邮箱地址或者重复输入密码，非常麻烦，尤其是在手机上。其实用户一般都是用自己常用的邮箱和密码注册的，所以不那么容易忘记。一次输入密码完成注册更符合人们的预期，但为了防止输入的密码与用户预期的密码不同，可以允许用户查看明文密码。假设有一天用户忘记了密码，可以通过邮箱找回。两次填写更容易导致用户流失。

2.信息注册提示

为最终用户提供有效的信息提示是用户体验设计中最好的方式，尤其是当用户的注册信息有多个输入字段，并且要填写的字段可能相互有歧义时，这些信息提示可以减少用户的思考和猜测时间。信息呈现的形式有很多种，比如在页面顶部闪现一条注释，或者让隐藏的消息跳出气泡框。

设计表现赋予注册表单特色，界面设计是用户感受到的体验。更多的提示可以避免用户因为输入错误而不得不重新输入。

3.减少用户的强制操作。

用户登录或注册时是否经过身份验证？我觉得如果安全没有大问题的话，尽量不要坐。只有当用户犯了一定数量的错误时，验证码才会出现。(并不是一开始就有验证码，也不是用户输入错误太多就禁止登录)。但似乎你的技术伙伴大部分时候都会告诉你“安全性”有很大问题，所以很多时候我们不能“为了细节的良好体验而放纵系统的安全挫败感”…

4.不正确的密码输入记忆

当用户第一次输入错误密码时，系统判断错误后会保存用户输入的错误密码。当用户再次输入这个错误的密码时，系统会在客户端自动提示“密码错误”。这减少了用户的一个错误操作和提交给服务器的一个任务。因为：密码输入显示是*，所以不能直接看到你的确切输入结果。在很多情况下，用户确实记错了或者输入错了。

AnyForWeb总是问自己：当我们为客户构建更有吸引力的Web表单时，我有耐心填写表单吗？什么能让用户更容易使用表单？我们不可能总是找到这些问题的完美答案，但如果我们不断思考这些问题，从用户的角度去体验我们的设计，那么我们相信至少方向是对的。简而言之，登录注册就是“一扇门”，一扇让产品和用户真正沟通的门，让产品向用户展现更多价值。

浅谈网页登录页面设计

用户活跃度是检验一个产品成功与否的重要指标之一。传统行业的商家非常重视门面的装修，因为好的门面可以聚集人气，吸引更多的顾客。在古代，大宅院门口摆放的石狮子或其他摆件极为精美，有一定的风水理论，能更好地显示主人家的地位。由此可见，“门面”对于人的形象就像人脸一样重要，WEB的登录页面就是相当传统的“门面”。

现在越来越多的大型网站将登录页面和首页一起设计，可见登录页面的重要性。一个辉煌的登录界面会提高产品的质量，赋予产品独特的气质。登录界面也是兵家充分发挥情感设计，提升用户体验，拉近与用户距离的必争之地。本文将在不谈趋势、交互原理或技术的情况下，谈谈用户登录页面的一些设计表现形式。希望这些设计表达能给你一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品，tumblr就是介于博客和twitter之间的服务。与twitter相比，它的功能更复杂，内容展示更强，更强调多媒体应用。Tumblr作为轻博客的鼻祖，带来了全新的视觉体验。安东尼德圣埃克苏佩里曾经说过，“完美意味着多即是多，少即是少。”Tumblr的登录页面优雅大方，没有过多的视觉干扰。所有的元素都是为了用户更好的登录而存在的，登录过程非常流畅。

精致的纹理表达

ICloud是苹果公司提供的云同步服务。用户有5GB的空闲存储空间。“乔布斯会逐个像素地检查屏幕上的每个细节，以确保相关图像准确对齐，”负责Macintosh用户界面设计的Cordell Ritzlaf回忆道。他非常重视细节，细节的层次其实达到了像素的层次。如果发现问题，乔布斯会立刻对一个工程师大喊大叫。“iCloud登录页面的设计继承了苹果对细节的苛求，细致的纹理，细微的阴影，精致的纹理，完美的细节。金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率自适应，改变排列，保证用户的浏览体验。

ICloud给我们上了很好的一课。有一句话，大家都听说过但不一定会去做。——细节决定成败。丰富的细节可以提升一个设计的价值，也是判断一个设计高低的重要标准之一。精致舒适的质感给用户带来身临其境的惊喜登录体验，是一种很棒的表现方式。

小清新插图

在网页设计中，插图是非常具有表现力的，而且它们与绘画艺术密切相关。所以大部分设计岗位都特别受到手绘能力突出的人的青睐，很多表现手法都是以绘画艺术的表现手法为基础的，插画艺术与网页设计的结合具有独特的艺术魅力，使其更具表现力。越来越多的设计师将插图应用到网页设计中。生动、有趣、温馨的清新插画能迅速抓住用户的眼球，使登录界面更加友好。

63号邮箱的登录页面使用大插画，小邮差迅速唤醒等待80后来信的记忆。有故事的插画与用户建立情感联系，引起他们的精神共鸣，让他们更有归属感。

Vimeo是一个提供高清文章存储服务的网站，在这里你可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传播

以人为本的设计不仅可以提高产品的质量，还可以提高设计的艺术水平，而登陆页是体现人文关怀、传播品牌理念的绝佳场所。

每次刷新QQ登录页面，都能看到不同的内容，或者用海子的诗，或者迈克尔杰克逊的歌词，引起用户的共鸣。设计手法简洁，主要信息突出，导向明确，没有多余的元素。界面中最重要的操作“登录”按钮，使用了流量中盛行的绿色，而不是常用的蓝色。细节非常优雅，每个细节都注入了人文关怀。

新浪微博把登录框设计成了围巾。用户的每一次登录都是一次品牌传播的过程，这与新浪推广的围巾品牌理念是一脉相承的。织围巾的观念深入人心。

越来越大的登录框

越来越大的输入框设计让用户在输入时感觉很舒服，登录过程非常愉快。今天有了更大的显示屏，mailchimp的大输入框充满了霸气，可以看出它的密码一反常态。第一次在WEB登录框看到这样的设计，感觉很甜。正是这种不拘一格的设计，让mailchimp从一个内部项目转变为公司最成功的商业产品。

简单却不简单。

网页设计的风格越来越趋于简洁，登录页面大量的留白可以让登录框更加突出。尽量减少用户分心。从视觉上看，简约的设计是沉稳的，砍掉了多余的元素、色彩、造型、质感。不能用让人眼前一亮的设计元素，只能靠留白来制造视觉感染力。如果布局平衡和简化设计不到位，很容易变得单调。wordpress后台登陆页面采用了适当的投影，巧妙的运用了灰色，以及针对错误的抖动提示，使得整个登陆页面简洁而不简单。堪称典范。

随着互联网的快速发展和移动互联网的到来，网页设计变得越来越多样化。好的设计虽然代表了一个产品，一定会成功，但是它可以为产品加分，为产品注入设计DNA，创造出独特的风格和视觉感受。好了，今天就讲到这里，作为用户的一个入口。希望这篇小文章能让大家关注登陆页，设计出更多精彩的登陆页。

WEB登录是什么意思？

WEB登录说白了就是用网页登录。下面简单介绍一下web的含义，有助于更好的理解web。

Web是一个超文本信息系统。Web的一个主要概念是超文本连接，它使文本不再像书本一样是固定的、线性的。但是可以从一个位置跳到另一个位置。你可以从中获得更多的信息。我们可以转到其他话题。如果你想知道某个主题的内容，只要点击它，就可以跳转到包含它的文档。正是这种多重连接，我们称之为网络。

网络的特征：

一、 Web Web是图形化的，易于导航。Web非常受欢迎的最重要原因之一是它能够在一个页面上同时显示丰富多彩的图形和文本。在Web出现之前，互联网上的信息只是以文本的形式存在。Web可以提供集成图形、音频和文章信息的功能。同时，网络很容易导航。你只需要从一个连接跳到另一个连接，就可以在页面和站点之间浏览。

二、Web与平台无关。不管你的系统平台是什么，都可以通过互联网访问WWW。浏览WWW时对你的系统平台没有限制。我们可以从Windows平台、UNIX平台、Macintosh平台或任何其他平台访问WWW。对万维网的访问是通过一种叫做浏览器的软件来实现的。如网景的Navigator、NCSA的Mosaic、微软的Explorer等。

三、Web是分布式的，大量的图文音文章信息会占用相当大的磁盘空间，我们甚至无法预测信息量。对于Web来说，没有必要把所有的信息放在一起，但是信息可以放在不同的站点上。只需在浏览器中指明该站点即可。把物理上不一定在一个站点的信息做逻辑上的整合，从用户的角度来看，这些信息是整合的。网络是动态的。最后，因为每个网站的信息都包含网站本身的信息，所以信息提供者可以经常更新网站上的信息。比如一个协议的制定，公司的广告等等。一般信息网站都尽量保证信息的时效性。所以网站上的信息是动态的。经常更新。这是由信息提供商保证的。Web的动态特性也表现在Web的交互上。网页的交互性首先表现在它的超链接上，用户的浏览顺序和访问的站点完全由自己决定。此外，还可以通过表单从服务器端获取动态信息。用户可以通过填写表单向服务器提交请求，服务器可以根据用户的请求返回相应的信息。四、web是一个行业，属于it行业。在英语中，web和net是不同的意思。Net的意思是网络，但是，它指的是具体的网络，web是“网络”这种东西，不是具体的网络。

如何测试一个网页的登陆页

问题：有一个带有2个文本框和提交按钮的登录页面。请为这个页面设计30多个测试用例。

这个问题的目的是面试者是否熟悉各种测试方法，有丰富的Web测试经验，了解Web开发，有设计测试用例的能力。

这个题目挺难的，一般人很难答好。

功能测试(功能测试)

1.输入正确的用户名和密码，点击提交按钮，验证是否可以正确登录。

2.输入错误的用户名或密码，验证登录将失败，并提示相应的错误消息。

3.成功登录后能跳转到正确的页面吗？

4.用户名和密码太短或太长该怎么办？

5.包含特殊字符的用户名和密码，以及其他非英语的情况。

6.记住用户名的功能

7.登录失败后，无法记录密码。

8.用户名和密码前后空格的处理

9.密码是否显示有星号？

测试界面(UI测试)

1.布局是否合理，两个测试框和一个按钮是否对齐。

2.2.testbox和button的长度和高度是否符合要求？

性能测试(性能测试)

1.打开登录页面需要几秒钟时间。

2.输入正确的用户名和密码后，登录成功跳转到一个新页面，耗时不超过5秒。

安全测试(安全测试)

1.成功登录后生成的Cookie是否为httponly(否则容易被脚本窃取)

2.用户名和密码是否通过加密发送到Web服务器？

3.用户名和密码的验证应该在服务器端完成，而不仅仅是在客户端使用javascript。

4.用户名和密码输入框应屏蔽SQL注入攻击。

5.用户名和密码的输入框应禁止输入脚本(防止XSS攻击)

6.限制错误登录的次数(防止暴力破解)

可用性测试(可用性测试)

1.是否可以用键盘操作，是否有快捷键。

2.输入用户名和密码，然后按Enter键。你能登录吗？

兼容性测试(兼容性测试)

1.是否能在主流浏览器下正常显示一直正常运行(即6，7，8，9，Firefox，Chrome，Safari等。)

2.不同平台能正常工作吗，比如Windows和Mac？

3.在移动设备上能正常工作吗，比如Iphone，Andriod？

4.不同的分辨率

软件的可访问性测试

软件辅助功能测试是指测试软件是否为残障用户提供足够的辅助功能。

高对比度下显示能正常吗(视力不好的人用)