上虞学美工运营直通车标题优化培训班，创智教育电商培训
上虞学美工运营直通车标题优化培训班，创智教育电商培训
上虞市百官街道财富广场3号楼6楼，创智教育
详情页概述
我们讲到正文内容区域如果是首页的时候该怎么设计，同时简单介绍了一下详情页：详情页一般是查看/操作页面，常以列表、表单、信息详情的形式展现。下面我来来详细的介绍内容详情页的设计思路，我们先要了解下内容区的构成和基本展现形式。
首页（控制面板）详情页结构
内容区构成：
一个基础的详情页面基本上是以两类区域构成的，包括操作按钮区和内容展示区：
其中，内容展示区可以是表单（信息填写、修改……），也可以是图文详情或者数据图表。扩展到出来也可以根据业务需求、页面规划的不同，扩充出菜单区、查询区等其他功能区域。
各个区域组合布局，根据实际业务需求和场景自由组合设计，常见的按钮区根据用户操作场景的前后顺序会放在顶部或底部，内容区占大部分位置放于正中，其他的区块（菜单区、查询区等）可以放置于内容区左右也可以结合到按钮区域。
展示样式：展示样式也是分成以下主要也是根据展示方式的不同分为：嵌入式、弹窗式、嵌入式、抽屉式。
【嵌入式】系统常见的展示方式，直接在右侧展示操作内容。
（1）嵌入式单列
参考案例：框框区域为内容区（详情页）
（2）嵌入式_双列，左右两列的比例可根据功能的需要在设计是进行调整
参考案例：红框区域分为左侧列表区、操作按钮区和右侧内容区；
【弹窗式】以弹窗口的形式展示，可带底部遮罩。
常用于单的功能模块以应用/面板的形式展现，打开后只可以在当前窗口完成所有操作或者退出操作。
（1）弹窗式_有遮罩，弹窗一般不可以放大缩小和移动，引导用户要么在弹窗中完相应的操作，要么就关闭退出该功能对应的详情页弹窗。
参考案例：空间查看图片。
（2）弹窗式_无遮罩：弹窗无底部遮罩，一般可以移动放大缩小，可以同时打开多个窗口，可在多个窗口中切换。(类似于win系统中的文件夹，或者浏览器的标签页、qq对话弹窗）
参考案例：360安全卫士，弹窗展示对应的功能，常用于的场景是类似于360将一个个功能模块作为应用进行分类、展示，用户点击后弹出改应用对应的操作页面；
【抽屉式】从右侧展开内容详情，可以算是一种变异的弹窗样式，可以方便用户快速切换需要展示的内容，常用于列表和内容的结合。
案例：点击左侧列表，选项对应的内容从系统右侧展开展示，用户可以在左侧列表快速切换右侧展示的内容。
【其他样式】介绍一些比较特殊/复杂的内容详情页，可以是内容区展示信息比较特殊，也可以是内容区包含的功能区块相互组合而成。
基本上掌握上方三类基本样式就可以自由组合成其他复杂样式了。
上面讲了基本的内容结构和基本的几种展现形式，下面根据功能再对内容不同在对内容样式进行分类介绍。
查看全部介绍
