UI網(wǎng)頁(yè)設(shè)計(jì)不同于網(wǎng)站建設(shè)，網(wǎng)站建設(shè)只是通過程序源代碼實(shí)現(xiàn)網(wǎng)站功能，UI設(shè)計(jì)體現(xiàn)在視角上。兩者相輔相成，就會(huì)成為網(wǎng)站建設(shè)的核心。深圳網(wǎng)站建設(shè)公司會(huì)配備專業(yè)的專職設(shè)計(jì)師，可能在設(shè)計(jì)師的需求上有創(chuàng)意。但是，當(dāng)我們真正做一個(gè)項(xiàng)目或者項(xiàng)目的時(shí)候，就會(huì)發(fā)現(xiàn)“藝術(shù)家不需要?jiǎng)?chuàng)新，需要運(yùn)用技巧?！眱?yōu)秀的設(shè)計(jì)成果離不開技巧的運(yùn)用，技巧的運(yùn)用才能襯托出設(shè)計(jì)之美。

　　廣州建站公司根據(jù)UI網(wǎng)頁(yè)設(shè)計(jì)的實(shí)踐經(jīng)驗(yàn)和總結(jié)，旨在提高網(wǎng)頁(yè)的視覺效果，增強(qiáng)網(wǎng)站的高層次感。它對(duì)網(wǎng)頁(yè)的設(shè)計(jì)層次、字體、結(jié)構(gòu)、對(duì)比度、透明度等諸多因素進(jìn)行比較和調(diào)整。具體可分為以下幾點(diǎn)：

　　1.使用顏色和文字來創(chuàng)建層次結(jié)構(gòu)，而不是簡(jiǎn)單的大小對(duì)比

　　在控制UI文字的風(fēng)格時(shí)，最常見的錯(cuò)誤就是過分依賴字號(hào)差異來營(yíng)造對(duì)比。

　　簡(jiǎn)單實(shí)用的字體大小對(duì)比所創(chuàng)造的對(duì)比是不夠的，所以盡量結(jié)合顏色和單詞重復(fù)來創(chuàng)造更好的對(duì)比效果。

　　如果可以，你甚至可以使用兩種或三種顏色：

　　(1)主要內(nèi)容采用深色(如標(biāo)題，但不使用純黑色)

　　(2)次要內(nèi)容為灰色(如文章發(fā)表日期)

　　(3)輔助內(nèi)容為淺灰色(如頁(yè)腳版權(quán)聲明)

　　同樣，在UI設(shè)計(jì)中，通常兩個(gè)不同的詞權(quán)重就足以創(chuàng)造出優(yōu)秀的層次感：

　　(1)大多數(shù)文本使用正常的單詞權(quán)重(400到500，取決于字體)

　　(2)對(duì)于需要強(qiáng)調(diào)的單詞，使用較重的單詞(600到700，取決于字體)

　　盡量不要讓正文部分的重量小于400，因?yàn)檫@個(gè)部分的字體大小已經(jīng)很小了，小于400會(huì)使可讀性變差。如果還需要降低字重，不妨將字體做得更輕一些，或者換成其他識(shí)別性強(qiáng)、字重相對(duì)較小的字體。

　　2.不要在彩色背景上使用灰色文字

　　在白色背景下將黑色文字改為灰色是淡化其視覺效果的好方法，但在彩色背景下這樣做是另一回事。

　　事實(shí)上，在白色背景上將文本從黑色更改為灰色實(shí)際上會(huì)降低對(duì)比度。

　　但是在彩色背景中，如果要降低對(duì)比度，就要逐漸使文字接近背景顏色，而不是改成灰色。

　　通常有兩種方法可以降低和背景色之間的對(duì)比度：

　　(1)降低白色文本的不透明度

　　降低不透明度可以使背景顏色更加透明，并以不沖突的方式降低前景文本和背景之間的對(duì)比度。(2)根據(jù)背景顏色手動(dòng)選擇文本的顏色

　　當(dāng)背景為圖像或圖案時(shí)，半透明的文字會(huì)影響可讀性。此時(shí)，最好根據(jù)背景的主色選擇相應(yīng)的文字顏色。

　　(3)陰影設(shè)計(jì)

　　與使用大范圍漫反射模糊陰影相比，使用細(xì)微的垂直偏移陰影更加明顯和自然。它模擬了最常見的光源特征所產(chǎn)生的陰影效果，即光線從上到下照射。

　　如果你對(duì)此感興趣，《材料設(shè)計(jì)指南》清楚地解釋了制作這種陰影的細(xì)節(jié)。

　　4.盡可能少使用邊框

　　Box模型是網(wǎng)頁(yè)前最常用的工具。當(dāng)您需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，請(qǐng)盡量避免兩個(gè)邊界之間的直接接觸。

　　雖然Border是分隔兩個(gè)元素的好方法，但不是唯一的方法。使用過多會(huì)降低整個(gè)布局的設(shè)計(jì)感，甚至造成混亂。

　　所以你可以嘗試以下方法來避免它：

　　(1)使用框陰影

　　框影還可以營(yíng)造出一種邊界感，更加微妙，不顯得突兀，也不分散用戶的注意力。

　　(2)用不同的背景顏色來區(qū)分

　　通常，相鄰元素的背景只能通過細(xì)微的差異來區(qū)分。所以，你需要做的是在不同的塊中使用不同的背景顏色，并嘗試刪除邊框，因?yàn)槟愀静恍枰?/p>

　　(3)添加額外的空格

　　要?jiǎng)?chuàng)建元素之間的分離效果，不一定要用線框來表示，只需添加空白來分隔即可。通過空格和間距實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中常見的技術(shù)。

　　5.不要讓小圖標(biāo)無故放大

　　當(dāng)您設(shè)計(jì)登錄頁(yè)面時(shí)，您可能會(huì)突出產(chǎn)品的功能。這個(gè)時(shí)候，你需要一些大圖標(biāo)作為視覺錨。這個(gè)時(shí)候你可以去Font  Awesome或者Zondicons之類的網(wǎng)站上找一些免費(fèi)的矢量圖標(biāo)，然后放大到你需要的大小。

　　它們是矢量圖標(biāo)，所以可以放大而不會(huì)丟失。而一個(gè)通常只有1616的圖標(biāo)，放大三四倍。雖然沒有損壞，但是視覺上還是相當(dāng)不專業(yè)的：缺少細(xì)節(jié)，總覺得太矮胖。

　　然而，如果這些小圖標(biāo)是你能得到的唯一材料，試著把它們放在另一個(gè)彩色圖形中：

　　這種設(shè)計(jì)不僅可以讓圖標(biāo)達(dá)到預(yù)期的視覺體積，還可以讓它看起來比簡(jiǎn)單的放大更詳細(xì)。當(dāng)然，如果你沒有足夠的錢，最好買一些大尺寸高質(zhì)量的圖標(biāo)，比如Heroicons或者Iconic。6.添加帶有顏色的單側(cè)邊框，增強(qiáng)個(gè)性

　　當(dāng)然，你可能不是一個(gè)有足夠平面設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師，但它能讓你設(shè)計(jì)的界面有足夠的視覺感染力。

　　最簡(jiǎn)單的方法就是在界面的邊框一側(cè)添加單色甚至漸變邊框，可以讓平淡的界面一下子活起來。

　　例如，在警告彈出框的一側(cè)：

　　或者在導(dǎo)航欄底部顯示觸發(fā)器：

　　或者在整個(gè)頁(yè)面的頂部：

　　這并不需要任何平面設(shè)計(jì)經(jīng)驗(yàn)，但會(huì)明顯加強(qiáng)設(shè)計(jì)感。

　　退一萬步說，你不知道選什么顏色。很簡(jiǎn)單。只需要在Dribbble的顏色搜索里找一些好看的顏色，其實(shí)就夠了。

　　7.不是每個(gè)按鈕都需要顏色

　　在許多情況下，按鈕本身所處的上下文和按鈕上的文本內(nèi)容令人困惑。BootStrap之類的框架允許設(shè)計(jì)者根據(jù)上下文和語義進(jìn)行選擇：

　　“這是正面操作？讓這個(gè)按鈕變成綠色。”

　　“這是刪除數(shù)據(jù)嗎？然后把按鈕設(shè)置成紅色?！?/p>

　　的確，語義和按鈕本身的設(shè)計(jì)息息相關(guān)，但是還有一個(gè)更重要的維度被忽略了，那就是層次。

　　網(wǎng)頁(yè)上的每一個(gè)操作實(shí)際上都位于整個(gè)交互金字塔的某個(gè)地方。事實(shí)上，大多數(shù)頁(yè)面只有一個(gè)主要操作，一些不重要的次要操作，以及一些三級(jí)操作。

　　在設(shè)計(jì)這些交互時(shí)，通過層次結(jié)構(gòu)來展示這些交互的重要性是非常重要的。

　　(1)主要操作應(yīng)明顯。需要使用純色和高對(duì)比度的按鈕。

　　(2)二次操作要明顯，但不突出。使用鬼影按鈕或與背景對(duì)比度低的顏色是合理的。

　　(3)三級(jí)操作應(yīng)該是可發(fā)現(xiàn)的，但不明顯。它們最好設(shè)計(jì)成鏈接。

　　“破壞性交互涉及的按鈕不應(yīng)該是紅色的嗎？”

　　沒必要！如果破壞性交互涉及的按鈕不是主操作，那就讓它按照二級(jí)操作甚至三級(jí)操作的按鈕來設(shè)計(jì)。

　　真正有效的UI設(shè)計(jì)需要滿足用戶和網(wǎng)民的需求。網(wǎng)站維護(hù)是在網(wǎng)站建設(shè)的基礎(chǔ)上完成的，網(wǎng)站建設(shè)離不開UI設(shè)計(jì)。因此，掌握以上技巧并運(yùn)用到設(shè)計(jì)中輔助網(wǎng)站建設(shè)，會(huì)讓用戶對(duì)網(wǎng)站的體驗(yàn)和超前感更加滿意。