提升IM聊天界面的体验

IM用户体验最重要的一环估计就是聊天界面了，最近产品中私信部分换成IM形式；由于产品的快速迭代，最终方案我们选择了使用第三方IM，腾讯开发平台的云通信IM；选择他们的考虑是，基于QQ技术方案开放出来的服务，在技术和用户压力方面应该比较可靠。

来说说聊天界面的那些小细节优化吧，虽然我还做的不好，但先做个小记录。 我对比了QQ、微信、钉钉，其中微信是做的最好的，交互逻辑清晰，体验顺畅。钉钉是基于collectionView的，其他的没具体看他们是基于tableView 还是collectionView。

11F1F919-D42A-4F5C-ACD9-E2AB3EF7CAA6.png

原因

在下拉获取历史记录的时候会出现界面跳动的情况，钉钉、QQ也不例外，微信是做的最平滑的（截止写这篇文章时）。

我也是基于collectionView来做聊天界面，来具体看看怎么实现这样一个平滑加载的过程吧。

1.首选继承UICollectionView 重写setContentSize: 方法

- (void)setContentSize:(CGSize)contentSize {
    if (!CGSizeEqualToSize(self.contentSize, CGSizeZero))  {
        if (contentSize.height > self.contentSize.height) {
            CGPoint offset = self.contentOffset;
            offset.y += (contentSize.height - self.contentSize.height);
            self.contentOffset = offset;
        }
    }
    [super setContentSize:contentSize];
}

如果加载出新内容，说明新的contentSize.height 会比原来大，这时候再做一个offset就可以了，这样视觉上就不会看到跳动一下。

2017-06-15 11_23_46.gif

还有一个需要注意的地方就是隐式动画，当刚开始进入聊天界面UICollectionView 加载出所有cell的时候需要滚动到底部，默认情况下会有一个视觉上的滚动过程，所以需要关闭掉这个滚动视觉效果，给人一种一进来就加载好了的错觉才是上策。

[UIView setAnimationsEnabled:NO];
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(time * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self.collectionView reloadData];
                self.isLoading = NO;
                [UIView setAnimationsEnabled:YES];
            });