交互與視覺(jué)的關(guān)系就像一對(duì)筷子，缺一不可。視覺(jué)設(shè)計(jì)師能否轉(zhuǎn)型為交互設(shè)計(jì)師？個(gè)人認(rèn)為可以，交互設(shè)計(jì)師的素質(zhì)能力，可以通過(guò)后天訓(xùn)練達(dá)成。反之，交互設(shè)計(jì)轉(zhuǎn)為視覺(jué)，要有一定的美術(shù)天份和審美能力，不一定會(huì)成功。

下面通過(guò)一個(gè)APP案例，感受視覺(jué)與交互這種相輔相成的關(guān)系。

這是一個(gè)實(shí)習(xí)的項(xiàng)目過(guò)程的初稿。

1.????需求定位??

APP的內(nèi)容與用戶，盈利運(yùn)營(yíng)模式。

這是一個(gè)關(guān)注科技與創(chuàng)意產(chǎn)品的雜志，每天都會(huì)有更新內(nèi)容，類似Pingwest的ios APP。用戶群是喜歡科技/創(chuàng)意產(chǎn)品的極客。是一款B2C模式的產(chǎn)品，盈利方式后期通過(guò)創(chuàng)意產(chǎn)品的購(gòu)買鏈接，為用戶提供購(gòu)買渠道而從中獲益。

2.???功能與架構(gòu)

核心功能，信息框架，導(dǎo)航與內(nèi)容的展示方式。

APP核心功能就是內(nèi)容為王——展示產(chǎn)品，有列表和卡片式兩種展示方式。默認(rèn)的卡片式內(nèi)容布局，讓一類信息集中化，更具整體感，同時(shí)也更易操作。抽屜式方式隱藏用戶信息，用戶知道當(dāng)前的操作位置，易于返回。導(dǎo)航分類隱藏于LOGO之中，點(diǎn)擊LOGO即可呼出分類。此處考慮到分類不是重點(diǎn)，不做明顯展示，但PM需求必須要有故做此弱化處理。

3.???低保真交互稿

交互操作流程，構(gòu)建體驗(yàn)，增加用戶粘性。

對(duì)于內(nèi)容的展示需要有四個(gè)功能：喜歡、加入購(gòu)物車、評(píng)論、分享。除了以上四個(gè)功能流程之外。還需要登錄注冊(cè)，支付流程，管理評(píng)論，用戶信息修改等流程。每個(gè)流程都需要考慮周全，一般做交互流程首先考慮到“成功”的流程，容易忽略“失敗”的流程，做好“失敗”的流程至關(guān)重要，它可避免用戶挫敗感從而提升體驗(yàn)。

4.???視覺(jué)原型稿

視覺(jué)風(fēng)格，規(guī)范，標(biāo)注，切圖。

視覺(jué)稿方面就不多說(shuō)了，大家都有自己的評(píng)判標(biāo)準(zhǔn)。但不得不提的是規(guī)范，視覺(jué)稿輸出之后還需要做一套規(guī)范，方便日后的管理和修改。

標(biāo)注，視覺(jué)設(shè)計(jì)師要有像素級(jí)別的追求，所以需要配合開發(fā)人員做產(chǎn)品切圖。這里推薦一個(gè)工具M(jìn)arkMan，誰(shuí)用誰(shuí)知道。

切圖，一般都有切圖工具?；蛘呤亲詈?jiǎn)單粗暴的方式：PS >文件>腳本>將圖層導(dǎo)出到文件>瀏覽目錄，選好PNG格式，導(dǎo)出完畢，妥妥的。不過(guò)在此之前每個(gè)Icon你都得確保無(wú)誤，不然的話還是手動(dòng)切吧。

5.???開發(fā)迭代

可用性測(cè)試，專家評(píng)估等方式驗(yàn)證APP。

第一版的APP肯定存在很多問(wèn)題，所以一般是不會(huì)直接上線的，通過(guò)找目標(biāo)用戶進(jìn)行可用性測(cè)試，找到實(shí)際場(chǎng)景中存在的問(wèn)題。或是通過(guò)專家評(píng)估的方式驗(yàn)證APP的交互體驗(yàn)，迭代出下一代產(chǎn)品。在上線前需要提交到相應(yīng)的APP市場(chǎng)進(jìn)行審核，IOS應(yīng)用市場(chǎng)的審核機(jī)制會(huì)相應(yīng)比較嚴(yán)格。

這里推薦Android客戶端可免費(fèi)發(fā)布APP的網(wǎng)站：Appchina、91手機(jī)網(wǎng)、安卓市場(chǎng)、安智市場(chǎng)等。

不難看出交互與視覺(jué)是并存的，誰(shuí)離開誰(shuí)都不行。轉(zhuǎn)型，你準(zhǔn)備好了嗎？

新浪微博@SSSStorm