1. Design process
Product Manager: Requirements, upload and download
User Research Department: software user experience, crowd classification, market research, and competition
Interaction Design Department: draw interactive prototype diagrams
① Reserve a place and lead the designer to design
②Note the level and connection relationship of the page
③Display the basic appearance of the page for review and modification
Visual Groups: Graphic, Web, Interface, Video
Front-end engineer
backend engineer
app: adaptation point and profit point
2. Icon Design
1. Icon classification
Silhouette icons (one-line icons): only shapes
Flat icons: shapes and colors
Skeuomorphic Icons: Shape, Color, and Texture
2D, 3D icons:
2D: Flattened but no projection
3D: Compared with the skeuomorphic icons, it has more realistic details and a more refined texture
2. Design process
Graphic Construction: Scale
Color fill: same color
Material addition
3. Layer Style: Drop Shadow
Style added:
One-sided effect: shadow
Double-sided effect: Bevel and Emboss
There are effects around: light
Floating effect:
Inline: inner shadow + shadow upper dark and lower bright
Outer floating: inner shadow + projection, light up and dark down
4. Icon unity problem
Shape: regular shape, irregular shape
Style: silhouette, flat, skeuomorphism
colour:
natural color: the natural color of things
Emotional colors: those with personal emotions that cannot be replaced by symbols in nature (audience, corporate culture, personal understanding)
Style: global light, generally 90°; individual light
3. Interface Design
1. Interface design method
①If the top bar has texture: the top and bottom are the same; if the top bar is white: the bottom bar is white/gray, the icon is a linear icon, and the icon is a color block after clicking to highlight; if the top bar is not white, the bottom bar is white /light grey
②Font
③ Internal picture display (reference value)
1:2 General homepage banner
4:3 Picture display of the text
Fibonacci: 1:1:2:3:5:8:13:...≈0.618 (Golden Ratio)
16:9 / 16:10 Human Vision Ratio
2. Plate type
The space should be ventilated, the distance between components should be unified, and the layout should be unified
3. The interface design is popular
SCS: Unique Shades simple color schemes
CS: cards (waterfall)
CF: content only content first
CD: circle design circle design
4. Interactive form
①List structure Bottom bar menu
②Side-sliding column, personalized APP (simple)
③Waterfall flow The content is single and the amount of information is large
④The carousel has less content and a strong sense of design
⑤ Jiugongge The content is clearly differentiated
5. Color matching
Background color: 70~80%
Main color: 15~20%
Accent Color: 5%
Secondary color: 5%
4. APP analysis
News APP:
watch the news
watch video
see the picture
Personal functions: share, comment, favorite, subscribe, weather, air quality
Software features: night mode, font size, offline download, clear cache
Social APP:
loading page: logo (reflects the positioning of the software)
color: blue
Software features (adaptability, profitability):
Adaptability:
Social (chat), Friends: add as friend, delete function, chat/history, personal settings
Add as friends: account search, nearby people (open location), advanced search, scan QR code, shake, address book
Delete function: delete traces, blacklist
Chat/History: Find History, Delete Records
Personal settings: avatar, signature, album, name, gender, hobbies (screening mechanism)
Profitability:
Functional positioning for software
Virtual stage: mutual exchange of virtual gifts, rankings, virtual mall, interactive games (contrast, software stickiness, increased interaction, extension of profit)
Physical stage: image packaging, image recommendation