交互式網(wǎng)頁(yè)設(shè)計(jì)之新手入門手冊(cè)

2022-06-21    分類: 網(wǎng)站建設(shè)

創(chuàng)新互聯(lián)分享!交互式網(wǎng)頁(yè)設(shè)計(jì)之新手入門手冊(cè)。相較于網(wǎng)頁(yè)設(shè)計(jì)波瀾不驚的開(kāi)端,交互設(shè)計(jì)的成長(zhǎng)之路漫長(zhǎng)而曲折。原來(lái)是,術(shù)語(yǔ)“網(wǎng)頁(yè)設(shè)計(jì)師”(網(wǎng)頁(yè)設(shè)計(jì)師)更像是一個(gè)平面設(shè)計(jì)師(平面設(shè)計(jì)師)的描述:一個(gè)重點(diǎn)在文本和打印布局設(shè)計(jì)。但現(xiàn)在,大多數(shù)網(wǎng)站和在線應(yīng)用是互動(dòng)的。因此,現(xiàn)代的網(wǎng)頁(yè)設(shè)計(jì)師不再像以前一樣傳統(tǒng)的平面設(shè)計(jì)師,而是需要做一個(gè)完全不同的考慮。為了彌補(bǔ)這一差距,互動(dòng)設(shè)計(jì)學(xué)科應(yīng)運(yùn)而生。

>什么是交互設(shè)計(jì)?

>哪些理念引領(lǐng)交互設(shè)計(jì)?

> 交互設(shè)計(jì)師做什么?

> 知名交互設(shè)計(jì)師

> 工具

> 書籍

什么是交互設(shè)計(jì)

僅在數(shù)十年前,第一個(gè)互動(dòng)系統(tǒng)首次亮相,交互設(shè)計(jì)也就由此產(chǎn)生。新的界面帶來(lái)了新的挑戰(zhàn),涌現(xiàn)出一批新的設(shè)計(jì)師來(lái)接受這個(gè)挑戰(zhàn)。隨后,一系列書籍紛紛出版,以闡釋這個(gè)未知領(lǐng)域的方方面面。

交互設(shè)計(jì)協(xié)會(huì)【The Interaction Design Association (IxDA)】解釋如下:

交互設(shè)計(jì)師以創(chuàng)造有用且實(shí)用的產(chǎn)品及服務(wù)為宗旨。以用戶為中心作為設(shè)計(jì)的基本原理,交互設(shè)計(jì)的實(shí)際操作必須建立在對(duì)實(shí)際用戶的了解之上:包括他們的目標(biāo)、任務(wù)、體驗(yàn)、需求等等。以用戶為中心的角度出發(fā),同時(shí)努力平衡用戶需求、商業(yè)發(fā)展目標(biāo)和科技發(fā)展水平之間的關(guān)系,交互設(shè)計(jì)師為復(fù)雜的設(shè)計(jì)挑戰(zhàn)提供解決方法,同時(shí)定義和發(fā)展新的交互產(chǎn)品和服務(wù)。

交互設(shè)計(jì),就像用戶體驗(yàn)設(shè)計(jì)(user experience design),為促進(jìn)人和環(huán)境的互動(dòng)不斷發(fā)展。但不像用戶體驗(yàn)設(shè)計(jì)包含了所有面向用戶的軟件和系統(tǒng),交互設(shè)計(jì)師僅考慮用戶和電腦之間的互動(dòng)。這樣的定位被稱為人機(jī)交互。

因?yàn)樵谖铱磥?lái),最快速和最令人興奮的工業(yè)增長(zhǎng)是在網(wǎng)上發(fā)生的。本文將重點(diǎn)放在交互設(shè)計(jì),因?yàn)樗婕暗骄W(wǎng)站和應(yīng)用程序。

哪些理念引領(lǐng)交互設(shè)計(jì)


有很多基本理念推動(dòng)著交互設(shè)計(jì)的實(shí)踐。這里對(duì)一些重要理念進(jìn)行簡(jiǎn)單的概述:目標(biāo)驅(qū)動(dòng)設(shè)計(jì)、“神奇的界面”、實(shí)用性、啟示性以及學(xué)習(xí)性。

目標(biāo)驅(qū)動(dòng)設(shè)計(jì)

雖然交互設(shè)計(jì)師并不嚴(yán)格要求進(jìn)行用戶研究,但全面的用戶研究結(jié)果是好導(dǎo)向設(shè)計(jì)必不可少的。在每一個(gè)設(shè)計(jì)學(xué)科領(lǐng)域,藝術(shù)家必須首先承認(rèn)他們的缺陷,然后設(shè)計(jì)一個(gè)解決方案。在交互設(shè)計(jì)中,用戶本身往往制約著界面的發(fā)展。通常,用戶使用網(wǎng)絡(luò)的目的不同,他們可能是想在網(wǎng)上賺點(diǎn)零花錢。如果是這樣,你的應(yīng)用程序就要把這件事情做好。將用戶研究增加到這個(gè)方程式中,設(shè)定清晰的用戶目標(biāo),以使形式和功能好結(jié)合。

“神奇的界面”

為了方便起見(jiàn),我將一系列交互設(shè)計(jì)的好實(shí)踐濃縮到這個(gè)從Alan Cooper(About Face 3: the Essentials of Interaction Design一書的作者)借鑒來(lái)的術(shù)語(yǔ)中。Alan指出,理想狀態(tài)下界面不應(yīng)該在用戶的腦海中出現(xiàn)—他們應(yīng)該簡(jiǎn)單地“看”到界面作為底層系統(tǒng)的擴(kuò)展。為此,好交互設(shè)計(jì)并不存在:它們不會(huì)花很長(zhǎng)時(shí)間來(lái)加載或回應(yīng);它們不會(huì)讓用戶去思考;他們不會(huì)給用戶增加煩惱。就像Jason Fried,37 Signal的CEO說(shuō)的:“少就是少?!敝唤o用戶他們需要的,然后走下一步。

實(shí)用性

實(shí)用性是指人們用一個(gè)工具來(lái)完成一個(gè)特定目標(biāo)的難易程度。交互設(shè)計(jì)師必須考慮他們?cè)O(shè)計(jì)的界面的實(shí)用性。界面使底層系統(tǒng)易于被理解和使用。

啟示性

剪刀的設(shè)計(jì)讓不熟悉剪刀的人馬上就明白哪里是手持的,哪里是剪切的。交互設(shè)計(jì)不是也應(yīng)該是這樣嗎?好的工業(yè)、交互設(shè)計(jì)是不言自明的;就像那句老話講的,形式服從功能。換句話說(shuō),鏈接就應(yīng)該像是鏈接,按鈕就應(yīng)該像是按鈕,搜索框就應(yīng)該……你懂得。

這里的基本原則就叫啟示性。啟示性代表了參與者和他們周圍環(huán)境之間的可能性行為。因?yàn)閱⑹拘猿浞直磉_(dá)了網(wǎng)站和服務(wù)的基本功能,所以對(duì)于設(shè)計(jì)師而言,在設(shè)計(jì)中自始至終貫徹這個(gè)概念是至關(guān)重要的。Bill Scott 和Theresa Neil列舉了一個(gè)類似概念(叫做“提供邀請(qǐng)”),作為他們的六個(gè)交互設(shè)計(jì)原則之一。

可學(xué)習(xí)性

大量用來(lái)組織用戶界面的都是熟悉的組件。如果用戶習(xí)慣按按鈕提交表格,在這種情況下,他們就會(huì)去尋找按鈕。這就是界面使用習(xí)慣或者模式其中的一個(gè)例子。當(dāng)面臨相似的設(shè)計(jì)挑戰(zhàn)時(shí),優(yōu)秀的交互設(shè)計(jì)師不會(huì)每一次都去重新發(fā)明一些東西。相反,他們會(huì)利用已有的設(shè)計(jì)模式。網(wǎng)上很多交互設(shè)計(jì)模式都記錄在Yahoo!的設(shè)計(jì)庫(kù)中。

總而言之,如果手上的設(shè)計(jì)問(wèn)題確實(shí)需要特殊處理,交互設(shè)計(jì)師應(yīng)該花大力氣讓這個(gè)界面易于掌握,或者易于學(xué)習(xí)。這一點(diǎn)需要對(duì)當(dāng)下的設(shè)計(jì)慣例、啟示性及網(wǎng)絡(luò)整體的實(shí)用性都非常熟悉。

交互設(shè)計(jì)師做什么

交互設(shè)計(jì)師在項(xiàng)目整體的開(kāi)發(fā)過(guò)程中扮演著關(guān)鍵角色。作為一個(gè)項(xiàng)目團(tuán)隊(duì)的一部分,他們通常會(huì)進(jìn)行以下活動(dòng):

1、組織、宣傳設(shè)計(jì)策略

盡管這里的界限是模糊的,但有一點(diǎn)是肯定的:一個(gè)交互設(shè)計(jì)師需要知道她/他為誰(shuí)設(shè)計(jì),以及他們的目標(biāo)是什么。通常,這些由信息架構(gòu)師和用戶研究人員提供。反過(guò)來(lái),一個(gè)交互設(shè)計(jì)師將評(píng)估設(shè)計(jì)目標(biāo),展開(kāi)設(shè)計(jì)策略。他們或單獨(dú)工作,或與其他設(shè)計(jì)師合作。設(shè)計(jì)策略幫助團(tuán)隊(duì)成員在什么樣的交互能幫助用戶實(shí)現(xiàn)目標(biāo)方面達(dá)成共識(shí)。

2、確定和構(gòu)建交互框架

當(dāng)交互設(shè)計(jì)師有一個(gè)刺激他/她設(shè)計(jì)的好的想法時(shí),他/她可以開(kāi)始構(gòu)思這個(gè)界面,如何用它來(lái)輔助必要的交互活動(dòng)。在這里細(xì)節(jié)是魔鬼。有些專業(yè)人員會(huì)在便簽本或者是寫字板上繪制這些互動(dòng)設(shè)計(jì);而另一些則選擇用軟件應(yīng)用程序來(lái)幫助他們;有些人會(huì)選擇團(tuán)隊(duì)合作,有些人則獨(dú)立工作。這些都基于交互設(shè)計(jì)師本身以及他們的工作流程。

3、交互雛形

根據(jù)不同項(xiàng)目,交互設(shè)計(jì)師下一個(gè)步會(huì)開(kāi)始創(chuàng)建雛形。一個(gè)團(tuán)隊(duì)創(chuàng)建交互雛形的方式有很多,在這里就不一一詳細(xì)描述。其中包括:xhtml/css雛形創(chuàng)建模式,紙面雛形創(chuàng)建模式,甚至protocasting。

4、隨時(shí)關(guān)注

對(duì)于一個(gè)已入行的交互設(shè)計(jì)師而言,大的挑戰(zhàn)之一是這個(gè)行業(yè)的發(fā)展速度。每天,新的設(shè)計(jì)師給這個(gè)行業(yè)帶來(lái)新的活力。因此,用戶期待這些新的交互會(huì)出現(xiàn)在你的網(wǎng)站上。聰明的交互設(shè)計(jì)師會(huì)經(jīng)常性地在網(wǎng)絡(luò)上搜索尋找新的交互模式,利用新技術(shù)(比如CSS3或者HTML5)來(lái)適應(yīng)這種變化,然后推動(dòng)媒體不斷向前發(fā)展。

最后,除了看書,平時(shí)在瀏覽網(wǎng)站、使用app的時(shí)候,多從設(shè)計(jì)的角度看待,想想如果自己來(lái)做一個(gè)類似的網(wǎng)站或app,會(huì)怎么著手。有機(jī)會(huì)可以尋找實(shí)際上手的項(xiàng)目。沒(méi)有實(shí)際的項(xiàng)目,也可以自己模擬一個(gè)。理論聯(lián)系實(shí)際是最快進(jìn)步的辦法。

知名交互設(shè)計(jì)師

Cennydd Bowles致力于使網(wǎng)絡(luò)變得更好,他在電子商務(wù)、政府和社區(qū)網(wǎng)絡(luò)設(shè)計(jì)方面有數(shù)年的經(jīng)驗(yàn)。作為一個(gè)Clearleft用戶體驗(yàn)師,他非常努力地思考、記錄和實(shí)踐信息架構(gòu)、交互設(shè)計(jì)和注重實(shí)用性,好像沒(méi)有明天一樣。

Nathan Curtis是EightShapes的創(chuàng)始人和主要負(fù)責(zé)人,EightShapes是一個(gè)位于華盛頓的用戶體驗(yàn)咨詢公司。Nathan從1996年開(kāi)始從事包括用戶體驗(yàn)在內(nèi)的不同工作。他感興趣的領(lǐng)域包括信息架構(gòu),交互設(shè)計(jì),可用性研究和前端開(kāi)發(fā)。他從2006年開(kāi)始創(chuàng)建EightShapes,自此他幫助改善了華盛頓及全美國(guó)的客戶的用戶體驗(yàn)。

Tim Van Damme是一個(gè)24歲的界面設(shè)計(jì)師,他在比利時(shí)長(zhǎng)大和工作。當(dāng)他不再為他的公司Made by Elepant 工作時(shí),他會(huì)四處旅行或出席會(huì)議。Tim的個(gè)人博客在MaxVoltar.com。

Uday Gajendar是一個(gè)交互設(shè)計(jì)師,在美國(guó)硅谷有近十年的工作經(jīng)驗(yàn)。他的作品包括企業(yè)軟件,消費(fèi)類網(wǎng)站,和在Oracle,Adobe,Cisco,Netflix公司,以及像frog和Involution這樣的機(jī)構(gòu)的VOIP應(yīng)用程序。他取得了密歇根大學(xué)的工業(yè)設(shè)計(jì)學(xué)位以及卡內(nèi)基梅隆大學(xué)的交互設(shè)計(jì)學(xué)位。Uday在美學(xué)、領(lǐng)導(dǎo)力和策略方面不斷拓展他的專業(yè)領(lǐng)域。他也在San Jose State University教授交互設(shè)計(jì)。Uday經(jīng)常在他的博客Ghost in the Pixel中揣摩交互設(shè)計(jì)特殊的一面。

Theresa Neil是一個(gè)在德克薩斯州奧斯汀市的用戶體驗(yàn)顧問(wèn)。從2001年起,她領(lǐng)導(dǎo)設(shè)計(jì)了超過(guò)80個(gè)實(shí)時(shí)網(wǎng)絡(luò)、桌面和移動(dòng)應(yīng)用程序。她最近的客戶包括Zenoss、 Innography、 PayPal、 Pervasive 和OneSpot。

Bill Scott是在加州Los Gatos的Netflix公司的用戶界面設(shè)計(jì)主管。他把界面設(shè)計(jì)和設(shè)計(jì)手法結(jié)合在一起。Scott之前是Yahoo! Ajax的傳播者以及Yahoo!圖庫(kù)的管理員。他對(duì)設(shè)計(jì)實(shí)用型產(chǎn)品技術(shù)上和創(chuàng)意上獨(dú)到的見(jiàn)解為IT界寫下了一段迷人的歷史。歡迎關(guān)注BillScott的博客Looks Good Works Well。

工具

交互設(shè)計(jì)師用一系列不同的工具來(lái)完成他們的工作。無(wú)論他們是在一個(gè)餐巾計(jì)劃的互動(dòng)或給客戶一個(gè)模擬原型,他們的目標(biāo)是相同的:通過(guò)交談溝通。最重要的是,互動(dòng)設(shè)計(jì)師需要良好的溝通。下面列出的是一個(gè)小部分,用來(lái)幫助通信的工具。記得當(dāng)Web界面創(chuàng)建好時(shí),需要使用如CSS,HTML,F(xiàn)lash用戶導(dǎo)向的(前)技術(shù)來(lái)完成。Balsamiq Mockups是一個(gè)很好的Adobe AIR應(yīng)用,將構(gòu)建的互動(dòng)很容易。Balsamiq團(tuán)隊(duì)做的非常好,為用戶提供了大量的交互設(shè)計(jì)模板設(shè)計(jì)中的實(shí)際應(yīng)用。此外,用戶可以快速與客戶分享,建立一個(gè)框架,建立框架之間的聯(lián)系和更多。

OmniGraffle是一種適用于Mac OS X系統(tǒng)繪圖軟件。交互設(shè)計(jì)師可以使用繪圖軟件如OmniGraffle創(chuàng)建柔和之美。OmniGraffle加載一系列令人稱道,功能包括:點(diǎn)擊顯示(例如,你可以顯示模型作品),Bezier曲線的繪制等。

雖然最早的設(shè)計(jì)是一個(gè)應(yīng)用程序的頁(yè)面布局,主要是一位平面設(shè)計(jì)師在使用它,但在交互設(shè)計(jì)實(shí)用性不應(yīng)被忽視,特別是介紹了eightshapes unifyframework(見(jiàn)下文)。這是Adobe InDesign creativesuite成員,將工藝簡(jiǎn)化的一個(gè)理想的工具,它使你的團(tuán)隊(duì)更容易。

盡管最早InDesign是一個(gè)頁(yè)面布局的應(yīng)用程序,主要是平面設(shè)計(jì)師在使用它,但它在交互設(shè)計(jì)中的實(shí)用性不容忽視,特別是它引入了EightShapes Unifyframework(見(jiàn)下文)。它是Adobe creativeSuite中的一員,InDesign可能是將工作流程簡(jiǎn)單化的一個(gè)理想工具,它使你的團(tuán)隊(duì)工作起來(lái)更加容易。

最后也是相當(dāng)重要的,我們不要忘了永遠(yuǎn)忠誠(chéng)的Moleskine筆記本。用鉛筆和紙畫的建筑過(guò)程中增加了人文因素,這是其他軟件工具不能匹敵的。此外,每個(gè)人都可以參加。即使是最糟糕的設(shè)計(jì)師也能畫出“盒子和箭頭”。記得買這臺(tái)筆記本電腦,然后與他們當(dāng)你第一次滿足我們的客戶,尤其是當(dāng)董事會(huì)不那么方便的時(shí)候。

相關(guān)資源

用Balsamiq Mockups建立的Mockups To Go,是一個(gè)由用戶提供,可以馬上使用的交互設(shè)計(jì)組件和設(shè)計(jì)模式的合集。如果你發(fā)現(xiàn)自己在做一些現(xiàn)在已有的東西,你應(yīng)該立刻去查看這個(gè)設(shè)計(jì)庫(kù);他們或許有和你的設(shè)計(jì)非常接近的模板。OmniGraffle version 5.x. Konigi公司免費(fèi)提供了一系列制作線框(低保真網(wǎng)頁(yè)設(shè)計(jì)圖)的圖形。它包含了大多數(shù)你需要用來(lái)創(chuàng)建用戶界面的基本元素。Unify使你的用戶體驗(yàn)設(shè)計(jì)更統(tǒng)一。簡(jiǎn)介如下:EightShapesUnify是一個(gè)模板、圖庫(kù)和其他組件的合集,它使用戶體驗(yàn)設(shè)計(jì)師的設(shè)計(jì)更統(tǒng)一,有效和快速。這個(gè)系統(tǒng)使用了AdobeCreative Suite,最主要的一點(diǎn),InDesign是其中至關(guān)重要的一個(gè)制作工具??傊?,EightShapes嘗試規(guī)范交互(和用戶體驗(yàn))設(shè)計(jì)師的工作流程。我還沒(méi)有嘗試使用這個(gè)系統(tǒng),但它的信息非常全面,同時(shí)有教學(xué)視頻,你可以馬上開(kāi)始自學(xué)。

把你的草圖都放在一起,讓所有人都參與進(jìn)來(lái)。IxEdit允許在網(wǎng)頁(yè)里創(chuàng)建雛形。用這個(gè)加載在瀏覽器中的工具,可以將交互設(shè)計(jì)師創(chuàng)建的一些初級(jí)的xhtml/css/javascript的交互雛形可視化,從而加快設(shè)計(jì)的流程。IxEdit是一個(gè)被稱為“基于JavaScript的網(wǎng)頁(yè)交互設(shè)計(jì)工具。通過(guò)IxEdit,設(shè)計(jì)師可以進(jìn)行DOM-scripting的實(shí)踐操作而無(wú)需寫代碼來(lái)改變、增加、移動(dòng)或者變換他們網(wǎng)頁(yè)上的動(dòng)態(tài)元素”。

協(xié)會(huì)

用他們的話來(lái)講,IxDA提供了一個(gè)討論交互設(shè)計(jì)以及幫助其他熱衷于交互設(shè)計(jì)的人收集和增長(zhǎng)學(xué)科知識(shí)的網(wǎng)絡(luò)平臺(tái)。盡管AIGA(AmericanInstitute of Graphic Arts)最初為平面設(shè)計(jì)師而成立,該組織自身意識(shí)到,平面設(shè)計(jì)師更頻繁地給新媒體設(shè)計(jì)組件,在交互設(shè)計(jì)中起著重要的作用。在美國(guó)各地都有當(dāng)?shù)氐腁IGA組織。在我熟悉的組織里他們主辦過(guò)很多活動(dòng),如Photoshop Layer Tennis或藝術(shù)展覽等。AIGA很值得參加。

書籍

有關(guān)交互設(shè)計(jì)的書單可以排好幾個(gè)網(wǎng)頁(yè)。在這里只列了其中最具代表性的5本。如果你真的急切的想要擴(kuò)大你的書庫(kù),在這里同時(shí)推薦一些關(guān)于用戶體驗(yàn)的書籍。

網(wǎng)站標(biāo)題:交互式網(wǎng)頁(yè)設(shè)計(jì)之新手入門手冊(cè)
轉(zhuǎn)載來(lái)于:http://muchs.cn/news/170232.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、Google、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站做網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)