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

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

一、Logo 的变化

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

  1. 图标从拟物的风格慢慢变成扁平的风格。
  2. 从具象的相机变成更加简约线形的相机图标。
  3. 颜色越来越艳丽、明亮,给人年轻、炫彩、简约的设计感受。
  4. 从 logo 的变化中能看出页面将从拟物的时代跨进了扁平时代,也能折射 Instagram 界面必将是往极简、炫彩的方向走。

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

二、图标设计

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

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

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

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

三、颜色的规律

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

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

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

四、圆角的设计

  1. 通过自己仔细的观察发现 Instagram 摄像头图标圆角是带有平滑过度的圆角,和普通的圆角不一样。
  2. 平滑圆角给用户的感受会更舒适、平滑、有活力,而普通的圆角显得更加生硬、不自然。
  3. 苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角,使得图标显得更加自然。
  4. 可以去看看之前原研哉帮小米设计的 logo,会发现他们的 logo 给人干净会更加有活力、生命力,而不是使用这种普通圆角,而是一种平滑过度的圆角~

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

五、主界面的分析

  1. 从 Instagram 的启动页面看出,Instagram 追求的是简约、突出品牌色的方向。
  2. 主界面主要以用户发的图片为主而不是文字,往往图片比文字更容易产生阅读与反馈。
  3. 整体的界面简约、素白,图标都是统一用黑色线条的描边。
  4. 当自己关注的用户,发了一些视频,头像上附带 Instagram 的品牌色的圆形,在白色的界面用品牌色进行了点缀,让单调的界面更具有识别性。

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

六、界面布局分析

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

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

七、轮播点的设计体验

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

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

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

八、设计的细节

  1. 在 Instagram 的用户界面,视频、多张图片、单张图片和置顶 4 种状态右上角有个图标的标识,让用户清晰知道图片的内容状态,提前给用户有个心理预期与区分。
  2. 当用户点击进去类似抖音的布局,可以进行上下滑动切换视频内容,双击可给该视频点赞,整体的体验很丝滑,没有任何的卡顿与拖沓。同时界面图标用线性的形式,布局统一、和谐。

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

九、图标风格

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

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

十、经典界面

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

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

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

总结

  1. 越来越多的企业的品牌色往鲜艳的方向走,突出品牌形象。
  2. 图片的排版不一定是同样大小的,可以有大有小,取决于更想给用户传达什么。
  3. 图标的统一性很重要,当整个 App 的图标风格都一致时,给用户的体验的感受也是一致的。
  4. 不断重复一个设计框架、设计组件时,会形成品牌意识,让用户记得你的产品。

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/235281.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月2日 11:57
下一篇 2023年3月2日 11:57

相关推荐

  • 引导页设计如何体现气质

      给使用者选择的按钮 为了不影响用户体验,引导页一般来说都只建议出现以此。但是在後面使用者可以根据其自身的需要进行再次点击查看,因为要保证用户能够再次看到它们的存在。 引导页设计一般来说使用四张图…

    2022年6月25日
    0114
  • 卡片式页面设计有哪些基础

    页面设计要运用卡片式方式,有很多需要注意的地方,因为卡片承载着太多类型不同的数据:图片、文字、按钮、链接、评论以及视频等。因此,卡片是一个可以点击的区块,前提就是要保证卡片的可读和易读,这样才能够让…

    2022年6月9日
    0140
  • 小编分享浅析:利用访客分析来进行网页设计。

    在网页设计之前,规划内容,需要的所有页面以及网站实现目标所需的功能。将内容划分为明确定义的部分,使用标准的网站结构。完成所有步骤后,即可开始构建站点,FTP上传网站程序,然后安装调试。调试好的网站,可以…

    2023年6月15日
    00
  • 或者你的网页设计差在了这两点

    必须让用户进行登录才可以访问 即使不是必须用户进行登录才可以浏览到网页当中的详细内容,但是让用户刚点击进去的时候就弹出注册登录框的话,也是会影响到用户体验。若有条件,最好能够提供用户自主选择为注册登录…

    2022年6月25日
    0109
  • 网页设计注意事项:UI设计需要注意什麽

    UI设计是网页设计的主要部分之一,也是提升网站用户体验的秘密武器。要想为网站带来意想不到的效果,把握好UI设计的要素非常关键。那麽,UI设计需要注意什麽? UI设计需要注意什麽? 注意一:色彩不是UI设计的决定性…

    2022年6月25日 建站资讯
    0128
  • 为什麽空间间隔方式如此好用?

    什麽是空间间隔方式?简单来说就是,很多时候,到了网页设计布局流程後,一般都会通过用线条和分隔符号来进行划分的内容区块。但这并不是那麽好用!因为会让视觉效果显得比较拥挤。因此,空间间隔的方式能够让区块…

    2022年6月25日
    0119
  • 我来教你网站设计中选择字体时应注意什么。

    字体影响着网站设计是否美观,是否能吸引用户,因此,我们在网站设计中,选择字体时要考虑细节,莫让细节成为你成功的绊脚石。那我们在选择字体时应该注意什么呢?1. 适合您的品牌一个优秀的网站其文字字体的选择适…

    2023年6月16日
    05
  • 颜色是如何服务於页面视觉比重?

    颜色是页面设计一个不可或缺的重要组成部分,而颜色自身就携带着一定的属性,所以很明显影响着页面的视觉效果比重。 其实,凭藉着我们自身的直觉去感知颜色的比重都是真实的,因为这些分辨能力可以说是与生俱来的。…

    2022年6月17日
    0206

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息