首頁

怎樣設(shè)計(jì)體驗(yàn)友好的APP登錄表單

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

 

不要小看一個(gè)登錄界面,它內(nèi)里包含很多細(xì)微的東西,除去外觀視覺,更多要注意的是交互的操作體驗(yàn),比如一些動(dòng)畫、一些文案提示等細(xì)節(jié)都要注意,如果你是UI設(shè)計(jì)師,建議看看這次經(jīng)驗(yàn)文章,附上了大量案例,也許能助你未來更好的去設(shè)計(jì)一個(gè)用戶體驗(yàn)友好的APP登錄界面。

下面通過幾個(gè)關(guān)于登錄界面的UX策略指南,讓你更好的應(yīng)用和實(shí)踐。

給文本輸入框增加提示

如果用戶使用你的服務(wù)必須登錄,那么信息字段是你必須要做的主要功能(即輸入框中的提示語,如:輸入手機(jī)號(hào)碼,輸入驗(yàn)證碼。)

使這些字段清楚可視,并且不要強(qiáng)迫用戶到處尋找,或花更多的步驟進(jìn)到App. 一旦他們進(jìn)到App, 登錄界面是他們所應(yīng)當(dāng)見到的第一個(gè)事情。

獎(jiǎng)勵(lì)提示:相比于使用常見的“登錄”“登陸”的按鈕,可以更富有創(chuàng)造性,并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù),這樣他們就不需要每次輸入信息。

“注冊”和“登陸”不應(yīng)該放在一起。

更多地時(shí)候,我們看到注冊和登陸按鈕被放置的靠近彼此,但是這會(huì)對用戶產(chǎn)生反作用。

這兩個(gè)動(dòng)作都包含了相同的動(dòng)詞,并且看起來也很相似,所以他們會(huì)混淆用戶的選擇。在有限的時(shí)間內(nèi)進(jìn)入問題,他們可能會(huì)感到沮喪并且離開。

基本上,任何界面上不應(yīng)該有使用戶“暫?!焙汀八伎肌钡脑?。

如果你想讓他們的體驗(yàn)完美無瑕,分開這注冊和登陸兩個(gè)區(qū)域,并且使差別清晰可見。另外,你可以使用不同的動(dòng)詞或者簡單解釋不同的字段是什么。

在登錄和注冊部分,增加不同的輸入字段。

除了動(dòng)詞“Sign”是事實(shí)之外,另一個(gè)另用戶感到困惑的是,登錄和注冊部分通常有相同數(shù)量的輸入框(用戶名,密碼,和郵箱)。

為了完全地區(qū)分,最小化新用戶嘗試直接登錄的機(jī)會(huì)。用不同的輸入字段。

讓密碼可被看到

當(dāng)大多數(shù)用戶的密碼由于安保原因被打了馬賽克,用戶頻繁遇見的另一個(gè)問題是打錯(cuò)他們的密碼。

這甚至?xí)l(fā)生在很有經(jīng)驗(yàn)的打字員身上,特別是當(dāng)他們在移動(dòng)設(shè)備上登錄的時(shí)候。

防止這種情況發(fā)生的做法是:在密碼字符旁邊包含一個(gè)“顯示密碼”的單選框或圖標(biāo)。

讓他們知道什么是錯(cuò)誤的

如果應(yīng)用監(jiān)測到一個(gè)錯(cuò)誤的密碼組合,和用戶名,但是沒有明確的報(bào)告給用戶問題是什么,用戶可能會(huì)多次嘗試后,很生氣的退出應(yīng)用。

這是為什么你應(yīng)該考慮通用的回復(fù)(例如“你的密碼或郵箱不符合”),并且給他們立馬回復(fù)怎么解決這個(gè)問題。

問下郵箱地址或電話號(hào)碼,而不是唯一的用戶名

為什么人們登錄時(shí)人們很少記住“用戶名”?如果使用用戶名登錄,你會(huì)面對很多可避免的困難:用戶名必須是一個(gè)唯一的,這意味著人們會(huì)重復(fù)嘗試輸入一個(gè)系統(tǒng)里目前還沒有的用戶名,或者最終使用其真實(shí)姓名。

過了一會(huì)兒,用戶想出了一個(gè)唯一的登錄名,但是只過了一小會(huì)兒就忘記了,因?yàn)檫@個(gè)用戶名對他沒有任何的意義。

另一個(gè)事情可以促進(jìn)登錄,是提供給用戶幾個(gè)登錄選項(xiàng),并且給他們機(jī)會(huì)來選擇和嘗試用戶名而不會(huì)沮喪。在這過程中強(qiáng)迫的一部分是允許他們使用郵箱地址和密碼來注冊。

需要一個(gè)“忘記你的密碼”的流程

忘記密碼發(fā)生在所有人身上,這也是為什么,你急迫的給到用戶一個(gè)機(jī)會(huì)來恢復(fù)密碼,那么就直接在登錄界面這么做吧。

所要做的就是,在輸入框下增加一個(gè)“忘記你的密碼”的鏈接,并讓系統(tǒng)能給用戶的郵箱或電話號(hào)碼發(fā)送驗(yàn)證碼。

不要鎖了用戶的賬號(hào)而不告知他們

為了避免強(qiáng)迫進(jìn)入和暴力攻擊,許多網(wǎng)頁和應(yīng)用在一系列的錯(cuò)誤嘗試之后關(guān)閉賬戶。

安全第一,但是你至少要嘗試告訴用戶,在多少次嘗試后,在關(guān)閉賬戶前,他們必須離開。你也可以分享更多的細(xì)節(jié),例如,在試錯(cuò)后的十分鐘才可以再次嘗試的事實(shí)。

登錄樣式靈感

如果在過去,都是在用相同的無風(fēng)格和定制化的登錄頁?,F(xiàn)如今,給你的應(yīng)用,創(chuàng)造一個(gè)獨(dú)特的登錄頁設(shè)計(jì)是非常重要的事情,尤其是你想要圍繞你的應(yīng)用和服務(wù)來創(chuàng)造品牌。

設(shè)計(jì)師和開發(fā)人員也有承認(rèn)意識(shí)到登錄表單的重要性。這是事實(shí),特別對于移動(dòng)環(huán)境下,用戶界面相比于“桌面”網(wǎng)站,扮演了更重要的角色。

當(dāng)為一個(gè)應(yīng)用和移動(dòng)站設(shè)計(jì)這個(gè)元素的時(shí)候,設(shè)計(jì)師花很多的精力,使它既好用又美觀。

在這篇文章里,你會(huì)看到很多移動(dòng)端用戶界面設(shè)計(jì)的案例靈感,關(guān)于一個(gè)移動(dòng)端登陸頁面應(yīng)被設(shè)計(jì)成什么樣,給你一些線索。

Roostio Login Screen

Login Screen

Job Board – Company Profile / Login

Shopping app

Tailslife: Login

Moody Sign Up/In Screen

Bandio App Login & Sign Up

Parts – login dark side

Login Screens

ZSSK – login and route detail

DailyUI Day001

Skype Redesign

Sign Up Window – Daily UI #001

結(jié)尾思考

對用戶來說,登陸已經(jīng)很困難了,所以,使之變得更復(fù)雜,對你的產(chǎn)品來說并不是一個(gè)很聰明的決定。避免更大的和不熟悉的形式,并且讓輸入字符簡單可視。這些只是一些為了節(jié)省用戶時(shí)間可以考慮的技巧,并且?guī)椭麄兿硎苣闼峁┑姆?wù)。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

網(wǎng)頁設(shè)計(jì) & 靈感 ? 當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


在設(shè)計(jì)領(lǐng)域,設(shè)計(jì)風(fēng)格總是多變的,也有很多隨著流行趨勢而不斷變化,但是存在著N多的爭議。

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

對于扁平化和擬物化,說白了,只是風(fēng)格的不同,最終的設(shè)計(jì)目的是一樣的,但是,卻還是會(huì)有很多的朋友會(huì)糾結(jié)于是扁平還是擬物化設(shè)計(jì),爭論是扁平好還是擬物好,怎么說呢,各有各的優(yōu)點(diǎn),各有各的不足,這是今天,我們要帶大家看的!

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

Michael Fugoso,一位來自圣地亞哥,加利福尼亞的插畫家和設(shè)計(jì)師,帥小伙!

他說,關(guān)于他自己,就各像其他人一樣,他喜歡旅行,他喜歡吃比薩和海鮮,他非常的重視家庭,家庭總是以他的第一位!他也喜歡分享,因?yàn)榉窒頃?huì)讓別人的生活更容易,幫助別人成功,他覺得,這有助于他成為一個(gè)好的設(shè)計(jì)師。同時(shí),他也喜歡自私地做自己想做的事情,因?yàn)樗X得,這有助于他成為一個(gè)好的藝術(shù)家。

今天,帶大家看一組他的作品,在他的這些作品中,很好的反映了扁平與擬物的關(guān)系,扁平的背景,搭配上擬物的元素,其視覺效果非常棒,沖擊力十足,震撼性十足!

扁平與擬物,數(shù)不清的恩怨情仇!道不盡的愛恨糾纏!

這是一張扁平化的插畫!

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)它變成擬物后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

你覺得哪個(gè)的視覺沖擊力更強(qiáng)一些?

我們接著看!

這是一張扁平化作品!

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

他開始在矢量程序上呈現(xiàn)

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

開始色彩的調(diào)整與細(xì)節(jié)的完善

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

最終的效果呈現(xiàn)

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

這是一臺(tái)扁平化的車

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

添加裝飾元素

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

調(diào)整顏色后,得到一個(gè)扁平化的結(jié)果

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

把車元素單獨(dú)提取出來

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

在矢量程序上呈現(xiàn)

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

上色,添加細(xì)節(jié)

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

對細(xì)節(jié)的刻畫簡直不能再棒

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

調(diào)整色調(diào)

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

最終的對比

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

再往下看,你可能會(huì)被美哭

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

扁平與擬物的碰撞

不一樣的花火

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

這些火箭,看得人熱血澎湃阿

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

當(dāng)扁平化UI轉(zhuǎn)擬物化設(shè)計(jì)后

看了感覺效果如何


 


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

像看電影般的酷站:Oat the Goat

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


這是一個(gè)以故事形式來展現(xiàn)網(wǎng)站:Oat the Goat,動(dòng)畫很有感覺,雖然小編目前的水平還做不出這類網(wǎng)站,但看看也可以增加點(diǎn)靈感、閱歷,原來網(wǎng)站還能這樣做的,一個(gè)網(wǎng)站,一個(gè)溫暖的故事,來一起欣賞電影般的酷站,Enjoy!

網(wǎng)站名稱:Oat the Goat
網(wǎng)站地址:http://oatthegoat.co.nz/

(請?jiān)赑C端欣賞,瀏覽該網(wǎng)站時(shí)記得打開聲音哦~)

故事是從一只羊咩咩的歷險(xiǎn)開始,他翻山越嶺,途中遇到一些困難和遇到困難的小伙伴們,接著一起去克服,然后越來越多的小伙伴們一起去冒險(xiǎn),經(jīng)過重重險(xiǎn)阻,最終…… (還在讓大家自己欣賞才有 Feel 的)

所有的畫面非常的漂亮,就像在看電影一樣,同時(shí)網(wǎng)站還帶有一至交互體驗(yàn),讓用戶去選擇。

截圖:羊咩咩遇到第一個(gè)有困難的小伙難了哦,我們繼續(xù)看看……

截圖:要選擇你要怎么做了

故事結(jié)局如何?請自行觀賞,同時(shí)您可以在下方評論處說出你的想法:)


 


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

避開"灰"畫面至少提高幾個(gè)層次

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


大家平時(shí)在畫素描的時(shí)候經(jīng)常會(huì)遇到顏色深不下去、顏色對比不強(qiáng)烈等問題。畫面的顏色總是顯得很灰,體現(xiàn)不出立體的效果。不管多使勁顏色就是重不下去,有時(shí)把紙都涂破了,依然沒有效果。這到底是為什么了?究竟如何才能把顏色重下去了?接下來我們就一探究竟吧~

 

什么樣的畫面是偏灰、偏臟的畫面呢?

畫面中這種暗部不暗,亮部不亮,顏色處于一個(gè)區(qū)別不大的狀態(tài),畫面就會(huì)顯得灰;而亮面上色的時(shí)候筆觸太粗,灰面顏色磨得太多,整個(gè)亮部區(qū)域顏色就會(huì)顯得很臟。


這些問題之所以出現(xiàn),是因?yàn)榇蠹覜]有將畫面的“黑、白、灰”表達(dá)清楚。

要在白紙上畫出立體的圖形,需要我們加強(qiáng)明暗之間的顏色對比;通過強(qiáng)烈的光影營造立體的視覺效果。而快速表現(xiàn)出大的黑白灰關(guān)系是我們塑造的關(guān)鍵:


首先,我們找到所畫物體自身顏色最深的地方。用軟一點(diǎn)的鉛筆(8B、12B)排上調(diào)子,依次過渡灰面,留出并輕輕刻畫亮部,加上投影和背景。讓畫面先有一個(gè)基本的黑白灰,確定出最黑的地方,灰面的位置以及高光的分布。

然后,在這個(gè)基礎(chǔ)上我們找到物體的明暗交接線。


先從明暗交界線開始加深顏色并往暗部邊緣逐漸的過渡,運(yùn)筆排線的力度越來越輕,讓暗部形成一個(gè)有深淺顏色變化的面??拷靼到唤缇€的地方顏色就重一點(diǎn),靠近投影的地方顏色就淺一點(diǎn),然后通過壓深投影的顏色,襯托暗部的反光,讓這個(gè)暗部顏色更加透氣。


再回到明暗交界線,往亮部方向用4B、2B將顏色逐漸過渡,畫出灰面來,但物體的灰面不宜畫得過多,一多畫面就膩了;灰面塑造的標(biāo)準(zhǔn)就是顏色一定要比暗部淺,灰面顏色如果加深那暗部的顏色也要同時(shí)加深,始終要保持這兩個(gè)面的顏色區(qū)別。

接下來,就是對比一下整個(gè)暗部區(qū)域和背景顏色的深淺程度。如果暗部的顏色比背景深就將暗部邊緣的顏色壓重一點(diǎn)點(diǎn),如果背景的顏色更深,那么就像畫投影一樣,沿著物體的暗部邊緣疊色,加深背景的顏色;不管哪一種情況都要將暗部和背景的顏色區(qū)分開。


最后,我們有稍微硬一點(diǎn)的鉛筆(如2H、HB)排線將亮部表現(xiàn)一下,主要是將高光收攏,除了不銹鋼和玻璃其他物體都是越靠近高光用的鉛筆越硬(HB、2H、4H),亮部刻畫時(shí)排線一定要細(xì)膩,可以刻意排幾組特別精準(zhǔn)的線條加強(qiáng)物體的質(zhì)感,這樣高光和亮部會(huì)顯得更白,從而就會(huì)襯得暗部的顏色更黑更深。

完成的物體黑白灰的塑造之后,最后看一看整個(gè)物體各邊線與背景顏色的深淺對比,還是通過加強(qiáng)區(qū)部的顏色對比,完善畫面整體的明暗對比。

總而言之,暗部的黑并不是獨(dú)立存在,是因?yàn)橹苓叺念伾急人鼫\,于是乎,它就深了下去,如果與周圍的顏色區(qū)分不開,那即使將紙張揉破顏色依舊難深下去。所以,暗部疊色就是一邊畫一邊比較,不停的調(diào)整,才能始終確保暗部能重下去。








藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 

總結(jié)頁面打開的交互方式,很全面!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里

本篇文章分別從頁面打開方式的類型、當(dāng)前頁打開&新開頁面、彈出框三方面對頁面鏈接打開方式進(jìn)行了探討,給大家提出一些意見以供參考。

頁面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計(jì)的過程中,或多或少都會(huì)遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級(jí)較多時(shí),如何讓用戶按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗(yàn)設(shè)計(jì)仔細(xì)思考與分析的。

近期在所負(fù)責(zé)的設(shè)計(jì)項(xiàng)目中,團(tuán)隊(duì)對鏈接操作的打開方式產(chǎn)生了分歧,借此機(jī)會(huì)整理了一些案例與資料,就這個(gè)問題進(jìn)行分析探討,也給遇到同樣問題的同行一些參考意見。

一、頁面打開方式的類型

網(wǎng)頁中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計(jì)中常用的打開方式則主要有以下三種:

1. 當(dāng)前頁打開

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁面中進(jìn)行內(nèi)容顯示與操作。

2. 新開頁面

點(diǎn)擊操作鏈接后,在瀏覽器中新開一個(gè)獨(dú)立的標(biāo)簽頁面,進(jìn)行內(nèi)容顯示與操作。

3. 彈出框

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁面中,彈出一個(gè)小尺寸的對話框,進(jìn)行內(nèi)容顯示與操作。

二、當(dāng)前頁打開 & 新開頁面

首先來說說最具爭議的新開頁面&當(dāng)前頁打開。在 HTML語言中,target目標(biāo)有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當(dāng)前窗口打開」,下圖是這兩個(gè)參數(shù)的屬性描述。

從這兩個(gè)參數(shù)的屬性上來看,「當(dāng)前窗口打開」是系統(tǒng)默認(rèn)的處理方式。這個(gè)打開方式在國外的網(wǎng)站中實(shí)現(xiàn)方式比較統(tǒng)一,用戶也形成了一致的習(xí)慣,但國內(nèi)的形式則不盡相同,以至于一直頗具爭議,不同類型網(wǎng)站之間、同一網(wǎng)站不同場景之間也沒有一個(gè)明確的規(guī)則標(biāo)準(zhǔn)可供大家學(xué)習(xí)和參照。

針對這個(gè)問題的討論,可以聽到兩種不同的用戶聲音,并且都站在各自的角度闡述其道理。

舉個(gè)例子,我們以同類型網(wǎng)站(淘寶和亞馬遜)的打開處理方式進(jìn)行對比,來看一下用戶習(xí)慣、功能場景對鏈接打開方式選擇的影響。

首先,我們確定一致的功能場景:用戶從首頁中根據(jù)各種篩選條件,查找到心儀的商品。來看一下兩個(gè)網(wǎng)站的處理方式:

可以看出基本是兩個(gè)極端,差異非常明顯,再來看個(gè)有意思的現(xiàn)象,亞馬遜中國的商品搜索方式竟然又和淘寶一致了,難道鏈接打開方式的差異竟是中外用戶習(xí)慣的差異?

這確實(shí)占了很大一部分原因,那么造成這種差異的原因主要有:

  • 早期的 W3C標(biāo)準(zhǔn)不支持 target=”_blank”(HTML語言中,在新窗口中打開鏈接)的屬性,國外互聯(lián)網(wǎng)普及也比國內(nèi)早,于是用戶慢慢養(yǎng)成了習(xí)慣。
  • 默認(rèn)當(dāng)前頁面打開讓國外用戶覺得更有「禮貌」。如果用戶想新開頁面,可以鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者右鍵新窗口打開,此時(shí)用戶更有選擇權(quán),可以自己決定打開方式;如果默認(rèn)新開頁面,則讓用戶失去了選擇權(quán)。
  • 早期國內(nèi)互聯(lián)網(wǎng)發(fā)展較為浮躁,網(wǎng)站想通過新標(biāo)簽頁打開方式,提高PV。
  • 國內(nèi)網(wǎng)絡(luò)普及晚,部分用戶尤其很多老年人不習(xí)慣甚至或許不知道,頁中有個(gè)后退前進(jìn)按鈕、面包屑可用,新開頁面便于他們的操作。

那么,淘寶中所有的頁面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當(dāng)前頁打開。

同一個(gè)產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計(jì)的原因我認(rèn)為有:

  • 用戶的目的較為明確,查找對象確定。(用戶想要查看的對象是確定的,如購物車中的產(chǎn)品,用戶有明確的目標(biāo),找到鏈接打開頁面即可,不像搜索查找商品,需要一步步縮小范圍甚至比對查看)
  • 鏈接入口常駐在網(wǎng)站的信息欄,用戶可以隨時(shí)切換,操作方便,且不存在重新輸入的成本。

關(guān)于這兩種打開方式,到底哪種操作更順暢,確實(shí)難分高下,就跟「確定和取消哪個(gè)在左,哪個(gè)在右」是一種性質(zhì)的問題,沒有好壞之分,關(guān)鍵是要看在哪種場景下使用更合適。

新頁面打開適用的場景:

  • 頁面內(nèi)容沒有關(guān)聯(lián)性,且從邏輯上沒有從屬關(guān)系,相對獨(dú)立。如:產(chǎn)品中的外鏈。
  • 存在多頁面「比較」的操作,需要經(jīng)常切換。如:淘寶商品詳情。
  • 需要保留住前一頁的操作不丟失。如:知乎上過濾出來的結(jié)果列表。
  • 功能分支存在穿插,當(dāng)路徑發(fā)生交叉時(shí),最好新開頁面。如:產(chǎn)品內(nèi)部的跳轉(zhuǎn)鏈接,導(dǎo)致信息關(guān)聯(lián)的層級(jí)發(fā)生改變。
  • 具有輔助功能的操作。如:使用文檔(PDF、圖片等)需要來回參照。

當(dāng)前頁打開適用的場景:

  • 流程性的功能頁面,前后操作存在關(guān)聯(lián)和影響。如:下單支付、按步驟新增。
  • 同一層級(jí)內(nèi)容間的操作。如:tab欄的切換。
  • 同一路徑中的操作,用戶當(dāng)前的操作會(huì)對主頁的內(nèi)容產(chǎn)生影響。如:編輯一個(gè)配置,用戶操作完,會(huì)回到當(dāng)前頁查看結(jié)果。
  • 用戶具有明確目的性的操作,當(dāng)前頁有利于鎖定用戶注意力。如:淘寶中「我的收藏」。

以上是結(jié)合功能場景進(jìn)行的選擇側(cè)重,如果就「用戶體驗(yàn)」一定要分出個(gè)高下,我個(gè)人還是比較支持默認(rèn)「當(dāng)前頁打開」,從體驗(yàn)角度分析,「當(dāng)前頁打開」略勝一籌的主要原因有以下兩個(gè):

  • 尊重用戶的決定。當(dāng)前頁打開,將更多選擇機(jī)會(huì)留給用戶(鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者可以右鍵新窗口打開),一個(gè)具有良好用戶體驗(yàn)的產(chǎn)品,在用戶做操作的時(shí)候,總是能讓他們按自己的意志做出決定。網(wǎng)站對每個(gè)鏈接強(qiáng)制打開新頁面則剝奪了用戶的選擇權(quán),因?yàn)椴煌娜擞胁煌臑g覽習(xí)慣和使用需求。
  • 體驗(yàn)一致。保持一致體驗(yàn)的設(shè)計(jì)才能讓用戶產(chǎn)生信任感與安全感。當(dāng)用戶在操作界面元素的時(shí)候,可以順暢的知道、理解,并且能預(yù)料到將會(huì)發(fā)生什么,不會(huì)被分神,也不會(huì)被打斷。任何違反這個(gè)原則的設(shè)計(jì)都將會(huì)演變成一種「以設(shè)計(jì)方意志為導(dǎo)向」的設(shè)計(jì),而不是「以用戶為中心」的設(shè)計(jì)。

小結(jié)

當(dāng)我們不知道兩種方式如何選擇時(shí),或許「不強(qiáng)制用戶」才是最好的體驗(yàn)。因?yàn)槲覀兠媾R的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對于打開方式的習(xí)慣也具有多樣性,這個(gè)是設(shè)計(jì)者無法揣測和調(diào)查清楚的。

在「兩害取其輕」的情況下,在當(dāng)前窗口打開鏈接,不失為一個(gè)選擇,尊重用戶自己的決定,讓用戶對交互界面自主可控。

三、彈出框

彈出框(彈層)又叫模態(tài)對話框,是指在用戶想要對當(dāng)前對話框以外的應(yīng)用程序或內(nèi)容進(jìn)行操作時(shí)的提示方式。它一般覆蓋在整體頁面之上,避免了頁面跳轉(zhuǎn)。

彈出框通常是為了顯示一個(gè)單獨(dú)的內(nèi)容,在不離開整體頁面的情況下有一些互動(dòng),提供信息和交互。

如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個(gè)人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會(huì)采用彈出框的交互方式,當(dāng)然前提是在彈出框中編輯的內(nèi)容不是很多,此時(shí)彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶銜接路徑。

如 iconfont 中的新建項(xiàng)目,用戶新增后,頁面會(huì)直接跳轉(zhuǎn)到新的項(xiàng)目空間。

△ http://www.iconfont.cn

彈出框適用的場景:

  • 內(nèi)容簡單,沒有復(fù)雜的操作,且具有臨時(shí)性。如:新增一個(gè)收貨地址,進(jìn)行簡要的輸入編輯。
  • 更為詳細(xì)的輔助說明,是對當(dāng)前內(nèi)容的快速擴(kuò)展。如:縮略圖,點(diǎn)擊放大查看。

因此,彈出框可以較好的實(shí)現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶的主路徑,同時(shí)作為頁面承載元素和用戶操作的補(bǔ)充,起到承前啟后的作用。

總結(jié)

本文結(jié)合這三種鏈接打開方式的頁面交互關(guān)系,進(jìn)行適用場景舉例,并總結(jié)每種方式的優(yōu)缺點(diǎn),方便在設(shè)計(jì)中更好的根據(jù)不同的場景選擇合適的頁面打開方式。

當(dāng)然,以上總結(jié)也是基于我個(gè)人的理解與經(jīng)驗(yàn),沒有統(tǒng)一的用法和標(biāo)準(zhǔn),在具體設(shè)計(jì)實(shí)踐中,仍要靠設(shè)計(jì)者的直覺和經(jīng)驗(yàn)來進(jìn)行綜合考量與判斷。

作為體驗(yàn)設(shè)計(jì)師,如何規(guī)劃用戶瀏覽路徑,是個(gè)需要嚴(yán)肅對待的命題。沒有絕對的好與壞,但一定要結(jié)合產(chǎn)品類型、場景、目標(biāo)用戶等進(jìn)行具體問題具體分析。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

論打造用戶體驗(yàn)和數(shù)值系統(tǒng),你得看看游戲類產(chǎn)品

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


互聯(lián)網(wǎng)產(chǎn)品有很多種,比如電商類、工具類、資訊類、財(cái)經(jīng)類。但在看過很多產(chǎn)品之后,作者發(fā)現(xiàn)論產(chǎn)品體驗(yàn),最強(qiáng)的是游戲類。當(dāng)然游戲做為一種特殊的產(chǎn)品,有時(shí)候不會(huì)被列入以上類型,且游戲的產(chǎn)品經(jīng)理一般被叫做游戲策劃以及數(shù)值策劃,分別負(fù)責(zé)不同的內(nèi)容。

一、為什么說游戲的產(chǎn)品體驗(yàn)很好?

之所以這樣說是因?yàn)橛螒蝾惍a(chǎn)品有一個(gè)特點(diǎn)即它是沒有用的,或者說它的唯一用途就是好玩。這樣有一個(gè)問題便顯而易見了,即對于大多數(shù)產(chǎn)品來說用戶體驗(yàn)好是錦上添花的事情,而對于游戲類產(chǎn)品而言,這可能是唯一的賣點(diǎn)以及生死線。

舉幾個(gè)例子來說明:

  • 單位或者學(xué)校的官網(wǎng),相信用過這些的人都會(huì)發(fā)現(xiàn)它們是多么的難用,而且很多年從不更新,但是你沒有得選,只好使用它;
  • 微信以及 QQ 也是同理,雖然不是必選,但是以其覆蓋率來講,大多數(shù)人依然無法選擇不使用它們。因此微信有足夠的理由不全力以赴,騰訊完全可以將精力和人力投入到更加賺錢的網(wǎng)游領(lǐng)域。當(dāng)然,最近新型社交軟件(抖音、快手)的崛起似乎是給了騰訊一定的威脅,讓它不得不再次嚴(yán)陣以待;
  • 而抖音和快手就得好好做了,必須足夠好玩以及新奇,畢竟這并不是剛需,如果沒有足夠好的用戶體驗(yàn)完全可能被刪除。畢竟刪除了他們對于用戶而言幾乎沒有任何不便,還能節(jié)省不少時(shí)間;
  • 那么再進(jìn)一步呢,再進(jìn)一步就到了游戲類產(chǎn)品。游戲類產(chǎn)品的剛需性更加弱,而且還被全社會(huì)妖魔化,最近 steam 入華不利,以及孩子跳樓怪絕地求生又將它推向了風(fēng)口浪尖。讓不少人不得不呼吁「管管孩子,救救游戲」。

通過上面幾個(gè)例子不難看出,隨著剛需的減弱以及依賴性的降低,產(chǎn)品對于用戶而言不可替代性就越低。比如單位或者學(xué)校的官網(wǎng)哪怕做成非圖形界面,恐怕員工和學(xué)生都得自學(xué)了接著用。而游戲則不然,不僅面臨著用戶隨時(shí)可以放棄的情形還得時(shí)刻注意政策動(dòng)向。

因此即使不去使用產(chǎn)品,我們也不難猜出游戲類產(chǎn)品的用戶體驗(yàn)必須非常好才行。畢竟只有有依靠的產(chǎn)品才能夠做到有恃無恐,而游戲類產(chǎn)品則是時(shí)刻在刀尖上舞蹈,用戶和政策都不敢得罪,必然得絞盡腦汁才能生存下去。

人都是有惰性的,一旦有恃無恐將沒有多少人和公司愿意繼續(xù)創(chuàng)新,畢竟你沒得選。

二、以崩壞3為例談?wù)動(dòng)脩趔w驗(yàn)

1. 從側(cè)面展示其用戶滿意度

為何選崩壞3呢?原因很簡單,因?yàn)樗耐茝V模式以及用戶體驗(yàn)都是一流的,不僅做游戲,而且 CG,漫畫,周邊同步推進(jìn)。選擇了3D萌風(fēng)格后又通過嗶哩嗶哩這一平臺(tái)進(jìn)行了推廣,對用戶的了解之深入讓人佩服。

b站的推廣對于崩壞3而言,絕對是最好的選擇可能都沒有之一。原因很簡單,兩者用戶重疊度太高了,且 b站專門有崩壞3類似的模塊MMD 3D。當(dāng)崩壞3到達(dá)b站后,up主們則自發(fā)的開始了宣傳,例如熱門中的第四位就是崩壞3的內(nèi)容。

如果搜索崩壞3的經(jīng)典角色 CG女王降臨,可以得到如下結(jié)果:

僅前面幾個(gè)視頻的播放量可能就有近300w,而且是精準(zhǔn)用戶的300w次播放,其宣傳的成功不難理解。當(dāng)然這里你可能要問了,不是談?dòng)脩趔w驗(yàn)嘛,說這些和用戶體驗(yàn)有什么關(guān)系。

其實(shí)是有關(guān)的,通過下面這張圖很容易從側(cè)面反映出用戶對其熱愛的程度。

這些視頻全都是用戶自制的,這種熱愛是很切實(shí)的。試想當(dāng)初最火的魔獸世界上映,很多人穿著聯(lián)盟或者部落的衣服去電影院不就是對游戲最大的認(rèn)同嗎。

這里也是一樣,你會(huì)為一個(gè)你不喜歡,用戶體驗(yàn)差到崩潰的產(chǎn)品花費(fèi)幾天甚至一個(gè)月的時(shí)間去做它的周邊視頻嗎,所以其優(yōu)秀其實(shí)是毋庸置疑的。

2. 分析其用戶體驗(yàn)

這張圖片即該游戲的歡迎界面,接下來讓我們細(xì)細(xì)來分析其用戶體驗(yàn)點(diǎn)好在哪里。

上圖即為游戲界面展示,僅一個(gè)界面就有很多點(diǎn)設(shè)計(jì)來增強(qiáng)用戶體驗(yàn)。

  • 感嘆號(hào):代表了可以領(lǐng)取的獎(jiǎng)勵(lì),大家領(lǐng)取獎(jiǎng)勵(lì)的時(shí)候是開心的,所以就給了最醒目的標(biāo)志;
  • 波紋效果:次一級(jí)的提示,表示該功能下有可以做的事情,算是任務(wù)發(fā)布;
  • 收起功能:點(diǎn)擊可以收起,然后截一張圖,截圖如上上圖所示,很完美的效果,用戶有炫耀的心理,所以可能會(huì)將其發(fā)朋友圈或者作為桌面,增強(qiáng)傳播。當(dāng)然這里不玩游戲的人可能不好理解,其實(shí)有的角色是非常難獲得的,加上皮膚價(jià)格會(huì)很高,用戶有足夠的動(dòng)力去炫耀;
  • 拍照功能:如上上圖所示,可以對圖像進(jìn)行拍照,雖然也可以截屏,但確實(shí)是很貼心的功能;
  • 和看板娘對話:這樣的做法并不少見,即給產(chǎn)品一個(gè)人設(shè),增加用戶的認(rèn)同感,比如小冰等,這里的看板娘對話根據(jù)角色的不同而不同,甚至有的用戶會(huì)為了看不同人物的對話而去收集人物,在增強(qiáng)用戶體驗(yàn)的同時(shí)也增加了用戶購買欲,一舉兩得;
  • 全屏VR:畫面并不是靜止的,如果手機(jī)旋轉(zhuǎn),圖像會(huì)移動(dòng),給人手機(jī)屏幕后的場景是真實(shí)場景的感覺,雖然幅度不是很大,但還是有一定的 VR感的。

當(dāng)然其優(yōu)秀的用戶體驗(yàn)點(diǎn)完全不止這些,作為一個(gè)體積3G多的程序有許許多多的界面,但介于游戲和產(chǎn)品的邏輯還是有區(qū)別的,就不展開繼續(xù)講了。但有一點(diǎn)是值得注意的,即整個(gè)游戲的任何界面幾乎都是在用心去做,將用戶體驗(yàn)做到了。

三、以崩壞3為例談?wù)剶?shù)值系統(tǒng)

數(shù)值系統(tǒng)顧名思義就是一個(gè)產(chǎn)品的數(shù)值設(shè)計(jì),比如:得多少積分用戶可以升級(jí),在搞活動(dòng)的時(shí)候是否應(yīng)該贈(zèng)送 VIP,如果贈(zèng)送了 VIP 多久比較好,VIP 應(yīng)該有哪些權(quán)限,如果各種等級(jí)的 VIP 功能是不同的,那么一個(gè)級(jí)別應(yīng)該差多少。

以上僅僅是產(chǎn)品的數(shù)值體系,而游戲的數(shù)值體系就更復(fù)雜了,比如:游戲貨幣的產(chǎn)出量以及回收機(jī)制,維持整個(gè)游戲世界的裝備價(jià)值以及金幣價(jià)值,防止產(chǎn)生通貨膨脹。

產(chǎn)品和游戲有這樣的區(qū)別很正常,畢竟產(chǎn)品只是提供一種服務(wù),而游戲更像是打造一個(gè)世界,要考慮的東西在一定程度上和現(xiàn)實(shí)世界有相似之處,比如:交易方式、稅收、貨幣體系、資源體系、玩家社群、不同勢力的實(shí)力均衡。

現(xiàn)在讓我們來簡單分析,當(dāng)然我們只分析在產(chǎn)品中也存在的數(shù)值體系,畢竟相信本文的讀者都是產(chǎn)品人而不是游戲迷。

1. 崩壞的VIP體系

VIP體系對于企業(yè)而言是非常重要的,因?yàn)檫@是企業(yè)收入最主要的來源之一。

所以誘導(dǎo)充值是所有企業(yè)都必須面臨的問題,那么大多數(shù)產(chǎn)品有哪些套路呢,一般有以下三個(gè)常見方式:

  • 首沖優(yōu)惠:第一次充值會(huì)比較便宜,降低用戶付費(fèi)門檻,而當(dāng)用戶真的使用過 VIP 之后,再回到非VIP 就比較難了,可能將一個(gè)本來不想充值的用戶轉(zhuǎn)化為 VIP用戶,即由奢入儉難;
  • 連續(xù)包月:不少用戶懶于去取消掉這個(gè)功能,對于那些對價(jià)格不敏感且搖擺不定的用戶而言,讓他們通過連續(xù)包月進(jìn)行消費(fèi)是不錯(cuò)的策略;
  • 活動(dòng)贈(zèng)送:完成一定的任務(wù),贈(zèng)送VIP,理由和首沖優(yōu)惠很相似,都是降低用戶進(jìn)入門檻。

現(xiàn)在讓我們再來看看崩壞3是如何設(shè)計(jì)其 VIP體系的。

初始獎(jiǎng)勵(lì)非常豐厚:讓用戶忍不住想要充值,如上圖所示,只需要充值非常少的錢,就可以獲取以上獎(jiǎng)勵(lì),而這些獎(jiǎng)勵(lì)非常不錯(cuò)。這點(diǎn)最大的意義在于讓用戶愿意去嘗試充值,只要充值一次,以后就有可能繼續(xù)消費(fèi)。

限時(shí)購買:促銷雖然老套,但卻十分有用,這種倒計(jì)時(shí)總能夠刺激用戶的消費(fèi)欲望。

月卡系統(tǒng):很有意思的系統(tǒng),充值一次之后可以每天都領(lǐng)取獎(jiǎng)勵(lì),而效果是直接購買獎(jiǎng)勵(lì)的十倍。但只有每天不斷的進(jìn)行領(lǐng)取才能夠達(dá)到獲得獎(jiǎng)勵(lì)的目的。這種模式其實(shí)就是用日活換金幣,雖然用戶節(jié)省了錢但卻必須每日登錄才能夠獲取這些金幣。

類似的策略拼團(tuán)也有使用,不過不是用日活換金幣而是用用戶換金幣。

2. 數(shù)值系統(tǒng)

數(shù)值系統(tǒng)對于游戲而言是生命所在,史玉柱曾說過:我不擔(dān)心別人抄走我的系統(tǒng),因?yàn)閿?shù)值體系他們抄不走。

崩壞3的數(shù)值系統(tǒng)就不提了,因?yàn)樘^復(fù)雜,而且與產(chǎn)品相關(guān)性也不是很大。

對于產(chǎn)品而言,數(shù)值系統(tǒng)沒有那么意義重大,但也需要很好平衡各方的利益,否則可能讓產(chǎn)品迅速衰落。

一個(gè)簡單的例子即會(huì)員該有多少權(quán)利,不同等級(jí)的會(huì)員權(quán)利應(yīng)該如何區(qū)分。比如以視頻網(wǎng)站為例,假設(shè)有兩種級(jí)別的會(huì)員,大會(huì)員和小會(huì)員。那么用戶就有三種,免費(fèi)用戶,小會(huì)員以及大會(huì)員。假設(shè)會(huì)員的作用是看高清視頻,而視頻的級(jí)別有五個(gè),等級(jí)越高質(zhì)量越好。

那么該如何設(shè)置他們的權(quán)限呢,可能的方式有以下幾種:

  • 方式一:普通用戶等級(jí)一,小會(huì)員等級(jí)二,大會(huì)員等級(jí)三;
  • 方式二:普通用戶等級(jí)一,小會(huì)員等級(jí)三,大會(huì)員等級(jí)四;
  • 方式三:普通用戶等級(jí)一,小會(huì)員等級(jí)四,大會(huì)員等級(jí)五;
  • 方式四:普通用戶等級(jí)二,小會(huì)員等級(jí)三,大會(huì)員等級(jí)四;
  • 方式五:普通用戶等級(jí)二,小會(huì)員等級(jí)四,大會(huì)員等級(jí)五;
  • 方式六:普通用戶等級(jí)三,小會(huì)員等級(jí)四,大會(huì)員等級(jí)五。

當(dāng)然一般的 VIP 肯定不止有視頻權(quán)限,還會(huì)附帶一些其他權(quán)限,比如可以有打賞用的幣,可以有更好看的頭像框,文字的顏色是可以選的等等。

不難發(fā)現(xiàn),這將是非常復(fù)雜的一個(gè)體系,哪種體系都對一些用戶有利,對另外一些用戶不利,如何合適的定制產(chǎn)品的數(shù)值系統(tǒng)就是一個(gè)很復(fù)雜的問題。如果體系偏向免費(fèi)用戶,可能讓付費(fèi)用戶付費(fèi)意愿降低,如果偏向付費(fèi)用戶,可能讓免費(fèi)用戶覺得沒有存在感,直接離開。

四、游戲給產(chǎn)品的啟示

用心做產(chǎn)品是有用的:如今流量獲取非常困難,產(chǎn)品的成功很大程度上取決于是否有流量扶持。這對于產(chǎn)品人而言是比較沮喪的現(xiàn)狀,畢竟辛辛苦苦做一個(gè)產(chǎn)品結(jié)果比不上某些巨頭產(chǎn)品的一個(gè)入口有效。這種情況確實(shí)是存在的,但我們也要相信產(chǎn)品的優(yōu)秀絕對不是沒有意義的;

可以用日活換收益:現(xiàn)在的產(chǎn)品VIP系統(tǒng)大多都是充值后獲得權(quán)限,但完全可以做以下這樣一個(gè)策略。比如:視頻網(wǎng)站的 VIP 是一個(gè)月15元,那么我們可以推出一個(gè)套餐,一個(gè)月只要5元,但是這個(gè)套餐有個(gè)條件是每天登錄后第二天可以享受 VIP服務(wù),如果用戶有一天未登錄,那么第二天就沒有 VIP服務(wù)可以享受,這種策略其實(shí)就是用10元錢換取了一個(gè)用戶的每日登錄;

精準(zhǔn)營銷事半功倍:崩壞3在 b站的廣告效果非常好,而且直接引起了 up主的關(guān)注,他們會(huì)再次創(chuàng)作內(nèi)容對崩壞3進(jìn)行推廣。但如果將這個(gè)廣告投到58同城呢,可能就沒有什么意義了;

數(shù)值系統(tǒng)平衡各方:免費(fèi)用戶和付費(fèi)用戶的關(guān)系非常復(fù)雜,兩者既有利益沖突又可能相互轉(zhuǎn)化,因此做好平衡非常重要,不要得罪任何一方。




藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

案例研究:一款助眠APP的UI設(shè)計(jì)分析

藍(lán)藍(lán)設(shè)計(jì)的小編

現(xiàn)在,我們發(fā)現(xiàn)健康類APP越來越多了:健身應(yīng)用程序、跟蹤器、卡路里計(jì)算器、水和食物日記、活動(dòng)提醒等等,這些APP的確對我們保持日常健康提供了幫助。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

博博

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

圖片來源:古田路9號(hào)、優(yōu)秀網(wǎng)頁設(shè)計(jì)、微博

最近設(shè)計(jì)界有兩個(gè)段子火了

甲方爸爸說:

“用PS不專業(yè)要用photoshop”

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

另一個(gè)就是

女設(shè)計(jì)師和甲方爸爸網(wǎng)戀,被騙稿??!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

講真,大大君我看到這兩個(gè)段子

默默心疼設(shè)計(jì)師幾秒鐘

如果以后還遇到這種奇葩

就把這篇文章砸他臉上

勞資設(shè)計(jì)一張海報(bào)這么難,你的臉夠本嗎?

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

今天大大君我就教大家

17種常見的海報(bào)設(shè)計(jì)技巧吧!

文字分散法則

字體分散的海報(bào)設(shè)計(jì)技巧是我們經(jīng)常見的一種設(shè)計(jì)手法,通過將字體拆分重組、改變字體大小、排版來起到吸引目光的效果。

例如下面這些

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

故障效果的設(shè)計(jì)法則

故障效果的海報(bào)設(shè)計(jì)通常會(huì)用把設(shè)計(jì)的主視覺圖形或文字,進(jìn)行幻影、扭曲、重合疊加等形式去呈現(xiàn),能迅速將人的眼球吸引過來。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

色彩疊加海報(bào)設(shè)計(jì)法則

色彩疊加法則其實(shí)是海報(bào)色彩設(shè)計(jì)技巧中的細(xì)分領(lǐng)域,其特色是利用兩種或者兩種以上的顏色進(jìn)行畫面的切割、重組、漸變、疊加等設(shè)計(jì)手法,去突出整體畫面的主焦點(diǎn),若色彩搭配好了,會(huì)起到非常震撼的視覺效果。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

文字切片海報(bào)設(shè)計(jì)法則

文字切片其實(shí)也就是把文字按視覺呈現(xiàn)的需求,進(jìn)行切割,其設(shè)計(jì)的優(yōu)勢在于字體呈現(xiàn)較為立體,畫面的節(jié)奏感強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

圖文疊加的海報(bào)設(shè)計(jì)法則

圖文疊加的海報(bào)設(shè)計(jì)法則,多用于電影海報(bào),將人物或者場景與文字疊加,營造一種重復(fù)錯(cuò)落的視覺感。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

液態(tài)效果的海報(bào)設(shè)計(jì)法則

液態(tài)效果的海報(bào)設(shè)計(jì)通常會(huì)選擇用較為豐富的顏色進(jìn)行漸變,高斯模糊或者扭曲的形式去呈現(xiàn),畫面的視覺大多以抽象的概念去呈現(xiàn)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

雙重曝光的海報(bào)設(shè)計(jì)法

雙重曝光的海報(bào)設(shè)計(jì)用人或者動(dòng)物與第三方元素進(jìn)行重合、它最大的特點(diǎn)是利用光與影的結(jié)合,打造出比較跨時(shí)空的錯(cuò)落感,這種設(shè)計(jì)手法多用于電影海報(bào)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

單字母的海報(bào)設(shè)計(jì)法則

英文字母的玩法有很多種,疊加,變形、重組等,單個(gè)的英文字母同樣也可以這樣玩,打破畫面的單一性,變得趣味性很強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

正負(fù)形海報(bào)設(shè)計(jì)法則

正負(fù)形的海報(bào)設(shè)計(jì)其亮點(diǎn)在于利用負(fù)空間形成巧妙構(gòu)圖。一張圖中隱藏著另一個(gè)畫面。

大多數(shù)的設(shè)計(jì)師會(huì)選用負(fù)空間的方式,將視覺中心聚焦在一個(gè)比較小的物體上,并在周圍留出視覺呼吸空間。將文本置于負(fù)空間內(nèi),來吸引視線。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

立體海報(bào)設(shè)計(jì)法則

3D視覺效果的海報(bào)設(shè)計(jì)一直都是設(shè)計(jì)師們比較熱衷的表現(xiàn)手法,將字母或者圖案加上陰影效果,讓主視覺畫面凸出來?;蛘呷谌霂缀蔚膱D形元素,將平面的主視覺變得立體化。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

文字海報(bào)設(shè)計(jì)法則

文字海報(bào)設(shè)計(jì)包含很多種表現(xiàn)形式,利用滿版、留白、S型等排版形式布局畫面,讓文字代替圖形去表達(dá)主畫面。這也是較為常見的海報(bào)設(shè)計(jì)形式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

紙質(zhì)效果的海報(bào)設(shè)計(jì)法則

紙質(zhì)效果的海報(bào)設(shè)計(jì)其實(shí)也屬于立體海報(bào)的一種,形象和感覺的組合,是紙質(zhì)效果海報(bào)設(shè)計(jì)的關(guān)鍵。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

而紙張給人的感覺是質(zhì)感和厚重這兩種形式,所以畫面的呈現(xiàn)因圍繞這兩種形式進(jìn)行展開。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

照片切割法則

照片切割也就是和文字或圖形進(jìn)行重合、疊加、打散的表現(xiàn)手法來增加海報(bào)設(shè)計(jì)的層次感。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

透明效果海報(bào)設(shè)計(jì)法則

海報(bào)設(shè)計(jì)中,如果畫面的顏色太過單調(diào),可以將部分塊面用較為鮮艷的顏色進(jìn)行突出,這種表現(xiàn)形式通常適用于海報(bào)中文字較多的處理方式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

復(fù)古風(fēng)格的海報(bào)設(shè)計(jì)法則

復(fù)古風(fēng)的海報(bào)設(shè)計(jì)通常會(huì)選用顏色飽和度較低的顏色,搭配毛筆字體或肌理的觸感進(jìn)行呈現(xiàn),這種設(shè)計(jì)手法,大多會(huì)用于電影海報(bào)或者藝術(shù)展覽之類的范圍。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

插畫風(fēng)格的海報(bào)設(shè)計(jì)法則

插畫風(fēng)格的海報(bào)設(shè)計(jì)具備很強(qiáng)的講故事能力,無論是小清新的畫風(fēng)還是較為夸張的插畫手法,都能將整個(gè)畫面變得生動(dòng)活潑了很多,這也是很多設(shè)計(jì)師最常用的海報(bào)設(shè)計(jì)的表現(xiàn)形式。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

漸變的海報(bào)設(shè)計(jì)法則

漸變色系的海報(bào)設(shè)計(jì),用很多種顏色進(jìn)行巧妙融合,畫面分為簡潔和個(gè)性兩種形式呈現(xiàn),視覺沖擊力很強(qiáng)。

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!

過癮!這17個(gè)海報(bào)設(shè)計(jì)小技巧,果斷收藏了!


設(shè)計(jì)方法:用問題引出答案,群策群力繪制用戶體驗(yàn)地圖

藍(lán)藍(lán)設(shè)計(jì)的小編

周五參加了港大space學(xué)院的工作坊,感謝Google張英惠老師的精彩授課,學(xué)到了通過發(fā)問找到解決問題的方法,群策群力繪制用戶體驗(yàn)地圖。IMG_20170922_152217.jpg

煩人的“小妖精”:淺談小紅點(diǎn)的設(shè)計(jì)

資深UI設(shè)計(jì)者

導(dǎo)語

隨著各類App的業(yè)務(wù)功能不斷豐富,小紅點(diǎn)已經(jīng)成為互聯(lián)網(wǎng)從業(yè)者們最常使用的運(yùn)營工具之一,每當(dāng)有新的運(yùn)營內(nèi)容或新功能上線,大家的做法往往是“在那放個(gè)紅點(diǎn)就行了”。然而簡單粗暴的形式以及不加節(jié)制的投放,讓小紅點(diǎn)變成了人人厭煩的“小妖精”。本文從設(shè)計(jì)的角度出發(fā)淺談小紅點(diǎn)的一些設(shè)計(jì)細(xì)節(jié),期望引起大家對小紅點(diǎn)的關(guān)注,在這里拋磚引玉,也期待感興趣的小伙伴一起探討。

煩人的小紅點(diǎn)

人類似乎天生對不對稱,不和諧的事物有厭煩心理,并且想要去糾正這些“錯(cuò)誤”,簡而言之就是大家平時(shí)所說的“強(qiáng)迫癥”。而小紅點(diǎn)則完美利用了這一人性的弱點(diǎn),它就像白嫩臉頰上長出的一顆小痘痘,讓人忍住不去要去擠破它。因此,小紅點(diǎn)也成為了一把產(chǎn)品運(yùn)營利器,只要投放在某個(gè)業(yè)務(wù)入口,就幾乎沒有用戶會(huì)對它熟視無睹,而當(dāng)用戶忍不住要去輕觸消除它時(shí),產(chǎn)品側(cè)為業(yè)務(wù)導(dǎo)流的目的也就達(dá)到了。

那么問題來了,用戶喜歡小紅點(diǎn)嗎?在Google和必應(yīng)上搜索關(guān)鍵詞“App 小紅點(diǎn)”,幾乎有一半的搜索結(jié)果是“教你如何消除小紅點(diǎn)”。

日歷

鏈接

個(gè)人資料

存檔