京東APP iOS14適配解鎖

如何針對 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 基礎框架

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

京東 Clips 框架圖

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

京東 Clips 三個場景圖

京東 Clips 手機版概念圖

Clips 姿勢一：到店掃碼

您一定遇到過在線下購物時想要對比線上是否有更優惠的同款，猶豫不決的情況，別擔心，「拍照購」Clips 專為您而生，來到線下門店，遇到心儀的商品，你可以直接拿起手機掃描商品二維碼，我們將為您在京東的千萬好貨中找到同款商品供您對比。

與此同時我們也提供了最為精簡的線上購物流程，避免更多的信息干擾，給您最舒適輕便的體驗。整條交易動線由 App 中的「商詳-結算-收銀臺-訂單」精簡為 Clips 中的「商詳 – 結算 – 訂單」三步完成，您也無需登錄和綁定支付方式，由蘋果系統自帶的 Apple ID 以及 Apple Pay 即可下單支付。

京東到店支付 Clips 概念圖