UI設(shè)計最硬核的思維 就是功能

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

實現(xiàn)并完善功能，是互聯(lián)網(wǎng)、游戲、網(wǎng)站、渴望UI人才的根本原因。

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

UI設(shè)計并不只是單純的把一張圖，一段話打印到一張紙上，而應(yīng)該是經(jīng)過UI設(shè)計師本身深思熟慮后的呈現(xiàn)。

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

然后，才進行到把它們呈現(xiàn)出來的步驟。

---

從整體出發(fā) 圍繞功能點的UI設(shè)計

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

需要注意的點:

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

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

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

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

然而， 最后呈現(xiàn)的效果是這樣：

為什么要這樣設(shè)計？

有以下幾點原因：

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

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

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

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

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

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

比如，一套可以升級的掛件，圖標雖然是同一個物品，但是質(zhì)感、造型、色彩上，會有越來越華麗，給玩家?guī)胍环N升級的概念，這種概念串聯(lián)起來，就是裝備的升級功能。

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

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

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

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

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

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

天王、橘紅色、戰(zhàn)士、刀、馬術(shù)攻擊

由點到面，一個技能圖標就是一個戰(zhàn)斗系統(tǒng)的功能入口。

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

峨眉、女性門派、柔美、水系法術(shù)攻擊

用按鈕和文字框以及背景氣氛圖來制作紅包領(lǐng)取的界面，這幾個功能點串聯(lián)起來就是引導(dǎo)玩家，領(lǐng)取禮品的功能點。

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

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

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

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

不良好的BUFF，給戰(zhàn)斗帶來緊張氣氛 提醒玩家狀態(tài)（為戰(zhàn)斗功能服務(wù)）：

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

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

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

原文發(fā)布于西山居美術(shù)中心公眾號，可點擊查看原文：UI設(shè)計

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。