什麼是設計思維呢?顧名思義, 設計思維就是設計師用來思考問題和解決問題的方法。 如何培養設計思維?今天這篇用兩個實戰案例幫你一窺設計思維的奧妙。
我們先來看一個小測試:以下的方案中, 哪一個是好設計?
我們平時評判一個設計的好與壞, 很多時候都是從色彩好不好看、使用時有沒有可用性的問題等等角度來做出判斷。
那麼請大家來看一下, 這裡的兩個方案。
設計師日常工作中經常會碰到這樣的一些問題, 今天我要分享的設計思維就是用來解決這些問題的方法。
設計思維常用的工作方法
首先來看, 設計思維指導下的工作方法主要分為這四個步驟:洞察用戶, 然後進行科學合理的設計思考與轉化, 再下來是把想法製作成原型, 最後進行效果的評估。
今天我主要講的是前面兩點的具體執行方法。
2.1. 洞察用戶的重要方法 —— 移情
何謂移情呢?就是說在進行用戶調研的時候,
接下來我們通過一個案例來講解具體怎樣做到移情。
大家來看這三個介面, 從左往右依次是——我們要進行優化的現有產品的連絡人詳情頁、iOS系統的連絡人詳情頁、魅族手機連絡人詳情頁。 需求是, 對第一個頁面進行優化設計。 仔細看看這三個介面, 大家會不會覺得都是大同小異啊, 都是這裡有個頭像, 魅族這裡稍微不太一樣, 是橙色的這一大塊, 不過感覺也很一般啊。 下面的內容基本都是一行一行的電話號碼, 後面帶著短信或是其他圖示。 那麼, 怎麼去做優化呢?
設計師做了一件什麼事呢?他們沒有急於去畫圖討論, 而是去做用戶調研。 去了哪裡做調研呢?他們挑了一個形形色色人特別多的地方——北京南站。 怎麼做的呢?首先當然是觀察、但僅僅是觀察還是不夠的, 他們設計了一套任務,讓用戶在最自然真實的場景中去使用現有版本的連絡人詳情頁。比如說打電話給一個最近沒有聯繫也記不住他電話號碼的朋友,添加設計師到他的通訊錄中等等。最後的發現很有意思:
大部分用戶的大部分連絡人只有一個電話號碼
大部分用戶的大部分連絡人是沒有頭像的
打電話給連絡人是第一訴求
只有很少的使用者會給小部分連絡人設置備註等其他聯繫方式
操作環境往往是在行進中,單手操作
整理成圖表,大家可以看一下,給連絡人打電話是所有任務中失敗率最高的,而我們前面的結論中第3條就提到:給連絡人打電話是在這個頁面的第一訴求。
於是,通過這些調研,設計師做出了看似大膽實則非常合理的設計方案:
弱化頭像區域,採用模糊過的一張好看的圖片作為沒有設置頭像時的默認背景。既然打電話是第一訴求,就用極致的方式,把打電話按鈕放大,並且放置在單手最好點擊的位置區域。而當使用者設置頭像後,不再需要裁切成大頭照,直接以底圖的方式全屏顯示。當然,設計總是要考慮邊界情況,當使用者想設置更多資訊時,頁面也是可以承載的,內容向上頂,直到高度撐滿全屏,底部打電話按鈕會懸停在頁面最下方。
總結一下,要做到移情,首先要深入用戶,然後變成真實的用戶,最後,作為設計師,一定要跳出用戶,把設計方案做到超越用戶直白的需求,也就是我們常說的超預期。做到這些,創新設計,也就水到渠成了
2.2 設計思考方法 —— 回歸本源
講完了移情,我們再來聊聊設計思考的方法。主要分為以下三點:回歸本源、目標導向、視覺化思考。
首先我們來看一下回歸本源。回歸本源的意思就是分析問題的切入點,一定是背後的本質,千萬不要糾纏表像
還是來看一個例子。
這是我們產品中經常能夠見到的卡片設計。現在給大家看到這個卡片是一個課程卡片,它主要分為:封面、標題……。滑鼠移上去時,會有一個紅框。設計師在設計時設定的點擊區域為:點擊封面或者是標題,就可以跳轉到課程的介紹頁。但是,在產品即將上線時,這個項目的經理提出了一個質疑:可點擊區域為什麼不是整張卡片?
當我們遇到這樣的質疑時,首先不要慌張,不要因為他是經理是高層就盲目妥協,這樣的後果往往可能是一個糟糕設計的誕生。而是要撥開一層層的迷霧,去分析問題的本質,從而尋找到真正解決問題的辦法。
好,我們來試著一步步分析經理提出這個問題背後的實質——整張卡片可點,這是他提出的問題,也是表像。那麼問自己,整張可點的目的是什麼?經過分析和進一步溝通,發現他是覺得目前的點擊區域不夠大(只有標題和封面),並且他認為整個外框是紅色的,那意味著裡面就都可以點,而標題和封面卻並沒有這樣明確的點擊指示,換句話說他覺得可點擊區域的感知不明顯。好了,我們把他的建設性質疑轉化成了更具體細化的分支問題。然後,再提一個假設性的反問,也就是倒推——整張卡片可點有什麼問題呢?為了回答這個問題,設計師還查看了很多競品的卡片設計,發現確實很少有整張可點的設計,這是為什麼呢?其實我們發現,這麼大一張卡片,即使設計成整張可點,用戶也不會去點擊那些空白的區域的,根據以往熱力圖的經驗,用戶只會去點擊他預期可以點擊的部分。那合理的有預期的可點擊區域是哪些呢?答案非常明確——就是標題、封面、以及描述和它周邊少量的空白區域。最後的設計結果就是圖上紅色遮蓋的部分為可點擊區域。
通過這個案例,我們得出了一套卡片設計的準則:
卡片的焦點態作用和意義:
明確當前焦點的位置
展示更多隱藏的資訊
更鮮明的指引使用者點擊
卡片點擊觸發區的設計規則:
卡片上若有其他連結,觸發區要區分明確,整張可點會造成誤點
卡片上可點的部分要有明確的hover回饋
卡片可點區域並不是越大越好,而是要符合用戶點擊行為的預期
這樣如果以後我們再進行卡片設計,這一套準則就可以直接套用了。
總結一下,好的思考著一定是善於從原點開始思考。
而回歸本源的思考方法就是:
首先拆解問題,這個問題是它和其它問題的關聯是什麼?
為什麼它是一個重要的問題?
然後重構問題,就像剛才我們分析完經理的真實意圖後,將問題重構成兩個我們確定的點——區域不夠大和感知不明顯。然後去解決這兩個問題就OK了。
2.3 設計思考方法 —— 目標導向
接下來我們講一下目標導向的設計思維方法。所謂目標導向,就是做任何事之前,首先要明確目標。然後拆解成可具體執行的子目標,再把子目標轉化為設計中的要點。
還是來看實例解析。
這是百度圖片手機WAP站的分類流覽頁,現在產品經理提出要進行優化改版。同樣的道理,不要急於上手去畫圖,首先要通過調研分析確定改版目標。
我們通過組織使用者訪談,得出了一個使用者行為模型。使用者在使用分類流覽頁面時,主要分為兩類行為——一種是有明確目的的,比如就想來看明星李易峰的圖片,就想來找找手機桌面壁紙。還有一種是沒有明確目的的,我只是隨便看看,都有哪些類別,有喜歡的感興趣的,就點進去看看。
這兩類使用者雖然行為目的不同,但是對於我們來說,設計目標是一致的,就是都需要一目了然的分類,並且可以快速的切換和到達,也就是高效性的設計。
針對這樣的設計目標,我們再來看看舊版的問題。使用者需要不斷的向上拉動頁面才能看到下面的分類,這樣的流失是非常高的,用戶很容易失去耐心。超過兩屏後的資訊點擊明星下降。而且,對於目的明確的使用者來說,也不容易快速定位到想要的類目上。於是,我們摒棄了這種低效流覽型的樓層設計,優化成左側導航的形式,從而達到快速提升效率的目標。這一改動,帶來了16%的PV上漲。PV就是指頁面的流覽量,是我們考察網站體驗設計好壞的一個重要資料指標。
總結一下,以目標為導向的思考方法分為三步:首先確定產品或者使用者目標、然後拆解為可具體執行的touchpoint,再把這些點轉化為設計的目標。
2.4 視覺化思考的小技巧
最後,再跟大家聊聊視覺化思考的小技巧吧。視覺化思考就是指化無形為有形,俗話說的一圖勝千言。
視覺化思考首先要做到的就是,在思考時一定要敢於用筆去畫圖,不關注到底畫成什麼樣,但是首要得畫圖,給大家看一個我自己工作中的例子:
這張圖是我在產品概念的初期和產品經理進行溝通時畫的,當概念想法都只是在彼此思想中,而沒有落到紙面上時,溝通並確保達成共識是非常困難的。所以在這個時候,用視覺化的方式,把想到的都畫下來是最好的辦法。
2.5 高保真交互原型圖
說到視覺化思考,除了手繪草圖這樣快速有效的方式,還有一點要提的就是高保真交互稿。
高保真交互稿的優勢有哪些呢?
當然,高保真交互稿的設計成本確實會比黑白線框圖高一些,那我就給大家講講如何快速的去繪製這樣的高保真交互稿。
現在,給大家揭曉一下開頭小測試的答案——哪一個是好設計呢?
產品在不同階段對設計的要求也是不一樣的,比如這個教育金融貸款的產品在上線初,目的就是要讓使用者能夠快速找到感興趣的課程,然後進行貸款。方案一較深的入口以及右側的廣告是無法達到這個目標的。所以,右邊的方案二是更好的選擇。
以上就是今天課程的全部內容,非常感謝大家的學習。
為了大家學的更方便,具體的視頻課程位址詳見:http://ue.baidu.com
------
他們設計了一套任務,讓用戶在最自然真實的場景中去使用現有版本的連絡人詳情頁。比如說打電話給一個最近沒有聯繫也記不住他電話號碼的朋友,添加設計師到他的通訊錄中等等。最後的發現很有意思:大部分用戶的大部分連絡人只有一個電話號碼
大部分用戶的大部分連絡人是沒有頭像的
打電話給連絡人是第一訴求
只有很少的使用者會給小部分連絡人設置備註等其他聯繫方式
操作環境往往是在行進中,單手操作
整理成圖表,大家可以看一下,給連絡人打電話是所有任務中失敗率最高的,而我們前面的結論中第3條就提到:給連絡人打電話是在這個頁面的第一訴求。
於是,通過這些調研,設計師做出了看似大膽實則非常合理的設計方案:
弱化頭像區域,採用模糊過的一張好看的圖片作為沒有設置頭像時的默認背景。既然打電話是第一訴求,就用極致的方式,把打電話按鈕放大,並且放置在單手最好點擊的位置區域。而當使用者設置頭像後,不再需要裁切成大頭照,直接以底圖的方式全屏顯示。當然,設計總是要考慮邊界情況,當使用者想設置更多資訊時,頁面也是可以承載的,內容向上頂,直到高度撐滿全屏,底部打電話按鈕會懸停在頁面最下方。
總結一下,要做到移情,首先要深入用戶,然後變成真實的用戶,最後,作為設計師,一定要跳出用戶,把設計方案做到超越用戶直白的需求,也就是我們常說的超預期。做到這些,創新設計,也就水到渠成了
2.2 設計思考方法 —— 回歸本源
講完了移情,我們再來聊聊設計思考的方法。主要分為以下三點:回歸本源、目標導向、視覺化思考。
首先我們來看一下回歸本源。回歸本源的意思就是分析問題的切入點,一定是背後的本質,千萬不要糾纏表像
還是來看一個例子。
這是我們產品中經常能夠見到的卡片設計。現在給大家看到這個卡片是一個課程卡片,它主要分為:封面、標題……。滑鼠移上去時,會有一個紅框。設計師在設計時設定的點擊區域為:點擊封面或者是標題,就可以跳轉到課程的介紹頁。但是,在產品即將上線時,這個項目的經理提出了一個質疑:可點擊區域為什麼不是整張卡片?
當我們遇到這樣的質疑時,首先不要慌張,不要因為他是經理是高層就盲目妥協,這樣的後果往往可能是一個糟糕設計的誕生。而是要撥開一層層的迷霧,去分析問題的本質,從而尋找到真正解決問題的辦法。
好,我們來試著一步步分析經理提出這個問題背後的實質——整張卡片可點,這是他提出的問題,也是表像。那麼問自己,整張可點的目的是什麼?經過分析和進一步溝通,發現他是覺得目前的點擊區域不夠大(只有標題和封面),並且他認為整個外框是紅色的,那意味著裡面就都可以點,而標題和封面卻並沒有這樣明確的點擊指示,換句話說他覺得可點擊區域的感知不明顯。好了,我們把他的建設性質疑轉化成了更具體細化的分支問題。然後,再提一個假設性的反問,也就是倒推——整張卡片可點有什麼問題呢?為了回答這個問題,設計師還查看了很多競品的卡片設計,發現確實很少有整張可點的設計,這是為什麼呢?其實我們發現,這麼大一張卡片,即使設計成整張可點,用戶也不會去點擊那些空白的區域的,根據以往熱力圖的經驗,用戶只會去點擊他預期可以點擊的部分。那合理的有預期的可點擊區域是哪些呢?答案非常明確——就是標題、封面、以及描述和它周邊少量的空白區域。最後的設計結果就是圖上紅色遮蓋的部分為可點擊區域。
通過這個案例,我們得出了一套卡片設計的準則:
卡片的焦點態作用和意義:
明確當前焦點的位置
展示更多隱藏的資訊
更鮮明的指引使用者點擊
卡片點擊觸發區的設計規則:
卡片上若有其他連結,觸發區要區分明確,整張可點會造成誤點
卡片上可點的部分要有明確的hover回饋
卡片可點區域並不是越大越好,而是要符合用戶點擊行為的預期
這樣如果以後我們再進行卡片設計,這一套準則就可以直接套用了。
總結一下,好的思考著一定是善於從原點開始思考。
而回歸本源的思考方法就是:
首先拆解問題,這個問題是它和其它問題的關聯是什麼?
為什麼它是一個重要的問題?
然後重構問題,就像剛才我們分析完經理的真實意圖後,將問題重構成兩個我們確定的點——區域不夠大和感知不明顯。然後去解決這兩個問題就OK了。
2.3 設計思考方法 —— 目標導向
接下來我們講一下目標導向的設計思維方法。所謂目標導向,就是做任何事之前,首先要明確目標。然後拆解成可具體執行的子目標,再把子目標轉化為設計中的要點。
還是來看實例解析。
這是百度圖片手機WAP站的分類流覽頁,現在產品經理提出要進行優化改版。同樣的道理,不要急於上手去畫圖,首先要通過調研分析確定改版目標。
我們通過組織使用者訪談,得出了一個使用者行為模型。使用者在使用分類流覽頁面時,主要分為兩類行為——一種是有明確目的的,比如就想來看明星李易峰的圖片,就想來找找手機桌面壁紙。還有一種是沒有明確目的的,我只是隨便看看,都有哪些類別,有喜歡的感興趣的,就點進去看看。
這兩類使用者雖然行為目的不同,但是對於我們來說,設計目標是一致的,就是都需要一目了然的分類,並且可以快速的切換和到達,也就是高效性的設計。
針對這樣的設計目標,我們再來看看舊版的問題。使用者需要不斷的向上拉動頁面才能看到下面的分類,這樣的流失是非常高的,用戶很容易失去耐心。超過兩屏後的資訊點擊明星下降。而且,對於目的明確的使用者來說,也不容易快速定位到想要的類目上。於是,我們摒棄了這種低效流覽型的樓層設計,優化成左側導航的形式,從而達到快速提升效率的目標。這一改動,帶來了16%的PV上漲。PV就是指頁面的流覽量,是我們考察網站體驗設計好壞的一個重要資料指標。
總結一下,以目標為導向的思考方法分為三步:首先確定產品或者使用者目標、然後拆解為可具體執行的touchpoint,再把這些點轉化為設計的目標。
2.4 視覺化思考的小技巧
最後,再跟大家聊聊視覺化思考的小技巧吧。視覺化思考就是指化無形為有形,俗話說的一圖勝千言。
視覺化思考首先要做到的就是,在思考時一定要敢於用筆去畫圖,不關注到底畫成什麼樣,但是首要得畫圖,給大家看一個我自己工作中的例子:
這張圖是我在產品概念的初期和產品經理進行溝通時畫的,當概念想法都只是在彼此思想中,而沒有落到紙面上時,溝通並確保達成共識是非常困難的。所以在這個時候,用視覺化的方式,把想到的都畫下來是最好的辦法。
2.5 高保真交互原型圖
說到視覺化思考,除了手繪草圖這樣快速有效的方式,還有一點要提的就是高保真交互稿。
高保真交互稿的優勢有哪些呢?
當然,高保真交互稿的設計成本確實會比黑白線框圖高一些,那我就給大家講講如何快速的去繪製這樣的高保真交互稿。
現在,給大家揭曉一下開頭小測試的答案——哪一個是好設計呢?
產品在不同階段對設計的要求也是不一樣的,比如這個教育金融貸款的產品在上線初,目的就是要讓使用者能夠快速找到感興趣的課程,然後進行貸款。方案一較深的入口以及右側的廣告是無法達到這個目標的。所以,右邊的方案二是更好的選擇。
以上就是今天課程的全部內容,非常感謝大家的學習。
為了大家學的更方便,具體的視頻課程位址詳見:http://ue.baidu.com
------