手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

談?wù)剺?gòu)建單頁(yè)布局網(wǎng)站的創(chuàng)意技術(shù)——附優(yōu)秀案例

2013-1-29    藍(lán)藍(lán)設(shè)計(jì)的小編

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

 來(lái)源: http://www.cnblogs.com/lhb25/archive/2013/01/30/creative-techniques-for-single-page-websites.html

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,            請(qǐng)點(diǎn)這里  

在過(guò)去的幾年中,不斷涌現(xiàn)出新的自定義網(wǎng)站設(shè)計(jì)技術(shù)。一個(gè)非常流行的想法是把所有的主要內(nèi)容放在一個(gè)頁(yè)面,使用動(dòng)態(tài)滾動(dòng)動(dòng)畫(huà)來(lái)定位內(nèi)容,這種單頁(yè)布局在只需要顯示相關(guān)信息的一小部分的目標(biāo)網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序制作網(wǎng)站經(jīng)常使用。

在這篇文章中,我想向大家介紹單頁(yè)網(wǎng)站中一些有趣的技術(shù)。希望這些想法能夠給正在尋找這方面內(nèi)容的年輕設(shè)計(jì)師提供靈感。

可能是因?yàn)閷?shí)現(xiàn)這種效果比較復(fù)雜,視差滾動(dòng)的概念對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)仍然是相當(dāng)陌生。我看到過(guò)眾多優(yōu)秀的例子,例如像 Pixel Stadium 這樣的杰出代表,這個(gè)網(wǎng)站易于瀏覽,紋理也是讓人眼花繚亂。

 

像素體育場(chǎng)網(wǎng)站的布局設(shè)計(jì)界面

 

  當(dāng)你向下滾動(dòng)頁(yè)面的時(shí)候,頂部導(dǎo)航欄會(huì)出現(xiàn)并鎖定到窗口, 這使得用戶可以快速跳過(guò)或轉(zhuǎn)換頁(yè)面到不同的部分。 布局是完全響應(yīng)式設(shè)計(jì)的,會(huì)自適應(yīng)瀏覽器窗口的寬度! 這一切都說(shuō)明,單頁(yè)的布局可能會(huì)非常好看,也很靈活。

移動(dòng)應(yīng)用程序著陸頁(yè)面

  Android 和 iOS 應(yīng)用程序開(kāi)發(fā)人員知道,推出品牌對(duì)于自己的營(yíng)銷努力是至關(guān)重要的。 這就是為什么更小的移動(dòng)應(yīng)用程序的網(wǎng)站包含的信息通常設(shè)在一個(gè)頁(yè)面上。 它花費(fèi)更少的精力而且效果看起來(lái)也好多了。

 

Infomatic應(yīng)用程序iphone網(wǎng)站布局singlepage的

 

  這個(gè)網(wǎng)站采用了相當(dāng)簡(jiǎn)約的布局,沒(méi)有很多細(xì)節(jié)。大部分的設(shè)計(jì)是圍繞應(yīng)用程序的屏幕截圖,環(huán)繞著 App Store 的徽章按鈕。您想促進(jìn)銷售的話,使用單頁(yè)布局是實(shí)現(xiàn)這個(gè)目標(biāo)最好的布局風(fēng)格。

隱藏的導(dǎo)航欄

  為了在在屏幕上節(jié)省空間,網(wǎng)站的導(dǎo)航條只有在滾動(dòng)條滾動(dòng)一定的距離,頭部的內(nèi)容看不到了之后才出現(xiàn)。 網(wǎng)站  Radiologie  為這種技術(shù)提供了一個(gè)很好的示范。

 

Radiologie網(wǎng)站單頁(yè)面滾動(dòng)工具欄資產(chǎn)凈值

 

  讓當(dāng)前的導(dǎo)航欄和網(wǎng)站的主題匹配是很好的做法,但是,因?yàn)樗鼤?huì)在頁(yè)面上保持固定,理論上你可以使用任意數(shù)量的設(shè)計(jì)風(fēng)格。我想一個(gè)更好的例子是 Rule of Three 。

 

網(wǎng)站英國(guó)singlepage布局規(guī)則

 

  他們的網(wǎng)站是專注于一個(gè)撰稿人行業(yè)協(xié)會(huì)的專業(yè)人士,使用暗色風(fēng)格紋理, 配色方案也符合版面設(shè)計(jì)。 當(dāng)你向下滾動(dòng)頁(yè)面,你會(huì)發(fā)現(xiàn)導(dǎo)航鏈接固定在頂欄, 這是一個(gè)很好的解決方案。

動(dòng)態(tài)轉(zhuǎn)換效果

  創(chuàng)建自己的動(dòng)態(tài)頁(yè)面動(dòng)畫(huà)的過(guò)程很復(fù)雜的。 我不建議剛開(kāi)始使用 JavaScript 的開(kāi)發(fā)者走這條道路,但它可以是一個(gè)很好的學(xué)習(xí)經(jīng)驗(yàn)。 看一個(gè)例子:FK-Agency website 。

 

FK局網(wǎng)站單頁(yè)面布局風(fēng)格動(dòng)畫(huà)

 

  這個(gè)網(wǎng)站是可以同時(shí)在垂直和水平方向擴(kuò)展。 請(qǐng)注意,你不能在布局上/下翻頁(yè),必須滑動(dòng)導(dǎo)航鏈接。在某些 類似的服務(wù)和作品集網(wǎng)站中也會(huì)這種設(shè)計(jì),你必須水平方向上滾動(dòng)頁(yè)面。 對(duì)于一些訪客,這種技術(shù)會(huì)讓他們困惑,所以要小心使用。

水平滑動(dòng)板

  這種技術(shù)和動(dòng)態(tài)過(guò)渡風(fēng)格是非常相似的,但水平滑動(dòng)效果 只要 通過(guò)谷歌搜索就能找到很多的開(kāi)源插件可以實(shí)現(xiàn)。 因此這種效果相比上面幾種更簡(jiǎn)單。下面是我很喜歡的一個(gè)網(wǎng)站例子。

 

努米底亞網(wǎng)頁(yè)響應(yīng)的網(wǎng)頁(yè)布局

 

優(yōu)秀作品案例

  這里收集的單頁(yè) 網(wǎng)站非常值得關(guān)注,都是單頁(yè)面布局的優(yōu)秀作品??梢则?yàn)證上面這些觀點(diǎn),為設(shè)計(jì)師提供更多的幫助。 這些網(wǎng)站使用不同的布局,你會(huì)發(fā)現(xiàn)各種各樣的不同的用戶界面技術(shù)。 另外,請(qǐng)記得給個(gè)評(píng)論,讓我們知道您的想法。

Teamgeek

team geek website interface webdesign single pages

Funny Faces Camera

iphone app website funny faces design

Dash Creative

creative designs gallery icons dash agency portfolio

 

Kinderfotografie

german photography website single page layout

 

Lost Phone Experiment

parallax website sliding scrolling content webdesign

 

Marketing Facts

html5 info webpage single layout design

State of the Economy

state survey united states economy facts

Touch Gesture Icons

mobile touch icons website scrolling

Pipeline

pipeline website single page static top toolbar

 

 

Laymon

laymon cooking website parallax scrolling design interface

AxiaCore

django development projects freelance business axiacore

Ideakites

iphone android ios app development studio website agency

Jmore Design

jmore design website layout interface inspiration single-page

ngage

fixed ngage scrolling website layout design

M.dot App

mdot studio website design single page website

Creative9

space design website infinite scrolling singlepage

Mirrool Creek Lamb

mirrool creek website design interface layout

Startup Giraffe

vectors circles website design singlepage studio startups

Rate Us

rateus website layout scrolling inspiration single-page

Mitchell ME

 

分享本文至:

日歷

鏈接

個(gè)人資料

存檔