• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 互聯網產品的交互設計方法—- 其他教程




    教學主題: 互聯網產品的交互設計方法

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 互聯網產品的交互設計方法

    這教學的重點為這幾點 [ 方法,設計,交互,產品,互聯網,信息,頁面,表達,問題,任務 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    交互設計可以提高產品可用性。在國內的互聯網行業中,建立在這個認識基礎上,交互設計得到了普遍的接受。

    目前交互設計在互聯網產品中的應用狀況

    “交互設計可以提高產品可用性。”在國內的互聯網行業中,建立在這個認識基礎上,交互設計得到了普遍的接受。“產品設計開始的時候應該先交互啊~~”“你這個項目沒交互過啊~~”這類的說法越來越多當然是好的信息,但是,交互設計工作到底應該怎麼做才能提高產品可用性?通常的互聯網產品研發中,交互設計工作是處於沒有方法的狀況。

    理解交互設計

    交互設計是一個設計工作。

    交互設計是一門技術。

    交互設計在目前階段的主要使命是提高產品可用性。

    通過對界面和操作行為的設計提高產品可用性。

    互聯網產品的特點

    1.變化快。

    2.質量低。

    3.功能操作與信息傳達並重。

    4.高速創新從而帶來的無標準。

    那麼,互聯網產品的交互設計應該怎麼做?

    互聯網產品的交互設計方法分享

    經過長期的摸索、體會騰訊互聯網產品,我們總結出了幾個較為有效的設計方法:

    方法一. 自然語言法。設計交互細節的方法。

    方法二. 結構圖法。設計產品信息構架的方法。

    方法三. 任務走查法。對現有產品進行優化的方法,全面普查產品,包括對交互細節和信息構架。

    這三個方法的思路,是基於對交互設計工作內容如下的分類:

    1. 信息構架

    2. 交互細節

    但,嚴格來說,這樣的理解是不對的。交互設計工作原本就是“交互細節”工作。另外有信息構架師來解決信息構架的問題。然而,上面提到了互聯網產品快的特點,更多的研發步驟顯然更容易將研發周期拖的更長,把信息構架工作和交互細節合併起來,減少一個環節,更適應互聯網產品的研發特點。

    “為什麼不把信息構架工作交給產品經理來做呢?”如果說交互設計工作的核心是表達(這個觀念,最後還會提到),那麼,信息構架和交互細節都是表達的重要手段。信息構架不清楚的產品,怎麼談得到表達的清楚、明確呢。所以,交互設計的工作包含了兩部分:信息構架和交互細節。

    那麼,下面我們就開始具體介紹這三個方法:

    方法一. 自然語言法

    使用自然的語言來表達頁面信息。

    這是一個設計界面交互細節的方法。

    界面表達的要求是:清晰,明確,簡潔,得體。

    想象着用面對面的交流來傳達信息,再將面對面的傳達變為書面表達,再用界面語言翻譯書面表達。

    除了思路,我們還需要必備的原則、常用的表達方式和具體操作步驟。

    頁面表達原則:

    1. 更少的信息量更好。

    2. 結構化更易於理解。

    3. 信息的表達應該清楚、明確、直接。

    4. 操作可識別。

    5. 操作前,結果可預知。

    6. 操作時,操作有反饋。

    7. 操作后,操作可撤銷。

    8. 讓用戶知道身處何地。

    9. 避免內容看上去象廣告。

    10. 不提供多餘的功能。

    11. 相同的功能,在不同的頁面中應保持一致性。

    12. 措辭統一。

    常用的頁面表達方式:

    1. 從左到右,從上到下。

    2. 大字更突出。

    3. 圖形更吸引人。

    4. 動畫會被誤認為是廣告。

    5. 內容邏輯:並列關係;從屬關係。

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    6.多項並列的信息用

    互聯網產品的交互設計方法

    7.不同的排序方式VS篩選內容

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    具體操作

    第一步. 概括待表達的信息

    第二步. 將概括好的信息排序

    第三步. 使用界面語言翻譯

    實例:中信銀行卡

    互聯網產品的交互設計方法

    第一步. 概括信息:

    描述應該是概括的,儘可能簡短。例如:

    ● 您選擇了回郵方式辦卡,概括解釋這個辦卡方式。

    ● 接下來您應該 下載申請表

    ● 回郵辦卡的全過程是這樣的…

    ● 一系列注意事項。

    第二步. 排序:

    就是上面的順序,沒有變化。

    有些時候排序會遇到困難,需要藉助界面語言才能準確反應表達順序。這正是界面設計的價值,它可以勝任一些單純適用文字表達表達不好的情況。下面的黃鑽續費案例中也許你就會遇到類似的問題。遇到這種問題時,記錄下排序遇到的問題即可。在翻譯過程中問題可能就解決掉了。

    第三步. 翻譯:

    互聯網產品的交互設計方法

    與之前界面對比:

    ● 開頭幾句信息順序需要整理,使上下文關係更清晰。

    ● 對過程的描述可簡化。

    ● “說明”應更結構化。

    這裡所說的“與對比界面之前”只是因為之前的需求文檔中有相對具象的頁面原型,而這並不意味着這裡的工作是“優化頁面原型”。需求的傳達總會有一定的形式,也許是簡單的頁面原型,也許是一份需求文檔。甚至可以更簡單。有時相對具象化的信息記錄或之前的頁面反而會是干擾設計者以明確的思路來設計,尤其需要小心。

    我們有了一種成型的方法,但這並不意味着我們設計出的頁面就只有一個樣子了。實際上不同的設計者使用這個方法會設計出不同的頁面。下面這是另外一位設計師給出的思路,或許這是更好的方案:

    1. 您選擇了回郵方式辦卡,概括解釋這個辦卡方式。

    2. 第一步. 下載、填寫申請表並回郵給中信

    3. 第二步……………………..

    4. 第四步……………………..

    這樣的信息概括和排序頁面表現將是什麼樣子?你可以自己試着畫畫~~

    練習:QQ空間黃鑽催費頁面

    互聯網產品的交互設計方法

    說明:

    黃鑽貴族是QQ空間中的VIP用戶,黃鑽貴族用戶可以免費適用空間中的裝扮,另外還可以享受到日誌信紙、超大容量相冊等諸多特權。

    當用戶的黃鑽貴族身份即將到期的時候,從QQ聊天主面板上的“我的錢包”提示:“錢包”閃動,點擊後用一個490*300px的小窗口告知用戶續費的詳情。

    左側圖片在實際頁面中是一個flash動畫,若干張圖片切換,顯示黃鑽用戶可以裝扮出的更好的空間效果。

    右側的續費方式希望在所有的續費方式中選擇出兩、三種比較常用的方式,直接顯示出來(就是現在頁面上的“家庭、網吧”兩種方式),方便用戶。同時提供“支付中心”鏈接(http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home),讓用戶可以在全部續費方式中選擇。

    請使用上面介紹的自然語言法重新設計這個界面,讓信息表達的更高效、清晰、明確。

    參考方案

    需要表達的信息:

    ● 某某某,您的黃鑽要過期了。

    ● 黃鑽貴族很棒滴~~

    ● 現在續費黃鑽還有額外的優惠。

    ● 續費方式…

    更好的信息:

    ● 某某某,您的黃鑽要過期了。

    ● 您要是不再是黃鑽了,就有XXXXX損失啦~~

    ● 現在續費黃鑽還有額外的優惠。

    ● 續費方式…

    總結“自然語言法”

    自然語言法的基本思路是把界面表達轉化為自然的人與人交流。人與人的交流是我們每天都會發生的,相對更容易,這個技能也更容易提高。

    這裡涉及到的兩個例子都是比較偏向於信息表達的,對於操作較多的界面,這個方法仍舊適用。

    方法二. 結構圖法

    這個方法的思路:拋開頁面細節只考慮信息的組織形式。拋開頁面細節,是的,就是上面討論的那些具體的頁面細節,只考慮信息的整體構架,而頁面的細節留在確定了信息構架之後,用自然語言法來解決。

    信息構架的原則:

    1. 一個頁面一個主要內容。

    2. 個人信息&公共信息。

    3. 網頁基本內容有兩種:列表和文檔

    4. 更少的信息更好

    5. 一個用戶自己生成內容的document頁,有兩個狀態:瀏覽狀態&編輯狀態。

    6. 信息樹應該盡量窄而淺,並且盡量保持平衡。

    7. 與現實生活經驗相符

     ● 頁面在網站中需要有一個固定的位置。

     ● 同等級的內容應表現成並列的樣子。

    ……

    信息構架的常見模型:

    1. 列表+詳情頁+列表聚合頁

    2. Wizard模式。第一步->第二步->第三步…

    3. 主頁+若干個“臨時”頁面。例如:google帳戶

    互聯網產品的交互設計方法

    具體操作

    第一步. 明確描述全部內容。總結歸納產品所需要表達的所有信息。

    第二步. 畫樹狀圖。

    第三步. 用紙畫各頁草圖。草圖中需要包含的關鍵元素:頁面標題、導航、重要的鏈接和按鈕。

    第四步. 模擬演示網頁操作行為。

    實例:黃鑽等級

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    第一步. 總結歸納內容:

    ● 用戶個人的的黃鑽等級信息

    ● 等級介紹

    ● 黃鑽功能特權介紹

    ● 黃鑽貴族可免費領取的道具

    ● 黃鑽活動

    第二步. 樹狀圖:

    如果單純的按照上面概括的信息羅列,則可以規劃出一個黃鑽貴族的網站,樹狀圖如下:

    互聯網產品的交互設計方法
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    然而,信息構架的設計往往要建立在對現有產品深刻的理解基礎上。

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    Qzone的現狀:一個社區,成千上萬個個人空間。如何在現有的基礎上設計新的黃鑽等級?

    我們的方案是這樣的:

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    第三步. 草圖:

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    互聯網產品的交互設計方法

    這裡需要強調:紙原型中應包括頁面標題、模塊的標題、導航、重要的鏈接和按鈕,而不只是頁面最頂端的導航。有了重要的鏈接和按鈕才能清楚的演示出各個頁面之間跳轉的關係。

    最後,第四步. 手握原型,演示頁面間的跳轉,確保整個流程的順暢。

    練習:QQ空間日誌、心情、私密記事本

    互聯網產品的交互設計方法

    參考方案

    總結歸納內容:

    1. 日誌

    2. 心情

    3. 私密記事本

    樹狀圖:

    方案一:

    ● 主頁

    ● “大日誌”

    ■ 日誌

    ■ 心情

    ■ 私密記事本

    ● 音樂盒

    ● 留言板

    ● 相冊

    ……

    方案二:

    ● 主頁

    ● 日誌

    ● 心情

    ● 私密記事本

    ● 音樂盒

    ● 留言板

    ● 相冊

    根據上面兩種不同的樹狀圖方案,接下來的頁面草圖也會是不同的,你可是試着畫畫…

    方法三. 任務走查法

    這是一種優化現有產品的方法。成本低,見效快。對產品整體上影響小。

    以用戶任務為線索,以可用性準則為依據。是的,這個說話很好記,類似“以事實為依據,以法律為準繩。”

    “用戶任務”是指用戶實際使用這個產品時需要完成的任務。這個方法中,需要操作者依據主觀判斷制定用戶任務,而不是通過用戶研究。這雖然有可能造成更大的誤差,但同時節約了時間成本。實際工作中,參與這個產品設計的同學坐在一起討論一下,通常是可以比較準確的描述出用戶任務的。

    “可用性準則”在這個方法中是指:頁面表達原則、信息構架原則、視覺表現規範,這三部分。頁面表達原則和信息構架原則就是前面提到的,視覺表現規範是專門針對視覺設計而制定的。這個方法要處理的問題是現有產品,因此,不同於產品原型,更多了視覺表現這一環,在視覺設計過程中出現的問題也應該在走查中一起發現。

    視覺表現規範

    1. 滾動條看上去應該象滾動條

    2. 表單的對齊方式

    3. 重要的內容顯示在第一屏

    4. 導航應出現在第一屏上半部分

    5. 盡量避免使用裝飾性的圖標

    6. 避免內容看上去象廣告

    7. 光標樣式

    8. Tab需要有三種狀態而不是兩種

    9. 紅色表示警示,綠色表示ok,黃色表示提示

    10. 灰色通常表示“暫不可用”(disabled)

    具體操作

    第一步. 分析並總結所有任務

    第二步. 根據任務進行評估

    評估中需要注意:

    1. 不影響任務的問題不記錄

    2. 被記錄的缺陷是有根據的(根據可用性準則),而不是根據自己的感覺。

    實例:QQ秀快速換裝

    互聯網產品的交互設計方法

    第一步. 任務列表:

    ● 換一套新形象

    ● 換表情

    ● 換心情

    ● 隨便逛逛

    ● 換一個自己以前的形象

    第二步. 評估。以“換心情”任務為例:

    問題1 副標題表意不明確

    描述:

    互聯網產品的交互設計方法

    這句說明仍舊沒能說明“這裡是什麼功能”。如果能通過這句話說明:“在這裡添加文字內容,顯露您的心情”,說明的效果會更好。至於“讓好友都知道!”這幾個字幾乎是沒有用的,沒有傳達任何信息量。

    依據:頁面表達原則:信息的表達應該清楚、明確、直接。

    問題2 “請輸入心情秀”表意不明

    描述:

    互聯網產品的交互設計方法

    “請輸入心情秀文字”其實是第二層要表達的信息,第一層應該是:“這裡還沒有輸入文字”。沒有第一句,直接是第二句,需要用戶花些時間來推斷,推斷出,這裡顯示“請輸入心情秀文字”是因為自己沒有寫文字進去。

    依據:頁面表達原則:信息的表達應該清楚、明確、直接。

    問題3 拖動心情秀時,光標使用不正確

    描述:

    互聯網產品的交互設計方法

    光標在框中的是link的手型,實際上應該是十字箭頭。現在會被誤解為有點擊操作。

    依據:視覺表現規範:光標

    問題4 “心情秀”概念不清

    描述:

    互聯網產品的交互設計方法

    “心情秀預覽”暗示出,“心情秀”是指外框+文字內容。

    “換心情秀”功能只是換框,這意味着“心情秀”是指外框。

    措辭上的含混使得同一個名詞出現兩種不同的定義,不易於理解。“既然心情秀是指外框+文字內容,那麼當我點擊“下一個”后,其中的文字內容是不是也會變化?”

    依據:頁面表達原則:措辭統一

    問題5 換心情秀外框操作不便

    描述:

    互聯網產品的交互設計方法

    “上一個”“下一個”的操作不方便。無預覽圖,無法確定當前選項在全部“框”的列表中所處位置。

    依據:頁面表達原則:操作結果不可預知

    問題6 “預覽”按鈕視覺效果不佳

    描述:

    互聯網產品的交互設計方法

    預覽按鈕視覺樣式比較象disabled

    依據:灰色通常表示“暫不可用”(disabled)

    問題7 “脫掉”按鈕不易找到

    描述:

    互聯網產品的交互設計方法

    “脫掉”按鈕在框的有下角,很多時候看不到,並且文字超小。

    依據:頁面表達原則:信息的表達應該清楚、明確、直接。

    練習1:QQ秀照相館

    互聯網產品的交互設計方法

    練習2:Qzone滔滔心情

    互聯網產品的交互設計方法

    總結任務走查法:

    為什麼要強調是“按任務”。因為,類似“保存形象按鈕太難看啦~~”之類的問題是不應該提出來的。因為用戶在實際使用的時候,這個問題是遠遠不如“誤以為預覽按鈕不能點擊”重要。“按任務”是在確保評估更接近真實。

    “按任務”很多時候與“按欄目”差不多的,但是按任務的優點在於:

    1. cover到了各個欄目之間跳轉可能出現的問題。

    2. 抓住了重點的問題,而放過了無關緊要的問題。比如:“申請紅鑽”按鈕。

    總結任務的過程實際是簡化了的“人物角色-情景描述-任務分解”方法。

    最後最後的總結

    從狹義的交互設計的定義來看,交互設計的主要任務是:表達。通過清晰、準確、簡潔的表達進而實現人機交互。

    互聯網產品的交互設計應該怎麼做的問題,就演化成了:互聯網產品應該如何去表達。

    以上方法都緊緊圍繞着“什麼樣的方法才能讓產品的表達更有效”這個核心展開。

    那麼,

    let’s talk

    let’s talk

    let’s talk

    ……

    ( 註:本文是UPA user friendy 2008中由我主持的一個同名工作坊的講稿。

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 互聯網產品的交互設計方法 這教學會喜歡

    文章標題: 骨子愛創意- 互聯網產品的交互設計方法–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 方法,設計,交互,產品,互聯網,信息,頁面,表達,問題,任務

    本文永久連結 :互聯網產品的交互設計方法

    本文轉載自 :VIA