网页登录页面设计问题探讨-勤学培训网

网页登录页面设计问题探讨

模糊背景的运用不仅让整个网站显得更加人性化，并且在很大程度上烘托出网站所要表现的氛围。下面是网页登录页面设计问题探讨，希望对您有帮助。

网页登录页面设计问题探讨

一.极致的减法

这是一个异于常规设计思路而得的登录框产物，这不是通常意义上的登录窗。它仅仅保留了用户名的输入，只需按回车便可确定，跳出了登录界面设计中的条条框框，配色方面也足够醒目与简单。

二.引人注目的用户界面

1.模糊背景

最近，模糊背景的运用如雨后春笋般冒了出来，因为模糊背景的运用不仅让整个网站显得更加人性化，并且在很大程度上烘托出网站所要表现的氛围。以下介绍的案例是个迷人的登陆界面，在模糊的背景上面用极简的图标与细线来设计，背景图的色调与按钮的颜色很有心的挑选了同一色系，让界面融洽地结合成一个整体。

2.暗色调背景

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

3.扁平化的纯色背景

我着迷于以下案例中的扁平化设计。基本的样式本该显得单调无聊，但是如果在色彩上精心搭配，扁平化的登录界面将变得活泼俏皮起来。

三.清晰的视觉纵线

人的视觉浏览一般呈“L”型视线，意指从上到下，从左至右。而设计表单界面很注重对用户的引导作用，当一个界面没有过多的强调元素，那么表单的视觉浏览顺序符合“L”型规律就基本符合用户的心理预期。那么，用户就不用过多思考和寻找，能简单高效的执行完表单项的填写和提交。

四.注重用户体验设计

登陆和注册表单的使用率非常高，一个表单的设计其实也不是简单的事情，用户体验是必须要考虑的事情。有的喜欢把注册和登陆都放在一个页面，有的喜欢用AJAX无刷新效果来展示，反正很多花样了，总之，一切以最佳用户体验为出发。设计永无止境!哪怕是一个注册表单，也值得再细心研究。如果不重视用户体验，就会致使网站流失大量用户。

1.减少用户输入

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

用户在注册时被要求填写邮箱地址两次或重复输入密码是非常麻烦的，特别是在手机上。其实用户一般都会使用自己的常用邮箱和密码注册，所以不那么容易忘记。采用输入一次密码完成注册更符合人们的期望，但是为了防止密码输入和用户的预期密码不同，可以采用允许用户查看明文密码的方式。假设哪天用户忘记密码了可以通过邮箱找回，再多此一举填写两次反而更加容易导致用户流失。

2.信息化注册提示

为终端用户提供有效的信息提示是用户体验设计中的最好方式，尤其是在用户注册填写信息具有多个输入域，而在需要填写的字段互相可能产生歧义的时候，这些消息提示可以减少用户的思考和猜测时间。提示信息的展现形式有多种，可以在页面的顶部闪烁小便签，或是让隐藏起来的消息跳出气泡框。

设计表现赋予注册表单以特质，而界面设计正是用户所感受到的体验。更多的提示可以防止用户因为输入错误而需要进行再次输入。

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

用户在登录或注册时是否验证?我觉得如果安全性没有大问题的话尽量不采取。可以在用户输入错误一定次数时才会出现验证码。 (不是一开始就有验证码，也不是用户输入错误多了就禁止登录)。但好像你的技术搭档绝大部分时候都会告诉你“安全性”有大问题，所以很多时候我们不能“为了细节的良好体验而纵容了系统的安全受挫”…

4.错误密码输入记忆

当用户第一次输入一个错误的密码时，系统在判断错误后同时把用户输入的错误密码保存记忆，当用户再次输入这个错误密码时，系统会自动在客户端提示“密码错误”。这样做减少了用户的一次误操作同时也减少了一次提交给服务器端的任务。因为：密码的输入显示是*并非能直接看到你确切的输入结果，有很多时候的确是用户记错或输错了。

AnyForWeb在为客户建立更具吸引力的Web表单时，我们总是在不断的问自己：我有填写表单的耐心吗?有什么可以让表单对用户来说更轻松呢?这些问题并不会总能找到完美的答案，但如果不断的思考这些问题，站在用户的角度上体验我们的设计，那么我们相信至少方向是对的。总之，登录注册就是“一扇门”，一扇让产品和用户真正互通的门，让产品可以给用户体现出更多价值的门。

浅谈WEB登录页面设计

用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验，安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现

iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图

在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力。

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

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

网页登录页面设计问题探讨

人文关怀的品牌传达

设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框

越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单

WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受，好了，今天就先侃到这，作为用户使用的入口，希望这篇小文可以让大家对登录页面重视起来，设计出更多精彩的登录页面。

WEB登录方式是什么意思

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

Web是一种超文本信息系统，Web的一个主要的概念就是超文本连接，它使得文本不再象一本书一样是固定的线性的。而是可以从一个位置跳到另外的位置。你可以从中获取更多的信息。可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性我们才把它称为Web。

Web的特点：

一、Web是图形化的和易于导航的(navigate) Web 非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。同时，Web是非常易于导航的，只需要从一个连接跳到另一个连接，就可以在各页各站点之间进行浏览了。

二、Web与平台无关无论你的系统平台是什么，你都可以通过Internet访问WWW。浏览WWW对你的系统平台没有什么限制。无论从Windows平台、UNIX平台、Macintosh还是别的什么平台我们都可以访问WWW。对WWW的访问是通过一种叫做浏览器(browser)的软件实现的。如Netscape 的Navigator、NCSA的Mosaic、Microsoft的Explorer等。

三、Web是分布式的大量的图形、音频和视频信息会占用相当大的磁盘空间，我们甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起，信息可以放在不同的站点上。只需要在浏览器中指明这个站点就可以了。使在物理上并不一定在一个站点的信息在逻辑上一体化，从用户来看这些信息是一体的。 Web 是动态的最后，由于各Web站点的信息包含站点本身的信息，信息的提供者可以经常对站上的信息进行更新。如某个协议的发展状况，公司的广告等等。一般各信息站点都尽量保证信息的时间性。所以Web站点上的信息是动态的。经常更新的。这一点是由信息的提供者保证的。 Web动态的特性还表现在Web是交互的。 Web的交互性首先表现在它的超连接上，用户的浏览顺序和所到站点完全由他自己决定。另外通过FORM的形式可以从服务器方获得动态的信息。用户通过填写FORM可以向服务器提交请求，服务器可以根据用户的请求返回相应信息。四、web是一个行业，属于it行业的一种。英文中，web 和 net 不是一个意思。net是网络的意思，不过，它指的是具体的网络的意思，而web是“网络”这种事物，而不是具体的网。

如何测试网页的登录页面

问题：有一个登陆页面，上面有2个textbox, 一个提交按钮。请针对这个页面设计30个以上的test case.

此题的考察目的：面试者是否熟悉各种测试方法，是否有丰富的Web测试经验，是否了解Web开发，以及设计Test case的能力

这个题目还是相当有难度的，一般的人很难把这个题目回答好。

功能测试(Function test)

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

2.输入错误的用户名或者密码, 验证登录会失败，并且提示相应的错误信息。

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

4.用户名和密码，如果太短或者太长，应该怎么处理

5.用户名和密码，中有特殊字符，和其他非英文的情况

6.记住用户名的功能

7.登陆失败后，不能记录密码的功能