【经验】B端后台产品UI设计——表单

用户头像
北京/设计爱好者/4年前/364浏览
【经验】B端后台产品UI设计——表单
用户头像
啵菜儿

希望在日后的工作和学习中,通过实践来不断完善自己对B端后台产品的理解。

 Forms(表单):

1、 表单多由一条或多条列表项组成,单一列表项的类型有字段输入框、条件选择器。 


2、 字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式,比较适合PC端的使用;上下分布增加了表单的整体高度,视情况选择使用;无标题经常应用在登录注册,虽然减少了面积,但是增加了理解难度。 


3、 输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。


4、 输入框的尺寸可按照8的倍数进行设定,比如24px、32px,也可根据系统实际情况进行设定,我常用的输入框高度为30px,宽度视情况而定,无圆角。上下布局的多个输入框上下间距为20px,有错误提示时候竖向增加10px或横向显示在输入框右侧(预留出位置)。 


5、 表单中标题文字左对齐,输入框左对齐,标题文字距离输入框20px(多个长度不同的输入框算最长的);标题文字右对齐,输入框左对齐,也是常用的方式。输入框内正文字体14px,文字和左右两边边框的边距10px。 


6、选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形,复选框多为方形。 


7、搜索框和选择框的高度为30px或按照8的倍数自行设定,通常和输入框保持一致。搜索框距离右侧按钮4px,内部文字14px。 


8、单选多选框尺寸16*16px,多个选项横向排列间距16px,纵向排列间距8px。 


9、开关按钮外框40*20px,内部圆形16*16px。


 


总结

每一个设计规范都是有灵魂的,规范是为了更好的做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,他在落地使用的时候多少都会有问题,需要慢慢的去反复检验规范的合理性,发现不合理的及时更正。


0
举报
|
1
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
牛奶乳液层次平面平铺平面
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
空的平台平面和自然景观
中国传统纹样创新图案设计
玄关入门地毯印花图案红地毯
平面男孩喝咖啡插画设计
古风平面仕女与瓷器
金色颗粒质地的平面
平面人物插画
海底世界插画
金色颗粒质地的平面
城市园林平面布局航拍
平面设计 吊牌设计
牛奶乳液层次梯田平铺平面
水蜜桃和李子的平面水果图案
金色颗粒质地的平面
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
城市园林平面布局航拍
金色颗粒质地的平面
课程海报,平面素材
学习,优惠券,平面,海报
空的平台平面和自然景观
城市园林平面布局航拍
平面书法字手写
你可能喜欢
相关收藏夹
大家都在看
登录注册