BLE(Bluetooth Low Energy)簡介

參考資料:

  1. TI BLE課程
  2. Core Bluetooth on iOS

Bluetooth Low Energy技術及其特點

  1. BLE是Bluetooth 4.0的一部份
  2. 特點為:低功耗(很省電,可以用一顆鈕扣般大小的電池,維持運作一年以上的壽命)、低延遲、低吞吐量(傳輸速度低)
  3. 不需要像傳統的藍芽,一定要經過MFi認證才可與蘋果設備連接。
  4. 傳輸速率低於100kb/s,而傳統藍芽則大於3mb/s
  5. BLE、傳統藍芽以及Wifi的比較:
    2013-11-15_171626
    如上圖所示,Wifi、傳統藍芽以及BLE都是在同一個頻段下,左圖紅色部份是三個廣播頻道,避開WIFI了幾個常使用到的頻段,也因此wifi與BLE可以有良好的互存性。在右上的圖代表這三種傳輸方式所需要的供電量,右下的圖則是顯示這三種的傳輸量的比較圖
  6. 現有的Bluetooth類型大致有下面三種,左邊的就是BLE,中間的可以連接BLE及傳統藍芽,右邊的只能與傳統藍芽設備或是Bluetooth Smart Ready連接,Bluetooth Smart Ready則可與這三種任何一種進行連接。
    2013-11-15_172908
  7. Bluetooth Dual Mode也就是上面所畫的Bluetooth Smart Ready設備,可同時與傳統藍芽以及BLE做連接。和BLE連接時便使用BLE的模式、耗電量也與BLE相同。和傳統藍芽則也是使用傳統藍芽的功耗、傳輸速度及模式。

Bluetooth Low Energy協議

  1. 分為Controller、Host及App層
    2013-11-15_174159

    1. Physical Layer:物理層
    2. Link Layer:鏈路控制層
    3. HCI:提供標準藍芽事件及通知層
    4. Logical Link Control and Adaption Protocol:負責連接和事件
    5. Security Manager:配對、數據加密這類
    6. Attribute Protocol:所有數據傳輸經過這層實現(ATT),定義了Client和Server,Client就傳Request,Server傳response。
    7. Generic Attribute Profile:具體實現數據的傳輸(GATT)。Server上所有的ATT都被實作了,成為一個個的。Services,通過這樣的形式把數據包給Client。把ATT定義的屬性根據不同的服務進行歸類、組合,同時把一系列的讀寫整合起來,成為一系列的數據通信操作流程,提供給上層的Profile去用。
    8. Generic Access Prifile:設備查找、連接建立(GAP),定義了四個角色
      PeripheralCentral:兩個設備連接後,進行通訊的角色。Peripheral通常是連接外面的設備(從設備),例如說血壓計等等。而Central則是連接主設備,例如手機、電腦等等。Peripheral通常是ATT及GATT的Client,Central通常是ATT及GATT的Server。
      BroadcasterObserver:兩個設備在不見連接的時後,進行通訊的角色。Broadcaster會通過一個簡單的設備,不斷的把數據丟出去,例如一個單純的溫度計。Observer則接收這些封包把相應的溫度值儲存起來。
    9. App層:一些PROFILE和一些應用組成。在APP層經過Profile的實做,來做讀寫操作的動作。

Connection parameter連接參數

  1. 連接參數會直接影響BLE的性能以及功耗,非常重要
  2. 在兩個BLE設備建立連接以後,所有的通信都是在Connection Event進行通訊,下圖是一張BLE通訊時耗電量的示意圖,橫軸代表時間、縱軸代表耗電量。所以可以看到,設備建立連線的大部份時間,都是處於Sleeping狀態下,並且在此時耗電量很低,這也是BLE省電的主要原因。另外在每次的Connection Event開始時,會由Master發起通訊要求,然後由Slave回覆
    2013-11-18_174034
  3. 參數介紹:
    Connection Interval:多久開始一次Connection Events。這會影響到BLE的傳輸速度和耗電。
    Slave Latency:為了節省Slave的電源,當Slave沒新的事件要傳給Master時,最多可忽略幾個Master發起的通訊要求。
    Supervision Timeout:設定當多久沒有收到任何通訊要求時,中斷連線。
    上面數值必需滿足以下條件Supervision Timeout > (1 + Slave Latency) * (Connection Interval)
    這是因為Slave Latency不能算在Supervision Timeout裡面,否則會造成不正常斷線
  4. 上面三個參數都是可以在連線建立之後動態修改的,因此實際應用開發的時候,大家可以根據實際需求配置上面三個參數

產品上市

  1. 產品要在全球各地的市場上市,要能夠通過SIG的認證(https://www.bluetooth.org/)
  2. 另外有一個Unplug Fests,可以測試藍芽相關功能
  3. 相關資訊請看:http://v.youku.com/v_show/id_XNTk4MDU1NDY4.html

蘋果對iOS上的BLE開發要求

  1. 在連接時iPhone設備時,不能直接取得IEEE的地址,而是取得一個resolvable address。也因此無法直接對iOS設備做advertisements
  2. 連接參數上,Interval必需大於20毫秒,小於2秒。Supervisor time 小於等於6秒。Slave latency小於等於4秒。
  3. 在iOS裡,會隱藏藍芽物理地址、Characteristic handles、Characteristic descriptors、以及連接參數。雖然連接參數在iOS裡是可以設定的,但假如在連接後,經由Slave去修改連接參數,則這些被修改的數值是沒辦法取得的。
  4. 我們無法直接獲得IEEE地址,但在iOS7裡可以使用UUID來進行連線
    2013-11-18_190345
  5. 重新連線的狀況:分別看前景、背景、暫停狀況下的設定方式
    2013-11-18_190436
  6. 尋找外接設備
    2013-11-18_190810

Flat Design 座談會筆記

講師介紹

Amy Megumi Kuo
http://happyux.hpx.tw/conf/ch/ux-usa-tibco-amy-kuo/
從政大畢業之後就到美國工作。原本是在做汽車面版設計,後來轉到手機和軟體的介面設計。
因為開發裝置的不同,在開發限制上會有所不同。
例如汽車的裝置在設計上,由於許多的按鍵仍然會是實體按鍵,但是手機與軟體則是完全要設計在畫面上。
會造成在設計方針上很大的不同

Flat design 的基本原則

首先要先介紹Flat這個詞
flat (N) 平面
skeuomorphism 擬真,在過去而言,對user來說還不熟悉,所以會用擬真的設計,希望讓使用者第一次接觸就知道如何使用。

flat design較有名的是microsoft和apple還有google。

在這邊比較了一下google的設計與ios的設計上的差異

google的原則

  1. icon盡量簡單
  2. 每個icon都需面向前面,不可有角度
  3. 陰影簡單且同光源方向(左上)
  4. 推薦使用的顏色
  5. 不可用太多效果

apple的iOS human interface guide line

  1. 所有的事情都要以content為主
  2. 所有以清楚展現text為主
  3. 深度的意思是透過不同的層級讓使用者了解要表達的內容

從ios6到7要注意的設計要點,最大差別是『把所有的東西都以展現內容為主

  1. content要全螢幕,東西要做成透明的,讓user可以看的到背景內容
  2. 要redesign使用者的介面,用深度去表達不同的內容種類
  3. 所有的button要沒有border
  4. 在ios7裡,font size可以調大小(大中小)、也可調字距。因此在設計app時要有一個基準大小,然後要考慮到使用者把字變大變小時該如何去條適整體的大小,因此不可以給定一個固定的背景大小,因為有時若是文字變大時字體會超過<重要>
  5. 如果在舊的設計裡面icon有發光、陰影、漸層,apple要求我們將這些design的元素拿掉

因此,在做flat design時,主要是要考量要做出來的感覺。apple和google在flat design上的考量是不一樣的。這是在說明,Flat Design其實並沒有一定的規範或是準則,而是以使用者經驗、或是產品想要給使用者的主要速求為考量做為出發點,維持一定的設計模式,而不需要一味的去盲從。

Flat design 對ux的影響

因為手機現在已更為普及,當操作方式更多元,過場的視窗縮放效果、畫面堆疊等等效果多了,在很多畫面切換中,icon的辨識就變得重要了。好不好辨識不再是”逼真”與否的問題,而是眼睛是否可以快速地辨識icon的輪廓與資訊。於是去掉細節,突顯關鍵形狀與顏色,就成了解決之道

「flat design的好與壞」
好:潮流 、簡單(讓人一看就能明瞭、對設計師程式師都簡單,但要能夠更能表現出精神的)
壞:較難突出(大家的設計都很像,要怎樣去吸引使用者會成為更難的議題)

flat design的三大要素為:顏色、字體、icon

因為設計平面化,使用者對操作的理解來自於操作習慣以及介面呈現,因此在使用者設計上,會有一些不同的注意要點

  1. flat design大部份是用顏色,顏色這件事是很能夠展現出概念或想法,是要專業、開心或是…。在icon設計上的顏色亦十分重要,不能有發光陰影
  2. <<<字體>>>很重要!在挑選字體上面要多花一點心力,要依app內容來挑選適合的字型。沒有最好的字型,只有最適合。每個字型都有他的個性,能與app本身的性質做搭配,就是好的字型選擇。
    若是中英文並用的app也是會在融合上比較困難,需要花心思去調整
  3. 假設今天裡面沒有很多文字時,會看起來太簡單,所以若是在ios7時文字若小,可以多用圖片,更可以讓人印象深刻,不論讀起來或使用起來都會較突顯
  4. 按鈕設計:當按鈕不再仿真,設計者要怎麼讓使用者知道那是按鈕?符合視覺動線的擺放位置和大小、形狀、圖樣、顏色等等都是關鍵。
  5. 當畫面變簡單,UX就更顯重要了。操作手勢(滑動、長按、點、下拉等等)、每個動作得到的回饋(微微顫動、變暗、噗啾一聲…)種種細節都能讓app更豐富。當然,得在使用者熟悉的操作模式下,設法讓app的UX發揮到淋漓盡致。
  6. flat design不鼓勵太無聊的裝飾

Flat design 的挑戰與突破

在Flat design的時代裡,設計者的角色會更加重要。

visual designer要更常去討論這個設計是否能表達出產品的感覺,了解產品特性及想表達給使用者的感受,並且要能夠更精準的使用顏色、字體等元件去表達想表達的。這時後,是否可以做出簡單而能表達出產品特性的icon,便挑戰著設計者的功力。
要如何評斷好的設計呢?在設計時,還是得回歸a b test,訴諸實際數據,然後找出最能讓使用者接受的介面。

當產品要使用Flat Design,在做的工上會能夠減少,因為不需要一直去仿真、繪製很多效果。但是設計者會需要更高強的功力,精準的去以手勢、顏色、字體等元素,來強調出產品的特色。

IPhone元件介紹

表格視圖,文字視圖和Web視圖

  1. 狀態欄:狀態欄顯示與使用者裝置相關的重要資訊,包括電話信號強度,當前網路連接和電量資訊。
    螢幕快照 2013-08-26 上午1.14.48
  2. 導覽欄:導覽欄位於應用程式螢幕的上邊緣,在狀態欄之下。導覽欄通常會顯示當前視圖的標題,包含導覽控制元件,並在適當的情況下也可以包含作用於視圖內容的控制元件。
    螢幕快照 2013-08-26 上午1.15.53
  3. 工具欄:如果您的應用程式為使用者提供了一系列可在當前上下文中執行的動作,那麼您可以為使用者提供一個工具欄。工具欄的外觀要力爭與應用程式中的其它欄目的外觀保持一致。例如,如果您使用半透明的工具欄,就不要將它與不透明的導覽欄一起使用。此外,請避免在同一方向的不同螢幕中改變工具欄的顏色或半透明效果。
    螢幕快照 2013-08-26 上午1.17.07
  4. 標籤欄:標籤欄使使用能夠在應用程式的不同模式或不同視圖之間進行轉換,並且使用者應該能夠從應用程式的任何地方進入這些模式。
    螢幕快照 2013-08-26 上午1.19.50
  5. 在應用程式螢幕中使用視圖和控制元件
    螢幕快照 2013-08-26 上午1.21.38
  6. 表格視圖:裡面包含許多元素,並可以使用表格視圖實現常用的使用者操作。如:選項列表;導覽層次資訊;查看按概念分組的資訊
    螢幕快照 2013-08-26 上午1.23.11
    有幾個表格操作元素:
    1. 展開指示符:當這個元素出現時,使用者知道他們可以點選這一行中的任意位置來查看下一級的資訊,或是與當前列表項相關的選項。
      當選中一行後會顯示另一個列表時,應使用展開指示符。不要使用展開指示符來顯示某個列表項的詳細資訊;這種情況下應使用詳細資訊展開按鈕。
    2. 詳細資訊展開按鈕:使用者可以通過點選該元素來查看某個列表項的詳細資訊。在表格視圖中,可以在某一行中使用詳細資訊展開按鈕,來顯示與該列表項相關的詳細資訊。請注意,與展開指示符不同,詳細資訊展開按鈕所執行的動作可以獨立於行的選擇動作。
    3. 刪除按鈕:使用者通過點選該元素可以刪除對應的列表項。
    4. 刪除控制按鈕:使用者通過點選該元素可以顯示或隱藏每個列表項的“刪除”按鈕。
    5. 行插入按鈕:使用者通過點選該元素可以向列表中新增一行。
    6. 行排序控制元件:當該元素出現時,使用者可以拖動一行到列表中的另一位置上。
    7. 選定符號:該元素出現在列表項的右側,表明該項當前被選中。
    8. 開關控制元件
  7. 文字視圖
    螢幕快照 2013-08-26 上午1.29.31
  8. Web視圖:Web視圖是應用程式螢幕上可以顯示豐富的HTML內容的一片區域。除了顯示web內容之外,web視圖還提供了一些元素來支援使用者瀏覽開放的網頁。雖然您可以選擇向使用提供網頁瀏覽功能,但是最好避免讓您建立的應用程式看起來像是一個小型web瀏覽器。

應用程式控制元件

  1. 活動指示器:活動指示器表示有一項持續時間未知的任務或過程正在進行當中。(請參考UIActivityIndicatorView類)
    螢幕快照 2013-08-26 上午1.32.36
  2. 日期時間選擇器:日期時間選擇器為使用提供了一種簡單的選擇特定日期或時間的方式。(請參考UIDatePicker類)
    螢幕快照 2013-08-26 上午1.33.46
  3. 詳細資訊展開按鈕:詳細資訊展開按鈕提供了關於某一項的額外資訊或更詳細的資訊。(參考UIButton類)
    螢幕快照 2013-08-26 上午1.37.11
  4. 資訊按鈕(參考UIButton類)
    螢幕快照 2013-08-26 上午1.38.44
  5. 標籤:標籤是一種大小可變的靜態文字。(參考UILabel類)
    螢幕快照 2013-08-26 上午1.39.59
  6. 頁面指示符號(參考UIPageControl類)
    螢幕快照 2013-08-26 上午1.40.41
  7. 選擇器:選擇器是日期時間選擇器的通用版本,如果您需要顯示特別多數量的值,則您應該用表格視圖將這些值列出,而不是用選擇器。
    這是因為表格視圖俱有更高的高度,能夠更快速地進行滾動。(參考UIPickerView類)

    螢幕快照 2013-08-26 上午1.42.15

  8. 進度視圖:進度視圖顯示俱有確定持續時間的任務或過程的進度。如果您需要顯示未知持續時間的任
    務的進度,請使用活動指示器。(參考UIProgressView類)
    螢幕快照 2013-08-26 上午1.44.07
  9. 圓角矩形按鈕:圓角矩形按鈕是一種多功能的按鈕,您可以在視圖中使用它來執行一個動作。(參考UIButton類)
  10. 搜尋欄:搜尋欄是一片接收使用者輸入的文字的區域,您的應用程式可以以搜尋欄中的文字為輸入進行搜尋。(參考UISearchBar類)
    螢幕快照 2013-08-26 上午1.45.31
  11. 分段控制元件:分段控制元件是處在一條直線上的各段的集合,其中的每一段都相當於一個按鈕,可以顯示不同的視圖。(參考UISegmentedControl類)
    螢幕快照 2013-08-26 上午1.47.03
  12. 滑塊:滑塊允許使用者在允許的值的範圍內對一個值或一個過程進行調整。當使用者拖拉滑塊時,相應的值或過程也不斷被更新。(參考UISlider類)
    螢幕快照 2013-08-26 上午1.48.04
  13. 文字框:文字框是一個接收使用者輸入的圓角矩形的區域。當使用者點選文字框時,會出現一個鍵盤;當使用者點選鍵盤上的Return鍵時,文字框會以應用程式指定的方式處理使用者的輸入資訊。(參考UITextField類)
    螢幕快照 2013-08-26 上午1.49.26

用於工具欄和導覽欄的標準按鈕

有關這些按鈕的符號名稱和可用性的資訊請參考UIBarButtonSystemItem的文件。

IPhone人機界面指南(HIG)

中文版下載:iPhone-HIG(人機界面指南)
英文版下載:MobileHIG

HIG(人機界面指南)是apple在審核app時,給開發者去參考的條文,
只要想要在ios平台上開發app的開發者,在上架時,都必需同意自己的應用程式符合裡面的規範。
這也是app開發者在開發完APP後,常常會被apple退件的原因。
因此建議有志要開發iphone app的人可以在開發前先研讀一下這本規範手冊。

HIG將應用程式分類成三大類型

  1. 生產力應用程式:幫忙使用者管理資訊及完成工作。資訊是階層架構的,可以透過向下深入更多層級而瀏覽更多資訊。
    效率型應用程式一般採用多個視圖,通常每一視圖顯示一個層次的資訊。使用介面通常簡單,整潔且由標準視圖和控制元件組成。效率型應用程式通常沒有很多自定義介面。原因在於效率型應用程式專注於資訊和任務,而非環境或體驗。

    螢幕快照 2013-08-25 下午2.18.11

  2. 融入式應用程式:遊戲是典型的例子,這種應用程式使用非常客製化的介面,讓使用者與裝置互動,HIG對這種應用程式的規範比較不那麼嚴格。
    使用者的焦點在於視覺上的內容和體驗,而非體驗背後的數據。
  3. 工具應用程式:透過盡可能少的互動與組態設定提供使用者特定的資訊。這種APP通常比生產力應用程式有更多的介面且更加被要求要符合HIG規範。
    實用型應用程式俱有視覺上的吸引力,但是又能夠突出它們顯示的資訊。使用者使用實用型應用程式來查看一些事情的狀態或是查找一些東西,所以使用者希望能夠快速方便地看到他們感興趣的資訊。因此,實用型應用程式的使用者介面十分簡潔,並提供簡單的,標準的視圖和控制元件。
    實用型應用程式一般以平面列表的方式顯示資訊;使用者通常不需要深入資訊層次結構。實用型應用程式中的每一個視圖通常都提供同樣的數據組織結構和細節深度,但是數據來源可以不同。由此,使用者可以打開單個實用型應用程式以對多個主題進行相似處理。一些實用型應用程式能顯示打開的視圖的數量;由此使用者可以按順序瀏覽,在一個視圖後選擇另一個視圖。(例如下圖使用者可以用上一層的設定界面讓下一層的天氣資料顯示不同地區的資訊)
    螢幕快照 2013-08-25 下午2.31.31

開發APP時要注意的點

  1. 畫面比電腦小很多:應考量將複雜的畫面簡化
  2. 記憶體有限:因為ios的記憶體不包括磁碟交換空間,所以在app開發時要注意不能同時使用太高的記憶體,ios在記憶體不足時,也是會從耗記憶體最高的app開始關閉。
  3. 每次只能顯示一個視窗:不能同時瀏覽多個視窗,只可以依序瀏覽。
  4. 同一時間只能運行一個程式:因為當接電話、切到另一個應用程式等,現有的應用程式將被關閉。應要注意在使用者離開再回來時的畫面順暢度。
  5. 簡單易懂的操作說明

 人機介面準則

  1.  當使用者操作螢幕上的對象時,這些對象保持可見,並且操作結果是一目了然的。
  2. 讓使用者做出選擇,而不是要求他們進行開放式的輸入,這樣能夠讓使用者能夠集中精力通過您的程式完成任務,而不是疲於記憶如何操作。
  3. 如果有一個動作,使用者需要長時間的等待,應該回饋一個音效或圖案。在完成資料下載時,也應讓使用者知道動作已完成。應隨時回饋使用者,讓他能了解現在系統正在做什麼。
  4. 使用者控制:由使用者來觸發和控制操作
  5. 美學完整性:美學上的完整性並不是用來衡量您的程式有多漂亮,而是衡量您程式的外觀和程式功能結合得有多好。例如,一個效率型應用程式應盡量精簡裝飾性的元素並置於背景中,同時使用標準控制元件和行為以突出任務。

優秀iPhone應用程式的共性

  1. 簡單和易用性
  2. 顯而易見:您可以最大限度地減少使用者必須選擇的控制元件數量,並清晰地標識這些控制元件以便使用者明白它們的功能。
  3. 由上而下的佈局:使用者可以用手指或大拇指點選一個iPhone OS的裝置的螢幕。使用者傾向於用他們的非慣用手握住裝置(或擱在手心),用慣用手的手指點選裝置。當使用大拇指時,人們要麼將裝置一手握住,然後用大拇指點選,要麼將裝置握於雙手間,同時用兩根大拇指點選。
    無論用哪一種方式,對於使用者來說螢幕最上方都是最顯眼的。因此把最重要的資訊放在上方。
  4. 最大限度地減少所需的輸入:向使用者請求輸入時,考慮使用表格視圖(或選擇器)來代替文字輸入框。
  5. 簡潔地表達資訊:當使用者介面上的文字簡短而又直接的話,使用者就能夠快速地理解它。
  6. 為控制元件提供指尖大小的目標區域:一個簡單易用的使用者介面應該合理地分配控制元件和其他使用者介面元素,使得使用者能夠更方便地點中控制元件。
  7. 將重點放在主要功能上:確定在每個上下文中甚麼是最重要。
  8. 有效地溝通:避免使用技術性術語,讓使用者看不懂
  9. 適當的支援手勢:例如在表格list裡抓取使用者向右滑動的手勢,來顯示刪除功能。
    螢幕快照 2013-08-25 下午11.10.05
  10. 慎重地融合品牌元素:應該以一種低調的方式引入您的品牌的顏色或圖片