將你的網站轉為 Windows App- 使用 Windows App Studio

[感謝微軟學生大使、清華大學計量財務金融學系賴虹安同學,協助翻譯原發佈於 Building Apps for Windows 部落格中的文章:Building Hosted Web Apps with Windows App Studio]

以下則是賴同學在 3 分鐘內,將自己的履歷網站轉為 Windows App 之經驗分享:

將你的網站轉為 Windows App- 使用 Windows App Studio)
如果你已經擁有自己的 Web App ,並且有公開的 URL ,那麼只要使用 Windows App Studio (有中文介面) 裡的 Hosted Web App 範本,你就可以輕易地將它轉移成 Windows 10 的 App 。 Windows App Studio 這個線上服務,能讓無程式基礎的人也能輕鬆地創建 Windows 系統上的 App 。這篇文章將帶各位了解如何建立屬於自己的 Hosted Web App 。

在 Windows App Studio 裡,你可以藉由範本或是空白的網頁畫布( canvas )於瀏覽器中創建原生 Windows 10 App ,接著加入所需資訊、數據、服務及風格設計等等。建立完成後,你就等於建構了一個 Visual Studio Solution 、側載套件( Sideloading Package )或發行套件( Publishing Package )的App,同時也代表著,你將接觸到 Windows Store 中超過 20 億個 Windows 10 裝置的使用者。
在眾多範本中,可讓無障礙網頁( Accessible Websites )及 Web App 發布至 Windows 上的便是 Hosted Web App ( HWA )。它會要求你輸入Web App 的 URL 、新增 App 的圖示( icon )、確認所有設定、並準備發布至 Windows Store 。而這些步驟只會花費你一些時間即可完成。
底下這些生活日常所花費的時間甚至比建一個 HWA 的時間還多呢!例如:
 檢查 E-mail
 微波一袋爆米花
 逛逛百貨
 刷刷牙
 欣賞電視節目中的廣告片段(建 HWA 的最佳時間!)

所以如果你願意花 3 分鐘的時間來學習,那就讓我們開始吧!1_foursteps

步驟 1 :建立專案
如果你還沒用你的 Microsoft 帳號登入 Windows App Studio ,別擔心,這是一項完全免費的服務,成功登入後前往「 Start New Page 」,那裏就會有建立 HWP 的選項。

2_createyourHWA

點選建立 Hosted Web App 後,會有一個彈出視窗,輸入你的Windows App 的名字後點擊「 Start with this one 」,而右側的裝置預覽( device previews )將會展示 App 在各式裝置螢幕上的呈現樣貌。

3_nametheapp

步驟 2 :安裝 App
在建立專案後,你會前往內容編輯( Content )的頁面,在這個頁面你唯一需要做的事情便是輸入你想要轉換的網頁 URL 。

4_themanifest

接著你可以選擇上傳安裝資訊檔( Manifest ),或是你也可以定義新的URL 規則以及旋轉偏好( rotation preference ),但是這些都是非強制性的喔!
在右方預覽的螢幕上,會顯示你的 HWA 在各式裝置螢幕上的顯現效果,如果你沒有預覽成功也不必擔心,這通常代表這個網站不被允許嵌入在iframe 裡,但仍然是可運作的喔!
在輸入 URL 及其他相關資訊後,你可能會想要更新 App 的預設 icon ,只要點擊 Content tab 裡導覽列上的 icon 就可以打開 icon 編輯器了。

5_iconeditor

接著點擊「 App Logo 」下方的圖標,就會打開一個資料夾,在裡頭你可以選擇你想要的 icon 來使用,上傳自己喜歡的 icon 後,這個工具將會自動產生各種 icon 大小供你使用。

最後,點擊「 Settings 」來編輯你的市集( Store )清單細節,例如: App 的描述、語言、市集相關細節、隱私條款,以及其他資訊等。在發布到市集前,你需要填妥市集相關資料,更多詳細發布指示請見文件 (中文)。

6_publishtostore

步驟 3 :建立 App
當你完成安裝設定後,點擊上方灰色「 Finish 」按鈕,你將被導入一個新的頁面,在此頁面你可以瀏覽你的 App 在各式裝置上的新樣貌,而你在這個頁面所需要做的事情,便是點擊上方「 Generate 」大按鈕,接著會打開一個彈出視窗,選擇你所要的產生的套件即可( Visual Studio Solution 通常為預設選項)。
值得注意的一點是,為了能夠產生發行套件,你必須確實完成上述所提的市集相關資訊。

在所有步驟都結束後,按下「 Generate 」,等候一分鐘,你就可以擁有屬於自己的 App 囉!

結論
只要上述這些步驟,就能輕鬆在 Windows App Studio 建立一個 HWA ,是不是非常簡單?
如果你在使用這個工具後有任何意見,我們都非常歡迎你提出與我們分享喔!

App 設計:我該從哪開始?

[感謝微軟學生大使、清華大學計量財務金融學系賴虹安同學,協助翻譯原發佈於 Building Apps for Windows 部落格中的文章:Getting Started With App Design]

在軟體產業裡,我們總是常常聽到設計者和程式開發者在溝通上有代溝,因次希望能藉由本篇文章,介紹大家一些設計 App 的小撇步,幫助大家設計出更吸引人、比別人更成功的 App,同時也能減少工程師和設計者之間的隔閡!

淺顯易懂的設計 Demystifying Design

就跟工程師一樣,「設計」也是需要藉由不停的練習,才能將自身的技能結合想傳達的資訊,完美的傳遞給使用者。一些基本的技能包括:

  • 排版 Typography
  • 色彩學 Color Theory
  • 視覺平衡 Visual Balance
  • 圖像研究 Iconography
  • 導航列設計 Navigation
  • 設計素描 Sketching

當你學會並且時常練習這些基礎功後,你將會發覺許多以往你可能忽略的色彩美學或排版技巧,甚至,你更有可能藉此知道往後該如何修正自己的 App,讓現有的作品擁有更美觀的視覺呈現。

讓我們開始吧!Getting Started!

設計,絕不能等程式開發完的最後一刻才開始動工。做為一個 App 開發者,你可能已經發現 App 的功能和其設計息息相關。舉例來說,一旦你在功能選單放入太多項目,有些重要的功能常常在最後看起來已沒那麼重要;你也有可能發現,在設計完 App 的主視覺、編寫程式後,自己像是擁有兩個 App 而非一個。然而,設計者們卻有不少能力能解決上述這些狀況。

– 這個 App 的重點是什麼?

在開始著手設計前,請先記得了解自己的 App 的用途為何、你希望 App 使用者能夠如何使用。如果你是一個偏好視覺走向的開發者,那麼就想像這裡有一個完全空白的畫布,並且思考你要放什麼內容進去;如果你喜好利用語言、文字來表達,那麼建議你採用清單條列式來呈現。若你不屬於上述二者,那麼就先把所有你覺得你用的到的功能、希望的色彩和選單都先放上去。

接下來的重頭戲便是「簡化」。雖然這可能讓人心煩,尤其是在當你把所有心血都放上去後,但是現代 App 設計最重要也是唯一的大準則便是:化繁為簡。太多的重點和功能會混淆使用者,過多的畫面則會讓使用者難以瀏覽及記住剛剛瀏覽過的項目在哪,所以請開始動手「簡化」吧!

你可以畫一條線刪掉那些其實你並不需要的功能,然後再畫一條線,刪掉那些你覺得你需要但是其實並不適合其他清單上的項目;在反覆此步驟後,你就會發現你已經將你的 App 簡化成它最單純的樣子囉!

– 了解你的消費者

現在你需要了解你的 App 究竟是為誰而設計。

你的 App 是為孩童或是成人而設計?是為繁忙的專業人士還是賦閒在家的人所設計?這個 App 是用來做為科技知識突破所用還是給那些需要協助的人們所用?釐清這些問題將幫助你構思出整體外觀、給人的感覺以及排版設計。舉例來說,繁忙的專業人士沒有太多時間閱讀過多的文字,然而針對那些較少接觸科技的人來說,他們需要較多提示及線索來使用 App;此外,比起仿舊風,孩童大多較喜歡明亮的顏色設計。

2_inspiration

了解你的目標消費者後,起身去和他們聊天吧!不要覺得這個舉動很多此一舉,一旦你付出越多了解你的消費者,往後設計app時你將更得心應手。在和他們談話時,可以徵求他們的同意後,錄下談話時的影片並且觀察他們、詢問他們相關問題,從中發現他們希望從你的 App 中得到什麼樣的幫助或便利。

– 靈感啟發

記得主動找尋靈感!無論是蒐集照片、字體、名言佳句、文章、或是任何和你的 App 及消費者相關的設計,甚至是那些你驚鴻一瞥的小事物,把這些材料都拿來當作你設計及程式開發的靈感來源吧!當然,你得在原創作者同意下再把這些元素加入你的 App 裡。此外,你可以觀察其他已開發的同性質 App,同時思考是否有哪些地方是你可以做為借鏡,改善自己的 App。

1_inspiration

同樣重要的是,別忘記繪製草稿!把握所有機會,拿起筆或是蠟筆在紙上畫下 App 的設計草圖,這同時也是幫助你的「設計腦」永保靈活的一項練習。將你所有草圖都保存在安全的地方,並在開發 App 進入尾聲時將當初的草圖們都拿出來溫習,你會很開心能看見這個 App 一路的蛻變。

– 原型開發

不論是畫草圖 (sketch) 還是線框稿 (wireframe),根據消費者給你的意見回饋建構出各種不同的畫面設計,並且,想像消費者在執行任務時所會採用的流程。你可以使用任何對你有利的方法建構原型,假設對你而言在 Visual Studio 或 Blend 上做介面設計是較快速的,那麼就使用這些工具吧!但務必注意,在這個階段你不需要太專業的軟體或是具備非常頂尖的繪畫能力,使用記事本或是繪圖板就可以了。更棒的是,你可以直接在便利貼上設計你的 App,如此一來你就可以更輕易的移動畫面元件來看不同的排列組合所呈現出來的樣貌,你甚至可以在發現排列組合的結果不是你所期望後,輕鬆地把它們放回去。

如果你不確定該從何處下手,建議你可以先看看那些和你的 App 類似的作品並且發現是否有適合你的 App 的設計流程。

3_prototypes

現在,試試看移動畫面上的元件,如果你原本是從上方導覽 (top navigation) 開始,那你可以改試著將導覽從左邊開始;如果你原本設計的介面是擁有大型的文字頁首 (header),那你可以嘗試將他移到畫面的底端;按鈕 (buttons) 和內容儀表板 (content panels) 也可以隨意的移至其他地方;將文字和按鈕分離或是將連結 (links) 和文字分開;透過這些更動,你會在最後找到最適合這個 App 的設計。

4_sketching

– 鼓起你的勇氣

現在去找一些測試者 (至少5人),請他們在看過你的原型 (prototype) 後給予你意見,在此強調,這種易用性測試 (usability testing) 或市場調查 (market research) 比起一般的問答測驗 (QA testing) 來的好。

5_iterate

如果你找不到任何人願意協助你,那麼就試著想像自己是第一次使用這個 App,並思考這個 App給你的第一印象會是什麼?當你看著它是否就能夠猜出它的功能是什麼?是否就能了解下一步該怎麼做?

如果上述問題有任何答案是讓你不滿意的,那就再次拿起你的便利貼,重新尋找最佳的設計方法。先前那些你用來構思草圖的便利貼及付出的時間與心力都需要善加保存與紀錄,這些將協助你找到最終的完美解答。

大功告成 Wrapping Up

在每一步驟開始前審慎思考 App的設計會幫助你判斷程式開發與介面設計相對應的優先順序。按照本篇文章的引導,你將可以更早發現問題並解決,同時避免往後可能面臨之一切重大錯誤。

若想獲得更多資訊,歡迎瀏覽「Plan Your Universal Windows Platform (UWP) App」。