如何針對 iOS14 的「 Widgets Clips 」進行設計策略、場景的拆解?且看我們為大家解鎖一系列的新姿勢~
01 前言
隨著今年 iOS14 升級的「萬眾矚目」,作為一枚奈撕的設雞濕,任何前沿設計(不是為了完成 KPI?)都會成為我們關注的焦點,經過徹夜的「奮筆疾書」,我們在第一時間為大家帶來了 iOS14 核心功能 Widgets 和 Clips 的優先預熱~
我們先了解一下什么是 Widgets?
iOS14 的 Widgets (桌面小組件) 屬于本次系統升級的重要功能之一,它賦予了 APP 全新的視覺表現、更加豐富的交互形式;此前,iOS 小組件只支持在負一屏展示,現在經過重設計后,用戶可以根據自己的喜好將不同尺寸的桌面小組件放在手機屏幕上,同時,為了避免各種小組件占據屏幕的空間過多,蘋果提出部件堆棧的設計,即可以將多個小組件疊加在同一位置,通過上下滑動來進行切換。

圖片來自蘋果官網

GIF 來自蘋果官網
為了確保 Widgets 能夠滿足不同的場景訴求,蘋果給予了大、中、小三種不同的尺寸,在設計的層面上讓設計師擁有更多發揮的空間,在使用層面上用戶也可以進行更多豐富的選擇。

Widgets 尺寸詳解圖
我們再了解一下什么是 Clips?
Clips 的存在類似于小程序,它為用戶提供一個切入點,以最小的阻力來體驗 App,當用戶需要快速執行 App 任務的時候,Clips 會將深層的鏈接無縫對接顯示給用戶。您可以想象一下,當你面前有一個杯子,我們通過 NFC、二維碼等方式觸發標簽,此時,在您的手機底部將會彈出 Clips,您只需點擊「Open」,您將會進入杯子的訂購頁面,快速了解商品的信息,幫助你及時下單。

圖片來自蘋果官網

圖片來自蘋果官網
下邊就來一睹為快,看看我們針對京東 APP 的 iOS14 適配做了哪些設計研究吧。
02 全新的 Widgets?
Widgets 的特性
在設計之前,我們先拆解一下對 Widgets 的理解和定義。在目前信息爆炸的互聯網時代,人們對于信息獲取的效率越來越看重,而 Widgets 的誕生(作為一種桌面載體,有效的展示信息),本質上更好的幫助用戶聚焦核心內容。以此為基礎,我們對 Widgets 特性提煉出三個關鍵詞:「簡潔、高效、內容化」。
- 簡潔:界面清晰,信息少量,規范限制。
- 高效:幫助用戶更快捷的啟動 App 功能,幫助用戶進入期望的頁面。
- 內容化:明確 Widgets 的核心目標,將場景聚焦在一個點上,呈現即時的、和用戶高度相關的信息。
如何設計 Widgets?在對 Widgets 特性有了基本的了解后,我們需要開始設計屬于自己的 Widgets。我們通過官方指導的建議,對 Widgets 進行「構思+創建」,總結出三大設計原則「個性、信息、情景」。

京東 Widgets 設計原則圖
我們稍微來了解下這幾個設計原則:
- 個性:個性有兩層含義,一層是「個人化」,另一層才是「個性化」,要設計一個出色的 Widgets 時,我們最終的本質還是需要回歸到「人」,我們需要讓 Widgets 本身能夠對個人帶來優秀的體驗、建立與人的情感連接;在設計個性化的部分我們可以從兩個方面汲取靈感,一個是結合 App Icon,另一個可能從當前 Widgets 主場景的落地頁去做匹配。
- 信息:設計信息的時候,讓 Widgets 的布局看起來更有跡可循,小尺寸和中、大尺寸的信息布局是可以相應承接的,同時同一尺寸的 Widgets 也可以設計成兩種不同樣式。例如,一種聚焦在單一信息展示上,一種聚焦在多種信息對比上。
- 情景:情景是 Widgets 最核心的部分,在設計時,我們需要問問自己「用戶在使用 Widgets 時,需要尋找什么樣的內容?」,所以,我們需要提供給用戶的是具有 App 強屬性點的場景,最好能夠結合適當的時機,在用戶最需要的時候給他展示,合理的預測和推斷用戶的每一步需求。在設計原則基礎上,我們結合業務指標和用戶場景,篩選出京東 Widgets 的四個方向。
京東 Widgets 四個場景圖
我們嘗試不同框架對內容的承載形式,探索、研究 Widgets 布局的差異性優勢。

京東 Widgets 線稿
先來看一看蘋果 Widgets 的設計演示~

蘋果 Widgets 展示(GIF)
Widgets 姿勢一:訂單物流及時知曉
為了讓京東用戶對訂單物流能夠實時跟蹤,我們特意精心準備了姿勢——「物流小組件」,你可以想象,當你購買商品以后,你就可以在手機桌面上及時查看訂單物流的通知,跟進訂單物流進度,這大大的提升了用戶獲取信息的效率。

京東訂單物流 Widgets 概念圖

京東訂單物流 Widgets 手機版概念圖
Widgets 姿勢二:店鋪上新隨時關注
我們在研究店鋪場景的時候,發現了 Widgets 對店鋪私域的引流可以非常高效,我們以店鋪上新這個概念為主,在桌面上去推出店鋪的新品,然后配合 Widgets 編輯功能會達到意想不到的效果。您可以試想一下,我們在桌面上添加多個店鋪 Widgets,編輯這些 Widgets,更改為您關注的不同店鋪,通過堆棧的方式將他們放在一起,此時上下滑動,我們就可以在隨時隨地的關注到不同店鋪的新品。
京東店鋪 Widgets 概念圖
京東店鋪 Widgets 概念圖(含編輯狀態)
Widgets 姿勢三:秒殺/京東/紅包拿不停
設計「物流訂單、店鋪」小組件時,在布局上我們采用了「地圖為主體的樣式」、「 iOS 的風格」進行了匹配;在設計秒殺 Widgets 時,我們從京東首頁汲取靈感,對它的框架賦予了一個全新的定義,即:「迷你版首頁」;我們期望用戶通過查看、使用小組件,就可以達到:聚焦首頁內核心信息獲取的目的。
京東秒殺 Widgets 框架圖
「秒殺小組件」承載了營銷矩陣的業務背景,我們通過小組件實時提供每天每場的秒殺商品,例如:你每次打開手機的時候,都可以看見京東 App 小組件展示最新場的商品秒殺,幫你命中更多便宜的商品。與此同時,我們還會不定時的下發紅包,配合京豆簽到的形式,讓用戶享受到更多的優惠和便利。
京東秒殺 Widgets 概念圖
京東秒殺 Widgets 手機版概念圖
Widgets 姿勢四:熱門直播隨心逛
對觀看直播感興趣的用戶,可以嘗試添加「直播小組件」在桌面上,直播小組件不僅會為您推薦熱門的、和您感興趣的直播,同時還會對您預告明星的直播,協助粉絲持續追星。桌面還支持「直播畫中畫」,假設用戶在觀看直播時需要切出應用進行其他操作,此時不會打斷您的觀看直播的體驗,使用畫中畫功能,使直播變成小窗,暢享連續性的直播觀感。
京東直播 Widgets 概念圖
03 即用即走的 Clips
京東 Clips 設計策略
開始設計之前,我們再來重溫一下 Clips 的定位,顧名思義 Clips 是一個從完整應用中分離出來的片段,從各種曝光的視頻和官網的介紹來看,Clips 更像一個迷你版的 App,它不需要安裝,掃碼即可體驗完整流程。因此他的特性即為「輕量化」、「原生化」、「即時使用的場景化」。
在蘋果官方給出的設計原則中,指出在設計 Clips 時需要明確以下幾點:
- 1.明確Clips聚焦的具體場景;
- 2.精簡 Clips 的流程,只提供用戶完成任務所必須的步驟。同時在設計京東的 Clips 時,除了上述幾點,還需要考慮到如何去傳達京東的品牌調性,強化用戶對于京東的認知。綜上所述,京東 Clips 的設計策略,在于「強化品牌、高效輕便、場景化」。

京東 Clips 基礎框架
根據官方給出的明確的設計框架,Clips 卡片可以分為三部分,頭部為內容自定義區域,緊接著是導航自定義區域,由主副標題和按鈕組成,最下方是開發者信息區域,包含開發者信息以及去 App Store 下載的引導。

京東 Clips 框架圖
明確了設計策略和框架后,那什么樣的 Clips 場景更適合京東 App 去做呢,首先需要結合京東本身的優勢與特點,其次需要相對完整的流程,因此我們分別提煉出三個場景,「到店掃碼」、「快遞寄件」、「領券助手」,以此來滿足不同用戶不同場景的需求。

京東 Clips 三個場景圖
京東 Clips 手機版概念圖
您一定遇到過在線下購物時想要對比線上是否有更優惠的同款,猶豫不決的情況,別擔心,「拍照購」Clips 專為您而生,來到線下門店,遇到心儀的商品,你可以直接拿起手機掃描商品二維碼,我們將為您在京東的千萬好貨中找到同款商品供您對比。
與此同時我們也提供了最為精簡的線上購物流程,避免更多的信息干擾,給您最舒適輕便的體驗。整條交易動線由 App 中的「商詳-結算-收銀臺-訂單」精簡為 Clips 中的「商詳 – 結算 – 訂單」三步完成,您也無需登錄和綁定支付方式,由蘋果系統自帶的 Apple ID 以及 Apple Pay 即可下單支付。
京東到店支付 Clips 概念圖
Clips 姿勢二:快遞寄件
線下寄件步驟太多太繁瑣?我們特別推出了「快遞寄件」Clips,無需更多繁瑣的步驟,當您來到寄件點時,只需拿起手機輕輕一掃,即可快速完成整套寄件流程。回到家中也可以隨時拿起手機喚起 Clips 查看寄件進度。即用即走的感覺就是這么暢快和輕松。
Clips 姿勢三:
領券助手想要薅羊毛又怕玩法太復雜?只能看著別人低價撿便宜?別擔心,「領券助手」讓您不再錯過每一次的福利,現在只需要通過微信、短信、鏈接轉發,打開 Clips 即可輕松領取神券,更能支持在 Clips 中直接挑選可用神券的商品進行下單購買。送福利,我們是認真的。

京東領券助手 Clips 概念圖
什么?您已經迫不及待了?別著急哦,iOS14 適配目前正處在設計研究階段,伴隨 iOS14 的正式公布,我們正在努力讓京東 Clips 與您會面~
04 總結
經過上文的詳細介紹,相信大家對我們的設計預研有了一定的了解,針對 Widgets 和 Clips 的特性,我們甄選了適合的場景和設計策略,為大家帶來了一系列的新姿勢,目前適配工作還在規劃中,后續我們也會持續跟進進展,相信在不遠的某一天,京東 App 就會帶著這些實用的新功能與大家見面。
最后,感謝為 iOS14 適配付出貢獻的產研團隊:「黃金流程產品組、平臺業務研發部、移動產品設計部」。
注:1、以上文章中的設計稿均為概念稿,僅代表設計研究,實際落地效果以上線后的為準。
2、文章部分素材借鑒來自蘋果官網。
原文地址:京東設計中心JDC(公眾號)
作者:雷曉鳴、王辛強
轉載請注明:學UI網 » 京東APP iOS14適配解鎖