08.23 設計師必須掌握的交互知識

交互設計是什麼?

交互設計 Interaction Design 也被成為IXD。交互設計建立起了人與計算機便捷溝通的通道,它的目標是創造可用性和用戶體驗俱佳的產品。作為UI設計師,我們在工作之中經常會對接交互設計師和產品經理,他們具有豐富的交互知識和經驗。那是不是我們作為UI設計師,就只需要專心做好視覺層面的工作而不需要了解交互設計了呢?當然不是,在視覺設計層面更多地考慮佈局和交互原則才可以讓我們的界面更友好,視覺設計師是交互設計中非常重要的角色。

用戶體驗

在工作中經常聽到UED(用戶體驗設計)和UCD(以用戶為中心的設計),可見互聯網行業非常重視用戶體驗,而用戶體驗絕不僅僅是要樣子好看。有些設計師只關注視覺層面,認為產品戰略等用戶體驗維度和自己的設計無關,那麼就會和產品經理等角色處於不同的世界了。“他們為什麼要我這麼改?”、“為什麼這裡文字要淺一點?”有時不理解對方的思考角度就會造成爭執。用戶體驗(User Experience)是用戶使用產品的心理和感受,用戶體驗體現了產品設計以人為本的設計精神。其實早在互聯網出現之前就有“顧客先點雞就先有雞”、“顧客就是上帝”這種說法,並且西方很多大公司如施樂、聯合利華等大公司早在互聯網行業出現之前就已經開始進行研究用戶體驗了,可見用戶體驗對所有產品是多麼的重要。但是讓人摸不著頭腦的是,用戶體驗有時非常地主觀:因為用戶體驗背後影響用戶的因素有人的喜好、情感、印象、心理反應等,有些人明明有摩拜卻要走很遠找OFO,也有人只吃肯德基而不吃麥當勞。這些選擇並不是優勝劣汰,而是有背後的原因的。要想讓我們的產品被人喜歡,我們需要研究用戶。

設計師必須掌握的交互知識

用戶研究七種方法

但用戶可能是幾百萬人呢!我們面對這樣抽象的群體然後告訴自己要以他們為中心設計這多麼抽象啊。這麼多用戶甚至有時用戶自己的聲音也是矛盾的。我們到底怎麼樣瞭解用戶的心聲呢?

用戶畫像

根據產品的調性和用戶群體,用戶研究團隊可以設計出一個用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特徵的標籤組成的,通過這個標籤我們可以更好地理解誰在使用我們的產品。用戶畫像建立後,每個功能可以完成自己的用戶故事:用戶在什麼場景下需要這個功能。這樣,我們所設計的功能就會更接近用戶實際的需要。比如我們現在要設計一個女裝購物應用,那麼我們可以做這個用戶畫像:小美,在北京國貿CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物。使用我們產品的目的是為了尋找正品時尚大牌服裝進行網購。小美因為剛畢業所以一方面喜歡大牌一方面又資金短缺(啟發:我們的產品是不是要解決這兩個痛點?)小美是時尚OL,審美很高,不喜歡俗氣的設計。(啟發:界面設計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。看,即使小美並不真實存在,但是她指引了我們的產品設計。接下來,我們還可以給小美增加一個頭像,在做設計時我們想象這個人就是真實存在的用戶,她會對我們的設計有什麼看法。當我們完成用戶畫像之後,還可以接著設計用戶故事:小美經常需要在工作場合穿符合工作氣質的衣服,也需要在約會時有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對價格過高的服裝無法承擔,她使用我們的APP就是為了尋找正品且價格適中的服裝。那麼,小美在哪裡用我們的APP呢?這就要為小美繼續設計一個用戶使用場景了:小美在開會時可能會打開看看、在地鐵裡也會瀏覽、在清晨打開衣櫃時也會瀏覽。基本來說是碎片時間,而且是有著裝需求時。(啟發:我們是不是需要把字號調大以適應地鐵裡顛簸的閱讀環境?我們是不是需要設計省流量模式免得剛剛畢業的小美花一筆巨大的流量資費?)

設計師必須掌握的交互知識

用戶畫像

用戶訪談

邀約用戶來回答產品的相關問題,並記錄作出後續分析。用戶訪談有三種形式:結構式訪談(根據之前寫好的問題結構)、半結構式訪談(一半根據問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動權來探討)。用戶訪談設置時要注意:用戶不可以是互聯網從業的專業人員、不可以提出誘導性問題、不要使用專業術語。用戶訪談適合產品開發的全部過程。

問卷調查

可分為紙質調查問卷、網絡問卷調查。依據產品列出需要了解的問題,製成文檔讓用戶回答。問卷調查是一種成本比較低的用戶調查方法。問卷調查適合產品策劃初期對目標人群的投放,另外注意一個問題最好收集10個問卷,也就是如果你有10個問題那麼至少要收集100個問卷才是有效的。要知道不是所有人都願意耐心地填寫問卷,很可能敷衍了事的回答會擾亂我們的判斷。

焦點小組

焦點小組一般有6-12人組成,由一名專業人士主持,依照訪談提綱引導小組成員各抒己見,並記錄分析。並且在焦點小組的房間裡會有一扇單向玻璃窗,用戶是看不到裡面有誰的。而在裡面坐著的通常是開發團隊,他們可以清晰地看到用戶是如何吐槽他們的產品的,但是他們沒有權利直接和用戶進行解釋。焦點小組需要特殊的房間和設備,主持人也需要訓練有素,焦點小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產品和對產品的不滿。

可用性測試

通過篩選讓不同用戶群來對產品進行操作,同時觀察人員在旁邊觀察並記錄,可用性測試的要求是用戶不可以是互聯網從業者而應該是真實產品的用戶群體。但是可用性測試一般要有一個可用的軟件版本或者原型供人測試才可以,在軟件開發的前期不適合用這個方法。

眼動測試

使用特殊的設備眼動儀來追蹤用戶使用產品時眼睛聚焦在哪裡,盲區是哪裡。比如一個網站通過眼動測試可以知道用戶的視覺會自動屏蔽網站的常見廣告位置,這時如果希望提高廣告的點擊,就需要把廣告位放置於用戶聚焦時間較長的位置。眼動測試的設備比較專業,通常在小公司較難開展。

用戶反饋和大數據分析

根據市場提供的反饋和數據得出客觀的判斷和合理的推測。用戶反饋也是用戶研究的一個重點,用戶反饋主要是用戶通過產品的反饋入口主動向開發者提出的意見。

有了這些方法,我們就能更好地瞭解用戶和接近用戶了。但是要注意,用戶研究也是有陷阱的。比如:填寫問卷和參與調研的用戶可能並不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個必要的手段,但是仍然需要產品團隊來對產品的方向做出決斷。

用戶如何使用產品

使用場景

剛才我們介紹了用戶使用的場景是根據產品的功能和平臺決定的。電腦的使用場景是正襟危坐,手持鼠標。而移動端則是隨時隨地使用,我們的用戶可能在地鐵裡、在廁所裡、在吃飯時、在上課中怕老師看到把手機藏在桌洞裡、在工作中領導巡視後偷偷瞄、在輾轉反側睡不著的時候沒有開燈地瀏覽等。這時我們要為用戶考慮,如果他們在使用我們產品的各種場景中有什麼需要,是不是需要省流量、是不是需要調整字號、是不是需要過濾藍光、是不是需要護眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時需要個手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。一個不考慮用戶使用場景的產品一定是會遭到吐槽的。很久之前我聽同事在吃飯時抱怨過“大爺的,也不搞個提示,早晨在地鐵裡用4G看流量以為是在家用WIFI,結果看了一集《甄嬛傳》花了80塊錢”、“哎?你是不是早晨開會時玩遊戲了?你的比分都給我們推送了哈哈哈”。

設計師必須掌握的交互知識

我的產品中的用戶使用場景表格

操作手勢

網頁設計所處的電腦端目前主要還是依靠鼠標點擊來操作。鼠標點擊的最小單位甚至可以是一像素。而移動端不太一樣,移動端設備中我們使用手指來操作界面。一般來說,手指點觸區域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm。也就是在我們@2x設計中為88px(或44pt)。這個神奇地88PX在移動端應用很廣泛:很多表單單項的高度是88px、導航欄高度也是88px等等。那您可能會說,也不對吧,有些界面上的圖標看上去沒有88px啊。是的,但是那只是視覺,我們可以通過增加圖標點擊區域的方式(比如給60像素大小的圖標左右增加22像素的透明區域)來讓圖標更好點擊。千萬在設計時不要把操作區域放得特別近,可以把所有點擊區域用88px標記看是否有重疊的情況,避免點擊一個圖標時誤點另一個圖標。除了點擊區域,移動端還可以利用各種手勢來進行各種操作的設計。主要的手勢有:

設計師必須掌握的交互知識

單點觸碰(Tap):點擊用來選擇一個元素,類似鼠標的左鍵,是最常用的手勢。

拖曳(Drag):點擊某個元素然後拖拽進行移動,類似現實生活中移動物體的感覺。

快速拖曳(Flick)速度很快的拖曳操作。

滑動(Swipe):水平或垂直方向的滑動,比如翻閱相冊和電子書翻閱的手勢。

雙擊(Double-Click):快速點擊一個物體,通常會在放大、縮小操作中使用。

捏(Pinch):兩根手指頭向內捏,捏的動作會使物體變得更小,通常在縮小操作中使用。網易新聞客戶端中正文頁面即可通過捏的動作來縮小字號。

伸展(Stretch):兩根手指向外推,現實中這種操作會使物體向外拉伸,元素可能會變得更大,通常會在放大操作中使用。網易新聞客戶端中正文頁面可以通過伸展放大字號。

長按(Touch and hold):手指點擊並按住會激發另一個操作。比如朋友圈的相機圖標長按可只發文字。但是注意,長按不是一個常態操作,所以一般不太建議用戶進行該操作。但長按操作又是有需要的,所以會把刪除、只發文字狀態等操作隱藏其中。

除了用戶使用場景、點擊區域、手勢,那麼還有一個影響我們設計的使用情況,就是用戶怎麼拿手機很重要。用戶可以:單手拿手機、雙手拿手機、直向拿手機、橫向拿手機。我們需要考慮這些可能發生的特徵進行手勢互動的規劃與設計。比如OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方並且做的很大,左右手都可以輕鬆點擊。而微信的很多按鈕也都是大長條,方便左右手的觸發。橫屏使用場景一般是遊戲、視頻等,所以一般的APP並不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作),

設計師必須掌握的交互知識

格式塔:我們如何認知?

我們發現有些用戶在使用設計好的界面時找不到一些重要的功能按鈕。“奇怪,分享功能不就在更多按鈕裡面嗎?”、“用戶怎麼連這個也找不到啊”你也許會說。我們要來了解一下用戶是如何認知我們設計好的界面的。在初高中考試的時候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。格式塔心理學認為,我們在觀察的時候會自動腦補出一些邏輯和含義來,會讓觀察對象變成一個完整的、整體的、常見的形狀。

"研表究明,漢字的序順並不定一能影閱響讀,比如當你完看這句話後之,才發這現裡的字全是都亂的。"研究格式塔心理學對我們做互聯網產品和設計有什麼用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據固定位置找到提交按鈕、我們也可以讓用戶不經過太多思考在殺毒軟件中點擊殺毒按鈕等。格式塔心理學對於我們做好表現層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個知識點。

接近律 law of proximity

格式塔心理學認為,人們認知事物的時候,會依靠它們的距離來判斷它們之間的關係。兩個元素越近就說明它們之間關係更強。但是接近也是有對比的,在複雜的設計中,我們要一邊考慮它們之間內部的邏輯關係一邊來排版。

設計師必須掌握的交互知識

A組和B組因為接近律而產生不同地閱讀順序

設計師必須掌握的交互知識

距離更近的信息暗示了他們有內在的邏輯關係

相似律law of similarity

認知事物時,刺激要素(比如大小、色彩、形狀等要素)相似的元素我們傾向於把它們聯合在一起或者認為它們是一個種類。比如,我們能輕易的分辨出撥號頁面中撥號鍵和按鍵群的區別。

設計師必須掌握的交互知識

相似的元素暗示了他們屬於一個種類

設計師必須掌握的交互知識

類似外形的單元會被我們人腦默認為同一屬類

閉合律law of closure

就算沒有外形的約束,我們也會自動把圖形腦補完全。比如半個形狀或者有缺口的形狀我們不會認為是一條線,而是一個完整的形狀。閉合是指一種完形的認知規律。

設計師必須掌握的交互知識

左邊的圖中我們會認為是圓形有缺口而不是一條曲線

右邊的圖形中我們會認為是圓形被三條線截斷了而不是四個圖形

設計師必須掌握的交互知識

界面設計中露出一半內容,閉合律讓我們感知右邊還隱藏著更多內容

連續律law of continuity

在知覺過程中人們往往傾向於使知覺對象的直線繼續成為直線,使曲線繼續成為曲線,也就是視覺的慣性。利用連續律我們可以讓用戶操作界面時不經過思考就點擊一個固定的位置。

設計師必須掌握的交互知識

深諳連續律的流氓軟件

成員特性律law of membership character

如果我們有很多同樣的按鈕,如何讓某個更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?那就要用到成員特性律了。成員特性律賦予了集體中某一個元素特殊的一些刺激元素從而突出它。

設計師必須掌握的交互知識

獨特的外形暗示了它與別的元素有不同的功能

設計師必須掌握的交互知識

撥號頁面中撥號鍵與微博發佈微博圖標都與其他按鈕不同

記憶律:我們如何記憶?

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學家沃爾夫對遺忘問題所作的經典性研究得出了格式塔的三大記憶律。沃爾夫實驗時要求實驗體觀看樣本圖形並記住它們,然後在不同的時間裡根據記憶把它們畫出來。結果發現實驗體在不同的間隔時間畫出來的圖像都有不同。有時再現的圖畫比原來的圖畫更簡單更有規則,有時原來圖畫中顯著的細節在再現時被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規律稱之為格式塔三大記憶律:“水平化”、“尖銳化”、“常態化”。

設計師必須掌握的交互知識

哪個圖形才是正確的?(圖片來源:網絡)

水平化leveling

水平化是指在記憶中我們趨向於減少知覺圖形小的不規則部分使其對稱;或趨向於減少知覺圖形中的具體細節。

尖銳化sharpening

尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中,人們往往強調知覺圖形的某些特徵而忽視其它具體細節的過程。在有些心理學家看來,人類記憶的特徵之一,就是客體中最明顯的特徵在再現過程中往往被誇大了。

常態化normalizing

常態化是指人們在記憶中,往往根據自己已有的記憶痕跡對知覺圖形加以修改,即一般會趨向於按照自己認為它似乎應該是什麼樣子來加以修改的。

設計師必須掌握的交互知識

情感化設計是什麼?

瞭解格式塔會讓我們把界面做得符合用戶的心理預期,讓用戶能夠明顯地找到他應該找到的操作。可是用戶好像還是不開心,因為用戶覺得界面不好看。您是不是也會陷入這樣的矛盾:可用性重要還是美感更重要?怎麼樣能夠讓我們設計的界面又好用還漂亮呢?情感化設計最先由唐納德·A·諾曼博士提出,指的是設計中情感在所處於的重要地位以及如何讓用戶把情感投射在產品上來解決可用性與美感的矛盾。情感化設計是在抓住用戶注意、誘發情緒反應以提高執行行為的可能性的設計。比如紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網絡不好時的焦慮等等。情感化設計有三個水平,它們是遞進關係,分別是:本能水平(重視設計外形)、行為水平設計(重視使用的樂趣和效率)、反思水平設計(重視自我形象、個人滿意、記憶)。

設計師必須掌握的交互知識

本能水平

我們都是視覺動物,對外形的觀察和理解是出於我們本能的。本能水平的設計就是刺激用戶的感官體驗,讓別人注意到我們的設計。這個階段的設計會更加關注外形的視覺效果。比如各大電商網站的專題頁面設計,更加註重抓眼球和外觀的刺激。

行為水平

行為水平是功能性產品需要注重的。一個產品是否達到了行為水平,要看它是否能有效地完成任務,是否是一種有樂趣的操作體驗。優秀行為水平設計的四個方面:功能,易懂性,可用性和物理感覺。比如好用的記事本APP等。

反思水平

反思水平的設計與用戶長期感受有關,這種水平的設計建立了品牌感和用戶的情感投射。反思水平設計是產品和用戶之間情感的紐帶,通過互動給用戶自我形象、滿意度、記憶等體驗,讓用戶形成對品牌的認知,培養對品牌的忠誠度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實現需求五個層次。我認為反思水平的設計就是提供給用戶歸屬感、尊重、自我實現。比如Google每逢節日就會有一些符合節日化的設計、網易嚴選的空狀態也會有品牌感的體現等。

設計師必須掌握的交互知識

淘寶空狀態中的情感化設計

情感化設計的表達

設計師必須掌握的交互知識

畫面 畫面是情感化設計的重點,讓錯誤頁面或者空狀態都成為一幅可愛的插畫。

應景 讓用戶在我們的產品中體驗到一些和真實世界一樣的氛圍變化。

遊戲感 沒有人喜歡做任務。試著讓用戶完成的任務變成遊戲吧。比如每次登陸加金幣,有足夠的金幣就可以獲得什麼稱號。

衝突 衝突非常能夠勾起人的情緒,營造一個競爭或者對抗的氛圍,讓用戶感覺自己置身在一個比賽或者格鬥中一樣。

講故事 給產品和無聊的圖像一些故事內容,畢竟沒有人討厭講故事。

隱喻 用一些大家理解,隨處可見的事物表達一些無趣、生澀的概念。

互動 給用戶和其他用戶多製造互動機會,比如排行榜、推薦等,不要讓用戶感覺孤獨。

交互八原則

當我們瞭解了產品五要素(產品設計的維度問題)、格式塔心理學(用戶如何認知的問題)、情感化設計(如何讓用戶滿意的問題)後,我還要給您介紹一大堆地交互原則。這些交互原則會幫助我們設計出更好用的界面,當然也可以幫助我們講出這樣設計的原因。不拿出一些理論怎麼能夠讓別人信服你的設計,對不對?

費茨定律(Fitts’Law)

費茨定律指的是:光標到達一個目標的時間,與當前光標所在的位置和目標位置的距離(D)和目標大小(S)有關。它的數學公式是:時間 T = a + b log2(D/S+1)。這個定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領域都得到了應用,特別是在互聯網設計中尤為深遠。我們利用費茨定律估算用戶移動光標到鏈接或者按鈕所需的時間,時間越短越高效。比如有一個按鈕在左下角,我們的操作可以細分為兩個階段:第一個階段大範圍移動到左下方向,然後再做微調到達這個按鈕之上。所以這個時間受按鈕和鏈接所在位置與按鈕和鏈接大小影響,也就是說我們在做設計時要考慮光標默認會放在哪裡、我們的鏈接按鈕是不是太小了。

設計師必須掌握的交互知識

費茨定律說明距離越短、目標大小越大,那麼光標到達目標越快

設計師必須掌握的交互知識

費茨定律在網頁設計中的使用

設計師必須掌握的交互知識

OFO和蘋果音樂APP都將按鈕放置手指最容易點擊的區域並且按鈕足夠大

希克定律(Hick’s Law)

希克定律是指一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。它的數學公式是:反應時間 T=a+b log2(n)。在我們的設計中如果給用戶的選擇更多,那麼用戶所需要做出決定的時間就越長。比如我們給出用戶菜單-子菜單-選項,那麼用戶可能會很糾結;如果我們簡化成菜單-選項,就會減少用戶做選擇的時間。

設計師必須掌握的交互知識

用戶反應時間和選擇數量的關係

設計師必須掌握的交互知識

我們應該減少用戶的選擇

7±2法則

讓我們先玩個遊戲,請記憶下面的文字,一分鐘後移開視線:

掙 多 久 可 貓 風 師 嫋 崩 六 酒 望

現在閉上眼睛想一下剛才的文字您能回憶幾個?大概是五個到九個之間。1956年美國科學家米勒對人類短時記憶能力進行了研究,他注意到年輕人的記憶廣度大約為5到9個單位之間,就是7±2法則。這個法則對我們做界面設計的啟迪就是如果希望用戶記住導航區域的內容或者一個路徑的順序,那麼數量應該控制在七個左右,比如蘋果和站酷網站的導航個數。另外,移動端底部Tab區域最多也是五個,而頁面中的八大金剛圖標也是八個。

設計師必須掌握的交互知識

蘋果、站酷、Dribbble等網站導航數量全部是7±2

泰思勒定律(Tesler’s Law)

這個定律是說產品固有的複雜性存在一個臨界點,超過了這個點過程就不能再簡化了。我們只能將這種複雜性轉移。比如我們如果發現頁面的功能是必須的,但當前的頁面信息過載,那麼就需要將次要的功能收起或者轉移。

設計師必須掌握的交互知識

Dribbble網站導航將更多功能收起在一個表示更多的圖標內

防錯原則

一個表單是需要填寫完畢後方可提交的。但是用戶有時會漏填或者忘記填寫,這時用戶點擊提交會怎麼樣?很可能有些選項會被清空(比如密碼選項基於安全考慮會清空cookies)那麼用戶還得重新填寫。這時解決辦法是在用戶沒填寫完之前把按鈕設置一個看起來不能點擊的樣式,用戶想提交時彈窗:您還有內容沒有填寫完哦,然後把用戶定位在沒填寫完的項目,讓那個表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個字,但用戶一寫爽了往往會超出140個字那怎麼辦?解決辦法是給他在旁邊倒數還能寫幾個字。看,這些都是我們為了防止用戶操作出現錯誤所做的努力,防錯設計就是要減少錯誤操作所帶來的災難。錯誤的提示當然需要設計師的設計了。可是也許您不知道有些錯誤提示含糊,用戶並不知道到底錯的是哪裡,下一步該怎麼辦。比如僅僅登錄功能就可能會有用戶名錯誤、密碼錯誤、網絡超時、連續三次輸入密碼錯誤、用戶名為空等不同的錯誤,而有些產品僅僅給出“出錯了”,那麼用戶當然會不知所措了。正向的例子比如一次我在登錄Google Mail時輸錯了密碼,它提示“密碼輸入錯誤,提示:您在1個月前改過密碼”。

設計師必須掌握的交互知識

BOO!APP輸入密碼時卡通會矇住眼睛,輸錯時也會有提示

奧卡姆的剃刀法則(Occam’s Razor)

奧卡姆的剃鬚刀法則主要就是說我們做產品時功能上不可以太繁瑣,應該保證簡潔和工具化。比如產品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點讚了?一定保證功能上的剋制。

設計師必須掌握的交互知識

QQ將更多功能收起到了頭像和加號圖標中

防呆原則

有一個著名的交互書籍叫作《Dont make me think》,翻譯過來就是不要讓我思考。這句話一直在我做設計時響起:不要認為用戶是專家!不要認為用戶是專家!有時我們會覺得,點擊漢堡包圖標當然就是菜單啊!這個按鈕長按不就會調出XX功能了嘛。但是我們忘記了普通用戶可能並不理解什麼是漢堡包圖標、什麼是抽屜式導航、什麼是長按、雙指滑動。更何況普通用戶並不會研究我們的APP,在他們眼中我們的產品只是眾多工具中的一個,我們何德何能認為自己的產品是值得用戶花時間學習的?一定要把交互和設計做得簡單,並且讓用戶在別的地方“學習”過。每個頁面強調一個重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設計要自然而然。

設計師必須掌握的交互知識

運動APP KEEP 的頁面中總有一個按鈕是突出的

防止不耐煩原則

用戶是很容易不耐煩的,你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息,一定要給一個有情感化的設計提示,避免用戶產生焦慮。 比如很多遊戲(比如決戰平安京、王者榮耀等)加載時都會出現主角跑步的小動畫,美團等APP下拉刷新時也會有幾幀的動畫來安慰用戶。動畫要好於蘋果默認提供給開發的“轉菊花”,因為卡通形象更有親和力。但是好像還不夠,用戶需要掌控感,“哎?它一直加載,是不是死機了?”為了防止用戶沒有掌控感,我們可以為用戶設計加載條或者加載提示。加載狀態條很遺憾很多都是假的甚至是重複的,原因是其實要精確判斷加載了多少M的素材的代碼更佔資源!我們本來想安慰用戶等待加載的時間竟然會變得更長,那當然不行啦。於是很多時候我們會做一個假的加載狀態條來安撫用戶,我想您一定看過反覆加載的加載條吧!加載條下的文案其實也是可以變得非常有情感化設計感受的,比如通常是:加載場景資源、加載素材這樣的文案,但是有些APP需要很長加載時間時會給出這樣的文案:導演正在準備、女主角準備化妝了、攝像師打開了燈光。是不是更加好玩啦?

設計師必須掌握的交互知識

美團和網易嚴選的加載動畫

總結

交互知識其實關鍵還要在應用和分析。一方面,我們可以在工作中積累經驗,不斷地思考如何和同事配合一起研究提高產品在使用時的體驗;另一方面,我們也要經常積累一些產品使用時發現的交互。建議大家平時可以收集你覺得不錯的情感化設計或者微交互,比如發現餓了麼在下雨天送貨時會有電閃雷鳴和雨滴的設計;OFO和滴滴打車在不同節日也會把地圖找車裡的圖標換成節日相關的圖標;BOO!APP在輸入密碼時小怪獸會捂住眼睛;WPS在晚上寫作時(沒錯就是現在)會提示你開啟過濾藍光的護眼模式等等。一個好的設計師一定是懂得交互的設計師,也應該是非常細心的設計師,也應該是懂得為用戶著想的設計師。


分享到:


相關文章: