对比让重点更突出
你有没有注意到，超市促销海报上的价格总是特别大，颜色也特别扎眼？这就是对比在起作用。网页设计里也一样，重要的按钮用醒目的颜色，字体大小拉开差距，用户一眼就知道该点哪儿。
比如登录页面，「立即注册」用亮黄色，「忘记密码」用灰色小字，视觉权重自然不同。别把所有元素都弄成一样的大小和颜色，那样看起来像本说明书，没人愿意多看一眼。
对齐不只是整齐
很多人以为对齐就是图省事，其实它是引导视线的秘密武器。文字左对齐，图片右对齐，整个页面就有了流动感。就像你看公众号文章，段落都靠左排，读起来顺，要是东一句西一句，眼睛得来回找，累得很。
写代码时记得用 CSS 控制对齐：
<div class="container">
<p class="text-left">左侧对齐的文字</p>
<button class="btn-center">居中按钮</button>
</div>
.container {
text-align: left;
}
.btn-center {
display: block;
margin: 10px auto;
}重复带来安全感
你家楼下那家常去的咖啡馆，杯子、包装、店员围裙都是同一套配色，是不是看着就安心？网站也得这样。按钮样式、字体搭配、间距节奏保持一致，用户会觉得这地方靠谱。
比如导航栏每个菜单项都有下划线，点进去内页也保留这个细节，用户不会觉得「我是不是点错地方了」。别今天首页用圆角按钮，明天详情页换成直角，变来变去只会让人困惑。
亲密性决定信息分组
谁也不会把酱油和牙膏放一个购物袋里，对吧？相关的内容要靠得近，不相干的就得分开。新闻列表里，标题、摘要、发布时间挤在一起，但和下一条新闻留出足够空隙，一看就明白哪段属于哪条。
用 margin 控制距离很关键：
.news-item {
margin-bottom: 20px; /* 条与条之间留白 */
}
.news-title,
.news-desc,
.news-date {
margin: 0;
line-height: 1.4;
} /* 内部紧凑 */留白不是浪费空间
新手总想把页面塞满，生怕「太空」显得内容少。其实留白就像呼吸的间隙，能让内容更舒服。手机App图标之间要有空隙，不然手指容易按错。网页也一样，段落周围留点空白，眼睛才不会累。
特别是移动端，手指操作的空间更要留足。别舍不得那几像素，用户滑着顺畅，才愿意继续看下去。
色彩传递情绪
红色让人警觉，蓝色让人冷静，绿色让人放松——颜色不只是好看，它在悄悄影响用户心情。电商网站常用红色做促销标签，就是因为能刺激点击；而金融类网站偏爱蓝灰调，显得稳重可信。
定主色调时想清楚你要传递什么感觉。别一股脑堆上五颜六色，搞得像儿童涂鸦。一般选一个主色，搭配一两个辅色就够了。
字体选择有讲究
正文别用花哨的手写体，再美也费眼。无衬线字体像微软雅黑、思源黑体，屏幕上看最舒服。标题可以稍微个性一点，但也要保证清晰可读。
字号也有门道：手机端正文至少 14px，行高建议 1.5 倍，太挤了像沙丁鱼罐头，太松又断了阅读流。