較全面APP界面設(shè)計(jì)交互基礎(chǔ)知識集合

創(chuàng)新互聯(lián)小編與你分享APP界面設(shè)計(jì)知識——《較全面APP界面設(shè)計(jì)交互基礎(chǔ)知識集合》

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

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

二、用戶體驗(yàn)

在工作中經(jīng)常聽到 UED(用戶體驗(yàn)設(shè)計(jì))和 UCD(以用戶為中心的設(shè)計(jì))，可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn)，而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計(jì)師只關(guān)注視覺層面，認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計(jì)無關(guān)，那么就會和產(chǎn)品經(jīng)理等角色處于不同的世界了?！杆麄?yōu)槭裁匆疫@么改?」、「為什么這里文字要淺一點(diǎn)?」有時(shí)不理解對方的思考角度就會造成爭執(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)雞就先有雞」、「顧客就是上帝」這種說法，并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了，可見用戶體驗(yàn)對所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是，用戶體驗(yàn)有時(shí)非常地主觀。因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等，有些人明明有摩拜卻要走很遠(yuǎn)找 OFO，也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰，而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡，我們需要研究用戶。

三、用戶研究七種方法

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

1. 用戶畫像

根據(jù)產(chǎn)品的調(diào)性和用戶群體，用戶研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶的模型，這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的，通過這個(gè)標(biāo)簽我們可以更好地理解誰在使用我們的產(chǎn)品。用戶畫像建立后，每個(gè)功能可以完成自己的用戶故事：用戶在什么場景下需要這個(gè)功能。這樣，我們所設(shè)計(jì)的功能就會更接近用戶實(shí)際的需要。

比如我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購物應(yīng)用，那么我們可以做這個(gè)用戶畫像：小美，在北京國貿(mào) CBD 上班，21歲，收入8000，喜歡淘寶購物和電視購物。使用我們產(chǎn)品的目的是為了尋找正品時(shí)尚大牌服裝進(jìn)行網(wǎng)購。

小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺(啟發(fā)：我們的產(chǎn)品是不是要解決這兩個(gè)痛點(diǎn)?)

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

看，即使小美并不真實(shí)存在，但是她指引了我們的產(chǎn)品設(shè)計(jì)。接下來，我們還可以給小美增加一個(gè)頭像，在做設(shè)計(jì)時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶，她會對我們的設(shè)計(jì)有什么看法。當(dāng)我們完成用戶畫像之后，還可以接著設(shè)計(jì)用戶故事：小美經(jīng)常需要在工作場合穿符合工作氣質(zhì)的衣服，也需要在約會時(shí)有晚禮服之類的服裝，可是小美的收入有限，她眼光較高但是對價(jià)格過高的服裝無法承擔(dān)，她使用我們的 APP 就是為了尋找正品且價(jià)格適中的服裝。那么，小美在哪里用我們的 APP 呢?這就要為小美繼續(xù)設(shè)計(jì)一個(gè)用戶使用場景了：小美在開會時(shí)可能會打開看看、在地鐵里也會瀏覽、在清晨打開衣柜時(shí)也會瀏覽?；緛碚f是碎片時(shí)間，而且是有著裝需求時(shí)。(啟發(fā)：我們是不是需要把字號調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境?我們是不是需要設(shè)計(jì)省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)?)

△ 用戶畫像

2. 用戶訪談

邀約用戶來回答產(chǎn)品的相關(guān)問題，并記錄作出后續(xù)分析。用戶訪談有三種形式：結(jié)構(gòu)式訪談(根據(jù)之前寫好的問題結(jié)構(gòu))、半結(jié)構(gòu)式訪談(一半根據(jù)問題一半討論)、開放式訪談(較為深入地和用戶交流，雙方都有主動權(quán)來探討)。用戶訪談設(shè)置時(shí)要注意：用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語。用戶訪談適合產(chǎn)品開發(fā)的全部過程。

3. 問卷調(diào)查

可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題，制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對目標(biāo)人群的投放，另外注意一個(gè)問題最好收集10個(gè)問卷，也就是如果你有10個(gè)問題那么至少要收集100個(gè)問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷，很可能敷衍了事的回答會擾亂我們的判斷。

4. 焦點(diǎn)小組

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

5. 可用性測試

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

6. 眼動測試

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

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

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

有了這些方法，我們就能更好地了解用戶和接近用戶了。但是要注意，用戶研究也是有陷阱的。比如：填寫問卷和參與調(diào)研的用戶可能并不是核心用戶;提交用戶反饋的用戶之外可能有更多沉默的用戶等?？傊脩粞芯渴且粋€(gè)必要的手段，但是仍然需要產(chǎn)品團(tuán)隊(duì)來對產(chǎn)品的方向做出決斷。

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

1. 使用場景

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

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

2. 操作手勢

網(wǎng)頁設(shè)計(jì)所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動端不太一樣，移動端設(shè)備中我們使用手指來操作界面。一般來說，手指點(diǎn)觸區(qū)域最小尺寸為7×7mm，拇指最小尺寸為9×9mm。也就是在我們@2x設(shè)計(jì)中為88px(或44pt)。這個(gè)神奇的88PX在移動端應(yīng)用很廣泛：很多表單單項(xiàng)的高度是88px、導(dǎo)航欄高度也是88px等等。那您可能會說，也不對吧，有些界面上的圖標(biāo)看上去沒有88px啊。是的，但是那只是視覺，我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式(比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域)來讓圖標(biāo)更好點(diǎ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ū)域，移動端還可以利用各種手勢來進(jìn)行各種操作的設(shè)計(jì)。主要的手勢有：

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

除了用戶使用場景、點(diǎn)擊區(qū)域、手勢，那么還有一個(gè)影響我們設(shè)計(jì)的使用情況，就是用戶怎么拿手機(jī)很重要。用戶可以：單手拿手機(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢互動的規(guī)劃與設(shè)計(jì)。比如 OFO 為了讓單手(說不定是左手還是右手)操作方便，主要按鈕在下方并且做的很大，左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長條，方便左右手的觸發(fā)。橫屏使用場景一般是游戲、視頻等，所以一般的 APP 并不支持橫屏操作(微信、支付寶、微博均不支持橫屏操作)。

五、格式塔如何認(rèn)知

我們發(fā)現(xiàn)有些用戶在使用設(shè)計(jì)好的界面時(shí)找不到一些重要的功能按鈕。你也許會說：「奇怪，分享功能不就在更多按鈕里面嗎?」、「用戶怎么連這個(gè)也找不到啊」。我們要來了解一下用戶是如何認(rèn)知我們設(shè)計(jì)好的界面的。在初高中考試的時(shí)候您一定見過完形填空這種格式吧，「格式塔」源自德語「Gestalt」，意即「整體」、「完形」的意思。格式塔心理學(xué)認(rèn)為，我們在觀察的時(shí)候會自動腦補(bǔ)出一些邏輯和含義來，會讓觀察對象變成一個(gè)完整的、整體的、常見的形狀。

「研表究明，漢字的序順并不定一能影閱響讀，比如當(dāng)你完看這句話后之，才發(fā)這現(xiàn)里的字全是都亂的?！寡芯扛袷剿睦韺W(xué)對我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)有什么用呢?掌握格式塔的理論我們就可以讓用戶按照我們安排的「劇本」來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識點(diǎn)。

1. 接近律 law of proximity

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

△ A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序

△ 距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系

2. 相似律law of similarity

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

△ 相似的元素暗示了他們屬于一個(gè)種類

△ 類似外形的單元會被我們?nèi)四X默認(rèn)為同一屬類

3. 閉合律law of closure

就算沒有外形的約束，我們也會自動把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會認(rèn)為是一條線，而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。

△ 左邊的圖中我們會認(rèn)為是圓形有缺口而不是一條曲線，右邊的圖形中我們會認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形

△ 界面設(shè)計(jì)中露出一半內(nèi)容，閉合律讓我們感知右邊還隱藏著更多內(nèi)容

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

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

△ 深諳連續(xù)律的流氓軟件

5. 成員特性律law of membership character

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

△ 獨(dú)特的外形暗示了它與別的元素有不同的功能

△ 撥號頁面中撥號鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同

6. 記憶律：我們?nèi)绾斡洃?

接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時(shí)要求實(shí)驗(yàn)體觀看樣本圖形并記住它們，然后在不同的時(shí)間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時(shí)間畫出來的圖像都有不同。有時(shí)再現(xiàn)的圖畫比原來的圖畫更簡單更有規(guī)則，有時(shí)原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時(shí)被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律：「水平化」、「尖銳化」、「常態(tài)化」。

△ 哪個(gè)圖形才是正確的？(圖片來源：網(wǎng)絡(luò))

• 水平化leveling：水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對稱;或趨向于減少知覺圖形中的具體細(xì)節(jié)。
• 尖銳化sharpening：尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來，人類記憶的特征之一，就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。
• 常態(tài)化normalizing：常態(tài)化是指人們在記憶中，往往根據(jù)自己已有的記憶痕跡對知覺圖形加以修改，即一般會趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。

六、情感化設(shè)計(jì)是什么

了解格式塔會讓我們把界面做得符合用戶的心理預(yù)期，讓用戶能夠明顯地找到他應(yīng)該找到的操作?？墒怯脩艉孟襁€是不開心，因?yàn)橛脩粲X得界面不好看。您是不是也會陷入這樣的矛盾：可用性重要還是美感更重要?怎么樣能夠讓我們設(shè)計(jì)的界面又好用還漂亮呢?情感化設(shè)計(jì)最先由唐納德·A·諾曼博士提出，指的是設(shè)計(jì)中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計(jì)是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計(jì)。比如紅色且巨大的購買按鈕能夠無意識地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時(shí)的焦慮等等。情感化設(shè)計(jì)有三個(gè)水平，它們是遞進(jìn)關(guān)系，分別是：本能水平(重視設(shè)計(jì)外形)、行為水平設(shè)計(jì)(重視使用的樂趣和效率)、反思水平設(shè)計(jì)(重視自我形象、個(gè)人滿意、記憶)。

1. 本能水平

我們都是視覺動物，對外形的觀察和理解是出于我們本能的。本能水平的設(shè)計(jì)就是刺激用戶的感官體驗(yàn)，讓別人注意到我們的設(shè)計(jì)。這個(gè)階段的設(shè)計(jì)會更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁面設(shè)計(jì)，更加注重抓眼球和外觀的刺激。

2. 行為水平

行為水平是功能性產(chǎn)品需要注重的。一個(gè)產(chǎn)品是否達(dá)到了行為水平，要看它是否能有效地完成任務(wù)，是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面：功能，易懂性，可用性和物理感覺。比如好用的記事本APP 等。

3. 反思水平

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

△ 淘寶空狀態(tài)中的情感化設(shè)計(jì)

4. 情感化設(shè)計(jì)的表達(dá)

• 畫面：畫面是情感化設(shè)計(jì)的重點(diǎn)，讓錯(cuò)誤頁面或者空狀態(tài)都成為一幅可愛的插畫。
• 應(yīng)景：讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。
• 游戲感：沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登錄加金幣，有足夠的金幣就可以獲得什么稱號。
• 沖突：沖突非常能夠勾起人的情緒，營造一個(gè)競爭或者對抗的氛圍，讓用戶感覺自己置身在一個(gè)比賽或者格斗中一樣。
• 講故事：給產(chǎn)品和無聊的圖像一些故事內(nèi)容，畢竟沒有人討厭講故事。
• 隱喻：用一些大家理解，隨處可見的事物表達(dá)一些無趣、生澀的概念。
• 互動：給用戶和其他用戶多制造互動機(jī)會，比如排行榜、推薦等，不要讓用戶感覺孤獨(dú)。

七、交互八原則

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

1. 費(fèi)茨定律(Fitts’Law)

費(fèi)茨定律指的是：光標(biāo)到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離(D)和目標(biāo)大小(S)有關(guān)。它的數(shù)學(xué)公式是：時(shí)間 T = a + b log2(D/S+1)。這個(gè)定律是由保羅.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用，特別是在互聯(lián)網(wǎng)設(shè)計(jì)中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動光標(biāo)到鏈接或者按鈕所需的時(shí)間，時(shí)間越短越高效。比如有一個(gè)按鈕在左下角，我們的操作可以細(xì)分為兩個(gè)階段：第一個(gè)階段大范圍移動到左下方向，然后再做微調(diào)到達(dá)這個(gè)按鈕之上。所以這個(gè)時(shí)間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們在做設(shè)計(jì)時(shí)要考慮光標(biāo)默認(rèn)會放在哪里、我們的鏈接按鈕是不是太小了。

△ 費(fèi)茨定律說明距離越短、目標(biāo)大小越大，那么光標(biāo)到達(dá)目標(biāo)越快

△ 費(fèi)茨定律在網(wǎng)頁設(shè)計(jì)中的使用

△ OFO 和蘋果音樂APP 都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大

2. ?？硕?Hick’s Law)

?？硕墒侵敢粋€(gè)人面臨的選擇(n)越多，所需要作出決定的時(shí)間(T)就越長。它的數(shù)學(xué)公式是：反應(yīng)時(shí)間 T=a+b log2(n)。在我們的設(shè)計(jì)中如果給用戶的選擇更多，那么用戶所需要做出決定的時(shí)間就越長。比如我們給出用戶菜單-子菜單-選項(xiàng)，那么用戶可能會很糾結(jié);如果我們簡化成菜單-選項(xiàng)，就會減少用戶做選擇的時(shí)間。

△ 用戶反應(yīng)時(shí)間和選擇數(shù)量的關(guān)系

△ 我們應(yīng)該減少用戶的選擇

3. 7±2法則

讓我們先玩?zhèn)€游戲，請記憶下面的文字，一分鐘后移開視線：

掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望

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

△ 蘋果、站酷、Dribbble 等網(wǎng)站導(dǎo)航數(shù)量全部是7±2

4. 泰思勒定律(Tesler’s Law)

這個(gè)定律是說產(chǎn)品固有的復(fù)雜性存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁面的功能是必須的，但當(dāng)前的頁面信息過載，那么就需要將次要的功能收起或者轉(zhuǎn)移。

△ Dribbble 網(wǎng)站導(dǎo)航將更多功能收起在一個(gè)表示更多的圖標(biāo)內(nèi)

5. 防錯(cuò)原則

一個(gè)表單是需要填寫完畢后方可提交的。但是用戶有時(shí)會漏填或者忘記填寫，這時(shí)用戶點(diǎn)擊提交會怎么樣?很可能有些選項(xiàng)會被清空(比如密碼選項(xiàng)基于安全考慮會清空 cookies)那么用戶還得重新填寫。這時(shí)解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個(gè)看起來不能點(diǎn)擊的樣式，用戶想提交時(shí)彈窗：您還有內(nèi)容沒有填寫完哦，然后把用戶定位在沒填寫完的項(xiàng)目，讓那個(gè)表單高亮。(是不是真的做到以用戶為中心啦?)再比如推特只允許用戶填寫140個(gè)字，但用戶一寫爽了往往會超出140個(gè)字那怎么辦?解決辦法是給他在旁邊倒數(shù)還能寫幾個(gè)字。看，這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯(cuò)誤所做的努力，防錯(cuò)設(shè)計(jì)就是要減少錯(cuò)誤操作所帶來的災(zāi)難。錯(cuò)誤的提示當(dāng)然需要設(shè)計(jì)師的設(shè)計(jì)了?？墒且苍S您不知道有些錯(cuò)誤提示含糊，用戶并不知道到底錯(cuò)的是哪里，下一步該怎么辦。比如僅僅登錄功能就可能會有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、連續(xù)三次輸入密碼錯(cuò)誤、用戶名為空等不同的錯(cuò)誤，而有些產(chǎn)品僅僅給出「出錯(cuò)了」，那么用戶當(dāng)然會不知所措了。正向的例子比如一次我在登錄 Google Mail 時(shí)輸錯(cuò)了密碼，它提示「密碼輸入錯(cuò)誤，提示：您在1個(gè)月前改過密碼」。

△ BOO!APP 輸入密碼時(shí)卡通會蒙住眼睛，輸錯(cuò)時(shí)也會有提示

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

奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時(shí)功能上不可以太繁瑣，應(yīng)該保證簡潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了?提供了喜歡是否不需要點(diǎn)贊了?一定保證功能上的克制。

△ QQ 將更多功能收起到了頭像和加號圖標(biāo)中

7. 防呆原則

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

△ 運(yùn)動APP KEEP 的頁面中總有一個(gè)按鈕是突出的

8. 防止不耐煩原則

用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎?如果我們需要用戶等待載入信息，一定要給一個(gè)有情感化的設(shè)計(jì)提示，避免用戶產(chǎn)生焦慮。 比如很多游戲(決戰(zhàn)平安京、王者榮耀等)加載時(shí)都會出現(xiàn)主角跑步的小動畫，美團(tuán)等 APP 下拉刷新時(shí)也會有幾幀的動畫來安慰用戶。動畫要好于蘋果默認(rèn)提供給開發(fā)的「轉(zhuǎn)菊花」，因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠，用戶需要掌控感，「哎?它一直加載，是不是死機(jī)了?」為了防止用戶沒有掌控感，我們可以為用戶設(shè)計(jì)加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的，原因是其實(shí)要精確判斷加載了多少M(fèi)的素材的代碼更占資源!我們本來想安慰用戶等待加載的時(shí)間竟然會變得更長，那當(dāng)然不行啦。于是很多時(shí)候我們會做一個(gè)假的加載狀態(tài)條來安撫用戶，我想您一定看過反復(fù)加載的加載條吧!加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計(jì)感受的，比如通常是：加載場景資源、加載素材這樣的文案，但是有些APP需要很長加載時(shí)間時(shí)會給出這樣的文案：導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦?

△ 美團(tuán)和網(wǎng)易嚴(yán)選的加載動畫

總結(jié)

APP界面設(shè)計(jì)的交互知識其實(shí)關(guān)鍵還要在應(yīng)用和分析。一是，我們可以在工作中積累經(jīng)驗(yàn)，不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時(shí)的體驗(yàn)；二是，我們要常常積累一些產(chǎn)品使用時(shí)發(fā)現(xiàn)的交互。一個(gè)好的設(shè)計(jì)師一定是懂得交互的設(shè)計(jì)師，也應(yīng)該是非常細(xì)心的設(shè)計(jì)師，也應(yīng)該是懂得為用戶著想的設(shè)計(jì)師。

綜上是APP開發(fā)公司——?jiǎng)?chuàng)新互聯(lián)與你分享的《較全面APP界面設(shè)計(jì)交互基礎(chǔ)知識集合》全部內(nèi)容。

分享名稱：較全面APP界面設(shè)計(jì)交互基礎(chǔ)知識集合
轉(zhuǎn)載源于：http://www.bm7419.com/news11/159811.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、外貿(mào)建站、標(biāo)簽優(yōu)化、企業(yè)建站、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)