排序算法可视化 - 微信小程序

作者: Jacob_Jiang | 来源:发表于2019-11-01 20:34 被阅读0次

作为一个程序员，你不得不接触的除了数据结构那就是算法了。算法是一个问题的数字化解决方案，在编程当中，关于排序问题的算法少说也有几十种，今天我们来聊一聊微信小程序 百万工具箱 中的 排序算法可视化 工具吧！

首先排序算法分为 内部排序 和 外部排序。
内部排序指的是待排序列完全存放在内存中所进行的排序过程，适合不太大的元素序列。在小程序中，我们讨论的都是属于内部排序；
而外部排序主要考虑的是 I/O 问题，实际排序所用的算法其实也是内部排序，利用归并算法，把各个有序片段合并，感兴趣的小伙伴可以自行查阅资料，在此不做展开。
这里列举较为经典的一些排序算法，这些算法在小程序内部也一一实现了。

内部排序脑图

测评

简单的介绍之后，我们就来评测一下百万工具箱里的排序算法可视化工具吧~

主界面 - 设置
主界面采用了极简的设计，突出重点，引导用户操作，降低用户首次学习和使用的成本。

生成数列面板
面板使用了弹出层的效果，用直接的方式引导让用户输入，同时采用了圆角蓝边框的设计，能够和主页面的基本样式呼应，在视觉越来越挑剔的今天，许多用户是不会再接受直角无边框的设计。整体的蓝白颜色组合十分地融洽，浅灰色的提示，温馨却不碍眼。

主界面
在引导完用户输入之后，界面的元素变得更加丰富，为了降低用户的的复杂感，我们做了两点措施，

添加步骤引导。通过 ① ② 两个步骤让用户明确了解流程。

采用折叠设计，把排序算法的内容隐藏，当用户点击下拉图标的时候，显示更多内容。

排序方法 - 展开
展开内容介绍了排序算法的基本属性，如复杂度、稳定性等，可以提供用户对该排序量化的尺度
对于动画延迟的设计更是凸显人文关怀，可以选择关闭排序的动画，直接显示结果。也可以让用户手动操控排序的快慢，不仅在开始排序前，在排序中也是随时可以修改动画延迟的大小。
在排序中也可以放大缩小查看每个细节，在一些数列数列比较大的情况下可以使用，因为屏幕的像素点已经装不下，为了保证用户观感，这是当下最好的方案。
在排序中放大缩小查看细节