极简设计(全彩版)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.4.2 分类

通过删除无用的功能和内容,保留了产品中必要的部分,精简了产品,第二步便是对信息内容进行分类组织。对所有功能和内容进行信息架构的梳理,将相同的功能放到一类,形成产品的层级和导航结构。在实际产品设计阶段,分类也可以称为产品的导航设计或内容组织。

(1)按照用户认知分类

互联网产品的出现将很多传统线下服务搬移到了线上,很多产品都是对原有线下产品的线上迁移。所以在进行产品设计时,要保证产品的设计符合用户的认知和行为习惯。

例如新闻阅读类App应用,产品就是将传统线下的报纸、杂志书籍迁移到了线上,在内容分类和组织上,完全借鉴了线下实体产品的分类方式,让用户在使用过程中完全可以按照早已建立起来的认知模式进行选择,减少用户的学习以及认知成本。

img

这是某女装品牌的宣传网站,也兼具商品在线销售功能,其采用了极简主义的设计风格,但是商品的分类和信息导航设置却非常清晰。在页面顶部的中间位置放置主导航菜单,并在主导航菜单的两边分别放置VIP会员申请和站内搜索。在主导航菜单中的Shop菜单中为商品的详细分类子菜单,方便用户快速找到所需要的商品。

img

这是一个家居产品的App应用,同样采用了极简主义的设计风格,在该界面中使用不同的背景颜色来区分不同产品的表现,效果清晰、明确,当用户在界面中单击某个产品图片时,该产品图片会在当前位置以弹出的方式逐渐放大,而其他产品图片则会逐渐淡出,从而自然地过渡到该产品的详细介绍界面中,整个界面的切换过程流畅而自然。

(2)按照用户行为分类

用户在进入产品、使用产品再到退出产品的整个过程中,会产生一条行为路径,根据用户行为路径上的每个节点所需要的功能和内容进行分类,让用户可以根据当前所在的路径节点快速找到相对应的功能及内容。

比较常见的产品设计案例就是电商购物类App或网站,用户在进行产品购买时,通常会经历产品浏览、选择、加入购物车、收藏、购买、支付、查看订单等多个环境。根据用户购买产品行为轨迹,对产品的功能和内容进行组织分类,让用户可以快速找到其想要的功能。

img

该移动端电商App应用界面采用了极简主义的设计风格,整体布局采用了商品图片加简单文字的设计,删减了不必要的装饰元素,使界面的表现更加整洁、统一。在商品列表界面的顶部为用户设置了商品分类,可以快速地切换界面中所显示的商品类型。单击某个商品图片,可以进入该商品界面,可以选择该商品的颜色,下方还显示了该商品的相关评论,在界面的最下方为“购物车”和“购买”按钮,方便快速访问。在“购物车”界面中,还为用户提供了相关商品的推荐,有效增强用户黏度。

(3)通过视觉设计分类

对产品界面进行视觉设计时,会通过颜色、图标、形状、大小等方式将产品界面、功能进行展现,让用户快捷发现有价值的内容与信息。

通过颜色设计,对产品内容进行分类,最常见的案例就是地铁线路图,通过对每一条地铁线路图赋予不同的颜色,让乘客可以通过颜色区别更快地关注到其需要乘坐的那条线路。

img

在该导航界面的设计中,使用不同的背景颜色搭配简洁的图标表现各功能导航选项,各选项的划分非常清晰、直观。并且在显示导航菜单的过程中,各导航选项表现为晃动的动态效果,给人一种富有趣味性的印象。

根据功能、内容的不同,为其赋予不同形状及大小,从而有针对性地突出希望被用户首先发现的信息。

img

在该移动端界面的设计中,界面中主要是以文字内容为主,整体使用蓝色作为背景主色调,白色方块背景突出文字信息内容的表现,而下方的“阅读详细信息”按钮则使用了红色进行突出表现,诱导用户点击该按钮浏览详细内容。当用户点击该按钮时,信息内容的白色背景将逐渐放大从而覆盖整个界面,而按钮也会缩小变形为评论图标,在视觉上给用户很好的反馈,使用户专注于当前的操作。