https://www.tood.win/tags/%E7%BD%91%E7%AB%99%E8%AE%BE%E8%AE%A1/ Recent content in 网站设计 on 拾光集 Hugo -- gohugo.io zh Sun, 26 Jul 2026 22:58:01 +0800 https://www.tood.win/posts/16-zhong-chang-jian-de-ui-she-ji-feng-ge/ Sun, 26 Jul 2026 22:54:00 +0800 https://www.tood.win/posts/16-zhong-chang-jian-de-ui-she-ji-feng-ge/ <p>可直接运行的单文件 HTML 的 16 种常见的 UI 设计风格设计提示词。</p> <h2 id="一项目目标">一、项目目标 </h2><p>制作一个“UI 设计风格展示库”网站，通过 16 个独立的风格案例，让用户能够直观了解不同 UI 风格的视觉特征、配色方式、组件形态和适用场景。</p> <p><img alt="QQ20260726-225440" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://www.tood.win/uploads/2026/07/QQ20260726-225440-41127a82.png"></p> <p>页面主要面向：</p> <ul> <li>UI/UX 设计师</li> <li>产品经理</li> <li>前端开发者</li> <li>独立开发者</li> <li>对网站设计感兴趣的用户</li> </ul> <p>网站重点是视觉效果和风格差异，具体文案内容可以自由设计，但必须真实、完整、有设计感，不能使用大量无意义占位文字。</p> <h2 id="二技术要求">二、技术要求 </h2><ol> <li>使用原生 HTML、CSS 和 JavaScript 编写。</li> <li>所有代码必须放在一个 HTML 文件中。</li> <li>不依赖 React、Vue、Bootstrap、Tailwind CSS 等框架。</li> <li>页面保存为 <code>.html</code> 文件后，可以直接在浏览器中打开运行。</li> <li>不要省略任何代码，不要只提供局部示例。</li> <li>不要输出代码解释，只输出完整 HTML 代码。</li> <li>页面必须兼容 Chrome、Edge、Safari 等现代浏览器。</li> <li>页面必须支持电脑、平板和手机访问。</li> <li>所有按钮、导航、切换功能都必须真实可用。</li> <li>使用语义化 HTML，并保证代码结构清晰、易于后续修改。</li> </ol> <h2 id="三整体页面结构">三、整体页面结构 </h2><p>页面采用完整的作品展示网站结构，至少包含：</p> <h3 id="1-顶部导航栏">1. 顶部导航栏 </h3><p>包含：</p> <ul> <li>网站 Logo 或文字标识</li> <li>首页</li> <li>风格展示</li> <li>风格对比</li> <li>设计说明</li> <li>深色模式切换按钮</li> </ul> <p>导航栏需要具有吸顶效果，滚动页面时保持可见。</p> <h3 id="2-首屏区域">2. 首屏区域 </h3><p>设计一个具有视觉冲击力的 Hero 区域，包含：</p> <ul> <li>主标题：16 种 UI 设计风格</li> <li>简短介绍</li> <li>“浏览全部风格”按钮</li> <li>“随机查看风格”按钮</li> <li>一个能够体现多种 UI 风格融合效果的视觉装饰区域</li> </ul> <h3 id="3-风格筛选区域">3. 风格筛选区域 </h3><p>提供分类筛选按钮，例如：</p> <ul> <li>全部</li> <li>极简类</li> <li>科技类</li> <li>复古类</li> <li>商业类</li> <li>自然类</li> <li>实验类</li> </ul> <p>点击分类后，可以筛选对应的风格卡片。</p> <h3 id="4-风格展示区域">4. 风格展示区域 </h3><p>展示 16 张大型设计风格卡片。</p> <p>每张卡片不能只更换背景颜色，而是要真正体现该风格的：</p> <ul> <li>字体排版</li> <li>色彩体系</li> <li>按钮样式</li> <li>卡片结构</li> <li>图标语言</li> <li>边框效果</li> <li>阴影效果</li> <li>装饰元素</li> <li>页面层级</li> <li>动效方式</li> </ul> <p>每张风格卡片中至少包含：</p> <ul> <li>中文名称</li> <li>英文名称</li> <li>风格编号</li> <li>简短说明</li> <li>一个迷你网页或产品界面 Demo</li> <li>2—4 个代表性标签</li> <li>“查看详情”按钮</li> </ul> <p>点击“查看详情”后，使用弹窗展示：</p> <ul> <li>风格特点</li> <li>推荐配色</li> <li>常用设计元素</li> <li>适用网站类型</li> <li>使用注意事项</li> </ul> <h3 id="5-风格对比区域">5. 风格对比区域 </h3><p>加入一个简单的风格对比功能。</p> <p>用户可以选择两种风格，对比以下内容：</p> <ul> <li>主色调</li> <li>字体特征</li> <li>圆角大小</li> <li>阴影方式</li> <li>信息密度</li> <li>适用场景</li> </ul> <h3 id="6-页面底部">6. 页面底部 </h3><p>包含：</p> <ul> <li>网站简介</li> <li>风格分类链接</li> <li>使用说明</li> <li>版权信息</li> <li>返回顶部按钮</li> </ul> <h2 id="四需要展示的-16-种-ui-风格">四、需要展示的 16 种 UI 风格 </h2><h3 id="01-极简主义-minimalism">01. 极简主义 Minimalism </h3><p>参考 <a class="link" href="https://www.tood.win/tags/google/" >Google</a>、Notion、<a class="link" href="https://www.tood.win/tags/chatgpt/" >ChatGPT</a> 等产品的简洁设计语言。</p> <p>特点：</p> <ul> <li>大量留白</li> <li>黑、白、灰为主要颜色</li> <li>内容优先</li> <li>字体清晰</li> <li>装饰元素较少</li> <li>强调排版、间距和信息层级</li> </ul> <p>Demo 可以设计成简洁的 <a class="link" href="https://www.tood.win/tags/ai/" >AI</a> 笔记或效率工具界面。</p> <h3 id="02-玻璃态-glassmorphism">02. 玻璃态 Glassmorphism </h3><p>特点：</p> <ul> <li>半透明卡片</li> <li>背景模糊</li> <li>磨砂玻璃质感</li> <li>紫蓝色、粉紫色或青蓝色渐变</li> <li>细腻高光</li> <li>柔和边框</li> <li>悬浮式组件</li> </ul> <p>必须使用 <code>backdrop-filter</code> 实现真实的玻璃效果。</p> <p>Demo 可以设计成音乐播放器、数据面板或个人中心。</p> <h3 id="03-新拟物-neumorphism">03. 新拟物 Neumorphism </h3><p>特点：</p> <ul> <li>柔和的背景颜色</li> <li>双向阴影</li> <li>元素像从背景中凸起或凹陷</li> <li>低对比度</li> <li>圆润按钮</li> <li>强调触感和立体感</li> </ul> <p>Demo 可以设计成智能家居控制面板。</p> <p>必须同时展示凸起按钮和凹陷输入框。</p> <h3 id="04-赛博朋克-cyberpunk">04. 赛博朋克 Cyberpunk </h3><p>特点：</p> <ul> <li>深色背景</li> <li>霓虹粉、蓝、紫、绿色</li> <li>发光边框</li> <li>故障艺术效果</li> <li>网格线</li> <li>高对比度</li> <li>科幻终端界面</li> <li>不规则切角</li> </ul> <p>Demo 可以设计成未来城市控制台或游戏角色面板。</p> <h3 id="05-暗黑奢华-dark-luxury">05. 暗黑奢华 Dark Luxury </h3><p>特点：</p> <ul> <li>黑色、深灰或墨色背景</li> <li>金色、银色或香槟色点缀</li> <li>高级衬线字体</li> <li>大面积图片区域</li> <li>克制的动画</li> <li>精致细线</li> <li>高端、沉稳、奢华</li> </ul> <p>Demo 可以设计成腕表、珠宝、香水或高级时装官网。</p> <h3 id="06-美式风格-american-style">06. 美式风格 American Style </h3><p>特点：</p> <ul> <li>简洁直接</li> <li>粗体标题</li> <li>清晰的功能分区</li> <li>强烈的行动按钮</li> <li>大尺寸图片</li> <li>强调实用性和商业转化</li> <li>信息表达直观</li> </ul> <p>Demo 可以设计成户外品牌、运动品牌或生活方式品牌官网。</p> <h3 id="07-千禧年-y2k">07. 千禧年 Y2K </h3><p>特点：</p> <ul> <li>明亮鲜艳的颜色</li> <li>银色、粉色、蓝色</li> <li>圆润组件</li> <li>星星、爱心、气泡等装饰</li> <li>复古电脑和互联网元素</li> <li>像素图标</li> <li>活泼、可爱、略带未来感</li> </ul> <p>Demo 可以设计成潮流社区、音乐网站或个人主页。</p> <h3 id="08-卡片式布局-card-based-design">08. 卡片式布局 Card-based Design </h3><p>特点：</p> <ul> <li>内容以卡片为主要容器</li> <li>大圆角</li> <li>柔和阴影</li> <li>清晰的信息分组</li> <li>模块化结构</li> <li>适合数据展示</li> <li>方便响应式排列</li> </ul> <p>Demo 可以设计成 SaaS 产品后台或项目管理系统。</p> <h3 id="09-北欧自然风-nordic-nature">09. 北欧自然风 Nordic Nature </h3><p>特点：</p> <ul> <li>米白、浅灰、原木色、鼠尾草绿</li> <li>自然材质</li> <li>有机曲线</li> <li>简洁排版</li> <li>柔和光影</li> <li>舒适、安静、放松</li> <li>强调环保和生活方式</li> </ul> <p>Demo 可以设计成家居、民宿、家具或自然生活品牌网站。</p> <h3 id="10-孟菲斯-memphis">10. 孟菲斯 Memphis </h3><p>特点：</p> <ul> <li>大胆鲜艳的配色</li> <li>几何图形</li> <li>不规则线条</li> <li>圆点、波浪、三角形</li> <li>强烈的视觉冲突</li> <li>充满趣味和实验感</li> </ul> <p>Demo 可以设计成创意工作室、活动页面或艺术展览网站。</p> <h3 id="11-动感渐变-dynamic-gradients">11. 动感渐变 Dynamic Gradients </h3><p>特点：</p> <ul> <li>多色渐变</li> <li>流动色彩</li> <li>模糊光斑</li> <li>动态背景</li> <li>强烈的视觉吸引力</li> <li>现代感和活力感</li> <li>柔和的颜色过渡</li> </ul> <p>Demo 可以设计成创意科技产品、<a class="link" href="https://www.tood.win/tags/ai/" >AI</a> 工具或数字服务官网。</p> <p>渐变背景需要具有缓慢流动的动画效果。</p> <h3 id="12-编辑部风格-editorial-style">12. 编辑部风格 Editorial Style </h3><p>特点：</p> <ul> <li>模仿报纸和杂志排版</li> <li>超大标题</li> <li>衬线字体与无衬线字体组合</li> <li>多栏布局</li> <li>明确的标题层级</li> <li>信息密度较高</li> <li>图片与文字具有编辑感</li> </ul> <p>Demo 可以设计成时尚杂志、文化媒体或设计新闻网站。</p> <h3 id="13-粗野主义-brutalism">13. 粗野主义 Brutalism </h3><p>特点：</p> <ul> <li>粗黑边框</li> <li>高对比配色</li> <li>原始直接的排版</li> <li>不规则布局</li> <li>大字号文字</li> <li>少量修饰</li> <li>强烈、独立、具有实验性</li> </ul> <p>Demo 可以设计成独立艺术家、音乐节或设计机构网站。</p> <h3 id="14-bento-grid-便当盒布局">14. Bento Grid 便当盒布局 </h3><p>特点：</p> <ul> <li>使用大小不同的矩形模块</li> <li>模块排列紧凑但有秩序</li> <li>大圆角</li> <li>信息分类明确</li> <li>类似 Apple 产品介绍页面</li> <li>适合展示多个功能和数据</li> </ul> <p>Demo 可以设计成个人作品集、应用介绍页或产品功能页面。</p> <h3 id="15-黏土拟态-claymorphism">15. 黏土拟态 Claymorphism </h3><p>特点：</p> <ul> <li>厚实圆润的组件</li> <li>类似黏土或软塑料的质感</li> <li>柔和阴影</li> <li>鲜艳但不过度刺眼的颜色</li> <li>具有立体卡通感</li> <li>亲切、轻松、趣味化</li> </ul> <p>Demo 可以设计成儿童教育应用、健康应用或轻量社交产品。</p> <h3 id="16-复古未来主义-retro-futurism">16. 复古未来主义 Retro Futurism </h3><p>特点：</p> <ul> <li>复古科幻视觉</li> <li>夕阳渐变</li> <li>紫色、橙色、蓝色</li> <li>透视网格</li> <li>老式电脑字体</li> <li>颗粒噪点</li> <li>80 年代电子音乐封面风格</li> </ul> <p>Demo 可以设计成音乐播放器、未来旅行平台或数字艺术网站。</p> <h2 id="五视觉设计要求">五、视觉设计要求 </h2><ol> <li>每种风格必须具有明显差异，不能只替换主题颜色。</li> <li>每张卡片都要像一个独立设计作品。</li> <li>页面整体要统一，但卡片内部可以保留各自风格。</li> <li>注意字体大小、间距、留白和视觉层级。</li> <li>避免页面看起来像普通后台模板。</li> <li>不要过度使用 Emoji。</li> <li>可以使用 CSS 图形、渐变、阴影和 SVG 图标。</li> <li>图标风格需要与对应 UI 风格一致。</li> <li>不要依赖无法稳定访问的外部图片。</li> <li>图片区域可以使用 CSS 渐变、内嵌 SVG 或可靠的在线图片资源。</li> <li>保证文字和背景之间具有足够的对比度。</li> <li>页面需要具有专业、精致、可用于作品展示的完成度。</li> </ol> <h2 id="六交互与动画要求">六、交互与动画要求 </h2><p>加入适量且流畅的交互效果：</p> <ul> <li>卡片悬停动画</li> <li>按钮反馈</li> <li>滚动出现动画</li> <li>导航定位</li> <li>分类筛选</li> <li>风格详情弹窗</li> <li>深色模式切换</li> <li>随机查看一种风格</li> <li>返回顶部</li> <li>风格对比选择</li> </ul> <p>动画应优雅自然，不要过度晃动，不要影响阅读。</p> <p>同时兼容 <code>prefers-reduced-motion</code>，当用户关闭动画时减少动态效果。</p> <h2 id="七响应式要求">七、响应式要求 </h2><h3 id="电脑端">电脑端 </h3><ul> <li>风格卡片采用两列或三列布局</li> <li>保持足够的展示面积</li> <li>导航和对比功能完整显示</li> </ul> <h3 id="平板端">平板端 </h3><ul> <li>调整为两列布局</li> <li>减少装饰元素尺寸</li> <li>保持文字清晰</li> </ul> <h3 id="手机端">手机端 </h3><ul> <li>使用单列布局</li> <li>导航自动转换为移动端菜单</li> <li>卡片内容不能溢出</li> <li>按钮方便触摸</li> <li>弹窗适配小屏幕</li> <li>不出现横向滚动条</li> <li>主要文字字号不能过小</li> </ul> <h2 id="八代码质量要求">八、代码质量要求 </h2><ol> <li>CSS 使用变量统一管理颜色、圆角、阴影和间距。</li> <li>JavaScript 需要添加必要注释。</li> <li>不要出现重复、无效或明显冗余代码。</li> <li>所有 HTML 标签必须正确闭合。</li> <li>不允许存在无法点击的假按钮。</li> <li>筛选、弹窗、主题切换和风格对比功能必须可以正常运行。</li> <li>对话框需要支持点击关闭按钮和遮罩关闭。</li> <li>页面刷新后，可以通过 <code>localStorage</code> 保留用户选择的深色或浅色模式。</li> <li>为按钮和交互元素添加适当的无障碍属性。</li> <li>最终输出必须是一份完整、可运行、视觉效果优秀的 HTML 代码。</li> </ol> <p>请严格按照以上要求生成代码，只输出从 <code>&lt;!DOCTYPE html&gt;</code> 开始到 <code>&lt;/html&gt;</code> 结束的完整代码，不要添加 Markdown 代码围栏，也不要附加任何解释。</p>