創(chuàng)新互聯(lián)分享：頁(yè)面設(shè)計(jì)技巧,助你搞定整頁(yè)專題設(shè)計(jì)

頁(yè)面特性：產(chǎn)品頁(yè)面簡(jiǎn)潔易用，專題頁(yè)面絢麗視效印象深刻。

在頁(yè)面設(shè)計(jì)的中間，產(chǎn)品頁(yè)面（如臉譜網(wǎng)的微博、微博等）的設(shè)計(jì)。注重功能，交互設(shè)計(jì)應(yīng)考慮用戶長(zhǎng)時(shí)間瀏覽體驗(yàn)。視覺(jué)焦點(diǎn)的間距，布局，按鈕和標(biāo)志，和風(fēng)格的圖標(biāo)。注意規(guī)范和視覺(jué)識(shí)別。風(fēng)格簡(jiǎn)潔易用，通常不太華麗的元素，不強(qiáng)調(diào)視覺(jué)沖擊力。
專題頁(yè)面時(shí)效性有限（大部分項(xiàng)目是一個(gè)推廣活動(dòng)，時(shí)間限制，過(guò)了這段時(shí)間，他們很少再訪問(wèn)該頁(yè)面。），為活動(dòng)推廣，吸引更多的用戶，要在有限的時(shí)間內(nèi)，形成強(qiáng)大的促銷吸引最多的用戶，需要強(qiáng)烈的視覺(jué)效果，并有趣的瀏覽體驗(yàn)，吸引用戶的特色。在規(guī)范和布局，甚至相互作用可以適當(dāng)延長(zhǎng)。

用搶眼的視覺(jué)吸引戶并留下深刻印象是專題設(shè)計(jì)的首要!

傳統(tǒng)產(chǎn)品頁(yè)面，簡(jiǎn)潔注重功能和圖標(biāo)等視覺(jué)設(shè)計(jì)。

專題頁(yè)面突出視覺(jué)效果，華麗豐富

微博專題多為各種微博活動(dòng)和推廣內(nèi)容設(shè)計(jì)。內(nèi)容較多，在設(shè)計(jì)好頭圖這種主視覺(jué)的同時(shí)，大量?jī)?nèi)容和欄目的排版布局也要注意。針對(duì)專題視覺(jué)設(shè)計(jì)的特點(diǎn)著手，才能實(shí)際出優(yōu)秀的頁(yè)面。

設(shè)計(jì)專題

確立UE，溝通需求。需求方的UE稿(產(chǎn)品文檔)是專題設(shè)計(jì)的前提，需要設(shè)計(jì)師和需求方一起進(jìn)行溝通。設(shè)計(jì)師可以在早期就對(duì)專題需求提出自己的創(chuàng)意和方案，再由需求方形成UE稿。設(shè)計(jì)師再根據(jù)設(shè)計(jì)稿進(jìn)行設(shè)計(jì)。由于專題設(shè)計(jì)往往沒(méi)有專門的交互設(shè)計(jì)支持，很多時(shí)候，UE稿只明確了該專題所要展現(xiàn)的內(nèi)容，設(shè)計(jì)師需要自己對(duì)UE進(jìn)行一些交互上的調(diào)整和優(yōu)化。(要注意對(duì)UE的優(yōu)化設(shè)計(jì)往往是遞進(jìn)式的，貫穿設(shè)計(jì)專題的整個(gè)過(guò)程，未必一蹴而就的去翻新整個(gè)專題UE)。

專題結(jié)構(gòu)

大多數(shù)的專題結(jié)構(gòu)可分為頭圖部分和內(nèi)容部分，傳統(tǒng)的專題一般只有一個(gè)主頁(yè)面，復(fù)雜的則有若干的二級(jí)頁(yè)面組成，視專題的規(guī)模而定。一些特別的專題則有著特殊的表現(xiàn)方式，包括類似用flash制作 minisite，以及一些異形的特殊專題。采用何種結(jié)構(gòu)要看誰(shuí)能更好的服務(wù)于需求。

特殊結(jié)構(gòu)形式的專題，頭圖即為封面，專題的體驗(yàn)類似翻書(shū)

專題尺寸

微博項(xiàng)目通常有更多的內(nèi)容，使得頁(yè)面的高度太高，（很多項(xiàng)目到3000像素的高度）。當(dāng)設(shè)計(jì)時(shí)需要適當(dāng)縮短柱間距，盡可能降低頁(yè)面高度。頁(yè)面的寬度項(xiàng)目作為微博主站同樣是950像素，采用這個(gè)寬度是為了最廣泛的是顯示分辨率兼容（1024像素×768像素），但由于特殊的設(shè)計(jì)更加注重視覺(jué)效果，而且有很多年輕的用戶（年輕用戶往往是項(xiàng)目的核心）的顯示分辨率已經(jīng)超過(guò)1024像素是非常多的，所以我經(jīng)常將確保項(xiàng)目的主要視覺(jué)在950像素，而且

設(shè)計(jì)的頭圖將顯示效果在1600像素的寬度時(shí)，做的最好的。
600像素的定義是我們對(duì)微博項(xiàng)目的第一個(gè)屏幕高度，第一個(gè)屏幕就可以看到，也就是廣大用戶。在這方面，我通常做頭像的比例約為280像素400像素，目的是為了突出主視覺(jué)的特點(diǎn)同時(shí)也要讓用戶在第一個(gè)屏幕上可以瀏覽到項(xiàng)目的一部分。（通常產(chǎn)品頁(yè)面頭的視覺(jué)高度要小得多，產(chǎn)品取決于功能頁(yè)面本身。）
設(shè)計(jì)頭圖
經(jīng)過(guò)一個(gè)結(jié)構(gòu)設(shè)計(jì)，下一步的造型設(shè)計(jì)，優(yōu)秀的頭部形象是項(xiàng)目設(shè)計(jì)的靈魂。
設(shè)計(jì)負(fù)責(zé)人首先要考慮的是一個(gè)頭的人物設(shè)計(jì)風(fēng)格，根據(jù)不同的主題，選擇不同風(fēng)格的視覺(jué)設(shè)計(jì)。我通常會(huì)提前或在紙上畫(huà)一個(gè)大腦的輪廓，可能有些項(xiàng)目沒(méi)有表示的視覺(jué)元素，從項(xiàng)目的文本，所以如果你沒(méi)有感覺(jué)，可以組裝項(xiàng)目第一次在畫(huà)布上相關(guān)的一些元素，然后嘗試不同的組合，也許能在一分鐘內(nèi)的火花。
頭圖風(fēng)格
頭像在微博上的設(shè)計(jì)風(fēng)格大致分為：現(xiàn)實(shí)的、卡通的插畫(huà)、頭條的突出等現(xiàn)實(shí)的頭像需要弄清楚什么涉及到版權(quán)，所以真正的類風(fēng)格，大多在兩個(gè)之后。如果設(shè)計(jì)風(fēng)格的需求，我喜歡在設(shè)計(jì)中把頭部的形象畫(huà)成一些視覺(jué)元素，減少材料的使用。

寫(xiě)實(shí)風(fēng)格頭圖，多由人物構(gòu)成。

卡通繪制類頭圖。

大標(biāo)題為主的頭圖。

頭圖構(gòu)圖

在某種程度上，專題頭圖的設(shè)計(jì)有點(diǎn)類似一個(gè)更大的banner，但也有著很多的不同。它需要考慮如何巧妙的與下面的內(nèi)容銜接，而且尺寸更大，細(xì)節(jié)更多，構(gòu)圖可以變化，如果只是千篇一律的采用規(guī)則的構(gòu)圖，會(huì)讓專題顯得單調(diào)，呆板，視覺(jué)效果不好。

圓弧形的割頭圖和內(nèi)容區(qū)域的構(gòu)圖

頭圖標(biāo)題

好的專題頭圖，除了有精美的視覺(jué)元素外，頭圖的大標(biāo)題要重點(diǎn)強(qiáng)調(diào)，它通常需要設(shè)計(jì)師花費(fèi)專門的精力來(lái)制作字體的變形和特效。好的字體效果其實(shí)可以成為專題的主視覺(jué)，成為最亮眼的一部分，同時(shí)也是最直接體現(xiàn)專題主旨的方式。

手繪設(shè)計(jì)的頭圖大標(biāo)題

一般的頭圖設(shè)計(jì)只是專題視覺(jué)元素的體現(xiàn)，而有的頭圖本身就承載專題內(nèi)容，這要視專題的內(nèi)容和需求而定。即便如此還是要注意在樣式上美觀。

頭圖本身即承載內(nèi)容功能

頭圖部分的設(shè)計(jì)是整個(gè)專題的重點(diǎn)，也是專題最需要突出的亮點(diǎn)，頭圖可以確立整個(gè)專題的基調(diào)。

優(yōu)秀的頭圖應(yīng)該緊貼專題內(nèi)容，美觀，吸引用戶停留。

專題內(nèi)容區(qū)的設(shè)計(jì)

形式多樣，巧妙銜接

內(nèi)容區(qū)與頭圖的銜接要巧妙，忌生硬。形式可以有很多變化，與專題整體的視覺(jué)要素結(jié)合，或可以繼承頭圖中的視覺(jué)元素，設(shè)計(jì)出不同的樣式，讓內(nèi)容區(qū)的展現(xiàn)更生動(dòng)。讓專題頁(yè)面的視覺(jué)效果更佳的統(tǒng)一，整體~!

用桌布菜單來(lái)打造餐飲專題的結(jié)合部分。

桌布托起頭圖，本身也成為內(nèi)容的背景。

內(nèi)容清晰，布局合理

雖然是突出視覺(jué)樣式的專題設(shè)計(jì)，但讓用戶能夠關(guān)注專題內(nèi)容還是基本。不能因注重頭圖的設(shè)計(jì)而有所怠慢，不一定要遵守柵格化的理論，但通常為了后續(xù)的制作方便我通常以5px的倍數(shù)進(jìn)行間隔區(qū)分，個(gè)別情況可以例外，只要間距在視覺(jué)上保持規(guī)整即可。除了一些”PK性質(zhì)”的專題模塊，要注意模塊欄目分布的權(quán)重，內(nèi)容的主次要清晰，排布在邏輯上有關(guān)聯(lián)性。

特色模塊，視覺(jué)突出

一些重點(diǎn)突出的模塊要和其他欄目模塊做區(qū)別設(shè)計(jì)，做到突出而不突兀。標(biāo)題欄和模塊的細(xì)節(jié)也應(yīng)該注重視覺(jué)效果，較產(chǎn)品頁(yè)面而言可以做一些修飾，但不可喧賓奪主。

為獲獎(jiǎng)模塊設(shè)立單獨(dú)的樣式。

標(biāo)題欄的也可以根據(jù)主題設(shè)計(jì)細(xì)節(jié)

專題二級(jí)頁(yè)和系列專題

通常二級(jí)頁(yè)面的頭圖都是復(fù)用主頁(yè)，但也要適當(dāng)?shù)臑槊總€(gè)頁(yè)面增加視覺(jué)元素予以一定的區(qū)別。要注意的是增加的樣式也不易過(guò)繁，因?yàn)轭^圖的存在會(huì)顯得凌亂。

為不同的二級(jí)頁(yè)面設(shè)計(jì)區(qū)別的視覺(jué)元素。如果需要打造系列專題，就要注意規(guī)劃設(shè)計(jì)復(fù)用元素，比如相同的logo標(biāo)題，和為強(qiáng)調(diào)系列感的統(tǒng)一視覺(jué)風(fēng)格。以此強(qiáng)化用戶的對(duì)系列專題的印象和認(rèn)知。

系列專題的元素logo復(fù)用以及風(fēng)格統(tǒng)一。

專題設(shè)計(jì)細(xì)節(jié)注意的若干點(diǎn)

• 頭圖要有延展性，要注意寬屏分辨率下的顯示特點(diǎn)。
• 專題交互細(xì)節(jié)，為按鈕翻頁(yè)等交互元素設(shè)計(jì)各種狀態(tài)，會(huì)有更好的體驗(yàn)效果。
• 專題自身的視覺(jué)設(shè)計(jì)的延展和統(tǒng)一，包括專題附屬的彈層，對(duì)話框等的細(xì)節(jié)設(shè)計(jì)。
• 交付物的規(guī)范。專題圖層眾多，題設(shè)計(jì)完畢后交付前端的同事時(shí)，應(yīng)該對(duì)圖層進(jìn)行分組。文件體積大就要?jiǎng)h除或隱藏?zé)o用的圖層。

專題設(shè)計(jì)稿提交時(shí)，盡量可能采用不同的圖片，數(shù)目參差的正文，來(lái)替代設(shè)計(jì)稿中的模擬內(nèi)容，這樣有時(shí)夠發(fā)現(xiàn)一些忽略的問(wèn)題(如文字過(guò)多溢出，以此來(lái)進(jìn)一步調(diào)整間距等，重要是可讓他看上去更像是一個(gè)即將上線的真實(shí)頁(yè)面，更好的展現(xiàn)你設(shè)計(jì)的最面貌。有時(shí)會(huì)覺(jué)得多此一舉且低效，但這能讓我們顯得更專業(yè)。

良好的溝通：設(shè)計(jì)師可以提出更好的風(fēng)格意見(jiàn)，視覺(jué)創(chuàng)意，然而滿足需求方的推廣需求才是前提，所以通過(guò)良好的溝通加深對(duì)專題需求的理解，可以更準(zhǔn)確的把握專題需求，避免返工等問(wèn)題出現(xiàn)。

字體的問(wèn)題。受瀏覽器的限制的，目前微博專題的主要字號(hào)還是14和12號(hào)的宋體(設(shè)備字體)

做正文基本可以保證清晰銳利，但如果用來(lái)做標(biāo)題欄時(shí)候就不那么美觀了。這時(shí)應(yīng)該和需求方、前段的同事溝通，在不頻繁更改文案的情況下盡量使用圖片來(lái)制作標(biāo)題欄的文字效果，達(dá)到應(yīng)有的視覺(jué)效果。前端的規(guī)范與限制，如果需要復(fù)雜的圓角和半透明頁(yè)面效果，最為穩(wěn)妥的方法是為設(shè)計(jì)兩套適應(yīng)高低級(jí)瀏覽器的視覺(jué)解決方案，如果條件不允許，就要看前端同事對(duì)瀏覽器支持的策略，總之前端實(shí)現(xiàn)的問(wèn)題，作為設(shè)計(jì)師應(yīng)該主動(dòng)溝通并推動(dòng)其解決。(這還包括專題上線后的跟蹤反饋。)

好的專題設(shè)計(jì)，有創(chuàng)意，整體效果和諧，用戶印象深刻，內(nèi)容傳達(dá)有效，視覺(jué)元素有延續(xù)和繼承。整個(gè)頁(yè)面銜接不生硬。這都需要設(shè)計(jì)師動(dòng)腦去巧妙構(gòu)思和發(fā)揮，有時(shí)工期緊迫，不能做到事無(wú)巨細(xì)，我也無(wú)法全部按照自己所寫(xiě)這樣去設(shè)計(jì)專題。

但這不妨礙我把它當(dāng)做一個(gè)目標(biāo)去不斷接近?！白非笞吭?，成功自然尾隨而至”——《3 idiots》

單頁(yè)設(shè)計(jì)，簡(jiǎn)單將其比喻為在一張紙上進(jìn)行的創(chuàng)作和設(shè)計(jì)。在設(shè)計(jì)單頁(yè)的專題時(shí)，為了讓首屏到次屏再到內(nèi)容區(qū)間的視覺(jué)更加的連貫和流暢，就要充分利用好局部對(duì)比和整體關(guān)系來(lái)使頁(yè)面效果更加的完整。

來(lái)源：互聯(lián)網(wǎng)的 一些事

/ 單頁(yè)設(shè)計(jì)，簡(jiǎn)單將其比喻為在一張紙上進(jìn)行的創(chuàng)作和設(shè)計(jì)。

/ 電商中的專題設(shè)計(jì)都是單頁(yè)設(shè)計(jì)的一種應(yīng)用。

/ 單頁(yè)最早出現(xiàn)在平面設(shè)計(jì)中，設(shè)計(jì)師通過(guò)用不同尺寸、材質(zhì)的紙張，在僅有的正面和反面上進(jìn)行自由設(shè)計(jì)的過(guò)程，主要用在折頁(yè)、宣傳單、海報(bào)中。

如下圖

圖片來(lái)自花瓣網(wǎng)

/ 電商領(lǐng)域的單頁(yè)設(shè)計(jì)，更像是對(duì)平面單頁(yè)在使用環(huán)境上的升級(jí)，它不僅擁有平面設(shè)計(jì)中的所有設(shè)計(jì)規(guī)律，更有著網(wǎng)站設(shè)計(jì)的很多特點(diǎn)，比如：可以利用新的視差滾動(dòng)和H5的技術(shù)，來(lái)使頁(yè)面與人的交互更密切，也使得用戶在瀏覽頁(yè)面時(shí)，更像是在閱讀一個(gè)故事。

/ 它主要出現(xiàn)在一些促銷類的活動(dòng)頁(yè)面、產(chǎn)品介紹頁(yè)、店鋪首頁(yè)等需求中。

如下圖

整體專題設(shè)計(jì)的“冰糖葫蘆原則”

/ 在設(shè)計(jì)單頁(yè)的專題時(shí)，為了讓首屏到次屏再到內(nèi)容區(qū)間的視覺(jué)更加的連貫和流暢，就要充分利用好局部對(duì)比和整體關(guān)系來(lái)使頁(yè)面效果更加的完整。

01?先是單頁(yè)的點(diǎn)，這里指的是切入點(diǎn)。

/ 專題單頁(yè)中的切入點(diǎn)就是整體頁(yè)面中的主線。

/ 平面理論中的點(diǎn)用來(lái)聚焦、發(fā)散、吸引人們的注意力。

如下圖

去體驗(yàn)》

02?再是單頁(yè)的線，線具有連接、引導(dǎo)的作用。

/ 專題單頁(yè)中的線用于引出故事的情節(jié);

/ 運(yùn)用一些藝術(shù)化的表達(dá)方式，來(lái)給頁(yè)面增加一些趣味性和裝飾性;

如下圖

03、最后是單頁(yè)的面，用于整體風(fēng)格的設(shè)計(jì)。

/ 這里的指的是對(duì)整張頁(yè)面的完成度;

/ 單頁(yè)設(shè)計(jì)不要局限于完成首屏設(shè)計(jì)或者某個(gè)單一元素的設(shè)計(jì)中。

/ 它強(qiáng)調(diào)的是從頭到尾、(首屏到次屏再到內(nèi)容區(qū)，再到最底部)、從局部到整體的一種視覺(jué)聯(lián)系。

下面我們來(lái)看3組優(yōu)秀的設(shè)計(jì)

溫馨提示：》-《 頁(yè)面長(zhǎng)，內(nèi)容多，請(qǐng)隨時(shí)做好去廁所的準(zhǔn)備哈?

接下來(lái)是我整理的10個(gè)專題單頁(yè)的技巧，

主要是一些大的理論點(diǎn)，大家結(jié)合著自己的專題去思考吧。

01、頭圖有個(gè)點(diǎn)，下面設(shè)計(jì)才好接

/ 頭圖元素的設(shè)計(jì)不分楚河和漢界。

/ 不能只抱著做個(gè)頭圖就完事的想法去做單頁(yè)面，要讓頭圖視覺(jué)和下面的內(nèi)容有聯(lián)系。

/ 打破首屏(就是俗稱的頭圖)與次屏在設(shè)計(jì)上有明顯的顏色條分隔、形式分隔、線分隔等。

如下圖紅圈所示的位置就是頭圖的高度所在，一般頭圖的高度值建議在450?600之間，太高了就會(huì)浪費(fèi)空間。

02、承上啟下很重要，頁(yè)面有頭也有尾

/ 所謂的承上啟下，就是說(shuō)頁(yè)面中要有一個(gè)貫穿整體的主要元素，去構(gòu)成整張頁(yè)面的視覺(jué)焦點(diǎn)。

/ 讓元素頭尾呼應(yīng)，上下連貫。

舉個(gè)例子

01.圖中紅圈所示：專題中出現(xiàn)的主要元素如：頭和尾部的元素要在視覺(jué)上做到呼應(yīng)和一致性;

02.圖中黑圈所示：專題中貫穿整體的這個(gè)元素，一定要在整體頁(yè)面中一筆直下，一氣呵成，否則就會(huì)出現(xiàn)斷點(diǎn)的感覺(jué)。如果在實(shí)際需求應(yīng)用中無(wú)法做到整體設(shè)計(jì)的表現(xiàn)，那么也應(yīng)該盡量在局部或者某些元素的運(yùn)用上做到這點(diǎn)。

03、背景顏色要整體，慎用色塊“切豆腐”

/ 盡量不要用色塊進(jìn)行頁(yè)面內(nèi)容的分區(qū)，整體的單頁(yè)設(shè)計(jì)大多用的是單一顏色的背景。

/ 對(duì)于一些平臺(tái)型的活動(dòng)單頁(yè)來(lái)講，我們常看到一些用不同色塊分區(qū)的設(shè)計(jì)。當(dāng)然，這樣的處理方式是為了更好的分出不同的活動(dòng)內(nèi)容，也是做為設(shè)計(jì)的表現(xiàn)形式。

/ 對(duì)于品類專題、店鋪首頁(yè)來(lái)說(shuō)多色塊的分隔顯然整體性會(huì)差一些。

如下圖

01.左圖是整塊的暗藍(lán)色的背景，沒(méi)有任何分區(qū)，整體頁(yè)面看著比較統(tǒng)一;

02.右圖是分塊的淺色系的背景，利用顏色進(jìn)行分區(qū)，使得整體頁(yè)面比較活潑和俏皮。

(注：并不是說(shuō)不能用多色塊對(duì)頁(yè)面內(nèi)容進(jìn)行分區(qū)，而是要看具體的需求和主題，選擇用不同的形式去表現(xiàn))

04、由點(diǎn)到面整體感，切記東拼和西湊

/ 上面講到元素的重復(fù)出現(xiàn)是為了更好的連接由點(diǎn)到面的整體感;

/ 但是出現(xiàn)在整體中的元素或東拼西湊、或風(fēng)格千奇百變的話，那么單頁(yè)的整體性還是會(huì)大大折扣。

/ 無(wú)論從排版上、字體選擇上、按鈕樣式、色彩等方面都要做到一致性，這樣的單頁(yè)才是整體的。

如圖所示

05、一眼看完3屏多，不做留白就得暈

/ 單頁(yè)因其把所有信息和元素都集中表現(xiàn)在一整張頁(yè)面中，所以單頁(yè)設(shè)計(jì)也注定是能超過(guò)3屏以上的頁(yè)面設(shè)計(jì)。

/ 既然是長(zhǎng)版的整體頁(yè)面，信息量又都很大，那就應(yīng)該對(duì)每屏間的高度適當(dāng)控制，既要保持屏與屏之間的可呼吸性和留白，給人們放松和喘息的空間。

舉個(gè)例子

留白并不是特指白色哦?!?

/ 在使用留白時(shí)，要注意不要因?yàn)轫?yè)面有留白和大空隙的出現(xiàn)，使得整體視覺(jué)的連接上，出現(xiàn)視覺(jué)斷點(diǎn)的情況。要盡量做到屏內(nèi)可緊、屏外可松，讓整體頁(yè)面充滿節(jié)奏感。

06、整體想了，整體做，整體看

/ 整張頁(yè)面設(shè)計(jì)強(qiáng)調(diào)的是整體從點(diǎn)、到線、再到面的構(gòu)思和表現(xiàn)，它不光只是產(chǎn)出一個(gè)首屏視覺(jué)(頭圖)和一個(gè)內(nèi)容區(qū)各自獨(dú)立的體現(xiàn)。

/ 而更多的要求我們?cè)谠O(shè)計(jì)中用放大局部來(lái)看細(xì)節(jié)，縮小頁(yè)面來(lái)看整體頁(yè)面的方法去完成一張超高的，具有創(chuàng)意和實(shí)用平衡的頁(yè)面設(shè)計(jì)。

舉個(gè)例子

如圖所示的幾個(gè)放大效果，在細(xì)節(jié)的處理和技巧上都是很棒的哦。

07、整體專題怎么做，注重形式就能破

/ 單頁(yè)設(shè)計(jì)的大特點(diǎn)就是強(qiáng)調(diào)對(duì)整體形式感的表達(dá);

/ 正是因?yàn)檫^(guò)分強(qiáng)調(diào)形式感的東西，所以整張頁(yè)面的效果就要具有十足的特色和精巧的創(chuàng)意性，才能必免流于普通單頁(yè)設(shè)計(jì)行列中。

從而吸引用戶眼球，讓用戶跟隨整體的設(shè)計(jì)去體驗(yàn)完整的頁(yè)面信息，形成對(duì)整張頁(yè)面較完整的用戶體驗(yàn)和視覺(jué)認(rèn)識(shí)。

舉個(gè)例子

01.左圖是我當(dāng)時(shí)做的一個(gè)圣誕節(jié)的整體創(chuàng)意頁(yè)面，以禮結(jié)的形式貫穿整體設(shè)計(jì)中。當(dāng)時(shí)做的時(shí)候，就把整體的禮結(jié)元素放大化，做為主元素去表現(xiàn);

02.右圖是一個(gè)國(guó)外戶外專題單頁(yè)的設(shè)計(jì)，整體以傾斜感的折線為主元素，具有動(dòng)感、運(yùn)動(dòng)的印象。同時(shí)，結(jié)合非常有動(dòng)勢(shì)的人物圖片使得整體頁(yè)面的動(dòng)感時(shí)足。

頁(yè)面已超過(guò)幾萬(wàn)像素了，親你還在看嗎?

08、整體設(shè)計(jì)故事化，頁(yè)面才能吸引人

/ 當(dāng)你設(shè)計(jì)單頁(yè)頁(yè)面時(shí)，在構(gòu)思之初給整體頁(yè)面設(shè)定出一個(gè)故事，讓頁(yè)面具有新穎的主題性，那單頁(yè)給用戶的視覺(jué)體驗(yàn)也會(huì)更棒。

/ 下面二個(gè)作品，都是一位大師和蒸個(gè)饅頭做的作品。

/ 二個(gè)作品從立意到技法，到設(shè)計(jì)都脫離了傳統(tǒng)電商的折扣表現(xiàn)。比較有意思，想知道這里面的技法細(xì)節(jié)和更多的幕后知識(shí)嗎?

09、視差滾動(dòng)好助手，單頁(yè)發(fā)展新潮流

滾屏動(dòng)畫(huà)的特點(diǎn)在于一下點(diǎn)：

/ 首先它是用來(lái)循序漸進(jìn)的講故事;

/ 然后利用好的順滑的瀏覽體驗(yàn)，將各個(gè)內(nèi)容間無(wú)縫且精巧的連接起來(lái)局部某些元素去做分層的動(dòng)畫(huà)特效;

/ 最后使現(xiàn)在極簡(jiǎn)的、扁平的頁(yè)面設(shè)計(jì)，有了點(diǎn)晴之處!

如下圖所示，來(lái)自蒂芙尼。

分享一下me的觀后感

跟著漫天飛舞的，飄逸在蒂芙尼的純凈世界。這里有開(kāi)啟幸福的鑰匙、有城市的記憶、有定情的禮物、有盟約的海誓，來(lái)吧，一起探索屬于你和我的蒂芙尼。

/ 左右搖擺的雪花帶著觀者的視線一步步的去發(fā)現(xiàn)精彩世界，純凈的白色折紙搭出了西式的唯美建筑與城市街景，折紙的陰影很倒位，把原本平鋪的紙，有了空間和立體感;

/ 清新的湖水綠與純凈的白色搭配，完全定義了愛(ài)的純真。

/ 滾屏技術(shù)的運(yùn)用，像首樂(lè)曲循序漸進(jìn)的去聆聽(tīng)這美妙故事;

10、H5動(dòng)效新趨勢(shì)，人機(jī)交互有看頭

H5和動(dòng)效的出現(xiàn)，使得專題活了起來(lái)，不再是死板的純靜態(tài)圖片。H5和動(dòng)效的出現(xiàn)，使得專題的整體體驗(yàn)更像是在看一場(chǎng)精心安排的故事一樣。算是一種新的嘗試案例。也希望自己以后可以做一個(gè)這樣的例子!(細(xì)琢磨一下，專題里共推薦了40款商品以內(nèi)，算中小型推薦活動(dòng)!但是里面的文案和畫(huà)面結(jié)合的超贊，加上H5技術(shù)提升了用戶瀏覽體驗(yàn)，改變了現(xiàn)有大多數(shù)電商平臺(tái)，靜態(tài)展示、強(qiáng)迫似推銷的路子)!整體策劃，以故事性為主 讓用戶在觀看畫(huà)面時(shí)，連帶推銷!或者這樣的創(chuàng)新現(xiàn)在看來(lái)有些不符合運(yùn)營(yíng)們的路子，但是這樣的方式或許是將來(lái)流行的趨勢(shì)去體驗(yàn)》總結(jié)起來(lái)9個(gè)字整體想、整體做、整體看。

創(chuàng)新互聯(lián)不僅提供專題頁(yè)面設(shè)計(jì)，同時(shí)提供整個(gè)的網(wǎng)站建設(shè)，可在創(chuàng)新互聯(lián)的經(jīng)典案例中查看，外貿(mào)網(wǎng)站建設(shè)案例，響應(yīng)式網(wǎng)站，互聯(lián)網(wǎng)金融網(wǎng)站建設(shè)案例等多種案例。

本文名稱：頁(yè)面設(shè)計(jì)技巧,助你搞定整頁(yè)專題設(shè)計(jì)
分享地址：http://m.newbst.com/news7/170107.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、服務(wù)器托管、品牌網(wǎng)站建設(shè)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)