之前写的系列文章了。想想写这一篇已经是一年前的事情了。不知道是为什么开始写的、但是开始了就一直写呀写的。当然这也是我自己的一个学习过程。希望可以帮助你。

这个系列的文章主要是写B端的基础设计知识。

第一部分 | 写在前面

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

1、2021年的7月

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

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

2、为什么要写

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

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

第二部分 | 拆解系统登录界面

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

1、登陆页面形式和板式布局

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

1.1、形式

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

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

1.2、版式布局

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

2、登陆页面元素

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

2.1顶部导航

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

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

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

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

2.2、登录核心元素

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

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

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

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

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

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

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

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

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

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

2.4、底部

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

第三部分 | 登录页标注

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

火山引擎：1440*900

阿里云；1440*900

百度云登录；1440*900

第四部分 | 写到最后

写文章对于我的意义、直低头走路、停下来想一想做一些总结。深入的去想一些问题，这样对自己才会提升。要不一直困在需求里，等待我们的只能是默默的离场。

这是我的一个学习过程。用输出倒逼输入，让我可以在之后的设计里、能知其然、知其所以然。

屈原在离骚中说，路漫漫其修远兮，吾将上下而求索。苏轼在晁错论讲，古之立大事者，不惟有超世之才，亦必有坚韧不拔之志。所以路很长，在黎明之前请低头狂奔。男儿何不带吴钩，收取关山五十州。

我们能做的是提升自己，手持两把西瓜刀。要有从南天门砍到蓬莱东路的勇气和实力。然后就等风起、守的莲开结伴游、约开萍叶上兰舟。每次写完一篇文章、都会有所收获。希望能和优秀的你一起前行。这里都是打工族纯一线设计师、也许能够帮助你。

Powered by Froala Editor