最近帮一个朋友看他的个人网站，打开一看——好家伙，页面上密密麻麻塞了十几种颜色、七八个弹窗、还有会动的GIF小广告。
我问他这是啥设计风格，他说这叫"活泼"。
我说这叫"辣眼睛"。
今天聊聊网站设计那些事儿，不讲什么专业理论，就说说我踩过的坑和学到的一些经验。
简约不等于简陋
很多人有个误区：页面元素越少越好，越简单越高级。
不是这样的兄弟。
简约是删掉没用的东西，保留有用的。但如果你把有用的也删了，那就成简陋了。
好的网站设计应该是：让用户一眼能看到最重要的内容，不需要找，不需要猜。
比如导航栏放什么？放用户最可能想点击的页面。文章页放不放评论区？放，因为能增加互动。
做设计之前，先想清楚：这个页面的核心目标是什么？用户进来最想看到什么？
字体这事，真的要重视
我发现很多小网站的字体选择很随意，中英文混用、不同页面字体不一样，看起来特别割裂。
我的建议是：全站字体统一，最多两种（中文字体+英文字体）。
中文字体我推荐思源黑体或者苹方，免费可商用，屏幕显示效果好。英文可以用Inter、Roboto这种经典字体。
字号也别乱来。正文16-18px比较合适，太小了看着累，太大了显得不专业。
对了，行间距1.5到1.8比较舒服，段落间距要比行间距大一点，方便阅读。
颜色不是越多越好
三原色能组成整个世界，但你的网站不需要那么多颜色。
个人博客的话，主色+辅色+背景色就够了。主色用于标题、重要按钮；辅色用于次要信息；背景色当然是留白。
如果不知道配色，可以去 Coolors.co 逛逛，输入一个主色它会给你自动生成一套配色方案。
或者更简单的方法：去看看你喜欢的设计网站，抄作业——不是抄设计，是学配色。
图片要好看，还要加载快
这是两个要求，有时候会有点矛盾。
图片质量高通常意味着文件大，加载就慢。解决方案是：压缩。
我之前说的tinypng、squoosh都可以用。或者你可以把图片统一处理成WebP格式，画质差不多，体积小很多。
另外，图片要跟内容相关。别为了好看放一些跟文章八竿子打不着的图，用户会懵的。
移动端适配这事，别忽视
现在流量大部分来自手机，你网站在电脑上再好看，手机上打开一塌糊涂，那也白搭。
现在大部分新建站工具（WordPress主题、Hugo主题等）都默认支持响应式设计。只要你别用那种十几年前的老主题，移动端体验一般不会太差。
有空的话，用手机打开自己网站看看，检查一下：文字能不能看清？按钮好不好点？图片会不会溢出？
如果有明显问题，趁着用户还没流失赶紧改。
适度的动效是加分项
我不是反对动效，但我反对乱用动效。
页面上每个会动的东西都会分散用户注意力。滚动的banner、闪烁的按钮、随机飘过的特效……这些东西多了，用户都不知道该看哪。
动效的合理用法是：引导注意力、反馈操作结果、让页面切换更流畅。
比如按钮hover的时候变个色，告诉你"这里可以点"；页面滚动的时候元素渐入，不那么突兀。
这些就够了，别整那些花里胡哨的。
说在最后
好的网站设计，其实就一个原则：让用户用得爽。
别为了展示技术或者追求所谓的"创意"，牺牲了基本的使用体验。
做网站不是炫技，是服务。
想明白这一点，设计就不会跑偏。
还木有评论哦，快来抢沙发吧~