注册页设计套路小结

注册页设计套路小结

大许大许

农闲时间去dribbble看大家的Daily UI玩,研究了下001#注册页的设计,看了几百个作品之后,总结出几种常见套路:

1. 几乎所有注册页的设计都采用了背景+卡片 / 模态窗的形式:

背景的设计主要分为纯色、渐变、矢量图形构成的图片、摄影作品几大类:

纯色

渐变

矢量图形

摄影(通常将背景做模糊处理)

卡片的版式主要有两种:

不分区,将整个卡片作为一个整体来设计:

将卡片分为左右两个部分,一部分放置表单,另一部分搭配解释性的插画、照片和文案:

当然也有一些例外的设计模式,如

(知乎设计师@高山垚 的作品)


2. 轻量化的表单设计

传统的表单由label和input组成,大体长这样:

或这样:

在Daily UI 001中,设计师们普遍采用了更轻量化的表单设计,抛弃了input的全边框,只留下底边线,不对input的背景色进行填充,视觉上更加轻盈。同时将label至于input内部,当用户点击输入框开始输入时,label的文字产生相应的变化,节省了页面空间。

查看示例

看多了Daily UI 001下的作品,是不是觉得登录页的设计大同小异呢?以上总结的设计套路并不是鼓励设计同学们偷懒,而是为缺乏设计经验的设计师提供一些思路和参考,同时也是希望有一定经验的设计师可以打破以上套路,加入更多新鲜的创意。

「真诚赞赏,手留余香」
还没有人赞赏,快来当第一个赞赏的人吧!
文章被以下专栏收录
还没有评论
推荐阅读