淘寶基于iOS14新特性的Widgets組件設計分享

今晚便是大家無比期盼的蘋果秋季發(fā)布會了,除了各種新硬件之外,大家最關心的應該還是iOS14正式版系統(tǒng)以及iPhone12的公布。

雖說不知道它倆是否會有延期,但想必大家都暢想在新的手機和系統(tǒng)下,淘寶能給大家?guī)硎裁春猛娴捏w驗和驚喜。

那么廢話不多說,現(xiàn)在我們就來一起了解下淘寶基于iOS14新特性的Widgets做了哪些腦洞與想法。


設計要素

一個用戶平均每天進入主屏幕的次數(shù)超過90次,但停留的總時長不過幾分鐘,從蘋果給出的官方數(shù)據(jù)發(fā)現(xiàn),一目了然的內(nèi)容才是用戶關心的唯一要素。

在一閃而過的快速切換應用的主屏幕里,設計交互復雜的應用界面并不能契合用戶的需要。


▲ 淘寶Widgets設計三原則


在widgets設計要求中,為了讓用戶的桌面具備更加一致性和統(tǒng)一的視覺觀感,我們依舊延續(xù)iOS自身的設計標準,同時秉承淘寶自身的設計基因來完成手淘widgets的設計準則。

▲ 淘寶Widgets風格要素


所見即所得的物流

回憶一下,之前我們?nèi)羰且樵兡硞€訂單的物流信息需要分幾步?直接告訴你答案,需要四步,而且是每次都要重復這四步過程,現(xiàn)在我們要做的便是簡化這一流程。


▲ 每次查詢訂單的操作深度


試想我們可以將某個比較關注的訂單物流信息自定義到前臺Widget透出,讓你時時掌握自己包裹的一舉一動,這種便捷又充滿上帝視角的形式是不是別有一番味道。


▲ 手淘Widgets之物流信息


強大的訂單管理

除了物流信息之外,訂單類管理在一定程度上是大部分人的強訴求,手淘人群有60%在我的淘寶中的目標便是訂單模塊。所以如何讓用戶可以快速發(fā)起功能喚起也是我們要考慮的能力之一。


▲ 手淘Widgets之訂單管理


看到大片的白色有人可能會產(chǎn)生疑問:這些Widgets能跟隨系統(tǒng)Dark模式嗎?當然,我們充分考慮到這點,將一些有必要的Widgets做了顏色適配,他將會跟隨你的手機色彩模式針對性變化。


▲ 追隨iOS系統(tǒng)級別的適配


便捷的互動權(quán)益提醒

如果你是淘寶人生、淘金幣、芭芭農(nóng)場等互動業(yè)務的重度用戶,那你日常一定會遇到過因為自己大意而錯過或忘記到各個頻道中完成諸如簽到和收獲果實等互動權(quán)益的時候。

現(xiàn)在便讓你之前的遺憾都化作泡沫,我們單獨為互動類用戶設置了一個可互動專區(qū),大家可以在這個Widget組件上時效性了解到自己互動權(quán)益的完成狀態(tài),真正做到信息傳達上的一目了然。


▲ 手淘互動頻道專區(qū)


覺得組件太大了?別擔心,我們同樣準備了3種不同尺寸方便大家可根據(jù)自己的屏幕擁擠狀況,自行選擇最合適你的那一個它。


▲ S、M、L 三種尺寸型號


更豐富的內(nèi)容展示形態(tài)

手淘內(nèi)容包羅萬象,這其中包含了商品、社區(qū)、直播、店鋪等各類產(chǎn)品,如此多的內(nèi)容代表的是背后各異的用戶群體和商業(yè)形態(tài)。

我們會在后續(xù)通過更多元的方法去兼顧內(nèi)容設計面對用戶的千人千面,將前臺展示的權(quán)利交給用戶。例如將關注的店鋪通過Widget展示在首屏,讓你時時關注店鋪上新。


▲ 店鋪的前臺透傳


將直播以媒體流的方式進行推送,讓你不再擔心會錯過關注的直播內(nèi)容,更或者是你愛豆的時裝秀哦~


▲ 直播&短視頻流樣式


One More Thing

iPad的淘寶用戶們理所當然的也能體驗到這些特性喲,這次可真的沒把你們這群人給忘記  


▲ iPad Widgets x Taobao


注:

1、以上設計稿為創(chuàng)意表達,淘寶設計部擁有最終解釋權(quán);

2、設計稿中所用素材僅用于創(chuàng)意演示,實際商品、店鋪信息以線上為準。

每天更新,
全站高品質(zhì)素材免費下載!