跳過導覽
An image of an iPhone and an iPad on a grey background, each with the LookUp app on the screen
#用Sketch製作

說我們的語言:Vidit Bhargava 如何在 Sketch 中設計 LookUp

我們與這位獲獎設計師暢談他熱門的字典 app、他的創作過程,以及為什麼 Sketch 是他的首選工具

提供您所需的工具來創造出色的作品,是我們每天努力讓 Sketch 變得更好的動力。當我們看到您使用 Sketch 創造出的作品時,它會激勵我們做得更好。我們的目標之一是突顯優秀的設計,因此本週我們與 Vidit Bhargava LookUp 的設計師和開發者,他曾於 2015 年登上 Apple 的「20 位 20 歲以下」開發者名單)進行了訪談。

LookUp 是一款適用於 iOS、Mac 和 Apple Watch 的獲獎字典 app,它鼓勵您每天學習一個新單字。它使用精美插圖卡片來幫助解釋單字含義,而 Vidit 在 Sketch 中設計了從 UI 到每張卡片的所有內容。


可以跟我們談談您是如何開始 app 設計的嗎?以及您是什麼時候開始使用 Sketch 的?

我從高中時就開始設計。我設計並維護了一份電子雜誌,讓學生們可以隨時掌握科技新聞和一些小知識,我也參加了幾場校際網頁設計比賽。我非常享受組織內容、創作精美圖形以及製作易於瀏覽網頁背後的創作過程。

我也是 Apple 的長期粉絲,所以當 iPhone 首次推出時,我非常興奮。它的設計具備了我喜歡 Apple 產品的一切:簡潔、美觀且易於使用。我立刻就成為了這款裝置及其 app 的粉絲。

當 iPhone SDK 推出時,我對能夠構建產品並將其發佈給全球數千人的想法感到非常鼓舞。我對網頁設計的熱情迅速轉移到了 app 設計上。

在 LookUp 發佈前幾週,我透過 Twitter 認識了 Sketch。從那之後,我再也沒用過其他工具來設計介面。

我一開始在 Xcode 的 Interface Builder 中嘗試建立不同的佈局,但我逐漸開始使用其他設計工具來更快地迭代我的設計,並更注重細節。我會花好幾個小時精心設計我想實現的 app 的不同螢幕畫面。當時我不會寫程式,但我哥哥是電腦科學專業的學生,所以我經常透過為他的大學專案製作模型和素材來幫助他。

當時,我用於 UI 設計的首選工具是 Photoshop,雖然 Photoshop 在很多方面都很出色,但它並不是專為 UI 設計而生的。我開始覺得需要更專門的工具,然後在 LookUp 發佈前幾週,我透過 Twitter 認識了 Sketch。從那之後,我再也沒用過其他工具來設計介面。

誰(或什麼)是您最大的設計靈感來源?

iPhone 和設計 iPhone UI 的設計師們一直是我最大的靈感來源。簡約的設計讓任何人都能輕鬆上手使用這些設備。iPhone 的「滑動解鎖」介面非常直觀,就連我兩歲的姪子都會用。作為一名設計師,這就是我追求的易用性水平。

Imran Chaudhri 是設計「滑動解鎖」以及 iPhone 和 Mac 上數百個其他介面的設計師,他的作品也深深地啟發了我。我仍然驚嘆於這些介面是如何被創造出來的。還有 Mark Kawano,他的應用程式(現已停止服務)Storehouse 在我剛開始設計應用程式時問世,其介面的流暢性和應用程式的簡潔性都非常鼓舞人心。

Three iPhones, each one showing LookUp in a different way, including home screen widgets.

Vidit 一直努力讓他的應用程式介面盡可能簡潔,並盡可能接近蘋果公司的高標準。他的最新版本為 iPhone 和 iPad 添加了小工具功能。

目前,我非常喜歡使用 Moleskine 應用程式。它們由 Bonobo Labs 設計,設計非常出色。聲音設計、觸覺回饋和互動效果都非常出色——他們創造了真正現代化的 iOS 應用程式體驗。

你是如何開始設計 LookUp 的?你是否想過它會像現在這樣受歡迎和成功?

2012 年,我和哥哥共用一台 8GB 的 iPod Touch。當時我正在讀高中三年級,正在準備期末考。學習時,我經常使用字典來學習和理解各種詞彙的含義,但當時的字典應用程式佔用了超過 200MB 的儲存空間,而且充斥著許多我不需要的功能。然後我會選擇使用 Google,因為我經常想查看圖片以更好地理解詞彙。

在 iPod 上查單字的體驗與使用 iPod 的體驗背道而馳。我想要一款像 iPod 和 iOS 本身一樣好用且令人愉悅的字典應用程式。我希望所有功能都集中在一個搜尋欄位中,沒有太多花俏的功能。於是,LookUp 的想法誕生了。

過去幾年,LookUp 的成功確實超出了我的預期,這是一個不斷迭代的過程,我們在過程中學到了很多東西。如果你告訴 18 歲的我,幾年後我會全職從事這項工作,我一定會覺得很好笑!

是什麼讓你多年來一直使用 Sketch?

Sketch 和它的用戶一樣注重細節和設計。它是原生應用程式,速度快,並且持續改進。而且它與平台上的其他應用程式相得益彰。我認為這是生產力應用程式中一個被嚴重低估的優點。

幾年前,當我重新設計應用程式時,Sketch 在創造一致的體驗方面發揮了重要作用。我依靠符號、圖層樣式和文字樣式來實現這一點。重複使用元件也意味著更快的迭代。我得以建立一個系統,至今我仍在使用它來幫助我快速設計 LookUp。

你在設計應用程式時,設計的重要性如何?Sketch 如何幫助你設計出令你滿意的產品?

從一開始,設計就是 LookUp 的核心重點。我們的想法是創造一款能夠滿足用戶需求的應用程式,並以清晰、簡潔的介面提供他們想要的東西。多年來,這款應用程式一直秉持著這一理念。

每次為應用程式添加新的主要功能時,我仍然會從新用戶的角度來審視應用程式。應用程式的功能是否過於繁雜?首次啟動時是否需要過多的說明?用戶是否可以輕鬆上手,而不會被螢幕上的所有內容淹沒?

An iPhone and an iPad showing the same Lookup screen, to show the scaleable UI.

許多設計靈感直接來自於 Apple——這也就不難理解為何這款 app 多次登上 App Store 精選,並贏得無數獎項。

app 的每個新功能都經過精心設計和原型製作。設計過程涉及大量的迭代、裝置預覽、編寫功能的可用版本以及收集反饋,以便對設計和功能進行進一步的修改。

多年來,Sketch 在幫助我設計 app 方面扮演著重要的角色。在啟動 Xcode 並開始編程之前,我可以輕鬆快速地繪製介面並進行迭代。

幾年前,當我重新設計應用程式時,Sketch 在創造一致的體驗方面發揮了重要作用。我依靠符號、圖層樣式和文字樣式來實現這一點。重複使用元件也意味著更快的迭代。我得以建立一個系統,至今我仍在使用它來幫助我快速設計 LookUp。

每次為 app 添加新的主要功能時,我仍然會退一步,從新使用者的角度審視 app。app 的功能是否過於繁雜?首次啟動時需要解釋的內容是否過多?

多年來,我還設置了 Sketch 外掛,以便匯入更逼真的虛擬數據,這些數據可以緊密模擬 app 的功能,而不僅僅是使用佔位符文本。

Sketch 對我幫助巨大的另一個關鍵領域是 LookUp 的「每日一詞」圖片。Sketch 對於此類插圖來說是一個不尋常的工具,但我可以使用 Sketch 快速構建向量圖形,並且可以重複使用形狀和物件,這使得它成為為 LookUp 創建「每日一詞」圖片的完美工具。

您剛才提到了外掛,請問您在工作流程中最常使用哪些外掛?

我目前最喜歡的外掛包括 precious design studio 開發的 Data Populator 外掛,以及 RotatoVectory 外掛,它們可以快速生成 3D 圖形並在短片中展示設計。

Data Populator 外掛是一種使用真實數據快速填充模型的絕佳方式。它可以鏈接到 JSON 檔案,並且只需稍作修改,您的模型就可以使用真實數據,而不是隨機圖片和「lorem ipsum」。

您覺得將 iOS app 適配到其他裝置的過程如何?

LookUp 最初是一款 iPhone app,專為當時 iPhone 提供的單一螢幕尺寸而設計。多年來,隨著螢幕尺寸的增加,以及 iPad 等裝置開始採用多視窗和分割螢幕介面,將 app 視為更流暢、更具適應性的介面,而不是不同尺寸的靜態螢幕,變得至關重要。

但佈局只是故事的一部分。每個平台都有其微妙的差異,在為該平台設計介面時需要考慮這些差異。

Four screenshots of LookUp, each from a different device, to show the differences between the Watch, iPhone, iPad and Mac versions.

Vidit 知道每個版本的 app 都需要有自己的考量——因為使用者與其裝置的互動方式各不相同。

在 iPad 上,app 採用多欄佈局,而不是較小裝置上的單欄佈局。但它也超越了這一點,創建了一個真正適合 iPad 的介面。

例如,在 iPhone 上,LookUp 使用 sheet 風格的彈出視窗來將單字添加到集合中。然而,在 iPad 上,該彈出視窗被改為 popover。這樣一來,互動同樣快速,而且使用者無需面對一個大型的 sheet 來採取行動。

在為 Mac 設計時,面臨的挑戰則有所不同。這是一個從觸控螢幕裝置到點選裝置的典範轉移。雖然 app 的核心功能相同,但每個元素都經過重新設計——同時牢記人們將使用觸控板或滑鼠。

舉例來說,iOS app 仰賴點擊、漸進式揭露和不同螢幕之間的導航。在 Mac 上,採用分割螢幕的平面導航速度更快,可以避免每次點擊時螢幕發生巨大變化。

人們對於 Mac app 的期望也有很強的心理模型。因此,擁有一個外觀和運作方式都像 Mac app,而不是移植到 Mac 的 iOS app 也非常重要。

Three Apple Watches, showing the different interactions you can have with LookUp on your wrist.

手錶版本的 app 專為快速互動而設計,盡可能減少干擾。

在 Apple Watch 上,LookUp 的優先事項完全不同。它們都與易讀性和超快速互動有關。沒有人喜歡將手腕抬起來超過幾秒鐘,更不用說在這麼小的螢幕上執行複雜的互動,所以我將 LookUp 設計成一個可以在無干擾環境中快速使用的 app。

您會給想要投入 app 開發和設計的年輕開發者什麼建議?

開始進行 app 開發時,很容易因為一開始的失敗或無法在第一次發佈時達到預期而感到沮喪。但我發現,app 的初始反應只是漫長旅程中的一小部分。不斷迭代、努力變得更好並保持好奇心,才是讓過程充滿樂趣和成就感的原因。


這是我們 #MadeWithSketch 系列的最新作品。如果您有使用 Sketch 製作的專案並想與我們分享,請在我們的社群頻道上告訴我們。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 的新手,還是回來看看有什麼新功能,我們都能讓您在幾分鐘內設置好並準備好開始創作。

免費開始使用
免費開始使用