富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)

富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)
富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)

掌握這5大UI/UX設計趨勢,想要在電商打出一片天絕非難事!(上)

 

目錄

電商取代實體商店成主流 UI設計重要性堪比店面裝潢

一、玻璃擬態(Glassmorphism)的 UI 設計

二、耳目一新的大膽字體(Big Loud Typography)

三、有別於傳統的抽象幾何(Abstract-geometric)

四、跳脫平面單一感的 3D 圖像(3D Imagery)

五、語音介面設計(Voice User Interfaces, VUI)

 

美國堪稱最具指標性的財經商業雜誌「《富比士》(Forbes)」,近期竟跨領域地提出 2021 年UI/UX 設計的5大趨勢!

 

《富比士》所屬之「富比士機構委員會(Forbes Agency Council)」的其中一個成員、也是「數位比佛利行銷策略公司(Digital Beverly Marketing Solutions)」的CEO Oganes Vagramovich Barsegyan就提出了5個今年掀起熱潮的 UI/UX 設計趨勢。

 

電商取代實體商店成主流 UI設計重要性堪比店面裝潢

全球發生在線上的交易活動早在激增中,加上新冠(COVID-19)疫情讓民眾在家中使用手機、iPad、電腦等進入電商消費的模式,已取代以往的實體門市。消費者們已融入數位服務的生活,習慣、行為已有大大的改變。

 

如今網站上的UI(使用者介面)設計,就相當於實體店面的裝潢,且比以往更加重視美感。UI介面設計的變化以下五個 UI/UX 設計趨勢觀點:

 

一、玻璃擬態(Glassmorphism)的 UI 設計

UI/UX 普遍正朝著極簡主義美學,玻璃擬態長期保持領先的流行趨勢,從配圖到整個操作流程的介面、按鈕使用同一種色系,以不同層次結構和深度的呈現,顯得不會單調枯燥。網站避免繁雜的資訊或低解析度照片,保持觀看者能清楚閱讀,增加停留在網站上的時間。

 

如同以下影片所示,玻璃擬態主要基於背景模糊與磨砂的效果,營造出漂浮在空間中的穿透、朦朧感。譬如說:蘋果與高盛銀行共同發行信用卡「Apple Card」 科技、時尚的設計,出於玻璃擬態的概念,視覺宛如漂浮在半空中的透明卡片,隨著消費類別改變不同柔和的顏色。

 

 

二、耳目一新的大膽字體(Big Loud Typography)

大字體是 2021年 的五大 UI/UX 設計趨勢之一

 

重複無奇的排版文字會產生視覺疲乏,需要產生亮點為觀看者帶來視覺刺激。敢於大膽破格的用字,凸顯出設計師是否有獨特的思維,更容易受到關注。不同的字體造型,產生不同的情緒與印象,即使是誇張或用於開箱文的標題,搭配合適的UI/UX設計,令人感到新穎卻又不失傳統的美感。

大膽字體能吸引網站訪客,但也可以不譁眾取寵的方式呈現。

 

大膽的字體風格是吸引網站訪客的必要條件,視覺上不是要呈現對人大吼大叫般的緊張感,比較像是微妙的語氣說道「看這裡」。此外,可以嘗試在同標題中組合不同的字體,同時兼具可讀性與可視性的特點。

 

大膽字體能吸引網站訪客,但也可以不譁眾取寵的方式呈現。

 

三、有別於傳統的抽象幾何(Abstract-geometric)

抽象幾何圖案是 2021年 ui/ux 設計趨勢之一

 

具有線條、形狀和角度的抽象藝術歷久不衰,現今煥然一新仍是受到關注,歸功於形狀和顏色兩者結合在一起表達想法,並且以自由流動、非線性的方式表達創作。

 

許多企業喜歡抽象和幾何藝術,因為能夠化繁為簡,具有簡練、醒目、形式感強的UI/UX視覺特點。增加鮮明高對比的顏色,創建富有表現力的外觀,而不會分散用戶的注意力。獨特創新的融合於畫面並不拘一格,體現出商業中的樂趣。

 

譬如說:試著使用抽象幾何地圖的設計,取代網站上的傳統地圖,觀看者肯定會記住您的位置。

 

 

下篇請看此連結

 

 

 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


擔心線上開會太邋遢?AI神救援讓你形象超完美(上)


憂鬱症掰掰,人工智慧快速判別及早治療!


軟404讓你SEO成效不彰?放心,谷歌正著手處理中!

 

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(下)

 

本文為下篇,上篇請看此連結

 

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序就像是使用者和系統之間的對話,在 UI /UX設計的過程中,不斷反問自己或換位思考,使用者點選按鈕的步驟,會希望達成什麼目的,並進行相對應的設計。譬如說:上一頁/下一頁的按鈕,左右方向的箭頭按鈕是常見呈現方式。

 

 

6. 避免過多的按鈕分散注意力

為了能夠增進 UX 使用者體驗,會在同個頁面上增加各式各樣的按鈕,一不小心數量會比預期來得多,便會產生分流降低點擊率。譬如說:如果主要目的是想讓使用者點選頁面下載按鈕,使用者可能會因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開,以確保使用者點選到目標按鈕。

 

 

7. 加入音效或動畫產生互動

藉由人的五官體驗,在按鈕的設計上傳達聲音與動態效果就能更加深使用者的體驗,試著營造出如同按鈕圖示呈現的舒適情境,當使用者點選時,產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時,通常會認為系統沒有接收到指令,而不斷的重複點選,便會導致多次不必要的操作。

 

方便點選的按鈕還有許多值得探討的 UI 設計技巧,以上所述的7個基本要點常用也可以說是最容易忽略的一部分。優化按鈕設計的各種細節,探索各個細節對目標的點選,更能夠達成自己所理想的轉換成效哦。

 

 

 

 

 

 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


線上會議不卡卡,人工智慧讓你給你超優質體驗!(上)


影片也要SEO?!15種方法讓你在GOOGLE前幾名!(上)


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

 

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(上)

 

目錄

1. 互動式的按鈕設計

2. 方便搜尋版面上的按鈕位置

3. 指令清楚的按鈕標示與說明

4. 符合使用者習慣的尺寸大小

5. 按鈕在版面上的順序位置

6. 避免過多的按鈕分散注意力

7. 加入音效或動畫產生互動

 

按鈕在網站上出現的頻率是相當高的,如同實體店面的動線,協助顧客快速找到目標。隨著線上的商業發展蓬勃,網站設計上開始重視使用者觀看版面的體驗(UX),如何藉由按鈕的佈局轉換為交易,並進一步提升營收將是本次的主題。

 

雖然現今的網站美輪美奐,還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design,簡稱 RWD)的普遍,改善同時在手機、iPad與電腦不同裝置顯示問題,在版面中搭建使用者與系統之間的互動操作流程,仍不能缺少按鈕作為基礎視覺元素。

 

按鈕的設計不只是簡單的一個圖示,任何讓我們感到舒適方便的操作,都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理,加入外觀美學、色彩學等知識創建而成,分成以下7個基本要點說明:

 

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式,依照按鈕產生的狀態設計不同外觀,包含:大小、形狀、顏色、陰影等因素組成,再搭配上合適的字體與間距,藉由簡單的觸控、按下去即可達到目的,讓人享受到即時的強烈滿足感。

 

線上虛擬按鈕的視覺性,來自接觸實體按鈕的體驗和認知根深蒂固,UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

 

以下是大多數用戶熟悉的幾個按鈕示例:

1. 帶有方形邊框的按鈕

2. 帶圓角的按鈕

3. 帶陰影的按鈕

4. 幽靈按鈕

 

 

除了容易點選的按鈕樣式,保持與周遭文字適當的留白避免視覺干擾。

 

 

 

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時,會搜尋版面可點選的功能按鈕,比如:下一頁、產品介紹等,如果使用者在視覺上尋找的時間愈久,若找不到按鈕,便不會知道它的的存在,愈容易感到網站不好使用。

 

為了和使用者不要玩追逐按鈕的遊戲,因此使用一致性的排版設計,便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局,足夠的留白與簡潔使版面不會太擁擠,即使不是強烈鮮明的按鈕,依然隨著閱讀動線吸引使用者輕鬆的點選。

 

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示,容易讓使用者感到迷惑。設計標示按鈕文字時,為了傳達出每個按鈕的作用,便需要簡短、有邏輯且適當的文字,讓使用者清楚了解點選按鈕後的結果,盡快獲得自己想要的內容,太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

 

比如下列案例

 

 

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事?”

 

 

與其按鈕標示“OK”,不如使用“Remove”,清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作,可以使用強烈的顏色來提醒。

 

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸,確保互動可靠性,按下按鈕應該是一個簡單的任務,如果使用者無法成功地輕點按鈕,或在操作過程中感到無所適從,這會帶來負面的體驗,並且浪費時間。

 

按鈕的大小反應著在屏幕上優先順序,愈是優先的重點便會是愈大的按鈕表示,或是使用更鮮明的對比色來凸顯,藉此增加使用者的注意力。而在操作 UI 使用者介面過程中,按鈕需考慮對使用者觸控的友好度,按鈕太小,往往導致會有輸入錯誤的情況發生。

 

 

 

 

 

麻省理工學院觸控實驗室的研究發現,指尖的平均值在 10-14 mm之間,指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

 

 

 

下篇請看此連結
 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


會say no的人工智慧?!美打造辯論談判高手AI!


憂鬱症掰掰,人工智慧快速判別及早治療!


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!