PLook——記錄你的知識

PLook （ Peek 升級版）

<img src="https://i.loli.net/2018/08/08...; width = "100%" align=center />

<!-- MarkdownTOC -->

• 概述

  • 選題背景
  • 項目意義

• 可行性分析和目標羣體

  • 可行性分析

    • 設備基礎
    • 行爲習慣
    • 競爭分析
  • 目標羣體

• 作品功能和產品設計

  • 總體功能結構

  • 具體功能模塊設計

    • 內容識別引擎
    • 內容輔助標記模塊
    • 卡片模態匹配模塊
    • 姿態轉移識別模型
    • 圖像疊態處理模塊
    • “三模式”幀態轉換處理模型
  • 界面設計（部分）

• 作品實現、特色和難點

  • 作品實現

    • 首頁——我的小冊
    • 首頁——我的小冊——小冊詳情
    • 首頁——個人中心
    • 相機——進入相機
    • 相機
    • 內容識別引擎（識別完畢）
    • 內容輔助標記模塊
    • 內容輔助標記模塊（畫筆選擇）
    • 內容輔助標記模塊（兩指放大縮小）
    • 卡片歸檔小冊（長按選中小冊，拖拽釋放歸檔）
    • 內容識別引擎模式
  • 特色分析

  • 難點和解決方案

    • 首頁
    • 內容識別引擎：
• 團隊介紹和人員分工

• 其它

  • 開發結束後的感想
  • 不足之處和今後設想

<!-- /MarkdownTOC -->

概述

如今人們的生活已經離不開手機，除了通訊娛樂，手機還可以幫助人們工作和學習。本產品名爲“ PLook ”，是一款爲給學生羣體打造的知識分享載體，其呈現方式爲移動互聯網應用軟件，重點利用線下學生課本知識結合 PLook 線上彙集打造或分享自己的知識內容。

選題背景

學生時代的我們都喜歡使用熒光筆塗抹書本中的重點內容，當需要多次複習不同書本中的一部分內容時不得不帶着一本一本又一本厚重的書籍；當獨自一人在複習重點內容時，想要把自己梳理的一系列重點內容完整的分享給其它同學怎麼辦？

項目意義

不想因爲幾個重點知識點而帶上一本厚厚的書？不想把自己努力梳理出來的重點知識束之高閣？很想跟同學們打造一本屬於自己的知識小冊？我們來了！PLook打造了獨特的內容識別引擎，不管你是使用了熒光筆還是中性筆進行重點內容區域的塗抹和繪製，PLook 都能夠較好的識別，幫助你快速記錄重點知識！

市面上任何一種熒光筆（主要是紅和藍）都可以透過PLook來將課本中的劃線部分傳送到手機中顯示，如此一來不管學生身處何地，都可以使用手機來複習書上的重點，對於碎片時間的利用率會更高。通過 PLook 自研的內容識別引擎，能夠較好的減輕初高中的同學們能夠在日常的學習生活中對重點知識記錄和記憶的負擔，並且我們還了打造一個完整知識分享平臺，同學們能夠把自己收集起來的重點知識內容進行歸檔保存，彙集成冊，分享給自己的好友，也可以瀏覽到好友目前正在收集的知識小冊內容，從而達到流量閉環，縮減同學們進行知識交流所耗費的精力。

PLook 自研的內容識別引擎結合了Core ML、Visio、OpenCV三大成熟框架，站在巨人的肩膀上，重新調整，能夠對初高中同學們的日常知識內容識別率達 60%，當然我們開發團隊也在持續不斷的努力攻關當中。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

可行性分析和目標羣體

可行性分析

設備基礎

1. 本產品面向的對象爲初高中同學，據團隊同學調研，我國大部分初高中學生都攜帶了智能手機，家長們也都比較開明，但是還是會有部分家長十分抵制自己的孩子攜帶智能手機；
2. 一小部分初高中學校已經明令禁止學生攜帶智能手機進入校園，以上兩點都對本產品推廣具備一定量的挑戰；
3. 但很大一部分的家長和初高中學校並沒有進行禁止學生們攜帶智能手機，或者準備禁止攜帶的態度存在；
4. PLook 這個產品的本意就是給初高中同學們減輕學習壓力，利用課間、放學回家路上等等一些零碎的時間去完善自己的重點知識，協助同學們牢記重點知識。

行爲習慣

1. 初高中學生幾乎都會在自己的課本上使用各種顏色的熒光筆塗抹課本上的重點內容，以提醒自己，方便複習；
2. 初高中學生已經接受了使用互聯網產品（ App ）的文化，並且也樂於分享自己的成就、樂於分享自己的所見所聞；

競爭分析

這可以說是目前互聯網+教育僅存不多的藍海之一了，市場上保有量非常高的教育類產品基本上都是“解題”、“刷題”、“搜題”、“網課”等等內容，基本上都是站在了引導性學習的一面，但是還沒有一個產品是站在學生的角度，讓學生自發的組建自己的知識集，利用學生的零散時間去回顧自己的所做下的重點知識，沒有一個比較好的方式去彙集、去分享自己的課本中的知識內容。

目標羣體

PLook 主要面向的人羣爲初高中學生，目標人羣較爲明確，受衆羣體基數龐大，特別適合在學生過程中需要大量學習資料、整理大量學習資料的同學們。

作品功能和產品設計

總體功能結構

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

具體功能模塊設計

內容識別引擎

我們使用 OpenCV 作爲圖像識別及處理核心，結合 Core ML 和 Visio 框架管理相關模型和輸出內容模型，在三者的相互協作下打造出了 PLook 獨特的內容識別引擎。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

引擎支持紅色熒光筆、藍色熒光筆、OCR 掃描識別三大主要功能，因時間因素引擎只完成了紅色熒光筆和藍色熒光筆兩種識別模式。紅色熒光筆起名爲—— “遮罩模式”，藍色熒光筆起名爲—— “切割模式”，這兩個模式互不干擾，紅色無法識別藍色，藍色無法識別紅色，但是可以在 PLook 自帶獨特的相機模塊中連續拍攝不同模式下的照片。

PLook 的內容識別引擎能夠較好的處理用戶所拍攝照片中核心識別對象因爲所處環境的光線明暗、雜物干擾、主體差異等問題干擾，從而較爲完整的輸出用戶想要識別的核心內容。並且用戶還可以進行選擇是否將識別出的內容轉文字，目前 PLook 的內容識別引擎支持英文和中文兩種文字的識別。

內容輔助標記模塊

在該模塊中我們充分發揮了 iOS 操作系統的優越性，基於Quartz 2D框架開發了一套獨特的內容輔助標記模塊。整體使用了Core Graphic進行繪製，並且進行了一定量的性能調優，在一定量程度上緩解了傳統方法直接重載使用drawRect:方法進行繪製導致的內存暴漲，同時也避免了直接生產寄宿圖，渲染快速，使用了硬件加速，並且高效使用內存。因爲避免了創建一個寄宿圖形，所以無論有用戶進行繪製的圖像有多大，都不會佔用太多的內存，不會被圖層邊界剪裁掉也不會出現像素化。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

卡片模態匹配模塊

PLook 的靈魂基本上就在用戶所拍攝一張張的卡片，所以卡片在某種程度上就成爲了決定用戶留存的關鍵因素。卡片模態匹配主要呈現在 PLook 的內容識別引擎把用戶的關鍵內容識別出來後以及在內容輔助標記模塊中處理完後的關鍵階段發揮作用，在該階段中，卡片模態匹配模塊需要精準定位對應模態的z-index參數，並根據該參數開放模態匹配模式，根據事件傳遞響應鏈的層級關係映射到對應z-index參數對應的卡片上，從而達到完整的匹配閉環。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

姿態轉移識別模型

我們根據 PLook 的業務操作邏輯開發了一套姿態轉移識別模型，在該模型中能夠較爲精準的識別出用戶姿態的變化，從而讓 PLook 做出提前的判斷，預先加載業務資源，提前load上對應的資源文件，稍微用一些空間上的資源浪費來換取時間是的資源減少，較大的拓展 iPhone 設備的硬件資源能力。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

圖像疊態處理模塊

PLook 經過一系列模塊生成的最終卡片實際上三態圖像的疊態狀態，三態圖像中各自都具備各自需要渲染的圖像內容，而如何處理好三態圖像的疊加渲染流程就是“圖像疊態處理模塊”要解決的核心問題，再加上我們要將引入3D-Touch技術，配合該技術能夠讓用戶直達一重態渲染的原始圖像，提升用戶體驗的同時也能充分的發揮出該模塊的核心功能。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

“三模式”幀態轉換處理模型

PLook 中預製了三種幀態處理模式，分別爲“遮罩”、“切割”、“連通”三種模式。三種幀態都依賴於同一環境，對環境要求較爲苛刻，需要對同一環境下的單一幀態進行環境隔離和清洗，稍一不慎就會導致共用內存區域泄露，該模型能夠較好的轉換在同一環境下的不同幀態所要求的初始化環境，能夠保證每次切換幀態時環境的完整性和獨立性。

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

界面設計（部分）

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

作品實現、特色和難點

作品實現

首頁——我的小冊

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

首頁——我的小冊——小冊詳情

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

首頁——個人中心

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

相機——進入相機

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

相機

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容識別引擎（識別完畢）

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容輔助標記模塊

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容輔助標記模塊（畫筆選擇）

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容輔助標記模塊（兩指放大縮小）

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />
<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

卡片歸檔小冊（長按選中小冊，拖拽釋放歸檔）

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />
<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容識別引擎模式

• 藍色熒光筆——“切割模式”：

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />
<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

• 紅色熒光筆——“遮罩模式”：

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />
<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

特色分析

PLook 除了基礎框架外達到了核心模塊的 100%自研，存在一定的技術壁壘，能夠較好的解決初高中學生使用零散時間溫習重點知識的需求，並且我們會持續完善 PLook 的內容識別引擎，使其支持多種顏色熒光筆的識別和提升現有顏色熒光筆識別的準確度。

開發團隊來來回回修改了好幾次核心業務操作流程，大大縮短了面向的目標人羣使用產品的多餘時間。從時間訴求上看，PLook 並沒有花費學生們多餘的時間，學生們在使用 PLook 的過程中，排除一些必須操作幾乎都是自動化流程，一張卡片從拍攝到歸檔，最短只需要不到 10 秒的時間；從精力上看，學生們只需要確定好自己要手機知識內容，掏出手機，打開 PLook，上滑開啓相機，拍攝，歸檔，這一系列流程下來，非常的順滑，一氣呵成。

在使用 PLook 製作製作卡片的過程中，我們十分推薦用戶一旦發現 PLook 內置的內容識別引擎做出的識別效果只要有一些稍微的不滿意，在條件允許的情況下最好直接丟棄或者重拍，因爲這樣會讓你手中的 PLook 越用越聰明，越用越符合學生們各自的習慣。

難點和解決方案

首頁

在 PLook 的首頁設計中，我們開發團隊迭代了十幾次，從最初的 Peek 到現在最新的 PLook，一邊是內容識別引擎的升級一邊是首頁的迭代，這兩塊重擔在比賽要求時間這麼緊的情況下壓力十分巨大。我們都知道，一個 App 最重要的地方就在首頁，因爲首頁是用戶對這個 App 第一印象最直接的判斷，好不好用、想不想用，很可能就在這短短的十幾秒中，就在這個 App 的兩三個頁面滑滑看看，點點這點點那。

所以我們開發團隊閱讀了一些關於心理學的書，比如《認知心理學基礎》、《行爲心理學》等等資料，並且仔細攻關拿下最終的首頁的定稿——擬物化書本設計。這不是簡單意義上的 UI 出幾張圖就能應付得過去挑剔用戶的視覺感官體驗的，開發團隊最後在 PLook 的代碼中把首頁的“擬物化書本設計”進行了二次封裝，跟隨外部設備尺寸變化而進行擬物化書本設計的擴縮，較爲充分的把擬物化書本的設計進行了 2D 平面上的延伸。如下所示：

<img src="https://i.loli.net/2018/07/29...; width = "50%" height = "50%" align=center />

內容識別引擎：

內容識別引擎是我們開發團隊重點攻關和技術沉澱，並且花費了大量時間的基礎模塊，其中最大的難點就在幾大框架的協同合作上，尤其是OpenCV的識別模式嫁接，數據流的導向和在上下流層級的格式轉換是一塊非常難啃的硬骨頭，多次把開發團隊的小夥伴搞得十分的鬱悶和無奈。一直在截止提交作品的前一天晚上，開發團隊的小夥伴都一直還在接着對內容識別模塊進行調優。

團隊介紹和人員分工

大家好！我們是 PJYF ！ PJ 和 YF 都來自北京信息科技大學計算機學院，軟件工程專業，大三。

PJ 是一個陽光積極的小夥子，從大一入學開始就被學長帶入 iOS 開發中，整個大一不但要熟悉大學生活，還要馬不停蹄的跟進課程的學習，所以留給自己喜歡的 iOS 開發中時間並不多，直到暑假才能靜下心來好好的梳理一遍 iOS 開發中需要掌握的知識內容。這一路走來也磕磕碰碰的掌握了一些 iOS 開發的要點，也算是踏入了 iOS 開發的大門。PJ 主要負責 PLook 的開發、測試、部署和。

YF 是原本也非常的喜歡計算機，但是在接下來的計算機專業學習過程中，YF 發現其實自己還是喜歡畫畫，遂萌生往設計方向發展，形成了一套自己設計語言，並持續的輸出自己的設計思想。YF 主要負責 PLook 的調研、設計和產品。

其它

開發結束後的感想

在參加比賽開發 PLook 的這段時間裏，中途還得兼顧這期末考試，給團隊的同學都增加了不少壓力，在加上 PLook 的核心模塊——內容識別引擎的最終識別效果實際上只能達到 60%左右，性能優化問題一直困擾着開發團隊，雖然說可以讓用戶在日常使用 PLook 的過程中對其進行持續的調教，但是需要的時間過長，按照 PLook 的內容識別引擎目前的情況來看，如果只是依靠用戶自身的調教，要把準確度提升到 90%的穩定輸出狀態，需要有效樣本至少是一千張，轉換到日常使用情況上來看，每天拍至少十張卡片的用戶也需要一直持續的拍 100 天，成本還是很大，引擎部分我們開發團隊還是會繼續努力優化，突破難點。

在這一段時間中，我們逐漸的對技術充滿了敬畏之心，曾經一些我們看起來實在是很高深的技術點在我們的不懈努力下也都慢慢的完善了出來，也感受到了自身的知識水平和技術實力的侷限性，導致一些功能的實現上走了不少彎路。

不足之處和今後設想

我們開發團隊認爲，PLook 最值得稱讚的地方也是它最危險的地方，如果不能很好處理內容識別引擎的上下流層級的對接關係和提升識別準確度，勢必會流失大量用戶，甚至還會直接導致 PLook 的消失。因此下一步我們的做法將把內容識別引擎上雲，在雲端進行處理，雖然把內容識別引擎掛載在雲端，從整體的使用感受上用戶會覺得速度上慢一些，但是依託雲服務強大的硬件能力，PLook 做出的內容識別準確度會更高。

---

以上都是比賽的文檔，不具備任何參考價值

很遺憾，這個項目沒進決賽，可以說是非常非常遺憾了，看到名單後心都涼了，因爲付出的汗水很多很多了。總結了一下，其實問題就出在視頻上，視頻在這，因爲最後幾天搞得我十分的煩躁，所以做視頻的時候心裏想着這麼付出了這麼多汗水應該是穩了，視頻就沒怎麼好好做，直接錄屏然後配點音就完了（這視頻做的完全不是我原本水準），完全沒有當時大一做“大學+”時的那種感覺，總之就是很遺憾了吧，不管怎麼說，我都沒有處理好很多細節，以爲扣了很多細節其它事情就不管了，因爲當時做“大學+”的時候，決賽去答辯時慌得不行，因爲根本沒有任何亮點，就是做的平臺，但是不管是從文檔還是視頻上看，都做的比現在好太多了，有可能就是那種“老子有技術，天下不怕”的感覺吧，哈哈哈哈。

也算是給了自己不小的一個教訓吧，不管以後要做什麼，每一步都要穩紮穩打，不要因爲某一塊做的好了，就放棄了另外一塊，剛好其實評委能夠看到的就只有文檔和視頻，尤其是視頻，這是抓住評委第一印象的東西，但是我在這狠狠的摔了，突然想起來去年年末幫一個同學就做了一個視頻，然後就靠着這個視頻進了決賽，當時我也只負責做視頻，參加比賽的作品是一個 VR 家居展示，其實我覺得這玩意就是在 Scene 中拖出來了幾個牆和地，添加上紋理，再把櫃子啊牀啊都拖上去，再給這些 Sprite 添加上點擊事件，點了就換 model，最後再添加幾個 button 去選擇去哪個房間，沒了。任何人只要學了 Unity 都能做的出來，不，應該說是拖的出來。當時這個同學託我做了初賽視頻，反正我也只負責視頻，就這麼做了，其實我到現在想起來都覺得很不可思議，這玩意怎麼就拿了銀獎。

最初是去年上半年的一次課堂中，我看到了一個 app 的宣傳視頻，我覺得做的東西非常神奇，視頻找不到了，找到了個鏈接，當時就想着一定要把它做出來，去年下半年的時候就磕磕碰碰的做出了核心 demo，也是因爲這個比賽的原因才