如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

今天我們來聊聊

從UI角度體驗與分析美騎APP

---

體驗環境

體驗人：某UI設計師

體驗時間：2016.11.1-12.15 (間歇)

體驗產品：美騎APP

產品版本：v3.7.0.1

體驗設備：iPhone6 Plus

系統版本：iOS10.1.1（14B100）

網絡環境：無線wifi高速網絡和4G

*本文屬于基礎體驗，高手請忽略。

前言

(↑圖-1來源于@Yjjj)

1、這是一個非大型團隊合作的正確步驟，顯然我們通常只能做到1、4、5，這樣會導致產品缺乏客觀性。

2、一個好的APP應該注意以下幾點：

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

目錄

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

一、在Android與iOS系統上，美騎+交互和界面的設計區別

二、交互設計(IXD) Interaction design,區別于工業設計,加了個”X”。

三、界面(GUI)

四、動效的重要性

五、用戶體驗(UED/UXD) 我認為更多強調研究人與機器的關系的藝術。

完整的頁面設計應該包含“內容設計”與“人機交互”兩個部分。

一、在Android與iOS系統上，美騎+交互和界面的設計區別

在設計開始之前

●  了解另外一種系統 我3年前用Android，之后一直使用 iPhone，所以我現在對 iOS 上的 UI 樣式有更多的了解。在進行跨平臺設計的時候，我首先去做的一件事是了解另外一個系統（Android）

●  選擇一個優先的平臺 由于我們一次要對兩個平臺進行設計，在時間有限的情況下，必須有一個平臺需要優先設計。如何選擇優先的平臺并不在于個人喜好，而是在于這款 app 的市場定位如何。產品的市場中有更多人使用 Android 設備嗎？目標受眾是誰等等。美騎+的UI選了iOS系統做優先設計。

●  了解設計規范 閱讀 iOS 和 Android 的設計規范。

什么時候應當做出區別以及什么時候兩個平臺應當保持一致 （遵循這些步驟，美騎+就能同時在 iOS 和 Android 保持原生完美！）

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

1、總體的樣式

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

2、實體按鈕 / 虛擬控制欄

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

3、導航

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

4、通用元素

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

5、排版

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

6、按鈕樣式

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

7、動作表單

(1) iOS 和 Android 原生設計的動作表單都是出現在屏幕的底部，然后在主要內容上罩上一層陰影。然而，它們的不同在于陰影深度和其他細節。 Android 在動作表單上加了一層厚重的陰影，表明它是脫離于原先的內容的。 iOS 的動作表單沒有陰影，僅僅是在原先的背景上防止了一個有一定透明度的灰色圖案。 下拉按鈕只存在于Android 上，它允許用戶快速選擇功能。 而美騎+在Android上的部分動作表單已經靈活地變為居中顯示。

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

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

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

8、分類控制

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

9、彈出框

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

10、icon

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

【建議】iOS底部導航欄改成實心

1. 線條的圖標會導致用戶花費更多的時間來分析圖標信息（圖1）

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

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

11、通用 UI 控制

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

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

12、原生APP設計的優點

按照原生的不容易出現bug

增加熟悉感

不言而喻

無需思考就能操作

增加信任度

規范

實用性強 ……

13、Android的收藏流程比iOS復雜

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

14、Android的點贊流程比iOS復雜

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

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

2、點擊用戶頭像是進入評論區，而不是他的資料。

15、Android的菜單層級關系流程比iOS復雜

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

解決辦法1：

去除用戶不再需要的元素 隨著用戶的操作，有的內容已經是用戶不再關注的。這時候可以將他們隱藏起來，實現半沉浸式體驗。

解決辦法2：

把二級和三級菜單合并到一起，內容一目了然。

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

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

16、Android的退出流程比iOS復雜

先看看美騎+退出賬號的交互設計。

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

17、私信頁

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

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

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

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

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

美騎+安卓版

 

 

京東安卓版

 

結論：原生設計不是唯一標準

雖然原生的設計有很多優點。但是，Android和iOS的原生規范并不是絕對唯一的標準，還是需要結合實際界面內容來判斷設計。

為什么大多數UI都不遵循設計規范？

1. 在 4.0 之前，Android 標準風格的 UI 非常糟糕，大家只能直接從 iOS 上學習借鑒。

2. 進入 Android 4.X 時代后，大家需要考慮繼承性問題。很多原先就采用 iOS UI 的應用干脆就直接繼續采用 iOS UI 了。

3. 想要樹立品牌，采用與標準風格不同的 UI 是很搶眼的。

4. 認為自己的 UI 風格能夠 “ 超越規范 ”。諸如 Facebook 、Flipboard和 Pinterest 的確使用了一種略微偏離視覺規范的設計風格。

為什么QQ和微信的UI設計都不遵循Material Design（安卓）規范？

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

“微信的頭幾個android版本，是單獨做了一套符合android規范的UI的。但是幾個版本下來，很難讓我們自己覺得滿意。android的UI規范， 確實稍嫌混亂，各種app也都是大膽自己發揮。我們自認為以我們現有的UI人手，專門針對android做一套令我們自己滿意的UI，而且還要跟上iOS 版本的快速迭代節奏，很困難，所以才決定直接移植iOS的微信UI。”－－ allenzhang（現任騰訊副總裁，騰訊廣州研發部總經理，微信、QQ郵箱產品經理）

二、補充2個系統相同的交互設計

1.目標驅動設計

在交互設計里，用戶本身是個制約因素。將用戶研究增加到這個方程式中，設定清晰的用戶目標，以使形式和功能完美結合。

2.“神奇的界面”

理想狀態下界面UI設計：它們不會花很長時間來加載或回應；它們不會讓用戶去思考；它們不會給用戶增加煩惱。就像Jason Fried，37 Signal的CEO說的：“少就是少。”只給用戶他們需要的，不要設計過多無謂的東西，也不要在交互設計里做更多無聊的步驟。

3.實用性

實用性是指人們用一個工具來完成一個特定目標的難易程度。

4.啟示性

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

5.可學習性

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

總而言之，如果手上的設計問題確實需要特殊處理，交互設計師應該花大力氣讓這個界面UI設計易于掌握，或者易于學習。 （這一點需要對當下的設計慣例、啟示性及網絡整體的實用性都非常熟悉。）

話題點贊的流程復雜 當我點擊用戶頭像的時候，我是希望進入他的資料頁面， 結果出來了點贊和評論功能按鈕。

A.點贊過后不會自動消失。 要手動點空白處。

B.可以重復點贊（刷贊）

C.不可取消贊

D.沒有動效，略顯呆滯

tumblr 不喜歡我 心都碎了呢~

 

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

 

 

原生與H5的交互

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

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

三、界面

配色

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

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

注冊頁

配色風格不一致 違反一致性原則

登陸頁

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

注冊頁門檻

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

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

品牌形象的植入

占位符和缺省頁可以統一風格.加入騎行元素.強化美騎品牌效果

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

保持一致性，包括內部一致性（在不同地方設計是相同的）和外部一致性（在同一個企業的其他產品中，反映類似的設計）。 配色方案和排版，這是品牌目標達成的常用途徑。

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

按鈕

頂部按鈕會不會太擠？

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

話題頁 – 時間

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

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

展示頁

完整的頁面設計應該包含內容設計與人機交互兩個部分

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

需要展示：

1.用戶喜歡的

2.主要任務的

3.可以賺錢的

這部分是吸引用戶的重點，需要優秀的內容+恰當的設計。

展示頁 – 用戶喜歡的

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

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

圖3 用戶自行排序、添加、刪減內容。

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

為什么用戶要用美騎APP?

訪問張先生為什么偏好美騎網PC端：看圖主要就是瀏覽資訊，移動端圖不夠大。…

所以我們就要通過其他方式來彌補

1. 拍照搜車

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

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

4. 關聯通訊錄，看哪個朋友也在玩

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

列表頁

重點是搞清楚用戶找尋的目的

找尋的方法：

1.排序

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

②高關注度信息排序(收藏量/點贊量)

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

2.分類與標簽/篩選

3.搜索

√①關鍵字搜索

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

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

√④告訴用戶有終點（提示沒有搜索內容）

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

列表頁 – 搜索

直接點擊搜索 / 默認按提示搜索 (智能推薦)

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

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

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

正文頁

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

布局排版

正文頁

↑ 美騎+ 文章標題

↑ 對比知乎APP文章標題

 

圖片頁的導航欄

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

↑ 美騎+圖片導航欄

左-知乎APP 導航欄，右-淘寶APP 導航欄

 

歡迎頁

1.功能/服務介紹（最常見，展示自己的優點，產品比較被動）

2.氣氛營造（引導用戶情緒轉換，產品比較主動）

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

美騎APP引導頁

↑ 自動輪播（自動翻頁）

↑ 可拖動的長圖片

↑ 視頻

引導頁還有很多種例如創意提示插畫、攝影圖、互動圖等。

 

加載頁

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

四、動效

動效也是交互設計的一部分 動態設計就像一個人的肢體語言，少了顯得這個人死板，多了則像神經病。 而如何恰到好處地拿捏產品中什么地方需要設計動效、怎么設計動效，這需要從用戶的角度進行感性的認知。例如：需要讓用戶等待的、需要讓用戶快速通過的、需要讓用戶感覺感受的等等。 合理的劃分使產品的“節奏感”更好。 優點：更適合人體動力學，更好互動，形成真正人機交流，主流趨勢！ 缺點：增加工作量，甚至會被程序員打。》>.

加強體驗舒適度

嗯，就是讓用戶更加爽更加爽的用你的產品。 具體表現在：

1、表現層級關系 為了展現層與層的關系，是抽屜，是打開，還是平級切換等等，讓用戶知道這個界面和上一個、下一個的關系。這已經是非常最常見的運用了。

2、與用戶手勢結合，更自然的動畫表現 當用戶手勢操作的時候，讓界面的動態走向更符合手指的運動，從而讓用戶感覺到是自己控制了界面的動向，而不是機械化的跳轉。

3、愉快的提示功能

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

減弱不可避免的不適感

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

2.失敗界面的動效 比如刷新失敗、頁面錯誤、未聯網提示這些。

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

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

美騎+ 加載頁

 

不易被察覺的動效

特意把這一類單獨說一下，由于不容易被發現，普通用戶通常會忽略它們的存在，但很多時候這些小細節讓交互變得更加有趣。

1.默默增加反

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

2.去除用戶不再需要的元素 隨著用戶的操作，有的內容已經是用戶不再關注的。這時候可以將他們隱藏起來。

總的來說動效還是為用戶體驗而服務的，動效設計師尤其要注意交互邏輯，才能讓作品看起來不但動效帥氣逼人而且真正發揮了實際的作用。        

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

豆瓣刷新動畫

（后來發現支付寶也做了一樣的動畫）

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

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

動效和UI的完美結合 Facebook

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

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

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

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

五、用戶體驗

產品設計/用戶體驗 五層構架

1、戰略層對應產品目標，用戶需求。

2、范圍層對應產品的信息和功能點，涉及到產品的側重點和取舍。

3、結構層對應產品的實際落地，產品在這個層面開始具體化。

4、框架層對應產品具體內容的呈現，產品進一步具體化，落實到界面。

5、表現層對應產品的視覺傳達，是產品的美化。

我們暫且僅從“框架層 & 表現層 ”開始分析

【框架層】

界面設計——提供給用戶做某事

導航設計——提供用戶去某個地方的能力

信息設計——把想法傳遞給用戶

【表現層】

視覺設計——不僅是美術，重點是關注用戶的注意力； 不能只考慮個人喜好，要支持各個模塊的區別，要使用戶清楚可用； 與戰略定位保持一致。（用戶需求和目標）

目標人群分析

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

用戶畫像

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

設計師最常忽略的UI頁面狀態：空白狀態（empty state） 頁面

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

第一眼印象太重要了！

什么時候使用者會遭遇 “空白狀態" ?

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

2、發生錯誤：觸發某事件

3、使用者主動清除：當使用者把內容都清空時

設計空白頁面的效益并不僅是美學的提升，它能讓用戶預期接受可能要呈現的內容，也可增加使用者的黏著度，并告知使用者進行某些動作會發生甚么事情。設計 “空白狀態" 頁面，可達到下述三大效益：

1.教學與幫助

2.讓使用者開心

3.激勵使用者行動

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

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

1、提供教學與幫助

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

適當的提示，協助用戶操作。

2、讓使用者開心

若要給使用者好的第一印象，使用性是關鍵但非為一，產品所呈現的 “品牌個性” 更是重要。假使我能讓 “空白狀態” 的頁面看起來與其它競爭對手不同，其實也代表著我向用戶證明 “產品體驗同樣也具獨特性"！ 而我們的目標就是設計出令人愉悅驚喜的界面。

3.激勵使用者行動

一個成功的設計會把 “特殊功能" 或 “特色" 的信息，在此頁面告知給使用者，并且導引他們去做出我們預期的動作。 鼓勵使用者使用：利用適當并帶激勵作用的用詞或設計，如 “學習更多" 或 “讓我們開始吧！“ 說服使用者使用：提醒用戶他們使用你的產品能帶來的效益。

引導使用者脫離“空白狀態”，進行有意義的行為。

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

情感化設計

看用戶對網易云音樂的評價。

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

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

還記得之前App Store有個很火的游戲叫“lifeline”嗎，所表達的目的也是大同小異的。

加入人性化設計，讓產品釋放正能量，頁面不再冷冰冰。 “在互聯網產品設計中一定會涉及到兩個詞：‘用戶價值’和‘用戶體驗’。一個產品，首先是能用，然后是好用，最后還能帶來身心愉悅的感覺。用戶價值意味著滿足了“能用”的需求，而用戶體驗則由后面兩個環節決定，帶給用戶“好用”和“還想用”的體驗。” ——產品經理Nairo

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

表現手法

1、挑逗本能。 簡而言之就是好看。 “我覺得它看上去不錯。”這是一個非理性的心理狀態，也說明了賞心悅目和感官層面愉悅的設計非常重要。 關鍵字：漂亮

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

2、社會互動。 比如現在的直播，包括評論、點贊、分享等等，都是有關社會化互動的一些情感需求的體現。我們適當地強化美騎+中這樣的功能，會提升用戶對這種社交需求上的一些感受。 關鍵字：表達與傾訴、交流與互動、群體歸屬、關注/粉絲、跟風（熱門）

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

3、本我意識。 為什么海底撈、哈根達斯、星巴克這么火？為什么那么多老人被保健品公司詐騙，因為我們會被產品背后的服務滿足本我意識的心理需要。這種需要也許是虛榮心、空虛、渴望被關心等。關鍵字：VIP、定制化/個性化、虛擬身份/頭銜、標簽、粉絲、專屬紀念日

除此之外，還有很多方法去成就一個更好的產品。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務