设计小总结
UI模块的设计细节展示，包括导航栏、banner、UGC头条、金刚区、瓷片区、列表流等
导航栏：
1. 搜索文字：28px
2. 图标文字：18px
3. 标题文字：36px（加粗）
4. 操作注释：32px
5. 文字层级字号对比大于4px（通过文本字重、颜色、字间距）
6. 搜索框尺寸：580*60px
banner：
7. Z轴拆分：背景层、文字层、模特层、点缀层
8. 文字层：（错层阴影、笔画链接、细节累加）
9. 模特层：（人物、物品、食物等）搭配展台、空间角度、超写实投影、搭配辅助图形、展示局部、破局效果
10. 素材下载：（无版权：摄图网和花瓣；有版权：视觉中国和海洛创意）
11. 点缀层：圆形点缀、波纹点缀、元素（插画）服用、镭射系、故障系、孟菲斯、插画
金刚区：
12. 水槽间距保持统一：40px
13. 图标文字间距：24px（黄金分割比）
14. 图标大小：90px
15. 内图标大小：56px
16. 常见的设计手法：面性微渐变、折纸阴影、不透明色块
UGC头条：
17. 设计注意点：特殊字体（造字工房力黑）、字体变形（倾斜/比例调整）、笔画变形（闪电图形）
18. 标签：方正正中黑简体、标签高度30px、文字大小20px、
19. 主文案：文字颜色#999999、文字大小24px
瓷片区：
20. 确定板式：上下、左右、对角线
21. 主文案：36px
22. 副文案：22px
23. 标签文字：22px
24. 文字（方正清刻本悦宋简体——偏文艺风）、标签、背景、配图
25. 展台：明面、灰面、暗面
卡片设计：
26. 优点：卡片的灵感来源于名片、身份证等，它可以将相关联的信息组合在一起，保持统一性与独立性，实现内容模块与模块之间的分割，从而突出内容的重要性。
27. 缺点：卡片设计不适合内容太多、文本信息过长，这样卡片承载的信息过多，失去的卡片的特性
闪屏页设计：
28. 常规闪屏页：一般以品牌色+logo+名称+slogan的形式存在
29. 广告闪屏页：广告变现，引流主要的通道
30. 活动闪屏页：与广告闪屏页相似，只有平台有相应的促销活动才会出现，突出视觉与促销活动内容，有固定模版（淘宝、天猫、京东等）
31. 节日闪屏页：每逢节假日出现的闪屏页，较能吸引用户注意，引起用户情感共鸣，增加新鲜感和惊喜感，注重情感化设计，故事化（卡通、插画设计为主）
规范的重要性：
32. 一份UI设计规范应该有的内容：配色数值、字体字号、图标样式、图标风格、弹窗和提示框、按钮样式、表单和分页、图片尺寸
33. 规范重要性：多个设计师之间协同配合，减少沟通、让色彩，字号，间距，风格保持一致，给用户传达统一的品牌形象，加强信任感、让开发快速理解设计的意图、让其他合作单位保持统一风格
栅格系统优势：
34. 提高规范性：在栅格系统下，页面所有组件和尺寸都有规律，对于大型网站的开发维护节约成本
35. 设计统一：基于栅格系统设计，可以让各个页面的布局保持一致，增加页面相似度，提高用户体验
36. 栅格系统：水槽+左右间距+栅格宽度（栅格数量一般为12和24）
37. 以下图为例：页面尺寸1920*1080px，手风琴宽度为312px，左右间距24px，（312+24+336px），偏移336px，1920-312-24*2=1560px为栅格系统的宽度，列数一般固定为24px，水槽为8的倍数16px，所以最后算下来栅格宽度为50px
图标原则：
38. 清晰：保证图标识别性，可读性，以传达准确消息为主
39. 统一：成套输出图标，保持统一性，注意比例协调（图标样式一致、图标线条粗细一致、图标大小一致）
优秀设计总结：
40. 色彩的使用：颜色简洁直观富有含义，强调“刚好”的程度，重点突出信息，不乱用色彩
41. 优秀的配图：一张好的图片，更能突出整个设计的气质
42. 一目了然的信息：设计的本质是为传达信息给用户，主次分明，突出核心吸引点，注重信息的传递效率
43. 设计品质：指的是一份设计的综合细节，是否经得起推敲，是否有可描述的内涵，是否能传达产品希望传达给用户的品牌情感
命名的格式：
45. Tabbar-icon-home-default@2x.png
46. 命名只能用英文
颜色搭配：
47. colors.dopely.top(推荐)
48. https://colorsupplyyy.com/app
49. 同类色搭配，30度
50. 互补色搭配，180度（绿色和红色、紫色和黄色）
51. 分裂互补色，180度对角颜色的相邻色
52. 正方形颜色搭配，在色环中选取彼此等距的四种颜色，在连接时形成正方形
53. 自然界的色彩搭配
