本文是一名產(chǎn)品小白的競(jìng)品分析練習(xí)，在此虛心向各位前輩請(qǐng)教，希望能夠不吝指正。
本文字?jǐn)?shù)：3491，閱讀時(shí)長(zhǎng)：9min。
在上篇文章《有道云筆記與印象筆記競(jìng)品分析報(bào)告（一）》中，我從產(chǎn)品關(guān)注度、APP排名等角度分析了兩個(gè)競(jìng)品的整體情況，在這篇文章中，我將結(jié)合競(jìng)品的產(chǎn)品定位，對(duì)筆記類APP的視覺(jué)設(shè)計(jì)、功能結(jié)構(gòu)和交互設(shè)計(jì)進(jìn)行具體分析。
有道云筆記logo為漸變效果的天藍(lán)色背景，上面有一只筆的形象，突出產(chǎn)品功能，使用戶可以見圖知意，清楚產(chǎn)品用途；APP內(nèi)部界面也使用藍(lán)色作為主題色，給人理性、平靜的感覺(jué)。
印象筆記logo背景為漸變效果的綠色，中間是一只黑色的大象，大象的形象來(lái)自美國(guó)諺語(yǔ)：“An elephant never forgets.”（大象永遠(yuǎn)不會(huì)忘記事情），與產(chǎn)品slogen“管理你的第二大腦”相呼應(yīng)，同時(shí)大象的“折耳”可以讓人聯(lián)想到文檔圖標(biāo)或是一本書的折疊頁(yè)；APP內(nèi)部界面基本使用綠色作為主題色，使人感到寧?kù)o、安全。
總體來(lái)說(shuō)，兩款產(chǎn)品的視覺(jué)設(shè)計(jì)都十分簡(jiǎn)潔干凈，主色調(diào)很好地服務(wù)于產(chǎn)品特點(diǎn)。唯一有一點(diǎn)小問(wèn)題的是，綠色雖然被認(rèn)為是對(duì)眼睛比較舒服的顏色，但是紅綠色盲人群難以識(shí)別綠色，他們看到的綠色會(huì)偏棕黃色，這樣可能會(huì)影響他們對(duì)產(chǎn)品的使用體驗(yàn)。而紅綠色盲人群對(duì)藍(lán)色的識(shí)別沒(méi)有任何問(wèn)題。
2.3.2筆記列表頁(yè)與內(nèi)頁(yè)設(shè)計(jì)
在應(yīng)用商店中錘子便簽的介紹語(yǔ)是這樣寫的：可能是史上最漂亮的便簽應(yīng)用，你或許會(huì)因它重新喜歡上記錄和表達(dá)。錘子便簽的視覺(jué)設(shè)計(jì)的確令人眼前一亮，它選用木紋背景、淡黃色的信紙，對(duì)段落進(jìn)行了精致的排版，做到了“令內(nèi)容更加賞心悅目”。
相比較而言，有道云筆記在列表頁(yè)和內(nèi)頁(yè)上都可以更精致美觀，結(jié)合24歲至45歲產(chǎn)品核心用戶的常見使用場(chǎng)景，設(shè)計(jì)出最適合產(chǎn)品的視覺(jué)效果，為產(chǎn)品起到錦上添花的作用。
從產(chǎn)品功能結(jié)構(gòu)圖可以看出，兩款產(chǎn)品核心功能相似，但是功能結(jié)構(gòu)差別較大。
有道云筆記使用的是常見的工具類APP功能結(jié)構(gòu)設(shè)計(jì)思路，其各部分功能導(dǎo)航固定在底部，有3-5個(gè)按鈕，方便用戶在不同主題間切換。
與之相反，印象筆記以一個(gè)頁(yè)面為主，其它功能全部安排在在頂部或左側(cè)彈出的導(dǎo)航里。這樣的設(shè)計(jì)方式很像將主頁(yè)作為一塊畫布，用戶的筆記都是畫布上的圖案，用戶個(gè)人信息、APP設(shè)置和除了“新建筆記”外的其它所有功能都放在畫布外，以導(dǎo)航形式出現(xiàn)，比如頂部導(dǎo)航、以及左側(cè)需要點(diǎn)擊調(diào)出為節(jié)省屏幕空間的導(dǎo)航欄。新建按鈕出現(xiàn)在屏幕右下角，點(diǎn)擊之后各種新建筆記的方式會(huì)逐一展開。這樣的布局比較新穎，突出了主頁(yè)面，但是對(duì)于新用戶可能增加了上手難度。
在上文的核心功能對(duì)比中我們已看到，作為成熟的筆記類應(yīng)用，這兩款產(chǎn)品均提供了多種筆記創(chuàng)建方式，滿足用戶多種使用情景下的需求。本文以最簡(jiǎn)單的文本輸入方式創(chuàng)建筆記為例，通過(guò)比較用戶使用流程以及一些交互細(xì)節(jié)來(lái)分析兩款產(chǎn)品的特點(diǎn)。
圖17為兩款筆記的用戶在編輯筆記時(shí)的操作流程，兩個(gè)APP操作流程基本相同，下面我將按照用戶的操作順序，從7個(gè)細(xì)節(jié)比較兩款產(chǎn)品的異同。
為避免用戶查看筆記過(guò)程中誤觸屏幕，對(duì)筆記進(jìn)行誤修改，兩個(gè)APP都將筆記分為瀏覽狀態(tài)（瀏覽頁(yè)）和編輯狀態(tài)（編輯頁(yè)），在瀏覽狀態(tài)下，用戶不能編輯筆記，如果需要編輯，需點(diǎn)擊“編輯”按鈕方能進(jìn)入筆記編輯狀態(tài)。
同時(shí)為了既方便用戶操作，又減少按鈕的存在對(duì)用戶瀏覽體驗(yàn)的影響，兩款產(chǎn)品都對(duì)“編輯”按鈕的位置做了巧妙的設(shè)計(jì)：當(dāng)用戶上劃屏幕時(shí)，“編輯”按鈕隱藏，當(dāng)用戶下劃屏幕時(shí)，“編輯”按鈕出現(xiàn)。
這是因?yàn)樵谑褂脠?chǎng)景中，當(dāng)用戶瀏覽筆記時(shí)，會(huì)用手指上劃屏幕，使筆記下面的內(nèi)容不斷的上移，如果用戶保持上劃屏幕的動(dòng)作，則說(shuō)明用戶處于正常的瀏覽筆記狀態(tài)中；而當(dāng)用戶停止上劃，甚至下劃屏幕時(shí)，可能是注意力被某一處內(nèi)容吸引，這時(shí)有可能產(chǎn)生標(biāo)記或修改筆記內(nèi)容的需求，所以這時(shí)出現(xiàn)“編輯”按鈕的設(shè)計(jì)很合理。并且有過(guò)一次這樣的操作后用戶就學(xué)會(huì)了“調(diào)用編輯按鈕”的方式。
另外按鈕位置設(shè)置在右下角，方便大部分習(xí)慣右手操作的用戶單手完成點(diǎn)擊。
從筆記編輯頁(yè)開始，兩款產(chǎn)品在設(shè)計(jì)上體現(xiàn)出多種不同。
在瀏覽頁(yè)時(shí)，兩款產(chǎn)品中的筆記標(biāo)題會(huì)隨用戶上劃屏幕的過(guò)程向上移動(dòng)直至被隱藏，這樣筆記正文就可以充滿整個(gè)瀏覽空間。在字號(hào)適中的前提下，一個(gè)頁(yè)面所能呈現(xiàn)的文字越多，用戶需要滑動(dòng)屏幕翻頁(yè)的頻率就越低，用戶操作越少，閱讀效率就越高，閱讀體驗(yàn)就越好。而在編輯頁(yè)，有道云筆記做了一個(gè)將筆記標(biāo)題置頂?shù)脑O(shè)計(jì)（見圖19），即不論用戶將文章滑動(dòng)到什么位置，筆記的標(biāo)題會(huì)一直顯示在頂端。這樣設(shè)計(jì)的原因我推測(cè)有兩點(diǎn)，一是用戶可能會(huì)有編輯標(biāo)題的需求，顯示標(biāo)題方便用戶操作，二是在編輯狀態(tài)下，用戶最關(guān)注的是要編輯的內(nèi)容，對(duì)是否多查看一兩行筆記并無(wú)強(qiáng)烈需求，所以這個(gè)設(shè)計(jì)，雖然因?yàn)闃?biāo)題的出現(xiàn)多占據(jù)了一點(diǎn)空間，但整體來(lái)說(shuō)是利大于弊的。
有道云筆記中編輯狀態(tài)下的筆記字號(hào)比瀏覽狀態(tài)下大兩到三個(gè)號(hào)（見圖19），當(dāng)字號(hào)變大之后，同樣的屏幕空間只能呈現(xiàn)更少的內(nèi)容了，同上文說(shuō)的筆記標(biāo)題置頂?shù)那闆r類似，雖然犧牲了一部分內(nèi)容的呈現(xiàn)，但是這樣的設(shè)計(jì)使用戶打開編輯頁(yè)后有一種細(xì)節(jié)被放大的感覺(jué)，我認(rèn)為是提高了用戶編輯筆記的體驗(yàn)。
兩款產(chǎn)品工具欄的相同點(diǎn)：都緊貼輸入?yún)^(qū)位于其上方，而不是像word那邊在頁(yè)面頂端，這樣方便移動(dòng)端用戶操作。
兩款產(chǎn)品工具欄的區(qū)別：有道云筆記的工具欄沒(méi)有翻頁(yè)按鈕，用戶可能不知道還有后面一頁(yè)的工具，建議添加。印象筆記的工具欄沒(méi)有修改字體、字號(hào)和顏色的功能，可能是認(rèn)為移動(dòng)端用戶對(duì)這些細(xì)節(jié)需求不高，為精簡(jiǎn)工具欄所以去掉了。有道云筆記這個(gè)點(diǎn)擊A展開字體編輯工具的設(shè)計(jì)很巧妙，即節(jié)省了工具欄的空間，又最大限度的保留了字體編輯工具。
對(duì)于大部分習(xí)慣右手操作的用戶來(lái)說(shuō)，按鈕如有道云筆記這樣設(shè)置在右上角更符合使用習(xí)慣。印象筆記將確認(rèn)鍵設(shè)置在左上角，不論是單手操作還是雙手操作，這個(gè)位置都比較難夠到，相比按鈕在右上角增加了操作難度；在印象筆記中，還有一個(gè)保存筆記的方式，但是需要兩步：先點(diǎn)擊右上角的縮略號(hào)，待彈出右側(cè)彈窗后，再點(diǎn)擊最頂端的“保存筆記”（其實(shí)既然已經(jīng)彈出窗口了，如果把保存鍵放在下面，用戶是不是更好操作）。
有道云筆記在用戶編輯筆記并點(diǎn)擊“完成”按鈕后，頁(yè)面會(huì)出現(xiàn)小字提示“正在同步”，過(guò)一兩秒（取決于網(wǎng)速）提示“筆記同步成功”。這個(gè)及時(shí)的交互反饋讓用戶感覺(jué)很舒服，而且因?yàn)樽痔?hào)很小且提示兩秒后自動(dòng)消失，也不會(huì)覺(jué)得突?；蛴绊懡酉聛?lái)的操作。
2.5.7確認(rèn)筆記編輯完成后跳轉(zhuǎn)頁(yè)面對(duì)比
目前兩款產(chǎn)品在用戶編輯筆記完成后一般都會(huì)跳轉(zhuǎn)回瀏覽頁(yè)，為什么回到瀏覽頁(yè)呢？
如果簡(jiǎn)單的說(shuō)，就是編輯頁(yè)的操作完成了，自然返回上一層，也就是瀏覽頁(yè)，似乎是順理成章的。
但是有道云筆記設(shè)計(jì)了一個(gè)例外：當(dāng)用戶創(chuàng)建了新筆記并點(diǎn)擊“完成”后，頁(yè)面會(huì)直接跳轉(zhuǎn)至APP首頁(yè)。為什么要這樣設(shè)計(jì)？
如果仔細(xì)分析的話，對(duì)于舊筆記，用戶可能因?yàn)閮蓚€(gè)原因觸發(fā)編輯筆記的操作，一是正在查看這篇筆記，發(fā)現(xiàn)需要修改或備注，所以進(jìn)行編輯，這樣編輯完成后回到瀏覽狀態(tài)，用戶就可以繼續(xù)瀏覽，繼續(xù)滿足查看筆記的需求；當(dāng)然還有第二種情況，用戶并不是在瀏覽過(guò)程中產(chǎn)生編輯需求的，而是目標(biāo)很明確的就是想打開APP在某篇已有的筆記中添加內(nèi)容，這種情況下，用戶完成筆記編輯時(shí)，確實(shí)不一定還有瀏覽這篇筆記的需求，用戶可能繼續(xù)做其它事情了，所以這種情況下回到筆記瀏覽頁(yè)其實(shí)也沒(méi)影響。綜合以上，所以一般編輯筆記后頁(yè)面是回到瀏覽頁(yè)的。
但以上只是針對(duì)舊筆記，當(dāng)用戶在移動(dòng)端創(chuàng)建一篇新筆記時(shí)，他們的第一需求就是創(chuàng)建筆記并看到它被成功創(chuàng)建出來(lái)，當(dāng)筆記創(chuàng)建完，頁(yè)面浮現(xiàn)出“筆記同步成功”提示，同時(shí)筆記出現(xiàn)在首頁(yè)-最新筆記列表的第一項(xiàng)時(shí)，這樣的正向反饋是符合用戶心理預(yù)期的，這時(shí)用戶的核心需求比看到新建筆記的瀏覽頁(yè)能夠更好地被滿足（而且移動(dòng)端創(chuàng)建的筆記大多數(shù)情況下不會(huì)特別長(zhǎng)，用戶在編輯頁(yè)就可以看的完整，不用特意回到瀏覽頁(yè)看）。
印象筆記沒(méi)有設(shè)計(jì)這樣的差異，當(dāng)用戶創(chuàng)建完新筆記并確認(rèn)后，需要再點(diǎn)一次“后退”鍵才能回到首頁(yè)確認(rèn)新建筆記已存在列表中。
在查看了部分APP應(yīng)用商店中用戶對(duì)有道云筆記的評(píng)論后，我們發(fā)現(xiàn)，大部分用戶都給予產(chǎn)品肯定的評(píng)價(jià)，少部分用戶提出產(chǎn)品功能方面建議，幾乎沒(méi)有看到對(duì)產(chǎn)品交互的批評(píng)。同時(shí)結(jié)合產(chǎn)品在安卓和蘋果兩大平臺(tái)4.7的綜合評(píng)分來(lái)看，可以認(rèn)為用戶對(duì)目前的產(chǎn)品交互基本滿意。獲取更具體準(zhǔn)確的關(guān)于產(chǎn)品交互的用戶反饋可借助來(lái)自運(yùn)營(yíng)部門的產(chǎn)品數(shù)據(jù)、用戶調(diào)查問(wèn)卷以及熱力圖等技術(shù)手段。
到此，競(jìng)品比較的部分就說(shuō)完了，下一篇將對(duì)本報(bào)告進(jìn)行總結(jié)并提出幾點(diǎn)產(chǎn)品運(yùn)營(yíng)和功能方面的建議。
