在框架層,我們需要更進一步提煉結構層的結構,確定很詳細的界面外觀、導航和信息設計。
結構層界定了我們的產品將用什么方式來運作,框架層則用于確定用什么樣的功能和形式來實現。
對功能型產品,我們通過界面設計來確定框架——一個大家所熟知的“按鈕、輸入框和其他界面控件”的領域;對信息型產品,則是通過導航設計——用于呈現信息的一種界面形式;信息設計是功能和信息兩方面都必須要做的,用于呈現有效的信息溝通。
如果涉及提供給用戶做某些事的能力,屬于界面設計。界面的意思是,通過它,用戶能真正接觸到那些“在結構層的交互設計中”確定的“具體功能”。
如果是提供給用戶去某個地方的能力,則是導航設計。信息架構把一個結構應用到我們設定好的內容需求列表中,而導航設計則是一個用戶能看到那個結構的鏡頭,通過它,用戶可以在結構中自由穿行。
如果是傳達想法給用戶的話,就是信息設計。
我們平時做很多事都依賴于大量、細小的反射作用的積累,習慣使我們可以把這些反射作用應用到不同的環境中。讓你的界面與用戶早已養成的習慣保持一致(如電話按鍵分布);當某種不同的方式有很明顯的益處時,可以試著謹慎地違背一些習慣;界面要與它自身保持一致,網站特性的概念模型有助于你保持內部一致性。
抑制在產品四周建立起比喻的沖動,在某些情況下,你可以為了某個功能,而模仿現實世界的某個物體來設計頁面,但有時候這樣會給用戶造成歧義與困難,很難達到你想要的效果。有效地使用比喻,就是要減少用戶在理解和使用你的產品功能時對猜測的要求。
界面設計要做的事就是選擇正確的界面元素,這些元素能幫助用戶完成他們的任務,還要通過適當的方式讓它們容易被理解和使用。一個任務通常會跨過多個界面來完成,每一個界面都包含一組不同的界面元素,這正是用戶要與之戰斗的對象。哪個功能要在哪個界面上完成,是我們在結構層的交互設計中就已經決定的;這些功能在界面上如何被用戶認知到,則屬于界面設計的范疇。
成功的界面設計是那些能讓用戶一眼就看到“最重要的東西”的界面設計。另一方面,不重要的東西,不應該被注意到,弄清楚用戶不需要知道哪些東西,并減少它們的可發現性(或把它們完全排除出去)。一個設計良好的界面是要組織好用戶最常采用的行為,同時讓這些元素用最容易的方式獲取和使用,技巧之一:在界面第一次呈現給用戶時候仔細考慮每個選項的默認值。如“顯示更多細節”的按鈕默認選中。技巧之二:系統自動記住某個用戶最后一次選擇狀態。
一些標準的界面元素:
復選框(checkbox):允許用戶獨立地選擇各個選項。
單選框(radio?button):允許用戶從一組互斥的選項中選擇一個。
文本框(text?field):等待用戶輸入文字。
下拉菜單(dropdown?list):與單選框功能類似,更有效地呈現更多的選項。
多選菜單(list?box):與復選框類似,但更容易支持大量的選項。
按鈕(action?button):提交信息、采取動作等。
任何一個界面的導航設計都必須同時完成以下三個目標:
必須提供給用戶一種在網站間跳轉的方法。這些導航元素必須能促進用戶行為,真實有效。
導航設計必須傳達出這些元素和它們所包含內容之間的關系。僅僅提供一個鏈接的列表是不夠的,這些鏈接是什么關系?是否其中一些比較重要?它們之間相關的差異在哪?這些傳達出的信息對于用戶理解“哪些選擇對他們是有效的”是非常必要的。
導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關系。這有助于用戶理解哪個有效的選擇會最好地支持他們的任務或他們想要達到的目標。
在網站中,需要清晰地告訴用戶“他們在哪兒”和“他們能去哪兒”。大多數的網站都會提供一個多重的導航系統(navigation system),每一個都要完成各種情形中成功引導用戶的任務。
全局導航(global?navigation):提供了覆蓋整個網站的通路。全局導航提供的是用戶最有可能需要從網站的最終頁面到其他什么地方的一組關鍵點。
局部導航(local navigation):提供給用戶在這個架構中到附近地點的通路。局部導航可能只提供一個頁面的父級、兄弟級和子級通路。
輔助導航(supplementary navigation):提供了全局和局部導航不能快速達到的相關內容的快捷途徑。允許用戶轉移他們瀏覽時的方向,而不需要從頭開始。
上下文導航(contextual navigation):也叫內聯導航,是嵌入頁面自身內容的一種導航,例如一個頁面內容中的超級鏈接。
友好導航(courtesy navigation):提供給用戶他們通常不會需要的鏈接。大多數用戶正常不會需要,但有時是便利的一種途徑,如聯系信息、反饋表單、法律聲明等。
遠程導航(remote navigation):以自己的方式存在,獨立于你的網站的內容或功能。如網站地圖(site map),它給用戶一個簡明的、單頁的網站整體結構的快捷瀏覽方式,通常不超過兩個層級的導航。
索引表(index):按字母排序的、鏈接到相關頁面的列表。對涵蓋了不同主題、擁有大量內容的網站比較有效(不一定需要覆蓋整個網站的內容)。
信息設計常常充當一種把各種設計元素聚合到一起的粘合劑的角色。信息設計決定如何呈現這些信息,使人們能很容易使用或理解它們。比如用柱狀圖展示數據會更直觀。
信息設計還涉及分組或整理散亂的信息。例如姓名、職位、地址、城市、公司、郵編、電話這一組信息,可以分組成“個人信息”和“聯系方式”兩大塊,更加清晰明了。用一種能“反映用戶的思路”和“支持他們的任務和目標”的方式來分類和排列這些信息元素。
錯誤提示是在設計一個良好的界面時,經常需要考慮的信息設計問題;如何設計想讓用戶閱讀的某個使用手冊,也是信息設計的范疇。
指示標識(wayfinding):將信息設計和導航設計結合到一起的,用來幫助用戶理解“他們在哪”以及“他們能去哪”的系統,類似于停車場會用顏色編碼來幫助人們記住停車的地方,指引周圍的路徑。
頁面布局是將信息設計、界面設計和導航設計放置到一起,形成一個統一的、有內在凝聚力的架構的地方。頁面布局被納入到一個詳細的文檔,稱為頁面示意圖或線框圖(wire frame)。線框圖是對一個頁面中所有的組成部分以及它們如何結合到一起的、最直觀的描述。
這些簡單的線條繪制的圖,一般要著重注明、建議讀者在必要的時候參考結構圖表或其他交互設計文檔、內容需求或功能規格說明,或者其他類型的詳細文檔。通常,線框圖通常還包括附加說明,用于說明在線框圖和結構圖看得不太明顯的網站行為。
線框圖是整合在結構層的全部三種要素的方法:
a、通過安排和選擇界面元素來整合界面設計;
b、通過識別和定義核心導航系統來整合導航設計;
c、通過放置和排列信息組成部分的優先級來整合信息設計。
把這三者放到一個文檔中,線框圖就可以確定一個建立在基本概念結構上的架構,同時指出了表現層的設計應該前進的方向。
——著作權歸原作者所有——