本文將分享一些有關(guān)設(shè)計(jì)的技巧，您可以靈活地將其應(yīng)用于實(shí)際工作，并幫助改進(jìn)您的設(shè)計(jì)。

對(duì)于剛剛進(jìn)入設(shè)計(jì)行業(yè)的新手來(lái)說(shuō)，一些一般的設(shè)計(jì)原則經(jīng)常被忽視。但是，每個(gè)人都可以理解并將好的設(shè)計(jì)原則應(yīng)用到您自己的設(shè)計(jì)中。今天，我將分享一些有關(guān)設(shè)計(jì)的提示。您可以靈活地應(yīng)用于實(shí)際工作，并幫助您改進(jìn)設(shè)計(jì)。

如果你不相信你可以做設(shè)計(jì)，那就記住我們的傳奇角色David Eric Grohl說(shuō)：

我從不學(xué)習(xí)打鼓課，從不學(xué)習(xí)吉他課，我依靠個(gè)人探索。我認(rèn)為，如果你真的對(duì)某事充滿熱情，你就會(huì)有動(dòng)力，而你會(huì)集中精力學(xué)習(xí)，這樣你就可以做任何你想做的事。 —— Dave Grohl，Spitfire Band

把這句話放在心里，你準(zhǔn)備好學(xué)習(xí)速成班嗎？讓我們開(kāi)始吧（沒(méi)有具體的訂單）：

1.使用足夠的顏色對(duì)比

在我們的日常設(shè)計(jì)工作中，請(qǐng)確保材料背景和字體顏色具有足夠的色彩對(duì)比度，以避免視覺(jué)障礙。例如，白色背景上的黑色文字是最容易識(shí)別的，因此顯示效果會(huì)更加生動(dòng)。最好不要使用淺灰色，黃色或綠色。這些相似顏色的顏色在視覺(jué)感知中不易識(shí)別。

2.深灰色比黑色好

當(dāng)我們排版文本時(shí)，我們可以嘗試深灰色333333 RGB（51,51,51）。它不是純黑色，因?yàn)榧兒谏c純白色背景形成鮮明對(duì)比，看起來(lái)令人眼花繚亂。深灰色更柔和，更容易集中精力閱讀。

3.將重要內(nèi)容放在前面

在布置網(wǎng)頁(yè)或設(shè)計(jì)應(yīng)用程序時(shí)，請(qǐng)突出顯示關(guān)鍵內(nèi)容。重要內(nèi)容應(yīng)該是可見(jiàn)的，無(wú)需縮放，滾動(dòng)或單擊。

我們來(lái)看幾個(gè)視覺(jué)層次結(jié)構(gòu)設(shè)計(jì)的例子。

Instagram（在下圖的左側(cè)）是顯示用戶在整個(gè)屏幕上發(fā)布的圖像/視頻的好方法。

Pinterest（右下角），將搜索欄固定到頂部以創(chuàng)建可視層次結(jié)構(gòu)，然后搜索欄將網(wǎng)格放在下面。故意使用搜索框作為頁(yè)面上的第一項(xiàng)。

搜索是應(yīng)用程序的核心功能，人們使用Pinterest發(fā)現(xiàn)和瀏覽他們想要的頁(yè)面。

讓我們看看另外兩個(gè)例子。

Spotify（在下圖中的左側(cè)）首先將專輯封面和音樂(lè)標(biāo)題放在第一位，將用戶操作按鈕放在第二位。雖然操作次之，但Spotify仍然保證播放暫停按鈕比前進(jìn)后退按鈕更明顯。

Facebook（在下圖的右側(cè)）看起來(lái)與Instagram非常相似，將朋友發(fā)布的內(nèi)容放在屏幕的正面和中間。

4.對(duì)齊

如果有辦法快速改進(jìn)您的設(shè)計(jì)，那就是調(diào)整您的設(shè)計(jì)材料。

這也是設(shè)計(jì)師使用“網(wǎng)格”的原因。提醒自己對(duì)齊，良好的排版會(huì)給用戶帶來(lái)不同的用戶體驗(yàn)。

確保元素對(duì)齊是改進(jìn)任何應(yīng)用或網(wǎng)站的最簡(jiǎn)單方法，您可以立即將視覺(jué)效果提高10倍。

我們來(lái)看看其他對(duì)齊情況，這次是Medium。

這是一個(gè)中型頁(yè)面，您認(rèn)為它看起來(lái)如何？

是否覺(jué)得它不悅目？

提示：注意左側(cè)的對(duì)齊方式。你看起來(lái)像什么？

在左邊，我強(qiáng)調(diào)了糟糕的排版。在右邊，我只是對(duì)齊內(nèi)容的左側(cè)。

左側(cè)未對(duì)齊方式產(chǎn)生視覺(jué)沖擊，右側(cè)始終對(duì)齊

左側(cè)是不對(duì)齊，右側(cè)是固定對(duì)齊

5.文字大小和空白

我們的設(shè)計(jì)是供人們觀看，而不是螞蟻。增加文本大小并留下更多空白將使內(nèi)容更具可讀性。

良好的文字大小與糟糕的文字大小

好空白VS壞白空間

6.如果訂單很重要，請(qǐng)使用列表

大多數(shù)移動(dòng)/網(wǎng)絡(luò)應(yīng)用程序都設(shè)計(jì)有搜索功能，可能存在一些關(guān)于如何顯示搜索結(jié)果的爭(zhēng)議。

如果結(jié)果的順序很重要，則列表是顯示結(jié)果的最有效方式。

如果結(jié)果的順序不重要，并鼓勵(lì)用戶瀏覽和探索更多內(nèi)容（如Pinterest或Airbnb），則網(wǎng)格視圖可以提供更多信息，并使用戶更容易瀏覽搜索結(jié)果。

7.先做黑白設(shè)計(jì)，然后給它上色

在設(shè)計(jì)應(yīng)用程序界面時(shí)，使用黑白設(shè)計(jì)，這樣我們就可以更加關(guān)注核心用戶體驗(yàn)。

如果您在設(shè)計(jì)時(shí)直接使用其他顏色，很容易影響設(shè)計(jì)師的情緒并降低您的注意力。

8.使設(shè)計(jì)使用舒適

使用手是一個(gè)非?，F(xiàn)實(shí)的問(wèn)題。盧克繪制了最容易觸摸和使用的區(qū)域（右手）——我非常喜歡可以設(shè)置左手和右手功能的應(yīng)用程序。

許多高效的移動(dòng)應(yīng)用程序?qū)?dǎo)航欄和主要操作按鈕放在手機(jī)的底部。

9.借用調(diào)色板

色彩是一種難以捉摸的藝術(shù)。我強(qiáng)烈建議大家去Dribbble搜索“Color Palettes”或使用調(diào)色板編輯器，如Coolors或Color Claim。這可以節(jié)省您數(shù)小時(shí)的辯論和糾結(jié)的時(shí)間。

10.使用Apple和Google的系統(tǒng)設(shè)計(jì)規(guī)范

Apple和Google都編寫(xiě)了很棒的設(shè)計(jì)資源來(lái)幫助任何人構(gòu)建Android或iOS應(yīng)用程序。

例如，Google的Material具有設(shè)計(jì)原則，資源，顏色，圖標(biāo)和控件，可幫助您快速入門(mén)。

Apple的《人機(jī)交互指南》，在里面，你可以找到設(shè)計(jì)iOS應(yīng)用程序的所有要點(diǎn)。

Google Inc.《材料設(shè)計(jì)》和Apple《人機(jī)交互指南》部分截圖

最后，設(shè)計(jì)需要更多練習(xí)

只有運(yùn)用知識(shí)才能真正幫助您改進(jìn)設(shè)計(jì)。雖然將注意力和注意力集中在不同的設(shè)計(jì)問(wèn)題上需要時(shí)間和精力，但您會(huì)發(fā)現(xiàn)這是成為真正偉大設(shè)計(jì)師的唯一途徑。

原作者：Marc Hemeon

原始地址：https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037

本文由Mockplus團(tuán)隊(duì)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

« 雙11后面的營(yíng)業(yè)額中隱藏著什么樣的未來(lái)信息？ | 如何進(jìn)行微營(yíng)銷？你需要掌握這些內(nèi)容 »