設計的心理學 – 行動的七個階段

相片 2015-4-17 上午10 01 25

這陣子看了一本設計心理相關的書《設計的心理學》,是 Donald A. Normand – 唐納.諾曼的大作,只要是從事介面或是使用者經驗的設計,應該多少都會看過他的著作 ,而這本書已經是第三版了,作者也不斷的修正及增加新的內容。這本書不太好閱讀,偏重認知心理學,理論與實務之間的結合,但為了把從書中學到的東西內化,我將裡面所提到的重要概念再透過自己理解的方式來進行說明與討論。

書中有提到幾個概念,可以運用在設計思考的過程,包含行動的七個階段,心理歷程的三個層級,及與其相互配合的七個設計基本原則。首先來談談行動的七個階段。

書中對於行動的七個階段的說明是:

  1. 目標:形成目標
  2. 計劃:選擇行動
  3. 制定:決定動作順序
  4. 執行:付諸行動
  5. 感知:知道事物的狀態
  6. 解釋:對感知的結果形成了解
  7. 比較:評估結果與目標的差異

action7-01

但這七個階段,除了「目標」外,其實可以簡單的理解成兩個部份:「執行動作」、「評估動作後的結果」,而在執行動作之前,使用者通常會有個目標,目標來自於主動(目標驅動)或被動(事件驅動)的目標,而使用者對於目標會存在基本的知識與認知。

對設計師而言,我們無法控制使用者的目標或事件,唯一能做的,是當使用者被目標或事件驅動時,如何透過設計讓使用者正確的執行動作,並讓這動作的結果符合使用者的預期。

而七個設計的基本原則,就是作者所提供讓使用者能順利完成任務的設計思考方向。

舉個例來說:某使用者 A,與朋友約好要去某餐廳吃飯,而在前往目的地的途中迷了路,於是拿出了手機,打開手機內地圖功能,輸入了餐廳地址,並透過導航的功能,到達目的地。

  • A在前往餐廳的途中迷路 → 設計師比較難控制的因素,在案例中使用者是被迷路的事件給驅動。
  • 手機的地圖與導航功能 → 設計師能透過設計來告訴使用者如何使用導航功能完成任務。

而在討論如何設計之前,要先清楚的掌握使用者的七個行動階段,並透過行動的拆解,來了解每一個行動的背後必須去思考待解決的設計問題,從上使用者 A 的例子來看:

  1. 目標 → 目標決定設計的情境,使用者 A 在前往餐廳時迷路。
  2. 計畫 → 拿出手機,並執行某個地圖 app。
  3. 制定 → 決定動作的順序,通常是下意識的,像是拿出手機、滑開解鎖,輕播畫面尋找地圖app,這一連串的動作,其實大多在使用者大腦中是下意識的行為,這關係到手機操作的「概念模型」。
  4. 執行 → 執行每一個動作,可能是「預設用途」,可能透過「指意」、「對應性」來完成一個動作。
  5. 感知 → 每個動作的結果,是不存在「使用局限」、有沒有正確的「回饋」,讓使用者感知到動作後的結果。
  6. 解釋 → 解釋行為後的結果,產生認知或情緒。
  7. 比較 → 比較目標與結果是否一致,產生評價。

從 A 使用者的例子,我們從行動的七個階段去思考並了解背後的問題;上述中「」的部份,也就是作者所提出的七個設計的基本原則,是設計師必須要去解決的問題,下一篇會針對七個設計的基本原則再說明。

行動的七個階段不是只用在解決介面的問題上,其實在任何的設計,背後的邏輯都是一樣的,根據本書作者的說明,七個行動階段能用來理解人類行為的基本架構。所以設計時,可以好好運用這個架構來思考每個設計背後的問題。

下一篇在針對七個設計的基本原則舉例說明。 歡迎討論。

廣告

iOS、Android 色彩透明度的標示方式

在繪製介面時,調整顏色的透明度 (transparent) 是一個很常用的技巧,好處在於:

1.減少灰階顏色定義

2.維持介面顏色的一致性

早期網頁設計還沒支持透明度的屬性時,設計師要自己調色,來控制顏色的明暗,所以會發現許多網站關於灰階顏色的定義,基本上都用過一輪,但其實這樣的方式比較沒效率,後續要維護也會比較麻煩。

在app的開發上,灰階的顏色通常會使用在字體與線條上,為了讓字體的閱讀更加舒服,內文字體不會使用純黑色(#000000),而會使用「灰色」來代替,但實色的灰色會因為背景色的不同,會讓app文字內容的易讀性有所差異。

transparent-01

上圖大概就可以知道為什麼要用帶透明度的黑色來取代實色的灰色,因為帶透明度的黑色,在背景稍深時,還是有比較好的閱讀性,如果是實色,字體就會被整個畫面給吃掉,不易閱讀。當然也可以多定義一個新的灰色,但那就是要多記一個顏色。

而在 Google material design  裡 Typographic 有提到文字透明度的設定說明:

trasparent

第二段提到,建議文字顏色對比至少 4.5:1 建議是 7:1,最後定義出 54% black 與 87% black,雖然我有試著去算出這兩個數字,但最後還是找不到一個合理的算法(求解)。(百分比可以依需求自己設定,這邊只是舉 google 的例子,但我還是好奇這兩個數字是怎麼算出來的)。

2015/04/28補充:關於 4.5:1與7:1 的數值可以參考w3c的規範

2015/08/12補充:這篇文章被轉載,這邊再補充一下對比值的檢查工具

至於透明度定義好,要怎麼提供給工程師,說明如下:

iOS

iOS 在給顏色的值,可以直接給 alpha(α) 值,也就是像是網頁 css rgba 的標式方式,最後的 α 值,給 0~1 之間 0 代表完全透明,1 代表完全不透明,因此在 iOS  的標示上不會有什麼問題。

Android

Android 就比較麻煩,因為要給 hex 的色號,之前花了一點時間理解透明度的 hex 換算方式;hex全名是 hexadecimal,也就是 16 進位,這是除了 rgba 外,另一個比較常見的方式,在網頁設計上也經常在使用(在色號上會給#符號的,就是使用hex的方式給色)。

通常不指定透明度時,給的 hex 值不含井字號會有六碼:例:「#aabbcc」,aa 用來控制紅色、bb 用來控制綠色、cc 用來控制藍色,如果要補上透明度,就要在 aa之前加上透明度的 hex 值。

之前為了透明度的問題,手動算換了 16  進位的透明度值,以下是 rgba 跟 hex 的概略的換算方式(不想算數學就直接跳到表格,因為算的事情交給電腦處理就好):

transparent-02

但後來才發現有人整理好了不同透明度對應的 hex 值。– stackoverflow,如下表:

  • 0% – 00
  • 5% – 0D
  • 10% – 1A
  • 15% – 26
  • 20% – 33
  • 25% – 40
  • 30% – 4D
  • 35% – 49
  • 40% – 66
  • 45% – 73
  • 50% – 80
  • 55% – 8C
  • 60% – 99
  • 65% – A6
  • 70% – B3
  • 75% – BF
  • 80% – CC
  • 85% – D9
  • 90% – E6
  • 95% – F2
  • 100% – FF

所以如果要提供帶有透明度的 hex 值,就直接在 hex 值上的最前面,加上透明度的 hex 值就行了。在標示給工程師的文件中,就可以直接提供帶有透明度的 hex 色碼,例:「#cc000000」,我想工程師看到你如此貼心,應該也會挺開心的。

結綸

這篇的重點,其實是在強調,在繪製 app 時,字體與線條的線色盡量使用帶有透明度的黑色,而不要直接指定實色的灰色(如果是要那種紅底綠線、藍底黃色的特殊需求,不在此討論範圍)。

這也是我之前在做 app 時,因為定義太多不同的灰色,常常困擾我的問題,有時我也搞不清楚那個背景要用那個灰色,所以到最後每個位置的灰色定義都不一樣,維護上也就更加麻煩,你會發現工程師會一直跑來問你這個字體要什麼顏色…。

而背景色,建議還是以實色為主,因為每個 app 都會定義自己的主、副色,背景色如果用有透明度的顏色,不小心的話,有時會影響主色與副色的使用,但這是依 app 的需求取捨。

上述的說明,是基於白色的背景做為說明,如果是以深色的背景為主,那可以用白色帶透明度的字體顏色也是一樣的效果。

關於色彩的定義,可以參考這篇文章:

RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了 – CSS可樂

有任何問題,歡迎討論!

介面設計實用工具整理

工具不在多,在於精。 不定期補充,歡迎推薦!

Android


iOS


AI

  • Cadtools – HotDoor  || 標示工具(付費軟體,google大神求解)

PS


Tools


免費素材資源


wireframe tools

  • justinmind || 好用的wireframe 工具
  • axure || 網站、app,架構 pm 必備工具

Prototyping – 基本

  • invisionapp || 簡易,未付費只能用一個專案
  • pop || 台灣團隊的作品,未付費能使用兩個專案

Prototyping – 進階

  • origami || 這套後面是facebook的團隊在開發維護的,但要有程式基礎
  • pixate || 比origami易上手,被google收購,免費開放使用!
  • hype 3 || 免程式碼   Akane Lee 推薦~
  • principle || 新推薦!

推薦部落格


 

一些對岸的教學網站

台灣加油啊!

APP切圖的命名方式

關於切圖的命名方式,基本上沒有什麼固定的規則,但就我個人的經驗,切圖命名是一件很重要但很麻煩的事,一個 app 的開發,可能有數十張甚至百張的切圖,還要依不同解析度去做切圖,所以命名一定要清楚、一致、能擴充,否則之後會很難管理。

關於切圖的規則,有幾點必需要注意:

  1. 全部英文小寫
  2. 請以下底線做區隔 例: btn_navi_share_disable
  3. 輸出的檔案格式必須是.png
  4. 圖片請保留透明底,讓元件的小大一致。(下面有說明)
  5. ios依解析度會有@2x、@3x的圖片,而android會依解析度存成mdpi、hdpi、xhdpi、xxhdpi…等不同資料夾。

關於第 4 點要說明一下,保留透明底,在切圖的時候,不要依照 icon 的形狀做切圖,因為每個 icon 的高度、寬度都會不一致,不好對齊、標示,此外,如果圖片是可以點擊的,那點擊的範圍大小也會不一樣,這對工程師與使用者都會造成困擾,如下圖。

slice_exam-01

 

切圖工具

在沒有切圖工具時,切圖是設計師的惡夢,尤其是 Android,同時要做 hdpi、xhdpi、xxhdpi…簡直要命,還好這世界總是存在希望的,有人就開發出好用的切圖神器,我使用的是 cut&slice me 這套 photoshop 的 plugin,這套 plugin 可以快速的切圖,同時會依照圖層名稱來命名圖片名稱。

Cut&slice me 2.0版本還在開發,所以目前不支援 ios@3x 的切圖,同時 Android,只支援到xxhdpi(3倍)的解析度, 至於其他切圖軟體,大多要付費,但就實用性來說,花這點錢非常值得啊!! 否則切圖真應該獨立出一個專門的職缺才是!

 

切圖流程

我個人的開發習慣,是在 ai 設計完稿後,將所有要切的圖片丟到 ps,統一在 ps 做管理,我是做大縮小派的,所以丟到 ps 之後不用再重新放大,切圖軟體會要求提供最大尺寸 (You have to design for the highest resolution.-cut&slice me),然後執行時會自動轉成不同解析度的圖;但要注意的是,丟回 ps 的時候,我會儘量保留「向量圖智慧型物件」,以便之後重覆的修改或使用。

 

切圖的命名規則

Cut&slice me 會以圖層名稱做為圖片檔名的命名,所以命名的規則很重要,好的命名方式,一眼就能知道這張圖是用來做什麼的,跟在管理網頁 css 的道理是一樣的。

所以我根據自己的工作經驗整理出來一些規則提供參考,但未必要用這樣的方式,一切看個人習慣或工程師的要求來做調整。我提供的規則是:

誰_在那裡_長什麼樣子_在做什麼_什麼時候

  • :也就是構成畫面的元件,btn(button)、ic(icon)、bg(background)、…等等,通常放第一順位,通用性很高,整個app都可使用。

  • 在那裡:這元件在那裡使用的,可以用app的架構,例如:stat(status bar)、tools(tools bar)、side(side bar)、tab(tab bar)、ctn(content)…等,如果沒有特定的位置,我會取名com(common)或不要命名,通常會是共通的元件。

  • 長什麼樣子:形容這個元件的樣式:例如:方向、顏色、品牌…等。

  • 在做什麼:元件主要作做用,分享、收藏、編輯、開關…等等。

  • 在什麼時候:也就是狀態,例如:按鈕會有:normal、pressed、actived、disable這幾種狀態,但如果沒有特別的狀態,也可以用數字來表示。而slice&cut me 在圖層管理時加上「@BTN」 就會把所有按鈕的狀態給設定好,超貼心的~

簡單舉個例子,例如我要在 navigation bar 上做一個 fb 分享的按鈕,我圖片的命名可能就會是:

btn_navi_fb_share_normal/pressed/disable

這樣的命名方式,資訊應該夠充足了,從名稱就可以大概知道這張圖片是用來幹嘛的,所以之後要換圖或是新增圖片,都會比較好管理。

以上是我的命名建議,但依照不同 app 的需求,命名的方式也應要有所調整;此外,app 的開發能夠支援的樣式愈來愈多(圓角、陰影…等等),而且目前主流還是以扁平化設計為主,不像以前要做擬真化的設計,所以如果能夠用程式解決的,跟工程師好好溝通,儘量用程式解決,這樣也比較不會有解析度或尺寸的問題。

如果有更好的命名方式,也都歡迎討論~

介面設計時使用的繁體中文字體 for Android

關於 Android 的介面設計,在前幾篇有提到相關的製圖環境設定:

如何在illustrator 上設定Android的製圖環境

而這篇主要介紹如何在 Android 系統模擬繁體中文字體環境, 與 ios 亦同,在中文字體部份沒太多選擇,雖然 Google 與 Adobe有一起開發出開源字體 (Noto CJK),但就目前在來看,原生 Android 的預設中文字體似乎還是只有一種, 加上各家廠牌手機都有自行開發基於 Android 系統的介面,例如:Htc 的 sense、小米的米 ui…等等,所以各家廠牌的手機顯示出的中文字體也不太一樣,而使用者也可以透過軟體來更換系統字體,但這篇不針對其他客製化的字體做討論。

在Android的中文繁體原生字體是DroidSansFallback,只有這個字體可以用,所以我就用這個字體當作說明的標準。

DroidSansFallback  (for windows,mac可以抓回去自行測試,ttf 檔)

這個字體的結構與對岸的文泉驛微米黑相同,根據我的找到的資料 DroidSansFallback 應該是文泉譯的團隊跟 Google 團隊一起開發的,而繁體字是直接轉自簡體字,所以有些筆劃是對岸習慣的比劃,相關文章的討論可以看這篇:

GB 18030 就在你身邊 – justfont

android_font_size-01

上圖是兩種字體的比較,相同的字級下看起來差異不大。而在 Android 的開發環境,字體的單位是 sp(Scaleable pixels),有點類似 dp,但就記得字體的單位是 sp 就好了,單位相關的文章最近 Google Material Design 也有釋出相關的設計說明:

Units and measurements – Google Material Design

以下是我在繪製 Android 會注意到的事項:

1.中文字體大小至少12sp

Android 中文字體最小就是 12sp,小於 12sp,根據我找到的資料可能會出現錯誤。stackoverflow

2015/04/20補充說明:
根據網友的補充,字體可以小於12sp,但會出現錯誤提醒,並非無法設定小於12sp的字體。
同時再附上android 按鈕樣式產生器:Android button maker – Angrytools.com

2.依不同的開發環境同比例放大

前面幾篇我有提到我是屬於做大縮小派的,所以我不會以1dp=1px做為開發環境,通常是1dp=3px來做為android的繪製環境。

所以根據我測試的結果,在 3 倍的尺寸下繪製介面(1920px*1080px),字體大小我會x3,例如:12sp 的字要用 36px,14sp 的字要用 42px,以此類推。

android_font_size-02

上圖是我針對不同的 dpi所整理出來的 sp 與 px 之間的轉換,但根據我的實際操作結果 (htc m7),還是會有誤差,真正 app 的字體會略小於設計時所模擬出的畫面的字體約 1sp,也就是說如果我要完全符合我預想的字體大小,所有的字體在設計標示時,要再加 1sp,例如:在 480ppi 的製圖環境下, 36px 的字體在設計稿上,本來是要標 12sp,為了符合大小,會標 13sp,以此類推。

3.粗細的設定

關於粗細的設計,我不太確定(歡迎指正),根據我的測試,中文字體可以設定 Light 與 Regular,但粗細實際比較下,沒什麼改變,但如果在 Regular 的字體下再設成 bold,會略粗。但我通常不會再針對粗細做設定,Regular 的粗體我認為太粗,不好使用。

4.字體的可用樣式

字體的可用樣式不多,基本上就是:顏色、透明度、陰影、背景色,大概就這樣,互相搭配使用,雖然只有一種字體,也是可以有九九八十一種變化呢!

5.請設定好字體的使用規範

其實就是跟網頁一樣,h1~h6請定義好,內文、連結、標籤…等等,定義好在不同情況上字體的使用方式,這在往後要做標示或是重新設計,都會有所幫助。

以上是我針對Android界面設計繁體中文字體環境模擬的建議,當然這些規則都會因為新的技術有所調整,例如新的 Noto 字體的開放使用等等,介面設計沒有一定的方法,所以如果有更好的方式,也歡迎討論。