|
web交互設(shè)計原則和模式
634個讀者 簡介 交互設(shè)計的原則和模式
web界面設(shè)計（豐富交互設(shè)計的原則和模式） (本書英文版大家可以到我blog下載：http://blog./?p=325) 本書所有的例子都來自我們同事在flicker網(wǎng)站的圖片。下面將會介紹六個設(shè)計原則，在本書中能夠發(fā)現(xiàn)最好的范例和設(shè)計模式
正如：alan cooper（交互設(shè)計發(fā)起的倡導(dǎo)者）陳述的那樣："那里有輸出，那里就有輸入" 這是一個直接操作（操縱）的原則。 例如：直接用一個頁面實現(xiàn)編輯和展示的效果，代替了原來用你一個單獨頁面去實現(xiàn)編輯的內(nèi)容，并且另一個頁面實現(xiàn)展示的效果。 第一章：在一個頁面中編輯和展示。
單行編輯和展示 實例自flicker
多行的編輯和展示實例來自 Backpackit 
覆蓋編輯，比如：move over 事件觸發(fā)的 linkYahoo! Trip Planner provides a complex editor in an overlay for scheduling an itinerary item
Table Edit表格式的編輯模式 實例來自google doc Editing a spreadsheet in Google Docs is very similar to editing a spreadsheet in Microsoft Excel 
組編輯模式.直接改變一個組的編輯模式實例來自iphone得菜單組位置變換模式 
模塊配置直接在一個頁面中進行模塊的配置設(shè)置。 第二章：拖拽
模塊拖拽，在一個頁面中重新編排模塊的位置實例來自Netvibes，netvibes，允許用戶自主進行各個模塊的拖拽操作。
列表的拖拽，重新給列表排序實例來自 Backpackit
對象的拖拽，通過拖拽改變對象之間的關(guān)系實例來自Cogmap
拖拽的動作事件，在拖拽一個對象的時候觸發(fā)的事件
第三章，直接選擇
選擇切換開關(guān)，比如gmail用checkbox實現(xiàn)對郵件的選擇性操作
收藏選擇提供多個頁面的選擇收藏操作 實例來自LinkedIn 提供一個區(qū)域用來保存從多個頁面選擇收藏的東西。
對象的選擇
直接進行對象選擇的操作
混合選擇操作合并了開關(guān)和對象選擇的操作
第二： 保持輕量級
關(guān)于保持的一個輕量級的操作，是因為當用戶進行應(yīng)用程序的交互操作的時候，肯定會有身體或者精神上的消耗。一個首要的方面就是要創(chuàng)建一個輕量級別的貫穿用戶使用的上下文的工具 第四章，用戶上下文背景中的工具
Always-Visible Tools總是可見的工具 如dig網(wǎng)站的dig按鈕總是對用戶可見 Place Contextual Tools directly in the content.
Hover-Reveal Tools鼠標mouse over的時候才會顯示的工具 Show Contextual Tools on mouse hover.
Toggle-Reveal Tools開關(guān)切換時顯示的工具 A master switch to toggle on/off Contextual Tools for the page.
Secondary Menu二級菜單 Show a secondary menu (usually by right-clicking on an object). 在當前頁面停留 頁面的刷新一般來說會打斷用戶的思維流，網(wǎng)站默認的情況下每次事件的觸發(fā)都會從一個頁面切換到另一個頁面，由于我們不再 被那些技術(shù)束縛，我們能夠決定什么時間保持用戶停留在當前的頁面中，從而不打斷他的思維流。 第五章，”覆蓋“模式
對話框的浮層模式
替換瀏覽器自己的彈出框用自己重新定義的彈出框（pop up）
詳情浮層模式允許在文章中的段落中用戶的鼠標的點擊或者mouser over時觸發(fā)彈出某個關(guān)鍵字的詳情浮層
第三：輸入浮層模式在每個輸入框的焦點觸發(fā)的時候，會彈出一個浮層去提示一些額外的備注信息。
第六章嵌入模式
對話框的嵌入
列表的嵌入
Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information.
詳情的嵌入
Reveals additional information in the context of the page.
Tabs標簽?zāi)Ｊ?/p> 用標簽 控制顯示提示信息的方式 Provides additional panels of information accessible by tab controls. 第七章虛擬頁面
Virtual ScrollingWhen data sets are large, virtual scrolling allows content to be dynamically scrolled in on demand.
Inline PagingWhen information needs to be chunked into pages, content can still be loaded dynamically.
Scrolled PagingA blending of inline paging and virtual scrolling.
Virtual PanningA virtual canvas allows users the freedom to roam in two-dimensional space.
Zoomable User InterfaceAllows the user freedom of motion in both 2D and 3D. Supports the concept of an infinite interface. Chapter 8. Process Flows
Interactive Single-Page ProcessAs the user interacts the workflow adapts.
Inline Assistant ProcessInline assistance for keeping workflows in-context.
Dialog Overlay ProcessEncapsulating a process in an overlay.
Configurator ProcessInteractive process for configuring products.
Static Single-Page ProcessOne page workflow. 第四：提供一個引導(dǎo)邀請
發(fā)現(xiàn)能力對于RIAweb來說是一個首要的挑戰(zhàn)之一，一個重要的特點就是如果用戶不能發(fā)現(xiàn)它，那么就是毫無用途滴。 改善提高發(fā)現(xiàn)能力的一個主要的途徑就是提引導(dǎo)邀請。引導(dǎo)邀請的提示用戶下一個級別的交互操作。 Chapter 9. Static Invitations
Call to Action InvitationInvite users to primary task or tasks.
Tour InvitationInvite users to explore new features. Chapter 10. Dynamic Invitations
Hover InvitationInvitation during mouse hover.
Affordance InvitationUsing the familiar as a bridge to the new.
Drag and Drop InvitationInvitations during drag and drop.
More Content InvitationInvitations for revealing more content.
第五：過渡轉(zhuǎn)換的使用 動畫和過場特效，以及各種各樣的可視化過渡 對于加強銜接和交流來說是很強大的技術(shù)。
Chapter 11. Transitional Patterns
Brighten/DimChange focus by brightening and dimming items.
Expand/CollapseTransitions to open and close items.
Self-Healing FadeRemoved items fade out and area "heals".
AnimationShowing the transition between repositioned items.
SpotlightUsing highlighting to focus user attention. Chapter 12. Purpose of Transitions
Slide In/Slide OutExpose a slide out overlay.
FaceplateCross-fade between a main screen and configuration panel.
FlipFlip between a main screen and configuration panel.
AccordionComponent that slides open a panel while hiding the rest.
CarouselAnimated scrolling of more content.
第六 ：即時響應(yīng) 一個能響應(yīng)的頁面才是智能的頁面，這個原理探究了如何用實時響應(yīng)你構(gòu)建一個豐富的用戶體驗 第十三章：查找匹配模式
Auto Complete自動完成事件 用戶打字的時候，在輸入框中匹配用戶輸入的內(nèi)容并且顯示出來
Live Suggest實時提醒 用戶打字的時候，提示用戶搜索的相關(guān)關(guān)鍵字 As the user types search suggestions are displayed.
Live Search實時搜索 當用戶在搜索框中鍵入內(nèi)容后直接在當前頁面實時顯示搜索結(jié)果。
Refining Search精準化搜素 在實時搜索的同時提供修改搜索關(guān)鍵字的面板
第14章：feedback模式
Live Preview實時預(yù)覽效果 比如：用戶的交互操作結(jié)果能被實時預(yù)覽看到。
Progressive Disclosure進度狀態(tài)公開 如用戶交互操作一樣，給于用戶更多界面單元顯示。
Progress Indicator進度指示 在長進度出現(xiàn)的時候，應(yīng)該用一個進度指示給于用戶好的體驗
Periodic Refresh預(yù)知刷新 當有新的消息時能實時提示
|
|
|
來自： linmu > 《電腦技術(shù)》
