設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。(4)

來(lái)源:站酷 作者:Brandsh_Sam 學(xué)習(xí):2420人次

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

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

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

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

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

 

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

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

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

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

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

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

 

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

Step2. 頁(yè)面排版

1)線框圖

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

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

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

 

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

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

 

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

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

 

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。
整合固定寬度與響應(yīng)式設(shè)計(jì)的優(yōu)缺點(diǎn),結(jié)合二者優(yōu)勢(shì),最后決定為每個(gè)設(shè)備進(jìn)行獨(dú)立設(shè)計(jì),可優(yōu)化設(shè)計(jì)視覺(jué)效果,同時(shí)提升最終網(wǎng)站用戶體驗(yàn)。

3)網(wǎng)格

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

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

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

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

 

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

 

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

 

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

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

Step3.字體編排與層級(jí)關(guān)系

1)字體編排

一個(gè)標(biāo)題,究竟用什么字體?用多大字號(hào)?橫排還是豎排?這些是由整體版面氣質(zhì)和文字表述的內(nèi)容所共同決定的,我們要深刻理解文字到底在說(shuō)些什么,才能為我們選擇字體字號(hào)提供依據(jù),才能讓文字的視覺(jué)感受與表述內(nèi)容保持統(tǒng)一,才能為我們選擇合適的插圖提供指導(dǎo)方向。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

2)層級(jí)關(guān)系

文字層級(jí)在溝通中扮演著重要角色,不僅將用戶引向期望中的結(jié)果,還能改善用戶體驗(yàn)。網(wǎng)頁(yè)應(yīng)用總有繁復(fù)的文字層級(jí),若區(qū)分不夠鮮明,各級(jí)文字相互較勁,會(huì)使用戶不知所措、迷失其中。為了更好地區(qū)分文字的層級(jí),你需要對(duì)“用戶希望如何剖析”信息有所了解。在缺乏可用性測(cè)試的情況下,可以假設(shè)用戶第一眼會(huì)看到標(biāo)題,然后閱讀正文,接下來(lái)如果他們感興趣,則會(huì)點(diǎn)擊網(wǎng)站鏈接。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

Step4.優(yōu)化設(shè)計(jì)細(xì)節(jié)

網(wǎng)頁(yè)細(xì)節(jié)設(shè)計(jì)優(yōu)秀,很大一定程度上決定了網(wǎng)頁(yè)的瀏覽量和所體現(xiàn)的價(jià)值。很多朋友在設(shè)計(jì)初期,總希望在idea上贏得客戶,但是僅僅一個(gè)創(chuàng)新點(diǎn)遠(yuǎn)遠(yuǎn)不夠。任何創(chuàng)意,只要有亮點(diǎn),馬上會(huì)被山寨。但是,如果你有足夠的信心把握好用戶的心理和體驗(yàn),那么即使別人山寨你的創(chuàng)意,做到你的功能,但是你的細(xì)節(jié),你的思想,會(huì)遠(yuǎn)遠(yuǎn)高于他們的創(chuàng)意風(fēng)格。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

單一的文字總會(huì)讓用戶產(chǎn)生視覺(jué)疲勞,不愿繼續(xù)瀏覽下去。若在文字中加入視覺(jué)震撼的圖片,不僅可讓用戶產(chǎn)生觀看欲望,還能優(yōu)化整體版面的效果。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

Step5.設(shè)計(jì)總結(jié)

設(shè)計(jì)過(guò)程可能不是那么一帆風(fēng)順,或許會(huì)走很多彎路,遇到各類艱難險(xiǎn)阻。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

但當(dāng)你克服這些問(wèn)題,最終設(shè)計(jì)成客戶期望的效果,并且讓用戶感受到舒適新穎的交互式體驗(yàn),其努力之后的成就感是不言而喻的。

設(shè)計(jì)案例!說(shuō)說(shuō)品牌網(wǎng)站設(shè)計(jì)細(xì)節(jié)的重要性。

由此可見(jiàn),網(wǎng)頁(yè)設(shè)計(jì)的精髓在于多樣的創(chuàng)意風(fēng)格,合理的技術(shù)實(shí)現(xiàn),精致的細(xì)節(jié)打磨和優(yōu)秀的用戶體驗(yàn),最終才能找到一個(gè)完美契合點(diǎn)展現(xiàn)精致美觀且簡(jiǎn)易優(yōu)化的網(wǎng)頁(yè)效果。

 

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
用戶30221236392019-02-18 10:06
加油
安藝興辰2018-06-08 02:30
加油
嘆世2018-02-27 11:03
66666
骨頭收集狂2017-05-28 03:05
66666
皇帝的新裝2017-05-28 02:28
和女友啪啪完,把套套丟在床邊,被我家狗狗給吃了。第二天發(fā)現(xiàn)它便秘拉不出來(lái),帶它去醫(yī)院,當(dāng)醫(yī)生從狗狗菊花里取出套套后說(shuō)了句:居然插的這么深!你難道不考慮它的感受么?然后看我的眼神,我這輩子都忘不了。
皇帝的新裝2017-05-28 02:28
和女友啪啪完,把套套丟在床邊,被我家狗狗給吃了。第二天發(fā)現(xiàn)它便秘拉不出來(lái),帶它去醫(yī)院,當(dāng)醫(yī)生從狗狗菊花里取出套套后說(shuō)了句:居然插的這么深!你難道不考慮它的感受么?然后看我的眼神,我這輩子都忘不了。
葒荼綠茶2017-05-28 05:11
學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)
葒荼綠茶2017-05-28 05:11
學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!