# 通用 ## 元素 ### 字体 Font - 来自 [[Squarespace]] 参考 - Heading - Paragraph - Buttons - Miscellaneous - Base Text  ### 色彩 Color - 中性无色彩 - 轻度对比 - 活泼对比 来自 [[Squarespace]] 参考  ### 动画 Animation  ### 间距 Spacing  ### 圆角 Radius - 利索 - 中庸 - 大圆角 ### 素材 Images 此类主要针对 Landing Page，想要打造一致的视觉特征达到品牌感，所有的配图都应该是一个风格。 ### 质感 texture - 背景 - 阴影 - 纹理 ### 跳跃率 jump rate 其实就是元素之间的对比程度，对比越大，越显得创新和大胆，但同时会失去沉稳的气质。 # UI ## 组件 - [[按钮 Button]] -  - [[数据卡片 Metrics]] - [[输入框 Input]] - [[选择框 Select]] - [[日期选择 Date picker]] - [[下拉菜单 Dropdown]] - [[柱状图]] 与常见图表 - 等表单常见元素 ## 典型页面 - 表单（编辑态） - 工作台 - 列表 - 详情（只读） - 设置页 - [[聊天 Chat]] ## 常见风格类型 ### 锐利，干练。 ### 柔和 ## 工具 - [imgsrc](https://imgsrc.io/) 快速生成封面的工具 Tools for quick cover generation - ![[CleanShot 2023-12-26 at [email protected]]] - [Squarespace site builder](https://cello-salmon-fzk7.squarespace.com/config/site-styles) Shopify 知名竞品，设计也是很不错的。 - [Themes - shadcn/ui](https://ui.shadcn.com/themes) Vercel 团队作品，最近还在研发很牛逼的 #ai生成ui 功能，真的快失业了。 - 在这个 Theme 页面，Shadcn 列出了能决定一个 Web 产品的主要元素。 - [Home | Park UI](https://park-ui.com/) like the radix UI ![[Parkuisc.png]] - [Playground – Themes – Radix UI](https://www.radix-ui.com/themes/playground) A very impressive team. #资源/React -UI -  - <https://uicolors.app/create> #配色工具 -  - [Themes - Gamma](https://gamma.app/#themes) [[Gamma]] 有一个自定义主题的功能，拆解了视觉元素，非常有参考价值。 - [Realtime Colors](https://realtimecolors.com/?colors=07151c-fafdff-007ebd-041415-2abec6) 巨牛逼，能调颜色，标题和正文字体，基本上一个网页的感觉就能大差不差的定下来。 #Web界面效果尝试 -  - [shaper — interface styles shaper](https://hihayk.github.io/shaper/#system-ui,%20sans-serif/1.17/0.9/2.03/0.64/1.4/0.5/174/60/50/14/0.45/1/false) #Web界面效果尝试 效果尝试  - [Uibot — Infinite UI designs](https://www.uibot.app/) 偶然发现以前存的一个 web 随机风格工具。