介面設計Prototyping 淺入淺出

關於prototyping(原型)設計,前陣子剛好在hpx的活動中有簡單的分享自己prototyping的經驗與想法,而這幾年也越來越多新的prototyping工具,對於介面設計師來說是喜憂摻半,喜是又有新的工具可以玩,憂則是又要花時間學新的工具,而且那麼多工具到底要如何選?而且也很難保證這些工具是不是能夠一直更新下去,如果停止更新那不就白花時間了…

其實每個工具都各有優缺點,但就目前的共識是,一個理想的prototyping工具,必須是容易被整合到介面的開發流程,同時又要能用來達成有效溝通的目的;而「溝通」與「體驗」就是prototyping的本質,如果兩者都能兼具,那就是一個合適的prototyping工具了。

Prototyping工具的興起

介面設計的prototyping工具是從擬真(skeumorphism)轉扁平化(flat design)設計風格的過程中逐漸興起,加上Google的Material  Design的發展,也讓扁平化設計成為介面設計的主流,早期的prototyping工具比較沒人討論是因為製作的門檻太高,擬真的設計不好做prototype,設計師用盡洪荒之力刻完這些擬真的畫面早已無力,根本沒有時間再來做prototype,頂多就mock up讓「客戶」或「老闆」用想像力去感受一下,但這樣的溝通效果當然不會太好。

介面扁平化後,prototyping工具也越來越多,從簡單的pop、invision、marvel,到複雜的origami、framer.js、AE…等等,每種工具都各有提倡者,設計師頓時陷入「我該挑什麼工具來做prototype?」的抉擇中,但比較能確定的是,prototyping在開發產品的流程中越來越重要,因為越來越多的prototyping工具都已整合到介面設計的流程中,加速prototype的實現可能,不但可以提前體驗產品的概念模型,同時又能快速的修正體驗,提高團隊內部的溝通效率,雖然會因此加重介面設計師的工作,但是透過客製化的介面元件包(UI kit),也能讓其他人快速的組合畫面,只要有心,就連公司櫃台的接待小妹,都可以一起prototyping,就如同當天另一個講者所說的,prototyping應融入組織文化,鼓勵團隊內外的成員都要勇於試錯,找出最好的介面操作模式。

每一個Prototype就是概念模型

概念模型的說明,我在前幾篇文章中有提到,將prototype拿給用戶進行測試,其實就是要檢視設計師所呈現出來的概念模型,是否符合使用者的心理模型。唯一要注意的是,設計師往往也是產品的使用者,容易用自己的心理模型去刻化用戶的心理模型,雖然很難避免,但在幾次的用戶測試後,就能體會兩者間操作上會存在明顯的差異。因此我們需要做prototype來refine操作流程。

Prototype在工作流程的位置

設計流程

上圖是一般介面設計開發的線性工作流程,在不同開發階段的參與人員不同,產出物也不同,其實在草稿階段,就可以開始製作prototype了,只是這邊的prototype通常會是「紙原型(paper prototype)」,是用來內部溝通討論用,也就是我們常說的low-fi(low-fedelity)低保真原型,這也是一個蠻有趣的階段,因為可以在這個階段看到其他成員不同的心理模型。但切勿拿這個原型讓用戶做易用性測試,因為「不準」,一般用戶的想像力有限,在這個階段做易用性測試意義不大。

而通常我們在草稿階段完後,接續的工作就是請企劃/pm來製作框線稿,同時介面設計師也可以開始定義產品視覺,當框線稿完成後,大致的ui flow確定,開始就可以請介面設計完稿視覺稿,接下來的prototyping就是refine流程的階段。

Prototyping 工具的選擇

前面有提到,prototyping的工具,很多都已融入介面製作的流程,又以mac的sketch支援性最高,通常在介面繪製完成後,prototype大致也完成了。我比較常使用的是invision,因為它提供的套件craft,目前有提供測試版的prototyping工具 ,透過拉線的方式,就可以將介面串成一完整的操流程。
其他的推薦工具可以參考這個網頁:
http://uxtools.co/#/

其他比較複雜的prototyping工具,像是principle、framer.js、origami、AE…等等,強調的是更多細膩的動畫轉場效果,但學習成本、時間成本相對也較高,當然有些工具的程式碼可以延用(framer.js、origami),但對於講求快速迭代的產品,其實不是那麼適用。但好的UI motion的確是可以讓用戶印象深刻,但也是要有足夠的時間讓工程端能夠配合製作。

另外對岸中國的介面設計也蠻活躍的,開發出不少好用的prototype工具,有熱心的對岸網友推薦我墨刀,有興趣的朋友也可以試試這套工具:
墨刀

Prototyping 的一些技巧

製作客製化ui kit

UI kit對於介面設計師來說應該更熟悉不過,通常有製作介面設計時,某些軟體像是sketch,都會提供內建的UI kit,可以加速開發。製作一份共同的UI kit,讓團隊的其他成員也可以參與prototyping的過程,其實也是一個很好的溝通方式。像是prott這套軟體,有線上支援客製化的UI kit,在溝通上會有很大的幫助。

製作灰諧稿的Prototype

如何從prototype去觀察用戶是否「理解」產品,建議用灰階稿取代彩色稿,比較不容易會有顏色的干擾效果(stroop effect/史楚普效應),通常每個介面上都會有所謂的CTA(call to action;行動召喚 ),顏色會比較明顯,所以用戶容易發現,但如果排除顏色,用戶是否還會知道自己要去點選什麼區塊?我們來看看幾個測試:

連連看:找出相同顏色的文字

由上圖的測試可以知道,對於視覺正常的人來說,上色後的文字(B)可以加速判斷。再來看下圖:

2016年8月25日 12-16-03
任務:找出含有abcde文字的區塊,並將他連線起來。

上圖可以知道,視覺正常的人在區塊有上色的條件下(B),判斷的時間不用一秒,但重點是,第四欄上色的區塊是adcbe不是abcde,是故意上錯色的,這是要反應大多的用戶在操作介面時是沒耐心的,通常會無意識下被介面引導,這是介面設計師需要謹慎思考的事情。

介面設計是引導,而不是選擇

因此,如果要測試用戶是否正確理解產品,排除顏色來增加用戶思考並理解產品的時間,可能會比較準確 。

不同的路徑相同的結局

在prototyping時其實可以製作多點擊區讓使用者測試。但在時間的限制下,有時候我們只會測試一種路徑一種結局,也就是一個prototype只能測一種流程,其實有點可惜,或許一個prototype至少有3~4種行為路徑,但可以導向一個行為結果,會比較符合用戶真實的操作體驗。

轉場動畫的意義

大多的prototyping 工具,都會提供一些預設的轉場動畫,但要注意的是每一個動畫都有意義,像是移動或淡出淡入的方向,其實都有跟操作的流程有關係,這要特別注意一下。

motion
返回(back)跟關閉(x)的轉場動畫應該要不同。

結論

製作prototype其實就是要早一步驗證產的概念模型有沒有問題,而在現有的軟體支援下,要製作高保真的prototype不是難事。所以早一點將prototype的步驟、流程規劃好,對往後的產品迭代時,肯定會有很大的幫助。

另外如果有個好的想法,但卻不想太早進到開發,其實製作高保真(hi-fi; high fidelity)的prototype也是很好的方法,與其花時間開發不確定用戶是否會使用的功能,不如花多一點製作多一點高保真的prototype來溝通討論,早一步驗證產品的可行性,再進行開發,比較不會浪費時間與人力成本,因此prototype在往後的設計流程裡,會越來越重要,有遠見的公司應該要多hier幾個介面設計師才是。

廣告

介面設計實用工具整理

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

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 字體的開放使用等等,介面設計沒有一定的方法,所以如果有更好的方式,也歡迎討論。

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

使用illustrator繪製介面的人不多,而且網路上可以參考的文章也很少,記得我第一次接觸到介面設計時,公司交接給我的是一份又一份的紙本文件,所有的標式方式都是以人工的方式進行標示,因為頁面很多,有時會由不同人來進行文件標示,每個人標的都不太一樣,最後刻出來的介面就得經過不斷的修正與調整。

為了統一標示,所以我找了很多文章,但大多的文章頂多跟你說明一些像素原理,還有單位的轉換,真正教你怎麼設定或怎麼標示的文章不多。

於是,我只好自己摸索。與工程師溝通後,也找到一些比較好的製圖的方式,這篇文章我主要說明如何在illustraor 上設定android的製圖環境。

基本上,繪製android的介面前,我先大略解釋一下什麼是px(pixel),什麼是ppi(pixel per inch)跟dpi(dots per inch),當然有很多文章可以參考,如果己經了解,可以直接跳過,看我最後的設定。

  • 像素(px)

    大家都很熟悉,就是電腦上圖片所顯示的單位,我們常常說的,圖片是1920px*1080px ,指就是以像素做為單位。

  • 每英吋像素(ppi)

    指的是每一英寸上有多少像素,而我們一般在看螢幕的細膩度就是在看這個單位,每一隻手機的尺寸都不相同,所以ppi是一個比較各家手機畫面細緻度的一個「物理標準」。而ppi是用螢幕對角線的長度所計算出來的,所以各家手機廠商的長寬比不同,計算出來的ppi也就會不一樣,這裡只要記得一個原則就好,在相同的解析度下,手機的尺寸越大,ppi就越低,簡而言之,ppi就是螢幕像素的物理密度。舉個例,htc m8的手機尺度是5吋,m7是4.7吋,一樣是1920px*1080px的解析度,誰的ppi高?  答案是m7。

  • 每英吋點(dpi)

    指的是每一英吋上有幾個點,而點(dots)是什麼? 看指的是什麼。也就是說,如果有人跟我說dpi,我必需要知道他講的是什麼的dpi,dpi是需要被定義與指定的,例如印刷與螢幕對於dpi的需求也就不同,印刷至少要300dpi,而在螢幕的圖片只需要72dpi就夠了。而在電腦或手機的螢幕上的1dot=1px的條件下,ppi跟dpi指的相同的事情。

就是因為每一家andorid裝置的尺寸都不太一樣,所以google必需制定一個標準(前面所提的dpi需要被定義或指定),規定以160dpi為基礎,往上延申尺寸,也就是說在每英吋160點的條件下,1dot就等於1px,此外以「獨立像素(dp)」做為開發andorid介面的單位,請參考下圖。

andorid_size

http://developer.android.com/design/style/devices-displays.html

而身為一個介面設計師,最想知道的是,到底要用多大的尺寸來繪製介面?因為在電腦上是以px作為單位,而andorid是以dp作為單位,1dp到底要等於多少px是我們在意的事情。

http://screensiz.es/phone

這個網站有提供相對的倍率做為參考,px density的倍率就是大略的比率, 300%指的就是1dp=3px,如果不想深究(我想大概也不需要花太多時間去深究),就以這個比例下去繪製,誤差會很小。

以上如果都看不太懂也沒關係,就照我下面的設定下去畫就對了

  1.  以1920px*1080px作為繪製尺寸

    而我個人的習慣,我會以1920px*1080px,作為繪製的尺寸,因為這個尺寸是主流的高階手機規格,從4.7~6吋的螢幕目前都是以這個尺寸為主,想知道自己的手機是什麼尺寸,就直接截圖,丟回電腦看就知道了,就目前的手機來看,大概都是這樣的尺寸。

  2. 將cadtools的比例設為3:1

    這個我就不多說了,設成3:1,不懂的看這篇文章。
    Illustrator專用標示文件工具 CAD-tools

  3. 使用cut&slice me 切圖

    而切圖的部份,就交給cut &slice me 去處理,一次滿足所以有的dpi,我是屬於放大縮小派的,因為我覺得這樣省事,而且要做介面的mock up 或demo也比較方便。

  4. 繪製時盡量符合material design的規範與標準

    google 出了一份material design的設計準則,
    material design
    個人建議可以google的guideline作為繪製的準則,雖然他的guideline上是以dp作為單位,根據我的實作經驗,在1920px*1080px的大小繪製介面,會完全match material design的尺寸。

  5. 任何的元件,盡量以8dp的倍數作為尺寸標準

    在material design的標準下,你會發現大多的元件都是以8dp的倍數作為尺寸標準,而在px的環境下,要乘3倍去繪製,也就是說要畫一個8dp*8dp的正方型,用24px*24px 下去畫就對了。

  6. 字體大小1sp=3px

    sp是android的字體單位,而在字體大小的設定上,1sp會等於3px,也就是如果要模擬12sp的大小,將字體也設定為px,用36px下去做對了,之後我會針對字體的部份再做說明。

基本上按上我建議的設定下去做,繪製出來的介面誤差會很小,剩下的就是在不同裝置上的微調了,在我的經驗中,除了比較舊的機型有些會跑版外,基本上大部份都符合我預期的設定,當然這些都是我自己實作出來的經驗,繪製介面的方式有很多,如果有更好的方式,也都歡迎交流。