• 【访民情 惠民生 聚民心】驻村路上父女同行 2019-08-19
  • 国务院:2019年起全面供应国六标准汽柴油 2019-08-19
  • 浪潮孙丕恕从信息时代到智能时代 人工智能价值将爆发式释放 2019-08-14
  • “蝇贪”扑面硕鼠村官难禁 基层“一把手”违纪多发 2019-08-09
  • 我国首个百亿方页岩气产能基地揭牌 2019-08-07
  • 分手后前女友发来短信求教火锅蘸料配方 网友炸了 2019-08-03
  • 美官员航班确系被导弹击中 分析导弹轨迹 2019-07-23
  • 徐海东在周家岗设伏歼敌 2019-07-23
  • 凝神聚力,提气鼓劲,河南南阳福彩走进贫困村 2019-07-23
  • 第三届北京环保动漫设计大赛颁奖典礼7日举行 2019-07-15
  • 栗战书会见黑山议长布拉约维奇 2019-07-13
  • 夏日阳光舒适 大熊猫宝宝悠闲自得 2019-07-13
  • 山西晋中学院制定办法规范在线课程 2019-07-07
  • 便民再升级!海南推出支付宝查询住房公积金服务 2019-06-28
  • [大笑]一群老蚕的小萌们想阻挡大势?没门儿! 2019-06-28
  • 成都网站制作
    当前位置: 维彩视频双色球宝典 >新闻资讯 > 网站建设 > 如何让界面任务流程更清晰 ?向导式设计了解下!
    2018-08-29 18:04:13

    3d和值走势图:如何让界面任务流程更清晰 ?向导式设计了解下!

    向导式设计属于交互设计的常识,包括步骤条设计,引导标签等。本文从向导式设计的作用、使用场景、设计类型、需要注意的问题等,给你带来全面的基础科普。

    一、向导式设计是什么?

    维彩视频双色球宝典 www.tqxf.net 软件界面设计中的「向导式界面」这个术语源自英语中的「Wizard」一词。意思为「男巫、奇才」的意思;延伸意为「向导」。向导,顾名思义,就是能带领或指引别人到达目的地的人。在实际使用中,这种交互方式的确像一个向导一样,一步步地引领用户向前,把复杂的任务进行拆解并有步骤地完成。

    向导式设计也是流程设计的一种方式,这种方式通常目的性明确。在很多商业领域使用非常广泛,比如购物,酒店预订,银行业务等等,尤其适合新用户第一次体验产品时使用,让用户对产品使用和任务快速上手,节约时间,提升效率。

    二、向导式设计的主要作用

    1. 引导新手操作

    让新用户在最短的时间内了解产品/任务,明白如何快速上手使用。

    2. 纵观信息全局

    让用户操作时对整体流程可控,心里有底,可以提前预估操作/完成时间。

    3. 简化操作任务

    对复杂任务进行拆解,提升用户操作的效率,同时也降低出错率。

    4. 较少操作决策

    固定任务操作路径,节约用户思考&做操作决策时间,快速完成任务。

    三、向导式设计的使用场景

    一般情况下,标准向导步骤条的使用场景为:2-5 步比较合适。< 2 步,>10 步,使用是不合适的。因为 < 2 步没必要;> 10 步太夸张,会吓到用户,本能认为你的产品使用过于繁琐,拒绝尝试和使用。

    四、向导式设计的类型

    • 手风琴向导

    • 标准向导

    • 横向标准向导

    • 纵向标准向导

    • 弹框向导

    • Tab 栏向导

    • 标签向导

    五、向导设计类型案例场景分析

    1. 手风琴向导

    手风琴向导式设计类型,一般适用于 2B 类后台业务数据较多,任务指向性相对明确,流程基本固定。例如用户帮助文档以及 Q&A 的场景; PC 端页面的注册引导;电商网站的购物支付等流程。

    手风琴向导,除了可满足任务引导,步骤拆解,直观展示等作用;更主要的是能对大量的数据信息进行收纳整理,凸显信息层级的清晰度,并在收纳信息的同时节约页面空间,让页面更有节奏和呼吸感。

    2. 标准向导 – 横向向导

    横向标准向导也可以称为横向步骤条,这样表述大家比较容易理解。此类向导式设计是大家最常见的,也是最常规的一种横向向导的设计,主要作用是对复杂的任务进行拆解,按照固定顺序明确步骤,让用户对即将要操作的任务时间和内容有一个可控的心理预期。一般用户可以一目了然总览共有几步,目前每个步骤的状态(例如已完成/进行中/未开始),和自己当前的操作位置。

    目前很多行业内的组件库对横向步骤条的 UI 设计基本都采用以下表现形式(图片来源 阿里巴巴 TXD-AISC 组件库),只是在细节上有稍许的差异。

    具体差异主要表现在状态色彩的使用和上下图文的布局中。例如阿里-蚂蚁金服的 Ant Design 横向步骤条的设计图文布局为左图右文,这样设计的好处是,如果流程步骤相对较少时,文字也可作横向指向的一部分,避免页面太过空旷。同时 Ant Design 对步骤条的使用场景做了更多细分,除了简单的步骤条,还有迷你版和带图标的步骤条。

    除了上面标准的组件库中常有的步骤条样式,还有以下的常用样式,例如电商类购物和支付的场景,除了对已完成的状态进行确认显示,色块箭头的设计,向导指引性更强。

    类似上一个案例的 UI 美化升级版,其实功能原理都是相通的。

    除了上面相对比较简单场景的步骤条,其实在 2B 业务中还有相对比较复杂的步骤条的设计,具体对应的是复杂的业务场景,例如覆盖多产品线参与,多角色审批,包含父子步骤审批的业务场景,简单常规的标准向导式设计是不能够满足业务场景的,需要对简化版的横向向导继续深入拓展和优化。



     

    返回 BACK
    ?
    服务项目
    网站建设
    互联网开发
    微应用(微信)
    微信小程序
    APP定制开发
    400电话
    主机租用
    域名注册
    联系我们

    地址:成都市府青路二段 • 首汇观筑1栋28楼

    邮箱:[email protected]

    热线:18980803640 / 18190984800

    座机:028-61382296

    微信公众号 二维码
  • 【访民情 惠民生 聚民心】驻村路上父女同行 2019-08-19
  • 国务院:2019年起全面供应国六标准汽柴油 2019-08-19
  • 浪潮孙丕恕从信息时代到智能时代 人工智能价值将爆发式释放 2019-08-14
  • “蝇贪”扑面硕鼠村官难禁 基层“一把手”违纪多发 2019-08-09
  • 我国首个百亿方页岩气产能基地揭牌 2019-08-07
  • 分手后前女友发来短信求教火锅蘸料配方 网友炸了 2019-08-03
  • 美官员航班确系被导弹击中 分析导弹轨迹 2019-07-23
  • 徐海东在周家岗设伏歼敌 2019-07-23
  • 凝神聚力,提气鼓劲,河南南阳福彩走进贫困村 2019-07-23
  • 第三届北京环保动漫设计大赛颁奖典礼7日举行 2019-07-15
  • 栗战书会见黑山议长布拉约维奇 2019-07-13
  • 夏日阳光舒适 大熊猫宝宝悠闲自得 2019-07-13
  • 山西晋中学院制定办法规范在线课程 2019-07-07
  • 便民再升级!海南推出支付宝查询住房公积金服务 2019-06-28
  • [大笑]一群老蚕的小萌们想阻挡大势?没门儿! 2019-06-28
  • 通城黑仔爱唱歌二八杠 吉林11选5开奖号码 贵州11选5前2跨度 新浪彩票个人中心 福彩广东36选7 浙江快乐12带连坐标走势图 秒速飞艇开奖软件下载 天津11选5论坛 广西快3软件最新版 快乐10快乐10分钟开奖结果 时时彩龙虎和开奖视频 广西快乐双彩开奖統果 今晚全部彩票开奖查询 海南飞鱼中奖号码的真实规律 一片绿叶公式规律