第1个回答 2022-06-04
第80天（2018-7-13）
这段时间在做公司的一个项目，在设计注册页过程中，我参考过很多APP，经过对比和分析，我总结了以下两点：第一、注册页元素；第二、注册页设计样式。
一、注册页元素
注册页元素是根据产品需求来确定的，对比后发现，大部分元素都是相同的，只有少数是根据产品的业务需求做的差异化。
注册页元素总结如下（如图1）
注册页中共同的元素有：“手机号”、“获取验证码”、“重新发送以及计时”、“密码”、“用户协议”、“注册按钮”等，例如：“站酷”、“网易严选”、“好豆”等APP都有以上元素。（如图2）
有一些注册页根据业务需要，增加了元素，例如：“淘宝”和“苏宁易购”APP，增加了“安全检测”的元素，原因是：含有支付交易功能，为了保护账号的安全性。（如图3）
“猎聘”和“QQ”APP增加了“地区”的元素，原因是产品在国内外都可以使用。（如图4）
二、注册页设计样式
看过很多产品的注册页，发现了一些设计的规律和特点，我从以下四个点展开陈述。
1、排版样式
对比和分析其他APP，注册页排版样式大致有三种：LOGO+信息输入+按钮、标题+信息输入+按钮、LOGO+标题+信息输入+按钮，（如下图5）
三种样式的区别在于所强调的内容不一样，标题样式强调重点信息的传达，而LOGO样式强调品牌信息的传达。没有好与不好之分，根据要传达的内容来选择合适的样式。
例如：“站酷”注册页，用“LOGO+信息输入+按钮”样式；“QQ”注册页用的是“标题+信息输入+按钮”样式；而“百度”注册页用的是“Logo+标题+信息输入+按钮”样式。（如图6）
2、信息输入样式
信息输入是指“信息输入框”，注册页里必不可少的，主要有两种样式：通栏和非通栏（这两个名字是我根据输入框样式特点取的），通栏是指输入框与屏幕是相通的，没有间距；而非通栏相反，是与屏幕有间距的。（如图7）
细分通栏信息输入框也有两种样式：矩形、线+矩形，什么意思呢？看下图左图注册页用的是矩形样式，右图注册页用的是线+矩形。（如图8）
非通栏信息输入框有四种样式：线、直角矩形、半圆角矩形、圆角矩形。（如图9）
在注册页中非通栏样式比较常见，由于其在排版上的有更多的灵活性和发挥空间，所有比较受设计师的欢迎。
3、验证码样式
获取验证码有两种样式：文字、文字+矩形（圆角、直角）。如下图10，“拉钩”用的文字样式，“落网”用的是文字+矩形（直角）的样式。
文字样式方便开发落地，文字+矩形样式美观且满足操作心理，作为设计师更倾向第二种样式，但目前用最多的是第一种样式，也成为了趋势。
4、信息输入+按钮样式
信息输入+按钮样式指信息输入框与注册按钮的不同组合，文章第二点我总结了输入框的各种样式，信息输入+按钮样式其实是各种输入框样式的组合，常见的样式有两种：线+矩形（直角/圆角）、矩形（直角/圆角）+矩形（直角/圆角）。例如：“百度”APP是线+矩形（全圆角）样式，“小红书”APP是矩形（半圆角）+矩形（半圆角）的样式。（如图11）
总结：
文章分享了注册页元素和设计样式两个内容，一是，把看到的写下来，让自己更好的理解和吸收，二是，可以分享出来。写的过程中，我不断优化文章结构和内容，毕竟要分享出来，希望给大家正确的引导。