互動式UI設計指南

發表於2013-05-20

來源 盒子UI

互動式UI設計指南

Web開發社群有著大量的互動式設計輕鬆解決方案。雖然現在大多數網站都能夠做到互動性了,但是我們需要不斷向前、創新。我們很容易將注意力集中到編碼方面,但是有時候不同螢幕尺寸的實際設計考慮卻往往被忽視。

很多互動式設計學習資料都談到了基礎的方面,比如利用桌面的多餘空間,使手機上的顯示更簡單。然而,很多東西沒有超出這些基礎知識。隨著各種尺寸螢幕的出現,我們需要進一步思考設計和使用者體驗這些方面。

1.桌面

大多數使用者體驗原則都是有關桌面網站的。市面上使用者多使用鍵盤,觸控板,滑鼠,這使我們有更多的設計可能性來堅持優質的使用者體驗。然而,我們仍然要堅持一些指導原則,互動式設計方案就能夠保證我們的設計在不同的螢幕尺寸之間完美切換。

互動式UI設計指南

需要考慮的幾點

桌面設計有以下幾點考慮:

• 延展式網格設計,這種設計能夠讓使用者輕鬆找到感興趣的內容 • 水平式導航,子選單,大下拉選單來輕鬆過濾內容 • 互動式和延展式頁面更適合桌面式網站 • 為廣告,側邊內容,額外介紹,電話應答留下足夠空間 • 導航條可以用來引導使用者點選,但在小螢幕上不適合用 • 掌握瞭解新的技術,包括那些能夠影響設計和使用者體驗的 • 寬的頁尾,頁邊等等

網站應該利用桌面強大的可擴充套件性來給使用者提供更多選擇。在使用者使用過了手機或者平板應用之後,他應該被引導去使用桌面版應用,這樣才能獲得更多的功能和更完善的使用者體驗。

從使用者體驗角度來說,一定要確認桌面設計是彈性化的,可以在不同螢幕尺寸大小之間無縫切換,並同樣擁有鍵盤等傳統桌面操作功能。上網本雖然沒有以前那麼流行,但是同樣需要考慮其體驗,它同傳統電腦比只是尺寸上小了一點。

2.平板

平板電腦越來越流行,而且平板電腦很可能不是一個瞬間即逝的流星,它將作為一個新的網路互動的發展趨勢長時間發展下去。所以在做平板的使用者體驗時我們一定不要把它的設計理解為”第二名”的桌面設計。它的設計完全可以獨立於桌面設計,我們應該獨立尋求新的使用者體驗互動方式。互動式UI設計指南

平板電腦的最大特性就是觸控性。這要求我們用新的方式去開發新的使用者體驗。然而目前很多使用者仍停留在基本的上網、點選上面。所以我們有責任去開發越來越多的觸控式使用者體驗。

需要考慮的幾點:

在平板開發時我們一定偏像app意識的開發、設計,儘量不去貼近桌面設計:

• 更大的觸控空間,尤其是導航鍵。能用一隻手指頭操作,這在平板開發中太重要了。

• 標籤欄、摺疊式選單在觸屏式設計中尤為重要。因為這樣能夠節省大量空間。而且不要只是僅僅把它們用在側邊欄上,而是把它們融合到整個網站上。 • 千萬不要認為平板設計只是把桌面網站設計整體縮小簡化,否則你將會失去很多實用性。 • 用按鈕或者按鈕類設計來完成簡單操作,比如連結。 • 不要認為所以使用者跟你用同樣牌子的平板,甚至要考慮作出後退前進的按鈕來。 • 設計應該針對視網膜顯示進行優化,雖然目前只有iPod擁有視網膜顯示,但是我們不得不承認大多人還是在用iPod的。

3.手機,移動端

節省空間不得不說是最重要的。在開發時同時要永遠記得,可能一個桌面使用者更傾向於網站的功能性,互動性,然後一個移動使用者更多的只是為了看到內容,做一些簡單操作,但一定要快。

互動式UI設計指南

需要考慮的幾點:

除了大的觸控式螢幕按鈕設計需要考慮外,移動手機端開發應注意以下幾點:

• 使用最簡單的互動方式,儘量減少額外的功能性。讓使用者集中在最重要的操作上。 • 對於內容很多的網站,儘量將過濾器做的友好,使用者不喜歡在螢幕上敲字,最好能夠讓他們直接選擇一些分類類別。 • 儘量用最少的設計展示自己的網站,別佔用太多功能性區域。 • 大點的字型和更好的型別顯示。儘量不要讓使用者放大放大再放大! • 在一些大塊內容前加摘要,從而方面他們刪選內容。

• 標籤,伸展式選單,導航永遠都很重要! • 儘量不用彈出框,通知,廣告,如果有請儘量做得友好。 • 如果可能,儘量保重移動端網站上一直保持最少數目的頁面。當然這個不是在所有的網站上都通用,但是如果考慮到,最好用javascript開切換內容,避免過長內容。

互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南 互動式UI設計指南

4.結論

平板和手機使用者預計將在2015年超過桌面使用者。考慮到這點,我們不僅僅需要學會互動式設計。我們更要對三種不同平臺的設計擁有不同的設計理念,但同時也要保持不同平臺間的一致性。我要記住圖片顯示要友好,觸控方式也要有好,內容顯示要合理。當然,最大的問題就是解決不同螢幕尺寸之間怎麼組織和顯示網站內容。

 

相關文章