首頁>關於我們>新聞中心>行業動態
全部資訊 亚游ag8觀點 行業動態 公司動態
全麵解析:設計師需要了解的交互知識(上)
2018-06-06    來自:人人都是產品經理    作者:Judy    分享:

一、交互設計是什麽?


交互設計 Interaction Design 也被成為IXD,交互設計建立起了人與計算機便捷溝通的通道,它的目標是創造可用性和用戶體驗俱佳的產品。

作為UI設計師,我們在工作之中經常會對接交互設計師和產品經理,他們具有豐富的交互知識和經驗。

那是不是我們作為UI設計師,就隻需要專心做好視覺層麵的工作而不需要了解交互設計了呢?

當然不是,在視覺設計層麵更多地考慮布局和交互原則才可以讓我們的界麵更友好,視覺設計師是交互設計中非常重要的角色。

用戶體驗

在工作中經常聽到UED(用戶體驗設計)和UCD(以用戶為中心的設計),可見互聯網行業非常重視用戶體驗,而用戶體驗絕不僅僅是要樣子好看。

有些設計師隻關注視覺層麵,認為產品戰略等用戶體驗維度和自己的設計無關,那麽就會和產品經理等角色處於不同的世界了。他們為什麽要我這麽改?為什麽這裏文字要淺一點?

有時不理解對方的思考角度就會造成爭執。

用戶體驗(User Experience)是用戶使用產品的心理和感受,用戶體驗體現了產品設計以人為本的設計精神。

其實早在互聯網出現之前就有“顧客先點雞就先有雞”、“顧客就是上帝”這種說法,並且西方很多大公司如施樂、聯合利華等大公司早在互聯網行業出現之前就已經開始進行研究用戶體驗了,可見用戶體驗對所有產品是多麽的重要。

但是讓人摸不著頭腦的是,用戶體驗有時非常地主觀:因為用戶體驗背後影響用戶的因素有人的喜好、情感、印象、心理反應等,有些人明明有摩拜卻要走很遠找OFO,也有人隻吃肯德基而不吃麥當勞。這些選擇並不是優勝劣汰,而是有背後的原因的。要想讓我們的產品被人喜歡,我們需要研究用戶。
二、用戶研究七種方法

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

1. 用戶畫像

根據產品的調性和用戶群體,用戶研究團隊可以設計出一個用戶的模型,這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標簽組成的,通過這個標簽我們可以更好地理解誰在使用我們的產品。

用戶畫像建立後,每個功能可以完成自己的用戶故事:用戶在什麽場景下需要這個功能。這樣,我們所設計的功能就會更接近用戶實際的需要。

比如:我們現在要設計一個女裝購物應用,那麽我們可以做這個用戶畫像:

小美,在北京國貿CBD上班,21歲,收入8000,喜歡淘寶購物和電視購物,使用我們產品的目的是為了尋找正品時尚大牌服裝進行網購。小美因為剛畢業所以一方麵喜歡大牌一方麵又資金短缺(啟發:我們的產品是不是要解決這兩個痛點?)

小美是時尚OL,審美很高,不喜歡俗氣的設計。(啟發:界麵設計是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色?)。

看,即使小美並不真實存在,但是她指引了我們的產品設計。接下來,我們還可以給小美增加一個頭像,在做設計時我們想象這個人就是真實存在的用戶,她會對我們的設計有什麽看法。

當我們完成用戶畫像之後,還可以接著設計用戶故事:

小美經常需要在工作場合穿符合工作氣質的衣服,也需要在約會時有晚禮服之類的服裝,可是小美的收入有限,她眼光較高但是對價格過高的服裝無法承擔,她使用我們的APP就是為了尋找正品且價格適中的服裝。

那麽,小美在哪裏用我們的APP呢?

這就要為小美繼續設計一個用戶使用場景了:小美在開會時可能會打開看看、在地鐵裏也會瀏覽、在清晨打開衣櫃時也會瀏覽。基本來說是碎片時間,而且是有著裝需求時。(啟發:我們是不是需要把字號調大以適應地鐵裏顛簸的閱讀環境?我們是不是需要設計省流量模式免得剛剛畢業的小美花一筆巨大的流量資費?)
用戶畫像

2. 用戶訪談

邀約用戶來回答產品的相關問題,並記錄作出後續分析。用戶訪談有三種形式:結構式訪談(根據之前寫好的問題結構)、半結構式訪談(一半根據問題一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有主動權來探討)。

用戶訪談設置時要注意:用戶不可以是互聯網從業的專業人員、不可以提出誘導性問題、不要使用專業術語。用戶訪談適合產品開發的全部過程。

3. 問卷調查

可分為紙質調查問卷、網絡問卷調查。依據產品列出需要了解的問題,製成文檔讓用戶回答。問卷調查是一種成本比較低的用戶調查方法,問卷調查適合產品策劃初期對目標人群的投放。

另外注意一個問題,最好收集10個問卷,也就是如果你有10個問題,那麽至少要收集100個問卷才是有效的。要知道不是所有人都願意耐心地填寫問卷,很可能敷衍了事的回答會擾亂我們的判斷。

4. 焦點小組

焦點小組一般有6-12人組成,由一名專業人士主持,依照訪談提綱引導小組成員各抒己見,並記錄分析。並且在焦點小組的房間裏會有一扇單向玻璃窗,用戶是看不到裏麵有誰的。

而在裏麵坐著的通常是開發團隊,他們可以清晰地看到用戶是如何吐槽他們的產品的,但是他們沒有權利直接和用戶進行解釋。

焦點小組需要特殊的房間和設備,主持人也需要訓練有素,焦點小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產品和對產品的不滿。

5. 可用性測試

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

6. 眼動測試

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

7. 用戶反饋和大數據分析

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

有了這些方法,我們就能更好地了解用戶和接近用戶了。但是要注意:用戶研究也是有陷阱的。

比如:填寫問卷和參與調研的用戶可能並不是核心用戶,提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個必要的手段,但是仍然需要產品團隊來對產品的方向做出決斷。

三、用戶如何使用產品

1. 使用場景

剛才我們介紹了用戶使用的場景是根據產品的功能和平台決定的,電腦的使用場景是正襟危坐,手持鼠標。而移動端則是隨時隨地使用,我們的用戶可能在地鐵裏、在廁所裏、在吃飯時、在上課中怕老師看到把手機藏在桌洞裏、在工作中領導巡視後偷偷瞄、在輾轉反側睡不著的時候沒有開燈地瀏覽等。

這時我們要為用戶考慮,如果他們在使用我們產品的各種場景中有什麽需要,是不是需要省流量、是不是需要調整字號、是不是需要過濾藍光、是不是需要護眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界麵目前單手不太友好、是不是掃二維碼時需要個手電功能、是不是需要語音提醒、是不是需要清除訪問記錄。

一個不考慮用戶使用場景的產品一定是會遭到吐槽的,很久之前我聽同事在吃飯時抱怨過:“大爺的,也不搞個提示,早晨在地鐵裏用4G看流量以為是在家用WIFI,結果看了一集《甄嬛傳》花了80塊錢”,“哎?你是不是早晨開會時玩遊戲了?你的比分都給我們推送了哈哈哈”。

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

四、操作手勢

網頁設計所處的電腦端目前主要還是依靠鼠標點擊來操作,鼠標點擊的最小單位甚至可以是一像素。而移動端不太一樣,移動端設備中我們使用手指來操作界麵。

一般來說,手指點觸區域最小尺寸為7×7 mm,拇指最小尺寸為9×9 mm,也就是在我們@2x設計中為88px(或44pt)。

這個神奇地88PX在移動端應用很廣泛:很多表單單項的高度是88ox、導航欄高度也是88px等等。

那您可能會說,也不對吧,有些界麵上的圖標看上去沒有88px啊。

是的,但是那隻是視覺,我們可以通過增加圖標點擊區域的方式(比如:給60像素大小的圖標左右增加22像素的透明區域)來讓圖標更好點擊。千萬在設計時不要把操作區域放得特別近,可以把所有點擊區域用88px標記看是否有重疊的情況,避免點擊一個圖標時誤點另一個圖標。

除了點擊區域,移動端還可以利用各種手勢來進行各種操作的設計。

主要的手勢有:
  • 單點觸碰(Tap):點擊用來選擇一個元素,類似鼠標的左鍵,是最常用的手勢。
  • 拖曳(Drag):點擊某個元素然後拖拽進行移動,類似現實生活中移動物體的感覺。
  • 快速拖曳(Flick)速度很快的拖曳操作。
  • 滑動(Swipe):水平或垂直方向的滑動,比如翻閱相冊和電子書翻閱的手勢。
  • 雙擊(Double-Click):快速點擊一個物體,通常會在放大、縮小操作中使用。
  • 捏(Pinch):兩根手指頭向內捏,捏的動作會使物體變得更小,通常在縮小操作中使用,網易新聞客戶端中正文頁麵即可通過捏的動作來縮小字號。
  • 伸展(Stretch):兩根手指向外推,現實中這種操作會使物體向外拉伸,元素可能會變得更大,通常會在放大操作中使用,網易新聞客戶端中正文頁麵可以通過伸展放大字號。
  • 長按(Touch and hold):手指點擊並按住會激發另一個操作,比如:朋友圈的相機圖標長按可隻發文字。但是注意,長按不是一個常態操作,所以一般不太建議用戶進行該操作。但長按操作又是有需要的,所以會把刪除、隻發文字狀態等操作隱藏其中。
除了用戶使用場景、點擊區域、手勢,那麽還有一個影響我們設計的使用情況——就是用戶怎麽拿手機很重要。

用戶可以:單手拿手機、雙手拿手機、直向拿手機、橫向拿手機,我們需要考慮這些可能發生的特征進行手勢互動的規劃與設計。

比如:OFO為了讓單手(說不定是左手還是右手)操作方便,主要按鈕在下方並且做的很大,左右手都可以輕鬆點擊。而微信的很多按鈕也都是大長條,方便左右手的觸發。橫屏使用場景一般是遊戲、視頻等,所以一般的APP並不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作)。

五、格式塔:我們如何認知?
我們發現:有些用戶在使用設計好的界麵時,找不到一些重要的功能按鈕。你也許會說:“奇怪,分享功能不就在更多按鈕裏麵嗎?”、“用戶怎麽連這個也找不到啊”。

我們要來了解一下用戶是如何認知我們設計好的界麵的,在初高中考試的時候您一定見過完形填空這種格式吧,“格式塔”源自德語“Gestalt”,意即“整體”、“完形”的意思。

格式塔心理學認為:

我們在觀察的時候會自動腦補出一些邏輯和含義來,會讓觀察對象變成一個完整的、整體的、常見的形狀。

研表究明:漢字的序順並不定一能影閱響讀,比如:當你完看這句話後之,才發這現裏的字全是都亂的。

研究格式塔心理學對我們做互聯網產品和設計有什麽用呢?

掌握格式塔的理論,我們就可以讓用戶按照我們安排的“劇本”來交互和操作界麵了。我們可以讓用戶比較容易地根據固定位置找到提交按鈕,我們也可以讓用戶不經過太多思考,在殺毒軟件中點擊殺毒按鈕等。

格式塔心理學對於我們做好表現層是非常有利的,格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個知識點。

1. 接近律 law of proximity

格式塔心理學認為:人們認知事物的時候,會依靠它們的距離來判斷它們之間的關係,兩個元素越近就說明它們之間關係更強。但是接近也是有對比的,在複雜的設計中,我們要一邊考慮它們之間內部的邏輯關係一邊來排版。
A組和B組因為接近律而產生不同地閱讀順序
距離更近的信息暗示了他們有內在的邏輯關係

2. 相似律law of similarity

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

相似的元素暗示了他們屬於一個種類
類似外形的單元會被我們人腦默認為同一屬類

3. 閉合律law of closure

就算沒有外形的約束,我們也會自動把圖形腦補完全。比如:半個形狀或者有缺口的形狀我們不會認為是一條線,而是一個完整的形狀。閉合是指一種完形的認知規律。
左邊的圖中我們會認為是圓形有缺口而不是一條曲線,右邊的圖形中我們會認為是圓形被三條線截斷了而不是四個圖形。
界麵設計中露出一半內容,閉合律讓我們感知右邊還隱藏著更多內容。

4. 連續律law of continuity

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

5. 成員特性律law of membership character

如果我們有很多同樣的按鈕,如何讓某個更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢?

那就要用到成員特性律了,成員特性律賦予了集體中某一個元素特殊的一些刺激元素從而突出它。

獨特的外形暗示了它與別的元素有不同的功能。
撥號頁麵中撥號鍵與微博發布微博圖標都與其他按鈕不同。

這是文章的上半部分,主要是從五個方麵來闡述交互知識,下篇主要講的記憶律、情感化設計和交互的八大原則,敬請期待~


文章轉載,如有侵權請聯係站長刪除!

聯係我們 真誠期待與您合作
  • 即時在線溝通
    448484380
  • 全國服務熱線統一號碼
    400 680 2006
    工作日 8:30-17:30
  • 通過郵箱給我們發送郵件
    bill@choozaa.com
  • 無錫市新吳區旺莊科技創業中心C棟7F
主題:
姓名:
電話:
留言:
驗證碼:
我們將在一個工作日內給您回複,
您的資料我們會嚴格保密。