天天看點

Apple Watch人機互動指南--UI設計基礎(二)

動畫、品牌化

動畫

漂亮精細的動畫遍布Apple Watch的每個角落,為使用者打造了迷人的動态的體驗。恰當的動畫應當:

· 傳達狀态并提供回報。

· 幫使用者形象化操作的結果

使用一系列靜态圖檔建立預渲染動畫。在您的app包中儲存錄制好的動畫(罐裝動畫),這樣可以快速展示給使用者。錄制好的動畫也可以讓您傳遞高幀頻流暢的動畫。

從WatchKit擴充中動态地建立動畫,并将其轉移到Apple Watch,在回放之前添加一個延遲就可以開始了。

僅圖檔和分組對象(group objects)可使用回放控件。大部分界面對象以無限循環方式展示動态圖像序列。要終止動畫或從動畫中回放一組特定的幀,你必須使用圖檔或者分組對象。

----------------------------------------------------------------------------------------------------------------

品牌化

成功的品牌化所涉及的内容遠不止在應用程式中添加品牌資産。最好的應用程式将現有資産和獨一無二的外觀和感覺集合在一起為使用者提供了一個令人愉悅的難忘的體驗。

有多種方式品牌化你的app,包括icon、用色、自定義按鈕、自定義字型以及所使用的文本等。在您設計app的圖形元素時,要記得每個自定義元素都要看起來很好,其本身的功能也一樣,但看起來也應當和app中的其他元素存在關系。

以優雅不唐突的方式并用品牌的資産。使用者使用您的應用程式來完成任務或者進行娛樂活動,但他們不想被強迫觀看一則廣告。為了獲得最佳的使用者體驗,您可能需要通過色彩、選擇的字型或者意像來悄悄地提醒使用者對品牌的辨識度。

抵制在應用程式或Glance中展示logo的誘惑。Apple Watch上的空間非常寶貴,每次展示logo都會占用内容的空間,并且在應用程式中展示logo的目的不同于在網頁中展示logo:很多時候,使用者會進入某個不知道"主人"的網頁,但使用者在打開應用程式之前通常會檢視app icon。

标簽、圖像、Groups

标簽

标簽展示靜态文本

Apple Watch人機互動指南--UI設計基礎(二)

标簽:

· 展示任何數量的靜态文本

· 不允許使用者直接互動

· 可以以程式設計形式更新

· 可以跨多行展示

标簽是應用程式中最常用的元素之一。使用标簽向使用者展示短資訊。标簽最适合展示數量相對較少的文本。

标簽應當清晰可見。為标簽文本使用高對比度顔色,并使用Dynamic Type以確定标簽文本會相應地縮放。内置的系統字型為Apple Watch提供了最清晰可見的字型,并且也推薦您使用。如果您使用自定義字型,不要為了使用花哨的字型和浮華不實的顔色而犧牲字型的清晰易讀性(在app中如何使用文本,以及使用Dynamic type的相關資訊,請檢視Color和Typography)。

盡可能地使用内置的樣式。内置的樣式專為高清晰度和易用度而設計。

Apple Watch人機互動指南--UI設計基礎(二)

-----------------------------------------------------------------------------------------------------------

圖像

圖像對象(image object)展示一個圖檔或者動态的圖檔序列。

Apple Watch人機互動指南--UI設計基礎(二)

圖像對象:

· 沒有自己的外觀,僅展示它的圖檔。

· 不支援使用者互動

· 為動畫開始和結束提供了程式控制

針對Apple Watch每個尺寸适當調整圖檔。不要針對不同的螢幕尺寸拉伸或壓縮圖檔。為裝置提供像素大小正确的圖檔資産。

按照@2x建立所有圖檔資産。無需為非Retina屏裝置建立圖檔。

--------------------------------------------------------------------------------------------------------------------

Groups

Groups是一款用以在界面上布局内容的重要工具。對其他對象來說,Groups起到一個容器的作用。Groups沒有預設的外觀,但是可使用自定義背景顔色和圖檔來重新配置。Groups包含指定位置、尺寸、頁邊距以及其他布局相關内容的屬性。

Group對象:

· 可以水準或垂直地布局項目

· 包含一個或者多個界面元素

· 擁有指定分組元素間的頁邊距的屬性

· 可用圖檔或者純色作為背景

· 擁有一個适用于背景和内容的可配置的圓角半徑

Groups是Xcode中執行設計任務的主要工具。但事實是一個group可以有自己的背景色或背景圖檔,這意味着你也可以使用groups作為視覺元素。

在groups中嵌套其他groups來建立複雜布局。你可能想要水準布局一些項目,垂直布局其他項目。你可能也要嵌套groups來利用外邊group的頁邊距或間隔選項。

為不同尺寸的Apple Watch顯示屏建立單獨的背景圖檔。不要針對不同螢幕尺寸拉伸或者壓縮圖檔,要為裝置提供像素大小正确的圖檔資産。

清單、按鈕、開關以及滑杆

清單

清單以單列形式分行展示資料。可使用清單來展示動态更改的内容。

Apple Watch人機互動指南--UI設計基礎(二)

清單對象具有以下特性:

· 支援多行内容展示類型

· 可滾動

· 可設定背景色或圖檔

您需要在設計時指定清單行類型的布局,所有行類型都必須提前設計好。運作時,您可以選擇您真正需要的行類型。

行類型使用要一緻。您可能會建立不同的行類型來展示您的内容、頁眉和頁腳等。要確定行類型使用一緻。

避免混合使用内容類型截然不同的清單行。當展示内容時,要確定您所使用的行類型的一緻性。隻有當清單分為不同的section,或者出于組織内容行目的時才能使用其他的清單行類型。在内容上使用相同的清單行類型可確定清單行大小一緻,并易于導航。

限制每次顯示的清單行數。超過20行的清單會因需要滾動而變得笨重。可隻顯示最相關的子集行,并給使用者提供加載更多行的選擇。

不要在分組(Groups)内嵌入清單。清單會基于其所包含的行數動态調整大小。由此,清單會忽略Groups對其高度上的限制。

----------------------------------------------------------------------------------------------------------------------

按鈕

按鈕可執行app特有的操作

Apple Watch人機互動指南--UI設計基礎(二)

按鈕具有以下特性:

· 有可自定義的背景

· 圓角

· 可包含标簽群組對象(group object)

按鈕的背景被稱為platter。你可以在運作時更改展示在按鈕platter中的自定義顔色或圖檔。

建立橫跨整個螢幕寬度的按鈕。強烈建議使用全寬(full-width)按鈕。如果你在同一水準空間上必須放置一個以上的按鈕,那要将數量限制在兩個以内。

盡可能保持按鈕高度一緻。如果您在一個螢幕上集中放置了多個按鈕,那麼每個按鈕要使用相同的高度。

按鈕用圓角将自身和其他元素差別開來。按鈕标準的圓角半徑是6 points。

----------------------------------------------------------------------------------------------------------------------

開關

開關代表兩種互斥的選擇或狀态。

Apple Watch人機互動指南--UI設計基礎(二)

開關具有以下特性:

· 訓示項目的二進制狀态

· 通常包含标簽

使用開關讓使用者選擇兩個選項中的其中一項,比如yes/no或on/off.

----------------------------------------------------------------------------------------------------------------------

滑杆

滑杆允許使用者在一系列離散值上做出調整。使用者通過點選滑杆任意一端的圖檔來更改值的大小。

Apple Watch人機互動指南--UI設計基礎(二)

滑杆具有以下特性:

· 通過在任意一端包含一個水準的軌道圖檔來操作滑杆的值。

· 通過離散的或者連續的進度條展示目前值。

· 通過預定的量值來增減數值。 

· 不會向使用者展示具體數值。

使用自定義圖檔讓滑杆的目的更明顯。如果你沒有提供任何自定義圖檔,系統會展示“+”和“-”的圖檔。

地圖、日期和計時器以及菜單

地圖

地圖可向使用者傳達某個地理目标的相關資訊。您可以使用地圖來展示目的地或者展示興趣點的位置。Apple Watch上的地圖是靜态快照,不能與之進行互動,點選地圖則會打開Maps app。

配置地圖範圍使之成為包含相關位置的最小區域。在展示地圖之前,地圖範圍由WatchKit擴充程式化設定。要選擇一個包含所有需要的興趣點資訊的區域,并且對使用者來說該區域是最小最有用的區域。

不要建立一個尺寸超過可用内容區預的地圖對象。地圖應該針對目前Apple Watch尺寸适當調整,并且使用者無需額外滾動就能看見整個地圖。

不要使地圖對象的尺寸超過内容可視區域。地圖對象的尺寸要比對Apple Watch的螢幕規格,使使用者無需額外滾屏就可以看到整個地圖。

使用注釋來高亮标注地圖上的位置。注釋是展示在地圖之上的圖檔,用來标記位置或者調出資訊。地圖每次展示的注釋不能超過5個。

地圖對綠色、紅色以及紫色三種圖釘提供了内置的支援。使用綠色圖釘标記起點,使用紅色圖釘标記目的地,使用紫色圖釘标注興趣點。

Apple Watch人機互動指南--UI設計基礎(二)

你也可以使用自定義圖檔建立注釋。圖檔的底部邊緣指向目标坐标。

Apple Watch人機互動指南--UI設計基礎(二)

----------------------------------------------------------------------------------------------------------------------

日期和計時器

日期與計時器對象是Apple Watch上用來顯示與時間相關的值的特定标簽(label)。日期标簽有如下特性:

日期标簽

· 展示日期、時間或者組合使用兩者。

· 可使用多種格式、月曆以及時區形式來配置展示時間。

· 不需要通過WatchKit 擴充更新。

任何時候當你想要展示目前日期或時間,都可以使用日期對象。

計時器标簽

Apple Watch人機互動指南--UI設計基礎(二)

計時器标簽特性如下:

· 向指定的時間計時或者從指定時間開始計時。

· 可以配置展示多種形式的計數值。

· 無需通過WatchKit 擴充更新

通常使用一個計時器标簽來精确地進行計時或倒計時。

----------------------------------------------------------------------------------------------------------------------

菜單

Apple Watch Retina顯示屏上的Force Touch手勢可展示目前螢幕的上下文情景菜單。菜單儲存了目前螢幕相關的一些操作,無需占用界面上的空間。

Apple Watch人機互動指南--UI設計基礎(二)

菜單可展示1到4個操作。按鈕操作按照添加的順序,從左到右從上到下按序排列展示。菜單不能分層,也不能滾動。你可以在設計或者程式設計過程中配置菜單操作。

菜單操作僅适用于目前的螢幕。每個螢幕都有各自的菜單,或者根本就沒有菜單。某些任務類型并不适合上下文情景菜單,比如僅适用于滾動界面的可視部分,或者隻作用于目前選中的項目。

每個操作必須有一個圖檔和一個标簽字元串。菜單圖檔是應用于标準背景的系統樣式。标簽字元串必須在1到2行。

菜單是可選的。隻有在目前螢幕包括相關操作時才使用上下文情景菜單。當沒有菜單展示時,系統就展示相應的動畫。

關于建立菜單中圖示的内容,請參看:Menu Images

Icon與圖檔尺寸

Icon與圖檔尺寸

每個應用都需要一個漂亮的、令人難忘的主螢幕圖示,以便使用者可以很好地識别應用程式。由于主螢幕上的應用程式通過icon被使用者識别,是以你的icon應當是可辨認的,并且類似iOS應用程式的icon,同時仍然能傳達出應用程式的目的。

Apple Watch人機互動指南--UI設計基礎(二)

Icon尺寸

主螢幕上的icon是圓形的。下表列出了每個icon相應的直徑和使用者。根據給定的尺寸規格,将你的icon建立為完整的方形圖檔,系統将會自動應用圓形遮罩。

Apple Watch人機互動指南--UI設計基礎(二)

所建立的圖形資源都是@2x規格,不需要非@2x的圖形。

對于所有的圖檔和icon來說,推薦使用PNG格式,避免使用交叉處理的PNG圖檔。

Icon和圖檔的标準色深(bit depth)為24位,也就是紅、綠、藍色各占用8位。您可以使用8-bit alpha channel圖形,但不是必須的。您也可以使用帶有索引顔色的PNG圖檔,以便節省圖檔檔案中的空間。

主螢幕上的icon

Apple Watch的主螢幕非常獨特,但似乎非常熟悉。主螢幕上的icon類似iOS應用程式,但是不附帶文本。在如此小的尺寸上,這些icon必須清晰易于辨認,且能讓使用者知道他們代表什麼應用。當Apple Watch app的功能非常類似iOS上的應用程式時,其icon在視覺上幾乎一緻。但是當Watch app扮演輔助角色或者是iOS應用程式控制器時,icon相應地會有所不同。

為了得到最佳效果,可以向專業平面設計師尋求幫助。一個經驗豐富的平面設計師可以幫您的應用程式開發一個整體的視覺風格,并将該風格應用到所有的icon和圖檔上。

要避免使用次要的或者語義模糊不清的元素。例如Mail icon使用信封樣式,而不是郵箱、郵差的信件袋或者郵局标志。

保持簡潔。特别要避免在icon中填塞過多不同的圖形。找到某個能夠捕捉到應用精髓的單個元素,并能通過簡單、獨一無二的圖形将該元素展示出來。請謹慎添加細節,如果icon的内容或形狀過于複雜,

那麼在小尺寸螢幕上,這些細節會變得非常雜亂和模糊。

為應用程式的主旨建立一個抽象闡釋方式。通常以藝術性的方式闡釋現實會有更好的效果,這種方式可以讓您強調您希望使用者關注的方面。

讓Apple Watch app icon和iOS app保持相似。維持外觀上的相似性可幫使用者建立Watch app與iOS app之間的關聯性。

為不同顯示屏尺寸的Apple Watch建立不同尺寸的主螢幕應用程式圖示,以確定icon在不同尺寸的Apple Watch裝置上都能完美展示。關于裝置尺寸規格,請參看Table 20-1。

----------------------------------------------------------------------------------------------------------------------

菜單圖檔

Force Touch上下文情景菜單中的icon是模闆圖檔,通過圖檔的alpha通道定義生成的形狀。圖檔中的顔色資訊會被忽略。

内容周圍的額外空間可確定菜單icon邊緣和内容之間有足夠的邊界。

Apple Watch人機互動指南--UI設計基礎(二)

使用菜單圖檔,圖檔的canvas尺寸應大于内容。

當設計菜單圖檔中展示的圖形時,請使用适合于裝置尺寸和圖形複雜度的線寬。線條的寬度最少要4 px,以防難以辨認。

Apple Watch人機互動指南--UI設計基礎(二)

對于菜單圖檔,推薦使用PNG格式,并且要避免使用交叉處理的PNG圖檔。