web端交互设计细节手册（一）

本文主要总结了我在实际交互设计中的所遇见的细节问题，来源于在绘制产品原型图阶段对于设计细节的思考，类属于产品框架层的部分内容，不涉及产品范围层、结构层的内容。
一、loding加载页面问题——栅栏式加载还是焦点式加载

1.1 栅栏式加载

展示页面的主要模块区域，模块区域内的信息内容呈现出加载样式。
1.2 焦点式加载

页面加载时只显示底图，加载完毕后才出现展示信息，加载时的loding图标可能就是一个圆圈也可以是产品icon，但这种形式统一叫做焦点式加载。

对比而言，栅栏式加载更适合运用在区块固定的页面，而且是加载后需要有对应的信息展示，如果没有信息展示就会造成用户的心理落差感，从而降低用户体验，像豆瓣app就大量运用栅栏式加载。而焦点式加载则运用范围更大，无论区块是否固定，都可以使用焦点式加载，但视觉体验上不如栅栏式加载。

二、文字按钮何时需要加下划线

文字按钮一般来讲有两种情况，带下划线或者没有下划线的（还有一种是鼠标移上去时出现下滑线，这种也属于前者），这两种文字按钮怎么运用呢？
2.1 带下划线的文字按钮

这种按钮点击后的触发效果应该是跳转到一个新的链接地址或者打开新的页面，如点击一个用户名，跳转到此用户的用户主页。还有一种情况是，在一个长文本里将一个文字按钮带上下划线，目的是明确的告知用户这里是可以被点击的。

2.2 普通文字按钮

一般的文字按钮是不带下划线的，点击后的触发效果可能是触发弹窗，弹出浮层，切换tab等。

接下来就是下拉按钮和下拉复合按钮的使用，这部分内容会在下篇文章中继续详细介绍，赶紧去看看吧！

以上就是“web端交互设计细节手册（一）”的内容了，如果你还想了解其他相关内容，可以来 产品壹佰 官方网站。