一、什么是画线工具

画线是股票技术分析中非常重要的一种工具，是新股民进入股市后学习成长道路上的一门必修课。相比基本面要深入研究公司一大堆财务数据和行业未来发展前景来说，画线是新手更容易上手的股票分析工具，在实战交易中实用性更强，绝大多数在决策股票买卖点或预估大盘具体点位的时候，本质都会用到画线相关的理论。

每一根K线代表着当天市场多空双方的博弈过程，多根K线连在一起就形成了股票的长期走势，认真观察我们是可以在K线图中找到某些特定规律，使用画线工具在K线图中将其刻画出来，就形成了例如波浪形态、上升/下降轨道、支撑压力位、黄金分割等辅助线，以此来帮助我们更高效准确的做出买卖决策。

使用画线工具来分析股票十分的方便，对投资也是十分重要的。但是对于新手股民来说，怎样使用股票画线工具是一个难题。这里牵涉到两个方面，如何设计画线工具更易于使用，以及投教让新手股民学会如何使用画线工具。

二、竞品做法情况摸排

在证券领域画线工具由来已久，各家券商或平台也都做了很久。对于这种成熟功能，我们也去摸排竞品看看已经实现的基础上是否仍有进步空间。盘点市面上几款主流证券产品，带有画线工具的APP：

主要发现在画线过程和手势操作上，各家做法不尽相同。画线过程大多依靠引导，仍保留“画”这个动作。但实际操作时候我们发现，“画”只是非常小的一步，而用户大多数时候都是在“调整” 。而手势操作更多与K线区本身的手势耦合性非常强。在这两点上或许可以是小突破口。

三、如何设计一款画线工具

在个股详情页中，点击设置，在弹出面板中选择画线工具则进入到该功能。我们提供了五种线性，包括直线、斜线、轨道线、矩形线、黄金分割线，同时提供了针对线条的编辑操作，包括颜色、粗细、隐藏、锁定和删除能力。

界面中我们划分两个区域来分别承载功能和编辑能力。

1. 取消 “画” 的过程 – 点击线条直接出现

在体验竞品的画线功能中，我们发现“画”的过程格外繁重。虽然竞品也提供了很好的引导过程，用户在使用过程中的每一步都知道自己要做什么，但仍然需要几步操作才可以完成“画线”过程。如果线型复杂，那么需要点击的次数则更多。

而实际用户使用时，刚开始的画线过程并不能很精准地绘制到想要的地方，仍然需要通过后续精细的调整才能将线段调整到确切的位置。对于新用户和复杂线型来说，有时候甚至并不确定画出来的线型是怎样显示，需要多次尝试绘制到对的位置。

有了这个发现，我们对流程做了一步到位的精简，干脆直接跳过“画”的过程，让用户节省操作的同时，也可以直接看到线型如何，方便下一步的精细调整。

2. 为 “调整” 做准备 – 最少的操作区域控制线条

针对线条的调整操作一是多次，二是精准。调整操作一般分为针对节点的操作调整打点位置，以及拖动整个线段调整框选位置。K线区本身还有其他点选操作，如十字线展示更多股价信息，以及信息标注等，画线相对于十字线来说属于非高频操作，所以尽可能减少对原有区域遮挡，采用拖动线条边框即为响应区域的方式。

精准调整时，采用放大镜和吸附能力辅助用户，帮助用户识别蜡烛图细节，并精确定位在对应的股价位置上。

（本期暂未上线，后续版本更新）

3. 体系化颜色思考

在自选股品牌颜色体系下，结合证券业务属性 / K线绘图场景，提出配色解决方案。

1）分析K线场景信息展示结构，抽象出视觉层级关系，推导出新配色方案

K线图信息大致划分为指标图形 / 主图形 / 辅助层，对应视觉层级划分彩色高层级 / 灰色低层级。在彩色系中，根据HSL颜色模型进行感官明度划分，分为低明度（L50～L60）高明度（L60～L70），在白皮肤下明度越低视觉层级越高。

画线工具主要的使用场景是围绕K线图进行标记，辅助用户进一步分析判断，所以从信息层级上被划分到主图形层级。提取主图形标准颜色“红 / 绿 / 蓝”，并考虑照顾色盲、色弱用户，衍生出“橙 / 灰”，基于主图形颜色明度标准（L40～L60）进行微调，衍生新的配色方案。

2）验证多色相差异性，设定默认颜色顺序

画线图形与主图形的关系主要为相互叠加，为了验证多色相颜色叠加的感知效果，我做了色相差异验证的实验（其中颜色的差异 Delta E 要大于 30，用户才会有明显差异感知，且 Delta E 差异越大，感知越明显）从实际应用场景来看，整体符合识别标准。

（颜色展示 – 激活态）

（颜色展示 – 默认态）

大多数用户操作上是比较“懒”，不会主动修改颜色，除非有明显的识别困难。所以我根据实际应用场景，调整了默认颜色顺序（橙 / 蓝 / 红 / 绿 / 灰）。

橙色：在日K / 分时图（后续拓展）这两个核心绘图场景均都有良好的识别效果。

蓝 / 红 / 绿色：保留主图形颜色，即使画了很多辅助图形，做了很多标记，画面也会相对和谐。

灰色：考虑到一些对颜色不敏感的用户，增强画线工具可用性。

（最终方案）

4. 图形分类标准

画线工具整体分为两类：

一级分类：代表抽象图形（直线 / 斜线 / 轨道线 / 矩形等）帮助用户快速筛选类型；

二级分类：进一步细化图形（水平线段 / 水平线 / 斜线段等），帮助用户细化思路。

5. 建立热区操作标准

针对画线工具，我们统一了热区的响应规范，强化用户操作感知。

（交互热区标准）

（画线图形汇总）

6. 布局位置思考

分析横屏交互难易程度，根据用户行为动线，设计画线工具功能区布局，提升操作易用性。

（横屏操作热区图）

（用户操作行为）

（最终方案）

四、使用画线工具 – 投教Tips

1. 矩形线为例

常用于震荡中的股票，股价不会始终在上涨和下跌趋势中，当股价处于长期的震荡区间时，我们可以利用矩形线画出震荡区间，可以在波动中低卖高买赚取差价，也可以作为长期观察的依据，当股价突破震荡区间后，往往会出现一轮较大的上涨或下跌到趋势行情，抓住时机入场往往会获得不错的收益。

拿大家最熟悉的00700为例：

经过一轮下跌后，股价并没有立刻反转形成上升趋势，而是在这里长期的上下震荡，21年8月～22年3月腾讯形成了一个非常完美的矩形箱体震荡，我们使用矩形线将下边缘移动到1，2的位置，上边缘移动到3，4的位置，就可以画出一个矩形的震荡区间。

此时我们有两种策略可以去操作：

1）震荡做波段差价

股价触碰矩形下边缘，买入做多，当股价反弹触碰矩形上边缘时，平多单反手卖出做空，当股价再次回调到矩形下边缘，平空单再买入做多。

腾讯在这段时间的箱体基本底部在400元，箱体顶部在500元，有20%左右的振幅，只要我们能抓住规律做到一两次，那利润也是相当可观的。

2）等待做突破

如果做突破那我们就只观察不操作，股票不可能永远在震荡，迟早一天会选择向上或向下突破箱体，我们不做预测只做应对，当突破箱体选择方向的那一天，立刻顺着方向买入即可，突破后短期的波动会很大，资金利用率会非常高，做完止盈就去埋伏下一只股票。

腾讯在22年3月4号当天跳空低开，在这里留了一个缺口，同时破了维持半年的箱体，进入了一轮快速下跌，在这里应该直接开空单，股价快速从400跌到了300，止盈位300的选择其实拉长周期用画线也是可以预判到的，这里就不展开讲了。可以下载腾讯自选股App学习各类画线工具使用，下载二维码附在文尾。

2. 智能画线

在整个画线功能设计过程中，我们也在思考对于新用户如何使用画线工具最容易上手。每一种线型都对应不同的作用和场景，如何组合搭配能快速上手？在游戏中我们获得灵感，铭文出装对于新玩家也是难以上手，但是可以提供大神搭配直接选择。画线工具也可以借鉴参考，于是推出智能画线，帮助用户快速获取趋势线，压力位支撑位。

未来也可以结合KOL或者社交关系链分享能力推出更多智能画线搭配，让操盘更飘逸。

五、总结

画线工具是投资分析的常用工具之一，我们的一些思考希望能给大家提供帮助。想要了解更多画线工具相关内容，想要更多教程学习使用画线工具，欢迎大家下载腾讯自选股App试用，有任何问题可以随时联系小编。在这里也感谢证券产品行情团队对本文的大力支持。

最后的最后，投资是门课，需要不断学习精进，对市场时刻保有敬畏之心，还是那句老话，投资有风险，入市需谨慎。也欢迎大家来多多探讨，共同解锁财富密码。

原创设计团队：腾讯金融科技证券产品设计中心

腾讯金融科技证券产品设计中心，主要负责腾讯自选股的产品体验、品牌传播、活动运营等工作，涉及App、公众号、小程序、桌面端等不同场景。团队由产品体验、视觉设计、品牌设计、多媒体等不同专业的小伙伴组成，我们坚信“人人都是潜力股”，用专业陪伴用户成长，用有情感且简洁的体验设计，打造用户信任的平台产品。让每一个人，乐享金融的美好。

推阅

荐读

《和平精英》机甲主题设计 —— 与高达并肩，披甲上阵！

第一届TDW，你还记得吗？第七届TDW 2022即将来袭！