【產品互動與體驗設計-單元 5】使用者介面設計流程

ux.3toryu
UX 三刀流
Published in
24 min readDec 11, 2022

這裡是 UX 三刀流,我們透過分享系統化的知識與大家交流 UX。

在這邊你可以獲得與 hahow 課程相同的文字版內容;並且我們不定期舉辦免費的講座、AMA、共學讀書會。關注 UX三刀流 Telegram 才不會錯過最新的消息和學習資源,並和其他 Uxer 交流!

這是一門結合用戶需求設計的先見、商業思維以及數據分析的產品設計課程。在UX產品互動與體驗設計中,我們將討論從概念設計至原型設計,不同設計階段的重點為何。在「使用者介面設計流程」這個章節裡,我們會首先了解,使用者介面設計是什麼?介面設計的角色為何,以及了解身為一個使用者體驗設計師,在介面設計流程,我們扮演什麼樣的角色。本章節將分為兩個重點:

1. 使用者介面設計的角色
2. 使用者介面設計的流程

讓我們在開始前看一段職場小情境:

介面設計師不是美工

隨著產品的需求越來越清楚,菜雞已經把需求定義好了,而且還畫了介面的線框圖,他拿著線框圖請設計師幫他製作美美的介面,設計師看著介面上的線框圖告訴他:這個控制元件似乎用的不太合理,因為介面上的選項不多,所以我們似乎只要直接把選項列出來,給使用者選擇,不需要使用到下拉選單;菜雞當然也提出他的設計考量:他說因為手機介面,空間顯示的位置比較少,所以用下拉式的選單,比較不用把選項全部列出來,可以節省顯示的空間。

菜雞對於這一來一往的討論,有點不耐煩,他說介面設計師不是幫我把我的介面美術,設計的好看就好了嗎?為什麼這麼想要動手改我設計的互動呢?

其實介面設計師才不是美工。我們的目的是讓人們能夠體驗更好的介面,而美術中的視覺設計,只是達到這個目的的一種方式而已。

一、使用者介面設計的角色

在資訊架構的章節,我們了解產品跟使用者做人機互動的溝通,其實就是一連串的「資訊溝通」。經過從抽象到具體來完成產品的概念,從產品概念完成度低到完成度高,這中間就是經過使用者體驗設計師跟 UI 設計師一起合作,所共同創造出來的結果。

在分工上面,當產品的資訊還是抽象的時候,我們必須要清楚的了解使用者的需求,因為網站本身、資訊產品本身的設計,就是在提供符合使用者需求跟使用目標所需要的一系列資訊。

接下來的功能規劃、內容需求的規劃,以及互動設計、資訊架構規劃,到這個範圍,大概都是使用者體驗設計師所需要專注的能力。

當然我們在跟 UI 設計師溝通的時候,也會依著產品體驗設計師跟介面設計師的分工,來決定 UX 設計師要在 UI 設計做到哪一個程度,這包括介面的框線圖、介面上的導覽設計、資訊設計,有些時候是由使用者體驗設計師完成、有些時候則是由介面設計師來協助完成。所以坊間的工作才會有UI/UX 的設計師,這是因為每一家公司企業的規模不同,所以人員在設計流程的分工,也會不同。

介面資訊的設計以及導覽的設計,在這一塊就是 UI 設計師經常與體驗設計師要協同合作,或者是工作可能會有重複的範圍;而介面設計師,會更專注於運用使用者介面設計的原則、規範以及擁有更好的審美能力,來做介面的視覺設計。

那麼我們更具體的來看一下,UI 跟 UX 設計師,在產品設計過程是怎麼樣做分工的?

其實概念上 UI 設計師,更重視設計跟互動細節的安排。
特別是介面的「原件」跟介面的「表現」更重視互動的設計元素,譬如說像按鈕文字的表現、介面控制元件的使用;而 UX 設計師更重視人跟系統互動的「邏輯」跟「規則」譬如功能的架構,以及人在介面之間的互動流程 。

UI 設計師因為有更好的美感表現,所以更重視人們在視覺上的感受;而 UX 設計師當然就是要鎖定目標族群,滿足目標族群對於產品的使用需求。

產品介面的最後一個步驟是由 UI 設計師將其設計完成的,而在這之前 UX 設計師,透過線框圖或者是可供測試溝通的雛形來跟 UI 設計師,進行介面布局以及介面完整性的討論,來達到「易用性」的目標。

UI 設計師更重視介面的每一頁細節跟互動的安排;而 UX 設計師則重視使用者對於產品互動流程整體的流暢度表現。

UI 設計師一般都比 UX 設計師有更好的美學素養,他們懂得如何運用美學的元素提供介面上有更多、更好的美感表現;而 UX 設計師因為能夠掌握使用者的需求,因此能夠提出更符合使用者需求的功能,來滿足使用者的使用目的。

UI 設計師懂得去表現跟創造介面的特質,特別是轉換品牌的元素,對於使用者有更多的感性訴求;而 UX 設計師更專注在解決使用者的問題,也就是我們常常說的「痛點」能夠被產品所提供的功能跟服務來做滿足。

UI 設計師會依循著設計的規範、設計的規則,運用各種的設計元件設計的樣式,來創造介面設計的表現,但這可能會依附著設計師本身的主觀偏好,因為有許多感性的設計,它並沒有一定的規則可循,所以個人的美學跟設計的素養,就會影響到最終 UI 上面的呈現。

而 UX 設計師更重視的是數據導向。不管是在產品的設計前中後,我們都可以透過不同的方法,擷取到來自於使用者、來自於系統的數據,幫助我們將產品做進一步的改善及優化。

這也是為什麼 UX 三刀流,我們重視「數據流」透過數據來幫助 UX 設計師在做決策的時候,能夠更有依據。

賈伯斯他有一句非常有名的名言:其實設計不應該只是著重在,產品看起來怎麼樣,或者是感覺起來怎麼樣,設計應該是要能夠幫助人們解決問題的。賈伯斯眼中的設計,不能只是虛有其表,大多數人誤以為外觀做得好就是設計,設計師拿到產品只要把它做得漂漂亮亮就好。我們心目中的設計並不是這樣。設計不只是外觀跟觸感而已,也要講究使用經驗。

Design is not just what it looks like and feels like. Design is how it work. — Steve Jobs

設計應該是在人們生活中,扮演有一定的功能跟角色,這也是 UI 跟 UI 設計師在圍繞一個產品設計時的分工及表現了。UX 設計師更重視產品功能性的表現,而 UI 設計師在「Look and Feel」這種感性的層級,能夠讓產品變得更有吸引力。

知名的互動設計網站 Interaction Design Foundation 定義了使用者體驗設計,它其實就是整個資訊服務產品,特別是介面上面使用者看起來的、感受起來的,以及操作過程。

包括了是不是能夠滿足使用者操作的目標?操作起來是不是有效率迅速容易學習?然後對整體的產品是否覺得滿意?這樣的一個易用性目標。

所以你可以發現說視覺跟美感,只是介面設計的一個部分而已,而我們追求的整體的使用者體驗設計,包含了這幾個不同的要素,針對易用性的部分,也包括了組成易用性的三個重要的要素,我們會在後面的易用性評估的章節,在以專門的影片跟大家做介紹。

接下來我們來看使用者體驗設計師以及介面設計師,在使用者介面設計的流程,我們分別做了哪些事情。

二、使用者介面設計的流程

我們先從使用者體驗設計師的觀點,來看介面設計的流程。要知道介面就是資訊跟使用者溝通的過程,而溝通的過程是一個認知的過程,所以也會回歸到我們之前提過的,產品的操作方式、介面的互動方式,要跟使用者所認知的心智模型互相匹配,並達到一致性的話,使用者在操作產品就能夠更為順手跟了解。

所以體驗設計師是非常重視互動要能夠合乎邏輯,那什麼叫做合乎邏輯呢?如果你有常在接觸一些網路文章,你會知道介面設計師跟使用者體驗設計師常常會透過類似介面線框圖來進行溝通。

但是我們在設計介面的時候,使用者體驗設計師並不是一開始就知道這一個互動流程是什麼,因為要知道使用者怎麼樣跟介面進行互動、在介面中互動的邏輯是什麼?那我們必先得知道使用者「執行任務」的「順序」是什麼?

也就是說,人們是為了什麼事而來操作介面?而人們「為了什麼」是「介面的操作流程」能夠被進行解構。但是人們做的這些事情,它背後到底是什麼樣的動機跟目的?所以我們才會去分析使用者的需求以及他的操作目標。

因此我們從頭來看,使用者體驗設計師在介面設計流程。

  • 第一個步驟:
    我們必須要很清楚了解,針對設計的對象在什麼樣的情境中,他們遇到的問題跟需求會是什麼?這個在前面的章節有和大家分享,如何進行情境的結構,以及從情境中去擷取使用者的需求。
  • 第二個步驟:
    當我們能夠掌握使用者需求的目標之後呢?就能夠進一步把完成需求的目標,進行操作任務的拆解,前面章節我們學過的任務分析,能夠幫助你理解從任務的層級、從操作作業的層級,了解人們如何一步一步的完成他的任務,也因為人們對於任務有一步一步的拆解,那自然我們能夠找到,哪一些部分是由人來執行?哪一些部分是由機器來執行?
    記得前面學過的章節任務分析,我們舉的是 ATM 提款機的例子。使用者要領多少錢?這個多少錢的數字是存在人們的腦內,機器要知道使用者要領的提款額度,使用者必須動動他的手指,在提款機的鍵盤輸入要提取的額度,而這個步驟的任務,就是使用者所操作的;提款機去運作它的機械,把鈔票吐出來給使用者,並且印出收據提供給使用者,這些就是機器所負責的部分。

所以任務的流程讓我們能夠清楚的了解,在對應使用者目標執行的前提底下,人跟機器他們之間應該要如何的來配合。當你充分了解這一個任務被完成的流程之後,人跟機器應該要如何的來配合,而設計的介面,不就是人來駕馭跟操作機器的流程嗎?

  • 第三個步驟:
    在這裡我們就可以依著為了讓使用者操作的任務,能夠順利的實現,介面上應該要安排哪些資訊?這些資訊應該要用什麼樣的呈現方式?或者是應該用什麼樣的控制元件來跟使用者進行互動?
    因此我們可以完成了一份所謂的「Wireflow」它是在介面的元件層級的,代表著你不用把介面每一個資訊的細節,都長得非常的精緻,反倒是你應該更著重在使用者介面跟使用者之間的「互動溝通的邏輯」也就是人們會在畫面上按哪些按鈕、接下來他大概會看到什麼樣的內容、這些內容大概是用什麼樣的方式佈置、它是透過什麼樣的介面控制元件跟使用者進行互動?
  • 第四個步驟:
    我們才更深入的去了解使用者跟這個介面怎麼樣進行具體互動的互動層級,在這裡你就可以知道,使用者具體的互動流程。譬如說他點了哪一些按鈕、這個按鈕是透過什麼樣的介面元件來呈現,甚至包括了使用者跟介面元件進行互動之後,是否會有提醒的訊息 / 回饋的內容,讓使用者掌握系統的情況。

而這些操作之後,在提醒的內容訊息,是透過彈出式的選單來提供?還是透過只是在介面上換換顏色、換換底色來讓使用者知道訊息的變化,這些更具體的把使用者互動流程進行實踐的過程,就是在「互動層級」的「使用者介面設計」。

所以在了解使用者跟介面互動,大概分成了介面互動的邏輯跟程序,以及使用者跟介面互動的時候,那個介面的長相如何、呈現跟表現是引用了哪些介面的元件,以及這些介面的佈置方式如何。過往這兩個不同的分野,大概也就是使用者介面設計師跟體驗設計師,在設計介面流程的時候,很常會遇到的兩個重點的分析過程。

那麼什麼叫做一個使用者操作系統的「Task Flow」呢?

任務流程,舉個例子來說:有一個使用者,他想要在網站上面購買一個外套,所以他在電商網站上挑選喜歡的產品、了解這件衣服的大小,然後決定把它加入購物車,或者是系統也提供他即時購買的功能。

使用者可以進一步的了解,這件衣服的大小是否合乎他的期待?如果是的話就進行結帳的動作,在結帳的時候使用者是否已經登入呢?如果使用者還沒有登入,那他是有註冊過的老會員的話,他可以透過輸入帳號密碼而登入;他如果是全新的會員的話,那他可能可以考慮用訪客權限進行結帳,或者是重新註冊一個全新的帳戶,來完成他的購物。

接下來他可以輸入運輸相關的資訊,例如:他的收件地址、收件人的聯絡方式,接著進行支付,確認支付的內容之後,由信用卡或者是線上支付平台進行訂單的處理,然後使用者會收到一封 Email,告訴他你的訂購已經成功。

過去在軟體設計的過程,我們很常使用這樣的任務分析流程,因為針對全新的軟體,我們可以去預想使用者跟系統互動的每一個互動流程跟細節,這裡講的每一個,包括了:使用者是直接購買,還是是放入購物車?註冊的時候使用者他是已經有帳號還是沒有帳號?在結帳的時候選擇用會員的方式結帳,還是用訪客方式的結帳?

也因為你在設計使用者跟軟體互動的流程時,你把這一些互動的細節全盤考慮到,那麼之後程式工程師在進行,程式實作的時候他當然會了解,我們必須要提供使用者有這不同的功能,這樣的表現方式雖然看似很有邏輯,也符合未來在開發過程的期待,但是它的缺點是這裡的每一個互動細節,都是冷冰冰的流程圖,我們實際上並不知道,使用者在登入的過程、在結帳的過程。

具體來說,他跟哪一些介面的元件進行互動?

所以任務的流程這樣的分析,他將人跟系統互動的整個邏輯表達得很好,但是缺少了介面元件的展示。而另一種我們熟悉的方式就是「 Wireframe」我們能夠用一種低成本、可溝通迅速有效率的表達的形式,來讓設計師將介面的每一頁概括的長相把它長齊全,所以在這裡我們可以看到,網頁上有不同的產品照片,而這裡也有不同的尺寸供使用者所選擇,當使用者想要把它加入購物車的時候,他是點擊網頁上什麼樣的位置,以及大概使用的元件。

Wireframe 的表達方式,當然比 Task Flow 的表達方式,更要能夠清楚展現在每一個互動流程中,特定介面頁面的具體長相。這對於軟體團隊中的前端工程師來說,更可以了解介面設計師所期待使用的互動元件,以及介面的佈局如何,當然也因為它的可視性的程度更高,也有助於不論我們跟使用者,或者是跟設計團隊的其他成員,討論介面操作過程中的互動品質,能夠有一個更具體的討論標的。

然而 Wireframe 的表達方式,雖然將特定的頁面表達完全,但是它卻缺少了介面中使用者操作過程頁面跟頁面之間轉換,或者是移動的線索。少了這些線索,我們容易陷於只看到畫面,而忘記了使用者跟產品互動的主體跟互動的順序及邏輯。

因此這兩種的表達方式在現在,大概都透過了 「Wireflows」這樣的方式來進行呈現,所謂的 Wireflows 就是擷取了 Task Flow 的優點,能夠表達介面之間互動的邏輯,同時也擷取了 Wireframe 的優點能夠去表現介面中,每一個畫面具體呈現的元素。能夠取到這兩種表達方式的優點,那麼介面設計師在設計的過程,即可兼顧使用者互動的邏輯、也可兼顧到介面中每一個互動的元素。

下圖為我的實驗室的學生,在針對理財主題的 App 軟體設計時,我們所進行的 Wireflows,而這種表達方式,也大概是目前最主流、能夠最有效率的來幫助體驗設計師跟介面設計師,精準溝通表達的方式。

接下來我們來從 UI 設計師的觀點,來了解一個完整的介面在被設計出來之前,設計師一連串的思考是什麼。一個已經上線的 App 跟你的互動介面的呈現,大概長的就是第 5 個 Prototype 這樣的長相了,它是一個非常高度擬真且對於資訊互動回饋,都已經非常精緻跟完整的介面表達方式:

所以前面提到設計師擁有好的介面佈局、美學的素養、對於介面互動元件的掌控,大概可以讓我們有一個非常清楚跟優雅的介面,這樣的原型表達方式,它可以運用介面設計的軟體譬如說 Adobe XD, Figma 等等,來讓介面設計更為真實。雖然我們都知道這樣的表現方式非常的清楚,可是他卻得要花上很長的討論時間跟更多的設計成本,因為設計其實是探索不確定性的過程,所以當我們要這種版本非常確定,離軟體開發或者是甚至跟上市的時候是高度擬真的版本,它必須要投入更長的時間、更高的成本來換取這樣優質的互動性。

所以在完成 Prototype 之前,設計師其實有一連串的思考,這些一連串的思考,大概就是在具體了解我們應該要怎麼呈現這些介面的內容,以及我們有多少的時間,可以投入互動設計的精緻化跟完整化。

當你在產品的啟動會議的時候,傾聽產品經理或者是 Product Owner 對於產品想像的描述時,在那個時間點,你其實腦袋裡面有些想法,就可以透過介面的縮圖來進行表現,呈現的是一個頁面層級的表達方式,在這裡甚至你連介面內部的細節都不需要去考慮,當我們開始對應到設計的功能,對於這個功能的模組有更具體的應用範圍時,這時候你可以透過圖塊框架的方式來呈現介面元件佈局的層次,這是什麼意思呢?舉例來講,當你把你的眼睛閉起來,你去回想今天有一個畫面是註冊頁面,那它大概是長什麼樣子、今天有一個介面的頁面是付款畫面,那它大概長的是什麼樣子、今天有一個頁面是社群頁面,它讓你能夠去瀏覽好友跟加好友,它大概長是什麼樣子。

其實我們過去,因為已經有很多次操作不同軟體的經驗,而這些操作的方式在手機上、在電腦上早就在我們腦內建立起一個大概的長相,這個大概的長相能夠引導我們對於互動所理解的心智模型,來對產品進行操作,所以當今天產品經理告訴你,我們有一個功能要發展時,那個功能所對應的大概長相,就可以透過圖塊的方式快速的來表達。

當然每一套軟體它有它自己所鎖定的重點主題,譬如說今天是娛樂型的社群跟專業型的社群跟求職型的社群,他們雖然都是社群網站,照理講在社群的表現頁面上面應該大同小異,但實際上,還是會有特定的介面需求在不同的設計主題上需要被應用,這時候前面所提到的 Wireframe ,就是介面設計師需要花更多的時間深入去完成的部分,因為在這裡介面設計師在完成線框圖的時候,他可以因為對於介面設計元件、控制元件的掌握程度,來將每一個介面頁面中所使用到的元件,更合理跟具體的應用以及表現出來,再加上視覺字型圖像,甚至考慮到邊界邊框,就可以有一個更完整的介面呈現,我們也可以把它叫做 「Mockup」

而到了介面設計風格已經完全能夠展現的層次,那時候離可以互動的 Prototype 大概只差我們在互動過程,這一個互動的回饋是不是動態的,能夠更串起人跟介面互動之間系統所給予的回饋等等的細節。

這是一個 Wireframe 的案例,延續著前面提到的理財投資軟體,我們過去在設計這個軟體的時候,即會考慮到每一個頁面它所承載的功能是什麼,在這裡這個功能,會透過哪一些資訊跟使用者來進行溝通。使用者如果要對這個介面進行互動,他可能可以透過哪些的元件互動?譬如說他是透過單選點擊的方式、還是是透過滑桿的方式進行操控,他是一個文字輸入框嗎?還是一個能夠透過簡單互動收集使用者意見的表情符號元件。

在這裡你並不需要去討論到更完整的細節,甚至連介面設計的元件,你只要能夠表示,我要在這裡透過這種方式讓使用者來跟介面進行互動就可以了。

因為在這裡目的是,盡可能架構出人跟系統可能的互動方式,之後再由介面設計師來完整頁面上面的每一個細節,這個階段所完成的 Wireframe 就是一個高度擬真、可以溝通的視覺傳遞方式,我們也會在易用性評估的過程,透過 Wireframe 這樣的層級,它看似不是這麼的擬真,可是實際上已經能夠跟使用者,具體的溝通軟體操作的過程,並用這種方式來進行測試,既可以取捨時間成本,以及拿捏互動設計品質之間的平衡,因為在這裡我們從使用者身上所發現的操作議題,都可以讓介面設計師、UX 設計師很容易再進行調整,最後有一個更確定的版本出來的時候,這時候大概就是把你的 Wireframe,轉換成介面設計原型的時候。

介面設計的原型,它可以是一個互動式的,或者是純粹靜態的,如果是一個靜態的視覺稿,我們會把它叫做「Mockup」它基本上已經能夠作為產品最終視覺上的表達了,這時候介面的視覺設計師,可以在介面上面有更多的視覺美學,以及提供更有情感、更有趣的互動表達方式。

在介面設計接近完成的時候,已經到達了修改的尾聲,基本上你已經在設計過程,將可調整介面優化的範圍進行了妥善的安排。至於怎麼樣叫做一個好的介面,如果我們還要進行進一步的優化,可能得要等到產品真正上市的時候,透過使用者跟介面互動的數據或者是使用者給予的意見回饋,我們才能夠進一步再找到介面優化的方向,當然在這裡你得要學會去取捨,一直優化介面的投入成本以及搶得市場先機之間的一個平衡

所以當介面開發接近完成的時候,我們開始會針對介面在使用者操作上,是具體如何作動的,有一份「介面的規格書」來跟工程師進行交流跟溝通,因為我們設計的介面,它僅僅只是視覺上的表達,即便你設計到 Prototype 的過程,它也只是互動邏輯上的呈現,但實際上這個介面在軟體具體執行上,它是屬於哪一些互動的模組?使用者眼睛所看到的資訊,是來自於哪一些資料庫的欄位?介面上面的顯示元件,有哪一些狀態上的切換?資料的層級、資料運用的型態規格、資料的長度(譬如說這個表格可以填幾個字)以及是否有一些連動的欄位需要並行思考或運算,還有其他的規格限制。

使用者在跟介面互動的時候,是不是有一些特別的動效音效?他是不是一個必須要填的欄位等等,都必須要讓工程團隊能夠清楚了解,這樣才有辦法將我們所設計的介面托付給工程團隊,讓他們可以接手來進行系統的實做。

當然我們這門課程,是為了使用者體驗設計師所設計。
如果你是介面設計師,你對於介面的視覺美學,還有介面互動軟體的操作有興趣,那推薦你去參考介面操作層級操作軟體教學相關的課程,在這門課我們並不會討論到具體的軟體操作,我們所講述的是,介面設計流程中的方法跟思維。

所以圍繞著介面設計的品質標準,產品要能夠符合使用者的需求,這一個需求在軟體上所轉換的功能,要能夠順利友善的跟使用者互動,最終能夠達到使用者更愉悅的體驗,在這裡其實體驗設計的工作者,跟 UI 的設計師有不同的專業跟知識能力的專注點,當然體驗設計師專注在使用者需求滿足,這包括協助產品經理進行設計的命題,族群的掌握跟使用者需求的擷取分析,但是一樣的情況,介面設計師在需求滿足層次也可以去思考。

今天介面是設計給哪一個族群的使用者所使用的,這些族群的使用者,他們對於介面的互動元素、對於介面的美感、對於介面元件的操作方式,是不是有特定的偏好?不同的族群可能因為具備了對於介面過去的背景知識不同,而對於介面有了不同的需求。所以功能層次的需求,可以透過體驗設計師來投入時間,而介面的需求則可以由介面設計師來進行掌握,體驗設計者更專注在人機互動設計的原則方法。

還有現在我們在使用到的介面通常是為了要承載網路服務軟體,所提供的互動形式,因此同樣一個網路服務,它可能出現在網站上、它可能出現在 App 上、它可能也有類似像對話機器人這樣的介面來跟使用者進行互動,因此你必須要學習,跨裝置如何安排使用者的互動形式,來讓它有一個更友善的互動過程,而介面設計師則可以更專注在了解各種介面設計的原則,並且學習如何駕馭原型工具的使用,甚至針對一些微型互動介面上面的動畫進行專精,因為這些都有助於提供友善的互動,甚至能夠提升使用者跟介面操作愉悅的體驗。

介面設計系統 (Design System)

在企業中,也喜歡定義「介面設計系統」 (Design System),如上圖,每一個公司或每一個軟體,針對在這個軟體上面,所運用到的各種不同介面的元件,包括了字型顏色互動的元件等等都有一定的規範,這時候當介面設計師、體驗設計師,甚至工程部門的人員在進行介面實做的分工時,我們會非常清楚的知道在整個產品上,應該用哪些介面設計的元件,唯有如此才能夠取到介面設計的「一致性」。因為我們就像是有一本介面的字典,是專門為了我們公司或我們的產品而生,去建造一個介面的設計系統。

除了有助於跨部門的溝通之外,在管理方面這也有助於當設計人員流動或者是離職的時候,我們能夠把整個介面設計的核心知識,掌握在介面設計的系統之中,介面設計師對於色彩跟使用者心理之間的關係,以及每一年都有不同流行主題的介面視覺風格,甚至自身有獨到的介面美學素養,都是能夠有助於我們的軟體提供給使用者更好的體驗所需要的能力,而體驗設計師在介面的風格上,一樣可以參與設計的討論。

我們實際上並不需要能夠像介面設計師一樣,完成一份非常優雅、精緻美觀的介面設計,但是你必須得要能夠賞析,什麼樣叫做一個具有美感設計風格優雅的介面。

實際上來自全球,有許多的介面設計師,他們有非常多的作品,或者是將他們的作品變成了介面設計的模板商品,在網路上進行販售,這些介面設計的模板非常的多,而且品質也非常非常的好,身為一個體驗設計者,如果你可以在每一次的軟體設計之前,也能夠花一些時間去找到跟你的軟體能夠相配稱的介面模板,我相信也有助於你想要把心中所認同的美感跟介面設計師溝通的時候,透過這個模板來強化你們之間的溝通品質。

介面模版風格 (UI Kit Templates)

對於原型工具的使用,企業中其他常見的軟體也有像是 Sketch 這類的軟體,我們前面提到的理財資訊軟體,同學們在學校就是透過 Figma、Adobe XD 的軟體來進行實作,而這兩個軟體是市場上目前最主流的軟體,特別是 Figma 有越來越多的網路新創公司都在使用 Figma 來當做介面原型的工具,如果你還沒有著手開始學習介面設計的原型工具,那這兩個工具,是我特別推薦的。

原型工具的使用(Prototyping Tools)

我們現在每日使用的軟體,大概脫離不了這幾家市場上的大公司,如果你使用的是手機,那大概是由 Google 主導安卓的介面,而 Apple 主導 iPhone 跟 iPad 的介面,微軟也在許多的辦公軟體跟平板的電腦上擁有蠻高的市佔,因此當你的軟體,未來是瞄準上架到這不同的軟體平台時,我們在設計上就不能夠單純只是依靠自己對於使用者需求的理解,而提出不同的設計想法,更需要依附著設計大廠,他們所提供的介面設計規範,在這些規範底下才能夠設計出更符合使用者對於這些軟體操作的期待,甚至如果沒有符合大廠的設計規範,在上架你的 App 送申請的時候,有可能遭到退件的安排,這是因為對於軟體大廠來說提供介面的設計規範,有助於讓全世界所有的軟體設計師介面設計師,將使用者的互動聚焦在他們所提供的規範主題底下,唯有如此才能夠讓這些軟體的使用者,有更一致的操作體驗。

大廠介面設計規範 (Design Guidelines)

在這個章節我們介紹了:介面設計的角色、介面設計的流程。
你也清楚了解,體驗設計師在介面設計的過程扮演什麼樣的角色,以及我們如何跟介面設計師來進行合理的分工,整門課程我們提到了很多次介面設計的原則、介面設計的元件、大廠的規範等等。

在下一節課程,我們會更深入的跟大家討論介面設計的原則,幫助大家更認識介面具體執行上的細節。

我們下一個章節見:)

by 助教 Lucy

註:
加入UX三刀流 Telegram,獲得更多免費學習資源。
若你想收藏影音版的內容,或是重複收看的需求,可以參考 hahow 的「用戶x商業x數據 | UX‧三刀流產品體驗設計」版本!
持續關注 medium文章,不錯過文字版內容。

作者資訊

經歷介紹

--

--