<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          怎樣設計體驗友好的APP登錄表單

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

           

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

          下面通過幾個關于登錄界面的UX策略指南,讓你更好的應用和實踐。

          給文本輸入框增加提示

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

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

          獎勵提示:相比于使用常見的“登錄”“登陸”的按鈕,可以更富有創造性,并要包含可直接輸入區域。確保記住用戶的數據,這樣他們就不需要每次輸入信息。

          “注冊”和“登陸”不應該放在一起。

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

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

          基本上,任何界面上不應該有使用戶“暫停”和“思考”的元素。

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

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

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

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

          讓密碼可被看到

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

          這甚至會發生在很有經驗的打字員身上,特別是當他們在移動設備上登錄的時候。

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

          讓他們知道什么是錯誤的

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

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

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

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

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

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

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

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

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

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

          為了避免強迫進入和暴力攻擊,許多網頁和應用在一系列的錯誤嘗試之后關閉賬戶。

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

          登錄樣式靈感

          如果在過去,都是在用相同的無風格和定制化的登錄頁。現如今,給你的應用,創造一個獨特的登錄頁設計是非常重要的事情,尤其是你想要圍繞你的應用和服務來創造品牌。

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

          當為一個應用和移動站設計這個元素的時候,設計師花很多的精力,使它既好用又美觀。

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

          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

          結尾思考

          對用戶來說,登陸已經很困難了,所以,使之變得更復雜,對你的產品來說并不是一個很聰明的決定。避免更大的和不熟悉的形式,并且讓輸入字符簡單可視。這些只是一些為了節省用戶時間可以考慮的技巧,并且幫助他們享受你所提供的服務。

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

          網頁設計 & 靈感 ? 當扁平化UI轉擬物化設計后

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          在設計領域,設計風格總是多變的,也有很多隨著流行趨勢而不斷變化,但是存在著N多的爭議。

          當扁平化UI轉擬物化設計后

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

          當扁平化UI轉擬物化設計后

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

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

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

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

          這是一張扁平化的插畫!

          當扁平化UI轉擬物化設計后

          當它變成擬物后

          當扁平化UI轉擬物化設計后

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

          我們接著看!

          這是一張扁平化作品!

          當扁平化UI轉擬物化設計后

          他開始在矢量程序上呈現

          當扁平化UI轉擬物化設計后

          開始色彩的調整與細節的完善

          當扁平化UI轉擬物化設計后

          最終的效果呈現

          當扁平化UI轉擬物化設計后

          這是一臺扁平化的車

          當扁平化UI轉擬物化設計后

          添加裝飾元素

          當扁平化UI轉擬物化設計后

          調整顏色后,得到一個扁平化的結果

          當扁平化UI轉擬物化設計后

          把車元素單獨提取出來

          當扁平化UI轉擬物化設計后

          在矢量程序上呈現

          當扁平化UI轉擬物化設計后

          上色,添加細節

          當扁平化UI轉擬物化設計后

          對細節的刻畫簡直不能再棒

          當扁平化UI轉擬物化設計后

          調整色調

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          最終的對比

          當扁平化UI轉擬物化設計后

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

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          扁平與擬物的碰撞

          不一樣的花火

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

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

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          當扁平化UI轉擬物化設計后

          看了感覺效果如何


           


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

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

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


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

          網站名稱:Oat the Goat
          網站地址:http://oatthegoat.co.nz/

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

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

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

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

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

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


           


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

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

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


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

           

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

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


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

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


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

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


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


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

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


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

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

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








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

          總結頁面打開的交互方式,很全面!

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

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

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

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

          一、頁面打開方式的類型

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

          1. 當前頁打開

          點擊操作鏈接后,在當前的瀏覽器頁面中進行內容顯示與操作。

          2. 新開頁面

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

          3. 彈出框

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

          二、當前頁打開 & 新開頁面

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

          從這兩個參數的屬性上來看,「當前窗口打開」是系統默認的處理方式。這個打開方式在國外的網站中實現方式比較統一,用戶也形成了一致的習慣,但國內的形式則不盡相同,以至于一直頗具爭議,不同類型網站之間、同一網站不同場景之間也沒有一個明確的規則標準可供大家學習和參照。

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

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

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

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

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

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

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

          同一個產品內部,如此區別設計的原因我認為有:

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

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

          新頁面打開適用的場景:

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

          當前頁打開適用的場景:

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

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

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

          小結

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

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

          三、彈出框

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

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

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

          △ https://www.zhihu.com/

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

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

          △ http://www.iconfont.cn

          彈出框適用的場景:

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

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

          總結

          本文結合這三種鏈接打開方式的頁面交互關系,進行適用場景舉例,并總結每種方式的優缺點,方便在設計中更好的根據不同的場景選擇合適的頁面打開方式。

          當然,以上總結也是基于我個人的理解與經驗,沒有統一的用法和標準,在具體設計實踐中,仍要靠設計者的直覺和經驗來進行綜合考量與判斷。

          作為體驗設計師,如何規劃用戶瀏覽路徑,是個需要嚴肅對待的命題。沒有絕對的好與壞,但一定要結合產品類型、場景、目標用戶等進行具體問題具體分析。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          論打造用戶體驗和數值系統,你得看看游戲類產品

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          互聯網產品有很多種,比如電商類、工具類、資訊類、財經類。但在看過很多產品之后,作者發現論產品體驗,最強的是游戲類。當然游戲做為一種特殊的產品,有時候不會被列入以上類型,且游戲的產品經理一般被叫做游戲策劃以及數值策劃,分別負責不同的內容。

          一、為什么說游戲的產品體驗很好?

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

          舉幾個例子來說明:

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

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

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

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

          二、以崩壞3為例談談用戶體驗

          1. 從側面展示其用戶滿意度

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

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

          如果搜索崩壞3的經典角色 CG女王降臨,可以得到如下結果:

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

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

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

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

          2. 分析其用戶體驗

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

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

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

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

          三、以崩壞3為例談談數值系統

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

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

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

          現在讓我們來簡單分析,當然我們只分析在產品中也存在的數值體系,畢竟相信本文的讀者都是產品人而不是游戲迷。

          1. 崩壞的VIP體系

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

          所以誘導充值是所有企業都必須面臨的問題,那么大多數產品有哪些套路呢,一般有以下三個常見方式:

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

          現在讓我們再來看看崩壞3是如何設計其 VIP體系的。

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

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

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

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

          2. 數值系統

          數值系統對于游戲而言是生命所在,史玉柱曾說過:我不擔心別人抄走我的系統,因為數值體系他們抄不走。

          崩壞3的數值系統就不提了,因為太過復雜,而且與產品相關性也不是很大。

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

          一個簡單的例子即會員該有多少權利,不同等級的會員權利應該如何區分。比如以視頻網站為例,假設有兩種級別的會員,大會員和小會員。那么用戶就有三種,免費用戶,小會員以及大會員。假設會員的作用是看高清視頻,而視頻的級別有五個,等級越高質量越好。

          那么該如何設置他們的權限呢,可能的方式有以下幾種:

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

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

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

          四、游戲給產品的啟示

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

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

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

          數值系統平衡各方:免費用戶和付費用戶的關系非常復雜,兩者既有利益沖突又可能相互轉化,因此做好平衡非常重要,不要得罪任何一方。




          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

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

          藍藍設計的小編

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          博博

          過癮!這17個海報設計小技巧,果斷收藏了!

          圖片來源:古田路9號、優秀網頁設計、微博

          最近設計界有兩個段子火了

          甲方爸爸說:

          “用PS不專業要用photoshop”

          過癮!這17個海報設計小技巧,果斷收藏了!

          另一個就是

          女設計師和甲方爸爸網戀,被騙稿?。?

          過癮!這17個海報設計小技巧,果斷收藏了!

          講真,大大君我看到這兩個段子

          默默心疼設計師幾秒鐘

          如果以后還遇到這種奇葩

          就把這篇文章砸他臉上

          勞資設計一張海報這么難,你的臉夠本嗎?

          過癮!這17個海報設計小技巧,果斷收藏了!

          今天大大君我就教大家

          17種常見的海報設計技巧吧!

          文字分散法則

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

          例如下面這些

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          故障效果的設計法則

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          色彩疊加海報設計法則

          色彩疊加法則其實是海報色彩設計技巧中的細分領域,其特色是利用兩種或者兩種以上的顏色進行畫面的切割、重組、漸變、疊加等設計手法,去突出整體畫面的主焦點,若色彩搭配好了,會起到非常震撼的視覺效果。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          文字切片海報設計法則

          文字切片其實也就是把文字按視覺呈現的需求,進行切割,其設計的優勢在于字體呈現較為立體,畫面的節奏感強。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          圖文疊加的海報設計法則

          圖文疊加的海報設計法則,多用于電影海報,將人物或者場景與文字疊加,營造一種重復錯落的視覺感。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          液態效果的海報設計法則

          液態效果的海報設計通常會選擇用較為豐富的顏色進行漸變,高斯模糊或者扭曲的形式去呈現,畫面的視覺大多以抽象的概念去呈現。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          雙重曝光的海報設計法

          雙重曝光的海報設計用人或者動物與第三方元素進行重合、它最大的特點是利用光與影的結合,打造出比較跨時空的錯落感,這種設計手法多用于電影海報。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          單字母的海報設計法則

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          正負形海報設計法則

          正負形的海報設計其亮點在于利用負空間形成巧妙構圖。一張圖中隱藏著另一個畫面。

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          立體海報設計法則

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          文字海報設計法則

          文字海報設計包含很多種表現形式,利用滿版、留白、S型等排版形式布局畫面,讓文字代替圖形去表達主畫面。這也是較為常見的海報設計形式。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          紙質效果的海報設計法則

          紙質效果的海報設計其實也屬于立體海報的一種,形象和感覺的組合,是紙質效果海報設計的關鍵。

          過癮!這17個海報設計小技巧,果斷收藏了!

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          照片切割法則

          照片切割也就是和文字或圖形進行重合、疊加、打散的表現手法來增加海報設計的層次感。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          透明效果海報設計法則

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

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          復古風格的海報設計法則

          復古風的海報設計通常會選用顏色飽和度較低的顏色,搭配毛筆字體或肌理的觸感進行呈現,這種設計手法,大多會用于電影海報或者藝術展覽之類的范圍。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          插畫風格的海報設計法則

          插畫風格的海報設計具備很強的講故事能力,無論是小清新的畫風還是較為夸張的插畫手法,都能將整個畫面變得生動活潑了很多,這也是很多設計師最常用的海報設計的表現形式。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!

          漸變的海報設計法則

          漸變色系的海報設計,用很多種顏色進行巧妙融合,畫面分為簡潔和個性兩種形式呈現,視覺沖擊力很強。

          過癮!這17個海報設計小技巧,果斷收藏了!

          過癮!這17個海報設計小技巧,果斷收藏了!


          設計方法:用問題引出答案,群策群力繪制用戶體驗地圖

          藍藍設計的小編

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

          煩人的“小妖精”:淺談小紅點的設計

          資深UI設計者

          導語

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

          煩人的小紅點

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

          那么問題來了,用戶喜歡小紅點嗎?在Google和必應上搜索關鍵詞“App 小紅點”,幾乎有一半的搜索結果是“教你如何消除小紅點”。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合