设计速查|一个登陆界面的心路历程

King国王刘

北京/UI设计师/2年前/1104浏览

版权

设计速查|一个登陆界面的心路历程

King国王刘

如果你不想看故事可以直接跳到最后，下载源文件。前面的内容，可能对你的工作并没有很大的帮助。纯是感情、没有技巧。

-

一个孤僧独自归，关门闭户掩柴扉（写在前面）

如果你不想看故事可以直接跳到最后的拆解系统登陆页、详细教程内容看就可以了。前面的内容，可能对你的工作并没有很大的帮助。纯是感情、没有技巧。

-

来往不逢人，长歌楚天碧（故事的开始）

故事要从去年的7月份说起、接到了一个大活。要做一个智慧学车大数据平台分析平台。当然一个平台大概率是应该有登陆页面的。这篇文章我就想说一说系统的登陆页面。其实也谈不上教程。可能如果你做系统登陆页面看这一个文章就够了吧。

-
去年7月的活

直接上东西吧、这是去年7月份做的智能学车大数据分析平台的登陆页面。页面的元素并不复杂也不对。（我现在严重怀疑、这个需求就是公司大佬临时起意要搞的。不过没有证据、哈哈大佬都是对的）

做这个页面时。因为还没有过试用期。心里也是慌的一笔。（这他🐴公司不会是要裁掉我把，没来公司多久给这么大一个工程、直接让我新搞一个系统出来。挖擦）所以在做的时候就找了很多平台的登陆页面做参考。也在花瓣上转了一圈。大神能看出这是抄的那个吗？（评论区见）

-

为什么要写

结合这一次的需求的设计过程。我会把我所有遇到的问题、和如何解决的方法写下来。还会赘述一些其他的解决方案、比如登陆页的形式有那几种、排班有哪些、还会细节的列举各大厂登陆页设计案例的详细设计尺寸标注。以方便以后做设计进行借鉴。

-

我会写一些什么

这里我想写的是，登陆页面的拆解元素、（就是登陆页面一般会有什么东西）。会罗列一些大厂线上登陆页面各元素的尺寸、包括不仅包括、元素间距、字号大小、颜色等。写一些，我对登陆页面的设计理解。怎么快速的搞定这个登陆页面需求、放一些我之前做过的一些登陆页面。

-

拆解系统登录界面

登陆页面的元素一般都是很固定的，各个系统的区别只是元素的或多或少。功能的多与少。和我们产品业务对登陆页面的推广需求等。

-

登陆页面形式和板式布局

登陆页面的常规形式只有两种、板式布局的话就比较多种多样了。各有个的何处符合自己的业务需求就可以，没有必要非要用那种形式或者板式去实现。

-

形式

形式常规的分为两种，一种是弹窗使的登陆。登陆之后还会停留在当前页或者跳转新的页面（这种还挺少见的、要根据自己的业务需要来）

另一种就是跳转打开新的登陆页面、进行登陆行为的操作。登陆成功后直接进入系统首页。

-

板式布局

板式布局还是有很多花样的、可以结合自己的页面进行选择。（这里我说的板式布局主要指的是登陆元素所处在页面的位置或者展示的形式）板式布局、无非是、登陆框、居中或者居右比较常见。也有很多居左。

-

登陆页面元素

一般我们登陆页面可以分为几个部分、顶部导航、登陆框、背景（这里可能说的不准确）和底部的一些版权信息或快速入口。基本一个登陆页面也就这几块内容了。（有的登陆页可能是一个弹窗所以只有登陆框内容）

（网图）

-

顶部导航

大部分我们的系统顶部的导航区域，会放企业logo和一些快速入口。除了这些元素、也会放一些如切换语音等元素、当然也可能什么也不放、或者只放一个logo。这是一个很自由的区域并没有什么硬性的规定。只看符合你们系统对登陆页面的需求就行。（比如我公司，就在顶部导航区域放置了好几个快速入口。因我们这些快速入口是我产品需要曝光的。但其实我认为，登陆页面就应该专注于等自己的信息。不应该用过多的信息干扰用户的登陆行为。可能体验会更好）

顶部导航一般高度：60px(这个比较多)、48px、ant design对顶部的规范是建议48+8n

logo尺寸：一般视觉上合适就行。

文字大小：14px（大部分）16px(也可以)

-

登陆核心元素

登陆核心元素、这里指页面里我们需要交互的部分内容、登陆二维码的展示、账号密码的输入等。以火山引擎的登陆页面我们来盘点一下他的核心登陆元素。

登陆方式：扫码（这个页面没有）、账号登陆、手机号登陆、第三方登陆（一般都是跳别人家的接口不用我们进行设计）

文字颜色：他的文字颜色都是有色彩倾向的、并不是死黑那种。（我喜欢有色彩倾向的文字颜色、而不是000000、333333、666666、999999）

切换标题文字文字大小：26px(这不是固定的、其他平台还有、16、18、20、等)

其他接口文字就是正常的文本大小：14px

输入框：宽364px/高48px;输入框之间的间距20px（20px已经是最小了，如果在小、错误提示就放不了输入框下面了）

按钮：文字16px;宽高和输入框一样

-

背景（可能表达的不够准确）

因为板式不同、可能说是背景就不太准确了。可能也是配图、这个部分作为我们设计师可发挥的空间就比较大了。配图可能是平台的介绍、新功能的介绍。也可能是节日皮肤。等等。

百度的就是平台的介绍和优惠信息的漏出。

-

底部

底部就是一些版权信息和一些快捷入口。这里正常的页面排版就好。没有什么花里胡哨的。我个人认为，这里做的越简洁越好。

-

马有千里之程、无骑不能自往（最后的絮絮叨叨）

这个文章断断续续的写了两周、因为是断断续续所以、就写了删、删了又写。主要是工作需求太多没有时间写。不知道这篇文章对你有没有用。（甚至我不敢说这是教程、确实是误人子弟了）。

我是不太满意这篇文章的。依稀觉得逻辑性不强，没有更深度的去总结自己在设计时遇到的问题（主要是离上一次做登陆页面过去的时间太长了，好多当时遇到的问题都想不起来了。没有做好记录，只是我之过也）另一个不满意的点是。我本想以我上次项目设计流程。来讲述一个有趣的设计故事。但是好像现在写的确实缺少了一点趣味性。下次我会注意。

对于我的意义、还是有一些的。一直低头走路、停下来想一想做一些总结。深入的去想一些问题，这样对自己才会提升。要不一直困在需求里，等待我们的只能是默默的离场。毕竟一场旅行目的地很重要、但同样沿途的风景也不应该被我们错过。还有就是对我自己以后遇到登陆的需求设计时也有帮助。直接看这些标准即可不用在一个一个的去打开页面看了。（不知道到时候我会不会感谢现在的自己）

-

登陆页标注

如果需要sketch源文件、自行取用。百度云盘：链接: https://pan.baidu.com/s/1mBTSpuXmG4ATglGmRNLPUQ?pwd=5ary 提取码: 5ary 复制这段内容后打开百度网盘手机App，操作更方便哦

火山引擎：1440*900

https://console.volcengine.com/auth/login?redirectURI=//www.volcengine.com&title=%E7%94%B3%E8%AF%B7%E8%AF%95%E7%94%A8