摘要:信息技術的快速發展,傳統紙質筆記已無法滿足現代用戶之需,大眾更傾向于使用數字化工具來記錄和管理信息,打造一款可以載入用戶個人手寫字體的筆記App,通過筆記App可以便攜的記錄工作和學習中的眾多要點,提升學習工作效率,并實現紙質筆記的電子體驗感,打造屬于用戶個人的知識筆記。基于字體識別技術,分析字體識別技術在筆記App中的應用性,結合筆記App的發展現狀,總結歸納出給予字體識別技術的筆記App的設計策略,并對筆記App的功能及界面開展設計實踐。從筆記App的產品定位、功能設置、視覺設計等方面,逐步完善設計實踐。該設計策略可滿足用戶的各項使用需求,給用戶帶來愉悅的使用體驗。
關鍵詞:字體識別;筆記App;界面設計;手寫字體;視覺設計
中圖分類號:TB472 文獻標識碼:A
文章編號:1003-0069(2024)23-0140-05
引言
筆記,類似“大腦”的延伸,記錄生活之點滴,重要知識點亦或是轉瞬即逝的靈感,均可以通過電子筆記的形式被永久保存。相較紙筆,筆記App 更輕,適用范圍更廣,傳統的紙質筆記,受限紙張之限,有損壞之險,筆記App 軟件內的云端存儲則可提供數據安全保障[1]。
數字化時代,可以覺察“無紙化辦公”的觀念逐漸蔓延,傳統紙質筆記記錄到一定程度,快速查找和存儲成為棘手難題。開展基于手寫字體識別技術的筆記App 設計探究,讓用戶在使用電子筆記時擁有實體紙筆書寫的體驗,提供便利知識記錄服務,促進電子筆記發展,宣傳“無紙化”低碳環保理念,為字體識別技術和筆記類App 產品設計的發展提供新方向。
一、筆記App背景概述及研究現狀
(一)介質承載與機器訓練:手寫字體識別技術概述
信息化浪潮席卷與人工智能技術日益成熟,文字識別技術逐漸走進大眾視野,文字識別領域涵蓋印刷體字符識別與手寫字體識別兩大類,現階段印刷字體識別技術已取得顯著進步,在多個領域,如車牌識別、快遞單號識別等方向得到廣泛應用,極大簡化日常文字輸入與檢測流程。手寫字體識別技術發展相對遲緩,原因在于每個人的書寫習慣有所差異,字體樣本識別難度高于印刷體,手寫字體識別的模型通常需經過大量的樣本訓練,數據收集難度大。隨著深度學習技術不斷發展,卷積神經網絡(Convolutional Neural Networks,CNN)作為主流網絡架構,在目標檢測、圖像分類等研究領域表現突出[2]。目前,在OCR 中采用深度學習方法的研究主要集中于文本區域定位,比如采用Faster R-CNN、Yolo 等模型進行自然場景的文字區域提取與識別,自然場景下達到85% 左右的文本檢測率[3]。通過引入GoogLeNet 深度卷積模型,也能夠有效地提取字體多尺度特征[4],此類研究的出現提高了識別的利用率和準確性。
融入“現代神經網絡”的字體識別技術,不僅使識別的精度大幅度提升,同時為應對字庫龐大導致的訓練復雜問題,通過“筆畫匹配”(筆畫特征提取和筆畫結構與匹配)的方式實現“高精度化”的漢字識別技術。字體識別技術的進步也使得大量筆記App 中也嵌入了相似的功能,讓用戶可以更便捷地在文檔中迅速加入大量需要的內容,不再是需要自行輸入或是插入圖片,提高了筆記軟件的功能性和便捷性,通過筆畫匹配實現的漢字識別技術不僅提高“識別準確度”(字體),通過引入基于VDSR 超像素神經網絡的方法,也讓用戶可以在筆記App 中查閱自己的手寫字體,給用戶帶來實體筆記的體驗,用戶的手寫“筆跡載入”可以保護用戶的知識產權,防止個人內容被泄露。
(二)多元之需與記錄協同:筆記類App 的現狀
筆記App 是以智能手機為載體,為用戶提供隨時隨地進行記錄的應用軟件,改變了傳統的筆記方式,突破空間與用具的限制,降低了時間和經濟成本,獲得便攜的存儲與分享,有效提升用戶工作、學習效率。應用市場中的筆記App 多達數百種,例如有道云筆記、印象筆記、錘子便簽等(如圖1),筆記App 按功能設計上主要分為小而精和大且全兩類。
在“小而精”功能設計上,此類筆記App 專注解決單一痛點問題,如錘子便簽(如圖2)其出色的備忘錄功能,幫助用戶輕松記錄生活中的點滴;吾記(如圖3)則專注于日記功能,為用戶提供了一個私密、安全的記錄空間。這些產品多為單機應用或互聯網功能常被人們忽略,這類產品也存在著一定的弊端,如用戶黏性差,用戶轉移幾乎不耗成本,然而這些專注解決“單一痛點”問題的筆記App 往往在各自領域內深耕,憑借專業和精細的功能設計,逐漸成為“大且全”這類筆記App 始終無法替代的存在。
在“大且全”的功能設計上,此類筆記App 其功能涵蓋日常生活多維度的“適用場景”,如印象筆記(如圖4)、有道云筆記(如圖5),工作中能夠輕松地進行會議記錄、多人協作等,在學習中用戶可以利用記錄課堂筆記、整理學習資料等,在日常生活中也可以用于記錄生活點滴、制訂旅行計劃等,這類應用支持多端的云端存儲服務,保護用戶的文件不被遺失,同“小而精”類型的筆記App 相比,他們在每個功能區域都不夠深化,用戶在針對性使用功能時沒有良好的使用體驗,在應用場景方面此類產品也是“小而精”類筆記App無法比擬的。
二、基于手寫字體識別技術的筆記App的創新設計策略
用戶使用筆記App 的基本需求是“快速存儲”和“高效獲取”。首先,滿足用戶在不同場景下的功能性需求,針對功能進行細化,其次,探索技術與筆記產品結合創新,建立實體與電子筆記的連接以及如何為筆記App 添加社交屬性,促進知識的傳播和創新,最后,在視覺上做到簡潔明了,降低用戶使用負擔。最后,從以下5 個層次對基于字體識別技術的筆記App 設計策略進行闡述。(如圖6)
(一)場景多維化:滿足復雜差異的使用需求
用戶使用筆記App 的本質是快速處理“差異化場景”下獲取的信息,在設計時應注意筆記App 不同場景的適應性,如學習生活中出現新的靈感需要快速的記錄下來;參加會議時快速記錄會議要點;旅行購物前列出計劃或清單等,所以筆記App 需要提供適應不同場景的記錄功能,支持多種文本格式,圖片、音頻等多種媒體形式的導入。筆記的記錄是為了在需要時便于查看,如果只記錄不查看,筆記也就失去了意義,因此在滿足各種場景使用需求的前提下,優秀的筆記管理模式可以讓用戶更好地使用。
(二)垂直細分化:精準導向的梳理功能構建
垂直細分的精準功能能夠攫取黏性用戶。用戶在使用筆記App時常會因為產品功能不全面而放棄原有產品,同時,“單一維度”的使用性需求、“時效導向”的精準化需求,也促使著用戶會選擇具備這一“顯著功能”的App 產品。以思維導圖功能為例,這是用戶使用此類產品時“關注度”最高的內容,思維導圖能夠幫助用戶更清晰地梳理思路、整理信息,然而,大量筆記App 的思維導圖功能構建過程繁瑣,極大影響了用戶的使用體驗,導致用戶的流失,除了思維導圖功能外,筆記分類、標簽管理、同步備份等功能也是用戶在使用過程中“討論頻率”和“使用頻率”較高的模塊,通過細化完善這些功能,筆記App 可以更好地滿足用戶的多樣化需求,提升用戶黏性。
(三)技術融合化:識別技術與智能產品結合
字體識別技術在筆記App 的應用帶來了諸多的便利,例如用戶可以把大篇幅的文檔通過照片或掃描的形式轉換為可編輯的文本;語音識別與字體識別的結合讓用戶可以通過錄音轉換成文字,隨著字體識別技術的不斷發展,基于VDSR 超像素神經網絡的方法可以對用戶的手寫字體進行識別分析,通過總結漢字中的常用筆畫,與已有漢字字體庫進行對比并提取用戶各種筆畫的書寫方式進行字體生成,為用戶建立個性化的手寫字體數據庫,讓自己的字跡在電子世界留下專屬于自己的印記。
(四)用戶集群化:社群建構與互動平臺交流
社群作為用戶交流互動的平臺,創建有良好學術氛圍的社群,有助于推動知識深度內化。在社群中可以互相分享用戶個人制作的筆記以及個人字跡,用戶基于獲取各自所需的“回報”而與其他用戶進行互動,知識分享者主動并積極地傳遞知識,而知識接收者則需要為分享者提供一定的物質或情感上的“回報”,雙方在一個充滿互惠與信任的學術環境中進行知識的交換,為用戶提供了一個良好的學習和交流場所。
(五)視覺規范化:風格簡潔與界面合理構成
在產品的視覺規范上,應將知識類App 的“文化規則性”和“視覺規整性”相凸顯結合,知識脈絡的清晰整體和視覺美學的“清晰整體”應一體化。在調研過程中發現,大量筆記App 的界面設計中,部分產品追求圖標風格統一,彰顯設計感,一部分追求識別性,但缺少對于細節的把控,整體性不強[5]。在界面布局方面,大多數應用選擇使用卡片式、宮格式或列表式的設計,此類設計方便用戶在不同筆記之間快速切換,但是一部分功能的模塊間存在明顯的割裂感,功能的主次關系不夠明確。為改善用戶使用體驗,文字選擇醒目識別度高的無襯線字體,提高閱讀性,在色彩上選用簡單的顏色,降低用戶對復雜顏色的視覺疲勞,在設計語言表達上,需要采取簡潔、清晰、高效的設計原則,以降低使用過程中的視覺燥點,以提高用戶的學習專注度[6]。
三、基于手寫字體識別技術的筆記App設計實踐
數字媒體時代,普羅大眾面對海量信息、知識數據,使得人們學習工作面臨信息過載、知識碎片化、知識保護等問題,筆記App 的出現讓人們快速轉化、重組信息資源,隨時隨地對碎片化知識整合和記錄,完善個人知識庫。
(一)“筆記”產品定位與生活場景覆蓋
本產品是一款可以載入用戶個人手寫字體的筆記類App,涵蓋日常生活的廣泛場景,用戶在使用筆記App 時主要有記錄、管理、查看3 種基本操作,在滿足用戶多場景使用需求的前提下,細構并擴展各項功能,例如:建立良好的分享社群,方便用戶獲取更多的知識內容、融入手寫字體識別技術,并為用戶建立屬于用戶個人的手寫字體庫,提高用戶的使用興趣為用戶的知識產權內容保駕護航。
(二)手寫字體識別技術的介入與邏輯
1. 以漢字筆畫為基礎的字體識別技術。隨著科學技術的發展,基于深度神經網絡的漢字識別技術可以自動抽取語句中的“語義特征”,提升“識別精度”并抵抗外界環境干擾。但多分類的識別方式導致計算成本高昂,且模型擴展困難,基于筆畫結構的漢字識別方法,結合風格轉換應對字體變化,從而減少字體數據庫錄入的麻煩。
依據濟南大學束健等人提出的基于“筆畫分割”的多漢字字體識別技術[7],通過引入基于VDSR 超像素神經網絡的方法,有效預測像素間的路徑關系,優化漢字骨架圖像的生成過程,對細化后的漢字骨架圖像進行交叉點集合的求解,并采用8 鄰域的模糊處理方式來消除這些交叉點。創新的字體識別技術既保證了模型在預測筆畫數量時的準確性,又顯著降低了模型預測的時間復雜度,提高了整體性能,解決了現有字體識別方法中由于擴展字庫造成的重復訓練問題,通過提取漢字圖像中基本的筆畫結構來實現基于筆畫的漢字匹配識別。
2. 字體識別方法及底層原理。用戶上傳字跡圖片時,為提高識別率,首先對文字的圖像進行處理,對每個文字進行標記并獲得所有文字的“待選區域”,對所選區域的文字進行風格轉換,將其轉換為標準的楷體漢字,更精確地提取筆畫信息。對轉換后的數據進行二值化處理,并將處理后的結果輸入到筆畫分割提取網絡中,以提取單個字符的所有筆畫分段結果。對獲得的預測結果進行預處理,通過連通域劃分的方式確定最大的區域,計算圖像之間的IoU(交并比)比值進行最終筆畫段的合并。將識別結果按照預設的筆畫段類型送入數據庫中進行對比識別,實現對圖像中字符筆畫的準確識別和分類,識別成功后將標記文字送入字體生成模型中,基于用戶字跡對模型進行訓練學習從而產出用戶的手寫字體。(如圖7)
(三)筆記App 功能設置與模塊設計細分
“筆跡”根據筆記類App 的使用需求上主要分為記錄、管理、查看、分享4 個大功能,在App 內部又分為首頁、文件庫、新建筆記、發現和我的五大基本板塊,五大模塊逐層遞進,功能結構細分明確,以達到準確的工具分類和使用的便捷性。(如圖8)
1. 直抒胸臆與功能劃分:“首頁開端”板塊設計。首頁板塊設計上采取“直抒胸臆”的形式,給用戶以直觀的視覺模塊劃分,功能劃分上立足于需求和便捷導向。涵蓋“搜索”“功能卡片”“筆記欄”3 個基本功能框架,“搜索”欄用戶可快速找到想要查看或使用的筆記,搜索欄下方的功能卡片中設立3 個可橫向滑動的頁面,作用在于方便用戶處在“快速使用”功能場景下,可更為便捷快速打開。第3 個頁面的最后放置“功能自定義”功能,用戶根據自己的喜好和需求,修改各項功能處在的頁面位置。“筆記欄”會顯示最近編寫的筆記,每一篇筆記以卡片的形式顯示在頁面中,在每個卡片右側用戶,可以為“關鍵筆記”添加“提醒”和“標記”,用戶在“提醒”中設定時間提醒時,會通過手機通知的方式提醒用戶,設置“標記”筆記會置頂在筆記欄中,方便快速編輯查看。用戶可通過“全部筆記”的小三角按鈕處,自定義修改筆記欄中筆記的顯示方式,例如,顯示摘要、列表視圖、按日期分組等,讓產品更加人性化和便捷。在“任務中心”中為用戶搭建成就系統,為用戶提供相應的“回報”獎勵,以促進用戶的活躍度,例如,在用戶連續使用時間達到一定時間時給予“學童”“學霸”等成就稱號,加強用戶持續使用。
2. 知識圖譜與海量存儲:“文件庫”板塊設計。“文件庫”設計上,建立其用戶與產品中的一套“橋梁星圖”,以海量存儲和筆記整理去梳理知識脈絡。板塊中“選擇”“知識星圖”“云端”“筆記本”功能可以對用戶編寫的筆記進行整理,用戶通過右上角“選擇”功能對每個筆記和筆記本進行重命名、刪除、移動、加密等操作,生成的同時會在筆記本內自動生成智能目錄,更加直觀了解筆記本內各個筆記的關聯和總體特征,對于未加入筆記本內的筆記,頁面右上角“知識星圖”功能中可以進行多個筆記之間、筆記與筆記本之間知識星圖的創建和查看,構建用戶個人的知識圖譜。對于用戶對每個界面不同的需求的問題,采取了與首頁一致的自定義修改顯示方式的功能,方便用戶的瀏覽。“云端”功能可以讓用戶同步不同端之間的文件,也可以將文件上傳至云端保護用戶的文件安全。
3. 誤觸操作與協作形式:“新建界面”板塊設計。“新建界面”是用戶在使用產品過程中頻率最高的功能(界面),為避免用戶查看筆記過程中誤觸,導致筆記內容修改,將筆記界面分為了瀏覽和編輯兩種狀態。頁面處在在瀏覽狀態時,用戶不能編輯筆記并在右下角出現編輯按鈕,點擊按鈕才可以進入編輯狀態,關閉鍵盤時進入瀏覽狀態不可對文檔修改。“上一步”在用戶編輯出現錯誤時幫助用戶退回上一步的操作如果誤觸“分享”功能可以讓用戶將筆記分享給其他用戶查看或編輯,在分享時可以選擇生成筆記二維碼。在有需要多人一起創作筆記的場景下可以使用“協作”功能,創建在線筆記并邀請其他用戶一起加入到筆記的創作中。除了這些功能外,在進行文本編輯時鍵盤框上方會出現輔助工具框,輔助工具框中包含了多種編輯工具如“個人字跡”“樣式調整”“插入圖片”“AI 助理”等,為更好地滿足用戶的使用需求,輔助工具框會根據用戶當前的操作和文檔內容智能推薦相關的編輯工具,為提高用戶的使用體驗,用戶可以通過拖拽輔助工具框來調整輔助工具框的位置和展示方式。
4. 集市社群與激勵機制:“發現”板塊設計。“發現”板塊建構共享的集市社群,設計聯動的激勵機制,包含“贊和收藏”“朋友”“筆跡集市”“消息”“筆跡圈”等功能。用戶可以在“筆跡圈”內對公開的筆記進行點贊、評論、收藏,讓用戶接觸到不同行業內的筆記作品,擴展自己的知識面提高自身能力。也可在“筆跡圈”內分享自己或獲取其他用戶基于“報酬激勵”機制公開的筆記。“朋友”和“消息”功能的出現讓用戶在“筆跡圈”內能夠找到自己志趣相投的朋友(如圖9 所示),與朋友實時溝通互動,共同分享創作的喜悅,探討心得體會,創建和諧共生的社區環境。“筆跡集市”中涵蓋了個人字跡、模版、在線書城欄目,在內部為用戶提供了大量可選擇的筆記模版,用戶可以在編輯筆記時按需查找使用,用戶在使用App 內的字跡功能時也可以在“筆跡集市”中獲取其他用戶發布的個人字跡或App提供的書法字跡,豐富用戶的筆記內容,在線書城的出現滿足了用戶的閱讀需求,讓用戶可以在線獲取、閱讀電子書籍。
(三)筆記App 的典型設計特征及視覺呈現
1. 產品形式特征:用戶書寫捕捉與個性設計標注。在功能創新和形式上,將用戶“書寫筆記”和“隨筆記錄”作為一種實時捕捉,獨樹一幟的筆跡形成“歷史性”標記和“知識性”沿襲的顯著烙印,提升用戶黏性和趣味性。筆跡可以看作一種獨特的視覺形象,是肉眼能夠直接捕捉到的書寫具體表現,絕非抽象或虛幻的概念,筆跡具備個人特性,這種差異化恰恰體現在每一個字跡和筆畫之中,構成了每個人筆跡形象的獨特體系。通過將每個人的個人筆跡載入到筆記App 中,讓用戶使用筆記App 時可以選擇使用自己的筆跡來書寫,讓書寫者的個性和情感在電子世界中得以延續和傳承。用戶可以通過筆跡集市分享個人字跡來換取相對應的報酬,用所得報酬來獲取其他用戶的個人字跡或筆記模板,用不同的筆跡或模板不斷豐富筆記的創作內容,讓筆記的創作更有趣味性,在電子世界中留下屬于自己的個性語言。
2. 界面交互特征:模式切換有序和布局簡潔明了。唐納德·諾曼在其著作《設計心理學》指出“設計一個有效的界面,不論是計算機或門把手,都必須始于分析一個人想要做什么,而不是始于有關屏幕應該顯示什么‘某種隱喻’或者觀念”。筆記類App 大多在視覺風格(交互流程)上呈現多元化,這無形中為增添了用戶的認知負擔,通過對交互模式進行優化,以最少的操作步驟達到想要的效果讓用戶可以輕松實現各種操作,重新布局界面元素,注重營造井然有序的美感,在界面布局上采用了底部標簽式導航,保證用戶可以在各個板塊直接進行切換,為增強用戶的視覺焦點,當前正在使用的板塊在導航欄會高亮顯示,可以快速辨別所處的功能區域,為用戶編輯方便“新建筆記”會一直成高亮狀態,保證用戶可以隨時隨地進入筆記的創作,每個板塊中默認采用列表式布局的方式,使得每個功能模塊劃分清晰明了,用戶也可以根據個人使用習慣進行布局排列的自定義。
3. 色彩美學特征:沉浸書寫體驗和直觀視覺識別。在筆記和知識類App 設計的美學特征和上,應建構一種直觀的視覺導向,以明確、扁平、簡化為設計規則,消解復雜的流程和視覺觀感,優化色彩飽和和降低視覺疲勞,提升用戶的使用頻率和積極性。App 產品命名為“筆跡”,筆跡基本含義指的是字跡、字體的樣子,是個人書寫風格的獨特體現,在“筆跡”的啟動圖標設計上,采用了手寫書法字體來書寫“筆跡”這個名稱,底部選取實體紙張的紋理顏色,給予用戶真實書寫的感受(如圖10 所示)。“筆跡”App 的功能圖標基于用戶視覺認知,通過擬物化設計和扁平化風格并采取簡潔明了的圖形設計,具有直觀的識別性,在色彩上采用黑色和黃色的組合進行設計,黑色代表沉穩與內斂,黃色則象征著活潑與奔放,這種色彩搭配具有強烈的視覺沖擊力,給用戶以活潑奔放之感,同時有內斂與沉穩之韻。字體選擇上,選擇了蘋方字體,閱讀效果更好[8],字體清晰明了,線條流暢,保證了用戶使用時舒適度。
結語
數字媒體時代,普羅大眾會接收到海量信息知識,“終身學習”理念普及與在線辦公的發展,知識整理、辦公記錄的需求不斷增加,筆記應用的重要性日趨顯現。字體識別技術與筆記App 的結合,提高了App 的功能性和便捷性,同時通過載入用戶的手寫字體讓用戶在數字世界中留下自己獨特的印記,以需求導向、用戶導向、視覺導向出發,解構出典型的設計特征和創新架構(如圖11 所示)。梳理筆記App 的發展現狀,總結歸納處基于字體識別技術的筆記App 的設計策略,展開相應的設計實踐,希望以此為契機,可不斷深化對“字體識別技術”的手寫字體在筆記App 中的應用、思考、研究,吸引更多設計師和從業者將目光聚焦于這一具有潛力的領域,共同推動其發展。
課題基金:山東省大學生創新創業訓練計劃項目資助《“筆跡App”— 打造專屬于用戶的個人知識庫》(項目編號S202313320009X)
參考文獻
[1]劉春爽.Android平臺手寫筆記系統的設計與實現[D].北京郵電大學,2022.
[2]易堯華,楊鍶齊,王新宇,等.自然場景文本檢測關鍵技術及應用[J].數字印刷,2020,(04):1-11+22.
[3]閆飛,張華,馮春成,等.基于遷移學習的卷積神經網絡印刷漢字字體識別模型研究[J].數字印刷,2021,(02):36-45.
[4]趙歡.電子出版物字體替代和字體識別方法研究[D].北京信息科技大學,2018.
[5]景奕煒,魏志成.老年友善視角下的移動醫療APP適老化設計探究[J].設計,2024,37(03):90-92.
[6]黃文鋒,劉顏楷.基于社會交換理論的文獻筆記共享APP設計策略研究[J].設計,2023,36(02):118-120.
[7]束健.基于筆畫分割的多字體漢字識別[D].濟南大學,2023.
[8]李姍.博物館標志設計中漢字圖形化設計的應用研究[J].設計,2023,36(07):37-39.