欧洲另类一二三四区/亚洲男同网/日日噜噜夜夜狠狠视频/家庭教师波多野吉衣 - 久久精品人人做人人看最新章

一、交互設(shè)計(jì)是什么？

交互設(shè)計(jì) Interaction Design 也被成為IXD，交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道，它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。

作為UI設(shè)計(jì)師，我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理，他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。

那是不是我們作為UI設(shè)計(jì)師，就只需要專心做好視覺(jué)層面的工作而不需要了解交互設(shè)計(jì)了呢？

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

用戶體驗(yàn)

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

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

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

用戶體驗(yàn)（User Experience）是用戶使用產(chǎn)品的心理和感受，用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計(jì)以人為本的設(shè)計(jì)精神。

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

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

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

1. 用戶畫像

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

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

比如：我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購(gòu)物應(yīng)用，那么我們可以做這個(gè)用戶畫像：

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

小美是時(shí)尚OL，審美很高，不喜歡俗氣的設(shè)計(jì)。（啟發(fā)：界面設(shè)計(jì)是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色？）。

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

當(dāng)我們完成用戶畫像之后，還可以接著設(shè)計(jì)用戶故事：

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

那么，小美在哪里用我們的APP呢？

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

2. 用戶訪談

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

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

3. 問(wèn)卷調(diào)查

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

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

4. 焦點(diǎn)小組

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

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

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

5. 可用性測(cè)試

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

6. 眼動(dòng)測(cè)試

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

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

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

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

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

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

1. 使用場(chǎng)景

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

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

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


四、操作手勢(shì)

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

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

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

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

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

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

主要的手勢(shì)有：

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

除了用戶使用場(chǎng)景、點(diǎn)擊區(qū)域、手勢(shì)，那么還有一個(gè)影響我們?cè)O(shè)計(jì)的使用情況——就是用戶怎么拿手機(jī)很重要。

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

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

五、格式塔：我們?nèi)绾握J(rèn)知？
我們發(fā)現(xiàn)：有些用戶在使用設(shè)計(jì)好的界面時(shí)，找不到一些重要的功能按鈕。你也許會(huì)說(shuō)：“奇怪，分享功能不就在更多按鈕里面嗎？”、“用戶怎么連這個(gè)也找不到啊”。

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

格式塔心理學(xué)認(rèn)為：

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

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

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

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

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

1. 接近律 law of proximity

格式塔心理學(xué)認(rèn)為：人們認(rèn)知事物的時(shí)候，會(huì)依靠它們的距離來(lái)判斷它們之間的關(guān)系，兩個(gè)元素越近就說(shuō)明它們之間關(guān)系更強(qiáng)。但是接近也是有對(duì)比的，在復(fù)雜的設(shè)計(jì)中，我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來(lái)排版。

2. 相似律law of similarity

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

3. 閉合律law of closure

就算沒(méi)有外形的約束，我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如：半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線，而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。
左邊的圖中我們會(huì)認(rèn)為是圓形有缺口而不是一條曲線，右邊的圖形中我們會(huì)認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形。
界面設(shè)計(jì)中露出一半內(nèi)容，閉合律讓我們感知右邊還隱藏著更多內(nèi)容。

4. 連續(xù)律law of continuity

在知覺(jué)過(guò)程中人們往往傾向于使知覺(jué)對(duì)象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線，也就是視覺(jué)的慣性。利用連續(xù)律我們可以讓用戶操作界面時(shí)，不經(jīng)過(guò)思考就點(diǎn)擊一個(gè)固定的位置。
5. 成員特性律law of membership character

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

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

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

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

文章轉(zhuǎn)載，如有侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)刪除！