13
| 本文作者： 訾竣喆 | 2015-12-17 11:44 |
從PC到手機，人們開始研究如何在更小的屏幕下設(shè)計出體驗更佳的UI。如今，伴隨著可穿戴設(shè)備的到來，如何在2英寸見方的屏幕中為佩帶者提供更為舒適的體驗便成了當下需要解決的問題。雖然“設(shè)計”一詞乍聽起來可能是有些令人生畏，但是其實設(shè)計者只需要追本溯源，重新回到最基本的設(shè)計理論之中，就可以設(shè)計出體驗更佳的適用于可穿戴設(shè)備的UI。
可以說，可穿戴設(shè)備為當下的設(shè)計者們提出了在設(shè)計領(lǐng)域上的一項新挑戰(zhàn)。
雖然目前市面上有許多不同類型的可穿戴設(shè)備，但是可穿戴設(shè)備都具備相同的一個特征——那就是屏幕都相當?shù)男?。隨著越來越多的智能手表接踵而至，可穿戴設(shè)備所提供的屏幕色彩靚麗度和功能豐富度都在逐漸提升，而另一方面，諸如健康手環(huán)之類的智能穿戴設(shè)備則正在向簡約化發(fā)展。
從簡單的健身追蹤器到功能更豐富更強大的智能手表，如何更好的在這么一小塊屏幕上設(shè)計體驗更佳的UI，還有很多需要考慮的事情。
目前，我們能夠看到市面上的可穿戴設(shè)備主要分為三大類：
基于藍牙與智能手機連接的智能手表，如Apple Watch或是三星的Gear S2
獨立的智能追蹤手表，如那些運動員較為喜歡的具有GPS功能的手表
活動追蹤器，如Fitbit的Surge
這些設(shè)備每一種都會帶有一塊屏幕，大小只有數(shù)十毫米，這也使得腕表的UI設(shè)計相當?shù)木哂刑魬?zhàn)性。有些設(shè)備還配備了全彩屏幕。其中有許多的設(shè)備的特性都與智能手機相仿，而另一些則只有一個黑白的顯示屏。
那么，該如何設(shè)計可穿戴設(shè)備的UI呢？應(yīng)該從何著眼去考慮呢？
讓我們先回想設(shè)計的基本理論和在課堂中學(xué)習(xí)設(shè)計時所學(xué)到的一些概念。這些概念包括色彩、對比度、空間以及排版。
目前，大多數(shù)智能手表在屏幕底色上都選擇了黑色。很多智能手表的應(yīng)用程序都在一個黑暗的背景光環(huán)境下運行。這使得在色彩的選擇上變得尤為重要，需要使用一種能夠更好的在黑色環(huán)境下工作的顏色。
當談到怎樣更好的在更小的屏幕下工作時，那就非扁平化設(shè)計莫屬了。再加上黑暗的背景，也就意味著我們需要設(shè)計一個顏色鮮艷的圖標。
如上圖，Runtastic在圖標上很好的使用了顏色明亮的色調(diào)，使其很容易在黑暗背景下看到。在使用藍色來建立品牌特性的同時，使用了更明亮的綠色來表示的按鈕和用戶操作。所有的顏色選項一目了然，非常有助于設(shè)計和功能性。
對比度也是在小屏幕上設(shè)計UI時所需考慮到的重要因素。
設(shè)計應(yīng)該清楚地定義每一個單元素，并且還要包括他們之間的間距。如果在屏幕上有多種不同元素的話，這將會是特別重要的一點。同樣的，對比度也很重要，因為把握好對比度就能夠使元素很容易被一眼看到，這是手表佩帶者與設(shè)備進行交互的最佳方式。
如上圖，Streaks就使用了明亮和黑暗的強烈對比來使元素之間形成了鮮明的對比，這有助于提高內(nèi)容的可讀性。每個圓形圖標都是為觸摸開啟或關(guān)閉某項功能而設(shè)計的，Streaks很好的通過顏色和按鍵大小的選用，使得每個元素都清晰可見。
對于空間的利用程度將決定在可穿戴設(shè)備上UI設(shè)計的成敗。留白太多或是選項框太大就會導(dǎo)致可提供內(nèi)容的空間非常有限；滿屏幕都塞滿內(nèi)容的話就很難區(qū)分出優(yōu)先級，佩帶著也會很難查看。所以，必須要掌握好這種度，既要保證UI的功能性還要保證其可用性。
如上圖，The Guardian做的就很到位。圖片和文本的位置都留有足夠的空間，以保證每一幕上都能夠提供一個完整的單一消息。需要注意的是，The Guardian在每行的字符數(shù)上也調(diào)整的很到位，不能過多也不能過少。
只有一種類型的排版能夠適合在這些小屏幕上工作——那就是極簡排版。
幾乎所有市面上的應(yīng)用程序中，簡單的無襯線字體都占有重要地位?？纱┐髟O(shè)備上，字體的大小通常比你所猜的要大——每行約有20個字符（英文字符），每個信息不超過6屏的畫面大小。
如上圖，Citymapper使用了多層的界面文本為佩帶者提供了不同的層次來進行不同的操作。字體簡單明了非常清晰。這款應(yīng)用程序完美的將所有這些元素結(jié)合在了一起——色彩、對比度、空間以及漂亮的版式——這能夠很好的幫助佩戴者明確哪些信息是最重要的。
Via ： uxpin
相關(guān)閱讀：
滿屏的方塊和格子：為什么卡片式設(shè)計在App UI中如此流行？
谷歌Material Design UI 真正美在哪里？設(shè)計即功能
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。
