A method and device for collaborative follow-up review of design drafts based on canvas pages

Abstract

This invention discloses a collaborative review method and apparatus for design drafts based on a canvas page. The method includes: responding to a presenter's initiation of a review of the design draft on the canvas page, and displaying a design draft sharing entry and review team member avatars in the canvas page's navigation bar; after the presenter opens the design draft sharing entry, a collaborative review window for the design draft is opened on the canvas page; the collaborative review window includes a visual window for the design draft, an audio communication window, and a text communication window; review team members join the collaborative review window for the design draft by clicking on the presenter's avatar in their respective canvas page's navigation bar to collaboratively review the design draft. This invention, through the collaborative review window, allows review team members to directly follow and switch the presenter's perspective on the canvas page to review and edit the design draft, improving review efficiency and effectiveness, as well as enhancing the clarity of the design draft.

Description

Technical Field

[0001] The present invention relates to the technical field of software design, and in particular to a method and device for collaborative follow-up review of design drafts based on a canvas page. Background Art

[0002] In the UI design workflow, an inevitable stage is the "design review" stage. In the regular review stage (such as Figure 2 As shown in the figure, it needs to go through the workflow of wireframe prototype, interaction design, UI interface design, design review and design asset management before it can be delivered to R&D. Each workflow node needs to be implemented through multiple software (such as Photoshop and other software). Among them, at the design review process node, it is necessary to use IM tools (such as video conferencing, Feishu, DingTalk) to share the local window screen for review. The participating review members can only watch the design draft plan through remote video and make review opinions (such as making review opinions through microphone or text chat). Because some design drafts are relatively complex and large, it is difficult to meet the review needs through traditional IM tools. For example, it is difficult for review members to express clearly through language how the design elements in the design draft should be adjusted and changed. In many cases, review members need to operate the speaker's design draft to express clearly. Even if the speaker can be asked to assign screen sharing permissions to review members through IM tools, on the one hand, it is easy to cause privacy exposure and security risks of the speaker's computer files. On the other hand, due to the frequent video freezes during screen sharing and the low resolution of the shared video, it is difficult to achieve the visual effect of the design draft. On the other hand, the speaker's computer files or design draft materials are also difficult to meet the requirements of each review member.

[0003] To solve the above problems, the present invention develops a method and device for collaborative follow-up review of design drafts based on a canvas page. Review team members can directly follow and switch the speaker's perspective on the canvas page to review and edit the design drafts, so as to improve the efficiency, effect and experience of the review. Summary of the invention

[0004] In view of the above problems, a method and device for collaborative follow-up review of design drafts based on canvas pages are proposed, so that review team members can directly follow and switch the speaker's perspective on the canvas page, review and edit the design drafts, and improve the efficiency, effect and experience of the review.

[0005] According to one aspect of the present invention, a method for collaborative follow-up review of a design draft based on a canvas page is provided, comprising:

[0006] Respond to the speaker's initiation of the review operation on the design draft on the canvas page, and display the design draft sharing entrance and the avatars of the review team members in the navigation bar of the canvas page;

[0007] After the presenter opens the design draft sharing portal, a collaborative follow-up review window of the design draft is opened in the canvas page; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window;

[0008] The review team members click on the speaker's avatar in the navigation bar of their respective canvas pages to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft.

[0009] In an optional manner, the design draft visual window is in the speaker's canvas page, and is used to display a regional real-time view of the speaker's design draft;

[0010] The display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft are distributed and synchronized in real time to the collaborative follow-up review windows of each member of the review team.

[0011] In an optional manner, the real-time distribution and synchronization to the collaborative follow-up review windows of the review team members further includes:

[0012] According to the display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft, the design code of the design draft is updated;

[0013] Distribute and synchronize the design code of the design draft to the canvas pages of each member of the review team;

[0014] The respective canvas pages generate a copy of the design draft according to the design code of the design draft;

[0015] The collaborative follow-up review window is displayed in the copy area view of the design draft in the form of a rectangular annotation frame.

[0016] In an optional manner, the method further includes:

[0017] Capturing the mouse position in the real-time view of the area of ​​the speaker's design draft, and distributing and synchronizing the mouse position to the collaborative follow-up review windows of the review team members;

[0018] A virtual mouse cursor is drawn in each collaborative follow-up review window according to the mouse position.

[0019] In an optional manner, the method further includes:

[0020] During the review process of the design draft, responding to a hand-raising operation by any member of the review team;

[0021] When the presenter agrees with the review team member's raising of his hand, the role of the review team member is set as the presenter;

[0022] The review team member displays, adds, deletes, adjusts and drags each design element in the design draft in the collaborative follow-up review window of the design draft;

[0023] Synchronize the design code distribution of the design draft in the collaborative review window of the review team member to the canvas pages of other review team members;

[0024] The remaining review team members update their respective canvas pages with copies of the design draft in their respective collaborative follow-up review windows according to the design code of the design draft, so as to continue the collaborative follow-up review of the design draft.

[0025] In an optional manner, after the presenter agrees with the review team member's raising of his hand, the method further includes:

[0026] The review team member selects a new design draft as the second design draft on the canvas page, and drags the second design draft into the collaborative follow-up review window;

[0027] Synchronize the design code of the second design draft in the collaborative review window of the review team member to the canvas pages of the remaining review team members;

[0028] The remaining review team members update their respective canvas pages with copies of the second design draft in their respective collaborative follow-up review windows according to the design code of the second design draft, so as to conduct collaborative follow-up review on the second design draft.

[0029] In an optional manner, the method further includes:

[0030] According to the multiple review finalization marks of the design draft, the design draft is automatically saved as multiple design draft versions for download by the review team members; and

[0031] A collaborative follow-up review playback record of the design draft is generated according to the communication audio information, communication text information and design code modification log of the design draft.

[0032] In an optional manner, the collaborative follow-up review window of the review team members includes a full-screen window mode, a split-screen window mode and a floating window mode;

[0033] Wherein, the full-screen window mode is used to display the design draft visual window in full screen on the canvas page of the review team member;

[0034] The split-screen window mode is used to display the design draft visual window, the audio communication window and the text communication window in different split-screen areas of the canvas page respectively;

[0035] The floating window mode is used to float the design draft visual window, the audio communication window and the text communication window.

[0036] In an optional manner, the collaborative follow-up review window of each member of the review team supports zooming in, zooming out and moving operations;

[0037] The audio communication window of each member of the review team includes volume adjustment, mute control and recording functions;

[0038] The text communication window of each review team member includes a text search function and a function of viewing text records by time or by team member, wherein the text communication window supports text, emoticons, pictures and links.

[0039] According to another aspect of the present application, a design draft collaborative follow-up review device based on a canvas page is provided, comprising:

[0040] A collaborative follow-up review initiation module is used to respond to the speaker's review initiation operation on the design draft in the canvas page, and display the design draft sharing entrance and the review team member portraits in the navigation bar of the canvas page;

[0041] A collaborative follow-up review opening module is used to open a collaborative follow-up review window of the design draft in the canvas page after the presenter opens the design draft sharing entrance; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window;

[0042] The collaborative follow-up review distribution module is used for the review team members to join the collaborative follow-up review window of the design draft by clicking the speaker's head portrait in the navigation bar of their respective canvas pages to conduct collaborative follow-up review on the design draft.

[0043] The solution provided by the above-mentioned embodiment of the present invention responds to the speaker's initiation of the review of the design draft in the canvas page, and displays the design draft sharing entrance and the avatars of the review team members in the navigation bar of the canvas page; after the speaker opens the design draft sharing entrance, the collaborative follow-up review window of the design draft is opened in the canvas page; the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window; the review team members click on the speaker's avatar in the navigation bar of each canvas page to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft. Through the collaborative follow-up review window, the review team members can directly follow and switch the speaker's perspective in the canvas page, review and edit the design draft, which not only improves the review efficiency and effect, but also improves the clarity of the design draft viewing.

[0044] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above description and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present invention. Moreover, the same reference symbols are used throughout the accompanying drawings to represent the same components. In the accompanying drawings:

[0046] Figure 1 A schematic diagram showing a flow chart of a method for collaborative follow-up review of a design draft based on a canvas page according to an embodiment of the present invention;

[0047] Figure 2 A schematic diagram showing a comparison of review workflows in an embodiment of the present invention is shown;

[0048] Figures 3 to 5 A schematic diagram showing activation of the follow-up view and interface effects according to an embodiment of the present invention is shown;

[0049] Figure 6 A schematic diagram of a function activation entry for an audio conference according to an embodiment of the present invention is shown;

[0050] Figure 7 A schematic diagram of joining an audio conference according to an embodiment of the present invention is shown;

[0051] Figure 8 A schematic diagram showing the status display of an audio conference according to an embodiment of the present invention is shown;

[0052] Figures 9a to 9c A schematic diagram showing the operation of an audio conference according to an embodiment of the present invention is shown;

[0053] Fig.10 A schematic diagram of text communication according to an embodiment of the present invention is shown;

[0054] Fig.11 A functional structure diagram of a design draft collaborative follow-up review method device based on a canvas page according to an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0055] The exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present invention and to enable the scope of the present invention to be fully communicated to those skilled in the art.

[0056] Before implementing the embodiments of the present invention, the technical terms or custom terms involved below are uniformly explained here:

[0057] Container: Formerly known as "drawing board", it is an important design component of design software, such as iPhone container and A4 paper container. In this application, in addition to defining the scope of the interface like the drawing board in traditional design software, the container can also add layout grid, rounded corner filling and other attributes to it, and can also nest another container in the container.

[0058] Components: They allow the UI to be divided into independent, reusable parts. In practical applications, components are often organized into a nested tree structure.

[0059] Layers: are like images containing elements such as text or graphics, which are stacked together in order and combined to form the final effect of the page. Layers can accurately position elements on the page. In this application, text, shapes, pictures, etc. can be added to the layers, and layers can be nested in the layers.

[0060] Instance: An instance refers to a specific reference to a component. What the user drags from the component list or copies and pastes from a component is an "instance" rather than the component itself.

[0061] Design elements: In this application, design elements include containers, components, layers, and instances.

[0062] IM tools: Instant Messaging tools, software or services that support real-time text, voice, and video communication.

[0063] Design review: In the process of explaining the design plan of the design draft to the team members, the team members will make modification suggestions based on the design plan, and review and modify the details of a certain page or icon in the design draft.

[0064] The following describes in detail the method and device for collaborative follow-up review of design drafts based on canvas pages proposed by the present invention through specific embodiments.

[0065] Embodiment 1:

[0066] Figure 1 The functional structure diagram of the design draft collaborative follow-up review method based on the canvas page of an embodiment of the present invention is shown. Figure 1 As shown, the following steps are included:

[0067] Step S101, responding to the speaker's initiation of review of the design draft in the canvas page, and displaying the design draft sharing entrance and the review team member portraits in the navigation bar of the canvas page.

[0068] In this embodiment, without the need for a third-party UI tool, the speaker can initiate an operation on the canvas page to respond to the review of the design draft, such as Figure 5 As shown, the view of the design draft in the canvas page is used as the visual following window (such as the design draft vision of "Tiger Teeth" in the rectangular box), or the entire canvas page can be used as the visual following window. Then, as Figure 3 As shown, after clicking the review team member portrait in the canvas page, click Share to activate the review follow-up window to start the design draft review process. The border color of the review follow-up window is consistent with the border color of the current review team member portrait, so as to easily identify which review team member is sharing the design draft. Among them, the review team portrait automatically loads the review team member to which the user belongs (displayed as a portrait) according to the role of the logged-in user, or the review host pre-sets the team members participating in the review. Figure 4 As shown, the editing and adjustment operations of the design draft and its design elements are displayed in the visual following window, including zooming in or out of the design draft view, selecting design elements in the design draft, and translating the design draft (or canvas page). It should be noted that in this application, the canvas page is also called the UI design window, and the canvas page includes multiple design drafts, operation panels, function menus, etc.

[0069] Step S102, after the presenter opens the design draft sharing entrance, a collaborative follow-up review window of the design draft is opened in the canvas page; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window and a text communication window.

[0070] In this embodiment, the collaborative follow-up review window integrates multiple functions such as viewing, speaking, and chatting, so as to facilitate the review team members to review and discuss the design draft more efficiently. Fig.10 As shown in the figure, the design draft visual window is used to display the design draft shared by the presenter. All participating review team members can clearly see every detail of the design draft in this window. Figures 6 to 8 As shown in the figure, the review team members can manage audio and communicate in real time through the audio communication window. Through the text communication window, they can ask questions, express opinions or share ideas without interrupting the speaker.

[0071] In an optional manner, the collaborative follow-up review window of the review team members includes a full-screen window mode, a split-screen window mode and a floating window mode;

[0072] Wherein, the full-screen window mode is used to display the design draft visual window in full screen on the canvas page of the review team member;

[0073] The split-screen window mode is used to display the design draft visual window, the audio communication window and the text communication window in different split-screen areas of the canvas page respectively;

[0074] The floating window mode is used to float the design draft visual window, the audio communication window and the text communication window.

[0075] In this embodiment, the full screen window mode is used to display the design draft visual window in full screen to maximize the details of the design draft. Fig.10 As shown in the figure, the split-screen window mode displays the design draft visual window, audio communication window, and text communication window in different split-screen areas of the canvas page. Review team members can communicate by audio and text while viewing the design draft without frequently switching windows. In the floating window mode, the design draft visual window, audio communication window, and text communication window are displayed on the canvas page in a floating form. The floating windows can be dragged, resized, and minimized at will, providing more flexibility and customization space for review team members.

[0076] In an optional manner, the collaborative follow-up review window of each member of the review team supports zooming in, zooming out and moving operations;

[0077] The audio communication window of each member of the review team includes volume adjustment, mute control and recording functions;

[0078] The text communication window of each review team member includes a text search function and a function of viewing text records by time or by team member, wherein the text communication window supports text, emoticons, pictures and links.

[0079] In this embodiment, even if the design draft of the speaker's collaborative follow-up review window remains unchanged, other review team members can also independently and freely enlarge, reduce and move their respective collaborative follow-up review windows. Figures 9a to 9c As shown, through the audio communication window, review team members can independently adjust their own volume, mute, and record. The text communication window has a built-in text search function that can quickly locate relevant text records. In addition to text search, you can also view text records by time or by team member. In the text communication window, you can enter text, emoticons, pictures, and links.

[0080] In an optional manner, the design draft visual window is in the speaker's canvas page, and is used to display a regional real-time view of the speaker's design draft;

[0081] The display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft are distributed and synchronized in real time to the collaborative follow-up review windows of each member of the review team.

[0082] In this embodiment, the design code (such as CSS style, etc.) of the design draft in the canvas page is updated according to the display, addition, deletion, adjustment and dragging operations of each design element in the design draft of the presenter.

[0083] The design code of the design draft is distributed and synchronized to the canvas pages of each review team member (can be a desktop client or web version) through methods such as websocket.

[0084] The canvas pages of each review team member generate a copy of the design draft based on the design code of the design draft. The adjustment of the design draft is achieved by updating the design code. The copies of the design draft generated on the canvas pages of all review team members can be consistent with the design draft of the presenter. Compared with the remote screen sharing method, the updated design draft code is smaller, and compared with the distribution and transmission in video format, it occupies less bandwidth and has a faster distribution speed, which can avoid video freezes. Moreover, since the design draft code is updated and rendered through the canvas pages of each review team member (local client display), the resolution is not affected compared with the remote video sharing method. In addition, the collaborative follow-up review window can be displayed in the form of a rectangular annotation box in the copy area view of the design draft, without occupying more system resources and memory overhead.

[0085] In an optional manner, the method further includes:

[0086] Capturing the mouse position in the real-time view of the area of ​​the speaker's design draft, and distributing and synchronizing the mouse position to the collaborative follow-up review windows of the review team members;

[0087] A virtual mouse cursor is drawn in each collaborative follow-up review window according to the mouse position.

[0088] In this embodiment, the traditional remote video sharing method will display the mouse trajectory of the screen sharer. In order to solve the above problem, the present application captures the mouse position in the real-time view of the speaker's design draft area and synchronizes it to the collaborative follow-up review window of each member of the review team. The review team members can see the speaker's mouse movement in real time.

[0089] In an optional manner, the method further includes:

[0090] During the review process of the design draft, responding to a hand-raising operation by any member of the review team;

[0091] When the presenter agrees with the review team member's raising of his hand, the role of the review team member is set as the presenter;

[0092] The review team member displays, adds, deletes, adjusts and drags each design element in the design draft in the collaborative follow-up review window of the design draft;

[0093] Synchronize the design code distribution of the design draft in the collaborative review window of the review team member to the canvas pages of other review team members;

[0094] The remaining review team members update their respective canvas pages with copies of the design draft in their respective collaborative follow-up review windows according to the design code of the design draft, so as to continue the collaborative follow-up review of the design draft.

[0095] In this embodiment, during the review process of the design draft, if other review team members have review ideas that are difficult to express clearly through voice and text, they can initiate a hand-raising request to obtain the identity or role of the presenter. When the presenter sees the hand-raising request, he can agree or reject the request. If the presenter agrees to the request, the review team member who currently raises his hand is set as the new presenter, and the wireframe color of the collaborative follow-up review window is consistent with the wireframe color of the avatar of the review team member who requested to raise his hand. The new presenter displays, adds, deletes, adjusts, and drags the design elements in the collaborative follow-up review window of the design draft, and captures the above operations in real time and generates corresponding design change codes. The design change code is synchronized to the canvas pages of the remaining review team members through WebSocket. After receiving the new design code, the canvas pages of the remaining review team members update the code of the design draft in their respective collaborative follow-up review windows to form a copy of the design draft.

[0096] In an optional manner, after the presenter agrees with the review team member's raising of his hand, the method further includes:

[0097] The review team member selects a new design draft as the second design draft on the canvas page, and drags the second design draft into the collaborative follow-up review window;

[0098] Synchronize the design code of the second design draft in the collaborative review window of the review team member to the canvas pages of the remaining review team members;

[0099] The remaining review team members update their respective canvas pages with copies of the second design draft in their respective collaborative follow-up review windows according to the design code of the second design draft, so as to conduct collaborative follow-up review on the second design draft.

[0100] In this embodiment, after the presenter agrees with the review team member's raising of his hand, the review team member may need to reopen the new design draft of the local client and drag it into the collaborative follow-up review window, so as to compare the advantages and disadvantages of different design drafts and improve the flexibility of the review.

[0101] Step S103, the review team members click on the speaker's head portrait in the navigation bar of their respective canvas pages to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft.

[0102] In this embodiment, the review team members can click on the speaker's avatar in the navigation bar of their respective canvas pages at any time to join the collaborative follow-up review window of the design draft without entering an account and password, and conduct a collaborative follow-up review of the design draft.

[0103] In an optional manner, the method further includes:

[0104] According to the multiple review finalization marks of the design draft, the design draft is automatically saved as multiple design draft versions for download by the review team members; and

[0105] A collaborative follow-up review playback record of the design draft is generated according to the communication audio information, communication text information and design code modification log of the design draft.

[0106] In this embodiment, for example, designer A, as the presenter, presents the design draft during the review process and explains its design concept and functions. During the discussion, review team members (such as product manager B, front-end developer C, etc.) propose modification suggestions for the design draft. Designer A indicates that the suggestion has been accepted by setting the review finalization mark and automatically saves the current design draft as a new version. Designer A and review team members can see all saved versions of the design draft (such as version 1, version 2, etc.) in the version management interface, and download any version of the design draft for viewing or comparison. After the review is completed, a collaborative follow-up review playback record is generated, and a download link or online viewing function is provided.

[0107] The solution provided by the above-mentioned embodiment of the present invention responds to the speaker's initiation of the review of the design draft in the canvas page, and displays the design draft sharing entrance and the avatars of the review team members in the navigation bar of the canvas page; after the speaker opens the design draft sharing entrance, the collaborative follow-up review window of the design draft is opened in the canvas page; the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window; the review team members click on the speaker's avatar in the navigation bar of each canvas page to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft. Through the collaborative follow-up review window, the review team members can directly follow and switch the speaker's perspective in the canvas page, review and edit the design draft, which not only improves the review efficiency and effect, but also improves the clarity of the design draft viewing.

[0108] Embodiment 2:

[0109] Fig.11 The functional structure diagram of the design draft collaborative follow-up review method device based on the canvas page of an embodiment of the present invention is shown. Fig.11 As shown, the device comprises:

[0110] The collaborative follow-up review initiation module 1101 is used to respond to the speaker's review initiation operation on the design draft in the canvas page, and display the design draft sharing entrance and the review team member portraits in the navigation bar of the canvas page;

[0111] The collaborative follow-up review opening module 1102 is used to open the collaborative follow-up review window of the design draft in the canvas page after the speaker opens the design draft sharing entrance; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window and a text communication window;

[0112] The collaborative follow-up review distribution module 1103 is used for the review team members to click on the speaker's head portrait in the navigation bar of their respective canvas pages to join the collaborative follow-up review window of the design draft to conduct collaborative follow-up review on the design draft.

[0113] In an optional manner, the design draft visual window is in the speaker's canvas page, and is used to display a regional real-time view of the speaker's design draft;

[0114] The display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft are distributed and synchronized in real time to the collaborative follow-up review windows of each member of the review team.

[0115] In an optional manner, the collaborative follow-up review distribution module 1103 is further used to:

[0116] According to the display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft, the design code of the design draft is updated;

[0117] Distribute and synchronize the design code of the design draft to the canvas pages of each member of the review team;

[0118] The respective canvas pages generate a copy of the design draft according to the design code of the design draft;

[0119] The collaborative follow-up review window is displayed in the copy area view of the design draft in the form of a rectangular annotation frame.

[0120] In an optional manner, the collaborative follow-up review distribution module 1103 is further used to:

[0121] Capturing the mouse position in the real-time view of the area of ​​the speaker's design draft, and distributing and synchronizing the mouse position to the collaborative follow-up review windows of the review team members;

[0122] A virtual mouse cursor is drawn in each collaborative follow-up review window according to the mouse position.

[0123] In an optional manner, the collaborative follow-up review distribution module 1103 is further used to:

[0124] During the review process of the design draft, responding to a hand-raising operation by any member of the review team;

[0125] When the presenter agrees with the review team member's raising of his hand, the role of the review team member is set as the presenter;

[0126] The review team member displays, adds, deletes, adjusts and drags each design element in the design draft in the collaborative follow-up review window of the design draft;

[0127] Synchronize the design code distribution of the design draft in the collaborative review window of the review team member to the canvas pages of other review team members;

[0128] The remaining review team members update their respective canvas pages with copies of the design draft in their respective collaborative follow-up review windows according to the design code of the design draft, so as to continue the collaborative follow-up review of the design draft.

[0129] In an optional manner, the collaborative follow-up review distribution module 1103 is further used to:

[0130] After the presenter agrees with the member of the review team raising his hand, the method further includes:

[0131] The review team member selects a new design draft as the second design draft on the canvas page, and drags the second design draft into the collaborative follow-up review window;

[0132] Synchronize the design code of the second design draft in the collaborative review window of the review team member to the canvas pages of the remaining review team members;

[0133] The remaining review team members update their respective canvas pages with copies of the second design draft in their respective collaborative follow-up review windows according to the design code of the second design draft, so as to conduct collaborative follow-up review on the second design draft.

[0134] In an optional manner, a storage and revisit module is further included, which is further used to:

[0135] According to the multiple review finalization marks of the design draft, the design draft is automatically saved as multiple design draft versions for download by the review team members; and

[0136] A collaborative follow-up review playback record of the design draft is generated according to the communication audio information, communication text information and design code modification log of the design draft.

[0137] In an optional manner, the collaborative follow-up review window of the review team members includes a full-screen window mode, a split-screen window mode and a floating window mode;

[0138] Wherein, the full-screen window mode is used to display the design draft visual window in full screen on the canvas page of the review team member;

[0139] The split-screen window mode is used to display the design draft visual window, the audio communication window and the text communication window in different split-screen areas of the canvas page respectively;

[0140] The floating window mode is used to float the design draft visual window, the audio communication window and the text communication window.

[0141] In an optional manner, the collaborative follow-up review window of each member of the review team supports zooming in, zooming out and moving operations;

[0142] The audio communication window of each member of the review team includes volume adjustment, mute control and recording functions;

[0143] The text communication window of each review team member includes a text search function and a function of viewing text records by time or by team member, wherein the text communication window supports text, emoticons, pictures and links.

[0144] The solution provided by the above-mentioned embodiment of the present invention responds to the speaker's initiation of the review of the design draft in the canvas page, and displays the design draft sharing entrance and the avatars of the review team members in the navigation bar of the canvas page; after the speaker opens the design draft sharing entrance, the collaborative follow-up review window of the design draft is opened in the canvas page; the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window; the review team members click on the speaker's avatar in the navigation bar of each canvas page to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft. Through the collaborative follow-up review window, the review team members can directly follow and switch the speaker's perspective in the canvas page, review and edit the design draft, which not only improves the review efficiency and effect, but also improves the clarity of the design draft viewing.

[0145] The algorithm or display provided herein is not inherently related to any particular computer, virtual system or other equipment. Various general purpose systems can also be used together with the teachings based on this. According to the above description, it is obvious to construct the structure required for this type of system. In addition, the embodiment of the present invention is not directed to any specific programming language yet. It should be understood that various programming languages ​​can be utilized to realize the content of the present invention described herein, and the description made to specific languages ​​above is for disclosing the best mode of the present invention.

[0146] In the description provided herein, a large number of specific details are described. However, it is understood that embodiments of the present invention can be practiced without these specific details. In some instances, well-known methods, structures and techniques are not shown in detail so as not to obscure the understanding of this description.

[0147] Similarly, it should be understood that in order to streamline the present invention and aid in understanding one or more of the various inventive aspects, in the above description of exemplary embodiments of the present invention, the various features of the embodiments of the present invention are sometimes grouped together into a single embodiment, figure, or description thereof. However, this disclosed method should not be interpreted as reflecting the following intention: that the claimed invention requires more features than the features explicitly recited in each claim. More specifically, as reflected in the claims below, inventive aspects lie in less than all the features of the individual embodiments disclosed above. Therefore, the claims that follow the specific embodiment are hereby expressly incorporated into the specific embodiment, with each claim itself serving as a separate embodiment of the present invention.

[0148] Those skilled in the art will appreciate that the modules in the devices in the embodiments may be adaptively changed and arranged in one or more devices different from the embodiments. The modules or units or components in the embodiments may be combined into one module or unit or component, and in addition they may be divided into a plurality of submodules or subunits or subcomponents. Except that at least some of such features and / or processes or units are mutually exclusive, all features disclosed in this specification (including the accompanying claims, abstracts and drawings) and all processes or units of any method or device disclosed in this manner may be combined in any combination. Unless otherwise expressly stated, each feature disclosed in this specification (including the accompanying claims, abstracts and drawings) may be replaced by an alternative feature providing the same, equivalent or similar purpose.

[0149] In addition, those skilled in the art will appreciate that, although some embodiments herein include certain features included in other embodiments but not other features, the combination of features of different embodiments is meant to be within the scope of the present invention and form different embodiments. For example, in the claims below, any one of the claimed embodiments may be used in any combination.

[0150] The various component embodiments of the present invention can be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. It should be understood by those skilled in the art that a microprocessor or digital signal processor (DSP) can be used in practice to implement some or all functions of some or all components according to embodiments of the present invention. The present invention can also be implemented as a device or apparatus program (e.g., computer program and computer program product) for executing part or all of the methods described herein. Such a program implementing the present invention can be stored on a computer-readable medium, or can have the form of one or more signals. Such a signal can be downloaded from an Internet website, or provided on a carrier signal, or provided in any other form.

[0151] It should be noted that the above embodiments illustrate the present invention rather than limit it, and that those skilled in the art may devise alternative embodiments without departing from the scope of the appended claims. In the claims, any reference symbol between brackets shall not be construed as a limitation on the claims. The word "comprising" does not exclude the presence of elements or steps not listed in the claims. The word "one" or "an" preceding an element does not exclude the presence of a plurality of such elements. The present invention may be implemented by means of hardware comprising a number of different elements and by means of a suitably programmed computer. In a unit claim enumerating a number of devices, several of these devices may be embodied by the same hardware item. The use of the words first, second, and third, etc. does not indicate any order. These words may be interpreted as names. The steps in the above embodiments, unless otherwise specified, should not be understood as limitations on the order of execution.

Claims

1. A design draft collaborative follow-up review method based on a canvas page, characterized in that: include: Respond to the speaker's initiation of the review operation on the design draft on the canvas page, and display the design draft sharing entrance and the avatars of the review team members in the navigation bar of the canvas page; After the presenter opens the design draft sharing portal, a collaborative follow-up review window of the design draft is opened in the canvas page; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window; The review team members click on the speaker's avatar in the navigation bar of their respective canvas pages to join the collaborative follow-up review window of the design draft to conduct a collaborative follow-up review of the design draft.

2. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 1 is characterized in that: The design draft visual window is in the speaker's canvas page and is used to display a real-time regional view of the speaker's design draft; The display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft are distributed and synchronized in real time to the collaborative follow-up review windows of each member of the review team.

3. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 2 is characterized in that: The real-time distribution and synchronization to the collaborative follow-up review windows of the review team members further includes: According to the display, addition, deletion, adjustment and dragging operations of each design element in the speaker's design draft, the design code of the design draft is updated; Distribute and synchronize the design code of the design draft to the canvas pages of each member of the review team; The respective canvas pages generate a copy of the design draft according to the design code of the design draft; The collaborative follow-up review window is displayed in the copy area view of the design draft in the form of a rectangular annotation frame.

4. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 3 is characterized in that: The method further comprises: Capturing the mouse position in the real-time view of the area of ​​the speaker's design draft, and distributing and synchronizing the mouse position to the collaborative follow-up review windows of the review team members; A virtual mouse cursor is drawn in each collaborative follow-up review window according to the mouse position.

5. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 1, characterized in that: The method further comprises: During the review process of the design draft, responding to a hand-raising operation by any member of the review team; When the presenter agrees with the review team member's raising of his hand, the role of the review team member is set as the presenter; The review team member displays, adds, deletes, adjusts and drags each design element in the design draft in the collaborative follow-up review window of the design draft; Synchronize the design code distribution of the design draft in the collaborative review window of the review team member to the canvas pages of other review team members; The remaining review team members update their respective canvas pages with copies of the design draft in their respective collaborative follow-up review windows according to the design code of the design draft, so as to continue the collaborative follow-up review of the design draft.

6. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 5, characterized in that: After the presenter agrees with the member of the review team raising his hand, the method further includes: The review team member selects a new design draft as the second design draft on the canvas page, and drags the second design draft into the collaborative follow-up review window; Synchronize the design code of the second design draft in the collaborative review window of the review team member to the canvas pages of the remaining review team members; The remaining review team members update their respective canvas pages with copies of the second design draft in their respective collaborative follow-up review windows according to the design code of the second design draft, so as to conduct collaborative follow-up review on the second design draft.

7. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 6, characterized in that: The method further comprises: According to the multiple review finalization marks of the design draft, the design draft is automatically saved as multiple design draft versions for download by the review team members; and A collaborative follow-up review playback record of the design draft is generated according to the communication audio information, communication text information and design code modification log of the design draft.

8. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 1, characterized in that: The collaborative follow-up review window of the review team members includes a full-screen window mode, a split-screen window mode and a floating window mode; Wherein, the full-screen window mode is used to display the design draft visual window in full screen on the canvas page of the review team member; The split-screen window mode is used to display the design draft visual window, the audio communication window and the text communication window in different split-screen areas of the canvas page respectively; The floating window mode is used to float the design draft visual window, the audio communication window and the text communication window.

9. The method for collaborative follow-up review of design drafts based on canvas pages according to claim 2, characterized in that: The collaborative review window of each member of the review team supports zooming in, zooming out and moving operations; The audio communication window of each member of the review team includes volume adjustment, mute control and recording functions; The text communication window of each review team member includes a text search function and a function of viewing text records by time or by team member, wherein the text communication window supports text, emoticons, pictures and links.

10. A design draft collaborative follow-up review device based on a canvas page, characterized in that: include: A collaborative follow-up review initiation module is used to respond to the speaker's review initiation operation on the design draft in the canvas page, and display the design draft sharing entrance and the review team member portraits in the navigation bar of the canvas page; A collaborative follow-up review opening module is used to open a collaborative follow-up review window of the design draft in the canvas page after the presenter opens the design draft sharing entrance; wherein the collaborative follow-up review window includes a design draft visual window, an audio communication window, and a text communication window; The collaborative follow-up review distribution module is used for the review team members to click on the speaker's head portrait in the navigation bar of their respective canvas pages to join the collaborative follow-up review window of the design draft to conduct collaborative follow-up review on the design draft.

Images