Material Design 引領的設計趨勢

無論是蘋果的設計語言,還是 Google 的設計語言,乃至於 Windows 的 Modern UI 和 Facebook 的 Paper 設計語言,大方向都是一致的,而在細節上卻分道揚鑣。蘋果與 Google 幾乎壟斷了移動裝置的作業系統,因此我們談談從新發布的 Material Design 中看看有哪些無線裝置的設計趨勢。
評論
評論

本文轉自阿里媽媽 MUX 〈Material Design 引領的設計趨勢 〉,Inside 獲授權轉載。

兩個月前,Google I/O 大會發表了 Android L,並推出 Material Design,重新統一了 Google 的設計語言,確立了未來 Google 的設計方向。那麼,什麼是 Material Design?我簡單地將它翻譯成「本質設計」。顧名思義,這是一種考慮事物本質的設計,將電子螢幕裡的 UI 元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此 Material Design 並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱 Google 新的設計語言為抽象化。

無論是蘋果的設計語言,還是 Google 的設計語言,乃至於 Windows 的 Modern UI 和 Facebook 的 Paper 設計語言,大方向都是一致的,而在細節上卻分道揚鑣。蘋果與 Google 幾乎壟斷了移動裝置的作業系統,因此我們談談從新發布的 Material Design 中看看有哪些無線裝置的設計趨勢。

1. 紙的形態模擬

前言已提到 Material Design 並不是一種去擬物的設計,也不是一種強調擬物的設計。我們知道電子螢幕是完全平面化的,不像現實當中的物體是 3D 的 。一本書裡每一頁紙之間的空間關係是很清楚的,但電子螢幕的所以物體都在一個平面上。雖然電子螢幕沒有空間感,但資訊內容是有空間層級的關係。而 Material Design 的解決方式就是把現實世界中紙張的特性挪到電子螢幕裡,把資訊內容呈現在這個虛擬的紙上,紙(資訊內容)跟紙之間有上下層級關係,用投影模擬紙張的空間感。Material Design 的投影並不是過去我們常用的使用圖片或者樣式程式實現的投影,而是系統根據紙張層級所在位置實時渲染的,投影會隨著紙張的空間關係而改變大小。

Google 幾年前推行的 Card 設計就是模擬紙張物理形態的一種設計方式,但 Material Design 把它提升到了系統資訊架構層面的高度。

另外,iOS 的模糊效果從本質上來說與 Material Design 的紙張設計要解決的問題是同樣的。通過模擬景深的效果來表達內容資訊的層級關係。

2. 轉場動畫

過去我們的頁面只有 X 與 Y 軸,打開一個新的頁面則是生硬地直接跳轉到新的頁面,並沒有點出頁面的空間層級關係。而 iOS7 與 Material 則強調 Z 軸,即頁面之間的空間層級關係。iOS 裡打開一個 app,頁面將從你點擊的 app 圖標為中心點擴散出來,同樣的設計在 Android L 上也隨處可見。通過轉場動畫告訴我們,這個頁面從哪裡來,到哪裡去,在整個 APP 或者係統裡的空間位置是什麼。

另外,不僅僅是頁面層級的動畫過渡,對像作業也伴隨著動畫過渡,從動畫裡能感受到作業的過程變化。例如刪除時,垃圾桶圖標會有一個傾倒的動畫,或者通過指示條的旋轉告訴你刪除的過程。另一方面,過渡動畫賦予了介面控件一種物理特性,在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是,在轉場動畫的設計上,Facebooke Paper 的非常突出。

3. ICON 動畫

互動動畫在一些 app 裡已經大行其道,特別是 Facebook Paper 的動畫讓人印象深刻。在以後,互動動畫將成為標配,隨之而來,更多設計師把目標轉移到 icon 上來。Icon 主要分為入口功能和作業功能,作業功能的 icon 在完成點擊作業之後,通常會轉為對應的另外一種形態。如「返回」與「菜單,」「選擇」與「未選擇」,「收藏」與「已收藏」「點贊」與「取消點贊」的狀態之間切換。現在的設計裡,icon 在兩種狀態之間的切換通常顯得生硬,icon 動畫將使得點擊之後的回饋更佳強烈,並且讓介面活起來,性感起來。

目前 HTML5 已經可以實現 icon 動畫的繪製,原理是設計師提供 svg 格式的圖標,有前端通過 html+css+js 繪製轉場效果。svg 格式的圖標,可以透過程式碼控制圖標的每一個節點,從而進行形狀變形。

阿里巴巴 MUX 團隊對外提供了 svg 格式圖標的免費下載:http://www.iconfont.cn/

4. 大面積色塊 action bar

Material Design 設計語言讓人眼前一亮的除了豐富的互動動畫外,還有大面積使用了鮮豔的色塊。過去的 Andr

oid 讓人覺得冰冷科技感,讓人有一種距離感。而新的設計採用了與過去相反的做法,在系統裡大面積使用色塊,用色塊來突出主要內容和標題,讓介面的主次感更佳突出,也讓原本灰黑色為主的介面擁有了時尚和活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色,整體擁有比較強烈的視覺衝擊,但並不會太刺眼。Action bar 也同樣從過去的灰黑顏色改為彩色,並且讓狀態欄與之融為一體,這點與 iOS7 的設計非常相似。

5.FAB 按鈕(Fixed Action Button)

在 Google 的宣傳片裡,最引人注目的新玩意,就是這個淘氣的圓形小按鈕了。從宣傳片裡來看,這個按鈕的功能並不局限於「新建」「播放」「收藏」「更多」等功能。它於整體介面的配色形成比較大的反差,因此會讓這個按鈕在介面裡顯得非常耀眼,從這樣的設計來看,這個按鈕所背負的任務將會是整個介面的主要作業。雖然有點類似與 Path 裡的「+」按鈕,但由於 iOS 系統本身並沒有這樣的設計,這將會成為最區別於 iOS 的一種互動設計,對互動設計師和產品經理來說都可能會成為一種挑戰。

6. 無邊框按鈕

在 iOS7 的設計裡,我們已經看到了這樣的影子。最典型的便是「返回」按鈕只有箭頭和文案,去掉了原本的按鈕質感。Material Design 的 action bar 也同樣採用了這樣的設計,直接用 icon 來表達按鈕功能。尤其是 Material 的鍵盤設計風格,最早對鍵盤風格進行極簡設計的是微軟的 Windows Phone,Android 和 iOS 相繼跟進。而這次 Material 走得更極端,把鍵盤的按鈕邊框全部去掉,只保留了英文字母的按鈕。我們不能說這樣的設計一定是好的,這樣的設計可能讓使用者對點擊的精準度無法更快地判斷,缺乏安全感。好處是在螢幕不大的手機上,去掉邊框的擁擠感會給字母更大的空間。

另外,無邊框按鈕的設計也體現在提示框的按鈕上。

如何讓無邊框的按鈕區別於內容文字,這需要設計師除了考慮配色外,還需要考慮按鈕出現的場景,對設計師的在應用場景的解讀上也是一個挑戰。

7. 聚焦大圖

一張與螢幕等寬,豎方向佔據半個螢幕左右的大圖,去掉 action bar,只保留返回按鈕的設計,在一兩年前十分流行的 summly app 上就已經非常紅了。後續也有一些 app 跟進這樣的設計(例如淘寶),但並沒有大範圍流行起來。Material Design 很大膽地使用了這樣的設計。在 Google 的引導下,這樣的設計風格將很有可能風靡起來。


當個人化服務浪潮襲來 品牌如何以數位CRM打造會員生態圈 優化後疫情時代商業模式

隨著數位時代演變,個人化服務漸受各方企業重視,本文以數位CRM系統所衍生之各項服務為例,說明PChome如何將「MarTech」運用在個人化服務中,以及其所扮演的各種關鍵性角色。
評論
photo credit:shutterstock
評論

隨著iOS14的社群隱私權政策改變,以往透過數位廣告帶來的流量紅利已隨之消退,追蹤用戶使用習慣與興趣所帶來的轉換率更是逐漸降低,加上疫情影響,線上消費數量暴增,消費者比以往更重視個人化服務,因此「再」數位化浪潮襲來,「MarTech」(科技行銷)儼然已成為品牌數位轉型的重要工具,如何利用數位CRM(Customer Relationship Management)系統洞察消費者需求、立定行銷策略正是品牌所要面臨的一大挑戰。

以人為出發點:CRM成為科技化行銷的主要策略

過去大眾傳播式的集體宣傳在現在市場中已經逐漸無法滿足消費者需求,消費者越來越注重個人化的體驗。個人化體驗首先要獲得個人化的喜好,因此眾多品牌開始利用數位廣告、商務對話的方式獲取用戶的購物慾望清單,以及點數經濟刺激舊客回購,透過追蹤會員在網站上瀏覽、產生購買行為的行動軌跡,再搭配大數據分析,針對不同族群設計推播內容再加以溝通,以此提升服務品質並深度經營顧客關係。而數位CRM系統則扮演著科技化行銷的主要策略,不僅能協助整合會員數據,更善加運用客戶標籤,傳遞精準的資訊,與消費者互動,提升「獲客」與「活客」的能力,建立忠誠度立足數位市場。

建立會員分級制度 打造精準個人化服務

數位CRM是打造顧客回流最佳的工具,不過要讓用戶長期買單,客製化的溝通模式與打造會員分級制度才能有效提升用戶黏著度。例如誠品以書店起家,目前也朝向複合式商場邁進,旗下事業版圖橫跨書店、文具店、電影院、旅館,甚至連生鮮超商、酒窖都有經營,也開始新增許多小規模的社區店;在電商方面,除了自有的誠品線上網站,也在其他電商開設主題館增加接觸點。誠品正在打造自己的生態圈,並努力運用數位足跡進行CRM策略應用,如將會員分卡分級,並給予高等級的會員不一樣的特級制度,但同時也為有特定偏好的會員設立不同的制度,像是針對購書會員推出「讀書人徽章」分級制度,有藝文活動也會優先讓高等級的讀書人先報名。

而PChome旗下的時尚選貨電商MiTCH攜手GoSky建立會員點數系統,利用Messenger Chatbot的功能打造數位會員卡,以簽到集點、兑禮、限時任務等誘因與用戶深度互動,創造每日簽到率81%的佳績。透過這樣的忠誠度計畫,企業更能區別用戶的使用頻率與黏著度,進而建立會員分級制度並精準溝通資訊。另外零售品牌全聯也攜手Appier運用AI技術整合線上線下的會員資料,並利用貼標技術辨別消費者輪廓,分析出會員曾搜尋、瀏覽的軌跡來量身打造客製化的專屬推薦商品。

photo credit:gosky官網
MiTCH攜手GoSky建立會員點數系統,利用Messenger Chatbot的功能打造數位會員卡深化會員互動。

消費型態轉變 透過生態圈落實CRM掌握會員輪廓

生態圈和全通路是許多零售商和電商目前都在深度經營的策略,為的都是收集更多的數據創造更個人化的體驗。例如誠品的會員制度不只是針對所有會員,還因應會員的消費習慣推出不同的方式和獎勵,讓消費者感到差異化,進而提升品牌黏著度。

電商品牌PChome 24h購物過去利用到貨服務以及不囉唆的退貨機制,作為培養客戶忠誠度的關鍵。他們也藉由完整化金流系統,建立了自己的P幣生態圈,透過完整的通路和支付系統了解消費者的消費習慣,現在藉由數位CRM操作觀察到,對比2019-2020年到今年台灣疫情爆發後,全站消費活躍用戶從本來的25-54歲年齡層,擴增到18-24歲以及65歲以上,另外是熟齡女性用戶比起2019上半年有20%以上的成長,顯示出受疫情影響,整體消費型態的改變更是橫跨各世代族群。

懂得根據數據策略布局才是關鍵心法

針對消費需求的變化,PChome 24h購物進一步將四大主題會場結合時事及需求規劃選品,不論是居家上班上課所需的3C產品、或是照顧到想要培養居家儀式感之族群的電玩、書店、健身等品項,還有提前佈局宅家防疫被悶壞的心,規劃一系列夏季穿搭、防曬彩妝、露營用品等夏季出遊必備產品。

運用數位CRM進行策略行銷,有利於品牌活絡舊客以及帶動業績成長,如PChome 24h購物在22周年慶「狂樂收貨節」利用大數據撈出會員最感興趣的人氣品牌及集品類,進行每日換檔,抑或是看準低接觸外送商機,與foodpanda攜手推出在APP、網站購物消費滿$1即可獲得foodpanda新客5折券,串聯兩大平台資源,建立更大的用戶資料庫,為後疫時代帶來嶄新的商業模式。

photo credit:PCHome
PChome 24h購物22周年生日慶「狂樂收貨節」,看準疫後需求調整四大主題會場。

除了推品策略,CRM也能有新玩法,PChome 24h購物22周年慶還推出「拉長音折扣賽」,串聯自有平台資源並結合IG濾鏡功能,在社群上與粉絲大玩挑戰任務,完成任務後透過IG Chatbot的行銷技術發送相對應的優惠折扣,而這樣透過開發互動濾鏡的遊戲方式不僅優化用戶的社群體驗,更透過CRM系統將用戶分級,依據達成任務的級距發送獎勵,成功觸動年輕族群,導入站內達成轉換。

photo credit:PCHome
PChome 24h購物推出「拉長音折扣賽」,用IG濾鏡發起社群挑戰,吸引粉絲兌換折扣。

Martech是許多企業、品牌在面對數位轉型時重要的行銷利器,其中CRM系統更是品牌與時俱進、端出更好的消費者服務所倚賴的重要工具,打造會員生態圈不僅能夠檢視會員服務的優劣並加以優化,建立會員忠誠度、使顧客不斷回購,更替平台帶入新契機的一大機會點。

本文章內容由「爆米花數位資訊」提供,經關鍵評論網媒體集團廣編企劃編審。