首頁

別讓我思考

ui設(shè)計分享達(dá)人

《點石成金:訪客至上的網(wǎng)頁設(shè)計秘笈》在用戶體驗領(lǐng)域,可以說是一部很經(jīng)典的書籍,該書于2000年出版第一版,現(xiàn)在已經(jīng)更新到第三版,自從問世以來可以說已經(jīng)將近20年了,但一直是備受推崇。這本書主要為我們介紹了產(chǎn)品可用性原則,并用大量的案例來闡述及運用。幾年前我讀過一次,最近再次重溫,準(zhǔn)備做一個整理,當(dāng)做自己的學(xué)習(xí)記錄。


作者史蒂夫·克魯克(簡稱Krug先生)是一名備受尊敬的可用性咨詢師,他把多年的從業(yè)經(jīng)驗,以通俗易懂的方式凝結(jié)成此書,并且篇幅簡短,雖然作者說兩個小時就可以讀完,但如果邊讀邊思考的話,兩個小時還是不夠的,畢竟這是一本工具類書籍,不是小說。本篇文章只是我的一個學(xué)習(xí)記錄,還是非常希望大家能夠讀一讀原著的。



別讓我思考,作為Krug可用性第一定律,意味著,設(shè)計者應(yīng)該盡量做到,當(dāng)看到一個頁面時,應(yīng)該是不言而喻,一目了然。我能明白它是什么,怎樣使用它,而不需要花費很多精力進行思考。


舉個例子,假如一個你不認(rèn)識的人,就比如是你隔壁的鄰居,對你的網(wǎng)站毫無興趣,也幾乎不知道如何使用,但是他仍然看一眼你的主頁,就知道這是干什么的,該怎么用。


比如以下這個網(wǎng)站,這是我從網(wǎng)上隨便找的一個網(wǎng)站,之前從來沒有聽說過,點擊鏈接進入后的第一眼,就是很多關(guān)于車的元素,猜測一定是關(guān)于車的網(wǎng)站;右下角兩個大大的按鈕“找新車”“品牌找車”,那這個應(yīng)該是賣車網(wǎng)站,八九不離十了。先不說下面是多么雜亂不堪,起碼第一眼我就可以看出,這個網(wǎng)站是干什么的,該怎么用,這是最基本的。



有可能我們之前訪問過一些網(wǎng)站,打開后茫然不知所措,幾乎把首頁的每個地方都瀏覽過了,才知道是該怎么操作,或者某些元素看起來像按鈕,但是卻不能點擊,也沒有點擊失敗的提示...總之體驗很差。所以當(dāng)我們創(chuàng)建網(wǎng)站時,就需要去掉這些問號。作為一個用戶,永遠(yuǎn)不能讓我花幾秒思考,能不能點擊的問題。


當(dāng)我們訪問WEB的時候,每個問號都會加重我們的認(rèn)知負(fù)擔(dān),把我們的注意力從要完成的任務(wù)上拉開。這種干擾也許很輕微,但他們會累積起來,有時候這樣的干擾不用太多,就足以讓我們抓狂。這樣會讓我們對網(wǎng)站失去信心。


那么哪些事情是訪問者在訪問網(wǎng)站時不應(yīng)該花時間思考的事呢?


例如:

1、我在什么位置?

2、我該從哪里開始?

3、他們把某某放在什么地方了?

4、這個頁面上最重要的是什么?

5、為什么他們給他取這個名字?

...

我們在設(shè)計網(wǎng)站的前和后,可以把這些作為走查對象審視一下,慢慢的這些習(xí)慣就會變成你的潛意識,再次設(shè)計網(wǎng)站的時候就會自然而然的把這些因素考慮在內(nèi)。


不過,有時候,特別是在進行一項嶄新的,開拓性的或者非常復(fù)雜的頁面設(shè)計時,也許只能做到自我解釋。在一個自我解釋的頁面中,用戶只需要花一點點時間去理解頁面的外觀,精心選擇的名稱,頁面布局以及少量仔細(xì)斟酌過的文字。所以,如果不能做到讓一個頁面不言而喻,那么至少應(yīng)該讓它自我解釋,這個非常重要。



我們常常認(rèn)為用戶會盯著每個網(wǎng)頁,仔細(xì)閱讀我們精心制作的文字,領(lǐng)會我們組織頁面的方式,然后,在點擊某個鏈接之前權(quán)衡他們的可選目標(biāo)。


但是大部分情況卻是,用戶只會在每個頁面上瞥一眼,掃過一些文字,點擊第一個令他們感興趣或者大概符合他們目標(biāo)的鏈接。通常,頁面上的很多部分他們都不看(想一想,你是不是這樣瀏覽網(wǎng)頁的呢)。


本想舉快手WEB端的例子,沒想到再次打開后發(fā)現(xiàn)已經(jīng)改版了,而且應(yīng)該是近兩個月左右的事情,可惜已經(jīng)不能截圖,不過這次的改版比之前好多了。

上一版本中,幾乎有幾段整段整段的文字,雖然文采不錯,比較優(yōu)美吧,但誰有耐心看呢,總之我打開幾次,一次也沒一字一字的閱讀過。這個直接增加了用戶的負(fù)擔(dān),降低了主要元素的層級,畫蛇添足。


所以,如果我們想設(shè)計有效的網(wǎng)頁,必須開始接受關(guān)于網(wǎng)絡(luò)使用的三個事實:


一、我們不是閱讀,而是掃描


原因有3:

1、我們總是處于忙碌之中;

2、我們知道自己不必閱讀所有內(nèi)容,只對網(wǎng)頁中的一小部分內(nèi)容感興趣,剩下的內(nèi)容我們并不關(guān)心,掃描就是我們找到相關(guān)內(nèi)容的方式。

3、我們善于掃描,在日常生活中,我們不管是看報紙,還是雜志,書籍,基本都是用掃描的方式,找到我們感興趣的部分。


大家想一想,我們在看報紙的時候,是不是先瀏覽一遍,然后看到哪個標(biāo)題比較吸引才專心去看那篇文章,而且也不會是一字一句的去讀,而是知曉大概內(nèi)容即可。


再舉個貼近的例子,打開站酷的首頁,你們會從左到右,從上到右的一字不漏的去看嗎,我們是不是用眼睛掃一遍,看到吸引你的內(nèi)容,然后再點進去看詳情,對的,這就是互聯(lián)網(wǎng)用戶的掃描閱讀。



二、我們不做最佳選擇,而是滿意即可


在設(shè)計頁面時,我們通常假設(shè)用戶只是掃過整個頁面,考慮所有可能的選項,然后選擇一個最好的。


事實上,大多數(shù)時間里,用戶不會選擇最佳選項,而是選擇一個合理的選項,一旦發(fā)現(xiàn)一個鏈接,看起來似乎能跳轉(zhuǎn)到我們想去的地方,那很大的機會就會去點擊它。


原因有以下幾個:

1、我們總是處于忙碌之中,尋找最佳策略需要的時間很長。

2、如果猜錯了,也不會產(chǎn)生什么嚴(yán)重的后果。就算做了錯誤選擇,我們只要點擊幾次返回按鈕就好,所以,返回按鈕,是WEB端用的最多的地方。

3、對選擇進行仔細(xì)思考還不如很快多嘗試幾次。

4、猜測更有意思,猜測不會像仔細(xì)權(quán)衡那么累,而且如果猜對了,速度會更快。


當(dāng)然,這并不是說用戶在點擊之前從不進行權(quán)衡,這要取決于時間上的緊迫以及其他因素。


大家想一想,現(xiàn)實中是不是這樣的呢。也許通往一個入口有好幾條路徑,但是第一次進入該網(wǎng)站的時候,不會尋找最佳路徑,而是試探的摸索,只要找到就可以了,不會刻意的找那條最捷徑的。

 

三、我們不是追根究底,而是勉強應(yīng)付。


生活中,人們在使用任何東西,往往不理解它們的運作原理,甚至對它們的工作原理有完全錯誤的理解。


無論面對哪種產(chǎn)品,除了刻意鉆研的,很少有人會花時間閱讀說明書。相反,我們往往是貿(mào)然前進,勉強應(yīng)付。


比如我們買了一臺新款電視機,幾乎從來不會把電視機的零件一個個都拆下來,完全理解了它們的工作原理后才使用,我們甚至連說明書都不看,而是拿著遙控器自己琢磨,完全沒有必要去深究。



為什么會這樣?

1、這對我們來說并不重要。對于大多數(shù)人來說,是否明白背后的工作機制并不重要,只要正常使用即可,這并不是智力低下的表現(xiàn),而是我們并不關(guān)心。

2、如果發(fā)現(xiàn)某個事物能用,我們會一直使用它。我們一旦發(fā)現(xiàn)某個事物能用,很少去找更好的替代品。如果偶然發(fā)現(xiàn)一種更好的方法,我們會換用這種更好的方法,但很少去主動尋找更好的。


舉個我小時候的例子,上學(xué)時我用的第一只中性筆是同學(xué)給我的,雖然可以用,但我發(fā)現(xiàn)比較粗,不太喜歡,但是認(rèn)為可以用,從來沒想過是否有稍微細(xì)一點的。當(dāng)?shù)谝恢还P芯用完,去文具店購買時,發(fā)現(xiàn)竟然還有0.35的筆芯,很意外,當(dāng)然我就放棄了之前的筆芯,換作成0.35的,這樣的例子應(yīng)該都會發(fā)生在每個人的生活中。


那如果人們勉強應(yīng)付的時候這么多,有沒有弄明白真的那么重要嗎?答案是很重要,因為有時候可以勉強應(yīng)付,但通常效率不高,而且容易出錯。


如果用戶很清楚,不是勉強應(yīng)付呢?

1、他們會更容易找到自己需要的東西。

2、會更容易理解你的網(wǎng)站提供哪些服務(wù)。

3、你更可能引導(dǎo)他們到你的網(wǎng)站上希望他們看到的地方。

4、在你的網(wǎng)站上,會覺得自己更聰明,感覺更好,這樣他們就會離開讓人勉強應(yīng)付的網(wǎng)站了。


這也是現(xiàn)在競品之間搶奪用戶的一個重要因素,兩個服務(wù)內(nèi)容一樣的產(chǎn)品,一個直觀明了,一個結(jié)構(gòu)比較混亂,不能很快找到目標(biāo),對于這兩個產(chǎn)品,那用戶該選擇哪一個呢,可想而知。



前面已經(jīng)說到,現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀,那么在這種情況下,怎樣才能讓用戶清晰理解你的網(wǎng)站,提高體驗。


需要注意5個方面,保證他們會很容易理解你的網(wǎng)站:

1、在每個頁面上建立清晰的視覺層次;

2、盡量利用習(xí)慣用法;

3、把頁面劃分成明確定義的區(qū)域;

4、明顯標(biāo)識可以點擊的地方;

5、最大限度降低干擾;


前面已經(jīng)說到,現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀,那么在這種情況下,怎樣才能讓用戶清晰理解你的網(wǎng)站,提高體驗。


一個視覺層次清晰的頁面有3個特點:

1、越重要的部分越突出;

2、邏輯上相關(guān)的部分,視覺上也相關(guān);

3、邏輯上包含的部分在視覺上游嵌套;

 

也可以這么說,要把版式設(shè)計的四個原則,親密,重復(fù),對齊,對比,把這幾點做好。

 

對于習(xí)慣用法可以說是人的一種本性習(xí)慣了,這也是為什么很多競品都很相似的原因了。


舉個常見的例子,比如聊天的icon,都是一種對話框的設(shè)計,因為人們已經(jīng)習(xí)慣了這種圖標(biāo)設(shè)計,如果換成其他,用戶看到后會不理解這到底是什么東西。



對于設(shè)計師,很多人一直想創(chuàng)新,但是一定要秉持兩個原則:

1、創(chuàng)新的方法同樣也要不言而喻;

2、能夠為用戶帶來很大價值,值得用戶付出一點努力來學(xué)習(xí)新的方法。



Krug可用性第二定律——點擊多少次都沒關(guān)系,只要每次點擊都是無須思考的選擇。

 

文中說:WEB設(shè)計師和可用性專家一直有一個爭論,用戶在到達(dá)目標(biāo)之前點擊多少次不會覺得有挫敗感,作者認(rèn)為,真正的問題不是到達(dá)目標(biāo)之前要點擊的次數(shù),而是每次點擊有多艱難,需要多少思考,有多大的不確定性來判斷自己是否在進行正確的選擇。

 

所以當(dāng)我們在使用目前一些成功的產(chǎn)品時,會感到自然而然的流暢體驗,雖然有時候因為產(chǎn)品體量大,沒有很快找到目標(biāo),但我們也沒有過多挫敗和煩躁。


Krug可用性第三定律——去掉每個頁面上一半的文字,然后把剩下的文字再去掉一半。


好處:

1、可以降低頁面的噪聲。

2、讓有用的內(nèi)容更加突出。

3、讓頁面更簡短,讓用戶在每個頁面上一眼就能看見更多的內(nèi)容,而不必滾動屏幕。

 

如果有歡迎詞,盡量減少,能不用就不用。

指示性說明盡量不用。

如果指示性說明非常冗長,用戶發(fā)現(xiàn)所需信息的機會很小。

我們應(yīng)該通過讓每項內(nèi)容不言而喻來完全消除指示性說明,當(dāng)指示文字變得完全沒有必要,就應(yīng)把他們?nèi)咳サ簟?


現(xiàn)在比較成功的App的引導(dǎo)頁都非常簡潔,因為沒有人會在進入的時候看你寫的一長段文字,等待很長時間,除非視覺性很強,比如今年美團變黃的那段視頻,視覺沖擊力很強,我看完一次后,在網(wǎng)上又自己找,看了幾次。所以要做到盡量減少指示性說明。



作者認(rèn)為,很多網(wǎng)站,一旦到了第二個層次,導(dǎo)航會變得支離破碎,隨意發(fā)揮,以至于很難找到良好的三級導(dǎo)航的例子。


原因有3:

1、好的多級導(dǎo)航本來就很難設(shè)計,同時有很多元素需要安排到頁面中。

2、設(shè)計師即使在設(shè)計前兩個層次也常感到時間不夠。

3、第三個原因是它看起來并不重要,不是主導(dǎo)航,也不是二級導(dǎo)航,而且有一種傾向認(rèn)為,當(dāng)人們深入到網(wǎng)站的這一個層次后,會自然明白如何進行操作。

 

而且就算設(shè)計師提出需求,他們也可能拿不到,因為負(fù)責(zé)內(nèi)容的通常不會想的那么深遠(yuǎn)。


事實上,用戶在底層頁面上花的時間通常和花在頂層頁面的時間相同,除非從一開始就自頂往下進行導(dǎo)航設(shè)計,否則以后很難再進行添加,也很難保持一致性。


網(wǎng)站主頁是我們打開后第一眼看到的,也是最容易向用戶突出網(wǎng)站的價值等內(nèi)容的,那在主頁該放什么哪些內(nèi)容比較合適呢:

1、站點的標(biāo)識和使命:告訴我們這是什么網(wǎng)站,做什么的;

2、站點層次:提供服務(wù)概貌,包括內(nèi)容,功能,組織形式;

3、搜索;

4、導(dǎo)讀:主頁最好有“里面有精彩內(nèi)容”的暗示提醒;

5、內(nèi)容經(jīng)常更新;

6、友情鏈接;

7、快捷方式:最常訪問的內(nèi)容片斷;

8、登錄、注冊;

...


除了這些主要的,最好還要滿足這些:

1、讓我看到自己正在尋找的東西;

2、我也許感興趣的精彩內(nèi)容;

3、告訴我從哪里開始;

4、建立可信度和信任感。

 

比如打開淘寶首頁,你不僅可以看到以上羅列的內(nèi)容,淘寶通過算法,會自動推薦你曾經(jīng)搜索過得商品,最上角的非常醒目的位置,logo動效還會告訴你最近的活動。



對于一個控件的選擇或者其他設(shè)計,很多團隊經(jīng)常在無休止的討論,始終沒有決定,這樣的討論除了浪費時間,也很容易造成緊張氣氛,破壞團隊成員之間的關(guān)系,常常讓團隊無法做出關(guān)鍵的決定.


我們每個人都是用戶,和所有的用戶一樣,對網(wǎng)站上喜歡什么,不喜歡什么有著強烈的感覺。

 

我們往往認(rèn)為我們自己喜歡的,絕大多數(shù)用戶也都喜歡。這應(yīng)該是人的一種天性。

 

同時,在團隊中,由于職位不同,不同崗位的人對網(wǎng)站設(shè)計也有不同的看法。


比如設(shè)計師喜歡視覺上比較好看的網(wǎng)站,而開發(fā)卻喜歡構(gòu)建新穎,有趣,功能出色的網(wǎng)站。所以不同的角色,不同的視角,常常造成不同的看法,繼而不停的討論,讓會議陷入僵局,當(dāng)然每個人的想法并不是一層不變的,只要有足夠的證據(jù)能打動他,他的想法完全可以反過來。


一旦因個人和職位不同而造成的沖突不分勝負(fù)時,討論常常會轉(zhuǎn)化為尋找某種方式(專家的意見、焦點小組或者用戶測試)來決定絕大部分用戶喜歡或不喜歡什么,但是,找出所謂的普通用戶,就是錯誤的想法,因為,本來就沒有什么普通用戶,所有的web用戶都是的。

 

越是仔細(xì)觀察用戶,認(rèn)真傾聽他們表達(dá)自己的想法,越能意識到他們對網(wǎng)頁的個人反應(yīng)和很多不同的變量有關(guān)系。所以,試圖用一些簡單的喜好來形容用戶,既瑣碎又沒有什么作用,另一方面,好的設(shè)計會把這種復(fù)雜性考慮進去。


關(guān)于普通用戶的這個說法,最糟糕的是加強了這種看法,認(rèn)為好的web設(shè)計主要是找出人們的喜好,這種想法看上去不錯。比如面包屑導(dǎo)航好,要么不好,彈出框好,要么不好,非黑即白。


問題是,對于大部分web設(shè)計問題來說,沒有簡單的“正確”答案,好的設(shè)計能滿足需要,也就是說,經(jīng)過仔細(xì)考慮,實現(xiàn)和測試的設(shè)計就是好的。


例如,對于Flash的使用,如果詢問用戶,有些用戶會說他們很喜歡Flash,而另外差不多同樣數(shù)量的用戶會說他們討厭Flash。實際上,他們不喜歡的是使用不當(dāng)?shù)腇lash,大而復(fù)雜的動畫,需要很長時間下載,沒有帶來任何價值。如果仔細(xì)觀察他們,很可能發(fā)現(xiàn)同樣是這些人,喜歡那些使用精心設(shè)計,適當(dāng)并小規(guī)模使用Flash的網(wǎng)站,增加一些簡約的修飾,或者有用的功能,同時又不帶來麻煩。


并不是說不存在完全錯誤的方法,有些設(shè)計網(wǎng)頁的方法確實是完全錯誤的,只是他們往往并不是設(shè)計團隊通常爭論的那些方法。


解決這種問題的關(guān)鍵方法就是,不要再問這樣的問題“大部分人喜歡這樣的導(dǎo)航嗎”,正確的問題應(yīng)該是“在這個頁面,這種導(dǎo)航會讓可能使用這個網(wǎng)站的大部分人產(chǎn)生一種良好的體驗嗎?”,然后觀察人們對它的看法和使用的方法,再不斷調(diào)整。


爭辯人們喜歡什么既浪費時間又消耗團隊的經(jīng)歷,而通過測試將討論對錯轉(zhuǎn)移到什么有效,什么無效上,更容易緩和爭論,打破僵局,而且測試會讓我們看到用戶的動機,理解,反應(yīng)的不同,從而讓我們不再堅持認(rèn)為用戶的想法和我們的想法一樣。



在做測試時,往往很多人不清楚什么是焦點小組訪談和可用性測試的的區(qū)別,那就先科普一下。


焦點小組訪談,百度百科的解釋是這樣的:就是采用小型座談會的形式,由一個經(jīng)過訓(xùn)練的主持人以一種無結(jié)構(gòu)、自然的形式與一個小組的具有代表性的消費者或客戶交談。從而獲得對有關(guān)問題的深入了解。


簡單來說就是一個小組圍坐在桌子周圍,主持人拋出問題,針對這一問題,被訪談人說出自己的想法,從而快速得到用戶的意見和反應(yīng)。


焦點小組可以抽象的確定你的目標(biāo)用戶想要什么,需要什么,喜歡什么。也可以測試出網(wǎng)站的理念是否有意義,價值主張是否吸引人等等。


但焦點小組只是適合用于網(wǎng)站設(shè)計前就應(yīng)該進行的,是一個早期階段方法。


比如電視劇《我的前半生》中,段曉天因得不到主角羅子君而為難她的那個片段,就是一次焦點小組訪談。



可用性測試的百度百科解釋是這樣的:讓一群具有代表性的用戶對產(chǎn)品進行典型操作,同時觀察員和開發(fā)人員在一旁觀察,聆聽,做記錄。


該產(chǎn)品可能是一個網(wǎng)站,軟件,或者其他任何產(chǎn)品,它可能尚未成型。測試可以是早期的紙上原型測試,也可以是后期成品的測試。


簡單說就是向用戶展示一些內(nèi)容,不管是網(wǎng)站還是原型,或是草圖,并且要求用戶說出這是什么,并用他們來完成一項特定的任務(wù)。


如果想建立一個優(yōu)秀的網(wǎng)站,一定要測試。為一個網(wǎng)站工作幾個星期會讓你失去新鮮感,因為你對網(wǎng)站了解的太多,很多細(xì)節(jié)都知道,所以清楚網(wǎng)站是否正常運作的唯一方法就是測試。


測試會提醒你,不是每個人的想法都和你一樣,會和你用同樣的方法使用網(wǎng)站。


要記住,測試一個用戶比不做測試好一百倍。測試總是會有效果,哪怕對錯誤的用戶做一次糟糕的測試,也會讓你看到改善網(wǎng)站的一些方面。


在項目中,早做測試,哪怕一位用戶也好過最后測試50位用戶。


一旦一個網(wǎng)站投入使用,要改變就不是很容易了,有些用戶拒絕做出任何變化,所以在開始的時候,有助于防止你犯錯誤的方法都很劃算。


測試的關(guān)鍵不是證明什么或者反駁什么,而是了解你的判斷力。對于用戶的招募也不要太嚴(yán)格,如果能夠讓用戶是更接近使用網(wǎng)站的用戶就更好了,但更重要的是,要盡早和經(jīng)常進行測試,這是一個開發(fā),測試,修復(fù),再度測試的過程,沒有什么比現(xiàn)場用戶的反應(yīng)更重要了。

 

其實做可用性測試沒有想象的那么復(fù)雜,一個簡單的可用性測試完全可以把問題解決。

 

那么應(yīng)該測試多少用戶呢:

很多情況下,每輪測試用戶數(shù)量應(yīng)該是三個,最多四個。前三個用戶很可能會遇到幾乎所有最明顯的問題,更重要的是多做幾輪測試,只測試三名用戶有助于很快進行下一輪測試。由于你會修正在第一輪測試提出的問題,因此在第二輪測試中,就會發(fā)現(xiàn)新的問題。這樣的話,能夠很快的對測試進行總結(jié),并能很快利用測試結(jié)果進行修正。

 

很多人不知道該招募怎樣的測試人員,總是很糾結(jié),其實沒那么難。


實際上,我們都是初學(xué)者。就算找一位專家,你也有可能發(fā)現(xiàn)他也在勉強應(yīng)付。


設(shè)計出的網(wǎng)站如果只有你的目標(biāo)用戶能使用,這通常不是一個好的方法,應(yīng)該既要滿足專家的要求也要滿足新手的要求。


例外:

如果你的網(wǎng)站幾乎由某一類用戶使用,那就只招募這一類用戶。


如果你的目標(biāo)用戶群體可以分成幾個明顯的陣營,而且這些陣營有著完全不同的興趣和需要,那么至少要從每個陣營里選擇用戶進行一次測試。


同時避免對網(wǎng)站或網(wǎng)站背后的組織架構(gòu)進行預(yù)先討論。


可以找任何人來引導(dǎo)測試,真正需要的工作只是鼓勵測試用戶去嘗試。同時還需要一個觀察人,對于觀察人選,建議如果能讓管理層參與就好了,他們的參加能極大鼓舞團隊的士氣,這是他們第一次看到自己的網(wǎng)站被人使用,而且很多地方和他們想象的畫面并不一樣,這樣的話,團隊也更容易向管理層拿到對測試的投資,可謂是一舉兩得。



測試什么,什么時候測試?


測試:顧名思義,就是讓測試用戶看到網(wǎng)站,然后看他們能否理解這個網(wǎng)站,包括目標(biāo),價值主張,組織方法和運行方式等。

可以對用戶進行關(guān)鍵任務(wù)測試,讓用戶完成一些任務(wù),然后觀察他們是怎么做的。

 

立刻回顧測試結(jié)果


在測試后的討論會議上,主要做以下兩件事:


給問題分類:

回顧大家看到的問題,決定哪些問題需要修正。


解決問題:

找出修正這些問題的方法。


這樣,從其他人的角度看你的作品,常常能為問題提供全新的解決方案,或者讓你用一種新的眼光看待原有的問題。


要記住,這是一個循環(huán)的過程,不能只做一兩次就停止了。

  

測試常見問題:


1、用戶不清楚概念:用戶看著網(wǎng)站,要么不清楚他們說的是什么,要么他們以為自己知道,但是理解有誤。

2、他們找不到自己要找的字眼:這通常意味著你組織的內(nèi)容分類不符合用戶的習(xí)慣或者分類符合他們的習(xí)慣,但沒有使用他們期望的名字。

3、內(nèi)容太多了:有時候,他們要找的內(nèi)容就在頁面上,但就是看不到,在這種情況下,你需要減少頁面上的整體干擾或者把他們需要看到的內(nèi)容設(shè)置的更加醒目,讓它們從可視層次結(jié)構(gòu)中更加突出。

 

在任何測試中,你都可能會遇到這樣的情況,用戶暫時出現(xiàn)錯誤,然后在不需要任何幫助的情況下回到原來的軌道。


只要出現(xiàn)問題的人馬上發(fā)現(xiàn)自己偏離了原來的主體,盡量不需要幫助就能回到原來的方向,這種情況看起來沒有擾亂他們的活動,就可以忽略這些??偟膩碚f,如果用戶關(guān)于在哪里找到他們需要的內(nèi)容的第二次猜測總是對的,就可以了。


這樣的問題總會存在的,因為有些含混之處,總是沒有簡單的解決方法,不管怎么做,都會有一半用戶在第一次猜測的時候出錯,但每個人都會在第二次猜測之內(nèi)找到,這樣就好。

 

當(dāng)在測試時清楚看到人們沒有理解某些內(nèi)容時,大部分人的第一反應(yīng)是增加一些內(nèi)容,例如一些注釋或者指導(dǎo)說明。


這樣的方法不對,正確的解決方案往往是去除某個或一些讓人混淆的內(nèi)容,而不是增加另一些干擾。


而且不要太看重人們對新功能的需求,人們常常說“如果它能像某某”就好了,這樣的說法常常被看做是在要求新的功能,如果仔細(xì)詢問,常常會發(fā)現(xiàn),他們已經(jīng)找到一個很好的網(wǎng)站,能做某某功能,就算你做了這個功能,他們也不會切換到你的網(wǎng)站,他們只是在告訴你他們的喜好而已。

 

當(dāng)大家看到第一個用戶試著勉強應(yīng)付的時候,問題和解決方法都很明顯的那種驚喜,就像是現(xiàn)成的收獲,你應(yīng)該馬上修正它們。

 

和任何好的設(shè)計一樣,成功的網(wǎng)頁需要巧妙的平衡,要記住,哪怕一個微小的變化都會帶來不小的影響,有時候,真正的挑戰(zhàn)不是修正你發(fā)現(xiàn)的問題,而是修正這些問題的同時不破壞已經(jīng)正常運行的部分。


只要進行改變,就要仔細(xì)思考它將會影響哪些其他內(nèi)容。特別是,當(dāng)你把某些部分調(diào)整的更為突出時,想想看是不是把其他內(nèi)容的重要性降低了。


降低網(wǎng)站好感度有幾種方式:

1、隱藏我想要的信息;

2、因為沒有按照你們的方式行事而懲罰我;

3、向我詢問不必要的信息:大多數(shù)用戶都很介意個人信息,如果網(wǎng)站要求的信息超出當(dāng)前任務(wù)時,會讓用戶覺得很麻煩。

4、敷衍我,欺騙我:我們都會討厭虛偽的真誠,也討厭假意的關(guān)心,想想每次你聽到“您的電話對我們來說很重要”的時候是什么感覺吧!

5、給我設(shè)置障礙:不得不等待一個長長的flash介紹。

6、你的網(wǎng)站看上去不專業(yè):網(wǎng)站看起來很凌亂,組織很混亂。


就算你有些地方做的不好,也還有可能再度提高我的好感,只要讓我相信你的所作所為是在為我著想。


提高好感的幾種方式:

1、知道人們在你的網(wǎng)站上想做什么,并讓他們?nèi)菀酌靼祝喊延脩糇钕胱龅膸准路旁谧蠲黠@的地方;

2、告訴我我想知道的。

3、盡量減少步驟,讓用戶以最快的途徑到達(dá)他們想去的地方。

4、知道我可能有哪些疑問,并且給予解答:可以做一個經(jīng)常更新的常見列表。

5、為我提供協(xié)助。

6、容易從錯誤中恢復(fù):當(dāng)潛在的錯誤不可避免時,要提供一個快速且清晰的方法快速從錯誤中恢復(fù)。

7、如果不確定,記得道歉:有時候會因為暫時沒有能力或資源做到用戶想要的,如果你做不到,至少讓他們明白你知道你在給他們造成不便。

怎樣回應(yīng)不好的設(shè)計建議?

用心設(shè)計

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

 

一位高管在餐巾紙上畫了一個新的主頁原型來演示她使用和喜歡的網(wǎng)站。一個開發(fā)人員晚上在公司呆到很晚,并添加了一個他認(rèn)為很酷的新功能?;蛘弋a(chǎn)品經(jīng)理堅持采用與競爭對手相同的設(shè)計模式。

如果這些故事聽起來很熟悉,那么你并不孤單。大多數(shù)設(shè)計師都會收到這種“幫助”。

你的第一直覺可能是以平淡無奇的方式回應(yīng)“不”。但是,一個用戶體驗建議是否來自一個關(guān)鍵的利益相關(guān)者或項目周邊的人,應(yīng)該仔細(xì)處理。在您做出反應(yīng)之前,請考慮以下步驟:

你的第一反應(yīng)可能是利索地對對方說“不”。但是,無論UX建議是來自關(guān)鍵的利益相關(guān)者還是項目的外圍人員,都應(yīng)該仔細(xì)地處理它。在你做出回應(yīng)之前,考慮以下步驟:

一、消除主觀意識

第一步是將消除自己的主觀意識;你可能擁有豐富的設(shè)計經(jīng)驗,但不排除會有更好的想法。不要僅僅因為它是在PowerPoint文件而不是Photoshop原型中呈現(xiàn),所以不要認(rèn)為一個想法是壞的。

觀點的多樣性可以更有效的構(gòu)思:即使提出建議的人缺乏設(shè)計知識,他們可能會有不同的專業(yè)知識或經(jīng)驗,并且可能會為您正在嘗試解決的問題帶來寶貴的不同視角。

你如果像設(shè)計的上帝一樣扼殺了他人的創(chuàng)造力,最終會導(dǎo)致更糟糕的結(jié)果。

二、聽他們的想法

不加考慮就無情地否定別人的想法會阻礙人們在未來提出其他(有價值的)想法。即使一個想法對你來說顯然是錯誤的,但請記住,這個人也試圖讓設(shè)計變得更好,盡管他可能對“更好”的含義有不同的看法。通過允許他們:

  • 解釋這個想法
  • 解釋一下推理
  • 向您展示草圖或案列

三、將建議與問題分開

您可能會發(fā)現(xiàn),雖然提出的解決方案并不合適,但需要解決的問題很重要。

問問這個人他的設(shè)計理念想要達(dá)到什么目標(biāo)。他在考慮不同的用戶群或業(yè)務(wù)需求嗎?繼續(xù)問“什么?”和“為什么?”(可能以不同的方式),直到你明白他考慮的問題及思考方式是什么。

四、評估潛力

確定建議和問題和好處。即使是一個壞主意也有一些好處。

例如,在大屏幕版本的網(wǎng)站上使用漢堡包菜單不利于用戶輕松找到導(dǎo)航。這是不使用它的一個非常重要的原因。然而,桌面上的漢堡也有一個視覺上吸引人、整潔的標(biāo)題。確認(rèn)想法的成本和收益,以便更準(zhǔn)確地評估權(quán)衡,可以通過不同的方法犧牲或?qū)崿F(xiàn)哪些目標(biāo)。

考慮舉行設(shè)計原型會議(一個設(shè)計原型會議是短,會議期間,團隊成員迅速協(xié)作和草圖設(shè)計,以探索和分享的設(shè)計思路廣闊的多樣性),一起觀看用戶研究視頻,或舉辦其他類型的用戶體驗工作坊,以便這個想法的支持者可以繼續(xù)為這項想法解釋。

五、花點時間進行研究和探索

解釋一下,現(xiàn)在做一個設(shè)計決定意味著跳過構(gòu)思、研究和用戶反饋。在理想的情況下,轉(zhuǎn)向設(shè)計思維過程,為所解決的問題找到正確的解決方案。

根據(jù)您對目標(biāo)用戶及其任務(wù)的了解程度,確定一個想法的優(yōu)缺點可能需要:

  • 回顧以前的研究,看看這個想法是否已經(jīng)過測試,結(jié)果是什么。
  • 搜索可用性指南和最佳實踐,以獲得類似想法的案列。
  • 在可用性測試或A / B測試中構(gòu)建和測試該想法的原型。

論證該想法的成本可能會由于潛在的用戶混淆,而導(dǎo)致的用戶體驗問題,以及諸如可能延遲發(fā)布其他更重要功能的開發(fā)計劃中斷等后勤問題。要評估大量想法,請使用對其進行優(yōu)先級排序。

六、如何說“不”

如果您評估確定不應(yīng)該實施該想法,您可以以積極的方式拒絕。

承認(rèn)其貢獻(xiàn)

你不必著急全盤否定,但不要愚蠢的全去試一遍。找到您相信的有關(guān)他們建議的真實或有效的內(nèi)容,并將其標(biāo)注出來。這可能是這樣的:

  • “這種設(shè)計對于[角色類型]用戶可能有意義,因為他們需要[此功能]?!?
  • “聽起來你想要解決與重要用戶任務(wù)相關(guān)的[特定客戶投訴]?!?

由于這些短語之后都會出現(xiàn)“but”,因此請確保您在所提出的觀點中是真實的。否則,說它們根本不值得。

分享您的評估理由

當(dāng)人們投入足夠的時間來提出建議時,就是幫助他們學(xué)習(xí)更多關(guān)于用戶體驗的知識,并在整個團隊中傳播更多用戶體驗知識的理想時機。利用這些時間,交流你評估的理由,而不是僅僅告訴他們一個“不”。

1. “這種設(shè)計對于[persona type]用戶可能有意義,因為他們需要[此功能]。但是我們的主要角色可能會有這個問題,因為[原因]。“

2. “聽起來你想要解決與重要用戶任務(wù)相關(guān)的[特定客戶投訴]。確定信息的優(yōu)先順序可能會有所幫助,但要使其更大,顏色不同可能會導(dǎo)致橫幅失明。我想在第二天做一些調(diào)查,并提出一些替代解決方案的原型?!?

考慮提供原型,案列,設(shè)計原則,模式或研究發(fā)現(xiàn),以幫助他們理解為什么一個設(shè)計可能會導(dǎo)致問題,以及為什么不同的設(shè)計會更好地工作。把每一次互動都看作是灌輸貢獻(xiàn)者設(shè)計理念的機會——這是對未來的一種投資。

七、對強權(quán)講真話

當(dāng)客戶或強大的同事發(fā)出特定請求(或要求)時,即使您給出了解釋,也很難說“不”。但這并不意味著你應(yīng)該放棄自己的觀點并同意有害的建議。相反,與他們討論如何將想法背后的目標(biāo)和資源結(jié)合在一起,而不必直接實施。

合氣道是一種試圖和平解決沖突的武術(shù),它依靠轉(zhuǎn)彎和樞軸等動作來融合對立的能量。同樣的原則可以應(yīng)用于處理圍繞設(shè)計的沖突:與其直接拒絕一個想法,不如同意繼續(xù)探索這個建議,而不是明確地承諾實現(xiàn)它。

建議召開一次工作會議,在會上你可以提出既能獲得同樣好處又能避免成本的選擇。例如,你可以說:

  • “我明白你想達(dá)到的目標(biāo)。讓我把它與一些用戶體驗研究和模式進行比較,看看我們?nèi)绾文軌蛟谖覀兊募s束條件下提供最好的解決方案來實現(xiàn)你的目標(biāo)?!?
  • “我想看看我們的一些競爭對手是如何做到這一點的,并確保我們做得更好,或者至少做得一樣好。”
  • “讓我們按照這些思路勾勒出一些東西,以及一些相關(guān)的替代方案,并獲得一些用戶反饋,這樣我們就能實現(xiàn)你的目標(biāo)?!?

八、通過尋求早期設(shè)計輸入來預(yù)防這些問題

比優(yōu)雅地轉(zhuǎn)移壞主意更好的方法是主動引導(dǎo)合作進入更有效的軌道。您可以通過在結(jié)構(gòu)化的、戰(zhàn)略性的時間(例如預(yù)定的研討會)尋求輸入,最大限度地利用每個人的貢獻(xiàn)。這種主動的方法減少了在無法有效評估或合并意外更改請求時感到意外的可能性。

九、結(jié)論

每個人都對設(shè)計都自己的看法,這使得UX設(shè)計師的工作充滿挑戰(zhàn)。有些人總喜歡在界面中添加一些令人困惑的元素,比如原型、這會影響產(chǎn)品開發(fā)進度(可能包含UX迭代),以及那些喜歡設(shè)計(甚至認(rèn)為自己是設(shè)計師)但缺乏任何真正的UX設(shè)計專業(yè)知識的人。

但是,如果您與您的合作者進行深入交流,向他們灌輸設(shè)計理念并引導(dǎo)他們發(fā)揮自己的長處,這種“設(shè)計幫助”的多樣性將是一種寶貴的資產(chǎn)。

最有成效的用戶體驗設(shè)計師在設(shè)計過程中會和許多人合作。他們與各種團隊成員和主要利益相關(guān)者討論業(yè)務(wù)目標(biāo),發(fā)展機會和約束,優(yōu)先級,要求和設(shè)計理念。這些人來自許多職能團體;具有不同的UX專業(yè)知識,想法和思考。

要想成為一名優(yōu)秀的用戶體驗設(shè)計師并創(chuàng)作出優(yōu)秀的設(shè)計作品,培養(yǎng)必要的溝通技巧來利用這些信息來源和輸入是必不可少的。

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

怎樣設(shè)計體驗友好的APP登錄表單

用心設(shè)計

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

 

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

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

給文本輸入框增加提示

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

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

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

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

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

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

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

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

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

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

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

讓密碼可被看到

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

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

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

讓他們知道什么是錯誤的

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

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

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

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

過了一會兒,用戶想出了一個唯一的登錄名,但是只過了一小會兒就忘記了,因為這個用戶名對他沒有任何的意義。

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

需要一個“忘記你的密碼”的流程

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

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

不要鎖了用戶的賬號而不告知他們

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

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

登錄樣式靈感

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

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

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

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

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)品來說并不是一個很聰明的決定。避免更大的和不熟悉的形式,并且讓輸入字符簡單可視。這些只是一些為了節(jié)省用戶時間可以考慮的技巧,并且?guī)椭麄兿硎苣闼峁┑姆?wù)。

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

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

用心設(shè)計

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


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

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

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

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

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

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

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

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

這是一張扁平化的插畫!

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

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

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

你覺得哪個的視覺沖擊力更強一些?

我們接著看!

這是一張扁平化作品!

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

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

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

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

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

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

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

這是一臺扁平化的車

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

添加裝飾元素

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

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

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

把車元素單獨提取出來

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

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

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

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

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

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

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

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

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

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

最終的對比

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

再往下看,你可能會被美哭

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

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

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

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

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

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

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

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

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

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

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

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

扁平與擬物的碰撞

不一樣的花火

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看了感覺效果如何


 


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

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

用心設(shè)計

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


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

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

(請在PC端欣賞,瀏覽該網(wǎng)站時記得打開聲音哦~)

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

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

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

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

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


 


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

避開"灰"畫面至少提高幾個層次

用心設(shè)計

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


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

 

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

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


這些問題之所以出現(xiàn),是因為大家沒有將畫面的“黑、白、灰”表達(dá)清楚。

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


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

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


先從明暗交界線開始加深顏色并往暗部邊緣逐漸的過渡,運筆排線的力度越來越輕,讓暗部形成一個有深淺顏色變化的面。靠近明暗交界線的地方顏色就重一點,靠近投影的地方顏色就淺一點,然后通過壓深投影的顏色,襯托暗部的反光,讓這個暗部顏色更加透氣。


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

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


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

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

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








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

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

用心設(shè)計

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

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

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

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

一、頁面打開方式的類型

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

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

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

2. 新開頁面

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

3. 彈出框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新頁面打開適用的場景:

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

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

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

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

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

小結(jié)

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

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

三、彈出框

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

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

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

△ https://www.zhihu.com/

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

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

△ http://www.iconfont.cn

彈出框適用的場景:

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

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

總結(jié)

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

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

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

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

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

用心設(shè)計

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


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

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

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

舉幾個例子來說明:

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

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

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

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

二、以崩壞3為例談?wù)動脩趔w驗

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

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

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

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

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

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

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

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

2. 分析其用戶體驗

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

上圖即為游戲界面展示,僅一個界面就有很多點設(shè)計來增強用戶體驗。

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

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

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

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

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

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

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

1. 崩壞的VIP體系

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

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

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

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

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

限時購買:促銷雖然老套,但卻十分有用,這種倒計時總能夠刺激用戶的消費欲望。

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

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

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

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

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

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

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

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

  • 方式一:普通用戶等級一,小會員等級二,大會員等級三;
  • 方式二:普通用戶等級一,小會員等級三,大會員等級四;
  • 方式三:普通用戶等級一,小會員等級四,大會員等級五;
  • 方式四:普通用戶等級二,小會員等級三,大會員等級四;
  • 方式五:普通用戶等級二,小會員等級四,大會員等級五;
  • 方式六:普通用戶等級三,小會員等級四,大會員等級五。

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

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

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

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

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

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

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




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

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

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

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

日歷

鏈接

個人資料

存檔