一件好的商業(yè)設(shè)計成品，不僅好看，而且還好用，用戶感受各種好，后期廣告才有真正價值。每件素材的選擇，每個顏色的搭配，每張圖片的挑選，我們要確保我們導(dǎo)出的每顆像素都是有依據(jù)的。

下面就通過我們的案例，告訴大家每個工作細(xì)節(jié)的重要性。

Step1. 設(shè)計方向與網(wǎng)站結(jié)構(gòu)確認(rèn)

1) 確定設(shè)計目標(biāo)。

針對客戶紛繁復(fù)雜的項目要求，首先要與客戶進(jìn)行良好溝通，從需求中提取精華，準(zhǔn)確完善客戶需求，以此制定設(shè)計方案。

 

通過與客戶的方案交流和對同類設(shè)計網(wǎng)站風(fēng)格、樣式、優(yōu)缺點的比較，最終確定頁面必須兼容：現(xiàn)代、國際化、親和力和瑞士風(fēng)格。

 

2) 網(wǎng)站結(jié)構(gòu)確立

首先將內(nèi)容劃分為清晰合理的層次體系，欄目的劃分及其關(guān)系、網(wǎng)頁的層次及其關(guān)系、鏈接的路徑設(shè)置、功能在網(wǎng)頁上的分配等等，以此為根據(jù)確定網(wǎng)頁的設(shè)計結(jié)構(gòu)。

 

3) 設(shè)計靈感采集

在網(wǎng)站設(shè)計前期需收集大量的設(shè)計類網(wǎng)站資源，在圖片庫中搜索視覺沖擊感比較強(qiáng)的圖片，

從中提取設(shè)計元素作為參考。還可以分析同行相關(guān)的設(shè)計網(wǎng)站或競品網(wǎng)站，針對風(fēng)格，樣式以及優(yōu)缺點取長補(bǔ)短。

 

以下是設(shè)計師靈感來源的幾個網(wǎng)站，提供給大家參考。（每個網(wǎng)站都極具參考價值哦~可從我們公眾號“查看歷史消息”中找到這篇內(nèi)容）

 

Step2. 頁面排版

1) 線框圖

線框圖通過安排和選擇界面元素來整合界面設(shè)計，可以確定一個建立在基本概念結(jié)構(gòu)上的架構(gòu)，同時指出視覺設(shè)計應(yīng)該前進(jìn)的方向。

 

2) 固定寬度&響應(yīng)式（以IOS系統(tǒng)為例）

首先科普下固定寬度和響應(yīng)式的具體概念。

固定寬度：固定網(wǎng)頁布局指網(wǎng)站內(nèi)容被一個固定寬度的容器包裹，容器內(nèi)的區(qū)塊都有固定的百分比或者像素寬度值，不管屏幕分辨率如何變化，訪客看到的都是固定寬度的內(nèi)容。

響應(yīng)式：頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，跟隨屏幕大小的變化而變化。

 

整合固定寬度與響應(yīng)式設(shè)計的優(yōu)缺點，結(jié)合二者優(yōu)勢，最后決定為每個設(shè)備進(jìn)行獨立設(shè)計，可優(yōu)化設(shè)計視覺效果，同時提升最終網(wǎng)站用戶體驗。

 

3) 網(wǎng)格

網(wǎng)格是用豎直或水平分割線將布局進(jìn)行分塊，把邊界、空白和欄包括在內(nèi)，以提供組織內(nèi)容的框架。網(wǎng)格可以輔助我們設(shè)計結(jié)構(gòu)統(tǒng)一，畫面更為整潔。

 

然而，我們應(yīng)該勇敢地向網(wǎng)格以外的地方冒險，要創(chuàng)造一個基于網(wǎng)格的作品，不意味著任何東西都要對齊。

越出網(wǎng)格邊界的元素會讓作品看起來更加簡潔和流暢。

 

確定了具體設(shè)計方向與頁面排版，接下來我們將優(yōu)化細(xì)節(jié)設(shè)計，包括字體運用與產(chǎn)品布局，大家記得下周繼續(xù)關(guān)注哦~

優(yōu)秀的網(wǎng)頁設(shè)計不僅展現(xiàn)出良好的視覺效果，還要在用戶體驗方面表現(xiàn)出強(qiáng)大的實用性。

感謝設(shè)計團(tuán)隊及開發(fā)團(tuán)隊的日夜奮戰(zhàn)，同時也感謝客戶的配合、信賴才讓我們不斷突破！