1. 程式人生 > >設計師自我提升三部曲

設計師自我提升三部曲

1. 分析使用者需求

分析使用者需求可能大部分設計師都覺得這是產品應該乾的活,我自己會畫圖就行了。但是如果不會分析使用者需求會制約設計師的進一步發展。

我先來舉個例子,大部分人在節假日期間經常會遇到買不到票的情況,這個時候一些人會選擇上車補票的形式。比如你要買南京到上海的火車票,但是發現直達的沒有了。你只能買到常州或者蘇州然後上車補票,這就產生了一個需求——給使用者展示途徑站點。我的確也收到這樣一個反饋。

如何在不打亂介面當前佈局的情況下展示途徑站點呢?只能使用彈框了,這是京東金融的方案。

互動案例:設計師完成自我提升的三個方向

京東金融這裡通過了一個彈框給使用者展示了途徑站點,看起來問題得到了完美解決。但是使用者要求展示途徑站點的根本原因是要上車補票,你不提供每個站點的餘票量,使用者還要自己挨個站點去查,非常的不方便。而支付寶就做的更人性化一點,直接過濾掉了無餘票的站點,使用者可以直接點選購買。在春運期間,支付寶這種速度上優勢對使用者的吸引力是巨大的。

從上面這個例子可以發現使用者有的時候無法準確表達的自己的需求。150年前你問一個人想要一個什麼樣的交通工具,他可能會說要一匹特別能跑的馬。其實本質就是對速度的追求,如果每個人都跑去馬場配種,那麼汽車永遠無法被製作出來。所以對於使用者的需求進行分析和提煉是非常有必要的。

2. 資訊架構的搭建

我一直都在強調設計師應該具備產品思維,這句話我可能每篇文章都要嘮叨一遍。但是如何去學呢?搭建產品的資訊框架是一個很好的入門課程。

互動案例:設計師完成自我提升的三個方向

要搭建資訊架構首先要知道什麼是資訊框架。資訊架構的本質就是分類。為什麼要進行分類?因為產品是眾多功能的集合體,不進行分類整合的話,使用者很難找到自己期望的功能。資訊架構不僅僅存在於網際網路產品中,還廣泛出現在日常生活裡。導檢視就是商場的資訊架構,目錄是書籍的資訊架構。不管是導檢視還是目錄,目的都是幫助使用者找到自己期望的店鋪或章節。那麼到了產品中,資訊架構的作用就是幫助使用者找到期望的功能。搭建合理的資訊框架要注意兩點:

2.1 “廣度”和“深度”的平衡

互動案例:設計師完成自我提升的三個方向

以上圖為例,使用者如果想修改自己的手勢密碼,必須要進入5級頁面,而一般的產品只需要進入4級頁面。層級過深的情況並非不可原諒,因為有的產品體系非常的龐雜,內容非常多。但是上面這個圖我們可以發現設定頁還有近一半的空間空著,這就是常見的窄而深模型。我們完全可以將一些功能前置到更低的層級,縮短使用者的查詢路徑。

互動案例:設計師完成自我提升的三個方向

既然有“窄而深”那麼肯定有“寬而淺”,下圖這個就是典型的寬而淺。

互動案例:設計師完成自我提升的三個方向

互動案例:設計師完成自我提升的三個方向

2.2 分類邏輯的混亂

互動案例:設計師完成自我提升的三個方向

還是同一個案例,如果你是使用者,打算修改手勢密碼,來到這個介面。你是會點選“賬戶安全中心”還是“密碼設定”?對於我來說,我會點選“密碼設定”,因為在我的認知裡,手勢密碼隸屬於登入密碼的範疇。而這裡是將手勢密碼放在賬戶安全中心裡,在我看來這樣的分類是不合邏輯的,會給使用者造成干擾。

3. 一致性原則

把一致性排在最後並不是說一致性不重要,恰恰相反,在我看來一個設計師對產品一致性的把控決定了他/她的上限。

最近我在整理第一季度使用者反饋的資料時發現,大部分使用者反饋的問題都在集中在有用性和易用性,說你們的產品應該新增哪些功能,介面設計需要優化或者其他自己在操作遇到的問題。很少有使用者(不超過3%)來提出產品一致性的問題,這個也容易理解。因為使用者的使用場景比較侷限,80%的使用者只用了20%的功能。以下圖為例,這是支付寶裡的客服聊天介面,你會發現這裡面的設計風格完全不一樣,看起來像是兩個版本。使用者很難發現,因為入口不一樣。而且就算髮現了,使用者也不願意去反饋,因為不影響正常操作。

互動案例:設計師完成自我提升的三個方向

一款產品的有用性和易用性會在版本迭代中可以得到優化,而一致性體驗可能做了好幾年還原地踏步。所以說產品一致性體驗的優化非常考驗一個設計師的自驅力,你不做也沒人發現問題,你做了會增加自己的工作量。

什麼是一致性原則?一致性原則是指產品在不同的場景下依然可以給使用者提供相同的體驗。這裡的場景可以細分成:產品線(特指大廠,同一品牌下有多個產品線)、平臺(iOS 和安卓)、終端(移動端和PC)以及產品內部不同的模組分割槽。

具體所表現出來的元素主要是介面佈局、配色、icon、元件,字型、插畫、操作手勢等。

以京東金融為例,其金額錄入報錯機制是:

  • 使用者可輸入超限的金額;

  • 在輸入框下方提供報錯文案;

  • 金額超限的情況下,按鈕置灰。

這種報錯機制無論是在頁面中還是彈框中都得到了很好的貫徹實施。

互動案例:設計師完成自我提升的三個方向

另外按鈕置灰還在其他介面中出現,很好的維持介面元素的一致性。

互動案例:設計師完成自我提升的三個方向

其實上面說起來非常簡單,但是真正能做到的產品卻很少。同樣的金額超限的場景,有的產品給出兩套完全不同的反饋方案。這樣的產品在市場上不在少數,究其原因是設計師沒有站在整個產品的維度去考慮。

互動案例:設計師完成自我提升的三個方向

一致性原則是建立在遵循設計規範的基礎上,安卓和iOS代表的是兩種不同的設計語言。你在安卓手機裡的應用推行iOS的設計規範,對熟悉了Material Design的使用者來說就會很違和。所以為了做到“入鄉隨俗”,有條件的話可以出兩套設計稿。以網易雲音樂為例:

互動案例:設計師完成自我提升的三個方向

互動案例:設計師完成自我提升的三個方向

甚至連loading樣式都做了兩套。

互動案例:設計師完成自我提升的三個方向

注意,我這裡說的是有條件,因為其實際的設計和開發成本是巨大的,不是每家公司都是大廠。

總結

統稱為設計界的使用者研究,互動設計,視覺設計