點燃互動體驗!探索UI/UX Hover按鈕回應的設計趨勢與最佳實踐

文、Solis

續上一篇提到的「介面設計原則」,第二個重要的原則即是「回應」,或稱為「反應」、「反饋」

來,拿起身旁的冷氣遙控器,對著冷氣按一下開關,冷氣是開是關不重要,重要的是,你應該會聽到一聲「嗶」!

這一聲「嗶」,代表的就是冷氣回應給使用者說:我接收到你的指令了!

如果沒有這一個回應,那我們就只能觀察冷氣的其他部分像是電源指示燈、出風口葉片等,而這些其實也是一種回應,只是必須透過我們主動的觀察,跟聲音比起來,就沒那麼方便了。

閱讀全文 →

介面設計原則大揭密:掌握這些技巧,成為優秀的產品設計師

文、Solis

有一個你完全沒用過的機器物件之類的,你是不是能第一眼就能理解怎麼使用?

正確清楚的提示,就是為了能讓使用者在直覺的狀況下瞭解物件的使用,這種直覺的狀態又分兩種,一種是人體工學情報,一種是視覺情報。

人體工學情報比較單純,大多數的狀況就不是靠眼睛取得或是理解一個物件的使用方法,別忘了,我們曾經提過,介面無所不在,並不是眼睛看到的東西才算介面,主要是依據人體本身的構造進行介面規劃。

閱讀全文 →

想要從事介面設計師的工作?那就先來了解什麼是介面設計(UI/UX)

文、Solis 老師

以英文來說,介面設計可以分成兩部分,就是 User Interface 以及 User Experience。

如果我們就字面上的翻譯來說,User Interface可以直接翻譯成使用者介面,又簡稱 UI;而 User Experience 則可以翻譯成使用者體驗,簡稱為 UE 或是 UX。

介面設計的核心就是體驗

Photo credit:Pexels

外觀與功能究竟哪項重要?

不可否認的,我們都希望兩者兼顧,但是如果只能挑一個,或是硬要排個先後順序,那一項會比較重要呢?

以下選擇我們思考思考:

  1. 一盤好吃,但是沒有啥擺盤美感的炒飯 VS 擺盤漂亮精美,但是飯沒炒開、沒加食鹽分量又少的炒飯。
  2. 一杯沒有裝飾,但是酸甜平衡酒感適中的調酒 VS 裝飾漂亮,但是沒有酒感的調酒。
  3. 一棟外觀普通老舊,但是內裝實用,乾淨舒服的房子 VS 一棟外觀亮麗豪華,但是會漏水的房子。
  4. 一個花心,在他眼中妳是可有可無的帥男孩 VS 一個長相不出眾,有肚子,但是真心對妳好的男生。

好啦,我知道第四項裡面,還是有人要選帥帥男孩。

當然,在最理想的狀況下,好用又好看,就會是一件完美的事情!不過若是在無法兼顧狀況裡,「好用」其實是比「好看」重要得多的。

試著想想,日常生活當中其實我們都會遇到不少中看不中用的物品;相比較起來,「實用」依然是我們在使用一個物品的時候,最重要的一件事情,也就是我們常常在設計領域中提到的「使用性」。

Photo credit:Pexels

使用性的境界

一般來說,介面設計有三個層次的境界,由下往上分別是:

1. 可學習但不可記憶

有沒有這樣的經驗,一台麵包機送到家裡,快樂的拆箱之後,拿出各項配件清洗,再從冰箱裡拿出了預備好的材料,下一步呢?

對,大部分的狀況就是把說明書拿出來,好好的閱讀一遍,然後照著說明書上的步驟操作,幾個小時之後,就可以開心地吃剛烤出來的新鮮麵包!

一周後,又想烤麵包了?那就一樣的步驟再來一次吧!

不過這時候有兩種狀況了,如果我們又需要把說明書拿出來照著操作,那麼這部分就有可能是這一層的境界,也就是說,這個使用的介面,無法讓我們在極短時間內學習完成,於是每次使用時都需要說明書的指引。

當然或許有人會說,有些人的記性比較不好,所以就算是不太複雜的步驟,也不一定能在短時間內記住。

好吧,我們當然不能否認這種可能性,但這進一步牽扯到目標對象的分析,就不再這邊深入討論,只說結論:如果主要目標對象群就是記性不好的那群人,那我們就不應該設計出讓這些人不好學習記憶的介面。

那如果第二次或是第三次,使用者就記住了怎麼使用呢?那就進入第二層境界了

2. 可學習並可記憶

可記憶這件事情分成兩種。

以剛剛麵包機的例子來說,就是第二次第三次之後,可以很自然地不看說明書,也可以完成烤麵包的任務,這樣就表示使用者已經將麵包機的使用過程「記憶」了下來。

而另一種意義是,如果隔了三個月都沒有使用這台機器烤麵包,那麼忘記怎麼使用自然也是正常的事情,不過若使用者在介面上摸索一下後,就能夠想起使用方法與過程,這也屬於是可以記憶的一種形式。

3. 直覺可用

直覺可用,對!就是字面上的意思,使用者看到這介面,直接就知道要怎樣去使用這台機器,無須利用說明書或是其他的外在協助。

而既然直覺就知道怎麼使用,當然也就沒有能不能記憶的問題了,簡單流暢的使用流程,清楚明白的視覺介面,是達成直覺可用的兩大條件!

介面的定義

我們可以聊聊介面的定義了,其實中文「介面」二字,事實上包含英文的「UI」、「UX」兩個項目,因為我們已經知道,介面設計的核心在於體驗,也就是需要達到好的使用性,所以「UI」設計,必須能實現原始的「UX」規劃,因此在設計流程上,都是先UX,再UI,如果沒有先行規劃UX,則做出來的UI就往往只是在視覺上做文章罷了。

所以我們做個簡單的定義如下:

UX,User Experience,用以判斷使用性的好壞,本質上就是使用者在使用時的主觀感受,這個議題牽涉到很多領域,但不管怎麼研究,使用者永遠是最重要的研究標的。

UI,User Interface,使用者與被使用的物件之間,溝通的橋樑,是一個輸入使用者指令輸入、物件狀態輸出的中介,好的介面設計將能提供好的使用性,因此,介面設計中UI、UX兩者缺一不可!

加入菜鳥救星官方Line並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!