认识达内从这里开始

认真做教育专心促就业

太原达内UI设计培训表单设计水平登录设计方法分享

发布：太原达内教育官网
来源：互联网
时间：2022-07-06 08:20

表单设计的应用在许多网页设计以及app应用软件开发中使用比较频繁，而我们今天就通过案例分析来简单了解一下，表单设计水平登录设计方法分享。

太原达内UI设计培训表单设计水平登录设计方法分享

登录页分两种：水平登录和垂直登录。水平登录一般应用在功能性/内容为主的页面上方，并满足页面不用跳转就能登录的需求，而如今已经不太常用了。不管怎么说还是要理解它的绘制方法。

水平登录(大体结构)

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

水平登录(拆分要素)

了解水平登录也的大体结构后就要拆分它里面的要素，并精细化它们之间的距离，例如图标与矩形框的距离，图标与文字之间的距离。文字不用测上下距离，直接水平居中就行了。另外我绘制的矩形框的单个宽度是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倍关系)，它们之间是存在一定的比例关系的。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：太原达内电脑培训软件系统常见性能问题都有哪些

下一篇：太原达内Java培训信息传输安全加密技术类型分析 >