Sunny. 2016-08-08
網(wǎng)站營(yíng)銷
2016年流行的高清晰度網(wǎng)頁(yè)設(shè)計(jì)策略
當(dāng)然,有一些時(shí)間在高清晰度得到普及,但是查看統(tǒng)計(jì)數(shù)據(jù),這不是遙遠(yuǎn)。
高清顯示器越來(lái)越便宜,高清的流行網(wǎng)站。雖然沒(méi)有大壯舉為用戶去商店,買一個(gè)高清設(shè)備,設(shè)計(jì)師必須把很多工作結(jié)束。
讓這篇文章是你的引物來(lái)實(shí)現(xiàn)高清背景到你的網(wǎng)站。這里我們將解釋高清的三種最受歡迎的背景,和最佳實(shí)踐。但是,首先,讓我們從最基本的開(kāi)始。
定義高清晰度
當(dāng)我們談?wù)摳咔?指設(shè)備包含超過(guò)兩倍的像素作為一個(gè)標(biāo)準(zhǔn)的定義。分辨率測(cè)量有多少像素在一英寸的屏幕,這個(gè)單位交換被稱為點(diǎn)每英寸(dpi)或每英寸像素(ppi)。實(shí)事求是地看,一個(gè)典型的標(biāo)準(zhǔn)定義屏幕擁有72 ppi,而高清晰度屏幕超過(guò)200 ppi的東西。
雖然當(dāng)前highest-definition PC在217 ppi iMac 27”、移動(dòng)設(shè)備需要高清另一個(gè)平流層:
● iPhone 5 & 6:326 ppi
● iPhone 6 +:401 ppi
● iPad視網(wǎng)膜&空氣:264 ppi
● iPad迷你:326 ppi
● 三星Galaxy S5:432 ppi
● 三星Galaxy S6:577 ppi
● HTC M9:441 ppi
● LG G3:534 ppi
高清設(shè)備的日益普及,詳細(xì)和視覺(jué)豐富的背景都采取中心舞臺(tái)。在解釋人眼的Web UI設(shè)計(jì)背景和前景的分離是人類視覺(jué)的自然功能。
這些驚人的背景依賴于分層效應(yīng)同時(shí)給用戶留下深刻印象而不是畫太多的關(guān)注更有用的前景元素。這種分層效應(yīng)的高清背景是至關(guān)重要的。網(wǎng)站的視覺(jué)層次必須保持不變,不需要背景掩蓋了前景。
Booking.com
在上面的示例中為Booking.com的新年促銷活動(dòng),顯然最迷人的視覺(jué)是高清圖片在京都的寺廟。你想讓你的高清背景用戶沒(méi)有控制屏幕上留下深刻印象。在這個(gè)例子中,用戶仍然可以很容易地看到文本和標(biāo)題,瀟灑地放置在中心空置的背景部分。
在頁(yè)面的底部,注意導(dǎo)航也多虧了白色背景形成鮮明對(duì)比。
一般來(lái)說(shuō),有三種主要類型的高清的背景:靜態(tài)圖像,視頻,動(dòng)畫.
下面,我們將討論的優(yōu)點(diǎn)和缺點(diǎn),以及使用它們的建議。
靜態(tài)圖像
當(dāng)我們提到的免費(fèi)電子書(shū)2015 - 2016年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)、全屏或英雄,圖像背景今天另一個(gè)流行的web的趨勢(shì)。這些大型充分利用高清圖像的視覺(jué)能力。
Macquarie-Park.com.au
高清圖像背景允許設(shè)計(jì)師來(lái)影響用戶提供一個(gè)更好的注重質(zhì)地,顏色,甚至圖像的內(nèi)容。這奇跡的瞬間,最重要的的第一印象.
WeAreDandy.com
如果你知道圖像最佳代表你的品牌,你的用戶看到的第一件事,這里有5個(gè)建議實(shí)施:
1.不要競(jìng)爭(zhēng)——高清背景自然會(huì)吸引大量的關(guān)注,所以其他元素只會(huì)分散用戶和復(fù)雜的視覺(jué)層次結(jié)構(gòu)。試試這個(gè)背景搭配簡(jiǎn)約的界面.
2.滑塊或拼貼畫——多個(gè)圖像顯然你可以展示給你更多的選擇,所以滑塊或拼貼畫是可以接受的策略如果你有超過(guò)一個(gè)的形象。
3.圖像效果模糊,顏色覆蓋、整合圖形和攝影——有些效果比單獨(dú)一個(gè)圖像能實(shí)現(xiàn)更多的目標(biāo)。
4.考慮屏幕大小不同,不同的元素結(jié)合背景圖像根據(jù)設(shè)備屏幕大小,所以記住所有變化。這就是為什么你必須接受響應(yīng)設(shè)計(jì)。
5.裁剪,照片背景很少符合1 - 1.5寬高比的相機(jī),所以裁剪你的圖片得到最好的結(jié)果。
高清圖像背景會(huì)產(chǎn)生持久的第一印象,所以確保你選擇一個(gè)圖像,你想讓你的用戶與你的品牌。
2。視頻
盡管可能重加載時(shí)間,高清視頻背景可以靜態(tài)圖像進(jìn)一步建立情感上的聯(lián)系與他們的能力。經(jīng)典的電影技術(shù)應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)圖像和用戶。
AirBnB.com
AirBnB使用視頻背景開(kāi)發(fā)的背景下,他們的服務(wù)。“人類”運(yùn)動(dòng)的典型旅游得到了用戶興奮通過(guò)網(wǎng)站預(yù)訂的住宿。
之前的介紹HTML5無(wú)法處理,大多數(shù)瀏覽器和互聯(lián)網(wǎng)連接視頻的背景,但現(xiàn)在設(shè)計(jì)師能夠我的高清視頻的全部潛力。
BrindisaTapasKitchens.com
高清視頻的好處是一樣的電影本身的好處。如果你想探索一個(gè)電影的背景,考慮這五個(gè)小貼士:
1.10 - 30秒循環(huán)-瞄準(zhǔn)這個(gè)范圍來(lái)降低加載時(shí)間和吸引用戶的注意力,所有不犧牲一致性。
2.聲音(!)——自動(dòng)聲音可以是煩惱,所設(shè)置默認(rèn)的選項(xiàng)打開(kāi)。
3.減少加載-高清視頻的最大缺點(diǎn)是加載時(shí)間,所以這個(gè)盡可能最小化。你的視頻將會(huì)一文不值,如果您的用戶感到無(wú)聊并加載之前離開(kāi)。
4.備份設(shè)備不能渲染視頻——設(shè)置備份設(shè)備你的視頻不能呈現(xiàn)——Google Analytics將向您展示哪些設(shè)備在大多數(shù)使用你的網(wǎng)站。
5.質(zhì)量——別忘了高清的優(yōu)點(diǎn)是它看起來(lái)多好,所以選擇最好的質(zhì)量,是否自己拍攝或使用股票。
只是有一個(gè)視頻剪輯在后臺(tái)是不夠的。尊重這一媒介,利用幾十年的電影理論最大化收益的高清視頻。
3。動(dòng)畫
圖片和視頻動(dòng)畫之間的某個(gè)地方,分享的元素。雖然動(dòng)畫的原理是相同的,不同的是高清質(zhì)量。
mMdeByFieldWork.com
在這里,最大的問(wèn)題是過(guò)渡,應(yīng)該盡可能無(wú)縫和忽略。是否你的動(dòng)畫是毛圈引發(fā)的交互,他們應(yīng)該有一個(gè)有機(jī)覺(jué)得本身并不引人注意。這是更重要的是在高清,缺陷或加載口吃難以忽視。
acnplwgl.com
高清動(dòng)畫,請(qǐng)記住這五個(gè)最佳實(shí)踐:
1.保持簡(jiǎn)單的無(wú)限的潛力動(dòng)畫很容易走極端。不要旋卷站點(diǎn)不必要的并發(fā)癥。
2.動(dòng)畫連接到接口,使用符號(hào)像關(guān)鍵顏色或暗示的線索,您可以使用動(dòng)畫顯示功能和強(qiáng)調(diào)。
3.向量,使用可伸縮的圖像格式,所以你不必?fù)?dān)心動(dòng)畫執(zhí)行在不同的屏幕或決議。
4.使用視頻的規(guī)則——認(rèn)為動(dòng)畫視頻的延伸,所以應(yīng)用同樣的規(guī)則。
5.設(shè)計(jì)目標(biāo)受眾——不同的動(dòng)畫風(fēng)格適合不同類型的用戶,所以使用一個(gè)撞到你的目標(biāo)受眾。
動(dòng)畫有很多實(shí)際利益以及視覺(jué)。的高清只有提高它的價(jià)值。
文章標(biāo)簽：
網(wǎng)頁(yè)設(shè)計(jì)
文章評(píng)論：