网站信息结构设计

网站信息结构设计的思维导图，内容有信息结构、网站结构、网站基本结构元素、网站结构类型、网站设计的流程，感兴趣别错过。

网站信息结构设计

• 信息结构
  • 网站对内容进行排列，分类，组织，并建立一定的交互方式来引导人们寻找和管理信息的一种设计
• 网站结构
  • 网站的所有页面及其内容的逻辑组织形式
  • 快速了解内容，为用户查询，存取资料创造便利（不好的网站如同陷于迷宫，失去方向）
• 网站基本结构元素
  • 网站的层级主要是由其各级页面的导航链接创造的
  • 次序
  • 层级：被大多数用户理解，组织复杂信息的首选结构
  • 网络：为信息共享提供最大程度的自由
• 网站结构类型
  • 四个基本设计原则
    • 避免基于自己的偏好来确定设计方式
    • 研究用户需要
    • 清晰目标
    • 创造角色
    • 牢记网站目标
    • 信息结构的连贯性
  • 一体结构：
  • 扁平结构
  • 多层级结构：又称树状结构
  • 共生层级结构：最复杂的层级
  • 网状结构：适用于没有明显的栏目分类，以提供相互链接，内容分享创造为目的的网站
• 网站设计的流程
  • 卡片分类法
    • 基本法
    • 逆向分类法
    • 开放卡片分类法
    • 封闭卡片分类法
  • 站点地图
    • 网站地图
    • 指明网站结构，内容，栏目
    • 可看做是导航
  • 线框图
    • 进行网页初稿设计的草图，表示网页主导航方式，内容区域大致位置，尺寸和比例的二维空间
    • 素描
    • 元素
      • 企业或组织的标志和名称
      • 网页标题文字
      • 面包屑导航
      • 搜索框
      • 网站的全局导航链接
      • 本地栏目内容导航
      • 页面主要内容
      • 电话，地址，电子邮件
    • 重点表现是网页结构和导航设计，因此绘制时应力求简洁，不要使用任何装饰
  • 网页原型
    • 为用户界面设计
    • HTML/CSS模板
    • 线框图和网页原型是网页设计的必要步骤
    • 前者是单一网站页面平面布局的视觉表现没有经过任何视觉处理，表现是界面的基本轮廓，侧重网页元素的秩序，位置，尺寸的安排，比如按钮，表格
    • 后者是具体的链接和可执行功能
  • 网站图标
    • 一种复杂用于建立用户界面和文件目录的流程图
    • 一种是和客户一般交流概念性的网站图标
    • 都可用AI绘制
    • 专业站点图表绘制：Microsoft Visio；Omni Gfleoft
  • 网站文件和目录结构
    • 将网站图表转变成实际的网页
    • 文件夹结构：需将网站所需要的所有文件组织成合理的文件目录结构，并上传到服务器
  • 信息结构的设计风格
    • 思路：自上而下，自下而上
    • 自上而下：基于宏观的角度，从网站商业目标和用户需求出发定义网站的组织结构
    • 自下而上：从具体内容关联开始，建立网站底层基本单元模块，方便用户直接接触和管理，而后考虑商业目标（如豆瓣网和Flikr.com）
    • 从底层的单元图书浏览区开始做架构设计
    • 浏览区包括书名，封面，作者，性别，书评，阅读级别，互动版，发帖人等基本信息，允许用户访问页面
• 案例
  • 新闻网站
  • 电子商务网站：会员服务，产品目录
  • 博客：简洁，加强站点可用性。文章，分类，标签（论坛，求职）
  • 用户驱动型网站：维基百科