siemens x
智能穿戴

如何在智能穿戴設(shè)備上設(shè)計(jì)UI?

2025China.cn   2016年01月12日

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

  可以說,可穿戴設(shè)備為當(dāng)下的設(shè)計(jì)者們提出了在設(shè)計(jì)領(lǐng)域上的一項(xiàng)新挑戰(zhàn)。

  雖然目前市面上有許多不同類型的可穿戴設(shè)備,但是可穿戴設(shè)備都具備相同的一個(gè)特征——那就是屏幕都相當(dāng)?shù)男 kS著越來越多的智能手表接踵而至,可穿戴設(shè)備所提供的屏幕色彩靚麗度和功能豐富度都在逐漸提升,而另一方面,諸如健康手環(huán)之類的智能穿戴設(shè)備則正在向簡(jiǎn)約化發(fā)展。

  不同類型的可穿戴設(shè)備

  從簡(jiǎn)單的健身追蹤器到功能更豐富更強(qiáng)大的智能手表,如何更好的在這么一小塊屏幕上設(shè)計(jì)體驗(yàn)更佳的UI,還有很多需要考慮的事情。

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

  基于藍(lán)牙與智能手機(jī)連接的智能手表,如AppleWatch或是三星的GearS2

  獨(dú)立的智能追蹤手表,如那些運(yùn)動(dòng)員較為喜歡的具有GPS功能的手表

  活動(dòng)追蹤器,如Fitbit的Surge

  這些設(shè)備每一種都會(huì)帶有一塊屏幕,大小只有數(shù)十毫米,這也使得腕表的UI設(shè)計(jì)相當(dāng)?shù)木哂刑魬?zhàn)性。有些設(shè)備還配備了全彩屏幕。其中有許多的設(shè)備的特性都與智能手機(jī)相仿,而另一些則只有一個(gè)黑白的顯示屏。

  應(yīng)用界面設(shè)計(jì)理論

  那么,該如何設(shè)計(jì)可穿戴設(shè)備的UI呢?應(yīng)該從何著眼去考慮呢?

  讓我們先回想設(shè)計(jì)的基本理論和在課堂中學(xué)習(xí)設(shè)計(jì)時(shí)所學(xué)到的一些概念。這些概念包括色彩、對(duì)比度、空間以及排版。

  色彩

  目前,大多數(shù)智能手表在屏幕底色上都選擇了黑色。很多智能手表的應(yīng)用程序都在一個(gè)黑暗的背景光環(huán)境下運(yùn)行。這使得在色彩的選擇上變得尤為重要,需要使用一種能夠更好的在黑色環(huán)境下工作的顏色。

  當(dāng)談到怎樣更好的在更小的屏幕下工作時(shí),那就非扁平化設(shè)計(jì)莫屬了。再加上黑暗的背景,也就意味著我們需要設(shè)計(jì)一個(gè)顏色鮮艷的圖標(biāo)。

  如上圖,Runtastic在圖標(biāo)上很好的使用了顏色明亮的色調(diào),使其很容易在黑暗背景下看到。在使用藍(lán)色來建立品牌特性的同時(shí),使用了更明亮的綠色來表示的按鈕和用戶操作。所有的顏色選項(xiàng)一目了然,非常有助于設(shè)計(jì)和功能性。

  對(duì)比度

  對(duì)比度也是在小屏幕上設(shè)計(jì)UI時(shí)所需考慮到的重要因素。

  設(shè)計(jì)應(yīng)該清楚地定義每一個(gè)單元素,并且還要包括他們之間的間距。如果在屏幕上有多種不同元素的話,這將會(huì)是特別重要的一點(diǎn)。同樣的,對(duì)比度也很重要,因?yàn)榘盐蘸脤?duì)比度就能夠使元素很容易被一眼看到,這是手表佩帶者與設(shè)備進(jìn)行交互的最佳方式。

  如上圖,Streaks就使用了明亮和黑暗的強(qiáng)烈對(duì)比來使元素之間形成了鮮明的對(duì)比,這有助于提高內(nèi)容的可讀性。每個(gè)圓形圖標(biāo)都是為觸摸開啟或關(guān)閉某項(xiàng)功能而設(shè)計(jì)的,Streaks很好的通過顏色和按鍵大小的選用,使得每個(gè)元素都清晰可見。

  空間

  對(duì)于空間的利用程度將決定在可穿戴設(shè)備上UI設(shè)計(jì)的成敗。留白太多或是選項(xiàng)框太大就會(huì)導(dǎo)致可提供內(nèi)容的空間非常有限;滿屏幕都塞滿內(nèi)容的話就很難區(qū)分出優(yōu)先級(jí),佩帶著也會(huì)很難查看。所以,必須要掌握好這種度,既要保證UI的功能性還要保證其可用性。

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

  排版

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

  幾乎所有市面上的應(yīng)用程序中,簡(jiǎn)單的無襯線字體都占有重要地位??纱┐髟O(shè)備上,字體的大小通常比你所猜的要大——每行約有20個(gè)字符(英文字符),每個(gè)信息不超過6屏的畫面大小。

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

(轉(zhuǎn)載)

標(biāo)簽:智能穿戴 我要反饋 
2024世界人工智能大會(huì)專題
即刻點(diǎn)擊并下載ABB資料,好禮贏不停~
優(yōu)傲機(jī)器人下載中心
西克
2024全景工博會(huì)
專題報(bào)道
2024 工博會(huì) | 直播探館 · 全景解讀
2024 工博會(huì) | 直播探館 · 全景解讀

第二十四屆中國(guó)工博會(huì)于9月24日至28日在國(guó)家會(huì)展中心(上海)舉行,展會(huì)以“工業(yè)聚能 新質(zhì)領(lǐng)航”為全新主題。 [更多]

2024世界人工智能大會(huì)
2024世界人工智能大會(huì)

WAIC 2024將于7月在上海舉行,論壇時(shí)間7月4日-6日,展覽時(shí)間7月4日-7日。WAIC 2024將圍繞“以共商促... [更多]

2024漢諾威工業(yè)博覽會(huì)專題
2024漢諾威工業(yè)博覽會(huì)專題

2024 漢諾威工業(yè)博覽會(huì)將于4月22 - 26日在德國(guó)漢諾威展覽中心舉行。作為全球首屈一指的工業(yè)貿(mào)易展覽會(huì),本屆展覽會(huì)... [更多]

    <small id="iu4iq"><tfoot id="iu4iq"><em id="iu4iq"></em></tfoot></small>