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

個人參與的工作及貢獻

與同伴進行產品設計理念的討論

進行相關用戶調研

產品整體結構的構建和架構分析

構思並實現產品的布局排版和原型

對交互效果以及功能進行了反復調試

制作界面介紹圖片和整理項目文案

一、簡介與平台選擇

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等主流系統。其中對於屏幕尺寸狹小的移動端，計划使用滑動方式來拉出擴展界面。

二、原型設計工具的選擇

理念及思路

我們在設計原型的時候一是要提升原型設計的合理性，二是要減少原型設計所占用的時間。因此，我們隊伍在明確了產品需求之后各司其職分工合作。

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

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

Axure

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

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

墨刀

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

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

Mockplus

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

綜合考慮，我們最終選擇了Mockplus作為我們團隊的開發工具。

三、界面模塊與功能介紹

主界面

按鈕組（對應模塊介紹圖模塊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獲取的全部計算過程、科學計算結果等，采用響應式布局。

通過點擊按鈕 \([>]/[<]\) 可以展開或者收回擴展模塊。

四、參考文獻

[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.