当前位置:Web前端 > 其它> 正文

网站友好性的几个建议

时间:2014-4-13类别:Web前端

网站友好性的几个建议

网站友好性的几个建议

1、网站的设计布局合理

在网站每页的设计布局上应该遵循常识惯例,使每一页都做到设计合理,布局协调一致。这就是说,同一页面上使用统一的颜色、标识、协调的导航条、标题和页脚,链接特征一致(如统一使用下划线)。这样有助于亲和浏览者,也不至于使他们对网站产生迷惑从而失去继续浏览的兴趣。

 

2、建立合理的导航结构

设计网站导航菜单时,使用合理的标题和链接描述。就像在某些站点及搜索门户的顶部显示一样,告诉浏览者已经浏览过的类目或网页(如, Hom>Travel>UK>Bristol>Bed&Breakfasts)从而引导浏览者了解整个网站的路径。你可以使用Call-to-Action链接模式引导浏览者查看下一个网页或者采取下一步行动,如,点击这里预定(Click Here to Order),将此页加入标签(Bookmark This Page)或查看目录(View Our Catalogue Now)等。

 

3、使用表达submit事件,不要用click事件;请用表单标签form!

当使用回车键提交一个表单时(或手机上用箭头/输入键),却什么都没发生。只好又用鼠标点击提交按钮,表单终于有了反应,这是一个网页可用性上的问题。用鼠标点击提交按钮,或在手机上关闭键盘然后滚动到页面底部找到提交按钮,这都是讨厌的多余的动作,完全不需要这样做。你只需要使用submit事件,网页就会变得友好很多。

 

4、在设置text-overflow: ellipsis的时候,请在你的网页元素上添加title属性

有些新的CSS属性或属性值是非常的有用,例如text-overflow: ellipsis。程序员以前经常会使用什么方法来实现这种效果。我赞同使用text-overflow: ellipsis,但是,当我用鼠标悬停在这个元素上时,你最好用title属性显示出完整的信息,如果你不想把相同的内容输出两次,你可以使用Js动态的设置title。不管怎么实现,请为用户着想。

 

5、不要忘了:focus:active

很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用:focus:active 标明它们的状态,下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab不键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!

 

6、请使用search/email文本框类型

当在手机或平板等移动设备上填充表单信息时,我遇到了超级麻烦的问题,因为我必须切换键盘模式才能找到“@”字符。我希望Web开发人员都能成熟点,学会使用正确的文本框类型:

例如:

<input type="search" value="" />
<input type="email" value="" />

 

上一篇下一篇

猜您喜欢

热门推荐