原型設計工具比較及實踐 基於WolframAlphaAPI的科學計算器原型設計

基於WolframAlphaAPI的科學計算器原型設計

我的參與的工做及貢獻

• 與同伴進行產品設計理念的討論
• 進行相關用戶調研
• 產品總體結構的構建和架構分析
• 構思並實現產品的佈局排版和原型
• 對交互效果以及功能進行了反覆調試
• 製做界面介紹圖片和整理項目文案

1、簡介與平臺選擇

Wolfram Alpha

Wolfram Alpha是由Wolfram Research開發的計算搜索引擎。該在線服務提供了有關事實性問題的答案，而不是一般的搜索引擎所提供的連接列表。Wolfram Alpha於2009年5月18日發佈，基於之前的產品Mathematica，該計算平臺集成了代數，數值，符號，統計計算功能以及圖形顯示功能

Wolfram Alpha提供的答案不包含連接，而是包含圖形，圖表，表格和圖形。它不只會提供確切的答案，還會顯示一個有序的頁面，其中包含來自通過驗證的來源的其餘信息。

這種基於數學模型和算法的搜索引擎多是語義網中的理想選擇。

原型設計理念

通過短期的討論，並結合咱們團隊的開發經歷，最終決定選擇計算器題目進行設計。和普通的計算器同樣，主界面包含基礎按鍵[1]和算式輸入框[2-1]和結果輸出框[2-2]，方便普通用戶在平常生活中，能夠快速的使用本產品進行簡單的計算。

其次咱們加入了一個擴展界面[4]，用於顯示從WolframAlpha獲取的科學計算過程與計算結果、函數圖形等，用於知足專業用戶的科學計算需求。

（組件標號請參考附件-模塊介紹圖）

理想支持平臺

初期界面設計風格簡譜，計劃用於Web端和Windows、Linux、MacOS、Android9.0+、IOS等主流系統。其中對於屏幕尺寸狹小的移動端，計劃使用滑動方式來拉出擴展界面。

2、原型設計工具的選擇

理念及思路

咱們在設計原型的時候一是要提高原型設計的合理性，二是要減小原型設計所佔用的時間。所以，咱們隊伍在明確了產品需求以後各司其職分工合做。

對目前經常使用的原型設計工具進行橫向對比

咱們分別依次嘗試了墨刀,Axure,Mockplus等軟件，從他們的特點功能、性價比、學習曲線等多個角度進行了分析。

Axure

AxureAxure RP是美國AxureSoftware Solution公司旗艦產品，是一款快速的產品原型設計工具，讓負責定義需求和規格、設計功能和界面的專家可以快速建立應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。做爲專業的APP原型設計工具，它比通常建立靜態的原型設計工具要快速、高效。它具備強大的交互效果,同時方便多人協做,有着便利的版本控制管理和動態面板,此外還有豐富的控件元素。

但相較而言,Axure的學習成本較高,熟練掌握所須要的時間更長,它的價格也是勸退咱們的一個理由。

墨刀

墨刀的定位是主要用於設計移動APP原型，其控件的拖拉、大小的調整，都會天然去匹配相應的母版大小，很是人性化。再者，墨刀提供了強大的共享建立功能，方便用戶的手機上預覽原型。

但咱們認爲缺點在於對交互效果、控件組合、操做面板的選擇都不如Axure靈活，內置交互效果包括點擊、滑動、滾動等，作高保真原型的時候不夠用；另外，效果切換由於是採用連線的方式，有時會讓用戶產生錯亂的感受。

Mockplus

Mockplus是一款簡潔快速的原型設計工具。適合軟件團隊、我的在軟件開發的設計階段使用。其低保真、無需學習、快速上手的特色簡直是爲咱們這樣的初學者量身打造，並且它的功可以用並可以很好地表達本身的設計，知足衆多的工做需求。有別於Axure的繁複，Mockplus致力於快速構建和迭代原型，爲設計者提供簡潔高效的設計方式。相較於Axure的厚重，Mockplus更顯輕盈。並且它的學習成本較低，學習曲線平滑，方便咱們快速上手完成任務，同時它的價格也是十分親民，假如往後有需求的話咱們購買起來負擔會小不少。

綜合考慮，咱們最終選擇了Mockplus做爲咱們團隊的開發工具。

3、界面模塊與功能介紹

主界面

按鈕組（對應模塊介紹圖模塊1）

主界面上的最大的交互集成模塊，由30個按鈕組成，其中包括26個經常使用數學按鈕和4個特殊按鈕。按鈕排列參考了一些人體工學文獻，每個按鈕單獨綁定了邏輯函數與動畫效果，按鈕個體之間相對獨立，用戶能夠經過點擊按鈕操做程序。

經常使用數學按鈕（26個）

用戶能夠經過點擊，來對輸入框的算式追加輸入，起到和從鍵盤輸入同樣的效果。

這些按鈕包括：

• 數字按鈕 \([0-9],[.]\) 和 \([00]\)；
• 特殊符號按鈕 \([\pi],[e]\)；
• 運算符號按鈕 [^]\(,[\%],[(],[)],[!],[/],[*],[-],[+]\)；
• 三角函數按鈕 \([sin],[cos],[tan]\)；

特殊按鈕（4個）

特殊按鍵斷定的並非簡單的輸入，而是特殊的邏輯操做。

• 按鈕 \([清空]\)（對應模塊介紹圖中組件[1-1] ）：
  • 正如名字所述，按下後會清空輸入區和輸出區的內容。按鈕配色爲紅色，用來區分於其餘按鍵，而且紅色可讓人引發注意，必定程度上防止誤觸。
• 按鈕 \([退格]\)（對應模塊介紹圖中組件[1-2]）：
  • 按下功能是使輸入區中的算式退一格。配色爲深灰色，同理區分其餘的按鍵。
• 按鈕 \([>]\)（對應模塊介紹圖中組件[1-3]）：
  • 這個是擴展界面的展開按鈕，點擊一下後會在主窗口右側展開一個擴展界面（如模塊介紹圖-展開所示），展開以後按鈕變成 \([<]\) 收回模式，再次按下能夠收回擴展界面。
• 按鈕 \([=]\)（對應模塊介紹圖中組件[1-4]）：
  • 等於號按鈕，在按下後程序將輸入區中內容傳入後端計算，並將計算結果顯示在輸入區下方的輸出區。

文字框

這裏是程序與用戶的信息交互區域和主要顯示模塊，負責顯示和記錄用戶的輸入和簡要計算結果的輸出。由輸入區和輸出區兩個文本區域組成，其中輸入區是用戶能夠編輯的，用戶能夠經過按鈕或者鍵盤在其中輸入算式，而輸出區是隻讀組件，用戶只能複製其中內容。

• 輸入區（對應模塊介紹圖中組件[2-1]）：
  • 輸入區是顯示用戶的輸入和可讓用戶直接編輯的區域，使用萬用編碼（UTF-8）。通常的計算器若是想成功獲得計算結果，用戶必須輸入符合算式規則的語句。可是因爲咱們的計算器基於WolframAlphaAPI，因此理論上算式模糊或者天然語言描述依舊能夠獲得計算結果。
• 輸出區（對應模塊介紹圖中組件[2-2]）：
  • 輸出區用於顯示算式的最終結果，在按下等於號以後，將後端傳來的輸入區計算結果直接顯示出來，一樣適用萬用編碼。用戶能夠經過右鍵輸出區快速複製計算結果。

做者信息

區域由一些指向外部連接的按鈕組成，其中包括咱們的各類聯繫方式。

擴展界面

擴展界面只包含一個模塊——擴展模塊（對應界面模塊介紹_展開中模塊[4]）。

擴展模塊負責顯示從WolframAlphaAPI獲取的所有計算過程、科學計算結果等，採用響應式佈局。

經過點擊按鈕 \([>]/[<]\) 能夠展開或者收回擴展模塊。

4、參考文獻

[1] 章曲，谷林.人體工程學[M].北京：北京理工大學出版社，2009：12-17.

[2] Manuel Mateo,Marc Tarral,Pedro M. Rodríguez,Asun Galera.Ergonomics as basis for a decision support system in the printing industry [J]. Central European Journal of Operations Research, 2020, Vol.28 (4), pp.685-706.

5、附件

    1.模塊介紹圖

    2.模塊介紹圖-展開

    3.用戶調研

    4.原型演示1

    5.原型演示1-展開

    6.原型演示2

    7.原型演示2-展開1

    8.原型演示2-展開2