做网页或App界面时，折叠面板用得挺多。比如常见FAQ页面、商品详情的参数列表，点一下展开，再点一下收起来。这时候，图标的方向就特别关键——它得让人一眼看懂点完会往哪开。
为什么方向感这么重要
用户没耐心猜交互逻辑。你放个箭头朝右的小图标，他下意识觉得是“展开更多”；如果点开后内容往下铺开，但图标还是朝右，就会有点懵。反过来，箭头朝下，更符合“内容要掉下来”的视觉习惯。
举个生活里的例子：地铁站的楼梯指示牌。往上走的箭头是向上的，往下的是向下的。没人会把这两个搞混，因为方向本身就是信息。UI里的图标也一样。
常见的图标方向设计方式
最常用的还是箭头，通过旋转来表示状态：
- 未展开时：箭头指向右（▶）或向下（▼）
- 展开后：箭头变成向下（▼）或向上（▲）
从体验角度，我更推荐用上下方向变化。因为折叠面板展开的内容通常是垂直向下延伸的，配合▼变▲，动效更自然。
代码里怎么实现这个效果
用CSS控制图标的旋转，配合JavaScript切换类名：
<button class="accordion-trigger">
点击展开
<span class="icon">▼</span>
</button>
<div class="panel">
这里是隐藏的内容
</div>.icon {
transition: transform 0.3s;
}
.accordion-trigger.active .icon {
transform: rotate(180deg);
}点击按钮时，给trigger加一个active类，图标自动翻成▲，用户立刻知道“这东西能收回去”。
用加减号也行，但有局限
有些设计用+和-代替箭头。+表示可展开，-表示已展开可收起。逻辑也通，但在移动端小屏幕上，+/-不如箭头直观，尤其对年纪稍大的用户来说，“加号”和“展开”之间没有直接联想。
动效让方向更明确
光改图标还不够，配上展开收缩的动画，体验立马不一样。比如内容慢慢滑下来的同时，图标缓缓翻转，两个动作同步，大脑很容易建立“箭头朝下＝内容下来了”的关联。
别小看这一点细节。就像开关灯，带声音的按键总觉得更“有反馈”。UI里的微交互，也是同样的道理。