【譯】簡(jiǎn)單七步，點(diǎn)亮你的網(wǎng)頁(yè)設(shè)計(jì)

時(shí)間：2023-09-04 01:06:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-04 01:06:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

【譯】簡(jiǎn)單七步，點(diǎn)亮你的網(wǎng)頁(yè)設(shè)計(jì)：原文鏈接：




找到更有條理的頁(yè)面設(shè)計(jì)流程，實(shí)現(xiàn)更快捷、高效的網(wǎng)站瀏覽體驗(yàn)。

網(wǎng)頁(yè)設(shè)計(jì)師們通常會(huì)十分關(guān)注技術(shù)性問(wèn)題，如線框、代碼以及內(nèi)容管理等。但其實(shí)，真正厲害的設(shè)計(jì)，不是關(guān)于如何組合社交媒體上的按鈕或是營(yíng)造出華麗的視覺效果，而是創(chuàng)造出一種與企業(yè)總體戰(zhàn)略相一致的網(wǎng)頁(yè)瀏覽體驗(yàn)。

好的網(wǎng)站設(shè)計(jì)不僅僅是審美享受，更重要的是，通過(guò)視覺、文字及互動(dòng)模塊設(shè)置，它能幫助訪問(wèn)者更了解產(chǎn)品、企業(yè)以及品牌。這意味著，網(wǎng)頁(yè)上的每一個(gè)元素都應(yīng)該服務(wù)于一個(gè)既定目標(biāo)。

但問(wèn)題是，如何實(shí)現(xiàn)這一個(gè)整合的目標(biāo)呢？從網(wǎng)頁(yè)設(shè)計(jì)的宏觀角度而言，這需要將形式和功能運(yùn)用于同一賬戶。

在我看來(lái)，網(wǎng)頁(yè)設(shè)計(jì)一般需要以下7個(gè)步驟：

1. 明確目標(biāo)。客戶想要通過(guò)網(wǎng)頁(yè)獲得的東西就是網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該達(dá)成的目標(biāo)，如在設(shè)計(jì)開始之前問(wèn)自己，目標(biāo)是什么？




2. 定義范圍。一旦明確目標(biāo)之后，就可以確定項(xiàng)目實(shí)施細(xì)化，如此網(wǎng)頁(yè)需要多少頁(yè)、多少要素以達(dá)成目標(biāo)？完成這些工作的時(shí)間線是如何的？




3. 網(wǎng)站地圖及線框生成。明確范圍之后，就可以開始網(wǎng)站地圖設(shè)計(jì)，如何讓內(nèi)容與其他各元素能互相作用。




4. 內(nèi)容生成。在腦海中有了一個(gè)網(wǎng)頁(yè)的宏觀藍(lán)圖之后，就可以開始考慮具體每一頁(yè)的內(nèi)容了，永遠(yuǎn)記住，要保證搜索引擎優(yōu)化能讓每一頁(yè)都集中于一個(gè)確定主題。這很重要，因?yàn)檫@一步所處理的內(nèi)容與下一步的工作密切相關(guān)。




5. 視覺元素。在網(wǎng)站架構(gòu)與一些內(nèi)容就位之后，就可以開始著手視覺品牌設(shè)計(jì)了，不同客戶要求不同，即便已經(jīng)定義明晰，你可能依舊需要從一些零散的元素中確定視覺風(fēng)格。在這一過(guò)程中，視覺設(shè)計(jì)稿、情緒板、元素拼貼等工具會(huì)很有幫助。




6. 測(cè)試。到現(xiàn)在為止，你已經(jīng)能看到所有的頁(yè)面樣式，并且知道用戶訪問(wèn)時(shí)的呈現(xiàn)方式，所以，是時(shí)候做一個(gè)預(yù)檢了。結(jié)合網(wǎng)站的手動(dòng)瀏覽和自動(dòng)站點(diǎn)網(wǎng)絡(luò)爬蟲功能，識(shí)別用戶體驗(yàn)角度所有關(guān)于簡(jiǎn)單斷裂連接的問(wèn)題。




7. 啟動(dòng)！一旦所有環(huán)節(jié)都能正常運(yùn)轉(zhuǎn)，是時(shí)候計(jì)劃并執(zhí)行你的網(wǎng)站設(shè)計(jì)了！這就包括計(jì)劃啟動(dòng)的時(shí)間點(diǎn)以及與用戶溝通的模式，如，你將如何上線這一網(wǎng)站？怎么讓大家知曉？




在這之后，就可以開香檳慶祝了！

現(xiàn)在，讓我們深入一點(diǎn)探究每一步驟吧~




1. 明確目標(biāo)。




第一步最重要的是理解你將要如何幫助客戶解決問(wèn)題

在這一最初的步驟當(dāng)中，設(shè)計(jì)師需要明確網(wǎng)站的最終目標(biāo)，當(dāng)然這通常需要跟客戶及董事的密切溝通。這一環(huán)節(jié)中需要探究和回答的問(wèn)題一般包括以下：




1、這一網(wǎng)站是用來(lái)干什么的？

2、用戶期望從網(wǎng)站獲取什么？

3、網(wǎng)站的最重要功能是信息獲取、銷售還是娛樂(lè)？

4、網(wǎng)站需要清晰傳遞品牌核心理念么？還是這一網(wǎng)站只是品牌建設(shè)策略當(dāng)中的一個(gè)分支，其有更為具體而微的目標(biāo)？

5、競(jìng)爭(zhēng)對(duì)手（如果有）是如何做的？此網(wǎng)站要如何區(qū)別于競(jìng)爭(zhēng)對(duì)手？

對(duì)任何一個(gè)網(wǎng)站設(shè)計(jì)而言，這一步都是最重要的。如果上述問(wèn)題不夠清楚，整個(gè)項(xiàng)目就有可能朝著錯(cuò)誤的方向前進(jìn)。

將目標(biāo)寫下來(lái)或者總結(jié)一段話會(huì)比較有用，這樣能保證設(shè)計(jì)是在正確的方向上，確保你是理解網(wǎng)站的目標(biāo)用戶的，而且，要在對(duì)手中保證競(jìng)爭(zhēng)力。

關(guān)于這一步驟，可以點(diǎn)擊這一鏈接獲取更多：

關(guān)于網(wǎng)站目標(biāo)確定更多可用工具：

·用戶畫像

·創(chuàng)意綱要

·競(jìng)品分析

·品牌特質(zhì)

2. 定義范圍




最常見也最難搞的問(wèn)題之一就是網(wǎng)頁(yè)設(shè)計(jì)中范圍定義的變化?？蛻裟X海中有一個(gè)明確的目標(biāo)，但這設(shè)計(jì)的過(guò)程中，這一目標(biāo)會(huì)逐漸擴(kuò)張、演變甚至發(fā)生改變。接下來(lái)的事情你也知道，你不僅僅是在設(shè)計(jì)一個(gè)網(wǎng)站，同時(shí)還有網(wǎng)站應(yīng)用、郵件以及提示等。




這不單單好似設(shè)計(jì)師的工作，因?yàn)檫@通常會(huì)帶來(lái)更多工作量，但如果逐步提高的預(yù)期和既定的時(shí)間線、預(yù)算不相符，那項(xiàng)目很有可能在短時(shí)間之內(nèi)變得超乎想象般不切實(shí)際。







甘特圖，就是指一個(gè)項(xiàng)目的實(shí)際時(shí)間節(jié)點(diǎn)具體呈現(xiàn)，包括任何重大標(biāo)志性階段成果，能幫助實(shí)現(xiàn)邊界設(shè)定并在規(guī)定時(shí)間內(nèi)完成項(xiàng)目。對(duì)設(shè)計(jì)師和客戶而言，這都是一個(gè)切實(shí)可見的確定目標(biāo)和任務(wù)手冊(cè)。

定義范圍小工具

·合同

·甘特圖（或者其他的可視化時(shí)間線呈現(xiàn)方式）

3. 網(wǎng)站地圖及線框生成







一個(gè)簡(jiǎn)單的網(wǎng)站只需要簡(jiǎn)單的網(wǎng)站地圖，注意如何確保頁(yè)面層級(jí)，網(wǎng)站地圖是所有好的網(wǎng)站設(shè)計(jì)的基礎(chǔ)，它能幫助設(shè)計(jì)師迅速理清網(wǎng)站信息架構(gòu)、解釋多種內(nèi)容之間的關(guān)系。


建立一個(gè)沒有網(wǎng)站地圖的網(wǎng)站就好比一個(gè)沒有藍(lán)圖的房屋，當(dāng)然這很少能成功的。

下一步就是搭建線框，一般而言，線框能提供一個(gè)網(wǎng)站的視覺設(shè)計(jì)和內(nèi)容元素，同時(shí)也能協(xié)助辨識(shí)網(wǎng)站地圖潛在的不足與缺憾。




雖然線框設(shè)計(jì)不包括任何最終設(shè)計(jì)元素，但它像是一個(gè)最終網(wǎng)站呈現(xiàn)的指導(dǎo)。有設(shè)計(jì)師會(huì)用Balsamiq或者Webflow等工具來(lái)完成線框設(shè)計(jì)，個(gè)人而言，我比較喜歡回歸最基本的樣式——用紙和筆完成。

網(wǎng)站地圖和線框生成小工具：

·紙筆

·Balsamiq

·Moqups

·Sketch

·Axure

·Slickplan

·Writemaps

·Mindnode




4. 內(nèi)容生成




一旦網(wǎng)站框架都就位，你就可以開始網(wǎng)站最重要的工作了：內(nèi)容創(chuàng)造。

內(nèi)容包括兩個(gè)重要目標(biāo)：




1）內(nèi)容指引參與和行為。

首先，內(nèi)容互動(dòng)能指引訪問(wèn)者在網(wǎng)站完成瀏覽目標(biāo)，這就涉及到內(nèi)容本身（文字）與其呈現(xiàn)方式（字體和排版等）。

無(wú)趣、沒有生活氣息且過(guò)長(zhǎng)的文章很難吸引訪問(wèn)者注意力。短小、精悍、有吸引力的文字一般都能吸引讀者繼續(xù)點(diǎn)擊其他頁(yè)面。

如果你的內(nèi)容真的有很多，也不要滿屏都是文字，多分段，用一些視覺元素讓內(nèi)容看起來(lái)更有吸引力、更有參與感。

2）搜索引擎優(yōu)化

內(nèi)容也能提高網(wǎng)站搜索引擎的可見性，這種通過(guò)生產(chǎn)及改善內(nèi)容以提高搜索排名的方式即稱為搜索引擎優(yōu)化SEO。

對(duì)任何一個(gè)網(wǎng)站來(lái)說(shuō)，獲取正確的關(guān)鍵詞和重要段落都十分重要。我經(jīng)常用的是工具之一是Google關(guān)鍵詞計(jì)劃，這個(gè)工具能顯示目標(biāo)關(guān)鍵詞和短語(yǔ)的搜索量，這樣你就能進(jìn)一步明確人們通過(guò)網(wǎng)頁(yè)都在搜索什么。隨著搜索引擎變得越來(lái)越智能，你的內(nèi)容也應(yīng)該策略化安排，谷歌趨勢(shì)（Google Trends）也能很迅速檢測(cè)人們真正利用網(wǎng)站搜索什么。

很多網(wǎng)站設(shè)計(jì)過(guò)程都是圍繞著搜索引擎優(yōu)化的，你想要重要顯示的關(guān)鍵詞，離開頭越近越好。關(guān)鍵詞也應(yīng)該出現(xiàn)在H1標(biāo)簽、描述標(biāo)記及主題內(nèi)容中。

文筆流利、有信息量且關(guān)鍵詞豐富的內(nèi)容一般也會(huì)更容易被搜索引擎檢索到，這也使得網(wǎng)站的出鏡率變高。

一般來(lái)說(shuō)，客戶會(huì)有一大堆內(nèi)容需要呈現(xiàn)，所以，根據(jù)指引將關(guān)鍵詞和段落按序排列就顯得尤為重要。




內(nèi)容生成的炫酷工具：

· Google Docs

· Dropbox Paper

· Quip

· Gather Content

便捷搜索引擎工具：

? Google Keyword Planner

? Google Trends

? Screaming Frog’s SEO Spider

5. 視覺元素




最后，是時(shí)候設(shè)計(jì)網(wǎng)站視覺風(fēng)格了，這部分的設(shè)計(jì)一般會(huì)根據(jù)客戶現(xiàn)存品牌元素、顏色選擇以及l(fā)ogo等所定，但這也是一個(gè)好的網(wǎng)頁(yè)設(shè)計(jì)師能展現(xiàn)自己設(shè)計(jì)才能的舞臺(tái)之一。

圖像在網(wǎng)站設(shè)計(jì)中占據(jù)著前所未有的重要程度。高質(zhì)量圖片不僅讓網(wǎng)站給人一種專業(yè)的視覺效，同時(shí)也是在傳遞著一種信息、建立一種信任。

視覺內(nèi)容能提升點(diǎn)擊量、參與度，甚至營(yíng)業(yè)額，但除此之外，人們也希望能在網(wǎng)站上看見更多圖案。不光是因?yàn)閳D像讓人們更容易獲取重要信息，而且圖像能深層次傳遞文本信息，甚至在不需要文本的情況下也能獲取信息。

我推薦用專業(yè)圖片編輯器，要時(shí)刻記住圖片很重要，好看的圖片能讓訪客在網(wǎng)頁(yè)停留更長(zhǎng)的時(shí)間，個(gè)人使用Optimizilla來(lái)保證圖片質(zhì)量，你也需要保證你的圖片和你的網(wǎng)站內(nèi)容一樣能有代入感。

視覺設(shè)計(jì)是和網(wǎng)站用戶交流的一種方式，如果方法得當(dāng)，視覺元素能在一定程度上促進(jìn)網(wǎng)站的進(jìn)步，如果方法不當(dāng)，這個(gè)網(wǎng)站對(duì)用戶而言可能就是一個(gè)網(wǎng)址而已。

視覺元素推薦工具：

·常見圖片工具（Sketch, Illustrator, Photoshop等）

·情緒板，VI設(shè)計(jì)圖紙，元素拼圖等

·視覺風(fēng)格指引

6. 測(cè)試




一旦網(wǎng)站內(nèi)容和視覺元素都就位，就可以開始測(cè)試了。

全面測(cè)試每一個(gè)網(wǎng)頁(yè)并保證每一個(gè)鏈接都是正常運(yùn)作的，并且所有網(wǎng)頁(yè)瀏覽與加載是正常的。一個(gè)小小的解碼錯(cuò)誤可能就會(huì)導(dǎo)致錯(cuò)誤，而找到這些錯(cuò)誤則十分費(fèi)力，最好是在網(wǎng)站呈現(xiàn)給觀眾之前就能找到并修復(fù)。

編者的話：在這個(gè)階段，我強(qiáng)烈推薦Screaming Frog出品的SEO Spider，這是一款包含很多標(biāo)準(zhǔn)審核任務(wù)的工具，而且最多支持全球500多個(gè)URL。

最后，多看一眼你網(wǎng)頁(yè)的標(biāo)題和描述，甚至是網(wǎng)頁(yè)標(biāo)題的順序也能影響到頁(yè)面搜索引擎。

送你一片測(cè)試階段絕佳好文：

測(cè)試階段工具：

· W3C連接檢查器

· SEO Spider

7. 啟動(dòng)！




現(xiàn)在，就到了大家最喜愛的環(huán)節(jié)了——啟動(dòng)！當(dāng)然前提是已經(jīng)徹底全面測(cè)試過(guò)，而且各項(xiàng)指標(biāo)均讓人滿意。




別指望會(huì)一切完美?？赡苓€是會(huì)有一些小細(xì)節(jié)沒有完善，網(wǎng)站設(shè)計(jì)好似一個(gè)細(xì)水長(zhǎng)流且需要不斷維護(hù)的過(guò)程。

而且，網(wǎng)站設(shè)計(jì)其實(shí)是要在形式與功能之間找到平衡點(diǎn)，你需要運(yùn)用正確的字體、顏色以及設(shè)計(jì)主題，但人們?yōu)g覽網(wǎng)站的體驗(yàn)一樣重要。

熟練的設(shè)計(jì)師們一般都能精準(zhǔn)衡量這兩者之間的關(guān)系，并且在其中找到平衡點(diǎn)。

關(guān)于正式啟動(dòng)網(wǎng)站階段，要時(shí)刻記住，就算已經(jīng)無(wú)限接近這項(xiàng)工作的尾聲，但網(wǎng)站設(shè)計(jì)之美就在于這項(xiàng)工作永遠(yuǎn)不會(huì)結(jié)束。一旦網(wǎng)站開始運(yùn)作，你就可以持續(xù)運(yùn)營(yíng)，并且加入新的內(nèi)容和特點(diǎn)，還有監(jiān)測(cè)分析，內(nèi)容優(yōu)化等。







原文標(biāo)題：The Web Design Process in 7 Simple Steps

原文首發(fā)于“惜閱”公眾號(hào):)