海淘科技分享！交互式網(wǎng)頁設計之新手入門手冊。相較于網(wǎng)頁設計波瀾不驚的開端，交互設計的成長之路漫長而曲折。原來是，術(shù)語“網(wǎng)頁設計師”（網(wǎng)頁設計師）更像是一個平面設計師（平面設計師）的描述：一個重點在文本和打印布局設計。但現(xiàn)在，大多數(shù)網(wǎng)站和在線應用是互動的。因此，現(xiàn)代的網(wǎng)頁設計師不再像以前一樣傳統(tǒng)的平面設計師，而是需要做一個完全不同的考慮。為了彌補這一差距，互動設計學科應運而生。
> 什么是交互設計?
> 哪些理念引領(lǐng)交互設計?
> 交互設計師做什么?
> 知名交互設計師
> 工具
> 書籍
▼
僅在數(shù)十年前，第一個互動系統(tǒng)首次亮相，交互設計也就由此產(chǎn)生。新的界面帶來了新的挑戰(zhàn)，涌現(xiàn)出一批新的設計師來接受這個挑戰(zhàn)。隨后，一系列書籍紛紛出版，以闡釋這個未知領(lǐng)域的方方面面。
交互設計協(xié)會【The Interaction Design Association (IxDA)】解釋如下：
交互設計師以創(chuàng)造有用且實用的產(chǎn)品及服務為宗旨。以用戶為中心作為設計的基本原理，交互設計的實際操作必須建立在對實際用戶的了解之上：包括他們的目標、任務、體驗、需求等等。以用戶為中心的角度出發(fā)，同時努力平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關(guān)系，交互設計師為復雜的設計挑戰(zhàn)提供解決方法，同時定義和發(fā)展新的交互產(chǎn)品和服務。
交互設計，就像用戶體驗設計(user experience design)，為促進人和環(huán)境的互動不斷發(fā)展。但不像用戶體驗設計包含了所有面向用戶的軟件和系統(tǒng)，交互設計師僅考慮用戶和電腦之間的互動。這樣的定位被稱為人機交互。
因為在我看來，最快速和最令人興奮的工業(yè)增長是在網(wǎng)上發(fā)生的。本文將重點放在交互設計，因為它涉及到網(wǎng)站和應用程序。
▼
有很多基本理念推動著交互設計的實踐。這里對一些重要理念進行簡單的概述：目標驅(qū)動設計、“神奇的界面”、實用性、啟示性以及學習性。
目標驅(qū)動設計
雖然交互設計師并不嚴格要求進行用戶研究，但全面的用戶研究結(jié)果是最佳導向設計必不可少的。在每一個設計學科領(lǐng)域，藝術(shù)家必須首先承認他們的缺陷，然后設計一個解決方案。在交互設計中，用戶本身往往制約著界面的發(fā)展。通常，用戶使用網(wǎng)絡的目的不同，他們可能是想在網(wǎng)上賺點零花錢。如果是這樣，你的應用程序就要把這件事情做好。將用戶研究增加到這個方程式中，設定清晰的用戶目標，以使形式和功能完美結(jié)合。
“神奇的界面”
為了方便起見，我將一系列交互設計的最佳實踐濃縮到這個從Alan Cooper(About Face 3: the Essentials of Interaction Design一書的作者)借鑒來的術(shù)語中。Alan指出，理想狀態(tài)下界面不應該在用戶的腦海中出現(xiàn)—他們應該簡單地“看”到界面作為底層系統(tǒng)的擴展。為此，最佳交互設計并不存在：它們不會花很長時間來加載或回應;它們不會讓用戶去思考;他們不會給用戶增加煩惱。就像Jason Fried，37 Signal的CEO說的：“少就是少。”只給用戶他們需要的，然后走下一步。
實用性
實用性是指人們用一個工具來完成一個特定目標的難易程度。交互設計師必須考慮他們設計的界面的實用性。界面使底層系統(tǒng)易于被理解和使用。
啟示性
剪刀的設計讓不熟悉剪刀的人馬上就明白哪里是手持的，哪里是剪切的。交互設計不是也應該是這樣嗎?最佳的工業(yè)、交互設計是不言自明的;就像那句老話講的，形式服從功能。換句話說，鏈接就應該像是鏈接，按鈕就應該像是按鈕，搜索框就應該……你懂得。
這里的基本原則就叫啟示性。啟示性代表了參與者和他們周圍環(huán)境之間的可能性行為。因為啟示性充分表達了網(wǎng)站和服務的基本功能，所以對于設計師而言，在設計中自始至終貫徹這個概念是至關(guān)重要的。Bill Scott 和Theresa Neil列舉了一個類似概念(叫做“提供邀請”)，作為他們的六個交互設計原則之一。
可學習性
大量用來組織用戶界面的都是熟悉的組件。如果用戶習慣按按鈕提交表格，在這種情況下，他們就會去尋找按鈕。這就是界面使用習慣或者模式其中的一個例子。當面臨相似的設計挑戰(zhàn)時，優(yōu)秀的交互設計師不會每一次都去重新發(fā)明一些東西。相反，他們會利用已有的設計模式。網(wǎng)上很多交互設計模式都記錄在Yahoo!的設計庫中。
總而言之，如果手上的設計問題確實需要特殊處理，交互設計師應該花大力氣讓這個界面易于掌握，或者易于學習。這一點需要對當下的設計慣例、啟示性及網(wǎng)絡整體的實用性都非常熟悉。
▼
交互設計師在項目整體的開發(fā)過程中扮演著關(guān)鍵角色。作為一個項目團隊的一部分，他們通常會進行以下活動：
1、組織、宣傳設計策略
盡管這里的界限是模糊的，但有一點是肯定的：一個交互設計師需要知道她/他為誰設計，以及他們的目標是什么。通常，這些由信息架構(gòu)師和用戶研究人員提供。反過來，一個交互設計師將評估設計目標，展開設計策略。他們或單獨工作，或與其他設計師合作。設計策略幫助團隊成員在什么樣的交互能幫助用戶實現(xiàn)目標方面達成共識。
2、確定和構(gòu)建交互框架
當交互設計師有一個刺激他/她設計的好的想法時，他/她可以開始構(gòu)思這個界面，如何用它來輔助必要的交互活動。在這里細節(jié)是魔鬼。有些專業(yè)人員會在便簽本或者是寫字板上繪制這些互動設計;而另一些則選擇用軟件應用程序來幫助他們;有些人會選擇團隊合作，有些人則獨立工作。這些都基于交互設計師本身以及他們的工作流程。
3、交互雛形
根據(jù)不同項目，交互設計師下一個步會開始創(chuàng)建雛形。一個團隊創(chuàng)建交互雛形的方式有很多，在這里就不一一詳細描述。其中包括：xhtml/css雛形創(chuàng)建模式，紙面雛形創(chuàng)建模式，甚至protocasting。
4、隨時關(guān)注
對于一個已入行的交互設計師而言，最大的挑戰(zhàn)之一是這個行業(yè)的發(fā)展速度。每天，新的設計師給這個行業(yè)帶來新的活力。因此，用戶期待這些新的交互會出現(xiàn)在你的網(wǎng)站上。聰明的交互設計師會經(jīng)常性地在網(wǎng)絡上搜索尋找新的交互模式，利用新技術(shù)(比如CSS3或者HTML5)來適應這種變化，然后推動媒體不斷向前發(fā)展。
最后，除了看書，平時在瀏覽網(wǎng)站、使用app的時候，多從設計的角度看待，想想如果自己來做一個類似的網(wǎng)站或app，會怎么著手。有機會可以尋找實際上手的項目。沒有實際的項目，也可以自己模擬一個。理論聯(lián)系實際是最快進步的辦法。
▼
Cennydd Bowles致力于使網(wǎng)絡變得更好，他在電子商務、政府和社區(qū)網(wǎng)絡設計方面有數(shù)年的經(jīng)驗。作為一個Clearleft用戶體驗師，他非常努力地思考、記錄和實踐信息架構(gòu)、交互設計和注重實用性，好像沒有明天一樣。
Nathan Curtis是EightShapes的創(chuàng)始人和主要負責人，EightShapes是一個位于華盛頓的用戶體驗咨詢公司。Nathan從1996年開始從事包括用戶體驗在內(nèi)的不同工作。他感興趣的領(lǐng)域包括信息架構(gòu)，交互設計，可用性研究和前端開發(fā)。他從2006年開始創(chuàng)建EightShapes，自此他幫助改善了華盛頓及全美國的客戶的用戶體驗。
Tim Van Damme是一個24歲的界面設計師，他在比利時長大和工作。當他不再為他的公司Made by Elepant 工作時，他會四處旅行或出席會議。Tim的個人博客在MaxVoltar.com。
Uday Gajendar是一個交互設計師，在美國硅谷有近十年的工作經(jīng)驗。他的作品包括企業(yè)軟件，消費類網(wǎng)站，和在Oracle，Adobe，Cisco，Netflix公司，以及像frog和Involution這樣的機構(gòu)的VOIP應用程序。他取得了密歇根大學的工業(yè)設計學位以及卡內(nèi)基梅隆大學的交互設計學位。Uday在美學、領(lǐng)導力和策略方面不斷拓展他的專業(yè)領(lǐng)域。他也在San Jose State University教授交互設計。Uday經(jīng)常在他的博客Ghost in the Pixel中揣摩交互設計特殊的一面。
Theresa Neil是一個在德克薩斯州奧斯汀市的用戶體驗顧問。從2001年起，她領(lǐng)導設計了超過80個實時網(wǎng)絡、桌面和移動應用程序。她最近的客戶包括Zenoss、 Innography、 PayPal、 Pervasive 和OneSpot。
Bill Scott是在加州Los Gatos的Netflix公司的用戶界面設計主管。他把界面設計和設計手法結(jié)合在一起。Scott之前是Yahoo！ Ajax的傳播者以及Yahoo！圖庫的管理員。他對設計實用型產(chǎn)品技術(shù)上和創(chuàng)意上獨到的見解為IT界寫下了一段迷人的歷史。歡迎關(guān)注BillScott的博客Looks Good Works Well。
▼
交互設計師用一系列不同的工具來完成他們的工作。無論他們是在一個餐巾計劃的互動或給客戶一個模擬原型，他們的目標是相同的：通過交談溝通。最重要的是，互動設計師需要良好的溝通。下面列出的是一個小部分，用來幫助通信的工具。記得當Web界面創(chuàng)建好時，需要使用如CSS，HTML，F(xiàn)lash用戶導向的(前)技術(shù)來完成。Balsamiq Mockups是一個很好的Adobe AIR應用，將構(gòu)建的互動很容易。Balsamiq團隊做的非常好，為用戶提供了大量的交互設計模板設計中的實際應用。此外，用戶可以快速與客戶分享，建立一個框架，建立框架之間的聯(lián)系和更多。
OmniGraffle是一種適用于Mac OS X系統(tǒng)繪圖軟件。交互設計師可以使用繪圖軟件如OmniGraffle創(chuàng)建柔和之美。OmniGraffle加載一系列令人稱道，功能包括：點擊顯示(例如，你可以顯示模型作品)，Bezier曲線的繪制等。
雖然最早的設計是一個應用程序的頁面布局，主要是一位平面設計師在使用它，但在交互設計實用性不應被忽視，特別是介紹了eightshapes unifyframework(見下文)。這是Adobe InDesign creativesuite成員，將工藝簡化的一個理想的工具，它使你的團隊更容易。
盡管最早InDesign是一個頁面布局的應用程序，主要是平面設計師在使用它，但它在交互設計中的實用性不容忽視，特別是它引入了EightShapes Unifyframework(見下文)。它是Adobe creativeSuite中的一員，InDesign可能是將工作流程簡單化的一個理想工具，它使你的團隊工作起來更加容易。
最后也是相當重要的，我們不要忘了永遠忠誠的Moleskine筆記本。用鉛筆和紙畫的建筑過程中增加了人文因素，這是其他軟件工具不能匹敵的。此外，每個人都可以參加。即使是最糟糕的設計師也能畫出“盒子和箭頭”。記得買這臺筆記本電腦，然后與他們當你第一次滿足我們的客戶，尤其是當董事會不那么方便的時候。
相關(guān)資源
用Balsamiq Mockups建立的Mockups To Go，是一個由用戶提供，可以馬上使用的交互設計組件和設計模式的合集。如果你發(fā)現(xiàn)自己在做一些現(xiàn)在已有的東西，你應該立刻去查看這個設計庫;他們或許有和你的設計非常接近的模板。OmniGraffle version 5.x. Konigi公司免費提供了一系列制作線框(低保真網(wǎng)頁設計圖)的圖形。它包含了大多數(shù)你需要用來創(chuàng)建用戶界面的基本元素。Unify使你的用戶體驗設計更統(tǒng)一。簡介如下：EightShapesUnify是一個模板、圖庫和其他組件的合集，它使用戶體驗設計師的設計更統(tǒng)一，有效和快速。這個系統(tǒng)使用了AdobeCreative Suite，最主要的一點，InDesign是其中至關(guān)重要的一個制作工具。總之，EightShapes嘗試規(guī)范交互(和用戶體驗)設計師的工作流程。我還沒有嘗試使用這個系統(tǒng)，但它的信息非常全面，同時有教學視頻，你可以馬上開始自學。
把你的草圖都放在一起，讓所有人都參與進來。IxEdit允許在網(wǎng)頁里創(chuàng)建雛形。用這個加載在瀏覽器中的工具，可以將交互設計師創(chuàng)建的一些初級的xhtml/css/javascript的交互雛形可視化，從而加快設計的流程。IxEdit是一個被稱為“基于JavaScript的網(wǎng)頁交互設計工具。通過IxEdit，設計師可以進行DOM-scripting的實踐操作而無需寫代碼來改變、增加、移動或者變換他們網(wǎng)頁上的動態(tài)元素”。
▼
用他們的話來講，IxDA提供了一個討論交互設計以及幫助其他熱衷于交互設計的人收集和增長學科知識的網(wǎng)絡平臺。盡管AIGA(AmericanInstitute of Graphic Arts)最初為平面設計師而成立，該組織自身意識到，平面設計師更頻繁地給新媒體設計組件，在交互設計中起著重要的作用。在美國各地都有當?shù)氐腁IGA組織。在我熟悉的組織里他們主辦過很多活動，如Photoshop Layer Tennis或藝術(shù)展覽等。AIGA很值得參加。
▼
有關(guān)交互設計的書單可以排好幾個網(wǎng)頁。在這里只列了其中最具代表性的5本。如果你真的急切的想要擴大你的書庫，在這里同時推薦一些關(guān)于用戶體驗的書籍。
文章下載，點擊：交互式網(wǎng)頁設計之新手入門手冊
