‘交互设计’ 分类的存档

• 购物网站交互小体会15点

  日期：2009.12.01 | 分类：交互设计 | 评论数：0

  1.用户注册直接使用邮箱做账号有优势，用户可以少填一个文本框。

  2.能帮用户代劳的（计算、选择框等）尽量帮用户代劳，要经常把主动权交给用户。

  3.注册和登录位置固定，放在顶部是个不错的主意。

  4.帮助最好做成示意图+文字。

  5.面包屑还是要有的最好做的有新意，不要远离用户操作的界面。

  6.随时告诉用户现在的页面情况。

  7.用户填写表单信息时即时验证，验证反馈不一定要用文字的形式，有时候一个简单色块提示效果更好。

  8.在用户购买过程和成功后除了“最近浏览”和“购买过本产品的用户还买过”还可以提供“您可能还对这些产品感兴趣”“捆绑推荐等”

  9.隐藏层可以用的更好。

  10.搜索框做的大点长点是好事，简单也是好事。

  11.信息量大时候采用tab菜单很不错

  12.不要让用户填写重复的信息，不能避免时帮用户copy好。

  13.注册、登录采用了集成页面的话需要明显的视觉区分。

  14.如果相反义的按钮避免放在一起，不能避免时候用视觉反差区分开。

  15.可以适当的对用户公布页面颜色标准。

• 交互设计小贴士

  日期：2009.11.15 | 分类：交互设计 | 评论数：0

  通过创建一个“备忘箱”或剪贴簿来存放你曾经尝试或在别处见过的东西，从而构建你自己的设计观点和方法的档案库。在里面加入一些摘自于杂志和研讨论文的图片、草图和剪辑。经常翻阅它，并反思一下从中你可以学到什么。同时，把你的个人资源与你的同事分享。

  在一个设计项目中，保存你提出的所有东西。你会很容易忘记将过程归档。当你迫切需要某个东西时，白板上却长期空空如也，没有起到提醒的作用。在每天工作结束时，让工作小组的每一名成员审视一下这个记录，并从中选择一项作为第二天讨论的第一件事情。如果你设计的每一个方面都不能合理地说明这个历史记录的一些相关内容，那么，你得仔细思考你的设计是如何进行的。

  时刻关注生活——读一些有关建筑学、人文科学、经济学的书籍和一些最新科学和社会学的调查结果。大量的报刊杂志都会在这方面对你有所帮助——例如：《经济学家》、《新科学家》和《墙纸》。但是要记住，同时精通人文科学和自然科学的人寥寥无几——你周围的其他人将可能补充你的设计。

  如果你的设计中没有将现场（如人种学的观察值和在现场的纵向评估）和非现场（如现场后数据分析和实验室试验）放在同等重要的地位，那么你应当考虑矫正这两点的平衡。
  把程序设计员纳入设计过程中。这样做不仅是因为你想进行联合讨论，而且还因为计算机科学——它就是关于如何对资源和复杂性进行管理和组织的——会提供很多关于如何构造一个界面的信息。

  原文来自Matt Jones和Gary Marsden的《移动设备交互设计》P119

• 填写表单时*（必填）的前后位置杂谈

  日期：2009.11.14 | 分类：交互设计, 设计杂谈 | 评论数：0

  表单，我想大家常常看看到，像登录的，注册的，个人信息填写的等等，随处可见，今天我们主要谈一下关于注册的时候，星号(*)必填放在哪个位置比较合适，更适合用户习惯。
  先看下面三种情况：

  “星号(*)”显示在前面：

  

  “星号(*)”显示在中间：

  

  “星号(*)”显示在后面：

  

  先问下大家：

  “*”放在哪个位置相对合理？为什么？

  讲下我的看法吧：

  首先换个角度看看上面的内容，把过程分成三块：
  *＝提醒
  用户名、会员登录名、邮箱名称＝说明
  文本框＝执行

  大多数人的视觉一般是从左往右的方向，所以这三张图的逻辑流程应该是：

  第一张：显示在前面
  提醒（这是必填的） > 说明（填的是什么内容） > 执行（填写内容）

  第二张：显示在中间
  说明（填的是什么内容） > 提醒（这是必填的） > 执行（填写内容）

  第三张：显示在后面
  说明（填的是什么内容） > 执行（填写内容） > 提醒（这是必填的）

  ===========================================================

  显示在前面：一上来就先提示你一定要执行。（这感觉就好像有人先不告诉你做什么事，但先提醒这件事你一定要做。）感觉好吗？！

  显示在中间：一上来先说明你要做什么事，然后提示这是你一定要执行的。（这感觉就好像有人先和你说要做什么事，然后提醒你这件事是一定要做，接下去你愿意的话就可以做。）比较尊重用户，也比较符合逻辑。

  显示在后面：一上来先说明你要做什么事，然后你愿意的话就执行，执行完后提醒你一定要执行。（这感觉就好像有人先和你说要做什么事，然后你做了，最后才告诉你这是一定要做的。）事都做完了，这时候才知道是一定要做的，对用户来说已经不重要，何况如果不是一定要做的，用户不是可以选择不做吗？

  所以我的结论“*”相对来说放在中间最合理！

• 《web信息架构》-信息架构分四类及分类的方式

  日期：2009.11.14 | 分类：交互设计, 视觉设计, 设计杂谈 | 评论数：0

  信息架构的组件可以拆分成四类

  组织系统
  如何组织信息，例如，依据主题或年代顺序。

  标签系统
  如何表示信息，例如，科学术语（“Acer”）或通俗术语（“maple”）。

  导航系统
  如何浏览信息，例如，通过等级体系的点击。

  搜索系统
  如何搜索信息，例如，对索引系统进行搜索的查询。

  ———————————————————————————————–

  分类信息架构的方式

  浏览Browsing Aids

  这些组件会展现一些预设的路径给用户看，协助他们浏览网站。用户无需清楚地说出查询的内容，而是通过菜单和链接找出他们要的东西。浏览帮手的种类包括：

  组织系统
  网站内容分类或分组的主要方式（例如，按主题、按任务、按用户，或者按年代），也称分类法和等级体系。标签云图（根据用户产生的标签）也是一种组织系统。

  全站导航系统
  主要的导航系统，协助用户了解他们人在网站的什么位置，以及在网站中可以到哪里去（如“面包屑”）。

  区域导航系统
  主要的导航系统，协助用户了解他们人在子网站的什么位置，以及在子网站中可以到何处去。

  网站地图/目录
  支持主要导航系统的次要导航系统，提供浓缩过的总览以及连向主要内容和子网站的链接，通常是采用概要的形式。

  网站索引
  辅助性的导航系统，可以提供排序后的链接列表，连向网站的内容。

  网站指南
  辅助性的导航系统，针对特定主题提供特定的信息，以及连向网站中相关子主题的链接。

  网站向导
  辅助性的导航系统，可以通过一系列的步骤来引导用户，也有连向网站中相关子主题的链接。

  情境式导航系统
  用链接统一连向相关内容。通常内嵌在文字内，一般是用来连结网站中高度专业化的内容。

  搜索Search Aids

  这些组件可以让用户定义查询字符串，然后自动回应一组满足查询条件的结果给用户。可以把搜索帮手当成是动态的、几乎全自动化的一种浏览帮手。搜索组件的种类如下：

  搜索界面
  输入和修改搜索字符串的方法，通常会提供一些教你怎么改善查询的信息，以及其他设定搜索的方式（例如，从特定搜索区域中选定）。

  查询语言
  搜索查询的语法。查询语言包括了布尔运算符（如AND、OR、NOT），相似运算符（如ADJACENT、NEAR），或者是指定要搜索哪个字段的方法（如AUTHOR= “Shakespeare”）。

  查询构造器
  一些提升查询效果的方式：常见范例包括拼写检查器，词干分析、概念搜索，以及从辞典中取出同义词。

  搜索算法
  是搜索引擎的一部分，决定哪些内容可以满足用户的查询。Google的PageRank也许是最著名的例子。

  搜索区域
  网站内容的子集合，已经特别做过索引设计，以满足较细致的搜索（例如，搜索软件厂商网站中的技术支持区）。

  搜索结果
  展示满足用户搜索条件的内容。牵涉到哪些类型的内容应组成为个别的结果，应该显示多少结果，以及结果应如何分级、排序和聚类。

  内容和任务Content and Tasks

  这是用户最终的目标，以及用户达到目标时所需的个别组件。然而，要从信息架构中把内容和任务单独提取出来是很困难的，因为内容和任务中都会嵌入组件协助我们找到方向。嵌入在内容和任务的信息架构组件实例如下：

  标题
  为内容命名的标签。

  嵌入式链接
  文字内的链接，就是连向某些内容的标签。

  嵌入式元数据
  可以作为元数据的信息，但是必须先被抽取出来（例如，在食谱之中，如果有提到某种材料，这项信息可以索引起来，可支持以材料搜索的功能）。

  成块信息
  内容的逻辑单元；这些单元可大可小（如节和篇章都是成块信息），而且可以是嵌套的（如章节是在书本之内）。

  清单
  一群成块信息，或者连向成块信息的链接。这些很重要，因为它们已经按组分类了（例如，具备某些共同特点），而且以特定次序展现（如按年表）。

  顺序式帮手
  暗示用户在某一流程或任务中所在位置的线索，以及完成任务之前还要走多远（例如，在八个步骤中的第三个步骤）。

  标识符
  暗示用户在信息系统中的所在位置的线索（例如，标志指出用户正在使用的网站是什么，“面包屑”表明现在处于网站的哪个位置）。

  “隐藏的”组件”Invisible” Components
  某些重要的组件完全是在幕后执行的，用户很少会和这一类组件交互。这些组件通常会“喂养”其他组件，诸如用来提升搜索查询的词典。一些隐藏的信息架构组件种类如下：

  受控词表和叙词表
  预先确定较佳的词汇，用以描述特定领域（如赛车，或外科手术）。通常会包含其他的称法（例如，“brewskie”是“beer”的另一种称法）。叙词表是通常包含上位类、下位类、相关关系的叙词链接和优选词的说明（也就是“范围注释”）组成的受控词表。搜索系统可以从受控词表中取出查询的同义词以提升查询效果。

  搜索算法
  用于对搜索结果按相关性排序；搜索算法反映了程序设计师对如何决定相关性的判断。

  最佳猜测（Best Bets）
  手动和搜索查询相配的较佳搜索结果；编辑和主题专家会决定哪些查询应该取出最佳猜测，以及哪些文件应有最佳猜测状态。

• 《Web信息架构》-标签系统

  日期：2009.11.14 | 分类：交互设计, 视觉设计, 设计杂谈 | 评论数：0

  标签可以是字、词、词组、一段文字也可以是图片，是一种概念或内容模块的说明或指引（如图１），传递用户并理解。别小看理解，就如同组织系统中说的每个用户对所看到的内容都会有不同的理解，如何做到真的让用户理解你设计的标签是比防偷菜还难的事。

  

  图1(典型的标签)

  这个例子可能会觉的这类标签比较简单，容易理解，但要为一些相对专业性的网站做这类标签就抓狂了，比如：金融，医药，教育，政府（如图２）。

  

  图2(看到这类标签，能想到哪些内容会在相应的标签中呢？)

  标签的分类

  情景式链接：简单说指定的类中放相关的内容。比如看到挂着[化学品]三个字的仓库，没进仓库前就可能联想到三聚氰酸、苏丹红这类。反过来，如果先进仓库看到三聚氰酸、苏丹红，等走出仓库却看到 [食品仓库]时，一定会让人费解。再比如一个论坛的[股票]栏目和一个财经网站的[股票]栏目，在这两个不同情景下（前一种讨论股票后一种观察股票），一个标签的概念就会更让人容易理解。

  标题：比如文章的题目、新闻列表的编号、项目符号(CSS中list-style-type)、图片，这类标签还能区分内容的结构层次。比如注册时的第一步，第二步；读文章时的第一节，第二节。

  导航系统的标签：这个比较常见，就是网站栏目名，关键要分类好相应栏目所包括的内容和取好这个栏目的名字，尽量用一些互联网上常见的匹配，比如[公司新闻]就公司新闻，别写什么[大事记]，[搜索]就搜索，别写[寻找]，别玩概念。如果一定要玩概念，书中还介绍了范围批注的一种方法，就是花时间介绍网站各个[栏目名]的意思，不过现在大多网站通过[网站地图]更清楚的分清栏目的所包括的内容。

  索引术语：将网站中的内容纯粹通过一个个标签的形式组织并列出来，方便有目的用户找到相关标签或让没目的用户看到推荐标签，比如（图3），不过还有一种意义是通过设计好的标签，方便搜索引擎寻找，说白了就如同在GOOGLE搜索关键字的作用(keywords)。

  

  图3（这就是书中例子的变种）

  图标型：通过图形来说明文字表达的内容，这类用法在专业性强的网站上比较受用，所在的情景范围越小就越能突出图形所代表的文字内容。比如你在旅游网站上看到飞机类的图标会想到什么？在一个门户网站上看到飞机类的图标又会想到什么呢？

  设计标签

  尽量窄化范围：这是通过减少网站所涉及的范围，整理网站栏目概念，甚至减少网站内容。

  开发一致的标签系统，而非标签：比如网站首页的栏目和内页的栏目包括命名和顺序都应该是一致的。

  一致性会受到很多因素的影响：风格（标点符号，大小写）、版面形式（内容页的文章有一致的风格）、语法（口气一致）、粒度（代表特定内涵）、理解度（帮助用户想到网站能提供的给Ta内容）、用户（为不同的用户独立设计标签系统，即使这些系统说的都是同样的东西）

  标签系统的来源

  你的网站：做网站时的资料，比如公司要把那些资料，内容放到网上去，按资料属性分分类，按资料格式分分类，按资料作用也分分类，还有，标签＝目的地的标题＝目的地网页的TITLE。

  找同行竞争对手：向QPAI学习做BE TO SEE

  受控词表及叙词表：这概念就是些专业的人给一些特定领域制定了一些精确的表达方式，并且词汇通常是公开的，而且被广泛使用。比如有“沙发”，“可爱多”，“生男生女都一样”这类也算吧

  创建新标签系统

  内容分析：分析文章有代表性的内容，现在QQ空间和蓝色在你写完文章的时间，都会提取这类分析标签。

  内容作者：让作者或者文章相关的研究人员来定义标签，然后专人来统计分析标签。

  用户代言人及主题专家：找用户代表，或者和用户有直接接触的部门、专家，从用户的角度发言。收集资料找出他们认为用户会想在些网站上找到什么。从一小群用户开始，就可以产生足以为网站做索引的标签。我们对用户（外行）有点了解，所以可以做出能适合他们的术语（例如：“种菜”替换“寂寞”）与了解用户需求的人一起工作。

  直接来自用户：开放式卡分类：可以为现有内容按主题分成各自的类别，然后，再为这些类别命名标签。

  封闭式卡片分类：是根据现有的类别区分主题，然后再将内容排序到这些类别。对封闭卡片分类面言，一开始要询问用户，说明他们认为类别标签所代表的意义，然后和你自己的定义互相比较。

  自由列表：选出关键重要的项目或畅销产品，让新用户或者使用者对项目或产品瞬间想出一些字眼予以描述。排列分析字眼，寻找模式和使用频率。

  间接来自用户：搜索日志分析：获取用户实际使用的标签信息，通过哪些关键字搜索来本页中。
  标签分析：如图（3）

  调整和微调

  设计的标签系统必须时常调整和改进。标签代表用户和内容之间的关系，这种关系时常变动。进行用户测试，定期分析搜索日志.

  感谢：http://www.08show.com/ 分享