企业资源管理系统EnterpriseResourcePlanning.ppt

企业资源管理系统企业资源管理系统 Enterprise Resource PlanningEnterprise Resource Planning 2 人机交互技术人机交互技术 n人机交互的概念 n人机交互（Human-Computer Interaction，HCI）是关 于设计、评价和实现供人们使用的交互式计算机系统 ，且围绕这些方面的主要现象进行研究的科学。狭义 地说，人机交互主要是指人与计算机之间的信息交换 ，主要包括人到计算机和计算机到人的信息交换两部 分。 n人机界面（Human-Machine Interface，HMI）作为计 算机系统的重要组成部分，主要是指人类与计算机系 统之间的通信方式，包括人机双向信息交换的支持软 件和硬件。 3 人机交互技术人机交互技术 n交互设计（interaction design）指的是“设计支持 人们日常工作与生活的交互产品”。具体的讲就是关 于创建新的用户体验的问题，其目的是增强和扩充 人们工作、通信及交互的方式。交互设计主要研究 如何确定人机通信的方式人机界面，侧重于人 机交互通信方式的设计过程和设计方法，而人机交 互技术则侧重于研究这种通信方式如何用软硬件实 现。 4 人机交互技术人机交互技术 n人机交互的相关学科 n认知心理学 n研究人的高级心理过程，主要是认识过程，如注意、知觉 、表象、记忆、思维和语言等，从心理学的观点研究人机 交互的原理。 n人机工程学 n人机工程学是运用生理学、心理学和医学等有关知识，研 究人、机器、环境之间的合理关系，以保证人们安全、健 康、舒适地工作，从而提高整个系统功效的新兴的边缘科 学。 多媒体技术虚拟实现技术 认知心理学人机工程学 人机交互技术 5 人机交互技术人机交互技术 n多媒体技术 n一般地，多媒体技术是指将文本、声音、图形、静止图像、 动态图像等与计算集成在一起的技术。 n虚拟实现技术 n虚拟实现（Virtual Reality，VR）就是借助于计算机技术 及硬件设备，建立高度真实感的虚拟环境，使人们通过视觉 、听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起 来像真实的，以产生身临其境的感觉的一种技术。 6 人机交互技术人机交互技术 n人机交互的研究内容 n人机交互界面表示模型与设计方法（model and methodology） n可用性分析与评估（usability evaluation） n多通道交互技术（multi-modal） n认知与智能用户界面（recognition and intelligent user interface） n虚拟环境（virtual environment）中的人机交互 nWeb设计（Web-interaction） n移动界面设计（mobile and ubicomp） n群件（groupware） 7 人机交互技术人机交互技术 n人机交互在网站设计中的运用 n网站设计可以看成人机界面设计的一种，通过网站界面， 人与计算机即展开了交互的过程。把人机交互技术运用在 网站设计中，可以对用户有更深入的了解，从心理学，工 程学方面来考虑用户的使用感受，将设计出更贴近用户的 网站。 n视错觉 n阅读 n关注 n感知和识别 n学习 8 网站设计方法 网站的定位 n产品定位 n把网站作为一个互联网产品，其定位首先要确定面对的人群是什么 。 n在考虑网站的产品定位的过程中，必须先考虑以下几个问题： n产品的条件是什么？它具有哪些优势和特色？ n产品是否能满足一部分人的需求？ n产品收益来自于哪里？它的运作模式是怎样的？ n产品的阶段性目标是什么？ n在实际操作中，网站的产品定位多数是由创办人的主观意向决定的， 但一定通过较全面的考虑，并具有一定的社会基础，或是为解决社会 中的某一突出问题。一旦确定了产品定位，就可以对产品的各方面属 性提出具体的要求，制定出详细的目标计划和测评标准。 9 网站设计方法 网站的定位 n企业与品牌定位 n企业定位是指企业通过其产品及其品牌，基于顾客需 求，将其企业独特的个性、文化和良好形象，塑造于 消费者心目中，并占据一定位置。企业定位是个较模 糊的概念，其主要表现为品牌形象。对于网站的定位 ，则更偏向于品牌形象的塑造。 n品牌定位是指企业在市场定位和产品定位的基础上， 对特定的品牌在文化取向及个性差异上的商业性决策 ，它是建立一个与目标市场有关的品牌形象的过程和 结果8。 10 网站设计方法 网站的定位 n市场定位？ n产品、品牌的定位都离不开市场，市场才是网站真 正能够生存的因素。 n要确定市场在哪里。 n人是市场的主要因素，但不是有人就有市场。 n要在不同阶段选择不同大小的人群。 11 网站设计方法 网站的定位 n设计定位 n设计定位作为一种设计策略,将模糊的需求清晰化, 限定设计活动的范围,使设计师可准确快速的设计出 有特色的产品,以达到与竞争对手区分并吸引消费者 注意的目的,并可塑造出产品或品牌的自我优势 9 。 12 网站设计方法 网站的定位 设计 商业研发 人员 社会技术 艺术 什么是有用并可 以产出的 什么机会是不可放过并 能够抓住的 什么是可行的，会被接 受并获得支持的 什么是它的结构和特点 什么形式是可行的 什么是可能的什么是社会趋 势所向的 什么是影响变革 的形式 什么是有用的、可用 的和被需求的 什么是从商业角度可行的什么方案是容易实现的 13 网站设计方法 n明确网站主题 n明确网站的主题至关重要，如建立网站是为了销售 产品，还是为了进行商业服务。网站的目标用户是 哪些，他们能从网站上的到些什么信息。打算从网 站中获得怎样的回报。 14 网站设计方法 n分析网站材料 n网站材料的分析，一方面能够帮助分析客户的资料 ，对网站将要传递出的文化内涵有一个初步的了解 ，同时，当客户提供的资料不足时，可以给予正确 的反馈意见。另一方面，当设计者对行业有了一定 的认知后，能对同类网站有较好的鉴别。同类的网 站并非都是优秀的，从设计形式到内容编辑，均有 优点和劣势，吸取同类网站的长处，更能帮助网站 设计人员找出自己的优势，进一步明确自己网站的 主题。 15 网站设计方法 n确定目标用户 n目标用户是指接收并理解网站建设方通过网络媒介 传递的信息的个体。用户和目标用户并不相同，用 户仅仅指点击了这个网站的个体，他可能只是无意 中浏览了这个网站，并在快速的浏览之后关闭了浏 览器，而目标用户却是网站真正想要传达其思想的 个体。网站不可能使每一个用户满意，但至少要做 到使目标用户满意，更好的结果是通过好的网站设 计能把用户转变为目标用户。 16 网站设计方法 n分析用户的普遍性 n分析目标用户的特殊性 n用户并不是越多越好 n目标用户模型 17 网站设计方法 n确定用户需求 n需要产生需求 n根据用户的需求设计网站 n需求类型 n如何确定需求 18 网站设计方法 n创建与管理网站信息 n创建信息 n信息的来源主要是针对目的而言，要明确对于网站的主题来说，哪些 信息是必须有的，哪些信息是希望有的，哪些信息是可以没有的。必 须有、希望有、可以没有的信息，表明了它们对网站的重要性。 n编辑信息 n信息编辑是网站编辑的工作，形式与内容大有学问。 n在琳琅满目的互联网上充斥着海量信息，要想一下子找到对浏览者有 用的信息并不容易，所以作为网站设计者，想要尽快地抓住浏览者的 眼球，信息标题和信息摘要就成为了最关键的一环。 19 网站设计方法 n网站策划 n网站策划，不仅要考虑网站的主题、定位，还要涉及相 应的分析调查、硬件预购、执行流程、人员分配等具体 事宜。根据每个网站的背景及建设实力等不同情况，策 划书的内容也需要做相应的调整。 20 网站设计方法 n（1）背景介绍 n（2）市场分析 n（3）建设目的及网站定位 n（4）技术解决方案 n（5）内容规划 n（6）页面设计 n（7）流程及人工 n（8）网站维护 n（9）发布与推广 21 网站设计方法 n设计网站 n网站设计主要包括导航、版式、色彩、风格等与视 觉设计密切相关的网站元素。网站设计不仅要考虑 视觉上的美观，还要结合可用性来共同设计。 22 网站设计方法 n网站设计要点 n用户通常是扫描网站，而非仔细阅读 n尽量使用习惯用法 n实现网站的可访问性 n让用户随时了解系统的状态 n给予用户自主权和控制权 n提供错误预防功能和纠错功能 n兼容不同的浏览器 23 网站设计方法 n测试网站可用性 24 网站网站元素元素设计设计 n网站元素设计 25 网站网站元素元素设计设计 n菜单 n网站中最直接的导航方式，一般分为横向、纵向两种 ，可以有二级菜单项（一般不超过2级）。网站为了体 现其某些（时尚）元素和独特风格而常使用flash来制 作菜单以达到绚丽的效果。设计样式将菜单分为四类 。 26 网站网站元素元素设计设计 n传统菜单 n所谓传统菜单，是指最简单的一行或一列菜单项，直接点 击链接到目标地址。这类菜单具有简单、清晰的特点，因 其菜单项只有一排，链接数量有限，只适用于分类较少的 网站。 n传统动态2级菜单 27 网站网站元素元素设计设计 n伸缩式菜单 n伸缩式菜单是指将菜单做成类似树形展开/合拢的效果，但只 限于2级菜单。伸缩式菜单通常在纵向菜单中使用，常见的是 用在网站后台管理的左侧菜单上，也会在商城的会员中心或产 品分类中使用。 n列表式 n分列式 n自动罗列式 28 网站网站元素元素设计设计 n列表式：通常在产品品牌分类中使用，品牌名称比较长， 品牌之间既是同等的又有销量排名之分，用一列显示可以 较灵活地满足需求。 n分列式：将子类分成两列或多列显示，通常为横向分类， 即类与类之间没有共同点，只是同属于一个大类而已。分 类名称短且无关联，以一种整齐清晰的方式列出，既容易 查找又无需担心排列的顺序。 n自动罗列式：将子类依次列出，由外层控制菜单宽度，由 浏览器自动换行。这种方式主要用于横向分类不明显、类 与类之间有相似交叉且类名长度不确定的情况，既不浪费 空间，又可以抵御样式表加载失败而导致排版混乱的风险 。 29 网站网站元素元素设计设计 30 网站网站元素元素设计设计 n组合菜单 n所谓组合菜单，可以理解成用各种不同的方式方法灵活设计 出来的菜单。这里说的各种不同的方式方法，包括纵向的、 横向的、静态的、动态的、排列的、自动的、文字的、图文 并茂的，只要是能达到好的效果都可以拿来用，就看如何将 它们灵活地组合起来。 31 网站网站元素元素设计设计 32 网站网站元素元素设计设计 n形象菜单 n使用形象菜单的好处：用小图标来标识，并加以文字说明 ，使表达的内容更加清晰，也使用户更加容易找到。因为 形象思维比逻辑思维更易辨别和记忆。 n日历式搜索导航 n游标式导航 n动态视觉焦点导航 33 网站网站元素元素设计设计 34 网站网站元素元素设计设计 n四种菜单比较 35 网站网站元素元素设计设计 n导航 n导航给了浏览者一些固定的感觉，它告诉我们当前的 位置，通过层次结构的可视化，导航可以告诉我们网 站上有什么，导航表现了内容。导航还告诉了浏览者 如何使用网站，它会含蓄的表达该从哪里开始，能进 行哪些选择。 36 网站网站元素元素设计设计 n导航设计要点： n（1）导航应该是持久的在网站的每一页中以 相同的外观出现在相同的位置，这样会让浏览者确 认自己仍然在这个网站上，这一点非常重要，并且 可以使整个网站保持一致的风格。 n（2）在导航中突出显示当前位置。要抵消浏览者 在网络中固有的空间迷失感，需要在导航中标明当 前所在的位置 n（3）导航的风格将对页面整体风格产生极大影响 。 n（4）网站可以存在多个导航。 37 网站网站元素元素设计设计 导航栏 n导航条的目的是让网站的层次结构以一种有条理 的方式清晰展示，并引导用户毫不费力地找到并 管理信息，让用户在浏览网站过程中不至迷失。 n本文所指的“导航栏”，不是“菜单”的含义，正如“ 导航条”的定义一样，这里突出的是网站的层次 结构，即能完全体现并引导分级查找的导航工具 ，换言之，导航栏就是网站的“目录索引表”。 38 网站网站元素元素设计设计 导航栏 n树形导航栏 n最常见的导航栏形式应该是BBS的树形导航，通常BBS除了 美观的网站式的模板外，通常还有一个简洁的导航式模板 。 n层次清晰； n结构完整，覆盖全面； n伸缩自如，可观性强； n即时定位，查找便捷。 n通常论坛还提供收藏、书签等功能，将这些功能整合在导 航栏中，用户就能随心所欲地浏览其关心的内容了。 39 网站网站元素元素设计设计 导航栏 n隐藏导航栏 n隐藏导航栏不是指导航栏的布局特征，而是指它的存在形 式。顾名思义，就是把导航栏隐藏起来，放在日常工作区 域之外。在软件的人机交互理论中有这么一条公理：为典 型的导航调整界面。那么，在Web设计时，同样要考虑导 航的界面问题。网站的最终目的不是让用户来使用这些导 航工具，而是让用户最大效率地从网站上得到想要的信息 。因此，在界面设计上就要把更多的空间留给网站的主体 内容。 n这里列举三种隐藏的方式： n伸缩式 n隐藏式 n简略式 40 网站网站元素元素设计设计 导航栏 41 网站网站元素元素设计设计 网站地图 n网站地图是一个网站所有链接的容器。它为所有 的搜索引擎程序提供食物。网站地图应该要包括 网站的主要网页的内容链接或者栏目链接。根据 网站的规模大小，页面数量的多少，它可以链接 部分主要的或者所有的栏目页面。搜索引擎程序 得到网站地图页面，就可以访问站点地图上提供 的所有网页及栏目。 42 网站网站元素元素设计设计 网站地图 n结构式地图 n结构式地图，是以树型结构为骨架组织的网站分级 内容链接图，它将网站的主体结构清晰地展现出来 ，有助于用户了解整个网站的组织关系，也更容易 根据层级找到相应的链接，如图 216所示。 n分层结构清晰 n同级排序自然 n数据易读易维护 n便于搜索引擎检索 43 网站网站元素元素设计设计 网站地图 44 网站网站元素元素设计设计 网站地图 n列表式地图 n列表式地图是以目录形式列出网站的模块结构。 n从用户的视觉习惯角度而言，列表式的地图因为是目录形 式，相比于结构式地图，可能更易于被用户接受，毕竟人 们从小自接受学校教育开始就习惯了书的目录查阅方式。 从页面的美观角度而言，列表式地图也比结构式地图显得 更加规整、悦目。从网页的设计与开发角度而言，列表式 更便于用块元素来展现，也更易于网页的排版设计。 45 网站网站元素元素设计设计 网站地图 46 网站网站元素元素设计设计 网站地图 n连通式地图 n连通式是最复杂的一种地图展示方式，却也是最真实体 现网站内链接关系的方式。比如，网站首页可以链接到 其下所有的频道首页，频道1的首页可以链接到其下的 所有栏目，网站首页有某一专题的链接入口，同时该专 题又属于频道1中的内容，等等。这些关系都要在连通 式地图中展现，换言之，网站的连通关系即为以链接为 关系纽带而形成的网站内容的关联。 47 网站网站元素元素设计设计 网站地图 48 网站网站元素元素设计设计 网站地图 n连通式地图具有以下几点特征： n层次表现形式不明显 n双向链接 n跳级链接 n多维层次结构 49 网站网站元素元素设计设计 n主页 n主页是一个网站的门面，网站的风格从主页就可见一斑 ，因此主页的最重要的工作就是要传达网站的整体形象 ，使浏览者看一眼就可知道这个网站是干什么，想要表 达什么。 n 50 网站网站元素元素设计设计 n主页设计要点： n（1）主页中可以完成的任务：网站的标识、网站层 次、搜索、导读、内容更新、友情链接、快捷方式 、注册、建立可信度和信任感。以上这些内容组成 了网站的整体形象，都有助于帮助理解这个网站是 做什么的。 n（2）主页布局分配要合理。 51 网站网站元素元素设计设计 n版式布局 n在浏览器空间中，按照一定的视觉表达内容的需要 和审美的规律，结合各种平面设计的具体特点，将 信息内容和页面视觉元素加以组合编排，就是网页 版式布局。 n版式布局设计要点： n（1）版式布局可带有创新。 n（2）网站布局与信息量多少有关。 n（3）版式布局一致性。 52 网站网站元素元素设计设计 n色彩 n鲜明的色彩具有引人注目、打动人心的力量。当色彩 吸引了浏览者的视线后，色彩所表现的形象和内容等 一切信息也同时进入了浏览者的脑海中，能起到先声 夺人、快速传递信息的作用。借助于色彩的不同处理 ，使网站易于人们认知识别，有助于创造个性的网站 形象，从而起到强化信息记忆，使网站形象深刻的作 用。 n 53 网站网站元素元素设计设计 n主色 n在网站上，面积最大的色彩为网站的主色调，主色 调贯穿网站中所有的页面，出现次数最多。主色调 在创造特定的气氛与风格上发挥主导作用。例如以 红色为主色的网站，多给人热情、积极和温暖。而 以蓝色为主色的网站却使人联想到智慧、诚信和高 科技。 n辅色 n主色掌控整个画面色彩气氛，而辅色面积小，起强 调或缓冲的作用。起强调作用的辅色是空间中动感 和活力的来源，还可以因其使主色在整个网页中得 到连贯。辅色一般为醒目突出的色彩。 54 网站网站元素元素设计设计 n色彩设计要点： n（1）以传达信息为主来设计网站色彩。网站配色的重点 在于形象与色彩、主色与辅色、主色与背景色配合得当， 同时兼顾与图片信息和动画信息中的色彩。以传达信息为 主的用色可以从网站本身主题来考虑，力求发挥最大的吸 引力，从而起到快速传达信息的目的。 n（2）可与企业的标准色（形象色）联系设计网站。对于 具有形象色的企业网站，要强调其形象色时，可以再网站 用色上需用与形象色有关的色彩，这样能给人以深刻的印 象，让浏览者在不知不觉中接受了商品或企业的信息。例 如，可口可乐公司的网站（www.icoke.cn）。 55 网站网站元素元素设计设计 n口号 n口号是一条精炼的短句，刻画了整个企业，总结它是 什么，什么让它如此卓越。在网站上，口号可能出现 在站点ID的下方、上方或旁边，告诉浏览者为什么他 们应该待在这个网站。 n口号设计要点： n（1）口号要清楚、言之有物，切忌含糊不清。口号是非常有 效的信息传达方式，它是用户最希望能找到关于网站目标具体 描述的地方，一个口号如果是含糊不清的，那么就不能体现网 站的目标，也会给用户留下模糊的印象，这样的印象，对于建 立网站形象是没有益处的。 56 网站网站元素元素设计设计 n（2）口号长度要适中。太短的口号信息太少、含糊不清。 太长的口号又不容易让人记住。口号可以选用短语的形式 ，而非句子的形式，突出重点词汇，省去不必要的助词和 动词等。 n（3）口号应出现在正确的位置。口号可以放在站点ID的附 近，甚至作为站点ID的一部分，使浏览者能够把口号和站 点ID联系起来。 57 网站网站元素元素设计设计 n站点ID n站点ID即网站的LOGO，它代表了整个网站，就好像是徽标或者商 标，有着其独立的识别性和显著性。浏览者应该一眼就可以分辨 出一个网站的站点ID和其他网站的站点ID的区别。 n站点ID设计要点： n（1）站点ID应该出现在页面可视层次的首要位置。可采取两种方式 ：一是让站点ID成为本页最显眼的内容，二是让它涵盖页面所有其 他元素。可以把站点ID放在页面的左上方这是用户最习惯的放 置站点ID的位置，这样站点ID就可以涵盖整个页面。 n（2）站点ID看起来应该像一个站点ID。它应该是平常看到的商标标 志一样：一种独特的字体、一个可以识别的图形、或两者的结合， 它的大小应该从按钮到广告牌大小不等。 n 58 网站网站元素元素设计设计 n搜索 n据调查，喜欢搜索的用户比喜欢浏览的用户更多， 因此除非站点规模非常小而且组织的很好，否则每 个页面都应该有一个搜索框。 n搜索设计要点： n（1）避免花哨的用词。用户会寻找“搜索”这两个字，因 此最好使用“搜索”这个词，而不是“查找”、“快速查找”、 “快速搜索”、“关键字搜索”等，这几乎已经成了用户的习 惯用法，打破习惯并不是一个明智的选择。 n（2）慎重设置选项。为搜索设置选项会存在混淆搜索范 围的可能性，最好的做法是不提供搜索选项，这样的搜索 更有灵活性，且更符合用户对搜索的理解。 n（3）对搜索结果页面的条目进行排序。 n（4）明确告知没有结果的搜索。 59 网站网站元素元素设计设计 n面包屑导航 n面包屑是网站的一种层级菜单 n面包屑设计要点： n（1）将最后一个元素突出显示。面包屑导航的最后一层 就是当前页面，将它突出显示可以告诉用户“你当前就在 这里”。最后一层的突出显示还可以使之充当当前页面的 名称。 n（2）使用“”对面包屑导航层次进行分割。 60 网站网站元素元素设计设计 n页面名称 n页面名称就是网站的路牌。和路牌一样，如果熟悉的话浏览者根 本不会注意页面的名称，但是一旦浏览者在网站中迷失方向，就 需要页面名称来确定在网站中的位置。 n页面名称设计要点： n（1）每个页面都需要一个名称。和每一个拐角都需要一个路牌一样 ，每个页面应该有一个名称。有时候设计者会认为在导航中突出显示 当前所在位置，或在页面中已经有了面包屑导航，这些已经够了。这 不无道理，但是上面所说到的这些只是表示当前位置的辅助措施，用 户想要知道当前在网站中的位置，还是会习惯去寻找页面名称。 n（2）名称要引人注目。页面名称需要结合位置、字体大小、颜色和 留白突出体现“这就是整个页面的标题”，在多数情况下，应该是页面 中最大的文字。切勿使页面名称和正文的字体大小相同或相近。 61 网站网站元素元素设计设计 n链接 n链接设计要点： n（1）明确表示可以点击的地方。 n（2）链接下划线在必要的时候出现。 n（3）尽量避免指向当前页面的链接。 62 网站网站元素元素设计设计 n表单 n表单是网站交互的最基本方式。表单由数据输入框 、控件、标签和动作按钮组成。表单可以是单一的 搜索框，也可以是多页面的调查问卷形式。 n表单设计要点： n（1）帮助用户输入数据。设计表单和控件时应该尽可能 地帮助用户输入数据。 n（2）使表单带有容错性。 n（3）使用“label”标签。当使用label标签的for属性时， 可以把label绑定到拥有相同name的控件，这样，当点击 label的时候，焦点会显示在相应的表单项上。 63 网站网站元素元素设计设计 n插图 n网站的插图虽然是美化信息，但是它的存在并非可 有可无。一方面插图可以帮助浏览者理解和认识色 彩，另一方面有利于建立轻松愉悦的阅读环境，营 造有亲和力的画面。除此之外，插图的内涵与网站 传达出的文化内涵相符合，这就能帮助表达某些只 能意会无法言传的信息。 64 网站网站元素元素设计设计 n插图设计要点： n（1）插图要配合网站的信息。选择插图的时候要考虑网 站的信息表示，不能仅考虑美观就胡乱选择与信息无关的 插图，如果浏览者被插图吸引了全部的注意力，将有碍于 传达文字信息。 n（2）为每张插图增加alt文本。alt是img标签的一个属性， 它为图片加上了描述性文字，这样可以使网站的可访问性 加强。因为并非所有的用户都可以看见图片，当一位盲人 使用屏幕阅读器来浏览网站的时候，他没有办法浏览图片 ，但是通过alt属性，他可以知道这里存在一副图片，并且 知道这幅图片是干什么的，有什么作用，想要表达什么。 65 网站网站元素元素设计设计 n下拉框 n下拉框已经成为了一个广泛使用的导航工具，这主 要是因为它能够利用有限的地方来节省屏幕空间， 但是下拉框也存在缺点：浏览者必须点击下拉框， 才能看到下拉列表，因此，列表上的项目不可能在 浏览者扫描页面的时候就看到，当设计者想在页面 上展示内容的时候，最好不要使用下拉框，即使它 能节约空间。 66 网站网站元素元素设计设计 n下拉框设计要点： n（1）下拉框切忌太长。如果下拉框太长，菜单的列表 就越长，它就越难以控制，用户在列表菜单上上下移动 的时候，越可能找不准位置。尤其当下拉菜单需要使用 滚动条的情况下，浏览者不可能一次看到所有的选项， 那么在滚动的时候，他可能已经忘记前面看到的某些选 项了。 n（2）对下拉菜单排序。下拉框对于组织按拼音或字母 排序的项目来说最有效，例如国家、省份或产品名称， 在这个时候，用户只需要移到某一特定位置就可以看到 他想要的选项，而不需要浏览整个菜单项。 67 n网站定位与交互设计 68 四个核心问题四个核心问题 如何定位和建立时尚网站的自主风格？ 如何设计一个高效的导航系统？ 如何体现和增强网站的互动性，改善用户体验？ 如何解决商业目的与用户预期的矛盾？ 69 问题 n一般成规模的网站都具有海量资讯，因而也产生 了设计上的许多痹病，如： n首页内容过于繁杂 n色彩花哨，搭配不协调 n内容分散且质量不高 n分类太乱，不易查找 n广告与无关链接太多 n正文版面小，翻页麻烦 n内部结构不统一 70 问题 n网站的风格、定位以及交互设计的一系列问题， 其中的核心问题有： n如何定位和建立时尚网站的自主风格； n如何解决内容多而链接结构复杂的问题，即如何设计 一个高效的导航系统； n如何体现和增强网站的互动性，改善用户体验； n如何把握用户的心理，解决商业目的与用户预期的矛 盾。 n对于这些问题的研究涉及多个学科，包括设计心理学 、市场行为学、信息处理学、工程学、行为学、计算 机科学、社会科学、人机交互等。 71 网站定位与导航设计 n一个网站的定位对其设计、内容、运营模式、 推广策略等都起着决定性的作用。要解决网站 的设计问题，就必须先确定网站的定位。 n网站的定位 n产品定位 n企业与品牌定位 n市场定位 n设计定位 72 辅助导航设计 n导航系统设计的关键在于了解用户在任何一个 既定位置上的信息需求量有多少，并不是说一 次提供的可能选择越多越好，重要的是弄明白 一个用户为什么来到某个特定的页面以及从这 里他可能还想去哪里7。 n菜单、导航栏、网站地图作为主要的导航工具 ，虽然能够为用户提供很大的帮助，但无法满 足用户对于内容筛选、访问路径定位、个性导 航的需求，因此网站还需要更多的辅助导航功 能。 73 搜索 n搜索 n搜索会告诉使用者最短最直接的路径。 n站内搜索 n分类搜索 n关联搜索 n自定义搜索 74 搜索 n站内搜索 n类目搜索 n全局搜索 n类目搜索 n在网站中，通常分有频道、栏目、专题等，除网站首页 外，各类都有较明确的归属对象，如栏目属于频道下级 分类。在导航系统设计中，必须明确这些层级关系，并 且应该提供在任何地点任何范围的搜索服务。 75 搜索 “频道栏目文章”页面链接及搜索结构图 频道主页 栏目入口 lTop n 更多 栏目内容列表 栏目主页 热点 文章内容页 更多 搜 搜 搜 搜 76 搜索 n全局搜索 n全局搜索是指在整个网站范围内搜索需要的内容。通常 全局搜索设置在网站首页或相对较高级的目录首页中， 例如频道首页，而全局搜索的位置是相对固定的，比如 页面的右上角，而且作为全局的搜索入口，在设计页中 会使用模版来实现，以达到不同层级全局搜索入口一致 的目的。对于资讯类网站来说，因其分类众多，层级关 系复杂，全局搜索很少在网站的首页出现，考虑到用户 对时尚网站的随机浏览的习惯特点，使用类目搜索+全 局导航已基本可以满足时尚资讯网站访问用户的需求。 77 搜索 n分类搜索 n分类搜索也是在本网站的范围内进行搜索，之所以 将它与站内搜索分开来讨论是因为它不是简单地根 据网站内容层次结构来进行搜索，而更偏向于横向 的分类搜索，它不受网站目录结构的限制，虽然有 时候网站的目录结构就是根据分类来设定的。 n分类搜索，通常与高级搜索或者综合搜索联系在一 起，它不是一个独立的搜索功能，而是多个搜索项 的组合，只能缩小内容的搜索范围，因此可以把它 看作是站内搜索的扩充。 78 搜索 淘宝网的高级搜索页面 79 搜索 n关联搜索 n关联搜索就是搜索有相关度的内容。其实搜索的基 本功能就是关键字搜索，一般不加说明则表示全文 搜索，关键字就是用户提供搜索条件的关联信息， 因此广义上讲，搜索都是关联搜索。但是关联有不 同的性质，比如标题关联、标签关联、语义关联等 等。这里指的是狭义的关联，对于一个网站而言， 其内容的关联可以通过内容标签来完成。 80 搜索 n自定义搜索 n搜索引擎，Google、百度等。 81 链接及URL解码 n长链接与短链接 n传统的链接以标签来表示，其中href属性用来设置链 接的URL地址，对于纯静态的网站来说，其内部链接的 href指向的均是网页的实际URL地址，可完全表示该链接 目标网页对于网站根目录的相对路径，这里将这种以实际 URL地址为目标属性的链接称为长链接。 n从长链接的定义中可以推出短链接的定义：通过地址解析 的方法将一个较长的实际URL地址转换成较简短的URL地 址的链接，通过短链接的href无法找到该网页实际的所在 位置。短链接的解析过程只能在动态网页中实现。 82 链接及URL解码 n统一链接 n统一链接，就是将网站的链接用一种相对统一的方式 进行管理和维护。正如上一小节中所说，短链接使网 站结构变更的维护变得较为简单，短链接就是统一链 接的主要思想，犹如经脉一通百通。这里分别就时尚 网站中的文章、商城、活动三大模块来讨论如何实现 链接的统一。 n文章类 n电子商城 n活动 83 链接及URL解码 n面包屑跟踪器 n面包屑跟踪器，是大部分网站都会使用的工具，它 是一种层级菜单。它的英文名为“Breadcrumb”。其 一般表现形式如下： n首页 频道1 栏目1 文章标题 n从它的表现形式可以看出，它是以层级组织结构为 基础显示当前访问页的所属关系。用“面包屑”来命名 它是再合适不过了。通常除末节点的文章标题外， 其上所有层级的节点均是可以点击链接的，用户不 仅可以通过它了解当前所处的位置，还可以随时回 到上一级乃至网站首页。这可以说是一种很典型的 导航工具。 84 链接及URL解码 n固定层级显示 n通常情况，“面包屑”的显示是以内容数据的层级关系为 基础的，而这些关系是在网站设计时就固定下来的数据 结构，也就是说一旦内容录入后，它所在的层级关系就 已经定下来了，不管用户是从哪里进入该内容页，该页 上的“面包屑”显示是固定的，它不受用户行为影响。 85 链接及URL解码 n全路程跟踪 n从格林童话的汉赛尔与格莱特故事中知道，“面包屑” 最初的目的是为了“追溯来路”，它利用了“历史记录”的方 式。固定层级显示的“面包屑”只是一种由点连成线的线性 结构，然而网站的结构并非简单的线性层级关系，而是一 种复杂的网状多向连通图，尤其对门户网站更是如此。那 么，如何解决这种网状多向连通的问题？还是像有人提出 的一样要“打倒面包屑 14”？或者能否找出一种新的方式 让用户的行为参与到其中而使它变得更加灵活呢？既然“ 面包屑”的初忠是人为的为了“追溯来路”，那么应该先考 虑怎样才能真实地记录“来”的历史。 86 交互设计交互设计 n网站从静态页面开始发展至今，已经不是简单的 信息窗口。从Web1.0主要通过浏览器获取信息 ，到如今的Web2.0更注重用户的交互作用， Web2.0将用户同时作为网站内容的消费者和制 造者。时尚商业网站，虽不像SNS网站那样纯粹 地提供一个用户交流的平台，但要抓住并发展新 用户，保持相对稳定的消费群体，对于用户的交 互体验是不可忽视的。 87 交互设计的目标交互设计的目标 n交互设计的目标有两个：一是可用性目标 ，二是用户体验目标。 88 n可用性目标 n可行性 n有效性 n安全性 n通用性 n易学性 n易记性 89 n可用性目标概念化，就会得到一些可用性原则 ： n让用户随时了解系统的状态 n系统应与真实世界相符合 n结予用户控制权和自主权 n提倡一致性和标准化 n帮助用户识别、诊断和修复错误 n预防错误 n依赖识别而不是记忆 n强调使用的灵活性及有效性 n最小化设计 n提供帮助及文档 90 让用户感到满意 n让用户感到满意，就是一切为用户所想，充分 考虑用户的需求，把用户想到和没想到的都考 虑到了，并为此提出合理的意见和建议，这样 一定能使用户感到满意。 n对于时尚网站，主要应注意以下几个方面：人 性化设计、默认处理以及有效的导航标识。 91 n人性化设计 n给出明确的目标，循序渐进 n及时给出友好的提示 n设置默认输入 n有效的导航标识 n 92 n默认处理 n默认处理，即当用户不作为时为系统提供初始值或默认 状态。在人性化设计中，已经提到应该为大部分用户最 可能的操作选择事先设置默认值，从而减少用户的操作 步骤。 n网站登陆界面 n工作流设置默认状态 93 n有效的导航标识 n网站的用户体验很大程度上取决于导航系统的高效 性，因为导航标识能告诉用户这里能做什么或者提 供什么样的服务。“为了找出用户的需要，我们不能 简单的问：你需要什么？然后提供它，因为人们未 必知道什么是可能的，有些需求甚至可能是用户做 梦都不曾想到的。5”因此，网站要比用户想得更 多，并为所有的功能提供明确、高效的导航及说明 。 94 趣味性与启发趣味性与启发 n如果说“让用户感到满意”使网站能够留住现有 的用户，那么“趣味性”使网站能够吸引更多的 用户。趣味，是一种令人感到愉快并能产生兴 趣的特性，它的存在使人由对事物的一个点感 兴趣而逐渐衍生到对这整个事物都感兴趣。 95 美感 n美感是审美活动中对于美的主观反映、感受、欣赏和评价22。美感不 是作为某种孤立的体验而出现的，它是多种体验交织而成的一种整体感 受。这一感受的产生，可能是由于观赏艺术作品，也可能是因为面对自 然景象。人们美的感受的水平以及内容丰富的程度决定于被感受事物的 性质、特点以及受其刺激的强烈程度。23 n网站的美感主要体现在界面的明朗、布局的平衡、色彩的协调、内容的 流畅，从而形成了网站特有的美的风格。一般说来，不同时代、阶级、 民族和地域的人，美的标准是有差异的，而个人与个人之间也会因文化 修养、个性特征等的不同而形成美感的差异性。因此，网站应针对特定 的用户群设计符合其审美观的界面风格。比如设计一个女性购物网站， 就需要考虑这类用户群体（其主要用户为女性群体）的审美共性：喜欢 较温馨、可爱、时尚的视觉效果，比较感性，那么网站可以以粉色作为 主色调，界面尽可能清新亮丽些，而图标则可以做成卡通或很Q的样式 。 96 成就与情感满足 n网站的用户体验的最高境界就是情感满足。这是从人的 心理需求出发，营造一种好的氛围，让人产生一种归属 感，而这种归属感来自于本位互动与个人价值的体现。 本位互动，是指用户作为主要合作者参与互动过程。个 人价值体现，则在于网站能够提供一个个人的展示平台 ，让用户也能体验到聚焦的感觉。 n让用户参与互动，是Web2.0主导的体验模式。像博客、 播客、维客、掘客、换客、印客、试客等一系列以“客” 命名的互动性网站，“客”就是网站的主人，网站的所有 空间都是为“客”而设的，用户在这里可以随心所欲、畅 谈无限，充分地发挥了“客”的主动性和创造性，同时也 让用户感到了交流互动、体验分享带来的个人价值的满 足。 97 创意视觉引导与交互 n找到熟悉的感觉 n巧用心理暗示 n启发与激励 n视觉牵引力 n焦点与放大镜