企業(yè)網(wǎng)站設(shè)計(jì)的流程和方法，讓網(wǎng)站更出彩

在數(shù)字化產(chǎn)品推進(jìn)的過(guò)程中，科學(xué)的設(shè)計(jì)流程和方法論，可以用更少的時(shí)間做更多的事情，為企業(yè)節(jié)省時(shí)間和金錢成本，您必須花時(shí)間計(jì)劃您的項(xiàng)目，將其分解為基本步驟以取得成功。本文就以企業(yè)網(wǎng)站建設(shè)舉例，如何規(guī)劃5個(gè)設(shè)計(jì)步驟，讓您企業(yè)的網(wǎng)站設(shè)計(jì)更加出彩。

第一步：了解客戶需求
在開(kāi)始您的網(wǎng)站設(shè)計(jì)之前，您需要從客戶那里獲得盡可能多的信息，多聽(tīng)聽(tīng)他們的想法，客戶不會(huì)直接告訴你他們想要什么，這取決于你怎么問(wèn)他們，所以在設(shè)計(jì)之前需要做用戶調(diào)研。比如，客戶問(wèn)卷調(diào)查，我最喜歡的了解我的客戶的方法是填寫(xiě)表格。列出有助于開(kāi)始您的項(xiàng)目的最重要的問(wèn)題。這個(gè)網(wǎng)站的目的是什么？目標(biāo)受眾是誰(shuí)？你的競(jìng)爭(zhēng)對(duì)手是誰(shuí)？您希望訪問(wèn)者采取什么行動(dòng)？等等。表格不應(yīng)超過(guò) 10 個(gè)問(wèn)題，因?yàn)樽屛覀儸F(xiàn)實(shí)一點(diǎn)，并非所有客戶都有時(shí)間或耐心填寫(xiě) 20 或 30 個(gè)字段。確保在開(kāi)始起草提案之前而不是之后將您的表格發(fā)送給客戶。

第 2 步：洞察和繪制草圖
不要著急開(kāi)始設(shè)計(jì)。這點(diǎn)怎么強(qiáng)調(diào)都不過(guò)分，最好的辦法是從一張紙開(kāi)始，開(kāi)始繪制素描，如果您是設(shè)計(jì)師并且沒(méi)有個(gè)人筆記本，您最好開(kāi)車去最近的圖書(shū)館。在涉及頭腦風(fēng)暴的任何活動(dòng)中，使用筆和紙寫(xiě)下你的筆記是最有效的方式。 花一些時(shí)間，開(kāi)始勾勒出你腦海中浮現(xiàn)的任何想法。你不必知道如何畫(huà)畫(huà)。你可以從一個(gè)圓圈開(kāi)始，然后你的想法就會(huì)自然而然地流動(dòng)。您可以在上班的路上坐在出租車上，創(chuàng)意可能會(huì)突然出現(xiàn)并記錄下來(lái)。

編譯你的靈感使用項(xiàng)目名稱創(chuàng)建一個(gè)書(shū)簽文件夾。開(kāi)始研究，然后保存您認(rèn)為相關(guān)的任何網(wǎng)頁(yè)。確保不要復(fù)制確切的元素或想法，因?yàn)檫@將被視為抄襲。根據(jù)客戶的需求找到您最好看的網(wǎng)站和布局，并搜索同一業(yè)務(wù)中的其他網(wǎng)站。寫(xiě)下你喜歡和不喜歡他們的地方。布局、顏色、形狀、動(dòng)畫(huà)……任何能給你下一步想法和靈感的東西。了解你的競(jìng)爭(zhēng)對(duì)手好好看看競(jìng)爭(zhēng)對(duì)手的網(wǎng)站。檢查所有本地和國(guó)際競(jìng)爭(zhēng)對(duì)手并從他們的內(nèi)容中學(xué)習(xí)。他們都有什么共同點(diǎn)？這是您應(yīng)該包含在您的網(wǎng)站中的內(nèi)容。他們?nèi)鄙偈裁?？這就是你可以在你的網(wǎng)站上改進(jìn)的地方。

第 3 步：繪制線框圖
線框是您網(wǎng)站的藍(lán)圖。這就是為您的網(wǎng)站提供視覺(jué)結(jié)構(gòu)的原因。一些設(shè)計(jì)師傾向于在他們的線框中包含設(shè)計(jì)元素。這應(yīng)該完全避免，因?yàn)檫@會(huì)分散線框的目的，即說(shuō)明事情的走向，而不是事情的樣子。線框應(yīng)該是灰度的，只關(guān)注布局。 是的，線框的第一種方法是筆和紙。列出要包含在網(wǎng)頁(yè)上的所有元素。接下來(lái)，將它們排列在頁(yè)面上。

基本上，線框應(yīng)該定義這些主要元素：元素放置如果不知道事情的發(fā)展方向，您就無(wú)法啟動(dòng)您的網(wǎng)站。這是你決定的地方。您甚至可以與您的客戶會(huì)面，討論您的內(nèi)容的最佳位置。信息層次結(jié)構(gòu)帶有鏈接列表的站點(diǎn)地圖可能會(huì)讓客戶甚至設(shè)計(jì)師不知所措。通過(guò)布置站點(diǎn)地圖，您將能夠看到頁(yè)面是如何放置到位的，這將使您能夠在過(guò)于領(lǐng)先之前進(jìn)行調(diào)整?；?dòng)性創(chuàng)建線框時(shí)，您必須提出問(wèn)題：這些元素將如何相互作用？訪客會(huì)采取我希望他采取的行動(dòng)嗎？訪問(wèn)者將如何在站點(diǎn)中移動(dòng)？這就是用戶體驗(yàn)發(fā)揮作用的地方。所以你創(chuàng)建了你的布局。接下來(lái)，您將創(chuàng)建您的界面。

第 4 步：原型設(shè)計(jì)
設(shè)計(jì)網(wǎng)站很像蓋房子，平面圖是線框，視覺(jué)室內(nèi)設(shè)計(jì)是您的風(fēng)格樣式。這個(gè)設(shè)計(jì)過(guò)程的美妙之處在于這一步變得多么容易。通過(guò)組合線框和樣式圖塊，您現(xiàn)在需要做的就是將它們組合在一起。在這里，您開(kāi)始了解您的網(wǎng)站的外觀。 原型設(shè)計(jì)意味著在構(gòu)建實(shí)際網(wǎng)站之前構(gòu)建網(wǎng)站模型。

原型設(shè)計(jì)基于 3 個(gè)步驟：
原型 在調(diào)整用戶體驗(yàn)并確保設(shè)計(jì)易用性的同時(shí)將樣式圖塊實(shí)施到布局中。
測(cè)試 此步驟至關(guān)重要，因?yàn)樗u(píng)估網(wǎng)站是否滿足客戶的需求和期望。您甚至可以與您的用戶分享您的原型，以測(cè)試您的交互性和用戶體驗(yàn)。
微調(diào) 在這里您可以改進(jìn)任何需要改進(jìn)的更改和元素。這個(gè)過(guò)程可能需要一些時(shí)間，具體取決于您和用戶/客戶需要多少個(gè)周期才能獲得最終的完美設(shè)計(jì)。

第 5 步：元素樣式設(shè)計(jì)
樣式圖塊（也稱為樣式指南）是一種設(shè)計(jì)交付物，由字體、顏色和界面元素組成，它們傳達(dá)了網(wǎng)絡(luò)視覺(jué)品牌的本質(zhì)。樣式瓷磚基于與客戶的視覺(jué)偏好討論。通常的元素包括徽標(biāo)、排版、顏色和語(yǔ)調(diào)。以下是樣式圖塊的兩個(gè)快速示例。

從概念到視覺(jué)根據(jù)您從客戶的需求中學(xué)到的知識(shí)，編寫(xiě)您的樣式圖塊將轉(zhuǎn)換您網(wǎng)站的情緒、感覺(jué)和基調(diào)。它將幫助您選擇如何以客戶能夠理解的方式使用設(shè)計(jì)元素。保持一致性使用樣式圖塊，您可以通過(guò)創(chuàng)建一組設(shè)計(jì)遵循的規(guī)則來(lái)保持外觀和感覺(jué)。該過(guò)程變得靈活，易于維護(hù)和一致。

最后，通過(guò)以上5個(gè)步驟，您的網(wǎng)站應(yīng)該已經(jīng)成型，那么下一步將是進(jìn)入開(kāi)發(fā)階段，注意和開(kāi)發(fā)人員友好溝通，盡可能實(shí)現(xiàn)設(shè)計(jì)的還原度，并進(jìn)行跟蹤還原度測(cè)試。