责任编辑为《以web端为例：我的可视化结构设计技术细节指南》的下半部份，文本竭尽全力著眼于web端可视化结构设计技术细节难题，该文大部份所提示例都源自于译者前述组织工作中所碰到或是思索过的可视化难题，具备前述的参照象征意义。
一、有关网页提示的结构设计
1.1 无提示重要信息状况
对一些单纯且操作方式后状况变动显著的操作方式，不须要展开任何人提示重要信息，避免吓倒采用者，比如打控制器闭控制器、雅雷等，这些操作方式通过网页上原素的状况变动已经显著的意见反馈给采用者操作方式结论，就不须要再进行任何人提示重要信息（如下表所示图）。
1.2 自上而下提示重要信息状况
自上而下提示重要信息通常是对操作方式结论的意见反馈，但不须要采用者展开伊瓦诺确认或是下一步棋的鼓励，且操作方式的结论在网页整体表现上偏弱，这时就须要自上而下提示重要信息采用者操作方式的结论。
比如联络人重新分配获得成功，因为重新分配后，联络人卡牌上的变动很小，实际上是归属于人的表头出现出现改变，采用者难于交互到重新分配与否获得成功，这时须要展开自上而下提示重要信息。
1.3 快捷方式提示重要信息
快捷方式提示重要信息的采用主要是下列四个情景：
（1）对部份灾难性或是不可逆操作须要采用者展开伊瓦诺证实（如下表所示图一）。
（2）部份须要展开鼓励的意见反馈都须要是用快捷方式提示重要信息。
比如：右图二最新消息转交增设这儿，如果没有健全店面的数据资料，将转交不出最新消息，只好点选最新消息控制器须要提示重要信息采用者先去健全店面数据资料，这儿就须要采用快捷方式提示重要信息，鼓励采用者去健全店面数据资料。
（3）重要重要信息须要采用者证实的，或是网页文本过多，须要耗费采用者很大时间去写作的（如下表所示图三）。
1.4 固定导航提示重要信息
固定导航提示重要信息主要分为两种：
可停用的式的导航固定导航提示重要信息。通常用于与该网页业务有关的说明或是须要提醒采用者的提示重要信息；不可停用的提示重要信息。这种提示重要信息的业务层面级别高于上一种提示重要信息，必须让采用者知道，固定导航的提示重要信息通常在登陆系统后才出现。1.5 侧边系统提示重要信息
侧边系统提示重要信息通常是系统类的提示重要信息，或是跨功能的提示重要信息。
比如来了一封新的邮件或是系统程序出现了某种故障须要告知采用者，往往是被动的及时意见反馈的提示重要信息（与主动及时操作方式意见反馈不是一个概念），这类通知对网页的通常在网页的右侧出现，且必须会自动消失或是可以手动停用。
二、对图片展示规则的结构设计
2.1 社交媒体类平台
对社媒类平台，图片都是由个人展开上传，各种图片尺寸、质量都参差不齐，而为了优化体验和保持美观，通常会按照上下左右居中截取的方式把图片展示出来（规则为上下左右居中截取，小图会自动放大适配长宽去截取，如新浪微博）。
2.2 工具类平台
对工具类平台，会按照长宽缩略展示图片全部概况（图片同比缩放展示），因为在工具平台里主要满足图片采用的情景，如淘宝店面里上传产品详情图，这时采用者更须要了解图片的基本概览。
三、与否须要新开网页的规则
在前述结构设计组织工作中，我们经常会碰到这样的难题，点选某个按钮是新开网页还是本页跳转。当然这儿面牵扯到的原因会有很多，比如阿里千牛后台，点选每个一级二级tab都会在一个新的网页关上，这是因为深层次的商业原因，现在仅站在结构设计的角度上来分析这个难题。
3.1 导航层级之间的切换
在一个后台系统中，在导航切换时，是不用新建网页的，无论是一级二级三级的导航都是在原页跳转。
3.2 跳转链接
如果点选的是一个外网链接，则建议新建一个网页展开展示。
3.3 查看详情
查看详情是一个常见的操作方式情景，目前大多数平台是新建网页查看，但我建议在后台系统中可以用模态的形式展示详情，这样做的好处主要在于可以在查看详情的同时对比其他同类数据，当然也可以新开网页去查看详情，但记住不要在详情页里放置删除此单元的按钮，因为这样会造成数据不同步的bug。
四、用列表还是用卡牌
在结构设计一类重要信息区块时，通常有两种比较常用的重要信息展示形式，卡牌和列表。结构设计师也往往会纠结采用那种展示形式，这儿有个诀窍可以分享给大家——如果重要信息数量较多，且大部份重要信息表头展示数量一致用卡牌，其余情况都用列表。
右图就是一个典型案例，由于展示表头数量不一致，且还有更多的拓展表头，导致卡牌上的操作方式都不一致，且查看卡牌详情时很尴尬——因为有的卡牌表头已经全部展示出来了，这时查看详情没有象征意义，但有些卡牌表头被隐藏了，就须要点选详情去查看或是展开卡牌查看，导致网页可视化变得十分复杂。
而反观左侧列表式的方式，拓展性良好，无论有多少表头须要展示都可以向下延展展示，即使在同等高度上展示的区块数量没有右侧卡牌多，但对重要信息完整度则好多了。
以上就是《以web端为例：我的可视化结构设计技术细节指南（下）》全部文本，如果没有写作过上篇的同学可以点选写作，同时预告一下责任编辑译者正在撰写一
结语：责任编辑案例参照了“新浪微博”、“盈店通平台”、“大搜车SRP”部份网页和控件，如涉及侵权请联系译者删除。
译者：李小先生，公众号：速食结构设计
责任编辑由 @李小先生 原创发布于人人都是产品经理。未经许可，禁止转载
题图源自Unsplash，基于CC0协议
