UI界面設計

結合用戶體驗五要素來布局移動信息結構設計流程

1637

目前，很多小公司的移動產(chǎn)品開發(fā)流程都是很混亂的。沒有一套適合自己的移動APP產(chǎn)品設計流程。也可以說都是APP設計師一手包辦了。接到老板的需求，直接上手設計。

到最后，不停的修改需求，不停的修改界面，不停的修改bug。這樣反復，時光飛逝，離我們預期APP產(chǎn)品上線的日期遠了。

可見，按照一套可行的移動APP產(chǎn)品設計流程是非常重要的。

之前我們介紹關于APP設計流程的文章有：

1、一款高校類APP產(chǎn)品設計流程完整版|APP設計信息圖

2、騰訊UI設計師是如何進行設計項目流程規(guī)劃的

3、APP界面設計流程和APP產(chǎn)品設計流程知識匯總

以上APP設計干貨都是大家值得學習和參考的。

今天，25學堂從用戶體驗五要素來布局移動APP產(chǎn)品設計流程。

當我們著手產(chǎn)品交互設計的時候，要圍繞產(chǎn)品戰(zhàn)略目標，針對產(chǎn)品的特性和功能，進行結構設計。這就需要對產(chǎn)品需求和信息結構進行分組、聚合，使結構明確合理，在布局和版式上一目了然，打造更好的用戶體驗。

移動APP產(chǎn)品設計的一般過程：戰(zhàn)略層設計、范圍層設計、結構層設計、框架層設計、表現(xiàn)層設計，

也是用戶體驗的五個要素。

自上而下的來進行：

1、戰(zhàn)略層設計（Strategy）

決定范圍，包括經(jīng)營者想從網(wǎng)站得到什么；包括用戶想從網(wǎng)站得到什么。

關注內(nèi)容來自企業(yè)外部的用戶需求（User Need）是網(wǎng)站的目標：商業(yè)目標或其他類型的目標。

2、范圍層設計（Scope）

確定網(wǎng)站各種特性和功能的最合適組合方式，這些特性和功能就構成網(wǎng)站的范圍層。

在軟件方面它轉化成創(chuàng)建功能規(guī)格（Functional Specification），對產(chǎn)品的“功能組合”的詳細描述。信息空間方面，范圍則以內(nèi)容需求（Content Requirement）形式表現(xiàn)，對各種內(nèi)容元素的要求的詳細描述。

3、結構層設計（Structure）

比框架層更抽象，框架是結構的具體表達方式。結構層是用來設計用戶如何達到某個頁面，并且在我們做完事之后能去什么地方。

軟件方面，結構層將范圍轉變成交互設計（Interaction Design），我們可以定義系統(tǒng)如何相應用戶請求。信息空間方面，結構層則是信息架構（Information Architecture）在信息空間中內(nèi)容元素的分布。

4、框架層設計（Skeleton）

按鈕、表格、照片和文本區(qū)域的位置，用于優(yōu)化設計布局，以到達這些元素的最大效果和效率。

被分成3個部分，必須完成信息設計（Information Design）促進理解信息表達方式；還包含界面設計（Interface Design）或說是安排好讓用戶與系統(tǒng)地功能產(chǎn)生交互的界面元素；從信息空間方面講，界面就是導航設計（Navigation Design）指屏幕上的一些組合，允許用戶在信息架構中穿行。

5、表現(xiàn)層設計（Surface）

是看到的一序列網(wǎng)頁，由圖片和文字組成。

關注的是視覺設計（Visual Design），也可以說是最終產(chǎn)品的外觀。