![UI图标手绘88例](https://wfqqreader-1252317822.image.myqcloud.com/cover/474/35148474/b_35148474.jpg)
上QQ阅读APP看书,第一时间看更新
11 退款图标设计
退款图标在购物类App中较常出现。我们在使用购物类App的过程中,如果希望退货,通常会点击“退款”按钮,并向商家提交退货的相关信息,此时订单会变成“退款中”状态。
![54601-00-32-1](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-1.jpg?sign=1738948624-BCbTsWAjJc4acJST1i1SBWVhGZimF9us-0-d8d834923687144d81fdd48aea4e3e74)
视频演示
◎ 元素提炼
“退款”一定与钱有关,钱可以用“¥”符号、“$”符号及纸币样式等表示。在退货或换货时,顾客需要将原产品寄给商家,因此在很多退款图标中,我们可以看到其使用了箭头元素表达“交换”的语义。联系售后服务人员可以解决售后问题,说明用户在网店里消费是有保障的,所以有的退款图标会用盾牌元素表达“可信赖”的语义。
![54601-00-32-2](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-2.jpg?sign=1738948624-msBvqzYpjOPilx1iNhAirVyteemoV6Wc-0-96c60c3ecbdfcde8aa1cec5b61d6983e)
◎ 结构分析
这个图标由两个箭头组成的圈和一个“¥”符号组合而成。其中,圈表示该内容有一定的范围,圈上的两个箭头有“金钱进出”的含义,“¥”表示“金钱”。
◎ 设计思路
图标正中间出现的“¥”符号为左右对称样式,并用直线概括其形态。箭头的位置在45°的倾斜线上,两个箭头不衔接。同时,图标的右下角采用了风格化虚线,可以增强图标的细节感。
◎ 绘制过程
01 定出外轮廓和“¥”符号的位置和大小。
![54601-00-32-3](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-3.jpg?sign=1738948624-AtYTyvlFbG2fHZu8yeX4MZRvuYS9dOVY-0-5b2b40192663f0e00e6b20456ea351b7)
02 绘制出外轮廓所在的圆。
![54601-00-32-4](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-4.jpg?sign=1738948624-i1crv2HnnEpBXVKrah0ssV41vTYLA1hR-0-48c6615b1ff70a863ccd1c1a658da97f)
03 在圆上添加两个直角箭头,同时在左下角和右上角分别擦掉部分线条,留出箭头之间的空隙,并在右下角做成风格化虚线。
![54601-00-32-5](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-5.jpg?sign=1738948624-GPS0PmAd1PZy5KTQMpVSdjkxl5OMF0q8-0-21cdf86d278b0f5c449de7c77b9521ce)
04 根据之前定好的规范画出“¥”符号。
![54601-00-32-6](https://epubservercos.yuewen.com/5DA358/18745437801207606/epubprivate/OEBPS/Images/54601-00-32-6.jpg?sign=1738948624-JFY9zAzmtBduCBmDOeQfCwuBNcZOkQsQ-0-afe68ec471f48a12dadd5361ddcf9e81)