• Table of Contents

I. User Products

1. WeChat Reader

已佩戴徽章在卡片上会有拟物的 V 字形状丝带

区分已获得和未活动状态，未获得状态展示轮廓

未佩戴的徽章在卡片上是条状的丝带

活动奖励不可佩戴的徽章，不展示丝带

Design Analysis

<aside> 🥇 Geometric border + metallic texture + dark background + light-colored graphics + metallic-textured numbers and text; displayed on a dark background.

</aside>

Distinguishes between earned and unearned badges

Element Extraction:

1. Frame Shapes:
   1. Frames utilize symmetrical geometric shapes: circles, pentagons, hexagons, shields, etc.
   2. Use geometric shapes to denote tiers, from lowest to highest: circle, pentagon, hexagon, heptagon, octagon, 24-sided polygon
   3. Special events (e.g., World Book Day) feature badges with unique shapes
2. Internal Design:
   1. Simple icons + numbers + text. Badges display achievement values and categories.
   2. Icon outlines, numbers, and text feature the same metallic finish as the border.
   3. Internal icons are filled with colors from the same palette as the background but in lighter shades
3. Status:
   1. Distinguishes between earned and unearned badges. Earned badges feature color fill and metallic-effect outlines.
   2. Unobtained badges display only the outline without color fill.
4. Finish:
   • Metallic finish, primarily gold and silver
   • Achieves a skeuomorphic style through effects like light, shadow, and gradients
   • Icons are filled with highly saturated colors
5. Interaction:
   1. Badges can be pinned (displayed next to user avatars), with distinct ribbon styles on cards indicating pinned/unpinned states

Motivation Dimensions:

Reading (duration, days, consecutive days, etc.), engagement, content publishing, monthly recurring tasks

2. Apple Watch

未获得徽章

特定活动徽章

好友互动徽章

好友互动徽章