UI設計最硬核的思維 就是功能

微信現在在做一種全面連接的功能，而游戲需要實現的是人機互動的功能。

實現并完善功能，是互聯網、游戲、網站、渴望UI人才的根本原因。

如果說有電腦的世界是一片很大的面，那么可視化的操作，都是UI設計師需要負責的點。

UI設計并不只是單純的把一張圖，一段話打印到一張紙上，而應該是經過UI設計師本身深思熟慮后的呈現。

UI設計更多的是需要去思考，思考每一個元素，對功能的影響，讓這些點在腦海中不斷的組合，然后運作起來，在運作中體驗整個過程的流暢性。如果有哪個環節不行，還得把它們打散，再重組，直至達成一個心中完美的環。

然后，才進行到把它們呈現出來的步驟。

---

從整體出發 圍繞功能點的UI設計

這是給劍網三做過的一個每周日常的界面。這個界面，擁有很多的功能入口，初次拿到策劃的UE需求，經歷了一段時間的討論和修改，把功能集中的界面拆分成幾塊，分步調整。

需要注意的點:

1.保證通用性
節省資源量，緩解游戲整體安裝包的大小，節約用地面積是我們每個UI設計師惜墨如金的品質。2.宣傳指引
每天推薦玩家的日常活動，我們采取放大版面和字體來引導和方便玩家快速理解。3.可視化
UI把很多文案內容轉化成圖像，這樣一眼打開界面，玩家不需要很長時間的拖拽、下拉操作，就可以找到自己需要的功能。4.一鍵操作
我們除了配圖，更要對按鈕有統一的部署和位置的編排，每個按鈕對接的界面功能不同，表現形式和大小位置都要根據這個界面入口的功能去設計。5.美觀
這才是最難的點，大量的信息、按鈕、內容，如何用交互的邏輯去把它們展示出來，并且方便使用，除了反復討論、測試、反饋、修改...更需要堅持不斷的學習。

這個界面制作的主要功能，就是日常任務內容的集中展示面板，玩家需要一眼就明了自己。需要完成的日常有哪些，為的是得到最終的獎勵和經驗。

實際運用中，玩家需要來到這樣的一個地方做日常：

如果我們只是像一張海報一樣，做給玩家看，那就是下面這種效果：

然而， 最后呈現的效果是這樣：

為什么要這樣設計？

有以下幾點原因：

1.根據這個入口想表達的功能，類似一張名片的設計，醒目。
2.有劍網3清透，玉一樣純樸高級的質感。
3.用不同心理暗示的顏色去做區分，引導玩家。
4.并且對每個任務加上了注釋的小標簽。
5.點到為止。（要預留擴展性的空間）

分步驟梳理、突出主要功能，并且視覺優化這個功能。

在這樣一種邏輯思維下，最終界面以圖文結合的方式，以卡片的選擇方式布局，滿足最終功能。

如果說，界面是所有功能的集大成，是功能集合的面。

那么圖標，就是單獨功能的集中視覺傳達，ui設計里的點。

任何一個游戲里的技能、物品、武器圖標，都是帶有自身功能的，設計做成可以傳達給玩家的視覺圖標，從圖標自身出發，去引導使用操作。這些點，匯聚起來是一條完整的邏輯思路，可以幫助引導，玩家按照一定的規則達成目標。

比如，一套可以升級的掛件，圖標雖然是同一個物品，但是質感、造型、色彩上，會有越來越華麗，給玩家帶入一種升級的概念，這種概念串聯起來，就是裝備的升級功能。

由點到線，每套裝備圖標都會依照這樣的標準進行制作，來滿足功能。

帶有擴展升級功能的圖標（色彩升級 造型升級）

自己做過的一套技能圖標示意：

武當、土黃色劍、八卦道家門派、施法

根據不同門派特色去思考功能設計，每個不一樣的圖標是戰斗系統的功能入口展示，這個圖標，可以運用到多個系統中，比如，主界面戰斗、技能學習、 技能升級。這些模塊都會放置這樣一個技能圖素。

那么它們每個圖標的辨識度 整套圖標的統一性以及與特效動作的配合，都需要在設計初期被考慮到。

天王、橘紅色、戰士、刀、馬術攻擊

由點到面，一個技能圖標就是一個戰斗系統的功能入口。

在對文案有細致的分析后，結合游戲風格和門派特色繪制出來適合的技能圖標。并且，適配方形框（一般展示用界面）和圓型框（戰斗界面多為圓形按鈕）兩種狀態。

峨眉、女性門派、柔美、水系法術攻擊

用按鈕和文字框以及背景氣氛圖來制作紅包領取的界面，這幾個功能點串聯起來就是引導玩家，領取禮品的功能點。

充滿禮包的圖片，并不是隨意制作，結合領取框用紅色喜慶的調子來，突出獎品的豐富性，心理和視覺暗示喜慶豐富的氣氛，引導玩家的操作。

而時常會出現在游戲中，一些華麗的外表和不同的造型并且珍貴稀有的圖標則是為了收集功能服務。

舉例，劍俠世界手游中的秘籍圖標，裝備后會提升各種狀態，也并不容易獲取，那么它的視覺引導要求區別于普通圖標，展示區域也會跟著放大，擁有更豐富的細節，去吸引玩家注意力，在復雜華麗的外表下，是有收集功能做支撐的。

UI設計服務于功能，即使圖標這樣小小的一個點，也需要承載整個游戲所賦予的各種功能需求，牽一發而動全身，對于設計師而言，做好每個點都不是一件輕松而簡單的事情。

不良好的BUFF，給戰斗帶來緊張氣氛 提醒玩家狀態（為戰斗功能服務）：

更多的例子，其實都可以按照這個思路去分析一下，每個設計表現所蘊含的意義。

有點到面，從一個圖標，一個界面去細細分析。

游戲設計包羅萬象
你怎么去傳達給玩家你的心意？
你只能逐步去引導用戶操作
這大概就是UI設計師的隱忍吧
明明想把字調整到大海報一樣100號大小
卻要在小小的角落里48個像素格子
去說自己想說的話
互聯網的世界，在你看不到的地方
有這樣的一群設計師
為你點亮一盞燈
那盞燈
是一個按鈕
是一個界面
是一段文字
是一個UI設計師
最簡單和最質樸的心愿
希望，服務到大家
照亮你人生一段需要陪伴的路

原文發布于西山居美術中心公眾號，可點擊查看原文：UI設計

總結

以上是生活随笔為你收集整理的引导界面图标好大_游戏里那些图标和界面，原来是这么设计出来的？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。