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

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

閱讀想法

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

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

重點筆記

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

  1. 合格的產品
    螢幕快照 2014-02-28 下午11.52.28
  2. 優秀的產品
    螢幕快照 2014-02-28 下午11.52.38
  3. 卓越的產品
    螢幕快照 2014-02-28 下午11.52.54

如何將設計商品化

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

使用者分析與研究

分析方法

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

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

範例:MP3播放器

  1. 定義產品功能:明確定義出產品要有的功能有那些
    螢幕快照 2014-03-02 下午9.49.53
  2. 繪製互動設計流程圖:
    螢幕快照 2014-02-28 下午11.46.40
  3. 繪製介面原型:最簡單的版面元件位置配置
  4. 視覺設計:先設定APP主要要使用的色彩有那些(先配色),然後再繪製介面細節

如何讓圖型介面更有創意

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

視覺設計的原則

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

制定設計流程

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

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

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

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的文件。