要做出 “大气磅礴” 的网站
一、配色:克制才显高级
主色调:1 个,选低饱和、深色系:深蓝 / 炭灰 / 墨黑 / 深绿 / 暗金,最显稳重。
辅助色:1 个,浅灰、米白等中性色,用于背景、区块。
点缀色:1 个,小面积高亮(如金色、深橙),用于按钮、重点文字。
严禁:高饱和大红、亮黄、荧光色,大面积撞色。
比例:遵循 60(主)-30(辅)-10(点缀)。
二、字体排版:统一 + 强层级
中文:思源黑体、苹方、微软雅黑(无衬线,现代大气)。
英文:Montserrat、Arial。
层级:
大标题:28–48px,加粗,字间距略宽。
副标题:20–24px,常规。
正文:16px,行高 1.6–1.8。
辅助文字:12–14px,浅灰。
禁止:一页内混用 3 种以上字体、标题花里胡哨、正文拥挤。
三、布局:留白 + 大区块 + 强秩序
- 首屏:全屏大图 / 视频 + 极简导航 + 一句 slogan + 一个按钮。
图:高清、极简、有气势(风景、城市、产品特写)。
字:居中或靠左,大而少。
- 整体结构:6–8 个模块即可(关于我们、产品、服务、案例、优势、联系)。
模块之间大量留白,不要塞满。
每个模块左右对齐、统一内边距。
- 网格系统:用12 列网格,元素对齐,视觉整齐。
四、视觉元素:高清 + 极简 + 质感
图片:
首屏:1920×1080 + 高清大图,无水印、无杂乱元素。
内容图:实景图、产品细节图、建筑感强的图,拒绝卡通、廉价图库。
图标:线性、极简、统一风格,不用 3D、渐变、花哨图标。
图形:少用装饰,可用细线条、浅渐变、轻微阴影增加质感。
背景:纯色、浅纹理、低饱和渐变,拒绝复杂图案。
五、动效与细节:克制 + 高级
平滑滚动:整站滚动流畅、缓慢,不卡顿。
微交互:
按钮 hover:颜色加深、轻微放大、阴影。
图片 hover:轻微放大、变暗。
导航:简洁下拉、平滑出现。
禁用:闪烁、晃动、旋转、爆炸等夸张动效。
细节:
按钮:圆角 4–8px,统一高度,纯色填充。
卡片:轻微阴影、圆角、透明边框。
分割线:细、浅灰、短。
六、内容策略:少字 + 有力 + 留白
标题:短、有力、直击核心(如 “专注高端制造”,不是 “我们致力于为客户提供高品质制造服务”)。
正文:短句、分点、每段 1–2 行。
留白:文字四周留白充足,行间距宽松。
快速落地清单(照着做就大气)
配色:1 深主色 + 1 浅辅色 + 1 点缀色,无高饱和。
字体:全站 1 种无衬线,标题加粗放大,正文 16px。
布局:全屏首屏 + 6–8 大模块 + 大量留白。
图片:高清大图、实景 / 产品特写、无杂乱元素。
动效:平滑滚动 + 轻微 hover,无夸张动画。
内容:标题短有力、正文短句分点、文字四周留白。
推荐
-
-
QQ空间
-
新浪微博
-
人人网
-
豆瓣
