2023-11-04 分類: 網(wǎng)站建設(shè)
認(rèn)識(shí)專題--既然是關(guān)于某個(gè)主題的專題,那么一個(gè)簡(jiǎn)介視乎是必不可少的,各大專題頁(yè)我們都能看到這樣一個(gè)簡(jiǎn)介,或長(zhǎng)或短,但一定要深刻醒目。成都網(wǎng)站設(shè)計(jì)今天就和大家聊聊專題設(shè)計(jì):
頁(yè)面特性:產(chǎn)品頁(yè)面簡(jiǎn)潔易用,專題頁(yè)面絢麗視效印象深刻。
在頁(yè)面設(shè)計(jì)當(dāng)中,產(chǎn)品頁(yè)面(如facebook微博twitter微吧等)的設(shè)計(jì)。注重功能,交互,設(shè)計(jì)要考慮用戶長(zhǎng)時(shí)間的瀏覽體驗(yàn)。視覺(jué)上側(cè)重間距,布局,按鈕和logo,及icon樣式。注重規(guī)范和視覺(jué)識(shí)別性。樣式通常簡(jiǎn)潔易用,絢麗元素少,視覺(jué)上并不強(qiáng)調(diào)沖擊力。
專題頁(yè)面時(shí)效性有限(大多專題是有推廣及活動(dòng)時(shí)間限制的,過(guò)了這個(gè)時(shí)間,就很少會(huì)有人再訪問(wèn)該頁(yè)面。),多為活動(dòng)推廣和吸引用戶等內(nèi)容,能在限定的時(shí)間的吸引最多用戶才能形成有力的推廣,需要強(qiáng)有力的視覺(jué)效果,和有趣的瀏覽體驗(yàn),來(lái)達(dá)到吸引用戶的特點(diǎn)。在規(guī)范和布局甚至交互上可以適當(dā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ū)
專題尺寸
微博專題通常都有較多內(nèi)容,會(huì)使得頁(yè)面的高度過(guò)高,(很多專題的高度都達(dá)到了3000px)。設(shè)計(jì)時(shí)需要適當(dāng)?shù)目s短欄目的間距,盡可能的減少頁(yè)面高度。專題的頁(yè)面的寬度和微博主站相同為950pX,采用這個(gè)寬度是為了能兼容最廣泛的顯示器分辨率(1024px*768px),但由于專題的設(shè)計(jì)更加注重視覺(jué)效果,而且目前的很多年輕用戶(年輕用戶往往是專題的核心用戶)的顯示器分辨率早已超過(guò)1024px很多,所以我往往會(huì)將專題的主視覺(jué)和專題內(nèi)容保證在950px之下,而頭圖的實(shí)際設(shè)計(jì)效果會(huì)在1600px寬度時(shí)做最好的展示。
600px是我們定義的微博專題的首屏高度,也就是大多數(shù)用戶第一屏能夠看到的區(qū)域。在這個(gè)區(qū)域內(nèi),我通常將頭圖的比例做到280px-400px左右,這樣做的目的是為了在突出專題主視覺(jué)的同時(shí)也要讓用戶在第一屏就可以瀏覽到部分專題內(nèi)容。(而通常產(chǎn)品頁(yè)面的頭部視覺(jué)在高度上要小很多,產(chǎn)品頁(yè)面本身特性所決定的。)
設(shè)計(jì)頭圖
結(jié)構(gòu)確立接下來(lái)后就開(kāi)始頭圖的設(shè)計(jì),優(yōu)秀的頭圖是專題設(shè)計(jì)的靈魂。
設(shè)計(jì)頭圖首先要考慮的是頭圖的設(shè)計(jì)風(fēng)格,根據(jù)不同的題材,選擇不同風(fēng)格的視覺(jué)設(shè)計(jì)。一般我會(huì)事先在紙上或是腦中勾勒一個(gè)大概,有些專題沒(méi)有具象的視覺(jué)元素那么就從專題的文字入手,如果實(shí)在不帶感,可以將一些與專題相關(guān)的元素先拼湊在畫布上,然后嘗試各種組合,也許一會(huì)就能擦出火花。
頭圖風(fēng)格
關(guān)于微博專題的頭圖設(shè)計(jì)風(fēng)格大致分為:寫實(shí)類,卡通插畫,大標(biāo)題突出等。寫實(shí)類頭圖多需要人物出場(chǎng)涉及版權(quán),所以這種實(shí)類的風(fēng)格的偏少,大部分還是后兩種。如果需求方對(duì)設(shè)計(jì)風(fēng)格認(rèn)可,我喜歡在頭圖的設(shè)計(jì)中放入一些自己繪制的視覺(jué)元素,盡量減少素材使用。
寫實(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)容,美觀,吸引用戶停留。#p#副標(biāo)題#e#
專題內(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ú)法全部按照自己所寫這樣去設(shè)計(jì)專題。但這不妨礙我把它當(dāng)做一個(gè)目標(biāo)去不斷接近。文章來(lái)源:互聯(lián)網(wǎng)
成都創(chuàng)新互聯(lián),專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站LOGO設(shè)計(jì)等服務(wù),國(guó)內(nèi)一流設(shè)計(jì)師團(tuán)隊(duì),設(shè)計(jì)出最適合您企業(yè)的網(wǎng)站及作品,歡迎咨詢了解!
新聞名稱:成都網(wǎng)站設(shè)計(jì):專題網(wǎng)頁(yè)設(shè)計(jì)解析
分享地址:http://m.rwnh.cn/news1/292501.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、做網(wǎng)站、域名注冊(cè)
聲明:本網(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)
猜你還喜歡下面的內(nèi)容