專業(yè)課程顧問干老師,qq:2290425711,課程咨詢微信:ffeduhaha
Web全棧工程師就業(yè)班培訓(xùn)內(nèi)容:
1.美工設(shè)計(jì):設(shè)計(jì)美學(xué)、色彩搭配、網(wǎng)頁創(chuàng)意思維、網(wǎng)頁設(shè)計(jì)軟件、網(wǎng)頁元素設(shè)計(jì)、網(wǎng)頁界面設(shè)計(jì)、商業(yè)項(xiàng)目設(shè)計(jì)實(shí)訓(xùn)、階段考核
2.前端開發(fā):HTML5+CSS3布局與樣式、JavaScript交互開發(fā)、Web前端整站項(xiàng)目實(shí)訓(xùn)
3.移動(dòng)端開發(fā): H5高級(jí)功能、CSS3動(dòng)畫詳解、webAPP開發(fā)、微信公眾號(hào)開發(fā)、微信小程序開發(fā)、Vue.js實(shí)戰(zhàn)運(yùn)用、階段考核等
4.高級(jí)框架與后臺(tái)交互:Angular.js、React.js、PHP入門、DedeCMS等綜合應(yīng)用
5.就業(yè)指導(dǎo):心態(tài)與服務(wù)、商務(wù)禮儀、畢業(yè)設(shè)計(jì)、行業(yè)分析、面試技巧、實(shí)習(xí)工作等
培訓(xùn)目標(biāo):能系統(tǒng)全面的學(xué)習(xí)界面設(shè)計(jì)、前端開發(fā)、移動(dòng)端開發(fā)、后臺(tái)交互開發(fā)、網(wǎng)頁美工設(shè)計(jì),結(jié)業(yè)后相當(dāng)于有半年左右工作經(jīng)驗(yàn),能成功勝任設(shè)計(jì)、前端、移動(dòng)端開發(fā)等職位。
認(rèn)證證書:《網(wǎng)頁設(shè)計(jì)師》《網(wǎng)頁美工設(shè)計(jì)師》《Web前端工程師》
.......................................................................
網(wǎng)頁設(shè)計(jì)知識(shí)分享:幾種常見的翻頁方式
一、頁碼翻頁
跟書籍一樣的頁碼翻頁是zui經(jīng)典的一種翻頁方式。在瀑布流等交互形式還沒有流行起來的時(shí)候,網(wǎng)站運(yùn)用的基本上都是頁碼翻頁。
頁碼設(shè)計(jì)三個(gè)要素
頁碼數(shù)字陳列:頁碼數(shù)字陳列的作用是方便快速定位,通常會(huì)列出首頁和目前頁碼附近的頁碼。
逐頁翻頁:逐頁翻頁就是上一頁、下一頁了,必備的功能。用戶鼠標(biāo)可以定在同一個(gè)位置不停點(diǎn)擊,無須每次翻頁都看一眼頁碼到哪了。
跳進(jìn)翻頁:跳進(jìn)可以是跳到zui后一頁、首頁、后十頁、任意一頁等,現(xiàn)在很少有網(wǎng)站會(huì)設(shè)計(jì)跳到任意一頁了,畢竟很少有人記得想要查找的內(nèi)容具體在哪一頁。
以下是豆瓣的翻頁設(shè)計(jì),我覺得做得很出色。尤其是頁碼陳列部分,展現(xiàn)的是前2頁、后2頁和當(dāng)前頁碼附近的9頁。
豆瓣的翻頁設(shè)計(jì)
適宜的使用場景
檢索需求較強(qiáng)的功能,比如“我的收藏”“音樂庫”等,方便快速定位查找。
內(nèi)容固定的功能,比如資訊網(wǎng)站中,編輯寫的長達(dá)多頁的多圖長文,或者網(wǎng)絡(luò)文學(xué)網(wǎng)站里的電子書。
不適宜的場景
頁碼翻頁zui大的缺陷在于每次翻頁都需要點(diǎn)擊,而且要求點(diǎn)擊的精準(zhǔn)度高,比如必須點(diǎn)擊“下一頁”或者某個(gè)數(shù)字才能翻到想去的頁面。對于檢索需求弱,且內(nèi)容不斷更新的功能,比如微博,不建議使用頁碼翻頁。
二、自動(dòng)瀑布流
自動(dòng)瀑布流,指的分段式加載,當(dāng)用戶瀏覽到已加載的內(nèi)容底部時(shí),網(wǎng)頁會(huì)自動(dòng)加載后續(xù)內(nèi)容。
瀑布流是移動(dòng)互聯(lián)網(wǎng)爆發(fā)后興起的交互方式。那個(gè)時(shí)候,社交網(wǎng)絡(luò)、碎片化時(shí)間的概念如火如荼,很多網(wǎng)站將首頁以時(shí)間線+訂閱的方式呈現(xiàn),facebook、twitter均使用這種方式。用戶上網(wǎng)的目的不再是搜索有用資料,而是隨便看看、消磨無聊時(shí)間。上網(wǎng)習(xí)慣的改變自然帶來了瀑布式加載的流行。
適宜使用的場景
用戶的主要需求是瀏覽zui新內(nèi)容,比如資訊訂閱類、社交類網(wǎng)站。
不適宜的場景
由于瀑布流缺乏檢索功能,如果用戶需要頻繁查找老內(nèi)容,那么瀑布式加載會(huì)帶來嚴(yán)重阻礙。
三、手動(dòng)瀑布流
手動(dòng)瀑布流是需要用戶手動(dòng)點(diǎn)擊加載按鈕,才能獲得更多內(nèi)容的方式。手動(dòng)瀑布流分為兩種情況:向前翻頁和向后翻頁。向前翻頁通常是有時(shí)間線有新消息時(shí)的pop提醒,向后翻頁的結(jié)果和自動(dòng)瀑布流一樣,只是會(huì)出現(xiàn)一個(gè)按鈕,需要點(diǎn)擊才加載后續(xù)內(nèi)容。
適宜的使用場景
向前翻頁的瀑布流:適用于被動(dòng)更新的頁面。被動(dòng)更新指的是當(dāng)我停留在頁面時(shí),接收到了別人更新內(nèi)容,比如知乎、微博都會(huì)提醒你有xx條新內(nèi)容。
向后翻頁的瀑布流:適用于功能適合瀑布流,然而底部有內(nèi)容的網(wǎng)站。比如下圖。
人人都是產(chǎn)品經(jīng)理的翻頁設(shè)計(jì)
不過,我個(gè)人不看好向后翻頁的瀑布流,雖然不需要像頁碼那樣精準(zhǔn)定位,但仍然多出了一次點(diǎn)擊的步驟。如果不是有必須放在底部的內(nèi)容,可以考慮把原來底部的內(nèi)容以低調(diào)的方式放在側(cè)欄。比如像知乎這樣——
底部常見內(nèi)容被知乎放在了側(cè)欄
四、箭頭翻頁
箭頭翻頁是頁碼翻頁的簡化形式,去掉頁碼數(shù)字,同時(shí)把“上一頁”“下一頁”簡化成箭頭,如下圖。
豆瓣閱讀的箭頭翻頁
豆瓣音樂的箭頭翻頁
適宜使用的場景
模塊大小固定并且內(nèi)容較少,通常是展示型模塊,比如編輯推薦、今日特價(jià)。之所以運(yùn)用箭頭翻頁,有三點(diǎn)原因:
一是因?yàn)槟K大小固定不適合會(huì)擴(kuò)大模塊長度的瀑布流;
二是內(nèi)容較少?zèng)]有幾頁,顯示數(shù)字頁碼顯得累贅。
三是因?yàn)檎故灸K需要稍微華麗的交互效果,而箭頭翻頁容易做出比較炫的動(dòng)畫效果。
五、圓點(diǎn)頁碼
圓點(diǎn)頁碼是數(shù)字頁碼的簡化,即把頁碼數(shù)字變成圓點(diǎn),當(dāng)前頁碼用特殊顏色凸顯出來。
適宜使用的場景
演示型模塊,比如輪播banner。自動(dòng)輪換的banner之所以大部分使用圓點(diǎn)頁碼而非箭頭翻頁,是為了讓用戶知曉一共有幾張圖片,目前是第幾張。實(shí)際上,圓點(diǎn)頁碼的提示功能要多于操作功能。也有網(wǎng)頁同時(shí)使用圓點(diǎn)和箭頭,比如下圖——
蝦米演出的banner
不適宜的場景
用戶主動(dòng)翻頁需求較強(qiáng)的模塊。圓點(diǎn)頁碼就是為了簡潔美觀而誕生的,通常比數(shù)字頁碼點(diǎn)擊范圍小,不適合頻繁操作。
六、錨點(diǎn)滾輪翻頁
錨點(diǎn)滾輪翻頁指的是滾動(dòng)鼠標(biāo)滑輪后,頁面定位到下一個(gè)錨點(diǎn)。例子請見tumblr的產(chǎn)品介紹頁。這種翻頁方式的優(yōu)點(diǎn)有兩個(gè),第yi是可以交互動(dòng)畫效果酷炫;第二點(diǎn)是無須點(diǎn)擊,輕輕滾動(dòng)滑輪就直接定位到下一頁,非常方便。缺點(diǎn)是開發(fā)程序繁瑣,不適合網(wǎng)站里大量使用。
適宜使用的場景
具有展示功能的單頁,很多個(gè)人主頁、公司主頁都使用錨點(diǎn)滾動(dòng)翻頁。
免責(zé)聲明:以上信息是由學(xué)考網(wǎng)平臺(tái)用戶自行發(fā)布,所有內(nèi)容均由發(fā)布者對信息的真實(shí)性負(fù)責(zé),學(xué)考網(wǎng)僅提供信息發(fā)布、展示,不對用戶信息內(nèi)容的真實(shí)性負(fù)責(zé),請用戶自行甄別,謹(jǐn)防受騙!!