如何(he)根據你(ni)的(de)網(wang)站創建一個移動 APP
如何(he)根據你(ni)的(de)網(wang)站創建一個移動 APP-移動閱讀二(er)維(wei)碼


如今,每一家具備在線業務的(de)第(di)三(san)方(fang)公司都在考慮創建一個移動APP或移動版網(wang)站。今天,我們qiang)刺致巰履鬧址fang)式(shi)更(geng)方(fang)便,以(yi)及需要使用哪些技術用mei)湊鞣fu)移動市場(chang)。

 

從一開始,我想指出的(de)是,幾(ji)年前(qian)在“移動版本的(de)網(wang)站”下,我們qian)凳玖liao)需要單獨開發一個移動設備的(de)獨立版本,而現在這(zhe)個術語只意味(wei)著創建自適應模式(shi)的(de)方(fang)案(an)。

 

 

移動APP或移動版網(wang)站

 

浮現在任何(he)企業de)院V械de)第(di)一個問題(ti)是選擇什麼(me)chu)  桓 貧APP或一個自適應模型?

 

決定(ding)到底什麼(me)樣的(de)商業策(ce)略(lue)適合(he)于您,最重要的(de)是從開始制定(ding)攻(gong)克手機(ji)市場(chang)的(de)時刻開始,就(jiu)要找ye)瞿卸 de)目標。

如果(guo)你(ni)從整體局勢上來看,移動 APP似乎更(geng)可取,也更(geng)適合(he)投(tou)資。

 

從界面的(de)角度來看,移動APP總(zong)是qiang)雌qi)來chui)mei)觀,因為它們獨立于每個移動設備的(de)瀏覽器(qi)或者屏幕尺寸,他們是為特定(ding)的(de)平(ping)台(比如 iOS)而創建的(de)。安裝(zhuang)移動APP後,很少需要上網(wang)做後續工作。

 

不huai) ≡褚貧PP也有(you)一些缺(que)點。最大的(de)缺(que)點是資源,移動應用在開發過程中需要更(geng)多(duo)的(de)時間、金錢和人力資源chu)Tyu)估(gu)該項目的(de)推出將(jiang)更(geng)加困難,在應用商店中發布你(ni)的(de) APP可能需要花3天到幾(ji)周的(de)時間才行。

 

如果(guo)你(ni)不想從一種選擇跳轉到另一種選擇,那麼(me)你(ni)需要了(liao)解項目的(de)主要參數(shu)(可供選擇的(de)只有(you)3個)——你(ni)想達到的(de)目標,你(ni)的(de)預(yu)算(suan),你(ni)的(de)目標受眾。大多(duo)數(shu)情(qing)況(kuang)下,了(liao)解你(ni)的(de)預(yu)算(suan)就(jiu)足(zu)夠了(liao)——開發移動 APP更(geng)昂(ang)貴。如果(guo)你(ni)沒(mei)有(you)預(yu)算(suan)限(xian)制,最好是qiang)匆幌輪饕 勘輳喝綣guo)是這(zhe)樣,你(ni)只需要提(ti)高你(ni)的(de) Google索引(移動優(you)先的(de)方(fang)法),這(zhe)比開發移動版本的(de)網(wang)站還(huai)管用。

 

如果(guo)你(ni)仍然不知(zhi)道該選擇什麼(me),那麼(me)我有(you)一個折中的(de)建議——帶(dai)有(you)瀏覽器(qi)組(zu)件的(de)移動APP

 

我可以(yi)給你(ni)舉(ju)一個例子,就(jiu)是著名的(de)?IMDB應用程序。頁(ye)面的(de)主模板在應用程序中,而一些頁(ye)面(即將(jiang)上映的(de)新電影)則是從瀏覽器(qi)中加載(zai)的(de)。在這(zhe)種情(qing)況(kuang)下,你(ni)只需使用mei)? wang)來加載(zai)新的(de)內容(電影),但是你(ni)的(de)應用程序將(jiang)會在沒(mei)有(you)網(wang)的(de)情(qing)況(kuang)下整體上穩定(ding)運行。

 

 

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

 

根據我們的(de)經驗,在創建移動APP時,根據你(ni)的(de)目標,我們qiang)梢yi)看到幾(ji)個原(yuan)因。主要的(de)原(yuan)因是你(ni)想要收集並擴(kuo)大用mei) shu)據庫,並且進入新的(de)移動用mei) 骸Syou)時,是因為公司想要引領(ling)潮流,站在技術和創新的(de)前(qian)沿。此外,看看你(ni)的(de)競爭對(dui)手,如果(guo)他們當中的(de)前(qian)五(wu)名都有(you)移動APP,那麼(me)最好的(de)方(fang)法是跟隨他們,保持(chi)競爭力。

 

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

 

選擇平(ping)台

 

首先,你(ni)需要在平(ping)台上做出決定(ding)。你(ni)不需要同時為所有(you)平(ping)台開發一款APP。此外,我們建議從一個平(ping)台開始,也許你(ni)根根就(jiu)不需要其(qi)它類型的(de)平(ping)台了(liao)。

 

要選擇一個平(ping)台,你(ni)需要確定(ding)你(ni)的(de) APP的(de)目標和你(ni)想到達的(de)受眾。如果(guo)你(ni)想從你(ni)的(de)APP中賺錢,專注于商業用mei)? 敲me)從iOS開始ji)geng)好,因為它的(de)付費用mei)?畽duo)。如果(guo)你(ni)想要吸引更(geng)多(duo)的(de)受眾,你(ni)的(de)APP 沒(mei)有(you)內購(gou),最好me)ndroid開始——大多(duo)數(shu)廣泛(fan)使用的(de)設備在這(zhe)個平(ping)台上工作。


決定(ding)移動APP的(de)任務

 

在這(zhe)個階段,你(ni)需要考慮你(ni)的(de)APP將(jiang)解決的(de)任務。

 

你(ni)的(de)主要目標將(jiang)幫助你(ni)構(gou)造(zao)APP的(de)任務池。舉(ju)個例子,想象一下,你(ni)決定(ding)為你(ni)的(de)在線商店創建一個APP,目標是讓(rang)你(ni)的(de)客戶(hu)有(you)能力通過平(ping)板電腦和智能手機(ji)選擇和購(gou)買商品。

 

基于這(zhe)個目標,你(ni)可以(yi)形成一個任務池︰你(ni)需要方(fang)便的(de)導航、商品搜索、快速(su)排序處理、跟蹤和同步(bu)。

 

如果(guo)你(ni)有(you)不同的(de)目標,比如在你(ni)的(de)商店運行期間引入社交huai)δ埽 敲me)任務也會有(you)所不同。對(dui)于這(zhe)種目標,舉(ju)個例子,你(ni)可以(yi)在你(ni)的(de)商店中加入輕社交,用mei)?梢yi)在照片上標記(ji)項目(這(zhe)些標簽(qian)將(jiang)會通向特定(ding)的(de)專題(ti)頁(ye)面)。通過這(zhe)樣做,你(ni)就(jiu)可以(yi)解決你(ni)的(de)主要銷售(shou)目標,同時提(ti)高你(ni)的(de)客戶(hu)忠ye)隙齲 yi)及他們在商店生活的(de)參與度。

 

 

如果(guo)你(ni)的(de)目標是征服(fu)一個國際市場(chang),那麼(me)你(ni)的(de)應用就(jiu)需要解決其(qi)他問題(ti)。首先,它必須適應新的(de)市場(chang)。這(zhe)里我們舉(ju)例,如果(guo)你(ni)要去中國市場(chang),你(ni)最好讓(rang)你(ni)的(de)APP能夠掃二(er)維(wei)碼。

 

 

 

在定(ding)義(yi)完任務之後做什麼(me)

 

在這(zhe)個階段,有(you)必要進行競爭對(dui)手zhi)PP分析(如果(guo)你(ni)以(yi)前(qian)沒(mei)有(you)做過的(de)話)。如果(guo)你(ni)想讓(rang)你(ni)的(de)APP解決相同的(de)任務,現zhong)械de)APP都能解決,那麼(me)最好再多(duo)想想。你(ni)還(huai)能做些什麼(me)來從競爭者中脫穎而出呢?

 

記(ji)住,當你(ni)創建一個移動 APP時,你(ni)不需要把所有(you)可能的(de)功能都裝(zhuang)進去。最好mei)huai)是保持(chi)一兩個主要功能,集中開發于它。

 

根據你(ni)的(de)主要功能,決定(ding)你(ni)的(de)應用將(jiang)具有(you)哪些組(zu)件。最後,你(ni)準備好了(liao)繼續。

在項目的(de)這(zhe)個階段,我們經常(chang)會有(you)一個問題(ti),那就(jiu)是有(you)沒(mei)有(you)必要把你(ni)的(de)網(wang)頁(ye)結構(gou)完全(quan)地應用到這(zhe)個APP中。在某些情(qing)況(kuang)下,你(ni)可能會認為許多(duo)組(zu)件都被遺漏了(liao),但實際上並非總(zong)是如此。我們的(de)關鍵(jian)任務是從網(wang)絡上遷移用mei)?僥ni)的(de)移動APP,而不會丟失他以(yi)前(qian)經常(chang)使用的(de)關鍵(jian)功能。你(ni)的(de)應用程序不需要在給用mei) 礪ma)煩(fan)的(de)情(qing)況(kuang)下工作。

 

讓(rang)我們qiang)純匆桓黽虻?de)例子,建築材(cai)料的(de)線上商店提(ti)供了(liao)大量的(de)咨(zi)詢形式(shi),有(you)許多(duo)可供選擇的(de)選項,比如交付類型(到付或自付),材(cai)料的(de)數(shu)量,在哪里樓層交付你(ni)的(de)訂單等等。如果(guo)你(ni)排除了(liao)交付選項的(de)類型,那麼(me)習慣(guan)了(liao)網(wang)絡表(biao)單的(de)用mei)?贍芑嵩詮δ苤忻允?Uzhe)將(jiang)導致lu)┐?de)丟失和tou)dui)不方(fang)便APP的(de)卸dui)zai)。

 

這(zhe)就(jiu)是為什麼(me)當你(ni)把結構(gou)從網(wang)絡遷移到移動APP的(de)時候,我們需要考慮用mei)? chang)使用的(de)功能特性。在某些情(qing)況(kuang)下,網(wang)站地圖(tu)可能會幫助你(ni)。不huai) ni)也需要對(dui)網(wang)站地圖(tu)保持(chi)謹慎。

 

 

如何(he)使用網(wang)站地圖(tu)

 

如果(guo)你(ni)決定(ding)將(jiang)你(ni)的(de)網(wang)站地圖(tu)應用到你(ni)的(de)移動APP中,那麼(me)你(ni)將(jiang)面臨(lin)致命的(de)後果(guo)。你(ni)會混淆你(ni)自己和你(ni)的(de)用mei)? PP功能冗雜,使用變得(de)不方(fang)便。

 

如果(guo)你(ni)真的(de)想不忘記(ji)任何(he)必要的(de)細(xi)節,把網(wang)站地圖(tu)作為移動APP的(de)參考,那麼(me)它 會是你(ni)很好的(de)助手。

 

網(wang)站地圖(tu)是你(ni)需要依賴的(de)核心,但永遠(yuan)不應該完全(quan)轉移到移動 APP上。如果(guo)你(ni)認為你(ni)的(de)APP仍然充斥著信息(xi),你(ni)可以(yi)通過組(zu)合(he)不同類型的(de)菜(cai)單添加一些空(kong)間。

 

正如你(ni)在圖(tu)片上可以(yi)看到的(de),APP的(de)標準屏幕示例,在移動設備上會有(you)幾(ji)個傳(chuan)遞信息(xi)的(de)選項。

有(you)很多(duo)不同類型的(de)菜(cai)單並不取決于平(ping)台,像(xiang)頂部菜(cai)單,底部菜(cai)單和側(ce)邊(bian)菜(cai)單。此外,屏幕上的(de)卡(ka)片也可以(yi)以(yi)不同的(de)方(fang)式(shi)放置,比如,它們qiang)梢yi)放在一個屏幕上,或者被劃(hua)到jie)也ce)。

 

為了(liao)方(fang)便使用和卸dui)zai) APP,你(ni)可以(yi)使用mi)zu)合(he)核心,當所有(you)的(de)主要功能都被放置在頂部或底部菜(cai)單中時,卡(ka)片會被刷新,側(ce)邊(bian)菜(cai)單被用于其(qi)他功能(反饋、技術支持(chi)、公司信息(xi)等等)。

 

 

你(ni)需要跟哪些網(wang)絡組(zu)件說再見

 

盡管在將(jiang)你(ni)的(de)項目從網(wang)頁(ye)轉移到移動端時需要保持(chi)許多(duo)特性,但是有(you)一組(zu)基本的(de)網(wang)頁(ye)元素是你(ni)不需要轉移的(de)。首先,它的(de)頁(ye)腳,頁(ye)眉,面包屑,復雜的(de)分層場(chang)景ang)橢仄放啤/p>

 

讓(rang)我們多(duo)談一下重品牌的(de)問題(ti)。在你(ni)的(de) APP中只需要使用現zhong)釁放頻de)配色方(fang)案(an),就(jiu)足(zu)以(yi)讓(rang)你(ni)的(de)圖(tu)標和屏幕上彰顯(xian)品牌性。你(ni)的(de) APP仍然會引人注目,因為當你(ni)下lue)zai)一個APP時,你(ni)會看到一個圖(tu)標和出版商的(de)名字,這(zhe)已(yi)經足(zu)夠了(liao)。不要讓(rang)你(ni)的(de)APP充斥著品牌元素,它的(de)主要關注點應該是用方(fang)便實用的(de)功能去幫助用mei)?餼鏊塹de)任務,達到你(ni)的(de)目標。

 

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

 

  • 更(geng)多(duo)的(de)屏幕不等于更(geng)方(fang)便
  • 較少的(de)功能並不總(zong)是正確的(de)決策(ce)
  • 將(jiang)你(ni)的(de)網(wang)頁(ye)項目邏(luo)輯最大化並不總(zong)是勝利

 

記(ji)住,移動APP不總(zong)是你(ni)的(de)網(wang)站的(de)一個輕量版本。此外,移動 APP序在其(qi)結構(gou)中往往與網(wang)頁(ye)項目一樣復雜。

 

我想提(ti)的(de)是,對(dui)于這(zhe)樣的(de)項目,在一定(ding)程度上最好有(you)獨立的(de)移動端設計師。即使你(ni)有(you)優(you)秀的(de)網(wang)頁(ye)設計師,他仍然無法想象所有(you)的(de)移動特性。

 

 

有(you)什麼(me)是網(wang)頁(ye)設計師不知(zhi)道的(de)

 

在為移動 APP創建設計時,你(ni)總(zong)是需要根據應用商店的(de)指導方(fang)針來工作。移動APP的(de)結構(gou)gou)吐luo)輯與網(wang)頁(ye)項目有(you)很大的(de)不同。你(ni)需要將(jiang)你(ni)的(de)注意力轉移到授(shou)權(quan)和用mei)?de)匿名化上。 一般(ban)用mei) 褂悶聊壞de)時間,更(geng)多(duo)來自于手勢和tou)   綣guo)在網(wang)頁(ye)上,用鼠標點擊屏幕就(jiu)足(zu)夠了(liao),在移動 APP中,我們會有(you)更(geng)多(duo)的(de)手勢,像(xiang)推動,雙擊,長按,滑動和其(qi)他與你(ni)的(de)屏幕交互的(de)方(fang)式(shi)。

 

 

有(you)什麼(me)移動APP能做,網(wang)站不能做的(de)

 

繼續討論移動和網(wang)絡之間的(de)差異(yi),其(qi)中最重要的(de)是需要考慮到APP 與網(wang)站的(de)不同之處。你(ni)的(de)網(wang)站沒(mei)有(you)必要總(zong)是在你(ni)的(de)手上,因為它需要網(wang)絡來加載(zai),所以(yi)它不能根據你(ni)的(de)位置給你(ni)發送推送通知(zhi)和各種各樣的(de)優(you)惠。

 

此外,平(ping)台上xi)髦指餮de)本地功能,只有(you)移動設備才能訪問。例如隻huai)安卓支付,與智能手表(biao)、日歷、地圖(tu)、錢包等的(de)同步(bu)。

 

 

我們談到了(liao)設計,但是關于開發呢?

 

正如我yi)諞豢 繼ti)到的(de),移動 APP的(de)開發周期要比創建移動版網(wang)站要長得(de)多(duo)。

通常(chang),網(wang)頁(ye)項目更(geng)便宜(yi),因為在移動APP開發過程中,你(ni)需要服(fu)務器(qi),與其(qi)他APP的(de)集成以(yi)及平(ping)台的(de)本地功能。

 

每個平(ping)台都需要自己的(de)開發,移動端模型不是動態的(de),你(ni)需要根據需要的(de)平(ping)台數(shu)量來創建幾(ji)個版本。

 

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

 

 


 

以(yi)上是翻譯的(de)文章。從you)諧chang)行情(qing)來看,設計師從you)亂貧 說de)薪水待遇也要比做網(wang)頁(ye)端平(ping)均高一些~如果(guo)大家伙不考慮興趣(qu)因素的(de)話,建議轉向移動端~

原(yuan)文︰How to create a mobile app based on your website
原(yuan)文地址︰https://medium.muz.li/how-to-create-a-mobile-app-based-on-your-website-a85da836b7f6
作者︰Elena Lysiakova
翻譯︰Tsien

——————————————–

作者簡介︰Sophia的(de)玲瓏閣,一枚愛(ai)折騰,愛(ai)健身的(de)交互設計妹(mei)紙。
職場(chang)設計技能,更(geng)多(duo)教程搶(qiang)先看,請關注作者的(de)微信公眾號︰Sophia的(de)玲瓏閣

本文鏈(lian)接(jie)︰http://www.mobileui.cn/create-a-mobile-app-based-on-your-website.html
本文標簽(qian): , , ,