人機(jī)交互課件6b交互結(jié)構(gòu)

交互結(jié)構(gòu)設(shè)計sBeijingsTokyo此時向左按鈕無效此時向右按鈕無效ok

cancelapply地區(qū)選擇外觀設(shè)置顯示地區(qū)BeijingTokyoLandon+-搜索地區(qū)BeijingTokyoLandonNew

Yorksokcancelapply地區(qū)選擇外觀設(shè)置外觀設(shè)置預(yù)覽效果恢復(fù)默認(rèn)...皮膚庫p

p顏色庫pOkss此時向左按鈕無效此時向右按鈕無效Beijing09/02/2719:53Tokyo09/02/2701:2519

5319

53ok

cancelapply地區(qū)選擇外觀設(shè)置顯示地區(qū)BeijingTokyoLandon+搜索地區(qū)New

YorkNew

YorkBeijingTokyo-

Landonok

cancel

apply地區(qū)選擇外觀設(shè)置顯示地區(qū)BeijingTokyoLandonNew

york+-搜索地區(qū)BeijingTokyoLandonMew

york選擇后添加okcancelapply地區(qū)選擇外觀設(shè)置顯示地區(qū)BeijingTokyoNew

york+-搜索地區(qū)BeijingTokyoLandonMew

york選擇后刪除添加后出現(xiàn)重復(fù)時區(qū)ok

cancel提示：紐約和倫敦同屬東八區(qū)。選擇確認(rèn)則加入到顯示列表，選擇取消則放棄。OkPhone上的字體英文為：HelveticaNeue

。至于中文Mac下用的是黑體，Win下則為華文黑體。Android

上的字體為：Droid

sans

fallback，是谷歌自己的字體，與微軟雅黑很像。保持用戶對頁面專注力，讓人一目了然如何使用你的內(nèi)容清晰定義適合

使用場景的應(yīng)用定義說明(Application

Definition

Statement)，篩檢功能，降維信息，滿足用戶專注地獲取信息、完成當(dāng)前任務(wù)。用簡潔語句歸納增加用戶理解成本和

負(fù)擔(dān)避免噪音、無用的留白、花里 的背景避免用戶被內(nèi)容以外的視覺信息干擾。盡可能減少用戶的輸入用戶信息;有策略地向用戶提請求。簡潔表達(dá)必要信息簡潔明確地提示引導(dǎo)性操作(如新手任務(wù)、操作指引、功能介紹)和中斷性操作(如提示、詢問)。避免不必要的交互宮格式框架式結(jié)構(gòu)抽屜式導(dǎo)航式結(jié)構(gòu)適用項：較為適用內(nèi)容簡單， 選項不多,用戶需要在選項間頻繁切換來執(zhí)行的多任務(wù)。此種架構(gòu)方式可以減少用戶的點擊次數(shù)，提高效率。這種模式不適合太過復(fù)雜和不穩(wěn)定的結(jié)構(gòu)。式結(jié)構(gòu)欄設(shè)計要素背景顏色選中狀態(tài)設(shè)計風(fēng)格2選中狀態(tài)1圖標(biāo)變色32

區(qū)域變色同時變色3設(shè)計風(fēng)格13扁平化2

擬物化個性化九宮格適用項：內(nèi)容豐富的導(dǎo)航

，且 這些都是并列的項目。優(yōu)

點： 1.清晰展現(xiàn)各2.容易記住各 位置，方便快速找到間靈活跳轉(zhuǎn)，切換功能時必須返回首頁，缺

點：無法在多不適合多任務(wù)操作1布局1圖標(biāo)（圓形，矩形）布局32

色塊布局個性化布局抽屜式抽屜式適用項：以當(dāng)前內(nèi)容為優(yōu)

點：導(dǎo)航數(shù)目較多操作靈活性比較大展示的應(yīng)用缺 點：1.不利于經(jīng)常切換，認(rèn)知負(fù)擔(dān)大。豆瓣網(wǎng)頁

版二級頁面點聚式陳列館式結(jié)構(gòu)旋轉(zhuǎn)木馬式結(jié)構(gòu)/列表式結(jié)構(gòu)瀏覽信息結(jié)構(gòu)陳列館式（圖表式）陳列館式適用項：具有較多內(nèi)容的展示優(yōu)

點：直觀展現(xiàn)各項內(nèi)容方便瀏覽經(jīng)常更新的內(nèi)容缺 點：不適合展現(xiàn)頂層

框架容易形成界面內(nèi)容過多，顯得雜亂旋轉(zhuǎn)木馬式旋轉(zhuǎn)木馬式在一條目內(nèi)同時呈現(xiàn)多張 ，引導(dǎo)用戶通過滑動屏幕瀏覽 內(nèi)容。優(yōu)點：能夠在有限的屏幕空高效的呈現(xiàn)大量圖像內(nèi)容，用戶更好的聚焦、瀏覽體驗原本的有如電紛呈。（2）旋轉(zhuǎn)木馬式旋轉(zhuǎn)木馬的交互特性屏幕中只呈現(xiàn)部分內(nèi)容引導(dǎo)用戶進(jìn)行滾動（2）旋轉(zhuǎn)木馬式旋轉(zhuǎn)木馬的應(yīng)用瀏覽類產(chǎn)品列表式結(jié)構(gòu)列表頁設(shè)計時間軸列表界面設(shè)計音樂列表頁設(shè)計點聚式適用項：需要提取最 的幾個點來展示產(chǎn)品的特性優(yōu) 點：

1.靈活 2.展示方式有趣，3.使界面更開闊缺 點： 1.隱藏框架中其他2.對 交互的功能可見性（affordance）要求高方向轉(zhuǎn)換喚醒屏幕反饋控制顯示瀏覽方式分類方向轉(zhuǎn)換左右平滑列表彈出前后切換方向轉(zhuǎn)換左右翻頁添加列表項切換方向轉(zhuǎn)換上下滾動條點擊下拉左右切換喚醒屏幕左滑提示下拉加載點擊隱藏顯示四周模糊四周遮罩點擊反饋控制翻轉(zhuǎn)提示移動刪除動態(tài)效果展示幕不同于網(wǎng)頁，設(shè)計者在設(shè)計時需要考慮的是手勢的操作對于屏幕的影響。關(guān)于瀏覽方式和動態(tài)效果：平滑清晰的效果總是受歡迎的，一卡一頓的模糊效果使人感到煩悶。將信息第一時間展現(xiàn)給用戶是尤為重要的，能夠做到不切換界面是最好的，減少用戶的點擊次

數(shù)這些也不可忽視?！啊拔淖旨訕?biāo)準(zhǔn)色文字加logoFlicker文字加變化果殼文字加

賣萌新版來往文字加吉祥物美團(tuán)文字加吉祥物馬蜂窩這貨還有聲音無文字暖心類Coast新全手勢瀏覽器無文字暖心類無文字暖心類無文字暖心類易信朋友無文字暖心類來往搜索無文字暖心類人人CheezeTumblrLongding界面刷新機(jī)制以及較快的由于鼠標(biāo)、傳統(tǒng)操作速度，因而視覺交互較少由于

幕限制，演變出了較為繁多的花樣。但是整體仍然缺乏創(chuàng)新加載機(jī)制：減少用戶等待的無聊感進(jìn)度登錄這個過渡演示了動畫可以對用戶有用。很明顯，在

要求用戶添加作為Rememberme步驟中一部分時，該動畫展示很好地展示了輸入部分。當(dāng)創(chuàng)建表格的時候，很容易忽略用戶出錯時的體驗。這個動畫告訴用戶他們提供了錯誤的信息，這也是用戶倍感挫敗的地方，也經(jīng)常會導(dǎo)致很高的支付流失率。所以添加了這個簡單的晃動效果。在事情出錯時，它同時也可以減輕用戶挫敗感。上邊這個設(shè)計是簡單的晃動。動畫可以讓用戶察覺到事情進(jìn)展比他們想象中的要快很多。當(dāng)你等待某個東西時，

知道時間相對來說會慢的像蝸牛。上邊這個小小的動畫可以讓等待變得更加流暢有趣，即便實際上時間并沒有任何不同。值得注意的是，這個動畫整體上來說是個幻覺--實際上

并不知道什么時候你收到了信息?！癙aymentInfo”和“Pay$25.00”兩種狀態(tài)之間的轉(zhuǎn)換使用了滑動效果，呼應(yīng)了上邊支付細(xì)節(jié)的過渡。當(dāng)你完成每個步驟的時候，突出了 操作的按鈕的改變。當(dāng)用戶點擊“Pay”時，在展示成功狀態(tài)前會出現(xiàn)一個短時間持續(xù)的spinner。我非常喜歡這個checkmark動畫，它讓你覺得很簡單就完成了

。這個動畫看起來似乎有