企业一站式服务平台
服务
  • 服务
  • 资讯
  • 店铺
建站
设计
推广
当前位置:主页 > 梦网学堂 > 网站搭建 > 正文

如何快速搭建系统原型(四):组件分享

2018-07-12 18:17 | 来源:未知 | 责任编辑:admin

弹窗窗口

弹窗是系统常用的一种展示内容的方式,在网页、软件、系统、APP都是非常常见的。我觉得弹窗更多的是一种容器,用户来盛放内容,这和我上两章提到的内容的“弹窗式”展示样式是一致的。那这边单独将弹窗作为一种组件进行介绍,是因为弹窗作为一种最常见的展现方式,但是在结合到不同的场景、针对不同目的会有很多种不同的弹窗形式,所以这边对弹窗进行了整理和说明。

【弹窗结构】弹窗主要分为弹窗控制区和内容区两个部分组成。

  • 弹窗控制区:展示弹窗对应的内容名称,控制弹窗的变化(放大、缩小、关闭等);
  • 内容区:展示内容信息,常见为表单、列表、详情等形式,和上章介绍的内容区(详情页)样式基本一致;

弹窗交互

介绍系统中常见的弹窗交互:

(1)弹窗交互-打开方式

居中打开:常规的弹窗是在界面正中间展开;

底部展开:为了不影响用户目前的操作,常见系统消息、新闻提示等弹窗会在界面右下方打开;

抽屉式:从侧边展开弹窗;

悬浮(位置不固定):弹窗打开位置不固定,主要是表现了弹窗内容和用户操作内容的联系性;,一般弹窗内信息量较少;

(2)弹窗交互-控制动作

默认大小:窗口的默认尺寸大小,应贴合所要展示的内容进行调整,即宽度/高度不指定,一般有底部遮罩的弹
窗是不能进行移动放大和缩小操作的;

最大化:

最小化:点击做小到标签栏或者有一个最小化悬浮窗口;

拖动:鼠标左键长按窗口顶部控制区域进行拖动,一般可以拖动的弹窗是没有底部遮罩

其他:根据业务需求可以有刷新、上下翻页等功能;

弹窗分类

根据弹窗的不同功能和使用场景,可以分成以下几种弹窗:

  • 【引导弹窗】主要是用于介绍界面相关信息功能,引导用户操作;
  • 【选择弹窗】主要是进行选择操作,包括人员、图片、项目等;
  • 【任务弹窗】完成某项任务, 包含新增/修改、注册、事项流程等;
  • 【提示弹窗】用户提示用户,包括操作确认、信息提示/反馈等;
  • 【内容弹窗】弹窗展示内容信息,主要用户内容查看;

(1)引导弹窗

  • 【样式说明】:常用于首页进入系统或者某个功能模块,对当前界面的介绍以及操作引导帮助用户尽快熟悉使用方法。
  • 【适用场景】:新手引导、操作引导、系统介绍…

(2)选择弹窗

  • 【样式说明】:常用于进行选择的页面,因为只需要进行一次选择操作所以为保持前后页面的联系,用弹窗展示会更好;
  • 【适用场景】:人员选择、图片选择、操作方式(支付方式)选择、分类(用户类型)选择等;

(3)任务弹窗

  • 【样式说明】:用户完成某些任务,单独用弹窗展示会更高效;
  • 【适用场景】:办事(流程)弹窗、编辑、设置、登录/注册…

(4)提示弹窗

【样式说明】:此类弹出窗只用于告知用户某些需要强制确认、提示的信息(报错类提醒中,支持查看错误信息),并需要用户做出相应的决定操作;

【适用场景】:

  1. 对页面中一些操作重要度较高的再确认,如是否删除?是否放弃保存?
  2. 【提示信息】提示一些说明性质的信息;
  3. 【警告信息】系统可预知的客户错误操作提示,错误级别低;
  4. 【错误信息】因不可预知的原因引起的操作失败提示,一般在异常捕获后提示;
  5. 【成功信息】用户操作完成并成功后提示。

(5)内容弹窗

和上一章内容详情页设计保持一致,这里就不再做过多介绍了。

其他组件

下面就介绍下其他常用的组件,根据不同的功能和使用场景我们可以分为:

  • 【分页】主要用户页码切换,常用于列表页面;
  • 【附件】用于上传附件操作;
  • 【信息回复】对内容的评论和信息反馈,消息回复等组件;
  • 【其他】各种数据图表、天气等个性化组件;

分页组件

附件管理

信息回复

其他组件

小结

这章主要是介绍了我自己整理一些系统中常用的组件设计案例,因为是我自己的整理和分类,所以其实这些组件还有更多的内容和更加专业的分类方式,而且组件的样式和交互方式其实还有很多很多,每一个类型都可以扩展起来详细介绍。这里没有做过多的介绍,只是希望整理的这些内容对大家的设计有一些启发和指导意义。

热门推荐文章

联系我们

一站式管家服务、我们坚持24小时接受呼叫,感谢您对我们的信任!

来电咨询

400-661-2208

QQ咨询

920796682

微信咨询

13764908986

旺旺咨询

caomingcsdn

上海明帮信息科技有限公司保留所有权利 业务咨询热线:400-661-2208 手机: 13764908986
业务咨询热线:400-661-2208 手机: 13764908986 上海明帮信息科技有限公司保留所有权利

沪ICP备14048644号

请选择服务
立刻预约
首页 咨询 短信 电话