DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論之Rich設計模式
設計理論之Rich設計模式
編輯:關於網頁技巧     

但凡設計師都對簡潔的設計情有獨鐘,我們不喜歡復雜,卻也不能不會rich。

先來看下“rich”在字典裡的意思

  1. having an abundant supply of desirable qualities or substances;
  2. of great worth or quality;
  3. very productive;…

可見,“rich”即暗示比滿足普遍需要或期望的要多。

那麼以RIA為例,來看下RIA(Rich Internet applications富互聯網應用程序)比IA(Internet applications)多在哪?

更快、更直接的互動、更仿真、更流暢的體驗、更cool、更好玩、更易安裝、更容易傳播、更安全…更容易使用戶迷惑、更復雜、更容易不切實際、更難部署、更高開發成本…

——可見,多出來的既有優點也有缺點。

我們假設B=f(U,E),即行為(Behavior)是一種以用戶(User)與環境(Environment)為變量的函數(function)。

我們想要通過交互設計創建一個符合邏輯的流程以及在其中進行的符合意料的行為,但是我們不能直接控制用戶,我們需要通過交互、界面設計等,找到有效控制環境的方式。因此,我們要仔細的研習下更“rich”的控制與體驗並不斷探索。以RIA為例,這種探索包括了解其應用類型與常用模式,了解其設計挑戰與風險,在設計其應用時注意揚長避短,並學會評估由此形成的效應。

應用類型與常用模式

RIA從應用上可以做為:

  • 單獨的軟件、widget(脫離浏覽器在桌面上運行)
  • 網站的某些部分(在浏覽器中有效地運行)
  • 添加到傳統的網頁的“豐富組件”(來導航或互動)

且目前已有以下幾種類型的應用:

  • 信息/參考應用:網絡/本地資源的整合,搜索,多媒體,用戶參與…
  • 資源浏覽/編輯應用:浏覽,閱讀,檢索、分類,協作,發布…
  • 電子商務應用:購物,數據庫浏覽…
  • 實用應用:提示,過濾,幫助,向導…
  • 娛樂應用:游戲…
  • 營銷應用:廣告…

先將這些應用中RIA的模式窮舉一下:

再將這些模式分解

交互——每一種模式都以一種交互開始

懸浮、鼠標滑過、點擊、釋放、快捷鍵、拖拽、移動、選擇、定焦、調整大小…

操作

查找——“我需要的時候能找到信息”
自動匹配、載入內容、縮小選擇、及時搜索、精確搜索、動態過濾、細節縮放、隨需刷新、懸停出現的詳細信息、原位替換、可調整大小的模塊、滾動的模塊、模塊擴展…

動作——“在界面情境中我能夠采取行動”
拖拽模塊、當頁編輯、內置文字編輯、內置標記編輯、內置的自定義編輯、直接的靜態編輯、評價評級、彈出或滑出的自定義編輯、網格單元編輯、記憶選擇、自動保存、記憶配置…

驗證——“我能提前預防錯誤發生”
內置驗證、驗證後建議、氣泡提示、計數(如用在文本框的字符限制)、即時預覽…

消息——“我能及時的溝通”

界面呈現:界面的更新

可用的、已用的、指示、忙碌的指示、進度指示、內置狀態、光標狀態、漸隱漸現、對比度、動態目標、顯示焦點、燈箱特效、高亮、褪色、擴展、淡入淡出、翻轉、移動、折疊、幻燈片特效、動畫…

設計風險

關於RIA設計容易出現的問題與應用風險,幾年來已有很多專家總結,在此僅承接上述模式分類概況幾點:

信息浏覽與查找是否需要用戶更多的注意力和鼠標操作,如:點擊、拖拽、滾動?一個頁面是否弄得太亂了?是否在界面上濫用了豐富的交互形式?組件與整體頁面是否協調?視覺上是否體現出了層次關系?新的交互模式是否改變了用戶使用傳統網絡的習慣?用戶可能看不出RIAs和傳統網站的不同——但其實沒有後退按鈕了?沒有彈出提示窗口了?

那麼我們在設計時就要注意建立一些原則盡量規避風險:

  1. 將控件及其功能可視化,使用戶對控件的位置及其作用容易理解。保持操作一致性及與其他類似網站/桌面應用程序的一致性。
  2. 提供明顯的返回途徑或確保後退按鈕可用。後退按鈕通常被視為錨點,一種大眾用戶的取消方法。
  3. 變化適當。界面中有更新或微型狀態變化時,確保人們注意到這些變化:
    選擇適當的動態效果和顏色變化吸引注意。
    變化應該發生在人們在看的區域及附近。
    不要同時更新多處,用戶的注意力跨度過大以至於感覺混亂。
  4. 當界面上的變化不及時時,提供及時的信息反饋;善用提示更新的方式。
  5. 不要在一個頁面塞滿內容,騰出空間給新內容。
  6. 在(概念)設計階段不要做太多混合應用,做好可復用的設計。
  7. 提前規劃無障礙設計。RIA中的可用性往往比較困難,比如使用移動設備訪問可能無法正常顯示(即使使用iPhone),因此可能需要准備其他版本。

一致性的標准來規范設計

對於設計標准,有兩件事一定要明確。一,仍然是以用戶為中心進行設計,二是要想清楚rich在哪裡可以增加價值。因此評估時要盡量對目標用戶測試全方位的互動體驗,對於高概率的變化與更新建立詳細的標准。比如,我們要規范“懸停出現詳細信息”這一模式,就需要說明當需要在界面情境中(文字段落、圖片等)查看詳細信息時,彈出氣泡太快或太慢都可能降低用戶體驗,因此要注意規范到對於氣泡的彈出要相比鼠標觸發有0.3s的延遲;鼠標移開或有點擊行為時彈出的氣泡立即消失。

如前所述,當RIAs為我們提供了提升體驗的巨大機會,如何設計更“rich”的控制與體驗還需要不斷積累探索。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved