精华内容
下载资源
问答
  • HTML登录页面设计

    千次阅读 2020-02-27 09:46:53
    HTML登录页面设计 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style type="text/css"> *{margin: 0;p....

    HTML登录页面设计

    编写用户登录页面,效果如下所示:
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录界面</title>
        <style type="text/css">
            *{margin: 0;padding: 0}
            html,body{height: 100%}
    
            .outer-wrap{
                height: 100%;
                position: relative;
                background-color: rgba(232, 255, 250, 0.5);
            }
            .login-panel{
                width: 400px;
                height: 255px;
                background-color: #fffbd4;
                position: absolute;
                top: 364px;
                left: 866px;
                margin-top: -150px;
                margin-left: -260px;
            }
        </style>
    </head>
    <body>
    <div class="outer-wrap">
        <div class="login-panel"><form>
            <fieldset>
                <legend>登录页面</legend>
                <center>
    
                    <label>用户名<input type="text" placeholder="用户名"/></label>
                    <br />
                    <br />
                    <label>密码<input type="password" placeholder="密码" /></label>
                    <!--&nbsp;输出空格-->
                    <br />
                    <br />
                    <label>类型<input type="radio"  name="lx"/>管理员</label>
    
                    <input type="radio"  name="lx"/>普通用户
                    <br />
                    <br />
                    <input type="checkbox" />记住密码
                    &nbsp;
                    <input type="checkbox" />自动登录
                    <br />
                    <br />
                    <input type="submit" value="提交"  />
                    &nbsp;
                    &nbsp;
                    <input type="reset" value="重置" />
                    <br />
                    <br />
                    <br />
                </center>
            </fieldset>
        </form>
        </div>
    </div>
    </body>
    </html>
    
    展开全文
  • 登录页面设计代表着用户对产品的第一印象,如果这个页面做的不好,那么很容易就会让别人对我们的产品印象不好。登录页面设计应该清楚的传达产品调性,同时在视觉上帮助用户完成登录这样的一个任务。登录页应该有醒目...

    f44983bd87517e943e9eaf03efee2e8c.png

    登录页面设计代表着用户对产品的第一印象,如果这个页面做的不好,那么很容易就会让别人对我们的产品印象不好。登录页面设计应该清楚的传达产品调性,同时在视觉上帮助用户完成登录这样的一个任务。

    登录页应该有醒目的标识,经常把企业形象与产品或服务相结合,提高用户关注度,避免用户注意力漂移,今天我们就来盘点一下目前市面上的产品里都做得挺不错的登录页吧!!!

    背景类

    看多了大多数的单调且简洁的登录页,有着炫酷且多变的动态背景的登录页是不是会让人眼前一亮,并且看的停不下来,先来说说几个背景特别的APP吧!

    1、虾米音乐

    虾米音乐的登录页面最大的亮点在于他们的背景动图背景都很好的点明了产品的核心,产品的形象鲜活了起来,如下图所示:

    f83b31e87a7fc5929986354c5f8d478c.png

    这个我们在参考的时候可能需要考虑一下公司的产品特点,以及时间和成本的投入是否是公司能够承担的(这个是很现实的问题)。其次马蜂窝还有一个小交互细节,值得注意一下,当用户开始输入账号的时候,背景的动图就会变成高斯模糊,减少用户在输入时所受到的干扰,这虽然是一个小细节,但是在我们平时设计的时候是一定要考虑到的小细节。

    2、毒&映客

    如果第一种实现起来有些难度,也可以转换一种难度系数不是很高的形式,如下图所示:

    939cdd2b24748b4ac9d4c63251376267.png

    6691f3cd32382a100a98a69900a64aff.png

    毒和映客这两款APP ,他们的登录页面背景使用照片做成的背景墙动图,会自动上滑,略微的图片集锦上移也很酷,同时符合这两款产品针对年轻人使用的调性。但是一般来说大背景的登录页面对图片以及视频的要求会很高,如果是做练习或者飞机稿并不是很建议大家选择图片背景(因为符合产品定位的图片是真的很难找),如果大家依然想要大背景,可以继续看下面两种。

    3、Lofter

    Lofter的登录注册入口与引导页相结合,用户在登录的时候能够看到更多的产品信息,这种设计在是市面是比较少见的,如下图所示:

    0239c7e9b7c2b3baa408d1a12bb1eaf9.png

    这种比较适合想要做大背景的登录页面,但是没有找到适合产品图片的设计师来选择。它的优点是能够介绍更多的产品信息,但是缺点也很明显,因为登录页是个用户目的性很强的功能操作页面,因此很有可能就会被忽略过去。

    4、快手电丸&FACEU

    a524007c5bc816d22bb04694bde2e483.png

    这两种APP是将手机和第三方登录都做成按钮,同时搭配产品形象插画,这么做的好处是可以将产品的想象更加突出,但是从操作上来说,如果用户是手机登录,还需要进入二级页面,但背景的设计可以参考,容易出效果,同时又能快速符合产品调性。对于大背景设计的难度系数最低,新手设计师推荐优先尝试。

    顶部图片

    1、最右&bilibili&快手漫画

    94a6c5b77a7828bcec027f33b60e1514.png

    b9c17b0d1cf7c07d3bc6ee2794915d42.png

    fc22c373164441a15a1e6efbb87c08ee.png

    上图中的三个产品都是产品有卡通形象的产品,同时还很有识别度,因此将有他们放在登录界面顶部,有助于产品形象的深入化,同时当用户在输入密码的时候,卡通形象还会转变成蒙上自己的眼睛或者别的动作,既有趣味性又给用户安全感。以上三个都是不同类型的产品,但是采用了同一种登录方式,但他们都有相对年轻化的用户群体,以及卡通形象的产品,因此使用这种能够更好的固定产品形象。

    2、36氪&松果

    36氪的头部小背景让整个登录页面不会显得太平,视觉上也不会太过单一,我们可以来做个对比,如下图所示:

    cefbfacb26307846da1b3488ffcb1655.png

    7e142536c876c25d810e22fcd0c1c549.png

    上面两种图中有背景和没有背景的登录页,我们能够很明显的发现没有背景的从视觉上显得很单一,并且没有了识别度。想要做比较简约但是又有点特别的登录页可以参考这类的头图,会让你的登录页不那么单调还有识别度。

    弹窗登录

    叨叨记账&波洞

    439f144f1875c94ee35fdf5eacb32014.png

    叨叨笔记使用的是一种类似弹窗同时带有tab切换的登录形式,但是只适合只有一种第三方的登录形式,如果数量一多,就要改变形式或者去掉tab,但是这种表现形式也是挺特别的。作为腾讯旗下的波洞,设计风格很鲜明,登录直接使用的弹窗形式,应该考虑到大多数用户都喜欢直接用第三方登录会比较方便,同时也是自己的产品,因此做成了弹窗形式。上面的两种是不同形式的弹窗,小伙伴们可以根据自己公司产品支持哪几种第三方登录来决定选用哪种参考。

    图标

    陌陌

    陌陌的登录注册页可能大家看着觉得很普通,没什么特别的,我刚开始也觉得很普通没什么特别的,但是大家可以注意一下它的第三方登录,如下图所示

    f01bb0d29b31a8531f2ff54a184025fe.png

    QQ和微信的icon都是自制的,与我们见到的大多数第三方的icon都不太一样,所以这个点可以作为我们设计第三方登录时参考的点。毕竟我们找参考并不是直接照抄页面,只是可以选择每个页面优秀的地方来成为我们学习的地方。

    图标

    音遇

    音遇的号码输入框也是很优秀的,如下图所示:

    ffef4cdb9c5c11e8ce56707316ac22d8.png

    音遇的账户输入框是会随着文字的增加减少而改变宽度,这样可以让用户更专注于输入账号的输入,以及及时确认自己的输入是否有误。

    划重点

    变身成厉害的设计师之前总要做练习,做积累,而有一双能够辨别出好设计的双眼能够让你事半功倍。很多人都会说因为我们审美不行,其实不好看的页面也有值得借鉴的地方,好看的设计也不是所有的想法都适合我们,我们需要学会辨别,而积累仅仅是开始的第一步。 好啦,今天的平面设计课堂:登录页面的设计技巧就到这里了,欢迎大家关注我的后续更新~

    文末福利就是最近的设计学习资源啦,点击这里进入领取,希望对大家的学习有帮助!

    6bf92587e504cc6208087fd13e54c95b.png

    edbcded9dbb644cd84c4b4e49979d0a2.png
    展开全文
  • 一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计。移动互联网盛行下,基本所有APP都会有注册登录功能,它不仅能让用户扭头就走,也能让产品获得新用户的芳心。一个合格的注册...

    一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计。

    移动互联网盛行下,基本所有APP都会有注册登录功能,它不仅能让用户扭头就走,也能让产品获得新用户的芳心。

    一个合格的注册登录页面,应该是具有清晰的操作流程,良好的交互细节和美观的视觉设计。

    APP的注册登录有三种情况

    ebdfce40857ba5bc2fd964bc68410c7f.png

    一、无登录注册

    1、大部分免费使用

    2、一般功能都比较单一,不会记录用户的历史行为,打开即用。

    如:小工具较多、手电筒、指南针、计算器…

    特征:工具类型产品盈利模式主要是靠广告盈利。

    86061d63488c4683c58615c2a8da2898.png

    二、强制性登录注册

    1、渴望用户的信息,对用户身份信息敏感

    2、对用户账号安全有保护,注重用户的数据保护

    如:社交类app、运动健身类、招聘类…

    特征:这类产品的特质(功能、服务)强烈的吸引着用户,用户非常愿意使用此类用户。

    d504133d74b5a6f3baf0b1a537c18a61.png

    三、触发登录/注册

    1、靠内容与产品支撑,通过内容与产品的优势

    2、吸引用户,促使用户转化

    如:电商类、新闻类、知识类…

    特征:

    1、这类产品的特质(功能、服务)并未强烈的吸引着用户,需要用户体验

    2、发展期、初创期的产品需要多的用户数量,所以不会在登录注册时强制执行,给用户带来困扰。

    a457cff5680a410a1f523047e346e594.png

    小结:根据产品属性选择合适的方式

    默认优先“登录页”还是“注册页”呢?

    一、注册优先

    1、可体验全部功能,直接进入产品核⼼区域。

    2、可获取用户信息,个性化推荐

    常用于社交或定制化较强的APP,例如:QQ,微信,抖音,keep,⼩红书.... 缺点:门槛较高,还没看到整个应用的全貌就要填写个人 信息,考验⽤户耐心。

    优点:

    1 、所提供的内容和功能,需建立在⽤户基本信息之上

    2、 产品初期成⻓长阶段,需通过强化注册⼊口提高新增⽤户量

    ed3190fc9a910623997bd34acc91b572.png

    二、登录优先

    适用场景:

    1、前期在web端积累大量用户,转移到移动端时;

    2、产品发展稳定期,已拥有大量的用户基础且新增用户增长较为缓慢时。

    优点:方便老用户,进入应用效率较高

    缺点:通常情况下,用户会选择下方的第三方一键登录,如果后期平台需要用户提交个人信息来享用更多功能时,需要谨慎引导否则引起用户反感

    3ba7847776e613f7cba58b46613dc0b7.png

    三、登录注册一体化

    优点: 方便快捷,转化率高

    1306b0c105640e8bb1367acf6139ff93.png

    登录/注册的页面设计元素有哪些?

    b1ae6487145c96f7cb8579401dfd71b8.png

    背景设计

    浅色背景

    1、简化了背景的视觉,突显账号区域的内容

    2、聚焦注册/登录的信息录入,提高转化

    23db76016e6a784cf38d0b14f1cb01e5.png

    品牌色背景

    突出品牌信息,加深用户对品牌的认知,树立品牌在用户心中的印象。

    1b6eda2d1984089e44d103ef7023d589.png

    图片视频背景

    给用户营造一种产品氛围,是情感化设计的一种,应景的图片提前让用户产生代入感,促使用户融入到产品中。

    1b8ccbeed594396a07ceb5ebbb71d3db.png

    引导元素设计

    品牌元素引导

    目的是为了进一步强大用户对品牌的认知,让用户熟悉产品,了解产品、对产品产生足够的印象,扩大品牌效应。

    当以品牌名或LOGO体现的时候,背景的设计一般会弱化。

    e64e483dbeaffffbf377545868f47724.png

    文案引导

    更有亲和力,与用户对话,同时更加聚焦每一步操作任务!

    04c819656e3518652a1163943e0c7b9a.png

    插画引导

    1、使用与产品气质一致的插画,可以强化品牌感

    2、同时更具有趣味性,也能让用户感受到产品设计的态度。

    a92ecd6cf3f2055b35e2181a910cd261.png

    账号操作设计

    第三方快捷登录

    以增加用户量为主要目的时,可采用快捷登录方式,它给用户提供了一种更为便捷的选择方式,无形中减少了用户的选择负担。

    a2879b675e9e3ade18194c95c30ff438.png

    信息输入表单

    以留存用户信息为目的时,让用户通过输入自己的账号、密码、手机号码、验证码等方式完成的登录注册操作。

    04a8880d2a1579bfc30f9ef3aaa64bc1.png

    表单有几种状态?

    1、默认状态(input&Btn)

    2、激活状态(input)

    3、输入状态(input&Btn)

    4、校验报错(前/后端校验)

    5、清除方式

    6、密码可/不可见

    7、验证码读秒/获取

    22006b5d19e703b723481c3c03a21550.png

    页面左上角是“返回”还是“关闭”?

    a7e24e2fc5be9de48f806b7d91ba3382.png

    设计方式:

    1、明确注册/登录的功能定位

    2、参照操作逻辑使用

    Bilibili注册登录定位为一个独立模块,该模块高于其他模块。

    如Bilibili:

    23da9940cdfafbc995e9118f8adc50e8.png

    感谢您耐心的读完,真心希望你能获得新知哦~

    相关推荐:

    帮你全面掌握投影设计

    UI底部标签栏设计总结

    UI设计师必看,作品集制作注意要点

    怎么做好弹框设计?有哪些注意事项?

    为你全面分析移动端APP搜索框应该怎样设计

    展开全文
  • 我们不要小看了这个登录界面,简简单单的几个小框,里边所要把握的设计元素却有很多,其中最重要的就是用户体验,那么怎样才能设计好一个产品开发的登录页面,给用户一个好的体验呢?云沃客_远程工作_在线商机_软件....

    2691c52217d95c0045ab8b26de22e887.png

    产品开发该如何设计登录页面,云沃客介绍说:现实生活中,我们接触大大小小的软件各式各样,要进入软件内部进行操作,就必须要先在登录界面输入用户名和密码!今天要分享的内容就是产品开发中的登录页面。我们不要小看了这个登录界面,简简单单的几个小框,里边所要把握的设计元素却有很多,其中最重要的就是用户体验,那么怎样才能设计好一个产品开发的登录页面,给用户一个好的体验呢?

    云沃客_远程工作_在线商机_软件定制一站式云工作平台www.clouderwork.com
    92cb09e779a24d3d12981076ec46c600.png

    对错误密码的保存问题。这一点更多的是从技术上的手段,当用户第一次输入输入的密码是不正确的时候,系统就可以在得出密码输入错误后的同时将这个错误密码保存在会话当中,接着,如果用户第二次或第三次再次输入这个错误的密码时,系统就可以在与用户交互的界面上提示密码错误,通过这种技术的处理方式,可以就可以减少用户密码输错的机会,同时也可以减少一次登录信息到服务器的验证,从而一次减少服务器的处理负担。很多时候用户输入的密码其实都是错误的,因为密码输入框都是以密文*号的形式出现,所以将错误密码保存起来更有利于网站登录界面的友好性。

    登录界面要尽可能少地减少用户的信息输入。根据以上第一点所示,如果登录界面提示要输入的内容太多的话,出错的可能性也就越多,因此这一点也是很重要的需要把握的一点。我们以注册表单为例,表单中如果增加一个字段信息,用户的注册率也会跟着下降,因为用户往往需要思考这个字段到底要填什么或者不知道这个字段需要填什么。同时,在必要的时候在登录界面上提供给用户查看明文的功能,特别是密码输入,我们在注册的时候往往都会有个密码确认的框,如果两次密码不一致,用户可能会将第一次和第二次的密码信息都清除掉再重新输入两次,越多次数的用户输入,会带给用户越多的不友好印象。

    尽量减少强制用户的操作。既然是为了提高用户体验,那么这一点也就很容易理解了,强制本身就是一个很不友好的一个词,用在界面设计上,难免会降低了用户体验度。比如众所周知的输入验证码,如果没有太大安全性的时候是可以减少这种强制验证的,而可以在用户密码或其他关键信息输错一定次数的情况下才会有强制的验证码验证。这样也就体现了友好度。

    登录或注册的提示信息。不管是移动应用还是PC应用,为用户提供最有有效的登录或注册提示信息是用户友好性的一种体现。特别是在用户注册或登录填写的表单有多个字段,而在这些字段的验证容易让用户产生歧义。表单的提示信息可以有多种形式,可以通过弹出层、红色标识字眼、相关图标等。

    产品开发该如何设计登录页面从以上不难看出,都是站在用户的角度上去考虑的。因为做软件就是就是做用户体验,软件最终是要交到用户手中去的。因此,只要在设计的过程中多去为用户考虑,就能设计出好的用户满意的界面。

    展开全文
  • 别急,小编现在将功补过给你们分享一下好看国外的网页登录设计。近几年的网页设计趋于极简主义,高级配色搭配一些小元素的点缀,大大升华了设计的主题1.高饱和类比色渐变这个渐变是通过色轮上两个相连的颜色形成,...
  • 我们不要小看了这个登录界面,简简单单的几个小框,里边所要把握的设计元素却有很多,其中最重要的就是用户体验,那么怎样才能设计好一个产品开发的登录页面,给用户一个好的体验呢? 对错误密码的保存问题。这一点...
  • Web网页登录页面设计

    2020-03-09 23:40:56
    利用web网页设计技术(html+css)进行静态登录页面设计开发,包含源代码 ,以及网页所用的图片
  • 最近看了html和css,于是无聊的时候做了一个注册页面第一次做感觉效果海星,就是代码渣了点。代码:<html> <head> <meta charset="utf-8"> <title>logintitle> <link rel="stylesheet...
  • 登录页面是我们再熟悉不过的了,不论是网站还是APP,用户在使用的第一步总是登录。这样习以为常的行为背后,究竟隐藏着怎么样的用户设计理念呢?简单7种设计模式,教你改善登录设计,快来学习吧!Jeremiah LamEx-...
  • 登录页面设计

    2017-07-08 18:34:00
    html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>  <script language=...
  • Keto-dite网站 使用HTML和CSS的登陆页面设计
  • doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords...
  • html登录及注册页面设计

    千次阅读 2019-09-25 06:38:53
    <legend><h1 align="center" >登录页面</h1></legend> <p><strong >用户名</strong> <input type="text" id="yonghuming"/></p> <p ><STRONG>密 码</STRONG> ...
  • 前面的视频+文章,松哥和大家简单聊了 Spring Security 的基本用法,并且我们一起自定义了一个登录页面,让登录看起来更炫一些!今天我们来继续深入这个表单配置,挖掘一下这里边常见的其他配置。学习本文,强烈建议...
  • 公司美工做的一个登录页面HTML文档,有需要的朋友可以拿去用用。纯属白送哦。
  • 简单的登录页面设计

    千次阅读 2020-01-08 21:14:04
    文章目录一、效果展示二、前端html/css代码(1)regist.html(2)CSS3.css三、服务器端代码(1)TextRegistServlet.java 一、效果展示 二、前端html/css代码 (1)regist.html <!DOCTYPE html> <html lang="en"&...
  • 承蒙各位小伙伴的支持,鄙人有幸入围...谢谢!❤️ 每一票都是我坚持的动力和力量!... 作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领.
  • 结果 代码 login.html <!DOCTYPE html> <html lang="en">...用户登录页面</title> <link rel="stylesheet" href="./css/login.css"> <script src="js/jquery-3.1.0.min.js"></s
  • html网页制作—登录及注册页面设计

    千次阅读 多人点赞 2020-04-11 12:47:20
    4.6 复选框 唱歌 篮球 羽毛球 跳舞 4.7 文件上传 4.8 表单容器盒子fieldset 登录页面 五、代码: <!--登录--> 登录页面 登录页面 用户名 密 码 个人信息注册 个人信息注册 用 户 名 请设置密码 请确认密码 ...
  • 情感化登录页面设计.

    2019-10-03 12:54:49
    打动人心的情感化设计!在readme进行注册,当你输入密码的时候,上面的卡通形象会遮住眼睛,给用户有安全感的设计 官网演示:https://dash.readme.io/login 转载于:...
  • 登录页面设计案例

    2010-11-05 13:51:00
    http://www.sj33.cn/digital/wysj/200902/19234.html<br />  请参加地址
  • 记录一哈学习过程 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...用户登录</title> </head> <body> <form action="register.html" m...
  • login.component.html: <ng-container *ngIf="user$ | async as user; else login"> <div class="cx-login-greet"> {{ 'miniLogin.userGreeting' | cxTranslate: { name: user.name } }} </div>...
  • hello,大家好,我是wangzirui32,今天我们来学习如何设计一个网站登录页面。 开始学习吧! 1. 项目架构 demo/ login.html 网页文件 backgrond.png 登录背景图片 style.css CSS样式文件 按照以上创建即可。 2. ...
  • 在您的网站设计中热情接待...但这是真实的,只有当您的网站登陆页面设计良好,维护和优化到腮。一个完美的登陆页面的艺术和科学超出了一篇文章的范围,但我们可以从帮助您找出七个最常见的——破坏性的——问题点...
  • 参考自博主“让心开始”的文章https://www.cnblogs.com/cuikang/p/5260558.html,感觉例子基本...先是index.htmlajaxLogin登录页面用户名:密码:$(document).ready(function(e) {$("#btn").click(function(){var uid ...
  • <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> 用户登录 <%@ include file="/pages/header.jsp" %> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,487
精华内容 594
关键字:

html登录页面设计