---
title: "Web设计禁忌[转载]"
url: "https://yjyj.net/learn/551.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2008-08-21T14:57:52+08:00"
updated_at: "2008-08-21T14:57:52+08:00"
categories: "招数学习"
tags: "CSS布局技巧, 前端开发实战, 网页视觉设计"
summary: "这篇《Web设计禁忌》系统梳理网页设计中最容易踩坑的内容、任务、导航、表单与搜索问题，重点解决“用户找不到、看不懂、做不完”的体验灾难。适合做站、改版和前端排错时对照自查，结论很直接：少折腾、多直达、少输入、少歧义。"
source: "生猛大蝦 (https://yjyj.net)"
---

# Web设计禁忌[转载]

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/learn/551.html) · 作者：小 虾 · 发布时间：2008-08-21

## 30 秒核心看点 (TL;DR)

- 先看内容与功能：主页身份不清、分类混乱、说明废话多，都会让用户一眼迷路。
- 任务与表单要减负：别强迫二次登录、重复填表、无意义选择，能默认就默认。
- 导航与搜索要直给：少做欺骗性链接和死胡同，页面状态、当前位置、搜索入口都要清楚。

**一内容与功能禁忌**
内容禁忌
l         主页身份危机（what’s this？what’s it contain？what can I do？where can I start？）
l         混乱的内容分类（if user can find what he want immediataly）
l         毫无意义的说明文字
l         内容不一致)
l         过期/缺少/无意义/未完成的内容
任务支持禁忌
l         负担任务(类似于同一网站需要二次登录；提交表单失败后需要重新输入数据)
l         请求不必要的数据
l         无意义的选择（其中包括：选项无区别；用户不知道选项的含义；答案是显然的；忽略重要选项；程序可以推断）
l         任务死胡同（例子：用户输入很多信息来订票后，系统告知他，所有票已被售出）
l         过于复杂的任务流程
**二用户界面禁忌**
导航禁忌
l         页面中过多的导航
l         欺骗性链接（外表相似却指向不同地方；外表不同却指向相同地方）
l         非直接链接（一次点击无法达到你想去的地方。门户新闻频道中，此禁忌泛滥）
l         当前页面无标记（从导航和页面标题中，看不出自己在哪里）
l         指向当前页面的链接（除了刷新，我想不到还有别的什么用途）
l         缺少导航的页面（报错页面、任务完成页面、404页面）
表单禁忌
l         在非万不得已的情况下使用输入框（能不让用户自行输入就不让用户输入）
l         兼容性，容错性差的输入接框
l         不提供默认值（单选不提供初始值，会增加出错几率；）
       只有一个选项的单选按钮
       单个复选框没有用作开关来使用（开关是严格对立的，而二选一的时候，不要用单个复选框）
       使用按钮来当作开关
l         不合理的默认值
l         焦点没有自动出现在输入框内
l         可用性差的说明标签（过远、未对齐）
l         错用单选框或复选框
l         看起来可以编辑，但却不能编辑（如果某个数值永远都不能编辑，那么就根本不要使用表单来表示）
l         无法理解的控件（拙劣的标签、布局）
搜索禁忌
l         令人讨厌的搜索选项
l         过多的搜索框
l         垃圾的搜索结果（重复、漏、负相关）
l         糟糕的结果排序
l         没有显示搜索条件和数量
l         无法对借过进行筛选
**三网站外观禁忌**
文本与书写禁忌
l         文本太多
l         晦涩的语言
l         变化的词汇
l         不一致的格式
l         拼写和语法错误
链接外观错误
l         不像链接的链接
l         不是链接胜似链接
l         奇特的按钮：点击范围比看起来小
l         换行的链接
l         隐藏在文本中的链接
l         看不出哪些是点过的链接
       title属性上的文字与链接一致（既然一致，还使用title来说明什么呢?）
图形设计与布局禁忌
l         小字体
l         所有内容都居中
l         不能引人注意的出错消息
l         色差过小
l         可用的按钮看上去不可用
l         错误的标签导航

## 延伸问答与排错指南 (FAQ)

### 网页设计里最常见的禁忌是什么？
最常见的是让用户“找不到、看不懂、做不完”。具体表现包括主页身份不清、内容分类混乱、导航过多、表单字段太多、默认值缺失、任务流程过长。改法很朴素：减少歧义，缩短路径，让用户一眼知道自己在哪、能做什么、下一步去哪。

### 表单设计为什么总让用户烦躁？
因为很多表单把“必须让用户输入”当成了默认方案。更好的做法是：能预填就预填，能下拉就别手输，单选/复选要和真实业务含义匹配，默认值要合理，标签要就近对齐。这样能明显降低出错率和放弃率。

### 如何判断一个页面导航是否有问题？
看三点：用户能不能一次点到目标、能不能知道自己当前在哪、出错或完成后有没有出口。若出现欺骗性链接、非直接链接、当前页面无标记、404或完成页没导航，基本就说明导航设计有问题，需要重构信息层级和路径。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)