#设计#《网站设计解构

丸子空间 2014-12-16

展开全文

第一部分：框架体系简介

首论：可重用铁三角

#设计# <wbr> <wbr> <wbr>《网站设计解构——有效的交互设计框架和模式》笔记

一、设计模式六要素

1、模式名称（两行式登陆元素、用户名和密码控件、登陆元素）

2、描述（一个两行的表单元素，用于采集用户的ID和密码，从而使他们能够进入网站内容受密码保护的区域）

3、上下文情境（无论何时，只要网站中的某位用户希望从公有区域转向访问私密信息，我们将使用登陆元素。在面向公众的页面中，只要足够155*210像素的空间，就可显示该模式。如果在某些面向公众的页面中，垂直方向无法提供足够的空间，我们将在页首的banner横幅处使用单行的登陆元素。或者在网站受密码保护区域中，不适用登陆元素）

4、曾于何处使用：它列出了那些使用过这一模式实例。

5、工作方式：开发团队在这里将描述该元素技术层面的内容（用户标记有 User Name 的输入框中键入他们用户的ID，在标记有 Password 的输入框中键入密码<密码内容会被遮盖>。如果他们愿意，可以点击 Remember Me 复选框。当就绪后，用户点击标记有 Login 的按钮。如果用户名和密码有效，则显示该用户的个人页面。如果无效，则显示错误页面<参见“登陆错误”模式 >）

6、其他必备模式：比如创建新用户ID的模式；修改密码的模式；重新获得密码的模式；从网站的受密码保护区退出的模式；当输入的用户名或密码不正确时，显示错误信息的模式。

模式资源库：模式文档经过整理、分类后的集合，通常在网上或者企业内部公开

雅虎设计模式库： http://developer.yahoo.com/ypatterns/

二、组件六要素

1、组件名称

2、组件版本号：版本号可以详实地记载从一个版本到下一个版本中发生的变化。如果需要对之前实现的内容进行更新，版本号能引起开发人员的注意，而且确保开发团队能维持系统的一致性和连贯性。

3、定义：描述组件的目的和用途（例如：首页专题sun.com网站首页中一个较为复杂而又重要的部分。它可以看做是首页推介元素的容器，循环显示首页推介的3个专题内容。）

4、使用方法：描述了组件应于何处使用，包含相关信息（例如：在任何索引页上使用。如果没有额外内容，可以选择是否加入 See All （查看所有）链接。）

5、示例：为我们提供了一个鲜活、生动的组件实例。

6、代码：链接到该组件的已实现版本（包括不使用编程语言的版本）

注记：组件资源库：sun公司

三、交互设计框架体系包含的元素

1、描述：不仅描述了框架本身同时也描述了框架应该满足的需求。

2、上下文环境：描述了在使用给定框架时用户可能遇到的问题，或者他们希望满足的需求。（例如，当某个用户面对一个必须登录才能使用的Web应用时，可能会考虑是否要注册。而注册框架将会处理此时用户心中产生的各种疑问。它会介绍该应用的功能和优点，注册时须付出的努力和成本，以及如何开始注册等等。）

3、任务流程

4、其他必备框架：列出了与当前框架配合使用时不可或缺的其他框架。（例如，一个电商框架可能由网站中特定于产品销售与服务单元的元素构成。然而，为了更好地支持该过程中的任务，电商框架还需要其他框架的配合：搜索框架，提供寻找商品的第二渠道；购物车框架，用于处理购买信息；付款框架，用于付款结算。

5、相关框架：那些鱼当前描述的框架有相似的目的或者支持相似的用户或业务目标的框架。例如电商网站的订单管理系统和顾客账户系统。这些系统可以作为框架进行存档和备案，然后在相关框架中进行互相连接。

6、构成元素：列出了所有从属于该框架的设计模式。

7、设计标准：列出框架中一系列设计导向性方针。准确地标识出为了网站用户而必须实现的目标，形成一系列如规章制度搬的指标，表达了设计背后的动机。

（例如，注册框架包含的设计标准:

表达了明确的价值声明
建立起用户的预期
证明本用户程序运转良好
鼓励行动并确保获得进展
让用户与其操作相对联系）

第二部分：框架体系（电商网站实例和电影网站实例）

一、电商网站

1、目录框架（构成元素：分类页、陈列页、内容页）

2、搜索框架（构成元素：快速搜索、搜索结果、搜索产出、高级搜索、过滤器、分页）
3、注册框架（构成元素：价值声明、投入成本明细、推荐语、行动号召、白板/即时参与、注册表单）
4、关于我们（构成元素：公司背景、财务状况、客户名录、团队介绍、时事与新闻、工作机会、联系方式）

二、电影网站（构成元素：初始页、引子/预告片、演职员名单、故事梗概）

第三部分：框架体系的使用

一、打造你的框架

1、标识出问题，作为框架存档或备案。

2、品鉴资源
a.发现影响点（①可以从竞争对手开始，看看他们是如何解决同样的问题的；②看看那些做不好就生存不下去的网站——哪怕有一个差劲的设计就会失去生存的机会；③专门在网上经营的公司——大部分的收入都来自互联网）

       b.我们在找什么（①在品鉴时，问题/解决方案配对可以标识出来；②搜集各种可能的解决方案作为以后参考的目录；③图书馆搜集）
       c.留意你自身的领域（品鉴与自己所在领域相同的那些网站）
3、把它写出来
       a.降低开发成本
       b.明确错误出现的条件
       c.提升创造力

4、分配工作量

二、使用框架体系

1.组织计划

项目中只有大约20%的设计工作属于激动人心的部分。其他80%都由基本元素构成。
你以前曾经和这个项目的前端开发人员合作过，因此你很清楚他的能力，而且知道应该给他什么，以便能按时完成任务。
项目中最迷人的部分——创新的部分——是客户唯一真正关心的地方。任何有关网站其他方面的谈话都会很快使他失去兴趣和关注，而你必须获得他的兴趣和关注，才能有把握完成项目。
整个团队包括一个交互设计师（假设是你）、一个前端开发、一个后台开发、一个视觉设计师以及一个希望早日完成工作但又资金不足的客户。这就是你的团队。
想要完成任务，你只有极其有限的时间。
交互设计师（你）的工作：规划出项目范围，制定出信息架构，建立核心的交互任务流程，设计出网站导航，并为整个站点创建出线框图。

2.搭建框架
a、在上下文中考虑上下文
b、选用模式
c、应用设计标准
3.让框架切实可行
a、资源库（个人资源库：为每一个框架都创建一个页面，如果在项目中出现了新的框架，则新建一个空白页面，描述框架的各个主要组成部分，链接到各大公共模式库中的相应模式，罗列出设计标准）
b、模板（创建一个个人模板库，放上常见的表单（自己的版本），例如注册、登陆、联系我们，等等再加上一些错误处理设计，例如显示出合适的出错信息等。）

三、改善我们的未来

1、挫折成本