網(wǎng)頁(yè)設(shè)計(jì)首頁(yè)焦點(diǎn)圖的形式
前一段時(shí)間,搜狐家居改版,在設(shè)計(jì)時(shí)牽扯到焦點(diǎn)圖的設(shè)計(jì),中間看了一些設(shè)計(jì)樣式,現(xiàn)在拿出來(lái)和大家一起分享~
1、通欄式(騰訊女性)
這種方式很適合于資訊信息類(lèi)不強(qiáng),圖片展現(xiàn)較多,強(qiáng)調(diào)品質(zhì)的頻道頁(yè)。
2、通欄異形圖文混排式(新浪尚品)
該頻道主要展示高端奢華內(nèi)容,資訊信息內(nèi)容較少,用通欄方式比較合適,異形比較新穎。
3、簡(jiǎn)潔圖文混排幻燈(新浪尚品子頻道)
下面這種方式較上一種更適合品質(zhì)展示的子頻道頁(yè)面。
這次家居別墅改版用的焦點(diǎn)圖(設(shè)計(jì)師:成楓),很顯品質(zhì)。
4、圖片視頻共存的圖文混排幻燈(yahoo)
注意下面兩張圖分別是表現(xiàn)圖片和視頻不同媒體信息時(shí)的狀態(tài),非常適合資訊類(lèi)首頁(yè)。
5、簡(jiǎn)潔圖片幻燈
大家注意一下,下面小圖和大圖不是等比例的,大圖對(duì)畫(huà)面做了裁剪,效果也不錯(cuò)。
下面這種上下呼應(yīng)的排布很適合資訊類(lèi)首頁(yè)的表現(xiàn)。
圖片和文字的組合可以更自由。
6、多種形式并存的圖文混排幻燈
下面兩個(gè)是幻燈中的不同兩幀,分別采用了不同的設(shè)計(jì)形式,即可以一次一個(gè)信息,也可以同時(shí)有三個(gè)信息,比較靈活。
6、商品展示類(lèi)幻燈
淘寶商城首頁(yè)的幻燈采用大尺寸展示,每幀采用不用形式組合的設(shè)計(jì),添加觸發(fā)效果,交互效果很好。
商品類(lèi)的幻燈要以突出商品本身、名稱(chēng)折扣,尺寸可以采用大幅和小幅組合的方式。
以上案例也是冰山一角,焦點(diǎn)圖的樣式是為產(chǎn)品內(nèi)容服務(wù)的,所以樣式的選擇還是要根據(jù)內(nèi)容的需求確定。
本文地址:http://m.likemindfilms.com/tutorial/ui1795.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏