以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协议