如何根據你的網站創建一個移動 APP

原文：How to create a mobile app based on your website

原文地址：https://medium.muz.li/how-to-create-a-mobile-app-based-on-your-website-a85da836b7f6

作者：Elena Lysiakova

翻譯：Tsien

如今，每一家具備在線業務的第三方公司都在考慮創建一個移動APP或移動版網站。今天，我們來討論下哪種方式更方便，以及需要使用哪些技術用來征服移動市場。

從一開始，我想指出的是，幾年前在「移動版本的網站」下，我們暗示了需要單獨開發一個移動設備的獨立版本，而現在這個術語只意味著創建自適應模式的方案。

移動APP或移動版網站

浮現在任何企業腦海中的第一個問題是選擇什麼——一個移動 APP或一個自適應模型？

決定到底什麼樣的商業策略適合於您，最重要的是從開始制定攻克手機市場的時刻開始，就要找出您行動的目標。

如果你從整體局勢上來看，移動 APP似乎更可取，也更適合投資。

從界面的角度來看，移動APP總是看起來更美觀，因為它們獨立於每個移動設備的瀏覽器或者屏幕尺寸，他們是為特定的平台（比如 iOS）而創建的。安裝移動APP後，很少需要上網做後續工作。

不過，選擇移動APP也有一些缺點。最大的缺點是資源，移動應用在開發過程中需要更多的時間、金錢和人力資源。預估該項目的推出將更加困難，在應用商店中發布你的 APP可能需要花3天到幾周的時間才行。

如果你不想從一種選擇跳轉到另一種選擇，那麼你需要了解項目的主要參數（可供選擇的只有3個）——你想達到的目標，你的預算，你的目標受眾。大多數情況下，了解你的預算就足夠了——開發移動 APP更昂貴。如果你沒有預算限制，最好是看一下主要目標：如果是這樣，你只需要提高你的 Google索引（移動優先的方法），這比開發移動版本的網站還管用。

如果你仍然不知道該選擇什麼，那麼我有一個折中的建議——帶有瀏覽器組件的移動APP。

我可以給你舉一個例子，就是著名的 IMDB應用程序。頁面的主模板在應用程序中，而一些頁面（即將上映的新電影）則是從瀏覽器中載入的。在這種情況下，你只需使用互聯網來載入新的內容（電影），但是你的應用程序將會在沒有網的情況下整體上穩定運行。

為什麼人們選擇移動APP開發

根據我們的經驗，在創建移動APP時，根據你的目標，我們可以看到幾個原因。主要的原因是你想要收集並擴大用戶資料庫，並且進入新的移動用戶群。有時，是因為公司想要引領潮流，站在技術和創新的前沿。此外，看看你的競爭對手，如果他們當中的前五名都有移動APP，那麼最好的方法是跟隨他們，保持競爭力。

當你決定創建一個移動APP時從哪開始

選擇平台

首先，你需要在平台上做出決定。你不需要同時為所有平台開發一款APP。此外，我們建議從一個平台開始，也許你根根就不需要其它類型的平台了。

要選擇一個平台，你需要確定你的 APP的目標和你想到達的受眾。如果你想從你的APP中賺錢，專註於商業用戶，那麼從iOS開始更好，因為它的付費用戶最多。如果你想要吸引更多的受眾，你的APP 沒有內購，最好從Android開始——大多數廣泛使用的設備在這個平台上工作。

決定移動APP的任務

在這個階段，你需要考慮你的APP將解決的任務。

你的主要目標將幫助你構造APP的任務池。舉個例子，想像一下，你決定為你的在線商店創建一個APP，目標是讓你的客戶有能力通過平板電腦和智能手機選擇和購買商品。

基於這個目標，你可以形成一個任務池：你需要方便的導航、商品搜索、快速排序處理、跟蹤和同步。

如果你有不同的目標，比如在你的商店運行期間引入社交功能，那麼任務也會有所不同。對於這種目標，舉個例子，你可以在你的商店中加入輕社交，用戶可以在照片上標記項目（這些標籤將會通向特定的專題頁面）。通過這樣做，你就可以解決你的主要銷售目標，同時提高你的客戶忠誠度，以及他們在商店生活的參與度。

如果你的目標是征服一個國際市場，那麼你的應用就需要解決其他問題。首先，它必須適應新的市場。這裡我們舉例，如果你要去中國市場，你最好讓你的APP能夠掃二維碼。

在定義完任務之後做什麼

在這個階段，有必要進行競爭對手的APP分析（如果你以前沒有做過的話）。如果你想讓你的APP解決相同的任務，現有的APP都能解決，那麼最好再多想想。你還能做些什麼來從競爭者中脫穎而出呢？

記住，當你創建一個移動 APP時，你不需要把所有可能的功能都裝進去。最好還是保持一兩個主要功能，集中開發於它。

根據你的主要功能，決定你的應用將具有哪些組件。最後，你準備好了繼續。

在項目的這個階段，我們經常會有一個問題，那就是有沒有必要把你的網頁結構完全地應用到這個APP中。在某些情況下，你可能會認為許多組件都被遺漏了，但實際上並非總是如此。我們的關鍵任務是從網路上遷移用戶到你的移動APP，而不會丟失他以前經常使用的關鍵功能。你的應用程序不需要在給用戶添麻煩的情況下工作。

讓我們來看一個簡單的例子，建築材料的線上商店提供了大量的諮詢形式，有許多可供選擇的選項，比如交付類型（到付或自付），材料的數量，在哪裡樓層交付你的訂單等等。如果你排除了交付選項的類型，那麼習慣了網路表單的用戶可能會在功能中迷失。這將導致訂單的丟失和對不方便APP的卸載。

這就是為什麼當你把結構從網路遷移到移動APP的時候，我們需要考慮用戶經常使用的功能特性。在某些情況下，網站地圖可能會幫助你。不過，你也需要對網站地圖保持謹慎。

如何使用網站地圖

如果你決定將你的網站地圖應用到你的移動APP中，那麼你將面臨致命的後果。你會混淆你自己和你的用戶，使APP功能冗雜，使用變得不方便。

如果你真的想不忘記任何必要的細節，把網站地圖作為移動APP的參考，那麼它 會是你很好的助手。

網站地圖是你需要依賴的核心，但永遠不應該完全轉移到移動 APP上。如果你認為你的APP仍然充斥著信息，你可以通過組合不同類型的菜單添加一些空間。

正如你在圖片上可以看到的，APP的標準屏幕示例，在移動設備上會有幾個傳遞信息的選項。

有很多不同類型的菜單並不取決於平台，像頂部菜單，底部菜單和側邊菜單。此外，屏幕上的卡片也可以以不同的方式放置，比如，它們可以放在一個屏幕上，或者被划到右側。

為了方便使用和卸載 APP，你可以使用組合核心，當所有的主要功能都被放置在頂部或底部菜單中時，卡片會被刷新，側邊菜單被用於其他功能（反饋、技術支持、公司信息等等）。

你需要跟哪些網路組件說再見

儘管在將你的項目從網頁轉移到移動端時需要保持許多特性，但是有一組基本的網頁元素是你不需要轉移的。首先，它的頁腳，頁眉，麵包屑，複雜的分層場景和重品牌。

讓我們多談一下重品牌的問題。在你的 APP中只需要使用現有品牌的配色方案，就足以讓你的圖標和屏幕上彰顯品牌性。你的 APP仍然會引人注目，因為當你下載一個APP時，你會看到一個圖標和出版商的名字，這已經足夠了。不要讓你的APP充斥著品牌元素，它的主要關注點應該是用方便實用的功能去幫助用戶解決他們的任務，達到你的目標。

我想要給一些能幫助你簡化設計流程的建議。

• 更多的屏幕不等於更方便
• 較少的功能並不總是正確的決策
• 將你的網頁項目邏輯最大化並不總是勝利

記住，移動APP不總是你的網站的一個輕量版本。此外，移動 APP序在其結構中往往與網頁項目一樣複雜。

我想提的是，對於這樣的項目，在一定程度上最好有獨立的移動端設計師。即使你有優秀的網頁設計師，他仍然無法想像所有的移動特性。

有什麼是網頁設計師不知道的

在為移動 APP創建設計時，你總是需要根據應用商店的指導方針來工作。移動APP的結構和邏輯與網頁項目有很大的不同。你需要將你的注意力轉移到授權和用戶的匿名化上。 一般用戶使用屏幕的時間，更多來自於手勢和動畫，如果在網頁上，用滑鼠點擊屏幕就足夠了，在移動 APP中，我們會有更多的手勢，像推動，雙擊，長按，滑動和其他與你的屏幕交互的方式。

有什麼移動APP能做，網站不能做的

繼續討論移動和網路之間的差異，其中最重要的是需要考慮到APP 與網站的不同之處。你的網站沒有必要總是在你的手上，因為它需要網路來載入，所以它不能根據你的位置給你發送推送通知和各種各樣的優惠。

此外，平台上各種各樣的本地功能，只有移動設備才能訪問。例如蘋果/安卓支付，與智能手錶、日曆、地圖、錢包等的同步。

我們談到了設計，但是關於開發呢？

正如我在一開始提到的，移動 APP的開發周期要比創建移動版網站要長得多。

通常，網頁項目更便宜，因為在移動APP開發過程中，你需要伺服器，與其他APP的集成以及平台的本地功能。

每個平台都需要自己的開發，移動端模型不是動態的，你需要根據需要的平台數量來創建幾個版本。

我想說的重點是，移動APP並不總是網站的一個輕量版本。這就是為什麼在你的網頁項目轉移到移動APP時，你需要考慮到你的APP許多特性，才能在應用商店中發布，以及實現你的目標。

以上是翻譯的文章。從市場行情來看，設計師從事移動端的薪水待遇也要比做網頁端平均高一些~如果大傢伙不考慮興趣因素的話，建議轉向移動端~

人最大的修養，是知人不評人。 不懂別人就少說話，議論最掉價。

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：