|
回顾一下上一篇中讲到的：“咱们能够经过数据统计、表格、详情页协同筛选、搜索实现查和显的操作，达到从区别维度向用户输出的目的。从数据的概括/抽象程度方向看：数据统计>表格>详情页。”这一篇就来继续总结下详情页的设计。 
几个详情页的例子
相较前边的表格和表单，详情页简直是五花八门，能够是照片、数据、表格、图表各类元素的各样摆列组合。详情页这个概念在电商系统中运用的比较多，每一个商品介绍便是一个详情页。 
（某宝网页）
之前看到过一个栗子，举得是财经类网站中某只股票的详情页面，亦比较拥有表率性。 
（某股票网页）
再举个栗子，便是项目管理软件中某个项目的详情。 
（teambition）
以上这些页面都差别很大，因此相对的设计时候的招数就少非常多，但咱们仍然能够总结出有些共性~
详情页的入口
详情页内容较多，一般必须单独的一个页面/弹窗来承载，因此打开它就必须一个入口。
这个入口很大几率是在表格页中的。为何呢？
想象一下，通常用户的浏览次序是从宽泛到详细，仅有对某个对象的概况感兴趣，才会点击进入详情页认识它的所有信息。例如我想买一件毛衣，首要会浏览毛衣关联的商品列表，觉得某件毛衣还不错后才会点击查看详情。
B端系统中最平常的是经过按钮，或直接点击名叫作/标题进入详情页的；有些列表中，信息是以卡片化的形式展现的，点击卡片亦能够进入详情页；还有些内容比较少的详情页是以弹窗、折叠面板等形式展现的。 
分块
个人认为分块是详情页设计中最核心的思想。
首要为何要分块？
由于详情页的特点便是包括的信息非常多样，为了让这些多样的信息看起来更加有序，让用户能更方便的找到想要的信息，最好把同一类或比较关联的的信息放在一块，把区别类的信息从视觉上区掰开，这般信息就被分成为了一起一起的了。在前边的表单设计中亦有说到过填写信息时候要“分块分步”，其实详情页表示信息是同样的。
还是举资产的例子，资产的属性进过归类后分为基本信息、运用信息、采购信息、折旧信息四类。详情页中表示的时候亦是分为四块来表示，这般看起来就一目了然了。  
倘若每一类的内容非常多，能够采用tab分页的形式。例如上边说到的某项目管理软件中，一个项目下分别有“任务”、“分享”、“文件”、“群聊”……多个模块，每一个模块都是较为繁杂的功能，因此采用tab分页，能够灵活的在这几个模块间切换。 
明显重点
亦是因为详情页内容繁杂，除了分块之外，最好把用户最关心的内容放到最显眼的地区。“显眼”能够经过元素的位置、体积、颜色等来实现，这是更偏重UI设计的范畴了，我就不展开啦
举个栗子吧，用户第1次打开某股票的详情页，很容易不知所措，由于内容实在太多了。一眼望过去最显眼的信息一是股票名叫作、二是当前的价格，这亦是这个页面中最最重要的信息，还有图表信息亦在一堆文字中脱颖而出。 
基于分块+明显重点的思路，始终用来举栗子的资产详情页亦能够优化下。此刻是这般的： 
把用户最关心的信息（资产名叫作、位置、运用人）和直观的资产照片放在最顶端，大概是这般的： 
详情+编辑
在“编辑”功能比较低频的时候，我会把“编辑”直接放在详情页而不是放在表格页里。有些字段本身在表格中无表示，想要编辑肯定要先进详情页查看，因此把“编辑”直接放在详情页亦符合用户的操作流程。
这般做的好处是在表格页中能够给更高频的操作留出空间，坏处是“编辑”的入口比较深。
关联阅读
2B制品设计招数一：表单设计
2B制品设计招数二：表格页设计
本文由 @LCC 原创发布于人人都是制品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
| 
发表于 2024-8-12 21:47:11