手機客戶端交互設(shè)計原則及信息展現(xiàn)方式

8 評論 10702 瀏覽 7 收藏 10 分鐘

在手機上瀏覽信息,存在著太多的局限,手機屏幕小注定了一頁不能顯示太多的信息,環(huán)境光線的變化注定頁面設(shè)計不能過于花哨,流量限制注定不能有太多的圖片和樣式。

如果讓你的用戶直接在手機上瀏覽為web所設(shè)計的網(wǎng)頁,即使是經(jīng)過一些手機瀏覽器的優(yōu)化,體驗還是會很糟糕,甚至有時候會讓人難以忍受。

如何調(diào)整信息展現(xiàn)方式,使內(nèi)容能在小屏幕的手機上也更友好的展現(xiàn)呢?接下來我將通過一些原理和實例來闡述自己的觀點。

首先,老祖宗Ben Shneiderman的交互設(shè)計8項黃金法則我們要銘記于心,因為這些法則也是適用于移動互聯(lián)網(wǎng)的基本法則——

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

其次,針對手機上的交互設(shè)計原則,還有以下需要補充的一些點——

  1. 盡量減少操作的步驟
  2. 盡量利用點擊來代替輸入
  3. 時刻讓用戶知道自己所處的位置
  4. 與web保持一致且數(shù)據(jù)同步
  5. 為輸入法讓出空間

而對于手機上的信息展示方式而已,則是本文討論的重點,也是從《Mobile Interaction Design》一書上受到了些啟發(fā)。

手機上的信息展現(xiàn),一方面要有利于你找到需要的信息,一方面要提供友好的方式閱讀你需要的信息。為了在手機上有效的支持這兩個任務(wù),手機網(wǎng)站交互設(shè)計中的信息設(shè)計需要滿足以下幾條:

  1. 摘要形式展現(xiàn)信息
  2. 導(dǎo)航和提示處于明顯的位置
  3. 減少滾動

一、摘要形式展示信息

因為手機上的信息展現(xiàn)和web上的信息展現(xiàn)都有一個共同的出發(fā)點——方便閱讀。任何有助于用戶迅速判斷某條信息是否有價值的方式都可以借鑒,以防止用戶花了大量的時間去閱讀一些對他來說沒有意義的內(nèi)容。因為web可以展現(xiàn)很詳細(xì)的信息,而手機上顯示一篇稍微長點的文章就需要好幾頁,所以我們不能把一篇篇文章直接適配到手機版就可以了,而且需要提供一個新的方式,讓用戶可以總攬全局,一下子看到所有的文章,這就需要把信息縮略成摘要的形式,但是這也需要分情況考慮,比如以下幾個例子——

?1、對于新聞來說,需要顯示標(biāo)題

2、對于博客來說,需要顯示標(biāo)題+時間+評論

如果http://elyaaa.com 不經(jīng)過適配直接加載到手機上,樣式如上,體驗很不好,即使是大屏幕的觸屏手機也需要縮放+滾動操作才能看到全貌

而經(jīng)過了優(yōu)化的http://elyaaa.com/wap/index-wap2.php 卻可以提供足夠好的體驗,以列表的形式展現(xiàn)信息,用戶可以第一時間獲知網(wǎng)站的概況,迅速找到有效信息進行瀏覽

3. 對于論壇來說,需要顯示標(biāo)題+作者+時間

人人網(wǎng)的日志展現(xiàn)形式,就接近于論壇的展現(xiàn)要求,顯示了詳細(xì)的標(biāo)題、作者和發(fā)表時間。之后只需要一步操作就可以打開日志,快速的索引和良好的體驗給該客戶端增色不少。

4、對于微博來說,需要顯示全部

新浪微博android客戶端信息以摘要形式顯示,單擊或長按展開,顯示詳細(xì)信息,再單擊彈出操作框。這樣一方面增加操作步驟,給用戶帶來負(fù)擔(dān),另一方面需要一條條的去展開,影響流暢的閱讀體驗。

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

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

二、導(dǎo)航和提示處于明顯的位置

新浪微博android客戶端提供了明確的提示信息和導(dǎo)航信息,但是缺點是這類新信息提醒最好是可以操作的

Android上的Twitter客戶端TweeCaster提供了一個提示和導(dǎo)航集成到一起的解決方案,而且保證了可操作性,體驗很好。

三、減少滾動

顯而易見,用戶在web上就很討厭滾動操作,在手機上更是如此。但是我們面對的問題是,手機客戶端需要把大量的信息整合到終端上展現(xiàn)給用戶,勢必造成一些不得不進行的滾動和翻頁。為了減少垂直滾動,我們可以按照以下方式來布置內(nèi)容——

1. 將一些導(dǎo)航功能(菜單欄等)固定的放在頁面的頂端或底端
2. 將十分重要的信息放置在靠近頂部的位置

比較新浪微博wap版和騰訊微博wap可知道,騰訊做了更多的調(diào)研,他們把“刷新”這個操作放在第一權(quán)重的位置上,而新浪微博的刷新則要經(jīng)過至少四步操作才能到達(非觸屏版),即使是觸屏版,這個“刷新”所在的位置也讓它不利于點擊。
3. 減少每一頁的信息量,讓內(nèi)容更簡練而不冗長
4. 重要的操作可以重復(fù)布置在頁面的最底端

暫時只做一些手機客戶端交互設(shè)計原則上的探討,以后將陸續(xù)研究一些設(shè)計方法。

轉(zhuǎn)載注明:來源于http://elyaaa.com/userexp/510.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!