來(lái)源 盒子UI

Web開(kāi)發(fā)社區(qū)有著大量的交互式設(shè)計(jì)輕松解決方案,。雖然現(xiàn)在大多數(shù)網(wǎng)站都能夠做到交互性了，但是我們需要不斷向前,、創(chuàng)新,。我們很容易將注意力集中到編碼方面，但是有時(shí)候不同屏幕尺寸的實(shí)際設(shè)計(jì)考慮卻往往被忽視,。

很多交互式設(shè)計(jì)學(xué)習(xí)資料都談到了基礎(chǔ)的方面,，比如利用桌面的多余空間，使手機(jī)上的顯示更簡(jiǎn)單。然而,，很多東西沒(méi)有超出這些基礎(chǔ)知識(shí),。隨著各種尺寸屏幕的出現(xiàn)，我們需要進(jìn)一步思考設(shè)計(jì)和用戶體驗(yàn)這些方面,。

1.桌面

大多數(shù)用戶體驗(yàn)原則都是有關(guān)桌面網(wǎng)站的,。市面上用戶多使用鍵盤，觸摸板,，鼠標(biāo),，這使我們有更多的設(shè)計(jì)可能性來(lái)堅(jiān)持優(yōu)質(zhì)的用戶體驗(yàn)。然而,，我們?nèi)匀灰獔?jiān)持一些指導(dǎo)原則,，交互式設(shè)計(jì)方案就能夠保證我們的設(shè)計(jì)在不同的屏幕尺寸之間完美切換。

需要考慮的幾點(diǎn)

桌面設(shè)計(jì)有以下幾點(diǎn)考慮：

· 延展式網(wǎng)格設(shè)計(jì),，這種設(shè)計(jì)能夠讓用戶輕松找到感興趣的內(nèi)容 · 水平式導(dǎo)航,，子菜單，大下拉菜單來(lái)輕松過(guò)濾內(nèi)容 · 交互式和延展式頁(yè)面更適合桌面式網(wǎng)站 · 為廣告,，側(cè)邊內(nèi)容,，額外介紹，電話應(yīng)答留下足夠空間 · 導(dǎo)航條可以用來(lái)引導(dǎo)用戶點(diǎn)擊,，但在小屏幕上不適合用 · 掌握了解新的技術(shù),，包括那些能夠影響設(shè)計(jì)和用戶體驗(yàn)的 · 寬的頁(yè)腳，頁(yè)邊等等

網(wǎng)站應(yīng)該利用桌面強(qiáng)大的可擴(kuò)展性來(lái)給用戶提供更多選擇,。在用戶使用過(guò)了手機(jī)或者平板應(yīng)用之后,，他應(yīng)該被引導(dǎo)去使用桌面版應(yīng)用，這樣才能獲得更多的功能和更完善的用戶體驗(yàn),。

從用戶體驗(yàn)角度來(lái)說(shuō),，一定要確認(rèn)桌面設(shè)計(jì)是彈性化的，可以在不同屏幕尺寸大小之間無(wú)縫切換,，并同樣擁有鍵盤等傳統(tǒng)桌面操作功能,。上網(wǎng)本雖然沒(méi)有以前那么流行，但是同樣需要考慮其體驗(yàn),，它同傳統(tǒng)電腦比只是尺寸上小了一點(diǎn),。

2.平板

平板電腦越來(lái)越流行，而且平板電腦很可能不是一個(gè)瞬間即逝的流星,，它將作為一個(gè)新的網(wǎng)絡(luò)交互的發(fā)展趨勢(shì)長(zhǎng)時(shí)間發(fā)展下去,。所以在做平板的用戶體驗(yàn)時(shí)我們一定不要把它的設(shè)計(jì)理解為”第二名”的桌面設(shè)計(jì)。它的設(shè)計(jì)完全可以獨(dú)立于桌面設(shè)計(jì),，我們應(yīng)該獨(dú)立尋求新的用戶體驗(yàn)交互方式,。

平板電腦的最大特性就是觸摸性,。這要求我們用新的方式去開(kāi)發(fā)新的用戶體驗(yàn)。然而目前很多用戶仍停留在基本的上網(wǎng),、點(diǎn)擊上面,。所以我們有責(zé)任去開(kāi)發(fā)越來(lái)越多的觸摸式用戶體驗(yàn)。

需要考慮的幾點(diǎn)：

在平板開(kāi)發(fā)時(shí)我們一定偏像app意識(shí)的開(kāi)發(fā),、設(shè)計(jì),，盡量不去貼近桌面設(shè)計(jì)：

· 更大的觸摸空間，尤其是導(dǎo)航鍵,。能用一只手指頭操作,，這在平板開(kāi)發(fā)中太重要了。

· 標(biāo)簽欄,、折疊式菜單在觸屏式設(shè)計(jì)中尤為重要,。因?yàn)檫@樣能夠節(jié)省大量空間。而且不要只是僅僅把它們用在側(cè)邊欄上,，而是把它們?nèi)诤系秸麄€(gè)網(wǎng)站上,。 · 千萬(wàn)不要認(rèn)為平板設(shè)計(jì)只是把桌面網(wǎng)站設(shè)計(jì)整體縮小簡(jiǎn)化，否則你將會(huì)失去很多實(shí)用性,。 · 用按鈕或者按鈕類設(shè)計(jì)來(lái)完成簡(jiǎn)單操作,，比如鏈接。 · 不要認(rèn)為所以用戶跟你用同樣牌子的平板,，甚至要考慮作出后退前進(jìn)的按鈕來(lái),。 · 設(shè)計(jì)應(yīng)該針對(duì)視網(wǎng)膜顯示進(jìn)行優(yōu)化，雖然目前只有iPod擁有視網(wǎng)膜顯示,，但是我們不得不承認(rèn)大多人還是在用iPod的,。

3.手機(jī)，移動(dòng)端

節(jié)省空間不得不說(shuō)是最重要的,。在開(kāi)發(fā)時(shí)同時(shí)要永遠(yuǎn)記得,，可能一個(gè)桌面用戶更傾向于網(wǎng)站的功能性，交互性,，然后一個(gè)移動(dòng)用戶更多的只是為了看到內(nèi)容,，做一些簡(jiǎn)單操作，但一定要快,。

需要考慮的幾點(diǎn)：

除了大的觸摸屏按鈕設(shè)計(jì)需要考慮外，移動(dòng)手機(jī)端開(kāi)發(fā)應(yīng)注意以下幾點(diǎn)：

· 使用最簡(jiǎn)單的交互方式,，盡量減少額外的功能性,。讓用戶集中在最重要的操作上。 · 對(duì)于內(nèi)容很多的網(wǎng)站,，盡量將過(guò)濾器做的友好,，用戶不喜歡在屏幕上敲字，最好能夠讓他們直接選擇一些分類類別,。 · 盡量用最少的設(shè)計(jì)展示自己的網(wǎng)站,，別占用太多功能性區(qū)域。 · 大點(diǎn)的字體和更好的類型顯示,。盡量不要讓用戶放大放大再放大,！ · 在一些大塊內(nèi)容前加摘要，從而方面他們刪選內(nèi)容,。

· 標(biāo)簽,，伸展式菜單，導(dǎo)航永遠(yuǎn)都很重要,！ · 盡量不用彈出框,，通知，廣告,，如果有請(qǐng)盡量做得友好,。 · 如果可能，盡量保重移動(dòng)端網(wǎng)站上一直保持最少數(shù)目的頁(yè)面,。當(dāng)然這個(gè)不是在所有的網(wǎng)站上都通用,，但是如果考慮到，最好用javascript開(kāi)切換內(nèi)容,，避免過(guò)長(zhǎng)內(nèi)容,。

4.結(jié)論

平板和手機(jī)用戶預(yù)計(jì)將在2015年超過(guò)桌面用戶?？紤]到這點(diǎn),，我們不僅僅需要學(xué)會(huì)交互式設(shè)計(jì)。我們更要對(duì)三種不同平臺(tái)的設(shè)計(jì)擁有不同的設(shè)計(jì)理念,，但同時(shí)也要保持不同平臺(tái)間的一致性,。我要記住圖片顯示要友好，觸摸方式也要有好,，內(nèi)容顯示要合理,。當(dāng)然，最大的問(wèn)題就是解決不同屏幕尺寸之間怎么組織和顯示網(wǎng)站內(nèi)容,。