【連載】特定場景下的交互設計

特定場景下的交互與UI設計

上週在公司內部做了一次關於交互和UI設計的演講,整理完之後發現還有一些東西值得留下來。也算是把當時的逐字稿分享給大家,當然會稍微有些不同,逐字稿也是寫的慘不忍睹。閒言少敘,我們開始。

相信大家都在網上看過老羅(羅永浩)在星巴克打臉的視頻,這個視頻每次在老羅有什麼新聞的時候都會被挖出來發一遍,我們在這個視頻中還是可以看出很多東西的。 包括用戶體驗、營銷方法、甚至文化差異等等。真的很有意思。

首先我們要肯定星巴克這樣杯型的命名是有着他一套營銷邏輯的。星巴克的點單環節,可以說是一次遊戲、一次社交行爲及表演,客戶在此也得到了某種程度上的滿足。

但確實對於點單的客戶最初會造成很大困惑,這就和頁面一樣,如果沒有對場景進行分析,設計就會給用戶帶來困擾和一些非常不適的心裏感受。那麼設計出的輸出物也可能是一次交互設計和UI設計的失敗。


(圖一:失敗的設計)

我們首先來看這個界面(圖一),真的很好看很漂亮,按鈕的質感和配色都無可挑剔,但是大家有沒有注意到,這個管理上傳文件的彈窗在功能操作上的感受會讓人有和老羅一樣的感受。

它的界面有上傳、刪除、和取消功能,但我們看這張圖片,我們真的無法去判斷如何操作。它功能按鈕做的雖然很精緻,但是配色方面讓用戶覺得無從下手。我們經常作爲警示的紅色用到了取消,我們最常用的上傳功能用到了灰色,按照普通用戶的操作習慣來說,最長按的就是刪除的按鈕,顯然這是讓人崩潰的設計。我很難去快速的識別和操作。

看這些非常精美的按鈕,可以說UI做到了極致,那你可以說這是個好設計嗎?顯然不是,他錯在哪裏?錯在他脫離了場景,表意的換亂造成操作的不確定性和糟糕的用戶體驗。


(圖二:合格的設計)

我們在看下圖二顯然它是合格的,爲什麼呢?場景對了!藍色代表功能,灰色代表取消功能,紅色代表刪除並有提示作用。在上傳文件管理的操作場景下,這樣的表達就符合了這個場景的功能特點。

在看我們的題目,《特定場景下的交互與UI設計》我更想個他加個標題,設計中如何避免“讓老羅打臉”的尷尬。

我在接下來的文章中會從場景的定義和分析、場景分析對於交互、場景分析對於UI、綜合實例四個方面來說一下自己對於特定場景下設計的理解和感受。


下期預告:

場景的定義和分析

場景的定義和分析
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章