APP開發 – Claire's Blog

UI進化論-行動裝置使用者介面設計

此文為閱讀此書的讀後心得：http://www.books.com.tw/products/0010471021

閱讀想法

這本書算是為專業的產品設計師所寫的，會講到許多有關於如何管理一個專業的設計團隊、制定開發流程、設計師頭銜討論，以及設計師如何訓練自己的藝術感等。並且也有說到一些相關電腦知識，例如掌上型行動設備的基礎知識之類。主要是以設計師的角度，去探討該如何去成為一個產品經理，然後開發一個產品。

也因為此書完全是以設計師角度去撰寫的，我是程式師，以想了解怎麼設計行動裝置的角度去看此書，很多地方會因身份角度不同而較無意義，不過或許對於設計師而言是一本很有意義的書。

重點筆記

使用者如何看待產品：這邊告訴我們使用者會怎樣看待我們的產品

合格的產品
優秀的產品
卓越的產品

如何將設計商品化

做市場需求的觀察：包括人口特徵、使用行為、利潤潛力、價值觀、需求、動機、購買因素、態度、產品使用場合、地理位置
使用者研究：目標族群的身份、使用場合、怎樣會讓使用者感覺這是個好商品、為使用者和產品間建立感情的聯繫（例如遊戲打寶，因為有感情因素，使用者會願意花時間去練功）、觀察使用者想買這個APP的目的，要能符合他們想像中的目的。
研究目標市場的文化內涵

使用者分析與研究

分析方法

當我們想要做一個行動介面的產品設計圖，除了美術的畫面及色彩設計外，對使用者的分析及研究也非常重要，這一篇是這本書裡我覺得最喜歡的，它提供我們怎麼去設計一個行動介面的動線的方式。在此介紹如下：

任務分析法：把特定的任務分成好幾個階段，先想好自己的APP想要提供給使用者那些功能，然後把特定的功能分解成多個步驟。例如像穿襯衫，可以分解為：雙手抓住襯衫領子>把襯衫披在肩上>右手穿進袖子裡，從袖口伸出>左手穿進袖子裡，從袖口伸出>把後襟拉平>把左右門襟對齊
這邊也列出一些心智模型工具：物理符號系統、諾爾曼模型、流程認知模型、SOAR模型、心智的社會模型、動力振盪理論模型、大腦協調學。
情境設定法：要包含角色和劇情。如在那邊、發生什麼事、怎樣的狀況下會想操作系統，不同情境下會需要不同的設計。例如會議中，靜音模式就很重要，或是在家裡，那就要有輕鬆、方便的感覺。
社會性研究法：研究一些社會的事件影響產品的事件。例如使用者的使用心得影響銷售的狀況、或是被影響等等。理解不同地域、文化背景、社會環境中的介面風格。

範例：MP3播放器

定義產品功能：明確定義出產品要有的功能有那些
繪製互動設計流程圖：
繪製介面原型：最簡單的版面元件位置配置
視覺設計：先設定APP主要要使用的色彩有那些（先配色），然後再繪製介面細節

如何讓圖型介面更有創意

更人性化
情感化因素不可忽視：應該要從美學本能和功能主義的瓶頸中跳脫，營造一種感覺，這種感覺能讓使用者把產品和品牌連繫在一起
互動特效的引入
產品=體驗=品牌
臨場的體驗決定購買意願

視覺設計的原則

介面清楚明瞭
讓機器幫助記憶，減少短期記憶的負擔
依賴認知而非記憶。例如列印圖示的記憶等
提供視覺線索
完善的視覺清晰度
介面的協調一致：如手機介面的按鈕排放、左鍵肯定右鍵否定或內容擺放位置
色彩與內容：整體設計不要超過五的色系，相近的色系表示相似的意思

制定設計流程

在本書的最後幾章一直在強調設計流程的重要性，其實這有點像程式開發的流程圖的設計師版本…XD

大概就是在強調一致的設計產出流程對設計師而言很重要，可以確保多個產品間的一致性，也可以提高產出效能。總而言之和程式的開發流程方法有點像。流程大概會劃分為十個步驟：

制定流程
確定工作內容
圖示風格：這本書前面有提到在設計圖示的風格上，可以分為兩個部份的會議去討論（也就是3與4）。
第一次的會議採用Brainstorming的方式，Brainstorming的討論方式其實和這篇的原則類似，總之就是不要特別限定某種想法，讓點子越多越好，讓所有人發表所有他們所想的到的可能風格和idea，不去評斷idea的優劣，所有的討論內容越自由越好，隨意的讓點子發想。在會議之後，讓各個設計師去分別設計自己想要的圖示風格及理念想法
首次檢查：展開討論設計方向、設計師闡述設計概念、第一次設計評審會議。
然後第二此的會議則和第一次完全相反，由某個人去引導會議，並且由每個人提出前一個會議中提出各個點子的優劣，並由主導者來決定以那個圖示為主。
介面風格：定義色彩、解析度、關鍵介面數量、介面元素、通用性等
互動特效：定義合適的互動效果、思考如何更好的表現互動模型、視覺化介面風格、並要考慮最終實現的難度
介面設計：設計師分別獨立完成
準備演練展示
互動模型：例如用flash去做一個demo檔案
最終提案：最後決定要用那一個介面

套件管理工具CocoaPods介紹

這是1/9的cocoaHeads裡，SuperBil分享的套件管理工具。
之前小岡也有和我推薦過這個工具，當時沒有去深入研究如何使用。
這次與會完後，便開始試著學習使用這個管理套件。（裝完後心得：天呀！實在太好用了！必裝～）

分享資料

投影片：做自己的可可豆夾
錄影檔：CocoaPods

CocoaPods介紹

CocoaPods是一個管理套件的工具。

過去在開發app時，如果我們想要用一些第三方的Library，通常會要到GitHub下載專案到本地端，然後把它載入專案裡。這樣如果套件有更新時，都要手動更新，若是不同版本的ios要用到不同的library，又要手動去管理，會比較麻煩。

並且如果是直接把原始碼放到專案裡，會很容易和自己寫的code混在一起，管理和瀏覽都會較為困難。

CocoaPods就是用來管理這些第三方套件，使用CocoaPods之後，專案會變這樣：

螢幕快照 2014-01-12 下午4.48.50 — 要改成點選GourmentGroup.xcworkspace開啟專案

螢幕快照 2014-01-12 下午4.44.44 — 下方會多一個Pods的套件資料，裡面放的是所有使用到的套件

安裝方法

這篇文章有非常詳細的方法：CocoaPods

比較要注意的是，我今天在安裝時，因為Podfile檔案所使用的編碼錯誤，會出現如下錯誤

incompatible character encodings: ASCII-8BIT and UTF-8 cocoaPods

1	incompatible character encodings: ASCII-8BIT and UTF-8 cocoaPods

後來我雖然把檔案改成utf-8，還是一直跑出同樣的錯誤。
後來才發現，如果有錯誤，要先把終端機關掉再打開，才會再一次執行。

接下來，如果要更新Podfile，到終端機打入

$pod update

1	$pod update

就可以了！

投影片另外有講到podSpec，如果有在cocoaPods裡面沒有包含的Library
（現有的Library可到http://cocoapods.org/去輸入函式庫的名稱找有沒有現有的）
如果沒有的話（或者是自己製作的Library），就可以自己去寫spec
這邊有教學：Specs and the Specs Repo

參考資料

投影片分享

Auto layout in i os 7 from Claire Chang

過去的作法…

使⽤用frame和bounds去決定物件的位置和⼤小。
使用autosizing masks
1. 設定當畫⾯面⼤大⼩小變動時,要固定那些值(struts)。
2. 在view的⼤大⼩小改變時,可以偵測 super view的⼤大⼩小改變去改變物件的寬和⾼高的值(springs)。

AUTOLAYOUT和AUTORESIZING MASK的區別

Autoresizing Mask是AutoLayout的⼦子集。 AutoLayout更多的功能

指定任意兩個view的相對位置
可指定⾮非相等約束(⼤大於或者⼩小於等)
可以設定約束的優先級

WHAT IS AUTO LAYOUT

一種基於約束的,描述性的佈局系統。   Auto Layout Is a Constraint-Based, Descriptive Layout System.

基於約束 – 以所謂相對位置的約束來定義的
描述性 – 使⽤用接近⾃自然語⾔言的⽅方法來進⾏行描述
佈局系統 – 設計界⾯面的各個元素的位置。

使⽤用約束條件來描述佈局,view的frame會依據這些約束來進⾏行計算。
Describe the layout with constraints, and frames are calculated automatically.

影片分享

在Windows下產生.p12及.mobileprovision

在 Windows 產生憑證簽名要求

對 Windows 開發人員而言，最簡單的方法是取得 Mac 電腦上的 iPhone 開發人員憑證。不過，他們也可以在 Windows 電腦上取得憑證。首先，使用 OpenSSL 建立憑證簽名要求 (CSR 檔)：

在 Windows 電腦上安裝 OpenSSL (移至http://www.openssl.org/related/binaries.html，或直接在此下載openssl-0.9.8k_X64)。
開啟 Windows 命令工作階段，然後使用 CD 命令切換至 OpenSSL bin 目錄 (例如 c:\OpenSSL\bin\)。在命令列輸入以下命令以建立專用密鑰：

openssl genrsa -out mykey.key 2048

1

openssl genrsa -out mykey.key 2048

儲存此專用密鑰。您稍後將會用到它。使用 OpenSSL 時，請勿忽略錯誤訊息。OpenSSL 即使產生錯誤訊息，可能仍會輸出檔案。但這些檔案可能無法使用。如果發生錯誤，請檢查您的語法並重新執行命令。
在命令列輸入以下命令以建立 CSR 檔：

openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=yourAddress@example.com, CN=John Doe, C=US"

1

openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=yourAddress@example.com, CN=John Doe, C=US"

以您自己的值取代電子郵件地址、CN (憑證名稱) 及 C (國家/地區) 值。

至APPLE申請.cer檔案

至https://developer.apple.com/membercenter/index.action以開發者身份登入。
選擇Certificates, Identifiers & Profiles，如下圖
選擇Certificates
接著按右上角的+
身份選【iOS App Development】
在最後會要求上傳.certSigningRequest，選擇剛剛在【在 Windows 產生憑證簽名要求】所產生的檔案，按確認。
下載.cer檔

將開發人員憑證轉換成 P12 檔案

將從 Apple 收到的開發人員憑證檔案轉換成 PEM 憑證檔案。從 OpenSSL bin 目錄執行以下命令列陳述式：

openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

1

openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM
現在可以根據 iPhone 開發人員憑證的密鑰及 PEM 密鑰，產生有效的 P12 檔案：

openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

1

openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

產生.mobileprovision檔案

首先先產生一個APP的ID(已註冊過1~2項可跳過)，選左側的”Identifier=>App IDs”，註冊一個APP的ID。
填寫你要做的APP的前置字等識別，若是只想練習則選”Wildcard App ID”，然後Bundle ID填入”*”
接著註冊你的測試機(已註冊過3~5項可跳過)，再選左邊側欄的Devices=>All，新增開發機的UUID
打開iTunes，連接iPhone，打開摘要頁，點紅框處的序號一下，會變成顯示UUID，把它記下來。
回到網頁，把上面的UUID填入下面UUID那欄，並且為這隻手機取個名字
現在要去產生.mobileprovision檔案。點選左邊側欄的”Provisioning Profiles”，接著按右上的+號新增一個Profiles
身份選擇【iOS App Development】
App ID選擇剛剛所產生的ID
選擇剛剛產生的certificates身份
選擇要測試發佈的手機
為這個發佈設定命名
下載.mobileprovision檔案，完成。

在Flex裡設定發佈檔案

在專案點右鍵，選Properties，在此選擇要使用的檔案

UITableView的小問題

紀錄一下今天開發我的APP時遇到的小問題，
因為要使用UITableView，發現UITableView放在UIView裡時，
若要使用static cells是不能直接使用的。

當我們要用UIView，裡面有放一些自己的東西，再加上一個Static cells的UITableView時，
會發現雖然在storyboard裡能夠正常的顯示表格的樣子，如下圖

但是當執行出來卻無法顯示已設定好的static cells，而會顯示為一片空白，如下圖

查問Google大神後，在這邊有看到文章有相關的建議，也就是要我們不要實作下面這三個方法

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

}

不過，我檢查過後，我並沒有設定這三種方法，但是還是一樣無法正常顯示定義好的static cells，
最後這篇文章解決了我的疑問：How do I put a UITableView into a UIView
原來，我們不能夠直接在UITableView裡直接使用static cells，
如果必需在static cells的畫面裡加上其他元素，則應該要在該位置放入Container，然後Container連接至UITableViewController畫面，
如下圖：

這樣子便能夠正常的顯示在storyboard裡設定的static cells的樣式了！

PS:這邊有Container View與母容器互動的範例文章與範例專案

Claire's Blog

分類: APP開發