圓–智能手表UI設計
圓–智能手表UI設計-移動閱讀二維碼

title2

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

圓--智能手表UI設計

安卓近期的開發包里,目標調試設備中新增了一個有趣的選項:

圓--智能手表UI設計

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

圓--智能手表UI設計

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

安卓智能手表–Moto360

Moto360是安卓本家的智能手表,分方形和圓形兩種,忠實體現了安卓對可穿戴設備的設計規范。相對方形,圓形的手表表盤應該是更符合人傳統上對手表的認知。

首先通過兩個視頻了解一下Moto360的使用場景和運行界面:

從現有的官方天氣、導航、搜索等app中可以看出:

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

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

3、?輸入以語音為主。

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

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

圓--智能手表UI設計

圓--智能手表UI設計

天氣:(Kreativa Studio,Sundial,Unity

圓--智能手表UI設計

圓--智能手表UI設計

撥號盤和計步器:(Rekola,Fitbit

圓--智能手表UI設計

音樂:(Ruijters,Soundcloud

圓--智能手表UI設計

列車時刻:(Halaska

圓--智能手表UI設計

提醒:(Ramotion

圓--智能手表UI設計

聊天:(Galubinski

圓--智能手表UI設計

Facebook:(Galubinski

圓--智能手表UI設計

iOS智能手表 – iWatch的概念們

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

較奇特的一款來自Lamm的界面設計源自2010年蘋果對iTunes Music的螺旋UI界面的專利,將圖標排列在螺旋曲線上,根據手指在表面上的轉動讓圖標依序放縮。

圓--智能手表UI設計

Ramachandran的設計酷似iOS系統在手表上的版本,這一設計很大程度上可兼容方形界面。

圓--智能手表UI設計

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

圓--智能手表UI設計

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

圓--智能手表UI設計

Evgeniy將更簡潔扁平的”iOS8″放到iWatch上,給出主屏、音樂、電話和天氣4個界面的設計。

圓--智能手表UI設計

其他智能手表概念

在安卓和iOS兩個已有的移動操作系統的框架外,還有一些demo會更考究設計的載體和情懷。

Balogh熱衷于傳統手表,嘗試將智能的科技成份與傳統表元素揉合,保留傳統價值和質感的同時在表盤中心提供可與手機聯動的功能。

圓--智能手表UI設計

無獨有偶,Catalkaya為Swatch設計的該款智能手表也有頗多傳統手表的影子。

圓--智能手表UI設計

小結

以上智能手表圓形界面的例子區別于方形,可以總結出以下兩個特點:

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

圓形獨有的弧形、環形、扇形、螺旋形等形狀可以作為界面元素的排布框架,讓界面有天然的結構向心力,使界面較千篇一律的方形產生不拘一格的效果。

2、針對圓形設計手勢操作

智能手表上手指的操作幾乎均為單手操作,這些操作集中在小面積的表盤區域,可將操作與圓形界面結構配合,如音樂類app中圓形的播放進度,可用轉動手勢配合。

其他

除了可穿戴設備,在其他智能設備、導覽、手機顯示屏等領域也一直有圓形界面的嘗試,三個例子分別是:NEST智能恒溫器、2011年設計的導覽系統Kompass?和?今年剛發布的LG G3手機搭配Quick Circle Case。

圓--智能手表UI設計

智能手表設計相關文章:

設計師必看的ANDROID WEAR設計指南

超前酷炫的智能手表概念化設計

本文鏈接:http://www.casaleticia.com/smart-watches-the-ui-design.html
本文標簽: , , ,