天天看點

《iOS應用軟體設計之道》—— 2.10 畫工作流程草圖

本節書摘來自華章出版社《ios應用軟體設計之道》一 書中的第2章,第2.10節,作者:(美)william van hecke ,更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

工作流程草圖就是應用軟體裡不同畫面的地圖,從一個畫面移動至另一個畫面,就像是應用軟體可視的高層次提綱。倘若你的應用軟體相當簡單,也許在一張圖中就能畫出所有的東西;否則,可以将其分割成幾塊,每塊分别畫出相關部分。例如,假設你的ipad應用軟體有幾個浮動框,你可以為每個浮動框都畫個地圖。有的應用軟體通過一貫方式(如頁簽)來快速切換功能塊。對于這類應用軟體,就适合為每個頁簽賦予其自己的工作流程地圖。

工作流程最抽象時,可以采用方塊與箭頭線的簡單組合,來展示應用軟體不同畫面間的路線關系。假如每個節點呈現你用來切換狀态的控件,你可以将這些控件關聯至它導向的地方:從控件上畫個箭頭線,從它所在的畫面出來,直達它所導向的畫面。箭頭線的根位于控件上,而箭頭指向某個整體畫面。

《iOS應用軟體設計之道》—— 2.10 畫工作流程草圖

ipad應用軟體上有種流行的布局方式,就是主從複合結構(master/detail):左邊是側邊欄,控制右邊主内容區顯示的内容。如果你采用了主從複合結構,則要確定使用者在導航左邊框條目時,右邊主内容區顯示對應的内容。

工作流程草圖有助于確定應用軟體切換畫面時有合理的路徑。你可以找出多餘的路徑:在初始啟動畫面與賬号配置畫面間,真的需要三個畫面嗎?你還可以發現哪些地方有太多的路徑到同一地方:你需要四種不同路徑到達設定畫面嗎?或許,能否删除其中的三種路徑?倘若應用軟體的地圖似乎難以解釋這些流程,就說明它實作起來會讓人糊塗。

在ios上,人們對你的應用軟體的期望是,進入應用軟體,迅速找到所需的任務,做完、退出。他們不想在導航頁面之間繞來繞去。事實上,你的工作流程應當包含一個即時的home按鈕,随時可用而沒有負面作用。當然,使用者花到應用軟體上的時間取決于該應用軟體。人們在電子閱讀器應用軟體裡花的時間往往比股票行情查閱應用軟體多。但即使在你的應用軟體長時間會談的中間,使用者仍然可能會切換至其他程式,例如到twitter,或者到wikipedia查閱詞條,或者在待辦事項清單裡添加任務。工作流程應當盡可能地提供快捷方式,讓人們容易回到最重要的幾個畫面。

圖2.5給出了snacklog裡的臨時摸索性草圖會話,它結合了照片與數字鍵盤的功能。它從圖2.2裡那個平淡無奇的畫面開始,點選price欄目切換至文字輸入畫面,裡面顯示一個鍵盤;或者點選take photo按鈕對實物進行抓拍。

這裡重要的是什麼?逐個畫面畫出草圖,能夠讓設計者認識到組合它們的價值。如果設計人員不把這些草圖畫在紙上,是無法體驗出來的。要構思該軟體的核心創新之處,就是要信手塗鴉,然後盯着看一分鐘。遵從錯誤邏輯結論的設計,是個讓你不再拘泥于“不想怎樣做”的好辦法。而另辟蹊徑,故意畫個錯誤設計,卻可以直接得到正确的設計效果。

圖2.6對snacklog的新思路給出了更精緻的工作流草圖。這是個簡單的應用軟體,根本沒有太多的畫面。其他應用軟體也許有幾十張畫面。控件的細節并不重要,是以這些控件用相當簡潔的方式表達出來。

《iOS應用軟體設計之道》—— 2.10 畫工作流程草圖

請注意,流程設計隻有幾個畫面,進入應用軟體、記錄事項的過程也不崎岖坎坷。這裡沒有快捷方式,因為從任何給定畫面到其他畫面都隻需要幾次點選。隻有在其他方式要耗費太多麻煩才能導航的時候,才需要快捷方式。可以參考iphone上music應用軟體的做法,它讓你用頁簽來從四節中的任何一個切換至頂層,而不是一直點選back按鈕。

繼續閱讀