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

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

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

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

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

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

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

---

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

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

需要注意的點(diǎn):

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

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

實(shí)際運(yùn)用中，玩家需要來到這樣的一個(gè)地方做日常：

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

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

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

有以下幾點(diǎn)原因：

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

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

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

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

那么圖標(biāo)，就是單獨(dú)功能的集中視覺傳達(dá)，ui設(shè)計(jì)里的點(diǎn)。

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

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

由點(diǎn)到線，每套裝備圖標(biāo)都會(huì)依照這樣的標(biāo)準(zhǔn)進(jìn)行制作，來滿足功能。

帶有擴(kuò)展升級(jí)功能的圖標(biāo)（色彩升級(jí) 造型升級(jí)）

自己做過的一套技能圖標(biāo)示意：

武當(dāng)、土黃色劍、八卦道家門派、施法

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

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

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

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

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

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

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

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

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

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

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

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

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

有點(diǎn)到面，從一個(gè)圖標(biāo)，一個(gè)界面去細(xì)細(xì)分析。

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

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

總結(jié)

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

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