一花一世界,在可穿戴設備上應該如何設計UI?

從PC到手機,人們開始研究如何在更小的屏幕下設計出體驗更佳的UI。如今,伴隨着可穿戴設備的到來,如何在2英寸見方的屏幕中為佩帶着提供更為舒適的體驗便成了當下需要解決的問題。雖然“設計”一詞乍聽起來可能是有些令人生畏,但是其實設計者只需要追本溯源,重新回到最基本的設計理論之中,就可以設計出體驗更佳的適用於可穿戴設備的UI。

可以説,可穿戴設備為當下的設計者們提出了在設計領域上的一項新挑戰。

雖然目前市面上有許多不同類型的可穿戴設備,但是可穿戴設備都具備相同的一個特徵——那就是屏幕都相當的小。隨着越來越多的智能手錶接踵而至,可穿戴設備所提供的屏幕色彩靚麗度和功能豐富度都在逐漸提升,而另一方面,諸如健康手環之類的智能穿戴設備則正在向簡約化發展。

不同類型的可穿戴設備

從簡單的健身追蹤器到功能更豐富更強大的智能手錶,如何更好的在這麼一小塊屏幕上設計體驗更佳的UI,還有很多需要考慮的事情。

目前,我們能夠看到市面上的可穿戴設備主要分為三大類:

基於藍牙與智能手機連接的智能手錶,如Apple Watch或是三星的Gear S2


獨立的智能追蹤手錶,如那些運動員較為喜歡的具有GPS功能的手錶


活動追蹤器,如Fitbit的Surge

這些設備每一種都會帶有一塊屏幕,大小隻有數十毫米,這也使得腕錶的UI設計相當的具有挑戰性。有些設備還配備了全綵屏幕。其中有許多的設備的特性都與智能手機相仿,而另一些則只有一個黑白的顯示屏。

應用界面設計理論

那麼,該如何設計可穿戴設備的UI呢?應該從何着眼去考慮呢?

讓我們先回想設計的基本理論和在課堂中學習設計時所學到的一些概念。這些概念包括色彩、對比度、空間以及排版。

色彩

目前,大多數智能手錶在屏幕底色上都選擇了黑色。很多智能手錶的應用程序都在一個黑暗的背景光環境下運行。這使得在色彩的選擇上變得尤為重要,需要使用一種能夠更好的在黑色環境下工作的顏色。

當談到怎樣更好的在更小的屏幕下工作時,那就非扁平化設計莫屬了。再加上黑暗的背景,也就意味着我們需要設計一個顏色鮮豔的圖標。


如上圖,Runtastic在圖標上很好的使用了顏色明亮的色調,使其很容易在黑暗背景下看到。在使用藍色來建立品牌特性的同時,使用了更明亮的綠色來表示的按鈕和用户操作。所有的顏色選項一目瞭然,非常有助於設計和功能性。

對比度

對比度也是在小屏幕上設計UI時所需考慮到的重要因素。

設計應該清楚地定義每一個單元素,並且還要包括他們之間的間距。如果在屏幕上有多種不同元素的話,這將會是特別重要的一點。同樣的,對比度也很重要,因為把握好對比度就能夠使元素很容易被一眼看到,這是手錶佩帶者與設備進行交互的最佳方式。


如上圖,Streaks就使用了明亮和黑暗的強烈對比來使元素之間形成了鮮明的對比,這有助於提高內容的可讀性。每個圓形圖標都是為觸摸開啟或關閉某項功能而設計的,Streaks很好的通過顏色和按鍵大小的選用,使得每個元素都清晰可見。

空間

對於空間的利用程度將決定在可穿戴設備上UI設計的成敗。留白太多或是選項框太大就會導致可提供內容的空間非常有限;滿屏幕都塞滿內容的話就很難區分出優先級,佩帶着也會很難查看。所以,必須要掌握好這種度,既要保證UI的功能性還要保證其可用性。


如上圖,The Guardian做的就很到位。圖片和文本的位置都留有足夠的空間,以保證每一幕上都能夠提供一個完整的單一消息。需要注意的是,The Guardian在每行的字符數上也調整的很到位,不能過多也不能過少。

排版

只有一種類型的排版能夠適合在這些小屏幕上工作——那就是極簡排版。

幾乎所有市面上的應用程序中,簡單的無襯線字體都佔有重要地位。可穿戴設備上,字體的大小通常比你所猜的要大——每行約有20個字符(英文字符),每個信息不超過6屏的畫面大小。


如上圖,Citymapper使用了多層的界面文本為佩帶者提供了不同的層次來進行不同的操作。字體簡單明瞭非常清晰。這款應用程序完美的將所有這些元素結合在了一起——色彩、對比度、空間以及漂亮的版式——這能夠很好的幫助佩戴者明確哪些信息是最重要的。

Via : uxpin

相關閲讀:

滿屏的方塊和格子:為什麼卡片式設計在App UI中如此流行?

GoogleMaterial Design UI 真正美在哪裏?設計即功能



資料來源:雷鋒網
作者/編輯:訾竣喆

如果喜歡我們的文章,請即分享到︰

標籤: UI