Many people find the bottom navigation bar of their applets particularly unappealing, and choose to customize it for the sake of aesthetics, and are stuck with it ever since. In fact, the real reason is the improper image processing of the icon (to put it bluntly, the front end and the design are too poor), resulting in thick lines and improper spacing.
In addition to applets, apps developed under the UNI-App framework can also be adjusted as described in this article
Example effect source: uniapp-extend: UNI-app plugin/template sharing
Go to the topic of this article, the correct way to do the bottom navigation bar (tabBar) icon. Take a look at the comparison image below, downloaded from iconfont.
A screenshot of the actual effect not processed according to official requirements
Screenshots of the actual effect that has been processed according to official requirements
Through the above picture comparison, the same picture, according to the official standard after processing, whether the picture clarity, improper spacing problems have been significantly improved.
Thumbnail preview before image processing
Thumbnail preview after image processing
After the comparison, begin to talk about the processing method of the picture
- The standard size of the image is 81px * 81px, which is clearly explained in the official document. You can refer to the description of the iconPath attribute in the global configuration document of wechat applets.
- In order to maintain good spacing, it is good to set the content area of the image to 60px, with a margin of 10px for each of the four directions.
Resize the image in the same way as above, and you will find that the lines of the icon will become clearer.
Author: Huanghe Ailang QQ: 1846492969, email: [email protected]
This article is original, copyright belongs to the author, please indicate the original link and source.