產品設計中的信息架構

2014-10-19    藍藍設計的小編

藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

來源：http://yidianzixun.com/06NpJyrz?s=9

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里


對于大部分缺乏經驗的產品經理在設計產品的時候會從容易感知的部分著手，例如視覺設計、交互設計等等，但是一個合格的產品經理在設計產品的時候則是要從最根本決定產品的部分開始。如果我們將產品設計中各個環(huán)節(jié)按照對產品決定作用的大小進行排列的話，那么從大到小可以排列為：

信息結構設計、流程設計、<A style="BORDER-BOTTOM: medium none; TEXT-ALIGN: justify; BORDER-LEFT: medium none; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; LETTER-SPACING: normal; FONT: 18px/30px Oxygen, Arial, 'Hiragino Sans GB ', 'Microsoft YaHei', 微軟雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif; WHITE-SPACE: normal; COLOR: rgb(50,97,163); BORDER-TOP: medium none; BORDER-RIGHT: medium none; WORD-SPACING: 0px; TEXT-DECORATION: none; -webkit-text-stroke-width: 0px" onclick="$e('share#main#evt:open_app')(true, 1, '/m/channel/keyword/功能設計?s=9')" href="javascript:void(0);" ,="">功能設計、交互設計、視覺設計


信息結構是 產品所呈現的信息層次，通俗的講就是一個產品可以用來做什么。例如我們以一款簡單的照相軟件為例，那么對于這款軟件，他的信息結構就是：攝取照片、儲存照 片、展示照片和刪除照片；對于展示照片而言，又可以分為展示縮略圖排布和查看單張照片的完整圖片（從這個信息結構上來講這款軟件是非常簡單的照相軟件，但 是這不妨礙我們把問題講清楚）。信息結構設計是為了從最根本上決定一款產品可以解決什么問題，由哪些部分組成，之間的邏輯關系是什么，表達信息結構最好的 方法是腦圖，可以使用mindmanager等腦圖軟件（如下圖）。

流程設計是使用產品的操作流程，他描述了一個用戶在使用產品流程，也在時間的角度上規(guī)定了產品各個部分之間的關系?？梢允褂胿isio進行流程設計，如下圖：

功能設計是具體而言，一個用戶如何使用一款產品，可以看做是對信息結構和流程的具體體現。功能設計可以用<A style="BORDER-BOTTOM: medium none; TEXT-ALIGN: justify; BORDER-LEFT: medium none; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; LETTER-SPACING: normal; FONT: 18px/30px Oxygen, Arial, 'Hiragino Sans GB ', 'Microsoft YaHei', 微軟雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif; WHITE-SPACE: normal; COLOR: rgb(50,97,163); BORDER-TOP: medium none; BORDER-RIGHT: medium none; WORD-SPACING: 0px; TEXT-DECORATION: none; -webkit-text-stroke-width: 0px" onclick="$e('share#main#evt:open_app')(true, 1, '/m/channel/keyword/excel?s=9')" href="javascript:void(0);" ,="">excel表格記錄，部分如下圖：

交互設計是具體如何操作這個功能，我們可以通過原型加文字說明來體現，可以使用<A style="BORDER-BOTTOM: medium none; TEXT-ALIGN: justify; BORDER-LEFT: medium none; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(246,246,246); TEXT-INDENT: 0px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: medium; LETTER-SPACING: normal; FONT: 18px/30px Oxygen, Arial, 'Hiragino Sans GB ', 'Microsoft YaHei', 微軟雅黑, STHeiti, 'WenQuanYi Micro Hei', SimSun, sans-serif; WHITE-SPACE: normal; COLOR: rgb(50,97,163); BORDER-TOP: medium none; BORDER-RIGHT: medium none; WORD-SPACING: 0px; TEXT-DECORATION: none; -webkit-text-stroke-width: 0px" onclick="$e('share#main#evt:open_app')(true, 1, '/m/channel/keyword/axure?s=9')" href="javascript:void(0);" ,="">axure制作原型，用word進行文字描述。下圖僅體現了調整焦距一個功能（由于倉促做的原型，比較難看，網上有很多axure的原型包，可以做出比較好看的原型來）：

文字說明：用戶可以通過調整焦距的模塊選擇焦距，向上滑動焦距變小，向下滑動焦距變大。


視覺設計雖然基本上都是UI設計師完成的，但是產品經理在畫原型圖的時候其實也涉及到了一部分，例如上圖。所以UI設計師的工作就是將產品經理的原型圖做的更美觀。

以上各項設計之間是有嚴格的決定與被決定關系的，越先進行的設計，就會對后面的設計有決定性的影響；而后面的設計則不允許修改前面的設計。

而在實際操作中，越是后面的設計，在產品上線后越有可能被修改，修改頻率越頻繁。例如UI設計可能常常修改，甚至提供可選皮膚用戶可以隨意修改；而信息結構設計則很那修改。

 

分享本文至：

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔