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

今天我們來聊聊

從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)境：無線wifi高速網(wǎng)絡(luò)和4G

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

前言

(↑圖-1來源于@Yjjj)

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

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

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

目錄

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

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

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

三、界面(GUI)

四、動效的重要性

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

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

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

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

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

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

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

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

●  衍生問題：什么是原生？（稍后會解答）

1、總體的樣式

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

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

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

3、導(dǎo)航

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

4、通用元素

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

5、排版

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

6、按鈕樣式

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

7、動作表單

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

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

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

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

8、分類控制

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

9、彈出框

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

10、icon

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

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

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

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

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

11、通用 UI 控制

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

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

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

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

增加熟悉感

不言而喻

無需思考就能操作

增加信任度

規(guī)范

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

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

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

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

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

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

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

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

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

解決辦法1：

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

解決辦法2：

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

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

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

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

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

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

17、私信頁

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

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

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

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

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

美騎+安卓版

 

 

京東安卓版

 

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

雖然原生的設(shè)計(jì)有很多優(yōu)點(diǎn)。但是，Android和iOS的原生規(guī)范并不是絕對唯一的標(biāo)準(zhǔn)，還是需要結(jié)合實(shí)際界面內(nè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í)代后，大家需要考慮繼承性問題。很多原先就采用 iOS UI 的應(yīng)用干脆就直接繼續(xù)采用 iOS UI 了。

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

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

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

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

“微信的頭幾個(gè)android版本，是單獨(dú)做了一套符合android規(guī)范的UI的。但是幾個(gè)版本下來，很難讓我們自己覺得滿意。android的UI規(guī)范， 確實(shí)稍嫌混亂，各種app也都是大膽自己發(fā)揮。我們自認(rèn)為以我們現(xiàn)有的UI人手，專門針對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ū)動設(shè)計(jì)

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

2.“神奇的界面”

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

3.實(shí)用性

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

4.啟示性

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

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

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

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

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

A.點(diǎn)贊過后不會自動消失。 要手動點(diǎn)空白處。

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

C.不可取消贊

D.沒有動效，略顯呆滯

tumblr 不喜歡我 心都碎了呢~

 

第一次贊，顯示+1 ；第二次贊，顯示已贊過

 

 

原生與H5的交互

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

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

三、界面

配色

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

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

注冊頁

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

登陸頁

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

注冊頁門檻

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

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

品牌形象的植入

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

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

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

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

按鈕

頂部按鈕會不會太擠？

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

話題頁 – 時(shí)間

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

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

展示頁

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

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

需要展示：

1.用戶喜歡的

2.主要任務(wù)的

3.可以賺錢的

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

展示頁 – 用戶喜歡的

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

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

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

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

為什么用戶要用美騎APP?

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

所以我們就要通過其他方式來彌補(bǔ)

1. 拍照搜車

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

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

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

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

列表頁

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

找尋的方法：

1.排序

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

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

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

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

3.搜索

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

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

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

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

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

列表頁 – 搜索

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

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

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

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

正文頁

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

布局排版

正文頁

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

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

 

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

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

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

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

 

歡迎頁

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

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

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

美騎APP引導(dǎo)頁

↑ 自動輪播（自動翻頁）

↑ 可拖動的長圖片

↑ 視頻

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

 

加載頁

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

四、動效

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

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

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

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

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

3、愉快的提示功能

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

減弱不可避免的不適感

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

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

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

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

美騎+ 加載頁

 

不易被察覺的動效

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

1.默默增加反

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

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

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

最后，千萬不要犧牲了用戶寶貴的時(shí)間用來看毫無目的的動效。

豆瓣刷新動畫

（后來發(fā)現(xiàn)支付寶也做了一樣的動畫）

其實(shí)美騎APP第一版的時(shí)候，是有做動效的，后來由于沒寫JS腳本，就沒有了動畫效果。

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

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

動效輔助交互 隱藏、翻頁、力量、層級意識…

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

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

里面很多動畫都很酷炫還有各種不同的交互方式。

五、用戶體驗(yàn)

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

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

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

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

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

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

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

【框架層】

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

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

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

【表現(xiàn)層】

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

目標(biāo)人群分析

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

用戶畫像

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

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

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

第一眼印象太重要了！

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

1、首次使用： 首次開啟 App

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

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

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

1.教學(xué)與幫助

2.讓使用者開心

3.激勵使用者行動

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

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

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

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

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

2、讓使用者開心

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

3.激勵使用者行動

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

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

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

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

看用戶對網(wǎng)易云音樂的評價(jià)。

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

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

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

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

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

表現(xiàn)手法

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)