美文网首页
如何设计网站——对Web设计的一点总结

如何设计网站——对Web设计的一点总结

作者: 经济兔兔 | 来源:发表于2020-03-09 22:53 被阅读0次

    在最近的工作中,遇到了导航的问题,无意中发现了找出了收藏已久的《别让我思考》,花了一周时间读了两遍,才清楚的理解导航对于一个产品的重要作用。也更加印证了产品圈中将用户当做小白的理论,其实并不是在产品设计中将一切都为用户标注出来,而是让用户能够通过自己的方式更加轻松的使用产品,这样的产品对于用户来说必定是不言而喻的,也就是主题“别让我思考”。下面是这次读书的笔记,虽然这本书给我很大的启发,但是一切需要归于实践,在实践中验证这个理论。

    一、指导原则

    第一章:别让我思考 --- 可用性第一定律

    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)逻辑上包含的部分在视觉上进行嵌套

    一个页面没有清楚的视觉层次,用户会降低扫描页面的速度,会寻找关键的文字和短语,然后拼凑出感觉重要的内容和内容的组织方式,这样会增加工作量

    习惯用法是你的好帮手

    web的习惯用法

    (1)它们非常有用 --- 适当使用习惯用法,让用户访问更容易,减少额外学习工作原理ide成本

    (2)设计师通常不愿意利用它们

    如果不打算使用习惯用法,需要的做法:

    a.必须确定你在使用一种同样清楚、同样不言而喻,没有学习曲线的方法

    b.带来很大的价值

    把页面划分成明确定义的区域

    明显标识可以点击的地方

    降低视觉噪声

    噪声的分类

    (1)眼花缭乱 --- 所有的信息都想吸引用户的目光,没有突出点

    (2)背景噪声 --- 页面没有一个地方会造成过分干扰,但是这些很小的噪声太多会惹人厌烦

    第四章:动物、植物、无机物 --- 为什么用户喜欢无需思考的选择

    真正的问题不是到达目标之前要点击的次数,而是每次点击有多难,需要多少思考,多大的不确定性来判断自己是否在进行正确的选择

    关键:如果用户需要一直在网络上进行选择,那么让这些选择变得无需思考是让一个网站容易使用的原因

    第五章:省略不必要的文字 --- 不要在Web上写作的艺术

    有力的文字都很简练。句子里不应该有多余的文字,段落中不应该有多余的句子

    去掉没人看的文字的优点有哪些?

    可以降低页面的噪声

    让有用的内容更加突出

    让页面简洁,让用户在每个页面上以言就能看见更多的内容,而不必滚动屏幕

    需要去掉的文字是欢迎词指示说明

    二、必须正确处理的几个方面

    第六章:街头指示牌和面包屑 --- 设计导航

    如果在网站上找不到方向、人们不会使用你的网站

    网络导航101法则

    你通常是为了寻找某个目标

    你会决定先询问还是先浏览

    如果选择刘兰兰,你将通过标志的引导再层次结构中穿行

    最后,如果找不到想要的东西,你会离开

    web与生活从空间角度来看的不同点

    感觉不到大小

    感觉不到方向

    感觉不到位置

    用户使用Web导航是因为需要得知自己当前的位置

    导航的用途 --- 显而易见的用途

    帮助我们找到想要的任何东西

    告诉我们现在身处何处

    导航给了用户一些固定的感觉,让用户感到脚踏实地

    导航的其他用途 --- 被忽视的用途

    导航告诉我们当前的位置 --- 告诉网站有些什么,导航表现了内容,导航站点比告诉我们位置更重要

    导航告诉我们如何使用网站 --- 从哪里开始,如何进行选择

    导航给了用户对网站建造者信心

    Web导航的习惯用法

    网站ID

    栏目

    实用工具

    指示器(指明用户当前位置)

    下一级栏目

    页面名称

    页面导航(当前这一层的内容)

    小字体版的底端导航

    持久导航(或全局导航):来描述出现在网站每个页面的一组导航元素

    持久导航应在在整个网站保持一致,使用户只需要了解一次就够了,减少学习成本

    持久导航的五个元素

    站点ID

    回首页的方式(Home)

    搜索的方式

    栏目

    实用工具

    主页和表单不需要使用持久导航

    主页:承担一些不同的任务,遵守一些不同的承诺,所以不需要使用持久导航

    表单:在填写表单的页面,持久导航会产生干扰

    如何设计Web导航各元素(表格下方为示例 - 亚马逊)

    导航元素名称

    细节点

    站点ID

    1.在Web上需要在每个页面都能看到网站的名称 --- 页面ID,通常在左上或靠近左上

    2.网站ID代表整个网站,也就是说在当前站点结构中层次最高

    3.站点ID如何出现在页面可视层次的首要位置

    (1)让网站站点成为本页最显眼的内容

    (2)让网站ID涵盖页面所有其他元素

    4.站点ID需看起来像一个站点ID --- 例如logo

    栏目

    1.栏目(或称主导航条)是到达站点主要栏目的链接,结构的最顶层

    2.大部分情况,持久导航也包括二级导航(当前栏目的下一级栏目清单)的显示位置

    实用工具

    实用工具是到达网站中不属于内容层次的重要元素的链接

    返回主页Home

    1.返回主页(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块钱吧,毕竟大家都是为了生活,只希望弥补一点生活压力吧,各位加油吧

    链接:在线教育视频课(产品设计)

    https://pan.baidu.com/s/1CqvJixlcarLewUcFYCcJWw​pan.baidu.com

    提取码:afvs

    俞军产品方法论:

    链接:

    https://pan.baidu.com/s/1ws7N0ZrcuiY_GRZ8710zVQ​pan.baidu.com

    提取码:lizk

    梁宁产品思维30讲:

    链接:

    https://pan.baidu.com/s/1KtdGjzV_cAWN8xlrMX7ENg​pan.baidu.com

    提取码:tr7i

    增长黑客:

    链接:

    https://pan.baidu.com/s/1T5lIjrpCu7oc5hYF1hpmag​pan.baidu.com

    提取码:dpm3

    相关文章

      网友评论

          本文标题:如何设计网站——对Web设计的一点总结

          本文链接:https://www.haomeiwen.com/subject/nxcvdhtx.html