2014-3-18 蓝蓝设计的小编
转载蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
来源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
蓝蓝设计将分析列表在各种情境的界面设计方法,以及需要注意的事项。
列表常见的使用情境
模式1. 双面版选择器
双面板列表是一种将列表区分为两个区域的一种设计模式,用户可以自由在第一个面上选择项目,第二个面版上会显示面板一选择的项目内容。
优点
缺点
设计要点
会使用一个基本的列表显示内容,当用户点选某个项目时,会使用新的画面显示内容,新的画面会取代列表画面。
优点
缺点
设计要点
列表会在原地展开/收起,用来显示该项目的详细信息。
优点
缺点
设计要点
将列表是用网格缩图的方式呈现,让用户可以使用视觉图片的方式浏览内容。
优点
缺点
设计要点
将一组项目使用水平弧线或水平排列的呈现方式,允许使用者向左或向右检视内容,通常当前(中间)的项目会较大显示。
优点
缺点
设计要点
Safari 在 Mac OSX 10.9 之前时也使用这样的方式展示 Top Sites,在 10.9 版后改用缩图列表的方式
使用两种不同的色彩作为列表项目的背景,使项目容易被区分出来。利用色块的方式将列表转换成合理的视觉对象(完形心理学 – 封闭性)
优点
设计要点
列表使用字母的方式进行排列,在列表上使用英文字母的方式作为列表的滚动条,通常在电话簿、字典、音乐等列表上会看到这种模式。
使用情境
用户不晓得项目的完整名称,但了解项目的开头字母,可以使用此模式进行快速定位。
设计要点
面对大量的列表数据时,将列表使用分页的方式切成多个页面阅读,一次阅读一页。
优点
缺点
设计要点
关于分页显示与无限滚轴两个模式,会在之后的文章中进行详细的分析与比较
使用多层的列表呈现内容,用来表显出内容与内容之间的阶层关系。
优点
缺点
设计要点
允许在列表结构中,展开出树状的阶层结构关系,此模式与分层列表不同,树状清单能够一次展示多个项目里头的阶层关系。
优点
缺点
设计要点
一种快速且直觉的方式新增 / 修改列表内容。
依照你的使用的情境,使用适当的对应列表呈现方式
「从列表中选择某个项目,该如何显示该项目的细节信息?」
「该如何呈现一份具有视觉元素的列表」
「如何管理一份长清单」
「如何整理具有阶层、分类的清单」