讲解设计语言中的表单中的登录与注册部分

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

另外大家也不要忽略设计语言的价值。如果整合成业务层并制作成平台,按这个质量来看是可以卖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倍关系),它们之间是存在一定的比例关系的。

看到这里水平登录也页的几个要点就讲完了,不是很难懂,同学们练习一下,根据例子实操练一下就明白了。

2.1垂直登录(样式)

现在最常用的登录样式是垂直登录,基本上所有后台和各大门户社交平台,均采用的是这种登录样式。例如新浪网、百度云盘、淘宝、京东等,例子太多了。不要看他们是大厂大公司,有些细节把控还是不到位的。例如新浪网的垂直登陆,文字与矩形框的距离没有规范,它们之间的距离太近了,视觉效果稍差一些,又或者是输入完信息后右面的清除按钮做的不规范,没有做到“视觉水平居中”等问题。



本文标题:讲解设计语言中的表单中的登录与注册部分
本文链接:https://www.zjnewsw.cn/wbsp/0429132620191326.html