手机产品框架层设计: 两种主要的布局方式
本文分析了在手机客户端产品中,多个功能模块的两种主要布局方式:按钮式布局和标签式布局。并以13款手机客户端为例,分析了两种布局方式的不同使用场景,它们的变体,以及优缺点。
手机产品设计与传统的桌面和web产品设计相比,最显著的约束是设计空间的急剧缩小。打个比方,这就像从一个100平米的房子搬到5平米的单间,东西没少一样,可以施展的空间却小了几十倍。更重要的是,在这样一个小空间里,你不能把东西胡乱摆放,要依旧保持它们的清晰、合理、简洁、美观。借用《用户体验的要素》中的名词,这涉及到“框架层”的设计问题,在手机产品的设计中,框架层的设计即布局问题尤其关键。
然而,众多手机产品看似纷杂的框架选择,归纳起来,最主要的方式有两种:按钮式布局,标签式布局。基于这两种布局类型及其多种变形,并综合两种类型的巧妙组合,可以解决绝大多数功能模块的组织问题。
按钮式布局
当多个功能之间相对独立,用户根据需求选择其中一个功能时,按钮式布局是一个不错的选择,结构清晰、简单明了。支付宝、12580客户端、PingCo等手机产品的初始界面都采用了典型的按钮式布局方式。
以支付宝为例,当在多个按钮中选择某个功能按钮后,如“手机充值”,则直接进入手机话费充值页面,然后进行相应的手机充值操作。这种设计结构清晰,手机支付宝有8个主要功能,分成8个按钮,布局有条不紊。
变体。按钮式布局的表现形式多种多样,有很多变体。比如,在熊猫看书中,几个功能按钮排成一行,放在底部,上面是熊猫看书的一些通告;在爱帮公交中,几个链接本质上是就是按钮,可以分别选择乘车、线路或站点查询;在139i联系中,按钮成为长条形,每行一个,排成一列(样式上类似于iphone上的系统控件),每个按钮被激活后,下部都会有对应功能的解释。这些以不同方式展现出来的按钮式布局,或者更加美观,或者更加简洁,把多个功能进行了有效的组织。