2009年12月 的存档

没有评论交互设计实用指南(1)–“有效性”之“操作入口明确”

2009年12月28日

door

“操作入口明确”,就是指产品的任何一个功能都要有明确、合理的入口。“操作入口”,指的是产品内部不同模块之间的转接元素,例如在Web产品中,按钮控件、输入框、文字链等都属于操作入口;“明确”指的是入口的视觉感是清晰的、可识别的;“合理”是指入口的出现是符合用户操作逻辑的,适时的。

之所以要提出“操作入口明确”,是因为用户在使用产品的过程中,往往遵循的是可分析的行为逻辑。对于产品本身而言,必须有相对应的操作提示来引导用户最有效地获取信息,还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户,那么操作入口就是连接各个子页面的枢纽。设计师的终极目的, 就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。

对于基于WEB的电子商务而言,核心价值是信息资源,而能否将这些海量数据合理地推送给用户,则是产品生存的关键。操作入口的设计,甚至可以看做 “通过对引导方式的优化间接达到对信息资源的归类”——这很像图书馆中的书类标签管理,用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的,功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感,使其绝望地湮没在茫茫的信息海洋中。所以,明确合理的操作入口设计,是对产品“有效性”的保障,更是对用户体验的尊重。

那么,在具体的设计中如何做到“操作入口明确”呢?
阅读全文…

5 条评论[原创]用JS控制显示子菜单个数 自动下拉

2009年12月25日

今天得到产品经理的一个需求
分类体系 一级分类 以及其子分类 在一个标题栏上展示 只显示5个子分类 其余显示为下拉列表 效果如下图
submenumore
由于对前端比较痴迷 于是乎用前端来实现了一下 之前这样的需求 都是程序员去做判断 来实现的
查看DEMO
下载代码
已在如下浏览器测试 IE6 IE7 IE8 FF3.5.6 Opera10 Safari4
页面结构用前端实现如下

<div class="Area">
  <div id="menu1" class="main_tit">
	<h2><a href="http://www.iamued.com">IamUed.com-前端开发</a></h2>
	<ul  class="sublist">
		<li><a href="http://www.iamued.com">javascript</a></li>
		<li><a href="http://www.iamued.com">Ria</a></li>
		<li><a href="http://www.iamued.com">ActionScript</a></li>
		<li><a href="http://www.iamued.com">Flash</a></li>
		<li><a href="http://www.iamued.com">Flex</a></li>
		<li><a href="http://www.iamued.com">W3C</a></li>
		<li><a href="http://www.iamued.com">xhtml</a></li>
	</ul>
  </div>
  一级内具体内容
</div>

可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁

核心JS代码如下
阅读全文…

没有评论浅析Banner构成与创意设计

2009年12月24日

originality design (33)

  当用户访问一个网站的时候,第一屏的信息展示是非常重要的,很大程度上影响了用户是否决定停留,然而光靠文字大面积的堆积,很难直观而迅速的告诉用户来到这里会得到什么有用的信息,因此网页Banner设计在这里起到了至关重要的展示作用,特别是对于首页Banner,有效的信息传达让用户和文字之间的互动变得生动而有趣,下面就让我们通过大量优秀的设计案例走进Banner设计,走进设计师们的灵感挥洒空间。

  阅读全文…

分类: 视觉设计 标签: , ,

没有评论浅析网页色彩应用

2009年12月24日

浅析网页色彩应用

  在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出几个配色与“关键词”相匹配了。网页的色彩,是访问者登录页面时的第一印象,好的页面色彩能给用户留下深刻的印象,并且能产生很好的视觉效果和营造网站整体氛围的作用。

  色彩是我们接触事物的第一直观认知,在浏览一个新的网页时,第一认知的不是页面的具体结构和信息内容,而且是页面色彩搭配的视觉效果。色彩对于每个人、地域或国家都有不同的情感认知和联想意义,从某种程度看,大多数人对色彩认知和联想是一致的,如红色,人们感觉得喜庆,热闹…再具体到事物会联想到红心桃、草莓等等。在这里简单介绍色彩的情感联想。

阅读全文…

分类: 视觉设计 标签: , , ,

没有评论瞬间的设计(四)

2009年12月23日

五、过渡转化的使用
在《mind hack》一书中,揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力,这正是负责视觉处理的第二块区域的功能。这就说明了“动画”或“动态的变换效果”会成为web界面中吸引人注目的地方。过渡的使用它会造成视觉干扰,扰乱我们的思维,只有在特定的情况下使用特定的方式才能达到到理想的效果。

展开/收起

苹果网站左侧分类导航栏采用了响应式展开收起的动画方式,不仅节省了空间,还把注意力聚焦在当前的tab下面。70618BE7941DDD0F1BE611656977BC15

阅读全文…

分类: 交互设计 标签: , , ,