|
之前的两篇文案，咱们讲了整体的系统页面结构框架能够怎么搭建，讲了首页的设计思路，此刻咱们来讲讲详情页能够怎么设计，倘若你准备好的话，那咱们能够新的旅程啦。 
详情页概述
上一章节，咱们讲到正文内容区域倘若是首页的时候该怎么设计，同期简单介绍了一下详情页：详情页通常是查看/操作页面，常以列表、表单、信息详情的形式展现。下面我来来仔细的介绍内容详情页的设计思路，首要咱们先要认识下内容区的形成和基本展现形式。 
首页（掌控面板）详情页结构
内容区形成：
一个基本的详情页面基本上是以两类区域形成的，包含操作按钮区和内容展示区： 
其中，内容展示区能够是表单（信息填写、修改……），亦能够是图文详情或数据图表。扩展到出来亦能够按照业务需求、页面规划的区别，扩充出菜单区、查找区等其他功能区域。
各个区域组合布局，按照实质业务需求和场景自由组合设计，平常的按钮区按照用户操作场景的前后次序会放在顶部或底部，内容区占大部分位置放于正中，其他的区块（菜单区、查找区等）能够安置于内容区上下亦能够结合到按钮区域。
展示样式：展示样式亦是分成以下重点亦是按照展示方式的区别分为：嵌入式、弹窗式、嵌入式、抽屉式。
【嵌入式】系统最平常的展示方式，直接在右侧展示操作内容。
（1）嵌入式单列 
参考案例：框框区域为内容区（详情页） 
（2）嵌入式_双列，上下两列的比例可按照功能的必须在设计是进行调节 
参考案例：红框区域分为左侧列表区、操作按钮区和右侧内容区； 
【弹窗式】以弹窗口的形式展示，可带底部遮罩。
常用于单独的功能模块以应用/面板的形式展现，打开后只能够在当前窗口完成所有操作或退出操作。
（1）弹窗式_有遮罩，弹窗通常不能够放大缩小和移动，引导用户要么在弹窗中完相应的操作，要么就关闭退出该功能对应的详情页弹窗。 
参考案例：QQ空间查看照片。 
（2）弹窗式_无遮罩：弹窗无底部遮罩，通常能够移动放大缩小，能够同期打开多个窗口，可在多个窗口中切换。(类似于win系统中的文件夹，或浏览器的标签页、qq对话弹窗） 
参考案例：360安全卫士，弹窗展示对应的功能，常用于的场景是类似于360将一个个功能模块做为应用进行归类、展示，用户点击后弹出改应用对应的操作页面； 
【抽屉式】从右侧展开内容详情，能够算是一种变异的弹窗样式，能够方便用户快速切换必须展示的内容，常用于列表和内容的结合。 
案例：点击左侧列表，选项对应的内容从系统右侧展开展示，用户能够在左侧列表快速切换右侧展示的内容。 
【其他样式】介绍有些比较特殊/繁杂的内容详情页，能够是内容区展示信息比较特殊，亦能够是内容区包括的功能区块相互组合而成。
案例：微X公众平台编辑页面 
基本上把握上方三类基本样式就能够自由组合成其他繁杂样式了。
上面讲了基本的内容结构和基本的几种展现形式，下面按照功能再对内容区别在对内容样式进行归类介绍。
内容样式
详情页重点应用于次级模块页面、功能页面以及后续系统的所有子页面，此刻我更准确的把详情页再分成以下几个大类：列表、表单、图文详情、数据图表。列表是最为平常的内容，包括的操作功能交互亦会比较多；表单重点是信息填写/保留/修改操作的功能页；图文详情常用于文案（资讯）/文件详情页的展示；最后数据图表是以图表的形式展现系统数据，能够和上一节介绍的掌控面板类似，以数据图面板组合成详情页。
【表单】常用户采集信息数据，适用于新增、修改、编辑、设置等功能应用场景
表单_信息编辑 
表单_邮件编辑（参考网易、qq邮箱） 
表单_新增，详细展示哪些表单组件和这些组件的布局必须你按照实质的需求进行个性化设计； 
【图文详情】主展示展示图文结合的信息内容（能够仅有图或仅有文字内容）
图文详情_信息阅读 
图文详情_内容+列表（邮件回复） 
图文详情_弹窗（无遮罩）  
【数据图表】数据图表是比较繁杂的场景，由于区别的业务数据区别，对应适合的图表亦区别个性化程度较高，这边简单介绍有些参考示例。
（1）数据图表_数据综述+数据详情，比较平常的设计方式，先对整体数据进行综合展示，再展示对应的数据列表信息。
参考案例：微信公众平台用户分析 
（2）数据图表_多图结合，多个图表整合，能够按照必须展示数据的优先级进行个性化设计；（类似首页_掌控面板的图表多图结合的样式） 
【列表】列表是最平常的内容区样式，将模块内容所包括的信息以列表的形式展现
方便用户浏览和操作，重点用户此模块是对数据的编辑操作或是数据展示； 
（1）列表_表格 
（2）列表_办件列表，信息较多没法以表格的形式没法展示所有重要信息，因此必须整合信息内容，展示更加多信息，操作方便，但研发难度很强；（参考淘宝订单中心） 
（3）列表_信息，展示图文信息列表； 
（4）列表_图文列表（卡片式），图文为重要内容，必须明显展示，以卡片为展示样式；    
小结
本章重点讲了内容区（详情页）相关的设计结构样式以及功能归类的设计案例，由于篇幅有限，因此无很仔细的针对每种类型的运用场景，功能交互进行仔细的说明，请见谅。我所讲的内容亦只是有些基本的设计案例，只是给大众做个参考，非常多繁杂的方法并无介绍，实质设计的时候还是必须大众按照制品/业务需求个性化的设计。期盼这篇文案能够帮忙大众快速入门，给大众一个设计时候能够参考的方式办法。
有非常多讲的不清楚、不到位的地区，请大众多多指教。
备注：文案中的截图内容都来自网络，如有侵权，请即时联系我进行处理。
原型演示位置：http://1q779b.axshare.com
| 
发表于 2024-8-12 08:25:39
