浅谈列表设计精选.pdfVIP

浅谈列表设计 本文将分析列表在各种情境的设计方法 ，以及需要注意的事项。 列表常见的使用情境 1. 概观 览较多的的资讯时 ，列表可以提供一种概观性的的方式来呈现内容。 2. 逐一 览项目 使用者可能逐一或随机的的阅读资讯 ，就像是Faceboo k动态资讯。 3. 搜寻 使用者可能在清单上寻找他们想要的资讯 ，就像是Google搜寻结果。 4 . 分类与过滤 使用者可能正在分类资讯或者使用一些方式 （档案大小、名称 ）过滤内容。 5. 项目的整理、新增、删除与分类 使用者正在整理资讯 ，此时很有可能需要多选、搬移的辅助功能。 列表的设计模式 1. 双面版选择器 双面板列表是一种将列表区分为两个区域的一种设计模式 ，使用者可以自由在第一个面上选择项目 ，第二个面版上会显示面板一选择的项目内容。 优点 操作非常的有效率 ，不需要来来回回的在不同列表切换。 减少使用者记忆与认知的负担 ，使用者不必瞭解内容在列表上的位置 ，也不需要学习如何返回 列表。 缺点 需要比较大的萤幕时才能支持。 设计要点 请务必清楚的标示在面板一被选取的项目 2. 单视窗深入 会使用一个基本的列表显示内容 ，当使用者点选某个项目时 ，会使用新的画面显示内容 ，新的画面 会取代列表画面。 优点 使用者可以专心的处理详细资讯。 缺点 整体效率较低 ，需要不断的进入、离开 无法一次处理多个资讯 设计要点 因为整个画面都被新的画面取代 ，请确保在详细页面中有清楚的返回按钮 ，小心使用者迷失方向 了 返回列表时 ，请务必恢复到前一个的状态 3. 清单嵌板 列表会在原地展开/收起 ，用来显示该项目的详细资讯。 优点 能够同时看到多个展开的内容资讯 ，方便比较。 因为详细内容与列表呈现在同一个画面 ，能轻松的阅读资讯 缺点 容易与上下项目容易搞混 详细内容太多的时候 ，不容易操作与定位 （scro lling ） 设计要点 务必将展开/收起状态设计的清楚 使用图示+/v搭配文字的方式隐喻 4 . 缩图分格 将列表是用网格缩图的方式呈现 ，让使用者可以使用视觉图片的方式 览内容。 优点 图像比文字还容易辨识 ，而且更容易的区分。 因为详细内容与列表呈现在同一个画面 ，能轻松的阅读资讯 缺点 容易单调乏味 ，也许可以把较推荐的内容放大展示 依赖文字来寻找的内容 ，不适合使用 ，因为使用者必须不断跳跃 览 （相较于垂直列表 ） 设计要点 注意图片缩放后的比例与解析度 避免没有图片的项目 ，可以在适当的时候给予预设缩图。 5. 旋转木马 将一组项目使用水平弧线或水平排列的呈现方式 ，允许使用者向左或向右检视内容 ，通常当前 （ 中间 ）的项目会较大显示。 优点 因为使用到空间z轴 ，可以省下更多的空间 能够让使用者把注意力放在正中央的内容上 缺点 无法一次呈现较多的资讯 相较于中央资讯 ，其他资讯无法完整的展示 设计要点 如果要用来展时较多的项目时 ，可以使用Scro llbar或前后的按钮来设计 旋转木马与Slider非常相似 ，旋转木马用来一次多个项目。 Saf ari在Mac O SX 1 .9之前时也使用这样的方式展示To p Sit es ，在1 .9版后改用缩图列表的方式 6. 斑马列表 使用两种不同的色彩作为列表项目的背景 ，使项目容易被区分出来。利用色块的方式将列表转换成 合理的视觉物件 （完形心理学 – 封闭性 ） 优点 使用者可以轻易辨识列表项目 ，减少认知与视觉搜寻的时间 设计要点 在列表较为紧密的情况下使用这个设计方式 7. 字母标记卷轴 列表使用字母的方式进行排列 ，在列表上使用英文字母的方式作为列表的卷轴 ，通常在电话簿、 字典、音乐等列表上会看到这种模式。 使用情境 使用者不晓得项目的完整名称 ，但瞭解项目的开头字母 ，可以使用此模式进行快速定位。 设计要点 让字母卷轴支援拖移的操作方式 在卷轴上高亮显示目前列表位置对应的字母 8. 页码标签 面对大量的列表资料时 ，将列表使用分页的方式切成多个页面阅读 ，一次阅读一页。 优点 使用者能够记忆项目的页次 ，对于瞭解资讯的位置、事后的寻找有很好的帮助 一次只载入一些资料 ，减少流量及载入的等候时间 缺点 体验不顺畅 ， 览完一些资讯又必须重新点击页码载入新的内容 设计要点 必要时让使用者可以决定每页的项目数量大小 可以的话 ，显