網(wǎng)頁與交互設(shè)計(jì)趨勢(shì)課件

1、點(diǎn)擊添加標(biāo)題點(diǎn)擊添加標(biāo)題點(diǎn)擊添加標(biāo)題點(diǎn)擊添加標(biāo)題在互聯(lián)網(wǎng)的世界，設(shè)計(jì)與開發(fā)本來魏晉分明，但隨著時(shí)代的新陳代謝，這個(gè)界限已變得越來越模糊。事實(shí)是，互聯(lián)網(wǎng)已經(jīng)有太多免費(fèi)的產(chǎn)品，用戶也變得越來越挑剔，在一個(gè)用戶為王的時(shí)代，如果你沒有辦法滿足用戶真正的需求，他們瞬間就可拋棄你的產(chǎn)品。經(jīng)歷了2011ipad的誕生和沖擊，2012，毫無疑問將是交互設(shè)計(jì)嶄新的開始。在一個(gè)筆記本、臺(tái)式電腦，智能手機(jī)、上網(wǎng)本、平板電腦等新生代設(shè)備風(fēng)生水起的時(shí)代， 媒介的能力和手段都在隨之發(fā)生巨大改變。YOO YOUNG SEOK2011年智能手機(jī)出貨量超過PC，導(dǎo)致用戶在手機(jī)上花費(fèi)的時(shí)間遠(yuǎn)遠(yuǎn)超出PC，同時(shí)，越來越多的網(wǎng)站支持移

2、動(dòng)設(shè)備的訪問，社交網(wǎng)站使用率的爆炸性增長(zhǎng)，人們對(duì)信息互動(dòng)和分享更加熱衷。 PC時(shí)代終結(jié)，移動(dòng)領(lǐng)跑未來移動(dòng)時(shí)代帶來什么？1、用戶間的社交行為更加便捷、頻繁2、基于智能手機(jī)Gps、觸屏、3d陀螺儀的特點(diǎn)， 會(huì)涌現(xiàn)更多優(yōu)秀的產(chǎn)品運(yùn)用3、手機(jī)電子支付4、二維碼運(yùn)用5、虛擬現(xiàn)實(shí)移動(dòng)時(shí)代來臨，內(nèi)容為王，交互設(shè)計(jì)從形式向功能轉(zhuǎn)變，注重信息的傳遞、互動(dòng)，設(shè)計(jì)變的不再重要。 持續(xù)聯(lián)系持續(xù)聯(lián)系網(wǎng)頁交互設(shè)計(jì)上注重人與人之間持續(xù)聯(lián)系、分享一切，強(qiáng)化人的交流互動(dòng)。信息推送信息推送系統(tǒng)整合信息、呈現(xiàn)有效信息的過程，可以是通知、私信、評(píng)論、電話、短信、微博信息、SNS中好友動(dòng)態(tài)和閱讀器中推薦閱讀的內(nèi)容等。優(yōu)勢(shì)優(yōu)勢(shì)減少獲取信

3、息的時(shí)間。避免重復(fù)信息獲取。過濾垃圾信息和推送即時(shí)有效的信息。侵占用戶使用時(shí)間，增加產(chǎn)品粘度。持續(xù)聯(lián)系&信息推送多平臺(tái)、多設(shè)備瀏覽的統(tǒng)一性帶來交互設(shè)計(jì)全新挑戰(zhàn) 響應(yīng)性設(shè)計(jì)：響應(yīng)性設(shè)計(jì)：1對(duì)對(duì)N模式模式 網(wǎng)頁能夠隨著屏幕的變化而適應(yīng)變化。通過對(duì)不同的瀏覽器寬度用不同的CSS來進(jìn)行渲染，能夠控制在不同寬度下個(gè)元素的表現(xiàn)效果。如何應(yīng)對(duì)如何應(yīng)對(duì)復(fù)雜的環(huán)境復(fù)雜的環(huán)境HTML 5+CSS 3 FlashFlash將不是王者，HTML5成為舞臺(tái)的主角，CSS3+HTML5將會(huì)得到更廣泛的應(yīng)用。Web App PK Native Appeb App的優(yōu)勢(shì)：的優(yōu)勢(shì)：開發(fā)成本低，適配多種移動(dòng)設(shè)備，更新容易

4、，無需安裝 Web App的劣勢(shì)：的劣勢(shì)：短期內(nèi)還無法超越原生應(yīng)用，不支持離線模式，消息推送不夠及時(shí)，調(diào)用本地文件系統(tǒng)的能力弱HTML 5+CSS 3 FlashFlash將不是王者，HTML5成為舞臺(tái)的主角，CSS3+HTML5將會(huì)得到更廣泛的應(yīng)用。Web App PK Native AppNative App的優(yōu)勢(shì)：的優(yōu)勢(shì)：提供最佳的用戶體驗(yàn)，最優(yōu)質(zhì)的用戶界面，最華麗的交互，針對(duì)不同平臺(tái)提供不同體驗(yàn)，可節(jié)省帶寬成本，訪問本地資源，盈利模式明朗。 Native App的劣勢(shì)：的劣勢(shì)：移植到不同平臺(tái)上比較麻煩，維持多個(gè)版本的成本比較高，需要通過store或market的確認(rèn)，盈利需要與第三方分

5、成。對(duì)于設(shè)計(jì)師而言比較理想化結(jié)果是，開發(fā)成本低、輕松跨平臺(tái)、迭代更新快。設(shè)計(jì)上更強(qiáng)調(diào)瀏覽的舒適性，布局上越來越簡(jiǎn)潔。中心定位，雙欄布局，依然占據(jù)著主導(dǎo)地位。 布局 Layout 基本的布局樣式：基本的布局樣式：基本的布局樣式：基本的布局樣式： 網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。使用柵格系統(tǒng)讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。網(wǎng)頁設(shè)計(jì)上將更加的靈活與規(guī)范。設(shè)計(jì)上更強(qiáng)調(diào)瀏覽的舒適性，布局上越來越簡(jiǎn)潔。中心定位，雙欄布局，依然占據(jù)著主導(dǎo)地位。 布局 Layout 網(wǎng)頁柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來。使用柵格系統(tǒng)讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。網(wǎng)頁設(shè)計(jì)上將更加的靈活與規(guī)范。大圖片大圖片精致圖片勝過千言萬語。寬帶的發(fā)展使其更具可行性。給人印象深刻的圖片能為用戶創(chuàng)造一個(gè)身臨其境的體驗(yàn)?！按蟆睍r(shí)代登場(chǎng) 大標(biāo)題大標(biāo)題雜志、報(bào)紙的設(shè)計(jì)師一直使用的大標(biāo)題，以吸引用戶的注意和購買。大字體已證明更有吸引力和明晰溝通?！按蟆睍r(shí)代登場(chǎng) 極簡(jiǎn)設(shè)計(jì)極簡(jiǎn)設(shè)計(jì)是呈現(xiàn)最基本的元素，并摒棄所有多余結(jié)構(gòu)，色彩，圖形和其他素材的設(shè)計(jì)方法。其目