淘寶基于iOS14新特性的Widgets組件設(shè)計(jì)分享

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

雖說(shuō)不知道它倆是否會(huì)有延期,但想必大家都暢想在新的手機(jī)和系統(tǒng)下,淘寶能給大家?guī)?lái)什么好玩的體驗(yàn)和驚喜。

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


設(shè)計(jì)要素

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

在一閃而過(guò)的快速切換應(yīng)用的主屏幕里,設(shè)計(jì)交互復(fù)雜的應(yīng)用界面并不能契合用戶的需要。


▲ 淘寶Widgets設(shè)計(jì)三原則


在widgets設(shè)計(jì)要求中,為了讓用戶的桌面具備更加一致性和統(tǒng)一的視覺(jué)觀感,我們依舊延續(xù)iOS自身的設(shè)計(jì)標(biāo)準(zhǔn),同時(shí)秉承淘寶自身的設(shè)計(jì)基因來(lái)完成手淘widgets的設(shè)計(jì)準(zhǔn)則。

▲ 淘寶Widgets風(fēng)格要素


所見(jiàn)即所得的物流

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


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


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


▲ 手淘Widgets之物流信息


強(qiáng)大的訂單管理

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


▲ 手淘Widgets之訂單管理


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


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


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

如果你是淘寶人生、淘金幣、芭芭農(nóng)場(chǎng)等互動(dòng)業(yè)務(wù)的重度用戶,那你日常一定會(huì)遇到過(guò)因?yàn)樽约捍笠舛e(cuò)過(guò)或忘記到各個(gè)頻道中完成諸如簽到和收獲果實(shí)等互動(dòng)權(quán)益的時(shí)候。

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


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


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


▲ S、M、L 三種尺寸型號(hào)


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

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

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


▲ 店鋪的前臺(tái)透?jìng)?/span>


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


▲ 直播&短視頻流樣式


One More Thing

iPad的淘寶用戶們理所當(dāng)然的也能體驗(yàn)到這些特性喲,這次可真的沒(méi)把你們這群人給忘記  


▲ iPad Widgets x Taobao


注:

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

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

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