提升網(wǎng)站設(shè)計的10個小技巧｜UI/UX設(shè)計師的一百個設(shè)計思考

時間：2023-09-05 23:12:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-05 23:12:01 來源：網(wǎng)站運(yùn)營

提升網(wǎng)站設(shè)計的10個小技巧｜UI/UX設(shè)計師的一百個設(shè)計思考：你好，我是小鹿。在知群做產(chǎn)品設(shè)計與管理。近兩年，我在本站寫了不少于 10 萬字的專業(yè)性回答，解決了不少互聯(lián)網(wǎng)設(shè)計師的困惑?，F(xiàn)在，我想把過去的一些關(guān)于 UI設(shè)計、交互設(shè)計乃至整個用戶體驗設(shè)計相關(guān)的思考和回答，做更系統(tǒng)的梳理。同時，也會找一些國外寫的不錯的文章，做一些翻譯和拆解。一來我自己也能深度思考和學(xué)習(xí)，二來也能幫助到更多設(shè)計師朋友，給大家?guī)韱l(fā)、思考和進(jìn)步。

這篇是小鹿的專欄——「UI/UX 設(shè)計師的“一百個”系列」的第 19篇——麥子姐姐更新的「產(chǎn)品經(jīng)理的“一百個”系列」的姊妹篇。在這個系列里有關(guān)于設(shè)計的方方面面——學(xué)習(xí)姿勢、認(rèn)知百科、大咖分享、轉(zhuǎn)行思路、設(shè)計思考等等，希望能幫助初入設(shè)計行業(yè)的朋友們快速了解設(shè)計圈的各種知識，提升個人的能力，下面文章是整理的網(wǎng)站文章分享，祝大家學(xué)習(xí)愉快。

---

每個人都是從初學(xué)者開始他的設(shè)計之旅的，你的審美眼光也要像其他事物一樣經(jīng)過訓(xùn)練?？碊ribbble的設(shè)計可能是非常有幫助的，但有時候你只是欣賞設(shè)計，卻不明白為什么。

沒有靈感、沒有優(yōu)質(zhì)的設(shè)計素材、不知道要設(shè)計什么，所有這些原因都可能會拖慢你的速度，讓你感到沮喪。所以現(xiàn)在我將和你分享10個極其簡單的設(shè)計技巧，幫你改善你的設(shè)計作品，而且不需要額外學(xué)習(xí)新的技能哦。

請記住，我提供的不是必修遵守的規(guī)則，而是大多數(shù)時候都有效的技巧。

1）把你的設(shè)計作品去色

如果你沒有好的想法或優(yōu)質(zhì)的設(shè)計素材，那么你可以把你的作品去色。你可以通過正確的構(gòu)圖獲得野獸派的設(shè)計。這么做有助于你理解平衡、留白，以及如何使用文字和幾何圖形。

讓我們來看一個案例：

2）用“平衡方案”測試你的畫面

我自己發(fā)明了一套測試畫面的方法：用簡單的幾何圖形代表畫面中內(nèi)容，然后通過比較頁面中色塊的面積來確定頁面是否平衡。當(dāng)你在自己的作品中使用這個方法時，會得到下圖這樣的效果。

通常你需要通過視覺進(jìn)行判斷，但這里我們可以做一些簡單的計算幫助理解：

左邊區(qū)域的黑色矩形加起來約為

(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX

而右邊的大長方形數(shù)約為

446×446=198916PX

他們只是相差了一點(diǎn)點(diǎn)3.9558%。

注意：圓形比長方形小，但由于相當(dāng)銳利和細(xì)致，使它更吸引人的注意。我在設(shè)計之前沒有計算過。經(jīng)過多年的練習(xí)，這只是成為自動的，因為你的眼睛會感覺到錯誤的平衡。

3）用背景來呈現(xiàn)設(shè)計

我之前帶來的例子是在灰色背景上呈現(xiàn)的，但你可以嘗試不同的東西。這有助于為你的設(shè)計創(chuàng)造一些景深。但要注意，在一個真正的網(wǎng)站中，你不會有那么多額外的空間，所以這只是一個展示技巧!

4）使用推薦的字體大小

不要再整天浪費(fèi)時間去實(shí)驗字體大小。一般情況下以下字體大小是合適的：段落使用14-18pt左右，副標(biāo)題使用24-36pt，標(biāo)題使用96-144pt左右。Figma的默認(rèn)大小對于排版來說是相當(dāng)不錯的。雖然它們看起來會很小，但這是正常的。

有些字體相對于其他字體會偏大或者偏小，所以你應(yīng)該以標(biāo)準(zhǔn)字體為基礎(chǔ)。比如Roboto：如果字體大小接近14-18pt的Roboto，那就非常適合用于段落。

5）擁抱Z軸

如果你有一些具有透明區(qū)域的圖片，你可以利用它們來創(chuàng)建一些分層。

在網(wǎng)頁開發(fā)中，CSS代碼有一個Z-index的參數(shù)，可以用來把圖像帶到其他項目的后面或前面，給人一種立體的錯覺。

讓我們看看我的一個簡單的設(shè)計，其中就利用了這種技巧。

6）開始使用柔和的顏色

鮮艷的色彩雖然美好，但往往會導(dǎo)致畫面過于刺激?，F(xiàn)在非常流行在設(shè)計中使用更加柔和的色彩，你可以在下圖拾色器中紅色標(biāo)記區(qū)域內(nèi)選取更柔和的顏色。

7）讓畫面有呼吸感

在我看來，多一些留白要比沒有留白更好。雜亂無章的設(shè)計就通常都很糟。你可以通過以下方式獲得呼吸感。

1. 保持大量的背景可見。
2. 用間距避免文字墻效果。
3. 使用不會吸引太多注意力的圖片。
4. 精煉你的文字。

8）在設(shè)計中使用噪點(diǎn)

通常當(dāng)我們想到設(shè)計的時候，我們會想到干凈、流暢、清晰等概念。但完美就存在于缺陷之中。在你的設(shè)計中，當(dāng)你想給自己的網(wǎng)站一個優(yōu)雅或藝術(shù)的外觀，噪點(diǎn)是一個強(qiáng)有力的朋友。此外，應(yīng)用微妙的噪點(diǎn)讓你的構(gòu)圖看起來像電影一樣，這對視頻和動態(tài)網(wǎng)站來說效果非常好。你可以通過使用Photoshop，在白色背景上創(chuàng)建一個2-4K的高斯模糊，然后將其應(yīng)用在你的畫板上，從而獲得一些噪點(diǎn)紋理。

9）開始尋找更好的字體

我們電腦上預(yù)裝的字體通常都不是很好的選擇。要想找到更好的字體，可以開始上網(wǎng)沖浪或看youtube視頻，了解精彩的字體和字庫。

但要注意：很多字體都不是免費(fèi)的，在沒有授權(quán)的情況下使用它們可能會給你帶來麻煩。不過不用擔(dān)心，大多數(shù)的字體都有免費(fèi)版本!

雖然有大量不同的字體和風(fēng)格，但一般來說，我把它們分為三大類。

1. 古典字體
2. 現(xiàn)代字體
3. 正文字體

通常情況下，前兩種也可以用在正文中，只是字體的設(shè)計者希望你把它們當(dāng)作標(biāo)題來使用。

古典字體包括Abril Fatface、Playfair Display、Volux、Chalga和許多其他字體。

現(xiàn)代字體包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....

10）利用幾何圖形

這可能是最難利用的技巧，但如果應(yīng)用得當(dāng)，畫面會非常有沖擊力。

利用幾何圖形有助于強(qiáng)化布局中的概念和秩序，甚至不需要使用額外的圖像。找到合適的幾何圖形是很難的。目前我還是不能很好地掌握它。

但是有一個訣竅是，把你的文案中的字母、數(shù)字和標(biāo)題當(dāng)作幾何圖形：把它們做成巨大但微妙的形狀，或者用一些特定的字母作為形狀（字母A就很好用）。

寫在最后

能看到這，說明你是一個愿意學(xué)習(xí)和思考的同學(xué)。最近看到很多同學(xué)在問，互聯(lián)網(wǎng)行業(yè)不景氣，轉(zhuǎn)行做UI設(shè)計師、交互設(shè)計師還有前景嗎？我從來不覺得 UI 設(shè)計師、交互設(shè)計師是一個輕松的工作。不是簡簡單單能畫幾個 icon，能出一些界面，就算是優(yōu)秀的設(shè)計師。真正重要的，是設(shè)計背后的思考，能解決真切的業(yè)務(wù)問題。哪怕是一個按鈕上的文案，也要從業(yè)務(wù)和用戶體驗場景去思考和完善，而非一個作圖的機(jī)器。

真正的水平不錯的、實(shí)戰(zhàn)經(jīng)驗豐富的、保持進(jìn)步和學(xué)習(xí)的設(shè)計師，一直都是稀缺的。反之，作品集造假、渾水摸魚很容易在工作中露餡兒，在行業(yè)里無法混下去。作為在互聯(lián)網(wǎng)從業(yè)的設(shè)計師，應(yīng)該多充電，多打磨自己，讓自己的有更強(qiáng)的競爭力。

我所在的公司——知群，是一家互聯(lián)網(wǎng)職業(yè)教育的公司，創(chuàng)始人馬力老師是移動互聯(lián)網(wǎng)第一批用戶體驗設(shè)計師。曾經(jīng)做過豌豆莢、最美應(yīng)用等知名產(chǎn)品。馬力老師每周三晚上，會在知群做直播，主要講互聯(lián)網(wǎng)的崗位發(fā)展，會用不同的案例拆解和講解：互聯(lián)網(wǎng)產(chǎn)品思維、設(shè)計思維和運(yùn)營思維。盡可能幫助想入行 UI 設(shè)計和提升的同學(xué)，建立更完整、更系統(tǒng)的認(rèn)知和方法，也能知道什么樣的作品才能真的打動面試官。

直播和課程是免費(fèi)學(xué)習(xí)的，你可以添加知群的老師進(jìn)行預(yù)約：