浅谈手机客户端列表设计技巧

首先明确自己的观点：每个手机APP的设计中都有列表这个元素，如果有哪个应用没有列表的话，拿小编是问。哈哈~~  开玩笑了，只是想说明这个交互组件的设计很常见。其实列表设计的普遍性并不是没有道理，它是由手机这个特殊媒介的显示特征决定的：一个页面只能表明一个信息，同时上下空间可无限延伸。

在本文中，我们将一起了解一下，列表中每一项信息该如何组织，从而达到按用户所期望的方式将数据更有效地呈现出来的目的。

【列表的概念】

列表到底是什么呢？列表的基本概念，是一个由若干可选择对象所组成的队列。引自《iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad》第六章。对交互组件做定义很重要，正如引文中所说，应该从现有的基本概念出发，来定义全新的交互对象。而不是将列表直接定义为一个貌似纵向排列的表单，这样就限制了交互的创新设计，典型的列表是纵向，但九宫格式也是列表形式之一。

【从列表曲折历程设计中发现问题】

【设计列表页面的注意点】

首先，明确列表中有多少项

比如电话簿中的联系人列表是有很多的，需要用户往下拖动，为了让用户能够浏览更多选项，需要将每个选项做得尽量精简；而有的列表可能只1--5个，比如我收藏的活动，这里就要避免下面的空间浪费，过于空白，而可以将此选项做得稍微详细一些，这样的好处是让用户在首页面就能较多获取信息，减少点击率。所以列表中选项的量帮助设计者决定这个列表页面的设计形式。

其次，筛选最能引起用户兴趣的信息或者明确该页面的主题

列表中每个单元内容的信息很多，比如可能包括时间、地点、人物、主题、图片或者事件等等。但用户到达一个页面的时候，有以下心理活动：我在哪里？我看到了什么？能否获取到我想要的东西？能否引起我继续看下去？这几个标准决定了必须对信息进行筛选。

如下图1，决定用户是否下载的信息包括应用的图标、名称、星级和是否免费，所以在这个列表的选项中显示了这些内容；下图2，列表项中包括主题以及对这个主题的解释，一方面可以让用户更了解该选项要传达的内容，另外一方面也让列表项间有间隔，视觉浏览更轻松。

第三，明确列表单元中的每个列表项的形式和字数

列表单元中可能包括图片、主标题、副标题、标识、图标等列表项，设计者需要将这些已经筛选出来的信息进行组织。但有效地组织前，必须有效地知道某个图标、人物头像或者商品照片的大小，还有主标题的最多字数和最少字数大概为多少，这样为你提出好的信息排布形式提供论据。并让你能做出决策：是一列还是两列？主标题或副标题是否需要写全？图片和文字占比多少比较合适？等等。以下例子中的列表都是经过认真思考的。如下图2，宫格式列表为用户在本页提供可操作的下拉控件；下图3多米歌名前的0102030405......序号设计，与后面字数不会太多的歌名搭配起来，让画面视觉达到平衡的状态。

最后，组织信息的主次关系

尽管筛选出了几个信息放在首页列表中，但这几个信息也不能都是主角，就是像一部电视剧，也分主角、配角、当背景的龙套角色和插科打佯的副角一样。再做个比喻，类似一副平面作品中的主色、配色、背景色和强调色，这些色彩的面积和位置的排布，让这个作品有了好的空间层次关系。

 

而在手机的视觉显示中：左边的信息比右边的信息重要，上面的比下面的重要，所以主角信息要尽量放在左边以及上面，配角放在右边或主角的下面，一些需要强调的副角则可以通过字体大小或者颜色进行强调。

 

如下图1，图片和产品名称是主角（这可以理解为男女主角吧），配角是被划掉的原价，副角是现价，用大红色进行了强调；下图2，谷歌I/O大会日程中，左边时间的背景色比白色背景突出，同时其色调和三个主色较一致，保证了画面的平衡感；图3中，通话记录中右边的通信状况过于突出，干扰了用户的浏览过程。

【最后】

交互设计的创造性决定着一个交互设计师的价值体现。不过在创新之前，能够沉下心学习曾经流行过一时的或者经典并沿用至今的交互设计，是非常必要的。不仅仅是信息架构、布局、流程，一些个小小的组件，也可提升产品体验。所以也推荐其他讲述交互组件的文章，供大家系统学习。搜索、筛选和排序的设计分类：http://beforweb.com/node/70

 

 另附一篇以列表的创新设计为案例讲述交互模型与创新的产品概念的文章:http://beforweb.com/node/86。供大家系统学习。