恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Instagram的视觉体验分析
4.0°
2022-11-15 原创文章 经验/观点 举报 16905 53 77 7

今天和大家分享用了几年的一个社交软件Instagram。发现这款软件整体的设计与体验有值得学习的地方,从10个维度分享分享,希望大家喜欢啦~~


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


2.图标设计
我重新临摹Instagram启动图标,发现里面有许多的设计小知识点值得学习。
例如:图标背景颜色有黄色、红色、紫红色、紫色,相邻的两个颜色互为邻近色,使得绘制出的背景自然而炫彩,非常不错的设计,渐变的融入也很自然。
当我们自己做渐变的图标背景时可以用两两相邻的颜色,让渐变融入的更自然。


3.颜色的规律
明显的发现Instagram颜色跟色谱的规律一致,颜色从左到右色相的变化值在50度左右,4种颜色都是用的高饱和度、高明度的色彩,非常艳丽、明亮,利用渐变附在英文上做出英文版的logo。
iPhone 14的字体渐变也是用的这种方法,利用两两邻近的颜色来做渐变。连苹果、Instagram都在用,赶紧学起来吧,你也可以的~~


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


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


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


7.轮播点的设计体验
在Instagram界面当用户发的图片超出5张时,图片下方的轮播点会出现变化,有大有小。
我重新绘制了一个用户发的7张图片的示例,当用户在左右滑动图片时,轮播的点会跟着动,同时会有大小的显示,暗示用户后面或者前面还有多张图片,有近大远小的感觉,非常细节的设计~(可以利用在自己的一些设计上)


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


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


10.经典界面
这个界面放在你面前可能都会知道是Instagram这个应用,这个界面框架已经形成品牌意识
Instagram几年一直没有更改这个布局,非常经典的设计,没有太多花里胡哨的图标与信息,只有简约的线性图标与用户发布的图片,克制的设计。也有很多相机应用、户外广告都借鉴了Instagram布局,已经在用户的心智里面了~


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


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

微信公众号:黄小伟设计


Powered by Froala Editor

更新:2022-11-15

收藏

53人已收藏

评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:3星

推荐:
在不同纬度下对Instagram的分析角度很不错,单在视觉层面上分享给大家,加油~

黄小伟

每天都要加油

  • 12

    作品

  • 139

    粉丝

  • 63

    关注

  • 3D主题设计!
  • 喜茶小程序产品设计体验分析
  • 爱彼迎产品设计体验分析
  • 韩国29CM产品设计语言分析

    猜你喜欢

      2022-11-15 原创文章 经验/观点 举报 16905 53 77 7

      Instagram的视觉体验分析

      4.0°

      你确定要举报Instagram的视觉体验分析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年11月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      77
      53
      7

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录