推薦：交互設(shè)計(jì)實(shí)用指南系列(0) – 我們眼中的交互設(shè)計(jì)
交互設(shè)計(jì)(Interaction Design, 縮寫 IxD 或者 IaD),是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物，即人工制成物品，例如，軟件、移動(dòng)設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式(the “interaction”,即人工制品在特定場(chǎng)

“操作入口明確”，就是指產(chǎn)品的任何一個(gè)功能都要有明確、合理的入口。“操作入口”，指的是產(chǎn)品內(nèi)部不同模塊之間的轉(zhuǎn)接元素，例如在Web產(chǎn)品中，按鈕控件、輸入框、文字鏈等都屬于操作入口；“明確”指的是入口的視覺感是清晰的、可識(shí)別的；“合理”是指入口的出現(xiàn)是符合用戶操作邏輯的，適時(shí)的。

之所以要提出“操作入口明確”，是因?yàn)橛脩粼谑褂卯a(chǎn)品的過程中，往往遵循的是可分析的行為邏輯。對(duì)于產(chǎn)品本身而言，必須有相對(duì)應(yīng)的操作提示來引導(dǎo)用戶最有效地獲取信息，還原為實(shí)現(xiàn)層面就是明確、合理的操作入口。如果說首頁(yè)是整個(gè)網(wǎng)站的門戶，那么操作入口就是連接各個(gè)子頁(yè)面的樞紐。設(shè)計(jì)師的終極目的， 就是通過對(duì)這些樞紐的優(yōu)化讓用戶利用最有效的方式在最短時(shí)間內(nèi)完成自己的預(yù)期任務(wù)。

對(duì)于基于WEB的電子商務(wù)而言，核心價(jià)值是信息資源，而能否將這些海量數(shù)據(jù)合理地推送給用戶，則是產(chǎn)品生存的關(guān)鍵。操作入口的設(shè)計(jì)，甚至可以看做 “通過對(duì)引導(dǎo)方式的優(yōu)化間接達(dá)到對(duì)信息資源的歸類”——這很像圖書館中的書類標(biāo)簽管理，用戶可以根據(jù)不同的類目標(biāo)簽找到自己想看的書。失敗的操作入口所帶來的后果往往是災(zāi)難性的，功能失效、位置隱蔽、信息干擾……都會(huì)給用戶帶來嚴(yán)重的挫敗感，使其絕望地湮沒在茫茫的信息海洋中。所以，明確合理的操作入口設(shè)計(jì)，是對(duì)產(chǎn)品“有效性”的保障，更是對(duì)用戶體驗(yàn)的尊重。

那么，在具體的設(shè)計(jì)中如何做到“操作入口明確”呢？

1、強(qiáng)化重點(diǎn)，弱化周邊

星爺《唐伯虎點(diǎn)秋香》中的精彩片段，一聲“美女”換來諸多牛鬼蛇神的壯觀回眸和秋香MM的驚鴻一瞥——“美女這東西是要需要比較地”。WEB產(chǎn)品也 一樣，尤其是海量信息的電子商務(wù)網(wǎng)站，由信息架構(gòu)衍生出的各類功能入口相當(dāng)復(fù)雜，部署在頁(yè)面的各個(gè)角落，一不留心就被疏漏。通常有兩種方法來解決這類問題：一是增加入口數(shù)量，即“廣撒網(wǎng)”，同樣的功能入口有多個(gè)，以此增加功能模塊的使用率，不過這種方法存在較大隱患，后面會(huì)詳細(xì)分析；二是“強(qiáng)化重點(diǎn)，弱化周邊”，即在視覺上將入口模塊凸顯出來，采用精妙的布局，并適當(dāng)弱化周邊的信息展示，加大二者的權(quán)重對(duì)比，客觀上增加用戶識(shí)別的準(zhǔn)確性。

例如地球人最熟悉的Google首頁(yè)：

www.google.com

濃郁藝術(shù)氣息的LOGO作為唯一的色彩元素有效地抓住了瀏覽者的視覺中心，輸入欄和Button作為功能核心占據(jù)了頁(yè)面的心臟位置，這種組合讓用戶 通過第一視覺便能夠準(zhǔn)確理解頁(yè)面所表達(dá)的信息邏輯——“輸入關(guān)鍵詞”+“點(diǎn)擊按鈕”=“Everything you want”。

再看一個(gè)反例，如圖：

download.pchome.net

面對(duì)這樣一個(gè)下載頁(yè)面，面對(duì)這樣一個(gè)搶眼的大Button（標(biāo)記②），相信即使是電信用戶，也會(huì)很大方地支持下網(wǎng)通……但是，點(diǎn)擊之后彈出的卻是下載遨游瀏覽器的窗口，崩潰之余再仔細(xì)查看，終于發(fā)現(xiàn)在華麗的廣告位旁邊蜷縮著一個(gè)毫無特色的“立刻下載”（標(biāo)記 ①）——?jiǎng)x那間，無數(shù)用戶被這種飽含“讓賢”哲理的設(shè)計(jì)深深震撼了！

2、入口信息明確易識(shí)別

上面提到，增加入口數(shù)量雖然在一定程度上有助于提高功能模塊的使用率，但也存在致命的缺陷——入口信息不明確。因?yàn)椤叭肟凇钡韧�于用戶的“選擇”， 入口越多，選擇越多，“過多的選擇等于沒有選擇”，這勢(shì)必會(huì)造成用戶使用產(chǎn)品時(shí)的疑惑：這幾個(gè)鏈接和按鈕好像都一樣啊，該選哪個(gè)呢？所以，要根據(jù)頁(yè)面本身 的信息量嚴(yán)格控制同功能入口的數(shù)量，保證有效的識(shí)別性，讓用戶迅速找到正確的入口。

這次用我們可愛的兄弟產(chǎn)品“支付寶”為例，看看改版前后的細(xì)節(jié)變化：

改版前

改版后

通過對(duì)比，我們可以發(fā)現(xiàn)，管理頁(yè)面中部分相同功能的入口出現(xiàn)了多個(gè)，對(duì)于新手用戶來說，很可能造成不必要的困惑；而在新版本中，每個(gè)功能模塊只有一個(gè)入口，明晰簡(jiǎn)潔。

另外，對(duì)于入口元素本身而言，需要通過適合的展現(xiàn)形式來提示用戶此入口的功能屬性。例如，一個(gè)標(biāo)準(zhǔn)的按鈕控件，用戶會(huì)知 道“可以點(diǎn)擊”，但點(diǎn)擊后會(huì)發(fā)生什么交互行為，需要通過其他視覺元素進(jìn)行信息提示（如按鈕上的文字或者具有標(biāo)識(shí)性的ICON），告訴用戶當(dāng)前的情況和可行的操作方案，這點(diǎn)有些類似生活中的“指示設(shè)計(jì)”。

下圖是eBay首頁(yè)的注冊(cè)區(qū)，通過按鈕文字和輔助文本信息，新手用戶也能夠很清楚地了解眼前這兩個(gè)Button代表的意義。

www.ebay.com

3、根據(jù)用戶定制合適的入口

交互設(shè)計(jì)離開用戶研究便是閉門造車，在設(shè)計(jì)產(chǎn)品操作入口的同時(shí)，要充分考慮到不同用戶的需求。用戶劃分維度很多， 《About Face3.0》中根據(jù)與產(chǎn)品的相關(guān)度將其分為“新手”、“中間用戶”和“專家”。這三類用戶對(duì)產(chǎn)品的了解程度并不一致，操作行為習(xí)慣也大相徑庭，若再通 過其他維度將其細(xì)分（如“有無目的”、“性別年齡”等），會(huì)相當(dāng)復(fù)雜，在對(duì)產(chǎn)品進(jìn)行進(jìn)一步優(yōu)化時(shí)，應(yīng)當(dāng)考慮到操作入口對(duì)不同用戶的適用性。

“在交互和界面設(shè)計(jì)中，如何用同一個(gè)界面滿足新手用戶和專家用戶的需求是長(zhǎng)久以來存在的難題之一。雖然大多數(shù)中間用戶傾 向于保留在這一類型中，但新手不會(huì)永遠(yuǎn)是新手。要維持高水平的技術(shù)程度很困難，因此專家門也在快速變化。新手的變化更快，新手和專家隨著時(shí)間推移都會(huì)傾向 于成為中間用戶�！保ā禔bout Face 3.0》第三章），所以針對(duì)用戶的定性研究和定量分析會(huì)顯得尤為重要。不過，無論如何劃分用戶人群，有一點(diǎn)共性是至始至終的——產(chǎn)品操作入口設(shè)計(jì)的終極目 的是讓用戶迅速有效地完成核心需求。

小 結(jié)

綜上所述，對(duì)于信息龐雜的電子商務(wù)網(wǎng)站而言，出色的操作入口設(shè)計(jì)好似科幻片中的“星際之門”，能讓用戶隨心所欲地抵達(dá)任意空間，享受完美的交互體驗(yàn)；同樣，失敗的設(shè)計(jì)也能讓用戶猶如墜入希臘神話中恐怖的克里特島迷宮，郁悶不可自拔�！安僮魅肟诿鞔_”，是所有優(yōu)秀交互產(chǎn)品的 共性之一，也是每一個(gè)設(shè)計(jì)師“想用戶之所想”的職責(zé)所在。

分享：網(wǎng)頁(yè)界面設(shè)計(jì)速成