2017-4-5 用心設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(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),高手請(qǐng)忽略。
前言
(↑圖-1來源于@Yjjj)
1、這是一個(gè)非大型團(tuán)隊(duì)合作的正確步驟,顯然我們通常只能做到1、4、5,這樣會(huì)導(dǎo)致產(chǎn)品缺乏客觀性。
2、一個(gè)好的APP應(yīng)該注意以下幾點(diǎn):
用戶反饋(沒有用戶反饋的APP純粹是自編自導(dǎo)自演自己觀看)、剛需、人性化設(shè)計(jì)、取舍、產(chǎn)品識(shí)別度 、設(shè)計(jì)為使用者服務(wù)、以用戶的角度去設(shè)計(jì)、層次關(guān)系要明確、操作時(shí)無需思考、簡(jiǎn)單自然、打算解決什么問題、溝通 協(xié)調(diào)、給用戶制造驚喜、設(shè)計(jì)趨勢(shì)、好用、易用、奠定盈利基礎(chǔ)、痛點(diǎn)、體驗(yàn)、高頻、清晰的商業(yè)模式……
目錄
站在交互設(shè)計(jì)師(IXD)、視覺設(shè)計(jì)師(GUI)、用戶體驗(yàn)師(UED/UXD)和動(dòng)效設(shè)計(jì)師、用戶(User) 的角度分析問題。
一、在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ù)。
完整的頁面設(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)在對(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)受眾是誰等等。美騎+的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>
● 衍生問題:什么是原生?(稍后會(huì)解答)
1、總體的樣式
從 iOS7 以后,蘋果就一直采用扁平化的設(shè)計(jì)模式,去除了所有不必要的紋理和陰影等效果。 Google 的新 MD 設(shè)計(jì)規(guī)范有了一些更加細(xì)節(jié)的規(guī)定,通過一種叫“紙片”的方法來創(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 來替換首頁標(biāo)題欄中的文字,但是在 Android 設(shè)備上這不是一個(gè)好的主意。
5、排版
Android 的 MD 設(shè)計(jì)中字體大小的變化會(huì)更加多樣。 在 iOS 上,字體沒那么多大小差異,但是在字體重量上有更多的變化。 兩個(gè)平臺(tái)都使用比較細(xì)的字體來現(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)的有邊框的按鈕,陰影厚重明顯,將它們從頁面上分離出來,它會(huì)創(chuàng)建一層視覺深度。這種按鈕的填充顏色一般使用 App 的主色。 iOS App 在外觀上是完全扁平化的,沒有層級(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)作表單沒有陰影,僅僅是在原先的背景上防止了一個(gè)有一定透明度的灰色圖案。 下拉按鈕只存在于Android 上,它允許用戶快速選擇功能。 而美騎+在Android上的部分動(dòng)作表單已經(jīng)靈活地變?yōu)榫又酗@示。
(2) 像特定的一些數(shù)據(jù)的輸入,比如日期和時(shí)間,Android 的原生對(duì)話框像警告彈出框。iOS會(huì)在屏幕的底部彈出一個(gè)轉(zhuǎn)輪讓用戶進(jìn)行選擇。 美騎+文章的翻頁功能很靈活地運(yùn)用了這個(gè)動(dòng)作。
(3) 話題頁面“更多”與“分享”動(dòng)作的區(qū)別。 Android把所有子功能并集到“更多”里,增加了一層交互關(guān)系。 iOS則把分享和“更多”分開,減少了一層交互關(guān)系。
淘寶APP 會(huì)根據(jù)上下滑動(dòng)而變化的按鈕(在花哨的背景下會(huì)疊加一個(gè)半透明圓形)
8、分類控制
在不同的平臺(tái)上,該控件的交互方式是相同的, 但是在視覺上有著顯著差異。 在 iOS 上,分類控制控件的外觀像按鈕。 而在 Android 上,通過間距來展現(xiàn)它們的分離關(guān)系,同時(shí)用下劃線來標(biāo)明目前所處的位置。
9、彈出框
美騎+正確地處理了彈出框控件,他們也許會(huì)涉及到一些很重要的操作,例如注冊(cè),確認(rèn)條款,甚至是確認(rèn)支付。我們需要讓他們看起來是原生的,以便產(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í)間來分析圖標(biāo)信息(圖1)
2. 細(xì)條圖標(biāo)風(fēng)格偏向于女性化、文藝小清新、可愛類型。(圖1) 而美騎+圖文量大,倘若icon是細(xì)線,辨識(shí)度降低。
3. 我們可以做成normal時(shí)空心, Active時(shí)實(shí)心。(圖3.圖4.圖5)
11、通用 UI 控制
復(fù)選框,單選框和輸入框,以及開關(guān)都是應(yīng)該有著原生感覺。這樣能夠給用戶帶來熟悉感,自然知道如何使用美騎+,并且在涉及到敏感信息的時(shí)候能夠更信任美騎+。
(在右面的例子中,我們可以看到兩個(gè)平臺(tái)上的差異其實(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í)際上可以簡(jiǎn)化為1步。(iOS) 且安卓還是舊開關(guān)按鈕形式,沒有動(dòng)效反饋。
14、Android的點(diǎn)贊流程比iOS復(fù)雜
1、在安卓上點(diǎn)贊這條評(píng)論需要2步。 實(shí)際上可以簡(jiǎn)化為1步。(iOS) 安卓和iOS均沒有動(dòng)效反饋。
(就像我問小明:“我想再給你一百塊!”或者“我想拿回剛給你的一百塊。” 而小明卻像木頭一樣毫無反應(yīng),害得我尷尬癌都要犯了。)
2、點(diǎn)擊用戶頭像是進(jìn)入評(píng)論區(qū),而不是他的資料。
15、Android的菜單層級(jí)關(guān)系流程比iOS復(fù)雜
Android的菜單對(duì)于初級(jí)使用者來說層級(jí)不明顯。 很難迅速分清哪個(gè)是父級(jí)哪個(gè)是子級(jí)。 這就好比,IOS一張圖就能說清楚的事情, Android要用三張圖才能“摸索”清楚, 增添了用戶學(xué)習(xí)與理解的時(shí)間成本。
解決辦法1:
去除用戶不再需要的元素 隨著用戶的操作,有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時(shí)候可以將他們隱藏起來,實(shí)現(xiàn)半沉浸式體驗(yàn)。
解決辦法2:
把二級(jí)和三級(jí)菜單合并到一起,內(nèi)容一目了然。
簡(jiǎn)化層級(jí)關(guān)系,讓用戶選擇自己關(guān)心的話題。 可自行排序菜單。
舉個(gè)例子: 原來超市里有7排貨架,每排貨架只有一層商品,你要繞七圈才能看完。 (APP沒有愛好預(yù)設(shè),分類繁瑣) 改革后,大家都網(wǎng)購(gòu),所有商品根據(jù)你的愛好預(yù)設(shè)全部展示出來。并且可以收藏自己喜歡的商品(APP導(dǎo)航自定義排序),以后方便查看和購(gòu)買。愛好還可以添加和刪除。 (這種“普遍的導(dǎo)航設(shè)計(jì)”有一個(gè)優(yōu)點(diǎn),就是方便,實(shí)用性高,用戶不用思考就知道怎么操作。交互可以向主流靠攏,但樹立產(chǎn)品識(shí)別度可以在風(fēng)格、人性化或動(dòng)效上體現(xiàn)。)
16、Android的退出流程比iOS復(fù)雜
先看看美騎+退出賬號(hào)的交互設(shè)計(jì)。
大多數(shù)APP的”退出登錄”功能都在設(shè)置里,會(huì)形成用戶使用習(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是隱藏的,要向上拉↑才會(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)(看得見比看不見)更具可控性。 另外“分享”按鈕也是顯而易見。
美騎+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)容來判斷設(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。騰訊會(huì)優(yōu)先在iOS上先做新功能,做的過程中會(huì)有很多的UI上的反復(fù)修改,很耗時(shí)。 而android版本只需要移植,使得跟進(jìn)速度非???。
“微信的頭幾個(gè)android版本,是單獨(dú)做了一套符合android規(guī)范的UI的。但是幾個(gè)版本下來,很難讓我們自己覺得滿意。android的UI規(guī)范, 確實(shí)稍嫌混亂,各種app也都是大膽自己發(fā)揮。我們自認(rèn)為以我們現(xiàn)有的UI人手,專門針對(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í)間來加載或回應(yīng);它們不會(huì)讓用戶去思考;它們不會(huì)給用戶增加煩惱。就像Jason Fried,37 Signal的CEO說的:“少就是少。”只給用戶他們需要的,不要設(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í)慣按按鈕提交表格,在這種情況下,他們就會(huì)去尋找按鈕。優(yōu)秀的交互設(shè)計(jì)師不會(huì)重新發(fā)明一些東西。相反,他們會(huì)利用已有的設(shè)計(jì)增加熟悉感。網(wǎng)上很多交互設(shè)計(jì)都記錄在Yahoo!的設(shè)計(jì)庫中。
總而言之,如果手上的設(shè)計(jì)問題確實(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)入他的資料頁面, 結(jié)果出來了點(diǎn)贊和評(píng)論功能按鈕。
A.點(diǎn)贊過后不會(huì)自動(dòng)消失。 要手動(dòng)點(diǎn)空白處。
B.可以重復(fù)點(diǎn)贊(刷贊)
C.不可取消贊
D.沒有動(dòng)效,略顯呆滯
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)擊左上角的返回按鈕,會(huì)直接返回到我們的原生頁面或者只返回上一級(jí)頁面;是不是給用戶的體驗(yàn)很不好?
此時(shí)我們想要重新定制返回按鈕,先判斷當(dāng)前的H5頁面是否可以返回。我覺得看圖更容易說清楚。
三、界面
配色
1. 配色小清新(飽和度低),不符合用戶群體和公司品牌調(diào)性。 (騎行用戶中97.26%為男性,配色應(yīng)當(dāng)年輕化并且充滿男性荷爾蒙)
2. 對(duì)比下圖的APP,風(fēng)格強(qiáng)烈,辨識(shí)度高。 (但這種適合功能和內(nèi)容較簡(jiǎn)潔的APP,而資訊類APP都大同小異)
注冊(cè)頁
配色風(fēng)格不一致 違反一致性原則
登陸頁
簡(jiǎn)單粗暴的“跳過”?! 家具定制、服裝定制、電商定制……在這個(gè)人人都要【定制】的時(shí)代,我們也需要在設(shè)計(jì)上體現(xiàn)人性化。
注冊(cè)頁門檻
1.美騎+啟動(dòng)后直接顯示首頁,要點(diǎn)擊“我的”才能注冊(cè)或登錄。
2.對(duì)比花椒直播和網(wǎng)易云音樂,啟動(dò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)一的品牌識(shí)別形象、跨媒體的一致性, 沒有形成自己的特色和給用戶一個(gè)積極明確的企業(yè)印象。 建議運(yùn)用兔子的形象。(騎友還是挺喜歡美騎兔的)
按鈕
頂部按鈕會(huì)不會(huì)太擠?
考慮一下粗手指的用戶 (例如經(jīng)常打籃球的人手指普通肥大) 稍加創(chuàng)意,“我的”按鈕也能妙趣橫生。
話題頁 – 時(shí)間
1.頁面信息缺日期? 到底需不需要日期? 對(duì)于有時(shí)間需求的用戶來說會(huì)顯得產(chǎn)品不夠體貼,信息傳達(dá)不夠。
2. 或者可以參照iOS原生的信息界面設(shè)計(jì),向左推會(huì)顯示時(shí)間。平常則隱藏。
展示頁
完整的頁面設(shè)計(jì)應(yīng)該包含內(nèi)容設(shè)計(jì)與人機(jī)交互兩個(gè)部分
展示頁的設(shè)計(jì)目的是提高信息被用戶自然吸收的概率,需要個(gè)用戶一個(gè)信號(hào),暗示他接下來可以做哪些事。 “你看這個(gè)姑娘這么美,要不要加個(gè)關(guān)注???或者看看她的動(dòng)態(tài)?” “你看這里好像在搞活動(dòng)啊,要不要戳進(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 用戶主動(dòng)提出反饋。(并且要把反饋的功能極簡(jiǎn)化。APP默認(rèn)打開反饋功能,用戶不經(jīng)意間搖動(dòng)手機(jī),就會(huì)彈出反饋頁面,相當(dāng)于我們主動(dòng)引導(dǎo)用戶去反饋。用戶可自行關(guān)閉此功能。) 這樣可以更精準(zhǔn)地篩選出用戶喜歡的內(nèi)容,從而提高留存率。
為什么用戶要用美騎APP?
訪問張先生為什么偏好美騎網(wǎng)PC端:看圖主要就是瀏覽資訊,移動(dòng)端圖不夠大。…
所以我們就要通過其他方式來彌補(bǔ)
1. 拍照搜車
2. 建立游戲機(jī)制(拍照拿紅包、做任務(wù)拿獎(jiǎng)勵(lì)、解鎖更多功能、簽到有積分獎(jiǎng)勵(lì))
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的搜索框會(huì)提醒你可以搜索什么 (輔助搜索)。
圖3:淘寶搜索框還能一鍵搜索,交互極簡(jiǎn)化。 (雖然你可能不想搜榨汁機(jī),但偶爾還是會(huì)被帶偏的,起碼商品點(diǎn)擊率上去了)。
正文頁
標(biāo)題高度概括整篇文章的內(nèi)容(前提),突出標(biāo)題與圖片并弱化其他元素,這是非常的信息傳達(dá)方式。 但是……
布局排版
正文頁
↑ 美騎+ 文章標(biāo)題
↑ 對(duì)比知乎APP文章標(biāo)題
圖片頁的導(dǎo)航欄
在這種大圖瀏覽的模式下, 導(dǎo)航欄自動(dòng)隱藏,界面更簡(jiǎn)潔。 節(jié)約空間展示內(nèi)容。 參照淘寶導(dǎo)航欄與知乎導(dǎo)航欄。
↑ 美騎+圖片導(dǎo)航欄
左-知乎APP 導(dǎo)航欄,右-淘寶APP 導(dǎo)航欄
歡迎頁
1.功能/服務(wù)介紹(最常見,展示自己的優(yōu)點(diǎn),產(chǎn)品比較被動(dòng))
2.氣氛營(yíng)造(引導(dǎo)用戶情緒轉(zhuǎn)換,產(chǎn)品比較主動(dòng))
3.操作手冊(cè)(介紹如何操作) 在打開后通過播放動(dòng)畫的方式來介紹產(chǎn)品或傳遞一種理念,這種方式適用于運(yùn)動(dòng)類應(yīng)用,給人傳達(dá)青春活力、積極樂觀的生活態(tài)度。優(yōu)點(diǎn):直觀,動(dòng)感,生活化。 缺點(diǎn):應(yīng)用較大,視頻播放會(huì)出現(xiàn)卡頓的情況。
美騎APP引導(dǎo)頁
↑ 自動(dòng)輪播(自動(dòng)翻頁)
↑ 可拖動(dòng)的長(zhǎng)圖片
↑ 視頻
引導(dǎo)頁還有很多種例如創(chuàng)意提示插畫、攝影圖、互動(dòng)圖等。
加載頁
用動(dòng)效來優(yōu)化加載頁是很好的辦法, 并且植入美騎品牌形象。
四、動(dòng)效
動(dòng)效也是交互設(shè)計(jì)的一部分 動(dòng)態(tài)設(shè)計(jì)就像一個(gè)人的肢體語言,少了顯得這個(gè)人死板,多了則像神經(jīng)病。 而如何恰到好處地拿捏產(chǎn)品中什么地方需要設(shè)計(jì)動(dòng)效、怎么設(shè)計(jì)動(dòng)效,這需要從用戶的角度進(jìn)行感性的認(rèn)知。例如:需要讓用戶等待的、需要讓用戶快速通過的、需要讓用戶感覺感受的等等。 合理的劃分使產(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)系,是抽屜,是打開,還是平級(jí)切換等等,讓用戶知道這個(gè)界面和上一個(gè)、下一個(gè)的關(guān)系。這已經(jīng)是非常最常見的運(yùn)用了。
2、與用戶手勢(shì)結(jié)合,更自然的動(dòng)畫表現(xiàn) 當(dāng)用戶手勢(shì)操作的時(shí)候,讓界面的動(dòng)態(tài)走向更符合手指的運(yùn)動(dòng),從而讓用戶感覺到是自己控制了界面的動(dòng)向,而不是機(jī)械化的跳轉(zhuǎn)。
3、愉快的提示功能
4、額外增加界面的活力 在用戶預(yù)期之外增加的驚喜,可以是帥氣的,可以是賣萌,總之讓用戶感知到產(chǎn)品的生命力。
減弱不可避免的不適感
1.讓等待變得更愉快 常出現(xiàn)在加載、刷新、發(fā)送等界面中,讓等待變得可視化,甚至不再那么無聊。
2.失敗界面的動(dòng)效 比如刷新失敗、頁面錯(cuò)誤、未聯(lián)網(wǎng)提示這些。
3.增加界面與界面銜接的延續(xù)感 界面的跳轉(zhuǎn)不可以避免,但是如果讓本來分別獨(dú)立的2個(gè)界面或者事件擁有了某種特定的聯(lián)系,可以顯得更加好玩,不再是生硬的跳轉(zhuǎn)。
網(wǎng)易,按下流行元素主題來變化的,比如歐洲杯的時(shí)候,加載就變成了射門的動(dòng)畫游戲。 ——美騎某iOS攻城獅 小羅
美騎+ 加載頁
不易被察覺的動(dòng)效
特意把這一類單獨(dú)說一下,由于不容易被發(fā)現(xiàn),普通用戶通常會(huì)忽略它們的存在,但很多時(shí)候這些小細(xì)節(jié)讓交互變得更加有趣。
1.默默增加反
饋感 為用戶的操作提供有趣的反饋。
2.去除用戶不再需要的元素 隨著用戶的操作,有的內(nèi)容已經(jīng)是用戶不再關(guān)注的。這時(shí)候可以將他們隱藏起來。
總的來說動(dòng)效還是為用戶體驗(yàn)而服務(wù)的,動(dòng)效設(shè)計(jì)師尤其要注意交互邏輯,才能讓作品看起來不但動(dòng)效帥氣逼人而且真正發(fā)揮了實(shí)際的作用。
最后,千萬不要犧牲了用戶寶貴的時(shí)間用來看毫無目的的動(dòng)效。
豆瓣刷新動(dòng)畫
(后來發(fā)現(xiàn)支付寶也做了一樣的動(dòng)畫)
其實(shí)美騎APP第一版的時(shí)候,是有做動(dòng)效的,后來由于沒寫JS腳本,就沒有了動(dòng)畫效果。
(為此我還特地對(duì)比了美騎APP v1.0、美騎APP當(dāng)前版本以及今日頭條APP的動(dòng)效,由于網(wǎng)站不能上傳視頻,這個(gè)部分省略)
動(dòng)效和UI的完美結(jié)合 Facebook
動(dòng)效輔助交互 隱藏、翻頁、力量、層級(jí)意識(shí)…
https://www.youtube.com/watch?v=-uNyXqC0Mpo
https://www.youtube.com/watch?v=Zq6-b9_V9lA
里面很多動(dòng)畫都很酷炫還有各種不同的交互方式。
五、用戶體驗(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è)層面開始具體化。
4、框架層對(duì)應(yīng)產(chǎn)品具體內(nèi)容的呈現(xiàn),產(chǎn)品進(jìn)一步具體化,落實(shí)到界面。
5、表現(xiàn)層對(duì)應(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 平均會(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、首次使用: 首次開啟 App
2、發(fā)生錯(cuò)誤:觸發(fā)某事件
3、使用者主動(dòng)清除:當(dāng)使用者把內(nèi)容都清空時(shí)
設(shè)計(jì)空白頁面的效益并不僅是美學(xué)的提升,它能讓用戶預(yù)期接受可能要呈現(xiàn)的內(nèi)容,也可增加使用者的黏著度,并告知使用者進(jìn)行某些動(dòng)作會(huì)發(fā)生甚么事情。設(shè)計(jì) “空白狀態(tài)" 頁面,可達(dá)到下述三大效益:
1.教學(xué)與幫助
2.讓使用者開心
3.激勵(lì)使用者行動(dòng)
上圖只有結(jié)果,沒有引導(dǎo)下一步操作,就相當(dāng)于老板問你:今天的比賽誰拿冠軍? 你直接說:不知道。 但其實(shí)可以說:我不知道哦,我去問問別人。 我們不但提供結(jié)果,還要努力提供解決方法。 此頁面的設(shè)計(jì)需在 “友善的程度" 與 “幫助的效益" 中取得平衡。
“你就像身處荒島,感到迷失方向且失去聯(lián)系嗎?跟隨我們的建議,保持冷靜,點(diǎn)把取暖的火,并且按下重整試試。”既有結(jié)果,又有引導(dǎo),相比之下比較友好。
1、提供教學(xué)與幫助
在 “空白狀態(tài)” 頁面上可達(dá)成的第一個(gè)效益就是:指導(dǎo)使用者如何使用美騎+。如果他們不懂 如何操作,app 可能就會(huì)被打入冷宮。所以,我應(yīng)該要協(xié)助他們理解下一步要干嘛?或讓他們可期待會(huì)有種事件發(fā)生。
適當(dāng)?shù)奶崾?,協(xié)助用戶操作。
2、讓使用者開心
若要給使用者好的第一印象,使用性是關(guān)鍵但非為一,產(chǎn)品所呈現(xiàn)的 “品牌個(gè)性” 更是重要。假使我能讓 “空白狀態(tài)” 的頁面看起來與其它競(jìng)爭(zhēng)對(duì)手不同,其實(shí)也代表著我向用戶證明 “產(chǎn)品體驗(yàn)同樣也具獨(dú)特性"! 而我們的目標(biāo)就是設(shè)計(jì)出令人愉悅驚喜的界面。
3.激勵(lì)使用者行動(dòng)
一個(gè)成功的設(shè)計(jì)會(huì)把 “特殊功能" 或 “特色" 的信息,在此頁面告知給使用者,并且導(dǎo)引他們?nèi)プ龀鑫覀冾A(yù)期的動(dòng)作。 鼓勵(lì)使用者使用:利用適當(dāng)并帶激勵(lì)作用的用詞或設(shè)計(jì),如 “學(xué)習(xí)更多" 或 “讓我們開始吧!“ 說服使用者使用:提醒用戶他們使用你的產(chǎn)品能帶來的效益。
引導(dǎo)使用者脫離“空白狀態(tài)”,進(jìn)行有意義的行為。
比如我是一個(gè)銷售員,顧客在逛我的店時(shí),我必須微笑,制造愉快活躍的氣氛,真心地推薦適合顧客的商品,給顧客建議,例如說“這是新款,我覺得很適合你,你要試下嗎?”而不是一聲不吭地站一旁,任由顧客自己摸索,最后離開。 假如我是顧客,面對(duì)兩家餐館,我一定會(huì)選有服務(wù)員在門口熱情地招呼我進(jìn)去的那家,這是潛意識(shí)決定的。 所以做好這些細(xì)節(jié)是提高用戶留存率的辦法。
情感化設(shè)計(jì)
看用戶對(duì)網(wǎng)易云音樂的評(píng)價(jià)。
感人嗎? 我們喜歡和人交流,而不是機(jī)器。網(wǎng)易云音樂成功抓住了用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行特定行為(*執(zhí)行特定行為:例如一個(gè)有著明亮色彩的按鈕能夠無意識(shí)地抓住用戶的注意。而隨后的行為可以是任何動(dòng)作,比如點(diǎn)擊按鈕、注冊(cè)內(nèi)部通訊、或進(jìn)行網(wǎng)上購(gòu)買。 )的可能性的設(shè)計(jì)。情感化設(shè)計(jì)是增強(qiáng)用戶體驗(yàn)的一種思路。
我覺網(wǎng)易云音樂是情感化路線的高手,最近他家的評(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)品釋放正能量,頁面不再冷冰冰。 “在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中一定會(huì)涉及到兩個(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)該說哪句話才對(duì)?你希望用戶說的那句話,就是產(chǎn)品的屬性和價(jià)值認(rèn)知在用戶心中是怎樣的。
表現(xiàn)手法
1、挑逗本能。 簡(jiǎn)而言之就是好看。 “我覺得它看上去不錯(cuò)?!边@是一個(gè)非理性的心理狀態(tài),也說明了賞心悅目和感官層面愉悅的設(shè)計(jì)非常重要。 關(guān)鍵字:漂亮
在用戶的角度看: 外觀的美能夠提升用戶內(nèi)心的愉悅度,并且增加對(duì)它出錯(cuò)的包容度,整體來說它會(huì)讓我們的體驗(yàn)得到提升。 如果一個(gè)團(tuán)隊(duì)在產(chǎn)品的設(shè)計(jì)層面很用心打磨,說明這是一個(gè)用心的團(tuán)隊(duì)。一個(gè)用心的團(tuán)隊(duì)的其他方面,比如說技術(shù)質(zhì)量等等就覺得也不會(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)(熱門)
聊天的表情之所以受到大家的追捧,是因?yàn)樗軌虮磉_(dá)出語言、文字所難以傳達(dá)的那些微妙的情感(圖1) 這些家具像不像人?我們覺得它很萌,我們的人腦會(huì)優(yōu)先識(shí)別擬人符號(hào)并激發(fā)感情,這個(gè)是在我們進(jìn)化中留下來的本能。(圖2) 歡樂腦洞大開的彈幕互動(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ì)( m.sillybuy.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com