大巧不工-WEB前端设计修炼之道

Ajax首先考虑的是数据的缓存问题，服务端缓存做好了，才能正确地使用Ajax

 

第四章

---

对于点击按钮：要给予用户明确的反应，应力感，立体感，以及鼠标移上去出现手套；

在页面设计的时候，记住设计网站的原则就是去掉那些用户可能产生的疑问

Don't Make Me Think

停止你的假设：

1.用户喜欢扫描而不是阅读。

层次清晰，页面要有清晰的视觉层次，这样就可以保证用户能够在很短的事件内熟悉你的页面。

对于逻辑上或者业务上相关性高的部分要进行整合，不同逻辑性的内容间要有明显的边界

2.用户喜欢尝试性选择。

3.用户喜欢勉强应付。

 

导航的信息架构大致分为两种：深窄型与宽浅型

深窄型的信息架构链接数比较少，但是需要更多的点击数。

宽浅型的信息架构链接数比较多，但是需要的点击数比较少。

导航栏的栏目最好设置为5或者9，大脑在短时间内浏览能够记下的数量为7，这就是著名的7+2原则。

 

要可以简单的一键回到首页

 

拒绝写作艺术(擅画者留白，擅乐者希声，养心者留空)

在web页面上 将看得见的文字减去一半，然后再减去一半，文字常常会吸引用户的注意力。

1.首页需要简洁

2.说明也需要简洁

3.试着简化一下

 

在一致的设计原则上，必须做到几个一致：视觉一致，操作一致，内外一致

 

在Web设计中，不管是主页面还是内部的子页面，都要保持一致的视觉效果。色彩是向外界传递品牌识别的一个重要元素，世界级的大公司一直以来都坚持使用相同的色彩，在公众中创造强烈的视觉冲击。

 

第五章

---

布局：

固定的布局：

以像素为单位来对网页进行布局的布局方式叫做固定的布局，表现为无论浏览器窗口怎么变化，内容始终保持固定的宽度。因此，基于1024*768的设计若在800*600下显示将出现横向流动条；

流性的布局：

以百分数而不是固定像素进行宽度设计的布局方式叫做流性的布局，它与固定布局不同的是，当浏览器窗口大小变化时，布局也随之发生变化---缩小或者放大。为了防止过分缩小或者放大影响到布局的美观，往往在布局缩小到一定程度时，使用min-width防止宽度过小而变得很窄；同样的，为了防止在大屏幕显示中布局变得太分散，可使用max-width来设置最大宽度；

弹性的布局：

弹性的布局是相对于以上两种布局方式的一种改进布局，使用字号的相对单位（em）进行设置宽度，其目的是增加阅读性。像素（px）是相对于显示器屏幕而言的，而em是相对于当前对象内文本的字体尺寸的，任意浏览器的默认字体都是16px，1em=16px。所以，在布局宽度上以相对单位进行设置，它的宽度将以相对大小进行显示，不会导致布局错乱，随着字体尺寸的变化，布局会作响应的调整。

 

CSS优先权：

CSS2.1规范决定了这些规则的计算方式，使用一个4位数字串来表示权重，每个选择器的权重决定了使用哪种样式，使用的规则如下：

元素的内联样式属性，加1,0,0,0。

每个ID选择器(#id),加0,1,0,0。

每个class选择器(.class)，属性选择器(如[attr='-'])及伪类(如：hover)，加0,0,1,0。

每个元素或伪元素(例：firstchild)等，加0,0,0,1。

其他选择器(如全局选择器*，子选择器>)，加0,0,0,0。

！important优先权最高。

最后，逐位相加数字串，得到最终的特异值，按照从左到右的顺序逐位比较。

 

用户体验：

可以考虑将注册登录时候跳转的页面做成模态窗口，减少一次页面跳转，提升用户的体验！（使用传统页面方式需要进行页面间的跳转）注册或登录的操作都由Ajax进行处理

 

第六章

---

简洁的设计：37dignal团队的一段话：”坚持做重要的事情，好的创意可以搁置一旁。留下你认为产品应该拥有的，然后砍去一半，把功能削减只剩下最最重要的为止，如此循环“。

 

标签云~以权重表的视觉表现方式，为人们检索信息提供了很大的方便，并着重强调流行的，重要的标签信息；

 

分页的设计：对于省略号，可以这样设计，让用户减少一次翻页的行为，降低页面跳转刷新之类的请求

 

 

第八章

---

Web1.0就好像一个图书馆，它可以为人们提供信息，但是多数人却无法添加或更改信息；而Web2.0则更像一个朋友或社交圈，突出了开放性与分享性，它也可以为人们提供信息，同时人们也可以通过它进行交流，并获得更丰富的体验，可以说它建立了人与人之间的桥梁；对于Web3.0，大家有着一致的理解，网络会更加智能，用户会获得更好的体验。

 

1.Web3.0时代每个用户都会拥有一份自己的个人档案，由这份档案为用户定制个性化的浏览体验。（现在已经有雏形了，比如大数据，比如智能搜索，都是对session进行分析后，搜索最有可能的答案）

2.通用的API也是关键，需要用来获取互联网上的各种资源和服务，为信息和信息之间建立沟通的桥梁。

3。语义识别，对Web3.0来说至关重要，我们要语义化网页，让计算机可以去识别网页

 

语义网：网络能够分析所有的数据：内容，链接，人与电脑之间的交易。

这时候就需要两个帮手-----可扩展标记语言XML和资源描述框架RDF.这些就是描述数据，让数据语义化

 

RDF是一套资源描述框架，在RDF的观点中，几乎世界商店额每个事物都可视为资源。通过这个框架，资源（任何名次，如梅西或巴塞罗那）将与互联网商店额某个URL相对应，这样计算机就能确切地知道该资源是什么。

RDF使用三元组，以XML标记的形式来表示信息，三元组由主体，属性以及客体构成。

 

上述的一些技术基础解决了语义网在资源描述和定位方面的问题，语义网的另一个障碍就是计算机没有词汇的概念。

 

在语义网中，可以通过模式（Schema）和本体（Ontology）来帮助计算机理解人类的词汇。模式是组织信息的方式。本体则是指描述对象以及对象间关系的词汇。通过RDF标记，可以再文档内包含对模式和本体的访问，条件是文档的创建者必须在文档的起始处声明所引用的本体。

 

语义网中使用的模式和本体工具包括：

1）.RDF词汇描述语言模式

2）.简单只是组织系统（SKOS）

3）.万维网本体语言（OWL）