24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » 以Instagram為例,探討UX設計與UI設計之間有什麼聯繫
  • 近期文章

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
    • 網頁設計中最基礎的配色技巧 讓網頁在色彩海洋中脱穎而出
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

以Instagram為例,探討UX設計與UI設計之間有什麼聯繫

分類: 最新資訊, 網頁設計 Tags: UI設計, UX設計, 網頁設計 日期: 2021-06-02

用戶體驗(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設計就像一個未完成的雕塑框架,只有兩者相結合才能製造出「有血有肉」的上乘佳作。

可見,兩者對產品的成功都是至關重要!

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理