1、在現代網頁設計中，動效有哪些常見的用法
載入動效
動效最常用的一個地方就是進度條。載入進度條的載入動效會改變用戶對於時間的感知，通過轉移注意力的方式讓用戶等待感降低。簡單的載入動效其實比復雜的更好。額外的東西，比如聲音效果就沒有存在的必要了。用戶在有趣的動效上投注了越多的注意力，就越容易忽略等待的過程。
2. 進度動效
動效還可以用來展示交互或者操作的進度。
3.界面框架
界面框架會將界面載入之後的大概樣式給展示出來，界面框架會讓用戶產生內容一瞬間就載入好了的錯覺。這種動效可以應用在絕大多數的網頁和APP當中，它會明顯強化用戶的參與感。
4.視覺反饋
將界面反饋視覺化地呈現給用戶是非常實用的.良好的交互設計需要視覺反饋來支撐，傳達交互完成後的結果，讓交互可用、可見、可預期。網站界面中哪些元素可交互如果是不可知的、交互的結果也不可預期，混亂就不可避免了。周密的交互設計可以幫助用戶理解，將這種混亂降到最低。
5.懸停動效
桌面端交互主要還是藉助觸控板和滑鼠，游標懸停特效很大程度是為這種情況而存在的，同時，它也是最常見的動效之一。當用戶不知道某個控制項怎用的時候，會很直覺地將游標移動到上面去，這個時候，懸停特效能夠很好的吸引他們的目光。移動端由於交互方式的差異，幾乎沒法使用懸停動效。無論是按鈕還是輸入框，當你點擊屏幕的時候就已經觸發控制項了，只能在隨後呈現結果，而無法像懸停動效一樣預覽。
6.長滾動頁面
不得不說，首屏的設計一直是網頁設計的焦點所在，設計師將注意力集中在這個充滿價值的區域是有道理的。但是頁面餘下的部分同樣很重要，事實上，有個說法是「正常媒體頁面上百分之66%的用戶注意力都在首屏之下」，因此結合了動效的長滾動頁面同樣非常有用。
7.動效讓滾動式的交互充滿了趣味。動畫能夠讓長滾動頁面所承載的故事更加鮮活有意思，相比於炫酷的動效，微妙的動效給人的感覺更加到位。
2、哪些動效設計可以給網站建設帶來神奇的效果
1、載入動效設計
在網站動效設計中，載入動效設計最常見的形式就是進度條。載入動效可以讓用戶更真切地感受到時間的快慢，並且可以轉移用戶的注意力，避免用戶因等待而出現浮躁的感覺。在不可以將等待的時間縮短一點的前提下，建議將這個過程變得有趣一點。載入的動效設計最好是簡單一點，不建議加入聲音，越簡單越能吸引用戶的注意力，那麼用戶就會忽略這是一個等待的過程。
2、進度動效設計
動效除了可以載入，還可以用來展示進度。同時還可以利用進度來展示步驟的順序，這樣就讓頁面變得更有趣味。
3、始末動效設計
這個是指界面載入完之後出現一個大概的樣式，這樣就給用戶一種已經載入完畢的感覺。這種動效適用與大部分頁面以及APP中，可以增強用戶的參與感。
4、視覺反饋動效設計
主要是將界面反饋進行視覺化，並且展示給用戶，這種動效實用性強，而且交互性也比較好。交互性的設計可以幫助用戶更好地理解頁面內容。
3、html5時代的主要的網頁設計風格有哪些
一、首先從功能與設計目標來看， H5專網頁主要有以下4大類型：
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。
3.產品介紹型
聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。
這一類型的H5頁面多見於汽車品牌，LEXUS NX是其中的優秀代表案例。精緻和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。
4.總結報告型
自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。
二．形式為功能服務
在確定了專題頁的功能目標之後，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什麼樣的頁面是用戶最想看的最會去分享的。
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和製作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知慾和探索欲，一路選選選，看最後到底是什麼成績。一條清晰的線索是必要的，最後到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
4.游戲
從 「圍住神經貓」、「看你有多色」等單純小游戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。
三．為設計加分的4個要點
一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：
1.細節與統一
要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
2.緊跟熱點，利用話題效應
想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。
3.講個好故事，引發情感共鳴
不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
4.合理運用技術，打造流暢的互動體驗
隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注於為用戶提供流暢的互動體驗。
結語
隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。
4、簡述網頁設計的風格有哪些
一、首先從功能與設計目標來看， H5專網頁主要有以下4大類型：
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。
3.產品介紹型
聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。
這一類型的H5頁面多見於汽車品牌，LEXUS NX是其中的優秀代表案例。精緻和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。
4.總結報告型
自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。
二．形式為功能服務
在確定了專題頁的功能目標之後，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什麼樣的頁面是用戶最想看的最會去分享的。
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和製作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知慾和探索欲，一路選選選，看最後到底是什麼成績。一條清晰的線索是必要的，最後到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
4.游戲
從 「圍住神經貓」、「看你有多色」等單純小游戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。
三．為設計加分的4個要點
一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：
1.細節與統一
要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
2.緊跟熱點，利用話題效應
想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。
3.講個好故事，引發情感共鳴
不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
4.合理運用技術，打造流暢的互動體驗
隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注於為用戶提供流暢的互動體驗。
結語
隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。
5、有哪些比較好的網頁設計網站的網址?
你可以用大師助手，他們有200個設計網站推薦，比較全，也是朋友推薦的，你可以試試
6、目前比較流行的網站設計風格有哪些
就是HTML5+CSS3技術製作的網站，比較美觀、好看，自適應，頁面效果非常華麗
7、國外平面設計網站有哪些
1.找設計靈感，只認Pinterest--------Pinterest
以瀑布流展示圖片為主，圖片資源豐富強大，不像花瓣有些關鍵詞滑幾頁就沒有了，在設計初期發散思考時，瀏覽Pin簡直高效出活。（昨天被pin掛了的新聞刷屏了???sad face）
2.看完整的設計項目，作品，用Behance--------Behance
包括工業設計，交互設計，視覺，建築各個領域，重點在展示完整的項目作品上，所以需要點擊各個作品進入彈窗看，一個彈窗包涵文字，圖片，視頻介紹。
3.找視覺素材，UI，動效，推薦Dribbble--------Show and tell for designers
個人很喜歡dribbble上的視覺風格，扁平化風格較多，配色走心，最喜歡的一個功能是dribbble上一張圖會有主顏色色號的信息，並且點擊相關色號會進入所有用到這個色號的作品頁面，配色方案一堆自行搭配自行選擇，簡直視覺類網站的業界良心。
4.找優質視覺資源，上Niice--------Niice
畢竟是從behance和dribbble等優質設計網站上過來的資源，優質中的精華，個人感覺在包裝、平面等更偏藝術領域的資源較多。
5.作品集瀏覽、發布，Issuu--------https://issuu.com
記得之前有設計小白來問去哪可以看到完整的學生交互項目，安利了issuu給他，在瀏覽別人作品集的同時，也可以看到很多完整的設計項目，最喜歡它的展示功能，增強作品集展示效果，只加分不減分。
6.CG娛樂設計藝術資源類--------ArtStation
有很多CG設計類的圖片，視頻，模型等，之前被一個做游戲原畫師的同學安利的網站。
7.ICON資源下仔類--------Noun Project
這個沒啥好說的，貌似不翻牆也能上，還有一個國內網站也不錯，Iconfont-阿里巴巴矢量圖標庫 ，另外一個icon比較好看的：Iconfinder - 1,500,000+ free and premium icons，好看到你懷疑能不能直接拿來用。。。只是需要收費，建議商用
8.字體設計，Google Font--------https://fonts.google.com/
對於網頁設計師和前端人員來說，是個很棒的字體庫，設計師可以使用字體庫提供的免費字體來網頁設計，而前端人員可以直接調用 Web Font 樣式。
9.機械/工業設計/模型類參考網站
http://www.robotecture.com/
DIY How To Make Instructions
MakerBot Thingiverse
Home | www.robives.com
工業設計，tangible interaction design 的設計師可以看過來，裡面有很多免費資源，以及與機械相關的理論，製作等等。對於做裝置藝術，硬體交互有很大的幫助。
作者：阿綠
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。
8、有哪些炫酷好玩兒的網頁導航設計
Jova
Jova的網站設計非常清爽，導航欄的設計均衡並且結構妥帖
設計師使用細線構成的線框柵格來構建網站導航，經典的黑白配色，加上清晰銳利的英文字體，構建出優雅迷人的外觀，在柔和的背影映襯之下，給人深刻的印象。
Beloesuhoe
Beloesuhoe 的設計團隊巧妙地使用布景構建出了一個獨一無二的網頁導航，非常抓人眼球。這個網站乍一看好象就是一個背景圖，但是實際上，網頁上脈動的小紅點會提示你導航的存在，它並不是看起來那麼簡單。將滑鼠移動到小紅點上，你會發現這些導航點是可交互的，並且將你引導到特定的頁面。這種「沉浸式」的導航欄設計是個非常有趣的解決方案，可拓展的空間也相當大。
First Person
First Person 整站使用了單頁滾動設計，並且通過左上方的菜單欄來進行導航引導。但是這並不是它的突出之處，當你在首頁向下滾動的時候，能夠看到一個精心製作的3D場景，整個場景會隨著白天黑夜變換主題，並且當你滑鼠移動到3D場景的特定點上的時候，能夠激活組件，進行交互，瀏覽信息，絕對別出心裁。雖然整站導航不算突出，但是這個3D場景的導航設計 ，簡直帥酷爆表。
Mint Design Company
說 Mint Design Company 的導航設計 精美絕倫完全不是過譽。設計師幾乎是用漂亮的手繪插畫完成了整個網頁的設計，導航欄所使用的手繪圖標更是精緻，滑鼠移動到導航欄圖標處會有好玩兒的動效出現，最關鍵的是每個動效都不盡相同。
Vive Latino
Viva Latino的設計團隊充分利用塗鴉的獨特效果，讓整著陸頁在同類設計中脫穎而出。干凈的單色頁面上，漂亮的手繪排版設計和獨具個性的小人錯落混拍在一起，營造出節日的氣氛，最關鍵的是，這樣的設計也創造出獨具一格的導航模式。
Pete Nottage
這個名為Pete Nottage 的網站以五彩繽紛的插畫而著稱，也使得整個網站充滿了創造性和積極的氛圍。這些扁平風的插畫以城市場景為主題，並且還是作為網站導航而存在
為了讓這個導航欄更加好玩，網站的設計師和開發者將許多動態的元素加入到插畫中，比如移動的汽車和遊艇，那些看似靜態的景物其實也是可交互的，當你點擊它們的時候，有些建築會抖動甚至消失!這種引人入勝的設計賦予了網站獨特的氣質，讓人流連忘返樂此不疲。
Mathilde Jacon
Mathilde Jacon 的這個個人作品展示頁使用了更加獨特的導航模式：嵌套環形可互動式導航欄，環形的每一段都會導向一個作品。原來導航還可以這樣做啊!
Moira Young
Moira Young 的網站採用了一套自然風的主題，導航設計則以優雅的輻射狀的閃光來呈現，當你滑鼠移到這些微光之上，導航內容便會呈現，漂亮而微妙。
Bancolombia
和許多之前的網站導航設計思路相近，漂亮的插畫和動態視覺元素共同構建起了它的導航欄。網站唯一與時代脫節的地方在於，它採用了Flash來實現這些功能，而非HTML5。
Nat-Ant
值得一提的是，使用極簡設計風其實也可以作出別出心裁的導航欄的。正如你所看到，網頁的著陸頁非常干凈，背景大量留白，幾個控制項散落在頁面上用作導航，不同尋常。
Love Carmen Rose
Love Carmen Rose 的網頁設計 也個性十足，精雕細琢的背景圖其實承載著它獨有的導航模式，雖然看起來不太顯眼，但是復雜的導航和背景圖也足夠它脫穎而出了，不是么?
Orillo
用戶打開 Orillo 網站的時候，能看到低調沉穩的背景上用簡約線條勾勒出來的控制中心。用戶可以藉助這個獨特的導航欄做很多事情，唯一可惜的是它僅能在桌面端瀏覽器上呈現，移動端頁面則使用的是另外一個相對簡單的版本。
OK Kid
OK Kid的網頁充分運用了視頻背景的特性來設計它們的基礎導航體系。設計團隊採用視覺優先的設計原則，最終結果也並沒有令人失望。
The Colors of Motion
網頁採用運動的色彩來呈現經典的美國精神，帶你開始一段旅程。結合影片劇情，設計團隊展現了一個原創而吸引人的導航設計，雖然沒有任何標識，但是那些細細的條紋會帶你走完這個旅程
HelloNicolas
從你打開這個網頁的第一秒開始，頁面所展示的作品就會吸引住你的全部注意力。網站的視覺設計非常大膽，整體布局導航通過相對較寬的可交互區域來展現，每一塊完成不同的工作。
Grimouville
想不想通過Grimouville 開始一段短暫而難忘的旅程?打開這個網站就可以了。網站中那些有趣的互動元素能讓你在城市的大街小巷中實現這個夢想。
Leidgens Piscines
網站的著陸頁令人難以忘懷：壯觀的視頻背景和風格化明顯的導航欄，這些設計不僅讓你愉悅，還能更為高效地探索網站。雅緻的菱形導航欄中，每個區塊包含著不同的功能和相應的短片。
Soppo
基於柵格的導航系統配合可愛的圖片營造出網站的整體氛圍，純色和圖片的錯落排布，不同區塊中獨特的效果，會讓你記住這個網站的。
Visit Brazil
這是一個真正意義上的概念網站。通過有趣的交互，你可以在這個網站知道關於巴西這個國家許多有趣的故事。
Alexandru Nastase
網站的設計師巧妙的利用排版和簡約的外觀，呈現出了網站有趣的氛圍。密集而大膽的標題周圍，圍繞著相對較小的文字導航，塑造出獨特的形式感。