導(dǎo)讀：小編在一家創(chuàng)業(yè)公司，披著產(chǎn)品運(yùn)營(yíng)的外衣做著產(chǎn)品經(jīng)理的勾當(dāng)。耗時(shí)1個(gè)半月的時(shí)間，將產(chǎn)品原型處理完畢。耗時(shí)這么久，主要原因是研發(fā)團(tuán)隊(duì)先行，產(chǎn)品和設(shè)計(jì)后行的逆行邏輯，真真的是累夠嗆。

用體驗(yàn)的五個(gè)層面分為：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。五個(gè)層面自上而下地建設(shè)，具備基本的雙重性、用戶(hù)體驗(yàn)的要素和應(yīng)用這些要素。

所謂戰(zhàn)略層，即為產(chǎn)品目標(biāo)、用戶(hù)需求，通俗來(lái)講，經(jīng)營(yíng)者想從網(wǎng)站上得到什么，用戶(hù)想從網(wǎng)站上得到什么？

所謂范圍層，即功能規(guī)格和內(nèi)容需求，其意義在于這是一個(gè)有價(jià)值的過(guò)程，同時(shí)能夠產(chǎn)生有價(jià)值的產(chǎn)品。比如，提供用戶(hù)可以保存之前的郵寄地址功能。

結(jié)構(gòu)層，即交互設(shè)計(jì)、信息架構(gòu)層，其目的是為了確定各個(gè)將要呈現(xiàn)給用戶(hù)的元素的“模式”和“順序”。交互設(shè)計(jì)關(guān)注于將影響用戶(hù)執(zhí)行和完成任務(wù)的元素。信息架構(gòu)則關(guān)注如何將信息表達(dá)給用戶(hù)的元素。重點(diǎn)：理解用戶(hù)的工作方式、行為和思考模式。

框架層，即界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、信息設(shè)計(jì)層。

界面設(shè)計(jì)是用來(lái)確定界面空間元素以及位置，提供用戶(hù)完成任務(wù)的能力，通過(guò)它，用戶(hù)能真正的接觸到那些“在結(jié)構(gòu)層的交互設(shè)計(jì)中”確定的具體功能。

導(dǎo)航設(shè)計(jì)：呈現(xiàn)信息的一種界面形式，提供給用戶(hù)區(qū)某個(gè)地方的能力。

信息設(shè)計(jì)：呈現(xiàn)有效地信息溝通，表達(dá)想法，它是這個(gè)層面中范圍最廣的一個(gè)要素。

實(shí)現(xiàn)方法建議以線(xiàn)框圖將設(shè)計(jì)信息、界面設(shè)計(jì)和導(dǎo)航設(shè)計(jì)放置到一起，形成一個(gè)統(tǒng)一的、有內(nèi)在凝聚力的架構(gòu)的地方。

1. 通過(guò)安排和選擇界面元素來(lái)整合界面設(shè)計(jì)；
2. 通過(guò)識(shí)別和定義核心導(dǎo)航系統(tǒng)來(lái)整合導(dǎo)航設(shè)計(jì)；
3. 通過(guò)放置和排列信息組成部分的優(yōu)先級(jí)來(lái)整合信息設(shè)計(jì)。

線(xiàn)框圖的好處是可以確定一個(gè)建立在基本概念結(jié)構(gòu)上的架構(gòu)，同時(shí)指出了視覺(jué)設(shè)計(jì)應(yīng)該前進(jìn)的方向。

表現(xiàn)層，即為視覺(jué)設(shè)計(jì)。界面設(shè)計(jì)考慮可交互元素的不足，導(dǎo)航設(shè)計(jì)考慮在產(chǎn)品中引導(dǎo)用戶(hù)移動(dòng)的元素安排，信息設(shè)計(jì)考慮傳達(dá)給用戶(hù)的信息要素的排布，解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題。

評(píng)估一個(gè)頁(yè)面的視覺(jué)設(shè)計(jì)的簡(jiǎn)單方法：終于眼睛。一個(gè)成功的設(shè)計(jì)有2個(gè)重要的特點(diǎn)：

1. 遵循的是一條流暢的路徑；
2. 在不需要太多細(xì)節(jié)來(lái)嚇到用戶(hù)的前提下，它為用戶(hù)提供有效選擇的、某種可能的“引導(dǎo)”。

所以，我們的設(shè)計(jì)師應(yīng)該怎么做呢？

讀懂原型圖

• 讀懂PRD。確保在需求理解上，與PM保持一致；
• 查找漏洞。人無(wú)完人，在成熟的PM，也難免有疏漏。找出遺漏，與PM反饋、溝通；
• 提出產(chǎn)品新想法。讀PRD時(shí)，總會(huì)有一些產(chǎn)品的好想法冒出來(lái)，及時(shí)與PM和團(tuán)隊(duì)溝通；
• 開(kāi)始構(gòu)思交互。

草圖快速溝通

通過(guò)草圖，快速將“產(chǎn)品關(guān)鍵流程”、“關(guān)鍵交互界面布局”呈現(xiàn)紙面，以此與PM、技術(shù)溝通至達(dá)成共識(shí)；目的是為了：

• 再次掃遺漏；
• 收攏想法。這個(gè)階段，產(chǎn)品設(shè)計(jì)基本定型；
• 達(dá)成共識(shí)。確保讓產(chǎn)品、設(shè)計(jì)、技術(shù)隊(duì)要做的事情有一致的理解，PM需更新PRD、技術(shù)開(kāi)始做開(kāi)發(fā)準(zhǔn)備。

Axure線(xiàn)框圖表現(xiàn)產(chǎn)品流程、界面

包含：產(chǎn)品流程圖、全部的頁(yè)面原型。

Axure讓團(tuán)隊(duì)對(duì)產(chǎn)品的理解無(wú)異議，對(duì)最終的產(chǎn)品有直觀的了解。這個(gè)階段，產(chǎn)品需求凍結(jié)。開(kāi)發(fā)人員可以依據(jù)原型對(duì)UI關(guān)聯(lián)較小的部分進(jìn)行技術(shù)開(kāi)發(fā)。

視覺(jué)設(shè)計(jì)

有前面兩個(gè)“掃清障礙”的過(guò)程，這個(gè)階段，視覺(jué)設(shè)計(jì)時(shí)非常舒服的事情。在相對(duì)完整的設(shè)計(jì)規(guī)范、控件規(guī)范的前提下，視覺(jué)包括：

• 風(fēng)格探索；
• 關(guān)鍵頁(yè)面的視覺(jué)設(shè)計(jì)；
• 關(guān)鍵交互動(dòng)畫(huà)表現(xiàn)（如果無(wú)法口頭項(xiàng)技術(shù)表達(dá)動(dòng)畫(huà)效果時(shí)，給出一個(gè)“活的”效果，是非常直觀的。

視覺(jué)素材輸出、設(shè)計(jì)文件標(biāo)注

每個(gè)項(xiàng)目最終給到開(kāi)發(fā)人員的都要有效果圖、標(biāo)注圖、切圖三個(gè)文件夾。Pxcook、Markman是不錯(cuò)的標(biāo)注工具，Cutteran、Assistor PS是很方便的切圖工具。

開(kāi)發(fā)后期，細(xì)節(jié)跟進(jìn)

與開(kāi)發(fā)跟進(jìn)細(xì)節(jié)，是設(shè)計(jì)過(guò)程的一部分。在我們團(tuán)隊(duì)，完全依靠規(guī)范作業(yè)、設(shè)計(jì)文件標(biāo)注（不和開(kāi)發(fā)人員說(shuō)一句話(huà)）,能夠確保80%的交互、視覺(jué)細(xì)節(jié)能夠被還原。剩下的20%，就要設(shè)計(jì)師與開(kāi)發(fā)人員肩并肩坐在一起打磨了。開(kāi)發(fā)過(guò)程中，一定要預(yù)留這個(gè)時(shí)間。主要包括：邊距、字體、界面動(dòng)畫(huà)的數(shù)值微調(diào)。

原文作者Havery，由@理理V 編輯整理，轉(zhuǎn)載請(qǐng)注明出處。