教程 | 游戲網(wǎng)頁設(shè)計小技巧匯總

時間：2023-10-09 09:18:02 | 來源：網(wǎng)站運營

時間：2023-10-09 09:18:02 來源：網(wǎng)站運營

教程 | 游戲網(wǎng)頁設(shè)計小技巧匯總：小編說：“設(shè)計本無對錯之分，“綠色笑臉”僅代表“可能會更好”。本人設(shè)計水平有限，根據(jù)自己的工作日常，匯總了一些關(guān)于游戲web類設(shè)計方面的小技巧。說得不對的或者有需要補(bǔ)充的歡迎大家評論，共同進(jìn)步！”

01

書法標(biāo)題排版時盡量拆開每一個字去排

左圖的文字為輸入法直接輸出，右圖則是每一個字拆開單獨去排版，對比之下右側(cè)的文字通過大小和位置上的變化，使得排版更加錯落有致，整體性更強(qiáng)。（也更能表達(dá)出作者想吃雞腿的決心）

02

在合適的場景給素材增加溢出的暖光

右圖中心的暖光起到畫龍點睛的作用，會讓瀏覽者感覺到畫面更加鮮活溫暖，畢竟有陽光的地方總是充滿生機(jī)。

03

段落性的內(nèi)容排版，請優(yōu)先考慮易讀性

字號、顏色、行距等等，都是基于能夠讓瀏覽者更易閱讀的角度出發(fā)；在設(shè)計時考慮給出重點文字及鏈接文字的配色方案，讓文字層級更加明朗。

04

讓交互元素更加生動

結(jié)合游戲本身，對頁面中的交互元素進(jìn)行更加形象化的設(shè)計，不僅可以增加頁面的趣味性，也可以直接刺激瀏覽者的點擊欲望。

05

文字疊加材質(zhì)時避免出現(xiàn)過曝現(xiàn)象

同樣的材質(zhì)，文字顏色取自同一色系，但是飽和度和明度上的差異，導(dǎo)致最終呈現(xiàn)效果的差異。材質(zhì)過曝不一定只由文字的色彩決定，有時也跟材質(zhì)的疊加模式有關(guān)，這個平衡點需不斷嘗試。

06

適當(dāng)?shù)卦黾忧熬坝兄诶_空間感

右圖中通過添加兩側(cè)前景的樹無疑讓畫面的縱深感更強(qiáng)了，通過這樣的處理，能讓瀏覽者明顯感覺到右圖中的人物離我們更遠(yuǎn)一些。

07

背光時可嘗試給文字增加透光效果

右圖中，文字增加透光效果后能讓人感覺到文字與整體畫面的聯(lián)系。文字是受到背光影響的，感覺呼吸性更強(qiáng)了，而不是直愣愣地丟在畫面中。

08

多人組合時，利用周圍環(huán)境元素去進(jìn)行人物層次的區(qū)分

多人組合時，如果不人為地進(jìn)行層次區(qū)分，會給人感覺素材重疊嚴(yán)重，畫面平坦沒有景深。合理地利用周圍環(huán)境中的光、云、煙霧等元素，可以很好地對畫面的主體元素進(jìn)行層次上的區(qū)分。

09

豎排文字時要注意正確的閱讀順序

古文中文字豎向排版時，閱讀方向為從上至下，從右到左。通常情況下還是按照正常的閱讀順序去進(jìn)行排版。（PS直排文字工具輸入時也能體現(xiàn)）

10

學(xué)會給場景中的素材添加環(huán)境色

未經(jīng)的原畫怎樣才能跟場景融合？添加環(huán)境色是必不可少的。不知道應(yīng)該怎么添加？建議你找找類似場景的照片去進(jìn)一步觀察。

11

學(xué)會給場景中的素材添加環(huán)境色

這部分很好理解，網(wǎng)頁是傳達(dá)信息的，不止是單純讓你關(guān)注畫面的。弱化場景后，人物、文字以及按鈕能，都能得到進(jìn)一步的突出。（模糊是比較常用的一種方法）

12

給文字做效果時應(yīng)首先基于文字的識別度

同樣的文字效果，右圖暗色背景下要明顯好于左圖亮色背景，左圖考慮的不應(yīng)該是如果讓文字更有質(zhì)感，而是先搞清楚文字配什么顏色識別度更高。

13

試著讓畫面中的元素關(guān)聯(lián)起來

右圖中通過添加人物投影，讓人物和圓盤之間產(chǎn)生了聯(lián)系。雖然只是一個很不起眼的小細(xì)節(jié)，但是往往就是這些小細(xì)節(jié)，決定了你畫面的高度。

14

修飾類元素不要影響主體的識別度

綠葉、花瓣、碎石、火焰等類型的元素，只是起到進(jìn)一步烘托氛圍的作用，切勿本末倒置，讓其搶了主體的風(fēng)頭。

15

盡可能讓LOGO能夠清晰地展現(xiàn)

LOGO最為一款游戲最直觀的視覺標(biāo)識，雖然不能直接對其進(jìn)行修改，但是可以通過調(diào)節(jié)其附近的元素，使LOGO得以清晰呈現(xiàn)。

這期教程就先到這里了~我們下期見?。。。。。。。?！