web在线设计-如何设计网站——对Web设计的一点总结

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

一、指导原则

第一章:别让我思考---_捎眯缘谝欢_

web设计的终极法则:别让我思考,即看到一个界面应该是_谎远_,_荒苛巳_,_晕医馐_。

强迫我们思考的地方:(1)酷炫的名字或技术名词。(2)看起来不太明显的按钮和链接

当思考时,需要权衡,权衡应该更倾向于“显而易见”,而不行hi需要额外的思考

每个需要思考的地方会加重用户的认知负担,把用户的注意力从要完成的任务上拉开

访问网站时不需要思考的事都有什么?

我在什么位置?

该从哪里开始?

他们把xx放在什么地方?

这个项目上最重要的是什么?

为什么他们给它取这个名字?

如果做不到让一个页面不言而喻,那么至少应该让它自我解释

当浏览网站遇到问题时,用户会认为是自己的错误,而不会责怪网站

如果要让网页有效,它们必须在用户第一眼看到时将自己展示出来,而要做到这一点,最好的方法是创建不言而喻的网页,或者至少是自我解释。

第二章:我们实际上是如何使用Web的---__,满意即可,勉强应付

事实1--_颐遣皇窃亩,而是扫描,寻找能吸引用户注意力的文字或词语(除新闻故事,报告,产品描述界面)

为什么扫描?

(1)我们总是处于忙碌之中---_褂_eb是想节约时间

(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)背景噪声---_趁婷挥幸桓龅胤交嵩斐晒指扇,但是这些很小的噪声太多会惹人厌烦

第四章:动物、植物、无机物---_裁从没_不段扌杷伎嫉难≡

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

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

第五章:省略不必要的文字---_灰_eb上写作的艺术

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

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

可以降低页面的噪声

让有用的内容更加突出

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

需要去掉的文字是_队_和_甘舅得

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

第六章:街头指示牌和面包屑---_杓频己

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

网络导航101法则

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

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

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

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

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

感觉不到大小

感觉不到方向

感觉不到位置

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

导航的用途---_远准挠猛

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

告诉我们现在身处何处

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

导航的其他用途---_缓鍪拥挠猛

导航告诉我们当前的位置---_嫠咄居行┦裁,导航表现了内容,导航站点比告诉我们位置更重要

导航告诉我们如何使用网站---_幽睦锟,如何进行选择

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

Web导航的习惯用法

网站ID

栏目

实用工具

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

下一级栏目

页面名称

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

小字体版的底端导航

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

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

持久导航的五个元素

站点ID

回首页的方式(Home)

搜索的方式

栏目

实用工具

主页和表单_恍枰褂贸志玫己

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

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

如何设计Web导航各元素(表格下方为示例-_锹硌)

导航元素名称

细节点

站点ID

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

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

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

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

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

4.站点ID需看起来像一个站点ID---__ogo

栏目

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)

我在哪个网页上?(网页名称)

这个网站的主要栏目有哪些?(栏目清单)

在这个层上我有哪些选择?(本页导航)

我在导航系统的什么位置?(“你在这里”的指示器)

我怎么搜索?(搜索栏)

第七章:首先要承认,主页不由你控制---_杓浦饕

主页主要完成的任务

站点的标识和使命---_嫠哂没д馐鞘裁赐,做什么的

站点层次---_峁┓竦母琶,包括内容,功能,服务是如何组织

搜索

导读---_枰心谌萃平,功能推介

友情链接---_ち艨占浞胖霉愀,交叉推广,品牌合作

快捷方式---_畛7梦实哪谌萜沃档迷谕成戏胖昧唇

注册

主页需要满足的抽象目标

让用户看到自己在寻找东西---_糜糜谙胍娜魏味飨远准

......还有我没有寻找的---_糜没Э吹揭恍┚实哪谌,就算这些内容用户没有寻找

告诉用户从哪开始

建立可信度和信任感

主页的常见约束有哪些

每个人都想占一席之地---_平槟谌莨

想要参与的人太多

一个尺寸要适合所有的人---_毡槭视糜诖笾

主页需要传达整体形象,让用户一眼就能清楚你的网站是说什么的

如何向用户传达网页的整体形象

口号---_拷镜_D的地方,整个网站的描述

欢迎广告---_镜募蛞枋,在主页的首要位置,不需要滚动屏幕就能看到

传达信息的原则

需要多大空间就使用多大空间

但也不要使用过多的空间---_3旨蚨

不要把实名陈述当做欢迎广告

最后的是进行测试

口号的注意事项

好的口号

不好的口号

清楚、言之有物

含混不清

长度适中,易让用户领会表达思想

太笼统

表达出网站特点和显而易见的好处

把口号(传达某种价值主张)和宗旨(表达某种指导原则,某个目标或某个理想)混淆起来

有个性、生动、有时候很俏皮

由于主页独特的职责,通常不必使用持久导航,它们之间的差异

栏目描述---_饕承枰】赡芏嗟谋硐滞衬谌,其他页面不需要

不同的方向---_饕澈推渌趁娌季植煌,主页通常用

用于表示的空间更多---_饕成险镜_D比较大,口号留有空间也较大

让栏目的名称保持不变,同样的顺序、同样的文字和同样的分组,尽可能多地保持视觉提示,同样的字体,颜色和大小写

下拉框存在的问题

用户必须将它们找出来---_匦胝业较吕,才能看到下拉列表

它们难以扫描

不好控制---_吕斜硎账跛俣饶岩钥刂

下拉框对于组织按照字母顺序排列的项目比较有效

下拉框的优点是节约空间

任何共享的资源(共有区域)都会因为过度使用而遭到破坏---_谥饕成显黾痈嗟南钅克玫降牡暮透冻龅牟⒉灰恢,虽然给推荐栏目巨大的访问量,但是让主页变得混乱,所遭受的损失将由所有栏目承担

三、确定你没有做错的几件事

第八章:农场主和牧羊人应该是朋友---_裁_eb设计团队讨论可用性是在浪费时间,如何避免这种情况

由于各自的职位不同,Web团队成员对于好的网站设计的看法不同

通过测试将讨论对错转移到什么有效、什么无效上,测试会让我们看到用户的动机、理解和反应的不同,从而不再让我们坚持用户和我们的想法相同

第九章:一天10美分的可用性测试---_貌馐约虻,这样你能进行充分的测试

焦点小组并不是可用行测试,焦点小组是在项目早期阶段,用来收集用户的意见和感觉

可用性测试主要是希望得到用户是否知道该网站是做什么的,并且能用它完成一项典型任务

测试的作用是什么

如果想建立一个优秀的网站,一定要测试

测试一个用户比不做测试好一倍

在项目中,在点测试一位用户好过最后测试50位用户

人们对招募用户代表的重要性评估过高

测试的关键不是要证明什么或者反驳什么,而是了解你的判断力

测试是一个迭代的过程

没有什么比现场用户的反应更重要

寻找能够反应目标群体的测试用户,但别裹足不前

寻找的测试用户可以和目标群体有差别的理由是什么

差别的原因

例外

实际上,我们都是初学者

如果你的网站几乎只由某一类用户使用,且招募并不难,那就去招募

设计出的网站只有你的目标群体能使用,这通常并不是一个好

在线web界面设计-如何设计网站——对Web设计的一点总结
答：1.在Web上需要在每个页面都能看到网站的名称---_趁_D,通常在左上或靠近左上 2.网站ID代表整个网站,也就是说在当前站点结构中层次最高 3.站点ID如何出现在页面可视层次的首要位置 (1)让网站站点成为本页最显眼的内容 (2)让网站ID涵盖页面所有其他元素 4.站点ID需看起来像一个站点ID---__ogo 栏目 1.栏...

web在线设计-如何设计网站——对Web设计的一点总结
答：1.在Web上需要在每个页面都能看到网站的名称---_趁_D,通常在左上或靠近左上 2.网站ID代表整个网站,也就是说在当前站点结构中层次最高 3.站点ID如何出现在页面可视层次的首要位置 (1)让网站站点成为本页最显眼的内容 (2)让网站ID涵盖页面所有其他元素 4.站点ID需看起来像一个站点ID---__ogo 栏目 1.栏...

简单的网站设计模板-如何设计简单的网站
答：建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象...

大屏网页设计-如何设计自适应屏幕大小的网页ResponsiveWebDesign
答：1、打开PS,新建空白文档,名称设置为“某某工作室”,从预设大小下拉列表中选择“1024x768”,模式设计为“RGB颜色”,内容设置为“白色”,点击“好”按钮完成文档的创建工作。2、新建一名称为“框架”的图层,利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”,然后将矩形的宽度设置为1024,高度设...

如何制作网站web
答：第一步：建站系统选择 不懂技术和设计的情况下，你就需要用到自助建站系统了，需要找网页制作公司的模板，这样可以让你零基础做出一个比较美观的网站。后台都是可视化操作，模板设计感强，简洁典雅，做出来的网站效果也非常好。第二步：头图设计 访客打开你的网站后，浏览顺序一般是从上至下因此，若想...

网页Web设计流程
答：1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台; 2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航; 3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些...

web页面在线设计怎么做-如何用WEB进行编写简单的在线考试系统?
答：4、Fireworks 由Macromedia(在2005年被Adobe收购)推出的一款网页作图软件,软件可以加速Web设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库,并可与?AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver...

网站建设详细步骤建设完美网站布局的20个步骤
答：Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径,因此我们必须明确设计站点的目的和用户的需求,从而做出切实可行的设计方案。以下是小编为大家搜索整理建设完美网站布局的20个步骤,希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网! 1.先把你的想法画到稿纸上 原始草图:世界...

如何设计开发一个完整的网站呢?
答：Web网站的设计、管理与维护的十二项要点,与大家一起探讨。 一、目标明确、定位正确 Web站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网--这个新媒体上展示企业形象、企业文化的信息空间,领导一定要给予足够的重视,明确设计站点的目的和用户需求,从而作出切实可行的计划。 挑选与锤炼企业的关键...

设计WEB站点的一般步骤
答：(1)对Web站点作出具体的规划 (2)准备Web站点的素材 (3)创建 Web站点和制作网页 (4)测试Web站点 (5)发布Web站点 (6)宣传自己的Web站点 (7)对Web站点进行维护和更新