设计语言—表单（登录/注册）

版权申明：本文出自“罗耀_UI”原创，感谢“罗耀_UI”的原创文章分享！

大致讲完了按钮、下拉菜单、导航栏、分页等，就要开始讲表单了。表单也分几种功能和几种样式，我也不可能不能把它们一一讲出来，所以只挑出几个常用的来讲一下吧。重复性的知识就不讲了，还是建议大家都温习一下以前的知识吧。另外呢，以后的文章我尽量讲的在细致一些，这样就更容易让大家理解吧。不多说上干货吧。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

另外大家也不要忽略设计语言的价值。如果整合成业务层并制作成平台，按这个质量来看是可以卖2000万人民币的，基础部分可值300-800万之间，设计规则全网目前还没有人讲。去年我是整合了部分业务部分想融资做这块的，由于成本的问题就搁置了，但不代表以后不做这块。而现在转为教育更想履行一定的社会责任，我现在要把这块的知识公开化不卖钱，所以你们好好学它是很有必要的。

目录

1.水平登录

1.1 水平登录（样式）

1.2 水平登录（大体结构）

1.3 水平登录（拆分要素）

2.垂直登录

2.1 垂直登录（样式）

2.2 垂直登录（大体结构）

2.3 垂直登录（拆分要素）

2.4 垂直登录（实际案例）

3.注册表单

3.1 注册表单（样式）

3.2 注册表单（拆分要素）

1.1水平登录（样式）

登录页分两种：水平登录和垂直登录。水平登录一般应用在功能性/内容为主的页面上方，并满足页面不用跳转就能登录的需求，而如今已经不太常用了。不管怎么说还是要理解它的绘制方法，下图是它的样式及绘制方法。我还是以中等尺寸来做示例，样式同样分为黑白两种，如下图所示。

1.2水平登录（大体结构）

先了解一下水平登录的大体结构，它按功能会分为两个区域。左侧为输入区分别是"用户名输入框"和"密码输入框"。右侧为"登录区"就是登录按钮了。因为要突出层级关系，左侧输入区与右侧登录区的间隔不能相同；另外左侧输入区的总距离要与登录区存在一定的比例关系，如下图所示，输入区总宽度为400px刚好是登录区80px的5倍，即400/80=5。

1.3水平登录（拆分要素）

了解水平登录也的大体结构后就要拆分它里面的要素，并精细化它们之间的距离，例如图标与矩形框的距离，图标与文字之间的距离。文字不用测上下距离，直接水平居中就行了。另外我绘制的矩形框的单个宽度是196px，两个矩形框就是196*2=392px，再加上两个矩形框之间的间距8px，那整个输入区域就是400px了，刚好是登录区域宽度（80px）的5倍。

那登录区的按钮呢，细化来分可以分为三种尺寸，分别是按钮1（高32px/宽80px）、按钮2（高40px/宽88px）、按钮3（高48px/宽88px），每种尺寸对应不同的项目需求。另外禁止区域的按钮也会有尺寸变化，主要以4px递增，分别是禁止1（16px/间距4px）、禁止2（20px、间距4px）、禁止3（24px、间距4px）。而图标的粗细度也有讲究，这里我就不赘述了。

上面我只拿了一个较小的水平登录的宽度来举的例子。但由于页面受栅格系统的影响，水平登录页总宽度也会受栅格总宽度的影响。所以我在这里列举了几个不同宽度的水平登录，以及他们的尺寸关系等。如下图所示，登录1（输入区400px/80登录区=5倍关系）、登录2（输入区480px/80登录区=6倍关系）、登录3（输入区560px/80登录区=7倍关系），它们之间是存在一定的比例关系的。