## 设计风格 ### 颜色字体 [[viva 色彩体系]]、[[viva 字体]] **SCSS** 为 SCSS 能够让你写**更少更简洁**的样式代码，并提供**复用**与**模块化**能力；大型项目尤其收益明显。 - **性质**：是一种**预处理样式语言**（Sass 的一种语法风格）。 - **主要用途**：用来编写比 CSS 更高级、更便于维护的"层叠样式表"（Stylesheets），然后被编译/转换成浏览器可识别的**纯 CSS**。 - **功能特点**：支持变量、嵌套、函数、混入（mixins）等高级特性，让你在写 CSS 时更具**模块化**和**复用性**。 ```Java - 主色调：#20BEFF（亮蓝色） - 深色调：#008BFF（深蓝色） #409eff; #202124 是一个十六进制（HEX）颜色代码，它表示一个非常深的灰色，接近黑色。这个颜色实际上是 Google 的标准深色主题中常用的背景色之一。 ``` **字体**：采用统一、易读的英文字体（如 Roboto、Inter），中英混排要注意行间距。 1. Inter 更适合： - 现代网页设计 - 数据密集型界面 - 需要专业感的商业网站 **可以借鉴** [Kaggle](Kaggle.md)官网的** **UI**，颜色上参考下面这种黑白按钮、蓝色背景、绿色对、黄色错的配色方案吧 ```Java /* Kaggle 蓝色 */ .kaggle-theme { color: #20BEFF; /* 或者 */ color: rgb(32, 190, 255); } /* Apple 深黑色 */ .apple-theme { color: #1D1D1F; /* 或者 */ color: rgb(29, 29, 31); } ``` ### 图片 从视觉风格上看，Kaggle 这些配图一般被称作**"扁平线稿插画（Flat Line Illustration）"**或**"极简手绘风插画"**。它通常具有以下几个特点： 1. **线条为主**：使用较为粗/明显的黑色或深色线条勾勒人物与场景轮廓，整体看上去像极简版的线条画。 2. **颜色点缀**：主色块部分往往只使用少量纯色或低饱和度色彩（如插画中的黄色柱形图、小蓝点等），用来强调重点或丰富画面。 3. **扁平化（Flat）**：几乎没有渐变、阴影或复杂的高光，图形扁平简洁。 4. **矢量插画**：这类插画大多是在 Illustrator、Figma 等工具里通过矢量路径制作，可以随意放大缩小而不失真，适合网页、宣传物料等场景。 在现今的设计趋势中，这类插画也常被称为**"Spot Illustration"** 或 **"Hero Illustration"**（如果用于网页头图/横幅），是较为流行的"极简扁平风"插画类型。  ## 作文模块 按 h 之后出现一个下拉屏，显示推荐单词，根据最佳可视化确定显示个数 ## Bot - 个人网站中的文章反应学习和认知思路 - 嵌入其中的 telegram bot 作为具体的实现工具 - 给单词，自动添加到 anki - 给学习的视频音频自动给出复习文本 - 给油管视频自动给出可能不会的单词 ___ 在打造一个"有设计感"的网站时，除了**色彩体系**和**字体**这两大核心基础以外，还需要从**布局、交互、排版细节、可用性和一致性**等多个层面来提升整体观感与使用体验。下面总结几点关键要素，帮助你把网站设计得更专业、更具吸引力： --- ## 1. 布局与留白（Layout & Spacing） 1. **栅格系统（Grid System）** - 使用如 12 列/24 列栅格，保证页面在不同屏幕下的协调性，便于响应式布局。 - 网格有助于快速对齐元素，让各模块间的排版更有秩序。 2. **留白（Whitespace）** - 大方的留白能让内容更加突出，也给用户"喘息"的空间。 - 很多现代网站（如 Kaggle、Google）都充分利用留白，让页面看起来简洁又高级。 3. **层次结构（Visual Hierarchy）** - 通过**标题大小、字体粗细、颜色差异**等方式，让用户第一眼就能抓到重要信息。 - 不同信息区块要通过留白、分割线或背景色进行分隔，避免全部挤在一起。 --- ## 2. 导航与信息架构（Navigation & Information Architecture） 1. **清晰的导航栏** - 采用通俗易懂的菜单标题，保证用户能迅速知道哪里能找到所需内容。 - 如果功能多，可以使用下拉菜单或分层导航来分组，避免主菜单过度拥挤。 2. **面包屑（Breadcrumbs）** - 对于多层级页面，建议提供面包屑，指示用户当前所在位置，便于快速返回上一级。 3. **一致性（Consistency）** - 导航的样式、交互方式在各页面要保持一致。频繁改动或样式跳跃会让人困惑。 --- ## 3. 响应式与多端适配（Responsive Design） 1. **移动端优先** - 现在大多数用户通过手机访问网站，务必确保在小屏上排版正常、功能完备。 2. **断点（Breakpoints）** - 常用屏幕尺寸（如 320px、768px、1024px、1440px）都要进行调试，文字、按钮、图片等会随屏幕宽度自适应。 3. **触控友好** - 在移动端按钮不宜过小，保证足够的点击/触控区域，避免误触。 --- ## 4. 交互动效与微交互（Micro-Interactions & Animations） 1. **Hover / Focus / Active 状态** - 按钮、链接、输入框在鼠标悬停或焦点时要有可见的视觉反馈（颜色变化、阴影、动画等）。 - 这让用户更有"操作感"，也能降低误操作概率。 2. **过渡动画（Transitions）** - 页面切换、弹窗出现、列表加载等场景可带有短暂且柔和的过渡动画，让体验更顺滑，更"现代"。 - 避免过度炫酷或长时间动画，否则会拖慢操作效率。 3. **反馈提示（Feedback）** - 操作成功/失败后，应及时出现轻量提示（如"恭喜！已提交"）或错误消息，帮助用户确认操作结果。 --- ## 5. 视觉元素与图片/图标（Visual Elements） 1. **图标风格统一** - 保证图标线条粗细、圆角大小、配色统一，如都采用 Material Icons / Feather Icons 等。 - 不同风格的图标混用会显得杂乱。 2. **图片质量与风格** - 确保图片清晰度，避免失真或过度压缩。 - 若使用插画或摄影，需要与网站主题、色彩基调相符，维持整体的视觉统一。 3. **SVG 矢量图** - 在可行情况下，优先用矢量图标和插画（SVG），在各种分辨率下都能保持清晰。 --- ## 6. 可读性与排版细节（Typography & Readability） 1. **标题层级** - H1、H2、H3 等有明确层次，结合行间距、字重、颜色差异让信息清晰易读。 2. **正文行宽与行高** - 一般行宽控制在 60~~80 个字符左右可读性最佳，行高 1.5~~1.8 之间。 3. **对比度** - 文字与背景的颜色对比要足够大，遵循 [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) 的可访问性标准（推荐对比度在 4.5:1 以上）。 4. **中英文混排优化** - 适当留意中英文、数字混排时的间距，避免中英文之间过于紧贴，视觉凌乱。 --- ## 7. 可用性与可访问性（Usability & Accessibility） 1. **语义化 HTML** - 使用正确的标签（header、nav、main、footer、section、article 等）帮助屏幕阅读器和搜索引擎更好地理解结构。 2. **键盘操作** - 确保网站在无鼠标时也能用键盘 Tab 键进行焦点切换、操作表单等。 3. **替代文本（Alt Text）** - 给图片、图标加上合适的 `alt` 描述，提升无障碍体验与 SEO。 --- ## 8. 性能与加载体验（Performance & Loading Experience） 1. **图片/资源优化** - 压缩图片、按需加载（lazy load）不在首屏的图片；合理利用 SVG、WebP 等格式。 - 压缩与合并 CSS / JS 文件，减少 HTTP 请求。 2. **首屏加载速度** - 使用CDN、缓存策略或 SSR（服务器端渲染）让重要内容先行展示，降低用户等待焦虑。 3. **感知性能** - 分段加载或骨架屏（skeleton screen）在数据未返回前先占位，缓解用户等待感。 --- ## 9. 一致的设计语言与组件（Design System & Components） 1. **组件化** - 把常见元素做成可复用组件（如按钮、输入框、卡片、弹窗、表格），并在全站保持一致的样式与交互。 2. **设计规范文档** - 整理所有用到的颜色、字体、排版、组件示例到一个Design System文档中，团队成员可直接引用。 - 这样也便于后续维护和更新，避免"越做越乱"的情况。 --- ## 10. 用户测试与迭代 1. **可用性测试** - 邀请部分真实用户或团队成员来体验网站，收集对导航、布局、功能的反馈。 - 找到痛点后及时优化，避免设计"自嗨"。 2. **数据分析** - 关注网页访问时长、点击率、跳出率等数据，判断用户对页面功能的实际接受度。 3. **持续迭代** - 设计是一个不断演进的过程，结合用户反馈和业务需求，定期小步更新，而不是一锤定音。 --- ### 总结 - **色彩**和**字体**固然重要，但真正"有设计感"的网站还需要在**布局、交互、可访问性**、一致性和**内容组织**等方面下功夫。 - 保持**清晰的视觉层次、合理的留白、稳定的操作反馈**，并兼顾**响应式**与**性能**，才能让网站同时拥有"看上去很美"和"用起来很爽"的综合体验。 - 最终要落脚在**用户**实际需求与体验上，通过**测试与迭代**，让设计不断趋于完善。 这样，你就能在色彩与字体之外，将整站的设计质感提升到更高水准。祝你的网站设计之旅顺利推进！