日韩人妻一区二区三区蜜桃视频,国产欧美精品区一区二区三区,熟妇人妻AV无码一区二区三区,国产精品无码专区在线观看av鲁丝片,欧洲精品天堂一区二区无码视频,国产综合91天堂亚洲国产,国产午夜福利精品精华液一区二区,久久天堂综合亚洲鲁鲁五月天

首頁(yè)>關(guān)于我們>新聞中心>行業(yè)動(dòng)態(tài)
全部資訊 贏(yíng)科觀(guān)點(diǎn) 行業(yè)動(dòng)態(tài) 公司動(dòng)態(tài)
全面解析:設計師需要了解的交互知識(上)
2018-06-06    來(lái)自:人人都是產(chǎn)品經(jīng)理    作者:Judy    分享:

一、交互設計是什么?


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

作為UI設計師,我們在工作之中經(jīng)常會(huì )對接交互設計師和產(chǎn)品經(jīng)理,他們具有豐富的交互知識和經(jīng)驗。

那是不是我們作為UI設計師,就只需要專(zhuān)心做好視覺(jué)層面的工作而不需要了解交互設計了呢?

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

用戶(hù)體驗

在工作中經(jīng)常聽(tīng)到UED(用戶(hù)體驗設計)和UCD(以用戶(hù)為中心的設計),可見(jiàn)互聯(lián)網(wǎng)行業(yè)非常重視用戶(hù)體驗,而用戶(hù)體驗絕不僅僅是要樣子好看。

有些設計師只關(guān)注視覺(jué)層面,認為產(chǎn)品戰略等用戶(hù)體驗維度和自己的設計無(wú)關(guān),那么就會(huì )和產(chǎn)品經(jīng)理等角色處于不同的世界了。他們?yōu)槭裁匆疫@么改?為什么這里文字要淺一點(diǎn)?

有時(shí)不理解對方的思考角度就會(huì )造成爭執。

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

其實(shí)早在互聯(lián)網(wǎng)出現之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說(shuō)法,并且西方很多大公司如施樂(lè )、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現之前就已經(jīng)開(kāi)始進(jìn)行研究用戶(hù)體驗了,可見(jiàn)用戶(hù)體驗對所有產(chǎn)品是多么的重要。

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

但用戶(hù)可能是幾百萬(wàn)人呢!我們面對這樣抽象的群體,然后告訴自己要以他們?yōu)橹行脑O計這多么抽象啊。這么多用戶(hù)甚至有時(shí)用戶(hù)自己的聲音也是矛盾的,我們到底怎么樣了解用戶(hù)的心聲呢?

1. 用戶(hù)畫(huà)像

根據產(chǎn)品的調性和用戶(hù)群體,用戶(hù)研究團隊可以設計出一個(gè)用戶(hù)的模型,這種研究的方式被稱(chēng)為用戶(hù)畫(huà)像。用戶(hù)畫(huà)像是由帶有特征的標簽組成的,通過(guò)這個(gè)標簽我們可以更好地理解誰(shuí)在使用我們的產(chǎn)品。

用戶(hù)畫(huà)像建立后,每個(gè)功能可以完成自己的用戶(hù)故事:用戶(hù)在什么場(chǎng)景下需要這個(gè)功能。這樣,我們所設計的功能就會(huì )更接近用戶(hù)實(shí)際的需要。

比如:我們現在要設計一個(gè)女裝購物應用,那么我們可以做這個(gè)用戶(hù)畫(huà)像:

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

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

看,即使小美并不真實(shí)存在,但是她指引了我們的產(chǎn)品設計。接下來(lái),我們還可以給小美增加一個(gè)頭像,在做設計時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶(hù),她會(huì )對我們的設計有什么看法。

當我們完成用戶(hù)畫(huà)像之后,還可以接著(zhù)設計用戶(hù)故事:

小美經(jīng)常需要在工作場(chǎng)合穿符合工作氣質(zhì)的衣服,也需要在約會(huì )時(shí)有晚禮服之類(lèi)的服裝,可是小美的收入有限,她眼光較高但是對價(jià)格過(guò)高的服裝無(wú)法承擔,她使用我們的APP就是為了尋找正品且價(jià)格適中的服裝。

那么,小美在哪里用我們的APP呢?

這就要為小美繼續設計一個(gè)用戶(hù)使用場(chǎng)景了:小美在開(kāi)會(huì )時(shí)可能會(huì )打開(kāi)看看、在地鐵里也會(huì )瀏覽、在清晨打開(kāi)衣柜時(shí)也會(huì )瀏覽。基本來(lái)說(shuō)是碎片時(shí)間,而且是有著(zhù)裝需求時(shí)。(啟發(fā):我們是不是需要把字號調大以適應地鐵里顛簸的閱讀環(huán)境?我們是不是需要設計省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費?)
用戶(hù)畫(huà)像

2. 用戶(hù)訪(fǎng)談

邀約用戶(hù)來(lái)回答產(chǎn)品的相關(guān)問(wèn)題,并記錄作出后續分析。用戶(hù)訪(fǎng)談?dòng)腥N形式:結構式訪(fǎng)談(根據之前寫(xiě)好的問(wèn)題結構)、半結構式訪(fǎng)談(一半根據問(wèn)題一半討論)、開(kāi)放式訪(fǎng)談(較為深入地和用戶(hù)交流,雙方都有主動(dòng)權來(lái)探討)。

用戶(hù)訪(fǎng)談設置時(shí)要注意:用戶(hù)不可以是互聯(lián)網(wǎng)從業(yè)的專(zhuān)業(yè)人員、不可以提出誘導性問(wèn)題、不要使用專(zhuān)業(yè)術(shù)語(yǔ)。用戶(hù)訪(fǎng)談適合產(chǎn)品開(kāi)發(fā)的全部過(guò)程。

3. 問(wèn)卷調查

可分為紙質(zhì)調查問(wèn)卷、網(wǎng)絡(luò )問(wèn)卷調查。依據產(chǎn)品列出需要了解的問(wèn)題,制成文檔讓用戶(hù)回答。問(wèn)卷調查是一種成本比較低的用戶(hù)調查方法,問(wèn)卷調查適合產(chǎn)品策劃初期對目標人群的投放。

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

4. 焦點(diǎn)小組

焦點(diǎn)小組一般有6-12人組成,由一名專(zhuān)業(yè)人士主持,依照訪(fǎng)談提綱引導小組成員各抒己見(jiàn),并記錄分析。并且在焦點(diǎn)小組的房間里會(huì )有一扇單向玻璃窗,用戶(hù)是看不到里面有誰(shuí)的。

而在里面坐著(zhù)的通常是開(kāi)發(fā)團隊,他們可以清晰地看到用戶(hù)是如何吐槽他們的產(chǎn)品的,但是他們沒(méi)有權利直接和用戶(hù)進(jìn)行解釋。

焦點(diǎn)小組需要特殊的房間和設備,主持人也需要訓練有素,焦點(diǎn)小組特別能夠分析出用戶(hù)在沒(méi)有我們說(shuō)明的情況下如何使用我們的產(chǎn)品和對產(chǎn)品的不滿(mǎn)。

5. 可用性測試

通過(guò)篩選讓不同用戶(hù)群來(lái)對產(chǎn)品進(jìn)行操作,同時(shí)觀(guān)察人員在旁邊觀(guān)察并記錄,可用性測試的要求是用戶(hù)不可以是互聯(lián)網(wǎng)從業(yè)者而應該是真實(shí)產(chǎn)品的用戶(hù)群體。但是可用性測試一般要有一個(gè)可用的軟件版本或者原型供人測試才可以,在軟件開(kāi)發(fā)的前期不適合用這個(gè)方法。

6. 眼動(dòng)測試

使用特殊的設備眼動(dòng)儀來(lái)追蹤用戶(hù)使用產(chǎn)品時(shí)眼睛聚焦在哪里,盲區是哪里。比如:一個(gè)網(wǎng)站通過(guò)眼動(dòng)測試,可以知道用戶(hù)的視覺(jué)會(huì )自動(dòng)屏蔽網(wǎng)站的常見(jiàn)廣告位置,這時(shí)如果希望提高廣告的點(diǎn)擊,就需要把廣告位放置于用戶(hù)聚焦時(shí)間較長(cháng)的位置。眼動(dòng)測試的設備比較專(zhuān)業(yè),通常在小公司較難開(kāi)展。

7. 用戶(hù)反饋和大數據分析

根據市場(chǎng)提供的反饋和數據得出客觀(guān)的判斷和合理的推測,用戶(hù)反饋也是用戶(hù)研究的一個(gè)重點(diǎn),用戶(hù)反饋主要是用戶(hù)通過(guò)產(chǎn)品的反饋入口主動(dòng)向開(kāi)發(fā)者提出的意見(jiàn)。

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

比如:填寫(xiě)問(wèn)卷和參與調研的用戶(hù)可能并不是核心用戶(hù),提交用戶(hù)反饋的用戶(hù)之外可能有更多沉默的用戶(hù)等。總之用戶(hù)研究是一個(gè)必要的手段,但是仍然需要產(chǎn)品團隊來(lái)對產(chǎn)品的方向做出決斷。

三、用戶(hù)如何使用產(chǎn)品

1. 使用場(chǎng)景

剛才我們介紹了用戶(hù)使用的場(chǎng)景是根據產(chǎn)品的功能和平臺決定的,電腦的使用場(chǎng)景是正襟危坐,手持鼠標。而移動(dòng)端則是隨時(shí)隨地使用,我們的用戶(hù)可能在地鐵里、在廁所里、在吃飯時(shí)、在上課中怕老師看到把手機藏在桌洞里、在工作中領(lǐng)導巡視后偷偷瞄、在輾轉反側睡不著(zhù)的時(shí)候沒(méi)有開(kāi)燈地瀏覽等。

這時(shí)我們要為用戶(hù)考慮,如果他們在使用我們產(chǎn)品的各種場(chǎng)景中有什么需要,是不是需要省流量、是不是需要調整字號、是不是需要過(guò)濾藍光、是不是需要護眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時(shí)需要個(gè)手電功能、是不是需要語(yǔ)音提醒、是不是需要清除訪(fǎng)問(wèn)記錄。

一個(gè)不考慮用戶(hù)使用場(chǎng)景的產(chǎn)品一定是會(huì )遭到吐槽的,很久之前我聽(tīng)同事在吃飯時(shí)抱怨過(guò):“大爺的,也不搞個(gè)提示,早晨在地鐵里用4G看流量以為是在家用WIFI,結果看了一集《甄嬛傳》花了80塊錢(qián)”,“哎?你是不是早晨開(kāi)會(huì )時(shí)玩游戲了?你的比分都給我們推送了哈哈哈”。

我的產(chǎn)品中的用戶(hù)使用場(chǎng)景表格

四、操作手勢

網(wǎng)頁(yè)設計所處的電腦端目前主要還是依靠鼠標點(diǎn)擊來(lái)操作,鼠標點(diǎn)擊的最小單位甚至可以是一像素。而移動(dòng)端不太一樣,移動(dòng)端設備中我們使用手指來(lái)操作界面。

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

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

那您可能會(huì )說(shuō),也不對吧,有些界面上的圖標看上去沒(méi)有88px啊。

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

除了點(diǎn)擊區域,移動(dòng)端還可以利用各種手勢來(lái)進(jìn)行各種操作的設計。

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

用戶(hù)可以:?jiǎn)问帜檬謾C、雙手拿手機、直向拿手機、橫向拿手機,我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢互動(dòng)的規劃與設計。

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

五、格式塔:我們如何認知?
我們發(fā)現:有些用戶(hù)在使用設計好的界面時(shí),找不到一些重要的功能按鈕。你也許會(huì )說(shuō):“奇怪,分享功能不就在更多按鈕里面嗎?”、“用戶(hù)怎么連這個(gè)也找不到啊”。

我們要來(lái)了解一下用戶(hù)是如何認知我們設計好的界面的,在初高中考試的時(shí)候您一定見(jiàn)過(guò)完形填空這種格式吧,“格式塔”源自德語(yǔ)“Gestalt”,意即“整體”、“完形”的意思。

格式塔心理學(xué)認為:

我們在觀(guān)察的時(shí)候會(huì )自動(dòng)腦補出一些邏輯和含義來(lái),會(huì )讓觀(guān)察對象變成一個(gè)完整的、整體的、常見(jiàn)的形狀。

研表究明:漢字的序順并不定一能影閱響讀,比如:當你完看這句話(huà)后之,才發(fā)這現里的字全是都亂的。

研究格式塔心理學(xué)對我們做互聯(lián)網(wǎng)產(chǎn)品和設計有什么用呢?

掌握格式塔的理論,我們就可以讓用戶(hù)按照我們安排的“劇本”來(lái)交互和操作界面了。我們可以讓用戶(hù)比較容易地根據固定位置找到提交按鈕,我們也可以讓用戶(hù)不經(jīng)過(guò)太多思考,在殺毒軟件中點(diǎn)擊殺毒按鈕等。

格式塔心理學(xué)對于我們做好表現層是非常有利的,格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識點(diǎn)。

1. 接近律 law of proximity

格式塔心理學(xué)認為:人們認知事物的時(shí)候,會(huì )依靠它們的距離來(lái)判斷它們之間的關(guān)系,兩個(gè)元素越近就說(shuō)明它們之間關(guān)系更強。但是接近也是有對比的,在復雜的設計中,我們要一邊考慮它們之間內部的邏輯關(guān)系一邊來(lái)排版。
A組和B組因為接近律而產(chǎn)生不同地閱讀順序
距離更近的信息暗示了他們有內在的邏輯關(guān)系

2. 相似律law of similarity

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

相似的元素暗示了他們屬于一個(gè)種類(lèi)
類(lèi)似外形的單元會(huì )被我們人腦默認為同一屬類(lèi)

3. 閉合律law of closure

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

4. 連續律law of continuity

在知覺(jué)過(guò)程中人們往往傾向于使知覺(jué)對象的直線(xiàn)繼續成為直線(xiàn),使曲線(xiàn)繼續成為曲線(xiàn),也就是視覺(jué)的慣性。利用連續律我們可以讓用戶(hù)操作界面時(shí),不經(jīng)過(guò)思考就點(diǎn)擊一個(gè)固定的位置。
深諳連續律的流氓軟件

5. 成員特性律law of membership character

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

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

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

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


文章轉載,如有侵權請聯(lián)系站長(cháng)刪除!

聯(lián)系我們 真誠期待與您合作
  • 即時(shí)在線(xiàn)溝通
    448484380
  • 全國服務(wù)熱線(xiàn)統一號碼
    400 680 2006
    工作日 8:30-17:30
  • 通過(guò)郵箱給我們發(fā)送郵件
    bill@wincrosoft.com
  • 無(wú)錫市新吳區菱湖大道200號
    中國傳感網(wǎng)國際創(chuàng )新園D2棟305
主題:
姓名:
電話(huà):
留言:
驗證碼:
我們將在一個(gè)工作日內給您回復,
您的資料我們會(huì )嚴格保密。