交互設(shè)計從來都不是簡單的事情?？煽康慕换ネǔＰ枰柚鷮τ脩粜袨榈纳钊敕治觯缓笥嗅槍π缘木牟邉??？墒请S著新的技術(shù)和新的交互模式的不斷涌現(xiàn)，事情就變得不是那么容易了。其實大家遭遇的困境都很相似，用戶已經(jīng)很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動效所打動，真正能讓他們露出微笑的是持久、令人愉悅的交互設(shè)計和用戶體驗。如果你對于日常的設(shè)計中的常見的誤區(qū)有所了解，自然會有意識地繞過這些坑。
為了更好的設(shè)計，我們?yōu)槟愫唵慰偨Y(jié)了一下最常見的5種交互設(shè)計的誤區(qū)。
1、過度的創(chuàng)意
網(wǎng)頁設(shè)計師 絕對不缺少創(chuàng)意。我們希望借工作表達自己，也一直在試圖尋找能讓產(chǎn)品脫穎而出的優(yōu)秀創(chuàng)意。但是當(dāng)涉及到交互設(shè)計的時候，推陳出新并不一定總是好的，它甚至 會對你的網(wǎng)站和產(chǎn)品產(chǎn)生不利的影響。的確，許多用戶渴求新鮮的創(chuàng)意，但是在操作和交互上卻往往希望協(xié)調(diào)可控，所以他們更傾向于熟悉的交互。Etsy的創(chuàng)業(yè) 總監(jiān)Randy曾經(jīng)撰文探討過這個問題，文中直言“設(shè)計師們不要在此(交互設(shè)計)自作聰明了!”在這篇文中，他詳細解釋了為什么你不應(yīng)該走極端去設(shè)計充滿大量創(chuàng)新交互的網(wǎng)頁。
以Lotorama的網(wǎng)站為例子，漂亮的頁面和柔和的音樂都非常的贊，但是用戶進來之后會遲疑，想知道這個網(wǎng)站要如何操作。不要曲解我的意思，如果你是純粹處于炫技，那么這種華麗而充滿游戲性的網(wǎng)站絕對稱得上是創(chuàng)意無限，但是對于普通用戶而言，他們的直覺失去效果，茫然無措會成為網(wǎng)站瀏覽的障礙。
下面是另外一個案例，這個名為Safety on the Slopes 的項目是為了說明冬季運動的危險的，整個網(wǎng)站的設(shè)計整潔，交互也直觀。網(wǎng)站設(shè)計也有所創(chuàng)新，但是同時是以用戶交互直覺為先決條件，以身臨其境為目標。
2、令人迷惑的交互
“不要自作聰明”的規(guī)則也應(yīng)當(dāng)應(yīng)用在導(dǎo)航設(shè)計上。一些設(shè)計師試圖運用別具一格不同尋常的名稱，以活動更富有實驗性的導(dǎo)航。比如這個Chijoff網(wǎng)站， 就讓前來應(yīng)聘的用戶充滿困惑。如果你是網(wǎng)站的訪客，需要來回折騰一陣子，才能搞清楚這個名為“Co-Create”的頁面實際上也就是常見的 “Services”頁面。最糾結(jié)的是，即便是你將整個頁面都看完之后，仍然高不清楚要怎么辦，因為這個頁面的底部僅僅只有一個表單，展示行業(yè)新聞，并且 僅僅提供一個注冊入口!至于聯(lián)系頁面就更簡單了，僅僅提供了一個郵政編碼和一個郵件地址?？偠灾?，他們用各種手段讓用戶無法直接快速有效的聯(lián)系上他們。
在看看這個案例。你猜猜看，Maison Margiela 的頁面上的“Universe”這個分類是干啥的?這個炫酷的鏈接，實際上是鏈接到他們的Facebook頁面的……唉。
反例當(dāng)然也有，看看legworkstrdio的網(wǎng)站吧，他們的創(chuàng)意非常不錯，導(dǎo)航清晰明確，用戶也不會在導(dǎo)航中迷失。
3、雜亂無章
曾經(jīng)有過一個階段，設(shè)計師試圖將所有的內(nèi)容全都塞到一個頁面當(dāng)中去。雖然這個時代已經(jīng)過去了，但是很多網(wǎng)站依然在犯這個錯誤，甚至在我們自己設(shè)計的時候，有時候也會身不由己地想這么做。看看這個在線商店的設(shè)計吧：
試圖使用一個簡單的配色方案,但問題是,頁面小盒里,再復(fù)雜的字體破壞了整體風(fēng)格,用戶也在大量復(fù)雜信息的孟力量。在搜索框中,“今天你想要什么?“復(fù)制是時尚,但頁面風(fēng)格是完全過時了。相比之下,EBay設(shè)計,設(shè)計更為克制,保持清晰和簡單的設(shè)計,突出的內(nèi)容用戶的注意力,并標明用戶下一步如何去做。
4、要有對比度
對比度是構(gòu)建視覺層次最重要的手段之一，也是讓視覺元素吸引用戶的絕佳方式。在網(wǎng)頁設(shè)計中，對比度不僅僅是通過色彩來呈現(xiàn)的，尺寸控制、形狀設(shè)計、位置調(diào)整也都能表現(xiàn)出對比度。
最簡單也是最生動的案例，就是下面的這個網(wǎng)站。設(shè)計師在網(wǎng)站的一致性上做的頗為不錯，但是相對復(fù)雜的背景和文字內(nèi)容、按鈕等前景元素之間的對比不明顯。
相比之下，這個網(wǎng)站也采用了深淺色(黑白)的對比來進行設(shè)計，但是結(jié)果卻截然不同。另外，充滿創(chuàng)意的滾動效果也引入了頗為不錯的視覺效果，很酷吧?
5、忽視表單樣式
表單設(shè)計其實是用戶體驗設(shè)計的基本組成部分之一。每個網(wǎng)站都有不同的設(shè)計目標，不論是銷售產(chǎn)品、呈現(xiàn)信息還是提供溝通平臺，然而許多設(shè)計漂亮的網(wǎng)站總會給你一個令人感到無聊到死的復(fù)雜表單，除了那些極其想加入會員或者想?yún)⑴c問卷調(diào)查的那些訪客，許多用戶(比如我)會直接關(guān)閉頁面，離開網(wǎng)站。
有了JCF這樣的跨瀏覽器解決方案之后，你就可以同丑陋的默認表單樣式說再見了，你可以設(shè)計更優(yōu)秀更人性化的表單那設(shè)計，來提升交互效率和用戶體驗。
另外一個惱人的情況是，表單要求太多，想法不成熟，或者并未經(jīng)過良好的測試。比如sketchybusiness.io 這個網(wǎng)站中，表單突出了所有的空白字段，即使有些是不需要填寫的。
反觀mostlyserious.io的表單設(shè)計，你會喜歡表單中的鼠標懸停提示。另外，其中“Don’t be shy”的提醒為整個表單增添了人性化的元素。
網(wǎng)站并不是做好了就夠了，你還需要多加測試!有許多問題并不是意料之中的。用戶會在哪里碰到問題?導(dǎo)航中的設(shè)定是否符合用戶的意識?視差效果和內(nèi)置 的視頻是否能夠流暢加載?讓用戶參與測試最大的好處是你真的開始擁有用戶的視角，而非你自己的腦補，了解實際的需求，才能有所改進。不要試圖限制你的創(chuàng)造 力，但是也不要忘記基本的原則，這樣才能在不為用戶帶來困惑和沮喪的同時，給予他們驚喜。既然誤區(qū)已經(jīng)闡述，來看看，交互設(shè)計的基本功。
1、下拉輸入
代表應(yīng)用：Flickr、Opera Coast、any.do、Timi記賬
通過下拉動作呼氣的輸入操作，如搜索、添加項目等，例如Flickr，opera coast都是通過下拉呼出搜索框，另一方面，有下拉列表添加項目，這類的app有any.do、Timi記賬。下拉是一個很自然很方便，非常適合“在任何時間，快速輸入”的情況下，比如any.do作為GTD應(yīng)用，設(shè)計是以下拉說很適合，因為大多數(shù)時候，我們會在這樣的情況下，使用功能：走在路上，突然有了一個靈感，然后解鎖任何。寫下思考。這樣的情況可以進入最簡單，最快的方式，而不是找到添加按鈕。
圖1 Opera Coast的下拉搜索
圖2 Flickr的下拉搜索
2、登錄驗證帳號
代表應(yīng)用：印象筆記
通常的登錄和注冊是分開設(shè)計的，而印象筆記將登錄和注冊整合，每一步驟都只有一個表單，注冊和登錄沒有任何沖突。這樣避免了”用戶已存在”然后又要重新填寫表單的不良體驗，在流程上有很大的優(yōu)化，如下圖4所示：
圖3 印象筆記
圖4 印象筆記的登錄流程優(yōu)化
3、未激活按鈕的設(shè)計
代表應(yīng)用：snapchat
交互設(shè)計中有個叫做”預(yù)設(shè)用途”的原則，效果是一個界面或控件，讓用戶很明白的，就知道如何使用它。當(dāng)我看到它很明顯，最基本的要求是至少能知道這種控制可以操作，和所謂的“活動”按鈕包含“激活”和“無為”兩國目前在“按鈕無效”的狀態(tài)，這就需要設(shè)計兩種情況。一般來說，有兩種方法來隱藏或顯示一個操作的視覺效果，如灰、Snapchat形式填充接口，例如，當(dāng)一個形式是不完全的，填寫“繼續(xù)”按鈕一直處于灰色狀態(tài)，它告訴用戶按鈕未被激活。在這里閱讀，你可能會覺得很簡單，但只要你仔細一看，你會發(fā)現(xiàn)有很多應(yīng)用程序沒有這樣的設(shè)計。
圖5 snapchat的表單
4、輸入框title或提示文本的解決方案
代表應(yīng)用：dubble
通常設(shè)計輸入框時，我們會使用Lable標簽給每個輸入框一個title，比如”用戶名”、”密碼”，另外，還會在輸入框中使用灰色的提示文本，如圖6所示。但是，在手持設(shè)備中的應(yīng)用，這種設(shè)計可以產(chǎn)生兩個問題，一是浪費屏幕空間，我們知道，手機屏幕的空間是有價值的，并使標簽標簽標題將大屏幕空間;二是提示文本將在用戶輸入，提示效果不能繼續(xù)任務(wù)的結(jié)束。因此，如何解決這兩個問題，以下是圖7所示，將標題輸入框，當(dāng)用戶輸入的邊界，或像一雙應(yīng)用注冊屏幕，移動工具提示文本輸入框上面的鍵盤，如圖8所示。
圖6 通常情況下的輸入框設(shè)計
圖7 將title移至輸入框邊框
圖8 dubble的輸入框提示文本
5、懸浮聊天窗，滑動關(guān)閉聊天窗口
代表應(yīng)用：Facebook
如圖9所示，F(xiàn)acebook將聊天窗口懸浮在界面的邊緣，可以任意拖動，但在屏幕邊緣，自動打開其他背景半透明罩聊天時，層次感很強，按住聊天窗口的任意位置的幻燈片的右上角可以關(guān)閉聊天窗口，有是一個動態(tài)的影響。淘寶手機客戶端的設(shè)計援助，為用戶動態(tài)設(shè)計為主，且應(yīng)用非常適合私人聊天是互補的，比如微博、QQ空間等。稍微多說一句，新浪微博之前一直想加強社交屬性，減弱媒體屬性的標簽，但最終未果，我認為新浪網(wǎng)非常重視移動客戶端和早期的像臉譜網(wǎng)利用設(shè)計來加強社會屬性可能更有效。
圖9 facebook的懸浮聊天窗口
好了，這篇文章就到此為止了，找圖、截圖神馬的真心不容易啊。如果你也發(fā)現(xiàn)了其他有趣并且有價值的交互設(shè)計，我非常期盼你也與我分享。你我共同進步，海淘科技!
文章下載，點擊：交互設(shè)計頁面之設(shè)計事項
