如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

今天我們來(lái)聊聊

從UI角度體驗(yàn)與分析美騎APP

---

體驗(yàn)環(huán)境

體驗(yàn)人：某UI設(shè)計(jì)師

體驗(yàn)時(shí)間：2016.11.1-12.15 (間歇)

體驗(yàn)產(chǎn)品：美騎APP

產(chǎn)品版本：v3.7.0.1

體驗(yàn)設(shè)備：iPhone6 Plus

系統(tǒng)版本：iOS10.1.1（14B100）

網(wǎng)絡(luò)環(huán)境：無(wú)線wifi高速網(wǎng)絡(luò)和4G

*本文屬于基礎(chǔ)體驗(yàn)，高手請(qǐng)忽略。

前言

(↑圖-1來(lái)源于@Yjjj)

1、這是一個(gè)非大型團(tuán)隊(duì)合作的正確步驟，顯然我們通常只能做到1、4、5，這樣會(huì)導(dǎo)致產(chǎn)品缺乏客觀性。

2、一個(gè)好的APP應(yīng)該注意以下幾點(diǎn)：

用戶反饋（沒(méi)有用戶反饋的APP純粹是自編自導(dǎo)自演自己觀看）、剛需、人性化設(shè)計(jì)、取舍、產(chǎn)品識(shí)別度 、設(shè)計(jì)為使用者服務(wù)、以用戶的角度去設(shè)計(jì)、層次關(guān)系要明確、操作時(shí)無(wú)需思考、簡(jiǎn)單自然、打算解決什么問(wèn)題、溝通 協(xié)調(diào)、給用戶制造驚喜、設(shè)計(jì)趨勢(shì)、好用、易用、奠定盈利基礎(chǔ)、痛點(diǎn)、體驗(yàn)、高頻、清晰的商業(yè)模式……

目錄

站在交互設(shè)計(jì)師(IXD)、視覺(jué)設(shè)計(jì)師(GUI)、用戶體驗(yàn)師(UED/UXD)和動(dòng)效設(shè)計(jì)師、用戶(User) 的角度分析問(wèn)題。

一、在Android與iOS系統(tǒng)上，美騎+交互和界面的設(shè)計(jì)區(qū)別

二、交互設(shè)計(jì)(IXD) Interaction design,區(qū)別于工業(yè)設(shè)計(jì),加了個(gè)”X”。

三、界面(GUI)

四、動(dòng)效的重要性

五、用戶體驗(yàn)(UED/UXD) 我認(rèn)為更多強(qiáng)調(diào)研究人與機(jī)器的關(guān)系的藝術(shù)。

完整的頁(yè)面設(shè)計(jì)應(yīng)該包含“內(nèi)容設(shè)計(jì)”與“人機(jī)交互”兩個(gè)部分。

一、在Android與iOS系統(tǒng)上，美騎+交互和界面的設(shè)計(jì)區(qū)別

在設(shè)計(jì)開(kāi)始之前

●  了解另外一種系統(tǒng) 我3年前用Android，之后一直使用 iPhone，所以我現(xiàn)在對(duì) iOS 上的 UI 樣式有更多的了解。在進(jìn)行跨平臺(tái)設(shè)計(jì)的時(shí)候，我首先去做的一件事是了解另外一個(gè)系統(tǒng)（Android）

●  選擇一個(gè)優(yōu)先的平臺(tái) 由于我們一次要對(duì)兩個(gè)平臺(tái)進(jìn)行設(shè)計(jì)，在時(shí)間有限的情況下，必須有一個(gè)平臺(tái)需要優(yōu)先設(shè)計(jì)。如何選擇優(yōu)先的平臺(tái)并不在于個(gè)人喜好，而是在于這款 app 的市場(chǎng)定位如何。產(chǎn)品的市場(chǎng)中有更多人使用 Android 設(shè)備嗎？目標(biāo)受眾是誰(shuí)等等。美騎+的UI選了iOS系統(tǒng)做優(yōu)先設(shè)計(jì)。

●  了解設(shè)計(jì)規(guī)范 閱讀 iOS 和 Android 的設(shè)計(jì)規(guī)范。

什么時(shí)候應(yīng)當(dāng)做出區(qū)別以及什么時(shí)候兩個(gè)平臺(tái)應(yīng)當(dāng)保持一致 （遵循這些步驟，美騎+就能同時(shí)在 iOS 和 Android 保持原生完美?。?/span>

●  衍生問(wèn)題：什么是原生？（稍后會(huì)解答）

1、總體的樣式

從 iOS7 以后，蘋(píng)果就一直采用扁平化的設(shè)計(jì)模式，去除了所有不必要的紋理和陰影等效果。 Google 的新 MD 設(shè)計(jì)規(guī)范有了一些更加細(xì)節(jié)的規(guī)定，通過(guò)一種叫“紙片”的方法來(lái)創(chuàng)造更多的層級(jí)關(guān)系。

2、實(shí)體按鈕 / 虛擬控制欄

Android 有一個(gè)返回按鈕，點(diǎn)擊它可以返回上一個(gè)屏幕。 Android還有一個(gè)虛擬的控制欄，如果再把菜單欄放下面的話，就會(huì)有雙導(dǎo)航了，所以才做成抽屜導(dǎo)航欄。 iPhone 只能在屏幕的左上角放置一個(gè)返回鍵進(jìn)行返回。 并且兩個(gè)系統(tǒng)的返回按鈕樣式是不一樣的。

3、導(dǎo)航

或許iOS 和 Android 平臺(tái)之間最大的區(qū)別就在于他們的導(dǎo)航樣式了。Android 上最主要的導(dǎo)航方式是抽屜菜單。而且在整個(gè) App 中，這種體驗(yàn)是一貫的。Apple 的導(dǎo)航樣式更傾向于 tab bar，它位于屏幕的底部，并且以一種很簡(jiǎn)單的方式實(shí)現(xiàn)上部?jī)?nèi)容的切換。

4、通用元素

不同平臺(tái)上的導(dǎo)航欄有一定的差別。在 Android 上文本是左對(duì)齊的，然而 iOS 上是居中對(duì)齊的。在 iOS 上，很多企業(yè)都用它們的 logo 來(lái)替換首頁(yè)標(biāo)題欄中的文字，但是在 Android 設(shè)備上這不是一個(gè)好的主意。

5、排版

Android 的 MD 設(shè)計(jì)中字體大小的變化會(huì)更加多樣。 在 iOS 上，字體沒(méi)那么多大小差異，但是在字體重量上有更多的變化。 兩個(gè)平臺(tái)都使用比較細(xì)的字體來(lái)現(xiàn)實(shí)正文內(nèi)容，然而，在右邊的例子中，Android 使用了輕（Light）和常規(guī)（Regular）字體，而 iOS 使用了粗體（Bold）和常規(guī)字體。 這個(gè)例子向你展示了排版方面的一些細(xì)微的不同可以導(dǎo)致印象上的巨大差異——你能很快分辨你是在用 Android 手機(jī)還是在用 iPhone。

6、按鈕樣式

Android的浮動(dòng)動(dòng)作按鈕（Floating action buttons）：最傳統(tǒng)的有邊框的按鈕，陰影厚重明顯，將它們從頁(yè)面上分離出來(lái)，它會(huì)創(chuàng)建一層視覺(jué)深度。這種按鈕的填充顏色一般使用 App 的主色。 iOS App 在外觀上是完全扁平化的，沒(méi)有層級(jí)深度和陰影。主要按鈕有填充顏色，次級(jí)按鈕反轉(zhuǎn)顏色。

7、動(dòng)作表單

(1) iOS 和 Android 原生設(shè)計(jì)的動(dòng)作表單都是出現(xiàn)在屏幕的底部，然后在主要內(nèi)容上罩上一層陰影。然而，它們的不同在于陰影深度和其他細(xì)節(jié)。 Android 在動(dòng)作表單上加了一層厚重的陰影，表明它是脫離于原先的內(nèi)容的。 iOS 的動(dòng)作表單沒(méi)有陰影，僅僅是在原先的背景上防止了一個(gè)有一定透明度的灰色圖案。 下拉按鈕只存在于Android 上，它允許用戶快速選擇功能。 而美騎+在Android上的部分動(dòng)作表單已經(jīng)靈活地變?yōu)榫又酗@示。

(2) 像特定的一些數(shù)據(jù)的輸入，比如日期和時(shí)間，Android 的原生對(duì)話框像警告彈出框。iOS會(huì)在屏幕的底部彈出一個(gè)轉(zhuǎn)輪讓用戶進(jìn)行選擇。 美騎+文章的翻頁(yè)功能很靈活地運(yùn)用了這個(gè)動(dòng)作。

(3) 話題頁(yè)面“更多”與“分享”動(dòng)作的區(qū)別。 Android把所有子功能并集到“更多”里，增加了一層交互關(guān)系。 iOS則把分享和“更多”分開(kāi)，減少了一層交互關(guān)系。

淘寶APP 會(huì)根據(jù)上下滑動(dòng)而變化的按鈕（在花哨的背景下會(huì)疊加一個(gè)半透明圓形）

8、分類控制

在不同的平臺(tái)上，該控件的交互方式是相同的， 但是在視覺(jué)上有著顯著差異。 在 iOS 上，分類控制控件的外觀像按鈕。 而在 Android 上，通過(guò)間距來(lái)展現(xiàn)它們的分離關(guān)系，同時(shí)用下劃線來(lái)標(biāo)明目前所處的位置。

9、彈出框

美騎+正確地處理了彈出框控件，他們也許會(huì)涉及到一些很重要的操作，例如注冊(cè)，確認(rèn)條款，甚至是確認(rèn)支付。我們需要讓他們看起來(lái)是原生的，以便產(chǎn)生一種安全感和信任感。

10、icon

不同的平臺(tái)上對(duì) icon 都有特別的樣式要求。 iOS 平臺(tái)更偏好線形 icon，Android 上的 icon 的描邊則更加地粗壯，或者干脆就用填充的 icon。

【建議】iOS底部導(dǎo)航欄改成實(shí)心

1. 線條的圖標(biāo)會(huì)導(dǎo)致用戶花費(fèi)更多的時(shí)間來(lái)分析圖標(biāo)信息（圖1）

2. 細(xì)條圖標(biāo)風(fēng)格偏向于女性化、文藝小清新、可愛(ài)類型。（圖1） 而美騎+圖文量大，倘若icon是細(xì)線，辨識(shí)度降低。

3. 我們可以做成normal時(shí)空心， Active時(shí)實(shí)心。（圖3.圖4.圖5）

11、通用 UI 控制

復(fù)選框，單選框和輸入框，以及開(kāi)關(guān)都是應(yīng)該有著原生感覺(jué)。這樣能夠給用戶帶來(lái)熟悉感,自然知道如何使用美騎+，并且在涉及到敏感信息的時(shí)候能夠更信任美騎+。

（在右面的例子中，我們可以看到兩個(gè)平臺(tái)上的差異其實(shí)是很小的，小到你在設(shè)計(jì)的時(shí)候可以忽略這些差異，用其中一種形式設(shè)計(jì)，但是不要忽略細(xì)節(jié)上的差異所帶來(lái)的原生的感覺(jué)。）

12、原生APP設(shè)計(jì)的優(yōu)點(diǎn)

按照原生的不容易出現(xiàn)bug

增加熟悉感

不言而喻

無(wú)需思考就能操作

增加信任度

規(guī)范

實(shí)用性強(qiáng) ……

13、Android的收藏流程比iOS復(fù)雜

在安卓上收藏這件商品需要2步。 實(shí)際上可以簡(jiǎn)化為1步。（iOS） 且安卓還是舊開(kāi)關(guān)按鈕形式，沒(méi)有動(dòng)效反饋。

14、Android的點(diǎn)贊流程比iOS復(fù)雜

1、在安卓上點(diǎn)贊這條評(píng)論需要2步。 實(shí)際上可以簡(jiǎn)化為1步。(iOS) 安卓和iOS均沒(méi)有動(dòng)效反饋。

（就像我問(wèn)小明：“我想再給你一百塊！”或者“我想拿回剛給你的一百塊?！?而小明卻像木頭一樣毫無(wú)反應(yīng)，害得我尷尬癌都要犯了。）

2、點(diǎn)擊用戶頭像是進(jìn)入評(píng)論區(qū)，而不是他的資料。

15、Android的菜單層級(jí)關(guān)系流程比iOS復(fù)雜

Android的菜單對(duì)于初級(jí)使用者來(lái)說(shuō)層級(jí)不明顯。 很難迅速分清哪個(gè)是父級(jí)哪個(gè)是子級(jí)。 這就好比，IOS一張圖就能說(shuō)清楚的事情， Android要用三張圖才能“摸索”清楚， 增添了用戶學(xué)習(xí)與理解的時(shí)間成本。

解決辦法1：

去除用戶不再需要的元素 隨著用戶的操作，有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時(shí)候可以將他們隱藏起來(lái)，實(shí)現(xiàn)半沉浸式體驗(yàn)。

解決辦法2：

把二級(jí)和三級(jí)菜單合并到一起，內(nèi)容一目了然。

簡(jiǎn)化層級(jí)關(guān)系，讓用戶選擇自己關(guān)心的話題。 可自行排序菜單。

舉個(gè)例子: 原來(lái)超市里有7排貨架，每排貨架只有一層商品，你要繞七圈才能看完。 （APP沒(méi)有愛(ài)好預(yù)設(shè)，分類繁瑣） 改革后，大家都網(wǎng)購(gòu)，所有商品根據(jù)你的愛(ài)好預(yù)設(shè)全部展示出來(lái)。并且可以收藏自己喜歡的商品（APP導(dǎo)航自定義排序），以后方便查看和購(gòu)買。愛(ài)好還可以添加和刪除。 （這種“普遍的導(dǎo)航設(shè)計(jì)”有一個(gè)優(yōu)點(diǎn)，就是方便，實(shí)用性高，用戶不用思考就知道怎么操作。交互可以向主流靠攏，但樹(shù)立產(chǎn)品識(shí)別度可以在風(fēng)格、人性化或動(dòng)效上體現(xiàn)。）

16、Android的退出流程比iOS復(fù)雜

先看看美騎+退出賬號(hào)的交互設(shè)計(jì)。

大多數(shù)APP的”退出登錄”功能都在設(shè)置里，會(huì)形成用戶使用習(xí)慣。 而在iOS上的美騎+則沒(méi)有這個(gè)問(wèn)題。 之所以造成這樣的“變異”，是因?yàn)閕OS和Android的菜單欄功能不一樣。 在Android上，社區(qū)被拆分成“話題”和“論壇”，刪減了“我的”。 在安卓上“我的”功能的重要性已經(jīng)被忽略了。 這里就需要安卓用戶使用“論壇”“話題”和“我的”數(shù)據(jù)分析，來(lái)辯證這樣安排是否合理。

17、私信頁(yè)

Android私信頁(yè)有時(shí)間顯示，iOS沒(méi)有。 并且Android的輸入框和iOS的輸入框也不一樣。 但是，在安卓上很多APP都沒(méi)有按安卓規(guī)范去設(shè)計(jì)。

18、方便用戶的操作 / 仿iOS延伸

美騎+在Android上點(diǎn)擊狀態(tài)欄返回到頂部，方便快捷。 但是iOS和Android底部Tab Bar是隱藏的，要向上拉↑才會(huì)顯示評(píng)論區(qū)和“分享” 優(yōu)點(diǎn)是增強(qiáng)沉浸式閱讀體驗(yàn)，缺點(diǎn)是，隨著我上下滑動(dòng)，tab bar不斷隱藏/顯示，讓人煩躁。

京東APP更完善此功能，底部導(dǎo)航欄一直顯示，有利于提高點(diǎn)贊量與誘導(dǎo)評(píng)論。 單擊底部的“評(píng)論”icon到達(dá)評(píng)論區(qū)。 不動(dòng)比動(dòng)（看得見(jiàn)比看不見(jiàn)）更具可控性。 另外“分享”按鈕也是顯而易見(jiàn)。

美騎+iOS頂部導(dǎo)航欄是“字體大小”按鈕。我很少用到這個(gè)功能。為何不換成“分享”按鈕？

美騎+安卓版

 

 

京東安卓版

 

結(jié)論：原生設(shè)計(jì)不是唯一標(biāo)準(zhǔn)

雖然原生的設(shè)計(jì)有很多優(yōu)點(diǎn)。但是，Android和iOS的原生規(guī)范并不是絕對(duì)唯一的標(biāo)準(zhǔn)，還是需要結(jié)合實(shí)際界面內(nèi)容來(lái)判斷設(shè)計(jì)。

為什么大多數(shù)UI都不遵循設(shè)計(jì)規(guī)范？

1. 在 4.0 之前，Android 標(biāo)準(zhǔn)風(fēng)格的 UI 非常糟糕，大家只能直接從 iOS 上學(xué)習(xí)借鑒。

2. 進(jìn)入 Android 4.X 時(shí)代后，大家需要考慮繼承性問(wèn)題。很多原先就采用 iOS UI 的應(yīng)用干脆就直接繼續(xù)采用 iOS UI 了。

3. 想要樹(shù)立品牌，采用與標(biāo)準(zhǔn)風(fēng)格不同的 UI 是很搶眼的。

4. 認(rèn)為自己的 UI 風(fēng)格能夠 “ 超越規(guī)范 ”。諸如 Facebook 、Flipboard和 Pinterest 的確使用了一種略微偏離視覺(jué)規(guī)范的設(shè)計(jì)風(fēng)格。

為什么QQ和微信的UI設(shè)計(jì)都不遵循Material Design（安卓）規(guī)范？

首先我們要承認(rèn)微信安卓版并沒(méi)有自己的一套UI。騰訊會(huì)優(yōu)先在iOS上先做新功能，做的過(guò)程中會(huì)有很多的UI上的反復(fù)修改，很耗時(shí)。 而android版本只需要移植，使得跟進(jìn)速度非?？?。

“微信的頭幾個(gè)android版本，是單獨(dú)做了一套符合android規(guī)范的UI的。但是幾個(gè)版本下來(lái)，很難讓我們自己覺(jué)得滿意。android的UI規(guī)范， 確實(shí)稍嫌混亂，各種app也都是大膽自己發(fā)揮。我們自認(rèn)為以我們現(xiàn)有的UI人手，專門(mén)針對(duì)android做一套令我們自己滿意的UI，而且還要跟上iOS 版本的快速迭代節(jié)奏，很困難，所以才決定直接移植iOS的微信UI?！保? allenzhang（現(xiàn)任騰訊副總裁，騰訊廣州研發(fā)部總經(jīng)理，微信、QQ郵箱產(chǎn)品經(jīng)理）

二、補(bǔ)充2個(gè)系統(tǒng)相同的交互設(shè)計(jì)

1.目標(biāo)驅(qū)動(dòng)設(shè)計(jì)

在交互設(shè)計(jì)里，用戶本身是個(gè)制約因素。將用戶研究增加到這個(gè)方程式中，設(shè)定清晰的用戶目標(biāo)，以使形式和功能完美結(jié)合。

2.“神奇的界面”

理想狀態(tài)下界面UI設(shè)計(jì)：它們不會(huì)花很長(zhǎng)時(shí)間來(lái)加載或回應(yīng)；它們不會(huì)讓用戶去思考；它們不會(huì)給用戶增加煩惱。就像Jason Fried，37 Signal的CEO說(shuō)的：“少就是少。”只給用戶他們需要的，不要設(shè)計(jì)過(guò)多無(wú)謂的東西，也不要在交互設(shè)計(jì)里做更多無(wú)聊的步驟。

3.實(shí)用性

實(shí)用性是指人們用一個(gè)工具來(lái)完成一個(gè)特定目標(biāo)的難易程度。

4.啟示性

剪刀的設(shè)計(jì)讓不熟悉剪刀的人馬上就明白哪里是手持的，哪里是剪切的。最佳交互設(shè)計(jì)是不言自明的。換句話說(shuō)，鏈接就應(yīng)該像是鏈接，按鈕就應(yīng)該像是按鈕，搜索框就應(yīng)該……你懂的。

5.可學(xué)習(xí)性

大量用來(lái)組織用戶界面UI設(shè)計(jì)的都是熟悉的組件。如果用戶習(xí)慣按按鈕提交表格，在這種情況下，他們就會(huì)去尋找按鈕。優(yōu)秀的交互設(shè)計(jì)師不會(huì)重新發(fā)明一些東西。相反，他們會(huì)利用已有的設(shè)計(jì)增加熟悉感。網(wǎng)上很多交互設(shè)計(jì)都記錄在Yahoo!的設(shè)計(jì)庫(kù)中。

總而言之，如果手上的設(shè)計(jì)問(wèn)題確實(shí)需要特殊處理，交互設(shè)計(jì)師應(yīng)該花大力氣讓這個(gè)界面UI設(shè)計(jì)易于掌握，或者易于學(xué)習(xí)。 （這一點(diǎn)需要對(duì)當(dāng)下的設(shè)計(jì)慣例、啟示性及網(wǎng)絡(luò)整體的實(shí)用性都非常熟悉。）

話題點(diǎn)贊的流程復(fù)雜 當(dāng)我點(diǎn)擊用戶頭像的時(shí)候，我是希望進(jìn)入他的資料頁(yè)面， 結(jié)果出來(lái)了點(diǎn)贊和評(píng)論功能按鈕。

A.點(diǎn)贊過(guò)后不會(huì)自動(dòng)消失。 要手動(dòng)點(diǎn)空白處。

B.可以重復(fù)點(diǎn)贊（刷贊）

C.不可取消贊

D.沒(méi)有動(dòng)效，略顯呆滯

tumblr 不喜歡我 心都碎了呢~

 

第一次贊，顯示+1 ；第二次贊，顯示已贊過(guò)

 

 

原生與H5的交互

比如說(shuō)：從原生頁(yè)面的一個(gè)按鈕，點(diǎn)擊之后跳轉(zhuǎn)到了一個(gè)H5的頁(yè)面A，A頁(yè)面中又有一個(gè)按鈕，點(diǎn)擊之后，又加載了一個(gè)新的H5頁(yè)面B，從B點(diǎn)擊一個(gè)按鈕，又加載一個(gè)新的H5頁(yè)面C，如果此時(shí)我們點(diǎn)擊左上角的返回按鈕，會(huì)直接返回到我們的原生頁(yè)面或者只返回上一級(jí)頁(yè)面；是不是給用戶的體驗(yàn)很不好？

此時(shí)我們想要重新定制返回按鈕，先判斷當(dāng)前的H5頁(yè)面是否可以返回。我覺(jué)得看圖更容易說(shuō)清楚。

三、界面

配色

1. 配色小清新(飽和度低)，不符合用戶群體和公司品牌調(diào)性。 （騎行用戶中97.26%為男性,配色應(yīng)當(dāng)年輕化并且充滿男性荷爾蒙）

2. 對(duì)比下圖的APP，風(fēng)格強(qiáng)烈，辨識(shí)度高。 (但這種適合功能和內(nèi)容較簡(jiǎn)潔的APP，而資訊類APP都大同小異)

注冊(cè)頁(yè)

配色風(fēng)格不一致 違反一致性原則

登陸頁(yè)

簡(jiǎn)單粗暴的“跳過(guò)”?! 家具定制、服裝定制、電商定制……在這個(gè)人人都要【定制】的時(shí)代，我們也需要在設(shè)計(jì)上體現(xiàn)人性化。

注冊(cè)頁(yè)門(mén)檻

1.美騎+啟動(dòng)后直接顯示首頁(yè)，要點(diǎn)擊“我的”才能注冊(cè)或登錄。

2.對(duì)比花椒直播和網(wǎng)易云音樂(lè)，啟動(dòng)APP后第一個(gè)頁(yè)面是提示用戶登錄，這種方式可以增加新用戶。

品牌形象的植入

占位符和缺省頁(yè)可以統(tǒng)一風(fēng)格.加入騎行元素.強(qiáng)化美騎品牌效果

讓用戶一看到騎行元素，第一時(shí)間想起美騎。

保持一致性，包括內(nèi)部一致性（在不同地方設(shè)計(jì)是相同的）和外部一致性（在同一個(gè)企業(yè)的其他產(chǎn)品中，反映類似的設(shè)計(jì)）。 配色方案和排版，這是品牌目標(biāo)達(dá)成的常用途徑。

在這一層，內(nèi)容、功能和美學(xué)匯集到一起來(lái)，滿足其他四個(gè)層面的目標(biāo)。 我們沒(méi)有達(dá)到內(nèi)部和外部的一致性，即模板化、統(tǒng)一的品牌識(shí)別形象、跨媒體的一致性， 沒(méi)有形成自己的特色和給用戶一個(gè)積極明確的企業(yè)印象。 建議運(yùn)用兔子的形象。（騎友還是挺喜歡美騎兔的）

按鈕

頂部按鈕會(huì)不會(huì)太擠？

考慮一下粗手指的用戶 （例如經(jīng)常打籃球的人手指普通肥大） 稍加創(chuàng)意，“我的”按鈕也能妙趣橫生。

話題頁(yè) – 時(shí)間

1.頁(yè)面信息缺日期? 到底需不需要日期? 對(duì)于有時(shí)間需求的用戶來(lái)說(shuō)會(huì)顯得產(chǎn)品不夠體貼，信息傳達(dá)不夠。

2. 或者可以參照iOS原生的信息界面設(shè)計(jì)，向左推會(huì)顯示時(shí)間。平常則隱藏。

展示頁(yè)

完整的頁(yè)面設(shè)計(jì)應(yīng)該包含內(nèi)容設(shè)計(jì)與人機(jī)交互兩個(gè)部分

展示頁(yè)的設(shè)計(jì)目的是提高信息被用戶自然吸收的概率，需要個(gè)用戶一個(gè)信號(hào)，暗示他接下來(lái)可以做哪些事。 “你看這個(gè)姑娘這么美，要不要加個(gè)關(guān)注啊？或者看看她的動(dòng)態(tài)？” “你看這里好像在搞活動(dòng)啊，要不要戳進(jìn)去看看？” “你看這些自行車在搞特價(jià)啊，要不要看看價(jià)錢(qián)？”

需要展示：

1.用戶喜歡的

2.主要任務(wù)的

3.可以賺錢(qián)的

這部分是吸引用戶的重點(diǎn)，需要優(yōu)秀的內(nèi)容+恰當(dāng)?shù)脑O(shè)計(jì)。

展示頁(yè) – 用戶喜歡的

圖1 在推薦的文章后加“屏蔽”功能，并得知用戶屏蔽的理由，可以幫助我們改進(jìn)內(nèi)容推送的方式。

圖2 用戶選擇自己喜歡的話題。

圖3 用戶自行排序、添加、刪減內(nèi)容。

圖4 用戶主動(dòng)提出反饋。（并且要把反饋的功能極簡(jiǎn)化。APP默認(rèn)打開(kāi)反饋功能，用戶不經(jīng)意間搖動(dòng)手機(jī)，就會(huì)彈出反饋?lái)?yè)面，相當(dāng)于我們主動(dòng)引導(dǎo)用戶去反饋。用戶可自行關(guān)閉此功能。） 這樣可以更精準(zhǔn)地篩選出用戶喜歡的內(nèi)容，從而提高留存率。

為什么用戶要用美騎APP?

訪問(wèn)張先生為什么偏好美騎網(wǎng)PC端：看圖主要就是瀏覽資訊，移動(dòng)端圖不夠大?！?/span>

所以我們就要通過(guò)其他方式來(lái)彌補(bǔ)

1. 拍照搜車

2. 建立游戲機(jī)制（拍照拿紅包、做任務(wù)拿獎(jiǎng)勵(lì)、解鎖更多功能、簽到有積分獎(jiǎng)勵(lì)）

3. 拍照話題 （摔車大合集）

4. 關(guān)聯(lián)通訊錄，看哪個(gè)朋友也在玩

5. 模擬朋友圈，增強(qiáng)社交功能（讓用戶把騎行社交建立在美騎APP上）

列表頁(yè)

重點(diǎn)是搞清楚用戶找尋的目的

找尋的方法：

1.排序

①按時(shí)間排序(更新/時(shí)間排序)

②高關(guān)注度信息排序(收藏量/點(diǎn)贊量)

③決策依據(jù)信息排序(價(jià)格/距離)

2.分類與標(biāo)簽/篩選

3.搜索

√①關(guān)鍵字搜索

②輔助搜索(搜索的歷史記錄/近義詞,比如你可能想找…)

√③多維度搜索(款、熱度高、價(jià)格)

√④告訴用戶有終點(diǎn)（提示沒(méi)有搜索內(nèi)容）

√表示美騎+ 已具備的功能

列表頁(yè) – 搜索

直接點(diǎn)擊搜索 / 默認(rèn)按提示搜索 (智能推薦)

圖1：美騎+搜索框是一個(gè)耿直boy 搜索就是搜索，哪有那么多話。

圖2：KEEP的搜索框會(huì)提醒你可以搜索什么 (輔助搜索)。

圖3：淘寶搜索框還能一鍵搜索，交互極簡(jiǎn)化。 （雖然你可能不想搜榨汁機(jī)，但偶爾還是會(huì)被帶偏的，起碼商品點(diǎn)擊率上去了）。

正文頁(yè)

標(biāo)題高度概括整篇文章的內(nèi)容（前提），突出標(biāo)題與圖片并弱化其他元素，這是非常的信息傳達(dá)方式。 但是……

布局排版

正文頁(yè)

↑ 美騎+ 文章標(biāo)題

↑ 對(duì)比知乎APP文章標(biāo)題

 

圖片頁(yè)的導(dǎo)航欄

在這種大圖瀏覽的模式下， 導(dǎo)航欄自動(dòng)隱藏，界面更簡(jiǎn)潔。 節(jié)約空間展示內(nèi)容。 參照淘寶導(dǎo)航欄與知乎導(dǎo)航欄。

↑ 美騎+圖片導(dǎo)航欄

左-知乎APP 導(dǎo)航欄，右-淘寶APP 導(dǎo)航欄

 

歡迎頁(yè)

1.功能/服務(wù)介紹（最常見(jiàn)，展示自己的優(yōu)點(diǎn)，產(chǎn)品比較被動(dòng)）

2.氣氛營(yíng)造（引導(dǎo)用戶情緒轉(zhuǎn)換，產(chǎn)品比較主動(dòng)）

3.操作手冊(cè)（介紹如何操作） 在打開(kāi)后通過(guò)播放動(dòng)畫(huà)的方式來(lái)介紹產(chǎn)品或傳遞一種理念，這種方式適用于運(yùn)動(dòng)類應(yīng)用，給人傳達(dá)青春活力、積極樂(lè)觀的生活態(tài)度。優(yōu)點(diǎn)：直觀，動(dòng)感，生活化。 缺點(diǎn)：應(yīng)用較大，視頻播放會(huì)出現(xiàn)卡頓的情況。

美騎APP引導(dǎo)頁(yè)

↑ 自動(dòng)輪播（自動(dòng)翻頁(yè)）

↑ 可拖動(dòng)的長(zhǎng)圖片

↑ 視頻

引導(dǎo)頁(yè)還有很多種例如創(chuàng)意提示插畫(huà)、攝影圖、互動(dòng)圖等。

 

加載頁(yè)

用動(dòng)效來(lái)優(yōu)化加載頁(yè)是很好的辦法， 并且植入美騎品牌形象。

四、動(dòng)效

動(dòng)效也是交互設(shè)計(jì)的一部分 動(dòng)態(tài)設(shè)計(jì)就像一個(gè)人的肢體語(yǔ)言，少了顯得這個(gè)人死板，多了則像神經(jīng)病。 而如何恰到好處地拿捏產(chǎn)品中什么地方需要設(shè)計(jì)動(dòng)效、怎么設(shè)計(jì)動(dòng)效，這需要從用戶的角度進(jìn)行感性的認(rèn)知。例如：需要讓用戶等待的、需要讓用戶快速通過(guò)的、需要讓用戶感覺(jué)感受的等等。 合理的劃分使產(chǎn)品的“節(jié)奏感”更好。 優(yōu)點(diǎn)：更適合人體動(dòng)力學(xué)，更好互動(dòng)，形成真正人機(jī)交流，主流趨勢(shì)！ 缺點(diǎn)：增加工作量，甚至?xí)怀绦騿T打?！?gt;.

加強(qiáng)體驗(yàn)舒適度

嗯，就是讓用戶更加爽更加爽的用你的產(chǎn)品。 具體表現(xiàn)在：

1、表現(xiàn)層級(jí)關(guān)系 為了展現(xiàn)層與層的關(guān)系，是抽屜，是打開(kāi)，還是平級(jí)切換等等，讓用戶知道這個(gè)界面和上一個(gè)、下一個(gè)的關(guān)系。這已經(jīng)是非常最常見(jiàn)的運(yùn)用了。

2、與用戶手勢(shì)結(jié)合，更自然的動(dòng)畫(huà)表現(xiàn) 當(dāng)用戶手勢(shì)操作的時(shí)候，讓界面的動(dòng)態(tài)走向更符合手指的運(yùn)動(dòng)，從而讓用戶感覺(jué)到是自己控制了界面的動(dòng)向，而不是機(jī)械化的跳轉(zhuǎn)。

3、愉快的提示功能

4、額外增加界面的活力 在用戶預(yù)期之外增加的驚喜，可以是帥氣的，可以是賣萌，總之讓用戶感知到產(chǎn)品的生命力。

減弱不可避免的不適感

1.讓等待變得更愉快 常出現(xiàn)在加載、刷新、發(fā)送等界面中，讓等待變得可視化，甚至不再那么無(wú)聊。

2.失敗界面的動(dòng)效 比如刷新失敗、頁(yè)面錯(cuò)誤、未聯(lián)網(wǎng)提示這些。

3.增加界面與界面銜接的延續(xù)感 界面的跳轉(zhuǎn)不可以避免，但是如果讓本來(lái)分別獨(dú)立的2個(gè)界面或者事件擁有了某種特定的聯(lián)系，可以顯得更加好玩，不再是生硬的跳轉(zhuǎn)。

網(wǎng)易，按下流行元素主題來(lái)變化的，比如歐洲杯的時(shí)候，加載就變成了射門(mén)的動(dòng)畫(huà)游戲。 ——美騎某iOS攻城獅 小羅

美騎+ 加載頁(yè)

 

不易被察覺(jué)的動(dòng)效

特意把這一類單獨(dú)說(shuō)一下，由于不容易被發(fā)現(xiàn)，普通用戶通常會(huì)忽略它們的存在，但很多時(shí)候這些小細(xì)節(jié)讓交互變得更加有趣。

1.默默增加反

饋感 為用戶的操作提供有趣的反饋。

2.去除用戶不再需要的元素 隨著用戶的操作，有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時(shí)候可以將他們隱藏起來(lái)。

總的來(lái)說(shuō)動(dòng)效還是為用戶體驗(yàn)而服務(wù)的，動(dòng)效設(shè)計(jì)師尤其要注意交互邏輯，才能讓作品看起來(lái)不但動(dòng)效帥氣逼人而且真正發(fā)揮了實(shí)際的作用。        

最后，千萬(wàn)不要犧牲了用戶寶貴的時(shí)間用來(lái)看毫無(wú)目的的動(dòng)效。

豆瓣刷新動(dòng)畫(huà)

（后來(lái)發(fā)現(xiàn)支付寶也做了一樣的動(dòng)畫(huà)）

其實(shí)美騎APP第一版的時(shí)候，是有做動(dòng)效的，后來(lái)由于沒(méi)寫(xiě)JS腳本，就沒(méi)有了動(dòng)畫(huà)效果。

（為此我還特地對(duì)比了美騎APP v1.0、美騎APP當(dāng)前版本以及今日頭條APP的動(dòng)效，由于網(wǎng)站不能上傳視頻，這個(gè)部分省略）

動(dòng)效和UI的完美結(jié)合 Facebook

動(dòng)效輔助交互 隱藏、翻頁(yè)、力量、層級(jí)意識(shí)…

https://www.youtube.com/watch?v=-uNyXqC0Mpo

https://www.youtube.com/watch?v=Zq6-b9_V9lA

里面很多動(dòng)畫(huà)都很酷炫還有各種不同的交互方式。

五、用戶體驗(yàn)

產(chǎn)品設(shè)計(jì)/用戶體驗(yàn) 五層構(gòu)架

1、戰(zhàn)略層對(duì)應(yīng)產(chǎn)品目標(biāo)，用戶需求。

2、范圍層對(duì)應(yīng)產(chǎn)品的信息和功能點(diǎn)，涉及到產(chǎn)品的側(cè)重點(diǎn)和取舍。

3、結(jié)構(gòu)層對(duì)應(yīng)產(chǎn)品的實(shí)際落地，產(chǎn)品在這個(gè)層面開(kāi)始具體化。

4、框架層對(duì)應(yīng)產(chǎn)品具體內(nèi)容的呈現(xiàn)，產(chǎn)品進(jìn)一步具體化，落實(shí)到界面。

5、表現(xiàn)層對(duì)應(yīng)產(chǎn)品的視覺(jué)傳達(dá)，是產(chǎn)品的美化。

我們暫且僅從“框架層 & 表現(xiàn)層 ”開(kāi)始分析

【框架層】

界面設(shè)計(jì)——提供給用戶做某事

導(dǎo)航設(shè)計(jì)——提供用戶去某個(gè)地方的能力

信息設(shè)計(jì)——把想法傳遞給用戶

【表現(xiàn)層】

視覺(jué)設(shè)計(jì)——不僅是美術(shù)，重點(diǎn)是關(guān)注用戶的注意力； 不能只考慮個(gè)人喜好，要支持各個(gè)模塊的區(qū)別，要使用戶清楚可用； 與戰(zhàn)略定位保持一致。（用戶需求和目標(biāo)）

目標(biāo)人群分析

抓住目標(biāo)用戶的特性（男性，也可以理解為直男，愛(ài)好騎行的直男） 功能上放大社交功能 – 完善直播功能(hot point)

用戶畫(huà)像

這就是為什么導(dǎo)航需要分類， 為什么需要讓用戶選擇自己喜好的分類。

設(shè)計(jì)師最常忽略的UI頁(yè)面狀態(tài)：空白狀態(tài)（empty state） 頁(yè)面

設(shè)計(jì)師必須讓用戶在 “首次使用" 就有好的體驗(yàn)！ 大多 app 平均會(huì)失去 77% 的用戶（用戶下載后三天）。更糟的是，在 30 天內(nèi)， 將近 80% 的用戶不再使用。造成如此低的用戶留存率是因?yàn)?app 制作或概念不良嗎？恐怕有其他原因?；旧?，使用者會(huì)下載許多 app 試用，并在幾天內(nèi)就會(huì)決定該刪除那幾個(gè)。這代表怎么在這個(gè)期間內(nèi)讓使用者上癮，是邁向成功的關(guān)鍵。而你的任務(wù)就是確保用戶要經(jīng)常使用你的app，且能心滿意足。但在達(dá)到這個(gè)目標(biāo)之前，你必須讓他們?cè)? “首次使用" 就有好的體驗(yàn)！

第一眼印象太重要了！

什么時(shí)候使用者會(huì)遭遇 “空白狀態(tài)" ?

1、首次使用： 首次開(kāi)啟 App

2、發(fā)生錯(cuò)誤：觸發(fā)某事件

3、使用者主動(dòng)清除：當(dāng)使用者把內(nèi)容都清空時(shí)

設(shè)計(jì)空白頁(yè)面的效益并不僅是美學(xué)的提升，它能讓用戶預(yù)期接受可能要呈現(xiàn)的內(nèi)容，也可增加使用者的黏著度，并告知使用者進(jìn)行某些動(dòng)作會(huì)發(fā)生甚么事情。設(shè)計(jì) “空白狀態(tài)" 頁(yè)面，可達(dá)到下述三大效益：

1.教學(xué)與幫助

2.讓使用者開(kāi)心

3.激勵(lì)使用者行動(dòng)

上圖只有結(jié)果，沒(méi)有引導(dǎo)下一步操作，就相當(dāng)于老板問(wèn)你：今天的比賽誰(shuí)拿冠軍？ 你直接說(shuō)：不知道。 但其實(shí)可以說(shuō)：我不知道哦，我去問(wèn)問(wèn)別人。 我們不但提供結(jié)果，還要努力提供解決方法。 此頁(yè)面的設(shè)計(jì)需在 “友善的程度" 與 “幫助的效益" 中取得平衡。

“你就像身處荒島，感到迷失方向且失去聯(lián)系嗎？跟隨我們的建議，保持冷靜，點(diǎn)把取暖的火，并且按下重整試試。”既有結(jié)果，又有引導(dǎo)，相比之下比較友好。

1、提供教學(xué)與幫助

在 “空白狀態(tài)” 頁(yè)面上可達(dá)成的第一個(gè)效益就是：指導(dǎo)使用者如何使用美騎+。如果他們不懂 如何操作，app 可能就會(huì)被打入冷宮。所以，我應(yīng)該要協(xié)助他們理解下一步要干嘛？或讓他們可期待會(huì)有種事件發(fā)生。

適當(dāng)?shù)奶崾?，協(xié)助用戶操作。

2、讓使用者開(kāi)心

若要給使用者好的第一印象，使用性是關(guān)鍵但非為一，產(chǎn)品所呈現(xiàn)的 “品牌個(gè)性” 更是重要。假使我能讓 “空白狀態(tài)” 的頁(yè)面看起來(lái)與其它競(jìng)爭(zhēng)對(duì)手不同，其實(shí)也代表著我向用戶證明 “產(chǎn)品體驗(yàn)同樣也具獨(dú)特性"！ 而我們的目標(biāo)就是設(shè)計(jì)出令人愉悅驚喜的界面。

3.激勵(lì)使用者行動(dòng)

一個(gè)成功的設(shè)計(jì)會(huì)把 “特殊功能" 或 “特色" 的信息，在此頁(yè)面告知給使用者，并且導(dǎo)引他們?nèi)プ龀鑫覀冾A(yù)期的動(dòng)作。 鼓勵(lì)使用者使用：利用適當(dāng)并帶激勵(lì)作用的用詞或設(shè)計(jì)，如 “學(xué)習(xí)更多" 或 “讓我們開(kāi)始吧！“ 說(shuō)服使用者使用：提醒用戶他們使用你的產(chǎn)品能帶來(lái)的效益。

引導(dǎo)使用者脫離“空白狀態(tài)”，進(jìn)行有意義的行為。

比如我是一個(gè)銷售員，顧客在逛我的店時(shí)，我必須微笑，制造愉快活躍的氣氛，真心地推薦適合顧客的商品，給顧客建議，例如說(shuō)“這是新款，我覺(jué)得很適合你，你要試下嗎？”而不是一聲不吭地站一旁，任由顧客自己摸索，最后離開(kāi)。 假如我是顧客，面對(duì)兩家餐館，我一定會(huì)選有服務(wù)員在門(mén)口熱情地招呼我進(jìn)去的那家，這是潛意識(shí)決定的。 所以做好這些細(xì)節(jié)是提高用戶留存率的辦法。

情感化設(shè)計(jì)

看用戶對(duì)網(wǎng)易云音樂(lè)的評(píng)價(jià)。

感人嗎？ 我們喜歡和人交流，而不是機(jī)器。網(wǎng)易云音樂(lè)成功抓住了用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行特定行為（*執(zhí)行特定行為：例如一個(gè)有著明亮色彩的按鈕能夠無(wú)意識(shí)地抓住用戶的注意。而隨后的行為可以是任何動(dòng)作，比如點(diǎn)擊按鈕、注冊(cè)內(nèi)部通訊、或進(jìn)行網(wǎng)上購(gòu)買。 ）的可能性的設(shè)計(jì)。情感化設(shè)計(jì)是增強(qiáng)用戶體驗(yàn)的一種思路。

我覺(jué)網(wǎng)易云音樂(lè)是情感化路線的高手，最近他家的評(píng)論就超級(jí)火，他們把贊數(shù)最高的評(píng)論做成海報(bào)，在公共場(chǎng)所鋪天蓋地進(jìn)行宣傳，總有一條評(píng)論會(huì)打動(dòng)你，總有人會(huì)情不自禁地拍下發(fā)到朋友圈，這就起到一個(gè)病毒式傳播效應(yīng)。 

還記得之前App Store有個(gè)很火的游戲叫“l(fā)ifeline”嗎，所表達(dá)的目的也是大同小異的。

加入人性化設(shè)計(jì)，讓產(chǎn)品釋放正能量，頁(yè)面不再冷冰冰。 “在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中一定會(huì)涉及到兩個(gè)詞：‘用戶價(jià)值’和‘用戶體驗(yàn)’。一個(gè)產(chǎn)品，首先是能用，然后是好用，最后還能帶來(lái)身心愉悅的感覺(jué)。用戶價(jià)值意味著滿足了“能用”的需求，而用戶體驗(yàn)則由后面兩個(gè)環(huán)節(jié)決定，帶給用戶“好用”和“還想用”的體驗(yàn)?！? ——產(chǎn)品經(jīng)理Nairo

核心：一見(jiàn)鐘情。 如果用戶想要傳播你的產(chǎn)品，他想用一句話去跟他身邊的親朋好友安利你的產(chǎn)品，你覺(jué)得他應(yīng)該說(shuō)哪句話才對(duì)？你希望用戶說(shuō)的那句話，就是產(chǎn)品的屬性和價(jià)值認(rèn)知在用戶心中是怎樣的。

表現(xiàn)手法

1、挑逗本能。 簡(jiǎn)而言之就是好看。 “我覺(jué)得它看上去不錯(cuò)。”這是一個(gè)非理性的心理狀態(tài)，也說(shuō)明了賞心悅目和感官層面愉悅的設(shè)計(jì)非常重要。 關(guān)鍵字：漂亮

在用戶的角度看： 外觀的美能夠提升用戶內(nèi)心的愉悅度，并且增加對(duì)它出錯(cuò)的包容度，整體來(lái)說(shuō)它會(huì)讓我們的體驗(yàn)得到提升。 如果一個(gè)團(tuán)隊(duì)在產(chǎn)品的設(shè)計(jì)層面很用心打磨，說(shuō)明這是一個(gè)用心的團(tuán)隊(duì)。一個(gè)用心的團(tuán)隊(duì)的其他方面，比如說(shuō)技術(shù)質(zhì)量等等就覺(jué)得也不會(huì)太差。

2、社會(huì)互動(dòng)。 比如現(xiàn)在的直播，包括評(píng)論、點(diǎn)贊、分享等等，都是有關(guān)社會(huì)化互動(dòng)的一些情感需求的體現(xiàn)。我們適當(dāng)?shù)貜?qiáng)化美騎+中這樣的功能，會(huì)提升用戶對(duì)這種社交需求上的一些感受。 關(guān)鍵字：表達(dá)與傾訴、交流與互動(dòng)、群體歸屬、關(guān)注/粉絲、跟風(fēng)（熱門(mén)）

聊天的表情之所以受到大家的追捧，是因?yàn)樗軌虮磉_(dá)出語(yǔ)言、文字所難以傳達(dá)的那些微妙的情感(圖1) 這些家具像不像人？我們覺(jué)得它很萌，我們的人腦會(huì)優(yōu)先識(shí)別擬人符號(hào)并激發(fā)感情，這個(gè)是在我們進(jìn)化中留下來(lái)的本能。(圖2) 歡樂(lè)腦洞大開(kāi)的彈幕互動(dòng)。(圖3) 幾年前很火的小黃雞對(duì)話APP。(圖4)

3、本我意識(shí)。 為什么海底撈、哈根達(dá)斯、星巴克這么火？為什么那么多老人被保健品公司詐騙，因?yàn)槲覀儠?huì)被產(chǎn)品背后的服務(wù)滿足本我意識(shí)的心理需要。這種需要也許是虛榮心、空虛、渴望被關(guān)心等。關(guān)鍵字：VIP、定制化/個(gè)性化、虛擬身份/頭銜、標(biāo)簽、粉絲、專屬紀(jì)念日

除此之外，還有很多方法去成就一個(gè)更好的產(chǎn)品。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)