PRD:「云書文檔」App 產品設計文檔

11 評論 30054 瀏覽 200 收藏 47 分鐘

編輯導讀:傳統的文檔只能一人編輯一人修改,在這個強調互動的互聯網時代已經越來越不能夠滿足需求了。在線協作文檔的出現實現了高效便捷的存儲和創作需求,是工作和生活最常用到的軟件之一。

本文作者對一款在線協作文檔產品「云書文檔」需求分析后輸出此份PRD文檔,該文檔由幾個板塊構成:需求分析、產品結構、業務流程、主要功能說明以及相關問卷設計等,與大家分享。

這次我將從之前的用戶研究的結論出發,嘗試推導出整個產品的設計過程。(「云書文檔」用戶研究部分見:《以在線協作文檔為例的情境交互體驗淺析與設計實例》)

「云書文檔」產品設計文檔 v1.0

歷史版本記錄:

概述

(1)文檔說明

此篇文檔的撰寫目的是展示「云書文檔」app 的產品設計內容,包含產品介紹、需求分析、產品結構搭建、全局定義、部分業務流程和部分頁面交互說明六個部分。

(2)文檔中出現的一些詞匯說明與字段標注定義

  • 一級頁面:通知頁、云端頁、桌面頁、星標頁
  • app 頁面使用 【】進行標記
  • 可點擊字段(按鈕)用 “” 進行標記

(3)項目背景

我們在平時的工作協作中會產生很多文件,比如一些文檔、表格、演示文稿,傳統的解決方案是基于本地化(Office 辦公套件)的方式去實現:用戶在本地創建文件,然后通過其他軟件或者郵件的方式分享給其他用戶;

然而在使用過程中會發現文件內容不能同步和實時修改,導致這種方法在多用戶協作時不夠高效與便捷。

所以,我嘗試使用 “在線文件存儲和文檔協作” 的形式來解決問題,并使用情景交互方法進行設計研究,實現高效與便捷的存儲和創作訴求。

(4)項目范圍

本次設計項目涉及到的業務主線有:

  1. 登錄 / 注冊「云書文檔」app。
  2. 創建一個在線協作文檔,將文檔權限設置為組內協作,通過鏈接分享邀請其他用戶加入協作組,以及為每個用戶配置相應的文檔權限。
  3. 多用戶在文檔中進行實時編輯,并為段落添加評論內容。

本次設計項目涉及到的業務支線有:

  1. 使用 “團隊桌面” 管理團隊中的文檔。
  2. 將一篇文檔中的標題格式(標題一、標題二、標題三……)與正文格式保存為模版,并應用到其他文檔中。
  3. 新建一個格式模版,設置文檔標題格式和正文格式,并將其應用到文檔中。
  4. 在多用戶編輯文檔時,切換 “專注模式” 屏蔽其他用戶的編輯狀態。
  5. 完成任務(隱藏任務)獲得徽章,并將徽章分享到其他社交平臺上。
  6. 切換 app DarkMode 顯示模式。

01 產品介紹

1.1 產品類型

「云書文檔」是一款文檔類在線協作平臺 app。

1.2 產品定位

「云書文檔」是一款創作與分享在線文檔的平臺,支持文件的云存儲、文件的多設備同步以及文件的多用戶在線協作。

1.3 產品介紹

「云書文檔」是一款創作與分享在線文檔的平臺 app??梢詭椭脩敉ㄟ^創建文檔、表格、演示文稿、思維導圖和白板等來組織想法與表達內容,并通過云端存儲和多設備同步功能來隨時隨地查看這些文件。

其他的一些像是便簽語音速記、多用戶實時在線協作、OCR 文字識別、文檔格式保存,成就徽章系統等拓展功能也能很好的幫助用戶解決工作與生活中遇到的問題。

1.4 體驗情景整理

  1. “我在公司里負責的用戶訪談結束后,將整理的報告通過在線協作文檔很方便的分享給了產品團隊,并在里面 @ 提及了相關人員,標注了需要重點關注的地方。后續在 PRD 的評審工作中,產品、設計、開發人員也可以通過實時評論功能參與討論,同步項目進度以及收集來自各方的問題反饋?!?/li>
  2. “我和男友是異地戀,有時候我會記錄自己每天需要完成的任務,然后想讓男友監督我,然后發現用協作文檔可以兩個人一起編輯,并且我們同時在線編輯時會顯示我們兩個人的頭像,正在編輯的內容也會顯示用戶名和不同顏色的光標,我覺得這樣超級有儀式感!有時候還能和男友在文檔里聊天吵架哈哈~現在我們會經常一起使用協作文檔去制定一些旅行計劃啊,兩個人一起要去做的事之類的,非常實用!”
  3. “我是一名二次元同人文寫手,我會使用協作文檔來寫一些動漫游戲同人小說,有時會和動漫群里的其他小伙伴一起構思情節,比賽看誰寫的段落更好哈哈哈,協作文檔的操作對我們很友好,評論功能也可以讓我們快速的知道其他群友對某一段情節的看法?!?/li>

02 需求分析

2.1 目標用戶

  1. 使用在線協作文檔主要是因為多設備同步功能,方便隨時隨地查看的用戶;在他們之中輸出物大多是一些個人文檔。
  2. 有多用戶協作,實時編輯評論查看需求的用戶;在他們之中輸出物大多是工作文檔,也有旅行計劃或小說。

2.2 需求分級列表

在這次的設計研究中,我使用 KANO 模型的基本型需求、期望型需求、興奮型需求、無差異型需求和反向性需求這五個維度來對之前用戶研究中得到的需求方案進行總結整理與分級。

03 產品結構

3.1 用戶工作情景設計

3.1.1 登錄 / 注冊 & 一級頁面切換

【登錄頁】->【云端頁】->【桌面頁】->【星標頁】->【通知頁】

3.1.2 創建在線協作文檔并分享

【新建文件選擇】->【文檔編輯頁】->【文檔分享設置】->【協作組配置】

3.2 產品結構圖

3.3 產品功能結構圖

3.4 產品信息結構圖

04 全局定義

4.1 部分邏輯定義

4.1.1 關于云書文檔登錄方式的定義:

  1. 移動端登陸方式為:手機號短信驗證碼登錄、SSO 登錄
  2. pc & pad 端登錄方式為:app 掃碼登錄、手機驗證碼登錄、SSO 登錄

4.1.2 關于文件 / 文件夾在文件列表 / 文件夾列表里排列默認顯示順序的邏輯:

  1. 是否標記為置頂為第一優先級、更新時間為第二優先級
  2. 優先排列置頂、最新更新的文件

4.1.3 關于通知的邏輯:

  1. 系統通知
  2. 當有用戶在 “由你創建” 或 “與你協作” 的文檔中進行編輯時,你會收到通知。
  3. 當有用戶在 “由你創建” 或 “與你協作” 的文檔中 @ 提到你時,你會收到通知。
  4. 當有用戶在 “由你創建” 或 “與你協作” 的文檔中進行評論時,你會收到通知。

4.1.4 關于文件導出類型的定義:

  1. 文檔可以導出為 pdf、word(.doc / .dcox) 和圖片(.png / .jpg)
  2. 表格可以導出為 excel(.xls / .xlsx)
  3. 演示文檔可以導出為 ppt(.ppt / .pptx)和多張圖片(.png / .jpg)
  4. 思維導圖可以導出為圖片(.png / .jpg)
  5. 白板可以導出為圖片(.png / .jpg)

4.1.5 關于文件的刪除邏輯:

  1. 文件的源文件只有文件創建者可以刪除。
  2. 非文件創建者不能刪除文件的源文件,只能使其在自己的列表里呈不可見狀態。
  3. 在云端頁,用戶在最近列表下對文件進行刪除操作時,彈出提示 “是否從最近列表中移除?確認移除后,該內容將在最近列表中不可見”;僅當用戶是進行刪除操作的文件的創建者時,提供 “是否刪除源文件” 選項。
  4. 在桌面頁,用戶在我的桌面下對文件進行刪除操作時,彈出提示 “你是該文件的創建者,確認刪除后該項目將進入回收站,30 天后將自動刪除”。
  5. 在桌面頁,用戶在團隊桌面下對文件進行刪除操作時,彈出提示 “是否從團隊桌面中移除?確認移除后,該內容將在最近列表中不可見”。
  6. 在星標頁,沒有對文件的刪除操作,只有對文件的 “取消收藏” 操作。
  7. 在廢紙簍頁,用戶對文件進行刪除操作時,彈出提示 “確定要刪除此文件嗎?”,用戶確認后刪除此文件。存放在回收站超過 30 天的文件會被系統自動進行刪除操作。
  8. 用戶可以通過 “通知” 或者文檔鏈接重新進入設置為不可見的文檔,再次進入后文檔在最近列表中重新變為可見狀態。

4.2 交互定義

手勢操作包括:

  1. 在文檔閱讀頁雙擊屏幕進入文檔編輯狀態
  2. 在文檔閱讀頁兩指捏合放大縮小顯示視圖
  3. 文件列表中上下滑動進行瀏覽
  4. 文件列表中的文件單元向左滑動顯示 “刪除” 等操作選項
  5. 云端頁的便簽列表中左右滑動進行瀏覽
  6. 文檔中的評論模塊左右滑動切換上一條評論和下一條評論

其他交互方式包括:語音交互 – 語音速記

4.3 時間顯示格式定義

05 業務流程

5.1 登錄流程

5.2 創建在線協作文檔與分享流程

5.3 加入文檔協作流程

06 主要功能說明

6.1 登錄 / 注冊

用戶任務:

  1. 使用手機號登錄「云書文檔」app
  2. 使用微信賬號登錄「云書文檔」app
  3. 使用 SSO 登錄「云書文檔」app

邏輯說明:

  1. 點擊 “服務條款” 按鈕,可查看關于 app 的相關服務條款。
  2. 點擊 “隱私政策“ 按鈕,可查看關于 app 的相關隱私政策。
  3. 點擊手機號碼輸入框和驗證碼輸入框都將彈出數字鍵盤。
  4. 手機號碼輸入框基礎規則:
    • 展示格式:1XX XXXX XXXX
    • 手機號判斷合法的規則: 13 / 14 / 15 / 16 / 17 / 18 / 19 開頭的號碼,且無除數字以外的字符
    • 手機號字符限制:當輸入滿 11 位數字之后,禁止再次輸入字符
  5. 判斷手機號合法后,“下一步” 按鈕變為藍色可用狀態,點擊進入【驗證碼輸入頁】,同時發送驗證碼到所填寫的手機號碼上。
  6. 如果判斷手機號不合法,手機號碼輸入框外框變紅,提示請輸入正確的手機號碼,“下一步” 按鈕為灰色不可用狀態。
  7. 當用戶輸入最后一位驗證碼數字時,判斷驗證碼是否正確。如果正確的話跳轉【云端頁】;如果錯誤的話驗證碼輸入框抖動,外框變紅且清除輸入框內所有數字,提示驗證碼輸入錯誤。
  8. 用戶可多次點擊 “重新獲取驗證碼” 按鈕,兩次驗證碼的發送時間間隔為 60s,在此時間間隔內 “重新獲取驗證碼” 按鈕為灰色不可用狀態,同時動態顯示剩余時間間隔。當時間間隔大于等于 60s 時,“重新獲取驗證碼” 按鈕變為藍色可用狀態。
  9. 用戶登錄的賬號為未注冊賬號時將自動注冊。

6.2 一級頁面

6.2.1 云端頁

頁面入口:app 底部標簽欄

用戶任務:

  • 進入【個人中心】
  • 使用二維碼掃描登錄 PC 端 / 網頁端
  • 使用圖片 OCR 創建文檔
  • 搜索文檔
  • 快捷創建便簽
  • 快捷瀏覽置頂便簽
  • 瀏覽最近使用的文件列表
  • 修改文件列表中文件排序方式
  • 篩選文件列表中的文件
  • 切換文件列表視圖:列表視圖 / 預覽視圖

邏輯說明:

1)用戶在登錄狀態下打開 app 默認進入到的頁面是【云端頁】,用戶在【云端頁】下創建文件夾,創建成功成功后進入所創建的文件夾中,返回時返回到【桌面頁】。

2)用戶點擊頭像進入【個人中心】。

3)用戶點擊 “掃描 ICON” 彈出彈窗,用戶可選擇掃描二維碼 or 使用 OCR 文字識別,選擇后進入相應頁面并調用系統攝像頭。(申請攝像頭權限、相冊權限(本地上傳圖片使用 OCR))

4)用戶點擊 “語音速記 ICON” 使用語音速記功能(申請系統麥克風權限),錄音結束后可選擇新建文檔,進入文檔編輯狀態并將此錄音文件插入文檔中。

5)用戶點擊搜索框可以搜索文檔,搜索基礎規則如下:

  1. 搜索范圍:app 全局搜索(包括廢紙簍中的文件,但在結果中顯示文件來自于廢紙簍)
  2. 搜索條件:文件類型(文檔 / 表格 / 演示文檔 / 思維導圖 / 白板)、文件夾、文件中的文字段落。
  3. 搜索結果過濾條件:時間范圍(任意時間 / 最近一周 / 最近一月 / 最近一年)、文件類型(任意類型 、 文檔 / 表格 / 演示文檔 / 思維導圖 / 白板)、文件夾、團隊空間),默認過濾條件:任意時間、任意類型。
  4. 搜索框內字符數限制:50 個字符。

6)在快捷便簽模塊,用戶可以通過手寫、語音輸入和鍵盤輸入三種方式新建便簽。左右滑動可顯示前一張后一張便簽,點擊 “查看全部” 進入便簽列表,瀏覽所有便簽,點擊便簽可查看便簽具體內容。快捷便簽模塊基礎規則如下:

  1. 排列順序因子:是否置頂(置頂標簽優先排列)、創建時間(按創建時間相對于當前時間從近到遠排列)其中置頂因子優先級最高
  2. 便簽預覽內容卡片展示內容:便簽內第一張圖片的縮略圖(如果有)、便簽文字內容(限制 15 個字符,超過 15 個字符之后顯示 “…”)、便簽創建時間。

7)最近使用文件列表中排列用戶最近打開過的文件,用戶點擊 “排列 ICON” 切換文件的排列方式:

  1. 按最后更新時間排列(默認,時間較近在前,較遠在后)
  2. 按文件名音序排列(a – z)
  3. 按文件類型排列(文件夾 – 文檔 – 表格 – 演示文稿 – 思維導圖 – 白板)

8)在最近使用的文件列表中,用戶點擊 “篩選 ICON” 對文件列表中的文件進行篩選:

  1. 按文件類型篩選
  2. 按來源篩選:由我創建的文檔 / 與我協作的文檔

9)在最近使用的文件列表中,用戶點擊 “視圖切換 ICON” 切換文件列表的視圖:

  1. 文檔列表視圖(默認)
  2. 文檔預覽視圖

10)在最近使用的文件列表中,向左滑動文件單元,顯示對于此文件的操作:分享文件、刪除文件、置頂文件 / 取消置頂、星標文件 / 取消星標、導出文件、移動文件、創建文件副本。

11)文件列表中每個文件單元中包含文件類型 ICON、文件名、最后更新時間和最后更新用戶的用戶名等信息,每個文件單元中文件名最多顯示 20 個字符,超出后顯示 “…”。

6.2.2 通知頁

頁面入口:app 底部標簽欄

設計說明:

作為文檔協作者,用戶會注意關于文檔的消息提示中有沒有與自己相關的內容并且,整個文檔的協作過程是由文檔被修改的通知,以及文檔或評論中提到用戶的通知來推動的,所以在這里我將 【通知頁】放在優先級較高的底部標簽欄中,使用戶方便快捷地查看通知信息,并由此推動整個協作過程的進行。

用戶任務:

  1. 查看通知
  2. 通過協作通知了解文檔協作情況

邏輯說明:

  1. 通知頁分為“未讀”和“全部”兩個模塊,點擊可切換 Tab
    • “未讀” Tab 下,按時間順序(時間較近在前,較遠在后)排列未讀消息,同日期消息在一個模塊中顯示,用戶點擊通知可進入相應的文檔。
    • “全部” Tab 下,按時間順序(時間較近在前,較遠在后)排列全部消息,同日期消息在一個模塊中顯示,用戶點擊通知可進入相應的文檔。
  2. 通知單元在通知列表中按時間順序縱向排列顯示,排列規則與文件在列表中按時間排序的規則保持一致,每個通知單元中包含通知類型 ICON、通知標題和通知的時間,其中通知標題最多顯示 20 個字符,超出后顯示 “…”。

6.2.3 桌面頁

頁面入口:app 底部標簽欄

用戶任務:

  1. 瀏覽我的桌面上的文件
  2. 切換桌面到其他的團隊桌面
  3. 瀏覽團隊桌面上的文件

邏輯說明:

  1. 桌面頁分 “我的桌面” 和 “團隊桌面” 兩個模塊,點擊切換 Icon,彈出浮窗可切換 Tab
    1. 在 “我的桌面” Tab 下,列表中排列用戶創建的文件夾、用戶創建的文件
    2. 在 “團隊空間” Tab 下,列表中排列用戶創建的文件夾、該團隊內其他用戶創建的文件夾、用戶創建的文件和該團隊空間內其他用戶創建的文件
  2. 在團隊桌面下創建的文件分享權限默認設置為組內協作,協作組內的用戶與團隊桌面中添加的用戶保持一致。
  3. 團隊桌面名稱在 Tab 上顯示時限定顯示 20 個字符,超出后顯示 “…”

6.2.4 星標頁

頁面入口:app 底部標簽欄

設計說明:

在文件列表中,用戶左滑文件,選擇更多菜單里的星標選項,即可為該文件標記星標。

在文件列表中,用戶左滑已標記為星標的文件,選擇更多菜單里的取消星標選項,即可為該文件取消星標。用戶也可以在【文檔編輯頁】右上角更多菜單里為文檔標記星標,或取消星標。

用戶任務:

瀏覽標記為星標的文件

6.3 個人中心

頁面入口:點擊一級頁面上的用戶頭像進入

邏輯說明:

用戶點擊一級頁面常駐導航欄左側的用戶頭像進入【個人中心】,【個人中心】分為 “我的成就”、“我的格式”、“我的賬號”、“顯示”、“廢紙簍”、“設置”、“反饋”、“關于”和 “退出登錄” 九個模塊:

  1. 在 “我的成就” 中,用戶可查看完成的成就徽章,并分享
  2. 在 “我的格式” 中,用戶可新建格式樣式,或編輯現有的格式樣式
  3. 在 “我的賬號” 中,用戶可查看、修改賬號信息:頭像、用戶名、郵箱、手機、微信、更改密碼以及注銷賬號
  4. 在 “顯示” 中,用戶可選擇 app 顯示樣式:日間模式、夜間模式以及跟隨系統設置
  5. 在 “廢紙簍” 中,用戶可恢復三十天之內刪除的文件,在 “廢紙簍” 中存在三十天以上的文件會被自動永久刪除
  6. 在 “設置” 中,用戶可設置通知推送規則、設置加密文件打開方式:密碼、Face ID
  7. 在 “反饋” 中,用戶可將對于 app 的建議反饋給客服,并在遇到困難時向客服發送信息求助
  8. 在 “關于” 中,用戶可查看 app 的版本號信息,服務條款以及隱私政策
  9. 用戶點擊 “退出登錄” 按鈕,則退出當前帳號,并跳轉至【登錄頁】

6.3.1 我的成就

頁面入口:點擊【個人中心】中的 “我的成就” 選項

設計說明:

用戶在使用在線協作文檔時,對自己會有一個高效工作者的認知,而我們可以通過設計幫助用戶慶祝他們成就,分享他們的成就的這些方式,來幫助用戶強化這一認知,從而提升用戶對我們產品的信任。因此,我在【個人中心】中設置“我的成就”模塊,當用戶完成一些任務,或隱藏任務時,會獲得一枚徽章,用戶可以選擇將這些徽章分享至社交媒體中,幫助用戶表達自己工作高效、認真、可靠的形象。

后續配合運營活動可以設計一些特殊的徽章。(比如與品牌方合作的廣告文案設計大賽就可以設計一些加入品牌方因素的徽章,用戶可通過參與比賽獲得)

用戶任務:

  1. 查看已獲得的成就徽章
  2. 將已獲得的成就徽章分享到社交空間中

邏輯說明:

  1. 列表顯示用戶獲得的成就徽章,點擊可查看徽章大圖,并選擇分享方式。
  2. 已獲得的徽章原色顯示;未獲得的徽章灰色顯示

6.3.2 新建文檔格式

頁面入口:點擊【個人中心】中的 “我的格式” 選項

用戶任務:

  1. 新建一個文檔格式
  2. 修改已有的文檔格式

邏輯說明:

  1. 格式名稱在我的格式列表中最多顯示 20 個字符,超出部分顯示 “…”。
  2. 格式名稱限定 50 個字符數。
  3. 標題格式名稱隨已創建的標題格式數量而顯示:標題一、標題二、標題三…以此類推,正文格式名稱為:正文。用戶在修改格式時,無法自定義標題格式名稱和正文格式名稱。
  4. 用戶無法新建多個正文格式,即始終只能有一個正文格式。
  5. 在編輯格式時,文字內容只能有一種統一的格式,
  6. 在編輯格式時,此處的文檔工具欄中只有四種功能:打開 / 關閉鍵盤顯示、設置字體格式、撤銷操作、重做操作。

6.4 創建在線協作文檔并分享

6.4.1 新建文檔選擇頁

頁面入口:app 底部標簽欄

用戶任務:

  1. 選擇新建一個文件
  2. 新建一個文件夾
  3. 本地上傳一個文件
  4. 使用 OCR 文字識別創建一個文檔

邏輯說明:

  1. 點擊 “文檔”,新建一個文檔類型的文件,進入【文檔編輯頁】。
  2. 點擊 “表格”,新建一個表格類型的文件,進入【表格編輯頁】。
  3. 點擊 “演示文檔”,新建一個演示文檔類型的文件,進入【演示文檔編輯頁】。
  4. 點擊 “思維導圖”,新建一個思維導圖,進入【思維導圖編輯頁】。
  5. 點擊 “白板”,新建一個白板,進入【白板編輯頁】。
  6. 點擊 “文件夾”,新建一個文件夾。
  7. 點擊 “本地上傳”,從本地選擇上傳一個文件至云端,調用系統文件選擇(申請系統文件訪問權限)
  8. 點擊 “掃描圖片”,對一張圖片進行 OCR 文字識別,并將識別結果創建為一個文檔類型文件。點擊后觸發由上而下彈出選擇彈窗,用戶可選擇拍攝一張圖片(申請系統攝像頭權限)or 從本地上傳一張圖片(申請系統文件訪問權限)
  9. 新建文件夾的命名限定 50 個字符數,創建文件夾成功成功后進入所創建的文件夾中,返回時返回到【桌面頁】
  10. 用戶可上傳的本地文件類型:.doc/.docx、.xls/.xlsx、.ppt/.pptx、.txt

6.4.2 文檔編輯頁

頁面入口:在【新建文檔選擇頁】中選擇 “文檔”

用戶任務:

編輯文檔內容

邏輯說明:

1)手勢操作:雙擊頁面中的段落內容進入文檔編輯模式。

2)手勢操作:雙指放大縮小調節文檔的內容顯示比例,當文檔顯示比例不為 100% 時文檔底部出現 “還原尺寸” 按鈕。當進入文檔編輯模式時文檔顯示比例自動恢復至 100%。

3)在文檔編輯模式下,左上方為 “編輯完成” 按鈕,點擊可退出文檔編輯模式,并更新文檔修改時間至當前時間。

4)頁面中根據當前網絡狀態和文檔內容的修改時間實時顯示當前文檔的保存狀態,樣式如下:

  1. 文檔內容沒有改變時顯示文檔內容將自動保存。
  2. 在網絡狀況良好的情況下,文檔內容改變,顯示已于 xx:xx:xx 同步此文檔。
  3. 在網絡狀況較差的情況下,文檔內容改變,顯示同步中…,待同步完成后顯示已于 xx:xx:xx 同步此文檔。
  4. 在無網絡的情況下,文檔內容改變,彈窗強調顯示當前無網絡,編輯內容已離線保存。
  5. 在無網絡的情況下文檔內容改變,恢復網絡狀態后顯示同步中…,同步完成后顯示已于 xx:xx:xx 同步此文檔。

5)頁面中顯示當前參與文檔協作的用戶的頭像,多用戶參與協作時,用戶頭像依據打開文檔 / 退出文檔的時間順序從近到遠從左到右排列重疊顯示,其中當前文檔創建者的頭像優先靠左顯示。最多顯示 4 位用戶的頭像,當參與協作的用戶數大于 4 時,頭像后顯示…

6)頁面上方顯示 “分享文件”、“專注模式” 和 “更多” 三個選項,點擊 “更多” 后彈窗顯示關于當前文檔的更多操作:

  1. 文件導出選項,選擇將文檔導出成什么格式。
  2. 選擇是否標注星標:是 / 否。
  3. ”保存文檔格式“(標題格式、正文格式)。
  4. ”應用文檔格式“(標題格式、正文格式)。
  5. ”權限管理“,快捷顯示當前文檔的權限狀態:公開只讀 / 公開可編輯 / 組內協作,點擊跳轉【分享設置頁】。
  6. ”圖片集合視圖“,排列當前文檔中使用的所有圖片。
  7. ”文檔目錄“,按標題顯示當前文檔的目錄。
  8. ”文檔信息“,點擊查看文檔創建者、文檔創建時間、文檔總字數、文檔閱讀次數、文檔字符數(計空格)和文檔字符數(不計空格)。
  9. ”查找與替換“,點擊查找或替換文檔中的內容。
  10. ”查看評論“,點擊查看文檔內的所有評論,并可以篩選 @ 提及用戶的評論。
  11. ”查看歷史編輯信息“,點擊查看文檔的歷史編輯版本,并可以選擇還原。

7)普通鍵盤上方是文檔工具欄,包含:

  1. “鍵盤“ 按鈕,點擊可切換鍵盤顯示狀態:彈出 / 收起。
  2. “格式“ 按鈕,點擊可設置文檔標題的格式和字體的格式(特殊標記、不同字體)。
  3. “序號“ 按鈕,點擊可設置有序序號、無序序號和任務勾選列表。
  4. “插入“ 按鈕,點擊可在文檔中插入圖片、視頻、音頻、思維導圖、便簽內容、文檔鏈接、外部鏈接、分割線、引用塊、代碼塊。
  5. “撤銷“ 按鈕,點擊可撤銷上一步對文檔的操作。
  6. “重做“ 按鈕,點擊可重做對文檔的操作。
  7. “@ 提及“ 按鈕,點擊可在文檔中插入 @xxx ,并高亮顯示,相關用戶會在 app 中收到通知。也可以在當前文檔中插入文件鏈接,點擊文件鏈接跳轉對應的文件。
  8. “評論“ 按鈕,在文檔編輯狀態下,點擊可在文檔中光標所在位置的行處插入評論內容。

8)退出文檔編輯狀態下,上下滑動瀏覽頁面,底部出現浮窗顯示當前文檔字數統計,浮窗顯示 3s 后消失。

6.4.3 分享設置頁

頁面入口:點擊【文檔編輯頁】右上角 “分享文件 ICON” 進入【分享設置頁】

用戶目標:

  1. 打開文檔鏈接有效性 / 關閉文檔鏈接有效性
  2. 設置文檔權限:公開只讀 / 公開可編輯 / 組內協作
  3. 選擇文檔分享方式

邏輯說明:

  1. 當用戶選擇 “公開只讀” 和 “公開可編輯” 選項時,可直接分享文檔鏈接
  2. 當用戶選擇 “組內協作” 選項時,出現 “配置組內成員與權限” 選項,點擊進入【配置協作組頁】
  3. 關于文檔的分享方式如下所示:
  • “微信好友”,點擊跳轉微信選擇好友頁,以鏈接(小程序)方式發送給微信好友。
  • “朋友圈“,點擊跳轉微信編輯朋友圈,以鏈接(小程序)方式發送至朋友圈。
  • “釘釘“,點擊跳轉釘釘選擇好友頁,以鏈接(小程序)方式發送給釘釘好友。
  • “微博“,點擊跳轉編輯微博頁,以鏈接方式發送至微博。
  • “復制鏈接“,點擊將此文檔鏈接復制到系統剪貼板中,彈窗提示( 3s 后自動消失)。
  • “生成二維碼“,點擊將此文檔鏈接轉化為二維碼,并可以以圖片形式保存至相冊(相冊讀取寫入權限)或分享。
  • “生成圖片“,點擊將此文檔內容生成圖片,然后可以選擇保存至相冊或以圖片形式分享。
  • “更多“,點擊喚醒系統分享選項菜單。

6.4.4 配置協作組頁

頁面入口:【分享設置頁】中選擇 “組內協作” 選項,點擊 “配置組內成員與權限”

用戶任務:

  1. 配置文檔協作組成員
  2. 管理每位成員的權限

邏輯說明:

  1. 用戶可在搜索框中搜索協作組內的成員,搜索結果實時顯示,搜索基礎規則如下:
  • 搜索范圍:文檔協作組。
  • 搜索條件:用戶用戶名、用戶賬號(手機號、郵箱地址)。
  • 搜索框內字符數限制:50 個字符。
  1. 邀請用戶加入協作組有三種方式:
  • “最近協作”,點擊查看最近協作的用戶的列表,快捷選擇邀請其加入當前協作組。
  • “通過微信邀請朋友加入協作”,點擊跳轉微信選擇好友頁,以鏈接(小程序)方式發送給微信好友,好友點擊鏈接加入協作組(非 app 用戶需要先下載注冊)
  • “通過手機號邀請朋友加入協作“,點擊跳轉發送短信頁,以發送鏈接短信方式發送給好友,好友點擊鏈接加入協作組(非 app 用戶需要先下載注冊)
  1. 每個協作組成員單元中成員的用戶名最多顯示 20 個字符,超出后顯示 “…”
  2. 點擊協作組成員單元,進入【用戶權限配置頁】,為該成員配置文件權限,協作組成員默認權限設置為:可編輯、可以導出此文檔、不可以修改其他用戶的權限。
  3. 【用戶權限配置頁】中,點擊 “將此設置應用于協作組所有成員”,將為此成員設置的權限應用于當前協作組內的其他所有成員。

6.5 多用戶協作文檔

頁面入口:可以通過點擊 app 內通知進入,或者點擊文檔鏈接進入

設計說明:

當多用戶進入文檔參與協作時,顯示每個用戶的用戶名并用不同顏色的光標標記顯示,在光標所停位置處可以添加對該行內容的評論。用戶可以對評論表示支持。

用戶任務:

  1. 參與文檔協作編輯
  2. 為文檔添加評論

邏輯說明:

  1. 頁面中顯示當前參與文檔協作的用戶的頭像,多用戶參與協作時,用戶頭像依據打開文檔 / 退出文檔的時間順序從近到遠從左到右排列重疊顯示,其中當前文檔創建者的頭像優先靠左顯示。最多顯示 4 位用戶的頭像,當參與協作的用戶數大于 4 時,頭像后顯示…
  2. 多用戶協作時,標記協作用戶正在編輯的位置,不同用戶的用戶名用不同顏色進行標記,光標位置隨所標記的協作用戶編輯位置實時更新。
  3. 在對應的光標上顯示加入文協作的非文檔創建者用戶的用戶名,用戶名最多顯示 10 個字符,超出后顯示 “…”

6.5.1 專注模式

頁面入口:點擊【文檔編輯頁】右上角 “專注模式 ICON” 進入專注模式視圖

設計說明:

用戶的注意力會被網絡狀態的變化,以及其他用戶參與協作時的頭像和光標打斷,而我們在每個階段要盡量使用戶專注于當前的行為與目標,所以我在【文檔編輯頁】中加入 “專注模式” 選項,幫助用戶屏蔽一些信息,使用戶在多用戶協作時也能很好的專注于文檔本身的內容。

用戶任務:

切換 “專注模式” 視圖

邏輯說明:

專注模式下【文檔編輯頁】顯示內容:

  1. 網絡狀態與文檔同步狀態
  2. 文檔內容

6.5.2 插入評論

頁面入口:點擊文檔工具欄中的 “評論“ 按鈕 / 點擊文字段落右側的評論標記 / 更多文檔操作中的“查看評論” 選項 / 通知

用戶任務:

  1. 在文檔中添加評論內容
  2. 查看文檔中的評論
  3. 回復文檔中的評論

邏輯說明:

  1. 評論輸入框中單行最多顯示 20 個字符,超出后換行顯示。
  2. 僅當評論輸入框內不為空時,“發送” 按鈕為藍色可用狀態,其他情況下均為灰色不可用狀態。
  3. 插入評論后,在段落右側標記顯示此處段落中存在的評論數,點擊可查看此處的評論。
  4. 在評論詳情彈窗中,左上角顯示當前評論數序號 / 整篇文檔存在的評論數。
  5. 在評論詳情彈窗中,顯示當前評論的序號數,用戶左右滑動可以查看下一條上一條評論。
  6. 在評論詳情彈窗中,點擊 “更多” 彈出彈窗顯示 “刪除該評論” 和 “支持該評論” 操作,僅當當前用戶對當前文檔擁有管理權限時顯示 “刪除該評論” 選項。

07 「云書文檔」體驗設計度量調研問卷設計

用戶體驗度量是:通過一套可靠的測量體系,量化用戶體驗的過程,是讓用戶體驗從 “抽象” 到 “具象” 的過程,同時也是一種更好的實現體驗設計價值及體驗設計體系化的關鍵路徑。

在這里我使用 Google HEART 體驗框架來設計調研問卷,用于之后的用戶調研,并通過得到的數據繼續優化設計方案,提升產品的使用體驗。

  1. 覺得云書文檔看起來怎么樣?
  • 很好看
  • 一般
  • 不太好看
  1. 您會愿意向身邊的人推薦使用云書文檔嗎?
  • 非常愿意
  • 愿意
  • 一般
  • 不愿意
  • 非常不愿意
  1. 您在使用云書文檔時有遇到過難以理解的地方嗎?
  • 沒有
  1. 您會愿意使用云書文檔來處理每天的工作、生活事務嗎?
  • 非常愿意
  • 愿意
  • 一般
  • 不愿意
  • 非常不愿意
  1. 您順利使用云書文檔完成了工作、或者生活上的一些事情了嗎?
  • 非常順利
  • 順利
  • 不太順利
  • 不順利
  • 非常不順利
  1. 您會愿意將自己獲得的成就徽章分享到朋友圈或者微博嗎?
  • 非常愿意
  • 愿意
  • 一般
  • 不愿意
  • 非常不愿意
  1. 云書文檔在您心中的評分是?
  2. 您對云書文檔還有什么建議或者想要的功能嗎?

08 總結

這個項目能從最初的一個筆試題能做到現在,連我自己也沒有想到。

整個過程就是在不斷的看書、找資料、看網站上的文章,然后對自己的項目進行查漏補缺。

到目前為止,這個項目一共是產出了一份用戶研究報告、一份產品設計文檔、一份交互說明文檔、一份高保真 UI 稿和發布在摹客上的一份原型設計,基本上算是把從產品 – 交互 – UI 的流程都走了一遍吧(大概)。

在這整個過程中,我在產品文檔和交互文檔的編寫方面都得到了鍛煉,對在線協作文檔和情景交互的設計方法也有了更深的理解,但比較遺憾的是自己身邊接觸類似體驗設計實際業務的機會比較少,可能在處理一些實際業務問題時的掌控力還比較弱,文檔和設計方案中也會有很多考慮不周的地方,所以還請大家多多指教啦。

也希望以后能夠有更多這樣的機會,我也會繼續盡全力去學習和理解,不斷完善自己的設計思路和業務處理能力(瘋狂暗示)。

  • 「云書文檔」原始用戶數據整理與解讀:https://shimo.im/docs/WJPWkwK3PjQGXkK3
  • 「云書文檔」用戶研究思路及過程:http://www.aharts.cn/ucd/4174162.html
  • 「云書文檔」高保真 UI 原型:https://www.mockplus.cn/ux2020/work/qsiqe

 

作者:默月,個人微信:Mostima330,歡迎大家來找我玩~

本文由 @默月 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. Ppt

    回復
  2. 結構圖和功能結構圖區別是什么

    來自上海 回復
    1. 我自己在做的時候的理解是:產品結構圖=信息結構圖+功能結構圖,我現在的流程是在我得到功能列表后,我會按照某種邏輯(例如交互方式、產品控件(導航欄、內容卡片等等)這些)把功能列表中一條一條的功能點組織起來并模塊化,得到功能結構圖。然后產品結構圖的話則是把之前分好的功能、信息這些東西整合到具體的產品頁面中,這樣下一步我們就可以按照產品結構圖去畫產品頁面原型。同時這些組織好的功能模塊、信息模塊對下游的交互/UI/開發應該也會有幫助。

      然后,雖然我現在自己是在慢慢練習把這個邏輯走通,但我自己的理解可能還比較淺,表達也不夠準確,有需要的話可以看下這篇文章:http://www.aharts.cn/pmd/838667.html,可能對你幫助會更大一點。

      來自浙江 回復
    2. 你好,剛剛看了推薦的這篇文章的上下篇,看完再綜合分析該篇文章的功能結構圖和產品結構圖是不是順序錯位了

      來自浙江 回復
  3. 做這個原型圖用什么軟件

    回復
    1. 一般是用Axure

      來自浙江 回復
  4. 厲害

    回復
    1. 謝謝!

      來自上海 回復
  5. 學習學習!?。?/p>

    來自廣西 回復
    1. 一起學習?。?!

      來自上海 回復
  6. 不知道為什么我這邊顯示有一張圖片沒加載出來??。。大家感興趣的可以去我寫在石墨文檔里的看一下那張沒加載出來的圖片https://shimo.im/docs/9PldCXjWBj0QfGkV

    來自上海 回復