移动UI设计-表单设计

最新推荐文章于 2023-06-14 11:33:55 发布
最新推荐文章于 2023-06-14 11:33:55 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： 网站 产品 文章标签： 移动 表单 注册表 设计 搜索
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddgweb/article/details/51130786
版权

移动UI设计-表单设计



登入表单



注册表单



核对表单



计算表单



搜索表单



多步骤表单



长表单





刘凤飞
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
怎么制作出领导喜欢的移动端报表？
2023年最新地推相关信息
03-10 1193
我们在搭建或规划移动端报表时，常常会遇到一些问题： 手机屏幕小，如何呈现核心业务指标？ 布局固化，想要更多的布局交互模式… 视觉效果不好，追求“高颜值”移动报表… 指标太粗，看不出问题出在哪… 指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态
【WeUI微信UI库 v2.4.3】移动Web应用设计的UI库+新增链接点击态色值变量
07-06
【WeUI微信UI库 v2.4.3】专为微信移动Web应用设计的UI库+新增链接点击态色值变量 WeUI是由微信官方设计团队专为微信移动Web应用设计的UI库。 WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计，可以令用户的使用感知更加统一。 包含button、cell、dialog、toast、article、icon等各式元素。 使用方法一： 使用bower进行安装 bower install –save weui 方法二： 使用npm进行安装 npm install –save weui 源码更新日志： 特征 feat: 调整Loading组件UI feat: Toast组件新增长文案场景、加载中场景升级UI feat: 新增msg自定义区域，可加key-value、普通提示、cell等列表 feat: 表单状态新增当前位置报错场景 feat: 表单组件新增跳转列表项 feat: 新增链接点击态色值变量 feat: 更新License年份 & 提供rpx版本 修复 fix: 修复Input组件placeholde字体颜色 fix: 修复rpx版本下的demo展示问题
Web界面设计规范（Web Form的UI设计）
04-11
为了使最终设计出来的Web界面风格一致化，开发者之间相互协作更轻松，特制定此Web界面设计规范！1. 此规范适合所有Web Form的UI设计
快速开发平台源码(带文档)20130715
07-19
快速开发平台源码 功能介绍： EasyPlat.Net提供基于DATASET的三层结构，可以通过直接使用BizSQL进行两层开发。包含账号、角色、权限，菜单管理；导入、导出、打印、加密等方法；公共字典、XML字典使用；日志记录等。 用户可以在此基础上7天之内完成快速开发企业实用的系统, 一行代码插入数据，一行代码更新数据等不用写大部分代码。(
格子表单：基于 GRID 布局的简单表单工具（包含可视化设计器、渲染器），默认组件库为 Naive UI，同时支持 .zip
最新发布
02-18
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
完整的漂亮手机模板UI库html5
06-25
完整的漂亮手机模板UI库html5，导航控件，列表控件，表单控件，搜索组件，面板，组件库，对话框，按钮等等；是一个完整的组件库。
得到控件句柄 怎么在后台操作_UI后台设计规范总结
weixin_39761822的博客
12-06 195
后台UI设计其实都趋于相同，除了定义的品牌色以及业务逻辑的不同，整理设计控件和模版，实现组件的复用，从而减少开发的成本。以下是一些规范总结。布局统一的布局，会让页面统一，并具有秩序之美。设计是感性的，也是理性的，统一的布局以及统一的模度，让界面有有秩序感和韵律感。统一画板尺寸后台设计的统一画板尺寸的宽度为1440，一方面为了不同设计师设计的统一性，另一方面在设计师用笔记本演示的时候是全屏的体验效果...
【Vue】elementUI实现动态表单功能（实现表格的增加行、删除行的功能）
zzf_forgot的博客
01-20 6411
需求：当需要给用户填写表格时，并且用户填写行数未知，会需要使用到动态表单功能，这个和通常的写死form表单不同，如下图所示： 实现： 1）前端代码如下图所示：采用el-form嵌套el-table的方法，整体结构如下图所示： <el-form :model="instance.items" ref="data" label-width="auto"> <el-table :data="instance.items.filter((dat
vue与C#实现自定义表单审批流程构建-前端
acheng
07-29 5022
做信息化项目相信绝大部分人都接触过单据审批流程的需求，例如发起一个采购申请，需要几个节点审核，部门负责人审核，采购审核，财务审核等等。审批人也需要可自定义，以及可能会出现审批条件分支的情况，这时我们的审批流程就需要完全可定义才能满足...
审批流设计
u012929855的博客
09-17 564
一个简单的审批流程系统设计
热门推荐
TheTian的博客
12-02 1万+
一个简单的审批系统设计 1 背景 ​ 最近在做一个企业管理系统的外包，该管理系统主要分为两个端，管理端（web端）和生产端（移动端）。管理端的功能有人员管理、项目管理、工作量管理、审批流程管理等，生产端就是给员工用的，功能有上报工作量，请假，调岗，打卡等。生产端的一个特色就是有一个审批的功能，员工提交的各个模块的申请都要走审批流程，审批流程通过后，该申请才算生效。 2 审批功能设计 2.1 数据库设计 2.1.1 用例分析 ​ 一个完整的审批过程需要这几类角色：申请人、申请详情、审批流程、审批规则。
漂亮的表单UI
06-01
好看的表单UI。
android 漂亮的UI界面 完整的界面设计
01-06
声明：这也是我学习时在网上下载的，鉴于分享精神，并且觉得很不错才上传上来的。 android 漂亮的UI界面 完整的界面设计 这是一个完整的UI设计，但是没写动作，这是一个公司程序员的公司任务设计，请别商用，要用请修改。
手机移动端demo
04-26
以前做过的一个手机端的demo,页面设计合理，包含数据列表，文件下载列表，表单等，一整套的东西。
LayuiForm表单.txt
12-10
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块，也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块，layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本，我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为： CSS命名规范 class命名前缀：layui，连接符：-，如：class="layui-form" 命名格式一般分为两种： 一：layui-模块名-状态或类型 二：layui-状态或类型 因为有些类并非是某个模块所特有，他们通常会是一些公共类。如： 一（定义按钮的原始风格）：class="layui-btnlayui-btn-primary" 二（定义内联块状元素）：class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码： layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例子       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt
适配移动端的优秀表单OhMyForm
wbsu2004的博客
04-25 1103
OhMyForm 是 TypeForm、TellForm 或 Google Forms 的免费开源替代品。
php两个表单_UI设计——用户表单设计注意事项
weixin_39637233的博客
11-29 157
作为一个UI设计师，一定会用到表单设计，我们如果设计出一个糟糕的表单，会极大影响 用户信息的录入的效率，今天就给大家介绍一下表单设计中需要注意的事项。一个表单有三个组成部分：表单标签(标题)。表单域(输入框)，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。常见的表单...
移动端的h5可配置表头的复杂表格
Javahtml12的博客
06-14 950
最近做移动端的h5项目，要做一个可配置表头的复杂表格，网上找了很久也没什么好方法，结合网上的一些例子，在此做一了一个完整的vue版的例子
移动端ui框架哪个好_UI界面移动端表单设计
weixin_39968592的博客
12-13 1723
一个努力中的公众号表单在网页中主要负责数据采集功能，用来收集用户的信息。常见的表单表单的组成标签输入字段占位符按钮前导图标后缀图标帮助(图标)验证反馈01 标签标签的目的是为了告诉用户这里需要输入的信息是什么。根据标签所在的位置，可将标签分为：左标签顶部标签行内标签1、左标签(标签左对齐、标签右对齐)标签左对齐需要更多的横向空间，需要控制字数，常常造成标签右边参差不齐。与输入字段关联性...
https://muse-ui.org/
07-28
Muse-UI 是一个基于 Vue.js 的 UI 组件库，它提供了一系列的高质量、可定制的 UI 组件，帮助开发者快速构建漂亮且易用的用户界面。 Muse-UI 的主要特点包括： 1. 基于 Vue.js：Muse-UI 是为 Vue.js 构建的组件库，与 Vue.js 的生态系统完美集成，使用起来非常方便。 2. 高质量的组件：Muse-UI 提供了一系列经过精心设计和优化的组件，如按钮、表单、导航、弹窗等，这些组件都经过了良好的测试和优化，确保在各种场景下都能正常工作。 3. 可定制性强：Muse-UI 提供了丰富的主题样式和自定义选项，开发者可以根据自己的需求定制组件的外观和行为。 4. 响应式设计：Muse-UI 的组件都经过了响应式设计，可以自适应不同的屏幕尺寸和设备类型，确保在移动设备和桌面设备上都有良好的用户体验。 5. 文档友好：Muse-UI 提供了详细的文档和示例代码，开发者可以轻松地学习和使用组件库。 如果你对 Muse-UI 有进一步的了解或者有其他问题，都可以告诉我哦！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值