圖片先還是文字先

在進行介面設計時,常常會遇到圖文清單的頁面,這個頁面元件的特徵就是每一段文字標題,都會跟一張圖片,這是一種很常見的設計樣式(Design Pattern),而設計師最常見的問題就是:「到底是文字標題放前面還是圖片?」,這個問題蠻值得思考的,但答案絕對不是「我覺得這樣比較好看」就可以說明的。

介面設計的每個元素,都有其設計意義與目的,圖片的預設用途是什麼?那文字的預設用途又是什麼?如果一起使用又代表什麼、能達成什麼目的?這些都是設計問題,很少元素代表的只是一種裝飾,通常我們不會這樣使用它,就如同我之前文章中所提到的:介面設計是一種引導,它是用來告訴用戶該注意什麼、該那裡走或是我能有那些行動的引導,就好比你到了機場,透過機場的導視系統引導你完成登機的一切流程。

回到圖文清單的問題,我們要思考的是,圖片的預設用途是什麼?文字的預設用途又是什麼?這個答案很直觀,圖片與文字的相同預設用途在於「說明」,而差異在於,圖片較容易吸引用戶的注意,但承載的訊息有限,而文字較能詳細的說明,但無法吸引用戶的注意,因此如果我們一起使用,就是為了互補兩者的用途;而就單一圖片跟文字的組合,是蠻常見的一種設計元件,而清單(List),則是呈現大量重複類別資訊的一種設計樣式,由於清單重複的特性,用戶可以快速的掃視資料,在這樣的設計樣式下,設計目標就是要在有限的空間裡,讓獲取足夠的資訊來進行下一個行動。

此外,還要考慮到用戶的閱讀行為,通常有分兩種:1.隨意的瀏覽、2.目標明確的查找如果是隨意的瀏覽,代表用戶來到這個畫面,想隨便看看,沒什麼特別的目的,所以圖片或是有趣的標題可能相對容易吸引用戶的注意,但如果是明確的查找,用戶在查找前,對於圖片或文字會有一定程度既有印象,此時如果能夠快速的提供特徵的資訊給用戶,那或許就能降低用戶的查找時間。

接著,我們可以來比較一下,在圖文列表的設計樣式下,資訊該如何配置?是圖先還是文先,可以從幾個大家比較熟悉的 app 來了解,這兩種設計樣式下的差異。

先圖再文的清單

思考一下圖先的理由,圖先代表圖片比文字來的重要,且容易辨識,文字只是輔助,也代表圖本身必需要有明確且充足的資訊及特徵,如果圖片夠清楚直白,用戶就能快速完成他瀏覽頁面的任務。另外如果圖片的尺寸夠大,為了讓用戶更快速理解內容,也會將文字壓在圖片上面來降低用戶的掃視的時間。

Image for post
左圖是 Amazon的推薦清單,圖片是書的封面,提供足夠的資訊讓用戶能快辨視內容;右圖是youtube的播放清單,除了快取圖片外,創作者也會將影片加入文字作為封面,用戶在看播放清單時也可以快速的辨識內容。

先文再圖的清單

大家可以回想一下,一般在閱讀平面報紙或雜誌時,我們是習慣先看文字標題還是先看圖片?標題似乎比較容易與內文有關聯性,圖片提供的資訊量反而有限,有時候圖片甚至跟內容沒什麼關係,因此在資訊的配置上,標題在左圖片在右閱讀體驗上會比較好,如果一直將無用的圖片訊息放視覺的起點,閱讀體驗反而會比較差一點,所以先標題再圖片設計通常會出現在媒體或是以內容為主的app上,文字標題為主,而圖片為輔。

Image for post
左圖是 Medium 的 app,右圖是 NY Times 的 app,兩款產品都是媒體型的 app,資訊的呈現方式,都是以標題為主圖片為輔的方式設計。

另外還可以再思考的是,雖然媒體型的 app 比較容易採先文再圖的設計,但也並非每種文章類型的閱讀習慣都會一樣,像如果是「美妝、時尚」相關的主題,圖片或許就比文字來的更有吸引力,所以針對不同主題,設計不同閱讀動線,或許會是不錯的設計方案。

垂直的圖文排列

除了水平式的圖文清單,還有單欄或雙欄式的垂直式圖文清單,另外也可以運用水平捲軸的方式來放入更多的橫向清單項目;資訊的排列上,常見的都是圖上文下的方式組合,如果圖片的品質很好,且對用戶具有吸引性,通常會以單欄滿版的方式排列,老闆期待的「圖愈大愈好」,這時候就派的上用場。但如果是想要有效的運用空間,雙欄垂直清單或是單欄橫向捲軸的方式會是很好的選擇。此外,混合式的排列也是一個好的設計方案,可以解決視覺上的閱讀疲勞,也可以讓內容看起更豐富一些。

Image for post
左圖是 HBX,雙欄圖文垂直清單常用在電商類的 app,中間圖是 Airbnb,圖片以單欄橫向捲軸或是雙欄方式設計,右邊的圖則是雅虎新聞,採取的是少見的單欄文先圖後的設計方式。

真實世界的行為

其實在設計介面時,也可以從真實世界的行為來推敲產品動線,想像一下,當你去書局,假設沒有特定想要買的書,你的瀏覽動線是什麼?什麼原因讓你停下腳步決定要翻閱的書籍?是因為封面很漂亮,還是因為正在特價或是剛好有人正在閱讀?透過真實世界的觀察,也可以慢慢的推敲出產品介面的動線,其實這個推敲的過程就是「概念模型」。那又如果,你今天有明確想要買的書,除了問櫃檯服務人員(search bar)外,你的查找動線(navigation bar)又是如何?那介面上又該怎麼設計查找的動線呢?思考這些問題,或許在介面設計上就會有不錯的靈感。

結論

圖文清單是一個常見的設計樣式,也是新手設計師常常遇到的問題,這篇文章的重點,是在提供一個思考方式,如何運用知識與經驗,推敲出一個合理的產品閱讀體驗,如果只是要解決如何決定圖先或文先的問題,可以參考 NN/g 文章,會有明確的判斷方式。

https://www.nngroup.com/articles/mobile-list-thumbnail/?fbclid=IwAR3x5L9JQrBaPmw3Vr1Bzye3g46d4HsgpWskAs50NH0Xskjg5eUh27cS1xg

但你也會發現,從生活經驗中的觀察,也是會得到相差不遠的結果。當然設計不是一成不變,答案或經驗可能會限制了產品跟行為操作的想像,可以換個方式從生活中的體驗去觀察與想像,切莫只遵從規則,堅持好的設計,好的設計絕不無聊。

介面設計Prototyping淺入淺出

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

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

Prototyping工具的興起

介面設計的prototyping工具是從擬真(skeumorphism)轉扁平化(flat)設計風格的過程中逐漸興起,加上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幾個介面設計師才是。

你是做UI的,那懂不懂UX?

近來,身邊有很多朋友對於使用者界面設計師(UI Designer )跟使用者經驗設計師(UX Designer)感到混淆,在面試 UI Designer 時,除了一些介面設計相關的問題外,最常被問到就是:「你是做UI的,那懂不懂UX?」,懂?不懂?似懂非懂?總覺得 UI Designer 的工作內容愈來愈廣,不僅要懂UX,最好也懂程式,最好也懂行銷,最好也懂商業模式…這樣下去應該沒完沒了。撇開其他的專業不說,UI Designer 與 UX Designer 到底差在那裡? 該怎麼去定義 UI Designer 這角色呢?其實,這要回到最本質的問題,那就是身為一個設計師,有沒有思考過「設計」是什麼呢

這個問題在我想了很久,因為我非設計本科,沒上過課所以也不太了解。有人說設計是解決問題的方法,那我會想,有沒有什麼問題是設計解決不了的?那有沒有什麼除了設計以外的方法可以解決相同的問題?其實錢也可以解決很多問題不是?難道花錢就是一種設計?仔細想想,在生活中的確有很多問題透過設計可以得到改善,所以它自然是解決問題的方法,但這樣的解釋其實太過含糊,因為你是掛 UI Designer,而不是掛問題解決設計師啊!

設計是什麼?

平面設計大師Paul Rand,在與學生的對話中己經給我們了一個很明確的答案。

設計就是關係,是形式與內容的關係。

Design is relationships. Design is relationship between form and content.

—保羅.蘭德《保羅.蘭德 給年輕人的第一堂啟蒙課》
《保羅.蘭德 給年輕人的第一堂啟蒙課》

學過平面設計的人,對這位大師一定不陌生,我在《保羅.蘭德 給年輕人的第一堂啟蒙課》這本書中,得到了答案,但一時很難體悟這句話的意思,直到最近才稍微理解這位大師所下的定義。
那平面設計大師講的話,跟介面設計還有使用者經驗設計有什麼關係? 介面設計也是設計,當然也是「形式」與「內容」的關係,所以形式是什麼?內容又是什麼?

內容就是想法、主題;形式就是你想法的做法。

—保羅.蘭德《保羅.蘭德 給年輕人的第一堂啟蒙課》

所以內容可能是自己的想法或是其他人給你的主題,那可能是商業的設計案、公司的產品、社會議題…等等,它就是內容;而形式是方法,你的角色為何,採取的方法就會不一樣,

設計與介面

如果你是一位介面設計師,正在做一個關於社會議題的網站,那你的內容為何?形式為何?你的內容就是關於社會議題的資訊(what),形式就是你如何(how)呈現在網頁上的資訊,設計就是呈現的方式跟社會議題資訊之間的關係(why)。
你希望它如何在網頁上被使用者操作、閱讀、理解、收藏、分享…等等,這是介面設計師的專業,這過程中你會設下很多的「設計目標」,預期使用者如何的去操作你的網站,每一個介面模式(UI pattern)都有它存在被使用的理由。但這並不能解決社會議題中的任何問題,因此即使是負面社會議題,資訊能有效的被傳達,就專業的角度而言它就是成功的設計。

以下UI Designer 簡稱UI、UX Designer 簡稱UX

那從使用者經驗設計師來看,他的內容為何? 形式又為何?

設計與使用者經驗

在相同的社會議題的網站條件下,即使內容相同,UX 跟 UI 所關注的重點就會不同,UX 更專注於內容本體及研究對象(what)為何,而 UI 則更專注於內容的結構;而在形式上,UX 更專注於如何(how)了解「人」的方法,所以你跟大多數的 UX 對話時,你會發現他們很在意「使用者」的感受,要有「同理心」,要做訪談要建立Persona…等等,這是他們的專業,這是一連串關於人的科學研究,他們更在乎的是使用者對這議題或產品的感受與態度,並透過觀察還有科學的方法來驗證結果,對他們來說,設計就是人與社會議題之間的關係,所以透過研究人的方法,來釐清人與社會議題之間的關係。但隨著研究的主題不同,研究的對象(人)也就會不一樣,所以如果能夠改良、提昇或是扭轉這樣的關係,才算的上是一個成功的體驗設計。


2016/4/27補充

內容、形式、行為

這幾天跟朋友討論了相關的內容,在《About Face(設計交互精隨)》的書中也提到了內容與形式,只是他多了一項:「行為」。這是個很有趣的發現,仔細想想,Paul Rand 是位平面設計大師,在那個年代「使用者經驗」可能被含概在行銷概念中的消費者行為,因此我猜想行為可能包含在對內容的研究裡面。

另外提及「行為」,心理學家Kurt Lewin所提出的場域理論(Field theory)也提及了行為,他認為一個人的行為(B)取決於個人(P)和他的環境(E)的相互作用:

B=f(P*E)

簡言之,人的行為會受環境跟自我的影響,它跟增強理論剛好不太樣,增強理論是在說明「行為是結果的函數」;總之我們可以發現,UX最感興趣的行為,被拉進了設計過程,從對「行為」研究,或許可以更明顯區隔跟UI的差異處。


設計就是一連串的為什麼

因此不管是什麼樣的設計,都可以透過內容跟形式的方式去理解,但找出關係或是建立關係,不是一件容易的事情,而且通常這樣的關係是一連串的「為什麼」,對UI來說:「為什麼按鈕要放右上方?」、「為什麼分享要在文章下方?」、「為什麼字體要挑黑體?」;對UX來說:「為什麼使用者在意這個議題? 」、「為什麼使用者對這個議題感到無趣?」、「使用者對於議題的態度為何?」 …等等諸如此類的問題。

UI 要不要懂 UX?

這個問題就像是你問物理學家懂不懂數學,或是經濟學家懂不懂統計一樣,他們當然「略懂」,但這背後有兩個問題,第一是為什麼要懂?第二是要多懂深才算懂?對於物理學家而言,他們當然要懂數學,而且不能只略懂,而是要非常的懂,因為他探討的問題很難,是一般人無法理解的關係,所以有一本天文物理鉅作叫《大設計–The Grand Design 》,同樣是設計,但它討探討的是另一更複雜的關係,這樣關係要透過數學(形式)才有辦法去釐清。
而對 UI 而言,UX 是形式的一種,使用者介面是給人使用的,越是能了解使用者,越能創造出良好的介面體驗,所以要懂UX,但這裡的懂,並不是你一定要花非常多時間去了解研究人的方法,而是你可以透過參與的過程,或從研究的結論中節取有用的內容,作為 UI 的調整或改善基礎。

所以當你面試介面設計師的工作,對方問你懂不懂UX,要怎麼回答?

略懂

就是略懂,但一個略懂不夠,要略懂、略懂。但如果對方問會不會使用者研究,你就要用狐疑真誠的眼睛看著他並回說:「不會,我是來面試UI的不會,但我願意參與」。
但如果真的很想當 UX 怎麼辦?先確認自己對於人的觀察或研究是有異常興趣的,然後去了解一下UX平常的工作內容,要有身為研究員的覺悟,因為它有點像在做論文的定性或定量研究,假設、建立模型、收集資料、分析資料、驗證然後結論,可能沒想像中那麼有趣就是。

真正重要的,眼睛看不見

不同公司對於 UX 職位的期待不太一樣,有些公司會找 UX 來改善產品的體驗,所以他們的研究的內容就是產品本身,如果是想挖掘新產品,就得找到 TA(Target Audience),並透過研究方法來挖掘需求,UX 甚至可以從公司經營的角度 ,去了解公司並重新塑造公司的組織文化,UX 的應用很廣,所以它一點也不容易,而且它必需要有一定的經驗累積。

最後要提的是,不管做什麼設計,最重要的還是找出「關係」,UI 的專業,不在於你對於形式的掌握有多成熟或是對於內容有多了解,因為這些都是必要的,那是 UI 專業的基礎,有沒有辦法在這之間建立關係,這才是功力深淺的差別。 關係聽起來抽象,但事實他存在我們的生活中,跟家人的關係,跟朋友的關係,跟情人的關係,跟公司、同事的關係,全都是設計。它看不到,所以很重要。

人只有用自己的心才能看清事物的本質,真正重要的東西用眼睛是看不到的。

—《小王子》

Daily UI 邁向更好的設計師之路

好一段時間沒寫文章,累積了不少的心得,但前陣子花了好多時間做Daily UI的挑戰,所以就先來一篇Daily UI的心得。

Daily UI的挑戰,開始於一位設計師Paul Flavius Nechita,這位老兄在dribbble上,每天都貼一個介面的作品(不分平、假日),在瘋狂的洗板下,我很難不注意到這位瘋狂的設計師。我不確定他是不是第一做這樣挑戰的人,但他確實成功的完成了它的挑戰,最重要的是,他的每一個作品都能夠維持一定的水準。

dailyui
Paul Flavius Nechita 的作品網站

在他完成100的天的挑戰了,也激勵了不少的設計師做相同的挑戰。但做這樣的挑戰,一開始最為頭痛的就是「題目」,要自己去想題目其實不是一件容易的事情。所以有人做了一個網站:dailyui.co,解決了題目的問題,只要訂閱這個網站,它每天都會在固定的時間寄一封email給參與挑戰的人,信裡面就會提供當天要畫的題目。

dailyui.co
dailyui.co

看到這個網站,燃起我挑戰的意志,所以訂閱了這個網站,同時為了讓更多設計師也參與(推坑),於是我在fb上開了一個社群Daily ui challenge@taiwan,邀請了一些設計師一起完成這樣的挑戰。但最後能撐過一百天的設計師不多,事實上我的一百天挑戰,也只完成了約八十個作品。

這個挑戰真的很不容易,根據我自己的觀察,除了在社群外的人,全世界參與的設計師,能夠撐到五十天的人己經不容易了,http://collectui.com/designs,這個網站收集了大多數有參與DailyUI設計師的作品,可以看到愈後面的天數作品的數量也愈少,因為它真的是一個非常考驗毅力的挑戰,想想每天除了上班外,下班還要花時間做挑戰,每個作品花費的時間大概也要二、三個小時以上,我自己在挑戰的過程中,也犧牲了大多數的假日來追趕進度。

接下來講講的我的心得:

我的作品

上面這個連結是我的作品網站。完成這個挑戰的同時,我也做了一個網站讓參與的設計師也都可以有自己的作品網站。所以有興趣的設計師,可以把這個(github)網站下載回去,換上自己的作品,就可以擁有一個完整的作品網站了。

  1. 創作的步驟
    一開始在創作時,有些主題很明確,所以可以很快的完成創作,例如:sign up、login、404page、credit card,這些頁面對於介面設計師而言再熟悉不過,所以內容很確定,創作起來就很快;但是到了後面的挑戰,會出現一些比較不熟悉的題目,例如:car interface、dashboard、blog post ,如果用相同的方式去創作,直接上機畫,邊畫邊想內容,就會拉長創作的時間,日復一日,時間越拉越長,自然就會想要放棄。所以一開始要先確定題目的內容、結構,再上機畫,可以省比較多力氣跟時間。

相片 2016-3-20 17 55 47
先確定內容、結構,再上機畫

 

  • 保留一些UI的特性
    DailyUI畫的還是使用者介面,雖然沒有限制在特定的裝置上,但介面最重要的除了內容的呈現外,另一個重點就是行動召喚(call to action,CTA)的保留,所以按鈕是按鈕,選單是選單,不管是要擬真的風格還是扁平的風格,還是要有一定的辨識度,否則就會變成平面設計了,當然有些題目會比較偏像平面的創作,像是logo、background pattern,就不在此限了。

  • 善用線上資源
    介面組成的元素很多,畫一個介面如果還要去創作組合的元素,是非常花時間的,善用線上的資源,像是圖片、icon,這些都可以透過現有的線上資源取得,不需要重新創作,可以節省非常多的時間。另外挑戰時會遇到一些需要有商品呈現的頁面,例如:shopping cart、single prouduct… 等等,也可以找一些高質感的產品,也可以讓作品看起來更加專業。

    visual hunt 免費圖庫
    material deisign icon  免費icon

  • 不要糾結於原創
    平面設計大師Paul Rand有說:「Don’t try to be original, just try to be good!」,這不僅用在平面設計,介面設計也是,有時候並不是要創作出一個原創的作品,才算是完成一個作品,況且Dailyui是每天的挑戰,不太可能一直去思考做出原創的作品,這也是一開始在創作時會面臨到的糾結,總是希望做出不一樣的作品,但越是這樣想,隨著時間的壓力,就越難創造出作品,所以創作或許是一種持續觀察和改良,以做出一個好的設計而不是一個原創的設計為目標。

  • day39
    day39-Testimonials

     

  • 觀察觀察再觀察
    Dailyui的挑戰,最重要的就是訓練自己的觀察能力,因為過程中需要大量搜集靈感,不斷的觀察別人的作品,慢慢的會發現一些細節,像是陰影的顏色、範圍,字體、字距,排版方式,圓角大小,照片的挑選…等等,當你發覺看到的細節越多,代表觀察力也逐漸在提昇。

  • day43
    day43-menu 陰影的顏色不全然是黑色或是灰色,會依環境的顏色有所差異,所以挑對陰影的顏色,立體感會更好。

     

  • 進步的感覺
    當你不斷的在累積作品,即便創作的當下你覺得作品猶如神作,回過頭再看看之前的作品,也會發現很多缺點,此時你會對當時創作的判斷充滿懷疑,這種感覺就是進步,代表對於作品的細節、美感都有提昇。像我自己在看之前的作品,就會覺得越看越不滿意,想要再重做,有這種感覺大概就是進步了。

  • 以上是我挑戰的一些心得,但只是心得是不夠的,一百天的挑戰也是個認識自己的機會,為了完成挑戰,我這一百天總是盯著電腦,不斷的在behance還有dribbble上看著國外一些高手的作品,心中難免感到焦慮,也會覺得自己在這領域的努力還是不夠,還是有可以改進的地方,透過比較來重新認識自己的作品,因此我自己也發覺一些需要再突破地方:

    1. 作品的一致性不夠
      一致性的風格,是設計師所追求的一個目標,能從作品就可以看出是那位設計師的作品,但這樣的能力並非一朝一夕,需要透過不斷的創作來找出自己的風格。我自己在創作的過程中,風格比較多樣,因為大量的參考了其他設計師的作品,因此還未能收斂出屬於自己的一個設計風格,這也是我需要再加強的。同樣在挑戰的設計師中,也有比較資深的平面設計師,從作品中就可以看出風格的一致性,而通常這樣資深的設計師,在決定創作前,事前可能就擬定好設計風格與方向了。

    2. 插畫能力不夠
      插畫是介面設計導入情感最有效的方式之一,它可以降低使用者的焦慮感,而且可以形塑出更明確的設計風格,因此我認為就算是介面設計師,會一些插畫能提高產品的完整度,同時也有助於個人風格的形塑,所以插畫不能逃避。

    3. 太過單調、無趣
      在看過許多的設計師的作品中,總是有會別出心裁的設計或動效,可能是受限於只做靜態的介面,因此無法更有效的提供一些有趣的轉場回饋,但也可以透過思考介面操作的可能性來創造一些有趣的感覺,這也是我的作品中比較缺乏的。

    最後,我認為作為一個介面設計師,除了平常多補充一些介面設計相關的知識外,持續的創作也是一個很重要的事情,一個偉大的NBA籃球員,也是每天練球,不斷的重覆練習、調整動作,才能成就偉大。同樣的想要成為好的設計師,自我的要求還有練習絕對是不能缺少,DailyUI就一個很好的練習方式。

    有些朋友會線上問我擔心自己還不夠熟悉介面,怕畫的不好看怎麼辦? 想要成為介面設計師(不管是什麼設計師),其實這些都是過程,100天過後,如果你有用心畫,一定會有所進步,100天後不是結束,或許也是另一個挑戰的開始, 不斷的練習能力就會不斷的提昇。

    但如果真的沒把握做DailyUI,推薦大家一個學畫介面的平台:學ui,是對岸的網站,資源很豐富,跟著進度學習,很快就會有收穫。

    除了DailyUI,我又看到了一個挑戰http://www.365cons.com/ ,連續365天畫icon ,難度比較低但時間也拉的比較長,這剛好補足我插畫能力不夠的缺點。我想應該會找個開始的時間吧,到時有興趣的設計師也歡迎一起接受挑戰吧!

    視覺法則(2)— 格式塔原則

    這篇延續上篇格式塔的四個基礎,整理了一些常用的原則,如同上一篇最後面提到的,格式塔的四個基礎,就好比數學的加、減、乘、除,而它的原則就好比代數運算。所以只要能夠掌握基礎,或許也可以拼湊出一個設計原則。

    格式塔的原則可以套用在不同的領域,例如:平面、介面、插畫、攝影、廣告、空間…等等,小到介面設計,大到建築設計,只要與視覺相關,就用的到。以格式塔作為基礎所發展出來的原則很多,但因身為介面設計師,所以下面就以介面設計常用的格式塔原則來進行討論。

    這篇文章引用了設計師 Carolann Bonner 所提供的六個常用原則,加上二個我認為比較重要的原則:

    1. Similarity 相似
    2. Proximity 相近
    3. Continuation 連續
    4. Closure 封閉
    5. Enclosure 圍繞
    6. Figure-Ground 主體-背景
    7. Common Fate 共同命運
    8. Symmetry 對稱

    這八個原則幾乎包含了介面設計常用的原則還有技巧,了解原則可以幫助理解「為什麼」要使用這樣的設計樣式(Design Pattern),請記得格式塔理論的核心在於「整體不是個體的總合」,所以這些原則是來判斷整體視覺的感知結果,而每個原則背後,都隱含著格式塔理論的四個基礎,看完這些原則後可以思考一下,跟四個基礎之間的關聯性。

    1. Similarity 相似

    個別相似的物體會被視為整體的一部份。相似特徵的物體,不論是它的形狀、顏色、大小、排列方式…等等,只要相似,我們的視覺就會認為是一個整體。

    上圖中可以看出外觀特徵相似的個體(不同顏色),可以分別視為一個整體,即使打亂順序(B),白球還是會被大腦歸為一個整體。

    應用在介面設計:

    components_lists_keylines_single9

    在上圖中,可以看出左邊一排圓形的圖片,可以視為一個整體,每一張圓形圖片都代表一個聯絡人,所以在這個介面上,就可知道這些資訊的整體性。而右下方的圓形元件,是Floating Action Button,則是利用了下面會提到的「主體-背景」原則,與內容做分割來避免混洧。

    2. Proximity 相近

    當個別的物體距離相近,我們的視覺會將他視為一個整體。

    上圖A中,個體之間左右間距較小,圖B則是上下間距較小,構成了圖A是每一橫排為一個整體,圖B則是每一直排為一個整體的視覺效果。

    應用在介面設計:

    透過物體與物體間距的控制,可以知道資訊排列越是接近,他們的關係就越是強烈,可以視為一個整體,如果距離較遠,就可以視為與其他個別的整體。很常應用在排版之間關係的操作。

    3. Continuation 連續

    連續的個別物體,形成的視覺動線,會視為一個整體。就算被中斷,我們的大腦仍然會判定為一個整體,因為我們的視覺容易感知連續的形式,而非離散的片段。

    上圖中,我們的視覺會告訴我們有兩個重疊的圓圈,而這些圓圈是由連續的小圓形所構成,我們的視覺不會因為它交錯,而判斷成三種不同的圖形。就像1跟2之間交集的3,視覺上他是不存在的,除非你去突顯它。

    應用在介面設計:

    上圖紅框的部份,會看到數個灰色的點點,在介面設計上我們稱它為「Slider Dot Navigation」,通常是用來做侷部畫面的導覽切換,這就是連續性的應用,在些灰點在連續排列的情況下,我們會將視為一個整體,而非單純的灰、黃點,它會透過動態(自動換圖)的方式來提醒使用者,畫面是可以進行切換的。

    4. Closure 封閉

    當我們的視覺感知到物體是不完整的,但我們大腦仍會將不完整的資訊填滿,並將視為一個整體。

    上圖看起來像是圓形2蓋在圓形1上面,但事實上,圓形1不是一個完整的圓型,可能也不是一個圓形,但我們的大腦會自動把圖1,填補成一個完整的圓型,這個原則充份解釋了整體大於個體加總的核心概念。

    應用在介面設計:

    components_cards_content1

    上圖中畫面的下方,我們知道可以繼續瀏覽,但為什麼會知道畫面可以延續?因為封閉的原則,我們知道下面的卡片只有顯示到一半,但人類的眼睛會自然填補失去的資訊,意識到下方還有沒看完的資訊,所以繼續下滑直到資訊結束。

    5. Enclosure 圍繞

    將個別的物體透過任何方式(線條、色塊)將它們圍繞在一起,被圍繞的群組,可以視為一個整體。這個原則是設計師 Carolann Bonner 在的文章中所提到的一個原則,我找了一些網路上的資料,比較少提到這個原則,但實際上還蠻常用在介面設計上。

    上圖A左上方區塊被線框圍繞,可以視為一個整體,圖B則是左上方區塊以灰色作底,也可以視為一個整體。

    應用在介面設計:

    components_dividers_usage2

    上圖可以看到畫面中有明顯的分隔線,透過分隔線,可以知道內容所屬的範圍。而卡片(card)的樣式,也是透過卡片來圍繞資訊,也是圍繞原則的應用方式。

    6. Figure-Ground 主體-背景

    在整體的視覺條件下,某個物體相較於其他物體來的明顯,我們會大腦會將它判定為主體,而將他以外的物體視為背景。

    上圖右上角的桃紅色圓形,明顯突出於其他灰色的圓形,因此它為主體,而灰色的圓形則為背景。

    應用在介面設計:

    對話框(Dialog),很常應用在在介面或網頁設計上,因為要突顯這塊的資訊,所以在背景蓋上一層半透明的黑色,此時使用者就會意識到這個對話框是主體,而其他區域則是背景。

    7. Common Fate 共同命運

    在整體的視覺條件下,某些個別物體,或是同時、同速、同方向往一個地方移動,這些個別物體會被視為整體。這個原則常用在動畫效果的呈現上。

    上圖有很多的桃紅色圓形,其中有幾個同時往左上方偏移,因為共同的命運,將其視為一個整體。

    應用在介面設計:

    components-buttons-fab-transition_speeddial_02

    上圖是Material Design 中,還蠻常使用的漂浮按鈕(Floating Action Button),如果一個按鈕裡面有多種功選或選擇,就會以像是上面圖片的方式呈現,幾乎在同一個時間點出現不同選擇,我們的大腦就會意識到,這些功能是一個整體。

    8. Symmetry 對稱

    為了更簡單的去理解整體,我們的視覺,會趨向將對稱的物體,視為一個整體。

    上圖中,依序出現的是左大括號、右大括號、左中括號、右中括號、左大括號、右大括號,還是一組大括號、中括號、大括號?大多人應該是後者,因為對稱性,會將互相對稱的個體視為整體。

    應用在介面設計:

    對稱的原則無所不在,只是因為使用的太過於頻繁,反而會忽略掉它的存在,上圖我將卡片樣式的畫面做了一些調整,把左右對稱拿掉,讓右邊存在的空隙小於左邊,在這樣的畫面下,因為畫面不對稱,會感覺右邊內容還沒有結束,所以可以知道,很多時候我們運用了畫面的對稱性來包住內容,引導視覺開始與結束的位置。就像是網頁設計,通常會有header,也會有footer,包含在中間的就是body,才能構成一個完整的網頁(瀑布式部局的網站除外)。

    結論

    根據以上的例子會發現為什麼說每個原則背後,都隱含著格式塔理論裡四個基礎與八個原則之間的關聯,擁有加減乘除的作法,例如整體性會與相似、相近、圍繞、共同命運有所關係,具體化與主體-背景概念有所重疊。上述八個原則,是介面設計常用原則,但如同前面所討論的,格式塔原則是視覺認知整體的方式,應用的範圍不侷限在介面設計,尤其是平面設計更是經常在使用這些原則。了解原則之後,我們可以依照這些原則去發展出一些新的介面設計元素。等到對這些原則能夠清楚的掌握且迎刃有餘,就可以開始「打破」這些原則,來創造更有張力的視覺效果。從不理性中找出理性是設計,再從理性中找出不理性,那就是藝術了!

    如果想了解更多格式塔的原則,下面提供一些參考的文章:

    視覺法則(1) — 格式塔理論的四個基礎

    這篇要來討論一下格式塔理論(Gestalt theory),也就是格式塔心理學,或稱「完形心理學」。只要學過平面設計理論的人,應該多少都聽過格式塔的相關理論,但真正要直接應用在設計作品上,其實也不容易,又或許是已經用上了,但沒有去仔細探究而已,因為格式塔理論,探究的是人類視覺自然感知的過程與結果。

    格式塔是德文Gestalt的譯音,意即「模式、形狀、形式」等,意思是指「動態的整體(dynamic wholes)」 — by wiki

    格式塔理論的發展,始於1910年時,心理學家 Max Wertheimer 無意間看到鐵路上的閃爍的燈光如下圖一(這部份的考證,網路上的資料不是很完整,有不同版本),他觀察到,當燈光快速切換的時候,會產生視錯覺(optical illusion),這邊的視錯覺指的是「似動現象(phi phenomenon)」(參考影片),也就是燈光在快速的切換狀態下,當速度快到介於30~60毫秒之間,會產生動態的移動的錯覺(如下圖二),於是Max Wertheimer 與同儕開始進行相關的視覺研究,花了近十年的時間發展出的一套視覺認知理論,也就是現在的格式塔(完形)心理學。

    圖一:鐵路平交道的警示燈

    圖二:似動現象

    格式塔理論要討論的東西其實非常的深,它可以說是現代認知心理學的基礎,唯一貫徹的概念就是「整體不是個體的總合」,但我們只需要從視覺來角度來討論與理解就好,因為格式塔所衍申出來的視覺原則,跟平面設計還有介面設計習習相關。

    “The whole is other than the sum of the parts.”
    — Kurt Koffka

    在格式塔心理學的構成,有四個基礎:整體性(Emergence)、具體化(Reification)、組織性(Multistability)、恆長性(Invariance),這四個基礎是人類視覺的特性,也就是說,它是我們視覺的一種慣性,是天生或演化而來的,了解這四個基礎,就能解釋大部份的視覺情境了。本篇先說明這四個基礎,下一篇再來討論幾個常用的原則。

    1.整體性(Emergence)

    當我們要去分辨一個物體時,我們的眼睛會試圖去找出輪廓,然後去比較對過去腦中的記憶,來快速的分辨出物體,這就人類視覺的整體性。下面這張圖是一張很常被用來解釋整體性的圖片,在圖片中你會看到很多黑點,而且能透過輪廓,辨視出一隻像是大麥町犬的物體,所以我們的視覺是整體的,而不是從一條腿、一顆頭的方式將所看到的物體給組合起來。

    運用在介面設計上,也就是之前我們討論的指意、預設用途,我們能從物體的外觀或是輪廓知道他的用途,有時候並不需太多的細節。像是下圖的ghost button就是一個很好的例子。

    2.具體化(Reification)

    當我們的視覺感受到刺激,同時也會對外部環境的空間訊息產生解讀,我們的腦袋會試圖把這些缺口給補起來,並創造出一個訊息去理解觀察到的物體。下圖中的 A,許多人看到會看到白色的三角型,但其實這個三角型並不存在,而是我們的腦袋自己將失去的訊息給填補起來。

    用於介面設計,最常用的就是格點系統(grid system)如下圖,也是透過格點系統的建立,來劃分區塊,我們未必要使用線條來進行資訊版塊的切割,只需要透過適當的留白,一樣可以讓閱讀者辨視出這些區塊的不同。

    3.組織性(Multistability)

    如果一個物體有兩種以上的解釋,我們的腦袋在同一個時間點,只能給予一種解讀的方式 ,當然我們的視覺允許我們在不同的解讀上游移,但我們卻無法同時看到兩種以上的解讀方式。例如下圖,圖片中是一個妙齡女子?還是一個年邁的老婦人? 或許都能看的出來,但她就是無法同時出現。

    運用介面設計上,那就是要思考,你希望你的使用者在你的畫面中看到什麼樣的訊息?想傳達的資訊要盡量精確,避免模陵兩可的圖片或文字,因為你永遠無法知道,使用者看到的跟你想的是不是一樣。

    4.恆長性(Invariance)

    我們視覺的最大優勢就是恆長性,不管物體如何變形、旋轉、放大、縮小,我們都能夠透過他的輪廓或特徵來判斷這個物體。如下圖中像是搖桿的物體,任憑它如何的改變呈現的方式,我們的眼睛還是能夠從圖片中找出相同或是不同的物體。

    運用在介面設計上,最常用到的就是下圖中「請證明你不是機器人」的驗證(CAPTCHA)了,這也是目前人類在視覺上勝過電腦的優勢,當然這樣的優勢再過個幾年可能就會被電腦給取代了,而且有時候也是會遇到人類無法判別的驗證碼,恆常性失效。

    以上就是格式塔心理學的四大基礎,這四個基礎對於從事視覺設計或是藝術相關的人都非常的重要,對於這些視覺特性能夠掌握的好,就能創造出更好的作品。

    下一篇會討論格式塔使用的原則,當然有人對於基礎與使用原則會有些混淆,只要記得,四大基礎比較像是數學中的加、減、乘、除,而原則就會比較像是代數運算,所以基礎很重要,幾乎所有的視覺原理都離不開這四個基礎,應該要好好的理解才是。

    附上一些參考的來源,因為有網路上對於格式塔心理學的說法解釋並不完整、一致,在這篇文章簡單的整理一下,做為一個參考跟紀錄,如果有任何錯誤也歡迎討論。

    圖標還是文字?

    前一陣子與幾位比較資深的ux專家討論我們家的產品,提到一個我常常在思考的問題,那就是在介面設計功能的配置上,到底圖標、文字怎麼選擇呢? 所以這篇來討論一下怎麼選擇這件事。

    從視覺設計的角度來看,圖標(icon)會被認為比較美觀,也容易被記憶,所以大多的設計師能用圖標就盡量不使用文字,但是圖標有時候很難辨視它的用途,這篇The Problem with Icon有提到,圖標如果意義不明確的話,使用者很難理解這些圖標的作用為何。

    在《親愛的界面》這本書79頁中有提到 Colin Ware的著作《Information Visualization》,這本書有討論相同的問題,作者認為「易於識別」的圖標能夠刺激人腦大腦中的長期記憶語義網路中的相關概念,也就是說圖像比文字容易記住,但請注意是「易於識別」的圖像。 但我想這樣的結論並不意外。只是什麼時候該用圖標什麼時候該用文字,什麼時候又該並用,才是設計師在意的。

    此外,在hpx中有一篇文章有討論關於圖標與文字之間選擇的研究整理:使用者經驗之迷思13:icon可以增強易用性。裡面也有圖標與文字之間決擇,一個比較折衷的作法,就是在icon上面加上文字,但這樣就算提高了易用性,但總覺得有點囉嗦,而且並不是每個位置都可以同時塞的進圖標還有文字…所以該怎麼選擇圖標或文字呢?

    下面我整理了圖標、文字使用的優缺點:

    基本上圖標或文字都各有優缺點,如何使用端看設計師當下的需求,但是想討論的事是:如果需求也不確定時怎麼選擇圖標或文字呢? 成熟的產品可以透迭代設計還有A/B測試來調整並選擇樣式,但如果是一個全新功能的產品那要根據什麼來進行設計呢?

    有時候可能是一種設計風格,但這邊我要帶入Norman提到的設計方法:預設用途(affordance)、指意(signifier)來做討論(可以這考我寫的這篇文章)。指意算是比較後來所提出的概念,但在Norman提出指意的說法前,預設用途的分類其實也可以非常的細,而指意是預設用途的其中一種形式,可以參考這篇文章對於預設用途的分類,但我還是以Norman的說法來做討論。

    前面的文章說過預設用途是強調的是「關係」,物體提供的功能與使用者的需求,兩者能滿足,預設的用途就會存在;指意是傳達行為指示的方法(聲音、文字、符號…等),這跟圖標還有文字有什麼關係?

    其實圖標與文字放置的選擇,可以用這個區塊能否讓使用者有預先想到的互動關係來決定。想只放圖標不放文字,那可能tab bar 會是一個不錯的位置,有使用智慧型手機習慣的使用者,應該會知道這個區塊是用來做頁面切換或使用一些功能(打卡、po文…等),所以能預想到可能的互動關係,或許只放圖標是一個不錯的選擇。

    但只放圖標不一定好,大多的tab bar圖標都會帶有文字,因為圖標不易理解,但在預設用途存在的條件下,我個人認為不影響使用,例如behance、google+ (下圖)tab bar 上面的圖標都沒有提供文字,那要怎麼知道這位置的圖標提供什麼功能呢?一般來說,使用者會「主動」找他們需要的功能,這些功能不是偶然,背後都是經過設計思考後產生的需求,是常用、必要的,所以我們可以先假設使用者有主動學習的能力,經過學習後就會操作。

    behancgoogle

    上圖左是behance的介面,下方有很多圖標,但能從圖標知道這是幹嘛的嗎?右邊則是google+的介面,下方的圖標看起來都是一些「功能」,但我們可以聯想到這些功能是做什麼嗎? 我想就算不知道,但至少會知道它可以點,點了就知道能做什麼了。

    而在上方navigation bar 左右兩側都會有tools,通常我們會塞進一些狀態或是工具(搜尋、漢堡選單、通知…等等),所以我們可以注意到這兩個app的右上角都有兩個圖標,從圖標上我們能知道它可能是個狀態或工具,同時這些圖標都是可以點選的,在這樣的預設用途下,使用圖標或許也是一個不錯的方式。

    接下來看一下內容的部份,

    tumblrfancy

    上圖左是tumblr的app,右則是fancy的app,他們的內容是以卡片樣式組成,每張卡片下方都有一些「指意」,如果只從文字、圖標,是否能發現它的互動方式,根據我個人的經驗,tumblr的方式,使用者會比較難意識到下方的圖標或文字是可以點擊的,但tumblr用了一個比較特別的技巧「回饋」,點擊後的動畫,會讓人印象深刻,所以使用者操作過一次後,容易記得這樣的功能。而fancy用了另一個比較聰明的方式,就是把文字或圖片都加個外框,讓他看起來像按鈕(可以點擊的預設用途),就能知道這是可以點擊的。

    facebook

    上圖則是facebook的app,所有的圖標都會加上文字的說明,這是一個比較保險的作法,但也跟facebook的使用者散佈的範很廣的特性有關,必須要很清楚的去說明每個icon的用途。

    那什麼時候可以使用純文字,通常會是一個比較單純的行為引導,因為文字是很直接的指意,他可能重覆出現在介面的任何位置,常用的文字整理如下:

    • 操作引導:編輯、確定、取消、新增、關閉、設定、看更多、儲存、選取、完成、刪除、移動、…
    • 流程引導:上一步、下一步、首頁、取消、註冊、登入、登出、頁面狀態(麵包屑路徑)

    以上這些都是比較常見的操作文字,有些可以用圖標替代,像是新增可以用+,取消可用x,但如果要讓使用者更為直覺,文字的效果可能會比較好,但是請記得可以點擊的文字要用其他的顏色,跟內文使用的文字有所區別。

    如果文字讓使用者很難發現可以點擊怎麼辦? 目前比較好的解決方法,就是ghost button,在文字的外圍加上一個有圓角的外框,讓他有按鈕的預設用途,那可以加強只有文字指意的不足了。

    ghost

    上圖是iphone的app store,在每個app 的後方都會有ghost button ,使用者就可以知道這是可以點擊的。

    結論

    基本上什麼時候使用圖標或文字,可以取決放置元件的區塊是否有提供操作的「預設用途」,但這樣的方式是對於經常性使用介面的人才有效果,對第一次接觸介面的人,可能還是沒辦法意識到操作的方式,所以圖標加上文字是最為明確的。

    所以有時候在做介面時,若目標市場不夠明確,也沒做事前對市場的使用者做一些分析,那開發的產品就要符合「全部人」的需求…那要考慮的是「通用」設計,就不會是單純的介面設計,但通常老闆都會採用「通用」設計,因為老闆的目標市場,通常就是全部啊(呵呵)。

    此外,當一個介面元件經常性的被使用,也會從指意漸漸的轉向一種預設用途。

    affordance

    上圖是wordpress的編輯元件,如果你經常的使用word或其他相關的文書編輯軟體,就算沒有文字的指意,仍然可以判斷出大致上的用途。

    cursor-01

    上圖兩個箭頭,一般人能分出差異嗎? 但設計師能,問問身邊的設計師,這兩個箭頭差在那邊吧~

    以上的這些討論,並不是一定的解決方式,只是希望能夠透過一些比較有根據性的說法來進行討論,這樣才能確保每一個選擇都是有經過思考的,當然最好的方式還是迭代設計還有進行A/B測試,如果能去追縱每個介面上元件的效益,會是最好的也最科學的決策方式。

    設計的心理學(5)— 概念模型

    閱讀這篇前,可以先再複習一下前面提到的設計的基本原則,文中我有提到二大設計目標,其中一項就是「易理解性」,而易理解性根據我在文中解釋指的就是「概念模型」,也是我歸納出六項設計原則的最重要的一個原則。

    概念模型

    概念模型(Conceptual Model):一個東西怎麼運作的解釋。

    p.52

    要理解概念模型,我們先做個簡單的練習。請想像並說明如何從提款機提領出一千塊的現金?

    以下是我描述的提款流程:
    首先插入金融卡 →依照提示輸入密碼 → 選擇提款金額 →依照提示取出卡片→拿回現金 → 完成交易

    這就是我對提款流程運作上的解釋,也就是一個「概念模型」。但問題來了,操作提款機的概念模型從何而來 ? 假如我是第一次使用提款機,概念模型還不存在時,我要如何提款? 書中提供的解釋是:

    概念模型往往是從機器本身推測出來的

    p.53

    由此可知,透過機器本身提供的線索(指意、預設用途、使用局限、對應性、回饋)來形成概念模型,例如我可以透過畫面文字的「指意」告訴我要先插入卡片,找到可以插入卡片的位置(「使用局限」),透過聲音、文字的「指意」與「回饋」選擇我需要的提款服務,再依照畫面的說明,點擊「對應」到的金額按鈕,等待提示完成提款任務。透過「可見性的」線索推測出提款行為的概念模型,而這樣的操作經驗,就會成為我對提款行為的「概念模型」。

    心理模型與實現模型

    提款機在本身的物理結構上,或許有提供一些可操作的線索,但在完整的提款流程中,除了提款機的物理特徵外,提款機的操作介面的互動方式也很重要,那設計師又要根據什麼來設計提款機的介面呢?因此這邊就要提到「心理模型(mental model)」:

    心理模型(Mental Model):人們對於事物如何運作的理解。

    p.53

    心理模型在本書中沒有太多的著墨,因此我再補上另一本書《一目了然(簡):web和移動應用設計通識方法》,書中第五章有針對心理模型做了比較完整的解釋(書中稱「心智模型」)。

    通常好的產品的開發過程,一開始就會納入使用者的「心理模型」,這也就是「使用者經驗分析」的重要性,設計師透過收集使用者的心理模型,了解一般人對於事物如何的運作解釋,開發出符合一般人使用的概念模型。

    理想上,好的概念模型會符合一般使用者的心理模型,也就達成「易理解性」的設計目標。另外,如果不是用「心理模型」來開發產品,也就是產品末經過「設計」,在《一目了然(簡):web和移動應用設計通識方法》書中則稱之為「實現模型(implementation model)。

    實現模型(Implementation model):是已經設計好的產品(通常未經過「設計」),直接反映系統的底層細節,它不關心系統的用戶,通常只是取悅他的創造者。

    《一目了然(簡):web和移動應用設計通識方法》-p.98

    那概念模型與心理模型還有實現模型有什麼差異? 其實好的概念模型會更貼近一般人的心理模型,不好的概念模型,通常會比較像是實現模型,但模型並沒有對錯 ,因為對於開發者而言,實現模型也就是他自己認為的心理模型或概念模型。例如下圖,

    cantread

    這是一個應用程式錯誤的提示框,對於一般使用者來說,就是一個標準的實現模型,使用者看到後,應該會完全看不懂這個提示框想表達的是什麼,可能是個錯誤吧,然後就關閉了,但是如果是開發這個應用程式的工程師,反而會覺得「原來如此」,接下來找出錯誤去修復,因為這個視窗不是給使用者看的,而是開發者。

    但並不是所有的產品都是容易理解的,通常使用者無法直接與設計師溝通,因此設計師完成一個產品的概念模型後,就得透過「系統印象」來與使用者進行溝通。

    系統印象

    系統印象(System Image):關於產品有關的說明資訊組合或是類似相關產品的經驗。

    p.58

    這邊我將書上的說明簡化,總而言之,設計師會透過「系統印象」跟使用者進行溝通,可能會是產品的物理特徵或是一份說明文件、一段操作影片,只要是能有助於傳達設計師的概念模型給使用者,並協助理解產品,都稱為系統印象。系統印象的責任在於溝通,讓使用者能夠理解產品的使用方式。當然如果產品本身的概念模型夠符合使用者的心理模型,那系統印象就顯的沒那麼的重要了。

    對於設計的意涵

    對設計師而言,開發產品能否考慮使用者的心理模型,絕對是一件很重要的事情,因為「易理解」是使用者能否順利操作產品的關鍵,因此重點在於「如何讓使用者能夠速且容易的理解並使用產品」,系統印象的方式肯定不是一個最好的方式,終究還是得回到使用者的研究與分析。

    而概念模型的發展通常不會一次到位,因為每一使用者的心理模型不會完全相同,而且心理模型並非固定常數,而是會受到不同環境因素而影響的變數,所以之後的迭代設計,就會是整個產品的發展重點。

    此外,使用者的心理模型並不是不能改變的,因為心理模型的形成與過去的經驗有關,如果是一個使用很久的概念模型,使用者可能也不會發現不合理的地方。舉個例來說,請回想一下捷運的購票機操作流程,是先投錢還是先選擇票種與票數? 我想有操作過的人,都會知道先選票再投錢,但再回想一下台鐵的購票機操作流程,是先投錢還是先選票種與票數?  請看下圖。

    632896955797949952

    以前的是先投錢再選票,所以我剛上台北搭捷運時,一開始錢投不進去(使用局限)讓我有點錯愕,當然目前的台鐵售票機也都改成先選票再投錢,而仔細思考,那一個概念模型才是一個好的模型呢? 感覺是先選擇票種、數量再投錢比較容易理解是吧,因為舊的機器,假設買的票價大於投的金額,會發現有些按鈕不能按,所以要再補足差額才能按,那為什麼不一開始選好,然後就把錢一次投完就好呢?  或許是跟以前直接跟站務人員買票是先給錢再拿票的習慣有關吧,而設計師在設計機器時,就把這樣的習慣變成一種概念模型了。而現在使用者的心理模型,也都被調整成先選擇後付款的操作方式了,這就是心理模型的改變。

    以上是我對於設計的心理學-概念模型的整理,其實此書對於概念模型的說明並沒有很完整,還有點抽象,建議搭配其他書籍。而「概念模型」是Norman的說法,其他的書籍大多是用心理模型或心智模型來解釋,所以有任何不清楚的地方或意見都歡迎交流。

    其他參考書單:
    《一目了然(簡):web和移動應用設計通識方法》
    《親愛的介面(簡):讓用戶樂於使用、愛不釋手》

    設計的心理學(4)— 對應性、回饋、使用局限

    繼上一篇介紹了預設用途與指意,這篇主要要來談一下另外三個設計原則:對應性、回饋、使用局限,最後一篇再來討論概念模型。

    預設用途與指意的應用方式,其實就是在於與操作者之間關係的互動與指引,在本書在第三章,有提到關於人類大腦的記憶結構與行為模式;總而言之,結論就是「大腦有時並不是那麼靠譜」,因此需要其他的設計原則來進行輔助,降低大腦的記憶與行為操作的負擔。
    而除了預設用途與指意外,對應性、回饋、使用局限也是常用的設計方法。

    對應性

    對應性(mapping):盡可能透過空間布局和時間上的配合,安排控制器和行動之間的相對關係。─p.103.

    對應性是從數學來的名詞,是指的是兩個集合元素間的關係。集合就是「一堆東西」,構成集合的就是元素,而找出元素之間的關係,就是對應的關係。雖然書上針對對應性有做一些說明,但我將對應性分成兩種概念:靜態對應、動態對應。這樣比較好理解。

    • 靜態對應
      就是空間配置上的對應,在生活中很常看見,像書上有提到瓦斯爐的配置方式,就是靜態對應的一種應用。
      下圖左邊是兩口式的瓦斯爐,一般使用者很容易就可以找到爐頭與按鈕的對應關係(左對左、右對右);而右圖則是三口的瓦斯爐,因為左邊有兩個爐頭,比較難確認對應的關係,因此可能要透過指意或其他方式來說明對應方式。
      mapping1
    • 動態對應
      就是兩個元素必須透過操作的動作,才能知道怎麼對應。例如車子的方向盤,車子行進中,方向盤往右邊轉,車子就會往右彎,向左轉,就會往左彎,是動態對應常見應用。而在app的介面上,資訊更新的方式,是由上而下,通常手勢往下滑可以獲取比較新的資訊,上滑則是比較舊的資訊,也是常見的動態對應方式。

    不管是靜態或是動態對應,對應性的目的在於操作者能夠容易理解或透過操作理解對應關係,來降低記憶負擔,而好的對應,當然就愈是自然愈好,所以書中有提到「自然對應」:

    自然對應是指控制的方式和被控制的對象之間有顯而易見的關係

    p.149.

    但對於「自然」這定義,其實也會受到許多文化或是習慣的侷限,像是不同國家文字的閱讀方向就會不同、汽車的左駕或右駕、飲食習慣、社交禮儀…等等。因此自然對應會隨著文化而改變-p.152.,這是設計師在設計思考時必須考慮到的,否則可能會做出讓人匪夷所思的產品。

    回饋

    回饋(Feedback):對操作的結果和當前的狀態,提供完整和連續的訊息。-p.103.

    回饋的概念,書中有提到,是傳達一個動作的結果,是控制理論(Control theory)和資訊理論(Information theory)中眾所皆知的概念-p.50.,其實我覺得更像心理學的「操作制約(Operant conditioning)」理論,操作者主動的行為,得到一個行為後的結果,就是回饋。在操作制約最有名的實驗就是斯金納箱(Skinner Box)。

    skinner box

    上圖就是斯金納箱的實驗,透過裝置,小老鼠主動按壓壓杆得到食物(回饋),而認知並學習這樣的操作模式,回饋在整個實驗中,是很關鍵的一個因素。

    回饋的方式有那些?其實回饋與指意有關係,回饋是透過指意來完成,指意是在行為前,回饋是在行為後,因此透過指意的方式(視覺、聽覺、觸覺),都能讓操作者知道他的行為有沒有結果。

    而回饋用在設計上,原則就是要立即、清楚,且不能甘擾到使用者的操作,此外,使用者在操作前得知的訊息(知道怎麼做),稱之為「前饋(feedforward)」,也很重要,因為有些資訊可以前饋,那就前饋,回饋應該要出現在使用者是不容易發現錯誤的位置。

    taxsys

    上圖是台灣的報稅系統,在使用憑證時,會要求輸入pin碼,如果使用者不是經常使用(報稅一年一次),可能會不記得pin碼是什麼,於是我輸入了第一次「0000」,後來出來的視窗是「預設pin碼是6~8碼」,我當下的想法是:

    youshouldtoldme

    更可怕的是,pin只能輸入三次,三次都不正確就會鎖卡,在這個畫面中完全沒有告知,所以當三次錯誤發生,會立即的得到一個非常清楚的回饋:「你被鎖卡了,請到就近的服務站進行解鎖」,這就是一個讓人傷心生氣的回饋。

    使用局限

    使用局限(Constraints):提供物理、邏輯、語義和文化性的限制來引導行動,減少多餘的選擇。-p.103.

    使用局限在本書花了一個章節去說明,但在這邊我簡單的帶過就好,有興趣可以去看一下書的內容。使用局限的目的,在於確保使用者操作正確,避免不必要的錯誤發生,因此減少多餘的選擇,來降低操作者操作上的負擔。

    使用局限的應用,最為直覺得就是「Poka-yake」(防呆裝置),這項技術是在生產過程中,透過一些固定零件的限制設備的操作,使它不致出錯。這樣的的技術也廣泛的應用在我們的生活中,像是一些線材的接頭,usb、hdmi、記憶卡…等等,是屬於物理性的局限。

    提到物理性的局限在書中p.175 有提到強制性機能的應用,是屬於物理性局限的形式,其實在介面設計時,還蠻常見到的,強制性機能有三種方式:互鎖、鎖入和對外封鎖。

    • 互鎖(interlocks)
      互鎖就是確定操作必需遵循正確的順序。—p.176.
      互鎖的應用在實體上很常見,像是微波爐運作時,突然打開就會自動關閉電源,或是手排汽車,在切換檔次時必須腳踏離合器,都是常見的互鎖應用;而在介面上,我要大力推薦一個網站:
      uxpin-ebooks (電子書是免費的!)
      這個網站有提供很多很棒的跟介面設計相關的電子書,是很好的資源。但電子書不能直接下載,必需要輸入mail後,發送下載連結至你的信箱,再從信箱的連結點擊下載,這就是一個很棒的互鎖設計。
      interlcok上圖就是要下載電子書時的畫面。(這個資源很棒!)
      延申思考:為什麼用互鎖的方式讓使用者下載電子書?而不直接提供連結呢?
    • 鎖入(lock-ins)
      鎖入就是防止一個人離開某個區域。—p.177.
      「鎖入」這個名字從中文看不好懂,可以記成「鎖在(lock)裡面(in)」,好記多了。在介面設計上是很常見到的方式,想像編輯一些文書軟體時,在還沒存檔的情況下,點擊關閉的話,會出現提示窗詢問是否要存檔再再關閉,就是鎖入應用。
      lockin
      上圖就是photoshop未存檔關閉時出現的鎖入對話框。
    • 對外封鎖(lock-outs)
      對外封鎖是防止有人進入危險的空間,阻止意外事件的發生。—p.178
      一樣從字面翻譯「鎖在(lock)外面(outs)」,比較好記,就是禁止訪問某些區域,在介面設計在也很常見,記得在winxp轉到win7時,微軟把「權限管理」功能加進去,有一段時間很難以適應這樣的操作方式,因為在安裝軟體時,如果沒有透過「系統管理者權限」進行安裝,大多的軟體都會安裝失敗,這就是對外封鎖,透過權限管理禁止一些不安全的行為。
      lockout上圖是mac在進行一些安全性更改的對外封鎖視窗,要在mac要安裝不屬於app store的應用程式,就得經過這道程序,要透過管理者授權允許從其他來源安裝此應用程式,這就是對外封鎖的應用方式。

    以上是我的心得整理,更多的使用局限可以去翻翻書,我在這邊只提一些我覺得比較重要的觀念,下一篇會來討論一下概念模型!!
    有任何疑問或想討論,都歡迎交流唷!!

    設計的心理學(3)— 預設用途與指意

    這篇來討論一下六大設計原則中的預設用途(Affordance)、指意(Signifiers)。

    為什麼這兩項要一起討論,因為預設用途與指意某種程度上是一個很類似概念,不容易區分且容易混淆。先來討論預設用途。

    預設用途(Affordance)

    什麼是預設用途(Affordance)? 書中的說明是:

    預設用途是物體的屬性和操作者能否使用、如何使用這個物體的相對關係— p38

    另在wiki上找到原文的定義的來源:

    An affordance is a relationship between the properties of an object and the capabilities of the agent that determine just how the object could possibly be used.

    Don Norman (2013). The Design of Everyday Things (Revised and expanded ed.). Basic Books. p. 11. ISBN 978-0465050659.

    中文或稱環境賦使、可操作暗示、支應性、示能性,而不管從中文或是英文的意思來看,預設用途的重點都在調強人與環境或物體之間的「關係(relationship)」,但「關係」如何決定?根據書中的說明是:

    1. 物體的屬性
    2. 操作者的能力

    只要二個條件同時滿足,就可能存在「關係」。也就是說,物體本身存在一些特性,這樣特性能夠暗示操作者在能力的範圍內能夠與其互動的可能性。例如:當我們腿酸了,我們試著去找到一個擁有支撐的功能特性的物體「椅子」,它就提供「坐上去」這種預設用途。我們口渴想喝水,會去找可以承載水的物體「杯子」,它就存在提供「裝水」的預設用途。

    那問題來了,假設操作者沒有能力上的問題,我們怎麼知道椅子是用來坐的,杯子是用來裝水的呢? 其實一般人並不會意識到這樣的問題,我們會很直覺的採取行動。吉伯森(J.J.Gibson)他以完形(Gestalt)心理學為基礎,所發展的吉伯森學派(Gibsonian),對於這樣子的行動提出解釋,他認為,所有的感官是一起作用的,而我們感知到對世界的訊息已經是這些感官綜合的結果,是物體告訴人們,如何與其互動,並不需要經過大腦的處理或是認知過程。

    不同的預設用途

    雖然吉伯森對於操作者與物體互動的關係提出解釋,但操作者與物體的關係有時很難明確,因為一個物體可能有擁有不同的屬性,不同的操作者由於能力的不同對於預設用途的判斷也可能存在差異。例如:折凳的預設用途。

    chair

    折凳的預設用途對一般人來說是用來「坐」的,但隨著操作者能力的不同預設用途也會不同,因此折凳有也攻擊他人的預設用途,因為他有好收納、堅固的屬性。(取自周星馳電影「食神」)

    反向的預設用途

    此外書中有提到反向的預設用途,雖然沒有明確定義,但根據書上的舉例,我下的解釋是:「物體的屬性讓操作者的行為結果與預期相反」,書中舉的例是玻璃,玻璃是透明的,看起來是可以穿透但卻無法穿透,所以會發生有些人撞到玻璃狀況;另一個我想到的就是小朋友常常會用手指去滑動沒有觸控功能的螢幕,也是行為的結果與預期相反的例子。下圖則是另一個反向預設用途的經典案例。

    gun

    一般來說,手槍是槍口朝外擊發對於操作者來說是預設用途,但電影中這把槍稱「古靈精怪槍」,第一次擊發子彈會往後射,完全是反向預設用途的應用。(取自周星馳電影「國產零零柒」)

    所以我們可以了解預設用途有時並不是很明確,為了強化或是明確指出物體的特性或與其互動的方式,作者提出另一個設計原則,「指意(signifiers)」。

    指意(Signifiers)

    能向人傳達適當的行為方式的指示方法,包括符號、聲音、以及所有能被知覺的信號。

    指意(或稱「意符」),源自於符號學,作者將其用在設計領域,指意的概念很好理解,就是讓預設用途更加明確,透過任何指示的方式,可能是圖像、聲音、文字…等等。對設計師而言,指意的運用更加的廣泛明確,例如:一扇門預設用途是開門或是關門,但沒有任何的提示下,操作者沒辦法知道要用什麼方式去開這扇或關這扇門,所以指意這時就可以發揮作用,告訴操作者該如何與其互動。

    pushnpull1

    指意是一個很明確的提醒或暗示,所以錯誤的指意,反而會引起操作者的混淆,所以在使用上要特別謹慎。

    pushnpull2

    像是我在網路上找到這張圖,這扇門手把上寫了push,但門上的玻璃箭頭是往兩邊指,所以這扇門到底是往內推還是往兩側推?

    運用在介面設計

    以上我整理出預設用途與指意的內容與說明,但是身為設計師最在意的是,如何使用在介面設計上?什麼時候我們要用預設用途?什麼時候要需要用到指意?在預設用途不清楚的時候就運用指意,這樣的做法,個人認為沒有解決真正的問題。

    先來思考一下,近年介面設計的發展。

    擬真化設計 vs 預設用途

    在iOS7之前,介面設計講求的是擬真化(Skeuomorphism),也就是所有的物件畫的愈像真的愈好,我認為就是預設用途的一種應用。在電容式觸控螢幕(或是說ipPhone)還沒普及前,我們使用的是實體按鍵的的鍵盤,到了iphone的出現,鍵盤被觸控螢幕取代,而為了讓使用者在操作觸控螢幕更加的直覺,所有的介面都盡量仿真,按鈕就要畫的跟真的一樣,使用者才會知道是按鈕,轉盤也要真的像轉盤,使用者才會知道它可以調整音量大小,當然這樣的風格在當時流行了一陣子。

    扁平化設計vs指意

    後來iOS7與Google Material Design的出現,開始了扁平化(Flat design)設計的風格,扁平化設計我認為就是指意的表現方式,因為扁平所以需要透過更多的「指意」來讓使用者完成任務,記得iOS7剛推出時評價兩極,使用者最常遇到的問題就是,到底那裡可以點(找不到按鈕),但隨者扁平化設計的普及與改良,使用者也就漸漸的習慣這樣的操作方式。

    Calc-App-Comparisons

    上圖左邊是擬真化設計的計算機,每個按鈕的樣式,就像真的按鈕一樣,而右邊是扁平化的計算機,按鈕沒有多餘的光影效果,但由於觸控螢幕的普及,使用者仍然能夠知道怎麼使用。

    所以到底是預設用途好用還是指意好用?擬真很直覺但很難維護,光要畫出擬真風格的介面就夠累的了,加上螢幕的破碎化,會搞死很多設計師…。扁平化的設計不夠直覺、明確…

    但其實在本書的p42,有一句還蠻關鍵的話:「預設用途決定能採取的行動,指意提示行動在哪裡發生」,所以預設用途的應用,之後應該會著重在使用者行為的分析上,來「預測」或「揣摩」使用者的所要採取的行動,當行動發生再透過指意來完成一連串的操作任務;基本上指意的應用是明確的,但預設用途的應用會更著重行為的互動上面,這兩個原則並不衝突,可以同時存在。例如,有使用 iPhone 的人,使用瀏覽器瀏覽網頁時,如何回到上一個頁面?

    兩種方式:手指往螢幕右邊撥、或點返回的箭頭。

    gesture

    手指往右撥就是預設用途,點返回箭頭就是指意,點返回箭頭沒什麼問題,但我們怎麼知道往右撥會回到上一頁? 這就是預設用途的應用,這跟前面提到的認知有關,因此並不是預設用途不清楚的時候使用指意,而是要觀察並預測使用者的操作方式,並在正確的位置上提供指意,這才能提供良好介面操作體驗。

    這幾年Material Design的發展,也慢慢的收斂到這樣的方式,扁平但卻真實,這也目前介面設計的趨勢。

    但只靠預設用途與指意是不夠的,因為當預設用途或指意過多,使用者往往會記不得有那些互動方式,因此才有接下來的其他四個設計原則,幫助使用者完成介面操作的任務。