民初思韻網

加入收藏   設為首頁
選擇語言   簡體中文
你好,請 登陸 或 注冊
首頁 人文思韻 傳奇人物 歷史思潮 時代作品 話題討論 國民思韻 民初捐助 賬戶管理
  搜索  
    人文精神 >>> 技術參考 - 建構物件導向
字體    

手游如何做好UI設計?
手游如何做好UI設計?
GameRes游資網 李達     阅读简体中文版


  GameRes游資網授權發布 文 / 銘匠游戲李達

  之前一直做互動設計,在UI上有一些積累。

  轉戰手游后發現,有著標準、互動方式、用戶行為等等與常規大屏UI設計的不同,但是在設計流程,思考方式上是一樣的。

  以目前項目中一個界面為例(未完成版本)來說一下我們的方法和思路,像點擊范圍,紋路優先級,字號等大家都知道的就不說了。

  步驟1、了解功能需求

  位置:屏幕下方不超過160像素高度

  數量:4個單位

  功能:每個單位包括頭像顯示,能量需求數量和種類

  (1-3個,兩種),必殺按鈕。

  狀態:頭像選中狀態,未選中狀態;必殺可用狀態,不可用狀態。

  以上聽起來是不是非常的復雜?用一個圖示來概括就是這樣的


  步驟2、接下來我們會畫一些草圖,做些圖形延展。


  這一個步驟主要是對圖形,筐體做的一些草圖討論,草圖大概畫了20多張,這個階段會比較隨意,基本想到什么都會畫下來,目的是記錄和想法發散。

  步驟3、 由于我們的游戲是中式美術風格,首先選用的是一個棱型結構,出了一版效果草圖如下。


  問題出來了,棱型結構在能量球的擺放上很別扭,棱型在空間上有很多浪費,并且沒有可點擊的感覺。

  步驟4、于是我們嘗試了圓形結構,圓形相比之下有吸引點擊的小優勢。

  接下來面臨1個單位有2個可點擊范圍的問題,我們思考了一下是切割一個圓形單位,還是把兩個單位組合成在一起。

  于是我們對圖形做了一系列的拆解組合草圖,重點嘗試了一下太極的組合方法。


  步驟5、在這一步發現圓形比較能解決我們的問題,區域也節約了很多,但是在用戶操作上還是很繁瑣,選擇人物和發動必殺會很麻煩,點擊位置也小,不會很舒服。

  于是我們嘗試加入點擊以外的操作方式-拖動。當滿足必殺條件時,把頭像拖到戰場上就可以發動。這樣在視覺上就簡單多了,只有一個頭像和能量球來體現。


  以上的畫面就簡潔多了,但是如何讓用戶去拖動按鈕來發動必殺,這個僅在用戶指引上教肯定是不夠的。如果在可發動必殺的頭像上加一個箭頭,又會破壞畫面上的協調,顯得很鬧騰。

  所以,我們再給加入一個條件,當滿足必殺條件時,按住頭像就出現箭頭提示,如下圖:


  這就是我們在游戲戰斗畫面里下方頭像部分UI設計的過程。

  在功能布局都沒問題了以后,還會再有一次美化和風格統一的步驟,最終UI在游戲測試后再更新吧。

  上面說了一大堆,結論很簡單,在滿足功能需求后作減法,手機游戲就那么點地兒,寸土寸金,減法作的好,就解決了一大半,可以給色彩和視覺平衡更大的發揮空間。


2015-08-23 08:56

歡迎訂閱我們的微信公眾賬號!
春秋茶館訂閱號
微信號 season-tea(春秋茶館)
每天分享一篇科技/遊戲/人文類的資訊,點綴生活,啟迪思想,探討古典韻味。
  清末民初歷史人物  民初人物
憲政專家民主理論大師
宋教仁(1882年4月5日-1913年3月22日),字鈍初,號漁父,生於中國湖南省桃源縣,中國近代民主革命家,是中華民國初期第一位倡導內閣制的政治家。
清末民初學者大師
梁啟超(1873年2月23日-1929年1月19日),字卓如、任甫,號任公、飲冰子,別署飲冰室主人,廣東新會人,中國近代思想家、政治活動家、學者、政治評論家、戊戌變法領袖....
資助民初精神網
        回頂部     寫評論

 
評論集
暫無評論!
發表評論歡迎你的評論
昵稱:     登陸  註冊
主頁:  
郵箱:  (僅管理員可見)

驗證:   验证码(不區分大小寫)  
© 2011   民初思韻網-清末民初傳奇時代的發現與復興   版權所有   加入收藏    設為首頁    聯繫我們    1616導航