轉(zhuǎn)載藍藍設(shè)計(   m.820esy.cn  )是一家專注而深入的設(shè)計機構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、  cs界面設(shè)計 、  ipad界面設(shè)計  、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、  網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源： http://udc.weibo.com/2012/10/

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，            請點這里

認識專題

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

在頁面設(shè)計當(dāng)中，產(chǎn)品頁面（如facebook 微博 twitter 微吧等）的設(shè)計。注重功能，交互，設(shè)計要考慮用戶長時間的瀏覽體驗。視覺上側(cè)重間距，布局，按鈕和logo,及icon樣式。注重規(guī)范和視覺識別性。樣式通常簡潔易用，絢麗元素少，視覺上并不強調(diào)沖擊力。

專題頁面時效性有限（大多專題是有推廣及活動時間限制的，過了這個時間，就很少會有人再訪問該頁面。），多為活動推廣和吸引用戶等內(nèi)容，能在限定的時間的吸引最多用戶才能形成有力的推廣，需要強有力的視覺效果，和有趣的瀏覽體驗，來達到吸引用戶的特點。在規(guī)范和布局甚至交互上可以適當(dāng)放寬要求。

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

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

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

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

 

設(shè)計專題

確立UE，溝通需求 。

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


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

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


專題尺寸
微博專題通常都有較多內(nèi)容，會使得頁面的高度過高，（很多專題的高度都達到了3000px）。設(shè)計時需要適當(dāng)?shù)目s短欄目的間距，盡可能的減少頁面高度。專題的頁面的寬度和微博主站相同為950PX，采用這個寬度是為了能兼容最廣泛的顯示器分辨率（1024px*768px），但由于專題的設(shè)計更加注重視覺效果，而且目前的很多年輕用戶（年輕用戶往往是專題的核心用戶）的顯示器分辨率早已超過1024px很多，所以我往往會將專題的主視覺和專題內(nèi)容保證在950px之下，而頭圖的實際設(shè)計效果會在1600px寬度時做最好的展示。

600px是我們定義的微博專題的首屏高度，也就是大多數(shù)用戶第一屏能夠看到的區(qū)域。在這個區(qū)域內(nèi)，我通常將頭圖的比例做到280px-400px左右，這樣做的目的是為了在突出專題主視覺的同時也要讓用戶在第一屏就可以瀏覽到部分專題內(nèi)容。（而通常產(chǎn)品頁面的頭部視覺在高度上要小很多，產(chǎn)品頁面本身特性所決定的。）


設(shè)計頭圖
結(jié)構(gòu)確立接下來后就開始頭圖的設(shè)計，優(yōu)秀的頭圖是專題設(shè)計的靈魂。
設(shè)計頭圖首先要考慮的是頭圖的設(shè)計風(fēng)格，根據(jù)不同的題材，選擇不同風(fēng)格的視覺設(shè)計。一般我會事先在紙上或是腦中勾勒一個大概，有些專題沒有具象的視覺元素那么就從專題的文字入手，如果實在不帶感，可以將一些與專題相關(guān)的元素先拼湊在畫布上，然后嘗試各種組合，也許一會就能擦出火花。


頭圖風(fēng)格
關(guān)于微博專題的頭圖設(shè)計風(fēng)格大致分為：寫實類，卡通插畫，大標(biāo)題突出等。寫實類頭圖多需要人物出場涉及版權(quán)，所以這種實類的風(fēng)格的偏少，大部分還是后兩種。如果需求方對設(shè)計風(fēng)格認可，我喜歡在頭圖的設(shè)計中放入一些自己繪制的視覺元素，盡量減少素材使用。

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

卡通繪制類頭圖。

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


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

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


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

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

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

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

頭圖部分的設(shè)計是整個專題的重點，也是專題最需要突出的亮點，頭圖可以確立整個專題的基調(diào)。
優(yōu)秀的頭圖應(yīng)該緊貼專題內(nèi)容，美觀，吸引用戶停留。


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

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

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

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

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

為獲獎模塊設(shè)立單獨的樣式。

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


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

為不同的二級頁面設(shè)計區(qū)別的視覺元素。

如果需要打造系列專題，就要注意規(guī)劃設(shè)計復(fù)用元素，比如相同的logo標(biāo)題，和為強調(diào)系列感的統(tǒng)一視覺風(fēng)格。以此強化用戶的對系列專題的印象和認知。

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


專題設(shè)計細節(jié)注意的若干點
• 頭圖要有延展性，要注意寬屏分辨率下的顯示特點。
• 專題交互細節(jié)，為按鈕翻頁等交互元素設(shè)計各種狀態(tài)，會有更好的體驗效果。
• 專題自身的視覺設(shè)計的延展和統(tǒng)一，包括專題附屬的彈層，對話框等的細節(jié)設(shè)計。
• 交付物的規(guī)范。專題圖層眾多，題設(shè)計完畢后交付前端的同事時，應(yīng)該對圖層進行分組。文件體積大就要刪除或隱藏?zé)o用的圖層。
• 專題設(shè)計稿提交時，盡量可能采用不同的圖片，數(shù)目參差的正文，來替代設(shè)計稿中的模擬內(nèi)容，這樣有時夠發(fā)現(xiàn)一些忽略的問題（如文字過多溢出，以此來進一步調(diào)整間距等），重要是可讓他看上去更像是一個即將上線的真實頁面，更好的展現(xiàn)你設(shè)計的最終面貌。有時會覺得多此一舉且低效，但這能讓我們顯得更專業(yè)。
• 良好的溝通：設(shè)計師可以提出更好的風(fēng)格意見，視覺創(chuàng)意，然而滿足需求方的推廣需求才是前提，所以通過良好的溝通加深對專題需求的理解，可以更準(zhǔn)確的把握專題需求，避免返工等問題出現(xiàn)。
• 字體的問題。受瀏覽器的限制的，目前微博專題的主要字號還是14和12號的宋體（設(shè)備字體）
做正文基本可以保證清晰銳利，但如果用來做標(biāo)題欄時候就不那么美觀了。這時應(yīng)該和需求方、前
段的同事溝通，在不頻繁更改文案的情況下盡量使用圖片來制作標(biāo)題欄的文字效果，達到應(yīng)有的視覺效果。
• 前端的規(guī)范與限制，如果需要復(fù)雜的圓角和半透明頁面效果，最為穩(wěn)妥的方法是為設(shè)計兩套適應(yīng)高低級瀏覽器的視覺解決方案，如果條件不允許，就要看前端同事對瀏覽器支持的策略，總之前端實現(xiàn)的問題，作為設(shè)計師應(yīng)該主動溝通并推動其解決。（這還包括專題上線后的跟蹤反饋。）

好的專題設(shè)計，有創(chuàng)意，整體效果和諧，用戶印象深刻，內(nèi)容傳達有效，視覺元素有延續(xù)和繼承。整個頁面銜接不生硬。這都需要設(shè)計師動腦去巧妙構(gòu)思和發(fā)揮，有時工期緊迫，不能做到事無巨細，我也無法全部按照自己所寫這樣去設(shè)計專題。
但這不妨礙我把它當(dāng)做一個目標(biāo)去不斷接近。“追求卓越，成功自然尾隨而至”——《3 idiots》