在設計流程中,通過這6種方式來運用信息架構

分類:實用技巧 時間:2017-09-30

一名優秀的設計師除了需要具備良好的設計技能,還需要大量的設計相關知識儲備。 信息架構 是設計師需要懂得的最重要的知識之一。在之前的文章 《寫給設計師的信息架構基礎知識指南》 當中,我們詳細闡述了 信息架構 的基礎知識,你可以通過這篇文章來了解為什麽它是UI和UX設計的必備知識。信息架構的設計原則,對於設計師而言,也是設計中值得參考的有用工具。今天的文章,幫你總結了在設計過程中運用信息架構知識的6個技巧。

1、始終牢記產品設計目標

如何界定產品最終要達成的目標,其實直接影響著整個團隊每個階段的工作,無論是對於設計師,開發人員還是產品經理,均是如此。信息架構與此也息息相關。只有了解用戶和企業本身對於網站和APP的真實期望之後,才可以開始構建整體的信息架構。所以,產品團隊應該完整地了解產品的目標,確保創意團隊中所有的成員都足夠理解,並且針對目標制定相應的策略和應對措施,才能具備最終實現的可能性。始終銘記最終目標以及為了達成目標而需要執行的任務,能夠讓整個執行過程更加明確。在設定目標的時候,設計師和客戶應該就內容和整體信息架構以及最終目標達成一致,避免可能存在的誤會,提升執行效率。

2、進行用戶調研

信息架構專家在搭建產品信息架構之前,應該對目標受眾的需求和細節有足夠的了解,將提升用戶滿意度作為優先考慮的事項。想要了解更多潛在用戶的信息,建議設計師做用戶調研。通過各種技術手段搜集關於目標用戶和潛在用戶的相關信息的過程就是用戶調研。搜集數據之後,設計團隊針對這些信息進行分析,並且找出最佳的解決方案,從而有可能創造出對用戶友好且有吸引力的產品。

用戶調研有助於深入了解目標受眾的細節,了解他們的需求和心理特征。結合用戶喜好,設計團隊能夠有方向地創造出對用戶友好,貼合需求還可能吸引潛在用戶的產品。

3、結合認知心理學

認知心理學和信息架構的搭建有著緊密的關聯。用戶的視覺感知和影響用戶註意力的因素,都可以通過認知心理學來進行判斷。信息處理的科學是以人為中心的科學,有認知心理學的專家指出,人類感知數據的方式有很多,而影響註意力的因素則更是不盡相同。

基於認知心理學的原理和相關研究,設計師可以采用許多不同的技術來創建足夠有效的內容。在設計過程中,設計師常常會采用格式塔原理來構建布局,巧用元素,這種利用視覺相似性和關聯性的心理學原理,適用範圍非常廣。而識別模式則更加有用,當用戶訪問網站或者APP的時候,常常會期待看到特定的內容和功能,識別模式可以利用調研數據和經驗幫助設計師,快速搭建布局和信息架構。

4、規劃導航系統

信息架構和導航是數字產品當中最重要的兩個組成部分。導航是網站和APP當中引導用戶抵達不同目標和功能或者頁面的一組操作或者技術,作為頁面中主要的交互而存在。導航和信息架構有著密切的關聯,信息架構所構成的框架之下,導航作為抵達不同信息區塊的路徑而存在。

通俗點說,數字產品當中,導航是基於信息架構來梳理的,它最終應該反映並支撐信息架構,否則產品無法保證其一致性。當然,兩者雖然不是一個東西,但是在創建信息架構的時候,同期針對導航系統進行規劃。

5、別忘了視覺層次

為了更好地組織信息、確定內容呈現的優先級,設計師會結合信息架構,使用視覺層次來有偏重地、視覺化的展現內容。無論是文檔、圖書、海報、網頁還是APP,這些載體上所承載的內容,會按照每個元素的重要程度來有差別地展現,而這種差別通常是通過大小、色彩、對比度、對齊度來區別的。重要的信息會更容易被用戶註意到,便於他們輕松瀏覽。

6、還要註意閱讀模式

視覺層次的構建使得數字產品內容的可讀性有了足夠的保障。不過,僅有視覺層次還不夠,設計師還應當根據產品形態,考慮用戶的閱讀模式。

用戶研究領域的先驅 Nielsen Norman Group 曾經針對這一用戶行為進行了深入的研究,為設計師和可用性設計專家們提供了更好的素材和設計依據。

簡而言之,當人們訪問某個網站的時候,尤其是初次訪問網站的時候,他們通常不會特別仔細的查看所有的內容,而是快速的掃視,找到能夠吸引他們註意力的信息,這些內容就是他們繼續停留在這個網站上的理由。通過眼動測試和不同實驗,他們發現訪問者的視覺瀏覽模式,可以歸結為幾種典型的模式。設計師 Steven Bradley 在自己的文章中,總結了這三種常見的模式:古騰堡式,Z圖模式和F圖模式。

古騰堡式:對於信息結構層次並不那麽分明的網頁,用戶常常會使用古騰堡式的瀏覽模式,用戶大範圍掃視頁面內容,整個視線路徑是一個大號的Z,其中最開始的兩個視覺駐留點就在頁頭上。

Z圖模式也不難理解,用戶從上到下,視線沿著Z字形來回掃視,用戶會左右快速掃視,視線的起點首先是左上角,行跨頂部一欄到右上角,然後向下延伸。

F圖模式,或者說是F式布局,我們就更加熟悉了。在Nielsen Norman Group 的研究當中,這種閱讀模式最為典型:

  • 用戶先會沿著水平方向瀏覽,優先瀏覽內容塊的上部,這個時候的眼動構成了字母F 最上面一橫。
  • 接下來視線會沿著屏幕左側向下垂直掃視,尋找段落中能引起興趣點的內容,當他們發現引起他們興趣的內容之時,繼續橫向仔細瀏覽,而通常這些內容對應的視線範圍會比第一次橫向瀏覽的範疇要更小一些,而這個視線軌跡則構成了字母F 中間的一橫。
  • 接下來用戶會將視線移到屏幕左側,繼續向下瀏覽。

所以,將最關鍵的元素置於用戶的瀏覽路徑上,讓用戶可以更輕松地消化信息,也能最高效地執行交互。

更多註意事項

信息架構學科看起來很復雜,需要花費時間和精力來深入學習。可是當你了解了相關的基礎知識之後,再應用於設計項目的時候,你就會發現它是多麽的有用。根據 Tubik Stuido 之前的系列文章,我想列出關於信息架構知識的一些要點:

  • 信息架構是構成數字產品的骨架,設計師可以根據信息架構來構建視覺元素、功能、交互和導航
  • 強大的信息架構是產品質量的保證,它會減少掃可用性問題,提升導航性
  • 信息架構就像是整個布局的藍圖,幫助視覺設計方案的生成
  • 定義產品目標是創建信息架構的核心
  • 用研和認知心理學能夠幫設計團隊預測用戶對於產品的反應,並且創造對用戶友好的體驗
  • 清晰的視覺層次在內容展現上起著重要的作用

【Tubik Stuido設計實戰】

  1. 《富有未來感的柏林之夜APP,是這樣設計出來的》
  2. 《設計實戰!城市指南網站著陸頁是這樣設計出來的》
  3. 《這款給醫生的專業APP,設計上有著怎樣不同的要求?》
  4. 《幫你策劃盛大婚禮的APP,設計思路是這樣的》
  5. 《這款面向大眾的理財APP,設計過程是這樣的》
  6. 《一款真正讓人專註的效率應用,應該這麽設計》

原文地址: uxplanet

原文作者: Tubik Studio

優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:[email protected]

================ 明星欄目推薦 ================

優優教程網: UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手並制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com


Tags: 架構 信息 目標 用戶 設計師 設計

文章來源:


ads
ads

相關文章
ads

相關文章

ad