如何设计网站——对Web设计的一点总结
时间：2023-09-26 01:30:01 | 来源：网站运营
时间：2023-09-26 01:30:01 来源：网站运营
如何设计网站——对Web设计的一点总结：在最近的工作中，遇到了导航的问题，无意中发现了找出了收藏已久的《别让我思考》，花了一周时间读了两遍，才清楚的理解导航对于一个产品的重要作用。也更加印证了产品圈中将用户当做小白的理论，其实并不是在产品设计中将一切都为用户标注出来，而是让用户能够通过自己的方式更加轻松的使用产品，这样的产品对于用户来说必定是不言而喻的，也就是主题“别让我思考”。下面是这次读书的笔记，虽然这本书给我很大的启发，但是一切需要归于实践，在实践中验证这个理论。
一、指导原则
第一章：别让我思考 --- 可用性第一定律
- web设计的终极法则：别让我思考，即看到一个界面应该是不言而喻，一目了然，自我解释。
- 强迫我们思考的地方：（1）酷炫的名字或技术名词。（2）看起来不太明显的按钮和链接
- 当思考时，需要权衡，权衡应该更倾向于“显而易见”，而不行hi需要额外的思考
- 每个需要思考的地方会加重用户的认知负担，把用户的注意力从要完成的任务上拉开
- 访问网站时不需要思考的事都有什么？
- 我在什么位置？
- 该从哪里开始？
- 他们把xx放在什么地方？
- 这个项目上最重要的是什么？
- 为什么他们给它取这个名字？
如果做不到让一个页面不言而喻，那么至少应该让它自我解释当浏览网站遇到问题时，用户会认为是自己的错误，而不会责怪网站如果要让网页有效，它们必须在用户第一眼看到时将自己展示出来，而要做到这一点，最好的方法是创建不言而喻的网页，或者至少是自我解释。第二章：我们实际上是如何使用Web的 --- 扫描，满意即可，勉强应付
- 事实1 -- 我们不是阅读，而是扫描，寻找能吸引用户注意力的文字或词语（除新闻故事，报告，产品描述界面）
（1）我们总是处于忙碌之中 --- 使用web是想节约时间
（2）我们知道自己不必阅读所有内容 --- 寻找感兴趣或手头的任务相关的内容
（3）我们善于扫描 --- 生活习惯，找感兴趣的内容
- 用户在网页上看到什么却决于想看到什么，通常为页面的一小部分内容
- 吸引注意力的文字和短语是什么？
（1）与手头任务有关的
（2）我们当前或接下来的个人兴趣
- 事实2 --- 我们不作最佳选择，而是满意即可
- 用户大多数时间不会选择最佳选项，而是选择第一个合理的选项 --- 满意策略
- 为什么不寻找最佳选择？
（1）我们总是处于忙碌之中 --- 最佳策略时间久，满意策略效率高
（2）如果猜错了，也不会产生什么严重的后果
（3）对选择进行权衡并不会改善我们的机会
（4）猜测更有意思 --- 猜测不会像权衡那么累，猜对了，可能看到意外的内容
- 事实3 --- 我们不是追根究底，而是勉强应付
- 勉强应付不仅限于初学者，技术专家也会在理解事物的工作原理上有着惊人的误会
- 原因是什么？
（1）这对我们来说并不重要 --- 明白事物工作机制并不重要
（2）如果发现某个事物能用，我们会一直使用它 --- 如果遇到更好的方法，会用好的方法，但是很少主动寻找更好的方法
（1）用户更容易找到自己需要的东西，对用户和网站都好
（2）用户更容易理解你的网站有哪些服务 --- 不仅仅是用户偶然看到的
（3）引导用户看到你希望他们看到的内容（网站上）
（4）在你的网站上，用户会感到掌控全局，并逐渐成为老用户
第三章：广告牌设计101法则 --- 为扫描设计，不为阅读设计
- 吸引用户的5个重要方面（为下方2-6部分内容）
- 在每个页面上建立清楚的视觉层次
- 尽量利用习惯用法
- 把页面划分成明确定义的区域
- 明显标识可以点击的地方
- 最大限度降低干扰
建立清楚的视觉层次（1）越重要的部分越突出
（2）逻辑上相关的部分在视觉上也相关
（3）逻辑上包含的部分在视觉上进行嵌套
- 一个页面没有清楚的视觉层次，用户会降低扫描页面的速度，会寻找关键的文字和短语，然后拼凑出感觉重要的内容和内容的组织方式，这样会增加工作量
- 习惯用法是你的好帮手
（1）它们非常有用 --- 适当使用习惯用法，让用户访问更容易，减少额外学习工作原理ide成本
（2）设计师通常不愿意利用它们
a.必须确定你在使用一种同样清楚、同样不言而喻，没有学习曲线的方法
b.带来很大的价值
- 把页面划分成明确定义的区域
- 明显标识可以点击的地方
- 降低视觉噪声
（1）眼花缭乱 --- 所有的信息都想吸引用户的目光，没有突出点
（2）背景噪声 --- 页面没有一个地方会造成过分干扰，但是这些很小的噪声太多会惹人厌烦
第四章：动物、植物、无机物 --- 为什么用户喜欢无需思考的选择
- 真正的问题不是到达目标之前要点击的次数，而是每次点击有多难，需要多少思考，多大的不确定性来判断自己是否在进行正确的选择
- 关键：如果用户需要一直在网络上进行选择，那么让这些选择变得无需思考是让一个网站容易使用的原因
第五章：省略不必要的文字 --- 不要在Web上写作的艺术
- 有力的文字都很简练。句子里不应该有多余的文字，段落中不应该有多余的句子
- 去掉没人看的文字的优点有哪些？
- 可以降低页面的噪声
- 让有用的内容更加突出
- 让页面简洁，让用户在每个页面上以言就能看见更多的内容，而不必滚动屏幕
需要去掉的文字是欢迎词和指示说明二、必须正确处理的几个方面
第六章：街头指示牌和面包屑 --- 设计导航
- 如果在网站上找不到方向、人们不会使用你的网站
- 网络导航101法则
- 你通常是为了寻找某个目标
- 你会决定先询问还是先浏览
- 如果选择刘兰兰，你将通过标志的引导再层次结构中穿行
- 最后，如果找不到想要的东西，你会离开
web与生活从空间角度来看的不同点用户使用Web导航是因为需要得知自己当前的位置导航的用途 --- 显而易见的用途- 帮助我们找到想要的任何东西
- 告诉我们现在身处何处
- 导航给了用户一些固定的感觉，让用户感到脚踏实地
导航的其他用途 --- 被忽视的用途- 导航告诉我们当前的位置 --- 告诉网站有些什么，导航表现了内容，导航站点比告诉我们位置更重要
- 导航告诉我们如何使用网站 --- 从哪里开始，如何进行选择
- 导航给了用户对网站建造者信心
Web导航的习惯用法- 网站ID
- 栏目
- 实用工具
- 指示器（指明用户当前位置）
- 下一级栏目
- 页面名称
- 页面导航（当前这一层的内容）
- 小字体版的底端导航
持久导航（或全局导航）：来描述出现在网站每个页面的一组导航元素持久导航应在在整个网站保持一致，使用户只需要了解一次就够了，减少学习成本持久导航的五个元素- 站点ID
- 回首页的方式（Home）
- 搜索的方式
- 栏目
- 实用工具
主页和表单不需要使用持久导航- 主页：承担一些不同的任务，遵守一些不同的承诺，所以不需要使用持久导航
- 表单：在填写表单的页面，持久导航会产生干扰
如何设计Web导航各元素（表格下方为示例 - 亚马逊）导航元素名称细节点站点ID1.在Web上需要在每个页面都能看到网站的名称 --- 页面ID，通常在左上或靠近左上
2.网站ID代表整个网站，也就是说在当前站点结构中层次最高
3.站点ID如何出现在页面可视层次的首要位置
（1）让网站站点成为本页最显眼的内容
（2）让网站ID涵盖页面所有其他元素
4.站点ID需看起来像一个站点ID --- 例如logo
栏目1.栏目（或称主导航条）是到达站点主要栏目的链接，结构的最顶层
2.大部分情况，持久导航也包括二级导航（当前栏目的下一级栏目清单）的显示位置
实用工具实用工具是到达网站中不属于内容层次的重要元素的链接
返回主页Home1.返回主页（Home）的按钮需要始终可见，给用户一种随时可以从新开始的感觉
2.Home的用法
（1）在栏目或使用工具清单中包含一个回到主页的链接
（2）在主页之外的站点ID上小心地加上Home的字样，让用户知道点击它
搜索1.避免混淆的方法
（1）花哨的用字
（2）指示说明
（3）选项 --- 将选项写下来
2.需要对低层次导航给予足够的重视（三级导航）
页面名称1.页面名称的注意事项
（1）每个页面都需要一个名称
（2）页面名称要出现在合适的位置
（3）名称引人注目
（4）名称要和点击的链接一致
指示器1.如何标记当前位置
（1）在旁边放置一个指示器
（2）改变文字的颜色
（3）使用粗体
（4）按钮反白
（5）改变按钮的颜色
2.告诉用户你所在的站点层级结构的前后关系（在网页中的位置）
层级菜单1.告诉用户从主页到当前位置的路径（如何到达）
2.层级导航的最佳实践方式
（1）将它们放在最顶端
（2）使用“>”对层级进行分隔
（3）使用小字体（表明是一种补充机制）
（4）使用了文字“你在这里”
（5）将最后一个元素加粗
（6）不需要把它们用作
页面名称标签1.为什么标签做导航是一个上佳的选择
（1）它们不言而喻
（2）它们很难错过（视觉上与众不同）
（3）它们灵活
（4）它们暗示了一个物理的空间
2.注意事项
（1）正确绘制 --- 激活的标签页在其他标签页之前
（2）颜色编码 --- 提高关注度
示例- 如何评判一个网站设计的好
- 这是什么网站？（站点ID）
- 我在哪个网页上？（网页名称）
- 这个网站的主要栏目有哪些？（栏目清单）
- 在这个层上我有哪些选择？（本页导航）
- 我在导航系统的什么位置？（“你在这里”的指示器）
- 我怎么搜索？（搜索栏）
第七章：首先要承认，主页不由你控制 --- 设计主页
- 主页主要完成的任务
- 站点的标识和使命 --- 告诉用户这是什么网站，做什么的
- 站点层次 --- 提供服务的概貌，包括内容，功能，服务是如何组织
- 搜索
- 导读 --- 需要有内容推介，功能推介
- 友情链接 --- 预留空间放置广告，交叉推广，品牌合作
- 快捷方式 --- 最常访问的内容片段值得在网页上放置链接
- 注册
主页需要满足的抽象目标- 让用户看到自己在寻找东西 --- 让用于想要的任何东西显而易见
- ......还有我没有寻找的 --- 让用户看到一些精彩的内容，就算这些内容用户没有寻找
- 告诉用户从哪开始
- 建立可信度和信任感
主页的常见约束有哪些- 每个人都想占一席之地 --- 推介内容过多
- 想要参与的人太多
- 一个尺寸要适合所有的人 --- 普遍适用于大众
主页需要传达整体形象，让用户一眼就能清楚你的网站是说什么的如何向用户传达网页的整体形象- 口号 --- 靠近站点ID的地方，整个网站的描述
- 欢迎广告 --- 网站的简要描述，在主页的首要位置，不需要滚动屏幕就能看到
传达信息的原则- 需要多大空间就使用多大空间
- 但也不要使用过多的空间 --- 保持简短
- 不要把实名陈述当做欢迎广告
- 最后的是进行测试
口号的注意事项好的口号
不好的口号
清楚、言之有物
含混不清
长度适中，易让用户领会表达思想
太笼统
表达出网站特点和显而易见的好处
把口号（传达某种价值主张）和宗旨（表达某种指导原则，某个目标或某个理想）混淆起来
有个性、生动、有时候很俏皮
- 由于主页独特的职责，通常不必使用持久导航，它们之间的差异
- 栏目描述 --- 主页需要尽可能多的表现网页内容，其他页面不需要
- 不同的方向 --- 主页和其他页面布局不同，主页通常用
- 用于表示的空间更多 --- 主页上站点ID比较大，口号留有空间也较大
让栏目的名称保持不变，同样的顺序、同样的文字和同样的分组，尽可能多地保持视觉提示，同样的字体，颜色和大小写下拉框存在的问题- 用户必须将它们找出来 --- 必须找到下拉框，才能看到下拉列表
- 它们难以扫描
- 不好控制 --- 下拉列表收缩速度难以控制
下拉框对于组织按照字母顺序排列的项目比较有效下拉框的优点是节约空间任何共享的资源（共有区域）都会因为过度使用而遭到破坏 --- 在主页上增加更多的项目所得到的的和付出的并不一致，虽然给推荐栏目巨大的访问量，但是让主页变得混乱，所遭受的损失将由所有栏目承担三、确定你没有做错的几件事
第八章：农场主和牧羊人应该是朋友 --- 为什么Web设计团队讨论可用性是在浪费时间，如何避免这种情况
- 由于各自的职位不同，Web团队成员对于好的网站设计的看法不同
- 通过测试将讨论对错转移到什么有效、什么无效上，测试会让我们看到用户的动机、理解和反应的不同，从而不再让我们坚持用户和我们的想法相同
第九章：一天10美分的可用性测试 --- 让测试简单，这样你能进行充分的测试
- 焦点小组并不是可用行测试，焦点小组是在项目早期阶段，用来收集用户的意见和感觉
- 可用性测试主要是希望得到用户是否知道该网站是做什么的，并且能用它完成一项典型任务
- 测试的作用是什么
- 如果想建立一个优秀的网站，一定要测试
- 测试一个用户比不做测试好一倍
- 在项目中，在点测试一位用户好过最后测试50位用户
- 人们对招募用户代表的重要性评估过高
- 测试的关键不是要证明什么或者反驳什么，而是了解你的判断力
- 测试是一个迭代的过程
- 没有什么比现场用户的反应更重要
寻找能够反应目标群体的测试用户，但别裹足不前寻找的测试用户可以和目标群体有差别的理由是什么差别的原因
例外
实际上，我们都是初学者
如果你的网站几乎只由某一类用户使用，且招募并不难，那就去招募
设计出的网站只有你的目标群体能使用，这通常并不是一个好主意
如果你的目标群体分为几个明显阵营，且各阵营有着完全不同的需求，那你至少要从每个阵营选择用户进行一次测试
专家通常不会介意对初学者来说很清楚的界面
如果使用你的网站需要专业的领域知识，那么你需要在该领域中招募有专业知识的用户
- 进行招募，需要注意的问题是什么
- 提供合理的激励
- 邀请要简单
- 避免对网站（或网站背后的组织结构）进行预先讨论
- 别不好意思请朋友帮忙
测试中遇到的问题- 用户不清楚概念
- 用户找不到自己想要的字眼 --- 网站用来组织内容的分类不符合用户习惯；分类符合习惯但是没有使用他们期望的名字
- 内容太多 --- 减少页面上的干扰；将需要看到的内容涉及的更加醒目
一些关于问题分类指南问题
行为（用户/主持）说明
正确解决方式
忽略Kayak（皮划艇）问题
1.出现问题的人马上发现自己偏离了原来的主题
2.用户尽量回到原来的方向而不需要帮助
3.这种情况并没有扰乱用户的活动
可以忽略
抵制添加的冲动
增加一些内容，注释，指导说明
去除某个让人混淆的内容
不要太看重用户对新功能的要求
抓住能够的着的果子
1.恍然大悟型
2.便宜型
尽量实现变更
- 进行变更
- 只要你进行改变，就要仔细思考它将会影响哪些内容，当你把某些部分调整的更为突出时，想想是不是把其他内容的重要性降低了
四、大的方面和外界影响
第十章：可用性是基本礼貌 --- 为什么你的网站应该让人尊敬
- 降低好感度的方式
- 隐藏我想要的信息
- 因为没有按照你们的方式行事而惩罚我
- 向我询问不必要的信息
- 敷衍我，欺骗我
- 给我设置障碍
- 你的网站看上去不专业
提高好感度的方式- 知道用户在你的网站上想做什么，并让网站明白简易
- 告诉用户，他们想知道的
- 尽量减少步骤
- 花点心思
（1）保证网站准确有用
（2）产生解决我的问题所需要的信息
（3）网站用清楚的方式表达
（4）组织良好，用户可以轻松找到解决方案
- 知道用户有哪些疑问，并给予解答
- 为用户提供协助
- 容易从错误中恢复
- 如果不确定，记得道歉
总结
这本书主要讲了Web设计的一些核心的原则，以及用户在使用Web时的心理，并且基于用户的信息，来设计Web的导航和主页。并且结合实践，在项目中需要不断的进行可行性测试迭代，从而使Web可行。这样的网站才是一个成功的网站，在符合用户的习惯的基础上，让用户能够自行的解决问题，从而达到网站和用户的目的。
资源类：
大家都知道，学习本身是一个特别耗费时间和财力的事情，但是为了自身发展，却不得不学习，而且现在对于职业教育的课程特别贵，并且专业书籍也是非常贵的。虽然说是投资自己，但是对于生活来说还是较大的开销，因此算是众筹了，毕竟一个课程可能动则几千块，但是我并不贪心，所以分享的课程的价格很低，不会超过5块钱吧，毕竟大家都是为了生活，只希望弥补一点生活压力吧，各位加油吧
链接：在线教育视频课（产品设计）
提取码：afvs
链接：
提取码：lizk
链接：
提取码：tr7i
链接：
提取码：dpm3
在线咨询
