手機客戶端交互設計原則及信息展示方式

手機客戶端交互設計原則及信息展示方式

在手機上瀏覽信息，存在着太多的侷限，手機屏幕小注定了一頁不能顯示太多的信息，環境光線的變化註定頁面設計不能過於花哨，流量限制註定不能有太多的圖片和樣式。

若是讓你的用戶直接在手機上瀏覽爲web所設計的網頁，即便是通過一些手機瀏覽器的優化，體驗仍是會很糟糕，甚至有時候會讓人難以忍受。

如何調整信息展示方式，使內容能在小屏幕的手機上也更友好的展示呢？接下來我將經過一些原理和實例來闡述本身的觀點。

首先，老祖宗Ben Shneiderman的交互設計8項黃金法則咱們要銘記於心，由於這些法則也是適用於移動互聯網的基本法則——

1. Strive for consistency.力求一致
2. Enable frequent users to use shortcuts.容許頻繁的使用快捷鍵
3. Offer informative feedback.提供明確的反饋
4. Design dialog to yield closure.設計對話，告訴用戶任務已完成
5. Offer simple error handling.提供錯誤預防和簡單的糾錯能力
6. Permit easy reversal of actions.應該方便用戶取消某個操做
7. Support internal locus of control.用戶應掌握控制權
8. Reduce short-term memory load.減輕用戶的記憶負擔

其次，針對手機上的交互設計原則，還有如下須要補充的一些點——

1. 儘可能減小操做的步驟
2. 儘可能利用點擊來代替輸入
3. 時刻讓用戶知道本身所處的位置
4. 與web保持一致且數據同步
5. 爲輸入法讓出空間

而對於手機上的信息展現方式而言，則是本文討論的重點，也是從《Mobile Interaction Design》一書上受到了些啓發。

手機上的信息展示，一方面要有利於你找到須要的信息，一方面要提供友好的方式閱讀你須要的信息。爲了在手機上有效的支持這兩個任務，手機網站交互設計中的信息設計須要知足如下幾條：

1. 摘要形式展示信息
2. 導航和提示處於明顯的位置
3. 減小滾動

1、摘要形式展現信息

由於手機上的信息展示和web上的信息展示都有一個共同的出發點——方便閱讀。任何有助於用戶迅速判斷某條信息是否有價值的方式均可以借鑑，以防止用戶花了大量的時間去閱讀一些對他來講沒有意義的內容。由於web能夠展示很詳細的信息，而手機上顯示一篇稍微長點的文章就須要好幾頁，因此咱們不能把一篇篇文章直接適配到手機版就能夠了，並且須要提供一個新的方式，讓用戶能夠總攬全局，一會兒看到全部的文章，這就須要把信息縮略成摘要的形式，可是這也須要分狀況考慮，好比如下幾個例子——

1、對於新聞來講，須要顯示標題

 

2、對於博客來講，須要顯示標題+時間+評論

 

若是http://elya.cc 不通過適配直接加載到手機上，樣式如上，體驗很很差，即便是大屏幕的觸屏手機也須要縮放+滾動操做才能看到全貌

 

而通過了優化的http://elya.cc/wap/index-wap2.php 卻能夠提供足夠好的體驗，以列表的形式展示信息，用戶能夠第一時間獲知網站的概況，迅速找到有效信息進行瀏覽

3. 對於論壇來講，須要顯示標題+做者+時間

 

人人網的日誌展示形式，就接近於論壇的展示要求，顯示了詳細的標題、做者和發表時間。以後只須要一步操做就能夠打開日誌，快速的索引和良好的體驗給該客戶端增色很多。

4、對於微博來講，須要顯示所有

 

新浪微博android客戶端信息以摘要形式顯示，單擊或長按展開，顯示詳細信息，再單擊彈出操做框。這樣一方面增長操做步驟，給用戶帶來負擔，另外一方面須要一條條的去展開，影響流暢的閱讀體驗。

 

Twitter的android客戶端Twidroid以全文方式顯示Twitter信息，單擊彈層選擇操做。即簡化了操做步驟，又有利於快速瀏覽。

 

Twitter的android客戶端Twigee也是以全文方式顯示Twitter信息，單擊打開新頁面選擇操做。也是在簡化操做步驟的同時提升了瀏覽體驗。

2、導航和提示處於明顯的位置

 

新浪微博android客戶端提供了明確的提示信息和導航信息，可是缺點是這類新信息提醒最好是能夠操做的

 

Android上的Twitter客戶端TweeCaster提供了一個提示和導航集成到一塊兒的解決方案，並且保證了可操做性，體驗很好。

3、減小滾動

顯而易見，用戶在web上就很討厭滾動操做，在手機上更是如此。可是咱們面對的問題是，手機客戶端須要把大量的信息整合到終端上展示給用戶，勢必形成一些不得不進行的滾動和翻頁。爲了減小垂直滾動，咱們能夠按照如下方式來佈置內容——

1. 將一些導航功能（菜單欄等）固定的放在頁面的頂端或底端

2. 將十分重要的信息放置在靠近頂部的位置

 

比較新浪微博wap版和騰訊微博wap可知道，騰訊作了更多的調研，他們把「刷新」這個操做放在第一權重的位置上，而新浪微博的刷新則要通過至少四步操做才能到達（非觸屏版），即便是觸屏版，這個「刷新」所在的位置也讓它不利於點擊。

3. 減小每一頁的信息量，讓內容更簡練而不冗長

4. 重要的操做能夠重複佈置在頁面的最底端

暫時只作一些手機客戶端交互設計原則上的探討，之後將陸續研究一些設計方法