用戶體驗的要素:框架層

六、框架層:界面設計、導航設計和信息設計

在框架層,我們需要更進一步提煉結構層的結構,確定很詳細的界面外觀、導航和信息設計。

1.框架層定義

結構層界定了我們的產品將用什么方式來運作,框架層則用于確定用什么樣的功能和形式來實現。

對功能型產品,我們通過界面設計來確定框架——一個大家所熟知的“按鈕、輸入框和其他界面控件”的領域;對信息型產品,則是通過導航設計——用于呈現信息的一種界面形式;信息設計是功能和信息兩方面都必須要做的,用于呈現有效的信息溝通。

框架層

如果涉及提供給用戶做某些事的能力,屬于界面設計。界面的意思是,通過它,用戶能真正接觸到那些“在結構層的交互設計中”確定的“具體功能”。

如果是提供給用戶去某個地方的能力,則是導航設計。信息架構把一個結構應用到我們設定好的內容需求列表中,而導航設計則是一個用戶能看到那個結構的鏡頭,通過它,用戶可以在結構中自由穿行。

如果是傳達想法給用戶的話,就是信息設計。

2.習慣和比喻

我們平時做很多事都依賴于大量、細小的反射作用的積累,習慣使我們可以把這些反射作用應用到不同的環境中。讓你的界面與用戶早已養成的習慣保持一致(如電話按鍵分布);當某種不同的方式有很明顯的益處時,可以試著謹慎地違背一些習慣;界面要與它自身保持一致,網站特性的概念模型有助于你保持內部一致性。

抑制在產品四周建立起比喻的沖動,在某些情況下,你可以為了某個功能,而模仿現實世界的某個物體來設計頁面,但有時候這樣會給用戶造成歧義與困難,很難達到你想要的效果。有效地使用比喻,就是要減少用戶在理解和使用你的產品功能時對猜測的要求。

3.界面設計

界面設計要做的事就是選擇正確的界面元素,這些元素能幫助用戶完成他們的任務,還要通過適當的方式讓它們容易被理解和使用。一個任務通常會跨過多個界面來完成,每一個界面都包含一組不同的界面元素,這正是用戶要與之戰斗的對象。哪個功能要在哪個界面上完成,是我們在結構層的交互設計中就已經決定的;這些功能在界面上如何被用戶認知到,則屬于界面設計的范疇。

成功的界面設計是那些能讓用戶一眼就看到“最重要的東西”的界面設計。另一方面,不重要的東西,不應該被注意到,弄清楚用戶不需要知道哪些東西,并減少它們的可發現性(或把它們完全排除出去)。一個設計良好的界面是要組織好用戶最常采用的行為,同時讓這些元素用最容易的方式獲取和使用,技巧之一:在界面第一次呈現給用戶時候仔細考慮每個選項的默認值。如“顯示更多細節”的按鈕默認選中。技巧之二:系統自動記住某個用戶最后一次選擇狀態。

一些標準的界面元素:


復選框(checkbox):允許用戶獨立地選擇各個選項。

單選框(radio?button):允許用戶從一組互斥的選項中選擇一個。

文本框(text?field):等待用戶輸入文字。

下拉菜單(dropdown?list):與單選框功能類似,更有效地呈現更多的選項。

多選菜單(list?box):與復選框類似,但更容易支持大量的選項。

按鈕(action?button):提交信息、采取動作等。

4.導航設計

任何一個界面的導航設計都必須同時完成以下三個目標:


必須提供給用戶一種在網站間跳轉的方法。這些導航元素必須能促進用戶行為,真實有效。

導航設計必須傳達出這些元素和它們所包含內容之間的關系。僅僅提供一個鏈接的列表是不夠的,這些鏈接是什么關系?是否其中一些比較重要?它們之間相關的差異在哪?這些傳達出的信息對于用戶理解“哪些選擇對他們是有效的”是非常必要的。

導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關系。這有助于用戶理解哪個有效的選擇會最好地支持他們的任務或他們想要達到的目標。

在網站中,需要清晰地告訴用戶“他們在哪兒”和“他們能去哪兒”。大多數的網站都會提供一個多重的導航系統(navigation system),每一個都要完成各種情形中成功引導用戶的任務。


全局導航(global?navigation):提供了覆蓋整個網站的通路。全局導航提供的是用戶最有可能需要從網站的最終頁面到其他什么地方的一組關鍵點。

局部導航(local navigation):提供給用戶在這個架構中到附近地點的通路。局部導航可能只提供一個頁面的父級、兄弟級和子級通路。

輔助導航(supplementary navigation):提供了全局和局部導航不能快速達到的相關內容的快捷途徑。允許用戶轉移他們瀏覽時的方向,而不需要從頭開始。

上下文導航(contextual navigation):也叫內聯導航,是嵌入頁面自身內容的一種導航,例如一個頁面內容中的超級鏈接。

友好導航(courtesy navigation):提供給用戶他們通常不會需要的鏈接。大多數用戶正常不會需要,但有時是便利的一種途徑,如聯系信息、反饋表單、法律聲明等。

遠程導航(remote navigation):以自己的方式存在,獨立于你的網站的內容或功能。如網站地圖(site map),它給用戶一個簡明的、單頁的網站整體結構的快捷瀏覽方式,通常不超過兩個層級的導航。

索引表(index):按字母排序的、鏈接到相關頁面的列表。對涵蓋了不同主題、擁有大量內容的網站比較有效(不一定需要覆蓋整個網站的內容)。

全局導航
局部導航
輔助導航
上下文導航
友好導航

5.信息設計

信息設計常常充當一種把各種設計元素聚合到一起的粘合劑的角色。信息設計決定如何呈現這些信息,使人們能很容易使用或理解它們。比如用柱狀圖展示數據會更直觀。

信息設計還涉及分組或整理散亂的信息。例如姓名、職位、地址、城市、公司、郵編、電話這一組信息,可以分組成“個人信息”和“聯系方式”兩大塊,更加清晰明了。用一種能“反映用戶的思路”和“支持他們的任務和目標”的方式來分類和排列這些信息元素。

錯誤提示是在設計一個良好的界面時,經常需要考慮的信息設計問題;如何設計想讓用戶閱讀的某個使用手冊,也是信息設計的范疇。

指示標識(wayfinding):將信息設計和導航設計結合到一起的,用來幫助用戶理解“他們在哪”以及“他們能去哪”的系統,類似于停車場會用顏色編碼來幫助人們記住停車的地方,指引周圍的路徑。

6.線框圖

頁面布局是將信息設計、界面設計和導航設計放置到一起,形成一個統一的、有內在凝聚力的架構的地方。頁面布局被納入到一個詳細的文檔,稱為頁面示意圖或線框圖(wire frame)。線框圖是對一個頁面中所有的組成部分以及它們如何結合到一起的、最直觀的描述。

頁面布局

這些簡單的線條繪制的圖,一般要著重注明、建議讀者在必要的時候參考結構圖表或其他交互設計文檔、內容需求或功能規格說明,或者其他類型的詳細文檔。通常,線框圖通常還包括附加說明,用于說明在線框圖和結構圖看得不太明顯的網站行為。

線框圖是整合在結構層的全部三種要素的方法:


a、通過安排和選擇界面元素來整合界面設計;

b、通過識別和定義核心導航系統來整合導航設計;

c、通過放置和排列信息組成部分的優先級來整合信息設計。

把這三者放到一個文檔中,線框圖就可以確定一個建立在基本概念結構上的架構,同時指出了表現層的設計應該前進的方向。


——著作權歸原作者所有——

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容