兩周沒寫關(guān)于網(wǎng)頁設(shè)計(jì)的教程了，不過能幫到那么多渴望學(xué)習(xí)的網(wǎng)頁設(shè)計(jì)師們，還是覺得挺開心的。言歸正傳，
本次教程的主題定了"從產(chǎn)品需求分析網(wǎng)頁改如何設(shè)計(jì)”，從一些案例上提取設(shè)計(jì)手法，提高大家對于任意設(shè)計(jì)需求
的分析把握能力，幫助大家提高過稿率。如有分析的不夠齊全的，或者不太專業(yè)的，還謂大家見諒，希望大家取其精華。

網(wǎng)頁設(shè)計(jì)解決方案

01. 產(chǎn)品本身屬性出發(fā)，即產(chǎn)品的顏色、材質(zhì)、受眾、形狀、品牌特質(zhì)等
02. 活動(dòng)主題類，以對應(yīng)的主題氛圍構(gòu)造畫面，具有很強(qiáng)的帶入感
03. 客戶提供的需求參考，比如會要求你參考一些他軎歡的網(wǎng)站

這三種解決方向不存在唯一性，存在多選性。以產(chǎn)品本身屬性出發(fā)適合絕大多數(shù)的設(shè)計(jì)。活動(dòng)主題比如
電商促銷、傳統(tǒng)節(jié)日，那么起主題氛圍會引導(dǎo)設(shè)計(jì)方向，產(chǎn)品本身屬性會降低影響力?？蛻糁饔^要求一
般分為兩類，一類是和產(chǎn)品本身類似或者符合的，另外一類則是大不同的，怎么樣處理，謂看下面內(nèi)容
詳解。

接下來會以這三種實(shí)踐設(shè)計(jì)需求的方向，以對應(yīng)案例去一一敘述，

從產(chǎn)品本身屬性出發(fā)

A、利用產(chǎn)品顏色構(gòu)建網(wǎng)頁色調(diào)

1、Nlkesb.com Archive板塊-利用每一款鞋子的顏色作為大背景的底色，配合對應(yīng)的鞋款，構(gòu)建了整
個(gè)畫面視覺。箭頭切換，則出現(xiàn)不同款式的鞋子，以及對應(yīng)的顏色.

2、PODEBRADKA首頁模塊-利用不同的服裝顏色做為每一個(gè)產(chǎn)品的背景色。組合排版在一起，使產(chǎn)
品的豐富感，畫面信息也顯得很飽滿，鍺落有致。

1和2設(shè)計(jì)使用的是同樣的思路，即利用產(chǎn)品以及產(chǎn)品配色搭建整體畫面。這種方法時(shí)常會用在產(chǎn)品展
示的時(shí)候，不同的產(chǎn)品視覺顏色不同，在保持頁面內(nèi)容性質(zhì)一致的同時(shí)，能讓產(chǎn)品區(qū)分的更加明顯，產(chǎn)
品京有代表性的特點(diǎn).

B:利用產(chǎn)品成分(來源)或者材質(zhì)

1、livSo首頁板塊-一款主打健康的護(hù)發(fā)素產(chǎn)品。利用其產(chǎn)品的生產(chǎn)成分：燕麥，椰果等等，把產(chǎn)品
的健康主題，打造的既直接，又飽滿。

2、Nutri _ orange flavour海報(bào)-利用飲料里的果汁來源的自然場景，把產(chǎn)品純凈新鮮的特性表現(xiàn)的
淋漓盡致。

3、滿漢Gallery Mitsumi首頁板塊-布藝。以布紋材質(zhì)、搭配藝術(shù)圖案，放大局部效果。視覺傳遞出
滿滿的柔軟觸摸感和藝術(shù)美感。

4、魅族手機(jī)PR06PIUS模塊-利用手機(jī)外觀的金屬材質(zhì)感，光影、明暗對比呈現(xiàn)出一種透亮，光滑的
感覺。工藝的精細(xì)度，刻畫的很飽滿，

如果說1和2以成分屬性去打造畫面是屬于內(nèi)涵，那么3和4則是工藝類產(chǎn)品借外觀來呈現(xiàn)精度的最佳
方式（通常會以放大產(chǎn)品局部，畫面占比很高，來表達(dá)產(chǎn)品細(xì)節(jié)），

C:利用獨(dú)特的應(yīng)用場景體現(xiàn)產(chǎn)品特性

1、JEEP wrangler off road _ Behance—位大神的作品。Jeep越野車所處的惡劣沙漠環(huán)境，很自然的
就把JEEP車“越野”的特性表現(xiàn)的很到位，有種踏平一切路況的葙氣^

2、深海2017首頁模塊-這是日本國立科學(xué)博物館探索研究海洋生物項(xiàng)目官網(wǎng)t以探索海底的潛水艇
為線索，往下是各種深海生物的呈現(xiàn)，通過這樣從淺到深的方式展現(xiàn)"深?！表?xiàng)目，充滿了探索的好奇
和期待感。

3、杜蕾斯創(chuàng)意海報(bào)-通過人物肢體語言動(dòng)作含義，以及所處的環(huán)境。很容易讓瀏覽者腦洞打幵，

Make love的感覺很濃烈，這是利用場累表達(dá)產(chǎn)品最具有想象力的海報(bào)了。

應(yīng)用場累很容易抓住產(chǎn)品的特性，通過瀏覽者的想象力形成的場累印象，即使沒有文案，都知道其表達(dá)
的含義《有種無聲勝有聲的感覺#



D:利用產(chǎn)品的受眾范圍，來規(guī)劃內(nèi)容或設(shè)計(jì)元素等

1、n丨di首頁板塊-直接以產(chǎn)品的面向人群規(guī)劃了KIDS以及TEENS欄目。其優(yōu)點(diǎn)在于信息整合歸類,
減少干擾。不同的受眾，其表現(xiàn)的元素會有所不同，從而讓瀏覽者能從適合自身的模塊，逬行篩選。

2、蘑菇街、美妝心得APP板塊-花姐選了兩款女性為受眾的APP。從配色到內(nèi)容的視覺呈現(xiàn)，到框
體的圓角處理，Icon的設(shè)計(jì)方式。都完美結(jié)合了“女性”視角的主觀體驗(yàn)，滿滿的少女心。

案例1來說是比較直白的欄目以受眾規(guī)劃，逬行信息整合歸類。2則是把產(chǎn)品的受眾視角完美結(jié)合到整
體app的視覺里。如果說1是外表直觀可見，2則是骨子里蘊(yùn)含的基調(diào)。

E:利用產(chǎn)品用途勾勒畫面主視覺

1、GIFT首頁板塊-直接以理發(fā)剪剪頭發(fā)的場景占滿整個(gè)主視覺。其產(chǎn)品功能躍于畫面上，非常簡潔
明了，產(chǎn)品訴求直白而莫誠。

2、瑪麗黛佳化妝品海報(bào)-MARIE DALGAR這款化妝品蕞大的功能“補(bǔ)水”，在視覺設(shè)計(jì)的時(shí)候直接用
了水元素變形，瀏覽者第一視覺即知道該產(chǎn)品用途。

3、Milk Life海報(bào)-Milk Life可以給你插上翅膀，讓你跳得更高、更美。其產(chǎn)品功能“讓身體更健康、
強(qiáng)壯”,用一種創(chuàng)窻的手法比喻。

案例1、2比較直白，3則是以比喻手法，其共通點(diǎn)走的都是產(chǎn)品的功能用途來作為視覺的創(chuàng)患呈現(xiàn)。

F:利用產(chǎn)品外觀元素（結(jié)構(gòu)）做延伸

1、flourish首頁板塊-利用產(chǎn)品的外包裝圖案，延伸做畫面的大背景。畫面從整體搭配細(xì)節(jié)保持統(tǒng)
一，使得產(chǎn)品和畫面結(jié)合度很高，給瀏覽者很深的視覺印象。

2、MICE首頁模塊-作品來源于站酷大神的一則練習(xí)稿。畫面很獨(dú)特，引人注恵的點(diǎn)在于，以飛機(jī)的
窗戶為線索，通過不同身份的人物特寫，有畫龍點(diǎn)睛之筆，

3、蘇泊爾家電首頁板塊-利用產(chǎn)品的模具（畫面里是水龍頭）作為文字組合的輪廊。借瀏覽者的想
象力，展示產(chǎn)品的同時(shí)，把文案做的趣味化，

這類方法通常是以產(chǎn)品的元素（結(jié)構(gòu)）作為畫面某一部分的視覺展示。比如案例1的大背累，以及案例
2和3的內(nèi)容板塊。比重也許不高，但是往往會讓人印象深刻。