Section 2

Design Guide


Personal work












Dark Mode

Directional Key Mode

Air Mouse Mode

Landscape and Portrait Modes

And More





















Color


As an important part of the 2.0 upgrade, the support of dark/light modes demands both design and development. By defining system color variables, the system now supports "one-click switching" across all pages.














Grid


Adopting a clean, unified grid system ensures logical structure and visual harmony. Appropriately increased spacing prevents interface overcrowding.









More Insights


>>>

Spacing
Optimal spacing creates rhythm in interfaces, delivering a pleasing experience. Just feels good!
Rounded Corners
Friendly rounded corners appear at every turn, all to frame a better center.
Brand Color
Seamlessly adapt different brand colors with “one-click switching”.








Text
Don't forget to add a space between Chinese and Latin/numeric characters — this is key!
Wording
From word choice to sentence structure, from capitalization to punctuation — say goodbye to messy wording!
Projection
Ready, go: Y:B = 2:3 larger one is lighter, smaller one is darker. Two layers of projection come in pairs.


























System Icons


Drawing insights from multiple design systems, 200+ icons with a unified design language exclusive to TV projects were made, along with drawing guidelines.













Teamwork

App Icon


Embrace the flat style while retaining the sense of dimension. Collaboratively drew icons for all system apps and modules.









Illustrations and animations


Provide drawing guidelines for devices, characters, decorative icons, and data visualization. Including effects like glow and reflection. Create illustrations and animations that meet the 2.0 style. Color usage should consider both light and dark modes.




Devices
Include TV, remote control, mobile phone, tablet, computer, etc.













Characters
Include full body movements and gestures, etc.









Decorative Icons
Typically used for functional cards









Data Visualization
Used in TV Manager for Scan, Clean, and Speed Test.
Scan
Health Score

Speed Test








More Insights


>>>

Colors support both light and dark modes
The illustration color considered both color modes. Ensuring a consistent look across different backgrounds.




Device Wallpapers
Colorful wallpapers for illustrated devices based on scenarios, achieving both harmony and versatility.
App Launch Screen
Create an immersive launch "ceremony" with the app icon.








Next Section