<pre id="bbfd9"><del id="bbfd9"><dfn id="bbfd9"></dfn></del></pre>

          <ruby id="bbfd9"></ruby><p id="bbfd9"><mark id="bbfd9"></mark></p>

          <p id="bbfd9"></p>

          <p id="bbfd9"><cite id="bbfd9"></cite></p>

            <th id="bbfd9"><form id="bbfd9"><dl id="bbfd9"></dl></form></th>

            <p id="bbfd9"><cite id="bbfd9"></cite></p><p id="bbfd9"></p>
            <p id="bbfd9"><cite id="bbfd9"><progress id="bbfd9"></progress></cite></p>

            交互設計的方法

            時間:2025-11-12 15:55:15 賽賽 計算機輔助設計 我要投稿
            • 相關推薦

            交互設計的方法

              交互設計是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。以下是小編整理的交互設計的方法,歡迎閱讀。

              交互設計的流程

              如果一提到交互設計,你就想到畫線框圖或原型圖,那你只對了五分之一。交互設計是一個過程,從開始到結束有一套系統的流程。原型圖只是其中的一個環節。

              當接到一個設計項目,怎么開始?都應該做哪些工作?怎樣盡可能的保證交付物滿足既定的功能以及用戶體驗層面的易用性?

              第一步,是任務分析,列出界面所要完成的所有任務。第二步按各任務確定頁面流程,建立信息架構。接下來是創建統一的頁面布局包括分區等。然后在頁面布局的基礎上進行原型設計,可以是低保真和高保真的原型圖。最后編寫設計說明。

              下面以設計一款動感相冊界面為例,逐步講解各個環節。

              1. 任務分析

              第一步任務分析。這里要做的是對于將要設計的這個新界面的所有任務的分析,也就是用戶在界面上能進行的所有操作。這個分析在功能需求的基礎上進行,需求方一般提供一個功能點的列表。

              任務列表包括所有功能點,并對每一個功能點的邏輯關系進行整合。必要時會對各任務的使用頻率和其它影響設計的重要因素進行分析,這里不做解釋了。

              2. 頁面流程

              任務分析完成后,進入設計的第一步,即設計頁面流程。頁面流程是設計的開始,也是重要的一環。它決定整個界面的信息架構和操作邏輯。

              頁面流程是上一步任務分析的自然轉化。一般來說,一個主要任務就是一個頁面,其它子任務也可以轉化為頁面。

              以動感相冊為例,頁面流程如下:

              頁面幾乎是把任務分析照搬過來了。所以上一步做好了,這一步很輕松,而且越往后越輕松。

              注意這個流程圖應該包括所有將要設計的新頁面,一個不少,一個不多。它不僅確定頁面內容,頁面數量,還確定各頁面之間的關系。如果在后來設計具體頁面原型時,發現這個流程圖多了或少了頁面,或者頁面關系發生了變化,說明你的功夫不到家(這個比較難,我一般不苛求我們的設計師)。根據原型圖來創建或者修改頁面流程圖,不是在做設計,而是在寫設計說明。

              3. 頁面布局

              第三步頁面布局是具體頁面設計的開始,在上一步知道有哪些頁面需要進行設計后,這里對頁面進行劃分,對內容進行組織。最重要的一點是確定頁面分區。

              以動感相冊為例,頁面布局如下:

              總布局,即通用布局,適合所有頁面。

              具體頁面布局,在不與總布局沖突的情況下,有更細節的布局。

              頁面布局賦予零碎的內容以邏輯性,以分區的形式把頁面各區域所對應的功能區確定下來,減少具體設計時的隨意性。這是設計嚴謹與否的表現所在。把類似的操作放在一起,對于用戶來說是可以預見的,用戶能夠判斷哪個操作在哪個區域,減少盲目尋找帶來的困難和疑惑。

              4. 原型設計

              這一步是大家熟知的,即具體頁面的設計。這一步設計把所有的界面元素表現出來。可以有低保真和高保真原型圖。低保真即是線框圖,高保真多是接近最終效果圖。

              下面是動感相冊的低保真原型圖。

              5. 設計說明

              最后一步需要做的是對所有頁面進行詳細的描述,包括對頁面上所有元素進行說明,比如默認狀態,跳轉頁面,字號字體,尺寸等。這里就不解釋了。這是交給開發人員的文檔,以及測試人員進行測試的依據。

              相關信息

              交互設計的相關信息包含交互,使用,交互設計和可用性(usability)四個方面。

              提到“交互”,感覺是參與交互的雙方更加對等,實際上,引入“交互”這個詞的意義,就在于交互對象地位的提升。來自《超越人機交互》一書Terry Winograd先生所說:“就是把計算機的長處和人的長處相結合,而不是讓計算機模擬人,正是這個想法把我引入了HCI領域”;AlanCooper先生在UI Design的訪談中也同樣提到:“關鍵在于,讓人去做他勝任的事情是一件非常好的事。讓人做人擅長做的事情,而讓計算機做計算機真正擅長的事情。”對交互對象的重視有利于讓人和交互對象的關系更合理,從而得到人和交互對象相得益彰的相處方式。

              可用性是交互設計的基本而且重要的指標,它是對可用程度的總體評價。也是從用戶角度衡量產品是否有效、易學、安全、高效、好記、少錯的質量指標。

              同時,交互設計的目標不止于此,它還要考慮用戶的期望(Donald Norman先生說到期望設計是交互設計的下一站)和體驗,可用性保證產品可用,基本功能完備且方便;而體驗在于給用戶一些與眾不同的或者意想之外的感覺。也就是說,“可用”是產品應該做到的,理所應當的,“體驗”則是額外的驚喜和收獲。

              ISO9241/11中的定義是:可用性是一個多因素概念,涉及到容易學習、容易使用、系統的有效性、用戶滿意,以及把這些因素與實際使用環境聯系在一起針對特定目標的評價。

              主要內容

              交互設計是一門特別關注以下內容的學科:

              1、定義產品的行為和使用密切相關的產品形式。

              2、預測產品的使用如何影響產品與用戶的關系,以及用戶對產品的理解。

              3、探索產品、人和物質、文化、歷史之間的對話。

              交互設計從“目標導向”的角度解決產品設計:

              1、要形成對人們希望的產品使用方式,以及人們為什么想用這種產品等問題的見解。

              2、尊重用戶及其目標。

              3、對于產品特征與使用屬性,要有一個完全的形態,而不能太簡單。

              4、展望未來,要看到產品可能的樣子,它們并不必然就像當前這樣。

            【交互設計的方法】相關文章:

            Flash的交互動畫設計10-10

            游戲交互界面設計的思考11-11

            交互設計與公共環境設計的關系06-30

            Flash的交互動畫設計介紹07-28

            flash怎么設計帶有交互場景的動畫08-02

            深度剖析游戲中的交互設計12-13

            Adobe交互設計師概述09-10

            Adobe交互設計師考試大綱08-23

            動作腳本交互式動畫設計08-07

                    <pre id="bbfd9"><del id="bbfd9"><dfn id="bbfd9"></dfn></del></pre>

                    <ruby id="bbfd9"></ruby><p id="bbfd9"><mark id="bbfd9"></mark></p>

                    <p id="bbfd9"></p>

                    <p id="bbfd9"><cite id="bbfd9"></cite></p>

                      <th id="bbfd9"><form id="bbfd9"><dl id="bbfd9"></dl></form></th>

                      <p id="bbfd9"><cite id="bbfd9"></cite></p><p id="bbfd9"></p>
                      <p id="bbfd9"><cite id="bbfd9"><progress id="bbfd9"></progress></cite></p>
                      飘沙影院