以Instagram为例,探讨UX设计与UI设计之间有什麽联系

用户体验(UX)和用户界面(UI)有着千丝万缕的关系,同时也涉及到每个创意和技术的领域。但仍然有不少人无法清除区分他们之间的异同,简单来说:

UX设计是通过提高客户与产品之间交互所提供的可用性,易用性和愉悦性来提高客户满意度和忠诚度的过程。

UI设计则是UX设计的补充,不仅让产品变得更有个性、更有品味,同时也让产品的操作变得更加舒适流畅。

本文将以Instagram为例,从IG过去十年UX和UI的发展和演变,说说UX设计和UI设计的联系有哪些。

Instagram的发展背景

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG 的UX设计和UI设计变化

IG最初是个照片共享社区,愿景是将亲朋好友们聚集到这个地方分享回忆。自2012年IG被FB收购後,IG从基础的照片共享服务发展成如今的文化潮流制造机,致使功能和程序设计本身的变化非常大:

① Logo

Logo是企业的无形资产,也是信息传递的媒介,在企业品牌形象的传递中出现频率最高,应用最广泛的关键元素之一。一个好的Logo能反映企业的品牌形象,大大增加产品的识别度,吸引更多使用者,同时也更利於企业的品牌的传递。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

十年IG的logo变化

近年IG的Logo设计趋势颇为大胆,从复杂的设计逐渐往扁平化、简约方向发展。原始Logo算是一个拟物化设计,细节比较复杂、配色相对柔和;但现在的Logo外观看起来更符合如今的审美,色彩鲜艳,也跟他整体的VI视觉更匹配。

② 功能的更新迭代

IG从来都没有中断过对产品的更新和迭代,功能的添加、删除或移除更是常有之事,如:

▶ 导航栏

在2010年的IG版本中,底部导航栏主要有Feed、Popular、Share、News和Profile这几个功能,颜色也是以蓝、灰为主。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG导航栏的变化

现在的导航栏则统一为白色,图标则变得更加简约,从整体上来看显得界面非常简洁。

另外,导航栏还有一处重大改动:删除心形图标的通知选项,改为「Shopping」图标,而通知图标则变为界面的右上角,在「Direct」图标的旁边。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG将「通知」图标改为「Shopping」图标

虽然这样的改动会让使用者经常会误触到,甚至会让部分使用者非常不悦,但这样做也可以理解。毕竟IG使用「Shopping」图标替换最常用的「通知」图标,可将更多使用者引导到IG新的Shopping功能上。

▶ Reels功能的增加

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG增加Reels功能

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

「 Reels」是IG新设置的功能,旨在允许让用户拍摄上传最长30秒的视频,而这也是IG试图与TikTok竞争的功能。但是这个新功能位置取代了原本「新帖子」的按钮,因此这个更新同样被许多使用者诟病。

▶ 被删除的功能「Following Activity」

「Following Activity」这一功能在2019年前算得上是个关键功能,不过为了实现更简化界面,现在已经被删除掉。根据IG发言人表示,普通IG使用者几乎不会去看Following Activity,认为他并不是特别有用的功能。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

删除「Following Activity」功能

不过这也要两面看,部分使用者的确希望自己的「喜欢」和日常最常关注的内容能对他人保密;但也有不少使用者认为,自己无法再跟踪朋友互动的帖子,降低对产品可用度。

▶ 直接照搬的「Stories」功能

「Stories」是IG直接照搬Snapchat的「Stories」功能,於2016年上市。与Snapchat一样,使用者在IG Stories所发布的内容会在24小时後被删除,但从效果上看,IG已经超过了竞争对手,首次亮相的一年内每天拥有2.5亿活跃用户。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG 「Stories」功能

不过IG Stories的成功也不无道理,与竞争对手相比,IG早就广泛使用了AI筛选和积累了丰富的消费者基础。

▶ 隐藏「Like」功能

为了让用户形成更健康的社群媒体使用心理,部分国家的IG已进行了隐藏「Like」功能的试验。在社群媒体上,「Like」的数量一直被视为社交货币,隐藏「Like」功能可减少使用者之间肤浅的竞争,也让使用者更自由地在平台上表达自己,而不需要不断需求他人的认同。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG隐藏Like功能

此外,尽管外界无法看到被点了多少次赞,但使用者依然可以看到自己被点赞的次数,而且也不会对他们的心理健康造成影响。部分用户还提及到,隐藏「Like」功能上线後,他们也不会像之前那样主动关注当前热门话题或搜索相关内容。

不过,KOL和广告商对这项优化抱有不同看法,主要是因为隐藏Like功能便无法向公众展示自己的活跃度,同时对自己的商业价值也有一定的影响。

▶ 广告+Feed算法带来的抱怨

最近,很多用户都发现经常会在Stories受到广告疯狂轰炸,而在Feed中也会经常出现嵌入式广告,破坏了原本流畅的观感和使用体验。

以Instagram为例,探讨UX设计与UI设计之间有什麽联系

IG嵌入式广告

这个问题主要是因为IG Feed算法的变化而产生。现在的用户没办法像过往那样按帖子发布时间顺序查看,而是根据IG上的参与度和覆盖率显示帖子,这会导致用户错过他们订阅或关注的更新,而随着关注人数的增加,弊端会更加明显,让用户的负面情绪有增无减。

另外,当用户为了查看最新帖子而滚动到Feed底部时,显示的仍然更多是「猜你喜欢」的相关帖子,这会让用户逐渐失去使用的意愿。

最後,我想说……

从Instagram这一案例来说,其实UX设计和UI设计可以说是产品设计中相辅相成,缺一不可的好兄弟。

UX设计主要是通过研究、开发和改进用户与公司产品交互的各个方面,通过不断测试改进,满足用户需求的过程。而UI设计则是以视觉方式,吸引使用者的注意力,并确保使用者能享受愉快的产品体验,从而引起用户良好的情感反应。

虽然UX设计和UI设计总是重叠地工作,但UI设计的所有工序都是围绕UX设计的设置来进行的,简单来说,没有UX设计的UI设计就像画家不加思索地往画布上作画;而没有UI设计的UX设计就像一个未完成的雕塑框架,只有两者相结合才能制造出「有血有肉」的上乘佳作。

可见,两者对产品的成功都是至关重要!

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

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

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 常见出错:过滤以及分面导航  

    过滤以及分面导航对於页面设计来说,最突出的优点是有助於提升用户体验。因为它们能够帮助用户排除浏览和操作过程当中的干扰因素,迅速找到准确的搜素结果。 但,要注意的是,不要随便给页面设计项目加上这两种工具…

    2022年6月25日
    0118
  • 关于psd格式如何转换成html。

    将PSD格式转换为HTML涉及图形设计到网页开发的转换,这个过程通常包括以下步骤: (图片来源网络,侵删) 1、理解PSD文件结构: 打开你的PSD文件,仔细查看图层、文件夹、切片等元素。 了解每个图层和文件夹的作用…

    2024年6月26日
    01
  • 如何让界面字体排版更为吸睛?

    •增加个性化的色彩 对於介面设计来说,字体不仅仅是呈现资讯内容,也承载着一定的视觉美感要求。因此,不妨使用一些个性化色彩的字体样式,比如手写字体、复古字体等,结合色彩,更有视觉吸引力。 •排版上更适合不…

    2022年6月25日
    0123
  • UI设计技巧:UI设计需要了解哪些心理学内容

    企业若想要透过UI设计能吸引用户关注、发掘潜在客户,甚至进行诱导转换等,了解相关的心理学是非常重要的。那麽UI设计需要了解哪些心理学内容? 为什麽UI设计需要了解心理学? 在UI设计和交互设计中,学懂用户心理学…

    2022年6月25日 建站资讯
    0215
  • 设计高手都在用的双钻模型和5E体验模型,看完这篇立刻学会。

    编者按:设计模型中最常见的2个:双钻模型和5E体验模型,看完这篇帮你掌握!1. 双钻模型它的作用是什么双钻模型是设计师在创作过程中可以循环复用的系统,他不仅可以在我们设计界面时运用到,在一些数据提升优化等…

    2023年3月2日 SEO操作
    02
  • 从网页设计的简史,见证当今网页设计技术的主流趋势

    从上世纪90年代至今,网页设计技术不断进步。过去网页的本质仅用於存放资讯,而现代网站早已不满足单纯在网页上放置资讯,而是着重於品牌形象的加深,从网站的UX/UI设计,拉近品牌与顾客的距离。 上期小编和大家一…

    2022年6月23日 建站资讯
    0233
  • 网页界面设计中动效使用所需注意事项

        介面设计使用动效目的之一,是它们自身有着符合其传达的意义。比如使用者上下滑动萤幕,介面内容就会上下变换,而不是左右的变换。仅仅为了动效而使用动效是不可能的,因此要注意以下几个注意事项: …

    2022年6月25日
    0128
  • 10分钟学会Figma 组件库的搭建和使用。

    背景1. 为什么需要 Figma 组件库当我们在做设计稿的时候,例如做一个按钮,如果没有做成可复用的组件,那后面在其他模块要用到按钮的地方可能又需要重新画,会有很多的重复劳动。又或是另一种场景,我们需要把按钮…

    2023年3月2日 SEO操作
    033

联系我们

QQ:951076433

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