【UI魔鬼細節|Translucency】Apple都在用的半透明效果 提升UX甚至轉換率 附三大功用及半透Coding | 文章 – 滙豐機滙

一項新興的魔鬼細節 translucency(半透明),看似微不足道的視窗細節,卻能於令平台視覺上「好感度 UP」。且大部份平台都尚未應用這項設計概念,抓緊趨勢或能使平台美學上賺取 UX 分數,贏在起跑線。

設計  ·    ·  7 mins read

2020 UI 設計技巧 UI 介面設計工具

有沒有試過更新一些程式後覺得「介面好似睇落靚咗舒服咗,但又講唔出有咩分別」?這些可能是魔鬼細節的功勞,例如介面視窗巧妙應用了陰影,或打磨了視窗角落,這些細節不但能讓用家用起上來更舒心順暢,還讓你的平台即時「升呢」,甚至提高 CTA(Call-To-Action)conversion rate。一項新興的魔鬼細節 translucency(半透明),看似微不足道的視窗細節,卻能於令平台視覺上「好感度 UP」。且大部份平台都尚未應用這項設計概念,抓緊趨勢或能使平台美學上賺取 UX 分數,贏在起跑線。

由 Apple 帶起的 Translucency 美學手法

Translucency(半透明)是由 Apple 帶起的一種的介面美學手法,自 macOS Big Sur 及 iOS 14 開始全面應用在內置程式上。它指將半透明的視覺效果應用在平台或 APP 介面的細節上,例如 side bar、search bar、 背景等。下文將介紹 Apple 及少量坊間應用的 translucency 的例子,隨後探討它如何除了提升視覺舒適度,並影響整體 UX 表現。

Translucency 應用

A.   Apple 牽頭應用 translucency

  1. Translucency 應用於視窗及背景,使兩者混和:2020 UI 設計技巧 ui設計課程 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用
  2. Translucency 應用於同一個程式內,使程式內的背景與 side bar 混和:ui設計自學 2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程
  3. 因應用家設定,選 dark mode 的話會呈現黑色的 translucency 效果:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計自學  ui設計課程

  4. 選 light mode 的用家話會呈現白色的 translucency 效果:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程

Apple 於介面應用 translucency 的 big picture:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程

B.   坊間平台應用及模擬設計

  1. 網頁訊息 banner(模擬)2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程
  2. 平台 CTA(call-to-action)(模擬)2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程
  3. 平台按鈕 @Tumblr2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程
  4. APP 背景(模擬 + @Spotify)2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用  ui設計課程2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程
  5. 開户頁面(模擬)2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程
  6. Search bar@Google Assistant2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程
  7. Side bar(模擬)2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程


Translucency 三大功用,為 UX 跑分

  1. 避免重疊視窗帶來的混淆感2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

當需要在同一頁面顯示多個訊息,而視窗都呈現實色時,用家會須依賴沒被遮蓋的範圖辦認視窗,而且看上去沒那麼舒服:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

相反,運用 translucency 可以提示用家本來身處的頁面:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程▲頁面背景是 APP 頁面

2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程▲頁面背景轉到 Spotify

2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程▲右圖採用了半透明效果,地圖背景呈現半透明,用家可同時看到兩個頁面

商家應用:

想於同一頁面兼固多個訊息時,例如當用户啟動了 live chat,同時在背後轉換購買頁面,啟用 translucency 可提高清晰度,並提示用家當下身處什麼頁面。

以下是顯示了具不同透明度的 live chat 頁面:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

2.    讓 CTA(call-to-action)做好主角

不少平台想顯示一些重要的營銷訊息,例如 CTA 訊息,一般會有以下幾種做法:

1)將 CTA 直接蓋過背景畫面;
缺點:對於未熟悉平台的新訪客,背景畫面被遮攔或會丟了用家操作進度,很快就感到失焦的他們甚至會直接離開頁面。

2)將 CTA 有限度復蓋背景畫面;
     缺點: CTA 的大小受限於背景,訪客可能會直接錯過佔地太小的 CTA,CTA 便起不到作用。

3) 將 CTA 與背景直接融合。一些注重視覺或圖像的平台,例如時裝網購平台,會想突顯大圖,會直接將 CTA 放在圖側,讓其位置遷就大圖;
缺點:CTA 與背景混合,產生混亂感,而 CTA 大小又受制於大圖,起不了作用,例子:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

▲CTA 與背景直接融合,用家很大機會只留意到圖像


商家應用:

平台要彈出 CTA 訊息,同時想顯示訊息    或背景,又不想背景喧賓奪主,運用 translucency 便可以兩全其美。

2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程注意:對於一些訂閱類型/非購買類型的 CTA,其視窗呈現的形式很重要,如果用家當下的體驗不順暢,即使之後想再 “Subscribe”,也未必會回頭去尋找這選項,故必須兼固好細節位。

3.    將不想放大的訊息低調收藏:

有沒有一些是你的平台務必顯示,但又不是你想放大的訊息?運用 translucency 可以助你以較低調的方式,又在不影響平台觀感的前提下顯示訊息。

商家應用:

應用於一些法律條文、免責條款、或者各種不想讓它佔空間的內容。

例如,歐盟法律規定,如果用 cookie 追蹤用戶的使用習慣,網站必須取得使用者的同意,而網店或網頁平台都紛紛加上 cookies consent 的訊息。訊息必須放在當眼位置,但冗長的細字條文又跟網站風格格格不入,運用 translucency 就可以低調將這訊息「收藏在當眼位置」:

2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程▲將主訊息變成帶 translucency 的頁面,再將 cookies 訊息分成另一層放到最後。

簡易為平台設計 translucency

以下是一些程式(coding)的資源供設計參考:

  1. 利用 NSVisualEffectView

    用 Apple 開發的程式指令 “NSVisualEffectView ” 啟用 translucency:https://developer.apple.com/documentation/appkit/nsvisualeffectview

    其他類似的教學:https://lukakerr.github.io/swift/nswindow-styles2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

  2. 以 CSS 完成,附動畫靈活顯示效果

以 stylesheet 加入半透易效果,文附 translucency 動畫應用:https://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/

動畫生成:

if(slidingUp === true) {
//sliding the ControlCenter up

homeScreen.style.height = "20%"
controlCenter.style.top = "20%"
}

else {
//sliding the ControlCenter down
homeScreen.style.height = "100%"
controlCenter.style.top = "100%"
}

動畫成品:https://www.webdirections.org/demos/translucency/index.html

注意事項

1)  穿透的程度及混合的強度(level of translucency & blend mode)

無論用什麼方式應用 translucency 效果,或者應用在什麼細節,都必須注意穿透的程度及混合的強度,如果過份穿透或太弱穿透,或會使用家分不清主次視窗及分心2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

2) 應用 translucency 後的顏色效果

    穿透效果後的文字顏色是否跟背景兼容?例如穿透後的黑字會與黑色背景撞色:2020 UI 設計技巧 UI 介面設計工具 Apple 半透明 Translucency UI UI 設計哲學 ui 設計 技巧 UI 提升 CTA ui 半透明 ui 細節 技巧 translucency UI應用 ui設計課程

故此,一定要在設計途中調節 percentage field 甚至做 A/B test,調節出最能兼容平台的顏色及細節的方案。

上述可見,這種半透手法尚未被大量平台應用,一方面因為這項細節還是非常新,另一方面,調節好效果需要一定的精力,才可以調出適合你平台的設置,但這些因素都可以透過理解好概念,跟設計師好好溝通。謹記做好 UX 一定不可以忽略設計細節,因為離開平台的訪客不會告訴你在這些細節沒做好,你也要主動做 A/B test,讓結果告訴你哪些方案可行。最後,科技已跟生活一樣求舒適度,因為兩者已變得密不可分,你也從用户體驗着手,留住回頭客吧!

商場心理學
商場心理學