一個好的網(wǎng)站包括兩個方面，視覺設(shè)計效果和網(wǎng)站程序。許多開發(fā)人員(主要是自由職業(yè)者)需要同時處理這兩塊內(nèi)容。他們自己設(shè)計網(wǎng)站，然后自己實現(xiàn)網(wǎng)站程序開發(fā)。

請注意，這篇文章適用于同時完成這兩個部分的開發(fā)人員，或者如果你是從事設(shè)計的人，這些內(nèi)容可以跳過。

在許多人看來，編程，尤其是 Web 開發(fā)是人們學(xué)到的最重要的技能之一。

每個人都想學(xué)習(xí) JavaScript，以及 React、Angular 等最新框架。但是，學(xué)習(xí)這些框架會讓你成為一名優(yōu)秀的開發(fā)人員嗎?

我相信要真正打造一個網(wǎng)站，視覺效果與使用的開發(fā)技術(shù)堆棧一樣重要。用戶和網(wǎng)站之間的溝通應(yīng)該順暢，并且，你應(yīng)該能夠通過你的設(shè)計將用戶連接到你的網(wǎng)站。

以下是任何設(shè)計師或開發(fā)人員應(yīng)該學(xué)習(xí)的 5 項技能，以使他們的網(wǎng)站脫穎而出。

1、學(xué)習(xí)視覺設(shè)計的基本規(guī)則

任何網(wǎng)站的基礎(chǔ)都是其視覺效果。

它的外觀如何干凈、不同元素之間如何相互作用，以及網(wǎng)站的整體主題都是你網(wǎng)站引人注目的重要因素。如果網(wǎng)站具有視覺吸引力，你只會留在網(wǎng)站上。

視覺設(shè)計處理視覺元素，例如網(wǎng)頁布局、使用的插圖、照片、你選擇的字體和排版，甚至是留白這些都是非常有技巧的。

人們通過視覺處理網(wǎng)站上的大部分信息，而不是閱讀那里寫的內(nèi)容。當(dāng)你讓他們迷上了你的視覺效果后，他們就會開始關(guān)注它。

重要的是要了解設(shè)計基本要點：

色彩原則

線、點、面(形狀)

紋理、留白和布局

排版和攝影

2、學(xué)習(xí)交互設(shè)計

“設(shè)計不僅僅是它的外觀和感覺。設(shè)計就是它的運作方式。” — 史蒂夫·喬布斯

交互設(shè)計是交互產(chǎn)品和服務(wù)的設(shè)計。在交互設(shè)計中，主要關(guān)注的是設(shè)計用戶如何與網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序交互。

在你讓用戶與你的視覺效果聯(lián)系起來之后，你的用戶應(yīng)該能夠輕松地與網(wǎng)站進行交互。該網(wǎng)站不應(yīng)感到復(fù)雜或難以使用其一些功能。

交互設(shè)計對于讓用戶輕松瀏覽網(wǎng)站非常重要，以便你可以將他們引導(dǎo)到所需的位置(產(chǎn)品)。

另外，術(shù)語“交互設(shè)計”經(jīng)常與“用戶體驗設(shè)計”混淆。用戶體驗設(shè)計 (UX) 涉及更多方面。交互設(shè)計是用戶體驗的一個子集。

3、學(xué)習(xí)原型工具

你有多少次經(jīng)歷過你做了一個網(wǎng)站而客戶不喜歡它?我已經(jīng)面對它的次數(shù)令人尷尬。我以為每個人都會喜歡我所做的設(shè)計。我的設(shè)計在我眼中就像糖果一樣。

但這種情況并非如此。在你和你的客戶對同一頁面達成同一意見之前，你可能會有一千次的更改。

我為了避免重復(fù)的修改UI設(shè)計，所以，我采用了節(jié)省數(shù)十小時的最佳方法，學(xué)習(xí)使用原型設(shè)計工具。原型設(shè)計工具可以幫助你的客戶直觀地了解你將要交付給他們的內(nèi)容。

這些工具為我們提供的最大好處就是迭代。與我們對整個網(wǎng)站進行編碼，然后進行更改相比，我們可以更快地迭代、改進和驗證。

一些免費的 Web UI 模型工具如下：

Adobe XD：https://www.adobe.com/in/products/xd.html

Origami Studio：https://origami.design/

Webflow：https://webflow.com/

4、熟悉產(chǎn)品和用戶群

任何產(chǎn)品設(shè)計中的重要課程之一就是了解你的用戶市場。網(wǎng)站設(shè)計就像一個產(chǎn)品，只是在這里，你正在制作一個與用戶交互的應(yīng)用程序。

熟悉產(chǎn)品的用途并了解用戶的興趣，再開始設(shè)計網(wǎng)站作品，這點很重要。

例如，如果你正在創(chuàng)建一個面向 40 到 60 歲用戶人群的網(wǎng)站，你可能希望網(wǎng)站更干凈且易于瀏覽。同時，如果你的目標(biāo)受眾更年輕，那么，你可能會選擇更具活力和吸引力的網(wǎng)站設(shè)計風(fēng)格。

充分了解你的產(chǎn)品和用戶人口統(tǒng)計數(shù)據(jù)，將始終幫助你創(chuàng)建符合用戶興趣的設(shè)計。

5、搜索引擎優(yōu)化 (SEO)

你可以創(chuàng)建一個漂亮、干凈且引人入勝的網(wǎng)站。但是，如果沒有人訪問你的網(wǎng)站，這一切都會顯得特別沒有意義。

SEO 是網(wǎng)頁設(shè)計和開發(fā)過程的一個非常重要的部分。在制作整個網(wǎng)站后，不要將 SEO 視為事后的想法。

作為 Web 開發(fā)人員，你應(yīng)該關(guān)注由 Web 架構(gòu)、語義、內(nèi)容和網(wǎng)站編碼方式組成的 Onpage SEO。

頁面 SEO 占網(wǎng)站總分的30%左右。

因此，下次你設(shè)計網(wǎng)站時，請考慮將 SEO 作為過程并幫助你的客戶實現(xiàn)他們想要達到的目的。

最后，一個好的網(wǎng)站應(yīng)該與它所提供的價值一樣好，用戶可以輕松瀏覽你的網(wǎng)站并對其感到舒適。

來源：酷扯兒