电子商务11网站定位与交互设计

《电子商务11网站定位与交互设计》由会员分享，可在线阅读，更多相关《电子商务11网站定位与交互设计（97页珍藏版）》请在金锄头文库上搜索。

1、企业资源管理系统企业资源管理系统 Enterprise Resource Planning上海交通大学计算机系 吴晨涛2人机交互技术人机交互的概念人机交互（Human-Computer Interaction，HCI）是关 于设计、评价和实现供人们使用的交互式计算机系统， 且围绕这些方面的主要现象进行研究的科学。狭义地 说，人机交互主要是指人与计算机之间的信息交换， 主要包括人到计算机和计算机到人的信息交换两部分。人机界面（Human-Machine Interface，HMI）作为计 算机系统的重要组成部分，主要是指人类与计算机系 统之间的通信方式，包括人机双向信息交换的支持软 件和硬件。3

2、人机交互技术交互设计（interaction design）指的是“设计支 持人们日常工作与生活的交互产品”。具体的讲就 是关于创建新的用户体验的问题，其目的是增强和 扩充人们工作、通信及交互的方式。交互设计主要 研究如何确定人机通信的方式人机界面，侧重 于人机交互通信方式的设计过程和设计方法，而人 机交互技术则侧重于研究这种通信方式如何用软硬 件实现。4人机交互技术人机交互的相关学科认知心理学研究人的高级心理过程，主要是认识过程，如注意、知觉、 表象、记忆、思维和语言等，从心理学的观点研究人机交 互的原理。人机工程学人机工程学是运用生理学、心理学和医学等有关知识，研 究人、机器、环境之间的合

3、理关系，以保证人们安全、健 康、舒适地工作，从而提高整个系统功效的新兴的边缘科 学。多媒体技术虚拟实现技术认知心理学人机工程学人机交互技术5人机交互技术多媒体技术一般地，多媒体技术是指将文本、声音、图形、静止图像、 动态图像等与计算集成在一起的技术。虚拟实现技术虚拟实现（Virtual Reality，VR）就是借助于计算机技术 及硬件设备，建立高度真实感的虚拟环境，使人们通过视觉、 听觉、触觉、味觉、嗅觉等感官在其中看、听、触、闻起来 像真实的，以产生身临其境的感觉的一种技术。6人机交互技术人机交互的研究内容人机交互界面表示模型与设计方法（model and methodology）可用性分

4、析与评估（usability evaluation）多通道交互技术（multi-modal）认 知 与 智 能 用 户 界 面 （ recognitionand intelligent user interface）虚拟环境（virtual environment）中的人机交互Web设计（Web-interaction）移动界面设计（mobile and ubicomp）群件（groupware）7人机交互技术人机交互在网站设计中的运用网站设计可以看成人机界面设计的一种，通过网站界面， 人与计算机即展开了交互的过程。把人机交互技术运用在 网站设计中，可以对用户有更深入的了解，从心理学，工 程学

5、方面来考虑用户的使用感受，将设计出更贴近用户的 网站。视错觉阅读关注感知和识别学习8网站设计方法 网站的定位产品定位把网站作为一个互联网产品，其定位首先要确定面对的人群是什么。在考虑网站的产品定位的过程中，必须先考虑以下几个问题：产品的条件是什么？它具有哪些优势和特色？产品是否能满足一部分人的需求？产品收益来自于哪里？它的运作模式是怎样的？产品的阶段性目标是什么？在实际操作中，网站的产品定位多数是由创办人的主观意向决定的， 但一定通过较全面的考虑，并具有一定的社会基础，或是为解决社会 中的某一突出问题。一旦确定了产品定位，就可以对产品的各方面属 性提出具体的要求，制定出详细的目标计划和测评标准

6、。9网站设计方法 网站的定位企业与品牌定位企业定位是指企业通过其产品及其品牌，基于顾客需 求，将其企业独特的个性、文化和良好形象，塑造于 消费者心目中，并占据一定位置。企业定位是个较模 糊的概念，其主要表现为品牌形象。对于网站的定位， 则更偏向于品牌形象的塑造。品牌定位是指企业在市场定位和产品定位的基础上， 对特定的品牌在文化取向及个性差异上的商业性决策， 它是建立一个与目标市场有关的品牌形象的过程和结 果8。10网站设计方法 网站的定位市场定位？产品、品牌的定位都离不开市场，市场才是网站真 正能够生存的因素。要确定市场在哪里。人是市场的主要因素，但不是有人就有市场。要在不同阶段选择不同大小的

7、人群。11网站设计方法 网站的定位设计定位设计定位作为一种设计策略,将模糊的需求清晰化, 限定设计活动的范围,使设计师可准确快速的设计出 有特色的产品,以达到与竞争对手区分并吸引消费者 注意的目的,并可塑造出产品或品牌的自我优势 9。12网站设计方法 网站的定位设计商业研发人员社会技术艺术什么是有用并可 以产出的什么机会是不可放过并 能够抓住的什么是可行的，会被接 受并获得支持的什么是它的结构和特点什么形式是可行的什么是可能的什么是社会趋 势所向的什么是影响变革 的形式什么是有用的、可用 的和被需求的什么是从商业角度可行的什么方案是容易实现的13网站设计方法明确网站主题明确网站的主题至关重要，

8、如建立网站是为了销售 产品，还是为了进行商业服务。网站的目标用户是 哪些，他们能从网站上的到些什么信息。打算从网 站中获得怎样的回报。14网站设计方法分析网站材料网站材料的分析，一方面能够帮助分析客户的资料， 对网站将要传递出的文化内涵有一个初步的了解， 同时，当客户提供的资料不足时，可以给予正确的 反馈意见。另一方面，当设计者对行业有了一定的 认知后，能对同类网站有较好的鉴别。同类的网站 并非都是优秀的，从设计形式到内容编辑，均有优 点和劣势，吸取同类网站的长处，更能帮助网站设 计人员找出自己的优势，进一步明确自己网站的主 题。15网站设计方法确定目标用户目标用户是指接收并理解网站建设方通过

9、网络媒介 传递的信息的个体。用户和目标用户并不相同，用 户仅仅指点击了这个网站的个体，他可能只是无意 中浏览了这个网站，并在快速的浏览之后关闭了浏 览器，而目标用户却是网站真正想要传达其思想的 个体。网站不可能使每一个用户满意，但至少要做 到使目标用户满意，更好的结果是通过好的网站设 计能把用户转变为目标用户。16网站设计方法分析用户的普遍性分析目标用户的特殊性用户并不是越多越好目标用户模型17网站设计方法确定用户需求需要产生需求根据用户的需求设计网站需求类型如何确定需求18网站设计方法创建与管理网站信息创建信息创建信息信息的来源主要是针对目的而言，要明确对于网站的主题来说，哪些 信息是必须有

10、的，哪些信息是希望有的，哪些信息是可以没有的。必 须有、希望有、可以没有的信息，表明了它们对网站的重要性。编辑信息编辑信息信息编辑是网站编辑的工作，形式与内容大有学问。在琳琅满目的互联网上充斥着海量信息，要想一下子找到对浏览者有 用的信息并不容易，所以作为网站设计者，想要尽快地抓住浏览者的 眼球，信息标题和信息摘要就成为了最关键的一环。19网站设计方法网站策划网站策划，不仅要考虑网站的主题、定位，还要涉及相 应的分析调查、硬件预购、执行流程、人员分配等具体 事宜。根据每个网站的背景及建设实力等不同情况，策 划书的内容也需要做相应的调整。20网站设计方法（1）背景介绍（2）市场分析（3）建设目的

11、及网站定位（4）技术解决方案（5）内容规划（6）页面设计（7）流程及人工（8）网站维护（9）发布与推广21网站设计方法设计网站网站设计主要包括导航、版式、色彩、风格等与视 觉设计密切相关的网站元素。网站设计不仅要考虑 视觉上的美观，还要结合可用性来共同设计。22网站设计方法网站设计要点用户通常是扫描网站，而非仔细阅读尽量使用习惯用法实现网站的可访问性让用户随时了解系统的状态给予用户自主权和控制权提供错误预防功能和纠错功能兼容不同的浏览器23网站设计方法测试网站可用性24网站元素设计网站元素设计25网站元素设计菜单网站中最直接的导航方式，一般分为横向、纵向两种， 可以有二级菜单项（一般不超过2级

12、）。网站为了体现 其某些（时尚）元素和独特风格而常使用flash来制作 菜单以达到绚丽的效果。设计样式将菜单分为四类。26网站元素设计传统菜单所谓传统菜单，是指最简单的一行或一列菜单项，直接点 击链接到目标地址。这类菜单具有简单、清晰的特点，因 其菜单项只有一排，链接数量有限，只适用于分类较少的 网站。传统动态2级菜单27网站元素设计伸缩式菜单伸缩式菜单是指将菜单做成类似树形展开/合拢的效果，但只 限于2级菜单。伸缩式菜单通常在纵向菜单中使用，常见的是 用在网站后台管理的左侧菜单上，也会在商城的会员中心或产 品分类中使用。列表式分列式自动罗列式28网站元素设计列表式：通常在产品品牌分类中使用，

13、品牌名称比较长， 品牌之间既是同等的又有销量排名之分，用一列显示可以 较灵活地满足需求。分列式：将子类分成两列或多列显示，通常为横向分类， 即类与类之间没有共同点，只是同属于一个大类而已。分 类名称短且无关联，以一种整齐清晰的方式列出，既容易 查找又无需担心排列的顺序。自动罗列式：将子类依次列出，由外层控制菜单宽度，由 浏览器自动换行。这种方式主要用于横向分类不明显、类 与类之间有相似交叉且类名长度不确定的情况，既不浪费 空间，又可以抵御样式表加载失败而导致排版混乱的风险。29网站元素设计30网站元素设计组合菜单所谓组合菜单，可以理解成用各种不同的方式方法灵活设计 出来的菜单。这里说的各种不同

14、的方式方法，包括纵向的、 横向的、静态的、动态的、排列的、自动的、文字的、图文 并茂的，只要是能达到好的效果都可以拿来用，就看如何将 它们灵活地组合起来。31网站元素设计32网站元素设计形象菜单使用形象菜单的好处：用小图标来标识，并加以文字说明， 使表达的内容更加清晰，也使用户更加容易找到。因为形 象思维比逻辑思维更易辨别和记忆。日历式搜索导航游标式导航动态视觉焦点导航33网站元素设计34网站元素设计四种菜单比较35网站元素设计导航导航给了浏览者一些固定的感觉，它告诉我们当前的 位置，通过层次结构的可视化，导航可以告诉我们网 站上有什么，导航表现了内容。导航还告诉了浏览者 如何使用网站，它会含

15、蓄的表达该从哪里开始，能进 行哪些选择。36网站元素设计导航设计要点：（1）导航应该是持久的在网站的每一页中以 相同的外观出现在相同的位置，这样会让浏览者确 认自己仍然在这个网站上，这一点非常重要，并且 可以使整个网站保持一致的风格。（2）在导航中突出显示当前位置。要抵消浏览者 在网络中固有的空间迷失感，需要在导航中标明当 前所在的位置（3）导航的风格将对页面整体风格产生极大影响。（4）网站可以存在多个导航。37网站元素设计 导航栏导航条的目的是让网站的层次结构以一种有条理 的方式清晰展示，并引导用户毫不费力地找到并 管理信息，让用户在浏览网站过程中不至迷失。本文所指的“导航栏”，不是“菜单”

16、的含义， 正如“导航条”的定义一样，这里突出的是网站 的层次结构，即能完全体现并引导分级查找的导 航工具，换言之，导航栏就是网站的“目录索引 表”。38网站元素设计导航栏树形导航栏最常见的导航栏形式应该是BBS的树形导航，通常BBS除了 美观的网站式的模板外，通常还有一个简洁的导航式模板。层次清晰；结构完整，覆盖全面；伸缩自如，可观性强；即时定位，查找便捷。通常论坛还提供收藏、书签等功能，将这些功能整合在导 航栏中，用户就能随心所欲地浏览其关心的内容了。39网站元素设计导航栏隐藏导航栏隐藏导航栏不是指导航栏的布局特征，而是指它的存在形 式。顾名思义，就是把导航栏隐藏起来，放在日常工作区 域之外。在软件的人机交互理论中有这么一条公理：为典 型的导航调整界面。那么，在Web设计