从10个维度，分析Instagram值得学习的视觉和体验细节

今天从 10 个维度，聊聊 Instagram 这款软件整体的设计与体验那些值得学习的地方。

一、Logo 的变化

下图是关于 Instagram 的从 2010-2022 整个图标变化的过程，从中能发现：

二、图标设计

我重新临摹 Instagram 启动图标，发现里面有许多的设计小知识点值得学习。

例如：图标背景颜色有黄色、红色、紫红色、紫色，相邻的两个颜色互为邻近色，使得绘制出的背景自然而炫彩，非常不错的设计，渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色，让渐变融入的更自然。

三、颜色的规律

明显的发现 Instagram 颜色跟色谱的规律一致，颜色从左到右色相的变化值在 50 度左右，4 种颜色都是用的高饱和度、高明度的色彩，非常艳丽、明亮，利用渐变附在英文上做出英文版的 logo。

iPhone 14 的字体渐变也是用的这种方法，利用两两邻近的颜色来做渐变。连苹果、Instagram 都在用，赶紧学起来吧，你也可以的～～

四、圆角的设计

五、主界面的分析

六、界面布局分析

Instagram 的发现页面做的很不错，我重新绘制了这个页面，发现系统想推送给你的图片或者视频会做等比放大 2 倍处理，一屏显示图片或者视频至少有一个最大显示，给用户的感受是有主次。同时开发也能很好实现这种布局，具有一定的规律性。

七、轮播点的设计体验

在 Instagram 界面当用户发的图片超出 5 张时，图片下方的轮播点会出现变化，有大有小。

我重新绘制了一个用户发的 7 张图片的示例，当用户在左右滑动图片时，轮播的点会跟着动，同时会有大小的显示，暗示用户后面或者前面还有多张图片，有近大远小的感觉，非常细节的设计。

八、设计的细节

九、图标风格

Instagram 整体的图标设计是线性的图标，线性图标给人的感觉是可点击、可操作的，同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。

十、经典界面

这个界面放在你面前可能都会知道是 Instagram 这个应用，这个界面框架已经形成品牌意识。

Instagram 一直没有更改这个布局，非常经典的设计，没有太多花里胡哨的图标与信息，只有简约的线性图标与用户发布的图片，克制的设计。也有很多相机应用、户外广告都借鉴了 Instagram 布局，已经在用户的心智里面了～

总结

感谢大家阅读，希望大家喜欢，后面不断输出好的文章与作品。