Formeditor

Formeditor is a WYSIWYG multi-column form editor, which can provide users with the most real-time selection of customization, and supports a variety of field formats such as: text, single selection, multiple selection, drop-down menu, date, signature. It is an editor package for the printing and filling requirements of corporate forms.

Keywords : UIUX, research, interaction, animation, wireframe,user flow, competitive analysis

1.Reseach

1.1 現況

表單在企業中大量被使用到，而每間公司的使用表單的方式與排版種類繁多，為了能掌握目前大致有哪幾種表單的規劃，一開始我們先廣泛在網路上蒐集企業表單的相關資訊與排版方式。

1.2 競品分析

2.Ideation

2.1 探索製表模式

研究了許多製作所見即所得編輯器後，這個階段發想了幾種快速製作表單的模式，其中了有兩種比較可行的方案。

構想一 // 先規劃出格子，再框選範圍並賦予性質

較接近Excel 或是 Word 的製作表單方式，先建立好一些基礎的格子，再用合併儲存隔的方式去規劃這個欄位要占的格數以及分配欄位屬性。

構想二 // 加入組件時，就附有格式與性質

操作較接近google表單或問卷形的設計模式，採用一列一列增加，但是比較特別的是我們這裡需要在滿足一列裡面又可以含有左右排版的形式

與團隊討論後，依據開發的時程、後續的可擴充性、操作方便程度，我們決定選擇構想二為主設計方向。

2.2 限定範圍

選定構想二後，由於此模式必須將每列都視為一個組件，有哪些組件需要被設計出來是一個難題，我們選了企業常用表單出來，嘗試用構想二的方式去構築表單，捨棄一些表單中較複雜的構成方式並試著用最簡單的方式來組成一張企業表單，將組件縮小在這幾個範圍方便在設計時規劃這些格式的操作方式，於是我們我們歸納出幾個常用的組件，分別為標題、表頭字、空白、左右式輸入框、上下型輸入框、多欄位型等幾種組件。

重構後的表單👇

歸納後拆出組件👇

3.Design Development

3.1 探討加入格式方式 - Wireframe Prototype 1

市面上的編輯器新增的模式也各有不一，在設計如何新增組建模式時，發想了兩種可行的情境，並判斷何者更適合此專案

構想一 // 將組建顯示於右側，並使用拖拉的方式新增組件。

構想二 // 滑鼠靠近表格時會顯示新增按鈕，按下後會跳出格式視窗，選擇後即新增格式

由於考量到之後空間上還需要擺放很多編輯按鈕，我們決定使用構想二讓整體空間有更多餘韻，

3.2 考量整體操作模式 - Wireframe Prototype 2