當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內(nèi)容

設計知識,如何做引導用戶的設計(3)

來源:zhihu 作者:-eno-one- 學習:2529人次

設計的本質(zhì)是解決問題,而不是形式大于內(nèi)容的表達。

這句話我說了快兩年,但每次回答設計類問題時,我還是要再反復強調(diào)一下,所以,請別嫌我羅嗦。

我們先來拋開所謂的「隱喻」。就單說如何做引導用戶的設計。

咱們先來思考一下,為什么要引導客戶?咱們到底要引導客戶的什么?

一則長文,用戶沒耐心看下去,但是,我們在視覺上,對文字的行距、字間距、字體字號做一些人為處理,讓客戶看起來不吃力,并且愿意看下去。這算引導對不對?(大家可以注意一下我所有答案的分段,還有加粗,其實都是為了讓人看著不累的。

再比如說,一大段文字,密密麻麻,咱們?yōu)榱俗層脩魝冊谧疃痰臅r間里知道這段文字到底想表達什么意思,我們刻意地將其中一些關(guān)鍵部分,關(guān)鍵詞用特異的色彩,或者字號加粗的方式來表達,從而突出重點,這也算引導對不對?

所以說,說到對用戶的引導,其實,最根本的,是設計方需要明白你的目的是什么。這,才是最關(guān)鍵,最核心的,你說對不對?

前幾天,走親戚。

親戚家的孩子,熟練地用 iPad 玩一個算是有點點復雜的小游戲。親戚說,這孩子可真是聰明啊。

知道我心里在想什么嗎?

我把 iPad 拿來看了一下,我明白了。其實并不見得是孩子有多聰明,而是那界面的設計實在太人性化,就連一個 3 歲的孩子都能看得明白其中的操作步驟。我想,這,其實就是用隱喻的方式來引導用戶的最好的例子。

其實,只要留意觀察生活周遭,并細心體會,我們會發(fā)現(xiàn),我們很多行為方式都是在被一些設計引導,這些例子,我就不再具體地多做說明了。

這個問題有些寬泛,由于版面關(guān)系,我無法窮盡的把每個例子都列舉出來。所以,我只列舉一些我曾經(jīng)幫助我一些朋友們的例子。

用設計引導用戶。有以下兩個關(guān)鍵的方面。

第一:想 ta 所想,替 ta 著想,把 ta 當個孩子般看待,用圖形去告訴 ta 你想讓 ta 知道的事情。

案例一:

我一個朋友,做天貓。很多店鋪首頁都有那種輪播的廣告圖,大家應該都有印象吧。就是下圖這樣的。

設計知識,如何做引導用戶的設計

他的店鋪,首屏有 4 幅廣告輪播圖,可是第四幅圖基本沒有點擊。說實話,4 幅圖的數(shù)量確實有點點多,但絕對不至于多到后面的圖沒人點。

我只看了一眼,就發(fā)現(xiàn)問題出現(xiàn)在哪了。于是,朋友按照我的意見將圖做了修改,結(jié)果效果立竿見影。

設計知識,如何做引導用戶的設計

大家仔細看看我到底讓他做了哪些改變?其實很簡單對不對?就是暗示性的告知用戶,這個輪播共有幾張,以及你在看第幾張。

設計知識,如何做引導用戶的設計案例二:

還是我的這個朋友,還是他的店鋪,依舊是點擊率的問題。

設計知識,如何做引導用戶的設計

在他的店鋪內(nèi),消費者可以先領(lǐng)取代金券,再拿代金券去消費?伤赇伌鹑念I(lǐng)取率非常低,由于很少人領(lǐng)券,所以導致客戶覺得不劃算,又進而直接的影響到店內(nèi)的銷售情況。所以,這個看似很細節(jié)的小問題,讓我那朋友很頭痛。

設計知識,如何做引導用戶的設計

大家仔細看看我到底讓他做了哪些改變?其實很簡單對不對?就是告知用戶,這張圖片是可以點擊的。

設計知識,如何做引導用戶的設計

接下來,其實我們可以將這種暗示做得更細化一些。

設計知識,如何做引導用戶的設計

通過擬物的方式,告知用戶,這代金券可以像游戲機的獎券一樣,是可以被撕去,領(lǐng)取的。

以上第一個方面的內(nèi)容其實很簡單對不對?

可是越簡單的東西其實卻是最難的。

因為越是基礎的,反而越容易被人忽略。

恩,好了,接下來,就是有關(guān)引導客戶設計的第二個方面了。

第二:不要以為設計就是玩玩圖形與色彩的把戲,心理學在其中也是很重要的。

同樣,我還是以我這位朋友來舉例。怎么樣,當我朋友好處很多吧!

這次,我?guī)退鉀Q的問題,是頁面停留時間的問題。

買家在頁面的停留時間會影響產(chǎn)品的轉(zhuǎn)化率,這一點我相信大家都明白。不是說要你把頁面做的有多么長,而是要你做的說的每一句話,消費者都看完了,這才是最關(guān)鍵的。那么,如何引導用戶耐心仔細的看完頁面呢?

我?guī)退隽诉@樣幾件事。

第一件事:設計知識,如何做引導用戶的設計

上圖,是他店內(nèi)原有的標簽欄,很中規(guī)中矩的,對不對?很多店鋪都是這樣的。

而下圖,是我?guī)退{(diào)整過后的標簽欄。不要小看這細微的改動,修改后的頁面,買家的停留時間直線上升。

設計知識,如何做引導用戶的設計

或許會有很多人看不懂我這樣做的目的。

設計知識,如何做引導用戶的設計

在常規(guī)的傳統(tǒng)紙質(zhì)的平面設計中,很多設計師習慣偏上的構(gòu)圖方式,的確,偏上的構(gòu)圖方式會讓畫面更加的充滿積極向上的情緒,而且也更加符合人的視覺習慣。但是,人,要懂得因地制宜和變通。

在此處,我刻意的用向下的箭頭來暗示訪問者,向下拉動可以看到更多的內(nèi)容。

第二件事:

我讓他的頁面變得更有節(jié)奏。

設計知識,如何做引導用戶的設計

上圖,是他原有頁面布局。中規(guī)中矩。不犯錯。但缺點是容易產(chǎn)生視覺疲勞,讓人覺得乏味。

而下圖,是我?guī)退{(diào)整過后的頁面。你們一定不會知道,為了每一個頁面,甚至每一張圖的尺寸、間距,我和我的團隊會做多少次的情景演練。我們會測試不同瀏覽速度,用戶會看到哪些內(nèi)容,會首先看到什么,然后再做反復的修改和調(diào)整。

設計知識,如何做引導用戶的設計

問題是「怎樣用」,而不是「有哪些」,所以就不做更多舉例說明了,希望對你有幫助。

總結(jié):

一:不要忽視最基礎的細節(jié),把用戶當作一個無知的孩子去對待,別讓 ta 們動腦子,在 ta 們動腦子前,就把 ta 們想知道的告訴給 ta 們。

二:用空杯的心態(tài)學習心理學,不要以為自己什么都懂,不要以為別人都和你一樣,拋棄所有簡單粗暴對事物用美與丑的評價。潤物細無聲的引導 ta 們。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
HZHlee2019-07-23 09:01
優(yōu)秀{:5_234:}{:5_234:}{:5_234:}
我叫_陳si胖2017-02-21 02:30
點贊

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!