交互設(shè)計(jì)頁(yè)面之設(shè)計(jì)事項(xiàng)

網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的五種交互設(shè)計(jì)錯(cuò)誤

交互設(shè)計(jì)從來(lái)都不是簡(jiǎn)單的事情?？煽康慕换ネǔＰ枰柚鷮?duì)用戶(hù)行為的深入分析，然后有針對(duì)性的精心策劃。可是隨著新的技術(shù)和新的交互模式的不斷涌現(xiàn)，事情就變得不是那么容易了。其實(shí)大家遭遇的困境都很相似，用戶(hù)已經(jīng)很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動(dòng)效所打動(dòng)，真正能讓他們露出微笑的是持久、令人愉悅的交互設(shè)計(jì)和用戶(hù)體驗(yàn)。如果你對(duì)于日常的設(shè)計(jì)中的常見(jiàn)的誤區(qū)有所了解，自然會(huì)有意識(shí)地繞過(guò)這些坑。

為了更好的設(shè)計(jì)，我們?yōu)槟愫?jiǎn)單總結(jié)了一下最常見(jiàn)的5種交互設(shè)計(jì)的誤區(qū)。

1、過(guò)度的創(chuàng)意

網(wǎng)頁(yè)設(shè)計(jì)師 絕對(duì)不缺少創(chuàng)意。我們希望借工作表達(dá)自己，也一直在試圖尋找能讓產(chǎn)品脫穎而出的優(yōu)秀創(chuàng)意。但是當(dāng)涉及到交互設(shè)計(jì)的時(shí)候，推陳出新并不一定總是好的，它甚至 會(huì)對(duì)你的網(wǎng)站和產(chǎn)品產(chǎn)生不利的影響。的確，許多用戶(hù)渴求新鮮的創(chuàng)意，但是在操作和交互上卻往往希望協(xié)調(diào)可控，所以他們更傾向于熟悉的交互。Etsy的創(chuàng)業(yè) 總監(jiān)Randy曾經(jīng)撰文探討過(guò)這個(gè)問(wèn)題，文中直言“設(shè)計(jì)師們不要在此(交互設(shè)計(jì))自作聰明了!”在這篇文中，他詳細(xì)解釋了為什么你不應(yīng)該走極端去設(shè)計(jì)充滿(mǎn)大量創(chuàng)新交互的網(wǎng)頁(yè)。

以Lotorama的網(wǎng)站為例子，漂亮的頁(yè)面和柔和的音樂(lè)都非常的贊，但是用戶(hù)進(jìn)來(lái)之后會(huì)遲疑，想知道這個(gè)網(wǎng)站要如何操作。不要曲解我的意思，如果你是純粹處于炫技，那么這種華麗而充滿(mǎn)游戲性的網(wǎng)站絕對(duì)稱(chēng)得上是創(chuàng)意無(wú)限，但是對(duì)于普通用戶(hù)而言，他們的直覺(jué)失去效果，茫然無(wú)措會(huì)成為網(wǎng)站瀏覽的障礙。

下面是另外一個(gè)案例，這個(gè)名為Safety on the Slopes 的項(xiàng)目是為了說(shuō)明冬季運(yùn)動(dòng)的危險(xiǎn)的，整個(gè)網(wǎng)站的設(shè)計(jì)整潔，交互也直觀。網(wǎng)站設(shè)計(jì)也有所創(chuàng)新，但是同時(shí)是以用戶(hù)交互直覺(jué)為先決條件，以身臨其境為目標(biāo)。

2、令人迷惑的交互

“不要自作聰明”的規(guī)則也應(yīng)當(dāng)應(yīng)用在導(dǎo)航設(shè)計(jì)上。一些設(shè)計(jì)師試圖運(yùn)用別具一格不同尋常的名稱(chēng)，以活動(dòng)更富有實(shí)驗(yàn)性的導(dǎo)航。比如這個(gè)Chijoff網(wǎng)站， 就讓前來(lái)應(yīng)聘的用戶(hù)充滿(mǎn)困惑。如果你是網(wǎng)站的訪客，需要來(lái)回折騰一陣子，才能搞清楚這個(gè)名為“Co-Create”的頁(yè)面實(shí)際上也就是常見(jiàn)的 “Services”頁(yè)面。最糾結(jié)的是，即便是你將整個(gè)頁(yè)面都看完之后，仍然高不清楚要怎么辦，因?yàn)檫@個(gè)頁(yè)面的底部?jī)H僅只有一個(gè)表單，展示行業(yè)新聞，并且 僅僅提供一個(gè)注冊(cè)入口!至于聯(lián)系頁(yè)面就更簡(jiǎn)單了，僅僅提供了一個(gè)郵政編碼和一個(gè)郵件地址?？偠灾?，他們用各種手段讓用戶(hù)無(wú)法直接快速有效的聯(lián)系上他們。

在看看這個(gè)案例。你猜猜看，Maison Margiela 的頁(yè)面上的“Universe”這個(gè)分類(lèi)是干啥的?這個(gè)炫酷的鏈接，實(shí)際上是鏈接到他們的Facebook頁(yè)面的……唉。

反例當(dāng)然也有，看看legworkstrdio的網(wǎng)站吧，他們的創(chuàng)意非常不錯(cuò)，導(dǎo)航清晰明確，用戶(hù)也不會(huì)在導(dǎo)航中迷失。

3、雜亂無(wú)章

曾經(jīng)有過(guò)一個(gè)階段，設(shè)計(jì)師試圖將所有的內(nèi)容全都塞到一個(gè)頁(yè)面當(dāng)中去。雖然這個(gè)時(shí)代已經(jīng)過(guò)去了，但是很多網(wǎng)站依然在犯這個(gè)錯(cuò)誤，甚至在我們自己設(shè)計(jì)的時(shí)候，有時(shí)候也會(huì)身不由己地想這么做?？纯催@個(gè)在線(xiàn)商店的設(shè)計(jì)吧：

試圖使用一個(gè)簡(jiǎn)單的配色方案,但問(wèn)題是,頁(yè)面小盒里,再?gòu)?fù)雜的字體破壞了整體風(fēng)格,用戶(hù)也在大量復(fù)雜信息的孟力量。在搜索框中,“今天你想要什么?“復(fù)制是時(shí)尚,但頁(yè)面風(fēng)格是完全過(guò)時(shí)了。相比之下,EBay設(shè)計(jì),設(shè)計(jì)更為克制,保持清晰和簡(jiǎn)單的設(shè)計(jì),突出的內(nèi)容用戶(hù)的注意力,并標(biāo)明用戶(hù)下一步如何去做。

4、要有對(duì)比度

對(duì)比度是構(gòu)建視覺(jué)層次最重要的手段之一，也是讓視覺(jué)元素吸引用戶(hù)的好方式。在網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)比度不僅僅是通過(guò)色彩來(lái)呈現(xiàn)的，尺寸控制、形狀設(shè)計(jì)、位置調(diào)整也都能表現(xiàn)出對(duì)比度。

最簡(jiǎn)單也是最生動(dòng)的案例，就是下面的這個(gè)網(wǎng)站。設(shè)計(jì)師在網(wǎng)站的一致性上做的頗為不錯(cuò)，但是相對(duì)復(fù)雜的背景和文字內(nèi)容、按鈕等前景元素之間的對(duì)比不明顯。

相比之下，這個(gè)網(wǎng)站也采用了深淺色(黑白)的對(duì)比來(lái)進(jìn)行設(shè)計(jì)，但是結(jié)果卻截然不同。另外，充滿(mǎn)創(chuàng)意的滾動(dòng)效果也引入了頗為不錯(cuò)的視覺(jué)效果，很酷吧?

5、忽視表單樣式

表單設(shè)計(jì)其實(shí)是用戶(hù)體驗(yàn)設(shè)計(jì)的基本組成部分之一。每個(gè)網(wǎng)站都有不同的設(shè)計(jì)目標(biāo)，不論是銷(xiāo)售產(chǎn)品、呈現(xiàn)信息還是提供溝通平臺(tái)，然而許多設(shè)計(jì)漂亮的網(wǎng)站總會(huì)給你一個(gè)令人感到無(wú)聊到死的復(fù)雜表單，除了那些極其想加入會(huì)員或者想?yún)⑴c問(wèn)卷調(diào)查的那些訪客，許多用戶(hù)(比如我)會(huì)直接關(guān)閉頁(yè)面，離開(kāi)網(wǎng)站。

有了JCF這樣的跨瀏覽器解決方案之后，你就可以同丑陋的默認(rèn)表單樣式說(shuō)再見(jiàn)了，你可以設(shè)計(jì)更優(yōu)秀更人性化的表單那設(shè)計(jì)，來(lái)提升交互效率和用戶(hù)體驗(yàn)。

另外一個(gè)惱人的情況是，表單要求太多，想法不成熟，或者并未經(jīng)過(guò)良好的測(cè)試。比如sketchybusiness.io 這個(gè)網(wǎng)站中，表單突出了所有的空白字段，即使有些是不需要填寫(xiě)的。

反觀mostlyserious.io的表單設(shè)計(jì)，你會(huì)喜歡表單中的鼠標(biāo)懸停提示。另外，其中“Don’t be shy”的提醒為整個(gè)表單增添了人性化的元素。

網(wǎng)站并不是做好了就夠了，你還需要多加測(cè)試!有許多問(wèn)題并不是意料之中的。用戶(hù)會(huì)在哪里碰到問(wèn)題?導(dǎo)航中的設(shè)定是否符合用戶(hù)的意識(shí)?視差效果和內(nèi)置 的視頻是否能夠流暢加載?讓用戶(hù)參與測(cè)試大的好處是你真的開(kāi)始擁有用戶(hù)的視角，而非你自己的腦補(bǔ)，了解實(shí)際的需求，才能有所改進(jìn)。不要試圖限制你的創(chuàng)造 力，但是也不要忘記基本的原則，這樣才能在不為用戶(hù)帶來(lái)困惑和沮喪的同時(shí)，給予他們驚喜。既然誤區(qū)已經(jīng)闡述，來(lái)看看，交互設(shè)計(jì)的基本功。

交互設(shè)計(jì)基本功

1、下拉輸入

代表應(yīng)用：Flickr、Opera Coast、any.do、Timi記賬

通過(guò)下拉動(dòng)作呼氣的輸入操作，如搜索、添加項(xiàng)目等，例如Flickr，opera coast都是通過(guò)下拉呼出搜索框，另一方面，有下拉列表添加項(xiàng)目，這類(lèi)的app有any.do、Timi記賬。下拉是一個(gè)很自然很方便，非常適合“在任何時(shí)間，快速輸入”的情況下，比如any.do作為GTD應(yīng)用，設(shè)計(jì)是以下拉說(shuō)很適合，因?yàn)榇蠖鄶?shù)時(shí)候，我們會(huì)在這樣的情況下，使用功能：走在路上，突然有了一個(gè)靈感，然后解鎖任何。寫(xiě)下思考。這樣的情況可以進(jìn)入最簡(jiǎn)單，最快的方式，而不是找到添加按鈕。

圖1 Opera Coast的下拉搜索

圖2 Flickr的下拉搜索

2、登錄驗(yàn)證帳號(hào)

代表應(yīng)用：印象筆記

通常的登錄和注冊(cè)是分開(kāi)設(shè)計(jì)的，而印象筆記將登錄和注冊(cè)整合，每一步驟都只有一個(gè)表單，注冊(cè)和登錄沒(méi)有任何沖突。這樣避免了”用戶(hù)已存在”然后又要重新填寫(xiě)表單的不良體驗(yàn)，在流程上有很大的優(yōu)化，如下圖4所示：

圖3 印象筆記

圖4 印象筆記的登錄流程優(yōu)化

3、未激活按鈕的設(shè)計(jì)

代表應(yīng)用：snapchat

交互設(shè)計(jì)中有個(gè)叫做”預(yù)設(shè)用途”的原則，效果是一個(gè)界面或控件，讓用戶(hù)很明白的，就知道如何使用它。當(dāng)我看到它很明顯，最基本的要求是至少能知道這種控制可以操作，和所謂的“活動(dòng)”按鈕包含“激活”和“無(wú)為”兩國(guó)目前在“按鈕無(wú)效”的狀態(tài)，這就需要設(shè)計(jì)兩種情況。一般來(lái)說(shuō)，有兩種方法來(lái)隱藏或顯示一個(gè)操作的視覺(jué)效果，如灰、Snapchat形式填充接口，例如，當(dāng)一個(gè)形式是不完全的，填寫(xiě)“繼續(xù)”按鈕一直處于灰色狀態(tài)，它告訴用戶(hù)按鈕未被激活。在這里閱讀，你可能會(huì)覺(jué)得很簡(jiǎn)單，但只要你仔細(xì)一看，你會(huì)發(fā)現(xiàn)有很多應(yīng)用程序沒(méi)有這樣的設(shè)計(jì)。

圖5 snapchat的表單

4、輸入框title或提示文本的解決方案

代表應(yīng)用：dubble

通常設(shè)計(jì)輸入框時(shí)，我們會(huì)使用Lable標(biāo)簽給每個(gè)輸入框一個(gè)title，比如”用戶(hù)名”、”密碼”，另外，還會(huì)在輸入框中使用灰色的提示文本，如圖6所示。但是，在手持設(shè)備中的應(yīng)用，這種設(shè)計(jì)可以產(chǎn)生兩個(gè)問(wèn)題，一是浪費(fèi)屏幕空間，我們知道，手機(jī)屏幕的空間是有價(jià)值的，并使標(biāo)簽標(biāo)簽標(biāo)題將大屏幕空間;二是提示文本將在用戶(hù)輸入，提示效果不能繼續(xù)任務(wù)的結(jié)束。因此，如何解決這兩個(gè)問(wèn)題，以下是圖7所示，將標(biāo)題輸入框，當(dāng)用戶(hù)輸入的邊界，或像一雙應(yīng)用注冊(cè)屏幕，移動(dòng)工具提示文本輸入框上面的鍵盤(pán)，如圖8所示。

圖6 通常情況下的輸入框設(shè)計(jì)

圖7 將title移至輸入框邊框

圖8 dubble的輸入框提示文本

5、懸浮聊天窗，滑動(dòng)關(guān)閉聊天窗口

代表應(yīng)用：Facebook

如圖9所示，F(xiàn)acebook將聊天窗口懸浮在界面的邊緣，可以任意拖動(dòng)，但在屏幕邊緣，自動(dòng)打開(kāi)其他背景半透明罩聊天時(shí)，層次感很強(qiáng)，按住聊天窗口的任意位置的幻燈片的右上角可以關(guān)閉聊天窗口，有是一個(gè)動(dòng)態(tài)的影響。淘寶手機(jī)客戶(hù)端的設(shè)計(jì)援助，為用戶(hù)動(dòng)態(tài)設(shè)計(jì)為主，且應(yīng)用非常適合私人聊天是互補(bǔ)的，比如微博、QQ空間等。稍微多說(shuō)一句，新浪微博之前一直想加強(qiáng)社交屬性，減弱媒體屬性的標(biāo)簽，但最終未果，我認(rèn)為新浪網(wǎng)非常重視移動(dòng)客戶(hù)端和早期的像臉譜網(wǎng)利用設(shè)計(jì)來(lái)加強(qiáng)社會(huì)屬性可能更有效。

圖9 facebook的懸浮聊天窗口

好了，這篇文章就到此為止了，找圖、截圖神馬的真心不容易啊。如果你也發(fā)現(xiàn)了其他有趣并且有價(jià)值的交互設(shè)計(jì)，我非常期盼你也與我分享。你我共同進(jìn)步，創(chuàng)新互聯(lián)!

網(wǎng)頁(yè)名稱(chēng)：交互設(shè)計(jì)頁(yè)面之設(shè)計(jì)事項(xiàng)
鏈接地址：http://www.bm7419.com/news22/168672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、企業(yè)建站、微信公眾號(hào)、Google、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)