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ì)和用戶(hù)體驗(yàn)這些方面。

1.桌面

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

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

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

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

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

從用戶(hù)體驗(yàn)角度來(lái)說(shuō)，一定要確認(rèn)桌面設(shè)計(jì)是彈性化的，可以在不同屏幕尺寸大小之間無(wú)縫切換，并同樣擁有鍵盤(pán)等傳統(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ā)展下去。所以在做平板的用戶(hù)體驗(yàn)時(shí)我們一定不要把它的設(shè)計(jì)理解為"第二名"的桌面設(shè)計(jì)。它的設(shè)計(jì)完全可以獨(dú)立于桌面設(shè)計(jì)，我們應(yīng)該獨(dú)立尋求新的用戶(hù)體驗(yàn)交互方式。

平板電腦的最大特性就是觸摸性。這要求我們用新的方式去開(kāi)發(fā)新的用戶(hù)體驗(yàn)。然而目前很多用戶(hù)仍停留在基本的上網(wǎng)、點(diǎn)擊上面。所以我們有責(zé)任去開(kāi)發(fā)越來(lái)越多的觸摸式用戶(hù)體驗(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í)用性。
? 用按鈕或者按鈕類(lèi)設(shè)計(jì)來(lái)完成簡(jiǎn)單操作，比如鏈接。
? 不要認(rèn)為所以用戶(hù)跟你用同樣牌子的平板，甚至要考慮作出后退前進(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è)桌面用戶(hù)更傾向于網(wǎng)站的功能性，交互性，然后一個(gè)移動(dòng)用戶(hù)更多的只是為了看到內(nèi)容，做一些簡(jiǎn)單操作，但一定要快。

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

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

? 使用最簡(jiǎn)單的交互方式，盡量減少額外的功能性。讓用戶(hù)集中在最重要的操作上。
? 對(duì)于內(nèi)容很多的網(wǎng)站，盡量將過(guò)濾器做的友好，用戶(hù)不喜歡在屏幕上敲字，最好能夠讓他們直接選擇一些分類(lèi)類(lèi)別。
? 盡量用最少的設(shè)計(jì)展示自己的網(wǎng)站，別占用太多功能性區(qū)域。
? 大點(diǎn)的字體和更好的類(lèi)型顯示。盡量不要讓用戶(hù)放大放大再放大！
? 在一些大塊內(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ī)用戶(hù)預(yù)計(jì)將在2015年超過(guò)桌面用戶(hù)。考慮到這點(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)容。

SDC翻茄匠：光 QQ：644509407
編輯：伍月懵豬
原文地址：http://tympanus.net/codrops/2013/01/21/ui-design-guidelines-for-responsive-design/
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。

【特色推薦】
設(shè)計(jì)講座：每月邀請(qǐng)國(guó)內(nèi)互聯(lián)網(wǎng)公司設(shè)計(jì)前輩及行業(yè)總監(jiān)在群內(nèi)及YY語(yǔ)音（YY頻道：15335158）分享實(shí)戰(zhàn)經(jīng)驗(yàn)。
設(shè)計(jì)微博：擁有粉絲量27萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：