編者按：無(wú)論喜歡與否，每個(gè)網(wǎng)頁(yè)開(kāi)發(fā)人員都不可避免地會(huì)遇到需要做出視覺(jué)設(shè)計(jì)決策的情況。在設(shè)計(jì)決策中，一些小的技巧可以實(shí)現(xiàn)事半功倍的效果。本文原題為7 Practical Tips for Cheating at Design，介紹了作者設(shè)計(jì)工作中總結(jié)的一些技巧，快來(lái)學(xué)習(xí)一下吧。

當(dāng)你工作的公司沒(méi)有一個(gè)全職設(shè)計(jì)師，而你需要自己實(shí)現(xiàn)一個(gè)新功能的網(wǎng)頁(yè)時(shí)，你可能覺(jué)得

我永遠(yuǎn)無(wú)法讓這個(gè)看起來(lái)很好，我又不是一個(gè)藝術(shù)家！

事實(shí)證明，有很多技巧可以用來(lái)平衡你的工作，不需要平面設(shè)計(jì)的專業(yè)背景。

這里有七個(gè)簡(jiǎn)單的小竅門可以用來(lái)改善你設(shè)計(jì)的美感。

1. 使用顏色和字體粗細(xì)來(lái)創(chuàng)建層次結(jié)構(gòu)，而不是字體大小

對(duì)網(wǎng)頁(yè)文本進(jìn)行樣式設(shè)計(jì)時(shí)常犯的一個(gè)錯(cuò)誤是過(guò)于依賴字體大小來(lái)控制層次結(jié)構(gòu)。

錯(cuò)誤觀念：重要的就用大字體，次要就用小字體。

不要將所有繁重的工作都留在字號(hào)上，你可以嘗試使用顏色或字體粗細(xì)來(lái)完成相同的工作。

正確觀念：重要用深色，次要用淺色

嘗試并堅(jiān)持兩種或三種顏色：

• 主要內(nèi)容用黑色（如文章的標(biāo)題）
• 次要內(nèi)容用灰色（如文章發(fā)表日期）
• 輔助內(nèi)容用淺灰色（可能是頁(yè)腳中的版權(quán)聲明）

類似地，兩種字體權(quán)重通常足以用于網(wǎng)頁(yè)設(shè)計(jì)工作：

• 大多數(shù)文本的正常字體重量（400或500，取決于字體）
• 較重的字體重量（600或700）用于您要強(qiáng)調(diào)的文字

用于網(wǎng)頁(yè)展示的字體權(quán)重不超過(guò)400?;?他們更適合大標(biāo)題，較小尺寸下閱讀會(huì)讓讀者感到不適。如果您正在考慮使用較輕的重量來(lái)淡化某些文字，請(qǐng)改用較淡的顏色或較小的字體大小。

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

使文本變?yōu)闇\灰色是在白色背景上淡化它的好方法，但在彩色背景上看起來(lái)并不太好。

使文本更接近背景色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使它變成淺灰色。

處理彩色背景時(shí)有兩種方法可以降低對(duì)比度：

（1）減少白色文字的不透明度

使用白色文字并降低不透明度。這可以讓背景顏色滲透一點(diǎn)點(diǎn)，以不與背景沖突的方式減弱文字。

（2）手工挑選基于背景顏色的顏色

當(dāng)您的背景是圖像或圖案時(shí)，或者當(dāng)減少不透明度會(huì)使文字感覺(jué)過(guò)于枯燥或不適應(yīng)時(shí)，這會(huì)比減少不透明度效果更好。

選擇與背景色調(diào)相同的顏色，調(diào)整飽和度和亮度，直到看起來(lái)合適。

3. 正確使用陰影

好的陰影效果不是打造尷尬的層次感，而是模擬在現(xiàn)實(shí)世界中看到的那樣從上方照射下來(lái)的光源。

如果您有興趣進(jìn)一步了解陰影設(shè)計(jì)，《材料設(shè)計(jì)指南》是一本很棒的入門指南。

4.? 少使用些分割線

當(dāng)你需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，盡量學(xué)會(huì)留白，使兩者有一個(gè)邊界。

雖然邊界是區(qū)分兩個(gè)元素的好方法，但它們并不是唯一的方法，而使用其中太多元素可能會(huì)讓您的設(shè)計(jì)顯得混亂。下一次你發(fā)現(xiàn)自己到達(dá)邊境時(shí)，請(qǐng)嘗試以下其中一個(gè)想法：

（1）使用框型陰影

框型陰影在繪制像邊框這樣的元素方面做得非常出色，但是可以更加微妙并且完成相同的目標(biāo)，而不會(huì)分散注意力。

（2）使用兩種不同的背景顏色

通常只需將相鄰元素的背景顏色略有不同就可以在它們之間進(jìn)行區(qū)分。如果您已經(jīng)在邊框上使用不同的背景顏色，請(qǐng)嘗試刪除邊框；你可能不需要它。

（3）添加額外的間距

什么更好的方法來(lái)創(chuàng)建元素之間的分離，而不是簡(jiǎn)單地增加分離？將事物劃分得更遠(yuǎn)是一種區(qū)分元素的好方法。

5. 不要使用過(guò)大的圖標(biāo)

如果你設(shè)計(jì)的東西使用了一些圖標(biāo)，你可能會(huì)本能地選擇設(shè)置大字體，畢竟它們是矢量圖像。雖然矢量圖像在增加尺寸時(shí)不會(huì)降低質(zhì)量，但他們細(xì)節(jié)體驗(yàn)還是有提升空間的，不當(dāng)?shù)纳炜s會(huì)讓人感覺(jué)不成比例的“矮胖”。

6. 使用邊框?yàn)槠降脑O(shè)計(jì)添加色彩

如果您不是平面設(shè)計(jì)師，那么您如何將其他設(shè)計(jì)美麗的、色彩豐富的用戶界面？

一個(gè)可以產(chǎn)生巨大差異的簡(jiǎn)單技巧就是，您可以在界面的某些部分添加色彩鮮明的邊框。

例如，在警報(bào)消息的旁邊：

…或突出顯示活動(dòng)的導(dǎo)航項(xiàng)目：

……甚至是整個(gè)布局的頂部：

它不需要任何平面設(shè)計(jì)人才為您的用戶界面添加彩色矩形，并且可以使您的網(wǎng)站更加“設(shè)計(jì)”。

7. 并非每個(gè)按鈕都需要背景顏色

“這是一個(gè)積極的行動(dòng)？將按鈕設(shè)置為綠色。

“是否刪除數(shù)據(jù)？將按鈕設(shè)為紅色?！?/p>

語(yǔ)義是按鈕設(shè)計(jì)的重要組成部分，但是還有一個(gè)更重要的維度被人們遺忘：層次結(jié)構(gòu)。

網(wǎng)頁(yè)上的每個(gè)動(dòng)作都位于重要金字塔的某處。大多數(shù)頁(yè)面只有一個(gè)真正的主要操作，一些不太重要的次要操作，以及幾個(gè)很少使用的三級(jí)操作。

在設(shè)計(jì)這些行動(dòng)時(shí)，在層次結(jié)構(gòu)中傳達(dá)他們的位置很重要。

• 主要行動(dòng)應(yīng)該很明顯。實(shí)心，高對(duì)比度的背景色在這里很有用。
• 次要行動(dòng)應(yīng)該明確但不突出。輪廓樣式或較低的對(duì)比度背景色是很好的選擇。
• 三級(jí)行動(dòng)應(yīng)該是可以發(fā)現(xiàn)但不顯眼的。將這些行為設(shè)計(jì)為鏈接通常是最好的方法。
• “破壞性行為怎么樣，他們不應(yīng)該總是紅色嗎？”

不必要！如果破壞性行為不是頁(yè)面上的主要行為，那么給它一個(gè)普通顏色按鈕更好。

當(dāng)負(fù)面行為實(shí)際上是界面中的主要行為時(shí)（如在確認(rèn)對(duì)話框中），保存大的，紅色的和粗體的樣式：

原文地址：?medium.com

譯者：雅琪Selina，由36氪編譯組出品。編輯：郝鵬程、王雅琪

譯文地址：http://36kr.com/p/5120230.html?from=related

本文由 @郝鵬程 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議