圓–智能手表UI設(shè)計(jì)

4 評論 27944 瀏覽 28 收藏 9 分鐘

圓在日常生活中比比皆是,從Logo到井蓋,從菜式擺盤到風(fēng)水羅盤,再到手表表盤,處處體現(xiàn)了因循圓形形態(tài)的信息排布藝術(shù)??墒窃谝苑叫螢橹鞯慕缑媸澜?,圓形卻因制作工藝、信息展示習(xí)慣等原因一直很難躋身其中。

圓--智能手表UI設(shè)計(jì)

安卓近期的開發(fā)包里,目標(biāo)調(diào)試設(shè)備中新增了一個(gè)有趣的選項(xiàng):

圓--智能手表UI設(shè)計(jì)

Android Wear Round,圓形界面的可穿戴設(shè)備,它與Nexus手機(jī)、安卓TV等一道成為安卓展示界面的一員。在安卓最新的可穿戴設(shè)備設(shè)計(jì)規(guī)范里,也于Style部分提出應(yīng)當(dāng)同時(shí)考慮不同設(shè)備的尺寸和形狀。

圓--智能手表UI設(shè)計(jì)

那么圓是否會(huì)在可穿戴設(shè)備尤其是智能手表的浪潮里找回在界面世界的一席之地呢?

安卓智能手表–Moto360

Moto360是安卓本家的智能手表,分方形和圓形兩種,忠實(shí)體現(xiàn)了安卓對可穿戴設(shè)備的設(shè)計(jì)規(guī)范。相對方形,圓形的手表表盤應(yīng)該是更符合人傳統(tǒng)上對手表的認(rèn)知。

首先通過兩個(gè)視頻了解一下Moto360的使用場景和運(yùn)行界面:

http://v.qq.com/page/y/6/u/y0133nh636u.html

http://v.qq.com/page/q/v/z/q01333xw2vz.html

從現(xiàn)有的官方天氣、導(dǎo)航、搜索等app中可以看出:

1、展示信息以卡片為主;

2、?界面切換以手勢為主;

3、?輸入以語音為主。

盡管現(xiàn)有的官方app都在努力兼容方形和圓形,以至于在界面上沒能為圓形做針對性設(shè)計(jì),還是有很多設(shè)計(jì)師為圓形思考,創(chuàng)作了有信服力的Moto360 app概念設(shè)計(jì):

表盤:droid-life?,?Moto 360 Design Face-Off

圓--智能手表UI設(shè)計(jì)

圓--智能手表UI設(shè)計(jì)

天氣:Kreativa Studio,Sundial,Unity

圓--智能手表UI設(shè)計(jì)

圓--智能手表UI設(shè)計(jì)

撥號(hào)盤和計(jì)步器:Rekola,Fitbit

圓--智能手表UI設(shè)計(jì)

音樂:Ruijters,Soundcloud

圓--智能手表UI設(shè)計(jì)

列車時(shí)刻:Halaska

圓--智能手表UI設(shè)計(jì)

提醒:Ramotion

圓--智能手表UI設(shè)計(jì)

聊天:Galubinski

圓--智能手表UI設(shè)計(jì)

Facebook:Galubinski

圓--智能手表UI設(shè)計(jì)

iOS智能手表 – iWatch的概念們

借著各種蘋果的iWatch的傳言,設(shè)計(jì)師們展開遐想空間,一大批yy出的demo隨之而來。它們有的基于創(chuàng)新的外觀造型,基于iOS已有的專利推論,有的改造原有的iPhone界面,有的配合表盤周圍的硬件按鈕。這里擷取其中幾個(gè)圓形界面的例子。

較奇特的一款來自Lamm的界面設(shè)計(jì)源自2010年蘋果對iTunes Music的螺旋UI界面的專利,將圖標(biāo)排列在螺旋曲線上,根據(jù)手指在表面上的轉(zhuǎn)動(dòng)讓圖標(biāo)依序放縮。

圓--智能手表UI設(shè)計(jì)

Ramachandran的設(shè)計(jì)酷似iOS系統(tǒng)在手表上的版本,這一設(shè)計(jì)很大程度上可兼容方形界面。

圓--智能手表UI設(shè)計(jì)

Pinal在iOS7的風(fēng)格基礎(chǔ)上將常用的時(shí)間、天氣、電話等主要功能及入口左右呼應(yīng)地安排在首頁,更多功能隱藏在下方拉出的浮層里,具體程序則精簡到只占用左側(cè)屏幕。

圓--智能手表UI設(shè)計(jì)

Olmstead也發(fā)展了iOS7的風(fēng)格,使用了蘋果花2100萬美元從瑞士聯(lián)邦鐵路買到使用權(quán)的鐘表表盤,表身兩側(cè)的硬件按鈕可以根據(jù)程序自身需要編程,如快速拍照等。

圓--智能手表UI設(shè)計(jì)

Evgeniy將更簡潔扁平的“iOS8”放到iWatch上,給出主屏、音樂、電話和天氣4個(gè)界面的設(shè)計(jì)。

圓--智能手表UI設(shè)計(jì)

其他智能手表概念

在安卓和iOS兩個(gè)已有的移動(dòng)操作系統(tǒng)的框架外,還有一些demo會(huì)更考究設(shè)計(jì)的載體和情懷。

Balogh熱衷于傳統(tǒng)手表,嘗試將智能的科技成份與傳統(tǒng)表元素揉合,保留傳統(tǒng)價(jià)值和質(zhì)感的同時(shí)在表盤中心提供可與手機(jī)聯(lián)動(dòng)的功能。

圓--智能手表UI設(shè)計(jì)

無獨(dú)有偶,Catalkaya為Swatch設(shè)計(jì)的該款智能手表也有頗多傳統(tǒng)手表的影子。

圓--智能手表UI設(shè)計(jì)

小結(jié)

以上智能手表圓形界面的例子區(qū)別于方形,可以總結(jié)出以下兩個(gè)特點(diǎn):

1、針對圓形安排界面元素

圓形獨(dú)有的弧形、環(huán)形、扇形、螺旋形等形狀可以作為界面元素的排布框架,讓界面有天然的結(jié)構(gòu)向心力,使界面較千篇一律的方形產(chǎn)生不拘一格的效果。

2、針對圓形設(shè)計(jì)手勢操作

智能手表上手指的操作幾乎均為單手操作,這些操作集中在小面積的表盤區(qū)域,可將操作與圓形界面結(jié)構(gòu)配合,如音樂類app中圓形的播放進(jìn)度,可用轉(zhuǎn)動(dòng)手勢配合。

其他

除了可穿戴設(shè)備,在其他智能設(shè)備、導(dǎo)覽、手機(jī)顯示屏等領(lǐng)域也一直有圓形界面的嘗試,三個(gè)例子分別是:NEST智能恒溫器、2011年設(shè)計(jì)的導(dǎo)覽系統(tǒng)Kompass?和?今年剛發(fā)布的LG G3手機(jī)搭配Quick Circle Case。

圓--智能手表UI設(shè)計(jì)

原文來自: 騰訊ISUX (http://isux.tencent.com/circle-ui-design-smartwatch.html)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評論
評論請登錄
  1. 老喬走后,蘋果UI設(shè)計(jì)和產(chǎn)品造型早就名不副實(shí),庫克只知道吃老本

    回復(fù)
  2. 這個(gè)設(shè)計(jì)比真正的apple產(chǎn)品炫多了。。。

    來自北京 回復(fù)
    1. 現(xiàn)在都2019年了,一個(gè)像樣的手表交互ui都沒有,真是行業(yè)的短板

      回復(fù)