交互设计:页签的操作方式

从日常理解页签:人们看书的时候,对于长篇的小说内容很难一目了然,不能直白的知道里面都包含哪些信息;也许对每个段落篇章进行分类,会更加形象;在读小学的时候,老师总让我们把那么长的一篇文章进行分段,然后起名,用一句话概括段落思想。

从互联网理解页签:这一类的内容太多了,页面总是不够承载;也许把相似的东西分成一类,用户可能更好理解。很多场景都是我们遇到过,想到过的。那么页签的运用也许可以解决此类问题。

思考页签的定义:可以把内容进行分类 给相似的东西起名 解决页面放不下的问题可以猜到包含的信息 可以作为标记方便查找自己/他们总结的:页签提供了一种在不同的页签项里显示相关信息的方式。页签的优势在于同一个窗口表现更多的相关信息。 Module Tabs(也称选项卡,后文中简称Tab,以便更符合中国设计师的日常叫法) 是一个常见的交互元素——将不同的内容重叠放置在某一布局区块内,重叠的内容区里的每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上,来请求显示该层内容区。

(译注:本文中指的是狭义的 Tab ,指在界面的某一版块区域内所应用的 Tab 设计。实际上,绝大多数网站导航也是 Tab 的一种应用)。

 web界面的设计趋势是缩短页面屏长,降低信息的显示密度,但同时又不能牺牲可视的信息量。在这种趋势下,Tab 这种交互元素成为了一个越来越普遍的应用。 Vista规范中203页开始。标签功能类似于滚动条,以增加有效面积的窗口。所以尽量不要在页签内容区使用滚动条。页签标题内容不能灰掉。

理解的概念:页签至少有2个区域组成:标题区+内容区页签的标题文字要简洁,但是要能够表达内容区域的意思。选中页签表示所在当前页签位置,高亮并突出。选中页签与内容面板形成一个统一的区域(颜色保持一致)。

当前页签只能一个。页签之间要有内容逻辑上的关联性,不能把不相关的东西用页签并列在一起。页签间的内容之间不能存在对比或者递进的关系。页签的显示状态分为未选中态、Mouseover态和选中态三种。页签的操作方式分为鼠标Mouseover激活和点击激活两种。总结的样式:样式上传待续…

时间: 2024-09-20 05:56:43

交互设计:页签的操作方式的相关文章

交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计. 触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别. 手机网站常用交互功能之一"信息连接": 竖屏状态:(图1) (图1)可见 3G门户

交互设计经验谈:移动应用交互设计原则

文章描述:设计在很多时候都是靠灵感的闪现,移动应用的设计则更加的灵活多变,如何能更好地设计出一个应用,没有具体的方法和成规.但是,为了能更好地避免设计师们走弯路,设计原则的学习是有必要的,它给了设计师们一定的参考和指导. 摘要:交互设计专业也有了蓬勃发展,Ben Shneiderman 提出的交互设计"黄金八法"和Nielsen 的"启发式评估10条原则"为交互设计的评估提供了标准.我们在考虑其他原则的基础上,整理了八条移动应用设计的针对性原则. 本文节选自<

移动应用交互设计:手机客户端的交互适配方法

文章描述:本文中,我想简单的总结一下手机客户端的交互适配方法,希望能更好地来指导当前移动应用的设计需求. 简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,

交互设计学习:根据不同需求进行分类

文章描述:交互设计笔记之:小分类,大学问. 也许把分类单独拿出来讨论有些站不住脚,范围大涉及面又广,但不想拐弯抹角,希望能有业内人士不吝指点. 分类(Classification),顾名思义的概括就是分开并且归类.学科上通常对分类的认知有以下三个方面: 1.按照种类.等级或性质分别归类 2.把无规律的事物分为有规律的.按照不同的特点分类事物,使事物更有规律! 3.推测事物间存在的一些自然关系 其实中心意思也是在讲首先区分,其次归类.在产品设计中,分类管理这种东西总是会层出不穷的跑出来让人做抉择,

信息设计和交互设计

文章描述:发现网页中的信息与交互. 两周前,在一家知名互联网媒体公司做内部沙龙交流.有朋友问我,做为产品设计.用户体验师或交互设计师,在设计网站时有哪些事情要做? 互联网发展到现在,各种产品形态种类繁多,眼花缭乱.但再复杂的网站都是由页面构成的,而无论什么样的页面,都只有两样东西需要考虑:一种是让人看的元素:另一种是让人操作的元素.我这样的解释比较通俗,也并没有很好的把概念抽象出来,目的是为了方便记忆."让人用"和"让人操作"这两件事情,就是我们常说的信息设计和交互

LBS产品交互设计:人们为什么签到?

文章描述:LBS产品交互设计:人们为什么签到? 打开微博.开心.人人网上,不经意间会看到诸如下面类型的信息: 这是什么信息呢?心中好奇,打开一看,原来这就是从LBS产品同步过来的签到信息,即使用LBS产品的用户在某地点留下的到此一游印记. 1 有这些LBS产品 从Foursquare推出以后,LBS (基于位置的服务) 产品以新的方式走进我们的视线,也出现了切客(check的音译)一族. 目前主要有3种类型的LBS产品: 1. 签到互动类:以foursquare.whrrl为代表,该类产品以签到

用户体验设计评估:产品交互设计评估

网页制作Webjx文章简介:手机网站交互体验的评估方法. 一.评估的目的 交互设计是一个迭代过程,通过交互设计评估,可以及早发现设计中缺陷,进而能进一步完善交互流程.通过评价,也可发现交互设计中可行.友善.合理或优秀的地方,从而为后续产品的交互设计提供借鉴. 二.评估的标准 手机产品交互设计的评估标准还是是否满足用户体验,当然,体验是一个很虚的东西,没有一个具体的量化标准,那我们就落在实处,从可以量化的维度打分.具体从那几个维度入手,我认为可以分为如下几个,见图1: 图1 交互体验评估维度 1.

手机产品交互设计的评估标准

网页制作Webjx文章简介:手机产品交互体验评估方法. 一.评估的目的 交互设计是一个迭代过程,通过交互设计评估,可以及早发现设计中缺陷,进而能进一步完善交互流程.通过评价,也可发现交互设计中可行.友善.合理或优秀的地方,从而为后续产品的交互设计提供借鉴. 二.评估的标准 手机产品交互设计的评估标准还是是否满足用户体验,当然,体验是一个很虚的东西,没有一个具体的量化标准,那我们就落在实处,从可以量化的维度打分.具体从那几个维度入手,我认为可以分为如下几个,见图1: 图1 交互体验评估维度 1.产

设计分析:交互设计的事件分类

挖坟 交互设计(Interaction Design)产生于二十世纪八十年代,在1984年一次设计会议上,大名鼎鼎的英国交互设计师比尔·莫格里奇首次提出交互设计这个概念,作为一门关注交互体验的新学科而存在并发展到今天,他一开始给它命名为"软面(Soft Face)",由于这个名字容易让人想起和当时流行的玩具"椰菜娃娃(Cabbage Patch doll)",他后来把它更名为"Interaction Design"――交互设计. 思考 交互设计是