淺談《暗黑黎明》與《太極熊貓》UI與UE的分析對比

>>>  創業先鋒 眾人拾柴火焰高  >>> 簡體     傳統

  今天在和數值討論《暗黑黎明》和《太極熊貓》UI設計時,發現他對UI非常不感冒,覺得這2款產品屬不同風格,UI設計都該是現在這樣,不分伯仲。而我個人對這2款產品的感覺很強烈,想分享下《暗黑黎明》的UIUE,感覺很值得我們學習。


   在通過玩了這2款游戲的時候,明顯感覺UIUE如果花了心思,給新手造成的困擾和麻煩就少。新手在完成我們設置的引導任務以后會很快忘記一些操作過的步驟,他們是通過重復點擊UI加深強化印象。如果UI布局混亂,新手弄懂游戲的時間就長,重要性很值得思慮。


  視覺設計:


  Jeff Johnson提出過一些例子,給大家參考。UI設計師的工作應該包括:


  • 在一個程序中,將命令的數量從數百個減少到48個。

  • 將菜單層次從23個減少到11個。

  • 將完成一個任務的鼠標動作減少一半。

  • 整合菜單中的命令,將不一致的動詞變為通用的短語。

  • 重寫用專業術語表達的提示信息,使其變成簡練的、和任務相關的通俗語言。


  下圖是《暗黑黎明》界面:



  整個界面,UI比較少,點開圖標沒有出現二級菜單。每個功能圖標,帶有多重玩法。


  右下角圖標9個,常用的圖標7個:


  • 技能:人物屬性、技能調整、職業技能

  • 聯盟:好友、神殿、陣營、家族

  • 傭兵:裝備圖鑒、契約兌換、我的傭兵、傭兵酒館

  • 鍛造:鑲嵌、沖星、解封、精煉

  • 背包:點開背包,左邊顯示人物界面,右面顯示背包。

  • 副本:組隊、精英、單人

  • 活動:競技、晚餐、世界BOSS、商城、賞金、邪龍歷練、天使祈福、首位女神、掃蕩卷領取。

  • 其中鍛造、技能、聯盟、傭兵的分類功能,都出現在右邊,也很符合人們用右手點擊的習慣。


  核心玩法傭兵和精煉,傭兵大家不熟悉不做介紹,可以看看精煉界面,玩法類似我們的強化(精煉等級=玩家等級)用的非常多,下圖能夠看到唯一的按鈕就是精煉,玩家只需要點擊精煉就可以,引導非常簡單。紅色的小點,用來提示可精煉的裝備,滑動選擇目標。



  鑲嵌,界面同樣只有一個按鈕“鑲嵌”。當裝備可以鑲嵌的時候,鑲嵌2字就會出現紅點。選擇紅點裝備,第二排出現該裝備當前鑲嵌情況,點擊+ 好,選擇寶石,點擊鑲嵌完成。



  《暗黑黎明》UI經過了精細的設計和布局,不懂游戲的美術無法完成這樣的工作。UI設計是策劃提前做好準備工作,將各個功能進行協調簡化,放置一處。每一個圖標,都包含多項近似的功能,非常合理。


  比如:人物界面,與背包界面放置在一起,點開背包就能看到人物裝備,很方便,不需要單獨設計一個UI。


  比如:好友、家族、陣營界面,大部分游戲都喜歡單獨拿出來,凸顯他的重要性。《暗黑黎明》將他們放置一處,感覺很實用。原因很簡單,社交玩法初期的時候,玩家不會太常用,第一天玩家會忙著升級,等到了卡機階段,玩家開始注重,在這個時候引導他們習慣點擊各個圖標,能夠通過接觸熟悉聯盟里面包含了好友、家族、陣營三個功能。時間大概1-3天,能夠完全熟知。


  活動圖標的設計,非常符合手游的特點,里面聚集了很多小玩法,只需要點擊對應任務就能自動走到NPC處參與對應的任務。有效的減少了圖標數量,同時界面可以領取活躍獎勵,又少了一個圖標。



  《太極熊貓》的圖標做法比較普遍,每一項新功能就增加一個圖標。所以造成了1級圖標和2級圖標,加起來24個。沒有很好的對各種功能做布局。



  圖標多了,新手會對每一項圖標的點擊次數會分散,每一項功能的熟悉花的時間更長。圖標多了,玩家想找到游戲的核心玩法也不是一件容易的事情。


  總結:


  《太極熊貓》和《暗黑黎明》從圖標的視覺表現上,風格不同,不分好壞。


  然后從用戶體驗上而言,《暗黑黎明》足以秒殺太極熊貓。


  借用人家的話:UI設計和視覺設計其實是兩種不同的行為。從事這兩種工作也要求不同的能力。


  視覺設計師擅長的是藝術,形象地表達功能。為產品創建自己的風格,同時配合相關的顯示設備和圖形合理安排信息,讓用戶能夠輕松愉快地完成功能。


UI設計師擅長分析和理解用戶的需求,讓信息的架構更加合理。盡可能簡化使用難度,同時找出用戶使用產品時哪里會遇到問題。雖然現在越來越傾向于由不同背景的人來完成UI設計和測試,但是不管由誰來設計,一個吸引眼球、激情四射、光彩照人、充滿靈魂的視覺設計并不等于就是一個易學易用的設計。



GameRes游資網 2015-08-23 08:43:51

[新一篇] 創業后才發現的“五個事實”:自由、自知、孤獨、恐懼和希望

[舊一篇] 什么樣的網絡小說IP有價值?
回頂部
寫評論


評論集


暫無評論。

稱謂:

内容:

驗證:


返回列表