一、背景
在讀大學(xué)的時(shí)候，就已經(jīng)知道『壹心理』這個(gè)網(wǎng)站了，那時(shí)最喜歡瀏覽的是『心理雜志』版塊。每當(dāng)我情緒低落的時(shí)候，壹心理總能喚醒我內(nèi)心的力量，并且也讓我學(xué)會(huì)了很多相關(guān)的心理學(xué)知識(shí)。所以，我對(duì)壹心理的工作者們是充滿感激的，他們在用自己的方式去影響一些人，同時(shí)也在改變著一些東西。
那時(shí)候，壹心理還沒有手機(jī) APP 客戶端，直到 2015 年終于有了『壹心理』 APP。在用了一段時(shí)間『壹心理』 APP 后，我發(fā)現(xiàn)它有一些地方可以做得更好一些。于是，就有了這次重設(shè)計(jì)『壹心理』 APP 的想法與行動(dòng)。
二、產(chǎn)品結(jié)構(gòu)
1、網(wǎng)站內(nèi)容結(jié)構(gòu)
那么，壹心理是做什么的？
壹心理致力于打造一個(gè)心理學(xué)平臺(tái)，聚集國內(nèi)新銳心理學(xué)人，輸出健康、科學(xué)的心理學(xué)價(jià)值。
具體的表現(xiàn)形式為：
心理雜志——為大眾提供國內(nèi)最新、最優(yōu)質(zhì)的心理學(xué)資訊
心理電臺(tái)——為大眾提供最溫暖的治愈系心理 FM 節(jié)目
心理測試——為大眾及組織提供趣味實(shí)用或?qū)I(yè)的測試
心理咨詢——連接大眾和心理咨詢師，提供在線解決方案
EAP 服務(wù)——為企業(yè)提供基于移動(dòng)互聯(lián)網(wǎng)的員工心理幫助
其中，心理電臺(tái)、心理測試在移動(dòng)端已經(jīng)有獨(dú)立的『心理 FM』、『口袋心理測試』 APP 作為載體，所以在『壹心理』APP 設(shè)計(jì)上要合理安排內(nèi)容的呈現(xiàn)。
2、『壹心理』 APP 產(chǎn)品結(jié)構(gòu)
『壹心理』 APP 的產(chǎn)品結(jié)構(gòu)，主要分為發(fā)現(xiàn)、心事、日報(bào)、我的、會(huì)話五個(gè)部分。
原客戶端是把“心事”分為“免費(fèi)求助”和“專業(yè)求助”，我覺得這樣的設(shè)計(jì)或許并不是太好。“免費(fèi)求助”的本質(zhì)是傾訴心事，里面匯集了各種各樣的心聲，在某種程度上可以理解為“吐苦水”。此外，把“免費(fèi)求助”作為心事傾訴的入口，也顯得有些不太妥當(dāng)。因?yàn)椋脩粼趦A訴心事之前就已經(jīng)被貼上“求助”的標(biāo)簽，暗示用戶作為一個(gè)“受害者”的身份去進(jìn)行敘說。
再結(jié)合壹心理在 App Store 中對(duì)特色功能的描述：
專業(yè)貼心：5000位心理咨詢師進(jìn)駐，為來訪者提供專業(yè)貼心的心理輕問診，有需要的話還可以通過免費(fèi)語音預(yù)約服務(wù)于咨詢師一對(duì)一解答心事。
助人自助：Self-help，每一位來訪者在上面都可以為需要的人提供真正的幫助和建議，成為主人達(dá)人，在助己的同時(shí)，陪伴更多需要幫助的人。
心理日報(bào)：每天在上面見一些人，看到一些故事，學(xué)到一些新鮮、有趣、實(shí)用的心理成長知識(shí)和技能，在這里，心靈每天都能夠得到成長。
在結(jié)合開頭的第一句：壹心理——來訪者心事的出口，咨詢師的成長階梯。
所以，有必要給予“專業(yè)求助”足夠的重視，于是我決定進(jìn)行以下的修改：
- 去掉“免費(fèi)求助”，把“心事”和“專業(yè)求助（專業(yè)咨詢）”分開成為獨(dú)立的入口。
- 把“會(huì)話”統(tǒng)一歸并到“我的”入口里面。
三、UI/UX 設(shè)計(jì)
1、顏色/背景修改
這里，主要對(duì)『壹心理』 APP 的配色進(jìn)行了小修改。狀態(tài)欄和導(dǎo)航欄的顏色改成了和網(wǎng)站一致的藍(lán)色，標(biāo)簽欄的觸摸按鈕的由描邊上色改為輪廓填充，這樣在視覺體驗(yàn)上也變得更加友好。
2、“發(fā)現(xiàn)”界面
“發(fā)現(xiàn)”界面主要有三種類型的內(nèi)容構(gòu)成，分別是：文章閱讀、每日一測、活躍咨詢師/活躍用戶，通過卡片作為載體來呈現(xiàn)內(nèi)容。
在“文章閱讀”這一塊，原應(yīng)用的設(shè)計(jì)是文章標(biāo)題和文章摘要放置在圖片之下。這樣設(shè)計(jì)的好處是圖片和文字呈現(xiàn)得很清晰，壞處是信息的層級(jí)、邏輯關(guān)系有些混亂。因?yàn)轫撁鏇]有足夠的空間去完整地展示兩種不同的信息（文章閱讀、每日一測），用戶不能很好的去分辨頁面中信息的從屬關(guān)系，甚至有時(shí)候容易導(dǎo)致對(duì)象歸屬混亂的問題。
所以，我嘗試把“文章閱讀”的圖片和文字整合起來，在圖片下半部分疊加一個(gè)黑色透明漸變，然后再把文字呈現(xiàn)在此之上。這樣，圖片和文字的層級(jí)、邏輯關(guān)系就變得很清晰了，同時(shí)也使得屏幕有足夠的空間去完整的展示兩種不同類型的信息。
空間有了，但“文章閱讀”和“每日一測”的呈現(xiàn)方式太過相似，并且“每日一測”的空間利用率也較低。所以，我繼續(xù)嘗試對(duì)“每日一測”進(jìn)行改進(jìn)：
把“每日一測”以縱向排列方式放置到卡片左側(cè)，并且配上條形品牌藍(lán)色以突出其辨識(shí)度，然后砍掉“每日一測”原來位置的留白。
點(diǎn)擊進(jìn)入“每日一測”界面時(shí)，發(fā)現(xiàn)頁面取消了導(dǎo)航欄的設(shè)計(jì)，“返回”按鈕位于屏幕底部的工具欄中。同時(shí)，初次進(jìn)入“每日一測”界面時(shí)，頁面下半部分還會(huì)顯示其他用戶的評(píng)論內(nèi)容。
這個(gè)設(shè)計(jì)讓人感到困惑，用戶還沒有進(jìn)行心理測試，也還不知道測試的結(jié)果，此時(shí)顯示其他用戶的評(píng)論內(nèi)容的意義是什么？而且，在用戶完成心理測試后，評(píng)論內(nèi)容與測試結(jié)果會(huì)再次出現(xiàn)，當(dāng)然這也是比較合理的方案。所以，我嘗試對(duì)“每日一測”的界面進(jìn)行修改：
- 恢復(fù)頂部導(dǎo)航欄的設(shè)計(jì)，“返回”鍵位于導(dǎo)航欄左側(cè)；
- 取消屏幕底部的工具欄，取消頁面評(píng)論區(qū)域的內(nèi)容；
- 增大“開始測試”按鈕的面積，并將其位置與測試摘要區(qū)別開來；
3、“心事”界面
前面說到，“免費(fèi)求助（心事）”與“專業(yè)求助（專業(yè)咨詢）”成為獨(dú)立的入口。所以，“心事”界面就變成純粹的心事瀏覽頁面。
- 去掉“專業(yè)求助”入口；
- “免費(fèi)求助”變?yōu)閷?dǎo)航欄右側(cè)的“寫心事”圖標(biāo)按鈕；
- 用快速掃描列表代替卡片式布局，因?yàn)橥惽也僮骱唵蔚膬?nèi)容使用卡片會(huì)分散用戶的注意力，難以做到快速掃描和瀏覽。
4、“專業(yè)咨詢”界面
在這里，我嘗試把“專業(yè)求助”改為“專業(yè)咨詢”，轉(zhuǎn)變用戶的身份與標(biāo)簽，讓用戶抱著嘗試去了解的心態(tài)去面對(duì)咨詢師。
把“專業(yè)咨詢”作為單獨(dú)的入口，可以避免用戶“沉迷”于“心事”中而忘記了“專業(yè)咨詢”這件事，同時(shí)可能也使得用戶與咨詢師之間的互動(dòng)率得到提高。
5、日報(bào)界面
主界面導(dǎo)航
日報(bào)界面原來是“漢堡菜單”的導(dǎo)航設(shè)計(jì)，它的好處與壞處都同樣明顯。好處是節(jié)約了屏幕空間，讓用戶聚焦在主頁面的內(nèi)容中；壞處是“漢堡菜單”的條目可見性差并且操作相對(duì)繁瑣，在 iOS 上的表現(xiàn)更是如此。考慮到日報(bào)僅僅是展示不同類型的條目，而條目之間也不需要進(jìn)行交叉導(dǎo)航。所以，我嘗試做出以下的修改：
把側(cè)邊導(dǎo)航（漢堡菜單）改為滑動(dòng)標(biāo)簽導(dǎo)航。
這樣的改進(jìn)，使得條目的可見性更加友好，也使得用戶產(chǎn)生更多的點(diǎn)擊欲望。
“時(shí)間標(biāo)簽”
還有一個(gè)細(xì)節(jié)，關(guān)于“時(shí)間標(biāo)簽”的位置提示。原來的時(shí)間標(biāo)簽提示的位置是跟隨頁面滑動(dòng)而發(fā)生變化，當(dāng)滑到底部待加載完更多內(nèi)容時(shí)，時(shí)間標(biāo)簽會(huì)突然往上跑。這種體驗(yàn)不夠友好，而且屏幕內(nèi)容的滑動(dòng)方向與時(shí)間標(biāo)簽的運(yùn)動(dòng)方向相反，會(huì)大大增加分散用戶注意力的風(fēng)險(xiǎn)。所以，我嘗試做了以下修改：
將時(shí)間標(biāo)簽位置固定在滑動(dòng)標(biāo)簽欄的右下方。
這樣，用戶在瀏覽內(nèi)容的時(shí)候，就會(huì)潛意識(shí)的認(rèn)為在時(shí)間標(biāo)簽下方的內(nèi)容都屬于時(shí)間標(biāo)簽的時(shí)間范圍內(nèi)，從而減少了用戶的認(rèn)知壓力。
閱讀界面導(dǎo)航
點(diǎn)擊列表進(jìn)入到詳細(xì)內(nèi)容后，原應(yīng)用的設(shè)計(jì)是導(dǎo)航欄消失，狀態(tài)欄變透明，“返回”鍵位于底部的標(biāo)簽欄。當(dāng)進(jìn)行上滑操作時(shí)，底部的工具欄隱藏，整個(gè)頁面就只剩下透明的狀態(tài)欄。是的，所以你會(huì)看到狀態(tài)欄上的文字與頁面的文字會(huì)相互重疊，從而形成一種非常不好的視覺體驗(yàn)。
對(duì)于這種情況，iOS 設(shè)計(jì)規(guī)范中已有相應(yīng)的規(guī)定：
Prevent scrolling content from showing through the status bar.
As users scroll, you don’t want them to see a confusing mix of app content and status bar items in the status bar area. To give users the impression of spaciousness while still ensuring maximum readability, make sure the status bar has a background that obscures the content behind it.
不要讓滾動(dòng)的內(nèi)容在通過狀態(tài)欄時(shí)顯示。
當(dāng)用戶滾動(dòng)屏幕內(nèi)容時(shí)，你不希望在狀態(tài)欄區(qū)域看到應(yīng)用的內(nèi)容和狀態(tài)欄項(xiàng)目形成一個(gè)令人困惑的混合。為了使用戶依然擁有屏幕最大可讀性的空間感，需確保狀態(tài)欄后面有一個(gè)背景來遮蓋其背后的內(nèi)容。
另一方面，導(dǎo)航在 iOS 中有著非常重要的意義，不應(yīng)盲目的追求屏幕空間的最大化利用。事實(shí)上， iOS 設(shè)計(jì)規(guī)范中也明確提到要慎重對(duì)待隱藏狀態(tài)欄以及全屏式的沉浸瀏覽體驗(yàn)。
所以，我嘗試做了以下修改：
- 恢復(fù)導(dǎo)航欄，“返回”鍵位于導(dǎo)航欄左側(cè)，右側(cè)放置切換上/下篇文章的操作按鈕；
- 取消底部操作欄的“返回”按鈕，向上滑動(dòng)屏幕時(shí)保持操作欄處于隱藏狀態(tài)。
這樣，在盡量保留更多屏幕空間的同時(shí)，還可以隨時(shí)保證用戶感知自己此時(shí)在哪里，可以到哪里去。
“評(píng)論”頁面
還有，在文章最后的評(píng)論頁面，原應(yīng)用的設(shè)計(jì)是把評(píng)論作為一個(gè)單獨(dú)的頁面。我嘗試把評(píng)論放在文章正文的底部，這使得用戶在查看評(píng)論與文章內(nèi)容時(shí)思維有著更好的連貫性，因?yàn)樵u(píng)論一旦脫離了文章內(nèi)容也就失去了意義。
6、“我的”界面
在最開始的時(shí)候就提到，把導(dǎo)航欄上的“會(huì)話”圖標(biāo)移到“我的”標(biāo)簽列表中，讓消息、通知有一個(gè)統(tǒng)一呈現(xiàn)的地方。
四、導(dǎo)航的重要性
在 iOS 中，導(dǎo)航的重要性不言而喻，這一點(diǎn)從 iOS 自帶的應(yīng)用就可以看得出來。如日歷、郵件及 App Store 中，它們的導(dǎo)航都是很清晰的。用戶非常清楚自己處于應(yīng)用中的哪個(gè)位置，可以做一些什么，可以到哪里去。所以，你在 iOS 自帶的應(yīng)用中，基本上看不到導(dǎo)航抽屜（漢堡菜單）這種導(dǎo)航方式。
就拿這次的『壹心理』APP 重設(shè)計(jì)來說，當(dāng)用戶從“發(fā)現(xiàn)”進(jìn)入一篇文章與從“日報(bào)”進(jìn)入一篇文章，導(dǎo)航欄的呈現(xiàn)是不一樣的。原應(yīng)用的設(shè)計(jì)是在左下角顯示“返回”鍵，但并沒有表明返回到哪里去。所以，在重設(shè)計(jì)壹心理時(shí)，我就嘗試恢復(fù)導(dǎo)航欄，并且常駐在屏幕頂部，“返回”鍵旁邊加上相對(duì)應(yīng)的文字，讓用戶隨時(shí)知道他們可以返回到哪里。
還有，在這次的『壹心理』APP 重設(shè)計(jì)中，我嘗試把“返回”鍵統(tǒng)一放置在頂部導(dǎo)航欄的左側(cè)。而不像原應(yīng)用設(shè)計(jì)的那樣，有些界面把“返回”鍵放在底部操作欄的左側(cè)，有些界面把“返回”鍵放在頂部導(dǎo)航欄的左側(cè)，一上一下，讓人感到混亂。
以上就是本次對(duì)『壹心理』APP 的重設(shè)計(jì)，謝謝。
我的個(gè)人微信公眾號(hào)：跨界汪（KuajieDog）
新浪微博：小寧OPEN
