App 設計與 web 設計的主要區別是什麼？
1、需求場景
首先，兩者對應的需求場景不同，這會相應地導致功能點的優先順序變動，進而影響到界面控制項和信息元素。比如，大眾點評網web端肯定優先考慮讓用戶寫點評，而手機端更偏向於找到周圍的餐館。2、手機界面元素更精簡手機端顯示面積有限，需要對用戶需求有更精準的把握，每個頁面上呈現的元素更加精確。
3、手機端更講究「藏」web端可以隱藏用戶不太關注的元素，僅在滑鼠hover時才展示出來。而手機沒有hover態，同時面積又小，逼迫設計師學會更多藏信息的方法。4、手機端的手勢操作更自然有些web端也在用滑鼠模仿手勢，但畢竟不太自然。而手機端可以使用單個及多個手指進行自然的控制，是web端不可匹敵的。
這個問題我在剛接觸交互設計的時候也疑惑過，我覺得在知道「該怎麼設計」之前，需要明確的是它們各自到底「是什麼」：定義，以及自身的優勢和局限。通過網上搜索，我發現了一篇解釋得比較全面的文章，翻譯成了中文，希望對大家有所啟發。
作者：Aaron Carpenter
於2015年6月18日發表Legendary Lion在上。原文鏈接：Mobile Apps vs Mobile Responsive Web Applications譯者：陳凌霜 Liz Chen，更多文章見專欄：凌霜 | 設計 - 知乎專欄
譯者註：
現在關於移動應用的概念有許多：Native App, Responsive Web, Web App, Hybrid App，搞清楚這幾個概念的區別和各自的優劣對於設計師來說很重要，這篇文章較為全面地探討了這幾個概念，值得初學者閱讀，也歡迎大家提出自己的觀點。鑒於在中文語境中，一些英語名詞是直接拿來使用，並無統一標準的中文翻譯。為了方便廣大讀者閱讀，譯者首先把這些名詞單獨拿出來翻譯，只為傳達大致的意思，並不一定是標準化的名稱。鑒於譯者對於技術名詞的理解有限，有翻譯不到位的地方也請大家多多指出。
App：應用（程序）
Mobile App ：移動應用（程序）
Mobile Responsive Web：移動響應式網頁 Web Applications（也可稱為Web App)：網頁應用（程序） 【未經許可，請勿轉載】移動應用及移動響應式網頁應用
移動應用程序是在新平台上連接市場、搜集客戶數據、提供服務的強有力工具。但，到底什麼才是移動應用?
從本質上來說，移動應用是運行在智能手機、平板電腦或者其他移動設備上的電腦程序。他們可以通過應用市場獲得，例如谷歌的Google Play或者蘋果的App Store。這些平台現在都運行在雲端（Cloud-based Solutions），意味著如果你的手機被卡車撞了或者掉進水裡了，你可以買個新手機，登陸，然後所有你的應用都會自動被重新安裝好。
圖：當你需要設置一個新的iOS設備或者在一個已有的設備上恢複數據，你的iCloud備份可以讓你輕鬆實現。
應用程序與移動響應式網頁
把移動應用程序和移動響應式網頁相比其實並不成立，他們完完全全是不同的概念。讓我們來看看這是為什麼。在移動端使用互聯網已經成為了一種穩定增加的趨勢。用戶越來越習慣於在他們的智能手機上搜索和瀏覽網頁。為了迎合這種需求，各種機構正花錢僱傭網頁工程師來提升用戶在移動設備上的在線使用體驗。你可能見過這種區分，比如亞馬遜網站在你的智能手機上和台式電腦上顯示得就不一樣。
事實上，移動響應式網頁和移動應用程序是蘋果和橙子的關係（譯者註：也就是兩者八竿子打不著）。移動網站是在瀏覽體驗上的一種變體。移動響應式網站改變了你瀏覽網頁的方式。更加準確的對比其實是強調移動應用程序和網頁應用程序的區別（想一想Pandora, Spotify, 谷歌文檔Google Docs, 臉書Facebook）（譯者註：沒法翻牆的同學可以想一想網易雲音樂、蝦米音樂、新浪微博）。這些就是那種表現得像電腦程序一樣的網站，因為，他們確實是。網頁應用就是互動式的（網頁的）電腦程序（應用程序）。
應用程序與網頁應用程序
這兩個是我們可以比較的。我和就職於Kitchen Digital的Michael Wahlstrom坐在一起，來比較他們各自的優缺點。移動應用程序的優點
單機（Internet Independent）和緩存（Caching）——即使沒有網路連接，也可以運行，這是移動應用的最主要的優點之一。也就是說，如果你想要製作一個應用，它可以讓用戶在一個資料庫裡面搜索信息、玩遊戲、或者拍照片，都可以通過移動應用程序來完成。數據可以存儲在移動設備中直到網路恢復連接，之後信息被重新輸送回網路中。
交互（Interactivity）和遊戲（Gaming）——雖然瀏覽器在交互和遊戲方面一直在進步，但是與計算和移動設備的原生程序語言相比，它們仍然處於落後狀態。因此，如果你準備製作一個有著超強交互體驗的產品，比如一個遊戲，移動應用程序可能是更好的選擇。
人們花費在移動設備和移動應用上的時間正在激增——SalesForce的一項研究表明：85%的被訪者說移動設備是他們每天生活的中心組成，這些人中90%的年紀在18-24歲。91%的消費者說能夠通過任何方式來訪問內容很重要。很明顯，在未來，以移動平台為中心是個明智的策略。（來源：http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf）
錦上添花的小功能——不可否認的是，Chrome已經宣布了在瀏覽器和移動設備上推送通知的功能。但是移動設備本身可以提供多得多的功能：藍牙、鄰近系統（Beacon）、地理定位（geofencing）、WiFi、通知推送、應用程序內付賬（谷歌的Google Play支持應用內購買），等等。
移動響應式網頁應用程序的優點
網頁應用的編程已經完成——由於很可能你已經完成了桌面端網頁應用的程序編寫，剩下來的只是審查移動端的用戶體驗，然後量身定做用戶界面，使得它對移動端更加友好（Mobile Friendly）。這意味著通過調整導航菜單、按鈕和字體尺寸以及輸入框，來創造出更好的移動端體驗（譯者註：實際操作起來不僅僅是調整以上這些這麼簡單，信息架構、交互方式得也需要做一定的調整來更好地適應移動端瀏覽器）。不依賴任何設備平台——網頁應用程序不依賴於操作系統（比如針對iOS和安卓需要不同的應用）。現在有一種混合技術可以讓移動應用開發者僅用一套代碼來讓應用程序同時適用這兩種操作平台，但目前為止這還是一項新型技術，且十分昂貴。而對一個網頁應用程序來說，開發者會針對最常見的網頁瀏覽器來進行設計。一旦完成，它可以在任何使用那些瀏覽器（如Chrome，火狐，IE）的設備上運行。
內容不受應用商店規定的限制——網頁應用程序存在於蘋果的App Store和谷歌的Google Play的規定之外，因此他們可以自己制定自己的規則。沒有額外的步驟來進入市場，沒有繁複縟節的束縛。
網頁或應用可以互相鏈接——這在行業中還屬新概念，意思是你可以把不同的應用鏈接起來達到1加1大於2的效果，或者把同屬於一個公司的產品鏈接起來。
*考慮WebGL的局限性——WebGL是網頁瀏覽器的圖像引擎。雖然它可以實現很多功能，但它還不是最好的用來實現移動端CPU密集型，及圖像密集型應用程序的引擎。
兩者共有或結合後的優點
賺錢——不管你採用兩者中哪種，你都可以設計出付費訂閱，然後通過應用程序來賺錢。想讓用戶每人每月付5美元？或者付一次性15美元的費用？沒問題。就算你想要它變成消耗品（在應用內下載所付的錢），這兩種平台都可以幫你達到。結合——這兩種技術都可以保證你可以從手機上得到想要的信息。但是，取決於你想讓你的應用幹什麼，你甚至可以考慮設計一個混合型的應用，把網頁應用開發和移動應用開發相結合。
我應該如何決定？做出一個明智決定的最好方法是諮詢專家。你的開發者將會問你許多問題，甚至比上述提到的概念還要多，為了理解你的應用如何才能最好地執行，以及建立在什麼樣的平台和技術之上。當然你可以同時諮詢多個開發者，但是要記住：應用開發是一半藝術一半科學。開發者們可能在如何實施你的想法上有不同的看法，並且可能會往自己的方向上思考，從而可以在他們的專長領域來為你提供更多的價值。
不管用哪種方式，應用開發是一個漫長的過程，需要合理的預算。準備好接受五位數的報價，並且在開始開發前弄清楚投資回報率和對用戶的價值，以決定應用程序是否可行。假設LZ說的App是指現在智能手機上的應用，那麼我認為會有以下的不同
1、物理界面的不同因顯示面積差異化，對解決核心需求不重要的功能和內容要去掉或隱藏不常用功能。信息和功能點的布局需要符合在小屏下的方便的展示，比如iOS上的menu bar導航方式，或者9官格方式，其實都是把web上常規的導航方式適應智能手機的操作和顯示特性而做出的變化。2、硬體和操作方式特性不同
在web上的產品，除了很大的顯示設備外，我們使用物理的滑鼠輔以全尺寸的物理鍵盤進行操作，每一個頁面(界面)的切換除了可以包含更多的信息量外，其每個頁面可以是同時保留在屏幕中的，可以同時獲取信息甚至同時操作。介在手機上的app就很難實現這一點，因為需要是線性的流操作，並且有很好的回退機制。另外，不管是手機的物理鍵盤還是虛擬鍵盤，其輸入都有一定的成本和不方便，所以要儘可能的減少用戶輸入操作。同時，手機有桌面設備沒有的硬體特性，比如定位，拍照，各種感測器，所以手機app可以充分利用這些硬體的特長來發揮手持設備應用的想像力。從web產品轉成App產品聊聊我的感受
剛開始做App的需求知道的第一個概念就是需求封版。顧名思義，這個版本不能提新需求，也不能改需求了（這裡的需求說的App的需求，後台傳的東西還是可以改的）。之前做Web產品的時候隨時改隨時上線，無縫修改。但是App因為涉及打包上架，還有萬惡的app store審核，還有用戶更新的問題。所以要改需求不好意思只能等到下一版了。下一版啥時發，少說也要兩周吧。所以做需求的時候得細緻再細緻，沒想清楚的寧可不做。因為上了線再改問題就大了。
以前做Web設計先畫一個1200px的框，填完核心功能總覺得太空，總在想用戶還會有啥需求可以放在這裡呢，是不是需要個運營位，是不是放個快捷的操作工具條。是不是上面放個分頁下面再放個分頁。
現在做設計畫一個640px的框，填完核心功能總覺得太擠，總在想這個能不能砍那個能不能砍，最好一個頁面就放一個搜索框。現在經常跟工程師討論，ios能做成這樣android為啥不行。以前做web根本不用考慮這個
轉App產品設計才知道要專門出個文檔寫各種push需求，什麼條件下push，出什麼文案，點擊後跳轉到哪裡，push失敗了怎麼辦是重新發，還是可以不發。
轉App產品設計才知道有個東西叫GPS上報，多長時間上報一次，上報失敗了怎麼辦，用戶禁用了GPS怎麼辦，用戶沒禁用，但是拿不到GPS數據怎麼辦
App工程師第一次問我斷網了怎麼辦，哪些功能還能用，哪些功能不能用給用戶什麼提示。額....，好吧，我其實還沒想斷網了用戶還能用的問題。哪些數據是緩存哪些是線上，同步策略是怎樣的。額....，好吧
你的頁面跳轉邏輯文檔，怎麼都沒寫點擊左上角返回到哪裡。push進來的頁面返回哪裡，打開H5後返回到哪裡，正常邏輯怎麼返回。 Web設計的返回都是瀏覽器做的好么。
做web設計的時候做列表設計一般有個習慣，在下面直接放個分頁工具條。後來一不小心把這個習慣也帶過來了，結果組內評審就被問你分頁的意思是下拉載入更多麼....
以前工程師開發完，看效果開幾個瀏覽器就行了。現在每次都得找測試同學找好幾部手機，一部一部試做App設計不只是多了很多新東西，也減少了一些我們熟悉的東西
對新手來說，一個界面大一個界面小。對中手來說，設計範式和使用場景不一樣。對高手來說，都一樣。
最俗氣的區別就是：app你需要思考怎麼去除才能讓塞不下的屏幕能塞下必要的東西web你需要思考怎麼才能增加些東西讓空蕩的屏幕不會顯得太空蕩
手機作答被吞，摸掉眼淚繼續作答……
在實習時參與過移動端和PC端的產品工作，雖然移動端不是app而是H5，但好歹有一兩點認識可以和大家分享一下，請大家多多指教啦。
一 在不同場景下用戶心理的不同
在PC端，展示面積比較大，展示效率也比較高，用戶的耐心比較好，所以適合展示比較豐富的內容，也適合在一個頁面里安排較複雜的操作；在移動端，展示面積比較小，展示效率也比較低，用戶的耐心不佳，不適宜像PC那樣包羅萬象，而必須重點突出，產品鏈路也須儘可能的短。二 在不同場景下用戶需求的不同
筆者做過用戶調研，發現用戶在移動端和PC端使用需求有明顯的不同。舉個例子，用戶在PC端登錄淘寶，更傾向於去「逛」和選購，但在移動端來說，因為碎片化和實時在線的特點，用戶更喜歡「閃購」、「秒殺」等產品形態。不過，隨著用戶的盈餘時間朝移動端轉移的越來越多越來越明顯，用戶在PC和移動端的需求的差別也變得模糊起來。三 不同場景下交互設計的側重點不同
在PC端因為容納的信息比較豐富，在產品設計時應該注意把信息有序地組織起來。如果網頁比較長的話，還應該注意到越往後的，用戶跳出的越多，所以網頁的首屏應該放導航和最重要的區塊，中部放操作比較複雜和內容比較有吸引力的區塊，後部放優先順序最低的以及分流用的區塊等；在移動端則首先要注意到導航的重要性。對於PC來說，因為跳出成本較低，用戶的瀏覽軌跡的雜亂無章的；而在移動端，跳出成本較高，用戶瀏覽的軌跡基本是線性的。在這種情況下，產品設計時務必在每個頁面都要有位置的標識，以告知用戶所處的層級，不然用戶操作時易迷惑和不自信。這種標識可以是tab可以是導航欄的文字，但一定要形式統一，層級明顯。先寫這麼多啦，用pc再改。利益相關：電商產品新人，實習時先後做過PC和移動端產品1.使用場景
相較於Web端的使用，App的使用場景通常更加複雜。醉翁云：「余平生所用爪機多在"三上"：乃馬上、枕上、廁上。」移動端使用場景的特點是時間短，頻率高，並且容易受到其他app和外界的干擾而中斷任務，概而言之即「碎片化」。因此在設計分析上非常強調對場景的理解和還原，需要考慮到各種可能干擾用戶操作的因素；在具體設計上要求層級不能太深，一般不超過3層；同時應簡化信息，突出重點；方便快速回到任務。2.屏幕尺寸
移動端的屏幕普遍較小，每一像素都顯得格外寶貴，通常一屏只展現一個頁面或一個主題。這同樣在設計上要求精簡界面信息，突出界面重點，合理地利用界面邊界上下左右的擴展空間。3.交互方式
Web端一般依賴滑鼠進行點擊，App則通常直接用手指操作。滑鼠游標在準確性上大於指尖，同時滑鼠有懸浮及右鍵操作。而App直接採用手指操作的優勢在於更加直接自然，配合各種手勢可以更加靈活，在一定意義上相當於擴展了屏幕的「面積」。諸如縮放、旋轉等操作相較於Web端更加方便且學習成本更低。同時移動端還可以採用動作、語音等多種交互方式。因此在設計上應該根據信息的重要程度、使用場景以及信息對應的心理模型等方面靈活地採用多種操作方式。4.輸入輸出
第3點已經提到了Web和App在主要輸入方式上的區別，這邊主要想表達的是相較於Web端，智能手機內置的各種感測器使得它能夠獲得更多維度的信息。主要表現在：同一操作，智能手機能夠獲取得到信息更多，例如同樣是「點擊」，點擊的力度、頻率、持續時間等都可以成為有意義的數據並反映在交互結果上；同時，智能手機等智能設備能夠更方便地獲取用戶的指紋、心率等生理數據以及所處環境的位置、方位、溫度、光照、環境音等多維度的信息並用於有用的輸出。在輸出上，除了視覺和聽覺層面，智能手機還可以額外輸出震動反饋。（當然，鍵盤滑鼠也有震動反饋，不過是被動的且意義比較單一。）5.平台規範
移動端的設計具有更嚴格的規範要求。針對不同平台的應用設計，謹慎地遵循平台規範有助於降低用戶的學習成本，也是優秀體驗的重要保障。6.其他
針對移動端的設計，用戶所處環境的網路狀況、隱私及相關許可權問題等都需要給予更多的考慮。邊想邊寫，有機會再系統地理一下，望能有所幫助。手和滑鼠的區別
移動端有很多感測器。
可以更多的感知用戶狀態，來根據狀態自動化智能化完成用戶想要做的任務。
例如，地圖，網頁打開地圖是城市圖，手機打開是當前位置，看到周圍的相關信息。可以在交互做一些有趣的設計。
例如，最美壁紙，傾斜手機，壁紙會進行移動。iPhone 的指紋認證，誰用誰知道好。移動端的觸摸交互和和滑鼠鍵盤交互，更符合用戶自然的使用習慣。例如，多點觸控。
恩，想到再補充。單設計而言，首先終端不一樣導致了各種用戶體驗差，而且app根據平台區別有相關的設計規範約束(因此設計物料也多，各種解析度的切圖，各種倍數的icons，各種適配，這比web設計師和web前端膩歪的多)，設計規範當然都是好的。而web設計發展這麼多年，因為終端界面，網路傳輸，用戶體驗等的發展，已經比平面設計更有趣了，各種色彩豐富，各種特效，各種形大於用，這幾年的響應式設計也似乎在統一web設計，方向都是好的
發展到最後應該都是一樣的，現在就是大腦延伸操作媒介的不同
是否有地址欄。
你能打對 App 為什麼打不對 Web ？
推薦閱讀：
※如何精準推送？
※為什麼iPad Air 2取消了靜音撥片？會產生什麼不便？
※一款優秀 APP 的交互設計，怎樣學習和借鑒呢？
※iOS 和 Android ，體驗差多少？
※在Windows Feedback中反饋的支持數很少的小bug能被微軟關注到並得到修復嗎？