2016-11-16 ui設計分享達人
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中，?請點這里
長期以來我就有對幾年來交互設計的心得進行總結整理的想法?；氐街袊鴣碛H身體會到不少同行，主要是交互設計師和視覺設計師對于交互設計的困惑，以及其他行業(yè)對于交互設計的誤解和濫用。后來我在小范圍內開設了一個關于交互設計的講座；現在把它整理成文，希望與同行切磋，共同進步。
這篇文章是我?guī)啄陙碓诿绹鴱氖陆换ピO計工作的一個經驗總結。當時我們遵循以用戶為中心（User-Centered-Design, 簡稱UCD）的設計原則，每一個項目都是不折不扣的按所有UCD的步驟進行。下面總結的交互設計的方法，是從UCD的過程中提煉出來，也就是說，同樣適用于任何非UCD的設計過程。
交互設計的流程
如果一提到交互設計，你就想到畫線框圖或原型圖，那你只對了五分之一。交互設計是一個過程，從開始到結束有一套系統(tǒng)的流程。原型圖只是其中的一個環(huán)節(jié)。
當接到一個設計項目，怎么開始？都應該做哪些工作？怎樣盡可能的保證交付物滿足既定的功能以及用戶體驗層面的易用性？
第一步，是任務分析，列出界面所要完成的所有任務。第二步按各任務確定頁面流程，建立信息架構。接下來是創(chuàng)建統(tǒng)一的頁面布局包括分區(qū)等。然后在頁面布局的基礎上進行原型設計，可以是低保真和高保真的原型圖。最后編寫設計說明。
下面以設計一款動感相冊界面為例，逐步講解各個環(huán)節(jié)。
1. 任務分析
第一步任務分析。這里要做的是對于將要設計的這個新界面的所有任務的分析，也就是用戶在界面上能進行的所有操作。這個分析在功能需求的基礎上進行，需求方一般提供一個功能點的列表。
任務分析最常見的是任務列表，另外有任務流程和任務場景等。下面以任務列表為例。
列出所有主要任務，以及每個主要任務的子任務。再把子任務細分到各個步驟。形成下面這個列表。
主要任務1
子任務1
步驟1
步驟2
子任務2
步驟1
步驟2
主要任務2
…
以動感相冊為例，任務分析列表如下：
1. 瀏覽相冊
1) 瀏覽相冊列表
2) 選擇相冊
3) 瀏覽照片
2. 創(chuàng)建新相冊
1) 添加照片
a) 選擇已有相冊
b) 選擇照片
c) 排列順序
d) 添加字幕文字
e) 選擇動畫效果
2) 添加模板
a) 瀏覽模板
b) 選擇模板
3) 添加音樂
a) 瀏覽音樂列表
I. 試聽音樂
II. 選擇音樂
b) 增加新音樂
I. 打開本地文件
II. 選擇音樂
4) 預覽（略）…
5) 命名（略）…
6) 保存（略）…
3. 修改相冊（略）…
任務列表包括所有功能點，并對每一個功能點的邏輯關系進行整合。必要時會對各任務的使用頻率和其它影響設計的重要因素進行分析，這里不做解釋了。
2. 頁面流程
任務分析完成后，進入設計的第一步，即設計頁面流程。頁面流程是設計的開始，也是重要的一環(huán)。它決定整個界面的信息架構和操作邏輯。
頁面流程是上一步任務分析的自然轉化。一般來說，一個主要任務就是一個頁面，其它子任務也可以轉化為頁面。
頁面幾乎是把任務分析照搬過來了。所以上一步做好了，這一步很輕松，而且越往后越輕松。
3. 頁面布局
第三步頁面布局是具體頁面設計的開始，在上一步知道有哪些頁面需要進行設計后，這里對頁面進行劃分，對內容進行組織。最重要的一點是確定頁面分區(qū)。
具體頁面布局，在不與總布局沖突的情況下，有更細節(jié)的布局。
頁面布局賦予零碎的內容以邏輯性，以分區(qū)的形式把頁面各區(qū)域所對應的功能區(qū)確定下來，減少具體設計時的隨意性。這是設計嚴謹與否的表現所在。把類似的操作放在一起，對于用戶來說是可以預見的，用戶能夠判斷哪個操作在哪個區(qū)域，減少盲目尋找?guī)淼睦щy和疑惑。
4. 原型設計
這一步是大家熟知的，即具體頁面的設計。這一步設計把所有的界面元素表現出來。可以有低保真和高保真原型圖。低保真即是線框圖，高保真多是接近最終效果圖。
5. 設計說明
最后一步需要做的是對所有頁面進行詳細的描述，包括對頁面上所有元素進行說明，比如默認狀態(tài)，跳轉頁面，字號字體，尺寸等。這里就不解釋了。這是交給開發(fā)人員的文檔，以及測試人員進行測試的依據。
小結
交互設計是一個過程，它不僅僅是畫線框圖。交互設計最關鍵的兩個環(huán)節(jié)是頁面流程和頁面布局，前者建立清晰的架構和嚴密的邏輯，后者整合零散的信息并確定分明的主次關系。這一切都是為了我們的終極目標——讓我們的界面符合用戶的預期，不帶給他們任何的意外。一切都在用戶的意料之中。
（注：本文來自公眾號UI設計）
藍藍設計( m.miumiuwan.com?)是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計?、 cs界面設計?、 ipad界面設計?、 包裝設計?、 圖標定制?、 用戶體驗 、交互設計、?網站建設?、平面設計服務
