交互設(shè)計(jì)從來都不是簡(jiǎn)單的事情。可靠的交互通常需要借助對(duì)用戶行為的深入分析，然后有針對(duì)性的精心策劃。可是隨著新的技術(shù)和新的交互模式的不斷涌現(xiàn)，事情就變得不是那么容易了。其實(shí)大家遭遇的困境都很相似，用戶已經(jīng)很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動(dòng)效所打動(dòng)，真正能讓他們露出微笑的是持久、令人愉悅的交互設(shè)計(jì)和用戶體驗(yàn)。如果你對(duì)于日常的設(shè)計(jì)中的常見的誤區(qū)有所了解，自然會(huì)有意識(shí)地繞過這些坑。
為了更好的設(shè)計(jì)，我們?yōu)槟愫?jiǎn)單總結(jié)了一下最常見的5種交互設(shè)計(jì)的誤區(qū)。
1、過度的創(chuàng)意
網(wǎng)頁設(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)生不利的影響。的確，許多用戶渴求新鮮的創(chuàng)意，但是在操作和交互上卻往往希望協(xié)調(diào)可控，所以他們更傾向于熟悉的交互。Etsy的創(chuàng)業(yè) 總監(jiān)Randy曾經(jīng)撰文探討過這個(gè)問題，文中直言“設(shè)計(jì)師們不要在此(交互設(shè)計(jì))自作聰明了!”在這篇文中，他詳細(xì)解釋了為什么你不應(yīng)該走極端去設(shè)計(jì)充滿大量創(chuàng)新交互的網(wǎng)頁。
以Lotorama的網(wǎng)站為例子，漂亮的頁面和柔和的音樂都非常的贊，但是用戶進(jìn)來之后會(huì)遲疑，想知道這個(gè)網(wǎng)站要如何操作。不要曲解我的意思，如果你是純粹處于炫技，那么這種華麗而充滿游戲性的網(wǎng)站絕對(duì)稱得上是創(chuàng)意無限，但是對(duì)于普通用戶而言，他們的直覺失去效果，茫然無措會(huì)成為網(wǎng)站瀏覽的障礙。
下面是另外一個(gè)案例，這個(gè)名為Safety on the Slopes 的項(xiàng)目是為了說明冬季運(yùn)動(dòng)的危險(xiǎn)的，整個(gè)網(wǎng)站的設(shè)計(jì)整潔，交互也直觀。網(wǎng)站設(shè)計(jì)也有所創(chuàng)新，但是同時(shí)是以用戶交互直覺為先決條件，以身臨其境為目標(biāo)。
2、令人迷惑的交互
“不要自作聰明”的規(guī)則也應(yīng)當(dāng)應(yīng)用在導(dǎo)航設(shè)計(jì)上。一些設(shè)計(jì)師試圖運(yùn)用別具一格不同尋常的名稱，以活動(dòng)更富有實(shí)驗(yàn)性的導(dǎo)航。比如這個(gè)Chijoff網(wǎng)站， 就讓前來應(yīng)聘的用戶充滿困惑。如果你是網(wǎng)站的訪客，需要來回折騰一陣子，才能搞清楚這個(gè)名為“Co-Create”的頁面實(shí)際上也就是常見的 “Services”頁面。最糾結(jié)的是，即便是你將整個(gè)頁面都看完之后，仍然高不清楚要怎么辦，因?yàn)檫@個(gè)頁面的底部僅僅只有一個(gè)表單，展示行業(yè)新聞，并且 僅僅提供一個(gè)注冊(cè)入口!至于聯(lián)系頁面就更簡(jiǎn)單了，僅僅提供了一個(gè)郵政編碼和一個(gè)郵件地址。總而言之，他們用各種手段讓用戶無法直接快速有效的聯(lián)系上他們。
在看看這個(gè)案例。你猜猜看，Maison Margiela 的頁面上的“Universe”這個(gè)分類是干啥的?這個(gè)炫酷的鏈接，實(shí)際上是鏈接到他們的Facebook頁面的……
反例當(dāng)然也有，看看legworkstrdio的網(wǎng)站吧，他們的創(chuàng)意非常不錯(cuò)，導(dǎo)航清晰明確，用戶也不會(huì)在導(dǎo)航中迷失。
3、雜亂無章
曾經(jīng)有過一個(gè)階段，設(shè)計(jì)師試圖將所有的內(nèi)容全都塞到一個(gè)頁面當(dāng)中去。雖然這個(gè)時(shí)代已經(jīng)過去了，但是很多網(wǎng)站依然在犯這個(gè)錯(cuò)誤，甚至在我們自己設(shè)計(jì)的時(shí)候，有時(shí)候也會(huì)身不由己地想這么做。看看這個(gè)在線商店的設(shè)計(jì)吧：
設(shè)計(jì)師試圖使用簡(jiǎn)單的配色方案，但問題是頁面中大大小小的框、復(fù)雜多變的字體破壞了整體的風(fēng)格，用戶也在大量繁復(fù)的信息中懵逼。搜索框中“那么你今天想得到什么呢?”文案還是挺時(shí)尚的，但是頁面風(fēng)格卻完全是過時(shí)的設(shè)計(jì)。
反觀EBay的設(shè)計(jì)，在設(shè)計(jì)上則更為克制，保持清爽而簡(jiǎn)單的設(shè)計(jì)，凸顯用戶關(guān)注的內(nèi)容，并且明確地提示用戶下一步該怎么做。
4、要有對(duì)比度
對(duì)比度是構(gòu)建視覺層次最重要的手段之一，也是讓視覺元素吸引用戶的絕佳方式。在網(wǎng)頁設(shè)計(jì)中，對(duì)比度不僅僅是通過色彩來呈現(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ì)比來進(jìn)行設(shè)計(jì)，但是結(jié)果卻截然不同。另外，充滿創(chuàng)意的滾動(dòng)效果也引入了頗為不錯(cuò)的視覺效果，很酷吧?
5、忽視表單樣式
表單設(shè)計(jì)其實(shí)是用戶體驗(yàn)設(shè)計(jì)的基本組成部分之一。每個(gè)網(wǎng)站都有不同的設(shè)計(jì)目標(biāo)，不論是銷售產(chǎn)品、呈現(xiàn)信息還是提供溝通平臺(tái)，然而許多設(shè)計(jì)漂亮的網(wǎng)站總會(huì)給你一個(gè)令人感到無聊到死的復(fù)雜表單，除了那些極其想加入會(huì)員或者想?yún)⑴c問卷調(diào)查的那些訪客，許多用戶(比如我)會(huì)直接關(guān)閉頁面，離開網(wǎng)站。
有了JCF這樣的跨瀏覽器解決方案之后，你就可以同丑陋的默認(rèn)表單樣式說再見了，你可以設(shè)計(jì)更優(yōu)秀更人性化的表單那設(shè)計(jì)，來提升交互效率和用戶體驗(yàn)。
另外一個(gè)惱人的情況是，表單要求太多，想法不成熟，或者并未經(jīng)過良好的測(cè)試。比如sketchybusiness.io 這個(gè)網(wǎng)站中，表單突出了所有的空白字段，即使有些是不需要填寫的。
反觀mostlyserious.io的表單設(shè)計(jì)，你會(huì)喜歡表單中的鼠標(biāo)懸停提示。另外，其中“Don’t be shy”的提醒為整個(gè)表單增添了人性化的元素。

隨著生活節(jié)奏加快，人的需求也相應(yīng)增高，互聯(lián)網(wǎng)行業(yè)也不例外，各企業(yè)主對(duì)網(wǎng)站建設(shè)的要求也增高，很多企業(yè)都選擇了響應(yīng)式網(wǎng)站設(shè)計(jì)。然而很多對(duì)于seo來說，響應(yīng)式網(wǎng)站優(yōu)化與單獨(dú)pc與移動(dòng)站優(yōu)化一直存在爭(zhēng)議，也有很多新手seo分不清楚到底哪個(gè)類型對(duì)網(wǎng)站優(yōu)化更友好。那么響應(yīng)式網(wǎng)站優(yōu)化有什么優(yōu)缺點(diǎn)呢？

響應(yīng)式網(wǎng)站優(yōu)化優(yōu)點(diǎn)

①節(jié)約建站成本

很多人覺得制作響應(yīng)式網(wǎng)站工期很長，會(huì)增加成本，其實(shí)是錯(cuò)誤的。響應(yīng)式網(wǎng)站只需要設(shè)計(jì)一套pc端的設(shè)計(jì)圖，就可以了，至于移動(dòng)端與平板電腦上面的展現(xiàn)前端人員調(diào)css樣式就可以了。而分開做單獨(dú)的移動(dòng)端，那么需要出兩套設(shè)計(jì)圖，這增加了網(wǎng)頁設(shè)計(jì)的成本。一般企業(yè)網(wǎng)站而言工時(shí)主要還是用在了網(wǎng)頁設(shè)計(jì)上面，建站過程中雖然響應(yīng)式設(shè)計(jì)匯增加一部分前端人員切圖時(shí)間，但是這個(gè)時(shí)間增加的相對(duì)設(shè)計(jì)來說還是比較少的。

②URL永遠(yuǎn)同步一致

響應(yīng)式網(wǎng)站設(shè)計(jì)在適配到移動(dòng)端的時(shí)候，雖然調(diào)節(jié)了網(wǎng)頁布局，但是其URL不會(huì)發(fā)生變化，這對(duì)于SEO來說是非常大的優(yōu)勢(shì)。移動(dòng)端在百度熊掌號(hào)沒有推出之前，實(shí)際上是沒有單獨(dú)針對(duì)移動(dòng)端排名的算法的，甚至收錄也是。當(dāng)pc網(wǎng)站收錄/有排名了以后，移動(dòng)端的收錄與排名是根據(jù)適配規(guī)則繼承pc端網(wǎng)站而來的，只不過在繼承地過程中，搜索引擎會(huì)根據(jù)移動(dòng)端瀏覽體驗(yàn)再進(jìn)行微調(diào)。

③內(nèi)容一致，形象更統(tǒng)一，用戶體驗(yàn)良好。

大家都知道，響應(yīng)式網(wǎng)站適配到移動(dòng)端的時(shí)候是調(diào)節(jié)了css樣式，整體內(nèi)容與pc端基本上是保持一致的，比如顏色，每個(gè)頁面板塊內(nèi)容等。這對(duì)于老訪客而言，用戶體驗(yàn)更好，不管是在pc端還是在移動(dòng)端它們的操作瀏覽體驗(yàn)都是一致的。而用戶體驗(yàn)又是SEO中非常重要的一塊，占據(jù)著絕對(duì)地位。

響應(yīng)式網(wǎng)站優(yōu)化缺點(diǎn)

①加載速度相對(duì)于單獨(dú)移動(dòng)站較慢

響應(yīng)式網(wǎng)站因兼容多個(gè)屏幕尺寸，所以需要寫多套css樣式，適配到不同分辨率上面需要加載調(diào)整css樣式與圖片彈性伸縮來適應(yīng)于瀏覽者當(dāng)前屏幕，這就導(dǎo)致加載時(shí)間較長，另外很多網(wǎng)站中的圖片因?yàn)楣藐P(guān)系本身PC上面的尺寸就比較大，導(dǎo)致在手機(jī)上去看還是同樣大的尺寸，也是導(dǎo)致網(wǎng)站加載過慢的一個(gè)因素，對(duì)于網(wǎng)站優(yōu)化而言，網(wǎng)頁加載速度又很重要，尤其移動(dòng)端優(yōu)化需要在1.5s內(nèi)完成。相對(duì)于單獨(dú)的移動(dòng)端網(wǎng)站，響應(yīng)式網(wǎng)站加載速度要弱一點(diǎn)。

②選詞布局的尷尬

PC端搜索所展現(xiàn)的網(wǎng)頁標(biāo)題在32個(gè)漢字，而移動(dòng)端需要控制在20個(gè)字以內(nèi)，然而響應(yīng)式網(wǎng)站需要移動(dòng)端與pc端保持一致，因?yàn)閡rl未發(fā)生變化，不能定義兩個(gè)不同的網(wǎng)頁標(biāo)題。想pc端與移動(dòng)端都完全展現(xiàn)寫不一樣的標(biāo)題只能單獨(dú)地移動(dòng)站來實(shí)現(xiàn)。同理，想設(shè)置不同的描述與關(guān)鍵詞也是需要單獨(dú)移動(dòng)端來展現(xiàn)。這里可能有些同行會(huì)說pc端與移動(dòng)端做一樣的詞，十二君想說的是用戶用pc與移動(dòng)的搜索習(xí)慣是不同的，比如有些詞是pc端搜索量較高，有些詞又是移動(dòng)端搜索量較高，如果做的關(guān)鍵詞較多，pc端與移動(dòng)端的關(guān)鍵詞差別又比較大，那么只能放棄一部分關(guān)鍵詞，畢竟一個(gè)網(wǎng)站承載地關(guān)鍵詞是有限，只能取下折中的辦法。若是用單獨(dú)移動(dòng)站與單獨(dú)pc站來做詞，那么可以讓流量最大化，這是響應(yīng)式網(wǎng)站優(yōu)化無法取代的優(yōu)勢(shì)。

③個(gè)別行業(yè)感官體驗(yàn)不友好

大家都知道響應(yīng)式網(wǎng)站適配到移動(dòng)端主要是繼承pc端的樣式與內(nèi)容，針對(duì)一些特別行業(yè)，移動(dòng)端用戶的瀏覽習(xí)慣于pc端是相差巨大的，比如電商平臺(tái)pc端內(nèi)容會(huì)很豐滿，但是適配到移動(dòng)端，會(huì)導(dǎo)致頁面極長。若是想針對(duì)兩個(gè)端口根據(jù)用戶瀏覽習(xí)慣做風(fēng)格差異化較大的UI界面，這對(duì)于響應(yīng)式網(wǎng)站來說無疑是非常痛苦的，這個(gè)時(shí)候一般就選擇單獨(dú)移動(dòng)端設(shè)計(jì)了。

網(wǎng)站關(guān)鍵詞：網(wǎng)站建設(shè)  網(wǎng)站設(shè)計(jì)  網(wǎng)站制作  上海網(wǎng)站建設(shè)  上海網(wǎng)站設(shè)計(jì)  上海網(wǎng)站制作  上海網(wǎng)絡(luò)公司  網(wǎng)站建設(shè)上海  上海做網(wǎng)站  上海建設(shè)網(wǎng)站  上海做網(wǎng)站公司  上海建網(wǎng)站公司  上海高端網(wǎng)站建設(shè)  上海手機(jī)網(wǎng)站建設(shè)  怎么建設(shè)網(wǎng)站  如何建設(shè)網(wǎng)站  營銷網(wǎng)站建設(shè)  品牌網(wǎng)站建設(shè)  網(wǎng)站建設(shè)方案  響應(yīng)式網(wǎng)站建設(shè)  外貿(mào)網(wǎng)站建設(shè)  公司網(wǎng)站建設(shè)  建設(shè)網(wǎng)站  網(wǎng)站建設(shè)服務(wù)  高端網(wǎng)站建設(shè)  網(wǎng)站優(yōu)化服務(wù)  上海網(wǎng)站公司  企業(yè)網(wǎng)站設(shè)計(jì)  官網(wǎng)制作  官網(wǎng)建設(shè)  官網(wǎng)設(shè)計(jì)  網(wǎng)站建設(shè)公司  網(wǎng)站設(shè)計(jì)公司  網(wǎng)站制作公司