頁面設計技巧,助你搞定整頁專題設計

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

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

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

用搶眼的視覺吸引戶并留下深刻印象是專題設計的首要!

傳統(tǒng)產(chǎn)品頁面，簡潔注重功能和圖標等視覺設計。

專題頁面突出視覺效果，華麗豐富

微博專題多為各種微博活動和推廣內容設計。內容較多，在設計好頭圖這種主視覺的同時，大量內容和欄目的排版布局也要注意。針對專題視覺設計的特點著手，才能實際出優(yōu)秀的頁面。

設計專題

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

專題結構

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

特殊結構形式的專題，頭圖即為封面，專題的體驗類似翻書

專題尺寸

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

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

寫實風格頭圖，多由人物構成。

卡通繪制類頭圖。

大標題為主的頭圖。

頭圖構圖

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

圓弧形的割頭圖和內容區(qū)域的構圖

頭圖標題

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

手繪設計的頭圖大標題

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

頭圖本身即承載內容功能

頭圖部分的設計是整個專題的重點，也是專題最需要突出的亮點，頭圖可以確立整個專題的基調。

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

專題內容區(qū)的設計

形式多樣，巧妙銜接

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

用桌布菜單來打造餐飲專題的結合部分。

桌布托起頭圖，本身也成為內容的背景。

內容清晰，布局合理

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

特色模塊，視覺突出

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

為獲獎模塊設立單獨的樣式。

標題欄的也可以根據(jù)主題設計細節(jié)

專題二級頁和系列專題

通常二級頁面的頭圖都是復用主頁，但也要適當?shù)臑槊總€頁面增加視覺元素予以一定的區(qū)別。要注意的是增加的樣式也不易過繁，因為頭圖的存在會顯得凌亂。

為不同的二級頁面設計區(qū)別的視覺元素。如果需要打造系列專題，就要注意規(guī)劃設計復用元素，比如相同的logo標題，和為強調系列感的統(tǒng)一視覺風格。以此強化用戶的對系列專題的印象和認知。

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

專題設計細節(jié)注意的若干點

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

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

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

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

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

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

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

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

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

/ 單頁設計，簡單將其比喻為在一張紙上進行的創(chuàng)作和設計。

/ 電商中的專題設計都是單頁設計的一種應用。

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

如下圖

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

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

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

如下圖

整體專題設計的“冰糖葫蘆原則”

/ 在設計單頁的專題時，為了讓首屏到次屏再到內容區(qū)間的視覺更加的連貫和流暢，就要充分利用好局部對比和整體關系來使頁面效果更加的完整。

01?先是單頁的點，這里指的是切入點。

/ 專題單頁中的切入點就是整體頁面中的主線。

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

如下圖

去體驗》

02?再是單頁的線，線具有連接、引導的作用。

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

/ 運用一些藝術化的表達方式，來給頁面增加一些趣味性和裝飾性;

如下圖

03、最后是單頁的面，用于整體風格的設計。

/ 這里的指的是對整張頁面的完成度;

/ 單頁設計不要局限于完成首屏設計或者某個單一元素的設計中。

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

下面我們來看3組優(yōu)秀的設計

溫馨提示：》-《 頁面長，內容多，請隨時做好去廁所的準備哈?

接下來是我整理的10個專題單頁的技巧，

主要是一些大的理論點，大家結合著自己的專題去思考吧。

01、頭圖有個點，下面設計才好接

/ 頭圖元素的設計不分楚河和漢界。

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

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

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

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

/ 所謂的承上啟下，就是說頁面中要有一個貫穿整體的主要元素，去構成整張頁面的視覺焦點。

/ 讓元素頭尾呼應，上下連貫。

舉個例子

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

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

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

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

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

/ 對于品類專題、店鋪首頁來說多色塊的分隔顯然整體性會差一些。

如下圖

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

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

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

04、由點到面整體感，切記東拼和西湊

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

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

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

如圖所示

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

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

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

舉個例子

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

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

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

/ 整張頁面設計強調的是整體從點、到線、再到面的構思和表現(xiàn)，它不光只是產(chǎn)出一個首屏視覺(頭圖)和一個內容區(qū)各自獨立的體現(xiàn)。

/ 而更多的要求我們在設計中用放大局部來看細節(jié)，縮小頁面來看整體頁面的方法去完成一張超高的，具有創(chuàng)意和實用平衡的頁面設計。

舉個例子

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

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

/ 單頁設計的大特點就是強調對整體形式感的表達;

/ 正是因為過分強調形式感的東西，所以整張頁面的效果就要具有十足的特色和精巧的創(chuàng)意性，才能必免流于普通單頁設計行列中。

從而吸引用戶眼球，讓用戶跟隨整體的設計去體驗完整的頁面信息，形成對整張頁面較完整的用戶體驗和視覺認識。

舉個例子

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

02.右圖是一個國外戶外專題單頁的設計，整體以傾斜感的折線為主元素，具有動感、運動的印象。同時，結合非常有動勢的人物圖片使得整體頁面的動感時足。

頁面已超過幾萬像素了，親你還在看嗎?

08、整體設計故事化，頁面才能吸引人

/ 當你設計單頁頁面時，在構思之初給整體頁面設定出一個故事，讓頁面具有新穎的主題性，那單頁給用戶的視覺體驗也會更棒。

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

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

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

滾屏動畫的特點在于一下點：

/ 首先它是用來循序漸進的講故事;

/ 然后利用好的順滑的瀏覽體驗，將各個內容間無縫且精巧的連接起來局部某些元素去做分層的動畫特效;

/ 最后使現(xiàn)在極簡的、扁平的頁面設計，有了點晴之處!

如下圖所示，來自蒂芙尼。

分享一下me的觀后感

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

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

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

/ 滾屏技術的運用，像首樂曲循序漸進的去聆聽這美妙故事;

10、H5動效新趨勢，人機交互有看頭

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

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

本文名稱：頁面設計技巧,助你搞定整頁專題設計
分享地址：http://www.muchs.cn/news7/170107.html

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

廣告

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