整理一些网站设计中用到的细节,在此提醒设计师们,有些细些不要搞丢了.因为自己在设计的时候就对这些东西经常不是很在意,以为是很小的事情,结果往往给自己搞出不少的麻烦。可能大家没有我这么粗心,不过还是想提醒一下跟我一样的设计师:细节决定成败。
1.提示信息
用户既然做了,那么是对是错、是好是坏、是成功是失败,总得给人家一个反馈吧?!给他们留一个能看到这些信息的地方吧。
2.帮助提示
当设计表单或者一些操作比较复杂的功能时候,千万不要忘记给这个地方加一个提示(帮助)哦!即使那是文案设计师做的事情,起码也要留一个地方。
3.无结果(404)、无数据页面。
每次做项目都会遇到的页面,逃也逃不掉。
4.文字折行,缺行。
设计师总爱在PS里搞一个最好看的宽度来演示效果,现在注意了:有的时候这些内容不会像你想像的那么听话。一个字符的有,一百个字符的也有,综合考虑下吧。
5.单词过长
这个问题老大难,一个表格(容器)里遇到“64d91eb441377ee66b823e3732f775ac64d91eb441377ee66b823e37…”这样的东西怎么办?
6.label标签
用到checkbox,一定不要忘记加!
7.为你的连接加上title
这个就更不用说了,title=”一定要加啊!”
8.区别
可填不可填要有区别,必填选填要有区别,可点不可点要有区别,可选不可选要有区别,点与不点要有区别……
9.更多
有的时候加一个“更多>>”会让用户发现更多自己需要的东西。
10.翻页
信息多的时候,不要忘记还要翻页的哦!多少条一页?如何翻页?
网页多宽才合适,这个问题可能并没有一个标准,也没有对错之分,可能我们在使用网页尺寸的时候更多的想的并因该是用多大的宽度,而是我们的访问者更适合多大的网页宽度!
1、结论:固定宽度只适合功能型网站,不适合希望用户认真阅读的浏览型网站。UCD大社区是浏览型网站,它的定位是“知识库”,希望你停留在这里认真浏览和阅读。
2、大屏幕不是用来显示更宽文字内容的,大屏幕下必然会面临鼠标长途奔袭的问题。建议用大屏幕的人:为自己的身体健康着想,在大屏幕下阅读的时候,养成缩小窗口的习惯。共勉 :)
3、希望用户认真阅读的网站,主要内容区域的宽度必须固定,不能过长,否则会伤害到阅读者的眼睛,而且不适合阅读的流畅性。固定宽度在650左右最合适。有兴趣的人可以去搜索相关报告,为什么是650左右。(Google是按照英文算的宽度,我们可以按照中文相对调整)
4、一个页面只有一个主要内容区域,其他所有都是辅助内容,能隐藏就隐藏,能忽视就忽视。在用户浏览的时候,辅助内容不要紧挨着主要内容。那样会干扰阅读,侧面影响内容摄取的质量。特别是当辅助内容不能很少的时候。
5、浏览型网站尽量别用三栏,三栏太难设计,一个合理的页面不需要一下子摆出来那么多内容。
6、所以:对于浏览型网站,在大屏幕下,浏览区域和辅助区域需要有分隔。 即使因为不用固定宽度会带来视觉上的不协调。
7、虽然屏幕越来越大,对于一些网站来说1024的宽度不一定会是主流,但至少需要向下兼容这个宽度,把他们作为一个很重要的人群考虑。
8、宽度问题其实是一个蛮值得讨论的问题。在屏幕越来越大,尺寸越来越多样的时候,这个问题会越来越凸显。
但如果纠结于“不要有空白”、“功能和内容不能分开”,没有任何意义。有些可用性原则,没有挑战余地。就好像公共场所的门必须向外打开一样。
9、对于这个问题,设计者应该为用户考虑更有益的方式。而不是听用户说他们想要什么样的方式。因为:大多数嗓门大的用户,并不知道什么样的方式对自己最有益。
10、为了保证更好的阅读体验,UCD大社区的设计者们正在考虑:是否不再录入那些阅读体验很差的网站的文章,或者将这些文章的默认链接改为我们的快照页面(点大社区文章标题前的“望远镜”ICON就是快照页面)。
大尺寸网页并不适合阅读
首先得抛出个重要的前提观点,大屏幕、宽屏幕根本不是为方便“扫视”准备的。所以说以内容为基础的网站设计不用考虑超宽、超大的场景,甚至包括服务类网站都如此。
曾经在800*600为主流时,页面宽度大都以770或780px为标准;在1024*768为主流时,页面宽度大都以950或960px为标准。当时准则很简单,首页固定宽度,因为版面容易控制;内文页自适应宽度,因为可以让更大屏幕(主要是1024*768)用户单屏看到更多内容。
但现在的大屏幕通常得超过17′才算,在这种情况下,全屏自适应的排版模式并不易读。因此我个人认为,在显示器越来越宽、越来越大的发展趋势下,页面宽度还是固定为好,并且应该以适应1024*768为基准,950或960px几乎是用户不扭脖子、双眼扫视的宽度极限。
至于大屏幕应用,主要是为了能放更多窗口,或者特殊的查看、处理超大图片场景。其目地都是为了提高工作效率,使用双屏意义也如此。全屏模式下,自适应页面中间必然大量留白,固定页面旁边必然大量留白。所以回到开篇所述结论,大屏幕浏览页面的良好体验,本就应该用户自己调整窗口,否则无论如何都有鼠标“长征”的弊端。
宽屏幕的意义主要在于让用户看宽幅电影时的体验更好,绝对不是阅读体验。用普通4:3屏幕看宽幅电影必然造成上下留有黑边,本身就是种浪费,与用宽屏浏览网页两边会有留白是同样道理。比如我很少在笔记本上看电影,用笔记本主要是工作和学习,因此我还是喜欢12′普通比例,虽然宽屏笔记本越来越成为主流。
再比如我博客现在风格版面,从06年第一版设计开始就宽度固定,再大再小的屏幕都如此。现在content宽度是几次调整后的结果,固定还是自适应各有各的好处,我不喜欢自适应。在是否需要固定的问题上,我不是很同意白鸦观点,另外大辉、西贝提出的问题,我下周二上班用大屏幕截几个有趣的应用后再探讨。
有人认为“UCDChina网志写的挺好,但实际产出不是一回事。”很多时候,研究而成的总结仅仅在理论阶段,实际应用并接入项目得需要时间。创新必然超前于应用,何况因为我们自身的能力问题,还有很多悬而未决的概念、理论认识错误。
最后回到blog皮肤问题,建议所有写网志“号称”web设计师的同行们自己动手设计blog界面,这是自我能力的最基本展示,欧美同行的成绩大家有目共睹。不同的方向必然有不同创意结果,包括视觉设计、交互设计、界面设计、信息设计都能在各自点上尽情发挥。只有在百花齐放的环境里,国内web design水准才可能得到真正意义上的提高。
好久没有写SEO方面的东西了,今天写了一些关于搜索引擎优化方面的错误,这些错误会导致搜索引擎忽略你、网站访客忽视你,还有可能使得访问者从你的网站流失掉。
用过多的Flash
要知道,由于搜索引擎技术原因,无法检索到Flash中的内容,因此,在网站中使用过多的Flash会适得其反。而且网站使用过多的Flash,会增加网站人力成本,相反,图片比Flash好的多。
没有使用带关键字的链接
对于优化来说,使用带关键字的内部链接和外部链接很重要,比如在其他网站上发布信息,关键字中加入自己网站的超链接。获得了越来越多的关键字链接,就能提高网站的整体权重,搜索引擎也会对你的网站越来越关注。
还有一个注意点,就是在不同的网页上做上不同的关键字链接,因为将这些丰富的关键字散开传播,效果会比单个关键字好的多,而且最重要的一点:事实证明谷歌对页尾并不太重视。
使用相同的标题
搜索引擎排名中有一个因素,就是你网站页面标题。
使用黑帽SEO
黑帽SEO是最没有安全感的,许多企业很喜欢采用黑帽SEO迅速将关键词做上去,但这样是没有安全感的,因为谁都不知道搜索引擎会什么时候下黑手。
一般采用黑帽SEO的手段有:
1、伪装网页。就是在标题上挂一个关键字,里面什么内容都没有;
2、隐藏文字。关键词的文字和网页的背景一样,网友们一般看不出来,但搜索引擎蜘蛛可以抓取到;
3、关键字堆砌。有的网站在head中放置了很多关键字的信息,这根本没有意义,会引起搜索引擎的反感,百度就有一个部门专门处理这些关键字堆砌的网站;
4、桥页。桥页的意思是网站所做的单页优化,目的是为了获得在搜索引擎的排名,所有这样的网页最终是引导到一个真正的网站上,起到一个入口的作用,因此被人们成为“桥页”。虽然搜索引擎都不喜欢桥页,但没办法,目前还没有达到能识别桥页的技术;
5、Alt属性。Alt属性一般加在应该说明的图片、按钮、导航或者其他内容上,愿意是为了让用户更容易了解网站,但也不是所有地方都能加上Alt属性,如果被搜索引擎发现了,就会受到惩罚;
6、垃圾评论。主要是通过博客评论工具来进行垃圾外部链接的建设,同样,通过评论,也是希望能够从博客上来一些流量,不过谷歌现在对垃圾评论控制的很严格;
7、论坛群发。和博客评论工具类似,现在也被谷歌盯得紧;
使用Java的链接
搜索引擎抓很难抓取Java,所以还是尽量选择DIV+CSS。在内容管理系统选择上,尽量选择可以自动生成静态页面、并且代码精简的程序,如dedecms、phpcms等。
友情链接的小注意点
友情链接对于谷歌优化来说,是很重要的一个环节,如果网站的链接超过了100个,那随时都有可能被谷歌惩罚。
经常换名称
如果经常更改文件名称或目录名称,会导致之前收录的页面消失,网站的质量也会随之下降,从而得不偿失。
重复的内容
重复的内容涉及使用相同内容的多个网页,或抄袭其他网站的内容。搜索引擎会自动检测,如果发现了这样的情况,有可能搜索引擎就不会收录,当然,要是有人偷你的原创的话,你可以也到搜索引擎上查询。
总结以下以几个细节:
1:防止K站,不要把自己相互连接的站过多的出现在同一个页面,甚至放在同一个IP上。
2:不要群发,群发的效果没有以前那样显著了,但还是有一些作用的。但要记住,幸福过后就是痛苦。
3:很多站长都拥有几个站,千万不要相互连接,否则会给百度群K留下机会。
4:SEO重要的就是连接,做连接也有一些要说的。比如我要做的关键词:ASP源码,和别人做连接的时候,连接名字尽量用上ASP源码这个词。但不要短时间出现过多的连接,甚至是同一个名字的连接。
5:不要随便删除页面。就算是不想要内容,也不要删,把他改成其他的内容。
一直都对XML有种望尘莫及的感觉,直到看到这篇文章,才终于让我对它的学习有了更进一步的掌握,原来,它是这么的有亲和力。XML、 XLink、Namespace、DTD、Schema、CSS、XHTML这些莫名的单词其实也并没我们想象中的那么无理取闹。如果你是一个XML语言的初学者,那么我强烈建议你把这十个XML自身特点的描述看完,你可以清晰明了地掌握到XML的一些基本概念,然后消化掉,最后应用到自己的程序设计中去。
首先,需要指出的是文章来自网络,英文原文为W3C.org官方发布: XML in 10 points中文翻译具体不祥。
1. XML是用来组织数据结构的
结构数据包括如: 电子数据表、地址簿、控制器参数、财务交易及技术绘图等。XML是一系列文字格式设计的规则(也可称之为指导方针或惯例),来帮助你组织数据结构。XML不是一种程序语言,所以你不必一定是程序员,同样可以使用或学习它。XML使计算机简单地生成及读取数据,并确保数据结构精确。XML避免了一般语言设计的缺陷:它是可扩展的、跨平台、支持国际化及区域化的格式,绝对支持Unicode格式。
2. XML类似于HTML
和HTML一样,XML是使用标签<tags>(使用 “<”和”>”包含)和属性(以”name”=”value”的形式)。一旦HTML指定了每一个标签和属性的定义,一般文字在浏览器中表现的形式后, XML只使用这些标签来界定一些资料的特殊意义,但整体句子的意思则随个别应用程式读取时界定。换句话说,如你看到一个XML档中的 “<p>”, 千万不要以为是段落的意思。根据XML上下文的解释,它可能是一个价?quot;price”、一个参表”parameter”、一个人 “person”、或…(这样谁可以界定一个”p”字的定义呢?)
3. XML是文字, 但不是被阅读的
制作电子数据表、地址簿及其它结果数据的程序一般是存储在磁盘中,以二进制或文字格式储存的。其中文字存储格式的好处是,人们在需要时阅读这些文字,而不须制作文件所用的程式; 另外, 你也可以用你喜爱的文字处理器来读取文件。文字格式也容许开发者更容易地理解应用程式。如HTML,XML档是一些人类无需阅读,但若有须要时亦可阅读的文字档案。不太像HTML,XML的规则是非常严 格。若忘记了一个标签或属性漏了一个引号便使这个XML档无法执行,但在HTML内这些错误却可以接受的。正规的XML定义防止程式尝试去猜测这个已被破 坏的XML档的意思;若发现一个被破坏了的档案,应用程式便会立刻在那儿停止并报告发生错误的讯息。
4. XML是很详尽的
因为XML是文字格式及其为使用标签来解放资料,XML文件差不多比所有以二进制格 式的文件档大。这点往往是XML设计者必定留意及考虑的。文字格式的好处是一切都很清楚(看上文第3点),但亦有不同程度的缺点。磁盘空间的价钱比以前大 幅降低;而其它的文件压缩程序如zip和gzip便能简易快捷地把文件压缩。此外,网络上的通讯协议,如数据机通讯协定及HTTP/1.1便可以在传送时 把资料压缩,节省效能跟二进位格式的文件同样有效率!
5. XML是一个技术大家族
XML1.0界定标签”tags”及属性”attributes”的定义。在 XML1.0以外,”XML家族”是一项成长中的技术专案以提供有用服务予以配合多项重要及须求率高的工作。XLink解释了怎样加入连结至一个XML 档。XPointer及XFragments文件部份发展的语法。XPointer有点像URL,但除指向一个网上文件外,它亦指向一件在XML文件内的 资料。CSS~界定文件式样语言,使用在XML上跟在HTML无异。XSL是表达版面式样”style sheets”的进阶语言。以XSLT,一种用作重新排列、加入或减除标签及属性的转化性语言为基础。DOM是用来从一种程式语言中,叫取XML档(及 HTML档)的一组标准。XML Schemas 1和2帮助开发者精确地界定它们自己的一套XML基础格式。还有其他种类的专案和工具可供考虑或正被开发中。可多留意W3C的技术报告。
6. XML是新事物,但不是全新的产物
XML的开发始于1996年,并于1998年2月成为W3C的推荐文 件;这可能使你认为这是一项并不十分成熟的技术。但事实上,这项技术并不如想象中的新!在XML之前曾有80年代初开发的SGML,一项自1986年有 ISO标准及被广泛地使用在大型文件策划专案中。HTML从1990年起开发。XML的设计者只要把SGML中最好的部份,以发展HTML的经验指引来开 发一些不逊于SGML,但比之更有规范和可更简易地使用的技术。虽然有些时候很难分辨演变和革命的成就…但可以确定的,是当SGML被广泛地使用在技 术文件而被其他种类的资料所疏忽时,XML的情况是刚好相反的!
7. XML带领HTML至XHTML
一个重要的文字性质的XML应用程式:W3C的XHTML,一个接替 HTML的格式。XHTML有许多跟HTML一样的原素。有一些语法为了配合XML规则而改变了。一份使用”XML基础”的文件代替及限制了XML的语法 其在某些方面的用法(例如:XHTML容许”<p>”但并不接受”<r>”);它更加入一些意义到语法上(XHTML指定 “<p>”的意思是段落”paragraph”,而不是价格”price”或人”person”或其他事物)。
8. XML是模块化的
XML容许你利用合并及再使用其他格式来自定新的文件格式。因为两种独立开发的格式可 能包含一些原材料或称号用着同一名称,所以当合并使用这些格式时得特别小心(如”<p>”在一份文件代表”段落paragraph”是否可能 在另一方代表”人物person”呢?)要解决当合并使用两种格式时出现名称混淆的问题,XML提供了一项名为namespace的概念。XSL和RDF 正是用了namespaces的以XML为基础的格式。XML Schema以简单的方法来合并两种规格以演变出包含了两种规格的第三种格式,是用来反映出在界定XML文件结构时用以引导的支援。
9. XML是RDF及Semantic Web的基础
XML提供了一个规范的守则予W3C的RDF,一种 用以表达资料(事实上,基本上是为知识)的语言。RDF就像一个网上连结的下一个层面。一般网上连结把一些文字连接到一些没有固定关连的事物上,唯RDF 可以把任何事物在连结起后给予一个关系名称:如”甲是乙的价格”可以是一件物品和一个价格总和的关系;又如”甲比乙重”可以是两个总和的关系;又或”甲是 乙的原因”可以是沐浴和你身体湿了的关系。当你在知识沟通的时候,不论是以XML/RDF或是以纯英语,人或机械上均须要同意某字词在某方面的用途。一系 列特定的文字可以用来形容一些特定的生活方式(从”购物”至”数学逻辑”)便称之为”Ontology”。RDF, Ontologies及其代表意思,使电脑可以帮我们执行所有Semantic Web活动。
10. XML是没有版权限制、跨平台独立且维护方便
当你选择XML为你计划的基础,你就像已得到一 些庞大及增长中的工具(其中一些可能已做到你所需要的)及工程技术员多年积累的技术经验。选择使用XML就像在进行资料库管理时选择SQL的程序:你依然 要建立你自己的资料库及你自己的程式及步骤来进行,及有许多工具和许多人来协助你。由于XML是没有版权限制,你可以建立你自己一套软体而无须支付任何费 用予别人。而庞大及增多中的支援意谓你无须依赖任何单一商号。 XML虽并不永远代表是最好的方案, 但永远值得你考虑。
从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮助的。这些技巧并不依赖于特定的主题或模板,所以会适用于多数情况下的设计。不罗嗦了,我们开始吧!
1.改善链接体验
网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素。如下图,用高亮来区别可点击区域。
显然,可点击的区域越大,用户点击就容易。在没有指定宽度的时候,将链接转换为块元素,可以使文字链接的可点击区域扩大到为整个容器的宽度,这样的设计尤其适用于侧边栏的链接。这个技巧可以通过如下CSS实现。
a {
display: block;
padding: 6px;
}
注意:由于转换为块元素只对链接的宽度起作用,所以需要设置间隔(padding)来保证块在纵向的间距。
2.按钮也需要排版!
设计的每一个细节失误都有可能把完美的产品变成平庸,比如按钮、Tab这样简单的界面元素,由于用户每天都会点击无数次,也需要适当的进行排版。请看下面一些例子:
乍看起来上图没有什么问题,仔细观察可以发现,按钮和select的文字都偏上,原因就是将小写字母作为了排版的基准,小写字母居中时,整个文字的位置就会显得偏上。
就像上图中,如果按钮上的文字包含大写字母或一些较高的小写字母,如”t,d,f,h,k,l”的时候,文字就会显得偏上。所以,通常应该把大写字母作为定位的基准,或者在小写字母较多时,稍微将文字的位置向上移动。
上面的文字排版使按钮看起来更舒服,注重像这样的小细节对界面设计大有帮助。
大头:虽然中文没有大小写字母的问题,但也有很多页面设计时不注重按钮的文字排版,导致错位。