小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
上次给大家分享了15张的移动端登录界面:juejin.cn/post/701092…
这次给大家带来了20张Web登录界面,真的是辛辛苦苦收集了好久,如果有喜欢的不妨给我点个赞吧,感谢!
以下所有设计图均来自网络,如有侵权,请联系我删除,感谢各位分享~
本人最喜欢的一张😎:(大家在评论区投票选出最喜欢的一张吧)
按钮的圆角让我看了真的是身心愉悦,简约却又不是高雅!
![9-Ghostlamp登录页.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/789b4c9cfe144772aa3db6f9cbdb42ea~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
其他的十九张😍:
1.这一款我也是吹爆,层次非常明显,颜色令人舒适,各位觉得怎么样呢?
![attachment.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d83f5baf3752478f8cbb6c8aba32912c~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
2.这张就是经典款,左侧突出自己网页的主题,右侧是一个简约的登录,这张非常实用,只需将左侧的图片一换即可!
![08f40964340715.5aceef34f2ea3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5b6ac19dcb24af7a25babe8041ebdf8~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
3. 这就很像校园的网站,这样的配色突出校园青春气息,登录框与背景的交叠凸显层次
![index_1_2x.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90096fbcac1842059641b9789d7f10da~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
4.这一款可是上榜2020年6月的设计榜,层次相当丰富,主题也很突出,不愧是上榜的作品
![64f84e93d8d542cdbe6a60feacb0bd7f.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b3fa7c49c274198aa064bebdff471b5~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
5.哇塞当时看到这一款的时候,我是惊讶到的,这款色彩和层次是真的丰富🤩!!!
![f8c2790e78604506b66a5ecb0c6e41d2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/804f0c2dd2e446e28e59f23d59c9ad66~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
6.这款也是相当的好,一款卡通风格的旅游网页,用于游戏的官网也可以(例如原神),个人很喜欢
![98efa92b63444ab9a3bf2ca077d6407c.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8271e44b0fe4d9a9952a3efcbb39ef3~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
7.这篇也是很通用的网页,不过右边的圆角登录框也是比较有特色的
![721f79495b177004b3bea0ab56b67817.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4d2b682a4334b42a4a621a89d6e1c87~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
8.这一款乍一看很普通,但是当你关注到了细节时,它的背景分块真的是很好,爱了爱了
![1328fcb2fb61101d827f407b4bae60b0.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b61c54746bea4a2491496c5206c77f51~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
9.这一款是相较于其他有很大不同的,它更多的是在展示自己的界面美,没有去注意功能的突出,这样别具一格的其实也很不错!
![1720266fcb564e00883b3cc377411225.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0791ec655ef479488cb9b09d3bf3087~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
10.以蓝色为底色,利用圆角层次分明,也突出了功能,很适合电商网页
![2d43921946fe96563215085c13f6e6b2.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66a025c573be475592ad13ec78ba54c8~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
11.这一款除了背景有点留白太多,其他还是很不错的,换一下背景就可以直接商用了~
![beautiful-login-pages-01.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19617f2987e843b4a53ccb221d1dd80a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
12.也是一如往常的好,乍一看是很常规,但是当你细看的时候,它对于输入框的处理还是很到位的
![bffebdfb7df843c5ab51741502a73da7.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5f0f48806f2646269aa2be529e3b6020~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
13.这一款就比较有特色的,左侧一个轮播图用于展示网页与业务的特点,右侧的输入框与背景交叠丰富了层次,很棒的作品!
![c6d18b48663171.589df36ab8757.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fff7428a6dbe464d9ace7b3ffa3a421a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
14.这款就是介绍自己app的一个网页,也是很不错,但是不知道为啥图片有点糊😭
![c42a74c97fe724e8b0cec9cdf383cec4.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/11401153c1964105b3f47372d502540a~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
15.这款黑色与紫色交融,满满的高级感!
![dribbble_-_form_2x_4x.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/776514d66b82418fa604619d7c297b9d~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
16.这一款也在设计榜上,不过,我水平不够,没有欣赏到它的美,蓝色的底色(好了我真是编不下去啦哈哈,原作者看到的话不要打我,这只能证明我的审美不够)
![83dd6861ca7f401780933ff7e1b1f112.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21b5d022d4f7494f8aab8fdf6e2b9b1b~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
17.漫威蜘蛛侠咱就不用多说了吧,懂得都懂,5星通过👌
![matheus-bedeschi-telabhance.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e955f0e2b11c4c9f8f4eee70a2060fd3~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
18.唯美风格,相当舒服了,很适合一些助睡眠的网页🌙
![preview.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/006577a3c1ef4afeac306cf315e436e8~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
19.外星风格,我觉得可以卖玩具了哈哈😝
![login-form-page-galaxy-universe-260nw-1765035455.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eaf71a11f9047c7a68e150fc760bc45~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.image?)
每一张都是设计师辛辛苦苦设计的,每一张都很棒,感谢!!!
|