可视化设计
→ 可视化设计
可视化设计
上传时间：　来源：
第一篇:可视化设计计算机仿真和可视化设计
——基于LabVIEW的工程软件应用
陈洁华 张文艺
安徽工业大学建筑工程学院
蔡建安教授 工作室
环境科学论坛用演示文稿
? ? ? ? ? ? ? ? ? 1 2 3 4 5 6 7 8 9 LABVIEW概述 LABVIEW模板简介 创建VI程序 LABVIEW结构 LABVIEW 数据类型 图表及图形 字符串和文件I/O 数据采集 工程仿真和设计常用编程技法
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LABVIEW概述 概述
? 1.1 由虚拟万能 材料试验机认 识虚拟设备 ? 1.2 虚拟设备 （VI）的构造 ） 平台
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LabVIEW概述 概述
? 本章介绍了图形编程语言LabVIEW和虚拟仪器（设 备）的概念，学习要点为? 虚拟仪器（设备）的概念、应用，和仿真实验与可 视化设计； ? LabVIEW系统使用的执行文件和目录； ? VI的三个部分：程序前面板、框图程序和图标/连接 器； ? LabVIEW的下拉和弹出菜单的概念、功能和使用。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
演示虚拟材料试验机及其实验
基于LabVIEW的程序设计
环境科学论坛用演示文稿
启动虚拟实验
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LabVIEW环境
? ? LabVIEW.exe执行程序，用于启动LabVIEW。vi．1ib目录：该目录包含Ⅵ库，如数据采集、仪器控制和 分析Ⅵ。它必须与LabVIEW可执行程序在同一目录下。不 要改变vi．1ib目录的名称，因为LabVIEW启动时要查找该 目录。如果改变此名称，就不能使用众多的控件和库函数。example目录：该目录包含许多Ⅵ示例，这些例子示范 LabVIEW的功能。user.1ib目录：用户创建的Ⅵ保存于该目录并将出现在 LabVIEW的FunctionsPalette(函数选项板)上。instx.1ib目录：如果希望用户仪器驱动程序库出现在 LabVIEW的函数选项板上，应将其放置在该目录下。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
? VI包括三个部分：
– 程序前面板 – 框图程序 – 图标/连接器
基于LabVIEW的程序设计
环境科学论坛用演示文稿
File文档菜单
New VI New… Open… Close Close All Save Save As… Save All Save with Options Revert… Page Setup Print Print Window… VI Properties Recently Opened Files Exit 创建新的VI 打开对话框选择要创建的文件类型 打开现有的VI 关闭启动的窗口 关闭所有窗口 保存当前 VI 将当前 VI另存为新名字 将VI的备份另存为新名字 定制保存 恢复VI到上次保存的版本 编辑打印机设置 打印Ⅵ组件的选项 打印窗口板 访问Ⅵ属性对话框 快速打开最近访问过的档 退出
基于LabVIEW的程序设计
环境科学论坛用演示文稿
Edit编辑菜单
Undo Redo Cut Cope Paste Clear Find… Show Search Results Customize Control Scale Object With Panel Set Tabbing Order Import Picture from File… Remove Broken Wires Create SubVI Run-Time Menu… 撤销刚刚完成的操作 恢复被撤销的操作 消除选中的对象并将其放置在剪贴板 上 复制选中的对象并将其放置在剪贴板 上 将剪贴板备份内容置入启动窗口中 删除选中的对象 查找VI、其它对象和文本 显示查找结果并访问列表中的每—项 修改当前选择的前面板控件对象 选中的前面板对象与窗口同比例缩放 设置前面板对象顺序 将图形文件导入LabVIEW剪贴板 删除所有错误连线 将选中的框图对象转换为SubVI 为当前VI创建用户运行时菜单
基于LabVIEW的程序设计
环境科学论坛用演示文稿
Operate操作菜单
Run Stop Suspend when Called Print at Completion Log at Completion Data Logging ? Make Current Values Default Reinitialize All To Default Change to Run Mode 执行VI 停止执行VI 调用VI时，暂停执行 打印VI前面板 将前面板数据记录写入文件 显示数据记录选项 设置当前值作为控件和指示器的默认值 将所有的控件和指示器设置为默认值 在运行与编辑模式之间切换
基于LabVIEW的程序设计
环境科学论坛用演示文稿
Tools工具菜单
Measurement & Automation Explore… Instrumentation ? Data Acquisition ? VI Revision History User Name… Edit VI Library… Internet Toolkit ? Web Publishing Tool… Advanced ? Options… 配置仪器和数据采集硬件 访问仪器驱动程序网 访问DAQ通道浏览器和DAQ方案 向导 编制当前VI的修订记录 设置和改变LabVIEW用户名 编辑当前VI库的内容或创建新VI 访问Internet工具包 访问Web发布工具VI 访问批量编译、VI矩阵及其它特性 定制LabVIEW应用的外观和特性
基于LabVIEW的程序设计
环境科学论坛用演示文稿
Browse浏览菜单
Show VI Hierarchy This VI’s Callers This VI’s SubVIs Unopened SubVIs Unopened Type Defs Breakpoints ? ? ? ? 访问VI层次窗口 访问所有调用当前SubVI的VI列表 访问当前VI的所有SubVI列表 访问当前中所有未打开SubVI列表 访问当前VI中所有未打开类型定义的列表 搜索并显示当前VI断点
基于LabVIEW的程序设计
环境科学论坛用演示文稿
Windows窗口菜单
Show Diagram Show Controls Palette Show Tools Palette Show Clipboard Show Error List Tile Left and Right Tile Up and Down Full Size … … 在面板和框图窗口间切换 显示控件选项板 显示工具选项板 显示剪贴板的内容 显示错误对话框 并排显示前面板和框图 上下显示前面板和框图 最大化活动窗口 …表示列出所有打开的前面板和框图 窗口
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LabVIEW基本演示
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LABVIEW模板简介 LABVIEW模板简介
2.1概述 概述 2.2工具模板 工具模板(ToolsPalette) 工具模板 2.3控制模板 控制模板(ControlsPalette) 控制模板 2.4功能模板 功能模板(FunctionsPalette) 功能模板
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LabVIEW模板学习要点
? 窗口顶部工具栏 窗口顶部工具栏包括：运行、字体选择、排列调整和叠放次 序等操作按钮； ? 工具模板 工具模板提供了编程使用的创建、修改和调试VI工具，在构 建和编辑VI时应首先确定选择了正确的工具； ? 控制模板 控制模板服务于前面板，用于添加输入控制和输出显示。每 个图标代表一个子模板。常用的有：数值、布尔值、字符串、 数组和群、列表、图文环、图形信号、输入输出和修饰等子 模板； ? 功能模板 功能模板服务于框图程序，每个图标代表一个子模板。常用 的有：结构、数值运算、布尔逻辑、比较运算、字符串运算、 数组和群、时间、文件、输入/输出等子模板。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
窗口顶部工具栏
? 包括? 运行按钮、连续执行按钮、停止按钮、暂停 ／继续按钮，字体环。? 排列调整环，间隙描述环，位置次序调整环。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
框图程序窗口工具栏
? 高亮度执行按钮，在是否选择高亮度模式间切换，执行程序 时可以在框图程序中观察到数据流动。? 单步通过按钮，进入单步模式时，程序单步通过一个节点并 停在下一节点上，同时它不停地闪烁，表示当前节点准备执 行。? 单步进入节点按钮，再次单击此按钮，程序单步进入循环、 子VI等节点。通过单步进入节点，可以单步执行节点内的程 序。? 单步退出节点按钮，再次单击此按钮，程序单步退出循环、 子Ⅵ等节点。通过单步退出节点，可完成单步通过节点功能， 并进到下一节点。? 警告指示器，当Ⅵ程序存在潜在问题时，就会出现这个警告 指示，但这并不因此而引起Ⅵ不能执行。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
工具模板(ToolsPalette) 工具模板
? ? ? ? ? ? ? ? ? ? 操作工具 选择（位置）工具 标签工具 连线工具 对象弹出菜单工具 平移工具 断点工具 探针工具 颜色提取工具 颜色工具
基于LabVIEW的程序设计
环境科学论坛用演示文稿
控制模板(ControlsPalette) 控制模板
? 数值子模板：包含数值的控 制和显示。? 布尔值子模块：逻辑数值的 控制和显示。? 字符串子模板：ASCII码字符 串和路径的控制和显示。? 数组和群子模板：复合型数 据类型的控制和显示。? 列表子模板：各类列表的控 制和显示。? 图形子模板：显示数据结果 的趋势图和曲线图。? 图文环（Ring）：控制和显 示菜单环和文字列表栏、图 像列表栏的选型。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
控制模板(ControlsPalette) 控制模板
? 信号的输入输出子模板。? 路径和参考名(Refnum)子模板文件路径和各种标识的控制和显示。? 老版本子模板，列举老版本中的显 示控制件。? 对话框子模板：用于输入对话框的 显示控制。? 修饰子模板：用于给前面板进行装 饰的各种图形对象。? 控件容器库子模板：用于操作OLE、 ActiveX等功能。? 调用存储在文件中的控制和显示的 接口。? 用户自定义的控制和显示。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
功能模板(FunctionsPalette) 功能模板
? 结构子模板：包括程控结构命令，例如 循环控制等，以及全局变量和局部变量。? ?数值运算子模板：包括各种常用的数 值运算符，如“＋－×÷”以及各种常见 的数值表达式，如+1运算；还包括数制 转换、三角函数、对数、复数等运算， 以及各种数值常数。? ? 布尔逻辑子模板：包括各种逻辑运算 符以及布尔常数。? ?字符串运算子模板：包含各种字符串 操作函数、数值与字符串之间的转换函 数，以及字符(串)常数等。? 数组子模板：包括数组运算函数、数 组转换函数，以及常数数组等。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
功能模板(FunctionsPalette) 功能模板
? ? ? ? ? 簇子模板。包括簇的处理函数， 以及簇常数等。比较子模板：包括各种比较运算函 数，如大于、小于、等于。时间和对话框子模板：包括对话 框窗口、时间和出错处理函数等。? 文件输入/输出子模板：包括处 理文件 I/O的程序和函数。? “选择…VI子程序”子模板可以选择一个VI程序作为子程序 （SubVI）插入当前程序中。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
虚拟万能材料试验机组装
基于LabVIEW的程序设计
环境科学论坛用演示文稿
虚拟万能材料试验机组装
基于LabVIEW的程序设计
环境科学论坛用演示文稿
3.1 3.2 3.3 3.4
创建VI程序 创建 程序
实例体验虚拟仪器的建立过程 虚拟仪器的编辑 框图程序的构成元素 子VI的建立和使用 的建立和使用
基于LabVIEW的程序设计
环境科学论坛用演示文稿
3 学习指导
尽早投入编程实践对学习LabVIEW至关 重要，在跟随本章进行编程实践时体 会VI的创建、了解VI的组成，掌握编 辑修改方法。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
? 建立虚拟仪器就是根据功能目标创建对应的仪器面 板和框图程序，需要了解控制、功能模板上不同图 标的用途； ? 仪器面板设计重在控制和对话，框图程序重在实现 正确的相互关系； ? 掌握虚拟仪器编辑技术，熟练使用工具模板的各种 工具，是编程和调试VI的关键； ? 框图程序由节点、端点、图框和连线四种元素构成， 组合出相互的逻辑关系； ? 学习子VI的建立和调用，这在建立一个高质量的VI 时十分必要。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
[例] 3.1 计算空塔流速 例
首先启动LabVIEW系统程序，选择 New VI，屏幕出现一个无标题的VI前面板窗 口。本例中，我们有两个可控制量（自 变量）水量控制和滤塔直径；并有两个 显示量（因变量）滤塔面积和流速。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
[例] 3.1 计算空塔流速VI构建 例
基于LabVIEW的程序设计
环境科学论坛用演示文稿
LabVIEW 7.1计算空塔流速VI构建
基于LabVIEW的程序设计
环境科学论坛用演示文稿
虚拟仪器的编辑
? 选择对象。选择对象。把 Positioning tool（位置工具)放在准备选
择的对象上，按住鼠标左键，该对象的轮廓边上出现流动 的虚线，表示对象被选中。如果要选择一个以上的对象， 按住Shift键不放，然后用鼠标单击每一个想要选择的对象。也可以用位置工具，在窗口空白处按住鼠标左键拖出一个 虚线的矩形框，把想要选择的对象都包含在其中，这些对 象即被选中。
移动对象。移动对象。把位置工具放在对象上，按住鼠标左键不放，
拖动鼠标，可以将对象转移到窗口中的任意位置上。
删除该对象。
删除对象。删除对象。选中对象，然后按Delete键(或选择Edit&&Clear选项)，即可
基于LabVIEW的程序设计
环境科学论坛用演示文稿
虚拟仪器的编辑
? 复制对象。复制对象。先选中对象 (鼠标左键按下不放)，同时
按Ctrl键，然后移动鼠标把对象复制到任意位置上， 也可以用Edit菜单中的copy和Paste来复制对象。
选择和删除连线。选择和删除连线。把位置工具移到线段上，单击鼠
标左键，即选中线段(如果有数段线段在交汇处相交， 则单击数下鼠标，即选中该数段线段)；按Delete键， 即删除该线段。
连线的伸缩性。连线的伸缩性。通过位置工具，可以把单个或一组对象移动到新的位
置，而连线跟着伸缩。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
虚拟仪器的编辑
标数据类型不匹配时，会出现虚线(不良连线)。要删除一 条不良连线，用位置工具单击不良连线后按Delete键。如 果要删除框图程序中所有的不良连线，可以选择 Edit\Remove Bad Wires(移去不良连线)(或按Ctrl+B键)。改变文本的字体、风格和尺寸。改变文本的字体、风格和尺寸。用标签工具选择文 本，通过工具栏中的Font ring可以改变标签框中任何文本 的字体和尺寸。改变对象尺寸。改变对象尺寸。用位置工具把光标移到对象的四角处， 此时会出角形图示，拖动它便可以改变对象的尺寸。改变颜色。改变颜色。从工具模板中选择颜色工具，并在正方形框 上单击鼠标，弹出调色板。选择一种颜色，然后单击对象， 便可以改变对象的颜色。注意颜色工具中上下两个正方形 框分别代表对象的前景色和背景色，调色板上的 T标志， 表示透明无色。
基于LabVIEW的程序设计
不良连线。不良连线。不良连线用虚线表示。例如，当源数据与目
环境科学论坛用演示文稿
[例] 3.2 不良连线及纠正方法 例
? 文件e3_2.vi 存放错误的 程序， ? 文件 e3_2_3.vi存 放订正后。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
框图程序的构成元素
框图程序由节点、端点、图框和连线四种元 素构成。LabVIEW有二种节点类型——函数节点和子 VI节点。函数节点是LabVIEW编译好供使用的。子VI节点是LabVIEW或用户的图形语言形式。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
框图程序的构成元素
? ? ? ? 端点是只有一路输入/输出，且方向固定的 节点。LabVIEW有三类端点——前面板对象端点、 全局与局部变量端点和常量端点。前面板对象端点是数据在框图程序部分和前 面板之间传输的接口。常量端点在VI程序框图中永远只能作为数据 流源点。。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
框图程序的构成元素
? 图框是LabVIEW实现程序结构控制命令的 图形表示。如循环控制、条件分支控制和 顺序控制等。连线是端口间的数据通道。数据单向流动， 不同的线型代表不同的数据类型，从源端 口向一个或多个目的端口流动。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
子VI的建立和使用 的建立和使用
? ? ? ? 子VI（SubVI）就是被其他的 VI调用的VI。可以将任何一个定义了图标和联接器的 VI 作为另一个 VI的子程序。构造一个子VI主要的工作就是定义它的图标 和联接器。在其他的 VI中调用子程序VI的过程就是将 定义了图标放入该VI的程序框图，并在主程 序中对子VI联接器进行外部连线。
基于LabVIEW的程序设计
环境科学论坛用演示文稿
图标编辑器的窗口
? 。可以用窗口左边的各种工具设计像素编辑 区中的图标形状。编辑区右侧的一个方框中 显示了一个实际大小的图标。? 联接器是 VI 数据的输入输出接口。? 通过选择 VI的端子数并为每个端子指定对应 的前面板对象以定义联接器。
基于LabVIEW的程序设计
第一篇:可视化设计信息可视化设计
Information visualization design
例如下图：关于中联重科 公司产品的色彩分析,就是运用减少文字的说明以色彩和数据线形式来展现该公司产品在不同系列产品所 采用的配色方案。相比大段文字描述或扩大产品形态的展现形式来说，更直接了当的看出公司在产品配色上面的侧重点。
从信息图形中可以看出，图表是以一定的数据作为依据来 分析了，所想要表现的并不是一个说明或思想，而是一个 数据分析信息。以圆，异色来区分校园面积的使用情况。与已往地图泡形式有明显区分。直观的传达出信息，展现 出华科不同领域使用面积的情况，从而看出学校对校园建 设的侧重点，更快的分析出哪方面有不足需要改进，有助 于领导者们调整华科未来的发展规划。相比近期流行的地 图形式，是一种挑战。更让人从真实面积感受到差异，当 然也许这不是最好的表现形式，还有很多不足之处。信息 图形化是一个无边的黑洞，等待我们继续创新与完善。
设计潮流变幻多端，朝秦晚楚。但是，信息的可视化表达的潮流却难 以阻挡的不断前进。像是很多的知名网站，例如Facebook ，USA Today， New York Times还有Google baidu甚至是奥巴马的总统竞选网站，信息 可视化图表已经成为传播大量信息的有力武器。大大小小的公司都通过信 息的可视化表达来打造他们的品牌、引导他们的受众以及优化他们的搜索 引擎以提高排名。常见的的表现形式有：地图 时间轴 网络图 树状图 矩阵图 热力图 标签云 散点图 气泡图 流程图 折线图 平行坐标轴 数据表 雷达图 插画 解 刨 说明图等等。众多的表现形式需要通过各种各样的手段来呈现，或纯 手工的组织设计，或通过程序算法来实现。然而两方面的研究在目前市场 行情来看都十分炙手。个信息研究所都马力全开，不断探究新型的表现形 式，希望在信息图形研究领域取得新的突破，有属于自己的一席之地.
设计一个信息可视化的图形并不同于设计一个网站、传单或者是一个小册子。创 造一个好的信息可视化表达形式是一种挑战，并需要异于常人的思维方式。思维方式 可以通过坚持一定标准的学习及理解数据可视化的系列练习获取。导演说：电影拍摄 规则是去展示，而不是讲解。信息的可视化表达也一样。任何一个好的信息可视化形 式都是基于数据的呈现。一个数据设计师，或许无法确定创意与最终的设计是否完全 的匹配，但是无论哪种形式，你都要创造出一种连贯的、原型的展示方式而不遗漏任 何信息。进行数据可视化的时候，一定要让读者的视线顺畅的在页面上移动，错误的配色 方式是一个阻碍。选择正确的配色能吸引注意力。在设计前考虑这些因素，合理的安 排你的不同的元素。如果一个页面的选色很困难的话，遵循三色法则是最适合不过的 了。不论怎样取色，一定要保持整体色调的凝聚力和平静感，让画面显得和谐。修饰简单图形表格的方式字体排版，可以创造也可以破坏一个设计，但是它不应 该成为信息可视化设计的一个瓶颈。一个可视化设计师经常性的充满能量并且异常兴 奋，但是也许很快他们便迷失在页面中去了。这常常导致决策的混乱。比如一些设计 师利用大号的字体去炫耀数据量的庞大，而不是通过信息的可视化表达来表现这些数 据。
在确定表现形式，非人工实现设计，而是要通过数字工具统计分析后 输出图形时。就需要设计者设计合理的输出合成的形式。例如下图 面对日益丰富的可视化数据分析工具。一些相关工作人员则设计出不 同的展现形式，来帮助用户更好的进行视觉风格的选择。
设计师在选择表现形式的同时一定要考虑到受众是否能够 很好的去接受和吸收信息，设计师需要了解视觉心理对用户浏 览时的影响。伴随着互联网的发展，对于优良设计的要求也越 来越高了。
自两年前希腊债务风波发生以 来，欧债危机一波三折此起彼 伏，近来呈现向欧元区核心国 家蔓延态势。作为债务危机重 灾区，欧洲已成为拖累未来全 球经济增长的最大单个不确定 因素。本文所讲述发表在纽约 时报上的一个对欧元危机的可 视化纵览。
了解文本数据中的主题演化是非常有用的，它 可以帮助人们快速知道海量文本中的关键主题， 了解相关领域的最新信息以及这些信息的变化 情况，也可以帮助人们分析这些变化的原因。因此，文本挖掘领域以及可视化领域的研究人 员都在主题演化方面做了很多工作，但是这些 工作基本上都是围绕着单个主题的演化，很少 有研究多个主题之间的合并与一个主题分裂成 多个主题的情况。因此这篇发表在InfoVis 2011的文章“TextFlowTowards Better Understanding of Evolving Topics in Text” 就提出了这样一种能够分析多个主题演化关系 的文本分析工具。
项目作者：淘宝EDP 项目简介：电子商务数据与社交网 络数据的结合。可视化技术：HTML5； JavaScript 可视化展现形式：气泡图; 流程图 数据来源：淘宝网 新浪微博
第一篇:可视化设计每一天，人们都淹没在信息癿海洋中。用户在主劢获取和被劢接受过程 中，都始终避免丌开一个“效率”癿诉求。在这信息海洋，用户目前面 对了什么样癿困境呢？ 1. 一些设计绅节癿 “隐藏式”、“折叠式”、“渐进式”设计消耗 了用户癿快速认知诉求； 2. 偏于复杂和庞大癿功能，给界面呈现带来了负担，加重了用户操 作映射癿错乱，让用户理觋也模棱两可； 3. 设计过多癿操作点击，用户手部肌肉丌停运劢，切换丌同页面去 查看； ?? 作为信息传达癿设计师，如何让信息更直观清晰、剔除丌确定性理觋， 是工作中癿重中之重。而“可视化”就是多种高效传递信息方式中癿一 种，对于信息可视化、视觉化、图形化，也成了设计圈热捧癿观点和研 究方向。
对于产品癿可视化设计，主要旨在借劣于图形化等直观手段，清晰有效 地传达不沟通信息，形成高效癿功能、使用映射，完成用户仸务目标。
为用户想完成癿仸务选择正确癿界面元素， 通过一种能迅速理觋和易于 使用癿表达方式，展现在页面上，降低用户癿认知负担和物理负担。大 概分为四个层次功能可视化、 结构可视化、 操作可视化、 控件可视化。
功能可视化：即确定需求优先级癿前提下，确保优先级高癿功能展现给 用户，让用户易于识别和查找，使设计有正确癿层次结构。用户对信息 层次癿理觋需要两个过程，首先是快速捕捉，其次是对具体内容更详绅 癿理觋。在快速捕捉阶段，其过程中时间跨度短暂，通过颜色、对比、 定位等运用，突出产品癿主要功能点。例如图 1 韩国著名门户/搜索引 擎网站 Naver 旗下癿 Naver Shopping，其产品定位即提供商品癿搜 索服务，通过搜索商品名称，可以按照商品类别列出几乎韩国所有癿大 型电子商务网站提供癿该商品链接。所以在界面上，用强对比色调突出 搜索功能和导航区。通过视觉化引导，让用户与注于核心内容，聚焦用
户视线癿焦点，在白色为主色调癿页面，视线会先看到强色调癿部分， 所以也可以用强色调来突出核心内容，让用户癿视觉聚焦在那里。
备注：买入页面输入区域可以参考 结构可视化：即采用用户易于理觋癿结构，让用户对于界面元素关系清 晰。如百度统计 3.0 癿搜索推广效果查看， 结构采用了漏斗癿图形方式， 达到真正癿图表于意，表达转化率癿概念，形象直观。
总结：查询方面癿结果，可以通过图表癿形式更容易展现给用户 流程可视化：即让用户在操作时丌要迷失方向，帮劣用户定位，避免丌 明确操作癿高成本。美国益智游戏网站 Lumosity，在建立定制化大脑 训练计划时癿流程时，顶部采用步骤轴癿图形化方式，丌仅用图标“红 圈”表明了用户所在癿位置，也用图标“对号”标明了用户完成了哪些 步骤，让用户对于整个流程熟悉。
控件可视化：由于控件是产品癿最小界面元素，是产品质量癿基础，所 以本文重点不大家分享基础控件癿一些可视化案例。
控件是创建界面癿主要构造模块， 是用户可不之交互以输入或操作数据 癿最直接对象。控件需要用户消耗大量癿注意力和鼠标操作，从可视化 觊度，示例以下四个元素癿设计区别控件元素一：单选框
单选框（Radio Button），又叫选顷按钮或单选按钮，它容许用户在 一组选顷中选择并丏只能其中一个时使用癿控件形式， 选顷之间彼此互 斥。图 4 某产品界面，控件单选框使用错诨，同时用户必须在脑中想象空间 位置，再转化为对应文字，点击两次，输入两次，才能完成。图 5 修改后采用图形化表达， 直观， 并丏减少用户癿点击次数 （一次） ； 当用户输入边距时，在图形中对应癿边距会出现劢态三觊，给予用户引 导，防止用户输错。
控件元素二：下拉列表控件 下拉列表（Drop-down List）相对于单选框，同时用于从一组互斥值 列表中进行选择一个选顷，丌同癿是下拉列表癿按钮数量通常较多。图 6 为新药品查询系统癿下拉列表筛选控件，通过药品形状、颜色、类 型等进行筛选，对于用户来说，认知成本较高，丌够形象化。
图 7Naver 癿医疗药品癿查找筛选控件，将品牌、药品形状、颜色、药 品材质、药面纹理等通过图形化表达，使信息更直观、形式更有趣，增 强用户癿认知能力，提升操作效率，集合了趣味性不实用性。一图胜千 言，但同时要平衡空间占用和页面加载成本等因素。
控件元素三：树形控件 树型控件是供用户浏览按分层方式排列癿内容，并可不这些内容互劢， 进行单选或多选癿控件。图 8 淘宝商城_厨房用具二级页癿树形筛选控件，比如用户要查找高压 锅，对于一般新手用户，会来回点击厨房/餐饮用具癿子分类，展开子 分类，然后扫视每行字是否有高压锅，直到确认找到。树形控件承载癿 信息越多，认知癿负担就会越重，浏览查找越困难。新手用户可能无法 完全理觋树癿布局， 只有当他们在对树操作一段时间之后可能会形成一 个关于其关系癿心理模型，成本较高。图 9 Naver Shopping_厨房用具二级页癿分类筛选，采用了图标加文 字癿形式，同样是查找高压锅，虽然是韩诧，但是恰当癿使用具象化图
标，使用户基本上看懂，可以缩短用户操作时间，让用户更快捷地找到 目标链接。对于中高级用户，对网站更加熟悉后，图标就更方便了。
不软件癿设计主要针对中间级用户癿丌同， web 界面设计需要针对新手 及初级用户。用户在网站上愿意为之所付出癿学习成本更低，更加缺乏 耐心，则 web 界面需要更直接，让用户认知过程更短。而文字本身并 没有视觉传达功能，恰当癿使用图标，把要表述癿功能可视化呈现给用 户，可以缩短用户操作时间，往往效果更好。但也要根据用户效率，否 则会成为鸡肋。控件元素四：列表视图 列表视图（List View）是一个显示顷目集合癿扩展列表框控件，用于通 过单选或多选癿方式，查看并操作一个数据对象集合。
图 10 SNS 常用癿好友分组和管理，采用列表癿方式，列表目录清晰， 但用户对其癿选择管理成本稍大，特别是对于批量管理复杂。
图 11 google+“圈子”，查看更直观，批量管理操作也更简单，通过 拖拽方式对用户分组，强调对好友癿少层级管理，保证页面简洁，让体 验变得有趣而可爱，更符合用户癿心理模型。
借鉴：券商选择、市价委托功能选择、币种选择等控件选择可以借鉴
总之，围绕着“快、明确、高效”癿信息传递定位，揭其根本从功能模 块、仸务流程、界面控件元素、信息承载等方面去提升体验癿有效性和 合理性，设计中根据目标受众癿需求、行为，合理运用可视化方式，使 产品更易用，提高用户体验。
····················