如何無(wú)代碼設(shè)計(jì)一款美觀且實(shí)用的網(wǎng)站？

作為一門新興的邊緣性職業(yè)，網(wǎng)站設(shè)計(jì)既要從外觀上創(chuàng)意，又要適當(dāng)結(jié)合圖形、版面及交互設(shè)計(jì)等相關(guān)原理，使得它成為一門獨(dú)特且令人神往的藝術(shù)。毫無(wú)疑問，好的設(shè)計(jì)能讓網(wǎng)站在諸多站點(diǎn)中脫穎而出，優(yōu)秀的創(chuàng)意和表現(xiàn)方式能給瀏覽者留下深刻的印象，從而持續(xù)間接地增加網(wǎng)站訪問流量和轉(zhuǎn)換率。然而，要設(shè)計(jì)出一款兼顧“顏值和實(shí)用性”的個(gè)人/企業(yè)網(wǎng)站并不容易，更不用說(shuō)讓設(shè)計(jì)想法落地實(shí)現(xiàn)出來(lái)對(duì)大多數(shù)人說(shuō)更是一項(xiàng)艱巨的任務(wù)。

那到底如何才能在時(shí)間和技能有限的情況下，設(shè)計(jì)出一款令人滿意甚至網(wǎng)紅的網(wǎng)站呢？小編認(rèn)為，在設(shè)計(jì)的初始階段規(guī)劃好網(wǎng)站的設(shè)計(jì)步驟是非常重要的，通常情況下網(wǎng)站設(shè)計(jì)分為四個(gè)主要步驟，包括設(shè)計(jì)靈感啟發(fā)、設(shè)計(jì)原型構(gòu)建、可用性測(cè)試、網(wǎng)站搭建。下面是針對(duì)每個(gè)步驟的具體內(nèi)容，一起看看吧：

步驟一，設(shè)計(jì)靈感啟發(fā)

無(wú)論你是網(wǎng)站設(shè)計(jì)遇到瓶頸，又或是擔(dān)心自己沒有足夠的靈感完成整個(gè)建站過程，小編都建議你先多多鉆研和借鑒，畢竟靈感來(lái)源于借鑒，在換角度分析及對(duì)比中，相信你會(huì)有不少收獲。這里有7款吸人眼球的網(wǎng)站設(shè)計(jì)實(shí)例，你可以從中獲取靈感：

1. Product Hunt －社區(qū)類

2. Shopify－電商類

3. So Stereo－音樂類

4. StyleXstyle－時(shí)尚類

5. edX－教育類

6. Fedena－軟件類

7. Valet－企業(yè)類

8. Basecampe－管理類

步驟二，設(shè)計(jì)原型構(gòu)建

在初期的創(chuàng)意靈感與發(fā)現(xiàn)階段，我們會(huì)不時(shí)運(yùn)用各種手段去追蹤和記錄各式各樣富有創(chuàng)造力的想法，諸如草圖、圖表、紙模型等低保真原型就能很好地達(dá)到目的。在創(chuàng)意及靈感產(chǎn)生后，我們就需要在以上工作的基礎(chǔ)上進(jìn)一步細(xì)化設(shè)計(jì)工作和策略，其中最核心的部分為網(wǎng)頁(yè)原型或框架設(shè)計(jì)，這是模擬用戶典型使用場(chǎng)景及與PM/網(wǎng)站開發(fā)工程師溝通最好的形式。

上面列舉的設(shè)計(jì)原型例子便是使用Mockplus制作，它是一款快速簡(jiǎn)單的網(wǎng)頁(yè)原型設(shè)計(jì)工具，無(wú)代碼、功能全面且易用、能夠滿足大部分設(shè)計(jì)需求。話不多說(shuō)，一起來(lái)看看具體的設(shè)計(jì)技巧及應(yīng)用場(chǎng)景吧：

1. 多種交互命令及狀態(tài)：

·鼠標(biāo)懸停顯示內(nèi)容

網(wǎng)頁(yè)設(shè)計(jì)中，鼠標(biāo)懸停是經(jīng)常使用到的交互，Mockplus的狀態(tài)交互很好地解決了這個(gè)問題，只需在顏色、邊框、文字等有狀態(tài)交互的屬性旁邊點(diǎn)擊一個(gè)“閃電”圖標(biāo)，就能輕松設(shè)置鼠標(biāo)經(jīng)過時(shí)或鼠標(biāo)點(diǎn)下時(shí)的屬性。

［鼠標(biāo)懸停狀態(tài)］

·頁(yè)面切換時(shí)的動(dòng)效

這種交互在App設(shè)計(jì)中也比較常見，例如Starbucks的App中，采用了一些小插畫和特別的交互動(dòng)效，尤其頁(yè)面切換后會(huì)出現(xiàn)趣味小動(dòng)畫，這在Mockplus中可以使用“載入時(shí)”觸發(fā)方式實(shí)現(xiàn)。

［載入時(shí)觸發(fā)命令］

2. 大量封裝的組件庫(kù)，及可收藏的組件庫(kù)：

·漢堡菜單

作為常見的網(wǎng)頁(yè)設(shè)計(jì)UI元素，漢堡菜單在網(wǎng)頁(yè)手機(jī)端比較常見，這里可以通過Mockplus中可以自由編輯的彈出面板制作，添加任意元素。比如這款A(yù)PP中頂部的操作引導(dǎo)說(shuō)明。

［彈出面板組件］

·懸浮導(dǎo)航欄、橫向拖動(dòng)展示

隨著卡片式設(shè)計(jì)的流行，越來(lái)越多的網(wǎng)站會(huì)用到大量的圖片，其中圖片的橫向滾動(dòng)可以用Mockplus的滾動(dòng)區(qū)來(lái)輕松實(shí)現(xiàn)。

［滾動(dòng)區(qū)組件］

3. 高效可復(fù)用的元素

·重復(fù)的布局及圖片

尤其在新聞及美食類設(shè)計(jì)中，重復(fù)的布局及圖片很常見，這里可以將Mockplus的格子和數(shù)據(jù)填充功能配合使用，達(dá)到省時(shí)且美觀的效果。

［格子＋數(shù)據(jù)自動(dòng)填充］

4. 豐富的UI圖標(biāo)

·圖標(biāo)－涵蓋社交、多媒體、自然、運(yùn)動(dòng)、品牌等分類

［3000+UI圖標(biāo)］

此外，還有更多好看又實(shí)用的原型項(xiàng)目例子，可以戳這里免費(fèi)預(yù)覽及下載使用。

步驟三，可用性測(cè)試

顯而易見，可用性測(cè)試并不是原型設(shè)計(jì)的終極目標(biāo)，但它是整個(gè)設(shè)計(jì)流程中最主要的環(huán)節(jié)之一，尤其在倡導(dǎo)以用戶體驗(yàn)為中心的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)風(fēng)靡的時(shí)代，我們更應(yīng)該做好功能及顯示結(jié)果的測(cè)試，在Mockplus中支持8種不同的原型預(yù)覽與測(cè)試方式，具體可以觀看視頻：

步驟四，網(wǎng)站搭建

現(xiàn)在市面上有很多付費(fèi)或者免費(fèi)的網(wǎng)站搭建及內(nèi)容管理（CMS）工具，這些工具可以幫助設(shè)計(jì)師及后端開發(fā)人員輕松完成工作，下面介紹首選的幾款工具，無(wú)代碼、容易上手。

1. CloudPress

適用對(duì)象：個(gè)人

這款工具可以幫助創(chuàng)建響應(yīng)式WordPress網(wǎng)站，無(wú)需代碼或開發(fā)技能即可使用。官方博客中目前已發(fā)表了80多篇使用教程文字，從頁(yè)面設(shè)計(jì)的使用細(xì)節(jié)，到字體色彩、排版及各種尺寸、特效都有涵蓋。

2. Bubble

適用對(duì)象：個(gè)人/企業(yè)

Bubble可用于創(chuàng)建網(wǎng)頁(yè)或移動(dòng)端的應(yīng)用，只需要拖拽各種不同的元素或者控件到界面，就可以進(jìn)行在線設(shè)計(jì)。包括文本、地圖、視頻、按鈕等各種各樣的元素類型。

3. XPRS

適用對(duì)象：個(gè)人

這款網(wǎng)站搭建工具像樂高積木一樣簡(jiǎn)單好玩兒，沒有復(fù)雜、混亂及昂貴的開發(fā)過程，可以利用集成的模板和編輯環(huán)境，創(chuàng)建出自己最理想的網(wǎng)站樣子，讓夢(mèng)想照進(jìn)現(xiàn)實(shí)。

4. HTML to WordPress

適用對(duì)象：個(gè)人/企業(yè)

顧名思義，這款工具可以將你的靜態(tài)HTML網(wǎng)站轉(zhuǎn)化為WordPress主題，尤其適合于需要更新、切換或者遷移網(wǎng)站的小伙伴，無(wú)需編碼、手動(dòng)上傳后便自動(dòng)生成網(wǎng)站。

結(jié)語(yǔ)

雖然小編將設(shè)計(jì)一款高人氣的網(wǎng)站大致分為四步，但實(shí)際設(shè)計(jì)過程往往更復(fù)雜，通常需要團(tuán)隊(duì)中多人協(xié)作編輯，比如在線批注及原型共享，Mockplus最近發(fā)布了企業(yè)版，不僅是團(tuán)隊(duì)功能的升級(jí)，更迎合了企業(yè)分級(jí)管理、查看的需求，有興趣可以到官網(wǎng)下載了解下 。