CSS, 网站可用性

使用基于CSS导航菜单的4个理由

CSS-导航菜单

  导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素。

  虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键,但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人,又不会夺走网站内容的焦点。

(更多…)

网站可用性

三点提示教你如何提高网站可用性

  国际杂志表明:人们在线的阅读习惯和平时的阅读习惯是完全不一样的。这句话对你的网站可用性来说意味着什么呢?为什么我们需要注意这个方面?访问者通常是在非常随意的状态下快速浏览你的站点的。他们急于获取真实的、实用的,并且是有价值的信息。那么,你能承诺满足他们这点吗?

  如果他们不能及时地获取所需信息,那么,他们将离开你的网站。这意味着,你的网站已经失去了卖点,访问者将不会再参与你的网站所组织的任何活动。不用担心,下面的3点提示将会给你带来帮助。它会让你为你的访问者提供所需信息,指出提升网站可用性的方法。您还可以参考暴风彬彬的其它网站可用性教程

(更多…)

JavaScript, 用户体验, 网站可用性

网站可用性研究:页面载入后自动选择表单输入框

网站可用性-自动选择输入框

  大多数网站都很注重自己网站的站内搜索这项服务,在网站首页放置搜索表单以提高网站可用性已经成为网站设计的重要环节。但令人惊讶的是一些网站未能实现在页面读取出来以后自动将光标放在搜索框内,这是的网站用户如果来到网站的第一个动作是搜索,他们需要用鼠标单击搜索框或按下tab键将光标移到搜索框,甚至有少数网站连表单的tab按键索引都没有设置。

(更多…)

用户体验

通过设计提高web2.0网站交互体验的四个方面

  提到web2.0网站,想到最多的便是“交互体验”,那么到底什么是“交互体验”?网站的“交互体验”主要表现在哪些方面?和大家分享一点思考和想法:

  所谓的网站“交互体验”就是用户对网站浏览和操作过程的感受,是对网站设计和功能安排的认知和体会。它包括感官体验、情感体验、思考体验、行为体验四个方面。

1、感官体验

  感官体验,主要指网站给用户留下的第一印象,是漂亮?古朴?简洁等等这些用来形容风景、图画词语都可以来概括用户的感官体验。作为网站交互体验设计的第一层,感官体验主要通过网站的整体形象来创造,核心是网站的主题风格和UI(USER INTERFACE)设计。

  UI设计主要有三个方面,一是色彩,色彩本身是有感情属性的,也是网站给人们的首要感觉,网站色彩的设计要与网站主题和理念相匹配。如红色的可口可乐、蓝调三星、白色GE等等。二是结构,体现在网站的整体布局,体现的是网站的主题和定位,如阿迪达斯的产品体验站和雪花啤酒的活动网站在结构上完全不同,给人们的印象和感觉也是同样;三是网站元素,包括网站使用的flash、图片、文字等数量和搭配,体现网站的整体风格。

  主题风格是指感官形象中独特、持续、一致的品质,这是最能体现网站差异化的地方,UI的设计很多网站都有共同之处,但网站主题风格的提炼和表现都是独一无二的。如可口可乐公司的交互式界面设计以红色、激情、简洁风格为主,而三星的网站则是蓝调、时尚、素雅为主。

(更多…)

网站可用性, 网页设计

世界十大网站十年前的设计风格

  在这个互联网的发展速度正成倍增长的年代,也许很多人会想知道互联网十年前的模样。现在已经是2008年的后半段,回想一下1998年,中国的互联网是怎么样的?世界互联网又是什么样的?那个时候你知不知道有网站这个东西?会不会用电脑上网?下面暴风彬彬将带你回到互联网目前十个比较大的网站十年前,想一想,这是一件多么有趣的事情啊…

  下面列出的是现在全世界互联网技术顶尖的十大品牌,而且他们的网站也有十岁以上!下面来对比一下它们十年前和现在的网站都有什么变化吧…


Amazon(亚马逊)

  轮廓鲜明的导航菜单对于电子商务类的网站是相当重要的,Amazon在这方面做得很好。Amazon的首页内容数量上和十年前相比变化并不大。比较明显的变化就是它把原本在顶部的横向标签式导航菜单挪到了左边的,并变成了多级侧边栏。还有一个变化就是十年前在左侧的搜索框,现在已经挪到了页面的顶部。

十年前

amazon_十年前

(更多…)

CSS, 网站可用性

可用性研究:为文字链接扩大可点击区域

  今天暴风彬彬要讨论的网站可用性技巧,是让你的网站文字链接提高一定的可用性,而且实现起来非常简单,其实这也算是提高用户体验的方法。扩大可点击区域并不是要让你的文字链接占用其他可用资源或增加文字链接的数量。其实很多问题不用暴风彬彬说得很详细,因为现在很多网站(尤其国内)根本没有考虑到文字链接的可用性问题。下面就来看看如何通过设置块级元素(block)和填充(padding)来实现扩大文字链接可点击区域吧。

(更多…)